Add slot

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"
@@ -41,7 +41,18 @@
           @tag-dblclick="
             tagDblClicked = `${$event.node.name},${$event.tag.label},${$event.index}`
           "
-        ></g8-tree-view>
+        >
+          <template #default="{ item }">
+            <span :class="{ tint: !item.color }">
+              {{ item.name }} (default slot)
+            </span>
+          </template>
+          <template #tag="{ tag }">
+            <span :class="{ tint: !tag.color }">
+              {{ tag.label }} (tag slot)
+            </span>
+          </template>
+        </g8-tree-view>
       </ul>
     </div>
   </div>
@@ -90,15 +101,17 @@ 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, label: `tag ${i}` }],
         children: [],
       };
       for (let j = 1; j < total; j++) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         child.children!.push({
           key: `key-${i}.${j}`,
           name: `name ${i}.${j}`,
-          tags: [{ 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
@@ -116,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;
@@ -137,4 +157,8 @@ span[id] {
   border: 1px solid;
   display: inline-block;
 }
+
+.tint {
+  color: lightseagreen;
+}
 </style>

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">
@@ -55,12 +58,19 @@
         @middle-click="$emit('middle-click', $event)"
         @right-click="$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)"
-      ></g8-tree-view>
+        @state-changed="childrenStateChanged($event)"
+      >
+        <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>

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%);
   }
 }

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.
    */