diff --git a/README.md b/README.md
index 0e61081..8d968d1 100644
--- a/README.md
+++ b/README.md
@@ -15,24 +15,25 @@ There is an [issue](https://github.com/eidng8/vue-tree/issues/24) for this. Chec
 
 ## Props
 
-| 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) |  |
+<!-- prettier-ignore -->
+| 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) |  |
 
 ## Scoped slots
 
 #### Default slot
 
 ```vue
-<span class="g8-tree__node_entry_label">
+<span class="g8-tree__node__entry__label">
   <slot :item="item">{{ item[itemLabel] }}</slot>
 </span>
 ```
@@ -43,7 +44,7 @@ This is the entry's main content slot. Defaults to `{{ item[itemLabel] }}`. The
 
 ```vue
 <label
-  class="g8-tree__node_entry_tags_tag"
+  class="g8-tree__node__entry__tags__tag"
   v-for="(tag, idx) in item[tagsKey]"
   :key="idx"
   :id="tag[tagId]"
@@ -61,19 +62,21 @@ This is the entry's tag content slot. Defaults to `{{ tag[tagLabel] }}`. The cur
 
 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 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. |
+<!-- prettier-ignore -->
+| Field name   | Type                               | Description                                                            |
+| ------------ | :--------------------------------: | ---------------------------------------------------------------------- |
+| name         | string                             | Item name, serves as label, will be rendered as node label.            |
+| 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.                                                   |
 
 #### 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.
 
+<!-- prettier-ignore -->
 | Field name |  Type  | Description                                        |
 | ---------- | :----: | -------------------------------------------------- |
 | label      | string | Tag label.                                         |
@@ -83,28 +86,32 @@ Below is a list of presumable fields, all of them are optional. You can place wh
 
 extends `MouseEvent`
 
-| Field name | Type | Description |
-| --- | :-: | --- |
-| data | { expanded: boolean, item: [G8TreeItem](#g8treeitem)} | The item triggered the event and if it were expanded (`true`). |
+<!-- prettier-ignore -->
+| 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. |
+<!-- prettier-ignore -->
+| 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.                                                                |
 
 #### Other events
 
 ## 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.
+#### Colors
+
+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 class="g8-tree__view g8-tree--dark">
+  <g8-tree__view></g8-tree__view>
 </ul>
 ```
 
@@ -119,3 +126,13 @@ $g8-tree-fg: #333;
 
 @import '~vue-tree/src/components/tree-view.scss';
 ```
+
+#### Fonts
+
+This component deliberately left out `font-family` from CSS. You can use whatever font you like, just add something like below to you styles:
+
+```css
+.g8-tree__view {
+  font-family: 'you favorite font';
+}
+```
diff --git a/package.json b/package.json
index 1719701..8d55686 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "g8-vue-tree",
-  "version": "0.1.2",
+  "version": "0.2.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",
diff --git a/scripts/build.sh b/scripts/build.sh
deleted file mode 100644
index c12ae9a..0000000
--- a/scripts/build.sh
+++ /dev/null
@@ -1,15 +0,0 @@
-#!/usr/bin/env bash
-
-# we have multiple deployment jobs
-# we just need to build the package only once
-[[ "${PACKAGE}" != '' ]] && exit 0
-
-# setup bundle-analyzer
-npm install --no-save @bundle-analyzer/webpack-plugin
-
-npm run build || exit 1
-
-# set's the environment variable to indicate the package has been built
-# this variable is also used by github deployment
-export PACKAGE=$(npm pack --silent)
-
diff --git a/scripts/test.sh b/scripts/test.sh
deleted file mode 100644
index a91ded5..0000000
--- a/scripts/test.sh
+++ /dev/null
@@ -1,46 +0,0 @@
-#!/usr/bin/env bash
-
-# setup code climate
-setup_cc() {
-  # use only linux for analysis
-  [[ "${TRAVIS_OS_NAME}" != 'linux' ]] && return 0
-  curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
-  chmod +x ./cc-test-reporter
-  ./cc-test-reporter before-build
-}
-
-# submit to code climate
-submit_cc() {
-  # use only linux for analysis
-  [[ "${TRAVIS_OS_NAME}" != 'linux' ]] && return 0
-  ./cc-test-reporter after-build --exit-code "${RES}"
-  # cc-test-reporter may report error, just ignore it
-  return 0
-}
-
-# setup coveralls
-setup_ca() {
-  # use only linux for analysis
-  [[ "${TRAVIS_OS_NAME}" != 'linux' ]] && return 0
-  npm install --no-save coveralls
-}
-
-# submit to coveralls
-submit_ca() {
-  # use only linux for analysis
-  [[ "${TRAVIS_OS_NAME}" != 'linux' ]] && return 0
-  cat ./coverage/lcov.info | coveralls
-}
-
-RES=0
-# unit test
-setup_ca
-setup_cc
-npm run test:unit -- --coverage
-RES=$?
-submit_cc
-submit_ca
-[[ ${RES} != '0' ]] && exit 1
-
-# e2e test
-npm run test:e2e
diff --git a/src/App.vue b/src/App.vue
index d61487a..40b4895 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,8 +17,8 @@
     </div>
     <div>
       <button id="populate" @click="populate()">populate tree</button>
-      <ul class="g8-tree-view g8-tree__dark g8-tree__highlight_hover">
-        <g8-tree-view
+      <ul class="g8-tree__view g8-tree--dark g8-tree--highlight-hover">
+        <g8-vue-tree
           item-id="key"
           item-label="text"
           tags-key="badges"
@@ -52,7 +52,7 @@
               {{ tag.text }}
             </span>
           </template>
-        </g8-tree-view>
+        </g8-vue-tree>
       </ul>
     </div>
   </div>
@@ -60,17 +60,20 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
-import { G8TreeItem, G8TreeView } from './';
+import { G8TreeItem, G8VueTree } from './';
 
-@Component({
-  components: {
-    G8TreeView,
-  },
-})
+@Component({ components: { G8VueTree } })
 export default class App extends Vue {
   item = {
     key: 'root',
     text: 'Click the button above to populate me.',
+    nodes: [
+      {
+        key: 'sub',
+        text: 'A very long line that goes on' + ' and on'.repeat(20),
+        badges: new Array(10).fill({ text: 'just a badge' }),
+      },
+    ],
   } as G8TreeItem;
 
   itemClicked = '';
diff --git a/src/components/G8TreeView.vue b/src/components/G8VueTree.vue
similarity index 91%
rename from src/components/G8TreeView.vue
rename to src/components/G8VueTree.vue
index d2aec2c..04335e0 100644
--- a/src/components/G8TreeView.vue
+++ b/src/components/G8VueTree.vue
@@ -8,29 +8,29 @@
   <li
     :id="item[itemId]"
     class="g8-tree__node"
-    :class="{ 'g8-tree__node_expended': expanded }"
+    :class="{ 'g8-tree__node--expended': expanded }"
   >
     <div
-      class="g8-tree__node_entry"
-      :class="{ 'g8-tree__branch_label': hasChild }"
+      class="g8-tree__node__entry"
+      :class="{ 'g8-tree__node__branch': hasChild }"
       @click="clicked($event)"
     >
-      <span class="g8-tree__node_branch_toggle"></span>
+      <span class="g8-tree__node__entry__toggle"></span>
       <span
         v-if="checker"
-        class="g8-tree__node_entry_checker"
+        class="g8-tree__checker"
         @click.stop.prevent="setState(!checked)"
         :class="{
-          'g8-tree__node_entry_checker_checked': checked,
-          'g8-tree__node_entry_checker_checked_some': intermediate,
+          'g8-tree__checker--checked': checked,
+          'g8-tree__checker--checked--intermediate': intermediate,
         }"
       ></span>
-      <span class="g8-tree__node_entry_label">
+      <span class="g8-tree__node__entry__label">
         <slot :item="item">{{ item[itemLabel] }}</slot>
       </span>
-      <span class="g8-tree__node_entry_tags">
+      <span class="g8-tree__node__entry__tags">
         <label
-          class="g8-tree__node_entry_tags_tag"
+          class="g8-tree__node__entry__tags__tag"
           v-for="(tag, idx) in item[tagsKey]"
           :key="idx"
           :id="tag[tagId]"
@@ -41,7 +41,7 @@
       </span>
     </div>
     <ul v-if="expanded || item.rendered" class="g8-tree__branch">
-      <g8-tree-view
+      <g8-vue-tree
         v-for="(child, index) in item[childrenKey]"
         :key="index"
         :item="child"
@@ -63,7 +63,7 @@
         >
           <slot :name="slot" v-bind="scope" />
         </template>
-      </g8-tree-view>
+      </g8-vue-tree>
     </ul>
   </li>
 </template>
@@ -81,8 +81,8 @@ import { G8ClickEvent, G8TreeItem } from './types';
  * [issue](https://github.com/eidng8/vue-tree/issues/24) about performance
  * problem of large tree data set.
  */
-@Component({ name: 'g8-tree-view' })
-export default class G8TreeView extends Vue {
+@Component({ name: 'g8-vue-tree' })
+export default class G8VueTree extends Vue {
   /**
    * Key of the field in `item` to be used as element's `id` attribute.
    */
@@ -183,7 +183,7 @@ export default class G8TreeView extends Vue {
       // descend to all descendant sub-components and update their states,
       // also triggers their `state-changed` event.
       this.$children.forEach(c => {
-        (c as G8TreeView).setState(state);
+        (c as G8VueTree).setState(state);
       });
     } else if (
       this.item[this.childrenKey] &&
diff --git a/src/components/tree-view.scss b/src/components/tree-view.scss
index 347821d..6153a0e 100644
--- a/src/components/tree-view.scss
+++ b/src/components/tree-view.scss
@@ -4,13 +4,22 @@
  * Author: eidng8
  */
 
-$g8-tree-bg: #ccc !default;
-$g8-tree-fg: #333 !default;
-
-.g8-tree-view {
+$g8-tree__bg: #cccccc !default;
+$g8-tree__fg: #333333 !default;
+$g8-tree__bg--highlight: lighten($g8-tree__bg, 10%) !default;
+$g8-tree__bg--highlight--secondary: darken($g8-tree__bg, 20%) !default;
+$g8-tree__fg--inverse: darken($g8-tree__bg, 20%) !default;
+$g8-tree__bg--inverse: darken($g8-tree__fg, 5%) !default;
+$g8-tree__bg--highlight--inverse: lighten($g8-tree__bg--inverse, 10%) !default;
+$g8-tree__bg--highlight--secondary--inverse: lighten(
+  $g8-tree__bg--inverse,
+  20%
+) !default;
+
+.g8-tree__view {
   margin: 0;
   padding: 0;
-  color: $g8-tree-fg;
+  color: $g8-tree__fg;
   text-align: left;
   user-select: none;
 
@@ -18,40 +27,16 @@ $g8-tree-fg: #333 !default;
     padding-left: 0;
     margin-left: 0;
   }
-
-  .g8-tree__branch {
-    padding: 0;
-    display: none;
-  }
-}
-
-.g8-tree__node {
-  list-style: none;
-  padding: 0.1rem 0 0.1rem 1rem;
-}
-
-.g8-tree__node_entry {
-  width: 100%;
-  cursor: pointer;
-  border-radius: 4px;
-
-  > * {
-    display: inline-block;
-  }
 }
 
-.g8-tree__node_branch_toggle,
-.g8-tree__node_entry_checker {
-  font-size: 0.8rem;
+.g8-tree__checker,
+.g8-tree__node__entry__toggle {
   width: 1rem;
+  font-size: 0.8rem;
   text-align: center;
 }
 
-.g8-tree__node_branch_toggle:before {
-  content: '\2022';
-}
-
-.g8-tree__node_entry_checker {
+.g8-tree__checker {
   position: relative;
   margin-right: 4px;
 
@@ -63,7 +48,7 @@ $g8-tree-fg: #333 !default;
 
   &:before {
     content: ' ';
-    background: $g8-tree-bg;
+    background: $g8-tree__bg;
     border-radius: 4px;
     display: block;
     position: absolute;
@@ -76,102 +61,144 @@ $g8-tree-fg: #333 !default;
   &:hover,
   &:focus {
     &:before {
-      background: darken($g8-tree-bg, 20%);
+      background: $g8-tree__bg--highlight--secondary;
     }
   }
+
+  &.g8-tree__checker--checked:after {
+    visibility: visible;
+  }
 }
 
-.g8-tree__node_entry_checker_checked_some:after {
-  content: '\2237';
-  visibility: visible;
+.g8-tree__checker--checked--intermediate:after {
+  content: '\220E';
+  margin-left: -0.05em;
 }
 
-.g8-tree__node_entry_checker_checked {
-  &.g8-tree__node_entry_checker_checked_some:after {
-    content: '\2237';
-  }
+.g8-tree__branch {
+  padding: 0;
+  display: none;
+}
 
-  &.g8-tree__node_entry_checker:after {
-    visibility: visible;
-  }
+.g8-tree__node {
+  list-style: none;
+  padding: 0.1rem 0 0.1rem 1rem;
 }
 
-.g8-tree__branch_label {
+.g8-tree__node__branch {
   font-weight: bold;
 
-  .g8-tree__node_branch_toggle:before {
+  .g8-tree__node__entry__toggle:before {
     padding-right: 0.5rem;
     content: '\25ba';
   }
 }
 
-.g8-tree__node_entry_tags,
-.g8-tree__node_entry_tags_tag {
-  display: inline-block;
+.g8-tree__node__entry {
+  width: 100%;
+  display: flex;
+  cursor: pointer;
+  flex-wrap: nowrap;
+  border-radius: 4px;
+  align-items: center;
+
+  > * {
+    min-width: 0;
+    display: block;
+  }
+
+  .g8-tree__checker {
+    flex: 0 0 auto;
+  }
 }
 
-.g8-tree__node_entry_tags_tag {
-  margin-left: 0.5rem;
+.g8-tree__node__entry__toggle {
+  flex: 0 0 auto;
+
+  &:before {
+    content: '\2022';
+  }
+}
+
+.g8-tree__node__entry__label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.g8-tree__node__entry__tags {
+  min-width: 0;
+  display: flex;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.g8-tree__node__entry__tags__tag {
+  min-width: 3em;
+  cursor: pointer;
+  overflow: hidden;
   padding: 0 0.2rem;
   font-size: 0.6rem;
+  margin-left: 0.5rem;
   font-weight: normal;
-  max-width: 6rem;
   border-radius: 0.2rem;
-  background: $g8-tree-bg;
-  overflow: hidden;
   text-overflow: ellipsis;
-  cursor: pointer;
+  background: $g8-tree__bg;
 
   &:hover,
   &:focus {
-    background: darken($g8-tree-bg, 20%);
+    background: $g8-tree__bg--highlight--secondary;
   }
 }
 
-.g8-tree__node_expended {
+.g8-tree__node--expended {
   > .g8-tree__branch {
     display: block;
   }
 
-  > .g8-tree__node_entry > .g8-tree__node_branch_toggle:before {
+  > .g8-tree__node__entry > .g8-tree__node__entry__toggle:before {
     content: '\25bc';
   }
 }
 
-.g8-tree__highlight_hover .g8-tree__node_entry {
+.g8-tree--highlight-hover .g8-tree__node__entry {
   &:hover,
   &:focus {
-    background: lighten($g8-tree-bg, 10%);
+    background: $g8-tree__bg--highlight;
   }
 }
 
-.g8-tree-view.g8-tree__dark {
-  color: darken($g8-tree-bg, 20%);
+.g8-tree__view.g8-tree--dark {
+  color: $g8-tree__fg--inverse;
 
-  .g8-tree__node_entry_checker {
+  .g8-tree__checker {
     &:before {
-      background: lighten($g8-tree-fg, 10%);
+      background: $g8-tree__bg--inverse;
     }
 
     &:hover,
     &:focus {
       &:before {
-        background: lighten($g8-tree-fg, 20%);
+        background: $g8-tree__bg--highlight--secondary--inverse;
       }
     }
   }
 
-  .g8-tree__node_entry_tags_tag {
-    background: lighten($g8-tree-fg, 5%);
+  .g8-tree__node__entry__tags__tag {
+    background: $g8-tree__bg--inverse;
 
     &:hover,
     &:focus {
-      background: lighten($g8-tree-fg, 10%);
+      background: $g8-tree__bg--highlight--secondary--inverse;
     }
   }
 
-  &.g8-tree__highlight_hover .g8-tree__node_entry:hover,
-  &.g8-tree__highlight_hover .g8-tree__node_entry:focus {
-    background: lighten($g8-tree-fg, 10%);
+  &.g8-tree--highlight-hover .g8-tree__node__entry {
+    &:hover,
+    &:focus {
+      background: $g8-tree__bg--highlight--inverse;
+    }
   }
 }
diff --git a/src/components/types.ts b/src/components/types.ts
index 9d10a8f..aaaa044 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -65,6 +65,22 @@ export interface G8TreeItemTag {
   hint?: string;
 }
 
+/**
+ * Fired when a node is clicked.
+ */
 export class G8ClickEvent extends MouseEvent {
-  data?: { expanded: boolean; item: G8TreeItem };
+  /**
+   * Data about the clicked node
+   */
+  data!: {
+    /**
+     * Whether the node has been expanded after the click.
+     */
+    expanded: boolean;
+
+    /**
+     * The data item associated with the clicked node.
+     */
+    item: G8TreeItem;
+  };
 }
diff --git a/src/index.ts b/src/index.ts
index f08fa08..ba3bf0a 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,8 +4,5 @@
  * Author: eidng8
  */
 
-import G8TreeView from './components/G8TreeView.vue';
-import { G8TreeItem, G8TreeItemTag } from './components/types';
-import './components/tree-view.scss';
-
-export { G8TreeView, G8TreeItem, G8TreeItemTag };
+export { G8TreeItem, G8TreeItemTag, G8ClickEvent } from './components/types';
+export { default as G8VueTree } from './components/G8VueTree.vue';
diff --git a/src/main.ts b/src/main.ts
index f986d35..8e0019e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -4,6 +4,8 @@
  * Author: eidng8
  */
 
+import './components/tree-view.scss';
+
 import Vue from 'vue';
 import App from './App.vue';
 
diff --git a/tests/e2e/custom-assertions/checkerChecked.js b/tests/e2e/custom-assertions/checkerChecked.js
index d883d0e..2810272 100644
--- a/tests/e2e/custom-assertions/checkerChecked.js
+++ b/tests/e2e/custom-assertions/checkerChecked.js
@@ -54,7 +54,7 @@ exports.assertion = function (selector, msg) {
    * @return {Boolean}
    */
   this.evaluate = function (value) {
-    return /.*\bg8-tree__node_entry_checker_checked\b.*/.test(value);
+    return /.*\bg8-tree__checker--checked\b.*/.test(value);
   };
 
   /**
diff --git a/tests/e2e/custom-assertions/checkerIntermediate.js b/tests/e2e/custom-assertions/checkerIntermediate.js
index 1d0ff88..01a75cf 100644
--- a/tests/e2e/custom-assertions/checkerIntermediate.js
+++ b/tests/e2e/custom-assertions/checkerIntermediate.js
@@ -56,7 +56,7 @@ exports.assertion = function (selector, msg) {
    * @return {Boolean}
    */
   this.evaluate = function (value) {
-    return /.*\bg8-tree__node_entry_checker_checked_some\b.*/.test(value);
+    return /.*\bg8-tree__checker--checked--intermediate\b.*/.test(value);
   };
 
   /**
diff --git a/tests/e2e/custom-assertions/nodeExpanded.js b/tests/e2e/custom-assertions/nodeExpanded.js
index 6e7728b..d076adb 100644
--- a/tests/e2e/custom-assertions/nodeExpanded.js
+++ b/tests/e2e/custom-assertions/nodeExpanded.js
@@ -52,7 +52,7 @@ exports.assertion = function (selector, msg) {
    * @return {Boolean}
    */
   this.evaluate = function (value) {
-    return /.*\bg8-tree__node_expended\b.*/.test(value);
+    return /.*\bg8-tree__node--expended\b.*/.test(value);
   };
 
   /**
diff --git a/tests/e2e/custom-commands/open.js b/tests/e2e/custom-commands/open.js
index 83cf943..e4cf799 100644
--- a/tests/e2e/custom-commands/open.js
+++ b/tests/e2e/custom-commands/open.js
@@ -22,7 +22,7 @@ module.exports.command = function () {
     .waitForElementVisible('#app')
 
     // the tree view is rendered
-    .assert.elementPresent('.g8-tree-view')
+    .assert.elementPresent('.g8-tree__view')
     // the root node's text is correct
     .assertEntryContains('#root', /Click the button above to populate me\./i)
 
diff --git a/tests/e2e/helpers.js b/tests/e2e/helpers.js
index 04ee012..6d2b257 100644
--- a/tests/e2e/helpers.js
+++ b/tests/e2e/helpers.js
@@ -13,7 +13,7 @@ function makeLabelSelectors(selector) {
   return selector
     .split(',')
     .map(s => s.trim())
-    .map(s => (s ? `${s}>` : '') + '.g8-tree__node_entry');
+    .map(s => (s ? `${s}>` : '') + '.g8-tree__node__entry');
 }
 
 /**
@@ -30,10 +30,7 @@ function makeSelectors(selectors, sub) {
  * @return {string}
  */
 function checkerSelector(selector) {
-  return makeSelectors(
-    makeLabelSelectors(selector),
-    '>.g8-tree__node_entry_checker',
-  );
+  return makeSelectors(makeLabelSelectors(selector), '>.g8-tree__checker');
 }
 
 /**
@@ -51,7 +48,7 @@ function entrySelector(selector) {
 function labelSelector(selector) {
   return makeSelectors(
     makeLabelSelectors(selector),
-    '>.g8-tree__node_entry_label',
+    '>.g8-tree__node__entry__label',
   );
 }
 
diff --git a/tests/e2e/specs/test.js b/tests/e2e/specs/test.js
index 3cb528c..0f14e00 100644
--- a/tests/e2e/specs/test.js
+++ b/tests/e2e/specs/test.js
@@ -13,7 +13,7 @@ module.exports = {
       .waitForElementVisible('#app')
 
       // the tree view is rendered
-      .assert.elementPresent('.g8-tree-view')
+      .assert.elementPresent('.g8-tree__view')
       // the root node's text is correct
       .assert.containsOrMatches(
         labelSelector('#root'),
diff --git a/tests/unit/G8TreeView-basics.spec.ts b/tests/unit/G8TreeView-basics.spec.ts
index 552bd45..2cca805 100644
--- a/tests/unit/G8TreeView-basics.spec.ts
+++ b/tests/unit/G8TreeView-basics.spec.ts
@@ -5,7 +5,7 @@
  */
 
 import { mount, shallowMount } from '@vue/test-utils';
-import { G8TreeView } from '../../src';
+import { G8VueTree } from '../../src';
 
 describe('Tree View props', () => {
   it('renders using default props', () => {
@@ -16,20 +16,22 @@ describe('Tree View props', () => {
         tags: [{ label: 'tag1' }],
       },
     };
-    const wrapper = shallowMount(G8TreeView, { propsData });
+    const wrapper = shallowMount(G8VueTree, { propsData });
     expect(wrapper.props('item')).toEqual({
       name: 'name',
       tags: [{ label: 'tag1' }],
     });
-    expect(wrapper.find('.g8-tree__node_entry_label').text()).toBe('name');
-    expect(wrapper.find('.g8-tree__node_entry_tags_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__node_entry_checker').exists()).toBeFalsy();
+    const wrapper = shallowMount(G8VueTree, { propsData });
+    expect(wrapper.find('.g8-tree__checker').exists()).toBeFalsy();
   });
 
   it('turns on checkbox rendering', () => {
@@ -38,8 +40,8 @@ describe('Tree View props', () => {
       checker: true,
       item: { name: 'name' },
     };
-    let wrapper = shallowMount(G8TreeView, { propsData });
-    expect(wrapper.find('.g8-tree__node_entry_checker').exists()).toBeTruthy();
+    let wrapper = shallowMount(G8VueTree, { propsData });
+    expect(wrapper.find('.g8-tree__checker').exists()).toBeTruthy();
   });
 
   it('defaults to render only top level', () => {
@@ -51,9 +53,9 @@ describe('Tree View props', () => {
         children: [{ name: 'item 1.1', tags: [{ label: 'tag 2' }] }],
       },
     };
-    const wrapper = shallowMount(G8TreeView, { propsData });
+    const wrapper = shallowMount(G8VueTree, { propsData });
     expect(wrapper.findAll('.g8-tree__node').length).toBe(1);
-    expect(wrapper.findAll('.g8-tree__node_entry_tags_tag').length).toBe(1);
+    expect(wrapper.findAll('.g8-tree__node__entry__tags__tag').length).toBe(1);
     expect(wrapper.find('.g8-tree__branch').exists()).toBeFalsy();
   });
 
@@ -83,13 +85,13 @@ describe('Tree View props', () => {
         ],
       },
     };
-    const wrapper = mount(G8TreeView, { propsData });
+    const wrapper = mount(G8VueTree, { propsData });
     expect(wrapper.props('item')).toEqual(propsData.item);
-    expect(wrapper.find('.g8-tree__node_entry_label').text()).toBe('node1');
+    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');
+    wrapper.find('.g8-tree__node__entry').trigger('click');
     await wrapper.vm.$nextTick();
-    wrapper.find('#node1-1>.g8-tree__node_entry').trigger('click');
+    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 94afc7b..1286d87 100644
--- a/tests/unit/G8TreeView-events.spec.ts
+++ b/tests/unit/G8TreeView-events.spec.ts
@@ -5,7 +5,7 @@
  */
 
 import { mount } from '@vue/test-utils';
-import { G8TreeItem, G8TreeView } from '../../src';
+import { G8TreeItem, G8VueTree } from '../../src';
 import { ComponentOptions } from 'vue';
 
 const tree = {
@@ -43,13 +43,13 @@ describe('Tree View events', () => {
 
   it('emits click events', async () => {
     const changed = jest.fn();
-    const wrapper = mount(G8TreeView, {
+    const wrapper = mount(G8VueTree, {
       propsData,
       listeners: { click: changed },
     });
     expect.assertions(8);
     expect(wrapper.find('.g8-tree__node .g8-tree__node').exists()).toBeFalsy();
-    wrapper.find('.g8-tree__node_entry').trigger('click');
+    wrapper.find('.g8-tree__node__entry').trigger('click');
     await wrapper.vm.$nextTick();
     expect(changed).toHaveBeenCalledTimes(1);
     const emitted = wrapper.emitted('click');
@@ -68,16 +68,16 @@ describe('Tree View events', () => {
       {
         template: `
           <ul>
-            <g8-tree-view :item="item" @click.prevent="clicked($event)"></g8-tree-view>
+            <g8-vue-tree :item="item" @click.prevent="clicked($event)"></g8-vue-tree>
           </ul>`,
         inject: ['item', 'clicked'],
-        components: { G8TreeView },
+        components: { G8VueTree },
       } as ComponentOptions<any>,
       { provide: propsData },
     );
     expect.assertions(5);
     expect(wrapper.find('.g8-tree__node .g8-tree__node').exists()).toBeFalsy();
-    wrapper.find('.g8-tree__node_entry').trigger('click');
+    wrapper.find('.g8-tree__node__entry').trigger('click');
     await wrapper.vm.$nextTick();
     expect(clicked).toHaveBeenCalledTimes(1);
     expect(clicked).toHaveBeenLastCalledWith(
@@ -92,12 +92,12 @@ describe('Tree View events', () => {
   it('emits state-change event', async () => {
     const changed = jest.fn();
     propsData.checker = true;
-    const wrapper = mount(G8TreeView, {
+    const wrapper = mount(G8VueTree, {
       propsData,
       listeners: { 'state-changed': changed },
     });
     expect.assertions(5);
-    const checker = wrapper.find('.g8-tree__node_entry_checker');
+    const checker = wrapper.find('.g8-tree__checker');
     checker.trigger('click');
     await wrapper.vm.$nextTick();
     expect(changed).toHaveBeenCalled();
@@ -105,31 +105,31 @@ 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__node_entry_checker_checked')).toBeTruthy();
+    expect(checker.is('.g8-tree__checker--checked')).toBeTruthy();
   });
 
   it('emits state-change of intermediate state', async () => {
     const changed = jest.fn();
     propsData.checker = true;
-    const wrapper = mount(G8TreeView, {
+    const wrapper = mount(G8VueTree, {
       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_entry').trigger('click');
+    wrapper.find('.g8-tree__node__entry').trigger('click');
     await wrapper.vm.$nextTick();
     wrapper
-      .findAll('.g8-tree__node '.repeat(2) + '.g8-tree__node_entry')
+      .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_entry')
+      .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__node_entry_checker',
+      '.g8-tree__node '.repeat(3) + '.g8-tree__checker',
     );
     checker.trigger('click');
     await wrapper.vm.$nextTick();
@@ -140,7 +140,7 @@ describe('Tree View events', () => {
     expect(emitted[0][0]).toStrictEqual(
       propsData.item.children![1].children![0],
     );
-    expect(checker.is('.g8-tree__node_entry_checker_checked')).toBeTruthy();
+    expect(checker.is('.g8-tree__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 ce1b4f7..5da8785 100644
--- a/tests/unit/G8TreeView-interactions.spec.ts
+++ b/tests/unit/G8TreeView-interactions.spec.ts
@@ -5,7 +5,7 @@
  */
 
 import { mount, Wrapper } from '@vue/test-utils';
-import { G8TreeItem, G8TreeView } from '../../src';
+import { G8TreeItem, G8VueTree } from '../../src';
 
 const tree = {
   checker: true,
@@ -34,12 +34,12 @@ const tree = {
   } as G8TreeItem,
 };
 
-let wrapper: Wrapper<G8TreeView>;
+let wrapper: Wrapper<G8VueTree>;
 
 describe('Tree View interactions', () => {
   beforeEach(
     () =>
-      (wrapper = mount(G8TreeView, {
+      (wrapper = mount(G8VueTree, {
         propsData: JSON.parse(JSON.stringify(tree)),
       })),
   );
@@ -47,129 +47,119 @@ describe('Tree View interactions', () => {
   it('expends and renders branches on click', async () => {
     expect.assertions(10);
     // initially no branch were expanded nor rendered
-    expect(wrapper.find('.g8-tree__node_expended').exists()).toBeFalsy();
+    expect(wrapper.find('.g8-tree__node--expended').exists()).toBeFalsy();
     expect(wrapper.findAll('.g8-tree__branch').length).toBe(0);
-    expect(wrapper.findAll('.g8-tree__node_entry_label').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_entry').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_entry_label');
+      expect(wrapper.findAll('.g8-tree__node--expended').length).toBe(1);
+      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_entry').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_entry_label').length).toBe(5);
+      expect(wrapper.findAll('.g8-tree__node--expended').length).toBe(2);
+      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_entry').trigger('click');
+    wrapper.find('.g8-tree__node__entry').trigger('click');
     // click the top branch to collapse
-    wrapper.find('.g8-tree__node_entry').trigger('click');
+    wrapper.find('.g8-tree__node__entry').trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('.g8-tree__node_expended').exists()).toBeFalsy();
+    expect(wrapper.find('.g8-tree__node--expended').exists()).toBeFalsy();
   });
 
   it('toggles check state', async () => {
     expect.assertions(1);
     // check root node = checks all
-    wrapper.find('.g8-tree__node_entry_checker').trigger('click');
+    wrapper.find('.g8-tree__checker').trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.findAll('.g8-tree__node_entry_checker_checked').length).toBe(
-      1,
-    );
+    expect(wrapper.findAll('.g8-tree__checker--checked').length).toBe(1);
   });
 
   it('propagates checked state', async () => {
     const checked = () =>
-      wrapper.findAll(
-        '.g8-tree__node_entry_checker.g8-tree__node_entry_checker_checked',
-      );
+      wrapper.findAll('.g8-tree__checker.g8-tree__checker--checked');
     expect.assertions(2);
-    wrapper.find('.g8-tree__node_entry_checker').trigger('click');
+    wrapper.find('.g8-tree__checker').trigger('click');
     await wrapper.vm.$nextTick();
     expect(checked().length).toBe(1);
-    wrapper.find('.g8-tree__node_entry').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_entry').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__node_entry_checker');
+    const checkers = wrapper.findAll('.g8-tree__checker');
     checkers.at(1).trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.find('.g8-tree__node_entry_checker').classes()).toContain(
-      'g8-tree__node_entry_checker_checked_some',
+    expect(wrapper.find('.g8-tree__checker').classes()).toContain(
+      'g8-tree__checker--checked--intermediate',
     );
   });
 
   it('sets parent intermediate state if any child is unchecked', async () => {
     expect.assertions(2);
-    wrapper.find('.g8-tree__node_entry').trigger('click');
+    wrapper.find('.g8-tree__node__entry').trigger('click');
     await wrapper.vm.$nextTick();
     // check root = check all descendant nodes
-    wrapper.find('.g8-tree__node_entry_checker').trigger('click');
+    wrapper.find('.g8-tree__checker').trigger('click');
     // uncheck 2nd branch = set root to intermediate state
-    const checkers = wrapper.findAll('.g8-tree__node_entry_checker');
+    const checkers = wrapper.findAll('.g8-tree__checker');
     checkers.at(1).trigger('click');
     await wrapper.vm.$nextTick();
-    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.find('.g8-tree__checker').classes()).toContain(
+      'g8-tree__checker--checked--intermediate',
     );
+    expect(wrapper.findAll('.g8-tree__checker--checked').length).toBe(2);
   });
 
   it('toggles intermediate check state', async () => {
     expect.assertions(6);
-    wrapper.find('.g8-tree__node_entry').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_entry')
+      .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__node_entry_checker');
+    const checkers = wrapper.findAll('.g8-tree__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__node_entry_checker_checked_some').length,
+      wrapper.findAll('.g8-tree__checker--checked--intermediate').length,
     ).toBe(2);
     // check root node = check all
     checkers.at(0).trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.findAll('.g8-tree__node_entry_checker_checked').length).toBe(
-      5,
-    );
+    expect(wrapper.findAll('.g8-tree__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__node_entry_checker_checked_some').length,
+      wrapper.findAll('.g8-tree__checker--checked--intermediate').length,
     ).toBe(2);
-    expect(wrapper.findAll('.g8-tree__node_entry_checker_checked').length).toBe(
-      4,
-    );
+    expect(wrapper.findAll('.g8-tree__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__node_entry_checker_checked_some').length,
+      wrapper.findAll('.g8-tree__checker--checked--intermediate').length,
     ).toBe(1);
-    expect(wrapper.findAll('.g8-tree__node_entry_checker_checked').length).toBe(
-      2,
-    );
+    expect(wrapper.findAll('.g8-tree__checker--checked').length).toBe(2);
   });
 });
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 5d1667e..4e2848c 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -4,96 +4,194 @@
  * Author: eidng8
  */
 
-import { G8TreeView as VueTree } from './vue-tree';
+import { Vue } from 'vue-property-decorator';
 
 /**
- * A tree view component with stable DOM structure. Stable means its structure
- * will not change once rendered. This component uses CSS to toggle sub-tree.
- * To improve performance, sub-trees are not rendered until they are first
- * expanded. Once expanded, further collapse/expand action won't cause the
- * sub-tree to be rendered again. Currently there is an
- * [issue](https://github.com/eidng8/vue-tree/issues/24) about performance
- * problem of large tree data set.
- */
-declare class G8TreeView extends VueTree {}
-
-/**
- * Tree data
+ * Tree item data
  */
 declare interface G8TreeItem {
   /**
-   * Item key, serves as identifier
+   * Just to allow accessing data via index syntax and arbitrary data to fit in.
    */
-  key: number | string;
+  [key: string]: unknown;
 
   /**
-   * Item name (its label)
+   * Item name, serves as label, will be rendered as node label.
    */
-  name: string;
+  name?: string;
 
   /**
-   * Checkbox state
+   * Whether current node is checked.
    */
   checked?: boolean;
 
   /**
-   * Intermediate check box state. `true` while some of the children were
+   * Intermediate check box state. Active while some of the children were
    * checked, but not all.
    */
   intermediate?: boolean;
 
   /**
-   * Tags attached to the item
+   * Whether the sub-tree of this node has been rendered.
+   */
+  rendered?: boolean;
+
+  /**
+   * List of tags.
    */
   tags?: G8TreeItemTag[];
 
   /**
-   * List of child items
+   * List of child nodes.
    */
   children?: G8TreeItem[];
 }
 
 /**
- * Item tag data, rendered using `<label>` tag.
+ * Node tag data
  */
 declare interface G8TreeItemTag {
   /**
-   * Tag key, serves as identifier
+   * Just to allow accessing data via index syntax and arbitrary data to fit in.
    */
-  key: number | string;
+  [key: string]: unknown;
 
   /**
-   * Tag label
+   * Tag label.
    */
   label: string;
 
   /**
-   * The `<label>` tag's `title` attribute
+   * Tag tooltip. Visible when mouse hovers on the tag.
    */
   hint?: string;
 }
 
 /**
- * `key` of the item clicked
+ * Fired when a node is clicked.
  */
-declare type G8ClickEvent = string | number;
+declare class G8ClickEvent extends MouseEvent {
+  /**
+   * Data about the clicked node
+   */
+  data: {
+    /**
+     * Whether the node has been expanded after the click.
+     */
+    expanded: boolean;
+
+    /**
+     * The data item associated with the clicked node.
+     */
+    item: G8TreeItem;
+  };
+}
 
 /**
- * The tag being clicked
+ * A tree view component with stable DOM structure. Stable means its structure
+ * will not change once rendered. This component uses CSS to toggle sub-tree.
+ * To improve performance, sub-trees are not rendered until they are first
+ * expanded. Once expanded, further collapse/expand action won't cause the
+ * sub-tree to be rendered again. Currently there is an
+ * [issue](https://github.com/eidng8/vue-tree/issues/24) about performance
+ * problem of large tree data set.
  */
-declare type G8TagClickEvent = {
+declare class G8VueTree extends Vue {
+  /**
+   * Key of the field in `item` to be used as element's `id` attribute.
+   */
+  itemId: string;
+
+  /**
+   * Key of the field in `item` that holds node label.
+   */
+  itemLabel: string;
+
+  /**
+   * Key of the field in `item` that holds tags array.
+   */
+  tagsKey: string;
+
+  /**
+   * Key of the field in `item` that holds child nodes array.
+   */
+  childrenKey: string;
+
+  /**
+   * Key of the field in tags list of `item` to be used as tag element's `id`
+   * attribute.
+   */
+  tagId: string;
+
+  /**
+   * Key of the field in tags list of `item` that holds tag label.
+   */
+  tagLabel: string;
+
+  /**
+   * Key of the field in tags list of `item` that holds tag tooltip.
+   */
+  tagHint: string;
+
+  /**
+   * Whether to add a checkbox before each item, allowing multiple nodes to
+   * be checked.
+   */
+  checker: boolean;
+
   /**
-   * The item's `key`
+   * The tree data to be rendered. Please note that data passed ***may*** be
+   * mutated by this component to reflect various states of tree nodes. Mutated
+   * fields include:
+   *
+   * - checked
+   * - intermediate
+   * - rendered
    */
-  node: number | string;
+  item: G8TreeItem;
 
   /**
-   * The tag's `key`
+   * Whether the node is expanded.
    */
-  tag: number | string;
+  expanded: boolean;
 
   /**
-   * Index of the tag in the array
+   * Whether the node is checked. This must be a member field in order for
+   * binding to work.
    */
-  index: number;
-};
+  checked: boolean;
+
+  /**
+   * Intermediate check box state. Active while some of the children were
+   * checked, but not all were checked. This must be a member field in order for
+   * binding to work.
+   */
+  intermediate: boolean;
+
+  /**
+   * Whether the current node has any child.
+   */
+  get hasChild(): boolean;
+
+  /**
+   * Handles the click event of checkboxes. Sets whether the current node is
+   * checked. Also set propagates the state to all immediate children.
+   * This method emits the `state-changed` event.
+   * @param state
+   */
+  setState(state: boolean): void;
+
+  /**
+   * Handles click event of nodes, expanding/collapsing sub-tree if
+   * applicable. This method emits the `click` event.
+   */
+  clicked(event: G8ClickEvent): void;
+
+  /**
+   * Handles `state-changed` events emitted by children, updating the check
+   * state of current node according. This method also bubbles up the
+   * `state-changed` event.
+   * @param node
+   */
+  childrenStateChanged(node: G8TreeItem): void;
+}
diff --git a/typings/vue-tree.d.ts b/typings/vue-tree.d.ts
deleted file mode 100644
index 447e11b..0000000
--- a/typings/vue-tree.d.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
- * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
- *
- * Author: eidng8
- */
-
-import { Vue } from 'vue-property-decorator';
-import { G8TreeItem } from '.';
-
-declare class G8TreeView extends Vue {
-  /**
-   * The tree data to be rendered.
-   */
-  item: G8TreeItem;
-
-  /**
-   * Whether to add a checkbox before each item, allowing multiple nodes to
-   * be checked.
-   */
-  checker: boolean;
-
-  /**
-   * Whether the node is expanded.
-   */
-  expanded: boolean;
-
-  /**
-   * Whether the node is checked.
-   */
-  checked: boolean;
-  /**
-   * Intermediate check box state. Active while some of the children were
-   * checked, but not all were checked.
-   */
-  ints: boolean;
-
-  /**
-   * Whether the current node has any child.
-   */
-  get hasChild(): number | undefined;
-
-  /**
-   * Handles the click event of checkboxes. Sets whether the current node is
-   * checked. Also set propagates the state to all immediate children.
-   * This method emits the `state-changed` event.
-   * @param state
-   */
-  setState(state: boolean): void;
-
-  /**
-   * Handles click event of nodes, expanding/collapsing sub-tree if
-   * applicable. This method emits the `click` event.
-   */
-  clicked(): void;
-
-  /**
-   * Handles double click event of nodes, emitting the `dblclick` event.
-   */
-  dblClicked(): void;
-
-  /**
-   * Handles double click event of tags, emitting the `tag-clicked` event.
-   * @param tag
-   * @param index
-   */
-  tagClicked(tag: number | string, index: number): void;
-
-  /**
-   * Handles double click event of tags, emitting the `tag-dblclicked`
-   * event.
-   * @param tag
-   * @param index
-   */
-  tagDblClicked(tag: number | string, index: number): void;
-
-  /**
-   * Handles `state-changed` events emitted by children, updating the check
-   * state of current node according. This method also bubbles up the
-   * `state-changed` event.
-   * @param evt
-   */
-  childrenStateChanged(evt: G8TreeItem): void;
-}