naive-ui 2.35.0 → 2.37.0

package/lib/dialog/src/styles/rtl.cssr.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../_utils/cssr");
+exports.default = (0, cssr_1.cB)('dialog', [(0, cssr_1.cM)('rtl', `
+ --n-icon-margin: var(--n-icon-margin-top) var(--n-icon-margin-left) var(--n-icon-margin-bottom) var(--n-icon-margin-right);
+ direction: rtl;
+ `, [(0, cssr_1.cE)('close', `
+ right: unset;
+ left: 0;
+ margin-left: 1.8rem;
+ `), (0, cssr_1.cE)('action', `
+ direction: rtl;
+ display: flex;
+ `, [(0, cssr_1.c)('> *:not(:first-child)', `
+ margin-right: var(--n-action-space);
+ `), (0, cssr_1.c)('> *', `
+ margin-right: 0;
+ `)]), (0, cssr_1.cM)('icon-left', [(0, cssr_1.cM)('closable', [(0, cssr_1.cE)('title', `
+ padding-right: unset;
+ `)])])])]);

package/lib/dialog/styles/index.d.ts

@@ -1,3 +1,4 @@
 export { default as dialogDark } from './dark';
 export { default as dialogLight } from './light';
+export { dialogRtl } from './rtl';
 export type { DialogTheme, DialogThemeVars } from './light';

package/lib/dialog/styles/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dialogLight = exports.dialogDark = void 0;
+exports.dialogRtl = exports.dialogLight = exports.dialogDark = void 0;
 var dark_1 = require("./dark");
 Object.defineProperty(exports, "dialogDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
 var light_1 = require("./light");
 Object.defineProperty(exports, "dialogLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "dialogRtl", { enumerable: true, get: function () { return rtl_1.dialogRtl; } });

package/lib/dialog/styles/rtl.d.ts

@@ -0,0 +1,2 @@
+import type { RtlItem } from '../../config-provider/src/internal-interface';
+export declare const dialogRtl: RtlItem;

package/lib/dialog/styles/rtl.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dialogRtl = void 0;
+const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
+exports.dialogRtl = {
+    name: 'Dialog',
+    style: rtl_cssr_1.default
+};

package/lib/drawer/src/Drawer.d.ts

@@ -30,6 +30,7 @@ export declare const drawerProps: {
     readonly zIndex: NumberConstructor;
     readonly onMaskClick: PropType<(e: MouseEvent) => void>;
     readonly scrollbarProps: PropType<ScrollbarProps>;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly trapFocus: {
         readonly type: BooleanConstructor;
@@ -189,6 +190,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly zIndex: NumberConstructor;
     readonly onMaskClick: PropType<(e: MouseEvent) => void>;
     readonly scrollbarProps: PropType<ScrollbarProps>;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly trapFocus: {
         readonly type: BooleanConstructor;
@@ -322,6 +324,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").Ref<string>;
     namespace: import("vue").ComputedRef<string | undefined>;
     mergedBodyStyle: import("vue").ComputedRef<(string | CSSProperties)[]>;
+    handleOutsideClick: (e: MouseEvent) => void;
     handleMaskClick: (e: MouseEvent) => void;
     handleEsc: (e: KeyboardEvent) => void;
     mergedTheme: import("vue").ComputedRef<{
@@ -348,7 +351,6 @@ declare const _default: import("vue").DefineComponent<{
             errorColorPressed: string;
             errorColorSuppl: string;
             textColorBase: string;
-            /** @deprecated */
             textColor1: string;
             textColor2: string;
             textColor3: string;
@@ -525,6 +527,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly zIndex: NumberConstructor;
     readonly onMaskClick: PropType<(e: MouseEvent) => void>;
     readonly scrollbarProps: PropType<ScrollbarProps>;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly trapFocus: {
         readonly type: BooleanConstructor;

package/lib/drawer/src/Drawer.js

@@ -29,7 +29,7 @@ exports.drawerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, nativeScrollbar: {
         type: Boolean,
         default: true
-    }, zIndex: Number, onMaskClick: Function, scrollbarProps: Object, contentStyle: [Object, String], trapFocus: {
+    }, zIndex: Number, onMaskClick: Function, scrollbarProps: Object, contentClass: String, contentStyle: [Object, String], trapFocus: {
         type: Boolean,
         default: true
     }, onEsc: Function, autoFocus: {
@@ -126,6 +126,9 @@ exports.default = (0, vue_1.defineComponent)({
             if (onMaskClick)
                 onMaskClick(e);
         }
+        function handleOutsideClick(e) {
+            handleMaskClick(e);
+        }
         const isComposingRef = (0, _utils_1.useIsComposing)();
         function handleEsc(e) {
             var _a;
@@ -188,6 +191,7 @@ exports.default = (0, vue_1.defineComponent)({
             mergedClsPrefix: mergedClsPrefixRef,
             namespace: namespaceRef,
             mergedBodyStyle: mergedBodyStyleRef,
+            handleOutsideClick,
             handleMaskClick,
             handleEsc,
             mergedTheme: themeRef,
@@ -215,7 +219,7 @@ exports.default = (0, vue_1.defineComponent)({
                                     `${mergedClsPrefix}-drawer-mask--invisible`
                             ], onClick: this.handleMaskClick })) : null
                     })) : null,
-                    (0, vue_1.h)(DrawerBodyWrapper_1.default, Object.assign({}, this.$attrs, { class: [this.drawerClass, this.$attrs.class], style: [this.mergedBodyStyle, this.$attrs.style], blockScroll: this.blockScroll, contentStyle: this.contentStyle, placement: this.placement, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar, onAfterEnter: this.onAfterEnter, onAfterLeave: this.onAfterLeave, trapFocus: this.trapFocus, autoFocus: this.autoFocus, resizable: this.resizable, maxHeight: this.maxHeight, minHeight: this.minHeight, maxWidth: this.maxWidth, minWidth: this.minWidth, showMask: this.showMask, onEsc: this.handleEsc, onClickoutside: this.handleMaskClick }), this.$slots)), [[vdirs_1.zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
+                    (0, vue_1.h)(DrawerBodyWrapper_1.default, Object.assign({}, this.$attrs, { class: [this.drawerClass, this.$attrs.class], style: [this.mergedBodyStyle, this.$attrs.style], blockScroll: this.blockScroll, contentStyle: this.contentStyle, contentClass: this.contentClass, placement: this.placement, scrollbarProps: this.scrollbarProps, show: this.show, displayDirective: this.displayDirective, nativeScrollbar: this.nativeScrollbar, onAfterEnter: this.onAfterEnter, onAfterLeave: this.onAfterLeave, trapFocus: this.trapFocus, autoFocus: this.autoFocus, resizable: this.resizable, maxHeight: this.maxHeight, minHeight: this.minHeight, maxWidth: this.maxWidth, minWidth: this.minWidth, showMask: this.showMask, onEsc: this.handleEsc, onClickoutside: this.handleOutsideClick }), this.$slots)), [[vdirs_1.zindexable, { zIndex: this.zIndex, enabled: this.show }]]);
             }
         }));
     }

package/lib/drawer/src/DrawerBodyWrapper.d.ts

@@ -15,6 +15,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Placement>;
         required: true;
     };
+    contentClass: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
     nativeScrollbar: {
         type: BooleanConstructor;
@@ -213,6 +214,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Placement>;
         required: true;
     };
+    contentClass: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
     nativeScrollbar: {
         type: BooleanConstructor;

package/lib/drawer/src/DrawerBodyWrapper.js

@@ -26,6 +26,7 @@ exports.default = (0, vue_1.defineComponent)({
             type: String,
             required: true
         },
+        contentClass: String,
         contentStyle: [Object, String],
         nativeScrollbar: {
             type: Boolean,
@@ -242,7 +243,13 @@ exports.default = (0, vue_1.defineComponent)({
                                         this.isHoverOnResizeTrigger) &&
                                         `${mergedClsPrefix}-drawer__resize-trigger--hover`
                                 ], onMouseenter: this.handleMouseenterResizeTrigger, onMouseleave: this.handleMouseleaveResizeTrigger, onMousedown: this.handleMousedownResizeTrigger })) : null,
-                            this.nativeScrollbar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-content-wrapper`, style: this.contentStyle, role: "none" }, $slots)) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { contentStyle: this.contentStyle, contentClass: `${mergedClsPrefix}-drawer-content-wrapper`, theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar }), $slots))
+                            this.nativeScrollbar ? ((0, vue_1.h)("div", { class: [
+                                    `${mergedClsPrefix}-drawer-content-wrapper`,
+                                    this.contentClass
+                                ], style: this.contentStyle, role: "none" }, $slots)) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({}, this.scrollbarProps, { contentStyle: this.contentStyle, contentClass: [
+                                    `${mergedClsPrefix}-drawer-content-wrapper`,
+                                    this.contentClass
+                                ], theme: this.mergedTheme.peers.Scrollbar, themeOverrides: this.mergedTheme.peerOverrides.Scrollbar }), $slots))
                         ]), this.bodyDirectives)
                     }))
                 })), [

package/lib/drawer/src/DrawerContent.d.ts

@@ -2,12 +2,14 @@ import { type CSSProperties, type PropType } from 'vue';
 import type { ScrollbarProps } from '../../_internal';
 import type { ExtractPublicPropTypes } from '../../_utils';
 export declare const drawerContentProps: {
-    title: {
-        type: StringConstructor;
-    };
+    title: StringConstructor;
+    headerClass: StringConstructor;
     headerStyle: PropType<string | CSSProperties>;
+    footerClass: StringConstructor;
     footerStyle: PropType<string | CSSProperties>;
+    bodyClass: StringConstructor;
     bodyStyle: PropType<string | CSSProperties>;
+    bodyContentClass: StringConstructor;
     bodyContentStyle: PropType<string | CSSProperties>;
     nativeScrollbar: {
         type: BooleanConstructor;
@@ -18,12 +20,14 @@ export declare const drawerContentProps: {
 };
 export type DrawerContentProps = ExtractPublicPropTypes<typeof drawerContentProps>;
 declare const _default: import("vue").DefineComponent<{
-    title: {
-        type: StringConstructor;
-    };
+    title: StringConstructor;
+    headerClass: StringConstructor;
     headerStyle: PropType<string | CSSProperties>;
+    footerClass: StringConstructor;
     footerStyle: PropType<string | CSSProperties>;
+    bodyClass: StringConstructor;
     bodyStyle: PropType<string | CSSProperties>;
+    bodyContentClass: StringConstructor;
     bodyContentStyle: PropType<string | CSSProperties>;
     nativeScrollbar: {
         type: BooleanConstructor;
@@ -178,12 +182,14 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     mergedClsPrefix: import("vue").Ref<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    title: {
-        type: StringConstructor;
-    };
+    title: StringConstructor;
+    headerClass: StringConstructor;
     headerStyle: PropType<string | CSSProperties>;
+    footerClass: StringConstructor;
     footerStyle: PropType<string | CSSProperties>;
+    bodyClass: StringConstructor;
     bodyStyle: PropType<string | CSSProperties>;
+    bodyContentClass: StringConstructor;
     bodyContentStyle: PropType<string | CSSProperties>;
     nativeScrollbar: {
         type: BooleanConstructor;

package/lib/drawer/src/DrawerContent.js

@@ -6,12 +6,14 @@ const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
 const interface_1 = require("./interface");
 exports.drawerContentProps = {
-    title: {
-        type: String
-    },
+    title: String,
+    headerClass: String,
     headerStyle: [Object, String],
+    footerClass: String,
     footerStyle: [Object, String],
+    bodyClass: String,
     bodyStyle: [Object, String],
+    bodyContentClass: String,
     bodyContentStyle: [Object, String],
     nativeScrollbar: { type: Boolean, default: true },
     scrollbarProps: Object,
@@ -36,17 +38,23 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { title, mergedClsPrefix, nativeScrollbar, mergedTheme, bodyStyle, bodyContentStyle, headerStyle, footerStyle, scrollbarProps, closable, $slots } = this;
+        const { title, mergedClsPrefix, nativeScrollbar, mergedTheme, bodyClass, bodyStyle, bodyContentClass, bodyContentStyle, headerClass, headerStyle, footerClass, footerStyle, scrollbarProps, closable, $slots } = this;
         return ((0, vue_1.h)("div", { role: "none", class: [
                 `${mergedClsPrefix}-drawer-content`,
                 nativeScrollbar &&
                     `${mergedClsPrefix}-drawer-content--native-scrollbar`
             ] },
-            $slots.header || title || closable ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-header`, style: headerStyle, role: "none" },
+            $slots.header || title || closable ? ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-drawer-header`, headerClass], style: headerStyle, role: "none" },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-header__main`, role: "heading", "aria-level": "1" }, $slots.header !== undefined ? $slots.header() : title),
                 closable && ((0, vue_1.h)(_internal_1.NBaseClose, { onClick: this.handleCloseClick, clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-drawer-header__close`, absolute: true })))) : null,
-            nativeScrollbar ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-body`, style: bodyStyle, role: "none" },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-body-content-wrapper`, style: bodyContentStyle, role: "none" }, $slots))) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({ themeOverrides: mergedTheme.peerOverrides.Scrollbar, theme: mergedTheme.peers.Scrollbar }, scrollbarProps, { class: `${mergedClsPrefix}-drawer-body`, contentClass: `${mergedClsPrefix}-drawer-body-content-wrapper`, contentStyle: bodyContentStyle }), $slots)),
-            $slots.footer ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-drawer-footer`, style: footerStyle, role: "none" }, $slots.footer())) : null));
+            nativeScrollbar ? ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-drawer-body`, bodyClass], style: bodyStyle, role: "none" },
+                (0, vue_1.h)("div", { class: [
+                        `${mergedClsPrefix}-drawer-body-content-wrapper`,
+                        bodyContentClass
+                    ], style: bodyContentStyle, role: "none" }, $slots))) : ((0, vue_1.h)(_internal_1.NScrollbar, Object.assign({ themeOverrides: mergedTheme.peerOverrides.Scrollbar, theme: mergedTheme.peers.Scrollbar }, scrollbarProps, { class: `${mergedClsPrefix}-drawer-body`, contentClass: [
+                    `${mergedClsPrefix}-drawer-body-content-wrapper`,
+                    bodyContentClass
+                ], contentStyle: bodyContentStyle }), $slots)),
+            $slots.footer ? ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-drawer-footer`, footerClass], style: footerStyle, role: "none" }, $slots.footer())) : null));
     }
 });

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

@@ -300,7 +300,10 @@ export declare const dropdownProps: {
         type: PropType<"show" | "if">;
         default: string;
     };
+    readonly arrowClass: StringConstructor;
     readonly arrowStyle: PropType<string | import("vue").CSSProperties>;
+    readonly arrowWrapperClass: StringConstructor;
+    readonly arrowWrapperStyle: PropType<string | import("vue").CSSProperties>;
     readonly flip: {
         type: BooleanConstructor;
         default: boolean;
@@ -320,8 +323,11 @@ export declare const dropdownProps: {
         default: undefined;
     };
     readonly scrollable: BooleanConstructor;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | import("vue").CSSProperties>;
+    readonly headerClass: StringConstructor;
     readonly headerStyle: PropType<string | import("vue").CSSProperties>;
+    readonly footerClass: StringConstructor;
     readonly footerStyle: PropType<string | import("vue").CSSProperties>;
     readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
@@ -626,7 +632,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"show" | "if">;
         default: string;
     };
+    readonly arrowClass: StringConstructor;
     readonly arrowStyle: PropType<string | import("vue").CSSProperties>;
+    readonly arrowWrapperClass: StringConstructor;
+    readonly arrowWrapperStyle: PropType<string | import("vue").CSSProperties>;
     readonly flip: {
         type: BooleanConstructor;
         default: boolean;
@@ -646,8 +655,11 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     readonly scrollable: BooleanConstructor;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | import("vue").CSSProperties>;
+    readonly headerClass: StringConstructor;
     readonly headerStyle: PropType<string | import("vue").CSSProperties>;
+    readonly footerClass: StringConstructor;
     readonly footerStyle: PropType<string | import("vue").CSSProperties>;
     readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
@@ -1144,7 +1156,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"show" | "if">;
         default: string;
     };
+    readonly arrowClass: StringConstructor;
     readonly arrowStyle: PropType<string | import("vue").CSSProperties>;
+    readonly arrowWrapperClass: StringConstructor;
+    readonly arrowWrapperStyle: PropType<string | import("vue").CSSProperties>;
     readonly flip: {
         type: BooleanConstructor;
         default: boolean;
@@ -1164,8 +1179,11 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     readonly scrollable: BooleanConstructor;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | import("vue").CSSProperties>;
+    readonly headerClass: StringConstructor;
     readonly headerStyle: PropType<string | import("vue").CSSProperties>;
+    readonly footerClass: StringConstructor;
     readonly footerStyle: PropType<string | import("vue").CSSProperties>;
     readonly onClickoutside: PropType<(e: MouseEvent) => void>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;

package/lib/dropdown/src/Dropdown.js

@@ -318,7 +318,7 @@ exports.default = (0, vue_1.defineComponent)({
                 class: [className, `${mergedClsPrefix}-dropdown`, this.themeClass],
                 clsPrefix: mergedClsPrefix,
                 tmNodes: this.tmNodes,
-                style: [style, this.cssVars],
+                style: [...style, this.cssVars],
                 showArrow: this.showArrow,
                 arrowStyle: this.arrowStyle,
                 scrollable: this.scrollable,

package/lib/dropdown/src/DropdownMenu.js

@@ -98,7 +98,10 @@ exports.default = (0, vue_1.defineComponent)({
             this.showArrow
                 ? (0, PopoverBody_1.renderArrow)({
                     clsPrefix,
-                    arrowStyle: this.arrowStyle
+                    arrowStyle: this.arrowStyle,
+                    arrowClass: undefined,
+                    arrowWrapperClass: undefined,
+                    arrowWrapperStyle: undefined
                 })
                 : null));
     }

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

@@ -1,5 +1,6 @@
 import { type PropType, type Ref, type HTMLAttributes } from 'vue';
 import { type FollowerPlacement } from 'vueuc';
+import type { MenuGroupOption } from '../../menu/src/interface';
 import type { TreeNode } from 'treemate';
 export interface NDropdownOptionInjection {
     enteringSubmenuRef: Ref<boolean>;
@@ -10,7 +11,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     tmNode: {
-        type: PropType<TreeNode<import("../..").MenuOption, import("../..").MenuGroupOption, import("../../menu/src/interface").MenuIgnoredOption>>;
+        type: PropType<TreeNode<import("../../menu/src/interface").MenuOption, MenuGroupOption, import("../../menu/src/interface").MenuIgnoredOption>>;
         required: true;
     };
     parentKey: {
@@ -33,14 +34,14 @@ declare const _default: import("vue").DefineComponent<{
     popoverBody: Ref<HTMLElement | null>;
     animated: Ref<boolean>;
     mergedShowSubmenu: import("vue").ComputedRef<boolean>;
-    rawNode: import("vue").ComputedRef<import("../..").MenuOption | import("../..").MenuGroupOption | import("../../menu/src/interface").MenuIgnoredOption>;
+    rawNode: import("vue").ComputedRef<import("../../menu/src/interface").MenuOption | MenuGroupOption | import("../../menu/src/interface").MenuIgnoredOption>;
     hasSubmenu: import("vue").ComputedRef<boolean>;
     pending: import("vue").ComputedRef<boolean>;
     childActive: import("vue").ComputedRef<boolean>;
     active: import("vue").ComputedRef<boolean>;
     mergedDisabled: import("vue").ComputedRef<boolean>;
     renderOption: Ref<import("./interface").RenderOptionImpl | undefined>;
-    nodeProps: Ref<import("../..").MenuNodeProps | undefined>;
+    nodeProps: Ref<import("../../menu/src/interface").MenuNodeProps | undefined>;
     handleClick: () => void;
     handleMouseMove: () => void;
     handleMouseEnter: () => void;
@@ -53,7 +54,7 @@ declare const _default: import("vue").DefineComponent<{
         required: true;
     };
     tmNode: {
-        type: PropType<TreeNode<import("../..").MenuOption, import("../..").MenuGroupOption, import("../../menu/src/interface").MenuIgnoredOption>>;
+        type: PropType<TreeNode<import("../../menu/src/interface").MenuOption, MenuGroupOption, import("../../menu/src/interface").MenuIgnoredOption>>;
         required: true;
     };
     parentKey: {

package/lib/dropdown/src/DropdownOption.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const vue_1 = require("vue");
 const vueuc_1 = require("vueuc");
 const vooks_1 = require("vooks");
+const seemly_1 = require("seemly");
 const icons_1 = require("../../_internal/icons");
 const _utils_1 = require("../../_utils");
 const icon_1 = require("../../icon");
@@ -14,7 +15,6 @@ const DropdownMenu_1 = __importDefault(require("./DropdownMenu"));
 const context_1 = require("./context");
 const interface_1 = require("../../popover/src/interface");
 const utils_1 = require("./utils");
-const seemly_1 = require("seemly");
 exports.default = (0, vue_1.defineComponent)({
     name: 'DropdownOption',
     props: {
@@ -186,9 +186,7 @@ exports.default = (0, vue_1.defineComponent)({
         const { animated, rawNode, mergedShowSubmenu, clsPrefix, siblingHasIcon, siblingHasSubmenu, renderLabel, renderIcon, renderOption, nodeProps, props, scrollable } = this;
         let submenuVNode = null;
         if (mergedShowSubmenu) {
-            const submenuNodeProps = (_a = this.menuProps) === null || _a === void 0 ? void 0 : _a.call(this, rawNode, 
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            rawNode.children);
+            const submenuNodeProps = (_a = this.menuProps) === null || _a === void 0 ? void 0 : _a.call(this, rawNode, rawNode.children);
             submenuVNode = ((0, vue_1.h)(DropdownMenu_1.default, Object.assign({}, submenuNodeProps, { clsPrefix: clsPrefix, scrollable: this.scrollable, tmNodes: this.tmNode.children, parentKey: this.tmNode.key })));
         }
         const builtinProps = {

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

@@ -18,6 +18,7 @@ export declare const dynamicInputProps: {
         readonly default: "input";
     };
     readonly keyField: StringConstructor;
+    readonly itemClass: StringConstructor;
     readonly itemStyle: PropType<string | CSSProperties>;
     readonly keyPlaceholder: {
         readonly type: StringConstructor;
@@ -868,6 +869,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "input";
     };
     readonly keyField: StringConstructor;
+    readonly itemClass: StringConstructor;
     readonly itemStyle: PropType<string | CSSProperties>;
     readonly keyPlaceholder: {
         readonly type: StringConstructor;
@@ -2130,6 +2132,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "input";
     };
     readonly keyField: StringConstructor;
+    readonly itemClass: StringConstructor;
     readonly itemStyle: PropType<string | CSSProperties>;
     readonly keyPlaceholder: {
         readonly type: StringConstructor;

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

@@ -32,7 +32,7 @@ exports.dynamicInputProps = Object.assign(Object.assign({}, _mixins_1.useTheme.p
     }, preset: {
         type: String,
         default: 'input'
-    }, keyField: String, itemStyle: [String, Object], 
+    }, keyField: String, itemClass: String, itemStyle: [String, Object], 
     // for preset pair
     keyPlaceholder: {
         type: String,
@@ -239,7 +239,7 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { $slots, buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, itemStyle, preset, showSortButton, NFormItem, ensureKey, handleValueChange, remove, createItem, move, onRender, disabled } = this;
+        const { $slots, itemClass, buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, itemStyle, preset, showSortButton, NFormItem, ensureKey, handleValueChange, remove, createItem, move, onRender, disabled } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-dynamic-input`,
@@ -252,7 +252,7 @@ exports.default = (0, vue_1.defineComponent)({
             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 },
+        })) : (mergedValue.map((_, index) => ((0, vue_1.h)("div", { key: keyField ? _[keyField] : ensureKey(_, index), "data-key": keyField ? _[keyField] : ensureKey(_, index), class: [`${mergedClsPrefix}-dynamic-input-item`, itemClass], style: itemStyle },
             (0, _utils_1.resolveSlotWithProps)($slots.default, {
                 value: mergedValue[index],
                 index

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

@@ -16,9 +16,11 @@ export declare const dynamicTagsProps: {
         default: () => never[];
     };
     value: PropType<(string | DynamicTagsOption)[]>;
+    inputClass: StringConstructor;
     inputStyle: PropType<string | CSSProperties>;
     inputProps: PropType<InputProps>;
     max: PropType<number>;
+    tagClass: StringConstructor;
     tagStyle: PropType<string | CSSProperties>;
     renderTag: PropType<((tag: string, index: number) => VNodeChild) | ((tag: DynamicTagsOption, index: number) => VNodeChild)>;
     onCreate: {
@@ -393,7 +395,6 @@ export declare const dynamicTagsProps: {
             closeSizeLarge: string;
             padding: string;
             closeMargin: string;
-            closeMarginRtl: string;
         }, any>;
         Space: import("../../_mixins").Theme<"Space", {
             gapSmall: string;
@@ -756,7 +757,6 @@ export declare const dynamicTagsProps: {
             closeSizeLarge: string;
             padding: string;
             closeMargin: string;
-            closeMarginRtl: string;
         }, any>;
         Space: import("../../_mixins").Theme<"Space", {
             gapSmall: string;
@@ -1119,7 +1119,6 @@ export declare const dynamicTagsProps: {
             closeSizeLarge: string;
             padding: string;
             closeMargin: string;
-            closeMarginRtl: string;
         }, any>;
         Space: import("../../_mixins").Theme<"Space", {
             gapSmall: string;
@@ -1143,9 +1142,11 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
     value: PropType<(string | DynamicTagsOption)[]>;
+    inputClass: StringConstructor;
     inputStyle: PropType<string | CSSProperties>;
     inputProps: PropType<InputProps>;
     max: PropType<number>;
+    tagClass: StringConstructor;
     tagStyle: PropType<string | CSSProperties>;
     renderTag: PropType<((tag: string, index: number) => VNodeChild) | ((tag: DynamicTagsOption, index: number) => VNodeChild)>;
     onCreate: {
@@ -1520,7 +1521,6 @@ declare const _default: import("vue").DefineComponent<{
             closeSizeLarge: string;
             padding: string;
             closeMargin: string;
-            closeMarginRtl: string;
         }, any>;
         Space: import("../../_mixins").Theme<"Space", {
             gapSmall: string;
@@ -1883,7 +1883,6 @@ declare const _default: import("vue").DefineComponent<{
             closeSizeLarge: string;
             padding: string;
             closeMargin: string;
-            closeMarginRtl: string;
         }, any>;
         Space: import("../../_mixins").Theme<"Space", {
             gapSmall: string;
@@ -2246,7 +2245,6 @@ declare const _default: import("vue").DefineComponent<{
             closeSizeLarge: string;
             padding: string;
             closeMargin: string;
-            closeMarginRtl: string;
         }, any>;
         Space: import("../../_mixins").Theme<"Space", {
             gapSmall: string;
@@ -2262,6 +2260,7 @@ declare const _default: import("vue").DefineComponent<{
         inputElRef: HTMLInputElement | null;
         isCompositing: boolean;
         blur: () => void;
+        clear: () => void;
         focus: () => void;
         select: () => void;
         activate: () => void;
@@ -2279,7 +2278,7 @@ declare const _default: import("vue").DefineComponent<{
     })[]>;
     mergedDisabled: import("vue").ComputedRef<boolean>;
     triggerDisabled: import("vue").ComputedRef<boolean>;
-    handleInputKeyUp: (e: KeyboardEvent) => void;
+    handleInputKeyDown: (e: KeyboardEvent) => void;
     handleAddClick: () => void;
     handleInputBlur: () => void;
     handleCloseClick: (index: number) => void;
@@ -2746,7 +2745,6 @@ declare const _default: import("vue").DefineComponent<{
                 closeSizeLarge: string;
                 padding: string;
                 closeMargin: string;
-                closeMarginRtl: string;
             }, any>;
             Space: import("../../_mixins").Theme<"Space", {
                 gapSmall: string;
@@ -2796,9 +2794,11 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
     value: PropType<(string | DynamicTagsOption)[]>;
+    inputClass: StringConstructor;
     inputStyle: PropType<string | CSSProperties>;
     inputProps: PropType<InputProps>;
     max: PropType<number>;
+    tagClass: StringConstructor;
     tagStyle: PropType<string | CSSProperties>;
     renderTag: PropType<((tag: string, index: number) => VNodeChild) | ((tag: DynamicTagsOption, index: number) => VNodeChild)>;
     onCreate: {
@@ -3173,7 +3173,6 @@ declare const _default: import("vue").DefineComponent<{
             closeSizeLarge: string;
             padding: string;
             closeMargin: string;
-            closeMarginRtl: string;
         }, any>;
         Space: import("../../_mixins").Theme<"Space", {
             gapSmall: string;
@@ -3536,7 +3535,6 @@ declare const _default: import("vue").DefineComponent<{
             closeSizeLarge: string;
             padding: string;
             closeMargin: string;
-            closeMarginRtl: string;
         }, any>;
         Space: import("../../_mixins").Theme<"Space", {
             gapSmall: string;
@@ -3899,7 +3897,6 @@ declare const _default: import("vue").DefineComponent<{
             closeSizeLarge: string;
             padding: string;
             closeMargin: string;
-            closeMarginRtl: string;
         }, any>;
         Space: import("../../_mixins").Theme<"Space", {
             gapSmall: string;
@@ -3909,8 +3906,8 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }>>, {
     type: "default" | "error" | "primary" | "info" | "success" | "warning";
-    round: boolean;
     size: "small" | "medium" | "large";
+    round: boolean;
     disabled: boolean | undefined;
     closable: boolean;
     defaultValue: (string | DynamicTagsOption)[];