refactor(tree): functionality

src/components/shared/TreeView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
+import { ref } from 'vue';
 type Node = {
   [key: string]: any;
   selected?: boolean;
@@ -10,6 +11,8 @@ type Props = {
   level?: number;
   keyTitle?: string;
   keySubtitle?: string;
+  collapse?: boolean;
+  expandable?: boolean;
   decoration?: {
     level?: number;
     bg?: string;
@@ -20,6 +23,7 @@ type Props = {
 
 const props = defineProps<Props>();
 const nodes = defineModel<Node[]>('nodes', { required: true });
+const open = ref<boolean>(!props.collapse);
 
 const dec = props.decoration?.find((v) => v.level === (props.level || 0));
 </script>
@@ -34,12 +38,13 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
       />
 
       <template v-else>
-        <label class="item__content row items-center">
-          <input
-            class="item__checkbox"
-            type="checkbox"
-            v-model="node.selected"
-          />
+        <div
+          class="item__content row items-center"
+          @click="open = expandable ? !open : open"
+        >
+          <label class="item__checkbox" @click.stop>
+            <input type="checkbox" v-model="node.selected" />
+          </label>
 
           <Icon v-if="dec && dec.icon" :icon="dec.icon" class="item__icon" />
 
@@ -51,15 +56,16 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
               {{ node[keySubtitle || 'subtitle'] || 'No Subtitle' }}
             </span>
           </div>
-        </label>
+        </div>
       </template>
 
-      <div class="q-pl-xl">
+      <div class="q-pl-lg" v-if="open">
         <TreeView
           class="item__children"
           v-if="node.children"
           v-model:nodes="node.children"
           :level="(level || 0) + 1"
+          :expandable
           :decoration
         />
       </div>
@@ -76,7 +82,7 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
 
   & .tree-item {
     & .item__content {
-      padding: 0.2rem 0.5rem;
+      padding: 0.1rem 0.5rem;
 
       &:hover {
         background: hsla(0 0% 0% / 0.1);
@@ -85,6 +91,7 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
     }
 
     & .item__checkbox {
+      padding: 0.1rem 0.5rem;
       margin-right: 1rem;
     }