naive-ui 2.32.0 → 2.32.2

package/es/list/src/List.js

@@ -1,27 +1,29 @@
-import { computed, defineComponent, h, provide } from 'vue';
-import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { computed, defineComponent, h, provide, toRef } from 'vue';
+import { useConfig, useTheme, useThemeClass, useRtl } from '../../_mixins';
 import { createInjectionKey } from '../../_utils';
 import { listLight } from '../styles';
 import style from './styles/index.cssr';
 export const listProps = Object.assign(Object.assign({}, useTheme.props), { size: {
         type: String,
         default: 'medium'
-    }, bordered: {
+    }, bordered: Boolean, clickable: Boolean, hoverable: Boolean, showDivider: {
         type: Boolean,
-        default: false
+        default: true
     } });
 export const listInjectionKey = createInjectionKey('n-list');
 export default defineComponent({
     name: 'List',
     props: listProps,
     setup(props) {
-        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = useConfig(props);
+        const rtlEnabledRef = useRtl('List', mergedRtlRef, mergedClsPrefixRef);
         const themeRef = useTheme('List', '-list', style, listLight, props, mergedClsPrefixRef);
         provide(listInjectionKey, {
+            showDividerRef: toRef(props, 'showDivider'),
             mergedClsPrefixRef
         });
         const cssVarsRef = computed(() => {
-            const { common: { cubicBezierEaseInOut }, self: { fontSize, textColor, color, colorModal, colorPopover, borderColor, borderColorModal, borderColorPopover, borderRadius } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { fontSize, textColor, color, colorModal, colorPopover, borderColor, borderColorModal, borderColorPopover, borderRadius, colorHover, colorHoverModal, colorHoverPopover } } = themeRef.value;
             return {
                 '--n-font-size': fontSize,
                 '--n-bezier': cubicBezierEaseInOut,
@@ -32,7 +34,10 @@ export default defineComponent({
                 '--n-border-color-modal': borderColorModal,
                 '--n-border-color-popover': borderColorPopover,
                 '--n-color-modal': colorModal,
-                '--n-color-popover': colorPopover
+                '--n-color-popover': colorPopover,
+                '--n-color-hover': colorHover,
+                '--n-color-hover-modal': colorHoverModal,
+                '--n-color-hover-popover': colorHoverPopover
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -40,6 +45,7 @@ export default defineComponent({
             : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
+            rtlEnabled: rtlEnabledRef,
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
@@ -51,7 +57,11 @@ export default defineComponent({
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("ul", { class: [
                 `${mergedClsPrefix}-list`,
+                this.rtlEnabled && `${mergedClsPrefix}-list--rtl`,
                 this.bordered && `${mergedClsPrefix}-list--bordered`,
+                this.showDivider && `${mergedClsPrefix}-list--show-divider`,
+                this.hoverable && `${mergedClsPrefix}-list--hoverable`,
+                this.clickable && `${mergedClsPrefix}-list--clickable`,
                 this.themeClass
             ], style: this.cssVars },
             $slots.header ? (h("div", { class: `${mergedClsPrefix}-list__header` }, $slots.header())) : null, (_a = $slots.default) === null || _a === void 0 ? void 0 :

package/es/list/src/ListItem.d.ts

@@ -1,4 +1,5 @@
 declare const _default: import("vue").DefineComponent<{}, {
+    showDivider: import("vue").Ref<boolean>;
     mergedClsPrefix: import("vue").Ref<string>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, import("vue").EmitsOptions, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
 export default _default;

package/es/list/src/ListItem.js

@@ -9,6 +9,7 @@ export default defineComponent({
             throwError('list-item', '`n-list-item` must be placed in `n-list`.');
         }
         return {
+            showDivider: listInjection.showDividerRef,
             mergedClsPrefix: listInjection.mergedClsPrefixRef
         };
     },
@@ -17,6 +18,7 @@ export default defineComponent({
         return (h("li", { class: `${mergedClsPrefix}-list-item` },
             $slots.prefix ? (h("div", { class: `${mergedClsPrefix}-list-item__prefix` }, $slots.prefix())) : null,
             $slots.default ? (h("div", { class: `${mergedClsPrefix}-list-item__main` }, $slots)) : null,
-            $slots.suffix ? (h("div", { class: `${mergedClsPrefix}-list-item__suffix` }, $slots.suffix())) : null));
+            $slots.suffix ? (h("div", { class: `${mergedClsPrefix}-list-item__suffix` }, $slots.suffix())) : null,
+            this.showDivider && (h("div", { class: `${mergedClsPrefix}-list-item__divider` }))));
     }
 });

package/es/list/src/styles/index.cssr.js

@@ -3,16 +3,21 @@ import { cB, c, cE, cM, insideModal, insidePopover } from '../../../_utils/cssr'
 // --n-bezier
 // --n-text-color
 // --n-color
+// --n-color-hover
 // --n-border-radius
 // --n-border-color
 // --n-border-color-modal
 // --n-border-color-popover
 // --n-color-modal
 // --n-color-popover
+// --n-color-hover-modal
+// --n-color-hover-popover
 
 export default c([cB('list', `
  --n-merged-border-color: var(--n-border-color);
  --n-merged-color: var(--n-color);
+ --n-merged-color-hover: var(--n-color-hover);
+ margin: 0;
  font-size: var(--n-font-size);
  transition:
  background-color .3s var(--n-bezier),
@@ -22,30 +27,39 @@ export default c([cB('list', `
  list-style-type: none;
  color: var(--n-text-color);
  background-color: var(--n-merged-color);
- `, [cM('bordered', `
- border-radius: var(--n-border-radius);
+ `, [cM('show-divider', [cB('list-item', [c('&:not(:last-child)', [cE('divider', `
+ background-color: var(--n-merged-border-color);
+ `)])])]), cM('clickable', [cB('list-item', `
+ cursor: pointer;
+ `)]), cM('bordered', `
  border: 1px solid var(--n-merged-border-color);
- `, [cB('list-item', `
+ border-radius: var(--n-border-radius);
+ `), cM('hoverable', [cB('list-item', `
+ border-radius: var(--n-border-radius);
+ `, [c('&:hover', `
+ background-color: var(--n-merged-color-hover);
+ `, [cE('divider', `
+ background-color: transparent;
+ `)])])]), cM('bordered, hoverable', [cB('list-item', `
  padding: 12px 20px;
- `, [c('&:not(:last-child)', `
- border-bottom: 1px solid var(--n-merged-border-color);
- `)]), cE('header, footer', `
+ `), cE('header, footer', `
  padding: 12px 20px;
- `, [c('&:not(:last-child)', `
- border-bottom: 1px solid var(--n-merged-border-color);
- `)])]), cE('header, footer', `
+ `)]), cE('header, footer', `
  padding: 12px 0;
  box-sizing: border-box;
  transition: border-color .3s var(--n-bezier);
  `, [c('&:not(:last-child)', `
  border-bottom: 1px solid var(--n-merged-border-color);
  `)]), cB('list-item', `
+ position: relative;
  padding: 12px 0; 
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
- transition: border-color .3s var(--n-bezier);
+ transition:
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  `, [cE('prefix', `
  margin-right: 20px;
  flex: 0;
@@ -54,12 +68,21 @@ export default c([cB('list', `
  flex: 0;
  `), cE('main', `
  flex: 1;
- `), c('&:not(:last-child)', `
- border-bottom: 1px solid var(--n-merged-border-color);
+ `), cE('divider', `
+ height: 1px;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: transparent;
+ transition: background-color .3s var(--n-bezier);
+ pointer-events: none;
  `)])]), insideModal(cB('list', `
+ --n-merged-color-hover: var(--n-color-hover-modal);
  --n-merged-color: var(--n-color-modal);
  --n-merged-border-color: var(--n-border-color-modal);
  `)), insidePopover(cB('list', `
+ --n-merged-color-hover: var(--n-color-hover-popover);
  --n-merged-color: var(--n-color-popover);
  --n-merged-border-color: var(--n-border-color-popover);
  `))]);

package/es/list/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/es/list/src/styles/rtl.cssr.js

@@ -0,0 +1,11 @@
+import { cB, cE, cM } from '../../../_utils/cssr';
+export default cB('list', [cM('rtl', `
+ direction: rtl;
+ text-align: right;
+ `, [cB('list-item', [cE('prefix', `
+ margin-right: 0;
+ margin-left: 20px;
+ `), cE('suffix', `
+ margin-right: 20px;
+ margin-left: 0;
+ `)])])]);

package/es/list/styles/index.d.ts

@@ -1,3 +1,4 @@
 export { default as listDark } from './dark';
 export { default as listLight } from './light';
+export { listRtl } from './rtl';
 export type { ListTheme, ListThemeVars } from './light';

package/es/list/styles/index.js

@@ -1,2 +1,3 @@
 export { default as listDark } from './dark';
 export { default as listLight } from './light';
+export { listRtl } from './rtl';

package/es/list/styles/light.d.ts

@@ -3,8 +3,11 @@ import { Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
     textColor: string;
     color: string;
+    colorHover: string;
     colorModal: string;
+    colorHoverModal: string;
     colorPopover: string;
+    colorHoverPopover: string;
     borderColor: string;
     borderColorModal: string;
     borderColorPopover: string;

package/es/list/styles/light.js

@@ -1,12 +1,15 @@
 import { composite } from 'seemly';
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { textColor2, cardColor, modalColor, popoverColor, dividerColor, borderRadius, fontSize } = vars;
+    const { textColor2, cardColor, modalColor, popoverColor, dividerColor, borderRadius, fontSize, hoverColor } = vars;
     return {
         textColor: textColor2,
         color: cardColor,
+        colorHover: hoverColor,
         colorModal: modalColor,
+        colorHoverModal: composite(modalColor, hoverColor),
         colorPopover: popoverColor,
+        colorHoverPopover: composite(popoverColor, hoverColor),
         borderColor: dividerColor,
         borderColorModal: composite(modalColor, dividerColor),
         borderColorPopover: composite(popoverColor, dividerColor),

package/es/list/styles/rtl.d.ts

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

package/es/list/styles/rtl.js

@@ -0,0 +1,5 @@
+import rtlStyle from '../src/styles/rtl.cssr';
+export const listRtl = {
+    name: 'List',
+    style: rtlStyle
+};

package/es/locales/common/viVN.js

@@ -24,7 +24,7 @@ const viVN = {
         dayFormat: 'eeeeee',
         yearTypeFormat: 'yyyy',
         monthTypeFormat: 'MM-yyyy',
-        dateFormat: 'đ-MM-yyyy',
+        dateFormat: 'dd-MM-yyyy',
         dateTimeFormat: 'HH:mm:ss dd-MM-yyyy',
         quarterFormat: 'qqq-yyyy',
         clear: 'Xóa',
@@ -57,13 +57,12 @@ const viVN = {
         sourceTitle: 'Nguồn',
         targetTitle: 'Đích'
     },
-    // TODO: translation
     Transfer: {
-        selectAll: 'Select all',
-        unselectAll: 'Unselect all',
-        clearAll: 'Clear',
-        total: (num) => `Total ${num} items`,
-        selected: (num) => `${num} items selected`
+        selectAll: 'Chọn tất cả',
+        unselectAll: 'Bỏ chọn tất cả',
+        clearAll: 'Xoá tất cả',
+        total: (num) => `Tổng cộng ${num} mục`,
+        selected: (num) => `${num} mục được chọn`
     },
     Empty: {
         description: 'Không có dữ liệu'
@@ -114,8 +113,7 @@ const viVN = {
         tipZoomOut: 'Thu nhỏ',
         tipZoomIn: 'Phóng to',
         tipClose: 'Đóng (Esc)',
-        // TODO: translation
-        tipOriginalSize: 'Xem kích thớc gốc'
+        tipOriginalSize: 'Xem kích thước gốc'
     }
 };
 export default viVN;

package/es/mention/src/Mention.d.ts

@@ -119,6 +119,7 @@ export declare const mentionProps: {
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -236,6 +237,7 @@ export declare const mentionProps: {
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -353,6 +355,7 @@ export declare const mentionProps: {
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -527,6 +530,7 @@ declare const _default: import("vue").DefineComponent<{
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -644,6 +648,7 @@ declare const _default: import("vue").DefineComponent<{
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -761,6 +766,7 @@ declare const _default: import("vue").DefineComponent<{
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -991,6 +997,7 @@ declare const _default: import("vue").DefineComponent<{
                 }, any>;
             }>;
             Input: import("../../_mixins").Theme<"Input", {
+                countTextColorDisabled: string;
                 countTextColor: string;
                 heightTiny: string;
                 heightSmall: string;
@@ -1232,6 +1239,7 @@ declare const _default: import("vue").DefineComponent<{
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1349,6 +1357,7 @@ declare const _default: import("vue").DefineComponent<{
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;
@@ -1466,6 +1475,7 @@ declare const _default: import("vue").DefineComponent<{
             }, any>;
         }>;
         Input: import("../../_mixins").Theme<"Input", {
+            countTextColorDisabled: string;
             countTextColor: string;
             heightTiny: string;
             heightSmall: string;

package/es/mention/styles/light.d.ts

@@ -59,6 +59,7 @@ declare const mentionLight: import("../../_mixins").Theme<"Mention", {
         }, any>;
     }>;
     Input: import("../../_mixins").Theme<"Input", {
+        countTextColorDisabled: string;
         countTextColor: string;
         heightTiny: string;
         heightSmall: string;

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

@@ -59,6 +59,10 @@ export declare const menuProps: {
         readonly default: undefined;
     };
     readonly disabled: BooleanConstructor;
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly defalut: true;
+    };
     readonly inverted: BooleanConstructor;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<OnUpdateKeys>>;
@@ -661,6 +665,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly disabled: BooleanConstructor;
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly defalut: true;
+    };
     readonly inverted: BooleanConstructor;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<OnUpdateKeys>>;
@@ -1594,6 +1602,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: undefined;
     };
     readonly disabled: BooleanConstructor;
+    readonly show: {
+        readonly type: BooleanConstructor;
+        readonly defalut: true;
+    };
     readonly inverted: BooleanConstructor;
     readonly 'onUpdate:expandedKeys': PropType<MaybeArray<OnUpdateKeys>>;
     readonly onUpdateExpandedKeys: PropType<MaybeArray<OnUpdateKeys>>;
@@ -2140,6 +2152,7 @@ declare const _default: import("vue").DefineComponent<{
     }>>>;
 }>>, {
     readonly mode: "horizontal" | "vertical";
+    readonly show: boolean;
     readonly disabled: boolean;
     readonly options: MenuMixedOption[];
     readonly iconSize: number;

package/es/menu/src/Menu.js

@@ -45,7 +45,10 @@ export const menuProps = Object.assign(Object.assign({}, useTheme.props), { opti
     }, watchProps: {
         type: Array,
         default: undefined
-    }, disabled: Boolean, 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, 
+    }, disabled: Boolean, show: {
+        type: Boolean,
+        defalut: 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: {
         type: String,

package/es/menu/src/Submenu.js

@@ -99,7 +99,7 @@ export const NSubmenu = defineComponent({
             const { isHorizontal, paddingLeft, collapsed, mergedDisabled, maxIconSize, activeIconSize, title, childActive, icon, handleClick, menuProps: { nodeProps }, dropdownShow, iconMarginRight, tmNode, mergedClsPrefix } = 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, 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: this.extra, showArrow: !isHorizontal, childActive: childActive, clsPrefix: mergedClsPrefix, icon: icon, hover: dropdownShow, onClick: handleClick })));
         };
         const createSubmenuChildren = () => {
             return (h(NFadeInExpandTransition, null, {

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

@@ -4,4 +4,4 @@ import { MenuOption, MenuGroupOption, MenuIgnoredOption, MenuMixedOption } from
 import type { MenuSetupProps } from './Menu';
 export declare function isIgnoredNode(rawNode: MenuMixedOption): rawNode is MenuIgnoredOption;
 export declare function isDividerNode(rawNode: MenuMixedOption): rawNode is MenuIgnoredOption;
-export declare function itemRenderer(tmNode: TreeNode<MenuOption, MenuGroupOption, MenuIgnoredOption>, menuProps: MenuSetupProps): VNode | undefined;
+export declare function itemRenderer(tmNode: TreeNode<MenuOption, MenuGroupOption, MenuIgnoredOption>, menuProps: MenuSetupProps): VNode | null;

package/es/menu/src/utils.js

@@ -17,11 +17,15 @@ export function isDividerNode(rawNode) {
 }
 export function itemRenderer(tmNode, menuProps) {
     const { rawNode } = tmNode;
+    const { show } = rawNode;
+    if (typeof show === 'boolean' && !show) {
+        return null;
+    }
     if (isIgnoredNode(rawNode)) {
         if (isDividerNode(rawNode)) {
             return h(NMenuDivider, Object.assign({ key: tmNode.key }, rawNode.props));
         }
-        return undefined;
+        return null;
     }
     const { labelField } = menuProps;
     const { key, level, isGroup } = tmNode;

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

@@ -19,6 +19,7 @@ declare const _default: import("vue").DefineComponent<{
     onMouseleave: PropType<(e: MouseEvent) => void>;
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
+    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     messageProviderProps: import("./MessageProvider").MessageProviderSetupProps;
     handleClose(): void;
     cssVars: import("vue").ComputedRef<{

package/es/message/src/Message.js

@@ -2,7 +2,7 @@ import { computed, h, defineComponent, inject } from 'vue';
 import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../../_internal/icons';
 import { NIconSwitchTransition, NBaseLoading, NBaseIcon, NBaseClose } from '../../_internal';
 import { render, createKey } from '../../_utils';
-import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass, useRtl } from '../../_mixins';
 import { messageLight } from '../styles';
 import { messageProps } from './message-props';
 import { messageProviderInjectionKey } from './context';
@@ -18,10 +18,11 @@ export default defineComponent({
     name: 'Message',
     props: Object.assign(Object.assign({}, messageProps), { render: Function }),
     setup(props) {
-        const { inlineThemeDisabled } = useConfig();
+        const { inlineThemeDisabled, mergedRtlRef } = useConfig(props);
         const { props: messageProviderProps, mergedClsPrefixRef
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(messageProviderInjectionKey);
+        const rtlEnabledRef = useRtl('Message', mergedRtlRef, mergedClsPrefixRef);
         const themeRef = useTheme('Message', '-message', style, messageLight, messageProviderProps, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { type } = props;
@@ -60,6 +61,7 @@ export default defineComponent({
             : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
+            rtlEnabled: rtlEnabledRef,
             messageProviderProps,
             handleClose() {
                 var _a;
@@ -82,7 +84,10 @@ export default defineComponent({
                         : 'flex-end'
                 },
                 cssVars
-            ] }, renderMessage ? (renderMessage(this.$props)) : (h("div", { class: `${mergedClsPrefix}-message ${mergedClsPrefix}-message--${type}-type` },
+            ] }, renderMessage ? (renderMessage(this.$props)) : (h("div", { class: [
+                `${mergedClsPrefix}-message ${mergedClsPrefix}-message--${type}-type`,
+                this.rtlEnabled && `${mergedClsPrefix}-message--rtl`
+            ] },
             (iconNode = createIconVNode(icon, type, mergedClsPrefix)) &&
                 showIcon ? (h("div", { class: `${mergedClsPrefix}-message__icon ${mergedClsPrefix}-message__icon--${type}-type` },
                 h(NIconSwitchTransition, null, {

package/es/message/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/es/message/src/styles/rtl.cssr.js

@@ -0,0 +1,8 @@
+import { cB, cE, cM } from '../../../_utils/cssr';
+export default cB('message', [cM('rtl', `
+ direction: rtl;
+ `, [cE('close', `
+ margin: 0 10px 0 0;
+ `), cE('icon', `
+ margin: 0 0 0 10px;
+ `)])]);

package/es/message/styles/index.d.ts

@@ -1,3 +1,4 @@
 export { default as messageDark } from './dark';
 export { default as messageLight } from './light';
+export { messageRtl } from './rtl';
 export type { MessageTheme, MessageThemeVars } from './light';

package/es/message/styles/index.js

@@ -1,2 +1,3 @@
 export { default as messageDark } from './dark';
 export { default as messageLight } from './light';
+export { messageRtl } from './rtl';

package/es/message/styles/light.js

@@ -3,7 +3,10 @@ import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
     const { textColor2, closeIconColor, closeIconColorHover, closeIconColorPressed, infoColor, successColor, errorColor, warningColor, popoverColor, boxShadow2, primaryColor, lineHeight, borderRadius, closeColorHover, closeColorPressed } = vars;
     return Object.assign(Object.assign({}, commonVariables), { closeBorderRadius: borderRadius, textColor: textColor2, textColorInfo: textColor2, textColorSuccess: textColor2, textColorError: textColor2, textColorWarning: textColor2, textColorLoading: textColor2, color: popoverColor, colorInfo: popoverColor, colorSuccess: popoverColor, colorError: popoverColor, colorWarning: popoverColor, colorLoading: popoverColor, boxShadow: boxShadow2, boxShadowInfo: boxShadow2, boxShadowSuccess: boxShadow2, boxShadowError: boxShadow2, boxShadowWarning: boxShadow2, boxShadowLoading: boxShadow2, iconColor: textColor2, iconColorInfo: infoColor, iconColorSuccess: successColor, iconColorWarning: warningColor, iconColorError: errorColor, iconColorLoading: primaryColor, closeColorHover,
-        closeColorPressed, closeIconColor: closeIconColor, closeIconColorHover: closeIconColorHover, closeIconColorPressed: closeIconColorPressed, closeColorHoverInfo: closeColorHover, closeColorPressedInfo: closeColorPressed, closeIconColorInfo: closeIconColor, closeIconColorHoverInfo: closeIconColorHover, closeIconColorPressedInfo: closeIconColorPressed, closeColorHoverSuccess: closeColorHover, closeColorPressedSuccess: closeColorPressed, closeIconColorSuccess: closeIconColor, closeIconColorHoverSuccess: closeIconColorHover, closeIconColorPressedSuccess: closeIconColorPressed, closeColorHoverError: closeColorHover, closeColorPressedError: closeColorPressed, closeIconColorError: closeIconColor, closeIconColorHoverError: closeIconColorHover, closeIconColorPressedError: closeIconColorPressed, closeColorHoverWarning: closeColorHover, closeColorPressedWarning: closeColorPressed, closeIconColorWarning: closeIconColor, closeIconColorHoverWarning: closeIconColorHover, closeIconColorPressedWarning: closeIconColorPressed, closeColorHoverLoading: closeColorHover, closeColorPressedLoading: closeColorPressed, closeIconColorLoading: closeIconColor, closeIconColorHoverLoading: closeIconColorHover, closeIconColorPressedLoading: closeIconColorPressed, loadingColor: primaryColor, lineHeight,
+        closeColorPressed,
+        closeIconColor,
+        closeIconColorHover,
+        closeIconColorPressed, closeColorHoverInfo: closeColorHover, closeColorPressedInfo: closeColorPressed, closeIconColorInfo: closeIconColor, closeIconColorHoverInfo: closeIconColorHover, closeIconColorPressedInfo: closeIconColorPressed, closeColorHoverSuccess: closeColorHover, closeColorPressedSuccess: closeColorPressed, closeIconColorSuccess: closeIconColor, closeIconColorHoverSuccess: closeIconColorHover, closeIconColorPressedSuccess: closeIconColorPressed, closeColorHoverError: closeColorHover, closeColorPressedError: closeColorPressed, closeIconColorError: closeIconColor, closeIconColorHoverError: closeIconColorHover, closeIconColorPressedError: closeIconColorPressed, closeColorHoverWarning: closeColorHover, closeColorPressedWarning: closeColorPressed, closeIconColorWarning: closeIconColor, closeIconColorHoverWarning: closeIconColorHover, closeIconColorPressedWarning: closeIconColorPressed, closeColorHoverLoading: closeColorHover, closeColorPressedLoading: closeColorPressed, closeIconColorLoading: closeIconColor, closeIconColorHoverLoading: closeIconColorHover, closeIconColorPressedLoading: closeIconColorPressed, loadingColor: primaryColor, lineHeight,
         borderRadius });
 };
 const messageLight = {

package/es/message/styles/rtl.d.ts

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

package/es/message/styles/rtl.js

@@ -0,0 +1,5 @@
+import rtlStyle from '../src/styles/rtl.cssr';
+export const messageRtl = {
+    name: 'Message',
+    style: rtlStyle
+};

package/es/modal/src/Modal.js

@@ -2,6 +2,7 @@ import { h, withDirectives, Transition, ref, computed, defineComponent, provide,
 import { zindexable } from 'vdirs';
 import { useIsMounted, useClicked, useClickPosition } from 'vooks';
 import { VLazyTeleport } from 'vueuc';
+import { getPreciseEventTarget } from 'seemly';
 import { dialogProviderInjectionKey } from '../../dialog/src/context';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { keep, call, warnOnce, useIsComposing, eventEffectNotPerformed } from '../../_utils';
@@ -142,7 +143,7 @@ export default defineComponent({
                 onMaskClick(e);
             }
             if (props.maskClosable) {
-                if ((_a = containerRef.value) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
+                if ((_a = containerRef.value) === null || _a === void 0 ? void 0 : _a.contains(getPreciseEventTarget(e))) {
                     doUpdateShow(false);
                 }
             }

package/es/notification/styles/light.js

@@ -6,7 +6,9 @@ export const self = (vars) => {
     const { textColor2, successColor, infoColor, warningColor, errorColor, popoverColor, closeIconColor, closeIconColorHover, closeIconColorPressed, closeColorHover, closeColorPressed, textColor1, textColor3, borderRadius, fontWeightStrong, boxShadow2, lineHeight, fontSize } = vars;
     return Object.assign(Object.assign({}, commonVars), { borderRadius,
         lineHeight,
-        fontSize, headerFontWeight: fontWeightStrong, iconColor: textColor2, iconColorSuccess: successColor, iconColorInfo: infoColor, iconColorWarning: warningColor, iconColorError: errorColor, color: popoverColor, textColor: textColor2, closeIconColor: closeIconColor, closeIconColorHover: closeIconColorHover, closeIconColorPressed: closeIconColorPressed, closeBorderRadius: borderRadius, closeColorHover,
+        fontSize, headerFontWeight: fontWeightStrong, iconColor: textColor2, iconColorSuccess: successColor, iconColorInfo: infoColor, iconColorWarning: warningColor, iconColorError: errorColor, color: popoverColor, textColor: textColor2, closeIconColor,
+        closeIconColorHover,
+        closeIconColorPressed, closeBorderRadius: borderRadius, closeColorHover,
         closeColorPressed, headerTextColor: textColor1, descriptionTextColor: textColor3, actionTextColor: textColor2, boxShadow: boxShadow2 });
 };
 const notificationLight = createTheme({

package/es/number-animation/src/NumberAnimation.js

@@ -54,7 +54,7 @@ export default defineComponent({
                 tween({
                     from,
                     to,
-                    duration: duration,
+                    duration,
                     onUpdate,
                     onFinish
                 });