naive-ui 2.35.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,13 +26,24 @@ const matcherMap = {
     year: date_fns_1.isSameYear,
     quarter: date_fns_1.isSameQuarter
 };
-function matchDate(sourceTime, patternTime, type) {
-    const matcher = matcherMap[type];
-    if (Array.isArray(sourceTime)) {
-        return sourceTime.some((time) => matcher(time, patternTime));
+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 matcher(sourceTime, patternTime);
+        return weekItem(time, monthTs, valueTs, currentTs, firstDayOfWeek);
     }
 }
 // date item's valueTs can be a tuple since two date may show in one panel, so
@@ -65,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)
@@ -83,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)
         },
@@ -94,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)
@@ -110,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));
@@ -120,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
@@ -136,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

@@ -19,12 +19,13 @@ exports.default = {
     calendarLeftPaddingDatetime: '4px 12px',
     calendarLeftPaddingDaterange: '6px 12px 4px 12px',
     calendarLeftPaddingDatetimerange: '4px 12px',
-    calendarLeftPaddingMonth: '0',
+    calendarLeftPaddingMonth: '0', // TODO: make it actually effective
     calendarLeftPaddingYear: '0',
     calendarLeftPaddingQuarter: '0',
     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

@@ -24,7 +24,9 @@ export declare const descriptionsProps: {
         readonly default: "medium";
     };
     readonly bordered: BooleanConstructor;
+    readonly labelClass: StringConstructor;
     readonly labelStyle: PropType<string | CSSProperties>;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly theme: PropType<import("../../_mixins").Theme<"Descriptions", {
         lineHeight: string;
@@ -150,7 +152,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "medium";
     };
     readonly bordered: BooleanConstructor;
+    readonly labelClass: StringConstructor;
     readonly labelStyle: PropType<string | CSSProperties>;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly theme: PropType<import("../../_mixins").Theme<"Descriptions", {
         lineHeight: string;
@@ -299,7 +303,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "medium";
     };
     readonly bordered: BooleanConstructor;
+    readonly labelClass: StringConstructor;
     readonly labelStyle: PropType<string | CSSProperties>;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly theme: PropType<import("../../_mixins").Theme<"Descriptions", {
         lineHeight: string;
@@ -398,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/descriptions/src/Descriptions.js

@@ -27,7 +27,7 @@ exports.descriptionsProps = Object.assign(Object.assign({}, _mixins_1.useTheme.p
     }, size: {
         type: String,
         default: 'medium'
-    }, bordered: Boolean, labelStyle: [Object, String], contentStyle: [Object, String] });
+    }, bordered: Boolean, labelClass: String, labelStyle: [Object, String], contentClass: String, contentStyle: [Object, String] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Descriptions',
     props: exports.descriptionsProps,
@@ -82,7 +82,7 @@ exports.default = (0, vue_1.defineComponent)({
         const defaultSlots = this.$slots.default;
         const children = defaultSlots ? (0, _utils_1.flatten)(defaultSlots()) : [];
         const memorizedLength = children.length;
-        const { compitableColumn, labelPlacement, labelAlign, size, bordered, title, cssVars, mergedClsPrefix, separator, onRender } = this;
+        const { contentClass, labelClass, compitableColumn, labelPlacement, labelAlign, size, bordered, title, cssVars, mergedClsPrefix, separator, onRender } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         const filteredChildren = children.filter((child) => (0, utils_1.isDescriptionsItem)(child));
         if (process.env.NODE_ENV !== 'production' && memorizedLength !== filteredChildren.length) {
@@ -108,7 +108,13 @@ exports.default = (0, vue_1.defineComponent)({
             const contentStyle = props.contentStyle || props['content-style'] || this.contentStyle;
             if (labelPlacement === 'left') {
                 if (bordered) {
-                    state.row.push((0, vue_1.h)("th", { class: `${mergedClsPrefix}-descriptions-table-header`, colspan: 1, style: labelStyle }, itemLabel), (0, vue_1.h)("td", { class: `${mergedClsPrefix}-descriptions-table-content`, colspan: isLastIteration
+                    state.row.push((0, vue_1.h)("th", { class: [
+                            `${mergedClsPrefix}-descriptions-table-header`,
+                            labelClass
+                        ], colspan: 1, style: labelStyle }, itemLabel), (0, vue_1.h)("td", { class: [
+                            `${mergedClsPrefix}-descriptions-table-content`,
+                            contentClass
+                        ], colspan: isLastIteration
                             ? (compitableColumn - memorizedSpan) * 2 + 1
                             : itemSpan * 2 - 1, style: contentStyle }, itemChildren));
                 }
@@ -116,19 +122,28 @@ exports.default = (0, vue_1.defineComponent)({
                     state.row.push((0, vue_1.h)("td", { class: `${mergedClsPrefix}-descriptions-table-content`, colspan: isLastIteration
                             ? (compitableColumn - memorizedSpan) * 2
                             : itemSpan * 2 },
-                        (0, vue_1.h)("span", { class: `${mergedClsPrefix}-descriptions-table-content__label`, style: labelStyle }, [
+                        (0, vue_1.h)("span", { class: [
+                                `${mergedClsPrefix}-descriptions-table-content__label`,
+                                labelClass
+                            ], style: labelStyle }, [
                             ...itemLabel,
                             separator && ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-descriptions-separator` }, separator))
                         ]),
-                        (0, vue_1.h)("span", { class: `${mergedClsPrefix}-descriptions-table-content__content`, style: contentStyle }, itemChildren)));
+                        (0, vue_1.h)("span", { class: [
+                                `${mergedClsPrefix}-descriptions-table-content__content`,
+                                contentClass
+                            ], style: contentStyle }, itemChildren)));
                 }
             }
             else {
                 const colspan = isLastIteration
                     ? (compitableColumn - memorizedSpan) * 2
                     : itemSpan * 2;
-                state.row.push((0, vue_1.h)("th", { class: `${mergedClsPrefix}-descriptions-table-header`, colspan: colspan, style: labelStyle }, itemLabel));
-                state.secondRow.push((0, vue_1.h)("td", { class: `${mergedClsPrefix}-descriptions-table-content`, colspan: colspan, style: contentStyle }, itemChildren));
+                state.row.push((0, vue_1.h)("th", { class: [`${mergedClsPrefix}-descriptions-table-header`, labelClass], colspan: colspan, style: labelStyle }, itemLabel));
+                state.secondRow.push((0, vue_1.h)("td", { class: [
+                        `${mergedClsPrefix}-descriptions-table-content`,
+                        contentClass
+                    ], colspan: colspan, style: contentStyle }, itemChildren));
             }
             if (state.span >= compitableColumn || isLastIteration) {
                 state.span = 0;

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

@@ -6,7 +6,9 @@ export declare const descriptionsItemProps: {
         readonly type: NumberConstructor;
         readonly default: 1;
     };
+    readonly labelClass: StringConstructor;
     readonly labelStyle: PropType<string | CSSProperties>;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
 };
 export type DescriptionItemProps = ExtractPublicPropTypes<typeof descriptionsItemProps>;
@@ -16,7 +18,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 1;
     };
+    readonly labelClass: StringConstructor;
     readonly labelStyle: PropType<string | CSSProperties>;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
 }, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly label: StringConstructor;
@@ -24,7 +28,9 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: NumberConstructor;
         readonly default: 1;
     };
+    readonly labelClass: StringConstructor;
     readonly labelStyle: PropType<string | CSSProperties>;
+    readonly contentClass: StringConstructor;
     readonly contentStyle: PropType<string | CSSProperties>;
 }>>, {
     readonly span: number;

package/lib/descriptions/src/DescriptionsItem.js

@@ -9,7 +9,9 @@ exports.descriptionsItemProps = {
         type: Number,
         default: 1
     },
+    labelClass: String,
     labelStyle: [Object, String],
+    contentClass: String,
     contentStyle: [Object, String]
 };
 exports.default = (0, vue_1.defineComponent)({

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),
@@ -23,12 +24,13 @@ const iconRenderMap = {
 exports.NDialog = (0, vue_1.defineComponent)({
     name: 'Dialog',
     alias: [
-        'NimbusConfirmCard',
+        'NimbusConfirmCard', // deprecated
         'Confirm' // deprecated
     ],
     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,9 +130,18 @@ 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, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-dialog__close`, onClick: this.handleCloseClick })) : null,
+            closable
+                ? (0, _utils_1.resolveWrappedSlot)(this.$slots.close, (node) => {
+                    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,
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-dialog__title` },
                 showIcon && mergedIconPlacement === 'left' ? icon : null,

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

@@ -177,8 +177,8 @@ export declare const NDialogEnvironment: import("vue").DefineComponent<{
     iconPlacement: PropType<import("./interface").IconPlacement>;
 }>>, {
     type: "default" | "error" | "info" | "success" | "warning";
-    autoFocus: boolean;
     loading: boolean;
+    autoFocus: boolean;
     bordered: boolean;
     showIcon: boolean;
     closable: boolean;

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

@@ -49,10 +49,10 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
         onAfterLeave?: (() => void) | undefined;
         title?: string | (() => import("vue").VNodeChild) | undefined;
         action?: (() => import("vue").VNodeChild) | undefined;
+        loading?: boolean | undefined;
         autoFocus?: boolean | undefined;
         positiveText?: string | undefined;
         negativeText?: string | undefined;
-        loading?: boolean | undefined;
         bordered?: boolean | undefined;
         showIcon?: boolean | undefined;
         closable?: boolean | undefined;
@@ -63,14 +63,15 @@ 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;
             onClick?: import("../../_utils").MaybeArray<(e: MouseEvent) => void> | undefined;
+            loading?: boolean | undefined;
             focusable?: boolean | undefined;
             strong?: boolean | undefined;
             themeOverrides?: {
@@ -385,7 +386,6 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
                     name: "common";
                 } | undefined;
             } | undefined;
-            loading?: boolean | undefined;
             bordered?: boolean | undefined;
             textColor?: string | undefined;
             renderIcon?: (() => import("vue").VNodeChild) | undefined;
@@ -402,14 +402,15 @@ 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;
             onClick?: import("../../_utils").MaybeArray<(e: MouseEvent) => void> | undefined;
+            loading?: boolean | undefined;
             focusable?: boolean | undefined;
             strong?: boolean | undefined;
             themeOverrides?: {
@@ -724,7 +725,6 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
                     name: "common";
                 } | undefined;
             } | undefined;
-            loading?: boolean | undefined;
             bordered?: boolean | undefined;
             textColor?: string | undefined;
             renderIcon?: (() => import("vue").VNodeChild) | undefined;

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

@@ -32,4 +32,4 @@ declare const dialogProps: {
 };
 export type DialogProps = ExtractPublicPropTypes<typeof dialogProps>;
 export { dialogProps };
-export declare const dialogPropKeys: ("type" | "content" | "icon" | "title" | "action" | "positiveText" | "negativeText" | "loading" | "bordered" | "showIcon" | "closable" | "onClose" | "iconPlacement" | "positiveButtonProps" | "negativeButtonProps" | "onPositiveClick" | "onNegativeClick")[];
+export declare const dialogPropKeys: ("type" | "content" | "icon" | "title" | "action" | "loading" | "positiveText" | "negativeText" | "bordered" | "showIcon" | "closable" | "onClose" | "iconPlacement" | "positiveButtonProps" | "negativeButtonProps" | "onPositiveClick" | "onNegativeClick")[];

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;