naive-ui 2.21.5 → 2.23.2

package/es/radio/src/Radio.js

@@ -15,36 +15,36 @@ export default defineComponent({
                 const { mergedSize: { value: size } } = radio;
                 const { common: { cubicBezierEaseInOut }, self: { boxShadow, boxShadowActive, boxShadowDisabled, boxShadowFocus, boxShadowHover, color, colorDisabled, textColor, textColorDisabled, dotColorActive, dotColorDisabled, labelPadding, [createKey('fontSize', size)]: fontSize, [createKey('radioSize', size)]: radioSize } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--box-shadow': boxShadow,
-                    '--box-shadow-active': boxShadowActive,
-                    '--box-shadow-disabled': boxShadowDisabled,
-                    '--box-shadow-focus': boxShadowFocus,
-                    '--box-shadow-hover': boxShadowHover,
-                    '--color': color,
-                    '--color-disabled': colorDisabled,
-                    '--dot-color-active': dotColorActive,
-                    '--dot-color-disabled': dotColorDisabled,
-                    '--font-size': fontSize,
-                    '--radio-size': radioSize,
-                    '--text-color': textColor,
-                    '--text-color-disabled': textColorDisabled,
-                    '--label-padding': labelPadding
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-box-shadow': boxShadow,
+                    '--n-box-shadow-active': boxShadowActive,
+                    '--n-box-shadow-disabled': boxShadowDisabled,
+                    '--n-box-shadow-focus': boxShadowFocus,
+                    '--n-box-shadow-hover': boxShadowHover,
+                    '--n-color': color,
+                    '--n-color-disabled': colorDisabled,
+                    '--n-dot-color-active': dotColorActive,
+                    '--n-dot-color-disabled': dotColorDisabled,
+                    '--n-font-size': fontSize,
+                    '--n-radio-size': radioSize,
+                    '--n-text-color': textColor,
+                    '--n-text-color-disabled': textColorDisabled,
+                    '--n-label-padding': labelPadding
                 };
             })
         });
     },
     render() {
         const { $slots, mergedClsPrefix } = this;
-        return (h("div", { class: [
+        return (h("label", { class: [
                 `${mergedClsPrefix}-radio`,
                 {
                     [`${mergedClsPrefix}-radio--disabled`]: this.mergedDisabled,
                     [`${mergedClsPrefix}-radio--checked`]: this.renderSafeChecked,
                     [`${mergedClsPrefix}-radio--focus`]: this.focus
                 }
-            ], style: this.cssVars, onKeyup: this.handleKeyUp, onClick: this.handleClick, onMousedown: this.handleMouseDown },
-            h("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio__radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
+            ], style: this.cssVars },
+            h("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
             h("div", { class: [
                     `${mergedClsPrefix}-radio__dot`,
                     this.renderSafeChecked && `${mergedClsPrefix}-radio__dot--checked`

package/es/radio/src/RadioButton.js

@@ -8,16 +8,15 @@ export default defineComponent({
     },
     render() {
         const { mergedClsPrefix } = this;
-        return (h("div", { class: [
+        return (h("label", { class: [
                 `${mergedClsPrefix}-radio-button`,
                 {
                     [`${mergedClsPrefix}-radio-button--disabled`]: this.mergedDisabled,
-                    [`${mergedClsPrefix}-radio-button--checked`]: this
-                        .renderSafeChecked,
+                    [`${mergedClsPrefix}-radio-button--checked`]: this.renderSafeChecked,
                     [`${mergedClsPrefix}-radio-button--focus`]: this.focus
                 }
-            ], onKeyup: this.handleKeyUp, onClick: this.handleClick, onMousedown: this.handleMouseDown },
-            h("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-button__radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
+            ] },
+            h("input", { ref: "inputRef", type: "radio", class: `${mergedClsPrefix}-radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
             h("div", { class: `${mergedClsPrefix}-radio-button__state-border` }),
             h("span", { ref: "labelRef" }, this.$slots)));
     }

package/es/radio/src/RadioGroup.d.ts

@@ -254,20 +254,20 @@ declare const _default: import("vue").DefineComponent<{
     handleFocusout: (e: FocusEvent) => void;
     handleFocusin: (e: FocusEvent) => void;
     cssVars: import("vue").ComputedRef<{
-        '--font-size': string;
-        '--bezier': string;
-        '--button-border-color': string;
-        '--button-border-color-active': string;
-        '--button-border-radius': string;
-        '--button-box-shadow': string;
-        '--button-box-shadow-focus': string;
-        '--button-box-shadow-hover': string;
-        '--button-color-active': string;
-        '--button-text-color': string;
-        '--button-text-color-hover': string;
-        '--button-text-color-active': string;
-        '--height': string;
-        '--opacity-disabled': string;
+        '--n-font-size': string;
+        '--n-bezier': string;
+        '--n-button-border-color': string;
+        '--n-button-border-color-active': string;
+        '--n-button-border-radius': string;
+        '--n-button-box-shadow': string;
+        '--n-button-box-shadow-focus': string;
+        '--n-button-box-shadow-hover': string;
+        '--n-button-color-active': string;
+        '--n-button-text-color': string;
+        '--n-button-text-color-hover': string;
+        '--n-button-text-color-active': string;
+        '--n-height': string;
+        '--n-opacity-disabled': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly name?: unknown;

package/es/radio/src/RadioGroup.js

@@ -126,20 +126,20 @@ export default defineComponent({
                 const { value: size } = mergedSizeRef;
                 const { common: { cubicBezierEaseInOut }, self: { buttonBorderColor, buttonBorderColorActive, buttonBorderRadius, buttonBoxShadow, buttonBoxShadowFocus, buttonBoxShadowHover, buttonColorActive, buttonTextColor, buttonTextColorActive, buttonTextColorHover, opacityDisabled, [createKey('buttonHeight', size)]: height, [createKey('fontSize', size)]: fontSize } } = themeRef.value;
                 return {
-                    '--font-size': fontSize,
-                    '--bezier': cubicBezierEaseInOut,
-                    '--button-border-color': buttonBorderColor,
-                    '--button-border-color-active': buttonBorderColorActive,
-                    '--button-border-radius': buttonBorderRadius,
-                    '--button-box-shadow': buttonBoxShadow,
-                    '--button-box-shadow-focus': buttonBoxShadowFocus,
-                    '--button-box-shadow-hover': buttonBoxShadowHover,
-                    '--button-color-active': buttonColorActive,
-                    '--button-text-color': buttonTextColor,
-                    '--button-text-color-hover': buttonTextColorHover,
-                    '--button-text-color-active': buttonTextColorActive,
-                    '--height': height,
-                    '--opacity-disabled': opacityDisabled
+                    '--n-font-size': fontSize,
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-button-border-color': buttonBorderColor,
+                    '--n-button-border-color-active': buttonBorderColorActive,
+                    '--n-button-border-radius': buttonBorderRadius,
+                    '--n-button-box-shadow': buttonBoxShadow,
+                    '--n-button-box-shadow-focus': buttonBoxShadowFocus,
+                    '--n-button-box-shadow-hover': buttonBoxShadowHover,
+                    '--n-button-color-active': buttonColorActive,
+                    '--n-button-text-color': buttonTextColor,
+                    '--n-button-text-color-hover': buttonTextColorHover,
+                    '--n-button-text-color-active': buttonTextColorActive,
+                    '--n-height': height,
+                    '--n-opacity-disabled': opacityDisabled
                 };
             })
         };

package/es/radio/src/styles/radio-group.cssr.js

@@ -1,34 +1,34 @@
 import { cB, cE, cM, c, cNotM } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --button-border-color
-// --height
-// --opacity-disabled
-// --font-size
+// --n-bezier
+// --n-button-border-color
+// --n-height
+// --n-opacity-disabled
+// --n-font-size
 
 export default cB('radio-group', `
  display: inline-block;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
 `, [cE('splitor', `
  display: inline-block;
  vertical-align: bottom;
  width: 1px;
  transition:
- background-color .3s var(--bezier),
- opacity .3s var(--bezier);
- background: var(--button-border-color);
+ background-color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier);
+ background: var(--n-button-border-color);
  `, [cM('checked', {
-  backgroundColor: 'var(--button-border-color-active)'
+  backgroundColor: 'var(--n-button-border-color-active)'
 }), cM('disabled', {
-  opacity: 'var(--opacity-disabled)'
+  opacity: 'var(--n-opacity-disabled)'
 })]), cM('button-group', `
  white-space: nowrap;
- height: var(--height);
- line-height: var(--height);
+ height: var(--n-height);
+ line-height: var(--n-height);
  `, [cB('radio-button', {
-  height: 'var(--height)',
-  lineHeight: 'var(--height)'
+  height: 'var(--n-height)',
+  lineHeight: 'var(--n-height)'
 }), cE('splitor', {
-  height: 'var(--height)'
+  height: 'var(--n-height)'
 })]), cB('radio-button', `
  vertical-align: bottom;
  outline: none;
@@ -40,56 +40,60 @@ export default cB('radio-group', `
  padding-right: 14px;
  white-space: nowrap;
  transition:
- background-color .3s var(--bezier),
- opacity .3s var(--bezier),
- border-color .3s var(--bezier),
- color .3s var(--bezier);
- color: var(--button-text-color);
- border-top: 1px solid var(--button-border-color);
- border-bottom: 1px solid var(--button-border-color);
- `, [cE('radio-input', `
+ background-color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ border-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
+ color: var(--n-button-text-color);
+ border-top: 1px solid var(--n-button-border-color);
+ border-bottom: 1px solid var(--n-button-border-color);
+ `, [cB('radio-input', `
+ position: absolute;
  border: 0;
- width: 0;
- height: 0;
+ border-radius: inherit;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
  opacity: 0;
- margin: 0;
+ z-index: 1;
  `), cE('state-border', `
  pointer-events: none;
  position: absolute;
- box-shadow: var(--button-box-shadow);
- transition: box-shadow .3s var(--bezier);
+ box-shadow: var(--n-button-box-shadow);
+ transition: box-shadow .3s var(--n-bezier);
  left: -1px;
  bottom: -1px;
  right: -1px;
  top: -1px;
  `), c('&:first-child', `
- border-top-left-radius: var(--button-border-radius);
- border-bottom-left-radius: var(--button-border-radius);
- border-left: 1px solid var(--button-border-color);
+ border-top-left-radius: var(--n-button-border-radius);
+ border-bottom-left-radius: var(--n-button-border-radius);
+ border-left: 1px solid var(--n-button-border-color);
  `, [cE('state-border', `
- border-top-left-radius: var(--button-border-radius);
- border-bottom-left-radius: var(--button-border-radius);
+ border-top-left-radius: var(--n-button-border-radius);
+ border-bottom-left-radius: var(--n-button-border-radius);
  `)]), c('&:last-child', `
- border-top-right-radius: var(--button-border-radius);
- border-bottom-right-radius: var(--button-border-radius);
- border-right: 1px solid var(--button-border-color);
+ border-top-right-radius: var(--n-button-border-radius);
+ border-bottom-right-radius: var(--n-button-border-radius);
+ border-right: 1px solid var(--n-button-border-color);
  `, [cE('state-border', `
- border-top-right-radius: var(--button-border-radius);
- border-bottom-right-radius: var(--button-border-radius);
+ border-top-right-radius: var(--n-button-border-radius);
+ border-bottom-right-radius: var(--n-button-border-radius);
  `)]), cNotM('disabled', `
  cursor: pointer;
  `, [c('&:hover', [cE('state-border', `
- transition: box-shadow .3s var(--bezier);
- box-shadow: var(--button-box-shadow-hover);
+ transition: box-shadow .3s var(--n-bezier);
+ box-shadow: var(--n-button-box-shadow-hover);
  `), cNotM('checked', {
-  color: 'var(--button-text-color-hover)'
+  color: 'var(--n-button-text-color-hover)'
 })]), cM('focus', [c('&:not(:active)', [cE('state-border', {
-  boxShadow: 'var(--button-box-shadow-focus)'
+  boxShadow: 'var(--n-button-box-shadow-focus)'
 })])])]), cM('checked', `
- background: var(--button-color-active);
- color: var(--button-text-color-active);
- border-color: var(--button-border-color-active);
+ background: var(--n-button-color-active);
+ color: var(--n-button-text-color-active);
+ border-color: var(--n-button-border-color-active);
  `), cM('disabled', `
  cursor: not-allowed;
- opacity: var(--opacity-disabled);
+ opacity: var(--n-opacity-disabled);
  `)])]);

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

@@ -1,19 +1,19 @@
 import { c, cE, cM, cNotM, cB } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --box-shadow
-// --box-shadow-active
-// --box-shadow-disabled
-// --box-shadow-focus
-// --box-shadow-hover
-// --color
-// --color-disabled
-// --dot-color-active
-// --dot-color-disabled
-// --font-size
-// --radio-size
-// --text-color
-// --text-color-disabled
-// --label-padding
+// --n-bezier
+// --n-box-shadow
+// --n-box-shadow-active
+// --n-box-shadow-disabled
+// --n-box-shadow-focus
+// --n-box-shadow-hover
+// --n-color
+// --n-color-disabled
+// --n-dot-color-active
+// --n-dot-color-disabled
+// --n-font-size
+// --n-radio-size
+// --n-text-color
+// --n-text-color-disabled
+// --n-label-padding
 
 export default cB('radio', `
  line-height: 1;
@@ -23,22 +23,26 @@ export default cB('radio', `
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
 `, [cE('dot', `
- height: var(--radio-size);
- width: var(--radio-size);
- `), cE('radio-input', `
+ height: var(--n-radio-size);
+ width: var(--n-radio-size);
+ `), cB('radio-input', `
+ position: absolute;
  border: 0;
- width: 0;
- height: 0;
+ border-radius: inherit;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
  opacity: 0;
- margin: 0;
+ z-index: 1;
  `), cE('dot', `
- background: var(--color);
- box-shadow: var(--box-shadow);
+ background: var(--n-color);
+ box-shadow: var(--n-box-shadow);
  transition:
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
  position: relative;
  border-radius: 50%;
  `, [c('&::before', `
@@ -51,38 +55,38 @@ export default cB('radio', `
  width: calc(100% - 8px);
  border-radius: 50%;
  transform: scale(.8);
- background: var(--dot-color-active);
+ background: var(--n-dot-color-active);
  transition: 
- opacity .3s var(--bezier),
- background-color .3s var(--bezier),
- transform .3s var(--bezier);
+ opacity .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ transform .3s var(--n-bezier);
  `), cM('checked', {
-  boxShadow: 'var(--box-shadow-active)'
+  boxShadow: 'var(--n-box-shadow-active)'
 }, [c('&::before', `
  opacity: 1;
  transform: scale(1);
  `)])]), cE('label', `
- color: var(--text-color);
- padding: var(--label-padding);
+ color: var(--n-text-color);
+ padding: var(--n-label-padding);
  display: inline-block;
  white-space: nowrap;
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  `), cNotM('disabled', `
  cursor: pointer;
  `, [c('&:hover', [cE('dot', {
-  boxShadow: 'var(--box-shadow-hover)'
+  boxShadow: 'var(--n-box-shadow-hover)'
 })]), cM('focus', [c('&:not(:active)', [cE('dot', {
-  boxShadow: 'var(--box-shadow-focus)'
+  boxShadow: 'var(--n-box-shadow-focus)'
 })])])]), cM('disabled', `
  cursor: not-allowed;
  `, [cE('dot', {
-  boxShadow: 'var(--box-shadow-disabled)',
-  backgroundColor: 'var(--color-disabled)'
+  boxShadow: 'var(--n-box-shadow-disabled)',
+  backgroundColor: 'var(--n-color-disabled)'
 }, [c('&::before', {
-  backgroundColor: 'var(--dot-color-disabled)'
+  backgroundColor: 'var(--n-dot-color-disabled)'
 }), cM('checked', `
  transform: scale(1);
  opacity: 1;
  `)]), cE('label', {
-  color: 'var(--text-color-disabled)'
+  color: 'var(--n-text-color-disabled)'
 })])]);

package/es/radio/src/use-radio.d.ts

@@ -47,9 +47,6 @@ export interface UseRadio {
     handleRadioInputChange: () => void;
     handleRadioInputBlur: () => void;
     handleRadioInputFocus: () => void;
-    handleKeyUp: (e: KeyboardEvent) => void;
-    handleMouseDown: () => void;
-    handleClick: () => void;
 }
 declare function setup(props: ExtractPropTypes<typeof radioProps>): UseRadio;
 declare namespace setup {

package/es/radio/src/use-radio.js

@@ -112,28 +112,6 @@ function setup(props) {
     function handleRadioInputFocus() {
         focusRef.value = true;
     }
-    function handleKeyUp(e) {
-        var _a;
-        switch (e.code) {
-            case 'Enter':
-            case 'NumpadEnter':
-                (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.click();
-        }
-    }
-    function handleMouseDown() {
-        if (mergedDisabledRef.value)
-            return;
-        setTimeout(() => {
-            var _a, _b;
-            if (!((_a = labelRef.value) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))) {
-                (_b = inputRef.value) === null || _b === void 0 ? void 0 : _b.focus();
-            }
-        }, 0);
-    }
-    function handleClick() {
-        var _a;
-        (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.click();
-    }
     return {
         mergedClsPrefix: NRadioGroup
             ? NRadioGroup.mergedClsPrefixRef
@@ -148,10 +126,7 @@ function setup(props) {
         mergedSize: mergedSizeRef,
         handleRadioInputChange,
         handleRadioInputBlur,
-        handleRadioInputFocus,
-        handleKeyUp,
-        handleMouseDown,
-        handleClick
+        handleRadioInputFocus
     };
 }
 setup.props = radioProps;

package/es/rate/src/Rate.d.ts

@@ -90,10 +90,10 @@ declare const _default: import("vue").DefineComponent<{
     handleClick: (index: number, e: MouseEvent) => void;
     handleMouseLeave: () => void;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--item-color': string;
-        '--item-color-active': string;
-        '--item-size': string;
+        '--n-bezier': string;
+        '--n-item-color': string;
+        '--n-item-color-active': string;
+        '--n-item-size': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly allowHalf?: unknown;

package/es/rate/src/Rate.js

@@ -81,10 +81,10 @@ export default defineComponent({
                     mergedSize = self[createKey('size', size)];
                 }
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--item-color': itemColor,
-                    '--item-color-active': props.color || itemColorActive,
-                    '--item-size': mergedSize
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-item-color': itemColor,
+                    '--n-item-color-active': props.color || itemColorActive,
+                    '--n-item-size': mergedSize
                 };
             })
         };

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

@@ -1,28 +1,28 @@
 import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr'; // vars:
-// --bezier
-// --item-color
-// --item-color-active
+// --n-bezier
+// --n-item-color
+// --n-item-color-active
 
 export default cB('rate', {
   display: 'inline-flex',
   flexWrap: 'nowrap'
 }, [c('&:hover', [cE('item', `
  transition:
- transform .1s var(--bezier),
- color .3s var(--bezier);
+ transform .1s var(--n-bezier),
+ color .3s var(--n-bezier);
  `)]), cE('item', `
  position: relative;
  display: flex;
  transition:
- transform .1s var(--bezier),
- color .3s var(--bezier);
+ transform .1s var(--n-bezier),
+ color .3s var(--n-bezier);
  transform: scale(1);
- font-size: var(--item-size);
- color: var(--item-color);
+ font-size: var(--n-item-size);
+ color: var(--n-item-color);
  `, [c('&:not(:first-child)', {
   marginLeft: '6px'
 }), cM('active', {
-  color: 'var(--item-color-active)'
+  color: 'var(--n-item-color-active)'
 })]), cNotM('readonly', `
  cursor: pointer;
  `, [cE('item', [c('&:hover', {
@@ -40,5 +40,5 @@ export default cB('rate', {
  overflow: hidden;
  color: rgba(255, 255, 255, 0);
  `, [cM('active', {
-  color: 'var(--item-color-active)'
+  color: 'var(--n-item-color-active)'
 })])]);

package/es/result/src/Result.d.ts

@@ -183,15 +183,15 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--font-size': string;
-        '--icon-size': string;
-        '--line-height': string;
-        '--text-color': string;
-        '--title-font-size': string;
-        '--title-font-weight': string;
-        '--title-text-color': string;
-        '--icon-color': string | undefined;
+        '--n-bezier': string;
+        '--n-font-size': string;
+        '--n-icon-size': string;
+        '--n-line-height': string;
+        '--n-text-color': string;
+        '--n-title-font-size': string;
+        '--n-title-font-weight': string;
+        '--n-title-text-color': string;
+        '--n-icon-color': string | undefined;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     size?: unknown;

package/es/result/src/Result.js

@@ -40,15 +40,15 @@ export default defineComponent({
                 const { size, status } = props;
                 const { common: { cubicBezierEaseInOut }, self: { textColor, lineHeight, titleTextColor, titleFontWeight, [createKey('iconColor', status)]: iconColor, [createKey('fontSize', size)]: fontSize, [createKey('titleFontSize', size)]: titleFontSize, [createKey('iconSize', size)]: iconSize } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--font-size': fontSize,
-                    '--icon-size': iconSize,
-                    '--line-height': lineHeight,
-                    '--text-color': textColor,
-                    '--title-font-size': titleFontSize,
-                    '--title-font-weight': titleFontWeight,
-                    '--title-text-color': titleTextColor,
-                    '--icon-color': iconColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-font-size': fontSize,
+                    '--n-icon-size': iconSize,
+                    '--n-line-height': lineHeight,
+                    '--n-text-color': textColor,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-icon-color': iconColor
                 };
             })
         };