feat: add expandable prop to tree-view (#4426)

epicmaxco · Nov 15, 2024 · fe21794 · fe21794
1 parent a60c39f
commit fe21794
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 3 deletions.
diff --git a/packages/ui/src/components/va-tree-view/VaTreeView.stories.ts b/packages/ui/src/components/va-tree-view/VaTreeView.stories.ts
@@ -629,3 +629,18 @@ export const ExpandByNode = () => ({
     />
   `,
 })
+
+export const ExpandableFalse = () => ({
+  components: { VaTreeView },
+  data: () => ({
+    nodesChecked: nodesChecked(),
+  }),
+  template: `
+    <va-tree-view
+      :nodes="nodesChecked"
+      selectable
+      expand-all
+      :expandable="false"
+    />
+  `,
+})
diff --git a/packages/ui/src/components/va-tree-view/VaTreeView.vue b/packages/ui/src/components/va-tree-view/VaTreeView.vue
@@ -8,6 +8,8 @@
         v-for="nodeItem in treeItems"
         :key="getTrackBy(nodeItem)"
         :node="nodeItem"
+        :expandable="$props.expandable"
+        :disabled="$props.disabled || nodeItem.disabled"
       >
         <template v-for="(_, name) in $slots" :key="name" v-slot:[name]="slotScope">
           <slot :name="name" v-bind="slotScope" />

diff --git a/packages/ui/src/components/va-tree-view/components/VaTreeNode/VaTreeNode.vue b/packages/ui/src/components/va-tree-view/components/VaTreeNode/VaTreeNode.vue
@@ -17,7 +17,7 @@
     <div class="va-tree-node-root">
       <div class="va-tree-node-content" :class="indentClassComputed" @click="onNodeClick('node')">
         <div
-          v-if="$props.node.hasChildren"
+          v-if="$props.node.hasChildren && $props.expandable"
           class="va-tree-node-content__item va-tree-node-content__item--leaf"
           @click.stop="onNodeClick('leaf')"
         >
@@ -63,7 +63,8 @@
       <va-tree-node
         v-for="childNode in $props.node.children"
         :key="getTrackBy(childNode)"
-        :disabled="$props.node.disabled"
+        :disabled="$props.node.disabled || $props.disabled"
+        :expandable="$props.expandable"
         :node="childNode"
       >
         <template v-for="(_, name) in $slots" :key="name" v-slot:[name]="slotScope: any">
@@ -101,6 +102,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  expandable: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const {
@@ -135,7 +140,7 @@ const expandedClassComputed = useBem('va-tree-node-children', () => ({
 }))
 
 const indentClassComputed = useBem('va-tree-node-content', () => ({
-  indent: props.node.hasChildren === false,
+  indent: props.node.hasChildren === false && props.expandable,
 }))
 
 const cursorClassComputed = useBem('va-tree-node-content', () => ({

diff --git a/packages/ui/src/components/va-tree-view/hooks/useTreeHelpers.ts b/packages/ui/src/components/va-tree-view/hooks/useTreeHelpers.ts
@@ -66,6 +66,14 @@ export const useTreeViewProps = {
     type: String as PropType<'leaf' | 'node'>,
     default: 'leaf',
   },
+  expandable: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
   filter: {
     type: String,
     default: '',