feat: handle uncheck tree and partial select

src/components/shared/TreeView.vue

@@ -41,6 +41,7 @@ const nodes = defineModel<Node[]>('nodes', { required: true });
 
 const emits = defineEmits<{
   (e: 'checked'): void;
+  (e: 'unchecked'): void;
   (e: 'select', node: Node, ancestor?: Node[]): void;
   (e: 'open', node: Node, ancestor?: Node[]): void;
   (e: 'delete', node: Node): void;
@@ -55,6 +56,15 @@ const maxLevel = computed(() =>
   }, 0),
 );
 
+function recursiveSelect(node: Node) {
+  if (node.children) {
+    node.children.forEach((v) => {
+      v.checked = true;
+      recursiveSelect(v);
+    });
+  }
+}
+
 function recursiveDeselect(node: Node) {
   if (node.children) {
     node.children.forEach((v) => {
@@ -63,10 +73,17 @@ function recursiveDeselect(node: Node) {
     });
   }
 }
+
 function toggleCheck(node: Node) {
   node.checked = !node.checked;
-  if (node.checked === false) recursiveDeselect(node);
-  if (node.checked === true) emits('checked');
+  if (node.checked === false) {
+    recursiveDeselect(node);
+    emits('unchecked');
+  }
+  if (node.checked === true) {
+    recursiveSelect(node);
+    emits('checked');
+  }
 }
 
 function toggleExpand(node: Node, ancestor?: []) {
@@ -161,6 +178,10 @@ function toggleExpand(node: Node, ancestor?: []) {
             <input
               type="checkbox"
               v-model="node.checked"
+              :indeterminate="
+                node.children?.some((v) => !v.checked) &&
+                !node.children?.every((v) => !v.checked)
+              "
               :style="`accent-color: var(--blue-7)`"
               @click="toggleCheck(node)"
             />
@@ -230,6 +251,14 @@ function toggleExpand(node: Node, ancestor?: []) {
                 $emit('checked');
               }
             "
+            @unchecked="
+              () => {
+                if (node.children?.every((v) => v.checked === false)) {
+                  node.checked = false;
+                }
+                $emit('checked');
+              }
+            "
             @select="
               (v) =>
                 $emit(