ui-ingredients 0.11.0 → 0.13.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +1 -1
- package/dist/accordion/accordion-item-trigger.svelte +1 -1
- package/dist/alert-dialog/alert-dialog-close-trigger.svelte +1 -1
- package/dist/alert-dialog/alert-dialog-trigger.svelte +1 -1
- package/dist/carousel/carousel-indicator.svelte +1 -1
- package/dist/carousel/carousel-next-trigger.svelte +1 -1
- package/dist/carousel/carousel-prev-trigger.svelte +1 -1
- package/dist/clipboard/clipboard-trigger.svelte +1 -1
- package/dist/collapsible/collapsible-trigger.svelte +1 -1
- package/dist/color-picker/color-picker-channel-slider-label.svelte +2 -5
- package/dist/color-picker/color-picker-channel-slider-label.svelte.d.ts +2 -3
- package/dist/color-picker/color-picker-swatch-trigger.svelte +1 -1
- package/dist/color-picker/create-color-picker.svelte.d.ts +1 -2
- package/dist/color-picker/create-color-picker.svelte.js +0 -1
- package/dist/color-picker/index.d.ts +1 -0
- package/dist/combobox/combobox-clear-trigger.svelte +1 -1
- package/dist/combobox/combobox-root.svelte +6 -10
- package/dist/combobox/combobox-root.svelte.d.ts +16 -19
- package/dist/combobox/combobox-trigger.svelte +1 -1
- package/dist/combobox/combobox.d.ts +1 -0
- package/dist/combobox/combobox.js +1 -0
- package/dist/combobox/create-combobox.svelte.d.ts +3 -3
- package/dist/combobox/create-combobox.svelte.js +1 -10
- package/dist/create-context.svelte.d.ts +1 -1
- package/dist/date-picker/create-date-picker.svelte.d.ts +1 -5
- package/dist/date-picker/create-date-picker.svelte.js +0 -6
- package/dist/date-picker/date-picker-clear-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-day-table-cell-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-month-table-cell-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-next-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-preset-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-prev-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-view-trigger.svelte +1 -1
- package/dist/date-picker/date-picker-year-table-cell-trigger.svelte +1 -1
- package/dist/date-picker/index.d.ts +1 -0
- package/dist/dialog/dialog-close-trigger.svelte +1 -1
- package/dist/dialog/dialog-trigger.svelte +1 -1
- package/dist/drawer/drawer-close-trigger.svelte +1 -1
- package/dist/drawer/drawer-trigger.svelte +1 -1
- package/dist/editable/editable-cancel-trigger.svelte +1 -1
- package/dist/editable/editable-edit-trigger.svelte +1 -1
- package/dist/editable/editable-submit-trigger.svelte +1 -1
- package/dist/field/field-textarea.svelte +30 -4
- package/dist/field/field-textarea.svelte.d.ts +3 -1
- package/dist/file-upload/file-upload-clear-trigger.svelte +1 -1
- package/dist/file-upload/file-upload-item-delete-trigger.svelte +1 -1
- package/dist/file-upload/file-upload-trigger.svelte +1 -1
- package/dist/floating-panel/floating-panel-close-trigger.svelte +1 -1
- package/dist/floating-panel/floating-panel-drag-trigger.svelte +1 -1
- package/dist/floating-panel/floating-panel-maximize-trigger.svelte +1 -1
- package/dist/floating-panel/floating-panel-minimize-trigger.svelte +1 -1
- package/dist/floating-panel/floating-panel-resize-trigger.svelte +1 -1
- package/dist/floating-panel/floating-panel-restore-trigger.svelte +1 -1
- package/dist/floating-panel/floating-panel-trigger.svelte +1 -1
- package/dist/menu/menu-context-trigger.svelte +1 -1
- package/dist/menu/menu-trigger-item.svelte +1 -1
- package/dist/menu/menu-trigger.svelte +1 -1
- package/dist/number-input/number-input-decrement-trigger.svelte +1 -1
- package/dist/number-input/number-input-increment-trigger.svelte +1 -1
- package/dist/pagination/pagination-item.svelte +1 -1
- package/dist/pagination/pagination-next-trigger.svelte +1 -1
- package/dist/pagination/pagination-prev-trigger.svelte +1 -1
- package/dist/pin-input/create-pin-input.svelte.js +1 -0
- package/dist/pin-input/pin-input-clear-trigger.svelte +1 -1
- package/dist/popover/popover-close-trigger.svelte +1 -1
- package/dist/popover/popover-trigger.svelte +1 -1
- package/dist/segment-group/create-segment-group.svelte.js +26 -1
- package/dist/segment-group/segment-group-indicator.svelte +1 -2
- package/dist/segment-group/segment-group-item-control.svelte +1 -6
- package/dist/segment-group/segment-group-item-text.svelte +1 -6
- package/dist/segment-group/segment-group-item.svelte +1 -6
- package/dist/segment-group/segment-group-label.svelte +1 -4
- package/dist/segment-group/segment-group-root.svelte +1 -2
- package/dist/select/create-select.svelte.d.ts +3 -3
- package/dist/select/create-select.svelte.js +1 -10
- package/dist/select/select-clear-trigger.svelte +1 -1
- package/dist/select/select-root.svelte +6 -9
- package/dist/select/select-root.svelte.d.ts +16 -19
- package/dist/select/select-trigger.svelte +1 -1
- package/dist/select/select.d.ts +1 -0
- package/dist/select/select.js +1 -0
- package/dist/signature-pad/signature-pad-clear-trigger.svelte +1 -1
- package/dist/steps/steps-next-trigger.svelte +1 -1
- package/dist/steps/steps-prev-trigger.svelte +1 -1
- package/dist/steps/steps-trigger.svelte +1 -1
- package/dist/tabs/tabs-trigger.svelte +1 -1
- package/dist/tags-input/tags-input-clear-trigger.svelte +1 -1
- package/dist/tags-input/tags-input-item-delete-trigger.svelte +1 -1
- package/dist/time-picker/index.d.ts +1 -1
- package/dist/time-picker/time-picker-clear-trigger.svelte +1 -1
- package/dist/time-picker/time-picker-trigger.svelte +1 -1
- package/dist/timer/timer-action-trigger.svelte +1 -1
- package/dist/toast/create-toaster.svelte.d.ts +3 -17
- package/dist/toast/toast-action-trigger.svelte +1 -1
- package/dist/toast/toast-close-trigger.svelte +1 -1
- package/dist/toggle-group/toggle-group-item.svelte +1 -1
- package/dist/tooltip/tooltip-trigger.svelte +1 -1
- package/dist/tour/tour-action-trigger.svelte +1 -1
- package/dist/tour/tour-close-trigger.svelte +1 -1
- package/dist/tour/tour-trigger.svelte +1 -1
- package/dist/tree-view/index.d.ts +2 -0
- package/dist/tree-view/tree-view-branch-content.svelte +6 -7
- package/dist/tree-view/tree-view-branch-control.svelte +3 -5
- package/dist/tree-view/tree-view-branch-indent-guide.svelte +35 -0
- package/dist/tree-view/tree-view-branch-indent-guide.svelte.d.ts +21 -0
- package/dist/tree-view/tree-view-branch-indicator.svelte +6 -8
- package/dist/tree-view/tree-view-branch-indicator.svelte.d.ts +1 -1
- package/dist/tree-view/tree-view-branch-text.svelte +3 -5
- package/dist/tree-view/tree-view-branch-trigger.svelte +3 -5
- package/dist/tree-view/tree-view-branch.svelte +11 -20
- package/dist/tree-view/tree-view-branch.svelte.d.ts +2 -2
- package/dist/tree-view/tree-view-context.svelte.d.ts +2 -10
- package/dist/tree-view/tree-view-context.svelte.js +1 -3
- package/dist/tree-view/tree-view-item-indicator.svelte +3 -5
- package/dist/tree-view/tree-view-item-text.svelte +3 -5
- package/dist/tree-view/tree-view-item.svelte +9 -22
- package/dist/tree-view/tree-view-item.svelte.d.ts +2 -2
- package/dist/tree-view/tree-view-label.svelte +0 -1
- package/dist/tree-view/tree-view-root.svelte +1 -0
- package/dist/tree-view/tree-view-tree.svelte +2 -11
- package/dist/tree-view/tree-view-tree.svelte.d.ts +0 -1
- package/dist/tree-view/tree-view.d.ts +2 -0
- package/dist/tree-view/tree-view.js +2 -0
- package/dist/tree-view/types.d.ts +4 -0
- package/dist/tree-view/types.js +1 -0
- package/package.json +58 -57
@@ -1,23 +1,9 @@
|
|
1
|
-
import type { Machine, StateMachine } from '@zag-js/core';
|
2
1
|
import * as toast from '@zag-js/toast';
|
3
|
-
export interface CreateToasterProps {
|
2
|
+
export interface CreateToasterProps extends Omit<Partial<toast.GroupMachineContext>, 'id'> {
|
4
3
|
id?: string;
|
5
|
-
|
6
|
-
gap?: toast.GroupMachineContext['gap'];
|
7
|
-
hotkey?: toast.GroupMachineContext['hotkey'];
|
8
|
-
offsets?: toast.GroupMachineContext['offsets'];
|
9
|
-
overlap?: toast.GroupMachineContext['overlap'];
|
10
|
-
duration?: toast.GroupMachineContext['duration'];
|
11
|
-
placement?: toast.GroupMachineContext['placement'];
|
12
|
-
removeDelay?: toast.GroupMachineContext['removeDelay'];
|
13
|
-
pauseOnPageIdle?: toast.GroupMachineContext['pauseOnPageIdle'];
|
4
|
+
placement?: toast.Placement;
|
14
5
|
}
|
15
|
-
type ToasterMachineState = {
|
16
|
-
value: 'stack' | 'overlap';
|
17
|
-
};
|
18
|
-
type ToasterMachine = Machine<toast.GroupMachineContext, ToasterMachineState, StateMachine.AnyEventObject>;
|
19
6
|
export interface CreateToasterReturn extends toast.GroupApi {
|
20
|
-
machine:
|
7
|
+
machine: toast.GroupService;
|
21
8
|
}
|
22
9
|
export declare function createToaster(props?: CreateToasterProps): CreateToasterReturn;
|
23
|
-
export {};
|
@@ -1,6 +1,7 @@
|
|
1
1
|
export * as TreeView from './tree-view.js';
|
2
2
|
export type { TreeViewBranchContentProps } from './tree-view-branch-content.svelte';
|
3
3
|
export type { TreeViewBranchControlProps } from './tree-view-branch-control.svelte';
|
4
|
+
export type { TreeViewBranchIndentGuideProps } from './tree-view-branch-indent-guide.svelte';
|
4
5
|
export type { TreeViewBranchIndicatorProps } from './tree-view-branch-indicator.svelte';
|
5
6
|
export type { TreeViewBranchTextProps } from './tree-view-branch-text.svelte';
|
6
7
|
export type { TreeViewBranchTriggerProps } from './tree-view-branch-trigger.svelte';
|
@@ -13,3 +14,4 @@ export type { TreeViewProps } from './tree-view-root.svelte';
|
|
13
14
|
export type { TreeViewTreeProps } from './tree-view-tree.svelte';
|
14
15
|
export { anatomy as treeViewAnatomy } from '@zag-js/tree-view';
|
15
16
|
export { getTreeViewContext } from './tree-view-context.svelte.js';
|
17
|
+
export type { NodeProps } from './types.js';
|
@@ -12,8 +12,8 @@
|
|
12
12
|
import {getPresenceStrategyPropsContext} from '../presence/presence-context.svelte.js';
|
13
13
|
import {reflect} from '@zag-js/svelte';
|
14
14
|
import {
|
15
|
-
getTreeViewBranchPropsContext,
|
16
15
|
getTreeViewContext,
|
16
|
+
getTreeViewNodePropsContext,
|
17
17
|
} from './tree-view-context.svelte.js';
|
18
18
|
|
19
19
|
let {
|
@@ -24,21 +24,20 @@
|
|
24
24
|
}: TreeViewBranchContentProps = $props();
|
25
25
|
|
26
26
|
let treeView = getTreeViewContext();
|
27
|
-
|
28
|
-
let
|
29
|
-
let branchState = $derived(treeView.getBranchState(branchProps));
|
27
|
+
let nodeProps = getTreeViewNodePropsContext();
|
28
|
+
let nodeState = $derived(treeView.getNodeState(nodeProps));
|
30
29
|
|
31
30
|
let presenceStrategyProps = getPresenceStrategyPropsContext();
|
32
31
|
let presence = createPresence(
|
33
32
|
reflect(() => ({
|
34
|
-
present: branchState.expanded,
|
35
33
|
...presenceStrategyProps,
|
34
|
+
present: nodeState.expanded,
|
36
35
|
})),
|
37
36
|
);
|
38
37
|
|
39
38
|
let mergedProps = $derived(
|
40
39
|
mergeProps(
|
41
|
-
treeView.getBranchContentProps(
|
40
|
+
treeView.getBranchContentProps(nodeProps),
|
42
41
|
presence.getPresenceProps(),
|
43
42
|
props,
|
44
43
|
),
|
@@ -49,7 +48,7 @@
|
|
49
48
|
{#if asChild}
|
50
49
|
{@render asChild(presence.setReference, mergedProps)}
|
51
50
|
{:else}
|
52
|
-
<div bind:this={ref} {...mergedProps}>
|
51
|
+
<div bind:this={ref} use:presence.setReference {...mergedProps}>
|
53
52
|
{@render children?.()}
|
54
53
|
</div>
|
55
54
|
{/if}
|
@@ -8,8 +8,8 @@
|
|
8
8
|
<script lang="ts">
|
9
9
|
import {mergeProps} from '../merge-props.js';
|
10
10
|
import {
|
11
|
-
getTreeViewBranchPropsContext,
|
12
11
|
getTreeViewContext,
|
12
|
+
getTreeViewNodePropsContext,
|
13
13
|
} from './tree-view-context.svelte.js';
|
14
14
|
|
15
15
|
let {
|
@@ -20,11 +20,9 @@
|
|
20
20
|
}: TreeViewBranchControlProps = $props();
|
21
21
|
|
22
22
|
let treeView = getTreeViewContext();
|
23
|
-
|
24
|
-
let branchProps = getTreeViewBranchPropsContext();
|
25
|
-
|
23
|
+
let nodeProps = getTreeViewNodePropsContext();
|
26
24
|
let mergedProps = $derived(
|
27
|
-
mergeProps(treeView.getBranchControlProps(
|
25
|
+
mergeProps(treeView.getBranchControlProps(nodeProps), props),
|
28
26
|
);
|
29
27
|
</script>
|
30
28
|
|
@@ -0,0 +1,35 @@
|
|
1
|
+
<script lang="ts" module>
|
2
|
+
import type {HtmlIngredientProps} from '../types.js';
|
3
|
+
|
4
|
+
export interface TreeViewBranchIndentGuideProps
|
5
|
+
extends HtmlIngredientProps<'div', HTMLDivElement> {}
|
6
|
+
</script>
|
7
|
+
|
8
|
+
<script lang="ts">
|
9
|
+
import {mergeProps} from '../merge-props.js';
|
10
|
+
import {
|
11
|
+
getTreeViewContext,
|
12
|
+
getTreeViewNodePropsContext,
|
13
|
+
} from './tree-view-context.svelte.js';
|
14
|
+
|
15
|
+
let {
|
16
|
+
ref = $bindable(null),
|
17
|
+
asChild,
|
18
|
+
children,
|
19
|
+
...props
|
20
|
+
}: TreeViewBranchIndentGuideProps = $props();
|
21
|
+
|
22
|
+
let treeView = getTreeViewContext();
|
23
|
+
let nodeProps = getTreeViewNodePropsContext();
|
24
|
+
let mergedProps = $derived(
|
25
|
+
mergeProps(treeView.getBranchIndentGuideProps(nodeProps), props),
|
26
|
+
);
|
27
|
+
</script>
|
28
|
+
|
29
|
+
{#if asChild}
|
30
|
+
{@render asChild(mergedProps)}
|
31
|
+
{:else}
|
32
|
+
<div bind:this={ref} {...mergedProps}>
|
33
|
+
{@render children?.()}
|
34
|
+
</div>
|
35
|
+
{/if}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import type { HtmlIngredientProps } from '../types.js';
|
2
|
+
export interface TreeViewBranchIndentGuideProps extends HtmlIngredientProps<'div', HTMLDivElement> {
|
3
|
+
}
|
4
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
5
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
6
|
+
$$bindings?: Bindings;
|
7
|
+
} & Exports;
|
8
|
+
(internal: unknown, props: Props & {
|
9
|
+
$$events?: Events;
|
10
|
+
$$slots?: Slots;
|
11
|
+
}): Exports & {
|
12
|
+
$set?: any;
|
13
|
+
$on?: any;
|
14
|
+
};
|
15
|
+
z_$$bindings?: Bindings;
|
16
|
+
}
|
17
|
+
declare const TreeViewBranchIndentGuide: $$__sveltets_2_IsomorphicComponent<TreeViewBranchIndentGuideProps, {
|
18
|
+
[evt: string]: CustomEvent<any>;
|
19
|
+
}, {}, {}, "ref">;
|
20
|
+
type TreeViewBranchIndentGuide = InstanceType<typeof TreeViewBranchIndentGuide>;
|
21
|
+
export default TreeViewBranchIndentGuide;
|
@@ -2,14 +2,14 @@
|
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
3
3
|
|
4
4
|
export interface TreeViewBranchIndicatorProps
|
5
|
-
extends HtmlIngredientProps<'
|
5
|
+
extends HtmlIngredientProps<'div', HTMLDivElement> {}
|
6
6
|
</script>
|
7
7
|
|
8
8
|
<script lang="ts">
|
9
9
|
import {mergeProps} from '../merge-props.js';
|
10
10
|
import {
|
11
|
-
getTreeViewBranchPropsContext,
|
12
11
|
getTreeViewContext,
|
12
|
+
getTreeViewNodePropsContext,
|
13
13
|
} from './tree-view-context.svelte.js';
|
14
14
|
|
15
15
|
let {
|
@@ -20,18 +20,16 @@
|
|
20
20
|
}: TreeViewBranchIndicatorProps = $props();
|
21
21
|
|
22
22
|
let treeView = getTreeViewContext();
|
23
|
-
|
24
|
-
let branchProps = getTreeViewBranchPropsContext();
|
25
|
-
|
23
|
+
let nodeProps = getTreeViewNodePropsContext();
|
26
24
|
let mergedProps = $derived(
|
27
|
-
mergeProps(treeView.getBranchIndicatorProps(
|
25
|
+
mergeProps(treeView.getBranchIndicatorProps(nodeProps), props),
|
28
26
|
);
|
29
27
|
</script>
|
30
28
|
|
31
29
|
{#if asChild}
|
32
30
|
{@render asChild(mergedProps)}
|
33
31
|
{:else}
|
34
|
-
<
|
32
|
+
<div bind:this={ref} {...mergedProps}>
|
35
33
|
{@render children?.()}
|
36
|
-
</
|
34
|
+
</div>
|
37
35
|
{/if}
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { HtmlIngredientProps } from '../types.js';
|
2
|
-
export interface TreeViewBranchIndicatorProps extends HtmlIngredientProps<'
|
2
|
+
export interface TreeViewBranchIndicatorProps extends HtmlIngredientProps<'div', HTMLDivElement> {
|
3
3
|
}
|
4
4
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
5
5
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
@@ -8,8 +8,8 @@
|
|
8
8
|
<script lang="ts">
|
9
9
|
import {mergeProps} from '../merge-props.js';
|
10
10
|
import {
|
11
|
-
getTreeViewBranchPropsContext,
|
12
11
|
getTreeViewContext,
|
12
|
+
getTreeViewNodePropsContext,
|
13
13
|
} from './tree-view-context.svelte.js';
|
14
14
|
|
15
15
|
let {
|
@@ -20,11 +20,9 @@
|
|
20
20
|
}: TreeViewBranchTextProps = $props();
|
21
21
|
|
22
22
|
let treeView = getTreeViewContext();
|
23
|
-
|
24
|
-
let branchProps = getTreeViewBranchPropsContext();
|
25
|
-
|
23
|
+
let nodeProps = getTreeViewNodePropsContext();
|
26
24
|
let mergedProps = $derived(
|
27
|
-
mergeProps(treeView.getBranchTextProps(
|
25
|
+
mergeProps(treeView.getBranchTextProps(nodeProps), props),
|
28
26
|
);
|
29
27
|
</script>
|
30
28
|
|
@@ -8,8 +8,8 @@
|
|
8
8
|
<script lang="ts">
|
9
9
|
import {mergeProps} from '../merge-props.js';
|
10
10
|
import {
|
11
|
-
getTreeViewBranchPropsContext,
|
12
11
|
getTreeViewContext,
|
12
|
+
getTreeViewNodePropsContext,
|
13
13
|
} from './tree-view-context.svelte.js';
|
14
14
|
|
15
15
|
let {
|
@@ -20,11 +20,9 @@
|
|
20
20
|
}: TreeViewBranchTriggerProps = $props();
|
21
21
|
|
22
22
|
let treeView = getTreeViewContext();
|
23
|
-
|
24
|
-
let branchProps = getTreeViewBranchPropsContext();
|
25
|
-
|
23
|
+
let nodeProps = getTreeViewNodePropsContext();
|
26
24
|
let mergedProps = $derived(
|
27
|
-
mergeProps(treeView.getBranchTriggerProps(
|
25
|
+
mergeProps(treeView.getBranchTriggerProps(nodeProps), props),
|
28
26
|
);
|
29
27
|
</script>
|
30
28
|
|
@@ -1,22 +1,20 @@
|
|
1
1
|
<script lang="ts" module>
|
2
2
|
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
-
import type {
|
3
|
+
import type {NodeProps, NodeState} from '@zag-js/tree-view';
|
4
4
|
|
5
5
|
export interface TreeViewBranchProps
|
6
6
|
extends Assign<
|
7
|
-
HtmlIngredientProps<'div', HTMLDivElement,
|
8
|
-
|
7
|
+
HtmlIngredientProps<'div', HTMLDivElement, NodeState>,
|
8
|
+
NodeProps
|
9
9
|
> {}
|
10
10
|
</script>
|
11
11
|
|
12
12
|
<script lang="ts">
|
13
13
|
import {mergeProps} from '../merge-props.js';
|
14
|
-
import {reflect} from '@zag-js/svelte';
|
15
14
|
import {createSplitProps} from '@zag-js/utils';
|
16
15
|
import {
|
17
16
|
getTreeViewContext,
|
18
|
-
|
19
|
-
setTreeViewBranchPropsContext,
|
17
|
+
setTreeViewNodePropsContext,
|
20
18
|
} from './tree-view-context.svelte.js';
|
21
19
|
|
22
20
|
let {
|
@@ -27,30 +25,23 @@
|
|
27
25
|
}: TreeViewBranchProps = $props();
|
28
26
|
|
29
27
|
let treeView = getTreeViewContext();
|
30
|
-
let treeViewProps = getTreeViewTreePropsContext();
|
31
28
|
|
32
|
-
let [
|
33
|
-
createSplitProps<
|
29
|
+
let [nodeProps, localProps] = $derived(
|
30
|
+
createSplitProps<NodeProps>(['node', 'indexPath'])(props),
|
34
31
|
);
|
35
32
|
|
36
|
-
let
|
37
|
-
...branchPartialProps,
|
38
|
-
...treeViewProps,
|
39
|
-
}));
|
40
|
-
|
41
|
-
let branchState = $derived(treeView.getBranchState(branchProps));
|
42
|
-
|
33
|
+
let nodeState = $derived(treeView.getNodeState(nodeProps));
|
43
34
|
let mergedProps = $derived(
|
44
|
-
mergeProps(treeView.getBranchProps(
|
35
|
+
mergeProps(treeView.getBranchProps(nodeProps), localProps),
|
45
36
|
);
|
46
37
|
|
47
|
-
|
38
|
+
setTreeViewNodePropsContext(() => nodeProps);
|
48
39
|
</script>
|
49
40
|
|
50
41
|
{#if asChild}
|
51
|
-
{@render asChild(mergedProps,
|
42
|
+
{@render asChild(mergedProps, nodeState)}
|
52
43
|
{:else}
|
53
44
|
<div bind:this={ref} {...mergedProps}>
|
54
|
-
{@render children?.(
|
45
|
+
{@render children?.(nodeState)}
|
55
46
|
</div>
|
56
47
|
{/if}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import type { Assign, HtmlIngredientProps } from '../types.js';
|
2
|
-
import type {
|
3
|
-
export interface TreeViewBranchProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement,
|
2
|
+
import type { NodeProps, NodeState } from '@zag-js/tree-view';
|
3
|
+
export interface TreeViewBranchProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, NodeState>, NodeProps> {
|
4
4
|
}
|
5
5
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
6
6
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
@@ -1,12 +1,4 @@
|
|
1
|
-
import type {
|
1
|
+
import type { NodeProps } from '@zag-js/tree-view';
|
2
2
|
import type { CreateTreeViewReturn } from './create-tree-view.svelte.js';
|
3
3
|
export declare const getTreeViewContext: () => CreateTreeViewReturn, setTreeViewContext: (context: CreateTreeViewReturn | (() => CreateTreeViewReturn)) => void;
|
4
|
-
export declare const
|
5
|
-
export declare const getTreeViewBranchPropsContext: () => BranchProps, setTreeViewBranchPropsContext: (context: BranchProps | (() => BranchProps)) => void;
|
6
|
-
export declare const getTreeViewTreePropsContext: () => {
|
7
|
-
depth: number;
|
8
|
-
}, setTreeViewTreePropsContext: (context: {
|
9
|
-
depth: number;
|
10
|
-
} | (() => {
|
11
|
-
depth: number;
|
12
|
-
})) => void;
|
4
|
+
export declare const getTreeViewNodePropsContext: () => NodeProps, setTreeViewNodePropsContext: (context: NodeProps | (() => NodeProps)) => void;
|
@@ -1,5 +1,3 @@
|
|
1
1
|
import { createContext } from '../create-context.svelte.js';
|
2
2
|
export const [getTreeViewContext, setTreeViewContext] = createContext('TreeView');
|
3
|
-
export const [
|
4
|
-
export const [getTreeViewBranchPropsContext, setTreeViewBranchPropsContext] = createContext('TreeViewBranch [PROPS]');
|
5
|
-
export const [getTreeViewTreePropsContext, setTreeViewTreePropsContext] = createContext('TreeViewTree [PROPS]');
|
3
|
+
export const [getTreeViewNodePropsContext, setTreeViewNodePropsContext] = createContext('TreeViewNodeProps');
|
@@ -9,7 +9,7 @@
|
|
9
9
|
import {mergeProps} from '../merge-props.js';
|
10
10
|
import {
|
11
11
|
getTreeViewContext,
|
12
|
-
|
12
|
+
getTreeViewNodePropsContext,
|
13
13
|
} from './tree-view-context.svelte.js';
|
14
14
|
|
15
15
|
let {
|
@@ -20,11 +20,9 @@
|
|
20
20
|
}: TreeViewItemIndicatorProps = $props();
|
21
21
|
|
22
22
|
let treeView = getTreeViewContext();
|
23
|
-
|
24
|
-
let itemProps = getTreeViewItemPropsContext();
|
25
|
-
|
23
|
+
let nodeProps = getTreeViewNodePropsContext();
|
26
24
|
let mergedProps = $derived(
|
27
|
-
mergeProps(treeView.getItemIndicatorProps(
|
25
|
+
mergeProps(treeView.getItemIndicatorProps(nodeProps), props),
|
28
26
|
);
|
29
27
|
</script>
|
30
28
|
|
@@ -9,7 +9,7 @@
|
|
9
9
|
import {mergeProps} from '../merge-props.js';
|
10
10
|
import {
|
11
11
|
getTreeViewContext,
|
12
|
-
|
12
|
+
getTreeViewNodePropsContext,
|
13
13
|
} from './tree-view-context.svelte.js';
|
14
14
|
|
15
15
|
let {
|
@@ -20,11 +20,9 @@
|
|
20
20
|
}: TreeViewItemTextProps = $props();
|
21
21
|
|
22
22
|
let treeView = getTreeViewContext();
|
23
|
-
|
24
|
-
let itemProps = getTreeViewItemPropsContext();
|
25
|
-
|
23
|
+
let nodeProps = getTreeViewNodePropsContext();
|
26
24
|
let mergedProps = $derived(
|
27
|
-
mergeProps(treeView.getItemTextProps(
|
25
|
+
mergeProps(treeView.getItemTextProps(nodeProps), props),
|
28
26
|
);
|
29
27
|
</script>
|
30
28
|
|
@@ -1,22 +1,17 @@
|
|
1
1
|
<script lang="ts" module>
|
2
2
|
import type {Assign, HtmlIngredientProps} from '../types.js';
|
3
|
-
import type {
|
3
|
+
import type {NodeProps} from '@zag-js/tree-view';
|
4
4
|
|
5
5
|
export interface TreeViewItemProps
|
6
|
-
extends Assign<
|
7
|
-
HtmlIngredientProps<'div', HTMLDivElement, ItemState>,
|
8
|
-
Omit<ItemProps, 'depth'>
|
9
|
-
> {}
|
6
|
+
extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, NodeProps> {}
|
10
7
|
</script>
|
11
8
|
|
12
9
|
<script lang="ts">
|
13
10
|
import {mergeProps} from '../merge-props.js';
|
14
|
-
import {reflect} from '@zag-js/svelte';
|
15
11
|
import {createSplitProps} from '@zag-js/utils';
|
16
12
|
import {
|
17
13
|
getTreeViewContext,
|
18
|
-
|
19
|
-
setTreeViewItemPropsContext,
|
14
|
+
setTreeViewNodePropsContext,
|
20
15
|
} from './tree-view-context.svelte.js';
|
21
16
|
|
22
17
|
let {
|
@@ -27,30 +22,22 @@
|
|
27
22
|
}: TreeViewItemProps = $props();
|
28
23
|
|
29
24
|
let treeView = getTreeViewContext();
|
30
|
-
let treeViewProps = getTreeViewTreePropsContext();
|
31
25
|
|
32
|
-
let [
|
33
|
-
createSplitProps<
|
26
|
+
let [nodeProps, localProps] = $derived(
|
27
|
+
createSplitProps<NodeProps>(['node', 'indexPath'])(props),
|
34
28
|
);
|
35
29
|
|
36
|
-
let itemProps: ItemProps = reflect(() => ({
|
37
|
-
...itemPartialProps,
|
38
|
-
...treeViewProps,
|
39
|
-
}));
|
40
|
-
|
41
|
-
let itemState = $derived(treeView.getItemState(itemProps));
|
42
|
-
|
43
30
|
let mergedProps = $derived(
|
44
|
-
mergeProps(treeView.getItemProps(
|
31
|
+
mergeProps(treeView.getItemProps(nodeProps), localProps),
|
45
32
|
);
|
46
33
|
|
47
|
-
|
34
|
+
setTreeViewNodePropsContext(() => nodeProps);
|
48
35
|
</script>
|
49
36
|
|
50
37
|
{#if asChild}
|
51
|
-
{@render asChild(mergedProps
|
38
|
+
{@render asChild(mergedProps)}
|
52
39
|
{:else}
|
53
40
|
<div bind:this={ref} {...mergedProps}>
|
54
|
-
{@render children?.(
|
41
|
+
{@render children?.()}
|
55
42
|
</div>
|
56
43
|
{/if}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import type { Assign, HtmlIngredientProps } from '../types.js';
|
2
|
-
import type {
|
3
|
-
export interface TreeViewItemProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement
|
2
|
+
import type { NodeProps } from '@zag-js/tree-view';
|
3
|
+
export interface TreeViewItemProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement>, NodeProps> {
|
4
4
|
}
|
5
5
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
6
6
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
@@ -2,31 +2,22 @@
|
|
2
2
|
import type {HtmlIngredientProps} from '../types.js';
|
3
3
|
|
4
4
|
export interface TreeViewTreeProps
|
5
|
-
extends HtmlIngredientProps<'div', HTMLDivElement> {
|
6
|
-
depth?: number;
|
7
|
-
}
|
5
|
+
extends HtmlIngredientProps<'div', HTMLDivElement> {}
|
8
6
|
</script>
|
9
7
|
|
10
8
|
<script lang="ts">
|
11
9
|
import {mergeProps} from '../merge-props.js';
|
12
|
-
import {
|
13
|
-
getTreeViewContext,
|
14
|
-
setTreeViewTreePropsContext,
|
15
|
-
} from './tree-view-context.svelte.js';
|
10
|
+
import {getTreeViewContext} from './tree-view-context.svelte.js';
|
16
11
|
|
17
12
|
let {
|
18
13
|
ref = $bindable(null),
|
19
|
-
depth = 1,
|
20
14
|
asChild,
|
21
15
|
children,
|
22
16
|
...props
|
23
17
|
}: TreeViewTreeProps = $props();
|
24
18
|
|
25
19
|
let treeView = getTreeViewContext();
|
26
|
-
|
27
20
|
let mergedProps = $derived(mergeProps(treeView.getTreeProps(), props));
|
28
|
-
|
29
|
-
setTreeViewTreePropsContext({depth});
|
30
21
|
</script>
|
31
22
|
|
32
23
|
{#if asChild}
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import type { HtmlIngredientProps } from '../types.js';
|
2
2
|
export interface TreeViewTreeProps extends HtmlIngredientProps<'div', HTMLDivElement> {
|
3
|
-
depth?: number;
|
4
3
|
}
|
5
4
|
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
6
5
|
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
@@ -1,5 +1,7 @@
|
|
1
|
+
export { collection } from '@zag-js/tree-view';
|
1
2
|
export { default as BranchContent } from './tree-view-branch-content.svelte';
|
2
3
|
export { default as BranchControl } from './tree-view-branch-control.svelte';
|
4
|
+
export { default as BranchIndentGuide } from './tree-view-branch-indent-guide.svelte';
|
3
5
|
export { default as BranchIndicator } from './tree-view-branch-indicator.svelte';
|
4
6
|
export { default as BranchText } from './tree-view-branch-text.svelte';
|
5
7
|
export { default as BranchTrigger } from './tree-view-branch-trigger.svelte';
|
@@ -1,5 +1,7 @@
|
|
1
|
+
export { collection } from '@zag-js/tree-view';
|
1
2
|
export { default as BranchContent } from './tree-view-branch-content.svelte';
|
2
3
|
export { default as BranchControl } from './tree-view-branch-control.svelte';
|
4
|
+
export { default as BranchIndentGuide } from './tree-view-branch-indent-guide.svelte';
|
3
5
|
export { default as BranchIndicator } from './tree-view-branch-indicator.svelte';
|
4
6
|
export { default as BranchText } from './tree-view-branch-text.svelte';
|
5
7
|
export { default as BranchTrigger } from './tree-view-branch-trigger.svelte';
|
@@ -0,0 +1 @@
|
|
1
|
+
export {};
|