hongluan-ui/lib/components/upload/src/upload-list.js

Hongluan Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var index$3 = require('../../progress/index.js');
var index$2 = require('../../icon/index.js');
require('../../system-icon/index.js');
require('../../../hooks/index.js');
var uploadList = require('./upload-list2.js');
var index = require('../../../hooks/use-locale/index.js');
var index$1 = require('../../../hooks/use-consistent-prop/index.js');
var file = require('../../system-icon/src/file.js');
var checked = require('../../system-icon/src/checked.js');
var close = require('../../system-icon/src/close.js');
var zoomIn = require('../../system-icon/src/zoom-in.js');

const __default__ = vue.defineComponent({
  name: "UploadList"
});
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: uploadList.uploadListProps,
  emits: uploadList.uploadListEmits,
  setup(__props, { emit }) {
    const { t } = index.useLocale();
    const { disabled } = index$1.useConsistentProp();
    const focusing = vue.ref(false);
    const handleRemove = (file) => {
      emit("remove", file);
    };
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.TransitionGroup, {
        tag: "ul",
        class: vue.normalizeClass([
          "upload-list",
          "list-" + _ctx.listType,
          { "is-disabled": vue.unref(disabled) }
        ]),
        name: "list"
      }, {
        default: vue.withCtx(() => [
          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.files, (file$1, index) => {
            return vue.openBlock(), vue.createElementBlock("li", {
              key: file$1.uid || file$1.name,
              class: vue.normalizeClass([
                "item",
                "is-" + file$1.status,
                { focusing: focusing.value }
              ]),
              tabindex: "0",
              onKeydown: vue.withKeys(($event) => !vue.unref(disabled) && handleRemove(file$1), ["delete"]),
              onFocus: ($event) => focusing.value = true,
              onBlur: ($event) => focusing.value = false,
              onClick: ($event) => focusing.value = false
            }, [
              vue.renderSlot(_ctx.$slots, "default", {
                file: file$1,
                index
              }, () => [
                vue.renderSlot(_ctx.$slots, "file-preview", {
                  file: file$1,
                  index
                }, () => [
                  file$1.status !== "uploading" && ["card", "picture"].includes(_ctx.listType) ? (vue.openBlock(), vue.createElementBlock("img", {
                    key: 0,
                    class: "item-thumb",
                    src: file$1.url,
                    crossorigin: _ctx.crossorigin,
                    alt: ""
                  }, null, 8, ["src", "crossorigin"])) : vue.createCommentVNode("v-if", true)
                ]),
                vue.renderSlot(_ctx.$slots, "file-icon", {
                  file: file$1,
                  index
                }, () => [
                  vue.createVNode(vue.unref(index$2.HlIcon), {
                    type: file$1.status,
                    class: "file-icon"
                  }, {
                    default: vue.withCtx(() => [
                      vue.createVNode(vue.unref(file["default"]))
                    ]),
                    _: 2
                  }, 1032, ["type"])
                ]),
                vue.createElementVNode("div", { class: "item-content" }, [
                  vue.createElementVNode("a", {
                    class: "item-name",
                    title: file$1.name,
                    onClick: ($event) => _ctx.handlePreview(file$1)
                  }, vue.toDisplayString(file$1.name), 9, ["title", "onClick"]),
                  file$1.status === "uploading" ? (vue.openBlock(), vue.createBlock(vue.unref(index$3.HlProgress), {
                    key: 0,
                    "show-as": _ctx.listType === "card" ? "circle" : "line",
                    percentage: Number(file$1.percentage)
                  }, null, 8, ["show-as", "percentage"])) : vue.createCommentVNode("v-if", true)
                ]),
                vue.createElementVNode("div", { class: "item-status" }, [
                  vue.createVNode(vue.unref(index$2.HlIcon), {
                    class: vue.normalizeClass({
                      "icon-status": true,
                      "success": _ctx.listType === "text",
                      "icon-check": ["card", "picture"].includes(_ctx.listType)
                    })
                  }, {
                    default: vue.withCtx(() => [
                      vue.createVNode(vue.unref(checked["default"]))
                    ]),
                    _: 1
                  }, 8, ["class"]),
                  !vue.unref(disabled) ? (vue.openBlock(), vue.createBlock(vue.unref(index$2.HlIcon), {
                    key: 0,
                    class: "icon-close",
                    title: vue.unref(t)("hl.upload.deleteTip"),
                    onClick: ($event) => handleRemove(file$1)
                  }, {
                    default: vue.withCtx(() => [
                      vue.createVNode(vue.unref(close["default"]))
                    ]),
                    _: 2
                  }, 1032, ["title", "onClick"])) : vue.createCommentVNode("v-if", true),
                  vue.createCommentVNode(" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn"),
                  vue.createCommentVNode(" This is a bug which needs to be fixed "),
                  vue.createCommentVNode(" TODO: Fix the incorrect navigation interaction ")
                ]),
                _ctx.listType === "card" ? (vue.openBlock(), vue.createElementBlock("span", {
                  key: 0,
                  class: "item-actions"
                }, [
                  vue.createElementVNode("span", {
                    class: "item-preview",
                    onClick: vue.withModifiers(($event) => _ctx.handlePreview(file$1), ["prevent"])
                  }, [
                    vue.createVNode(vue.unref(index$2.HlIcon), { name: "ZoomIn" }, {
                      default: vue.withCtx(() => [
                        vue.createVNode(vue.unref(zoomIn["default"]))
                      ]),
                      _: 1
                    })
                  ], 8, ["onClick"]),
                  !vue.unref(disabled) ? (vue.openBlock(), vue.createElementBlock("span", {
                    key: 0,
                    class: "item-delete",
                    onClick: ($event) => handleRemove(file$1)
                  }, [
                    vue.createVNode(vue.unref(index$2.HlIcon), null, {
                      default: vue.withCtx(() => [
                        vue.createVNode(vue.unref(close["default"]))
                      ]),
                      _: 1
                    })
                  ], 8, ["onClick"])) : vue.createCommentVNode("v-if", true)
                ])) : vue.createCommentVNode("v-if", true)
              ])
            ], 42, ["onKeydown", "onFocus", "onBlur", "onClick"]);
          }), 128)),
          vue.renderSlot(_ctx.$slots, "append")
        ]),
        _: 3
      }, 8, ["class"]);
    };
  }
});

exports["default"] = _sfc_main;
//# sourceMappingURL=upload-list.js.map