Skip to content

Commit

Permalink
refactor(tree-view): id -> value
Browse files Browse the repository at this point in the history
  • Loading branch information
@segunadebayo
segunadebayo committed Apr 20, 2024
1 parent d5c5133 commit c7b781c
Show file tree
Hide file tree
Showing 12 changed files with 290 additions and 291 deletions.
8 changes: 8 additions & 0 deletions .changeset/green-eagles-speak.md
View file
@@ -0,0 +1,8 @@
---
"@zag-js/tree-view": minor
---

- Rename some properties for better consistency:
- `id` -> `value`
- `expandedIds` -> `expandedValue`
- `selectedIds` -> `selectedValue`
52 changes: 26 additions & 26 deletions examples/next-ts/pages/tree-view.tsx
View file
Expand Up @@ -21,51 +21,51 @@ export default function Page() {
<div {...api.rootProps}>
<h3 {...api.labelProps}>My Documents</h3>
<div>
<button onClick={() => api.collapseAll()}>Collapse All</button>
<button onClick={() => api.expandAll()}>Expand All</button>
<button onClick={() => api.collapse()}>Collapse All</button>
<button onClick={() => api.expand()}>Expand All</button>
<span> - </span>
<button onClick={() => api.selectAll()}>Select All</button>
<button onClick={() => api.deselectAll()}>Deselect All</button>
<button onClick={() => api.select()}>Select All</button>
<button onClick={() => api.deselect()}>Deselect All</button>
</div>

<ul {...api.treeProps}>
<li {...api.getBranchProps({ id: "node_modules", depth: 1 })}>
<div {...api.getBranchControlProps({ id: "node_modules", depth: 1 })}>
<span {...api.getBranchTextProps({ id: "node_modules", depth: 1 })}> 📂 node_modules</span>
<li {...api.getBranchProps({ value: "node_modules", depth: 1 })}>
<div {...api.getBranchControlProps({ value: "node_modules", depth: 1 })}>
<span {...api.getBranchTextProps({ value: "node_modules", depth: 1 })}> 📂 node_modules</span>
</div>

<ul {...api.getBranchContentProps({ id: "node_modules", depth: 1 })}>
<li {...api.getItemProps({ id: "node_modules/zag-js", depth: 2 })}>📄 zag-js</li>
<li {...api.getItemProps({ id: "node_modules/pandacss", depth: 2 })}>📄 panda</li>
<ul {...api.getBranchContentProps({ value: "node_modules", depth: 1 })}>
<li {...api.getItemProps({ value: "node_modules/zag-js", depth: 2 })}>📄 zag-js</li>
<li {...api.getItemProps({ value: "node_modules/pandacss", depth: 2 })}>📄 panda</li>

<li {...api.getBranchProps({ id: "node_modules/@types", depth: 2 })}>
<div {...api.getBranchControlProps({ id: "node_modules/@types", depth: 2 })}>
<span {...api.getBranchTextProps({ id: "node_modules/@types", depth: 2 })}> 📂 @types</span>
<li {...api.getBranchProps({ value: "node_modules/@types", depth: 2 })}>
<div {...api.getBranchControlProps({ value: "node_modules/@types", depth: 2 })}>
<span {...api.getBranchTextProps({ value: "node_modules/@types", depth: 2 })}> 📂 @types</span>
</div>

<ul {...api.getBranchContentProps({ id: "node_modules/@types", depth: 2 })}>
<li {...api.getItemProps({ id: "node_modules/@types/react", depth: 3 })}>📄 react</li>
<li {...api.getItemProps({ id: "node_modules/@types/react-dom", depth: 3 })}>📄 react-dom</li>
<ul {...api.getBranchContentProps({ value: "node_modules/@types", depth: 2 })}>
<li {...api.getItemProps({ value: "node_modules/@types/react", depth: 3 })}>📄 react</li>
<li {...api.getItemProps({ value: "node_modules/@types/react-dom", depth: 3 })}>📄 react-dom</li>
</ul>
</li>
</ul>
</li>

<li {...api.getBranchProps({ id: "src", depth: 1 })}>
<div {...api.getBranchControlProps({ id: "src", depth: 1 })}>
<span {...api.getBranchTextProps({ id: "src", depth: 1 })}> 📂 src</span>
<li {...api.getBranchProps({ value: "src", depth: 1 })}>
<div {...api.getBranchControlProps({ value: "src", depth: 1 })}>
<span {...api.getBranchTextProps({ value: "src", depth: 1 })}> 📂 src</span>
</div>

<ul {...api.getBranchContentProps({ id: "src", depth: 1 })}>
<li {...api.getItemProps({ id: "src/app.tsx", depth: 2 })}>📄 app.tsx</li>
<li {...api.getItemProps({ id: "src/index.ts", depth: 2 })}>📄 index.ts</li>
<ul {...api.getBranchContentProps({ value: "src", depth: 1 })}>
<li {...api.getItemProps({ value: "src/app.tsx", depth: 2 })}>📄 app.tsx</li>
<li {...api.getItemProps({ value: "src/index.ts", depth: 2 })}>📄 index.ts</li>
</ul>
</li>

<li {...api.getItemProps({ id: "panda.config", depth: 1 })}>📄 panda.config.ts</li>
<li {...api.getItemProps({ id: "package.json", depth: 1 })}>📄 package.json</li>
<li {...api.getItemProps({ id: "renovate.json", depth: 1 })}>📄 renovate.json</li>
<li {...api.getItemProps({ id: "readme.md", depth: 1 })}>📄 README.md</li>
<li {...api.getItemProps({ value: "panda.config", depth: 1 })}>📄 panda.config.ts</li>
<li {...api.getItemProps({ value: "package.json", depth: 1 })}>📄 package.json</li>
<li {...api.getItemProps({ value: "renovate.json", depth: 1 })}>📄 renovate.json</li>
<li {...api.getItemProps({ value: "readme.md", depth: 1 })}>📄 README.md</li>
</ul>
</div>
</main>
Expand Down
52 changes: 26 additions & 26 deletions examples/nuxt-ts/pages/tree-view.vue
View file
Expand Up @@ -17,51 +17,51 @@ const api = computed(() => tree.connect(state.value, send, normalizeProps))
<div v-bind="api.rootProps">
<h3 v-bind="api.labelProps">My Documents</h3>
<div>
<button @click="api.collapseAll()">Collapse All</button>
<button @click="api.expandAll()">Expand All</button>
<button @click="api.collapse()">Collapse All</button>
<button @click="api.expand()">Expand All</button>
<span> - </span>
<button @click="api.selectAll()">Select All</button>
<button @click="api.deselectAll()">Deselect All</button>
<button @click="api.select()">Select All</button>
<button @click="api.deselect()">Deselect All</button>
</div>

<ul v-bind="api.treeProps">
<li v-bind="api.getBranchProps({ id: 'node_modules', depth: 1 })">
<div v-bind="api.getBranchControlProps({ id: 'node_modules', depth: 1 })">
<span v-bind="api.getBranchTextProps({ id: 'node_modules', depth: 1 })"> 📂 node_modules</span>
<li v-bind="api.getBranchProps({ value: 'node_modules', depth: 1 })">
<div v-bind="api.getBranchControlProps({ value: 'node_modules', depth: 1 })">
<span v-bind="api.getBranchTextProps({ value: 'node_modules', depth: 1 })"> 📂 node_modules</span>
</div>

<ul v-bind="api.getBranchContentProps({ id: 'node_modules', depth: 1 })">
<li v-bind="api.getItemProps({ id: 'node_modules/zag-js', depth: 2 })">📄 zag-js</li>
<li v-bind="api.getItemProps({ id: 'node_modules/pandacss', depth: 2 })">📄 panda</li>
<ul v-bind="api.getBranchContentProps({ value: 'node_modules', depth: 1 })">
<li v-bind="api.getItemProps({ value: 'node_modules/zag-js', depth: 2 })">📄 zag-js</li>
<li v-bind="api.getItemProps({ value: 'node_modules/pandacss', depth: 2 })">📄 panda</li>

<li v-bind="api.getBranchProps({ id: 'node_modules/@types', depth: 2 })">
<div v-bind="api.getBranchControlProps({ id: 'node_modules/@types', depth: 2 })">
<span v-bind="api.getBranchTextProps({ id: 'node_modules/@types', depth: 2 })"> 📂 @types</span>
<li v-bind="api.getBranchProps({ value: 'node_modules/@types', depth: 2 })">
<div v-bind="api.getBranchControlProps({ value: 'node_modules/@types', depth: 2 })">
<span v-bind="api.getBranchTextProps({ value: 'node_modules/@types', depth: 2 })"> 📂 @types</span>
</div>

<ul v-bind="api.getBranchContentProps({ id: 'node_modules/@types', depth: 2 })">
<li v-bind="api.getItemProps({ id: 'node_modules/@types/react', depth: 3 })">📄 react</li>
<li v-bind="api.getItemProps({ id: 'node_modules/@types/react-dom', depth: 3 })">📄 react-dom</li>
<ul v-bind="api.getBranchContentProps({ value: 'node_modules/@types', depth: 2 })">
<li v-bind="api.getItemProps({ value: 'node_modules/@types/react', depth: 3 })">📄 react</li>
<li v-bind="api.getItemProps({ value: 'node_modules/@types/react-dom', depth: 3 })">📄 react-dom</li>
</ul>
</li>
</ul>
</li>

<li v-bind="api.getBranchProps({ id: 'src', depth: 1 })">
<div v-bind="api.getBranchControlProps({ id: 'src', depth: 1 })">
<span v-bind="api.getBranchTextProps({ id: 'src', depth: 1 })"> 📂 src</span>
<li v-bind="api.getBranchProps({ value: 'src', depth: 1 })">
<div v-bind="api.getBranchControlProps({ value: 'src', depth: 1 })">
<span v-bind="api.getBranchTextProps({ value: 'src', depth: 1 })"> 📂 src</span>
</div>

<ul v-bind="api.getBranchContentProps({ id: 'src', depth: 1 })">
<li v-bind="api.getItemProps({ id: 'src/app.tsx', depth: 2 })">📄 app.tsx</li>
<li v-bind="api.getItemProps({ id: 'src/index.ts', depth: 2 })">📄 index.ts</li>
<ul v-bind="api.getBranchContentProps({ value: 'src', depth: 1 })">
<li v-bind="api.getItemProps({ value: 'src/app.tsx', depth: 2 })">📄 app.tsx</li>
<li v-bind="api.getItemProps({ value: 'src/index.ts', depth: 2 })">📄 index.ts</li>
</ul>
</li>

<li v-bind="api.getItemProps({ id: 'panda.config', depth: 1 })">📄 panda.config.ts</li>
<li v-bind="api.getItemProps({ id: 'package.json', depth: 1 })">📄 package.json</li>
<li v-bind="api.getItemProps({ id: 'renovate.json', depth: 1 })">📄 renovate.json</li>
<li v-bind="api.getItemProps({ id: 'readme.md', depth: 1 })">📄 README.md</li>
<li v-bind="api.getItemProps({ value: 'panda.config', depth: 1 })">📄 panda.config.ts</li>
<li v-bind="api.getItemProps({ value: 'package.json', depth: 1 })">📄 package.json</li>
<li v-bind="api.getItemProps({ value: 'renovate.json', depth: 1 })">📄 renovate.json</li>
<li v-bind="api.getItemProps({ value: 'readme.md', depth: 1 })">📄 README.md</li>
</ul>
</div>
</main>
Expand Down
52 changes: 26 additions & 26 deletions examples/solid-ts/src/pages/tree-view.tsx
View file
Expand Up @@ -21,51 +21,51 @@ export default function Page() {
<div {...api().rootProps}>
<h3 {...api().labelProps}>My Documents</h3>
<div>
<button onClick={() => api().collapseAll()}>Collapse All</button>
<button onClick={() => api().expandAll()}>Expand All</button>
<button onClick={() => api().collapse()}>Collapse All</button>
<button onClick={() => api().expand()}>Expand All</button>
<span> - </span>
<button onClick={() => api().selectAll()}>Select All</button>
<button onClick={() => api().deselectAll()}>Deselect All</button>
<button onClick={() => api().select()}>Select All</button>
<button onClick={() => api().deselect()}>Deselect All</button>
</div>

<ul {...api().treeProps}>
<li {...api().getBranchProps({ id: "node_modules", depth: 1 })}>
<div {...api().getBranchControlProps({ id: "node_modules", depth: 1 })}>
<span {...api().getBranchTextProps({ id: "node_modules", depth: 1 })}> 📂 node_modules</span>
<li {...api().getBranchProps({ value: "node_modules", depth: 1 })}>
<div {...api().getBranchControlProps({ value: "node_modules", depth: 1 })}>
<span {...api().getBranchTextProps({ value: "node_modules", depth: 1 })}> 📂 node_modules</span>
</div>

<ul {...api().getBranchContentProps({ id: "node_modules", depth: 1 })}>
<li {...api().getItemProps({ id: "node_modules/zag-js", depth: 2 })}>📄 zag-js</li>
<li {...api().getItemProps({ id: "node_modules/pandacss", depth: 2 })}>📄 panda</li>
<ul {...api().getBranchContentProps({ value: "node_modules", depth: 1 })}>
<li {...api().getItemProps({ value: "node_modules/zag-js", depth: 2 })}>📄 zag-js</li>
<li {...api().getItemProps({ value: "node_modules/pandacss", depth: 2 })}>📄 panda</li>

<li {...api().getBranchProps({ id: "node_modules/@types", depth: 2 })}>
<div {...api().getBranchControlProps({ id: "node_modules/@types", depth: 2 })}>
<span {...api().getBranchTextProps({ id: "node_modules/@types", depth: 2 })}> 📂 @types</span>
<li {...api().getBranchProps({ value: "node_modules/@types", depth: 2 })}>
<div {...api().getBranchControlProps({ value: "node_modules/@types", depth: 2 })}>
<span {...api().getBranchTextProps({ value: "node_modules/@types", depth: 2 })}> 📂 @types</span>
</div>

<ul {...api().getBranchContentProps({ id: "node_modules/@types", depth: 2 })}>
<li {...api().getItemProps({ id: "node_modules/@types/react", depth: 3 })}>📄 react</li>
<li {...api().getItemProps({ id: "node_modules/@types/react-dom", depth: 3 })}>📄 react-dom</li>
<ul {...api().getBranchContentProps({ value: "node_modules/@types", depth: 2 })}>
<li {...api().getItemProps({ value: "node_modules/@types/react", depth: 3 })}>📄 react</li>
<li {...api().getItemProps({ value: "node_modules/@types/react-dom", depth: 3 })}>📄 react-dom</li>
</ul>
</li>
</ul>
</li>

<li {...api().getBranchProps({ id: "src", depth: 1 })}>
<div {...api().getBranchControlProps({ id: "src", depth: 1 })}>
<span {...api().getBranchTextProps({ id: "src", depth: 1 })}> 📂 src</span>
<li {...api().getBranchProps({ value: "src", depth: 1 })}>
<div {...api().getBranchControlProps({ value: "src", depth: 1 })}>
<span {...api().getBranchTextProps({ value: "src", depth: 1 })}> 📂 src</span>
</div>

<ul {...api().getBranchContentProps({ id: "src", depth: 1 })}>
<li {...api().getItemProps({ id: "src/app.tsx", depth: 2 })}>📄 app.tsx</li>
<li {...api().getItemProps({ id: "src/index.ts", depth: 2 })}>📄 index.ts</li>
<ul {...api().getBranchContentProps({ value: "src", depth: 1 })}>
<li {...api().getItemProps({ value: "src/app.tsx", depth: 2 })}>📄 app.tsx</li>
<li {...api().getItemProps({ value: "src/index.ts", depth: 2 })}>📄 index.ts</li>
</ul>
</li>

<li {...api().getItemProps({ id: "panda.config", depth: 1 })}>📄 panda.config.ts</li>
<li {...api().getItemProps({ id: "package.json", depth: 1 })}>📄 package.json</li>
<li {...api().getItemProps({ id: "renovate.json", depth: 1 })}>📄 renovate.json</li>
<li {...api().getItemProps({ id: "readme.md", depth: 1 })}>📄 README.md</li>
<li {...api().getItemProps({ value: "panda.config", depth: 1 })}>📄 panda.config.ts</li>
<li {...api().getItemProps({ value: "package.json", depth: 1 })}>📄 package.json</li>
<li {...api().getItemProps({ value: "renovate.json", depth: 1 })}>📄 renovate.json</li>
<li {...api().getItemProps({ value: "readme.md", depth: 1 })}>📄 README.md</li>
</ul>
</div>
</main>
Expand Down

0 comments on commit c7b781c

Please sign in to comment.