naive-ui 2.35.0 → 2.37.0

package/es/upload/src/UploadFile.mjs

@@ -0,0 +1,377 @@
+var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+};
+import { h, defineComponent, computed, inject, ref, watchEffect } from 'vue';
+import { useMemo } from 'vooks';
+import { CancelIcon, TrashIcon, AttachIcon, RetryIcon, DownloadIcon, EyeIcon } from "../../_internal/icons/index.mjs";
+import { NImage } from "../../image/index.mjs";
+import { NButton } from "../../button/index.mjs";
+import { NIconSwitchTransition, NBaseIcon } from "../../_internal/index.mjs";
+import { warn, download } from "../../_utils/index.mjs";
+import NUploadProgress from "./UploadProgress.mjs";
+import { uploadInjectionKey } from "./interface.mjs";
+import { imageIcon, documentIcon } from "./icons.mjs";
+import { isImageFile } from "./utils.mjs";
+const buttonThemeOverrides = {
+  paddingMedium: '0 3px',
+  heightMedium: '24px',
+  iconSizeMedium: '18px'
+};
+export default defineComponent({
+  name: 'UploadFile',
+  props: {
+    clsPrefix: {
+      type: String,
+      required: true
+    },
+    file: {
+      type: Object,
+      required: true
+    },
+    listType: {
+      type: String,
+      required: true
+    }
+  },
+  setup(props) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const NUpload = inject(uploadInjectionKey);
+    const imageRef = ref(null);
+    const thumbnailUrlRef = ref('');
+    const progressStatusRef = computed(() => {
+      const {
+        file
+      } = props;
+      if (file.status === 'finished') return 'success';
+      if (file.status === 'error') return 'error';
+      return 'info';
+    });
+    const buttonTypeRef = computed(() => {
+      const {
+        file
+      } = props;
+      if (file.status === 'error') return 'error';
+      return undefined;
+    });
+    const showProgressRef = computed(() => {
+      const {
+        file
+      } = props;
+      return file.status === 'uploading';
+    });
+    const showCancelButtonRef = computed(() => {
+      if (!NUpload.showCancelButtonRef.value) return false;
+      const {
+        file
+      } = props;
+      return ['uploading', 'pending', 'error'].includes(file.status);
+    });
+    const showRemoveButtonRef = computed(() => {
+      if (!NUpload.showRemoveButtonRef.value) return false;
+      const {
+        file
+      } = props;
+      return ['finished'].includes(file.status);
+    });
+    const showDownloadButtonRef = computed(() => {
+      if (!NUpload.showDownloadButtonRef.value) return false;
+      const {
+        file
+      } = props;
+      return ['finished'].includes(file.status);
+    });
+    const showRetryButtonRef = computed(() => {
+      if (!NUpload.showRetryButtonRef.value) return false;
+      const {
+        file
+      } = props;
+      return ['error'].includes(file.status);
+    });
+    const mergedThumbnailUrlRef = useMemo(() => {
+      return thumbnailUrlRef.value || props.file.thumbnailUrl || props.file.url;
+    });
+    const showPreviewButtonRef = computed(() => {
+      if (!NUpload.showPreviewButtonRef.value) return false;
+      const {
+        file: {
+          status
+        },
+        listType
+      } = props;
+      return ['finished'].includes(status) && mergedThumbnailUrlRef.value && listType === 'image-card';
+    });
+    function handleRetryClick() {
+      NUpload.submit(props.file.id);
+    }
+    function handleRemoveOrCancelClick(e) {
+      e.preventDefault();
+      const {
+        file
+      } = props;
+      if (['finished', 'pending', 'error'].includes(file.status)) {
+        handleRemove(file);
+      } else if (['uploading'].includes(file.status)) {
+        handleAbort(file);
+      } else {
+        warn('upload', 'The button clicked type is unknown.');
+      }
+    }
+    function handleDownloadClick(e) {
+      e.preventDefault();
+      handleDownload(props.file);
+    }
+    function handleRemove(file) {
+      const {
+        xhrMap,
+        doChange,
+        onRemoveRef: {
+          value: onRemove
+        },
+        mergedFileListRef: {
+          value: mergedFileList
+        }
+      } = NUpload;
+      void Promise.resolve(onRemove ? onRemove({
+        file: Object.assign({}, file),
+        fileList: mergedFileList
+      }) : true).then(result => {
+        if (result === false) return;
+        const fileAfterChange = Object.assign({}, file, {
+          status: 'removed'
+        });
+        xhrMap.delete(file.id);
+        doChange(fileAfterChange, undefined, {
+          remove: true
+        });
+      });
+    }
+    function handleDownload(file) {
+      const {
+        onDownloadRef: {
+          value: onDownload
+        }
+      } = NUpload;
+      void Promise.resolve(onDownload ? onDownload(Object.assign({}, file)) : true).then(res => {
+        if (res !== false) {
+          download(file.url, file.name);
+        }
+      });
+    }
+    function handleAbort(file) {
+      const {
+        xhrMap
+      } = NUpload;
+      const xhr = xhrMap.get(file.id);
+      xhr === null || xhr === void 0 ? void 0 : xhr.abort();
+      handleRemove(Object.assign({}, file));
+    }
+    function handlePreviewClick() {
+      const {
+        onPreviewRef: {
+          value: onPreview
+        }
+      } = NUpload;
+      if (onPreview) {
+        onPreview(props.file);
+      } else if (props.listType === 'image-card') {
+        const {
+          value
+        } = imageRef;
+        if (!value) return;
+        value.click();
+      }
+    }
+    const deriveFileThumbnailUrl = () => __awaiter(this, void 0, void 0, function* () {
+      const {
+        listType
+      } = props;
+      if (listType !== 'image' && listType !== 'image-card') {
+        return;
+      }
+      if (NUpload.shouldUseThumbnailUrlRef.value(props.file)) {
+        thumbnailUrlRef.value = yield NUpload.getFileThumbnailUrlResolver(props.file);
+      }
+    });
+    watchEffect(() => {
+      void deriveFileThumbnailUrl();
+    });
+    return {
+      mergedTheme: NUpload.mergedThemeRef,
+      progressStatus: progressStatusRef,
+      buttonType: buttonTypeRef,
+      showProgress: showProgressRef,
+      disabled: NUpload.mergedDisabledRef,
+      showCancelButton: showCancelButtonRef,
+      showRemoveButton: showRemoveButtonRef,
+      showDownloadButton: showDownloadButtonRef,
+      showRetryButton: showRetryButtonRef,
+      showPreviewButton: showPreviewButtonRef,
+      mergedThumbnailUrl: mergedThumbnailUrlRef,
+      shouldUseThumbnailUrl: NUpload.shouldUseThumbnailUrlRef,
+      renderIcon: NUpload.renderIconRef,
+      imageRef,
+      handleRemoveOrCancelClick,
+      handleDownloadClick,
+      handleRetryClick,
+      handlePreviewClick
+    };
+  },
+  render() {
+    const {
+      clsPrefix,
+      mergedTheme,
+      listType,
+      file,
+      renderIcon
+    } = this;
+    // if there is text list type, show file icon
+    let icon;
+    const isImageType = listType === 'image';
+    const isImageCardType = listType === 'image-card';
+    if (isImageType || isImageCardType) {
+      icon = !this.shouldUseThumbnailUrl(file) || !this.mergedThumbnailUrl ? h("span", {
+        class: `${clsPrefix}-upload-file-info__thumbnail`
+      }, renderIcon ? renderIcon(file) : isImageFile(file) ? h(NBaseIcon, {
+        clsPrefix: clsPrefix
+      }, {
+        default: () => imageIcon
+      }) : h(NBaseIcon, {
+        clsPrefix: clsPrefix
+      }, {
+        default: () => documentIcon
+      })) : h("a", {
+        rel: "noopener noreferer",
+        target: "_blank",
+        href: file.url || undefined,
+        class: `${clsPrefix}-upload-file-info__thumbnail`,
+        onClick: this.handlePreviewClick
+      }, listType === 'image-card' ? h(NImage, {
+        src: this.mergedThumbnailUrl || undefined,
+        previewSrc: file.url || undefined,
+        alt: file.name,
+        ref: "imageRef"
+      }) : h("img", {
+        src: this.mergedThumbnailUrl || undefined,
+        alt: file.name
+      }));
+    } else {
+      icon = h("span", {
+        class: `${clsPrefix}-upload-file-info__thumbnail`
+      }, renderIcon ? renderIcon(file) : h(NBaseIcon, {
+        clsPrefix: clsPrefix
+      }, {
+        default: () => h(AttachIcon, null)
+      }));
+    }
+    const progress = h(NUploadProgress, {
+      show: this.showProgress,
+      percentage: file.percentage || 0,
+      status: this.progressStatus
+    });
+    const showName = listType === 'text' || listType === 'image';
+    return h("div", {
+      class: [`${clsPrefix}-upload-file`, `${clsPrefix}-upload-file--${this.progressStatus}-status`, file.url && file.status !== 'error' && listType !== 'image-card' && `${clsPrefix}-upload-file--with-url`, `${clsPrefix}-upload-file--${listType}-type`]
+    }, h("div", {
+      class: `${clsPrefix}-upload-file-info`
+    }, icon, h("div", {
+      class: `${clsPrefix}-upload-file-info__name`
+    }, showName && (file.url && file.status !== 'error' ? h("a", {
+      rel: "noopener noreferer",
+      target: "_blank",
+      href: file.url || undefined,
+      onClick: this.handlePreviewClick
+    }, file.name) : h("span", {
+      onClick: this.handlePreviewClick
+    }, file.name)), isImageType && progress), h("div", {
+      class: [`${clsPrefix}-upload-file-info__action`, `${clsPrefix}-upload-file-info__action--${listType}-type`]
+    }, this.showPreviewButton ? h(NButton, {
+      key: "preview",
+      quaternary: true,
+      type: this.buttonType,
+      onClick: this.handlePreviewClick,
+      theme: mergedTheme.peers.Button,
+      themeOverrides: mergedTheme.peerOverrides.Button,
+      builtinThemeOverrides: buttonThemeOverrides
+    }, {
+      icon: () => h(NBaseIcon, {
+        clsPrefix: clsPrefix
+      }, {
+        default: () => h(EyeIcon, null)
+      })
+    }) : null, (this.showRemoveButton || this.showCancelButton) && !this.disabled && h(NButton, {
+      key: "cancelOrTrash",
+      theme: mergedTheme.peers.Button,
+      themeOverrides: mergedTheme.peerOverrides.Button,
+      quaternary: true,
+      builtinThemeOverrides: buttonThemeOverrides,
+      type: this.buttonType,
+      onClick: this.handleRemoveOrCancelClick
+    }, {
+      icon: () => h(NIconSwitchTransition, null, {
+        default: () => this.showRemoveButton ? h(NBaseIcon, {
+          clsPrefix: clsPrefix,
+          key: "trash"
+        }, {
+          default: () => h(TrashIcon, null)
+        }) : h(NBaseIcon, {
+          clsPrefix: clsPrefix,
+          key: "cancel"
+        }, {
+          default: () => h(CancelIcon, null)
+        })
+      })
+    }), this.showRetryButton && !this.disabled && h(NButton, {
+      key: "retry",
+      quaternary: true,
+      type: this.buttonType,
+      onClick: this.handleRetryClick,
+      theme: mergedTheme.peers.Button,
+      themeOverrides: mergedTheme.peerOverrides.Button,
+      builtinThemeOverrides: buttonThemeOverrides
+    }, {
+      icon: () => h(NBaseIcon, {
+        clsPrefix: clsPrefix
+      }, {
+        default: () => h(RetryIcon, null)
+      })
+    }), this.showDownloadButton ? h(NButton, {
+      key: "download",
+      quaternary: true,
+      type: this.buttonType,
+      onClick: this.handleDownloadClick,
+      theme: mergedTheme.peers.Button,
+      themeOverrides: mergedTheme.peerOverrides.Button,
+      builtinThemeOverrides: buttonThemeOverrides
+    }, {
+      icon: () => h(NBaseIcon, {
+        clsPrefix: clsPrefix
+      }, {
+        default: () => h(DownloadIcon, null)
+      })
+    }) : null)), !isImageType && progress);
+  }
+});

package/es/upload/src/UploadFileList.mjs

@@ -0,0 +1,57 @@
+import { h, defineComponent, inject, computed } from 'vue';
+import { throwError } from "../../_utils/index.mjs";
+import { uploadInjectionKey } from "./interface.mjs";
+import NUploadFile from "./UploadFile.mjs";
+import { NImageGroup } from "../../image/index.mjs";
+import { NFadeInExpandTransition } from "../../_internal/index.mjs";
+import NUploadTrigger from "./UploadTrigger.mjs";
+export default defineComponent({
+  name: 'UploadFileList',
+  setup(_, {
+    slots
+  }) {
+    const NUpload = inject(uploadInjectionKey, null);
+    if (!NUpload) {
+      throwError('upload-file-list', '`n-upload-file-list` must be placed inside `n-upload`.');
+    }
+    const {
+      abstractRef,
+      mergedClsPrefixRef,
+      listTypeRef,
+      mergedFileListRef,
+      fileListClassRef,
+      fileListStyleRef,
+      cssVarsRef,
+      themeClassRef,
+      maxReachedRef,
+      showTriggerRef,
+      imageGroupPropsRef
+    } = NUpload;
+    const isImageCardTypeRef = computed(() => listTypeRef.value === 'image-card');
+    const renderFileList = () => mergedFileListRef.value.map(file => h(NUploadFile, {
+      clsPrefix: mergedClsPrefixRef.value,
+      key: file.id,
+      file: file,
+      listType: listTypeRef.value
+    }));
+    const renderUploadFileList = () => isImageCardTypeRef.value ? h(NImageGroup, Object.assign({}, imageGroupPropsRef.value), {
+      default: renderFileList
+    }) : h(NFadeInExpandTransition, {
+      group: true
+    }, {
+      default: renderFileList
+    });
+    return () => {
+      const {
+        value: mergedClsPrefix
+      } = mergedClsPrefixRef;
+      const {
+        value: abstract
+      } = abstractRef;
+      return h("div", {
+        class: [`${mergedClsPrefix}-upload-file-list`, isImageCardTypeRef.value && `${mergedClsPrefix}-upload-file-list--grid`, abstract ? themeClassRef === null || themeClassRef === void 0 ? void 0 : themeClassRef.value : undefined, fileListClassRef.value],
+        style: [abstract && cssVarsRef ? cssVarsRef.value : '', fileListStyleRef.value]
+      }, renderUploadFileList(), showTriggerRef.value && !maxReachedRef.value && isImageCardTypeRef.value && h(NUploadTrigger, null, slots));
+    };
+  }
+});

package/es/upload/src/UploadProgress.mjs

@@ -0,0 +1,38 @@
+import { h, defineComponent, inject } from 'vue';
+import { NFadeInExpandTransition } from "../../_internal/index.mjs";
+import { NProgress } from "../../progress/index.mjs";
+import { uploadInjectionKey } from "./interface.mjs";
+export default defineComponent({
+  name: 'UploadProgress',
+  props: {
+    show: Boolean,
+    percentage: {
+      type: Number,
+      required: true
+    },
+    status: {
+      type: String,
+      required: true
+    }
+  },
+  setup() {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const NUpload = inject(uploadInjectionKey);
+    return {
+      mergedTheme: NUpload.mergedThemeRef
+    };
+  },
+  render() {
+    return h(NFadeInExpandTransition, null, {
+      default: () => this.show ? h(NProgress, {
+        type: "line",
+        showIndicator: false,
+        percentage: this.percentage,
+        status: this.status,
+        height: 2,
+        theme: this.mergedTheme.peers.Progress,
+        themeOverrides: this.mergedTheme.peerOverrides.Progress
+      }) : null
+    });
+  }
+});

package/es/upload/src/UploadTrigger.mjs

@@ -0,0 +1,96 @@
+import { h, defineComponent, inject, computed } from 'vue';
+import { AddIcon } from "../../_internal/icons/index.mjs";
+import { NBaseIcon } from "../../_internal/index.mjs";
+import { resolveSlot, throwError } from "../../_utils/index.mjs";
+import { uploadInjectionKey } from "./interface.mjs";
+import { getFilesFromEntries } from "./utils.mjs";
+import NUploadDragger from "./UploadDragger.mjs";
+export default defineComponent({
+  name: 'UploadTrigger',
+  props: {
+    abstract: Boolean
+  },
+  setup(props, {
+    slots
+  }) {
+    const NUpload = inject(uploadInjectionKey, null);
+    if (!NUpload) {
+      throwError('upload-trigger', '`n-upload-trigger` must be placed inside `n-upload`.');
+    }
+    const {
+      mergedClsPrefixRef,
+      mergedDisabledRef,
+      maxReachedRef,
+      listTypeRef,
+      dragOverRef,
+      openOpenFileDialog,
+      draggerInsideRef,
+      handleFileAddition,
+      mergedDirectoryDndRef,
+      triggerClassRef,
+      triggerStyleRef
+    } = NUpload;
+    const isImageCardTypeRef = computed(() => listTypeRef.value === 'image-card');
+    function handleTriggerClick() {
+      if (mergedDisabledRef.value || maxReachedRef.value) return;
+      openOpenFileDialog();
+    }
+    function handleTriggerDragOver(e) {
+      e.preventDefault();
+      dragOverRef.value = true;
+    }
+    function handleTriggerDragEnter(e) {
+      e.preventDefault();
+      dragOverRef.value = true;
+    }
+    function handleTriggerDragLeave(e) {
+      e.preventDefault();
+      dragOverRef.value = false;
+    }
+    function handleTriggerDrop(e) {
+      var _a;
+      e.preventDefault();
+      if (!draggerInsideRef.value || mergedDisabledRef.value || maxReachedRef.value) {
+        dragOverRef.value = false;
+        return;
+      }
+      const dataTransferItems = (_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.items;
+      if (dataTransferItems === null || dataTransferItems === void 0 ? void 0 : dataTransferItems.length) {
+        void getFilesFromEntries(Array.from(dataTransferItems).map(item => item.webkitGetAsEntry()), mergedDirectoryDndRef.value).then(files => {
+          handleFileAddition(files);
+        }).finally(() => {
+          dragOverRef.value = false;
+        });
+      } else {
+        dragOverRef.value = false;
+      }
+    }
+    return () => {
+      var _a;
+      const {
+        value: mergedClsPrefix
+      } = mergedClsPrefixRef;
+      return props.abstract ? (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots, {
+        handleClick: handleTriggerClick,
+        handleDrop: handleTriggerDrop,
+        handleDragOver: handleTriggerDragOver,
+        handleDragEnter: handleTriggerDragEnter,
+        handleDragLeave: handleTriggerDragLeave
+      }) : h("div", {
+        class: [`${mergedClsPrefix}-upload-trigger`, (mergedDisabledRef.value || maxReachedRef.value) && `${mergedClsPrefix}-upload-trigger--disabled`, isImageCardTypeRef.value && `${mergedClsPrefix}-upload-trigger--image-card`, triggerClassRef.value],
+        style: triggerStyleRef.value,
+        onClick: handleTriggerClick,
+        onDrop: handleTriggerDrop,
+        onDragover: handleTriggerDragOver,
+        onDragenter: handleTriggerDragEnter,
+        onDragleave: handleTriggerDragLeave
+      }, isImageCardTypeRef.value ? h(NUploadDragger, null, {
+        default: () => resolveSlot(slots.default, () => [h(NBaseIcon, {
+          clsPrefix: mergedClsPrefix
+        }, {
+          default: () => h(AddIcon, null)
+        })])
+      }) : slots);
+    };
+  }
+});

package/es/upload/src/icons.mjs

@@ -0,0 +1,23 @@
+import { h } from 'vue';
+/**
+ * Since image is too large compared with normal icons, we keep it inside upload
+ * now.
+ */
+export const imageIcon = h("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 28 28"
+}, h("g", {
+  fill: "none"
+}, h("path", {
+  d: "M21.75 3A3.25 3.25 0 0 1 25 6.25v15.5A3.25 3.25 0 0 1 21.75 25H6.25A3.25 3.25 0 0 1 3 21.75V6.25A3.25 3.25 0 0 1 6.25 3h15.5zm.583 20.4l-7.807-7.68a.75.75 0 0 0-.968-.07l-.084.07l-7.808 7.68c.183.065.38.1.584.1h15.5c.204 0 .4-.035.583-.1l-7.807-7.68l7.807 7.68zM21.75 4.5H6.25A1.75 1.75 0 0 0 4.5 6.25v15.5c0 .208.036.408.103.593l7.82-7.692a2.25 2.25 0 0 1 3.026-.117l.129.117l7.82 7.692c.066-.185.102-.385.102-.593V6.25a1.75 1.75 0 0 0-1.75-1.75zm-3.25 3a2.5 2.5 0 1 1 0 5a2.5 2.5 0 0 1 0-5zm0 1.5a1 1 0 1 0 0 2a1 1 0 0 0 0-2z",
+  fill: "currentColor"
+})));
+export const documentIcon = h("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 28 28"
+}, h("g", {
+  fill: "none"
+}, h("path", {
+  d: "M6.4 2A2.4 2.4 0 0 0 4 4.4v19.2A2.4 2.4 0 0 0 6.4 26h15.2a2.4 2.4 0 0 0 2.4-2.4V11.578c0-.729-.29-1.428-.805-1.944l-6.931-6.931A2.4 2.4 0 0 0 14.567 2H6.4zm-.9 2.4a.9.9 0 0 1 .9-.9H14V10a2 2 0 0 0 2 2h6.5v11.6a.9.9 0 0 1-.9.9H6.4a.9.9 0 0 1-.9-.9V4.4zm16.44 6.1H16a.5.5 0 0 1-.5-.5V4.06l6.44 6.44z",
+  fill: "currentColor"
+})));

package/es/upload/src/interface.d.ts

@@ -65,6 +65,7 @@ export interface UploadInjection {
     draggerInsideRef: {
         value: boolean;
     };
+    fileListClassRef: Ref<string | undefined>;
     fileListStyleRef: Ref<string | CSSProperties | undefined>;
     mergedDisabledRef: Ref<boolean>;
     maxReachedRef: Ref<boolean>;
@@ -74,6 +75,7 @@ export interface UploadInjection {
     themeClassRef: undefined | Ref<string>;
     mergedDirectoryDndRef: Ref<boolean>;
     acceptRef: Ref<string | undefined>;
+    triggerClassRef: Ref<string | undefined>;
     triggerStyleRef: Ref<CSSProperties | string | undefined>;
     doChange: DoChange;
     onRender: undefined | (() => void);

package/es/upload/src/interface.mjs

@@ -0,0 +1,2 @@
+import { createInjectionKey } from "../../_utils/index.mjs";
+export const uploadInjectionKey = createInjectionKey('n-upload');