Skip to content

Commit 60fd73c

Browse files
eidng8eidng8
authored
Merge pull request #45 from eidng8/dev
fix #42 #43
2 parents 1dd0bc0 + 6b45556 commit 60fd73c

22 files changed

+1083
-525
lines changed

‎README.md

+77-47
Original file line numberDiff line numberDiff line change
@@ -13,79 +13,109 @@ The DOM structure of this component doesn't change once rendered. Comparing to o
1313

1414
There is an [issue](https://github.com/eidng8/vue-tree/issues/24) for this. Check out more detail there.
1515

16-
## Theming
17-
18-
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.
19-
20-
```html
21-
<ul class="g8-tree-view g8-tree__dark">
22-
<g8-tree-view></g8-tree-view>
23-
</ul>
24-
```
16+
## Props
2517

26-
If you want to change the color of the component, just define two variables before importing the scss file.
18+
| Prop name | Description | Type | Default |
19+
| --- | --- | :-: | :-: |
20+
| item-id | Key of the field in `item` to be used as element's `id` attribute. | string | 'id' |
21+
| item-label | Key of the field in `item` that holds node label. | string | 'name' |
22+
| tags-key | Key of the field in `item` that holds tags array. | string | 'tags' |
23+
| children-key | Key of the field in `item` that holds child nodes array. | string | 'children' |
24+
| tag-id | Key of the field in tags list of `item` to be used as tag element's `id` attribute. | string | 'id' |
25+
| tag-label | Key of the field in tags list of `item` that holds tag label. | string | 'label' |
26+
| tag-hint | Key of the field in tags list of `item` that holds tag tooltip. | string | 'hint' |
27+
| checker | Whether to add a checkbox before each item,<br>allowing multiple nodes tobe checked. | boolean | false |
28+
| 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) | |
2729

28-
```scss
29-
/* index.scss */
30+
## Scoped slots
3031

31-
/* define these two variables before importing the scss file */
32-
$g8-tree-bg: #ccc;
33-
$g8-tree-fg: #333;
32+
#### Default slot
3433

35-
@import '~vue-tree/src/components/tree-view.scss';
34+
```vue
35+
<span class="g8-tree__node_entry_label">
36+
<slot :item="item">{{ item[itemLabel] }}</slot>
37+
</span>
3638
```
3739

38-
## Props
40+
This is the entry's main content slot. Defaults to `{{ item[itemLabel] }}`. The current item entry is exposed as scoped variable `item`.
3941

40-
| Prop name | Description | Type | Default |
41-
| --- | --- | :-: | :-: |
42-
| itemLabel | Key of the field in `item` that holds node label. | string | 'name' |
43-
| tagsKey | Key of the field in `item` that holds tags array. | string | 'tags' |
44-
| childrenKey | Key of the field in `item` that holds child nodes array. | string | 'children' |
45-
| tagLabel | Key of the field in tags list of `item` that holds tag label. | string | 'label' |
46-
| tagHint | Key of the field in tags list of `item` that holds tag tooltip. | string | 'hint' |
47-
| handleRightClick <a id="handleRightClick"></a> | Whether to intercept right mouse click. | boolean | false |
48-
| checker | Whether to add a checkbox before each item,<br>allowing multiple nodes tobe checked. | boolean | false |
49-
| 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) | |
42+
#### Tag (badge) slot
5043

51-
## Events
44+
```vue
45+
<label
46+
class="g8-tree__node_entry_tags_tag"
47+
v-for="(tag, idx) in item[tagsKey]"
48+
:key="idx"
49+
:id="tag[tagId]"
50+
:title="tag[tagHint]"
51+
>
52+
<slot name="tag" :tag="tag" :item="item">{{ tag[tagLabel] }}</slot>
53+
</label>
54+
```
5255

53-
| Event name | Type | Description |
54-
| --- | :-: | --- |
55-
| click | [G8TreeItem](#G8TreeItem) | A tree node has been clicked. |
56-
| middle-click | [G8TreeItem](#G8TreeItem) | A tree node has been clicked with middle mouse button. |
57-
| right-click | [G8TreeItem](#G8TreeItem) | A tree node has been clicked with right mouse button.<br>Only available if [handleRightClick](#handleRightClick) is `true` |
58-
| dblclick | [G8TreeItem](#G8TreeItem) | A tree node has been double clicked. |
59-
| tag-click | [G8TagClickEvent](#G8TagClickEvent) | A tree node tag has been clicked. |
60-
| tag-middle-click | [G8TagClickEvent](#G8TagClickEvent) | A tree node tag has been clicked. |
61-
| tag-right-click | [G8TagClickEvent](#G8TagClickEvent) | A tree node has been clicked with right mouse button.<br>Only available if [handleRightClick](#handleRightClick) is `true` |
62-
| tag-dblclick | [G8TagClickEvent](#G8TagClickEvent) | A tree node tag has been double clicked. |
63-
| state-changed | [G8TreeItem](#G8TreeItem) | Checkbox state of the node has changed. |
56+
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`.
6457

6558
## Types
6659

6760
#### G8TreeItem
6861

62+
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.
63+
6964
| Field name | Type | Description |
7065
| --- | :-: | --- |
7166
| name | string | Item name, serves as label, will be rendered as node label. |
72-
| checked | boolean | Whether current node is checked. |
73-
| intermediate | boolean | Intermediate check box state. Active while some of the children were checked, but not all. |
67+
| checked | boolean | Whether the node is checked. |
68+
| intermediate | boolean | Intermediate check box state. Active while some children were checked. |
7469
| rendered | boolean | Whether the sub-tree of this node has been rendered. |
75-
| tags | [G8TreeItemTag](#G8TreeItemTag)\[] | List of tags. |
76-
| children | [G8TreeItem](#G8TreeItem)\[] | List of child nodes. |
70+
| tags | [G8TreeItemTag](#g8treeitemtag)\[] | List of tags. |
71+
| children | [G8TreeItem](#g8treeitem)\[] | List of child nodes. |
7772

7873
#### G8TreeItemTag
7974

75+
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.
76+
8077
| Field name | Type | Description |
8178
| ---------- | :----: | -------------------------------------------------- |
8279
| label | string | Tag label. |
8380
| hint | string | Tag tooltip. Visible when mouse hovers on the tag. |
8481

85-
#### G8TagClickEvent
82+
#### G8ClickEvent
83+
84+
extends `MouseEvent`
8685

8786
| Field name | Type | Description |
8887
| --- | :-: | --- |
89-
| node | [G8TreeItem](#G8TreeItem) | Key of the node that triggered the event. |
90-
| tag | [G8TreeItemTag](#G8TreeItemTag) | The tag that triggered the event. |
91-
| index | number | Numeric index of the entry in the tag list. |
88+
| data | { expanded: boolean, item: [G8TreeItem](#g8treeitem)} | The item triggered the event and if it were expanded (`true`). |
89+
90+
## Events
91+
92+
This component defines only two events, for expanding/collapsing nodes, and checkbox state changes.
93+
94+
| Event name | Type | Description |
95+
| --- | :-: | --- |
96+
| click | [G8ClickEvent](#g8clickevent) | A tree node has been clicked. Use the `data.expanded` to determine if the node were expanded (`true`). |
97+
| state-changed | [G8TreeItem](#g8treeitem) | Checkbox state of the node has changed. |
98+
99+
#### Other events
100+
101+
## Theming
102+
103+
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.
104+
105+
```html
106+
<ul class="g8-tree-view g8-tree__dark">
107+
<g8-tree-view></g8-tree-view>
108+
</ul>
109+
```
110+
111+
If you want to change the color of the component, just define two variables before importing the scss file.
112+
113+
```scss
114+
/* index.scss */
115+
116+
/* define these two variables before importing the scss file */
117+
$g8-tree-bg: #ccc;
118+
$g8-tree-fg: #333;
119+
120+
@import '~vue-tree/src/components/tree-view.scss';
121+
```

‎nightwatch.conf.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
/*
2+
* GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
3+
*
4+
* Author: eidng8
5+
*/
6+
7+
const enabled = !process.env.CI;
8+
9+
module.exports = {
10+
test_settings: {
11+
default: {
12+
screenshots: {
13+
enabled,
14+
on_failure: true,
15+
on_error: true,
16+
path: 'tests/e2e/reports/screenshots',
17+
},
18+
},
19+
},
20+
};

‎package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "g8-vue-tree",
3-
"version": "0.0.27",
3+
"version": "0.1.0",
44
"description": "A Vue.js tree view component with stable DOM tree.",
55
"repository": "[email protected]:eidng8/vue-tree.git",
66
"bugs": "[email protected]:eidng8/vue-tree/issues",
@@ -32,6 +32,12 @@
3232
"lint": "vue-cli-service lint",
3333
"wba": "cross-env WBA=1 npm run build"
3434
},
35+
"dependencies": {
36+
"core-js": "^3.6.4",
37+
"vue": "^2.6.11",
38+
"vue-class-component": "^7.2.3",
39+
"vue-property-decorator": "^8.4.1"
40+
},
3541
"devDependencies": {
3642
"@bundle-analyzer/webpack-plugin": "^0.5.1",
3743
"@types/jest": "^24.0.19",
@@ -48,7 +54,6 @@
4854
"@vue/eslint-config-typescript": "^5.0.1",
4955
"@vue/test-utils": "1.0.0-beta.31",
5056
"chromedriver": "latest",
51-
"core-js": "^3.6.4",
5257
"cross-env": "^7.0.2",
5358
"eslint": "^6.7.2",
5459
"eslint-config-prettier": "^6.10.1",
@@ -67,13 +72,8 @@
6772
"sass-loader": "^8.0.2",
6873
"typescript": "~3.7.5",
6974
"vue": "^2.6.11",
70-
"vue-class-component": "^7.2.2",
7175
"vue-docgen-cli": "^4.16.0",
72-
"vue-property-decorator": "^8.3.0",
7376
"vue-template-compiler": "^2.6.11",
7477
"webpack-bundle-analyzer": "^3.7.0"
75-
},
76-
"peerDependencies": {
77-
"vue": "^2.6.11"
7878
}
7979
}

‎scripts/release.bat

+4-4
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@ bash.exe -lc github_changelog_generator || goto ERR
2222
for /f "tokens=*" %%v in ('node scripts\make-release-note.js') do set VERSION=%%v
2323

2424
git add . || goto ERR
25-
git commit -m "Release %VERSION%" || goto ERR
26-
git push || goto ERR
25+
git commit --no-verify -m "Release %VERSION%" || goto ERR
26+
git push --no-verify || goto ERR
2727
git tag --sign -m "%date%" "Release-v%VERSION%"
28-
git push --tags || goto ERR
28+
git push --no-verify --tags || goto ERR
2929

3030
git checkout dev
3131
git merge master
32-
git push
32+
git push --no-verify
3333

3434

3535
goto END

0 commit comments

Comments
 (0)