@type-dom/ui 0.0.6 → 0.0.8

package/src/components/feedback/td-drawer/td-drawer.class.js

@@ -5,7 +5,7 @@ const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
 class TdDrawer extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdDrawer';
         this.transition = new framework_1.Transition({
@@ -21,19 +21,21 @@ class TdDrawer extends ui_abstract_1.UI {
                     console.log('beforeEnter');
                 },
             },
-            slot: new td_overlay_class_1.TdOverlay({
-                mask: params === null || params === void 0 ? void 0 : params.modal,
-                zIndex: 1000, // todo zIndex
-                events: {
-                    click: () => {
-                        //
-                        console.log('click . ');
+            childNodes: [
+                new td_overlay_class_1.TdOverlay({
+                    mask: params === null || params === void 0 ? void 0 : params.modal,
+                    zIndex: 1000, // todo zIndex
+                    events: {
+                        click: () => {
+                            //
+                            console.log('click . ');
+                        }
                     }
-                }
-            })
+                })
+            ]
         });
         this.addChild(this.transition);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdDrawer = TdDrawer;

package/src/components/feedback/td-drawer/td-drawer.interface.d.ts

@@ -4,9 +4,9 @@ export interface ITdDrawer extends IUI {
     className: 'TdDrawer';
 }
 export interface ITdDrawerConfig extends ITdDialogConfig {
-    direction: 'ltr' | 'rtl' | 'ttb' | 'btt';
-    size: string | number;
-    withHeader: boolean;
-    modalFade: boolean;
-    headerAriaLevel: string;
+    direction?: 'ltr' | 'rtl' | 'ttb' | 'btt';
+    size?: string | number;
+    withHeader?: boolean;
+    modalFade?: boolean;
+    headerAriaLevel?: string;
 }

package/src/components/feedback/td-focus-trap/td-focus-trap.class.js

@@ -5,11 +5,11 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const aria_1 = require("../../../aria");
 const utils_1 = require("./utils");
 class TdFocusTrap extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdFocusTrap';
         this.inheritAttrs = false;
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     initEvents() {
         const focusLayer = {

package/src/components/feedback/td-focus-trap/td-focus-trap.interface.d.ts

@@ -8,12 +8,12 @@ export interface ITdFocusTrapConfig extends IUIConfig {
     trapped?: boolean;
     focusTrapEl?: HTMLElement;
     focusStartEl?: 'container' | 'first' | HTMLElement;
-    emits: {
+    emits?: {
         [ON_TRAP_FOCUS_EVT]?: () => void;
         [ON_RELEASE_FOCUS_EVT]?: () => void;
-        focusin: () => void;
-        focusout: () => void;
-        focusoutPrevented: () => void;
-        releaseRequested: () => void;
+        focusin?: () => void;
+        focusout?: () => void;
+        focusoutPrevented?: () => void;
+        releaseRequested?: () => void;
     };
 }

package/src/components/feedback/td-focus-trap/utils.d.ts

@@ -1,4 +1,4 @@
-declare const focusReason: import("dist/libs/framework/src/reactivity/ref").Ref<"pointer" | "keyboard" | undefined>;
+declare const focusReason: import("@type-dom/framework").Ref<"pointer" | "keyboard" | undefined>;
 export type FocusLayer = {
     paused: boolean;
     pause: () => void;

package/src/components/feedback/td-loading/td-loading.class.js

@@ -5,7 +5,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
 class TdLoading extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdLoading';
         this.transition = new framework_1.Transition({
@@ -59,7 +59,7 @@ class TdLoading extends ui_abstract_1.UI {
         });
         this.transition.addChild(this.mask);
         this.addChild(this.transition);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdLoading = TdLoading;

package/src/components/feedback/td-message/td-message.class.d.ts

@@ -10,6 +10,7 @@ export declare class TdMessage extends UI<undefined> implements ITdMessage {
     static msgId: number;
     static msgList: TdMessage[];
     private repeatNum?;
+    private badge?;
     constructor(option?: string | ITdMessageConfig);
     initEvents(): void;
     mounted(): void;

package/src/components/feedback/td-message/td-message.class.js

@@ -11,6 +11,7 @@ const td_message_interface_1 = require("./td-message.interface");
 const td_message_style_1 = require("./td-message.style");
 class TdMessage extends ui_abstract_1.UI {
     constructor(option) {
+        var _a;
         let params = {};
         if (typeof option === 'string') {
             params.message = option;
@@ -59,7 +60,7 @@ class TdMessage extends ui_abstract_1.UI {
         });
         // this.message.ctrl.hide();
         // this.transition.setSlot(this.message);
-        this.transition.slotChild(this.message);
+        this.transition.addChild(this.message);
         const type = (params === null || params === void 0 ? void 0 : params.type) || 'info';
         const iconComponent = (params === null || params === void 0 ? void 0 : params.icon) || (new svgs_1.TypeComponentsMap[type]()) || '';
         console.log('iconComponent', iconComponent);
@@ -123,12 +124,11 @@ class TdMessage extends ui_abstract_1.UI {
                 }
             }));
         }
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
         const offset = (TdMessage.msgId * 60 + 20) + 'px';
-        const customStyle = {
+        this.message.ctrl.addStyleObj({
             top: offset
-        };
-        this.message.ctrl.addStyleObj(customStyle);
+        });
         if (params.grouping) {
             if (TdMessage.msgList.length === 0) {
                 TdMessage.msgId = TdMessage.msgId + 1;
@@ -141,12 +141,19 @@ class TdMessage extends ui_abstract_1.UI {
                 msg.repeatNum = (msg.repeatNum || 1) + 1;
                 console.log('msg.repeatNum is ', msg.repeatNum);
                 if (msg.repeatNum > 1) {
-                    const badgeType = msg.props.type ? (msg.props.type === 'error' ? 'danger' : msg.props.type) : 'info';
-                    msg.message.addChild(new td_badge_class_1.TdBadge({
-                        value: msg.repeatNum,
-                        type: badgeType,
-                        styleObj: td_message_style_1.$messageBadgeStyle
-                    }));
+                    if (msg.repeatNum === 2) {
+                        const badgeType = msg.props.type ? (msg.props.type === 'error' ? 'danger' : msg.props.type) : 'info';
+                        msg.badge = new td_badge_class_1.TdBadge({
+                            value: msg.repeatNum,
+                            type: badgeType,
+                            styleObj: td_message_style_1.$messageBadgeStyle
+                        });
+                        msg.message.addChild(msg.badge);
+                    }
+                    else {
+                        // msg.badge!.props.value = msg.repeatNum;
+                        (_a = msg.badge) === null || _a === void 0 ? void 0 : _a.changeValue(msg.repeatNum);
+                    }
                 }
                 this.clearTimer();
                 msg.clearTimer();
@@ -215,7 +222,6 @@ class TdMessage extends ui_abstract_1.UI {
         this.visible = false;
         this.message.ctrl.hide();
         this.clearTimer();
-        this.destroy();
         TdMessage.msgId = (TdMessage.msgId || 1) - 1;
         TdMessage.msgList = TdMessage.msgList.filter(item => item !== this);
         console.log('TdMessage.msgList is ', TdMessage.msgList, TdMessage.msgList.length);
@@ -226,6 +232,7 @@ class TdMessage extends ui_abstract_1.UI {
             };
             msg.message.ctrl.setStyleObj(customStyle);
         });
+        this.destroy();
     }
     keydown({ code }) {
         if (code === aria_1.EVENT_CODE.esc) {

package/src/components/feedback/td-message-box/td-message-box.class.js

@@ -11,7 +11,7 @@ const td_input_class_1 = require("../../form/td-input/td-input.class");
 const td_overlay_class_1 = require("../td-overlay/td-overlay.class");
 const td_message_box_style_1 = require("./td-message-box.style");
 class TdMessageBox extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         var _a, _b;
         super(params, 'fragment');
         this.handleInputEnter = (e) => {
@@ -83,7 +83,7 @@ class TdMessageBox extends ui_abstract_1.UI {
             // styleObj: $messageBoxStyle,
         });
         this.overlayEvent = (0, framework_1.useSameTarget)(this.handleWrapperClick);
-        this.transition.slotNode.addSlot(this.overlay);
+        this.transition.addChild(this.overlay);
         this.dialog = new framework_1.Div({
             name: 'message-box-overlay',
             attrObj: {
@@ -336,7 +336,7 @@ class TdMessageBox extends ui_abstract_1.UI {
             },
         });
         this.btns.addChild(this.confirmBtn);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
         const draggable = params === null || params === void 0 ? void 0 : params.draggable;
         const overflow = params === null || params === void 0 ? void 0 : params.overflow;
         const { onDraggable, offDraggable } = (0, framework_1.useDraggable)(this.messageBox.dom, (_b = this.header) === null || _b === void 0 ? void 0 : _b.dom, draggable, overflow);
@@ -393,7 +393,6 @@ class TdMessageBox extends ui_abstract_1.UI {
                 resolve({ action: 'confirm', value });
             });
             if ((_a = this.cancelBtn) === null || _a === void 0 ? void 0 : _a.dom) {
-                console.log('this.cancelBtn.subscriptions is ', this.cancelBtn.subscriptions);
                 // this.cancelBtn.removeEvent('click', this.cancelBtn.dom);
                 this.cancelBtn.addEvents({
                     click: () => {

package/src/components/feedback/td-notification/td-notification.class.js

@@ -150,7 +150,7 @@ class TdNotification extends ui_abstract_1.UI {
         this.notification.ctrl.addStyleObj(positionStyle);
         TdNotification.notifyId = TdNotification.notifyId + 1;
         TdNotification.notifications[position].push(this);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
         this.mount(this.to);
     }
     mounted() {
@@ -176,9 +176,9 @@ class TdNotification extends ui_abstract_1.UI {
         new TdNotification(Object.assign({ type: 'info' }, params));
     }
     startTimer() {
-        var _a;
+        var _a, _b;
         console.log('startTimer . ');
-        const duration = (_a = this.props.duration) !== null && _a !== void 0 ? _a : 4500;
+        const duration = (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.duration) !== null && _b !== void 0 ? _b : 4500;
         if (duration > 0) {
             ({ stop: this.timer } = (0, framework_1.useTimeoutFn)(() => {
                 if (this.visible)
@@ -194,7 +194,6 @@ class TdNotification extends ui_abstract_1.UI {
         this.visible = false;
         this.notification.ctrl.hide();
         const position = this.props.position || 'top-right';
-        this.destroy(); // todo 应该是 Transition 的 afterLeave 触发 destroy；  会删除props
         TdNotification.notifications[position] = TdNotification.notifications[position].filter((notification) => notification !== this);
         TdNotification.notifyId = TdNotification.notifyId - 1;
         let verticalOffset = this.props.offset || 0;
@@ -206,6 +205,7 @@ class TdNotification extends ui_abstract_1.UI {
             });
             verticalOffset += item.notification.dom.offsetHeight; // + this.GAP_SIZE;
         });
+        this.destroy(); // todo 应该是 Transition 的 afterLeave 触发 destroy；  会删除props
     }
     onKeydown({ code }) {
         console.log('onKeydown ', code);

package/src/components/feedback/td-overlay/td-overlay.class.js

@@ -5,7 +5,7 @@ const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_overlay_style_1 = require("./td-overlay.style");
 exports.overlayZIndex = 2000;
 class TdOverlay extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         exports.overlayZIndex = exports.overlayZIndex + 1;
         this.className = 'TdOverlay';
@@ -26,7 +26,7 @@ class TdOverlay extends ui_abstract_1.UI {
             });
         }
         this.addChild(this.getSlotNode());
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
     addSlot(slot) {
         this.getSlotNode('default').resetSlot(slot);

package/src/components/feedback/td-popper/arrow/arrow.class.js

@@ -4,7 +4,7 @@ exports.TdPopperArrow = void 0;
 const var_1 = require("../../../../styles/var");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdPopperArrow extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'span');
         this.className = 'TdPopperArrow';
         this.ctrl.addAttrName('td-popper-arrow');
@@ -26,7 +26,7 @@ class TdPopperArrow extends ui_abstract_1.UI {
             boxSizing: 'border-box'
             // }
         });
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdPopperArrow = TdPopperArrow;

package/src/components/feedback/td-popper/content/content.class.js

@@ -4,7 +4,7 @@ exports.TdPopperContent = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 const td_focus_trap_class_1 = require("../../td-focus-trap/td-focus-trap.class");
 class TdPopperContent extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdPopperContent';
         this.ctrl.addAttrName('td-popper-content');
@@ -19,7 +19,7 @@ class TdPopperContent extends ui_abstract_1.UI {
         });
         this.focusTrap = new td_focus_trap_class_1.TdFocusTrap();
         this.addChild(this.focusTrap);
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdPopperContent = TdPopperContent;

package/src/components/feedback/td-popper/td-popper.class.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopper = void 0;
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 class TdPopper extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params, 'fragment');
         this.className = 'TdPopper';
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdPopper = TdPopper;

package/src/components/feedback/td-popper/trigger/trigger.class.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopperTrigger = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdPopperTrigger extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdPopperTrigger';
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdPopperTrigger = TdPopperTrigger;

package/src/components/feedback/td-tooltip/content/content.class.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTooltipContent = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdTooltipContent extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdTooltipContent';
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdTooltipContent = TdTooltipContent;

package/src/components/feedback/td-tooltip/td-tooltip.class.js

@@ -8,7 +8,7 @@ const arrow_class_1 = require("../td-popper/arrow/arrow.class");
 const trigger_class_1 = require("./trigger/trigger.class");
 const content_class_1 = require("./content/content.class");
 class TdTooltip extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdTooltip';
         this.trigger = new trigger_class_1.TdTooltipTrigger();
@@ -18,7 +18,7 @@ class TdTooltip extends ui_abstract_1.UI {
         this.addChild(new td_popper_class_1.TdPopper({
             slot: [this.trigger, this.content]
         }));
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdTooltip = TdTooltip;

package/src/components/feedback/td-tooltip/trigger/trigger.class.js

@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdTooltipTrigger = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 class TdTooltipTrigger extends ui_abstract_1.UI {
-    constructor(params) {
+    constructor(params = {}) {
         super(params);
         this.className = 'TdTooltipTrigger';
-        this.props = this.setParams(params);
+        this.props = this.setProps(params);
     }
 }
 exports.TdTooltipTrigger = TdTooltipTrigger;

package/src/components/form/checkbox-group/checkbox-option/checkbox-option.class.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxOption = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 class CheckboxOption extends framework_1.TypeSpan {
     constructor() {
@@ -19,26 +18,28 @@ class CheckboxOption extends framework_1.TypeSpan {
         this.childNodes = [this.input, this.textNode];
     }
     initEvents() {
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.input.dom, 'click').subscribe(() => {
-            var _a, _b, _c;
-            console.log('this.input.dom click . ');
-            console.log('this.input.dom.value is ', this.input.dom.value);
-            const flag = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.value.findIndex((item) => item === this.input.dom.value);
-            if (this.input.dom.checked) {
-                if (flag === -1) {
-                    (_b = this.parent) === null || _b === void 0 ? void 0 : _b.value.push(this.input.dom.value);
-                    this.input.ctrl.setAttrObj({
-                        checked: true
-                    });
+        this.input.addEvents({
+            click: () => {
+                var _a, _b, _c, _d;
+                console.log('this.input.dom click . ');
+                console.log('this.input.dom.value is ', this.input.dom.value);
+                const flag = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.value.findIndex((item) => item === this.input.dom.value);
+                if (this.input.dom.checked) {
+                    if (flag === -1) {
+                        (_b = this.parent) === null || _b === void 0 ? void 0 : _b.value.push(this.input.dom.value);
+                        this.input.ctrl.setAttrObj({
+                            checked: true
+                        });
+                    }
                 }
-            }
-            else {
-                this.input.ctrl.removeAttribute('checked');
-                if (flag && flag !== -1) {
-                    (_c = this.parent) === null || _c === void 0 ? void 0 : _c.value.splice(flag, 1);
+                else {
+                    this.input.ctrl.removeAttribute('checked');
+                    if (flag && flag !== -1) {
+                        ((_c = this.parent) === null || _c === void 0 ? void 0 : _c.value) && ((_d = this.parent) === null || _d === void 0 ? void 0 : _d.value.splice(flag, 1));
+                    }
                 }
             }
-        }));
+        });
     }
 }
 exports.CheckboxOption = CheckboxOption;

package/src/components/form/field-item/cascade/field-cascade.abstract.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PropertyCascade = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const field_select_class_1 = require("../../../form/field-select/field-select.class");
 const field_item_abstract_1 = require("../field-item.abstract");
@@ -55,7 +54,7 @@ class PropertyCascade extends field_item_abstract_1.FieldItem {
     }
     get fieldSetting() {
         var _a;
-        const fieldSetting = (_a = this.settings) === null || _a === void 0 ? void 0 : _a.fieldSetting;
+        const fieldSetting = (_a = this.props) === null || _a === void 0 ? void 0 : _a.fieldSetting;
         if (fieldSetting) {
             const optionSetting = {
                 name: fieldSetting.name,
@@ -104,7 +103,7 @@ class PropertyCascade extends field_item_abstract_1.FieldItem {
         // TypeFormDesigner.webDocument.setAttribute('field-config', JSON.stringify(value));
         if (this.settings === undefined) {
             if (value !== undefined) {
-                this.setSetting('fieldSetting', value);
+                this.setProp('fieldSetting', value);
             }
         }
         else {
@@ -112,7 +111,7 @@ class PropertyCascade extends field_item_abstract_1.FieldItem {
                 delete this.settings.fieldSetting;
             }
             else {
-                this.setSetting('fieldSetting', value);
+                this.setProp('fieldSetting', value);
             }
         }
     }
@@ -152,39 +151,45 @@ class PropertyCascade extends field_item_abstract_1.FieldItem {
         }
     }
     initEvents() {
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.firstStageSelectObj.dom, 'change').subscribe(() => {
-            var _a, _b;
-            console.log('this.firstStageSelectObj.dom change . ');
-            console.log('this.firstStageSelectObj.dom.value is ', this.firstStageSelectObj.dom.value);
-            const selectedOption = (_b = (_a = this.cascadeConfig) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.find((opt) => String(opt.value) === this.firstStageSelectObj.dom.value);
-            if (!this.cascadeConfig) {
-                throw Error('无法获取cascadeConfig');
-            }
-            // todo 没有改变值 ？？？？？
-            if (selectedOption) {
-                this.resetCascadeConfigResultValue(selectedOption.value);
-            }
-            else {
-                this.secondStageSelectObj.resetOptions([
-                    {
-                        label: '请先选择上级',
-                        value: 0
-                    }
-                ], 0);
-                return;
+        this.firstStageSelectObj.addEvents({
+            change: () => {
+                var _a, _b;
+                console.log('this.firstStageSelectObj.dom change . ');
+                console.log('this.firstStageSelectObj.dom.value is ', this.firstStageSelectObj.dom.value);
+                const selectedOption = (_b = (_a = this.cascadeConfig) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.find((opt) => String(opt.value) === this.firstStageSelectObj.dom.value);
+                if (!this.cascadeConfig) {
+                    throw Error('无法获取cascadeConfig');
+                }
+                // todo 没有改变值 ？？？？？
+                if (selectedOption) {
+                    this.resetCascadeConfigResultValue(selectedOption.value);
+                }
+                else {
+                    this.secondStageSelectObj.resetOptions([
+                        {
+                            label: '请先选择上级',
+                            value: 0
+                        }
+                    ], 0);
+                    return;
+                }
+                if (selectedOption && selectedOption.options) {
+                    console.log('this.cascadeConfig is ', this.cascadeConfig);
+                    console.log('selectedOption is ', selectedOption);
+                    this.secondStageSelectObj.resetOptions(selectedOption.options, 0);
+                }
             }
-            if (selectedOption && selectedOption.options) {
-                console.log('this.cascadeConfig is ', this.cascadeConfig);
-                console.log('selectedOption is ', selectedOption);
-                this.secondStageSelectObj.resetOptions(selectedOption.options, 0);
+        });
+        this.secondStageSelectObj.addEvents({
+            click: () => {
+                console.log('this.secondStageSelectObj.dom change . ');
+                this.reset(this.secondStageSelectObj.dom.value);
+            },
+            change: () => {
+                console.log('this.secondStageSelectObj.dom change . ');
+                this.reset(this.secondStageSelectObj.dom.value);
             }
-        }), (0, rxjs_1.fromEvent)(this.secondStageSelectObj.dom, 'click').subscribe(() => {
-            console.log('this.secondStageSelectObj.dom change . ');
-            this.reset(this.secondStageSelectObj.dom.value);
-        }), (0, rxjs_1.fromEvent)(this.secondStageSelectObj.dom, 'change').subscribe(() => {
-            console.log('this.secondStageSelectObj.dom change . ');
-            this.reset(this.secondStageSelectObj.dom.value);
-        }));
+        });
     }
 }
 exports.PropertyCascade = PropertyCascade;

package/src/components/form/field-item/input/field-input.abstract.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldInput = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const field_item_abstract_1 = require("../field-item.abstract");
 const field_item_style_1 = require("../field-item.style");
@@ -40,11 +39,13 @@ class FieldInput extends field_item_abstract_1.FieldItem {
         this.content.dom.value = String(value);
     }
     initEvents() {
-        this.subscriptions.push((0, rxjs_1.fromEvent)(this.content.dom, 'input').subscribe(() => {
-            // console.log('this.input input, event is ', evt);
-            // console.log('this.input.dom.value is ', this.input.dom.value);
-            this.reset(this.content.dom.value);
-        }));
+        this.content.addEvents({
+            input: () => {
+                // console.log('this.input input, event is ', evt);
+                // console.log('this.input.dom.value is ', this.input.dom.value);
+                this.reset(this.content.dom.value);
+            }
+        });
     }
 }
 exports.FieldInput = FieldInput;