naive-ui 2.25.5 → 2.25.8

package/es/collapse-transition/src/CollapseTransition.js

@@ -1,5 +1,5 @@
 import { computed, h, defineComponent, mergeProps, watchEffect } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { warnOnce } from '../../_utils';
 import style from './styles/index.cssr';
 import { collapseTransitionLight } from '../styles';
@@ -8,7 +8,7 @@ const collapseProps = Object.assign(Object.assign({}, useTheme.props), { show: {
         type: Boolean,
         default: true
     }, appear: Boolean, 
-    // The collapsed is implemented will mistake, collapsed=true would make it show
+    // The collapsed is implemented with mistake, collapsed=true would make it show
     // However there's no possibility to change so I just let it deprecated and use
     // `show` prop instead.
     /** @deprecated */
@@ -28,7 +28,7 @@ export default defineComponent({
                 }
             });
         }
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const mergedThemeRef = useTheme('CollapseTransition', '-collapse-transition', style, collapseTransitionLight, props, mergedClsPrefixRef);
         const mergedShowRef = computed(() => {
             if (props.collapsed !== undefined) {
@@ -37,26 +37,39 @@ export default defineComponent({
             }
             return props.show;
         });
+        const cssVarsRef = computed(() => {
+            const { self: { bezier } } = mergedThemeRef.value;
+            return {
+                '--n-bezier': bezier
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('collapse-transition', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedShow: mergedShowRef,
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: computed(() => {
-                const { self: { bezier } } = mergedThemeRef.value;
-                return {
-                    '--n-bezier': bezier
-                };
-            })
+            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(NFadeInExpandTransition, { appear: this.appear }, {
-            default: () => this.mergedShow
-                ? h('div', // Don't use jsx since it would cause useless spread in each rendering
+            default: () => {
+                var _a;
+                if (!this.mergedShow)
+                    return;
+                (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                return h('div', // Don't use jsx since it would cause useless spread in each rendering
                 mergeProps({
-                    class: `${this.mergedClsPrefix}-collapse-transition`,
+                    class: [
+                        `${this.mergedClsPrefix}-collapse-transition`,
+                        this.themeClass
+                    ],
                     style: this.cssVars
-                }, this.$attrs), this.$slots)
-                : null
+                }, this.$attrs), this.$slots);
+            }
         }));
     }
 });

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

@@ -107,6 +107,7 @@ export default defineComponent({
             return NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedClsPrefixRef.value;
         });
         const mergedRtlRef = computed(() => {
+            var _a;
             const { rtl } = props;
             if (rtl === undefined) {
                 return NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef.value;
@@ -114,6 +115,11 @@ export default defineComponent({
             const rtlEnabledState = {};
             for (const rtlInfo of rtl) {
                 rtlEnabledState[rtlInfo.name] = markRaw(rtlInfo);
+                (_a = rtlInfo.peers) === null || _a === void 0 ? void 0 : _a.forEach((peerRtlInfo) => {
+                    if (!(peerRtlInfo.name in rtlEnabledState)) {
+                        rtlEnabledState[peerRtlInfo.name] = markRaw(peerRtlInfo);
+                    }
+                });
             }
             return rtlEnabledState;
         });

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

@@ -211,6 +211,7 @@ export interface GlobalIconConfig {
 export interface RtlItem {
     name: keyof GlobalThemeWithoutCommon;
     style: CNode;
+    peers?: RtlItem[];
 }
 export declare type RtlProp = RtlItem[];
 export declare type RtlEnabledState = Partial<Record<keyof GlobalThemeWithoutCommon, RtlItem>>;

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

@@ -341,6 +341,7 @@ export declare const dataTableProps: {
             rippleDuration: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -369,6 +370,7 @@ export declare const dataTableProps: {
             labelPadding: string;
         }, any>;
         Radio: import("../../_mixins").Theme<"Radio", {
+            labelLineHeight: string;
             buttonHeightSmall: string;
             buttonHeightMedium: string;
             buttonHeightLarge: string;
@@ -942,6 +944,7 @@ export declare const dataTableProps: {
             rippleDuration: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -970,6 +973,7 @@ export declare const dataTableProps: {
             labelPadding: string;
         }, any>;
         Radio: import("../../_mixins").Theme<"Radio", {
+            labelLineHeight: string;
             buttonHeightSmall: string;
             buttonHeightMedium: string;
             buttonHeightLarge: string;
@@ -1543,6 +1547,7 @@ export declare const dataTableProps: {
             rippleDuration: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -1571,6 +1576,7 @@ export declare const dataTableProps: {
             labelPadding: string;
         }, any>;
         Radio: import("../../_mixins").Theme<"Radio", {
+            labelLineHeight: string;
             buttonHeightSmall: string;
             buttonHeightMedium: string;
             buttonHeightLarge: string;
@@ -2232,6 +2238,7 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -2260,6 +2267,7 @@ declare const _default: import("vue").DefineComponent<{
             labelPadding: string;
         }, any>;
         Radio: import("../../_mixins").Theme<"Radio", {
+            labelLineHeight: string;
             buttonHeightSmall: string;
             buttonHeightMedium: string;
             buttonHeightLarge: string;
@@ -2833,6 +2841,7 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -2861,6 +2870,7 @@ declare const _default: import("vue").DefineComponent<{
             labelPadding: string;
         }, any>;
         Radio: import("../../_mixins").Theme<"Radio", {
+            labelLineHeight: string;
             buttonHeightSmall: string;
             buttonHeightMedium: string;
             buttonHeightLarge: string;
@@ -3434,6 +3444,7 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -3462,6 +3473,7 @@ declare const _default: import("vue").DefineComponent<{
             labelPadding: string;
         }, any>;
         Radio: import("../../_mixins").Theme<"Radio", {
+            labelLineHeight: string;
             buttonHeightSmall: string;
             buttonHeightMedium: string;
             buttonHeightLarge: string;
@@ -4153,6 +4165,7 @@ declare const _default: import("vue").DefineComponent<{
                 rippleDuration: string;
             }, any>;
             Checkbox: import("../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -4181,6 +4194,7 @@ declare const _default: import("vue").DefineComponent<{
                 labelPadding: string;
             }, any>;
             Radio: import("../../_mixins").Theme<"Radio", {
+                labelLineHeight: string;
                 buttonHeightSmall: string;
                 buttonHeightMedium: string;
                 buttonHeightLarge: string;
@@ -5134,6 +5148,7 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -5162,6 +5177,7 @@ declare const _default: import("vue").DefineComponent<{
             labelPadding: string;
         }, any>;
         Radio: import("../../_mixins").Theme<"Radio", {
+            labelLineHeight: string;
             buttonHeightSmall: string;
             buttonHeightMedium: string;
             buttonHeightLarge: string;
@@ -5735,6 +5751,7 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -5763,6 +5780,7 @@ declare const _default: import("vue").DefineComponent<{
             labelPadding: string;
         }, any>;
         Radio: import("../../_mixins").Theme<"Radio", {
+            labelLineHeight: string;
             buttonHeightSmall: string;
             buttonHeightMedium: string;
             buttonHeightLarge: string;
@@ -6336,6 +6354,7 @@ declare const _default: import("vue").DefineComponent<{
             rippleDuration: string;
         }, any>;
         Checkbox: import("../../_mixins").Theme<"Checkbox", {
+            labelLineHeight: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -6364,6 +6383,7 @@ declare const _default: import("vue").DefineComponent<{
             labelPadding: string;
         }, any>;
         Radio: import("../../_mixins").Theme<"Radio", {
+            labelLineHeight: string;
             buttonHeightSmall: string;
             buttonHeightMedium: string;
             buttonHeightLarge: string;

package/es/data-table/src/HeaderButton/FilterButton.d.ts

@@ -369,6 +369,7 @@ declare const _default: import("vue").DefineComponent<{
                 rippleDuration: string;
             }, any>;
             Checkbox: import("../../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -397,6 +398,7 @@ declare const _default: import("vue").DefineComponent<{
                 labelPadding: string;
             }, any>;
             Radio: import("../../../_mixins").Theme<"Radio", {
+                labelLineHeight: string;
                 buttonHeightSmall: string;
                 buttonHeightMedium: string;
                 buttonHeightLarge: string;

package/es/data-table/src/HeaderButton/FilterMenu.d.ts

@@ -394,6 +394,7 @@ declare const _default: import("vue").DefineComponent<{
                 rippleDuration: string;
             }, any>;
             Checkbox: import("../../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -422,6 +423,7 @@ declare const _default: import("vue").DefineComponent<{
                 labelPadding: string;
             }, any>;
             Radio: import("../../../_mixins").Theme<"Radio", {
+                labelLineHeight: string;
                 buttonHeightSmall: string;
                 buttonHeightMedium: string;
                 buttonHeightLarge: string;

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

@@ -13,6 +13,7 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     componentId: string;
     scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
@@ -390,6 +391,7 @@ declare const _default: import("vue").DefineComponent<{
                 rippleDuration: string;
             }, any>;
             Checkbox: import("../../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -418,6 +420,7 @@ declare const _default: import("vue").DefineComponent<{
                 labelPadding: string;
             }, any>;
             Radio: import("../../../_mixins").Theme<"Radio", {
+                labelLineHeight: string;
                 buttonHeightSmall: string;
                 buttonHeightMedium: string;
                 buttonHeightLarge: string;

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

@@ -374,6 +374,7 @@ declare const _default: import("vue").DefineComponent<{
                     rippleDuration: string;
                 }, any>;
                 Checkbox: import("../../../_mixins").Theme<"Checkbox", {
+                    labelLineHeight: string;
                     fontSizeSmall: string;
                     fontSizeMedium: string;
                     fontSizeLarge: string;
@@ -402,6 +403,7 @@ declare const _default: import("vue").DefineComponent<{
                     labelPadding: string;
                 }, any>;
                 Radio: import("../../../_mixins").Theme<"Radio", {
+                    labelLineHeight: string;
                     buttonHeightSmall: string;
                     buttonHeightMedium: string;
                     buttonHeightLarge: string;
@@ -1345,6 +1347,7 @@ declare const _default: import("vue").DefineComponent<{
                     rippleDuration: string;
                 }, any>;
                 Checkbox: import("../../../_mixins").Theme<"Checkbox", {
+                    labelLineHeight: string;
                     fontSizeSmall: string;
                     fontSizeMedium: string;
                     fontSizeLarge: string;
@@ -1373,6 +1376,7 @@ declare const _default: import("vue").DefineComponent<{
                     labelPadding: string;
                 }, any>;
                 Radio: import("../../../_mixins").Theme<"Radio", {
+                    labelLineHeight: string;
                     buttonHeightSmall: string;
                     buttonHeightMedium: string;
                     buttonHeightLarge: string;

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

@@ -381,6 +381,7 @@ declare const _default: import("vue").DefineComponent<{
                 rippleDuration: string;
             }, any>;
             Checkbox: import("../../../_mixins").Theme<"Checkbox", {
+                labelLineHeight: string;
                 fontSizeSmall: string;
                 fontSizeMedium: string;
                 fontSizeLarge: string;
@@ -409,6 +410,7 @@ declare const _default: import("vue").DefineComponent<{
                 labelPadding: string;
             }, any>;
             Radio: import("../../../_mixins").Theme<"Radio", {
+                labelLineHeight: string;
                 buttonHeightSmall: string;
                 buttonHeightMedium: string;
                 buttonHeightLarge: string;

package/es/data-table/styles/light.d.ts

@@ -303,6 +303,7 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
         rippleDuration: string;
     }, any>;
     Checkbox: import("../../_mixins").Theme<"Checkbox", {
+        labelLineHeight: string;
         fontSizeSmall: string;
         fontSizeMedium: string;
         fontSizeLarge: string;
@@ -331,6 +332,7 @@ declare const dataTableLight: import("../../_mixins").Theme<"DataTable", {
         labelPadding: string;
     }, any>;
     Radio: import("../../_mixins").Theme<"Radio", {
+        labelLineHeight: string;
         buttonHeightSmall: string;
         buttonHeightMedium: string;
         buttonHeightLarge: string;

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

@@ -3804,6 +3804,7 @@ declare const _default: import("vue").DefineComponent<{
     panelInstRef: Ref<{
         $el: HTMLElement;
         monthScrollRef?: {
+            $el: HTMLElement;
             containerRef: HTMLElement | null;
             contentRef: HTMLElement | null;
             containerScrollTop: number;
@@ -4873,7 +4874,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-bezier': string;
         '--n-icon-color': string;
         '--n-icon-color-disabled': string;
-    }>;
+    }> | undefined;
+    triggerThemeClass: Ref<string> | undefined;
+    triggerOnRender: (() => void) | undefined;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-panel-border-radius': string;
@@ -4918,7 +4921,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-arrow-color': string;
         '--n-icon-color': string;
         '--n-icon-color-disabled': string;
-    }>;
+    }> | undefined;
+    themeClass: Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     focus: () => void;
     blur: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{

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

@@ -6,7 +6,7 @@ import { useIsMounted, useMergedState } from 'vooks';
 import { happensIn } from 'seemly';
 import { NInput } from '../../input';
 import { NBaseIcon } from '../../_internal';
-import { useFormItem, useTheme, useConfig, useLocale } from '../../_mixins';
+import { useFormItem, useTheme, useConfig, useLocale, useThemeClass } from '../../_mixins';
 import { DateIcon, ToIcon } from '../../_internal/icons';
 import { warn, call, useAdjustedTo, createKey, warnOnce } from '../../_utils';
 import { datePickerLight } from '../styles';
@@ -52,7 +52,7 @@ export default defineComponent({
         const { localeRef, dateLocaleRef } = useLocale('DatePicker');
         const formItem = useFormItem(props);
         const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
-        const { mergedComponentPropsRef, mergedClsPrefixRef, mergedBorderedRef, namespaceRef } = useConfig(props);
+        const { mergedComponentPropsRef, mergedClsPrefixRef, mergedBorderedRef, namespaceRef, inlineThemeDisabled } = useConfig(props);
         const panelInstRef = ref(null);
         const triggerElRef = ref(null);
         const inputInstRef = ref(null);
@@ -486,6 +486,76 @@ export default defineComponent({
                 (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
+        const triggerCssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseInOut }, self: { iconColor, iconColorDisabled } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-icon-color': iconColor,
+                '--n-icon-color-disabled': iconColorDisabled
+            };
+        });
+        const triggerThemeClassHandle = inlineThemeDisabled
+            ? useThemeClass('date-picker-trigger', undefined, triggerCssVarsRef, props)
+            : undefined;
+        const cssVarsRef = computed(() => {
+            const { type } = props;
+            const { common: { cubicBezierEaseInOut }, self: { calendarTitleFontSize, calendarDaysFontSize, itemFontSize, itemTextColor, itemColorDisabled, itemColorIncluded, itemColorHover, itemColorActive, itemBorderRadius, itemTextColorDisabled, itemTextColorActive, panelColor, panelTextColor, arrowColor, calendarTitleTextColor, panelActionDividerColor, panelHeaderDividerColor, calendarDaysDividerColor, panelBoxShadow, panelBorderRadius, calendarTitleFontWeight, panelExtraFooterPadding, panelActionPadding, itemSize, itemCellWidth, itemCellHeight, scrollItemWidth, scrollItemHeight, calendarTitlePadding, calendarTitleHeight, calendarDaysHeight, calendarDaysTextColor, arrowSize, panelHeaderPadding, calendarDividerColor, calendarTitleGridTempateColumns, iconColor, iconColorDisabled, scrollItemBorderRadius, calendarTitleColorHover, [createKey('calendarLeftPadding', type)]: calendarLeftPadding, [createKey('calendarRightPadding', type)]: calendarRightPadding } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-panel-border-radius': panelBorderRadius,
+                '--n-panel-color': panelColor,
+                '--n-panel-box-shadow': panelBoxShadow,
+                '--n-panel-text-color': panelTextColor,
+                // panel header
+                '--n-panel-header-padding': panelHeaderPadding,
+                '--n-panel-header-divider-color': panelHeaderDividerColor,
+                // panel calendar
+                '--n-calendar-left-padding': calendarLeftPadding,
+                '--n-calendar-right-padding': calendarRightPadding,
+                '--n-calendar-title-color-hover': calendarTitleColorHover,
+                '--n-calendar-title-height': calendarTitleHeight,
+                '--n-calendar-title-padding': calendarTitlePadding,
+                '--n-calendar-title-font-size': calendarTitleFontSize,
+                '--n-calendar-title-font-weight': calendarTitleFontWeight,
+                '--n-calendar-title-text-color': calendarTitleTextColor,
+                '--n-calendar-title-grid-template-columns': calendarTitleGridTempateColumns,
+                '--n-calendar-days-height': calendarDaysHeight,
+                '--n-calendar-days-divider-color': calendarDaysDividerColor,
+                '--n-calendar-days-font-size': calendarDaysFontSize,
+                '--n-calendar-days-text-color': calendarDaysTextColor,
+                '--n-calendar-divider-color': calendarDividerColor,
+                // panel action
+                '--n-panel-action-padding': panelActionPadding,
+                '--n-panel-extra-footer-padding': panelExtraFooterPadding,
+                '--n-panel-action-divider-color': panelActionDividerColor,
+                // panel item
+                '--n-item-font-size': itemFontSize,
+                '--n-item-border-radius': itemBorderRadius,
+                '--n-item-size': itemSize,
+                '--n-item-cell-width': itemCellWidth,
+                '--n-item-cell-height': itemCellHeight,
+                '--n-item-text-color': itemTextColor,
+                '--n-item-color-included': itemColorIncluded,
+                '--n-item-color-disabled': itemColorDisabled,
+                '--n-item-color-hover': itemColorHover,
+                '--n-item-color-active': itemColorActive,
+                '--n-item-text-color-disabled': itemTextColorDisabled,
+                '--n-item-text-color-active': itemTextColorActive,
+                // scroll item
+                '--n-scroll-item-width': scrollItemWidth,
+                '--n-scroll-item-height': scrollItemHeight,
+                '--n-scroll-item-border-radius': scrollItemBorderRadius,
+                // panel arrow
+                '--n-arrow-size': arrowSize,
+                '--n-arrow-color': arrowColor,
+                // icon in trigger
+                '--n-icon-color': iconColor,
+                '--n-icon-color-disabled': iconColorDisabled
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('date-picker', undefined, cssVarsRef, props)
+            : undefined;
         return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, uncontrolledValue: uncontrolledValueRef, pendingValue: pendingValueRef, panelInstRef,
             triggerElRef,
             inputInstRef, isMounted: useIsMounted(), displayTime: singleInputValueRef, displayStartTime: rangeStartInputValueRef, displayEndTime: rangeEndInputValueRef, mergedShow: mergedShowRef, adjustedTo: useAdjustedTo(props), isRange: isRangeRef, localizedStartPlaceholder: localizedStartPlaceholderRef, localizedEndPlaceholder: localizedEndPlaceholderRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, localizedPlacehoder: localizedPlacehoderRef, isValueInvalid: uniVaidation.isValueInvalidRef, isStartValueInvalid: dualValidation.isStartValueInvalidRef, isEndValueInvalid: dualValidation.isEndValueInvalidRef, handleClickOutside,
@@ -501,72 +571,11 @@ export default defineComponent({
             handleRangeUpdateValue,
             handleSingleUpdateValue,
             handlePanelUpdateValue,
-            handlePanelConfirm, mergedTheme: themeRef, actions: mergedActionsRef, triggerCssVars: computed(() => {
-                const { common: { cubicBezierEaseInOut }, self: { iconColor, iconColorDisabled } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-icon-color': iconColor,
-                    '--n-icon-color-disabled': iconColorDisabled
-                };
-            }), cssVars: computed(() => {
-                const { type } = props;
-                const { common: { cubicBezierEaseInOut }, self: { calendarTitleFontSize, calendarDaysFontSize, itemFontSize, itemTextColor, itemColorDisabled, itemColorIncluded, itemColorHover, itemColorActive, itemBorderRadius, itemTextColorDisabled, itemTextColorActive, panelColor, panelTextColor, arrowColor, calendarTitleTextColor, panelActionDividerColor, panelHeaderDividerColor, calendarDaysDividerColor, panelBoxShadow, panelBorderRadius, calendarTitleFontWeight, panelExtraFooterPadding, panelActionPadding, itemSize, itemCellWidth, itemCellHeight, scrollItemWidth, scrollItemHeight, calendarTitlePadding, calendarTitleHeight, calendarDaysHeight, calendarDaysTextColor, arrowSize, panelHeaderPadding, calendarDividerColor, calendarTitleGridTempateColumns, iconColor, iconColorDisabled, scrollItemBorderRadius, calendarTitleColorHover, [createKey('calendarLeftPadding', type)]: calendarLeftPadding, [createKey('calendarRightPadding', type)]: calendarRightPadding } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-panel-border-radius': panelBorderRadius,
-                    '--n-panel-color': panelColor,
-                    '--n-panel-box-shadow': panelBoxShadow,
-                    '--n-panel-text-color': panelTextColor,
-                    // panel header
-                    '--n-panel-header-padding': panelHeaderPadding,
-                    '--n-panel-header-divider-color': panelHeaderDividerColor,
-                    // panel calendar
-                    '--n-calendar-left-padding': calendarLeftPadding,
-                    '--n-calendar-right-padding': calendarRightPadding,
-                    '--n-calendar-title-color-hover': calendarTitleColorHover,
-                    '--n-calendar-title-height': calendarTitleHeight,
-                    '--n-calendar-title-padding': calendarTitlePadding,
-                    '--n-calendar-title-font-size': calendarTitleFontSize,
-                    '--n-calendar-title-font-weight': calendarTitleFontWeight,
-                    '--n-calendar-title-text-color': calendarTitleTextColor,
-                    '--n-calendar-title-grid-template-columns': calendarTitleGridTempateColumns,
-                    '--n-calendar-days-height': calendarDaysHeight,
-                    '--n-calendar-days-divider-color': calendarDaysDividerColor,
-                    '--n-calendar-days-font-size': calendarDaysFontSize,
-                    '--n-calendar-days-text-color': calendarDaysTextColor,
-                    '--n-calendar-divider-color': calendarDividerColor,
-                    // panel action
-                    '--n-panel-action-padding': panelActionPadding,
-                    '--n-panel-extra-footer-padding': panelExtraFooterPadding,
-                    '--n-panel-action-divider-color': panelActionDividerColor,
-                    // panel item
-                    '--n-item-font-size': itemFontSize,
-                    '--n-item-border-radius': itemBorderRadius,
-                    '--n-item-size': itemSize,
-                    '--n-item-cell-width': itemCellWidth,
-                    '--n-item-cell-height': itemCellHeight,
-                    '--n-item-text-color': itemTextColor,
-                    '--n-item-color-included': itemColorIncluded,
-                    '--n-item-color-disabled': itemColorDisabled,
-                    '--n-item-color-hover': itemColorHover,
-                    '--n-item-color-active': itemColorActive,
-                    '--n-item-text-color-disabled': itemTextColorDisabled,
-                    '--n-item-text-color-active': itemTextColorActive,
-                    // scroll item
-                    '--n-scroll-item-width': scrollItemWidth,
-                    '--n-scroll-item-height': scrollItemHeight,
-                    '--n-scroll-item-border-radius': scrollItemBorderRadius,
-                    // panel arrow
-                    '--n-arrow-size': arrowSize,
-                    '--n-arrow-color': arrowColor,
-                    // icon in trigger
-                    '--n-icon-color': iconColor,
-                    '--n-icon-color-disabled': iconColorDisabled
-                };
-            }) });
+            handlePanelConfirm, mergedTheme: themeRef, actions: mergedActionsRef, triggerCssVars: inlineThemeDisabled ? undefined : triggerCssVarsRef, triggerThemeClass: triggerThemeClassHandle === null || triggerThemeClassHandle === void 0 ? void 0 : triggerThemeClassHandle.themeClass, triggerOnRender: triggerThemeClassHandle === null || triggerThemeClassHandle === void 0 ? void 0 : triggerThemeClassHandle.onRender, 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 { clearable } = this;
+        const { clearable, triggerOnRender } = this;
+        triggerOnRender === null || triggerOnRender === void 0 ? void 0 : triggerOnRender();
         const commonInputProps = {
             bordered: this.mergedBordered,
             size: this.mergedSize,
@@ -593,13 +602,16 @@ export default defineComponent({
             actions: this.actions,
             shortcuts: this.shortcuts,
             style: this.cssVars,
-            defaultTime: this.defaultTime
+            defaultTime: this.defaultTime,
+            themeClass: this.themeClass,
+            onRender: this.onRender
         };
         const { mergedClsPrefix } = this;
         return (h("div", { ref: "triggerElRef", class: [
                 `${mergedClsPrefix}-date-picker`,
                 this.mergedDisabled && `${mergedClsPrefix}-date-picker--disabled`,
-                this.isRange && `${mergedClsPrefix}-date-picker--range`
+                this.isRange && `${mergedClsPrefix}-date-picker--range`,
+                this.triggerThemeClass
             ], style: this.triggerCssVars, onKeydown: this.handleKeyDown },
             h(VBinder, null, {
                 default: () => [

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

@@ -28,6 +28,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
         readonly required: true;
     };
+    readonly themeClass: StringConstructor;
+    readonly onRender: import("vue").PropType<(() => void) | undefined>;
 }, {
     handleDateClick: (dateItem: import("../utils").DateItem | import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem) => void;
     handleDateInputBlur: () => void;
@@ -43,6 +45,7 @@ declare const _default: import("vue").DefineComponent<{
         [name: string]: import("vue").Slot | undefined;
     }>;
     monthScrollRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
@@ -59,6 +62,7 @@ declare const _default: import("vue").DefineComponent<{
         scrollTo: import("vueuc/lib/virtual-list/src/VirtualList").ScrollTo;
     } | null>;
     scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
@@ -1202,6 +1206,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
         readonly required: true;
     };
+    readonly themeClass: StringConstructor;
+    readonly onRender: import("vue").PropType<(() => void) | undefined>;
 }>>, {
     value: import("../interface").Value | null;
     active: boolean;

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

@@ -27,8 +27,13 @@ export default defineComponent({
     },
     render() {
         var _a, _b, _c;
-        const { mergedClsPrefix, mergedTheme, shortcuts } = this;
-        return (h("div", { ref: "selfRef", tabindex: 0, class: `${mergedClsPrefix}-date-panel ${mergedClsPrefix}-date-panel--date`, onFocus: this.handlePanelFocus, onKeydown: this.handlePanelKeyDown },
+        const { mergedClsPrefix, mergedTheme, shortcuts, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return (h("div", { ref: "selfRef", tabindex: 0, class: [
+                `${mergedClsPrefix}-date-panel`,
+                `${mergedClsPrefix}-date-panel--date`,
+                this.themeClass
+            ], onFocus: this.handlePanelFocus, onKeydown: this.handlePanelKeyDown },
             h("div", { class: `${mergedClsPrefix}-date-panel-calendar` },
                 h("div", { class: `${mergedClsPrefix}-date-panel-month` },
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__fast-prev`, onClick: this.prevYear },