@uzum-tech/ui 1.3.1 → 1.4.0

package/es/upload/src/Upload.js

@@ -10,171 +10,17 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { h, defineComponent, computed, provide, toRef, ref, Fragment, Teleport, nextTick } from 'vue';
 import { createId } from 'seemly';
 import { useMergedState } from 'vooks';
-import { useConfig, useTheme, useFormItem, useThemeClass } from '../../_mixins';
-import { warn, call, throwError } from '../../_utils';
+import { useConfig, useTheme, useFormItem, useThemeClass, useLocale } from '../../_mixins';
+import { warn, call, throwError, createKey } from '../../_utils';
 import { uploadLight } from '../styles';
 import { uploadInjectionKey } from './interface';
 import { createImageDataUrl, createSettledFileInfo, environmentSupportFile, isImageFile, matchType } from './utils';
 import UUploadTrigger from './UploadTrigger';
 import UUploadFileList from './UploadFileList';
 import style from './styles/index.cssr';
-import { UBaseIcon } from '../../_internal';
-import UUploadDragger, { uploadDraggerKey } from './UploadDragger';
-import { uploadIcon } from './icons';
-/**
- * fils status ['pending', 'uploading', 'finished', 'removed', 'error']
- */
-function createXhrHandlers(inst, file, xhr) {
-    const { doChange, xhrMap } = inst;
-    let percentage = 0;
-    function handleXHRError(e) {
-        var _a;
-        let fileAfterChange = Object.assign({}, file, {
-            status: 'error',
-            percentage
-        });
-        xhrMap.delete(file.id);
-        fileAfterChange = createSettledFileInfo(((_a = inst.onError) === null || _a === void 0 ? void 0 : _a.call(inst, { file: fileAfterChange, event: e })) || fileAfterChange);
-        doChange(fileAfterChange, e);
-    }
-    function handleXHRLoad(e) {
-        var _a;
-        if (inst.isErrorState) {
-            if (inst.isErrorState(xhr)) {
-                handleXHRError(e);
-                return;
-            }
-        }
-        else {
-            if (xhr.status < 200 || xhr.status >= 300) {
-                handleXHRError(e);
-                return;
-            }
-        }
-        let fileAfterChange = Object.assign({}, file, {
-            status: 'finished',
-            percentage
-        });
-        xhrMap.delete(file.id);
-        fileAfterChange = createSettledFileInfo(((_a = inst.onFinish) === null || _a === void 0 ? void 0 : _a.call(inst, { file: fileAfterChange, event: e })) || fileAfterChange);
-        doChange(fileAfterChange, e);
-    }
-    return {
-        handleXHRLoad,
-        handleXHRError,
-        handleXHRAbort(e) {
-            const fileAfterChange = Object.assign({}, file, {
-                status: 'removed',
-                file: null,
-                percentage
-            });
-            xhrMap.delete(file.id);
-            doChange(fileAfterChange, e);
-        },
-        handleXHRProgress(e) {
-            const fileAfterChange = Object.assign({}, file, {
-                status: 'uploading'
-            });
-            if (e.lengthComputable) {
-                const progress = Math.ceil((e.loaded / e.total) * 100);
-                fileAfterChange.percentage = progress;
-                percentage = progress;
-            }
-            doChange(fileAfterChange, e);
-        }
-    };
-}
-function customSubmitImpl(options) {
-    const { inst, file, data, headers, withCredentials, action, customRequest } = options;
-    const { doChange } = options.inst;
-    let percentage = 0;
-    customRequest({
-        file,
-        data,
-        headers,
-        withCredentials,
-        action,
-        onProgress(event) {
-            const fileAfterChange = Object.assign({}, file, {
-                status: 'uploading'
-            });
-            const progress = event.percent;
-            fileAfterChange.percentage = progress;
-            percentage = progress;
-            doChange(fileAfterChange);
-        },
-        onFinish() {
-            var _a;
-            let fileAfterChange = Object.assign({}, file, {
-                status: 'finished',
-                percentage
-            });
-            fileAfterChange = createSettledFileInfo(((_a = inst.onFinish) === null || _a === void 0 ? void 0 : _a.call(inst, { file: fileAfterChange })) || fileAfterChange);
-            doChange(fileAfterChange);
-        },
-        onError() {
-            var _a;
-            let fileAfterChange = Object.assign({}, file, {
-                status: 'error',
-                percentage
-            });
-            fileAfterChange = createSettledFileInfo(((_a = inst.onError) === null || _a === void 0 ? void 0 : _a.call(inst, { file: fileAfterChange })) || fileAfterChange);
-            doChange(fileAfterChange);
-        }
-    });
-}
-function registerHandler(inst, file, request) {
-    const handlers = createXhrHandlers(inst, file, request);
-    request.onabort = handlers.handleXHRAbort;
-    request.onerror = handlers.handleXHRError;
-    request.onload = handlers.handleXHRLoad;
-    if (request.upload) {
-        request.upload.onprogress = handlers.handleXHRProgress;
-    }
-}
-function unwrapFunctionValue(data, file) {
-    if (typeof data === 'function') {
-        return data({ file });
-    }
-    if (data)
-        return data;
-    return {};
-}
-function setHeaders(request, headers, file) {
-    const headersObject = unwrapFunctionValue(headers, file);
-    if (!headersObject)
-        return;
-    Object.keys(headersObject).forEach((key) => {
-        request.setRequestHeader(key, headersObject[key]);
-    });
-}
-function appendData(formData, data, file) {
-    const dataObject = unwrapFunctionValue(data, file);
-    if (!dataObject)
-        return;
-    Object.keys(dataObject).forEach((key) => {
-        formData.append(key, dataObject[key]);
-    });
-}
-function submitImpl(inst, fieldName, file, { method, action, withCredentials, responseType, headers, data }) {
-    const request = new XMLHttpRequest();
-    request.responseType = responseType;
-    inst.xhrMap.set(file.id, request);
-    request.withCredentials = withCredentials;
-    const formData = new FormData();
-    appendData(formData, data, file);
-    formData.append(fieldName, file.file);
-    registerHandler(inst, file, request);
-    if (action !== undefined) {
-        request.open(method.toUpperCase(), action);
-        setHeaders(request, headers, file);
-        request.send(formData);
-        const fileAfterChange = Object.assign({}, file, {
-            status: 'uploading'
-        });
-        inst.doChange(fileAfterChange);
-    }
-}
+import { uploadDraggerKey } from './UploadDragger';
+import { useUpload } from './useUpload';
+import { useUploadInternals } from './useUploadInternals';
 export const uploadProps = Object.assign(Object.assign({}, useTheme.props), { name: {
         type: String,
         default: 'file'
@@ -190,7 +36,10 @@ export const uploadProps = Object.assign(Object.assign({}, useTheme.props), { na
     }, disabled: {
         type: Boolean,
         default: undefined
-    }, onChange: Function, onRemove: Function, onFinish: Function, onError: Function, onBeforeUpload: Function, isErrorState: Function, 
+    }, vertical: {
+        type: Boolean,
+        default: false
+    }, icon: Object, onChange: Function, onRemove: Function, onFinish: Function, onError: Function, onBeforeUpload: Function, isErrorState: Function, 
     /** currently not used */
     onDownload: Function, defaultUpload: {
         type: Boolean,
@@ -223,11 +72,19 @@ export const uploadProps = Object.assign(Object.assign({}, useTheme.props), { na
     }, createThumbnailUrl: Function, abstract: Boolean, max: Number, showTrigger: {
         type: Boolean,
         default: true
-    }, imageGroupProps: Object, inputProps: Object, triggerStyle: [String, Object], renderIcon: Function, label: String });
+    }, imageGroupProps: Object, inputProps: Object, triggerStyle: [String, Object], renderIcon: Function, label: String, size: {
+        type: String,
+        default: 'medium'
+    }, title: String, subtitle: String, noIcon: {
+        type: Boolean,
+        default: false
+    } });
 export default defineComponent({
     name: 'Upload',
     props: uploadProps,
     setup(props) {
+        const { localeRef } = useLocale('Upload');
+        const { submitImpl, customSubmitImpl } = useUpload();
         if (props.abstract && props.listType === 'image-card') {
             throwError('upload', 'when the list-type is image-card, abstract is not supported.');
         }
@@ -296,8 +153,8 @@ export default defineComponent({
                 fileAndEntries = fileAndEntries.slice(0, max - mergedFileListRef.value.length);
             }
             const batchId = createId();
-            void Promise.all(fileAndEntries.map(({ file, entry }) => __awaiter(this, void 0, void 0, function* () {
-                var _a;
+            void Promise.all(fileAndEntries.map((_a) => __awaiter(this, [_a], void 0, function* ({ file, entry }) {
+                var _b;
                 const fileInfo = {
                     id: createId(),
                     batchId,
@@ -308,7 +165,7 @@ export default defineComponent({
                     url: null,
                     type: file.type,
                     thumbnailUrl: null,
-                    fullPath: (_a = entry === null || entry === void 0 ? void 0 : entry.fullPath) !== null && _a !== void 0 ? _a : `/${file.webkitRelativePath || file.name}`
+                    fullPath: (_b = entry === null || entry === void 0 ? void 0 : entry.fullPath) !== null && _b !== void 0 ? _b : `/${file.webkitRelativePath || file.name}`
                 };
                 if (!onBeforeUpload ||
                     (yield onBeforeUpload({
@@ -429,7 +286,8 @@ export default defineComponent({
             return '';
         }
         const cssVarsRef = computed(() => {
-            const { common: { cubicBezierEaseInOut }, self: { draggerColor, draggerBorder, draggerBorderHover, itemColorHover, itemColorHoverError, itemTextColorError, itemTextColorSuccess, itemTextColor, itemIconColor, itemDisabledOpacity, lineHeight, borderRadius, fontSize, itemBorderImageCardError, itemBorderImageCard, baseColor, draggerIconBgColor, draggerIconColor, draggerTextColor, draggerTitleColor, labelColor } } = themeRef.value;
+            const { value: size } = formItem.mergedSizeRef;
+            const { common: { cubicBezierEaseInOut }, self: { draggerColor, draggerBorder, draggerBorderHover, itemColorHover, itemColorHoverError, itemTextColorError, itemTextColorSuccess, itemTextColor, itemIconColor, itemDisabledOpacity, lineHeight, borderRadius, fontSize, itemBorderImageCardError, itemBorderImageCard, baseColor, draggerIconBgColor, draggerIconColor, draggerTextColor, draggerTitleColor, labelColor, containerSecondary, brandPrimary300, elementsQuaternary, [createKey('width', size)]: width } } = themeRef.value;
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-border-radius': borderRadius,
@@ -453,11 +311,18 @@ export default defineComponent({
                 '--u-dragger-title-color': draggerTitleColor,
                 '--u-dragger-text-color': draggerTextColor,
                 '--u-label-color': labelColor,
-                '--u-upload-width': props.listType === 'image-card' ? 'auto' : '100%'
+                '--u-upload-width': props.listType === 'image-card' ? 'auto' : '100%',
+                '--u-upload-dragger-width': width,
+                '--u-upload-info-bg-color': containerSecondary,
+                '--u-upload-preview-color': brandPrimary300,
+                '--u-upload-empty-border-color': elementsQuaternary
             };
         });
         const themeClassHandle = inlineThemeDisabled
-            ? useThemeClass('upload', undefined, cssVarsRef, props)
+            ? useThemeClass('upload', computed(() => {
+                const { value: size } = formItem.mergedSizeRef;
+                return size[0];
+            }), cssVarsRef, props)
             : undefined;
         provide(uploadInjectionKey, {
             mergedClsPrefixRef,
@@ -485,6 +350,12 @@ export default defineComponent({
             handleFileAddition,
             mergedDisabledRef: formItem.mergedDisabledRef,
             maxReachedRef,
+            localeRef,
+            iconRef: toRef(props, 'icon'),
+            noIconRef: toRef(props, 'noIcon'),
+            titleRef: toRef(props, 'title'),
+            subtitleRef: toRef(props, 'subtitle'),
+            verticalRef: toRef(props, 'vertical'),
             fileListStyleRef: toRef(props, 'fileListStyle'),
             abstractRef: toRef(props, 'abstract'),
             acceptRef: toRef(props, 'accept'),
@@ -505,8 +376,9 @@ export default defineComponent({
             submit,
             openFileDialog
         };
-        return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, draggerInsideRef,
-            inputElRef, mergedTheme: themeRef, dragOver: dragOverRef, mergedMultiple: mergedMultipleRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender, handleFileInputChange }, exposedMethods);
+        return Object.assign({ mergedClsPrefix: mergedClsPrefixRef, mergedSizeRef: formItem.mergedSizeRef, draggerInsideRef,
+            inputElRef,
+            localeRef, mergedTheme: themeRef, dragOver: dragOverRef, mergedMultiple: mergedMultipleRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender, handleFileInputChange }, exposedMethods);
     },
     render() {
         var _a, _b;
@@ -517,24 +389,22 @@ export default defineComponent({
                 draggerInsideRef.value = true;
             }
         }
-        const inputNode = (h("input", Object.assign({}, this.inputProps, { ref: "inputElRef", type: "file", class: `${mergedClsPrefix}-upload-file-input`, accept: this.accept, multiple: this.mergedMultiple, onChange: this.handleFileInputChange, 
-            // @ts-expect-error // seems vue-tsc will add the prop, so we can't use expect-error
-            webkitdirectory: directory || undefined, directory: directory || undefined })));
-        const renderDefaultTrigger = () => {
-            const rootClass = `${mergedClsPrefix}-upload-dragger-inner`;
-            return [
-                h(Fragment, null,
-                    this.$props.label ? (h("p", { class: `${mergedClsPrefix}-upload__label` }, this.$props.label)) : null,
-                    h(UUploadDragger, null, {
-                        default: () => (h("div", { class: rootClass },
-                            h("div", { class: `${rootClass}__icon` },
-                                h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => uploadIcon })),
-                            h("div", { class: `${rootClass}__content` },
-                                h("p", { class: `${rootClass}__title` }, "\u0412\u044B\u0431\u0435\u0440\u0438\u0442\u0435 \u0444\u0430\u0439\u043B \u0438\u043B\u0438 \u043F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0441\u044E\u0434\u0430"),
-                                h("p", { class: `${rootClass}__subtitle` }, "PDF, PNG, JPEG \u043D\u0435 \u0431\u043E\u043B\u0435\u0435 100 MB"))))
-                    }))
-            ];
-        };
+        const { inputNode, renderDefaultTrigger } = useUploadInternals({
+            mergedClsPrefix: this.mergedClsPrefix,
+            accept: this.accept,
+            multiple: this.mergedMultiple,
+            directory,
+            inputProps: this.inputProps,
+            onChange: this.handleFileInputChange,
+            label: this.label,
+            title: this.title,
+            subtitle: this.subtitle,
+            vertical: this.vertical,
+            noIcon: this.noIcon,
+            icon: this.icon,
+            localeRef: this.localeRef,
+            slots: this.$slots
+        });
         const hasDefaulTrigger = !$slots.default;
         const slots = Object.assign(Object.assign({}, $slots), { default: $slots.default || renderDefaultTrigger });
         if (this.abstract) {
@@ -550,7 +420,9 @@ export default defineComponent({
                 this.themeClass
             ], style: this.cssVars },
             inputNode,
-            this.showTrigger && this.listType !== 'image-card' && (h(UUploadTrigger, { class: [
+            this.showTrigger &&
+                this.listType !== 'image-card' &&
+                this.listType !== 'image' && (h(UUploadTrigger, { class: [
                     hasDefaulTrigger && `${mergedClsPrefix}-upload-trigger--block`
                 ] }, slots)),
             this.showFileList && h(UUploadFileList, null, $slots)));

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

@@ -1,12 +1,12 @@
 import { type PropType } from 'vue';
-import type { ListType } from './interface';
+import type { SettledFileInfo, ListType } from './interface';
 declare const _default: import("vue").DefineComponent<{
     clsPrefix: {
         type: StringConstructor;
         required: true;
     };
     file: {
-        type: PropType<Required<import("./interface").FileInfo>>;
+        type: PropType<SettledFileInfo>;
         required: true;
     };
     listType: {
@@ -15,118 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     mergedTheme: import("vue").Ref<{
-        common: {
-            scrollbarColor: string;
-            scrollbarColorHover: string;
-            scrollbarWidth: string;
-            scrollbarHeight: string;
-            scrollbarBorderRadius: string;
-            opacityDisabled: string;
-            brandPrimary50: string;
-            brandPrimary100: string;
-            brandPrimary200: string;
-            brandPrimary300: string;
-            brandPrimary400: string;
-            brandPrimary500: string;
-            brandPrimary550: string;
-            brandPrimary600: string;
-            brandSecondary500: string;
-            brandSecondary300: string;
-            brandSecondary600: string;
-            brandTertiary500: string;
-            brandTertiary300: string;
-            brandTertiary600: string;
-            brandQuaternary500: string;
-            brandQuaternary300: string;
-            brandQuaternary600: string;
-            brandQuinary500: string;
-            brandQuinary300: string;
-            brandQuinary600: string;
-            brandQuinary100: string;
-            surfacePrimary: string;
-            surfaceSecondary: string;
-            containerPrimary: string;
-            containerSecondary: string;
-            textPrimary: string;
-            textSecondary: string;
-            textTertiary: string;
-            textQuaternary: string;
-            textBrand: string;
-            elementsPrimary: string;
-            elementsSecondary: string;
-            elementsTertiary: string;
-            elementsQuaternary: string;
-            elementsQuinary: string;
-            elementsDarkQuinary: string;
-            elementsSenary: string;
-            elementsOnContainer: string;
-            transparencyPrimary: string;
-            transparencySecondary: string;
-            transparencyTertiary: string;
-            transparencyQuinary: string;
-            transparencyModal: string;
-            staticBlack: string;
-            staticDarkGrey: string;
-            staticWhite: string;
-            staticRed: string;
-            staticOrange: string;
-            staticGreen: string;
-            staticDeepBlue: string;
-            staticErrorAccent: string;
-            shadowDepth2: string;
-            shadowDepth: string;
-            fontFamily: string;
-            fontFamilyMono: string;
-            cubicBezierEaseInOut: string;
-            cubicBezierEaseOut: string;
-            cubicBezierEaseIn: string;
-            borderRadiusLarge: string;
-            borderRadius: string;
-            borderRadiusMedium: string;
-            borderRadiusSmall: string;
-            borderRadiusTiny: string;
-            heightMini: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            heightHuge: string;
-            fontDisplayLarge: string;
-            fontDisplaySmall: string;
-            fontHeadingLarge: string;
-            fontHeadingMedium: string;
-            fontHeadingSmall: string;
-            fontTitleLarge: string;
-            fontTitleMedium: string;
-            fontTitleSmall: string;
-            fontBodyLarge: string;
-            fontBodyMedium: string;
-            fontBodySmall: string;
-            lineHeightDisplayLarge: string;
-            lineHeightDisplaySmall: string;
-            lineHeightHeadingLarge: string;
-            lineHeightHeadingMedium: string;
-            lineHeightHeadingSmall: string;
-            lineHeightTitleLarge: string;
-            lineHeightTitleMedium: string;
-            lineHeightTitleSmall: string;
-            lineHeightBodyLarge: string;
-            lineHeightBodyMedium: string;
-            lineHeightBodySmall: string;
-            fontWeight: string;
-            fontWeightStrong: string;
-            fontWeightBold: string;
-            iconSmall: string;
-            iconMedium: string;
-            iconLarge: string;
-            iconHuge: string;
-            closeSmall: string;
-            closeMedium: string;
-            closeLarge: string;
-            closeHuge: string;
-            closeBorderRadius: string;
-            name: "common";
-        };
+        common: import("../..").ThemeCommonVars;
         self: {
             baseColor: string;
             fontSize: string;
@@ -149,6 +38,12 @@ declare const _default: import("vue").DefineComponent<{
             draggerTitleColor: string;
             draggerTextColor: string;
             labelColor: string;
+            widthSmall: string;
+            widthMedium: string;
+            widthLarge: string;
+            containerSecondary: string;
+            brandPrimary300: string;
+            elementsQuaternary: string;
         };
         peers: {
             Button: import("../../_mixins/use-theme").Theme<"Button", {
@@ -414,6 +309,13 @@ declare const _default: import("vue").DefineComponent<{
     imageRef: import("vue").Ref<{
         click: () => void;
     } | null>;
+    localeRef: import("vue").Ref<{
+        title: string;
+        subtitle: string;
+        uploading: string;
+    }>;
+    vertical: boolean;
+    capitalizeFirstLetter: (str: string) => string;
     handleRemoveOrCancelClick: (e: MouseEvent) => void;
     handleDownloadClick: (e: MouseEvent) => void;
     handleRetryClick: () => void;
@@ -424,7 +326,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     file: {
-        type: PropType<Required<import("./interface").FileInfo>>;
+        type: PropType<SettledFileInfo>;
         required: true;
     };
     listType: {

package/es/upload/src/UploadFile.js

@@ -7,17 +7,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { h, defineComponent, computed, inject, ref, watchEffect } from 'vue';
+import { h, defineComponent, computed, inject, ref, watchEffect, Fragment } from 'vue';
 import { useMemo } from 'vooks';
-import { CancelIcon, TrashIcon, RetryIcon, DownloadIcon, EyeIcon } from '../../_internal/icons';
-import { UImage } from '../../image';
-import { UButton } from '../../button';
-import { UIconSwitchTransition, UBaseIcon } from '../../_internal';
 import { warn } from '../../_utils';
-import UUploadProgress from './UploadProgress';
 import { uploadInjectionKey } from './interface';
-import { imageIcon, documentIcon } from './icons';
-import { download, isImageFile } from './utils';
+import { capitalizeFirstLetter, download } from './utils';
+import { USpin } from '../../spin';
+import { useUploadActionsRender } from './useUploadActionsRender';
 const buttonThemeOverrides = {
     paddingMedium: '0 3px',
     heightMedium: '24px',
@@ -189,6 +185,9 @@ export default defineComponent({
             shouldUseThumbnailUrl: UUpload.shouldUseThumbnailUrlRef,
             renderIcon: UUpload.renderIconRef,
             imageRef,
+            localeRef: UUpload.localeRef,
+            vertical: UUpload.verticalRef.value,
+            capitalizeFirstLetter,
             handleRemoveOrCancelClick,
             handleDownloadClick,
             handleRetryClick,
@@ -196,54 +195,58 @@ export default defineComponent({
         };
     },
     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 ${clsPrefix}-upload-file-info__thumbnail--icon` }, renderIcon ? (renderIcon(file)) : isImageFile(file) ? (h(UBaseIcon, { clsPrefix: clsPrefix }, { default: () => imageIcon })) : (h(UBaseIcon, { 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(UImage, { 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 ${clsPrefix}-upload-file-info__thumbnail--icon` }, renderIcon ? (renderIcon(file)) : (h(UBaseIcon, { clsPrefix: clsPrefix }, { default: () => imageIcon }))));
-        }
-        const progress = (h(UUploadProgress, { 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`
+        const { clsPrefix, mergedTheme, listType, file } = this;
+        const { icon, actionsNode } = useUploadActionsRender({
+            clsPrefix,
+            listType,
+            file,
+            disabled: this.disabled,
+            showPreviewButton: this.showPreviewButton,
+            showRemoveButton: this.showRemoveButton,
+            showCancelButton: this.showCancelButton,
+            showRetryButton: this.showRetryButton,
+            showDownloadButton: this.showDownloadButton,
+            buttonType: this.buttonType,
+            mergedTheme,
+            buttonThemeOverrides,
+            handlePreviewClick: this.handlePreviewClick,
+            handleRemoveOrCancelClick: this.handleRemoveOrCancelClick,
+            handleRetryClick: this.handleRetryClick,
+            handleDownloadClick: this.handleDownloadClick,
+            capitalizeFirstLetter: this.capitalizeFirstLetter
+        });
+        const imageCardTypes = ['image-card', 'image'];
+        return (h(USpin, { color: "tertiary", description: this.localeRef.uploading, show: this.showProgress, class: [
+                !this.vertical &&
+                    !imageCardTypes.includes(listType) &&
+                    `${clsPrefix}-upload-file-loader--default`
             ] },
-            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`,
+                    `${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`
+                ] },
                 h("div", { class: [
-                        `${clsPrefix}-upload-file-info__action`,
-                        `${clsPrefix}-upload-file-info__action--${listType}-type`
+                        `${clsPrefix}-upload-file-info`,
+                        imageCardTypes.includes(listType) &&
+                            `${clsPrefix}-upload-file-info--vertical`
                     ] },
-                    this.showPreviewButton ? (h(UButton, { key: "preview", quaternary: true, type: this.buttonType, onClick: this.handlePreviewClick, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, builtinThemeOverrides: buttonThemeOverrides }, {
-                        icon: () => (h(UBaseIcon, { clsPrefix: clsPrefix }, { default: () => h(EyeIcon, null) }))
-                    })) : null,
-                    (this.showRemoveButton || this.showCancelButton) &&
-                        !this.disabled && (h(UButton, { key: "cancelOrTrash", theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, quaternary: true, builtinThemeOverrides: buttonThemeOverrides, type: this.buttonType, onClick: this.handleRemoveOrCancelClick }, {
-                        icon: () => (h(UIconSwitchTransition, null, {
-                            default: () => this.showRemoveButton ? (h(UBaseIcon, { clsPrefix: clsPrefix, key: "trash" }, { default: () => h(TrashIcon, null) })) : (h(UBaseIcon, { clsPrefix: clsPrefix, key: "cancel" }, { default: () => h(CancelIcon, null) }))
-                        }))
-                    })),
-                    this.showRetryButton && !this.disabled && (h(UButton, { key: "retry", quaternary: true, type: this.buttonType, onClick: this.handleRetryClick, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, builtinThemeOverrides: buttonThemeOverrides }, {
-                        icon: () => (h(UBaseIcon, { clsPrefix: clsPrefix }, { default: () => h(RetryIcon, null) }))
-                    })),
-                    this.showDownloadButton ? (h(UButton, { key: "download", quaternary: true, type: this.buttonType, onClick: this.handleDownloadClick, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, builtinThemeOverrides: buttonThemeOverrides }, {
-                        icon: () => (h(UBaseIcon, { clsPrefix: clsPrefix }, { default: () => h(DownloadIcon, null) }))
-                    })) : null)),
-            !isImageType && progress));
+                    icon,
+                    h("div", { class: `${clsPrefix}-upload-file-info__name` },
+                        h(Fragment, null,
+                            h("span", { onClick: this.handlePreviewClick }, this.$slots['upload-file-title']
+                                ? this.$slots['upload-file-title']({ file })
+                                : file.name),
+                            h("span", { onClick: this.handlePreviewClick }, this.$slots['upload-file-subtitle']
+                                ? this.$slots['upload-file-subtitle']({ file })
+                                : ''))),
+                    actionsNode),
+                this.showProgress && (h("div", { class: `${clsPrefix}-upload-file-overlay` })))));
     }
 });

package/es/upload/src/UploadFileList.js

@@ -13,8 +13,8 @@ export default defineComponent({
             throwError('upload-file-list', '`u-upload-file-list` must be placed inside `u-upload`.');
         }
         const { abstractRef, mergedClsPrefixRef, listTypeRef, mergedFileListRef, fileListStyleRef, cssVarsRef, themeClassRef, maxReachedRef, showTriggerRef, imageGroupPropsRef } = UUpload;
-        const isImageCardTypeRef = computed(() => listTypeRef.value === 'image-card');
-        const renderFileList = () => mergedFileListRef.value.map((file) => (h(UUploadFile, { clsPrefix: mergedClsPrefixRef.value, key: file.id, file: file, listType: listTypeRef.value })));
+        const isImageCardTypeRef = computed(() => listTypeRef.value === 'image-card' || listTypeRef.value === 'image');
+        const renderFileList = () => mergedFileListRef.value.map((file) => (h(UUploadFile, { clsPrefix: mergedClsPrefixRef.value, key: file.id, file: file, listType: listTypeRef.value }, slots)));
         const renderUploadFileList = () => isImageCardTypeRef.value ? (h(UImageGroup, Object.assign({}, imageGroupPropsRef.value), { default: renderFileList })) : (h(UFadeInExpandTransition, { group: true }, {
             default: renderFileList
         }));