@juspay/svelte-ui-components 2.63.1 → 2.64.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.
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
import Calendar from '../Calendar/Calendar.svelte';
|
|
6
6
|
import Button from '../Button/Button.svelte';
|
|
7
7
|
import chevronDownSvg from '../assets/chevron-down.svg?raw';
|
|
8
|
+
import checkmarkSvg from '../assets/checkmark.svg?raw';
|
|
8
9
|
|
|
9
10
|
let {
|
|
10
11
|
rangeStart = $bindable(null),
|
|
@@ -16,6 +17,7 @@
|
|
|
16
17
|
disabledDates = [],
|
|
17
18
|
maxRangeDays = null,
|
|
18
19
|
presets = null,
|
|
20
|
+
presetCheckmark = false,
|
|
19
21
|
placeholder = 'Select date',
|
|
20
22
|
dualMonth,
|
|
21
23
|
timePicker,
|
|
@@ -545,11 +547,16 @@
|
|
|
545
547
|
type="button"
|
|
546
548
|
class="drp-preset-item"
|
|
547
549
|
class:drp-preset-active={isPresetActive(preset)}
|
|
550
|
+
class:drp-preset-checkable={presetCheckmark}
|
|
548
551
|
role="option"
|
|
549
552
|
aria-selected={isPresetActive(preset)}
|
|
550
553
|
onclick={() => handlePreset(preset)}
|
|
551
554
|
>
|
|
552
555
|
{preset.label}
|
|
556
|
+
{#if presetCheckmark && isPresetActive(preset)}
|
|
557
|
+
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
|
558
|
+
<span class="drp-preset-check" aria-hidden="true">{@html checkmarkSvg}</span>
|
|
559
|
+
{/if}
|
|
553
560
|
</button>
|
|
554
561
|
{/each}
|
|
555
562
|
</div>
|
|
@@ -786,6 +793,29 @@
|
|
|
786
793
|
background: var(--drp-preset-active-hover-background, #333333);
|
|
787
794
|
}
|
|
788
795
|
|
|
796
|
+
/* Opt-in checkmark layout: reserve a trailing slot so the active preset's tick
|
|
797
|
+
sits flush-right while the label stays left. A preset with no tick (or a
|
|
798
|
+
label-only preset) keeps its single flex child at the start, unchanged. */
|
|
799
|
+
.drp-preset-checkable {
|
|
800
|
+
display: flex;
|
|
801
|
+
align-items: center;
|
|
802
|
+
justify-content: space-between;
|
|
803
|
+
gap: var(--drp-preset-check-gap, 8px);
|
|
804
|
+
}
|
|
805
|
+
|
|
806
|
+
.drp-preset-check {
|
|
807
|
+
display: inline-flex;
|
|
808
|
+
flex-shrink: 0;
|
|
809
|
+
width: var(--drp-preset-check-size, 16px);
|
|
810
|
+
height: var(--drp-preset-check-size, 16px);
|
|
811
|
+
color: var(--drp-preset-check-color, inherit);
|
|
812
|
+
}
|
|
813
|
+
|
|
814
|
+
.drp-preset-check :global(svg) {
|
|
815
|
+
width: 100%;
|
|
816
|
+
height: 100%;
|
|
817
|
+
}
|
|
818
|
+
|
|
789
819
|
/* ── Calendar area ── */
|
|
790
820
|
.drp-calendars {
|
|
791
821
|
display: flex;
|
|
@@ -33,6 +33,12 @@ export type OptionalDateRangePickerProperties = {
|
|
|
33
33
|
maxRangeDays?: number | null;
|
|
34
34
|
/** Preset options shown in the sidebar. Omit to hide the sidebar. */
|
|
35
35
|
presets?: DateRangePreset[] | null;
|
|
36
|
+
/**
|
|
37
|
+
* Show a trailing checkmark on the active preset in the sidebar. Opt-in, so
|
|
38
|
+
* existing layouts are unchanged; the active preset is always distinguished by
|
|
39
|
+
* its highlighted background regardless of this flag. Default: false.
|
|
40
|
+
*/
|
|
41
|
+
presetCheckmark?: boolean;
|
|
36
42
|
/** Placeholder shown when no range is selected. */
|
|
37
43
|
placeholder?: string;
|
|
38
44
|
/** Show two months side by side. Defaults to true for range mode, false for single. */
|