naive-ui 2.21.5 → 2.23.2

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

@@ -12,31 +12,31 @@ const oppositePlacement = {
   left: 'right',
   right: 'left'
 }; // vars:
-// --bezier
-// --bezier-ease-in
-// --bezier-ease-out
-// --font-size
-// --text-color
-// --color
-// --border-radius
-// --arrow-height
-// --arrow-offset
-// --arrow-offset-vertical
-// --padding
-// --space
-// --space-arrow
-// --divider-color
+// --n-bezier
+// --n-bezier-ease-in
+// --n-bezier-ease-out
+// --n-font-size
+// --n-text-color
+// --n-color
+// --n-border-radius
+// --n-arrow-height
+// --n-arrow-offset
+// --n-arrow-offset-vertical
+// --n-padding
+// --n-space
+// --n-space-arrow
+// --n-divider-color
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('popover', `
  transition:
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier),
- color .3s var(--bezier);
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ color .3s var(--n-bezier);
  transform-origin: inherit;
  position: relative;
- font-size: var(--font-size);
- color: var(--text-color);
- box-shadow: var(--box-shadow);
+ font-size: var(--n-font-size);
+ color: var(--n-text-color);
+ box-shadow: var(--n-box-shadow);
  `, [// body transition
 (0, cssr_1.c)('&.popover-transition-enter-from, &.popover-transition-leave-to', `
  opacity: 0;
@@ -46,84 +46,84 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('popover', `
  opacity: 1;
  `), (0, cssr_1.c)('&.popover-transition-enter-active', `
  transition:
- opacity .15s var(--bezier-ease-out),
- transform .15s var(--bezier-ease-out);
+ opacity .15s var(--n-bezier-ease-out),
+ transform .15s var(--n-bezier-ease-out);
  `), (0, cssr_1.c)('&.popover-transition-leave-active', `
  transition:
- opacity .15s var(--bezier-ease-in),
- transform .15s var(--bezier-ease-in);
+ opacity .15s var(--n-bezier-ease-in),
+ transform .15s var(--n-bezier-ease-in);
  `), (0, cssr_1.cNotM)('raw', `
- background-color: var(--color);
- border-radius: var(--border-radius);
- `, [(0, cssr_1.cNotM)('show-header', 'padding: var(--padding);')]), (0, cssr_1.cE)('header', `
- padding: var(--padding);
- border-bottom: 1px solid var(--divider-color);
- transition: border-color .3s var(--bezier);
+ background-color: var(--n-color);
+ border-radius: var(--n-border-radius);
+ `, [(0, cssr_1.cNotM)('show-header', 'padding: var(--n-padding);')]), (0, cssr_1.cE)('header', `
+ padding: var(--n-padding);
+ border-bottom: 1px solid var(--n-divider-color);
+ transition: border-color .3s var(--n-bezier);
  `), (0, cssr_1.cE)('content', `
- padding: var(--padding);
+ padding: var(--n-padding);
  `), (0, cssr_1.cB)('popover-arrow-wrapper', `
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  `, [(0, cssr_1.cB)('popover-arrow', `
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  position: absolute;
  display: block;
- width: calc(var(--arrow-height) * 1.414);
- height: calc(var(--arrow-height) * 1.414);
+ width: calc(var(--n-arrow-height) * 1.414);
+ height: calc(var(--n-arrow-height) * 1.414);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12);
  transform: rotate(45deg);
- background-color: var(--color);
+ background-color: var(--n-color);
  pointer-events: all;
  `)])]), placementStyle('top-start', `
- top: calc(-0.707 * var(--arrow-height));
- left: var(--arrow-offset);
+ top: calc(-0.707 * var(--n-arrow-height));
+ left: var(--n-arrow-offset);
  `), placementStyle('top', `
- top: calc(-0.707 * var(--arrow-height));
- transform: translateX(calc(-0.707 * var(--arrow-height))) rotate(45deg);
+ top: calc(-0.707 * var(--n-arrow-height));
+ transform: translateX(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  left: 50%;
  `), placementStyle('top-end', `
- top: calc(-0.707 * var(--arrow-height));
- right: var(--arrow-offset);
+ top: calc(-0.707 * var(--n-arrow-height));
+ right: var(--n-arrow-offset);
  `), placementStyle('bottom-start', `
- bottom: calc(-0.707 * var(--arrow-height));
- left: var(--arrow-offset);
+ bottom: calc(-0.707 * var(--n-arrow-height));
+ left: var(--n-arrow-offset);
  `), placementStyle('bottom', `
- bottom: calc(-0.707 * var(--arrow-height));
- transform: translateX(calc(-0.707 * var(--arrow-height))) rotate(45deg);
+ bottom: calc(-0.707 * var(--n-arrow-height));
+ transform: translateX(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  left: 50%;
  `), placementStyle('bottom-end', `
- bottom: calc(-0.707 * var(--arrow-height));
- right: var(--arrow-offset);
+ bottom: calc(-0.707 * var(--n-arrow-height));
+ right: var(--n-arrow-offset);
  `), placementStyle('left-start', `
- left: calc(-0.707 * var(--arrow-height));
- top: var(--arrow-offset-vertical);
+ left: calc(-0.707 * var(--n-arrow-height));
+ top: var(--n-arrow-offset-vertical);
  `), placementStyle('left', `
- left: calc(-0.707 * var(--arrow-height));
- transform: translateY(calc(-0.707 * var(--arrow-height))) rotate(45deg);
+ left: calc(-0.707 * var(--n-arrow-height));
+ transform: translateY(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  top: 50%;
  `), placementStyle('left-end', `
- left: calc(-0.707 * var(--arrow-height));
- bottom: var(--arrow-offset-vertical);
+ left: calc(-0.707 * var(--n-arrow-height));
+ bottom: var(--n-arrow-offset-vertical);
  `), placementStyle('right-start', `
- right: calc(-0.707 * var(--arrow-height));
- top: var(--arrow-offset-vertical);
+ right: calc(-0.707 * var(--n-arrow-height));
+ top: var(--n-arrow-offset-vertical);
  `), placementStyle('right', `
- right: calc(-0.707 * var(--arrow-height));
- transform: translateY(calc(-0.707 * var(--arrow-height))) rotate(45deg);
+ right: calc(-0.707 * var(--n-arrow-height));
+ transform: translateY(calc(-0.707 * var(--n-arrow-height))) rotate(45deg);
  top: 50%;
  `), placementStyle('right-end', `
- right: calc(-0.707 * var(--arrow-height));
- bottom: var(--arrow-offset-vertical);
+ right: calc(-0.707 * var(--n-arrow-height));
+ bottom: var(--n-arrow-offset-vertical);
  `)]);
 
 function placementStyle(placement, arrowStyleLiteral) {
   const position = placement.split('-')[0];
-  const sizeStyle = ['top', 'bottom'].includes(position) ? 'height: var(--space-arrow);' : 'width: var(--space-arrow);';
+  const sizeStyle = ['top', 'bottom'].includes(position) ? 'height: var(--n-space-arrow);' : 'width: var(--n-space-arrow);';
   return (0, cssr_1.c)(`[v-placement="${placement}"] >`, [(0, cssr_1.cB)('popover', `
- margin-${oppositePlacement[position]}: var(--space);
+ margin-${oppositePlacement[position]}: var(--n-space);
  `, [(0, cssr_1.cM)('show-arrow', `
- margin-${oppositePlacement[position]}: var(--space-arrow);
+ margin-${oppositePlacement[position]}: var(--n-space-arrow);
  `), (0, cssr_1.cM)('overlap', `
  margin: 0;
  `), (0, cssr_1.cCB)('popover-arrow-wrapper', `

package/lib/popselect/src/Popselect.d.ts

@@ -23,11 +23,7 @@ declare const popselectProps: {
     onMouseenter: PropType<(e: MouseEvent) => void>;
     onMouseleave: PropType<(e: MouseEvent) => void>;
     renderLabel: PropType<import("../../_internal/select-menu/src/interface").RenderLabel>;
-    onChange: {
-        readonly type: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {
         default: string;
         type: PropType<import("vueuc").FollowerPlacement>;
@@ -322,11 +318,7 @@ declare const _default: import("vue").DefineComponent<{
     onMouseenter: PropType<(e: MouseEvent) => void>;
     onMouseleave: PropType<(e: MouseEvent) => void>;
     renderLabel: PropType<import("../../_internal/select-menu/src/interface").RenderLabel>;
-    onChange: {
-        readonly type: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    onChange: PropType<import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined>;
     placement: {
         default: string;
         type: PropType<import("vueuc").FollowerPlacement>;
@@ -1108,7 +1100,6 @@ declare const _default: import("vue").DefineComponent<{
     multiple: boolean;
     disabled: boolean;
     duration: number;
-    onChange: import("../../_utils").MaybeArray<import("../../select/src/interface").OnUpdateValue> | undefined;
     to: string | boolean | HTMLElement;
     raw: boolean;
     placement: import("vueuc").FollowerPlacement;

package/lib/popselect/src/Popselect.js

@@ -57,7 +57,7 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { mergedTheme, $attrs } = this;
+        const { mergedTheme, $attrs, $slots } = this;
         const popoverProps = {
             theme: mergedTheme.peers.Popover,
             themeOverrides: mergedTheme.peerOverrides.Popover,
@@ -69,7 +69,7 @@ exports.default = (0, vue_1.defineComponent)({
                 return ((0, vue_1.h)(PopselectPanel_1.default, Object.assign({}, (0, vue_1.mergeProps)($attrs, {
                     class: className,
                     style
-                }), (0, _utils_1.keep)(this.$props, PopselectPanel_1.panelPropKeys), { ref: (0, _utils_1.createRefSetter)(ref), onMouseenter: onMouseenter, onMouseleave: onMouseleave })));
+                }), (0, _utils_1.keep)(this.$props, PopselectPanel_1.panelPropKeys), { ref: (0, _utils_1.createRefSetter)(ref), onMouseenter: onMouseenter, onMouseleave: onMouseleave }), $slots));
             }
         };
         return ((0, vue_1.h)(popover_1.NPopover, Object.assign({}, (0, _utils_1.omit)(this.$props, PopselectPanel_1.panelPropKeys), popoverProps), {

package/lib/popselect/src/PopselectPanel.d.ts

@@ -26,11 +26,7 @@ export declare const panelProps: {
     readonly onMouseenter: PropType<(e: MouseEvent) => void>;
     readonly onMouseleave: PropType<(e: MouseEvent) => void>;
     readonly renderLabel: PropType<RenderLabel>;
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
 };
 export declare const panelPropKeys: ("value" | "size" | "width" | "multiple" | "onChange" | "onMouseenter" | "onMouseleave" | "scrollable" | "renderLabel" | "options" | "onUpdate:value" | "onUpdateValue" | "cancelable")[];
 declare const _default: import("vue").DefineComponent<{
@@ -55,11 +51,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly onMouseenter: PropType<(e: MouseEvent) => void>;
     readonly onMouseleave: PropType<(e: MouseEvent) => void>;
     readonly renderLabel: PropType<RenderLabel>;
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<OnUpdateValue> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
 }, {
     mergedTheme: import("vue").Ref<{
         common: {
@@ -266,6 +258,7 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     treeMate: import("vue").ComputedRef<import("treemate").TreeMate<SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>, SelectGroupOption, SelectIgnoredOption>>;
     handleToggle: (tmNode: TreeNode<SelectBaseOption>) => void;
+    handleMenuMousedown: (e: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly multiple?: unknown;
     readonly value?: unknown;
@@ -299,7 +292,6 @@ declare const _default: import("vue").DefineComponent<{
     value: Value | null;
     size: PopselectSize;
     multiple: boolean;
-    onChange: MaybeArray<OnUpdateValue> | undefined;
     scrollable: boolean;
     options: SelectMixedOption[];
     cancelable: boolean;

package/lib/popselect/src/PopselectPanel.js

@@ -4,6 +4,7 @@ exports.panelPropKeys = exports.panelProps = void 0;
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 const vue_1 = require("vue");
 const treemate_1 = require("treemate");
+const seemly_1 = require("seemly");
 const utils_1 = require("../../select/src/utils");
 const _mixins_1 = require("../../_mixins");
 const _internal_1 = require("../../_internal");
@@ -32,20 +33,20 @@ exports.panelProps = {
     onMouseleave: Function,
     renderLabel: Function,
     // deprecated
-    onChange: {
-        type: [Function, Array],
-        validator: () => {
-            (0, _utils_1.warn)('popselect', '`on-change` is deprecated, please use `on-update:value` instead.');
-            return true;
-        },
-        default: undefined
-    }
+    onChange: [Function, Array]
 };
 exports.panelPropKeys = (0, _utils_1.keysOf)(exports.panelProps);
 exports.default = (0, vue_1.defineComponent)({
     name: 'PopselectPanel',
     props: exports.panelProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.onChange !== undefined) {
+                    (0, _utils_1.warn)('popselect', '`on-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const NPopselect = (0, vue_1.inject)(interface_1.popselectInjectionKey);
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
@@ -65,6 +66,10 @@ exports.default = (0, vue_1.defineComponent)({
         function handleToggle(tmNode) {
             toggle(tmNode.key);
         }
+        function handleMenuMousedown(e) {
+            if (!(0, seemly_1.happensIn)(e, 'action'))
+                e.preventDefault();
+        }
         function toggle(value) {
             const { value: { getNode } } = treeMateRef;
             if (props.multiple) {
@@ -121,10 +126,11 @@ exports.default = (0, vue_1.defineComponent)({
             mergedTheme: NPopselect.mergedThemeRef,
             mergedClsPrefix: mergedClsPrefixRef,
             treeMate: treeMateRef,
-            handleToggle
+            handleToggle,
+            handleMenuMousedown
         };
     },
     render() {
-        return ((0, vue_1.h)(_internal_1.NInternalSelectMenu, { clsPrefix: this.mergedClsPrefix, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides.InternalSelectMenu, multiple: this.multiple, treeMate: this.treeMate, size: this.size, value: this.value, width: this.width, virtualScroll: false, scrollable: this.scrollable, renderLabel: this.renderLabel, onToggle: this.handleToggle, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseenter }));
+        return ((0, vue_1.h)(_internal_1.NInternalSelectMenu, { clsPrefix: this.mergedClsPrefix, focusable: true, theme: this.mergedTheme.peers.InternalSelectMenu, themeOverrides: this.mergedTheme.peerOverrides.InternalSelectMenu, multiple: this.multiple, treeMate: this.treeMate, size: this.size, value: this.value, width: this.width, virtualScroll: false, scrollable: this.scrollable, renderLabel: this.renderLabel, onToggle: this.handleToggle, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseenter, onMousedown: this.handleMenuMousedown }, this.$slots));
     }
 });

package/lib/progress/src/Progress.d.ts

@@ -237,20 +237,20 @@ declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: import("vue").ComputedRef<string>;
     mergedIndicatorPlacement: import("vue").ComputedRef<"inside" | "outside">;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--fill-color': string;
-        '--font-size': string;
-        '--font-size-circle': string;
-        '--font-weight-circle': string;
-        '--icon-color': string;
-        '--icon-size-circle': string;
-        '--icon-size-line': string;
-        '--line-bg-processing': string;
-        '--rail-color': string;
-        '--rail-height': string;
-        '--text-color-circle': string;
-        '--text-color-line-inner': string;
-        '--text-color-line-outer': string;
+        '--n-bezier': string;
+        '--n-fill-color': string;
+        '--n-font-size': string;
+        '--n-font-size-circle': string;
+        '--n-font-weight-circle': string;
+        '--n-icon-color': string;
+        '--n-icon-size-circle': string;
+        '--n-icon-size-line': string;
+        '--n-line-bg-processing': string;
+        '--n-rail-color': string;
+        '--n-rail-height': string;
+        '--n-text-color-circle': string;
+        '--n-text-color-line-inner': string;
+        '--n-text-color-line-outer': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly processing?: unknown;

package/lib/progress/src/Progress.js

@@ -55,20 +55,20 @@ exports.default = (0, vue_1.defineComponent)({
                 const { status } = props;
                 const { common: { cubicBezierEaseInOut }, self: { fontSize, fontSizeCircle, railColor, railHeight, iconSizeCircle, iconSizeLine, textColorCircle, textColorLineInner, textColorLineOuter, lineBgProcessing, fontWeightCircle, [(0, _utils_1.createKey)('iconColor', status)]: iconColor, [(0, _utils_1.createKey)('fillColor', status)]: fillColor } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--fill-color': fillColor,
-                    '--font-size': fontSize,
-                    '--font-size-circle': fontSizeCircle,
-                    '--font-weight-circle': fontWeightCircle,
-                    '--icon-color': iconColor,
-                    '--icon-size-circle': iconSizeCircle,
-                    '--icon-size-line': iconSizeLine,
-                    '--line-bg-processing': lineBgProcessing,
-                    '--rail-color': railColor,
-                    '--rail-height': railHeight,
-                    '--text-color-circle': textColorCircle,
-                    '--text-color-line-inner': textColorLineInner,
-                    '--text-color-line-outer': textColorLineOuter
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-fill-color': fillColor,
+                    '--n-font-size': fontSize,
+                    '--n-font-size-circle': fontSizeCircle,
+                    '--n-font-weight-circle': fontWeightCircle,
+                    '--n-icon-color': iconColor,
+                    '--n-icon-size-circle': iconSizeCircle,
+                    '--n-icon-size-line': iconSizeLine,
+                    '--n-line-bg-processing': lineBgProcessing,
+                    '--n-rail-color': railColor,
+                    '--n-rail-height': railHeight,
+                    '--n-text-color-circle': textColorCircle,
+                    '--n-text-color-line-inner': textColorLineInner,
+                    '--n-text-color-line-outer': textColorLineOuter
                 };
             })
         };

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

@@ -5,27 +5,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars
-// --bezier
-// --fill-color
-// --font-size
-// --font-size-circle
-// --font-weight-circle
-// --icon-color
-// --icon-size-circle
-// --icon-size-line
-// --line-bg-processing
-// --rail-color
-// --rail-height
-// --text-color-circle
-// --text-color-line-inner
-// --text-color-line-outer
+// --n-bezier
+// --n-fill-color
+// --n-font-size
+// --n-font-size-circle
+// --n-font-weight-circle
+// --n-icon-color
+// --n-icon-size-circle
+// --n-icon-size-line
+// --n-line-bg-processing
+// --n-rail-color
+// --n-rail-height
+// --n-text-color-circle
+// --n-text-color-line-inner
+// --n-text-color-line-outer
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('progress', {
   display: 'inline-block'
 }, [(0, cssr_1.cB)('progress-icon', `
- color: var(--icon-color);
- transition: color .3s var(--bezier);
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
  `), (0, cssr_1.cM)('line', `
  width: 100%;
  display: block;
@@ -39,16 +39,16 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('progress', {
 }), (0, cssr_1.cB)('progress-icon', `
  width: 30px;
  padding-left: 14px;
- height: var(--icon-size-line);
- line-height: var(--icon-size-line);
- font-size: var(--icon-size-line);
+ height: var(--n-icon-size-line);
+ line-height: var(--n-icon-size-line);
+ font-size: var(--n-icon-size-line);
  `, [(0, cssr_1.cM)('as-text', `
- color: var(--text-color-line-outer);
+ color: var(--n-text-color-line-outer);
  text-align: center;
  width: 40px;
- font-size: var(--font-size);
+ font-size: var(--n-font-size);
  padding-left: 4px;
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  `)])]), (0, cssr_1.cM)('circle', {
   width: '120px'
 }, [(0, cssr_1.cB)('progress-custom-content', `
@@ -67,10 +67,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('progress', {
  display: flex;
  align-items: center;
  color: inherit;
- font-size: var(--font-size-circle);
- color: var(--text-color-circle);
- font-weight: var(--font-weight-circle);
- transition: color .3s var(--bezier);
+ font-size: var(--n-font-size-circle);
+ color: var(--n-text-color-circle);
+ font-weight: var(--n-font-weight-circle);
+ transition: color .3s var(--n-bezier);
  white-space: nowrap;
  `), (0, cssr_1.cB)('progress-icon', `
  position: absolute;
@@ -79,14 +79,14 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('progress', {
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  align-items: center;
- color: var(--icon-color);
- font-size: var(--icon-size-circle);
+ color: var(--n-icon-color);
+ font-size: var(--n-icon-size-circle);
  `)]), (0, cssr_1.cM)('multiple-circle', {
   width: '200px',
   color: 'inherit'
 }, [(0, cssr_1.cB)('progress-text', `
- font-weight: var(--font-weight-circle);
- color: var(--text-color-circle);
+ font-weight: var(--n-font-weight-circle);
+ color: var(--n-text-color-circle);
  position: absolute;
  left: 50%;
  top: 50%;
@@ -94,7 +94,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('progress', {
  display: flex;
  align-items: center;
  justify-content: center;
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  `)]), (0, cssr_1.cB)('progress-content', {
   position: 'relative'
 }), (0, cssr_1.cB)('progress-graph', {
@@ -102,17 +102,17 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('progress', {
 }, [(0, cssr_1.cB)('progress-graph-circle', [(0, cssr_1.c)('svg', {
   verticalAlign: 'bottom'
 }), (0, cssr_1.cB)('progress-graph-circle-fill', `
- stroke: var(--fill-color);
+ stroke: var(--n-fill-color);
  transition:
- opacity .3s var(--bezier),
- stroke .3s var(--bezier),
- stroke-dasharray .3s var(--bezier);
+ opacity .3s var(--n-bezier),
+ stroke .3s var(--n-bezier),
+ stroke-dasharray .3s var(--n-bezier);
  `, [(0, cssr_1.cM)('empty', {
   opacity: 0
 })]), (0, cssr_1.cB)('progress-graph-circle-rail', `
- transition: stroke .3s var(--bezier);
+ transition: stroke .3s var(--n-bezier);
  overflow: hidden;
- stroke: var(--rail-color);
+ stroke: var(--n-rail-color);
  `)]), (0, cssr_1.cB)('progress-graph-line', [(0, cssr_1.cM)('indicator-inside', [(0, cssr_1.cB)('progress-graph-line-rail', {
   height: '16px',
   borderRadius: '10px'
@@ -128,17 +128,17 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('progress', {
  height: inherit;
  line-height: 16px;
  font-size: 12px;
- color: var(--text-color-line-inner);
- transition: color .3s var(--bezier);
+ color: var(--n-text-color-line-inner);
+ transition: color .3s var(--n-bezier);
  `)])]), (0, cssr_1.cM)('indicator-inside-label', `
  height: 16px;
  display: flex;
  align-items: center;
  `, [(0, cssr_1.cB)('progress-graph-line-rail', {
   flex: 1,
-  transition: 'background-color .3s var(--bezier)'
+  transition: 'background-color .3s var(--n-bezier)'
 }), (0, cssr_1.cB)('progress-graph-line-indicator', `
- background: var(--fill-color);
+ background: var(--n-fill-color);
  font-size: 12px;
  transform: translateZ(0);
  display: flex;
@@ -149,32 +149,32 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('progress', {
  border-radius: 10px;
  position: absolute;
  white-space: nowrap;
- color: var(--text-color-line-inner);
+ color: var(--n-text-color-line-inner);
  transition:
- right .2s var(--bezier),
- color .3s var(--bezier),
- background-color .3s var(--bezier);
+ right .2s var(--n-bezier),
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `)]), (0, cssr_1.cB)('progress-graph-line-rail', `
  position: relative;
  overflow: hidden;
- height: var(--rail-height);
+ height: var(--n-rail-height);
  border-radius: 5px;
- background-color: var(--rail-color);
- transition: background-color .3s var(--bezier);
+ background-color: var(--n-rail-color);
+ transition: background-color .3s var(--n-bezier);
  `, [(0, cssr_1.cB)('progress-graph-line-fill', `
- background: var(--fill-color);
+ background: var(--n-fill-color);
  position: relative;
  border-radius: 5px;
  height: inherit;
  width: 100%;
  max-width: 0%;
  transition:
- background-color .3s var(--bezier),
- max-width .2s var(--bezier);
+ background-color .3s var(--n-bezier),
+ max-width .2s var(--n-bezier);
  `, [(0, cssr_1.cM)('processing', [(0, cssr_1.c)('&::after', `
  content: "";
- background-image: var(--line-bg-processing);
- animation: progress-processing-animation 2s var(--bezier) infinite;
+ background-image: var(--n-line-bg-processing);
+ animation: progress-processing-animation 2s var(--n-bezier) infinite;
  `)])])])])])]), (0, cssr_1.c)('@keyframes progress-processing-animation', `
  0% {
  position: absolute;

package/lib/radio/src/Radio.d.ts

@@ -134,21 +134,21 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }, import("./use-radio").UseRadio & {
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--box-shadow': string;
-        '--box-shadow-active': string;
-        '--box-shadow-disabled': string;
-        '--box-shadow-focus': string;
-        '--box-shadow-hover': string;
-        '--color': string;
-        '--color-disabled': string;
-        '--dot-color-active': string;
-        '--dot-color-disabled': string;
-        '--font-size': string;
-        '--radio-size': string;
-        '--text-color': string;
-        '--text-color-disabled': string;
-        '--label-padding': string;
+        '--n-bezier': string;
+        '--n-box-shadow': string;
+        '--n-box-shadow-active': string;
+        '--n-box-shadow-disabled': string;
+        '--n-box-shadow-focus': string;
+        '--n-box-shadow-hover': string;
+        '--n-color': string;
+        '--n-color-disabled': string;
+        '--n-dot-color-active': string;
+        '--n-dot-color-disabled': string;
+        '--n-font-size': string;
+        '--n-radio-size': string;
+        '--n-text-color': string;
+        '--n-text-color-disabled': string;
+        '--n-label-padding': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     name?: unknown;