ui-ingredients 0.0.44 → 0.0.45
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +1 -0
- package/dist/accordion/create-accordion.svelte.js +3 -4
- package/dist/accordion/item-content.svelte +7 -11
- package/dist/accordion/item.svelte +2 -2
- package/dist/accordion/root.svelte +4 -6
- package/dist/avatar/create-avatar.svelte.js +3 -4
- package/dist/avatar/root.svelte +2 -2
- package/dist/carousel/create-carousel.svelte.js +3 -4
- package/dist/carousel/indicator.svelte +2 -2
- package/dist/carousel/item.svelte +2 -2
- package/dist/carousel/root.svelte +2 -2
- package/dist/checkbox/create-checkbox.svelte.js +4 -5
- package/dist/checkbox/root.svelte +2 -2
- package/dist/clipboard/create-clipboard.svelte.js +3 -4
- package/dist/clipboard/root.svelte +2 -2
- package/dist/collapsible/create-collapsible.svelte.js +3 -4
- package/dist/collapsible/root.svelte +2 -2
- package/dist/color-picker/create-color-picker.svelte.js +3 -4
- package/dist/color-picker/root.svelte +2 -2
- package/dist/combobox/create-combobox.svelte.js +4 -5
- package/dist/combobox/item.svelte +2 -2
- package/dist/combobox/root.svelte +10 -16
- package/dist/create-context.svelte.js +1 -9
- package/dist/date-picker/create-date-picker.svelte.js +2 -3
- package/dist/date-picker/day-table-cell.svelte +2 -2
- package/dist/date-picker/month-table-cell.svelte +2 -2
- package/dist/date-picker/root.svelte +10 -18
- package/dist/date-picker/year-table-cell.svelte +2 -2
- package/dist/dialog/backdrop.svelte +7 -12
- package/dist/dialog/create-dialog.svelte.js +3 -4
- package/dist/dialog/root.svelte +6 -12
- package/dist/editable/create-editable.svelte.js +4 -5
- package/dist/editable/root.svelte +2 -2
- package/dist/environment-provider/root.svelte +5 -8
- package/dist/field/create-field.svelte.d.ts +1 -22
- package/dist/field/create-field.svelte.js +9 -20
- package/dist/field/root.svelte +2 -2
- package/dist/file-upload/create-file-upload.svelte.js +4 -5
- package/dist/file-upload/item.svelte +2 -2
- package/dist/file-upload/root.svelte +2 -2
- package/dist/floating-panel/create-floating-panel.svelte.js +3 -4
- package/dist/floating-panel/resize-trigger.svelte +2 -2
- package/dist/floating-panel/root.svelte +6 -11
- package/dist/highlight/highlight.svelte +42 -0
- package/dist/highlight/highlight.svelte.d.ts +18 -0
- package/dist/highlight/index.d.ts +1 -0
- package/dist/highlight/index.js +1 -0
- package/dist/hover-card/create-hover-card.svelte.js +3 -4
- package/dist/hover-card/root.svelte +6 -11
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/locale-provider/root.svelte +8 -6
- package/dist/menu/create-menu.svelte.js +3 -4
- package/dist/menu/item.svelte +2 -2
- package/dist/menu/option-item.svelte +2 -2
- package/dist/menu/root.svelte +6 -12
- package/dist/number-input/create-number-input.svelte.js +4 -5
- package/dist/number-input/root.svelte +2 -2
- package/dist/pagination/create-pagination.svelte.js +3 -4
- package/dist/pagination/root.svelte +2 -2
- package/dist/pin-input/create-pin-input.svelte.js +4 -5
- package/dist/pin-input/root.svelte +2 -2
- package/dist/popover/create-popover.svelte.js +3 -4
- package/dist/popover/root.svelte +6 -11
- package/dist/presence/root.svelte +2 -2
- package/dist/progress/create-progress.svelte.js +3 -4
- package/dist/progress/root.svelte +2 -2
- package/dist/qr-code/create-qr-code.svelte.js +3 -4
- package/dist/qr-code/root.svelte +2 -2
- package/dist/radio-group/create-radio-group.svelte.js +3 -4
- package/dist/radio-group/item.svelte +2 -2
- package/dist/radio-group/root.svelte +2 -2
- package/dist/rating-group/create-rating-group.svelte.js +4 -5
- package/dist/rating-group/root.svelte +2 -2
- package/dist/segment-group/create-segment-group.svelte.js +3 -4
- package/dist/segment-group/item.svelte +2 -2
- package/dist/segment-group/root.svelte +2 -2
- package/dist/select/create-select.svelte.js +2 -3
- package/dist/select/item.svelte +2 -2
- package/dist/select/root.svelte +11 -19
- package/dist/signature-pad/create-signature-pad.svelte.js +3 -4
- package/dist/signature-pad/root.svelte +2 -2
- package/dist/slider/create-slider.svelte.js +3 -4
- package/dist/slider/root.svelte +2 -2
- package/dist/slider/thumb.svelte +2 -2
- package/dist/splitter/create-splitter.svelte.js +3 -4
- package/dist/splitter/panel.svelte +2 -2
- package/dist/splitter/resize-trigger.svelte +2 -2
- package/dist/splitter/root.svelte +2 -2
- package/dist/steps/create-steps.svelte.js +3 -4
- package/dist/steps/item.svelte +2 -2
- package/dist/steps/root.svelte +2 -2
- package/dist/switch/create-switch.svelte.js +4 -5
- package/dist/switch/root.svelte +2 -2
- package/dist/tabs/content.svelte +2 -2
- package/dist/tabs/create-tabs.svelte.js +3 -4
- package/dist/tabs/root.svelte +2 -2
- package/dist/tabs/trigger.svelte +2 -2
- package/dist/tags-input/create-tags-input.svelte.js +4 -5
- package/dist/tags-input/item.svelte +2 -2
- package/dist/tags-input/root.svelte +2 -2
- package/dist/time-picker/create-time-picker.svelte.js +3 -4
- package/dist/time-picker/root.svelte +11 -21
- package/dist/timer/create-timer.svelte.js +3 -4
- package/dist/timer/item.svelte +2 -2
- package/dist/timer/root.svelte +2 -2
- package/dist/toast/create-toast.svelte.js +1 -2
- package/dist/toast/create-toaster.svelte.js +2 -3
- package/dist/toggle-group/create-toggle-group.svelte.js +3 -4
- package/dist/toggle-group/item.svelte +2 -2
- package/dist/toggle-group/root.svelte +2 -2
- package/dist/tooltip/create-tooltip.svelte.js +3 -4
- package/dist/tooltip/root.svelte +6 -12
- package/dist/tour/create-tour.svelte.js +3 -4
- package/dist/tour/overlay.svelte +7 -12
- package/dist/tour/root.svelte +6 -11
- package/dist/tree-view/branch.svelte +2 -2
- package/dist/tree-view/create-tree-view.svelte.js +3 -4
- package/dist/tree-view/item.svelte +2 -2
- package/dist/tree-view/root.svelte +2 -2
- package/package.json +2 -1
package/README.md
CHANGED
@@ -53,6 +53,7 @@ npm install ui-ingredients
|
|
53
53
|
- [Field](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/field.md)
|
54
54
|
- [FileUpload](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/file-upload.md)
|
55
55
|
- [FloatingPanel](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/floating-panel.md)
|
56
|
+
- [Highlight](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/highlight.md)
|
56
57
|
- [HoverCard](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/hover-card.md)
|
57
58
|
- [Menu](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/menu.md)
|
58
59
|
- [NumberInput](https://github.com/calvo-jp/ui-ingredients/blob/main/docs/number-input.md)
|
@@ -7,13 +7,12 @@ export function createAccordion(props) {
|
|
7
7
|
const locale = getLocaleContext();
|
8
8
|
const environment = getEnvironmentContext();
|
9
9
|
const id = uid();
|
10
|
-
const context =
|
10
|
+
const context = reflect(() => ({
|
11
11
|
...props,
|
12
12
|
id: props.id ?? id,
|
13
13
|
dir: locale?.dir,
|
14
14
|
getRootNode: environment?.getRootNode,
|
15
|
-
}))
|
15
|
+
}));
|
16
16
|
const [state, send] = useMachine(accordion.machine(context), { context });
|
17
|
-
|
18
|
-
return api;
|
17
|
+
return reflect(() => accordion.connect(state, send, normalizeProps));
|
19
18
|
}
|
@@ -10,6 +10,7 @@
|
|
10
10
|
import {mergeProps} from '../merge-props.js';
|
11
11
|
import {getPresenceStrategyPropsContext} from '../presence/context.svelte.js';
|
12
12
|
import {createPresence} from '../presence/create-presence.svelte.js';
|
13
|
+
import {reflect} from '@zag-js/svelte';
|
13
14
|
import {
|
14
15
|
getAccordionContext,
|
15
16
|
getAccordionItemPropsContext,
|
@@ -22,17 +23,12 @@
|
|
22
23
|
let itemsState = $derived(accordion.getItemState(itemProps));
|
23
24
|
|
24
25
|
let presenceStrategyProps = getPresenceStrategyPropsContext();
|
25
|
-
let presence = createPresence(
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
},
|
32
|
-
get keepMounted() {
|
33
|
-
return presenceStrategyProps.keepMounted;
|
34
|
-
},
|
35
|
-
});
|
26
|
+
let presence = createPresence(
|
27
|
+
reflect(() => ({
|
28
|
+
...presenceStrategyProps,
|
29
|
+
present: itemsState.expanded,
|
30
|
+
})),
|
31
|
+
);
|
36
32
|
|
37
33
|
let mergedProps = $derived(
|
38
34
|
mergeProps(
|
@@ -18,13 +18,13 @@
|
|
18
18
|
|
19
19
|
let accordion = getAccordionContext();
|
20
20
|
|
21
|
-
let [itemProps,
|
21
|
+
let [itemProps, localProps] = $derived(
|
22
22
|
createSplitProps<ItemProps>(['value', 'disabled'])(props),
|
23
23
|
);
|
24
24
|
|
25
25
|
let itemState = $derived(accordion.getItemState(itemProps));
|
26
26
|
let mergedProps = $derived(
|
27
|
-
mergeProps(
|
27
|
+
mergeProps(localProps, accordion.getItemProps(itemProps)),
|
28
28
|
);
|
29
29
|
|
30
30
|
setAccordionItemPropsContext(() => itemProps);
|
@@ -24,13 +24,13 @@
|
|
24
24
|
|
25
25
|
let {asChild, children, ...props}: AccordionProps = $props();
|
26
26
|
|
27
|
-
let [presenceStrategyProps,
|
27
|
+
let [presenceStrategyProps, rest] = $derived(
|
28
28
|
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
29
29
|
props,
|
30
30
|
),
|
31
31
|
);
|
32
32
|
|
33
|
-
let [accordionProps,
|
33
|
+
let [accordionProps, localProps] = $derived(
|
34
34
|
createSplitProps<CreateAccordionProps>([
|
35
35
|
'id',
|
36
36
|
'ids',
|
@@ -41,14 +41,12 @@
|
|
41
41
|
'collapsible',
|
42
42
|
'onFocusChange',
|
43
43
|
'onValueChange',
|
44
|
-
])(
|
44
|
+
])(rest),
|
45
45
|
);
|
46
46
|
|
47
47
|
let accordion = createAccordion(reflect(() => accordionProps));
|
48
48
|
|
49
|
-
let mergedProps = $derived(
|
50
|
-
mergeProps(elementProps, accordion.getRootProps()),
|
51
|
-
);
|
49
|
+
let mergedProps = $derived(mergeProps(localProps, accordion.getRootProps()));
|
52
50
|
|
53
51
|
setAccordionContext(accordion);
|
54
52
|
setPresenceStrategyPropsContext(() => presenceStrategyProps);
|
@@ -7,13 +7,12 @@ export function createAvatar(props) {
|
|
7
7
|
const locale = getLocaleContext();
|
8
8
|
const environment = getEnvironmentContext();
|
9
9
|
const id = uid();
|
10
|
-
const context =
|
10
|
+
const context = reflect(() => ({
|
11
11
|
...props,
|
12
12
|
id: props.id ?? id,
|
13
13
|
dir: locale?.dir,
|
14
14
|
getRootNode: environment?.getRootNode,
|
15
|
-
}))
|
15
|
+
}));
|
16
16
|
const [state, send] = useMachine(avatar.machine(context), { context });
|
17
|
-
|
18
|
-
return api;
|
17
|
+
return reflect(() => avatar.connect(state, send, normalizeProps));
|
19
18
|
}
|
package/dist/avatar/root.svelte
CHANGED
@@ -21,13 +21,13 @@
|
|
21
21
|
|
22
22
|
let {asChild, children, ...props}: AvatarProps = $props();
|
23
23
|
|
24
|
-
let [avatarProps,
|
24
|
+
let [avatarProps, localProps] = $derived(
|
25
25
|
createSplitProps<CreateAvatarProps>(['id', 'ids', 'onStatusChange'])(props),
|
26
26
|
);
|
27
27
|
|
28
28
|
let avatar = createAvatar(reflect(() => avatarProps));
|
29
29
|
|
30
|
-
let mergedProps = $derived(mergeProps(
|
30
|
+
let mergedProps = $derived(mergeProps(localProps, avatar.getRootProps()));
|
31
31
|
|
32
32
|
setAvatarContext(avatar);
|
33
33
|
</script>
|
@@ -7,13 +7,12 @@ export function createCarousel(props) {
|
|
7
7
|
const locale = getLocaleContext();
|
8
8
|
const environment = getEnvironmentContext();
|
9
9
|
const id = uid();
|
10
|
-
const context =
|
10
|
+
const context = reflect(() => ({
|
11
11
|
...props,
|
12
12
|
id: props.id ?? id,
|
13
13
|
dir: locale?.dir,
|
14
14
|
getRootNode: environment?.getRootNode,
|
15
|
-
}))
|
15
|
+
}));
|
16
16
|
const [state, send] = useMachine(carousel.machine(context), { context });
|
17
|
-
|
18
|
-
return api;
|
17
|
+
return reflect(() => carousel.connect(state, send, normalizeProps));
|
19
18
|
}
|
@@ -15,12 +15,12 @@
|
|
15
15
|
|
16
16
|
let carousel = getCarouselContext();
|
17
17
|
|
18
|
-
let [indicatorProps,
|
18
|
+
let [indicatorProps, localProps] = $derived(
|
19
19
|
createSplitProps<IndicatorProps>(['index', 'readOnly'])(props),
|
20
20
|
);
|
21
21
|
|
22
22
|
let mergedProps = $derived(
|
23
|
-
mergeProps(
|
23
|
+
mergeProps(localProps, carousel.getIndicatorProps(indicatorProps)),
|
24
24
|
);
|
25
25
|
</script>
|
26
26
|
|
@@ -15,13 +15,13 @@
|
|
15
15
|
|
16
16
|
let carousel = getCarouselContext();
|
17
17
|
|
18
|
-
let [itemProps,
|
18
|
+
let [itemProps, localProps] = $derived(
|
19
19
|
createSplitProps<ItemProps>(['index'])(props),
|
20
20
|
);
|
21
21
|
|
22
22
|
let itemState = $derived(carousel.getItemState(itemProps));
|
23
23
|
let mergedProps = $derived(
|
24
|
-
mergeProps(
|
24
|
+
mergeProps(localProps, carousel.getItemProps(itemProps)),
|
25
25
|
);
|
26
26
|
</script>
|
27
27
|
|
@@ -21,7 +21,7 @@
|
|
21
21
|
|
22
22
|
let {asChild, children, ...props}: CarouselProps = $props();
|
23
23
|
|
24
|
-
let [carouselProps,
|
24
|
+
let [carouselProps, localProps] = $derived(
|
25
25
|
createSplitProps<CreateCarouselProps>([
|
26
26
|
'id',
|
27
27
|
'ids',
|
@@ -37,7 +37,7 @@
|
|
37
37
|
|
38
38
|
let carousel = createCarousel(reflect(() => carouselProps));
|
39
39
|
|
40
|
-
let mergedProps = $derived(mergeProps(
|
40
|
+
let mergedProps = $derived(mergeProps(localProps, carousel.getRootProps()));
|
41
41
|
|
42
42
|
setCarouselContext(carousel);
|
43
43
|
</script>
|
@@ -9,7 +9,7 @@ export function createCheckbox(props) {
|
|
9
9
|
const locale = getLocaleContext();
|
10
10
|
const environment = getEnvironmentContext();
|
11
11
|
const id = uid();
|
12
|
-
const context =
|
12
|
+
const context = reflect(() => ({
|
13
13
|
ids: {
|
14
14
|
label: field?.ids.label,
|
15
15
|
hiddenInput: field?.ids.control,
|
@@ -22,9 +22,9 @@ export function createCheckbox(props) {
|
|
22
22
|
id: props.id ?? id,
|
23
23
|
dir: locale?.dir,
|
24
24
|
getRootNode: environment?.getRootNode,
|
25
|
-
}))
|
25
|
+
}));
|
26
26
|
const [state, send] = useMachine(checkbox.machine(context), { context });
|
27
|
-
|
27
|
+
return reflect(() => {
|
28
28
|
const o = checkbox.connect(state, send, normalizeProps);
|
29
29
|
return {
|
30
30
|
...o,
|
@@ -35,6 +35,5 @@ export function createCheckbox(props) {
|
|
35
35
|
};
|
36
36
|
},
|
37
37
|
};
|
38
|
-
})
|
39
|
-
return api;
|
38
|
+
});
|
40
39
|
}
|
@@ -22,7 +22,7 @@
|
|
22
22
|
|
23
23
|
let {asChild, children, ...props}: CheckboxProps = $props();
|
24
24
|
|
25
|
-
let [checkboxProps,
|
25
|
+
let [checkboxProps, localProps] = $derived(
|
26
26
|
createSplitProps<CreateCheckboxProps>([
|
27
27
|
'id',
|
28
28
|
'ids',
|
@@ -40,7 +40,7 @@
|
|
40
40
|
|
41
41
|
let checkbox = createCheckbox(reflect(() => checkboxProps));
|
42
42
|
|
43
|
-
let mergedProps = $derived(mergeProps(
|
43
|
+
let mergedProps = $derived(mergeProps(localProps, checkbox.getRootProps()));
|
44
44
|
|
45
45
|
setCheckboxContext(checkbox);
|
46
46
|
</script>
|
@@ -5,12 +5,11 @@ import { uid } from 'uid';
|
|
5
5
|
export function createClipboard(props) {
|
6
6
|
const environment = getEnvironmentContext();
|
7
7
|
const id = uid();
|
8
|
-
const context =
|
8
|
+
const context = reflect(() => ({
|
9
9
|
...props,
|
10
10
|
id: props.id ?? id,
|
11
11
|
getRootNode: environment?.getRootNode,
|
12
|
-
}))
|
12
|
+
}));
|
13
13
|
const [state, send] = useMachine(clipboard.machine(context), { context });
|
14
|
-
|
15
|
-
return api;
|
14
|
+
return reflect(() => clipboard.connect(state, send, normalizeProps));
|
16
15
|
}
|
@@ -21,7 +21,7 @@
|
|
21
21
|
|
22
22
|
let {asChild, children, ...props}: ClipboardProps = $props();
|
23
23
|
|
24
|
-
let [clipboardProps,
|
24
|
+
let [clipboardProps, localProps] = $derived(
|
25
25
|
createSplitProps<CreateClipboardProps>([
|
26
26
|
'id',
|
27
27
|
'ids',
|
@@ -33,7 +33,7 @@
|
|
33
33
|
|
34
34
|
let clipboard = createClipboard(reflect(() => clipboardProps));
|
35
35
|
|
36
|
-
let mergedProps = $derived(mergeProps(
|
36
|
+
let mergedProps = $derived(mergeProps(localProps, clipboard.getRootProps()));
|
37
37
|
|
38
38
|
setClipboardContext(clipboard);
|
39
39
|
</script>
|
@@ -7,15 +7,14 @@ export function createCollapsible(props) {
|
|
7
7
|
const locale = getLocaleContext();
|
8
8
|
const environment = getEnvironmentContext();
|
9
9
|
const id = uid();
|
10
|
-
const context =
|
10
|
+
const context = reflect(() => ({
|
11
11
|
...props,
|
12
12
|
id: props.id ?? id,
|
13
13
|
dir: locale?.dir,
|
14
14
|
open: props.defaultOpen ?? props.open,
|
15
15
|
getRootNode: environment?.getRootNode,
|
16
16
|
'open.controlled': props.open != null,
|
17
|
-
}))
|
17
|
+
}));
|
18
18
|
const [state, send] = useMachine(collapsible.machine(context), { context });
|
19
|
-
|
20
|
-
return api;
|
19
|
+
return reflect(() => collapsible.connect(state, send, normalizeProps));
|
21
20
|
}
|
@@ -21,7 +21,7 @@
|
|
21
21
|
|
22
22
|
let {asChild, children, ...props}: CollapsibleProps = $props();
|
23
23
|
|
24
|
-
let [collapsibleProps,
|
24
|
+
let [collapsibleProps, localProps] = $derived(
|
25
25
|
createSplitProps<CreateCollapsibleProps>([
|
26
26
|
'id',
|
27
27
|
'ids',
|
@@ -36,7 +36,7 @@
|
|
36
36
|
let collapsible = createCollapsible(reflect(() => collapsibleProps));
|
37
37
|
|
38
38
|
let mergedProps = $derived(
|
39
|
-
mergeProps(
|
39
|
+
mergeProps(localProps, collapsible.getRootProps()),
|
40
40
|
);
|
41
41
|
|
42
42
|
setCollapsibleContext(collapsible);
|
@@ -7,7 +7,7 @@ export function createColorPicker(props) {
|
|
7
7
|
const locale = getLocaleContext();
|
8
8
|
const environment = getEnvironmentContext();
|
9
9
|
const id = uid();
|
10
|
-
const context =
|
10
|
+
const context = reflect(() => ({
|
11
11
|
...props,
|
12
12
|
id: props.id ?? id,
|
13
13
|
dir: locale?.dir,
|
@@ -15,8 +15,7 @@ export function createColorPicker(props) {
|
|
15
15
|
value: props.value ? colorPicker.parse(props.value) : undefined,
|
16
16
|
getRootNode: environment?.getRootNode,
|
17
17
|
'open.controlled': props.open != null,
|
18
|
-
}))
|
18
|
+
}));
|
19
19
|
const [state, send] = useMachine(colorPicker.machine(context), { context });
|
20
|
-
|
21
|
-
return api;
|
20
|
+
return reflect(() => colorPicker.connect(state, send, normalizeProps));
|
22
21
|
}
|
@@ -23,7 +23,7 @@
|
|
23
23
|
|
24
24
|
let {children, ...props}: ColorPickerProps = $props();
|
25
25
|
|
26
|
-
let [colorPickerProps,
|
26
|
+
let [colorPickerProps, localProps] = $derived(
|
27
27
|
createSplitProps<CreateColorPickerProps>([
|
28
28
|
'id',
|
29
29
|
'ids',
|
@@ -56,7 +56,7 @@
|
|
56
56
|
});
|
57
57
|
|
58
58
|
let mergedProps = $derived(
|
59
|
-
mergeProps(
|
59
|
+
mergeProps(localProps, colorPicker.getRootProps()),
|
60
60
|
);
|
61
61
|
|
62
62
|
setColorPickerContext(colorPicker);
|
@@ -17,7 +17,7 @@ export function createCombobox(props) {
|
|
17
17
|
const locale = getLocaleContext();
|
18
18
|
const environment = getEnvironmentContext();
|
19
19
|
const id = uid();
|
20
|
-
const context =
|
20
|
+
const context = reflect(() => ({
|
21
21
|
ids: {
|
22
22
|
label: field?.ids.label,
|
23
23
|
input: field?.ids.control,
|
@@ -33,9 +33,9 @@ export function createCombobox(props) {
|
|
33
33
|
'open.controlled': props.open != null,
|
34
34
|
getRootNode: environment?.getRootNode,
|
35
35
|
collection,
|
36
|
-
});
|
36
|
+
}));
|
37
37
|
const [state, send] = useMachine(combobox.machine(context));
|
38
|
-
|
38
|
+
return reflect(() => {
|
39
39
|
const o = combobox.connect(state, send, normalizeProps);
|
40
40
|
return {
|
41
41
|
...o,
|
@@ -46,6 +46,5 @@ export function createCombobox(props) {
|
|
46
46
|
};
|
47
47
|
},
|
48
48
|
};
|
49
|
-
})
|
50
|
-
return api;
|
49
|
+
});
|
51
50
|
}
|
@@ -18,13 +18,13 @@
|
|
18
18
|
|
19
19
|
let combobox = getComboboxContext();
|
20
20
|
|
21
|
-
let [itemProps,
|
21
|
+
let [itemProps, localProps] = $derived(
|
22
22
|
createSplitProps<ItemProps>(['item', 'persistFocus'])(props),
|
23
23
|
);
|
24
24
|
|
25
25
|
let itemState = $derived(combobox.getItemState(itemProps));
|
26
26
|
let mergedProps = $derived(
|
27
|
-
mergeProps(
|
27
|
+
mergeProps(localProps, combobox.getItemProps(itemProps)),
|
28
28
|
);
|
29
29
|
|
30
30
|
setComboboxItemPropsContext(() => itemProps);
|
@@ -25,13 +25,13 @@
|
|
25
25
|
|
26
26
|
let {asChild, children, ...props}: ComboboxProps<T> = $props();
|
27
27
|
|
28
|
-
let [presenceStrategyProps,
|
28
|
+
let [presenceStrategyProps, rest] = $derived(
|
29
29
|
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
30
30
|
props,
|
31
31
|
),
|
32
32
|
);
|
33
33
|
|
34
|
-
let [comboboxProps,
|
34
|
+
let [comboboxProps, localProps] = $derived(
|
35
35
|
createSplitProps<CreateComboboxProps<T>>([
|
36
36
|
'id',
|
37
37
|
'ids',
|
@@ -74,24 +74,18 @@
|
|
74
74
|
'onPointerDownOutside',
|
75
75
|
'getSelectionValue',
|
76
76
|
'scrollToIndexFn',
|
77
|
-
])(
|
77
|
+
])(rest),
|
78
78
|
);
|
79
79
|
|
80
80
|
let combobox = createCombobox(reflect(() => comboboxProps));
|
81
|
+
let presence = createPresence(
|
82
|
+
reflect(() => ({
|
83
|
+
...presenceStrategyProps,
|
84
|
+
present: combobox.open,
|
85
|
+
})),
|
86
|
+
);
|
81
87
|
|
82
|
-
let
|
83
|
-
get present() {
|
84
|
-
return combobox.open;
|
85
|
-
},
|
86
|
-
get lazyMount() {
|
87
|
-
return presenceStrategyProps.lazyMount;
|
88
|
-
},
|
89
|
-
get keepMounted() {
|
90
|
-
return presenceStrategyProps.keepMounted;
|
91
|
-
},
|
92
|
-
});
|
93
|
-
|
94
|
-
let mergedProps = $derived(mergeProps(elementProps, combobox.getRootProps()));
|
88
|
+
let mergedProps = $derived(mergeProps(localProps, combobox.getRootProps()));
|
95
89
|
|
96
90
|
setComboboxContext(combobox);
|
97
91
|
setPresenceContext(presence);
|
@@ -11,15 +11,7 @@ export function createContext(key, strict = true) {
|
|
11
11
|
return getContext(key);
|
12
12
|
}
|
13
13
|
function s(context) {
|
14
|
-
|
15
|
-
if (typeof context === 'function') {
|
16
|
-
return reflect(context);
|
17
|
-
}
|
18
|
-
else {
|
19
|
-
return context;
|
20
|
-
}
|
21
|
-
});
|
22
|
-
setContext(key, v);
|
14
|
+
setContext(key, typeof context === 'function' ? reflect(context) : context);
|
23
15
|
}
|
24
16
|
return [g, s];
|
25
17
|
}
|
@@ -24,7 +24,7 @@ export function createDatePicker(props) {
|
|
24
24
|
getRootNode: environment?.getRootNode,
|
25
25
|
});
|
26
26
|
const [state, send] = useMachine(datePicker.machine(context), { context });
|
27
|
-
|
27
|
+
return reflect(() => {
|
28
28
|
const o = datePicker.connect(state, send, normalizeProps);
|
29
29
|
return {
|
30
30
|
...o,
|
@@ -35,6 +35,5 @@ export function createDatePicker(props) {
|
|
35
35
|
};
|
36
36
|
},
|
37
37
|
};
|
38
|
-
})
|
39
|
-
return api;
|
38
|
+
});
|
40
39
|
}
|
@@ -21,7 +21,7 @@
|
|
21
21
|
|
22
22
|
let datePicker = getDatePickerContext();
|
23
23
|
|
24
|
-
let [tableCellProps,
|
24
|
+
let [tableCellProps, localProps] = $derived(
|
25
25
|
createSplitProps<DayTableCellProps>(['value', 'disabled', 'visibleRange'])(
|
26
26
|
props,
|
27
27
|
),
|
@@ -32,7 +32,7 @@
|
|
32
32
|
);
|
33
33
|
|
34
34
|
let mergedProps = $derived(
|
35
|
-
mergeProps(
|
35
|
+
mergeProps(localProps, datePicker.getDayTableCellProps(tableCellProps)),
|
36
36
|
);
|
37
37
|
|
38
38
|
setDatePickerDayTableCellPropsContext(() => tableCellProps);
|
@@ -18,7 +18,7 @@
|
|
18
18
|
|
19
19
|
let datePicker = getDatePickerContext();
|
20
20
|
|
21
|
-
let [tableCellProps,
|
21
|
+
let [tableCellProps, localProps] = $derived(
|
22
22
|
createSplitProps<TableCellProps>(['value', 'disabled', 'columns'])(props),
|
23
23
|
);
|
24
24
|
|
@@ -27,7 +27,7 @@
|
|
27
27
|
);
|
28
28
|
|
29
29
|
let mergedProps = $derived(
|
30
|
-
mergeProps(
|
30
|
+
mergeProps(localProps, datePicker.getMonthTableCellProps(tableCellProps)),
|
31
31
|
);
|
32
32
|
|
33
33
|
setDatePickerTableCellPropsContext(() => tableCellProps);
|
@@ -25,11 +25,11 @@
|
|
25
25
|
|
26
26
|
let {asChild, children, ...props}: DatePickerProps = $props();
|
27
27
|
|
28
|
-
let [presenceStrategyProps,
|
28
|
+
let [presenceStrategyProps, rest] = $derived(
|
29
29
|
createSplitProps<PresenceStrategyProps>([])(props),
|
30
30
|
);
|
31
31
|
|
32
|
-
let [datePickerProps,
|
32
|
+
let [datePickerProps, localProps] = $derived(
|
33
33
|
createSplitProps<CreateDatePickerProps>([
|
34
34
|
'id',
|
35
35
|
'ids',
|
@@ -59,27 +59,19 @@
|
|
59
59
|
'onValueChange',
|
60
60
|
'onFocusChange',
|
61
61
|
'isDateUnavailable',
|
62
|
-
])(
|
62
|
+
])(rest),
|
63
63
|
);
|
64
64
|
|
65
65
|
let datePicker = createDatePicker(reflect(() => datePickerProps));
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
},
|
71
|
-
get lazyMount() {
|
72
|
-
return presenceStrategyProps.lazyMount;
|
73
|
-
},
|
74
|
-
get keepMounted() {
|
75
|
-
return presenceStrategyProps.keepMounted;
|
76
|
-
},
|
77
|
-
});
|
78
|
-
|
79
|
-
let mergedProps = $derived(
|
80
|
-
mergeProps(elementProps, datePicker.getRootProps()),
|
66
|
+
let presence = createPresence(
|
67
|
+
reflect(() => ({
|
68
|
+
...presenceStrategyProps,
|
69
|
+
present: datePicker.open,
|
70
|
+
})),
|
81
71
|
);
|
82
72
|
|
73
|
+
let mergedProps = $derived(mergeProps(localProps, datePicker.getRootProps()));
|
74
|
+
|
83
75
|
setDatePickerContext(datePicker);
|
84
76
|
setPresenceContext(presence);
|
85
77
|
</script>
|
@@ -18,7 +18,7 @@
|
|
18
18
|
|
19
19
|
let datePicker = getDatePickerContext();
|
20
20
|
|
21
|
-
let [tableCellProps,
|
21
|
+
let [tableCellProps, localProps] = $derived(
|
22
22
|
createSplitProps<TableCellProps>(['value', 'disabled', 'columns'])(props),
|
23
23
|
);
|
24
24
|
|
@@ -27,7 +27,7 @@
|
|
27
27
|
);
|
28
28
|
|
29
29
|
let mergedProps = $derived(
|
30
|
-
mergeProps(
|
30
|
+
mergeProps(localProps, datePicker.getYearTableCellProps(tableCellProps)),
|
31
31
|
);
|
32
32
|
|
33
33
|
setDatePickerTableCellPropsContext(() => tableCellProps);
|
@@ -10,24 +10,19 @@
|
|
10
10
|
import {mergeProps} from '../merge-props.js';
|
11
11
|
import {getPresenceStrategyPropsContext} from '../presence/context.svelte.js';
|
12
12
|
import {createPresence} from '../presence/create-presence.svelte.js';
|
13
|
+
import {reflect} from '@zag-js/svelte';
|
13
14
|
import {getDialogContext} from './context.svelte.js';
|
14
15
|
|
15
16
|
let {asChild, children, ...props}: DialogBackdropProps = $props();
|
16
17
|
|
17
18
|
let dialog = getDialogContext();
|
18
|
-
|
19
19
|
let presenceStrategyProps = getPresenceStrategyPropsContext();
|
20
|
-
let presence = createPresence(
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
},
|
27
|
-
get keepMounted() {
|
28
|
-
return presenceStrategyProps.keepMounted;
|
29
|
-
},
|
30
|
-
});
|
20
|
+
let presence = createPresence(
|
21
|
+
reflect(() => ({
|
22
|
+
...presenceStrategyProps,
|
23
|
+
present: dialog.open,
|
24
|
+
})),
|
25
|
+
);
|
31
26
|
|
32
27
|
let mergedProps = $derived(
|
33
28
|
mergeProps(props, dialog.getBackdropProps(), presence.getPresenceProps()),
|