Skip to content

Commit 58efea5

Browse files
eidng8eidng8
committed
fix #43 #42 
1 parent b05dede commit 58efea5

18 files changed

+359
-201
lines changed

‎README.md

+18-12
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ There is an [issue](https://github.com/eidng8/vue-tree/issues/24) for this. Chec
3939

4040
This is the entry's main content slot. Defaults to `{{ item[itemLabel] }}`. The current item entry is exposed as scoped variable `item`.
4141

42-
#### Tag slot
42+
#### Tag (badge) slot
4343

4444
```vue
4545
<label
@@ -55,13 +55,6 @@ This is the entry's main content slot. Defaults to `{{ item[itemLabel] }}`. The
5555

5656
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`.
5757

58-
## Events
59-
60-
| Event name | Type | Description |
61-
| --- | :-: | --- |
62-
| click | [G8TreeItem](#g8treeitem) | A tree node has been clicked. |
63-
| state-changed | [G8TreeItem](#g8treeitem) | Checkbox state of the node has changed. |
64-
6558
## Types
6659

6760
#### G8TreeItem
@@ -86,11 +79,24 @@ Below is a list of presumable fields, all of them are optional. You can place wh
8679
| label | string | Tag label. |
8780
| hint | string | Tag tooltip. Visible when mouse hovers on the tag. |
8881

89-
#### G8ClickEvent extends `MouseEvent`
82+
#### G8ClickEvent
83+
84+
extends `MouseEvent`
85+
86+
| Field name | Type | Description |
87+
| --- | :-: | --- |
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. |
9098

91-
| Field name | Type | Description |
92-
| ---------- | :-----------------------: | ----------------------------- |
93-
| data | [G8TreeItem](#g8treeitem) | The item triggered the event. |
99+
#### Other events
94100

95101
## Theming
96102

‎src/App.vue

+23-15
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,10 @@
1010

1111
<template>
1212
<div id="app">
13-
<div>
13+
<div id="events">
1414
<span id="itemClicked">{{ itemClicked }}</span>
1515
<span id="tagClicked">{{ tagClicked }}</span>
16+
<span id="stateChanged">{{ stateChanged }}</span>
1617
</div>
1718
<div>
1819
<button id="populate" @click="populate()">populate tree</button>
@@ -27,7 +28,16 @@
2728
tag-hint="tip"
2829
:item="item"
2930
:checker="true"
30-
@click="itemClicked = $event.data.text"
31+
@click="
32+
itemClicked = `${$event.data.expanded ? '+' : '-'} ${
33+
$event.data.item.text
34+
}`
35+
"
36+
@state-changed="
37+
stateChanged = `${$event.text},${
38+
$event.checked ? 'checked' : 'unchecked'
39+
}`
40+
"
3141
>
3242
<template #default="{ item }">
3343
<span :class="{ tint: !item.tint }">
@@ -63,23 +73,11 @@ export default class App extends Vue {
6373
text: 'Click the button above to populate me.',
6474
} as G8TreeItem;
6575

66-
tab = 1;
67-
6876
itemClicked = '';
6977

70-
itemMiddleClicked = '';
71-
72-
itemRightClicked = '';
73-
74-
itemDblClicked = '';
75-
7678
tagClicked = '';
7779

78-
tagMiddleClicked = '';
79-
80-
tagRightClicked = '';
81-
82-
tagDblClicked = '';
80+
stateChanged = '';
8381

8482
populate() {
8583
const total = 10;
@@ -152,6 +150,16 @@ button,
152150
}
153151
}
154152

153+
#events {
154+
padding: 2px;
155+
156+
> * {
157+
margin: 0 3px;
158+
padding: 0 2px;
159+
border: solid 1px;
160+
}
161+
}
162+
155163
.tint {
156164
color: lightseagreen;
157165
}

‎src/components/G8TreeView.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ export default class G8TreeView extends Vue {
212212
this.item.rendered = true;
213213
this.expanded = !this.expanded;
214214
}
215-
event.data = this.item;
215+
event.data = { expanded: this.expanded, item: this.item };
216216
/**
217217
* A tree node has been clicked.
218218
* @param {G8ClickEvent} item

‎src/components/types.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -66,5 +66,5 @@ export interface G8TreeItemTag {
6666
}
6767

6868
export class G8ClickEvent extends MouseEvent {
69-
data?: G8TreeItem;
69+
data?: { expanded: boolean; item: G8TreeItem };
7070
}

‎tests/e2e/custom-assertions/checkerChecked.js

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/*
2+
* GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
3+
*
4+
* Author: eidng8
5+
*/
6+
7+
const { checkerSelector } = require('../helpers');
8+
9+
/**
10+
*
11+
* @param {string} selector
12+
* @param {string} msg
13+
*/
14+
exports.assertion = function (selector, msg) {
15+
// If the custom commands operates with DOM elements, this options should be set
16+
this.options = {
17+
elementSelector: true,
18+
};
19+
20+
/**
21+
* Returns the message format which will be used to output the message in the
22+
* console and also the arguments which will be used for replace the place
23+
* holders, used in the order of appearance
24+
*
25+
* The message format also takes into account whether the `.not` negate has
26+
* been used
27+
*
28+
* @return {{args: [], message: string}}
29+
*/
30+
this.formatMessage = function () {
31+
if (!msg) {
32+
msg = `Testing if %s ${this.negate ? "isn't" : 'is'} checked`;
33+
}
34+
35+
return {
36+
message: msg,
37+
args: [this.elementSelector],
38+
};
39+
};
40+
41+
/**
42+
* Returns the expected value of the assertion which is displayed in the case
43+
* of a failure
44+
*
45+
* @return {string}
46+
*/
47+
this.expected = function () {
48+
return `${this.negate ? "isn't" : 'is'} checked`;
49+
};
50+
51+
/**
52+
* Given the value, the condition used to evaluate if the assertion is passed
53+
* @param {*} value
54+
* @return {Boolean}
55+
*/
56+
this.evaluate = function (value) {
57+
return /.*\bg8-tree__node_entry_checker_checked\b.*/.test(value);
58+
};
59+
60+
/**
61+
* When defined, this method is called by the assertion runner with the
62+
* command result to determine the actual state of the assertion in the event
63+
* of a failure
64+
*
65+
* @param {Boolean} passed
66+
* @return {string}
67+
*/
68+
this.actual = function (passed) {
69+
return `${passed ? 'is' : "isn't"} checked`;
70+
};
71+
72+
/**
73+
* The command which is to be executed by the assertion runner; Nightwatch
74+
* api is available as `this.api`
75+
* @param {function} cb
76+
*/
77+
this.command = function (cb) {
78+
this.api.getAttribute(checkerSelector(selector), 'class', r => cb(r));
79+
};
80+
};

‎tests/e2e/custom-assertions/checkerIntermediate.js

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/*
2+
* GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
3+
*
4+
* Author: eidng8
5+
*/
6+
7+
const { checkerSelector } = require('../helpers');
8+
9+
/**
10+
*
11+
* @param {string} selector
12+
* @param {string} msg
13+
*/
14+
exports.assertion = function (selector, msg) {
15+
// If the custom commands operates with DOM elements, this options should be set
16+
this.options = {
17+
elementSelector: true,
18+
};
19+
20+
/**
21+
* Returns the message format which will be used to output the message in the
22+
* console and also the arguments which will be used for replace the place
23+
* holders, used in the order of appearance
24+
*
25+
* The message format also takes into account whether the `.not` negate has
26+
* been used
27+
*
28+
* @return {{args: [], message: string}}
29+
*/
30+
this.formatMessage = function () {
31+
if (!msg) {
32+
msg = `Testing if %s ${
33+
this.negate ? "isn't" : 'is'
34+
} in intermediate state`;
35+
}
36+
37+
return {
38+
message: msg,
39+
args: [this.elementSelector],
40+
};
41+
};
42+
43+
/**
44+
* Returns the expected value of the assertion which is displayed in the case
45+
* of a failure
46+
*
47+
* @return {string}
48+
*/
49+
this.expected = function () {
50+
return `${this.negate ? "isn't" : 'is'} in intermediate state`;
51+
};
52+
53+
/**
54+
* Given the value, the condition used to evaluate if the assertion is passed
55+
* @param {*} value
56+
* @return {Boolean}
57+
*/
58+
this.evaluate = function (value) {
59+
return /.*\bg8-tree__node_entry_checker_checked_some\b.*/.test(value);
60+
};
61+
62+
/**
63+
* When defined, this method is called by the assertion runner with the
64+
* command result to determine the actual state of the assertion in the event
65+
* of a failure
66+
*
67+
* @param {Boolean} passed
68+
* @return {string}
69+
*/
70+
this.actual = function (passed) {
71+
return `${passed ? 'is' : "isn't"} in intermediate state`;
72+
};
73+
74+
/**
75+
* The command which is to be executed by the assertion runner; Nightwatch
76+
* api is available as `this.api`
77+
* @param {function} cb
78+
*/
79+
this.command = function (cb) {
80+
this.api.getAttribute(checkerSelector(selector), 'class', r => cb(r));
81+
};
82+
};

‎tests/e2e/custom-assertions/nodeExpanded.js

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/*
2+
* GPLv3 https://www.gnu.org/licenses/gpl-3.0.en.html
3+
*
4+
* Author: eidng8
5+
*/
6+
7+
/**
8+
*
9+
* @param {string} selector
10+
* @param {string} msg
11+
*/
12+
exports.assertion = function (selector, msg) {
13+
// If the custom commands operates with DOM elements, this options should be set
14+
this.options = {
15+
elementSelector: true,
16+
};
17+
18+
/**
19+
* Returns the message format which will be used to output the message in the
20+
* console and also the arguments which will be used for replace the place
21+
* holders, used in the order of appearance
22+
*
23+
* The message format also takes into account whether the `.not` negate has
24+
* been used
25+
*
26+
* @return {{args: [], message: string}}
27+
*/
28+
this.formatMessage = function () {
29+
if (!msg) {
30+
msg = `Testing if %s ${this.negate ? "isn't" : 'is'} expanded`;
31+
}
32+
33+
return {
34+
message: msg,
35+
args: [this.elementSelector],
36+
};
37+
};
38+
39+
/**
40+
* Returns the expected value of the assertion which is displayed in the case
41+
* of a failure
42+
*
43+
* @return {string}
44+
*/
45+
this.expected = function () {
46+
return `${this.negate ? "isn't" : 'is'} expanded`;
47+
};
48+
49+
/**
50+
* Given the value, the condition used to evaluate if the assertion is passed
51+
* @param {*} value
52+
* @return {Boolean}
53+
*/
54+
this.evaluate = function (value) {
55+
return /.*\bg8-tree__node_expended\b.*/.test(value);
56+
};
57+
58+
/**
59+
* When defined, this method is called by the assertion runner with the
60+
* command result to determine the actual state of the assertion in the event
61+
* of a failure
62+
*
63+
* @param {Boolean} passed
64+
* @return {string}
65+
*/
66+
this.actual = function (passed) {
67+
return `${passed ? 'is' : "isn't"} expanded`;
68+
};
69+
70+
/**
71+
* The command which is to be executed by the assertion runner; Nightwatch
72+
* api is available as `this.api`
73+
* @param {function} cb
74+
*/
75+
this.command = function (cb) {
76+
this.api.getAttribute(selector, 'class', r => cb(r));
77+
};
78+
};

0 commit comments

Comments
 (0)