@opensig/opendesign
Version:
<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>
246 lines (245 loc) • 10.4 kB
JavaScript
;
const vue = require("vue");
const icons = require("../_utils/icons.js");
const index$2 = require("../icon/index.js");
const index$1 = require("../figure/index.js");
const slot = require("./slot.js");
const index = require("../locale/index.js");
const _hoisted_1 = { class: "o-upload-card-item-wrap" };
const _hoisted_2 = { class: "o-upload-card-file" };
const _hoisted_3 = {
key: 0,
class: "o-upload-progress o-upload-card-progress"
};
const _hoisted_4 = {
key: 0,
class: "o-upload-icon-link"
};
const _hoisted_5 = { class: "o-upload-row-label" };
const _hoisted_6 = { class: "o-upload-row-icons" };
const _hoisted_7 = {
key: 1,
class: "o-upload-progress o-upload-row-progress"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "UploadItem",
props: {
file: {},
listType: {}
},
emits: ["replace", "remove", "retry"],
setup(__props, { emit: __emit }) {
const props = __props;
const emits = __emit;
const { t } = index.useI18n();
const onFileRemove = (file) => {
emits("remove", file);
};
const onFileUploadRetry = (file) => {
emits("retry", file);
};
const showLoading = (file) => {
if (file.status !== "uploading") {
return false;
}
if (!file.percent && file.percent !== 0) {
return true;
}
return false;
};
const onFileReplace = (file) => {
emits("replace", file);
};
const figureRef = vue.ref(null);
const onPreview = () => {
var _a;
(_a = figureRef.value) == null ? void 0 : _a.preview();
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(
"div",
{
class: vue.normalizeClass(["o-upload-item", {
"o-upload-item-error": props.file.status === "failed"
}])
},
[
vue.renderSlot(_ctx.$slots, vue.unref(slot).names.uploadItem, { item: _ctx.file }, () => [
props.listType === "picture-card" ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 0,
class: vue.normalizeClass(["o-upload-card-item", {
"is-error": props.file.status === "failed"
}])
},
[
vue.createElementVNode("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
props.file.imgUrl ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.OFigure), {
key: 0,
ref_key: "figureRef",
ref: figureRef,
"lazy-preiew": "",
class: "o-upload-thumbnail",
src: props.file.imgUrl
}, null, 8, ["src"])) : (vue.openBlock(), vue.createBlock(vue.unref(icons.IconFile), {
key: 1,
class: "o-upload-icon-file"
}))
]),
vue.createElementVNode(
"div",
{
class: vue.normalizeClass(["o-upload-card-icons", {
"is-show": showLoading(props.file)
}])
},
[
props.file.retry ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.OIcon), {
key: 0,
button: "",
class: "o-upload-icon-btn o-upload-icon-retry",
icon: vue.unref(icons.IconRefresh),
onClick: _cache[0] || (_cache[0] = ($event) => onFileUploadRetry(props.file)),
title: vue.unref(t)("upload.retry")
}, null, 8, ["icon", "title"])) : vue.createCommentVNode("v-if", true),
props.file.status !== "failed" && props.file.imgUrl ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.OIcon), {
key: 1,
button: "",
icon: vue.unref(icons.IconPreview),
class: "o-upload-icon-btn o-upload-icon-preview",
onClick: onPreview,
title: vue.unref(t)("upload.preview")
}, null, 8, ["icon", "title"])) : vue.createCommentVNode("v-if", true),
showLoading(props.file) ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.OIcon), {
key: 2,
class: "o-upload-icon-loading"
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(icons.IconLoading), { class: "o-rotating" })
]),
_: 1
/* STABLE */
})) : vue.createCommentVNode("v-if", true),
props.file.status === "finished" ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.OIcon), {
key: 3,
button: "",
icon: vue.unref(icons.IconEdit),
class: "o-upload-icon-btn o-upload-icon-edit",
onClick: _cache[1] || (_cache[1] = ($event) => onFileReplace(props.file)),
title: vue.unref(t)("upload.edit")
}, null, 8, ["icon", "title"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(index$2.OIcon), {
button: "",
class: "o-upload-icon-btn o-upload-icon-remove",
icon: vue.unref(icons.IconDelete),
onClick: _cache[2] || (_cache[2] = ($event) => onFileRemove(props.file)),
title: vue.unref(t)("upload.delete")
}, null, 8, ["icon", "title"])
],
2
/* CLASS */
),
props.file.status === "uploading" && props.file.percent ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
vue.createElementVNode(
"div",
{
class: "o-upload-progress-bar",
style: vue.normalizeStyle({ width: props.file.percent + "%" })
},
null,
4
/* STYLE */
)
])) : vue.createCommentVNode("v-if", true)
])
],
2
/* CLASS */
)) : (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 1,
class: vue.normalizeClass(["o-upload-row-item", {
"is-error": props.file.status === "failed"
}])
},
[
props.file.icon !== false ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
props.file.icon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.file.icon), { key: 0 })) : (vue.openBlock(), vue.createBlock(vue.unref(icons.IconLinkPrefix), { key: 1 }))
])) : vue.createCommentVNode("v-if", true),
vue.createElementVNode(
"div",
_hoisted_5,
vue.toDisplayString(props.file.name),
1
/* TEXT */
),
vue.createElementVNode("div", _hoisted_6, [
showLoading(props.file) ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.OIcon), {
key: 0,
class: "o-upload-icon-loading"
}, {
default: vue.withCtx(() => [
vue.createVNode(vue.unref(icons.IconLoading), { class: "o-rotating" })
]),
_: 1
/* STABLE */
})) : vue.createCommentVNode("v-if", true),
props.file.retry ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.OIcon), {
key: 1,
button: "",
class: "o-upload-row-icon o-upload-icon-hover-in o-upload-icon-retry",
icon: vue.unref(icons.IconRefresh),
onClick: _cache[3] || (_cache[3] = ($event) => onFileUploadRetry(props.file)),
title: vue.unref(t)("upload.retry")
}, null, 8, ["icon", "title"])) : vue.createCommentVNode("v-if", true),
vue.createVNode(vue.unref(index$2.OIcon), {
button: "",
class: "o-upload-row-icon o-upload-icon-remove o-upload-icon-hover-in",
icon: vue.unref(icons.IconDelete),
onClick: _cache[4] || (_cache[4] = ($event) => onFileRemove(props.file)),
title: vue.unref(t)("upload.delete")
}, null, 8, ["icon", "title"])
]),
props.file.status === "uploading" && props.file.percent ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
vue.createElementVNode(
"div",
{
class: "o-upload-progress-bar",
style: vue.normalizeStyle({ width: props.file.percent + "%" })
},
null,
4
/* STYLE */
)
])) : vue.createCommentVNode("v-if", true)
],
2
/* CLASS */
)),
props.file.message ? (vue.openBlock(), vue.createElementBlock(
"div",
{
key: 2,
class: vue.normalizeClass(["o-upload-item-tip", [
{
"is-error": props.file.status === "failed"
},
props.file.messageClass
]])
},
vue.toDisplayString(props.file.message),
3
/* TEXT, CLASS */
)) : vue.createCommentVNode("v-if", true)
])
],
2
/* CLASS */
);
};
}
});
module.exports = _sfc_main;