easy-component-ui 3.0.4 → 3.0.6
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/dist/components/ea-button.js +93 -89
- package/dist/components/ea-calendar2.js +329 -327
- package/dist/components/ea-link.js +35 -29
- package/dist/components/ea-text.js +46 -39
- package/dist/components/ea-tree.js +277 -240
- package/dist/css/ea-button.style.js +2 -2
- package/dist/css/ea-card.style.js +1 -1
- package/dist/css/ea-container.style.js +1 -1
- package/dist/css/ea-link.style.js +1 -1
- package/dist/css/ea-text.style.js +1 -1
- package/package.json +6 -1
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
1
|
+
var Ee = Object.defineProperty;
|
|
2
|
+
var pe = (d) => {
|
|
3
3
|
throw TypeError(d);
|
|
4
4
|
};
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var s = (d,
|
|
8
|
-
import { n as
|
|
9
|
-
import { B as
|
|
10
|
-
import { s as
|
|
5
|
+
var ve = (d, o, e) => o in d ? Ee(d, o, { enumerable: !0, configurable: !0, writable: !0, value: e }) : d[o] = e;
|
|
6
|
+
var b = (d, o, e) => ve(d, typeof o != "symbol" ? o + "" : o, e), fe = (d, o, e) => o.has(d) || pe("Cannot " + e);
|
|
7
|
+
var s = (d, o, e) => (fe(d, o, "read from private field"), e ? e.call(d) : o.get(d)), n = (d, o, e) => o.has(d) ? pe("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(d) : o.set(d, e), f = (d, o, e, t) => (fe(d, o, "write to private field"), t ? t.call(d, e) : o.set(d, e), e);
|
|
8
|
+
import { n as ce } from "./ea-calendar2.js";
|
|
9
|
+
import { B as he } from "./Base.js";
|
|
10
|
+
import { s as Ne, a as we, b as Ae } from "../css/ea-tree.style.js";
|
|
11
11
|
import "./ea-checkbox.js";
|
|
12
|
-
import { t as
|
|
13
|
-
class we extends Event {
|
|
14
|
-
constructor(i) {
|
|
15
|
-
super("ea-node-expand", { bubbles: !0, composed: !0 }), this.detail = i;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
class Ae extends Event {
|
|
19
|
-
constructor(i) {
|
|
20
|
-
super("ea-node-collapse", { bubbles: !0, composed: !0 }), this.detail = i;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
12
|
+
import { t as ke } from "../utils/timeout.js";
|
|
23
13
|
class Se extends Event {
|
|
24
|
-
constructor(
|
|
25
|
-
super("ea-node-
|
|
14
|
+
constructor(o) {
|
|
15
|
+
super("ea-node-expand", { bubbles: !0, composed: !0 }), this.detail = o;
|
|
26
16
|
}
|
|
27
17
|
}
|
|
28
18
|
class qe extends Event {
|
|
29
|
-
constructor(
|
|
30
|
-
super("ea-node-
|
|
19
|
+
constructor(o) {
|
|
20
|
+
super("ea-node-collapse", { bubbles: !0, composed: !0 }), this.detail = o;
|
|
31
21
|
}
|
|
32
22
|
}
|
|
33
23
|
class Le extends Event {
|
|
34
|
-
constructor(
|
|
35
|
-
super("ea-node-
|
|
24
|
+
constructor(o) {
|
|
25
|
+
super("ea-node-select", { bubbles: !0, composed: !0 }), this.detail = o;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
class Ce extends Event {
|
|
29
|
+
constructor(o) {
|
|
30
|
+
super("ea-node-click", { bubbles: !0, composed: !0 }), this.detail = o;
|
|
36
31
|
}
|
|
37
32
|
}
|
|
38
33
|
class Pe extends Event {
|
|
39
|
-
constructor(
|
|
40
|
-
super("ea-
|
|
34
|
+
constructor(o) {
|
|
35
|
+
super("ea-node-contextmenu", { bubbles: !0, composed: !0 }), this.detail = o;
|
|
41
36
|
}
|
|
42
37
|
}
|
|
43
38
|
class $e extends Event {
|
|
44
|
-
constructor(
|
|
45
|
-
super("ea-check", { bubbles: !0, composed: !0 }), this.detail =
|
|
39
|
+
constructor(o) {
|
|
40
|
+
super("ea-check-change", { bubbles: !0, composed: !0 }), this.detail = o;
|
|
46
41
|
}
|
|
47
42
|
}
|
|
48
43
|
class Te extends Event {
|
|
49
|
-
constructor(
|
|
50
|
-
super("ea-
|
|
44
|
+
constructor(o) {
|
|
45
|
+
super("ea-check", { bubbles: !0, composed: !0 }), this.detail = o;
|
|
51
46
|
}
|
|
52
47
|
}
|
|
53
|
-
|
|
54
|
-
|
|
48
|
+
class Ke extends Event {
|
|
49
|
+
constructor(o) {
|
|
50
|
+
super("ea-current-change", { bubbles: !0, composed: !0 }), this.detail = o;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
var v, L, P, k, C, $, T, _, M, W, U;
|
|
54
|
+
class Be extends he {
|
|
55
55
|
constructor() {
|
|
56
56
|
super();
|
|
57
57
|
/** @type {HTMLElement} */
|
|
58
|
-
|
|
58
|
+
n(this, v);
|
|
59
59
|
/** @type {HTMLElement} */
|
|
60
|
-
|
|
60
|
+
n(this, L);
|
|
61
61
|
/** @type {HTMLElement} */
|
|
62
|
-
|
|
62
|
+
n(this, P);
|
|
63
63
|
/** @type {HTMLElement} */
|
|
64
|
-
|
|
64
|
+
n(this, k);
|
|
65
65
|
/** @type {AbortController} */
|
|
66
|
-
|
|
67
|
-
|
|
66
|
+
n(this, C, new AbortController());
|
|
67
|
+
b(this, "state", this.properties({
|
|
68
68
|
path: {
|
|
69
69
|
type: String,
|
|
70
70
|
default: ""
|
|
@@ -73,7 +73,7 @@ class Ke extends ce {
|
|
|
73
73
|
type: String,
|
|
74
74
|
default: "",
|
|
75
75
|
observer: (e) => {
|
|
76
|
-
s(this,
|
|
76
|
+
s(this, L).textContent = e;
|
|
77
77
|
}
|
|
78
78
|
},
|
|
79
79
|
selected: {
|
|
@@ -97,21 +97,21 @@ class Ke extends ce {
|
|
|
97
97
|
type: Boolean,
|
|
98
98
|
default: !1,
|
|
99
99
|
observer: (e) => {
|
|
100
|
-
s(this,
|
|
100
|
+
s(this, $).call(this, e), this.updateContainerClasslist();
|
|
101
101
|
}
|
|
102
102
|
},
|
|
103
103
|
indeterminate: {
|
|
104
104
|
type: Boolean,
|
|
105
105
|
default: !1,
|
|
106
106
|
observer: () => {
|
|
107
|
-
s(this,
|
|
107
|
+
s(this, $).call(this), this.updateContainerClasslist();
|
|
108
108
|
}
|
|
109
109
|
},
|
|
110
110
|
disabled: {
|
|
111
111
|
type: Boolean,
|
|
112
112
|
default: !1,
|
|
113
113
|
observer: () => {
|
|
114
|
-
s(this,
|
|
114
|
+
s(this, T).call(this), this.updateContainerClasslist();
|
|
115
115
|
}
|
|
116
116
|
},
|
|
117
117
|
"show-checkbox": {
|
|
@@ -122,7 +122,7 @@ class Ke extends ce {
|
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
}));
|
|
125
|
-
|
|
125
|
+
b(this, "propStates", this.properties({
|
|
126
126
|
hasChildren: {
|
|
127
127
|
props: !0,
|
|
128
128
|
type: Boolean,
|
|
@@ -147,9 +147,9 @@ class Ke extends ce {
|
|
|
147
147
|
type: Object,
|
|
148
148
|
default: {},
|
|
149
149
|
observer: (e) => {
|
|
150
|
-
var
|
|
150
|
+
var i;
|
|
151
151
|
const { children: t, label: r, disabled: a } = this.dataProps;
|
|
152
|
-
this.label = (e == null ? void 0 : e[r]) || this.label, this.hasChildren = ((
|
|
152
|
+
this.label = (e == null ? void 0 : e[r]) || this.label, this.hasChildren = ((i = e == null ? void 0 : e[t]) == null ? void 0 : i.length) > 0, this.disabled = (e == null ? void 0 : e[a]) || !1;
|
|
153
153
|
}
|
|
154
154
|
}
|
|
155
155
|
}));
|
|
@@ -158,20 +158,20 @@ class Ke extends ce {
|
|
|
158
158
|
* @param {boolean} checked - 是否选中
|
|
159
159
|
* @param {boolean} indeterminate - 是否不确定
|
|
160
160
|
*/
|
|
161
|
-
|
|
161
|
+
n(this, $, (e = this.checked, t = this.indeterminate) => {
|
|
162
162
|
s(this, k) && (s(this, k).checked = e, s(this, k).indeterminate = t);
|
|
163
163
|
});
|
|
164
164
|
/**
|
|
165
165
|
* 更新禁用状态
|
|
166
166
|
*/
|
|
167
|
-
|
|
167
|
+
n(this, T, () => {
|
|
168
168
|
s(this, k) && (s(this, k).disabled = this.disabled);
|
|
169
169
|
});
|
|
170
170
|
/**
|
|
171
171
|
* 处理复选框变化事件
|
|
172
172
|
* @param {Event} e 事件对象
|
|
173
173
|
*/
|
|
174
|
-
|
|
174
|
+
n(this, _, (e) => {
|
|
175
175
|
e.stopImmediatePropagation(), !this.disabled && (this.checked = e.detail.checked, this.emit("ea-tree-checkbox-click", {
|
|
176
176
|
bubbles: !0,
|
|
177
177
|
composed: !0,
|
|
@@ -185,37 +185,57 @@ class Ke extends ce {
|
|
|
185
185
|
* 处理标签点击事件
|
|
186
186
|
* @param {Event} e 事件对象
|
|
187
187
|
*/
|
|
188
|
-
|
|
188
|
+
n(this, M, (e) => {
|
|
189
189
|
if (e.stopImmediatePropagation(), e.target.closest(this.ns.ce("checkbox"))) return;
|
|
190
|
-
const r = this.parentElement.querySelector("ea-tree-child");
|
|
190
|
+
const r = e.target.closest(this.ns.e("toggle-icon")), a = this.parentElement.querySelector("ea-tree-child");
|
|
191
191
|
this.emit("ea-tree-label-click", {
|
|
192
192
|
bubbles: !0,
|
|
193
193
|
composed: !0,
|
|
194
194
|
detail: {
|
|
195
195
|
label: this,
|
|
196
|
-
child:
|
|
196
|
+
child: a,
|
|
197
|
+
isIconClick: !!r
|
|
198
|
+
}
|
|
199
|
+
});
|
|
200
|
+
});
|
|
201
|
+
/**
|
|
202
|
+
* 处理展开/收起图标点击事件
|
|
203
|
+
* @param {Event} e 事件对象
|
|
204
|
+
*/
|
|
205
|
+
n(this, W, (e) => {
|
|
206
|
+
if (e.stopImmediatePropagation(), !this.hasChildren) return;
|
|
207
|
+
const t = this.parentElement.querySelector("ea-tree-child");
|
|
208
|
+
this.emit("ea-tree-label-click", {
|
|
209
|
+
bubbles: !0,
|
|
210
|
+
composed: !0,
|
|
211
|
+
detail: {
|
|
212
|
+
label: this,
|
|
213
|
+
child: t,
|
|
214
|
+
isIconClick: !0
|
|
197
215
|
}
|
|
198
216
|
});
|
|
199
217
|
});
|
|
200
218
|
/**
|
|
201
219
|
* 绑定事件监听器
|
|
202
220
|
*/
|
|
203
|
-
|
|
221
|
+
n(this, U, () => {
|
|
204
222
|
s(this, k).addEventListener(
|
|
205
223
|
"change",
|
|
206
|
-
s(this,
|
|
224
|
+
s(this, _),
|
|
207
225
|
{
|
|
208
|
-
signal: s(this,
|
|
226
|
+
signal: s(this, C).signal
|
|
209
227
|
}
|
|
210
|
-
), s(this,
|
|
211
|
-
signal: s(this,
|
|
228
|
+
), s(this, v).addEventListener("click", s(this, M), {
|
|
229
|
+
signal: s(this, C).signal
|
|
230
|
+
}), s(this, P).addEventListener("click", s(this, W), {
|
|
231
|
+
signal: s(this, C).signal
|
|
212
232
|
});
|
|
213
233
|
});
|
|
214
234
|
/**
|
|
215
235
|
* 获取节点深度
|
|
216
236
|
* @returns {number} 节点深度
|
|
217
237
|
*/
|
|
218
|
-
|
|
238
|
+
b(this, "getDepth", () => {
|
|
219
239
|
const e = this.path;
|
|
220
240
|
return e ? e.split("-").length : 0;
|
|
221
241
|
});
|
|
@@ -223,13 +243,13 @@ class Ke extends ce {
|
|
|
223
243
|
* 判断是否为根节点
|
|
224
244
|
* @returns {boolean} 是否为根节点
|
|
225
245
|
*/
|
|
226
|
-
|
|
246
|
+
b(this, "isRoot", () => this.getDepth() === 1);
|
|
227
247
|
/**
|
|
228
248
|
* 判断是否为叶子节点
|
|
229
249
|
* @returns {boolean} 是否为叶子节点
|
|
230
250
|
*/
|
|
231
|
-
|
|
232
|
-
this.stylesheet =
|
|
251
|
+
b(this, "isLeaf", () => this.hasChildren ? childTree.querySelectorAll("ea-tree-label").length === 0 : !0);
|
|
252
|
+
this.stylesheet = Ne, this.$render();
|
|
233
253
|
}
|
|
234
254
|
static get observedAttributes() {
|
|
235
255
|
return [
|
|
@@ -264,46 +284,48 @@ class Ke extends ce {
|
|
|
264
284
|
disabled: this.disabled
|
|
265
285
|
}
|
|
266
286
|
);
|
|
267
|
-
return s(this,
|
|
287
|
+
return s(this, v).className = e, e;
|
|
268
288
|
}
|
|
269
289
|
$render() {
|
|
270
|
-
const e =
|
|
290
|
+
const e = ce("tree-label");
|
|
271
291
|
this.ns = e, this.shadowRoot.innerHTML = `
|
|
272
292
|
<div class='${e.b()}' part='container'>
|
|
273
293
|
<ea-icon icon="icon-angle-right" class='${e.e("toggle-icon")}' part='toggle'></ea-icon>
|
|
274
294
|
<ea-checkbox class='${e.e("checkbox")}' part='checkbox'></ea-checkbox>
|
|
275
295
|
<span class='${e.e("text")}' part='text'></span>
|
|
276
296
|
</div>
|
|
277
|
-
`, f(this,
|
|
297
|
+
`, f(this, v, this.shadowRoot.querySelector(`.${e.b()}`)), f(this, L, this.shadowRoot.querySelector(`.${e.e("text")}`)), f(this, k, this.shadowRoot.querySelector(e.ce("checkbox"))), f(this, P, this.shadowRoot.querySelector(
|
|
298
|
+
`.${e.e("toggle-icon")}`
|
|
299
|
+
)), this.updateContainerClasslist(), s(this, T).call(this);
|
|
278
300
|
}
|
|
279
301
|
connectedCallback() {
|
|
280
302
|
var e;
|
|
281
|
-
super.connectedCallback(), (e = s(this,
|
|
303
|
+
super.connectedCallback(), (e = s(this, C)) == null || e.abort(), f(this, C, new AbortController()), s(this, U).call(this);
|
|
282
304
|
}
|
|
283
305
|
$beforeUnmounted() {
|
|
284
306
|
var e;
|
|
285
|
-
(e = s(this,
|
|
307
|
+
(e = s(this, C)) == null || e.abort();
|
|
286
308
|
}
|
|
287
309
|
}
|
|
288
|
-
|
|
289
|
-
window.customElements.get("ea-tree-label") || window.customElements.define("ea-tree-label",
|
|
290
|
-
var
|
|
291
|
-
class
|
|
310
|
+
v = new WeakMap(), L = new WeakMap(), P = new WeakMap(), k = new WeakMap(), C = new WeakMap(), $ = new WeakMap(), T = new WeakMap(), _ = new WeakMap(), M = new WeakMap(), W = new WeakMap(), U = new WeakMap();
|
|
311
|
+
window.customElements.get("ea-tree-label") || window.customElements.define("ea-tree-label", Be);
|
|
312
|
+
var y, N, F, w, J, K, z, G, Q, X;
|
|
313
|
+
class Ie extends he {
|
|
292
314
|
constructor() {
|
|
293
315
|
super();
|
|
294
316
|
/** @type {HTMLElement} */
|
|
295
|
-
|
|
317
|
+
n(this, y);
|
|
296
318
|
/** @type {AbortController} */
|
|
297
|
-
|
|
298
|
-
|
|
319
|
+
n(this, N, new AbortController());
|
|
320
|
+
n(this, F, {
|
|
299
321
|
expandedNodes: /* @__PURE__ */ new Set(),
|
|
300
322
|
selectedNode: null
|
|
301
323
|
});
|
|
302
|
-
|
|
324
|
+
n(this, w, {
|
|
303
325
|
/** @type {AbortController} */
|
|
304
326
|
dataController: null
|
|
305
327
|
});
|
|
306
|
-
|
|
328
|
+
b(this, "propState", this.properties({
|
|
307
329
|
data: {
|
|
308
330
|
props: !0,
|
|
309
331
|
type: Array,
|
|
@@ -311,10 +333,10 @@ class Be extends ce {
|
|
|
311
333
|
/** @param {Array} newVal */
|
|
312
334
|
observer: async (e) => {
|
|
313
335
|
var t;
|
|
314
|
-
if (await customElements.whenDefined("ea-tree-label"), (t = s(this,
|
|
315
|
-
s(this,
|
|
316
|
-
const r = s(this,
|
|
317
|
-
r.innerHTML = "", s(this,
|
|
336
|
+
if (await customElements.whenDefined("ea-tree-label"), (t = s(this, w).dataController) == null || t.abort(), Array.isArray(e)) {
|
|
337
|
+
s(this, w).dataController = new AbortController();
|
|
338
|
+
const r = s(this, K).call(this);
|
|
339
|
+
r.innerHTML = "", s(this, Q).call(this, e);
|
|
318
340
|
}
|
|
319
341
|
}
|
|
320
342
|
},
|
|
@@ -338,14 +360,14 @@ class Be extends ce {
|
|
|
338
360
|
type: Boolean,
|
|
339
361
|
default: !1,
|
|
340
362
|
observer: () => {
|
|
341
|
-
s(this,
|
|
363
|
+
s(this, J).call(this);
|
|
342
364
|
}
|
|
343
365
|
},
|
|
344
366
|
checked: {
|
|
345
367
|
type: Boolean,
|
|
346
368
|
default: !1,
|
|
347
369
|
observer: (e) => {
|
|
348
|
-
s(this,
|
|
370
|
+
s(this, X).call(this, e), this.updateContainerClasslist();
|
|
349
371
|
}
|
|
350
372
|
},
|
|
351
373
|
expanded: {
|
|
@@ -363,8 +385,8 @@ class Be extends ce {
|
|
|
363
385
|
/**
|
|
364
386
|
* 更新 checkbox 可见性
|
|
365
387
|
*/
|
|
366
|
-
|
|
367
|
-
s(this,
|
|
388
|
+
n(this, J, () => {
|
|
389
|
+
s(this, y).querySelectorAll("ea-tree-label").forEach((t) => {
|
|
368
390
|
t["show-checkbox"] = this["show-checkbox"];
|
|
369
391
|
});
|
|
370
392
|
});
|
|
@@ -372,7 +394,7 @@ class Be extends ce {
|
|
|
372
394
|
* 获取或创建子节点插槽元素
|
|
373
395
|
* @return {HTMLElement} 子节点插槽元素
|
|
374
396
|
*/
|
|
375
|
-
|
|
397
|
+
n(this, K, () => {
|
|
376
398
|
let e = this.querySelector('[slot="children"]');
|
|
377
399
|
if (!e) {
|
|
378
400
|
const t = document.createElement("div");
|
|
@@ -385,7 +407,7 @@ class Be extends ce {
|
|
|
385
407
|
* @param {number} index 节点索引
|
|
386
408
|
* @returns {string} 节点路径
|
|
387
409
|
*/
|
|
388
|
-
|
|
410
|
+
n(this, z, (e) => {
|
|
389
411
|
var r;
|
|
390
412
|
const t = (r = this.parentElement) == null ? void 0 : r.querySelector("ea-tree-label");
|
|
391
413
|
return t ? `${t.getAttribute("path")}-${e + 1}` : (e + 1).toString();
|
|
@@ -396,30 +418,30 @@ class Be extends ce {
|
|
|
396
418
|
* @param {number} index 索引
|
|
397
419
|
* @returns {Object} 包含section、treeLabel和tree的对象
|
|
398
420
|
*/
|
|
399
|
-
|
|
421
|
+
n(this, G, (e, t) => {
|
|
400
422
|
if (!e) return { section: null, treeLabel: null, tree: null };
|
|
401
|
-
const { children: r, disabled: a } = this.dataProps,
|
|
402
|
-
return
|
|
423
|
+
const { children: r, disabled: a } = this.dataProps, i = document.createElement("section"), l = document.createElement("ea-tree-child"), c = document.createElement("ea-tree-label");
|
|
424
|
+
return i.className = this.ns.e("children"), i.part = "children-wrapper", l.part = "children", c.part = "label", c.dataProps = this.dataProps, l.dataProps = this.dataProps, c.data = e, l.data = e[r], l.hidden = !0, c["show-checkbox"] = this["show-checkbox"], c.setAttribute("path", s(this, z).call(this, t)), a && e[a] === !0 && c.toggleAttribute("disabled", !0), this["show-checkbox"] && l.toggleAttribute("show-checkbox", !0), e[r] && e[r].length > 0 && (c.hasChildren = !0, l.hidden = !s(this, F).expandedNodes.has(c)), { section: i, treeLabel: c, tree: l };
|
|
403
425
|
});
|
|
404
426
|
/**
|
|
405
427
|
* 渲染树节点
|
|
406
428
|
* @param {Array} treeData 树数据
|
|
407
429
|
*/
|
|
408
|
-
|
|
409
|
-
const t = document.createDocumentFragment(), r = s(this,
|
|
410
|
-
e.forEach((a,
|
|
411
|
-
const { section: l, treeLabel: c, tree:
|
|
412
|
-
l.appendChild(c), l.appendChild(
|
|
430
|
+
n(this, Q, (e) => {
|
|
431
|
+
const t = document.createDocumentFragment(), r = s(this, K).call(this);
|
|
432
|
+
e.forEach((a, i) => {
|
|
433
|
+
const { section: l, treeLabel: c, tree: q } = s(this, G).call(this, a, i);
|
|
434
|
+
l.appendChild(c), l.appendChild(q), t.appendChild(l);
|
|
413
435
|
}), r.appendChild(t);
|
|
414
436
|
});
|
|
415
|
-
|
|
416
|
-
s(this,
|
|
437
|
+
n(this, X, (e) => {
|
|
438
|
+
s(this, y).querySelectorAll("ea-tree-label").forEach((t) => {
|
|
417
439
|
t.checked = e;
|
|
418
|
-
}), s(this,
|
|
440
|
+
}), s(this, y).querySelectorAll("ea-tree-child").forEach((t) => {
|
|
419
441
|
t.checked = e;
|
|
420
442
|
});
|
|
421
443
|
});
|
|
422
|
-
this.stylesheet =
|
|
444
|
+
this.stylesheet = we, this.$render();
|
|
423
445
|
}
|
|
424
446
|
static get observedAttributes() {
|
|
425
447
|
return [
|
|
@@ -437,52 +459,52 @@ class Be extends ce {
|
|
|
437
459
|
},
|
|
438
460
|
{}
|
|
439
461
|
);
|
|
440
|
-
return s(this,
|
|
462
|
+
return s(this, y).className = e, e;
|
|
441
463
|
}
|
|
442
464
|
$render() {
|
|
443
|
-
const e =
|
|
465
|
+
const e = ce("tree-child");
|
|
444
466
|
this.ns = e, this.shadowRoot.innerHTML = `
|
|
445
467
|
<div class='${e.b()}' part='container'>
|
|
446
468
|
<slot name="children"></slot>
|
|
447
469
|
</div>
|
|
448
|
-
`, f(this,
|
|
470
|
+
`, f(this, y, this.shadowRoot.querySelector(e.cb()));
|
|
449
471
|
}
|
|
450
472
|
connectedCallback() {
|
|
451
473
|
var e;
|
|
452
|
-
super.connectedCallback(), (e = s(this,
|
|
474
|
+
super.connectedCallback(), (e = s(this, N)) == null || e.abort(), f(this, N, new AbortController()), this.updateContainerClasslist();
|
|
453
475
|
}
|
|
454
476
|
$beforeUnmounted() {
|
|
455
477
|
var e;
|
|
456
|
-
(e = s(this,
|
|
457
|
-
for (const t of Object.values(s(this,
|
|
478
|
+
(e = s(this, N)) == null || e.abort();
|
|
479
|
+
for (const t of Object.values(s(this, w)))
|
|
458
480
|
t == null || t.abort();
|
|
459
481
|
}
|
|
460
482
|
}
|
|
461
|
-
|
|
462
|
-
customElements.get("ea-tree-child") || customElements.define("ea-tree-child",
|
|
463
|
-
var
|
|
464
|
-
class Re extends
|
|
483
|
+
y = new WeakMap(), N = new WeakMap(), F = new WeakMap(), w = new WeakMap(), J = new WeakMap(), K = new WeakMap(), z = new WeakMap(), G = new WeakMap(), Q = new WeakMap(), X = new WeakMap();
|
|
484
|
+
customElements.get("ea-tree-child") || customElements.define("ea-tree-child", Ie);
|
|
485
|
+
var u, x, h, m, A, B, g, Y, Z, O, V, ee, te, S, I, E, se, R, re, H, j, D, ae, ie, ne, oe, le, de;
|
|
486
|
+
class Re extends he {
|
|
465
487
|
constructor() {
|
|
466
488
|
super();
|
|
467
489
|
/** @type {HTMLElement} */
|
|
468
|
-
|
|
490
|
+
n(this, u);
|
|
469
491
|
/** @type {AbortController} */
|
|
470
|
-
|
|
471
|
-
|
|
492
|
+
n(this, x, new AbortController());
|
|
493
|
+
n(this, h, {
|
|
472
494
|
expandedNodes: /* @__PURE__ */ new Set(),
|
|
473
495
|
selectedNode: null,
|
|
474
496
|
checkedNodes: /* @__PURE__ */ new Set()
|
|
475
497
|
});
|
|
476
|
-
|
|
498
|
+
n(this, m, {
|
|
477
499
|
/** @type {AbortController} */
|
|
478
500
|
dataController: null
|
|
479
501
|
});
|
|
480
|
-
|
|
502
|
+
b(this, "attrState", this.properties({
|
|
481
503
|
"show-checkbox": {
|
|
482
504
|
type: Boolean,
|
|
483
505
|
default: !1,
|
|
484
506
|
observer: () => {
|
|
485
|
-
s(this,
|
|
507
|
+
s(this, se).call(this);
|
|
486
508
|
}
|
|
487
509
|
},
|
|
488
510
|
"check-strictly": {
|
|
@@ -492,9 +514,13 @@ class Re extends ce {
|
|
|
492
514
|
"node-key": {
|
|
493
515
|
type: String,
|
|
494
516
|
default: null
|
|
517
|
+
},
|
|
518
|
+
"expand-on-icon-click": {
|
|
519
|
+
type: Boolean,
|
|
520
|
+
default: !1
|
|
495
521
|
}
|
|
496
522
|
}));
|
|
497
|
-
|
|
523
|
+
b(this, "propState", this.properties({
|
|
498
524
|
data: {
|
|
499
525
|
props: !0,
|
|
500
526
|
type: Array,
|
|
@@ -502,8 +528,8 @@ class Re extends ce {
|
|
|
502
528
|
/** @param {Array} newVal */
|
|
503
529
|
observer: async (e) => {
|
|
504
530
|
var t;
|
|
505
|
-
await customElements.whenDefined("ea-tree"), await customElements.whenDefined("ea-tree-label"), (t = s(this,
|
|
506
|
-
s(this,
|
|
531
|
+
await customElements.whenDefined("ea-tree"), await customElements.whenDefined("ea-tree-label"), (t = s(this, m).dataController) == null || t.abort(), s(this, u).innerHTML = "", e && (s(this, m).dataController = new AbortController(), s(this, Z).call(this, e), s(this, ae).call(this), ke(() => {
|
|
532
|
+
s(this, O).call(this, this.defaultExpandedKeys), s(this, V).call(this, this.defaultCheckedKeys);
|
|
507
533
|
}, 16));
|
|
508
534
|
}
|
|
509
535
|
},
|
|
@@ -536,68 +562,68 @@ class Re extends ce {
|
|
|
536
562
|
* @param {*} key 节点键值
|
|
537
563
|
* @returns {HTMLElement|null} 找到的标签元素或null
|
|
538
564
|
*/
|
|
539
|
-
|
|
565
|
+
n(this, A, (e) => {
|
|
540
566
|
if (!this["node-key"]) return null;
|
|
541
567
|
const t = this["node-key"];
|
|
542
|
-
return [...s(this,
|
|
568
|
+
return [...s(this, u).querySelectorAll("ea-tree-label")].find((a) => a.data && a.data[t] === e);
|
|
543
569
|
});
|
|
544
570
|
/**
|
|
545
571
|
* 根据节点数据查找标签元素
|
|
546
572
|
* @param {Object} data 节点数据
|
|
547
573
|
* @returns {HTMLElement|null} 找到的标签元素或null
|
|
548
574
|
*/
|
|
549
|
-
|
|
550
|
-
|
|
575
|
+
n(this, B, (e) => this["node-key"] ? [...s(this, u).querySelectorAll("ea-tree-label")].find((r) => r.data ? JSON.stringify(r.data) === JSON.stringify(e) : !1) : null);
|
|
576
|
+
n(this, g, (e) => e ? typeof e == "object" ? s(this, B).call(this, e) : typeof e == "number" || typeof e == "string" ? s(this, A).call(this, e) : null : null);
|
|
551
577
|
/**
|
|
552
578
|
* 创建树节点元素
|
|
553
579
|
* @param {Object} item 数据项
|
|
554
580
|
* @param {number} index 索引
|
|
555
581
|
* @returns {Object} 包含section、treeLabel和tree的对象
|
|
556
582
|
*/
|
|
557
|
-
|
|
558
|
-
const { children: r, disabled: a } = this.dataProps,
|
|
559
|
-
return
|
|
583
|
+
n(this, Y, (e, t) => {
|
|
584
|
+
const { children: r, disabled: a } = this.dataProps, i = document.createElement("section"), l = document.createElement("ea-tree-child"), c = document.createElement("ea-tree-label");
|
|
585
|
+
return i.className = "ea-tree__children", i.part = "children-wrapper", l.part = "children", c.part = "label", c.dataProps = this.dataProps, l.dataProps = this.dataProps, c.data = e, l.data = e[r], c["show-checkbox"] = this["show-checkbox"], c.setAttribute("path", (t + 1).toString().concat("$")), a && e[a] === !0 && c.toggleAttribute("disabled", !0), this["show-checkbox"] && l.setAttribute("show-checkbox", ""), e[r] && e[r].length > 0 && (c.hasChildren = !0, l.hidden = !s(this, h).expandedNodes.has(c)), { section: i, treeLabel: c, tree: l };
|
|
560
586
|
});
|
|
561
587
|
/**
|
|
562
588
|
* 渲染树节点
|
|
563
589
|
* @param {Array} treeData 树数据
|
|
564
590
|
*/
|
|
565
|
-
|
|
591
|
+
n(this, Z, (e) => {
|
|
566
592
|
const t = document.createDocumentFragment();
|
|
567
593
|
e.forEach((r, a) => {
|
|
568
|
-
const { section:
|
|
569
|
-
|
|
570
|
-
}), s(this,
|
|
594
|
+
const { section: i, treeLabel: l, tree: c } = s(this, Y).call(this, r, a);
|
|
595
|
+
i.appendChild(l), i.appendChild(c), t.appendChild(i);
|
|
596
|
+
}), s(this, u).appendChild(t);
|
|
571
597
|
});
|
|
572
598
|
/**
|
|
573
599
|
* 处理默认展开键
|
|
574
600
|
* @param {Array} expandedKeys 展开键数组
|
|
575
601
|
*/
|
|
576
|
-
|
|
602
|
+
n(this, O, (e) => {
|
|
577
603
|
const t = this["node-key"];
|
|
578
604
|
if (!t) return;
|
|
579
|
-
const r = [...s(this,
|
|
605
|
+
const r = [...s(this, u).querySelectorAll("ea-tree-label")];
|
|
580
606
|
e.forEach((a) => {
|
|
581
|
-
const
|
|
582
|
-
|
|
607
|
+
const i = r.find((l) => l.data[t] === a);
|
|
608
|
+
i && (s(this, h).expandedNodes.add(i), s(this, S).call(this, i.nextElementSibling, i));
|
|
583
609
|
});
|
|
584
610
|
});
|
|
585
611
|
/**
|
|
586
612
|
* 处理默认选中键
|
|
587
613
|
* @param {Array} checkedKeys 选中键数组
|
|
588
614
|
*/
|
|
589
|
-
|
|
615
|
+
n(this, V, (e) => {
|
|
590
616
|
const t = this["node-key"];
|
|
591
617
|
if (!t) return;
|
|
592
|
-
const r = [...s(this,
|
|
618
|
+
const r = [...s(this, u).querySelectorAll("ea-tree-label")];
|
|
593
619
|
e.forEach((a) => {
|
|
594
|
-
const
|
|
595
|
-
|
|
620
|
+
const i = r.find((l) => l.data[t] === a);
|
|
621
|
+
i && (i.checked = !0, i.dispatchEvent(
|
|
596
622
|
new CustomEvent("ea-tree-checkbox-click", {
|
|
597
623
|
bubbles: !0,
|
|
598
624
|
composed: !0,
|
|
599
625
|
detail: {
|
|
600
|
-
label:
|
|
626
|
+
label: i,
|
|
601
627
|
checked: !0
|
|
602
628
|
}
|
|
603
629
|
})
|
|
@@ -608,24 +634,34 @@ class Re extends ce {
|
|
|
608
634
|
* 点击标签事件
|
|
609
635
|
* @param {MouseEvent} e 事件对象
|
|
610
636
|
*/
|
|
611
|
-
|
|
637
|
+
n(this, ee, (e) => {
|
|
612
638
|
e.stopImmediatePropagation();
|
|
613
|
-
const t = e.detail.label, r = e.detail.child;
|
|
614
|
-
t
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
639
|
+
const t = e.detail.label, r = e.detail.child, a = e.detail.isIconClick;
|
|
640
|
+
if (t) {
|
|
641
|
+
if (this["expand-on-icon-click"]) {
|
|
642
|
+
a ? t.hasChildren && (s(this, h).expandedNodes.has(t) ? (s(this, h).expandedNodes.delete(t), s(this, I).call(this, r, t)) : (s(this, h).expandedNodes.add(t), s(this, S).call(this, r, t))) : (this.dispatchEvent(
|
|
643
|
+
new Ce({
|
|
644
|
+
data: t.data
|
|
645
|
+
})
|
|
646
|
+
), s(this, E).call(this, t));
|
|
647
|
+
return;
|
|
648
|
+
}
|
|
649
|
+
this.dispatchEvent(
|
|
650
|
+
new Ce({
|
|
651
|
+
data: t.data
|
|
652
|
+
})
|
|
653
|
+
), t.hasChildren && (s(this, h).expandedNodes.has(t) ? (s(this, h).expandedNodes.delete(t), s(this, I).call(this, r, t)) : (s(this, h).expandedNodes.add(t), s(this, S).call(this, r, t))), s(this, E).call(this, t);
|
|
654
|
+
}
|
|
619
655
|
});
|
|
620
656
|
/**
|
|
621
657
|
* 右键点击事件
|
|
622
658
|
* @param {MouseEvent} e 事件对象
|
|
623
659
|
*/
|
|
624
|
-
|
|
660
|
+
n(this, te, (e) => {
|
|
625
661
|
e.preventDefault(), e.stopImmediatePropagation();
|
|
626
662
|
const t = e.target.closest("ea-tree-label");
|
|
627
663
|
!t || t.disabled || this.dispatchEvent(
|
|
628
|
-
new
|
|
664
|
+
new Pe({
|
|
629
665
|
data: t.data,
|
|
630
666
|
node: t
|
|
631
667
|
})
|
|
@@ -636,9 +672,9 @@ class Re extends ce {
|
|
|
636
672
|
* @param {HTMLElement} tree 树元素
|
|
637
673
|
* @param {HTMLElement} label 标签元素
|
|
638
674
|
*/
|
|
639
|
-
|
|
675
|
+
n(this, S, (e, t) => {
|
|
640
676
|
e.toggleAttribute("hidden", !1), t.toggleAttribute("expanded", !0), this.dispatchEvent(
|
|
641
|
-
new
|
|
677
|
+
new Se({
|
|
642
678
|
data: t.data,
|
|
643
679
|
node: t,
|
|
644
680
|
expanded: !0
|
|
@@ -650,9 +686,9 @@ class Re extends ce {
|
|
|
650
686
|
* @param {HTMLElement} tree 树元素
|
|
651
687
|
* @param {HTMLElement} label 标签元素
|
|
652
688
|
*/
|
|
653
|
-
|
|
689
|
+
n(this, I, (e, t) => {
|
|
654
690
|
e.toggleAttribute("hidden", !0), t.toggleAttribute("expanded", !1), this.dispatchEvent(
|
|
655
|
-
new
|
|
691
|
+
new qe({
|
|
656
692
|
data: t.data,
|
|
657
693
|
node: t,
|
|
658
694
|
expanded: !1
|
|
@@ -663,14 +699,14 @@ class Re extends ce {
|
|
|
663
699
|
* 选中节点
|
|
664
700
|
* @param {HTMLElement} label 标签元素
|
|
665
701
|
*/
|
|
666
|
-
|
|
667
|
-
s(this,
|
|
668
|
-
new
|
|
702
|
+
n(this, E, (e) => {
|
|
703
|
+
s(this, h).selectedNode && (s(this, h).selectedNode.selected = !1), s(this, h).selectedNode = e, e.selected = !0, this.dispatchEvent(
|
|
704
|
+
new Le({
|
|
669
705
|
node: e.data,
|
|
670
706
|
selected: !0
|
|
671
707
|
})
|
|
672
708
|
), this.dispatchEvent(
|
|
673
|
-
new
|
|
709
|
+
new Ke({
|
|
674
710
|
data: e.data,
|
|
675
711
|
node: e
|
|
676
712
|
})
|
|
@@ -679,8 +715,8 @@ class Re extends ce {
|
|
|
679
715
|
/**
|
|
680
716
|
* 更新 checkbox 可见性
|
|
681
717
|
*/
|
|
682
|
-
|
|
683
|
-
s(this,
|
|
718
|
+
n(this, se, () => {
|
|
719
|
+
s(this, u).querySelectorAll("ea-tree-label").forEach((t) => {
|
|
684
720
|
t["show-checkbox"] = this["show-checkbox"];
|
|
685
721
|
});
|
|
686
722
|
});
|
|
@@ -689,12 +725,12 @@ class Re extends ce {
|
|
|
689
725
|
* @param {string} treeRootPath 树路径
|
|
690
726
|
* @returns {Array} 相同树路径的节点数组
|
|
691
727
|
*/
|
|
692
|
-
|
|
728
|
+
n(this, R, (e) => {
|
|
693
729
|
const t = [], r = e.split("-");
|
|
694
|
-
for (t.push(s(this,
|
|
730
|
+
for (t.push(s(this, u).querySelector(`[path="${r[0]}"]`)); r.length > 1; ) {
|
|
695
731
|
const a = r.join("-");
|
|
696
732
|
r.pop(), t.push(
|
|
697
|
-
...s(this,
|
|
733
|
+
...s(this, u).querySelectorAll(`[path^="${a}"]`)
|
|
698
734
|
);
|
|
699
735
|
}
|
|
700
736
|
return t;
|
|
@@ -705,11 +741,11 @@ class Re extends ce {
|
|
|
705
741
|
* @param {HTMLElement} currentNode 当前节点
|
|
706
742
|
* @returns {Object} 包含isAllChecked和isAnyChecked的对象
|
|
707
743
|
*/
|
|
708
|
-
|
|
744
|
+
n(this, re, (e, t) => {
|
|
709
745
|
const r = e.every(
|
|
710
|
-
(
|
|
746
|
+
(i) => i.getAttribute("checked") || i === t
|
|
711
747
|
), a = e.some(
|
|
712
|
-
(
|
|
748
|
+
(i) => i.getAttribute("checked") && i !== t
|
|
713
749
|
);
|
|
714
750
|
return { isAllChecked: r, isAnyChecked: a };
|
|
715
751
|
});
|
|
@@ -719,17 +755,17 @@ class Re extends ce {
|
|
|
719
755
|
* @param {boolean} isAllChecked 是否全部选中
|
|
720
756
|
* @param {boolean} isAnyChecked 是否有选中
|
|
721
757
|
*/
|
|
722
|
-
|
|
758
|
+
n(this, H, (e, t, r) => {
|
|
723
759
|
t ? (e.toggleAttribute("checked", !0), e.toggleAttribute("indeterminate", !1)) : r ? (e.toggleAttribute("checked", !1), e.toggleAttribute("indeterminate", !0)) : (e.toggleAttribute("checked", !1), e.toggleAttribute("indeterminate", !1));
|
|
724
760
|
});
|
|
725
761
|
/**
|
|
726
762
|
* 获取所有标签元素
|
|
727
763
|
* @returns {Array} 所有标签元素数组
|
|
728
764
|
*/
|
|
729
|
-
|
|
730
|
-
|
|
765
|
+
n(this, j, () => [...s(this, u).querySelectorAll("ea-tree-label")]);
|
|
766
|
+
n(this, D, (e) => {
|
|
731
767
|
if (e.disabled) return;
|
|
732
|
-
const t = e.getAttribute("path"), r = s(this,
|
|
768
|
+
const t = e.getAttribute("path"), r = s(this, R).call(this, t), a = r.filter(
|
|
733
769
|
(l) => l.getAttribute("path").startsWith(t) && l !== e
|
|
734
770
|
);
|
|
735
771
|
r.filter(
|
|
@@ -741,32 +777,32 @@ class Re extends ce {
|
|
|
741
777
|
/**
|
|
742
778
|
* 绑定树组件事件
|
|
743
779
|
*/
|
|
744
|
-
|
|
745
|
-
s(this,
|
|
780
|
+
n(this, ae, () => {
|
|
781
|
+
s(this, u).addEventListener(
|
|
746
782
|
"ea-tree-label-click",
|
|
747
|
-
s(this,
|
|
783
|
+
s(this, ee),
|
|
748
784
|
{
|
|
749
|
-
signal: s(this,
|
|
785
|
+
signal: s(this, m).dataController.signal
|
|
750
786
|
}
|
|
751
|
-
), s(this,
|
|
787
|
+
), s(this, u).addEventListener(
|
|
752
788
|
"ea-tree-checkbox-click",
|
|
753
|
-
s(this,
|
|
789
|
+
s(this, de),
|
|
754
790
|
{
|
|
755
|
-
signal: s(this,
|
|
791
|
+
signal: s(this, m).dataController.signal
|
|
756
792
|
}
|
|
757
|
-
), s(this,
|
|
758
|
-
signal: s(this,
|
|
793
|
+
), s(this, u).addEventListener("contextmenu", s(this, te), {
|
|
794
|
+
signal: s(this, m).dataController.signal
|
|
759
795
|
});
|
|
760
796
|
});
|
|
761
797
|
/**
|
|
762
798
|
* 绑定复选框状态管理事件
|
|
763
799
|
*/
|
|
764
|
-
|
|
765
|
-
s(this,
|
|
800
|
+
n(this, ie, () => {
|
|
801
|
+
s(this, u).addEventListener(
|
|
766
802
|
"ea-tree-checkbox-click",
|
|
767
|
-
s(this,
|
|
803
|
+
s(this, le),
|
|
768
804
|
{
|
|
769
|
-
signal: s(this,
|
|
805
|
+
signal: s(this, x).signal
|
|
770
806
|
}
|
|
771
807
|
);
|
|
772
808
|
});
|
|
@@ -775,8 +811,8 @@ class Re extends ce {
|
|
|
775
811
|
* @param {HTMLElement} label 标签元素
|
|
776
812
|
* @returns {boolean} 子树中是否存在被选中的节点
|
|
777
813
|
*/
|
|
778
|
-
|
|
779
|
-
const t = e.getAttribute("path"), r = s(this,
|
|
814
|
+
n(this, ne, (e) => {
|
|
815
|
+
const t = e.getAttribute("path"), r = s(this, u).querySelectorAll(
|
|
780
816
|
`[path^="${t}-"]`
|
|
781
817
|
);
|
|
782
818
|
for (const a of r)
|
|
@@ -789,15 +825,15 @@ class Re extends ce {
|
|
|
789
825
|
* @param {HTMLElement} label 标签元素
|
|
790
826
|
* @param {boolean} checked 选中状态
|
|
791
827
|
*/
|
|
792
|
-
|
|
793
|
-
const r = this.getCheckedNodes(), a = this.getCheckedKeys(),
|
|
828
|
+
n(this, oe, (e, t) => {
|
|
829
|
+
const r = this.getCheckedNodes(), a = this.getCheckedKeys(), i = this.getHalfCheckedNodes(), l = this.getHalfCheckedKeys();
|
|
794
830
|
this.dispatchEvent(
|
|
795
|
-
new
|
|
831
|
+
new Te({
|
|
796
832
|
data: e.data,
|
|
797
833
|
checkedState: {
|
|
798
834
|
checkedNodes: r,
|
|
799
835
|
checkedKeys: a,
|
|
800
|
-
halfCheckedNodes:
|
|
836
|
+
halfCheckedNodes: i,
|
|
801
837
|
halfCheckedKeys: l
|
|
802
838
|
}
|
|
803
839
|
})
|
|
@@ -807,31 +843,31 @@ class Re extends ce {
|
|
|
807
843
|
* 处理复选框状态变化
|
|
808
844
|
* @param {CustomEvent} e 事件对象
|
|
809
845
|
*/
|
|
810
|
-
|
|
811
|
-
var
|
|
846
|
+
n(this, le, (e) => {
|
|
847
|
+
var ue;
|
|
812
848
|
e.stopImmediatePropagation();
|
|
813
849
|
const { label: t, checked: r } = e.detail;
|
|
814
850
|
if (t.disabled) return;
|
|
815
|
-
const a = t.getAttribute("path"),
|
|
851
|
+
const a = t.getAttribute("path"), i = s(this, R).call(this, a), l = i.filter(
|
|
816
852
|
(p) => p.getAttribute("path").startsWith(a) && p !== t
|
|
817
|
-
), c =
|
|
853
|
+
), c = i.filter(
|
|
818
854
|
(p) => p !== t && !l.includes(p)
|
|
819
855
|
);
|
|
820
856
|
l.forEach((p) => {
|
|
821
857
|
p.disabled || (p.checked = r);
|
|
822
858
|
}), c.reverse().forEach((p) => {
|
|
823
859
|
if (p.disabled) return;
|
|
824
|
-
const
|
|
825
|
-
s(this,
|
|
826
|
-
}), (
|
|
860
|
+
const be = p.closest(".ea-tree-child__children"), me = p.closest(".ea-tree__children"), ye = be ? [...be.querySelectorAll("ea-tree-label")] : [...me.querySelectorAll("ea-tree-label")], { isAllChecked: ge, isAnyChecked: xe } = s(this, re).call(this, ye, p);
|
|
861
|
+
s(this, H).call(this, p, ge, xe);
|
|
862
|
+
}), (ue = t == null ? void 0 : t.isRoot) != null && ue.call(t) && (s(this, H).call(this, t, r, r), s(this, u).querySelectorAll(`[path^="${a}"]`).forEach((p) => {
|
|
827
863
|
p.disabled || (p.checked = r);
|
|
828
864
|
}));
|
|
829
|
-
const
|
|
865
|
+
const q = s(this, ne).call(this, t);
|
|
830
866
|
this.dispatchEvent(
|
|
831
|
-
new
|
|
867
|
+
new $e({
|
|
832
868
|
data: t.data,
|
|
833
869
|
checked: r,
|
|
834
|
-
hasCheckedChildren:
|
|
870
|
+
hasCheckedChildren: q
|
|
835
871
|
})
|
|
836
872
|
), s(this, oe).call(this, t, r);
|
|
837
873
|
});
|
|
@@ -839,7 +875,7 @@ class Re extends ce {
|
|
|
839
875
|
* 复选框点击事件
|
|
840
876
|
* @param {CustomEvent} e 事件对象
|
|
841
877
|
*/
|
|
842
|
-
|
|
878
|
+
n(this, de, (e) => {
|
|
843
879
|
e.stopImmediatePropagation();
|
|
844
880
|
const t = e.detail.label, r = e.detail.checked;
|
|
845
881
|
t && this.dispatchEvent(
|
|
@@ -847,7 +883,7 @@ class Re extends ce {
|
|
|
847
883
|
detail: {
|
|
848
884
|
node: t.item,
|
|
849
885
|
checked: r,
|
|
850
|
-
checkedNodes: Array.from(s(this,
|
|
886
|
+
checkedNodes: Array.from(s(this, h).checkedNodes).map(
|
|
851
887
|
(a) => a.item
|
|
852
888
|
)
|
|
853
889
|
}
|
|
@@ -858,10 +894,10 @@ class Re extends ce {
|
|
|
858
894
|
* 获取半选中节点数据
|
|
859
895
|
* @returns {Array} 半选中节点数据数组
|
|
860
896
|
*/
|
|
861
|
-
|
|
897
|
+
b(this, "getHalfCheckedNodes", () => {
|
|
862
898
|
if (!this["show-checkbox"])
|
|
863
899
|
return [];
|
|
864
|
-
const e = [...s(this,
|
|
900
|
+
const e = [...s(this, u).querySelectorAll("ea-tree-label")], t = [];
|
|
865
901
|
return e.forEach((r) => {
|
|
866
902
|
r.hasAttribute("indeterminate") && t.push(r.data);
|
|
867
903
|
}), t;
|
|
@@ -870,10 +906,10 @@ class Re extends ce {
|
|
|
870
906
|
* 获取半选中节点键值
|
|
871
907
|
* @returns {Array} 半选中节点键值数组
|
|
872
908
|
*/
|
|
873
|
-
|
|
909
|
+
b(this, "getHalfCheckedKeys", () => {
|
|
874
910
|
if (!this["show-checkbox"] || !this["node-key"])
|
|
875
911
|
return [];
|
|
876
|
-
const e = s(this,
|
|
912
|
+
const e = s(this, u).querySelectorAll("ea-tree-label"), t = [], r = this["node-key"];
|
|
877
913
|
return e.forEach((a) => {
|
|
878
914
|
a.hasAttribute("indeterminate") && a.data && a.data[r] && t.push(a.data[r]);
|
|
879
915
|
}), t;
|
|
@@ -882,34 +918,34 @@ class Re extends ce {
|
|
|
882
918
|
* 获取当前选中节点键值
|
|
883
919
|
* @returns {*} 当前选中节点键值或null
|
|
884
920
|
*/
|
|
885
|
-
|
|
886
|
-
if (!this["node-key"] || !s(this,
|
|
921
|
+
b(this, "getCurrentKey", () => {
|
|
922
|
+
if (!this["node-key"] || !s(this, h).selectedNode)
|
|
887
923
|
return null;
|
|
888
|
-
const e = this["node-key"], t = s(this,
|
|
924
|
+
const e = this["node-key"], t = s(this, h).selectedNode.data;
|
|
889
925
|
return t && t[e] ? t[e] : null;
|
|
890
926
|
});
|
|
891
927
|
/**
|
|
892
928
|
* 获取当前选中节点数据
|
|
893
929
|
* @returns {*} 当前选中节点数据或null
|
|
894
930
|
*/
|
|
895
|
-
|
|
931
|
+
b(this, "getCurrentNode", () => s(this, h).selectedNode ? s(this, h).selectedNode.data : null);
|
|
896
932
|
/**
|
|
897
933
|
* 更新节点键值的子节点数据
|
|
898
934
|
* @param {*} key 节点键值
|
|
899
935
|
* @param {Array} data 子节点数据数组
|
|
900
936
|
* @returns {boolean} 是否更新成功
|
|
901
937
|
*/
|
|
902
|
-
|
|
938
|
+
b(this, "updateKeyChildren", (e, t) => {
|
|
903
939
|
if (!this["node-key"])
|
|
904
940
|
return console.warn("updateKeyChildren requires node-key to be set"), !1;
|
|
905
|
-
const r = s(this,
|
|
941
|
+
const r = s(this, A).call(this, e);
|
|
906
942
|
if (!r)
|
|
907
943
|
return console.warn(`Node with key ${e} not found`), !1;
|
|
908
944
|
const a = r.nextElementSibling;
|
|
909
945
|
if (!a || a.tagName !== "EA-TREE-CHILD")
|
|
910
946
|
return console.warn("Target node is not a parent node"), !1;
|
|
911
|
-
const { children:
|
|
912
|
-
return r.data = { ...r.data, [
|
|
947
|
+
const { children: i } = this.dataProps;
|
|
948
|
+
return r.data = { ...r.data, [i]: t }, a.data = t, ke(() => {
|
|
913
949
|
r.emit("ea-tree-checkbox-click", {
|
|
914
950
|
bubbles: !0,
|
|
915
951
|
composed: !0,
|
|
@@ -926,16 +962,16 @@ class Re extends ce {
|
|
|
926
962
|
* @param {boolean} includeHalfChecked 是否包含半选中节点
|
|
927
963
|
* @returns {Array} 选中节点数据数组
|
|
928
964
|
*/
|
|
929
|
-
|
|
965
|
+
b(this, "getCheckedNodes", (e = !1, t = !1) => {
|
|
930
966
|
if (!this["show-checkbox"])
|
|
931
967
|
return [];
|
|
932
|
-
const r = s(this,
|
|
933
|
-
return r.forEach((
|
|
934
|
-
const l =
|
|
968
|
+
const r = s(this, j).call(this), a = [];
|
|
969
|
+
return r.forEach((i) => {
|
|
970
|
+
const l = i.hasAttribute("checked"), c = i.hasAttribute("indeterminate");
|
|
935
971
|
if (l || t && c) {
|
|
936
|
-
if (e &&
|
|
972
|
+
if (e && i.hasChildren)
|
|
937
973
|
return;
|
|
938
|
-
a.push(
|
|
974
|
+
a.push(i.data);
|
|
939
975
|
}
|
|
940
976
|
}), a;
|
|
941
977
|
});
|
|
@@ -945,7 +981,7 @@ class Re extends ce {
|
|
|
945
981
|
* @param {boolean} leafOnly 是否仅选中叶子节点
|
|
946
982
|
* @returns {boolean} 是否设置成功
|
|
947
983
|
*/
|
|
948
|
-
|
|
984
|
+
b(this, "setCheckedNodes", (e, t = !1) => !this["show-checkbox"] || !this["node-key"] ? (console.warn(
|
|
949
985
|
"setCheckedNodes requires show-checkbox and node-key to be set"
|
|
950
986
|
), !1) : (e.forEach((r) => {
|
|
951
987
|
const a = s(this, g).call(this, r);
|
|
@@ -965,15 +1001,15 @@ class Re extends ce {
|
|
|
965
1001
|
* @param {boolean} leafOnly 是否仅返回叶子节点
|
|
966
1002
|
* @returns {Array} 选中节点键值数组
|
|
967
1003
|
*/
|
|
968
|
-
|
|
1004
|
+
b(this, "getCheckedKeys", (e = !1) => {
|
|
969
1005
|
if (!this["show-checkbox"] || !this["node-key"])
|
|
970
1006
|
return [];
|
|
971
|
-
const t = s(this,
|
|
972
|
-
return t.forEach((
|
|
973
|
-
if (
|
|
974
|
-
if (e &&
|
|
1007
|
+
const t = s(this, j).call(this), r = [], a = this["node-key"];
|
|
1008
|
+
return t.forEach((i) => {
|
|
1009
|
+
if (i.hasAttribute("checked") && i.data && i.data[a]) {
|
|
1010
|
+
if (e && i.hasChildren)
|
|
975
1011
|
return;
|
|
976
|
-
r.push(
|
|
1012
|
+
r.push(i.data[a]);
|
|
977
1013
|
}
|
|
978
1014
|
}), r;
|
|
979
1015
|
});
|
|
@@ -983,7 +1019,7 @@ class Re extends ce {
|
|
|
983
1019
|
* @param {boolean} leafOnly 是否仅选中叶子节点
|
|
984
1020
|
* @returns {boolean} 是否设置成功
|
|
985
1021
|
*/
|
|
986
|
-
|
|
1022
|
+
b(this, "setCheckedKeys", (e, t = !1) => !this["show-checkbox"] || !this["node-key"] ? (console.warn(
|
|
987
1023
|
"setCheckedKeys requires show-checkbox and node-key to be set"
|
|
988
1024
|
), !1) : (e.forEach((r) => {
|
|
989
1025
|
const a = s(this, g).call(this, r);
|
|
@@ -1004,11 +1040,11 @@ class Re extends ce {
|
|
|
1004
1040
|
* @param {boolean} checked 是否选中
|
|
1005
1041
|
* @returns {boolean} 是否设置成功
|
|
1006
1042
|
*/
|
|
1007
|
-
|
|
1043
|
+
b(this, "setChecked", (e, t) => {
|
|
1008
1044
|
if (!this["show-checkbox"] || !this["node-key"])
|
|
1009
1045
|
return console.warn("setChecked requires show-checkbox and node-key to be set"), !1;
|
|
1010
1046
|
let r;
|
|
1011
|
-
return typeof e == "object" ? r = s(this,
|
|
1047
|
+
return typeof e == "object" ? r = s(this, B).call(this, e) : r = s(this, A).call(this, e), r ? r.disabled ? (console.warn("Cannot set checked state for disabled node"), !1) : (r.checked = t, this["check-strictly"] || r.dispatchEvent(
|
|
1012
1048
|
new CustomEvent("ea-tree-checkbox-click", {
|
|
1013
1049
|
bubbles: !0,
|
|
1014
1050
|
composed: !0,
|
|
@@ -1019,23 +1055,23 @@ class Re extends ce {
|
|
|
1019
1055
|
})
|
|
1020
1056
|
), !0) : (console.warn("Node not found"), !1);
|
|
1021
1057
|
});
|
|
1022
|
-
|
|
1058
|
+
b(this, "setCurrentKey", (e, t = !0) => {
|
|
1023
1059
|
if (!this["node-key"])
|
|
1024
1060
|
return console.warn("setCurrentKey requires node-key to be set"), !1;
|
|
1025
1061
|
if (!e)
|
|
1026
|
-
return s(this,
|
|
1062
|
+
return s(this, h).selectedNode && (s(this, h).selectedNode.selected = !1, s(this, h).selectedNode = null), !0;
|
|
1027
1063
|
const r = s(this, g).call(this, e);
|
|
1028
|
-
return r ? r.disabled ? (console.warn("Cannot select disabled node"), !1) : (s(this,
|
|
1064
|
+
return r ? r.disabled ? (console.warn("Cannot select disabled node"), !1) : (s(this, E).call(this, r), t && s(this, D).call(this, r), !0) : (console.warn(`Node with key ${e} not found`), !1);
|
|
1029
1065
|
});
|
|
1030
|
-
|
|
1066
|
+
b(this, "setCurrentNode", (e, t = !0) => {
|
|
1031
1067
|
if (!this["node-key"])
|
|
1032
1068
|
return console.warn("setCurrentNode requires node-key to be set"), !1;
|
|
1033
1069
|
if (!e)
|
|
1034
|
-
return s(this,
|
|
1070
|
+
return s(this, h).selectedNode && (s(this, h).selectedNode.selected = !1, s(this, h).selectedNode = null), !0;
|
|
1035
1071
|
const r = s(this, g).call(this, e);
|
|
1036
|
-
return r ? r.disabled ? (console.warn("Cannot select disabled node"), !1) : (s(this,
|
|
1072
|
+
return r ? r.disabled ? (console.warn("Cannot select disabled node"), !1) : (s(this, E).call(this, r), t && s(this, D).call(this, r), !0) : (console.warn("Node not found"), !1);
|
|
1037
1073
|
});
|
|
1038
|
-
|
|
1074
|
+
b(this, "getNode", (e) => {
|
|
1039
1075
|
if (!this["node-key"])
|
|
1040
1076
|
return console.warn("getNode requires node-key to be set"), null;
|
|
1041
1077
|
const t = s(this, g).call(this, e);
|
|
@@ -1045,14 +1081,15 @@ class Re extends ce {
|
|
|
1045
1081
|
data: e
|
|
1046
1082
|
} : null;
|
|
1047
1083
|
});
|
|
1048
|
-
this.stylesheet =
|
|
1084
|
+
this.stylesheet = Ae, this.$render();
|
|
1049
1085
|
}
|
|
1050
1086
|
static get observedAttributes() {
|
|
1051
1087
|
return [
|
|
1052
1088
|
...super.observedAttributes,
|
|
1053
1089
|
"show-checkbox",
|
|
1054
1090
|
"check-strictly",
|
|
1055
|
-
"node-key"
|
|
1091
|
+
"node-key",
|
|
1092
|
+
"expand-on-icon-click"
|
|
1056
1093
|
];
|
|
1057
1094
|
}
|
|
1058
1095
|
/**
|
|
@@ -1061,27 +1098,27 @@ class Re extends ce {
|
|
|
1061
1098
|
*/
|
|
1062
1099
|
updateContainerClasslist() {
|
|
1063
1100
|
const e = this.computedClasslist("ea-tree", {}, {});
|
|
1064
|
-
return s(this,
|
|
1101
|
+
return s(this, u).className = e, e;
|
|
1065
1102
|
}
|
|
1066
1103
|
$render() {
|
|
1067
|
-
const e =
|
|
1104
|
+
const e = ce("tree");
|
|
1068
1105
|
this.ns = e, this.shadowRoot.innerHTML = `
|
|
1069
1106
|
<div class='${e.b("tree")}' part='container'></div>
|
|
1070
1107
|
<slot></slot>
|
|
1071
|
-
`, f(this,
|
|
1108
|
+
`, f(this, u, this.shadowRoot.querySelector(e.cb("tree")));
|
|
1072
1109
|
}
|
|
1073
1110
|
connectedCallback() {
|
|
1074
1111
|
var e;
|
|
1075
|
-
super.connectedCallback(), (e = s(this,
|
|
1112
|
+
super.connectedCallback(), (e = s(this, x)) == null || e.abort(), f(this, x, new AbortController()), s(this, ie).call(this), this.updateContainerClasslist();
|
|
1076
1113
|
}
|
|
1077
1114
|
$beforeUnmounted() {
|
|
1078
1115
|
var e;
|
|
1079
|
-
(e = s(this,
|
|
1080
|
-
for (const t of Object.values(s(this,
|
|
1116
|
+
(e = s(this, x)) == null || e.abort();
|
|
1117
|
+
for (const t of Object.values(s(this, m)))
|
|
1081
1118
|
t == null || t.abort();
|
|
1082
1119
|
}
|
|
1083
1120
|
}
|
|
1084
|
-
|
|
1121
|
+
u = new WeakMap(), x = new WeakMap(), h = new WeakMap(), m = new WeakMap(), A = new WeakMap(), B = new WeakMap(), g = new WeakMap(), Y = new WeakMap(), Z = new WeakMap(), O = new WeakMap(), V = new WeakMap(), ee = new WeakMap(), te = new WeakMap(), S = new WeakMap(), I = new WeakMap(), E = new WeakMap(), se = new WeakMap(), R = new WeakMap(), re = new WeakMap(), H = new WeakMap(), j = new WeakMap(), D = new WeakMap(), ae = new WeakMap(), ie = new WeakMap(), ne = new WeakMap(), oe = new WeakMap(), le = new WeakMap(), de = new WeakMap();
|
|
1085
1122
|
customElements.get("ea-tree") || customElements.define("ea-tree", Re);
|
|
1086
1123
|
export {
|
|
1087
1124
|
Re as EaTree
|