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
package/dist/menu/root.svelte
CHANGED
@@ -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 {
|
4
5
|
type CreateMenuProps,
|
5
6
|
type CreateMenuReturn,
|
6
7
|
} from './create-menu.svelte.js';
|
7
8
|
|
8
|
-
export interface MenuRootProps
|
9
|
+
export interface MenuRootProps
|
10
|
+
extends CreateMenuProps,
|
11
|
+
PresenceStrategyProps {
|
9
12
|
children?: Snippet<[CreateMenuReturn]>;
|
10
13
|
}
|
11
14
|
</script>
|
@@ -13,16 +16,49 @@
|
|
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 {setMenuContext} from './context.svelte.js';
|
17
22
|
import {createMenu} from './create-menu.svelte.js';
|
18
23
|
|
19
24
|
let {children, ...props}: MenuRootProps = $props();
|
20
25
|
|
21
|
-
let
|
26
|
+
let [menuProps, presenceStrategyProps] = $derived(
|
27
|
+
createSplitProps<CreateMenuProps>([
|
28
|
+
'anchorPoint',
|
29
|
+
'aria-label',
|
30
|
+
'closeOnSelect',
|
31
|
+
'composite',
|
32
|
+
'defaultOpen',
|
33
|
+
'highlightedValue',
|
34
|
+
'id',
|
35
|
+
'ids',
|
36
|
+
'loopFocus',
|
37
|
+
'onEscapeKeyDown',
|
38
|
+
'onFocusOutside',
|
39
|
+
'onHighlightChange',
|
40
|
+
'onInteractOutside',
|
41
|
+
'onOpenChange',
|
42
|
+
'onPointerDownOutside',
|
43
|
+
'onSelect',
|
44
|
+
'open',
|
45
|
+
'positioning',
|
46
|
+
'typeahead',
|
47
|
+
])(props),
|
48
|
+
);
|
49
|
+
|
50
|
+
let menu = createMenu(reflect(() => menuProps));
|
51
|
+
|
22
52
|
let presence = createPresence({
|
23
53
|
get present() {
|
24
54
|
return menu.open;
|
25
55
|
},
|
56
|
+
get lazyMount() {
|
57
|
+
return presenceStrategyProps.lazyMount;
|
58
|
+
},
|
59
|
+
get keepMounted() {
|
60
|
+
return presenceStrategyProps.keepMounted;
|
61
|
+
},
|
26
62
|
});
|
27
63
|
|
28
64
|
setMenuContext(menu);
|
@@ -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 PopoverContentProps
|
5
|
+
export interface PopoverContentProps
|
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}
|
package/dist/popover/root.svelte
CHANGED
@@ -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
|
CreatePopoverProps,
|
5
6
|
CreatePopoverReturn,
|
6
7
|
} from './create-popover.svelte.js';
|
7
8
|
|
8
|
-
export interface PopoverProps
|
9
|
+
export interface PopoverProps
|
10
|
+
extends CreatePopoverProps,
|
11
|
+
PresenceStrategyProps {
|
9
12
|
children?: Snippet<[CreatePopoverReturn]>;
|
10
13
|
}
|
11
14
|
</script>
|
@@ -13,16 +16,46 @@
|
|
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 {setPopoverContext} from './context.svelte.js';
|
17
22
|
import {createPopover} from './create-popover.svelte.js';
|
18
23
|
|
19
24
|
let {children, ...props}: PopoverProps = $props();
|
20
25
|
|
21
|
-
let
|
26
|
+
let [popoverProps, presenceStrategyProps] = $derived(
|
27
|
+
createSplitProps<CreatePopoverProps>([
|
28
|
+
'autoFocus',
|
29
|
+
'closeOnEscape',
|
30
|
+
'closeOnInteractOutside',
|
31
|
+
'defaultOpen',
|
32
|
+
'id',
|
33
|
+
'ids',
|
34
|
+
'initialFocusEl',
|
35
|
+
'modal',
|
36
|
+
'onEscapeKeyDown',
|
37
|
+
'onFocusOutside',
|
38
|
+
'onInteractOutside',
|
39
|
+
'onOpenChange',
|
40
|
+
'onPointerDownOutside',
|
41
|
+
'open',
|
42
|
+
'persistentElements',
|
43
|
+
'portalled',
|
44
|
+
'positioning',
|
45
|
+
])(props),
|
46
|
+
);
|
47
|
+
|
48
|
+
let popover = createPopover(reflect(() => popoverProps));
|
22
49
|
let presence = createPresence({
|
23
50
|
get present() {
|
24
51
|
return popover.open;
|
25
52
|
},
|
53
|
+
get lazyMount() {
|
54
|
+
return presenceStrategyProps.lazyMount;
|
55
|
+
},
|
56
|
+
get keepMounted() {
|
57
|
+
return presenceStrategyProps.keepMounted;
|
58
|
+
},
|
26
59
|
});
|
27
60
|
|
28
61
|
setPopoverContext(popover);
|
package/dist/portal/root.svelte
CHANGED
@@ -5,6 +5,7 @@
|
|
5
5
|
container?: HTMLElement;
|
6
6
|
disabled?: boolean;
|
7
7
|
children: Snippet;
|
8
|
+
[x: `data-${string}`]: string | number | boolean | null | undefined;
|
8
9
|
}
|
9
10
|
</script>
|
10
11
|
|
@@ -12,7 +13,7 @@
|
|
12
13
|
import {getEnvironmentContext} from '../environment-provider/index.js';
|
13
14
|
import {portal} from '@zag-js/svelte';
|
14
15
|
|
15
|
-
let {container, disabled, children}: PortalProps = $props();
|
16
|
+
let {container, disabled, children, ...props}: PortalProps = $props();
|
16
17
|
|
17
18
|
let environment = getEnvironmentContext();
|
18
19
|
</script>
|
@@ -23,6 +24,9 @@
|
|
23
24
|
container,
|
24
25
|
getRootNode: environment?.getRootNode,
|
25
26
|
}}
|
27
|
+
data-scope="portal"
|
28
|
+
data-part="root"
|
29
|
+
{...props}
|
26
30
|
>
|
27
31
|
{@render children?.()}
|
28
32
|
</div>
|
@@ -1,2 +1,3 @@
|
|
1
|
-
import type { CreatePresenceReturn } from './create-presence.svelte.js';
|
1
|
+
import type { CreatePresenceReturn, PresenceStrategyProps } from './create-presence.svelte.js';
|
2
2
|
export declare const getPresenceContext: () => CreatePresenceReturn, setPresenceContext: (context: CreatePresenceReturn | (() => CreatePresenceReturn)) => void;
|
3
|
+
export declare const getPresenceStrategyPropsContext: () => PresenceStrategyProps, setPresenceStrategyPropsContext: (context: PresenceStrategyProps | (() => PresenceStrategyProps)) => void;
|
@@ -1,10 +1,17 @@
|
|
1
1
|
import type { HTMLAttributes } from 'svelte/elements';
|
2
|
-
export interface
|
3
|
-
|
2
|
+
export interface PresenceStrategyProps {
|
3
|
+
/** @default false */
|
4
|
+
lazyMount?: boolean;
|
5
|
+
/** @default true */
|
6
|
+
keepMounted?: boolean;
|
7
|
+
}
|
8
|
+
export interface CreatePresenceProps extends PresenceStrategyProps {
|
9
|
+
present: boolean;
|
4
10
|
}
|
5
11
|
export interface CreatePresenceReturn extends ReturnType<typeof createPresence> {
|
6
12
|
}
|
7
13
|
export declare function createPresence(props: CreatePresenceProps): {
|
8
14
|
ref: (node: HTMLElement) => void;
|
9
15
|
getPresenceProps: () => HTMLAttributes<HTMLElement>;
|
16
|
+
readonly mounted: boolean;
|
10
17
|
};
|
@@ -1,10 +1,12 @@
|
|
1
1
|
import * as presence from '@zag-js/presence';
|
2
2
|
import { normalizeProps, useMachine } from '@zag-js/svelte';
|
3
|
-
import { tick } from 'svelte';
|
4
3
|
export function createPresence(props) {
|
4
|
+
const present = $derived(props.present);
|
5
|
+
const lazyMount = $derived(props.lazyMount ?? false);
|
6
|
+
const keepMounted = $derived(props.keepMounted ?? true);
|
5
7
|
const context = $derived({
|
6
8
|
get present() {
|
7
|
-
return
|
9
|
+
return present;
|
8
10
|
},
|
9
11
|
});
|
10
12
|
const [state, send] = useMachine(presence.machine(context), { context });
|
@@ -15,13 +17,31 @@ export function createPresence(props) {
|
|
15
17
|
'data-state': context.present ? 'open' : 'closed',
|
16
18
|
};
|
17
19
|
}
|
20
|
+
let wasPresent = $state(false);
|
21
|
+
$effect(() => {
|
22
|
+
if (!api.present)
|
23
|
+
return;
|
24
|
+
if (wasPresent)
|
25
|
+
return;
|
26
|
+
wasPresent = true;
|
27
|
+
});
|
28
|
+
const unmounted = $derived.by(() => {
|
29
|
+
if (api.present)
|
30
|
+
return false;
|
31
|
+
if (!wasPresent && lazyMount)
|
32
|
+
return true;
|
33
|
+
if (wasPresent && !keepMounted)
|
34
|
+
return true;
|
35
|
+
return false;
|
36
|
+
});
|
18
37
|
function ref(node) {
|
19
|
-
|
20
|
-
api.setNode(node);
|
21
|
-
});
|
38
|
+
api.setNode(node);
|
22
39
|
}
|
23
40
|
return {
|
24
41
|
ref,
|
25
42
|
getPresenceProps,
|
43
|
+
get mounted() {
|
44
|
+
return !unmounted;
|
45
|
+
},
|
26
46
|
};
|
27
47
|
}
|
@@ -1,18 +1,22 @@
|
|
1
1
|
<script lang="ts" module>
|
2
|
-
import type {Assign,
|
2
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
3
|
import type {CreatePresenceProps} from './create-presence.svelte.js';
|
4
4
|
|
5
5
|
export interface PresenceProps
|
6
|
-
extends Assign<
|
6
|
+
extends Assign<
|
7
|
+
HtmlIngredientProps<'div', never, Action>,
|
8
|
+
CreatePresenceProps
|
9
|
+
> {}
|
7
10
|
</script>
|
8
11
|
|
9
12
|
<script lang="ts">
|
10
13
|
import {mergeProps} from '../merge-props.js';
|
11
14
|
import {reflect} from '@zag-js/svelte';
|
12
15
|
import {createSplitProps} from '@zag-js/utils';
|
16
|
+
import type {Action} from 'svelte/action';
|
13
17
|
import {createPresence} from './create-presence.svelte.js';
|
14
18
|
|
15
|
-
let {children, ...props}: PresenceProps = $props();
|
19
|
+
let {asChild, children, ...props}: PresenceProps = $props();
|
16
20
|
|
17
21
|
let [presenceProps, otherProps] = $derived(
|
18
22
|
createSplitProps<CreatePresenceProps>(['present'])(props),
|
@@ -25,6 +29,12 @@
|
|
25
29
|
);
|
26
30
|
</script>
|
27
31
|
|
28
|
-
|
29
|
-
{
|
30
|
-
|
32
|
+
{#if presence.mounted}
|
33
|
+
{#if asChild}
|
34
|
+
{@render asChild(presence.ref, mergedProps)}
|
35
|
+
{:else}
|
36
|
+
<div use:presence.ref {...mergedProps}>
|
37
|
+
{@render children?.()}
|
38
|
+
</div>
|
39
|
+
{/if}
|
40
|
+
{/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 SelectContentProps
|
5
|
+
export interface SelectContentProps
|
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/select/root.svelte
CHANGED
@@ -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
|
CreateSelectProps,
|
@@ -7,9 +8,10 @@
|
|
7
8
|
|
8
9
|
export interface SelectProps<T>
|
9
10
|
extends Assign<
|
10
|
-
|
11
|
-
|
12
|
-
|
11
|
+
HtmlIngredientProps<'div', CreateSelectReturn>,
|
12
|
+
CreateSelectProps<T>
|
13
|
+
>,
|
14
|
+
PresenceStrategyProps {}
|
13
15
|
</script>
|
14
16
|
|
15
17
|
<script lang="ts" generics="T">
|
@@ -57,13 +59,26 @@
|
|
57
59
|
);
|
58
60
|
|
59
61
|
let select = createSelect(reflect(() => selectProps));
|
62
|
+
|
63
|
+
let [presenceStrategyProps, elementProps] = $derived(
|
64
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
65
|
+
otherProps,
|
66
|
+
),
|
67
|
+
);
|
68
|
+
|
60
69
|
let presence = createPresence({
|
61
70
|
get present() {
|
62
71
|
return select.open;
|
63
72
|
},
|
73
|
+
get lazyMount() {
|
74
|
+
return presenceStrategyProps.lazyMount;
|
75
|
+
},
|
76
|
+
get keepMounted() {
|
77
|
+
return presenceStrategyProps.keepMounted;
|
78
|
+
},
|
64
79
|
});
|
65
80
|
|
66
|
-
let mergedProps = $derived(mergeProps(
|
81
|
+
let mergedProps = $derived(mergeProps(elementProps, select.getRootProps()));
|
67
82
|
|
68
83
|
setSelectContext(select);
|
69
84
|
setPresenceContext(presence);
|
@@ -1,24 +1,34 @@
|
|
1
1
|
<script lang="ts" module>
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
3
3
|
|
4
|
-
export interface TimePickerContentProps
|
4
|
+
export interface TimePickerContentProps
|
5
|
+
extends HtmlIngredientProps<'div', never, Action> {}
|
5
6
|
</script>
|
6
7
|
|
7
8
|
<script lang="ts">
|
8
9
|
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {getPresenceContext} from '../presence/context.svelte.js';
|
11
|
+
import type {Action} from 'svelte/action';
|
9
12
|
import {getTimePickerContext} from './context.svelte.js';
|
10
13
|
|
11
14
|
let {asChild, children, ...props}: TimePickerContentProps = $props();
|
12
15
|
|
13
16
|
let timePicker = getTimePickerContext();
|
17
|
+
let presence = getPresenceContext();
|
14
18
|
|
15
|
-
let mergedProps = $derived(
|
19
|
+
let mergedProps = $derived(
|
20
|
+
mergeProps(
|
21
|
+
props,
|
22
|
+
timePicker.getContentProps(),
|
23
|
+
presence.getPresenceProps(),
|
24
|
+
),
|
25
|
+
);
|
16
26
|
</script>
|
17
27
|
|
18
28
|
{#if asChild}
|
19
|
-
{@render asChild(mergedProps)}
|
29
|
+
{@render asChild(presence.ref, mergedProps)}
|
20
30
|
{:else}
|
21
|
-
<div {...mergedProps}>
|
31
|
+
<div use:presence.ref {...mergedProps}>
|
22
32
|
{@render children?.()}
|
23
33
|
</div>
|
24
34
|
{/if}
|
@@ -7,14 +7,20 @@
|
|
7
7
|
|
8
8
|
<script lang="ts">
|
9
9
|
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {getPresenceContext} from '../presence/context.svelte.js';
|
10
11
|
import {getTimePickerContext} from './context.svelte.js';
|
11
12
|
|
12
13
|
let {asChild, children, ...props}: TimePickerPositionerProps = $props();
|
13
14
|
|
14
15
|
let timePicker = getTimePickerContext();
|
16
|
+
let presence = getPresenceContext();
|
15
17
|
|
16
18
|
let mergedProps = $derived(
|
17
|
-
mergeProps(
|
19
|
+
mergeProps(
|
20
|
+
props,
|
21
|
+
timePicker.getPositionerProps(),
|
22
|
+
presence.getPresenceProps(),
|
23
|
+
),
|
18
24
|
);
|
19
25
|
</script>
|
20
26
|
|
@@ -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
|
CreateTimePickerProps,
|
@@ -7,13 +8,16 @@
|
|
7
8
|
|
8
9
|
export interface TimePickerProps
|
9
10
|
extends Assign<
|
10
|
-
|
11
|
-
|
12
|
-
|
11
|
+
HtmlIngredientProps<'div', CreateTimePickerReturn>,
|
12
|
+
CreateTimePickerProps
|
13
|
+
>,
|
14
|
+
PresenceStrategyProps {}
|
13
15
|
</script>
|
14
16
|
|
15
17
|
<script lang="ts">
|
16
18
|
import {mergeProps} from '../merge-props.js';
|
19
|
+
import {setPresenceContext} from '../presence/context.svelte.js';
|
20
|
+
import {createPresence} from '../presence/create-presence.svelte.js';
|
17
21
|
import {reflect} from '@zag-js/svelte';
|
18
22
|
import {createSplitProps} from '@zag-js/utils';
|
19
23
|
import {setTimePickerContext} from './context.svelte.js';
|
@@ -47,9 +51,30 @@
|
|
47
51
|
|
48
52
|
let timePicker = createTimePicker(reflect(() => timePickerProps));
|
49
53
|
|
50
|
-
let
|
54
|
+
let [presenceStrategyProps, elementProps] = $derived(
|
55
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
56
|
+
otherProps,
|
57
|
+
),
|
58
|
+
);
|
59
|
+
|
60
|
+
let presence = createPresence({
|
61
|
+
get present() {
|
62
|
+
return timePicker.open;
|
63
|
+
},
|
64
|
+
get lazyMount() {
|
65
|
+
return presenceStrategyProps.lazyMount;
|
66
|
+
},
|
67
|
+
get keepMounted() {
|
68
|
+
return presenceStrategyProps.keepMounted;
|
69
|
+
},
|
70
|
+
});
|
71
|
+
|
72
|
+
let mergedProps = $derived(
|
73
|
+
mergeProps(elementProps, timePicker.getRootProps()),
|
74
|
+
);
|
51
75
|
|
52
76
|
setTimePickerContext(timePicker);
|
77
|
+
setPresenceContext(presence);
|
53
78
|
</script>
|
54
79
|
|
55
80
|
{#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 TooltipContentProps
|
5
|
+
export interface TooltipContentProps
|
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}
|
package/dist/tooltip/root.svelte
CHANGED
@@ -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
|
CreateTooltipProps,
|
5
6
|
CreateTooltipReturn,
|
6
7
|
} from './create-tooltip.svelte.js';
|
7
8
|
|
8
|
-
export interface TooltipProps
|
9
|
+
export interface TooltipProps
|
10
|
+
extends CreateTooltipProps,
|
11
|
+
PresenceStrategyProps {
|
9
12
|
children?: Snippet<[CreateTooltipReturn]>;
|
10
13
|
}
|
11
14
|
</script>
|
@@ -13,16 +16,31 @@
|
|
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 {setTooltipContext} from './context.svelte.js';
|
17
22
|
import {createTooltip} from './create-tooltip.svelte.js';
|
18
23
|
|
19
24
|
let {children, ...props}: TooltipProps = $props();
|
20
25
|
|
21
|
-
let
|
26
|
+
let [presenceStrategyProps, tooltipProps] = $derived(
|
27
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
28
|
+
props,
|
29
|
+
),
|
30
|
+
);
|
31
|
+
|
32
|
+
let tooltip = createTooltip(reflect(() => tooltipProps));
|
33
|
+
|
22
34
|
let presence = createPresence({
|
23
35
|
get present() {
|
24
36
|
return tooltip.open;
|
25
37
|
},
|
38
|
+
get lazyMount() {
|
39
|
+
return presenceStrategyProps.lazyMount;
|
40
|
+
},
|
41
|
+
get keepMounted() {
|
42
|
+
return presenceStrategyProps.keepMounted;
|
43
|
+
},
|
26
44
|
});
|
27
45
|
|
28
46
|
setTooltipContext(tooltip);
|
package/dist/types.d.ts
CHANGED
@@ -1,4 +1,5 @@
|
|
1
1
|
import type { Snippet } from 'svelte';
|
2
|
+
import type { Action } from 'svelte/action';
|
2
3
|
import type { SvelteHTMLElements } from 'svelte/elements';
|
3
4
|
import type { TransitionConfig } from 'svelte/transition';
|
4
5
|
export type GenericObject = Record<string, any>;
|
@@ -13,10 +14,14 @@ export interface TransitionProps {
|
|
13
14
|
out?: TransitionFunction;
|
14
15
|
transition?: TransitionFunction;
|
15
16
|
}
|
16
|
-
export type
|
17
|
+
export type AsChildWithRef<Ref extends Action, Context = never> = [
|
18
|
+
Context
|
19
|
+
] extends [never] ? Snippet<[ref: Ref, attrs: GenericObject]> : Snippet<[ref: Ref, attrs: GenericObject, context: Context]>;
|
20
|
+
export type AsChildWithoutRef<Context = never> = [Context] extends [never] ? Snippet<[attrs: GenericObject]> : Snippet<[attrs: GenericObject, context: Context]>;
|
21
|
+
export type AsChild<Ref extends Action, Context = never> = [Ref] extends [never] ? AsChildWithoutRef<Context> : AsChildWithRef<Ref, Context>;
|
17
22
|
export type Children<T = never> = [T] extends [never] ? Snippet : Snippet<[context: T]>;
|
18
23
|
export type PropsWithoutChildren<T> = Omit<T, 'children'>;
|
19
|
-
export type HtmlIngredientProps<
|
20
|
-
asChild?: AsChild<Context>;
|
24
|
+
export type HtmlIngredientProps<Element extends IntrinsicElements, Context = never, Ref extends Action = never> = TransitionProps & PropsWithoutChildren<HtmlProps<Element>> & {
|
21
25
|
children?: Children<Context>;
|
26
|
+
asChild?: AsChild<Ref, Context>;
|
22
27
|
};
|