naive-ui 2.25.3 → 2.25.4

package/es/dynamic-input/src/DynamicInput.d.ts

@@ -2091,7 +2091,9 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     cssVars: import("vue").ComputedRef<{
         '--action-margin': 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 max: NumberConstructor;
     readonly min: {

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

@@ -5,7 +5,7 @@ import { RemoveIcon, AddIcon, ArrowDownIcon, ArrowUpIcon } from '../../_internal
 import { formItemInjectionKey } from '../../_mixins/use-form-item';
 import { NBaseIcon } from '../../_internal';
 import { NButton, NButtonGroup } from '../../button';
-import { useTheme, useLocale, useConfig } from '../../_mixins';
+import { useTheme, useLocale, useConfig, useThemeClass } from '../../_mixins';
 import { call, warnOnce, resolveSlotWithProps, resolveSlot } from '../../_utils';
 import { dynamicInputLight } from '../styles';
 import NDynamicInputInputPreset from './InputPreset';
@@ -54,7 +54,7 @@ export default defineComponent({
                 }
             });
         }
-        const { mergedComponentPropsRef, mergedClsPrefixRef } = useConfig();
+        const { mergedComponentPropsRef, mergedClsPrefixRef, inlineThemeDisabled } = useConfig();
         const NFormItem = inject(formItemInjectionKey, null);
         const uncontrolledValueRef = ref(props.defaultValue);
         const controlledValueRef = toRef(props, 'value');
@@ -196,6 +196,15 @@ export default defineComponent({
             valuePlaceholderRef: toRef(props, 'valuePlaceholder'),
             placeholderRef: toRef(props, 'placeholder')
         });
+        const cssVarsRef = computed(() => {
+            const { self: { actionMargin } } = themeRef.value;
+            return {
+                '--action-margin': actionMargin
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('dynamic-input', undefined, cssVarsRef, props)
+            : undefined;
         return {
             locale: useLocale('DynamicInput').localeRef,
             buttonSize: buttonSizeRef,
@@ -212,17 +221,15 @@ export default defineComponent({
             move,
             createItem,
             mergedTheme: themeRef,
-            cssVars: computed(() => {
-                const { self: { actionMargin } } = themeRef.value;
-                return {
-                    '--action-margin': actionMargin
-                };
-            })
+            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, buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, itemStyle, preset, showSortButton, NFormItem, ensureKey, handleValueChange, remove, createItem, move } = this;
-        return (h("div", { class: `${mergedClsPrefix}-dynamic-input`, style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? (h(NButton, Object.assign({ block: true, ghost: true, dashed: true, size: buttonSize }, this.createButtonProps, { disabled: this.insertionDisabled, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.handleCreateClick }), {
+        const { $slots, buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, itemStyle, preset, showSortButton, NFormItem, ensureKey, handleValueChange, remove, createItem, move, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return (h("div", { class: [`${mergedClsPrefix}-dynamic-input`, this.themeClass], style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? (h(NButton, Object.assign({ block: true, ghost: true, dashed: true, size: buttonSize }, this.createButtonProps, { disabled: this.insertionDisabled, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.handleCreateClick }), {
             default: () => resolveSlot($slots['create-button-default'], () => [
                 locale.create
             ]),

package/es/legacy-grid/src/styles/index.cssr.js

@@ -3,7 +3,7 @@ const positionStyles = Array.apply(null, {
   length: 24
 }).map((_, index) => {
   const prefixIndex = index + 1;
-  const percent = (1 / 24 * prefixIndex * 100).toFixed(2) + '%';
+  const percent = `calc(100% / 24 * ${prefixIndex})`;
   return [cM(`${prefixIndex}-span`, {
     width: percent
   }), cM(`${prefixIndex}-offset`, {

package/es/mention/src/Mention.d.ts

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

package/es/mention/src/Mention.js

@@ -6,7 +6,7 @@ import { useIsMounted, useMergedState } from 'vooks';
 import { NInput } from '../../input';
 import { NInternalSelectMenu } from '../../_internal';
 import { call, useAdjustedTo, warn } from '../../_utils';
-import { useConfig, useFormItem, useTheme } from '../../_mixins';
+import { useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins';
 import { mentionLight } from '../styles';
 import { getRelativePosition } from './utils';
 import style from './styles/index.cssr';
@@ -48,7 +48,7 @@ export default defineComponent({
     name: 'Mention',
     props: mentionProps,
     setup(props) {
-        const { namespaceRef, mergedClsPrefixRef, mergedBorderedRef } = useConfig(props);
+        const { namespaceRef, mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Mention', '-mention', style, mentionLight, props, mergedClsPrefixRef);
         const formItem = useFormItem(props);
         const inputInstRef = ref(null);
@@ -84,6 +84,15 @@ export default defineComponent({
         const uncontrolledValueRef = ref(props.defaultValue);
         const controlledValueRef = toRef(props, 'value');
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
+        const cssVarsRef = computed(() => {
+            const { self: { menuBoxShadow } } = themeRef.value;
+            return {
+                '--n-menu-box-shadow': menuBoxShadow
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('mention', undefined, cssVarsRef, props)
+            : undefined;
         function doUpdateShowMenu(show) {
             if (props.disabled)
                 return;
@@ -301,16 +310,15 @@ export default defineComponent({
             handleInputMouseDown,
             focus,
             blur,
-            cssVars: computed(() => {
-                const { self: { menuBoxShadow } } = themeRef.value;
-                return {
-                    '--n-menu-box-shadow': menuBoxShadow
-                };
-            })
+            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 { mergedTheme, mergedClsPrefix, $slots } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return (h("div", { class: `${mergedClsPrefix}-mention` },
             h(NInput, { status: this.mergedStatus, themeOverrides: mergedTheme.peerOverrides.Input, theme: mergedTheme.peers.Input, size: this.mergedSize, autosize: this.autosize, type: this.type, ref: "inputInstRef", placeholder: this.placeholder, onMousedown: this.handleInputMouseDown, onUpdateValue: this.handleInputUpdateValue, onKeydown: this.handleInputKeyDown, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, bordered: this.mergedBordered, disabled: this.disabled, value: this.mergedValue }),
             h(VBinder, null, {

package/es/tabs/src/styles/index.cssr.js

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

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.25.3";
+declare const _default: "2.25.4";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '2.25.3';
+export default '2.25.4';

package/lib/dynamic-input/src/DynamicInput.d.ts

@@ -2091,7 +2091,9 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     cssVars: import("vue").ComputedRef<{
         '--action-margin': 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 max: NumberConstructor;
     readonly min: {

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

@@ -59,7 +59,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedComponentPropsRef, mergedClsPrefixRef } = (0, _mixins_1.useConfig)();
+        const { mergedComponentPropsRef, mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)();
         const NFormItem = (0, vue_1.inject)(use_form_item_1.formItemInjectionKey, null);
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
@@ -201,6 +201,15 @@ exports.default = (0, vue_1.defineComponent)({
             valuePlaceholderRef: (0, vue_1.toRef)(props, 'valuePlaceholder'),
             placeholderRef: (0, vue_1.toRef)(props, 'placeholder')
         });
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { actionMargin } } = themeRef.value;
+            return {
+                '--action-margin': actionMargin
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('dynamic-input', undefined, cssVarsRef, props)
+            : undefined;
         return {
             locale: (0, _mixins_1.useLocale)('DynamicInput').localeRef,
             buttonSize: buttonSizeRef,
@@ -217,17 +226,15 @@ exports.default = (0, vue_1.defineComponent)({
             move,
             createItem,
             mergedTheme: themeRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { self: { actionMargin } } = themeRef.value;
-                return {
-                    '--action-margin': actionMargin
-                };
-            })
+            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, buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, itemStyle, preset, showSortButton, NFormItem, ensureKey, handleValueChange, remove, createItem, move } = this;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-dynamic-input`, style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? ((0, vue_1.h)(button_1.NButton, Object.assign({ block: true, ghost: true, dashed: true, size: buttonSize }, this.createButtonProps, { disabled: this.insertionDisabled, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.handleCreateClick }), {
+        const { $slots, buttonSize, mergedClsPrefix, mergedValue, locale, mergedTheme, keyField, itemStyle, preset, showSortButton, NFormItem, ensureKey, handleValueChange, remove, createItem, move, onRender } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        return ((0, vue_1.h)("div", { class: [`${mergedClsPrefix}-dynamic-input`, this.themeClass], style: this.cssVars }, !Array.isArray(mergedValue) || mergedValue.length === 0 ? ((0, vue_1.h)(button_1.NButton, Object.assign({ block: true, ghost: true, dashed: true, size: buttonSize }, this.createButtonProps, { disabled: this.insertionDisabled, theme: mergedTheme.peers.Button, themeOverrides: mergedTheme.peerOverrides.Button, onClick: this.handleCreateClick }), {
             default: () => (0, _utils_1.resolveSlot)($slots['create-button-default'], () => [
                 locale.create
             ]),

package/lib/legacy-grid/src/styles/index.cssr.js

@@ -10,7 +10,7 @@ const positionStyles = Array.apply(null, {
   length: 24
 }).map((_, index) => {
   const prefixIndex = index + 1;
-  const percent = (1 / 24 * prefixIndex * 100).toFixed(2) + '%';
+  const percent = `calc(100% / 24 * ${prefixIndex})`;
   return [(0, cssr_1.cM)(`${prefixIndex}-span`, {
     width: percent
   }), (0, cssr_1.cM)(`${prefixIndex}-offset`, {

package/lib/mention/src/Mention.d.ts

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

package/lib/mention/src/Mention.js

@@ -53,7 +53,7 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Mention',
     props: mentionProps,
     setup(props) {
-        const { namespaceRef, mergedClsPrefixRef, mergedBorderedRef } = (0, _mixins_1.useConfig)(props);
+        const { namespaceRef, mergedClsPrefixRef, mergedBorderedRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Mention', '-mention', index_cssr_1.default, styles_1.mentionLight, props, mergedClsPrefixRef);
         const formItem = (0, _mixins_1.useFormItem)(props);
         const inputInstRef = (0, vue_1.ref)(null);
@@ -89,6 +89,15 @@ exports.default = (0, vue_1.defineComponent)({
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
         const controlledValueRef = (0, vue_1.toRef)(props, 'value');
         const mergedValueRef = (0, vooks_1.useMergedState)(controlledValueRef, uncontrolledValueRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { self: { menuBoxShadow } } = themeRef.value;
+            return {
+                '--n-menu-box-shadow': menuBoxShadow
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('mention', undefined, cssVarsRef, props)
+            : undefined;
         function doUpdateShowMenu(show) {
             if (props.disabled)
                 return;
@@ -306,16 +315,15 @@ exports.default = (0, vue_1.defineComponent)({
             handleInputMouseDown,
             focus,
             blur,
-            cssVars: (0, vue_1.computed)(() => {
-                const { self: { menuBoxShadow } } = themeRef.value;
-                return {
-                    '--n-menu-box-shadow': menuBoxShadow
-                };
-            })
+            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 { mergedTheme, mergedClsPrefix, $slots } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-mention` },
             (0, vue_1.h)(input_1.NInput, { status: this.mergedStatus, themeOverrides: mergedTheme.peerOverrides.Input, theme: mergedTheme.peers.Input, size: this.mergedSize, autosize: this.autosize, type: this.type, ref: "inputInstRef", placeholder: this.placeholder, onMousedown: this.handleInputMouseDown, onUpdateValue: this.handleInputUpdateValue, onKeydown: this.handleInputKeyDown, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, bordered: this.mergedBordered, disabled: this.disabled, value: this.mergedValue }),
             (0, vue_1.h)(vueuc_1.VBinder, null, {

package/lib/tabs/src/styles/index.cssr.js

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

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.25.3";
+declare const _default: "2.25.4";
 export default _default;

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '2.25.3';
+exports.default = '2.25.4';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "naive-ui",
-  "version": "2.25.3",
+  "version": "2.25.4",
   "description": "A Vue 3 Component Library. Fairly Complete, Customizable Themes, Uses TypeScript, Not Too Slow",
   "main": "lib/index.js",
   "module": "es/index.js",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "naive-ui",
-  "version": "2.25.3",
+  "version": "2.25.4",
   "contributions": {
     "html": {
       "elements": [