naive-ui 2.25.4 → 2.25.7

package/lib/date-picker/src/panel/datetimerange.js

@@ -28,8 +28,13 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         var _a, _b, _c;
-        const { mergedClsPrefix, mergedTheme, shortcuts } = this;
-        return ((0, vue_1.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 ((0, vue_1.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 },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-header` },
                 (0, vue_1.h)(input_1.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 }),
                 (0, vue_1.h)(time_picker_1.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/lib/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/lib/date-picker/src/panel/month.js

@@ -53,10 +53,12 @@ exports.default = (0, vue_1.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 ((0, vue_1.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 },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-date-panel-month-calendar` },
                 (0, vue_1.h)(_internal_1.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/lib/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/lib/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/lib/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/lib/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/lib/date-picker/src/panel/use-panel-common.js

@@ -24,7 +24,9 @@ const usePanelCommonProps = {
     onUpdateValue: {
         type: Function,
         required: true
-    }
+    },
+    themeClass: String,
+    onRender: Function
 };
 exports.usePanelCommonProps = usePanelCommonProps;
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type

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

@@ -253,6 +253,7 @@ declare const _default: import("vue").DefineComponent<{
     handleMaskClick: (e: MouseEvent) => void;
     handleEsc: () => void;
     mergedTheme: import("vue").ComputedRef<{
+        /** @deprecated */
         common: {
             baseColor: string;
             primaryColor: string;
@@ -408,7 +409,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/lib/drawer/src/Drawer.js

@@ -67,7 +67,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const isMountedRef = (0, vooks_1.useIsMounted)();
         const themeRef = (0, _mixins_1.useTheme)('Drawer', '-drawer', index_cssr_1.default, styles_1.drawerLight, props, mergedClsPrefixRef);
         const styleWidthRef = (0, vue_1.computed)(() => {
@@ -124,6 +124,33 @@ exports.default = (0, vue_1.defineComponent)({
             mergedClsPrefixRef,
             doUpdateShow
         });
+        const cssVarsRef = (0, vue_1.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
+            ? (0, _mixins_1.useThemeClass)('drawer', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             namespace: namespaceRef,
@@ -131,30 +158,9 @@ exports.default = (0, vue_1.defineComponent)({
             handleMaskClick,
             handleEsc,
             mergedTheme: themeRef,
-            cssVars: (0, vue_1.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
         };
     },
@@ -162,7 +168,13 @@ exports.default = (0, vue_1.defineComponent)({
         const { mergedClsPrefix } = this;
         return ((0, vue_1.h)(vueuc_1.VLazyTeleport, { to: this.to, show: this.show }, {
             default: () => {
-                return (0, vue_1.withDirectives)((0, vue_1.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 (0, vue_1.withDirectives)((0, vue_1.h)("div", { class: [
+                        `${mergedClsPrefix}-drawer-container`,
+                        this.namespace,
+                        this.themeClass
+                    ], style: this.cssVars, role: "none" },
                     (0, vue_1.h)(vue_1.Transition, { name: "fade-in-transition", appear: this.isMounted }, {
                         default: () => this.show ? ((0, vue_1.h)("div", { "aria-hidden": true, class: `${mergedClsPrefix}-drawer-mask`, onClick: this.handleMaskClick })) : null
                     }),

package/lib/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/lib/dropdown/src/Dropdown.js

@@ -120,7 +120,7 @@ exports.default = (0, vue_1.defineComponent)({
                 Enter: handleKeyUpEnter
             }
         }, keyboardEnabledRef);
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Dropdown', '-dropdown', index_cssr_1.default, styles_1.dropdownLight, props, mergedClsPrefixRef);
         (0, vue_1.provide)(context_1.dropdownInjectionKey, {
             labelFieldRef: (0, vue_1.toRef)(props, 'labelField'),
@@ -226,6 +226,57 @@ exports.default = (0, vue_1.defineComponent)({
                 keyboardKeyRef.value = nextKeyboardKey;
             }
         }
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { size, inverted } = props;
+            const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
+            const { padding, dividerColor, borderRadius, optionOpacityDisabled, [(0, _utils_1.createKey)('optionIconSuffixWidth', size)]: optionIconSuffixWidth, [(0, _utils_1.createKey)('optionSuffixWidth', size)]: optionSuffixWidth, [(0, _utils_1.createKey)('optionIconPrefixWidth', size)]: optionIconPrefixWidth, [(0, _utils_1.createKey)('optionPrefixWidth', size)]: optionPrefixWidth, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('optionHeight', size)]: optionHeight, [(0, _utils_1.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
+            ? (0, _mixins_1.useThemeClass)('dropdown', (0, vue_1.computed)(() => `${props.size[0]}${props.inverted ? 'i' : ''}`), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedTheme: themeRef,
@@ -235,66 +286,22 @@ exports.default = (0, vue_1.defineComponent)({
             mergedShow: mergedShowRef,
             // methods
             doUpdateShow,
-            cssVars: (0, vue_1.computed)(() => {
-                const { size, inverted } = props;
-                const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-                const { padding, dividerColor, borderRadius, optionOpacityDisabled, [(0, _utils_1.createKey)('optionIconSuffixWidth', size)]: optionIconSuffixWidth, [(0, _utils_1.createKey)('optionSuffixWidth', size)]: optionSuffixWidth, [(0, _utils_1.createKey)('optionIconPrefixWidth', size)]: optionIconPrefixWidth, [(0, _utils_1.createKey)('optionPrefixWidth', size)]: optionPrefixWidth, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('optionHeight', size)]: optionHeight, [(0, _utils_1.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: (0, _utils_1.createRefSetter)(ref),
                 class: [
                     className,
                     `${mergedClsPrefix}-dropdown`,
+                    this.themeClass,
                     this.trigger === 'manual' &&
                         `${mergedClsPrefix}-popover--manual-trigger`,
                     this.showArrow && `${mergedClsPrefix}-popover--show-arrow`

package/lib/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;

package/lib/form/src/FormItem.js

@@ -76,7 +76,7 @@ exports.default = (0, vue_1.defineComponent)({
     props: exports.formItemProps,
     setup(props) {
         (0, _utils_1.useInjectionInstanceCollection)(context_1.formItemInstsInjectionKey, 'formItems', (0, vue_1.toRef)(props, 'path'));
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const NForm = (0, vue_1.inject)(context_1.formInjectionKey, null);
         const formItemSizeRefs = (0, utils_1.formItemSize)(props);
         const formItemMiscRefs = (0, utils_1.formItemMisc)(props);
@@ -238,45 +238,52 @@ exports.default = (0, vue_1.defineComponent)({
                 NForm === null || NForm === void 0 ? void 0 : NForm.deriveMaxChildLabelWidth(Number(getComputedStyle(labelElementRef.value).width.slice(0, -2)));
             }
         });
-        return Object.assign(Object.assign(Object.assign(Object.assign({ labelElementRef, mergedClsPrefix: mergedClsPrefixRef, mergedRequired: mergedRequiredRef, hasFeedback: hasFeedbackRef, feedbackId: feedbackIdRef, explains: explainsRef }, formItemMiscRefs), formItemSizeRefs), exposedRef), { cssVars: (0, vue_1.computed)(() => {
-                var _a;
-                const { value: size } = mergedSizeRef;
-                const { value: labelPlacement } = labelPlacementRef;
-                const direction = labelPlacement === 'top' ? 'vertical' : 'horizontal';
-                const { common: { cubicBezierEaseInOut }, self: { labelTextColor, asteriskColor, lineHeight, feedbackTextColor, feedbackTextColorWarning, feedbackTextColorError, feedbackPadding, [(0, _utils_1.createKey)('labelHeight', size)]: labelHeight, [(0, _utils_1.createKey)('blankHeight', size)]: blankHeight, [(0, _utils_1.createKey)('feedbackFontSize', size)]: feedbackFontSize, [(0, _utils_1.createKey)('feedbackHeight', size)]: feedbackHeight, [(0, _utils_1.createKey)('labelPadding', direction)]: labelPadding, [(0, _utils_1.createKey)('labelTextAlign', direction)]: labelTextAlign, [(0, _utils_1.createKey)((0, _utils_1.createKey)('labelFontSize', labelPlacement), size)]: labelFontSize } } = themeRef.value;
-                let mergedLabelTextAlign = (_a = labelTextAlignRef.value) !== null && _a !== void 0 ? _a : labelTextAlign;
-                if (labelPlacement === 'top') {
-                    mergedLabelTextAlign =
-                        mergedLabelTextAlign === 'right' ? 'flex-end' : 'flex-start';
-                }
-                const cssVars = {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-line-height': lineHeight,
-                    '--n-blank-height': blankHeight,
-                    '--n-label-font-size': labelFontSize,
-                    '--n-label-text-align': mergedLabelTextAlign,
-                    '--n-label-height': labelHeight,
-                    '--n-label-padding': labelPadding,
-                    '--n-asterisk-color': asteriskColor,
-                    '--n-label-text-color': labelTextColor,
-                    '--n-feedback-padding': feedbackPadding,
-                    '--n-feedback-font-size': feedbackFontSize,
-                    '--n-feedback-height': feedbackHeight,
-                    '--n-feedback-text-color': feedbackTextColor,
-                    '--n-feedback-text-color-warning': feedbackTextColorWarning,
-                    '--n-feedback-text-color-error': feedbackTextColorError
-                };
-                return cssVars;
-            }) });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            var _a;
+            const { value: size } = mergedSizeRef;
+            const { value: labelPlacement } = labelPlacementRef;
+            const direction = labelPlacement === 'top' ? 'vertical' : 'horizontal';
+            const { common: { cubicBezierEaseInOut }, self: { labelTextColor, asteriskColor, lineHeight, feedbackTextColor, feedbackTextColorWarning, feedbackTextColorError, feedbackPadding, [(0, _utils_1.createKey)('labelHeight', size)]: labelHeight, [(0, _utils_1.createKey)('blankHeight', size)]: blankHeight, [(0, _utils_1.createKey)('feedbackFontSize', size)]: feedbackFontSize, [(0, _utils_1.createKey)('feedbackHeight', size)]: feedbackHeight, [(0, _utils_1.createKey)('labelPadding', direction)]: labelPadding, [(0, _utils_1.createKey)('labelTextAlign', direction)]: labelTextAlign, [(0, _utils_1.createKey)((0, _utils_1.createKey)('labelFontSize', labelPlacement), size)]: labelFontSize } } = themeRef.value;
+            let mergedLabelTextAlign = (_a = labelTextAlignRef.value) !== null && _a !== void 0 ? _a : labelTextAlign;
+            if (labelPlacement === 'top') {
+                mergedLabelTextAlign =
+                    mergedLabelTextAlign === 'right' ? 'flex-end' : 'flex-start';
+            }
+            const cssVars = {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-line-height': lineHeight,
+                '--n-blank-height': blankHeight,
+                '--n-label-font-size': labelFontSize,
+                '--n-label-text-align': mergedLabelTextAlign,
+                '--n-label-height': labelHeight,
+                '--n-label-padding': labelPadding,
+                '--n-asterisk-color': asteriskColor,
+                '--n-label-text-color': labelTextColor,
+                '--n-feedback-padding': feedbackPadding,
+                '--n-feedback-font-size': feedbackFontSize,
+                '--n-feedback-height': feedbackHeight,
+                '--n-feedback-text-color': feedbackTextColor,
+                '--n-feedback-text-color-warning': feedbackTextColorWarning,
+                '--n-feedback-text-color-error': feedbackTextColorError
+            };
+            return cssVars;
+        });
+        const themeClassHandle = (0, _mixins_1.useThemeClass)('form-item', (0, vue_1.computed)(() => {
+            var _a;
+            return `${mergedSizeRef.value[0]}${labelPlacementRef.value[0]}${((_a = labelTextAlignRef.value) === null || _a === void 0 ? void 0 : _a[0]) || ''}`;
+        }), cssVarsRef, props);
+        return Object.assign(Object.assign(Object.assign(Object.assign({ labelElementRef, mergedClsPrefix: mergedClsPrefixRef, mergedRequired: mergedRequiredRef, hasFeedback: hasFeedbackRef, feedbackId: feedbackIdRef, explains: explainsRef }, formItemMiscRefs), formItemSizeRefs), exposedRef), { 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 { $slots, mergedClsPrefix, mergedShowLabel, mergedShowRequireMark, mergedRequireMarkPlacement } = this;
+        const { $slots, mergedClsPrefix, mergedShowLabel, mergedShowRequireMark, mergedRequireMarkPlacement, onRender } = this;
         const renderedShowRequireMark = mergedShowRequireMark !== undefined
             ? mergedShowRequireMark
             : this.mergedRequired;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-form-item`,
+                this.themeClass,
                 `${mergedClsPrefix}-form-item--${this.mergedSize}-size`,
                 `${mergedClsPrefix}-form-item--${this.mergedLabelPlacement}-labelled`,
                 !mergedShowLabel && `${mergedClsPrefix}-form-item--no-label`

package/lib/form/src/FormItemRow.js

@@ -51,7 +51,7 @@ exports.default = (0, vue_1.defineComponent)({
         return (0, vue_1.h)(Row_1.default, (0, _utils_1.keep)(this.$props, Row_1.rowPropKeys), {
             default: () => {
                 const colProps = (0, _utils_1.keep)(this.$props, FormItemCol_1.formItemColPropKeys);
-                return (0, vue_1.h)(FormItemCol_1.default, Object.assign(Object.assign({ ref: 'formItemColRef' }, colProps), { span: 24 }), this.$slots);
+                return (0, vue_1.h)(FormItemCol_1.default, Object.assign(Object.assign({ ref: 'formItemColInstRef' }, colProps), { span: 24 }), this.$slots);
             }
         });
     }

package/lib/gradient-text/src/GradientText.d.ts

@@ -120,7 +120,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-color-start': string;
         '--n-color-end': string;
         '--n-font-weight': 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 size: PropType<string | number>;
     readonly fontSize: PropType<string | number>;