yuang-framework-ui-pc/es/ele-upload-list/index.js

yuang-framework-ui-pc Library

import { defineComponent, ref, computed, watch, onBeforeUnmount, resolveComponent, createBlock, openBlock, mergeProps, withCtx, createElementBlock, createCommentVNode, createVNode, normalizeStyle, createElementVNode, renderSlot, createSlots, renderList, normalizeProps, guardReactiveProps } from "vue";
import VueDraggable from "vuedraggable";
import { ElIcon, ElUpload } from "element-plus";
import { uuid } from "../utils/core";
import { useLocale } from "../ele-config-provider/receiver";
import EleImageViewer from "../ele-image-viewer/index";
import { PlusOutlined } from "../icons";
import ListItem from "./components/list-item";
import { uploadListEmits, uploadListProps } from "./props";
const ownSlots = ["default", "icon"];
const _sfc_main = defineComponent({
  name: "EleUploadList",
  components: {
    VueDraggable,
    ElUpload,
    ElIcon,
    PlusOutlined,
    EleImageViewer,
    ListItem
  },
  props: uploadListProps,
  emits: uploadListEmits,
  setup(props, { emit }) {
    const { lang } = useLocale("upload", props);
    const previewVisible = ref(false);
    const previewImages = ref([]);
    const previewCurrentIndex = ref(0);
    const imageObjectUrls = ref([]);
    const uploadInputRef = ref(null);
    let editItem = null;
    const uploadEnable = computed(() => {
      return !props.readonly && !(typeof props.limit === "number" && props.limit > 0 && props.modelValue != null && props.modelValue.length >= props.limit);
    });
    const buildItem = (file) => {
      return {
        id: "ele" + uuid(16, 10) + String(Date.now()),
        key: "ele" + 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 (props.modelValue != null) {
        const data = [];
        props.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 && !props.disabled) {
        const item = buildItem(file);
        emit("upload", item);
      }
      return false;
    };
    const handleItemClick = (item) => {
      if (props.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 (props.beforeItemEdit && props.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 (props.beforeUploadClick && props.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);
    };
    watch(
      () => props.modelValue,
      () => {
        if (props.modelValue != null) {
          props.modelValue.forEach((item) => {
            getItemImageUrl(item);
          });
        }
      },
      {
        immediate: true,
        deep: true
      }
    );
    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, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = ["accept"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ListItem = resolveComponent("ListItem");
  const _component_PlusOutlined = resolveComponent("PlusOutlined");
  const _component_ElIcon = resolveComponent("ElIcon");
  const _component_ElUpload = resolveComponent("ElUpload");
  const _component_EleImageViewer = resolveComponent("EleImageViewer");
  const _component_VueDraggable = resolveComponent("VueDraggable");
  return openBlock(), createBlock(_component_VueDraggable, 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: withCtx(({ element }) => [
      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: normalizeStyle(_ctx.itemStyle),
        onItemClick: _ctx.handleItemClick,
        onRemove: _ctx.handleItemRemove,
        onEdit: _ctx.handleItemEdit,
        onPreview: _ctx.handleItemPreview,
        onRetry: _ctx.handleItemRetry
      }, createSlots({ _: 2 }, [
        renderList(Object.keys(_ctx.$slots).filter(
          (k) => !_ctx.ownSlots.includes(k)
        ), (name) => {
          return {
            name,
            fn: withCtx((slotProps) => [
              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
            ])
          };
        })
      ]), 1032, ["item", "readonly", "disabled", "sortable", "imageProps", "progressProps", "imageObjectUrls", "tools", "listType", "locale", "style", "onItemClick", "onRemove", "onEdit", "onPreview", "onRetry"])
    ]),
    footer: withCtx(() => [
      _ctx.uploadEnable && _ctx.buttonStyle !== false ? (openBlock(), createElementBlock("div", {
        key: 0,
        style: normalizeStyle(typeof _ctx.buttonStyle === "boolean" ? void 0 : _ctx.buttonStyle),
        class: "ele-upload-item ele-upload-button"
      }, [
        createVNode(_component_ElUpload, {
          action: "",
          drag: _ctx.drag,
          accept: _ctx.accept,
          multiple: _ctx.multiple,
          disabled: _ctx.disabled,
          showFileList: false,
          beforeUpload: _ctx.handleUpload
        }, {
          default: withCtx(() => [
            createElementVNode("div", {
              class: "ele-upload-button-inner",
              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleUploadClick && _ctx.handleUploadClick(...args))
            }, [
              renderSlot(_ctx.$slots, "icon", {}, () => [
                createVNode(_component_ElIcon, { class: "ele-upload-icon" }, {
                  default: withCtx(() => [
                    createVNode(_component_PlusOutlined)
                  ]),
                  _: 1
                })
              ])
            ])
          ]),
          _: 3
        }, 8, ["drag", "accept", "multiple", "disabled", "beforeUpload"])
      ], 4)) : createCommentVNode("", true),
      _ctx.tools ? (openBlock(), 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)) : createCommentVNode("", true),
      createVNode(_component_EleImageViewer, 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]]);
export {
  index as default
};