yuang-framework-ui-pc/lib/ele-upload-list/index.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const VueDraggable = require("vuedraggable");
const elementPlus = require("element-plus");
const core = require("../utils/core");
const receiver = require("../ele-config-provider/receiver");
const EleImageViewer = require("../ele-image-viewer/index");
const icons = require("../icons");
const ListItem = require("./components/list-item");
const props = require("./props");
const ownSlots = ["default", "icon"];
const _sfc_main = vue.defineComponent({
  name: "EleUploadList",
  components: {
    VueDraggable,
    ElUpload: elementPlus.ElUpload,
    ElIcon: elementPlus.ElIcon,
    PlusOutlined: icons.PlusOutlined,
    EleImageViewer,
    ListItem
  },
  props: props.uploadListProps,
  emits: props.uploadListEmits,
  setup(props2, { emit }) {
    const { lang } = receiver.useLocale("upload", props2);
    const previewVisible = vue.ref(false);
    const previewImages = vue.ref([]);
    const previewCurrentIndex = vue.ref(0);
    const imageObjectUrls = vue.ref([]);
    const uploadInputRef = vue.ref(null);
    let editItem = null;
    const uploadEnable = vue.computed(() => {
      return !props2.readonly && !(typeof props2.limit === "number" && props2.limit > 0 && props2.modelValue != null && props2.modelValue.length >= props2.limit);
    });
    const buildItem = (file) => {
      return {
        key: "ele" + core.uuid(16, 10) + String(Date.now()),
        name: file.name,
        status: void 0,
        progress: 0,
        file
      };
    };
    const getItemImageUrl = (item, file) => {
      if (item && item.url) {
        return item.url;
      }
      const itemFile = item == null ? void 0 : item.file;
      if (itemFile != null && itemFile.type.startsWith("image")) {
        const t = imageObjectUrls.value.find((d) => d.file === itemFile);
        if (t != null) {
          return t.url;
        }
        const url = URL.createObjectURL(itemFile);
        imageObjectUrls.value.push({ file: itemFile, url });
        return url;
      }
    };
    const previewItem = (item) => {
      if (props2.modelValue != null) {
        const data = [];
        props2.modelValue.forEach((d) => {
          const url = getItemImageUrl(d);
          if (url) {
            data.push({ item: d, url });
          }
        });
        const index2 = data.findIndex((t) => t.item.key === item.key);
        if (index2 !== -1) {
          const urls = data.map((d) => d.url);
          openImagePreview(urls, index2);
        }
      }
    };
    const openImagePreview = (urls, index2) => {
      previewImages.value = urls;
      previewCurrentIndex.value = index2;
      previewVisible.value = true;
    };
    const updateModelValue = (value) => {
      emit("update:modelValue", value);
    };
    const handleUpload = (file) => {
      if (uploadEnable.value && !props2.disabled) {
        const item = buildItem(file);
        emit("upload", item);
      }
      return false;
    };
    const handleItemClick = (item) => {
      if (props2.preview) {
        if (isImage(item.url)) {
          previewItem(item);
        } else {
          window.open(item.url);
        }
      }
      emit("itemClick", item);
    };
    const handleItemRemove = (item) => {
      emit("remove", item);
    };
    const handleItemEdit = (item) => {
      if (props2.beforeItemEdit && props2.beforeItemEdit(item) === false) {
        return;
      }
      const $input = uploadInputRef.value;
      if ($input != null) {
        editItem = item;
        $input.value = "";
        $input && $input.click();
      }
    };
    const handleItemPreview = (item) => {
      if (isImage(item.url)) {
        previewItem(item);
      }
      emit("preview", item);
    };
    const handleItemRetry = (item) => {
      emit("retry", item);
    };
    const handleInputChange = (e) => {
      var _a;
      const file = (_a = e.target.files) == null ? void 0 : _a[0];
      if (file != null && editItem != null) {
        const result = { item: editItem, newItem: buildItem(file) };
        editItem = null;
        emit("editUpload", result);
      }
    };
    const handleUploadClick = (e) => {
      if (props2.beforeUploadClick && props2.beforeUploadClick(e) === false) {
        e.stopPropagation();
        e.preventDefault();
      }
    };
    const isImage = (url) => {
      var _a, _b;
      const parts = url ? url.split(".") : [];
      const suffix = parts.length <= 1 || parts[0] === "" && parts.length === 2 ? "" : (_b = (_a = parts.pop()) == null ? void 0 : _a.toLowerCase) == null ? void 0 : _b.call(_a);
      return suffix && ["png", "jpg", "jpeg", "gif", "svg"].includes(suffix);
    };
    vue.watch(
      () => props2.modelValue,
      () => {
        if (props2.modelValue != null) {
          props2.modelValue.forEach((item) => {
            getItemImageUrl(item);
          });
        }
      },
      {
        immediate: true,
        deep: true
      }
    );
    vue.onBeforeUnmount(() => {
      imageObjectUrls.value.forEach((item) => {
        URL.revokeObjectURL(item.url);
      });
      imageObjectUrls.value = [];
    });
    return {
      ownSlots,
      lang,
      previewVisible,
      previewImages,
      previewCurrentIndex,
      imageObjectUrls,
      uploadInputRef,
      uploadEnable,
      updateModelValue,
      handleUpload,
      handleItemClick,
      handleItemRemove,
      handleItemEdit,
      handleItemPreview,
      handleItemRetry,
      handleInputChange,
      handleUploadClick,
      openImagePreview,
      isImage
    };
  }
});
const _export_sfc = (sfc, props2) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props2) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = ["accept"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ListItem = vue.resolveComponent("ListItem");
  const _component_PlusOutlined = vue.resolveComponent("PlusOutlined");
  const _component_ElIcon = vue.resolveComponent("ElIcon");
  const _component_ElUpload = vue.resolveComponent("ElUpload");
  const _component_EleImageViewer = vue.resolveComponent("EleImageViewer");
  const _component_VueDraggable = vue.resolveComponent("VueDraggable");
  return vue.openBlock(), vue.createBlock(_component_VueDraggable, vue.mergeProps({
    itemKey: "key",
    animation: 300,
    setData: () => void 0,
    handle: ".ele-upload-handle",
    class: [
      "ele-upload-list",
      { "is-file-list": _ctx.listType === "file" },
      { "is-disabled": _ctx.disabled }
    ]
  }, !_ctx.sortable || _ctx.sortable === true ? {} : _ctx.sortable, {
    modelValue: _ctx.modelValue || [],
    "onUpdate:modelValue": _ctx.updateModelValue
  }), {
    item: vue.withCtx(({ element }) => [
      vue.createVNode(_component_ListItem, {
        item: element,
        readonly: _ctx.readonly,
        disabled: _ctx.disabled,
        sortable: _ctx.sortable && !_ctx.readonly && !_ctx.disabled && _ctx.limit !== 1,
        imageProps: _ctx.imageProps,
        progressProps: _ctx.progressProps,
        imageObjectUrls: _ctx.imageObjectUrls,
        tools: _ctx.tools,
        listType: _ctx.listType,
        locale: _ctx.lang,
        style: vue.normalizeStyle(_ctx.itemStyle),
        onItemClick: _ctx.handleItemClick,
        onRemove: _ctx.handleItemRemove,
        onEdit: _ctx.handleItemEdit,
        onPreview: _ctx.handleItemPreview,
        onRetry: _ctx.handleItemRetry
      }, vue.createSlots({ _: 2 }, [
        vue.renderList(Object.keys(_ctx.$slots).filter(
          (k) => !_ctx.ownSlots.includes(k)
        ), (name) => {
          return {
            name,
            fn: vue.withCtx((slotProps) => [
              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
            ])
          };
        })
      ]), 1032, ["item", "readonly", "disabled", "sortable", "imageProps", "progressProps", "imageObjectUrls", "tools", "listType", "locale", "style", "onItemClick", "onRemove", "onEdit", "onPreview", "onRetry"])
    ]),
    footer: vue.withCtx(() => [
      _ctx.uploadEnable && _ctx.buttonStyle !== false ? (vue.openBlock(), vue.createElementBlock("div", {
        key: 0,
        style: vue.normalizeStyle(typeof _ctx.buttonStyle === "boolean" ? void 0 : _ctx.buttonStyle),
        class: "ele-upload-item ele-upload-button"
      }, [
        vue.createVNode(_component_ElUpload, {
          action: "",
          drag: _ctx.drag,
          accept: _ctx.accept,
          multiple: _ctx.multiple,
          disabled: _ctx.disabled,
          showFileList: false,
          beforeUpload: _ctx.handleUpload
        }, {
          default: vue.withCtx(() => [
            vue.createElementVNode("div", {
              class: "ele-upload-button-inner",
              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleUploadClick && _ctx.handleUploadClick(...args))
            }, [
              vue.renderSlot(_ctx.$slots, "icon", {}, () => [
                vue.createVNode(_component_ElIcon, { class: "ele-upload-icon" }, {
                  default: vue.withCtx(() => [
                    vue.createVNode(_component_PlusOutlined)
                  ]),
                  _: 1
                })
              ])
            ])
          ]),
          _: 3
        }, 8, ["drag", "accept", "multiple", "disabled", "beforeUpload"])
      ], 4)) : vue.createCommentVNode("", true),
      _ctx.tools ? (vue.openBlock(), vue.createElementBlock("input", {
        key: 1,
        ref: "uploadInputRef",
        type: "file",
        accept: _ctx.accept,
        class: "ele-upload-input",
        onChange: _cache[1] || (_cache[1] = (...args) => _ctx.handleInputChange && _ctx.handleInputChange(...args))
      }, null, 40, _hoisted_1)) : vue.createCommentVNode("", true),
      vue.createVNode(_component_EleImageViewer, vue.mergeProps({ infinite: false }, _ctx.previewProps || {}, {
        modelValue: _ctx.previewVisible,
        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.previewVisible = $event),
        urlList: _ctx.previewImages,
        initialIndex: _ctx.previewCurrentIndex
      }), null, 16, ["modelValue", "urlList", "initialIndex"])
    ]),
    _: 3
  }, 16, ["class", "modelValue", "onUpdate:modelValue"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = index;