naive-ui 2.22.0 → 2.24.0

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

@@ -5,21 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_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
 
 
 exports.default = (0, cssr_1.cB)('radio', `
@@ -30,10 +30,10 @@ exports.default = (0, cssr_1.cB)('radio', `
  display: inline-flex;
  vertical-align: middle;
  align-items: center;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
 `, [(0, cssr_1.cE)('dot', `
- height: var(--radio-size);
- width: var(--radio-size);
+ height: var(--n-radio-size);
+ width: var(--n-radio-size);
  `), (0, cssr_1.cB)('radio-input', `
  position: absolute;
  border: 0;
@@ -44,12 +44,13 @@ exports.default = (0, cssr_1.cB)('radio', `
  bottom: 0;
  opacity: 0;
  z-index: 1;
+ cursor: pointer;
  `), (0, cssr_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%;
  `, [(0, cssr_1.c)('&::before', `
@@ -62,38 +63,40 @@ exports.default = (0, cssr_1.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);
  `), (0, cssr_1.cM)('checked', {
-  boxShadow: 'var(--box-shadow-active)'
+  boxShadow: 'var(--n-box-shadow-active)'
 }, [(0, cssr_1.c)('&::before', `
  opacity: 1;
  transform: scale(1);
  `)])]), (0, cssr_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);
  `), (0, cssr_1.cNotM)('disabled', `
  cursor: pointer;
  `, [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('dot', {
-  boxShadow: 'var(--box-shadow-hover)'
+  boxShadow: 'var(--n-box-shadow-hover)'
 })]), (0, cssr_1.cM)('focus', [(0, cssr_1.c)('&:not(:active)', [(0, cssr_1.cE)('dot', {
-  boxShadow: 'var(--box-shadow-focus)'
+  boxShadow: 'var(--n-box-shadow-focus)'
 })])])]), (0, cssr_1.cM)('disabled', `
  cursor: not-allowed;
  `, [(0, cssr_1.cE)('dot', {
-  boxShadow: 'var(--box-shadow-disabled)',
-  backgroundColor: 'var(--color-disabled)'
+  boxShadow: 'var(--n-box-shadow-disabled)',
+  backgroundColor: 'var(--n-color-disabled)'
 }, [(0, cssr_1.c)('&::before', {
-  backgroundColor: 'var(--dot-color-disabled)'
+  backgroundColor: 'var(--n-dot-color-disabled)'
 }), (0, cssr_1.cM)('checked', `
  transform: scale(1);
  opacity: 1;
  `)]), (0, cssr_1.cE)('label', {
-  color: 'var(--text-color-disabled)'
-})])]);
+  color: 'var(--n-text-color-disabled)'
+}), (0, cssr_1.cB)('radio-input', `
+ cursor: not-allowed;
+ `)])]);

package/lib/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/lib/rate/src/Rate.js

@@ -86,10 +86,10 @@ exports.default = (0, vue_1.defineComponent)({
                     mergedSize = self[(0, _utils_1.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/lib/rate/src/styles/index.cssr.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --item-color
-// --item-color-active
+// --n-bezier
+// --n-item-color
+// --n-item-color-active
 
 
 exports.default = (0, cssr_1.cB)('rate', {
@@ -15,21 +15,21 @@ exports.default = (0, cssr_1.cB)('rate', {
   flexWrap: 'nowrap'
 }, [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('item', `
  transition:
- transform .1s var(--bezier),
- color .3s var(--bezier);
+ transform .1s var(--n-bezier),
+ color .3s var(--n-bezier);
  `)]), (0, cssr_1.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);
  `, [(0, cssr_1.c)('&:not(:first-child)', {
   marginLeft: '6px'
 }), (0, cssr_1.cM)('active', {
-  color: 'var(--item-color-active)'
+  color: 'var(--n-item-color-active)'
 })]), (0, cssr_1.cNotM)('readonly', `
  cursor: pointer;
  `, [(0, cssr_1.cE)('item', [(0, cssr_1.c)('&:hover', {
@@ -47,5 +47,5 @@ exports.default = (0, cssr_1.cB)('rate', {
  overflow: hidden;
  color: rgba(255, 255, 255, 0);
  `, [(0, cssr_1.cM)('active', {
-  color: 'var(--item-color-active)'
+  color: 'var(--n-item-color-active)'
 })])]);

package/lib/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/lib/result/src/Result.js

@@ -14,13 +14,11 @@ const _500_1 = __importDefault(require("./500"));
 const _418_1 = __importDefault(require("./418"));
 const _403_1 = __importDefault(require("./403"));
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const imgMap = {
+const iconMap = {
     403: _403_1.default,
     404: _404_1.default,
     418: _418_1.default,
-    500: _500_1.default
-};
-const iconMap = {
+    500: _500_1.default,
     info: (0, vue_1.h)(icons_1.InfoIcon, null),
     success: (0, vue_1.h)(icons_1.SuccessIcon, null),
     warning: (0, vue_1.h)(icons_1.WarningIcon, null),
@@ -45,27 +43,28 @@ exports.default = (0, vue_1.defineComponent)({
                 const { size, status } = props;
                 const { common: { cubicBezierEaseInOut }, self: { textColor, lineHeight, titleTextColor, titleFontWeight, [(0, _utils_1.createKey)('iconColor', status)]: iconColor, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('titleFontSize', size)]: titleFontSize, [(0, _utils_1.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
                 };
             })
         };
     },
     render() {
+        var _a;
         const { status, $slots, mergedClsPrefix } = this;
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-result`, style: this.cssVars },
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-result-icon` }, status in imgMap ? (imgMap[status]) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => iconMap[status] }))),
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-result-icon` }, ((_a = $slots.icon) === null || _a === void 0 ? void 0 : _a.call($slots)) || ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => iconMap[status] }))),
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-result-header` },
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-result-header__title` }, this.title),
-                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-result-header__description` }, this.description)),
-            $slots.default ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-result-content` }, $slots)) : null,
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-result-footer` }, (0, vue_1.renderSlot)($slots, 'footer'))));
+                this.title ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-result-header__title` }, this.title)) : null,
+                this.description ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-result-header__description` }, this.description)) : null),
+            $slots.default && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-result-content` }, $slots)),
+            $slots.footer && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-result-footer` }, $slots.footer()))));
     }
 });

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

@@ -4,47 +4,47 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-const cssr_1 = require("../../../_utils/cssr"); // --bezier
-// --font-size
-// --icon-size
-// --line-height
-// --text-color
-// --title-font-size
-// --title-font-weight
-// --title-text-color
+const cssr_1 = require("../../../_utils/cssr"); // --n-bezier
+// --n-font-size
+// --n-icon-size
+// --n-line-height
+// --n-text-color
+// --n-title-font-size
+// --n-title-font-weight
+// --n-title-text-color
 
 
 exports.default = (0, cssr_1.cB)('result', `
- color: var(--text-color);
- line-height: var(--line-height);
- font-size: var(--font-size);
+ color: var(--n-text-color);
+ line-height: var(--n-line-height);
+ font-size: var(--n-font-size);
  transition:
- color .3s var(--bezier);
+ color .3s var(--n-bezier);
 `, [(0, cssr_1.cB)('result-icon', `
- height: 1em;
  display: flex;
  justify-content: center;
- transition: color .3s var(--bezier);
- color: var(--icon-color);
- font-size: var(--icon-size);
- `, [(0, cssr_1.cE)('status-image', {
-  width: '1em'
-}), (0, cssr_1.c)('svg', {
-  height: '1em'
-})]), (0, cssr_1.cB)('result-content', {
+ transition: color .3s var(--n-bezier);
+ `, [(0, cssr_1.cE)('status-image', `
+ font-size: var(--n-icon-size);
+ width: 1em;
+ height: 1em;
+ `), (0, cssr_1.cB)('base-icon', `
+ color: var(--n-icon-color);
+ font-size: var(--n-icon-size);
+ `)]), (0, cssr_1.cB)('result-content', {
   marginTop: '24px'
 }), (0, cssr_1.cB)('result-footer', `
  margin-top: 24px;
  text-align: center;
  `), (0, cssr_1.cB)('result-header', [(0, cssr_1.cE)('title', `
  margin-top: 16px;
- font-weight: var(--title-font-weight);
- transition: color .3s var(--bezier);
+ font-weight: var(--n-title-font-weight);
+ transition: color .3s var(--n-bezier);
  text-align: center;
- color: var(--title-text-color);
- font-size: var(--title-font-size);
+ color: var(--n-title-text-color);
+ font-size: var(--n-title-font-size);
  `), (0, cssr_1.cE)('description', `
  margin-top: 4px;
  text-align: center;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  `)])]);

package/lib/select/src/Select.d.ts

@@ -3,8 +3,7 @@ import { TreeNode } from 'treemate';
 import { FollowerPlacement } from 'vueuc';
 import { RenderLabel, RenderOption } from '../../_internal/select-menu/src/interface';
 import { RenderTag } from '../../_internal/selection/src/interface';
-import { ExtractPublicPropTypes } from '../../_utils';
-import type { MaybeArray } from '../../_utils';
+import type { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import { defaultFilter } from './utils';
 import type { SelectMixedOption, SelectBaseOption, SelectGroupOption, SelectIgnoredOption, OnUpdateValue, Value, Size, ValueAtom } from './interface';
 declare const selectProps: {
@@ -94,21 +93,13 @@ declare const selectProps: {
     readonly onSearch: PropType<MaybeArray<(value: string) => void> | undefined>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
-    /** deprecated */
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly items: {
-        readonly type: PropType<SelectMixedOption[] | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
     readonly displayDirective: {
         readonly type: PropType<"show" | "if">;
         readonly default: "show";
     };
+    /** deprecated */
+    readonly onChange: PropType<MaybeArray<OnUpdateValue>>;
+    readonly items: PropType<SelectMixedOption[]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Select", {
         menuBoxShadow: string;
     }, {
@@ -570,21 +561,13 @@ declare const _default: import("vue").DefineComponent<{
     readonly onSearch: PropType<MaybeArray<(value: string) => void> | undefined>;
     readonly onUpdateShow: PropType<MaybeArray<(value: boolean) => void>>;
     readonly 'onUpdate:show': PropType<MaybeArray<(value: boolean) => void>>;
-    /** deprecated */
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
-    readonly items: {
-        readonly type: PropType<SelectMixedOption[] | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
     readonly displayDirective: {
         readonly type: PropType<"show" | "if">;
         readonly default: "show";
     };
+    /** deprecated */
+    readonly onChange: PropType<MaybeArray<OnUpdateValue>>;
+    readonly items: PropType<SelectMixedOption[]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Select", {
         menuBoxShadow: string;
     }, {
@@ -1280,7 +1263,7 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     cssVars: import("vue").ComputedRef<{
-        '--menu-box-shadow': string;
+        '--n-menu-box-shadow': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly to?: unknown;
@@ -1321,9 +1304,9 @@ declare const _default: import("vue").DefineComponent<{
     readonly onSearch?: unknown;
     readonly onUpdateShow?: unknown;
     readonly 'onUpdate:show'?: unknown;
+    readonly displayDirective?: unknown;
     readonly onChange?: unknown;
     readonly items?: unknown;
-    readonly displayDirective?: unknown;
     readonly theme?: unknown;
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
@@ -1748,11 +1731,9 @@ declare const _default: import("vue").DefineComponent<{
     show: boolean | undefined;
     multiple: boolean;
     disabled: boolean | undefined;
-    onChange: MaybeArray<OnUpdateValue> | undefined;
     to: string | boolean | HTMLElement;
     loading: boolean;
     placement: FollowerPlacement;
-    items: SelectMixedOption[] | undefined;
     bordered: boolean | undefined;
     virtualScroll: boolean;
     showArrow: boolean;

package/lib/select/src/Select.js

@@ -62,34 +62,26 @@ const selectProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), {
         default: true
     }, renderLabel: Function, renderOption: Function, renderTag: Function, 'onUpdate:value': [Function, Array], inputProps: Object, 
     // for jsx
-    onUpdateValue: [Function, Array], onBlur: [Function, Array], onClear: [Function, Array], onFocus: [Function, Array], onScroll: [Function, Array], onSearch: [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:show': [Function, Array], 
-    /** deprecated */
-    onChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('select', '`on-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, items: {
-        type: Array,
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('select', '`items` is deprecated, please use `options` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }, displayDirective: {
+    onUpdateValue: [Function, Array], onBlur: [Function, Array], onClear: [Function, Array], onFocus: [Function, Array], onScroll: [Function, Array], onSearch: [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:show': [Function, Array], displayDirective: {
         type: String,
         default: 'show'
-    } });
+    }, 
+    /** deprecated */
+    onChange: [Function, Array], items: Array });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Select',
     props: selectProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.items !== undefined) {
+                    (0, _utils_1.warnOnce)('select', '`items` is deprecated, please use `options` instead.');
+                }
+                if (props.onChange !== undefined) {
+                    (0, _utils_1.warnOnce)('select', '`on-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef, mergedBorderedRef, namespaceRef } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Select', 'Select', index_cssr_1.default, styles_1.selectLight, props, mergedClsPrefixRef);
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue);
@@ -580,7 +572,7 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { self: { menuBoxShadow } } = themeRef.value;
                 return {
-                    '--menu-box-shadow': menuBoxShadow
+                    '--n-menu-box-shadow': menuBoxShadow
                 };
             })
         };

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

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "__esModule", {
 
 const cssr_1 = require("../../../_utils/cssr");
 
-const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr")); // --menu-box-shadow
+const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr")); // --n-menu-box-shadow
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('select', `
@@ -22,5 +22,5 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('select', `
  position: relative;
  `), (0, cssr_1.cB)('select-menu', `
  margin: 4px 0;
- box-shadow: var(--menu-box-shadow);
+ box-shadow: var(--n-menu-box-shadow);
  `, [(0, fade_in_scale_up_cssr_1.default)()])]);

package/lib/skeleton/src/Skeleton.d.ts

@@ -97,9 +97,9 @@ declare const _default: import("vue").DefineComponent<{
         width: string | undefined;
         height: string | undefined;
         animation: string;
-        '--bezier': string;
-        '--color-start': string;
-        '--color-end': string;
+        '--n-bezier': string;
+        '--n-color-start': string;
+        '--n-color-end': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly text?: unknown;

package/lib/skeleton/src/Skeleton.js

@@ -57,9 +57,9 @@ exports.default = (0, vue_1.defineComponent)({
                         ? (0, seemly_1.pxfy)(mergedHeight)
                         : mergedHeight,
                     animation: !animated ? 'none' : '',
-                    '--bezier': cubicBezierEaseInOut,
-                    '--color-start': color,
-                    '--color-end': colorEnd
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-color-start': color,
+                    '--n-color-end': colorEnd
                 };
             })
         };

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

@@ -5,32 +5,32 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --color
-// --color-end
-// --bezier
+// --n-color-start
+// --n-color-end
+// --n-bezier
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('skeleton', `
  height: 1em;
  width: 100%;
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  transition:
- --color-start .3s var(--bezier),
- --color-end .3s var(--bezier),
- background-color .3s var(--bezier);
+ --n-color-start .3s var(--n-bezier),
+ --n-color-end .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  animation: 2s skeleton-loading infinite cubic-bezier(0.36, 0, 0.64, 1);
- background-color: var(--color-start);
+ background-color: var(--n-color-start);
  `), (0, cssr_1.c)('@keyframes skeleton-loading', `
  0% {
- background: var(--color-start);
+ background: var(--n-color-start);
  }
  40% {
- background: var(--color-end);
+ background: var(--n-color-end);
  }
  80% {
- background: var(--color-start);
+ background: var(--n-color-start);
  }
  100% {
- background: var(--color-start);
+ background: var(--n-color-start);
  }
  `)]);