fix #48

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]"
@@ -107,11 +107,11 @@ 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">
-  <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';
 }
 ```

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"

src/components/G8TreeView.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]"

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,40 +18,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 {
+.g8-tree__checker,
+.g8-tree__node__entry__toggle {
   font-size: 0.8rem;
   width: 1rem;
   text-align: center;
 }
 
-.g8-tree__node_branch_toggle:before {
-  content: '\2022';
-}
-
-.g8-tree__node_entry_checker {
+.g8-tree__checker {
   position: relative;
   margin-right: 4px;
 
@@ -79,38 +55,56 @@ $g8-tree-fg: #333 !default;
       background: darken($g8-tree-bg, 20%);
     }
   }
+
+  &.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 {
+.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;
 }
 
-.g8-tree__node_entry_tags_tag {
+.g8-tree__node__entry__tags__tag {
   margin-left: 0.5rem;
   padding: 0 0.2rem;
   font-size: 0.6rem;
@@ -128,27 +122,27 @@ $g8-tree-fg: #333 !default;
   }
 }
 
-.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%);
   }
 }
 
-.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 +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,
@@ -170,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%);
+    }
   }
 }

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);
   };
 
   /**

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);
   };
 
   /**

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);
   };
 
   /**

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)
 

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',
   );
 }
 

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'),