vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
226 lines (225 loc) • 8.27 kB
JavaScript
import { defineComponent as L, useTemplateRef as T, createElementBlock as l, openBlock as t, createCommentVNode as i, createVNode as d, Transition as F, withCtx as $, unref as s, withModifiers as u, normalizeClass as k, createElementVNode as a, toDisplayString as c, Fragment as y, renderList as B, createBlock as v, normalizeStyle as M } from "vue";
import { useUpload as O } from "./hook/useUpload.mjs";
import { Icon as r } from "@vuux/icons";
const P = { class: "app-upload" }, R = {
key: 0,
class: "upload-files"
}, j = ["disabled", "accept", "multiple"], q = { class: "upload-icon" }, A = { class: "upload-description" }, G = {
key: 0,
class: "upload-list"
}, H = { class: "item-icon" }, J = { class: "item-details" }, K = { class: "item-infos" }, Q = { key: 0 }, W = { class: "item-upload" }, X = {
key: 0,
class: "upload-bar"
}, Y = {
key: 1,
class: "is-error"
}, Z = {
key: 2,
class: "is-success"
}, ee = {
key: 3,
class: "is-ready"
}, se = {
key: 0,
class: "item-tip"
}, te = ["onClick"], le = {
key: 1,
class: "upload-images"
}, ie = ["disabled", "accept", "multiple"], oe = {
key: 0,
class: "upload-list"
}, ae = ["onClick"], ne = ["src"], re = {
key: 0,
class: "is-uploading"
}, de = { class: "circle-text" }, ye = /* @__PURE__ */ L({
name: "Upload",
__name: "index",
props: {
files: { default: () => [] },
accept: { default: "*" },
limit: { default: 1 / 0 },
maxSizeMb: {},
description: { default: "单击或拖动文件到此区域进行上传" },
multiple: { type: Boolean, default: !1 },
disabled: { type: Boolean, default: !1 },
action: {},
headers: {},
data: {},
name: { default: "file" },
type: { default: "files" },
beforeUpload: {}
},
emits: ["update:files", "change", "success", "delete", "error", "progress"],
setup(g, { emit: w }) {
const n = g, S = w, _ = T("fileInputEl"), { isDragging: N, isError: h, uploadFiles: p, isDisplay: b, handleImagePreview: U, onFileInput: C, handleDragOver: I, handleDragLeave: z, handleDrop: D, handleFileChange: f, removeFile: E, formatFileSize: V } = O(n, _, S);
return (ue, o) => (t(), l("div", P, [
n.type === "files" ? (t(), l("div", R, [
d(F, { name: "slide-up" }, {
default: $(() => [
s(b) ? (t(), l("div", {
key: 0,
class: k(["upload-file", [{ "is-dragging": s(N) }, { "is-disabled": n.disabled }]]),
onDragover: o[1] || (o[1] = u(
//@ts-ignore
(...e) => s(I) && s(I)(...e),
["prevent"]
)),
onDragleave: o[2] || (o[2] = u(
//@ts-ignore
(...e) => s(z) && s(z)(...e),
["prevent"]
)),
onDrop: o[3] || (o[3] = u(
//@ts-ignore
(...e) => s(D) && s(D)(...e),
["prevent"]
)),
onClick: o[4] || (o[4] = (e) => !n.disabled && s(C)())
}, [
a("input", {
ref_key: "fileInputEl",
ref: _,
type: "file",
disabled: n.disabled,
accept: n.accept,
multiple: n.multiple,
onChange: o[0] || (o[0] = //@ts-ignore
(...e) => s(f) && s(f)(...e))
}, null, 40, j),
a("div", q, [
d(s(r), {
name: "Icon3288405",
size: 22,
opacity: 0.8
})
]),
a("div", A, c(g.description), 1)
], 34)) : i("", !0)
]),
_: 1
}),
s(p).length > 0 ? (t(), l("ul", G, [
(t(!0), l(y, null, B(s(p), (e, m) => (t(), l(y, {
key: e.uid || m
}, [
e.url ? (t(), l("li", {
key: 0,
class: k(["list-item", { "is-error": e.status === "error" && s(h) }])
}, [
a("div", H, [
e.status === "uploading" ? (t(), v(s(r), {
key: 0,
name: "Icon1266918",
size: 20
})) : i("", !0),
e.status === "success" ? (t(), v(s(r), {
key: 1,
name: "Icon1722502",
size: 20,
color: "var(--app-success)"
})) : i("", !0),
e.status === "error" ? (t(), v(s(r), {
key: 2,
name: "Icon9176924",
size: 20,
color: "var(--app-danger)"
})) : i("", !0)
]),
a("div", J, [
a("div", K, [
a("p", null, c(e.name), 1),
e.size ? (t(), l("p", Q, c(s(V)(e.size)), 1)) : i("", !0)
]),
a("div", W, [
e.status === "uploading" ? (t(), l("div", X, [
a("div", {
class: "is-uploading",
style: M({ width: `${e.percent}%` })
}, null, 4)
])) : i("", !0),
e.status === "error" ? (t(), l("p", Y, "上传失败")) : i("", !0),
e.status === "success" ? (t(), l("p", Z, "上传成功")) : i("", !0),
e.status === "ready" ? (t(), l("p", ee, "默认文件")) : i("", !0)
]),
e.percent && e.status === "uploading" ? (t(), l("p", se, c(Math.round(e.percent)) + "%", 1)) : i("", !0)
]),
n.disabled ? i("", !0) : (t(), l("div", {
key: 0,
class: "item-remove",
onClick: u((x) => s(E)(e), ["stop"])
}, [
d(s(r), {
name: "Icon9176904",
size: 14,
opacity: 0.9
})
], 8, te))
], 2)) : i("", !0)
], 64))), 128))
])) : i("", !0)
])) : i("", !0),
n.type === "images" ? (t(), l("div", le, [
a("input", {
ref_key: "fileInputEl",
ref: _,
type: "file",
disabled: n.disabled,
accept: n.accept,
multiple: n.multiple,
onChange: o[5] || (o[5] = //@ts-ignore
(...e) => s(f) && s(f)(...e))
}, null, 40, ie),
s(p).length > 0 ? (t(), l("ul", oe, [
(t(!0), l(y, null, B(s(p), (e, m) => (t(), l(y, {
key: e.uid || m
}, [
e.url ? (t(), l("li", {
key: 0,
class: k(["images-item", { "is-error": e.status === "error" && s(h) }]),
onClick: u((x) => s(U)(e.url), ["stop"])
}, [
a("img", {
src: e.url
}, null, 8, ne),
o[8] || (o[8] = a("div", { class: "is-mask" }, null, -1)),
d(s(r), {
name: "Icon9176904",
class: "item-remove",
color: "rgba(255, 255, 255, 0.72)",
onClick: u((x) => s(E)(e), ["stop"])
}, null, 8, ["onClick"]),
e.percent && e.status === "uploading" ? (t(), l("div", re, [
a("div", {
class: "circle-progress",
style: M({ "--is-percent": Math.round(e.percent) })
}, [
o[7] || (o[7] = a("div", { class: "circle-mask" }, null, -1)),
a("div", de, c(Math.round(e.percent)) + "%", 1)
], 4)
])) : i("", !0)
], 10, ae)) : i("", !0)
], 64))), 128)),
d(F, { name: "slide-up" }, {
default: $(() => [
s(b) ? (t(), l("li", {
key: 0,
class: "images-item upload-but",
onClick: o[6] || (o[6] = (e) => !n.disabled && s(C)())
}, [
d(s(r), {
name: "Icon7406192",
class: "upload-icon",
size: 18
})
])) : i("", !0)
]),
_: 1
})
])) : i("", !0)
])) : i("", !0)
]));
}
});
export {
ye as default
};