naive-ui 2.21.5 → 2.23.2

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

@@ -13,12 +13,12 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const fade_in_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in.cssr")); // vars:
-// --bezier
-// --opacity-spinning
-// --size
-// --color
-// --text-color
-// --font-size
+// --n-bezier
+// --n-opacity-spinning
+// --n-size
+// --n-color
+// --n-text-color
+// --n-font-size
 
 
 exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes spin-rotate', `
@@ -42,24 +42,24 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes spin-rotate', `
  flex-direction: column;
  `), (0, cssr_1.cB)('spin', `
  display: inline-flex;
- height: var(--size);
- width: var(--size);
- font-size: var(--size);
- color: var(--color);
+ height: var(--n-size);
+ width: var(--n-size);
+ font-size: var(--n-size);
+ color: var(--n-color);
  `, [(0, cssr_1.cM)('rotate', `
  animation: spin-rotate 2s linear infinite;
  `)]), (0, cssr_1.cB)('spin-description', `
  display: inline-block;
- font-size: var(--font-size);
- color: var(--text-color);
- transition: color .3s var(--bezier);
+ font-size: var(--n-font-size);
+ color: var(--n-text-color);
+ transition: color .3s var(--n-bezier);
  margin-top: 8px;
  `), (0, cssr_1.cB)('spin-content', `
  opacity: 1;
- transition: opacity .3s var(--bezier);
+ transition: opacity .3s var(--n-bezier);
  pointer-events: all;
  `, [(0, cssr_1.cM)('spinning', `
  user-select: none;
  pointer-events: none;
- opacity: var(--opacity-spinning);
+ opacity: var(--n-opacity-spinning);
  `)])]);

package/lib/statistic/src/Statistic.d.ts

@@ -1,19 +1,9 @@
-import { CSSProperties, PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../_utils';
 declare const statisticProps: {
-    label: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    value: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    valueStyle: {
-        type: PropType<string | CSSProperties | undefined>;
-        default: undefined;
-    };
-    theme: PropType<import("../../_mixins").Theme<"Statistic", {
+    tabularNums: BooleanConstructor;
+    label: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
+    theme: import("vue").PropType<import("../../_mixins").Theme<"Statistic", {
         labelFontSize: string;
         labelFontWeight: string;
         valueFontWeight: string;
@@ -22,7 +12,7 @@ declare const statisticProps: {
         valueSuffixTextColor: string;
         valueTextColor: string;
     }, any>>;
-    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Statistic", {
+    themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Statistic", {
         labelFontSize: string;
         labelFontWeight: string;
         valueFontWeight: string;
@@ -31,7 +21,7 @@ declare const statisticProps: {
         valueSuffixTextColor: string;
         valueTextColor: string;
     }, any>>>;
-    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Statistic", {
+    builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Statistic", {
         labelFontSize: string;
         labelFontWeight: string;
         valueFontWeight: string;
@@ -43,19 +33,10 @@ declare const statisticProps: {
 };
 export declare type StatisticProps = ExtractPublicPropTypes<typeof statisticProps>;
 declare const _default: import("vue").DefineComponent<{
-    label: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    value: {
-        type: (StringConstructor | NumberConstructor)[];
-        default: undefined;
-    };
-    valueStyle: {
-        type: PropType<string | CSSProperties | undefined>;
-        default: undefined;
-    };
-    theme: PropType<import("../../_mixins").Theme<"Statistic", {
+    tabularNums: BooleanConstructor;
+    label: StringConstructor;
+    value: (StringConstructor | NumberConstructor)[];
+    theme: import("vue").PropType<import("../../_mixins").Theme<"Statistic", {
         labelFontSize: string;
         labelFontWeight: string;
         valueFontWeight: string;
@@ -64,7 +45,7 @@ declare const _default: import("vue").DefineComponent<{
         valueSuffixTextColor: string;
         valueTextColor: string;
     }, any>>;
-    themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Statistic", {
+    themeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Statistic", {
         labelFontSize: string;
         labelFontWeight: string;
         valueFontWeight: string;
@@ -73,7 +54,7 @@ declare const _default: import("vue").DefineComponent<{
         valueSuffixTextColor: string;
         valueTextColor: string;
     }, any>>>;
-    builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Statistic", {
+    builtinThemeOverrides: import("vue").PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Statistic", {
         labelFontSize: string;
         labelFontWeight: string;
         valueFontWeight: string;
@@ -85,23 +66,25 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--label-font-size': string;
-        '--label-font-weight': string;
-        '--label-text-color': string;
-        '--value-font-weight': string;
-        '--value-prefix-text-color': string;
-        '--value-suffix-text-color': string;
-        '--value-text-color': string;
+        '--n-bezier': string;
+        '--n-label-font-size': string;
+        '--n-label-font-weight': string;
+        '--n-label-text-color': string;
+        '--n-value-font-weight': string;
+        '--n-value-prefix-text-color': string;
+        '--n-value-suffix-text-color': string;
+        '--n-value-text-color': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    tabularNums?: unknown;
     label?: unknown;
     value?: unknown;
-    valueStyle?: unknown;
     theme?: unknown;
     themeOverrides?: unknown;
     builtinThemeOverrides?: unknown;
-} & {} & {
+} & {
+    tabularNums: boolean;
+} & {
     value?: string | number | undefined;
     label?: string | undefined;
     theme?: import("../../_mixins").Theme<"Statistic", {
@@ -131,10 +114,7 @@ declare const _default: import("vue").DefineComponent<{
         valueSuffixTextColor: string;
         valueTextColor: string;
     }, any>> | undefined;
-    valueStyle?: string | CSSProperties | undefined;
 }>, {
-    value: string | number;
-    label: string;
-    valueStyle: string | CSSProperties | undefined;
+    tabularNums: boolean;
 }>;
 export default _default;

package/lib/statistic/src/Statistic.js

@@ -7,16 +7,7 @@ const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const statisticProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { label: {
-        type: String,
-        default: undefined
-    }, value: {
-        type: [String, Number],
-        default: undefined
-    }, valueStyle: {
-        type: [Object, String],
-        default: undefined
-    } });
+const statisticProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { tabularNums: Boolean, label: String, value: [String, Number] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Statistic',
     props: statisticProps,
@@ -28,14 +19,14 @@ exports.default = (0, vue_1.defineComponent)({
             cssVars: (0, vue_1.computed)(() => {
                 const { self: { labelFontWeight, valueFontWeight, valuePrefixTextColor, labelTextColor, valueSuffixTextColor, valueTextColor, labelFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--label-font-size': labelFontSize,
-                    '--label-font-weight': labelFontWeight,
-                    '--label-text-color': labelTextColor,
-                    '--value-font-weight': valueFontWeight,
-                    '--value-prefix-text-color': valuePrefixTextColor,
-                    '--value-suffix-text-color': valueSuffixTextColor,
-                    '--value-text-color': valueTextColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-label-font-size': labelFontSize,
+                    '--n-label-font-weight': labelFontWeight,
+                    '--n-label-text-color': labelTextColor,
+                    '--n-value-font-weight': valueFontWeight,
+                    '--n-value-prefix-text-color': valuePrefixTextColor,
+                    '--n-value-suffix-text-color': valueSuffixTextColor,
+                    '--n-value-text-color': valueTextColor
                 };
             })
         };
@@ -45,7 +36,9 @@ exports.default = (0, vue_1.defineComponent)({
         const { $slots, mergedClsPrefix } = this;
         return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-statistic`, style: this.cssVars },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-statistic__label` }, this.label || ((_a = $slots.label) === null || _a === void 0 ? void 0 : _a.call($slots))),
-            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-statistic-value` },
+            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-statistic-value`, style: {
+                    fontVariantNumeric: this.tabularNums ? 'tabular-nums' : ''
+                } },
                 $slots.prefix ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-statistic-value__prefix` }, (0, vue_1.renderSlot)($slots, 'prefix'))) : null,
                 this.value !== undefined ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-statistic-value__content` }, this.value)) : ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-statistic-value__content` }, $slots)),
                 $slots.suffix ? ((0, vue_1.h)("span", { class: `${mergedClsPrefix}-statistic-value__suffix` }, (0, vue_1.renderSlot)($slots, 'suffix'))) : null)));

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

@@ -5,40 +5,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
-// --bezier
-// --label-font-size
-// --label-font-weight
-// --label-text-color
-// --value-font-weight
-// --value-prefix-text-color
-// --value-suffix-text-color
-// --value-text-color
+// --n-bezier
+// --n-label-font-size
+// --n-label-font-weight
+// --n-label-text-color
+// --n-value-font-weight
+// --n-value-prefix-text-color
+// --n-value-suffix-text-color
+// --n-value-text-color
 
 
 exports.default = (0, cssr_1.cB)('statistic', [(0, cssr_1.cE)('label', `
- font-weight: var(--label-font-weight);
- transition: .3s color var(--bezier);
- font-size: var(--label-font-size);
- color: var(--label-text-color);
+ font-weight: var(--n-label-font-weight);
+ transition: .3s color var(--n-bezier);
+ font-size: var(--n-label-font-size);
+ color: var(--n-label-text-color);
  `), (0, cssr_1.cB)('statistic-value', `
  margin-top: 4px;
- font-weight: var(--value-font-weight);
+ font-weight: var(--n-value-font-weight);
  `, [(0, cssr_1.cE)('prefix', `
  margin: 0 4px 0 0;
  font-size: 24px;
- transition: .3s color var(--bezier);
- color: var(--value-prefix-text-color);
+ transition: .3s color var(--n-bezier);
+ color: var(--n-value-prefix-text-color);
  `, [(0, cssr_1.cB)('icon', {
   verticalAlign: '-0.125em'
 })]), (0, cssr_1.cE)('content', `
  font-size: 24px;
- transition: .3s color var(--bezier);
- color: var(--value-text-color);
+ transition: .3s color var(--n-bezier);
+ color: var(--n-value-text-color);
  `), (0, cssr_1.cE)('suffix', `
  margin: 0 0 0 4px;
  font-size: 24px;
- transition: .3s color var(--bezier);
- color: var(--value-suffix-text-color);
+ transition: .3s color var(--n-bezier);
+ color: var(--n-value-suffix-text-color);
  `, [(0, cssr_1.cB)('icon', {
   verticalAlign: '-0.125em'
 })])])]);

package/lib/steps/src/Step.d.ts

@@ -26,18 +26,18 @@ declare const _default: import("vue").DefineComponent<{
     vertical: import("vue").ComputedRef<boolean>;
     mergedStatus: import("vue").ComputedRef<"wait" | "error" | "finish" | "process">;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--description-text-color': string;
-        '--header-text-color': string;
-        '--indicator-border-color': string;
-        '--indicator-color': string;
-        '--indicator-icon-size': string;
-        '--indicator-index-font-size': string;
-        '--indicator-size': string;
-        '--indicator-text-color': string;
-        '--splitor-color': string;
-        '--step-header-font-size': string;
-        '--step-header-font-weight': string;
+        '--n-bezier': string;
+        '--n-description-text-color': string;
+        '--n-header-text-color': string;
+        '--n-indicator-border-color': string;
+        '--n-indicator-color': string;
+        '--n-indicator-icon-size': string;
+        '--n-indicator-index-font-size': string;
+        '--n-indicator-size': string;
+        '--n-indicator-text-color': string;
+        '--n-splitor-color': string;
+        '--n-step-header-font-size': string;
+        '--n-step-header-font-weight': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly status?: unknown;

package/lib/steps/src/Step.js

@@ -58,18 +58,18 @@ exports.default = (0, vue_1.defineComponent)({
                 const { size } = stepsProps;
                 const { common: { cubicBezierEaseInOut }, self: { stepHeaderFontWeight, [(0, _utils_1.createKey)('stepHeaderFontSize', size)]: stepHeaderFontSize, [(0, _utils_1.createKey)('indicatorIndexFontSize', size)]: indicatorIndexFontSize, [(0, _utils_1.createKey)('indicatorSize', size)]: indicatorSize, [(0, _utils_1.createKey)('indicatorIconSize', size)]: indicatorIconSize, [(0, _utils_1.createKey)('indicatorTextColor', status)]: indicatorTextColor, [(0, _utils_1.createKey)('indicatorBorderColor', status)]: indicatorBorderColor, [(0, _utils_1.createKey)('headerTextColor', status)]: headerTextColor, [(0, _utils_1.createKey)('splitorColor', status)]: splitorColor, [(0, _utils_1.createKey)('indicatorColor', status)]: indicatorColor, [(0, _utils_1.createKey)('descriptionTextColor', status)]: descriptionTextColor } } = mergedThemeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--description-text-color': descriptionTextColor,
-                    '--header-text-color': headerTextColor,
-                    '--indicator-border-color': indicatorBorderColor,
-                    '--indicator-color': indicatorColor,
-                    '--indicator-icon-size': indicatorIconSize,
-                    '--indicator-index-font-size': indicatorIndexFontSize,
-                    '--indicator-size': indicatorSize,
-                    '--indicator-text-color': indicatorTextColor,
-                    '--splitor-color': splitorColor,
-                    '--step-header-font-size': stepHeaderFontSize,
-                    '--step-header-font-weight': stepHeaderFontWeight
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-description-text-color': descriptionTextColor,
+                    '--n-header-text-color': headerTextColor,
+                    '--n-indicator-border-color': indicatorBorderColor,
+                    '--n-indicator-color': indicatorColor,
+                    '--n-indicator-icon-size': indicatorIconSize,
+                    '--n-indicator-index-font-size': indicatorIndexFontSize,
+                    '--n-indicator-size': indicatorSize,
+                    '--n-indicator-text-color': indicatorTextColor,
+                    '--n-splitor-color': splitorColor,
+                    '--n-step-header-font-size': stepHeaderFontSize,
+                    '--n-step-header-font-weight': stepHeaderFontWeight
                 };
             })
         };

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

@@ -13,18 +13,18 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 
 const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions/icon-switch.cssr")); // vars:
-// --bezier
-// --description-text-color
-// --header-text-color
-// --indicator-border-color
-// --indicator-color
-// --indicator-icon-size
-// --indicator-index-font-size
-// --indicator-size
-// --indicator-text-color
-// --splitor-color
-// --step-header-font-size
-// --step-header-font-weight
+// --n-bezier
+// --n-description-text-color
+// --n-header-text-color
+// --n-indicator-border-color
+// --n-indicator-color
+// --n-indicator-icon-size
+// --n-indicator-index-font-size
+// --n-indicator-size
+// --n-indicator-text-color
+// --n-splitor-color
+// --n-step-header-font-size
+// --n-step-header-font-weight
 
 
 exports.default = (0, cssr_1.cB)('steps', `
@@ -37,73 +37,73 @@ exports.default = (0, cssr_1.cB)('steps', `
  `, [(0, cssr_1.c)('&:last-child', [(0, cssr_1.cB)('step-splitor', {
   display: 'none'
 })])]), (0, cssr_1.cB)('step-splitor', `
- background-color: var(--splitor-color);
- margin-top: calc(var(--step-header-font-size) / 2);
+ background-color: var(--n-splitor-color);
+ margin-top: calc(var(--n-step-header-font-size) / 2);
  height: 1px;
  flex: 1;
  align-self: flex-start;
  margin-left: 12px;
  margin-right: 12px;
  transition:
- color .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `), (0, cssr_1.cB)('step-content', {
   flex: 1
 }, [(0, cssr_1.cB)('step-content-header', `
- color: var(--header-text-color);
- margin-top: calc(var(--indicator-size) / 2 - var(--step-header-font-size) / 2);
- line-height: var(--step-header-font-size);
- font-size: var(--step-header-font-size);
+ color: var(--n-header-text-color);
+ margin-top: calc(var(--n-indicator-size) / 2 - var(--n-step-header-font-size) / 2);
+ line-height: var(--n-step-header-font-size);
+ font-size: var(--n-step-header-font-size);
  position: relative;
  display: flex;
- font-weight: var(--step-header-font-weight);
+ font-weight: var(--n-step-header-font-weight);
  margin-left: 9px;
  transition:
- color .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `, [(0, cssr_1.cE)('title', `
  white-space: nowrap;
  flex: 0;
  `)]), (0, cssr_1.cE)('description', `
- color: var(--description-text-color);
+ color: var(--n-description-text-color);
  margin-top: 12px;
  margin-left: 9px;
  transition:
- color .3s var(--bezier),
- background-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  `)]), (0, cssr_1.cB)('step-indicator', `
- background-color: var(--indicator-color);
- box-shadow: 0 0 0 1px var(--indicator-border-color);
- height: var(--indicator-size);
- width: var(--indicator-size);
+ background-color: var(--n-indicator-color);
+ box-shadow: 0 0 0 1px var(--n-indicator-border-color);
+ height: var(--n-indicator-size);
+ width: var(--n-indicator-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
- background-color .3s var(--bezier),
- box-shadow .3s var(--bezier);
+ background-color .3s var(--n-bezier),
+ box-shadow .3s var(--n-bezier);
  `, [(0, cssr_1.cB)('step-indicator-slot', `
  position: relative;
- width: var(--indicator-icon-size);
- height: var(--indicator-icon-size);
- font-size: var(--indicator-icon-size);
- line-height: var(--indicator-icon-size);
+ width: var(--n-indicator-icon-size);
+ height: var(--n-indicator-icon-size);
+ font-size: var(--n-indicator-icon-size);
+ line-height: var(--n-indicator-icon-size);
  `, [(0, cssr_1.cE)('index', `
  display: inline-block;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
- font-size: var(--indicator-index-font-size);
- width: var(--indicator-icon-size);
- height: var(--indicator-icon-size);
- line-height: var(--indicator-icon-size);
- color: var(--indicator-text-color);
- transition: color .3s var(--bezier);
+ font-size: var(--n-indicator-index-font-size);
+ width: var(--n-indicator-icon-size);
+ height: var(--n-indicator-icon-size);
+ line-height: var(--n-indicator-icon-size);
+ color: var(--n-indicator-text-color);
+ transition: color .3s var(--n-bezier);
  `, [(0, icon_switch_cssr_1.default)()]), (0, cssr_1.cB)('base-icon', `
- color: var(--indicator-text-color);
- transition: color .3s var(--bezier);
+ color: var(--n-indicator-text-color);
+ transition: color .3s var(--n-bezier);
  `, [(0, icon_switch_cssr_1.default)()])])]), (0, cssr_1.cM)('vertical', {
   flexDirection: 'column'
 }, [(0, cssr_1.cNotM)('show-description', [(0, cssr_1.cB)('step', {
@@ -113,8 +113,8 @@ exports.default = (0, cssr_1.cB)('steps', `
 }, [(0, cssr_1.c)('&:last-child', {
   marginBottom: 0
 })]), (0, cssr_1.cB)('step-splitor', `
- left: calc(var(--indicator-size) / 2);
- height: calc(100% - var(--indicator-size));
+ left: calc(var(--n-indicator-size) / 2);
+ height: calc(100% - var(--n-indicator-size));
  `), (0, cssr_1.cB)('step-indicator', [(0, cssr_1.cB)('step-splitor', `
  position: absolute;
  bottom: -8px;

package/lib/switch/src/Switch.d.ts

@@ -278,25 +278,25 @@ declare const _default: import("vue").DefineComponent<{
     checked: import("vue").ComputedRef<boolean>;
     mergedDisabled: import("vue").ComputedRef<boolean>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--button-border-radius': string;
-        '--button-box-shadow': string;
-        '--button-color': string;
-        '--button-width': string;
-        '--button-width-pressed': string;
-        '--button-height': string;
-        '--height': string;
-        '--offset': string;
-        '--opacity-disabled': string;
-        '--rail-border-radius': string;
-        '--rail-color': string;
-        '--rail-color-active': string;
-        '--rail-height': string;
-        '--rail-width': string;
-        '--width': string;
-        '--box-shadow-focus': string;
-        '--loading-color': string;
-        '--text-color': string;
+        '--n-bezier': string;
+        '--n-button-border-radius': string;
+        '--n-button-box-shadow': string;
+        '--n-button-color': string;
+        '--n-button-width': string;
+        '--n-button-width-pressed': string;
+        '--n-button-height': string;
+        '--n-height': string;
+        '--n-offset': string;
+        '--n-opacity-disabled': string;
+        '--n-rail-border-radius': string;
+        '--n-rail-color': string;
+        '--n-rail-color-active': string;
+        '--n-rail-height': string;
+        '--n-rail-width': string;
+        '--n-width': string;
+        '--n-box-shadow-focus': string;
+        '--n-loading-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<{
     readonly size?: unknown;

package/lib/switch/src/Switch.js

@@ -86,6 +86,8 @@ exports.default = (0, vue_1.defineComponent)({
             nTriggerFormBlur();
         }
         function handleClick() {
+            if (props.loading)
+                return;
             if (!mergedDisabledRef.value) {
                 if (mergedValueRef.value !== props.checkedValue) {
                     doUpdateValue(props.checkedValue);
@@ -105,12 +107,16 @@ exports.default = (0, vue_1.defineComponent)({
             pressedRef.value = false;
         }
         function handleKeyup(e) {
+            if (props.loading)
+                return;
             if (e.code === 'Space') {
                 doUpdateValue(!mergedValueRef.value);
                 pressedRef.value = false;
             }
         }
         function handleKeydown(e) {
+            if (props.loading)
+                return;
             if (e.code === 'Space') {
                 e.preventDefault();
                 pressedRef.value = true;
@@ -137,25 +143,25 @@ exports.default = (0, vue_1.defineComponent)({
                     ? railWidth
                     : (0, seemly_1.pxfy)((0, seemly_1.depx)(railWidth) + (0, seemly_1.depx)(buttonHeight) - (0, seemly_1.depx)(railHeight));
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--button-border-radius': buttonBorderRadius,
-                    '--button-box-shadow': buttonBoxShadow,
-                    '--button-color': buttonColor,
-                    '--button-width': buttonWidth,
-                    '--button-width-pressed': buttonWidthPressed,
-                    '--button-height': buttonHeight,
-                    '--height': height,
-                    '--offset': offset,
-                    '--opacity-disabled': opacityDisabled,
-                    '--rail-border-radius': railBorderRadius,
-                    '--rail-color': railColor,
-                    '--rail-color-active': railColorActive,
-                    '--rail-height': railHeight,
-                    '--rail-width': railWidth,
-                    '--width': width,
-                    '--box-shadow-focus': boxShadowFocus,
-                    '--loading-color': loadingColor,
-                    '--text-color': textColor
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-button-border-radius': buttonBorderRadius,
+                    '--n-button-box-shadow': buttonBoxShadow,
+                    '--n-button-color': buttonColor,
+                    '--n-button-width': buttonWidth,
+                    '--n-button-width-pressed': buttonWidthPressed,
+                    '--n-button-height': buttonHeight,
+                    '--n-height': height,
+                    '--n-offset': offset,
+                    '--n-opacity-disabled': opacityDisabled,
+                    '--n-rail-border-radius': railBorderRadius,
+                    '--n-rail-color': railColor,
+                    '--n-rail-color-active': railColorActive,
+                    '--n-rail-height': railHeight,
+                    '--n-rail-width': railWidth,
+                    '--n-width': width,
+                    '--n-box-shadow-focus': boxShadowFocus,
+                    '--n-loading-color': loadingColor,
+                    '--n-text-color': textColor
                 };
             })
         };
@@ -168,6 +174,7 @@ exports.default = (0, vue_1.defineComponent)({
                 checked && `${mergedClsPrefix}-switch--active`,
                 mergedDisabled && `${mergedClsPrefix}-switch--disabled`,
                 this.round && `${mergedClsPrefix}-switch--round`,
+                this.loading && `${mergedClsPrefix}-switch--loading`,
                 this.pressed && `${mergedClsPrefix}-switch--pressed`
             ], tabindex: !this.mergedDisabled ? 0 : undefined, style: this.cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown },
             (0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__rail`, "aria-hidden": "true", style: mergedRailStyle },