@ithinkdt/naive
Version:
iThinkDT Naive UI
316 lines (315 loc) • 7.43 kB
JavaScript
import { toRef as b, withDirectives as T, createVNode as i, resolveDirective as U, createTextVNode as h, reactive as y, markRaw as M, toValue as P } from "vue";
import { NInput as x, NInputNumber as F, NSelect as _, NRadio as B, NCheckbox as C, NSwitch as O, NP as D, NButton as R } from "ithinkdt-ui";
import { debouncedWatch as S, promiseTimeout as j } from "@vueuse/core";
import { useDict as g, CORE_CTX as p } from "@ithinkdt/core";
import { N as X, f as G, g as $, h as L, i as I, j as k, k as q, l as N } from "./index-CDEm3BS5.js";
const V = (t, {
max: e,
props: n
}, s) => {
const a = {}, m = [];
let w = n.onRemove;
n.onRemove = (u) => {
const r = u.file, l = r.file?.fileId ?? r.fileId;
return l && m.push(l), delete a[l ?? r.id], w?.(u);
};
const c = y({});
S(c, (u) => {
const r = Object.keys(u);
r.length !== 0 && p.fileInfo(r).then((l) => {
for (const o of l) {
const v = c[o.fileId];
delete c[o.fileId], v.name = o.fileName;
}
});
}, {
debounce: 100
});
function A(u, r) {
return u.map((l) => {
let o = a[l] ?? {
id: l,
fileId: l,
name: l,
status: "finished",
type: r === "image" ? "image/*" : ""
};
return o.status === "finished" && (o.thumbnailUrl ??= p.filePreview(l), o.url = r === "image" ? o.thumbnailUrl : p.fileDownload(l)), a[l] || r === "image" || (o = y(o), c[o.id] = o), o;
});
}
const E = {
modelValue: "fileList",
props: {
action: "",
max: e,
multiple: e > 1,
defaultUpload: !1,
customRequest: ({
file: u,
onFinish: r,
onError: l,
onProgress: o,
...v
}) => {
u.$ = M(p.fileUploader(u.file, {
...v,
field: "file",
onUploadProgress: (f) => {
o({
percent: f
});
}
}).then((f) => {
a[u.id] || p.fileRemove([f.fileId]), u.file.fileId = f.fileId, r();
}).catch(() => {
l();
}));
}
},
rule: [{
trigger: ["change", "blur"],
validator: async (u) => {
await Promise.all(Object.values(a).map((r) => r.$));
}
}],
_submit: async (u) => {
m.length > 0 && await p.fileRemove(m), typeof P(s) != "boolean" && (await Promise.all([u?.submit(), j(300)]), await Promise.all(Object.values(a).map((r) => r.$)));
}
};
return t === "upload" ? E : {
...E,
_parse(u) {
return u?.length ? u.map((l) => {
const o = l.file?.fileId ?? l.fileId;
return l.status === "removed" ? (o && m.push(o), delete a[o ?? l.id], null) : l.status === "finished" ? (delete a[l.id], a[o] = l, l.file?.fileId ?? l.fileId) : (a[l.id] = l, l.id);
}).filter((l) => !!l).join(",") : null;
},
_transform(u) {
return u = u?.trim?.(), u ? A(u.split(","), t) : [];
}
};
}, d = {
input: (t, e) => {
const [n, s] = (e?.split("~") ?? []).map((a) => a ? Number.parseInt(a) : void 0);
return {
component: x,
modelValue: "value",
props: {
clearable: !0,
minlength: n,
maxlength: s
}
};
},
text: (t, e) => ({
component: x,
modelValue: "value",
props: {
...d.input(t, e).props,
type: "textarea",
showCount: !0
}
}),
number: (t, e) => {
const [n, s] = (e?.split("~") ?? []).map((a) => a ? Number.parseFloat(a) : void 0);
return {
component: F,
modelValue: "value",
props: {
clearable: !0,
min: n,
max: s,
style: {
width: "100%"
}
}
};
},
int: (t, e) => ({
component: F,
modelValue: "value",
props: {
...d.number(t, e).props,
precision: 0
}
}),
select: ({
props: t
}, e) => {
const n = e && g(e);
return {
component: _,
modelValue: "value",
props: {
clearable: !0,
filterable: !0,
options: n,
loading: b(n, "loading"),
renderLabel(s) {
return T(i("span", null, [s?.[t.labelField || t["label-field"] || "label"]]), [[U("tooltip"), {}, "", {
auto: !0
}]]);
}
}
};
},
selects: (t, e) => ({
component: _,
modelValue: "value",
props: {
...d.select(t, e).props,
multiple: !0
}
}),
radio: () => ({
component: B,
modelValue: "value"
}),
radios: (t, e) => ({
component: X,
modelValue: "value",
props: {
options: e && g(e)
}
}),
checkbox: () => ({
component: C,
modelValue: "checked"
}),
checkboxs: (t, e) => ({
component: G,
modelValue: "value",
props: {
options: e && g(e)
}
}),
datepicker: (t, e) => ({
component: $,
modelValue: "value",
props: {
clearable: !0,
type: e,
updateValueOnClose: !0
}
}),
timepicker: () => ({
component: L,
modelValue: "value",
props: {
clearable: !0
}
}),
switch: () => ({
component: O,
modelValue: "value"
}),
upload: ({
props: t
}, e) => {
const n = Math.max(1, Number.parseInt(e)) || Number.MAX_SAFE_INTEGER, s = V("upload", {
props: t,
max: n
}, b(() => t.defaultUpload));
return {
component: I,
...s,
slots: {
default: t.listType === "image-card" ? void 0 : t?.directoryDnd ? () => i(k, null, {
default: () => [i(D, {
depth: "3",
style: "padding: 16px 0"
}, {
default: () => [h("点击或者拖动文件到该区域来上传")]
})]
}) : () => i(R, null, {
default: () => [h("选择文件")]
})
}
};
},
file: ({
props: t
}, e) => {
const n = Math.max(1, Number.parseInt(e)) || Number.MAX_SAFE_INTEGER, s = V("file", {
props: t,
max: n
}, b(() => t.defaultUpload));
return {
component: I,
...s,
props: {
...s.props,
listType: "text"
},
slots: {
default: t?.directoryDnd ? () => i(k, null, {
default: () => [i(D, {
depth: "3",
style: "padding: 16px 0"
}, {
default: () => [h("点击或者拖动文件到该区域来上传")]
})]
}) : () => i(R, null, {
default: () => [h("选择文件")]
})
}
};
},
image: ({
props: t
}, e) => {
const n = Math.max(1, Number.parseInt(e)) || Number.MAX_SAFE_INTEGER, s = V("image", {
props: t,
max: n
}, b(() => t.defaultUpload));
return {
component: I,
...s,
props: {
...s.props,
listType: "image-card",
accept: "image/*"
}
};
},
icon: () => ({
component: q,
modelValue: "value",
props: {}
}),
user: (t, e) => ({
component: N,
modelValue: "value",
props: {
type: "user",
selectType: e
}
}),
users: (t, e) => ({
component: N,
modelValue: "value",
props: {
...d.user(t, e),
multiple: !0
}
}),
dept: (t, e) => ({
component: N,
modelValue: "value",
props: {
type: "dept",
selectType: e
}
}),
depts: (t, e) => ({
component: N,
modelValue: "value",
props: {
...d.dept(t, e),
multiple: !0
}
})
};
export {
d as default
};