vue3-nice-treeview 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -10
- package/dist/style.css +1 -1
- package/dist/vue3-nice-treeview.es.js +58 -58
- package/dist/vue3-nice-treeview.umd.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,30 +1,34 @@
|
|
|
1
1
|
# Vue 3 Nice Treeview
|
|
2
|
-
|
|
3
2
|
A treeview component for Vue 3 with checkbox/highlight selection, multi/single select, search, and RTL support.
|
|
4
3
|
|
|
5
4
|
## Installation
|
|
6
|
-
|
|
7
5
|
```bash
|
|
8
6
|
npm install vue3-nice-treeview
|
|
7
|
+
```
|
|
9
8
|
|
|
10
|
-
##
|
|
9
|
+
## Dependencies
|
|
10
|
+
```bash
|
|
11
|
+
npm install bootstrap-icons
|
|
12
|
+
```
|
|
11
13
|
|
|
14
|
+
## Configuration
|
|
12
15
|
```javascript
|
|
13
16
|
import { createApp } from 'vue'
|
|
14
17
|
import { NiceTreeViewPlugin } from 'vue3-nice-treeview'
|
|
15
18
|
import 'vue3-nice-treeview/dist/style.css'
|
|
19
|
+
import 'bootstrap-icons/font/bootstrap-icons.css'
|
|
16
20
|
|
|
17
21
|
const app = createApp(App)
|
|
18
22
|
app.use(NiceTreeViewPlugin)
|
|
19
23
|
app.mount('#app')
|
|
20
24
|
```
|
|
21
25
|
|
|
22
|
-
|
|
23
|
-
|
|
26
|
+
## Usage
|
|
27
|
+
```html
|
|
28
|
+
<nice-treeview :nodes="nodes" @node-check-change="onSelectionChange"/>
|
|
24
29
|
```
|
|
25
30
|
|
|
26
31
|
## Node Structure
|
|
27
|
-
|
|
28
32
|
```javascript
|
|
29
33
|
{
|
|
30
34
|
id: 1, // Required — unique identifier
|
|
@@ -36,7 +40,6 @@ app.mount('#app')
|
|
|
36
40
|
```
|
|
37
41
|
|
|
38
42
|
## Props
|
|
39
|
-
|
|
40
43
|
| Prop | Type | Default | Description |
|
|
41
44
|
|------|------|---------|-------------|
|
|
42
45
|
| `nodes` | `Array` | *required* | Tree data array |
|
|
@@ -50,11 +53,9 @@ app.mount('#app')
|
|
|
50
53
|
| `floatingHeader` | `Boolean` | `true` | Floating toolbar |
|
|
51
54
|
|
|
52
55
|
## Events
|
|
53
|
-
|
|
54
56
|
| Event | Payload | Description |
|
|
55
57
|
|-------|---------|-------------|
|
|
56
58
|
| `node-check-change` | `(node, selectedIds)` | Fires on selection change |
|
|
57
59
|
|
|
58
60
|
## License
|
|
59
|
-
|
|
60
|
-
MIT
|
|
61
|
+
MIT
|
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.position-relative[data-v-
|
|
1
|
+
.position-relative[data-v-e8eff37d]{position:relative}.position-absolute[data-v-e8eff37d]{position:absolute}.d-flex[data-v-e8eff37d]{display:flex}.align-items-center[data-v-e8eff37d]{align-items:center}.justify-content-center[data-v-e8eff37d]{justify-content:center}.mt-1[data-v-e8eff37d]{margin-top:.2rem}.mt-2[data-v-e8eff37d]{margin-top:.3rem}.ms-2[data-v-e8eff37d]{margin-left:.5rem}.me-2[data-v-e8eff37d]{margin-right:.5rem}.ntv-rtl .ms-2[data-v-e8eff37d]{margin-left:.5rem;margin-right:0}.ntv-ltr .ms-2[data-v-e8eff37d]{margin-right:.5rem;margin-left:0}.py-2[data-v-e8eff37d]{padding-top:.5rem;padding-bottom:.5rem}.px-6[data-v-e8eff37d]{padding-left:1.5rem;padding-right:1.5rem}.border[data-v-e8eff37d]{border:1px solid #dee2e6}.border-gray-300[data-v-e8eff37d]{border-color:#dee2e6}.border-gray-400[data-v-e8eff37d]{border-color:#ced4da}.rounded[data-v-e8eff37d]{border-radius:.375rem}.bg-warning[data-v-e8eff37d]{background-color:#ffc107}.text-gray-700[data-v-e8eff37d]{color:#495057}.cursor-pointer[data-v-e8eff37d]{cursor:pointer}.cursor-default[data-v-e8eff37d]{cursor:default}.form-control[data-v-e8eff37d]{display:block;width:100%;padding:.375rem .75rem;font-size:1rem;font-weight:400;font-family:inherit;line-height:1.5;color:#212529;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.form-control[data-v-e8eff37d]:focus{color:#212529;background-color:#fff;border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.form-check-input[data-v-e8eff37d]{width:1.2rem;height:1.2rem;vertical-align:top;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;border:1px solid rgba(0,0,0,.25);border-radius:.4em;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer}.form-check-input[data-v-e8eff37d]:checked{background-color:#0d6efd;border-color:#0d6efd;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}.form-check-input[data-v-e8eff37d]:indeterminate{background-color:#0d6efd;border-color:#0d6efd;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")}.form-check-input[data-v-e8eff37d]:focus{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.form-check-label[data-v-e8eff37d]{cursor:pointer}.nice-treeview[data-v-e8eff37d]{font-family:Tahoma,Segoe UI,Arial,sans-serif}.ntv-rtl .tree-view[data-v-e8eff37d]{direction:rtl}.ntv-rtl .node[data-v-e8eff37d]{margin-right:14px;margin-left:0}.ntv-rtl .node label[data-v-e8eff37d]{margin-right:0;margin-left:0}.ntv-rtl li[data-v-e8eff37d]{border-right:1px dashed #dadada;border-left:none}.ntv-rtl i[data-v-e8eff37d]{right:-5px;left:auto}.ntv-rtl ul[data-v-e8eff37d]:first-child{margin-right:0;margin-left:auto}.ntv-rtl input[type=checkbox][data-v-e8eff37d]{margin-left:5px;margin-right:3px}.ntv-rtl li[data-v-e8eff37d]:before{right:0;left:auto}.ntv-rtl .tree-header[data-v-e8eff37d]{left:-5px;right:auto}.ntv-rtl .tree-header input[type=text][data-v-e8eff37d]{direction:rtl;padding:3px 7px 3px 17px}.ntv-rtl i.clear-txt[data-v-e8eff37d]{left:11px;right:unset}.ntv-ltr .tree-view[data-v-e8eff37d]{direction:ltr}.ntv-ltr .node[data-v-e8eff37d]{margin-left:14px;margin-right:0}.ntv-ltr .node label[data-v-e8eff37d]{margin-left:0;margin-right:0}.ntv-ltr li[data-v-e8eff37d]{border-left:1px dashed #dadada;border-right:none}.ntv-ltr i[data-v-e8eff37d]{left:-5px;right:auto}.ntv-ltr ul[data-v-e8eff37d]:first-child{margin-left:0;margin-right:auto}.ntv-ltr input[type=checkbox][data-v-e8eff37d]{margin-right:5px;margin-left:3px}.ntv-ltr li[data-v-e8eff37d]:before{left:0;right:auto}.ntv-ltr .tree-header[data-v-e8eff37d]{right:-5px;left:auto}.ntv-ltr .tree-header .search-input[data-v-e8eff37d]{order:2}.ntv-ltr .tree-header .tree-controls[data-v-e8eff37d]{order:1}.ntv-ltr i.clear-txt[data-v-e8eff37d]{right:11px;left:unset}.ntv-ltr .tree-header input[type=text][data-v-e8eff37d]{direction:ltr;padding:3px 17px 3px 7px}.node[data-v-e8eff37d]{display:flex;align-items:center;padding:2px 3px 3px}li[data-v-e8eff37d]{list-style:none}li label[data-v-e8eff37d]{color:#8a8a8a;padding-right:5px;padding-left:5px}li.final label[data-v-e8eff37d]{color:#2d2d2d;font-weight:500}.ntv-selectable[data-v-e8eff37d]{cursor:pointer}.ntv-selectable label[data-v-e8eff37d]{cursor:pointer!important}i[data-v-e8eff37d]{top:0;padding:.16rem;color:#000;z-index:9;position:absolute;background:white;border-radius:50%;display:flex;justify-content:center;font-size:9px;line-height:9;border:1px solid gray}ul[data-v-e8eff37d]:first-child{position:relative;margin-top:0;margin-bottom:0}i.bi-dot[data-v-e8eff37d]{color:transparent;background:transparent;border:none;cursor:default}li[data-v-e8eff37d]:before{position:absolute;content:"---";letter-spacing:3px;font-size:10px;color:#dadada;margin-top:8px}input[type=checkbox][data-v-e8eff37d]:indeterminate{background-color:#bbcef5}.tree-controls[data-v-e8eff37d]{display:flex;height:100%;align-items:center}.tree-controls span[data-v-e8eff37d]{display:flex;justify-content:center;align-items:center;border-radius:50%;width:26px;height:26px;cursor:pointer}.tree-controls span i[data-v-e8eff37d]{font-size:.75rem;position:unset;top:auto;right:auto}.tree-header[data-v-e8eff37d]{display:flex;align-items:center;gap:9px;z-index:2}.tree-header.floating-header[data-v-e8eff37d]{position:absolute;top:2px;justify-content:flex-end}.tree-header[data-v-e8eff37d]:not(.floating-header){position:relative;margin-bottom:.5rem}.ntv-rtl .tree-header[data-v-e8eff37d]:not(.floating-header){justify-content:flex-end}.ntv-ltr .tree-header[data-v-e8eff37d]:not(.floating-header){justify-content:flex-start}.floating-content[data-v-e8eff37d]{padding-top:1.55rem!important}div.search-input[data-v-e8eff37d]{position:relative}.tree-header input[type=text][data-v-e8eff37d]{width:80px;font-size:.9rem;line-height:1;transition:all linear .2s .3s}.tree-header input[type=text][data-v-e8eff37d]:focus{width:144px;transition:all linear .2s}i.clear-txt[data-v-e8eff37d]{border:none;position:absolute;top:25%;opacity:.5;cursor:pointer}i.clear-txt[data-v-e8eff37d]:hover{opacity:1}.ntv-selected[data-v-e8eff37d]{background-color:#cfe2ff;border-radius:.25rem}.ntv-selected label[data-v-e8eff37d]{color:#084298!important}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { getCurrentInstance as j, ref as G, watch as M, nextTick as
|
|
2
|
-
const te = (
|
|
3
|
-
const i =
|
|
1
|
+
import { getCurrentInstance as j, ref as G, watch as M, nextTick as x, onMounted as J, onUpdated as Q, resolveComponent as W, openBlock as h, createElementBlock as s, normalizeClass as b, createElementVNode as u, withDirectives as D, vModelText as X, createCommentVNode as f, Fragment as Y, renderList as Z, vModelCheckbox as p, toDisplayString as $, createBlock as ee } from "vue";
|
|
2
|
+
const te = (n, o) => {
|
|
3
|
+
const i = n.__vccOpts || n;
|
|
4
4
|
for (const [r, k] of o)
|
|
5
5
|
i[r] = k;
|
|
6
6
|
return i;
|
|
@@ -18,7 +18,7 @@ const te = (c, o) => {
|
|
|
18
18
|
showSearchBox: { type: Boolean, default: !0 }
|
|
19
19
|
},
|
|
20
20
|
emits: ["node-check-change"],
|
|
21
|
-
setup(
|
|
21
|
+
setup(n, { emit: o }) {
|
|
22
22
|
const i = j(), r = !i.parent || i.parent.type.name !== "NiceTreeView", k = G("");
|
|
23
23
|
function d(e, t) {
|
|
24
24
|
Array.isArray(e) && e.forEach((l) => {
|
|
@@ -43,16 +43,16 @@ const te = (c, o) => {
|
|
|
43
43
|
t = t || a;
|
|
44
44
|
}), t;
|
|
45
45
|
}
|
|
46
|
-
function
|
|
46
|
+
function c(e) {
|
|
47
47
|
e.children && (e.expanded = !e.expanded);
|
|
48
48
|
}
|
|
49
49
|
function m() {
|
|
50
|
-
d(
|
|
50
|
+
d(n.nodes, (e) => {
|
|
51
51
|
e.children && (e.expanded = !0);
|
|
52
52
|
});
|
|
53
53
|
}
|
|
54
54
|
function L() {
|
|
55
|
-
d(
|
|
55
|
+
d(n.nodes, (e) => {
|
|
56
56
|
e.children && (e.expanded = !1);
|
|
57
57
|
});
|
|
58
58
|
}
|
|
@@ -84,7 +84,7 @@ const te = (c, o) => {
|
|
|
84
84
|
var l;
|
|
85
85
|
if ((l = t.children) != null && l.length) {
|
|
86
86
|
S(t.children);
|
|
87
|
-
const a = t.children.every((
|
|
87
|
+
const a = t.children.every((g) => g.checked), y = t.children.every((g) => !g.checked && !g.indeterminate), _ = t.children.some((g) => g.checked || g.indeterminate);
|
|
88
88
|
(!document.activeElement || document.activeElement.id !== "chb_" + t.id) && (t.checked = a), t.indeterminate = !a && _ && !y;
|
|
89
89
|
}
|
|
90
90
|
});
|
|
@@ -106,16 +106,16 @@ const te = (c, o) => {
|
|
|
106
106
|
});
|
|
107
107
|
}
|
|
108
108
|
function H() {
|
|
109
|
-
|
|
109
|
+
n.multiSelect && (n.showCheckboxes ? (d(n.nodes, (e) => {
|
|
110
110
|
e.checked = !0, e.indeterminate = !1;
|
|
111
|
-
}), B()) : (d(
|
|
111
|
+
}), B()) : (d(n.nodes, (e) => {
|
|
112
112
|
(!e.children || !e.children.length) && (e.selected = !0);
|
|
113
113
|
}), T()));
|
|
114
114
|
}
|
|
115
115
|
function P() {
|
|
116
|
-
|
|
116
|
+
n.multiSelect && (n.showCheckboxes ? (d(n.nodes, (e) => {
|
|
117
117
|
e.checked = !1, e.indeterminate = !1;
|
|
118
|
-
}), B()) : (d(
|
|
118
|
+
}), B()) : (d(n.nodes, (e) => {
|
|
119
119
|
e.selected = !1;
|
|
120
120
|
}), T()));
|
|
121
121
|
}
|
|
@@ -123,7 +123,7 @@ const te = (c, o) => {
|
|
|
123
123
|
const t = w();
|
|
124
124
|
S(t);
|
|
125
125
|
const l = N(t);
|
|
126
|
-
o("node-check-change", e, l),
|
|
126
|
+
o("node-check-change", e, l), x(() => C(t));
|
|
127
127
|
}
|
|
128
128
|
function T(e = null) {
|
|
129
129
|
const t = w(), l = V(t);
|
|
@@ -132,20 +132,20 @@ const te = (c, o) => {
|
|
|
132
132
|
function K(e) {
|
|
133
133
|
var l;
|
|
134
134
|
const t = w();
|
|
135
|
-
|
|
135
|
+
n.multiSelect ? ((l = e.children) != null && l.length && E(e, e.checked), S(t), x(() => {
|
|
136
136
|
C(t);
|
|
137
137
|
const a = N(t);
|
|
138
138
|
o("node-check-change", e, a);
|
|
139
|
-
})) : (e.checked && (q(t), e.checked = !0),
|
|
139
|
+
})) : (e.checked && (q(t), e.checked = !0), x(() => {
|
|
140
140
|
const a = N(t);
|
|
141
141
|
o("node-check-change", e, a);
|
|
142
142
|
}));
|
|
143
143
|
}
|
|
144
144
|
function z(e, t) {
|
|
145
|
-
if (
|
|
145
|
+
if (n.showCheckboxes || !n.multiSelect && e.children && e.children.length)
|
|
146
146
|
return;
|
|
147
147
|
const l = w(), a = e.children && e.children.length > 0;
|
|
148
|
-
if (
|
|
148
|
+
if (n.multiSelect)
|
|
149
149
|
if (t.ctrlKey || t.metaKey)
|
|
150
150
|
if (a) {
|
|
151
151
|
const y = U(e);
|
|
@@ -159,34 +159,34 @@ const te = (c, o) => {
|
|
|
159
159
|
T(e);
|
|
160
160
|
}
|
|
161
161
|
function F(e, t) {
|
|
162
|
-
|
|
162
|
+
n.showCheckboxes && n.multiSelect ? B(e) : o("node-check-change", e, t);
|
|
163
163
|
}
|
|
164
164
|
M(k, () => {
|
|
165
|
-
|
|
165
|
+
x(() => {
|
|
166
166
|
var t;
|
|
167
167
|
const e = (t = k.value) == null ? void 0 : t.trim();
|
|
168
|
-
!e || e.length === 0 ? d(
|
|
168
|
+
!e || e.length === 0 ? d(n.nodes, (l) => {
|
|
169
169
|
l.match = !1, l.children && (l.expanded = !0);
|
|
170
|
-
}) : v(
|
|
170
|
+
}) : v(n.nodes), n.showCheckboxes && n.multiSelect && C(n.nodes);
|
|
171
171
|
});
|
|
172
172
|
}), M(
|
|
173
|
-
() =>
|
|
173
|
+
() => n.nodes,
|
|
174
174
|
(e) => {
|
|
175
|
-
!Array.isArray(e) || e.length === 0 ||
|
|
176
|
-
|
|
175
|
+
!Array.isArray(e) || e.length === 0 || x(() => {
|
|
176
|
+
n.showCheckboxes && n.multiSelect && (S(n.nodes), C(n.nodes));
|
|
177
177
|
});
|
|
178
178
|
},
|
|
179
179
|
{ deep: !0, immediate: !0 }
|
|
180
|
-
), J(() =>
|
|
181
|
-
|
|
182
|
-
})), Q(() =>
|
|
183
|
-
|
|
180
|
+
), J(() => x(() => {
|
|
181
|
+
n.showCheckboxes && n.multiSelect && C(n.nodes);
|
|
182
|
+
})), Q(() => x(() => {
|
|
183
|
+
n.showCheckboxes && n.multiSelect && C(n.nodes);
|
|
184
184
|
}));
|
|
185
185
|
function O() {
|
|
186
186
|
k.value = "";
|
|
187
187
|
}
|
|
188
188
|
return {
|
|
189
|
-
toggleNode:
|
|
189
|
+
toggleNode: c,
|
|
190
190
|
onNodeCheckChange: K,
|
|
191
191
|
onNodeClick: z,
|
|
192
192
|
onChildChange: F,
|
|
@@ -206,7 +206,7 @@ const te = (c, o) => {
|
|
|
206
206
|
key: 1,
|
|
207
207
|
class: "bi fs-5 mt-2 cursor-pointer bi-dot"
|
|
208
208
|
}, se = ["onClick"], de = ["id", "onUpdate:modelValue", "onChange"], ue = ["for", "onDblclick"];
|
|
209
|
-
function fe(
|
|
209
|
+
function fe(n, o, i, r, k, d) {
|
|
210
210
|
var v;
|
|
211
211
|
const w = W("NiceTreeView", !0);
|
|
212
212
|
return h(), s("div", {
|
|
@@ -220,7 +220,7 @@ function fe(c, o, i, r, k, d) {
|
|
|
220
220
|
i.showSearchBox ? D((h(), s("input", {
|
|
221
221
|
key: 0,
|
|
222
222
|
type: "text",
|
|
223
|
-
"onUpdate:modelValue": o[0] || (o[0] = (
|
|
223
|
+
"onUpdate:modelValue": o[0] || (o[0] = (c) => r.searchText = c),
|
|
224
224
|
placeholder: i.rtl ? "جستجو..." : "Search...",
|
|
225
225
|
class: "form-control ms-2"
|
|
226
226
|
}, null, 8, ne)), [
|
|
@@ -229,31 +229,31 @@ function fe(c, o, i, r, k, d) {
|
|
|
229
229
|
((v = r.searchText) == null ? void 0 : v.trim().length) > 0 ? (h(), s("i", {
|
|
230
230
|
key: 1,
|
|
231
231
|
class: "bi bi-x-lg text-gray-700 clear-txt",
|
|
232
|
-
onClick: o[1] || (o[1] = (...
|
|
232
|
+
onClick: o[1] || (o[1] = (...c) => r.clearTxt && r.clearTxt(...c))
|
|
233
233
|
})) : f("", !0)
|
|
234
234
|
]),
|
|
235
235
|
i.showCheckUncheckButtons || i.showExpandCollapseButtons ? (h(), s("div", ie, [
|
|
236
236
|
i.showExpandCollapseButtons ? (h(), s("span", {
|
|
237
237
|
key: 0,
|
|
238
|
-
onClick: o[2] || (o[2] = (...
|
|
238
|
+
onClick: o[2] || (o[2] = (...c) => r.expandAll && r.expandAll(...c))
|
|
239
239
|
}, [...o[6] || (o[6] = [
|
|
240
240
|
u("i", { class: "bi bi-arrows-angle-expand" }, null, -1)
|
|
241
241
|
])])) : f("", !0),
|
|
242
242
|
i.showExpandCollapseButtons ? (h(), s("span", {
|
|
243
243
|
key: 1,
|
|
244
|
-
onClick: o[3] || (o[3] = (...
|
|
244
|
+
onClick: o[3] || (o[3] = (...c) => r.collapseAll && r.collapseAll(...c))
|
|
245
245
|
}, [...o[7] || (o[7] = [
|
|
246
246
|
u("i", { class: "bi bi-arrows-angle-contract" }, null, -1)
|
|
247
247
|
])])) : f("", !0),
|
|
248
248
|
i.showCheckUncheckButtons && i.multiSelect ? (h(), s("span", {
|
|
249
249
|
key: 2,
|
|
250
|
-
onClick: o[4] || (o[4] = (...
|
|
250
|
+
onClick: o[4] || (o[4] = (...c) => r.checkAllNodes && r.checkAllNodes(...c))
|
|
251
251
|
}, [...o[8] || (o[8] = [
|
|
252
252
|
u("i", { class: "bi bi-check2-square" }, null, -1)
|
|
253
253
|
])])) : f("", !0),
|
|
254
254
|
i.showCheckUncheckButtons && i.multiSelect ? (h(), s("span", {
|
|
255
255
|
key: 3,
|
|
256
|
-
onClick: o[5] || (o[5] = (...
|
|
256
|
+
onClick: o[5] || (o[5] = (...c) => r.uncheckAllNodes && r.uncheckAllNodes(...c))
|
|
257
257
|
}, [...o[9] || (o[9] = [
|
|
258
258
|
u("i", { class: "bi bi-square" }, null, -1)
|
|
259
259
|
])])) : f("", !0)
|
|
@@ -264,43 +264,43 @@ function fe(c, o, i, r, k, d) {
|
|
|
264
264
|
}, [
|
|
265
265
|
u("div", oe, [
|
|
266
266
|
u("ul", re, [
|
|
267
|
-
(h(!0), s(Y, null, Z(i.nodes, (
|
|
268
|
-
key:
|
|
267
|
+
(h(!0), s(Y, null, Z(i.nodes, (c) => (h(), s("div", {
|
|
268
|
+
key: c.id,
|
|
269
269
|
class: "d-flex position-relative"
|
|
270
270
|
}, [
|
|
271
|
-
|
|
271
|
+
c.children && c.children.length > 0 ? (h(), s("i", {
|
|
272
272
|
key: 0,
|
|
273
273
|
onClick: (m) => {
|
|
274
|
-
r.toggleNode(
|
|
274
|
+
r.toggleNode(c);
|
|
275
275
|
},
|
|
276
|
-
class: b(["bi mt-2 cursor-pointer position-absolute", `bi-${
|
|
276
|
+
class: b(["bi mt-2 cursor-pointer position-absolute", `bi-${c.expanded ? "chevron-down" : i.rtl ? "chevron-left" : "chevron-right"}`])
|
|
277
277
|
}, null, 10, ae)) : (h(), s("i", he)),
|
|
278
278
|
u("li", {
|
|
279
|
-
class: b(
|
|
279
|
+
class: b(c.children ? c.expanded ? "expanded" : "collapsed" : "final")
|
|
280
280
|
}, [
|
|
281
281
|
u("div", {
|
|
282
|
-
class: b(["node", { "ntv-selected": !i.showCheckboxes &&
|
|
283
|
-
onClick: (m) => i.showCheckboxes ? null : r.onNodeClick(
|
|
282
|
+
class: b(["node", { "ntv-selected": !i.showCheckboxes && c.selected && (!c.children || !c.children.length), "ntv-selectable": !i.showCheckboxes }]),
|
|
283
|
+
onClick: (m) => i.showCheckboxes ? null : r.onNodeClick(c, m)
|
|
284
284
|
}, [
|
|
285
|
-
i.showCheckboxes && (i.multiSelect || !
|
|
285
|
+
i.showCheckboxes && (i.multiSelect || !c.children || !c.children.length) ? D((h(), s("input", {
|
|
286
286
|
key: 0,
|
|
287
|
-
id: "chb_" +
|
|
287
|
+
id: "chb_" + c.id,
|
|
288
288
|
type: "checkbox",
|
|
289
289
|
class: "form-check-input border-gray-400",
|
|
290
|
-
"onUpdate:modelValue": (m) =>
|
|
291
|
-
onChange: (m) => r.onNodeCheckChange(
|
|
290
|
+
"onUpdate:modelValue": (m) => c.checked = m,
|
|
291
|
+
onChange: (m) => r.onNodeCheckChange(c)
|
|
292
292
|
}, null, 40, de)), [
|
|
293
|
-
[p,
|
|
293
|
+
[p, c.checked]
|
|
294
294
|
]) : f("", !0),
|
|
295
295
|
u("label", {
|
|
296
|
-
for: i.showCheckboxes && (i.multiSelect || !
|
|
297
|
-
class: b(["form-check-label", i.showCheckboxes ? "cursor-default" : "cursor-pointer", { "bg-warning":
|
|
298
|
-
onDblclick: (m) => r.toggleNode(
|
|
299
|
-
}, $(
|
|
296
|
+
for: i.showCheckboxes && (i.multiSelect || !c.children || !c.children.length) ? "chb_" + c.id : null,
|
|
297
|
+
class: b(["form-check-label", i.showCheckboxes ? "cursor-default" : "cursor-pointer", { "bg-warning": c.match }]),
|
|
298
|
+
onDblclick: (m) => r.toggleNode(c)
|
|
299
|
+
}, $(c.label), 43, ue)
|
|
300
300
|
], 10, se),
|
|
301
|
-
|
|
301
|
+
c.children && c.expanded ? (h(), ee(w, {
|
|
302
302
|
key: 0,
|
|
303
|
-
nodes:
|
|
303
|
+
nodes: c.children,
|
|
304
304
|
showCheckboxes: i.showCheckboxes,
|
|
305
305
|
multiSelect: i.multiSelect,
|
|
306
306
|
showSearchBox: !1,
|
|
@@ -316,9 +316,9 @@ function fe(c, o, i, r, k, d) {
|
|
|
316
316
|
], 2)
|
|
317
317
|
], 2);
|
|
318
318
|
}
|
|
319
|
-
const I = /* @__PURE__ */ te(le, [["render", fe], ["__scopeId", "data-v-
|
|
320
|
-
install(
|
|
321
|
-
|
|
319
|
+
const I = /* @__PURE__ */ te(le, [["render", fe], ["__scopeId", "data-v-e8eff37d"]]), me = {
|
|
320
|
+
install(n) {
|
|
321
|
+
n.component("nice-treeview", I), n.component("NiceTreeView", I);
|
|
322
322
|
}
|
|
323
323
|
};
|
|
324
324
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(d,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(d=typeof globalThis<"u"?globalThis:d||self,t(d.Vue3NiceTreeview={},d.Vue))})(this,function(d,t){"use strict";const v="",U=(
|
|
1
|
+
(function(d,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(d=typeof globalThis<"u"?globalThis:d||self,t(d.Vue3NiceTreeview={},d.Vue))})(this,function(d,t){"use strict";const v="",U=(i,r)=>{const o=i.__vccOpts||i;for(const[a,f]of r)o[a]=f;return o},z={name:"NiceTreeView",props:{nodes:{type:Array,required:!0},rtl:{type:Boolean,default:!1},showCheckboxes:{type:Boolean,default:!0},multiSelect:{type:Boolean,default:!0},showToolbar:{type:Boolean,default:!0},floatingHeader:{type:Boolean,default:!1},showExpandCollapseButtons:{type:Boolean,default:!0},showCheckUncheckButtons:{type:Boolean,default:!0},showSearchBox:{type:Boolean,default:!0}},emits:["node-check-change"],setup(i,{emit:r}){const o=t.getCurrentInstance(),a=!o.parent||o.parent.type.name!=="NiceTreeView",f=t.ref("");function h(e,l){Array.isArray(e)&&e.forEach(c=>{l(c),c.children&&c.children.length>0&&h(c.children,l)})}function u(){let e=o;for(;e.parent&&e.parent.type.name==="NiceTreeView";)e=e.parent;return e.props.nodes}function g(e){let l=!1;return e.forEach(c=>{var x;const s=c.label.toLowerCase().includes(f.value.toLowerCase());if(c.match=s,(x=c.children)!=null&&x.length){const y=g(c.children);c.expanded=y,l=l||s||y}else l=l||s}),l}function n(e){e.children&&(e.expanded=!e.expanded)}function k(){h(i.nodes,e=>{e.children&&(e.expanded=!0)})}function G(){h(i.nodes,e=>{e.children&&(e.expanded=!1)})}function T(e,l){e.checked=l,e.indeterminate=!1,e.children&&e.children.length>0&&e.children.forEach(c=>T(c,l))}function b(e){const l=[];return e==null||e.forEach(c=>{var s;(s=c.children)!=null&&s.length?l.push(...b(c.children)):c.checked&&l.push(c.id)}),l}function S(e){const l=[];return e==null||e.forEach(c=>{var s;(s=c.children)!=null&&s.length?l.push(...S(c.children)):c.selected&&l.push(c.id)}),l}function B(e,l){e.children&&e.children.length>0?e.children.forEach(c=>B(c,l)):e.selected=l}function _(e){return!e.children||!e.children.length?!!e.selected:e.children.every(l=>_(l))}function N(e){e==null||e.forEach(l=>{var c;if((c=l.children)!=null&&c.length){N(l.children);const s=l.children.every(C=>C.checked),x=l.children.every(C=>!C.checked&&!C.indeterminate),y=l.children.some(C=>C.checked||C.indeterminate);(!document.activeElement||document.activeElement.id!=="chb_"+l.id)&&(l.checked=s),l.indeterminate=!s&&y&&!x}})}function m(e){Array.isArray(e)&&e.forEach(l=>{const c=document.getElementById("chb_"+l.id);c&&(c.indeterminate=!!l.indeterminate),Array.isArray(l.children)&&l.children.length>0&&m(l.children)})}function J(e){h(e,l=>{l.checked=!1,l.indeterminate=!1})}function A(e){h(e,l=>{l.selected=!1})}function Q(){i.multiSelect&&(i.showCheckboxes?(h(i.nodes,e=>{e.checked=!0,e.indeterminate=!1}),E()):(h(i.nodes,e=>{(!e.children||!e.children.length)&&(e.selected=!0)}),V()))}function W(){i.multiSelect&&(i.showCheckboxes?(h(i.nodes,e=>{e.checked=!1,e.indeterminate=!1}),E()):(h(i.nodes,e=>{e.selected=!1}),V()))}function E(e=null){const l=u();N(l);const c=b(l);r("node-check-change",e,c),t.nextTick(()=>m(l))}function V(e=null){const l=u(),c=S(l);r("node-check-change",e,c)}function X(e){var c;const l=u();i.multiSelect?((c=e.children)!=null&&c.length&&T(e,e.checked),N(l),t.nextTick(()=>{m(l);const s=b(l);r("node-check-change",e,s)})):(e.checked&&(J(l),e.checked=!0),t.nextTick(()=>{const s=b(l);r("node-check-change",e,s)}))}function Y(e,l){if(i.showCheckboxes||!i.multiSelect&&e.children&&e.children.length)return;const c=u(),s=e.children&&e.children.length>0;if(i.multiSelect)if(l.ctrlKey||l.metaKey)if(s){const x=_(e);B(e,!x)}else e.selected=!e.selected;else A(c),s?B(e,!0):e.selected=!0;else A(c),e.selected=!0;V(e)}function Z(e,l){i.showCheckboxes&&i.multiSelect?E(e):r("node-check-change",e,l)}t.watch(f,()=>{t.nextTick(()=>{var l;const e=(l=f.value)==null?void 0:l.trim();!e||e.length===0?h(i.nodes,c=>{c.match=!1,c.children&&(c.expanded=!0)}):g(i.nodes),i.showCheckboxes&&i.multiSelect&&m(i.nodes)})}),t.watch(()=>i.nodes,e=>{!Array.isArray(e)||e.length===0||t.nextTick(()=>{i.showCheckboxes&&i.multiSelect&&(N(i.nodes),m(i.nodes))})},{deep:!0,immediate:!0}),t.onMounted(()=>t.nextTick(()=>{i.showCheckboxes&&i.multiSelect&&m(i.nodes)})),t.onUpdated(()=>t.nextTick(()=>{i.showCheckboxes&&i.multiSelect&&m(i.nodes)}));function p(){f.value=""}return{toggleNode:n,onNodeCheckChange:X,onNodeClick:Y,onChildChange:Z,expandAll:k,collapseAll:G,checkAllNodes:Q,uncheckAllNodes:W,isRoot:a,searchText:f,clearTxt:p}}},M={class:"search-input"},R=["placeholder"],D={key:0,class:"tree-controls d-flex"},P={class:"tree-view position-relative"},q={class:"px-6"},I=["onClick"],L={key:1,class:"bi fs-5 mt-2 cursor-pointer bi-dot"},H=["onClick"],j=["id","onUpdate:modelValue","onChange"],K=["for","onDblclick"];function O(i,r,o,a,f,h){var g;const u=t.resolveComponent("NiceTreeView",!0);return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["position-relative",[{"nice-treeview":a.isRoot},o.rtl?"ntv-rtl":"ntv-ltr"]])},[a.isRoot&&o.showToolbar?(t.openBlock(),t.createElementBlock("div",{key:0,class:t.normalizeClass(["tree-header",{"floating-header":o.floatingHeader}])},[t.createElementVNode("div",M,[o.showSearchBox?t.withDirectives((t.openBlock(),t.createElementBlock("input",{key:0,type:"text","onUpdate:modelValue":r[0]||(r[0]=n=>a.searchText=n),placeholder:o.rtl?"جستجو...":"Search...",class:"form-control ms-2"},null,8,R)),[[t.vModelText,a.searchText]]):t.createCommentVNode("",!0),((g=a.searchText)==null?void 0:g.trim().length)>0?(t.openBlock(),t.createElementBlock("i",{key:1,class:"bi bi-x-lg text-gray-700 clear-txt",onClick:r[1]||(r[1]=(...n)=>a.clearTxt&&a.clearTxt(...n))})):t.createCommentVNode("",!0)]),o.showCheckUncheckButtons||o.showExpandCollapseButtons?(t.openBlock(),t.createElementBlock("div",D,[o.showExpandCollapseButtons?(t.openBlock(),t.createElementBlock("span",{key:0,onClick:r[2]||(r[2]=(...n)=>a.expandAll&&a.expandAll(...n))},[...r[6]||(r[6]=[t.createElementVNode("i",{class:"bi bi-arrows-angle-expand"},null,-1)])])):t.createCommentVNode("",!0),o.showExpandCollapseButtons?(t.openBlock(),t.createElementBlock("span",{key:1,onClick:r[3]||(r[3]=(...n)=>a.collapseAll&&a.collapseAll(...n))},[...r[7]||(r[7]=[t.createElementVNode("i",{class:"bi bi-arrows-angle-contract"},null,-1)])])):t.createCommentVNode("",!0),o.showCheckUncheckButtons&&o.multiSelect?(t.openBlock(),t.createElementBlock("span",{key:2,onClick:r[4]||(r[4]=(...n)=>a.checkAllNodes&&a.checkAllNodes(...n))},[...r[8]||(r[8]=[t.createElementVNode("i",{class:"bi bi-check2-square"},null,-1)])])):t.createCommentVNode("",!0),o.showCheckUncheckButtons&&o.multiSelect?(t.openBlock(),t.createElementBlock("span",{key:3,onClick:r[5]||(r[5]=(...n)=>a.uncheckAllNodes&&a.uncheckAllNodes(...n))},[...r[9]||(r[9]=[t.createElementVNode("i",{class:"bi bi-square"},null,-1)])])):t.createCommentVNode("",!0)])):t.createCommentVNode("",!0)],2)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:t.normalizeClass(["position-relative",{"border border-gray-300 rounded py-2 tree-container parent-content":a.isRoot,"floating-content":a.isRoot&&o.showToolbar&&o.floatingHeader}])},[t.createElementVNode("div",P,[t.createElementVNode("ul",q,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(o.nodes,n=>(t.openBlock(),t.createElementBlock("div",{key:n.id,class:"d-flex position-relative"},[n.children&&n.children.length>0?(t.openBlock(),t.createElementBlock("i",{key:0,onClick:k=>{a.toggleNode(n)},class:t.normalizeClass(["bi mt-2 cursor-pointer position-absolute",`bi-${n.expanded?"chevron-down":o.rtl?"chevron-left":"chevron-right"}`])},null,10,I)):(t.openBlock(),t.createElementBlock("i",L)),t.createElementVNode("li",{class:t.normalizeClass(n.children?n.expanded?"expanded":"collapsed":"final")},[t.createElementVNode("div",{class:t.normalizeClass(["node",{"ntv-selected":!o.showCheckboxes&&n.selected&&(!n.children||!n.children.length),"ntv-selectable":!o.showCheckboxes}]),onClick:k=>o.showCheckboxes?null:a.onNodeClick(n,k)},[o.showCheckboxes&&(o.multiSelect||!n.children||!n.children.length)?t.withDirectives((t.openBlock(),t.createElementBlock("input",{key:0,id:"chb_"+n.id,type:"checkbox",class:"form-check-input border-gray-400","onUpdate:modelValue":k=>n.checked=k,onChange:k=>a.onNodeCheckChange(n)},null,40,j)),[[t.vModelCheckbox,n.checked]]):t.createCommentVNode("",!0),t.createElementVNode("label",{for:o.showCheckboxes&&(o.multiSelect||!n.children||!n.children.length)?"chb_"+n.id:null,class:t.normalizeClass(["form-check-label",o.showCheckboxes?"cursor-default":"cursor-pointer",{"bg-warning":n.match}]),onDblclick:k=>a.toggleNode(n)},t.toDisplayString(n.label),43,K)],10,H),n.children&&n.expanded?(t.openBlock(),t.createBlock(u,{key:0,nodes:n.children,showCheckboxes:o.showCheckboxes,multiSelect:o.multiSelect,showSearchBox:!1,"show-expand-collapse-buttons":!1,"show-check-uncheck-buttons":!1,rtl:o.rtl,onNodeCheckChange:a.onChildChange},null,8,["nodes","showCheckboxes","multiSelect","rtl","onNodeCheckChange"])):t.createCommentVNode("",!0)],2)]))),128))])])],2)],2)}const w=U(z,[["render",O],["__scopeId","data-v-e8eff37d"]]),F={install(i){i.component("nice-treeview",w),i.component("NiceTreeView",w)}};d.NiceTreeView=w,d.NiceTreeViewPlugin=F,d.default=w,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|