naive-ui 2.25.3 → 2.25.6

package/lib/radio/src/styles/radio.cssr.js

@@ -20,19 +20,23 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --n-text-color
 // --n-text-color-disabled
 // --n-label-padding
+// --n-label-line-height
 
 
 exports.default = (0, cssr_1.cB)('radio', `
- line-height: 1;
+ line-height: var(--n-label-line-height);
  outline: none;
  position: relative;
  user-select: none;
  display: inline-flex;
- vertical-align: middle;
- align-items: center;
+ align-items: flex-start;
+ flex-wrap: nowrap;
  font-size: var(--n-font-size);
-`, [(0, cssr_1.cE)('dot', `
- height: var(--n-radio-size);
+ word-break: break-word;
+`, [(0, cssr_1.cE)('dot-wrapper', `
+ position: relative;
+ flex-shrink: 0;
+ flex-grow: 0;
  width: var(--n-radio-size);
  `), (0, cssr_1.cB)('radio-input', `
  position: absolute;
@@ -46,13 +50,18 @@ exports.default = (0, cssr_1.cB)('radio', `
  z-index: 1;
  cursor: pointer;
  `), (0, cssr_1.cE)('dot', `
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ height: var(--n-radio-size);
+ width: var(--n-radio-size);
  background: var(--n-color);
  box-shadow: var(--n-box-shadow);
+ border-radius: 50%;
  transition:
  background-color .3s var(--n-bezier),
  box-shadow .3s var(--n-bezier);
- position: relative;
- border-radius: 50%;
  `, [(0, cssr_1.c)('&::before', `
  content: "";
  opacity: 0;
@@ -77,7 +86,6 @@ exports.default = (0, cssr_1.cB)('radio', `
  color: var(--n-text-color);
  padding: var(--n-label-padding);
  display: inline-block;
- white-space: nowrap;
  transition: color .3s var(--n-bezier);
  `), (0, cssr_1.cNotM)('disabled', `
  cursor: pointer;
@@ -93,7 +101,6 @@ exports.default = (0, cssr_1.cB)('radio', `
 }, [(0, cssr_1.c)('&::before', {
   backgroundColor: 'var(--n-dot-color-disabled)'
 }), (0, cssr_1.cM)('checked', `
- transform: scale(1);
  opacity: 1;
  `)]), (0, cssr_1.cE)('label', {
   color: 'var(--n-text-color-disabled)'

package/lib/radio/styles/dark.js

@@ -10,8 +10,8 @@ const radioDark = {
     name: 'Radio',
     common: common_1.commonDark,
     self(vars) {
-        const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge } = vars;
-        return Object.assign(Object.assign({}, _common_1.default), { buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
+        const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge, lineHeight } = vars;
+        return Object.assign(Object.assign({}, _common_1.default), { labelLineHeight: lineHeight, buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
             fontSizeMedium,
             fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: '#0000', colorDisabled: inputColorDisabled, textColor: textColor2, textColorDisabled: textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: primaryColor, buttonColor: '#0000', buttonColorActive: primaryColor, buttonTextColor: textColor2, buttonTextColorActive: baseColor, buttonTextColorHover: primaryColor, opacityDisabled: opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: `inset 0 0 0 1px ${primaryColor}`, buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
     }

package/lib/radio/styles/light.d.ts

@@ -1,6 +1,7 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import { Theme } from '../../_mixins/use-theme';
 declare const self: (vars: ThemeCommonVars) => {
+    labelLineHeight: string;
     buttonHeightSmall: string;
     buttonHeightMedium: string;
     buttonHeightLarge: string;

package/lib/radio/styles/light.js

@@ -7,8 +7,8 @@ const seemly_1 = require("seemly");
 const _common_1 = __importDefault(require("./_common"));
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
+    const { borderColor, primaryColor, baseColor, textColorDisabled, inputColorDisabled, textColor2, opacityDisabled, borderRadius, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightSmall, heightMedium, heightLarge, lineHeight } = vars;
+    return Object.assign(Object.assign({}, _common_1.default), { labelLineHeight: lineHeight, buttonHeightSmall: heightSmall, buttonHeightMedium: heightMedium, buttonHeightLarge: heightLarge, fontSizeSmall,
         fontSizeMedium,
         fontSizeLarge, boxShadow: `inset 0 0 0 1px ${borderColor}`, boxShadowActive: `inset 0 0 0 1px ${primaryColor}`, boxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.2 })}`, boxShadowHover: `inset 0 0 0 1px ${primaryColor}`, boxShadowDisabled: `inset 0 0 0 1px ${borderColor}`, color: baseColor, colorDisabled: inputColorDisabled, textColor: textColor2, textColorDisabled: textColorDisabled, dotColorActive: primaryColor, dotColorDisabled: borderColor, buttonBorderColor: borderColor, buttonBorderColorActive: primaryColor, buttonBorderColorHover: borderColor, buttonColor: baseColor, buttonColorActive: baseColor, buttonTextColor: textColor2, buttonTextColorActive: primaryColor, buttonTextColorHover: primaryColor, opacityDisabled: opacityDisabled, buttonBoxShadowFocus: `inset 0 0 0 1px ${primaryColor}, 0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}`, buttonBoxShadowHover: 'inset 0 0 0 1px #0000', buttonBoxShadow: 'inset 0 0 0 1px #0000', buttonBorderRadius: borderRadius });
 };

package/lib/scrollbar/src/ScrollBar.d.ts

@@ -47,6 +47,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     }, any>>>;
 }, {
     scrollbarInstRef: import("vue").Ref<{
+        $el: HTMLElement;
         containerRef: HTMLElement | null;
         contentRef: HTMLElement | null;
         containerScrollTop: number;

package/lib/select/src/Select.d.ts

@@ -1292,7 +1292,9 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     cssVars: import("vue").ComputedRef<{
         '--n-menu-box-shadow': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     focus: () => void;
     blur: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/lib/select/src/Select.js

@@ -572,6 +572,15 @@ exports.default = (0, vue_1.defineComponent)({
                 (_a = triggerRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { menuBoxShadow } } = themeRef.value;
+            return {
+                '--n-menu-box-shadow': menuBoxShadow
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('select', undefined, cssVarsRef, props)
+            : undefined;
         return Object.assign(Object.assign({}, exposedMethods), { mergedStatus: mergedStatusRef, mergedClsPrefix: mergedClsPrefixRef, mergedBordered: mergedBorderedRef, namespace: namespaceRef, treeMate: treeMateRef, isMounted: (0, vooks_1.useIsMounted)(), triggerRef,
             menuRef, pattern: patternRef, uncontrolledShow: uncontrolledShowRef, mergedShow: mergedShowRef, adjustedTo: (0, _utils_1.useAdjustedTo)(props), uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, followerRef, localizedPlaceholder: localizedPlaceholderRef, selectedOption: selectedOptionRef, selectedOptions: selectedOptionsRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, focused: focusedRef, activeWithoutMenuOpen: activeWithoutMenuOpenRef, inlineThemeDisabled,
             onTriggerInputFocus,
@@ -587,12 +596,7 @@ exports.default = (0, vue_1.defineComponent)({
             syncPosition,
             handleMenuAfterLeave,
             handleMenuClickOutside,
-            handleMenuScroll, handleMenuKeydown: handleKeydown, handleMenuMousedown, mergedTheme: themeRef, cssVars: (0, vue_1.computed)(() => {
-                const { self: { menuBoxShadow } } = themeRef.value;
-                return {
-                    '--n-menu-box-shadow': menuBoxShadow
-                };
-            }) });
+            handleMenuScroll, handleMenuKeydown: handleKeydown, handleMenuMousedown, mergedTheme: themeRef, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
         return ((0, vue_1.h)("div", { class: `${this.mergedClsPrefix}-select` },
@@ -606,22 +610,26 @@ exports.default = (0, vue_1.defineComponent)({
                     (0, vue_1.h)(vueuc_1.VFollower, { ref: "followerRef", show: this.mergedShow, to: this.adjustedTo, teleportDisabled: this.adjustedTo === _utils_1.useAdjustedTo.tdkey, containerClass: this.namespace, width: this.consistentMenuWidth ? 'target' : undefined, minWidth: "target", placement: this.placement }, {
                         default: () => ((0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, onAfterLeave: this.handleMenuAfterLeave }, {
                             default: () => {
-                                var _a, _b;
-                                return (this.mergedShow ||
-                                    this.displayDirective === 'show') &&
-                                    (0, vue_1.withDirectives)((0, vue_1.h)(_internal_1.NInternalSelectMenu, Object.assign({}, this.menuProps, { ref: "menuRef", inlineThemeDisabled: this.inlineThemeDisabled, virtualScroll: this.consistentMenuWidth && this.virtualScroll, class: [
-                                            `${this.mergedClsPrefix}-select-menu`,
-                                            (_a = this.menuProps) === null || _a === void 0 ? void 0 : _a.class
-                                        ], clsPrefix: this.mergedClsPrefix, focusable: true, autoPending: true, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
-                                            .InternalSelectMenu, treeMate: this.treeMate, multiple: this.multiple, size: 'medium', renderOption: this.renderOption, renderLabel: this.renderLabel, value: this.mergedValue, style: [(_b = this.menuProps) === null || _b === void 0 ? void 0 : _b.style, this.cssVars], onToggle: this.handleToggle, onScroll: this.handleMenuScroll, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeydown: this.handleMenuKeydown, onTabOut: this.handleMenuTabOut, onMousedown: this.handleMenuMousedown, show: this.mergedShow, resetMenuOnOptionsChange: this.resetMenuOnOptionsChange }), {
-                                        empty: () => { var _a, _b; return [(_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a)]; },
-                                        action: () => { var _a, _b; return [(_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
-                                    }), this.displayDirective === 'show'
-                                        ? [
-                                            [vue_1.vShow, this.mergedShow],
-                                            [vdirs_1.clickoutside, this.handleMenuClickOutside]
-                                        ]
-                                        : [[vdirs_1.clickoutside, this.handleMenuClickOutside]]);
+                                var _a, _b, _c;
+                                if (!(this.mergedShow ||
+                                    this.displayDirective === 'show')) {
+                                    return null;
+                                }
+                                (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+                                return (0, vue_1.withDirectives)((0, vue_1.h)(_internal_1.NInternalSelectMenu, Object.assign({}, this.menuProps, { ref: "menuRef", inlineThemeDisabled: this.inlineThemeDisabled, virtualScroll: this.consistentMenuWidth && this.virtualScroll, class: [
+                                        `${this.mergedClsPrefix}-select-menu`,
+                                        this.themeClass,
+                                        (_b = this.menuProps) === null || _b === void 0 ? void 0 : _b.class
+                                    ], clsPrefix: this.mergedClsPrefix, focusable: true, autoPending: true, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides
+                                        .InternalSelectMenu, treeMate: this.treeMate, multiple: this.multiple, size: 'medium', renderOption: this.renderOption, renderLabel: this.renderLabel, value: this.mergedValue, style: [(_c = this.menuProps) === null || _c === void 0 ? void 0 : _c.style, this.cssVars], onToggle: this.handleToggle, onScroll: this.handleMenuScroll, onFocus: this.handleMenuFocus, onBlur: this.handleMenuBlur, onKeydown: this.handleMenuKeydown, onTabOut: this.handleMenuTabOut, onMousedown: this.handleMenuMousedown, show: this.mergedShow, resetMenuOnOptionsChange: this.resetMenuOnOptionsChange }), {
+                                    empty: () => { var _a, _b; return [(_b = (_a = this.$slots).empty) === null || _b === void 0 ? void 0 : _b.call(_a)]; },
+                                    action: () => { var _a, _b; return [(_b = (_a = this.$slots).action) === null || _b === void 0 ? void 0 : _b.call(_a)]; }
+                                }), this.displayDirective === 'show'
+                                    ? [
+                                        [vue_1.vShow, this.mergedShow],
+                                        [vdirs_1.clickoutside, this.handleMenuClickOutside]
+                                    ]
+                                    : [[vdirs_1.clickoutside, this.handleMenuClickOutside]]);
                             }
                         }))
                     })

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/tabs/src/styles/index.cssr.js

@@ -101,6 +101,8 @@ exports.default = (0, cssr_1.cB)('tabs', `
  `)]), (0, cssr_1.cB)('tabs-nav-scroll-content', `
  display: flex;
  position: relative;
+ min-width: 100%;
+ width: fit-content;
  `), (0, cssr_1.cB)('tabs-wrapper', `
  display: inline-flex;
  flex-wrap: nowrap;

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 })));
     }
 });