@uzum-tech/ui 2.3.0 → 2.3.2

package/lib/upload/src/Upload.js

@@ -12,7 +12,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.uploadProps = void 0;
 const vooks_1 = require("vooks");
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
@@ -26,67 +25,9 @@ const UploadTrigger_1 = __importDefault(require("./UploadTrigger"));
 const useUpload_1 = require("./useUpload");
 const useUploadInternals_1 = require("./useUploadInternals");
 const utils_1 = require("./utils");
-exports.uploadProps = Object.assign(Object.assign({}, _mixins_1.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 (!utils_1.environmentSupportFile)
-                return false;
-            return (0, utils_1.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
-    } });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Upload',
-    props: exports.uploadProps,
+    props: interface_1.uploadProps,
     setup(props) {
         const uploadId = (0, vue_1.useId)();
         const uploadKeyIndexRef = (0, vue_1.ref)(0);
@@ -119,16 +60,15 @@ exports.default = (0, vue_1.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) {
@@ -145,14 +85,14 @@ exports.default = (0, vue_1.defineComponent)({
             uploadKeyIndexRef.value += 1;
             return key;
         }
-        function handleFileAddition(fileAndEntries, e) {
+        function handleFileAddition(fileAndEntries, event) {
             if (!fileAndEntries || fileAndEntries.length === 0)
                 return;
             const { onBeforeUpload } = props;
             fileAndEntries = mergedMultipleRef.value
                 ? fileAndEntries
                 : [fileAndEntries[0]];
-            const { max, accept } = props;
+            const { max, accept, maxSize } = props;
             fileAndEntries = fileAndEntries.filter(({ file, source }) => {
                 if (source === 'dnd' && (accept === null || accept === void 0 ? void 0 : accept.trim())) {
                     return (0, utils_1.matchType)(file.name, file.type, accept);
@@ -179,6 +119,10 @@ exports.default = (0, vue_1.defineComponent)({
                     thumbnailUrl: null,
                     fullPath: (_b = entry === null || entry === void 0 ? void 0 : entry.fullPath) !== null && _b !== void 0 ? _b : `/${file.webkitRelativePath || file.name}`
                 };
+                if ((0, utils_1.isFileSizeExceeded)(file, maxSize)) {
+                    fileInfo.status = 'error';
+                    return fileInfo;
+                }
                 if (!onBeforeUpload
                     || (yield onBeforeUpload({
                         file: fileInfo,
@@ -193,7 +137,7 @@ exports.default = (0, vue_1.defineComponent)({
                 fileInfos.forEach((fileInfo) => {
                     nextTickChain = nextTickChain.then(vue_1.nextTick).then(() => {
                         fileInfo
-                            && doChange(fileInfo, e, {
+                            && doChange(fileInfo, event, {
                                 append: true
                             });
                     });
@@ -216,6 +160,15 @@ exports.default = (0, vue_1.defineComponent)({
             filesToUpload.forEach((file) => {
                 const { status } = file;
                 if (status === 'pending' || (status === 'error' && shouldReupload)) {
+                    if ((0, utils_1.isFileSizeExceeded)(file.file, props.maxSize)) {
+                        if (status === 'pending') {
+                            const fileAfterChange = Object.assign({}, file, {
+                                status: 'error'
+                            });
+                            doChange(fileAfterChange);
+                        }
+                        return;
+                    }
                     if (props.customRequest) {
                         customSubmitImpl({
                             inst: {
@@ -295,6 +248,20 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return '';
         }
+        function isFilePreviewable(file) {
+            return (props.shouldUseThumbnailUrl(file) && (0, utils_1.getFilePreviewSrc)(file) !== null);
+        }
+        const previewFileListRef = (0, vue_1.computed)(() => mergedFileListRef.value.filter(isFilePreviewable));
+        const previewSrcListRef = (0, vue_1.computed)(() => previewFileListRef.value.map(file => (0, utils_1.getFilePreviewSrc)(file)));
+        const previewShowRef = (0, vue_1.ref)(false);
+        const previewCurrentRef = (0, vue_1.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 = (0, vue_1.computed)(() => {
             const { value: size } = formItem.mergedSizeRef;
             const { common: { cubicBezierEaseInOut }, self: { draggerColor, draggerBorder, draggerBorderHover, draggerShadowFocus, itemColorHover, itemColorHoverError, itemTextColorError, itemTextColorSuccess, itemTextColor, itemIconColor, itemDisabledOpacity, lineHeight, borderRadius, fontSize, itemBorderImageCardError, itemBorderImageCard, baseColor, draggerIconBgColor, draggerIconColor, draggerTextColor, draggerTitleColor, labelColor, containerSecondary, brandPrimary300, elementsQuaternary, [(0, _utils_1.createKey)('width', size)]: width } } = themeRef.value;
@@ -382,7 +349,12 @@ exports.default = (0, vue_1.defineComponent)({
             mergedDirectoryDndRef: (0, vue_1.computed)(() => {
                 var _a;
                 return (_a = props.directoryDnd) !== null && _a !== void 0 ? _a : props.directory;
-            })
+            }),
+            previewSrcListRef,
+            previewShowRef,
+            previewCurrentRef,
+            isFilePreviewable,
+            openFilePreview
         });
         const exposedMethods = {
             clear: () => {

package/lib/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/lib/upload/src/UploadFile.js

@@ -90,9 +90,12 @@ exports.default = (0, vue_1.defineComponent)({
             if (!UUpload.showPreviewButtonRef.value)
                 return false;
             const { file: { status }, 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* () {
@@ -165,6 +168,9 @@ exports.default = (0, vue_1.defineComponent)({
             if (onPreview) {
                 onPreview(props.file);
             }
+            else if (props.listType === 'preview-list') {
+                UUpload.openFilePreview(props.file);
+            }
             else if (props.listType === 'image-card') {
                 const { value } = imageRef;
                 if (!value)
@@ -245,7 +251,9 @@ exports.default = (0, vue_1.defineComponent)({
                         && `${clsPrefix}-upload-file--with-url`,
                     `${clsPrefix}-upload-file--${listType === 'image' || listType === 'image-card'
                         ? 'image-card'
-                        : 'text'}-type`
+                        : 'text'}-type`,
+                    listType === 'preview-list'
+                        && `${clsPrefix}-upload-file--preview-list-type`
                 ] },
                 (0, vue_1.h)("div", { class: [
                         `${clsPrefix}-upload-file-info`,

package/lib/upload/src/UploadFileList.js

@@ -17,12 +17,18 @@ exports.default = (0, vue_1.defineComponent)({
         if (!UUpload) {
             (0, _utils_1.throwError)('upload-file-list', '`u-upload-file-list` must be placed inside `u-upload`.');
         }
-        const { abstractRef, mergedClsPrefixRef, listTypeRef, mergedFileListRef, fileListClassRef, fileListStyleRef, cssVarsRef, themeClassRef, maxReachedRef, showTriggerRef, imageGroupPropsRef } = UUpload;
+        const { abstractRef, mergedClsPrefixRef, listTypeRef, mergedFileListRef, fileListClassRef, fileListStyleRef, cssVarsRef, themeClassRef, maxReachedRef, showTriggerRef, imageGroupPropsRef, previewSrcListRef, previewShowRef, previewCurrentRef } = UUpload;
         const isImageCardTypeRef = (0, vue_1.computed)(() => listTypeRef.value === 'image-card' || listTypeRef.value === 'image');
+        const isPreviewListTypeRef = (0, vue_1.computed)(() => listTypeRef.value === 'preview-list');
         const renderFileList = () => mergedFileListRef.value.map(file => ((0, vue_1.h)(UploadFile_1.default, { clsPrefix: mergedClsPrefixRef.value, key: file.id, file: file, listType: listTypeRef.value }, slots)));
         const renderUploadFileList = () => isImageCardTypeRef.value ? ((0, vue_1.h)(image_1.UImageGroup, Object.assign({}, imageGroupPropsRef.value), { default: renderFileList })) : ((0, vue_1.h)(_internal_1.UFadeInExpandTransition, { group: true }, {
             default: renderFileList
         }));
+        const renderPreview = () => ((0, vue_1.h)(image_1.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 } = mergedClsPrefixRef;
             const { value: abstract } = abstractRef;
@@ -37,6 +43,7 @@ exports.default = (0, vue_1.defineComponent)({
                     fileListStyleRef.value
                 ] },
                 renderUploadFileList(),
+                isPreviewListTypeRef.value && renderPreview(),
                 showTriggerRef.value
                     && !maxReachedRef.value
                     && isImageCardTypeRef.value && ((0, vue_1.h)(UploadTrigger_1.default, null, slots))));

package/lib/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<{}>, {