@type-dom/ui 0.0.4 → 0.0.5

package/src/components/form/td-switch/td-switch.class.js

@@ -5,28 +5,37 @@ const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const var_1 = require("../../../styles/var");
-const td_switch_style_1 = require("./td-switch.style");
+const event_1 = require("../../../constants/event");
 const td_switch_core_1 = require("./widget/td-switch-core");
 const td_switch_left_1 = require("./widget/td-switch-left");
 const td_switch_right_1 = require("./widget/td-switch-right");
+const td_switch_style_1 = require("./td-switch.style");
 class TdSwitch extends ui_abstract_1.UI {
-    constructor(config) {
-        var _a, _b, _c;
-        super();
+    constructor(params) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        super(params);
         this.className = 'TdSwitch';
-        this.config = config;
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             display: 'inline-flex',
             alignItems: 'center',
             position: 'relative',
             verticalAlign: 'middle',
-            fontSize: td_switch_style_1.$switchFontSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
-            lineHeight: td_switch_style_1.$switchCoreHeight[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
-            height: td_switch_style_1.$switchHeight[(config === null || config === void 0 ? void 0 : config.size) || 'default']
+            fontSize: td_switch_style_1.$switchFontSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
+            lineHeight: td_switch_style_1.$switchCoreHeight[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
+            height: td_switch_style_1.$switchHeight[(params === null || params === void 0 ? void 0 : params.size) || 'default']
         });
-        this.modelValue = (_a = config === null || config === void 0 ? void 0 : config.modelValue) !== null && _a !== void 0 ? _a : false;
-        this.activeValue = (_b = config === null || config === void 0 ? void 0 : config.activeValue) !== null && _b !== void 0 ? _b : true;
-        this.inactiveValue = (_c = config === null || config === void 0 ? void 0 : config.inactiveValue) !== null && _c !== void 0 ? _c : false;
+        this.isControlled = (params === null || params === void 0 ? void 0 : params.modelValue) !== false;
+        this.modelValue = (_a = params === null || params === void 0 ? void 0 : params.modelValue) !== null && _a !== void 0 ? _a : false;
+        this.activeValue = (_b = params === null || params === void 0 ? void 0 : params.activeValue) !== null && _b !== void 0 ? _b : true;
+        this.inactiveValue = (_c = params === null || params === void 0 ? void 0 : params.inactiveValue) !== null && _c !== void 0 ? _c : false;
+        if (![params === null || params === void 0 ? void 0 : params.activeValue, params === null || params === void 0 ? void 0 : params.inactiveValue].includes(this.actualValue)) {
+            // emit(UPDATE_MODEL_EVENT, params?.inactiveValue)
+            (_e = (_d = params === null || params === void 0 ? void 0 : params.emits) === null || _d === void 0 ? void 0 : _d[event_1.UPDATE_MODEL_EVENT]) === null || _e === void 0 ? void 0 : _e.call(_d, params === null || params === void 0 ? void 0 : params.inactiveValue);
+            // emit(CHANGE_EVENT, params?.inactiveValue)
+            (_g = (_f = params === null || params === void 0 ? void 0 : params.emits) === null || _f === void 0 ? void 0 : _f[event_1.CHANGE_EVENT]) === null || _g === void 0 ? void 0 : _g.call(_f, params === null || params === void 0 ? void 0 : params.inactiveValue);
+            // emit(INPUT_EVENT, params?.inactiveValue)
+            (_j = (_h = params === null || params === void 0 ? void 0 : params.emits) === null || _h === void 0 ? void 0 : _h[event_1.INPUT_EVENT]) === null || _j === void 0 ? void 0 : _j.call(_h, params === null || params === void 0 ? void 0 : params.inactiveValue);
+        }
         this.input = new framework_1.Input({
             attrObj: {
                 type: 'checkbox',
@@ -37,30 +46,38 @@ class TdSwitch extends ui_abstract_1.UI {
             }
         });
         this.addChild(this.input);
-        if (!(config === null || config === void 0 ? void 0 : config.inlinePrompt) && ((config === null || config === void 0 ? void 0 : config.inactiveIcon) || (config === null || config === void 0 ? void 0 : config.inactiveText))) {
-            this.left = new td_switch_left_1.TdSwitchLeft(config);
+        if (!(params === null || params === void 0 ? void 0 : params.inlinePrompt) &&
+            ((params === null || params === void 0 ? void 0 : params.inactiveIcon) || (params === null || params === void 0 ? void 0 : params.inactiveText))) {
+            this.left = new td_switch_left_1.TdSwitchLeft(params);
             this.addChild(this.left);
         }
-        this.core = new td_switch_core_1.TdSwitchCore(Object.assign({}, config, {
+        this.core = new td_switch_core_1.TdSwitchCore(Object.assign({}, params, {
             modelValue: this.modelValue,
             activeValue: this.activeValue,
             inactiveValue: this.inactiveValue
         }));
         this.addChild(this.core);
-        if (!(config === null || config === void 0 ? void 0 : config.inlinePrompt) && ((config === null || config === void 0 ? void 0 : config.activeIcon) || (config === null || config === void 0 ? void 0 : config.activeText))) {
+        if (!(params === null || params === void 0 ? void 0 : params.inlinePrompt) && ((params === null || params === void 0 ? void 0 : params.activeIcon) || (params === null || params === void 0 ? void 0 : params.activeText))) {
             console.log('td-switch right .');
-            this.right = new td_switch_right_1.TdSwitchRight(config);
+            this.right = new td_switch_right_1.TdSwitchRight(params);
             this.addChild(this.right);
         }
-        this.setChecked(this.modelValue === this.activeValue);
-        this.setConfig(config);
+        this.props = this.setParams(params);
+    }
+    get actualValue() {
+        return this.isControlled ? this.props.modelValue : false;
     }
-    setConfig(config) {
-        super.setConfig(config);
-        // todo
-        console.log('td-switch setConfig . ');
-        if (config === null || config === void 0 ? void 0 : config.disabled) {
-            this.setDisabled(config === null || config === void 0 ? void 0 : config.disabled);
+    get checked() {
+        return this.actualValue === this.props.activeValue;
+    }
+    mounted() {
+        const props = this.props;
+        this.setChecked(this.modelValue === this.activeValue);
+        if (props === null || props === void 0 ? void 0 : props.disabled) {
+            this.setDisabled(props === null || props === void 0 ? void 0 : props.disabled);
+        }
+        if (props.loading) {
+            this.setLoading(props === null || props === void 0 ? void 0 : props.loading);
         }
     }
     initEvents() {
@@ -73,15 +90,19 @@ class TdSwitch extends ui_abstract_1.UI {
         });
     }
     handleChange() {
+        var _a, _b, _c, _d, _e, _f;
         console.log('handleChange . ');
-        const config = this.config;
+        const props = this.props;
         const checked = this.modelValue === this.activeValue;
         // this.modelValue = !this.modelValue;
         this.modelValue = checked ? this.inactiveValue : this.activeValue;
         const val = checked ? this.inactiveValue : this.activeValue;
         // emit(UPDATE_MODEL_EVENT, val)
+        (_b = (_a = this.props.emits) === null || _a === void 0 ? void 0 : _a[event_1.UPDATE_MODEL_EVENT]) === null || _b === void 0 ? void 0 : _b.call(_a, val);
         // emit(CHANGE_EVENT, val)
+        (_d = (_c = this.props.emits) === null || _c === void 0 ? void 0 : _c[event_1.CHANGE_EVENT]) === null || _d === void 0 ? void 0 : _d.call(_c, val);
         // emit(INPUT_EVENT, val)
+        (_f = (_e = this.props.emits) === null || _e === void 0 ? void 0 : _e[event_1.INPUT_EVENT]) === null || _f === void 0 ? void 0 : _f.call(_e, val);
         (0, framework_1.nextTick)(() => {
             this.input.dom.checked = !checked;
             console.log('handleChange . this.input.dom.checked is ', checked);
@@ -92,103 +113,111 @@ class TdSwitch extends ui_abstract_1.UI {
     setDisabled(disabled) {
         var _a, _b;
         if (disabled) {
-            this.addStyleObj({
+            this.ctrl.setStyleObj({
                 opacity: 0.6
             });
-            this.input.addAttrObj({
+            this.input.ctrl.setAttrObj({
                 disabled: true,
                 ariaDisabled: true
             });
-            (_a = this.left) === null || _a === void 0 ? void 0 : _a.setStyleObj({
-                cursor: framework_1.StyleCursor.notAllowed
+            (_a = this.left) === null || _a === void 0 ? void 0 : _a.ctrl.setStyleObj({
+                cursor: 'not-allowed'
             });
-            this.core.setStyleObj({
-                cursor: framework_1.StyleCursor.notAllowed
+            this.core.ctrl.setStyleObj({
+                cursor: 'not-allowed'
             });
         }
         else {
-            this.addStyleObj({
+            this.ctrl.setStyleObj({
                 opacity: 1
             });
-            this.input.addAttrObj({
+            this.input.ctrl.setAttrObj({
                 disabled: false,
                 ariaDisabled: false
             });
-            (_b = this.left) === null || _b === void 0 ? void 0 : _b.setStyleObj({
-                cursor: framework_1.StyleCursor.auto
+            (_b = this.left) === null || _b === void 0 ? void 0 : _b.ctrl.setStyleObj({
+                cursor: 'auto'
             });
-            this.core.setStyleObj({
-                cursor: framework_1.StyleCursor.auto
+            this.core.ctrl.setStyleObj({
+                cursor: 'auto'
             });
         }
     }
+    // setStyleObj 应该在渲染后执行。
     setChecked(checked) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (checked) {
-            this.core.setStyleObj({
-                backgroundColor: (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.switchOnColor) !== null && _b !== void 0 ? _b : td_switch_style_1.$switchOnColor
+            this.core.ctrl.setStyleObj({
+                backgroundColor: (_a = this.props.switchOnColor) !== null && _a !== void 0 ? _a : td_switch_style_1.$switchOnColor
             });
-            this.core.action.setStyleObj({
+            this.core.action.ctrl.setStyleObj({
                 color: td_switch_style_1.$switchOnColor,
                 // left: calc(100% - #{map.get($switch-button-size, 'default') + 1px});
-                left: 'calc(100% - ' + td_switch_style_1.$switchButtonSize[((_c = this.config) === null || _c === void 0 ? void 0 : _c.size) || 'default'] + ' - 1px)'
+                left: 'calc(100% - ' +
+                    td_switch_style_1.$switchButtonSize[this.props.size || 'default'] +
+                    ' - 1px)'
             });
             if (this.right) {
-                this.right.setStyleObj({
+                this.right.ctrl.setStyleObj({
                     color: var_1.$colors.primary.base
                 });
             }
             if (this.left) {
-                this.left.setStyleObj({
+                this.left.ctrl.setStyleObj({
                     color: var_1.$colors.default.base
                 });
             }
-            if ((_d = this.config) === null || _d === void 0 ? void 0 : _d.inlinePrompt) {
+            if (this.props.inlinePrompt) {
                 this.core.setInnerChecked(true);
             }
-            if ((_e = this.config) === null || _e === void 0 ? void 0 : _e.activeActionIcon) {
-                (_f = this.core.actionIcon) === null || _f === void 0 ? void 0 : _f.replaceSvg(this.config.activeActionIcon);
+            if (this.props.activeActionIcon) {
+                (_b = this.core.actionIcon) === null || _b === void 0 ? void 0 : _b.replaceSvg(this.props.activeActionIcon);
             }
-            else if ((_g = this.config) === null || _g === void 0 ? void 0 : _g.activeActionText) {
-                (_j = (_h = this.core.actionSpan) === null || _h === void 0 ? void 0 : _h.textNode) === null || _j === void 0 ? void 0 : _j.setText(this.config.activeActionText);
+            else if (this.props.activeActionText) {
+                (_d = (_c = this.core.actionSpan) === null || _c === void 0 ? void 0 : _c.textNode) === null || _d === void 0 ? void 0 : _d.setText(this.props.activeActionText);
             }
         }
         else {
-            this.core.setStyleObj({
-                backgroundColor: (_l = (_k = this.config) === null || _k === void 0 ? void 0 : _k.switchOffColor) !== null && _l !== void 0 ? _l : td_switch_style_1.$switchOffColor
+            this.core.ctrl.setStyleObj({
+                backgroundColor: (_e = this.props.switchOffColor) !== null && _e !== void 0 ? _e : td_switch_style_1.$switchOffColor
             });
-            this.core.action.setStyleObj({
+            this.core.action.ctrl.setStyleObj({
                 left: '1px',
                 color: td_switch_style_1.$switchOffColor
             });
             if (this.left) {
-                this.left.setStyleObj({
+                this.left.ctrl.setStyleObj({
                     color: var_1.$colors.primary.base
                 });
             }
             if (this.right) {
-                this.right.setStyleObj({
+                this.right.ctrl.setStyleObj({
                     color: var_1.$colors.default.base
                 });
             }
-            if ((_m = this.config) === null || _m === void 0 ? void 0 : _m.inlinePrompt) {
+            if (this.props.inlinePrompt) {
                 this.core.setInnerChecked(false);
             }
-            if ((_o = this.config) === null || _o === void 0 ? void 0 : _o.inactiveActionIcon) {
-                (_p = this.core.actionIcon) === null || _p === void 0 ? void 0 : _p.replaceSvg(this.config.inactiveActionIcon);
+            if (this.props.inactiveActionIcon) {
+                (_f = this.core.actionIcon) === null || _f === void 0 ? void 0 : _f.replaceSvg(this.props.inactiveActionIcon);
             }
-            else if ((_q = this.config) === null || _q === void 0 ? void 0 : _q.inactiveActionText) {
-                (_s = (_r = this.core.actionSpan) === null || _r === void 0 ? void 0 : _r.textNode) === null || _s === void 0 ? void 0 : _s.setText(this.config.inactiveActionText);
+            else if (this.props.inactiveActionText) {
+                (_h = (_g = this.core.actionSpan) === null || _g === void 0 ? void 0 : _g.textNode) === null || _h === void 0 ? void 0 : _h.setText(this.props.inactiveActionText);
             }
         }
     }
+    setLoading(loading) {
+        if (loading) {
+            this.setDisabled(true);
+        }
+    }
     switchValue() {
         console.log('switchValue . ');
-        const config = this.config;
-        if ((config === null || config === void 0 ? void 0 : config.loading) || (config === null || config === void 0 ? void 0 : config.disabled)) {
+        const props = this.props;
+        if ((props === null || props === void 0 ? void 0 : props.loading) || (props === null || props === void 0 ? void 0 : props.disabled)) {
             return;
         }
-        const beforeChange = config === null || config === void 0 ? void 0 : config.beforeChange;
+        const beforeChange = props === null || props === void 0 ? void 0 : props.beforeChange;
         if (!beforeChange) {
             this.handleChange();
             return;

package/src/components/form/td-switch/td-switch.interface.d.ts

@@ -1,5 +1,6 @@
-import { IUI, IUIConfig } from '../../../ui/ui.interface';
 import { TypeSvgSvg } from '@type-dom/framework';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { CHANGE_EVENT, INPUT_EVENT, UPDATE_MODEL_EVENT } from '../../../constants/event';
 export interface ITdSwitch extends IUI {
     className: 'TdSwitch';
 }
@@ -89,6 +90,11 @@ export interface ITdSwitchConfig extends IUIConfig {
      * @description native input aria-label
      */
     label?: string;
+    emits?: {
+        [UPDATE_MODEL_EVENT]?: (val?: boolean | string | number) => void;
+        [CHANGE_EVENT]?: (val?: boolean | string | number) => void;
+        [INPUT_EVENT]?: (val?: boolean | string | number) => void;
+    };
     switchOnColor?: string;
     switchOffColor?: string;
     activeActionText?: string;

package/src/components/form/td-switch/td-switch.interface.js

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const event_1 = require("../../../constants/event");

package/src/components/form/td-switch/td-switch.style.d.ts

@@ -1,4 +1,3 @@
-import { StyleCursor } from '@type-dom/framework';
 export declare const $switchOnColor: string;
 export declare const $switchOffColor: string;
 export declare const $switchBorderColor: string;
@@ -41,7 +40,7 @@ export declare const $switchLabel: {
     transition: string;
     display: string;
     fontWeight: string;
-    cursor: StyleCursor;
+    cursor: string;
     verticalAlign: string;
     color: string;
 };

package/src/components/form/td-switch/td-switch.style.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.$switchLabel = exports.$switchContentPadding = exports.$switchButtonSize = exports.$switchCoreHeight = exports.$switchCoreWidth = exports.$switchCoreBorderRadius = exports.$switchFontSize = exports.$switchHeight = exports.$switchBorderColor = exports.$switchOffColor = exports.$switchOnColor = void 0;
 const var_1 = require("../../../styles/var");
-const framework_1 = require("@type-dom/framework");
 exports.$switchOnColor = var_1.$colors.primary.base;
 // -switch-on-color: var(--el-color-primary);
 exports.$switchOffColor = var_1.$borderColor.base;
@@ -50,7 +49,7 @@ exports.$switchLabel = {
     display: 'inline-flex',
     // font-size: map.get($switch-font-size, 'default'),
     fontWeight: exports.$switchFontSize['default'],
-    cursor: framework_1.StyleCursor.pointer,
+    cursor: 'pointer',
     verticalAlign: 'middle',
     // color: getCssVar('text-color', 'primary'),
     color: var_1.$textColor.primary

package/src/components/form/td-switch/widget/td-switch-core.d.ts

@@ -6,12 +6,12 @@ export declare class TdSwitchCore extends TypeSpan {
     className: 'TdSwitchCore';
     action: Div;
     parent?: TdSwitch;
-    config?: ITdSwitchConfig;
+    props: ITdSwitchConfig;
     inner?: Div;
     private innerText?;
     private innerIcon?;
     actionIcon?: TdIcon;
     actionSpan?: Span;
-    constructor(config?: ITdSwitchConfig);
+    constructor(params?: ITdSwitchConfig);
     setInnerChecked(checked: boolean): void;
 }

package/src/components/form/td-switch/widget/td-switch-core.js

@@ -7,14 +7,13 @@ const var_1 = require("../../../../styles/var");
 const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
 const td_switch_style_1 = require("../td-switch.style");
 class TdSwitchCore extends framework_1.TypeSpan {
-    constructor(config) {
+    constructor(params) {
         super();
-        this.config = config;
         this.className = 'TdSwitchCore';
-        this.addAttrObj({
+        this.ctrl.addAttrObj({
             name: 'switch-core'
         });
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             display: 'inline-flex',
             position: 'relative',
             alignItems: 'center',
@@ -25,25 +24,27 @@ class TdSwitchCore extends framework_1.TypeSpan {
             boxSizing: 'border-box',
             background: td_switch_style_1.$switchOffColor, // 'var(--el-switch-off-color)',
             // backgroundColor: $switchOnColor,
-            cursor: framework_1.StyleCursor.pointer,
+            cursor: 'pointer',
             // transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration);
-            transition: var_1.$borderColor.base + ' ' + var_1.$transitionDuration + ', background-color ' + var_1.$transitionDuration,
+            transition: var_1.$borderColor.base +
+                ' ' +
+                var_1.$transitionDuration +
+                ', background-color ' +
+                var_1.$transitionDuration,
             // minWidth: map.get($switch-core-width, 'default');
-            minWidth: td_switch_style_1.$switchCoreWidth[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+            minWidth: td_switch_style_1.$switchCoreWidth[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
             // height: map.get($switch-core-height, 'default');
-            height: td_switch_style_1.$switchCoreHeight[(config === null || config === void 0 ? void 0 : config.size) || 'default']
+            height: td_switch_style_1.$switchCoreHeight[(params === null || params === void 0 ? void 0 : params.size) || 'default']
         });
-        if (config === null || config === void 0 ? void 0 : config.inlinePrompt) {
+        if (params === null || params === void 0 ? void 0 : params.inlinePrompt) {
             this.inner = new framework_1.Div({
-                attrObj: {
-                    name: 'switch-inner'
-                },
+                name: 'switch-inner',
                 styleObj: {
                     width: '100%',
                     // transition: all getCssVar('transition-duration'),
                     transition: 'all ' + var_1.$transitionDuration,
                     // height: map.get($switch-button-size, 'default'),
-                    height: td_switch_style_1.$switchButtonSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+                    height: td_switch_style_1.$switchButtonSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
@@ -52,16 +53,20 @@ class TdSwitchCore extends framework_1.TypeSpan {
                     //     $switch-button-size,
                     //     'default'
                     //   )} + 2px);
-                    padding: '0 ' + td_switch_style_1.$switchContentPadding[(config === null || config === void 0 ? void 0 : config.size) || 'default'] + ' 0 calc(' + td_switch_style_1.$switchButtonSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'] + ' + 2px)'
+                    padding: '0 ' +
+                        td_switch_style_1.$switchContentPadding[(params === null || params === void 0 ? void 0 : params.size) || 'default'] +
+                        ' 0 calc(' +
+                        td_switch_style_1.$switchButtonSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'] +
+                        ' + 2px)'
                 }
             });
             this.addChild(this.inner);
-            if ((config === null || config === void 0 ? void 0 : config.activeIcon) || (config === null || config === void 0 ? void 0 : config.inactiveIcon)) {
+            if ((params === null || params === void 0 ? void 0 : params.activeIcon) || (params === null || params === void 0 ? void 0 : params.inactiveIcon)) {
                 this.innerIcon = new td_icon_class_1.TdIcon({
-                    svgObj: (config === null || config === void 0 ? void 0 : config.modelValue) === (config === null || config === void 0 ? void 0 : config.activeValue) ? config === null || config === void 0 ? void 0 : config.activeIcon : config === null || config === void 0 ? void 0 : config.inactiveIcon,
-                    attrObj: {
-                        name: 'switch-inner-icon'
-                    },
+                    name: 'switch-inner-icon',
+                    svgObj: (params === null || params === void 0 ? void 0 : params.modelValue) === (params === null || params === void 0 ? void 0 : params.activeValue)
+                        ? params === null || params === void 0 ? void 0 : params.activeIcon
+                        : params === null || params === void 0 ? void 0 : params.inactiveIcon,
                     styleObj: {
                         fontSize: '12px', // $fontSizes.base,
                         // color: var(--el-color-white),
@@ -74,14 +79,14 @@ class TdSwitchCore extends framework_1.TypeSpan {
                 });
                 this.inner.addChild(this.innerIcon);
             }
-            else if ((config === null || config === void 0 ? void 0 : config.activeText) || (config === null || config === void 0 ? void 0 : config.inactiveText)) {
+            else if ((params === null || params === void 0 ? void 0 : params.activeText) || (params === null || params === void 0 ? void 0 : params.inactiveText)) {
                 this.innerText = new framework_1.Span({
-                    text: (config === null || config === void 0 ? void 0 : config.modelValue) === (config === null || config === void 0 ? void 0 : config.activeValue) ? config === null || config === void 0 ? void 0 : config.activeText : config === null || config === void 0 ? void 0 : config.inactiveText,
-                    attrObj: {
-                        name: 'switch-inner-text'
-                    },
+                    name: 'switch-inner-text',
+                    text: (params === null || params === void 0 ? void 0 : params.modelValue) === (params === null || params === void 0 ? void 0 : params.activeValue)
+                        ? params === null || params === void 0 ? void 0 : params.activeText
+                        : params === null || params === void 0 ? void 0 : params.inactiveText,
                     styleObj: {
-                        // fontSize: $switchFontSize[config?.size || 'default'],
+                        // fontSize: $switchFontSize[params?.size || 'default'],
                         fontSize: '12px', // $fontSizes.base,
                         // color: var(--el-color-white),
                         color: var_1.$colorWhite,
@@ -95,9 +100,7 @@ class TdSwitchCore extends framework_1.TypeSpan {
             }
         }
         this.action = new framework_1.Div({
-            attrObj: {
-                name: 'switch-action'
-            },
+            name: 'switch-action',
             styleObj: {
                 position: 'absolute',
                 left: '1px',
@@ -106,9 +109,9 @@ class TdSwitchCore extends framework_1.TypeSpan {
                 borderRadius: var_1.$borderRadius.circle,
                 // transition: all var(--el-transition-duration),
                 transition: 'all ' + var_1.$transitionDuration,
-                width: td_switch_style_1.$switchButtonSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+                width: td_switch_style_1.$switchButtonSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
                 // width: map.get($switch-button-size, 'default');
-                height: td_switch_style_1.$switchButtonSize[(config === null || config === void 0 ? void 0 : config.size) || 'default'],
+                height: td_switch_style_1.$switchButtonSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
                 // height: map.get($switch-button-size, 'default');
                 // backgroundColor: var(--el-color-white),
                 backgroundColor: var_1.$colorWhite,
@@ -119,92 +122,91 @@ class TdSwitchCore extends framework_1.TypeSpan {
                 color: td_switch_style_1.$switchOffColor
             }
         });
-        if (config === null || config === void 0 ? void 0 : config.loading) {
+        if (params === null || params === void 0 ? void 0 : params.loading) {
             const loadingIcon = new td_icon_class_1.TdIcon({
+                name: 'switch-loading-icon',
                 svgObj: new svgs_1.ElLoadingSvg(),
-                attrObj: {
-                    name: 'switch-loading-icon'
-                },
                 loading: true
             });
             this.action.addChild(loadingIcon);
         }
-        else if ((config === null || config === void 0 ? void 0 : config.modelValue) === (config === null || config === void 0 ? void 0 : config.activeValue)) {
-            this.action.addStyleObj({
+        else if ((params === null || params === void 0 ? void 0 : params.modelValue) === (params === null || params === void 0 ? void 0 : params.activeValue)) {
+            this.action.ctrl.addStyleObj({
                 color: td_switch_style_1.$switchOnColor
             });
-            if (config === null || config === void 0 ? void 0 : config.activeActionIcon) {
+            if (params === null || params === void 0 ? void 0 : params.activeActionIcon) {
                 this.actionIcon = new td_icon_class_1.TdIcon({
-                    svgObj: config.activeActionIcon,
-                    attrObj: {
-                        name: 'switch-action-icon'
-                    }
+                    name: 'switch-action-icon',
+                    svgObj: params.activeActionIcon
                 });
                 this.action.addChild(this.actionIcon);
             }
-            else if (config === null || config === void 0 ? void 0 : config.activeActionText) {
+            else if (params === null || params === void 0 ? void 0 : params.activeActionText) {
                 this.actionSpan = new framework_1.Span({
-                    text: config.activeActionText,
-                    attrObj: {
-                        name: 'switch-action-text'
-                    }
+                    name: 'switch-action-text',
+                    text: params.activeActionText
                 });
                 this.action.addChild(this.actionSpan);
             }
         }
-        else if ((config === null || config === void 0 ? void 0 : config.modelValue) !== (config === null || config === void 0 ? void 0 : config.activeValue)) {
-            if (config === null || config === void 0 ? void 0 : config.inactiveActionIcon) {
+        else if ((params === null || params === void 0 ? void 0 : params.modelValue) !== (params === null || params === void 0 ? void 0 : params.activeValue)) {
+            if (params === null || params === void 0 ? void 0 : params.inactiveActionIcon) {
                 this.actionIcon = new td_icon_class_1.TdIcon({
-                    svgObj: config.inactiveActionIcon,
-                    attrObj: {
-                        name: 'switch-action-icon'
-                    }
+                    name: 'switch-action-icon',
+                    svgObj: params.inactiveActionIcon
                 });
                 this.action.addChild(this.actionIcon);
             }
-            else if (config === null || config === void 0 ? void 0 : config.inactiveActionText) {
+            else if (params === null || params === void 0 ? void 0 : params.inactiveActionText) {
                 this.actionSpan = new framework_1.Span({
-                    text: config.inactiveActionText,
-                    attrObj: {
-                        name: 'switch-action-text'
-                    }
+                    name: 'switch-action-text',
+                    text: params.inactiveActionText
                 });
                 this.action.addChild(this.actionSpan);
             }
         }
         this.addChild(this.action);
+        this.props = this.setParams(params);
     }
     setInnerChecked(checked) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         if (checked) {
-            (_a = this.inner) === null || _a === void 0 ? void 0 : _a.setStyleObj({
+            (_a = this.inner) === null || _a === void 0 ? void 0 : _a.ctrl.setStyleObj({
                 // padding: 0 calc(#{map.get($switch-button-size, 'default')} + 2px) 0 #{map.get(
                 //   $switch-content-padding,
                 //   'default'
                 // )};
-                padding: '0 ' + 'calc(' + td_switch_style_1.$switchButtonSize[((_b = this.config) === null || _b === void 0 ? void 0 : _b.size) || 'default'] + ' + 2px)' + '0 ' +
-                    td_switch_style_1.$switchContentPadding[((_c = this.config) === null || _c === void 0 ? void 0 : _c.size) || 'default']
+                padding: '0 ' +
+                    'calc(' +
+                    td_switch_style_1.$switchButtonSize[this.props.size || 'default'] +
+                    ' + 2px)' +
+                    '0 ' +
+                    td_switch_style_1.$switchContentPadding[this.props.size || 'default']
             });
-            if (((_d = this.config) === null || _d === void 0 ? void 0 : _d.activeIcon) || ((_e = this.config) === null || _e === void 0 ? void 0 : _e.inactiveIcon)) {
-                (_f = this.innerIcon) === null || _f === void 0 ? void 0 : _f.replaceSvg(this.config.activeIcon);
+            if (this.props.activeIcon || this.props.inactiveIcon) {
+                (_b = this.innerIcon) === null || _b === void 0 ? void 0 : _b.replaceSvg(this.props.activeIcon);
             }
-            else if (((_g = this.config) === null || _g === void 0 ? void 0 : _g.activeText) || ((_h = this.config) === null || _h === void 0 ? void 0 : _h.inactiveText)) {
-                (_k = (_j = this.innerText) === null || _j === void 0 ? void 0 : _j.textNode) === null || _k === void 0 ? void 0 : _k.setText(((_l = this.config) === null || _l === void 0 ? void 0 : _l.activeText) || '');
+            else if (this.props.activeText || this.props.inactiveText) {
+                (_d = (_c = this.innerText) === null || _c === void 0 ? void 0 : _c.textNode) === null || _d === void 0 ? void 0 : _d.setText(this.props.activeText || '');
             }
         }
         else {
-            (_m = this.inner) === null || _m === void 0 ? void 0 : _m.setStyleObj({
+            (_e = this.inner) === null || _e === void 0 ? void 0 : _e.ctrl.setStyleObj({
                 // padding: 0 #{map.get($switch-content-padding, 'default')} 0 calc(#{map.get(
                 //   $switch-button-size,
                 //   'default'
                 // )} + 2px);
-                padding: '0 ' + td_switch_style_1.$switchContentPadding[((_o = this.config) === null || _o === void 0 ? void 0 : _o.size) || 'default'] + ' 0 calc(' + td_switch_style_1.$switchButtonSize[((_p = this.config) === null || _p === void 0 ? void 0 : _p.size) || 'default'] + ' + 2px)'
+                padding: '0 ' +
+                    td_switch_style_1.$switchContentPadding[this.props.size || 'default'] +
+                    ' 0 calc(' +
+                    td_switch_style_1.$switchButtonSize[this.props.size || 'default'] +
+                    ' + 2px)'
             });
-            if (((_q = this.config) === null || _q === void 0 ? void 0 : _q.activeIcon) || ((_r = this.config) === null || _r === void 0 ? void 0 : _r.inactiveIcon)) {
-                (_s = this.innerIcon) === null || _s === void 0 ? void 0 : _s.replaceSvg(this.config.inactiveIcon);
+            if (this.props.activeIcon || this.props.inactiveIcon) {
+                (_f = this.innerIcon) === null || _f === void 0 ? void 0 : _f.replaceSvg(this.props.inactiveIcon);
             }
-            else if (((_t = this.config) === null || _t === void 0 ? void 0 : _t.activeText) || ((_u = this.config) === null || _u === void 0 ? void 0 : _u.inactiveText)) {
-                (_w = (_v = this.innerText) === null || _v === void 0 ? void 0 : _v.textNode) === null || _w === void 0 ? void 0 : _w.setText(((_x = this.config) === null || _x === void 0 ? void 0 : _x.inactiveText) || '');
+            else if (this.props.activeText || this.props.inactiveText) {
+                (_h = (_g = this.innerText) === null || _g === void 0 ? void 0 : _g.textNode) === null || _h === void 0 ? void 0 : _h.setText(this.props.inactiveText || '');
             }
         }
     }

package/src/components/form/td-switch/widget/td-switch-left.d.ts

@@ -2,6 +2,6 @@ import { TypeSpan } from '@type-dom/framework';
 import { ITdSwitchConfig } from '../td-switch.interface';
 export declare class TdSwitchLeft extends TypeSpan {
     className: 'TdSwitchLeft';
-    config?: ITdSwitchConfig;
-    constructor(config?: ITdSwitchConfig);
+    props: ITdSwitchConfig;
+    constructor(params?: ITdSwitchConfig);
 }