naive-ui 2.25.0 → 2.25.3

package/es/page-header/src/PageHeader.js

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import { h, defineComponent, computed } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { pageHeaderLight } from '../styles/light';
 import style from './styles/index.cssr';
 import { ArrowBackIcon } from '../../_internal/icons';
@@ -11,31 +11,39 @@ export default defineComponent({
     name: 'PageHeader',
     props: pageHeaderProps,
     setup(props) {
-        const { mergedClsPrefixRef, NConfigProvider } = useConfig(props);
+        const { mergedClsPrefixRef, mergedRtlRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('PageHeader', '-page-header', style, pageHeaderLight, props, mergedClsPrefixRef);
-        const rtlEnabledRef = useRtl('PageHeader', NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef, mergedClsPrefixRef);
+        const rtlEnabledRef = useRtl('PageHeader', mergedRtlRef, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { self: { titleTextColor, subtitleTextColor, backColor, fontSize, titleFontSize, backSize, titleFontWeight, backColorHover, backColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-title-text-color': titleTextColor,
+                '--n-title-font-size': titleFontSize,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-font-size': fontSize,
+                '--n-back-size': backSize,
+                '--n-subtitle-text-color': subtitleTextColor,
+                '--n-back-color': backColor,
+                '--n-back-color-hover': backColorHover,
+                '--n-back-color-pressed': backColorPressed,
+                '--n-bezier': cubicBezierEaseInOut
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('page-header', undefined, cssVarsRef, props)
+            : undefined;
         return {
             rtlEnabled: rtlEnabledRef,
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: computed(() => {
-                const { self: { titleTextColor, subtitleTextColor, backColor, fontSize, titleFontSize, backSize, titleFontWeight, backColorHover, backColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--n-title-text-color': titleTextColor,
-                    '--n-title-font-size': titleFontSize,
-                    '--n-title-font-weight': titleFontWeight,
-                    '--n-font-size': fontSize,
-                    '--n-back-size': backSize,
-                    '--n-subtitle-text-color': subtitleTextColor,
-                    '--n-back-color': backColor,
-                    '--n-back-color-hover': backColorHover,
-                    '--n-back-color-pressed': backColorPressed,
-                    '--n-bezier': cubicBezierEaseInOut
-                };
-            })
+            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() {
+        var _a;
         const { onBack, title, subtitle, extra, mergedClsPrefix, cssVars, $slots } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         const { title: titleSlot, subtitle: subtitleSlot, extra: extraSlot, default: defaultSlot, header: headerSlot, avatar: avatarSlot, footer: footerSlot, back: backSlot } = $slots;
         const showBack = onBack;
         const showTitle = title || titleSlot;
@@ -43,6 +51,7 @@ export default defineComponent({
         const showExtra = extra || extraSlot;
         return (h("div", { style: cssVars, class: [
                 `${mergedClsPrefix}-page-header-wrapper`,
+                this.themeClass,
                 this.rtlEnabled && `${mergedClsPrefix}-page-header-wrapper--rtl`
             ] },
             headerSlot ? (h("div", { class: `${mergedClsPrefix}-page-header-header`, key: "breadcrumb" }, headerSlot())) : null,

package/es/pagination/src/Pagination.d.ts

@@ -111,7 +111,7 @@ declare const paginationProps: {
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -122,7 +122,7 @@ declare const paginationProps: {
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -131,7 +131,7 @@ declare const paginationProps: {
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -254,6 +254,7 @@ declare const paginationProps: {
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -339,7 +340,7 @@ declare const paginationProps: {
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -350,7 +351,7 @@ declare const paginationProps: {
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -359,7 +360,7 @@ declare const paginationProps: {
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -482,6 +483,7 @@ declare const paginationProps: {
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -567,7 +569,7 @@ declare const paginationProps: {
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -578,7 +580,7 @@ declare const paginationProps: {
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -587,7 +589,7 @@ declare const paginationProps: {
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -710,6 +712,7 @@ declare const paginationProps: {
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -838,7 +841,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -849,7 +852,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -858,7 +861,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -981,6 +984,7 @@ declare const _default: import("vue").DefineComponent<{
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -1066,7 +1070,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -1077,7 +1081,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -1086,7 +1090,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -1209,6 +1213,7 @@ declare const _default: import("vue").DefineComponent<{
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -1294,7 +1299,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -1305,7 +1310,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -1314,7 +1319,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -1437,6 +1442,7 @@ declare const _default: import("vue").DefineComponent<{
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -1655,7 +1661,7 @@ declare const _default: import("vue").DefineComponent<{
                     borderHover: string;
                     borderActive: string;
                     borderFocus: string;
-                    boxShadowHover: null;
+                    boxShadowHover: string;
                     boxShadowActive: string;
                     boxShadowFocus: string;
                     caretColor: string;
@@ -1666,7 +1672,7 @@ declare const _default: import("vue").DefineComponent<{
                     borderHoverWarning: string;
                     borderActiveWarning: string;
                     borderFocusWarning: string;
-                    boxShadowHoverWarning: null;
+                    boxShadowHoverWarning: string;
                     boxShadowActiveWarning: string;
                     boxShadowFocusWarning: string;
                     colorActiveWarning: string;
@@ -1675,7 +1681,7 @@ declare const _default: import("vue").DefineComponent<{
                     borderHoverError: string;
                     borderActiveError: string;
                     borderFocusError: string;
-                    boxShadowHoverError: null;
+                    boxShadowHoverError: string;
                     boxShadowActiveError: string;
                     boxShadowFocusError: string;
                     colorActiveError: string;
@@ -1798,6 +1804,7 @@ declare const _default: import("vue").DefineComponent<{
                 loadingColorError: string;
                 borderError: string;
                 borderHoverError: string;
+                /** @deprecated */
                 colorFocusError: string;
                 borderFocusError: string;
                 boxShadowFocusError: string;
@@ -1841,7 +1848,7 @@ declare const _default: import("vue").DefineComponent<{
                         borderHover: string;
                         borderActive: string;
                         borderFocus: string;
-                        boxShadowHover: null;
+                        boxShadowHover: string;
                         boxShadowActive: string;
                         boxShadowFocus: string;
                         caretColor: string;
@@ -1852,7 +1859,7 @@ declare const _default: import("vue").DefineComponent<{
                         borderHoverWarning: string;
                         borderActiveWarning: string;
                         borderFocusWarning: string;
-                        boxShadowHoverWarning: null;
+                        boxShadowHoverWarning: string;
                         boxShadowActiveWarning: string;
                         boxShadowFocusWarning: string;
                         colorActiveWarning: string;
@@ -1861,7 +1868,7 @@ declare const _default: import("vue").DefineComponent<{
                         borderHoverError: string;
                         borderActiveError: string;
                         borderFocusError: string;
-                        boxShadowHoverError: null;
+                        boxShadowHoverError: string;
                         boxShadowActiveError: string;
                         boxShadowFocusError: string;
                         colorActiveError: string;
@@ -2003,7 +2010,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-button-border': string;
         '--n-button-border-hover': string;
         '--n-button-border-pressed': 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<{
     readonly page: NumberConstructor;
     readonly defaultPage: {
@@ -2111,7 +2120,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -2122,7 +2131,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -2131,7 +2140,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -2254,6 +2263,7 @@ declare const _default: import("vue").DefineComponent<{
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -2339,7 +2349,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -2350,7 +2360,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -2359,7 +2369,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -2482,6 +2492,7 @@ declare const _default: import("vue").DefineComponent<{
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;
@@ -2567,7 +2578,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHover: string;
                 borderActive: string;
                 borderFocus: string;
-                boxShadowHover: null;
+                boxShadowHover: string;
                 boxShadowActive: string;
                 boxShadowFocus: string;
                 caretColor: string;
@@ -2578,7 +2589,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverWarning: string;
                 borderActiveWarning: string;
                 borderFocusWarning: string;
-                boxShadowHoverWarning: null;
+                boxShadowHoverWarning: string;
                 boxShadowActiveWarning: string;
                 boxShadowFocusWarning: string;
                 colorActiveWarning: string;
@@ -2587,7 +2598,7 @@ declare const _default: import("vue").DefineComponent<{
                 borderHoverError: string;
                 borderActiveError: string;
                 borderFocusError: string;
-                boxShadowHoverError: null;
+                boxShadowHoverError: string;
                 boxShadowActiveError: string;
                 boxShadowFocusError: string;
                 colorActiveError: string;
@@ -2710,6 +2721,7 @@ declare const _default: import("vue").DefineComponent<{
             loadingColorError: string;
             borderError: string;
             borderHoverError: string;
+            /** @deprecated */
             colorFocusError: string;
             borderFocusError: string;
             boxShadowFocusError: string;

package/es/pagination/src/Pagination.js

@@ -5,7 +5,7 @@ import { NSelect } from '../../select';
 import { NInput } from '../../input';
 import { NBaseIcon } from '../../_internal';
 import { FastForwardIcon, FastBackwardIcon, BackwardIcon, ForwardIcon, MoreIcon } from '../../_internal/icons';
-import { useConfig, useLocale, useTheme } from '../../_mixins';
+import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins';
 import { paginationLight } from '../styles';
 import { pageItems } from './utils';
 import style from './styles/index.cssr';
@@ -49,7 +49,7 @@ export default defineComponent({
                 }
             });
         }
-        const { NConfigProvider, mergedClsPrefixRef } = useConfig(props);
+        const { mergedComponentPropsRef, mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Pagination', '-pagination', style, paginationLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale('Pagination');
         const selfRef = ref(null);
@@ -88,12 +88,11 @@ export default defineComponent({
         });
         const inputSizeRef = computed(() => {
             var _a, _b;
-            return (((_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.inputSize) ||
-                'small');
+            return ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.inputSize) || 'small';
         });
         const selectSizeRef = computed(() => {
             var _a, _b;
-            return (((_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) || 'small');
+            return ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) || 'small';
         });
         const startIndexRef = computed(() => {
             return (mergedPageRef.value - 1) * mergedPageSizeRef.value;
@@ -247,6 +246,55 @@ export default defineComponent({
             void mergedPageSizeRef.value;
             disableTransitionOneTick();
         });
+        const cssVarsRef = computed(() => {
+            const { self: { itemSize, itemPadding, itemMargin, inputWidth, selectWidth, inputMargin, selectMargin, buttonBorder, buttonBorderHover, buttonBorderPressed, buttonIconColor, buttonIconColorHover, buttonIconColorPressed, buttonIconSize, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, itemTextColorDisabled, itemColor, itemColorHover, itemColorPressed, itemColorActive, itemColorActiveHover, itemColorDisabled, itemBorder, itemBorderHover, itemBorderPressed, itemBorderActive, itemBorderDisabled, itemBorderRadius, itemFontSize, jumperFontSize, jumperTextColor, jumperTextColorDisabled, prefixMargin, suffixMargin, buttonColor, buttonColorHover, buttonColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-prefix-margin': prefixMargin,
+                '--n-suffix-margin': suffixMargin,
+                '--n-item-font-size': itemFontSize,
+                '--n-select-width': selectWidth,
+                '--n-select-margin': selectMargin,
+                '--n-input-width': inputWidth,
+                '--n-input-margin': inputMargin,
+                '--n-item-size': itemSize,
+                '--n-item-text-color': itemTextColor,
+                '--n-item-text-color-disabled': itemTextColorDisabled,
+                '--n-item-text-color-hover': itemTextColorHover,
+                '--n-item-text-color-active': itemTextColorActive,
+                '--n-item-text-color-pressed': itemTextColorPressed,
+                '--n-item-color': itemColor,
+                '--n-item-color-hover': itemColorHover,
+                '--n-item-color-disabled': itemColorDisabled,
+                '--n-item-color-active': itemColorActive,
+                '--n-item-color-active-hover': itemColorActiveHover,
+                '--n-item-color-pressed': itemColorPressed,
+                '--n-item-border': itemBorder,
+                '--n-item-border-hover': itemBorderHover,
+                '--n-item-border-disabled': itemBorderDisabled,
+                '--n-item-border-active': itemBorderActive,
+                '--n-item-border-pressed': itemBorderPressed,
+                '--n-item-padding': itemPadding,
+                '--n-item-border-radius': itemBorderRadius,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-jumper-font-size': jumperFontSize,
+                '--n-jumper-text-color': jumperTextColor,
+                '--n-jumper-text-color-disabled': jumperTextColorDisabled,
+                '--n-item-margin': itemMargin,
+                '--n-button-icon-size': buttonIconSize,
+                '--n-button-icon-color': buttonIconColor,
+                '--n-button-icon-color-hover': buttonIconColorHover,
+                '--n-button-icon-color-pressed': buttonIconColorPressed,
+                '--n-button-color-hover': buttonColorHover,
+                '--n-button-color': buttonColor,
+                '--n-button-color-pressed': buttonColorPressed,
+                '--n-button-border': buttonBorder,
+                '--n-button-border-hover': buttonBorderHover,
+                '--n-button-border-pressed': buttonBorderPressed
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('pagination', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             locale: localeRef,
@@ -274,57 +322,15 @@ export default defineComponent({
             handleQuickJumperKeyUp,
             handlePageItemMouseEnter,
             handlePageItemMouseLeave,
-            cssVars: computed(() => {
-                const { self: { itemSize, itemPadding, itemMargin, inputWidth, selectWidth, inputMargin, selectMargin, buttonBorder, buttonBorderHover, buttonBorderPressed, buttonIconColor, buttonIconColorHover, buttonIconColorPressed, buttonIconSize, itemTextColor, itemTextColorHover, itemTextColorPressed, itemTextColorActive, itemTextColorDisabled, itemColor, itemColorHover, itemColorPressed, itemColorActive, itemColorActiveHover, itemColorDisabled, itemBorder, itemBorderHover, itemBorderPressed, itemBorderActive, itemBorderDisabled, itemBorderRadius, itemFontSize, jumperFontSize, jumperTextColor, jumperTextColorDisabled, prefixMargin, suffixMargin, buttonColor, buttonColorHover, buttonColorPressed }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--n-prefix-margin': prefixMargin,
-                    '--n-suffix-margin': suffixMargin,
-                    '--n-item-font-size': itemFontSize,
-                    '--n-select-width': selectWidth,
-                    '--n-select-margin': selectMargin,
-                    '--n-input-width': inputWidth,
-                    '--n-input-margin': inputMargin,
-                    '--n-item-size': itemSize,
-                    '--n-item-text-color': itemTextColor,
-                    '--n-item-text-color-disabled': itemTextColorDisabled,
-                    '--n-item-text-color-hover': itemTextColorHover,
-                    '--n-item-text-color-active': itemTextColorActive,
-                    '--n-item-text-color-pressed': itemTextColorPressed,
-                    '--n-item-color': itemColor,
-                    '--n-item-color-hover': itemColorHover,
-                    '--n-item-color-disabled': itemColorDisabled,
-                    '--n-item-color-active': itemColorActive,
-                    '--n-item-color-active-hover': itemColorActiveHover,
-                    '--n-item-color-pressed': itemColorPressed,
-                    '--n-item-border': itemBorder,
-                    '--n-item-border-hover': itemBorderHover,
-                    '--n-item-border-disabled': itemBorderDisabled,
-                    '--n-item-border-active': itemBorderActive,
-                    '--n-item-border-pressed': itemBorderPressed,
-                    '--n-item-padding': itemPadding,
-                    '--n-item-border-radius': itemBorderRadius,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-jumper-font-size': jumperFontSize,
-                    '--n-jumper-text-color': jumperTextColor,
-                    '--n-jumper-text-color-disabled': jumperTextColorDisabled,
-                    '--n-item-margin': itemMargin,
-                    '--n-button-icon-size': buttonIconSize,
-                    '--n-button-icon-color': buttonIconColor,
-                    '--n-button-icon-color-hover': buttonIconColorHover,
-                    '--n-button-icon-color-pressed': buttonIconColorPressed,
-                    '--n-button-color-hover': buttonColorHover,
-                    '--n-button-color': buttonColor,
-                    '--n-button-color-pressed': buttonColorPressed,
-                    '--n-button-border': buttonBorder,
-                    '--n-button-border-hover': buttonBorderHover,
-                    '--n-button-border-pressed': buttonBorderPressed
-                };
-            })
+            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() {
         // it's ok to expand all prop here since no slots' deps
-        const { $slots, mergedClsPrefix, disabled, cssVars, mergedPage, mergedPageCount, pageItems, showFastBackward, showFastForward, showSizePicker, showQuickJumper, mergedTheme, locale, inputSize, selectSize, mergedPageSize, pageSizeOptions, jumperValue, prev, next, prefix, suffix, label, handleJumperInput, handleSizePickerChange, handleBackwardClick, handlePageItemClick, handlePageItemMouseEnter, handlePageItemMouseLeave, handleForwardClick, handleQuickJumperKeyUp } = this;
+        const { $slots, mergedClsPrefix, disabled, cssVars, mergedPage, mergedPageCount, pageItems, showFastBackward, showFastForward, showSizePicker, showQuickJumper, mergedTheme, locale, inputSize, selectSize, mergedPageSize, pageSizeOptions, jumperValue, prev, next, prefix, suffix, label, handleJumperInput, handleSizePickerChange, handleBackwardClick, handlePageItemClick, handlePageItemMouseEnter, handlePageItemMouseLeave, handleForwardClick, handleQuickJumperKeyUp, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         const renderPrefix = $slots.prefix || prefix;
         const renderSuffix = $slots.suffix || suffix;
         const renderPrev = prev || $slots.prev;
@@ -332,6 +338,7 @@ export default defineComponent({
         const renderLabel = label || $slots.label;
         return (h("div", { ref: "selfRef", class: [
                 `${mergedClsPrefix}-pagination`,
+                this.themeClass,
                 disabled && `${mergedClsPrefix}-pagination--disabled`
             ], style: cssVars },
             renderPrefix ? (h("div", { class: `${mergedClsPrefix}-pagination-prefix` }, renderPrefix({

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

@@ -108,7 +108,7 @@ declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
             borderHover: string;
             borderActive: string;
             borderFocus: string;
-            boxShadowHover: null;
+            boxShadowHover: string;
             boxShadowActive: string;
             boxShadowFocus: string;
             caretColor: string;
@@ -119,7 +119,7 @@ declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
             borderHoverWarning: string;
             borderActiveWarning: string;
             borderFocusWarning: string;
-            boxShadowHoverWarning: null;
+            boxShadowHoverWarning: string;
             boxShadowActiveWarning: string;
             boxShadowFocusWarning: string;
             colorActiveWarning: string;
@@ -128,7 +128,7 @@ declare const paginationLight: import("../../_mixins").Theme<"Pagination", {
             borderHoverError: string;
             borderActiveError: string;
             borderFocusError: string;
-            boxShadowHoverError: null;
+            boxShadowHoverError: string;
             boxShadowActiveError: string;
             boxShadowFocusError: string;
             colorActiveError: string;