naive-ui 2.25.2 → 2.25.5

package/es/data-table/src/TableParts/Body.d.ts

@@ -18,6 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;

package/es/data-table/src/TableParts/Body.js

@@ -6,7 +6,7 @@ import { useMemo } from 'vooks';
 import { cssrAnchorMetaName } from '../../../_mixins/common';
 import { c } from '../../../_utils/cssr';
 import { NScrollbar } from '../../../_internal';
-import { formatLength } from '../../../_utils';
+import { formatLength, resolveSlot } from '../../../_utils';
 import { NEmpty } from '../../../empty';
 import { dataTableInjectionKey } from '../interface';
 import { createRowClassName, getColKey, isColumnSorting } from '../utils';
@@ -495,7 +495,9 @@ export default defineComponent({
             const createEmptyNode = () => (h("div", { class: [
                     `${mergedClsPrefix}-data-table-empty`,
                     this.loading && `${mergedClsPrefix}-data-table-empty--hide`
-                ], style: this.bodyStyle, ref: "emptyElRef" }, this.dataTableSlots.empty ? (this.dataTableSlots.empty()) : (h(NEmpty, { theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty }))));
+                ], style: this.bodyStyle, ref: "emptyElRef" }, resolveSlot(this.dataTableSlots.empty, () => [
+                h(NEmpty, { theme: this.mergedTheme.peers.Empty, themeOverrides: this.mergedTheme.peerOverrides.Empty })
+            ])));
             if (this.shouldDisplaySomeTablePart) {
                 return (h(Fragment, null,
                     tableNode,

package/es/data-table/src/interface.d.ts

@@ -220,7 +220,7 @@ export interface DataTableInst {
 }
 export declare type CreateSummary<T = InternalRowData> = (pageData: T[]) => SummaryRowData | SummaryRowData[];
 export interface SummaryCell {
-    value?: string | number;
+    value?: VNodeChild;
     colSpan?: number;
     rowSpan?: number;
 }

package/es/data-table/src/use-table-data.js

@@ -8,12 +8,19 @@ import { useSorter } from './use-sorter';
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function useTableData(props, { dataRelatedColsRef }) {
     const selectionColumnRef = computed(() => {
-        return (props.columns.find((col) => {
-            if (col.type === 'selection') {
-                return true;
+        const getSelectionColumn = (cols) => {
+            for (let i = 0; i < cols.length; ++i) {
+                const col = cols[i];
+                if ('children' in col) {
+                    return getSelectionColumn(col.children);
+                }
+                else if (col.type === 'selection') {
+                    return col;
+                }
             }
-            return false;
-        }) || null);
+            return null;
+        };
+        return getSelectionColumn(props.columns);
     });
     const treeMateRef = computed(() => {
         const { childrenKey } = props;
@@ -50,10 +57,15 @@ export function useTableData(props, { dataRelatedColsRef }) {
         });
         const controlledFilterState = {};
         columnsWithControlledFilter.forEach((column) => {
+            var _a;
             if (column.type === 'selection' || column.type === 'expand')
                 return;
-            controlledFilterState[column.key] =
-                column.filterOptionValues || column.filterOptionValue || null;
+            if (column.filterOptionValues === undefined) {
+                controlledFilterState[column.key] = (_a = column.filterOptionValue) !== null && _a !== void 0 ? _a : null;
+            }
+            else {
+                controlledFilterState[column.key] = column.filterOptionValues;
+            }
         });
         const activeFilters = Object.assign(createShallowClonedObject(uncontrolledFilterStateRef.value), controlledFilterState);
         return activeFilters;

package/es/date-picker/src/DatePicker.d.ts

@@ -3809,6 +3809,7 @@ declare const _default: import("vue").DefineComponent<{
             containerScrollTop: number;
             syncUnifiedContainer: () => void;
             scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+            scrollBy: import("../../_internal/scrollbar/src/ScrollBar").ScrollBy;
             sync: () => void;
             handleMouseEnterWrapper: () => void;
             handleMouseLeaveWrapper: () => void;

package/es/date-picker/src/DatePicker.js

@@ -52,7 +52,7 @@ export default defineComponent({
         const { localeRef, dateLocaleRef } = useLocale('DatePicker');
         const formItem = useFormItem(props);
         const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
-        const { NConfigProvider, mergedClsPrefixRef, mergedBorderedRef, namespaceRef } = useConfig(props);
+        const { mergedComponentPropsRef, mergedClsPrefixRef, mergedBorderedRef, namespaceRef } = useConfig(props);
         const panelInstRef = ref(null);
         const triggerElRef = ref(null);
         const inputInstRef = ref(null);
@@ -123,7 +123,7 @@ export default defineComponent({
         const themeRef = useTheme('DatePicker', '-date-picker', style, datePickerLight, props, mergedClsPrefixRef);
         const timePickerSizeRef = computed(() => {
             var _a, _b;
-            return (((_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DatePicker) === null || _b === void 0 ? void 0 : _b.timePickerSize) || 'small');
+            return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DatePicker) === null || _b === void 0 ? void 0 : _b.timePickerSize) || 'small');
         });
         const isRangeRef = computed(() => {
             return ['daterange', 'datetimerange'].includes(props.type);

package/es/date-picker/src/panel/date.d.ts

@@ -48,6 +48,7 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;
@@ -63,6 +64,7 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;

package/es/date-picker/src/panel/datetime.d.ts

@@ -42,6 +42,7 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;
@@ -57,6 +58,7 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;

package/es/date-picker/src/panel/month.d.ts

@@ -50,6 +50,7 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;
@@ -65,6 +66,7 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;

package/es/date-picker/src/panel/panelHeader.d.ts

@@ -127,6 +127,7 @@ declare const _default: import("vue").DefineComponent<{
                 containerScrollTop: number;
                 syncUnifiedContainer: () => void;
                 scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+                scrollBy: import("../../../_internal/scrollbar/src/ScrollBar").ScrollBy;
                 sync: () => void;
                 handleMouseEnterWrapper: () => void;
                 handleMouseLeaveWrapper: () => void;
@@ -142,6 +143,7 @@ declare const _default: import("vue").DefineComponent<{
                 containerScrollTop: number;
                 syncUnifiedContainer: () => void;
                 scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+                scrollBy: import("../../../_internal/scrollbar/src/ScrollBar").ScrollBy;
                 sync: () => void;
                 handleMouseEnterWrapper: () => void;
                 handleMouseLeaveWrapper: () => void;
@@ -1306,6 +1308,7 @@ declare const _default: import("vue").DefineComponent<{
             containerScrollTop: number;
             syncUnifiedContainer: () => void;
             scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+            scrollBy: import("../../../_internal/scrollbar/src/ScrollBar").ScrollBy;
             sync: () => void;
             handleMouseEnterWrapper: () => void;
             handleMouseLeaveWrapper: () => void;
@@ -1321,6 +1324,7 @@ declare const _default: import("vue").DefineComponent<{
             containerScrollTop: number;
             syncUnifiedContainer: () => void;
             scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+            scrollBy: import("../../../_internal/scrollbar/src/ScrollBar").ScrollBy;
             sync: () => void;
             handleMouseEnterWrapper: () => void;
             handleMouseLeaveWrapper: () => void;

package/es/date-picker/src/panel/use-calendar.d.ts

@@ -46,6 +46,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;
@@ -61,6 +62,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;

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

@@ -31,6 +31,7 @@ declare const descriptionProps: {
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        titleTextColor: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -62,6 +63,7 @@ declare const descriptionProps: {
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        titleTextColor: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -93,6 +95,7 @@ declare const descriptionProps: {
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        titleTextColor: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -152,6 +155,7 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        titleTextColor: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -183,6 +187,7 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        titleTextColor: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -214,6 +219,7 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        titleTextColor: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -243,6 +249,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
+        '--n-title-text-color': string;
         '--n-th-padding': string;
         '--n-td-padding': string;
         '--n-font-size': string;
@@ -261,8 +268,11 @@ declare const _default: import("vue").DefineComponent<{
         '--n-border-color': string;
         '--n-border-color-modal': string;
         '--n-border-color-popover': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     compitableColumn: import("vue").ComputedRef<number>;
+    inlineThemeDisabled: boolean | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly title: StringConstructor;
     readonly column: {
@@ -294,6 +304,7 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        titleTextColor: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -325,6 +336,7 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        titleTextColor: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;
@@ -356,6 +368,7 @@ declare const _default: import("vue").DefineComponent<{
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
+        titleTextColor: string;
         thColor: string;
         thColorModal: string;
         thColorPopover: string;

package/es/descriptions/src/Descriptions.js

@@ -1,6 +1,6 @@
 import { computed, h, defineComponent } from 'vue';
 import { useCompitable } from 'vooks';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { warn, getSlot, getVNodeChildren, createKey, flatten } from '../../_utils';
 import { descriptionsLight } from '../styles';
 import { isDescriptionsItem } from './utils';
@@ -25,42 +25,58 @@ export default defineComponent({
     name: 'Descriptions',
     props: descriptionProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Descriptions', '-descriptions', style, descriptionsLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { size, bordered } = props;
+            const { common: { cubicBezierEaseInOut }, self: { titleTextColor, thColor, thColorModal, thColorPopover, thTextColor, thFontWeight, tdTextColor, tdColor, tdColorModal, tdColorPopover, borderColor, borderColorModal, borderColorPopover, borderRadius, lineHeight, [createKey('fontSize', size)]: fontSize, [createKey(bordered ? 'thPaddingBordered' : 'thPadding', size)]: thPadding, [createKey(bordered ? 'tdPaddingBordered' : 'tdPadding', size)]: tdPadding } } = themeRef.value;
+            return {
+                '--n-title-text-color': titleTextColor,
+                '--n-th-padding': thPadding,
+                '--n-td-padding': tdPadding,
+                '--n-font-size': fontSize,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-th-font-weight': thFontWeight,
+                '--n-line-height': lineHeight,
+                '--n-th-text-color': thTextColor,
+                '--n-td-text-color': tdTextColor,
+                '--n-th-color': thColor,
+                '--n-th-color-modal': thColorModal,
+                '--n-th-color-popover': thColorPopover,
+                '--n-td-color': tdColor,
+                '--n-td-color-modal': tdColorModal,
+                '--n-td-color-popover': tdColorPopover,
+                '--n-border-radius': borderRadius,
+                '--n-border-color': borderColor,
+                '--n-border-color-modal': borderColorModal,
+                '--n-border-color-popover': borderColorPopover
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('descriptions', computed(() => {
+                let hash = '';
+                const { size, bordered } = props;
+                if (bordered)
+                    hash += 'a';
+                hash += size[0];
+                return hash;
+            }), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: computed(() => {
-                const { size, bordered } = props;
-                const { common: { cubicBezierEaseInOut }, self: { thColor, thColorModal, thColorPopover, thTextColor, thFontWeight, tdTextColor, tdColor, tdColorModal, tdColorPopover, borderColor, borderColorModal, borderColorPopover, borderRadius, lineHeight, [createKey('fontSize', size)]: fontSize, [createKey(bordered ? 'thPaddingBordered' : 'thPadding', size)]: thPadding, [createKey(bordered ? 'tdPaddingBordered' : 'tdPadding', size)]: tdPadding } } = themeRef.value;
-                return {
-                    '--n-th-padding': thPadding,
-                    '--n-td-padding': tdPadding,
-                    '--n-font-size': fontSize,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-th-font-weight': thFontWeight,
-                    '--n-line-height': lineHeight,
-                    '--n-th-text-color': thTextColor,
-                    '--n-td-text-color': tdTextColor,
-                    '--n-th-color': thColor,
-                    '--n-th-color-modal': thColorModal,
-                    '--n-th-color-popover': thColorPopover,
-                    '--n-td-color': tdColor,
-                    '--n-td-color-modal': tdColorModal,
-                    '--n-td-color-popover': tdColorPopover,
-                    '--n-border-radius': borderRadius,
-                    '--n-border-color': borderColor,
-                    '--n-border-color-modal': borderColorModal,
-                    '--n-border-color-popover': borderColorPopover
-                };
-            }),
-            compitableColumn: useCompitable(props, ['columns', 'column'])
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
+            compitableColumn: useCompitable(props, ['columns', 'column']),
+            inlineThemeDisabled
         };
     },
     render() {
         const defaultSlots = this.$slots.default;
         const children = defaultSlots ? flatten(defaultSlots()) : [];
         const memorizedLength = children.length;
-        const { compitableColumn, labelPlacement, labelAlign, size, bordered, title, cssVars, mergedClsPrefix, separator } = this;
+        const { compitableColumn, labelPlacement, labelAlign, size, bordered, title, cssVars, mergedClsPrefix, separator, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         const filteredChildren = children.filter((child) => isDescriptionsItem(child));
         if (process.env.NODE_ENV !== 'production' && memorizedLength !== filteredChildren.length) {
             warn('descriptions', '`n-descriptions` only takes `n-descriptions-item` as children.');
@@ -125,6 +141,7 @@ export default defineComponent({
         const rows = itemState.rows.map((row) => (h("tr", { class: `${mergedClsPrefix}-descriptions-table-row` }, row)));
         return (h("div", { style: cssVars, class: [
                 `${mergedClsPrefix}-descriptions`,
+                this.themeClass,
                 `${mergedClsPrefix}-descriptions--${labelPlacement}-label-placement`,
                 `${mergedClsPrefix}-descriptions--${labelAlign}-label-align`,
                 `${mergedClsPrefix}-descriptions--${size}-size`,

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

@@ -17,6 +17,7 @@ import { c, cB, cE, cM, cNotM, insideModal, insidePopover } from '../../../_util
 // --n-border-color
 // --n-border-color-modal
 // --n-border-color-popover
+// --n-title-text-color
 
 export default c([cB('descriptions', {
   fontSize: 'var(--n-font-size)'
@@ -60,7 +61,7 @@ export default c([cB('descriptions', {
  transition: color .3s var(--n-bezier);
  line-height: var(--n-line-height);
  margin-bottom: 16px;
- color: var(--n-th-text-color);
+ color: var(--n-title-text-color);
  `), cB('descriptions-table-wrapper', `
  transition:
  background-color .3s var(--n-bezier),

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

@@ -5,6 +5,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     fontSizeSmall: string;
     fontSizeMedium: string;
     fontSizeLarge: string;
+    titleTextColor: string;
     thColor: string;
     thColorModal: string;
     thColorPopover: string;

package/es/descriptions/styles/light.js

@@ -2,11 +2,11 @@ import { composite } from 'seemly';
 import commonVariables from './_common';
 import { commonLight } from '../../_styles/common';
 export const self = (vars) => {
-    const { tableHeaderColor, textColor1, textColor2, cardColor, modalColor, popoverColor, dividerColor, borderRadius, fontWeightStrong, lineHeight, fontSizeSmall, fontSizeMedium, fontSizeLarge } = vars;
+    const { tableHeaderColor, textColor2, textColor1, cardColor, modalColor, popoverColor, dividerColor, borderRadius, fontWeightStrong, lineHeight, fontSizeSmall, fontSizeMedium, fontSizeLarge } = vars;
     return Object.assign(Object.assign({}, commonVariables), { lineHeight,
         fontSizeSmall,
         fontSizeMedium,
-        fontSizeLarge, thColor: composite(cardColor, tableHeaderColor), thColorModal: composite(modalColor, tableHeaderColor), thColorPopover: composite(popoverColor, tableHeaderColor), thTextColor: textColor1, thFontWeight: fontWeightStrong, tdTextColor: textColor2, tdColor: cardColor, tdColorModal: modalColor, tdColorPopover: popoverColor, borderColor: composite(cardColor, dividerColor), borderColorModal: composite(modalColor, dividerColor), borderColorPopover: composite(popoverColor, dividerColor), borderRadius: borderRadius });
+        fontSizeLarge, titleTextColor: textColor1, thColor: composite(cardColor, tableHeaderColor), thColorModal: composite(modalColor, tableHeaderColor), thColorPopover: composite(popoverColor, tableHeaderColor), thTextColor: textColor1, thFontWeight: fontWeightStrong, tdTextColor: textColor2, tdColor: cardColor, tdColorModal: modalColor, tdColorPopover: popoverColor, borderColor: composite(cardColor, dividerColor), borderColorModal: composite(modalColor, dividerColor), borderColorPopover: composite(popoverColor, dividerColor), borderRadius: borderRadius });
 };
 const descriptionsLight = {
     name: 'Descriptions',

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

@@ -1096,7 +1096,9 @@ export declare const NDialog: import("vue").DefineComponent<{
         '--n-title-font-weight': string;
         '--n-title-text-color': string;
         '--n-action-space': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     icon: import("vue").PropType<() => import("vue").VNodeChild>;
     type: {

package/es/dialog/src/Dialog.js

@@ -1,12 +1,12 @@
 import { h, defineComponent, computed } from 'vue';
 import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from '../../_internal/icons';
-import { useConfig, useTheme } from '../../_mixins';
-import { render, createKey } from '../../_utils';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { render, createKey, resolveWrappedSlot, resolveSlot } from '../../_utils';
 import { NBaseIcon, NBaseClose } from '../../_internal';
 import { NButton } from '../../button';
 import { dialogLight } from '../styles';
-import style from './styles/index.cssr';
 import { dialogProps } from './dialogProps';
+import style from './styles/index.cssr';
 const infoIcon = h(InfoIcon, null);
 const iconMap = {
     default: infoIcon,
@@ -23,11 +23,13 @@ export const NDialog = defineComponent({
     ],
     props: Object.assign(Object.assign({}, useTheme.props), dialogProps),
     setup(props) {
-        const { NConfigProvider, mergedClsPrefixRef } = useConfig(props);
+        const { mergedComponentPropsRef, mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const mergedIconPlacementRef = computed(() => {
-            var _a, _b, _c;
+            var _a, _b;
             const { iconPlacement } = props;
-            return ((_c = iconPlacement !== null && iconPlacement !== void 0 ? iconPlacement : (_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Dialog) === null || _b === void 0 ? void 0 : _b.iconPlacement) !== null && _c !== void 0 ? _c : 'left');
+            return (iconPlacement ||
+                ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Dialog) === null || _b === void 0 ? void 0 : _b.iconPlacement) ||
+                'left');
         });
         function handlePositiveClick(e) {
             const { onPositiveClick } = props;
@@ -45,6 +47,37 @@ export const NDialog = defineComponent({
                 onClose();
         }
         const themeRef = useTheme('Dialog', '-dialog', style, dialogLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { type } = props;
+            const iconPlacement = mergedIconPlacementRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { fontSize, lineHeight, border, titleTextColor, textColor, color, closeColor, closeColorHover, closeColorPressed, borderRadius, titleFontWeight, titleFontSize, padding, iconSize, actionSpace, contentMargin, closeSize, [iconPlacement === 'top' ? 'iconMarginIconTop' : 'iconMargin']: iconMargin, [iconPlacement === 'top' ? 'closeMarginIconTop' : 'closeMargin']: closeMargin, [createKey('iconColor', type)]: iconColor } } = themeRef.value;
+            return {
+                '--n-font-size': fontSize,
+                '--n-icon-color': iconColor,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-close-margin': closeMargin,
+                '--n-icon-margin': iconMargin,
+                '--n-icon-size': iconSize,
+                '--n-close-size': closeSize,
+                '--n-close-color': closeColor,
+                '--n-close-color-hover': closeColorHover,
+                '--n-close-color-pressed': closeColorPressed,
+                '--n-color': color,
+                '--n-text-color': textColor,
+                '--n-border-radius': borderRadius,
+                '--n-padding': padding,
+                '--n-line-height': lineHeight,
+                '--n-border': border,
+                '--n-content-margin': contentMargin,
+                '--n-title-font-size': titleFontSize,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-title-text-color': titleTextColor,
+                '--n-action-space': actionSpace
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('dialog', computed(() => `${props.type[0]}${mergedIconPlacementRef.value[0]}`), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedIconPlacement: mergedIconPlacementRef,
@@ -52,65 +85,33 @@ export const NDialog = defineComponent({
             handlePositiveClick,
             handleNegativeClick,
             handleCloseClick,
-            cssVars: computed(() => {
-                const { type, iconPlacement } = props;
-                const { common: { cubicBezierEaseInOut }, self: { fontSize, lineHeight, border, titleTextColor, textColor, color, closeColor, closeColorHover, closeColorPressed, borderRadius, titleFontWeight, titleFontSize, padding, iconSize, actionSpace, contentMargin, closeSize, [iconPlacement === 'top' ? 'iconMarginIconTop' : 'iconMargin']: iconMargin, [iconPlacement === 'top' ? 'closeMarginIconTop' : 'closeMargin']: closeMargin, [createKey('iconColor', type)]: iconColor } } = themeRef.value;
-                return {
-                    '--n-font-size': fontSize,
-                    '--n-icon-color': iconColor,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-close-margin': closeMargin,
-                    '--n-icon-margin': iconMargin,
-                    '--n-icon-size': iconSize,
-                    '--n-close-size': closeSize,
-                    '--n-close-color': closeColor,
-                    '--n-close-color-hover': closeColorHover,
-                    '--n-close-color-pressed': closeColorPressed,
-                    '--n-color': color,
-                    '--n-text-color': textColor,
-                    '--n-border-radius': borderRadius,
-                    '--n-padding': padding,
-                    '--n-line-height': lineHeight,
-                    '--n-border': border,
-                    '--n-content-margin': contentMargin,
-                    '--n-title-font-size': titleFontSize,
-                    '--n-title-font-weight': titleFontWeight,
-                    '--n-title-text-color': titleTextColor,
-                    '--n-action-space': actionSpace
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
-        const { $slots, bordered, mergedIconPlacement, cssVars, closable, showIcon, title, content, action, negativeText, positiveText, handlePositiveClick, handleNegativeClick, mergedTheme, loading, type, mergedClsPrefix } = this;
+        var _a;
+        const { bordered, mergedIconPlacement, cssVars, closable, showIcon, title, content, action, negativeText, positiveText, handlePositiveClick, handleNegativeClick, mergedTheme, loading, type, mergedClsPrefix } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        const icon = showIcon ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-dialog__icon` }, {
+            default: () => resolveWrappedSlot(this.$slots.icon, (children) => children || (this.icon ? render(this.icon) : iconMap[this.type]))
+        })) : null;
         return (h("div", { class: [
                 `${mergedClsPrefix}-dialog`,
+                this.themeClass,
                 `${mergedClsPrefix}-dialog--icon-${mergedIconPlacement}`,
                 bordered && `${mergedClsPrefix}-dialog--bordered`
             ], style: cssVars, role: "dialog" },
             closable ? (h(NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-dialog__close`, onClick: this.handleCloseClick })) : null,
-            showIcon && mergedIconPlacement === 'top' ? (h("div", { class: `${mergedClsPrefix}-dialog-icon-container` },
-                h(NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-dialog__icon` }, {
-                    default: () => $slots.icon
-                        ? $slots.icon()
-                        : this.icon
-                            ? render(this.icon)
-                            : iconMap[this.type]
-                }))) : null,
+            showIcon && mergedIconPlacement === 'top' ? (h("div", { class: `${mergedClsPrefix}-dialog-icon-container` }, icon)) : null,
             h("div", { class: `${mergedClsPrefix}-dialog__title` },
-                showIcon && mergedIconPlacement === 'left' ? (h(NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-dialog__icon` }, {
-                    default: () => $slots.icon
-                        ? $slots.icon()
-                        : this.icon
-                            ? render(this.icon)
-                            : iconMap[this.type]
-                })) : null,
-                $slots.header ? $slots.header() : render(title)),
-            h("div", { class: `${mergedClsPrefix}-dialog__content` }, $slots.default ? $slots.default() : render(content)),
-            $slots.action || positiveText || negativeText || action ? (h("div", { class: `${mergedClsPrefix}-dialog__action` }, $slots.action
-                ? $slots.action()
-                : action
-                    ? render(action)
+                showIcon && mergedIconPlacement === 'left' ? icon : null,
+                resolveSlot(this.$slots.header, () => [render(title)])),
+            h("div", { class: `${mergedClsPrefix}-dialog__content` }, resolveSlot(this.$slots.default, () => [render(content)])),
+            resolveWrappedSlot(this.$slots.action, (children) => children || positiveText || negativeText || action ? (h("div", { class: `${mergedClsPrefix}-dialog__action` }, children ||
+                (action
+                    ? [render(action)]
                     : [
                         this.negativeText && (h(NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, ghost: true, size: "small", onClick: handleNegativeClick }, {
                             default: () => render(this.negativeText)
@@ -118,6 +119,6 @@ export const NDialog = defineComponent({
                         this.positiveText && (h(NButton, { theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, disabled: loading, loading: loading, size: "small", type: type === 'default' ? 'primary' : type, onClick: handlePositiveClick }, {
                             default: () => render(this.positiveText)
                         }))
-                    ])) : null));
+                    ]))) : null)));
     }
 });

package/es/dialog/src/DialogEnvironment.js

@@ -90,7 +90,7 @@ export const NDialogEnvironment = defineComponent({
     },
     render() {
         const { handlePositiveClick, handleUpdateShow, handleNegativeClick, handleCloseClick, handleAfterLeave, handleMaskClick, to, maskClosable, show } = this;
-        return (h(NModal, { show: show, onUpdateShow: handleUpdateShow, onMaskClick: handleMaskClick, appear: true, dialog: true, to: to, maskClosable: maskClosable, onAfterLeave: handleAfterLeave }, {
+        return (h(NModal, { show: show, onUpdateShow: handleUpdateShow, onMaskClick: handleMaskClick, to: to, maskClosable: maskClosable, onAfterLeave: handleAfterLeave, internalAppear: true, internalDialog: true }, {
             default: () => (h(NDialog, Object.assign({}, keep(this.$props, dialogPropKeys), { style: this.internalStyle, onClose: handleCloseClick, onNegativeClick: handleNegativeClick, onPositiveClick: handlePositiveClick })))
         }));
     }