ui-ingredients 0.0.40 → 0.0.42
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.
- package/dist/accordion/item-content.svelte +19 -7
- package/dist/accordion/root.svelte +18 -6
- package/dist/color-picker/content.svelte +3 -1
- package/dist/color-picker/root.svelte +1 -1
- package/dist/combobox/content.svelte +11 -7
- package/dist/combobox/positioner.svelte +8 -6
- package/dist/combobox/root.svelte +21 -6
- package/dist/date-picker/content.svelte +11 -7
- package/dist/date-picker/positioner.svelte +8 -6
- package/dist/date-picker/root.svelte +21 -6
- package/dist/dialog/backdrop.svelte +20 -7
- package/dist/dialog/content.svelte +11 -7
- package/dist/dialog/positioner.svelte +8 -6
- package/dist/dialog/root.svelte +25 -3
- package/dist/hover-card/content.svelte +11 -7
- package/dist/hover-card/positioner.svelte +8 -6
- package/dist/hover-card/root.svelte +27 -2
- package/dist/menu/content.svelte +11 -7
- package/dist/menu/positioner.svelte +8 -6
- package/dist/menu/root.svelte +38 -2
- package/dist/popover/content.svelte +11 -7
- package/dist/popover/positioner.svelte +8 -6
- package/dist/popover/root.svelte +35 -2
- package/dist/portal/root.svelte +5 -1
- package/dist/presence/context.svelte.d.ts +2 -1
- package/dist/presence/context.svelte.js +1 -0
- package/dist/presence/create-presence.svelte.d.ts +9 -2
- package/dist/presence/create-presence.svelte.js +25 -5
- package/dist/presence/root.svelte +16 -6
- package/dist/select/content.svelte +11 -7
- package/dist/select/positioner.svelte +8 -6
- package/dist/select/root.svelte +19 -4
- package/dist/time-picker/content.svelte +14 -4
- package/dist/time-picker/positioner.svelte +7 -1
- package/dist/time-picker/root.svelte +29 -4
- package/dist/tooltip/content.svelte +11 -7
- package/dist/tooltip/positioner.svelte +8 -6
- package/dist/tooltip/root.svelte +20 -2
- package/dist/types.d.ts +8 -3
- package/package.json +1 -1
@@ -1,12 +1,14 @@
|
|
1
1
|
<script lang="ts" module>
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {Action} from 'svelte/action';
|
3
4
|
|
4
5
|
export interface AccordionItemContentProps
|
5
|
-
extends HtmlIngredientProps<'div'> {}
|
6
|
+
extends HtmlIngredientProps<'div', never, Action> {}
|
6
7
|
</script>
|
7
8
|
|
8
9
|
<script lang="ts">
|
9
10
|
import {mergeProps} from '../merge-props.js';
|
11
|
+
import {getPresenceStrategyPropsContext} from '../presence/context.svelte.js';
|
10
12
|
import {createPresence} from '../presence/create-presence.svelte.js';
|
11
13
|
import {
|
12
14
|
getAccordionContext,
|
@@ -18,10 +20,18 @@
|
|
18
20
|
let accordion = getAccordionContext();
|
19
21
|
let itemProps = getAccordionItemPropsContext();
|
20
22
|
let itemsState = $derived(accordion.getItemState(itemProps));
|
23
|
+
|
24
|
+
let presenceStrategyProps = getPresenceStrategyPropsContext();
|
21
25
|
let presence = createPresence({
|
22
26
|
get present() {
|
23
27
|
return itemsState.expanded;
|
24
28
|
},
|
29
|
+
get lazyMount() {
|
30
|
+
return presenceStrategyProps.lazyMount;
|
31
|
+
},
|
32
|
+
get keepMounted() {
|
33
|
+
return presenceStrategyProps.keepMounted;
|
34
|
+
},
|
25
35
|
});
|
26
36
|
|
27
37
|
let mergedProps = $derived(
|
@@ -33,10 +43,12 @@
|
|
33
43
|
);
|
34
44
|
</script>
|
35
45
|
|
36
|
-
{#if
|
37
|
-
{
|
38
|
-
{
|
39
|
-
|
40
|
-
{
|
41
|
-
|
46
|
+
{#if presence.mounted}
|
47
|
+
{#if asChild}
|
48
|
+
{@render asChild(presence.ref, mergedProps)}
|
49
|
+
{:else}
|
50
|
+
<div use:presence.ref {...mergedProps}>
|
51
|
+
{@render children?.()}
|
52
|
+
</div>
|
53
|
+
{/if}
|
42
54
|
{/if}
|
@@ -1,4 +1,5 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
2
3
|
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
4
|
import type {
|
4
5
|
CreateAccordionProps,
|
@@ -7,13 +8,15 @@
|
|
7
8
|
|
8
9
|
export interface AccordionProps
|
9
10
|
extends Assign<
|
10
|
-
|
11
|
-
|
12
|
-
|
11
|
+
HtmlIngredientProps<'div', CreateAccordionReturn>,
|
12
|
+
CreateAccordionProps
|
13
|
+
>,
|
14
|
+
PresenceStrategyProps {}
|
13
15
|
</script>
|
14
16
|
|
15
17
|
<script lang="ts">
|
16
18
|
import {mergeProps} from '../merge-props.js';
|
19
|
+
import {setPresenceStrategyPropsContext} from '../presence/context.svelte.js';
|
17
20
|
import {reflect} from '@zag-js/svelte';
|
18
21
|
import {createSplitProps} from '@zag-js/utils';
|
19
22
|
import {setAccordionContext} from './context.svelte.js';
|
@@ -21,7 +24,13 @@
|
|
21
24
|
|
22
25
|
let {asChild, children, ...props}: AccordionProps = $props();
|
23
26
|
|
24
|
-
let [
|
27
|
+
let [presenceStrategyProps, otherProps] = $derived(
|
28
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
29
|
+
props,
|
30
|
+
),
|
31
|
+
);
|
32
|
+
|
33
|
+
let [accordionProps, elementProps] = $derived(
|
25
34
|
createSplitProps<CreateAccordionProps>([
|
26
35
|
'id',
|
27
36
|
'ids',
|
@@ -32,14 +41,17 @@
|
|
32
41
|
'collapsible',
|
33
42
|
'onFocusChange',
|
34
43
|
'onValueChange',
|
35
|
-
])(
|
44
|
+
])(otherProps),
|
36
45
|
);
|
37
46
|
|
38
47
|
let accordion = createAccordion(reflect(() => accordionProps));
|
39
48
|
|
40
|
-
let mergedProps = $derived(
|
49
|
+
let mergedProps = $derived(
|
50
|
+
mergeProps(elementProps, accordion.getRootProps()),
|
51
|
+
);
|
41
52
|
|
42
53
|
setAccordionContext(accordion);
|
54
|
+
setPresenceStrategyPropsContext(() => presenceStrategyProps);
|
43
55
|
</script>
|
44
56
|
|
45
57
|
{#if asChild}
|
@@ -1,7 +1,9 @@
|
|
1
1
|
<script lang="ts" module>
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {Action} from 'svelte/action';
|
3
4
|
|
4
|
-
export interface ColorPickerContentProps
|
5
|
+
export interface ColorPickerContentProps
|
6
|
+
extends HtmlIngredientProps<'div', never, Action> {}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
@@ -1,7 +1,9 @@
|
|
1
1
|
<script lang="ts" module>
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {Action} from 'svelte/action';
|
3
4
|
|
4
|
-
export interface ComboboxContentProps
|
5
|
+
export interface ComboboxContentProps
|
6
|
+
extends HtmlIngredientProps<'div', never, Action> {}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
@@ -19,10 +21,12 @@
|
|
19
21
|
);
|
20
22
|
</script>
|
21
23
|
|
22
|
-
{#if
|
23
|
-
{
|
24
|
-
{
|
25
|
-
|
26
|
-
{
|
27
|
-
|
24
|
+
{#if presence.mounted}
|
25
|
+
{#if asChild}
|
26
|
+
{@render asChild(presence.ref, mergedProps)}
|
27
|
+
{:else}
|
28
|
+
<div use:presence.ref {...mergedProps}>
|
29
|
+
{@render children?.()}
|
30
|
+
</div>
|
31
|
+
{/if}
|
28
32
|
{/if}
|
@@ -23,10 +23,12 @@
|
|
23
23
|
);
|
24
24
|
</script>
|
25
25
|
|
26
|
-
{#if
|
27
|
-
{
|
28
|
-
{
|
29
|
-
|
30
|
-
{
|
31
|
-
|
26
|
+
{#if presence.mounted}
|
27
|
+
{#if asChild}
|
28
|
+
{@render asChild(mergedProps)}
|
29
|
+
{:else}
|
30
|
+
<div {...mergedProps}>
|
31
|
+
{@render children?.()}
|
32
|
+
</div>
|
33
|
+
{/if}
|
32
34
|
{/if}
|
@@ -1,4 +1,5 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
2
3
|
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
4
|
import type {
|
4
5
|
CreateComboboxProps,
|
@@ -7,9 +8,10 @@
|
|
7
8
|
|
8
9
|
export interface ComboboxProps<T>
|
9
10
|
extends Assign<
|
10
|
-
|
11
|
-
|
12
|
-
|
11
|
+
HtmlIngredientProps<'div', CreateComboboxReturn>,
|
12
|
+
CreateComboboxProps<T>
|
13
|
+
>,
|
14
|
+
PresenceStrategyProps {}
|
13
15
|
</script>
|
14
16
|
|
15
17
|
<script lang="ts" generics="T">
|
@@ -23,7 +25,13 @@
|
|
23
25
|
|
24
26
|
let {asChild, children, ...props}: ComboboxProps<T> = $props();
|
25
27
|
|
26
|
-
let [
|
28
|
+
let [presenceStrategyProps, otherProps] = $derived(
|
29
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
30
|
+
props,
|
31
|
+
),
|
32
|
+
);
|
33
|
+
|
34
|
+
let [comboboxProps, elementProps] = $derived(
|
27
35
|
createSplitProps<CreateComboboxProps<T>>([
|
28
36
|
'id',
|
29
37
|
'ids',
|
@@ -66,17 +74,24 @@
|
|
66
74
|
'onPointerDownOutside',
|
67
75
|
'getSelectionValue',
|
68
76
|
'scrollToIndexFn',
|
69
|
-
])(
|
77
|
+
])(otherProps),
|
70
78
|
);
|
71
79
|
|
72
80
|
let combobox = createCombobox(reflect(() => comboboxProps));
|
81
|
+
|
73
82
|
let presence = createPresence({
|
74
83
|
get present() {
|
75
84
|
return combobox.open;
|
76
85
|
},
|
86
|
+
get lazyMount() {
|
87
|
+
return presenceStrategyProps.lazyMount;
|
88
|
+
},
|
89
|
+
get keepMounted() {
|
90
|
+
return presenceStrategyProps.keepMounted;
|
91
|
+
},
|
77
92
|
});
|
78
93
|
|
79
|
-
let mergedProps = $derived(mergeProps(
|
94
|
+
let mergedProps = $derived(mergeProps(elementProps, combobox.getRootProps()));
|
80
95
|
|
81
96
|
setComboboxContext(combobox);
|
82
97
|
setPresenceContext(presence);
|
@@ -1,7 +1,9 @@
|
|
1
1
|
<script lang="ts" module>
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {Action} from 'svelte/action';
|
3
4
|
|
4
|
-
export interface DatePickerContentProps
|
5
|
+
export interface DatePickerContentProps
|
6
|
+
extends HtmlIngredientProps<'div', never, Action> {}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
@@ -23,10 +25,12 @@
|
|
23
25
|
);
|
24
26
|
</script>
|
25
27
|
|
26
|
-
{#if
|
27
|
-
{
|
28
|
-
{
|
29
|
-
|
30
|
-
{
|
31
|
-
|
28
|
+
{#if presence.mounted}
|
29
|
+
{#if asChild}
|
30
|
+
{@render asChild(presence.ref, mergedProps)}
|
31
|
+
{:else}
|
32
|
+
<div use:presence.ref {...mergedProps}>
|
33
|
+
{@render children?.()}
|
34
|
+
</div>
|
35
|
+
{/if}
|
32
36
|
{/if}
|
@@ -24,10 +24,12 @@
|
|
24
24
|
);
|
25
25
|
</script>
|
26
26
|
|
27
|
-
{#if
|
28
|
-
{
|
29
|
-
{
|
30
|
-
|
31
|
-
{
|
32
|
-
|
27
|
+
{#if presence.mounted}
|
28
|
+
{#if asChild}
|
29
|
+
{@render asChild(mergedProps)}
|
30
|
+
{:else}
|
31
|
+
<div {...mergedProps}>
|
32
|
+
{@render children?.()}
|
33
|
+
</div>
|
34
|
+
{/if}
|
33
35
|
{/if}
|
@@ -1,4 +1,5 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
2
3
|
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
4
|
import type {
|
4
5
|
CreateDatePickerProps,
|
@@ -7,9 +8,10 @@
|
|
7
8
|
|
8
9
|
export interface DatePickerProps
|
9
10
|
extends Assign<
|
10
|
-
|
11
|
-
|
12
|
-
|
11
|
+
HtmlIngredientProps<'div', CreateDatePickerReturn>,
|
12
|
+
CreateDatePickerProps
|
13
|
+
>,
|
14
|
+
PresenceStrategyProps {}
|
13
15
|
</script>
|
14
16
|
|
15
17
|
<script lang="ts">
|
@@ -23,7 +25,11 @@
|
|
23
25
|
|
24
26
|
let {asChild, children, ...props}: DatePickerProps = $props();
|
25
27
|
|
26
|
-
let [
|
28
|
+
let [presenceStrategyProps, otherProps] = $derived(
|
29
|
+
createSplitProps<PresenceStrategyProps>([])(props),
|
30
|
+
);
|
31
|
+
|
32
|
+
let [datePickerProps, elementProps] = $derived(
|
27
33
|
createSplitProps<CreateDatePickerProps>([
|
28
34
|
'id',
|
29
35
|
'ids',
|
@@ -53,17 +59,26 @@
|
|
53
59
|
'onValueChange',
|
54
60
|
'onFocusChange',
|
55
61
|
'isDateUnavailable',
|
56
|
-
])(
|
62
|
+
])(otherProps),
|
57
63
|
);
|
58
64
|
|
59
65
|
let datePicker = createDatePicker(reflect(() => datePickerProps));
|
66
|
+
|
60
67
|
let presence = createPresence({
|
61
68
|
get present() {
|
62
69
|
return datePicker.open;
|
63
70
|
},
|
71
|
+
get lazyMount() {
|
72
|
+
return presenceStrategyProps.lazyMount;
|
73
|
+
},
|
74
|
+
get keepMounted() {
|
75
|
+
return presenceStrategyProps.keepMounted;
|
76
|
+
},
|
64
77
|
});
|
65
78
|
|
66
|
-
let mergedProps = $derived(
|
79
|
+
let mergedProps = $derived(
|
80
|
+
mergeProps(elementProps, datePicker.getRootProps()),
|
81
|
+
);
|
67
82
|
|
68
83
|
setDatePickerContext(datePicker);
|
69
84
|
setPresenceContext(presence);
|
@@ -1,21 +1,32 @@
|
|
1
1
|
<script lang="ts" module>
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {Action} from 'svelte/action';
|
3
4
|
|
4
|
-
export interface DialogBackdropProps
|
5
|
+
export interface DialogBackdropProps
|
6
|
+
extends HtmlIngredientProps<'div', never, Action> {}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
8
10
|
import {mergeProps} from '../merge-props.js';
|
11
|
+
import {getPresenceStrategyPropsContext} from '../presence/context.svelte.js';
|
9
12
|
import {createPresence} from '../presence/create-presence.svelte.js';
|
10
13
|
import {getDialogContext} from './context.svelte.js';
|
11
14
|
|
12
15
|
let {asChild, children, ...props}: DialogBackdropProps = $props();
|
13
16
|
|
14
17
|
let dialog = getDialogContext();
|
18
|
+
|
19
|
+
let presenceStrategyProps = getPresenceStrategyPropsContext();
|
15
20
|
let presence = createPresence({
|
16
21
|
get present() {
|
17
22
|
return dialog.open;
|
18
23
|
},
|
24
|
+
get lazyMount() {
|
25
|
+
return presenceStrategyProps.lazyMount;
|
26
|
+
},
|
27
|
+
get keepMounted() {
|
28
|
+
return presenceStrategyProps.keepMounted;
|
29
|
+
},
|
19
30
|
});
|
20
31
|
|
21
32
|
let mergedProps = $derived(
|
@@ -23,10 +34,12 @@
|
|
23
34
|
);
|
24
35
|
</script>
|
25
36
|
|
26
|
-
{#if
|
27
|
-
{
|
28
|
-
{
|
29
|
-
|
30
|
-
{
|
31
|
-
|
37
|
+
{#if presence.mounted}
|
38
|
+
{#if asChild}
|
39
|
+
{@render asChild(presence.ref, mergedProps)}
|
40
|
+
{:else}
|
41
|
+
<div use:presence.ref {...mergedProps}>
|
42
|
+
{@render children?.()}
|
43
|
+
</div>
|
44
|
+
{/if}
|
32
45
|
{/if}
|
@@ -1,7 +1,9 @@
|
|
1
1
|
<script lang="ts" module>
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {Action} from 'svelte/action';
|
3
4
|
|
4
|
-
export interface DialogContentProps
|
5
|
+
export interface DialogContentProps
|
6
|
+
extends HtmlIngredientProps<'div', never, Action> {}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
@@ -19,10 +21,12 @@
|
|
19
21
|
);
|
20
22
|
</script>
|
21
23
|
|
22
|
-
{#if
|
23
|
-
{
|
24
|
-
{
|
25
|
-
|
26
|
-
{
|
27
|
-
|
24
|
+
{#if presence.mounted}
|
25
|
+
{#if asChild}
|
26
|
+
{@render asChild(presence.ref, mergedProps)}
|
27
|
+
{:else}
|
28
|
+
<div use:presence.ref {...mergedProps}>
|
29
|
+
{@render children?.()}
|
30
|
+
</div>
|
31
|
+
{/if}
|
28
32
|
{/if}
|
@@ -19,10 +19,12 @@
|
|
19
19
|
);
|
20
20
|
</script>
|
21
21
|
|
22
|
-
{#if
|
23
|
-
{
|
24
|
-
{
|
25
|
-
|
26
|
-
{
|
27
|
-
|
22
|
+
{#if presence.mounted}
|
23
|
+
{#if asChild}
|
24
|
+
{@render asChild(mergedProps)}
|
25
|
+
{:else}
|
26
|
+
<div {...mergedProps}>
|
27
|
+
{@render children?.()}
|
28
|
+
</div>
|
29
|
+
{/if}
|
28
30
|
{/if}
|
package/dist/dialog/root.svelte
CHANGED
@@ -1,32 +1,54 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
2
3
|
import type {Snippet} from 'svelte';
|
3
4
|
import type {
|
4
5
|
CreateDialogProps,
|
5
6
|
CreateDialogReturn,
|
6
7
|
} from './create-dialog.svelte.js';
|
7
8
|
|
8
|
-
export interface DialogProps
|
9
|
+
export interface DialogProps
|
10
|
+
extends CreateDialogProps,
|
11
|
+
PresenceStrategyProps {
|
9
12
|
children?: Snippet<[CreateDialogReturn]>;
|
10
13
|
}
|
11
14
|
</script>
|
12
15
|
|
13
16
|
<script lang="ts">
|
14
|
-
import {
|
17
|
+
import {
|
18
|
+
setPresenceContext,
|
19
|
+
setPresenceStrategyPropsContext,
|
20
|
+
} from '../presence/context.svelte.js';
|
15
21
|
import {createPresence} from '../presence/create-presence.svelte.js';
|
22
|
+
import {reflect} from '@zag-js/svelte';
|
23
|
+
import {createSplitProps} from '@zag-js/utils';
|
16
24
|
import {setDialogContext} from './context.svelte.js';
|
17
25
|
import {createDialog} from './create-dialog.svelte.js';
|
18
26
|
|
19
27
|
let {children, ...props}: DialogProps = $props();
|
20
28
|
|
21
|
-
let
|
29
|
+
let [presenceStrategyProps, dialogProps] = $derived(
|
30
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
31
|
+
props,
|
32
|
+
),
|
33
|
+
);
|
34
|
+
|
35
|
+
let dialog = createDialog(reflect(() => dialogProps));
|
36
|
+
|
22
37
|
let presence = createPresence({
|
23
38
|
get present() {
|
24
39
|
return dialog.open;
|
25
40
|
},
|
41
|
+
get lazyMount() {
|
42
|
+
return presenceStrategyProps.lazyMount;
|
43
|
+
},
|
44
|
+
get keepMounted() {
|
45
|
+
return presenceStrategyProps.keepMounted;
|
46
|
+
},
|
26
47
|
});
|
27
48
|
|
28
49
|
setDialogContext(dialog);
|
29
50
|
setPresenceContext(presence);
|
51
|
+
setPresenceStrategyPropsContext(() => presenceStrategyProps);
|
30
52
|
</script>
|
31
53
|
|
32
54
|
{@render children?.(dialog)}
|
@@ -1,7 +1,9 @@
|
|
1
1
|
<script lang="ts" module>
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {Action} from 'svelte/action';
|
3
4
|
|
4
|
-
export interface HoverCardContentProps
|
5
|
+
export interface HoverCardContentProps
|
6
|
+
extends HtmlIngredientProps<'div', never, Action> {}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
@@ -19,10 +21,12 @@
|
|
19
21
|
);
|
20
22
|
</script>
|
21
23
|
|
22
|
-
{#if
|
23
|
-
{
|
24
|
-
{
|
25
|
-
|
26
|
-
{
|
27
|
-
|
24
|
+
{#if presence.mounted}
|
25
|
+
{#if asChild}
|
26
|
+
{@render asChild(presence.ref, mergedProps)}
|
27
|
+
{:else}
|
28
|
+
<div use:presence.ref {...mergedProps}>
|
29
|
+
{@render children?.()}
|
30
|
+
</div>
|
31
|
+
{/if}
|
28
32
|
{/if}
|
@@ -24,10 +24,12 @@
|
|
24
24
|
);
|
25
25
|
</script>
|
26
26
|
|
27
|
-
{#if
|
28
|
-
{
|
29
|
-
{
|
30
|
-
|
31
|
-
{
|
32
|
-
|
27
|
+
{#if presence.mounted}
|
28
|
+
{#if asChild}
|
29
|
+
{@render asChild(mergedProps)}
|
30
|
+
{:else}
|
31
|
+
<div {...mergedProps}>
|
32
|
+
{@render children?.()}
|
33
|
+
</div>
|
34
|
+
{/if}
|
33
35
|
{/if}
|
@@ -1,11 +1,14 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
2
3
|
import type {Snippet} from 'svelte';
|
3
4
|
import type {
|
4
5
|
CreateHoverCardProps,
|
5
6
|
CreateHoverCardReturn,
|
6
7
|
} from './create-hover-card.svelte.js';
|
7
8
|
|
8
|
-
export interface HoverCardProps
|
9
|
+
export interface HoverCardProps
|
10
|
+
extends CreateHoverCardProps,
|
11
|
+
PresenceStrategyProps {
|
9
12
|
children?: Snippet<[CreateHoverCardReturn]>;
|
10
13
|
}
|
11
14
|
</script>
|
@@ -13,16 +16,38 @@
|
|
13
16
|
<script lang="ts">
|
14
17
|
import {setPresenceContext} from '../presence/context.svelte.js';
|
15
18
|
import {createPresence} from '../presence/create-presence.svelte.js';
|
19
|
+
import {reflect} from '@zag-js/svelte';
|
20
|
+
import {createSplitProps} from '@zag-js/utils';
|
16
21
|
import {setHoverCardContext} from './context.svelte.js';
|
17
22
|
import {createHoverCard} from './create-hover-card.svelte.js';
|
18
23
|
|
19
24
|
let {children, ...props}: HoverCardProps = $props();
|
20
25
|
|
21
|
-
let
|
26
|
+
let [hoverCardProps, presenceStrategyProps] = $derived(
|
27
|
+
createSplitProps<CreateHoverCardProps>([
|
28
|
+
'id',
|
29
|
+
'ids',
|
30
|
+
'open',
|
31
|
+
'openDelay',
|
32
|
+
'closeDelay',
|
33
|
+
'defaultOpen',
|
34
|
+
'positioning',
|
35
|
+
'onOpenChange',
|
36
|
+
])(props),
|
37
|
+
);
|
38
|
+
|
39
|
+
let hoverCard = createHoverCard(reflect(() => hoverCardProps));
|
40
|
+
|
22
41
|
let presence = createPresence({
|
23
42
|
get present() {
|
24
43
|
return hoverCard.open;
|
25
44
|
},
|
45
|
+
get lazyMount() {
|
46
|
+
return presenceStrategyProps.lazyMount;
|
47
|
+
},
|
48
|
+
get keepMounted() {
|
49
|
+
return presenceStrategyProps.keepMounted;
|
50
|
+
},
|
26
51
|
});
|
27
52
|
|
28
53
|
setHoverCardContext(hoverCard);
|
package/dist/menu/content.svelte
CHANGED
@@ -1,7 +1,9 @@
|
|
1
1
|
<script lang="ts" module>
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {Action} from 'svelte/action';
|
3
4
|
|
4
|
-
export interface MenuContentProps
|
5
|
+
export interface MenuContentProps
|
6
|
+
extends HtmlIngredientProps<'div', never, Action> {}
|
5
7
|
</script>
|
6
8
|
|
7
9
|
<script lang="ts">
|
@@ -19,10 +21,12 @@
|
|
19
21
|
);
|
20
22
|
</script>
|
21
23
|
|
22
|
-
{#if
|
23
|
-
{
|
24
|
-
{
|
25
|
-
|
26
|
-
{
|
27
|
-
|
24
|
+
{#if presence.mounted}
|
25
|
+
{#if asChild}
|
26
|
+
{@render asChild(presence.ref, mergedProps)}
|
27
|
+
{:else}
|
28
|
+
<div use:presence.ref {...mergedProps}>
|
29
|
+
{@render children?.()}
|
30
|
+
</div>
|
31
|
+
{/if}
|
28
32
|
{/if}
|
@@ -19,10 +19,12 @@
|
|
19
19
|
);
|
20
20
|
</script>
|
21
21
|
|
22
|
-
{#if
|
23
|
-
{
|
24
|
-
{
|
25
|
-
|
26
|
-
{
|
27
|
-
|
22
|
+
{#if presence.mounted}
|
23
|
+
{#if asChild}
|
24
|
+
{@render asChild(mergedProps)}
|
25
|
+
{:else}
|
26
|
+
<div {...mergedProps}>
|
27
|
+
{@render children?.()}
|
28
|
+
</div>
|
29
|
+
{/if}
|
28
30
|
{/if}
|