naive-ui 2.25.5 → 2.25.8

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

@@ -22,6 +22,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>;
 }, {
     startDateDisplayString: import("vue").Ref<string>;
     endDateInput: import("vue").Ref<string>;
@@ -1161,6 +1163,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/daterange.js

@@ -21,8 +21,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--daterange`, onClick: this.resetSelectingStatus, onKeydown: this.handlePanelKeyDown, onFocus: this.handlePanelFocus },
+        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--daterange`,
+                this.themeClass
+            ], onClick: this.resetSelectingStatus, onKeydown: this.handlePanelKeyDown, onFocus: this.handlePanelFocus },
             h("div", { ref: "startDatesElRef", class: `${mergedClsPrefix}-date-panel-calendar ${mergedClsPrefix}-date-panel-calendar--start` },
                 h("div", { class: `${mergedClsPrefix}-date-panel-month` },
                     h("div", { class: `${mergedClsPrefix}-date-panel-month__fast-prev`, onClick: this.startCalendarPrevYear },

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

@@ -22,6 +22,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;
@@ -37,6 +39,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;
@@ -53,6 +56,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;
@@ -1170,6 +1174,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/datetime.js

@@ -20,8 +20,13 @@ export default defineComponent({
     },
     render() {
         var _a, _b, _c, _d;
-        const { mergedClsPrefix, mergedTheme, shortcuts } = this;
-        return (h("div", { ref: "selfRef", tabindex: 0, class: `${mergedClsPrefix}-date-panel ${mergedClsPrefix}-date-panel--datetime`, onKeydown: this.handlePanelKeyDown, onFocus: this.handlePanelFocus },
+        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--datetime`,
+                this.themeClass
+            ], onKeydown: this.handlePanelKeyDown, onFocus: this.handlePanelFocus },
             h("div", { class: `${mergedClsPrefix}-date-panel-header` },
                 h(NInput, { value: this.dateInputValue, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, stateful: false, size: this.timePickerSize, class: `${mergedClsPrefix}-date-panel-date-input`, textDecoration: this.isDateInvalid ? 'line-through' : '', placeholder: this.locale.selectDate, onBlur: this.handleDateInputBlur, onUpdateValue: this.handleDateInput }),
                 h(NTimePicker, { showIcon: false, format: this.timeFormat, stateful: false, theme: mergedTheme.peers.TimePicker, themeOverrides: mergedTheme.peerOverrides.TimePicker, to: false, size: this.timePickerSize, value: Array.isArray(this.value) ? null : this.value, placeholder: this.locale.selectTime, isHourDisabled: this.isHourDisabled, isMinuteDisabled: this.isMinuteDisabled, isSecondDisabled: this.isSecondDisabled, onUpdateValue: this.handleTimePickerChange })),

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

@@ -22,6 +22,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>;
 }, {
     startDateDisplayString: import("vue").Ref<string>;
     endDateInput: import("vue").Ref<string>;
@@ -1161,6 +1163,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/datetimerange.js

@@ -23,8 +23,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--datetimerange`, onClick: this.resetSelectingStatus, onKeydown: this.handlePanelKeyDown, onFocus: this.handlePanelFocus },
+        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--datetimerange`,
+                this.themeClass
+            ], onClick: this.resetSelectingStatus, onKeydown: this.handlePanelKeyDown, onFocus: this.handlePanelFocus },
             h("div", { class: `${mergedClsPrefix}-date-panel-header` },
                 h(NInput, { value: this.startDateDisplayString, theme: mergedTheme.peers.Input, themeOverrides: mergedTheme.peerOverrides.Input, size: this.timePickerSize, stateful: false, class: `${mergedClsPrefix}-date-panel-date-input`, textDecoration: this.isStartValueInvalid ? 'line-through' : '', placeholder: this.locale.selectDate, onBlur: this.handleStartDateInputBlur, onUpdateValue: this.handleStartDateInput }),
                 h(NTimePicker, { size: this.timePickerSize, to: false, showIcon: false, theme: mergedTheme.peers.TimePicker, themeOverrides: mergedTheme.peerOverrides.TimePicker, stateful: false, placeholder: this.locale.selectTime, format: this.timeFormat, value: this.startTimeValue, isHourDisabled: this.isStartHourDisabled, isMinuteDisabled: this.isStartMinuteDisabled, isSecondDisabled: this.isStartSecondDisabled, onUpdateValue: this.handleStartTimePickerChange }),

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

@@ -29,6 +29,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../interface").OnPanelUpdateValue>;
         readonly required: true;
     };
+    themeClass: StringConstructor;
+    onRender: PropType<(() => void) | undefined>;
 }, {
     renderItem: (item: YearItem | MonthItem | QuarterItem, i: number, mergedClsPrefix: string) => VNode;
     handleDateClick: (dateItem: import("../utils").DateItem | MonthItem | YearItem | QuarterItem) => void;
@@ -45,6 +47,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;
@@ -61,6 +64,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;
@@ -1183,6 +1187,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<import("../interface").OnPanelUpdateValue>;
         readonly required: true;
     };
+    themeClass: StringConstructor;
+    onRender: PropType<(() => void) | undefined>;
 }>>, {
     value: import("../interface").Value | null;
     active: boolean;

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

@@ -51,10 +51,12 @@ export default defineComponent({
         return Object.assign(Object.assign({}, useCalendarRef), { renderItem });
     },
     render() {
-        const { mergedClsPrefix, mergedTheme, shortcuts, actions, renderItem, type } = this;
+        const { mergedClsPrefix, mergedTheme, shortcuts, actions, renderItem, type, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return (h("div", { ref: "selfRef", tabindex: 0, class: [
                 `${mergedClsPrefix}-date-panel`,
-                `${mergedClsPrefix}-date-panel--month`
+                `${mergedClsPrefix}-date-panel--month`,
+                this.themeClass
             ], onFocus: this.handlePanelFocus, onKeydown: this.handlePanelKeyDown },
             h("div", { class: `${mergedClsPrefix}-date-panel-month-calendar` },
                 h(NScrollbar, { ref: "scrollbarInstRef", class: `${mergedClsPrefix}-date-panel-month-calendar__picker-col`, theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, container: this.virtualListContainer, content: this.virtualListContent, horizontalRailStyle: { zIndex: 1 }, verticalRailStyle: { zIndex: 1 } }, {

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

@@ -61,6 +61,8 @@ declare const _default: import("vue").DefineComponent<{
                 readonly type: PropType<import("../interface").OnPanelUpdateValue>;
                 readonly required: true;
             };
+            themeClass: StringConstructor;
+            onRender: PropType<(() => void) | undefined>;
         }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "value" | "active" | "actions" | "useAsQuickJump">;
         $attrs: {
             [x: string]: unknown;
@@ -104,6 +106,8 @@ declare const _default: import("vue").DefineComponent<{
                 readonly type: PropType<import("../interface").OnPanelUpdateValue>;
                 readonly required: true;
             };
+            themeClass: StringConstructor;
+            onRender: PropType<(() => void) | undefined>;
         }>>, {
             renderItem: (item: import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem, i: number, mergedClsPrefix: string) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
                 [key: string]: any;
@@ -122,6 +126,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;
@@ -138,6 +143,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;
@@ -1285,6 +1291,8 @@ declare const _default: import("vue").DefineComponent<{
             readonly type: PropType<import("../interface").OnPanelUpdateValue>;
             readonly required: true;
         };
+        themeClass: StringConstructor;
+        onRender: PropType<(() => void) | undefined>;
     }>> & import("vue").ShallowUnwrapRef<{
         renderItem: (item: import("../utils").MonthItem | import("../utils").YearItem | import("../utils").QuarterItem, i: number, mergedClsPrefix: string) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
@@ -1303,6 +1311,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;
@@ -1319,6 +1328,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;

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

@@ -25,6 +25,8 @@ declare const useCalendarProps: {
         readonly type: PropType<import("../interface").OnPanelUpdateValue>;
         readonly required: true;
     };
+    readonly themeClass: StringConstructor;
+    readonly onRender: PropType<(() => void) | undefined>;
 };
 declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, type: 'date' | 'datetime' | 'month' | 'year' | 'quarter'): {
     handleDateClick: (dateItem: DateItem | MonthItem | YearItem | QuarterItem) => void;
@@ -41,6 +43,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
         [name: string]: import("vue").Slot | undefined;
     }>;
     monthScrollRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;
@@ -57,6 +60,7 @@ declare function useCalendar(props: ExtractPropTypes<typeof useCalendarProps>, t
         scrollTo: import("vueuc/lib/virtual-list/src/VirtualList").ScrollTo;
     } | null>;
     scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;

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

@@ -25,6 +25,8 @@ declare const useDualCalendarProps: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
         readonly required: true;
     };
+    readonly themeClass: StringConstructor;
+    readonly onRender: import("vue").PropType<(() => void) | undefined>;
 };
 declare function useDualCalendar(props: ExtractPropTypes<typeof useDualCalendarProps>, type?: string): {
     startDateDisplayString: import("vue").Ref<string>;

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

@@ -20,6 +20,8 @@ declare const usePanelCommonProps: {
         readonly type: PropType<OnPanelUpdateValue>;
         readonly required: true;
     };
+    readonly themeClass: StringConstructor;
+    readonly onRender: PropType<(() => void) | undefined>;
 };
 declare type UsePanelCommonProps = ExtractPropTypes<typeof usePanelCommonProps>;
 declare function usePanelCommon(props: UsePanelCommonProps): {

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

@@ -21,7 +21,9 @@ const usePanelCommonProps = {
     onUpdateValue: {
         type: Function,
         required: true
-    }
+    },
+    themeClass: String,
+    onRender: Function
 };
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function usePanelCommon(props) {

package/es/drawer/src/Drawer.d.ts

@@ -408,7 +408,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-close-color-hover': string;
         '--n-close-color-pressed': string;
         '--n-close-size': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     isMounted: Readonly<import("vue").Ref<boolean>>;
 }, 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 show: BooleanConstructor;

package/es/drawer/src/Drawer.js

@@ -2,7 +2,7 @@ import { h, defineComponent, computed, provide, withDirectives, Transition, watc
 import { VLazyTeleport } from 'vueuc';
 import { zindexable } from 'vdirs';
 import { useIsMounted } from 'vooks';
-import { useTheme, useConfig } from '../../_mixins';
+import { useTheme, useConfig, useThemeClass } from '../../_mixins';
 import { formatLength, call, warnOnce } from '../../_utils';
 import { drawerLight } from '../styles';
 import NDrawerBodyWrapper from './DrawerBodyWrapper';
@@ -62,7 +62,7 @@ export default defineComponent({
                 }
             });
         }
-        const { mergedClsPrefixRef, namespaceRef } = useConfig(props);
+        const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = useConfig(props);
         const isMountedRef = useIsMounted();
         const themeRef = useTheme('Drawer', '-drawer', style, drawerLight, props, mergedClsPrefixRef);
         const styleWidthRef = computed(() => {
@@ -119,6 +119,33 @@ export default defineComponent({
             mergedClsPrefixRef,
             doUpdateShow
         });
+        const cssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { color, textColor, boxShadow, lineHeight, headerPadding, footerPadding, bodyPadding, titleFontSize, titleTextColor, titleFontWeight, headerBorderBottom, footerBorderTop, closeColor, closeColorHover, closeColorPressed, closeSize } } = themeRef.value;
+            return {
+                '--n-line-height': lineHeight,
+                '--n-color': color,
+                '--n-text-color': textColor,
+                '--n-box-shadow': boxShadow,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-bezier-out': cubicBezierEaseOut,
+                '--n-bezier-in': cubicBezierEaseIn,
+                '--n-header-padding': headerPadding,
+                '--n-body-padding': bodyPadding,
+                '--n-footer-padding': footerPadding,
+                '--n-title-text-color': titleTextColor,
+                '--n-title-font-size': titleFontSize,
+                '--n-title-font-weight': titleFontWeight,
+                '--n-header-border-bottom': headerBorderBottom,
+                '--n-footer-border-top': footerBorderTop,
+                '--n-close-color': closeColor,
+                '--n-close-color-hover': closeColorHover,
+                '--n-close-color-pressed': closeColorPressed,
+                '--n-close-size': closeSize
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('drawer', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             namespace: namespaceRef,
@@ -126,30 +153,9 @@ export default defineComponent({
             handleMaskClick,
             handleEsc,
             mergedTheme: themeRef,
-            cssVars: computed(() => {
-                const { common: { cubicBezierEaseInOut, cubicBezierEaseIn, cubicBezierEaseOut }, self: { color, textColor, boxShadow, lineHeight, headerPadding, footerPadding, bodyPadding, titleFontSize, titleTextColor, titleFontWeight, headerBorderBottom, footerBorderTop, closeColor, closeColorHover, closeColorPressed, closeSize } } = themeRef.value;
-                return {
-                    '--n-line-height': lineHeight,
-                    '--n-color': color,
-                    '--n-text-color': textColor,
-                    '--n-box-shadow': boxShadow,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-bezier-out': cubicBezierEaseOut,
-                    '--n-bezier-in': cubicBezierEaseIn,
-                    '--n-header-padding': headerPadding,
-                    '--n-body-padding': bodyPadding,
-                    '--n-footer-padding': footerPadding,
-                    '--n-title-text-color': titleTextColor,
-                    '--n-title-font-size': titleFontSize,
-                    '--n-title-font-weight': titleFontWeight,
-                    '--n-header-border-bottom': headerBorderBottom,
-                    '--n-footer-border-top': footerBorderTop,
-                    '--n-close-color': closeColor,
-                    '--n-close-color-hover': closeColorHover,
-                    '--n-close-color-pressed': closeColorPressed,
-                    '--n-close-size': closeSize
-                };
-            }),
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
             isMounted: isMountedRef
         };
     },
@@ -157,7 +163,13 @@ export default defineComponent({
         const { mergedClsPrefix } = this;
         return (h(VLazyTeleport, { to: this.to, show: this.show }, {
             default: () => {
-                return withDirectives(h("div", { class: [`${mergedClsPrefix}-drawer-container`, this.namespace], style: this.cssVars, role: "none" },
+                var _a;
+                (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                return withDirectives(h("div", { class: [
+                        `${mergedClsPrefix}-drawer-container`,
+                        this.namespace,
+                        this.themeClass
+                    ], style: this.cssVars, role: "none" },
                     h(Transition, { name: "fade-in-transition", appear: this.isMounted }, {
                         default: () => this.show ? (h("div", { "aria-hidden": true, class: `${mergedClsPrefix}-drawer-mask`, onClick: this.handleMaskClick })) : null
                     }),

package/es/dropdown/src/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import { PropType, CSSProperties, Ref } from 'vue';
+import { PropType, Ref } from 'vue';
 import { Key, TreeNode } from 'treemate';
 import { FollowerPlacement } from 'vueuc';
 import { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
@@ -293,7 +293,7 @@ declare const dropdownProps: {
         type: PropType<"show" | "if">;
         default: string;
     };
-    readonly arrowStyle: PropType<string | CSSProperties>;
+    readonly arrowStyle: PropType<string | import("vue").CSSProperties>;
     readonly flip: {
         type: BooleanConstructor;
         default: boolean;
@@ -610,7 +610,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"show" | "if">;
         default: string;
     };
-    readonly arrowStyle: PropType<string | CSSProperties>;
+    readonly arrowStyle: PropType<string | import("vue").CSSProperties>;
     readonly flip: {
         type: BooleanConstructor;
         default: boolean;
@@ -838,7 +838,9 @@ declare const _default: import("vue").DefineComponent<{
     tmNodes: import("vue").ComputedRef<TreeNode<import("../..").MenuOption | import("../../menu/src/interface").MenuRenderOption, import("../..").MenuGroupOption, import("../../menu/src/interface").MenuIgnoredOption>[]>;
     mergedShow: import("vue").ComputedRef<boolean>;
     doUpdateShow: (value: boolean) => void;
-    cssVars: import("vue").ComputedRef<any>;
+    cssVars: import("vue").ComputedRef<any> | 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 theme: PropType<import("../../_mixins").Theme<"Dropdown", {
         optionHeightSmall: string;
@@ -1114,7 +1116,7 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<"show" | "if">;
         default: string;
     };
-    readonly arrowStyle: PropType<string | CSSProperties>;
+    readonly arrowStyle: PropType<string | import("vue").CSSProperties>;
     readonly flip: {
         type: BooleanConstructor;
         default: boolean;

package/es/dropdown/src/Dropdown.js

@@ -2,7 +2,7 @@ import { defineComponent, h, computed, ref, toRef, watch, provide, mergeProps }
 import { createTreeMate } from 'treemate';
 import { useMergedState, useKeyboard, useMemo } from 'vooks';
 import { popoverBaseProps } from '../../popover/src/Popover';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { NPopover } from '../../popover';
 import { keep, call, createKey, createRefSetter } from '../../_utils';
 import { dropdownLight } from '../styles';
@@ -115,7 +115,7 @@ export default defineComponent({
                 Enter: handleKeyUpEnter
             }
         }, keyboardEnabledRef);
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Dropdown', '-dropdown', style, dropdownLight, props, mergedClsPrefixRef);
         provide(dropdownInjectionKey, {
             labelFieldRef: toRef(props, 'labelField'),
@@ -221,6 +221,57 @@ export default defineComponent({
                 keyboardKeyRef.value = nextKeyboardKey;
             }
         }
+        const cssVarsRef = computed(() => {
+            const { size, inverted } = props;
+            const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
+            const { padding, dividerColor, borderRadius, optionOpacityDisabled, [createKey('optionIconSuffixWidth', size)]: optionIconSuffixWidth, [createKey('optionSuffixWidth', size)]: optionSuffixWidth, [createKey('optionIconPrefixWidth', size)]: optionIconPrefixWidth, [createKey('optionPrefixWidth', size)]: optionPrefixWidth, [createKey('fontSize', size)]: fontSize, [createKey('optionHeight', size)]: optionHeight, [createKey('optionIconSize', size)]: optionIconSize } = self;
+            const vars = {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-font-size': fontSize,
+                '--n-padding': padding,
+                '--n-border-radius': borderRadius,
+                '--n-option-height': optionHeight,
+                '--n-option-prefix-width': optionPrefixWidth,
+                '--n-option-icon-prefix-width': optionIconPrefixWidth,
+                '--n-option-suffix-width': optionSuffixWidth,
+                '--n-option-icon-suffix-width': optionIconSuffixWidth,
+                '--n-option-icon-size': optionIconSize,
+                '--n-divider-color': dividerColor,
+                '--n-option-opacity-disabled': optionOpacityDisabled
+            };
+            // writing like this is the fastest method
+            if (inverted) {
+                vars['--n-color'] = self.colorInverted;
+                vars['--n-option-color-hover'] = self.optionColorHoverInverted;
+                vars['--n-option-color-active'] = self.optionColorActiveInverted;
+                vars['--n-option-text-color'] = self.optionTextColorInverted;
+                vars['--n-option-text-color-hover'] = self.optionTextColorHoverInverted;
+                vars['--n-option-text-color-active'] =
+                    self.optionTextColorActiveInverted;
+                vars['--n-option-text-color-child-active'] =
+                    self.optionTextColorChildActiveInverted;
+                vars['--n-prefix-color'] = self.prefixColorInverted;
+                vars['--n-suffix-color'] = self.suffixColorInverted;
+                vars['--n-group-header-text-color'] = self.groupHeaderTextColorInverted;
+            }
+            else {
+                vars['--n-color'] = self.color;
+                vars['--n-option-color-hover'] = self.optionColorHover;
+                vars['--n-option-color-active'] = self.optionColorActive;
+                vars['--n-option-text-color'] = self.optionTextColor;
+                vars['--n-option-text-color-hover'] = self.optionTextColorHover;
+                vars['--n-option-text-color-active'] = self.optionTextColorActive;
+                vars['--n-option-text-color-child-active'] =
+                    self.optionTextColorChildActive;
+                vars['--n-prefix-color'] = self.prefixColor;
+                vars['--n-suffix-color'] = self.suffixColor;
+                vars['--n-group-header-text-color'] = self.groupHeaderTextColor;
+            }
+            return vars;
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('dropdown', computed(() => `${props.size[0]}${props.inverted ? 'i' : ''}`), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedTheme: themeRef,
@@ -230,66 +281,22 @@ export default defineComponent({
             mergedShow: mergedShowRef,
             // methods
             doUpdateShow,
-            cssVars: computed(() => {
-                const { size, inverted } = props;
-                const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-                const { padding, dividerColor, borderRadius, optionOpacityDisabled, [createKey('optionIconSuffixWidth', size)]: optionIconSuffixWidth, [createKey('optionSuffixWidth', size)]: optionSuffixWidth, [createKey('optionIconPrefixWidth', size)]: optionIconPrefixWidth, [createKey('optionPrefixWidth', size)]: optionPrefixWidth, [createKey('fontSize', size)]: fontSize, [createKey('optionHeight', size)]: optionHeight, [createKey('optionIconSize', size)]: optionIconSize } = self;
-                const vars = {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-font-size': fontSize,
-                    '--n-padding': padding,
-                    '--n-border-radius': borderRadius,
-                    '--n-option-height': optionHeight,
-                    '--n-option-prefix-width': optionPrefixWidth,
-                    '--n-option-icon-prefix-width': optionIconPrefixWidth,
-                    '--n-option-suffix-width': optionSuffixWidth,
-                    '--n-option-icon-suffix-width': optionIconSuffixWidth,
-                    '--n-option-icon-size': optionIconSize,
-                    '--n-divider-color': dividerColor,
-                    '--n-option-opacity-disabled': optionOpacityDisabled
-                };
-                // writing like this is the fastest method
-                if (inverted) {
-                    vars['--n-color'] = self.colorInverted;
-                    vars['--n-option-color-hover'] = self.optionColorHoverInverted;
-                    vars['--n-option-color-active'] = self.optionColorActiveInverted;
-                    vars['--n-option-text-color'] = self.optionTextColorInverted;
-                    vars['--n-option-text-color-hover'] =
-                        self.optionTextColorHoverInverted;
-                    vars['--n-option-text-color-active'] =
-                        self.optionTextColorActiveInverted;
-                    vars['--n-option-text-color-child-active'] =
-                        self.optionTextColorChildActiveInverted;
-                    vars['--n-prefix-color'] = self.prefixColorInverted;
-                    vars['--n-suffix-color'] = self.suffixColorInverted;
-                    vars['--n-group-header-text-color'] =
-                        self.groupHeaderTextColorInverted;
-                }
-                else {
-                    vars['--n-color'] = self.color;
-                    vars['--n-option-color-hover'] = self.optionColorHover;
-                    vars['--n-option-color-active'] = self.optionColorActive;
-                    vars['--n-option-text-color'] = self.optionTextColor;
-                    vars['--n-option-text-color-hover'] = self.optionTextColorHover;
-                    vars['--n-option-text-color-active'] = self.optionTextColorActive;
-                    vars['--n-option-text-color-child-active'] =
-                        self.optionTextColorChildActive;
-                    vars['--n-prefix-color'] = self.prefixColor;
-                    vars['--n-suffix-color'] = self.suffixColor;
-                    vars['--n-group-header-text-color'] = self.groupHeaderTextColor;
-                }
-                return vars;
-            })
+            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 renderPopoverBody = (className, ref, style, onMouseenter, onMouseleave) => {
+            var _a;
             const { mergedClsPrefix } = this;
+            (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
             const dropdownProps = {
                 ref: createRefSetter(ref),
                 class: [
                     className,
                     `${mergedClsPrefix}-dropdown`,
+                    this.themeClass,
                     this.trigger === 'manual' &&
                         `${mergedClsPrefix}-popover--manual-trigger`,
                     this.showArrow && `${mergedClsPrefix}-popover--show-arrow`

package/es/form/src/FormItem.d.ts

@@ -266,7 +266,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-feedback-text-color': string;
         '--n-feedback-text-color-warning': string;
         '--n-feedback-text-color-error': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string>;
+    onRender: () => void;
     validate: import("./interface").FormItemValidate;
     restoreValidation: () => void;
     path?: string | undefined;