noph-ui 0.11.10 → 0.12.1

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 (8) hide show
  1. package/dist/button/types.d.ts +1 -1
  2. package/dist/checkbox/Checkbox.svelte +31 -20
  3. package/dist/checkbox/types.d.ts +1 -1
  4. package/dist/chip/FilterChip.svelte +31 -20
  5. package/dist/chip/types.d.ts +1 -1
  6. package/dist/dialog/Dialog.svelte +28 -12
  7. package/dist/dialog/types.d.ts +2 -1
  8. package/package.json +1 -1
package/dist/button/types.d.ts CHANGED
@@ -45,7 +45,7 @@ export interface SegmentedButtonProps extends HTMLAttributes<HTMLDivElement> {
45
45
  icon?: Snippet;
46
46
  onclick?: (event: Event) => void;
47
47
  }[];
48
- group?: string | number | null;
48
+ group?: string | number | (string | number)[] | null;
49
49
  element?: HTMLElement;
50
50
  }
51
51
  export {};
package/dist/checkbox/Checkbox.svelte CHANGED
@@ -10,31 +10,42 @@
10
10
  style,
11
11
  ...attributes
12
12
  }: CheckboxProps = $props()
13
+
14
+ $effect(() => {
15
+ if (group && attributes.value) {
16
+ checked = group.includes(attributes.value)
17
+ }
18
+ })
19
+
20
+ $effect(() => {
21
+ if (attributes.value && group) {
22
+ const index = group.indexOf(attributes.value)
23
+ if (checked) {
24
+ if (index < 0) {
25
+ group?.push(attributes.value)
26
+ group = group
27
+ }
28
+ } else {
29
+ if (index >= 0) {
30
+ group.splice(index, 1)
31
+ group = group
32
+ }
33
+ }
34
+ }
35
+ })
13
36
  </script>
14
37
 
15
38
  <div {style} class={['np-host', attributes.class]} bind:this={element}>
16
39
  <div class="np-container">
17
40
  <label class="np-input-wrapper">
18
- {#if group !== undefined}
19
- <input
20
- {...attributes}
21
- class="np-input"
22
- type="checkbox"
23
- bind:indeterminate
24
- bind:checked
25
- bind:group
26
- aria-checked={indeterminate ? 'mixed' : undefined}
27
- />
28
- {:else}
29
- <input
30
- {...attributes}
31
- class="np-input"
32
- type="checkbox"
33
- bind:indeterminate
34
- bind:checked
35
- aria-checked={indeterminate ? 'mixed' : undefined}
36
- />
37
- {/if}
41
+ <input
42
+ {...attributes}
43
+ class="np-input"
44
+ type="checkbox"
45
+ bind:indeterminate
46
+ bind:checked
47
+ aria-checked={indeterminate ? 'mixed' : undefined}
48
+ />
38
49
  {#if !attributes.disabled}
39
50
  <Ripple />
40
51
  {/if}
package/dist/checkbox/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { HTMLInputAttributes } from 'svelte/elements';
2
2
  export interface CheckboxProps extends Omit<HTMLInputAttributes, 'type'> {
3
3
  element?: HTMLElement;
4
- group?: string | number | null;
4
+ group?: (string | number)[] | null;
5
5
  }
package/dist/chip/FilterChip.svelte CHANGED
@@ -23,6 +23,29 @@
23
23
  }: FilterChipProps = $props()
24
24
 
25
25
  let chipLabel: HTMLLabelElement | undefined = $state()
26
+
27
+ $effect(() => {
28
+ if (group && value) {
29
+ selected = group.includes(value)
30
+ }
31
+ })
32
+
33
+ $effect(() => {
34
+ if (value && group) {
35
+ const index = group.indexOf(value)
36
+ if (selected) {
37
+ if (index < 0) {
38
+ group?.push(value)
39
+ group = group
40
+ }
41
+ } else {
42
+ if (index >= 0) {
43
+ group.splice(index, 1)
44
+ group = group
45
+ }
46
+ }
47
+ }
48
+ })
26
49
  </script>
27
50
 
28
51
  <div
@@ -47,26 +70,14 @@
47
70
  <CheckIcon width={18} height={18} />
48
71
  </div>
49
72
  <div class="np-chip-label">{label}</div>
50
- {#if group !== undefined}
51
- <input
52
- type="checkbox"
53
- bind:checked={selected}
54
- {value}
55
- {name}
56
- {disabled}
57
- defaultChecked={defaultSelected}
58
- bind:group
59
- />
60
- {:else}
61
- <input
62
- type="checkbox"
63
- bind:checked={selected}
64
- {value}
65
- {name}
66
- {disabled}
67
- defaultChecked={defaultSelected}
68
- />
69
- {/if}
73
+ <input
74
+ type="checkbox"
75
+ bind:checked={selected}
76
+ {value}
77
+ {name}
78
+ {disabled}
79
+ defaultChecked={defaultSelected}
80
+ />
70
81
  </label>
71
82
  {#if !disabled}
72
83
  <Ripple forElement={chipLabel} />
package/dist/chip/types.d.ts CHANGED
@@ -11,7 +11,7 @@ export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
11
11
  element?: HTMLDivElement;
12
12
  name?: string;
13
13
  value?: string;
14
- group?: string | number | null;
14
+ group?: (string | number)[] | null;
15
15
  defaultSelected?: boolean | null;
16
16
  remove?: (chip: HTMLDivElement) => void;
17
17
  }
package/dist/dialog/Dialog.svelte CHANGED
@@ -6,11 +6,12 @@
6
6
  element = $bindable(),
7
7
  showPopover = $bindable(),
8
8
  hidePopover = $bindable(),
9
+ quick = false,
9
10
  children,
10
11
  headline,
11
12
  icon,
12
13
  supportingText,
13
- buttons,
14
+ actions,
14
15
  divider,
15
16
  ...attributes
16
17
  }: DialogProps = $props()
@@ -24,7 +25,12 @@
24
25
  }
25
26
  </script>
26
27
 
27
- <div bind:this={element} popover="auto" class="np-dialog-container" {...attributes}>
28
+ <div
29
+ bind:this={element}
30
+ popover="auto"
31
+ {...attributes}
32
+ class={['np-dialog-container', !quick && 'np-animate']}
33
+ >
28
34
  <div
29
35
  role="none"
30
36
  class="np-backdrop"
@@ -48,9 +54,9 @@
48
54
  {#if children}
49
55
  {@render children()}
50
56
  {/if}
51
- {#if buttons}
52
- <div class="np-dialog-buttons">
53
- {@render buttons()}
57
+ {#if actions}
58
+ <div class="np-dialog-actions">
59
+ {@render actions()}
54
60
  </div>
55
61
  {/if}
56
62
  </div>
@@ -64,9 +70,6 @@
64
70
  padding: 9px 14px 20px 14px;
65
71
  z-index: 1000;
66
72
  padding: 2rem 1rem;
67
- transition:
68
- display 0.25s allow-discrete,
69
- overlay 0.25s allow-discrete;
70
73
  }
71
74
  .np-dialog {
72
75
  border: 0;
@@ -80,11 +83,20 @@
80
83
  max-height: 100dvh;
81
84
  scrollbar-color: var(--np-color-on-surface-variant) transparent;
82
85
  scrollbar-width: thin;
86
+ position: relative;
87
+ }
88
+
89
+ .np-animate {
90
+ transition:
91
+ display 0.25s allow-discrete,
92
+ overlay 0.25s allow-discrete;
93
+ }
94
+
95
+ .np-animate[popover] .np-dialog {
83
96
  transition: opacity 0.25s ease;
84
97
  opacity: 0;
85
- position: relative;
86
98
  }
87
- .np-dialog-container:popover-open .np-dialog {
99
+ .np-animate:popover-open .np-dialog {
88
100
  opacity: 1;
89
101
  @starting-style {
90
102
  opacity: 0;
@@ -94,10 +106,13 @@
94
106
  inset: 0;
95
107
  position: fixed;
96
108
  background-color: var(--np-color-scrim);
109
+ opacity: 0.38;
110
+ }
111
+ .np-animate[popover] .np-backdrop {
97
112
  opacity: 0;
98
113
  transition: opacity 0.25s ease;
99
114
  }
100
- .np-dialog-container[popover]:popover-open .np-backdrop {
115
+ .np-animate[popover]:popover-open .np-backdrop {
101
116
  opacity: 0.38;
102
117
  @starting-style {
103
118
  opacity: 0;
@@ -117,10 +132,11 @@
117
132
  font-size: 1.5rem;
118
133
  font-weight: 400;
119
134
  }
120
- .np-dialog-buttons {
135
+ .np-dialog-actions {
121
136
  display: flex;
122
137
  justify-content: flex-end;
123
138
  gap: 0.5rem;
139
+ box-sizing: border-box;
124
140
  margin-top: 1.5rem;
125
141
  }
126
142
  .np-dialog-supporting-text {
package/dist/dialog/types.d.ts CHANGED
@@ -5,7 +5,8 @@ export interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'class
5
5
  headline: string;
6
6
  supportingText?: string;
7
7
  divider?: boolean;
8
- buttons?: Snippet;
8
+ actions?: Snippet;
9
+ quick?: boolean;
9
10
  element?: HTMLElement;
10
11
  showPopover?: () => void;
11
12
  hidePopover?: () => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "noph-ui",
3
- "version": "0.11.10",
3
+ "version": "0.12.1",
4
4
  "license": "MIT",
5
5
  "homepage": "https://noph.dev",
6
6
  "repository": {