@opensig/opendesign/lib/upload/UploadItem.vue.js

"use strict";
const vue = require("vue");
const icons = require("../_utils/icons.js");
const index$2 = require("../icon/index2.js");
const index$1 = require("../figure/index.js");
const index$3 = require("../button/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 = { class: "o-upload-card-icons" };
const _hoisted_4 = {
  key: 0,
  class: "o-upload-status-wrap"
};
const _hoisted_5 = { class: "o-upload-status-info" };
const _hoisted_6 = {
  key: 0,
  class: "o-upload-status-wrap o-upload-status-wrap-error"
};
const _hoisted_7 = { class: "o-upload-status-upper-layer" };
const _hoisted_8 = { class: "o-upload-status-info" };
const _hoisted_9 = { class: "o-upload-status-lower-layer" };
const _hoisted_10 = {
  key: 1,
  class: "o-upload-status-wrap o-upload-status-wrap-success"
};
const _hoisted_11 = {
  key: 0,
  class: "o-upload-progress o-upload-card-progress"
};
const _hoisted_12 = {
  key: 1,
  class: "o-upload-icon-link"
};
const _hoisted_13 = { class: "o-upload-row-label" };
const _hoisted_14 = { class: "o-upload-row-icons" };
const _hoisted_15 = {
  key: 2,
  class: "o-upload-progress o-upload-row-progress"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "UploadItem",
  props: {
    file: {},
    listType: {},
    showProgress: {},
    draggable: { type: Boolean }
  },
  emits: ["replace", "remove", "retry", "preview", "itemClick", "download"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const { t } = index.useI18n();
    const onFileRemove = (e) => {
      e.stopPropagation();
      emits("remove", props.file, e);
    };
    const onFileUploadRetry = (e) => {
      e.stopPropagation();
      emits("retry", props.file, e);
    };
    const showLoading = () => {
      if (props.file.status !== "uploading") {
        return false;
      }
      if (!props.showProgress) {
        return true;
      }
      if (!props.file.percent && props.file.percent !== 0) {
        return true;
      }
      return false;
    };
    const figureRef = vue.useTemplateRef("figureRef");
    const figurePreview = () => {
      var _a;
      (_a = figureRef.value) == null ? void 0 : _a.preview();
    };
    const onPreview = (e) => {
      e.stopPropagation();
      figurePreview();
      emits("preview", props.file, e);
    };
    const onItemClick = (e) => {
      emits("itemClick", props.file, e);
    };
    const onFileDownload = (e) => {
      e.stopPropagation();
      emits("download", props.file, e);
    };
    __expose({
      preview: figurePreview
    });
    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: __props.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"
                }]),
                onClick: onItemClick
              },
              [
                vue.createElementVNode("div", _hoisted_1, [
                  vue.createElementVNode("div", _hoisted_2, [
                    props.file.status === "finished" ? (vue.openBlock(), vue.createElementBlock(
                      vue.Fragment,
                      { key: 0 },
                      [
                        props.file.imgUrl ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.OFigure), {
                          key: 0,
                          ref_key: "figureRef",
                          ref: figureRef,
                          "lazy-preview": "",
                          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"
                        }))
                      ],
                      64
                      /* STABLE_FRAGMENT */
                    )) : vue.createCommentVNode("v-if", true)
                  ]),
                  vue.createElementVNode("div", _hoisted_3, [
                    showLoading() ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
                      vue.createVNode(vue.unref(index$2.OIcon), { class: "o-upload-status-icon" }, {
                        default: vue.withCtx(() => [
                          vue.createVNode(vue.unref(icons.IconLoading), { class: "o-rotating" })
                        ]),
                        _: 1
                        /* STABLE */
                      }),
                      vue.createElementVNode(
                        "div",
                        _hoisted_5,
                        vue.toDisplayString(vue.unref(t)("upload.loading")),
                        1
                        /* TEXT */
                      )
                    ])) : (vue.openBlock(), vue.createElementBlock(
                      vue.Fragment,
                      { key: 1 },
                      [
                        props.file.status === "failed" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
                          vue.createElementVNode("div", _hoisted_7, [
                            vue.createVNode(vue.unref(index$2.OIcon), { class: "o-upload-status-icon" }, {
                              default: vue.withCtx(() => [
                                vue.createVNode(vue.unref(icons.IconImgError))
                              ]),
                              _: 1
                              /* STABLE */
                            }),
                            vue.createElementVNode(
                              "div",
                              _hoisted_8,
                              vue.toDisplayString(vue.unref(t)("upload.failed")),
                              1
                              /* TEXT */
                            )
                          ]),
                          vue.createElementVNode("div", _hoisted_9, [
                            props.file.retry ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.OButton), {
                              key: 0,
                              class: "o-upload-icon-btn o-upload-icon-retry",
                              icon: vue.unref(icons.IconRefresh),
                              title: vue.unref(t)("upload.retry"),
                              onClick: onFileUploadRetry
                            }, null, 8, ["icon", "title"])) : vue.createCommentVNode("v-if", true),
                            vue.createVNode(vue.unref(index$3.OButton), {
                              class: "o-upload-icon-btn o-upload-icon-remove",
                              icon: vue.unref(icons.IconDelete),
                              title: vue.unref(t)("upload.delete"),
                              onClick: onFileRemove
                            }, null, 8, ["icon", "title"])
                          ])
                        ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_10, [
                          props.file.imgUrl ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.OButton), {
                            key: 0,
                            icon: vue.unref(icons.IconPreview),
                            class: "o-upload-icon-btn o-upload-icon-preview",
                            title: vue.unref(t)("upload.preview"),
                            onClick: onPreview
                          }, null, 8, ["icon", "title"])) : vue.createCommentVNode("v-if", true),
                          vue.createVNode(vue.unref(index$3.OButton), {
                            class: "o-upload-icon-btn o-upload-icon-remove",
                            icon: vue.unref(icons.IconDelete),
                            title: vue.unref(t)("upload.delete"),
                            onClick: onFileRemove
                          }, null, 8, ["icon", "title"])
                        ]))
                      ],
                      64
                      /* STABLE_FRAGMENT */
                    ))
                  ]),
                  props.file.status === "uploading" && props.showProgress && props.file.percent ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11, [
                    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"
                }]),
                onClick: onItemClick
              },
              [
                props.listType === "picture" && props.file.imgUrl ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.OFigure), {
                  key: 0,
                  ref_key: "figureRef",
                  ref: figureRef,
                  preview: "",
                  class: "o-upload-thumbnail",
                  src: props.file.imgUrl,
                  onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
                  }, ["stop"]))
                }, null, 8, ["src"])) : props.file.icon !== false ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12, [
                  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_13,
                  vue.toDisplayString(props.file.name),
                  1
                  /* TEXT */
                ),
                vue.createElementVNode("div", _hoisted_14, [
                  showLoading() ? (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.openBlock(), vue.createElementBlock(
                    vue.Fragment,
                    { key: 1 },
                    [
                      props.file.status === "failed" ? (vue.openBlock(), vue.createElementBlock(
                        vue.Fragment,
                        { key: 0 },
                        [
                          props.file.retry ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.OButton), {
                            key: 0,
                            class: "o-upload-row-icon o-upload-icon-hover-in o-upload-icon-retry",
                            icon: vue.unref(icons.IconRefresh),
                            title: vue.unref(t)("upload.retry"),
                            onClick: onFileUploadRetry
                          }, null, 8, ["icon", "title"])) : vue.createCommentVNode("v-if", true)
                        ],
                        64
                        /* STABLE_FRAGMENT */
                      )) : (vue.openBlock(), vue.createElementBlock(
                        vue.Fragment,
                        { key: 1 },
                        [
                          props.draggable ? (vue.openBlock(), vue.createElementBlock(
                            vue.Fragment,
                            { key: 0 },
                            [
                              props.file.imgUrl ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.OFigure), {
                                key: 0,
                                ref_key: "figureRef",
                                ref: figureRef,
                                "lazy-preview": "",
                                class: "o-upload-thumbnail",
                                src: props.file.imgUrl
                              }, null, 8, ["src"])) : vue.createCommentVNode("v-if", true),
                              props.file.imgUrl ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.OButton), {
                                key: 1,
                                icon: vue.unref(icons.IconPreview),
                                class: "o-upload-row-icon o-upload-icon-preview o-upload-icon-hover-in",
                                title: vue.unref(t)("upload.preview"),
                                onClick: onPreview
                              }, null, 8, ["icon", "title"])) : vue.createCommentVNode("v-if", true),
                              vue.createVNode(vue.unref(index$3.OButton), {
                                class: "o-upload-row-icon o-upload-icon-download o-upload-icon-hover-in",
                                icon: vue.unref(icons.IconDownload),
                                title: vue.unref(t)("upload.download"),
                                onClick: onFileDownload
                              }, null, 8, ["icon", "title"])
                            ],
                            64
                            /* STABLE_FRAGMENT */
                          )) : vue.createCommentVNode("v-if", true)
                        ],
                        64
                        /* STABLE_FRAGMENT */
                      ))
                    ],
                    64
                    /* STABLE_FRAGMENT */
                  )),
                  vue.createVNode(vue.unref(index$3.OButton), {
                    class: "o-upload-row-icon o-upload-icon-remove o-upload-icon-hover-in",
                    icon: vue.unref(icons.IconDelete),
                    title: vue.unref(t)("upload.delete"),
                    onClick: onFileRemove
                  }, null, 8, ["icon", "title"])
                ]),
                props.file.status === "uploading" && props.showProgress && props.file.percent ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15, [
                  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;