@uzum-tech/ui 1.3.1 → 1.4.1

package/lib/upload/src/Upload.js

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 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) {
@@ -47,163 +24,9 @@ const utils_1 = require("./utils");
 const UploadTrigger_1 = __importDefault(require("./UploadTrigger"));
 const UploadFileList_1 = __importDefault(require("./UploadFileList"));
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const _internal_1 = require("../../_internal");
-const UploadDragger_1 = __importStar(require("./UploadDragger"));
-const icons_1 = require("./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 = (0, utils_1.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 = (0, utils_1.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 = (0, utils_1.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 = (0, utils_1.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);
-    }
-}
+const UploadDragger_1 = require("./UploadDragger");
+const useUpload_1 = require("./useUpload");
+const useUploadInternals_1 = require("./useUploadInternals");
 exports.uploadProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { name: {
         type: String,
         default: 'file'
@@ -219,7 +42,10 @@ exports.uploadProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, 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,
@@ -252,11 +78,19 @@ exports.uploadProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, 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
+    } });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Upload',
     props: exports.uploadProps,
     setup(props) {
+        const { localeRef } = (0, _mixins_1.useLocale)('Upload');
+        const { submitImpl, customSubmitImpl } = (0, useUpload_1.useUpload)();
         if (props.abstract && props.listType === 'image-card') {
             (0, _utils_1.throwError)('upload', 'when the list-type is image-card, abstract is not supported.');
         }
@@ -325,8 +159,8 @@ exports.default = (0, vue_1.defineComponent)({
                 fileAndEntries = fileAndEntries.slice(0, max - mergedFileListRef.value.length);
             }
             const batchId = (0, seemly_1.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: (0, seemly_1.createId)(),
                     batchId,
@@ -337,7 +171,7 @@ exports.default = (0, vue_1.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({
@@ -458,7 +292,8 @@ exports.default = (0, vue_1.defineComponent)({
             return '';
         }
         const cssVarsRef = (0, vue_1.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, [(0, _utils_1.createKey)('width', size)]: width } } = themeRef.value;
             return {
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-border-radius': borderRadius,
@@ -482,11 +317,18 @@ exports.default = (0, vue_1.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
-            ? (0, _mixins_1.useThemeClass)('upload', undefined, cssVarsRef, props)
+            ? (0, _mixins_1.useThemeClass)('upload', (0, vue_1.computed)(() => {
+                const { value: size } = formItem.mergedSizeRef;
+                return size[0];
+            }), cssVarsRef, props)
             : undefined;
         (0, vue_1.provide)(interface_1.uploadInjectionKey, {
             mergedClsPrefixRef,
@@ -514,6 +356,12 @@ exports.default = (0, vue_1.defineComponent)({
             handleFileAddition,
             mergedDisabledRef: formItem.mergedDisabledRef,
             maxReachedRef,
+            localeRef,
+            iconRef: (0, vue_1.toRef)(props, 'icon'),
+            noIconRef: (0, vue_1.toRef)(props, 'noIcon'),
+            titleRef: (0, vue_1.toRef)(props, 'title'),
+            subtitleRef: (0, vue_1.toRef)(props, 'subtitle'),
+            verticalRef: (0, vue_1.toRef)(props, 'vertical'),
             fileListStyleRef: (0, vue_1.toRef)(props, 'fileListStyle'),
             abstractRef: (0, vue_1.toRef)(props, 'abstract'),
             acceptRef: (0, vue_1.toRef)(props, 'accept'),
@@ -534,8 +382,9 @@ exports.default = (0, vue_1.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;
@@ -546,24 +395,22 @@ exports.default = (0, vue_1.defineComponent)({
                 draggerInsideRef.value = true;
             }
         }
-        const inputNode = ((0, vue_1.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 [
-                (0, vue_1.h)(vue_1.Fragment, null,
-                    this.$props.label ? ((0, vue_1.h)("p", { class: `${mergedClsPrefix}-upload__label` }, this.$props.label)) : null,
-                    (0, vue_1.h)(UploadDragger_1.default, null, {
-                        default: () => ((0, vue_1.h)("div", { class: rootClass },
-                            (0, vue_1.h)("div", { class: `${rootClass}__icon` },
-                                (0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => icons_1.uploadIcon })),
-                            (0, vue_1.h)("div", { class: `${rootClass}__content` },
-                                (0, vue_1.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"),
-                                (0, vue_1.h)("p", { class: `${rootClass}__subtitle` }, "PDF, PNG, JPEG \u043D\u0435 \u0431\u043E\u043B\u0435\u0435 100 MB"))))
-                    }))
-            ];
-        };
+        const { inputNode, renderDefaultTrigger } = (0, useUploadInternals_1.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) {
@@ -579,7 +426,9 @@ exports.default = (0, vue_1.defineComponent)({
                 this.themeClass
             ], style: this.cssVars },
             inputNode,
-            this.showTrigger && this.listType !== 'image-card' && ((0, vue_1.h)(UploadTrigger_1.default, { class: [
+            this.showTrigger &&
+                this.listType !== 'image-card' &&
+                this.listType !== 'image' && ((0, vue_1.h)(UploadTrigger_1.default, { class: [
                     hasDefaulTrigger && `${mergedClsPrefix}-upload-trigger--block`
                 ] }, slots)),
             this.showFileList && (0, vue_1.h)(UploadFileList_1.default, null, $slots)));

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

@@ -8,21 +8,14 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
-const icons_1 = require("../../_internal/icons");
-const image_1 = require("../../image");
-const button_1 = require("../../button");
-const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
-const UploadProgress_1 = __importDefault(require("./UploadProgress"));
 const interface_1 = require("./interface");
-const icons_2 = require("./icons");
 const utils_1 = require("./utils");
+const spin_1 = require("../../spin");
+const useUploadActionsRender_1 = require("./useUploadActionsRender");
 const buttonThemeOverrides = {
     paddingMedium: '0 3px',
     heightMedium: '24px',
@@ -194,6 +187,9 @@ exports.default = (0, vue_1.defineComponent)({
             shouldUseThumbnailUrl: UUpload.shouldUseThumbnailUrlRef,
             renderIcon: UUpload.renderIconRef,
             imageRef,
+            localeRef: UUpload.localeRef,
+            vertical: UUpload.verticalRef.value,
+            capitalizeFirstLetter: utils_1.capitalizeFirstLetter,
             handleRemoveOrCancelClick,
             handleDownloadClick,
             handleRetryClick,
@@ -201,54 +197,58 @@ exports.default = (0, vue_1.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 ? ((0, vue_1.h)("span", { class: `${clsPrefix}-upload-file-info__thumbnail ${clsPrefix}-upload-file-info__thumbnail--icon` }, renderIcon ? (renderIcon(file)) : (0, utils_1.isImageFile)(file) ? ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix }, { default: () => icons_2.imageIcon })) : ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix }, { default: () => icons_2.documentIcon })))) : ((0, vue_1.h)("a", { rel: "noopener noreferer", target: "_blank", href: file.url || undefined, class: `${clsPrefix}-upload-file-info__thumbnail`, onClick: this.handlePreviewClick }, listType === 'image-card' ? ((0, vue_1.h)(image_1.UImage, { src: this.mergedThumbnailUrl || undefined, previewSrc: file.url || undefined, alt: file.name, ref: "imageRef" })) : ((0, vue_1.h)("img", { src: this.mergedThumbnailUrl || undefined, alt: file.name }))));
-        }
-        else {
-            icon = ((0, vue_1.h)("span", { class: `${clsPrefix}-upload-file-info__thumbnail ${clsPrefix}-upload-file-info__thumbnail--icon` }, renderIcon ? (renderIcon(file)) : ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix }, { default: () => icons_2.imageIcon }))));
-        }
-        const progress = ((0, vue_1.h)(UploadProgress_1.default, { show: this.showProgress, percentage: file.percentage || 0, status: this.progressStatus }));
-        const showName = listType === 'text' || listType === 'image';
-        return ((0, vue_1.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 } = (0, useUploadActionsRender_1.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 ((0, vue_1.h)(spin_1.USpin, { color: "tertiary", description: this.localeRef.uploading, show: this.showProgress, class: [
+                !this.vertical &&
+                    !imageCardTypes.includes(listType) &&
+                    `${clsPrefix}-upload-file-loader--default`
             ] },
-            (0, vue_1.h)("div", { class: `${clsPrefix}-upload-file-info` },
-                icon,
-                (0, vue_1.h)("div", { class: `${clsPrefix}-upload-file-info__name` },
-                    showName &&
-                        (file.url && file.status !== 'error' ? ((0, vue_1.h)("a", { rel: "noopener noreferer", target: "_blank", href: file.url || undefined, onClick: this.handlePreviewClick }, file.name)) : ((0, vue_1.h)("span", { onClick: this.handlePreviewClick }, file.name))),
-                    isImageType && progress),
+            (0, vue_1.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`
+                ] },
                 (0, vue_1.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 ? ((0, vue_1.h)(button_1.UButton, { key: "preview", quaternary: true, type: this.buttonType, onClick: this.handlePreviewClick, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, builtinThemeOverrides: buttonThemeOverrides }, {
-                        icon: () => ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix }, { default: () => (0, vue_1.h)(icons_1.EyeIcon, null) }))
-                    })) : null,
-                    (this.showRemoveButton || this.showCancelButton) &&
-                        !this.disabled && ((0, vue_1.h)(button_1.UButton, { key: "cancelOrTrash", theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, quaternary: true, builtinThemeOverrides: buttonThemeOverrides, type: this.buttonType, onClick: this.handleRemoveOrCancelClick }, {
-                        icon: () => ((0, vue_1.h)(_internal_1.UIconSwitchTransition, null, {
-                            default: () => this.showRemoveButton ? ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, key: "trash" }, { default: () => (0, vue_1.h)(icons_1.TrashIcon, null) })) : ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix, key: "cancel" }, { default: () => (0, vue_1.h)(icons_1.CancelIcon, null) }))
-                        }))
-                    })),
-                    this.showRetryButton && !this.disabled && ((0, vue_1.h)(button_1.UButton, { key: "retry", quaternary: true, type: this.buttonType, onClick: this.handleRetryClick, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, builtinThemeOverrides: buttonThemeOverrides }, {
-                        icon: () => ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix }, { default: () => (0, vue_1.h)(icons_1.RetryIcon, null) }))
-                    })),
-                    this.showDownloadButton ? ((0, vue_1.h)(button_1.UButton, { key: "download", quaternary: true, type: this.buttonType, onClick: this.handleDownloadClick, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, builtinThemeOverrides: buttonThemeOverrides }, {
-                        icon: () => ((0, vue_1.h)(_internal_1.UBaseIcon, { clsPrefix: clsPrefix }, { default: () => (0, vue_1.h)(icons_1.DownloadIcon, null) }))
-                    })) : null)),
-            !isImageType && progress));
+                    icon,
+                    (0, vue_1.h)("div", { class: `${clsPrefix}-upload-file-info__name` },
+                        (0, vue_1.h)(vue_1.Fragment, null,
+                            (0, vue_1.h)("span", { onClick: this.handlePreviewClick }, this.$slots['upload-file-title']
+                                ? this.$slots['upload-file-title']({ file })
+                                : file.name),
+                            (0, vue_1.h)("span", { onClick: this.handlePreviewClick }, this.$slots['upload-file-subtitle']
+                                ? this.$slots['upload-file-subtitle']({ file })
+                                : ''))),
+                    actionsNode),
+                this.showProgress && ((0, vue_1.h)("div", { class: `${clsPrefix}-upload-file-overlay` })))));
     }
 });