noph-ui 0.11.7 → 0.11.9
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.
- package/dist/chip/FilterChip.svelte +39 -13
- package/dist/chip/types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
import type { FilterChipProps } from './types.ts'
|
|
7
7
|
|
|
8
8
|
let {
|
|
9
|
-
selected = $bindable(
|
|
9
|
+
selected = $bindable(),
|
|
10
10
|
removable = false,
|
|
11
11
|
elevated = false,
|
|
12
12
|
disabled = false,
|
|
@@ -18,6 +18,7 @@
|
|
|
18
18
|
name,
|
|
19
19
|
value,
|
|
20
20
|
group = $bindable(),
|
|
21
|
+
defaultSelected,
|
|
21
22
|
...attributes
|
|
22
23
|
}: FilterChipProps = $props()
|
|
23
24
|
|
|
@@ -30,27 +31,41 @@
|
|
|
30
31
|
class={[
|
|
31
32
|
'np-filter-chip',
|
|
32
33
|
elevated ? 'np-filter-chip-elevated' : 'np-filter-chip-default',
|
|
33
|
-
icon
|
|
34
|
-
selected ? 'np-filter-chip-selected' : '',
|
|
34
|
+
icon ? 'np-filter-chip-icon' : '',
|
|
35
35
|
removable ? 'np-filter-chip-removable' : '',
|
|
36
36
|
disabled ? 'np-filter-chip-disabled' : '',
|
|
37
37
|
attributes.class,
|
|
38
38
|
]}
|
|
39
39
|
>
|
|
40
40
|
<label bind:this={chipLabel} class="np-filter-chip-label">
|
|
41
|
-
{#if icon
|
|
41
|
+
{#if icon}
|
|
42
42
|
<div class="np-chip-icon">
|
|
43
43
|
{@render icon()}
|
|
44
44
|
</div>
|
|
45
45
|
{/if}
|
|
46
|
-
|
|
46
|
+
<div class="np-chip-icon-checked">
|
|
47
47
|
<CheckIcon width={18} height={18} />
|
|
48
|
-
|
|
48
|
+
</div>
|
|
49
49
|
<div class="np-chip-label">{label}</div>
|
|
50
50
|
{#if group !== undefined}
|
|
51
|
-
<input
|
|
51
|
+
<input
|
|
52
|
+
type="checkbox"
|
|
53
|
+
bind:checked={selected}
|
|
54
|
+
{value}
|
|
55
|
+
{name}
|
|
56
|
+
{disabled}
|
|
57
|
+
defaultChecked={defaultSelected}
|
|
58
|
+
bind:group
|
|
59
|
+
/>
|
|
52
60
|
{:else}
|
|
53
|
-
<input
|
|
61
|
+
<input
|
|
62
|
+
type="checkbox"
|
|
63
|
+
bind:checked={selected}
|
|
64
|
+
{value}
|
|
65
|
+
{name}
|
|
66
|
+
{disabled}
|
|
67
|
+
defaultChecked={defaultSelected}
|
|
68
|
+
/>
|
|
54
69
|
{/if}
|
|
55
70
|
</label>
|
|
56
71
|
{#if !disabled}
|
|
@@ -95,6 +110,7 @@
|
|
|
95
110
|
display: inline-flex;
|
|
96
111
|
align-items: center;
|
|
97
112
|
height: 2rem;
|
|
113
|
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
98
114
|
color: var(--np-color-on-surface-variant);
|
|
99
115
|
fill: currentColor;
|
|
100
116
|
gap: 0.5rem;
|
|
@@ -102,10 +118,20 @@
|
|
|
102
118
|
padding-left: 1rem;
|
|
103
119
|
padding-right: 1rem;
|
|
104
120
|
}
|
|
121
|
+
.np-chip-icon-checked {
|
|
122
|
+
display: none;
|
|
123
|
+
}
|
|
124
|
+
.np-filter-chip:has(input:checked) .np-chip-icon-checked {
|
|
125
|
+
display: flex;
|
|
126
|
+
}
|
|
127
|
+
.np-filter-chip:has(input:checked) .np-chip-icon {
|
|
128
|
+
display: none;
|
|
129
|
+
}
|
|
105
130
|
.np-chip-icon {
|
|
106
131
|
color: var(--np-color-primary);
|
|
107
132
|
display: flex;
|
|
108
133
|
}
|
|
134
|
+
.np-filter-chip:has(input:checked) .np-filter-chip-label,
|
|
109
135
|
.np-filter-chip-icon .np-filter-chip-label {
|
|
110
136
|
padding-left: 0.5rem;
|
|
111
137
|
}
|
|
@@ -133,7 +159,7 @@
|
|
|
133
159
|
border-style: solid;
|
|
134
160
|
border-color: var(--np-filter-chip-outline-color, var(--np-color-outline-variant));
|
|
135
161
|
}
|
|
136
|
-
.np-filter-chip
|
|
162
|
+
.np-filter-chip:has(input:checked)::before {
|
|
137
163
|
border-width: 0;
|
|
138
164
|
background-color: var(--np-color-secondary-container);
|
|
139
165
|
}
|
|
@@ -141,10 +167,10 @@
|
|
|
141
167
|
border-width: 0;
|
|
142
168
|
box-shadow: var(--np-elevation-1);
|
|
143
169
|
}
|
|
144
|
-
.np-filter-chip
|
|
170
|
+
.np-filter-chip:has(input:checked) {
|
|
145
171
|
--np-icon-button-icon-color: var(--np-color-on-secondary-container);
|
|
146
172
|
}
|
|
147
|
-
.np-filter-chip
|
|
173
|
+
.np-filter-chip:has(input:checked) .np-filter-chip-label {
|
|
148
174
|
color: var(--np-color-on-secondary-container);
|
|
149
175
|
}
|
|
150
176
|
.np-filter-chip-label:focus-visible {
|
|
@@ -177,10 +203,10 @@
|
|
|
177
203
|
.np-filter-chip-disabled.np-filter-chip-elevated {
|
|
178
204
|
box-shadow: none;
|
|
179
205
|
}
|
|
180
|
-
.np-filter-chip-disabled
|
|
206
|
+
.np-filter-chip-disabled:has(input:checked)::before {
|
|
181
207
|
opacity: 0.12;
|
|
182
208
|
}
|
|
183
|
-
|
|
209
|
+
.np-filter-chip-disabled:has(input:not(:checked)).np-filter-chip-default::after {
|
|
184
210
|
content: '';
|
|
185
211
|
position: absolute;
|
|
186
212
|
inset: 0;
|
package/dist/chip/types.d.ts
CHANGED