8
8
<li
9
9
:id =" item[itemId]"
10
10
class =" g8-tree__node"
11
- :class =" { 'g8-tree__node--expended': expanded }"
11
+ :class =" { 'g8-tree__node--expended': hasChild && expanded }"
12
12
>
13
13
<div
14
14
class =" g8-tree__node__entry"
@@ -86,44 +86,44 @@ export default class G8VueTree extends Vue {
86
86
/**
87
87
* Key of the field in `item` to be used as element's `id` attribute.
88
88
*/
89
- @Prop ({ default: ' id' }) itemId! : string ;
89
+ @Prop ({ default: ' id' }) private itemId! : string ;
90
90
91
91
/**
92
92
* Key of the field in `item` that holds node label.
93
93
*/
94
- @Prop ({ default: ' name' }) itemLabel! : string ;
94
+ @Prop ({ default: ' name' }) private itemLabel! : string ;
95
95
96
96
/**
97
97
* Key of the field in `item` that holds tags array.
98
98
*/
99
- @Prop ({ default: ' tags' }) tagsKey! : string ;
99
+ @Prop ({ default: ' tags' }) private tagsKey! : string ;
100
100
101
101
/**
102
102
* Key of the field in `item` that holds child nodes array.
103
103
*/
104
- @Prop ({ default: ' children' }) childrenKey! : string ;
104
+ @Prop ({ default: ' children' }) private childrenKey! : string ;
105
105
106
106
/**
107
107
* Key of the field in tags list of `item` to be used as tag element's `id`
108
108
* attribute.
109
109
*/
110
- @Prop ({ default: ' id' }) tagId! : string ;
110
+ @Prop ({ default: ' id' }) private tagId! : string ;
111
111
112
112
/**
113
113
* Key of the field in tags list of `item` that holds tag label.
114
114
*/
115
- @Prop ({ default: ' label' }) tagLabel! : string ;
115
+ @Prop ({ default: ' label' }) private tagLabel! : string ;
116
116
117
117
/**
118
118
* Key of the field in tags list of `item` that holds tag tooltip.
119
119
*/
120
- @Prop ({ default: ' hint' }) tagHint! : string ;
120
+ @Prop ({ default: ' hint' }) private tagHint! : string ;
121
121
122
122
/**
123
123
* Whether to add a checkbox before each item, allowing multiple nodes to
124
124
* be checked.
125
125
*/
126
- @Prop ({ default: false }) checker! : boolean ;
126
+ @Prop ({ default: false }) private checker! : boolean ;
127
127
128
128
/**
129
129
* The tree data to be rendered. Please note that data passed ***may*** be
@@ -134,39 +134,39 @@ export default class G8VueTree extends Vue {
134
134
* - intermediate
135
135
* - rendered
136
136
*/
137
- @Prop () item! : G8TreeItem ;
137
+ @Prop () private item! : G8TreeItem ;
138
138
139
139
/**
140
140
* Whether the node is expanded.
141
141
*/
142
- expanded = false ;
142
+ private expanded = false ;
143
143
144
144
/**
145
145
* Whether the node is checked. This must be a member field in order for
146
146
* binding to work.
147
147
*/
148
- checked = false ;
148
+ private checked = false ;
149
149
150
150
/**
151
151
* Intermediate check box state. Active while some of the children were
152
152
* checked, but not all were checked. This must be a member field in order for
153
153
* binding to work.
154
154
*/
155
- intermediate = false ;
155
+ private intermediate = false ;
156
156
157
157
/**
158
158
* Whether the current node has any child.
159
159
*/
160
- get hasChild(): boolean {
160
+ private get hasChild(): boolean {
161
161
const children = this .item [this .childrenKey ] as G8TreeItem [] | null ;
162
162
return children != null && children .length > 0 ;
163
163
}
164
164
165
- // noinspection JSUnusedGlobalSymbols
165
+ // noinspection JSUnusedLocalSymbols
166
166
/**
167
167
* Vue life cycle hook {@link https://vuejs.org/v2/api/#created } .
168
168
*/
169
- created() {
169
+ private created() {
170
170
this .checked = this .item .checked as boolean ;
171
171
this .intermediate = this .item .intermediate as boolean ;
172
172
}
@@ -177,7 +177,7 @@ export default class G8VueTree extends Vue {
177
177
* This method emits the `state-changed` event.
178
178
* @param state
179
179
*/
180
- setState(state : boolean ) {
180
+ private setState(state : boolean ) {
181
181
this .checked = this .item .checked = state ;
182
182
if (this .$children && this .$children .length ) {
183
183
// descend to all descendant sub-components and update their states,
@@ -207,7 +207,7 @@ export default class G8VueTree extends Vue {
207
207
* Handles click event of nodes, expanding/collapsing sub-tree if
208
208
* applicable. This method emits the `click` event.
209
209
*/
210
- clicked(event : G8ClickEvent ) {
210
+ private clicked(event : G8ClickEvent ) {
211
211
if (this .hasChild ) {
212
212
this .item .rendered = true ;
213
213
this .expanded = ! this .expanded ;
@@ -226,7 +226,7 @@ export default class G8VueTree extends Vue {
226
226
* `state-changed` event.
227
227
* @param node
228
228
*/
229
- childrenStateChanged(node : G8TreeItem ) {
229
+ private childrenStateChanged(node : G8TreeItem ) {
230
230
let checked = 0 ;
231
231
const children: G8TreeItem [] = this .item [this .childrenKey ] as G8TreeItem [];
232
232
for (const child of children ) {
0 commit comments