Add collapsible property (#42)

Author: berge472

.github/workflows/node.js.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '14'
+          node-version: '16'
 
       - name: Install dependencies
         run: npm install

README.md

@@ -91,6 +91,7 @@ export interface TreeViewItem {
   selected?: boolean;
   expanded?: boolean;
   disableDragAndDrop?: boolean; // Disable drag and drop for a specific node.
+  collapsible?: boolean; // When set to false, item can not be collapsed (children always visible)
   disabled?: boolean;// When disabled, an item can neither be selected nor checked
   styles?: string[]; // Add the .css styles for a given item
   meta?: any;// provides meta-data of any type per node.

dev/tree.json

@@ -34,9 +34,11 @@
                 "type": ".playlist"
               },
               {
-                "name": "Decoding hieroglyphs",
+                "name": "Decoding hieroglyphs (Not collapsible)",
                 "id": 8,
                 "type": ".playlist",
+                "collapsible": false,
+                "expanded": true,
                 "children": [
                   {
                     "name": "List of Rejection Emails",

src/style.css

@@ -147,7 +147,16 @@
   align-items: center;
 }
 
-.vue3-tree-vue .nested {
+/**
+  * children of checkable tree items need 47px left margin.
+  * Otherwise, only 27px left margin is needed.
+  */
+
+.vue3-tree-vue .nested{
+  margin-left: 27px  !important;
+}
+
+.tree-item-node-checkable > .nested {
   margin-left: 47px !important;
 }
 

src/tree-component.vue

@@ -11,7 +11,11 @@
         <li v-for="treeViewItem in internalItems" 
             :key="treeViewItem.id"
             :id="treeViewItem.id"
-            class="tree-item-node">
+            class="tree-item-node"
+            :class="{
+                'tree-item-node-checkable': isCheckable,
+            }"
+            >
             <treeview-item class="pointer tree-view-item"
                 :item="treeViewItem"
                 :parent="parent"

src/tree-item.vue

@@ -2,7 +2,7 @@
   <div class="d-flex align-items-center" @contextmenu.prevent="$emit('onContextMenu', { item, event: $event })">
     <div class="guide-line" v-if="parent != null && !hideGuideLines"></div>
 
-    <div @click="toggleExpand()" v-if="lazyLoad || (item.children && item.children.length > 0)">
+    <div @click="toggleExpand()" v-if="(lazyLoad || (item.children && item.children.length > 0)) && (item.collapsible == undefined || item.collapsible == true)">
       <slot name="expander" v-bind="item">
         <span class="chevron-right" :class="{'rotate-90' : item.expanded }"></span>
       </slot>

src/types.ts

@@ -7,6 +7,7 @@ export interface TreeViewItem {
   expanded?: boolean;
   disabled?: boolean;
   disableDragAndDrop?: boolean;
+  collapsible?: boolean;
   styles?: string[];
   meta?: any;
 }