vue-amazing-ui
Version:
An Amazing Vue3 UI Components Library, Using TypeScript.
304 lines (303 loc) • 13 kB
JavaScript
import { defineComponent as G, ref as m, computed as J, watchEffect as K, createElementBlock as g, openBlock as p, normalizeStyle as O, unref as h, createVNode as k, mergeProps as b, withCtx as Q, Fragment as X, renderList as Y, withDirectives as z, createCommentVNode as Z, createElementVNode as s, withModifiers as w, normalizeClass as x, renderSlot as ee, createTextVNode as le, toDisplayString as ae, vShow as M, createBlock as oe } from "vue";
import te from "../spin/index.js";
import se from "../message/index.js";
import ie from "../image/index.js";
import ne from "../space/index.js";
import { useInject as ue } from "../utils/index.js";
const re = ["onDrop", "onClick"], ce = ["accept", "multiple", "onChange"], de = { class: "upload-tip" }, fe = { class: "file-uploading" }, pe = {
key: 0,
class: "file-preview"
}, ve = {
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(P, { expose: U, emit: F }) {
const i = P, t = m([]), f = m(1), v = m([]), y = m(), R = m(), r = m(), { colorPalettes: B } = ue("Upload"), c = F, d = J(() => i.maxCount === void 0 ? 1 / 0 : i.maxCount);
K(() => {
H();
});
function H() {
t.value = [...i.fileList], t.value.length > d.value && t.value.splice(d.value), i.disabled ? f.value = t.value.length : t.value.length < d.value ? f.value = i.fileList.length + 1 : f.value = d.value;
}
function C(e) {
const a = /\.(jpg|jpeg|png|gif)$/i, l = /^data:image/;
return a.test(e) || l.test(e);
}
function V(e) {
const a = /\.pdf$/i, l = /^data:application\/pdf/;
return a.test(e) || l.test(e);
}
function q(e, a) {
var o;
const l = (o = e.dataTransfer) == null ? void 0 : o.files;
if (l != null && l.length) {
const n = l.length;
for (let u = 0; u < n && a + u <= d.value; u++)
L(l[u], a + u);
y.value[a].value = "";
}
c("drop", e);
}
function D(e) {
y.value[e].click();
}
function I(e, a) {
const l = e.target.files;
if (l != null && l.length) {
const o = l.length;
for (let n = 0; n < o && a + n < d.value; n++)
L(l[n], a + n);
y.value[a].value = "";
}
}
const L = async (e, a) => {
new Promise((o, n) => {
try {
const u = i.beforeUpload(e);
u instanceof Promise ? u.then(o, n) : typeof u == "boolean" ? u ? o(u) : n(new Error("Function returned false")) : o(u);
} catch (u) {
n(u);
}
}).then(() => {
d.value > f.value && f.value++, i.uploadMode === "base64" && (v.value[a] = !0, S(e, a)), i.uploadMode === "custom" && (v.value[a] = !0, $(e, a));
}).catch((o) => {
console.log("beforeUpload error:", o);
});
};
function S(e, a) {
var l = new FileReader();
l.readAsDataURL(e), l.onloadstart = function(o) {
}, l.onabort = function(o) {
}, l.onerror = function(o) {
}, l.onprogress = function(o) {
o.loaded === o.total && (v.value[a] = !1);
}, l.onload = function(o) {
var n;
t.value.push({
name: e.name,
url: (n = o.target) == null ? void 0 : n.result
}), i.actionMessage.upload && r.value.success(i.actionMessage.upload), c("update:fileList", t.value), c("change", t.value);
}, l.onloadend = function(o) {
};
}
function $(e, a) {
i.customRequest(e).then((l) => {
t.value.push(l), i.actionMessage.upload && r.value.success(i.actionMessage.upload), c("update:fileList", t.value), c("change", t.value);
}).catch((l) => {
d.value > 1 && (f.value = t.value.length + 1), r.value.error(l);
}).finally(() => {
v.value[a] = !1;
});
}
function E(e, a) {
if (C(a)) {
const l = t.value.slice(0, e).filter((o) => !C(o.url));
R.value[e - l.length].preview(0);
} else
window.open(a);
c("preview", t.value[e]);
}
function N(e) {
t.value.length < d.value && f.value--;
const a = t.value.splice(e, 1);
i.actionMessage.remove && r.value.success(i.actionMessage.remove), c("remove", a[0]), c("update:fileList", t.value), c("change", t.value);
}
function _(e) {
r.value.info(e);
}
function T(e) {
r.value.success(e);
}
function j(e) {
r.value.error(e);
}
function A(e) {
r.value.warning(e);
}
function W(e) {
r.value.loading(e);
}
return U({
info: _,
success: T,
error: j,
warning: A,
loading: W
}), (e, a) => (p(), g("div", {
class: "m-upload-wrap",
style: O(`--upload-primary-color: ${h(B)[5]};`)
}, [
k(h(ne), b({ gap: "small" }, e.spaceProps), {
default: Q(() => [
(p(!0), g(X, null, Y(f.value, (l) => (p(), g("div", {
class: "upload-item-panel",
key: l
}, [
z(s("div", {
class: x(["upload-item", { "upload-disabled": e.disabled }]),
onDragenter: a[1] || (a[1] = w(() => {
}, ["stop", "prevent"])),
onDragover: a[2] || (a[2] = w(() => {
}, ["stop", "prevent"])),
onDrop: w((o) => e.draggable && !e.disabled ? q(o, l - 1) : () => !1, ["stop", "prevent"]),
onClick: (o) => e.disabled ? () => !1 : D(l - 1)
}, [
s("input", {
ref_for: !0,
ref_key: "uploadInputRef",
ref: y,
type: "file",
onClick: a[0] || (a[0] = w(() => {
}, ["stop"])),
accept: e.accept,
multiple: e.multiple,
onChange: (o) => I(o, l - 1),
style: { display: "none" }
}, null, 40, ce),
s("div", null, [
a[3] || (a[3] = s("svg", {
focusable: "false",
class: "plus-svg",
"data-icon": "plus",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
s("defs"),
s("path", { d: "M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z" }),
s("path", { d: "M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z" })
], -1)),
s("p", de, [
ee(e.$slots, "tip", {}, () => [
le(ae(e.tip), 1)
], !0)
])
])
], 42, re), [
[M, !v.value[l - 1] && !t.value[l - 1]]
]),
z(s("div", fe, [
k(h(te), b({
class: "spin-uploading",
tip: "uploading",
size: "small",
indicator: "spin-line",
color: "var(--upload-primary-color)",
ref_for: !0
}, e.spinProps), null, 16)
], 512), [
[M, v.value[l - 1]]
]),
t.value[l - 1] ? (p(), g("div", pe, [
C(t.value[l - 1].url) ? (p(), oe(h(ie), b({
key: 0,
ref_for: !0,
ref_key: "imageRef",
ref: R,
style: { "--image-primary-color": "var(--upload-primary-color)" },
bordered: !1,
width: 82,
height: 82,
fit: e.fit,
src: t.value[l - 1].url,
name: t.value[l - 1].name
}, e.imageProps), null, 16, ["fit", "src", "name"])) : V(t.value[l - 1].url) ? (p(), g("svg", ve, a[4] || (a[4] = [
s("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(), g("svg", me, a[5] || (a[5] = [
s("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)
]))),
s("div", ge, [
s("a", {
class: "file-icon",
title: "预览",
onClick: (o) => E(l - 1, t.value[l - 1].url)
}, a[6] || (a[6] = [
s("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "eye",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
s("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),
z(s("a", {
class: "file-icon",
title: "删除",
onClick: w((o) => N(l - 1), ["prevent", "stop"])
}, a[7] || (a[7] = [
s("svg", {
class: "icon-svg",
focusable: "false",
"data-icon": "delete",
width: "1em",
height: "1em",
fill: "currentColor",
"aria-hidden": "true",
viewBox: "64 64 896 896"
}, [
s("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), [
[M, !e.disabled]
])
])
])) : Z("", !0)
]))), 128))
]),
_: 3
}, 16),
k(h(se), b({
ref_key: "messageRef",
ref: r
}, e.messageProps), null, 16)
], 4));
}
});
export {
Re as default
};