fix #42 #43

README.md

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

nightwatch.conf.js

@@ -0,0 +1,20 @@
+/*
+ * GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
+ *
+ * Author: eidng8
+ */
+
+const enabled = !process.env.CI;
+
+module.exports = {
+  test_settings: {
+    default: {
+      screenshots: {
+        enabled,
+        on_failure: true,
+        on_error: true,
+        path: 'tests/e2e/reports/screenshots',
+      },
+    },
+  },
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "g8-vue-tree",
-  "version": "0.0.27",
+  "version": "0.1.0",
   "description": "A Vue.js tree view component with stable DOM tree.",
   "repository": "git@github.com:eidng8/vue-tree.git",
   "bugs": "git@github.com:eidng8/vue-tree/issues",
@@ -32,6 +32,12 @@
     "lint": "vue-cli-service lint",
     "wba": "cross-env WBA=1 npm run build"
   },
+  "dependencies": {
+    "core-js": "^3.6.4",
+    "vue": "^2.6.11",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^8.4.1"
+  },
   "devDependencies": {
     "@bundle-analyzer/webpack-plugin": "^0.5.1",
     "@types/jest": "^24.0.19",
@@ -48,7 +54,6 @@
     "@vue/eslint-config-typescript": "^5.0.1",
     "@vue/test-utils": "1.0.0-beta.31",
     "chromedriver": "latest",
-    "core-js": "^3.6.4",
     "cross-env": "^7.0.2",
     "eslint": "^6.7.2",
     "eslint-config-prettier": "^6.10.1",
@@ -67,13 +72,8 @@
     "sass-loader": "^8.0.2",
     "typescript": "~3.7.5",
     "vue": "^2.6.11",
-    "vue-class-component": "^7.2.2",
     "vue-docgen-cli": "^4.16.0",
-    "vue-property-decorator": "^8.3.0",
     "vue-template-compiler": "^2.6.11",
     "webpack-bundle-analyzer": "^3.7.0"
-  },
-  "peerDependencies": {
-    "vue": "^2.6.11"
   }
 }

scripts/release.bat

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