color-star-custom-components 0.0.12 → 0.0.13
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/es/TreeSelect.mjs +1 -1
- package/es/TreeShowSelect.mjs +12 -12
- package/es/assets/TreeShowSelect.css +1 -1
- package/es/assets/layout2.css +1 -1
- package/es/chunks/layout.doc0wm3z.js +411 -0
- package/lib/TreeSelect.js +1 -1
- package/lib/TreeShowSelect.js +1 -1
- package/lib/assets/TreeShowSelect.css +1 -1
- package/lib/assets/layout2.css +1 -1
- package/lib/chunks/layout.00bu3jNF.js +1 -0
- package/package.json +3 -3
package/es/TreeSelect.mjs
CHANGED
package/es/TreeShowSelect.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { w as P } from "./chunks/index.bCzIhWFw.js";
|
|
2
|
-
import { useAttrs as
|
|
2
|
+
import { useAttrs as L, ref as m, computed as v, watch as C, createBlock as D, openBlock as z, unref as p, withCtx as h, createElementVNode as d, normalizeStyle as A, toDisplayString as _, createVNode as x, mergeProps as R, renderSlot as g } from "vue";
|
|
3
3
|
import { ElAutoResizer as j } from "element-plus";
|
|
4
|
-
import { T as N } from "./chunks/layout.
|
|
4
|
+
import { T as N } from "./chunks/layout.doc0wm3z.js";
|
|
5
5
|
import { _ as B } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
|
|
6
6
|
import './assets/TreeShowSelect.css';const E = { class: "left-box w-50-percent flex flex-col overflow-hidden" }, H = { class: "head-box fz-14 pd-t-8 pd-b-8 pd-l-12 pd-r-12 mg-b-8 text-202434" }, I = { class: "pd-r-12 pd-l-12 flex-1 overflow-hidden" }, M = { class: "right-box w-50-percent flex flex-col overflow-hidden" }, O = { class: "head-box fz-14 pd-t-8 pd-b-8 pd-l-12 pd-r-12 mg-b-8 text-202434" }, U = { class: "pd-r-12 pd-l-12 flex-1 selected-list overflow-hidden pd-t-8" }, $ = /* @__PURE__ */ Object.assign({
|
|
7
7
|
name: "TreeShowSelect"
|
|
@@ -21,7 +21,7 @@ import './assets/TreeShowSelect.css';const E = { class: "left-box w-50-percent f
|
|
|
21
21
|
},
|
|
22
22
|
emits: ["getCheckedNode"],
|
|
23
23
|
setup(b, { emit: w }) {
|
|
24
|
-
const
|
|
24
|
+
const s = b, S = w, r = L(), a = m(), y = v(() => r.treeProps ? r.treeProps : { value: "id", label: "label", children: "children" }), f = (e) => String(e).includes("%") ? e : e + "px", t = m([]), n = v(() => s.rightTreeList && s.rightTreeList.length > 0 ? s.rightTreeList : t.value), V = (e) => {
|
|
25
25
|
const { selectedNode: l, selectedValue: i, selectedParentNodes: c } = e;
|
|
26
26
|
t.value = l, S("getCheckedNode", {
|
|
27
27
|
selectedValue: i,
|
|
@@ -31,17 +31,17 @@ import './assets/TreeShowSelect.css';const E = { class: "left-box w-50-percent f
|
|
|
31
31
|
selectedParentNodes: c
|
|
32
32
|
});
|
|
33
33
|
}, k = (e) => {
|
|
34
|
-
|
|
34
|
+
a.value?.setNodeCheckStatus(e[y.value.value], !1);
|
|
35
35
|
}, T = (e) => {
|
|
36
36
|
t.value = e || [];
|
|
37
37
|
};
|
|
38
|
-
return
|
|
39
|
-
() =>
|
|
38
|
+
return C(
|
|
39
|
+
() => s.modelValue,
|
|
40
40
|
(e) => {
|
|
41
41
|
T(e);
|
|
42
42
|
},
|
|
43
43
|
{ immediate: !0, deep: !0 }
|
|
44
|
-
), (e, l) => (z(),
|
|
44
|
+
), (e, l) => (z(), D(p(j), null, {
|
|
45
45
|
default: h(({ width: i, height: c }) => [
|
|
46
46
|
d("div", {
|
|
47
47
|
class: "out-box flex radius-8 text-202434 overflow-hidden",
|
|
@@ -51,14 +51,14 @@ import './assets/TreeShowSelect.css';const E = { class: "left-box w-50-percent f
|
|
|
51
51
|
})
|
|
52
52
|
}, [
|
|
53
53
|
d("div", E, [
|
|
54
|
-
d("div", H, _(
|
|
54
|
+
d("div", H, _(a.value && a.value.allNodeNumbers || 0) + "项 ", 1),
|
|
55
55
|
d("div", I, [
|
|
56
56
|
x(N, R({
|
|
57
57
|
modelValue: t.value,
|
|
58
58
|
"onUpdate:modelValue": l[0] || (l[0] = (o) => t.value = o),
|
|
59
59
|
ref_key: "treeRef",
|
|
60
|
-
ref:
|
|
61
|
-
}, p(
|
|
60
|
+
ref: a
|
|
61
|
+
}, p(r), { onHandleCheck: V }), {
|
|
62
62
|
node: h(({ node: o, data: u }) => [
|
|
63
63
|
g(e.$slots, "node", {
|
|
64
64
|
node: o,
|
|
@@ -77,7 +77,7 @@ import './assets/TreeShowSelect.css';const E = { class: "left-box w-50-percent f
|
|
|
77
77
|
modelValue: t.value,
|
|
78
78
|
"onUpdate:modelValue": l[1] || (l[1] = (o) => t.value = o),
|
|
79
79
|
class: "tree-select-list",
|
|
80
|
-
treeProps: p(
|
|
80
|
+
treeProps: p(r).treeProps,
|
|
81
81
|
treeList: n.value,
|
|
82
82
|
isListMode: !0,
|
|
83
83
|
isMultiple: !1,
|
|
@@ -99,7 +99,7 @@ import './assets/TreeShowSelect.css';const E = { class: "left-box w-50-percent f
|
|
|
99
99
|
_: 3
|
|
100
100
|
}));
|
|
101
101
|
}
|
|
102
|
-
}), K = /* @__PURE__ */ B($, [["__scopeId", "data-v-
|
|
102
|
+
}), K = /* @__PURE__ */ B($, [["__scopeId", "data-v-729a868d"]]), W = P(K);
|
|
103
103
|
export {
|
|
104
104
|
W as TreeShowSelect,
|
|
105
105
|
W as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.w-50-percent[data-v-
|
|
1
|
+
.w-50-percent[data-v-729a868d]{width:50%}.out-box[data-v-729a868d]{border:1px solid var(--parting-line)}.out-box .head-box[data-v-729a868d]{border-bottom:1px solid var(--parting-line)}.out-box .left-box[data-v-729a868d]{border-right:1px solid var(--parting-line)}.out-box .selected-list .selected-item[data-v-729a868d]{height:32px}.out-box .selected-list .selected-item[data-v-729a868d]:hover{background:var(--primary-color-5)}.out-box .selected-list .virtual-scroller[data-v-729a868d]{height:100%}.tree-select-list[data-v-729a868d] .el-tree-node__content{margin-bottom:8px;padding:4px 0;height:32px;border-radius:8px}
|
package/es/assets/layout2.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.el-tree .el-tree-node__content{position:relative}.element-tree-node-label-wrapper{flex:1;display:flex;align-items:center}.element-tree-node-label{font-size:12px}.element-tree-node-line-ver{display:block;position:absolute;top:0;left:0;height:100%;border-left:1px dashed #dcdfe6}.element-tree-node-line-ver.last-node-isLeaf-line{height:50%}.element-tree-node-line-hor{display:block;position:absolute;top:50%;left:0;height:0;border-bottom:1px dashed #dcdfe6}.element-tree-node-label-line{flex:1;border-top:1px dashed #dcdfe6;align-self:center;margin:0 10px}[data-v-
|
|
1
|
+
.el-tree .el-tree-node__content{position:relative}.element-tree-node-label-wrapper{flex:1;display:flex;align-items:center}.element-tree-node-label{font-size:12px}.element-tree-node-line-ver{display:block;position:absolute;top:0;left:0;height:100%;border-left:1px dashed #dcdfe6}.element-tree-node-line-ver.last-node-isLeaf-line{height:50%}.element-tree-node-line-hor{display:block;position:absolute;top:50%;left:0;height:0;border-bottom:1px dashed #dcdfe6}.element-tree-node-label-line{flex:1;border-top:1px dashed #dcdfe6;align-self:center;margin:0 10px}[data-v-1466e8fd] .el-tree-node__label{line-height:22px}[data-v-1466e8fd] .el-tree-node:focus>.el-tree-node__content{background-color:transparent}[data-v-1466e8fd] .el-tree-node__content{border-radius:8px}[data-v-1466e8fd] .el-tree-node__content:hover{background-color:var(--primary-color-5)}[data-v-1466e8fd] .element-tree-node-label{font-size:14px}.list-item[data-v-1466e8fd]{height:32px}.list-item[data-v-1466e8fd]:hover{background:var(--primary-color-5)}[data-v-1466e8fd] .element-tree-node-line-ver,[data-v-1466e8fd] .element-tree-node-line-hor{border-color:var(--neutral-color-19)}
|
|
@@ -0,0 +1,411 @@
|
|
|
1
|
+
import { useAttrs as ae, ref as L, computed as S, watch as q, nextTick as B, onMounted as ie, createElementBlock as M, openBlock as x, createCommentVNode as re, createElementVNode as T, createVNode as v, unref as f, withCtx as N, normalizeClass as de, mergeProps as ce, renderSlot as O, toDisplayString as K, withModifiers as ue, createBlock as he, h as R } from "vue";
|
|
2
|
+
import { ElInput as fe, ElIcon as H, ElAutoResizer as pe, ElTreeV2 as me } from "element-plus";
|
|
3
|
+
import { IconSearch as ve, IconDelete as ye, IconRighttop as ge } from "color-message-lingyun-vue";
|
|
4
|
+
import { IconEmpty as ke } from "../IconEmpty.mjs";
|
|
5
|
+
import { _ as Se } from "./_plugin-vue_export-helper.CHgC5LLL.js";
|
|
6
|
+
import '../assets/layout2.css';function Ne(a) {
|
|
7
|
+
return {
|
|
8
|
+
name: "element-tree-line",
|
|
9
|
+
props: {
|
|
10
|
+
node: {
|
|
11
|
+
type: Object,
|
|
12
|
+
required: !0
|
|
13
|
+
},
|
|
14
|
+
data: {
|
|
15
|
+
type: Object
|
|
16
|
+
},
|
|
17
|
+
treeData: {
|
|
18
|
+
type: Array
|
|
19
|
+
},
|
|
20
|
+
indent: {
|
|
21
|
+
type: Number,
|
|
22
|
+
default() {
|
|
23
|
+
return 16;
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
showLabelLine: {
|
|
27
|
+
type: Boolean,
|
|
28
|
+
default: !0
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
render(r) {
|
|
32
|
+
const d = a || r, s = this.getScopedSlot("default"), t = this.getScopedSlot("node-label"), c = this.getScopedSlot("after-node-label"), p = s ? this.getScopedSlotValue(s, {
|
|
33
|
+
node: this.node,
|
|
34
|
+
data: this.data
|
|
35
|
+
}) : [
|
|
36
|
+
t ? this.getScopedSlotValue(t, {
|
|
37
|
+
node: this.node,
|
|
38
|
+
data: this.data
|
|
39
|
+
}) : d(
|
|
40
|
+
"span",
|
|
41
|
+
{ class: "element-tree-node-label" },
|
|
42
|
+
this.node.label
|
|
43
|
+
),
|
|
44
|
+
this.showLabelLine ? d("span", {
|
|
45
|
+
class: "element-tree-node-label-line"
|
|
46
|
+
}) : null,
|
|
47
|
+
this.getScopedSlotValue(c, {
|
|
48
|
+
node: this.node,
|
|
49
|
+
data: this.data
|
|
50
|
+
})
|
|
51
|
+
], y = [];
|
|
52
|
+
let u = this.node;
|
|
53
|
+
for (; u; ) {
|
|
54
|
+
let n = u.parent;
|
|
55
|
+
if (u.level === 1 && !u.parent) {
|
|
56
|
+
if (!this.treeData || !Array.isArray(this.treeData))
|
|
57
|
+
throw Error(
|
|
58
|
+
"if you using el-tree-v2 (Virtualized Tree) of element-plus,element-tree-line required data."
|
|
59
|
+
);
|
|
60
|
+
n = {
|
|
61
|
+
children: Array.isArray(this.treeData) ? this.treeData.map((m) => ({ ...m, key: m.id })) : [],
|
|
62
|
+
level: 0,
|
|
63
|
+
key: "node-0",
|
|
64
|
+
parent: null
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
if (n) {
|
|
68
|
+
const m = (n.children || n.childNodes).findIndex(
|
|
69
|
+
(b) => (b.key || b.id) === (u.key || u.id)
|
|
70
|
+
);
|
|
71
|
+
y.unshift(
|
|
72
|
+
m === (n.children || n.childNodes).length - 1
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
u = n;
|
|
76
|
+
}
|
|
77
|
+
const V = [];
|
|
78
|
+
for (let n = 0; n < this.node.level; n++)
|
|
79
|
+
y[n] && this.node.level - 1 !== n || V.push(
|
|
80
|
+
d("span", {
|
|
81
|
+
class: {
|
|
82
|
+
"element-tree-node-line-ver": !0,
|
|
83
|
+
"last-node-isLeaf-line": y[n] && this.node.level - 1 === n
|
|
84
|
+
},
|
|
85
|
+
style: { left: this.indent * n + "px" }
|
|
86
|
+
})
|
|
87
|
+
);
|
|
88
|
+
return d(
|
|
89
|
+
"span",
|
|
90
|
+
{
|
|
91
|
+
class: "element-tree-node-label-wrapper"
|
|
92
|
+
},
|
|
93
|
+
[p].concat(V).concat([
|
|
94
|
+
d("span", {
|
|
95
|
+
class: "element-tree-node-line-hor",
|
|
96
|
+
style: {
|
|
97
|
+
width: (this.node.isLeaf ? 24 : 8) + "px",
|
|
98
|
+
left: (this.node.level - 1) * this.indent + "px"
|
|
99
|
+
}
|
|
100
|
+
})
|
|
101
|
+
])
|
|
102
|
+
);
|
|
103
|
+
},
|
|
104
|
+
methods: {
|
|
105
|
+
getScopedSlot(r) {
|
|
106
|
+
if (!r)
|
|
107
|
+
return null;
|
|
108
|
+
const d = r.split("||");
|
|
109
|
+
let s = null;
|
|
110
|
+
for (let t = 0; t < d.length; t++) {
|
|
111
|
+
const c = d[t], p = (this.$slots || {})[c];
|
|
112
|
+
if (p) {
|
|
113
|
+
s = p;
|
|
114
|
+
break;
|
|
115
|
+
}
|
|
116
|
+
if (s = (this.$scopedSlots || {})[c], s)
|
|
117
|
+
break;
|
|
118
|
+
}
|
|
119
|
+
return s;
|
|
120
|
+
},
|
|
121
|
+
getScopedSlotValue(r, d, s = null) {
|
|
122
|
+
return typeof r == "function" ? r(d) || s : r || s;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
function Q(a) {
|
|
128
|
+
const r = Ne(a);
|
|
129
|
+
return a && (r.methods.getScopedSlot = function(s) {
|
|
130
|
+
if (!s)
|
|
131
|
+
return null;
|
|
132
|
+
const t = s.split("||");
|
|
133
|
+
let c = null;
|
|
134
|
+
for (let p = 0; p < t.length; p++) {
|
|
135
|
+
const y = t[p], u = (this.$slots || {})[y];
|
|
136
|
+
if (u) {
|
|
137
|
+
c = u;
|
|
138
|
+
break;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
return c;
|
|
142
|
+
}), r;
|
|
143
|
+
}
|
|
144
|
+
Q();
|
|
145
|
+
const be = { class: "w-full h-full flex flex-col overflow-hidden" }, Ce = {
|
|
146
|
+
key: 0,
|
|
147
|
+
class: "mg-b-16"
|
|
148
|
+
}, Le = {
|
|
149
|
+
key: 0,
|
|
150
|
+
class: "list-item flex justify-between pd-l-6 pd-r-6 radius-8 items-center w-full"
|
|
151
|
+
}, xe = ["onClick"], Ve = { key: 1 }, we = /* @__PURE__ */ Object.assign({
|
|
152
|
+
name: "TreeSelect"
|
|
153
|
+
}, {
|
|
154
|
+
__name: "layout",
|
|
155
|
+
props: {
|
|
156
|
+
// 初始值
|
|
157
|
+
modelValue: {
|
|
158
|
+
type: Object,
|
|
159
|
+
default: () => []
|
|
160
|
+
},
|
|
161
|
+
// 树形节点对象结构
|
|
162
|
+
treeProps: {
|
|
163
|
+
type: Object,
|
|
164
|
+
default: () => ({
|
|
165
|
+
value: "id",
|
|
166
|
+
label: "label",
|
|
167
|
+
children: "children"
|
|
168
|
+
})
|
|
169
|
+
},
|
|
170
|
+
// 接口配置
|
|
171
|
+
apiConfig: {
|
|
172
|
+
type: Function
|
|
173
|
+
},
|
|
174
|
+
// 请求参数
|
|
175
|
+
reqParams: {
|
|
176
|
+
type: Object,
|
|
177
|
+
default: () => ({})
|
|
178
|
+
},
|
|
179
|
+
// 是否在组件挂载时自动加载数据
|
|
180
|
+
autoLoad: {
|
|
181
|
+
type: Boolean,
|
|
182
|
+
default: !0
|
|
183
|
+
},
|
|
184
|
+
// 是否多选
|
|
185
|
+
isMultiple: {
|
|
186
|
+
type: Boolean,
|
|
187
|
+
default: !0
|
|
188
|
+
},
|
|
189
|
+
// 是否有过滤
|
|
190
|
+
hasFilter: {
|
|
191
|
+
type: Boolean,
|
|
192
|
+
default: !1
|
|
193
|
+
},
|
|
194
|
+
// 是否是列表模式
|
|
195
|
+
isListMode: {
|
|
196
|
+
type: Boolean,
|
|
197
|
+
default: !1
|
|
198
|
+
},
|
|
199
|
+
treeList: {
|
|
200
|
+
type: Array,
|
|
201
|
+
default: () => []
|
|
202
|
+
},
|
|
203
|
+
// 是否有线条样式
|
|
204
|
+
hasTreeLine: {
|
|
205
|
+
type: Boolean,
|
|
206
|
+
default: !0
|
|
207
|
+
},
|
|
208
|
+
// 选中的节点是否包含父节点
|
|
209
|
+
includeParentSelected: {
|
|
210
|
+
type: Boolean,
|
|
211
|
+
default: !1
|
|
212
|
+
}
|
|
213
|
+
},
|
|
214
|
+
emits: ["handleCheck", "handleDeleteNode", "initFinish"],
|
|
215
|
+
setup(a, { expose: r, emit: d }) {
|
|
216
|
+
const s = Q(R), t = a, c = d, p = ae(), y = () => R(ge, {
|
|
217
|
+
style: { color: "var(--text-color-2)", fontSize: "16px" }
|
|
218
|
+
}), u = t.isMultiple ? 20 : 10, V = t.isMultiple ? 15 : 11, n = L([]), m = L(null), b = L(null), D = S(() => t.treeProps.value), P = S(() => t.treeProps.label), g = S(() => t.treeProps.children), _ = L(!1), U = S(() => !t.isMultiple && _.value), G = S(() => typeof t.apiConfig == "function"), J = () => {
|
|
219
|
+
let e = m.value?.getCheckedNodes(), l = e.map((h) => h[D.value]), o = [];
|
|
220
|
+
return e.length && !t.includeParentSelected && (e = e.filter((h) => !h[g.value]), l = e.map((h) => h[D.value])), t.includeParentSelected && (o = W(n.value, l)), {
|
|
221
|
+
selectedNodeValues: l,
|
|
222
|
+
// 选中节点的值的集合
|
|
223
|
+
selectedNodes: e,
|
|
224
|
+
// 选中节点的集合
|
|
225
|
+
selectedParentNodes: o
|
|
226
|
+
// 选中节点的所有父节点
|
|
227
|
+
};
|
|
228
|
+
};
|
|
229
|
+
function W(e, l) {
|
|
230
|
+
const o = /* @__PURE__ */ new Map();
|
|
231
|
+
function h(i, k = []) {
|
|
232
|
+
for (const C of i) {
|
|
233
|
+
const se = [...k, C];
|
|
234
|
+
C.children && C.children.length > 0 ? h(C.children, se) : l.includes(C.id) && k.forEach((A) => {
|
|
235
|
+
o.has(A.id) || o.set(A.id, { ...A });
|
|
236
|
+
});
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
return h(e), Array.from(o.values());
|
|
240
|
+
}
|
|
241
|
+
const X = (e) => {
|
|
242
|
+
!t.isMultiple || t.isListMode || E();
|
|
243
|
+
}, Y = (e, l) => {
|
|
244
|
+
t.isMultiple || t.isListMode || (_.value = !0, b.value = l.key, c("handleCheck", {
|
|
245
|
+
selectedValue: [b.value],
|
|
246
|
+
// 选中节点的值
|
|
247
|
+
selectedNode: [l.data]
|
|
248
|
+
// // 选中节点
|
|
249
|
+
}));
|
|
250
|
+
}, j = L(""), Z = (e) => {
|
|
251
|
+
m.value.filter(e);
|
|
252
|
+
}, ee = (e, l) => l[P.value].includes(e), te = (e) => {
|
|
253
|
+
let l = 0;
|
|
254
|
+
function o(h) {
|
|
255
|
+
for (const i of h) {
|
|
256
|
+
const k = i[g.value] && i[g.value].length > 0;
|
|
257
|
+
t.includeParentSelected ? l++ : k || l++, k && o(i[g.value]);
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
return o(e), l;
|
|
261
|
+
}, le = S(() => te(n.value));
|
|
262
|
+
function E() {
|
|
263
|
+
const { selectedNodeValues: e, selectedNodes: l, selectedParentNodes: o } = J();
|
|
264
|
+
c("handleCheck", {
|
|
265
|
+
selectedValue: e,
|
|
266
|
+
// 选中节点的值的集合
|
|
267
|
+
selectedNode: l,
|
|
268
|
+
// 选中节点的集合
|
|
269
|
+
selectedParentNodes: o
|
|
270
|
+
});
|
|
271
|
+
}
|
|
272
|
+
const ne = (e, l) => {
|
|
273
|
+
m.value?.setChecked(e, l), E();
|
|
274
|
+
}, z = () => {
|
|
275
|
+
p["default-checked-keys"] && B(() => {
|
|
276
|
+
E();
|
|
277
|
+
});
|
|
278
|
+
}, oe = (e) => {
|
|
279
|
+
c("handleDeleteNode", e);
|
|
280
|
+
}, w = (e) => e?.map((l) => ({
|
|
281
|
+
...l,
|
|
282
|
+
[g.value]: l[g.value]?.length ? w(l[g.value]) : void 0
|
|
283
|
+
})), F = async () => {
|
|
284
|
+
G.value ? t.apiConfig(t.reqParams)?.then((e) => {
|
|
285
|
+
n.value = w(e?.data || []), z(), I(t.modelValue), c("initFinish", n.value);
|
|
286
|
+
}) : $();
|
|
287
|
+
}, $ = () => {
|
|
288
|
+
t.isListMode ? n.value = w(t.treeList || []) : (n.value = w(t.treeList || []), n.value.length && (z(), I(t.modelValue)));
|
|
289
|
+
}, I = (e) => {
|
|
290
|
+
const l = e && e.length && e.map((o) => o[t.treeProps.value]);
|
|
291
|
+
B(() => {
|
|
292
|
+
m.value?.setCheckedKeys(l);
|
|
293
|
+
});
|
|
294
|
+
};
|
|
295
|
+
return q(
|
|
296
|
+
() => t.treeList,
|
|
297
|
+
() => {
|
|
298
|
+
$();
|
|
299
|
+
},
|
|
300
|
+
{ deep: !0 }
|
|
301
|
+
), q(
|
|
302
|
+
() => t.modelValue,
|
|
303
|
+
(e) => {
|
|
304
|
+
B(() => {
|
|
305
|
+
I(e);
|
|
306
|
+
});
|
|
307
|
+
},
|
|
308
|
+
{ deep: !0 }
|
|
309
|
+
), ie(() => {
|
|
310
|
+
F();
|
|
311
|
+
}), r({
|
|
312
|
+
allNodeNumbers: le,
|
|
313
|
+
loadData: F,
|
|
314
|
+
setNodeCheckStatus: ne
|
|
315
|
+
}), (e, l) => (x(), M("div", be, [
|
|
316
|
+
a.hasFilter ? (x(), M("div", Ce, [
|
|
317
|
+
v(f(fe), {
|
|
318
|
+
modelValue: j.value,
|
|
319
|
+
"onUpdate:modelValue": l[0] || (l[0] = (o) => j.value = o),
|
|
320
|
+
placeholder: "请输入",
|
|
321
|
+
onInput: Z
|
|
322
|
+
}, {
|
|
323
|
+
prefix: N(() => [
|
|
324
|
+
v(f(H), {
|
|
325
|
+
size: 16,
|
|
326
|
+
color: "var(--neutral-color-12)",
|
|
327
|
+
class: "mg-r-4"
|
|
328
|
+
}, {
|
|
329
|
+
default: N(() => [
|
|
330
|
+
v(f(ve))
|
|
331
|
+
]),
|
|
332
|
+
_: 1
|
|
333
|
+
})
|
|
334
|
+
]),
|
|
335
|
+
_: 1
|
|
336
|
+
}, 8, ["modelValue"])
|
|
337
|
+
])) : re("", !0),
|
|
338
|
+
T("div", {
|
|
339
|
+
class: de([a.hasFilter ? "pd-l-8 pd-r-8" : "", "flex-1 overflow-hidden"])
|
|
340
|
+
}, [
|
|
341
|
+
v(f(pe), null, {
|
|
342
|
+
default: N(({ width: o, height: h }) => [
|
|
343
|
+
v(f(me), ce({
|
|
344
|
+
ref_key: "treeRef",
|
|
345
|
+
ref: m,
|
|
346
|
+
height: h,
|
|
347
|
+
width: o,
|
|
348
|
+
data: n.value,
|
|
349
|
+
props: a.treeProps,
|
|
350
|
+
"node-key": D.value,
|
|
351
|
+
"show-checkbox": a.isMultiple && !a.isListMode,
|
|
352
|
+
"item-size": 34,
|
|
353
|
+
indent: f(u),
|
|
354
|
+
"highlight-current": U.value,
|
|
355
|
+
icon: a.isListMode ? "" : y,
|
|
356
|
+
"filter-method": ee
|
|
357
|
+
}, f(p), {
|
|
358
|
+
onNodeClick: Y,
|
|
359
|
+
onCheck: X
|
|
360
|
+
}), {
|
|
361
|
+
default: N(({ node: i }) => [
|
|
362
|
+
a.isListMode ? (x(), M("div", Le, [
|
|
363
|
+
O(e.$slots, "node", {
|
|
364
|
+
node: i,
|
|
365
|
+
data: i.data
|
|
366
|
+
}, () => [
|
|
367
|
+
T("span", null, K(i.data[P.value]), 1)
|
|
368
|
+
], !0),
|
|
369
|
+
T("div", {
|
|
370
|
+
class: "flex items-center",
|
|
371
|
+
onClick: ue((k) => oe(i.data), ["stop"])
|
|
372
|
+
}, [
|
|
373
|
+
v(f(H), {
|
|
374
|
+
size: 14,
|
|
375
|
+
color: "var(--neutral-color-5)"
|
|
376
|
+
}, {
|
|
377
|
+
default: N(() => [
|
|
378
|
+
v(f(ye))
|
|
379
|
+
]),
|
|
380
|
+
_: 1
|
|
381
|
+
})
|
|
382
|
+
], 8, xe)
|
|
383
|
+
])) : O(e.$slots, "node", {
|
|
384
|
+
key: 1,
|
|
385
|
+
node: i,
|
|
386
|
+
data: i.data
|
|
387
|
+
}, () => [
|
|
388
|
+
a.hasTreeLine ? (x(), he(f(s), {
|
|
389
|
+
key: 0,
|
|
390
|
+
node: i,
|
|
391
|
+
treeData: n.value,
|
|
392
|
+
showLabelLine: !1,
|
|
393
|
+
indent: f(V)
|
|
394
|
+
}, null, 8, ["node", "treeData", "indent"])) : (x(), M("span", Ve, K(i.data[P.value]), 1))
|
|
395
|
+
], !0)
|
|
396
|
+
]),
|
|
397
|
+
empty: N(() => [
|
|
398
|
+
v(f(ke))
|
|
399
|
+
]),
|
|
400
|
+
_: 3
|
|
401
|
+
}, 16, ["height", "width", "data", "props", "node-key", "show-checkbox", "indent", "highlight-current", "icon"])
|
|
402
|
+
]),
|
|
403
|
+
_: 3
|
|
404
|
+
})
|
|
405
|
+
], 2)
|
|
406
|
+
]));
|
|
407
|
+
}
|
|
408
|
+
}), Ae = /* @__PURE__ */ Se(we, [["__scopeId", "data-v-1466e8fd"]]);
|
|
409
|
+
export {
|
|
410
|
+
Ae as T
|
|
411
|
+
};
|
package/lib/TreeSelect.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./chunks/index.CkihWzK6.js"),l=require("./chunks/layout.
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./chunks/index.CkihWzK6.js"),l=require("./chunks/layout.00bu3jNF.js"),e=t.withInstall(l.TreeSelect);exports.TreeSelect=e;exports.default=e;
|
package/lib/TreeShowSelect.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./assets/TreeShowSelect.css');const V=require("./chunks/index.CkihWzK6.js"),e=require("vue"),b=require("element-plus"),h=require("./chunks/layout.
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./assets/TreeShowSelect.css');const V=require("./chunks/index.CkihWzK6.js"),e=require("vue"),b=require("element-plus"),h=require("./chunks/layout.00bu3jNF.js"),w=require("./chunks/_plugin-vue_export-helper.BHFhmbuH.js"),y={class:"left-box w-50-percent flex flex-col overflow-hidden"},T={class:"head-box fz-14 pd-t-8 pd-b-8 pd-l-12 pd-r-12 mg-b-8 text-202434"},k={class:"pd-r-12 pd-l-12 flex-1 overflow-hidden"},P={class:"right-box w-50-percent flex flex-col overflow-hidden"},C={class:"head-box fz-14 pd-t-8 pd-b-8 pd-l-12 pd-r-12 mg-b-8 text-202434"},E={class:"pd-r-12 pd-l-12 flex-1 selected-list overflow-hidden pd-t-8"},D=Object.assign({name:"TreeShowSelect"},{__name:"layout",props:{modelValue:{type:Object,default:()=>[]},rightTreeList:{type:Array,default:()=>[]}},emits:["getCheckedNode"],setup(m,{emit:v}){const r=m,_=v,s=e.useAttrs(),n=e.ref(),N=e.computed(()=>s.treeProps?s.treeProps:{value:"id",label:"label",children:"children"}),p=t=>String(t).includes("%")?t:t+"px",l=e.ref([]),a=e.computed(()=>r.rightTreeList&&r.rightTreeList.length>0?r.rightTreeList:l.value),g=t=>{const{selectedNode:o,selectedValue:c,selectedParentNodes:i}=t;l.value=o,_("getCheckedNode",{selectedValue:c,selectedNode:o,selectedParentNodes:i})},x=t=>{n.value?.setNodeCheckStatus(t[N.value.value],!1)},S=t=>{l.value=t||[]};return e.watch(()=>r.modelValue,t=>{S(t)},{immediate:!0,deep:!0}),(t,o)=>(e.openBlock(),e.createBlock(e.unref(b.ElAutoResizer),null,{default:e.withCtx(({width:c,height:i})=>[e.createElementVNode("div",{class:"out-box flex radius-8 text-202434 overflow-hidden",style:e.normalizeStyle({width:p(c),height:p(i)})},[e.createElementVNode("div",y,[e.createElementVNode("div",T,e.toDisplayString(n.value&&n.value.allNodeNumbers||0)+"项 ",1),e.createElementVNode("div",k,[e.createVNode(h.TreeSelect,e.mergeProps({modelValue:l.value,"onUpdate:modelValue":o[0]||(o[0]=d=>l.value=d),ref_key:"treeRef",ref:n},e.unref(s),{onHandleCheck:g}),{node:e.withCtx(({node:d,data:u})=>[e.renderSlot(t.$slots,"node",{node:d,data:u,checkedNodes:l.value},void 0,!0)]),_:3},16,["modelValue"])])]),e.createElementVNode("div",P,[e.createElementVNode("div",C,e.toDisplayString(a.value.length)+"项 ",1),e.createElementVNode("div",E,[e.createVNode(h.TreeSelect,{modelValue:l.value,"onUpdate:modelValue":o[1]||(o[1]=d=>l.value=d),class:"tree-select-list",treeProps:e.unref(s).treeProps,treeList:a.value,isListMode:!0,isMultiple:!1,onHandleDeleteNode:x},{node:e.withCtx(({node:d,data:u})=>[e.renderSlot(t.$slots,"node",{node:d,data:u,checkedNodes:a.value},void 0,!0)]),_:3},8,["modelValue","treeProps","treeList"])])])],4)]),_:3}))}}),L=w._export_sfc(D,[["__scopeId","data-v-729a868d"]]),f=V.withInstall(L);exports.TreeShowSelect=f;exports.default=f;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.w-50-percent[data-v-
|
|
1
|
+
.w-50-percent[data-v-729a868d]{width:50%}.out-box[data-v-729a868d]{border:1px solid var(--parting-line)}.out-box .head-box[data-v-729a868d]{border-bottom:1px solid var(--parting-line)}.out-box .left-box[data-v-729a868d]{border-right:1px solid var(--parting-line)}.out-box .selected-list .selected-item[data-v-729a868d]{height:32px}.out-box .selected-list .selected-item[data-v-729a868d]:hover{background:var(--primary-color-5)}.out-box .selected-list .virtual-scroller[data-v-729a868d]{height:100%}.tree-select-list[data-v-729a868d] .el-tree-node__content{margin-bottom:8px;padding:4px 0;height:32px;border-radius:8px}
|
package/lib/assets/layout2.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.el-tree .el-tree-node__content{position:relative}.element-tree-node-label-wrapper{flex:1;display:flex;align-items:center}.element-tree-node-label{font-size:12px}.element-tree-node-line-ver{display:block;position:absolute;top:0;left:0;height:100%;border-left:1px dashed #dcdfe6}.element-tree-node-line-ver.last-node-isLeaf-line{height:50%}.element-tree-node-line-hor{display:block;position:absolute;top:50%;left:0;height:0;border-bottom:1px dashed #dcdfe6}.element-tree-node-label-line{flex:1;border-top:1px dashed #dcdfe6;align-self:center;margin:0 10px}[data-v-
|
|
1
|
+
.el-tree .el-tree-node__content{position:relative}.element-tree-node-label-wrapper{flex:1;display:flex;align-items:center}.element-tree-node-label{font-size:12px}.element-tree-node-line-ver{display:block;position:absolute;top:0;left:0;height:100%;border-left:1px dashed #dcdfe6}.element-tree-node-line-ver.last-node-isLeaf-line{height:50%}.element-tree-node-line-hor{display:block;position:absolute;top:50%;left:0;height:0;border-bottom:1px dashed #dcdfe6}.element-tree-node-label-line{flex:1;border-top:1px dashed #dcdfe6;align-self:center;margin:0 10px}[data-v-1466e8fd] .el-tree-node__label{line-height:22px}[data-v-1466e8fd] .el-tree-node:focus>.el-tree-node__content{background-color:transparent}[data-v-1466e8fd] .el-tree-node__content{border-radius:8px}[data-v-1466e8fd] .el-tree-node__content:hover{background-color:var(--primary-color-5)}[data-v-1466e8fd] .element-tree-node-label{font-size:14px}.list-item[data-v-1466e8fd]{height:32px}.list-item[data-v-1466e8fd]:hover{background:var(--primary-color-5)}[data-v-1466e8fd] .element-tree-node-line-ver,[data-v-1466e8fd] .element-tree-node-line-hor{border-color:var(--neutral-color-19)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";require('../assets/layout2.css');const e=require("vue"),S=require("element-plus"),M=require("color-message-lingyun-vue"),J=require("../IconEmpty.js"),W=require("./_plugin-vue_export-helper.BHFhmbuH.js");function X(r){return{name:"element-tree-line",props:{node:{type:Object,required:!0},data:{type:Object},treeData:{type:Array},indent:{type:Number,default(){return 16}},showLabelLine:{type:Boolean,default:!0}},render(d){const c=r||d,a=this.getScopedSlot("default"),l=this.getScopedSlot("node-label"),u=this.getScopedSlot("after-node-label"),p=a?this.getScopedSlotValue(a,{node:this.node,data:this.data}):[l?this.getScopedSlotValue(l,{node:this.node,data:this.data}):c("span",{class:"element-tree-node-label"},this.node.label),this.showLabelLine?c("span",{class:"element-tree-node-label-line"}):null,this.getScopedSlotValue(u,{node:this.node,data:this.data})],v=[];let h=this.node;for(;h;){let o=h.parent;if(h.level===1&&!h.parent){if(!this.treeData||!Array.isArray(this.treeData))throw Error("if you using el-tree-v2 (Virtualized Tree) of element-plus,element-tree-line required data.");o={children:Array.isArray(this.treeData)?this.treeData.map(m=>({...m,key:m.id})):[],level:0,key:"node-0",parent:null}}if(o){const m=(o.children||o.childNodes).findIndex(k=>(k.key||k.id)===(h.key||h.id));v.unshift(m===(o.children||o.childNodes).length-1)}h=o}const C=[];for(let o=0;o<this.node.level;o++)v[o]&&this.node.level-1!==o||C.push(c("span",{class:{"element-tree-node-line-ver":!0,"last-node-isLeaf-line":v[o]&&this.node.level-1===o},style:{left:this.indent*o+"px"}}));return c("span",{class:"element-tree-node-label-wrapper"},[p].concat(C).concat([c("span",{class:"element-tree-node-line-hor",style:{width:(this.node.isLeaf?24:8)+"px",left:(this.node.level-1)*this.indent+"px"}})]))},methods:{getScopedSlot(d){if(!d)return null;const c=d.split("||");let a=null;for(let l=0;l<c.length;l++){const u=c[l],p=(this.$slots||{})[u];if(p){a=p;break}if(a=(this.$scopedSlots||{})[u],a)break}return a},getScopedSlotValue(d,c,a=null){return typeof d=="function"?d(c)||a:d||a}}}}function A(r){const d=X(r);return r&&(d.methods.getScopedSlot=function(a){if(!a)return null;const l=a.split("||");let u=null;for(let p=0;p<l.length;p++){const v=l[p],h=(this.$slots||{})[v];if(h){u=h;break}}return u}),d}A();const Y={class:"w-full h-full flex flex-col overflow-hidden"},Z={key:0,class:"mg-b-16"},ee={key:0,class:"list-item flex justify-between pd-l-6 pd-r-6 radius-8 items-center w-full"},te=["onClick"],le={key:1},ne=Object.assign({name:"TreeSelect"},{__name:"layout",props:{modelValue:{type:Object,default:()=>[]},treeProps:{type:Object,default:()=>({value:"id",label:"label",children:"children"})},apiConfig:{type:Function},reqParams:{type:Object,default:()=>({})},autoLoad:{type:Boolean,default:!0},isMultiple:{type:Boolean,default:!0},hasFilter:{type:Boolean,default:!1},isListMode:{type:Boolean,default:!1},treeList:{type:Array,default:()=>[]},hasTreeLine:{type:Boolean,default:!0},includeParentSelected:{type:Boolean,default:!1}},emits:["handleCheck","handleDeleteNode","initFinish"],setup(r,{expose:d,emit:c}){const a=A(e.h),l=r,u=c,p=e.useAttrs(),v=()=>e.h(M.IconRighttop,{style:{color:"var(--text-color-2)",fontSize:"16px"}}),h=l.isMultiple?20:10,C=l.isMultiple?15:11,o=e.ref([]),m=e.ref(null),k=e.ref(null),V=e.computed(()=>l.treeProps.value),x=e.computed(()=>l.treeProps.label),y=e.computed(()=>l.treeProps.children),B=e.ref(!1),_=e.computed(()=>!l.isMultiple&&B.value),q=e.computed(()=>typeof l.apiConfig=="function"),j=()=>{let t=m.value?.getCheckedNodes(),n=t.map(f=>f[V.value]),s=[];return t.length&&!l.includeParentSelected&&(t=t.filter(f=>!f[y.value]),n=t.map(f=>f[V.value])),l.includeParentSelected&&(s=z(o.value,n)),{selectedNodeValues:n,selectedNodes:t,selectedParentNodes:s}};function z(t,n){const s=new Map;function f(i,g=[]){for(const N of i){const G=[...g,N];N.children&&N.children.length>0?f(N.children,G):n.includes(N.id)&&g.forEach(E=>{s.has(E.id)||s.set(E.id,{...E})})}}return f(t),Array.from(s.values())}const F=t=>{!l.isMultiple||l.isListMode||L()},$=(t,n)=>{l.isMultiple||l.isListMode||(B.value=!0,k.value=n.key,u("handleCheck",{selectedValue:[k.value],selectedNode:[n.data]}))},D=e.ref(""),O=t=>{m.value.filter(t)},K=(t,n)=>n[x.value].includes(t),R=t=>{let n=0;function s(f){for(const i of f){const g=i[y.value]&&i[y.value].length>0;l.includeParentSelected?n++:g||n++,g&&s(i[y.value])}}return s(t),n},H=e.computed(()=>R(o.value));function L(){const{selectedNodeValues:t,selectedNodes:n,selectedParentNodes:s}=j();u("handleCheck",{selectedValue:t,selectedNode:n,selectedParentNodes:s})}const Q=(t,n)=>{m.value?.setChecked(t,n),L()},P=()=>{p["default-checked-keys"]&&e.nextTick(()=>{L()})},U=t=>{u("handleDeleteNode",t)},b=t=>t?.map(n=>({...n,[y.value]:n[y.value]?.length?b(n[y.value]):void 0})),I=async()=>{q.value?l.apiConfig(l.reqParams)?.then(t=>{o.value=b(t?.data||[]),P(),w(l.modelValue),u("initFinish",o.value)}):T()},T=()=>{l.isListMode?o.value=b(l.treeList||[]):(o.value=b(l.treeList||[]),o.value.length&&(P(),w(l.modelValue)))},w=t=>{const n=t&&t.length&&t.map(s=>s[l.treeProps.value]);e.nextTick(()=>{m.value?.setCheckedKeys(n)})};return e.watch(()=>l.treeList,()=>{T()},{deep:!0}),e.watch(()=>l.modelValue,t=>{e.nextTick(()=>{w(t)})},{deep:!0}),e.onMounted(()=>{I()}),d({allNodeNumbers:H,loadData:I,setNodeCheckStatus:Q}),(t,n)=>(e.openBlock(),e.createElementBlock("div",Y,[r.hasFilter?(e.openBlock(),e.createElementBlock("div",Z,[e.createVNode(e.unref(S.ElInput),{modelValue:D.value,"onUpdate:modelValue":n[0]||(n[0]=s=>D.value=s),placeholder:"请输入",onInput:O},{prefix:e.withCtx(()=>[e.createVNode(e.unref(S.ElIcon),{size:16,color:"var(--neutral-color-12)",class:"mg-r-4"},{default:e.withCtx(()=>[e.createVNode(e.unref(M.IconSearch))]),_:1})]),_:1},8,["modelValue"])])):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass([r.hasFilter?"pd-l-8 pd-r-8":"","flex-1 overflow-hidden"])},[e.createVNode(e.unref(S.ElAutoResizer),null,{default:e.withCtx(({width:s,height:f})=>[e.createVNode(e.unref(S.ElTreeV2),e.mergeProps({ref_key:"treeRef",ref:m,height:f,width:s,data:o.value,props:r.treeProps,"node-key":V.value,"show-checkbox":r.isMultiple&&!r.isListMode,"item-size":34,indent:e.unref(h),"highlight-current":_.value,icon:r.isListMode?"":v,"filter-method":K},e.unref(p),{onNodeClick:$,onCheck:F}),{default:e.withCtx(({node:i})=>[r.isListMode?(e.openBlock(),e.createElementBlock("div",ee,[e.renderSlot(t.$slots,"node",{node:i,data:i.data},()=>[e.createElementVNode("span",null,e.toDisplayString(i.data[x.value]),1)],!0),e.createElementVNode("div",{class:"flex items-center",onClick:e.withModifiers(g=>U(i.data),["stop"])},[e.createVNode(e.unref(S.ElIcon),{size:14,color:"var(--neutral-color-5)"},{default:e.withCtx(()=>[e.createVNode(e.unref(M.IconDelete))]),_:1})],8,te)])):e.renderSlot(t.$slots,"node",{key:1,node:i,data:i.data},()=>[r.hasTreeLine?(e.openBlock(),e.createBlock(e.unref(a),{key:0,node:i,treeData:o.value,showLabelLine:!1,indent:e.unref(C)},null,8,["node","treeData","indent"])):(e.openBlock(),e.createElementBlock("span",le,e.toDisplayString(i.data[x.value]),1))],!0)]),empty:e.withCtx(()=>[e.createVNode(e.unref(J.IconEmpty))]),_:3},16,["height","width","data","props","node-key","show-checkbox","indent","highlight-current","icon"])]),_:3})],2)]))}}),oe=W._export_sfc(ne,[["__scopeId","data-v-1466e8fd"]]);exports.TreeSelect=oe;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "color-star-custom-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.13",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"color-star-custom-components",
|
|
6
6
|
"component library",
|
|
@@ -176,8 +176,8 @@
|
|
|
176
176
|
"vue": "^3.5.25",
|
|
177
177
|
"color-message-aibox-vue": "0.0.76",
|
|
178
178
|
"color-star-atom-style": "0.0.2",
|
|
179
|
-
"color-
|
|
180
|
-
"color-
|
|
179
|
+
"color-star-custom-methods": "0.0.15",
|
|
180
|
+
"color-message-lingyun-vue": "0.0.30"
|
|
181
181
|
},
|
|
182
182
|
"optionalDependencies": {
|
|
183
183
|
"@ast-grep/napi-linux-x64-musl": "^0.39.6",
|