ant-design-x-vue-next
Version:
Ant Design X for Vue — community continuation aligned with @ant-design/x
228 lines (227 loc) • 6.89 kB
JavaScript
import { defineComponent as X, createVNode as o, computed as n, mergeProps as u } from "vue";
import { h as V, i as O, j as D, k as M, l as J, n as L, o as U, F as B, b as t } from "../chunks/module-chunk.mjs";
import { Image as G } from "ant-design-vue";
import R from "../_util/pick-attrs.mjs";
import W from "../_util/hooks/use-x-component-config.mjs";
import "../x-provider/index.mjs";
import Z from "./components/ImageLoading.mjs";
import q from "./icons/AudioIcon.mjs";
import H from "./icons/JavaIcon.mjs";
import K from "./icons/JavaScriptIcon.mjs";
import Q from "./icons/PythonIcon.mjs";
import Y from "./icons/VideoIcon.mjs";
import ll from "./style/index.mjs";
import { matchExt as m, getSize as el } from "./utils.mjs";
import ol from "../x-provider/hooks/use-x-provider-context.mjs";
const kl = /* @__PURE__ */ X({
name: "AXFileCard",
__name: "FileCard",
props: {
prefixCls: null,
rootClassName: null,
className: null,
class: null,
style: null,
classNames: {
default: () => ({})
},
styles: {
default: () => ({})
},
name: null,
byte: null,
size: {
default: "default"
},
description: null,
loading: {
type: Boolean
},
src: null,
mask: null,
icon: null,
type: null,
imageProps: null,
spinProps: null,
videoProps: null,
audioProps: null,
onClick: {
type: Function
}
},
emits: ["click"],
setup($, {
emit: I
}) {
const l = $, b = I, v = ["png", "jpg", "jpeg", "gif", "bmp", "webp", "svg", "jfif"], y = ["mp3", "wav", "flac", "ape", "aac", "ogg"], x = ["mp4", "avi", "mov", "wmv", "flv", "mkv"], k = [{
icon: o(V, null, null),
color: "#22b35e",
ext: ["xlsx", "xls"],
key: "excel"
}, {
icon: o(O, null, null),
color: "#8c8c8c",
ext: v,
key: "image"
}, {
icon: o(D, null, null),
color: "#8c8c8c",
ext: ["md", "mdx"],
key: "markdown"
}, {
icon: o(M, null, null),
color: "#ff4d4f",
ext: ["pdf"],
key: "pdf"
}, {
icon: o(J, null, null),
color: "#ff6e31",
ext: ["ppt", "pptx"],
key: "ppt"
}, {
icon: o(L, null, null),
color: "#1677ff",
ext: ["doc", "docx"],
key: "word"
}, {
icon: o(U, null, null),
color: "#fab714",
ext: ["zip", "rar", "7z", "tar", "gz"],
key: "zip"
}, {
icon: o(Y, null, null),
color: "#ff4d4f",
ext: x,
key: "video"
}, {
icon: o(q, null, null),
color: "#ff6e31",
ext: y,
key: "audio"
}, {
icon: o(H, null, null),
color: "#1677ff",
ext: ["java"],
key: "java"
}, {
icon: o(K, null, null),
color: "#fab714",
ext: ["js"],
key: "javascript"
}, {
icon: o(Q, null, null),
color: "#fab714",
ext: ["py"],
key: "python"
}], g = {
icon: o(B, null, null),
color: "#8c8c8c"
}, _ = n(() => R(l, {
attr: !0,
aria: !0,
data: !0
})), {
direction: h,
getPrefixCls: E
} = ol(), a = n(() => E("file-card", l.prefixCls)), f = W("fileCard"), [j, S, z] = ll(a), C = n(() => {
const e = l.name || "", s = e.match(/^(.*)\.[^.]+$/);
return s ? [s[1], e.slice(s[1].length)] : [e, ""];
}), F = n(() => C.value[0]), i = n(() => C.value[1]), N = n(() => {
const e = l.icon;
if (typeof e == "string") {
const s = k.find((A) => A.key === e);
if (s) return [s.icon, s.color];
}
for (const s of k)
if (m(i.value, s.ext))
return [s.icon, s.color];
return [g.icon, g.color];
}), r = n(() => l.type ? l.type : m(i.value, v) ? "image" : m(i.value, y) ? "audio" : m(i.value, x) ? "video" : "file"), P = n(() => l.icon && typeof l.icon != "string" ? l.icon : N.value[0]), c = n(() => ({
size: typeof l.byte == "number" ? el(l.byte) : "",
icon: P.value,
name: l.name,
namePrefix: F.value,
nameSuffix: i.value,
src: l.src,
type: r.value
})), p = n(() => {
const e = l.description, s = typeof e == "function" ? e(c.value) : e;
return s === !1 ? null : s ?? c.value.size;
}), d = n(() => {
const e = l.mask, s = typeof e == "function" ? e(c.value) : e;
return s === !1 ? null : s;
}), w = (e) => {
var s;
l.onClick && ((s = l.onClick) == null || s.call(l, c.value, e), b("click", c.value, e));
}, T = n(() => t(a.value, f.value.className, l.className, l.class, l.rootClassName, l.classNames.root, S.value, z, {
[`${a.value}-rtl`]: h.value === "rtl"
}));
return () => {
const e = `${a.value}-file`;
let s = null;
return r.value === "image" ? s = o("div", {
class: t(`${a.value}-image`, l.classNames.file, {
[`${a.value}-loading`]: l.loading
}),
style: l.styles.file
}, [o(G, u({
rootClassName: t(`${a.value}-image-img`),
alt: l.name,
src: l.src
}, l.imageProps), null), l.loading && o(Z, {
prefixCls: a.value,
style: l.styles.file,
spinProps: l.spinProps
}, null)]) : r.value === "video" ? s = o("video", u({
src: l.src,
controls: !0,
style: l.styles.file,
class: t(`${a.value}-video`, l.classNames.file)
}, l.videoProps), null) : r.value === "audio" ? s = o("audio", u({
src: l.src,
controls: !0,
style: l.styles.file,
class: t(`${a.value}-audio`, l.classNames.file)
}, l.audioProps), null) : s = o("div", {
class: t(e, l.classNames.file, {
[`${e}-pointer`]: !!l.onClick,
[`${e}-small`]: l.size === "small"
}),
style: l.styles.file,
onClick: w
}, [o("div", {
class: t(`${e}-icon`, l.classNames.icon),
style: {
color: N.value[1],
...l.styles.icon
}
}, [P.value]), o("div", {
class: `${e}-content`
}, [o("div", {
class: t(`${e}-name`, l.classNames.name),
style: l.styles.name
}, [o("span", {
class: `${e}-name-prefix`
}, [F.value]), o("span", {
class: `${e}-name-suffix`
}, [i.value])]), p.value !== null && p.value !== void 0 && o("div", {
class: t(`${e}-description`, l.classNames.description),
style: l.styles.description
}, [p.value])]), d.value !== null && d.value !== void 0 && o("div", {
class: `${e}-mask`
}, [o("div", {
class: `${e}-mask-info`
}, [d.value])])]), j(o("div", u(_.value, {
class: T.value,
style: {
...typeof f.value.style == "object" ? f.value.style : {},
...typeof l.style == "object" ? l.style : {},
...l.styles.root
}
}), [s]));
};
}
});
export {
kl as default
};