@type-dom/ui 0.1.0 → 0.1.2

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

@@ -1,6 +1,6 @@
 "use strict";
 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;
+exports.$switchCoreActionStyle = exports.$switchCoreInnerStyle = exports.$disabledStyle = exports.$switchDisabledStyle = exports.$switchCoreStyle = exports.$switchInputStyle = exports.$switchLabel = exports.$switchStyle = exports.$switch = 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");
 exports.$switchOnColor = var_1.$colors.primary.base;
 // -switch-on-color: var(--el-color-primary);
@@ -10,37 +10,55 @@ exports.$switchBorderColor = var_1.$borderColor.base;
 exports.$switchHeight = {
     large: '40px',
     default: '32px',
-    small: '24px'
+    small: '24px',
 };
 exports.$switchFontSize = {
     large: '14px',
     default: '14px',
-    small: '12px'
+    small: '12px',
 };
 exports.$switchCoreBorderRadius = {
     large: '12px',
     default: '10px',
-    small: '8px'
+    small: '8px',
 };
 exports.$switchCoreWidth = {
     large: '50px',
     default: '40px',
-    small: '30px'
+    small: '30px',
 };
 exports.$switchCoreHeight = {
     large: '24px',
     default: '20px',
-    small: '16px'
+    small: '16px',
 };
 exports.$switchButtonSize = {
     large: '20px',
     default: '16px',
-    small: '12px'
+    small: '12px',
 };
 exports.$switchContentPadding = {
     large: '6px',
     default: '4px',
-    small: '2px'
+    small: '2px',
+};
+exports.$switch = {
+    // 'on-color': getCssVar('color-primary'),
+    onColor: var_1.$colorPrimary,
+    // 'off-color': getCssVar('border-color'),
+    offColor: var_1.$borderColor,
+};
+exports.$switchStyle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    position: 'relative',
+    // font-size: map.get($switch-font-size, 'default'),
+    fontSize: exports.$switchFontSize['default'],
+    // line-height: map.get($switch-core-height, 'default'),
+    lineHeight: exports.$switchHeight['default'],
+    // height: map.get($switch-height, 'default'),
+    height: exports.$switchHeight['default'],
+    verticalAlign: 'middle',
 };
 exports.$switchLabel = {
     // transition: getCssVar('transition-duration-fast'),
@@ -52,5 +70,81 @@ exports.$switchLabel = {
     cursor: 'pointer',
     verticalAlign: 'middle',
     // color: getCssVar('text-color', 'primary'),
-    color: var_1.$textColor.primary
+    color: var_1.$textColor.primary,
+};
+exports.$switchInputStyle = {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+    opacity: 0,
+    margin: 0,
+};
+exports.$switchCoreStyle = {
+    display: 'inline-flex',
+    position: 'relative',
+    alignItems: 'center',
+    //   min-width: map.get($switch-core-width, 'default');
+    minWidth: exports.$switchCoreWidth['default'],
+    // height: map.get($switch-core-height, 'default');
+    height: exports.$switchCoreHeight['default'],
+    // border: '1px solid var(--el-switch-border-color, var(--el-switch-off-color))',
+    border: '1px solid ' + exports.$switchBorderColor,
+    // border-radius: map.get($switch-core-border-radius, 'default'),
+    borderRadius: exports.$switchCoreBorderRadius['default'],
+    outline: 'none',
+    boxSizing: 'border-box',
+    // background: getCssVar('switch-off-color'),
+    backgroundColor: exports.$switchOffColor,
+    cursor: 'pointer',
+    // transition: border-color getCssVar('transition-duration'),
+    //     background-color getCssVar('transition-duration'),
+    transition: 'border-color ' +
+        var_1.$transitionDurationDefault +
+        ', background-color ' +
+        var_1.$transitionDurationDefault,
+};
+exports.$switchDisabledStyle = {
+    opacity: 0.6,
+};
+exports.$disabledStyle = {
+    cursor: 'not-allowed',
+};
+exports.$switchCoreInnerStyle = {
+    width: '100%',
+    // transition: all getCssVar('transition-duration'),
+    transition: 'all ' + var_1.$transitionDurationDefault,
+    // height: map.get($switch-button-size, 'default'),
+    height: exports.$switchButtonSize['default'],
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    // padding: 0 #{map.get($switch-content-padding, 'default')} 0 calc(#{map.get(
+    //     $switch-button-size,
+    //     'default'
+    //   )} + 2px);
+    padding: '0 ' +
+        exports.$switchContentPadding['default'] +
+        ' 0 calc(' +
+        exports.$switchButtonSize['default'] +
+        ' + 2px)',
+};
+exports.$switchCoreActionStyle = {
+    position: 'absolute',
+    left: '1px',
+    // border-radius: getCssVar('border-radius-circle'),
+    borderRadius: var_1.$borderRadius.circle,
+    // transition: all getCssVar('transition-duration'),
+    transition: 'all ' + var_1.$transitionDurationDefault,
+    // width: map.get($switch-button-size, 'default'),
+    width: exports.$switchButtonSize['default'],
+    // height: map.get($switch-button-size, 'default'),
+    height: exports.$switchButtonSize['default'],
+    // background-color: getCssVar('color-white'),
+    backgroundColor: var_1.$colorWhite,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    // color: getCssVar('switch-off-color'),
+    color: exports.$switchOffColor,
 };

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

@@ -1,17 +1,18 @@
-import { Div, Span, TypeSpan } from '@type-dom/framework';
+import { Div, TypeSpanProps, Span, TypeSpan } from '@type-dom/framework';
 import { TdIcon } from '../../../basic/td-icon/td-icon.class';
-import { ITdSwitchConfig } from '../td-switch.interface';
+import { SwitchProps } from '../td-switch.interface';
 import { TdSwitch } from '../td-switch.class';
 export declare class TdSwitchCore extends TypeSpan {
     className: 'TdSwitchCore';
     action: Div;
     parent?: TdSwitch;
-    props: ITdSwitchConfig;
-    inner?: Div;
+    props: SwitchProps & TypeSpanProps;
     private innerText?;
     private innerIcon?;
+    inner?: Div;
     actionIcon?: TdIcon;
     actionSpan?: Span;
-    constructor(params?: ITdSwitchConfig);
+    constructor(params?: SwitchProps);
+    setup(): void;
     setInnerChecked(checked: boolean): void;
 }

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

@@ -3,148 +3,85 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSwitchCore = void 0;
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
+const signals_1 = require("@type-dom/signals");
+const utils_1 = require("../../../../styles/utils");
 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");
+const td_switch_const_1 = require("../td-switch.const");
 class TdSwitchCore extends framework_1.TypeSpan {
     constructor(params = {}) {
         super();
+        // console.log('TdSwitchCore constructor . ');
         this.className = 'TdSwitchCore';
         this.attr.addObj({
-            name: 'switch-core'
-        });
-        this.style.addObj({
-            display: 'inline-flex',
-            position: 'relative',
-            alignItems: 'center',
-            // border: '1px solid var(--el-switch-border-color, var(--el-switch-off-color))',
-            border: '1px solid ' + td_switch_style_1.$switchBorderColor,
-            outline: 'none',
-            borderRadius: '10px',
-            boxSizing: 'border-box',
-            background: td_switch_style_1.$switchOffColor, // 'var(--el-switch-off-color)',
-            // backgroundColor: $switchOnColor,
-            cursor: 'pointer',
-            // transition: border-color var(--el-transition-duration), background-color var(--el-transition-duration);
-            transition: var_1.$borderColor.base +
-                ' ' +
-                var_1.$transitionDurationDefault +
-                ', background-color ' +
-                var_1.$transitionDurationDefault,
-            // minWidth: map.get($switch-core-width, '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[(params === null || params === void 0 ? void 0 : params.size) || 'default']
+            name: 'switch-core',
         });
+        this.style.addObj(Object.assign(Object.assign({}, td_switch_style_1.$switchCoreStyle), { borderRadius: td_switch_style_1.$switchCoreBorderRadius[(params === null || params === void 0 ? void 0 : params.size) || 'default'], minWidth: td_switch_style_1.$switchCoreWidth[(0, signals_1.unref)(params === null || params === void 0 ? void 0 : params.size) || 'default'], height: td_switch_style_1.$switchCoreHeight[(0, signals_1.unref)(params === null || params === void 0 ? void 0 : params.size) || 'default'] }));
         if (params === null || params === void 0 ? void 0 : params.inlinePrompt) {
             this.inner = new framework_1.Div({
                 name: 'switch-inner',
-                styleObj: {
-                    width: '100%',
-                    // transition: all getCssVar('transition-duration'),
-                    transition: 'all ' + var_1.$transitionDurationDefault,
-                    // height: map.get($switch-button-size, 'default'),
-                    height: td_switch_style_1.$switchButtonSize[(params === null || params === void 0 ? void 0 : params.size) || 'default'],
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    overflow: 'hidden',
-                    // padding: 0 #{map.get($switch-content-padding, 'default')} 0 calc(#{map.get(
-                    //     $switch-button-size,
-                    //     'default'
-                    //   )} + 2px);
-                    padding: '0 ' +
-                        td_switch_style_1.$switchContentPadding[(params === null || params === void 0 ? void 0 : params.size) || 'default'] +
+                styleObj: Object.assign(Object.assign({}, td_switch_style_1.$switchCoreInnerStyle), { height: td_switch_style_1.$switchButtonSize[(0, signals_1.unref)(params === null || params === void 0 ? void 0 : params.size) || 'default'], padding: '0 ' +
+                        td_switch_style_1.$switchContentPadding[(0, signals_1.unref)(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)'
-                }
+                        td_switch_style_1.$switchButtonSize[(0, signals_1.unref)(params === null || params === void 0 ? void 0 : params.size) || 'default'] +
+                        ' + 2px)' }),
             });
             this.addChild(this.inner);
             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({
                     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
+                    slot: (params === null || params === void 0 ? void 0 : params.modelValue) === (params === null || params === void 0 ? void 0 : params.activeValue)
+                        ? params.activeIcon
                         : params === null || params === void 0 ? void 0 : params.inactiveIcon,
-                    styleObj: {
-                        fontSize: '12px', // $fontSizes.base,
+                    styleObj: Object.assign({ fontSize: '12px', 
                         // color: var(--el-color-white),
-                        color: var_1.$colorWhite,
-                        userSelect: 'none',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap'
-                    }
+                        color: var_1.$colorWhite, userSelect: 'none' }, utils_1.utilsEllipsis),
                 });
                 this.inner.addChild(this.innerIcon);
             }
             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({
                     name: 'switch-inner-text',
-                    text: (params === null || params === void 0 ? void 0 : params.modelValue) === (params === null || params === void 0 ? void 0 : params.activeValue)
+                    slot: (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: {
+                    styleObj: Object.assign({ 
                         // fontSize: $switchFontSize[params?.size || 'default'],
-                        fontSize: '12px', // $fontSizes.base,
+                        fontSize: '12px', 
                         // color: var(--el-color-white),
-                        color: var_1.$colorWhite,
-                        userSelect: 'none',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap'
-                    }
+                        color: var_1.$colorWhite, userSelect: 'none' }, utils_1.utilsEllipsis),
                 });
                 this.inner.addChild(this.innerText);
             }
         }
         this.action = new framework_1.Div({
             name: 'switch-action',
-            styleObj: {
-                position: 'absolute',
-                left: '1px',
-                // left: 'calc(100% - 17px)',
-                // borderRadius: var(--el-border-radius-circle),
-                borderRadius: var_1.$borderRadius.circle,
-                // transition: all var(--el-transition-duration),
-                transition: 'all ' + var_1.$transitionDurationDefault,
-                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[(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,
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                // color: var(--el-switch-off-color),
-                color: td_switch_style_1.$switchOffColor
-            }
+            styleObj: Object.assign(Object.assign({}, td_switch_style_1.$switchCoreActionStyle), { width: td_switch_style_1.$switchButtonSize[params.size || 'default'], height: td_switch_style_1.$switchButtonSize[params.size || 'default'] }),
         });
         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(),
-                loading: true
+                slot: new svgs_1.ElLoadingSvg(),
+                // loading: true // todo
             });
             this.action.addChild(loadingIcon);
         }
         else if ((params === null || params === void 0 ? void 0 : params.modelValue) === (params === null || params === void 0 ? void 0 : params.activeValue)) {
             this.action.style.addObj({
-                color: td_switch_style_1.$switchOnColor
+                color: td_switch_style_1.$switchOnColor,
             });
             if (params === null || params === void 0 ? void 0 : params.activeActionIcon) {
                 this.actionIcon = new td_icon_class_1.TdIcon({
                     name: 'switch-action-icon',
-                    svgObj: params.activeActionIcon
+                    slot: params.activeActionIcon,
                 });
                 this.action.addChild(this.actionIcon);
             }
             else if (params === null || params === void 0 ? void 0 : params.activeActionText) {
                 this.actionSpan = new framework_1.Span({
                     name: 'switch-action-text',
-                    text: params.activeActionText
+                    slot: params.activeActionText,
                 });
                 this.action.addChild(this.actionSpan);
             }
@@ -153,14 +90,14 @@ class TdSwitchCore extends framework_1.TypeSpan {
             if (params === null || params === void 0 ? void 0 : params.inactiveActionIcon) {
                 this.actionIcon = new td_icon_class_1.TdIcon({
                     name: 'switch-action-icon',
-                    svgObj: params.inactiveActionIcon
+                    slot: params.inactiveActionIcon,
                 });
                 this.action.addChild(this.actionIcon);
             }
             else if (params === null || params === void 0 ? void 0 : params.inactiveActionText) {
                 this.actionSpan = new framework_1.Span({
                     name: 'switch-action-text',
-                    text: params.inactiveActionText
+                    slot: params.inactiveActionText,
                 });
                 this.action.addChild(this.actionSpan);
             }
@@ -168,6 +105,57 @@ class TdSwitchCore extends framework_1.TypeSpan {
         this.addChild(this.action);
         this.props = this.useParams(params);
     }
+    setup() {
+        // console.warn('td-switch-core setup . ');
+        // const props = this.props;
+        const switchContext = this.inject(td_switch_const_1.switchKey);
+        (0, signals_1.watch)(() => (0, framework_1.toValue)(switchContext === null || switchContext === void 0 ? void 0 : switchContext.checked), (newChecked) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            // console.warn('switchContext.checked changed', newChecked);
+            const raw = (0, signals_1.unref)(newChecked);
+            if (raw) {
+                this.style.setObj({
+                    backgroundColor: (_a = this.props.switchOnColor) !== null && _a !== void 0 ? _a : td_switch_style_1.$switchOnColor,
+                });
+                this.action.style.setObj({
+                    color: td_switch_style_1.$switchOnColor,
+                    // left: calc(100% - #{map.get($switch-button-size, 'default') + 1px});
+                    left: 'calc(100% - ' +
+                        td_switch_style_1.$switchButtonSize[(0, signals_1.unref)(this.props.size) || 'default'] +
+                        ' - 1px)',
+                });
+                if (this.props.inlinePrompt) {
+                    this.setInnerChecked(true);
+                }
+                if (this.props.activeActionIcon) {
+                    (_b = this.actionIcon) === null || _b === void 0 ? void 0 : _b.replaceSvg(this.props.activeActionIcon);
+                }
+                else if (this.props.activeActionText) {
+                    (_d = (_c = this.actionSpan) === null || _c === void 0 ? void 0 : _c.textNode) === null || _d === void 0 ? void 0 : _d.setText(this.props.activeActionText);
+                }
+            }
+            else {
+                // todo false
+                // console.warn('raw is false . ');
+                this.style.setObj({
+                    backgroundColor: (_e = this.props.switchOffColor) !== null && _e !== void 0 ? _e : td_switch_style_1.$switchOffColor,
+                });
+                this.action.style.setObj({
+                    color: td_switch_style_1.$switchOffColor,
+                    left: '1px',
+                });
+                if (this.props.inlinePrompt) {
+                    this.setInnerChecked(false);
+                }
+                if (this.props.inactiveActionIcon) {
+                    (_f = this.actionIcon) === null || _f === void 0 ? void 0 : _f.replaceSvg(this.props.inactiveActionIcon);
+                }
+                else if (this.props.inactiveActionText) {
+                    (_h = (_g = this.actionSpan) === null || _g === void 0 ? void 0 : _g.textNode) === null || _h === void 0 ? void 0 : _h.setText(this.props.inactiveActionText);
+                }
+            }
+        }, { immediate: true });
+    }
     setInnerChecked(checked) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
         if (checked) {
@@ -178,10 +166,10 @@ class TdSwitchCore extends framework_1.TypeSpan {
                 // )};
                 padding: '0 ' +
                     'calc(' +
-                    td_switch_style_1.$switchButtonSize[this.props.size || 'default'] +
+                    td_switch_style_1.$switchButtonSize[(0, signals_1.unref)(this.props.size) || 'default'] +
                     ' + 2px)' +
                     '0 ' +
-                    td_switch_style_1.$switchContentPadding[this.props.size || 'default']
+                    td_switch_style_1.$switchContentPadding[(0, signals_1.unref)(this.props.size) || 'default'],
             });
             if (this.props.activeIcon || this.props.inactiveIcon) {
                 (_b = this.innerIcon) === null || _b === void 0 ? void 0 : _b.replaceSvg(this.props.activeIcon);
@@ -197,10 +185,10 @@ class TdSwitchCore extends framework_1.TypeSpan {
                 //   'default'
                 // )} + 2px);
                 padding: '0 ' +
-                    td_switch_style_1.$switchContentPadding[this.props.size || 'default'] +
+                    td_switch_style_1.$switchContentPadding[(0, signals_1.unref)(this.props.size) || 'default'] +
                     ' 0 calc(' +
-                    td_switch_style_1.$switchButtonSize[this.props.size || 'default'] +
-                    ' + 2px)'
+                    td_switch_style_1.$switchButtonSize[(0, signals_1.unref)(this.props.size) || 'default'] +
+                    ' + 2px)',
             });
             if (this.props.activeIcon || this.props.inactiveIcon) {
                 (_f = this.innerIcon) === null || _f === void 0 ? void 0 : _f.replaceSvg(this.props.inactiveIcon);

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

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

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

@@ -12,12 +12,12 @@ class TdSwitchLeft extends framework_1.TypeSpan {
         this.style.addObj(Object.assign(Object.assign({}, td_switch_style_1.$switchLabel), { marginRight: '10px' }));
         if (params === null || params === void 0 ? void 0 : params.inactiveIcon) {
             this.addChild(new td_icon_class_1.TdIcon({
-                svgObj: params.inactiveIcon
+                slot: params.inactiveIcon,
             }));
         }
         if (!(params === null || params === void 0 ? void 0 : params.inactiveIcon) && (params === null || params === void 0 ? void 0 : params.inactiveText)) {
             this.addChild(new framework_1.Span({
-                text: params.inactiveText
+                slot: params.inactiveText,
             }));
         }
         this.props = this.useParams(params);

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

@@ -1,7 +1,7 @@
-import { TypeSpan } from '@type-dom/framework';
-import { ITdSwitchConfig } from '../td-switch.interface';
+import { TypeSpanProps, TypeSpan } from '@type-dom/framework';
+import { SwitchProps } from '../td-switch.interface';
 export declare class TdSwitchRight extends TypeSpan {
     className: 'TdSwitchRight';
-    props: ITdSwitchConfig;
-    constructor(params?: ITdSwitchConfig);
+    props: SwitchProps & TypeSpanProps;
+    constructor(params?: SwitchProps);
 }

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

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSwitchRight = void 0;
 const framework_1 = require("@type-dom/framework");
-const td_switch_style_1 = require("../td-switch.style");
 const td_icon_class_1 = require("../../../basic/td-icon/td-icon.class");
+const td_switch_style_1 = require("../td-switch.style");
 class TdSwitchRight extends framework_1.TypeSpan {
     constructor(params = {}) {
         super();
@@ -11,12 +11,12 @@ class TdSwitchRight extends framework_1.TypeSpan {
         this.style.addObj(Object.assign(Object.assign({}, td_switch_style_1.$switchLabel), { marginLeft: '10px' }));
         if (params === null || params === void 0 ? void 0 : params.activeIcon) {
             this.addChild(new td_icon_class_1.TdIcon({
-                svgObj: params.activeIcon
+                slot: params.activeIcon,
             }));
         }
         if (!(params === null || params === void 0 ? void 0 : params.activeIcon) && (params === null || params === void 0 ? void 0 : params.activeText)) {
             this.addChild(new framework_1.Span({
-                text: params.activeText
+                slot: params.activeText,
             }));
         }
         this.props = this.useParams(params);

package/src/components/form/td-time-picker/common/picker-range-trigger.class.d.ts

@@ -0,0 +1,10 @@
+import { TypeDiv } from '@type-dom/framework';
+import { TimePickerRangeTriggerProps } from './props';
+export declare class PickerRangeTrigger extends TypeDiv {
+    className: 'PickerRangeTrigger';
+    props: TimePickerRangeTriggerProps;
+    focus?: () => void;
+    blur?: () => void;
+    constructor(params?: TimePickerRangeTriggerProps);
+    setup(): void;
+}

package/src/components/form/td-time-picker/common/picker-range-trigger.class.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PickerRangeTrigger = void 0;
+// import { ref } from 'vue'
+// import { useAttrs, useFocusController, useNamespace } from '@element-plus/hooks'
+// import { timePickerRngeTriggerProps } from './props'
+// import type { CSSProperties } from 'vue'
+const signals_1 = require("@type-dom/signals");
+const framework_1 = require("@type-dom/framework");
+const use_attrs_1 = require("../../../../hooks/use-attrs");
+const use_namespace_1 = require("../../../../hooks/use-namespace");
+const use_focus_controller_1 = require("../../../../hooks/use-focus-controller");
+class PickerRangeTrigger extends framework_1.TypeDiv {
+    constructor(params = {}) {
+        super();
+        this.className = 'PickerRangeTrigger';
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c;
+        const props = this.props;
+        const emit = this.emit;
+        const attrs = (0, use_attrs_1.useAttrs)();
+        const nsDate = (0, use_namespace_1.useNamespace)('date');
+        const nsRange = (0, use_namespace_1.useNamespace)('range');
+        const inputRef = (0, signals_1.signal)();
+        const endInputRef = (0, signals_1.signal)();
+        const { wrapperRef, isFocused } = (0, use_focus_controller_1.useFocusController)(inputRef); // todo
+        const handleClick = (evt) => {
+            emit('click', evt);
+        };
+        const handleMouseEnter = (evt) => {
+            emit('mouseenter', evt);
+        };
+        const handleMouseLeave = (evt) => {
+            emit('mouseleave', evt);
+        };
+        const handleTouchStart = (evt) => {
+            emit('mouseenter', evt);
+        };
+        const handleStartInput = (evt) => {
+            emit('startInput', evt);
+        };
+        const handleEndInput = (evt) => {
+            emit('endInput', evt);
+        };
+        const handleStartChange = (evt) => {
+            emit('startChange', evt);
+        };
+        const handleEndChange = (evt) => {
+            emit('endChange', evt);
+        };
+        const focus = () => {
+            var _a;
+            (_a = inputRef.get()) === null || _a === void 0 ? void 0 : _a.focus();
+        };
+        const blur = () => {
+            var _a, _b;
+            (_a = inputRef.get()) === null || _a === void 0 ? void 0 : _a.blur();
+            (_b = endInputRef.get()) === null || _b === void 0 ? void 0 : _b.blur();
+        };
+        (0, framework_1.defineExpose)({
+            focus,
+            blur,
+        });
+        this.assignProps({
+            refDom: wrapperRef,
+            class: (0, signals_1.computed)(() => [
+                nsDate.is('active', isFocused.get()) /* $attrs.class*/,
+            ]),
+            // styleObj:
+            events: {
+                click: handleClick,
+                mouseenter: handleMouseEnter,
+                mouseleave: handleMouseLeave,
+                touchstart: handleTouchStart, // todo passive
+            },
+        });
+        this.slotChildren((_a = props.slots) === null || _a === void 0 ? void 0 : _a.prefix);
+        this.addChild(new framework_1.Input({
+            id: props.id && props.id[0],
+            refDom: inputRef,
+            // name: name && name[0], // todo
+            attrObj: {
+                placeholder: props.startPlaceholder,
+                value: props.modelValue && props.modelValue[0],
+                class: nsRange.b('input'),
+            },
+            events: {
+                input: handleStartInput,
+                change: handleStartChange,
+            },
+        }));
+        this.slotChildren((_b = props.slots) === null || _b === void 0 ? void 0 : _b.rangeSeparator);
+        this.addChild(new framework_1.Input({
+            id: props.id && props.id[1],
+            refDom: endInputRef,
+            // name: name && name[1], // todo
+            attrObj: {
+                placeholder: props.endPlaceholder,
+                value: props.modelValue && props.modelValue[1],
+                class: nsRange.b('input'),
+            },
+            events: {
+                input: handleEndInput,
+                change: handleEndChange,
+            },
+        }));
+        this.slotChildren((_c = props.slots) === null || _c === void 0 ? void 0 : _c.suffix);
+    }
+}
+exports.PickerRangeTrigger = PickerRangeTrigger;

package/src/components/form/td-time-picker/common/picker.class.d.ts

@@ -0,0 +1,8 @@
+import { TypeFragment, TypeFragmentProps } from '@type-dom/framework';
+import { TimePickerDefaultProps } from './props';
+export declare class Picker extends TypeFragment {
+    className: 'Picker';
+    props: TimePickerDefaultProps & TypeFragmentProps;
+    constructor(params?: TimePickerDefaultProps);
+    setup(): void;
+}