From 03167cc296bc95a0b8fdb8b283428d3412c69e4d Mon Sep 17 00:00:00 2001 From: dev-viinz <42003446+dev-viinz@users.noreply.github.com> Date: Wed, 25 Jun 2025 21:11:25 +0200 Subject: [PATCH 01/30] feat: add @zag-js/tree-view to catalog --- pnpm-lock.yaml | 57 +++++++++++++++++++++++++++++++++++++++++++++ pnpm-workspace.yaml | 1 + 2 files changed, 58 insertions(+) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 89893071ea..94c2f78c8c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -60,6 +60,9 @@ catalogs: '@zag-js/tooltip': specifier: ^1.7.0 version: 1.7.0 + '@zag-js/tree-view': + specifier: ^1.7.0 + version: 1.17.1 svelte: specifier: ^5.25.3 version: 5.25.3 @@ -369,6 +372,9 @@ importers: '@zag-js/tooltip': specifier: 'catalog:' version: 1.7.0 + '@zag-js/tree-view': + specifier: 'catalog:' + version: 1.17.1 devDependencies: '@skeletonlabs/skeleton': specifier: workspace:* @@ -2398,6 +2404,9 @@ packages: '@zag-js/accordion@1.7.0': resolution: {integrity: sha512-LNJOjLTW2KwrToXBrXIbNIAiISA94n0AdWp14H8RrskdokywmEGiC0GgWTGEJ7DNA6TGP6Ae5o9rJ4fHSmCsDQ==} + '@zag-js/anatomy@1.17.1': + resolution: {integrity: sha512-TiZsZEXSkoBgO5mQOxPZB/yvBwGyIgWDWXcVrAXk7Vd0ooaCgcT4ROAyfMmxQTXQT4vIoxcMji5KC8LD23yjpg==} + '@zag-js/anatomy@1.7.0': resolution: {integrity: sha512-fkRgH6vPCwykmRdV38uAJeTtJc8tayAnURfoovHAtB9bK0goagPbpdcYTNyGn8msul0h+KBloOtnw4obvX0nPw==} @@ -2410,12 +2419,18 @@ packages: '@zag-js/avatar@1.7.0': resolution: {integrity: sha512-vzMCMpYIM2BIvPvK34VaRMUsUSpg3jwoxCzA31k+QrCmjm3ti8pLoT4waE01XHiaQwNPcTFbMWUi/nIQQKG14A==} + '@zag-js/collection@1.17.1': + resolution: {integrity: sha512-BhY93FophALDD/IiHYiqlJuEtBSX6SfwAA+0SzCWvYGBkPzRw+VMCbVKPxFZV9IzIX8ccXRbJ9uxdaXNh2EAPw==} + '@zag-js/collection@1.7.0': resolution: {integrity: sha512-gH7I03ag2niEhCVgNpXBYybnIROGXmAkX+5e1rYQ60mOh2oQnK+5k9k3DRkca5rAKbu4uT6JjYFwnY9sA/NZfA==} '@zag-js/combobox@1.7.0': resolution: {integrity: sha512-kaMvGoBZwiFC9KaUbHXNFkneg7grZmJlteVxk6kJXYd7JGDHhhYsFznPNIC0apvBCIEqwyBGVB/lCjK+BseZtw==} + '@zag-js/core@1.17.1': + resolution: {integrity: sha512-68jh6R87QLMYrtntu34eSF9JJXRXd+/l5Mpaz/InEOwA9sjxuyJIESqO578IpI2GAqk+cE1sUTKhhPmkzeTq3g==} + '@zag-js/core@1.7.0': resolution: {integrity: sha512-FyK1POPqgBp7DBpUIwvmBQH16+L52NaTaQJzg8iTI9mI/4m3AxZ5aN+8a8qzwGIkVI6rlDcrBkmuOcHDVIOEGA==} @@ -2425,6 +2440,9 @@ packages: '@zag-js/dismissable@1.7.0': resolution: {integrity: sha512-o6S++e7iaBmizIgsvLt5RwY7gn2OQGeG2etet+oaUAMtNhi/1+uGG+rTZgOMj/MGg9BYpPld5tXfk/RrlShh9Q==} + '@zag-js/dom-query@1.17.1': + resolution: {integrity: sha512-fwwzEKLPq3kAZVkkPBdskL4Ge4aHRAGqBLfAHCKioQNgvKYGRTzqmGA6ijls9ESULUWf0M2ogKstuUtY19PopA==} + '@zag-js/dom-query@1.7.0': resolution: {integrity: sha512-cj+mKB7Sj7mqAepHMsbV4bGvDJfUYCt4d4ruYw0dVpDa1Z9N38TtztTznfrm9kuqOYcJkgE0q3Rn/kPLi8rK8g==} @@ -2508,9 +2526,18 @@ packages: '@zag-js/tooltip@1.7.0': resolution: {integrity: sha512-ehZOewcxYZL4+ND5QMeDlQQrckssMTzxcReRCOVFXrRZb5X1jX6+ale9MSG+cJYMpQUqT2J5VtzMJH+GNj/jfw==} + '@zag-js/tree-view@1.17.1': + resolution: {integrity: sha512-G5V24wKVfN1YPGK5GszblcI0NY9HqyEFxwo23JASmm9LTmwAr/5TKu8IEkobzKw0IH6Mo/eEyGrL+L6LNuof6Q==} + + '@zag-js/types@1.17.1': + resolution: {integrity: sha512-KEPko1DK19hEMfM5IPKTZQtpf4HC3X56qwckezRX1yk+/vGotVUxdjRIrv+pcITjlFAoQQO9TiiZv2UiiVrFGA==} + '@zag-js/types@1.7.0': resolution: {integrity: sha512-rmPonVc8EBOGIEJYjzWIBQ6LJwUMc3LnipRREECO+n7LNlUQUliCOFbHw1UOGP+4ZkCKmxjGFR3jLtjY8aN4gQ==} + '@zag-js/utils@1.17.1': + resolution: {integrity: sha512-+w/Kx7uZufg3cD6I5bQ8iSoeY3qSarPpUwrxz6FCOxJ86IAmf3ActqFC2pJ6DQCdHdkWINaKKchb4GNt8ld7KQ==} + '@zag-js/utils@1.7.0': resolution: {integrity: sha512-yIxvH5V27a1WuLgCxHX7qpdtFo8vTJaZLafBpSNfVYG4B8FaxTE+P7JAcpmAzs3UyXura/WfAY2eVWWVBpk9ZA==} @@ -8343,6 +8370,8 @@ snapshots: '@zag-js/types': 1.7.0 '@zag-js/utils': 1.7.0 + '@zag-js/anatomy@1.17.1': {} + '@zag-js/anatomy@1.7.0': {} '@zag-js/aria-hidden@1.7.0': {} @@ -8359,6 +8388,10 @@ snapshots: '@zag-js/types': 1.7.0 '@zag-js/utils': 1.7.0 + '@zag-js/collection@1.17.1': + dependencies: + '@zag-js/utils': 1.17.1 + '@zag-js/collection@1.7.0': dependencies: '@zag-js/utils': 1.7.0 @@ -8375,6 +8408,11 @@ snapshots: '@zag-js/types': 1.7.0 '@zag-js/utils': 1.7.0 + '@zag-js/core@1.17.1': + dependencies: + '@zag-js/dom-query': 1.17.1 + '@zag-js/utils': 1.17.1 + '@zag-js/core@1.7.0': dependencies: '@zag-js/dom-query': 1.7.0 @@ -8398,6 +8436,10 @@ snapshots: '@zag-js/interact-outside': 1.7.0 '@zag-js/utils': 1.7.0 + '@zag-js/dom-query@1.17.1': + dependencies: + '@zag-js/types': 1.17.1 + '@zag-js/dom-query@1.7.0': dependencies: '@zag-js/types': 1.7.0 @@ -8574,10 +8616,25 @@ snapshots: '@zag-js/types': 1.7.0 '@zag-js/utils': 1.7.0 + '@zag-js/tree-view@1.17.1': + dependencies: + '@zag-js/anatomy': 1.17.1 + '@zag-js/collection': 1.17.1 + '@zag-js/core': 1.17.1 + '@zag-js/dom-query': 1.17.1 + '@zag-js/types': 1.17.1 + '@zag-js/utils': 1.17.1 + + '@zag-js/types@1.17.1': + dependencies: + csstype: 3.1.3 + '@zag-js/types@1.7.0': dependencies: csstype: 3.1.3 + '@zag-js/utils@1.17.1': {} + '@zag-js/utils@1.7.0': {} abbrev@3.0.0: {} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index 41ec484899..d0a465d296 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -24,6 +24,7 @@ catalog: '@zag-js/tags-input': *zag_version '@zag-js/toast': *zag_version '@zag-js/tooltip': *zag_version + '@zag-js/tree-view': *zag_version typescript: '^5.8.2' svelte: '^5.25.3' tailwindcss: '^4.0.17' From 8aa1c45f62571cf9f57a2ea181be2046f6ead738 Mon Sep 17 00:00:00 2001 From: dev-viinz <42003446+dev-viinz@users.noreply.github.com> Date: Fri, 27 Jun 2025 23:35:22 +0200 Subject: [PATCH 02/30] feat: implemented pretty much the example from zag.js --- packages/skeleton-svelte/package.json | 3 +- .../src/components/TreeView/TreeNode.svelte | 44 ++++++++++++++ .../src/components/TreeView/TreeView.svelte | 59 +++++++++++++++++++ .../src/components/TreeView/context.ts | 5 ++ .../src/components/TreeView/index.ts | 3 + .../src/components/TreeView/types.ts | 19 ++++++ packages/skeleton-svelte/src/index.ts | 1 + .../skeleton-svelte/src/routes/+layout.svelte | 1 + .../routes/components/tree-view/+page.svelte | 5 ++ 9 files changed, 139 insertions(+), 1 deletion(-) create mode 100644 packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte create mode 100644 packages/skeleton-svelte/src/components/TreeView/TreeView.svelte create mode 100644 packages/skeleton-svelte/src/components/TreeView/context.ts create mode 100644 packages/skeleton-svelte/src/components/TreeView/index.ts create mode 100644 packages/skeleton-svelte/src/components/TreeView/types.ts create mode 100644 playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte diff --git a/packages/skeleton-svelte/package.json b/packages/skeleton-svelte/package.json index f4ef2e73ed..8450eb6337 100644 --- a/packages/skeleton-svelte/package.json +++ b/packages/skeleton-svelte/package.json @@ -39,7 +39,8 @@ "@zag-js/tabs": "catalog:", "@zag-js/tags-input": "catalog:", "@zag-js/toast": "catalog:", - "@zag-js/tooltip": "catalog:" + "@zag-js/tooltip": "catalog:", + "@zag-js/tree-view": "catalog:" }, "peerDependencies": { "svelte": "^5.20.0" diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte new file mode 100644 index 0000000000..cc611e13b4 --- /dev/null +++ b/packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte @@ -0,0 +1,44 @@ + + +{#if nodeState.isBranch} +
+
+ 📁 + {node.name} + ➡️ +
+
+
+ {#if node.children} + {#each node.children as childNode, index} + + {/each} + {/if} +
+
+{:else} +
+ 📄 + {node.name} +
+{/if} diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte new file mode 100644 index 0000000000..01ef5a39de --- /dev/null +++ b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte @@ -0,0 +1,59 @@ + + +
+

My Documents

+
+ {#if collection.rootNode.children} + {#each collection.rootNode.children as node, index} + + {/each} + {/if} +
+
diff --git a/packages/skeleton-svelte/src/components/TreeView/context.ts b/packages/skeleton-svelte/src/components/TreeView/context.ts new file mode 100644 index 0000000000..ce8838dbf6 --- /dev/null +++ b/packages/skeleton-svelte/src/components/TreeView/context.ts @@ -0,0 +1,5 @@ +import { createContext } from '../../internal/create-context.js'; +import type { TreeViewContext } from './types.js'; + +// @ts-expect-error - Defaults for context don't make sense, `createContext` should just throw TBH +export const [setTreeViewContext, getTreeViewContext, key] = createContext(); diff --git a/packages/skeleton-svelte/src/components/TreeView/index.ts b/packages/skeleton-svelte/src/components/TreeView/index.ts new file mode 100644 index 0000000000..7f1d3f4c46 --- /dev/null +++ b/packages/skeleton-svelte/src/components/TreeView/index.ts @@ -0,0 +1,3 @@ +import TreeView from './TreeView.svelte'; + +export default Object.assign(TreeView); diff --git a/packages/skeleton-svelte/src/components/TreeView/types.ts b/packages/skeleton-svelte/src/components/TreeView/types.ts new file mode 100644 index 0000000000..c793c1676a --- /dev/null +++ b/packages/skeleton-svelte/src/components/TreeView/types.ts @@ -0,0 +1,19 @@ +import * as tree from '@zag-js/tree-view'; + +// TreeViewContext --- + +export interface TreeViewContext { + api: ReturnType; +} + +// Components --- + +export interface TreeViewProps extends Omit { + prop: string; +} + +export interface Node { + id: string; + name: string; + children?: Node[]; +} diff --git a/packages/skeleton-svelte/src/index.ts b/packages/skeleton-svelte/src/index.ts index 8cb5ef1467..b6b163ad80 100644 --- a/packages/skeleton-svelte/src/index.ts +++ b/packages/skeleton-svelte/src/index.ts @@ -22,6 +22,7 @@ export { default as TagsInput } from './components/TagsInput/TagsInput.svelte'; export { default as Toaster } from './components/Toast/Toaster.svelte'; export { createToaster } from './components/Toast/create-toaster.js'; export { default as Rating } from './components/Rating/index.js'; +export { default as TreeView } from './components/TreeView/index.js'; // Types export type { FileUploadApi } from './components/FileUpload/types.js'; diff --git a/playgrounds/skeleton-svelte/src/routes/+layout.svelte b/playgrounds/skeleton-svelte/src/routes/+layout.svelte index 739048000e..f9b5bb40d8 100644 --- a/playgrounds/skeleton-svelte/src/routes/+layout.svelte +++ b/playgrounds/skeleton-svelte/src/routes/+layout.svelte @@ -32,6 +32,7 @@ Tabs Tags Input Toast + TreeView diff --git a/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte new file mode 100644 index 0000000000..c50da8f560 --- /dev/null +++ b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte @@ -0,0 +1,5 @@ + + + From 15630085394cd665fe78796dc5e5a03c0d353baf Mon Sep 17 00:00:00 2001 From: dev-viinz <42003446+dev-viinz@users.noreply.github.com> Date: Sat, 28 Jun 2025 03:13:31 +0200 Subject: [PATCH 03/30] fix: types --- packages/skeleton-svelte/src/components/Modal/types.ts | 1 + packages/skeleton-svelte/src/components/Popover/types.ts | 1 + packages/skeleton-svelte/src/components/Tooltip/types.ts | 1 + 3 files changed, 3 insertions(+) diff --git a/packages/skeleton-svelte/src/components/Modal/types.ts b/packages/skeleton-svelte/src/components/Modal/types.ts index bb0a601cd8..75b3bf7389 100644 --- a/packages/skeleton-svelte/src/components/Modal/types.ts +++ b/packages/skeleton-svelte/src/components/Modal/types.ts @@ -1,6 +1,7 @@ import type { Snippet } from 'svelte'; import * as dialog from '@zag-js/dialog'; import type { FlyParams, FadeParams } from 'svelte/transition'; +import type { HTMLButtonAttributes } from 'svelte/elements'; export interface ModalProps extends Omit { // Base --- diff --git a/packages/skeleton-svelte/src/components/Popover/types.ts b/packages/skeleton-svelte/src/components/Popover/types.ts index 1639032d65..cd656f29f5 100644 --- a/packages/skeleton-svelte/src/components/Popover/types.ts +++ b/packages/skeleton-svelte/src/components/Popover/types.ts @@ -1,5 +1,6 @@ import type { Snippet } from 'svelte'; import * as popover from '@zag-js/popover'; +import type { HTMLButtonAttributes } from 'svelte/elements'; export interface PopoverProps extends Omit { /** Enable display of the popover arrow. */ diff --git a/packages/skeleton-svelte/src/components/Tooltip/types.ts b/packages/skeleton-svelte/src/components/Tooltip/types.ts index ab89c13150..fdf6dbe14a 100644 --- a/packages/skeleton-svelte/src/components/Tooltip/types.ts +++ b/packages/skeleton-svelte/src/components/Tooltip/types.ts @@ -1,5 +1,6 @@ import type { Snippet } from 'svelte'; import * as tooltip from '@zag-js/tooltip'; +import type { HTMLButtonAttributes } from 'svelte/elements'; export interface TooltipProps extends Omit { /** Enable display of the popover arrow. */ From db170eafee03350d2c786158a4cda82aca9aa4d9 Mon Sep 17 00:00:00 2001 From: dev-viinz <42003446+dev-viinz@users.noreply.github.com> Date: Sat, 28 Jun 2025 03:13:54 +0200 Subject: [PATCH 04/30] chore: update zag... --- pnpm-lock.yaml | 721 +++++++++++++++++++++----------------------- pnpm-workspace.yaml | 2 +- 2 files changed, 343 insertions(+), 380 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 94c2f78c8c..8d9ec02286 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,62 +7,62 @@ settings: catalogs: default: '@zag-js/accordion': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/avatar': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/combobox': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/dialog': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/file-upload': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/pagination': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/popover': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/progress': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/radio-group': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/rating-group': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/react': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/slider': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/svelte': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/switch': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/tabs': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/tags-input': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/toast': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/tooltip': - specifier: ^1.7.0 - version: 1.7.0 + specifier: ^1.17.4 + version: 1.17.4 '@zag-js/tree-view': - specifier: ^1.7.0 - version: 1.17.1 + specifier: ^1.17.4 + version: 1.17.4 svelte: specifier: ^5.25.3 version: 5.25.3 @@ -244,43 +244,43 @@ importers: dependencies: '@zag-js/accordion': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/avatar': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/file-upload': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/pagination': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/progress': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/radio-group': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/rating-group': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/react': specifier: 'catalog:' - version: 1.7.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + version: 1.17.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@zag-js/slider': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/switch': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/tabs': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/tags-input': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/toast': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 devDependencies: '@testing-library/jest-dom': specifier: ^6.6.3 @@ -323,58 +323,58 @@ importers: dependencies: '@zag-js/accordion': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/avatar': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/combobox': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/dialog': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/file-upload': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/pagination': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/popover': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/progress': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/radio-group': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/rating-group': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/slider': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/svelte': specifier: 'catalog:' - version: 1.7.0(svelte@5.25.3) + version: 1.17.4(svelte@5.25.3) '@zag-js/switch': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/tabs': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/tags-input': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/toast': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/tooltip': specifier: 'catalog:' - version: 1.7.0 + version: 1.17.4 '@zag-js/tree-view': specifier: 'catalog:' - version: 1.17.1 + version: 1.17.4 devDependencies: '@skeletonlabs/skeleton': specifier: workspace:* @@ -1378,9 +1378,15 @@ packages: '@floating-ui/core@1.6.9': resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==} + '@floating-ui/core@1.7.1': + resolution: {integrity: sha512-azI0DrjMMfIug/ExbBaeDVJXcY0a7EPvPjb2xAJPa4HeimBX+Z18HK8QQR3jb6356SnDDdxx+hinMLcJEDdOjw==} + '@floating-ui/dom@1.6.13': resolution: {integrity: sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==} + '@floating-ui/dom@1.7.1': + resolution: {integrity: sha512-cwsmW/zyw5ltYTUeeYJ60CnQuPqmGwuGVhG9w0PRaRKkAyi38BT5CKrpIbb+jtahSwUl04cWzSx9ZOIxeS6RsQ==} + '@floating-ui/react-dom@2.1.2': resolution: {integrity: sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==} peerDependencies: @@ -2401,145 +2407,121 @@ packages: '@vscode/l10n@0.0.18': resolution: {integrity: sha512-KYSIHVmslkaCDyw013pphY+d7x1qV8IZupYfeIfzNA+nsaWHbn5uPuQRvdRFsa9zFzGeudPuoGoZ1Op4jrJXIQ==} - '@zag-js/accordion@1.7.0': - resolution: {integrity: sha512-LNJOjLTW2KwrToXBrXIbNIAiISA94n0AdWp14H8RrskdokywmEGiC0GgWTGEJ7DNA6TGP6Ae5o9rJ4fHSmCsDQ==} - - '@zag-js/anatomy@1.17.1': - resolution: {integrity: sha512-TiZsZEXSkoBgO5mQOxPZB/yvBwGyIgWDWXcVrAXk7Vd0ooaCgcT4ROAyfMmxQTXQT4vIoxcMji5KC8LD23yjpg==} - - '@zag-js/anatomy@1.7.0': - resolution: {integrity: sha512-fkRgH6vPCwykmRdV38uAJeTtJc8tayAnURfoovHAtB9bK0goagPbpdcYTNyGn8msul0h+KBloOtnw4obvX0nPw==} - - '@zag-js/aria-hidden@1.7.0': - resolution: {integrity: sha512-YNbACFZoqw/1JymxCZXtuAFdeYZm7sK3E0jv3bPbqytPj7TziLa1dRDWDdx8cPcu0B4n4WrBMBSCGUjj/nWDCA==} - - '@zag-js/auto-resize@1.7.0': - resolution: {integrity: sha512-ifWflzZc1fNJ+XUZaYpB220AiAr4l3Eczq8ELwj/ugg7T/10Wo0FkxTCVmCZfIiCMoqHuh/2oTX3PCTIwg6uxg==} - - '@zag-js/avatar@1.7.0': - resolution: {integrity: sha512-vzMCMpYIM2BIvPvK34VaRMUsUSpg3jwoxCzA31k+QrCmjm3ti8pLoT4waE01XHiaQwNPcTFbMWUi/nIQQKG14A==} - - '@zag-js/collection@1.17.1': - resolution: {integrity: sha512-BhY93FophALDD/IiHYiqlJuEtBSX6SfwAA+0SzCWvYGBkPzRw+VMCbVKPxFZV9IzIX8ccXRbJ9uxdaXNh2EAPw==} + '@zag-js/accordion@1.17.4': + resolution: {integrity: sha512-WkzoksfxJjuSdq+hIHCINc6hQtoYo5Nf0SfuInBiehRnoJtVjmpqk8VLxhLWhwFD/KMqz0wtWcM0itUGNpOyiw==} - '@zag-js/collection@1.7.0': - resolution: {integrity: sha512-gH7I03ag2niEhCVgNpXBYybnIROGXmAkX+5e1rYQ60mOh2oQnK+5k9k3DRkca5rAKbu4uT6JjYFwnY9sA/NZfA==} + '@zag-js/anatomy@1.17.4': + resolution: {integrity: sha512-EDc7dD5nnr5T3kujMc+EvWIAACZ45cyeKKiPDUCAsmrOAYxIpD+Efh5lvKum6XLIUyUNnkpEVTazVNOeaoZBtQ==} - '@zag-js/combobox@1.7.0': - resolution: {integrity: sha512-kaMvGoBZwiFC9KaUbHXNFkneg7grZmJlteVxk6kJXYd7JGDHhhYsFznPNIC0apvBCIEqwyBGVB/lCjK+BseZtw==} + '@zag-js/aria-hidden@1.17.4': + resolution: {integrity: sha512-P7aSTINxBwGbDUxhemto10JsajbE+kIzKrPMOWAbIipfFSwPtaN4XJRg2aQHZFBuHNm1n2x87n2TJBwjAlPiNQ==} - '@zag-js/core@1.17.1': - resolution: {integrity: sha512-68jh6R87QLMYrtntu34eSF9JJXRXd+/l5Mpaz/InEOwA9sjxuyJIESqO578IpI2GAqk+cE1sUTKhhPmkzeTq3g==} + '@zag-js/auto-resize@1.17.4': + resolution: {integrity: sha512-kCC0cvuxG/yf28P52waRlz7FaliPrOyPXH+XM+GrznLkC8/TpMeR092G9+oHiYauNESTb+yyQzGgKqW6xFd/Rw==} - '@zag-js/core@1.7.0': - resolution: {integrity: sha512-FyK1POPqgBp7DBpUIwvmBQH16+L52NaTaQJzg8iTI9mI/4m3AxZ5aN+8a8qzwGIkVI6rlDcrBkmuOcHDVIOEGA==} + '@zag-js/avatar@1.17.4': + resolution: {integrity: sha512-+B4esXErOoiYNmHarg9aZWAhUhx6bzoIp31zCMkb6lNUKCDb8hBpFIWYpkgOrPmMaMka2zSYSvpfx6+4zA1Lcg==} - '@zag-js/dialog@1.7.0': - resolution: {integrity: sha512-gx/CtKsPg/Y+2d+HtP3tjEdl7KM+x6lUDttjDDBn9rvXFs2REW69AlcJtRzs6B22CxDPmxssGPr1oi3zaU1AUA==} + '@zag-js/collection@1.17.4': + resolution: {integrity: sha512-N4FUhh6avw146IAUKxMj57clXOoN1XjY45ETWJMfahlmmmnttaCKuiiUj57/XIgmt3Vpg2bYIthcyTxeI+K4QQ==} - '@zag-js/dismissable@1.7.0': - resolution: {integrity: sha512-o6S++e7iaBmizIgsvLt5RwY7gn2OQGeG2etet+oaUAMtNhi/1+uGG+rTZgOMj/MGg9BYpPld5tXfk/RrlShh9Q==} + '@zag-js/combobox@1.17.4': + resolution: {integrity: sha512-E7mDsVEcIVbRUUIzsI8+OfXyTdPCih60/g7SRd5Mu8cLnzOxdC4tmeoIY+42otPr0e1bieVMjUXTEKR7wvQuAA==} - '@zag-js/dom-query@1.17.1': - resolution: {integrity: sha512-fwwzEKLPq3kAZVkkPBdskL4Ge4aHRAGqBLfAHCKioQNgvKYGRTzqmGA6ijls9ESULUWf0M2ogKstuUtY19PopA==} + '@zag-js/core@1.17.4': + resolution: {integrity: sha512-DIL2MXMLBYKR3pnjGGodiEUkY+ST/J81gtIJ32bLYxWWiMeX0SoPIvDZ9tqDHub9Kkd5CF07onXHkdAmB9Djrg==} - '@zag-js/dom-query@1.7.0': - resolution: {integrity: sha512-cj+mKB7Sj7mqAepHMsbV4bGvDJfUYCt4d4ruYw0dVpDa1Z9N38TtztTznfrm9kuqOYcJkgE0q3Rn/kPLi8rK8g==} + '@zag-js/dialog@1.17.4': + resolution: {integrity: sha512-UCTcGlAlbTSS2Po5XvOOl7FiLba5+kh0Vltz8NAZUNn4e87LeitQVTW68k/pxa2nnnaKfPN6CsAWYQ21aZOcwA==} - '@zag-js/element-rect@1.7.0': - resolution: {integrity: sha512-j0h1+DASUI5urwBCELdjfk4oekLQ0D2v3a1wQJopGh+ITRVAC1gE1YFx3O+vnP2HwqANxG4+RQHwoQBM2bMBCQ==} + '@zag-js/dismissable@1.17.4': + resolution: {integrity: sha512-LkFdUz2Ay3D/CsSjQSVjxQwzH6U5rU6cvEcUTOM90RUSozuV2pAK5NnI3JH3jAy1USlpTbjxHL+2bdep2jkAEg==} - '@zag-js/element-size@1.7.0': - resolution: {integrity: sha512-Nq+HxG64Ts1QvaJPeDuy8zo/RqcbE95RPNVuHBwuxK3sbXOt7umgIrxQMp8uH+1xeJlp7F8/ydKOPyKOTtgiJg==} + '@zag-js/dom-query@1.17.4': + resolution: {integrity: sha512-1fNDCWkHRZXB4dD2hoiyMy0cSkrB/u4fur3To5sOKteka5e9om1/YdbYxXNLmVfeTiC/SJtWNelXP7c/8uDwOw==} - '@zag-js/file-upload@1.7.0': - resolution: {integrity: sha512-6yJhUDLYsqbd0YBO70PzMDNVJJv8OdC0ZWrf51GMUSugGfSpvQZNDfpAW5Zkzqd4B5nkJDw5KiTSR5NYQlO7VA==} + '@zag-js/file-upload@1.17.4': + resolution: {integrity: sha512-onV7jN2l9oXcKAuO/KY0TNcqyaFroQ8JjY+QxOOrZEmhvo48h/Lbi0FwBfk3syNWCRK3ihpRQbKOa1lthupGjg==} - '@zag-js/file-utils@1.7.0': - resolution: {integrity: sha512-Wb1VoI7UquG1ckJPMFPnmgLg351NI55SXjsEq+CrqgKQCo0httYFLPlkOpp4AbGsoUFZxXRxEXDEVzq5kpPFzQ==} + '@zag-js/file-utils@1.17.4': + resolution: {integrity: sha512-eg+ywy2qJn+rXz7wBsJc0N0H6qmKEMvxaWtsynBZ+XDbyrEec/aHNRDaM+l5xdFjDKb5/R151nEDXgnBAT8miA==} - '@zag-js/focus-trap@1.7.0': - resolution: {integrity: sha512-JHMZAfiL1aoxMAQGolx+iDMgqOMy067yffaLr1tMX55NGZPfEyXEjgxmPXRPf728/7IOShLkWLX17yacmW/w/Q==} + '@zag-js/focus-trap@1.17.4': + resolution: {integrity: sha512-6exU3DOkyqE2LSRydhgQIho/XhNOvQ35AEbYN81I6yniJPARbkGmDcQaKHZXSL7+tAe0ynX09yfVo4Cskio8Ow==} - '@zag-js/focus-visible@1.7.0': - resolution: {integrity: sha512-ycrO6VetctoA7aaw83rnp3erDmQe2Zsyobzp4fzpMbOBTNWzMklt4Kz54xa1ntkia8CpSWVfoauORLlaZoDiAw==} + '@zag-js/focus-visible@1.17.4': + resolution: {integrity: sha512-9P1GtsFqbuLcplwK/Y7MdnQz9NipYUjef8PS2/duQzRf3UM99/zu1ZbRqwNIW/Tf5ztvet3+dMBAN5HEyYW0Rw==} - '@zag-js/i18n-utils@1.7.0': - resolution: {integrity: sha512-CcDXxfobG2LlOU1m3xPzV5pXpCe0tSE9u+drtKMz7F/HOZkR3V0rpCCi/zKySPNa3uLC7G8efz1fGQXiOVKONw==} + '@zag-js/i18n-utils@1.17.4': + resolution: {integrity: sha512-HiRKMQGaZUpjqekq1h1UlMqquIBnQYSiGpW9vWCUbKs5hr7z3VIgJtKoxdCsBkno7vBEejl316DIIDh3N2qbeA==} - '@zag-js/interact-outside@1.7.0': - resolution: {integrity: sha512-tmsVQmcH2N2X2mG2/8/+WRIo9WbRVvLe1OZa3lzFYV4Mu5i+tNK1CHMESpoAd/RdjJ6AyTR2zYiH05WZe76gMw==} + '@zag-js/interact-outside@1.17.4': + resolution: {integrity: sha512-jd7/4V7ESS6FJILPWIm5CmXVR+maZ4fQmQUPV56WOURKdl2LZ2bPgfjvEaVI9BTm7qPTML6O55xgB87rS/sXlw==} - '@zag-js/live-region@1.7.0': - resolution: {integrity: sha512-u2bYIAnBIY+GZqfPqxn2ZylOqE2blUVW7Yc2Z4Ey05K4JXSH2gKR3xPmJCS9/u8tcFKQz5L4KQ/98ntgBG2fGQ==} + '@zag-js/live-region@1.17.4': + resolution: {integrity: sha512-fP2f6C6vEcWydvhYKMYWaVu8tqyiCnKJx8auJ2zL/yZGLz/W3xDdRRqHJCfneilN7m8C6tJhWBBZm5Th22bGmQ==} - '@zag-js/pagination@1.7.0': - resolution: {integrity: sha512-gIbJe1fIYlQCpXqWssET9CCmMWLvcz8OCCw7W3ASeLYRvUW3IzhkMAht5pEsvJEZ9tIWaab5fZ7OLqcgCTgVQw==} + '@zag-js/pagination@1.17.4': + resolution: {integrity: sha512-yTOcwRdJ0CozEzw0Q+lAUkpWUERFVCCSx9qqIAGqF5jEZSWefUWMQVcPRqupLQ51mhCXdt+wDDh2mTY6Mr+L3A==} - '@zag-js/popover@1.7.0': - resolution: {integrity: sha512-Nf9grOVBWlnwQL+AR6X2hAy5bTNQng9xG2Cfo4E8rD2G/CJLKtUGCHHkG8xeQ969HT4urbOrgrZ5UpAhkpNlmw==} + '@zag-js/popover@1.17.4': + resolution: {integrity: sha512-uDRfw5/F3FPeanOJbXnVmk5c+RFFkQozZ6dn3qdnynWn1sLh56Kf5Ys4X+MQInxqUKdtDCb7cO2tfkAZXE5ZOA==} - '@zag-js/popper@1.7.0': - resolution: {integrity: sha512-1Tr9ZBS2VPeZ/zeAR5uEBYLkWn4VcycbaDDkvWxa44fi6LxknDf064cP+ql9AfUp/eUGD2hN9OSEhyxB/JXjKQ==} + '@zag-js/popper@1.17.4': + resolution: {integrity: sha512-ZdlDcaBzDx4XUzicTviaCP0Q6W1AXwRzdPVO2TzosqQyyn/tYqEfcJePYu9XVsr1Y6bkume4Pt0ucuRN+kUeYQ==} - '@zag-js/progress@1.7.0': - resolution: {integrity: sha512-dfjPtUGRZW0pURBalm55ACoN083EJ90cDT1RRRF72JhqlRJu/vSXngjSUFtYuG1WADGS3D7F5XIFMo+PAGynFg==} + '@zag-js/progress@1.17.4': + resolution: {integrity: sha512-1FWUIizd8OMcK+0uUA/6ly3VJd5eHeOZkXC4lIWDGGwLhfEv2Lm+pgF5Ix5u1mtcmawBbhpkSlYjc1CbsjUTQQ==} - '@zag-js/radio-group@1.7.0': - resolution: {integrity: sha512-9NlI5fTh8ZVX5nXm7nU/ZheQLZpHwrHZeKRjomVQQALEWuMZ5YJtVXZaUT5xsCRTk+LEQVSaKp10+aD/5cIMlA==} + '@zag-js/radio-group@1.17.4': + resolution: {integrity: sha512-/u9ugWth+FPu3W1VUTuBIVq3TbJZMLYF8cFPhvTgIjBvbQw9Oe+TW+WywyH1z7Oaz03e4IYhW445sWGoC9TNvw==} - '@zag-js/rating-group@1.7.0': - resolution: {integrity: sha512-jDr8M+2fXTxB9l8qm8ktA362eM6Xt6FzIz0dKlV1JsYr5KamhsZ70Y8MPB6i3b45FGdDdj02a2aaWGLRUaRnrw==} + '@zag-js/rating-group@1.17.4': + resolution: {integrity: sha512-5KQdf+CLX3RzCu7Bj8Xn7AKeDU+sxCjxCcbjs8VviLl6Rj/OaFUoUomZFf/wLsJLY1tqk6PD7dX4NczY7YC2YQ==} - '@zag-js/react@1.7.0': - resolution: {integrity: sha512-phr7WMVJcwfOkiLwtobGWkdzVGdZmVQYvF7w8awloW0j1+YF2OdMYDZK8RauHwmg+sEVmqtGeZPr40hZNnKhVQ==} + '@zag-js/react@1.17.4': + resolution: {integrity: sha512-43TEe1Afjh1RR3Byxib/jZ2Wn4UVdZY5Irx5v3tnp8NY8BFeswPhP28e6W2NT4c/UZoWeRxYlXDdrRS2p8L8Wg==} peerDependencies: react: '>=18.0.0' react-dom: '>=18.0.0' - '@zag-js/remove-scroll@1.7.0': - resolution: {integrity: sha512-sjuBT/iHUZKoDaIdEa5fn0Ii6qjPbp/xO5g/2n2gI3RhRPjcc9jmrTxuvjKftB+ZoBy4GO8MbeaPKdQLIreufg==} + '@zag-js/remove-scroll@1.17.4': + resolution: {integrity: sha512-EY+N1UodKfu2omYknbWfv+33pljfVW5ZX01iuSlTng3Vx5Zn6xlQCTxpVWvDidACEN6jjBn00QFbGWEhDDBpdw==} - '@zag-js/slider@1.7.0': - resolution: {integrity: sha512-0h9ejtOWa4XjxApcCFyGt7By22kd6gG4PdUZgXiKlPCQFgYrxWXZqMlwH6ZtyD4VYUuRPJ05CezDU5KlmZD/3A==} + '@zag-js/slider@1.17.4': + resolution: {integrity: sha512-Iq3pgLmJIvmQXaUm/+Xt1/s1IV1p73E7ySbThdZ8EADDn60m5ESVTwEymK9jnH10hpXuxDvI1GcbWPOTrIxwYQ==} - '@zag-js/store@1.7.0': - resolution: {integrity: sha512-3n+AGo3Y3d1+SkEjY/6QPcDU5kfGu4DEA9qMxJgnnOlYT07SEWByMQD2uoEji9M9psHcVvxm86OnF3Y6UuTsuA==} + '@zag-js/store@1.17.4': + resolution: {integrity: sha512-80i4/ggb2OrZ9+l1EJgYcp8uBy5oJwwae/kzy2/r93P+gotct5/qiyZYrybE8+YhU0u5zPiyjTxH0SILfP9Ofg==} - '@zag-js/svelte@1.7.0': - resolution: {integrity: sha512-NN9G990gJlqMkW4FMa8tBLEs858MnogWaY5/QPs7skoVnFz5f+3S2kXtyJhyStBbRpZWCnELfbmb5KnMDZ57MQ==} + '@zag-js/svelte@1.17.4': + resolution: {integrity: sha512-eILJQr0GPLdJC9ewccD0sIQ0LT3fhXRnYzo8FRT3T++HzDonaxny2PGZRFjhIgD4JPhWKMrSJo1pXer83JLT+w==} peerDependencies: svelte: ^5.0.0-next.1 - '@zag-js/switch@1.7.0': - resolution: {integrity: sha512-sz3whYMAD949fJ5v9DegU43SrpUNKhoPOum4LOpoSrh364ePfm7ShsTIgJnqPrdMknr+17ljLx54tXPS1SsMTw==} + '@zag-js/switch@1.17.4': + resolution: {integrity: sha512-d5kBKe+q7V87V6K3BcsfJ1jU2qiJvPLjBumUDFkrzU0E5jweVOOwYrqDzLX8X4cBXk9A2R6U8rYdgGwWDctmWQ==} - '@zag-js/tabs@1.7.0': - resolution: {integrity: sha512-bAMp7Vhyis5j3BSKs4m0OwsbchRLLzFf6Yaf54CNraAUdKRwLQckznrajQLPI5F+BrHkGzMXvj/lt9jlGiKDcw==} + '@zag-js/tabs@1.17.4': + resolution: {integrity: sha512-jvchw7erb8ryQTR92QQyP64nmJPJHCeOr6s09ghYqyNIVI5xgVy5hcfgrE4iMXODJ9CSAMsZHqY7QN5Xq10l3Q==} - '@zag-js/tags-input@1.7.0': - resolution: {integrity: sha512-ME/KwP1yrPHX0bP0EqkHI30IQgrE2cAkREoRluM5ScpG3Uiug98x6+zts0YS9j1OB3pyTl0d4alECBruxN8cPA==} + '@zag-js/tags-input@1.17.4': + resolution: {integrity: sha512-BYzvgIdqjv2LZSf5tfRECklCEt9u/uyc4gaGOiEseNIzcyQ9xrg9fq2Yk6Wt8mhWujdCbC/zJS2RB3LdcVePng==} - '@zag-js/toast@1.7.0': - resolution: {integrity: sha512-tvEO1vpC9QZ0oYJOKay2dvcq5lAPn4MT7ahnALs89iVjhWyguXAs5kzoq/Devlbuhi+bUY1YxvtrMDJjYVFhaA==} + '@zag-js/toast@1.17.4': + resolution: {integrity: sha512-lhu0mhHLpT2DaI9d6BjlE2vJEL9/jFmyPGJ9QG9kkQAxDNtEJLiCJEe12mKs5S9LoxDHJGWGYkF2O/7XwLkDnA==} - '@zag-js/tooltip@1.7.0': - resolution: {integrity: sha512-ehZOewcxYZL4+ND5QMeDlQQrckssMTzxcReRCOVFXrRZb5X1jX6+ale9MSG+cJYMpQUqT2J5VtzMJH+GNj/jfw==} + '@zag-js/tooltip@1.17.4': + resolution: {integrity: sha512-lDRXZjd7anVb4h2ZvDCYYZ+puJZZwry5xi72jY6xhz3vVWX5qfkYjZ/MHuuDk/S+fEY+luWJXJ+cPh+v1zie0g==} - '@zag-js/tree-view@1.17.1': - resolution: {integrity: sha512-G5V24wKVfN1YPGK5GszblcI0NY9HqyEFxwo23JASmm9LTmwAr/5TKu8IEkobzKw0IH6Mo/eEyGrL+L6LNuof6Q==} + '@zag-js/tree-view@1.17.4': + resolution: {integrity: sha512-XRc2DxB/gVrkmS7+ZTJBC8p0G1J+mqtFb5zzRxyNitp+VW7yMsRtAUJ7m5gT5bD71zOkk4fPhwuB+ZZtpPAaMQ==} - '@zag-js/types@1.17.1': - resolution: {integrity: sha512-KEPko1DK19hEMfM5IPKTZQtpf4HC3X56qwckezRX1yk+/vGotVUxdjRIrv+pcITjlFAoQQO9TiiZv2UiiVrFGA==} + '@zag-js/types@1.17.4': + resolution: {integrity: sha512-GHE1ykkMeHuIPHkkU1JNcIWMoFH322Yq65S4dhhsEgqMRX3BUHW8ids5e+7WOu9ZSH3PGJdpUXe8+jg3USpwaw==} - '@zag-js/types@1.7.0': - resolution: {integrity: sha512-rmPonVc8EBOGIEJYjzWIBQ6LJwUMc3LnipRREECO+n7LNlUQUliCOFbHw1UOGP+4ZkCKmxjGFR3jLtjY8aN4gQ==} - - '@zag-js/utils@1.17.1': - resolution: {integrity: sha512-+w/Kx7uZufg3cD6I5bQ8iSoeY3qSarPpUwrxz6FCOxJ86IAmf3ActqFC2pJ6DQCdHdkWINaKKchb4GNt8ld7KQ==} - - '@zag-js/utils@1.7.0': - resolution: {integrity: sha512-yIxvH5V27a1WuLgCxHX7qpdtFo8vTJaZLafBpSNfVYG4B8FaxTE+P7JAcpmAzs3UyXura/WfAY2eVWWVBpk9ZA==} + '@zag-js/utils@1.17.4': + resolution: {integrity: sha512-FXici9HJG1ZBLCmbHO/ed4iurDriDjdx8XOfSD052bu22ViWl5jnO2K77OwagexbXGGAJNhswvDeQg5CSqYbvA==} abbrev@3.0.0: resolution: {integrity: sha512-+/kfrslGQ7TNV2ecmQwMJj/B65g5KVq1/L3SGVZ3tCYGqlzFuFCGBZJtMP99wH3NpEUyAjn0zPdPUg0D+DwrOA==} @@ -7222,11 +7204,20 @@ snapshots: dependencies: '@floating-ui/utils': 0.2.9 + '@floating-ui/core@1.7.1': + dependencies: + '@floating-ui/utils': 0.2.9 + '@floating-ui/dom@1.6.13': dependencies: '@floating-ui/core': 1.6.9 '@floating-ui/utils': 0.2.9 + '@floating-ui/dom@1.7.1': + dependencies: + '@floating-ui/core': 1.7.1 + '@floating-ui/utils': 0.2.9 + '@floating-ui/react-dom@2.1.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': dependencies: '@floating-ui/dom': 1.6.13 @@ -8362,280 +8353,252 @@ snapshots: '@vscode/l10n@0.0.18': {} - '@zag-js/accordion@1.7.0': + '@zag-js/accordion@1.17.4': dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 - - '@zag-js/anatomy@1.17.1': {} + '@zag-js/anatomy': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 - '@zag-js/anatomy@1.7.0': {} + '@zag-js/anatomy@1.17.4': {} - '@zag-js/aria-hidden@1.7.0': {} + '@zag-js/aria-hidden@1.17.4': {} - '@zag-js/auto-resize@1.7.0': + '@zag-js/auto-resize@1.17.4': dependencies: - '@zag-js/dom-query': 1.7.0 + '@zag-js/dom-query': 1.17.4 - '@zag-js/avatar@1.7.0': + '@zag-js/avatar@1.17.4': dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 + '@zag-js/anatomy': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 - '@zag-js/collection@1.17.1': + '@zag-js/collection@1.17.4': dependencies: - '@zag-js/utils': 1.17.1 + '@zag-js/utils': 1.17.4 - '@zag-js/collection@1.7.0': + '@zag-js/combobox@1.17.4': dependencies: - '@zag-js/utils': 1.7.0 + '@zag-js/anatomy': 1.17.4 + '@zag-js/aria-hidden': 1.17.4 + '@zag-js/collection': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dismissable': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/popper': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 - '@zag-js/combobox@1.7.0': + '@zag-js/core@1.17.4': dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/aria-hidden': 1.7.0 - '@zag-js/collection': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dismissable': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/popper': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 + '@zag-js/dom-query': 1.17.4 + '@zag-js/utils': 1.17.4 - '@zag-js/core@1.17.1': + '@zag-js/dialog@1.17.4': dependencies: - '@zag-js/dom-query': 1.17.1 - '@zag-js/utils': 1.17.1 + '@zag-js/anatomy': 1.17.4 + '@zag-js/aria-hidden': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dismissable': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/focus-trap': 1.17.4 + '@zag-js/remove-scroll': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 - '@zag-js/core@1.7.0': + '@zag-js/dismissable@1.17.4': dependencies: - '@zag-js/dom-query': 1.7.0 - '@zag-js/utils': 1.7.0 + '@zag-js/dom-query': 1.17.4 + '@zag-js/interact-outside': 1.17.4 + '@zag-js/utils': 1.17.4 - '@zag-js/dialog@1.7.0': + '@zag-js/dom-query@1.17.4': dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/aria-hidden': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dismissable': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/focus-trap': 1.7.0 - '@zag-js/remove-scroll': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 + '@zag-js/types': 1.17.4 - '@zag-js/dismissable@1.7.0': + '@zag-js/file-upload@1.17.4': dependencies: - '@zag-js/dom-query': 1.7.0 - '@zag-js/interact-outside': 1.7.0 - '@zag-js/utils': 1.7.0 + '@zag-js/anatomy': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/file-utils': 1.17.4 + '@zag-js/i18n-utils': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 - '@zag-js/dom-query@1.17.1': + '@zag-js/file-utils@1.17.4': dependencies: - '@zag-js/types': 1.17.1 + '@zag-js/i18n-utils': 1.17.4 - '@zag-js/dom-query@1.7.0': + '@zag-js/focus-trap@1.17.4': dependencies: - '@zag-js/types': 1.7.0 - - '@zag-js/element-rect@1.7.0': {} - - '@zag-js/element-size@1.7.0': {} + '@zag-js/dom-query': 1.17.4 - '@zag-js/file-upload@1.7.0': + '@zag-js/focus-visible@1.17.4': dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/file-utils': 1.7.0 - '@zag-js/i18n-utils': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 + '@zag-js/dom-query': 1.17.4 - '@zag-js/file-utils@1.7.0': + '@zag-js/i18n-utils@1.17.4': dependencies: - '@zag-js/i18n-utils': 1.7.0 + '@zag-js/dom-query': 1.17.4 - '@zag-js/focus-trap@1.7.0': + '@zag-js/interact-outside@1.17.4': dependencies: - '@zag-js/dom-query': 1.7.0 + '@zag-js/dom-query': 1.17.4 + '@zag-js/utils': 1.17.4 - '@zag-js/focus-visible@1.7.0': - dependencies: - '@zag-js/dom-query': 1.7.0 + '@zag-js/live-region@1.17.4': {} - '@zag-js/i18n-utils@1.7.0': + '@zag-js/pagination@1.17.4': dependencies: - '@zag-js/dom-query': 1.7.0 + '@zag-js/anatomy': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 - '@zag-js/interact-outside@1.7.0': + '@zag-js/popover@1.17.4': dependencies: - '@zag-js/dom-query': 1.7.0 - '@zag-js/utils': 1.7.0 - - '@zag-js/live-region@1.7.0': {} + '@zag-js/anatomy': 1.17.4 + '@zag-js/aria-hidden': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dismissable': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/focus-trap': 1.17.4 + '@zag-js/popper': 1.17.4 + '@zag-js/remove-scroll': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 - '@zag-js/pagination@1.7.0': + '@zag-js/popper@1.17.4': dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 + '@floating-ui/dom': 1.7.1 + '@zag-js/dom-query': 1.17.4 + '@zag-js/utils': 1.17.4 - '@zag-js/popover@1.7.0': + '@zag-js/progress@1.17.4': dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/aria-hidden': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dismissable': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/focus-trap': 1.7.0 - '@zag-js/popper': 1.7.0 - '@zag-js/remove-scroll': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 + '@zag-js/anatomy': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 - '@zag-js/popper@1.7.0': + '@zag-js/radio-group@1.17.4': dependencies: - '@floating-ui/dom': 1.6.13 - '@zag-js/dom-query': 1.7.0 - '@zag-js/utils': 1.7.0 + '@zag-js/anatomy': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/focus-visible': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 - '@zag-js/progress@1.7.0': + '@zag-js/rating-group@1.17.4': dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 + '@zag-js/anatomy': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 - '@zag-js/radio-group@1.7.0': + '@zag-js/react@1.17.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/element-rect': 1.7.0 - '@zag-js/focus-visible': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 - - '@zag-js/rating-group@1.7.0': - dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 - - '@zag-js/react@1.7.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': - dependencies: - '@zag-js/core': 1.7.0 - '@zag-js/store': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 + '@zag-js/core': 1.17.4 + '@zag-js/store': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 react: 19.1.0 react-dom: 19.1.0(react@19.1.0) - '@zag-js/remove-scroll@1.7.0': + '@zag-js/remove-scroll@1.17.4': dependencies: - '@zag-js/dom-query': 1.7.0 + '@zag-js/dom-query': 1.17.4 - '@zag-js/slider@1.7.0': + '@zag-js/slider@1.17.4': dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/element-size': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 + '@zag-js/anatomy': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 - '@zag-js/store@1.7.0': + '@zag-js/store@1.17.4': dependencies: proxy-compare: 3.0.1 - '@zag-js/svelte@1.7.0(svelte@5.25.3)': + '@zag-js/svelte@1.17.4(svelte@5.25.3)': dependencies: - '@zag-js/core': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 + '@zag-js/core': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 svelte: 5.25.3 - '@zag-js/switch@1.7.0': - dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/focus-visible': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 - - '@zag-js/tabs@1.7.0': - dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/element-rect': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 - - '@zag-js/tags-input@1.7.0': - dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/auto-resize': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/interact-outside': 1.7.0 - '@zag-js/live-region': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 - - '@zag-js/toast@1.7.0': - dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dismissable': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 - - '@zag-js/tooltip@1.7.0': - dependencies: - '@zag-js/anatomy': 1.7.0 - '@zag-js/core': 1.7.0 - '@zag-js/dom-query': 1.7.0 - '@zag-js/focus-visible': 1.7.0 - '@zag-js/popper': 1.7.0 - '@zag-js/store': 1.7.0 - '@zag-js/types': 1.7.0 - '@zag-js/utils': 1.7.0 - - '@zag-js/tree-view@1.17.1': - dependencies: - '@zag-js/anatomy': 1.17.1 - '@zag-js/collection': 1.17.1 - '@zag-js/core': 1.17.1 - '@zag-js/dom-query': 1.17.1 - '@zag-js/types': 1.17.1 - '@zag-js/utils': 1.17.1 - - '@zag-js/types@1.17.1': + '@zag-js/switch@1.17.4': + dependencies: + '@zag-js/anatomy': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/focus-visible': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 + + '@zag-js/tabs@1.17.4': + dependencies: + '@zag-js/anatomy': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 + + '@zag-js/tags-input@1.17.4': + dependencies: + '@zag-js/anatomy': 1.17.4 + '@zag-js/auto-resize': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/interact-outside': 1.17.4 + '@zag-js/live-region': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 + + '@zag-js/toast@1.17.4': + dependencies: + '@zag-js/anatomy': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dismissable': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 + + '@zag-js/tooltip@1.17.4': + dependencies: + '@zag-js/anatomy': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/focus-visible': 1.17.4 + '@zag-js/popper': 1.17.4 + '@zag-js/store': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 + + '@zag-js/tree-view@1.17.4': + dependencies: + '@zag-js/anatomy': 1.17.4 + '@zag-js/collection': 1.17.4 + '@zag-js/core': 1.17.4 + '@zag-js/dom-query': 1.17.4 + '@zag-js/types': 1.17.4 + '@zag-js/utils': 1.17.4 + + '@zag-js/types@1.17.4': dependencies: csstype: 3.1.3 - '@zag-js/types@1.7.0': - dependencies: - csstype: 3.1.3 - - '@zag-js/utils@1.17.1': {} - - '@zag-js/utils@1.7.0': {} + '@zag-js/utils@1.17.4': {} abbrev@3.0.0: {} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index d0a465d296..209bcbdf19 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -3,7 +3,7 @@ packages: - 'sites/*' - 'playgrounds/*' -define: &zag_version '^1.7.0' +define: &zag_version '^1.17.4' catalog: '@zag-js/svelte': *zag_version From 4bd9f476351ff16b23a1afe973d2a9d482273aaa Mon Sep 17 00:00:00 2001 From: dev-viinz <42003446+dev-viinz@users.noreply.github.com> Date: Tue, 1 Jul 2025 01:10:11 +0200 Subject: [PATCH 05/30] feat: working prototype --- .../src/components/TreeView/TreeNode.svelte | 44 ------ .../src/components/TreeView/TreeView.svelte | 145 ++++++++++++++---- .../components/TreeView/TreeViewNode.svelte | 137 +++++++++++++++++ .../src/components/TreeView/index.ts | 3 +- .../src/components/TreeView/types.ts | 125 ++++++++++++++- .../routes/components/tree-view/+page.svelte | 34 +++- 6 files changed, 401 insertions(+), 87 deletions(-) delete mode 100644 packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte create mode 100644 packages/skeleton-svelte/src/components/TreeView/TreeViewNode.svelte diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte deleted file mode 100644 index cc611e13b4..0000000000 --- a/packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte +++ /dev/null @@ -1,44 +0,0 @@ - - -{#if nodeState.isBranch} -
-
- 📁 - {node.name} - ➡️ -
-
-
- {#if node.children} - {#each node.children as childNode, index} - - {/each} - {/if} -
-
-{:else} -
- 📄 - {node.name} -
-{/if} diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte index 01ef5a39de..482e4c0d88 100644 --- a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte +++ b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte @@ -1,58 +1,135 @@ -
-

My Documents

+
- {#if collection.rootNode.children} - {#each collection.rootNode.children as node, index} - + {#if treeCollection.rootNode.children} + {#each treeCollection.rootNode.children as node, index} + {/each} {/if}
diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeViewNode.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeViewNode.svelte new file mode 100644 index 0000000000..26ec332367 --- /dev/null +++ b/packages/skeleton-svelte/src/components/TreeView/TreeViewNode.svelte @@ -0,0 +1,137 @@ + + + + +{#if nodeState.isBranch} + +
+ + + + + {#if ctx.api.expandedValue.includes(node.id)} +
+
+
+ {#if node.children} + {#each node.children as childNode, index} + + {/each} + {/if} +
+
+ {/if} +
+{:else} + +{/if} + + diff --git a/packages/skeleton-svelte/src/components/TreeView/index.ts b/packages/skeleton-svelte/src/components/TreeView/index.ts index 7f1d3f4c46..4359f140f7 100644 --- a/packages/skeleton-svelte/src/components/TreeView/index.ts +++ b/packages/skeleton-svelte/src/components/TreeView/index.ts @@ -1,3 +1,4 @@ import TreeView from './TreeView.svelte'; +import Node from './TreeViewNode.svelte'; -export default Object.assign(TreeView); +export default Object.assign(TreeView, { Node }); diff --git a/packages/skeleton-svelte/src/components/TreeView/types.ts b/packages/skeleton-svelte/src/components/TreeView/types.ts index c793c1676a..78590f6590 100644 --- a/packages/skeleton-svelte/src/components/TreeView/types.ts +++ b/packages/skeleton-svelte/src/components/TreeView/types.ts @@ -1,19 +1,130 @@ import * as tree from '@zag-js/tree-view'; +import type { Snippet } from 'svelte'; +import type { SlideParams } from 'svelte/transition'; // TreeViewContext --- -export interface TreeViewContext { - api: ReturnType; +export interface TreeViewContext extends TreeNodeProps { + api: ReturnType>>; } // Components --- -export interface TreeViewProps extends Omit { - prop: string; +export interface TreeViewProps extends Omit, TreeNodeProps { + // Data --- + collection: TreeViewCollection; + // View --- + /** Set base styles. */ + base?: string; + /** Set background styles. */ + bg?: string; + /** Set vertical spacing styles. */ + spaceY?: string; + /** Set border styles. */ + border?: string; + /** Set padding styles. */ + padding?: string; + /** Set shadow styles. */ + shadow?: string; + /** Provide arbitrary CSS classes. */ + classes?: string; + // Node --- + nodeBase: string; + nodeBg: string; + nodeClasses: string; + // Label --- + /** Set label snippet's styles. */ + labelBase?: string; + /** Set label snippet's background styles. */ + labelBg?: string; + /** Set label snippet's vertical spacing styles. */ + labelSpaceY?: string; + /** Set label snippet's border styles. */ + labelBorder?: string; + /** Set label snippet's padding styles. */ + labelPadding?: string; + /** Set label snippet's shadow styles. */ + labelShadow?: string; + /** Provide arbitrary CSS classes to the label. */ + labelClasses?: string; + // Snippets --- + children?: Snippet; } -export interface Node { +export interface TreeNodeProps { + /** The animation configuration */ + animationConfig?: SlideParams; + // Content --- + /** Set content styles. */ + contentBase?: string; + /** Set content background styles. */ + contentBg?: string; + /** Set content vertical spacing styles. */ + contentSpaceY?: string; + /** Set content border styles. */ + contentBorder?: string; + /** Set content padding styles. */ + contentPadding?: string; + /** Set content shadow styles. */ + contentShadow?: string; + /** Provide arbitrary CSS classes to the contents. */ + contentClasses?: string; + + // Control --- + /** Set control styles. */ + controlBase?: string; + /** Set control background styles. */ + controlBg?: string; + /** Set control vertical spacing styles. */ + controlSpaceY?: string; + /** Set control hover styles. */ + controlHover: string; + /** Set control border styles. */ + controlBorder?: string; + /** Set control padding styles. */ + controlPadding?: string; + /** Set control shadow styles. */ + controlShadow?: string; + /** Provide arbitrary CSS classes to the controls. */ + controlClasses?: string; + + // Item --- + /** Set item styles. */ + itemBase?: string; + /** Set item background styles. */ + itemBg?: string; + /** Set item vertical spacing styles. */ + itemSpaceY?: string; + /** Set item hover styles. */ + itemHover: string; + /** Set item border styles. */ + itemBorder?: string; + /** Set item padding styles. */ + itemPadding?: string; + /** Set item shadow styles. */ + itemShadow?: string; + /** Provide arbitrary CSS classes to the items. */ + itemClasses?: string; + + // Indent --- + /** Set indentation amount. */ + indentAmount?: string; + // Indicator --- + /** Set indicator transformations when open. */ + indicatorOpenRotation?: string; + /** Set indicator transitions. */ + indicatorTransition?: string; + // Snippets --- + branchIcon: Snippet; + itemIcon: Snippet; + nodeText: Snippet<[string]>; + nodeIndicator: Snippet; +} + +export interface Node { id: string; - name: string; - children?: Node[]; + value: T; + children?: Node[]; } + +export type TreeViewCollection = Node[]; diff --git a/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte index c50da8f560..d4a7331561 100644 --- a/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte +++ b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte @@ -1,5 +1,37 @@ - + + {#snippet nodeIndicator()} + ⇒ + {/snippet} + {#snippet branchIcon()} + 📁 + {/snippet} + {#snippet itemIcon()} + 📄 + {/snippet} + {#snippet nodeText(text: string)} + {text} ✨ + {/snippet} + From ed9ccb08cf0080d4e4ab7b83446b5335f0063b4e Mon Sep 17 00:00:00 2001 From: dev-viinz <42003446+dev-viinz@users.noreply.github.com> Date: Tue, 1 Jul 2025 20:04:14 +0200 Subject: [PATCH 06/30] feat: re-order things for draft --- .../src/components/TreeView/TreeView.svelte | 79 ++++++------- .../components/TreeView/TreeViewNode.svelte | 106 +++++++++++------- .../src/components/TreeView/types.ts | 58 ++++++---- 3 files changed, 141 insertions(+), 102 deletions(-) diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte index 482e4c0d88..96acf63a30 100644 --- a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte +++ b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte @@ -1,9 +1,8 @@ @@ -69,7 +70,7 @@ {#if nodeIndicator} {@render nodeIndicator()} @@ -96,11 +97,40 @@ transition:slide={animationConfig} {...ctx.api.getBranchContentProps(zagProps)} > -
+
{#if node.children} {#each node.children as childNode, index} - + {/each} {/if}
diff --git a/packages/skeleton-svelte/src/components/TreeView/types.ts b/packages/skeleton-svelte/src/components/TreeView/types.ts index 78590f6590..ee11f133e9 100644 --- a/packages/skeleton-svelte/src/components/TreeView/types.ts +++ b/packages/skeleton-svelte/src/components/TreeView/types.ts @@ -4,15 +4,30 @@ import type { SlideParams } from 'svelte/transition'; // TreeViewContext --- -export interface TreeViewContext extends TreeNodeProps { - api: ReturnType>>; +export interface TreeViewContext { + /** The animation configuration. */ + animationConfig?: SlideParams; + // Zag --- + /** The api of the state machine. */ + api: ReturnType>; + // Snippets --- + /** The lead icon for expandable branches. */ + branchIcon?: Snippet; + /** The lead icon for end nodes */ + itemIcon?: Snippet; + /** The snippet that accepts the node value for display. */ + nodeText?: Snippet<[string]>; + /** The icon to indicate if the node children are expanded. */ + nodeIndicator?: Snippet; } // Components --- -export interface TreeViewProps extends Omit, TreeNodeProps { +export interface TreeViewProps extends Omit, Omit { + /** The animation configuration. */ + animationConfig?: SlideParams; // Data --- - collection: TreeViewCollection; + collection: TreeViewCollection; // View --- /** Set base styles. */ base?: string; @@ -29,9 +44,9 @@ export interface TreeViewProps extends Omit extends Omit; - nodeIndicator: Snippet; } -export interface Node { +export interface CollectionNode { id: string; - value: T; - children?: Node[]; + value: string; + children?: CollectionNode[]; } -export type TreeViewCollection = Node[]; +export type TreeViewCollection = CollectionNode[]; From 2fa4e9f18922b4b61c421c7542ca30571c8c88c8 Mon Sep 17 00:00:00 2001 From: dev-viinz <42003446+dev-viinz@users.noreply.github.com> Date: Thu, 3 Jul 2025 23:02:06 +0200 Subject: [PATCH 07/30] feat: consolidate treeview into single component + improve playground --- .../src/components/TreeView/TreeView.svelte | 144 ++++++++++----- .../components/TreeView/TreeViewNode.svelte | 167 ------------------ .../src/components/TreeView/index.ts | 4 - packages/skeleton-svelte/src/index.ts | 2 +- .../routes/components/tree-view/+page.svelte | 59 ++++--- 5 files changed, 139 insertions(+), 237 deletions(-) delete mode 100644 packages/skeleton-svelte/src/components/TreeView/TreeViewNode.svelte delete mode 100644 packages/skeleton-svelte/src/components/TreeView/index.ts diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte index 96acf63a30..7beb65f57a 100644 --- a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte +++ b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte @@ -1,9 +1,22 @@ + + + + +
{#if treeCollection.rootNode.children} {#each treeCollection.rootNode.children as node, index} - + {@render treeNode({ node, indexPath: [index] })} {/each} {/if}
+ + +{#snippet treeNode(nodeProps: tree.NodeProps)} + {#if api.getNodeState(nodeProps).isBranch} + +
+ + + + + {#if api.expandedValue.includes(nodeProps.node.id)} +
+
+
+ {#if nodeProps.node.children} + {#each nodeProps.node.children as childNode, index} + {@render treeNode({ node: childNode, indexPath: [...nodeProps.indexPath, index] })} + {/each} + {/if} +
+
+ {/if} +
+ {:else} + + {/if} +{/snippet} + + diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeViewNode.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeViewNode.svelte deleted file mode 100644 index ba0529f6ca..0000000000 --- a/packages/skeleton-svelte/src/components/TreeView/TreeViewNode.svelte +++ /dev/null @@ -1,167 +0,0 @@ - - - - -{#if nodeState.isBranch} - -
- - - - - {#if ctx.api.expandedValue.includes(node.id)} -
-
-
- {#if node.children} - {#each node.children as childNode, index} - - {/each} - {/if} -
-
- {/if} -
-{:else} - -{/if} - - diff --git a/packages/skeleton-svelte/src/components/TreeView/index.ts b/packages/skeleton-svelte/src/components/TreeView/index.ts deleted file mode 100644 index 4359f140f7..0000000000 --- a/packages/skeleton-svelte/src/components/TreeView/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import TreeView from './TreeView.svelte'; -import Node from './TreeViewNode.svelte'; - -export default Object.assign(TreeView, { Node }); diff --git a/packages/skeleton-svelte/src/index.ts b/packages/skeleton-svelte/src/index.ts index b6b163ad80..d82806d00b 100644 --- a/packages/skeleton-svelte/src/index.ts +++ b/packages/skeleton-svelte/src/index.ts @@ -22,7 +22,7 @@ export { default as TagsInput } from './components/TagsInput/TagsInput.svelte'; export { default as Toaster } from './components/Toast/Toaster.svelte'; export { createToaster } from './components/Toast/create-toaster.js'; export { default as Rating } from './components/Rating/index.js'; -export { default as TreeView } from './components/TreeView/index.js'; +export { default as TreeView } from './components/TreeView/TreeView.svelte'; // Types export type { FileUploadApi } from './components/FileUpload/types.js'; diff --git a/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte index d4a7331561..0168793742 100644 --- a/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte +++ b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte @@ -1,19 +1,23 @@ - - {#snippet nodeIndicator()} - ⇒ - {/snippet} - {#snippet branchIcon()} - 📁 - {/snippet} - {#snippet itemIcon()} - 📄 - {/snippet} - {#snippet nodeText(text: string)} - {text} ✨ - {/snippet} - +
+
+

Tree View

+
+
+
+
+

Default

+ 
{JSON.stringify(valueDefault)}
+ (valueDefault = e.expandedValue)}> +
+
+

Icons

+ + {#snippet nodeIndicator()} + ⇒ + {/snippet} + {#snippet branchIcon()} + 📁 + {/snippet} + {#snippet itemIcon()} + 📄 + {/snippet} + +
+
+ 
{JSON.stringify(collection, null, 2)}
+
+
From 5650a385edebca0e45d40694be849a728e80dc53 Mon Sep 17 00:00:00 2001 From: dev-viinz <42003446+dev-viinz@users.noreply.github.com> Date: Fri, 4 Jul 2025 01:58:18 +0200 Subject: [PATCH 08/30] chore: cleanup types + lint --- .../src/components/TreeView/TreeView.svelte | 2 - .../src/components/TreeView/types.ts | 78 +++++++------------ packages/skeleton-svelte/src/index.ts | 1 + .../routes/components/tree-view/+page.svelte | 13 ++-- 4 files changed, 35 insertions(+), 59 deletions(-) diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte index 7beb65f57a..b863bdb47d 100644 --- a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte +++ b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte @@ -65,9 +65,7 @@ // Snippets branchIcon, itemIcon, - nodeText, nodeIndicator, - children, ...zagProps }: TreeViewProps = $props(); diff --git a/packages/skeleton-svelte/src/components/TreeView/types.ts b/packages/skeleton-svelte/src/components/TreeView/types.ts index ee11f133e9..9e2dec2664 100644 --- a/packages/skeleton-svelte/src/components/TreeView/types.ts +++ b/packages/skeleton-svelte/src/components/TreeView/types.ts @@ -2,32 +2,15 @@ import * as tree from '@zag-js/tree-view'; import type { Snippet } from 'svelte'; import type { SlideParams } from 'svelte/transition'; -// TreeViewContext --- - -export interface TreeViewContext { - /** The animation configuration. */ - animationConfig?: SlideParams; - // Zag --- - /** The api of the state machine. */ - api: ReturnType>; - // Snippets --- - /** The lead icon for expandable branches. */ - branchIcon?: Snippet; - /** The lead icon for end nodes */ - itemIcon?: Snippet; - /** The snippet that accepts the node value for display. */ - nodeText?: Snippet<[string]>; - /** The icon to indicate if the node children are expanded. */ - nodeIndicator?: Snippet; -} - // Components --- -export interface TreeViewProps extends Omit, Omit { +export interface TreeViewProps extends Omit { /** The animation configuration. */ animationConfig?: SlideParams; + // Data --- collection: TreeViewCollection; + // View --- /** Set base styles. */ base?: string; @@ -43,38 +26,7 @@ export interface TreeViewProps extends Omit, Om shadow?: string; /** Provide arbitrary CSS classes. */ classes?: string; - // Node --- - nodeBase?: string; - nodeBg?: string; - nodeClasses?: string; - // Label --- - /** Set label snippet's styles. */ - labelBase?: string; - /** Set label snippet's background styles. */ - labelBg?: string; - /** Set label snippet's vertical spacing styles. */ - labelSpaceY?: string; - /** Set label snippet's border styles. */ - labelBorder?: string; - /** Set label snippet's padding styles. */ - labelPadding?: string; - /** Set label snippet's shadow styles. */ - labelShadow?: string; - /** Provide arbitrary CSS classes to the label. */ - labelClasses?: string; - // Snippets --- - children?: Snippet; - /** The lead icon for expandable branches. */ - branchIcon?: Snippet; - /** The lead icon for end nodes */ - itemIcon?: Snippet; - /** The snippet that accepts the node value for display. */ - nodeText?: Snippet; - /** The icon to indicate if the node children are expanded. */ - nodeIndicator?: Snippet; -} -export interface TreeNodeProps extends tree.NodeProps { // Content --- /** Set content styles. */ contentBase?: string; @@ -135,6 +87,30 @@ export interface TreeNodeProps extends tree.NodeProps { indicatorOpenRotation?: string; /** Set indicator transitions. */ indicatorTransition?: string; + + // Label --- + /** Set label snippet's styles. */ + labelBase?: string; + /** Set label snippet's background styles. */ + labelBg?: string; + /** Set label snippet's vertical spacing styles. */ + labelSpaceY?: string; + /** Set label snippet's border styles. */ + labelBorder?: string; + /** Set label snippet's padding styles. */ + labelPadding?: string; + /** Set label snippet's shadow styles. */ + labelShadow?: string; + /** Provide arbitrary CSS classes to the label. */ + labelClasses?: string; + + // Snippets --- + /** The lead icon for expandable branches. */ + branchIcon?: Snippet; + /** The lead icon for end nodes */ + itemIcon?: Snippet; + /** The icon to indicate if the node children are expanded. */ + nodeIndicator?: Snippet; } export interface CollectionNode { diff --git a/packages/skeleton-svelte/src/index.ts b/packages/skeleton-svelte/src/index.ts index d82806d00b..e2b463dd17 100644 --- a/packages/skeleton-svelte/src/index.ts +++ b/packages/skeleton-svelte/src/index.ts @@ -26,6 +26,7 @@ export { default as TreeView } from './components/TreeView/TreeView.svelte'; // Types export type { FileUploadApi } from './components/FileUpload/types.js'; +export type { CollectionNode, TreeViewCollection } from './components/TreeView/types.js'; // Temporary Features --- // The following will be removed or replaced in the future. diff --git a/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte index 0168793742..8e4e7a769d 100644 --- a/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte +++ b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte @@ -1,11 +1,11 @@ - + + + {#snippet content({ node: nodeData, nodeProps })} + + 
{JSON.stringify(nodeProps, undefined, 2)}
+
+ + + + +
+
+
+ {@render children()} +
+
+
+ {/snippet} + diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeItem.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeItem.svelte new file mode 100644 index 0000000000..ae31b8b938 --- /dev/null +++ b/packages/skeleton-svelte/src/components/TreeView/TreeItem.svelte @@ -0,0 +1,36 @@ + + + + {#snippet content({ node: nodeData, nodeProps })} + + {/snippet} + diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte new file mode 100644 index 0000000000..d3909aa1e6 --- /dev/null +++ b/packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte @@ -0,0 +1,157 @@ + + +{#if isRegistered} + {@render content({ node: nodeData, nodeProps })} +{/if} diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte index 1497efb7e8..22f59781d6 100644 --- a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte +++ b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte @@ -1,8 +1,15 @@ +
{JSON.stringify(Array.from(nodes.values()), undefined, 2)}
+
{JSON.stringify(api.expandedValue)}
+
+ {#if label} +

+ {@render label()} +

+ {/if} +
- {#if treeCollection.rootNode.children} - {#each treeCollection.rootNode.children as node, index} - {@render treeNode({ node, indexPath: [index] })} - {/each} + {#if children} + {@render children()} {/if}
- -{#snippet treeNode(nodeProps: tree.NodeProps)} - {#if api.getNodeState(nodeProps).isBranch} - -
- - - - - {#if api.expandedValue.includes(nodeProps.node.id)} -
-
-
- {#if nodeProps.node.children} - {#each nodeProps.node.children as childNode, index} - {@render treeNode({ node: childNode, indexPath: [...nodeProps.indexPath, index] })} - {/each} - {/if} -
-
- {/if} -
- {:else} - - {/if} -{/snippet} - {#snippet chevron()} { +// throw new Error('This default value should never be used.'); +// }; + +// @ts-expect-error default value requirement is annoying +export const [setTreeContext, getTreeContext] = createContext({}); + +export const [setNodeContext, getNodeContext] = createContext(undefined); diff --git a/packages/skeleton-svelte/src/components/TreeView/index.ts b/packages/skeleton-svelte/src/components/TreeView/index.ts new file mode 100644 index 0000000000..091748a8e7 --- /dev/null +++ b/packages/skeleton-svelte/src/components/TreeView/index.ts @@ -0,0 +1,5 @@ +import TreeView from './TreeView.svelte'; +import Branch from './TreeBranch.svelte'; +import Item from './TreeItem.svelte'; + +export default /* @__PURE__ */ Object.assign(TreeView, { Branch, Item }); diff --git a/packages/skeleton-svelte/src/components/TreeView/types.ts b/packages/skeleton-svelte/src/components/TreeView/types.ts index a1de08f320..45138ac9a0 100644 --- a/packages/skeleton-svelte/src/components/TreeView/types.ts +++ b/packages/skeleton-svelte/src/components/TreeView/types.ts @@ -1,3 +1,4 @@ +import type { PropTypes } from '@zag-js/svelte'; import * as tree from '@zag-js/tree-view'; import type { Snippet } from 'svelte'; import type { SlideParams } from 'svelte/transition'; @@ -9,7 +10,7 @@ export interface TreeViewProps extends Omit { animationConfig?: SlideParams; // Data --- - collection: TreeViewCollection; + // collection?: CollectionNode[]; // View --- /** Set base styles. */ @@ -111,12 +112,46 @@ export interface TreeViewProps extends Omit { itemIcon?: Snippet; /** The icon to indicate if the node children are expanded. */ branchIndicator?: Snippet; + + children?: Snippet; + label?: Snippet; } export interface CollectionNode { id: string; value: string; children?: CollectionNode[]; + indexPath: number[]; +} + +// export type TreeViewCollection = CollectionNode[]; + +export interface NodeSnippets { + control?: Snippet; + content?: Snippet; + item?: Snippet; +} + +// export interface TreeData { +// nodes: TreeViewCollection; +// nodeMap: Map; +// snippetMap: Map; +// } + +export type SnippetTypes = 'item' | 'control' | 'content'; + +export interface TreeViewContext extends TreeViewProps { + api?: ReturnType>; + animationConfig?: SlideParams; + // treeData: TreeData; + registerNode: (node: CollectionNode) => number[]; + unregisterNode: (nodeId: string) => void; + updateNode: (node: CollectionNode) => void; } -export type TreeViewCollection = CollectionNode[]; +export interface NodeContext { + node: CollectionNode; + registerChild: (child: CollectionNode) => number[]; + unregisterChild: (childId: string) => void; + updateChild: (child: CollectionNode) => void; +} diff --git a/packages/skeleton-svelte/src/index.ts b/packages/skeleton-svelte/src/index.ts index e2b463dd17..aa5307f70b 100644 --- a/packages/skeleton-svelte/src/index.ts +++ b/packages/skeleton-svelte/src/index.ts @@ -22,7 +22,7 @@ export { default as TagsInput } from './components/TagsInput/TagsInput.svelte'; export { default as Toaster } from './components/Toast/Toaster.svelte'; export { createToaster } from './components/Toast/create-toaster.js'; export { default as Rating } from './components/Rating/index.js'; -export { default as TreeView } from './components/TreeView/TreeView.svelte'; +export { default as TreeView } from './components/TreeView/index.js'; // Types export type { FileUploadApi } from './components/FileUpload/types.js'; diff --git a/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte index 8e4e7a769d..7868cd17fc 100644 --- a/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte +++ b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte @@ -1,28 +1,27 @@
@@ -31,6 +30,18 @@
+ console.log(e)}> + + and this would be child item + do yo mind? + + + + + + +
+
From 4424d4767861c91c76f53c42b0002e2a34722c9f Mon Sep 17 00:00:00 2001 From: dev-viinz <42003446+dev-viinz@users.noreply.github.com> Date: Fri, 18 Jul 2025 22:12:43 +0200 Subject: [PATCH 21/30] feat: first working template driven approach --- .../src/components/TreeView/TreeBranch.svelte | 46 +++--- .../src/components/TreeView/TreeItem.svelte | 42 +++--- .../src/components/TreeView/TreeNode.svelte | 71 ++-------- .../src/components/TreeView/TreeView.svelte | 133 +++--------------- .../src/components/TreeView/types.ts | 24 +++- .../routes/components/tree-view/+page.svelte | 2 +- 6 files changed, 90 insertions(+), 228 deletions(-) diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeBranch.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeBranch.svelte index 4151555c66..f54553bf98 100644 --- a/packages/skeleton-svelte/src/components/TreeView/TreeBranch.svelte +++ b/packages/skeleton-svelte/src/components/TreeView/TreeBranch.svelte @@ -1,42 +1,32 @@ - + + {#snippet content({ node: nodeData, nodeProps })} - 
{JSON.stringify(nodeProps, undefined, 2)}
+ {#key treeContext.api?.getVisibleNodes()} + {JSON.stringify(treeContext.api?.expandedValue)} + {/key}
+ import * as tree from '@zag-js/tree-view'; import type { Snippet } from 'svelte'; import { getTreeContext } from './context.js'; import TreeNode from './TreeNode.svelte'; + import { normalizeProps } from '@zag-js/svelte'; + import type { TreeItemProps } from './types.js'; - interface Props { - id: string; - value: string; - disabled?: boolean; - children?: Snippet; - // trigger?: import('svelte').Snippet< - // [ - // { - // nodeData: any; - // } - // ] - // >; - } - - let { id, value, disabled = false, children }: Props = $props(); + let { id, value, disabled = false, children }: TreeItemProps = $props(); const treeContext = getTreeContext(); - - {#snippet content({ node: nodeData, nodeProps })} - + + + {#snippet content({ node, nodeProps })} + {#if node != null} + + {/if} {/snippet} diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte index d3909aa1e6..714b262933 100644 --- a/packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte +++ b/packages/skeleton-svelte/src/components/TreeView/TreeNode.svelte @@ -1,60 +1,10 @@ {#if isRegistered} diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte index 22f59781d6..88d7c64e17 100644 --- a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte +++ b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte @@ -1,10 +1,10 @@ -
{JSON.stringify(Array.from(nodes.values()), undefined, 2)}
-
{JSON.stringify(api.expandedValue)}
+ +
{JSON.stringify(api, undefined, 2)}
+ + - + + -
+
{#if label} -

+

{@render label()}

{/if} -
+
{#if children} {@render children()} {/if} diff --git a/packages/skeleton-svelte/src/components/TreeView/types.ts b/packages/skeleton-svelte/src/components/TreeView/types.ts index 45138ac9a0..626766e49b 100644 --- a/packages/skeleton-svelte/src/components/TreeView/types.ts +++ b/packages/skeleton-svelte/src/components/TreeView/types.ts @@ -1,4 +1,5 @@ import type { PropTypes } from '@zag-js/svelte'; +import type { NodeProps } from '@zag-js/tree-view'; import * as tree from '@zag-js/tree-view'; import type { Snippet } from 'svelte'; import type { SlideParams } from 'svelte/transition'; @@ -117,6 +118,27 @@ export interface TreeViewProps extends Omit { label?: Snippet; } +export interface TreeBranchProps { + id: string; + value: string; + disabled?: boolean; + children: Snippet; +} + +export interface TreeItemProps { + id: string; + value: string; + disabled?: boolean; + children?: Snippet; +} + +export interface TreeNodeProps { + id: string; + value: string; + disabled?: boolean; + content: Snippet<[{ node: CollectionNode; nodeProps: NodeProps }]>; +} + export interface CollectionNode { id: string; value: string; @@ -141,7 +163,7 @@ export interface NodeSnippets { export type SnippetTypes = 'item' | 'control' | 'content'; export interface TreeViewContext extends TreeViewProps { - api?: ReturnType>; + api: ReturnType> | undefined; animationConfig?: SlideParams; // treeData: TreeData; registerNode: (node: CollectionNode) => number[]; diff --git a/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte index 7868cd17fc..535d1a72f2 100644 --- a/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte +++ b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte @@ -33,7 +33,7 @@ console.log(e)}> and this would be child item - do yo mind? + ? From 16966fe0c9159e5af9394ec5156fb79bdba4ce1e Mon Sep 17 00:00:00 2001 From: dev-viinz <42003446+dev-viinz@users.noreply.github.com> Date: Fri, 18 Jul 2025 23:12:59 +0200 Subject: [PATCH 22/30] chore: cleanup debugging mess --- .../src/components/TreeView/TreeBranch.svelte | 27 +-------- .../src/components/TreeView/TreeItem.svelte | 8 +-- .../src/components/TreeView/TreeNode.svelte | 9 ++- .../src/components/TreeView/TreeView.svelte | 34 ++++++------ .../src/components/TreeView/types.ts | 16 +++--- packages/skeleton-svelte/src/index.ts | 2 +- packages/skeleton/src/utilities/tree-view.css | 4 +- .../routes/components/tree-view/+page.svelte | 55 +++++++------------ 8 files changed, 56 insertions(+), 99 deletions(-) diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeBranch.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeBranch.svelte index f54553bf98..a611c751d5 100644 --- a/packages/skeleton-svelte/src/components/TreeView/TreeBranch.svelte +++ b/packages/skeleton-svelte/src/components/TreeView/TreeBranch.svelte @@ -1,30 +1,14 @@ - - + {#snippet content({ node: nodeData, nodeProps })}
@@ -48,9 +32,6 @@ {nodeData.value} - {#key treeContext.api?.getVisibleNodes()} - {JSON.stringify(treeContext.api?.expandedValue)} - {/key}
-
+
{@render children()}
diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeItem.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeItem.svelte index 96e823da51..002840d37c 100644 --- a/packages/skeleton-svelte/src/components/TreeView/TreeItem.svelte +++ b/packages/skeleton-svelte/src/components/TreeView/TreeItem.svelte @@ -1,18 +1,14 @@ - - + {#snippet content({ node, nodeProps })} {#if node != null} + +

Tree View

From 7fc0a6693b00dc6ea2e0f4b3011c0fb46f77ec91 Mon Sep 17 00:00:00 2001 From: dev-viinz <42003446+dev-viinz@users.noreply.github.com> Date: Fri, 18 Jul 2025 23:38:22 +0200 Subject: [PATCH 24/30] chore: lint --- .../skeleton-svelte/src/components/TreeView/TreeView.svelte | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte index 5b10962f2f..7cd6d7535c 100644 --- a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte +++ b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte @@ -57,8 +57,6 @@ branchIcon, itemIcon, branchIndicator, - onSelectionChange, - onExpandedChange, children, label, // Zag From 62ab25908a733086a4daac25ef99cd872d7084b3 Mon Sep 17 00:00:00 2001 From: dev-viinz <42003446+dev-viinz@users.noreply.github.com> Date: Sat, 19 Jul 2025 01:51:39 +0200 Subject: [PATCH 25/30] chore: multiple support --- .../src/components/TreeView/TreeView.svelte | 8 -------- .../src/routes/components/tree-view/+page.svelte | 13 ++++++++----- 2 files changed, 8 insertions(+), 13 deletions(-) diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte index 7cd6d7535c..8b3dc3d702 100644 --- a/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte +++ b/packages/skeleton-svelte/src/components/TreeView/TreeView.svelte @@ -4,11 +4,6 @@ import type { CollectionNode, TreeViewContext, TreeViewProps } from './types.js'; import { setTreeContext } from './context.js'; - // interface Props { - // children?: import('svelte').Snippet; - // label?: import('svelte').Snippet; - // } - const { // Indent indentAmount = 'indent-guide', @@ -17,8 +12,6 @@ indicatorTransition = 'transition-transform', // Animation animationConfig = { duration: 200 }, - // Data - // collection, // Root base = 'flex flex-col w-fit', background = '', @@ -121,7 +114,6 @@ }; const updateNode = (node: CollectionNode) => { - console.log('this is the update', node); if (nodes.has(node.id)) { nodes.set(node.id, node); nodes = new Map(nodes); diff --git a/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte index 3c4fc439ed..b226674afe 100644 --- a/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte +++ b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte @@ -24,16 +24,15 @@ // ]; - - -

Tree View

+ +
- (api = treeViewApi)}> + (api = treeViewApi)}> @@ -45,12 +44,16 @@
+
+

Selected values:

+ 
{JSON.stringify(api?.selectedValue, null, 2)}
+

Expanded values:

{JSON.stringify(api?.expandedValue, null, 2)}
-

Collection

+

Collection:

{JSON.stringify(collection, null, 2)}
From 0a42145b9172f0f4c004af3efe9b7ecde5c8176d Mon Sep 17 00:00:00 2001 From: dev-viinz <42003446+dev-viinz@users.noreply.github.com> Date: Sat, 19 Jul 2025 02:19:00 +0200 Subject: [PATCH 26/30] chore: improve example --- .../src/routes/components/tree-view/+page.svelte | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte index b226674afe..3d5acc91a4 100644 --- a/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte +++ b/playgrounds/skeleton-svelte/src/routes/components/tree-view/+page.svelte @@ -1,5 +1,7 @@ + + {#snippet content({ node: nodeData, nodeProps })} @@ -19,6 +21,7 @@ data-testid="tree-control" type="button" > + + {#if treeContext.branchIcon}
{@render treeContext.branchIcon()}
{/if} + {nodeData.value} @@ -44,7 +49,9 @@ {...treeContext.api?.getBranchContentProps(nodeProps)} data-testid="tree-content" > +
+
{@render children()}
diff --git a/packages/skeleton-svelte/src/components/TreeView/TreeItem.svelte b/packages/skeleton-svelte/src/components/TreeView/TreeItem.svelte index 4296158c7d..01d9fb7931 100644 --- a/packages/skeleton-svelte/src/components/TreeView/TreeItem.svelte +++ b/packages/skeleton-svelte/src/components/TreeView/TreeItem.svelte @@ -8,20 +8,25 @@ const treeContext = getTreeContext(); + + {#snippet content({ node, nodeProps })} {#if node != null} +