@opensig/opendesign/es/upload/UploadItem.vue.mjs

<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>

import { defineComponent, ref, createElementBlock, openBlock, normalizeClass, renderSlot, unref, createCommentVNode, createElementVNode, createBlock, createVNode, withCtx, normalizeStyle, resolveDynamicComponent, toDisplayString } from "vue";
import { IconFile, IconRefresh, IconPreview, IconLoading, IconEdit, IconDelete, IconLinkPrefix } from "../_utils/icons.mjs";
import { OIcon } from "../icon/index.mjs";
import { OFigure } from "../figure/index.mjs";
import slot from "./slot.mjs";
import { useI18n } from "../locale/index.mjs";
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__ */ defineComponent({
  __name: "UploadItem",
  props: {
    file: {},
    listType: {}
  },
  emits: ["replace", "remove", "retry"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const { t } = 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 = ref(null);
    const onPreview = () => {
      var _a;
      (_a = figureRef.value) == null ? void 0 : _a.preview();
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock(
        "div",
        {
          class: normalizeClass(["o-upload-item", {
            "o-upload-item-error": props.file.status === "failed"
          }])
        },
        [
          renderSlot(_ctx.$slots, unref(slot).names.uploadItem, { item: _ctx.file }, () => [
            props.listType === "picture-card" ? (openBlock(), createElementBlock(
              "div",
              {
                key: 0,
                class: normalizeClass(["o-upload-card-item", {
                  "is-error": props.file.status === "failed"
                }])
              },
              [
                createElementVNode("div", _hoisted_1, [
                  createElementVNode("div", _hoisted_2, [
                    props.file.imgUrl ? (openBlock(), createBlock(unref(OFigure), {
                      key: 0,
                      ref_key: "figureRef",
                      ref: figureRef,
                      "lazy-preiew": "",
                      class: "o-upload-thumbnail",
                      src: props.file.imgUrl
                    }, null, 8, ["src"])) : (openBlock(), createBlock(unref(IconFile), {
                      key: 1,
                      class: "o-upload-icon-file"
                    }))
                  ]),
                  createElementVNode(
                    "div",
                    {
                      class: normalizeClass(["o-upload-card-icons", {
                        "is-show": showLoading(props.file)
                      }])
                    },
                    [
                      props.file.retry ? (openBlock(), createBlock(unref(OIcon), {
                        key: 0,
                        button: "",
                        class: "o-upload-icon-btn o-upload-icon-retry",
                        icon: unref(IconRefresh),
                        onClick: _cache[0] || (_cache[0] = ($event) => onFileUploadRetry(props.file)),
                        title: unref(t)("upload.retry")
                      }, null, 8, ["icon", "title"])) : createCommentVNode("v-if", true),
                      props.file.status !== "failed" && props.file.imgUrl ? (openBlock(), createBlock(unref(OIcon), {
                        key: 1,
                        button: "",
                        icon: unref(IconPreview),
                        class: "o-upload-icon-btn o-upload-icon-preview",
                        onClick: onPreview,
                        title: unref(t)("upload.preview")
                      }, null, 8, ["icon", "title"])) : createCommentVNode("v-if", true),
                      showLoading(props.file) ? (openBlock(), createBlock(unref(OIcon), {
                        key: 2,
                        class: "o-upload-icon-loading"
                      }, {
                        default: withCtx(() => [
                          createVNode(unref(IconLoading), { class: "o-rotating" })
                        ]),
                        _: 1
                        /* STABLE */
                      })) : createCommentVNode("v-if", true),
                      props.file.status === "finished" ? (openBlock(), createBlock(unref(OIcon), {
                        key: 3,
                        button: "",
                        icon: unref(IconEdit),
                        class: "o-upload-icon-btn o-upload-icon-edit",
                        onClick: _cache[1] || (_cache[1] = ($event) => onFileReplace(props.file)),
                        title: unref(t)("upload.edit")
                      }, null, 8, ["icon", "title"])) : createCommentVNode("v-if", true),
                      createVNode(unref(OIcon), {
                        button: "",
                        class: "o-upload-icon-btn o-upload-icon-remove",
                        icon: unref(IconDelete),
                        onClick: _cache[2] || (_cache[2] = ($event) => onFileRemove(props.file)),
                        title: unref(t)("upload.delete")
                      }, null, 8, ["icon", "title"])
                    ],
                    2
                    /* CLASS */
                  ),
                  props.file.status === "uploading" && props.file.percent ? (openBlock(), createElementBlock("div", _hoisted_3, [
                    createElementVNode(
                      "div",
                      {
                        class: "o-upload-progress-bar",
                        style: normalizeStyle({ width: props.file.percent + "%" })
                      },
                      null,
                      4
                      /* STYLE */
                    )
                  ])) : createCommentVNode("v-if", true)
                ])
              ],
              2
              /* CLASS */
            )) : (openBlock(), createElementBlock(
              "div",
              {
                key: 1,
                class: normalizeClass(["o-upload-row-item", {
                  "is-error": props.file.status === "failed"
                }])
              },
              [
                props.file.icon !== false ? (openBlock(), createElementBlock("div", _hoisted_4, [
                  props.file.icon ? (openBlock(), createBlock(resolveDynamicComponent(props.file.icon), { key: 0 })) : (openBlock(), createBlock(unref(IconLinkPrefix), { key: 1 }))
                ])) : createCommentVNode("v-if", true),
                createElementVNode(
                  "div",
                  _hoisted_5,
                  toDisplayString(props.file.name),
                  1
                  /* TEXT */
                ),
                createElementVNode("div", _hoisted_6, [
                  showLoading(props.file) ? (openBlock(), createBlock(unref(OIcon), {
                    key: 0,
                    class: "o-upload-icon-loading"
                  }, {
                    default: withCtx(() => [
                      createVNode(unref(IconLoading), { class: "o-rotating" })
                    ]),
                    _: 1
                    /* STABLE */
                  })) : createCommentVNode("v-if", true),
                  props.file.retry ? (openBlock(), createBlock(unref(OIcon), {
                    key: 1,
                    button: "",
                    class: "o-upload-row-icon o-upload-icon-hover-in o-upload-icon-retry",
                    icon: unref(IconRefresh),
                    onClick: _cache[3] || (_cache[3] = ($event) => onFileUploadRetry(props.file)),
                    title: unref(t)("upload.retry")
                  }, null, 8, ["icon", "title"])) : createCommentVNode("v-if", true),
                  createVNode(unref(OIcon), {
                    button: "",
                    class: "o-upload-row-icon o-upload-icon-remove o-upload-icon-hover-in",
                    icon: unref(IconDelete),
                    onClick: _cache[4] || (_cache[4] = ($event) => onFileRemove(props.file)),
                    title: unref(t)("upload.delete")
                  }, null, 8, ["icon", "title"])
                ]),
                props.file.status === "uploading" && props.file.percent ? (openBlock(), createElementBlock("div", _hoisted_7, [
                  createElementVNode(
                    "div",
                    {
                      class: "o-upload-progress-bar",
                      style: normalizeStyle({ width: props.file.percent + "%" })
                    },
                    null,
                    4
                    /* STYLE */
                  )
                ])) : createCommentVNode("v-if", true)
              ],
              2
              /* CLASS */
            )),
            props.file.message ? (openBlock(), createElementBlock(
              "div",
              {
                key: 2,
                class: normalizeClass(["o-upload-item-tip", [
                  {
                    "is-error": props.file.status === "failed"
                  },
                  props.file.messageClass
                ]])
              },
              toDisplayString(props.file.message),
              3
              /* TEXT, CLASS */
            )) : createCommentVNode("v-if", true)
          ])
        ],
        2
        /* CLASS */
      );
    };
  }
});
export {
  _sfc_main as default
};