feat: add check behaviour

src/components/shared/TreeView.vue

@@ -24,7 +24,27 @@ type Props = {
 const props = defineProps<Props>();
 const nodes = defineModel<Node[]>('nodes', { required: true });
 
+const emits = defineEmits<{ (e: 'checked'): void }>();
+
 const dec = props.decoration?.find((v) => v.level === (props.level || 0));
+
+function recursiveDeselect(node: Node) {
+  if (node.children) {
+    node.children.forEach((v) => {
+      v.selected = false;
+      recursiveDeselect(v);
+    });
+  }
+}
+function toggleCheck(node: Node) {
+  node.selected = !node.selected;
+  if (node.selected === false) recursiveDeselect(node);
+  if (node.selected === true) emits('checked');
+}
+
+function toggleExpand(node: Node) {
+  node.opened = !node.opened;
+}
 </script>
 
 <template>
@@ -33,16 +53,20 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
       <slot
         v-if="$slots['item']"
         name="item"
-        :data="{ node, onclick: () => (node.selected = !node.selected) }"
+        :data="{ node, toggleExpand, toggleCheck }"
       />
 
       <template v-else>
         <div
           class="item__content row items-center no-wrap"
-          @click="node.opened = expandable ? !node.opened : node.opened"
+          @click="toggleExpand(node)"
         >
           <label class="flex items-center item__checkbox" @click.stop>
-            <input type="checkbox" v-model="node.selected" />
+            <input
+              type="checkbox"
+              v-model="node.selected"
+              @click="toggleCheck(node)"
+            />
           </label>
 
           <div
@@ -73,6 +97,12 @@ const dec = props.decoration?.find((v) => v.level === (props.level || 0));
             class="item__children"
             v-if="node.children"
             v-model:nodes="node.children"
+            @checked="
+              () => {
+                node.selected = true;
+                $emit('checked');
+              }
+            "
             :level="(level || 0) + 1"
             :expandable
             :decoration