naive-ui 2.24.4 → 2.25.0

package/lib/dialog/src/dialogProps.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dialogPropKeys = exports.dialogProps = void 0;
+const _utils_1 = require("../../_utils");
+const dialogProps = {
+    icon: Function,
+    type: {
+        type: String,
+        default: 'default'
+    },
+    title: [String, Function],
+    closable: {
+        type: Boolean,
+        default: true
+    },
+    negativeText: String,
+    positiveText: String,
+    content: [String, Function],
+    action: Function,
+    showIcon: {
+        type: Boolean,
+        default: true
+    },
+    loading: Boolean,
+    bordered: Boolean,
+    iconPlacement: String,
+    onPositiveClick: Function,
+    onNegativeClick: Function,
+    onClose: Function
+};
+exports.dialogProps = dialogProps;
+exports.dialogPropKeys = (0, _utils_1.keysOf)(dialogProps);

package/lib/dialog/src/use-dialog.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDialog = void 0;
 const vue_1 = require("vue");
-const DialogProvider_1 = require("./DialogProvider");
+const context_1 = require("./context");
 const _utils_1 = require("../../_utils");
 function useDialog() {
-    const dialog = (0, vue_1.inject)(DialogProvider_1.dialogApiInjectionKey, null);
+    const dialog = (0, vue_1.inject)(context_1.dialogApiInjectionKey, null);
     if (dialog === null) {
         (0, _utils_1.throwError)('use-dialog', 'No outer <n-dialog-provider /> founded.');
     }

package/lib/divider/src/Divider.js

@@ -16,7 +16,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: dividerProps,
     setup(props) {
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Divider', 'Divider', index_cssr_1.default, styles_1.dividerLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Divider', '-divider', index_cssr_1.default, styles_1.dividerLight, props, mergedClsPrefixRef);
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             cssVars: (0, vue_1.computed)(() => {

package/lib/drawer/index.d.ts

@@ -2,3 +2,4 @@ export { default as NDrawer } from './src/Drawer';
 export type { DrawerProps } from './src/Drawer';
 export { default as NDrawerContent } from './src/DrawerContent';
 export type { DrawerContentProps } from './src/DrawerContent';
+export type { Placement as DrawerPlacement } from './src/DrawerBodyWrapper';

package/lib/drawer/src/Drawer.js

@@ -69,7 +69,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         const { mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
         const isMountedRef = (0, vooks_1.useIsMounted)();
-        const themeRef = (0, _mixins_1.useTheme)('Drawer', 'Drawer', index_cssr_1.default, styles_1.drawerLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('Drawer', '-drawer', index_cssr_1.default, styles_1.drawerLight, props, mergedClsPrefixRef);
         const styleWidthRef = (0, vue_1.computed)(() => {
             const { placement } = props;
             if (placement === 'top' || placement === 'bottom')

package/lib/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/lib/dropdown/src/Dropdown.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dropdownInjectionKey = void 0;
 const vue_1 = require("vue");
 const treemate_1 = require("treemate");
 const vooks_1 = require("vooks");
@@ -14,7 +13,7 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const DropdownMenu_1 = __importDefault(require("./DropdownMenu"));
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-exports.dropdownInjectionKey = (0, _utils_1.createInjectionKey)('n-dropdown');
+const context_1 = require("./context");
 const dropdownBaseProps = {
     animated: {
         type: Boolean,
@@ -122,8 +121,8 @@ exports.default = (0, vue_1.defineComponent)({
             }
         }, keyboardEnabledRef);
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
-        const themeRef = (0, _mixins_1.useTheme)('Dropdown', 'Dropdown', index_cssr_1.default, styles_1.dropdownLight, props, mergedClsPrefixRef);
-        (0, vue_1.provide)(exports.dropdownInjectionKey, {
+        const themeRef = (0, _mixins_1.useTheme)('Dropdown', '-dropdown', index_cssr_1.default, styles_1.dropdownLight, props, mergedClsPrefixRef);
+        (0, vue_1.provide)(context_1.dropdownInjectionKey, {
             labelFieldRef: (0, vue_1.toRef)(props, 'labelField'),
             childrenFieldRef: (0, vue_1.toRef)(props, 'childrenField'),
             renderLabelRef: (0, vue_1.toRef)(props, 'renderLabel'),
@@ -296,6 +295,8 @@ exports.default = (0, vue_1.defineComponent)({
                 class: [
                     className,
                     `${mergedClsPrefix}-dropdown`,
+                    this.trigger === 'manual' &&
+                        `${mergedClsPrefix}-popover--manual-trigger`,
                     this.showArrow && `${mergedClsPrefix}-popover--show-arrow`
                 ],
                 clsPrefix: mergedClsPrefix,
@@ -317,8 +318,7 @@ exports.default = (0, vue_1.defineComponent)({
             onUpdateShow: this.doUpdateShow
         };
         return ((0, vue_1.h)(popover_1.NPopover, Object.assign({}, (0, _utils_1.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/lib/dropdown/src/DropdownGroup.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
+// eslint-disable-next-line import/no-cycle
 const DropdownOption_1 = __importDefault(require("./DropdownOption"));
 const DropdownDivider_1 = __importDefault(require("./DropdownDivider"));
 const DropdownGroupHeader_1 = __importDefault(require("./DropdownGroupHeader"));

package/lib/dropdown/src/DropdownGroupHeader.js

@@ -2,8 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const _utils_1 = require("../../_utils");
-const Dropdown_1 = require("./Dropdown");
-const DropdownMenu_1 = require("./DropdownMenu");
+const context_1 = require("./context");
 exports.default = (0, vue_1.defineComponent)({
     name: 'DropdownGroupHeader',
     props: {
@@ -19,9 +18,9 @@ exports.default = (0, vue_1.defineComponent)({
     setup() {
         const { showIconRef, hasSubmenuRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-         } = (0, vue_1.inject)(DropdownMenu_1.dropdownMenuInjectionKey);
+         } = (0, vue_1.inject)(context_1.dropdownMenuInjectionKey);
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const { renderLabelRef, labelFieldRef } = (0, vue_1.inject)(Dropdown_1.dropdownInjectionKey);
+        const { renderLabelRef, labelFieldRef } = (0, vue_1.inject)(context_1.dropdownInjectionKey);
         return {
             labelField: labelFieldRef,
             showIcon: showIconRef,

package/lib/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/lib/dropdown/src/DropdownMenu.js

@@ -3,17 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dropdownMenuInjectionKey = void 0;
 const vue_1 = require("vue");
 const PopoverBody_1 = require("../../popover/src/PopoverBody");
-const DropdownOption_1 = __importDefault(require("./DropdownOption"));
 const DropdownDivider_1 = __importDefault(require("./DropdownDivider"));
+// eslint-disable-next-line import/no-cycle
 const DropdownGroup_1 = __importDefault(require("./DropdownGroup"));
+// eslint-disable-next-line import/no-cycle
+const DropdownOption_1 = __importDefault(require("./DropdownOption"));
 const DropdownRenderOption_1 = __importDefault(require("./DropdownRenderOption"));
 const utils_1 = require("./utils");
-const Dropdown_1 = require("./Dropdown");
-const _utils_1 = require("../../_utils");
-exports.dropdownMenuInjectionKey = (0, _utils_1.createInjectionKey)('n-dropdown-menu');
+const context_1 = require("./context");
 exports.default = (0, vue_1.defineComponent)({
     name: 'DropdownMenu',
     props: {
@@ -34,8 +33,8 @@ exports.default = (0, vue_1.defineComponent)({
     },
     setup(props) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const { renderIconRef, childrenFieldRef } = (0, vue_1.inject)(Dropdown_1.dropdownInjectionKey);
-        (0, vue_1.provide)(exports.dropdownMenuInjectionKey, {
+        const { renderIconRef, childrenFieldRef } = (0, vue_1.inject)(context_1.dropdownInjectionKey);
+        (0, vue_1.provide)(context_1.dropdownMenuInjectionKey, {
             showIconRef: (0, vue_1.computed)(() => {
                 const renderIcon = renderIconRef.value;
                 return props.tmNodes.some((tmNode) => {

package/lib/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/lib/dropdown/src/DropdownOption.js

@@ -1,22 +1,6 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
@@ -25,11 +9,11 @@ const vooks_1 = require("vooks");
 const icons_1 = require("../../_internal/icons");
 const _utils_1 = require("../../_utils");
 const icon_1 = require("../../icon");
-const DropdownMenu_1 = __importStar(require("./DropdownMenu"));
-const Dropdown_1 = require("./Dropdown");
+// eslint-disable-next-line import/no-cycle
+const DropdownMenu_1 = __importDefault(require("./DropdownMenu"));
+const context_1 = require("./context");
 const utils_1 = require("./utils");
 const seemly_1 = require("seemly");
-const dropdownOptionInjectionKey = (0, _utils_1.createInjectionKey)('n-dropdown-option');
 exports.default = (0, vue_1.defineComponent)({
     name: 'DropdownOption',
     props: {
@@ -53,11 +37,11 @@ exports.default = (0, vue_1.defineComponent)({
     },
     setup(props) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const NDropdown = (0, vue_1.inject)(Dropdown_1.dropdownInjectionKey);
+        const NDropdown = (0, vue_1.inject)(context_1.dropdownInjectionKey);
         const { hoverKeyRef, keyboardKeyRef, lastToggledSubmenuKeyRef, pendingKeyPathRef, activeKeyPathRef, animatedRef, mergedShowRef, renderLabelRef, renderIconRef, labelFieldRef, childrenFieldRef } = NDropdown;
-        const NDropdownOption = (0, vue_1.inject)(dropdownOptionInjectionKey, null);
+        const NDropdownOption = (0, vue_1.inject)(context_1.dropdownOptionInjectionKey, null);
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const NDropdownMenu = (0, vue_1.inject)(DropdownMenu_1.dropdownMenuInjectionKey);
+        const NDropdownMenu = (0, vue_1.inject)(context_1.dropdownMenuInjectionKey);
         const rawNodeRef = (0, vue_1.computed)(() => props.tmNode.rawNode);
         const hasSubmenuRef = (0, vue_1.computed)(() => {
             const { value: childrenField } = childrenFieldRef;
@@ -95,7 +79,7 @@ exports.default = (0, vue_1.defineComponent)({
             return !!(NDropdownOption === null || NDropdownOption === void 0 ? void 0 : NDropdownOption.enteringSubmenuRef.value);
         });
         const enteringSubmenuRef = (0, vue_1.ref)(false);
-        (0, vue_1.provide)(dropdownOptionInjectionKey, {
+        (0, vue_1.provide)(context_1.dropdownOptionInjectionKey, {
             enteringSubmenuRef
         });
         // methods

package/lib/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/lib/dropdown/src/context.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dropdownOptionInjectionKey = exports.dropdownInjectionKey = exports.dropdownMenuInjectionKey = void 0;
+const _utils_1 = require("../../_utils");
+exports.dropdownMenuInjectionKey = (0, _utils_1.createInjectionKey)('n-dropdown-menu');
+exports.dropdownInjectionKey = (0, _utils_1.createInjectionKey)('n-dropdown');
+exports.dropdownOptionInjectionKey = (0, _utils_1.createInjectionKey)('n-dropdown-option');

package/lib/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/lib/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/lib/dynamic-input/src/DynamicInput.js

@@ -7,11 +7,11 @@ const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const seemly_1 = require("seemly");
 const icons_1 = require("../../_internal/icons");
+const use_form_item_1 = require("../../_mixins/use-form-item");
 const _internal_1 = require("../../_internal");
 const button_1 = require("../../button");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
-const use_form_item_1 = require("../../_mixins/use-form-item");
 const styles_1 = require("../styles");
 const InputPreset_1 = __importDefault(require("./InputPreset"));
 const PairPreset_1 = __importDefault(require("./PairPreset"));
@@ -42,35 +42,29 @@ const dynamicInputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.pro
     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: () => {
-            (0, _utils_1.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') {
-                (0, _utils_1.warn)('dynamic-input', '`on-input` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    onClear: Function, onInput: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'DynamicInput',
     props: dynamicInputProps,
     setup(props, { slots }) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.onClear !== undefined) {
+                    (0, _utils_1.warnOnce)('dynamic-input', '`on-clear` is deprecated, it is out of usage anymore.');
+                }
+                if (props.onInput !== undefined) {
+                    (0, _utils_1.warnOnce)('dynamic-input', '`on-input` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { NConfigProvider, mergedClsPrefixRef } = (0, _mixins_1.useConfig)();
         const NFormItem = (0, vue_1.inject)(use_form_item_1.formItemInjectionKey, null);
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
         const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
-        const themeRef = (0, _mixins_1.useTheme)('DynamicInput', 'DynamicInput', index_cssr_1.default, styles_1.dynamicInputLight, props, mergedClsPrefixRef);
+        const themeRef = (0, _mixins_1.useTheme)('DynamicInput', '-dynamic-input', index_cssr_1.default, styles_1.dynamicInputLight, props, mergedClsPrefixRef);
         const insertionDisabledRef = (0, vue_1.computed)(() => {
             const { value: mergedValue } = mergedValueRef;
             if (Array.isArray(mergedValue)) {
@@ -175,6 +169,32 @@ exports.default = (0, vue_1.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);
+        }
         (0, vue_1.provide)(interface_1.dynamicInputInjectionKey, {
             mergedThemeRef: themeRef,
             keyPlaceholderRef: (0, vue_1.toRef)(props, 'keyPlaceholder'),
@@ -194,6 +214,7 @@ exports.default = (0, vue_1.defineComponent)({
             ensureKey,
             handleValueChange,
             remove,
+            move,
             createItem,
             mergedTheme: themeRef,
             cssVars: (0, vue_1.computed)(() => {
@@ -205,28 +226,44 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, $slots, preset, itemStyle, NFormItem, ensureKey, handleValueChange, remove, createItem } = this;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dynamic-input`, style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? ((0, vue_1.h)(button_1.NButton, { block: true, ghost: true, dashed: true, size: buttonSize, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.handleCreateClick }, {
-            default: () => locale.create,
-            icon: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.AddIcon, null) }))
+        const { $slots, buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, itemStyle, preset, showSortButton, NFormItem, ensureKey, handleValueChange, remove, createItem, move } = this;
+        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dynamic-input`, style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? ((0, vue_1.h)(button_1.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: () => (0, _utils_1.resolveSlot)($slots['create-button-default'], () => [
+                locale.create
+            ]),
+            icon: () => (0, _utils_1.resolveSlot)($slots['create-button-icon'], () => [
+                (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.AddIcon, null) })
+            ])
         })) : (mergedValue.map((_, index) => ((0, vue_1.h)("div", { key: keyField ? _[keyField] : ensureKey(_, index), "data-key": keyField ? _[keyField] : ensureKey(_, index), class: `${mergedClsPrefix}-dynamic-input-item`, style: itemStyle },
-            $slots.default ? ($slots.default({
+            (0, _utils_1.resolveSlotWithProps)($slots.default, {
                 value: mergedValue[index],
                 index
-            })) : preset === 'input' ? ((0, vue_1.h)(InputPreset_1.default, { 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' ? ((0, vue_1.h)(PairPreset_1.default, { 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' ? ((0, vue_1.h)(InputPreset_1.default, { 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' ? ((0, vue_1.h)(PairPreset_1.default, { 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
+                ];
+            }),
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-dynamic-input-item__action` },
                 (0, vue_1.h)(button_1.NButtonGroup, { size: buttonSize }, {
                     default: () => [
-                        !this.removeDisabled ? ((0, vue_1.h)(button_1.NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, circle: true, onClick: () => remove(index) }, {
+                        (0, vue_1.h)(button_1.NButton, { disabled: this.removeDisabled, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, circle: true, onClick: () => remove(index) }, {
                             icon: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.RemoveIcon, null) }))
-                        })) : null,
+                        }),
                         (0, vue_1.h)(button_1.NButton, { disabled: this.insertionDisabled, circle: true, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: () => createItem(index) }, {
                             icon: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.AddIcon, null) }))
-                        })
+                        }),
+                        showSortButton ? ((0, vue_1.h)(button_1.NButton, { disabled: index === 0, circle: true, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: () => move('up', index) }, {
+                            icon: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                                default: () => (0, vue_1.h)(icons_1.ArrowUpIcon, null)
+                            }))
+                        })) : null,
+                        showSortButton ? ((0, vue_1.h)(button_1.NButton, { disabled: index === mergedValue.length - 1, circle: true, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: () => move('down', index) }, {
+                            icon: () => ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => (0, vue_1.h)(icons_1.ArrowDownIcon, null) }))
+                        })) : null
                     ]
                 }))))))));
     }