@xen-orchestra/web-core 0.35.1 → 0.37.0

package/lib/{composables/tree.composable.md → packages/tree/README.md}

@@ -50,12 +50,13 @@ This option allows you to customize the label of the selected nodes.
 ## `LeafDefinition`
 
 ```ts
-new LeafDefinition(data)
-new LeafDefinition(data, options)
+new LeafDefinition(treeId, data)
+new LeafDefinition(treeId, data, options)
 ```
 
 |                         |       Required       | Type                                                 | Default                                 |                                                                                        |
 | ----------------------- | :------------------: | ---------------------------------------------------- | --------------------------------------- | -------------------------------------------------------------------------------------- |
+| `treeId`                |          ✓           | `string`                                             |                                         | identifier for tree this node belongs to                                               |
 | `data`                  |          ✓           | `TData`                                              |                                         | data to be stored in the node                                                          |
 | `options.discriminator` |                      | `string`                                             | `undefined`                             | discriminator for the node when you mix different data types (see Discriminator below) |
 | `options.predicate`     |                      | `(node: TreeNode) => boolean \| undefined`           | `undefined`                             | filter function (see Filtering below)                                                  |
@@ -66,7 +67,7 @@ new LeafDefinition(data, options)
 ### Example
 
 ```ts
-const definition = new LeafDefinition({ id: 1, label: 'John Doe', age: 30 })
+const definition = new LeafDefinition('users', { id: 1, label: 'John Doe', age: 30 })
 ```
 
 ## `BranchDefinition`
@@ -74,8 +75,8 @@ const definition = new LeafDefinition({ id: 1, label: 'John Doe', age: 30 })
 A `BranchDefinition` is very similar to a `LeafDefinition`, but it contains a collection of children definitions.
 
 ```ts
-new BranchDefinition(data, children)
-new BranchDefinition(data, options, children)
+new BranchDefinition(treeId, data, children)
+new BranchDefinition(treeId, data, options, children)
 ```
 
 |                            |     | Type                   | Default |                                                                  |
@@ -86,9 +87,9 @@ new BranchDefinition(data, options, children)
 ### Example
 
 ```ts
-const definition = new BranchDefinition({ id: 'smithes', name: 'The Smithes' }, [
-  new LeafDefinition({ id: 'jd-1', name: 'John Smith', age: 30 }),
-  new LeafDefinition({ id: 'jd-2', name: 'Jane Smith', age: 28 }),
+const definition = new BranchDefinition('users', { id: 'smithes', name: 'The Smithes' }, [
+  new LeafDefinition('users', { id: 'jd-1', name: 'John Smith', age: 30 }),
+  new LeafDefinition('users', { id: 'jd-2', name: 'Jane Smith', age: 28 }),
 ])
 ```
 
@@ -101,8 +102,8 @@ mix different types of nodes at the same collection depth.
 
 ```ts
 const definitions = [
-  new LeafDefinition({ id: 'jd-1', label: 'John Doe', age: 30 }),
-  new LeafDefinition({ id: 'rx-1', label: 'Rex', breed: 'Golden Retriever' }),
+  new LeafDefinition('family', { id: 'jd-1', label: 'John Doe', age: 30 }),
+  new LeafDefinition('family', { id: 'rx-1', label: 'Rex', breed: 'Golden Retriever' }),
 ]
 
 const { nodes } = useTree(definitions)
@@ -116,8 +117,8 @@ nodes.value.forEach(node => {
 
 ```ts
 const definitions = [
-  new LeafDefinition({ id: 'jd-1', label: 'John Doe', age: 30 }, { discriminator: 'person' }),
-  new LeafDefinition({ id: 'rx-1', label: 'Rex', breed: 'Golden Retriever' }, { discriminator: 'animal' }),
+  new LeafDefinition('family', { id: 'jd-1', label: 'John Doe', age: 30 }, { discriminator: 'person' }),
+  new LeafDefinition('family', { id: 'rx-1', label: 'Rex', breed: 'Golden Retriever' }, { discriminator: 'animal' }),
 ]
 
 const { nodes } = useTree(definitions)
@@ -138,8 +139,8 @@ the `isBranch` property will serve the same purpose.
 
 ```ts
 const definitions = [
-  new LeafDefinition({ id: 'jd-1', label: 'John Doe', age: 30 }),
-  new BranchDefinition({ id: 'dogs', label: 'Dogs', legs: 4 }, [
+  new LeafDefinition('family', { id: 'jd-1', label: 'John Doe', age: 30 }),
+  new BranchDefinition('family', { id: 'dogs', label: 'Dogs', legs: 4 }, [
     /* ... */
   ]),
 ]
@@ -254,7 +255,9 @@ const families = [
 You can use the `defineTree` helper this way:
 
 ```ts
-const definitions = defineTree(families, family => defineTree(family.members, member => defineTree(member.animals)))
+const definitions = defineTree('family', families, family =>
+  defineTree('member', family.members, member => defineTree('animal', member.animals))
+)
 ```
 
 This is the equivalent of the following code:
@@ -263,12 +266,14 @@ This is the equivalent of the following code:
 const definitions = families.map(
   family =>
     new BranchDefinition(
+      'family',
       family,
       family.members.map(
         member =>
           new BranchDefinition(
+            'member',
             member,
-            member.animals.map(animal => new LeafDefinition(animal))
+            member.animals.map('animal', animal => new LeafDefinition(animal))
           )
       )
     )
@@ -287,12 +292,12 @@ const entries = [
   { uuid: 'jd-2', name: 'Jane Doe' },
 ]
 
-const definitionsA = defineTree(entries, {
+const definitionsA = defineTree('user', entries, {
   getId: 'uuid',
   getLabel: 'name',
 })
 
-const definitionsB = defineTree(entries, {
+const definitionsB = defineTree('user', entries, {
   getId: entry => entry.uuid,
   getLabel: entry => entry.name,
 })
@@ -394,8 +399,8 @@ Here are the rules to determine whether a node is visible or not.
 </template>
 
 <script lang="ts" setup>
-  const familyDefinitions = defineTree(families, ({ members }) =>
-    defineTree(members, ({ animals }) => defineTree(animals))
+  const familyDefinitions = defineTree('family', families, ({ members }) =>
+    defineTree('member', members, ({ animals }) => defineTree('animal', animals))
   )
 
   const { nodes } = useTree(familyDefinitions)
@@ -448,7 +453,7 @@ Here are the rules to determine whether a node is visible or not.
 </template>
 
 <script lang="ts" setup>
-  const definitions = defineTree(families, ({ members }) => defineTree(members))
+  const definitions = defineTree('family', families, ({ members }) => defineTree('member', members))
 
   const { nodes } = useTree(definitions, { allowMultiSelect: true })
 </script>
@@ -517,8 +522,8 @@ Here are the rules to determine whether a node is visible or not.
     return !filterValue ? undefined : label.toLocaleLowerCase().includes(filterValue)
   }
 
-  const definitions = defineTree(families, { predicate }, ({ members }) =>
-    defineTree(members, { predicate }, ({ animals }) => defineTree(animals, { predicate }))
+  const definitions = defineTree('family', families, { predicate }, ({ members }) =>
+    defineTree('member', members, { predicate }, ({ animals }) => defineTree('animal', animals, { predicate }))
   )
 
   const { nodes } = useTree(definitions, { expand: false })

package/lib/{composables → packages}/tree/branch-definition.ts

@@ -1,5 +1,5 @@
-import { TreeNodeDefinitionBase } from '@core/composables/tree/tree-node-definition-base'
-import type { TreeNodeDefinition, TreeNodeOptions } from '@core/composables/tree/types'
+import { TreeNodeDefinitionBase } from '@core/packages/tree/tree-node-definition-base'
+import type { TreeNodeDefinition, TreeNodeOptions } from '@core/packages/tree/types'
 
 export class BranchDefinition<
   TData extends object = any,
@@ -9,8 +9,13 @@ export class BranchDefinition<
   readonly isBranch = true
   children: TChildDefinition[]
 
-  constructor(data: TData, options: TreeNodeOptions<TData, TDiscriminator>, children: TChildDefinition[]) {
-    super(data, options)
+  constructor(
+    treeId: string,
+    data: TData,
+    options: TreeNodeOptions<TData, TDiscriminator>,
+    children: TChildDefinition[]
+  ) {
+    super(treeId, data, options)
 
     this.children = children
   }

package/lib/{composables → packages}/tree/branch.ts

@@ -1,11 +1,5 @@
-import { TreeNodeBase } from '@core/composables/tree/tree-node-base'
-import type {
-  BranchStatuses,
-  ChildTreeGetter,
-  TreeContext,
-  TreeNode,
-  TreeNodeOptions,
-} from '@core/composables/tree/types'
+import { TreeNodeBase } from '@core/packages/tree/tree-node-base'
+import type { BranchStatuses, ChildTreeGetter, TreeContext, TreeNode, TreeNodeOptions } from '@core/packages/tree/types'
 
 export class Branch<
   TData extends object = any,
@@ -16,6 +10,7 @@ export class Branch<
   readonly rawChildren: TChildNode[]
 
   constructor(
+    treeId: string,
     data: TData,
     parent: Branch | undefined,
     context: TreeContext,
@@ -23,7 +18,7 @@ export class Branch<
     options: TreeNodeOptions<TData, TDiscriminator> | undefined,
     getChildTree: ChildTreeGetter<TData, TChildNode, TDiscriminator>
   ) {
-    super(data, parent, context, depth, options)
+    super(treeId, data, parent, context, depth, options)
     this.rawChildren = getChildTree(this)
   }
 
@@ -48,7 +43,7 @@ export class Branch<
   }
 
   get isExcluded() {
-    if (this.parent?.isExpanded === false) {
+    if (this.parent?.isCollapsed === true) {
       return true
     }
 
@@ -59,8 +54,8 @@ export class Branch<
     return this.failsFilterDownwards
   }
 
-  get isExpanded() {
-    return this.context.expandedIds.has(this.id) || this.passesFilterDownwards || this.passesFilterUpwards
+  get isCollapsed() {
+    return this.context.collapsedIds.has(this.id)
   }
 
   get areChildrenFullySelected(): boolean {
@@ -92,7 +87,7 @@ export class Branch<
       matches: this.passesFilter === true,
       'selected-partial': this.context.allowMultiSelect && this.areChildrenPartiallySelected,
       'selected-full': this.context.allowMultiSelect && this.areChildrenFullySelected,
-      expanded: this.isExpanded,
+      collapsed: this.isCollapsed,
     }
   }
 
@@ -101,21 +96,21 @@ export class Branch<
     return this.areChildrenFullySelected ? 'all' : this.areChildrenPartiallySelected ? 'some' : 'none'
   }
 
-  toggleExpand(forcedValue?: boolean, recursive?: boolean) {
-    const nextExpanded = forcedValue ?? !this.isExpanded
+  toggleCollapse(forcedValue?: boolean, recursive?: boolean) {
+    const nextCollapsed = forcedValue ?? !this.isCollapsed
 
-    if (nextExpanded) {
-      this.context.expandedIds.add(this.id)
+    if (nextCollapsed) {
+      this.context.collapsedIds.add(this.id)
     } else {
-      this.context.expandedIds.delete(this.id)
+      this.context.collapsedIds.delete(this.id)
     }
 
-    const shouldPropagate = recursive ?? !nextExpanded
+    const shouldPropagate = recursive ?? nextCollapsed
 
     if (shouldPropagate) {
       this.rawChildren.forEach(child => {
         if (child.isBranch) {
-          child.toggleExpand(nextExpanded, recursive)
+          child.toggleCollapse(nextCollapsed, recursive)
         }
       })
     }

package/lib/{composables → packages}/tree/build-nodes.ts

@@ -1,6 +1,6 @@
-import { Branch } from '@core/composables/tree/branch'
-import { Leaf } from '@core/composables/tree/leaf'
-import type { DefinitionToTreeNode, TreeContext, TreeNode, TreeNodeDefinition } from '@core/composables/tree/types'
+import { Branch } from '@core/packages/tree/branch'
+import { Leaf } from '@core/packages/tree/leaf'
+import type { DefinitionToTreeNode, TreeContext, TreeNode, TreeNodeDefinition } from '@core/packages/tree/types'
 
 export function buildNodes<TDefinition extends TreeNodeDefinition, TTreeNode extends DefinitionToTreeNode<TDefinition>>(
   definitions: TDefinition[],
@@ -9,10 +9,10 @@ export function buildNodes<TDefinition extends TreeNodeDefinition, TTreeNode ext
   function create(definitions: TreeNodeDefinition[], parent: Branch | undefined, depth: number): TreeNode[] {
     return definitions.map(definition =>
       definition.isBranch
-        ? new Branch(definition.data, parent, context, depth, definition.options, thisBranch =>
+        ? new Branch(definition.treeId, definition.data, parent, context, depth, definition.options, thisBranch =>
             create(definition.children, thisBranch, depth + 1)
           )
-        : new Leaf(definition.data, parent, context, depth, definition.options)
+        : new Leaf(definition.treeId, definition.data, parent, context, depth, definition.options)
     )
   }
 

package/lib/{composables → packages}/tree/define-branch.ts

@@ -1,17 +1,21 @@
-import { BranchDefinition } from '@core/composables/tree/branch-definition'
-import type { Identifiable, Labeled, TreeNodeDefinition, TreeNodeOptions } from '@core/composables/tree/types'
+import { BranchDefinition } from '@core/packages/tree/branch-definition'
+import type { Identifiable, Labeled, TreeNodeDefinition, TreeNodeOptions } from '@core/packages/tree/types'
 
 export function defineBranch<
   TData extends Identifiable & Labeled,
   TChildDefinition extends TreeNodeDefinition,
   const TDiscriminator,
->(data: TData, children: TChildDefinition[]): BranchDefinition<TData, TChildDefinition, TDiscriminator>
+>(treeId: string, data: TData, children: TChildDefinition[]): BranchDefinition<TData, TChildDefinition, TDiscriminator>
+
 export function defineBranch<TData extends object, TChildDefinition extends TreeNodeDefinition, const TDiscriminator>(
+  treeId: string,
   data: TData,
   options: TreeNodeOptions<TData, TDiscriminator>,
   children: TChildDefinition[]
 ): BranchDefinition<TData, TChildDefinition, TDiscriminator>
+
 export function defineBranch<TData extends object, TChildDefinition extends TreeNodeDefinition, const TDiscriminator>(
+  treeId: string,
   data: TData,
   optionsOrChildren: TreeNodeOptions<TData, TDiscriminator> | TChildDefinition[],
   childrenOrNone?: TChildDefinition[]
@@ -19,5 +23,5 @@ export function defineBranch<TData extends object, TChildDefinition extends Tree
   const options = Array.isArray(optionsOrChildren) ? ({} as TreeNodeOptions<TData, TDiscriminator>) : optionsOrChildren
   const children = Array.isArray(optionsOrChildren) ? optionsOrChildren : childrenOrNone!
 
-  return new BranchDefinition(data, options, children)
+  return new BranchDefinition(treeId, data, options, children)
 }

package/lib/{composables → packages}/tree/define-leaf.ts

@@ -1,16 +1,21 @@
-import { LeafDefinition } from '@core/composables/tree/leaf-definition'
-import type { Identifiable, Labeled, TreeNodeOptions } from '@core/composables/tree/types'
+import { LeafDefinition } from '@core/packages/tree/leaf-definition'
+import type { Identifiable, Labeled, TreeNodeOptions } from '@core/packages/tree/types'
 
 export function defineLeaf<TData extends Identifiable & Labeled, const TDiscriminator>(
+  treeId: string,
   data: TData
 ): LeafDefinition<TData, TDiscriminator>
+
 export function defineLeaf<TData extends object, const TDiscriminator>(
+  treeId: string,
   data: TData,
   options: TreeNodeOptions<TData, TDiscriminator>
 ): LeafDefinition<TData, TDiscriminator>
+
 export function defineLeaf<TData extends object, const TDiscriminator>(
+  treeId: string,
   data: TData,
   options?: TreeNodeOptions<TData, TDiscriminator>
 ): LeafDefinition<TData, TDiscriminator> {
-  return new LeafDefinition(data, options ?? ({} as TreeNodeOptions<TData, TDiscriminator>))
+  return new LeafDefinition(treeId, data, options ?? ({} as TreeNodeOptions<TData, TDiscriminator>))
 }

package/lib/{composables → packages}/tree/define-tree.ts

@@ -1,20 +1,22 @@
-import { BranchDefinition } from '@core/composables/tree/branch-definition'
-import { LeafDefinition } from '@core/composables/tree/leaf-definition'
+import { BranchDefinition } from '@core/packages/tree/branch-definition'
+import { LeafDefinition } from '@core/packages/tree/leaf-definition'
 import type {
   ChildTreeDefinitionGetter,
   Identifiable,
   Labeled,
   TreeNodeDefinition,
   TreeNodeOptions,
-} from '@core/composables/tree/types'
+} from '@core/packages/tree/types'
 
 // Overload 1: Leaf with no options
 export function defineTree<TData extends Identifiable & Labeled, const TDiscriminator = any>(
+  treeId: string,
   entries: TData[]
 ): LeafDefinition<TData, TDiscriminator>[]
 
 // Overload 2: Leaf with options
 export function defineTree<TData extends object, const TDiscriminator = any>(
+  treeId: string,
   entries: TData[],
   options: TreeNodeOptions<TData, TDiscriminator>
 ): LeafDefinition<TData, TDiscriminator>[]
@@ -25,6 +27,7 @@ export function defineTree<
   TChildDefinition extends TreeNodeDefinition,
   const TDiscriminator = any,
 >(
+  treeId: string,
   entries: TData[],
   getChildTree: ChildTreeDefinitionGetter<TData, TChildDefinition>
 ): BranchDefinition<TData, TChildDefinition, TDiscriminator>[]
@@ -35,6 +38,7 @@ export function defineTree<
   TChildDefinition extends TreeNodeDefinition = TreeNodeDefinition,
   const TDiscriminator = any,
 >(
+  treeId: string,
   entries: TData[],
   options: TreeNodeOptions<TData, TDiscriminator>,
   getChildTree: ChildTreeDefinitionGetter<TData, TChildDefinition>
@@ -46,6 +50,7 @@ export function defineTree<
   TChildDefinition extends TreeNodeDefinition = TreeNodeDefinition,
   const TDiscriminator = any,
 >(
+  treeId: string,
   entries: TData[],
   optionsOrGetChildTree?: TreeNodeOptions<TData, TDiscriminator> | ChildTreeDefinitionGetter<TData, TChildDefinition>,
   getChildTreeOrNone?: ChildTreeDefinitionGetter<TData, TChildDefinition>
@@ -58,8 +63,8 @@ export function defineTree<
   const getChildTree = typeof optionsOrGetChildTree === 'function' ? optionsOrGetChildTree : getChildTreeOrNone
 
   if (getChildTree !== undefined) {
-    return entries.map(data => new BranchDefinition(data, options, getChildTree(data)))
+    return entries.map(data => new BranchDefinition(treeId, data, options, getChildTree(data)))
   }
 
-  return entries.map(data => new LeafDefinition(data, options))
+  return entries.map(data => new LeafDefinition(treeId, data, options))
 }

package/lib/{composables → packages}/tree/leaf-definition.ts

@@ -1,4 +1,4 @@
-import { TreeNodeDefinitionBase } from '@core/composables/tree/tree-node-definition-base'
+import { TreeNodeDefinitionBase } from '@core/packages/tree/tree-node-definition-base'
 
 export class LeafDefinition<TData extends object = any, const TDiscriminator = any> extends TreeNodeDefinitionBase<
   TData,

package/lib/{composables → packages}/tree/leaf.ts

@@ -1,5 +1,5 @@
-import { TreeNodeBase } from '@core/composables/tree/tree-node-base'
-import type { LeafStatuses } from '@core/composables/tree/types'
+import { TreeNodeBase } from '@core/packages/tree/tree-node-base'
+import type { LeafStatuses } from '@core/packages/tree/types'
 
 export class Leaf<TData extends object = any, const TDiscriminator = any> extends TreeNodeBase<TData, TDiscriminator> {
   readonly isBranch = false
@@ -13,7 +13,7 @@ export class Leaf<TData extends object = any, const TDiscriminator = any> extend
   }
 
   get isExcluded() {
-    if (this.parent?.isExpanded === false) {
+    if (this.parent?.isCollapsed === true) {
       return true
     }
 

package/lib/{composables → packages}/tree/tree-node-base.ts

@@ -1,5 +1,5 @@
-import type { Branch } from '@core/composables/tree/branch'
-import type { Identifiable, Labeled, TreeContext, TreeNodeId, TreeNodeOptions } from '@core/composables/tree/types'
+import type { Branch } from '@core/packages/tree/branch'
+import type { Identifiable, Labeled, TreeContext, TreeNodeId, TreeNodeOptions } from '@core/packages/tree/types'
 
 export abstract class TreeNodeBase<TData extends object = any, TDiscriminator = any> {
   abstract readonly isBranch: boolean
@@ -7,6 +7,7 @@ export abstract class TreeNodeBase<TData extends object = any, TDiscriminator =
   abstract isExcluded: boolean
   abstract statuses: Record<string, boolean>
 
+  readonly treeId: string
   readonly data: TData
   readonly depth: number
   readonly parent: Branch | undefined
@@ -14,12 +15,14 @@ export abstract class TreeNodeBase<TData extends object = any, TDiscriminator =
   readonly options: TreeNodeOptions<TData, TDiscriminator>
 
   constructor(
+    treeId: string,
     data: TData,
     parent: Branch | undefined,
     context: TreeContext,
     depth: number,
     options?: TreeNodeOptions<TData, TDiscriminator>
   ) {
+    this.treeId = treeId
     this.data = data
     this.parent = parent
     this.context = context
@@ -27,7 +30,7 @@ export abstract class TreeNodeBase<TData extends object = any, TDiscriminator =
     this.options = options ?? ({} as TreeNodeOptions<TData, TDiscriminator>)
   }
 
-  get id(): TreeNodeId {
+  get dataId(): TreeNodeId {
     if (this.options.getId === undefined) {
       return (this.data as Identifiable).id
     }
@@ -39,6 +42,18 @@ export abstract class TreeNodeBase<TData extends object = any, TDiscriminator =
     return this.data[this.options.getId as keyof TData] as TreeNodeId
   }
 
+  get id(): TreeNodeId {
+    const parts = [this.dataId, this.treeId]
+    let currentParent = this.parent
+
+    while (currentParent) {
+      parts.push(currentParent.treeId)
+      currentParent = currentParent.parent
+    }
+
+    return parts.reverse().join('.')
+  }
+
   get label() {
     if (this.options.getLabel === undefined) {
       return (this.data as Labeled).label

package/lib/{composables → packages}/tree/tree-node-definition-base.ts

@@ -1,11 +1,13 @@
-import type { TreeNodeOptions } from '@core/composables/tree/types'
+import type { TreeNodeOptions } from '@core/packages/tree/types'
 
 export abstract class TreeNodeDefinitionBase<TData extends object, TDiscriminator> {
   abstract readonly isBranch: boolean
+  readonly treeId: string
   data: TData
   options: TreeNodeOptions<TData, TDiscriminator>
 
-  constructor(data: TData, options: TreeNodeOptions<TData, TDiscriminator>) {
+  constructor(treeId: string, data: TData, options: TreeNodeOptions<TData, TDiscriminator>) {
+    this.treeId = treeId
     this.data = data
     this.options = options
   }

package/lib/{composables → packages}/tree/types.ts

@@ -1,9 +1,10 @@
-import type { Branch } from '@core/composables/tree/branch'
-import type { BranchDefinition } from '@core/composables/tree/branch-definition'
-import type { Leaf } from '@core/composables/tree/leaf'
-import type { LeafDefinition } from '@core/composables/tree/leaf-definition'
-import type { TreeNodeBase } from '@core/composables/tree/tree-node-base'
-import { useTree } from '@core/composables/tree.composable'
+import type { Branch } from '@core/packages/tree/branch'
+import type { BranchDefinition } from '@core/packages/tree/branch-definition'
+import type { Leaf } from '@core/packages/tree/leaf'
+import type { LeafDefinition } from '@core/packages/tree/leaf-definition'
+import type { TreeNodeBase } from '@core/packages/tree/tree-node-base'
+import { useTree } from '@core/packages/tree/use-tree'
+import type { Ref } from 'vue'
 
 export type TreeNodeId = string | number
 
@@ -62,13 +63,14 @@ export type ChildTreeDefinitionGetter<TData extends object, TChildDefinition ext
 export type TreeContext = {
   allowMultiSelect: boolean
   selectedIds: Set<TreeNodeId>
-  expandedIds: Set<TreeNodeId>
+  collapsedIds: Set<TreeNodeId>
   activeId: TreeNodeId | undefined
 }
 
 export type UseTreeOptions = {
   allowMultiSelect?: boolean
-  expand?: boolean
+  collapse?: boolean
+  collapsedIds?: Ref<Set<TreeNodeId>>
   selectedLabel?:
     | ((nodes: TreeNode[]) => string)
     | {
@@ -88,5 +90,5 @@ export type LeafStatuses = {
 export type BranchStatuses = LeafStatuses & {
   'selected-partial': boolean
   'selected-full': boolean
-  expanded: boolean
+  collapsed: boolean
 }

package/lib/{composables/tree.composable.ts → packages/tree/use-tree.ts}

@@ -1,4 +1,4 @@
-import { buildNodes } from '@core/composables/tree/build-nodes'
+import { buildNodes } from '@core/packages/tree/build-nodes'
 import type {
   DefinitionToTreeNode,
   TreeContext,
@@ -6,7 +6,7 @@ import type {
   TreeNodeDefinition,
   TreeNodeId,
   UseTreeOptions,
-} from '@core/composables/tree/types'
+} from '@core/packages/tree/types'
 import { computed, type MaybeRefOrGetter, reactive, ref, toValue } from 'vue'
 
 export function useTree<
@@ -14,21 +14,21 @@ export function useTree<
   TTreeNode extends DefinitionToTreeNode<TDefinition> = DefinitionToTreeNode<TDefinition>,
 >(definitions: MaybeRefOrGetter<TDefinition[]>, options: UseTreeOptions = {}) {
   const selectedIds = ref(new Set<TreeNodeId>())
-  const expandedIds = ref(new Set<TreeNodeId>())
+  const collapsedIds = options.collapsedIds ?? ref(new Set<TreeNodeId>())
   const activeId = ref<TreeNodeId>()
 
   const context = reactive({
     allowMultiSelect: options.allowMultiSelect ?? false,
     selectedIds,
-    expandedIds,
+    collapsedIds,
     activeId,
-  }) as TreeContext
+  }) satisfies TreeContext
 
   const nodes = computed(() => {
     const nodes = buildNodes<TDefinition, TTreeNode>(toValue(definitions), context)
 
-    if (options.expand !== false) {
-      nodes.forEach(node => node.isBranch && node.toggleExpand(true, true))
+    if (options.collapse) {
+      nodes.forEach(node => node.isBranch && node.toggleCollapse(true, true))
     }
 
     return nodes
@@ -52,11 +52,24 @@ export function useTree<
 
   const visibleNodes = computed(() => nodes.value.filter(node => !node.isExcluded))
 
-  const getNode = (id: TreeNodeId | undefined) => (id !== undefined ? nodesMap.value.get(id) : undefined)
-  const getNodes = (ids: TreeNodeId[]) => ids.map(getNode).filter(node => node !== undefined) as TreeNode[]
+  function getNode(id: TreeNodeId | undefined): TreeNode | undefined {
+    if (id === undefined) {
+      return undefined
+    }
+
+    return nodesMap.value.get(id)
+  }
+
+  const selectedNodes = computed(() =>
+    Array.from(selectedIds.value.values())
+      .map(id => getNode(id))
+      .filter(node => node !== undefined)
+  )
+
+  const expandedIds = computed(() => Array.from(nodesMap.value.keys()).filter(id => !collapsedIds.value.has(id)))
+
+  const expandedNodes = computed(() => expandedIds.value.map(id => getNode(id)).filter(node => node !== undefined))
 
-  const selectedNodes = computed(() => getNodes(Array.from(selectedIds.value.values())))
-  const expandedNodes = computed(() => getNodes(Array.from(expandedIds.value.values())))
   const activeNode = computed(() => getNode(activeId.value))
 
   const selectedLabel = computed(() => {

package/lib/tables/column-definitions/address-column.ts

@@ -0,0 +1,4 @@
+import { useCollapsedListColumn } from '@core/tables/column-definitions/collapsed-list-column.ts'
+import type { HeaderConfig } from '@core/tables/types.ts'
+
+export const useAddressColumn = (config?: HeaderConfig) => useCollapsedListColumn({ headerIcon: 'fa:at', ...config })

package/lib/tables/column-definitions/button-column.ts

@@ -0,0 +1,35 @@
+import UiButton, {
+  type ButtonAccent,
+  type ButtonProps,
+  type ButtonVariant,
+  type ButtonSize,
+} from '@core/components/ui/button/UiButton.vue'
+import { defineColumn } from '@core/packages/table/define-column'
+import { renderBodyCell } from '@core/tables/helpers/render-body-cell'
+import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
+import type { HeaderConfig } from '@core/tables/types.ts'
+import { h, toValue, type MaybeRefOrGetter } from 'vue'
+
+type ButtonConfig = {
+  buttonAccent?: MaybeRefOrGetter<ButtonAccent>
+  buttonVariant?: MaybeRefOrGetter<ButtonVariant>
+  buttonSize?: MaybeRefOrGetter<ButtonSize>
+}
+
+export const useButtonColumn = defineColumn((config?: HeaderConfig & ButtonConfig) => ({
+  renderHead: () => renderHeadCell(config?.headerIcon, config?.headerLabel),
+  renderBody: (label: string, onClick: () => void, props?: Partial<ButtonProps>) =>
+    renderBodyCell(() =>
+      h(
+        UiButton,
+        {
+          accent: toValue(config?.buttonAccent) ?? 'brand',
+          variant: toValue(config?.buttonVariant) ?? 'primary',
+          size: toValue(config?.buttonSize) ?? 'medium',
+          ...props,
+          onClick,
+        },
+        () => label
+      )
+    ),
+}))