refactor: quotation product tree

src/components/shared/TreeView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 type Node = {
   [key: string]: any;
@@ -9,6 +9,7 @@ type Node = {
   bg?: string;
   fg?: string;
   icon?: string;
+  displayDropIcon?: boolean;
   children?: Node[];
 };
 
@@ -36,6 +37,7 @@ const nodes = defineModel<Node[]>('nodes', { required: true });
 const emits = defineEmits<{
   (e: 'checked'): void;
   (e: 'select', node: Node, ancestor?: Node[]): void;
+  (e: 'open', node: Node, ancestor?: Node[]): void;
 }>();
 
 const dec = props.decoration?.find((v) => v.level === (props.level || 0));
@@ -59,8 +61,9 @@ function toggleCheck(node: Node) {
   if (node.checked === true) emits('checked');
 }
 
-function toggleExpand(node: Node) {
+function toggleExpand(node: Node, ancestor?: []) {
   node.opened = !node.opened;
+  emits('open', node, ancestor);
 }
 </script>
 
@@ -98,13 +101,25 @@ function toggleExpand(node: Node) {
           <div
             v-if="level !== maxLevel"
             class="q-mr-md"
-            :style="`color: ${node.children?.length === 0 || !node.children ? 'transparent' : 'var(--stone-4)'}`"
+            :style="`color: ${
+              !node.displayDropIcon &&
+              (!node.children || node.children.length === 0)
+                ? 'transparent'
+                : $q.dark.isActive
+                  ? 'var(--gray-7)'
+                  : 'var(--gray-4)'
+            }`"
           >
             <q-icon
               name="mdi-chevron-down-circle"
               size="sm"
               :style="`transform: rotate(${node.opened ? '180deg' : '0'}); transition: transform 0.3s ease;`"
-              @click.stop="toggleExpand(node)"
+              @click.stop="
+                !node.displayDropIcon &&
+                (!node.children || node.children.length === 0)
+                  ? $emit('select', node)
+                  : toggleExpand(node)
+              "
             />
           </div>
 
@@ -125,6 +140,7 @@ function toggleExpand(node: Node) {
             :style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
           >
             <div
+              class="flex items-center justify-center"
               :style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
             >
               <Icon
@@ -157,16 +173,38 @@ function toggleExpand(node: Node) {
             class="item__children"
             v-if="node.children"
             v-model:nodes="node.children"
+            @open="
+              (n) => {
+                $emit(
+                  'open',
+                  n,
+                  !props.ancestorNode || props.ancestorNode.length === 0
+                    ? [node]
+                    : [...props.ancestorNode, node],
+                );
+              }
+            "
             @checked="
               () => {
                 node.checked = true;
                 $emit('checked');
               }
             "
-            @select="(v) => $emit('select', v, props.ancestorNode)"
+            @select="
+              (v) =>
+                $emit(
+                  'select',
+                  v,
+                  !props.ancestorNode || props.ancestorNode.length === 0
+                    ? [node]
+                    : [...props.ancestorNode, node],
+                )
+            "
             :level="(level || 0) + 1"
             :ancestorNode="
-              !props.ancestorNode ? [node] : [...props.ancestorNode, node]
+              !props.ancestorNode || props.ancestorNode.length === 0
+                ? [node]
+                : [...props.ancestorNode, node]
             "
             :expandable
             :decoration