naive-ui 2.25.2 → 2.25.5

package/lib/styles.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.rateDark = exports.radioDark = exports.progressDark = exports.popselectDark = exports.popoverDark = exports.popconfirmDark = exports.unstablePageHeaderRtl = exports.paginationDark = exports.notificationDark = exports.modalDark = exports.messageDark = exports.menuDark = exports.mentionDark = exports.logDark = exports.loadingBarDark = exports.listDark = exports.layoutDark = exports.inputNumberDark = exports.inputDark = exports.iconDark = exports.gradientTextDark = exports.formDark = exports.emptyDark = exports.elementDark = exports.dynamicTagsDark = exports.dynamicInputDark = exports.dropdownDark = exports.drawerDark = exports.dividerDark = exports.dialogDark = exports.descriptionsDark = exports.datePickerDark = exports.dataTableDark = exports.collapseDark = exports.codeDark = exports.checkboxDark = exports.cascaderDark = exports.unstableCardRtl = exports.cardDark = exports.unstableButtonRtl = exports.buttonDark = exports.breadcrumbDark = exports.badgeDark = exports.backTopDark = exports.avatarDark = exports.autoCompleteDark = exports.anchorDark = exports.alertDark = exports.commonLight = exports.commonDark = void 0;
-exports.internalSelectionDark = exports.internalSelectMenuDark = exports.scrollbarDark = exports.uploadDark = exports.typographyDark = exports.treeSelectDark = exports.treeDark = exports.transferDark = exports.tooltipDark = exports.timelineDark = exports.timePickerDark = exports.thingDark = exports.unstableTagRtl = exports.tagDark = exports.tabsDark = exports.tableDark = exports.switchDark = exports.stepsDark = exports.statisticDark = exports.spinDark = exports.spaceDark = exports.sliderDark = exports.selectDark = exports.resultDark = void 0;
+exports.internalSelectionDark = exports.internalSelectMenuDark = exports.scrollbarDark = exports.watermarkDark = exports.uploadDark = exports.typographyDark = exports.treeSelectDark = exports.treeDark = exports.transferDark = exports.tooltipDark = exports.timelineDark = exports.timePickerDark = exports.thingDark = exports.unstableTagRtl = exports.tagDark = exports.tabsDark = exports.tableDark = exports.switchDark = exports.stepsDark = exports.statisticDark = exports.spinDark = exports.spaceDark = exports.sliderDark = exports.selectDark = exports.resultDark = void 0;
 var common_1 = require("./_styles/common");
 Object.defineProperty(exports, "commonDark", { enumerable: true, get: function () { return common_1.commonDark; } });
 Object.defineProperty(exports, "commonLight", { enumerable: true, get: function () { return common_1.commonLight; } });
@@ -140,10 +140,12 @@ var styles_65 = require("./typography/styles");
 Object.defineProperty(exports, "typographyDark", { enumerable: true, get: function () { return styles_65.typographyDark; } });
 var styles_66 = require("./upload/styles");
 Object.defineProperty(exports, "uploadDark", { enumerable: true, get: function () { return styles_66.uploadDark; } });
+var styles_67 = require("./watermark/styles");
+Object.defineProperty(exports, "watermarkDark", { enumerable: true, get: function () { return styles_67.watermarkDark; } });
 // danger zone, internal styles
-var styles_67 = require("./_internal/scrollbar/styles");
-Object.defineProperty(exports, "scrollbarDark", { enumerable: true, get: function () { return styles_67.scrollbarDark; } });
-var styles_68 = require("./_internal/select-menu/styles");
-Object.defineProperty(exports, "internalSelectMenuDark", { enumerable: true, get: function () { return styles_68.internalSelectMenuDark; } });
-var styles_69 = require("./_internal/selection/styles");
-Object.defineProperty(exports, "internalSelectionDark", { enumerable: true, get: function () { return styles_69.internalSelectionDark; } });
+var styles_68 = require("./_internal/scrollbar/styles");
+Object.defineProperty(exports, "scrollbarDark", { enumerable: true, get: function () { return styles_68.scrollbarDark; } });
+var styles_69 = require("./_internal/select-menu/styles");
+Object.defineProperty(exports, "internalSelectMenuDark", { enumerable: true, get: function () { return styles_69.internalSelectMenuDark; } });
+var styles_70 = require("./_internal/selection/styles");
+Object.defineProperty(exports, "internalSelectionDark", { enumerable: true, get: function () { return styles_70.internalSelectionDark; } });

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

@@ -40,6 +40,7 @@ declare const switchProps: {
     /** @deprecated */
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"Switch", {
+        iconColor: string;
         textColor: string;
         loadingColor: string;
         opacityDisabled: string;
@@ -71,6 +72,7 @@ declare const switchProps: {
         railWidthLarge: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
+        iconColor: string;
         textColor: string;
         loadingColor: string;
         opacityDisabled: string;
@@ -102,6 +104,7 @@ declare const switchProps: {
         railWidthLarge: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
+        iconColor: string;
         textColor: string;
         loadingColor: string;
         opacityDisabled: string;
@@ -173,6 +176,7 @@ declare const _default: import("vue").DefineComponent<{
     /** @deprecated */
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"Switch", {
+        iconColor: string;
         textColor: string;
         loadingColor: string;
         opacityDisabled: string;
@@ -204,6 +208,7 @@ declare const _default: import("vue").DefineComponent<{
         railWidthLarge: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
+        iconColor: string;
         textColor: string;
         loadingColor: string;
         opacityDisabled: string;
@@ -235,6 +240,7 @@ declare const _default: import("vue").DefineComponent<{
         railWidthLarge: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
+        iconColor: string;
         textColor: string;
         loadingColor: string;
         opacityDisabled: string;
@@ -297,7 +303,10 @@ declare const _default: import("vue").DefineComponent<{
         '--n-box-shadow-focus': string;
         '--n-loading-color': string;
         '--n-text-color': string;
-    }>;
+        '--n-icon-color': string;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly size: {
         readonly type: PropType<"small" | "medium" | "large">;
@@ -337,6 +346,7 @@ declare const _default: import("vue").DefineComponent<{
     /** @deprecated */
     readonly onChange: PropType<MaybeArray<OnUpdateValue> | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"Switch", {
+        iconColor: string;
         textColor: string;
         loadingColor: string;
         opacityDisabled: string;
@@ -368,6 +378,7 @@ declare const _default: import("vue").DefineComponent<{
         railWidthLarge: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
+        iconColor: string;
         textColor: string;
         loadingColor: string;
         opacityDisabled: string;
@@ -399,6 +410,7 @@ declare const _default: import("vue").DefineComponent<{
         railWidthLarge: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Switch", {
+        iconColor: string;
         textColor: string;
         loadingColor: string;
         opacityDisabled: string;

package/lib/switch/src/Switch.js

@@ -46,7 +46,7 @@ exports.default = (0, vue_1.defineComponent)({
                 }
             });
         }
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Switch', '-switch', index_cssr_1.default, styles_1.switchLight, props, mergedClsPrefixRef);
         const formItem = (0, _mixins_1.useFormItem)(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
@@ -86,15 +86,13 @@ exports.default = (0, vue_1.defineComponent)({
             nTriggerFormBlur();
         }
         function handleClick() {
-            if (props.loading)
+            if (props.loading || mergedDisabledRef.value)
                 return;
-            if (!mergedDisabledRef.value) {
-                if (mergedValueRef.value !== props.checkedValue) {
-                    doUpdateValue(props.checkedValue);
-                }
-                else {
-                    doUpdateValue(props.uncheckedValue);
-                }
+            if (mergedValueRef.value !== props.checkedValue) {
+                doUpdateValue(props.checkedValue);
+            }
+            else {
+                doUpdateValue(props.uncheckedValue);
             }
         }
         function handleFocus() {
@@ -107,21 +105,62 @@ exports.default = (0, vue_1.defineComponent)({
             pressedRef.value = false;
         }
         function handleKeyup(e) {
-            if (props.loading)
+            if (props.loading || mergedDisabledRef.value)
                 return;
             if (e.code === 'Space') {
-                doUpdateValue(!mergedValueRef.value);
+                if (mergedValueRef.value !== props.checkedValue) {
+                    doUpdateValue(props.checkedValue);
+                }
+                else {
+                    doUpdateValue(props.uncheckedValue);
+                }
                 pressedRef.value = false;
             }
         }
         function handleKeydown(e) {
-            if (props.loading)
+            if (props.loading || mergedDisabledRef.value)
                 return;
             if (e.code === 'Space') {
                 e.preventDefault();
                 pressedRef.value = true;
             }
         }
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { value: size } = mergedSizeRef;
+            const { self: { opacityDisabled, railColor, railColorActive, buttonBoxShadow, buttonColor, boxShadowFocus, loadingColor, textColor, iconColor, [(0, _utils_1.createKey)('buttonHeight', size)]: buttonHeight, [(0, _utils_1.createKey)('buttonWidth', size)]: buttonWidth, [(0, _utils_1.createKey)('buttonWidthPressed', size)]: buttonWidthPressed, [(0, _utils_1.createKey)('railHeight', size)]: railHeight, [(0, _utils_1.createKey)('railWidth', size)]: railWidth, [(0, _utils_1.createKey)('railBorderRadius', size)]: railBorderRadius, [(0, _utils_1.createKey)('buttonBorderRadius', size)]: buttonBorderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const offset = (0, seemly_1.pxfy)(((0, seemly_1.depx)(railHeight) - (0, seemly_1.depx)(buttonHeight)) / 2);
+            const height = (0, seemly_1.pxfy)(Math.max((0, seemly_1.depx)(railHeight), (0, seemly_1.depx)(buttonHeight)));
+            const width = (0, seemly_1.depx)(railHeight) > (0, seemly_1.depx)(buttonHeight)
+                ? railWidth
+                : (0, seemly_1.pxfy)((0, seemly_1.depx)(railWidth) + (0, seemly_1.depx)(buttonHeight) - (0, seemly_1.depx)(railHeight));
+            return {
+                '--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,
+                '--n-icon-color': iconColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('switch', (0, vue_1.computed)(() => {
+                return mergedSizeRef.value[0];
+            }), cssVarsRef, props)
+            : undefined;
         return {
             handleClick,
             handleBlur,
@@ -134,43 +173,22 @@ exports.default = (0, vue_1.defineComponent)({
             mergedValue: mergedValueRef,
             checked: checkedRef,
             mergedDisabled: mergedDisabledRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { value: size } = mergedSizeRef;
-                const { self: { opacityDisabled, railColor, railColorActive, buttonBoxShadow, buttonColor, boxShadowFocus, loadingColor, textColor, [(0, _utils_1.createKey)('buttonHeight', size)]: buttonHeight, [(0, _utils_1.createKey)('buttonWidth', size)]: buttonWidth, [(0, _utils_1.createKey)('buttonWidthPressed', size)]: buttonWidthPressed, [(0, _utils_1.createKey)('railHeight', size)]: railHeight, [(0, _utils_1.createKey)('railWidth', size)]: railWidth, [(0, _utils_1.createKey)('railBorderRadius', size)]: railBorderRadius, [(0, _utils_1.createKey)('buttonBorderRadius', size)]: buttonBorderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                const offset = (0, seemly_1.pxfy)(((0, seemly_1.depx)(railHeight) - (0, seemly_1.depx)(buttonHeight)) / 2);
-                const height = (0, seemly_1.pxfy)(Math.max((0, seemly_1.depx)(railHeight), (0, seemly_1.depx)(buttonHeight)));
-                const width = (0, seemly_1.depx)(railHeight) > (0, seemly_1.depx)(buttonHeight)
-                    ? railWidth
-                    : (0, seemly_1.pxfy)((0, seemly_1.depx)(railWidth) + (0, seemly_1.depx)(buttonHeight) - (0, seemly_1.depx)(railHeight));
-                return {
-                    '--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
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
-        const { mergedClsPrefix, mergedDisabled, checked, mergedRailStyle, $slots } = this;
-        const { checked: checkedSlot, unchecked: uncheckedSlot } = $slots;
+        const { mergedClsPrefix, mergedDisabled, checked, mergedRailStyle, onRender, $slots } = this;
+        onRender === null || onRender === void 0 ? void 0 : onRender();
+        const { checked: checkedSlot, unchecked: uncheckedSlot, icon: iconSlot, 'checked-icon': checkedIconSlot, 'unchecked-icon': uncheckedIconSlot } = $slots;
+        const hasIcon = !((0, _utils_1.isSlotEmpty)(iconSlot) &&
+            (0, _utils_1.isSlotEmpty)(checkedIconSlot) &&
+            (0, _utils_1.isSlotEmpty)(uncheckedIconSlot));
         return ((0, vue_1.h)("div", { role: "switch", "aria-checked": checked, class: [
                 `${mergedClsPrefix}-switch`,
+                this.themeClass,
+                hasIcon && `${mergedClsPrefix}-switch--icon`,
                 checked && `${mergedClsPrefix}-switch--active`,
                 mergedDisabled && `${mergedClsPrefix}-switch--disabled`,
                 this.round && `${mergedClsPrefix}-switch--round`,
@@ -178,18 +196,25 @@ exports.default = (0, vue_1.defineComponent)({
                 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 },
-                (checkedSlot || uncheckedSlot) && ((0, vue_1.h)("div", { "aria-hidden": true, class: `${mergedClsPrefix}-switch__children-placeholder` },
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__rail-placeholder` },
-                        (0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__button-placeholder` }), checkedSlot === null || checkedSlot === void 0 ? void 0 :
-                        checkedSlot()),
-                    (0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__rail-placeholder` },
-                        (0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__button-placeholder` }), uncheckedSlot === null || uncheckedSlot === void 0 ? void 0 :
-                        uncheckedSlot()))),
+                (0, _utils_1.resolveWrappedSlot)(checkedSlot, (checkedSlotChildren) => (0, _utils_1.resolveWrappedSlot)(uncheckedSlot, (uncheckedSlotChildren) => {
+                    if (checkedSlotChildren || uncheckedSlotChildren) {
+                        return ((0, vue_1.h)("div", { "aria-hidden": true, class: `${mergedClsPrefix}-switch__children-placeholder` },
+                            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__rail-placeholder` },
+                                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__button-placeholder` }),
+                                checkedSlotChildren),
+                            (0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__rail-placeholder` },
+                                (0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__button-placeholder` }),
+                                uncheckedSlotChildren)));
+                    }
+                    return null;
+                })),
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__button` },
-                    (0, vue_1.h)(vue_1.Transition, { name: "fade-in-scale-up-transition" }, {
-                        default: () => this.loading ? ((0, vue_1.h)(_internal_1.NBaseLoading, { key: "loading", clsPrefix: mergedClsPrefix, strokeWidth: 20 })) : null
-                    }),
-                    checkedSlot && ((0, vue_1.h)("div", { key: "checked", class: `${mergedClsPrefix}-switch__checked` }, checkedSlot())),
-                    uncheckedSlot && ((0, vue_1.h)("div", { key: "unchecked", class: `${mergedClsPrefix}-switch__unchecked` }, uncheckedSlot()))))));
+                    (0, _utils_1.resolveWrappedSlot)(iconSlot, (icon) => (0, _utils_1.resolveWrappedSlot)(checkedIconSlot, (checkedIcon) => (0, _utils_1.resolveWrappedSlot)(uncheckedIconSlot, (uncheckedIcon) => {
+                        return ((0, vue_1.h)(_internal_1.NIconSwitchTransition, null, {
+                            default: () => this.loading ? ((0, vue_1.h)(_internal_1.NBaseLoading, { key: "loading", clsPrefix: mergedClsPrefix, strokeWidth: 20 })) : this.checked && (checkedIcon || icon) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__button-icon`, key: checkedIcon ? 'checked-icon' : 'icon' }, checkedIcon || icon)) : !this.checked && (uncheckedIcon || icon) ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-switch__button-icon`, key: uncheckedIcon ? 'unchecked-icon' : 'icon' }, uncheckedIcon || icon)) : null
+                        }));
+                    }))),
+                    (0, _utils_1.resolveWrappedSlot)(checkedSlot, (children) => children && ((0, vue_1.h)("div", { key: "checked", class: `${mergedClsPrefix}-switch__checked` }, children))),
+                    (0, _utils_1.resolveWrappedSlot)(uncheckedSlot, (children) => children && ((0, vue_1.h)("div", { key: "unchecked", class: `${mergedClsPrefix}-switch__unchecked` }, children)))))));
     }
 });

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

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-const fade_in_scale_up_cssr_1 = __importDefault(require("../../../_styles/transitions/fade-in-scale-up.cssr"));
+const icon_switch_cssr_1 = __importDefault(require("../../../_styles/transitions/icon-switch.cssr"));
 
 const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --n-bezier
@@ -30,6 +30,7 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --n-box-shadow-focus
 // --n-loading-color
 // --n-text-color
+// --n-icon-color
 
 
 exports.default = (0, cssr_1.cB)('switch', `
@@ -62,7 +63,7 @@ exports.default = (0, cssr_1.cB)('switch', `
  font-size: calc(var(--n-button-width) - 4px);
  color: var(--n-loading-color);
  transition: color .3s var(--n-bezier);
- `, [(0, fade_in_scale_up_cssr_1.default)({
+ `, [(0, icon_switch_cssr_1.default)({
   originalTransform: 'translateX(-50%) translateY(-50%)'
 })]), (0, cssr_1.cE)('checked, unchecked', `
  transition: color .3s var(--n-bezier);
@@ -88,7 +89,7 @@ exports.default = (0, cssr_1.cB)('switch', `
   borderRadius: 'calc(var(--n-rail-height) / 2)'
 }, [(0, cssr_1.cE)('button', {
   borderRadius: 'calc(var(--n-button-height) / 2)'
-})])]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cM)('pressed', [(0, cssr_1.cE)('rail', [(0, cssr_1.cE)('button', {
+})])]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.cNotM)('icon', [(0, cssr_1.cM)('pressed', [(0, cssr_1.cE)('rail', [(0, cssr_1.cE)('button', {
   maxWidth: 'var(--n-button-width-pressed)'
 })])]), (0, cssr_1.cE)('rail', [(0, cssr_1.c)('&:active', [(0, cssr_1.cE)('button', {
   maxWidth: 'var(--n-button-width-pressed)'
@@ -96,7 +97,7 @@ exports.default = (0, cssr_1.cB)('switch', `
   left: 'calc(100% - var(--n-offset) - var(--n-button-width-pressed))'
 })])]), (0, cssr_1.cE)('rail', [(0, cssr_1.c)('&:active', [(0, cssr_1.cE)('button', {
   left: 'calc(100% - var(--n-offset) - var(--n-button-width-pressed))'
-})])])])]), (0, cssr_1.cM)('active', [(0, cssr_1.cE)('rail', [(0, cssr_1.cE)('button', {
+})])])])])]), (0, cssr_1.cM)('active', [(0, cssr_1.cE)('rail', [(0, cssr_1.cE)('button', {
   left: 'calc(100% - (var(--n-rail-height) + var(--n-button-width)) / 2)'
 })])]), (0, cssr_1.cE)('rail', `
  overflow: hidden;
@@ -109,7 +110,21 @@ exports.default = (0, cssr_1.cB)('switch', `
  background .3s var(--n-bezier),
  box-shadow .3s var(--n-bezier);
  background-color: var(--n-rail-color);
- `, [(0, cssr_1.cE)('button', `
+ `, [(0, cssr_1.cE)('button-icon', `
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
+ font-size: calc(var(--n-button-height) - 4px);
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ line-height: 1;
+ `, [(0, icon_switch_cssr_1.default)()]), (0, cssr_1.cE)('button', `
+ align-items: center; 
  top: var(--n-offset);
  left: var(--n-offset);
  height: var(--n-button-width);
@@ -128,9 +143,7 @@ exports.default = (0, cssr_1.cB)('switch', `
  opacity .3s var(--n-bezier),
  max-width .3s var(--n-bezier),
  box-shadow .3s var(--n-bezier);
- `)]), (0, cssr_1.cM)('active', [(0, cssr_1.cE)('rail', {
-  backgroundColor: 'var(--n-rail-color-active)'
-})]), (0, cssr_1.cM)('disabled', [(0, cssr_1.cE)('rail', `
+ `)]), (0, cssr_1.cM)('active', [(0, cssr_1.cE)('rail', 'background-color: var(--n-rail-color-active);')]), (0, cssr_1.cM)('disabled', [(0, cssr_1.cE)('rail', `
  cursor: not-allowed;
  opacity: .5;
  `)]), (0, cssr_1.cM)('loading', [(0, cssr_1.cE)('rail', `

package/lib/switch/styles/dark.js

@@ -10,9 +10,9 @@ const switchDark = {
     name: 'Switch',
     common: common_1.commonDark,
     self(vars) {
-        const { primaryColorSuppl, opacityDisabled, borderRadius, primaryColor, textColor2 } = vars;
+        const { primaryColorSuppl, opacityDisabled, borderRadius, primaryColor, textColor2, baseColor } = vars;
         const railOverlayColor = 'rgba(255, 255, 255, .20)';
-        return Object.assign(Object.assign({}, _common_1.default), { textColor: textColor2, loadingColor: primaryColorSuppl, opacityDisabled, railColor: railOverlayColor, railColorActive: primaryColorSuppl, buttonBoxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)', buttonColor: '#FFF', railBorderRadiusSmall: borderRadius, railBorderRadiusMedium: borderRadius, railBorderRadiusLarge: borderRadius, buttonBorderRadiusSmall: borderRadius, buttonBorderRadiusMedium: borderRadius, buttonBorderRadiusLarge: borderRadius, boxShadowFocus: `0 0 8px 0 ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}` });
+        return Object.assign(Object.assign({}, _common_1.default), { iconColor: baseColor, textColor: textColor2, loadingColor: primaryColorSuppl, opacityDisabled, railColor: railOverlayColor, railColorActive: primaryColorSuppl, buttonBoxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.4)', buttonColor: '#FFF', railBorderRadiusSmall: borderRadius, railBorderRadiusMedium: borderRadius, railBorderRadiusLarge: borderRadius, buttonBorderRadiusSmall: borderRadius, buttonBorderRadiusMedium: borderRadius, buttonBorderRadiusLarge: borderRadius, boxShadowFocus: `0 0 8px 0 ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.3 })}` });
     }
 };
 exports.default = switchDark;

package/lib/switch/styles/light.d.ts

@@ -1,6 +1,7 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
 declare const self: (vars: ThemeCommonVars) => {
+    iconColor: string;
     textColor: string;
     loadingColor: string;
     opacityDisabled: string;

package/lib/switch/styles/light.js

@@ -7,9 +7,9 @@ const seemly_1 = require("seemly");
 const _common_1 = __importDefault(require("./_common"));
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { primaryColor, opacityDisabled, borderRadius } = vars;
+    const { primaryColor, opacityDisabled, borderRadius, textColor3 } = vars;
     const railOverlayColor = 'rgba(0, 0, 0, .14)';
-    return Object.assign(Object.assign({}, _common_1.default), { textColor: 'white', loadingColor: primaryColor, opacityDisabled, railColor: railOverlayColor, railColorActive: primaryColor, buttonBoxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)', buttonColor: '#FFF', railBorderRadiusSmall: borderRadius, railBorderRadiusMedium: borderRadius, railBorderRadiusLarge: borderRadius, buttonBorderRadiusSmall: borderRadius, buttonBorderRadiusMedium: borderRadius, buttonBorderRadiusLarge: borderRadius, boxShadowFocus: `0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.2 })}` });
+    return Object.assign(Object.assign({}, _common_1.default), { iconColor: textColor3, textColor: 'white', loadingColor: primaryColor, opacityDisabled, railColor: railOverlayColor, railColorActive: primaryColor, buttonBoxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)', buttonColor: '#FFF', railBorderRadiusSmall: borderRadius, railBorderRadiusMedium: borderRadius, railBorderRadiusLarge: borderRadius, buttonBorderRadiusSmall: borderRadius, buttonBorderRadiusMedium: borderRadius, buttonBorderRadiusLarge: borderRadius, boxShadowFocus: `0 0 0 2px ${(0, seemly_1.changeColor)(primaryColor, { alpha: 0.2 })}` });
 };
 const switchLight = {
     name: 'Switch',

package/lib/table/src/Table.d.ts

@@ -232,7 +232,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-td-color-striped': string;
         '--n-td-color-striped-modal': string;
         '--n-td-color-striped-popover': string;
-    }>;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     bordered: {
         type: BooleanConstructor;

package/lib/table/src/Table.js

@@ -25,43 +25,54 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Table',
     props: tableProps,
     setup(props) {
-        const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Table', '-table', index_cssr_1.default, styles_1.tableLight, props, mergedClsPrefixRef);
+        const cssVarsRef = (0, vue_1.computed)(() => {
+            const { size } = props;
+            const { self: { borderColor, tdColor, tdColorModal, tdColorPopover, thColor, thColorModal, thColorPopover, thTextColor, tdTextColor, borderRadius, thFontWeight, lineHeight, borderColorModal, borderColorPopover, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('tdPadding', size)]: tdPadding, [(0, _utils_1.createKey)('thPadding', size)]: thPadding }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-td-color': tdColor,
+                '--n-td-color-modal': tdColorModal,
+                '--n-td-color-popover': tdColorPopover,
+                '--n-td-text-color': tdTextColor,
+                '--n-border-color': borderColor,
+                '--n-border-color-modal': borderColorModal,
+                '--n-border-color-popover': borderColorPopover,
+                '--n-border-radius': borderRadius,
+                '--n-font-size': fontSize,
+                '--n-th-color': thColor,
+                '--n-th-color-modal': thColorModal,
+                '--n-th-color-popover': thColorPopover,
+                '--n-th-font-weight': thFontWeight,
+                '--n-th-text-color': thTextColor,
+                '--n-line-height': lineHeight,
+                '--n-td-padding': tdPadding,
+                '--n-th-padding': thPadding,
+                '--n-td-color-striped': tdColorStriped,
+                '--n-td-color-striped-modal': tdColorStripedModal,
+                '--n-td-color-striped-popover': tdColorStripedPopover
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? (0, _mixins_1.useThemeClass)('table', (0, vue_1.computed)(() => {
+                return props.size[0];
+            }), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: (0, vue_1.computed)(() => {
-                const { size } = props;
-                const { self: { borderColor, tdColor, tdColorModal, tdColorPopover, thColor, thColorModal, thColorPopover, thTextColor, tdTextColor, borderRadius, thFontWeight, lineHeight, borderColorModal, borderColorPopover, tdColorStriped, tdColorStripedModal, tdColorStripedPopover, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('tdPadding', size)]: tdPadding, [(0, _utils_1.createKey)('thPadding', size)]: thPadding }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-td-color': tdColor,
-                    '--n-td-color-modal': tdColorModal,
-                    '--n-td-color-popover': tdColorPopover,
-                    '--n-td-text-color': tdTextColor,
-                    '--n-border-color': borderColor,
-                    '--n-border-color-modal': borderColorModal,
-                    '--n-border-color-popover': borderColorPopover,
-                    '--n-border-radius': borderRadius,
-                    '--n-font-size': fontSize,
-                    '--n-th-color': thColor,
-                    '--n-th-color-modal': thColorModal,
-                    '--n-th-color-popover': thColorPopover,
-                    '--n-th-font-weight': thFontWeight,
-                    '--n-th-text-color': thTextColor,
-                    '--n-line-height': lineHeight,
-                    '--n-td-padding': tdPadding,
-                    '--n-th-padding': thPadding,
-                    '--n-td-color-striped': tdColorStriped,
-                    '--n-td-color-striped-modal': tdColorStripedModal,
-                    '--n-td-color-striped-popover': tdColorStripedPopover
-                };
-            })
+            cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+            themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+            onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
+        var _a;
         const { mergedClsPrefix } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
         return ((0, vue_1.h)("table", { class: [
                 `${mergedClsPrefix}-table`,
+                this.themeClass,
                 {
                     [`${mergedClsPrefix}-table--bottom-bordered`]: this.bottomBordered,
                     [`${mergedClsPrefix}-table--bordered`]: this.bordered,

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

@@ -76,7 +76,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('table', `
  border: 1px solid var(--n-merged-border-color);
  border-radius: var(--n-border-radius);
  `, [(0, cssr_1.c)('tr', [(0, cssr_1.c)('&:last-child', [(0, cssr_1.c)('td', `
- border-bottom: none;
+ border-bottom: 0 solid var(--n-merged-border-color);
  `)])])]), (0, cssr_1.cM)('single-line', [(0, cssr_1.c)('th', `
  border-right: none;
  `), (0, cssr_1.c)('td', `

package/lib/tabs/src/Tabs.d.ts

@@ -494,29 +494,31 @@ declare const _default: import("vue").DefineComponent<{
     handleScroll: import("lodash").DebouncedFunc<(e: Event) => void>;
     handleTabsResize: import("lodash").DebouncedFunc<(entry: ResizeObserverEntry) => void>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--color-segment': string;
-        '--bar-color': string;
-        '--tab-font-size': string;
-        '--tab-text-color': string;
-        '--tab-text-color-active': string;
-        '--tab-text-color-disabled': string;
-        '--tab-text-color-hover': string;
-        '--pane-text-color': string;
-        '--tab-border-color': string;
-        '--tab-border-radius': string;
-        '--close-color': string;
-        '--close-color-hover': string;
-        '--close-color-pressed': string;
-        '--tab-color': string;
-        '--tab-font-weight': string;
-        '--tab-font-weight-active': string;
-        '--tab-padding': string;
-        '--tab-gap': string;
-        '--pane-padding': string;
-        '--font-weight-strong': string;
-        '--tab-color-segment': string;
-    }>;
+        '--n-bezier': string;
+        '--n-color-segment': string;
+        '--n-bar-color': string;
+        '--n-tab-font-size': string;
+        '--n-tab-text-color': string;
+        '--n-tab-text-color-active': string;
+        '--n-tab-text-color-disabled': string;
+        '--n-tab-text-color-hover': string;
+        '--n-pane-text-color': string;
+        '--n-tab-border-color': string;
+        '--n-tab-border-radius': string;
+        '--n-close-color': string;
+        '--n-close-color-hover': string;
+        '--n-close-color-pressed': string;
+        '--n-tab-color': string;
+        '--n-tab-font-weight': string;
+        '--n-tab-font-weight-active': string;
+        '--n-tab-padding': string;
+        '--n-tab-gap': string;
+        '--n-pane-padding': string;
+        '--n-font-weight-strong': string;
+        '--n-tab-color-segment': string;
+    }> | undefined;
+    themeClass: import("vue").Ref<string> | undefined;
+    onRender: (() => void) | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
     readonly value: PropType<string | number>;
     readonly defaultValue: PropType<string | number>;