@uzum-tech/ui 2.3.0 → 2.3.2

package/es/upload/src/Upload.mjs

@@ -30,128 +30,14 @@ import { computed, defineComponent, Fragment, h, nextTick, provide, ref, Telepor
 import { useConfig, useFormItem, useLocale, useTheme, useThemeClass } from "../../_mixins/index.mjs";
 import { call, createKey, throwError, warn } from "../../_utils/index.mjs";
 import { uploadLight } from "../styles/index.mjs";
-import { uploadInjectionKey } from "./interface.mjs";
+import { uploadInjectionKey, uploadProps } from "./interface.mjs";
 import style from "./styles/index.cssr.mjs";
 import { uploadDraggerKey } from "./UploadDragger.mjs";
 import UUploadFileList from "./UploadFileList.mjs";
 import UUploadTrigger from "./UploadTrigger.mjs";
 import { useUpload } from "./useUpload.mjs";
 import { useUploadInternals } from "./useUploadInternals.mjs";
-import { createImageDataUrl, createSettledFileInfo, environmentSupportFile, isImageFile, matchType } from "./utils.mjs";
-export const uploadProps = Object.assign(Object.assign({}, useTheme.props), {
-  name: {
-    type: String,
-    default: 'file'
-  },
-  accept: String,
-  action: String,
-  customRequest: Function,
-  directory: Boolean,
-  directoryDnd: {
-    type: Boolean,
-    default: undefined
-  },
-  method: {
-    type: String,
-    default: 'POST'
-  },
-  multiple: Boolean,
-  showFileList: {
-    type: Boolean,
-    default: true
-  },
-  data: [Object, Function],
-  headers: [Object, Function],
-  withCredentials: Boolean,
-  responseType: {
-    type: String,
-    default: ''
-  },
-  disabled: {
-    type: Boolean,
-    default: undefined
-  },
-  vertical: {
-    type: Boolean,
-    default: false
-  },
-  icon: Object,
-  onChange: Function,
-  onRemove: Function,
-  onFinish: Function,
-  onError: Function,
-  onRetry: Function,
-  onBeforeUpload: Function,
-  isErrorState: Function,
-  /** currently not used */
-  onDownload: Function,
-  defaultUpload: {
-    type: Boolean,
-    default: true
-  },
-  fileList: Array,
-  'onUpdate:fileList': [Function, Array],
-  onUpdateFileList: [Function, Array],
-  fileListClass: String,
-  fileListStyle: [String, Object],
-  defaultFileList: {
-    type: Array,
-    default: () => []
-  },
-  showCancelButton: {
-    type: Boolean,
-    default: true
-  },
-  showRemoveButton: {
-    type: Boolean,
-    default: true
-  },
-  showDownloadButton: Boolean,
-  showRetryButton: {
-    type: Boolean,
-    default: true
-  },
-  customDownload: Function,
-  showPreviewButton: {
-    type: Boolean,
-    default: true
-  },
-  listType: {
-    type: String,
-    default: 'text'
-  },
-  onPreview: Function,
-  shouldUseThumbnailUrl: {
-    type: Function,
-    default: file => {
-      if (!environmentSupportFile) return false;
-      return isImageFile(file);
-    }
-  },
-  createThumbnailUrl: Function,
-  abstract: Boolean,
-  max: Number,
-  showTrigger: {
-    type: Boolean,
-    default: true
-  },
-  imageGroupProps: Object,
-  inputProps: Object,
-  triggerClass: String,
-  triggerStyle: [String, Object],
-  renderIcon: Function,
-  label: String,
-  size: {
-    type: String,
-    default: 'medium'
-  },
-  title: String,
-  subtitle: String,
-  noIcon: {
-    type: Boolean,
-    default: false
-  }
-});
+import { createImageDataUrl, createSettledFileInfo, getFilePreviewSrc, isFileSizeExceeded, matchType } from "./utils.mjs";
 export default defineComponent({
   name: 'Upload',
   props: uploadProps,
@@ -197,14 +83,13 @@ export default defineComponent({
       var _a;
       (_a = inputElRef.value) === null || _a === void 0 ? void 0 : _a.click();
     }
-    function handleFileInputChange(e) {
-      const target = e.target;
+    function handleFileInputChange(event) {
+      const target = event.target;
       handleFileAddition(target.files ? Array.from(target.files).map(file => ({
         file,
         entry: null,
         source: 'input'
-      })) : null, e);
-      // May have bug! set to null?
+      })) : null, event);
       target.value = '';
     }
     function doUpdateFileList(files) {
@@ -222,7 +107,7 @@ export default defineComponent({
       uploadKeyIndexRef.value += 1;
       return key;
     }
-    function handleFileAddition(fileAndEntries, e) {
+    function handleFileAddition(fileAndEntries, event) {
       if (!fileAndEntries || fileAndEntries.length === 0) return;
       const {
         onBeforeUpload
@@ -230,7 +115,8 @@ export default defineComponent({
       fileAndEntries = mergedMultipleRef.value ? fileAndEntries : [fileAndEntries[0]];
       const {
         max,
-        accept
+        accept,
+        maxSize
       } = props;
       fileAndEntries = fileAndEntries.filter(({
         file,
@@ -263,6 +149,10 @@ export default defineComponent({
           thumbnailUrl: null,
           fullPath: (_b = entry === null || entry === void 0 ? void 0 : entry.fullPath) !== null && _b !== void 0 ? _b : `/${file.webkitRelativePath || file.name}`
         };
+        if (isFileSizeExceeded(file, maxSize)) {
+          fileInfo.status = 'error';
+          return fileInfo;
+        }
         if (!onBeforeUpload || (yield onBeforeUpload({
           file: fileInfo,
           fileList: mergedFileListRef.value
@@ -274,7 +164,7 @@ export default defineComponent({
         let nextTickChain = Promise.resolve();
         fileInfos.forEach(fileInfo => {
           nextTickChain = nextTickChain.then(nextTick).then(() => {
-            fileInfo && doChange(fileInfo, e, {
+            fileInfo && doChange(fileInfo, event, {
               append: true
             });
           });
@@ -303,6 +193,15 @@ export default defineComponent({
           status
         } = file;
         if (status === 'pending' || status === 'error' && shouldReupload) {
+          if (isFileSizeExceeded(file.file, props.maxSize)) {
+            if (status === 'pending') {
+              const fileAfterChange = Object.assign({}, file, {
+                status: 'error'
+              });
+              doChange(fileAfterChange);
+            }
+            return;
+          }
           if (props.customRequest) {
             customSubmitImpl({
               inst: {
@@ -383,6 +282,21 @@ export default defineComponent({
       }
       return '';
     }
+    function isFilePreviewable(file) {
+      return props.shouldUseThumbnailUrl(file) && getFilePreviewSrc(file) !== null;
+    }
+    const previewFileListRef = computed(() => mergedFileListRef.value.filter(isFilePreviewable));
+    const previewSrcListRef = computed(() => previewFileListRef.value.map(file => getFilePreviewSrc(file)));
+    const previewShowRef = ref(false);
+    const previewCurrentRef = ref(0);
+    function openFilePreview(file) {
+      const index = previewFileListRef.value.findIndex(({
+        id
+      }) => id === file.id);
+      if (index < 0) return;
+      previewCurrentRef.value = index;
+      previewShowRef.value = true;
+    }
     const cssVarsRef = computed(() => {
       const {
         value: size
@@ -504,7 +418,12 @@ export default defineComponent({
       mergedDirectoryDndRef: computed(() => {
         var _a;
         return (_a = props.directoryDnd) !== null && _a !== void 0 ? _a : props.directory;
-      })
+      }),
+      previewSrcListRef,
+      previewShowRef,
+      previewCurrentRef,
+      isFilePreviewable,
+      openFilePreview
     });
     const exposedMethods = {
       clear: () => {

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

@@ -601,7 +601,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     showRemoveButton: import("vue").ComputedRef<boolean>;
     showDownloadButton: import("vue").ComputedRef<boolean>;
     showRetryButton: import("vue").ComputedRef<boolean>;
-    showPreviewButton: import("vue").ComputedRef<boolean | "" | null>;
+    showPreviewButton: import("vue").ComputedRef<boolean>;
     mergedThumbnailUrl: import("vue").ComputedRef<string | null>;
     shouldUseThumbnailUrl: import("vue").Ref<import("./interface").ShouldUseThumbnailUrl, import("./interface").ShouldUseThumbnailUrl>;
     renderIcon: import("vue").Ref<import("./interface").RenderIcon | undefined, import("./interface").RenderIcon | undefined>;

package/es/upload/src/UploadFile.mjs

@@ -117,7 +117,11 @@ export default defineComponent({
         },
         listType
       } = props;
-      return ['finished'].includes(status) && mergedThumbnailUrlRef.value && listType === 'image-card';
+      if (!['finished'].includes(status)) return false;
+      if (listType === 'preview-list') {
+        return UUpload.isFilePreviewable(props.file);
+      }
+      return !!mergedThumbnailUrlRef.value && listType === 'image-card';
     });
     function handleRetryClick() {
       return __awaiter(this, void 0, void 0, function* () {
@@ -211,6 +215,8 @@ export default defineComponent({
       } = UUpload;
       if (onPreview) {
         onPreview(props.file);
+      } else if (props.listType === 'preview-list') {
+        UUpload.openFilePreview(props.file);
       } else if (props.listType === 'image-card') {
         const {
           value
@@ -295,7 +301,7 @@ export default defineComponent({
       class: [!this.vertical && !imageCardTypes.includes(listType) && `${clsPrefix}-upload-file-loader--default`]
     }, {
       default: () => h("div", {
-        class: [`${clsPrefix}-upload-file`, `${clsPrefix}-upload-file--${this.progressStatus}-status`, file.url && file.status !== 'error' && imageCardTypes.includes(listType) && `${clsPrefix}-upload-file--with-url`, `${clsPrefix}-upload-file--${listType === 'image' || listType === 'image-card' ? 'image-card' : 'text'}-type`]
+        class: [`${clsPrefix}-upload-file`, `${clsPrefix}-upload-file--${this.progressStatus}-status`, file.url && file.status !== 'error' && imageCardTypes.includes(listType) && `${clsPrefix}-upload-file--with-url`, `${clsPrefix}-upload-file--${listType === 'image' || listType === 'image-card' ? 'image-card' : 'text'}-type`, listType === 'preview-list' && `${clsPrefix}-upload-file--preview-list-type`]
       }, h("div", {
         class: [`${clsPrefix}-upload-file-info`, imageCardTypes.includes(listType) && `${clsPrefix}-upload-file-info--vertical`]
       }, icon, h("div", {

package/es/upload/src/UploadFileList.mjs

@@ -25,9 +25,13 @@ export default defineComponent({
       themeClassRef,
       maxReachedRef,
       showTriggerRef,
-      imageGroupPropsRef
+      imageGroupPropsRef,
+      previewSrcListRef,
+      previewShowRef,
+      previewCurrentRef
     } = UUpload;
     const isImageCardTypeRef = computed(() => listTypeRef.value === 'image-card' || listTypeRef.value === 'image');
+    const isPreviewListTypeRef = computed(() => listTypeRef.value === 'preview-list');
     const renderFileList = () => mergedFileListRef.value.map(file => h(UUploadFile, {
       clsPrefix: mergedClsPrefixRef.value,
       key: file.id,
@@ -41,6 +45,17 @@ export default defineComponent({
     }, {
       default: renderFileList
     });
+    const renderPreview = () => h(UImageGroup, Object.assign({}, imageGroupPropsRef.value, {
+      srcList: previewSrcListRef.value,
+      show: previewShowRef.value,
+      current: previewCurrentRef.value,
+      onUpdateShow: show => {
+        previewShowRef.value = show;
+      },
+      onUpdateCurrent: current => {
+        previewCurrentRef.value = current;
+      }
+    }));
     return () => {
       const {
         value: mergedClsPrefix
@@ -51,7 +66,7 @@ export default defineComponent({
       return h("div", {
         class: [`${mergedClsPrefix}-upload-file-list`, isImageCardTypeRef.value && `${mergedClsPrefix}-upload-file-list--grid`, fileListClassRef.value, abstract ? themeClassRef === null || themeClassRef === void 0 ? void 0 : themeClassRef.value : undefined],
         style: [abstract && cssVarsRef ? cssVarsRef.value : '', fileListStyleRef.value]
-      }, renderUploadFileList(), showTriggerRef.value && !maxReachedRef.value && isImageCardTypeRef.value && h(UUploadTrigger, null, slots));
+      }, renderUploadFileList(), isPreviewListTypeRef.value && renderPreview(), showTriggerRef.value && !maxReachedRef.value && isImageCardTypeRef.value && h(UUploadTrigger, null, slots));
     };
   }
 });

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

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import type { ProgressStatus } from './interface';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     show: BooleanConstructor;
     percentage: {
@@ -6,7 +7,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: true;
     };
     status: {
-        type: PropType<"info" | "error" | "success">;
+        type: PropType<ProgressStatus>;
         required: true;
     };
 }>, {
@@ -594,7 +595,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: true;
     };
     status: {
-        type: PropType<"info" | "error" | "success">;
+        type: PropType<ProgressStatus>;
         required: true;
     };
 }>> & Readonly<{}>, {