From 7b2ba05049bcbe0c330df097c193606856196a2c Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Fri, 24 Apr 2020 13:13:05 +0800
Subject: [PATCH 01/13] add `--no-verify`

---
 scripts/release.bat | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/scripts/release.bat b/scripts/release.bat
index 02996c0..2967ef5 100644
--- a/scripts/release.bat
+++ b/scripts/release.bat
@@ -22,14 +22,14 @@ bash.exe -lc github_changelog_generator || goto ERR
 for /f "tokens=*" %%v in ('node scripts\make-release-note.js') do set VERSION=%%v
 
 git add . || goto ERR
-git commit -m "Release %VERSION%" || goto ERR
-git push || goto ERR
+git commit --no-verify -m "Release %VERSION%" || goto ERR
+git push --no-verify || goto ERR
 git tag --sign -m "%date%" "Release-v%VERSION%"
-git push --tags || goto ERR
+git push --no-verify --tags || goto ERR
 
 git checkout dev
 git merge master
-git push
+git push --no-verify
 
 
 goto END

From 0abf8c00538acbd7458b45f6424d0432f43f419c Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Fri, 24 Apr 2020 16:22:08 +0800
Subject: [PATCH 02/13] add back dependencies

---
 package.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 4aa1533..384ea9a 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,12 @@
     "lint": "vue-cli-service lint",
     "wba": "cross-env WBA=1 npm run build"
   },
+  "dependencies": {
+    "core-js": "^3.6.4",
+    "vue": "^2.6.11",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^8.4.1"
+  },
   "devDependencies": {
     "@bundle-analyzer/webpack-plugin": "^0.5.1",
     "@types/jest": "^24.0.19",
@@ -48,7 +54,6 @@
     "@vue/eslint-config-typescript": "^5.0.1",
     "@vue/test-utils": "1.0.0-beta.31",
     "chromedriver": "latest",
-    "core-js": "^3.6.4",
     "cross-env": "^7.0.2",
     "eslint": "^6.7.2",
     "eslint-config-prettier": "^6.10.1",
@@ -67,13 +72,8 @@
     "sass-loader": "^8.0.2",
     "typescript": "~3.7.5",
     "vue": "^2.6.11",
-    "vue-class-component": "^7.2.2",
     "vue-docgen-cli": "^4.16.0",
-    "vue-property-decorator": "^8.3.0",
     "vue-template-compiler": "^2.6.11",
     "webpack-bundle-analyzer": "^3.7.0"
-  },
-  "peerDependencies": {
-    "vue": "^2.6.11"
   }
 }

From da2cbce89e133f6ca508ef198fe93942fdd679da Mon Sep 17 00:00:00 2001
From: Jackey Cheung <eidng8@users.noreply.github.com>
Date: Fri, 24 Apr 2020 22:02:53 +0800
Subject: [PATCH 03/13] fix #41

---
 src/components/G8TreeView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/G8TreeView.vue b/src/components/G8TreeView.vue
index d7d360a..5fb587a 100644
--- a/src/components/G8TreeView.vue
+++ b/src/components/G8TreeView.vue
@@ -51,8 +51,8 @@
         :tag-label="tagLabel"
         :tag-hint="tagHint"
         @click="$emit('click', $event)"
-        @click.middle.stop="$emit('middle-click', $event)"
-        @click.right="$emit('right-click', $event)"
+        @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)"

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 04/13] 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 029b45f900cf003d66eb6eb6974a82585b6f36a4 Mon Sep 17 00:00:00 2001
From: Jackey Cheung <eidng8@users.noreply.github.com>
Date: Fri, 24 Apr 2020 22:20:10 +0800
Subject: [PATCH 05/13] fix #41

---
 src/components/G8TreeView.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/G8TreeView.vue b/src/components/G8TreeView.vue
index 5fb587a..87680f0 100644
--- a/src/components/G8TreeView.vue
+++ b/src/components/G8TreeView.vue
@@ -50,6 +50,7 @@
         :children-key="childrenKey"
         :tag-label="tagLabel"
         :tag-hint="tagHint"
+        :handle-right-click="handleRightClick"
         @click="$emit('click', $event)"
         @middle-click="$emit('middle-click', $event)"
         @right-click="$emit('right-click', $event)"

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 06/13] 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 07/13] 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%);
   }
 }

From 0d16edabdc70a9f485cb1588e953d1ae42c34b6f Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Sat, 25 Apr 2020 20:04:30 +0800
Subject: [PATCH 08/13] fix #43

---
 src/App.vue                                   |  86 ++++-----
 src/components/G8TreeView.vue                 | 136 +-------------
 src/components/types.ts                       |  22 +--
 src/index.ts                                  |   4 +-
 ...rops.spec.ts => G8TreeView-basics.spec.ts} |   0
 tests/unit/G8TreeView-events.spec.ts          | 174 ++++++++----------
 6 files changed, 124 insertions(+), 298 deletions(-)
 rename tests/unit/{G8TreeView-props.spec.ts => G8TreeView-basics.spec.ts} (100%)

diff --git a/src/App.vue b/src/App.vue
index be0f3b0..f22bf83 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,49 +7,29 @@
 <template>
   <div id="app">
     <div>
-      <span id="itemClicked">[click] {{ itemClicked }}</span>
-      <span id="itemMiddleClicked">[middle-click] {{ itemMiddleClicked }}</span>
-      <span id="itemRightClicked">[right-click] {{ itemRightClicked }}</span>
-      <span id="itemDblClicked">[dblclick] {{ itemDblClicked }}</span>
-      <span id="tagClicked">[tag-click] {{ tagClicked }} </span>
-      <span id="tagMiddleClicked"
-        >[tag-middle-click] {{ tagMiddleClicked }}
-      </span>
-      <span id="tagRightClicked">[tag-right-click] {{ tagRightClicked }} </span>
-      <span id="tagDblClicked">[tag-dblclick] {{ tagDblClicked }}</span>
+      <span id="itemClicked">{{ itemClicked }}</span>
+      <span id="tagClicked">{{ tagClicked }}</span>
     </div>
     <div>
       <button @click="populate()">populate tree</button>
       <ul class="g8-tree-view g8-tree__dark g8-tree__highlight_hover">
-        <g8-tree-view
-          checker="1"
-          :item="item"
-          :handle-right-click="true"
-          @click="itemClicked = $event.name"
-          @middle-click="itemMiddleClicked = $event.name"
-          @right-click="itemRightClicked = $event.name"
-          @dblclick="itemDblClicked = $event.name"
-          @tag-click="
-            tagClicked = `${$event.node.name},${$event.tag.label},${$event.index}`
-          "
-          @tag-middle-click="
-            tagMiddleClicked = `${$event.node.name},${$event.tag.label},${$event.index}`
-          "
-          @tag-right-click="
-            tagRightClicked = `${$event.node.name},${$event.tag.label},${$event.index}`
-          "
-          @tag-dblclick="
-            tagDblClicked = `${$event.node.name},${$event.tag.label},${$event.index}`
-          "
-        >
+        <g8-tree-view :item="item" :checker="true">
           <template #default="{ item }">
-            <span :class="{ tint: !item.color }">
-              {{ item.name }} (default slot)
+            <span
+              :id="item.key"
+              :class="{ tint: !item.tint }"
+              @click="itemClicked = item.name"
+            >
+              {{ item.name }}
             </span>
           </template>
           <template #tag="{ tag }">
-            <span :class="{ tint: !tag.color }">
-              {{ tag.label }} (tag slot)
+            <span
+              :id="tag.key"
+              :class="{ tint: !tag.tint }"
+              @click="tagClicked = tag.label"
+            >
+              {{ tag.label }}
             </span>
           </template>
         </g8-tree-view>
@@ -68,10 +48,12 @@ import { G8TreeItem, G8TreeView } from './';
   },
 })
 export default class App extends Vue {
-  item: G8TreeItem = {
+  item = {
     key: 'root',
     name: 'Click the button above to populate me.',
-  };
+  } as G8TreeItem;
+
+  tab = 1;
 
   itemClicked = '';
 
@@ -90,33 +72,34 @@ export default class App extends Vue {
   tagDblClicked = '';
 
   populate() {
-    const total = 100;
+    const total = 10;
     this.item = {
       key: 'root',
       name: 'root name',
       tags: [{ label: 'root label' }],
-      children: [],
+      cssClass: [''],
     };
+    const children = [];
     for (let i = 1; i < total; i++) {
       const child: G8TreeItem = {
         key: `key-${i}`,
         name: `name ${i}`,
-        color: i % 5,
-        tags: [{ color: i % 5, label: `tag ${i}` }],
-        children: [],
+        tint: i % 5,
+        tags: [{ tint: i % 5, key: `tag-${i}`, label: `tag ${i}` }],
       };
+      const sub = [];
       for (let j = 1; j < total; j++) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        child.children!.push({
+        sub.push({
           key: `key-${i}.${j}`,
           name: `name ${i}.${j}`,
-          color: j % 5,
-          tags: [{ color: j % 5, label: `tag ${i}.${j}` }],
+          tint: j % 5,
+          tags: [{ tint: j % 5, key: `tag-${i}.${j}`, label: `tag ${i}.${j}` }],
         });
       }
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      this.item.children!.push(child);
+      child.children = sub;
+      children.push(child);
     }
+    this.item.children = children;
   }
 }
 </script>
@@ -151,13 +134,6 @@ button,
   }
 }
 
-span[id] {
-  margin: 5px;
-  padding: 0 2px;
-  border: 1px solid;
-  display: inline-block;
-}
-
 .tint {
   color: lightseagreen;
 }
diff --git a/src/components/G8TreeView.vue b/src/components/G8TreeView.vue
index 9b7dfa5..8f44d97 100644
--- a/src/components/G8TreeView.vue
+++ b/src/components/G8TreeView.vue
@@ -9,16 +9,13 @@
     <div
       class="g8-tree__node_label"
       :class="{ 'g8-tree__branch_label': hasChild }"
-      @click.stop="clicked()"
-      @click.middle.stop="middleClicked()"
-      @click.right="rightClicked($event)"
-      @dblclick.stop="dblClicked()"
+      @click="clicked($event)"
     >
       <span class="g8-tree__toggle"></span>
       <span
         v-if="checker"
         class="g8-tree__checker"
-        @click.stop="setState(!checked)"
+        @click.stop.prevent="setState(!checked)"
         :class="{
           'g8-tree__checked': checked,
           'g8-tree__checked_some': intermediate,
@@ -33,10 +30,6 @@
           v-for="(tag, idx) in item[tagsKey]"
           :key="idx"
           :title="tag[tagHint]"
-          @click.stop="tagClicked(tag, idx)"
-          @click.middle.stop="tagMiddleClicked(tag, idx)"
-          @click.right="tagRightClicked($event, tag, idx)"
-          @dblclick.stop="tagDblClicked(tag, idx)"
         >
           <slot name="tag" :tag="tag">{{ tag[tagLabel] }}</slot>
         </label>
@@ -53,23 +46,15 @@
         :children-key="childrenKey"
         :tag-label="tagLabel"
         :tag-hint="tagHint"
-        :handle-right-click="handleRightClick"
-        @click="$emit('click', $event)"
-        @middle-click="$emit('middle-click', $event)"
-        @right-click="$emit('right-click', $event)"
-        @dblclick="$emit('dblclick', $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)"
       >
         <template
           v-for="slot in Object.keys($scopedSlots)"
           :slot="slot"
           slot-scope="scope"
-          ><slot :name="slot" v-bind="scope"
-        /></template>
+        >
+          <slot :name="slot" v-bind="scope" />
+        </template>
       </g8-tree-view>
     </ul>
   </li>
@@ -77,7 +62,7 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { G8TreeItem, G8TreeItemTag } from './types';
+import { G8ClickEvent, G8TreeItem } from './types';
 
 /**
  * A tree view component with stable DOM structure. Stable means its structure
@@ -115,11 +100,6 @@ export default class G8TreeView extends Vue {
    */
   @Prop({ default: 'hint' }) tagHint!: string;
 
-  /**
-   * Whether to intercept right mouse click.
-   */
-  @Prop({ default: false }) handleRightClick!: boolean;
-
   /**
    * Whether to add a checkbox before each item, allowing multiple nodes to
    * be checked.
@@ -202,113 +182,17 @@ export default class G8TreeView extends Vue {
    * Handles click event of nodes, expanding/collapsing sub-tree if
    * applicable. This method emits the `click` event.
    */
-  clicked() {
+  clicked(event: G8ClickEvent) {
     if (this.hasChild) {
       this.item.rendered = true;
       this.expanded = !this.expanded;
     }
+    event.data = this.item;
     /**
      * A tree node has been clicked.
-     * @param {G8TreeItem} item
-     */
-    this.$emit('click', this.item);
-  }
-
-  /**
-   * Handles middle click event of nodes, emitting the `middle-click` event.
-   */
-  middleClicked() {
-    /**
-     * A tree node has been clicked with middle mouse button.
-     * @param {G8TreeItem} item
-     */
-    this.$emit('middle-click', this.item);
-  }
-
-  /**
-   * Handles right click event of nodes, emitting the `right-click` event if
-   * needed.
-   */
-  rightClicked(event: MouseEvent) {
-    if (!this.handleRightClick) return;
-    event.preventDefault();
-    event.stopPropagation();
-    /**
-     * A tree node has been clicked with right mouse button. Only available if
-     * {@see handleRightClick} is `true`.
-     * @param {G8TreeItem} item
-     */
-    this.$emit('right-click', this.item);
-  }
-
-  /**
-   * Handles double click event of nodes, emitting the `dblclick` event.
-   */
-  dblClicked() {
-    /**
-     * A tree node has been double clicked.
-     * @param {G8TreeItem} item
-     */
-    this.$emit('dblclick', this.item);
-  }
-
-  /**
-   * Handles double click event of tags, emitting the `tag-click` event.
-   * @param tag
-   * @param index
-   */
-  tagClicked(tag: G8TreeItemTag, index: number) {
-    /**
-     * A tree node tag has been clicked.
-     * @param {G8TagClickEvent} event
-     */
-    this.$emit('tag-click', { node: this.item, tag, index });
-  }
-
-  /**
-   * Handles middle click event of tags, emitting the `tag-middle-click` event.
-   * @param tag
-   * @param index
-   */
-  tagMiddleClicked(tag: G8TreeItemTag, index: number) {
-    /**
-     * A tree node tag has been clicked.
-     * @param {G8TagClickEvent} event
-     */
-    this.$emit('tag-middle-click', { node: this.item, tag, index });
-  }
-
-  /**
-   * Handles right click event of tags, emitting the `tag-right-click` event if
-   * needed.
-   */
-  tagRightClicked(event: MouseEvent, tag: G8TreeItemTag, index: number) {
-    if (!this.handleRightClick) return;
-    event.preventDefault();
-    event.stopPropagation();
-    /**
-     * A tree node has been clicked with right mouse button.. Only available if
-     * {@see handleRightClick} is `true`.
-     * @param {G8TagClickEvent} event
-     */
-    this.$emit('tag-right-click', { node: this.item, tag, index });
-  }
-
-  /**
-   * Handles double click event of tags, emitting the `tag-dblclick` event.
-   * @param tag
-   * @param index
-   */
-  tagDblClicked(tag: G8TreeItemTag, index: number) {
-    /**
-     * A tree node tag has been double clicked.
-     * @param {G8TagClickEvent} key
+     * @param {G8ClickEvent} item
      */
-    this.$emit('tag-dblclick', {
-      node: this.item,
-      tag,
-      index,
-    });
+    this.$emit('click', event);
   }
 
   /**
diff --git a/src/components/types.ts b/src/components/types.ts
index fa6336e..01e864c 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -65,22 +65,6 @@ export interface G8TreeItemTag {
   hint?: string;
 }
 
-/**
- * Mouse click event of tag
- */
-export type G8TagClickEvent = {
-  /**
-   * Key of the node that triggered the event.
-   */
-  node: G8TreeItem;
-
-  /**
-   * The tag that triggered the event.
-   */
-  tag: G8TreeItemTag;
-
-  /**
-   * Numeric index of the entry in the tag list.
-   */
-  index: number;
-};
+export class G8ClickEvent extends MouseEvent {
+  data?: unknown;
+}
diff --git a/src/index.ts b/src/index.ts
index 2f576c5..f08fa08 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,7 +5,7 @@
  */
 
 import G8TreeView from './components/G8TreeView.vue';
-import { G8TagClickEvent, G8TreeItem, G8TreeItemTag } from './components/types';
+import { G8TreeItem, G8TreeItemTag } from './components/types';
 import './components/tree-view.scss';
 
-export { G8TreeView, G8TreeItem, G8TreeItemTag, G8TagClickEvent };
+export { G8TreeView, G8TreeItem, G8TreeItemTag };
diff --git a/tests/unit/G8TreeView-props.spec.ts b/tests/unit/G8TreeView-basics.spec.ts
similarity index 100%
rename from tests/unit/G8TreeView-props.spec.ts
rename to tests/unit/G8TreeView-basics.spec.ts
diff --git a/tests/unit/G8TreeView-events.spec.ts b/tests/unit/G8TreeView-events.spec.ts
index 87fc301..309b045 100644
--- a/tests/unit/G8TreeView-events.spec.ts
+++ b/tests/unit/G8TreeView-events.spec.ts
@@ -4,8 +4,9 @@
  * Author: eidng8
  */
 
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { G8TreeItem, G8TreeView } from '../../src';
+import { ComponentOptions } from 'vue';
 
 const tree = {
   item: {
@@ -33,129 +34,110 @@ const tree = {
   } as G8TreeItem,
 };
 
-let wrapper: Wrapper<G8TreeView>;
-let propsData: { item: G8TreeItem };
+let propsData: { checker?: boolean; clicked?: Function; item: G8TreeItem };
 
 describe('Tree View events', () => {
   beforeEach(() => {
     propsData = JSON.parse(JSON.stringify(tree));
-    wrapper = mount(G8TreeView, { propsData });
   });
 
   it('emits click events', async () => {
-    expect.assertions(3);
+    const changed = jest.fn();
+    const wrapper = mount(G8TreeView, {
+      propsData,
+      listeners: { click: changed },
+    });
+    expect.assertions(7);
+    expect(wrapper.find('.g8-tree__node .g8-tree__node').exists()).toBeFalsy();
     wrapper.find('.g8-tree__node_label').trigger('click');
     await wrapper.vm.$nextTick();
+    expect(changed).toHaveBeenCalled();
     const emitted = wrapper.emitted('click');
     expect(emitted).toBeInstanceOf(Array);
     expect(emitted.length).toBe(1);
-    expect(emitted[0][0]).toStrictEqual(propsData.item);
+    expect(emitted[0][0]).toBeInstanceOf(MouseEvent);
+    expect(emitted[0][0].data).toStrictEqual(propsData.item);
+    expect(wrapper.find('.g8-tree__node .g8-tree__node').exists()).toBeTruthy();
   });
 
-  it('emits middle click events', async () => {
-    expect.assertions(3);
-    wrapper.find('.g8-tree__node_label').trigger('mouseup', { button: 1 });
-    await wrapper.vm.$nextTick();
-    const emitted = wrapper.emitted('middle-click');
-    expect(emitted).toBeInstanceOf(Array);
-    expect(emitted.length).toBe(1);
-    expect(emitted[0][0]).toStrictEqual(propsData.item);
-  });
-
-  it('does not emit right click event', async () => {
-    expect.assertions(1);
-    wrapper.find('.g8-tree__node_label').trigger('contextmenu');
-    await wrapper.vm.$nextTick();
-    const emitted = wrapper.emitted('right-click');
-    expect(emitted).toBeUndefined();
-  });
-
-  it('emits double click events', async () => {
-    expect.assertions(3);
-    wrapper.find('.g8-tree__node_label').trigger('dblclick');
-    await wrapper.vm.$nextTick();
-    const emitted = wrapper.emitted('dblclick');
-    expect(emitted).toBeInstanceOf(Array);
-    expect(emitted.length).toBe(1);
-    expect(emitted[0][0]).toStrictEqual(propsData.item);
-  });
-
-  it('emits tag click events', async () => {
-    expect.assertions(5);
-    const tags = wrapper.findAll('.g8-tree__node_tag');
-    tags.trigger('click');
+  it('can not be preventDefault()', async () => {
+    const clicked = jest.fn();
+    propsData.clicked = clicked;
+    const wrapper = mount(
+      {
+        template: `
+          <ul>
+            <g8-tree-view :item="item" @click.prevent="clicked($event)"></g8-tree-view>
+          </ul>`,
+        inject: ['item', 'clicked'],
+        components: { G8TreeView },
+      } as ComponentOptions<any>,
+      { provide: propsData },
+    );
+    expect.assertions(4);
+    expect(wrapper.find('.g8-tree__node .g8-tree__node').exists()).toBeFalsy();
+    wrapper.find('.g8-tree__node_label').trigger('click');
     await wrapper.vm.$nextTick();
-    const emitted = wrapper.emitted('tag-click');
-    expect(emitted).toBeInstanceOf(Array);
-    expect(emitted.length).toBe(1);
-    expect(emitted[0][0].node).toStrictEqual(propsData.item);
-    expect(emitted[0][0].tag).toStrictEqual(propsData.item.tags![0]);
-    expect(emitted[0][0].index).toStrictEqual(0);
+    expect(clicked).toHaveBeenCalledWith(
+      expect.objectContaining({ data: propsData.item }),
+    );
+    expect(wrapper.emitted('click')).toBeUndefined();
+    expect(wrapper.find('.g8-tree__node .g8-tree__node').exists()).toBeTruthy();
   });
 
-  it('emits tag middle click events', async () => {
+  it('emits state-change event', async () => {
+    const changed = jest.fn();
+    propsData.checker = true;
+    const wrapper = mount(G8TreeView, {
+      propsData,
+      listeners: { 'state-changed': changed },
+    });
     expect.assertions(5);
-    const tags = wrapper.findAll('.g8-tree__node_tag');
-    tags.trigger('mouseup', { button: 1 });
+    const checker = wrapper.find('.g8-tree__checker');
+    checker.trigger('click');
     await wrapper.vm.$nextTick();
-    const emitted = wrapper.emitted('tag-middle-click');
+    expect(changed).toHaveBeenCalled();
+    const emitted = wrapper.emitted('state-changed');
     expect(emitted).toBeInstanceOf(Array);
     expect(emitted.length).toBe(1);
-    expect(emitted[0][0].node).toStrictEqual(propsData.item);
-    expect(emitted[0][0].tag).toStrictEqual(propsData.item.tags![0]);
-    expect(emitted[0][0].index).toStrictEqual(0);
+    expect(emitted[0][0]).toStrictEqual(propsData.item);
+    expect(checker.is('.g8-tree__checked')).toBeTruthy();
   });
 
-  it('does not emit tag right click events', async () => {
-    expect.assertions(1);
-    const tags = wrapper.findAll('.g8-tree__node_tag');
-    tags.trigger('contextmenu');
+  it('emits state-change of intermediate state', async () => {
+    const changed = jest.fn();
+    propsData.checker = true;
+    const wrapper = mount(G8TreeView, {
+      propsData,
+      listeners: { 'state-changed': changed },
+    });
+    expect.assertions(9);
+    expect(propsData.item.intermediate).toBeFalsy();
+    expect(propsData.item.children![1].intermediate).toBeFalsy();
+    wrapper.find('.g8-tree__node_label').trigger('click');
     await wrapper.vm.$nextTick();
-    const emitted = wrapper.emitted('tag-right-click');
-    expect(emitted).toBeUndefined();
-  });
-
-  it('emits tag double click events', async () => {
-    expect.assertions(5);
-    wrapper.findAll('.g8-tree__node_tag').trigger('dblclick');
+    wrapper
+      .findAll('.g8-tree__node '.repeat(2) + '.g8-tree__node_label')
+      .trigger('click');
     await wrapper.vm.$nextTick();
-    const emitted = wrapper.emitted('tag-dblclick');
-    expect(emitted).toBeInstanceOf(Array);
-    expect(emitted.length).toBe(1);
-    expect(emitted[0][0].node).toStrictEqual(propsData.item);
-    expect(emitted[0][0].tag).toStrictEqual(propsData.item.tags![0]);
-    expect(emitted[0][0].index).toStrictEqual(0);
-  });
-});
-
-describe('Tree View with right click turned on', () => {
-  beforeEach(() => {
-    propsData = JSON.parse(JSON.stringify(tree));
-    // @ts-ignore
-    propsData.handleRightClick = true;
-    wrapper = mount(G8TreeView, { propsData });
-  });
-
-  it('emits right click events', async () => {
-    expect.assertions(3);
-    wrapper.find('.g8-tree__node_label').trigger('contextmenu');
+    wrapper
+      .find('.g8-tree__node '.repeat(3) + '.g8-tree__node_label')
+      .trigger('click');
     await wrapper.vm.$nextTick();
-    const emitted = wrapper.emitted('right-click');
-    expect(emitted).toBeInstanceOf(Array);
-    expect(emitted.length).toBe(1);
-    expect(emitted[0][0]).toStrictEqual(propsData.item);
-  });
-
-  it('emits tag right click events', async () => {
-    expect.assertions(5);
-    const tags = wrapper.findAll('.g8-tree__node_tag');
-    tags.trigger('contextmenu');
+    const checker = wrapper.find(
+      '.g8-tree__node '.repeat(3) + '.g8-tree__checker',
+    );
+    checker.trigger('click');
     await wrapper.vm.$nextTick();
-    const emitted = wrapper.emitted('tag-right-click');
+    expect(changed).toHaveBeenCalled();
+    const emitted = wrapper.emitted('state-changed');
     expect(emitted).toBeInstanceOf(Array);
     expect(emitted.length).toBe(1);
-    expect(emitted[0][0].node).toStrictEqual(propsData.item);
-    expect(emitted[0][0].tag).toStrictEqual(propsData.item.tags![0]);
-    expect(emitted[0][0].index).toStrictEqual(0);
+    expect(emitted[0][0]).toStrictEqual(
+      propsData.item.children![1].children![0],
+    );
+    expect(checker.is('.g8-tree__checked')).toBeTruthy();
+    expect(propsData.item.intermediate).toBeTruthy();
+    expect(propsData.item.children![1].intermediate).toBeTruthy();
   });
 });

From 88ec42267d4a56d0335d1bcd7d31e92f0f179cef Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Sun, 26 Apr 2020 18:12:54 +0800
Subject: [PATCH 09/13] fix #43 #42

---
 nightwatch.conf.js                            |  20 +++
 src/App.vue                                   |  64 +++++---
 src/components/G8TreeView.vue                 |  59 ++++++--
 src/components/tree-view.scss                 |  39 ++---
 src/components/types.ts                       |   2 +-
 .../custom-assertions/containsOrMatches.js    | 132 ++++++++++++++++
 tests/e2e/custom-commands/assertChecked.js    |  17 +++
 .../assertClickRespondantContains.js          |  14 ++
 tests/e2e/custom-commands/assertCollapsed.js  |  12 ++
 .../custom-commands/assertEntryContains.js    |  16 ++
 tests/e2e/custom-commands/assertExpanded.js   |  12 ++
 .../e2e/custom-commands/assertIntermediate.js |  17 +++
 .../e2e/custom-commands/assertTagContains.js  |  14 ++
 .../assertTagRespondantContains.js            |  14 ++
 tests/e2e/custom-commands/assertUnchecked.js  |  17 +++
 tests/e2e/custom-commands/clickChecker.js     |  22 +++
 tests/e2e/custom-commands/clickLabel.js       |  22 +++
 tests/e2e/custom-commands/clickTag.js         |  21 +++
 tests/e2e/custom-commands/open.js             |  33 ++++
 tests/e2e/helpers.js                          |  63 ++++++++
 tests/e2e/specs/test.js                       | 143 ++++++++----------
 tests/unit/G8TreeView-basics.spec.ts          |  34 +++--
 tests/unit/G8TreeView-events.spec.ts          |  18 +--
 tests/unit/G8TreeView-interactions.spec.ts    |  81 ++++++----
 24 files changed, 697 insertions(+), 189 deletions(-)
 create mode 100644 nightwatch.conf.js
 create mode 100644 tests/e2e/custom-assertions/containsOrMatches.js
 create mode 100644 tests/e2e/custom-commands/assertChecked.js
 create mode 100644 tests/e2e/custom-commands/assertClickRespondantContains.js
 create mode 100644 tests/e2e/custom-commands/assertCollapsed.js
 create mode 100644 tests/e2e/custom-commands/assertEntryContains.js
 create mode 100644 tests/e2e/custom-commands/assertExpanded.js
 create mode 100644 tests/e2e/custom-commands/assertIntermediate.js
 create mode 100644 tests/e2e/custom-commands/assertTagContains.js
 create mode 100644 tests/e2e/custom-commands/assertTagRespondantContains.js
 create mode 100644 tests/e2e/custom-commands/assertUnchecked.js
 create mode 100644 tests/e2e/custom-commands/clickChecker.js
 create mode 100644 tests/e2e/custom-commands/clickLabel.js
 create mode 100644 tests/e2e/custom-commands/clickTag.js
 create mode 100644 tests/e2e/custom-commands/open.js
 create mode 100644 tests/e2e/helpers.js

diff --git a/nightwatch.conf.js b/nightwatch.conf.js
new file mode 100644
index 0000000..3ce7bb3
--- /dev/null
+++ b/nightwatch.conf.js
@@ -0,0 +1,20 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+const enabled = !process.env.CI;
+
+module.exports = {
+  test_settings: {
+    default: {
+      screenshots: {
+        enabled,
+        on_failure: true,
+        on_error: true,
+        path: 'tests/e2e/reports/screenshots',
+      },
+    },
+  },
+};
diff --git a/src/App.vue b/src/App.vue
index f22bf83..38f5442 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,6 +4,10 @@
   - Author: eidng8
   -->
 
+<!--
+  - This is the E2E test page. Please make sure tests are updated accordingly.
+  -->
+
 <template>
   <div id="app">
     <div>
@@ -11,25 +15,31 @@
       <span id="tagClicked">{{ tagClicked }}</span>
     </div>
     <div>
-      <button @click="populate()">populate tree</button>
+      <button id="populate" @click="populate()">populate tree</button>
       <ul class="g8-tree-view g8-tree__dark g8-tree__highlight_hover">
-        <g8-tree-view :item="item" :checker="true">
+        <g8-tree-view
+          item-id="key"
+          item-label="text"
+          tags-key="badges"
+          children-key="nodes"
+          tag-id="key"
+          tag-label="text"
+          tag-hint="tip"
+          :item="item"
+          :checker="true"
+          @click="itemClicked = $event.data.text"
+        >
           <template #default="{ item }">
-            <span
-              :id="item.key"
-              :class="{ tint: !item.tint }"
-              @click="itemClicked = item.name"
-            >
-              {{ item.name }}
+            <span :class="{ tint: !item.tint }">
+              {{ item.text }}
             </span>
           </template>
-          <template #tag="{ tag }">
+          <template #tag="{ item, tag }">
             <span
-              :id="tag.key"
               :class="{ tint: !tag.tint }"
-              @click="tagClicked = tag.label"
+              @click.prevent.stop="tagClicked = `${item.text}, ${tag.text}`"
             >
-              {{ tag.label }}
+              {{ tag.text }}
             </span>
           </template>
         </g8-tree-view>
@@ -50,7 +60,7 @@ import { G8TreeItem, G8TreeView } from './';
 export default class App extends Vue {
   item = {
     key: 'root',
-    name: 'Click the button above to populate me.',
+    text: 'Click the button above to populate me.',
   } as G8TreeItem;
 
   tab = 1;
@@ -75,31 +85,39 @@ export default class App extends Vue {
     const total = 10;
     this.item = {
       key: 'root',
-      name: 'root name',
-      tags: [{ label: 'root label' }],
-      cssClass: [''],
+      text: 'root name',
+      badges: [{ text: 'root tag' }],
     };
     const children = [];
     for (let i = 1; i < total; i++) {
       const child: G8TreeItem = {
         key: `key-${i}`,
-        name: `name ${i}`,
+        text: `name ${i}`,
         tint: i % 5,
-        tags: [{ tint: i % 5, key: `tag-${i}`, label: `tag ${i}` }],
+        badges: [
+          { tint: i % 5, key: `tag-${i}`, text: `tag ${i}`, tip: `tip ${i}` },
+        ],
       };
       const sub = [];
       for (let j = 1; j < total; j++) {
         sub.push({
-          key: `key-${i}.${j}`,
-          name: `name ${i}.${j}`,
+          key: `key-${i}-${j}`,
+          text: `name ${i}.${j}`,
           tint: j % 5,
-          tags: [{ tint: j % 5, key: `tag-${i}.${j}`, label: `tag ${i}.${j}` }],
+          badges: [
+            {
+              tint: j % 5,
+              key: `tag-${i}-${j}`,
+              text: `tag ${i}.${j}`,
+              tip: `tip ${i}.${j}`,
+            },
+          ],
         });
       }
-      child.children = sub;
+      child.nodes = sub;
       children.push(child);
     }
-    this.item.children = children;
+    this.item.nodes = children;
   }
 }
 </script>
diff --git a/src/components/G8TreeView.vue b/src/components/G8TreeView.vue
index 8f44d97..8b03e64 100644
--- a/src/components/G8TreeView.vue
+++ b/src/components/G8TreeView.vue
@@ -5,33 +5,38 @@
   -->
 
 <template>
-  <li class="g8-tree__node" :class="{ 'g8-tree__node_expended': expanded }">
+  <li
+    :id="item[itemId]"
+    class="g8-tree__node"
+    :class="{ 'g8-tree__node_expended': expanded }"
+  >
     <div
-      class="g8-tree__node_label"
+      class="g8-tree__node_entry"
       :class="{ 'g8-tree__branch_label': hasChild }"
       @click="clicked($event)"
     >
-      <span class="g8-tree__toggle"></span>
+      <span class="g8-tree__node_branch_toggle"></span>
       <span
         v-if="checker"
-        class="g8-tree__checker"
+        class="g8-tree__node_entry_checker"
         @click.stop.prevent="setState(!checked)"
         :class="{
-          'g8-tree__checked': checked,
-          'g8-tree__checked_some': intermediate,
+          'g8-tree__node_entry_checker_checked': checked,
+          'g8-tree__node_entry_checker_checked_some': intermediate,
         }"
       ></span>
-      <span class="g8-tree__node_label_text">
+      <span class="g8-tree__node_entry_label">
         <slot :item="item">{{ item[itemLabel] }}</slot>
       </span>
-      <span class="g8-tree__node_tags">
+      <span class="g8-tree__node_entry_tags">
         <label
-          class="g8-tree__node_tag"
+          class="g8-tree__node_entry_tags_tag"
           v-for="(tag, idx) in item[tagsKey]"
           :key="idx"
+          :id="tag[tagId]"
           :title="tag[tagHint]"
         >
-          <slot name="tag" :tag="tag">{{ tag[tagLabel] }}</slot>
+          <slot name="tag" :tag="tag" :item="item">{{ tag[tagLabel] }}</slot>
         </label>
       </span>
     </div>
@@ -41,11 +46,14 @@
         :key="index"
         :item="child"
         :checker="checker"
+        :item-id="itemId"
         :item-label="itemLabel"
         :tags-key="tagsKey"
         :children-key="childrenKey"
+        :tag-id="tagId"
         :tag-label="tagLabel"
         :tag-hint="tagHint"
+        @click="$emit('click', $event)"
         @state-changed="childrenStateChanged($event)"
       >
         <template
@@ -75,6 +83,11 @@ import { G8ClickEvent, G8TreeItem } from './types';
  */
 @Component({ name: 'g8-tree-view' })
 export default class G8TreeView extends Vue {
+  /**
+   * Key of the field in `item` that holds node label.
+   */
+  @Prop({ default: 'id' }) itemId!: string;
+
   /**
    * Key of the field in `item` that holds node label.
    */
@@ -90,6 +103,11 @@ export default class G8TreeView extends Vue {
    */
   @Prop({ default: 'children' }) childrenKey!: string;
 
+  /**
+   * Key of the field in tags list of `item` that holds tag label.
+   */
+  @Prop({ default: 'id' }) tagId!: string;
+
   /**
    * Key of the field in tags list of `item` that holds tag label.
    */
@@ -166,10 +184,16 @@ export default class G8TreeView extends Vue {
       this.$children.forEach(c => {
         (c as G8TreeView).setState(state);
       });
-    } else if (this.item.children && this.item.children.length) {
+    } else if (
+      this.item[this.childrenKey] &&
+      (this.item[this.childrenKey] as G8TreeItem[]).length
+    ) {
       // descend to all descendant's data and update their states,
       // this is necessary because sub-components have not been created yet.
-      this.item.children.forEach(c => (c.checked = state));
+      this.walkItems(
+        this.item[this.childrenKey] as G8TreeItem[],
+        c => (c.checked = state),
+      );
     }
     /**
      * Checkbox state of the node has changed.
@@ -203,7 +227,7 @@ export default class G8TreeView extends Vue {
    */
   childrenStateChanged(node: G8TreeItem) {
     let checked = 0;
-    const children: G8TreeItem[] = this.item.children as G8TreeItem[];
+    const children: G8TreeItem[] = this.item[this.childrenKey] as G8TreeItem[];
     for (const child of children) {
       if (child.intermediate) {
         this.intermediate = this.item.intermediate = true;
@@ -230,5 +254,14 @@ export default class G8TreeView extends Vue {
     }
     this.$emit('state-changed', node);
   }
+
+  private walkItems(item: G8TreeItem[], cb: (entry: G8TreeItem) => void) {
+    item.forEach(entry => {
+      cb(entry);
+      if (entry[this.childrenKey]) {
+        this.walkItems(entry[this.childrenKey] as G8TreeItem[], cb);
+      }
+    });
+  }
 }
 </script>
diff --git a/src/components/tree-view.scss b/src/components/tree-view.scss
index 94977f0..347821d 100644
--- a/src/components/tree-view.scss
+++ b/src/components/tree-view.scss
@@ -30,7 +30,8 @@ $g8-tree-fg: #333 !default;
   padding: 0.1rem 0 0.1rem 1rem;
 }
 
-.g8-tree__node_label {
+.g8-tree__node_entry {
+  width: 100%;
   cursor: pointer;
   border-radius: 4px;
 
@@ -39,18 +40,18 @@ $g8-tree-fg: #333 !default;
   }
 }
 
-.g8-tree__toggle,
-.g8-tree__checker {
+.g8-tree__node_branch_toggle,
+.g8-tree__node_entry_checker {
   font-size: 0.8rem;
   width: 1rem;
   text-align: center;
 }
 
-.g8-tree__toggle:before {
+.g8-tree__node_branch_toggle:before {
   content: '\2022';
 }
 
-.g8-tree__checker {
+.g8-tree__node_entry_checker {
   position: relative;
   margin-right: 4px;
 
@@ -80,17 +81,17 @@ $g8-tree-fg: #333 !default;
   }
 }
 
-.g8-tree__checked_some:after {
+.g8-tree__node_entry_checker_checked_some:after {
   content: '\2237';
   visibility: visible;
 }
 
-.g8-tree__checked {
-  &.g8-tree__checked_some:after {
+.g8-tree__node_entry_checker_checked {
+  &.g8-tree__node_entry_checker_checked_some:after {
     content: '\2237';
   }
 
-  &.g8-tree__checker:after {
+  &.g8-tree__node_entry_checker:after {
     visibility: visible;
   }
 }
@@ -98,18 +99,18 @@ $g8-tree-fg: #333 !default;
 .g8-tree__branch_label {
   font-weight: bold;
 
-  .g8-tree__toggle:before {
+  .g8-tree__node_branch_toggle:before {
     padding-right: 0.5rem;
     content: '\25ba';
   }
 }
 
-.g8-tree__node_tags,
-.g8-tree__node_tag {
+.g8-tree__node_entry_tags,
+.g8-tree__node_entry_tags_tag {
   display: inline-block;
 }
 
-.g8-tree__node_tag {
+.g8-tree__node_entry_tags_tag {
   margin-left: 0.5rem;
   padding: 0 0.2rem;
   font-size: 0.6rem;
@@ -132,12 +133,12 @@ $g8-tree-fg: #333 !default;
     display: block;
   }
 
-  > .g8-tree__node_label > .g8-tree__toggle:before {
+  > .g8-tree__node_entry > .g8-tree__node_branch_toggle:before {
     content: '\25bc';
   }
 }
 
-.g8-tree__highlight_hover .g8-tree__node_label {
+.g8-tree__highlight_hover .g8-tree__node_entry {
   &:hover,
   &:focus {
     background: lighten($g8-tree-bg, 10%);
@@ -147,7 +148,7 @@ $g8-tree-fg: #333 !default;
 .g8-tree-view.g8-tree__dark {
   color: darken($g8-tree-bg, 20%);
 
-  .g8-tree__checker {
+  .g8-tree__node_entry_checker {
     &:before {
       background: lighten($g8-tree-fg, 10%);
     }
@@ -160,7 +161,7 @@ $g8-tree-fg: #333 !default;
     }
   }
 
-  .g8-tree__node_tag {
+  .g8-tree__node_entry_tags_tag {
     background: lighten($g8-tree-fg, 5%);
 
     &:hover,
@@ -169,8 +170,8 @@ $g8-tree-fg: #333 !default;
     }
   }
 
-  &.g8-tree__highlight_hover .g8-tree__node_label:hover,
-  &.g8-tree__highlight_hover .g8-tree__node_label:focus {
+  &.g8-tree__highlight_hover .g8-tree__node_entry:hover,
+  &.g8-tree__highlight_hover .g8-tree__node_entry:focus {
     background: lighten($g8-tree-fg, 10%);
   }
 }
diff --git a/src/components/types.ts b/src/components/types.ts
index 01e864c..50e68c4 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -16,7 +16,7 @@ export interface G8TreeItem {
   /**
    * Item name, serves as label, will be rendered as node label.
    */
-  name: string;
+  name?: string;
 
   /**
    * Whether current node is checked.
diff --git a/tests/e2e/custom-assertions/containsOrMatches.js b/tests/e2e/custom-assertions/containsOrMatches.js
new file mode 100644
index 0000000..da48f11
--- /dev/null
+++ b/tests/e2e/custom-assertions/containsOrMatches.js
@@ -0,0 +1,132 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+/**
+ *
+ * @param {string} selector
+ * @param {string|RegExp} search
+ * @param {string} msg
+ */
+exports.assertion = function (selector, search, msg) {
+  let text = '';
+
+  // If the custom commands operates with DOM elements, this options should be set
+  this.options = {
+    elementSelector: true,
+  };
+
+  /**
+   * Returns the message format which will be used to output the message in the
+   * console and also the arguments which will be used for replace the place
+   * holders, used in the order of appearance
+   *
+   * The message format also takes into account whether the `.not` negate has
+   * been used
+   *
+   * @return {{args: [], message: string}}
+   */
+  this.formatMessage = function () {
+    if (!msg) {
+      if (search instanceof RegExp) {
+        msg = `Testing if %s label ${
+          this.negate ? "doesn't match" : 'matches'
+        } %s`;
+      } else {
+        msg = `Testing if %s label ${
+          this.negate ? "doesn't contain" : 'contains'
+        } %s`;
+      }
+    }
+
+    return {
+      message: msg,
+      args: [
+        this.elementSelector,
+        search instanceof RegExp ? search.toString() : `'${search}'`,
+      ],
+    };
+  };
+
+  /**
+   * Returns the expected value of the assertion which is displayed in the case
+   * of a failure
+   *
+   * @return {string}
+   */
+  this.expected = function () {
+    if (search instanceof RegExp) {
+      return (
+        `'${text}' ` +
+        (this.negate ? `doesn't match '${search}'` : `matches '${search}'`)
+      );
+    }
+    return (
+      `'${text}' ` +
+      (this.negate ? `doesn't contain '${search}'` : `contains '${search}'`)
+    );
+  };
+
+  /**
+   * Given the value, the condition used to evaluate if the assertion is passed
+   * @param {*} value
+   * @return {Boolean}
+   */
+  this.evaluate = function (value) {
+    if (typeof value != 'string') return false;
+    if (search instanceof RegExp) return search.test(value);
+    return value.includes(search);
+  };
+
+  /**
+   * Called with the result object of the command to retrieve the value which
+   * is to be evaluated
+   *
+   * @param {Object} result
+   * @return {*}
+   */
+  this.value = function (result) {
+    return result.value;
+  };
+
+  /**
+   * When defined, this method is called by the assertion runner with the
+   * command result, to determine if the value can be retrieved successfully
+   * from the result object
+   *
+   * @param result
+   * @return {boolean|*}
+   */
+  this.failure = function (result) {
+    return false === result || (result && -1 === result.status);
+  };
+
+  /**
+   * When defined, this method is called by the assertion runner with the
+   * command result to determine the actual state of the assertion in the event
+   * of a failure
+   *
+   * @param {Boolean} passed
+   * @return {string}
+   */
+  this.actual = function (passed) {
+    if (search instanceof RegExp) {
+      return `'${text}' ${passed ? 'matches' : "doesn't match"} '${search}'`;
+    }
+    return `'${text}' ${passed ? 'contains' : "doesn't contain"} '${search}'`;
+  };
+
+  /**
+   * The command which is to be executed by the assertion runner; Nightwatch
+   * api is available as `this.api`
+   * @param {function} callback
+   */
+  this.command = function (callback) {
+    this.api.getText(selector, r => {
+      text = r.value;
+      callback(r);
+    });
+  };
+};
diff --git a/tests/e2e/custom-commands/assertChecked.js b/tests/e2e/custom-commands/assertChecked.js
new file mode 100644
index 0000000..9f60e8c
--- /dev/null
+++ b/tests/e2e/custom-commands/assertChecked.js
@@ -0,0 +1,17 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+const checkerSelector = require('../helpers').checkerSelector;
+
+/**
+ * @param {string} selector
+ */
+module.exports.command = function (selector) {
+  return this.assert.cssClassPresent(
+    checkerSelector(selector),
+    'g8-tree__node_entry_checker_checked',
+  );
+};
diff --git a/tests/e2e/custom-commands/assertClickRespondantContains.js b/tests/e2e/custom-commands/assertClickRespondantContains.js
new file mode 100644
index 0000000..3967ce9
--- /dev/null
+++ b/tests/e2e/custom-commands/assertClickRespondantContains.js
@@ -0,0 +1,14 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+const checkerSelector = require('../helpers').checkerSelector;
+
+/**
+ * @param {string} search
+ */
+module.exports.command = function (search) {
+  return this.assert.containsOrMatches('#itemClicked', search);
+};
diff --git a/tests/e2e/custom-commands/assertCollapsed.js b/tests/e2e/custom-commands/assertCollapsed.js
new file mode 100644
index 0000000..e9019ef
--- /dev/null
+++ b/tests/e2e/custom-commands/assertCollapsed.js
@@ -0,0 +1,12 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+/**
+ * @param {string} selector
+ */
+module.exports.command = function (selector) {
+  return this.assert.not.cssClassPresent(selector, 'g8-tree__node_expended');
+};
diff --git a/tests/e2e/custom-commands/assertEntryContains.js b/tests/e2e/custom-commands/assertEntryContains.js
new file mode 100644
index 0000000..558c6b6
--- /dev/null
+++ b/tests/e2e/custom-commands/assertEntryContains.js
@@ -0,0 +1,16 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+const labelSelector = require('../helpers').entrySelector;
+
+/**
+ * @param {string} selector
+ * @param {string|RegExp} search
+ * @param {string} [msg]
+ */
+module.exports.command = function (selector, search, msg) {
+  return this.assert.containsOrMatches(labelSelector(selector), search, msg);
+};
diff --git a/tests/e2e/custom-commands/assertExpanded.js b/tests/e2e/custom-commands/assertExpanded.js
new file mode 100644
index 0000000..7e0a1d1
--- /dev/null
+++ b/tests/e2e/custom-commands/assertExpanded.js
@@ -0,0 +1,12 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+/**
+ * @param {string} selector
+ */
+module.exports.command = function (selector) {
+  return this.assert.cssClassPresent(selector, 'g8-tree__node_expended');
+};
diff --git a/tests/e2e/custom-commands/assertIntermediate.js b/tests/e2e/custom-commands/assertIntermediate.js
new file mode 100644
index 0000000..c8d6253
--- /dev/null
+++ b/tests/e2e/custom-commands/assertIntermediate.js
@@ -0,0 +1,17 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+const checkerSelector = require('../helpers').checkerSelector;
+
+/**
+ * @param {string} selector
+ */
+module.exports.command = function (selector) {
+  return this.assert.cssClassPresent(
+    checkerSelector(selector),
+    'g8-tree__node_entry_checker_checked_some',
+  );
+};
diff --git a/tests/e2e/custom-commands/assertTagContains.js b/tests/e2e/custom-commands/assertTagContains.js
new file mode 100644
index 0000000..175ce5d
--- /dev/null
+++ b/tests/e2e/custom-commands/assertTagContains.js
@@ -0,0 +1,14 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+/**
+ * @param {string} selector
+ * @param {string|RegExp} search
+ * @param {string} [msg]
+ */
+module.exports.command = function (selector, search, msg) {
+  return this.assert.containsOrMatches(selector, search, msg);
+};
diff --git a/tests/e2e/custom-commands/assertTagRespondantContains.js b/tests/e2e/custom-commands/assertTagRespondantContains.js
new file mode 100644
index 0000000..31b4a46
--- /dev/null
+++ b/tests/e2e/custom-commands/assertTagRespondantContains.js
@@ -0,0 +1,14 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+const checkerSelector = require('../helpers').checkerSelector;
+
+/**
+ * @param {string} search
+ */
+module.exports.command = function (search) {
+  return this.assert.containsOrMatches('#tagClicked', search);
+};
diff --git a/tests/e2e/custom-commands/assertUnchecked.js b/tests/e2e/custom-commands/assertUnchecked.js
new file mode 100644
index 0000000..a5bfe6f
--- /dev/null
+++ b/tests/e2e/custom-commands/assertUnchecked.js
@@ -0,0 +1,17 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+const checkerSelector = require('../helpers').checkerSelector;
+
+/**
+ * @param {string} selector
+ */
+module.exports.command = function (selector) {
+  return this.assert.not.cssClassPresent(
+    checkerSelector(selector),
+    'g8-tree__node_entry_checker_checked',
+  );
+};
diff --git a/tests/e2e/custom-commands/clickChecker.js b/tests/e2e/custom-commands/clickChecker.js
new file mode 100644
index 0000000..d7927ad
--- /dev/null
+++ b/tests/e2e/custom-commands/clickChecker.js
@@ -0,0 +1,22 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+const Events = require('events');
+const checkerSelector = require('../helpers').checkerSelector;
+
+module.exports = class ClickLabel extends Events {
+  /**
+   * @param {string} selector
+   * @param {Function} callback
+   */
+  command(selector, callback) {
+    this.api.click(checkerSelector(selector), result => {
+      if ('function' == typeof callback) callback.call(this, result);
+      this.emit('complete');
+      return this;
+    });
+  }
+};
diff --git a/tests/e2e/custom-commands/clickLabel.js b/tests/e2e/custom-commands/clickLabel.js
new file mode 100644
index 0000000..8b2bf86
--- /dev/null
+++ b/tests/e2e/custom-commands/clickLabel.js
@@ -0,0 +1,22 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+const Events = require('events');
+const labelSelector = require('../helpers').entrySelector;
+
+module.exports = class ClickLabel extends Events {
+  /**
+   * @param {string} selector
+   * @param {Function} [callback]
+   */
+  command(selector, callback) {
+    this.api.click(labelSelector(selector), result => {
+      if ('function' == typeof callback) callback.call(this, result);
+      this.emit('complete');
+      return this;
+    });
+  }
+};
diff --git a/tests/e2e/custom-commands/clickTag.js b/tests/e2e/custom-commands/clickTag.js
new file mode 100644
index 0000000..782206b
--- /dev/null
+++ b/tests/e2e/custom-commands/clickTag.js
@@ -0,0 +1,21 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+const Events = require('events');
+
+module.exports = class ClickLabel extends Events {
+  /**
+   * @param {string} selector
+   * @param {Function} [callback]
+   */
+  command(selector, callback) {
+    this.api.click(selector, result => {
+      if ('function' == typeof callback) callback.call(this, result);
+      this.emit('complete');
+      return this;
+    });
+  }
+};
diff --git a/tests/e2e/custom-commands/open.js b/tests/e2e/custom-commands/open.js
new file mode 100644
index 0000000..83cf943
--- /dev/null
+++ b/tests/e2e/custom-commands/open.js
@@ -0,0 +1,33 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+/**
+ * A class-based Nightwatch custom command which is a variation of the
+ * openHomepage.js command. The command name is the filename and class needs to
+ * contain a "command" method.
+ *
+ * Example usage:
+ *   browser.openHomepageClass();
+ *
+ * For more information on writing custom commands see:
+ *   https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-commands
+ *
+ */
+
+module.exports.command = function () {
+  this.init()
+    .waitForElementVisible('#app')
+
+    // the tree view is rendered
+    .assert.elementPresent('.g8-tree-view')
+    // the root node's text is correct
+    .assertEntryContains('#root', /Click the button above to populate me\./i)
+
+    // generates test data
+    .click('#populate')
+    // root node's text has changed
+    .assertEntryContains('#root', 'root name', '%s label has changed to %s');
+};
diff --git a/tests/e2e/helpers.js b/tests/e2e/helpers.js
new file mode 100644
index 0000000..04ee012
--- /dev/null
+++ b/tests/e2e/helpers.js
@@ -0,0 +1,63 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+/**
+ * @param {string} selector
+ * @return {string[]}
+ */
+function makeLabelSelectors(selector) {
+  selector = selector ? selector.trim() : '';
+  return selector
+    .split(',')
+    .map(s => s.trim())
+    .map(s => (s ? `${s}>` : '') + '.g8-tree__node_entry');
+}
+
+/**
+ * @param {string[]} selectors
+ * @param {string} sub
+ * @return {string}
+ */
+function makeSelectors(selectors, sub) {
+  return selectors.map(s => `${s}${sub}`).join(',');
+}
+
+/**
+ * @param {string} selector
+ * @return {string}
+ */
+function checkerSelector(selector) {
+  return makeSelectors(
+    makeLabelSelectors(selector),
+    '>.g8-tree__node_entry_checker',
+  );
+}
+
+/**
+ * @param {string} selector
+ * @return {string|string[]}
+ */
+function entrySelector(selector) {
+  return makeLabelSelectors(selector).join(',');
+}
+
+/**
+ * @param {string} selector
+ * @return {string}
+ */
+function labelSelector(selector) {
+  return makeSelectors(
+    makeLabelSelectors(selector),
+    '>.g8-tree__node_entry_label',
+  );
+}
+
+module.exports = {
+  checkerSelector,
+  entrySelector: entrySelector,
+  labelSelector,
+  makeSelectors,
+};
diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js
index 5eab7b3..aa13862 100644
--- a/tests/e2e/specs/test.js
+++ b/tests/e2e/specs/test.js
@@ -4,97 +4,86 @@
  * Author: eidng8
  */
 
-const root = '.g8-tree-view>.g8-tree__node';
-const rootLabel = `${root}>.g8-tree__node_label`;
-const branch2 = `${root}>.g8-tree__branch`;
-const label2 = `${branch2}>.g8-tree__node:nth-child(2)>.g8-tree__node_label`;
-const leaf = '.g8-tree__branch .g8-tree__branch';
+const { labelSelector, makeSelectors } = require('../helpers');
 
 module.exports = {
   'basic tests': browser => {
     browser
       .init()
       .waitForElementVisible('#app')
-      .assert // the tree view is rendered
-      .elementPresent('.g8-tree-view')
-      .assert // the root node's text is correct
-      .containsText(
-        '.g8-tree__node_label_text',
-        'Click the button above to populate me.',
-      )
 
-      // this button generates test data
-      .click('button')
-      .assert // root node's text has changed
-      .containsText('.g8-tree__node_label_text', 'root name')
-
-      // root node's check state propagates to descendants
-      .click('.g8-tree__checker')
-      .assert.cssClassPresent('.g8-tree__checker', 'g8-tree__checked')
-
-      // clicking the toggle expands the root
-      .click(rootLabel)
-      .assert.cssClassPresent(root, 'g8-tree__node_expended')
-      .assert // click event is fired
-      .containsText('#itemClicked', '[click] root name')
-      .assert // check state is propagated from root node
-      .cssClassPresent(`${label2}>.g8-tree__checker`, 'g8-tree__checked')
-
-      // clicking the toggle expands the first branch
-      .click(label2)
-      .assert.elementPresent('.g8-tree__branch .g8-tree__node_expended')
-      .assert // click event is fired
-      .containsText('#itemClicked', '[click] name 2')
-
-      // double clicking won't collapse the node
-      .moveToElement(rootLabel, 1, 1)
-      .doubleClick()
-      .assert.cssClassPresent(root, 'g8-tree__node_expended')
-      .assert // double click event is fired
-      .containsText('#itemDblClicked', '[dblclick] root name')
-
-      // root node's intermediate state changes to true, if child is unchecked
-      .click(`${label2}>.g8-tree__checker`)
-      .assert.cssClassPresent(
-        `${rootLabel}>.g8-tree__checker`,
-        'g8-tree__checked_some',
-      )
+      // the tree view is rendered
+      .assert.elementPresent('.g8-tree-view')
+      // the root node's text is correct
+      .assertEntryContains('#root', /Click the button above to populate me\./i)
 
-      // click event is fired on leaf node
-      .click(`${leaf} .g8-tree__node_label`)
-      .assert.containsText('#itemClicked', '[click] name 2.1')
+      // generates test data
+      .click('#populate')
+      // root node's text has changed
+      .assertEntryContains('#root', 'root name', '%s label has changed to %s')
+
+      // check root node
+      .clickChecker('#root')
+      .assertChecked('#root')
+
+      // expands root node
+      .clickLabel('#root')
+      .assertExpanded('#root')
+      .assertClickRespondantContains('root name') // click event is fired
+
+      // checking root also checks all descendants
+      .assertChecked('#key-1,#key-5,#key-9')
+
+      // expands the the 2nd node
+      .clickLabel('#key-2')
+      .assertExpanded('#key-2')
+      .assertClickRespondantContains('name 2') // click event is fired
+
+      // checking root also checks all descendants
+      .assertChecked('#key-2-1,#key-2-5,#key-2-9')
 
-      // double click event is fired on leaf node
-      .moveToElement(`${leaf} .g8-tree__node_label`, 1, 1)
-      .doubleClick()
-      .assert // click event is fired
-      .containsText('#itemDblClicked', '[dblclick] name 2.1')
+      // root node's intermediate state changes to true, if a child is unchecked
+      .clickChecker('#key-2')
+      .assertIntermediate('#root')
+
+      // unchecking a node unchecks all descendants
+      .assertUnchecked('#key-2,#key-2-3,#key-2-8')
+
+      // click event is fired on leaf node
+      .clickLabel('#key-2-1')
+      .assertClickRespondantContains('name 2.1')
 
       // click event is fired on leaf tag
-      .click(`${leaf} .g8-tree__node_tag:last-child`)
-      .assert // click event is fired
-      .containsText('#tagClicked', '[tag-click] name 2.1,tag 2.1,0')
+      .clickTag('#tag-2-1')
+      .assertTagRespondantContains('name 2.1, tag 2.1')
 
-      // double click event is fired on leaf tag
-      .moveToElement(`${leaf} .g8-tree__node_tag`, 1, 1)
-      .doubleClick()
-      .assert // click event is fired
-      .containsText('#tagDblClicked', '[tag-dblclick] name 2.1,tag 2.1,0')
+      // unchecking root node unchecks all descendants
+      .clickChecker('#root')
+      .assertUnchecked('#root,#key-3,#key-3-3,#key-9,#key-9-9')
+
+      // checking a node checks all its descendants,
+      // and set's parent's intermediate state
+      .clickChecker('#key-1')
+      .clickLabel('#key-1')
+      .assertChecked('#key-1-1,#key-1-3,#key-1-5,#key-1-9')
+      .assertIntermediate('#root')
 
       // clicking the toggle collapses the node
-      .click(rootLabel)
-      .assert.not.cssClassPresent(root, 'g8-tree__node_expended')
-
-      // click event is fired on root tag
-      .click(`${rootLabel} .g8-tree__node_tag`)
-      .assert // tag-click event is fired
-      .containsText('#tagClicked', '[tag-click] root name,root label,0')
-
-      // double click event is fired on root tag
-      .moveToElement(`${rootLabel} .g8-tree__node_tag`, 1, 1)
-      .doubleClick()
-      .assert // tag-dblclick event is fired
-      .containsText('#tagDblClicked', '[tag-dblclick] root name,root label,0')
+      .clickLabel('#key-2')
+      .assertCollapsed('#key-2')
+
+      // check if slot css class is applied
+      .assert.cssClassPresent(
+        makeSelectors(
+          labelSelector('#root,#key-1-5,#key-5').split(','),
+          '>span',
+        ),
+        'tint',
+      )
+      .assert.cssClassPresent(
+        makeSelectors(['#tag-3-5', '#tag-5'], '>span'),
+        'tint',
+      )
 
       .end();
   },
diff --git a/tests/unit/G8TreeView-basics.spec.ts b/tests/unit/G8TreeView-basics.spec.ts
index 7717f9d..552bd45 100644
--- a/tests/unit/G8TreeView-basics.spec.ts
+++ b/tests/unit/G8TreeView-basics.spec.ts
@@ -21,15 +21,15 @@ describe('Tree View props', () => {
       name: 'name',
       tags: [{ label: 'tag1' }],
     });
-    expect(wrapper.find('.g8-tree__node_label_text').text()).toBe('name');
-    expect(wrapper.find('.g8-tree__node_tag').text()).toBe('tag1');
+    expect(wrapper.find('.g8-tree__node_entry_label').text()).toBe('name');
+    expect(wrapper.find('.g8-tree__node_entry_tags_tag').text()).toBe('tag1');
   });
 
   it('defaults to have no checkbox', () => {
     expect.assertions(1);
     const propsData = { item: { name: 'signal' } };
     const wrapper = shallowMount(G8TreeView, { propsData });
-    expect(wrapper.find('.g8-tree__checker').exists()).toBeFalsy();
+    expect(wrapper.find('.g8-tree__node_entry_checker').exists()).toBeFalsy();
   });
 
   it('turns on checkbox rendering', () => {
@@ -39,7 +39,7 @@ describe('Tree View props', () => {
       item: { name: 'name' },
     };
     let wrapper = shallowMount(G8TreeView, { propsData });
-    expect(wrapper.find('.g8-tree__checker').exists()).toBeTruthy();
+    expect(wrapper.find('.g8-tree__node_entry_checker').exists()).toBeTruthy();
   });
 
   it('defaults to render only top level', () => {
@@ -53,16 +53,18 @@ describe('Tree View props', () => {
     };
     const wrapper = shallowMount(G8TreeView, { propsData });
     expect(wrapper.findAll('.g8-tree__node').length).toBe(1);
-    expect(wrapper.findAll('.g8-tree__node_tag').length).toBe(1);
+    expect(wrapper.findAll('.g8-tree__node_entry_tags_tag').length).toBe(1);
     expect(wrapper.find('.g8-tree__branch').exists()).toBeFalsy();
   });
 
   it('renders using custom props', async () => {
     expect.assertions(4);
     const propsData = {
+      itemId: 'text',
       itemLabel: 'text',
       tagsKey: 'badges',
       childrenKey: 'sub',
+      tagId: 'text',
       tagLabel: 'text',
       tagHint: 'tip',
       item: {
@@ -70,25 +72,25 @@ describe('Tree View props', () => {
         badges: [{ text: 'tag1', tip: 'tip1' }],
         sub: [
           {
-            text: 'node1.1',
-            badges: [{ text: 'tag1.1' }],
-            sub: [{ text: 'node1.1.1' }],
+            text: 'node1-1',
+            badges: [{ text: 'tag1-1' }],
+            sub: [{ text: 'node1-1-1' }],
           },
           {
-            text: 'node1.2',
-            badges: [{ text: 'tag1.2' }],
+            text: 'node1-2',
+            badges: [{ text: 'tag1-2' }],
           },
         ],
       },
     };
     const wrapper = mount(G8TreeView, { propsData });
     expect(wrapper.props('item')).toEqual(propsData.item);
-    expect(wrapper.find('.g8-tree__node_label_text').text()).toBe('node1');
-    expect(wrapper.find('.g8-tree__node_tag').attributes('title')).toBe('tip1');
-    wrapper.find('.g8-tree__node_label').trigger('click');
+    expect(wrapper.find('.g8-tree__node_entry_label').text()).toBe('node1');
+    expect(wrapper.find('#tag1').attributes('title')).toBe('tip1');
+    wrapper.find('.g8-tree__node_entry').trigger('click');
     await wrapper.vm.$nextTick();
-    expect(
-      wrapper.find('.g8-tree__branch .g8-tree__node_label_text').text(),
-    ).toBe('node1.1');
+    wrapper.find('#node1-1>.g8-tree__node_entry').trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find('#node1-1-1').text()).toBe('node1-1-1');
   });
 });
diff --git a/tests/unit/G8TreeView-events.spec.ts b/tests/unit/G8TreeView-events.spec.ts
index 309b045..5cab2fe 100644
--- a/tests/unit/G8TreeView-events.spec.ts
+++ b/tests/unit/G8TreeView-events.spec.ts
@@ -49,7 +49,7 @@ describe('Tree View events', () => {
     });
     expect.assertions(7);
     expect(wrapper.find('.g8-tree__node .g8-tree__node').exists()).toBeFalsy();
-    wrapper.find('.g8-tree__node_label').trigger('click');
+    wrapper.find('.g8-tree__node_entry').trigger('click');
     await wrapper.vm.$nextTick();
     expect(changed).toHaveBeenCalled();
     const emitted = wrapper.emitted('click');
@@ -76,7 +76,7 @@ describe('Tree View events', () => {
     );
     expect.assertions(4);
     expect(wrapper.find('.g8-tree__node .g8-tree__node').exists()).toBeFalsy();
-    wrapper.find('.g8-tree__node_label').trigger('click');
+    wrapper.find('.g8-tree__node_entry').trigger('click');
     await wrapper.vm.$nextTick();
     expect(clicked).toHaveBeenCalledWith(
       expect.objectContaining({ data: propsData.item }),
@@ -93,7 +93,7 @@ describe('Tree View events', () => {
       listeners: { 'state-changed': changed },
     });
     expect.assertions(5);
-    const checker = wrapper.find('.g8-tree__checker');
+    const checker = wrapper.find('.g8-tree__node_entry_checker');
     checker.trigger('click');
     await wrapper.vm.$nextTick();
     expect(changed).toHaveBeenCalled();
@@ -101,7 +101,7 @@ describe('Tree View events', () => {
     expect(emitted).toBeInstanceOf(Array);
     expect(emitted.length).toBe(1);
     expect(emitted[0][0]).toStrictEqual(propsData.item);
-    expect(checker.is('.g8-tree__checked')).toBeTruthy();
+    expect(checker.is('.g8-tree__node_entry_checker_checked')).toBeTruthy();
   });
 
   it('emits state-change of intermediate state', async () => {
@@ -114,18 +114,18 @@ describe('Tree View events', () => {
     expect.assertions(9);
     expect(propsData.item.intermediate).toBeFalsy();
     expect(propsData.item.children![1].intermediate).toBeFalsy();
-    wrapper.find('.g8-tree__node_label').trigger('click');
+    wrapper.find('.g8-tree__node_entry').trigger('click');
     await wrapper.vm.$nextTick();
     wrapper
-      .findAll('.g8-tree__node '.repeat(2) + '.g8-tree__node_label')
+      .findAll('.g8-tree__node '.repeat(2) + '.g8-tree__node_entry')
       .trigger('click');
     await wrapper.vm.$nextTick();
     wrapper
-      .find('.g8-tree__node '.repeat(3) + '.g8-tree__node_label')
+      .find('.g8-tree__node '.repeat(3) + '.g8-tree__node_entry')
       .trigger('click');
     await wrapper.vm.$nextTick();
     const checker = wrapper.find(
-      '.g8-tree__node '.repeat(3) + '.g8-tree__checker',
+      '.g8-tree__node '.repeat(3) + '.g8-tree__node_entry_checker',
     );
     checker.trigger('click');
     await wrapper.vm.$nextTick();
@@ -136,7 +136,7 @@ describe('Tree View events', () => {
     expect(emitted[0][0]).toStrictEqual(
       propsData.item.children![1].children![0],
     );
-    expect(checker.is('.g8-tree__checked')).toBeTruthy();
+    expect(checker.is('.g8-tree__node_entry_checker_checked')).toBeTruthy();
     expect(propsData.item.intermediate).toBeTruthy();
     expect(propsData.item.children![1].intermediate).toBeTruthy();
   });
diff --git a/tests/unit/G8TreeView-interactions.spec.ts b/tests/unit/G8TreeView-interactions.spec.ts
index c2d2c3b..ce1b4f7 100644
--- a/tests/unit/G8TreeView-interactions.spec.ts
+++ b/tests/unit/G8TreeView-interactions.spec.ts
@@ -49,30 +49,30 @@ describe('Tree View interactions', () => {
     // initially no branch were expanded nor rendered
     expect(wrapper.find('.g8-tree__node_expended').exists()).toBeFalsy();
     expect(wrapper.findAll('.g8-tree__branch').length).toBe(0);
-    expect(wrapper.findAll('.g8-tree__node_label_text').length).toBe(1);
+    expect(wrapper.findAll('.g8-tree__node_entry_label').length).toBe(1);
     // click the first branch to expand it and render the sub-tree
-    wrapper.find('.g8-tree__node_label').trigger('click');
+    wrapper.find('.g8-tree__node_entry').trigger('click');
     await wrapper.vm.$nextTick(() => {
       expect(wrapper.findAll('.g8-tree__node_expended').length).toBe(1);
-      const labels = wrapper.findAll('.g8-tree__node_label_text');
+      const labels = wrapper.findAll('.g8-tree__node_entry_label');
       expect(labels.length).toBe(3);
       expect(labels.at(0).text()).toBe('root name');
       expect(labels.at(1).text()).toBe('item 1');
       expect(labels.at(2).text()).toBe('item 2');
     });
     // click the second branch to expand it and render the sub-tree
-    wrapper.findAll('.g8-tree__branch .g8-tree__node_label').trigger('click');
+    wrapper.findAll('.g8-tree__branch .g8-tree__node_entry').trigger('click');
     await wrapper.vm.$nextTick(() => {
       expect(wrapper.findAll('.g8-tree__node_expended').length).toBe(2);
-      expect(wrapper.findAll('.g8-tree__node_label_text').length).toBe(5);
+      expect(wrapper.findAll('.g8-tree__node_entry_label').length).toBe(5);
     });
   });
 
   it('collapses branch on click', async () => {
     expect.assertions(1);
-    wrapper.find('.g8-tree__node_label').trigger('click');
+    wrapper.find('.g8-tree__node_entry').trigger('click');
     // click the top branch to collapse
-    wrapper.find('.g8-tree__node_label').trigger('click');
+    wrapper.find('.g8-tree__node_entry').trigger('click');
     await wrapper.vm.$nextTick();
     expect(wrapper.find('.g8-tree__node_expended').exists()).toBeFalsy();
   });
@@ -80,77 +80,96 @@ describe('Tree View interactions', () => {
   it('toggles check state', async () => {
     expect.assertions(1);
     // check root node = checks all
-    wrapper.find('.g8-tree__checker').trigger('click');
+    wrapper.find('.g8-tree__node_entry_checker').trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.findAll('.g8-tree__checked').length).toBe(1);
+    expect(wrapper.findAll('.g8-tree__node_entry_checker_checked').length).toBe(
+      1,
+    );
   });
 
   it('propagates checked state', async () => {
-    const checked = () => wrapper.findAll('.g8-tree__checker.g8-tree__checked');
+    const checked = () =>
+      wrapper.findAll(
+        '.g8-tree__node_entry_checker.g8-tree__node_entry_checker_checked',
+      );
     expect.assertions(2);
-    wrapper.find('.g8-tree__checker').trigger('click');
+    wrapper.find('.g8-tree__node_entry_checker').trigger('click');
     await wrapper.vm.$nextTick();
     expect(checked().length).toBe(1);
-    wrapper.find('.g8-tree__node_label').trigger('click');
+    wrapper.find('.g8-tree__node_entry').trigger('click');
     await wrapper.vm.$nextTick();
     expect(checked().length).toBe(3);
   });
 
   it('sets parent intermediate state if any child is checked', async () => {
     expect.assertions(1);
-    wrapper.find('.g8-tree__node_label').trigger('click');
+    wrapper.find('.g8-tree__node_entry').trigger('click');
     await wrapper.vm.$nextTick();
     // check 2nd branch = set root to intermediate state
-    const checkers = wrapper.findAll('.g8-tree__checker');
+    const checkers = wrapper.findAll('.g8-tree__node_entry_checker');
     checkers.at(1).trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('.g8-tree__checker').classes()).toContain(
-      'g8-tree__checked_some',
+    expect(wrapper.find('.g8-tree__node_entry_checker').classes()).toContain(
+      'g8-tree__node_entry_checker_checked_some',
     );
   });
 
   it('sets parent intermediate state if any child is unchecked', async () => {
     expect.assertions(2);
-    wrapper.find('.g8-tree__node_label').trigger('click');
+    wrapper.find('.g8-tree__node_entry').trigger('click');
     await wrapper.vm.$nextTick();
     // check root = check all descendant nodes
-    wrapper.find('.g8-tree__checker').trigger('click');
+    wrapper.find('.g8-tree__node_entry_checker').trigger('click');
     // uncheck 2nd branch = set root to intermediate state
-    const checkers = wrapper.findAll('.g8-tree__checker');
+    const checkers = wrapper.findAll('.g8-tree__node_entry_checker');
     checkers.at(1).trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('.g8-tree__checker').classes()).toContain(
-      'g8-tree__checked_some',
+    expect(wrapper.find('.g8-tree__node_entry_checker').classes()).toContain(
+      'g8-tree__node_entry_checker_checked_some',
+    );
+    expect(wrapper.findAll('.g8-tree__node_entry_checker_checked').length).toBe(
+      2,
     );
-    expect(wrapper.findAll('.g8-tree__checked').length).toBe(2);
   });
 
   it('toggles intermediate check state', async () => {
     expect.assertions(6);
-    wrapper.find('.g8-tree__node_label').trigger('click');
+    wrapper.find('.g8-tree__node_entry').trigger('click');
     await wrapper.vm.$nextTick();
     wrapper
-      .find('.g8-tree__branch .g8-tree__node:nth-child(2) .g8-tree__node_label')
+      .find('.g8-tree__branch .g8-tree__node:nth-child(2) .g8-tree__node_entry')
       .trigger('click');
     await wrapper.vm.$nextTick();
-    const checkers = wrapper.findAll('.g8-tree__checker');
+    const checkers = wrapper.findAll('.g8-tree__node_entry_checker');
     // check last node = set root & 2nd branch to intermediate
     checkers.at(checkers.length - 1).trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.findAll('.g8-tree__checked_some').length).toBe(2);
+    expect(
+      wrapper.findAll('.g8-tree__node_entry_checker_checked_some').length,
+    ).toBe(2);
     // check root node = check all
     checkers.at(0).trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.findAll('.g8-tree__checked').length).toBe(5);
+    expect(wrapper.findAll('.g8-tree__node_entry_checker_checked').length).toBe(
+      5,
+    );
     // uncheck last node = set root & 2nd branch to intermediate
     checkers.at(checkers.length - 1).trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.findAll('.g8-tree__checked_some').length).toBe(2);
-    expect(wrapper.findAll('.g8-tree__checked').length).toBe(4);
+    expect(
+      wrapper.findAll('.g8-tree__node_entry_checker_checked_some').length,
+    ).toBe(2);
+    expect(wrapper.findAll('.g8-tree__node_entry_checker_checked').length).toBe(
+      4,
+    );
     // uncheck 2nd last node = set root & 2nd branch to intermediate
     checkers.at(checkers.length - 2).trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.findAll('.g8-tree__checked_some').length).toBe(1);
-    expect(wrapper.findAll('.g8-tree__checked').length).toBe(2);
+    expect(
+      wrapper.findAll('.g8-tree__node_entry_checker_checked_some').length,
+    ).toBe(1);
+    expect(wrapper.findAll('.g8-tree__node_entry_checker_checked').length).toBe(
+      2,
+    );
   });
 });

From 863c044b7c6a8f5ce768a796ed192154eb994043 Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Sat, 25 Apr 2020 20:36:10 +0800
Subject: [PATCH 10/13] fix #43

---
 tests/unit/G8TreeView-events.spec.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/tests/unit/G8TreeView-events.spec.ts b/tests/unit/G8TreeView-events.spec.ts
index 5cab2fe..d8406d1 100644
--- a/tests/unit/G8TreeView-events.spec.ts
+++ b/tests/unit/G8TreeView-events.spec.ts
@@ -51,7 +51,7 @@ describe('Tree View events', () => {
     expect(wrapper.find('.g8-tree__node .g8-tree__node').exists()).toBeFalsy();
     wrapper.find('.g8-tree__node_entry').trigger('click');
     await wrapper.vm.$nextTick();
-    expect(changed).toHaveBeenCalled();
+    expect(changed).toHaveBeenCalledTimes(1);
     const emitted = wrapper.emitted('click');
     expect(emitted).toBeInstanceOf(Array);
     expect(emitted.length).toBe(1);
@@ -74,11 +74,12 @@ describe('Tree View events', () => {
       } as ComponentOptions<any>,
       { provide: propsData },
     );
-    expect.assertions(4);
+    expect.assertions(5);
     expect(wrapper.find('.g8-tree__node .g8-tree__node').exists()).toBeFalsy();
     wrapper.find('.g8-tree__node_entry').trigger('click');
     await wrapper.vm.$nextTick();
-    expect(clicked).toHaveBeenCalledWith(
+    expect(clicked).toHaveBeenCalledTimes(1);
+    expect(clicked).toHaveBeenLastCalledWith(
       expect.objectContaining({ data: propsData.item }),
     );
     expect(wrapper.emitted('click')).toBeUndefined();

From b05dede886b1296494ab5c8d4d27327f6255e5ff Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Sun, 26 Apr 2020 22:40:02 +0800
Subject: [PATCH 11/13] update documentation

---
 README.md                     | 114 ++++++++++++++++++++--------------
 src/components/G8TreeView.vue |   5 +-
 src/components/types.ts       |   2 +-
 3 files changed, 73 insertions(+), 48 deletions(-)

diff --git a/README.md b/README.md
index 3efa43d..7322a83 100644
--- a/README.md
+++ b/README.md
@@ -13,79 +13,103 @@ The DOM structure of this component doesn't change once rendered. Comparing to o
 
 There is an [issue](https://github.com/eidng8/vue-tree/issues/24) for this. Check out more detail there.
 
-## Theming
+## Props
 
-The bundled style sheet can be imported from `'g8-vue-tree/dist/g8-vue-tree.css'`. This component provides a dark theme out of box. To use it, just add the `g8-tree__dark` class to the element.
+| Prop name | Description | Type | Default |
+| --- | --- | :-: | :-: |
+| item-id | Key of the field in `item` to be used as element's `id` attribute. | string | 'id' |
+| item-label | Key of the field in `item` that holds node label. | string | 'name' |
+| tags-key | Key of the field in `item` that holds tags array. | string | 'tags' |
+| children-key | Key of the field in `item` that holds child nodes array. | string | 'children' |
+| tag-id | Key of the field in tags list of `item` to be used as tag element's `id` attribute. | string | 'id' |
+| tag-label | Key of the field in tags list of `item` that holds tag label. | string | 'label' |
+| tag-hint | Key of the field in tags list of `item` that holds tag tooltip. | string | 'hint' |
+| checker | Whether to add a checkbox before each item,<br>allowing multiple nodes tobe checked. | boolean | false |
+| item | The tree data to be rendered.<br>Please note that data passed **_may_** be mutated by this<br>component to reflect various states of tree nodes.<br>Mutated fields include:<br>- checked<br>- intermediate<br>- rendered | [G8TreeItem](#g8treeitem) |  |
 
-```html
-<ul class="g8-tree-view g8-tree__dark">
-  <g8-tree-view></g8-tree-view>
-</ul>
-```
+## Scoped slots
 
-If you want to change the color of the component, just define two variables before importing the scss file.
+#### Default slot
 
-```scss
-/* index.scss */
+```vue
+<span class="g8-tree__node_entry_label">
+  <slot :item="item">{{ item[itemLabel] }}</slot>
+</span>
+```
 
-/* define these two variables before importing the scss file */
-$g8-tree-bg: #ccc;
-$g8-tree-fg: #333;
+This is the entry's main content slot. Defaults to `{{ item[itemLabel] }}`. The current item entry is exposed as scoped variable `item`.
 
-@import '~vue-tree/src/components/tree-view.scss';
-```
+#### Tag slot
 
-## Props
+```vue
+<label
+  class="g8-tree__node_entry_tags_tag"
+  v-for="(tag, idx) in item[tagsKey]"
+  :key="idx"
+  :id="tag[tagId]"
+  :title="tag[tagHint]"
+>
+  <slot name="tag" :tag="tag" :item="item">{{ tag[tagLabel] }}</slot>
+</label>
+```
 
-| Prop name | Description | Type | Default |
-| --- | --- | :-: | :-: |
-| itemLabel | Key of the field in `item` that holds node label. | string | 'name' |
-| tagsKey | Key of the field in `item` that holds tags array. | string | 'tags' |
-| childrenKey | Key of the field in `item` that holds child nodes array. | string | 'children' |
-| tagLabel | Key of the field in tags list of `item` that holds tag label. | string | 'label' |
-| tagHint | Key of the field in tags list of `item` that holds tag tooltip. | string | 'hint' |
-| handleRightClick <a id="handleRightClick"></a> | Whether to intercept right mouse click. | boolean | false |
-| checker | Whether to add a checkbox before each item,<br>allowing multiple nodes tobe checked. | boolean | false |
-| item | The tree data to be rendered.<br>Please note that data passed **_may_** be mutated by this<br>component to reflect various states of tree nodes.<br>Mutated fields include:<br>- checked<br>- intermediate<br>- rendered | [G8TreeItem](#G8TreeItem) |  |
+This is the entry's tag content slot. Defaults to `{{ tag[tagLabel] }}`. The current item entry is exposed as scoped variable `item`. The current tag is exposed as scoped variable `tag`.
 
 ## Events
 
 | Event name | Type | Description |
 | --- | :-: | --- |
-| click | [G8TreeItem](#G8TreeItem) | A tree node has been clicked. |
-| middle-click | [G8TreeItem](#G8TreeItem) | A tree node has been clicked with middle mouse button. |
-| right-click | [G8TreeItem](#G8TreeItem) | A tree node has been clicked with right mouse button.<br>Only available if [handleRightClick](#handleRightClick) is `true` |
-| dblclick | [G8TreeItem](#G8TreeItem) | A tree node has been double clicked. |
-| tag-click | [G8TagClickEvent](#G8TagClickEvent) | A tree node tag has been clicked. |
-| tag-middle-click | [G8TagClickEvent](#G8TagClickEvent) | A tree node tag has been clicked. |
-| tag-right-click | [G8TagClickEvent](#G8TagClickEvent) | A tree node has been clicked with right mouse button.<br>Only available if [handleRightClick](#handleRightClick) is `true` |
-| tag-dblclick | [G8TagClickEvent](#G8TagClickEvent) | A tree node tag has been double clicked. |
-| state-changed | [G8TreeItem](#G8TreeItem) | Checkbox state of the node has changed. |
+| click | [G8TreeItem](#g8treeitem) | A tree node has been clicked. |
+| state-changed | [G8TreeItem](#g8treeitem) | Checkbox state of the node has changed. |
 
 ## Types
 
 #### G8TreeItem
 
+Below is a list of presumable fields, all of them are optional. You can place whatever data you want to a tree item, then use the [props](#props) mentioned above to specify content you want to display.
+
 | Field name | Type | Description |
 | --- | :-: | --- |
 | name | string | Item name, serves as label, will be rendered as node label. |
-| checked | boolean | Whether current node is checked. |
-| intermediate | boolean | Intermediate check box state. Active while some of the children were checked, but not all. |
+| checked | boolean | Whether the node is checked. |
+| intermediate | boolean | Intermediate check box state. Active while some children were checked. |
 | rendered | boolean | Whether the sub-tree of this node has been rendered. |
-| tags | [G8TreeItemTag](#G8TreeItemTag)\[] | List of tags. |
-| children | [G8TreeItem](#G8TreeItem)\[] | List of child nodes. |
+| tags | [G8TreeItemTag](#g8treeitemtag)\[] | List of tags. |
+| children | [G8TreeItem](#g8treeitem)\[] | List of child nodes. |
 
 #### G8TreeItemTag
 
+Below is a list of presumable fields, all of them are optional. You can place whatever data you want to tags, then use the [props](#props) mentioned above to specify content you want to display.
+
 | Field name |  Type  | Description                                        |
 | ---------- | :----: | -------------------------------------------------- |
 | label      | string | Tag label.                                         |
 | hint       | string | Tag tooltip. Visible when mouse hovers on the tag. |
 
-#### G8TagClickEvent
+#### G8ClickEvent extends `MouseEvent`
 
-| Field name | Type | Description |
-| --- | :-: | --- |
-| node | [G8TreeItem](#G8TreeItem) | Key of the node that triggered the event. |
-| tag | [G8TreeItemTag](#G8TreeItemTag) | The tag that triggered the event. |
-| index | number | Numeric index of the entry in the tag list. |
+| Field name |           Type            | Description                   |
+| ---------- | :-----------------------: | ----------------------------- |
+| data       | [G8TreeItem](#g8treeitem) | The item triggered the event. |
+
+## Theming
+
+The bundled style sheet can be imported from `'g8-vue-tree/dist/g8-vue-tree.css'`. This component provides a dark theme out of box. To use it, just add the `g8-tree__dark` class to the element.
+
+```html
+<ul class="g8-tree-view g8-tree__dark">
+  <g8-tree-view></g8-tree-view>
+</ul>
+```
+
+If you want to change the color of the component, just define two variables before importing the scss file.
+
+```scss
+/* index.scss */
+
+/* define these two variables before importing the scss file */
+$g8-tree-bg: #ccc;
+$g8-tree-fg: #333;
+
+@import '~vue-tree/src/components/tree-view.scss';
+```
diff --git a/src/components/G8TreeView.vue b/src/components/G8TreeView.vue
index 8b03e64..23a4b2b 100644
--- a/src/components/G8TreeView.vue
+++ b/src/components/G8TreeView.vue
@@ -84,7 +84,7 @@ import { G8ClickEvent, G8TreeItem } from './types';
 @Component({ name: 'g8-tree-view' })
 export default class G8TreeView extends Vue {
   /**
-   * Key of the field in `item` that holds node label.
+   * Key of the field in `item` to be used as element's `id` attribute.
    */
   @Prop({ default: 'id' }) itemId!: string;
 
@@ -104,7 +104,8 @@ export default class G8TreeView extends Vue {
   @Prop({ default: 'children' }) childrenKey!: string;
 
   /**
-   * Key of the field in tags list of `item` that holds tag label.
+   * Key of the field in tags list of `item` to be used as tag element's `id`
+   * attribute.
    */
   @Prop({ default: 'id' }) tagId!: string;
 
diff --git a/src/components/types.ts b/src/components/types.ts
index 50e68c4..51a7eaf 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -66,5 +66,5 @@ export interface G8TreeItemTag {
 }
 
 export class G8ClickEvent extends MouseEvent {
-  data?: unknown;
+  data?: G8TreeItem;
 }

From 58efea58c1b15ff3aa629182c0896ebe642647eb Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Mon, 27 Apr 2020 11:07:28 +0800
Subject: [PATCH 12/13] fix #43 #42

---
 README.md                                     |  30 +++--
 src/App.vue                                   |  38 ++++---
 src/components/G8TreeView.vue                 |   2 +-
 src/components/types.ts                       |   2 +-
 tests/e2e/custom-assertions/checkerChecked.js |  80 +++++++++++++
 .../custom-assertions/checkerIntermediate.js  |  82 ++++++++++++++
 tests/e2e/custom-assertions/nodeExpanded.js   |  78 +++++++++++++
 tests/e2e/custom-commands/assertChecked.js    |  17 ---
 .../assertClickRespondantContains.js          |  14 ---
 tests/e2e/custom-commands/assertCollapsed.js  |  12 --
 .../custom-commands/assertEntryContains.js    |  16 ---
 tests/e2e/custom-commands/assertExpanded.js   |  12 --
 .../e2e/custom-commands/assertIntermediate.js |  17 ---
 .../e2e/custom-commands/assertTagContains.js  |  14 ---
 .../assertTagRespondantContains.js            |  14 ---
 tests/e2e/custom-commands/assertUnchecked.js  |  17 ---
 tests/e2e/specs/test.js                       | 106 ++++++++++++------
 tests/unit/G8TreeView-events.spec.ts          |   9 +-
 18 files changed, 359 insertions(+), 201 deletions(-)
 create mode 100644 tests/e2e/custom-assertions/checkerChecked.js
 create mode 100644 tests/e2e/custom-assertions/checkerIntermediate.js
 create mode 100644 tests/e2e/custom-assertions/nodeExpanded.js
 delete mode 100644 tests/e2e/custom-commands/assertChecked.js
 delete mode 100644 tests/e2e/custom-commands/assertClickRespondantContains.js
 delete mode 100644 tests/e2e/custom-commands/assertCollapsed.js
 delete mode 100644 tests/e2e/custom-commands/assertEntryContains.js
 delete mode 100644 tests/e2e/custom-commands/assertExpanded.js
 delete mode 100644 tests/e2e/custom-commands/assertIntermediate.js
 delete mode 100644 tests/e2e/custom-commands/assertTagContains.js
 delete mode 100644 tests/e2e/custom-commands/assertTagRespondantContains.js
 delete mode 100644 tests/e2e/custom-commands/assertUnchecked.js

diff --git a/README.md b/README.md
index 7322a83..0e61081 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,7 @@ There is an [issue](https://github.com/eidng8/vue-tree/issues/24) for this. Chec
 
 This is the entry's main content slot. Defaults to `{{ item[itemLabel] }}`. The current item entry is exposed as scoped variable `item`.
 
-#### Tag slot
+#### Tag (badge) slot
 
 ```vue
 <label
@@ -55,13 +55,6 @@ This is the entry's main content slot. Defaults to `{{ item[itemLabel] }}`. The
 
 This is the entry's tag content slot. Defaults to `{{ tag[tagLabel] }}`. The current item entry is exposed as scoped variable `item`. The current tag is exposed as scoped variable `tag`.
 
-## Events
-
-| Event name | Type | Description |
-| --- | :-: | --- |
-| click | [G8TreeItem](#g8treeitem) | A tree node has been clicked. |
-| state-changed | [G8TreeItem](#g8treeitem) | Checkbox state of the node has changed. |
-
 ## Types
 
 #### G8TreeItem
@@ -86,11 +79,24 @@ Below is a list of presumable fields, all of them are optional. You can place wh
 | label      | string | Tag label.                                         |
 | hint       | string | Tag tooltip. Visible when mouse hovers on the tag. |
 
-#### G8ClickEvent extends `MouseEvent`
+#### G8ClickEvent
+
+extends `MouseEvent`
+
+| Field name | Type | Description |
+| --- | :-: | --- |
+| data | { expanded: boolean, item: [G8TreeItem](#g8treeitem)} | The item triggered the event and if it were expanded (`true`). |
+
+## Events
+
+This component defines only two events, for expanding/collapsing nodes, and checkbox state changes.
+
+| Event name | Type | Description |
+| --- | :-: | --- |
+| click | [G8ClickEvent](#g8clickevent) | A tree node has been clicked. Use the `data.expanded` to determine if the node were expanded (`true`). |
+| state-changed | [G8TreeItem](#g8treeitem) | Checkbox state of the node has changed. |
 
-| Field name |           Type            | Description                   |
-| ---------- | :-----------------------: | ----------------------------- |
-| data       | [G8TreeItem](#g8treeitem) | The item triggered the event. |
+#### Other events
 
 ## Theming
 
diff --git a/src/App.vue b/src/App.vue
index 38f5442..d61487a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,9 +10,10 @@
 
 <template>
   <div id="app">
-    <div>
+    <div id="events">
       <span id="itemClicked">{{ itemClicked }}</span>
       <span id="tagClicked">{{ tagClicked }}</span>
+      <span id="stateChanged">{{ stateChanged }}</span>
     </div>
     <div>
       <button id="populate" @click="populate()">populate tree</button>
@@ -27,7 +28,16 @@
           tag-hint="tip"
           :item="item"
           :checker="true"
-          @click="itemClicked = $event.data.text"
+          @click="
+            itemClicked = `${$event.data.expanded ? '+' : '-'} ${
+              $event.data.item.text
+            }`
+          "
+          @state-changed="
+            stateChanged = `${$event.text},${
+              $event.checked ? 'checked' : 'unchecked'
+            }`
+          "
         >
           <template #default="{ item }">
             <span :class="{ tint: !item.tint }">
@@ -63,23 +73,11 @@ export default class App extends Vue {
     text: 'Click the button above to populate me.',
   } as G8TreeItem;
 
-  tab = 1;
-
   itemClicked = '';
 
-  itemMiddleClicked = '';
-
-  itemRightClicked = '';
-
-  itemDblClicked = '';
-
   tagClicked = '';
 
-  tagMiddleClicked = '';
-
-  tagRightClicked = '';
-
-  tagDblClicked = '';
+  stateChanged = '';
 
   populate() {
     const total = 10;
@@ -152,6 +150,16 @@ button,
   }
 }
 
+#events {
+  padding: 2px;
+
+  > * {
+    margin: 0 3px;
+    padding: 0 2px;
+    border: solid 1px;
+  }
+}
+
 .tint {
   color: lightseagreen;
 }
diff --git a/src/components/G8TreeView.vue b/src/components/G8TreeView.vue
index 23a4b2b..d2aec2c 100644
--- a/src/components/G8TreeView.vue
+++ b/src/components/G8TreeView.vue
@@ -212,7 +212,7 @@ export default class G8TreeView extends Vue {
       this.item.rendered = true;
       this.expanded = !this.expanded;
     }
-    event.data = this.item;
+    event.data = { expanded: this.expanded, item: this.item };
     /**
      * A tree node has been clicked.
      * @param {G8ClickEvent} item
diff --git a/src/components/types.ts b/src/components/types.ts
index 51a7eaf..9d10a8f 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -66,5 +66,5 @@ export interface G8TreeItemTag {
 }
 
 export class G8ClickEvent extends MouseEvent {
-  data?: G8TreeItem;
+  data?: { expanded: boolean; item: G8TreeItem };
 }
diff --git a/tests/e2e/custom-assertions/checkerChecked.js b/tests/e2e/custom-assertions/checkerChecked.js
new file mode 100644
index 0000000..d883d0e
--- /dev/null
+++ b/tests/e2e/custom-assertions/checkerChecked.js
@@ -0,0 +1,80 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+const { checkerSelector } = require('../helpers');
+
+/**
+ *
+ * @param {string} selector
+ * @param {string} msg
+ */
+exports.assertion = function (selector, msg) {
+  // If the custom commands operates with DOM elements, this options should be set
+  this.options = {
+    elementSelector: true,
+  };
+
+  /**
+   * Returns the message format which will be used to output the message in the
+   * console and also the arguments which will be used for replace the place
+   * holders, used in the order of appearance
+   *
+   * The message format also takes into account whether the `.not` negate has
+   * been used
+   *
+   * @return {{args: [], message: string}}
+   */
+  this.formatMessage = function () {
+    if (!msg) {
+      msg = `Testing if %s ${this.negate ? "isn't" : 'is'} checked`;
+    }
+
+    return {
+      message: msg,
+      args: [this.elementSelector],
+    };
+  };
+
+  /**
+   * Returns the expected value of the assertion which is displayed in the case
+   * of a failure
+   *
+   * @return {string}
+   */
+  this.expected = function () {
+    return `${this.negate ? "isn't" : 'is'} checked`;
+  };
+
+  /**
+   * Given the value, the condition used to evaluate if the assertion is passed
+   * @param {*} value
+   * @return {Boolean}
+   */
+  this.evaluate = function (value) {
+    return /.*\bg8-tree__node_entry_checker_checked\b.*/.test(value);
+  };
+
+  /**
+   * When defined, this method is called by the assertion runner with the
+   * command result to determine the actual state of the assertion in the event
+   * of a failure
+   *
+   * @param {Boolean} passed
+   * @return {string}
+   */
+  this.actual = function (passed) {
+    return `${passed ? 'is' : "isn't"} checked`;
+  };
+
+  /**
+   * The command which is to be executed by the assertion runner; Nightwatch
+   * api is available as `this.api`
+   * @param {function} cb
+   */
+  this.command = function (cb) {
+    this.api.getAttribute(checkerSelector(selector), 'class', r => cb(r));
+  };
+};
diff --git a/tests/e2e/custom-assertions/checkerIntermediate.js b/tests/e2e/custom-assertions/checkerIntermediate.js
new file mode 100644
index 0000000..1d0ff88
--- /dev/null
+++ b/tests/e2e/custom-assertions/checkerIntermediate.js
@@ -0,0 +1,82 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+const { checkerSelector } = require('../helpers');
+
+/**
+ *
+ * @param {string} selector
+ * @param {string} msg
+ */
+exports.assertion = function (selector, msg) {
+  // If the custom commands operates with DOM elements, this options should be set
+  this.options = {
+    elementSelector: true,
+  };
+
+  /**
+   * Returns the message format which will be used to output the message in the
+   * console and also the arguments which will be used for replace the place
+   * holders, used in the order of appearance
+   *
+   * The message format also takes into account whether the `.not` negate has
+   * been used
+   *
+   * @return {{args: [], message: string}}
+   */
+  this.formatMessage = function () {
+    if (!msg) {
+      msg = `Testing if %s ${
+        this.negate ? "isn't" : 'is'
+      } in intermediate state`;
+    }
+
+    return {
+      message: msg,
+      args: [this.elementSelector],
+    };
+  };
+
+  /**
+   * Returns the expected value of the assertion which is displayed in the case
+   * of a failure
+   *
+   * @return {string}
+   */
+  this.expected = function () {
+    return `${this.negate ? "isn't" : 'is'} in intermediate state`;
+  };
+
+  /**
+   * Given the value, the condition used to evaluate if the assertion is passed
+   * @param {*} value
+   * @return {Boolean}
+   */
+  this.evaluate = function (value) {
+    return /.*\bg8-tree__node_entry_checker_checked_some\b.*/.test(value);
+  };
+
+  /**
+   * When defined, this method is called by the assertion runner with the
+   * command result to determine the actual state of the assertion in the event
+   * of a failure
+   *
+   * @param {Boolean} passed
+   * @return {string}
+   */
+  this.actual = function (passed) {
+    return `${passed ? 'is' : "isn't"} in intermediate state`;
+  };
+
+  /**
+   * The command which is to be executed by the assertion runner; Nightwatch
+   * api is available as `this.api`
+   * @param {function} cb
+   */
+  this.command = function (cb) {
+    this.api.getAttribute(checkerSelector(selector), 'class', r => cb(r));
+  };
+};
diff --git a/tests/e2e/custom-assertions/nodeExpanded.js b/tests/e2e/custom-assertions/nodeExpanded.js
new file mode 100644
index 0000000..6e7728b
--- /dev/null
+++ b/tests/e2e/custom-assertions/nodeExpanded.js
@@ -0,0 +1,78 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+/**
+ *
+ * @param {string} selector
+ * @param {string} msg
+ */
+exports.assertion = function (selector, msg) {
+  // If the custom commands operates with DOM elements, this options should be set
+  this.options = {
+    elementSelector: true,
+  };
+
+  /**
+   * Returns the message format which will be used to output the message in the
+   * console and also the arguments which will be used for replace the place
+   * holders, used in the order of appearance
+   *
+   * The message format also takes into account whether the `.not` negate has
+   * been used
+   *
+   * @return {{args: [], message: string}}
+   */
+  this.formatMessage = function () {
+    if (!msg) {
+      msg = `Testing if %s ${this.negate ? "isn't" : 'is'} expanded`;
+    }
+
+    return {
+      message: msg,
+      args: [this.elementSelector],
+    };
+  };
+
+  /**
+   * Returns the expected value of the assertion which is displayed in the case
+   * of a failure
+   *
+   * @return {string}
+   */
+  this.expected = function () {
+    return `${this.negate ? "isn't" : 'is'} expanded`;
+  };
+
+  /**
+   * Given the value, the condition used to evaluate if the assertion is passed
+   * @param {*} value
+   * @return {Boolean}
+   */
+  this.evaluate = function (value) {
+    return /.*\bg8-tree__node_expended\b.*/.test(value);
+  };
+
+  /**
+   * When defined, this method is called by the assertion runner with the
+   * command result to determine the actual state of the assertion in the event
+   * of a failure
+   *
+   * @param {Boolean} passed
+   * @return {string}
+   */
+  this.actual = function (passed) {
+    return `${passed ? 'is' : "isn't"} expanded`;
+  };
+
+  /**
+   * The command which is to be executed by the assertion runner; Nightwatch
+   * api is available as `this.api`
+   * @param {function} cb
+   */
+  this.command = function (cb) {
+    this.api.getAttribute(selector, 'class', r => cb(r));
+  };
+};
diff --git a/tests/e2e/custom-commands/assertChecked.js b/tests/e2e/custom-commands/assertChecked.js
deleted file mode 100644
index 9f60e8c..0000000
--- a/tests/e2e/custom-commands/assertChecked.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
- *
- * Author: eidng8
- */
-
-const checkerSelector = require('../helpers').checkerSelector;
-
-/**
- * @param {string} selector
- */
-module.exports.command = function (selector) {
-  return this.assert.cssClassPresent(
-    checkerSelector(selector),
-    'g8-tree__node_entry_checker_checked',
-  );
-};
diff --git a/tests/e2e/custom-commands/assertClickRespondantContains.js b/tests/e2e/custom-commands/assertClickRespondantContains.js
deleted file mode 100644
index 3967ce9..0000000
--- a/tests/e2e/custom-commands/assertClickRespondantContains.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
- *
- * Author: eidng8
- */
-
-const checkerSelector = require('../helpers').checkerSelector;
-
-/**
- * @param {string} search
- */
-module.exports.command = function (search) {
-  return this.assert.containsOrMatches('#itemClicked', search);
-};
diff --git a/tests/e2e/custom-commands/assertCollapsed.js b/tests/e2e/custom-commands/assertCollapsed.js
deleted file mode 100644
index e9019ef..0000000
--- a/tests/e2e/custom-commands/assertCollapsed.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
- *
- * Author: eidng8
- */
-
-/**
- * @param {string} selector
- */
-module.exports.command = function (selector) {
-  return this.assert.not.cssClassPresent(selector, 'g8-tree__node_expended');
-};
diff --git a/tests/e2e/custom-commands/assertEntryContains.js b/tests/e2e/custom-commands/assertEntryContains.js
deleted file mode 100644
index 558c6b6..0000000
--- a/tests/e2e/custom-commands/assertEntryContains.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
- *
- * Author: eidng8
- */
-
-const labelSelector = require('../helpers').entrySelector;
-
-/**
- * @param {string} selector
- * @param {string|RegExp} search
- * @param {string} [msg]
- */
-module.exports.command = function (selector, search, msg) {
-  return this.assert.containsOrMatches(labelSelector(selector), search, msg);
-};
diff --git a/tests/e2e/custom-commands/assertExpanded.js b/tests/e2e/custom-commands/assertExpanded.js
deleted file mode 100644
index 7e0a1d1..0000000
--- a/tests/e2e/custom-commands/assertExpanded.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
- * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
- *
- * Author: eidng8
- */
-
-/**
- * @param {string} selector
- */
-module.exports.command = function (selector) {
-  return this.assert.cssClassPresent(selector, 'g8-tree__node_expended');
-};
diff --git a/tests/e2e/custom-commands/assertIntermediate.js b/tests/e2e/custom-commands/assertIntermediate.js
deleted file mode 100644
index c8d6253..0000000
--- a/tests/e2e/custom-commands/assertIntermediate.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
- *
- * Author: eidng8
- */
-
-const checkerSelector = require('../helpers').checkerSelector;
-
-/**
- * @param {string} selector
- */
-module.exports.command = function (selector) {
-  return this.assert.cssClassPresent(
-    checkerSelector(selector),
-    'g8-tree__node_entry_checker_checked_some',
-  );
-};
diff --git a/tests/e2e/custom-commands/assertTagContains.js b/tests/e2e/custom-commands/assertTagContains.js
deleted file mode 100644
index 175ce5d..0000000
--- a/tests/e2e/custom-commands/assertTagContains.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
- *
- * Author: eidng8
- */
-
-/**
- * @param {string} selector
- * @param {string|RegExp} search
- * @param {string} [msg]
- */
-module.exports.command = function (selector, search, msg) {
-  return this.assert.containsOrMatches(selector, search, msg);
-};
diff --git a/tests/e2e/custom-commands/assertTagRespondantContains.js b/tests/e2e/custom-commands/assertTagRespondantContains.js
deleted file mode 100644
index 31b4a46..0000000
--- a/tests/e2e/custom-commands/assertTagRespondantContains.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/*
- * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
- *
- * Author: eidng8
- */
-
-const checkerSelector = require('../helpers').checkerSelector;
-
-/**
- * @param {string} search
- */
-module.exports.command = function (search) {
-  return this.assert.containsOrMatches('#tagClicked', search);
-};
diff --git a/tests/e2e/custom-commands/assertUnchecked.js b/tests/e2e/custom-commands/assertUnchecked.js
deleted file mode 100644
index a5bfe6f..0000000
--- a/tests/e2e/custom-commands/assertUnchecked.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
- *
- * Author: eidng8
- */
-
-const checkerSelector = require('../helpers').checkerSelector;
-
-/**
- * @param {string} selector
- */
-module.exports.command = function (selector) {
-  return this.assert.not.cssClassPresent(
-    checkerSelector(selector),
-    'g8-tree__node_entry_checker_checked',
-  );
-};
diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js
index aa13862..3cb528c 100644
--- a/tests/e2e/specs/test.js
+++ b/tests/e2e/specs/test.js
@@ -4,7 +4,7 @@
  * Author: eidng8
  */
 
-const { labelSelector, makeSelectors } = require('../helpers');
+const { labelSelector } = require('../helpers');
 
 module.exports = {
   'basic tests': browser => {
@@ -15,76 +15,110 @@ module.exports = {
       // the tree view is rendered
       .assert.elementPresent('.g8-tree-view')
       // the root node's text is correct
-      .assertEntryContains('#root', /Click the button above to populate me\./i)
+      .assert.containsOrMatches(
+        labelSelector('#root'),
+        /Click the button above to populate me\./i,
+      );
 
+    browser
       // generates test data
       .click('#populate')
       // root node's text has changed
-      .assertEntryContains('#root', 'root name', '%s label has changed to %s')
+      .assert.containsOrMatches(
+        labelSelector('#root'),
+        'root name',
+        '%s label has changed to %s',
+      );
 
+    browser
       // check root node
       .clickChecker('#root')
-      .assertChecked('#root')
+      .assert.checkerChecked('#root')
+      // state-changed event fired with correct parameters
+      .assert.containsOrMatches('#stateChanged', 'root name,checked');
 
+    browser
       // expands root node
       .clickLabel('#root')
-      .assertExpanded('#root')
-      .assertClickRespondantContains('root name') // click event is fired
-
+      .assert.nodeExpanded('#root')
+      // click event is fired with correct parameters
+      .assert.containsOrMatches('#itemClicked', '+ root name')
       // checking root also checks all descendants
-      .assertChecked('#key-1,#key-5,#key-9')
+      .assert.checkerChecked('#key-1')
+      .assert.checkerChecked('#key-5')
+      .assert.checkerChecked('#key-9');
 
+    browser
       // expands the the 2nd node
       .clickLabel('#key-2')
-      .assertExpanded('#key-2')
-      .assertClickRespondantContains('name 2') // click event is fired
-
+      .assert.nodeExpanded('#key-2')
+      // click event is fired
+      .assert.containsOrMatches('#itemClicked', 'name 2')
       // checking root also checks all descendants
-      .assertChecked('#key-2-1,#key-2-5,#key-2-9')
+      .assert.checkerChecked('#key-2-1')
+      .assert.checkerChecked('#key-2-5')
+      .assert.checkerChecked('#key-2-9');
 
+    browser
       // root node's intermediate state changes to true, if a child is unchecked
       .clickChecker('#key-2')
-      .assertIntermediate('#root')
-
+      .assert.checkerIntermediate('#root')
       // unchecking a node unchecks all descendants
-      .assertUnchecked('#key-2,#key-2-3,#key-2-8')
+      .assert.not.checkerChecked('#key-2')
+      .assert.not.checkerChecked('#key-2-3')
+      .assert.not.checkerChecked('#key-2-8')
+      // state-changed event fired with correct parameters
+      .assert.containsOrMatches('#stateChanged', 'name 2,unchecked');
 
+    browser
       // click event is fired on leaf node
       .clickLabel('#key-2-1')
-      .assertClickRespondantContains('name 2.1')
+      .assert.containsOrMatches('#itemClicked', 'name 2.1');
 
+    browser
       // click event is fired on leaf tag
       .clickTag('#tag-2-1')
-      .assertTagRespondantContains('name 2.1, tag 2.1')
+      .assert.containsOrMatches('#tagClicked', 'name 2.1, tag 2.1');
 
+    browser
       // unchecking root node unchecks all descendants
       .clickChecker('#root')
-      .assertUnchecked('#root,#key-3,#key-3-3,#key-9,#key-9-9')
+      .assert.not.checkerChecked('#root')
+      .assert.not.checkerChecked('#key-3')
+      .assert.not.checkerChecked('#key-9')
+      .assert.not.checkerChecked('#key-2-3')
+      .assert.not.checkerChecked('#key-2-9')
+      // state-changed event fired with correct parameters
+      .assert.containsOrMatches('#stateChanged', 'root name,unchecked');
 
+    browser
       // checking a node checks all its descendants,
       // and set's parent's intermediate state
       .clickChecker('#key-1')
       .clickLabel('#key-1')
-      .assertChecked('#key-1-1,#key-1-3,#key-1-5,#key-1-9')
-      .assertIntermediate('#root')
+      .assert.checkerIntermediate('#root')
+      .assert.checkerChecked('#key-1-1')
+      .assert.checkerChecked('#key-1-3')
+      .assert.checkerChecked('#key-1-5')
+      .assert.checkerChecked('#key-1-9')
+      // state-changed event fired with correct parameters
+      .assert.containsOrMatches('#stateChanged', 'name 1,checked');
 
+    browser
       // clicking the toggle collapses the node
       .clickLabel('#key-2')
-      .assertCollapsed('#key-2')
-
-      // check if slot css class is applied
-      .assert.cssClassPresent(
-        makeSelectors(
-          labelSelector('#root,#key-1-5,#key-5').split(','),
-          '>span',
-        ),
-        'tint',
-      )
-      .assert.cssClassPresent(
-        makeSelectors(['#tag-3-5', '#tag-5'], '>span'),
-        'tint',
-      )
-
-      .end();
+      .assert.not.nodeExpanded('#key-2')
+      // click event is fired with correct parameters
+      .assert.containsOrMatches('#itemClicked', '- name 2');
+
+    // check if slot css class is applied
+    ['#root', '#key-1-5', '#key-5']
+      .map(i => labelSelector(i) + '>span')
+      .forEach(n => browser.assert.cssClassPresent(n, 'tint'));
+    ['#tag-2-5', '#tag-5']
+      .map(i => `${i}>span`)
+      .forEach(n => browser.assert.cssClassPresent(n, 'tint'));
+
+    browser.end();
   },
 };
diff --git a/tests/unit/G8TreeView-events.spec.ts b/tests/unit/G8TreeView-events.spec.ts
index d8406d1..94afc7b 100644
--- a/tests/unit/G8TreeView-events.spec.ts
+++ b/tests/unit/G8TreeView-events.spec.ts
@@ -47,7 +47,7 @@ describe('Tree View events', () => {
       propsData,
       listeners: { click: changed },
     });
-    expect.assertions(7);
+    expect.assertions(8);
     expect(wrapper.find('.g8-tree__node .g8-tree__node').exists()).toBeFalsy();
     wrapper.find('.g8-tree__node_entry').trigger('click');
     await wrapper.vm.$nextTick();
@@ -56,7 +56,8 @@ describe('Tree View events', () => {
     expect(emitted).toBeInstanceOf(Array);
     expect(emitted.length).toBe(1);
     expect(emitted[0][0]).toBeInstanceOf(MouseEvent);
-    expect(emitted[0][0].data).toStrictEqual(propsData.item);
+    expect(emitted[0][0].data.expanded).toBeTruthy();
+    expect(emitted[0][0].data.item).toStrictEqual(propsData.item);
     expect(wrapper.find('.g8-tree__node .g8-tree__node').exists()).toBeTruthy();
   });
 
@@ -80,7 +81,9 @@ describe('Tree View events', () => {
     await wrapper.vm.$nextTick();
     expect(clicked).toHaveBeenCalledTimes(1);
     expect(clicked).toHaveBeenLastCalledWith(
-      expect.objectContaining({ data: propsData.item }),
+      expect.objectContaining({
+        data: { expanded: true, item: propsData.item },
+      }),
     );
     expect(wrapper.emitted('click')).toBeUndefined();
     expect(wrapper.find('.g8-tree__node .g8-tree__node').exists()).toBeTruthy();

From 3b73726f9b53b7cbd981aa8cc6e2c578d8f0202e Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Mon, 27 Apr 2020 11:20:05 +0800
Subject: [PATCH 13/13] bump up minor version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 384ea9a..4c0114f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "g8-vue-tree",
-  "version": "0.0.27",
+  "version": "0.1.0",
   "description": "A Vue.js tree view component with stable DOM tree.",
   "repository": "git@github.com:eidng8/vue-tree.git",
   "bugs": "git@github.com:eidng8/vue-tree/issues",