naive-ui 2.21.1 → 2.21.2

package/lib/slider/src/Slider.js

@@ -42,9 +42,14 @@ exports.default = (0, vue_1.defineComponent)({
     setup(props) {
         const { mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Slider', 'Slider', index_cssr_1.default, styles_1.sliderLight, props, mergedClsPrefixRef);
+        // dom ref
+        const handleRailRef = (0, vue_1.ref)(null);
+        const [handleRefs, setHandleRefs] = (0, utils_1.useRefs)();
+        const [followerRefs, setFollowerRefs] = (0, utils_1.useRefs)();
+        const followerEnabledIndexSetRef = (0, vue_1.ref)(new Set());
+        // data ref
         const formItem = (0, _mixins_1.useFormItem)(props);
         const { mergedDisabledRef } = formItem;
-        const handleRailRef = (0, vue_1.ref)(null);
         const precisionRef = (0, vue_1.computed)(() => {
             const { step } = props;
             if (step <= 0 || step === 'mark')
@@ -56,8 +61,6 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return precision;
         });
-        const [handleRefs, setHandleRefs] = (0, utils_1.useRefs)();
-        const [followerRefs, setFollowerRefs] = (0, utils_1.useRefs)();
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
         const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
@@ -77,10 +80,13 @@ exports.default = (0, vue_1.defineComponent)({
             const { marks } = props;
             return marks ? Object.keys(marks).map(parseFloat) : null;
         });
+        // status ref
         const activeIndexRef = (0, vue_1.ref)(-1);
         const previousIndexRef = (0, vue_1.ref)(-1);
         const hoverIndexRef = (0, vue_1.ref)(-1);
         const draggingRef = (0, vue_1.ref)(false);
+        // style ref
+        const dotTransitionDisabledRef = (0, vue_1.ref)(false);
         const styleDirectionRef = (0, vue_1.computed)(() => {
             const { vertical, reverse } = props;
             const left = reverse ? 'right' : 'left';
@@ -91,20 +97,19 @@ exports.default = (0, vue_1.defineComponent)({
             if (handleCountExceeds2Ref.value)
                 return;
             const values = arrifiedValueRef.value;
-            const start = props.range ? Math.min.apply(null, values) : props.min;
-            const end = props.range ? Math.max.apply(null, values) : values[0];
+            const start = valueToPercentage(props.range ? Math.min(...values) : props.min);
+            const end = valueToPercentage(props.range ? Math.max(...values) : values[0]);
             const { value: styleDirection } = styleDirectionRef;
             return props.vertical
                 ? {
-                    [styleDirection]: `${valueToPercentage(start)}%`,
-                    height: `${valueToPercentage(end - start)}%`
+                    [styleDirection]: `${start}%`,
+                    height: `${end - start}%`
                 }
                 : {
-                    [styleDirection]: `${valueToPercentage(start)}%`,
-                    width: `${valueToPercentage(end - start)}%`
+                    [styleDirection]: `${start}%`,
+                    width: `${end - start}%`
                 };
         });
-        const dotTransitionDisabledRef = (0, vue_1.ref)(false);
         const markInfosRef = (0, vue_1.computed)(() => {
             const mergedMarks = [];
             const { marks } = props;
@@ -133,6 +138,14 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return mergedMarks;
         });
+        function getHandleStyle(value, index) {
+            const percentage = valueToPercentage(value);
+            const { value: styleDirection } = styleDirectionRef;
+            return {
+                [styleDirection]: `${percentage}%`,
+                zIndex: index === activeIndexRef.value ? 1 : 0
+            };
+        }
         function isShowTooltip(index) {
             return (props.showTooltip ||
                 hoverIndexRef.value === index ||
@@ -154,14 +167,6 @@ exports.default = (0, vue_1.defineComponent)({
                     inst.syncPosition();
             });
         }
-        function getHandleStyle(value, index) {
-            const percentage = valueToPercentage(value);
-            const { value: styleDirection } = styleDirectionRef;
-            return {
-                [styleDirection]: `${percentage}%`,
-                zIndex: index === activeIndexRef.value ? 1 : 0
-            };
-        }
         function doUpdateValue(value) {
             const { 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
             const { nTriggerFormInput, nTriggerFormChange } = formItem;
@@ -200,51 +205,39 @@ exports.default = (0, vue_1.defineComponent)({
                 dispatchValueUpdate(value);
             }
         }
-        function getClosestMark(currentValue, markValues = markValuesRef.value, buffer) {
-            if (markValues) {
-                let closestMark = null;
-                let index = -1;
-                while (++index < markValues.length) {
-                    const diff = markValues[index] - currentValue;
-                    const distance = Math.abs(diff);
-                    if (
-                    // find marks in the same direction
-                    (buffer === undefined || diff * buffer > 0) &&
-                        (closestMark === null || distance < closestMark.distance)) {
-                        closestMark = {
-                            value: markValues[index],
-                            distance,
-                            index
-                        };
-                    }
-                }
-                return closestMark;
-            }
-            return null;
-        }
+        // value conversion
         function sanitizeValue(value, currentValue, stepBuffer) {
             const stepping = stepBuffer !== undefined;
             if (!stepBuffer) {
                 stepBuffer = value - currentValue > 0 ? 1 : -1;
             }
             const markValues = markValuesRef.value || [];
-            const { min, max, step } = props;
+            const { step } = props;
             if (step === 'mark') {
                 const closestMark = getClosestMark(value, markValues.concat(currentValue), stepping ? stepBuffer : undefined);
                 return closestMark ? closestMark.value : currentValue;
             }
             if (step <= 0)
                 return currentValue;
-            const roundValue = getRoundValue(value);
-            // ensure accurate step
-            const stepValue = new Array(Math.floor((max - min) / step) + 1)
-                .fill('')
-                .map((_, index) => step * index + min);
-            // If it is a stepping, priority will be given to the marks
-            // on the rail，otherwise take the nearest one
-            const closestMark = stepping
-                ? getClosestMark(currentValue, stepValue.concat(markValues), stepBuffer)
-                : getClosestMark(value, markValues.concat(roundValue));
+            const { value: precision } = precisionRef;
+            let closestMark;
+            // if it is a stepping, priority will be given to the marks
+            // on the rail, otherwise take the nearest one
+            if (stepping) {
+                const currentStep = Number((currentValue / step).toFixed(precision));
+                const actualStep = Math.floor(currentStep);
+                const leftStep = currentStep > actualStep ? actualStep : actualStep - 1;
+                const rightStep = currentStep < actualStep ? actualStep : actualStep + 1;
+                closestMark = getClosestMark(currentValue, [
+                    Number((leftStep * step).toFixed(precision)),
+                    Number((rightStep * step).toFixed(precision)),
+                    ...markValues
+                ], stepBuffer);
+            }
+            else {
+                const roundValue = getRoundValue(value);
+                closestMark = getClosestMark(value, [...markValues, roundValue]);
+            }
             return closestMark ? clampValue(closestMark.value) : currentValue;
         }
         function clampValue(value) {
@@ -265,6 +258,27 @@ exports.default = (0, vue_1.defineComponent)({
             const newValue = Math.round((value - min) / step) * step + min;
             return Number(newValue.toFixed(precisionRef.value));
         }
+        function getClosestMark(currentValue, markValues = markValuesRef.value, buffer) {
+            if (!markValues || !markValues.length)
+                return null;
+            let closestMark = null;
+            let index = -1;
+            while (++index < markValues.length) {
+                const diff = markValues[index] - currentValue;
+                const distance = Math.abs(diff);
+                if (
+                // find marks in the same direction
+                (buffer === undefined || diff * buffer > 0) &&
+                    (closestMark === null || distance < closestMark.distance)) {
+                    closestMark = {
+                        index,
+                        distance,
+                        value: markValues[index]
+                    };
+                }
+            }
+            return closestMark;
+        }
         function getPointValue(event) {
             const railEl = handleRailRef.value;
             if (!railEl)
@@ -283,6 +297,7 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return percentageToValue(percentage);
         }
+        // dom event handle
         function handleRailKeyDown(e) {
             if (mergedDisabledRef.value)
                 return;
@@ -395,7 +410,7 @@ exports.default = (0, vue_1.defineComponent)({
                 hoverIndexRef.value = -1;
             }
         }
-        (0, vue_1.watch)(activeIndexRef, (_, previous) => (previousIndexRef.value = previous));
+        (0, vue_1.watch)(activeIndexRef, (_, previous) => void (0, vue_1.nextTick)(() => (previousIndexRef.value = previous)));
         (0, vue_1.watch)(mergedValueRef, () => {
             if (props.marks) {
                 if (dotTransitionDisabledRef.value)
@@ -427,6 +442,7 @@ exports.default = (0, vue_1.defineComponent)({
             getHandleStyle,
             activeIndex: activeIndexRef,
             arrifiedValues: arrifiedValueRef,
+            followerEnabledIndexSet: followerEnabledIndexSetRef,
             handleRailMouseDown,
             handleHandleFocus,
             handleHandleBlur,
@@ -506,8 +522,8 @@ exports.default = (0, vue_1.defineComponent)({
                             (0, vue_1.h)(vueuc_1.VTarget, null, {
                                 default: () => ((0, vue_1.h)("div", { ref: this.setHandleRefs(index), class: `${mergedClsPrefix}-slider-handle`, tabindex: this.mergedDisabled ? -1 : 0, style: this.getHandleStyle(value, index), onFocus: () => this.handleHandleFocus(index), onBlur: () => this.handleHandleBlur(index), onMouseenter: () => this.handleHandleMouseEnter(index), onMouseleave: () => this.handleHandleMouseLeave(index) }))
                             }),
-                            this.tooltip && ((0, vue_1.h)(vueuc_1.VFollower, { ref: this.setFollowerRefs(index), show: showTooltip, to: this.adjustedTo, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, placement: this.mergedPlacement, containerClass: this.namespace }, {
-                                default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, css: this.isSkipCSSDetection(index) }, {
+                            this.tooltip && ((0, vue_1.h)(vueuc_1.VFollower, { ref: this.setFollowerRefs(index), show: showTooltip, to: this.adjustedTo, enabled: this.followerEnabledIndexSet.has(index), teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, placement: this.mergedPlacement, containerClass: this.namespace }, {
+                                default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, css: this.isSkipCSSDetection(index), onEnter: () => this.followerEnabledIndexSet.add(index), onAfterLeave: () => this.followerEnabledIndexSet.delete(index) }, {
                                     default: () => showTooltip ? ((0, vue_1.h)("div", { class: [
                                             `${mergedClsPrefix}-slider-handle-indicator`,
                                             `${mergedClsPrefix}-slider-handle-indicator--${this.mergedPlacement}`

package/lib/table/styles/light.js

@@ -8,12 +8,12 @@ const seemly_1 = require("seemly");
 const _common_1 = __importDefault(require("./_common"));
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { dividerColor, cardColor, modalColor, popoverColor, tableHeaderColor, tableColorHover, textColor1, textColor2, borderRadius, fontWeightStrong, lineHeight, fontSizeSmall, fontSizeMedium, fontSizeLarge } = vars;
+    const { dividerColor, cardColor, modalColor, popoverColor, tableHeaderColor, tableColorStriped, textColor1, textColor2, borderRadius, fontWeightStrong, lineHeight, fontSizeSmall, fontSizeMedium, fontSizeLarge } = vars;
     return Object.assign(Object.assign({}, _common_1.default), { fontSizeSmall,
         fontSizeMedium,
         fontSizeLarge,
         lineHeight,
-        borderRadius, borderColor: (0, seemly_1.composite)(cardColor, dividerColor), borderColorModal: (0, seemly_1.composite)(modalColor, dividerColor), borderColorPopover: (0, seemly_1.composite)(popoverColor, dividerColor), tdColor: cardColor, tdColorModal: modalColor, tdColorPopover: popoverColor, tdColorStriped: (0, seemly_1.composite)(cardColor, tableColorHover), tdColorStripedModal: (0, seemly_1.composite)(modalColor, tableColorHover), tdColorStripedPopover: (0, seemly_1.composite)(popoverColor, tableColorHover), thColor: (0, seemly_1.composite)(cardColor, tableHeaderColor), thColorModal: (0, seemly_1.composite)(modalColor, tableHeaderColor), thColorPopover: (0, seemly_1.composite)(popoverColor, tableHeaderColor), thTextColor: textColor1, tdTextColor: textColor2, thFontWeight: fontWeightStrong });
+        borderRadius, borderColor: (0, seemly_1.composite)(cardColor, dividerColor), borderColorModal: (0, seemly_1.composite)(modalColor, dividerColor), borderColorPopover: (0, seemly_1.composite)(popoverColor, dividerColor), tdColor: cardColor, tdColorModal: modalColor, tdColorPopover: popoverColor, tdColorStriped: (0, seemly_1.composite)(cardColor, tableColorStriped), tdColorStripedModal: (0, seemly_1.composite)(modalColor, tableColorStriped), tdColorStripedPopover: (0, seemly_1.composite)(popoverColor, tableColorStriped), thColor: (0, seemly_1.composite)(cardColor, tableHeaderColor), thColorModal: (0, seemly_1.composite)(modalColor, tableHeaderColor), thColorPopover: (0, seemly_1.composite)(popoverColor, tableHeaderColor), thTextColor: textColor1, tdTextColor: textColor2, thFontWeight: fontWeightStrong });
 };
 exports.self = self;
 const tableLight = {

package/lib/theme-editor/src/ThemeEditor.d.ts

@@ -79,6 +79,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         tableHeaderColor: string;
         hoverColor: string;
         tableColorHover: string;
+        tableColorStriped: string;
         pressedColor: string;
         opacityDisabled: string;
         inputColorDisabled: string;

package/lib/time-picker/src/Panel.d.ts

@@ -146,6 +146,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/time-picker/src/TimePicker.d.ts

@@ -2006,6 +2006,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/tooltip/src/Tooltip.d.ts

@@ -103,7 +103,7 @@ declare const tooltipProps: {
         default: string;
     };
     arrowStyle: import("vue").PropType<string | import("vue").CSSProperties>;
-    filp: {
+    flip: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -245,7 +245,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
     arrowStyle: import("vue").PropType<string | import("vue").CSSProperties>;
-    filp: {
+    flip: {
         type: BooleanConstructor;
         default: boolean;
     };
@@ -358,6 +358,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
@@ -449,7 +450,7 @@ declare const _default: import("vue").DefineComponent<{
     getDisabled?: unknown;
     displayDirective?: unknown;
     arrowStyle?: unknown;
-    filp?: unknown;
+    flip?: unknown;
     animated?: unknown;
     width?: unknown;
     overlap?: unknown;
@@ -467,6 +468,7 @@ declare const _default: import("vue").DefineComponent<{
     minWidth?: unknown;
     maxWidth?: unknown;
 } & {
+    flip: boolean;
     disabled: boolean;
     duration: number;
     raw: boolean;
@@ -476,7 +478,6 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
-    filp: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
@@ -567,6 +568,7 @@ declare const _default: import("vue").DefineComponent<{
     arrow?: boolean | undefined;
 }>, {
     show: boolean | undefined;
+    flip: boolean;
     width: number | "trigger";
     disabled: boolean;
     duration: number;
@@ -578,7 +580,6 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
-    filp: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];

package/lib/transfer/src/Transfer.d.ts

@@ -2152,6 +2152,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/transfer/src/TransferFilter.d.ts

@@ -87,6 +87,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/transfer/src/TransferList.d.ts

@@ -100,6 +100,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/transfer/src/TransferListItem.d.ts

@@ -87,6 +87,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/tree/src/Tree.d.ts

@@ -598,6 +598,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/tree/src/TreeNodeCheckbox.d.ts

@@ -81,6 +81,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/tree-select/src/TreeSelect.d.ts

@@ -1131,6 +1131,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

package/lib/upload/index.d.ts

@@ -3,5 +3,4 @@ export { default as NUploadDragger } from './src/UploadDragger';
 export { default as NUploadTrigger } from './src/UploadTrigger';
 export { default as NUploadFileList } from './src/UploadFileList';
 export type { UploadProps } from './src/Upload';
-export type { uploadDraggerKey } from './src/UploadDragger';
-export type { UploadInst, FileInfo as UploadFileInfo } from './src/interface';
+export type { UploadInst, FileInfo as UploadFileInfo, CustomRequestOptions as UploadCustomRequestOptions } from './src/interface';

package/lib/upload/src/Upload.d.ts

@@ -1,6 +1,6 @@
 import { PropType, CSSProperties } from 'vue';
 import { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import { FileInfo, FuncOrRecordOrUndef, OnFinish, OnRemove, OnDownload, OnChange, OnUpdateFileList, OnBeforeUpload, listType, OnPreview, CreateThumbnailUrl } from './interface';
+import { FileInfo, FuncOrRecordOrUndef, OnFinish, OnRemove, OnDownload, OnChange, OnUpdateFileList, OnBeforeUpload, listType, OnPreview, CreateThumbnailUrl, CustomRequest } from './interface';
 declare const uploadProps: {
     readonly name: {
         readonly type: StringConstructor;
@@ -8,6 +8,7 @@ declare const uploadProps: {
     };
     readonly accept: StringConstructor;
     readonly action: StringConstructor;
+    readonly customRequest: PropType<CustomRequest>;
     readonly method: {
         readonly type: StringConstructor;
         readonly default: "POST";
@@ -50,10 +51,7 @@ declare const uploadProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    readonly showDownloadButton: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly showDownloadButton: BooleanConstructor;
     readonly showRetryButton: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -814,6 +812,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     readonly accept: StringConstructor;
     readonly action: StringConstructor;
+    readonly customRequest: PropType<CustomRequest>;
     readonly method: {
         readonly type: StringConstructor;
         readonly default: "POST";
@@ -856,10 +855,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    readonly showDownloadButton: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly showDownloadButton: BooleanConstructor;
     readonly showRetryButton: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -1689,6 +1685,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;
@@ -1988,6 +1985,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly name?: unknown;
     readonly accept?: unknown;
     readonly action?: unknown;
+    readonly customRequest?: unknown;
     readonly method?: unknown;
     readonly multiple?: unknown;
     readonly showFileList?: unknown;
@@ -2778,6 +2776,7 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>> | undefined;
     onRemove?: OnRemove | undefined;
+    customRequest?: CustomRequest | undefined;
     onFinish?: OnFinish | undefined;
     onBeforeUpload?: OnBeforeUpload | undefined;
     onDownload?: OnDownload | undefined;

package/lib/upload/src/Upload.js

@@ -73,6 +73,45 @@ function createXhrHandlers(inst, file, XHR) {
         }
     };
 }
+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,
+                file: null
+            });
+            fileAfterChange =
+                ((_a = inst.onFinish) === null || _a === void 0 ? void 0 : _a.call(inst, { file: fileAfterChange })) || fileAfterChange;
+            doChange(fileAfterChange);
+        },
+        onError() {
+            const fileAfterChange = Object.assign({}, file, {
+                status: 'error',
+                percentage
+            });
+            doChange(fileAfterChange);
+        }
+    });
+}
 function registerHandler(inst, file, request) {
     const handlers = createXhrHandlers(inst, file, request);
     request.onabort = handlers.handleXHRAbort;
@@ -125,7 +164,7 @@ function submitImpl(inst, file, formData, { method, action, withCredentials, hea
 const uploadProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { name: {
         type: String,
         default: 'file'
-    }, accept: String, action: String, 
+    }, accept: String, action: String, customRequest: Function, 
     // to be impl
     // directory: {
     //   type: Boolean,
@@ -154,10 +193,7 @@ const uploadProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, showRemoveButton: {
         type: Boolean,
         default: true
-    }, showDownloadButton: {
-        type: Boolean,
-        default: false
-    }, showRetryButton: {
+    }, showDownloadButton: Boolean, showRetryButton: {
         type: Boolean,
         default: true
     }, showPreviewButton: {
@@ -269,17 +305,34 @@ exports.default = (0, vue_1.defineComponent)({
                 if (status === 'pending' || (status === 'error' && shouldReupload)) {
                     const formData = new FormData();
                     formData.append(fieldName, file.file);
-                    submitImpl({
-                        doChange,
-                        XhrMap,
-                        onFinish: props.onFinish
-                    }, file, formData, {
-                        method,
-                        action,
-                        withCredentials,
-                        headers,
-                        data
-                    });
+                    if (props.customRequest) {
+                        customSubmitImpl({
+                            inst: {
+                                doChange,
+                                XhrMap,
+                                onFinish: props.onFinish
+                            },
+                            file,
+                            action,
+                            withCredentials,
+                            headers,
+                            data,
+                            customRequest: props.customRequest
+                        });
+                    }
+                    else {
+                        submitImpl({
+                            doChange,
+                            XhrMap,
+                            onFinish: props.onFinish
+                        }, file, formData, {
+                            method,
+                            action,
+                            withCredentials,
+                            headers,
+                            data
+                        });
+                    }
                 }
             });
         }

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

@@ -84,6 +84,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

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

@@ -80,6 +80,7 @@ declare const _default: import("vue").DefineComponent<{
             tableHeaderColor: string;
             hoverColor: string;
             tableColorHover: string;
+            tableColorStriped: string;
             pressedColor: string;
             opacityDisabled: string;
             inputColorDisabled: string;

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

@@ -21,7 +21,7 @@ export declare type OnChange = (data: {
 }) => void;
 export declare type OnFinish = ({ file, event }: {
     file: FileInfo;
-    event: Event;
+    event?: Event;
 }) => FileInfo | undefined;
 export declare type OnRemove = (data: {
     file: FileInfo;
@@ -85,3 +85,16 @@ export declare type OnBeforeUpload = (data: {
 export declare type listType = 'text' | 'image' | 'image-card';
 export declare type OnPreview = (file: FileInfo) => void;
 export declare type CreateThumbnailUrl = (file: File) => Promise<string>;
+export interface CustomRequestOptions {
+    file: FileInfo;
+    action?: string;
+    withCredentials?: boolean;
+    data?: FuncOrRecordOrUndef;
+    headers?: FuncOrRecordOrUndef;
+    onProgress: (e: {
+        percent: number;
+    }) => void;
+    onFinish: () => void;
+    onError: () => void;
+}
+export declare type CustomRequest = (options: CustomRequestOptions) => void;

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.21.1";
+declare const _default: "2.21.2";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.21.1';
+exports.default = '2.21.2';