tdesign-pro-component
Version:
ProComponents tdesign-vue-next + Vue3 + TS
297 lines (296 loc) • 7.17 kB
JavaScript
import "lodash-es";
import { g as S, b as P, w as _ } from "./utils-CIySOLoe.js";
import { defineComponent as x, computed as D, createVNode as n, ref as h, watch as v, isVNode as w, onMounted as F, mergeProps as k } from "vue";
import { Row as N, Col as O, FormItem as T, CheckboxGroup as B, Checkbox as j } from "tdesign-vue-next";
const C = /* @__PURE__ */ x({
name: "TagItem",
props: {
data: Object,
currentData: Array,
fill: Boolean,
updateColor: Boolean,
disabled: Boolean
},
setup(e, {
slots: r
}) {
const t = D(() => e.disabled ? e.currentData.includes(e.data.value) ? "tag-item tag-item-disabled-active" : "tag-item tag-item-disabled" : e.currentData.includes(e.data.value) ? `tag-item tag-item-active ${e.fill ? "tag-item-active-fill" : ""} ${e.updateColor ? "tag-item-color-active" : ""}` : "tag-item");
return () => n("div", {
class: t.value
}, [r.default && r.default()]);
}
});
function V(e) {
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !w(e);
}
const A = /* @__PURE__ */ x({
name: "TagBox",
props: {
data: {
type: Array
},
vertical: {
type: String,
default: "row"
},
onChange: {
type: Function
},
modelValue: {
type: Array,
default: () => []
},
gap: {
type: String,
default: "24px"
},
updateColor: {
type: Boolean,
default: !1
},
fill: {
type: Boolean,
default: !1
},
readonly: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
}
},
components: {
TagItem: C
},
setup(e, {
emit: r
}) {
const t = h(e.modelValue);
function y(a, l) {
if (e.readonly || e.disabled || l.disabled)
return;
const i = t.value;
i.includes(a) ? t.value = i.filter((g) => g != a) : t.value.push(a), r("change", t.value);
}
v(() => e.modelValue, (a) => {
t.value = a;
}), v(t, (a) => {
r("update:modelValue", a);
});
const f = () => e.data.map((a) => {
let l;
return n("span", {
style: {
marginRight: e.gap
}
}, [n(C, {
disabled: e.disabled || a.disabled,
fill: e.fill,
updateColor: e.updateColor,
currentData: t.value,
key: a.value,
onClick: () => y(a.value, a),
data: a
}, V(l = a.render(a)) ? l : {
default: () => [l]
})]);
}), b = () => {
let a;
return n(N, {
gutter: 20,
style: {
width: "100%"
}
}, V(a = //@ts-ignore
e.data.map((l) => {
let i;
return n(O, {
style: {
marginBottom: e.gap
},
key: l.value,
span: 12
}, {
default: () => [n(C, {
disabled: e.disabled || l.disabled,
fill: e.fill,
updateColor: e.updateColor,
currentData: t.value,
key: l.value,
onClick: () => y(l.value, l),
data: l
}, V(i = l.render(l)) ? i : {
default: () => [i]
})]
});
})) ? a : {
default: () => [a]
});
};
return () => e.vertical === "row" ? f() : b();
}
});
function s(e) {
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !w(e);
}
const I = /* @__PURE__ */ x({
name: "ProFormCheckbox",
props: {
// about pro
data: {
type: [Array, Function],
default: () => []
},
theme: {
type: String,
default: "default"
},
labelName: {
type: String,
default: "label"
},
valueName: {
type: String,
default: "value"
},
vertical: {
type: String,
default: "row"
},
loadingText: {
type: String,
default: "数据加载中，请稍后..."
},
// about form
name: {
required: !0,
type: String
},
label: [String, Function, Object],
rules: Array,
formItemProps: Object,
// about input
modelValue: {
type: Array,
default: () => []
},
checkboxProps: {
type: [Object]
},
readonly: {
type: Boolean,
default: !1
},
disabled: {
type: Boolean,
default: !1
}
},
components: {},
emits: ["update:modelValue", "change"],
setup(e, {
emit: r,
slots: t,
expose: y
}) {
const f = h([]), b = h(!1), a = h(e.modelValue || []), l = S("label", t, e), i = S("loadingText", t, e);
F(() => {
m();
});
function m() {
b.value = !0, P(e.data, e.labelName, e.valueName).then((u) => {
f.value = u.map((o) => ({
...o,
//@ts-ignore
render: (d) => o.render ? o.render(d) : t[`option-${o[e.valueName]}`] ? t[`option-${o[e.valueName]}`]({
option: o
}) : o[e.labelName]
}));
}).finally(() => {
b.value = !1;
});
}
function g(u) {
r("change", u), a.value = u;
}
v(() => e.modelValue, (u) => {
a.value = u;
}), v(a, (u) => {
r("update:modelValue", u);
}), v(() => e.data, () => {
m();
}, {
deep: !0
}), y({
reset: m
});
function R() {
let u, o;
switch (e.theme) {
case "default":
default:
return e.vertical != "column" ? n(B, {
modelValue: a.value,
"onUpdate:modelValue": (d) => a.value = d,
onChange: g,
disabled: e.disabled,
readonly: e.readonly
}, s(u = //@ts-ignore
f.value.map((d) => {
let c;
return n(j, {
disabled: e.disabled || d.disabled,
value: d.value
}, s(c = d.render(d)) ? c : {
default: () => [c]
});
})) ? u : {
default: () => [u]
}) : n(N, null, {
default: () => [n(B, {
value: a.value,
onChange: g,
disabled: e.disabled,
readonly: e.readonly
}, s(o = //@ts-ignore
f.value.map((d) => {
let c;
return n(O, {
span: 12
}, {
default: () => [n(j, {
disabled: e.disabled || d.disabled,
value: d.value
}, s(c = d.render(d)) ? c : {
default: () => [c]
})]
});
})) ? o : {
default: () => [o]
})]
});
case "tag":
return n(A, k(e.checkboxProps, {
readonly: e.readonly,
disabled: e.disabled,
vertical: e.vertical,
onChange: g,
modelValue: a.value,
data: f.value
}), null);
}
}
return () => n(T, k({
rules: e.rules,
name: e.name
}, e.formItemProps), {
default: () => b.value ? i() : R(),
label: l() ? l : null
});
}
}), L = _(I);
export {
L as P
};