naive-ui 2.23.0 → 2.24.1

package/lib/tree/src/Tree.js

@@ -104,7 +104,7 @@ const treeProps = Object.assign(Object.assign(Object.assign(Object.assign({}, _m
     }, animated: {
         type: Boolean,
         default: true
-    }, virtualScroll: Boolean, watchProps: Array, renderLabel: Function, renderPrefix: Function, renderSuffix: Function, onDragenter: [Function, Array], onDragleave: [Function, Array], onDragend: [Function, Array], onDragstart: [Function, Array], onDragover: [Function, Array], onDrop: [Function, Array], onUpdateCheckedKeys: [Function, Array], 'onUpdate:checkedKeys': [Function, Array], onUpdateSelectedKeys: [Function, Array], 'onUpdate:selectedKeys': [Function, Array] }), exports.treeSharedProps), { 
+    }, virtualScroll: Boolean, watchProps: Array, renderLabel: Function, renderPrefix: Function, renderSuffix: Function, renderSwitcherIcon: Function, onDragenter: [Function, Array], onDragleave: [Function, Array], onDragend: [Function, Array], onDragstart: [Function, Array], onDragover: [Function, Array], onDrop: [Function, Array], onUpdateCheckedKeys: [Function, Array], 'onUpdate:checkedKeys': [Function, Array], onUpdateSelectedKeys: [Function, Array], 'onUpdate:selectedKeys': [Function, Array] }), exports.treeSharedProps), { 
     // internal props for tree-select
     internalScrollable: Boolean, internalScrollablePadding: String, 
     // use it to do check
@@ -961,6 +961,7 @@ exports.default = (0, vue_1.defineComponent)({
             renderLabelRef: (0, vue_1.toRef)(props, 'renderLabel'),
             renderPrefixRef: (0, vue_1.toRef)(props, 'renderPrefix'),
             renderSuffixRef: (0, vue_1.toRef)(props, 'renderSuffix'),
+            renderSwitcherIconRef: (0, vue_1.toRef)(props, 'renderSwitcherIcon'),
             labelFieldRef: (0, vue_1.toRef)(props, 'labelField'),
             handleSwitcherClick,
             handleDragEnd,
@@ -988,26 +989,27 @@ exports.default = (0, vue_1.defineComponent)({
             handleResize, cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { fontSize, nodeBorderRadius, nodeColorHover, nodeColorPressed, nodeColorActive, arrowColor, loadingColor, nodeTextColor, nodeTextColorDisabled, dropMarkColor } } = themeRef.value;
                 return {
-                    '--arrow-color': arrowColor,
-                    '--loading-color': loadingColor,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--font-size': fontSize,
-                    '--node-border-radius': nodeBorderRadius,
-                    '--node-color-active': nodeColorActive,
-                    '--node-color-hover': nodeColorHover,
-                    '--node-color-pressed': nodeColorPressed,
-                    '--node-text-color': nodeTextColor,
-                    '--node-text-color-disabled': nodeTextColorDisabled,
-                    '--drop-mark-color': dropMarkColor
+                    '--n-arrow-color': arrowColor,
+                    '--n-loading-color': loadingColor,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-font-size': fontSize,
+                    '--n-node-border-radius': nodeBorderRadius,
+                    '--n-node-color-active': nodeColorActive,
+                    '--n-node-color-hover': nodeColorHover,
+                    '--n-node-color-pressed': nodeColorPressed,
+                    '--n-node-text-color': nodeTextColor,
+                    '--n-node-text-color-disabled': nodeTextColorDisabled,
+                    '--n-drop-mark-color': dropMarkColor
                 };
             }) }, exposedMethods);
     },
     render() {
-        const { mergedClsPrefix, blockNode, blockLine, draggable, disabled, internalFocusable, handleKeyup, handleKeydown, handleFocusout } = this;
+        const { mergedClsPrefix, blockNode, blockLine, draggable, disabled, internalFocusable, checkable, handleKeyup, handleKeydown, handleFocusout } = this;
         const mergedFocusable = internalFocusable && !disabled;
         const tabindex = mergedFocusable ? '0' : undefined;
         const treeClass = [
             `${mergedClsPrefix}-tree`,
+            checkable && `${mergedClsPrefix}-tree--checkable`,
             (blockLine || blockNode) && `${mergedClsPrefix}-tree--block-node`,
             blockLine && `${mergedClsPrefix}-tree--block-line`
         ];

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

@@ -8,7 +8,7 @@ declare const _default: import("vue").DefineComponent<{
     hide: BooleanConstructor;
     loading: BooleanConstructor;
     onClick: PropType<(e: MouseEvent) => void>;
-}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     clsPrefix?: unknown;
     expanded?: unknown;
     hide?: unknown;

package/lib/tree/src/TreeNodeSwitcher.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const icons_1 = require("../../_internal/icons");
 const _internal_1 = require("../../_internal");
+const interface_1 = require("./interface");
 exports.default = (0, vue_1.defineComponent)({
     name: 'NTreeSwitcher',
     props: {
@@ -15,18 +16,28 @@ exports.default = (0, vue_1.defineComponent)({
         loading: Boolean,
         onClick: Function
     },
-    render() {
-        const { clsPrefix } = this;
-        return ((0, vue_1.h)("span", { "data-switcher": true, class: [
-                `${clsPrefix}-tree-node-switcher`,
-                {
-                    [`${clsPrefix}-tree-node-switcher--expanded`]: this.expanded,
-                    [`${clsPrefix}-tree-node-switcher--hide`]: this.hide
-                }
-            ], onClick: this.onClick },
-            (0, vue_1.h)("div", { class: `${clsPrefix}-tree-node-switcher__icon` },
-                (0, vue_1.h)(_internal_1.NIconSwitchTransition, null, {
-                    default: () => !this.loading ? ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, key: "switcher" }, { default: () => (0, vue_1.h)(icons_1.SwitcherIcon, null) })) : ((0, vue_1.h)(_internal_1.NBaseLoading, { clsPrefix: clsPrefix, key: "loading", radius: 85, strokeWidth: 20 }))
-                }))));
+    setup(props) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const { renderSwitcherIconRef } = (0, vue_1.inject)(interface_1.treeInjectionKey, null);
+        return () => {
+            const { clsPrefix } = props;
+            return ((0, vue_1.h)("span", { "data-switcher": true, class: [
+                    `${clsPrefix}-tree-node-switcher`,
+                    {
+                        [`${clsPrefix}-tree-node-switcher--expanded`]: props.expanded,
+                        [`${clsPrefix}-tree-node-switcher--hide`]: props.hide
+                    }
+                ], onClick: props.onClick },
+                (0, vue_1.h)("div", { class: `${clsPrefix}-tree-node-switcher__icon` },
+                    (0, vue_1.h)(_internal_1.NIconSwitchTransition, null, {
+                        default: () => {
+                            if (props.loading) {
+                                return ((0, vue_1.h)(_internal_1.NBaseLoading, { clsPrefix: clsPrefix, key: "loading", radius: 85, strokeWidth: 20 }));
+                            }
+                            const { value: renderSwitcherIcon } = renderSwitcherIconRef;
+                            return renderSwitcherIcon ? (renderSwitcherIcon()) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: clsPrefix, key: "switcher" }, { default: () => (0, vue_1.h)(icons_1.SwitcherIcon, null) }));
+                        }
+                    }))));
+        };
     }
 });

package/lib/tree/src/dnd.js

@@ -13,7 +13,7 @@ function renderDropMark({ position, offsetLevel, indent, el }) {
         style.top = 0;
         style.bottom = 0;
         style.borderRadius = 'inherit';
-        style.boxShadow = 'inset 0 0 0 2px var(--drop-mark-color)';
+        style.boxShadow = 'inset 0 0 0 2px var(--n-drop-mark-color)';
     }
     else {
         const cssPosition = position === 'before' ? 'top' : 'bottom';
@@ -22,7 +22,7 @@ function renderDropMark({ position, offsetLevel, indent, el }) {
         // Maybe it is possible to use content left
         style.left = `${el.offsetLeft + 6 - offsetLevel * indent}px`;
         style.height = '2px';
-        style.backgroundColor = 'var(--drop-mark-color)';
+        style.backgroundColor = 'var(--n-drop-mark-color)';
         style.transformOrigin = cssPosition;
         style.borderRadius = '1px';
         style.transform =

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

@@ -51,6 +51,7 @@ export interface InternalDropInfo {
     node: TmNode;
     dropPosition: DropPosition;
 }
+export declare type RenderSwitcherIcon = () => VNodeChild;
 export interface TreeInjection {
     loadingKeysRef: Ref<Set<Key>>;
     highlightKeySetRef: Ref<Set<Key>>;
@@ -81,6 +82,7 @@ export interface TreeInjection {
     renderLabelRef: Ref<RenderLabel | undefined>;
     renderPrefixRef: Ref<RenderPrefix | undefined>;
     renderSuffixRef: Ref<RenderSuffix | undefined>;
+    renderSwitcherIconRef: Ref<RenderSwitcherIcon | undefined>;
     labelFieldRef: Ref<string>;
     handleSwitcherClick: (node: TreeNode<TreeOption>) => void;
     handleSelect: (node: TreeNode<TreeOption>) => void;

package/lib/tree/src/styles/index.cssr.js

@@ -15,19 +15,19 @@ const cssr_1 = require("../../../_utils/cssr");
 const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions/icon-switch.cssr"));
 
 const fade_in_height_expand_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-height-expand.cssr")); // vars:
-// --arrow-color
-// --bezier
-// --font-size
-// --node-border-radius
-// --node-color-active
-// --node-color-hover
-// --node-color-pressed
-// --node-text-color
-// --node-text-color-disabled
+// --n-arrow-color
+// --n-bezier
+// --n-font-size
+// --n-node-border-radius
+// --n-node-color-active
+// --n-node-color-hover
+// --n-node-color-pressed
+// --n-node-text-color
+// --n-node-text-color-disabled
 
 
 exports.default = (0, cssr_1.cB)('tree', `
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  outline: none;
 `, [(0, cssr_1.c)('ul, li', `
  margin: 0;
@@ -47,33 +47,33 @@ exports.default = (0, cssr_1.cB)('tree', `
  `), (0, cssr_1.cB)('tree-node', `
  position: relative;
  display: flex;
- border-radius: var(--node-border-radius);
- transition: background-color .3s var(--bezier);
+ border-radius: var(--n-node-border-radius);
+ transition: background-color .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('highlight', [(0, cssr_1.cB)('tree-node-content', [(0, cssr_1.cE)('text', {
-  borderBottomColor: 'var(--node-text-color-disabled)'
+  borderBottomColor: 'var(--n-node-text-color-disabled)'
 })])]), (0, cssr_1.cM)('disabled', [(0, cssr_1.cB)('tree-node-content', `
- color: var(--node-text-color-disabled);
+ color: var(--n-node-text-color-disabled);
  cursor: not-allowed;
  `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('selectable', [(0, cssr_1.cB)('tree-node-content', `
  cursor: pointer;
  `)])])]), (0, cssr_1.cM)('block-node', [(0, cssr_1.cB)('tree-node-content', `
  width: 100%;
  `)]), (0, cssr_1.cNotM)('block-line', [(0, cssr_1.cB)('tree-node', [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.cB)('tree-node-content', [(0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--node-color-hover)'
+  backgroundColor: 'var(--n-node-color-hover)'
 })]), (0, cssr_1.cM)('selectable', [(0, cssr_1.cB)('tree-node-content', [(0, cssr_1.c)('&:active', {
-  backgroundColor: 'var(--node-color-pressed)'
+  backgroundColor: 'var(--n-node-color-pressed)'
 })])]), (0, cssr_1.cM)('pending', [(0, cssr_1.cB)('tree-node-content', `
- background-color: var(--node-color-hover);
+ background-color: var(--n-node-color-hover);
  `)]), (0, cssr_1.cM)('selected', [(0, cssr_1.cB)('tree-node-content', {
-  backgroundColor: 'var(--node-color-active)'
+  backgroundColor: 'var(--n-node-color-active)'
 })])])])]), (0, cssr_1.cM)('block-line', [(0, cssr_1.cB)('tree-node', [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', {
-  backgroundColor: 'var(--node-color-hover)'
+  backgroundColor: 'var(--n-node-color-hover)'
 }), (0, cssr_1.cM)('selectable', [(0, cssr_1.c)('&:active', {
-  backgroundColor: 'var(--node-color-pressed)'
+  backgroundColor: 'var(--n-node-color-pressed)'
 })]), (0, cssr_1.cM)('pending', `
- background-color: var(--node-color-hover);
+ background-color: var(--n-node-color-hover);
  `), (0, cssr_1.cM)('selected', {
-  backgroundColor: 'var(--node-color-active)'
+  backgroundColor: 'var(--n-node-color-active)'
 })]), (0, cssr_1.cM)('disabled', `
  cursor: not-allowed;
  `)])]), (0, cssr_1.cB)('tree-node-switcher', `
@@ -84,18 +84,18 @@ exports.default = (0, cssr_1.cB)('tree', `
  width: 24px;
  align-items: center;
  justify-content: center;
- transition: transform .15s var(--bezier);
+ transition: transform .15s var(--n-bezier);
  vertical-align: bottom;
  `, [(0, cssr_1.cE)('icon', `
  position: relative;
  height: 14px;
  width: 14px;
  display: flex;
- color: var(--arrow-color);
- transition: color .3s var(--bezier);
+ color: var(--n-arrow-color);
+ transition: color .3s var(--n-bezier);
  font-size: 14px;
  `, [(0, cssr_1.cB)('icon', [(0, icon_switch_cssr_1.default)()]), (0, cssr_1.cB)('base-loading', `
- color: var(--loading-color);
+ color: var(--n-loading-color);
  position: absolute;
  left: 0;
  top: 0;
@@ -113,7 +113,9 @@ exports.default = (0, cssr_1.cB)('tree', `
  align-items: center;
  justify-content: center;
  margin-right: 4px;
- `), (0, cssr_1.cB)('tree-node-content', `
+ `), (0, cssr_1.cM)('checkable', [(0, cssr_1.cB)('tree-node-content', `
+ padding: 0 6px;
+ `)]), (0, cssr_1.cB)('tree-node-content', `
  position: relative;
  display: inline-flex;
  align-items: center;
@@ -121,17 +123,17 @@ exports.default = (0, cssr_1.cB)('tree', `
  box-sizing: border-box;
  line-height: 1.5;
  vertical-align: bottom;
- padding: 0 6px;
+ padding: 0 6px 0 4px;
  cursor: default;
- border-radius: var(--node-border-radius);
+ border-radius: var(--n-node-border-radius);
  text-decoration-color: #0000;
  text-decoration-line: underline;
- color: var(--node-text-color);
+ color: var(--n-node-text-color);
  transition:
- color .3s var(--bezier),
- text-decoration-color .3s var(--bezier),
- background-color .3s var(--bezier),
- border-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ text-decoration-color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  `, [(0, cssr_1.c)('&:last-child', {
   marginBottom: 0
 }), (0, cssr_1.cE)('prefix', `
@@ -139,7 +141,7 @@ exports.default = (0, cssr_1.cB)('tree', `
  margin-right: 8px;
  `), (0, cssr_1.cE)('text', `
  border-bottom: 1px solid #0000;
- transition: border-color .3s var(--bezier);
+ transition: border-color .3s var(--n-bezier);
  flex-grow:1;
  `), (0, cssr_1.cE)('suffix', `
  display: inline-flex;

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

@@ -1075,14 +1075,14 @@ declare const _default: import("vue").DefineComponent<{
     handleTabOut: () => void;
     handleMenuMousedown: (e: MouseEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--menu-box-shadow': string;
-        '--menu-border-radius': string;
-        '--menu-color': string;
-        '--menu-height': string;
-        '--bezier': string;
-        '--action-padding': string;
-        '--action-text-color': string;
-        '--action-divider-color': string;
+        '--n-menu-box-shadow': string;
+        '--n-menu-border-radius': string;
+        '--n-menu-color': string;
+        '--n-menu-height': string;
+        '--n-bezier': string;
+        '--n-action-padding': string;
+        '--n-action-text-color': string;
+        '--n-action-divider-color': string;
     }>;
     mergedTheme: import("vue").ComputedRef<{
         common: {

package/lib/tree-select/src/TreeSelect.js

@@ -523,14 +523,14 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self: { menuBoxShadow, menuBorderRadius, menuColor, menuHeight, actionPadding, actionDividerColor, actionTextColor } } = themeRef.value;
                 return {
-                    '--menu-box-shadow': menuBoxShadow,
-                    '--menu-border-radius': menuBorderRadius,
-                    '--menu-color': menuColor,
-                    '--menu-height': menuHeight,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--action-padding': actionPadding,
-                    '--action-text-color': actionTextColor,
-                    '--action-divider-color': actionDividerColor
+                    '--n-menu-box-shadow': menuBoxShadow,
+                    '--n-menu-border-radius': menuBorderRadius,
+                    '--n-menu-color': menuColor,
+                    '--n-menu-height': menuHeight,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-action-padding': actionPadding,
+                    '--n-action-text-color': actionTextColor,
+                    '--n-action-divider-color': actionDividerColor
                 };
             }),
             mergedTheme: themeRef

package/lib/tree-select/src/styles/index.cssr.js

@@ -13,14 +13,14 @@ Object.defineProperty(exports, "__esModule", {
 const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr"));
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --menu-height
-// --menu-border-radius
-// --menu-box-shadow
-// --menu-color
-// --action-padding
-// --action-text-color
-// --action-divider-color
+// --n-bezier
+// --n-menu-height
+// --n-menu-border-radius
+// --n-menu-box-shadow
+// --n-menu-color
+// --n-action-padding
+// --n-action-text-color
+// --n-action-divider-color
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('tree-select', `
@@ -32,21 +32,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('tree-select', `
  position: relative;
  overflow: hidden;
  margin: 4px 0;
- transition: box-shadow .3s var(--bezier), background-color .3s var(--bezier);
- border-radius: var(--menu-border-radius);
- box-shadow: var(--menu-box-shadow);
- background-color: var(--menu-color);
+ transition: box-shadow .3s var(--n-bezier), background-color .3s var(--n-bezier);
+ border-radius: var(--n-menu-border-radius);
+ box-shadow: var(--n-menu-box-shadow);
+ background-color: var(--n-menu-color);
  outline: none;
- `, [(0, cssr_1.cB)('tree', 'max-height: var(--menu-height);'), (0, cssr_1.cE)('empty', `
+ `, [(0, cssr_1.cB)('tree', 'max-height: var(--n-menu-height);'), (0, cssr_1.cE)('empty', `
  display: flex;
  padding: 12px 32px;
  flex: 1;
  justify-content: center;
  `), (0, cssr_1.cE)('action', `
- padding: var(--action-padding);
+ padding: var(--n-action-padding);
  transition: 
- color .3s var(--bezier);
- border-color .3s var(--bezier);
- border-top: 1px solid var(--action-divider-color);
- color: var(--action-text-color);
+ color .3s var(--n-bezier);
+ border-color .3s var(--n-bezier);
+ border-top: 1px solid var(--n-action-divider-color);
+ color: var(--n-action-text-color);
  `), (0, fade_in_scale_up_cssr_1.default)()])]);

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

@@ -1,6 +1,7 @@
 import { PropType, CSSProperties } from 'vue';
-import { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import { FileInfo, FuncOrRecordOrUndef, OnFinish, OnRemove, OnDownload, OnChange, OnUpdateFileList, OnBeforeUpload, listType, OnPreview, CreateThumbnailUrl, CustomRequest } from './interface';
+import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
+import type { ImageGroupProps } from '../../image';
+import type { FileInfo, FuncOrRecordOrUndef, OnFinish, OnRemove, OnDownload, OnChange, OnUpdateFileList, OnBeforeUpload, ListType, OnPreview, CreateThumbnailUrl, CustomRequest, OnError } from './interface';
 declare const uploadProps: {
     readonly name: {
         readonly type: StringConstructor;
@@ -28,6 +29,7 @@ declare const uploadProps: {
     readonly onChange: PropType<OnChange>;
     readonly onRemove: PropType<OnRemove>;
     readonly onFinish: PropType<OnFinish>;
+    readonly onError: PropType<OnError>;
     readonly onBeforeUpload: PropType<OnBeforeUpload>;
     /** currently of no usage */
     readonly onDownload: PropType<OnDownload>;
@@ -61,7 +63,7 @@ declare const uploadProps: {
         readonly default: true;
     };
     readonly listType: {
-        readonly type: PropType<listType>;
+        readonly type: PropType<ListType>;
         readonly default: "text";
     };
     readonly onPreview: PropType<OnPreview>;
@@ -72,6 +74,7 @@ declare const uploadProps: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly imageGroupProps: PropType<ImageGroupProps>;
     readonly theme: PropType<import("../../_mixins").Theme<"Upload", {
         fontSize: string;
         lineHeight: string;
@@ -836,6 +839,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onChange: PropType<OnChange>;
     readonly onRemove: PropType<OnRemove>;
     readonly onFinish: PropType<OnFinish>;
+    readonly onError: PropType<OnError>;
     readonly onBeforeUpload: PropType<OnBeforeUpload>;
     /** currently of no usage */
     readonly onDownload: PropType<OnDownload>;
@@ -869,7 +873,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
     readonly listType: {
-        readonly type: PropType<listType>;
+        readonly type: PropType<ListType>;
         readonly default: "text";
     };
     readonly onPreview: PropType<OnPreview>;
@@ -880,6 +884,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: BooleanConstructor;
         readonly default: true;
     };
+    readonly imageGroupProps: PropType<ImageGroupProps>;
     readonly theme: PropType<import("../../_mixins").Theme<"Upload", {
         fontSize: string;
         lineHeight: string;
@@ -2004,6 +2009,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onChange?: unknown;
     readonly onRemove?: unknown;
     readonly onFinish?: unknown;
+    readonly onError?: unknown;
     readonly onBeforeUpload?: unknown;
     readonly onDownload?: unknown;
     readonly defaultUpload?: unknown;
@@ -2023,6 +2029,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly abstract?: unknown;
     readonly max?: unknown;
     readonly showTrigger?: unknown;
+    readonly imageGroupProps?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
@@ -2032,7 +2039,7 @@ declare const _default: import("vue").DefineComponent<{
     name: string;
     multiple: boolean;
     showTrigger: boolean;
-    listType: listType;
+    listType: ListType;
     showCancelButton: boolean;
     showRemoveButton: boolean;
     showDownloadButton: boolean;
@@ -2043,6 +2050,7 @@ declare const _default: import("vue").DefineComponent<{
     defaultUpload: boolean;
     defaultFileList: FileInfo[];
 } & {
+    onError?: OnError | undefined;
     data?: FuncOrRecordOrUndef;
     disabled?: boolean | undefined;
     onChange?: OnChange | undefined;
@@ -2785,9 +2793,9 @@ declare const _default: import("vue").DefineComponent<{
             lineBgProcessing: string;
         }, any>;
     }>> | undefined;
+    onFinish?: OnFinish | undefined;
     onRemove?: OnRemove | undefined;
     customRequest?: CustomRequest | undefined;
-    onFinish?: OnFinish | undefined;
     onBeforeUpload?: OnBeforeUpload | undefined;
     onDownload?: OnDownload | undefined;
     fileList?: FileInfo[] | undefined;
@@ -2796,6 +2804,7 @@ declare const _default: import("vue").DefineComponent<{
     fileListStyle?: string | CSSProperties | undefined;
     onPreview?: OnPreview | undefined;
     createThumbnailUrl?: CreateThumbnailUrl | undefined;
+    imageGroupProps?: ImageGroupProps | undefined;
 }>, {
     method: string;
     abstract: boolean;
@@ -2803,7 +2812,7 @@ declare const _default: import("vue").DefineComponent<{
     multiple: boolean;
     disabled: boolean | undefined;
     showTrigger: boolean;
-    listType: listType;
+    listType: ListType;
     showCancelButton: boolean;
     showRemoveButton: boolean;
     showDownloadButton: boolean;

package/lib/upload/src/Upload.js

@@ -19,11 +19,11 @@ const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const UploadDragger_1 = require("./UploadDragger");
-const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 const interface_1 = require("./interface");
 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"));
 /**
  * fils status ['pending', 'uploading', 'finished', 'removed', 'error']
  */
@@ -31,16 +31,19 @@ function createXhrHandlers(inst, file, XHR) {
     const { doChange, XhrMap } = inst;
     let percentage = 0;
     function handleXHRError(e) {
-        const fileAfterChange = Object.assign({}, file, {
+        var _a;
+        let fileAfterChange = Object.assign({}, file, {
             status: 'error',
             percentage
         });
         XhrMap.delete(file.id);
+        fileAfterChange =
+            ((_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 (XHR.status !== 200) {
+        if (XHR.status < 200 || XHR.status >= 300) {
             handleXHRError(e);
             return;
         }
@@ -110,10 +113,13 @@ function customSubmitImpl(options) {
             doChange(fileAfterChange);
         },
         onError() {
-            const fileAfterChange = Object.assign({}, file, {
+            var _a;
+            let fileAfterChange = Object.assign({}, file, {
                 status: 'error',
                 percentage
             });
+            fileAfterChange =
+                ((_a = inst.onError) === null || _a === void 0 ? void 0 : _a.call(inst, { file: fileAfterChange })) || fileAfterChange;
             doChange(fileAfterChange);
         }
     });
@@ -185,7 +191,7 @@ const uploadProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, data: [Object, Function], headers: [Object, Function], withCredentials: Boolean, disabled: {
         type: Boolean,
         default: undefined
-    }, onChange: Function, onRemove: Function, onFinish: Function, onBeforeUpload: Function, 
+    }, onChange: Function, onRemove: Function, onFinish: Function, onError: Function, onBeforeUpload: Function, 
     /** currently of no usage */
     onDownload: Function, defaultUpload: {
         type: Boolean,
@@ -211,7 +217,7 @@ const uploadProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
     }, onPreview: Function, createThumbnailUrl: Function, abstract: Boolean, max: Number, showTrigger: {
         type: Boolean,
         default: true
-    } });
+    }, imageGroupProps: Object });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Upload',
     props: uploadProps,
@@ -319,7 +325,8 @@ exports.default = (0, vue_1.defineComponent)({
                             inst: {
                                 doChange,
                                 XhrMap,
-                                onFinish: props.onFinish
+                                onFinish: props.onFinish,
+                                onError: props.onError
                             },
                             file,
                             action,
@@ -333,7 +340,8 @@ exports.default = (0, vue_1.defineComponent)({
                         submitImpl({
                             doChange,
                             XhrMap,
-                            onFinish: props.onFinish
+                            onFinish: props.onFinish,
+                            onError: props.onError
                         }, file, formData, {
                             method,
                             action,
@@ -387,22 +395,22 @@ exports.default = (0, vue_1.defineComponent)({
         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 } } = themeRef.value;
             return {
-                '--bezier': cubicBezierEaseInOut,
-                '--border-radius': borderRadius,
-                '--dragger-border': draggerBorder,
-                '--dragger-border-hover': draggerBorderHover,
-                '--dragger-color': draggerColor,
-                '--font-size': fontSize,
-                '--item-color-hover': itemColorHover,
-                '--item-color-hover-error': itemColorHoverError,
-                '--item-disabled-opacity': itemDisabledOpacity,
-                '--item-icon-color': itemIconColor,
-                '--item-text-color': itemTextColor,
-                '--item-text-color-error': itemTextColorError,
-                '--item-text-color-success': itemTextColorSuccess,
-                '--line-height': lineHeight,
-                '--item-border-image-card-error': itemBorderImageCardError,
-                '--item-border-image-card': itemBorderImageCard
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-radius': borderRadius,
+                '--n-dragger-border': draggerBorder,
+                '--n-dragger-border-hover': draggerBorderHover,
+                '--n-dragger-color': draggerColor,
+                '--n-font-size': fontSize,
+                '--n-item-color-hover': itemColorHover,
+                '--n-item-color-hover-error': itemColorHoverError,
+                '--n-item-disabled-opacity': itemDisabledOpacity,
+                '--n-item-icon-color': itemIconColor,
+                '--n-item-text-color': itemTextColor,
+                '--n-item-text-color-error': itemTextColorError,
+                '--n-item-text-color-success': itemTextColorSuccess,
+                '--n-line-height': lineHeight,
+                '--n-item-border-image-card-error': itemBorderImageCardError,
+                '--n-item-border-image-card': itemBorderImageCard
             };
         });
         (0, vue_1.provide)(interface_1.uploadInjectionKey, {
@@ -431,7 +439,8 @@ exports.default = (0, vue_1.defineComponent)({
             fileListStyleRef: (0, vue_1.toRef)(props, 'fileListStyle'),
             abstractRef: (0, vue_1.toRef)(props, 'abstract'),
             cssVarsRef,
-            showTriggerRef: (0, vue_1.toRef)(props, 'showTrigger')
+            showTriggerRef: (0, vue_1.toRef)(props, 'showTrigger'),
+            imageGroupPropsRef: (0, vue_1.toRef)(props, 'imageGroupProps')
         });
         const exposedMethods = {
             submit,