naive-ui 2.21.5 → 2.23.2

package/lib/input/src/styles/input.cssr.js

@@ -5,38 +5,38 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --color
-// --font-size
-// --border-radius
-// --height
-// --padding-left
-// --padding-right
-// --text-color
-// --text-color-disabled
-// --caret-color
-// --text-decoration-color
-// --border
-// --border-disabled
-// --border-hover
-// --border-focus
-// --placeholder-color
-// --placeholder-color-disabled
-// --line-height-textarea
-// --color-disabled
-// --color-focus
-// --box-shadow-focus
-// --clear-color
-// --clear-size
-// --clear-color-hover
-// --clear-color-pressed
-// --suffix-text-color
-// --icon-color
-// --icon-color-hover
-// --icon-color-pressed
-// --icon-color-disabled
-// --count-text-color
-// --loading-color
+// --n-bezier
+// --n-color
+// --n-font-size
+// --n-border-radius
+// --n-height
+// --n-padding-left
+// --n-padding-right
+// --n-text-color
+// --n-text-color-disabled
+// --n-caret-color
+// --n-text-decoration-color
+// --n-border
+// --n-border-disabled
+// --n-border-hover
+// --n-border-focus
+// --n-placeholder-color
+// --n-placeholder-color-disabled
+// --n-line-height-textarea
+// --n-color-disabled
+// --n-color-focus
+// --n-box-shadow-focus
+// --n-clear-color
+// --n-clear-size
+// --n-clear-color-hover
+// --n-clear-color-pressed
+// --n-suffix-text-color
+// --n-icon-color
+// --n-icon-color-hover
+// --n-icon-color-pressed
+// --n-icon-color-disabled
+// --n-count-text-color
+// --n-loading-color
 // ...form item vars
 
 
@@ -49,11 +49,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('input', `
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
- border-radius: var(--border-radius);
- background-color: var(--color);
- transition: background-color .3s var(--bezier);
- font-size: var(--font-size);
- --padding-vertical: calc((var(--height) - 1.5 * var(--font-size)) / 2);
+ border-radius: var(--n-border-radius);
+ background-color: var(--n-color);
+ transition: background-color .3s var(--n-bezier);
+ font-size: var(--n-font-size);
+ --n-padding-vertical: calc((var(--n-height) - 1.5 * var(--n-font-size)) / 2);
  `, [// common
 (0, cssr_1.cE)('input, textarea', `
  overflow: hidden;
@@ -69,21 +69,21 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('input', `
  background-color: #0000;
  text-align: inherit;
  transition:
- caret-color .3s var(--bezier),
- color .3s var(--bezier),
- text-decoration-color .3s var(--bezier);
+ caret-color .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ text-decoration-color .3s var(--n-bezier);
  `), (0, cssr_1.cE)('input-el, textarea-el', `
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
- text-decoration-color: var(--text-decoration-color);
- color: var(--text-color);
- caret-color: var(--caret-color);
+ text-decoration-color: var(--n-text-decoration-color);
+ color: var(--n-text-color);
+ caret-color: var(--n-caret-color);
  background-color: transparent;
  `, [(0, cssr_1.c)('&::placeholder', {
   color: '#0000'
 })]), (0, cssr_1.cM)('round', [(0, cssr_1.cNotM)('textarea', {
-  borderRadius: 'calc(var(--height) / 2)'
+  borderRadius: 'calc(var(--n-height) / 2)'
 })]), (0, cssr_1.cE)('placeholder', `
  pointer-events: none;
  position: absolute;
@@ -92,7 +92,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('input', `
  top: 0;
  bottom: 0;
  overflow: hidden;
- color: var(--placeholder-color);
+ color: var(--n-placeholder-color);
  `, [(0, cssr_1.c)('span', {
   width: '100%',
   display: 'inline-block'
@@ -109,11 +109,11 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('input', `
  display: inline-flex;
  flex-grow: 1;
  position: relative;
- padding-left: var(--padding-left);
- padding-right: var(--padding-right);
+ padding-left: var(--n-padding-left);
+ padding-right: var(--n-padding-right);
  `), (0, cssr_1.cE)('input-mirror', `
  padding: 0;
- height: var(--height);
+ height: var(--n-height);
  overflow: hidden;
  visibility: hidden;
  position: static;
@@ -121,37 +121,37 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('input', `
  pointer-events: none;
  `), (0, cssr_1.cE)('input-el', `
  padding: 0;
- height: var(--height);
- line-height: var(--height);
+ height: var(--n-height);
+ line-height: var(--n-height);
  `, [(0, cssr_1.c)('+', [(0, cssr_1.cE)('placeholder', `
  display: flex;
  align-items: center; 
  `)])]), (0, cssr_1.cNotM)('textarea', [(0, cssr_1.cE)('placeholder', {
   whiteSpace: 'nowrap'
 })]), (0, cssr_1.cE)('eye', `
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  `), // textarea
 (0, cssr_1.cM)('textarea', {
   width: '100%'
 }, [(0, cssr_1.cB)('input-word-count', `
  position: absolute;
- right: var(--padding-right);
- bottom: var(--padding-vertical);
+ right: var(--n-padding-right);
+ bottom: var(--n-padding-vertical);
  `), (0, cssr_1.cM)('resizable', [(0, cssr_1.cB)('input-wrapper', `
  resize: vertical;
  overflow: auto;
- min-height: var(--height);
+ min-height: var(--n-height);
  `)]), (0, cssr_1.cE)('textarea-el, textarea-mirror, placeholder', `
  width: 100%;
  height: 100%;
  padding-left: 0;
  padding-right: 0;
- padding-top: var(--padding-vertical);
- padding-bottom: var(--padding-vertical);
+ padding-top: var(--n-padding-vertical);
+ padding-bottom: var(--n-padding-vertical);
  display: inline-block;
  vertical-align: bottom;
  box-sizing: border-box;
- line-height: var(--line-height-textarea);
+ line-height: var(--n-line-height-textarea);
  margin: 0;
  resize: none;
  `), (0, cssr_1.cE)('textarea-mirror', `
@@ -167,49 +167,49 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('input', `
 }), (0, cssr_1.cE)('separator', `
  display: flex;
  align-items: center;
- transition: color .3s var(--bezier);
- color: var(--text-color);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-text-color);
  `, [(0, cssr_1.cB)('icon', `
- color: var(--icon-color);
+ color: var(--n-icon-color);
  `), (0, cssr_1.cB)('base-icon', `
- color: var(--icon-color);
+ color: var(--n-icon-color);
  `)])]), (0, cssr_1.cM)('disabled', {
   cursor: 'not-allowed',
-  backgroundColor: 'var(--color-disabled)'
+  backgroundColor: 'var(--n-color-disabled)'
 }, [(0, cssr_1.cE)('border', {
-  border: 'var(--border-disabled)'
+  border: 'var(--n-border-disabled)'
 }), (0, cssr_1.cE)('input-el, textarea-el', {
   cursor: 'not-allowed',
-  color: 'var(--text-color-disabled)',
-  textDecorationColor: 'var(--text-color-disabled)'
+  color: 'var(--n-text-color-disabled)',
+  textDecorationColor: 'var(--n-text-color-disabled)'
 }), (0, cssr_1.cE)('placeholder', {
-  color: 'var(--placeholder-color-disabled)'
+  color: 'var(--n-placeholder-color-disabled)'
 }), (0, cssr_1.cE)('separator', {
-  color: 'var(--text-color-disabled)'
+  color: 'var(--n-text-color-disabled)'
 }, [(0, cssr_1.cB)('icon', `
- color: var(--icon-color-disabled);
+ color: var(--n-icon-color-disabled);
  `), (0, cssr_1.cB)('base-icon', `
- color: var(--icon-color-disabled);
+ color: var(--n-icon-color-disabled);
  `)]), (0, cssr_1.cE)('suffix, prefix', {
-  color: 'var(--text-color-disabled)'
+  color: 'var(--n-text-color-disabled)'
 }, [(0, cssr_1.cB)('icon', `
- color: var(--icon-color-disabled);
+ color: var(--n-icon-color-disabled);
  `), (0, cssr_1.cB)('internal-icon', `
- color: var(--icon-color-disabled);
+ color: var(--n-icon-color-disabled);
  `)])]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cE)('eye', `
- color: var(--icon-color);
+ color: var(--n-icon-color);
  cursor: pointer;
  `, [(0, cssr_1.c)('&:hover', `
- color: var(--icon-color-hover);
+ color: var(--n-icon-color-hover);
  `), (0, cssr_1.c)('&:active', `
- color: var(--icon-color-pressed);
+ color: var(--n-icon-color-pressed);
  `)]), (0, cssr_1.cM)('focus', {
-  backgroundColor: 'var(--color-focus)'
+  backgroundColor: 'var(--n-color-focus)'
 }, [(0, cssr_1.cE)('state-border', {
-  border: 'var(--border-focus)',
-  boxShadow: 'var(--box-shadow-focus)'
+  border: 'var(--n-border-focus)',
+  boxShadow: 'var(--n-box-shadow-focus)'
 })]), (0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', {
-  border: 'var(--border-hover)'
+  border: 'var(--n-border-hover)'
 })])]), (0, cssr_1.cE)('border, state-border', `
  box-sizing: border-box;
  position: absolute;
@@ -219,10 +219,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('input', `
  bottom: 0;
  pointer-events: none;
  border-radius: inherit;
- border: var(--border);
+ border: var(--n-border);
  transition:
- box-shadow .3s var(--bezier),
- border-color .3s var(--bezier);
+ box-shadow .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  `), (0, cssr_1.cE)('state-border', `
  border-color: #0000;
  z-index: 1;
@@ -231,56 +231,55 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('input', `
 }), (0, cssr_1.cE)('suffix', `
  margin-left: 4px;
  `), (0, cssr_1.cE)('suffix, prefix', `
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  flex-wrap: nowrap;
  flex-shrink: 0;
- line-height: var(--height);
+ line-height: var(--n-height);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
- color: var(--suffix-text-color);
+ color: var(--n-suffix-text-color);
  `, [(0, cssr_1.cB)('base-loading', `
- font-size: var(--icon-size);
- margin-left: 4px;
- color: var(--loading-color);
+ font-size: var(--n-icon-size);
+ margin: 0 2px;
+ color: var(--n-loading-color);
  `), (0, cssr_1.cB)('base-clear', `
- font-size: var(--icon-size);
- margin-left: 4px;
+ font-size: var(--n-icon-size);
  `, [(0, cssr_1.cE)('placeholder', [(0, cssr_1.cB)('base-icon', `
- transition: color .3s var(--bezier);
- color: var(--icon-color);
- font-size: var(--icon-size);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-icon-color);
+ font-size: var(--n-icon-size);
  `)])]), (0, cssr_1.cB)('icon', `
- transition: color .3s var(--bezier);
- color: var(--icon-color);
- font-size: var(--icon-size);
+ transition: color .3s var(--n-bezier);
+ color: var(--n-icon-color);
+ font-size: var(--n-icon-size);
  `), (0, cssr_1.cB)('base-icon', `
- font-size: var(--icon-size);
+ font-size: var(--n-icon-size);
  `)]), (0, cssr_1.cB)('input-word-count', `
  pointer-events: none;
  line-height: 1.5;
  font-size: .85em;
- color: var(--count-text-color);
- transition: color .3s var(--bezier);
+ color: var(--n-count-text-color);
+ transition: color .3s var(--n-bezier);
  margin-left: 4px;
  font-variant: tabular-nums;
  `)]), ['warning', 'error'].map(status => (0, cssr_1.insideFormItem)(status, (0, cssr_1.cB)('input', [(0, cssr_1.cNotM)('disabled', [(0, cssr_1.cB)('base-loading', `
- color: var(--loading-color-${status})
+ color: var(--n-loading-color-${status})
  `), (0, cssr_1.cE)('input-el, textarea-el', {
-  caretColor: `var(--caret-color-${status})`
+  caretColor: `var(--n-caret-color-${status})`
 }), (0, cssr_1.cE)('state-border', {
-  border: `var(--border-${status})`
+  border: `var(--n-border-${status})`
 }), (0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', `
- border: var(--border-hover-${status});
+ border: var(--n-border-hover-${status});
  `)]), (0, cssr_1.c)('&:focus', {
-  backgroundColor: `var(--color-focus-${status})`
+  backgroundColor: `var(--n-color-focus-${status})`
 }, [(0, cssr_1.cE)('state-border', `
- box-shadow: var(--box-shadow-focus-${status});
- border: var(--border-focus-${status});
+ box-shadow: var(--n-box-shadow-focus-${status});
+ border: var(--n-border-focus-${status});
  `)]), (0, cssr_1.cM)('focus', {
-  backgroundColor: `var(--color-focus-${status})`
+  backgroundColor: `var(--n-color-focus-${status})`
 }, [(0, cssr_1.cE)('state-border', `
- box-shadow: var(--box-shadow-focus-${status});
- border: var(--border-focus-${status});
+ box-shadow: var(--n-box-shadow-focus-${status});
+ border: var(--n-border-focus-${status});
  `)])])])))]);

package/lib/input-number/src/InputNumber.d.ts

@@ -2,6 +2,10 @@ import { PropType } from 'vue';
 import { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import type { OnUpdateValue } from './interface';
 declare const inputNumberProps: {
+    loading: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     placeholder: StringConstructor;
     defaultValue: {
         type: PropType<number | null>;
@@ -858,6 +862,10 @@ declare const inputNumberProps: {
 };
 export declare type InputNumberProps = ExtractPublicPropTypes<typeof inputNumberProps>;
 declare const _default: import("vue").DefineComponent<{
+    loading: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     placeholder: StringConstructor;
     defaultValue: {
         type: PropType<number | null>;
@@ -2146,6 +2154,7 @@ declare const _default: import("vue").DefineComponent<{
     focus: () => void;
     blur: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    loading?: unknown;
     placeholder?: unknown;
     defaultValue?: unknown;
     value?: unknown;
@@ -2995,6 +3004,7 @@ declare const _default: import("vue").DefineComponent<{
             clearSize: string;
         }, any>;
     }>> | undefined;
+    loading?: boolean | undefined;
     bordered?: boolean | undefined;
     validator?: ((value: number) => boolean) | undefined;
     onClear?: MaybeArray<(e: MouseEvent) => void> | undefined;
@@ -3005,6 +3015,7 @@ declare const _default: import("vue").DefineComponent<{
     disabled: boolean | undefined;
     step: string | number;
     onChange: MaybeArray<OnUpdateValue> | undefined;
+    loading: boolean;
     bordered: boolean | undefined;
     clearable: boolean;
     defaultValue: number | null;

package/lib/input-number/src/InputNumber.js

@@ -15,7 +15,10 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const utils_1 = require("./utils");
 const input_number_cssr_1 = __importDefault(require("./styles/input-number.cssr"));
-const inputNumberProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { placeholder: String, defaultValue: {
+const inputNumberProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { loading: {
+        type: Boolean,
+        default: undefined
+    }, placeholder: String, defaultValue: {
         type: Number,
         default: null
     }, value: Number, step: {
@@ -370,7 +373,7 @@ exports.default = (0, vue_1.defineComponent)({
     render() {
         const { mergedClsPrefix } = this;
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-input-number` },
-            (0, vue_1.h)(input_1.NInput, { ref: "inputInstRef", bordered: this.mergedBordered, value: this.displayedValue, onUpdateValue: this.handleUpdateDisplayedValue, theme: this.mergedTheme.peers.Input, themeOverrides: this.mergedTheme.peerOverrides.Input, builtinThemeOverrides: this.inputThemeOverrides, size: this.mergedSize, placeholder: this.mergedPlaceholder, disabled: this.mergedDisabled, readonly: this.readonly, textDecoration: this.displayedValueInvalid ? 'line-through' : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeydown: this.handleKeyDown, onMousedown: this.handleMouseDown, onClear: this.handleClear, clearable: this.clearable }, {
+            (0, vue_1.h)(input_1.NInput, { ref: "inputInstRef", bordered: this.mergedBordered, loading: this.loading, value: this.displayedValue, onUpdateValue: this.handleUpdateDisplayedValue, theme: this.mergedTheme.peers.Input, themeOverrides: this.mergedTheme.peerOverrides.Input, builtinThemeOverrides: this.inputThemeOverrides, size: this.mergedSize, placeholder: this.mergedPlaceholder, disabled: this.mergedDisabled, readonly: this.readonly, textDecoration: this.displayedValueInvalid ? 'line-through' : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeydown: this.handleKeyDown, onMousedown: this.handleMouseDown, onClear: this.handleClear, clearable: this.clearable, internalLoadingBeforeSuffix: true }, {
                 _: 2,
                 prefix: this.$slots.prefix,
                 suffix: this.showButton

package/lib/input-number/src/utils.js

@@ -13,8 +13,9 @@ function parse(value) {
 }
 exports.parse = parse;
 // can be parsed to number but shouldn't be applied when inputing
+// Ending with 0 and. doesn't update, if 0 parse func will remove 0
 function isWipValue(value) {
-    return /^\d+\.$/.test(value) || /^\.\d+$/.test(value);
+    return /^(-)?\d+.*(\.|0)$/.test(value) || /^\.\d+$/.test(value);
 }
 exports.isWipValue = isWipValue;
 // string => boolean (expected, not implemented)

package/lib/layout/src/Layout.d.ts

@@ -292,9 +292,9 @@ export declare function createLayoutComponent(isContent: boolean): import("vue")
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--color': string;
-        '--text-color': string;
+        '--n-bezier': string;
+        '--n-color': string;
+        '--n-text-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     embedded?: unknown;
@@ -683,9 +683,9 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--color': string;
-        '--text-color': string;
+        '--n-bezier': string;
+        '--n-color': string;
+        '--n-text-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     embedded?: unknown;

package/lib/layout/src/Layout.js

@@ -74,9 +74,9 @@ function createLayoutComponent(isContent) {
                 hasSiderStyle, mergedTheme: themeRef, cssVars: (0, vue_1.computed)(() => {
                     const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                     return {
-                        '--bezier': cubicBezierEaseInOut,
-                        '--color': props.embedded ? self.colorEmbedded : self.color,
-                        '--text-color': self.textColor
+                        '--n-bezier': cubicBezierEaseInOut,
+                        '--n-color': props.embedded ? self.colorEmbedded : self.color,
+                        '--n-text-color': self.textColor
                     };
                 }) }, exposedMethods);
         },

package/lib/layout/src/LayoutContent.d.ts

@@ -265,9 +265,9 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--color': string;
-        '--text-color': string;
+        '--n-bezier': string;
+        '--n-color': string;
+        '--n-text-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     embedded?: unknown;

package/lib/layout/src/LayoutFooter.js

@@ -20,17 +20,17 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                 const vars = {
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-bezier': cubicBezierEaseInOut
                 };
                 if (props.inverted) {
-                    vars['--color'] = self.footerColorInverted;
-                    vars['--text-color'] = self.textColorInverted;
-                    vars['--border-color'] = self.footerBorderColorInverted;
+                    vars['--n-color'] = self.footerColorInverted;
+                    vars['--n-text-color'] = self.textColorInverted;
+                    vars['--n-border-color'] = self.footerBorderColorInverted;
                 }
                 else {
-                    vars['--color'] = self.footerColor;
-                    vars['--text-color'] = self.textColor;
-                    vars['--border-color'] = self.footerBorderColor;
+                    vars['--n-color'] = self.footerColor;
+                    vars['--n-text-color'] = self.textColor;
+                    vars['--n-border-color'] = self.footerBorderColor;
                 }
                 return vars;
             })

package/lib/layout/src/LayoutHeader.js

@@ -27,17 +27,17 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                 const vars = {
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-bezier': cubicBezierEaseInOut
                 };
                 if (props.inverted) {
-                    vars['--color'] = self.headerColorInverted;
-                    vars['--text-color'] = self.textColorInverted;
-                    vars['--border-color'] = self.headerBorderColorInverted;
+                    vars['--n-color'] = self.headerColorInverted;
+                    vars['--n-text-color'] = self.textColorInverted;
+                    vars['--n-border-color'] = self.headerBorderColorInverted;
                 }
                 else {
-                    vars['--color'] = self.headerColor;
-                    vars['--text-color'] = self.textColor;
-                    vars['--border-color'] = self.headerBorderColor;
+                    vars['--n-color'] = self.headerColor;
+                    vars['--n-text-color'] = self.textColor;
+                    vars['--n-border-color'] = self.headerBorderColor;
                 }
                 return vars;
             })

package/lib/layout/src/LayoutSider.js

@@ -161,25 +161,25 @@ exports.default = (0, vue_1.defineComponent)({
                 const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
                 const { siderToggleButtonColor, siderToggleButtonBorder, siderToggleBarColor, siderToggleBarColorHover } = self;
                 const vars = {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--toggle-button-color': siderToggleButtonColor,
-                    '--toggle-button-border': siderToggleButtonBorder,
-                    '--toggle-bar-color': siderToggleBarColor,
-                    '--toggle-bar-color-hover': siderToggleBarColorHover
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-toggle-button-color': siderToggleButtonColor,
+                    '--n-toggle-button-border': siderToggleButtonBorder,
+                    '--n-toggle-bar-color': siderToggleBarColor,
+                    '--n-toggle-bar-color-hover': siderToggleBarColorHover
                 };
                 if (props.inverted) {
-                    vars['--color'] = self.siderColorInverted;
-                    vars['--text-color'] = self.textColorInverted;
-                    vars['--border-color'] = self.siderBorderColorInverted;
-                    vars['--toggle-button-icon-color'] =
+                    vars['--n-color'] = self.siderColorInverted;
+                    vars['--n-text-color'] = self.textColorInverted;
+                    vars['--n-border-color'] = self.siderBorderColorInverted;
+                    vars['--n-toggle-button-icon-color'] =
                         self.siderToggleButtonIconColorInverted;
                     vars.__invertScrollbar = self.__invertScrollbar;
                 }
                 else {
-                    vars['--color'] = self.siderColor;
-                    vars['--text-color'] = self.textColor;
-                    vars['--border-color'] = self.siderBorderColor;
-                    vars['--toggle-button-icon-color'] = self.siderToggleButtonIconColor;
+                    vars['--n-color'] = self.siderColor;
+                    vars['--n-text-color'] = self.textColor;
+                    vars['--n-border-color'] = self.siderBorderColor;
+                    vars['--n-toggle-button-icon-color'] = self.siderToggleButtonIconColor;
                 }
                 return vars;
             }) }, exposedMethods);

package/lib/layout/src/styles/layout-footer.cssr.js

@@ -5,20 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --color
-// --border-color
-// --text-color
+// --n-bezier
+// --n-color
+// --n-border-color
+// --n-text-color
 
 
 exports.default = (0, cssr_1.cB)('layout-footer', `
  transition:
- box-shadow .3s var(--bezier),
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- border-color .3s var(--bezier);
- color: var(--text-color);
- background-color: var(--color);
+ box-shadow .3s var(--n-bezier),
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
+ color: var(--n-text-color);
+ background-color: var(--n-color);
  box-sizing: border-box;
 `, [(0, cssr_1.cM)('absolute-positioned', `
  position: absolute;
@@ -26,5 +26,5 @@ exports.default = (0, cssr_1.cB)('layout-footer', `
  right: 0;
  bottom: 0;
  `), (0, cssr_1.cM)('bordered', `
- border-top: solid 1px var(--border-color);
+ border-top: solid 1px var(--n-border-color);
  `)]);

package/lib/layout/src/styles/layout-header.cssr.js

@@ -5,27 +5,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --text-color
-// --color
-// --border-color
+// --n-bezier
+// --n-text-color
+// --n-color
+// --n-border-color
 
 
 exports.default = (0, cssr_1.cB)('layout-header', `
  transition:
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier),
- border-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
  box-sizing: border-box;
  width: 100%;
- background-color: var(--color);
- color: var(--text-color);
+ background-color: var(--n-color);
+ color: var(--n-text-color);
 `, [(0, cssr_1.cM)('absolute-positioned', `
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  `), (0, cssr_1.cM)('bordered', `
- border-bottom: solid 1px var(--border-color);
+ border-bottom: solid 1px var(--n-border-color);
  `)]);