@aiaiai-pt/design-system 0.4.3 → 0.4.4
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.
|
@@ -36,7 +36,6 @@
|
|
|
36
36
|
</script>
|
|
37
37
|
|
|
38
38
|
<script>
|
|
39
|
-
import Select from './Select.svelte';
|
|
40
39
|
import Combobox from './Combobox.svelte';
|
|
41
40
|
|
|
42
41
|
let {
|
|
@@ -95,13 +94,23 @@
|
|
|
95
94
|
{#each filters as filter (filter.key)}
|
|
96
95
|
<div class="filter-field">
|
|
97
96
|
{#if filter.type === 'select' && filter.options}
|
|
98
|
-
<
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
97
|
+
<label class="filter-field-label" for="filter-{filter.key}">{filter.label}</label>
|
|
98
|
+
<div class="filter-select-wrap">
|
|
99
|
+
<select
|
|
100
|
+
id="filter-{filter.key}"
|
|
101
|
+
class="filter-select filter-select-sm"
|
|
102
|
+
value={value[filter.key] ?? ''}
|
|
103
|
+
onchange={(e) => setFilter(filter.key, /** @type {HTMLSelectElement} */ (e.currentTarget).value)}
|
|
104
|
+
>
|
|
105
|
+
<option value="">All</option>
|
|
106
|
+
{#each filter.options as opt (opt.value)}
|
|
107
|
+
<option value={opt.value}>{opt.label}</option>
|
|
108
|
+
{/each}
|
|
109
|
+
</select>
|
|
110
|
+
<span class="filter-select-chevron" aria-hidden="true">
|
|
111
|
+
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2.5 4.5L6 8l3.5-3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
112
|
+
</span>
|
|
113
|
+
</div>
|
|
105
114
|
{:else if filter.type === 'boolean'}
|
|
106
115
|
{@const opts = filter.options ?? [{ value: 'true', label: 'Yes' }, { value: 'false', label: 'No' }]}
|
|
107
116
|
<span class="filter-field-label">{filter.label}</span>
|
|
@@ -152,6 +161,42 @@
|
|
|
152
161
|
flex-wrap: wrap;
|
|
153
162
|
}
|
|
154
163
|
|
|
164
|
+
.filter-select-wrap {
|
|
165
|
+
position: relative;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.filter-select {
|
|
169
|
+
font-family: var(--input-font);
|
|
170
|
+
font-size: var(--input-font-size);
|
|
171
|
+
border: var(--input-border);
|
|
172
|
+
border-radius: var(--input-radius);
|
|
173
|
+
background: var(--input-bg);
|
|
174
|
+
color: var(--input-text);
|
|
175
|
+
width: 100%;
|
|
176
|
+
appearance: none;
|
|
177
|
+
padding-right: var(--space-xl);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.filter-select-sm {
|
|
181
|
+
height: var(--input-sm-height);
|
|
182
|
+
padding: 0 var(--input-sm-padding-x);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.filter-select:focus {
|
|
186
|
+
outline: none;
|
|
187
|
+
border: var(--input-border-focus);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.filter-select-chevron {
|
|
191
|
+
position: absolute;
|
|
192
|
+
right: var(--space-sm);
|
|
193
|
+
top: 50%;
|
|
194
|
+
transform: translateY(-50%);
|
|
195
|
+
pointer-events: none;
|
|
196
|
+
color: var(--input-placeholder);
|
|
197
|
+
display: flex;
|
|
198
|
+
}
|
|
199
|
+
|
|
155
200
|
.filter-field {
|
|
156
201
|
display: flex;
|
|
157
202
|
flex-direction: column;
|