vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
304 lines (303 loc) • 12.9 kB
JavaScript
import { defineComponent as G, ref as h, computed as J, watchEffect as K, createElementBlock as m, openBlock as p, normalizeStyle as O, unref as w, createVNode as z, mergeProps as C, withCtx as Q, Fragment as X, renderList as Y, withDirectives as L, createCommentVNode as Z, createElementVNode as i, withModifiers as y, normalizeClass as _, renderSlot as ee, createTextVNode as le, toDisplayString as ae, vShow as P, createBlock as te } from "vue";
import oe from "../spin/index.js";
import ie from "../message/index.js";
import ne from "../image/index.js";
import se from "../space/index.js";
import { useInject as ue } from "../utils/index.js";
const re = ["onDrop", "onClick"], ce = ["accept", "multiple", "onChange"], fe = { class: "upload-tip" }, de = {
key: 0,
class: "file-uploading"
}, ve = {
key: 1,
class: "file-preview"
}, pe = {
key: 1,
class: "file-svg",
focusable: "false",
"data-icon": "file-pdf",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, me = {
key: 2,
class: "file-svg",
focusable: "false",
"data-icon": "file",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, ge = { class: "file-mask" }, he = ["onClick"], we = ["onClick"], Re = /* @__PURE__ */ G({
__name: "Upload",
props: {
accept: { default: "*" },
multiple: { type: Boolean, default: !1 },
maxCount: { default: void 0 },
tip: { default: "Upload" },
fit: { default: "contain" },
draggable: { type: Boolean, default: !0 },
disabled: { type: Boolean, default: !1 },
spaceProps: { default: () => ({}) },
spinProps: { default: () => ({}) },
imageProps: { default: () => ({}) },
messageProps: { default: () => ({}) },
actionMessage: { default: () => ({ upload: "上传成功", remove: "删除成功" }) },
beforeUpload: { type: Function, default: () => !0 },
uploadMode: { default: "base64" },
customRequest: { type: Function, default: () => {
} },
fileList: { default: () => [] }
},
emits: ["update:fileList", "drop", "change", "preview", "remove"],
setup(u, { expose: U, emit: F }) {
const n = u, o = h([]), d = h(1), g = h([]), b = h(), M = h(), r = h(), { colorPalettes: B } = ue("Upload"), c = F, f = J(() => n.maxCount === void 0 ? 1 / 0 : n.maxCount);
K(() => {
H();
});
function H() {
o.value = [...n.fileList], o.value.length > f.value && o.value.splice(f.value), n.disabled ? d.value = o.value.length : o.value.length < f.value ? d.value = n.fileList.length + 1 : d.value = f.value;
}
function k(a) {
const e = /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i, l = /^data:image/;
return e.test(a) || l.test(a);
}
function V(a) {
const e = /\.pdf$/i, l = /^data:application\/pdf/;
return e.test(a) || l.test(a);
}
function q(a, e) {
const l = a.dataTransfer?.files;
if (l?.length) {
const t = l.length;
for (let s = 0; s < t && e + s <= f.value; s++)
R(l[s], e + s);
b.value[e].value = null;
}
c("drop", a);
}
function D(a) {
b.value[a].click();
}
function I(a, e) {
const l = a.target.files;
if (l?.length) {
const t = l.length;
for (let s = 0; s < t && e + s < f.value; s++)
R(l[s], e + s);
b.value[e].value = null;
}
}
function R(a, e) {
function l() {
return new Promise((t, s) => {
try {
const v = n.beforeUpload(a);
v instanceof Promise ? v.then(t, s) : typeof v == "boolean" ? v ? t(v) : s(new Error("Function returned false")) : t(v);
} catch (v) {
s(v);
}
});
}
l().then(() => {
f.value > d.value && d.value++, n.uploadMode === "base64" && (g.value[e] = !0, S(a, e)), n.uploadMode === "custom" && (g.value[e] = !0, $(a, e));
}).catch((t) => {
console.warn("beforeUpload error:", t);
});
}
function S(a, e) {
const l = new FileReader();
l.readAsDataURL(a), l.onloadstart = function(t) {
}, l.onabort = function(t) {
}, l.onerror = function(t) {
}, l.onprogress = function(t) {
t.loaded === t.total && (g.value[e] = !1);
}, l.onload = function(t) {
o.value[e] = {
name: a.name,
url: t.target?.result
}, n.actionMessage.upload && r.value.success(n.actionMessage.upload), c("update:fileList", o.value), c("change", o.value);
}, l.onloadend = function(t) {
};
}
function $(a, e) {
n.customRequest(a).then((l) => {
o.value[e] = l, n.actionMessage.upload && r.value.success(n.actionMessage.upload), c("update:fileList", o.value), c("change", o.value);
}).catch((l) => {
f.value > 1 && (d.value = o.value.length + 1), r.value.error(l);
}).finally(() => {
g.value[e] = !1;
});
}
function E(a, e) {
if (k(e)) {
const l = o.value.slice(0, a).filter((t) => !k(t.url));
M.value[a - l.length].preview(0);
} else
window.open(e);
c("preview", o.value[a]);
}
function N(a) {
o.value.length < f.value && d.value--;
const e = o.value.splice(a, 1);
n.actionMessage.remove && r.value.success(n.actionMessage.remove), c("remove", e[0]), c("update:fileList", o.value), c("change", o.value);
}
function x(a) {
r.value.info(a);
}
function T(a) {
r.value.success(a);
}
function j(a) {
r.value.error(a);
}
function A(a) {
r.value.warning(a);
}
function W(a) {
r.value.loading(a);
}
return U({
info: x,
success: T,
error: j,
warning: A,
loading: W
}), (a, e) => (p(), m("div", {
class: "upload-wrap",
style: O(`--upload-primary-color: ${w(B)[5]};`)
}, [
z(w(se), C({ gap: "small" }, u.spaceProps), {
default: Q(() => [
(p(!0), m(X, null, Y(d.value, (l) => (p(), m("div", {
class: "upload-item-panel",
key: l
}, [
L(i("div", {
class: _(["upload-item", { "upload-disabled": u.disabled }]),
onDragenter: e[1] || (e[1] = y(() => {
}, ["stop", "prevent"])),
onDragover: e[2] || (e[2] = y(() => {
}, ["stop", "prevent"])),
onDrop: y((t) => u.draggable && !u.disabled ? q(t, l - 1) : () => !1, ["stop", "prevent"]),
onClick: (t) => u.disabled ? () => !1 : D(l - 1)
}, [
i("input", {
ref_for: !0,
ref_key: "uploadInputRef",
ref: b,
type: "file",
onClick: e[0] || (e[0] = y(() => {
}, ["stop"])),
accept: u.accept,
multiple: u.multiple,
onChange: (t) => I(t, l - 1),
style: { display: "none" }
}, null, 40, ce),
i("div", null, [
e[3] || (e[3] = i("svg", {
focusable: "false",
class: "plus-svg",
"data-icon": "plus",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
i("defs"),
i("path", { d: "M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" }),
i("path", { d: "M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" })
], -1)),
i("p", fe, [
ee(a.$slots, "tip", {}, () => [
le(ae(u.tip), 1)
], !0)
])
])
], 42, re), [
[P, !g.value[l - 1] && !o.value[l - 1]]
]),
g.value[l - 1] ? (p(), m("div", de, [
z(w(oe), C({
class: "spin-uploading",
tip: "uploading",
size: "small",
indicator: "spin-line",
color: "var(--upload-primary-color)"
}, { ref_for: !0 }, u.spinProps), null, 16)
])) : o.value[l - 1] ? (p(), m("div", ve, [
k(o.value[l - 1].url) ? (p(), te(w(ne), C({
key: 0,
ref_for: !0,
ref_key: "imageRef",
ref: M,
style: { "--image-primary-color": "var(--upload-primary-color)" },
bordered: !1,
width: 82,
height: 82,
fit: u.fit,
src: o.value[l - 1].url,
name: o.value[l - 1].name
}, { ref_for: !0 }, u.imageProps), null, 16, ["fit", "src", "name"])) : V(o.value[l - 1].url) ? (p(), m("svg", pe, [...e[4] || (e[4] = [
i("path", { d: "M531.3 574.4l.3-1.4c5.8-23.9 13.1-53.7 7.4-80.7-3.8-21.3-19.5-29.6-32.9-30.2-15.8-.7-29.9 8.3-33.4 21.4-6.6 24-.7 56.8 10.1 98.6-13.6 32.4-35.3 79.5-51.2 107.5-29.6 15.3-69.3 38.9-75.2 68.7-1.2 5.5.2 12.5 3.5 18.8 3.7 7 9.6 12.4 16.5 15 3 1.1 6.6 2 10.8 2 17.6 0 46.1-14.2 84.1-79.4 5.8-1.9 11.8-3.9 17.6-5.9 27.2-9.2 55.4-18.8 80.9-23.1 28.2 15.1 60.3 24.8 82.1 24.8 21.6 0 30.1-12.8 33.3-20.5 5.6-13.5 2.9-30.5-6.2-39.6-13.2-13-45.3-16.4-95.3-10.2-24.6-15-40.7-35.4-52.4-65.8zM421.6 726.3c-13.9 20.2-24.4 30.3-30.1 34.7 6.7-12.3 19.8-25.3 30.1-34.7zm87.6-235.5c5.2 8.9 4.5 35.8.5 49.4-4.9-19.9-5.6-48.1-2.7-51.4.8.1 1.5.7 2.2 2zm-1.6 120.5c10.7 18.5 24.2 34.4 39.1 46.2-21.6 4.9-41.3 13-58.9 20.2-4.2 1.7-8.3 3.4-12.3 5 13.3-24.1 24.4-51.4 32.1-71.4zm155.6 65.5c.1.2.2.5-.4.9h-.2l-.2.3c-.8.5-9 5.3-44.3-8.6 40.6-1.9 45 7.3 45.1 7.4zm191.4-388.2L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z" }, null, -1)
])])) : (p(), m("svg", me, [...e[5] || (e[5] = [
i("path", { d: "M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z" }, null, -1)
])])),
i("div", ge, [
i("a", {
class: "file-icon",
title: "预览",
onClick: (t) => E(l - 1, o.value[l - 1].url)
}, [...e[6] || (e[6] = [
i("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "eye",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
i("path", { d: "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" })
], -1)
])], 8, he),
L(i("a", {
class: "file-icon",
title: "删除",
onClick: y((t) => N(l - 1), ["prevent", "stop"])
}, [...e[7] || (e[7] = [
i("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "delete",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
i("path", { d: "M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z" })
], -1)
])], 8, we), [
[P, !u.disabled]
])
])
])) : Z("", !0)
]))), 128))
]),
_: 3
}, 16),
z(w(ie), C({
ref_key: "messageRef",
ref: r
}, u.messageProps), null, 16)
], 4));
}
});
export {
Re as default
};