naive-ui 2.25.2 → 2.25.3

package/es/divider/src/Divider.d.ts

@@ -53,7 +53,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-color': string;
         '--n-text-color': string;
         '--n-font-weight': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly titlePlacement: {
         readonly type: PropType<"left" | "right" | "center">;

package/es/divider/src/Divider.js

@@ -1,5 +1,5 @@
 import { h, computed, defineComponent, Fragment } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { dividerLight } from '../styles';
 import style from './styles/index.cssr';
 const dividerProps = Object.assign(Object.assign({}, useTheme.props), { titlePlacement: {
@@ -10,25 +10,34 @@ export default defineComponent({
     name: 'Divider',
     props: dividerProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Divider', '-divider', style, dividerLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { common: { cubicBezierEaseInOut }, self: { color, textColor, fontWeight } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-color': color,
+                '--n-text-color': textColor,
+                '--n-font-weight': fontWeight
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('divider', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: computed(() => {
-                const { common: { cubicBezierEaseInOut }, self: { color, textColor, fontWeight } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-color': color,
-                    '--n-text-color': textColor,
-                    '--n-font-weight': fontWeight
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
+        var _a;
         const { $slots, titlePlacement, vertical, dashed, cssVars, mergedClsPrefix } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return (h("div", { role: "separator", class: [
                 `${mergedClsPrefix}-divider`,
+                this.themeClass,
                 {
                     [`${mergedClsPrefix}-divider--vertical`]: vertical,
                     [`${mergedClsPrefix}-divider--no-title`]: !$slots.default,

package/es/dynamic-input/src/DynamicInput.js

@@ -54,7 +54,7 @@ export default defineComponent({
                 }
             });
         }
-        const { NConfigProvider, mergedClsPrefixRef } = useConfig();
+        const { mergedComponentPropsRef, mergedClsPrefixRef } = useConfig();
         const NFormItem = inject(formItemInjectionKey, null);
         const uncontrolledValueRef = ref(props.defaultValue);
         const controlledValueRef = toRef(props, 'value');
@@ -76,7 +76,7 @@ export default defineComponent({
         });
         const buttonSizeRef = computed(() => {
             var _a, _b;
-            return (_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DynamicInput) === null || _b === void 0 ? void 0 : _b.buttonSize;
+            return (_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.DynamicInput) === null || _b === void 0 ? void 0 : _b.buttonSize;
         });
         function doUpdateValue(value) {
             const { onInput, 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;

package/es/dynamic-tags/src/DynamicTags.d.ts

@@ -2567,7 +2567,9 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     cssVars: import("vue").ComputedRef<{
         '--n-input-width': 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<{
     closable: {
         type: BooleanConstructor;

package/es/dynamic-tags/src/DynamicTags.js

@@ -7,7 +7,7 @@ import { NSpace } from '../../space';
 import { NInput } from '../../input';
 import { NTag } from '../../tag';
 import { NBaseIcon } from '../../_internal';
-import { useTheme, useFormItem, useLocale, useConfig } from '../../_mixins';
+import { useTheme, useFormItem, useLocale, useConfig, useThemeClass } from '../../_mixins';
 import { call, smallerSize, warnOnce } from '../../_utils';
 import { dynamicTagsLight } from '../styles';
 import style from './styles/index.cssr';
@@ -31,7 +31,7 @@ export default defineComponent({
                 }
             });
         }
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const { localeRef } = useLocale('DynamicTags');
         const formItem = useFormItem(props);
         const { mergedDisabledRef } = formItem;
@@ -100,6 +100,15 @@ export default defineComponent({
                 inputForceFocusedRef.value = false;
             });
         }
+        const cssVarsRef = computed(() => {
+            const { self: { inputWidth } } = themeRef.value;
+            return {
+                '--n-input-width': inputWidth
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('dynamic-tags', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             inputInstRef,
@@ -117,17 +126,15 @@ export default defineComponent({
             handleCloseClick,
             handleInputConfirm,
             mergedTheme: themeRef,
-            cssVars: computed(() => {
-                const { self: { inputWidth } } = themeRef.value;
-                return {
-                    '--n-input-width': inputWidth
-                };
-            })
+            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 { mergedTheme, cssVars, mergedClsPrefix } = this;
-        return (h(NSpace, { class: `${mergedClsPrefix}-dynamic-tags`, size: "small", style: cssVars, theme: mergedTheme.peers.Space, themeOverrides: mergedTheme.peerOverrides.Space, itemStyle: "display: flex;" }, {
+        const { mergedTheme, cssVars, mergedClsPrefix, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return (h(NSpace, { class: [`${mergedClsPrefix}-dynamic-tags`, this.themeClass], size: "small", style: cssVars, theme: mergedTheme.peers.Space, themeOverrides: mergedTheme.peerOverrides.Space, itemStyle: "display: flex;" }, {
             default: () => {
                 const { mergedTheme, tagStyle, type, round, size, color, closable, mergedDisabled, showInput, inputValue, inputStyle, inputSize, inputForceFocused, triggerDisabled, handleInputKeyUp, handleInputBlur, handleAddClick, handleCloseClick, handleInputConfirm, $slots } = this;
                 return this.mergedValue

package/es/element/src/Element.d.ts

@@ -19,7 +19,9 @@ declare const _default: import("vue").DefineComponent<{
     readonly builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Element", {}, any>>>;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
-    cssVars: import("vue").ComputedRef<Record<string, string | number>>;
+    cssVars: import("vue").ComputedRef<Record<string, 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 tag: {
         readonly type: StringConstructor;

package/es/element/src/Element.js

@@ -1,6 +1,6 @@
 import { computed, h, defineComponent } from 'vue';
 import { kebabCase } from 'lodash-es';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { elementLight } from '../styles';
 const elementProps = Object.assign(Object.assign({}, useTheme.props), { tag: {
         type: String,
@@ -11,25 +11,32 @@ export default defineComponent({
     alias: ['El'],
     props: elementProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Element', '-element', undefined, elementLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { common } = themeRef.value;
+            return Object.keys(common).reduce((prevValue, key) => {
+                prevValue[`--${kebabCase(key)}`] = common[key];
+                return prevValue;
+            }, {});
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('element', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: computed(() => {
-                const { common } = themeRef.value;
-                return Object.keys(common).reduce((prevValue, key) => {
-                    prevValue[`--${kebabCase(key)}`] = common[key];
-                    return prevValue;
-                }, {});
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
         var _a;
-        const { tag, mergedClsPrefix, cssVars, $slots } = this;
+        const { tag, mergedClsPrefix, cssVars, themeClass, onRender, $slots } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
         return h(tag, {
             role: 'none',
-            class: `${mergedClsPrefix}-element`,
+            class: [`${mergedClsPrefix}-element`, themeClass],
             style: cssVars
         }, (_a = $slots.default) === null || _a === void 0 ? void 0 : _a.call($slots));
     }

package/es/empty/src/Empty.d.ts

@@ -121,7 +121,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-text-color': string;
         '--n-icon-color': string;
         '--n-extra-text-color': 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<{
     description: StringConstructor;
     showDescription: {

package/es/empty/src/Empty.js

@@ -1,7 +1,7 @@
 import { h, defineComponent, computed, inject } from 'vue';
 import { configProviderInjectionKey } from '../../config-provider/src/context';
 import { EmptyIcon } from '../../_internal/icons';
-import { useConfig, useLocale, useTheme } from '../../_mixins';
+import { useConfig, useLocale, useTheme, useThemeClass } from '../../_mixins';
 import { createKey } from '../../_utils';
 import { NBaseIcon } from '../../_internal';
 import { emptyLight } from '../styles';
@@ -20,7 +20,7 @@ export default defineComponent({
     name: 'Empty',
     props: emptyProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Empty', '-empty', style, emptyLight, props, mergedClsPrefixRef);
         const { localeRef } = useLocale('Empty');
         const NConfigProvider = inject(configProviderInjectionKey, null);
@@ -33,29 +33,41 @@ export default defineComponent({
             return ((_b = (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Empty) === null || _b === void 0 ? void 0 : _b.renderIcon) ||
                 (() => h(EmptyIcon, null));
         });
+        const cssVarsRef = computed(() => {
+            const { size } = props;
+            const { common: { cubicBezierEaseInOut }, self: { [createKey('iconSize', size)]: iconSize, [createKey('fontSize', size)]: fontSize, textColor, iconColor, extraTextColor } } = themeRef.value;
+            return {
+                '--n-icon-size': iconSize,
+                '--n-font-size': fontSize,
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-text-color': textColor,
+                '--n-icon-color': iconColor,
+                '--n-extra-text-color': extraTextColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('empty', computed(() => {
+                let hash = '';
+                const { size } = props;
+                hash += size[0];
+                return hash;
+            }), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             mergedRenderIcon: mergedRenderIconRef,
             localizedDescription: computed(() => {
                 return mergedDescriptionRef.value || localeRef.value.description;
             }),
-            cssVars: computed(() => {
-                const { size } = props;
-                const { common: { cubicBezierEaseInOut }, self: { [createKey('iconSize', size)]: iconSize, [createKey('fontSize', size)]: fontSize, textColor, iconColor, extraTextColor } } = themeRef.value;
-                return {
-                    '--n-icon-size': iconSize,
-                    '--n-font-size': fontSize,
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-text-color': textColor,
-                    '--n-icon-color': iconColor,
-                    '--n-extra-text-color': extraTextColor
-                };
-            })
+            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 { $slots, mergedClsPrefix } = this;
-        return (h("div", { class: `${mergedClsPrefix}-empty`, style: this.cssVars },
+        const { $slots, mergedClsPrefix, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return (h("div", { class: [`${mergedClsPrefix}-empty`, this.themeClass], style: this.cssVars },
             this.showIcon ? (h("div", { class: `${mergedClsPrefix}-empty__icon` }, $slots.icon ? ($slots.icon()) : (h(NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: this.mergedRenderIcon })))) : null,
             this.showDescription ? (h("div", { class: `${mergedClsPrefix}-empty__description` }, $slots.default ? $slots.default() : this.localizedDescription)) : null,
             $slots.extra ? (h("div", { class: `${mergedClsPrefix}-empty__extra` }, $slots.extra())) : null));

package/es/form/src/FormItem.js

@@ -161,8 +161,7 @@ export default defineComponent({
                     options.first = props.first;
             }
             const { value: rules } = mergedRulesRef;
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const value = NForm ? get(NForm.props.model, path, null) : undefined;
+            const value = NForm ? get(NForm.props.model, path || '') : undefined;
             const activeRules = (!trigger
                 ? rules
                 : rules.filter((rule) => {

package/es/grid/src/Grid.js

@@ -38,10 +38,10 @@ export default defineComponent({
     inheritAttrs: false,
     props: gridProps,
     setup(props) {
-        const { mergedClsPrefixRef, NConfigProvider } = useConfig(props);
+        const { mergedClsPrefixRef, mergedBreakpointsRef } = useConfig(props);
         const numRegex = /^\d+$/;
         const widthRef = ref(undefined);
-        const breakpointsRef = useBreakpoints((NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedBreakpointsRef.value) || defaultBreakpoints);
+        const breakpointsRef = useBreakpoints((mergedBreakpointsRef === null || mergedBreakpointsRef === void 0 ? void 0 : mergedBreakpointsRef.value) || defaultBreakpoints);
         const isResponsiveRef = useMemo(() => {
             if (props.itemResponsive)
                 return true;

package/es/icon-wrapper/src/IconWrapper.js

@@ -1,5 +1,5 @@
 import { computed, defineComponent, h } from 'vue';
-import { emptyThemeClassHandle, useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { formatLength } from '../../_utils';
 import { iconWrapperLight } from '../styles';
 import style from './styles/index.cssr';
@@ -15,8 +15,7 @@ export const NIconWrapper = defineComponent({
     props: iconWrapperProps,
     setup(props, { slots }) {
         const themeRef = useTheme('IconWrapper', '-icon-wrapper', style, iconWrapperLight, props);
-        const { mergedClsPrefixRef, NConfigProvider } = useConfig(props);
-        const { disableInlineTheme } = NConfigProvider || {};
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const cssVarsRef = computed(() => {
             const { common: { cubicBezierEaseInOut }, self: { color, iconColor } } = themeRef.value;
             return {
@@ -25,16 +24,15 @@ export const NIconWrapper = defineComponent({
                 '--n-icon-color': iconColor
             };
         });
-        const themeClassHandle = disableInlineTheme
+        const themeClassHandle = inlineThemeDisabled
             ? useThemeClass('icon-wrapper', undefined, cssVarsRef, props)
-            : emptyThemeClassHandle;
+            : undefined;
         return () => {
-            var _a, _b;
             const size = formatLength(props.size);
-            (_a = themeClassHandle.onRender) === null || _a === void 0 ? void 0 : _a.call(themeClassHandle);
+            themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender();
             return (h("div", { class: [
                     `${mergedClsPrefixRef.value}-icon-wrapper`,
-                    (_b = themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass) === null || _b === void 0 ? void 0 : _b.value
+                    themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass.value
                 ], style: [
                     cssVarsRef === null || cssVarsRef === void 0 ? void 0 : cssVarsRef.value,
                     {

package/es/input/src/Input.d.ts

@@ -552,6 +552,7 @@ declare const _default: import("vue").DefineComponent<{
         containerScrollTop: number;
         syncUnifiedContainer: () => void;
         scrollTo: import("../../_internal/scrollbar/src/ScrollBar").ScrollTo;
+        scrollBy: import("../../_internal/scrollbar/src/ScrollBar").ScrollBy;
         sync: () => void;
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;
@@ -633,8 +634,8 @@ declare const _default: import("vue").DefineComponent<{
             iconColorDisabled: string;
             opacity1: string;
             opacity2: string;
-            opacity3: string; /** private */
-            opacity4: string;
+            opacity3: string;
+            opacity4: string; /** private */
             opacity5: string;
             dividerColor: string;
             borderColor: string;
@@ -814,7 +815,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-icon-color-pressed': string;
         '--n-icon-color-disabled': string;
         '--n-suffix-text-color': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
     isCompositing: import("vue").Ref<boolean>;
     blur: () => void;
     focus: () => void;