Enhance tree view checkbox functionality with indeterminate state support

Author: mlankamp

src/assets/main.scss

@@ -65,45 +65,6 @@
     position: relative;
     cursor: pointer;
   }
-
-  .treeWrapper ul li input[type=checkbox]:before {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    top: 0;
-    left: 0;
-    border: 2px solid rgba(0, 0, 0, 0.54);
-    border-radius: 3px;
-    background-color:#fff;
-  }
-
-  .treeWrapper ul li input[type=checkbox]:checked:before {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    top: 0;
-    left: 0;
-    border: 2px solid #398684;
-    background-color: #398684 !important;
-  }
-  .treeWrapper ul li input[type=checkbox]:checked:after {
-    content: "";
-    display: block;
-    width: 8px;
-    height: 12px;
-    border: solid white;
-    border-width: 0 2px 2px 0;
-    -webkit-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-    position: absolute;
-    top: 2px;
-    left: 6px;
-  }
 
   .treeWrapper ul li span {
     vertical-align: middle;

src/components/viewer.vue

@@ -37,7 +37,9 @@ onMounted(() => {
     containerElement: treeContainer.value,
     hierarchy: 'containment',
     autoExpandDepth: 3,
-    renderService: renderService
+    renderService: renderService,
+    showIndeterminate: true,
+    pruneEmptyNodes: true
   });
 
   const xktLoader = new XKTLoaderPlugin(viewer.value);

src/treeviewRenderService.ts

@@ -132,10 +132,10 @@ const renderService: ITreeViewRenderService = {
         checkbox.checked = checked;
       }
       if (indeterminate !== checkbox.indeterminate) {
-        checkbox.indeterminate = indeterminate;
         if (indeterminate) {
           checkbox.checked = false;
         }
+        checkbox.indeterminate = indeterminate;
       }
     }
   },