color-star-custom-components 0.0.11 → 0.0.12
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/IconSelect.mjs +71 -64
- package/es/TreeSelect.mjs +1 -1
- package/es/TreeShowSelect.mjs +68 -44
- package/es/assets/IconSelect.css +1 -1
- package/es/assets/TreeShowSelect.css +1 -1
- package/es/assets/layout2.css +1 -1
- package/es/chunks/layout.hORQtlrr.js +415 -0
- package/lib/IconSelect.js +1 -1
- package/lib/TreeSelect.js +1 -1
- package/lib/TreeShowSelect.js +1 -1
- package/lib/assets/IconSelect.css +1 -1
- package/lib/assets/TreeShowSelect.css +1 -1
- package/lib/assets/layout2.css +1 -1
- package/lib/chunks/layout.C8b1ZHld.js +1 -0
- package/package.json +3 -3
package/es/IconSelect.mjs
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import { w as M } from "./chunks/index.bCzIhWFw.js";
|
|
2
|
-
import { ref as r, shallowRef as
|
|
3
|
-
import { ElPopover as
|
|
4
|
-
import { _ as
|
|
5
|
-
import { i as N, g as
|
|
6
|
-
import { _ as
|
|
7
|
-
import './assets/IconSelect.css';const
|
|
2
|
+
import { useCssVars as $, ref as r, shallowRef as F, computed as P, watch as x, onMounted as R, createBlock as i, openBlock as l, unref as u, withCtx as s, createElementVNode as k, createVNode as I, createElementBlock as d, createSlots as U, resolveDynamicComponent as h, Fragment as V, renderList as D, normalizeClass as j, createCommentVNode as T, createTextVNode as q, markRaw as z } from "vue";
|
|
3
|
+
import { ElPopover as G, ElInput as H, ElIcon as w } from "element-plus";
|
|
4
|
+
import { _ as J } from "./chunks/layout.CJWd6Qr3.js";
|
|
5
|
+
import { i as N, g as K, a as Q } from "./chunks/config.DuuYqasP.js";
|
|
6
|
+
import { _ as W } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
|
|
7
|
+
import './assets/IconSelect.css';const X = { class: "icon-select-content flex flex-col overflow-hidden" }, Y = {
|
|
8
8
|
key: 0,
|
|
9
9
|
class: "no-data flex items-center justify-center w-full"
|
|
10
|
-
},
|
|
10
|
+
}, Z = {
|
|
11
11
|
key: 1,
|
|
12
12
|
class: "icon-select-grid overflow-y-auto display-grid"
|
|
13
|
-
},
|
|
13
|
+
}, ee = {
|
|
14
14
|
key: 0,
|
|
15
15
|
class: "loading-text flex items-center justify-center w-full"
|
|
16
|
-
},
|
|
16
|
+
}, te = ["title", "onClick"], oe = /* @__PURE__ */ Object.assign({
|
|
17
17
|
name: "IconSelect"
|
|
18
18
|
}, {
|
|
19
19
|
__name: "layout",
|
|
@@ -40,7 +40,7 @@ import './assets/IconSelect.css';const W = { class: "icon-select-content flex fl
|
|
|
40
40
|
library: {
|
|
41
41
|
type: String,
|
|
42
42
|
default: N.lingyun,
|
|
43
|
-
validator: (
|
|
43
|
+
validator: (n) => Object.values(N).includes(n)
|
|
44
44
|
},
|
|
45
45
|
// 自定义搜索图标组件
|
|
46
46
|
iconSearch: {
|
|
@@ -56,12 +56,19 @@ import './assets/IconSelect.css';const W = { class: "icon-select-content flex fl
|
|
|
56
56
|
iconEmpty: {
|
|
57
57
|
type: Object,
|
|
58
58
|
default: null
|
|
59
|
+
},
|
|
60
|
+
iconColor: {
|
|
61
|
+
type: String,
|
|
62
|
+
default: ""
|
|
59
63
|
}
|
|
60
64
|
},
|
|
61
65
|
emits: ["update:modelValue"],
|
|
62
|
-
setup(
|
|
63
|
-
|
|
64
|
-
|
|
66
|
+
setup(n, { emit: A }) {
|
|
67
|
+
$((e) => ({
|
|
68
|
+
v051e54a2: n.iconColor
|
|
69
|
+
}));
|
|
70
|
+
const a = n, E = A, b = r(!1), v = r(""), c = r(a.modelValue), m = r(null), p = r([]), g = r(!1), f = F({ IconSearch: null, IconAdd: null }), S = async (e) => {
|
|
71
|
+
const t = e === "search" ? a.iconSearch : a.iconAdd;
|
|
65
72
|
if (t)
|
|
66
73
|
return t;
|
|
67
74
|
try {
|
|
@@ -71,17 +78,17 @@ import './assets/IconSelect.css';const W = { class: "icon-select-content flex fl
|
|
|
71
78
|
}
|
|
72
79
|
}, L = async () => {
|
|
73
80
|
const [e, t] = await Promise.all([
|
|
74
|
-
|
|
75
|
-
|
|
81
|
+
S("search"),
|
|
82
|
+
S("add")
|
|
76
83
|
]);
|
|
77
84
|
return {
|
|
78
85
|
IconSearch: e,
|
|
79
86
|
IconAdd: t
|
|
80
87
|
};
|
|
81
|
-
},
|
|
88
|
+
}, _ = async () => {
|
|
82
89
|
g.value = !0;
|
|
83
90
|
try {
|
|
84
|
-
const e = await
|
|
91
|
+
const e = await Q(a.library);
|
|
85
92
|
p.value = Object.entries(e).filter(([t]) => t.toLowerCase() && !["default", "icons"].includes(t)).map(([t, o]) => ({
|
|
86
93
|
name: t,
|
|
87
94
|
component: z(o)
|
|
@@ -91,86 +98,86 @@ import './assets/IconSelect.css';const W = { class: "icon-select-content flex fl
|
|
|
91
98
|
} finally {
|
|
92
99
|
g.value = !1;
|
|
93
100
|
}
|
|
94
|
-
},
|
|
101
|
+
}, C = P(() => v.value ? p.value.filter(
|
|
95
102
|
(e) => e.name.toLowerCase().includes(v.value.toLowerCase())
|
|
96
103
|
) : p.value), y = async () => {
|
|
97
|
-
if (!
|
|
104
|
+
if (!c.value) {
|
|
98
105
|
m.value = null;
|
|
99
106
|
return;
|
|
100
107
|
}
|
|
101
|
-
const e = await
|
|
108
|
+
const e = await K(a.library, c.value);
|
|
102
109
|
m.value = e ? z(e) : null;
|
|
103
110
|
}, O = (e) => {
|
|
104
|
-
|
|
111
|
+
c.value = e.name, E("update:modelValue", e.name), b.value = !1;
|
|
105
112
|
};
|
|
106
|
-
return
|
|
107
|
-
() =>
|
|
113
|
+
return x(
|
|
114
|
+
() => a.modelValue,
|
|
108
115
|
(e) => {
|
|
109
|
-
|
|
116
|
+
c.value = e, y();
|
|
110
117
|
}
|
|
111
|
-
),
|
|
112
|
-
() =>
|
|
118
|
+
), x(
|
|
119
|
+
() => a.library,
|
|
113
120
|
() => {
|
|
114
|
-
|
|
121
|
+
_(), y();
|
|
115
122
|
}
|
|
116
|
-
),
|
|
117
|
-
() =>
|
|
123
|
+
), x(
|
|
124
|
+
() => c.value,
|
|
118
125
|
() => {
|
|
119
126
|
y();
|
|
120
127
|
}
|
|
121
|
-
),
|
|
122
|
-
f.value = await L(),
|
|
123
|
-
}), (e, t) => (l(),
|
|
128
|
+
), R(async () => {
|
|
129
|
+
f.value = await L(), _(), y();
|
|
130
|
+
}), (e, t) => (l(), i(u(G), {
|
|
124
131
|
visible: b.value,
|
|
125
132
|
"onUpdate:visible": t[1] || (t[1] = (o) => b.value = o),
|
|
126
133
|
placement: "bottom-start",
|
|
127
|
-
width:
|
|
134
|
+
width: n.width,
|
|
128
135
|
trigger: "click"
|
|
129
136
|
}, {
|
|
130
|
-
reference:
|
|
131
|
-
|
|
137
|
+
reference: s(() => [
|
|
138
|
+
k("div", {
|
|
132
139
|
class: j(["flex items-center pointer radius-16 justify-center w-icon-item", {
|
|
133
140
|
"select-icon-box bg-fcfdff text-202434 fz-14 flex-col": !m.value,
|
|
134
|
-
"icon-item":
|
|
141
|
+
"icon-item": c.value
|
|
135
142
|
}])
|
|
136
143
|
}, [
|
|
137
|
-
m.value ? (l(),
|
|
144
|
+
m.value ? (l(), i(u(w), {
|
|
138
145
|
key: 0,
|
|
139
|
-
size:
|
|
146
|
+
size: n.iconSize
|
|
140
147
|
}, {
|
|
141
|
-
default:
|
|
142
|
-
(l(),
|
|
148
|
+
default: s(() => [
|
|
149
|
+
(l(), i(h(m.value)))
|
|
143
150
|
]),
|
|
144
151
|
_: 1
|
|
145
152
|
}, 8, ["size"])) : (l(), d(V, { key: 1 }, [
|
|
146
|
-
f.value.IconAdd ? (l(),
|
|
153
|
+
f.value.IconAdd ? (l(), i(u(w), {
|
|
147
154
|
key: 0,
|
|
148
155
|
size: 16
|
|
149
156
|
}, {
|
|
150
|
-
default:
|
|
151
|
-
(l(),
|
|
157
|
+
default: s(() => [
|
|
158
|
+
(l(), i(h(f.value.IconAdd)))
|
|
152
159
|
]),
|
|
153
160
|
_: 1
|
|
154
|
-
})) :
|
|
155
|
-
t[2] || (t[2] =
|
|
161
|
+
})) : T("", !0),
|
|
162
|
+
t[2] || (t[2] = q(" 上传 ", -1))
|
|
156
163
|
], 64))
|
|
157
164
|
], 2)
|
|
158
165
|
]),
|
|
159
|
-
default:
|
|
160
|
-
|
|
161
|
-
I(u(
|
|
166
|
+
default: s(() => [
|
|
167
|
+
k("div", X, [
|
|
168
|
+
I(u(H), {
|
|
162
169
|
class: "mg-b-12",
|
|
163
170
|
modelValue: v.value,
|
|
164
171
|
"onUpdate:modelValue": t[0] || (t[0] = (o) => v.value = o),
|
|
165
172
|
placeholder: "搜索图标",
|
|
166
173
|
clearable: ""
|
|
167
|
-
},
|
|
174
|
+
}, U({ _: 2 }, [
|
|
168
175
|
f.value.IconSearch ? {
|
|
169
176
|
name: "prefix",
|
|
170
|
-
fn:
|
|
177
|
+
fn: s(() => [
|
|
171
178
|
I(u(w), { size: 16 }, {
|
|
172
|
-
default:
|
|
173
|
-
(l(),
|
|
179
|
+
default: s(() => [
|
|
180
|
+
(l(), i(h(f.value.IconSearch)))
|
|
174
181
|
]),
|
|
175
182
|
_: 1
|
|
176
183
|
})
|
|
@@ -178,33 +185,33 @@ import './assets/IconSelect.css';const W = { class: "icon-select-content flex fl
|
|
|
178
185
|
key: "0"
|
|
179
186
|
} : void 0
|
|
180
187
|
]), 1032, ["modelValue"]),
|
|
181
|
-
|
|
182
|
-
I(
|
|
183
|
-
icon:
|
|
188
|
+
C.value.length === 0 ? (l(), d("div", Y, [
|
|
189
|
+
I(J, {
|
|
190
|
+
icon: n.iconEmpty,
|
|
184
191
|
text: "未找到相关图标"
|
|
185
192
|
}, null, 8, ["icon"])
|
|
186
|
-
])) : (l(), d("div",
|
|
187
|
-
g.value ? (l(), d("div",
|
|
193
|
+
])) : (l(), d("div", Z, [
|
|
194
|
+
g.value ? (l(), d("div", ee, " 加载中... ")) : (l(!0), d(V, { key: 1 }, D(C.value, (o) => (l(), d("div", {
|
|
188
195
|
key: o.name,
|
|
189
|
-
class: j(["icon-item radius-8 justify-center items-center pointer flex w-icon-item", { active:
|
|
196
|
+
class: j(["icon-item radius-8 justify-center items-center pointer flex w-icon-item", { active: c.value === o.name }]),
|
|
190
197
|
title: o.name,
|
|
191
198
|
onClick: (B) => O(o)
|
|
192
199
|
}, [
|
|
193
200
|
I(u(w), { size: 50 }, {
|
|
194
|
-
default:
|
|
195
|
-
(l(),
|
|
201
|
+
default: s(() => [
|
|
202
|
+
(l(), i(h(o.component)))
|
|
196
203
|
]),
|
|
197
204
|
_: 2
|
|
198
205
|
}, 1024)
|
|
199
|
-
], 10,
|
|
206
|
+
], 10, te))), 128))
|
|
200
207
|
]))
|
|
201
208
|
])
|
|
202
209
|
]),
|
|
203
210
|
_: 1
|
|
204
211
|
}, 8, ["visible", "width"]));
|
|
205
212
|
}
|
|
206
|
-
}),
|
|
213
|
+
}), le = /* @__PURE__ */ W(oe, [["__scopeId", "data-v-4106dcd4"]]), ue = M(le);
|
|
207
214
|
export {
|
|
208
|
-
|
|
209
|
-
|
|
215
|
+
ue as IconSelect,
|
|
216
|
+
ue as default
|
|
210
217
|
};
|
package/es/TreeSelect.mjs
CHANGED
package/es/TreeShowSelect.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { w as
|
|
2
|
-
import { useAttrs as
|
|
3
|
-
import { ElAutoResizer as
|
|
4
|
-
import { T as
|
|
5
|
-
import { _ as
|
|
6
|
-
import './assets/TreeShowSelect.css';const
|
|
1
|
+
import { w as P } from "./chunks/index.bCzIhWFw.js";
|
|
2
|
+
import { useAttrs as C, ref as m, computed as v, watch as D, createBlock as L, 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
|
+
import { ElAutoResizer as j } from "element-plus";
|
|
4
|
+
import { T as N } from "./chunks/layout.hORQtlrr.js";
|
|
5
|
+
import { _ as B } from "./chunks/_plugin-vue_export-helper.CHgC5LLL.js";
|
|
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"
|
|
8
8
|
}, {
|
|
9
9
|
__name: "layout",
|
|
@@ -12,71 +12,95 @@ import './assets/TreeShowSelect.css';const j = { class: "left-box w-50-percent f
|
|
|
12
12
|
modelValue: {
|
|
13
13
|
type: Object,
|
|
14
14
|
default: () => []
|
|
15
|
+
},
|
|
16
|
+
// 右侧显示的数据，如果不传则使用选中的节点
|
|
17
|
+
rightTreeList: {
|
|
18
|
+
type: Array,
|
|
19
|
+
default: () => []
|
|
15
20
|
}
|
|
16
21
|
},
|
|
17
22
|
emits: ["getCheckedNode"],
|
|
18
|
-
setup(
|
|
19
|
-
const
|
|
20
|
-
const { selectedNode: l, selectedValue:
|
|
21
|
-
t.value = l,
|
|
22
|
-
selectedValue:
|
|
23
|
+
setup(b, { emit: w }) {
|
|
24
|
+
const a = b, S = w, s = C(), r = m(), y = v(() => s.treeProps ? s.treeProps : { value: "id", label: "label", children: "children" }), f = (e) => String(e).includes("%") ? e : e + "px", t = m([]), n = v(() => a.rightTreeList.length > 0 ? a.rightTreeList : t.value), V = (e) => {
|
|
25
|
+
const { selectedNode: l, selectedValue: i, selectedParentNodes: c } = e;
|
|
26
|
+
t.value = l, S("getCheckedNode", {
|
|
27
|
+
selectedValue: i,
|
|
23
28
|
// 选中节点的值的集合
|
|
24
29
|
selectedNode: l,
|
|
25
30
|
// // 选中节点的集合
|
|
26
|
-
selectedParentNodes:
|
|
31
|
+
selectedParentNodes: c
|
|
27
32
|
});
|
|
28
|
-
},
|
|
29
|
-
|
|
30
|
-
},
|
|
33
|
+
}, k = (e) => {
|
|
34
|
+
r.value?.setNodeCheckStatus(e[y.value.value], !1);
|
|
35
|
+
}, T = (e) => {
|
|
31
36
|
t.value = e || [];
|
|
32
37
|
};
|
|
33
|
-
return
|
|
34
|
-
() =>
|
|
38
|
+
return D(
|
|
39
|
+
() => a.modelValue,
|
|
35
40
|
(e) => {
|
|
36
|
-
|
|
41
|
+
T(e);
|
|
37
42
|
},
|
|
38
43
|
{ immediate: !0, deep: !0 }
|
|
39
|
-
), (e, l) => (
|
|
40
|
-
default:
|
|
41
|
-
|
|
44
|
+
), (e, l) => (z(), L(p(j), null, {
|
|
45
|
+
default: h(({ width: i, height: c }) => [
|
|
46
|
+
d("div", {
|
|
42
47
|
class: "out-box flex radius-8 text-202434 overflow-hidden",
|
|
43
|
-
style:
|
|
44
|
-
width: i
|
|
45
|
-
height:
|
|
48
|
+
style: A({
|
|
49
|
+
width: f(i),
|
|
50
|
+
height: f(c)
|
|
46
51
|
})
|
|
47
52
|
}, [
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
53
|
+
d("div", E, [
|
|
54
|
+
d("div", H, _(r.value && r.value.allNodeNumbers || 0) + "项 ", 1),
|
|
55
|
+
d("div", I, [
|
|
56
|
+
x(N, R({
|
|
52
57
|
modelValue: t.value,
|
|
53
|
-
"onUpdate:modelValue": l[0] || (l[0] = (
|
|
58
|
+
"onUpdate:modelValue": l[0] || (l[0] = (o) => t.value = o),
|
|
54
59
|
ref_key: "treeRef",
|
|
55
|
-
ref:
|
|
56
|
-
},
|
|
60
|
+
ref: r
|
|
61
|
+
}, p(s), { onHandleCheck: V }), {
|
|
62
|
+
node: h(({ node: o, data: u }) => [
|
|
63
|
+
g(e.$slots, "node", {
|
|
64
|
+
node: o,
|
|
65
|
+
data: u,
|
|
66
|
+
checkedNodes: t.value
|
|
67
|
+
}, void 0, !0)
|
|
68
|
+
]),
|
|
69
|
+
_: 3
|
|
70
|
+
}, 16, ["modelValue"])
|
|
57
71
|
])
|
|
58
72
|
]),
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
73
|
+
d("div", M, [
|
|
74
|
+
d("div", O, _(n.value.length) + "项 ", 1),
|
|
75
|
+
d("div", U, [
|
|
76
|
+
x(N, {
|
|
63
77
|
modelValue: t.value,
|
|
64
|
-
"onUpdate:modelValue": l[1] || (l[1] = (
|
|
78
|
+
"onUpdate:modelValue": l[1] || (l[1] = (o) => t.value = o),
|
|
65
79
|
class: "tree-select-list",
|
|
66
|
-
treeProps:
|
|
67
|
-
treeList:
|
|
80
|
+
treeProps: p(s).treeProps,
|
|
81
|
+
treeList: n.value,
|
|
68
82
|
isListMode: !0,
|
|
69
|
-
|
|
70
|
-
|
|
83
|
+
isMultiple: !1,
|
|
84
|
+
onHandleDeleteNode: k
|
|
85
|
+
}, {
|
|
86
|
+
node: h(({ node: o, data: u }) => [
|
|
87
|
+
g(e.$slots, "node", {
|
|
88
|
+
node: o,
|
|
89
|
+
data: u,
|
|
90
|
+
checkedNodes: n.value
|
|
91
|
+
}, void 0, !0)
|
|
92
|
+
]),
|
|
93
|
+
_: 3
|
|
94
|
+
}, 8, ["modelValue", "treeProps", "treeList"])
|
|
71
95
|
])
|
|
72
96
|
])
|
|
73
97
|
], 4)
|
|
74
98
|
]),
|
|
75
|
-
_:
|
|
99
|
+
_: 3
|
|
76
100
|
}));
|
|
77
101
|
}
|
|
78
|
-
}),
|
|
102
|
+
}), K = /* @__PURE__ */ B($, [["__scopeId", "data-v-6c331cf9"]]), W = P(K);
|
|
79
103
|
export {
|
|
80
|
-
|
|
81
|
-
|
|
104
|
+
W as TreeShowSelect,
|
|
105
|
+
W as default
|
|
82
106
|
};
|
package/es/assets/IconSelect.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.icon-select-content[data-v-
|
|
1
|
+
.icon-select-content[data-v-4106dcd4]{max-height:290px}.icon-select-grid[data-v-4106dcd4]{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:12px}.w-icon-item[data-v-4106dcd4]{width:70px;height:70px}.icon-item[data-v-4106dcd4]{background:#e6e9f2}.icon-item.active[data-v-4106dcd4]{background:#dbdee9}.select-icon-box[data-v-4106dcd4]{border:1px dashed var(--border-color)}.bg-fcfdff[data-v-4106dcd4]{background:#fcfdff}svg[data-v-4106dcd4]{fill:var(--v051e54a2)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.w-50-percent[data-v-
|
|
1
|
+
.w-50-percent[data-v-6c331cf9]{width:50%}.out-box[data-v-6c331cf9]{border:1px solid var(--parting-line)}.out-box .head-box[data-v-6c331cf9]{border-bottom:1px solid var(--parting-line)}.out-box .left-box[data-v-6c331cf9]{border-right:1px solid var(--parting-line)}.out-box .selected-list .selected-item[data-v-6c331cf9]{height:32px}.out-box .selected-list .selected-item[data-v-6c331cf9]:hover{background:var(--primary-color-5)}.out-box .selected-list .virtual-scroller[data-v-6c331cf9]{height:100%}.tree-select-list[data-v-6c331cf9] .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-1d5f5af4] .el-tree-node__label{line-height:22px}[data-v-1d5f5af4] .el-tree-node:focus>.el-tree-node__content{background-color:transparent}[data-v-1d5f5af4] .el-tree-node__content{border-radius:8px}[data-v-1d5f5af4] .el-tree-node__content:hover{background-color:var(--primary-color-5)}[data-v-1d5f5af4] .element-tree-node-label{font-size:14px}.list-item[data-v-1d5f5af4]{height:32px}.list-item[data-v-1d5f5af4]:hover{background:var(--primary-color-5)}[data-v-1d5f5af4] .element-tree-node-line-ver,[data-v-1d5f5af4] .element-tree-node-line-hor{border-color:var(--neutral-color-19)}
|
|
@@ -0,0 +1,415 @@
|
|
|
1
|
+
import { useAttrs as ie, ref as L, computed as S, watch as O, nextTick as B, onMounted as de, createBlock as K, openBlock as x, unref as f, withCtx as N, createElementVNode as D, normalizeStyle as ce, createElementBlock as T, createCommentVNode as ue, createVNode as g, normalizeClass as he, mergeProps as fe, renderSlot as R, toDisplayString as H, withModifiers as pe, h as Q } from "vue";
|
|
2
|
+
import { ElAutoResizer as me, ElInput as ye, ElIcon as U, ElTreeV2 as ve } from "element-plus";
|
|
3
|
+
import { IconSearch as ge, IconDelete as ke, IconRighttop as Se } from "color-message-lingyun-vue";
|
|
4
|
+
import { IconEmpty as Ne } from "../IconEmpty.mjs";
|
|
5
|
+
import { _ as be } from "./_plugin-vue_export-helper.CHgC5LLL.js";
|
|
6
|
+
import '../assets/layout2.css';function Ce(s) {
|
|
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(d) {
|
|
32
|
+
const c = s || d, a = this.getScopedSlot("default"), t = this.getScopedSlot("node-label"), u = this.getScopedSlot("after-node-label"), p = a ? this.getScopedSlotValue(a, {
|
|
33
|
+
node: this.node,
|
|
34
|
+
data: this.data
|
|
35
|
+
}) : [
|
|
36
|
+
t ? this.getScopedSlotValue(t, {
|
|
37
|
+
node: this.node,
|
|
38
|
+
data: this.data
|
|
39
|
+
}) : c(
|
|
40
|
+
"span",
|
|
41
|
+
{ class: "element-tree-node-label" },
|
|
42
|
+
this.node.label
|
|
43
|
+
),
|
|
44
|
+
this.showLabelLine ? c("span", {
|
|
45
|
+
class: "element-tree-node-label-line"
|
|
46
|
+
}) : null,
|
|
47
|
+
this.getScopedSlotValue(u, {
|
|
48
|
+
node: this.node,
|
|
49
|
+
data: this.data
|
|
50
|
+
})
|
|
51
|
+
], y = [];
|
|
52
|
+
let h = this.node;
|
|
53
|
+
for (; h; ) {
|
|
54
|
+
let n = h.parent;
|
|
55
|
+
if (h.level === 1 && !h.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) === (h.key || h.id)
|
|
70
|
+
);
|
|
71
|
+
y.unshift(
|
|
72
|
+
m === (n.children || n.childNodes).length - 1
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
h = 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
|
+
c("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 c(
|
|
89
|
+
"span",
|
|
90
|
+
{
|
|
91
|
+
class: "element-tree-node-label-wrapper"
|
|
92
|
+
},
|
|
93
|
+
[p].concat(V).concat([
|
|
94
|
+
c("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(d) {
|
|
106
|
+
if (!d)
|
|
107
|
+
return null;
|
|
108
|
+
const c = d.split("||");
|
|
109
|
+
let a = null;
|
|
110
|
+
for (let t = 0; t < c.length; t++) {
|
|
111
|
+
const u = c[t], p = (this.$slots || {})[u];
|
|
112
|
+
if (p) {
|
|
113
|
+
a = p;
|
|
114
|
+
break;
|
|
115
|
+
}
|
|
116
|
+
if (a = (this.$scopedSlots || {})[u], a)
|
|
117
|
+
break;
|
|
118
|
+
}
|
|
119
|
+
return a;
|
|
120
|
+
},
|
|
121
|
+
getScopedSlotValue(d, c, a = null) {
|
|
122
|
+
return typeof d == "function" ? d(c) || a : d || a;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
function G(s) {
|
|
128
|
+
const d = Ce(s);
|
|
129
|
+
return s && (d.methods.getScopedSlot = function(a) {
|
|
130
|
+
if (!a)
|
|
131
|
+
return null;
|
|
132
|
+
const t = a.split("||");
|
|
133
|
+
let u = null;
|
|
134
|
+
for (let p = 0; p < t.length; p++) {
|
|
135
|
+
const y = t[p], h = (this.$slots || {})[y];
|
|
136
|
+
if (h) {
|
|
137
|
+
u = h;
|
|
138
|
+
break;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
return u;
|
|
142
|
+
}), d;
|
|
143
|
+
}
|
|
144
|
+
G();
|
|
145
|
+
const Le = {
|
|
146
|
+
key: 0,
|
|
147
|
+
class: "mg-b-16"
|
|
148
|
+
}, xe = {
|
|
149
|
+
key: 0,
|
|
150
|
+
class: "list-item flex justify-between pd-l-6 pd-r-6 radius-8 items-center w-full"
|
|
151
|
+
}, Ve = ["onClick"], Me = { key: 1 }, De = /* @__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(s, { expose: d, emit: c }) {
|
|
216
|
+
const a = G(Q), t = s, u = c, p = ie(), y = () => Q(Se, {
|
|
217
|
+
style: { color: "var(--text-color-2)", fontSize: "16px" }
|
|
218
|
+
}), h = t.isMultiple ? 20 : 10, V = t.isMultiple ? 15 : 11, n = L([]), m = L(null), b = L(null), P = S(() => t.treeProps.value), w = S(() => t.treeProps.label), v = S(() => t.treeProps.children), z = L(!1), J = S(() => !t.isMultiple && z.value), W = S(() => typeof t.apiConfig == "function"), F = (e) => String(e).includes("%") ? e : e + "px", X = () => {
|
|
219
|
+
let e = m.value?.getCheckedNodes(), l = e.map((i) => i[P.value]), r = [];
|
|
220
|
+
return e.length && !t.includeParentSelected && (e = e.filter((i) => !i[v.value]), l = e.map((i) => i[P.value])), t.includeParentSelected && (r = Y(n.value, l)), {
|
|
221
|
+
selectedNodeValues: l,
|
|
222
|
+
// 选中节点的值的集合
|
|
223
|
+
selectedNodes: e,
|
|
224
|
+
// 选中节点的集合
|
|
225
|
+
selectedParentNodes: r
|
|
226
|
+
// 选中节点的所有父节点
|
|
227
|
+
};
|
|
228
|
+
};
|
|
229
|
+
function Y(e, l) {
|
|
230
|
+
const r = /* @__PURE__ */ new Map();
|
|
231
|
+
function i(o, k = []) {
|
|
232
|
+
for (const C of o) {
|
|
233
|
+
const re = [...k, C];
|
|
234
|
+
C.children && C.children.length > 0 ? i(C.children, re) : l.includes(C.id) && k.forEach((A) => {
|
|
235
|
+
r.has(A.id) || r.set(A.id, { ...A });
|
|
236
|
+
});
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
return i(e), Array.from(r.values());
|
|
240
|
+
}
|
|
241
|
+
const Z = (e) => {
|
|
242
|
+
!t.isMultiple || t.isListMode || E();
|
|
243
|
+
}, ee = (e, l) => {
|
|
244
|
+
t.isMultiple || t.isListMode || (z.value = !0, b.value = l.key, u("handleCheck", {
|
|
245
|
+
selectedValue: [b.value],
|
|
246
|
+
// 选中节点的值
|
|
247
|
+
selectedNode: [l.data]
|
|
248
|
+
// // 选中节点
|
|
249
|
+
}));
|
|
250
|
+
}, j = L(""), te = (e) => {
|
|
251
|
+
m.value.filter(e);
|
|
252
|
+
}, le = (e, l) => l[w.value].includes(e), ne = (e) => {
|
|
253
|
+
let l = 0;
|
|
254
|
+
function r(i) {
|
|
255
|
+
for (const o of i) {
|
|
256
|
+
const k = o[v.value] && o[v.value].length > 0;
|
|
257
|
+
t.includeParentSelected ? l++ : k || l++, k && r(o[v.value]);
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
return r(e), l;
|
|
261
|
+
}, oe = S(() => ne(n.value));
|
|
262
|
+
function E() {
|
|
263
|
+
const { selectedNodeValues: e, selectedNodes: l, selectedParentNodes: r } = X();
|
|
264
|
+
u("handleCheck", {
|
|
265
|
+
selectedValue: e,
|
|
266
|
+
// 选中节点的值的集合
|
|
267
|
+
selectedNode: l,
|
|
268
|
+
// 选中节点的集合
|
|
269
|
+
selectedParentNodes: r
|
|
270
|
+
});
|
|
271
|
+
}
|
|
272
|
+
const se = (e, l) => {
|
|
273
|
+
m.value?.setChecked(e, l), E();
|
|
274
|
+
}, _ = () => {
|
|
275
|
+
p["default-checked-keys"] && B(() => {
|
|
276
|
+
E();
|
|
277
|
+
});
|
|
278
|
+
}, ae = (e) => {
|
|
279
|
+
u("handleDeleteNode", e);
|
|
280
|
+
}, M = (e) => e?.map((l) => ({
|
|
281
|
+
...l,
|
|
282
|
+
[v.value]: l[v.value]?.length ? M(l[v.value]) : void 0
|
|
283
|
+
})), $ = async () => {
|
|
284
|
+
W.value ? t.apiConfig(t.reqParams)?.then((e) => {
|
|
285
|
+
n.value = M(e?.data || []), _(), I(t.modelValue), u("initFinish", n.value);
|
|
286
|
+
}) : q();
|
|
287
|
+
}, q = () => {
|
|
288
|
+
t.isListMode ? n.value = M(t.treeList || []) : (n.value = M(t.treeList || []), n.value.length && (_(), I(t.modelValue)));
|
|
289
|
+
}, I = (e) => {
|
|
290
|
+
const l = e && e.length && e.map((r) => r[t.treeProps.value]);
|
|
291
|
+
B(() => {
|
|
292
|
+
m.value?.setCheckedKeys(l);
|
|
293
|
+
});
|
|
294
|
+
};
|
|
295
|
+
return O(
|
|
296
|
+
() => t.treeList,
|
|
297
|
+
() => {
|
|
298
|
+
q();
|
|
299
|
+
},
|
|
300
|
+
{ deep: !0 }
|
|
301
|
+
), O(
|
|
302
|
+
() => t.modelValue,
|
|
303
|
+
(e) => {
|
|
304
|
+
B(() => {
|
|
305
|
+
I(e);
|
|
306
|
+
});
|
|
307
|
+
},
|
|
308
|
+
{ deep: !0 }
|
|
309
|
+
), de(() => {
|
|
310
|
+
$();
|
|
311
|
+
}), d({
|
|
312
|
+
allNodeNumbers: oe,
|
|
313
|
+
loadData: $,
|
|
314
|
+
setNodeCheckStatus: se
|
|
315
|
+
}), (e, l) => (x(), K(f(me), null, {
|
|
316
|
+
default: N(({ width: r, height: i }) => [
|
|
317
|
+
D("div", {
|
|
318
|
+
style: ce({
|
|
319
|
+
width: F(r),
|
|
320
|
+
height: F(i)
|
|
321
|
+
})
|
|
322
|
+
}, [
|
|
323
|
+
s.hasFilter ? (x(), T("div", Le, [
|
|
324
|
+
g(f(ye), {
|
|
325
|
+
modelValue: j.value,
|
|
326
|
+
"onUpdate:modelValue": l[0] || (l[0] = (o) => j.value = o),
|
|
327
|
+
placeholder: "请输入",
|
|
328
|
+
onInput: te
|
|
329
|
+
}, {
|
|
330
|
+
prefix: N(() => [
|
|
331
|
+
g(f(U), {
|
|
332
|
+
size: 16,
|
|
333
|
+
color: "var(--neutral-color-12)",
|
|
334
|
+
class: "mg-r-4"
|
|
335
|
+
}, {
|
|
336
|
+
default: N(() => [
|
|
337
|
+
g(f(ge))
|
|
338
|
+
]),
|
|
339
|
+
_: 1
|
|
340
|
+
})
|
|
341
|
+
]),
|
|
342
|
+
_: 1
|
|
343
|
+
}, 8, ["modelValue"])
|
|
344
|
+
])) : ue("", !0),
|
|
345
|
+
D("div", {
|
|
346
|
+
class: he(s.hasFilter ? "pd-l-8 pd-r-8" : "")
|
|
347
|
+
}, [
|
|
348
|
+
g(f(ve), fe({
|
|
349
|
+
ref_key: "treeRef",
|
|
350
|
+
ref: m,
|
|
351
|
+
height: s.hasFilter ? i - 48 : i,
|
|
352
|
+
data: n.value,
|
|
353
|
+
props: s.treeProps,
|
|
354
|
+
"node-key": P.value,
|
|
355
|
+
"show-checkbox": s.isMultiple && !s.isListMode,
|
|
356
|
+
"item-size": 34,
|
|
357
|
+
indent: f(h),
|
|
358
|
+
"highlight-current": J.value,
|
|
359
|
+
icon: s.isListMode ? "" : y,
|
|
360
|
+
"filter-method": le
|
|
361
|
+
}, f(p), {
|
|
362
|
+
onNodeClick: ee,
|
|
363
|
+
onCheck: Z
|
|
364
|
+
}), {
|
|
365
|
+
default: N(({ node: o }) => [
|
|
366
|
+
s.isListMode ? (x(), T("div", xe, [
|
|
367
|
+
R(e.$slots, "node", {
|
|
368
|
+
node: o,
|
|
369
|
+
data: o.data
|
|
370
|
+
}, () => [
|
|
371
|
+
D("span", null, H(o.data[w.value]), 1)
|
|
372
|
+
], !0),
|
|
373
|
+
D("div", {
|
|
374
|
+
class: "flex items-center",
|
|
375
|
+
onClick: pe((k) => ae(o.data), ["stop"])
|
|
376
|
+
}, [
|
|
377
|
+
g(f(U), {
|
|
378
|
+
size: 14,
|
|
379
|
+
color: "var(--neutral-color-5)"
|
|
380
|
+
}, {
|
|
381
|
+
default: N(() => [
|
|
382
|
+
g(f(ke))
|
|
383
|
+
]),
|
|
384
|
+
_: 1
|
|
385
|
+
})
|
|
386
|
+
], 8, Ve)
|
|
387
|
+
])) : R(e.$slots, "node", {
|
|
388
|
+
key: 1,
|
|
389
|
+
node: o,
|
|
390
|
+
data: o.data
|
|
391
|
+
}, () => [
|
|
392
|
+
s.hasTreeLine ? (x(), K(f(a), {
|
|
393
|
+
key: 0,
|
|
394
|
+
node: o,
|
|
395
|
+
treeData: n.value,
|
|
396
|
+
showLabelLine: !1,
|
|
397
|
+
indent: f(V)
|
|
398
|
+
}, null, 8, ["node", "treeData", "indent"])) : (x(), T("span", Me, H(o.data[w.value]), 1))
|
|
399
|
+
], !0)
|
|
400
|
+
]),
|
|
401
|
+
empty: N(() => [
|
|
402
|
+
g(f(Ne))
|
|
403
|
+
]),
|
|
404
|
+
_: 3
|
|
405
|
+
}, 16, ["height", "data", "props", "node-key", "show-checkbox", "indent", "highlight-current", "icon"])
|
|
406
|
+
], 2)
|
|
407
|
+
], 4)
|
|
408
|
+
]),
|
|
409
|
+
_: 3
|
|
410
|
+
}));
|
|
411
|
+
}
|
|
412
|
+
}), Be = /* @__PURE__ */ be(De, [["__scopeId", "data-v-1d5f5af4"]]);
|
|
413
|
+
export {
|
|
414
|
+
Be as T
|
|
415
|
+
};
|
package/lib/IconSelect.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";require('./assets/IconSelect.css');var
|
|
1
|
+
"use strict";require('./assets/IconSelect.css');var S=Object.create;var b=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var V=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var j=(o,a,l,m)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of V(a))!N.call(o,r)&&r!==l&&b(o,r,{get:()=>a[r],enumerable:!(m=_(a,r))||m.enumerable});return o};var z=(o,a,l)=>(l=o!=null?S(E(o)):{},j(a||!o||!o.__esModule?b(l,"default",{value:o,enumerable:!0}):l,o));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("./chunks/index.CkihWzK6.js"),e=require("vue"),s=require("element-plus"),A=require("./chunks/layout.ikdn8BHo.js"),y=require("./chunks/config.-Zz1ib9f.js"),M=require("./chunks/_plugin-vue_export-helper.BHFhmbuH.js"),O={class:"icon-select-content flex flex-col overflow-hidden"},q={key:0,class:"no-data flex items-center justify-center w-full"},D={key:1,class:"icon-select-grid overflow-y-auto display-grid"},P={key:0,class:"loading-text flex items-center justify-center w-full"},F=["title","onClick"],R=Object.assign({name:"IconSelect"},{__name:"layout",props:{modelValue:{type:String,default:""},placeholder:{type:String,default:"请选择图标"},width:{type:Number,default:520},iconSize:{type:Number,default:62},library:{type:String,default:y.iconLibraryMap.lingyun,validator:o=>Object.values(y.iconLibraryMap).includes(o)},iconSearch:{type:Object,default:null},iconAdd:{type:Object,default:null},iconEmpty:{type:Object,default:null},iconColor:{type:String,default:""}},emits:["update:modelValue"],setup(o,{emit:a}){e.useCssVars(t=>({v051e54a2:o.iconColor}));const l=o,m=a,r=e.ref(!1),f=e.ref(""),i=e.ref(l.modelValue),u=e.ref(null),p=e.ref([]),k=e.ref(!1),d=e.shallowRef({IconSearch:null,IconAdd:null}),h=async t=>{const n=t==="search"?l.iconSearch:l.iconAdd;if(n)return n;try{return(await import("color-message-lingyun-vue"))[t==="search"?"IconSearch":"IconAdd"]}catch{return console.warn(`color-message-lingyun-vue not found, ${t} icon will not be displayed`),null}},B=async()=>{const[t,n]=await Promise.all([h("search"),h("add")]);return{IconSearch:t,IconAdd:n}},w=async()=>{k.value=!0;try{const t=await y.getIconLibrary(l.library);p.value=Object.entries(t).filter(([n])=>n.toLowerCase()&&!["default","icons"].includes(n)).map(([n,c])=>({name:n,component:e.markRaw(c)}))}catch(t){console.error("Failed to load icons:",t),p.value=[]}finally{k.value=!1}},I=e.computed(()=>f.value?p.value.filter(t=>t.name.toLowerCase().includes(f.value.toLowerCase())):p.value),v=async()=>{if(!i.value){u.value=null;return}const t=await y.getIconComponent(l.library,i.value);u.value=t?e.markRaw(t):null},C=t=>{i.value=t.name,m("update:modelValue",t.name),r.value=!1};return e.watch(()=>l.modelValue,t=>{i.value=t,v()}),e.watch(()=>l.library,()=>{w(),v()}),e.watch(()=>i.value,()=>{v()}),e.onMounted(async()=>{d.value=await B(),w(),v()}),(t,n)=>(e.openBlock(),e.createBlock(e.unref(s.ElPopover),{visible:r.value,"onUpdate:visible":n[1]||(n[1]=c=>r.value=c),placement:"bottom-start",width:o.width,trigger:"click"},{reference:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass(["flex items-center pointer radius-16 justify-center w-icon-item",{"select-icon-box bg-fcfdff text-202434 fz-14 flex-col":!u.value,"icon-item":i.value}])},[u.value?(e.openBlock(),e.createBlock(e.unref(s.ElIcon),{key:0,size:o.iconSize},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(u.value)))]),_:1},8,["size"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[d.value.IconAdd?(e.openBlock(),e.createBlock(e.unref(s.ElIcon),{key:0,size:16},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(d.value.IconAdd)))]),_:1})):e.createCommentVNode("",!0),n[2]||(n[2]=e.createTextVNode(" 上传 ",-1))],64))],2)]),default:e.withCtx(()=>[e.createElementVNode("div",O,[e.createVNode(e.unref(s.ElInput),{class:"mg-b-12",modelValue:f.value,"onUpdate:modelValue":n[0]||(n[0]=c=>f.value=c),placeholder:"搜索图标",clearable:""},e.createSlots({_:2},[d.value.IconSearch?{name:"prefix",fn:e.withCtx(()=>[e.createVNode(e.unref(s.ElIcon),{size:16},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(d.value.IconSearch)))]),_:1})]),key:"0"}:void 0]),1032,["modelValue"]),I.value.length===0?(e.openBlock(),e.createElementBlock("div",q,[e.createVNode(A._sfc_main,{icon:o.iconEmpty,text:"未找到相关图标"},null,8,["icon"])])):(e.openBlock(),e.createElementBlock("div",D,[k.value?(e.openBlock(),e.createElementBlock("div",P," 加载中... ")):(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:1},e.renderList(I.value,c=>(e.openBlock(),e.createElementBlock("div",{key:c.name,class:e.normalizeClass(["icon-item radius-8 justify-center items-center pointer flex w-icon-item",{active:i.value===c.name}]),title:c.name,onClick:x=>C(c)},[e.createVNode(e.unref(s.ElIcon),{size:50},{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(c.component)))]),_:2},1024)],10,F))),128))]))])]),_:1},8,["visible","width"]))}}),T=M._export_sfc(R,[["__scopeId","data-v-4106dcd4"]]),g=L.withInstall(T);exports.IconSelect=g;exports.default=g;
|
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.C8b1ZHld.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"),
|
|
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.C8b1ZHld.js"),w=require("./chunks/_plugin-vue_export-helper.BHFhmbuH.js"),y={class:"left-box w-50-percent flex flex-col overflow-hidden"},k={class:"head-box fz-14 pd-t-8 pd-b-8 pd-l-12 pd-r-12 mg-b-8 text-202434"},T={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 n=m,_=v,r=e.useAttrs(),s=e.ref(),N=e.computed(()=>r.treeProps?r.treeProps:{value:"id",label:"label",children:"children"}),p=t=>String(t).includes("%")?t:t+"px",l=e.ref([]),a=e.computed(()=>n.rightTreeList.length>0?n.rightTreeList:l.value),x=t=>{const{selectedNode:o,selectedValue:c,selectedParentNodes:i}=t;l.value=o,_("getCheckedNode",{selectedValue:c,selectedNode:o,selectedParentNodes:i})},g=t=>{s.value?.setNodeCheckStatus(t[N.value.value],!1)},S=t=>{l.value=t||[]};return e.watch(()=>n.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",k,e.toDisplayString(s.value&&s.value.allNodeNumbers||0)+"项 ",1),e.createElementVNode("div",T,[e.createVNode(h.TreeSelect,e.mergeProps({modelValue:l.value,"onUpdate:modelValue":o[0]||(o[0]=d=>l.value=d),ref_key:"treeRef",ref:s},e.unref(r),{onHandleCheck:x}),{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(r).treeProps,treeList:a.value,isListMode:!0,isMultiple:!1,onHandleDeleteNode:g},{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-6c331cf9"]]),f=V.withInstall(L);exports.TreeShowSelect=f;exports.default=f;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.icon-select-content[data-v-
|
|
1
|
+
.icon-select-content[data-v-4106dcd4]{max-height:290px}.icon-select-grid[data-v-4106dcd4]{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:12px}.w-icon-item[data-v-4106dcd4]{width:70px;height:70px}.icon-item[data-v-4106dcd4]{background:#e6e9f2}.icon-item.active[data-v-4106dcd4]{background:#dbdee9}.select-icon-box[data-v-4106dcd4]{border:1px dashed var(--border-color)}.bg-fcfdff[data-v-4106dcd4]{background:#fcfdff}svg[data-v-4106dcd4]{fill:var(--v051e54a2)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.w-50-percent[data-v-
|
|
1
|
+
.w-50-percent[data-v-6c331cf9]{width:50%}.out-box[data-v-6c331cf9]{border:1px solid var(--parting-line)}.out-box .head-box[data-v-6c331cf9]{border-bottom:1px solid var(--parting-line)}.out-box .left-box[data-v-6c331cf9]{border-right:1px solid var(--parting-line)}.out-box .selected-list .selected-item[data-v-6c331cf9]{height:32px}.out-box .selected-list .selected-item[data-v-6c331cf9]:hover{background:var(--primary-color-5)}.out-box .selected-list .virtual-scroller[data-v-6c331cf9]{height:100%}.tree-select-list[data-v-6c331cf9] .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-1d5f5af4] .el-tree-node__label{line-height:22px}[data-v-1d5f5af4] .el-tree-node:focus>.el-tree-node__content{background-color:transparent}[data-v-1d5f5af4] .el-tree-node__content{border-radius:8px}[data-v-1d5f5af4] .el-tree-node__content:hover{background-color:var(--primary-color-5)}[data-v-1d5f5af4] .element-tree-node-label{font-size:14px}.list-item[data-v-1d5f5af4]{height:32px}.list-item[data-v-1d5f5af4]:hover{background:var(--primary-color-5)}[data-v-1d5f5af4] .element-tree-node-line-ver,[data-v-1d5f5af4] .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"),N=require("element-plus"),M=require("color-message-lingyun-vue"),W=require("../IconEmpty.js"),X=require("./_plugin-vue_export-helper.BHFhmbuH.js");function Y(s){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(c){const u=s||c,r=this.getScopedSlot("default"),l=this.getScopedSlot("node-label"),h=this.getScopedSlot("after-node-label"),p=r?this.getScopedSlotValue(r,{node:this.node,data:this.data}):[l?this.getScopedSlotValue(l,{node:this.node,data:this.data}):u("span",{class:"element-tree-node-label"},this.node.label),this.showLabelLine?u("span",{class:"element-tree-node-label-line"}):null,this.getScopedSlotValue(h,{node:this.node,data:this.data})],y=[];let f=this.node;for(;f;){let o=f.parent;if(f.level===1&&!f.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)===(f.key||f.id));y.unshift(m===(o.children||o.childNodes).length-1)}f=o}const C=[];for(let o=0;o<this.node.level;o++)y[o]&&this.node.level-1!==o||C.push(u("span",{class:{"element-tree-node-line-ver":!0,"last-node-isLeaf-line":y[o]&&this.node.level-1===o},style:{left:this.indent*o+"px"}}));return u("span",{class:"element-tree-node-label-wrapper"},[p].concat(C).concat([u("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(c){if(!c)return null;const u=c.split("||");let r=null;for(let l=0;l<u.length;l++){const h=u[l],p=(this.$slots||{})[h];if(p){r=p;break}if(r=(this.$scopedSlots||{})[h],r)break}return r},getScopedSlotValue(c,u,r=null){return typeof c=="function"?c(u)||r:c||r}}}}function q(s){const c=Y(s);return s&&(c.methods.getScopedSlot=function(r){if(!r)return null;const l=r.split("||");let h=null;for(let p=0;p<l.length;p++){const y=l[p],f=(this.$slots||{})[y];if(f){h=f;break}}return h}),c}q();const 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(s,{expose:c,emit:u}){const r=q(e.h),l=s,h=u,p=e.useAttrs(),y=()=>e.h(M.IconRighttop,{style:{color:"var(--text-color-2)",fontSize:"16px"}}),f=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),L=e.computed(()=>l.treeProps.label),v=e.computed(()=>l.treeProps.children),B=e.ref(!1),z=e.computed(()=>!l.isMultiple&&B.value),F=e.computed(()=>typeof l.apiConfig=="function"),D=t=>String(t).includes("%")?t:t+"px",_=()=>{let t=m.value?.getCheckedNodes(),n=t.map(d=>d[V.value]),i=[];return t.length&&!l.includeParentSelected&&(t=t.filter(d=>!d[v.value]),n=t.map(d=>d[V.value])),l.includeParentSelected&&(i=j(o.value,n)),{selectedNodeValues:n,selectedNodes:t,selectedParentNodes:i}};function j(t,n){const i=new Map;function d(a,g=[]){for(const S of a){const J=[...g,S];S.children&&S.children.length>0?d(S.children,J):n.includes(S.id)&&g.forEach(E=>{i.has(E.id)||i.set(E.id,{...E})})}}return d(t),Array.from(i.values())}const $=t=>{!l.isMultiple||l.isListMode||x()},O=(t,n)=>{l.isMultiple||l.isListMode||(B.value=!0,k.value=n.key,h("handleCheck",{selectedValue:[k.value],selectedNode:[n.data]}))},P=e.ref(""),K=t=>{m.value.filter(t)},R=(t,n)=>n[L.value].includes(t),H=t=>{let n=0;function i(d){for(const a of d){const g=a[v.value]&&a[v.value].length>0;l.includeParentSelected?n++:g||n++,g&&i(a[v.value])}}return i(t),n},Q=e.computed(()=>H(o.value));function x(){const{selectedNodeValues:t,selectedNodes:n,selectedParentNodes:i}=_();h("handleCheck",{selectedValue:t,selectedNode:n,selectedParentNodes:i})}const U=(t,n)=>{m.value?.setChecked(t,n),x()},I=()=>{p["default-checked-keys"]&&e.nextTick(()=>{x()})},G=t=>{h("handleDeleteNode",t)},b=t=>t?.map(n=>({...n,[v.value]:n[v.value]?.length?b(n[v.value]):void 0})),T=async()=>{F.value?l.apiConfig(l.reqParams)?.then(t=>{o.value=b(t?.data||[]),I(),w(l.modelValue),h("initFinish",o.value)}):A()},A=()=>{l.isListMode?o.value=b(l.treeList||[]):(o.value=b(l.treeList||[]),o.value.length&&(I(),w(l.modelValue)))},w=t=>{const n=t&&t.length&&t.map(i=>i[l.treeProps.value]);e.nextTick(()=>{m.value?.setCheckedKeys(n)})};return e.watch(()=>l.treeList,()=>{A()},{deep:!0}),e.watch(()=>l.modelValue,t=>{e.nextTick(()=>{w(t)})},{deep:!0}),e.onMounted(()=>{T()}),c({allNodeNumbers:Q,loadData:T,setNodeCheckStatus:U}),(t,n)=>(e.openBlock(),e.createBlock(e.unref(N.ElAutoResizer),null,{default:e.withCtx(({width:i,height:d})=>[e.createElementVNode("div",{style:e.normalizeStyle({width:D(i),height:D(d)})},[s.hasFilter?(e.openBlock(),e.createElementBlock("div",Z,[e.createVNode(e.unref(N.ElInput),{modelValue:P.value,"onUpdate:modelValue":n[0]||(n[0]=a=>P.value=a),placeholder:"请输入",onInput:K},{prefix:e.withCtx(()=>[e.createVNode(e.unref(N.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(s.hasFilter?"pd-l-8 pd-r-8":"")},[e.createVNode(e.unref(N.ElTreeV2),e.mergeProps({ref_key:"treeRef",ref:m,height:s.hasFilter?d-48:d,data:o.value,props:s.treeProps,"node-key":V.value,"show-checkbox":s.isMultiple&&!s.isListMode,"item-size":34,indent:e.unref(f),"highlight-current":z.value,icon:s.isListMode?"":y,"filter-method":R},e.unref(p),{onNodeClick:O,onCheck:$}),{default:e.withCtx(({node:a})=>[s.isListMode?(e.openBlock(),e.createElementBlock("div",ee,[e.renderSlot(t.$slots,"node",{node:a,data:a.data},()=>[e.createElementVNode("span",null,e.toDisplayString(a.data[L.value]),1)],!0),e.createElementVNode("div",{class:"flex items-center",onClick:e.withModifiers(g=>G(a.data),["stop"])},[e.createVNode(e.unref(N.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:a,data:a.data},()=>[s.hasTreeLine?(e.openBlock(),e.createBlock(e.unref(r),{key:0,node:a,treeData:o.value,showLabelLine:!1,indent:e.unref(C)},null,8,["node","treeData","indent"])):(e.openBlock(),e.createElementBlock("span",le,e.toDisplayString(a.data[L.value]),1))],!0)]),empty:e.withCtx(()=>[e.createVNode(e.unref(W.IconEmpty))]),_:3},16,["height","data","props","node-key","show-checkbox","indent","highlight-current","icon"])],2)],4)]),_:3}))}}),oe=X._export_sfc(ne,[["__scopeId","data-v-1d5f5af4"]]);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.12",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"color-star-custom-components",
|
|
6
6
|
"component library",
|
|
@@ -174,10 +174,10 @@
|
|
|
174
174
|
"peerDependencies": {
|
|
175
175
|
"axios": "^1.8.2",
|
|
176
176
|
"vue": "^3.5.25",
|
|
177
|
+
"color-message-aibox-vue": "0.0.76",
|
|
177
178
|
"color-star-atom-style": "0.0.2",
|
|
178
179
|
"color-message-lingyun-vue": "0.0.30",
|
|
179
|
-
"color-
|
|
180
|
-
"color-star-custom-methods": "0.0.14"
|
|
180
|
+
"color-star-custom-methods": "0.0.15"
|
|
181
181
|
},
|
|
182
182
|
"optionalDependencies": {
|
|
183
183
|
"@ast-grep/napi-linux-x64-musl": "^0.39.6",
|