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