naive-ui 2.36.0 → 2.37.0

package/lib/date-picker/src/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pluckValueFromRange = exports.getDefaultTime = exports.getDerivedTimeFromKeyboardEvent = exports.strictParse = exports.quarterArray = exports.yearArray = exports.monthArray = exports.dateArray = void 0;
+exports.pluckValueFromRange = exports.getQuarterString = exports.getYearString = exports.getMonthString = exports.getDefaultTime = exports.getDerivedTimeFromKeyboardEvent = exports.strictParse = exports.quarterArray = exports.yearArray = exports.monthArray = exports.dateArray = void 0;
 const date_fns_1 = require("date-fns"); //
 const config_1 = require("./config");
 function getDerivedTimeFromKeyboardEvent(prevValue, event) {
@@ -26,10 +26,26 @@ const matcherMap = {
     year: date_fns_1.isSameYear,
     quarter: date_fns_1.isSameQuarter
 };
-function matchDate(sourceTime, patternTime, type) {
-    const matcher = matcherMap[type];
+function makeWeekMatcher(firstDayOfWeek) {
+    return (sourceTime, patternTime) => {
+        // date-fns: 0 - Sunday
+        // naive-ui: 0 - Monday
+        const weekStartsOn = ((firstDayOfWeek + 1) % 7);
+        return (0, date_fns_1.isSameWeek)(sourceTime, patternTime, { weekStartsOn });
+    };
+}
+function matchDate(sourceTime, patternTime, type, firstDayOfWeek = 0) {
+    const matcher = type === 'week' ? makeWeekMatcher(firstDayOfWeek) : matcherMap[type];
     return matcher(sourceTime, patternTime);
 }
+function dateOrWeekItem(time, monthTs, valueTs, currentTs, mode, firstDayOfWeek) {
+    if (mode === 'date') {
+        return dateItem(time, monthTs, valueTs, currentTs);
+    }
+    else {
+        return weekItem(time, monthTs, valueTs, currentTs, firstDayOfWeek);
+    }
+}
 // date item's valueTs can be a tuple since two date may show in one panel, so
 // any matched value would make it shown as selected
 function dateItem(time, monthTs, valueTs, currentTs) {
@@ -60,15 +76,67 @@ function dateItem(time, monthTs, valueTs, currentTs) {
         inCurrentMonth: (0, date_fns_1.isSameMonth)(time, monthTs),
         isCurrentDate: matchDate(currentTs, time, 'date'),
         inSpan,
+        inSelectedWeek: false,
         startOfSpan,
         endOfSpan,
         selected,
         ts: (0, date_fns_1.getTime)(time)
     };
 }
-function monthItem(monthTs, valueTs, currentTs) {
+function getMonthString(month, monthFormat, locale) {
+    const date = Date.UTC(2000, month, 1);
+    return (0, date_fns_1.format)(date, monthFormat, { locale });
+}
+exports.getMonthString = getMonthString;
+function getYearString(year, yearFormat, locale) {
+    const date = Date.UTC(year, 1, 1);
+    return (0, date_fns_1.format)(date, yearFormat, { locale });
+}
+exports.getYearString = getYearString;
+function getQuarterString(quarter, quarterFormat, locale) {
+    const date = Date.UTC(2000, quarter * 3 - 2, 1);
+    return (0, date_fns_1.format)(date, quarterFormat, { locale });
+}
+exports.getQuarterString = getQuarterString;
+function weekItem(time, monthTs, valueTs, currentTs, firstDayOfWeek) {
+    let inSpan = false;
+    let startOfSpan = false;
+    let endOfSpan = false;
+    if (Array.isArray(valueTs)) {
+        if (valueTs[0] < time && time < valueTs[1]) {
+            inSpan = true;
+        }
+        if (matchDate(valueTs[0], time, 'week', firstDayOfWeek))
+            startOfSpan = true;
+        if (matchDate(valueTs[1], time, 'week', firstDayOfWeek))
+            endOfSpan = true;
+    }
+    const inSelectedWeek = valueTs !== null &&
+        (Array.isArray(valueTs)
+            ? matchDate(valueTs[0], time, 'week', firstDayOfWeek) ||
+                matchDate(valueTs[1], time, 'week', firstDayOfWeek)
+            : matchDate(valueTs, time, 'week', firstDayOfWeek));
+    return {
+        type: 'date',
+        dateObject: {
+            date: (0, date_fns_1.getDate)(time),
+            month: (0, date_fns_1.getMonth)(time),
+            year: (0, date_fns_1.getYear)(time)
+        },
+        inCurrentMonth: (0, date_fns_1.isSameMonth)(time, monthTs),
+        isCurrentDate: matchDate(currentTs, time, 'date'),
+        inSpan,
+        startOfSpan,
+        endOfSpan,
+        selected: false,
+        inSelectedWeek,
+        ts: (0, date_fns_1.getTime)(time)
+    };
+}
+function monthItem(monthTs, valueTs, currentTs, { monthFormat }) {
     return {
         type: 'month',
+        monthFormat,
         dateObject: {
             month: (0, date_fns_1.getMonth)(monthTs),
             year: (0, date_fns_1.getYear)(monthTs)
@@ -78,9 +146,10 @@ function monthItem(monthTs, valueTs, currentTs) {
         ts: (0, date_fns_1.getTime)(monthTs)
     };
 }
-function yearItem(yearTs, valueTs, currentTs) {
+function yearItem(yearTs, valueTs, currentTs, { yearFormat }) {
     return {
         type: 'year',
+        yearFormat,
         dateObject: {
             year: (0, date_fns_1.getYear)(yearTs)
         },
@@ -89,9 +158,10 @@ function yearItem(yearTs, valueTs, currentTs) {
         ts: (0, date_fns_1.getTime)(yearTs)
     };
 }
-function quarterItem(quarterTs, valueTs, currentTs) {
+function quarterItem(quarterTs, valueTs, currentTs, { quarterFormat }) {
     return {
         type: 'quarter',
+        quarterFormat,
         dateObject: {
             quarter: (0, date_fns_1.getQuarter)(quarterTs),
             year: (0, date_fns_1.getYear)(quarterTs)
@@ -105,7 +175,8 @@ function quarterItem(quarterTs, valueTs, currentTs) {
  * Given time to display calendar, given the selected time, given current time,
  * return the date array of display time's month.
  */
-function dateArray(monthTs, valueTs, currentTs, startDay, strip = false) {
+function dateArray(monthTs, valueTs, currentTs, startDay, strip = false, weekMode = false) {
+    const granularity = weekMode ? 'week' : 'date';
     const displayMonth = (0, date_fns_1.getMonth)(monthTs);
     // First day of current month
     let displayMonthIterator = (0, date_fns_1.getTime)((0, date_fns_1.startOfMonth)(monthTs));
@@ -115,12 +186,12 @@ function dateArray(monthTs, valueTs, currentTs, startDay, strip = false) {
     let protectLastMonthDateIsShownFlag = !strip;
     while ((0, date_fns_1.getDay)(lastMonthIterator) !== startDay ||
         protectLastMonthDateIsShownFlag) {
-        calendarDays.unshift(dateItem(lastMonthIterator, monthTs, valueTs, currentTs));
+        calendarDays.unshift(dateOrWeekItem(lastMonthIterator, monthTs, valueTs, currentTs, granularity, startDay));
         lastMonthIterator = (0, date_fns_1.getTime)((0, date_fns_1.addDays)(lastMonthIterator, -1));
         protectLastMonthDateIsShownFlag = false;
     }
     while ((0, date_fns_1.getMonth)(displayMonthIterator) === displayMonth) {
-        calendarDays.push(dateItem(displayMonthIterator, monthTs, valueTs, currentTs));
+        calendarDays.push(dateOrWeekItem(displayMonthIterator, monthTs, valueTs, currentTs, granularity, startDay));
         displayMonthIterator = (0, date_fns_1.getTime)((0, date_fns_1.addDays)(displayMonthIterator, 1));
     }
     const endIndex = strip
@@ -131,38 +202,38 @@ function dateArray(monthTs, valueTs, currentTs, startDay, strip = false) {
                 : 42
         : 42;
     while (calendarDays.length < endIndex) {
-        calendarDays.push(dateItem(displayMonthIterator, monthTs, valueTs, currentTs));
+        calendarDays.push(dateOrWeekItem(displayMonthIterator, monthTs, valueTs, currentTs, granularity, startDay));
         displayMonthIterator = (0, date_fns_1.getTime)((0, date_fns_1.addDays)(displayMonthIterator, 1));
     }
     return calendarDays;
 }
 exports.dateArray = dateArray;
-function monthArray(yearAnchorTs, valueTs, currentTs) {
+function monthArray(yearAnchorTs, valueTs, currentTs, format) {
     const calendarMonths = [];
     const yearStart = (0, date_fns_1.startOfYear)(yearAnchorTs);
     for (let i = 0; i < 12; i++) {
-        calendarMonths.push(monthItem((0, date_fns_1.getTime)((0, date_fns_1.addMonths)(yearStart, i)), valueTs, currentTs));
+        calendarMonths.push(monthItem((0, date_fns_1.getTime)((0, date_fns_1.addMonths)(yearStart, i)), valueTs, currentTs, format));
     }
     return calendarMonths;
 }
 exports.monthArray = monthArray;
-function quarterArray(yearAnchorTs, valueTs, currentTs) {
+function quarterArray(yearAnchorTs, valueTs, currentTs, format) {
     const calendarQuarters = [];
     const yearStart = (0, date_fns_1.startOfYear)(yearAnchorTs);
     for (let i = 0; i < 4; i++) {
-        calendarQuarters.push(quarterItem((0, date_fns_1.getTime)((0, date_fns_1.addQuarters)(yearStart, i)), valueTs, currentTs));
+        calendarQuarters.push(quarterItem((0, date_fns_1.getTime)((0, date_fns_1.addQuarters)(yearStart, i)), valueTs, currentTs, format));
     }
     return calendarQuarters;
 }
 exports.quarterArray = quarterArray;
-function yearArray(valueTs, currentTs) {
+function yearArray(valueTs, currentTs, format) {
     const calendarYears = [];
     const time1900 = new Date(config_1.START_YEAR, 0, 1);
     // 1900 is not a round time, so we use 1911 as start...
     // new Date(1900, 0, 1)
     // 1899-12-31T15:54:17.000Z
     for (let i = 0; i < 200; i++) {
-        calendarYears.push(yearItem((0, date_fns_1.getTime)((0, date_fns_1.addYears)(time1900, i)), valueTs, currentTs));
+        calendarYears.push(yearItem((0, date_fns_1.getTime)((0, date_fns_1.addYears)(time1900, i)), valueTs, currentTs, format));
     }
     return calendarYears;
 }

package/lib/date-picker/styles/_common.d.ts

@@ -22,6 +22,7 @@ declare const _default: {
     calendarLeftPaddingMonthrange: string;
     calendarLeftPaddingQuarterrange: string;
     calendarLeftPaddingYearrange: string;
+    calendarLeftPaddingWeek: string;
     calendarRightPaddingDate: string;
     calendarRightPaddingDatetime: string;
     calendarRightPaddingDaterange: string;
@@ -32,5 +33,6 @@ declare const _default: {
     calendarRightPaddingMonthrange: string;
     calendarRightPaddingQuarterrange: string;
     calendarRightPaddingYearrange: string;
+    calendarRightPaddingWeek: string;
 };
 export default _default;

package/lib/date-picker/styles/_common.js

@@ -25,6 +25,7 @@ exports.default = {
     calendarLeftPaddingMonthrange: '0',
     calendarLeftPaddingQuarterrange: '0',
     calendarLeftPaddingYearrange: '0',
+    calendarLeftPaddingWeek: '6px 12px 4px 12px',
     calendarRightPaddingDate: '6px 12px 4px 12px',
     calendarRightPaddingDatetime: '4px 12px',
     calendarRightPaddingDaterange: '6px 12px 4px 12px',
@@ -34,5 +35,6 @@ exports.default = {
     calendarRightPaddingQuarter: '0',
     calendarRightPaddingMonthrange: '0',
     calendarRightPaddingQuarterrange: '0',
-    calendarRightPaddingYearrange: '0'
+    calendarRightPaddingYearrange: '0',
+    calendarRightPaddingWeek: '0'
 };

package/lib/date-picker/styles/light.d.ts

@@ -51,6 +51,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     calendarLeftPaddingMonthrange: string;
     calendarLeftPaddingQuarterrange: string;
     calendarLeftPaddingYearrange: string;
+    calendarLeftPaddingWeek: string;
     calendarRightPaddingDate: string;
     calendarRightPaddingDatetime: string;
     calendarRightPaddingDaterange: string;
@@ -61,6 +62,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     calendarRightPaddingMonthrange: string;
     calendarRightPaddingQuarterrange: string;
     calendarRightPaddingYearrange: string;
+    calendarRightPaddingWeek: string;
 };
 export type DatePickerThemeVars = ReturnType<typeof self>;
 declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
@@ -115,6 +117,7 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
     calendarLeftPaddingMonthrange: string;
     calendarLeftPaddingQuarterrange: string;
     calendarLeftPaddingYearrange: string;
+    calendarLeftPaddingWeek: string;
     calendarRightPaddingDate: string;
     calendarRightPaddingDatetime: string;
     calendarRightPaddingDaterange: string;
@@ -125,6 +128,7 @@ declare const datePickerLight: import("../../_mixins").Theme<"DatePicker", {
     calendarRightPaddingMonthrange: string;
     calendarRightPaddingQuarterrange: string;
     calendarRightPaddingYearrange: string;
+    calendarRightPaddingWeek: string;
 }, {
     Input: import("../../_mixins").Theme<"Input", {
         countTextColorDisabled: string;

package/lib/descriptions/src/Descriptions.d.ts

@@ -404,8 +404,8 @@ declare const _default: import("vue").DefineComponent<{
         tdPaddingLarge: string;
     }, any>>>;
 }>>, {
-    readonly column: number;
     readonly size: "small" | "medium" | "large";
+    readonly column: number;
     readonly separator: string;
     readonly bordered: boolean;
     readonly labelAlign: "left" | "right" | "center";

package/lib/dialog/src/Dialog.d.ts

@@ -738,6 +738,7 @@ export declare const NDialog: import("vue").DefineComponent<{
     }>>>;
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
+    rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     mergedIconPlacement: import("vue").ComputedRef<import("./interface").IconPlacement>;
     mergedTheme: import("vue").ComputedRef<{
         common: {
@@ -1099,7 +1100,10 @@ export declare const NDialog: import("vue").DefineComponent<{
         '--n-icon-color': string;
         '--n-bezier': string;
         '--n-close-margin': string;
-        '--n-icon-margin': string;
+        '--n-icon-margin-top': string;
+        '--n-icon-margin-right': string;
+        '--n-icon-margin-bottom': string;
+        '--n-icon-margin-left': string;
         '--n-icon-size': string;
         '--n-close-size': string;
         '--n-close-icon-size': string;

package/lib/dialog/src/Dialog.js

@@ -13,6 +13,7 @@ const button_1 = require("../../button");
 const styles_1 = require("../styles");
 const dialogProps_1 = require("./dialogProps");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const seemly_1 = require("seemly");
 const iconRenderMap = {
     default: () => (0, vue_1.h)(icons_1.InfoIcon, null),
     info: () => (0, vue_1.h)(icons_1.InfoIcon, null),
@@ -28,7 +29,8 @@ exports.NDialog = (0, vue_1.defineComponent)({
     ],
     props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), dialogProps_1.dialogProps),
     setup(props) {
-        const { mergedComponentPropsRef, mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
+        const { mergedComponentPropsRef, mergedClsPrefixRef, inlineThemeDisabled, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
+        const rtlEnabledRef = (0, _mixins_1.useRtl)('Dialog', mergedRtlRef, mergedClsPrefixRef);
         const mergedIconPlacementRef = (0, vue_1.computed)(() => {
             var _a, _b;
             const { iconPlacement } = props;
@@ -56,12 +58,16 @@ exports.NDialog = (0, vue_1.defineComponent)({
             const { type } = props;
             const iconPlacement = mergedIconPlacementRef.value;
             const { common: { cubicBezierEaseInOut }, self: { fontSize, lineHeight, border, titleTextColor, textColor, color, closeBorderRadius, closeColorHover, closeColorPressed, closeIconColor, closeIconColorHover, closeIconColorPressed, closeIconSize, borderRadius, titleFontWeight, titleFontSize, padding, iconSize, actionSpace, contentMargin, closeSize, [iconPlacement === 'top' ? 'iconMarginIconTop' : 'iconMargin']: iconMargin, [iconPlacement === 'top' ? 'closeMarginIconTop' : 'closeMargin']: closeMargin, [(0, _utils_1.createKey)('iconColor', type)]: iconColor } } = themeRef.value;
+            const iconMarginDiscrete = (0, seemly_1.getMargin)(iconMargin);
             return {
                 '--n-font-size': fontSize,
                 '--n-icon-color': iconColor,
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-close-margin': closeMargin,
-                '--n-icon-margin': iconMargin,
+                '--n-icon-margin-top': iconMarginDiscrete.top,
+                '--n-icon-margin-right': iconMarginDiscrete.right,
+                '--n-icon-margin-bottom': iconMarginDiscrete.bottom,
+                '--n-icon-margin-left': iconMarginDiscrete.left,
                 '--n-icon-size': iconSize,
                 '--n-close-size': closeSize,
                 '--n-close-icon-size': closeIconSize,
@@ -89,6 +95,7 @@ exports.NDialog = (0, vue_1.defineComponent)({
             : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
+            rtlEnabled: rtlEnabledRef,
             mergedIconPlacement: mergedIconPlacementRef,
             mergedTheme: themeRef,
             handlePositiveClick,
@@ -123,11 +130,16 @@ exports.NDialog = (0, vue_1.defineComponent)({
                 this.themeClass,
                 this.closable && `${mergedClsPrefix}-dialog--closable`,
                 `${mergedClsPrefix}-dialog--icon-${mergedIconPlacement}`,
-                bordered && `${mergedClsPrefix}-dialog--bordered`
+                bordered && `${mergedClsPrefix}-dialog--bordered`,
+                this.rtlEnabled && `${mergedClsPrefix}-dialog--rtl`
             ], style: cssVars, role: "dialog" },
             closable
                 ? (0, _utils_1.resolveWrappedSlot)(this.$slots.close, (node) => {
-                    return node ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dialog__close` }, node)) : ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-dialog__close`, onClick: this.handleCloseClick }));
+                    const classNames = [
+                        `${mergedClsPrefix}-dialog__close`,
+                        this.rtlEnabled && `${mergedClsPrefix}-dialog--rtl`
+                    ];
+                    return node ? ((0, vue_1.h)("div", { class: classNames }, node)) : ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: classNames, onClick: this.handleCloseClick }));
                 })
                 : null,
             showIcon && mergedIconPlacement === 'top' ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dialog-icon-container` }, icon)) : null,

package/lib/dialog/src/DialogProvider.d.ts

@@ -63,10 +63,10 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
             type?: import("../../button/src/interface").Type | undefined;
             tag?: keyof HTMLElementTagNameMap | undefined;
             block?: boolean | undefined;
+            size?: import("../../button/src/interface").Size | undefined;
             color?: string | undefined;
             round?: boolean | undefined;
             dashed?: boolean | undefined;
-            size?: import("../../button/src/interface").Size | undefined;
             text?: boolean | undefined;
             circle?: boolean | undefined;
             disabled?: boolean | undefined;
@@ -402,10 +402,10 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
             type?: import("../../button/src/interface").Type | undefined;
             tag?: keyof HTMLElementTagNameMap | undefined;
             block?: boolean | undefined;
+            size?: import("../../button/src/interface").Size | undefined;
             color?: string | undefined;
             round?: boolean | undefined;
             dashed?: boolean | undefined;
-            size?: import("../../button/src/interface").Size | undefined;
             text?: boolean | undefined;
             circle?: boolean | undefined;
             disabled?: boolean | undefined;

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

@@ -7,7 +7,10 @@ const cssr_1 = require("../../../_utils/cssr");
 // vars:
 // --n-icon-color
 // --n-bezier
-// --n-icon-margin
+// --n-icon-margin-top
+// --n-icon-margin-right
+// --n-icon-margin-bottom
+// --n-icon-margin-left
 // --n-icon-size
 // --n-close-border-radius
 // --n-close-margin
@@ -29,6 +32,7 @@ const cssr_1 = require("../../../_utils/cssr");
 // --n-title-text-color
 // --n-action-space
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('dialog', `
+ --n-icon-margin: var(--n-icon-margin-top) var(--n-icon-margin-right) var(--n-icon-margin-bottom) var(--n-icon-margin-left);
  word-break: break-word;
  line-height: var(--n-line-height);
  position: relative;
@@ -77,22 +81,22 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('dialog', `
  `, [(0, cssr_1.cM)('last', 'margin-bottom: 0;')]), (0, cssr_1.cE)('action', `
  display: flex;
  justify-content: flex-end;
- `, [(0, cssr_1.c)('> *:not(:last-child)', {
-  marginRight: 'var(--n-action-space)'
-})]), (0, cssr_1.cE)('icon', {
-  fontSize: 'var(--n-icon-size)',
-  transition: 'color .3s var(--n-bezier)'
-}), (0, cssr_1.cE)('title', `
+ `, [(0, cssr_1.c)('> *:not(:last-child)', `
+ margin-right: var(--n-action-space);
+ `)]), (0, cssr_1.cE)('icon', `
+ font-size: var(--n-icon-size);
+ transition: color .3s var(--n-bezier);
+ `), (0, cssr_1.cE)('title', `
  transition: color .3s var(--n-bezier);
  display: flex;
  align-items: center;
  font-size: var(--n-title-font-size);
  font-weight: var(--n-title-font-weight);
  color: var(--n-title-text-color);
- `), (0, cssr_1.cB)('dialog-icon-container', {
-  display: 'flex',
-  justifyContent: 'center'
-})]), (0, cssr_1.insideModal)((0, cssr_1.cB)('dialog', `
+ `), (0, cssr_1.cB)('dialog-icon-container', `
+ display: flex;
+ justify-content: center;
+ `)]), (0, cssr_1.insideModal)((0, cssr_1.cB)('dialog', `
  width: 446px;
  max-width: calc(100vw - 32px);
  `)), (0, cssr_1.cB)('dialog', [(0, cssr_1.asModal)(`

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

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

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

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

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

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

package/lib/dialog/styles/index.js

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

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

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

package/lib/dialog/styles/rtl.js

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

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

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

package/lib/drawer/src/Drawer.js

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

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

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

package/lib/drawer/src/DrawerBodyWrapper.js

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