noph-ui 0.11.6 → 0.11.7
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.
|
@@ -15,12 +15,13 @@
|
|
|
15
15
|
element = $bindable(),
|
|
16
16
|
ariaLabelRemove = 'Remove',
|
|
17
17
|
remove,
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
name,
|
|
19
|
+
value,
|
|
20
|
+
group = $bindable(),
|
|
20
21
|
...attributes
|
|
21
22
|
}: FilterChipProps = $props()
|
|
22
23
|
|
|
23
|
-
let
|
|
24
|
+
let chipLabel: HTMLLabelElement | undefined = $state()
|
|
24
25
|
</script>
|
|
25
26
|
|
|
26
27
|
<div
|
|
@@ -36,21 +37,7 @@
|
|
|
36
37
|
attributes.class,
|
|
37
38
|
]}
|
|
38
39
|
>
|
|
39
|
-
<
|
|
40
|
-
bind:this={chipBtn}
|
|
41
|
-
class="np-filter-chip-btn"
|
|
42
|
-
type="button"
|
|
43
|
-
{disabled}
|
|
44
|
-
onclick={() => {
|
|
45
|
-
if (element === undefined) return
|
|
46
|
-
if (selected) {
|
|
47
|
-
deselect?.(element)
|
|
48
|
-
} else {
|
|
49
|
-
select?.(element)
|
|
50
|
-
}
|
|
51
|
-
selected = !selected
|
|
52
|
-
}}
|
|
53
|
-
>
|
|
40
|
+
<label bind:this={chipLabel} class="np-filter-chip-label">
|
|
54
41
|
{#if icon && !selected}
|
|
55
42
|
<div class="np-chip-icon">
|
|
56
43
|
{@render icon()}
|
|
@@ -60,9 +47,14 @@
|
|
|
60
47
|
<CheckIcon width={18} height={18} />
|
|
61
48
|
{/if}
|
|
62
49
|
<div class="np-chip-label">{label}</div>
|
|
63
|
-
|
|
50
|
+
{#if group !== undefined}
|
|
51
|
+
<input type="checkbox" bind:checked={selected} {value} {name} {disabled} bind:group />
|
|
52
|
+
{:else}
|
|
53
|
+
<input type="checkbox" bind:checked={selected} {value} {name} {disabled} />
|
|
54
|
+
{/if}
|
|
55
|
+
</label>
|
|
64
56
|
{#if !disabled}
|
|
65
|
-
<Ripple forElement={
|
|
57
|
+
<Ripple forElement={chipLabel} />
|
|
66
58
|
{/if}
|
|
67
59
|
{#if removable}
|
|
68
60
|
<IconButton
|
|
@@ -93,16 +85,15 @@
|
|
|
93
85
|
--np-icon-button-icon-color: var(--np-color-on-surface-variant);
|
|
94
86
|
--np-icon-size: 1.125rem;
|
|
95
87
|
}
|
|
96
|
-
.np-filter-chip-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
88
|
+
.np-filter-chip-label input {
|
|
89
|
+
opacity: 0;
|
|
90
|
+
position: absolute;
|
|
91
|
+
pointer-events: none;
|
|
92
|
+
}
|
|
93
|
+
.np-filter-chip-label {
|
|
102
94
|
cursor: pointer;
|
|
103
95
|
display: inline-flex;
|
|
104
96
|
align-items: center;
|
|
105
|
-
padding: 0;
|
|
106
97
|
height: 2rem;
|
|
107
98
|
color: var(--np-color-on-surface-variant);
|
|
108
99
|
fill: currentColor;
|
|
@@ -115,13 +106,13 @@
|
|
|
115
106
|
color: var(--np-color-primary);
|
|
116
107
|
display: flex;
|
|
117
108
|
}
|
|
118
|
-
.np-filter-chip-icon .np-filter-chip-
|
|
109
|
+
.np-filter-chip-icon .np-filter-chip-label {
|
|
119
110
|
padding-left: 0.5rem;
|
|
120
111
|
}
|
|
121
112
|
.np-filter-chip-removable {
|
|
122
113
|
padding-right: 2px;
|
|
123
114
|
}
|
|
124
|
-
.np-filter-chip-removable .np-filter-chip-
|
|
115
|
+
.np-filter-chip-removable .np-filter-chip-label {
|
|
125
116
|
padding-right: 2px;
|
|
126
117
|
}
|
|
127
118
|
.np-chip-label {
|
|
@@ -153,13 +144,13 @@
|
|
|
153
144
|
.np-filter-chip-selected {
|
|
154
145
|
--np-icon-button-icon-color: var(--np-color-on-secondary-container);
|
|
155
146
|
}
|
|
156
|
-
.np-filter-chip-selected .np-filter-chip-
|
|
147
|
+
.np-filter-chip-selected .np-filter-chip-label {
|
|
157
148
|
color: var(--np-color-on-secondary-container);
|
|
158
149
|
}
|
|
159
|
-
.np-filter-chip-
|
|
150
|
+
.np-filter-chip-label:focus-visible {
|
|
160
151
|
outline-width: 0;
|
|
161
152
|
}
|
|
162
|
-
.np-filter-chip:has(
|
|
153
|
+
.np-filter-chip:has(input:focus-visible) {
|
|
163
154
|
outline-style: solid;
|
|
164
155
|
outline-color: var(--np-color-primary);
|
|
165
156
|
outline-width: 3px;
|
|
@@ -178,7 +169,7 @@
|
|
|
178
169
|
}
|
|
179
170
|
}
|
|
180
171
|
|
|
181
|
-
.np-filter-chip-disabled .np-filter-chip-
|
|
172
|
+
.np-filter-chip-disabled .np-filter-chip-label {
|
|
182
173
|
cursor: default;
|
|
183
174
|
color: var(--np-color-on-surface);
|
|
184
175
|
opacity: 0.38;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { FilterChipProps } from './types.ts';
|
|
2
|
-
declare const FilterChip: import("svelte").Component<FilterChipProps, {}, "element" | "selected">;
|
|
2
|
+
declare const FilterChip: import("svelte").Component<FilterChipProps, {}, "element" | "group" | "selected">;
|
|
3
3
|
type FilterChip = ReturnType<typeof FilterChip>;
|
|
4
4
|
export default FilterChip;
|
package/dist/chip/types.d.ts
CHANGED
|
@@ -9,7 +9,8 @@ export interface FilterChipProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
9
9
|
icon?: Snippet;
|
|
10
10
|
ariaLabelRemove?: string;
|
|
11
11
|
element?: HTMLDivElement;
|
|
12
|
+
name?: string;
|
|
13
|
+
value?: string;
|
|
14
|
+
group?: string | number | null;
|
|
12
15
|
remove?: (chip: HTMLDivElement) => void;
|
|
13
|
-
select?: (chip: HTMLDivElement) => void;
|
|
14
|
-
deselect?: (chip: HTMLDivElement) => void;
|
|
15
16
|
}
|