@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
290 lines (289 loc) • 11.6 kB
JavaScript
import { defineComponent as G, toRef as j, computed as h, shallowReadonly as J, reactive as K, openBlock as n, createElementBlock as s, normalizeClass as t, unref as e, renderSlot as C, normalizeProps as f, guardReactiveProps as g, createVNode as r, withCtx as P, Fragment as L, createElementVNode as d, createBlock as T, mergeProps as w, toDisplayString as y, createCommentVNode as b, createTextVNode as M } from "vue";
import "../collapse-transition/index.mjs";
import "../icon/index.mjs";
import "../progress/index.mjs";
import "../renderer/index.mjs";
import { useProps as O, useNameHelper as Q, useLocale as X, useIcons as Y, emitEvent as z } from "@vexip-ui/config";
import { toFixed as Z } from "@vexip-ui/utils";
import { uploadFileProps as ee } from "./props.mjs";
import { useFileIcons as le } from "./file-icon.mjs";
import { uploadListTypes as ae, StatusType as te } from "./symbol.mjs";
import _ from "../renderer/renderer.mjs";
import m from "../icon/icon.mjs";
import I from "../progress/progress.vue2.mjs";
import ie from "../collapse/collapse-transition.mjs";
const ne = ["title"], se = ["aria-label"], oe = { style: { "margin-bottom": "0.3em" } }, re = ["src", "alt"], ce = ["disabled", "aria-label"], ue = ["aria-label"], Pe = /* @__PURE__ */ G({
name: "UploadFile",
__name: "upload-file",
props: ee,
setup(A) {
const N = /\.(webp|svg|png|gif|jpg|jpeg|jfif|bmp|dpg|ico)$/i, B = /^data:image\//;
function E(i) {
if (i.type)
return i.type.startsWith("image/");
const { name: o, url: c, base64: k } = i;
return !!(N.test(o) || c && (N.test(c) || B.test(c)) || k && B.test(k));
}
const l = O("uploadFile", A, {
locale: null,
file: {
default: () => ({}),
static: !0
},
iconRenderer: {
default: null,
isFunc: !0
},
listType: {
default: "name",
validator: (i) => ae.includes(i)
},
loadingText: null,
selectToAdd: !1,
precision: 2,
canPreview: {
default: E,
isFunc: !0
},
slots: () => ({})
}), a = Q("upload"), R = X("upload", j(l, "locale")), u = Y(), $ = le(u), D = h(() => typeof l.iconRenderer == "function"), F = h(() => l.file.path || l.file.name), p = h(() => l.file.status), x = h(() => Z(l.file.percentage, l.precision)), U = h(() => E(l.file) && (l.file.url || l.file.base64)), v = J(
K({
file: j(l, "file"),
status: p,
percentage: x
})
);
function H(i) {
return i.name.split(".").pop().toLocaleLowerCase();
}
function S(i, o = 1) {
const c = H(i), k = c && $.value[c] || $.value.default;
return { ...k, scale: +(k.scale || 1) * o };
}
function V(i) {
z(l.onDelete, i);
}
function W(i) {
z(l.onPreview, i);
}
function q(i) {
if (!i.source || !E(l.file)) return;
const o = new FileReader();
o.readAsDataURL(i.source), o.onload = () => {
var c;
i.status !== te.DELETE && (i.base64 = ((c = o.result) == null ? void 0 : c.toString()) ?? null);
};
}
return (i, o) => (n(), s("li", {
class: t([
e(a).be("file"),
e(a).bem("file", e(l).listType),
e(a).bem("file", p.value),
e(l).inherit && e(a).bem("file", "inherit")
]),
title: F.value,
tabindex: "-1"
}, [
C(i.$slots, "default", f(g(e(v))), () => [
r(e(_), {
renderer: e(l).slots.default,
data: e(v)
}, {
default: P(() => [
e(l).listType === "name" ? (n(), s(L, { key: 0 }, [
d("div", {
class: t(e(a).be("label"))
}, [
d("div", {
class: t([e(a).be("icon"), e(a).be("file-icon")])
}, [
C(i.$slots, "icon", f(g(e(v))), () => [
r(e(_), {
renderer: e(l).slots.icon,
data: e(v)
}, {
default: P(() => [
D.value ? (n(), T(e(_), {
key: 0,
renderer: e(l).iconRenderer,
data: { file: e(l).file }
}, null, 8, ["renderer", "data"])) : (n(), T(e(m), f(w({ key: 1 }, S(e(l).file))), null, 16))
]),
_: 1
}, 8, ["renderer", "data"])
])
], 2),
d("span", {
class: t(e(a).be("filename"))
}, y(F.value), 3)
], 2),
d("div", {
class: t(e(a).be("actions"))
}, [
p.value === "uploading" ? (n(), s("span", {
key: 0,
style: { "margin-inline-end": "0.5em" },
class: t(e(a).be("percentage"))
}, y(`${x.value}%`), 3)) : b("", !0),
p.value === "success" ? (n(), s("div", {
key: 1,
class: t([e(a).be("icon"), e(a).be("success")])
}, [
r(e(m), f(g(e(u).success)), null, 16)
], 2)) : p.value === "fail" ? (n(), s("div", {
key: 2,
class: t([e(a).be("icon"), e(a).be("fail")])
}, [
r(e(m), f(g(e(u).warning)), null, 16)
], 2)) : p.value === "uploading" ? (n(), s("div", {
key: 3,
class: t([e(a).be("icon"), e(a).be("loading")])
}, [
r(e(m), f(g(e(u).loading)), null, 16)
], 2)) : b("", !0),
d("button", {
type: "button",
class: t([e(a).be("icon"), e(a).be("close")]),
"aria-label": e(R).ariaLabel.delete,
onClick: o[0] || (o[0] = (c) => V(e(l).file))
}, [
r(e(m), f(g(e(u).delete)), null, 16)
], 10, se)
], 2),
p.value === "uploading" ? (n(), s("div", {
key: 0,
class: t(e(a).be("progress"))
}, [
r(e(I), {
inherit: "",
"info-type": "none",
"stroke-width": 2,
percentage: e(l).file.percentage,
precision: e(l).precision
}, null, 8, ["percentage", "precision"])
], 2)) : b("", !0)
], 64)) : e(l).listType === "thumbnail" || e(l).listType === "card" ? (n(), s("div", {
key: 1,
class: t(e(a).be("card"))
}, [
d("div", {
class: t(e(a).be("thumbnail"))
}, [
p.value === "uploading" ? (n(), s(L, { key: 0 }, [
e(l).listType === "thumbnail" ? (n(), s("div", {
key: 0,
class: t(e(a).be("progress"))
}, [
d("span", oe, y(e(l).loadingText ?? e(R).uploading), 1),
r(e(I), {
inherit: "",
"info-type": "none",
"stroke-width": 2,
percentage: e(l).file.percentage,
precision: e(l).precision
}, null, 8, ["percentage", "precision"]),
d("span", {
style: { "margin-top": "3px" },
class: t(e(a).be("percentage"))
}, y(`${x.value}%`), 3)
], 2)) : (n(), T(e(m), w({ key: 1 }, e(u).loading, {
scale: +(e(u).loading.scale || 1) * 1.8,
label: "loading"
}), null, 16, ["scale"]))
], 64)) : U.value ? (n(), s("img", {
key: 1,
class: t(e(a).be("image")),
src: e(l).file.url || e(l).file.base64 || "",
alt: F.value
}, null, 10, re)) : (n(), s(L, { key: 2 }, [
M(y(q(e(l).file)) + " ", 1),
C(i.$slots, "icon", f(g(e(v))), () => [
r(e(_), {
renderer: e(l).slots.icon,
data: e(v)
}, {
default: P(() => [
D.value ? (n(), T(e(_), {
key: 0,
renderer: e(l).iconRenderer,
data: { file: e(l).file }
}, null, 8, ["renderer", "data"])) : (n(), T(e(m), f(w({ key: 1 }, S(e(l).file, 2.8))), null, 16))
]),
_: 1
}, 8, ["renderer", "data"])
])
], 64))
], 2),
e(l).listType === "card" ? (n(), s("div", {
key: 0,
class: t(e(a).be("info"))
}, [
d("span", {
class: t(e(a).be("filename"))
}, y(F.value), 3),
r(e(ie), null, {
default: P(() => [
p.value === "uploading" ? (n(), s("div", {
key: 0,
class: t(e(a).be("progress"))
}, [
r(e(I), {
inherit: "",
"info-type": "none",
"stroke-width": 4,
percentage: e(l).file.percentage,
precision: e(l).precision
}, null, 8, ["percentage", "precision"])
], 2)) : b("", !0)
]),
_: 1
})
], 2)) : b("", !0),
e(l).listType === "card" || p.value !== "uploading" ? (n(), s("div", {
key: 1,
class: t(e(a).be("actions"))
}, [
e(l).listType === "thumbnail" ? (n(), s("div", {
key: 0,
class: t(e(a).be("mask"))
}, null, 2)) : b("", !0),
d("button", {
type: "button",
class: t([
e(a).be("icon"),
e(a).be("action"),
{
[e(a).bem("action", "disabled")]: !e(l).canPreview(e(l).file)
}
]),
disabled: !e(l).canPreview(e(l).file),
"aria-label": e(R).ariaLabel.preview,
onClick: o[1] || (o[1] = (c) => W(e(l).file))
}, [
r(e(m), w(e(u).preview, {
scale: +(e(u).preview.scale || 1) * 1.4
}), null, 16, ["scale"])
], 10, ce),
d("button", {
type: "button",
class: t([e(a).be("icon"), e(a).be("action")]),
"aria-label": e(R).ariaLabel.delete,
onClick: o[2] || (o[2] = (c) => V(e(l).file))
}, [
r(e(m), w(e(u).delete, {
scale: +(e(u).delete.scale || 1) * 1.4
}), null, 16, ["scale"])
], 10, ue)
], 2)) : b("", !0)
], 2)) : b("", !0)
]),
_: 3
}, 8, ["renderer", "data"])
])
], 10, ne));
}
});
export {
Pe as default
};
//# sourceMappingURL=upload-file.vue2.mjs.map