ui-ingredients 0.31.0 → 0.31.2
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/README.md +49 -49
- package/dist/accordion/accordion-item.svelte +64 -64
- package/dist/accordion/accordion-root.svelte +65 -65
- package/dist/alert/alert-root.svelte +45 -45
- package/dist/alert-dialog/alert-dialog-root.svelte +48 -48
- package/dist/angle-slider/angle-slider-root.svelte +58 -58
- package/dist/avatar/avatar-root.svelte +45 -45
- package/dist/carousel/carousel-root.svelte +64 -64
- package/dist/clipboard/clipboard-root.svelte +52 -52
- package/dist/collapsible/collapsible-root.svelte +73 -73
- package/dist/color-picker/color-picker-root.svelte +88 -88
- package/dist/combobox/combobox-root.svelte +102 -102
- package/dist/dialog/dialog-root.svelte +48 -48
- package/dist/drawer/drawer-root.svelte +48 -48
- package/dist/editable/editable-root.svelte +72 -72
- package/dist/field/field-root.svelte +62 -62
- package/dist/file-upload/file-upload-root.svelte +68 -68
- package/dist/floating-panel/floating-panel-root.svelte +47 -47
- package/dist/highlight/highlight.svelte +42 -42
- package/dist/hover-card/hover-card-root.svelte +51 -51
- package/dist/menu/menu-root.svelte +74 -74
- package/dist/merge-props.js +15 -17
- package/dist/number-input/number-input-root.svelte +74 -74
- package/dist/pagination/pagination-root.svelte +57 -57
- package/dist/pin-input/pin-input-root.svelte +67 -67
- package/dist/popover/popover-root.svelte +60 -60
- package/dist/presence/presence.svelte +43 -43
- package/dist/progress/progress-root.svelte +55 -55
- package/dist/qr-code/qr-code-root.svelte +52 -52
- package/dist/radio-group/radio-group-root.svelte +55 -55
- package/dist/rating-group/rating-group-root.svelte +62 -62
- package/dist/segment-group/segment-group-root.svelte +57 -57
- package/dist/select/select-root.svelte +88 -88
- package/dist/signature-pad/signature-pad-root.svelte +59 -59
- package/dist/slider/slider-root.svelte +68 -68
- package/dist/splitter/splitter-root.svelte +52 -52
- package/dist/steps/steps-root.svelte +64 -64
- package/dist/switch/switch-root.svelte +58 -58
- package/dist/tabs/tabs-root.svelte +58 -58
- package/dist/tags-input/tags-input-root.svelte +74 -74
- package/dist/time-picker/time-picker-root.svelte +81 -81
- package/dist/timer/timer-root.svelte +55 -55
- package/dist/toast/toast-actor.svelte +19 -19
- package/dist/toggle/toggle-root.svelte +49 -49
- package/dist/toggle-group/toggle-group-root.svelte +57 -57
- package/dist/tooltip/tooltip-root.svelte +44 -44
- package/dist/tour/tour-root.svelte +46 -46
- package/dist/tree-view/tree-view-branch.svelte +63 -63
- package/dist/tree-view/tree-view-root.svelte +68 -68
- package/package.json +403 -411
@@ -1,19 +1,19 @@
|
|
1
|
-
<script lang="ts">
|
2
|
-
import type {Snippet} from 'svelte';
|
3
|
-
import type {Service} from 'zagjs-legacy-toast';
|
4
|
-
import {createToast, type CreateToastReturn} from './create-toast.svelte.js';
|
5
|
-
import {setToastContext} from './toast-context.svelte.js';
|
6
|
-
|
7
|
-
interface Props {
|
8
|
-
actor: Service;
|
9
|
-
children?: Snippet<[toast: CreateToastReturn]>;
|
10
|
-
}
|
11
|
-
|
12
|
-
let {actor, children}: Props = $props();
|
13
|
-
|
14
|
-
let toast = createToast(actor);
|
15
|
-
|
16
|
-
setToastContext(toast);
|
17
|
-
</script>
|
18
|
-
|
19
|
-
{@render children?.(toast)}
|
1
|
+
<script lang="ts">
|
2
|
+
import type {Snippet} from 'svelte';
|
3
|
+
import type {Service} from 'zagjs-legacy-toast';
|
4
|
+
import {createToast, type CreateToastReturn} from './create-toast.svelte.js';
|
5
|
+
import {setToastContext} from './toast-context.svelte.js';
|
6
|
+
|
7
|
+
interface Props {
|
8
|
+
actor: Service;
|
9
|
+
children?: Snippet<[toast: CreateToastReturn]>;
|
10
|
+
}
|
11
|
+
|
12
|
+
let {actor, children}: Props = $props();
|
13
|
+
|
14
|
+
let toast = createToast(actor);
|
15
|
+
|
16
|
+
setToastContext(toast);
|
17
|
+
</script>
|
18
|
+
|
19
|
+
{@render children?.(toast)}
|
@@ -1,49 +1,49 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
-
import type {
|
4
|
-
CreateToggleProps,
|
5
|
-
CreateToggleReturn,
|
6
|
-
} from './create-toggle.svelte.js';
|
7
|
-
|
8
|
-
export interface ToggleProps
|
9
|
-
extends Assign<
|
10
|
-
HtmlIngredientProps<'button', HTMLButtonElement, CreateToggleReturn>,
|
11
|
-
CreateToggleProps
|
12
|
-
> {}
|
13
|
-
</script>
|
14
|
-
|
15
|
-
<script lang="ts">
|
16
|
-
import {reflect} from '@zag-js/svelte';
|
17
|
-
import {createSplitProps} from '../create-split-props.js';
|
18
|
-
import {mergeProps} from '../merge-props.js';
|
19
|
-
import {createToggle} from './create-toggle.svelte.js';
|
20
|
-
import {setToggleContext} from './toggle-context.svelte.js';
|
21
|
-
|
22
|
-
let {
|
23
|
-
ref = $bindable(null),
|
24
|
-
asChild,
|
25
|
-
children,
|
26
|
-
...props
|
27
|
-
}: ToggleProps = $props();
|
28
|
-
|
29
|
-
let [createToggleProps, localProps] = $derived(
|
30
|
-
createSplitProps<CreateToggleProps>([
|
31
|
-
'disabled',
|
32
|
-
'onPressedChange',
|
33
|
-
'pressed',
|
34
|
-
])(props),
|
35
|
-
);
|
36
|
-
|
37
|
-
let toggle = createToggle(reflect(() => createToggleProps));
|
38
|
-
let mergedProps = $derived(mergeProps(toggle.getRootProps(), localProps));
|
39
|
-
|
40
|
-
setToggleContext(toggle);
|
41
|
-
</script>
|
42
|
-
|
43
|
-
{#if asChild}
|
44
|
-
{@render asChild(mergedProps, toggle)}
|
45
|
-
{:else}
|
46
|
-
<button bind:this={ref} {...mergedProps}>
|
47
|
-
{@render children?.(toggle)}
|
48
|
-
</button>
|
49
|
-
{/if}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {
|
4
|
+
CreateToggleProps,
|
5
|
+
CreateToggleReturn,
|
6
|
+
} from './create-toggle.svelte.js';
|
7
|
+
|
8
|
+
export interface ToggleProps
|
9
|
+
extends Assign<
|
10
|
+
HtmlIngredientProps<'button', HTMLButtonElement, CreateToggleReturn>,
|
11
|
+
CreateToggleProps
|
12
|
+
> {}
|
13
|
+
</script>
|
14
|
+
|
15
|
+
<script lang="ts">
|
16
|
+
import {reflect} from '@zag-js/svelte';
|
17
|
+
import {createSplitProps} from '../create-split-props.js';
|
18
|
+
import {mergeProps} from '../merge-props.js';
|
19
|
+
import {createToggle} from './create-toggle.svelte.js';
|
20
|
+
import {setToggleContext} from './toggle-context.svelte.js';
|
21
|
+
|
22
|
+
let {
|
23
|
+
ref = $bindable(null),
|
24
|
+
asChild,
|
25
|
+
children,
|
26
|
+
...props
|
27
|
+
}: ToggleProps = $props();
|
28
|
+
|
29
|
+
let [createToggleProps, localProps] = $derived(
|
30
|
+
createSplitProps<CreateToggleProps>([
|
31
|
+
'disabled',
|
32
|
+
'onPressedChange',
|
33
|
+
'pressed',
|
34
|
+
])(props),
|
35
|
+
);
|
36
|
+
|
37
|
+
let toggle = createToggle(reflect(() => createToggleProps));
|
38
|
+
let mergedProps = $derived(mergeProps(toggle.getRootProps(), localProps));
|
39
|
+
|
40
|
+
setToggleContext(toggle);
|
41
|
+
</script>
|
42
|
+
|
43
|
+
{#if asChild}
|
44
|
+
{@render asChild(mergedProps, toggle)}
|
45
|
+
{:else}
|
46
|
+
<button bind:this={ref} {...mergedProps}>
|
47
|
+
{@render children?.(toggle)}
|
48
|
+
</button>
|
49
|
+
{/if}
|
@@ -1,57 +1,57 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
-
import type {
|
4
|
-
CreateToggleGroupProps,
|
5
|
-
CreateToggleGroupReturn,
|
6
|
-
} from './create-toggle-group.svelte.js';
|
7
|
-
|
8
|
-
export interface ToggleGroupProps
|
9
|
-
extends Assign<
|
10
|
-
HtmlIngredientProps<'div', HTMLDivElement, CreateToggleGroupReturn>,
|
11
|
-
CreateToggleGroupProps
|
12
|
-
> {}
|
13
|
-
</script>
|
14
|
-
|
15
|
-
<script lang="ts">
|
16
|
-
import {reflect} from '@zag-js/svelte';
|
17
|
-
import {createSplitProps} from '../create-split-props.js';
|
18
|
-
import {mergeProps} from '../merge-props.js';
|
19
|
-
import {createToggleGroup} from './create-toggle-group.svelte.js';
|
20
|
-
import {setToggleGroupContext} from './toggle-group-context.svelte.js';
|
21
|
-
|
22
|
-
let {
|
23
|
-
ref = $bindable(null),
|
24
|
-
asChild,
|
25
|
-
children,
|
26
|
-
...props
|
27
|
-
}: ToggleGroupProps = $props();
|
28
|
-
|
29
|
-
let [createToggleGroupProps, localProps] = $derived(
|
30
|
-
createSplitProps<CreateToggleGroupProps>([
|
31
|
-
'disabled',
|
32
|
-
'id',
|
33
|
-
'ids',
|
34
|
-
'loopFocus',
|
35
|
-
'multiple',
|
36
|
-
'onValueChange',
|
37
|
-
'orientation',
|
38
|
-
'rovingFocus',
|
39
|
-
'value',
|
40
|
-
])(props),
|
41
|
-
);
|
42
|
-
|
43
|
-
let toggleGroup = createToggleGroup(reflect(() => createToggleGroupProps));
|
44
|
-
let mergedProps = $derived(
|
45
|
-
mergeProps(toggleGroup.getRootProps(), localProps),
|
46
|
-
);
|
47
|
-
|
48
|
-
setToggleGroupContext(toggleGroup);
|
49
|
-
</script>
|
50
|
-
|
51
|
-
{#if asChild}
|
52
|
-
{@render asChild(mergedProps, toggleGroup)}
|
53
|
-
{:else}
|
54
|
-
<div bind:this={ref} {...mergedProps}>
|
55
|
-
{@render children?.(toggleGroup)}
|
56
|
-
</div>
|
57
|
-
{/if}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
+
import type {
|
4
|
+
CreateToggleGroupProps,
|
5
|
+
CreateToggleGroupReturn,
|
6
|
+
} from './create-toggle-group.svelte.js';
|
7
|
+
|
8
|
+
export interface ToggleGroupProps
|
9
|
+
extends Assign<
|
10
|
+
HtmlIngredientProps<'div', HTMLDivElement, CreateToggleGroupReturn>,
|
11
|
+
CreateToggleGroupProps
|
12
|
+
> {}
|
13
|
+
</script>
|
14
|
+
|
15
|
+
<script lang="ts">
|
16
|
+
import {reflect} from '@zag-js/svelte';
|
17
|
+
import {createSplitProps} from '../create-split-props.js';
|
18
|
+
import {mergeProps} from '../merge-props.js';
|
19
|
+
import {createToggleGroup} from './create-toggle-group.svelte.js';
|
20
|
+
import {setToggleGroupContext} from './toggle-group-context.svelte.js';
|
21
|
+
|
22
|
+
let {
|
23
|
+
ref = $bindable(null),
|
24
|
+
asChild,
|
25
|
+
children,
|
26
|
+
...props
|
27
|
+
}: ToggleGroupProps = $props();
|
28
|
+
|
29
|
+
let [createToggleGroupProps, localProps] = $derived(
|
30
|
+
createSplitProps<CreateToggleGroupProps>([
|
31
|
+
'disabled',
|
32
|
+
'id',
|
33
|
+
'ids',
|
34
|
+
'loopFocus',
|
35
|
+
'multiple',
|
36
|
+
'onValueChange',
|
37
|
+
'orientation',
|
38
|
+
'rovingFocus',
|
39
|
+
'value',
|
40
|
+
])(props),
|
41
|
+
);
|
42
|
+
|
43
|
+
let toggleGroup = createToggleGroup(reflect(() => createToggleGroupProps));
|
44
|
+
let mergedProps = $derived(
|
45
|
+
mergeProps(toggleGroup.getRootProps(), localProps),
|
46
|
+
);
|
47
|
+
|
48
|
+
setToggleGroupContext(toggleGroup);
|
49
|
+
</script>
|
50
|
+
|
51
|
+
{#if asChild}
|
52
|
+
{@render asChild(mergedProps, toggleGroup)}
|
53
|
+
{:else}
|
54
|
+
<div bind:this={ref} {...mergedProps}>
|
55
|
+
{@render children?.(toggleGroup)}
|
56
|
+
</div>
|
57
|
+
{/if}
|
@@ -1,44 +1,44 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {Snippet} from 'svelte';
|
3
|
-
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
4
|
-
import type {
|
5
|
-
CreateTooltipProps,
|
6
|
-
CreateTooltipReturn,
|
7
|
-
} from './create-tooltip.svelte.js';
|
8
|
-
|
9
|
-
export interface TooltipProps
|
10
|
-
extends CreateTooltipProps,
|
11
|
-
PresenceStrategyProps {
|
12
|
-
children?: Snippet<[CreateTooltipReturn]>;
|
13
|
-
}
|
14
|
-
</script>
|
15
|
-
|
16
|
-
<script lang="ts">
|
17
|
-
import {reflect} from '@zag-js/svelte';
|
18
|
-
import {createSplitProps} from '../create-split-props.js';
|
19
|
-
import {createPresence} from '../presence/create-presence.svelte.js';
|
20
|
-
import {setPresenceContext} from '../presence/presence-context.svelte.js';
|
21
|
-
import {createTooltip} from './create-tooltip.svelte.js';
|
22
|
-
import {setTooltipContext} from './tooltip-context.svelte.js';
|
23
|
-
|
24
|
-
let {children, ...props}: TooltipProps = $props();
|
25
|
-
|
26
|
-
let [presenceStrategyProps, createTooltipProps] = $derived(
|
27
|
-
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
28
|
-
props,
|
29
|
-
),
|
30
|
-
);
|
31
|
-
|
32
|
-
let tooltip = createTooltip(reflect(() => createTooltipProps));
|
33
|
-
let presence = createPresence(
|
34
|
-
reflect(() => ({
|
35
|
-
...presenceStrategyProps,
|
36
|
-
present: tooltip.open,
|
37
|
-
})),
|
38
|
-
);
|
39
|
-
|
40
|
-
setTooltipContext(tooltip);
|
41
|
-
setPresenceContext(presence);
|
42
|
-
</script>
|
43
|
-
|
44
|
-
{@render children?.(tooltip)}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Snippet} from 'svelte';
|
3
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
4
|
+
import type {
|
5
|
+
CreateTooltipProps,
|
6
|
+
CreateTooltipReturn,
|
7
|
+
} from './create-tooltip.svelte.js';
|
8
|
+
|
9
|
+
export interface TooltipProps
|
10
|
+
extends CreateTooltipProps,
|
11
|
+
PresenceStrategyProps {
|
12
|
+
children?: Snippet<[CreateTooltipReturn]>;
|
13
|
+
}
|
14
|
+
</script>
|
15
|
+
|
16
|
+
<script lang="ts">
|
17
|
+
import {reflect} from '@zag-js/svelte';
|
18
|
+
import {createSplitProps} from '../create-split-props.js';
|
19
|
+
import {createPresence} from '../presence/create-presence.svelte.js';
|
20
|
+
import {setPresenceContext} from '../presence/presence-context.svelte.js';
|
21
|
+
import {createTooltip} from './create-tooltip.svelte.js';
|
22
|
+
import {setTooltipContext} from './tooltip-context.svelte.js';
|
23
|
+
|
24
|
+
let {children, ...props}: TooltipProps = $props();
|
25
|
+
|
26
|
+
let [presenceStrategyProps, createTooltipProps] = $derived(
|
27
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
28
|
+
props,
|
29
|
+
),
|
30
|
+
);
|
31
|
+
|
32
|
+
let tooltip = createTooltip(reflect(() => createTooltipProps));
|
33
|
+
let presence = createPresence(
|
34
|
+
reflect(() => ({
|
35
|
+
...presenceStrategyProps,
|
36
|
+
present: tooltip.open,
|
37
|
+
})),
|
38
|
+
);
|
39
|
+
|
40
|
+
setTooltipContext(tooltip);
|
41
|
+
setPresenceContext(presence);
|
42
|
+
</script>
|
43
|
+
|
44
|
+
{@render children?.(tooltip)}
|
@@ -1,46 +1,46 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {Snippet} from 'svelte';
|
3
|
-
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
4
|
-
import type {
|
5
|
-
CreateTourProps,
|
6
|
-
CreateTourReturn,
|
7
|
-
} from './create-tour.svelte.js';
|
8
|
-
|
9
|
-
export interface TourProps extends CreateTourProps, PresenceStrategyProps {
|
10
|
-
children?: Snippet<[CreateTourReturn]>;
|
11
|
-
}
|
12
|
-
</script>
|
13
|
-
|
14
|
-
<script lang="ts">
|
15
|
-
import {reflect} from '@zag-js/svelte';
|
16
|
-
import {createSplitProps} from '../create-split-props.js';
|
17
|
-
import {createPresence} from '../presence/create-presence.svelte.js';
|
18
|
-
import {
|
19
|
-
setPresenceContext,
|
20
|
-
setPresenceStrategyPropsContext,
|
21
|
-
} from '../presence/presence-context.svelte.js';
|
22
|
-
import {createTour} from './create-tour.svelte.js';
|
23
|
-
import {setTourContext} from './tour-context.svelte.js';
|
24
|
-
|
25
|
-
let {children, ...props}: TourProps = $props();
|
26
|
-
|
27
|
-
let [presenceStrategyProps, createTourProps] = $derived(
|
28
|
-
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
29
|
-
props,
|
30
|
-
),
|
31
|
-
);
|
32
|
-
|
33
|
-
let tour = createTour(reflect(() => createTourProps));
|
34
|
-
let presence = createPresence(
|
35
|
-
reflect(() => ({
|
36
|
-
...presenceStrategyProps,
|
37
|
-
present: tour.open,
|
38
|
-
})),
|
39
|
-
);
|
40
|
-
|
41
|
-
setTourContext(tour);
|
42
|
-
setPresenceContext(presence);
|
43
|
-
setPresenceStrategyPropsContext(() => presenceStrategyProps);
|
44
|
-
</script>
|
45
|
-
|
46
|
-
{@render children?.(tour)}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {Snippet} from 'svelte';
|
3
|
+
import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
|
4
|
+
import type {
|
5
|
+
CreateTourProps,
|
6
|
+
CreateTourReturn,
|
7
|
+
} from './create-tour.svelte.js';
|
8
|
+
|
9
|
+
export interface TourProps extends CreateTourProps, PresenceStrategyProps {
|
10
|
+
children?: Snippet<[CreateTourReturn]>;
|
11
|
+
}
|
12
|
+
</script>
|
13
|
+
|
14
|
+
<script lang="ts">
|
15
|
+
import {reflect} from '@zag-js/svelte';
|
16
|
+
import {createSplitProps} from '../create-split-props.js';
|
17
|
+
import {createPresence} from '../presence/create-presence.svelte.js';
|
18
|
+
import {
|
19
|
+
setPresenceContext,
|
20
|
+
setPresenceStrategyPropsContext,
|
21
|
+
} from '../presence/presence-context.svelte.js';
|
22
|
+
import {createTour} from './create-tour.svelte.js';
|
23
|
+
import {setTourContext} from './tour-context.svelte.js';
|
24
|
+
|
25
|
+
let {children, ...props}: TourProps = $props();
|
26
|
+
|
27
|
+
let [presenceStrategyProps, createTourProps] = $derived(
|
28
|
+
createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
|
29
|
+
props,
|
30
|
+
),
|
31
|
+
);
|
32
|
+
|
33
|
+
let tour = createTour(reflect(() => createTourProps));
|
34
|
+
let presence = createPresence(
|
35
|
+
reflect(() => ({
|
36
|
+
...presenceStrategyProps,
|
37
|
+
present: tour.open,
|
38
|
+
})),
|
39
|
+
);
|
40
|
+
|
41
|
+
setTourContext(tour);
|
42
|
+
setPresenceContext(presence);
|
43
|
+
setPresenceStrategyPropsContext(() => presenceStrategyProps);
|
44
|
+
</script>
|
45
|
+
|
46
|
+
{@render children?.(tour)}
|
@@ -1,63 +1,63 @@
|
|
1
|
-
<script lang="ts" module>
|
2
|
-
import type {NodeProps, NodeState} from '@zag-js/tree-view';
|
3
|
-
import type {Assign, HtmlIngredientProps} from '../types.js';
|
4
|
-
|
5
|
-
export interface TreeViewBranchProps
|
6
|
-
extends Assign<
|
7
|
-
HtmlIngredientProps<'div', HTMLDivElement, NodeState>,
|
8
|
-
NodeProps
|
9
|
-
> {}
|
10
|
-
</script>
|
11
|
-
|
12
|
-
<script lang="ts">
|
13
|
-
import {reflect} from '@zag-js/svelte';
|
14
|
-
import {setCollapsibleContext} from '../collapsible/collapsible-context.svelte.js';
|
15
|
-
import {createCollapsible} from '../collapsible/create-collapsible.svelte.js';
|
16
|
-
import {createSplitProps} from '../create-split-props.js';
|
17
|
-
import {mergeProps} from '../merge-props.js';
|
18
|
-
import {
|
19
|
-
getTreeViewContext,
|
20
|
-
setTreeViewNodePropsContext,
|
21
|
-
} from './tree-view-context.svelte.js';
|
22
|
-
|
23
|
-
let {
|
24
|
-
ref = $bindable(null),
|
25
|
-
asChild,
|
26
|
-
children,
|
27
|
-
...props
|
28
|
-
}: TreeViewBranchProps = $props();
|
29
|
-
|
30
|
-
let [nodeProps, localProps] = $derived(
|
31
|
-
createSplitProps<NodeProps>(['node', 'indexPath'])(props),
|
32
|
-
);
|
33
|
-
|
34
|
-
let treeView = getTreeViewContext();
|
35
|
-
let nodeState = $derived(treeView.getNodeState(nodeProps));
|
36
|
-
let branchContentProps = $derived(treeView.getBranchContentProps(nodeProps));
|
37
|
-
let collapbsible = createCollapsible(
|
38
|
-
reflect(() => ({
|
39
|
-
ids: {content: branchContentProps.id},
|
40
|
-
open: nodeState.expanded,
|
41
|
-
disabled: nodeState.disabled,
|
42
|
-
})),
|
43
|
-
);
|
44
|
-
|
45
|
-
let mergedProps = $derived(
|
46
|
-
mergeProps(
|
47
|
-
collapbsible.getRootProps(),
|
48
|
-
treeView.getBranchProps(nodeProps),
|
49
|
-
localProps,
|
50
|
-
),
|
51
|
-
);
|
52
|
-
|
53
|
-
setCollapsibleContext(collapbsible);
|
54
|
-
setTreeViewNodePropsContext(() => nodeProps);
|
55
|
-
</script>
|
56
|
-
|
57
|
-
{#if asChild}
|
58
|
-
{@render asChild(mergedProps, nodeState)}
|
59
|
-
{:else}
|
60
|
-
<div bind:this={ref} {...mergedProps}>
|
61
|
-
{@render children?.(nodeState)}
|
62
|
-
</div>
|
63
|
-
{/if}
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {NodeProps, NodeState} from '@zag-js/tree-view';
|
3
|
+
import type {Assign, HtmlIngredientProps} from '../types.js';
|
4
|
+
|
5
|
+
export interface TreeViewBranchProps
|
6
|
+
extends Assign<
|
7
|
+
HtmlIngredientProps<'div', HTMLDivElement, NodeState>,
|
8
|
+
NodeProps
|
9
|
+
> {}
|
10
|
+
</script>
|
11
|
+
|
12
|
+
<script lang="ts">
|
13
|
+
import {reflect} from '@zag-js/svelte';
|
14
|
+
import {setCollapsibleContext} from '../collapsible/collapsible-context.svelte.js';
|
15
|
+
import {createCollapsible} from '../collapsible/create-collapsible.svelte.js';
|
16
|
+
import {createSplitProps} from '../create-split-props.js';
|
17
|
+
import {mergeProps} from '../merge-props.js';
|
18
|
+
import {
|
19
|
+
getTreeViewContext,
|
20
|
+
setTreeViewNodePropsContext,
|
21
|
+
} from './tree-view-context.svelte.js';
|
22
|
+
|
23
|
+
let {
|
24
|
+
ref = $bindable(null),
|
25
|
+
asChild,
|
26
|
+
children,
|
27
|
+
...props
|
28
|
+
}: TreeViewBranchProps = $props();
|
29
|
+
|
30
|
+
let [nodeProps, localProps] = $derived(
|
31
|
+
createSplitProps<NodeProps>(['node', 'indexPath'])(props),
|
32
|
+
);
|
33
|
+
|
34
|
+
let treeView = getTreeViewContext();
|
35
|
+
let nodeState = $derived(treeView.getNodeState(nodeProps));
|
36
|
+
let branchContentProps = $derived(treeView.getBranchContentProps(nodeProps));
|
37
|
+
let collapbsible = createCollapsible(
|
38
|
+
reflect(() => ({
|
39
|
+
ids: {content: branchContentProps.id},
|
40
|
+
open: nodeState.expanded,
|
41
|
+
disabled: nodeState.disabled,
|
42
|
+
})),
|
43
|
+
);
|
44
|
+
|
45
|
+
let mergedProps = $derived(
|
46
|
+
mergeProps(
|
47
|
+
collapbsible.getRootProps(),
|
48
|
+
treeView.getBranchProps(nodeProps),
|
49
|
+
localProps,
|
50
|
+
),
|
51
|
+
);
|
52
|
+
|
53
|
+
setCollapsibleContext(collapbsible);
|
54
|
+
setTreeViewNodePropsContext(() => nodeProps);
|
55
|
+
</script>
|
56
|
+
|
57
|
+
{#if asChild}
|
58
|
+
{@render asChild(mergedProps, nodeState)}
|
59
|
+
{:else}
|
60
|
+
<div bind:this={ref} {...mergedProps}>
|
61
|
+
{@render children?.(nodeState)}
|
62
|
+
</div>
|
63
|
+
{/if}
|