Skip to content
This repository was archived by the owner on Jan 1, 2025. It is now read-only.

Commit d5ea553

Browse files
kadiryazicikadiryazici
authored
Merge pull request #111 from wopehq/feature/front-2131-add-hide-nodeless-rows-prop-vue3-tree
Add hidden property
2 parents aa3a813 + 46d5b91 commit d5ea553

File tree

5 files changed

+119
-106
lines changed

5 files changed

+119
-106
lines changed

‎docs/src/guide/props.md

+3-2
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,9 @@
1212
| ----------------------------------- | :--------------: | ------------------------------------------------------------------------------------- |
1313
| id <small>**(required)**</small> | number \| string | Used to identify the node within the tree. Its value must be unique in a nodes array. |
1414
| label <small>**(required)**</small> | string | Used to display the option. |
15-
| checked | boolean | Determines whether the node is selected. |
16-
| expanded | boolean | Determines whether the node is expanded. |
15+
| checked | boolean | Determines whether the node is selected. |
16+
| expanded | boolean | Determines whether the node is expanded. |
17+
| hidden | boolean | Determines whether the node is hidden. |
1718
| nodes | Array | Array of node objects. |
1819

1920
### `indentSize`

‎src/lib/components/Tree.vue

+51-47
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,61 @@
11
<template>
22
<div class="tree">
33
<ul class="tree-list" :style="{ gap: `${gap}px` }">
4-
<tree-row
4+
<template
55
v-for="node in filteredData"
66
:key="node.id"
7-
:ref="`tree-row-${node.id}`"
8-
:node="node"
9-
:use-checkbox="useCheckbox"
10-
:use-icon="useIcon"
11-
:use-row-delete="useRowDelete"
12-
:show-child-count="showChildCount"
13-
:indent-size="indentSize"
14-
:gap="gap"
15-
:row-hover-background="rowHoverBackground"
16-
:set-node="setNode"
17-
:get-node="getNode"
18-
:update-node="updateNode"
19-
:expandable="expandable"
20-
@delete-row="onDeleteRow"
21-
@node-click="onNodeClick"
22-
@node-expanded="onNodeExpanded"
23-
@toggle-checkbox="onToggleCheckbox"
247
>
25-
<template #checkbox="{ node: slotNode, checked, indeterminate }">
26-
<slot
27-
name="checkbox"
28-
:node="slotNode"
29-
:checked="checked"
30-
:indeterminate="indeterminate"
31-
:toggle-checkbox="() => onToggleCheckbox(slotNode)"
32-
/>
33-
</template>
34-
<template v-if="useIcon" #iconActive>
35-
<slot name="iconActive" />
36-
</template>
37-
<template v-if="useIcon" #iconInactive>
38-
<slot name="iconInactive" />
39-
</template>
40-
<template v-if="useRowDelete" #deleteIcon>
41-
<slot name="deleteIcon" />
42-
</template>
43-
<template
44-
v-if="showChildCount"
45-
#childCount="{ count, checkedCount, childs }"
8+
<tree-row
9+
v-if="!node.hidden"
10+
:ref="`tree-row-${node.id}`"
11+
:node="node"
12+
:use-checkbox="useCheckbox"
13+
:use-icon="useIcon"
14+
:use-row-delete="useRowDelete"
15+
:show-child-count="showChildCount"
16+
:indent-size="indentSize"
17+
:gap="gap"
18+
:row-hover-background="rowHoverBackground"
19+
:set-node="setNode"
20+
:get-node="getNode"
21+
:update-node="updateNode"
22+
:expandable="expandable"
23+
@delete-row="onDeleteRow"
24+
@node-click="onNodeClick"
25+
@node-expanded="onNodeExpanded"
26+
@toggle-checkbox="onToggleCheckbox"
4627
>
47-
<slot
48-
name="childCount"
49-
:count="count"
50-
:checked-count="checkedCount"
51-
:childs="childs"
52-
/>
53-
</template>
54-
</tree-row>
28+
<template #checkbox="{ node: slotNode, checked, indeterminate }">
29+
<slot
30+
name="checkbox"
31+
:node="slotNode"
32+
:checked="checked"
33+
:indeterminate="indeterminate"
34+
:toggle-checkbox="() => onToggleCheckbox(slotNode)"
35+
/>
36+
</template>
37+
<template v-if="useIcon" #iconActive>
38+
<slot name="iconActive" />
39+
</template>
40+
<template v-if="useIcon" #iconInactive>
41+
<slot name="iconInactive" />
42+
</template>
43+
<template v-if="useRowDelete" #deleteIcon>
44+
<slot name="deleteIcon" />
45+
</template>
46+
<template
47+
v-if="showChildCount"
48+
#childCount="{ count, checkedCount, childs }"
49+
>
50+
<slot
51+
name="childCount"
52+
:count="count"
53+
:checked-count="checkedCount"
54+
:childs="childs"
55+
/>
56+
</template>
57+
</tree-row>
58+
</template>
5559
</ul>
5660
</div>
5761
</template>

‎src/lib/components/TreeRow.vue

+56-52
Original file line numberDiff line numberDiff line change
@@ -69,61 +69,65 @@
6969
class="tree-list"
7070
:style="{ gap: `${gap}px` }"
7171
>
72-
<tree-row
72+
<template
7373
v-for="child in node.nodes"
7474
:key="child.id"
75-
:ref="`tree-row-${child.id}`"
76-
:node="child"
77-
:use-checkbox="useCheckbox"
78-
:use-icon="useIcon"
79-
:use-row-delete="useRowDelete"
80-
:show-child-count="showChildCount"
81-
:gap="gap"
82-
:expand-row-by-default="expandRowByDefault"
83-
:indent-size="indentSize"
84-
:row-hover-background="rowHoverBackground"
85-
:set-node="setNode"
86-
:get-node="getNode"
87-
:update-node="updateNode"
88-
:expandable="expandable"
89-
@delete-row="removedRow"
90-
@node-click="(item) => handleClick(item, true)"
91-
@toggle-checkbox="onToggleCheckbox"
92-
@node-expanded="onNodeExpanded"
9375
>
94-
<template #childCount="{ count, checkedCount, childs }">
95-
<slot
96-
name="childCount"
97-
:count="count"
98-
:checked-count="checkedCount"
99-
:childs="childs"
100-
/>
101-
</template>
102-
<template #iconActive>
103-
<slot name="iconActive">
104-
<arrow-right />
105-
</slot>
106-
</template>
107-
<template #iconInactive>
108-
<slot name="iconInactive">
109-
<arrow-down />
110-
</slot>
111-
</template>
112-
<template #deleteIcon>
113-
<slot name="deleteIcon">
114-
<delete-icon />
115-
</slot>
116-
</template>
117-
<template #checkbox="{ node: slotNode, checked, indeterminate }">
118-
<slot
119-
:id="slotNode.id"
120-
name="checkbox"
121-
:node="slotNode"
122-
:checked="checked"
123-
:indeterminate="indeterminate"
124-
/>
125-
</template>
126-
</tree-row>
76+
<tree-row
77+
v-if="!child.hidden"
78+
:ref="`tree-row-${child.id}`"
79+
:node="child"
80+
:use-checkbox="useCheckbox"
81+
:use-icon="useIcon"
82+
:use-row-delete="useRowDelete"
83+
:show-child-count="showChildCount"
84+
:gap="gap"
85+
:expand-row-by-default="expandRowByDefault"
86+
:indent-size="indentSize"
87+
:row-hover-background="rowHoverBackground"
88+
:set-node="setNode"
89+
:get-node="getNode"
90+
:update-node="updateNode"
91+
:expandable="expandable"
92+
@delete-row="removedRow"
93+
@node-click="(item) => handleClick(item, true)"
94+
@toggle-checkbox="onToggleCheckbox"
95+
@node-expanded="onNodeExpanded"
96+
>
97+
<template #childCount="{ count, checkedCount, childs }">
98+
<slot
99+
name="childCount"
100+
:count="count"
101+
:checked-count="checkedCount"
102+
:childs="childs"
103+
/>
104+
</template>
105+
<template #iconActive>
106+
<slot name="iconActive">
107+
<arrow-right />
108+
</slot>
109+
</template>
110+
<template #iconInactive>
111+
<slot name="iconInactive">
112+
<arrow-down />
113+
</slot>
114+
</template>
115+
<template #deleteIcon>
116+
<slot name="deleteIcon">
117+
<delete-icon />
118+
</slot>
119+
</template>
120+
<template #checkbox="{ node: slotNode, checked, indeterminate }">
121+
<slot
122+
:id="slotNode.id"
123+
name="checkbox"
124+
:node="slotNode"
125+
:checked="checked"
126+
:indeterminate="indeterminate"
127+
/>
128+
</template>
129+
</tree-row>
130+
</template>
127131
</ul>
128132
</li>
129133
</template>

‎src/lib/index.d.ts

+4
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@ export interface TreeNode {
2424
* Array of node objects.
2525
*/
2626
nodes?: TreeNode[];
27+
/**
28+
* Determines whether the node is hidden.
29+
*/
30+
hidden?: boolean;
2731
}
2832

2933
export interface TreeProps {

‎src/main.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { createApp } from 'vue'
2-
import App from './App.vue'
1+
import { createApp } from 'vue';
2+
import App from './App.vue';
33

4-
import Tree from './lib/index'
5-
export default Tree
4+
import Tree from './lib/index';
5+
export default Tree;
66

7-
createApp(App).mount('#app')
7+
createApp(App).mount('#app');

0 commit comments

Comments
 (0)