naive-ui 2.23.2 → 2.24.0

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

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
 import { TreeMate, TreeMateOptions, CheckStrategy } from 'treemate';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import { TreeDragInfo, TreeDropInfo, TreeOptions, Key, TreeOption, AllowDrop } from './interface';
+import { TreeDragInfo, TreeDropInfo, TreeOptions, Key, TreeOption, AllowDrop, RenderSwitcherIcon } from './interface';
 import { defaultAllowDrop } from './dnd';
 export declare function createTreeMateOptions<T>(keyField: string, childrenField: string): TreeMateOptions<T, T, T>;
 declare type OnUpdateKeys = (value: Key[], option: Array<TreeOption | null>) => void;
@@ -133,6 +133,7 @@ declare const treeProps: {
     readonly renderLabel: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
+    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragend: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
@@ -381,6 +382,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderLabel: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
     readonly renderPrefix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
     readonly renderSuffix: PropType<({ option, checked, selected }: import("./interface").TreeRenderProps) => import("vue").VNodeChild>;
+    readonly renderSwitcherIcon: PropType<RenderSwitcherIcon>;
     readonly onDragenter: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragleave: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
     readonly onDragend: PropType<MaybeArray<(e: TreeDragInfo) => void>>;
@@ -1023,6 +1025,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly renderLabel?: unknown;
     readonly renderPrefix?: unknown;
     readonly renderSuffix?: unknown;
+    readonly renderSwitcherIcon?: unknown;
     readonly onDragenter?: unknown;
     readonly onDragleave?: unknown;
     readonly onDragend?: unknown;
@@ -1228,6 +1231,7 @@ declare const _default: import("vue").DefineComponent<{
     onUpdateIndeterminateKeys?: MaybeArray<OnUpdateKeys> | undefined;
     "onUpdate:indeterminateKeys"?: MaybeArray<OnUpdateKeys> | undefined;
     selectedKeys?: Key[] | undefined;
+    renderSwitcherIcon?: RenderSwitcherIcon | undefined;
     onUpdateCheckedKeys?: MaybeArray<OnUpdateKeys> | undefined;
     "onUpdate:checkedKeys"?: MaybeArray<OnUpdateKeys> | undefined;
     onUpdateSelectedKeys?: MaybeArray<OnUpdateKeys> | undefined;

package/es/tree/src/Tree.js

@@ -97,7 +97,7 @@ const treeProps = Object.assign(Object.assign(Object.assign(Object.assign({}, us
     }, 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] }), 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] }), treeSharedProps), { 
     // internal props for tree-select
     internalScrollable: Boolean, internalScrollablePadding: String, 
     // use it to do check
@@ -954,6 +954,7 @@ export default defineComponent({
             renderLabelRef: toRef(props, 'renderLabel'),
             renderPrefixRef: toRef(props, 'renderPrefix'),
             renderSuffixRef: toRef(props, 'renderSuffix'),
+            renderSwitcherIconRef: toRef(props, 'renderSwitcherIcon'),
             labelFieldRef: toRef(props, 'labelField'),
             handleSwitcherClick,
             handleDragEnd,
@@ -996,11 +997,12 @@ export default defineComponent({
             }) }, 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/es/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/es/tree/src/TreeNodeSwitcher.js

@@ -1,6 +1,7 @@
-import { h, defineComponent } from 'vue';
+import { h, defineComponent, inject } from 'vue';
 import { SwitcherIcon } from '../../_internal/icons';
 import { NIconSwitchTransition, NBaseLoading, NBaseIcon } from '../../_internal';
+import { treeInjectionKey } from './interface';
 export default defineComponent({
     name: 'NTreeSwitcher',
     props: {
@@ -13,18 +14,28 @@ export default defineComponent({
         loading: Boolean,
         onClick: Function
     },
-    render() {
-        const { clsPrefix } = this;
-        return (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 },
-            h("div", { class: `${clsPrefix}-tree-node-switcher__icon` },
-                h(NIconSwitchTransition, null, {
-                    default: () => !this.loading ? (h(NBaseIcon, { clsPrefix: clsPrefix, key: "switcher" }, { default: () => h(SwitcherIcon, null) })) : (h(NBaseLoading, { clsPrefix: clsPrefix, key: "loading", radius: 85, strokeWidth: 20 }))
-                }))));
+    setup(props) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const { renderSwitcherIconRef } = inject(treeInjectionKey, null);
+        return () => {
+            const { clsPrefix } = props;
+            return (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 },
+                h("div", { class: `${clsPrefix}-tree-node-switcher__icon` },
+                    h(NIconSwitchTransition, null, {
+                        default: () => {
+                            if (props.loading) {
+                                return (h(NBaseLoading, { clsPrefix: clsPrefix, key: "loading", radius: 85, strokeWidth: 20 }));
+                            }
+                            const { value: renderSwitcherIcon } = renderSwitcherIconRef;
+                            return renderSwitcherIcon ? (renderSwitcherIcon()) : (h(NBaseIcon, { clsPrefix: clsPrefix, key: "switcher" }, { default: () => h(SwitcherIcon, null) }));
+                        }
+                    }))));
+        };
     }
 });

package/es/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/es/tree/src/styles/index.cssr.js

@@ -98,7 +98,9 @@ export default cB('tree', `
  align-items: center;
  justify-content: center;
  margin-right: 4px;
- `), cB('tree-node-content', `
+ `), cM('checkable', [cB('tree-node-content', `
+ padding: 0 6px;
+ `)]), cB('tree-node-content', `
  position: relative;
  display: inline-flex;
  align-items: center;
@@ -106,7 +108,7 @@ export default 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(--n-node-border-radius);
  text-decoration-color: #0000;

package/es/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;
@@ -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/es/upload/src/Upload.js

@@ -14,11 +14,11 @@ import { useConfig, useTheme, useFormItem } from '../../_mixins';
 import { warn, call, throwError } from '../../_utils';
 import { uploadLight } from '../styles';
 import { uploadDraggerKey } from './UploadDragger';
-import style from './styles/index.cssr';
 import { uploadInjectionKey } from './interface';
 import { createImageDataUrl } from './utils';
 import NUploadTrigger from './UploadTrigger';
 import NUploadFileList from './UploadFileList';
+import style from './styles/index.cssr';
 /**
  * fils status ['pending', 'uploading', 'finished', 'removed', 'error']
  */
@@ -26,16 +26,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;
         }
@@ -105,10 +108,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);
         }
     });
@@ -180,7 +186,7 @@ const uploadProps = Object.assign(Object.assign({}, useTheme.props), { name: {
     }, 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,
@@ -206,7 +212,7 @@ const uploadProps = Object.assign(Object.assign({}, useTheme.props), { name: {
     }, onPreview: Function, createThumbnailUrl: Function, abstract: Boolean, max: Number, showTrigger: {
         type: Boolean,
         default: true
-    } });
+    }, imageGroupProps: Object });
 export default defineComponent({
     name: 'Upload',
     props: uploadProps,
@@ -314,7 +320,8 @@ export default defineComponent({
                             inst: {
                                 doChange,
                                 XhrMap,
-                                onFinish: props.onFinish
+                                onFinish: props.onFinish,
+                                onError: props.onError
                             },
                             file,
                             action,
@@ -328,7 +335,8 @@ export default defineComponent({
                         submitImpl({
                             doChange,
                             XhrMap,
-                            onFinish: props.onFinish
+                            onFinish: props.onFinish,
+                            onError: props.onError
                         }, file, formData, {
                             method,
                             action,
@@ -426,7 +434,8 @@ export default defineComponent({
             fileListStyleRef: toRef(props, 'fileListStyle'),
             abstractRef: toRef(props, 'abstract'),
             cssVarsRef,
-            showTriggerRef: toRef(props, 'showTrigger')
+            showTriggerRef: toRef(props, 'showTrigger'),
+            imageGroupPropsRef: toRef(props, 'imageGroupProps')
         });
         const exposedMethods = {
             submit,

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

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { FileInfo, listType } from './interface';
+import type { FileInfo, ListType } from './interface';
 declare const _default: import("vue").DefineComponent<{
     clsPrefix: {
         type: StringConstructor;
@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     listType: {
-        type: PropType<listType>;
+        type: PropType<ListType>;
         required: true;
     };
 }, {
@@ -66,7 +66,7 @@ declare const _default: import("vue").DefineComponent<{
             scrollbarColorHover: string;
             scrollbarWidth: string;
             scrollbarHeight: string;
-            scrollbarBorderRadius: string;
+            scrollbarBorderRadius: string; /** I haven't figure out its usage, so just leave it here */
             progressRailColor: string;
             railColor: string;
             popoverColor: string;
@@ -220,7 +220,7 @@ declare const _default: import("vue").DefineComponent<{
                 colorPressedInfo: string;
                 colorFocusInfo: string;
                 colorDisabledInfo: string;
-                textColorInfo: string;
+                textColorInfo: string; /** I haven't figure out its usage, so just leave it here */
                 textColorHoverInfo: string;
                 textColorPressedInfo: string;
                 textColorFocusInfo: string;
@@ -401,6 +401,6 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     clsPrefix: string;
     file: FileInfo;
-    listType: listType;
+    listType: ListType;
 } & {}>, {}>;
 export default _default;

package/es/upload/src/UploadFileList.js

@@ -12,10 +12,10 @@ export default defineComponent({
         if (!NUpload) {
             throwError('upload-file-list', '`n-upload-file-list` must be placed inside `n-upload`.');
         }
-        const { mergedClsPrefixRef, listTypeRef, mergedFileListRef, fileListStyleRef, cssVarsRef, maxReachedRef, showTriggerRef } = NUpload;
+        const { mergedClsPrefixRef, listTypeRef, mergedFileListRef, fileListStyleRef, cssVarsRef, maxReachedRef, showTriggerRef, imageGroupPropsRef } = NUpload;
         const isImageCardTypeRef = computed(() => listTypeRef.value === 'image-card');
         const renderFileList = () => mergedFileListRef.value.map((file) => (h(NUploadFile, { clsPrefix: mergedClsPrefixRef.value, key: file.id, file: file, listType: listTypeRef.value })));
-        const renderUploadFileList = () => isImageCardTypeRef.value ? (h(NImageGroup, null, { default: renderFileList })) : (h(NFadeInExpandTransition, { group: true }, {
+        const renderUploadFileList = () => isImageCardTypeRef.value ? (h(NImageGroup, Object.assign({}, imageGroupPropsRef.value), { default: renderFileList })) : (h(NFadeInExpandTransition, { group: true }, {
             default: renderFileList
         }));
         return () => {

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

@@ -1,4 +1,5 @@
 import { Ref, InjectionKey, CSSProperties } from 'vue';
+import { ImageGroupProps } from '../../image';
 import type { MergedTheme } from '../../_mixins';
 import type { UploadTheme } from '../styles';
 export interface FileInfo {
@@ -21,7 +22,7 @@ export declare type OnChange = (data: {
 }) => void;
 export declare type OnFinish = ({ file, event }: {
     file: FileInfo;
-    event?: Event;
+    event?: ProgressEvent;
 }) => FileInfo | undefined;
 export declare type OnRemove = (data: {
     file: FileInfo;
@@ -31,7 +32,8 @@ export declare type OnDownload = (file: FileInfo) => Promise<boolean> | boolean
 export interface UploadInternalInst {
     doChange: DoChange;
     XhrMap: Map<string, XMLHttpRequest>;
-    onFinish?: OnFinish;
+    onError: OnError | undefined;
+    onFinish: OnFinish | undefined;
 }
 export declare type DoChange = (fileAfterChange: FileInfo, event?: ProgressEvent | Event, options?: {
     append?: boolean;
@@ -53,7 +55,7 @@ export interface UploadInjection {
     doChange: DoChange;
     showPreviewButtonRef: Ref<boolean>;
     onPreviewRef: Ref<OnPreview | undefined>;
-    listTypeRef: Ref<listType>;
+    listTypeRef: Ref<ListType>;
     dragOverRef: Ref<boolean>;
     draggerInsideRef: {
         value: boolean;
@@ -62,6 +64,7 @@ export interface UploadInjection {
     mergedDisabledRef: Ref<boolean>;
     maxReachedRef: Ref<boolean>;
     abstractRef: Ref<boolean>;
+    imageGroupPropsRef: Ref<ImageGroupProps | undefined>;
     cssVarsRef: Ref<CSSProperties>;
     submit: (fileId?: string) => void;
     getFileThumbnailUrl: (file: FileInfo) => Promise<string>;
@@ -83,7 +86,7 @@ export declare type OnBeforeUpload = (data: {
     file: FileInfo;
     fileList: FileInfo[];
 }) => Promise<unknown>;
-export declare type listType = 'text' | 'image' | 'image-card';
+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 {
@@ -99,3 +102,7 @@ export interface CustomRequestOptions {
     onError: () => void;
 }
 export declare type CustomRequest = (options: CustomRequestOptions) => void;
+export declare type OnError = ({ file, event }: {
+    file: FileInfo;
+    event?: ProgressEvent;
+}) => FileInfo | undefined;

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.23.2";
+declare const _default: "2.24.0";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '2.23.2';
+export default '2.24.0';

package/lib/_internal/icons/Switcher.js

@@ -4,8 +4,7 @@ const vue_1 = require("vue");
 exports.default = (0, vue_1.defineComponent)({
     name: 'Switcher',
     render() {
-        return ((0, vue_1.h)("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "enable-background": "new 0 0 512 512" },
-            (0, vue_1.h)("g", null,
-                (0, vue_1.h)("polygon", { points: "192,128 320,256 192,384" }))));
+        return ((0, vue_1.h)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" },
+            (0, vue_1.h)("path", { d: "M12 8l10 8l-10 8z" })));
     }
 });

package/lib/_internal/selection/src/styles/index.cssr.js

@@ -99,7 +99,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  position: relative;
  z-index: auto;
  display: flex;
- padding: 3px 26px 0 14px;
+ padding: 3px 26px 0 12px;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;

package/lib/_internal/selection/styles/_common.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    paddingSingle: '0 26px 0 14px',
+    paddingSingle: '0 26px 0 12px',
     clearSize: '16px',
     arrowSize: '16px'
 };

package/lib/auto-complete/src/AutoComplete.d.ts

@@ -1,9 +1,10 @@
 import { PropType, InputHTMLAttributes } from 'vue';
 import { TreeNode } from 'treemate';
+import { RenderOption, RenderLabel } from '../../_internal/select-menu/src/interface';
 import { MaybeArray } from '../../_utils';
 import type { ExtractPublicPropTypes } from '../../_utils';
 import type { SelectBaseOption, SelectGroupOption, SelectIgnoredOption } from '../../select/src/interface';
-import { AutoCompleteOptions, OnUpdateValue, OnSelect } from './interface';
+import type { AutoCompleteOptions, OnUpdateValue, OnSelect } from './interface';
 declare const autoCompleteProps: {
     readonly to: {
         type: PropType<string | boolean | HTMLElement>;
@@ -35,6 +36,8 @@ declare const autoCompleteProps: {
     readonly clearAfterSelect: BooleanConstructor;
     readonly getShow: PropType<(inputValue: string) => boolean>;
     readonly inputProps: PropType<InputHTMLAttributes>;
+    readonly renderOption: PropType<RenderOption>;
+    readonly renderLabel: PropType<RenderLabel>;
     readonly size: PropType<"small" | "medium" | "large">;
     readonly options: {
         readonly type: PropType<AutoCompleteOptions>;
@@ -46,11 +49,7 @@ declare const autoCompleteProps: {
     readonly onSelect: PropType<MaybeArray<OnSelect>>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     readonly onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
-    readonly onInput: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onInput: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"AutoComplete", {
         menuBoxShadow: string;
     }, {
@@ -432,6 +431,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly clearAfterSelect: BooleanConstructor;
     readonly getShow: PropType<(inputValue: string) => boolean>;
     readonly inputProps: PropType<InputHTMLAttributes>;
+    readonly renderOption: PropType<RenderOption>;
+    readonly renderLabel: PropType<RenderLabel>;
     readonly size: PropType<"small" | "medium" | "large">;
     readonly options: {
         readonly type: PropType<AutoCompleteOptions>;
@@ -443,11 +444,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onSelect: PropType<MaybeArray<OnSelect>>;
     readonly onBlur: PropType<MaybeArray<(e: FocusEvent) => void>>;
     readonly onFocus: PropType<MaybeArray<(e: FocusEvent) => void>>;
-    readonly onInput: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onInput: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"AutoComplete", {
         menuBoxShadow: string;
     }, {
@@ -1091,6 +1088,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly clearAfterSelect?: unknown;
     readonly getShow?: unknown;
     readonly inputProps?: unknown;
+    readonly renderOption?: unknown;
+    readonly renderLabel?: unknown;
     readonly size?: unknown;
     readonly options?: unknown;
     readonly zIndex?: unknown;
@@ -1469,6 +1468,8 @@ declare const _default: import("vue").DefineComponent<{
     }>> | undefined;
     loading?: boolean | undefined;
     bordered?: boolean | undefined;
+    renderLabel?: RenderLabel | undefined;
+    renderOption?: RenderOption | undefined;
     clearable?: boolean | undefined;
     inputProps?: InputHTMLAttributes | undefined;
     "onUpdate:value"?: MaybeArray<OnUpdateValue> | undefined;
@@ -1476,7 +1477,6 @@ declare const _default: import("vue").DefineComponent<{
     getShow?: ((inputValue: string) => boolean) | undefined;
 }>, {
     disabled: boolean | undefined;
-    onInput: MaybeArray<OnUpdateValue> | undefined;
     to: string | boolean | HTMLElement;
     loading: boolean;
     bordered: boolean | undefined;