From 3cab98e6d24ec07d02c4ba1e027e9312f0b28bbe Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Fri, 24 Apr 2020 22:13:44 +0800
Subject: [PATCH 1/3] fix #42

---
 src/App.vue                   | 23 ++++++++++++++++++++---
 src/components/G8TreeView.vue |  9 ++++++---
 src/components/types.ts       |  7 ++++++-
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 995a207..d33843d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,7 +41,18 @@
           @tag-dblclick="
             tagDblClicked = `${$event.node.name},${$event.tag.label},${$event.index}`
           "
-        ></g8-tree-view>
+        >
+          <template v-slot="props">
+            <span :class="{ blue: !props.item.color }">
+              {{ props.item.name }} (default slot)
+            </span>
+          </template>
+          <template v-slot:tag="props">
+            <span :class="{ blue: !props.tag.color }">
+              {{ props.tag.label }} (tag slot)
+            </span>
+          </template>
+        </g8-tree-view>
       </ul>
     </div>
   </div>
@@ -90,7 +101,8 @@ export default class App extends Vue {
       const child: G8TreeItem = {
         key: `key-${i}`,
         name: `name ${i}`,
-        tags: [{ label: `tag ${i}` }],
+        color: i % 5,
+        tags: [{ color: i % 5 ? '' : 'blue', label: `tag ${i}` }],
         children: [],
       };
       for (let j = 1; j < total; j++) {
@@ -98,7 +110,8 @@ export default class App extends Vue {
         child.children!.push({
           key: `key-${i}.${j}`,
           name: `name ${i}.${j}`,
-          tags: [{ label: `tag ${i}.${j}` }],
+
+          tags: [{ color: i % 5 ? '' : 'blue', label: `tag ${i}.${j}` }],
         });
       }
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -137,4 +150,8 @@ span[id] {
   border: 1px solid;
   display: inline-block;
 }
+
+.blue {
+  color: blue;
+}
 </style>
diff --git a/src/components/G8TreeView.vue b/src/components/G8TreeView.vue
index d7d360a..690c538 100644
--- a/src/components/G8TreeView.vue
+++ b/src/components/G8TreeView.vue
@@ -24,7 +24,9 @@
           'g8-tree__checked_some': intermediate,
         }"
       ></span>
-      <span class="g8-tree__node_label_text">{{ item[itemLabel] }}</span>
+      <span class="g8-tree__node_label_text">
+        <slot :item="item">{{ item[itemLabel] }}</slot>
+      </span>
       <span class="g8-tree__node_tags">
         <label
           class="g8-tree__node_tag"
@@ -35,8 +37,9 @@
           @click.middle.stop="tagMiddleClicked(tag, idx)"
           @click.right="tagRightClicked($event, tag, idx)"
           @dblclick.stop="tagDblClicked(tag, idx)"
-          >{{ tag[tagLabel] }}</label
         >
+          <slot name="tag" :tag="tag">{{ tag[tagLabel] }}</slot>
+        </label>
       </span>
     </div>
     <ul v-if="expanded || item.rendered" class="g8-tree__branch">
@@ -54,11 +57,11 @@
         @click.middle.stop="$emit('middle-click', $event)"
         @click.right="$emit('right-click', $event)"
         @dblclick="$emit('dblclick', $event)"
-        @state-changed="childrenStateChanged($event)"
         @tag-click="$emit('tag-click', $event)"
         @tag-middle-click="$emit('tag-middle-click', $event)"
         @tag-right-click="$emit('tag-right-click', $event)"
         @tag-dblclick="$emit('tag-dblclick', $event)"
+        @state-changed="childrenStateChanged($event)"
       ></g8-tree-view>
     </ul>
   </li>
diff --git a/src/components/types.ts b/src/components/types.ts
index 2c00f3d..fa6336e 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -9,7 +9,7 @@
  */
 export interface G8TreeItem {
   /**
-   * Just to allow accessing data via index syntax.
+   * Just to allow accessing data via index syntax and arbitrary data to fit in.
    */
   [key: string]: unknown;
 
@@ -49,6 +49,11 @@ export interface G8TreeItem {
  * Node tag data
  */
 export interface G8TreeItemTag {
+  /**
+   * Just to allow accessing data via index syntax and arbitrary data to fit in.
+   */
+  [key: string]: unknown;
+
   /**
    * Tag label.
    */

From b4c39164b82dc324a1f34d14eeed0941abcefeef Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Fri, 24 Apr 2020 22:43:51 +0800
Subject: [PATCH 2/3] fix #42

---
 src/App.vue                   | 18 +++++++++---------
 src/components/G8TreeView.vue |  9 ++++++++-
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d33843d..b89aa91 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,14 +42,14 @@
             tagDblClicked = `${$event.node.name},${$event.tag.label},${$event.index}`
           "
         >
-          <template v-slot="props">
-            <span :class="{ blue: !props.item.color }">
-              {{ props.item.name }} (default slot)
+          <template #default="{ item }">
+            <span :class="{ blue: !item.color }">
+              {{ item.name }} (default slot)
             </span>
           </template>
-          <template v-slot:tag="props">
-            <span :class="{ blue: !props.tag.color }">
-              {{ props.tag.label }} (tag slot)
+          <template #tag="{ tag }">
+            <span :class="{ blue: !tag.color }">
+              {{ tag.label }} (tag slot)
             </span>
           </template>
         </g8-tree-view>
@@ -102,7 +102,7 @@ export default class App extends Vue {
         key: `key-${i}`,
         name: `name ${i}`,
         color: i % 5,
-        tags: [{ color: i % 5 ? '' : 'blue', label: `tag ${i}` }],
+        tags: [{ color: i % 5, label: `tag ${i}` }],
         children: [],
       };
       for (let j = 1; j < total; j++) {
@@ -110,8 +110,8 @@ export default class App extends Vue {
         child.children!.push({
           key: `key-${i}.${j}`,
           name: `name ${i}.${j}`,
-
-          tags: [{ color: i % 5 ? '' : 'blue', label: `tag ${i}.${j}` }],
+          color: j % 5,
+          tags: [{ color: j % 5, label: `tag ${i}.${j}` }],
         });
       }
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
diff --git a/src/components/G8TreeView.vue b/src/components/G8TreeView.vue
index 2341018..9b7dfa5 100644
--- a/src/components/G8TreeView.vue
+++ b/src/components/G8TreeView.vue
@@ -63,7 +63,14 @@
         @tag-right-click="$emit('tag-right-click', $event)"
         @tag-dblclick="$emit('tag-dblclick', $event)"
         @state-changed="childrenStateChanged($event)"
-      ></g8-tree-view>
+      >
+        <template
+          v-for="slot in Object.keys($scopedSlots)"
+          :slot="slot"
+          slot-scope="scope"
+          ><slot :name="slot" v-bind="scope"
+        /></template>
+      </g8-tree-view>
     </ul>
   </li>
 </template>

From d94ff46a17e7b66b8a959e9fa80eeb9ef7bed80c Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Sat, 25 Apr 2020 08:58:09 +0800
Subject: [PATCH 3/3] fix #42

---
 src/App.vue                   | 19 +++++++++++++------
 src/components/tree-view.scss | 20 ++++++++++----------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b89aa91..be0f3b0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,7 +20,7 @@
     </div>
     <div>
       <button @click="populate()">populate tree</button>
-      <ul class="g8-tree-view g8-tree__highlight_hover">
+      <ul class="g8-tree-view g8-tree__dark g8-tree__highlight_hover">
         <g8-tree-view
           checker="1"
           :item="item"
@@ -43,12 +43,12 @@
           "
         >
           <template #default="{ item }">
-            <span :class="{ blue: !item.color }">
+            <span :class="{ tint: !item.color }">
               {{ item.name }} (default slot)
             </span>
           </template>
           <template #tag="{ tag }">
-            <span :class="{ blue: !tag.color }">
+            <span :class="{ tint: !tag.color }">
               {{ tag.label }} (tag slot)
             </span>
           </template>
@@ -129,11 +129,18 @@ body {
   height: 100%;
 }
 
+html,
+body,
+button,
+#app {
+  color: #888888;
+  background: #333333;
+}
+
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
   display: flex;
   height: 100%;
   flex-direction: column;
@@ -151,7 +158,7 @@ span[id] {
   display: inline-block;
 }
 
-.blue {
-  color: blue;
+.tint {
+  color: lightseagreen;
 }
 </style>
diff --git a/src/components/tree-view.scss b/src/components/tree-view.scss
index 9c79585..94977f0 100644
--- a/src/components/tree-view.scss
+++ b/src/components/tree-view.scss
@@ -27,7 +27,7 @@ $g8-tree-fg: #333 !default;
 
 .g8-tree__node {
   list-style: none;
-  padding: .1rem 0 .1rem 1rem;
+  padding: 0.1rem 0 0.1rem 1rem;
 }
 
 .g8-tree__node_label {
@@ -41,7 +41,7 @@ $g8-tree-fg: #333 !default;
 
 .g8-tree__toggle,
 .g8-tree__checker {
-  font-size: .8rem;
+  font-size: 0.8rem;
   width: 1rem;
   text-align: center;
 }
@@ -99,7 +99,7 @@ $g8-tree-fg: #333 !default;
   font-weight: bold;
 
   .g8-tree__toggle:before {
-    padding-right: .5rem;
+    padding-right: 0.5rem;
     content: '\25ba';
   }
 }
@@ -110,12 +110,12 @@ $g8-tree-fg: #333 !default;
 }
 
 .g8-tree__node_tag {
-  margin-left: .5rem;
-  padding: 0 .2rem;
-  font-size: .6rem;
+  margin-left: 0.5rem;
+  padding: 0 0.2rem;
+  font-size: 0.6rem;
   font-weight: normal;
   max-width: 6rem;
-  border-radius: .2rem;
+  border-radius: 0.2rem;
   background: $g8-tree-bg;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -169,8 +169,8 @@ $g8-tree-fg: #333 !default;
     }
   }
 
-  .g8-tree__highlight_hover .g8-tree__node_label:hover,
-  .g8-tree__highlight_hover .g8-tree__node_label:focus {
-    background: $g8-tree-fg;
+  &.g8-tree__highlight_hover .g8-tree__node_label:hover,
+  &.g8-tree__highlight_hover .g8-tree__node_label:focus {
+    background: lighten($g8-tree-fg, 10%);
   }
 }