naive-ui 2.24.4 → 2.25.0

package/es/dropdown/src/Dropdown.d.ts

@@ -18,7 +18,6 @@ export interface DropdownInjection {
     doSelect: OnUpdateValueImpl;
     doUpdateShow: (value: boolean) => void;
 }
-export declare const dropdownInjectionKey: import("vue").InjectionKey<DropdownInjection>;
 declare const dropdownProps: {
     readonly theme: PropType<import("../../_mixins").Theme<"Dropdown", {
         optionHeightSmall: string;
@@ -304,11 +303,15 @@ declare const dropdownProps: {
         default: undefined;
     };
     readonly overlap: BooleanConstructor;
+    readonly keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly internalExtraClass: {
         type: PropType<string[]>;
         default: () => never[];
     };
-    readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     readonly zIndex: NumberConstructor;
@@ -617,11 +620,15 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     readonly overlap: BooleanConstructor;
+    readonly keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly internalExtraClass: {
         type: PropType<string[]>;
         default: () => never[];
     };
-    readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     readonly zIndex: NumberConstructor;
@@ -1117,11 +1124,15 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     readonly overlap: BooleanConstructor;
+    readonly keepAliveOnHover: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly internalExtraClass: {
         type: PropType<string[]>;
         default: () => never[];
     };
-    readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     readonly zIndex: NumberConstructor;
@@ -1151,6 +1162,7 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean;
     duration: number;
     to: string | boolean | HTMLElement;
+    options: DropdownMixedOption[];
     raw: boolean;
     placement: FollowerPlacement;
     overlap: boolean;
@@ -1159,6 +1171,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    keepAliveOnHover: boolean;
     internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
@@ -1166,7 +1179,6 @@ declare const _default: import("vue").DefineComponent<{
     internalSyncTargetWithParent: boolean;
     internalInheritedEventHandlers: import("../../popover/src/Popover").TriggerEventHandlers[];
     arrow: boolean | undefined;
-    options: DropdownMixedOption[];
     labelField: string;
     keyboard: boolean;
     inverted: boolean;

package/es/dropdown/src/Dropdown.js

@@ -4,11 +4,11 @@ import { useMergedState, useKeyboard, useMemo } from 'vooks';
 import { popoverBaseProps } from '../../popover/src/Popover';
 import { useConfig, useTheme } from '../../_mixins';
 import { NPopover } from '../../popover';
-import { keep, call, createKey, createRefSetter, createInjectionKey } from '../../_utils';
+import { keep, call, createKey, createRefSetter } from '../../_utils';
 import { dropdownLight } from '../styles';
 import NDropdownMenu from './DropdownMenu';
 import style from './styles/index.cssr';
-export const dropdownInjectionKey = createInjectionKey('n-dropdown');
+import { dropdownInjectionKey } from './context';
 const dropdownBaseProps = {
     animated: {
         type: Boolean,
@@ -116,7 +116,7 @@ export default defineComponent({
             }
         }, keyboardEnabledRef);
         const { mergedClsPrefixRef } = useConfig(props);
-        const themeRef = useTheme('Dropdown', 'Dropdown', style, dropdownLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('Dropdown', '-dropdown', style, dropdownLight, props, mergedClsPrefixRef);
         provide(dropdownInjectionKey, {
             labelFieldRef: toRef(props, 'labelField'),
             childrenFieldRef: toRef(props, 'childrenField'),
@@ -290,6 +290,8 @@ export default defineComponent({
                 class: [
                     className,
                     `${mergedClsPrefix}-dropdown`,
+                    this.trigger === 'manual' &&
+                        `${mergedClsPrefix}-popover--manual-trigger`,
                     this.showArrow && `${mergedClsPrefix}-popover--show-arrow`
                 ],
                 clsPrefix: mergedClsPrefix,
@@ -311,8 +313,7 @@ export default defineComponent({
             onUpdateShow: this.doUpdateShow
         };
         return (h(NPopover, Object.assign({}, keep(this.$props, popoverPropKeys), popoverProps), {
-            trigger: this.$slots.default,
-            _: 1
+            trigger: () => { var _a, _b; return (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a); }
         }));
     }
 });

package/es/dropdown/src/DropdownGroup.js

@@ -1,5 +1,6 @@
 import { defineComponent, Fragment, h } from 'vue';
 import { warn } from '../../_utils';
+// eslint-disable-next-line import/no-cycle
 import NDropdownOption from './DropdownOption';
 import NDropdownDivider from './DropdownDivider';
 import NDropdownGroupHeader from './DropdownGroupHeader';

package/es/dropdown/src/DropdownGroupHeader.js

@@ -1,7 +1,6 @@
 import { defineComponent, h, inject } from 'vue';
 import { render } from '../../_utils';
-import { dropdownInjectionKey } from './Dropdown';
-import { dropdownMenuInjectionKey } from './DropdownMenu';
+import { dropdownInjectionKey, dropdownMenuInjectionKey } from './context';
 export default defineComponent({
     name: 'DropdownGroupHeader',
     props: {

package/es/dropdown/src/DropdownMenu.d.ts

@@ -4,7 +4,6 @@ export interface NDropdownMenuInjection {
     showIconRef: Ref<boolean>;
     hasSubmenuRef: Ref<boolean>;
 }
-export declare const dropdownMenuInjectionKey: import("vue").InjectionKey<NDropdownMenuInjection>;
 declare const _default: import("vue").DefineComponent<{
     showArrow: BooleanConstructor;
     arrowStyle: PropType<string | CSSProperties>;

package/es/dropdown/src/DropdownMenu.js

@@ -1,13 +1,13 @@
 import { computed, defineComponent, h, inject, provide } from 'vue';
 import { renderArrow } from '../../popover/src/PopoverBody';
-import NDropdownOption from './DropdownOption';
 import NDropdownDivider from './DropdownDivider';
+// eslint-disable-next-line import/no-cycle
 import NDropdownGroup from './DropdownGroup';
+// eslint-disable-next-line import/no-cycle
+import NDropdownOption from './DropdownOption';
 import NDropdownRenderOption from './DropdownRenderOption';
 import { isSubmenuNode, isGroupNode, isDividerNode, isRenderNode } from './utils';
-import { dropdownInjectionKey } from './Dropdown';
-import { createInjectionKey } from '../../_utils';
-export const dropdownMenuInjectionKey = createInjectionKey('n-dropdown-menu');
+import { dropdownInjectionKey, dropdownMenuInjectionKey } from './context';
 export default defineComponent({
     name: 'DropdownMenu',
     props: {

package/es/dropdown/src/DropdownOption.d.ts

@@ -1,6 +1,9 @@
 import { PropType, Ref, HTMLAttributes } from 'vue';
 import { FollowerPlacement } from 'vueuc';
 import { TreeNode } from 'treemate';
+export interface NDropdownOptionInjection {
+    enteringSubmenuRef: Ref<boolean>;
+}
 declare const _default: import("vue").DefineComponent<{
     clsPrefix: {
         type: StringConstructor;

package/es/dropdown/src/DropdownOption.js

@@ -2,13 +2,13 @@ import { h, computed, inject, ref, Transition, defineComponent, provide, mergePr
 import { VBinder, VTarget, VFollower } from 'vueuc';
 import { useMemo } from 'vooks';
 import { ChevronRightIcon } from '../../_internal/icons';
-import { createInjectionKey, render, useDeferredTrue } from '../../_utils';
+import { render, useDeferredTrue } from '../../_utils';
 import { NIcon } from '../../icon';
-import NDropdownMenu, { dropdownMenuInjectionKey } from './DropdownMenu';
-import { dropdownInjectionKey } from './Dropdown';
+// eslint-disable-next-line import/no-cycle
+import NDropdownMenu from './DropdownMenu';
+import { dropdownMenuInjectionKey, dropdownInjectionKey, dropdownOptionInjectionKey } from './context';
 import { isSubmenuNode } from './utils';
 import { happensIn } from 'seemly';
-const dropdownOptionInjectionKey = createInjectionKey('n-dropdown-option');
 export default defineComponent({
     name: 'DropdownOption',
     props: {

package/es/dropdown/src/context.d.ts

@@ -0,0 +1,6 @@
+import type { DropdownInjection } from './Dropdown';
+import type { NDropdownMenuInjection } from './DropdownMenu';
+import type { NDropdownOptionInjection } from './DropdownOption';
+export declare const dropdownMenuInjectionKey: import("vue").InjectionKey<NDropdownMenuInjection>;
+export declare const dropdownInjectionKey: import("vue").InjectionKey<DropdownInjection>;
+export declare const dropdownOptionInjectionKey: import("vue").InjectionKey<NDropdownOptionInjection>;

package/es/dropdown/src/context.js

@@ -0,0 +1,4 @@
+import { createInjectionKey } from '../../_utils';
+export const dropdownMenuInjectionKey = createInjectionKey('n-dropdown-menu');
+export const dropdownInjectionKey = createInjectionKey('n-dropdown');
+export const dropdownOptionInjectionKey = createInjectionKey('n-dropdown-option');

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

@@ -1,6 +1,6 @@
 import { TreeNode } from 'treemate';
 import { VNodeChild } from 'vue';
-import { MenuOption, MenuGroupOption, MenuDividerOption, MenuIgnoredOption, MenuRenderOption } from '../../menu/src/interface';
+import type { MenuOption, MenuGroupOption, MenuDividerOption, MenuIgnoredOption, MenuRenderOption } from '../../menu/src/interface';
 export declare type Key = string | number;
 export declare type DropdownOption = MenuOption;
 export declare type DropdownGroupOption = MenuGroupOption;

package/es/dynamic-input/src/DynamicInput.d.ts

@@ -1,5 +1,6 @@
 import { PropType, CSSProperties } from 'vue';
-import { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
+import type { ButtonProps } from '../../button';
+import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import type { OnUpdateValue } from './interface';
 declare const dynamicInputProps: {
     readonly max: NumberConstructor;
@@ -30,20 +31,14 @@ declare const dynamicInputProps: {
         readonly type: StringConstructor;
         readonly default: "";
     };
+    readonly showSortButton: BooleanConstructor;
+    readonly createButtonProps: PropType<ButtonProps>;
     readonly onCreate: PropType<(index: number) => any>;
     readonly onRemove: PropType<(index: number) => void>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
-    readonly onClear: {
-        readonly type: PropType<() => void>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onInput: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onClear: PropType<() => void>;
+    readonly onInput: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"DynamicInput", {
         actionMargin: string;
     }, {
@@ -879,20 +874,14 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "";
     };
+    readonly showSortButton: BooleanConstructor;
+    readonly createButtonProps: PropType<ButtonProps>;
     readonly onCreate: PropType<(index: number) => any>;
     readonly onRemove: PropType<(index: number) => void>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
-    readonly onClear: {
-        readonly type: PropType<() => void>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onInput: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onClear: PropType<() => void>;
+    readonly onInput: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"DynamicInput", {
         actionMargin: string;
     }, {
@@ -1712,6 +1701,7 @@ declare const _default: import("vue").DefineComponent<{
     ensureKey: (value: any, index: number) => string | number;
     handleValueChange: (index: number, value: any) => void;
     remove: (index: number) => void;
+    move: (type: 'up' | 'down', index: number) => void;
     createItem: (index: number) => void;
     mergedTheme: import("vue").ComputedRef<{
         common: {
@@ -2131,20 +2121,14 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: StringConstructor;
         readonly default: "";
     };
+    readonly showSortButton: BooleanConstructor;
+    readonly createButtonProps: PropType<ButtonProps>;
     readonly onCreate: PropType<(index: number) => any>;
     readonly onRemove: PropType<(index: number) => void>;
     readonly 'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     readonly onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
-    readonly onClear: {
-        readonly type: PropType<() => void>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly onInput: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onClear: PropType<() => void>;
+    readonly onInput: PropType<MaybeArray<OnUpdateValue>>;
     readonly theme: PropType<import("../../_mixins").Theme<"DynamicInput", {
         actionMargin: string;
     }, {
@@ -2950,13 +2934,12 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }>>, {
-    onInput: MaybeArray<OnUpdateValue> | undefined;
     placeholder: string;
     min: number;
-    onClear: () => void;
     defaultValue: any[];
     preset: "input" | "pair";
     keyPlaceholder: string;
     valuePlaceholder: string;
+    showSortButton: boolean;
 }>;
 export default _default;

package/es/dynamic-input/src/DynamicInput.js

@@ -1,12 +1,12 @@
-import { h, ref, toRef, isProxy, toRaw, computed, defineComponent, inject, provide } from 'vue';
+import { h, ref, toRef, isProxy, toRaw, computed, defineComponent, inject, provide, watchEffect } from 'vue';
 import { useMergedState } from 'vooks';
 import { createId } from 'seemly';
-import { RemoveIcon, AddIcon } from '../../_internal/icons';
+import { RemoveIcon, AddIcon, ArrowDownIcon, ArrowUpIcon } from '../../_internal/icons';
+import { formItemInjectionKey } from '../../_mixins/use-form-item';
 import { NBaseIcon } from '../../_internal';
 import { NButton, NButtonGroup } from '../../button';
 import { useTheme, useLocale, useConfig } from '../../_mixins';
-import { warn, call } from '../../_utils';
-import { formItemInjectionKey } from '../../_mixins/use-form-item';
+import { call, warnOnce, resolveSlotWithProps, resolveSlot } from '../../_utils';
 import { dynamicInputLight } from '../styles';
 import NDynamicInputInputPreset from './InputPreset';
 import NDynamicInputPairPreset from './PairPreset';
@@ -37,35 +37,29 @@ const dynamicInputProps = Object.assign(Object.assign({}, useTheme.props), { max
     placeholder: {
         type: String,
         default: ''
-    }, onCreate: Function, onRemove: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
+    }, showSortButton: Boolean, createButtonProps: Object, onCreate: Function, onRemove: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
     // deprecated
-    onClear: {
-        type: Function,
-        validator: () => {
-            warn('dynamic-input', '`on-clear` is deprecated, it is out of usage anymore.');
-            return true;
-        },
-        default: undefined
-    }, onInput: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('dynamic-input', '`on-input` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onClear: Function, onInput: [Function, Array] });
 export default defineComponent({
     name: 'DynamicInput',
     props: dynamicInputProps,
     setup(props, { slots }) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.onClear !== undefined) {
+                    warnOnce('dynamic-input', '`on-clear` is deprecated, it is out of usage anymore.');
+                }
+                if (props.onInput !== undefined) {
+                    warnOnce('dynamic-input', '`on-input` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { NConfigProvider, mergedClsPrefixRef } = useConfig();
         const NFormItem = inject(formItemInjectionKey, null);
         const uncontrolledValueRef = ref(props.defaultValue);
         const controlledValueRef = toRef(props, 'value');
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
-        const themeRef = useTheme('DynamicInput', 'DynamicInput', style, dynamicInputLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('DynamicInput', '-dynamic-input', style, dynamicInputLight, props, mergedClsPrefixRef);
         const insertionDisabledRef = computed(() => {
             const { value: mergedValue } = mergedValueRef;
             if (Array.isArray(mergedValue)) {
@@ -170,6 +164,32 @@ export default defineComponent({
             if (onRemove)
                 onRemove(index);
         }
+        function swap(array, currentIndex, targetIndex) {
+            if (currentIndex < 0 ||
+                targetIndex < 0 ||
+                currentIndex >= array.length ||
+                targetIndex >= array.length) {
+                return;
+            }
+            if (currentIndex === targetIndex)
+                return;
+            const currentItem = array[currentIndex];
+            array[currentIndex] = array[targetIndex];
+            array[targetIndex] = currentItem;
+        }
+        function move(type, index) {
+            const { value: mergedValue } = mergedValueRef;
+            if (!Array.isArray(mergedValue))
+                return;
+            const newValue = Array.from(mergedValue);
+            if (type === 'up') {
+                swap(newValue, index, index - 1);
+            }
+            if (type === 'down') {
+                swap(newValue, index, index + 1);
+            }
+            doUpdateValue(newValue);
+        }
         provide(dynamicInputInjectionKey, {
             mergedThemeRef: themeRef,
             keyPlaceholderRef: toRef(props, 'keyPlaceholder'),
@@ -189,6 +209,7 @@ export default defineComponent({
             ensureKey,
             handleValueChange,
             remove,
+            move,
             createItem,
             mergedTheme: themeRef,
             cssVars: computed(() => {
@@ -200,28 +221,44 @@ export default defineComponent({
         };
     },
     render() {
-        const { buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, $slots, preset, itemStyle, NFormItem, ensureKey, handleValueChange, remove, createItem } = this;
-        return (h("div", { class: `${mergedClsPrefix}-dynamic-input`, style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? (h(NButton, { block: true, ghost: true, dashed: true, size: buttonSize, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.handleCreateClick }, {
-            default: () => locale.create,
-            icon: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(AddIcon, null) }))
+        const { $slots, buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, itemStyle, preset, showSortButton, NFormItem, ensureKey, handleValueChange, remove, createItem, move } = this;
+        return (h("div", { class: `${mergedClsPrefix}-dynamic-input`, style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? (h(NButton, Object.assign({ block: true, ghost: true, dashed: true, size: buttonSize }, this.createButtonProps, { disabled: this.insertionDisabled, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.handleCreateClick }), {
+            default: () => resolveSlot($slots['create-button-default'], () => [
+                locale.create
+            ]),
+            icon: () => resolveSlot($slots['create-button-icon'], () => [
+                h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(AddIcon, null) })
+            ])
         })) : (mergedValue.map((_, index) => (h("div", { key: keyField ? _[keyField] : ensureKey(_, index), "data-key": keyField ? _[keyField] : ensureKey(_, index), class: `${mergedClsPrefix}-dynamic-input-item`, style: itemStyle },
-            $slots.default ? ($slots.default({
+            resolveSlotWithProps($slots.default, {
                 value: mergedValue[index],
                 index
-            })) : preset === 'input' ? (h(NDynamicInputInputPreset, { clsPrefix: mergedClsPrefix, value: mergedValue[index], parentPath: NFormItem ? NFormItem.path.value : undefined, path: (NFormItem === null || NFormItem === void 0 ? void 0 : NFormItem.path.value)
-                    ? `${NFormItem.path.value}[${index}]`
-                    : undefined, onUpdateValue: (v) => handleValueChange(index, v) })) : preset === 'pair' ? (h(NDynamicInputPairPreset, { clsPrefix: mergedClsPrefix, value: mergedValue[index], parentPath: NFormItem ? NFormItem.path.value : undefined, path: (NFormItem === null || NFormItem === void 0 ? void 0 : NFormItem.path.value)
-                    ? `${NFormItem.path.value}[${index}]`
-                    : undefined, onUpdateValue: (v) => handleValueChange(index, v) })) : null,
+            }, () => {
+                return [
+                    preset === 'input' ? (h(NDynamicInputInputPreset, { clsPrefix: mergedClsPrefix, value: mergedValue[index], parentPath: NFormItem ? NFormItem.path.value : undefined, path: (NFormItem === null || NFormItem === void 0 ? void 0 : NFormItem.path.value)
+                            ? `${NFormItem.path.value}[${index}]`
+                            : undefined, onUpdateValue: (v) => handleValueChange(index, v) })) : preset === 'pair' ? (h(NDynamicInputPairPreset, { clsPrefix: mergedClsPrefix, value: mergedValue[index], parentPath: NFormItem ? NFormItem.path.value : undefined, path: (NFormItem === null || NFormItem === void 0 ? void 0 : NFormItem.path.value)
+                            ? `${NFormItem.path.value}[${index}]`
+                            : undefined, onUpdateValue: (v) => handleValueChange(index, v) })) : null
+                ];
+            }),
             h("div", { class: `${mergedClsPrefix}-dynamic-input-item__action` },
                 h(NButtonGroup, { size: buttonSize }, {
                     default: () => [
-                        !this.removeDisabled ? (h(NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, circle: true, onClick: () => remove(index) }, {
+                        h(NButton, { disabled: this.removeDisabled, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, circle: true, onClick: () => remove(index) }, {
                             icon: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(RemoveIcon, null) }))
-                        })) : null,
+                        }),
                         h(NButton, { disabled: this.insertionDisabled, circle: true, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: () => createItem(index) }, {
                             icon: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(AddIcon, null) }))
-                        })
+                        }),
+                        showSortButton ? (h(NButton, { disabled: index === 0, circle: true, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: () => move('up', index) }, {
+                            icon: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                                default: () => h(ArrowUpIcon, null)
+                            }))
+                        })) : null,
+                        showSortButton ? (h(NButton, { disabled: index === mergedValue.length - 1, circle: true, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: () => move('down', index) }, {
+                            icon: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(ArrowDownIcon, null) }))
+                        })) : null
                     ]
                 }))))))));
     }

package/es/dynamic-tags/src/DynamicTags.d.ts

@@ -1,4 +1,5 @@
 import { PropType, CSSProperties } from 'vue';
+import type { InputProps } from '../../input';
 import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import type { OnUpdateValue } from './interface';
 declare const dynamicTagsProps: {
@@ -12,18 +13,15 @@ declare const dynamicTagsProps: {
     };
     value: PropType<string[]>;
     inputStyle: PropType<string | CSSProperties>;
+    inputProps: PropType<InputProps>;
     max: PropType<number>;
     tagStyle: PropType<string | CSSProperties>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
-    onChange: {
-        type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     color: PropType<import("../../tag/src/common-props").TagColor>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
+        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
         readonly default: "default";
     };
     round: BooleanConstructor;
@@ -1053,18 +1051,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     value: PropType<string[]>;
     inputStyle: PropType<string | CSSProperties>;
+    inputProps: PropType<InputProps>;
     max: PropType<number>;
     tagStyle: PropType<string | CSSProperties>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
-    onChange: {
-        type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     color: PropType<import("../../tag/src/common-props").TagColor>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
+        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
         readonly default: "default";
     };
     round: BooleanConstructor;
@@ -2584,18 +2579,15 @@ declare const _default: import("vue").DefineComponent<{
     };
     value: PropType<string[]>;
     inputStyle: PropType<string | CSSProperties>;
+    inputProps: PropType<InputProps>;
     max: PropType<number>;
     tagStyle: PropType<string | CSSProperties>;
     'onUpdate:value': PropType<MaybeArray<OnUpdateValue>>;
     onUpdateValue: PropType<MaybeArray<OnUpdateValue>>;
-    onChange: {
-        type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        validator: () => boolean;
-        default: undefined;
-    };
+    onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     color: PropType<import("../../tag/src/common-props").TagColor>;
     type: {
-        readonly type: PropType<"default" | "error" | "info" | "success" | "warning" | "primary">;
+        readonly type: PropType<"default" | "success" | "error" | "warning" | "info" | "primary">;
         readonly default: "default";
     };
     round: BooleanConstructor;
@@ -3613,11 +3605,10 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }>>, {
-    type: "default" | "error" | "info" | "success" | "warning" | "primary";
+    type: "default" | "success" | "error" | "warning" | "info" | "primary";
     round: boolean;
     size: "small" | "medium" | "large";
     disabled: boolean | undefined;
-    onChange: MaybeArray<OnUpdateValue> | undefined;
     closable: boolean;
     defaultValue: string[];
 }>;

package/es/dynamic-tags/src/DynamicTags.js

@@ -1,4 +1,4 @@
-import { h, defineComponent, ref, computed, nextTick, toRef } from 'vue';
+import { h, defineComponent, ref, computed, nextTick, toRef, watchEffect } from 'vue';
 import { useMergedState } from 'vooks';
 import commonProps from '../../tag/src/common-props';
 import { AddIcon } from '../../_internal/icons';
@@ -8,7 +8,7 @@ import { NInput } from '../../input';
 import { NTag } from '../../tag';
 import { NBaseIcon } from '../../_internal';
 import { useTheme, useFormItem, useLocale, useConfig } from '../../_mixins';
-import { warn, call, smallerSize } from '../../_utils';
+import { call, smallerSize, warnOnce } from '../../_utils';
 import { dynamicTagsLight } from '../styles';
 import style from './styles/index.cssr';
 const dynamicTagsProps = Object.assign(Object.assign(Object.assign({}, useTheme.props), commonProps), { closable: {
@@ -17,22 +17,20 @@ const dynamicTagsProps = Object.assign(Object.assign(Object.assign({}, useTheme.
     }, defaultValue: {
         type: Array,
         default: () => []
-    }, value: Array, inputStyle: [String, Object], max: Number, tagStyle: [String, Object], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
+    }, value: Array, inputStyle: [String, Object], inputProps: Object, max: Number, tagStyle: [String, Object], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
     // deprecated
-    onChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('dynamic-tags', '`on-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onChange: [Function, Array] });
 export default defineComponent({
     name: 'DynamicTags',
     props: dynamicTagsProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (props.onChange !== undefined) {
+                    warnOnce('dynamic-tags', '`on-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef } = useConfig(props);
         const { localeRef } = useLocale('DynamicTags');
         const formItem = useFormItem(props);
@@ -41,7 +39,7 @@ export default defineComponent({
         const showInputRef = ref(false);
         const inputForceFocusedRef = ref(true);
         const inputInstRef = ref(null);
-        const themeRef = useTheme('DynamicTags', 'DynamicTags', style, dynamicTagsLight, props, mergedClsPrefixRef);
+        const themeRef = useTheme('DynamicTags', '-dynamic-tags', style, dynamicTagsLight, props, mergedClsPrefixRef);
         const uncontrolledValueRef = ref(props.defaultValue);
         const controlledValueRef = toRef(props, 'value');
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
@@ -134,9 +132,9 @@ export default defineComponent({
                 const { mergedTheme, tagStyle, type, round, size, color, closable, mergedDisabled, showInput, inputValue, inputStyle, inputSize, inputForceFocused, triggerDisabled, handleInputKeyUp, handleInputBlur, handleAddClick, handleCloseClick, handleInputConfirm, $slots } = this;
                 return this.mergedValue
                     .map((tag, index) => (h(NTag, { key: index, theme: mergedTheme.peers.Tag, themeOverrides: mergedTheme.peerOverrides.Tag, style: tagStyle, type: type, round: round, size: size, color: color, closable: closable, disabled: mergedDisabled, onClose: () => handleCloseClick(index) }, { default: () => tag })))
-                    .concat(showInput ? ($slots.input ? ($slots.input({ submit: handleInputConfirm })) : (h(NInput, { ref: "inputInstRef", autosize: true, value: inputValue, onUpdateValue: (v) => {
+                    .concat(showInput ? ($slots.input ? ($slots.input({ submit: handleInputConfirm })) : (h(NInput, Object.assign({ placeholder: "", size: inputSize, style: inputStyle, autosize: true }, this.inputProps, { ref: "inputInstRef", value: inputValue, onUpdateValue: (v) => {
                         this.inputValue = v;
-                    }, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, style: inputStyle, size: inputSize, placeholder: "", onKeyup: handleInputKeyUp, onBlur: handleInputBlur, internalForceFocus: inputForceFocused }))) : $slots.trigger ? ($slots.trigger({
+                    }, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, onKeyup: handleInputKeyUp, onBlur: handleInputBlur, internalForceFocus: inputForceFocused })))) : $slots.trigger ? ($slots.trigger({
                     activate: handleAddClick,
                     disabled: triggerDisabled
                 })) : (h(NButton, { dashed: true, disabled: triggerDisabled, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, size: inputSize, onClick: handleAddClick }, {