@juspay/svelte-ui-components 2.66.0 → 2.67.0
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.
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
import Pill from '../Pill/Pill.svelte';
|
|
5
5
|
import Img from '../Img/Img.svelte';
|
|
6
6
|
import chevronDownSvg from '../assets/chevron-down.svg?raw';
|
|
7
|
+
import checkmarkSvg from '../assets/checkmark.svg?raw';
|
|
7
8
|
|
|
8
9
|
let {
|
|
9
10
|
items: rawItems,
|
|
@@ -378,9 +379,16 @@
|
|
|
378
379
|
{#if typeof optionIndicator === 'function'}
|
|
379
380
|
{@render optionIndicator({ checked: value.includes(item.id) })}
|
|
380
381
|
{:else}
|
|
381
|
-
<span
|
|
382
|
-
|
|
382
|
+
<span
|
|
383
|
+
class="select-option-indicator"
|
|
384
|
+
class:checked={value.includes(item.id)}
|
|
385
|
+
aria-hidden="true"
|
|
383
386
|
>
|
|
387
|
+
{#if value.includes(item.id)}
|
|
388
|
+
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
|
389
|
+
<span class="select-option-check">{@html checkmarkSvg}</span>
|
|
390
|
+
{/if}
|
|
391
|
+
</span>
|
|
384
392
|
{/if}
|
|
385
393
|
{/if}
|
|
386
394
|
{item.label}
|
|
@@ -557,8 +565,37 @@
|
|
|
557
565
|
.select-option-indicator {
|
|
558
566
|
display: inline-flex;
|
|
559
567
|
align-items: center;
|
|
560
|
-
|
|
568
|
+
justify-content: center;
|
|
561
569
|
flex-shrink: 0;
|
|
570
|
+
box-sizing: border-box;
|
|
571
|
+
width: var(--select-option-indicator-size, 18px);
|
|
572
|
+
height: var(--select-option-indicator-size, 18px);
|
|
573
|
+
border: var(--select-option-indicator-border, 2px solid #757575);
|
|
574
|
+
border-radius: var(--select-option-indicator-border-radius, 3px);
|
|
575
|
+
background-color: var(--select-option-indicator-background, transparent);
|
|
576
|
+
color: var(--select-option-indicator-color, currentColor);
|
|
577
|
+
transition:
|
|
578
|
+
background-color 0.15s,
|
|
579
|
+
border-color 0.15s;
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
.select-option-indicator.checked {
|
|
583
|
+
background-color: var(--select-option-indicator-checked-background, #2196f3);
|
|
584
|
+
border-color: var(--select-option-indicator-checked-border-color, #2196f3);
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
.select-option-check {
|
|
588
|
+
display: inline-flex;
|
|
589
|
+
align-items: center;
|
|
590
|
+
justify-content: center;
|
|
591
|
+
width: var(--select-option-indicator-check-size, 12px);
|
|
592
|
+
height: var(--select-option-indicator-check-size, 12px);
|
|
593
|
+
color: var(--select-option-indicator-check-color, #ffffff);
|
|
594
|
+
}
|
|
595
|
+
|
|
596
|
+
.select-option-check :global(svg) {
|
|
597
|
+
width: 100%;
|
|
598
|
+
height: 100%;
|
|
562
599
|
}
|
|
563
600
|
|
|
564
601
|
.select-empty {
|
|
@@ -17,6 +17,14 @@ export type OptionalSelectProperties = {
|
|
|
17
17
|
placeholder?: string;
|
|
18
18
|
disabled?: boolean;
|
|
19
19
|
bottomContent?: Snippet;
|
|
20
|
+
/**
|
|
21
|
+
* Snippet for rendering a custom multi-select option indicator, receiving `{ checked }`.
|
|
22
|
+
* When omitted, multiple-mode options render a design-system checkbox box (bordered square
|
|
23
|
+
* that fills and shows a checkmark when selected), themeable via the `--select-option-indicator-*`
|
|
24
|
+
* CSS variables: `-size` (18px), `-border`, `-border-radius`, `-background`,
|
|
25
|
+
* `-checked-background`, `-checked-border-color`, `-check-size`, `-check-color`. Provide this
|
|
26
|
+
* snippet to fully replace the indicator (e.g. to restore the legacy ☑/☐ glyph).
|
|
27
|
+
*/
|
|
20
28
|
optionIndicator?: Snippet<[{
|
|
21
29
|
checked: boolean;
|
|
22
30
|
}]>;
|