naive-ui 2.35.0 → 2.36.0

package/es/menu/src/Menu.js

@@ -1,6 +1,8 @@
 import { h, ref, toRef, computed, defineComponent, provide, inject, watchEffect } from 'vue';
 import { createTreeMate } from 'treemate';
 import { useCompitable, useMergedState } from 'vooks';
+import { VOverflow, VResizeObserver } from 'vueuc';
+import { createId } from 'seemly';
 import { layoutSiderInjectionKey } from '../../layout/src/interface';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { call } from '../../_utils';
@@ -8,6 +10,7 @@ import { isIgnoredNode, itemRenderer } from './utils';
 import { menuLight } from '../styles';
 import { useCheckDeprecated } from './useCheckDeprecated';
 import { menuInjectionKey } from './context';
+import { NSubmenu } from './Submenu';
 import style from './styles/index.cssr';
 export const menuProps = Object.assign(Object.assign({}, useTheme.props), { options: {
         type: Array,
@@ -51,12 +54,12 @@ export const menuProps = Object.assign(Object.assign({}, useTheme.props), { opti
     }, disabled: Boolean, show: {
         type: Boolean,
         default: true
-    }, inverted: Boolean, 'onUpdate:expandedKeys': [Function, Array], onUpdateExpandedKeys: [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:value': [Function, Array], expandIcon: Function, renderIcon: Function, renderLabel: Function, renderExtra: Function, dropdownProps: Object, accordion: Boolean, nodeProps: Function, 
-    // deprecated
-    items: Array, onOpenNamesChange: [Function, Array], onSelect: [Function, Array], onExpandedNamesChange: [Function, Array], expandedNames: Array, defaultExpandedNames: Array, dropdownPlacement: {
+    }, inverted: Boolean, 'onUpdate:expandedKeys': [Function, Array], onUpdateExpandedKeys: [Function, Array], onUpdateValue: [Function, Array], 'onUpdate:value': [Function, Array], expandIcon: Function, renderIcon: Function, renderLabel: Function, renderExtra: Function, dropdownProps: Object, accordion: Boolean, nodeProps: Function, dropdownPlacement: {
         type: String,
         default: 'bottom'
-    } });
+    }, responsive: Boolean, 
+    // deprecated
+    items: Array, onOpenNamesChange: [Function, Array], onSelect: [Function, Array], onExpandedNamesChange: [Function, Array], expandedNames: Array, defaultExpandedNames: Array });
 export default defineComponent({
     name: 'Menu',
     props: menuProps,
@@ -350,6 +353,76 @@ export default defineComponent({
         const themeClassHandle = inlineThemeDisabled
             ? useThemeClass('menu', computed(() => (props.inverted ? 'a' : 'b')), cssVarsRef, props)
             : undefined;
+        const ellipsisNodeId = createId();
+        const overflowRef = ref(null);
+        const counterRef = ref(null);
+        let isFirstResize = true;
+        const onResize = () => {
+            var _a;
+            if (isFirstResize) {
+                isFirstResize = false;
+            }
+            else {
+                (_a = overflowRef.value) === null || _a === void 0 ? void 0 : _a.sync({
+                    showAllItemsBeforeCalculate: true
+                });
+            }
+        };
+        function getCounter() {
+            return document.getElementById(ellipsisNodeId);
+        }
+        const ellipsisFromIndexRef = ref(-1);
+        function onUpdateCount(count) {
+            ellipsisFromIndexRef.value = props.options.length - count;
+        }
+        function onUpdateOverflow(overflow) {
+            if (!overflow) {
+                ellipsisFromIndexRef.value = -1;
+            }
+        }
+        const ellipsisOptionRef = computed(() => {
+            const ellipsisFromIndex = ellipsisFromIndexRef.value;
+            const option = {
+                children: ellipsisFromIndex === -1 ? [] : props.options.slice(ellipsisFromIndex)
+            };
+            return option;
+        });
+        const ellipsisTreeMateRef = computed(() => {
+            const { childrenField, disabledField, keyField } = props;
+            return createTreeMate([ellipsisOptionRef.value], {
+                getIgnored(node) {
+                    return isIgnoredNode(node);
+                },
+                getChildren(node) {
+                    return node[childrenField];
+                },
+                getDisabled(node) {
+                    return node[disabledField];
+                },
+                getKey(node) {
+                    var _a;
+                    return (_a = node[keyField]) !== null && _a !== void 0 ? _a : node.name;
+                }
+            });
+        });
+        const emptyTmNodeRef = computed(() => {
+            return createTreeMate([
+                {}
+            ]).treeNodes[0];
+        });
+        function renderCounter() {
+            var _a;
+            if (ellipsisFromIndexRef.value === -1) {
+                // Only a placeholder
+                return (h(NSubmenu, { root: true, level: 0, key: "__ellpisisGroupPlaceholder__", internalKey: "__ellpisisGroupPlaceholder__", title: "\u00B7\u00B7\u00B7", tmNode: emptyTmNodeRef.value, domId: ellipsisNodeId, isEllipsisPlaceholder: true }));
+            }
+            const tmNode = ellipsisTreeMateRef.value.treeNodes[0];
+            const activePath = activePathRef.value;
+            const childActive = !!((_a = tmNode.children) === null || _a === void 0 ? void 0 : _a.some((tmNode) => {
+                return activePath.includes(tmNode.key);
+            }));
+            return (h(NSubmenu, { level: 0, root: true, key: "__ellpisisGroup__", internalKey: "__ellpisisGroup__", title: "\u00B7\u00B7\u00B7", virtualChildActive: childActive, tmNode: tmNode, domId: ellipsisNodeId, rawNodes: tmNode.rawNode.children || [], tmNodes: tmNode.children || [], isEllipsisPlaceholder: true }));
+        }
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             controlledExpandedKeys: controlledExpandedKeysRef,
@@ -363,18 +436,39 @@ export default defineComponent({
             mergedCollapsed: mergedCollapsedRef,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            overflowRef,
+            counterRef,
+            updateCounter: () => { },
+            onResize,
+            onUpdateOverflow,
+            onUpdateCount,
+            renderCounter,
+            getCounter,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
-            showOption
+            showOption,
+            deriveResponsiveState: onResize
         };
     },
     render() {
         const { mergedClsPrefix, mode, themeClass, onRender } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
-        return (h("div", { role: mode === 'horizontal' ? 'menubar' : 'menu', class: [
+        const renderMenuItemNodes = () => this.tmNodes.map((tmNode) => itemRenderer(tmNode, this.$props));
+        const horizontal = mode === 'horizontal';
+        const finalResponsive = horizontal && this.responsive;
+        const renderMainNode = () => (h("div", { role: mode === 'horizontal' ? 'menubar' : 'menu', class: [
                 `${mergedClsPrefix}-menu`,
                 themeClass,
                 `${mergedClsPrefix}-menu--${mode}`,
+                finalResponsive && `${mergedClsPrefix}-menu--responsive`,
                 this.mergedCollapsed && `${mergedClsPrefix}-menu--collapsed`
-            ], style: this.cssVars }, this.tmNodes.map((tmNode) => itemRenderer(tmNode, this.$props))));
+            ], style: this.cssVars }, finalResponsive ? (h(VOverflow, { ref: "overflowRef", onUpdateOverflow: this.onUpdateOverflow, getCounter: this.getCounter, onUpdateCount: this.onUpdateCount, updateCounter: this.updateCounter, style: {
+                width: '100%',
+                display: 'flex',
+                overflow: 'hidden'
+            } }, {
+            default: renderMenuItemNodes,
+            counter: this.renderCounter
+        })) : (renderMenuItemNodes())));
+        return finalResponsive ? (h(VResizeObserver, { onResize: this.onResize }, { default: renderMainNode })) : (renderMainNode());
     }
 });

package/es/menu/src/MenuOptionContent.d.ts

@@ -32,6 +32,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<TmNode>;
         required: true;
     };
+    isEllipsisPlaceholder: BooleanConstructor;
 }, {
     menuProps: import("./Menu").MenuSetupProps;
     style: import("vue").ComputedRef<{
@@ -75,6 +76,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<TmNode>;
         required: true;
     };
+    isEllipsisPlaceholder: BooleanConstructor;
 }>>, {
     disabled: boolean;
     selected: boolean;
@@ -82,5 +84,6 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     childActive: boolean;
     collapsed: boolean;
+    isEllipsisPlaceholder: boolean;
 }, {}>;
 export default _default;

package/es/menu/src/MenuOptionContent.js

@@ -36,7 +36,8 @@ export default defineComponent({
         tmNode: {
             type: Object,
             required: true
-        }
+        },
+        isEllipsisPlaceholder: Boolean
     },
     setup(props) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -76,7 +77,11 @@ export default defineComponent({
             ], style: this.style },
             icon && (h("div", { class: `${clsPrefix}-menu-item-content__icon`, style: this.iconStyle, role: "none" }, [icon])),
             h("div", { class: `${clsPrefix}-menu-item-content-header`, role: "none" },
-                renderLabel ? renderLabel(tmNode.rawNode) : render(this.title),
+                this.isEllipsisPlaceholder
+                    ? this.title
+                    : renderLabel
+                        ? renderLabel(tmNode.rawNode)
+                        : render(this.title),
                 this.extra || renderExtra ? (h("span", { class: `${clsPrefix}-menu-item-content-header__extra` },
                     ' ',
                     renderExtra ? renderExtra(tmNode.rawNode) : render(this.extra))) : null),

package/es/menu/src/Submenu.d.ts

@@ -13,12 +13,15 @@ export declare const submenuProps: {
         readonly type: PropType<TmNode>;
         readonly required: true;
     };
-    readonly disabled: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly disabled: BooleanConstructor;
     readonly icon: PropType<() => VNodeChild>;
     readonly onClick: PropType<() => void>;
+    readonly domId: StringConstructor;
+    readonly virtualChildActive: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly isEllipsisPlaceholder: BooleanConstructor;
     readonly internalKey: {
         readonly type: PropType<import("treemate").Key>;
         readonly required: true;
@@ -45,12 +48,15 @@ export declare const NSubmenu: import("vue").DefineComponent<{
         readonly type: PropType<TmNode>;
         readonly required: true;
     };
-    readonly disabled: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly disabled: BooleanConstructor;
     readonly icon: PropType<() => VNodeChild>;
     readonly onClick: PropType<() => void>;
+    readonly domId: StringConstructor;
+    readonly virtualChildActive: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly isEllipsisPlaceholder: BooleanConstructor;
     readonly internalKey: {
         readonly type: PropType<import("treemate").Key>;
         readonly required: true;
@@ -415,12 +421,15 @@ export declare const NSubmenu: import("vue").DefineComponent<{
         readonly type: PropType<TmNode>;
         readonly required: true;
     };
-    readonly disabled: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly disabled: BooleanConstructor;
     readonly icon: PropType<() => VNodeChild>;
     readonly onClick: PropType<() => void>;
+    readonly domId: StringConstructor;
+    readonly virtualChildActive: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly isEllipsisPlaceholder: BooleanConstructor;
     readonly internalKey: {
         readonly type: PropType<import("treemate").Key>;
         readonly required: true;
@@ -438,5 +447,7 @@ export declare const NSubmenu: import("vue").DefineComponent<{
     readonly disabled: boolean;
     readonly isGroup: boolean;
     readonly tmNodes: TmNode[];
+    readonly isEllipsisPlaceholder: boolean;
     readonly rawNodes: MenuMixedOption[];
+    readonly virtualChildActive: boolean;
 }, {}>;

package/es/menu/src/Submenu.js

@@ -17,10 +17,10 @@ export const submenuProps = Object.assign(Object.assign({}, useMenuChildProps),
     }, 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 });
 export const NSubmenu = defineComponent({
     name: 'Submenu',
     props: submenuProps,
@@ -74,7 +74,8 @@ export const NSubmenu = defineComponent({
             mergedDisabled: mergedDisabledRef,
             mergedValue: NMenu.mergedValueRef,
             childActive: 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: computed(() => {
                 if (menuProps.mode === 'horizontal')
@@ -96,10 +97,10 @@ export const NSubmenu = 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 (h("div", Object.assign({}, attrs, { class: [`${mergedClsPrefix}-menu-item`, attrs === null || attrs === void 0 ? void 0 : attrs.class], role: "menuitem" }),
-                h(NMenuOptionContent, { 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 })));
+                h(NMenuOptionContent, { 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 (h(NFadeInExpandTransition, null, {
@@ -113,10 +114,10 @@ export const NSubmenu = 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: () => (h("div", { class: `${mergedClsPrefix}-submenu`, role: "menuitem", "aria-expanded": !this.collapsed },
+            default: () => (h("div", { class: `${mergedClsPrefix}-submenu`, role: "menuitem", "aria-expanded": !this.collapsed, id: this.domId },
                 createSubmenuItem(),
                 this.isHorizontal ? null : createSubmenuChildren()))
-        })) : (h("div", { class: `${mergedClsPrefix}-submenu`, role: "menuitem", "aria-expanded": !this.collapsed },
+        })) : (h("div", { class: `${mergedClsPrefix}-submenu`, role: "menuitem", "aria-expanded": !this.collapsed, id: this.domId },
             createSubmenuItem(),
             createSubmenuChildren()));
     }

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

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

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

@@ -43,14 +43,14 @@ export 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 = computed(() => {
         const { collapsedWidth, indent, rootIndent } = menuProps;

package/es/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/es/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/es/message/src/MessageProvider.js

@@ -10,7 +10,7 @@ export const messageProviderProps = Object.assign(Object.assign({}, useTheme.pro
     }, keepAliveOnHover: Boolean, max: Number, placement: {
         type: String,
         default: 'top'
-    }, closable: Boolean, containerStyle: [String, Object] });
+    }, closable: Boolean, containerClass: String, containerStyle: [String, Object] });
 export default defineComponent({
     name: 'MessageProvider',
     props: messageProviderProps,
@@ -82,7 +82,8 @@ export default defineComponent({
             this.messageList.length ? (h(Teleport, { to: (_c = this.to) !== null && _c !== void 0 ? _c : 'body' },
                 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 (h(MessageEnvironment, Object.assign({ ref: ((inst) => {
                             if (inst) {

package/es/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/es/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/es/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/es/notification/src/NotificationEnvironment.js

@@ -129,7 +129,7 @@ export const NotificationEnvironment = defineComponent({
     },
     render() {
         return (h(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 ? (h(Notification, Object.assign({}, keep(this.$props, notificationPropKeys), { onClose: this.handleClose, onMouseenter: this.duration && this.keepAliveOnHover