yc-design-vue 2.0.4 → 2.0.6

package/es/Upload/UploadFileList.vue2.js

@@ -0,0 +1,126 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, unref, Fragment, renderList, renderSlot, createCommentVNode, createElementVNode, createBlock, resolveDynamicComponent, createVNode, withCtx } from "vue";
+import useUploadContext from "./hooks/useContext.js";
+import _sfc_main$1 from "../_shared/components/IconButton/index.vue.js";
+/* empty css                                          */
+import "../_shared/utils/dom.js";
+/* empty css                                               */
+/* empty css                                   */
+import _sfc_main$3 from "../_shared/icons/IconDelete.vue.js";
+import _sfc_main$2 from "../_shared/icons/IconFile.vue.js";
+const _hoisted_1 = { class: "yc-upload-list-item-content" };
+const _hoisted_2 = {
+  key: 0,
+  class: "yc-upload-list-item-thumbnail"
+};
+const _hoisted_3 = ["src", "alt", "loading"];
+const _hoisted_4 = { class: "yc-upload-list-item-name" };
+const _hoisted_5 = {
+  key: 0,
+  class: "yc-upload-list-item-file-icon"
+};
+const _hoisted_6 = { class: "yc-upload-list-item-name-text text-ellipsis" };
+const _hoisted_7 = ["href", "download"];
+const _hoisted_8 = {
+  key: 0,
+  class: "yc-upload-list-item-operation"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "UploadFileList",
+  setup(__props) {
+    const {
+      computedFileList,
+      showRemoveButton,
+      listType,
+      imageLoading,
+      showLink,
+      download,
+      customIcon,
+      slots,
+      emits
+    } = useUploadContext().inject();
+    const handleDel = (uid) => {
+      computedFileList.value = computedFileList.value.filter((v) => v.uid != uid);
+      emits("change", computedFileList.value, []);
+    };
+    const renderFileIcon = (fileItem) => {
+      var _a, _b;
+      if (slots["file-icon"]) {
+        return slots["file-icon"]({
+          fileItem
+        });
+      }
+      return ((_b = (_a = customIcon.value).fileIcon) == null ? void 0 : _b.call(_a, fileItem)) || _sfc_main$2;
+    };
+    const renderName = (fileItem) => {
+      if (slots["file-name"]) {
+        return slots["file-name"]({
+          fileItem
+        });
+      }
+      return () => {
+        var _a, _b;
+        return ((_b = (_a = customIcon.value).fileName) == null ? void 0 : _b.call(_a, fileItem)) || fileItem.name;
+      };
+    };
+    const renderDelIcon = () => {
+      return slots["remove-icon"] ?? (customIcon.value.removeIcon || _sfc_main$3);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["yc-upload-list", `yc-upload-list-type-${unref(listType)}`])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(computedFileList), (item, i) => {
+          return openBlock(), createElementBlock("div", {
+            key: item.uid,
+            class: "yc-upload-list-item"
+          }, [
+            renderSlot(_ctx.$slots, "upload-item", {
+              fileItem: item,
+              index: i
+            }, () => [
+              createElementVNode("div", _hoisted_1, [
+                unref(listType) == "picture" ? (openBlock(), createElementBlock("span", _hoisted_2, [
+                  createElementVNode("img", {
+                    src: item.url,
+                    alt: item.name,
+                    loading: unref(imageLoading)
+                  }, null, 8, _hoisted_3)
+                ])) : createCommentVNode("", true),
+                createElementVNode("div", _hoisted_4, [
+                  unref(listType) == "text" ? (openBlock(), createElementBlock("span", _hoisted_5, [
+                    (openBlock(), createBlock(resolveDynamicComponent(renderFileIcon(item))))
+                  ])) : createCommentVNode("", true),
+                  createElementVNode("span", _hoisted_6, [
+                    unref(showLink) ? (openBlock(), createElementBlock("a", {
+                      key: 0,
+                      href: item.url,
+                      download: unref(download) ? item.name : void 0,
+                      class: "yc-upload-list-item-name-link",
+                      target: "_blank"
+                    }, [
+                      (openBlock(), createBlock(resolveDynamicComponent(renderName(item))))
+                    ], 8, _hoisted_7)) : (openBlock(), createBlock(resolveDynamicComponent(renderName(item)), { key: 1 }))
+                  ])
+                ])
+              ])
+            ], true),
+            _ctx.$slots["extra-button"] || unref(showRemoveButton) ? (openBlock(), createElementBlock("span", _hoisted_8, [
+              createVNode(unref(_sfc_main$1), {
+                onClick: ($event) => handleDel(item.uid)
+              }, {
+                default: withCtx(() => [
+                  (openBlock(), createBlock(resolveDynamicComponent(renderDelIcon())))
+                ]),
+                _: 1
+              }, 8, ["onClick"]),
+              renderSlot(_ctx.$slots, "extra-button", { fileItem: item }, void 0, true)
+            ])) : createCommentVNode("", true)
+          ]);
+        }), 128))
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Upload/UploadPictureCard.vue.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    uploadRef: HTMLSpanElement;
+}, HTMLDivElement>;
+export default _default;

package/es/Upload/UploadPictureCard.vue.js

@@ -0,0 +1,7 @@
+import _sfc_main from "./UploadPictureCard.vue2.js";
+/* empty css                       */
+import _export_sfc from "../_virtual/_plugin-vue_export-helper.js";
+const UploadPictureCard = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-499f701f"]]);
+export {
+  UploadPictureCard as default
+};

package/es/Upload/UploadPictureCard.vue2.js

@@ -0,0 +1,132 @@
+import { defineComponent, ref, createElementBlock, openBlock, normalizeClass, unref, createVNode, createElementVNode, Fragment, renderList, createCommentVNode, createBlock, resolveDynamicComponent, toDisplayString } from "vue";
+import "../_shared/utils/dom.js";
+/* empty css                                          */
+/* empty css                                               */
+/* empty css                                   */
+import _sfc_main$3 from "../_shared/icons/IconDelete.vue.js";
+import _sfc_main$4 from "../_shared/icons/IconEyeClose.vue.js";
+import _sfc_main$2 from "../_shared/icons/IconPlus.vue.js";
+import useUpload from "./hooks/useUpload.js";
+import "../Image/index.js";
+import _sfc_main$1 from "../Image/ImagePreview.vue.js";
+/* empty css                         */
+const _hoisted_1 = ["src", "alt"];
+const _hoisted_2 = { class: "yc-upload-list-picture-mask" };
+const _hoisted_3 = { class: "yc-upload-list-picture-operation" };
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = { class: "yc-upload-picture-card-text" };
+const _hoisted_7 = {
+  key: 0,
+  class: "yc-upload-tip"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "UploadPictureCard",
+  setup(__props) {
+    const uploadRef = ref();
+    const visible = ref(false);
+    const url = ref("");
+    const {
+      computedFileList,
+      tip,
+      slots,
+      customIcon,
+      disabled,
+      imagePreview,
+      showPreviewButton,
+      showRemoveButton,
+      listType,
+      open,
+      emits
+    } = useUpload(uploadRef);
+    const renderDelIcon = () => {
+      return slots["remove-icon"] ?? (customIcon.value.removeIcon || _sfc_main$3);
+    };
+    const renderPreviewIcon = () => {
+      return slots["preview-icon"] ?? (customIcon.value.previewIcon || _sfc_main$4);
+    };
+    const handleUpload = () => {
+      if (disabled.value) return;
+      open();
+    };
+    const handlePreview = (fileItem) => {
+      url.value = fileItem.url;
+      emits("preview", fileItem);
+      if (!imagePreview.value) return;
+      visible.value = true;
+    };
+    const handleDel = (uid) => {
+      computedFileList.value = computedFileList.value.filter((v) => v.uid != uid);
+      emits("change", computedFileList.value, []);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "yc-upload-list",
+          `yc-upload-list-type-${unref(listType)}`,
+          {
+            "yc-upload-list-disabled": unref(disabled)
+          }
+        ])
+      }, [
+        createVNode(unref(_sfc_main$1), {
+          visible: visible.value,
+          "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => visible.value = $event),
+          src: url.value
+        }, null, 8, ["visible", "src"]),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(computedFileList), (item) => {
+          return openBlock(), createElementBlock("div", {
+            key: item.uid,
+            class: "yc-upload-list-picture"
+          }, [
+            createElementVNode("img", {
+              src: item.url,
+              alt: item.name
+            }, null, 8, _hoisted_1),
+            createElementVNode("div", _hoisted_2, [
+              createElementVNode("div", _hoisted_3, [
+                unref(showPreviewButton) ? (openBlock(), createElementBlock("span", {
+                  key: 0,
+                  class: normalizeClass(["yc-upload-icon", "yc-upload-icon-preview"]),
+                  onClick: ($event) => handlePreview(item)
+                }, [
+                  (openBlock(), createBlock(resolveDynamicComponent(renderPreviewIcon())))
+                ], 8, _hoisted_4)) : createCommentVNode("", true),
+                unref(showRemoveButton) ? (openBlock(), createElementBlock("span", {
+                  key: 1,
+                  class: normalizeClass(["yc-upload-icon", "yc-upload-icon-remove"]),
+                  onClick: ($event) => handleDel(item.uid)
+                }, [
+                  (openBlock(), createBlock(resolveDynamicComponent(renderDelIcon())))
+                ], 8, _hoisted_5)) : createCommentVNode("", true)
+              ])
+            ])
+          ]);
+        }), 128)),
+        createElementVNode("span", {
+          class: "yc-upload",
+          ref_key: "uploadRef",
+          ref: uploadRef,
+          onClick: handleUpload
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass([
+              "yc-upload-picture-card",
+              {
+                "yc-upload-picture-card-disabled": unref(disabled)
+              }
+            ])
+          }, [
+            createElementVNode("div", _hoisted_6, [
+              createVNode(unref(_sfc_main$2))
+            ]),
+            unref(tip) ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(unref(tip)), 1)) : createCommentVNode("", true)
+          ], 2)
+        ], 512)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/Upload/hooks/useContext.d.ts

@@ -0,0 +1,49 @@
+import { Ref } from 'vue';
+import { UploadEmits, FileItem, FileListType, ImageLoading, UploadSlots, CustomIcon, FileName } from '../type';
+import { RecordType } from '../../_shared/type';
+type UploadContext = {
+    computedFileList: Ref<FileItem[]>;
+    disabled: Ref<boolean>;
+    tip: Ref<string>;
+    listType: Ref<FileListType>;
+    imageLoading: Ref<ImageLoading>;
+    showRemoveButton: Ref<boolean>;
+    showLink: Ref<boolean>;
+    download: Ref<boolean>;
+    customIcon: Ref<CustomIcon>;
+    limit: Ref<number>;
+    accept: Ref<string>;
+    name: FileName;
+    multiple: Ref<boolean>;
+    draggable: Ref<boolean>;
+    directory: Ref<boolean>;
+    showPreviewButton: Ref<boolean>;
+    imagePreview: Ref<boolean>;
+    slots: UploadSlots;
+    emits: UploadEmits;
+};
+export default function useUploadContext(): {
+    provide: (props: RecordType, emits: UploadEmits) => {
+        computedFileList: import('vue').WritableComputedRef<FileItem[], FileItem[]>;
+        accept: import('vue').ComputedRef<string>;
+        disabled: Ref<boolean, boolean>;
+        directory: Ref<boolean, boolean>;
+        multiple: Ref<boolean, boolean>;
+        draggable: Ref<boolean, boolean>;
+        limit: Ref<number, number>;
+        tip: Ref<string, string>;
+        listType: Ref<FileListType, FileListType>;
+        imageLoading: Ref<ImageLoading, ImageLoading>;
+        showLink: Ref<boolean, boolean>;
+        download: Ref<boolean, boolean>;
+        customIcon: Ref<CustomIcon, CustomIcon>;
+        imagePreview: Ref<boolean, boolean>;
+        showRemoveButton: Ref<boolean, boolean>;
+        showPreviewButton: Ref<boolean, boolean>;
+        name: any;
+        slots: UploadSlots;
+        emits: UploadEmits;
+    };
+    inject: () => UploadContext;
+};
+export {};

package/es/Upload/hooks/useContext.js

@@ -0,0 +1,92 @@
+import { toRefs, useSlots, computed, provide, inject, ref } from "vue";
+import { useControlValue } from "../../_shared/utils/control.js";
+const UPLOAD_CONTEXT_KEY = "upload-context";
+function useUploadContext() {
+  const provide$1 = (props, emits) => {
+    const {
+      fileList,
+      defaultFileList,
+      disabled,
+      multiple,
+      draggable,
+      directory,
+      limit,
+      tip,
+      listType,
+      imageLoading,
+      download,
+      showLink,
+      customIcon,
+      imagePreview,
+      showRemoveButton,
+      showPreviewButton,
+      accept: _accept
+    } = toRefs(props);
+    const { name } = props;
+    const slots = useSlots();
+    const computedFileList = useControlValue(
+      fileList,
+      defaultFileList.value,
+      (val) => {
+        emits("update:fileList", val);
+      }
+    );
+    const accept = computed(() => {
+      return listType.value != "text" ? "image/*" : _accept.value;
+    });
+    const context = {
+      computedFileList,
+      accept,
+      disabled,
+      directory,
+      multiple,
+      draggable,
+      limit,
+      tip,
+      listType,
+      imageLoading,
+      showLink,
+      download,
+      customIcon,
+      imagePreview,
+      showRemoveButton,
+      showPreviewButton,
+      name,
+      slots,
+      emits
+    };
+    provide(UPLOAD_CONTEXT_KEY, context);
+    return context;
+  };
+  const inject$1 = () => {
+    return inject(UPLOAD_CONTEXT_KEY, {
+      computedFileList: ref([]),
+      accept: ref(""),
+      disabled: ref(false),
+      directory: ref(false),
+      multiple: ref(false),
+      draggable: ref(false),
+      limit: ref(0),
+      tip: ref(""),
+      listType: ref("text"),
+      imageLoading: ref("lazy"),
+      showLink: ref(true),
+      download: ref(false),
+      customIcon: ref({}),
+      imagePreview: ref(true),
+      showRemoveButton: ref(true),
+      showPreviewButton: ref(true),
+      name: "",
+      slots: {},
+      emits: () => {
+      }
+    });
+  };
+  return {
+    provide: provide$1,
+    inject: inject$1
+  };
+}
+export {
+  useUploadContext as default
+};

package/es/Upload/hooks/useUpload.d.ts

@@ -0,0 +1,47 @@
+import { FileItem, UploadEmits, UploadProps } from '../type';
+import { Ref } from 'vue';
+export default function useUpload(uploadRef: Ref<HTMLDivElement | undefined>, _props?: UploadProps, _emits?: UploadEmits): {
+    open: (localOptions?: Partial<import('@vueuse/core').UseFileDialogOptions>) => void;
+    handleFiles: (fileData: File[] | FileList | null) => void;
+    computedFileList: Ref<FileItem[]>;
+    disabled: Ref<boolean>;
+    tip: Ref<string>;
+    listType: Ref<import('..').FileListType>;
+    imageLoading: Ref<import('..').ImageLoading>;
+    showRemoveButton: Ref<boolean>;
+    showLink: Ref<boolean>;
+    download: Ref<boolean>;
+    customIcon: Ref<import('..').CustomIcon>;
+    limit: Ref<number>;
+    accept: Ref<string>;
+    name: import('..').FileName;
+    multiple: Ref<boolean>;
+    draggable: Ref<boolean>;
+    directory: Ref<boolean>;
+    showPreviewButton: Ref<boolean>;
+    imagePreview: Ref<boolean>;
+    slots: import('..').UploadSlots;
+    emits: UploadEmits;
+} | {
+    open: (localOptions?: Partial<import('@vueuse/core').UseFileDialogOptions>) => void;
+    handleFiles: (fileData: File[] | FileList | null) => void;
+    computedFileList: import('vue').WritableComputedRef<FileItem[], FileItem[]>;
+    accept: import('vue').ComputedRef<string>;
+    disabled: Ref<boolean, boolean>;
+    directory: Ref<boolean, boolean>;
+    multiple: Ref<boolean, boolean>;
+    draggable: Ref<boolean, boolean>;
+    limit: Ref<number, number>;
+    tip: Ref<string, string>;
+    listType: Ref<import('..').FileListType, import('..').FileListType>;
+    imageLoading: Ref<import('..').ImageLoading, import('..').ImageLoading>;
+    showLink: Ref<boolean, boolean>;
+    download: Ref<boolean, boolean>;
+    customIcon: Ref<import('..').CustomIcon, import('..').CustomIcon>;
+    imagePreview: Ref<boolean, boolean>;
+    showRemoveButton: Ref<boolean, boolean>;
+    showPreviewButton: Ref<boolean, boolean>;
+    name: any;
+    slots: import('..').UploadSlots;
+    emits: UploadEmits;
+};

package/es/Upload/hooks/useUpload.js

@@ -0,0 +1,80 @@
+import { nanoid } from "../../node_modules/nanoid/index.browser.js";
+import "vue";
+import { isString } from "../../_shared/utils/is.js";
+import { useFileDialog, useDropZone } from "../../node_modules/@vueuse/core/index.js";
+import useUploadContext from "./useContext.js";
+function useUpload(uploadRef, _props, _emits) {
+  let context;
+  if (_props && _emits) {
+    context = useUploadContext().provide(_props, _emits);
+  } else {
+    context = useUploadContext().inject();
+  }
+  const {
+    computedFileList,
+    disabled,
+    limit,
+    accept,
+    directory,
+    multiple,
+    name,
+    emits
+  } = context;
+  const { onChange, open } = useFileDialog({
+    directory: directory.value,
+    multiple: multiple.value,
+    accept: accept.value,
+    reset: true
+  });
+  onChange((files) => handleFiles(files));
+  useDropZone(uploadRef, {
+    dataTypes: accept.value ? accept.value.split(",") : void 0,
+    multiple: multiple.value,
+    preventDefaultForUnhandled: true,
+    onDrop: (files) => handleFiles(files)
+  });
+  const isOutOfLimit = (length = 0) => {
+    return limit.value > 0 && length + computedFileList.value.length > limit.value;
+  };
+  const getFileName = (fileItem) => {
+    if (name) {
+      return isString(name) ? name : name(fileItem);
+    }
+    return fileItem.name;
+  };
+  const handleFiles = (fileData) => {
+    const files = [...fileData || []];
+    if (!(files == null ? void 0 : files.length) || disabled.value || isOutOfLimit(files.length)) {
+      if (!isOutOfLimit(files == null ? void 0 : files.length)) return;
+      emits("exceed-limit", computedFileList.value, files);
+      return;
+    }
+    computedFileList.value = [
+      ...computedFileList.value,
+      ...files.map((v) => {
+        const fileItem = {
+          name: v.name,
+          uid: nanoid(),
+          file: v,
+          status: "init",
+          percent: 0,
+          url: URL.createObjectURL(v)
+        };
+        return {
+          ...fileItem,
+          name: getFileName(fileItem)
+        };
+      })
+    ];
+    console.dir(computedFileList.value, "files");
+    emits("change", computedFileList.value, [...files]);
+  };
+  return {
+    ...context,
+    open,
+    handleFiles
+  };
+}
+export {
+  useUpload as default
+};

package/es/Upload/index.css

@@ -0,0 +1 @@
+.yc-upload-wrapper{width:100%;display:flex;flex-direction:column}.yc-upload-wrapper .yc-upload{cursor:pointer;max-width:100%}.yc-upload-wrapper .yc-upload .yc-upload-tip{max-width:100%;color:var(--color-text-3);font-size:12px;line-height:1.5}.yc-upload-wrapper .yc-upload .yc-upload-button{display:flex;flex-direction:column;gap:4px}.yc-upload-wrapper .yc-upload .yc-upload-button .yc-button{width:fit-content;max-width:100%}.yc-upload-wrapper .yc-upload .yc-upload-drag{width:100%;padding:50px 0;background-color:var(--color-fill-1);border:1px dashed var(--color-neutral-3);border-radius:var(--border-radius-small);color:var(--color-text-1);transition:all .2s ease;display:flex;flex-direction:column;align-items:center}.yc-upload-wrapper .yc-upload .yc-upload-drag:not(.yc-upload-drag-disabled):hover{background-color:var(--color-fill-3);border-color:var(--color-neutral-4)}.yc-upload-wrapper .yc-upload .yc-upload-drag .yc-upload-drag-icon{color:var(--color-text-2)}.yc-upload-wrapper .yc-upload .yc-upload-drag .yc-upload-drag-icon .yc-icon{margin-bottom:24px;font-size:14px}.yc-upload-wrapper .yc-upload .yc-upload-drag .yc-upload-drag-text{color:var(--color-text-1);font-size:14px;line-height:1.5}.yc-upload-list-type-text,.yc-upload-list-type-picture{width:100%;margin-top:24px;display:flex;flex-direction:column;gap:12px}.yc-upload-list-type-text .yc-upload-list-item,.yc-upload-list-type-picture .yc-upload-list-item{overflow:hidden;display:flex;align-items:center;gap:12px}.yc-upload-list-type-text .yc-upload-list-item .yc-upload-list-item-content,.yc-upload-list-type-picture .yc-upload-list-item .yc-upload-list-item-content{overflow:hidden;flex:1;width:100%;padding:8px 10px 8px 12px;background-color:var(--color-fill-1);transition:background-color .1s cubic-bezier(0, 0, 1, 1);font-size:14px;display:flex;align-items:center}.yc-upload-list-type-text .yc-upload-list-item .yc-upload-list-item-content .yc-upload-list-item-thumbnail,.yc-upload-list-type-picture .yc-upload-list-item .yc-upload-list-item-content .yc-upload-list-item-thumbnail{flex-shrink:0;width:40px;height:40px;margin-right:12px}.yc-upload-list-type-text .yc-upload-list-item .yc-upload-list-item-content .yc-upload-list-item-thumbnail img,.yc-upload-list-type-picture .yc-upload-list-item .yc-upload-list-item-content .yc-upload-list-item-thumbnail img{width:100%;height:100%}.yc-upload-list-type-text .yc-upload-list-item .yc-upload-list-item-content .yc-upload-list-item-name,.yc-upload-list-type-picture .yc-upload-list-item .yc-upload-list-item-content .yc-upload-list-item-name{flex:1;overflow:hidden;color:var(--color-text-1);font-size:14px;line-height:1.4286;display:flex;align-items:center;gap:12px}.yc-upload-list-type-text .yc-upload-list-item .yc-upload-list-item-content .yc-upload-list-item-name .yc-upload-list-item-file-icon,.yc-upload-list-type-picture .yc-upload-list-item .yc-upload-list-item-content .yc-upload-list-item-name .yc-upload-list-item-file-icon{color:rgb(var(--primary-6));font-size:16px;display:flex;justify-content:center;align-items:center}.yc-upload-list-type-text .yc-upload-list-item .yc-upload-list-item-content .yc-upload-list-item-name .yc-upload-list-item-name-link,.yc-upload-list-type-picture .yc-upload-list-item .yc-upload-list-item-content .yc-upload-list-item-name .yc-upload-list-item-name-link{cursor:pointer;color:rgb(var(--link-6))}.yc-upload-list-type-text .yc-upload-list-item .yc-upload-list-item-operation,.yc-upload-list-type-picture .yc-upload-list-item .yc-upload-list-item-operation{color:var(--color-text-2);font-size:12px}.yc-upload-list-type-picture-card{display:flex;flex-wrap:wrap;gap:8px}.yc-upload-list-type-picture-card .yc-upload-list-picture{position:relative;width:80px;height:80px;overflow:hidden;line-height:80px;text-align:center;border-radius:var(--border-radius-small);transition:all .2s cubic-bezier(.34, .69, .1, 1)}.yc-upload-list-type-picture-card .yc-upload-list-picture:hover .yc-upload-list-picture-mask{opacity:1}.yc-upload-list-type-picture-card .yc-upload-list-picture img{width:100%;height:100%}.yc-upload-list-type-picture-card .yc-upload-list-picture .yc-upload-list-picture-mask{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);color:var(--color-white);font-size:16px;line-height:80px;cursor:pointer;opacity:0;transition:opacity .1s cubic-bezier(0, 0, 1, 1)}.yc-upload-list-type-picture-card .yc-upload-list-picture .yc-upload-list-picture-mask .yc-upload-list-picture-operation{width:100%;display:flex;justify-content:space-evenly;align-items:center}.yc-upload-list-type-picture-card .yc-upload-list-picture .yc-upload-list-picture-mask .yc-upload-list-picture-operation .yc-upload-icon{cursor:pointer}.yc-upload-list-type-picture-card .yc-upload-picture-card{min-width:80px;height:80px;background:var(--color-fill-2);border:1px dashed var(--color-neutral-3);border-radius:var(--border-radius-small);color:var(--color-text-2);transition:all .1s cubic-bezier(0, 0, 1, 1);display:flex;flex-direction:column;justify-content:center;align-items:center}.yc-upload-list-type-picture-card .yc-upload-picture-card:not(.yc-upload-picture-card-disabled):hover{color:var(--color-text-2);background-color:var(--color-fill-3);border-color:var(--color-neutral-4)}.yc-upload-disabled .yc-upload{cursor:not-allowed}.yc-upload-disabled .yc-upload .yc-upload-drag,.yc-upload-disabled .yc-upload .yc-upload-picture-card{border-color:var(--color-text-4)}.yc-upload-disabled .yc-upload .yc-upload-drag .yc-upload-drag-text,.yc-upload-disabled .yc-upload .yc-upload-picture-card .yc-upload-drag-text,.yc-upload-disabled .yc-upload .yc-upload-drag .yc-upload-tip,.yc-upload-disabled .yc-upload .yc-upload-picture-card .yc-upload-tip,.yc-upload-disabled .yc-upload .yc-upload-drag .yc-upload-drag-icon,.yc-upload-disabled .yc-upload .yc-upload-picture-card .yc-upload-drag-icon,.yc-upload-disabled .yc-upload .yc-upload-drag .yc-upload-picture-card-text,.yc-upload-disabled .yc-upload .yc-upload-picture-card .yc-upload-picture-card-text{color:var(--color-text-4)}

package/es/Upload/index.d.ts

@@ -0,0 +1,123 @@
+import { App } from 'vue';
+import { default as _Upload } from './Upload.vue';
+export type UploadInstance = InstanceType<typeof _Upload>;
+export * from './type';
+declare const Upload: {
+    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./type').UploadProps> & Readonly<{
+        onChange?: ((fileList: import('./type').FileItem[], files: File[]) => any) | undefined;
+        onPreview?: ((fileItem: import('./type').FileItem) => any) | undefined;
+        "onUpdate:fileList"?: ((value: import('./type').FileItem[]) => any) | undefined;
+        "onExceed-limit"?: ((fileList: import('./type').FileItem[], files: File[]) => any) | undefined;
+    }>, {
+        updateFile: (id: string, File: File) => void;
+        upload: (files: File[]) => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        change: (fileList: import('./type').FileItem[], files: File[]) => any;
+        preview: (fileItem: import('./type').FileItem) => any;
+        "update:fileList": (value: import('./type').FileItem[]) => any;
+        "exceed-limit": (fileList: import('./type').FileItem[], files: File[]) => any;
+    }, import('vue').PublicProps, {
+        name: import('./type').FileName;
+        disabled: boolean;
+        multiple: boolean;
+        tip: string;
+        limit: number;
+        draggable: boolean;
+        fileList: import('./type').FileItem[];
+        defaultFileList: import('./type').FileItem[];
+        directory: boolean;
+        listType: import('./type').FileListType;
+        imageLoading: import('./type').ImageLoading;
+        download: boolean;
+        showLink: boolean;
+        customIcon: import('./type').CustomIcon;
+        showRemoveButton: boolean;
+        showPreviewButton: boolean;
+        accept: string;
+        showFileList: boolean;
+        showUploadButton: boolean;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        uploadRef: HTMLDivElement;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import('./type').UploadProps> & Readonly<{
+        onChange?: ((fileList: import('./type').FileItem[], files: File[]) => any) | undefined;
+        onPreview?: ((fileItem: import('./type').FileItem) => any) | undefined;
+        "onUpdate:fileList"?: ((value: import('./type').FileItem[]) => any) | undefined;
+        "onExceed-limit"?: ((fileList: import('./type').FileItem[], files: File[]) => any) | undefined;
+    }>, {
+        updateFile: (id: string, File: File) => void;
+        upload: (files: File[]) => void;
+    }, {}, {}, {}, {
+        name: import('./type').FileName;
+        disabled: boolean;
+        multiple: boolean;
+        tip: string;
+        limit: number;
+        draggable: boolean;
+        fileList: import('./type').FileItem[];
+        defaultFileList: import('./type').FileItem[];
+        directory: boolean;
+        listType: import('./type').FileListType;
+        imageLoading: import('./type').ImageLoading;
+        download: boolean;
+        showLink: boolean;
+        customIcon: import('./type').CustomIcon;
+        showRemoveButton: boolean;
+        showPreviewButton: boolean;
+        accept: string;
+        showFileList: boolean;
+        showUploadButton: boolean;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import('vue').ComponentOptionsBase<Readonly<import('./type').UploadProps> & Readonly<{
+    onChange?: ((fileList: import('./type').FileItem[], files: File[]) => any) | undefined;
+    onPreview?: ((fileItem: import('./type').FileItem) => any) | undefined;
+    "onUpdate:fileList"?: ((value: import('./type').FileItem[]) => any) | undefined;
+    "onExceed-limit"?: ((fileList: import('./type').FileItem[], files: File[]) => any) | undefined;
+}>, {
+    updateFile: (id: string, File: File) => void;
+    upload: (files: File[]) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (fileList: import('./type').FileItem[], files: File[]) => any;
+    preview: (fileItem: import('./type').FileItem) => any;
+    "update:fileList": (value: import('./type').FileItem[]) => any;
+    "exceed-limit": (fileList: import('./type').FileItem[], files: File[]) => any;
+}, string, {
+    name: import('./type').FileName;
+    disabled: boolean;
+    multiple: boolean;
+    tip: string;
+    limit: number;
+    draggable: boolean;
+    fileList: import('./type').FileItem[];
+    defaultFileList: import('./type').FileItem[];
+    directory: boolean;
+    listType: import('./type').FileListType;
+    imageLoading: import('./type').ImageLoading;
+    download: boolean;
+    showLink: boolean;
+    customIcon: import('./type').CustomIcon;
+    showRemoveButton: boolean;
+    showPreviewButton: boolean;
+    accept: string;
+    showFileList: boolean;
+    showUploadButton: boolean;
+}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+    $slots: any;
+}) & {
+    install: (app: App) => void;
+};
+declare module 'vue' {
+    interface GlobalComponents {
+        YcUpload: typeof Upload;
+    }
+}
+export default Upload;