change indeterminate logic (should be refactored)

src/App.vue

@@ -12,7 +12,7 @@
     @onToggleParentCheckbox="onToggleParentCheckbox"
   />
 
-  <pre style="position:absolute;right:0;top:0;"><code id="codeBlock"></code></pre>
+  <pre style="position:absolute;right:0;top:0;height:96vh;overflow:auto;"><code id="codeBlock"></code></pre>
 </template>
 
 <script>

src/lib/components/Tree.vue

@@ -12,7 +12,6 @@
         @emitNodeExpanded="onNodeExpanded"
         @emitOnUpdated="onDataUpdated"
         @emitCheckboxToggle="onCheckboxToggle"
-        @emitToggleParentCheckbox="onToggleParentCheckbox"
       >
         <template #iconActive>
           <slot name="iconActive"></slot>
@@ -26,12 +25,11 @@
 </template>
 
 <script>
-import { ref, watch, onMounted } from 'vue'
+import { ref, watch, onMounted, nextTick } from 'vue'
 import TreeRow from './TreeRow.vue'
 import initData from '../composables/initData'
 import useSearch from '../composables/useSearch'
 import updateData from '../composables/updateData'
-import indeterminateData from '../composables/indeterminateData'
 
 export default {
   name: 'Tree',
@@ -73,17 +71,23 @@ export default {
       default: true,
     },
   },
-  emits: ['onNodeExpanded', 'onCheckboxToggle', 'onDataUpdated', 'onToggleParentCheckbox'],
+  emits: ['onNodeExpanded', 'onCheckboxToggle', 'onDataUpdated'],
   setup(props, { emit }) {
     const { searchTree } = useSearch()
-    // TODO: the names below should be changed
     const reactiveNodes = ref(props.nodes)
     const reactiveExpandRowByDefault = ref(props.expandRowByDefault)
 
     onMounted(() => {
       reactiveNodes.value = initData(reactiveNodes.value)
     })
 
+
+    const nodeArray = (selector, parent=document) => {
+      return [].slice.call(parent.querySelectorAll(selector))
+    }
+
+    //	checkboxes of interest
+
     watch(() => props.searchText, () => {
       if (props.searchText !== '') {
         reactiveNodes.value = searchTree(props.nodes, props.searchText, props.props)
@@ -100,27 +104,48 @@ export default {
       emit('onNodeExpanded', node, state)
     }
 
-    const onCheckboxToggle = context => {
+    const onCheckboxToggle = (context, event) => {
       reactiveNodes.value = updateData(reactiveNodes.value, context)
+
+      let check = event.target
+      const allThings = nodeArray('input')
+
+      if (allThings.indexOf(check) === -1) return
+
+      const children = nodeArray('input', check.parentNode.parentNode)
+      children.forEach(child => child.checked = check.checked)
+
+      while (check) {
+        const parent = (check.parentNode.parentNode.closest(['ul']).parentNode).querySelector('input')
+
+        if (!parent.parentNode.parentNode.querySelector(['ul'])) {
+          check = false
+          return
+        }
+        const siblings = nodeArray('input', parent.parentNode.parentNode.querySelector(['ul']))
+
+        const checkStatus = siblings.map(check => check.checked)
+        const every = checkStatus.every(Boolean)
+        const some = checkStatus.some(Boolean)
+
+        parent.checked = every
+        parent.indeterminate = !every && every !== some
+
+        check = check != parent ? parent : 0
+      }
       emit('onCheckboxToggle', context)
     }
 
     const onDataUpdated = () => {
       emit('onDataUpdated', props.nodes)
     }
 
-    const onToggleParentCheckbox = indeterminate => {
-      reactiveNodes.value = indeterminateData(reactiveNodes.value, indeterminate)
-      emit('onToggleParentCheckbox', indeterminate)
-    }
-
     return {
       onNodeExpanded,
       reactiveNodes,
       reactiveExpandRowByDefault,
       onCheckboxToggle,
       onDataUpdated,
-      onToggleParentCheckbox,
     }
   },
 }

src/lib/components/TreeRow.vue

@@ -22,13 +22,11 @@
       </template>
       <input
         type="checkbox"
-        :indeterminate="!reactiveNode.checked && reactiveNode.indeterminate"
         :checked="reactiveNode.checked"
-        @click.stop="toggleCheckbox(reactiveNode); toggleParentCheckbox(reactiveNode)"
+        @click.stop="toggleCheckbox(reactiveNode, $event)"
       >
       <span class="tree-row-txt">
         {{ reactiveNode.label }}
-        {{ reactiveNode.indeterminate }}
       </span>
     </div>
     <ul
@@ -47,7 +45,6 @@
         @emitNodeExpanded="emitNodeExpanded"
         @emitOnUpdated="emitOnUpdated"
         @emitCheckboxToggle="emitCheckboxToggle"
-        @emitToggleParentCheckbox="emitToggleParentCheckbox"
       >
         <template #iconActive>
           <slot name="iconActive">
@@ -96,10 +93,9 @@ export default {
       default: false,
     },
   },
-  emits: ['emitNodeExpanded', 'emitCheckboxToggle', 'emitOnUpdated', 'emitToggleParentCheckbox'],
+  emits: ['emitNodeExpanded', 'emitCheckboxToggle', 'emitOnUpdated'],
   setup(props, { emit }) {
     const reactiveNode = ref(props.node)
-    const indeterminate = ref(reactiveNode.value.indeterminate)
     const toggleExpanded = node => {
       reactiveNode.value.expanded = !reactiveNode.value.expanded
       nextTick(() => {
@@ -113,21 +109,6 @@ export default {
       immediate: true,
     })
 
-    const toggleParentCheckbox = node => {
-      if (reactiveNode.value.nodes) {
-        reactiveNode.value.indeterminate = !reactiveNode.value.indeterminate
-      }
-      nextTick(() => {
-        emit('emitToggleParentCheckbox', node, reactiveNode.value.indeterminate)
-      })
-    }
-
-    watch(() => props.expandRowByDefault, newVal => {
-      reactiveNode.value.expanded = newVal
-    }, {
-      immediate: true,
-    })
-
     watch(() => props.node, newVal => {
       reactiveNode.value.checked = newVal.checked
     }, {
@@ -147,28 +128,22 @@ export default {
       emitOnUpdated()
     })
 
-    const emitToggleParentCheckbox = indeterminate => {
-      emit('emitToggleParentCheckbox', indeterminate)
-    }
-
-    const toggleCheckbox = node => {
+    const toggleCheckbox = (node, event) => {
       reactiveNode.value.checked = !reactiveNode.value.checked
       nextTick(()=>{
         emit('emitCheckboxToggle', {
           id: node.id,
           checked: node.checked,
-        })
+        }, event)
       })
     }
 
-    const emitCheckboxToggle = context => {
-      emit('emitCheckboxToggle', context)
+    const emitCheckboxToggle = (context, event) => {
+      emit('emitCheckboxToggle', context, event)
     }
 
     return {
       toggleExpanded,
-      toggleParentCheckbox,
-      emitToggleParentCheckbox,
       emitNodeExpanded,
       emitOnUpdated,
       toggleCheckbox,