From 2b50782d6d8b7961cce0ff9cc4347b061f34d8a4 Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Thu, 30 Apr 2020 10:17:52 +0800
Subject: [PATCH 01/10] fix #48

---
 README.md                                     | 10 +--
 src/App.vue                                   |  2 +-
 src/components/G8TreeView.vue                 | 14 ++--
 src/components/tree-view.scss                 | 44 +++++-----
 tests/e2e/custom-assertions/checkerChecked.js |  2 +-
 .../custom-assertions/checkerIntermediate.js  |  2 +-
 tests/e2e/custom-commands/open.js             |  2 +-
 tests/e2e/helpers.js                          |  9 +-
 tests/e2e/specs/test.js                       |  2 +-
 tests/unit/G8TreeView-basics.spec.ts          | 16 ++--
 tests/unit/G8TreeView-events.spec.ts          | 20 ++---
 tests/unit/G8TreeView-interactions.spec.ts    | 82 ++++++++-----------
 12 files changed, 93 insertions(+), 112 deletions(-)

diff --git a/README.md b/README.md
index e641d04..a86f94b 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ There is an [issue](https://github.com/eidng8/vue-tree/issues/24) for this. Chec
 #### Default slot
 
 ```vue
-<span class="g8-tree__node_entry_label">
+<span class="g8-tree__node__entry_label">
   <slot :item="item">{{ item[itemLabel] }}</slot>
 </span>
 ```
@@ -44,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]"
@@ -110,8 +110,8 @@ This component defines only two events, for expanding/collapsing nodes, and chec
 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>
 ```
 
@@ -132,7 +132,7 @@ $g8-tree-fg: #333;
 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 {
+.g8-tree__view {
   font-family: 'you favorite font';
 }
 ```
diff --git a/src/App.vue b/src/App.vue
index d61487a..90df329 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,7 @@
     </div>
     <div>
       <button id="populate" @click="populate()">populate tree</button>
-      <ul class="g8-tree-view g8-tree__dark g8-tree__highlight_hover">
+      <ul class="g8-tree__view g8-tree__dark g8-tree__highlight_hover">
         <g8-tree-view
           item-id="key"
           item-label="text"
diff --git a/src/components/G8TreeView.vue b/src/components/G8TreeView.vue
index d2aec2c..393e96f 100644
--- a/src/components/G8TreeView.vue
+++ b/src/components/G8TreeView.vue
@@ -11,26 +11,26 @@
     :class="{ 'g8-tree__node_expended': expanded }"
   >
     <div
-      class="g8-tree__node_entry"
+      class="g8-tree__node__entry"
       :class="{ 'g8-tree__branch_label': hasChild }"
       @click="clicked($event)"
     >
       <span class="g8-tree__node_branch_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_some': 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]"
diff --git a/src/components/tree-view.scss b/src/components/tree-view.scss
index 347821d..2fdd35b 100644
--- a/src/components/tree-view.scss
+++ b/src/components/tree-view.scss
@@ -7,7 +7,7 @@
 $g8-tree-bg: #ccc !default;
 $g8-tree-fg: #333 !default;
 
-.g8-tree-view {
+.g8-tree__view {
   margin: 0;
   padding: 0;
   color: $g8-tree-fg;
@@ -18,11 +18,11 @@ $g8-tree-fg: #333 !default;
     padding-left: 0;
     margin-left: 0;
   }
+}
 
-  .g8-tree__branch {
-    padding: 0;
-    display: none;
-  }
+.g8-tree__branch {
+  padding: 0;
+  display: none;
 }
 
 .g8-tree__node {
@@ -30,7 +30,7 @@ $g8-tree-fg: #333 !default;
   padding: 0.1rem 0 0.1rem 1rem;
 }
 
-.g8-tree__node_entry {
+.g8-tree__node__entry {
   width: 100%;
   cursor: pointer;
   border-radius: 4px;
@@ -41,7 +41,7 @@ $g8-tree-fg: #333 !default;
 }
 
 .g8-tree__node_branch_toggle,
-.g8-tree__node_entry_checker {
+.g8-tree__checker {
   font-size: 0.8rem;
   width: 1rem;
   text-align: center;
@@ -51,7 +51,7 @@ $g8-tree-fg: #333 !default;
   content: '\2022';
 }
 
-.g8-tree__node_entry_checker {
+.g8-tree__checker {
   position: relative;
   margin-right: 4px;
 
@@ -81,17 +81,17 @@ $g8-tree-fg: #333 !default;
   }
 }
 
-.g8-tree__node_entry_checker_checked_some:after {
+.g8-tree__checker_checked_some:after {
   content: '\2237';
   visibility: visible;
 }
 
-.g8-tree__node_entry_checker_checked {
-  &.g8-tree__node_entry_checker_checked_some:after {
+.g8-tree__checker_checked {
+  &.g8-tree__checker_checked_some:after {
     content: '\2237';
   }
 
-  &.g8-tree__node_entry_checker:after {
+  &.g8-tree__checker:after {
     visibility: visible;
   }
 }
@@ -105,12 +105,12 @@ $g8-tree-fg: #333 !default;
   }
 }
 
-.g8-tree__node_entry_tags,
-.g8-tree__node_entry_tags_tag {
+.g8-tree__node__entry_tags,
+.g8-tree__node__entry_tags_tag {
   display: inline-block;
 }
 
-.g8-tree__node_entry_tags_tag {
+.g8-tree__node__entry_tags_tag {
   margin-left: 0.5rem;
   padding: 0 0.2rem;
   font-size: 0.6rem;
@@ -133,22 +133,22 @@ $g8-tree-fg: #333 !default;
     display: block;
   }
 
-  > .g8-tree__node_entry > .g8-tree__node_branch_toggle:before {
+  > .g8-tree__node__entry > .g8-tree__node_branch_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%);
   }
 }
 
-.g8-tree-view.g8-tree__dark {
+.g8-tree__view.g8-tree__dark {
   color: darken($g8-tree-bg, 20%);
 
-  .g8-tree__node_entry_checker {
+  .g8-tree__checker {
     &:before {
       background: lighten($g8-tree-fg, 10%);
     }
@@ -161,7 +161,7 @@ $g8-tree-fg: #333 !default;
     }
   }
 
-  .g8-tree__node_entry_tags_tag {
+  .g8-tree__node__entry_tags_tag {
     background: lighten($g8-tree-fg, 5%);
 
     &:hover,
@@ -170,8 +170,8 @@ $g8-tree-fg: #333 !default;
     }
   }
 
-  &.g8-tree__highlight_hover .g8-tree__node_entry:hover,
-  &.g8-tree__highlight_hover .g8-tree__node_entry: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/tests/e2e/custom-assertions/checkerChecked.js b/tests/e2e/custom-assertions/checkerChecked.js
index d883d0e..325e31f 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..3d6e24b 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_some\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..769892b 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..82d4c8e 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_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();
+    expect(wrapper.find('.g8-tree__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__node_entry_checker').exists()).toBeTruthy();
+    expect(wrapper.find('.g8-tree__checker').exists()).toBeTruthy();
   });
 
   it('defaults to render only top level', () => {
@@ -53,7 +53,7 @@ describe('Tree View props', () => {
     };
     const wrapper = shallowMount(G8TreeView, { 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();
   });
 
@@ -85,11 +85,11 @@ describe('Tree View props', () => {
     };
     const wrapper = mount(G8TreeView, { 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..6084b6f 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(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,7 +68,7 @@ describe('Tree View events', () => {
       {
         template: `
           <ul>
-            <g8-tree-view :item="item" @click.prevent="clicked($event)"></g8-tree-view>
+            <g8-tree__view :item="item" @click.prevent="clicked($event)"></g8-tree__view>
           </ul>`,
         inject: ['item', 'clicked'],
         components: { G8TreeView },
@@ -77,7 +77,7 @@ describe('Tree View events', () => {
     );
     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(
@@ -97,7 +97,7 @@ describe('Tree View events', () => {
       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,7 +105,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__node_entry_checker_checked')).toBeTruthy();
+    expect(checker.is('.g8-tree__checker_checked')).toBeTruthy();
   });
 
   it('emits state-change of intermediate state', async () => {
@@ -118,18 +118,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_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..ed3190f 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_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');
+      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__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();
   });
@@ -80,96 +80,80 @@ describe('Tree View interactions', () => {
   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_some',
     );
   });
 
   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_some',
     );
+    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,
-    ).toBe(2);
+    expect(wrapper.findAll('.g8-tree__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__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,
-    ).toBe(2);
-    expect(wrapper.findAll('.g8-tree__node_entry_checker_checked').length).toBe(
-      4,
-    );
+    expect(wrapper.findAll('.g8-tree__checker_checked_some').length).toBe(2);
+    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,
-    ).toBe(1);
-    expect(wrapper.findAll('.g8-tree__node_entry_checker_checked').length).toBe(
-      2,
-    );
+    expect(wrapper.findAll('.g8-tree__checker_checked_some').length).toBe(1);
+    expect(wrapper.findAll('.g8-tree__checker_checked').length).toBe(2);
   });
 });

From 802768b6e5e8104e510dc2f01e29227e57a388cb Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Thu, 30 Apr 2020 10:20:23 +0800
Subject: [PATCH 02/10] fix #48

---
 src/components/G8TreeView.vue                 |  6 ++---
 src/components/tree-view.scss                 | 14 ++++++------
 tests/e2e/custom-assertions/checkerChecked.js |  2 +-
 .../custom-assertions/checkerIntermediate.js  |  2 +-
 tests/unit/G8TreeView-events.spec.ts          |  4 ++--
 tests/unit/G8TreeView-interactions.spec.ts    | 22 +++++++++----------
 6 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/G8TreeView.vue b/src/components/G8TreeView.vue
index 393e96f..5d85d16 100644
--- a/src/components/G8TreeView.vue
+++ b/src/components/G8TreeView.vue
@@ -15,14 +15,14 @@
       :class="{ 'g8-tree__branch_label': 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__checker"
         @click.stop.prevent="setState(!checked)"
         :class="{
-          'g8-tree__checker_checked': checked,
-          'g8-tree__checker_checked_some': intermediate,
+          'g8-tree__checker--checked': checked,
+          'g8-tree__checker--intermediate': intermediate,
         }"
       ></span>
       <span class="g8-tree__node__entry_label">
diff --git a/src/components/tree-view.scss b/src/components/tree-view.scss
index 2fdd35b..6c129ba 100644
--- a/src/components/tree-view.scss
+++ b/src/components/tree-view.scss
@@ -40,14 +40,14 @@ $g8-tree-fg: #333 !default;
   }
 }
 
-.g8-tree__node_branch_toggle,
+.g8-tree__node__entry__toggle,
 .g8-tree__checker {
   font-size: 0.8rem;
   width: 1rem;
   text-align: center;
 }
 
-.g8-tree__node_branch_toggle:before {
+.g8-tree__node__entry__toggle:before {
   content: '\2022';
 }
 
@@ -81,13 +81,13 @@ $g8-tree-fg: #333 !default;
   }
 }
 
-.g8-tree__checker_checked_some:after {
+.g8-tree__checker--intermediate:after {
   content: '\2237';
   visibility: visible;
 }
 
-.g8-tree__checker_checked {
-  &.g8-tree__checker_checked_some:after {
+.g8-tree__checker--checked {
+  &.g8-tree__checker--intermediate:after {
     content: '\2237';
   }
 
@@ -99,7 +99,7 @@ $g8-tree-fg: #333 !default;
 .g8-tree__branch_label {
   font-weight: bold;
 
-  .g8-tree__node_branch_toggle:before {
+  .g8-tree__node__entry__toggle:before {
     padding-right: 0.5rem;
     content: '\25ba';
   }
@@ -133,7 +133,7 @@ $g8-tree-fg: #333 !default;
     display: block;
   }
 
-  > .g8-tree__node__entry > .g8-tree__node_branch_toggle:before {
+  > .g8-tree__node__entry > .g8-tree__node__entry__toggle:before {
     content: '\25bc';
   }
 }
diff --git a/tests/e2e/custom-assertions/checkerChecked.js b/tests/e2e/custom-assertions/checkerChecked.js
index 325e31f..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__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 3d6e24b..e51d981 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__checker_checked_some\b.*/.test(value);
+    return /.*\bg8-tree__checker--intermediate\b.*/.test(value);
   };
 
   /**
diff --git a/tests/unit/G8TreeView-events.spec.ts b/tests/unit/G8TreeView-events.spec.ts
index 6084b6f..859a41e 100644
--- a/tests/unit/G8TreeView-events.spec.ts
+++ b/tests/unit/G8TreeView-events.spec.ts
@@ -105,7 +105,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__checker_checked')).toBeTruthy();
+    expect(checker.is('.g8-tree__checker--checked')).toBeTruthy();
   });
 
   it('emits state-change of intermediate state', async () => {
@@ -140,7 +140,7 @@ describe('Tree View events', () => {
     expect(emitted[0][0]).toStrictEqual(
       propsData.item.children![1].children![0],
     );
-    expect(checker.is('.g8-tree__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 ed3190f..c5418d3 100644
--- a/tests/unit/G8TreeView-interactions.spec.ts
+++ b/tests/unit/G8TreeView-interactions.spec.ts
@@ -82,12 +82,12 @@ describe('Tree View interactions', () => {
     // check root node = checks all
     wrapper.find('.g8-tree__checker').trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.findAll('.g8-tree__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__checker.g8-tree__checker_checked');
+      wrapper.findAll('.g8-tree__checker.g8-tree__checker--checked');
     expect.assertions(2);
     wrapper.find('.g8-tree__checker').trigger('click');
     await wrapper.vm.$nextTick();
@@ -106,7 +106,7 @@ describe('Tree View interactions', () => {
     checkers.at(1).trigger('click');
     await wrapper.vm.$nextTick();
     expect(wrapper.find('.g8-tree__checker').classes()).toContain(
-      'g8-tree__checker_checked_some',
+      'g8-tree__checker--intermediate',
     );
   });
 
@@ -121,9 +121,9 @@ describe('Tree View interactions', () => {
     checkers.at(1).trigger('click');
     await wrapper.vm.$nextTick();
     expect(wrapper.find('.g8-tree__checker').classes()).toContain(
-      'g8-tree__checker_checked_some',
+      'g8-tree__checker--intermediate',
     );
-    expect(wrapper.findAll('.g8-tree__checker_checked').length).toBe(2);
+    expect(wrapper.findAll('.g8-tree__checker--checked').length).toBe(2);
   });
 
   it('toggles intermediate check state', async () => {
@@ -140,20 +140,20 @@ describe('Tree View interactions', () => {
     // 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__checker_checked_some').length).toBe(2);
+    expect(wrapper.findAll('.g8-tree__checker--intermediate').length).toBe(2);
     // check root node = check all
     checkers.at(0).trigger('click');
     await wrapper.vm.$nextTick();
-    expect(wrapper.findAll('.g8-tree__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__checker_checked_some').length).toBe(2);
-    expect(wrapper.findAll('.g8-tree__checker_checked').length).toBe(4);
+    expect(wrapper.findAll('.g8-tree__checker--intermediate').length).toBe(2);
+    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__checker_checked_some').length).toBe(1);
-    expect(wrapper.findAll('.g8-tree__checker_checked').length).toBe(2);
+    expect(wrapper.findAll('.g8-tree__checker--intermediate').length).toBe(1);
+    expect(wrapper.findAll('.g8-tree__checker--checked').length).toBe(2);
   });
 });

From 6c78cdb8becc86582aadba2cfd5b2e351981e3f2 Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Thu, 30 Apr 2020 10:43:21 +0800
Subject: [PATCH 03/10] fix #48

---
 src/components/G8TreeView.vue                  |  2 +-
 src/components/tree-view.scss                  | 18 ++++++------------
 .../custom-assertions/checkerIntermediate.js   |  2 +-
 tests/unit/G8TreeView-interactions.spec.ts     | 16 +++++++++++-----
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/G8TreeView.vue b/src/components/G8TreeView.vue
index 5d85d16..c2e6a41 100644
--- a/src/components/G8TreeView.vue
+++ b/src/components/G8TreeView.vue
@@ -22,7 +22,7 @@
         @click.stop.prevent="setState(!checked)"
         :class="{
           'g8-tree__checker--checked': checked,
-          'g8-tree__checker--intermediate': intermediate,
+          'g8-tree__checker--checked--intermediate': intermediate,
         }"
       ></span>
       <span class="g8-tree__node__entry_label">
diff --git a/src/components/tree-view.scss b/src/components/tree-view.scss
index 6c129ba..05381ec 100644
--- a/src/components/tree-view.scss
+++ b/src/components/tree-view.scss
@@ -79,23 +79,17 @@ $g8-tree-fg: #333 !default;
       background: darken($g8-tree-bg, 20%);
     }
   }
-}
-
-.g8-tree__checker--intermediate:after {
-  content: '\2237';
-  visibility: visible;
-}
 
-.g8-tree__checker--checked {
-  &.g8-tree__checker--intermediate:after {
-    content: '\2237';
-  }
-
-  &.g8-tree__checker:after {
+  &.g8-tree__checker--checked:after {
     visibility: visible;
   }
 }
 
+.g8-tree__checker--checked--intermediate:after {
+  content: '\220E';
+  margin-left: -0.05em;
+}
+
 .g8-tree__branch_label {
   font-weight: bold;
 
diff --git a/tests/e2e/custom-assertions/checkerIntermediate.js b/tests/e2e/custom-assertions/checkerIntermediate.js
index e51d981..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__checker--intermediate\b.*/.test(value);
+    return /.*\bg8-tree__checker--checked--intermediate\b.*/.test(value);
   };
 
   /**
diff --git a/tests/unit/G8TreeView-interactions.spec.ts b/tests/unit/G8TreeView-interactions.spec.ts
index c5418d3..d849fe6 100644
--- a/tests/unit/G8TreeView-interactions.spec.ts
+++ b/tests/unit/G8TreeView-interactions.spec.ts
@@ -106,7 +106,7 @@ describe('Tree View interactions', () => {
     checkers.at(1).trigger('click');
     await wrapper.vm.$nextTick();
     expect(wrapper.find('.g8-tree__checker').classes()).toContain(
-      'g8-tree__checker--intermediate',
+      'g8-tree__checker--checked--intermediate',
     );
   });
 
@@ -121,7 +121,7 @@ describe('Tree View interactions', () => {
     checkers.at(1).trigger('click');
     await wrapper.vm.$nextTick();
     expect(wrapper.find('.g8-tree__checker').classes()).toContain(
-      'g8-tree__checker--intermediate',
+      'g8-tree__checker--checked--intermediate',
     );
     expect(wrapper.findAll('.g8-tree__checker--checked').length).toBe(2);
   });
@@ -140,7 +140,9 @@ describe('Tree View interactions', () => {
     // 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__checker--intermediate').length).toBe(2);
+    expect(
+      wrapper.findAll('.g8-tree__checker--checked--intermediate').length,
+    ).toBe(2);
     // check root node = check all
     checkers.at(0).trigger('click');
     await wrapper.vm.$nextTick();
@@ -148,12 +150,16 @@ describe('Tree View interactions', () => {
     // 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__checker--intermediate').length).toBe(2);
+    expect(
+      wrapper.findAll('.g8-tree__checker--checked--intermediate').length,
+    ).toBe(2);
     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__checker--intermediate').length).toBe(1);
+    expect(
+      wrapper.findAll('.g8-tree__checker--checked--intermediate').length,
+    ).toBe(1);
     expect(wrapper.findAll('.g8-tree__checker--checked').length).toBe(2);
   });
 });

From a10f837b305054f1c8785f7503ef11db813c7cb8 Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Thu, 30 Apr 2020 10:44:52 +0800
Subject: [PATCH 04/10] fix #48

---
 src/components/G8TreeView.vue | 2 +-
 src/components/tree-view.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/G8TreeView.vue b/src/components/G8TreeView.vue
index c2e6a41..f2b7b07 100644
--- a/src/components/G8TreeView.vue
+++ b/src/components/G8TreeView.vue
@@ -12,7 +12,7 @@
   >
     <div
       class="g8-tree__node__entry"
-      :class="{ 'g8-tree__branch_label': hasChild }"
+      :class="{ 'g8-tree__node__branch': hasChild }"
       @click="clicked($event)"
     >
       <span class="g8-tree__node__entry__toggle"></span>
diff --git a/src/components/tree-view.scss b/src/components/tree-view.scss
index 05381ec..a5bfe78 100644
--- a/src/components/tree-view.scss
+++ b/src/components/tree-view.scss
@@ -90,7 +90,7 @@ $g8-tree-fg: #333 !default;
   margin-left: -0.05em;
 }
 
-.g8-tree__branch_label {
+.g8-tree__node__branch {
   font-weight: bold;
 
   .g8-tree__node__entry__toggle:before {

From 535b6730c6abee8b6cf58628e33cc1eff1525521 Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Thu, 30 Apr 2020 10:51:12 +0800
Subject: [PATCH 05/10] fix #48

---
 README.md                                   |  2 +-
 src/components/G8TreeView.vue               |  6 +++---
 src/components/tree-view.scss               | 10 +++++-----
 tests/e2e/custom-assertions/nodeExpanded.js |  2 +-
 tests/unit/G8TreeView-basics.spec.ts        |  6 ++++--
 tests/unit/G8TreeView-interactions.spec.ts  |  8 ++++----
 6 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index a86f94b..fdc479a 100644
--- a/README.md
+++ b/README.md
@@ -44,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]"
diff --git a/src/components/G8TreeView.vue b/src/components/G8TreeView.vue
index f2b7b07..3d73b03 100644
--- a/src/components/G8TreeView.vue
+++ b/src/components/G8TreeView.vue
@@ -8,7 +8,7 @@
   <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"
@@ -28,9 +28,9 @@
       <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]"
diff --git a/src/components/tree-view.scss b/src/components/tree-view.scss
index a5bfe78..8184e7d 100644
--- a/src/components/tree-view.scss
+++ b/src/components/tree-view.scss
@@ -99,12 +99,12 @@ $g8-tree-fg: #333 !default;
   }
 }
 
-.g8-tree__node__entry_tags,
-.g8-tree__node__entry_tags_tag {
+.g8-tree__node__entry__tags,
+.g8-tree__node__entry__tags__tag {
   display: inline-block;
 }
 
-.g8-tree__node__entry_tags_tag {
+.g8-tree__node__entry__tags__tag {
   margin-left: 0.5rem;
   padding: 0 0.2rem;
   font-size: 0.6rem;
@@ -122,7 +122,7 @@ $g8-tree-fg: #333 !default;
   }
 }
 
-.g8-tree__node_expended {
+.g8-tree__node--expended {
   > .g8-tree__branch {
     display: block;
   }
@@ -155,7 +155,7 @@ $g8-tree-fg: #333 !default;
     }
   }
 
-  .g8-tree__node__entry_tags_tag {
+  .g8-tree__node__entry__tags__tag {
     background: lighten($g8-tree-fg, 5%);
 
     &:hover,
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/unit/G8TreeView-basics.spec.ts b/tests/unit/G8TreeView-basics.spec.ts
index 82d4c8e..cc57b72 100644
--- a/tests/unit/G8TreeView-basics.spec.ts
+++ b/tests/unit/G8TreeView-basics.spec.ts
@@ -22,7 +22,9 @@ describe('Tree View props', () => {
       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__tags__tag').text()).toBe(
+      'tag1',
+    );
   });
 
   it('defaults to have no checkbox', () => {
@@ -53,7 +55,7 @@ describe('Tree View props', () => {
     };
     const wrapper = shallowMount(G8TreeView, { 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();
   });
 
diff --git a/tests/unit/G8TreeView-interactions.spec.ts b/tests/unit/G8TreeView-interactions.spec.ts
index d849fe6..f238ccb 100644
--- a/tests/unit/G8TreeView-interactions.spec.ts
+++ b/tests/unit/G8TreeView-interactions.spec.ts
@@ -47,13 +47,13 @@ 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);
     // click the first branch to expand it and render the sub-tree
     wrapper.find('.g8-tree__node__entry').trigger('click');
     await wrapper.vm.$nextTick(() => {
-      expect(wrapper.findAll('.g8-tree__node_expended').length).toBe(1);
+      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');
@@ -63,7 +63,7 @@ describe('Tree View interactions', () => {
     // click the second branch to expand it and render the sub-tree
     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--expended').length).toBe(2);
       expect(wrapper.findAll('.g8-tree__node__entry_label').length).toBe(5);
     });
   });
@@ -74,7 +74,7 @@ describe('Tree View interactions', () => {
     // click the top branch to collapse
     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 () => {

From 75dbd6b1d6210e3242393c3ff6685ddf4545ea33 Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Thu, 30 Apr 2020 10:53:45 +0800
Subject: [PATCH 06/10] fix #48

---
 src/App.vue                   | 2 +-
 src/components/tree-view.scss | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 90df329..1a63cfd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,7 @@
     </div>
     <div>
       <button id="populate" @click="populate()">populate tree</button>
-      <ul class="g8-tree__view g8-tree__dark g8-tree__highlight_hover">
+      <ul class="g8-tree__view g8-tree__dark g8-tree--highlight-hover">
         <g8-tree-view
           item-id="key"
           item-label="text"
diff --git a/src/components/tree-view.scss b/src/components/tree-view.scss
index 8184e7d..17dedd0 100644
--- a/src/components/tree-view.scss
+++ b/src/components/tree-view.scss
@@ -132,7 +132,7 @@ $g8-tree-fg: #333 !default;
   }
 }
 
-.g8-tree__highlight_hover .g8-tree__node__entry {
+.g8-tree--highlight-hover .g8-tree__node__entry {
   &:hover,
   &:focus {
     background: lighten($g8-tree-bg, 10%);
@@ -164,8 +164,8 @@ $g8-tree-fg: #333 !default;
     }
   }
 
-  &.g8-tree__highlight_hover .g8-tree__node__entry:hover,
-  &.g8-tree__highlight_hover .g8-tree__node__entry: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%);
   }
 }

From 74b6fe10c59bbcf1c1824aa7a0d7f670423ac552 Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Thu, 30 Apr 2020 10:55:16 +0800
Subject: [PATCH 07/10] fix #48

---
 README.md                     | 4 ++--
 src/App.vue                   | 2 +-
 src/components/tree-view.scss | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index fdc479a..416db5f 100644
--- a/README.md
+++ b/README.md
@@ -107,10 +107,10 @@ This component defines only two events, for expanding/collapsing nodes, and chec
 
 #### 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.
+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">
+<ul class="g8-tree__view g8-tree--dark">
   <g8-tree__view></g8-tree__view>
 </ul>
 ```
diff --git a/src/App.vue b/src/App.vue
index 1a63cfd..978be27 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,7 +17,7 @@
     </div>
     <div>
       <button id="populate" @click="populate()">populate tree</button>
-      <ul class="g8-tree__view g8-tree__dark g8-tree--highlight-hover">
+      <ul class="g8-tree__view g8-tree--dark g8-tree--highlight-hover">
         <g8-tree-view
           item-id="key"
           item-label="text"
diff --git a/src/components/tree-view.scss b/src/components/tree-view.scss
index 17dedd0..9c862d9 100644
--- a/src/components/tree-view.scss
+++ b/src/components/tree-view.scss
@@ -139,7 +139,7 @@ $g8-tree-fg: #333 !default;
   }
 }
 
-.g8-tree__view.g8-tree__dark {
+.g8-tree__view.g8-tree--dark {
   color: darken($g8-tree-bg, 20%);
 
   .g8-tree__checker {

From 28abe2e906658c0ad9e76213ebe0da24348f7709 Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Thu, 30 Apr 2020 10:57:59 +0800
Subject: [PATCH 08/10] fix #48

---
 tests/unit/G8TreeView-events.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/unit/G8TreeView-events.spec.ts b/tests/unit/G8TreeView-events.spec.ts
index 859a41e..95e17cb 100644
--- a/tests/unit/G8TreeView-events.spec.ts
+++ b/tests/unit/G8TreeView-events.spec.ts
@@ -68,7 +68,7 @@ describe('Tree View events', () => {
       {
         template: `
           <ul>
-            <g8-tree__view :item="item" @click.prevent="clicked($event)"></g8-tree__view>
+            <g8-tree-view :item="item" @click.prevent="clicked($event)"></g8-tree-view>
           </ul>`,
         inject: ['item', 'clicked'],
         components: { G8TreeView },

From 7556cb6c9e43808740bd6fe5931fdc9ca2776b61 Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Thu, 30 Apr 2020 11:08:42 +0800
Subject: [PATCH 09/10] fix #48

---
 src/components/tree-view.scss | 60 ++++++++++++++++++-----------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/components/tree-view.scss b/src/components/tree-view.scss
index 9c862d9..33a1a4a 100644
--- a/src/components/tree-view.scss
+++ b/src/components/tree-view.scss
@@ -20,37 +20,13 @@ $g8-tree-fg: #333 !default;
   }
 }
 
-.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__entry__toggle,
-.g8-tree__checker {
+.g8-tree__checker,
+.g8-tree__node__entry__toggle {
   font-size: 0.8rem;
   width: 1rem;
   text-align: center;
 }
 
-.g8-tree__node__entry__toggle:before {
-  content: '\2022';
-}
-
 .g8-tree__checker {
   position: relative;
   margin-right: 4px;
@@ -90,6 +66,16 @@ $g8-tree-fg: #333 !default;
   margin-left: -0.05em;
 }
 
+.g8-tree__branch {
+  padding: 0;
+  display: none;
+}
+
+.g8-tree__node {
+  list-style: none;
+  padding: 0.1rem 0 0.1rem 1rem;
+}
+
 .g8-tree__node__branch {
   font-weight: bold;
 
@@ -99,6 +85,20 @@ $g8-tree-fg: #333 !default;
   }
 }
 
+.g8-tree__node__entry {
+  width: 100%;
+  cursor: pointer;
+  border-radius: 4px;
+
+  > * {
+    display: inline-block;
+  }
+}
+
+.g8-tree__node__entry__toggle:before {
+  content: '\2022';
+}
+
 .g8-tree__node__entry__tags,
 .g8-tree__node__entry__tags__tag {
   display: inline-block;
@@ -164,8 +164,10 @@ $g8-tree-fg: #333 !default;
     }
   }
 
-  &.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: lighten($g8-tree-fg, 10%);
+    }
   }
 }

From 025f50d9913744fac6d50266c4d520902681a588 Mon Sep 17 00:00:00 2001
From: eidng8 <cheung.jackey@gmail.com>
Date: Thu, 30 Apr 2020 11:10:04 +0800
Subject: [PATCH 10/10] fix #48

---
 README.md                                  | 2 +-
 src/components/G8TreeView.vue              | 2 +-
 tests/e2e/helpers.js                       | 2 +-
 tests/unit/G8TreeView-basics.spec.ts       | 4 ++--
 tests/unit/G8TreeView-interactions.spec.ts | 6 +++---
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 416db5f..8d968d1 100644
--- a/README.md
+++ b/README.md
@@ -33,7 +33,7 @@ There is an [issue](https://github.com/eidng8/vue-tree/issues/24) for this. Chec
 #### Default slot
 
 ```vue
-<span class="g8-tree__node__entry_label">
+<span class="g8-tree__node__entry__label">
   <slot :item="item">{{ item[itemLabel] }}</slot>
 </span>
 ```
diff --git a/src/components/G8TreeView.vue b/src/components/G8TreeView.vue
index 3d73b03..779143b 100644
--- a/src/components/G8TreeView.vue
+++ b/src/components/G8TreeView.vue
@@ -25,7 +25,7 @@
           '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">
diff --git a/tests/e2e/helpers.js b/tests/e2e/helpers.js
index 769892b..6d2b257 100644
--- a/tests/e2e/helpers.js
+++ b/tests/e2e/helpers.js
@@ -48,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/unit/G8TreeView-basics.spec.ts b/tests/unit/G8TreeView-basics.spec.ts
index cc57b72..0ff61c1 100644
--- a/tests/unit/G8TreeView-basics.spec.ts
+++ b/tests/unit/G8TreeView-basics.spec.ts
@@ -21,7 +21,7 @@ describe('Tree View props', () => {
       name: 'name',
       tags: [{ label: 'tag1' }],
     });
-    expect(wrapper.find('.g8-tree__node__entry_label').text()).toBe('name');
+    expect(wrapper.find('.g8-tree__node__entry__label').text()).toBe('name');
     expect(wrapper.find('.g8-tree__node__entry__tags__tag').text()).toBe(
       'tag1',
     );
@@ -87,7 +87,7 @@ describe('Tree View props', () => {
     };
     const wrapper = mount(G8TreeView, { 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');
     await wrapper.vm.$nextTick();
diff --git a/tests/unit/G8TreeView-interactions.spec.ts b/tests/unit/G8TreeView-interactions.spec.ts
index f238ccb..db137e6 100644
--- a/tests/unit/G8TreeView-interactions.spec.ts
+++ b/tests/unit/G8TreeView-interactions.spec.ts
@@ -49,12 +49,12 @@ 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__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');
     await wrapper.vm.$nextTick(() => {
       expect(wrapper.findAll('.g8-tree__node--expended').length).toBe(1);
-      const labels = wrapper.findAll('.g8-tree__node__entry_label');
+      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');
@@ -64,7 +64,7 @@ describe('Tree View interactions', () => {
     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__entry__label').length).toBe(5);
     });
   });