naive-ui 2.25.0 → 2.25.3

package/es/select/styles/light.d.ts

@@ -26,7 +26,7 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
         borderHover: string;
         borderActive: string;
         borderFocus: string;
-        boxShadowHover: null;
+        boxShadowHover: string;
         boxShadowActive: string;
         boxShadowFocus: string;
         caretColor: string;
@@ -37,7 +37,7 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
         borderHoverWarning: string;
         borderActiveWarning: string;
         borderFocusWarning: string;
-        boxShadowHoverWarning: null;
+        boxShadowHoverWarning: string;
         boxShadowActiveWarning: string;
         boxShadowFocusWarning: string;
         colorActiveWarning: string;
@@ -46,7 +46,7 @@ declare const selectLight: import("../../_mixins").Theme<"Select", {
         borderHoverError: string;
         borderActiveError: string;
         borderFocusError: string;
-        boxShadowHoverError: null;
+        boxShadowHoverError: string;
         boxShadowActiveError: string;
         boxShadowFocusError: string;
         colorActiveError: string;

package/es/spin/src/Spin.d.ts

@@ -120,7 +120,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-size': string;
         '--n-color': string;
         '--n-text-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<{
     description: StringConstructor;
     stroke: StringConstructor;

package/es/spin/src/Spin.js

@@ -2,7 +2,7 @@ import { computed, defineComponent, h, Transition, watchEffect } from 'vue';
 import { useCompitable } from 'vooks';
 import { pxfy } from 'seemly';
 import { NBaseLoading } from '../../_internal';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { createKey, warnOnce } from '../../_utils';
 import { spinLight } from '../styles';
 import style from './styles/index.cssr';
@@ -38,8 +38,29 @@ export default defineComponent({
                 }
             });
         }
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Spin', '-spin', style, spinLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { size: spinSize } = props;
+            const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
+            const { opacitySpinning, color, textColor } = self;
+            const size = typeof spinSize === 'number'
+                ? pxfy(spinSize)
+                : self[createKey('size', spinSize)];
+            return {
+                '--n-bezier': cubicBezierEaseInOut,
+                '--n-opacity-spinning': opacitySpinning,
+                '--n-size': size,
+                '--n-color': color,
+                '--n-text-color': textColor
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('spin', computed(() => {
+                const { size } = props;
+                return typeof size === 'number' ? String(size) : size[0];
+            }), cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             compitableShow: useCompitable(props, ['spinning', 'show']),
@@ -50,37 +71,26 @@ export default defineComponent({
                 const { size } = props;
                 return STROKE_WIDTH[typeof size === 'number' ? 'medium' : size];
             }),
-            cssVars: computed(() => {
-                const { size: spinSize } = props;
-                const { common: { cubicBezierEaseInOut }, self } = themeRef.value;
-                const { opacitySpinning, color, textColor } = self;
-                const size = typeof spinSize === 'number'
-                    ? pxfy(spinSize)
-                    : self[createKey('size', spinSize)];
-                return {
-                    '--n-bezier': cubicBezierEaseInOut,
-                    '--n-opacity-spinning': opacitySpinning,
-                    '--n-size': size,
-                    '--n-color': color,
-                    '--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() {
-        var _a;
+        var _a, _b;
         const { $slots, mergedClsPrefix, description } = this;
         const rotate = $slots.icon && this.rotate;
         const descriptionNode = (description || $slots.description) && (h("div", { class: `${mergedClsPrefix}-spin-description` }, description || ((_a = $slots.description) === null || _a === void 0 ? void 0 : _a.call($slots))));
-        const icon = $slots.icon ? (h("div", { class: `${mergedClsPrefix}-spin-body` },
+        const icon = $slots.icon ? (h("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] },
             h("div", { class: [
                     `${mergedClsPrefix}-spin`,
                     rotate && `${mergedClsPrefix}-spin--rotate`
                 ], style: $slots.default ? '' : this.cssVars }, $slots.icon()),
-            descriptionNode)) : (h("div", { class: `${mergedClsPrefix}-spin-body` },
+            descriptionNode)) : (h("div", { class: [`${mergedClsPrefix}-spin-body`, this.themeClass] },
             h(NBaseLoading, { clsPrefix: mergedClsPrefix, style: $slots.default ? '' : this.cssVars, stroke: this.stroke, "stroke-width": this.mergedStrokeWidth, class: `${mergedClsPrefix}-spin` }),
             descriptionNode));
-        return $slots.default ? (h("div", { class: `${mergedClsPrefix}-spin-container`, style: this.cssVars },
+        (_b = this.onRender) === null || _b === void 0 ? void 0 : _b.call(this);
+        return $slots.default ? (h("div", { class: [`${mergedClsPrefix}-spin-container`, this.themeClass], style: this.cssVars },
             h("div", { class: [
                     `${mergedClsPrefix}-spin-content`,
                     this.compitableShow && `${mergedClsPrefix}-spin-content--spinning`

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

@@ -74,7 +74,9 @@ declare const _default: import("vue").DefineComponent<{
         '--n-value-prefix-text-color': string;
         '--n-value-suffix-text-color': string;
         '--n-value-text-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<{
     tabularNums: BooleanConstructor;
     label: StringConstructor;

package/es/statistic/src/Statistic.js

@@ -1,5 +1,6 @@
 import { defineComponent, computed, h } from 'vue';
-import { useConfig, useTheme } from '../../_mixins';
+import { useConfig, useTheme, useThemeClass } from '../../_mixins';
+import { resolveWrappedSlot } from '../../_utils';
 import { statisticLight } from '../styles';
 import style from './styles/index.cssr';
 const statisticProps = Object.assign(Object.assign({}, useTheme.props), { tabularNums: Boolean, label: String, value: [String, Number] });
@@ -7,35 +8,42 @@ export default defineComponent({
     name: 'Statistic',
     props: statisticProps,
     setup(props) {
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Statistic', '-statistic', style, statisticLight, props, mergedClsPrefixRef);
+        const cssVarsRef = computed(() => {
+            const { self: { labelFontWeight, valueFontWeight, valuePrefixTextColor, labelTextColor, valueSuffixTextColor, valueTextColor, labelFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            return {
+                '--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
+            };
+        });
+        const themeClassHandle = inlineThemeDisabled
+            ? useThemeClass('statistic', undefined, cssVarsRef, props)
+            : undefined;
         return {
             mergedClsPrefix: mergedClsPrefixRef,
-            cssVars: computed(() => {
-                const { self: { labelFontWeight, valueFontWeight, valuePrefixTextColor, labelTextColor, valueSuffixTextColor, valueTextColor, labelFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                return {
-                    '--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
-                };
-            })
+            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 { $slots, mergedClsPrefix } = this;
-        return (h("div", { class: `${mergedClsPrefix}-statistic`, style: this.cssVars },
-            h("div", { class: `${mergedClsPrefix}-statistic__label` }, this.label || ((_a = $slots.label) === null || _a === void 0 ? void 0 : _a.call($slots))),
+        const { mergedClsPrefix, $slots: { default: defaultSlot, label: labelSlot, prefix: prefixSlot, suffix: suffixSlot } } = this;
+        (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+        return (h("div", { class: [`${mergedClsPrefix}-statistic`, this.themeClass], style: this.cssVars },
+            resolveWrappedSlot(labelSlot, (children) => (h("div", { class: `${mergedClsPrefix}-statistic__label` }, this.label || children))),
             h("div", { class: `${mergedClsPrefix}-statistic-value`, style: {
                     fontVariantNumeric: this.tabularNums ? 'tabular-nums' : ''
                 } },
-                $slots.prefix ? (h("span", { class: `${mergedClsPrefix}-statistic-value__prefix` }, $slots.prefix())) : null,
-                this.value !== undefined ? (h("span", { class: `${mergedClsPrefix}-statistic-value__content` }, this.value)) : (h("span", { class: `${mergedClsPrefix}-statistic-value__content` }, $slots)),
-                $slots.suffix ? (h("span", { class: `${mergedClsPrefix}-statistic-value__suffix` }, $slots.suffix())) : null)));
+                resolveWrappedSlot(prefixSlot, (children) => children && (h("span", { class: `${mergedClsPrefix}-statistic-value__prefix` }, children))),
+                this.value !== undefined ? (h("span", { class: `${mergedClsPrefix}-statistic-value__content` }, this.value)) : (resolveWrappedSlot(defaultSlot, (children) => children && (h("span", { class: `${mergedClsPrefix}-statistic-value__content` }, children)))),
+                resolveWrappedSlot(suffixSlot, (children) => children && (h("span", { class: `${mergedClsPrefix}-statistic-value__suffix` }, children))))));
     }
 });

package/es/styles.d.ts

@@ -65,6 +65,7 @@ export { treeDark } from './tree/styles';
 export { treeSelectDark } from './tree-select/styles';
 export { typographyDark } from './typography/styles';
 export { uploadDark } from './upload/styles';
+export { watermarkDark } from './watermark/styles';
 export { scrollbarDark } from './_internal/scrollbar/styles';
 export { internalSelectMenuDark } from './_internal/select-menu/styles';
 export { internalSelectionDark } from './_internal/selection/styles';

package/es/styles.js

@@ -65,6 +65,7 @@ export { treeDark } from './tree/styles';
 export { treeSelectDark } from './tree-select/styles';
 export { typographyDark } from './typography/styles';
 export { uploadDark } from './upload/styles';
+export { watermarkDark } from './watermark/styles';
 // danger zone, internal styles
 export { scrollbarDark } from './_internal/scrollbar/styles';
 export { internalSelectMenuDark } from './_internal/select-menu/styles';

package/es/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/es/switch/src/Switch.js

@@ -1,9 +1,9 @@
-import { h, ref, toRef, defineComponent, computed, Transition, watchEffect } from 'vue';
+import { h, ref, toRef, defineComponent, computed, watchEffect } from 'vue';
 import { depx, pxfy } from 'seemly';
 import { useMergedState } from 'vooks';
-import { useConfig, useFormItem, useTheme } from '../../_mixins';
-import { NBaseLoading } from '../../_internal';
-import { call, createKey, warnOnce } from '../../_utils';
+import { useConfig, useFormItem, useTheme, useThemeClass } from '../../_mixins';
+import { NBaseLoading, NIconSwitchTransition } from '../../_internal';
+import { call, createKey, warnOnce, isSlotEmpty, resolveWrappedSlot } from '../../_utils';
 import { switchLight } from '../styles';
 import style from './styles/index.cssr';
 const switchProps = Object.assign(Object.assign({}, useTheme.props), { size: {
@@ -41,7 +41,7 @@ export default defineComponent({
                 }
             });
         }
-        const { mergedClsPrefixRef } = useConfig(props);
+        const { mergedClsPrefixRef, inlineThemeDisabled } = useConfig(props);
         const themeRef = useTheme('Switch', '-switch', style, switchLight, props, mergedClsPrefixRef);
         const formItem = useFormItem(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
@@ -81,15 +81,13 @@ export default 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() {
@@ -102,21 +100,62 @@ export default 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 = computed(() => {
+            const { value: size } = mergedSizeRef;
+            const { self: { opacityDisabled, railColor, railColorActive, buttonBoxShadow, buttonColor, boxShadowFocus, loadingColor, textColor, iconColor, [createKey('buttonHeight', size)]: buttonHeight, [createKey('buttonWidth', size)]: buttonWidth, [createKey('buttonWidthPressed', size)]: buttonWidthPressed, [createKey('railHeight', size)]: railHeight, [createKey('railWidth', size)]: railWidth, [createKey('railBorderRadius', size)]: railBorderRadius, [createKey('buttonBorderRadius', size)]: buttonBorderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const offset = pxfy((depx(railHeight) - depx(buttonHeight)) / 2);
+            const height = pxfy(Math.max(depx(railHeight), depx(buttonHeight)));
+            const width = depx(railHeight) > depx(buttonHeight)
+                ? railWidth
+                : pxfy(depx(railWidth) + depx(buttonHeight) - 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
+            ? useThemeClass('switch', computed(() => {
+                return mergedSizeRef.value[0];
+            }), cssVarsRef, props)
+            : undefined;
         return {
             handleClick,
             handleBlur,
@@ -129,43 +168,22 @@ export default defineComponent({
             mergedValue: mergedValueRef,
             checked: checkedRef,
             mergedDisabled: mergedDisabledRef,
-            cssVars: computed(() => {
-                const { value: size } = mergedSizeRef;
-                const { self: { opacityDisabled, railColor, railColorActive, buttonBoxShadow, buttonColor, boxShadowFocus, loadingColor, textColor, [createKey('buttonHeight', size)]: buttonHeight, [createKey('buttonWidth', size)]: buttonWidth, [createKey('buttonWidthPressed', size)]: buttonWidthPressed, [createKey('railHeight', size)]: railHeight, [createKey('railWidth', size)]: railWidth, [createKey('railBorderRadius', size)]: railBorderRadius, [createKey('buttonBorderRadius', size)]: buttonBorderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
-                const offset = pxfy((depx(railHeight) - depx(buttonHeight)) / 2);
-                const height = pxfy(Math.max(depx(railHeight), depx(buttonHeight)));
-                const width = depx(railHeight) > depx(buttonHeight)
-                    ? railWidth
-                    : pxfy(depx(railWidth) + depx(buttonHeight) - 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 = !(isSlotEmpty(iconSlot) &&
+            isSlotEmpty(checkedIconSlot) &&
+            isSlotEmpty(uncheckedIconSlot));
         return (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`,
@@ -173,18 +191,25 @@ export default 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 },
             h("div", { class: `${mergedClsPrefix}-switch__rail`, "aria-hidden": "true", style: mergedRailStyle },
-                (checkedSlot || uncheckedSlot) && (h("div", { "aria-hidden": true, class: `${mergedClsPrefix}-switch__children-placeholder` },
-                    h("div", { class: `${mergedClsPrefix}-switch__rail-placeholder` },
-                        h("div", { class: `${mergedClsPrefix}-switch__button-placeholder` }), checkedSlot === null || checkedSlot === void 0 ? void 0 :
-                        checkedSlot()),
-                    h("div", { class: `${mergedClsPrefix}-switch__rail-placeholder` },
-                        h("div", { class: `${mergedClsPrefix}-switch__button-placeholder` }), uncheckedSlot === null || uncheckedSlot === void 0 ? void 0 :
-                        uncheckedSlot()))),
+                resolveWrappedSlot(checkedSlot, (checkedSlotChildren) => resolveWrappedSlot(uncheckedSlot, (uncheckedSlotChildren) => {
+                    if (checkedSlotChildren || uncheckedSlotChildren) {
+                        return (h("div", { "aria-hidden": true, class: `${mergedClsPrefix}-switch__children-placeholder` },
+                            h("div", { class: `${mergedClsPrefix}-switch__rail-placeholder` },
+                                h("div", { class: `${mergedClsPrefix}-switch__button-placeholder` }),
+                                checkedSlotChildren),
+                            h("div", { class: `${mergedClsPrefix}-switch__rail-placeholder` },
+                                h("div", { class: `${mergedClsPrefix}-switch__button-placeholder` }),
+                                uncheckedSlotChildren)));
+                    }
+                    return null;
+                })),
                 h("div", { class: `${mergedClsPrefix}-switch__button` },
-                    h(Transition, { name: "fade-in-scale-up-transition" }, {
-                        default: () => this.loading ? (h(NBaseLoading, { key: "loading", clsPrefix: mergedClsPrefix, strokeWidth: 20 })) : null
-                    }),
-                    checkedSlot && (h("div", { key: "checked", class: `${mergedClsPrefix}-switch__checked` }, checkedSlot())),
-                    uncheckedSlot && (h("div", { key: "unchecked", class: `${mergedClsPrefix}-switch__unchecked` }, uncheckedSlot()))))));
+                    resolveWrappedSlot(iconSlot, (icon) => resolveWrappedSlot(checkedIconSlot, (checkedIcon) => resolveWrappedSlot(uncheckedIconSlot, (uncheckedIcon) => {
+                        return (h(NIconSwitchTransition, null, {
+                            default: () => this.loading ? (h(NBaseLoading, { key: "loading", clsPrefix: mergedClsPrefix, strokeWidth: 20 })) : this.checked && (checkedIcon || icon) ? (h("div", { class: `${mergedClsPrefix}-switch__button-icon`, key: checkedIcon ? 'checked-icon' : 'icon' }, checkedIcon || icon)) : !this.checked && (uncheckedIcon || icon) ? (h("div", { class: `${mergedClsPrefix}-switch__button-icon`, key: uncheckedIcon ? 'unchecked-icon' : 'icon' }, uncheckedIcon || icon)) : null
+                        }));
+                    }))),
+                    resolveWrappedSlot(checkedSlot, (children) => children && (h("div", { key: "checked", class: `${mergedClsPrefix}-switch__checked` }, children))),
+                    resolveWrappedSlot(uncheckedSlot, (children) => children && (h("div", { key: "unchecked", class: `${mergedClsPrefix}-switch__unchecked` }, children)))))));
     }
 });

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

@@ -1,4 +1,4 @@
-import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr';
+import iconSwitchTransition from '../../../_styles/transitions/icon-switch.cssr';
 import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr'; // vars:
 // --n-bezier
 // --n-button-border-radius
@@ -17,6 +17,7 @@ import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr'; // vars:
 // --n-box-shadow-focus
 // --n-loading-color
 // --n-text-color
+// --n-icon-color
 
 export default cB('switch', `
  height: var(--n-height);
@@ -48,7 +49,7 @@ export default cB('switch', `
  font-size: calc(var(--n-button-width) - 4px);
  color: var(--n-loading-color);
  transition: color .3s var(--n-bezier);
- `, [fadeInScaleUpTransition({
+ `, [iconSwitchTransition({
   originalTransform: 'translateX(-50%) translateY(-50%)'
 })]), cE('checked, unchecked', `
  transition: color .3s var(--n-bezier);
@@ -74,7 +75,7 @@ export default cB('switch', `
   borderRadius: 'calc(var(--n-rail-height) / 2)'
 }, [cE('button', {
   borderRadius: 'calc(var(--n-button-height) / 2)'
-})])]), cNotM('disabled', [cM('pressed', [cE('rail', [cE('button', {
+})])]), cNotM('disabled', [cNotM('icon', [cM('pressed', [cE('rail', [cE('button', {
   maxWidth: 'var(--n-button-width-pressed)'
 })])]), cE('rail', [c('&:active', [cE('button', {
   maxWidth: 'var(--n-button-width-pressed)'
@@ -82,7 +83,7 @@ export default cB('switch', `
   left: 'calc(100% - var(--n-offset) - var(--n-button-width-pressed))'
 })])]), cE('rail', [c('&:active', [cE('button', {
   left: 'calc(100% - var(--n-offset) - var(--n-button-width-pressed))'
-})])])])]), cM('active', [cE('rail', [cE('button', {
+})])])])])]), cM('active', [cE('rail', [cE('button', {
   left: 'calc(100% - (var(--n-rail-height) + var(--n-button-width)) / 2)'
 })])]), cE('rail', `
  overflow: hidden;
@@ -95,7 +96,21 @@ export default cB('switch', `
  background .3s var(--n-bezier),
  box-shadow .3s var(--n-bezier);
  background-color: var(--n-rail-color);
- `, [cE('button', `
+ `, [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;
+ `, [iconSwitchTransition()]), cE('button', `
+ align-items: center; 
  top: var(--n-offset);
  left: var(--n-offset);
  height: var(--n-button-width);
@@ -114,9 +129,7 @@ export default cB('switch', `
  opacity .3s var(--n-bezier),
  max-width .3s var(--n-bezier),
  box-shadow .3s var(--n-bezier);
- `)]), cM('active', [cE('rail', {
-  backgroundColor: 'var(--n-rail-color-active)'
-})]), cM('disabled', [cE('rail', `
+ `)]), cM('active', [cE('rail', 'background-color: var(--n-rail-color-active);')]), cM('disabled', [cE('rail', `
  cursor: not-allowed;
  opacity: .5;
  `)]), cM('loading', [cE('rail', `

package/es/switch/styles/dark.js

@@ -5,9 +5,9 @@ const switchDark = {
     name: 'Switch',
     common: 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({}, commonVars), { 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 ${changeColor(primaryColor, { alpha: 0.3 })}` });
+        return Object.assign(Object.assign({}, commonVars), { 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 ${changeColor(primaryColor, { alpha: 0.3 })}` });
     }
 };
 export default switchDark;

package/es/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/es/switch/styles/light.js

@@ -2,9 +2,9 @@ import { changeColor } from 'seemly';
 import commonVars from './_common';
 import { commonLight } from '../../_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({}, commonVars), { 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 ${changeColor(primaryColor, { alpha: 0.2 })}` });
+    return Object.assign(Object.assign({}, commonVars), { 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 ${changeColor(primaryColor, { alpha: 0.2 })}` });
 };
 const switchLight = {
     name: 'Switch',