Dev

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';
+}
+```

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",

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,25 +52,28 @@
               {{ tag.text }}
             </span>
           </template>
-        </g8-tree-view>
+        </g8-vue-tree>
       </ul>
     </div>
   </div>
 </template>
 
 <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 = '';

src/components/G8TreeView.vue → 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] &&