naive-ui 2.25.0 → 2.25.3

package/es/_internal/selection/src/Selection.js

@@ -3,7 +3,7 @@ import { h, defineComponent, Fragment, ref, computed, watch, toRef, nextTick, wa
 import { VOverflow } from 'vueuc';
 import { NPopover } from '../../../popover';
 import { NTag } from '../../../tag';
-import { useTheme } from '../../../_mixins';
+import { useThemeClass, useTheme } from '../../../_mixins';
 import { createKey, getTitleAttribute, render } from '../../../_utils';
 import Suffix from '../../suffix';
 import { internalSelectionLight } from '../styles';
@@ -31,7 +31,7 @@ export default defineComponent({
         }, loading: Boolean, autofocus: Boolean, showArrow: {
             type: Boolean,
             default: true
-        }, inputProps: Object, focused: Boolean, renderTag: Function, onKeyup: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], onClear: Function, onPatternInput: Function, onPatternFocus: Function, onPatternBlur: Function, renderLabel: Function, status: String }),
+        }, inputProps: Object, focused: Boolean, renderTag: Function, onKeyup: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], onClear: Function, onPatternInput: Function, onPatternFocus: Function, onPatternBlur: Function, renderLabel: Function, status: String, inlineThemeDisabled: Boolean }),
     setup(props) {
         const patternInputMirrorRef = ref(null);
         const patternInputRef = ref(null);
@@ -298,6 +298,75 @@ export default defineComponent({
                     props.disabled || patternInputFocusedRef.value ? -1 : 0;
             });
         });
+        const { inlineThemeDisabled } = props;
+        const cssVarsRef = computed(() => {
+            const { size } = props;
+            const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, placeholderColor, textColor, paddingSingle, paddingMultiple, caretColor, colorDisabled, textColorDisabled, placeholderColorDisabled, colorActive, boxShadowFocus, boxShadowActive, boxShadowHover, border, borderFocus, borderHover, borderActive, arrowColor, arrowColorDisabled, loadingColor, 
+            // form warning
+            colorActiveWarning, boxShadowFocusWarning, boxShadowActiveWarning, boxShadowHoverWarning, borderWarning, borderFocusWarning, borderHoverWarning, borderActiveWarning, 
+            // form error
+            colorActiveError, boxShadowFocusError, boxShadowActiveError, boxShadowHoverError, borderError, borderFocusError, borderHoverError, borderActiveError, 
+            // clear
+            clearColor, clearColorHover, clearColorPressed, clearSize, 
+            // arrow
+            arrowSize, [createKey('height', size)]: height, [createKey('fontSize', size)]: fontSize } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-border': border,
+                '--n-border-active': borderActive,
+                '--n-border-focus': borderFocus,
+                '--n-border-hover': borderHover,
+                '--n-border-radius': borderRadius,
+                '--n-box-shadow-active': boxShadowActive,
+                '--n-box-shadow-focus': boxShadowFocus,
+                '--n-box-shadow-hover': boxShadowHover,
+                '--n-caret-color': caretColor,
+                '--n-color': color,
+                '--n-color-active': colorActive,
+                '--n-color-disabled': colorDisabled,
+                '--n-font-size': fontSize,
+                '--n-height': height,
+                '--n-padding-single': paddingSingle,
+                '--n-padding-multiple': paddingMultiple,
+                '--n-placeholder-color': placeholderColor,
+                '--n-placeholder-color-disabled': placeholderColorDisabled,
+                '--n-text-color': textColor,
+                '--n-text-color-disabled': textColorDisabled,
+                '--n-arrow-color': arrowColor,
+                '--n-arrow-color-disabled': arrowColorDisabled,
+                '--n-loading-color': loadingColor,
+                // form warning
+                '--n-color-active-warning': colorActiveWarning,
+                '--n-box-shadow-focus-warning': boxShadowFocusWarning,
+                '--n-box-shadow-active-warning': boxShadowActiveWarning,
+                '--n-box-shadow-hover-warning': boxShadowHoverWarning,
+                '--n-border-warning': borderWarning,
+                '--n-border-focus-warning': borderFocusWarning,
+                '--n-border-hover-warning': borderHoverWarning,
+                '--n-border-active-warning': borderActiveWarning,
+                // form error
+                '--n-color-active-error': colorActiveError,
+                '--n-box-shadow-focus-error': boxShadowFocusError,
+                '--n-box-shadow-active-error': boxShadowActiveError,
+                '--n-box-shadow-hover-error': boxShadowHoverError,
+                '--n-border-error': borderError,
+                '--n-border-focus-error': borderFocusError,
+                '--n-border-hover-error': borderHoverError,
+                '--n-border-active-error': borderActiveError,
+                // clear
+                '--n-clear-size': clearSize,
+                '--n-clear-color': clearColor,
+                '--n-clear-color-hover': clearColorHover,
+                '--n-clear-color-pressed': clearColorPressed,
+                // arrow-size
+                '--n-arrow-size': arrowSize
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('internal-selection', computed(() => {
+                return props.size[0];
+            }), cssVarsRef, props)
+            : undefined;
         return {
             mergedTheme: themeRef,
             mergedClearable: mergedClearableRef,
@@ -342,73 +411,14 @@ export default defineComponent({
             getCounter,
             getTail,
             renderLabel: props.renderLabel,
-            cssVars: computed(() => {
-                const { size } = props;
-                const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, placeholderColor, textColor, paddingSingle, paddingMultiple, caretColor, colorDisabled, textColorDisabled, placeholderColorDisabled, colorActive, boxShadowFocus, boxShadowActive, boxShadowHover, border, borderFocus, borderHover, borderActive, arrowColor, arrowColorDisabled, loadingColor, 
-                // form warning
-                colorActiveWarning, boxShadowFocusWarning, boxShadowActiveWarning, boxShadowHoverWarning, borderWarning, borderFocusWarning, borderHoverWarning, borderActiveWarning, 
-                // form error
-                colorActiveError, boxShadowFocusError, boxShadowActiveError, boxShadowHoverError, borderError, borderFocusError, borderHoverError, borderActiveError, 
-                // clear
-                clearColor, clearColorHover, clearColorPressed, clearSize, 
-                // arrow
-                arrowSize, [createKey('height', size)]: height, [createKey('fontSize', size)]: fontSize } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-border': border,
-                    '--n-border-active': borderActive,
-                    '--n-border-focus': borderFocus,
-                    '--n-border-hover': borderHover,
-                    '--n-border-radius': borderRadius,
-                    '--n-box-shadow-active': boxShadowActive,
-                    '--n-box-shadow-focus': boxShadowFocus,
-                    '--n-box-shadow-hover': boxShadowHover,
-                    '--n-caret-color': caretColor,
-                    '--n-color': color,
-                    '--n-color-active': colorActive,
-                    '--n-color-disabled': colorDisabled,
-                    '--n-font-size': fontSize,
-                    '--n-height': height,
-                    '--n-padding-single': paddingSingle,
-                    '--n-padding-multiple': paddingMultiple,
-                    '--n-placeholder-color': placeholderColor,
-                    '--n-placeholder-color-disabled': placeholderColorDisabled,
-                    '--n-text-color': textColor,
-                    '--n-text-color-disabled': textColorDisabled,
-                    '--n-arrow-color': arrowColor,
-                    '--n-arrow-color-disabled': arrowColorDisabled,
-                    '--n-loading-color': loadingColor,
-                    // form warning
-                    '--n-color-active-warning': colorActiveWarning,
-                    '--n-box-shadow-focus-warning': boxShadowFocusWarning,
-                    '--n-box-shadow-active-warning': boxShadowActiveWarning,
-                    '--n-box-shadow-hover-warning': boxShadowHoverWarning,
-                    '--n-border-warning': borderWarning,
-                    '--n-border-focus-warning': borderFocusWarning,
-                    '--n-border-hover-warning': borderHoverWarning,
-                    '--n-border-active-warning': borderActiveWarning,
-                    // form error
-                    '--n-color-active-error': colorActiveError,
-                    '--n-box-shadow-focus-error': boxShadowFocusError,
-                    '--n-box-shadow-active-error': boxShadowActiveError,
-                    '--n-box-shadow-hover-error': boxShadowHoverError,
-                    '--n-border-error': borderError,
-                    '--n-border-focus-error': borderFocusError,
-                    '--n-border-hover-error': borderHoverError,
-                    '--n-border-active-error': borderActiveError,
-                    // clear
-                    '--n-clear-size': clearSize,
-                    '--n-clear-color': clearColor,
-                    '--n-clear-color-hover': clearColorHover,
-                    '--n-clear-color-pressed': clearColorPressed,
-                    // arrow-size
-                    '--n-arrow-size': arrowSize
-                };
-            })
+            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 { status, multiple, size, disabled, filterable, maxTagCount, bordered, clsPrefix, renderTag, renderLabel } = this;
+        const { status, multiple, size, disabled, filterable, maxTagCount, bordered, clsPrefix, onRender, renderTag, renderLabel } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         const maxTagCountResponsive = maxTagCount === 'responsive';
         const maxTagCountNumeric = typeof maxTagCount === 'number';
         const useMaxTagCount = maxTagCountResponsive || maxTagCountNumeric;
@@ -434,14 +444,14 @@ export default defineComponent({
             // May Overflow
             const renderCounter = maxTagCountResponsive
                 ? () => (h("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, ref: "counterWrapperRef" },
-                    h(NTag, { ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, onMouseleave: this.handleMouseLeaveCounter, disabled: disabled })))
+                    h(NTag, { size: size, ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, onMouseleave: this.handleMouseLeaveCounter, disabled: disabled })))
                 : undefined;
             let counter;
             if (maxTagCountNumeric) {
                 const rest = this.selectedOptions.length - maxTagCount;
                 if (rest > 0) {
                     counter = (h("div", { class: `${clsPrefix}-base-selection-tag-wrapper`, key: "__counter__" },
-                        h(NTag, { ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, disabled: disabled }, {
+                        h(NTag, { size: size, ref: "counterRef", onMouseenter: this.handleMouseEnterCounter, disabled: disabled }, {
                             default: () => `+${rest}`
                         })));
                 }
@@ -545,6 +555,7 @@ export default defineComponent({
         }
         return (h("div", { ref: "selfRef", class: [
                 `${clsPrefix}-base-selection`,
+                this.themeClass,
                 status && `${clsPrefix}-base-selection--${status}-status`,
                 {
                     [`${clsPrefix}-base-selection--active`]: this.active,

package/es/_internal/selection/styles/dark.js

@@ -22,19 +22,19 @@ const internalSelectionDark = {
             // default
             textColor: textColor2, textColorDisabled,
             placeholderColor,
-            placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: changeColor(primaryColor, { alpha: 0.1 }), border: '1px solid #0000', borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: null, boxShadowActive: `0 0 8px 0 ${changeColor(primaryColor, {
+            placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: changeColor(primaryColor, { alpha: 0.1 }), border: '1px solid #0000', borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: 'none', boxShadowActive: `0 0 8px 0 ${changeColor(primaryColor, {
                 alpha: 0.4
             })}`, boxShadowFocus: `0 0 8px 0 ${changeColor(primaryColor, {
                 alpha: 0.4
             })}`, caretColor: primaryColor, arrowColor: iconColor, arrowColorDisabled: iconColorDisabled, loadingColor: primaryColor, 
             // warning
-            borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: null, boxShadowActiveWarning: `0 0 8px 0 ${changeColor(warningColor, {
+            borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: 'none', boxShadowActiveWarning: `0 0 8px 0 ${changeColor(warningColor, {
                 alpha: 0.4
             })}`, boxShadowFocusWarning: `0 0 8px 0 ${changeColor(warningColor, {
                 alpha: 0.4
             })}`, colorActiveWarning: changeColor(warningColor, { alpha: 0.1 }), caretColorWarning: warningColor, 
             // error
-            borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: null, boxShadowActiveError: `0 0 8px 0 ${changeColor(errorColor, {
+            borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: 'none', boxShadowActiveError: `0 0 8px 0 ${changeColor(errorColor, {
                 alpha: 0.4
             })}`, boxShadowFocusError: `0 0 8px 0 ${changeColor(errorColor, {
                 alpha: 0.4

package/es/_internal/selection/styles/light.d.ts

@@ -20,7 +20,7 @@ declare const self: (vars: ThemeCommonVars) => {
     borderHover: string;
     borderActive: string;
     borderFocus: string;
-    boxShadowHover: null;
+    boxShadowHover: string;
     boxShadowActive: string;
     boxShadowFocus: string;
     caretColor: string;
@@ -31,7 +31,7 @@ declare const self: (vars: ThemeCommonVars) => {
     borderHoverWarning: string;
     borderActiveWarning: string;
     borderFocusWarning: string;
-    boxShadowHoverWarning: null;
+    boxShadowHoverWarning: string;
     boxShadowActiveWarning: string;
     boxShadowFocusWarning: string;
     colorActiveWarning: string;
@@ -40,7 +40,7 @@ declare const self: (vars: ThemeCommonVars) => {
     borderHoverError: string;
     borderActiveError: string;
     borderFocusError: string;
-    boxShadowHoverError: null;
+    boxShadowHoverError: string;
     boxShadowActiveError: string;
     boxShadowFocusError: string;
     colorActiveError: string;
@@ -75,7 +75,7 @@ declare const internalSelectionLight: import("../../../_mixins").Theme<"Internal
     borderHover: string;
     borderActive: string;
     borderFocus: string;
-    boxShadowHover: null;
+    boxShadowHover: string;
     boxShadowActive: string;
     boxShadowFocus: string;
     caretColor: string;
@@ -86,7 +86,7 @@ declare const internalSelectionLight: import("../../../_mixins").Theme<"Internal
     borderHoverWarning: string;
     borderActiveWarning: string;
     borderFocusWarning: string;
-    boxShadowHoverWarning: null;
+    boxShadowHoverWarning: string;
     boxShadowActiveWarning: string;
     boxShadowFocusWarning: string;
     colorActiveWarning: string;
@@ -95,7 +95,7 @@ declare const internalSelectionLight: import("../../../_mixins").Theme<"Internal
     borderHoverError: string;
     borderActiveError: string;
     borderFocusError: string;
-    boxShadowHoverError: null;
+    boxShadowHoverError: string;
     boxShadowActiveError: string;
     boxShadowFocusError: string;
     colorActiveError: string;

package/es/_internal/selection/styles/light.js

@@ -17,19 +17,19 @@ const self = (vars) => {
         // default
         textColor: textColor2, textColorDisabled,
         placeholderColor,
-        placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: inputColor, border: `1px solid ${borderColor}`, borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: null, boxShadowActive: `0 0 0 2px ${changeColor(primaryColor, {
+        placeholderColorDisabled, color: inputColor, colorDisabled: inputColorDisabled, colorActive: inputColor, border: `1px solid ${borderColor}`, borderHover: `1px solid ${primaryColorHover}`, borderActive: `1px solid ${primaryColor}`, borderFocus: `1px solid ${primaryColorHover}`, boxShadowHover: 'none', boxShadowActive: `0 0 0 2px ${changeColor(primaryColor, {
             alpha: 0.2
         })}`, boxShadowFocus: `0 0 0 2px ${changeColor(primaryColor, {
             alpha: 0.2
         })}`, caretColor: primaryColor, arrowColor: iconColor, arrowColorDisabled: iconColorDisabled, loadingColor: primaryColor, 
         // warning
-        borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: null, boxShadowActiveWarning: `0 0 0 2px ${changeColor(warningColor, {
+        borderWarning: `1px solid ${warningColor}`, borderHoverWarning: `1px solid ${warningColorHover}`, borderActiveWarning: `1px solid ${warningColor}`, borderFocusWarning: `1px solid ${warningColorHover}`, boxShadowHoverWarning: 'none', boxShadowActiveWarning: `0 0 0 2px ${changeColor(warningColor, {
             alpha: 0.2
         })}`, boxShadowFocusWarning: `0 0 0 2px ${changeColor(warningColor, {
             alpha: 0.2
         })}`, colorActiveWarning: inputColor, caretColorWarning: warningColor, 
         // error
-        borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: null, boxShadowActiveError: `0 0 0 2px ${changeColor(errorColor, {
+        borderError: `1px solid ${errorColor}`, borderHoverError: `1px solid ${errorColorHover}`, borderActiveError: `1px solid ${errorColor}`, borderFocusError: `1px solid ${errorColorHover}`, boxShadowHoverError: 'none', boxShadowActiveError: `0 0 0 2px ${changeColor(errorColor, {
             alpha: 0.2
         })}`, boxShadowFocusError: `0 0 0 2px ${changeColor(errorColor, {
             alpha: 0.2

package/es/_mixins/index.d.ts

@@ -6,4 +6,4 @@ export { default as useLocale } from './use-locale';
 export { default as useStyle } from './use-style';
 export { default as useHljs } from './use-hljs';
 export type { Hljs } from './use-hljs';
-export { useCssVarsClass } from './use-css-vars-class';
+export { useThemeClass } from './use-css-vars-class';

package/es/_mixins/index.js

@@ -4,4 +4,4 @@ export { default as useConfig, defaultClsPrefix } from './use-config';
 export { default as useLocale } from './use-locale';
 export { default as useStyle } from './use-style';
 export { default as useHljs } from './use-hljs';
-export { useCssVarsClass } from './use-css-vars-class';
+export { useThemeClass } from './use-css-vars-class';

package/es/_mixins/use-config.d.ts

@@ -1,5 +1,5 @@
-import { ComputedRef } from 'vue';
-import type { ConfigProviderInjection } from '../config-provider/src/internal-interface';
+import { ComputedRef, Ref } from 'vue';
+import type { RtlEnabledState, GlobalComponentConfig, Breakpoints } from '../config-provider/src/internal-interface';
 declare type UseConfigProps = Readonly<{
     bordered?: boolean;
     [key: string]: unknown;
@@ -8,9 +8,12 @@ export declare const defaultClsPrefix = "n";
 export default function useConfig(props?: UseConfigProps, options?: {
     defaultBordered?: boolean;
 }): {
-    NConfigProvider: ConfigProviderInjection | null;
+    inlineThemeDisabled: boolean | undefined;
+    mergedRtlRef: Ref<RtlEnabledState | undefined> | undefined;
     mergedBorderedRef: ComputedRef<boolean>;
     mergedClsPrefixRef: ComputedRef<string>;
+    mergedBreakpointsRef: Ref<Breakpoints> | undefined;
+    mergedComponentPropsRef: Ref<GlobalComponentConfig | undefined> | undefined;
     namespaceRef: ComputedRef<string | undefined>;
 };
 export {};

package/es/_mixins/use-config.js

@@ -6,7 +6,11 @@ export default function useConfig(props = {}, options = {
 }) {
     const NConfigProvider = inject(configProviderInjectionKey, null);
     return {
-        NConfigProvider,
+        // NConfigProvider,
+        inlineThemeDisabled: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.inlineThemeDisabled,
+        mergedRtlRef: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedRtlRef,
+        mergedComponentPropsRef: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef,
+        mergedBreakpointsRef: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedBreakpointsRef,
         mergedBorderedRef: computed(() => {
             var _a, _b;
             const { bordered } = props;

package/es/_mixins/use-css-vars-class.d.ts

@@ -1,4 +1,8 @@
 import { ComputedRef, Ref } from 'vue';
-export declare function useCssVarsClass(componentName: string, hashRef: Ref<string> | undefined, cssVarsRef: ComputedRef<Record<string, string>> | undefined, props: {
+export declare function useThemeClass(componentName: string, hashRef: Ref<string> | undefined, cssVarsRef: ComputedRef<Record<string, string>> | undefined, props: {
     themeOverrides?: unknown;
-}): Ref<string>;
+    builtinThemeOverrides?: unknown;
+}): {
+    themeClass: Ref<string>;
+    onRender: () => void;
+};

package/es/_mixins/use-css-vars-class.js

@@ -1,20 +1,18 @@
 import { ref, inject, watchEffect } from 'vue';
 import { hash } from 'css-render';
+import { useSsrAdapter } from '@css-render/vue3-ssr';
 import { configProviderInjectionKey } from '../config-provider/src/context';
 import { throwError } from '../_utils';
 import { c } from '../_utils/cssr';
-export function useCssVarsClass(componentName, hashRef, cssVarsRef, props) {
+export function useThemeClass(componentName, hashRef, cssVarsRef, props) {
     var _a;
     if (!cssVarsRef)
-        throwError('useCssVarsClass', 'cssVarsRef is not passed');
+        throwError('useThemeClass', 'cssVarsRef is not passed');
     const mergedThemeHashRef = (_a = inject(configProviderInjectionKey, null)) === null || _a === void 0 ? void 0 : _a.mergedThemeHashRef;
-    const cssVarsClassRef = ref('');
+    const themeClassRef = ref('');
+    const ssrAdapter = useSsrAdapter();
+    let renderCallback;
     const mountStyle = () => {
-        const cssVars = cssVarsRef.value;
-        let style = '';
-        for (const key in cssVars) {
-            style += `${key}: ${cssVars[key]};`;
-        }
         let finalThemeHash = componentName;
         const hashValue = hashRef ? hashRef.value : undefined;
         const themeHash = mergedThemeHashRef === null || mergedThemeHashRef === void 0 ? void 0 : mergedThemeHashRef.value;
@@ -22,16 +20,34 @@ export function useCssVarsClass(componentName, hashRef, cssVarsRef, props) {
             finalThemeHash += '-' + themeHash;
         if (hashValue)
             finalThemeHash += '-' + hashValue;
-        if (props.themeOverrides) {
-            finalThemeHash += '-' + hash(JSON.stringify(props.themeOverrides));
+        const { themeOverrides, builtinThemeOverrides } = props;
+        if (themeOverrides) {
+            finalThemeHash += '-' + hash(JSON.stringify(themeOverrides));
+        }
+        if (builtinThemeOverrides) {
+            finalThemeHash += '-' + hash(JSON.stringify(builtinThemeOverrides));
         }
-        cssVarsClassRef.value = finalThemeHash;
-        c(`.${finalThemeHash}`, style).mount({
-            id: finalThemeHash
-        });
+        themeClassRef.value = finalThemeHash;
+        renderCallback = () => {
+            const cssVars = cssVarsRef.value;
+            let style = '';
+            for (const key in cssVars) {
+                style += `${key}: ${cssVars[key]};`;
+            }
+            c(`.${finalThemeHash}`, style).mount({
+                id: finalThemeHash,
+                ssr: ssrAdapter
+            });
+            renderCallback = undefined;
+        };
     };
     watchEffect(() => {
         mountStyle();
     });
-    return cssVarsClassRef;
+    return {
+        themeClass: themeClassRef,
+        onRender: () => {
+            renderCallback === null || renderCallback === void 0 ? void 0 : renderCallback();
+        }
+    };
 }

package/es/_mixins/use-form-item.d.ts

@@ -1,5 +1,5 @@
 import { ComputedRef, Ref } from 'vue';
-import { FormValidationStatus } from '../form/src/interface';
+import type { FormValidationStatus } from '../form/src/interface';
 declare type FormItemSize = 'small' | 'medium' | 'large';
 declare type AllowedSize = 'tiny' | 'small' | 'medium' | 'large' | 'huge' | number;
 export interface FormItemInjection {

package/es/_utils/css/color-to-class.d.ts

@@ -0,0 +1 @@
+export declare function color2Class(color: string): string;

package/es/_utils/css/color-to-class.js

@@ -0,0 +1,3 @@
+export function color2Class(color) {
+    return color.replace(/#|\(|\)|,|\s/g, '_');
+}

package/es/_utils/css/format-length.d.ts

@@ -3,5 +3,5 @@ interface FormatLengthOptions {
     offset?: number;
     attachPx?: boolean;
 }
-declare function formatLength<T extends number | string | null | undefined | any>(length: T, { c, offset, attachPx }?: FormatLengthOptions): T extends null ? null : T extends undefined ? undefined : T extends string | number ? string : T;
-export default formatLength;
+export declare function formatLength<T extends number | string | null | undefined | any>(length: T, { c, offset, attachPx }?: FormatLengthOptions): T extends null ? null : T extends undefined ? undefined : T extends string | number ? string : T;
+export {};

package/es/_utils/css/format-length.js

@@ -1,6 +1,6 @@
 const pureNumberRegex = /^(\d|\.)+$/;
 const numberRegex = /(\d|\.)+/;
-function formatLength(length, { c = 1, offset = 0, attachPx = true } = {}) {
+export function formatLength(length, { c = 1, offset = 0, attachPx = true } = {}) {
     if (typeof length === 'number') {
         const result = (length + offset) * c;
         if (result === 0)
@@ -28,4 +28,3 @@ function formatLength(length, { c = 1, offset = 0, attachPx = true } = {}) {
     }
     return length;
 }
-export default formatLength;

package/es/_utils/css/index.d.ts

@@ -1 +1,2 @@
-export { default as formatLength } from './format-length';
+export { formatLength } from './format-length';
+export { color2Class } from './color-to-class';

package/es/_utils/css/index.js

@@ -1 +1,2 @@
-export { default as formatLength } from './format-length';
+export { formatLength } from './format-length';
+export { color2Class } from './color-to-class';

package/es/_utils/index.d.ts

@@ -2,6 +2,6 @@ export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, g
 export type { MaybeArray } from './vue';
 export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute } from './naive';
 export type { ExtractPublicPropTypes, ExtractInternalPropTypes, Mutable } from './naive';
-export { formatLength } from './css';
+export { formatLength, color2Class } from './css';
 export { createKey } from './cssr';
 export * from './composable';

package/es/_utils/index.js

@@ -1,5 +1,5 @@
 export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, getFirstSlotVNode, createDataKey, createRefSetter, createInjectionKey, resolveSlot, resolveSlotWithProps, resolveWrappedSlot, isSlotEmpty } from './vue';
 export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute } from './naive';
-export { formatLength } from './css';
+export { formatLength, color2Class } from './css';
 export { createKey } from './cssr';
 export * from './composable';

package/es/_utils/vue/resolve-slot.d.ts

@@ -1,8 +1,11 @@
-import { Slot, VNodeArrayChildren } from 'vue';
+import { Slot, VNodeArrayChildren, VNodeChild } from 'vue';
 /**
  * We shouldn't use the following functions with slot flags `_: 1, 2, 3`
  */
 export declare function resolveSlot(slot: Slot | undefined, fallback: () => VNodeArrayChildren): VNodeArrayChildren;
 export declare function resolveSlotWithProps<T>(slot: Slot | undefined, props: T, fallback: (props: T) => VNodeArrayChildren): VNodeArrayChildren;
-export declare function resolveWrappedSlot(slot: Slot | undefined, wrapper: (children: VNodeArrayChildren) => VNodeArrayChildren): VNodeArrayChildren | null;
+/**
+ * Resolve slot with wrapper if content exists, no fallback
+ */
+export declare function resolveWrappedSlot(slot: Slot | undefined, wrapper: (children: VNodeArrayChildren | null) => VNodeChild): VNodeChild;
 export declare function isSlotEmpty(slot: Slot | undefined): boolean;

package/es/_utils/vue/resolve-slot.js

@@ -23,14 +23,14 @@ export function resolveSlot(slot, fallback) {
     return (slot && ensureValidVNode(slot())) || fallback();
 }
 export function resolveSlotWithProps(slot, props, fallback) {
-    console.log(slot && ensureValidVNode(slot(props)));
     return (slot && ensureValidVNode(slot(props))) || fallback(props);
 }
+/**
+ * Resolve slot with wrapper if content exists, no fallback
+ */
 export function resolveWrappedSlot(slot, wrapper) {
     const children = slot && ensureValidVNode(slot());
-    if (children)
-        return wrapper(children);
-    return null;
+    return wrapper(children || null);
 }
 export function isSlotEmpty(slot) {
     return !(slot && ensureValidVNode(slot()));

package/es/alert/src/Alert.d.ts

@@ -10,7 +10,7 @@ declare const alertProps: {
         default: boolean;
     };
     type: {
-        type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        type: PropType<"default" | "error" | "info" | "success" | "warning">;
         default: string;
     };
     closable: {
@@ -192,7 +192,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     type: {
-        type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        type: PropType<"default" | "error" | "info" | "success" | "warning">;
         default: string;
     };
     closable: {
@@ -548,7 +548,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-padding': string;
         '--n-icon-margin-left': string;
         '--n-icon-margin-right': 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<{
     title: {
         type: StringConstructor;
@@ -559,7 +561,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     type: {
-        type: PropType<"default" | "success" | "error" | "warning" | "info">;
+        type: PropType<"default" | "error" | "info" | "success" | "warning">;
         default: string;
     };
     closable: {
@@ -730,7 +732,7 @@ declare const _default: import("vue").DefineComponent<{
         padding: string;
     }, any>>>;
 }>>, {
-    type: "default" | "success" | "error" | "warning" | "info";
+    type: "default" | "error" | "info" | "success" | "warning";
     onAfterLeave: Function;
     title: string;
     showIcon: boolean;