naive-ui 2.25.2 → 2.25.3

package/lib/_internal/scrollbar/src/ScrollBar.js

@@ -28,7 +28,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
     props: scrollbarProps,
     inheritAttrs: false,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         // dom ref
         const wrapperRef = (0, vue_1.ref)(null);
         const containerRef = (0, vue_1.ref)(null);
@@ -181,6 +181,19 @@ const Scrollbar = (0, vue_1.defineComponent)({
                 scrollToPosition(0, 0, 0, false, behavior);
             }
         };
+        const scrollBy = (options, y) => {
+            if (!props.scrollable)
+                return;
+            const { value: container } = mergedContainerRef;
+            if (!container)
+                return;
+            if (typeof options === 'object') {
+                container.scrollBy(options);
+            }
+            else {
+                container.scrollBy(options, y || 0);
+            }
+        };
         function scrollToPosition(left, top, elSize, debounce, behavior) {
             const { value: container } = mergedContainerRef;
             if (!container)
@@ -461,8 +474,23 @@ const Scrollbar = (0, vue_1.defineComponent)({
             (0, evtd_1.off)('mouseup', window, handleYScrollMouseUp, true);
         });
         const themeRef = (0, _mixins_1.useTheme)('Scrollbar', '-scrollbar', index_cssr_1.default, styles_1.scrollbarLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { common: { cubicBezierEaseInOut, scrollbarBorderRadius, scrollbarHeight, scrollbarWidth }, self: { color, colorHover } } = themeRef.value;
+            return {
+                '--n-scrollbar-bezier': cubicBezierEaseInOut,
+                '--n-scrollbar-color': color,
+                '--n-scrollbar-color-hover': colorHover,
+                '--n-scrollbar-border-radius': scrollbarBorderRadius,
+                '--n-scrollbar-width': scrollbarWidth,
+                '--n-scrollbar-height': scrollbarHeight
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('scrollbar', undefined, cssVarsRef, props)
+            : undefined;
         const exposedMethods = {
             scrollTo,
+            scrollBy,
             sync,
             syncUnifiedContainer,
             handleMouseEnterWrapper,
@@ -477,17 +505,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
             handleContentResize,
             handleContainerResize,
             handleYScrollMouseDown,
-            handleXScrollMouseDown, cssVars: (0, vue_1.computed)(() => {
-                const { common: { cubicBezierEaseInOut, scrollbarBorderRadius, scrollbarHeight, scrollbarWidth }, self: { color, colorHover } } = themeRef.value;
-                return {
-                    '--n-scrollbar-bezier': cubicBezierEaseInOut,
-                    '--n-scrollbar-color': color,
-                    '--n-scrollbar-color-hover': colorHover,
-                    '--n-scrollbar-border-radius': scrollbarBorderRadius,
-                    '--n-scrollbar-width': scrollbarWidth,
-                    '--n-scrollbar-height': scrollbarHeight
-                };
-            }) });
+            handleXScrollMouseDown, cssVars: inlineThemeDisabled ? undefined : cssVarsRef, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender });
     },
     render() {
         var _a;
@@ -495,11 +513,12 @@ const Scrollbar = (0, vue_1.defineComponent)({
         if (!this.scrollable)
             return (_a = $slots.default) === null || _a === void 0 ? void 0 : _a.call($slots);
         const createChildren = () => {
-            var _a;
+            var _a, _b;
+            (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
             return (0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
                 role: 'none',
                 ref: 'wrapperRef',
-                class: `${mergedClsPrefix}-scrollbar`,
+                class: [`${mergedClsPrefix}-scrollbar`, this.themeClass],
                 style: this.cssVars,
                 onMouseenter: triggerDisplayManually
                     ? undefined
@@ -508,7 +527,7 @@ const Scrollbar = (0, vue_1.defineComponent)({
                     ? undefined
                     : this.handleMouseLeaveWrapper
             }), [
-                this.container ? ((_a = $slots.default) === null || _a === void 0 ? void 0 : _a.call($slots)) : ((0, vue_1.h)("div", { role: "none", ref: "containerRef", class: [
+                this.container ? ((_b = $slots.default) === null || _b === void 0 ? void 0 : _b.call($slots)) : ((0, vue_1.h)("div", { role: "none", ref: "containerRef", class: [
                         `${mergedClsPrefix}-scrollbar-container`,
                         this.containerClass
                     ], style: this.containerStyle, onScroll: this.handleScroll, onWheel: this.onWheel },

package/lib/_internal/select-menu/src/SelectMenu.d.ts

@@ -51,7 +51,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableInlineTheme: BooleanConstructor;
+    inlineThemeDisabled: BooleanConstructor;
     onToggle: PropType<(tmNode: TreeNode<SelectOption>) => void>;
     theme: PropType<import("../../../_mixins").Theme<"InternalSelectMenu", {
         optionFontSizeSmall: string;
@@ -210,8 +210,6 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
-    themeClass?: import("vue").Ref<string> | undefined;
-    onRender?: (() => void) | undefined;
     selfRef: import("vue").Ref<HTMLElement | null>;
     getPendingTmNode: () => TreeNode<import("../../../select/src/interface").SelectBaseOption<string | number, string | ((option: import("../../../select/src/interface").SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, import("../../../select/src/interface").SelectBaseOption<string | number, string | ((option: import("../../../select/src/interface").SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, import("../../../select/src/interface").SelectBaseOption<string | number, string | ((option: import("../../../select/src/interface").SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>> | null;
     prev: () => void;
@@ -397,11 +395,26 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;
     } | null>;
-    style: import("vue").ComputedRef<({
+    itemSize: import("vue").ComputedRef<number>;
+    padding: import("vue").ComputedRef<import("seemly").Margin>;
+    flattenedNodes: import("vue").ComputedRef<TreeNode<import("../../../select/src/interface").SelectBaseOption<string | number, string | ((option: import("../../../select/src/interface").SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectGroupOption, SelectIgnoredOption>[]>;
+    empty: import("vue").ComputedRef<boolean>;
+    virtualListContainer(): HTMLElement;
+    virtualListContent(): HTMLElement;
+    doScroll: (e: Event) => void;
+    handleFocusin: (e: FocusEvent) => void;
+    handleFocusout: (e: FocusEvent) => void;
+    handleKeyUp: (e: KeyboardEvent) => void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+    handleMouseDown: (e: MouseEvent) => void;
+    handleVirtualListResize: () => void;
+    handleVirtualListScroll: (e: Event) => void;
+    cssVars: {
         '--n-height': string;
         '--n-action-divider-color': string;
         '--n-action-text-color': string;
@@ -423,23 +436,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-option-padding-left': string;
         '--n-loading-color': string;
         '--n-loading-size': string;
-    } | {
-        width: string | undefined;
-    } | undefined)[]>;
-    itemSize: import("vue").ComputedRef<number>;
-    padding: import("vue").ComputedRef<import("seemly").Margin>;
-    flattenedNodes: import("vue").ComputedRef<TreeNode<import("../../../select/src/interface").SelectBaseOption<string | number, string | ((option: import("../../../select/src/interface").SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectGroupOption, SelectIgnoredOption>[]>;
-    empty: import("vue").ComputedRef<boolean>;
-    virtualListContainer(): HTMLElement;
-    virtualListContent(): HTMLElement;
-    doScroll: (e: Event) => void;
-    handleFocusin: (e: FocusEvent) => void;
-    handleFocusout: (e: FocusEvent) => void;
-    handleKeyUp: (e: KeyboardEvent) => void;
-    handleKeyDown: (e: KeyboardEvent) => void;
-    handleMouseDown: (e: MouseEvent) => void;
-    handleVirtualListResize: () => void;
-    handleVirtualListScroll: (e: Event) => 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<{
     clsPrefix: {
         type: StringConstructor;
@@ -489,7 +488,7 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    disableInlineTheme: BooleanConstructor;
+    inlineThemeDisabled: BooleanConstructor;
     onToggle: PropType<(tmNode: TreeNode<SelectOption>) => void>;
     theme: PropType<import("../../../_mixins").Theme<"InternalSelectMenu", {
         optionFontSizeSmall: string;
@@ -654,7 +653,7 @@ declare const _default: import("vue").DefineComponent<{
     multiple: boolean;
     focusable: boolean;
     loading: boolean;
-    disableInlineTheme: boolean;
+    inlineThemeDisabled: boolean;
     scrollable: boolean;
     autoPending: boolean;
     virtualScroll: boolean;

package/lib/_internal/select-menu/src/SelectMenu.js

@@ -47,7 +47,7 @@ exports.default = (0, vue_1.defineComponent)({
         }, loading: Boolean, focusable: Boolean, renderLabel: Function, renderOption: Function, onMousedown: Function, onScroll: Function, onFocus: Function, onBlur: Function, onKeyup: Function, onKeydown: Function, onTabOut: Function, onMouseenter: Function, onMouseleave: Function, resetMenuOnOptionsChange: {
             type: Boolean,
             default: true
-        }, disableInlineTheme: Boolean, 
+        }, inlineThemeDisabled: Boolean, 
         // deprecated
         onToggle: Function }),
     setup(props) {
@@ -262,24 +262,18 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-loading-size': loadingSize
             };
         });
-        const { disableInlineTheme } = props;
-        const themeClassHandle = disableInlineTheme
+        const { inlineThemeDisabled } = props;
+        const themeClassHandle = inlineThemeDisabled
             ? (0, _mixins_1.useThemeClass)('internal-select-menu', (0, vue_1.computed)(() => props.size[0]), cssVarsRef, props)
-            : _mixins_1.emptyThemeClassHandle;
-        const styleRef = (0, vue_1.computed)(() => {
-            return [
-                { width: (0, _utils_1.formatLength)(props.width) },
-                disableInlineTheme ? undefined : cssVarsRef.value
-            ];
-        });
+            : undefined;
         const exposedProps = {
             selfRef,
             next,
             prev,
             getPendingTmNode
         };
-        return Object.assign(Object.assign({ mergedTheme: themeRef, virtualListRef,
-            scrollbarRef, style: styleRef, itemSize: itemSizeRef, padding: paddingRef, flattenedNodes: flattenedNodesRef, empty: emptyRef, virtualListContainer() {
+        return Object.assign({ mergedTheme: themeRef, virtualListRef,
+            scrollbarRef, itemSize: itemSizeRef, padding: paddingRef, flattenedNodes: flattenedNodesRef, empty: emptyRef, virtualListContainer() {
                 const { value } = virtualListRef;
                 return value === null || value === void 0 ? void 0 : value.listElRef;
             },
@@ -294,7 +288,7 @@ exports.default = (0, vue_1.defineComponent)({
             handleKeyDown,
             handleMouseDown,
             handleVirtualListResize,
-            handleVirtualListScroll }, exposedProps), themeClassHandle);
+            handleVirtualListScroll, cssVars: inlineThemeDisabled ? undefined : cssVarsRef.value, themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass, onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender }, exposedProps);
     },
     render() {
         const { $slots, virtualScroll, clsPrefix, mergedTheme, themeClass, onRender } = this;
@@ -303,7 +297,7 @@ exports.default = (0, vue_1.defineComponent)({
                 `${clsPrefix}-base-select-menu`,
                 themeClass,
                 this.multiple && `${clsPrefix}-base-select-menu--multiple`
-            ], style: this.style, onFocusin: this.handleFocusin, onFocusout: this.handleFocusout, onKeyup: this.handleKeyUp, onKeydown: this.handleKeyDown, onMousedown: this.handleMouseDown, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave },
+            ], style: [{ width: (0, _utils_1.formatLength)(this.width) }, this.cssVars], onFocusin: this.handleFocusin, onFocusout: this.handleFocusout, onKeyup: this.handleKeyUp, onKeydown: this.handleKeyDown, onMousedown: this.handleMouseDown, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave },
             this.loading ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__loading` },
                 (0, vue_1.h)(loading_1.default, { clsPrefix: clsPrefix, strokeWidth: 20 }))) : !this.empty ? ((0, vue_1.h)(scrollbar_1.NScrollbar, { ref: "scrollbarRef", theme: mergedTheme.peers.Scrollbar, themeOverrides: mergedTheme.peerOverrides.Scrollbar, scrollable: this.scrollable, container: virtualScroll ? this.virtualListContainer : undefined, content: virtualScroll ? this.virtualListContent : undefined, onScroll: virtualScroll ? undefined : this.doScroll }, {
                 default: () => {
@@ -319,7 +313,7 @@ exports.default = (0, vue_1.defineComponent)({
             })) : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__empty` }, (0, _utils_1.resolveSlot)($slots.empty, () => [
                 (0, vue_1.h)(empty_1.NEmpty, { theme: mergedTheme.peers.Empty, themeOverrides: mergedTheme.peerOverrides.Empty })
             ]))),
-            (0, _utils_1.resolveWrappedSlot)($slots.action, (children) => [
+            (0, _utils_1.resolveWrappedSlot)($slots.action, (children) => children && [
                 (0, vue_1.h)("div", { class: `${clsPrefix}-base-select-menu__action`, "data-action": true, key: "action" }, children),
                 (0, vue_1.h)(focus_detector_1.default, { onFocus: this.onTabOut, key: "focus-detector" })
             ])));

package/lib/_internal/selection/src/Selection.d.ts

@@ -63,7 +63,7 @@ declare const _default: import("vue").DefineComponent<{
     onPatternBlur: PropType<(e: FocusEvent) => void>;
     renderLabel: PropType<RenderLabel>;
     status: PropType<FormValidationStatus>;
-    disableInlineTheme: BooleanConstructor;
+    inlineThemeDisabled: BooleanConstructor;
     theme: PropType<import("../../../_mixins").Theme<"InternalSelection", {
         fontSizeTiny: string;
         fontSizeSmall: string;
@@ -272,8 +272,6 @@ declare const _default: import("vue").DefineComponent<{
         }, any>;
     }>>>;
 }, {
-    themeClass?: import("vue").Ref<string> | undefined;
-    onRender?: (() => void) | undefined;
     mergedTheme: import("vue").ComputedRef<{
         common: {
             baseColor: string;
@@ -549,6 +547,8 @@ declare const _default: import("vue").DefineComponent<{
         '--n-clear-color-pressed': string;
         '--n-arrow-size': 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<{
     clsPrefix: {
         type: StringConstructor;
@@ -602,7 +602,7 @@ declare const _default: import("vue").DefineComponent<{
     onPatternBlur: PropType<(e: FocusEvent) => void>;
     renderLabel: PropType<RenderLabel>;
     status: PropType<FormValidationStatus>;
-    disableInlineTheme: BooleanConstructor;
+    inlineThemeDisabled: BooleanConstructor;
     theme: PropType<import("../../../_mixins").Theme<"InternalSelection", {
         fontSizeTiny: string;
         fontSizeSmall: string;
@@ -819,7 +819,7 @@ declare const _default: import("vue").DefineComponent<{
     autofocus: boolean;
     loading: boolean;
     bordered: boolean | undefined;
-    disableInlineTheme: boolean;
+    inlineThemeDisabled: boolean;
     showArrow: boolean;
     selectedOption: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)> | null;
     selectedOptions: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>[] | null;

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

@@ -36,7 +36,7 @@ exports.default = (0, vue_1.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, disableInlineTheme: Boolean }),
+        }, 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 = (0, vue_1.ref)(null);
         const patternInputRef = (0, vue_1.ref)(null);
@@ -303,7 +303,7 @@ exports.default = (0, vue_1.defineComponent)({
                     props.disabled || patternInputFocusedRef.value ? -1 : 0;
             });
         });
-        const { disableInlineTheme } = props;
+        const { inlineThemeDisabled } = props;
         const cssVarsRef = (0, vue_1.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, 
@@ -367,12 +367,20 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-arrow-size': arrowSize
             };
         });
-        const themeClassHandle = disableInlineTheme
+        const themeClassHandle = inlineThemeDisabled
             ? (0, _mixins_1.useThemeClass)('internal-selection', (0, vue_1.computed)(() => {
                 return props.size[0];
             }), cssVarsRef, props)
-            : _mixins_1.emptyThemeClassHandle;
-        return Object.assign({ mergedTheme: themeRef, mergedClearable: mergedClearableRef, patternInputFocused: patternInputFocusedRef, filterablePlaceholder: filterablePlaceholderRef, label: labelRef, selected: selectedRef, showTagsPanel: showTagsPopoverRef, isCompositing: isCompositingRef, 
+            : undefined;
+        return {
+            mergedTheme: themeRef,
+            mergedClearable: mergedClearableRef,
+            patternInputFocused: patternInputFocusedRef,
+            filterablePlaceholder: filterablePlaceholderRef,
+            label: labelRef,
+            selected: selectedRef,
+            showTagsPanel: showTagsPopoverRef,
+            isCompositing: isCompositingRef,
             // dom ref
             counterRef,
             counterWrapperRef,
@@ -406,7 +414,12 @@ exports.default = (0, vue_1.defineComponent)({
             blurInput,
             updateCounter,
             getCounter,
-            getTail, renderLabel: props.renderLabel, cssVars: disableInlineTheme ? undefined : cssVarsRef }, themeClassHandle);
+            getTail,
+            renderLabel: props.renderLabel,
+            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, onRender, renderTag, renderLabel } = this;

package/lib/_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 { useThemeClass, emptyThemeClassHandle } from './use-css-vars-class';
+export { useThemeClass } from './use-css-vars-class';

package/lib/_mixins/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.emptyThemeClassHandle = exports.useThemeClass = exports.useHljs = exports.useStyle = exports.useLocale = exports.defaultClsPrefix = exports.useConfig = exports.createTheme = exports.useTheme = exports.useFormItem = void 0;
+exports.useThemeClass = exports.useHljs = exports.useStyle = exports.useLocale = exports.defaultClsPrefix = exports.useConfig = exports.createTheme = exports.useTheme = exports.useFormItem = void 0;
 var use_form_item_1 = require("./use-form-item");
 Object.defineProperty(exports, "useFormItem", { enumerable: true, get: function () { return __importDefault(use_form_item_1).default; } });
 var use_theme_1 = require("./use-theme");
@@ -20,4 +20,3 @@ var use_hljs_1 = require("./use-hljs");
 Object.defineProperty(exports, "useHljs", { enumerable: true, get: function () { return __importDefault(use_hljs_1).default; } });
 var use_css_vars_class_1 = require("./use-css-vars-class");
 Object.defineProperty(exports, "useThemeClass", { enumerable: true, get: function () { return use_css_vars_class_1.useThemeClass; } });
-Object.defineProperty(exports, "emptyThemeClassHandle", { enumerable: true, get: function () { return use_css_vars_class_1.emptyThemeClassHandle; } });

package/lib/_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/lib/_mixins/use-config.js

@@ -9,7 +9,11 @@ function useConfig(props = {}, options = {
 }) {
     const NConfigProvider = (0, vue_1.inject)(context_1.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: (0, vue_1.computed)(() => {
             var _a, _b;
             const { bordered } = props;

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

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

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.emptyThemeClassHandle = exports.useThemeClass = void 0;
+exports.useThemeClass = void 0;
 const vue_1 = require("vue");
 const css_render_1 = require("css-render");
 const vue3_ssr_1 = require("@css-render/vue3-ssr");
@@ -23,8 +23,12 @@ function useThemeClass(componentName, hashRef, cssVarsRef, props) {
             finalThemeHash += '-' + themeHash;
         if (hashValue)
             finalThemeHash += '-' + hashValue;
-        if (props.themeOverrides) {
-            finalThemeHash += '-' + (0, css_render_1.hash)(JSON.stringify(props.themeOverrides));
+        const { themeOverrides, builtinThemeOverrides } = props;
+        if (themeOverrides) {
+            finalThemeHash += '-' + (0, css_render_1.hash)(JSON.stringify(themeOverrides));
+        }
+        if (builtinThemeOverrides) {
+            finalThemeHash += '-' + (0, css_render_1.hash)(JSON.stringify(builtinThemeOverrides));
         }
         themeClassRef.value = finalThemeHash;
         renderCallback = () => {
@@ -51,7 +55,3 @@ function useThemeClass(componentName, hashRef, cssVarsRef, props) {
     };
 }
 exports.useThemeClass = useThemeClass;
-exports.emptyThemeClassHandle = {
-    themeClass: undefined,
-    onRender: undefined
-};

package/lib/_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/lib/_utils/vue/resolve-slot.js

@@ -30,11 +30,12 @@ function resolveSlotWithProps(slot, props, fallback) {
     return (slot && ensureValidVNode(slot(props))) || fallback(props);
 }
 exports.resolveSlotWithProps = resolveSlotWithProps;
+/**
+ * Resolve slot with wrapper if content exists, no fallback
+ */
 function resolveWrappedSlot(slot, wrapper) {
     const children = slot && ensureValidVNode(slot());
-    if (children)
-        return wrapper(children);
-    return null;
+    return wrapper(children || null);
 }
 exports.resolveWrappedSlot = resolveWrappedSlot;
 function isSlotEmpty(slot) {

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

@@ -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;

package/lib/alert/src/Alert.js

@@ -41,9 +41,9 @@ exports.default = (0, vue_1.defineComponent)({
     inheritAttrs: false,
     props: alertProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Alert', '-alert', index_cssr_1.default, styles_1.alertLight, props, mergedClsPrefixRef);
-        const cssVars = (0, vue_1.computed)(() => {
+        const cssVarsRef = (0, vue_1.computed)(() => {
             const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
             const { fontSize, borderRadius, titleFontWeight, lineHeight, iconSize, iconMargin, closeSize, closeMargin, padding } = self;
             const { type } = props;
@@ -71,6 +71,11 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-icon-margin-right': right
             };
         });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('alert', (0, vue_1.computed)(() => {
+                return props.type[0];
+            }), cssVarsRef, props)
+            : undefined;
         const visibleRef = (0, vue_1.ref)(true);
         const doAfterLeave = () => {
             const { onAfterLeave, onAfterHide // deprecated
@@ -97,16 +102,21 @@ exports.default = (0, vue_1.defineComponent)({
             handleCloseClick,
             handleAfterLeave,
             mergedTheme: themeRef,
-            cssVars
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
+        var _a;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return ((0, vue_1.h)(_internal_1.NFadeInExpandTransition, { onAfterLeave: this.handleAfterLeave }, {
             default: () => {
                 const { mergedClsPrefix, $slots } = this;
                 const attrs = {
                     class: [
                         `${mergedClsPrefix}-alert`,
+                        this.themeClass,
                         this.showIcon && `${mergedClsPrefix}-alert--show-icon`
                     ],
                     style: this.cssVars,
@@ -114,24 +124,29 @@ exports.default = (0, vue_1.defineComponent)({
                 };
                 return this.visible ? ((0, vue_1.h)("div", Object.assign({}, (0, vue_1.mergeProps)(this.$attrs, attrs)),
                     this.closable && ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-alert__close`, onClick: this.handleCloseClick })),
-                    this.showIcon && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert__icon`, "aria-hidden": "true" }, $slots.icon ? ($slots.icon()) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
-                        default: () => {
-                            switch (this.type) {
-                                case 'success':
-                                    return (0, vue_1.h)(icons_1.SuccessIcon, null);
-                                case 'info':
-                                    return (0, vue_1.h)(icons_1.InfoIcon, null);
-                                case 'warning':
-                                    return (0, vue_1.h)(icons_1.WarningIcon, null);
-                                case 'error':
-                                    return (0, vue_1.h)(icons_1.ErrorIcon, null);
-                                default:
-                                    return null;
+                    this.showIcon && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert__icon`, "aria-hidden": "true" }, (0, _utils_1.resolveSlot)($slots.icon, () => [
+                        (0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                            default: () => {
+                                switch (this.type) {
+                                    case 'success':
+                                        return (0, vue_1.h)(icons_1.SuccessIcon, null);
+                                    case 'info':
+                                        return (0, vue_1.h)(icons_1.InfoIcon, null);
+                                    case 'warning':
+                                        return (0, vue_1.h)(icons_1.WarningIcon, null);
+                                    case 'error':
+                                        return (0, vue_1.h)(icons_1.ErrorIcon, null);
+                                    default:
+                                        return null;
+                                }
                             }
-                        }
-                    })))),
+                        })
+                    ]))),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body` },
-                        this.title || $slots.header ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__title` }, $slots.header ? $slots.header() : this.title)) : null,
+                        (0, _utils_1.resolveWrappedSlot)($slots.header, (children) => {
+                            const mergedChildren = children || this.title;
+                            return mergedChildren ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__title` }, mergedChildren)) : null;
+                        }),
                         $slots.default && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__content` }, $slots))))) : null;
             }
         }));

package/lib/anchor/src/AnchorAdapter.js

@@ -35,7 +35,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Anchor',
     props: anchorProps,
     setup(props, { slots }) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Anchor', '-anchor', index_cssr_1.default, styles_1.anchorLight, props, mergedClsPrefixRef);
         const anchorRef = (0, vue_1.ref)(null);
         const cssVarsRef = (0, vue_1.computed)(() => {
@@ -55,13 +55,19 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-rail-width': railWidth
             };
         });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('anchor', undefined, cssVarsRef, props)
+            : undefined;
         return {
             scrollTo(href) {
                 var _a;
                 (_a = anchorRef.value) === null || _a === void 0 ? void 0 : _a.setActiveHref(href);
             },
             renderAnchor: () => {
-                return ((0, vue_1.h)(BaseAnchor_1.default, Object.assign({ ref: anchorRef, style: cssVarsRef.value }, (0, _utils_1.keep)(props, BaseAnchor_1.baseAnchorPropKeys), { mergedClsPrefix: mergedClsPrefixRef.value }), slots));
+                themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender();
+                return ((0, vue_1.h)(BaseAnchor_1.default, Object.assign({ ref: anchorRef, style: inlineThemeDisabled
+                        ? undefined
+                        : cssVarsRef.value, class: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value }, (0, _utils_1.keep)(props, BaseAnchor_1.baseAnchorPropKeys), { mergedClsPrefix: mergedClsPrefixRef.value }), slots));
             }
         };
     },