naive-ui 2.35.0 → 2.37.0

package/lib/menu/src/Submenu.js

@@ -23,10 +23,10 @@ exports.submenuProps = Object.assign(Object.assign({}, use_menu_child_props_1.us
     }, tmNode: {
         type: Object,
         required: true
-    }, disabled: {
+    }, disabled: Boolean, icon: Function, onClick: Function, domId: String, virtualChildActive: {
         type: Boolean,
-        default: false
-    }, icon: Function, onClick: Function });
+        default: undefined
+    }, isEllipsisPlaceholder: Boolean });
 exports.NSubmenu = (0, vue_1.defineComponent)({
     name: 'Submenu',
     props: exports.submenuProps,
@@ -80,7 +80,8 @@ exports.NSubmenu = (0, vue_1.defineComponent)({
             mergedDisabled: mergedDisabledRef,
             mergedValue: NMenu.mergedValueRef,
             childActive: (0, vooks_1.useMemo)(() => {
-                return NMenu.activePathRef.value.includes(props.internalKey);
+                var _a;
+                return ((_a = props.virtualChildActive) !== null && _a !== void 0 ? _a : NMenu.activePathRef.value.includes(props.internalKey));
             }),
             collapsed: (0, vue_1.computed)(() => {
                 if (menuProps.mode === 'horizontal')
@@ -102,10 +103,10 @@ exports.NSubmenu = (0, vue_1.defineComponent)({
         var _a;
         const { mergedClsPrefix, menuProps: { renderIcon, renderLabel } } = this;
         const createSubmenuItem = () => {
-            const { isHorizontal, paddingLeft, collapsed, mergedDisabled, maxIconSize, activeIconSize, title, childActive, icon, handleClick, menuProps: { nodeProps }, dropdownShow, iconMarginRight, tmNode, mergedClsPrefix } = this;
+            const { isHorizontal, paddingLeft, collapsed, mergedDisabled, maxIconSize, activeIconSize, title, childActive, icon, handleClick, menuProps: { nodeProps }, dropdownShow, iconMarginRight, tmNode, mergedClsPrefix, isEllipsisPlaceholder, extra } = this;
             const attrs = nodeProps === null || nodeProps === void 0 ? void 0 : nodeProps(tmNode.rawNode);
             return ((0, vue_1.h)("div", Object.assign({}, attrs, { class: [`${mergedClsPrefix}-menu-item`, attrs === null || attrs === void 0 ? void 0 : attrs.class], role: "menuitem" }),
-                (0, vue_1.h)(MenuOptionContent_1.default, { tmNode: tmNode, paddingLeft: paddingLeft, collapsed: collapsed, disabled: mergedDisabled, iconMarginRight: iconMarginRight, maxIconSize: maxIconSize, activeIconSize: activeIconSize, title: title, extra: this.extra, showArrow: !isHorizontal, childActive: childActive, clsPrefix: mergedClsPrefix, icon: icon, hover: dropdownShow, onClick: handleClick })));
+                (0, vue_1.h)(MenuOptionContent_1.default, { tmNode: tmNode, paddingLeft: paddingLeft, collapsed: collapsed, disabled: mergedDisabled, iconMarginRight: iconMarginRight, maxIconSize: maxIconSize, activeIconSize: activeIconSize, title: title, extra: extra, showArrow: !isHorizontal, childActive: childActive, clsPrefix: mergedClsPrefix, icon: icon, hover: dropdownShow, onClick: handleClick, isEllipsisPlaceholder: isEllipsisPlaceholder })));
         };
         const createSubmenuChildren = () => {
             return ((0, vue_1.h)(_internal_1.NFadeInExpandTransition, null, {
@@ -119,10 +120,10 @@ exports.NSubmenu = (0, vue_1.defineComponent)({
                 fontSizeLarge: '14px',
                 optionIconSizeLarge: '18px'
             }, value: this.mergedValue, disabled: !this.dropdownEnabled, placement: this.dropdownPlacement, keyField: this.menuProps.keyField, labelField: this.menuProps.labelField, childrenField: this.menuProps.childrenField, onUpdateShow: this.handlePopoverShowChange, options: this.rawNodes, onSelect: this.doSelect, inverted: this.inverted, renderIcon: renderIcon, renderLabel: renderLabel }), {
-            default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-submenu`, role: "menuitem", "aria-expanded": !this.collapsed },
+            default: () => ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-submenu`, role: "menuitem", "aria-expanded": !this.collapsed, id: this.domId },
                 createSubmenuItem(),
                 this.isHorizontal ? null : createSubmenuChildren()))
-        })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-submenu`, role: "menuitem", "aria-expanded": !this.collapsed },
+        })) : ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-submenu`, role: "menuitem", "aria-expanded": !this.collapsed, id: this.domId },
             createSubmenuItem(),
             createSubmenuChildren()));
     }

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

@@ -55,4 +55,5 @@ export type OnUpdateKeysImpl = (keys: string[] | number[] | Array<string | numbe
 export type MenuNodeProps = (option: MenuOption | MenuGroupOption) => HTMLAttributes & Record<string, string | number | undefined>;
 export interface MenuInst {
     showOption: (key?: Key) => void;
+    deriveResponsiveState: () => void;
 }

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

@@ -77,7 +77,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
  font-size: var(--n-font-size);
  padding-bottom: 6px;
  `, [(0, cssr_1.cM)('horizontal', `
- display: inline-flex;
+ max-width: 100%;
+ width: 100%;
+ display: flex;
+ overflow: hidden;
  padding-bottom: 0;
  `, [(0, cssr_1.cB)('submenu', 'margin: 0;'), (0, cssr_1.cB)('menu-item', 'margin: 0;'), (0, cssr_1.cB)('menu-item-content', `
  padding: 0 20px;
@@ -98,7 +101,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
  color: var(--n-item-text-color-active-hover-horizontal);
  `, [(0, cssr_1.c)('a', 'color: var(--n-item-text-color-active-hover-horizontal);'), (0, cssr_1.cE)('extra', 'color: var(--n-item-text-color-active-hover-horizontal);')])])]), (0, cssr_1.cM)('child-active', [hoverStyle(null, [(0, cssr_1.cE)('icon', 'color: var(--n-item-icon-color-child-active-hover-horizontal);'), (0, cssr_1.cB)('menu-item-content-header', `
  color: var(--n-item-text-color-child-active-hover-horizontal);
- `, [(0, cssr_1.c)('a', 'color: var(--n-item-text-color-child-active-hover-horizontal);'), (0, cssr_1.cE)('extra', 'color: var(--n-item-text-color-child-active-hover-horizontal);')])])]), hoverStyle('border-bottom: 2px solid var(--n-border-color-horizontal);', horizontalHoverStyleChildren)]), (0, cssr_1.cB)('menu-item-content-header', [(0, cssr_1.c)('a', 'color: var(--n-item-text-color-horizontal);')])])]), (0, cssr_1.cM)('collapsed', [(0, cssr_1.cB)('menu-item-content', [(0, cssr_1.cM)('selected', [(0, cssr_1.c)('&::before', `
+ `, [(0, cssr_1.c)('a', 'color: var(--n-item-text-color-child-active-hover-horizontal);'), (0, cssr_1.cE)('extra', 'color: var(--n-item-text-color-child-active-hover-horizontal);')])])]), hoverStyle('border-bottom: 2px solid var(--n-border-color-horizontal);', horizontalHoverStyleChildren)]), (0, cssr_1.cB)('menu-item-content-header', [(0, cssr_1.c)('a', 'color: var(--n-item-text-color-horizontal);')])])]), (0, cssr_1.cNotM)('responsive', [(0, cssr_1.cB)('menu-item-content-header', `
+ overflow: hidden;
+ text-overflow: ellipsis;
+ `)]), (0, cssr_1.cM)('collapsed', [(0, cssr_1.cB)('menu-item-content', [(0, cssr_1.cM)('selected', [(0, cssr_1.c)('&::before', `
  background-color: var(--n-item-color-active-collapsed) !important;
  `)]), (0, cssr_1.cB)('menu-item-content-header', 'opacity: 0;'), (0, cssr_1.cE)('arrow', 'opacity: 0;'), (0, cssr_1.cE)('icon', 'color: var(--n-item-icon-color-collapsed);')])]), (0, cssr_1.cB)('menu-item', `
  height: var(--n-item-height);
@@ -178,8 +184,6 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('menu', `
  opacity .3s var(--n-bezier);
  opacity: 1;
  white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
  color: var(--n-item-text-color);
  `, [(0, cssr_1.c)('a', `
  outline: none;

package/lib/menu/src/use-menu-child.js

@@ -46,14 +46,14 @@ function useMenuChild(props) {
             }
             return mergedRootIndent;
         }
-        if (NMenuOptionGroup) {
+        if (NMenuOptionGroup &&
+            typeof NMenuOptionGroup.paddingLeftRef.value === 'number') {
             return indent / 2 + NMenuOptionGroup.paddingLeftRef.value;
         }
-        if (NSubmenu) {
-            return ((isGroup ? indent / 2 : indent) +
-                NSubmenu.paddingLeftRef.value);
+        if (NSubmenu && typeof NSubmenu.paddingLeftRef.value === 'number') {
+            return (isGroup ? indent / 2 : indent) + NSubmenu.paddingLeftRef.value;
         }
-        return undefined;
+        return 0;
     });
     const iconMarginRightRef = (0, vue_1.computed)(() => {
         const { collapsedWidth, indent, rootIndent } = menuProps;

package/lib/message/src/Message.d.ts

@@ -52,7 +52,7 @@ declare const _default: import("vue").DefineComponent<{
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
-    placement: "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    placement: "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     render: PropType<MessageRenderMessage>;
     icon: PropType<() => VNodeChild>;

package/lib/message/src/MessageProvider.d.ts

@@ -36,10 +36,11 @@ export declare const messageProviderProps: {
     keepAliveOnHover: BooleanConstructor;
     max: NumberConstructor;
     placement: {
-        type: PropType<"bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        type: PropType<"top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
         default: string;
     };
     closable: BooleanConstructor;
+    containerClass: StringConstructor;
     containerStyle: PropType<string | CSSProperties>;
     theme: PropType<import("../../_mixins").Theme<"Message", {
         closeBorderRadius: string;
@@ -263,10 +264,11 @@ declare const _default: import("vue").DefineComponent<{
     keepAliveOnHover: BooleanConstructor;
     max: NumberConstructor;
     placement: {
-        type: PropType<"bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        type: PropType<"top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
         default: string;
     };
     closable: BooleanConstructor;
+    containerClass: StringConstructor;
     containerStyle: PropType<string | CSSProperties>;
     theme: PropType<import("../../_mixins").Theme<"Message", {
         closeBorderRadius: string;
@@ -503,10 +505,11 @@ declare const _default: import("vue").DefineComponent<{
     keepAliveOnHover: BooleanConstructor;
     max: NumberConstructor;
     placement: {
-        type: PropType<"bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
+        type: PropType<"top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">;
         default: string;
     };
     closable: BooleanConstructor;
+    containerClass: StringConstructor;
     containerStyle: PropType<string | CSSProperties>;
     theme: PropType<import("../../_mixins").Theme<"Message", {
         closeBorderRadius: string;
@@ -721,7 +724,7 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     duration: number;
     closable: boolean;
-    placement: "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    placement: "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
     keepAliveOnHover: boolean;
 }, {}>;
 export default _default;

package/lib/message/src/MessageProvider.js

@@ -16,7 +16,7 @@ exports.messageProviderProps = Object.assign(Object.assign({}, _mixins_1.useThem
     }, keepAliveOnHover: Boolean, max: Number, placement: {
         type: String,
         default: 'top'
-    }, closable: Boolean, containerStyle: [String, Object] });
+    }, closable: Boolean, containerClass: String, containerStyle: [String, Object] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'MessageProvider',
     props: exports.messageProviderProps,
@@ -88,7 +88,8 @@ exports.default = (0, vue_1.defineComponent)({
             this.messageList.length ? ((0, vue_1.h)(vue_1.Teleport, { to: (_c = this.to) !== null && _c !== void 0 ? _c : 'body' },
                 (0, vue_1.h)("div", { class: [
                         `${this.mergedClsPrefix}-message-container`,
-                        `${this.mergedClsPrefix}-message-container--${this.placement}`
+                        `${this.mergedClsPrefix}-message-container--${this.placement}`,
+                        this.containerClass
                     ], key: "message-container", style: this.containerStyle }, this.messageList.map((message) => {
                     return ((0, vue_1.h)(MessageEnvironment_1.default, Object.assign({ ref: ((inst) => {
                             if (inst) {

package/lib/modal/src/BodyWrapper.d.ts

@@ -47,9 +47,13 @@ declare const _default: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    contentClass: StringConstructor;
     contentStyle: PropType<string | import("vue").CSSProperties>;
+    headerClass: StringConstructor;
     headerStyle: PropType<string | import("vue").CSSProperties>;
+    headerExtraClass: StringConstructor;
     headerExtraStyle: PropType<string | import("vue").CSSProperties>;
+    footerClass: StringConstructor;
     footerStyle: PropType<string | import("vue").CSSProperties>;
     embedded: BooleanConstructor;
     segmented: {
@@ -70,7 +74,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         required: true;
     };
-    preset: PropType<"dialog" | "confirm" | "card">;
+    preset: PropType<"confirm" | "dialog" | "card">;
     displayDirective: {
         type: PropType<"show" | "if">;
         required: true;
@@ -700,7 +704,7 @@ declare const _default: import("vue").DefineComponent<{
     appear: import("vue").Ref<boolean | undefined>;
     isMounted: import("vue").Ref<boolean>;
     mergedClsPrefix: import("vue").Ref<string>;
-    bodyRef: import("vue").Ref<ComponentPublicInstance | HTMLElement | null>;
+    bodyRef: import("vue").Ref<HTMLElement | ComponentPublicInstance | null>;
     scrollbarRef: import("vue").Ref<{
         $el: HTMLElement;
         containerRef: HTMLElement | null;
@@ -771,9 +775,13 @@ declare const _default: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    contentClass: StringConstructor;
     contentStyle: PropType<string | import("vue").CSSProperties>;
+    headerClass: StringConstructor;
     headerStyle: PropType<string | import("vue").CSSProperties>;
+    headerExtraClass: StringConstructor;
     headerExtraStyle: PropType<string | import("vue").CSSProperties>;
+    footerClass: StringConstructor;
     footerStyle: PropType<string | import("vue").CSSProperties>;
     embedded: BooleanConstructor;
     segmented: {
@@ -794,7 +802,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         required: true;
     };
-    preset: PropType<"dialog" | "confirm" | "card">;
+    preset: PropType<"confirm" | "dialog" | "card">;
     displayDirective: {
         type: PropType<"show" | "if">;
         required: true;
@@ -812,8 +820,8 @@ declare const _default: import("vue").DefineComponent<{
     type: "default" | "error" | "info" | "success" | "warning";
     tag: keyof HTMLElementTagNameMap;
     size: "small" | "medium" | "large" | "huge";
-    autoFocus: boolean;
     loading: boolean;
+    autoFocus: boolean;
     bordered: boolean;
     showIcon: boolean;
     closable: boolean;

package/lib/modal/src/Modal.d.ts

@@ -43,9 +43,13 @@ export declare const modalProps: {
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    contentClass: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
+    headerClass: StringConstructor;
     headerStyle: PropType<string | CSSProperties>;
+    headerExtraClass: StringConstructor;
     headerExtraStyle: PropType<string | CSSProperties>;
+    footerClass: StringConstructor;
     footerStyle: PropType<string | CSSProperties>;
     embedded: BooleanConstructor;
     segmented: {
@@ -71,7 +75,7 @@ export declare const modalProps: {
         type: BooleanConstructor;
         default: boolean;
     };
-    preset: PropType<"dialog" | "confirm" | "card">;
+    preset: PropType<"confirm" | "dialog" | "card">;
     to: PropType<string | HTMLElement>;
     displayDirective: {
         type: PropType<"show" | "if">;
@@ -995,9 +999,13 @@ declare const _default: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    contentClass: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
+    headerClass: StringConstructor;
     headerStyle: PropType<string | CSSProperties>;
+    headerExtraClass: StringConstructor;
     headerExtraStyle: PropType<string | CSSProperties>;
+    footerClass: StringConstructor;
     footerStyle: PropType<string | CSSProperties>;
     embedded: BooleanConstructor;
     segmented: {
@@ -1023,7 +1031,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    preset: PropType<"dialog" | "confirm" | "card">;
+    preset: PropType<"confirm" | "dialog" | "card">;
     to: PropType<string | HTMLElement>;
     displayDirective: {
         type: PropType<"show" | "if">;
@@ -1967,9 +1975,13 @@ declare const _default: import("vue").DefineComponent<{
     loading: BooleanConstructor;
     bordered: BooleanConstructor;
     iconPlacement: PropType<import("../../dialog/src/interface").IconPlacement>;
+    contentClass: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
+    headerClass: StringConstructor;
     headerStyle: PropType<string | CSSProperties>;
+    headerExtraClass: StringConstructor;
     headerExtraStyle: PropType<string | CSSProperties>;
+    footerClass: StringConstructor;
     footerStyle: PropType<string | CSSProperties>;
     embedded: BooleanConstructor;
     segmented: {
@@ -1995,7 +2007,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    preset: PropType<"dialog" | "confirm" | "card">;
+    preset: PropType<"confirm" | "dialog" | "card">;
     to: PropType<string | HTMLElement>;
     displayDirective: {
         type: PropType<"show" | "if">;
@@ -2880,8 +2892,8 @@ declare const _default: import("vue").DefineComponent<{
     size: "small" | "medium" | "large" | "huge";
     show: boolean;
     transformOrigin: "center" | "mouse";
-    autoFocus: boolean;
     loading: boolean;
+    autoFocus: boolean;
     bordered: boolean;
     showIcon: boolean;
     closable: boolean;

package/lib/modal/src/presetProps.d.ts

@@ -25,9 +25,13 @@ declare const presetProps: {
     onPositiveClick: import("vue").PropType<(e: MouseEvent) => void>;
     onNegativeClick: import("vue").PropType<(e: MouseEvent) => void>;
     onClose: import("vue").PropType<() => void>;
+    contentClass: StringConstructor;
     contentStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    headerClass: StringConstructor;
     headerStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    headerExtraClass: StringConstructor;
     headerExtraStyle: import("vue").PropType<string | import("vue").CSSProperties>;
+    footerClass: StringConstructor;
     footerStyle: import("vue").PropType<string | import("vue").CSSProperties>;
     embedded: BooleanConstructor;
     segmented: {
@@ -45,5 +49,5 @@ declare const presetProps: {
         readonly default: "div";
     };
 };
-declare const presetPropsKeys: ("type" | "tag" | "content" | "size" | "icon" | "title" | "role" | "action" | "positiveText" | "negativeText" | "loading" | "bordered" | "showIcon" | "closable" | "contentStyle" | "onClose" | "headerStyle" | "footerStyle" | "iconPlacement" | "hoverable" | "embedded" | "headerExtraStyle" | "segmented" | "positiveButtonProps" | "negativeButtonProps" | "onPositiveClick" | "onNegativeClick")[];
+declare const presetPropsKeys: ("type" | "tag" | "content" | "size" | "icon" | "title" | "role" | "action" | "loading" | "positiveText" | "negativeText" | "bordered" | "showIcon" | "closable" | "contentClass" | "contentStyle" | "onClose" | "headerClass" | "headerStyle" | "footerClass" | "footerStyle" | "iconPlacement" | "hoverable" | "embedded" | "headerExtraClass" | "headerExtraStyle" | "segmented" | "positiveButtonProps" | "negativeButtonProps" | "onPositiveClick" | "onNegativeClick")[];
 export { presetProps, presetPropsKeys };

package/lib/notification/src/NotificationEnvironment.js

@@ -132,7 +132,7 @@ exports.NotificationEnvironment = (0, vue_1.defineComponent)({
     },
     render() {
         return ((0, vue_1.h)(vue_1.Transition, { name: "notification-transition", appear: true, 
-            // convert to any since Element is not compitable with HTMLElement
+            // convert to any since Element is not compatible with HTMLElement
             onBeforeEnter: this.handleBeforeEnter, onAfterEnter: this.handleAfterEnter, onBeforeLeave: this.handleBeforeLeave, onLeave: this.handleLeave, onAfterLeave: this.handleAfterLeave }, {
             default: () => {
                 return this.show ? ((0, vue_1.h)(Notification_1.Notification, Object.assign({}, (0, _utils_1.keep)(this.$props, Notification_1.notificationPropKeys), { onClose: this.handleClose, onMouseenter: this.duration && this.keepAliveOnHover

package/lib/notification/src/NotificationProvider.d.ts

@@ -37,6 +37,7 @@ interface NotificationRef {
     hide: () => void;
 }
 export declare const notificationProviderProps: {
+    containerClass: StringConstructor;
     containerStyle: PropType<string | CSSProperties>;
     to: PropType<string | HTMLElement>;
     scrollable: {
@@ -160,6 +161,7 @@ export declare const notificationProviderProps: {
 };
 export type NotificationProviderProps = ExtractPublicPropTypes<typeof notificationProviderProps>;
 declare const _default: import("vue").DefineComponent<{
+    containerClass: StringConstructor;
     containerStyle: PropType<string | CSSProperties>;
     to: PropType<string | HTMLElement>;
     scrollable: {
@@ -318,6 +320,7 @@ declare const _default: import("vue").DefineComponent<{
     open: (options: NotificationOptions) => NotificationReactive;
     destroyAll: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    containerClass: StringConstructor;
     containerStyle: PropType<string | CSSProperties>;
     to: PropType<string | HTMLElement>;
     scrollable: {

package/lib/notification/src/NotificationProvider.js

@@ -15,7 +15,7 @@ const NotificationEnvironment_1 = require("./NotificationEnvironment");
 const context_1 = require("./context");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.notificationApiInjectionKey = (0, _utils_1.createInjectionKey)('n-notification-api');
-exports.notificationProviderProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { containerStyle: [String, Object], to: [String, Object], scrollable: {
+exports.notificationProviderProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { containerClass: String, containerStyle: [String, Object], to: [String, Object], scrollable: {
         type: Boolean,
         default: true
     }, max: Number, placement: {
@@ -109,7 +109,7 @@ exports.default = (0, vue_1.defineComponent)({
         return ((0, vue_1.h)(vue_1.Fragment, null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
             _b.call(_a),
             this.notificationList.length ? ((0, vue_1.h)(vue_1.Teleport, { to: (_c = this.to) !== null && _c !== void 0 ? _c : 'body' },
-                (0, vue_1.h)(NotificationContainer_1.NotificationContainer, { style: this.containerStyle, scrollable: this.scrollable && placement !== 'top' && placement !== 'bottom', placement: placement }, {
+                (0, vue_1.h)(NotificationContainer_1.NotificationContainer, { class: this.containerClass, style: this.containerStyle, scrollable: this.scrollable && placement !== 'top' && placement !== 'bottom', placement: placement }, {
                     default: () => {
                         return this.notificationList.map((notification) => {
                             return ((0, vue_1.h)(NotificationEnvironment_1.NotificationEnvironment, Object.assign({ ref: ((inst) => {

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

@@ -146,20 +146,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  padding-left: var(--n-padding-left);
  padding-right: var(--n-padding-right);
  width: var(--n-width);
+ max-width: calc(100vw - 16px - 16px);
  border-radius: var(--n-border-radius);
  box-shadow: var(--n-box-shadow);
  box-sizing: border-box;
  opacity: 1;
- `, [(0, cssr_1.cE)('avatar', [(0, cssr_1.cB)('icon', {
-  color: 'var(--n-icon-color)'
-}), (0, cssr_1.cB)('base-icon', {
-  color: 'var(--n-icon-color)'
-})]), (0, cssr_1.cM)('show-avatar', [(0, cssr_1.cB)('notification-main', `
+ `, [(0, cssr_1.cE)('avatar', [(0, cssr_1.cB)('icon', `
+ color: var(--n-icon-color);
+ `), (0, cssr_1.cB)('base-icon', `
+ color: var(--n-icon-color);
+ `)]), (0, cssr_1.cM)('show-avatar', [(0, cssr_1.cB)('notification-main', `
  margin-left: 40px;
  width: calc(100% - 40px); 
- `)]), (0, cssr_1.cM)('closable', [(0, cssr_1.cB)('notification-main', [(0, cssr_1.c)('> *:first-child', {
-  paddingRight: '20px'
-})]), (0, cssr_1.cE)('close', `
+ `)]), (0, cssr_1.cM)('closable', [(0, cssr_1.cB)('notification-main', [(0, cssr_1.c)('> *:first-child', `
+ padding-right: 20px;
+ `)]), (0, cssr_1.cE)('close', `
  position: absolute;
  top: 0;
  right: 0;
@@ -218,9 +219,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('notification-container', `
  word-wrap: break-word;
  transition: color .3s var(--n-bezier-ease-out);
  color: var(--n-text-color);
- `, [(0, cssr_1.c)('&:first-child', {
-  margin: 0
-})])])])])]);
+ `, [(0, cssr_1.c)('&:first-child', 'margin: 0;')])])])])]);
 function placementTransformStyle(placement) {
   const direction = placement.split('-')[1];
   const transformXEnter = direction === 'left' ? 'calc(-100%)' : 'calc(100%)';

package/lib/pagination/src/Pagination.d.ts

@@ -50,6 +50,10 @@ export declare const paginationProps: {
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
+    readonly showQuickJumpDropdown: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void>>;
     readonly onUpdatePage: PropType<MaybeArray<(page: number) => void>>;
     readonly 'onUpdate:pageSize': PropType<MaybeArray<(pageSize: number) => void>>;
@@ -1098,6 +1102,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
+    readonly showQuickJumpDropdown: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void>>;
     readonly onUpdatePage: PropType<MaybeArray<(page: number) => void>>;
     readonly 'onUpdate:pageSize': PropType<MaybeArray<(pageSize: number) => void>>;
@@ -2868,6 +2876,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<string | boolean | HTMLElement>;
         default: undefined;
     };
+    readonly showQuickJumpDropdown: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
     readonly 'onUpdate:page': PropType<MaybeArray<(page: number) => void>>;
     readonly onUpdatePage: PropType<MaybeArray<(page: number) => void>>;
     readonly 'onUpdate:pageSize': PropType<MaybeArray<(pageSize: number) => void>>;
@@ -3881,5 +3893,6 @@ declare const _default: import("vue").DefineComponent<{
     readonly showQuickJumper: boolean;
     readonly pageSlot: number;
     readonly displayOrder: ("pages" | "size-picker" | "quick-jumper")[];
+    readonly showQuickJumpDropdown: boolean;
 }, {}>;
 export default _default;

package/lib/pagination/src/Pagination.js

@@ -38,7 +38,7 @@ exports.paginationProps = Object.assign(Object.assign({}, _mixins_1.useTheme.pro
     }, selectProps: Object, prev: Function, next: Function, goto: Function, prefix: Function, suffix: Function, label: Function, displayOrder: {
         type: Array,
         default: ['pages', 'size-picker', 'quick-jumper']
-    }, to: _utils_1.useAdjustedTo.propTo, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 
+    }, to: _utils_1.useAdjustedTo.propTo, showQuickJumpDropdown: { type: Boolean, default: true }, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 
     /** @deprecated */
     onPageSizeChange: [Function, Array], 
     /** @deprecated */
@@ -65,16 +65,7 @@ exports.default = (0, vue_1.defineComponent)({
         const { localeRef } = (0, _mixins_1.useLocale)('Pagination');
         const selfRef = (0, vue_1.ref)(null);
         const uncontrolledPageRef = (0, vue_1.ref)(props.defaultPage);
-        const getDefaultPageSize = () => {
-            const { defaultPageSize } = props;
-            if (defaultPageSize !== undefined)
-                return defaultPageSize;
-            const pageSizeOption = props.pageSizes[0];
-            if (typeof pageSizeOption === 'number')
-                return pageSizeOption;
-            return pageSizeOption.value || 10;
-        };
-        const uncontrolledPageSizeRef = (0, vue_1.ref)(getDefaultPageSize());
+        const uncontrolledPageSizeRef = (0, vue_1.ref)((0, utils_1.getDefaultPageSize)(props));
         const mergedPageRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'page'), uncontrolledPageRef);
         const mergedPageSizeRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'pageSize'), uncontrolledPageSizeRef);
         const mergedPageCountRef = (0, vue_1.computed)(() => {
@@ -120,7 +111,7 @@ exports.default = (0, vue_1.defineComponent)({
         const handleMenuSelect = (value) => {
             doUpdatePage(value);
         };
-        const pageItemsInfo = (0, vue_1.computed)(() => (0, utils_1.createPageItemsInfo)(mergedPageRef.value, mergedPageCountRef.value, props.pageSlot));
+        const pageItemsInfo = (0, vue_1.computed)(() => (0, utils_1.createPageItemsInfo)(mergedPageRef.value, mergedPageCountRef.value, props.pageSlot, props.showQuickJumpDropdown));
         (0, vue_1.watchEffect)(() => {
             if (!pageItemsInfo.value.hasFastBackward) {
                 fastBackwardActiveRef.value = false;
@@ -513,6 +504,9 @@ exports.default = (0, vue_1.defineComponent)({
                                             ? 'fast-backward'
                                             : 'fast-forward'
                                         : pageItem.type;
+                                    if (pageItem.type !== 'page' && !pageItem.options) {
+                                        return itemNode;
+                                    }
                                     return ((0, vue_1.h)(popselect_1.NPopselect, { to: this.to, key: key, disabled: disabled, trigger: "hover", virtualScroll: true, style: { width: '60px' }, theme: mergedTheme.peers.Popselect, themeOverrides: mergedTheme.peerOverrides.Popselect, builtinThemeOverrides: {
                                             peers: {
                                                 InternalSelectMenu: {
@@ -542,7 +536,9 @@ exports.default = (0, vue_1.defineComponent)({
                                                 this.showFastBackwardMenu = false;
                                                 this.showFastForwardMenu = false;
                                             }
-                                        }, options: pageItem.type !== 'page' ? pageItem.options : [], onUpdateValue: this.handleMenuSelect, scrollable: true, showCheckmark: false }, { default: () => itemNode }));
+                                        }, options: pageItem.type !== 'page' && pageItem.options
+                                            ? pageItem.options
+                                            : [], onUpdateValue: this.handleMenuSelect, scrollable: true, showCheckmark: false }, { default: () => itemNode }));
                                 }
                             })),
                             (0, vue_1.h)("div", { class: [

package/lib/pagination/src/utils.d.ts

@@ -1,4 +1,6 @@
-declare function createPageItemsInfo(currentPage: number, pageCount: number, pageSlot: number): {
+import type { PaginationProps } from './Pagination';
+export declare const getDefaultPageSize: (paginationProps: PaginationProps | false) => number;
+declare function createPageItemsInfo(currentPage: number, pageCount: number, pageSlot: number, showQuickJumpDropdown: boolean): {
     hasFastBackward: boolean;
     hasFastForward: boolean;
     fastBackwardTo: number;
@@ -12,7 +14,7 @@ export type PageItem = {
     options: Array<{
         label: string;
         value: number;
-    }>;
+    }> | null;
 } | {
     type: 'page';
     label: number;

package/lib/pagination/src/utils.js

@@ -1,7 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createPageItemsInfo = void 0;
-function createPageItemsInfo(currentPage, pageCount, pageSlot) {
+exports.createPageItemsInfo = exports.getDefaultPageSize = void 0;
+const getDefaultPageSize = (paginationProps) => {
+    var _a;
+    if (!paginationProps)
+        return 10;
+    const { defaultPageSize } = paginationProps;
+    if (defaultPageSize !== undefined)
+        return defaultPageSize;
+    const pageSizeOption = (_a = paginationProps.pageSizes) === null || _a === void 0 ? void 0 : _a[0];
+    if (typeof pageSizeOption === 'number')
+        return pageSizeOption;
+    return (pageSizeOption === null || pageSizeOption === void 0 ? void 0 : pageSizeOption.value) || 10;
+};
+exports.getDefaultPageSize = getDefaultPageSize;
+function createPageItemsInfo(currentPage, pageCount, pageSlot, showQuickJumpDropdown) {
     let hasFastBackward = false;
     let hasFastForward = false;
     let fastBackwardTo = 1;
@@ -77,7 +90,9 @@ function createPageItemsInfo(currentPage, pageCount, pageSlot) {
             type: 'fast-backward',
             active: false,
             label: undefined,
-            options: createRange(firstPage + 1, middleStart - 1)
+            options: showQuickJumpDropdown
+                ? createRange(firstPage + 1, middleStart - 1)
+                : null
         });
     }
     else if (lastPage >= firstPage + 1) {
@@ -105,7 +120,9 @@ function createPageItemsInfo(currentPage, pageCount, pageSlot) {
             type: 'fast-forward',
             active: false,
             label: undefined,
-            options: createRange(middleEnd + 1, lastPage - 1)
+            options: showQuickJumpDropdown
+                ? createRange(middleEnd + 1, lastPage - 1)
+                : null
         });
     }
     else if (middleEnd === lastPage - 2 &&

package/lib/pagination/styles/rtl.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.paginationRtl = void 0;
 const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
 const rtl_1 = require("../../input/styles/rtl");
+const styles_1 = require("../../select/styles");
 exports.paginationRtl = {
     name: 'Pagination',
     style: rtl_cssr_1.default,
-    peers: [rtl_1.inputRtl]
+    peers: [rtl_1.inputRtl, styles_1.selectRtl]
 };