From cc5c6b2a7eca969bbc18521d32adc5351157e1e2 Mon Sep 17 00:00:00 2001
From: Jason Berger <Jason.Berger@Cromulence.com>
Date: Tue, 12 Mar 2024 09:42:00 -0400
Subject: [PATCH 1/5] fixed styling and name slot

---
 src/style.css     | 80 +++++++++++++++++++++++++++++++++++++++++------
 src/tree-item.vue |  4 ++-
 2 files changed, 73 insertions(+), 11 deletions(-)

diff --git a/src/style.css b/src/style.css
index b7e9109..139565b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -3,21 +3,82 @@
   color: white;
 }
 
-.tree-item:hover .on-item-hover {
-  display: block;
+.tree-item:hover .on-item-hover{
+display: block;
 }
 
-.tree-item .on-item-hover {
-  display: none;
+.tree-item .on-item-hover{
+display: none;
 }
 
-.tree-item-node:hover li>.on-item-hover {
-  display: block;
+.tree-item-node:hover li > .on-item-hover{
+display: block;
+}
+
+.tree-item-node li > .on-item-hover{
+display: none;
 }
 
 
-.tree-item-node li>.on-item-hover {
-  display: none;
+.no-guide .tree-item-node {
+border: none !important;
+}
+.no-guide .tree-item-node::before {
+border: none !important;
+}
+
+.no-guide .guide-line {
+border: none !important;
+}
+
+.no-guide .guide-line::before {
+border: none !important;
+}
+
+
+
+/**
+  * Create Vertical Guideline
+  * Add a dashed border to the left of all but the last child in a parent node.
+  * There will be a gap between the bottom of this tree-item-node and the top of the next sibling.
+  */
+  .node-child  .tree-item-node-parent .tree-item-node:not(:last-child) {
+  position: relative;
+  border-left: 1px dashed rgb(192, 192, 192);
+  border-radius: 0;
+}
+
+/**
+  * Fill in gap on Vertical Guideline
+  * use the ::before pseudo-element to create a dashed line that extends down to the next sibling.
+  * This will be applied to all but the last child in a parent node, and fill in the gap mentioned above.
+  */
+  .node-child  .tree-item-node-parent .tree-item-node:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  top: 100%; /* Extend below the actual element */
+  left: -1px; /* Match the border-left width */
+  height: 1em; /* Adjust the desired height */
+  border-left: 1px dashed rgb(192, 192, 192);
+}
+
+
+.tree-item-node:only-child  .tree-view-item{
+  position: relative; /* Needed to position the ::before pseudo-element */
+}
+
+/**
+* Create Vertical Guideline for only-children
+* Since we rely on the previous sibling to fill in the gap by extending down, 
+* only-child elements will need to extend up to fill in the gap.
+*/
+.node-child  .tree-item-node-parent .tree-item-node:only-child >  .tree-view-item >  .guide-line::before {
+  content: "";
+  position: absolute;
+  bottom: 50%; /* Extend above the actual element */
+  left: -1px; /* Match the border-left width */
+  height: 1em; /* Extend 20px above the element */
+  border-left: 1px dashed rgb(192, 192, 192);
 }
 
 
@@ -99,7 +160,6 @@ li {
 .node-child {
   text-align: left;
   display: block;
-  border-left: 1px dashed rgb(192, 192, 192);
 }
 
 .hide {
@@ -114,7 +174,7 @@ li {
   box-sizing: border-box;
   position: relative;
   display: block;
-  transform: scale(var(--ggs, 1));
+  transform: scale(var(--ggs,1));
   width: 22px;
   height: 22px;
   border: 2px solid transparent;
diff --git a/src/tree-item.vue b/src/tree-item.vue
index bd6f22d..710be11 100644
--- a/src/tree-item.vue
+++ b/src/tree-item.vue
@@ -31,7 +31,9 @@
           <div class="tiny_horizontal_margin">
             <slot name="prepend"></slot>
           </div>
-          <span>{{ item.name }}</span>
+          <slot name="name">
+            <span>{{ item.name }}</span>
+          </slot>
           &nbsp;
           <slot name="append"></slot>
         </div>

From 84c1bbd7e5405df671408f06b571a9c85e272c13 Mon Sep 17 00:00:00 2001
From: Jason Berger <Jason.Berger@Cromulence.com>
Date: Tue, 11 Mar 2025 10:15:41 -0400
Subject: [PATCH 2/5] add collapsable property

---
 README.md         | 1 +
 dev/tree.json     | 4 +++-
 src/tree-item.vue | 2 +-
 src/types.ts      | 1 +
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index e21fb5c..b2f6907 100644
--- a/README.md
+++ b/README.md
@@ -91,6 +91,7 @@ export interface TreeViewItem {
   selected?: boolean;
   expanded?: boolean;
   disableDragAndDrop?: boolean; // Disable drag and drop for a specific node.
+  collapsable?: 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.
diff --git a/dev/tree.json b/dev/tree.json
index 613ed66..0fdcc18 100644
--- a/dev/tree.json
+++ b/dev/tree.json
@@ -34,9 +34,11 @@
                 "type": ".playlist"
               },
               {
-                "name": "Decoding hieroglyphs",
+                "name": "Decoding hieroglyphs (Not Collapsable)",
                 "id": 8,
                 "type": ".playlist",
+                "collapsable": false,
+                "expanded": true,
                 "children": [
                   {
                     "name": "List of Rejection Emails",
diff --git a/src/tree-item.vue b/src/tree-item.vue
index 245f33d..0b470ba 100644
--- a/src/tree-item.vue
+++ b/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.collapsable == undefined || item.collapsable == true)">
       <slot name="expander" v-bind="item">
         <span class="chevron-right" :class="{'rotate-90' : item.expanded }"></span>
       </slot>
diff --git a/src/types.ts b/src/types.ts
index a91473a..8662f81 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -7,6 +7,7 @@ export interface TreeViewItem {
   expanded?: boolean;
   disabled?: boolean;
   disableDragAndDrop?: boolean;
+  collapsable?: boolean;
   styles?: string[];
   meta?: any;
 }

From 0422f7073ed0f8ce5da31777c2ac4f3d177dd97c Mon Sep 17 00:00:00 2001
From: Jason Berger <Jason.Berger@Cromulence.com>
Date: Tue, 11 Mar 2025 10:18:11 -0400
Subject: [PATCH 3/5] spelling

---
 README.md         | 2 +-
 dev/tree.json     | 4 ++--
 src/tree-item.vue | 2 +-
 src/types.ts      | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index b2f6907..b646135 100644
--- a/README.md
+++ b/README.md
@@ -91,7 +91,7 @@ export interface TreeViewItem {
   selected?: boolean;
   expanded?: boolean;
   disableDragAndDrop?: boolean; // Disable drag and drop for a specific node.
-  collapsable?: boolean; // When set to false, item can not be collapsed (children always visible)
+  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.
diff --git a/dev/tree.json b/dev/tree.json
index 0fdcc18..fa09997 100644
--- a/dev/tree.json
+++ b/dev/tree.json
@@ -34,10 +34,10 @@
                 "type": ".playlist"
               },
               {
-                "name": "Decoding hieroglyphs (Not Collapsable)",
+                "name": "Decoding hieroglyphs (Not collapsible)",
                 "id": 8,
                 "type": ".playlist",
-                "collapsable": false,
+                "collapsible": false,
                 "expanded": true,
                 "children": [
                   {
diff --git a/src/tree-item.vue b/src/tree-item.vue
index 0b470ba..58f5a4a 100644
--- a/src/tree-item.vue
+++ b/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)) && (item.collapsable == undefined || item.collapsable == true)">
+    <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>
diff --git a/src/types.ts b/src/types.ts
index 8662f81..d026ed6 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -7,7 +7,7 @@ export interface TreeViewItem {
   expanded?: boolean;
   disabled?: boolean;
   disableDragAndDrop?: boolean;
-  collapsable?: boolean;
+  collapsible?: boolean;
   styles?: string[];
   meta?: any;
 }

From c66aca16260ced886b1f9da548e210a1eccb55e0 Mon Sep 17 00:00:00 2001
From: Jason Berger <Jason.Berger@Cromulence.com>
Date: Thu, 22 May 2025 11:25:32 -0400
Subject: [PATCH 4/5] adjust margin for checkbox

---
 src/style.css          | 11 ++++++++++-
 src/tree-component.vue |  6 +++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/style.css b/src/style.css
index 25a3383..3285e6d 100644
--- a/src/style.css
+++ b/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;
 }
 
diff --git a/src/tree-component.vue b/src/tree-component.vue
index 7ee4ac4..3616953 100644
--- a/src/tree-component.vue
+++ b/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"

From 0dd770ce4cbdabf7789eaa81e151dec367571023 Mon Sep 17 00:00:00 2001
From: Jason Berger <berge472@gmail.com>
Date: Tue, 27 May 2025 11:42:39 -0400
Subject: [PATCH 5/5] Update node.js.yml

---
 .github/workflows/node.js.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
index bc75db2..294ba6c 100644
--- a/.github/workflows/node.js.yml
+++ b/.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