feat(05): quotation product form

src/components/shared/TreeView.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 type Node = {
   [key: string]: any;
   opened?: boolean;
-  selected?: boolean;
+  checked?: boolean;
   bg?: string;
   fg?: string;
   icon?: string;
@@ -19,6 +19,8 @@ type Props = {
   expandable?: boolean;
   hideCheckBox?: boolean;
   iconSize?: string;
+  selectable?: boolean;
+  selectedNode?: Node[];
   decoration?: {
     level?: number;
     bg?: string;
@@ -30,7 +32,10 @@ type Props = {
 const props = defineProps<Props>();
 const nodes = defineModel<Node[]>('nodes', { required: true });
 
-const emits = defineEmits<{ (e: 'checked'): void }>();
+const emits = defineEmits<{
+  (e: 'checked'): void;
+  (e: 'select', node: Node): void;
+}>();
 
 const dec = props.decoration?.find((v) => v.level === (props.level || 0));
 const maxLevel = computed(() =>
@@ -42,15 +47,15 @@ const maxLevel = computed(() =>
 function recursiveDeselect(node: Node) {
   if (node.children) {
     node.children.forEach((v) => {
-      v.selected = false;
+      v.checked = false;
       recursiveDeselect(v);
     });
   }
 }
 function toggleCheck(node: Node) {
-  node.selected = !node.selected;
-  if (node.selected === false) recursiveDeselect(node);
-  if (node.selected === true) emits('checked');
+  node.checked = !node.checked;
+  if (node.checked === false) recursiveDeselect(node);
+  if (node.checked === true) emits('checked');
 }
 
 function toggleExpand(node: Node) {
@@ -84,7 +89,10 @@ function toggleExpand(node: Node) {
       <template v-else>
         <div
           class="item__content row items-center no-wrap"
-          @click="toggleExpand(node)"
+          :class="{ active: selectedNode?.includes(node) }"
+          @click="
+            () => (selectable ? $emit('select', node) : toggleExpand(node))
+          "
         >
           <div
             v-if="level !== maxLevel"
@@ -95,6 +103,7 @@ function toggleExpand(node: Node) {
               name="mdi-chevron-down-circle"
               size="sm"
               :style="`transform: rotate(${node.opened ? '180deg' : '0'}); transition: transform 0.3s ease;`"
+              @click.stop="toggleExpand(node)"
             />
           </div>
 
@@ -105,7 +114,7 @@ function toggleExpand(node: Node) {
           >
             <input
               type="checkbox"
-              v-model="node.selected"
+              v-model="node.checked"
               @click="toggleCheck(node)"
             />
           </label>
@@ -135,22 +144,25 @@ function toggleExpand(node: Node) {
           </div>
         </div>
       </template>
-      <q-separator v-if="!level" spaced="md"></q-separator>
+      <q-separator v-if="!level" class="q-mt-sm"></q-separator>
 
       <transition name="slide">
         <div v-if="node.opened && node.children && node.children.length > 0">
           <TreeView
             :iconSize
             :hideCheckBox
+            :selectable
+            :selectedNode
             class="item__children"
             v-if="node.children"
             v-model:nodes="node.children"
             @checked="
               () => {
-                node.selected = true;
+                node.checked = true;
                 $emit('checked');
               }
             "
+            @select="(v) => $emit('select', v)"
             :level="(level || 0) + 1"
             :expandable
             :decoration
@@ -170,6 +182,7 @@ function toggleExpand(node: Node) {
 
   & .tree-item {
     & .item__content {
+      border: solid 1px transparent;
       padding: 0.1rem 0.5rem;
 
       &:hover {
@@ -198,6 +211,12 @@ function toggleExpand(node: Node) {
       font-size: 80%;
       color: hsla(var(--text-mute-2));
     }
+
+    & .active {
+      border-radius: var(--radius-2);
+      border: solid 1px hsl(var(--info-bg));
+      background: hsla(var(--info-bg) / 0.1);
+    }
   }
 }