noph-ui 0.11.2 → 0.11.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/card/Card.svelte +1 -0
  2. package/dist/chip/ChipSet.svelte +19 -0
  3. package/dist/chip/ChipSet.svelte.d.ts +7 -0
  4. package/dist/chip/FilterChip.svelte +23 -4
  5. package/dist/chip/FilterChip.svelte.d.ts +1 -1
  6. package/dist/chip/index.d.ts +1 -0
  7. package/dist/chip/index.js +1 -0
  8. package/dist/chip/types.d.ts +4 -0
  9. package/dist/dialog/Dialog.svelte +48 -30
  10. package/dist/icons/Icon.svelte +1 -1
  11. package/dist/navigation-drawer/NavigationDrawer.svelte +19 -9
  12. package/package.json +1 -1
package/dist/card/Card.svelte CHANGED
@@ -22,6 +22,7 @@
22
22
 
23
23
  $effect(() => {
24
24
  if (disabled && element) {
25
+ // eslint-disable-next-line no-undef
25
26
  const formElements: NodeListOf<
26
27
  HTMLButtonElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
27
28
  > = element.querySelectorAll('input, button, select, textarea')
package/dist/chip/ChipSet.svelte ADDED
@@ -0,0 +1,19 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from 'svelte'
3
+
4
+ let { children }: { children?: Snippet } = $props()
5
+ </script>
6
+
7
+ {#if children}
8
+ <div class="np-chip-set" role="toolbar">
9
+ {@render children()}
10
+ </div>
11
+ {/if}
12
+
13
+ <style>
14
+ .np-chip-set {
15
+ display: flex;
16
+ flex-wrap: wrap;
17
+ gap: 0.5rem;
18
+ }
19
+ </style>
package/dist/chip/ChipSet.svelte.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import type { Snippet } from 'svelte';
2
+ type $$ComponentProps = {
3
+ children?: Snippet;
4
+ };
5
+ declare const ChipSet: import("svelte").Component<$$ComponentProps, {}, "">;
6
+ type ChipSet = ReturnType<typeof ChipSet>;
7
+ export default ChipSet;
package/dist/chip/FilterChip.svelte CHANGED
@@ -12,7 +12,11 @@
12
12
  disabled = false,
13
13
  label = '',
14
14
  icon,
15
+ element = $bindable(),
15
16
  ariaLabelRemove = 'Remove',
17
+ remove,
18
+ select,
19
+ deselect,
16
20
  ...attributes
17
21
  }: FilterChipProps = $props()
18
22
 
@@ -21,6 +25,7 @@
21
25
 
22
26
  <div
23
27
  {...attributes}
28
+ bind:this={element}
24
29
  class={[
25
30
  'np-filter-chip',
26
31
  elevated ? 'np-filter-chip-elevated' : 'np-filter-chip-default',
@@ -36,12 +41,19 @@
36
41
  class="np-filter-chip-btn"
37
42
  {disabled}
38
43
  onclick={() => {
39
- console.log('click')
44
+ if (element === undefined) return
45
+ if (selected) {
46
+ deselect?.(element)
47
+ } else {
48
+ select?.(element)
49
+ }
40
50
  selected = !selected
41
51
  }}
42
52
  >
43
53
  {#if icon && !selected}
44
- {@render icon()}
54
+ <div class="np-chip-icon">
55
+ {@render icon()}
56
+ </div>
45
57
  {/if}
46
58
  {#if selected}
47
59
  <CheckIcon width={18} height={18} />
@@ -58,8 +70,11 @@
58
70
  --np-icon-button-container-width="1.75rem"
59
71
  --np-icon-button-icon-size="1.125rem"
60
72
  aria-label={ariaLabelRemove}
61
- onclick={(event: Event) => {
62
- event.stopPropagation()
73
+ onclick={() => {
74
+ if (element === undefined) {
75
+ return
76
+ }
77
+ remove?.(element)
63
78
  }}
64
79
  >
65
80
  <CloseIcon />
@@ -95,6 +110,10 @@
95
110
  padding-left: 1rem;
96
111
  padding-right: 1rem;
97
112
  }
113
+ .np-chip-icon {
114
+ color: var(--np-color-primary);
115
+ display: flex;
116
+ }
98
117
  .np-filter-chip-icon .np-filter-chip-btn {
99
118
  padding-left: 0.5rem;
100
119
  }
package/dist/chip/FilterChip.svelte.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import type { FilterChipProps } from './types.ts';
2
- declare const FilterChip: import("svelte").Component<FilterChipProps, {}, "selected">;
2
+ declare const FilterChip: import("svelte").Component<FilterChipProps, {}, "element" | "selected">;
3
3
  type FilterChip = ReturnType<typeof FilterChip>;
4
4
  export default FilterChip;
package/dist/chip/index.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export { default as FilterChip } from './FilterChip.svelte';
2
+ export { default as ChipSet } from './ChipSet.svelte';
package/dist/chip/index.js CHANGED
@@ -1 +1,2 @@
1
1
  export { default as FilterChip } from './FilterChip.svelte';
2
+ export { default as ChipSet } from './ChipSet.svelte';
package/dist/chip/types.d.ts CHANGED
@@ -8,4 +8,8 @@ export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
8
8
  label?: string;
9
9
  icon?: Snippet;
10
10
  ariaLabelRemove?: string;
11
+ element?: HTMLDivElement;
12
+ remove?: (chip: HTMLDivElement) => void;
13
+ select?: (chip: HTMLDivElement) => void;
14
+ deselect?: (chip: HTMLDivElement) => void;
11
15
  }
package/dist/dialog/Dialog.svelte CHANGED
@@ -24,30 +24,49 @@
24
24
  }
25
25
  </script>
26
26
 
27
- <div bind:this={element} class="np-dialog" popover="auto" role="dialog" {...attributes}>
28
- {#if icon}
29
- <div class="np-dialog-icon">
30
- {@render icon()}
31
- </div>
32
- {/if}
33
- <h1 class="np-dialog-headline" style={icon ? 'text-align: center' : ''}>{headline}</h1>
34
- {#if supportingText}
35
- <p class="np-dialog-supporting-text">{supportingText}</p>
36
- {/if}
37
- {#if divider}
38
- <Divider style="margin-top: 1rem" --np-divider-color="var(--np-color-outline)" />
39
- {/if}
40
- {#if children}
41
- {@render children()}
42
- {/if}
43
- {#if buttons}
44
- <div class="np-dialog-buttons">
45
- {@render buttons()}
46
- </div>
47
- {/if}
27
+ <div bind:this={element} popover="auto" class="np-dialog-container" {...attributes}>
28
+ <div
29
+ role="none"
30
+ class="np-backdrop"
31
+ onclick={() => {
32
+ element?.hidePopover()
33
+ }}
34
+ ></div>
35
+ <div class="np-dialog" role="dialog">
36
+ {#if icon}
37
+ <div class="np-dialog-icon">
38
+ {@render icon()}
39
+ </div>
40
+ {/if}
41
+ <h1 class="np-dialog-headline" style={icon ? 'text-align: center' : ''}>{headline}</h1>
42
+ {#if supportingText}
43
+ <p class="np-dialog-supporting-text">{supportingText}</p>
44
+ {/if}
45
+ {#if divider}
46
+ <Divider style="margin-top: 1rem" --np-divider-color="var(--np-color-outline)" />
47
+ {/if}
48
+ {#if children}
49
+ {@render children()}
50
+ {/if}
51
+ {#if buttons}
52
+ <div class="np-dialog-buttons">
53
+ {@render buttons()}
54
+ </div>
55
+ {/if}
56
+ </div>
48
57
  </div>
49
58
 
50
59
  <style>
60
+ .np-dialog-container {
61
+ background: transparent;
62
+ border: none;
63
+ padding: 9px 14px 20px 14px;
64
+ z-index: 1000;
65
+ padding: 2rem 1rem;
66
+ transition:
67
+ display 0.25s allow-discrete,
68
+ overlay 0.25s allow-discrete;
69
+ }
51
70
  .np-dialog {
52
71
  border: 0;
53
72
  min-width: 280px;
@@ -60,26 +79,25 @@
60
79
  max-height: 100dvh;
61
80
  scrollbar-color: var(--np-color-on-surface-variant) transparent;
62
81
  scrollbar-width: thin;
63
- transition:
64
- display 0.2s allow-discrete,
65
- overlay 0.2s allow-discrete,
66
- opacity 0.2s linear;
82
+ transition: opacity 0.25s ease;
67
83
  opacity: 0;
68
- z-index: 1;
69
84
  margin: auto;
85
+ position: relative;
70
86
  }
71
- .np-dialog:popover-open {
87
+ .np-dialog-container:popover-open .np-dialog {
72
88
  opacity: 1;
73
89
  @starting-style {
74
90
  opacity: 0;
75
91
  }
76
92
  }
77
- .np-dialog[popover]::backdrop {
93
+ .np-dialog-container[popover] .np-backdrop {
94
+ inset: 0;
95
+ position: fixed;
78
96
  background-color: var(--np-color-scrim);
79
97
  opacity: 0;
80
- transition: opacity 0.2s linear;
98
+ transition: opacity 0.25s ease;
81
99
  }
82
- .np-dialog[popover]:popover-open::backdrop {
100
+ .np-dialog-container[popover]:popover-open .np-backdrop {
83
101
  opacity: 0.38;
84
102
  @starting-style {
85
103
  opacity: 0;
package/dist/icons/Icon.svelte CHANGED
@@ -47,6 +47,6 @@
47
47
  </style>
48
48
  </svelte:head>
49
49
 
50
- <span {...attributes} class={['np-icon', attributes.class]} bind:this={element}
50
+ <span {...attributes} class={['np-icon', 'notranslate', attributes.class]} bind:this={element}
51
51
  >{@render children()}</span
52
52
  >
package/dist/navigation-drawer/NavigationDrawer.svelte CHANGED
@@ -21,6 +21,15 @@
21
21
  attributes.class,
22
22
  ]}
23
23
  >
24
+ {#if backdrop}
25
+ <div
26
+ role="none"
27
+ class="np-backdrop"
28
+ onclick={() => {
29
+ element?.hidePopover()
30
+ }}
31
+ ></div>
32
+ {/if}
24
33
  <div class={['np-navigation-wrapper', modal && 'np-navigation-drawer-shade']}>
25
34
  <div class="np-navigation-drawer">
26
35
  {#if children}
@@ -34,9 +43,6 @@
34
43
  .np-navigation-drawer-container {
35
44
  color: var(--np-color-on-surface-variant);
36
45
  width: calc(var(--np-navigation-drawer-width, 22.5rem) + 3px);
37
- overflow: hidden;
38
- scrollbar-width: thin;
39
- overflow-y: auto;
40
46
  border: 0;
41
47
  margin: 0;
42
48
  padding: 0;
@@ -52,16 +58,17 @@
52
58
  width: var(--np-navigation-drawer-width, 22.5rem);
53
59
  height: var(--np-navigation-drawer-height, 100dvh);
54
60
  overflow-y: auto;
61
+ scrollbar-width: thin;
55
62
  }
56
63
 
57
64
  .np-navigation-drawer-container[popover] .np-navigation-wrapper {
58
65
  transform: translateX(-100%);
59
- transition: transform 0.2s ease-in;
66
+ transition: transform 0.25s ease;
60
67
  }
61
68
  .np-navigation-drawer-container[popover] {
62
69
  transition:
63
- overlay 0.2s allow-discrete,
64
- display 0.2s allow-discrete;
70
+ overlay 0.25s allow-discrete,
71
+ display 0.25s allow-discrete;
65
72
  }
66
73
  .np-navigation-drawer-container:popover-open .np-navigation-wrapper {
67
74
  transform: translateX(0);
@@ -77,12 +84,15 @@
77
84
  .np-navigation-drawer-shade {
78
85
  box-shadow: var(--np-elevation-1);
79
86
  }
80
- .np-navigation-drawer-backdrop[popover]::backdrop {
87
+
88
+ .np-navigation-drawer-backdrop[popover] .np-backdrop {
89
+ inset: 0;
90
+ position: fixed;
81
91
  background-color: var(--np-color-scrim);
82
92
  opacity: 0;
83
- transition: opacity 0.2s linear;
93
+ transition: opacity 0.25s ease;
84
94
  }
85
- .np-navigation-drawer-backdrop[popover]:popover-open::backdrop {
95
+ .np-navigation-drawer-backdrop[popover]:popover-open .np-backdrop {
86
96
  opacity: 0.38;
87
97
  @starting-style {
88
98
  opacity: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.11.2",
3
+ "version": "0.11.5",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {