From fe217945bcb99dc91e7864e2c547e49bfa9720f9 Mon Sep 17 00:00:00 2001
From: Maksym Nedoshev <m0ksem1337@gmail.com>
Date: Fri, 15 Nov 2024 16:54:03 +0200
Subject: [PATCH] feat: add expandable prop to tree-view (#4426)

---
 .../components/va-tree-view/VaTreeView.stories.ts | 15 +++++++++++++++
 .../ui/src/components/va-tree-view/VaTreeView.vue |  2 ++
 .../components/VaTreeNode/VaTreeNode.vue          | 11 ++++++++---
 .../va-tree-view/hooks/useTreeHelpers.ts          |  8 ++++++++
 4 files changed, 33 insertions(+), 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
index 311ab8bfb6..b97ff5074b 100644
--- 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
index c3da971f16..5b3f59cf83 100644
--- 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
index 01eff305fa..721e69f230 100644
--- 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
index bc08b43717..ab732f7bdb 100644
--- 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: '',