ant-design-x-vue-next
Version:
Ant Design X for Vue — community continuation aligned with @ant-design/x
213 lines (212 loc) • 6.37 kB
JavaScript
import { defineComponent as N, toRef as z, createVNode as e, computed as o, useTemplateRef as M, watch as V, onWatcherCleanup as U, Fragment as p, mergeProps as W } from "vue";
import { F as E, h as G, i as J, j as K, k as Z, l as Y, n as q, o as H, b as Q, p as _ } from "../../chunks/module-chunk.mjs";
import ee from "./AudioIcon.mjs";
import le from "./JavaIcon.mjs";
import ne from "./JavaScriptIcon.mjs";
import te from "./PythonIcon.mjs";
import ie from "./VideoIcon.mjs";
import { useAttachmentContextInject as oe } from "../context.mjs";
import "../../x-provider/index.mjs";
import { matchExt as h, previewImage as ce } from "../util.mjs";
import ae from "../style/index.mjs";
import re from "../../_util/hooks/use-state.mjs";
import { Image as ue, Progress as se } from "ant-design-vue";
import { EXCEL_EXTS as me, IMG_EXTS as k, MARKDOWN_EXTS as fe, PDF_EXTS as de, PPT_EXTS as ve, WORD_EXTS as xe, ZIP_EXTS as ye, VIDEO_EXTS as Fe, AUDIO_EXTS as Se } from "../constants.mjs";
import ge from "../../x-provider/hooks/use-x-provider-context.mjs";
const v = " ", u = "#8c8c8c", Ae = /* @__PURE__ */ N({
name: "AXAttachmentsFileListCard",
__name: "FileListCard",
props: {
prefixCls: null,
item: null,
onRemove: {
type: Function
},
className: null,
style: null,
imageProps: null,
icon: null,
type: null
},
setup(l, {
expose: P
}) {
z(l, "prefixCls");
const x = [{
key: "default",
icon: e(E, null, null),
color: u,
ext: /* @__PURE__ */ new Set([])
}, {
key: "excel",
icon: e(G, null, null),
color: "#22b35e",
ext: me
}, {
key: "image",
icon: e(J, null, null),
color: u,
ext: k
}, {
key: "markdown",
icon: e(K, null, null),
color: u,
ext: fe
}, {
key: "pdf",
icon: e(Z, null, null),
color: "#ff4d4f",
ext: de
}, {
key: "ppt",
icon: e(Y, null, null),
color: "#ff6e31",
ext: ve
}, {
key: "word",
icon: e(q, null, null),
color: "#1677ff",
ext: xe
}, {
key: "zip",
icon: e(H, null, null),
color: "#fab714",
ext: ye
}, {
key: "video",
icon: e(ie, null, null),
color: "#ff4d4f",
ext: Fe
}, {
key: "audio",
icon: e(ee, null, null),
color: "#8c8c8c",
ext: Se
}, {
key: "java",
icon: e(le, null, null),
color: "#1677ff",
ext: /* @__PURE__ */ new Set(["java"])
}, {
key: "javascript",
icon: e(ne, null, null),
color: "#fab714",
ext: /* @__PURE__ */ new Set(["js"])
}, {
key: "python",
icon: e(te, null, null),
color: "#fab714",
ext: /* @__PURE__ */ new Set(["py"])
}];
function $(t) {
let i = t;
const r = ["B", "KB", "MB", "GB", "TB", "PB", "EB"];
let d = 0;
for (; i >= 1024 && d < r.length - 1; )
i /= 1024, d++;
return `${i.toFixed(0)} ${r[d]}`;
}
const w = oe(), T = o(() => w.value.disabled), b = o(() => l.item.name), y = o(() => l.item.size), s = o(() => l.item.percent), c = o(() => l.item.status || "done"), F = o(() => l.item.description), {
getPrefixCls: O
} = ge(), S = o(() => O("attachment", l.prefixCls)), n = `${S.value}-list-card`, [X, j, R] = ae(S), A = M("file-list-card-container"), a = o(() => {
const t = b.value || "", i = t.match(/^(.*)\.[^.]+$/);
return {
namePrefix: i ? i[1] : t,
nameSuffix: i ? t.slice(i[1].length) : ""
};
}), B = o(() => h(a.value.nameSuffix, k)), g = o(() => F.value ? F.value : c.value === "uploading" ? `${s.value || 0}%` : c.value === "error" ? l.item.response || v : y.value ? $(y.value) : v), C = o(() => {
if (l.icon)
if (typeof l.icon == "string") {
const t = x.find((i) => i.key === l.icon);
if (t)
return {
icon: t.icon,
color: t.color
};
} else
return {
icon: l.icon,
color: void 0
};
for (const {
ext: t,
icon: i,
color: r
} of x)
if (h(a.value.nameSuffix, t))
return {
icon: i,
iconColor: r
};
return {
icon: e(E, {
key: "defaultIcon"
}, null),
iconColor: u
};
}), [D, I] = re();
V(() => l.item.originFileObj, () => {
if (l.item.originFileObj) {
let t = !0;
ce(l.item.originFileObj).then((i) => {
t && I(i);
}), U(() => {
t = !1;
});
}
I(void 0);
}, {
immediate: !0
});
const m = o(() => l.item.thumbUrl || l.item.url || D.value), f = o(() => l.type === "image" || l.type !== "file" && B.value && (l.item.originFileObj || m.value)), L = o(() => f.value ? e(p, null, [m.value && e(ue, W(l.imageProps, {
alt: "preview",
src: m.value
}), null), c.value !== "done" && e("div", {
class: `${n}-img-mask`
}, [c.value === "uploading" && s.value !== void 0 && e(se, {
percent: s.value,
prefixCls: n
}, null), c.value === "error" && e("div", {
class: `${n}-desc`
}, [e("div", {
class: `${n}-ellipsis-prefix`
}, [g.value])])])]) : e(p, null, [e("div", {
class: `${n}-icon`,
style: {
color: C.value.iconColor
}
}, [C.value.icon]), e("div", {
class: `${n}-content`
}, [e("div", {
class: `${n}-name`
}, [e("div", {
class: `${n}-ellipsis-prefix`
}, [a.value.namePrefix ?? v]), e("div", {
class: `${n}-ellipsis-suffix`
}, [a.value.nameSuffix])]), e("div", {
class: `${n}-desc`
}, [e("div", {
class: `${n}-ellipsis-prefix`
}, [g.value])])])]));
return P({
nativeElement: A
}), () => X(e("div", {
class: Q(n, {
[`${n}-status-${c.value}`]: c.value,
[`${n}-type-preview`]: f.value,
[`${n}-type-overview`]: !f.value
}, l.className, j.value, R),
style: l.style,
ref: "file-list-card-container"
}, [L.value, !T.value && l.onRemove && e("button", {
type: "button",
class: `${n}-remove`,
onClick: () => {
l.onRemove(l.item);
}
}, [e(_, null, null)])]));
}
});
export {
Ae as default
};