@classic-homes/theme-svelte 1.5.0 → 1.5.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.
|
@@ -177,9 +177,108 @@
|
|
|
177
177
|
/>
|
|
178
178
|
</div>
|
|
179
179
|
|
|
180
|
+
<!-- Portal to <body>: escapes transformed/overflow-hidden ancestors
|
|
181
|
+
(e.g. Dialog panels) that would clip the dropdown. -->
|
|
182
|
+
<ComboboxPrimitive.Portal>
|
|
183
|
+
<ComboboxPrimitive.Content
|
|
184
|
+
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
|
|
185
|
+
sideOffset={4}
|
|
186
|
+
collisionPadding={8}
|
|
187
|
+
avoidCollisions={true}
|
|
188
|
+
>
|
|
189
|
+
<div class="p-1 max-h-[300px] overflow-y-auto">
|
|
190
|
+
{#if loading}
|
|
191
|
+
<div class="flex items-center justify-center py-6">
|
|
192
|
+
<Spinner size="sm" />
|
|
193
|
+
<span class="ml-2 text-sm text-muted-foreground">Loading...</span>
|
|
194
|
+
</div>
|
|
195
|
+
{:else if filteredOptions.length === 0}
|
|
196
|
+
<div class="py-6 text-center text-sm text-muted-foreground">
|
|
197
|
+
{emptyMessage}
|
|
198
|
+
</div>
|
|
199
|
+
{:else}
|
|
200
|
+
{#each filteredOptions as option}
|
|
201
|
+
<ComboboxPrimitive.Item
|
|
202
|
+
value={option.value}
|
|
203
|
+
label={option.label}
|
|
204
|
+
disabled={option.disabled}
|
|
205
|
+
class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
|
|
206
|
+
>
|
|
207
|
+
{#if option.value === value}
|
|
208
|
+
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
209
|
+
<svg
|
|
210
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
211
|
+
width="16"
|
|
212
|
+
height="16"
|
|
213
|
+
viewBox="0 0 24 24"
|
|
214
|
+
fill="none"
|
|
215
|
+
stroke="currentColor"
|
|
216
|
+
stroke-width="2"
|
|
217
|
+
stroke-linecap="round"
|
|
218
|
+
stroke-linejoin="round"
|
|
219
|
+
class="h-4 w-4"
|
|
220
|
+
>
|
|
221
|
+
<polyline points="20 6 9 17 4 12" />
|
|
222
|
+
</svg>
|
|
223
|
+
</span>
|
|
224
|
+
{/if}
|
|
225
|
+
{option.label}
|
|
226
|
+
</ComboboxPrimitive.Item>
|
|
227
|
+
{/each}
|
|
228
|
+
{/if}
|
|
229
|
+
</div>
|
|
230
|
+
</ComboboxPrimitive.Content>
|
|
231
|
+
</ComboboxPrimitive.Portal>
|
|
232
|
+
</ComboboxPrimitive.Root>
|
|
233
|
+
|
|
234
|
+
{#if hint && !error}
|
|
235
|
+
<p id={hintId} class="text-sm text-muted-foreground">
|
|
236
|
+
{hint}
|
|
237
|
+
</p>
|
|
238
|
+
{/if}
|
|
239
|
+
|
|
240
|
+
{#if error}
|
|
241
|
+
<p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
|
|
242
|
+
{error}
|
|
243
|
+
</p>
|
|
244
|
+
{/if}
|
|
245
|
+
</div>
|
|
246
|
+
{:else}
|
|
247
|
+
<ComboboxPrimitive.Root
|
|
248
|
+
type="single"
|
|
249
|
+
{disabled}
|
|
250
|
+
{required}
|
|
251
|
+
{name}
|
|
252
|
+
bind:open
|
|
253
|
+
onOpenChange={handleOpenChange}
|
|
254
|
+
onValueChange={handleValueChange}
|
|
255
|
+
{value}
|
|
256
|
+
>
|
|
257
|
+
<div class="relative">
|
|
258
|
+
<ComboboxPrimitive.Input
|
|
259
|
+
id={componentId}
|
|
260
|
+
placeholder={selectedLabel || placeholder}
|
|
261
|
+
oninput={handleSearchInput}
|
|
262
|
+
onfocus={() => (open = true)}
|
|
263
|
+
onclick={() => (open = true)}
|
|
264
|
+
class={cn(
|
|
265
|
+
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
|
266
|
+
error && 'border-destructive focus:ring-destructive',
|
|
267
|
+
className
|
|
268
|
+
)}
|
|
269
|
+
role="combobox"
|
|
270
|
+
aria-expanded={open}
|
|
271
|
+
aria-invalid={error ? 'true' : undefined}
|
|
272
|
+
aria-describedby={describedBy}
|
|
273
|
+
/>
|
|
274
|
+
</div>
|
|
275
|
+
|
|
276
|
+
<!-- Portal to <body>: escapes transformed/overflow-hidden ancestors
|
|
277
|
+
(e.g. Dialog panels) that would clip the dropdown. -->
|
|
278
|
+
<ComboboxPrimitive.Portal>
|
|
180
279
|
<ComboboxPrimitive.Content
|
|
181
|
-
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-
|
|
182
|
-
sideOffset={
|
|
280
|
+
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
|
|
281
|
+
sideOffset={4}
|
|
183
282
|
collisionPadding={8}
|
|
184
283
|
avoidCollisions={true}
|
|
185
284
|
>
|
|
@@ -225,98 +324,7 @@
|
|
|
225
324
|
{/if}
|
|
226
325
|
</div>
|
|
227
326
|
</ComboboxPrimitive.Content>
|
|
228
|
-
</ComboboxPrimitive.
|
|
229
|
-
|
|
230
|
-
{#if hint && !error}
|
|
231
|
-
<p id={hintId} class="text-sm text-muted-foreground">
|
|
232
|
-
{hint}
|
|
233
|
-
</p>
|
|
234
|
-
{/if}
|
|
235
|
-
|
|
236
|
-
{#if error}
|
|
237
|
-
<p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
|
|
238
|
-
{error}
|
|
239
|
-
</p>
|
|
240
|
-
{/if}
|
|
241
|
-
</div>
|
|
242
|
-
{:else}
|
|
243
|
-
<ComboboxPrimitive.Root
|
|
244
|
-
type="single"
|
|
245
|
-
{disabled}
|
|
246
|
-
{required}
|
|
247
|
-
{name}
|
|
248
|
-
bind:open
|
|
249
|
-
onOpenChange={handleOpenChange}
|
|
250
|
-
onValueChange={handleValueChange}
|
|
251
|
-
{value}
|
|
252
|
-
>
|
|
253
|
-
<div class="relative">
|
|
254
|
-
<ComboboxPrimitive.Input
|
|
255
|
-
id={componentId}
|
|
256
|
-
placeholder={selectedLabel || placeholder}
|
|
257
|
-
oninput={handleSearchInput}
|
|
258
|
-
onfocus={() => (open = true)}
|
|
259
|
-
onclick={() => (open = true)}
|
|
260
|
-
class={cn(
|
|
261
|
-
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
|
262
|
-
error && 'border-destructive focus:ring-destructive',
|
|
263
|
-
className
|
|
264
|
-
)}
|
|
265
|
-
role="combobox"
|
|
266
|
-
aria-expanded={open}
|
|
267
|
-
aria-invalid={error ? 'true' : undefined}
|
|
268
|
-
aria-describedby={describedBy}
|
|
269
|
-
/>
|
|
270
|
-
</div>
|
|
271
|
-
|
|
272
|
-
<ComboboxPrimitive.Content
|
|
273
|
-
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-black bg-popover text-popover-foreground shadow-md data-[side=bottom]:border-t-0 data-[side=bottom]:rounded-t-none data-[side=top]:border-b-0 data-[side=top]:rounded-b-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
|
|
274
|
-
sideOffset={-1}
|
|
275
|
-
collisionPadding={8}
|
|
276
|
-
avoidCollisions={true}
|
|
277
|
-
>
|
|
278
|
-
<div class="p-1 max-h-[300px] overflow-y-auto">
|
|
279
|
-
{#if loading}
|
|
280
|
-
<div class="flex items-center justify-center py-6">
|
|
281
|
-
<Spinner size="sm" />
|
|
282
|
-
<span class="ml-2 text-sm text-muted-foreground">Loading...</span>
|
|
283
|
-
</div>
|
|
284
|
-
{:else if filteredOptions.length === 0}
|
|
285
|
-
<div class="py-6 text-center text-sm text-muted-foreground">
|
|
286
|
-
{emptyMessage}
|
|
287
|
-
</div>
|
|
288
|
-
{:else}
|
|
289
|
-
{#each filteredOptions as option}
|
|
290
|
-
<ComboboxPrimitive.Item
|
|
291
|
-
value={option.value}
|
|
292
|
-
label={option.label}
|
|
293
|
-
disabled={option.disabled}
|
|
294
|
-
class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
|
|
295
|
-
>
|
|
296
|
-
{#if option.value === value}
|
|
297
|
-
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
298
|
-
<svg
|
|
299
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
300
|
-
width="16"
|
|
301
|
-
height="16"
|
|
302
|
-
viewBox="0 0 24 24"
|
|
303
|
-
fill="none"
|
|
304
|
-
stroke="currentColor"
|
|
305
|
-
stroke-width="2"
|
|
306
|
-
stroke-linecap="round"
|
|
307
|
-
stroke-linejoin="round"
|
|
308
|
-
class="h-4 w-4"
|
|
309
|
-
>
|
|
310
|
-
<polyline points="20 6 9 17 4 12" />
|
|
311
|
-
</svg>
|
|
312
|
-
</span>
|
|
313
|
-
{/if}
|
|
314
|
-
{option.label}
|
|
315
|
-
</ComboboxPrimitive.Item>
|
|
316
|
-
{/each}
|
|
317
|
-
{/if}
|
|
318
|
-
</div>
|
|
319
|
-
</ComboboxPrimitive.Content>
|
|
327
|
+
</ComboboxPrimitive.Portal>
|
|
320
328
|
</ComboboxPrimitive.Root>
|
|
321
329
|
{/if}
|
|
322
330
|
|
|
@@ -67,11 +67,11 @@
|
|
|
67
67
|
<DropdownMenuPrimitive.Content
|
|
68
68
|
{side}
|
|
69
69
|
{align}
|
|
70
|
-
sideOffset={
|
|
70
|
+
sideOffset={4}
|
|
71
71
|
collisionPadding={8}
|
|
72
72
|
avoidCollisions={true}
|
|
73
73
|
class={cn(
|
|
74
|
-
'isolate z-50 min-w-[8rem] overflow-hidden rounded-md border border-
|
|
74
|
+
'isolate z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
|
75
75
|
className
|
|
76
76
|
)}
|
|
77
77
|
>
|
|
@@ -239,8 +239,8 @@
|
|
|
239
239
|
(e.g. Dialog panels) that would clip the dropdown. -->
|
|
240
240
|
<ComboboxPrimitive.Portal>
|
|
241
241
|
<ComboboxPrimitive.Content
|
|
242
|
-
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-
|
|
243
|
-
sideOffset={
|
|
242
|
+
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
|
|
243
|
+
sideOffset={4}
|
|
244
244
|
collisionPadding={8}
|
|
245
245
|
avoidCollisions={true}
|
|
246
246
|
>
|
|
@@ -376,8 +376,8 @@
|
|
|
376
376
|
(e.g. Dialog panels) that would clip the dropdown. -->
|
|
377
377
|
<ComboboxPrimitive.Portal>
|
|
378
378
|
<ComboboxPrimitive.Content
|
|
379
|
-
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-
|
|
380
|
-
sideOffset={
|
|
379
|
+
class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
|
|
380
|
+
sideOffset={4}
|
|
381
381
|
collisionPadding={8}
|
|
382
382
|
avoidCollisions={true}
|
|
383
383
|
>
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
|
|
141
141
|
// Common content classes
|
|
142
142
|
const contentClasses =
|
|
143
|
-
'isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-
|
|
143
|
+
'isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2';
|
|
144
144
|
|
|
145
145
|
// Common item classes
|
|
146
146
|
const itemClasses =
|
|
@@ -205,7 +205,7 @@
|
|
|
205
205
|
<SelectPrimitive.Portal>
|
|
206
206
|
<SelectPrimitive.Content
|
|
207
207
|
class={contentClasses}
|
|
208
|
-
sideOffset={
|
|
208
|
+
sideOffset={4}
|
|
209
209
|
collisionPadding={8}
|
|
210
210
|
avoidCollisions={true}
|
|
211
211
|
>
|