yuang-framework-ui-pc 1.1.44 → 1.1.46

package/es/ele-upload-list/index.js

@@ -0,0 +1,287 @@
+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 {
+        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) {
+        previewItem(item);
+      }
+      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) => {
+      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();
+      }
+    };
+    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
+    };
+  }
+});
+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
+};

package/es/ele-upload-list/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-upload-list/style/index.js

@@ -0,0 +1,6 @@
+import "element-plus/es/components/image/style/index";
+import "element-plus/es/components/upload/style/index";
+import "element-plus/es/components/progress/style/index";
+import "element-plus/es/components/icon/style/index";
+import "../../ele-image-viewer/style/index";
+import "./index.scss";