@joewinke/jatui 0.8.3 → 0.8.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.
|
@@ -32,6 +32,7 @@
|
|
|
32
32
|
dropup = false,
|
|
33
33
|
appendToBody = false,
|
|
34
34
|
clearable = false,
|
|
35
|
+
clearLabel = 'Clear selection',
|
|
35
36
|
triggerAttrs,
|
|
36
37
|
embedded = false,
|
|
37
38
|
onChange,
|
|
@@ -57,6 +58,8 @@
|
|
|
57
58
|
appendToBody?: boolean;
|
|
58
59
|
/** Show an × button on the trigger when a value is selected */
|
|
59
60
|
clearable?: boolean;
|
|
61
|
+
/** Accessible label for the clear (×) button. */
|
|
62
|
+
clearLabel?: string;
|
|
60
63
|
/** Extra attributes forwarded to the trigger button (e.g. data-rail-id) */
|
|
61
64
|
triggerAttrs?: Record<string, string>;
|
|
62
65
|
/** Render inline without a trigger button — panel content is always visible, no dropdown behavior */
|
|
@@ -349,6 +352,7 @@
|
|
|
349
352
|
class:sd-disabled={disabled}
|
|
350
353
|
class:sd-chip={variant === 'chip'}
|
|
351
354
|
class:sd-sm={size === 'sm'}
|
|
355
|
+
class:sd-has-clear={clearable && value !== ''}
|
|
352
356
|
style={activeColor
|
|
353
357
|
? variant === 'chip'
|
|
354
358
|
? `--sd-color: ${activeColor};`
|
|
@@ -371,20 +375,23 @@
|
|
|
371
375
|
{/if}
|
|
372
376
|
<span class="truncate">{triggerLabel}</span>
|
|
373
377
|
</span>
|
|
374
|
-
{#if clearable && value !== ''}
|
|
375
|
-
<button
|
|
376
|
-
type="button"
|
|
377
|
-
class="sd-clear"
|
|
378
|
-
aria-label="Clear filter"
|
|
379
|
-
onclick={(e) => { e.stopPropagation(); onChange(''); }}
|
|
380
|
-
>
|
|
381
|
-
<svg class="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
|
382
|
-
</button>
|
|
383
|
-
{/if}
|
|
384
378
|
<svg class="sd-chevron" class:sd-chevron-open={open} fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
385
379
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
|
386
380
|
</svg>
|
|
387
381
|
</button>
|
|
382
|
+
<!-- The clear control is a SIBLING of the trigger (a <button> inside a
|
|
383
|
+
<button> is invalid HTML and unreachable by keyboard), pinned to the
|
|
384
|
+
trigger's right edge beside the chevron (mos-hhzd0). -->
|
|
385
|
+
{#if clearable && value !== ''}
|
|
386
|
+
<button
|
|
387
|
+
type="button"
|
|
388
|
+
class="sd-clear"
|
|
389
|
+
aria-label={clearLabel}
|
|
390
|
+
onclick={(e) => { e.stopPropagation(); onChange(''); }}
|
|
391
|
+
>
|
|
392
|
+
<svg class="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
|
393
|
+
</button>
|
|
394
|
+
{/if}
|
|
388
395
|
|
|
389
396
|
{#if open}
|
|
390
397
|
<div
|
|
@@ -494,6 +501,7 @@
|
|
|
494
501
|
}
|
|
495
502
|
|
|
496
503
|
.sd-trigger-label {
|
|
504
|
+
flex: 1 1 auto;
|
|
497
505
|
display: flex;
|
|
498
506
|
align-items: center;
|
|
499
507
|
gap: 0.375rem;
|
|
@@ -520,7 +528,16 @@
|
|
|
520
528
|
font-size: 0.75rem;
|
|
521
529
|
}
|
|
522
530
|
|
|
531
|
+
/* Room for the absolutely-positioned × between the label and the chevron
|
|
532
|
+
(the chevron stays at the trigger's right edge). */
|
|
533
|
+
.sd-has-clear .sd-trigger-label {
|
|
534
|
+
padding-right: 1.25rem;
|
|
535
|
+
}
|
|
523
536
|
.sd-clear {
|
|
537
|
+
position: absolute;
|
|
538
|
+
top: 50%;
|
|
539
|
+
right: 1.5rem;
|
|
540
|
+
transform: translateY(-50%);
|
|
524
541
|
display: flex;
|
|
525
542
|
align-items: center;
|
|
526
543
|
justify-content: center;
|
|
@@ -29,6 +29,8 @@ type $$ComponentProps = {
|
|
|
29
29
|
appendToBody?: boolean;
|
|
30
30
|
/** Show an × button on the trigger when a value is selected */
|
|
31
31
|
clearable?: boolean;
|
|
32
|
+
/** Accessible label for the clear (×) button. */
|
|
33
|
+
clearLabel?: string;
|
|
32
34
|
/** Extra attributes forwarded to the trigger button (e.g. data-rail-id) */
|
|
33
35
|
triggerAttrs?: Record<string, string>;
|
|
34
36
|
/** Render inline without a trigger button — panel content is always visible, no dropdown behavior */
|