naive-ui 2.25.4 → 2.25.7

package/lib/slider/src/Slider.d.ts

@@ -311,7 +311,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-indicator-box-shadow': string;
         '--n-indicator-color': string;
         '--n-indicator-text-color': string;
-    }>;
+    }> | undefined;
+    indicatorThemeClass: import("vue").Ref<string> | undefined;
+    indicatorOnRender: (() => void) | undefined;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-dot-border': string;
@@ -337,7 +339,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-rail-color-hover': string;
         '--n-rail-height': string;
         '--n-rail-width-vertical': 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 to: {
         type: PropType<string | boolean | HTMLElement>;

package/lib/slider/src/Slider.js

@@ -40,7 +40,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Slider',
     props: sliderProps,
     setup(props) {
-        const { mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Slider', '-slider', index_cssr_1.default, styles_1.sliderLight, props, mergedClsPrefixRef);
         // dom ref
         const handleRailRef = (0, vue_1.ref)(null);
@@ -422,6 +422,51 @@ exports.default = (0, vue_1.defineComponent)({
             }
             void (0, vue_1.nextTick)(syncPosition);
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { railColor, railColorHover, fillColor, fillColorHover, handleColor, opacityDisabled, dotColor, dotColorModal, handleBoxShadow, handleBoxShadowHover, handleBoxShadowActive, handleBoxShadowFocus, dotBorder, dotBoxShadow, railHeight, railWidthVertical, handleSize, dotHeight, dotWidth, dotBorderRadius, fontSize, dotBorderActive, dotColorPopover }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-dot-border': dotBorder,
+                '--n-dot-border-active': dotBorderActive,
+                '--n-dot-border-radius': dotBorderRadius,
+                '--n-dot-box-shadow': dotBoxShadow,
+                '--n-dot-color': dotColor,
+                '--n-dot-color-modal': dotColorModal,
+                '--n-dot-color-popover': dotColorPopover,
+                '--n-dot-height': dotHeight,
+                '--n-dot-width': dotWidth,
+                '--n-fill-color': fillColor,
+                '--n-fill-color-hover': fillColorHover,
+                '--n-font-size': fontSize,
+                '--n-handle-box-shadow': handleBoxShadow,
+                '--n-handle-box-shadow-active': handleBoxShadowActive,
+                '--n-handle-box-shadow-focus': handleBoxShadowFocus,
+                '--n-handle-box-shadow-hover': handleBoxShadowHover,
+                '--n-handle-color': handleColor,
+                '--n-handle-size': handleSize,
+                '--n-opacity-disabled': opacityDisabled,
+                '--n-rail-color': railColor,
+                '--n-rail-color-hover': railColorHover,
+                '--n-rail-height': railHeight,
+                '--n-rail-width-vertical': railWidthVertical
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('slider', undefined, cssVarsRef, props)
+            : undefined;
+        const indicatorCssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { fontSize, indicatorColor, indicatorBoxShadow, indicatorTextColor, indicatorBorderRadius } } = themeRef.value;
+            return {
+                '--n-font-size': fontSize,
+                '--n-indicator-border-radius': indicatorBorderRadius,
+                '--n-indicator-box-shadow': indicatorBoxShadow,
+                '--n-indicator-color': indicatorColor,
+                '--n-indicator-text-color': indicatorTextColor
+            };
+        });
+        const indicatorThemeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('slider-indicator', undefined, indicatorCssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             namespace: namespaceRef,
@@ -449,51 +494,21 @@ exports.default = (0, vue_1.defineComponent)({
             handleHandleMouseEnter,
             handleHandleMouseLeave,
             handleRailKeyDown,
-            indicatorCssVars: (0, vue_1.computed)(() => {
-                const { self: { fontSize, indicatorColor, indicatorBoxShadow, indicatorTextColor, indicatorBorderRadius } } = themeRef.value;
-                return {
-                    '--n-font-size': fontSize,
-                    '--n-indicator-border-radius': indicatorBorderRadius,
-                    '--n-indicator-box-shadow': indicatorBoxShadow,
-                    '--n-indicator-color': indicatorColor,
-                    '--n-indicator-text-color': indicatorTextColor
-                };
-            }),
-            cssVars: (0, vue_1.computed)(() => {
-                const { self: { railColor, railColorHover, fillColor, fillColorHover, handleColor, opacityDisabled, dotColor, dotColorModal, handleBoxShadow, handleBoxShadowHover, handleBoxShadowActive, handleBoxShadowFocus, dotBorder, dotBoxShadow, railHeight, railWidthVertical, handleSize, dotHeight, dotWidth, dotBorderRadius, fontSize, dotBorderActive, dotColorPopover }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-dot-border': dotBorder,
-                    '--n-dot-border-active': dotBorderActive,
-                    '--n-dot-border-radius': dotBorderRadius,
-                    '--n-dot-box-shadow': dotBoxShadow,
-                    '--n-dot-color': dotColor,
-                    '--n-dot-color-modal': dotColorModal,
-                    '--n-dot-color-popover': dotColorPopover,
-                    '--n-dot-height': dotHeight,
-                    '--n-dot-width': dotWidth,
-                    '--n-fill-color': fillColor,
-                    '--n-fill-color-hover': fillColorHover,
-                    '--n-font-size': fontSize,
-                    '--n-handle-box-shadow': handleBoxShadow,
-                    '--n-handle-box-shadow-active': handleBoxShadowActive,
-                    '--n-handle-box-shadow-focus': handleBoxShadowFocus,
-                    '--n-handle-box-shadow-hover': handleBoxShadowHover,
-                    '--n-handle-color': handleColor,
-                    '--n-handle-size': handleSize,
-                    '--n-opacity-disabled': opacityDisabled,
-                    '--n-rail-color': railColor,
-                    '--n-rail-color-hover': railColorHover,
-                    '--n-rail-height': railHeight,
-                    '--n-rail-width-vertical': railWidthVertical
-                };
-            })
+            indicatorCssVars: inlineThemeDisabled ? undefined : indicatorCssVarsRef,
+            indicatorThemeClass: indicatorThemeClassHandle === null || indicatorThemeClassHandle === void 0 ? void 0 : indicatorThemeClassHandle.themeClass,
+            indicatorOnRender: indicatorThemeClassHandle === null || indicatorThemeClassHandle === void 0 ? void 0 : indicatorThemeClassHandle.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 { mergedClsPrefix, formatTooltip } = this;
+        var _a;
+        const { mergedClsPrefix, themeClass, formatTooltip } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-slider`,
+                themeClass,
                 {
                     [`${mergedClsPrefix}-slider--disabled`]: this.mergedDisabled,
                     [`${mergedClsPrefix}-slider--active`]: this.activeIndex !== -1,
@@ -506,9 +521,8 @@ exports.default = (0, vue_1.defineComponent)({
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-slider-rail__fill`, style: this.fillStyle }),
                 this.marks ? ((0, vue_1.h)("div", { class: [
                         `${mergedClsPrefix}-slider-dots`,
-                        {
-                            [`${mergedClsPrefix}-slider-dots--transition-disabled`]: this.dotTransitionDisabled
-                        }
+                        this.dotTransitionDisabled &&
+                            `${mergedClsPrefix}-slider-dots--transition-disabled`
                     ] }, this.markInfos.map((mark) => ((0, vue_1.h)("div", { key: mark.label, class: [
                         `${mergedClsPrefix}-slider-dot`,
                         {
@@ -525,12 +539,21 @@ exports.default = (0, vue_1.defineComponent)({
                             this.tooltip && ((0, vue_1.h)(vueuc_1.VFollower, { ref: this.setFollowerRefs(index), show: showTooltip, to: this.adjustedTo, enabled: (this.showTooltip && !this.range) ||
                                     this.followerEnabledIndexSet.has(index), teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, placement: this.mergedPlacement, containerClass: this.namespace }, {
                                 default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, css: this.isSkipCSSDetection(index), onEnter: () => this.followerEnabledIndexSet.add(index), onAfterLeave: () => this.followerEnabledIndexSet.delete(index) }, {
-                                    default: () => showTooltip ? ((0, vue_1.h)("div", { class: [
-                                            `${mergedClsPrefix}-slider-handle-indicator`,
-                                            `${mergedClsPrefix}-slider-handle-indicator--${this.mergedPlacement}`
-                                        ], style: this.indicatorCssVars }, typeof formatTooltip === 'function'
-                                        ? formatTooltip(value)
-                                        : value)) : null
+                                    default: () => {
+                                        var _a;
+                                        if (showTooltip) {
+                                            (_a = this.indicatorOnRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                                            return ((0, vue_1.h)("div", { class: [
+                                                    `${mergedClsPrefix}-slider-handle-indicator`,
+                                                    this.indicatorThemeClass,
+                                                    `${mergedClsPrefix}-slider-handle-indicator--${this.mergedPlacement}`
+                                                ], style: this
+                                                    .indicatorCssVars }, typeof formatTooltip === 'function'
+                                                ? formatTooltip(value)
+                                                : value));
+                                        }
+                                        return null;
+                                    }
                                 }))
                             }))
                         ]

package/lib/steps/src/Step.d.ts

@@ -38,7 +38,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-splitor-color': string;
         '--n-step-header-font-size': string;
         '--n-step-header-font-weight': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string>;
+    onRender: () => void;
 }, 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 status: PropType<"wait" | "error" | "finish" | "process">;
     readonly title: StringConstructor;

package/lib/steps/src/Step.js

@@ -5,6 +5,7 @@ const icons_1 = require("../../_internal/icons");
 const _internal_1 = require("../../_internal");
 const _utils_1 = require("../../_utils");
 const Steps_1 = require("./Steps");
+const _mixins_1 = require("../../_mixins");
 const stepProps = {
     status: String,
     title: String,
@@ -22,6 +23,7 @@ exports.default = (0, vue_1.defineComponent)({
         const NSteps = (0, vue_1.inject)(Steps_1.stepsInjectionKey, null);
         if (!NSteps)
             (0, _utils_1.throwError)('step', '`n-step` must be placed inside `n-steps`.');
+        const { inlineThemeDisabled } = (0, _mixins_1.useConfig)();
         const { props: stepsProps, mergedThemeRef, mergedClsPrefixRef, stepsSlots } = NSteps;
         const verticalRef = (0, vue_1.computed)(() => {
             return stepsProps.vertical;
@@ -48,37 +50,47 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return 'process';
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { value: status } = mergedStatusRef;
+            const { size } = stepsProps;
+            const { common: { cubicBezierEaseInOut }, self: { stepHeaderFontWeight, [(0, _utils_1.createKey)('stepHeaderFontSize', size)]: stepHeaderFontSize, [(0, _utils_1.createKey)('indicatorIndexFontSize', size)]: indicatorIndexFontSize, [(0, _utils_1.createKey)('indicatorSize', size)]: indicatorSize, [(0, _utils_1.createKey)('indicatorIconSize', size)]: indicatorIconSize, [(0, _utils_1.createKey)('indicatorTextColor', status)]: indicatorTextColor, [(0, _utils_1.createKey)('indicatorBorderColor', status)]: indicatorBorderColor, [(0, _utils_1.createKey)('headerTextColor', status)]: headerTextColor, [(0, _utils_1.createKey)('splitorColor', status)]: splitorColor, [(0, _utils_1.createKey)('indicatorColor', status)]: indicatorColor, [(0, _utils_1.createKey)('descriptionTextColor', status)]: descriptionTextColor } } = mergedThemeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-description-text-color': descriptionTextColor,
+                '--n-header-text-color': headerTextColor,
+                '--n-indicator-border-color': indicatorBorderColor,
+                '--n-indicator-color': indicatorColor,
+                '--n-indicator-icon-size': indicatorIconSize,
+                '--n-indicator-index-font-size': indicatorIndexFontSize,
+                '--n-indicator-size': indicatorSize,
+                '--n-indicator-text-color': indicatorTextColor,
+                '--n-splitor-color': splitorColor,
+                '--n-step-header-font-size': stepHeaderFontSize,
+                '--n-step-header-font-weight': stepHeaderFontWeight
+            };
+        });
+        const themeClassHandle = (0, _mixins_1.useThemeClass)('step', (0, vue_1.computed)(() => {
+            const { value: status } = mergedStatusRef;
+            const { size } = stepsProps;
+            return `${status[0]}${size[0]}`;
+        }), cssVarsRef, stepsProps);
         return {
             stepsSlots,
             mergedClsPrefix: mergedClsPrefixRef,
             vertical: verticalRef,
             mergedStatus: mergedStatusRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { value: status } = mergedStatusRef;
-                const { size } = stepsProps;
-                const { common: { cubicBezierEaseInOut }, self: { stepHeaderFontWeight, [(0, _utils_1.createKey)('stepHeaderFontSize', size)]: stepHeaderFontSize, [(0, _utils_1.createKey)('indicatorIndexFontSize', size)]: indicatorIndexFontSize, [(0, _utils_1.createKey)('indicatorSize', size)]: indicatorSize, [(0, _utils_1.createKey)('indicatorIconSize', size)]: indicatorIconSize, [(0, _utils_1.createKey)('indicatorTextColor', status)]: indicatorTextColor, [(0, _utils_1.createKey)('indicatorBorderColor', status)]: indicatorBorderColor, [(0, _utils_1.createKey)('headerTextColor', status)]: headerTextColor, [(0, _utils_1.createKey)('splitorColor', status)]: splitorColor, [(0, _utils_1.createKey)('indicatorColor', status)]: indicatorColor, [(0, _utils_1.createKey)('descriptionTextColor', status)]: descriptionTextColor } } = mergedThemeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-description-text-color': descriptionTextColor,
-                    '--n-header-text-color': headerTextColor,
-                    '--n-indicator-border-color': indicatorBorderColor,
-                    '--n-indicator-color': indicatorColor,
-                    '--n-indicator-icon-size': indicatorIconSize,
-                    '--n-indicator-index-font-size': indicatorIndexFontSize,
-                    '--n-indicator-size': indicatorSize,
-                    '--n-indicator-text-color': indicatorTextColor,
-                    '--n-splitor-color': splitorColor,
-                    '--n-step-header-font-size': stepHeaderFontSize,
-                    '--n-step-header-font-weight': stepHeaderFontWeight
-                };
-            })
+            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 showDescription = this.description !== undefined || this.$slots.default;
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-step`,
+                this.themeClass,
                 showDescription && `${mergedClsPrefix}-step--show-description`
             ], style: this.cssVars },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-step-indicator` },

package/lib/styles.d.ts

@@ -9,9 +9,9 @@ export { breadcrumbDark } from './breadcrumb/styles';
 export { buttonDark, buttonRtl as unstableButtonRtl } from './button/styles';
 export { cardDark, cardRtl as unstableCardRtl } from './card/styles';
 export { cascaderDark } from './cascader/styles';
-export { checkboxDark } from './checkbox/styles';
+export { checkboxDark, checkboxRtl as unstableCheckboxRtl } from './checkbox/styles';
 export { codeDark } from './code/styles';
-export { collapseDark } from './collapse/styles';
+export { collapseDark, collapseRtl as unstableCollapseRtl } from './collapse/styles';
 export { dataTableDark } from './data-table/styles';
 export { datePickerDark } from './date-picker/styles';
 export { descriptionsDark } from './descriptions/styles';
@@ -26,8 +26,8 @@ export { emptyDark } from './empty/styles';
 export { formDark } from './form/styles';
 export { gradientTextDark } from './gradient-text/styles';
 export { iconDark } from './icon/styles';
-export { inputDark } from './input/styles';
-export { inputNumberDark } from './input-number/styles';
+export { inputDark, inputRtl as unstableInputRtl } from './input/styles';
+export { inputNumberDark, inputNumberRtl as unstableInputNumberRtl } from './input-number/styles';
 export { layoutDark } from './layout/styles';
 export { listDark } from './list/styles';
 export { loadingBarDark } from './loading-bar/styles';

package/lib/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.rateDark = exports.radioDark = exports.progressDark = exports.popselectDark = exports.popoverDark = exports.popconfirmDark = exports.unstablePageHeaderRtl = exports.paginationDark = exports.notificationDark = exports.modalDark = exports.messageDark = exports.menuDark = exports.mentionDark = exports.logDark = exports.loadingBarDark = exports.listDark = exports.layoutDark = exports.inputNumberDark = exports.inputDark = exports.iconDark = exports.gradientTextDark = exports.formDark = exports.emptyDark = exports.elementDark = exports.dynamicTagsDark = exports.dynamicInputDark = exports.dropdownDark = exports.drawerDark = exports.dividerDark = exports.dialogDark = exports.descriptionsDark = exports.datePickerDark = exports.dataTableDark = exports.collapseDark = exports.codeDark = exports.checkboxDark = exports.cascaderDark = exports.unstableCardRtl = exports.cardDark = exports.unstableButtonRtl = exports.buttonDark = exports.breadcrumbDark = exports.badgeDark = exports.backTopDark = exports.avatarDark = exports.autoCompleteDark = exports.anchorDark = exports.alertDark = exports.commonLight = exports.commonDark = void 0;
-exports.internalSelectionDark = exports.internalSelectMenuDark = exports.scrollbarDark = exports.watermarkDark = exports.uploadDark = exports.typographyDark = exports.treeSelectDark = exports.treeDark = exports.transferDark = exports.tooltipDark = exports.timelineDark = exports.timePickerDark = exports.thingDark = exports.unstableTagRtl = exports.tagDark = exports.tabsDark = exports.tableDark = exports.switchDark = exports.stepsDark = exports.statisticDark = exports.spinDark = exports.spaceDark = exports.sliderDark = exports.selectDark = exports.resultDark = void 0;
+exports.popoverDark = exports.popconfirmDark = exports.unstablePageHeaderRtl = exports.paginationDark = exports.notificationDark = exports.modalDark = exports.messageDark = exports.menuDark = exports.mentionDark = exports.logDark = exports.loadingBarDark = exports.listDark = exports.layoutDark = exports.unstableInputNumberRtl = exports.inputNumberDark = exports.unstableInputRtl = exports.inputDark = exports.iconDark = exports.gradientTextDark = exports.formDark = exports.emptyDark = exports.elementDark = exports.dynamicTagsDark = exports.dynamicInputDark = exports.dropdownDark = exports.drawerDark = exports.dividerDark = exports.dialogDark = exports.descriptionsDark = exports.datePickerDark = exports.dataTableDark = exports.unstableCollapseRtl = exports.collapseDark = exports.codeDark = exports.unstableCheckboxRtl = exports.checkboxDark = exports.cascaderDark = exports.unstableCardRtl = exports.cardDark = exports.unstableButtonRtl = exports.buttonDark = exports.breadcrumbDark = exports.badgeDark = exports.backTopDark = exports.avatarDark = exports.autoCompleteDark = exports.anchorDark = exports.alertDark = exports.commonLight = exports.commonDark = void 0;
+exports.internalSelectionDark = exports.internalSelectMenuDark = exports.scrollbarDark = exports.watermarkDark = exports.uploadDark = exports.typographyDark = exports.treeSelectDark = exports.treeDark = exports.transferDark = exports.tooltipDark = exports.timelineDark = exports.timePickerDark = exports.thingDark = exports.unstableTagRtl = exports.tagDark = exports.tabsDark = exports.tableDark = exports.switchDark = exports.stepsDark = exports.statisticDark = exports.spinDark = exports.spaceDark = exports.sliderDark = exports.selectDark = exports.resultDark = exports.rateDark = exports.radioDark = exports.progressDark = exports.popselectDark = void 0;
 var common_1 = require("./_styles/common");
 Object.defineProperty(exports, "commonDark", { enumerable: true, get: function () { return common_1.commonDark; } });
 Object.defineProperty(exports, "commonLight", { enumerable: true, get: function () { return common_1.commonLight; } });
@@ -29,10 +29,12 @@ var styles_10 = require("./cascader/styles");
 Object.defineProperty(exports, "cascaderDark", { enumerable: true, get: function () { return styles_10.cascaderDark; } });
 var styles_11 = require("./checkbox/styles");
 Object.defineProperty(exports, "checkboxDark", { enumerable: true, get: function () { return styles_11.checkboxDark; } });
+Object.defineProperty(exports, "unstableCheckboxRtl", { enumerable: true, get: function () { return styles_11.checkboxRtl; } });
 var styles_12 = require("./code/styles");
 Object.defineProperty(exports, "codeDark", { enumerable: true, get: function () { return styles_12.codeDark; } });
 var styles_13 = require("./collapse/styles");
 Object.defineProperty(exports, "collapseDark", { enumerable: true, get: function () { return styles_13.collapseDark; } });
+Object.defineProperty(exports, "unstableCollapseRtl", { enumerable: true, get: function () { return styles_13.collapseRtl; } });
 var styles_14 = require("./data-table/styles");
 Object.defineProperty(exports, "dataTableDark", { enumerable: true, get: function () { return styles_14.dataTableDark; } });
 var styles_15 = require("./date-picker/styles");
@@ -63,8 +65,10 @@ var styles_27 = require("./icon/styles");
 Object.defineProperty(exports, "iconDark", { enumerable: true, get: function () { return styles_27.iconDark; } });
 var styles_28 = require("./input/styles");
 Object.defineProperty(exports, "inputDark", { enumerable: true, get: function () { return styles_28.inputDark; } });
+Object.defineProperty(exports, "unstableInputRtl", { enumerable: true, get: function () { return styles_28.inputRtl; } });
 var styles_29 = require("./input-number/styles");
 Object.defineProperty(exports, "inputNumberDark", { enumerable: true, get: function () { return styles_29.inputNumberDark; } });
+Object.defineProperty(exports, "unstableInputNumberRtl", { enumerable: true, get: function () { return styles_29.inputNumberRtl; } });
 var styles_30 = require("./layout/styles");
 Object.defineProperty(exports, "layoutDark", { enumerable: true, get: function () { return styles_30.layoutDark; } });
 var styles_31 = require("./list/styles");

package/lib/time-picker/src/Panel.js

@@ -186,7 +186,7 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        var _a, _b;
+        var _a, _b, _c;
         const { mergedClsPrefix, mergedTheme } = this;
         return ((0, vue_1.h)("div", { tabindex: 0, class: `${mergedClsPrefix}-time-picker-panel`, onFocusin: this.onFocusin, onFocusout: this.onFocusout, onKeydown: this.onKeydown },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-time-picker-cols` },
@@ -242,9 +242,9 @@ exports.default = (0, vue_1.defineComponent)({
                             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-time-picker-col__padding` })
                         ]
                     }))) : null),
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-time-picker-actions` },
-                ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.includes('now')) ? ((0, vue_1.h)(button_1.NButton, { size: "tiny", theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.onNowClick }, { default: () => this.nowText })) : null,
-                ((_b = this.actions) === null || _b === void 0 ? void 0 : _b.includes('confirm')) ? ((0, vue_1.h)(button_1.NButton, { size: "tiny", type: "primary", class: `${mergedClsPrefix}-time-picker-actions__confirm`, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, disabled: this.isValueInvalid, onClick: this.onConfirmClick }, { default: () => this.confirmText })) : null),
+            ((_a = this.actions) === null || _a === void 0 ? void 0 : _a.length) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-time-picker-actions` },
+                ((_b = this.actions) === null || _b === void 0 ? void 0 : _b.includes('now')) ? ((0, vue_1.h)(button_1.NButton, { size: "tiny", theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.onNowClick }, { default: () => this.nowText })) : null,
+                ((_c = this.actions) === null || _c === void 0 ? void 0 : _c.includes('confirm')) ? ((0, vue_1.h)(button_1.NButton, { size: "tiny", type: "primary", class: `${mergedClsPrefix}-time-picker-actions__confirm`, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, disabled: this.isValueInvalid, onClick: this.onConfirmClick }, { default: () => this.confirmText })) : null)) : null,
             (0, vue_1.h)(_internal_1.NBaseFocusDetector, { onFocus: this.onFocusDetectorFocus })));
     }
 });

package/lib/time-picker/src/TimePicker.d.ts

@@ -1859,6 +1859,8 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
+    focus: () => void;
+    blur: () => void;
     mergedStatus: import("vue").ComputedRef<import("../../form/src/interface").FormValidationStatus | undefined>;
     mergedBordered: import("vue").ComputedRef<boolean>;
     mergedClsPrefix: import("vue").ComputedRef<string>;
@@ -1880,6 +1882,7 @@ declare const _default: import("vue").DefineComponent<{
     panelInstRef: import("vue").Ref<{
         $el: HTMLElement;
         hourScrollRef?: {
+            $el: HTMLElement;
             containerRef: HTMLElement | null;
             contentRef: HTMLElement | null;
             containerScrollTop: number;
@@ -1891,6 +1894,7 @@ declare const _default: import("vue").DefineComponent<{
             handleMouseLeaveWrapper: () => void;
         } | undefined;
         minuteScrollRef?: {
+            $el: HTMLElement;
             containerRef: HTMLElement | null;
             contentRef: HTMLElement | null;
             containerScrollTop: number;
@@ -1902,6 +1906,7 @@ declare const _default: import("vue").DefineComponent<{
             handleMouseLeaveWrapper: () => void;
         } | undefined;
         secondScrollRef?: {
+            $el: HTMLElement;
             containerRef: HTMLElement | null;
             contentRef: HTMLElement | null;
             containerScrollTop: number;
@@ -1913,6 +1918,7 @@ declare const _default: import("vue").DefineComponent<{
             handleMouseLeaveWrapper: () => void;
         } | undefined;
         amPmScrollRef?: {
+            $el: HTMLElement;
             containerRef: HTMLElement | null;
             contentRef: HTMLElement | null;
             containerScrollTop: number;
@@ -2377,7 +2383,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-icon-color': string;
         '--n-icon-color-disabled': string;
         '--n-bezier': string;
-    }>;
+    }> | undefined;
+    triggerThemeClass: import("vue").Ref<string> | undefined;
+    triggerOnRender: (() => void) | undefined;
     cssVars: import("vue").ComputedRef<{
         '--n-bezier': string;
         '--n-border-radius': string;
@@ -2393,9 +2401,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-panel-color': string;
         '--n-panel-divider-color': string;
         '--n-item-border-radius': string;
-    }>;
-    focus: () => void;
-    blur: () => void;
+    }> | 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<{
     to: {
         type: PropType<string | boolean | HTMLElement>;

package/lib/time-picker/src/TimePicker.js

@@ -81,7 +81,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedBorderedRef, mergedClsPrefixRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedBorderedRef, mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const { localeRef, dateLocaleRef } = (0, _mixins_1.useLocale)('TimePicker');
         const formItem = (0, _mixins_1.useFormItem)(props);
         const { mergedSizeRef, mergedDisabledRef, mergedStatusRef } = formItem;
@@ -518,8 +518,74 @@ exports.default = (0, vue_1.defineComponent)({
                 (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
-        return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, mergedBordered: mergedBorderedRef, mergedClsPrefix: mergedClsPrefixRef, namespace: namespaceRef, uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, isMounted: (0, vooks_1.useIsMounted)(), inputInstRef,
-            panelInstRef, adjustedTo: (0, _utils_1.useAdjustedTo)(props), mergedShow: mergedShowRef, localizedNow: localizedNowRef, localizedPlaceholder: localizedPlaceholderRef, localizedNegativeText: localizedNegativeTextRef, localizedPositiveText: localizedPositiveTextRef, hourInFormat: hourInFormatRef, minuteInFormat: minuteInFormatRef, secondInFormat: secondInFormatRef, mergedAttrSize: mergedAttrSizeRef, displayTimeString: displayTimeStringRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, isValueInvalid: isValueInvalidRef, isHourInvalid: isHourInvalidRef, isMinuteInvalid: isMinuteInvalidRef, isSecondInvalid: isSecondInvalidRef, transitionDisabled: transitionDisabledRef, hourValue: hourValueRef, minuteValue: minuteValueRef, secondValue: secondValueRef, amPmValue: amPmValueRef, handleTimeInputFocus,
+        const triggerCssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut }, self: { iconColor, iconColorDisabled } } = themeRef.value;
+            return {
+                '--n-icon-color': iconColor,
+                '--n-icon-color-disabled': iconColorDisabled,
+                '--n-bezier': cubicBezierEaseInOut
+            };
+        });
+        const triggerThemeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('time-picker-trigger', undefined, triggerCssVarsRef, props)
+            : undefined;
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { panelColor, itemTextColor, itemTextColorActive, itemColorHover, panelDividerColor, panelBoxShadow, itemOpacityDisabled, borderRadius, itemFontSize, itemWidth, itemHeight, panelActionPadding, itemBorderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border-radius': borderRadius,
+                '--n-item-color-hover': itemColorHover,
+                '--n-item-font-size': itemFontSize,
+                '--n-item-height': itemHeight,
+                '--n-item-opacity-disabled': itemOpacityDisabled,
+                '--n-item-text-color': itemTextColor,
+                '--n-item-text-color-active': itemTextColorActive,
+                '--n-item-width': itemWidth,
+                '--n-panel-action-padding': panelActionPadding,
+                '--n-panel-box-shadow': panelBoxShadow,
+                '--n-panel-color': panelColor,
+                '--n-panel-divider-color': panelDividerColor,
+                '--n-item-border-radius': itemBorderRadius
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('time-picker', undefined, cssVarsRef, props)
+            : undefined;
+        return {
+            focus: exposedMethods.focus,
+            blur: exposedMethods.blur,
+            mergedStatus: mergedStatusRef,
+            mergedBordered: mergedBorderedRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            namespace: namespaceRef,
+            uncontrolledValue: uncontrolledValueRef,
+            mergedValue: mergedValueRef,
+            isMounted: (0, vooks_1.useIsMounted)(),
+            inputInstRef,
+            panelInstRef,
+            adjustedTo: (0, _utils_1.useAdjustedTo)(props),
+            mergedShow: mergedShowRef,
+            localizedNow: localizedNowRef,
+            localizedPlaceholder: localizedPlaceholderRef,
+            localizedNegativeText: localizedNegativeTextRef,
+            localizedPositiveText: localizedPositiveTextRef,
+            hourInFormat: hourInFormatRef,
+            minuteInFormat: minuteInFormatRef,
+            secondInFormat: secondInFormatRef,
+            mergedAttrSize: mergedAttrSizeRef,
+            displayTimeString: displayTimeStringRef,
+            mergedSize: mergedSizeRef,
+            mergedDisabled: mergedDisabledRef,
+            isValueInvalid: isValueInvalidRef,
+            isHourInvalid: isHourInvalidRef,
+            isMinuteInvalid: isMinuteInvalidRef,
+            isSecondInvalid: isSecondInvalidRef,
+            transitionDisabled: transitionDisabledRef,
+            hourValue: hourValueRef,
+            minuteValue: minuteValueRef,
+            secondValue: secondValueRef,
+            amPmValue: amPmValueRef,
+            handleTimeInputFocus,
             handleTimeInputBlur,
             handleNowClick,
             handleConfirmClick,
@@ -536,36 +602,20 @@ exports.default = (0, vue_1.defineComponent)({
             handleTimeInputClear,
             handleFocusDetectorFocus,
             handleMenuKeyDown,
-            handleTriggerClick, mergedTheme: themeRef, triggerCssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut }, self: { iconColor, iconColorDisabled } } = themeRef.value;
-                return {
-                    '--n-icon-color': iconColor,
-                    '--n-icon-color-disabled': iconColorDisabled,
-                    '--n-bezier': cubicBezierEaseInOut
-                };
-            }), cssVars: (0, vue_1.computed)(() => {
-                const { self: { panelColor, itemTextColor, itemTextColorActive, itemColorHover, panelDividerColor, panelBoxShadow, itemOpacityDisabled, borderRadius, itemFontSize, itemWidth, itemHeight, panelActionPadding, itemBorderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-border-radius': borderRadius,
-                    '--n-item-color-hover': itemColorHover,
-                    '--n-item-font-size': itemFontSize,
-                    '--n-item-height': itemHeight,
-                    '--n-item-opacity-disabled': itemOpacityDisabled,
-                    '--n-item-text-color': itemTextColor,
-                    '--n-item-text-color-active': itemTextColorActive,
-                    '--n-item-width': itemWidth,
-                    '--n-panel-action-padding': panelActionPadding,
-                    '--n-panel-box-shadow': panelBoxShadow,
-                    '--n-panel-color': panelColor,
-                    '--n-panel-divider-color': panelDividerColor,
-                    '--n-item-border-radius': itemBorderRadius
-                };
-            }) });
+            handleTriggerClick,
+            mergedTheme: themeRef,
+            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 { mergedClsPrefix, $slots } = this;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-time-picker`, style: this.triggerCssVars },
+        const { mergedClsPrefix, $slots, triggerOnRender } = this;
+        triggerOnRender === null || triggerOnRender === void 0 ? void 0 : triggerOnRender();
+        return ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-time-picker`, this.triggerThemeClass], style: this.triggerCssVars },
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
                     (0, vue_1.h)(vueuc_1.VTarget, null, {
@@ -579,9 +629,14 @@ exports.default = (0, vue_1.defineComponent)({
                     }),
                     (0, vue_1.h)(vueuc_1.VFollower, { teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, show: this.mergedShow, to: this.adjustedTo, containerClass: this.namespace, placement: this.placement }, {
                         default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted }, {
-                            default: () => this.mergedShow
-                                ? (0, vue_1.withDirectives)((0, vue_1.h)(Panel_1.default, { ref: "panelInstRef", actions: this.actions, style: this.cssVars, seconds: this.seconds, minutes: this.minutes, hours: this.hours, transitionDisabled: this.transitionDisabled, hourValue: this.hourValue, showHour: this.hourInFormat, isHourInvalid: this.isHourInvalid, isHourDisabled: this.isHourDisabled, minuteValue: this.minuteValue, showMinute: this.minuteInFormat, isMinuteInvalid: this.isMinuteInvalid, isMinuteDisabled: this.isMinuteDisabled, secondValue: this.secondValue, amPmValue: this.amPmValue, showSecond: this.secondInFormat, isSecondInvalid: this.isSecondInvalid, isSecondDisabled: this.isSecondDisabled, isValueInvalid: this.isValueInvalid, nowText: this.localizedNow, confirmText: this.localizedPositiveText, use12Hours: this.use12Hours, onFocusout: this.handleMenuFocusOut, onKeydown: this.handleMenuKeyDown, onHourClick: this.handleHourClick, onMinuteClick: this.handleMinuteClick, onSecondClick: this.handleSecondClick, onAmPmClick: this.handleAmPmClick, onNowClick: this.handleNowClick, onConfirmClick: this.handleConfirmClick, onFocusDetectorFocus: this.handleFocusDetectorFocus }), [[vdirs_1.clickoutside, this.handleClickOutside]])
-                                : null
+                            default: () => {
+                                var _a;
+                                if (this.mergedShow) {
+                                    (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                                    return (0, vue_1.withDirectives)((0, vue_1.h)(Panel_1.default, { ref: "panelInstRef", actions: this.actions, class: this.themeClass, style: this.cssVars, seconds: this.seconds, minutes: this.minutes, hours: this.hours, transitionDisabled: this.transitionDisabled, hourValue: this.hourValue, showHour: this.hourInFormat, isHourInvalid: this.isHourInvalid, isHourDisabled: this.isHourDisabled, minuteValue: this.minuteValue, showMinute: this.minuteInFormat, isMinuteInvalid: this.isMinuteInvalid, isMinuteDisabled: this.isMinuteDisabled, secondValue: this.secondValue, amPmValue: this.amPmValue, showSecond: this.secondInFormat, isSecondInvalid: this.isSecondInvalid, isSecondDisabled: this.isSecondDisabled, isValueInvalid: this.isValueInvalid, nowText: this.localizedNow, confirmText: this.localizedPositiveText, use12Hours: this.use12Hours, onFocusout: this.handleMenuFocusOut, onKeydown: this.handleMenuKeyDown, onHourClick: this.handleHourClick, onMinuteClick: this.handleMinuteClick, onSecondClick: this.handleSecondClick, onAmPmClick: this.handleAmPmClick, onNowClick: this.handleNowClick, onConfirmClick: this.handleConfirmClick, onFocusDetectorFocus: this.handleFocusDetectorFocus }), [[vdirs_1.clickoutside, this.handleClickOutside]]);
+                                }
+                                return null;
+                            }
                         }))
                     })
                 ]