naive-ui 2.25.2 → 2.25.5

package/es/code/src/Code.js

@@ -1,5 +1,5 @@
 import { defineComponent, h, toRef, watch, onMounted, ref, computed } from 'vue';
-import { useTheme, useHljs, useConfig } from '../../_mixins';
+import { useTheme, useHljs, useConfig, useThemeClass } from '../../_mixins';
 import { codeLight } from '../styles';
 import style from './styles/index.cssr';
 const codeProps = Object.assign(Object.assign({}, useTheme.props), { language: String, code: {
@@ -16,7 +16,7 @@ export default defineComponent({
     props: codeProps,
     setup(props, { slots }) {
         const { internalNoHighlight } = props;
-        const { mergedClsPrefixRef } = useConfig();
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig();
         const codeRef = ref(null);
         const hljsRef = internalNoHighlight ? { value: undefined } : useHljs(props);
         const createCodeHtml = (language, code, trim) => {
@@ -69,39 +69,45 @@ export default defineComponent({
         if (!internalNoHighlight)
             watch(hljsRef, setCode);
         const themeRef = useTheme('Code', '-code', style, codeLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseInOut, fontFamilyMono }, self: { textColor, fontSize, fontWeightStrong, 
+            // extracted from hljs atom-one-light.scss
+            'mono-3': $1, 'hue-1': $2, 'hue-2': $3, 'hue-3': $4, 'hue-4': $5, 'hue-5': $6, 'hue-5-2': $7, 'hue-6': $8, 'hue-6-2': $9 } } = themeRef.value;
+            const { internalFontSize } = props;
+            return {
+                '--n-font-size': internalFontSize ? `${internalFontSize}px` : fontSize,
+                '--n-font-family': fontFamilyMono,
+                '--n-font-weight-strong': fontWeightStrong,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-text-color': textColor,
+                '--n-mono-3': $1,
+                '--n-hue-1': $2,
+                '--n-hue-2': $3,
+                '--n-hue-3': $4,
+                '--n-hue-4': $5,
+                '--n-hue-5': $6,
+                '--n-hue-5-2': $7,
+                '--n-hue-6': $8,
+                '--n-hue-6-2': $9
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('code', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             codeRef,
-            cssVars: computed(() => {
-                const { common: { cubicBezierEaseInOut, fontFamilyMono }, self: { textColor, fontSize, fontWeightStrong, 
-                // extracted from hljs atom-one-light.scss
-                'mono-3': $1, 'hue-1': $2, 'hue-2': $3, 'hue-3': $4, 'hue-4': $5, 'hue-5': $6, 'hue-5-2': $7, 'hue-6': $8, 'hue-6-2': $9 } } = themeRef.value;
-                const { internalFontSize } = props;
-                return {
-                    '--n-font-size': internalFontSize
-                        ? `${internalFontSize}px`
-                        : fontSize,
-                    '--n-font-family': fontFamilyMono,
-                    '--n-font-weight-strong': fontWeightStrong,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-text-color': textColor,
-                    '--n-mono-3': $1,
-                    '--n-hue-1': $2,
-                    '--n-hue-2': $3,
-                    '--n-hue-3': $4,
-                    '--n-hue-4': $5,
-                    '--n-hue-5': $6,
-                    '--n-hue-5-2': $7,
-                    '--n-hue-6': $8,
-                    '--n-hue-6-2': $9
-                };
-            })
+            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 { mergedClsPrefix, wordWrap } = this;
+        const { mergedClsPrefix, wordWrap, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("code", { class: [
                 `${mergedClsPrefix}-code`,
+                this.themeClass,
                 wordWrap && `${mergedClsPrefix}-code--word-wrap`
             ], style: this.cssVars, ref: "codeRef" }, this.$slots));
     }

package/es/collapse/src/Collapse.d.ts

@@ -247,7 +247,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-title-text-color': string;
         '--n-title-font-weight': string;
         '--n-arrow-color': string;
-    }>;
+    }> | undefined;
+    themeClass: 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<ExtractPropTypes<{
     readonly defaultExpandedNames: {
         readonly type: PropType<string | number | (string | number)[] | null>;

package/es/collapse/src/Collapse.js

@@ -1,6 +1,6 @@
 import { computed, h, defineComponent, provide, ref } from 'vue';
 import { useMergedState } from 'vooks';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { call, createInjectionKey, warn } from '../../_utils';
 import { collapseLight } from '../styles';
 import style from './styles/index.cssr';
@@ -33,7 +33,7 @@ export default defineComponent({
     name: 'Collapse',
     props: collapseProps,
     setup(props, { slots }) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const uncontrolledExpandedNamesRef = ref(props.defaultExpandedNames);
         const controlledExpandedNamesRef = computed(() => props.expandedNames);
         const mergedExpandedNamesRef = useMergedState(controlledExpandedNamesRef, uncontrolledExpandedNamesRef);
@@ -98,25 +98,33 @@ export default defineComponent({
             slots,
             toggleItem
         });
+        const cssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titleTextColor, textColor, arrowColor, fontSize, titleFontSize } } = themeRef.value;
+            return {
+                '--n-font-size': fontSize,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-text-color': textColor,
+                '--n-divider-color': dividerColor,
+                '--n-title-font-size': titleFontSize,
+                '--n-title-text-color': titleTextColor,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-arrow-color': arrowColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('collapse', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedTheme: themeRef,
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: computed(() => {
-                const { common: { cubicBezierEaseInOut }, self: { titleFontWeight, dividerColor, titleTextColor, textColor, arrowColor, fontSize, titleFontSize } } = themeRef.value;
-                return {
-                    '--n-font-size': fontSize,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-text-color': textColor,
-                    '--n-divider-color': dividerColor,
-                    '--n-title-font-size': titleFontSize,
-                    '--n-title-text-color': titleTextColor,
-                    '--n-title-font-weight': titleFontWeight,
-                    '--n-arrow-color': arrowColor
-                };
-            })
+            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() {
-        return (h("div", { class: `${this.mergedClsPrefix}-collapse`, style: this.cssVars }, this.$slots));
+        var _a;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        return (h("div", { class: [`${this.mergedClsPrefix}-collapse`, this.themeClass], style: this.cssVars }, this.$slots));
     }
 });

package/es/color-picker/src/ColorPicker.d.ts

@@ -1801,7 +1801,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-border-radius': string;
         '--n-height': string;
         '--n-divider-color': string;
-    }>;
+    }> | undefined;
+    themeClass: 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<{
     readonly value: StringConstructor;
     readonly show: {

package/es/color-picker/src/ColorPicker.js

@@ -4,7 +4,7 @@ import { useIsMounted, useMergedState } from 'vooks';
 import { VBinder, VFollower, VTarget } from 'vueuc';
 import { clickoutside } from 'vdirs';
 import { colorPickerLight } from '../styles';
-import { useFormItem, useConfig, useTheme, useLocale } from '../../_mixins';
+import { useFormItem, useConfig, useTheme, useLocale, useThemeClass } from '../../_mixins';
 import { call, createKey, useAdjustedTo } from '../../_utils';
 import { NButton } from '../../button';
 import HueSlider from './HueSlider';
@@ -49,7 +49,7 @@ export default defineComponent({
         const formItem = useFormItem(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
         const { localeRef } = useLocale('global');
-        const { mergedClsPrefixRef, namespaceRef } = useConfig(props);
+        const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('ColorPicker', '-color-picker', style, colorPickerLight, props, mergedClsPrefixRef);
         provide(colorPickerInjectionKey, {
             themeRef,
@@ -352,6 +352,11 @@ export default defineComponent({
                 '--n-divider-color': dividerColor
             };
         });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('color-picker', computed(() => {
+                return mergedSizeRef.value[0];
+            }), cssVarsRef, props)
+            : undefined;
         function renderPanel() {
             var _a;
             const { value: rgba } = rgbaRef;
@@ -359,9 +364,14 @@ export default defineComponent({
             const { internalActions, modes, actions } = props;
             const { value: mergedTheme } = themeRef;
             const { value: mergedClsPrefix } = mergedClsPrefixRef;
-            return (h("div", { class: `${mergedClsPrefix}-color-picker-panel`, onDragstart: (e) => {
+            return (h("div", { class: [
+                    `${mergedClsPrefix}-color-picker-panel`,
+                    themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value
+                ], onDragstart: (e) => {
                     e.preventDefault();
-                }, style: cssVarsRef.value },
+                }, style: inlineThemeDisabled
+                    ? undefined
+                    : cssVarsRef.value },
                 h("div", { class: `${mergedClsPrefix}-color-picker-control` },
                     h(Pallete, { clsPrefix: mergedClsPrefix, rgba: rgba, displayedHue: displayedHue, displayedSv: displayedSvRef.value, onUpdateSV: handleUpdateSv, onComplete: handleComplete }),
                     h("div", { class: `${mergedClsPrefix}-color-picker-preview` },
@@ -397,12 +407,15 @@ export default defineComponent({
                 doUpdateShow(false);
             },
             renderPanel,
-            cssVars: cssVarsRef
+            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, mergedClsPrefix } = this;
-        return (h("div", { class: `${mergedClsPrefix}-color-picker`, ref: "selfRef", style: this.cssVars },
+        const { $slots, mergedClsPrefix, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return (h("div", { class: [this.themeClass, `${mergedClsPrefix}-color-picker`], ref: "selfRef", style: this.cssVars },
             h(VBinder, null, {
                 default: () => [
                     h(VTarget, null, {

package/es/components.d.ts

@@ -81,3 +81,4 @@ export * from './tree';
 export * from './tree-select';
 export * from './typography';
 export * from './upload';
+export * from './watermark';

package/es/components.js

@@ -81,3 +81,4 @@ export * from './tree';
 export * from './tree-select';
 export * from './typography';
 export * from './upload';
+export * from './watermark';

package/es/config-provider/src/ConfigProvider.d.ts

@@ -132,7 +132,7 @@ export declare const configProviderProps: {
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
     readonly breakpoints: PropType<Breakpoints>;
-    readonly disableInlineTheme: {
+    readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
         readonly default: undefined;
     };
@@ -271,7 +271,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
     readonly breakpoints: PropType<Breakpoints>;
-    readonly disableInlineTheme: {
+    readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
         readonly default: undefined;
     };
@@ -414,7 +414,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly componentOptions: PropType<GlobalComponentConfig>;
     readonly icons: PropType<GlobalIconConfig>;
     readonly breakpoints: PropType<Breakpoints>;
-    readonly disableInlineTheme: {
+    readonly inlineThemeDisabled: {
         readonly type: BooleanConstructor;
         readonly default: undefined;
     };
@@ -428,6 +428,6 @@ declare const _default: import("vue").DefineComponent<{
     tag: string;
     as: string | undefined;
     bordered: boolean | undefined;
-    disableInlineTheme: boolean;
+    inlineThemeDisabled: boolean;
 }>;
 export default _default;

package/es/config-provider/src/ConfigProvider.js

@@ -26,7 +26,7 @@ export const configProviderProps = {
     componentOptions: Object,
     icons: Object,
     breakpoints: Object,
-    disableInlineTheme: {
+    inlineThemeDisabled: {
         type: Boolean,
         default: undefined
     },
@@ -120,7 +120,7 @@ export default defineComponent({
         const mergedBreakpointsRef = computed(() => {
             return props.breakpoints || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedBreakpointsRef.value);
         });
-        const disableInlineTheme = props.disableInlineTheme || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.disableInlineTheme);
+        const inlineThemeDisabled = props.inlineThemeDisabled || (NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.inlineThemeDisabled);
         const mergedThemeHashRef = computed(() => {
             const { value: theme } = mergedThemeRef;
             const { value: mergedThemeOverrides } = mergedThemeOverridesRef;
@@ -170,7 +170,7 @@ export default defineComponent({
             }),
             mergedThemeRef,
             mergedThemeOverridesRef,
-            disableInlineTheme: disableInlineTheme || false
+            inlineThemeDisabled: inlineThemeDisabled || false
         });
         return {
             mergedClsPrefix: mergedClsPrefixRef,

package/es/config-provider/src/internal-interface.d.ts

@@ -74,6 +74,7 @@ import type { TreeTheme } from '../../tree/styles';
 import type { TreeSelectTheme } from '../../tree-select/styles';
 import type { TypographyTheme } from '../../typography/styles';
 import type { UploadTheme } from '../../upload/styles';
+import type { WatermarkTheme } from '../../watermark/styles';
 import type { InternalSelectMenuTheme } from '../../_internal/select-menu/styles';
 import type { InternalSelectionTheme } from '../../_internal/selection/styles';
 import type { NDateLocale, NLocale } from '../../locales';
@@ -163,6 +164,7 @@ export interface GlobalThemeWithoutCommon {
     TreeSelect?: TreeSelectTheme;
     Typography?: TypographyTheme;
     Upload?: UploadTheme;
+    Watermark?: WatermarkTheme;
     InternalSelectMenu?: InternalSelectMenuTheme;
     InternalSelection?: InternalSelectionTheme;
 }
@@ -229,5 +231,5 @@ export interface ConfigProviderInjection {
     mergedThemeOverridesRef: Ref<GlobalThemeOverrides | undefined>;
     mergedRtlRef: Ref<RtlEnabledState | undefined>;
     mergedThemeHashRef: Ref<string>;
-    disableInlineTheme: boolean;
+    inlineThemeDisabled: boolean;
 }

package/es/countdown/src/Countdown.d.ts

@@ -1,7 +1,6 @@
 import { PropType, VNodeChild } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 declare const countdownProps: {
-    label: StringConstructor;
     duration: {
         type: NumberConstructor;
         default: number;
@@ -24,7 +23,6 @@ declare const countdownProps: {
 };
 export declare type CountdownProps = ExtractPublicPropTypes<typeof countdownProps>;
 declare const _default: import("vue").DefineComponent<{
-    label: StringConstructor;
     duration: {
         type: NumberConstructor;
         default: number;
@@ -45,7 +43,6 @@ declare const _default: import("vue").DefineComponent<{
     }) => VNodeChild>;
     onFinish: PropType<() => void>;
 }, () => VNodeChild, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    label: StringConstructor;
     duration: {
         type: NumberConstructor;
         default: number;

package/es/countdown/src/Countdown.js

@@ -1,6 +1,5 @@
 import { defineComponent, onMounted, onBeforeUnmount, watchEffect, reactive } from 'vue';
 const countdownProps = {
-    label: String,
     duration: {
         type: Number,
         default: 0

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

@@ -3782,47 +3782,6 @@ declare const _default: import("vue").DefineComponent<{
         }>;
     }>>>;
 }, {
-    cssVars: import("vue").ComputedRef<{
-        '--n-font-size': string;
-        '--n-th-padding': string;
-        '--n-td-padding': string;
-        '--n-bezier': string;
-        '--n-border-radius': string;
-        '--n-line-height': string;
-        '--n-border-color': string;
-        '--n-border-color-modal': string;
-        '--n-border-color-popover': string;
-        '--n-th-color': string;
-        '--n-th-color-hover': string;
-        '--n-th-color-modal': string;
-        '--n-th-color-hover-modal': string;
-        '--n-th-color-popover': string;
-        '--n-th-color-hover-popover': string;
-        '--n-td-color': string;
-        '--n-td-color-hover': string;
-        '--n-td-color-modal': string;
-        '--n-td-color-hover-modal': string;
-        '--n-n-td-color-popover': string;
-        '--n-td-color-hover-popover': string;
-        '--n-th-text-color': string;
-        '--n-td-text-color': string;
-        '--n-th-font-weight': string;
-        '--n-th-button-color-hover': string;
-        '--n-th-icon-color': string;
-        '--n-th-icon-color-active': string;
-        '--n-filter-size': string;
-        '--n-pagination-margin': string;
-        '--n-empty-padding': string;
-        '--n-box-shadow-before': string;
-        '--n-box-shadow-after': string;
-        '--n-sorter-size': string;
-        '--n-loading-size': string;
-        '--n-loading-color': string;
-        '--n-opacity-loading': string;
-        '--n-td-color-striped': string;
-        '--n-td-color-striped-modal': string;
-        '--n-td-color-striped-popover': string;
-    }>;
     filter: (filters: import("./interface").FilterState | null) => void;
     filters: (filters: import("./interface").FilterState | null) => void;
     clearFilters: () => void;
@@ -4793,6 +4752,49 @@ declare const _default: import("vue").DefineComponent<{
     mergedBordered: import("vue").ComputedRef<boolean>;
     mergedBottomBordered: import("vue").ComputedRef<boolean>;
     mergedPagination: import("vue").ComputedRef<PaginationProps>;
+    cssVars: import("vue").ComputedRef<{
+        '--n-font-size': string;
+        '--n-th-padding': string;
+        '--n-td-padding': string;
+        '--n-bezier': string;
+        '--n-border-radius': string;
+        '--n-line-height': string;
+        '--n-border-color': string;
+        '--n-border-color-modal': string;
+        '--n-border-color-popover': string;
+        '--n-th-color': string;
+        '--n-th-color-hover': string;
+        '--n-th-color-modal': string;
+        '--n-th-color-hover-modal': string;
+        '--n-th-color-popover': string;
+        '--n-th-color-hover-popover': string;
+        '--n-td-color': string;
+        '--n-td-color-hover': string;
+        '--n-td-color-modal': string;
+        '--n-td-color-hover-modal': string;
+        '--n-td-color-popover': string;
+        '--n-td-color-hover-popover': string;
+        '--n-th-text-color': string;
+        '--n-td-text-color': string;
+        '--n-th-font-weight': string;
+        '--n-th-button-color-hover': string;
+        '--n-th-icon-color': string;
+        '--n-th-icon-color-active': string;
+        '--n-filter-size': string;
+        '--n-pagination-margin': string;
+        '--n-empty-padding': string;
+        '--n-box-shadow-before': string;
+        '--n-box-shadow-after': string;
+        '--n-sorter-size': string;
+        '--n-loading-size': string;
+        '--n-loading-color': string;
+        '--n-opacity-loading': string;
+        '--n-td-color-striped': string;
+        '--n-td-color-striped-modal': string;
+        '--n-td-color-striped-popover': 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<ExtractPropTypes<{
     readonly pagination: {
         readonly type: PropType<false | PaginationProps>;

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

@@ -1,6 +1,6 @@
 import { h, computed, defineComponent, ref, provide, toRef, Transition, watchEffect } from 'vue';
 import { createId } from 'seemly';
-import { useConfig, useLocale, useTheme } from '../../_mixins';
+import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins';
 import { NBaseLoading } from '../../_internal';
 import { NPagination } from '../../pagination';
 import { createKey, warnOnce } from '../../_utils';
@@ -81,7 +81,7 @@ export default defineComponent({
                 }
             });
         }
-        const { mergedBorderedRef, mergedClsPrefixRef } = useConfig(props);
+        const { mergedBorderedRef, mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const mergedBottomBorderedRef = computed(() => {
             const { bottomBordered } = props;
             // do not add bottom bordered class if bordered is true
@@ -205,56 +205,62 @@ export default defineComponent({
             sort,
             clearFilter
         };
-        return Object.assign(Object.assign({ mainTableInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, paginatedData: paginatedDataRef, mergedBordered: mergedBorderedRef, mergedBottomBordered: mergedBottomBorderedRef, mergedPagination: mergedPaginationRef }, exposedMethods), { cssVars: computed(() => {
-                const { size } = props;
-                const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, thColor, thColorHover, tdColor, tdTextColor, thTextColor, thFontWeight, thButtonColorHover, thIconColor, thIconColorActive, filterSize, borderRadius, lineHeight, tdColorModal, thColorModal, borderColorModal, thColorHoverModal, tdColorHoverModal, borderColorPopover, thColorPopover, tdColorPopover, tdColorHoverPopover, thColorHoverPopover, paginationMargin, emptyPadding, boxShadowAfter, boxShadowBefore, sorterSize, loadingColor, loadingSize, opacityLoading, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, [createKey('fontSize', size)]: fontSize, [createKey('thPadding', size)]: thPadding, [createKey('tdPadding', size)]: tdPadding } } = themeRef.value;
-                return {
-                    '--n-font-size': fontSize,
-                    '--n-th-padding': thPadding,
-                    '--n-td-padding': tdPadding,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-border-radius': borderRadius,
-                    '--n-line-height': lineHeight,
-                    '--n-border-color': borderColor,
-                    '--n-border-color-modal': borderColorModal,
-                    '--n-border-color-popover': borderColorPopover,
-                    '--n-th-color': thColor,
-                    '--n-th-color-hover': thColorHover,
-                    '--n-th-color-modal': thColorModal,
-                    '--n-th-color-hover-modal': thColorHoverModal,
-                    '--n-th-color-popover': thColorPopover,
-                    '--n-th-color-hover-popover': thColorHoverPopover,
-                    '--n-td-color': tdColor,
-                    '--n-td-color-hover': tdColorHover,
-                    '--n-td-color-modal': tdColorModal,
-                    '--n-td-color-hover-modal': tdColorHoverModal,
-                    '--n-n-td-color-popover': tdColorPopover,
-                    '--n-td-color-hover-popover': tdColorHoverPopover,
-                    '--n-th-text-color': thTextColor,
-                    '--n-td-text-color': tdTextColor,
-                    '--n-th-font-weight': thFontWeight,
-                    '--n-th-button-color-hover': thButtonColorHover,
-                    '--n-th-icon-color': thIconColor,
-                    '--n-th-icon-color-active': thIconColorActive,
-                    '--n-filter-size': filterSize,
-                    '--n-pagination-margin': paginationMargin,
-                    '--n-empty-padding': emptyPadding,
-                    '--n-box-shadow-before': boxShadowBefore,
-                    '--n-box-shadow-after': boxShadowAfter,
-                    '--n-sorter-size': sorterSize,
-                    '--n-loading-size': loadingSize,
-                    '--n-loading-color': loadingColor,
-                    '--n-opacity-loading': opacityLoading,
-                    '--n-td-color-striped': tdColorStriped,
-                    '--n-td-color-striped-modal': tdColorStripedModal,
-                    '--n-td-color-striped-popover': tdColorStripedPopover
-                };
-            }) });
+        const cssVarsRef = computed(() => {
+            const { size } = props;
+            const { common: { cubicBezierEaseInOut }, self: { borderColor, tdColorHover, thColor, thColorHover, tdColor, tdTextColor, thTextColor, thFontWeight, thButtonColorHover, thIconColor, thIconColorActive, filterSize, borderRadius, lineHeight, tdColorModal, thColorModal, borderColorModal, thColorHoverModal, tdColorHoverModal, borderColorPopover, thColorPopover, tdColorPopover, tdColorHoverPopover, thColorHoverPopover, paginationMargin, emptyPadding, boxShadowAfter, boxShadowBefore, sorterSize, loadingColor, loadingSize, opacityLoading, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, [createKey('fontSize', size)]: fontSize, [createKey('thPadding', size)]: thPadding, [createKey('tdPadding', size)]: tdPadding } } = themeRef.value;
+            return {
+                '--n-font-size': fontSize,
+                '--n-th-padding': thPadding,
+                '--n-td-padding': tdPadding,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-radius': borderRadius,
+                '--n-line-height': lineHeight,
+                '--n-border-color': borderColor,
+                '--n-border-color-modal': borderColorModal,
+                '--n-border-color-popover': borderColorPopover,
+                '--n-th-color': thColor,
+                '--n-th-color-hover': thColorHover,
+                '--n-th-color-modal': thColorModal,
+                '--n-th-color-hover-modal': thColorHoverModal,
+                '--n-th-color-popover': thColorPopover,
+                '--n-th-color-hover-popover': thColorHoverPopover,
+                '--n-td-color': tdColor,
+                '--n-td-color-hover': tdColorHover,
+                '--n-td-color-modal': tdColorModal,
+                '--n-td-color-hover-modal': tdColorHoverModal,
+                '--n-td-color-popover': tdColorPopover,
+                '--n-td-color-hover-popover': tdColorHoverPopover,
+                '--n-th-text-color': thTextColor,
+                '--n-td-text-color': tdTextColor,
+                '--n-th-font-weight': thFontWeight,
+                '--n-th-button-color-hover': thButtonColorHover,
+                '--n-th-icon-color': thIconColor,
+                '--n-th-icon-color-active': thIconColorActive,
+                '--n-filter-size': filterSize,
+                '--n-pagination-margin': paginationMargin,
+                '--n-empty-padding': emptyPadding,
+                '--n-box-shadow-before': boxShadowBefore,
+                '--n-box-shadow-after': boxShadowAfter,
+                '--n-sorter-size': sorterSize,
+                '--n-loading-size': loadingSize,
+                '--n-loading-color': loadingColor,
+                '--n-opacity-loading': opacityLoading,
+                '--n-td-color-striped': tdColorStriped,
+                '--n-td-color-striped-modal': tdColorStripedModal,
+                '--n-td-color-striped-popover': tdColorStripedPopover
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('data-table', computed(() => props.size[0]), cssVarsRef, props)
+            : undefined;
+        return Object.assign({ mainTableInstRef, mergedClsPrefix: mergedClsPrefixRef, mergedTheme: themeRef, paginatedData: paginatedDataRef, mergedBordered: mergedBorderedRef, mergedBottomBordered: mergedBottomBorderedRef, mergedPagination: mergedPaginationRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedMethods);
     },
     render() {
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, themeClass, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("div", { class: [
                 `${mergedClsPrefix}-data-table`,
+                themeClass,
                 {
                     [`${mergedClsPrefix}-data-table--bordered`]: this.mergedBordered,
                     [`${mergedClsPrefix}-data-table--bottom-bordered`]: this.mergedBottomBordered,

package/es/data-table/src/HeaderButton/FilterButton.js

@@ -24,7 +24,7 @@ export default defineComponent({
         }
     },
     setup(props) {
-        const { NConfigProvider } = useConfig();
+        const { mergedComponentPropsRef } = useConfig();
         const { mergedThemeRef, mergedClsPrefixRef, mergedFilterStateRef, filterMenuCssVarsRef, doUpdateFilters
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
          } = inject(dataTableInjectionKey);
@@ -53,7 +53,8 @@ export default defineComponent({
         });
         const mergedRenderFilterRef = computed(() => {
             var _a, _b;
-            return (((_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DataTable) === null || _b === void 0 ? void 0 : _b.renderFilter) || props.column.renderFilter);
+            return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DataTable) === null || _b === void 0 ? void 0 : _b.renderFilter) ||
+                props.column.renderFilter);
         });
         function handleFilterChange(mergedFilterValue) {
             const nextFilterState = createFilterState(filterStateRef.value, props.column.key, mergedFilterValue);

package/es/data-table/src/HeaderButton/SortButton.js

@@ -13,7 +13,7 @@ export default defineComponent({
         }
     },
     setup(props) {
-        const { NConfigProvider } = useConfig();
+        const { mergedComponentPropsRef } = useConfig();
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const { mergedSortStateRef, mergedClsPrefixRef } = inject(dataTableInjectionKey);
         const sortStateRef = computed(() => mergedSortStateRef.value.find((state) => state.columnKey === props.column.key));
@@ -29,7 +29,8 @@ export default defineComponent({
         });
         const mergedRenderSorterRef = computed(() => {
             var _a, _b;
-            return (((_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DataTable) === null || _b === void 0 ? void 0 : _b.renderSorter) || props.column.renderSorter);
+            return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DataTable) === null || _b === void 0 ? void 0 : _b.renderSorter) ||
+                props.column.renderSorter);
         });
         return {
             mergedClsPrefix: mergedClsPrefixRef,