@type-dom/ui 0.0.7 → 0.0.9

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

@@ -1,17 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopperContent = void 0;
+const utils_1 = require("@type-dom/utils");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 const td_focus_trap_class_1 = require("../../td-focus-trap/td-focus-trap.class");
+const content_const_1 = require("./content.const");
+const td_form_const_1 = require("../../../form/td-form/td-form.const");
+const td_popper_const_1 = require("../td-popper.const");
 class TdPopperContent extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdPopperContent';
-        this.ctrl.addAttrName('td-popper-content');
-        this.ctrl.addAttrObj({
+        this.attr.addName('td-popper-content');
+        this.attr.addObj({
             tabindex: -1
         });
-        this.ctrl.addStyleObj({
+        this.style.addObj({
         // padding: '10px',
         // backgroundColor: $bgColors.default,
         // borderRadius: $borderRadius.base,
@@ -19,7 +23,24 @@ 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);
+        if (params.contentStyle) { // todo
+            this.style.addObj(params.contentStyle);
+        }
+        this.buildProps(content_const_1.popperContentProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        const formItemContext = this.inject(td_form_const_1.formItemContextKey, undefined);
+        const arrowOffset = 0;
+        this.provide(td_popper_const_1.POPPER_CONTENT_INJECTION_KEY, {
+            // arrowStyle,
+            // arrowRef,
+            arrowOffset,
+        });
+        if (formItemContext) {
+            // disallow auto-id from inside popper content
+            this.provide(td_form_const_1.formItemContextKey, Object.assign(Object.assign({}, formItemContext), { addInputId: utils_1.NOOP, removeInputId: utils_1.NOOP }));
+        }
     }
 }
 exports.TdPopperContent = TdPopperContent;

package/src/components/feedback/td-popper/content/content.const.d.ts

@@ -0,0 +1,3 @@
+import { IPopperCoreConfigProps, ITdPopperContentConfig } from './content.interface';
+export declare const popperCoreConfigProps: IPopperCoreConfigProps;
+export declare const popperContentProps: ITdPopperContentConfig;

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popperContentProps = exports.popperCoreConfigProps = void 0;
+exports.popperCoreConfigProps = {
+    boundariesPadding: 0,
+    // fallbackPlacements: undefined,
+    gpuAcceleration: true,
+    /**
+     * @description offset of the Tooltip
+     */
+    offset: 12,
+    /**
+     * @description position of Tooltip
+     */
+    placement: 'bottom',
+    /**
+     * @description [popper.js](https://popper.js.org/docs/v2/) parameters
+     */
+    // popperOptions:  () => ({}),
+    strategy: 'absolute',
+};
+exports.popperContentProps = Object.assign(Object.assign({}, exports.popperCoreConfigProps), { 
+    // style: {
+    //   type: definePropType<StyleValue>([String, Array, Object]),
+    // },
+    // className: {
+    //   type: definePropType<ClassType>([String, Array, Object]),
+    // },
+    effect: 'dark', enterable: true, focusOnShow: false, trapping: false, stopPopperMouseEvent: true });

package/src/components/feedback/td-popper/content/content.interface.d.ts

@@ -1,4 +1,5 @@
 import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+import { IStyle } from '@type-dom/css-type';
 export interface ITdPopperContent extends IUI {
     className: 'TdPopperContent';
 }
@@ -22,6 +23,7 @@ export interface IPopperCoreConfigProps extends IUIConfig {
 }
 export interface ITdPopperContentConfig extends IPopperCoreConfigProps {
     id?: string;
+    contentStyle?: IStyle;
     effect?: string;
     visible?: boolean;
     enterable?: boolean;
@@ -34,4 +36,11 @@ export interface ITdPopperContentConfig extends IPopperCoreConfigProps {
     ariaLabel?: string;
     virtualTriggering?: boolean;
     zIndex?: number;
+    emits?: {
+        mouseenter?: (evt: MouseEvent) => void;
+        mouseleave?: (evt: MouseEvent) => void;
+        focus?: (evt: FocusEvent) => void;
+        blur?: (evt: FocusEvent) => void;
+        close?: () => void;
+    };
 }

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

@@ -3,5 +3,5 @@ import { ITdPopper, ITdPopperConfig } from './td-popper.interface';
 export declare class TdPopper extends UI<undefined> implements ITdPopper {
     className: 'TdPopper';
     props: ITdPopperConfig;
-    constructor(params?: ITdPopperConfig);
+    constructor(params: ITdPopperConfig);
 }

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

@@ -1,12 +1,45 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopper = void 0;
+const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_popper_const_1 = require("./td-popper.const");
 class TdPopper extends ui_abstract_1.UI {
-    constructor(params = {}) {
+    constructor(params) {
         super(params, 'fragment');
         this.className = 'TdPopper';
-        this.props = this.setParams(params);
+        const triggerRef = (0, framework_1.createProxy)(null);
+        const popperInstanceRef = (0, framework_1.createProxy)(null);
+        const contentRef = (0, framework_1.createProxy)(null);
+        const referenceRef = (0, framework_1.createProxy)(null);
+        if (!params.role) {
+            params.role = 'tooltip';
+        }
+        this.props = this.useParams(params);
+        const role = this.props.role;
+        const popperProviders = {
+            /**
+             * @description trigger element
+             */
+            triggerRef,
+            /**
+             * @description popperjs instance
+             */
+            popperInstanceRef,
+            /**
+             * @description popper content element
+             */
+            contentRef,
+            /**
+             * @description popper reference element
+             */
+            referenceRef,
+            /**
+             * @description role determines how aria attributes are distributed
+             */
+            role,
+        };
+        this.provide(td_popper_const_1.POPPER_INJECTION_KEY, popperProviders);
     }
 }
 exports.TdPopper = TdPopper;

package/src/components/feedback/td-popper/td-popper.const.d.ts

@@ -0,0 +1,21 @@
+import { InjectionKey } from '@type-dom/framework';
+import { IRoleTypes } from './td-popper.interface';
+/**
+ * triggerRef indicates the element that triggers popper
+ * contentRef indicates the element of popper content
+ * referenceRef indicates the element that popper content relative with
+ */
+export type TdPopperInjectionContext = {
+    triggerRef: any;
+    contentRef: any;
+    popperInstanceRef: any;
+    referenceRef: any;
+    role: IRoleTypes;
+};
+export declare const POPPER_INJECTION_KEY: InjectionKey<TdPopperInjectionContext>;
+export type ElPopperContentInjectionContext = {
+    arrowRef: any;
+    arrowOffset: any;
+    arrowStyle: any;
+};
+export declare const POPPER_CONTENT_INJECTION_KEY: InjectionKey<ElPopperContentInjectionContext>;

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.POPPER_CONTENT_INJECTION_KEY = exports.POPPER_INJECTION_KEY = void 0;
+exports.POPPER_INJECTION_KEY = Symbol('popper');
+exports.POPPER_CONTENT_INJECTION_KEY = Symbol('popperContent');

package/src/components/feedback/td-popper/trigger/trigger.class.d.ts

@@ -3,5 +3,16 @@ import { ITdPopperTrigger, ITdPopperTriggerConfig } from './trigger.interface';
 export declare class TdPopperTrigger extends UI implements ITdPopperTrigger {
     className: 'TdPopperTrigger';
     props: ITdPopperTriggerConfig;
+    private role;
+    triggerRef?: HTMLElement;
+    virtualTriggerAriaStopWatch?: () => void;
     constructor(params?: ITdPopperTriggerConfig);
+    get ariaHaspopup(): any;
+    get ariaControls(): string | undefined;
+    get ariaDescribedby(): string | undefined;
+    get ariaExpanded(): string | undefined;
+    setup(): void;
+    beforeDestroy(): void;
+    setVirtualRef(el: HTMLElement): void;
+    setTriggerRef(el: HTMLElement, prevEl?: HTMLElement): void;
 }

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

@@ -1,12 +1,107 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdPopperTrigger = void 0;
+const utils_1 = require("@type-dom/utils");
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
+const use_forward_ref_1 = require("../../../../hooks/use-forward-ref");
+const td_only_child_class_1 = require("../../td-only-child/td-only-child.class");
+const content_const_1 = require("../content/content.const");
+const td_popper_const_1 = require("../td-popper.const");
+const trigger_const_1 = require("./trigger.const");
 class TdPopperTrigger extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdPopperTrigger';
-        this.props = this.setParams(params);
+        if (!params.virtualTriggering) {
+            this.addChild(new td_only_child_class_1.TdOnlyChild());
+        }
+        this.buildProps(content_const_1.popperContentProps);
+        this.props = this.useParams(params);
+    }
+    get ariaHaspopup() {
+        if (this.role && this.role !== 'tooltip') {
+            return this.role;
+        }
+        return undefined;
+    }
+    get ariaControls() {
+        return this.ariaHaspopup ? this.props.id : undefined;
+    }
+    get ariaDescribedby() {
+        if (this.role && this.role === 'tooltip') {
+            return this.props.open && this.props.id ? this.props.id : undefined;
+        }
+        return undefined;
+    }
+    get ariaExpanded() {
+        return this.ariaHaspopup.value ? `${this.props.open}` : undefined;
+    }
+    setup() {
+        const { role, triggerRef } = this.inject(td_popper_const_1.POPPER_INJECTION_KEY, undefined);
+        this.role = role;
+        this.triggerRef = triggerRef;
+        (0, use_forward_ref_1.useForwardRef)(triggerRef);
+    }
+    beforeDestroy() {
+        var _a;
+        (_a = this.virtualTriggerAriaStopWatch) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.virtualTriggerAriaStopWatch = undefined;
+        if (this.triggerRef && (0, utils_1.isElement)(this.triggerRef)) {
+            const el = this.triggerRef;
+            trigger_const_1.TRIGGER_ELE_EVENTS.forEach((eventName) => {
+                const handler = this.props[eventName];
+                if (handler) {
+                    // todo eventName  onClick
+                    el.removeEventListener(eventName.slice(2).toLowerCase(), handler);
+                }
+            });
+            this.triggerRef = undefined;
+        }
+    }
+    setVirtualRef(el) {
+        if (el) {
+            this.props.virtualRef = el;
+            this.triggerRef = el;
+        }
+    }
+    setTriggerRef(el, prevEl) {
+        var _a;
+        (_a = this.virtualTriggerAriaStopWatch) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.virtualTriggerAriaStopWatch = undefined;
+        if ((0, utils_1.isElement)(el)) {
+            trigger_const_1.TRIGGER_ELE_EVENTS.forEach((eventName) => {
+                var _a;
+                const handler = this.props[eventName];
+                if (handler) {
+                    el.addEventListener(eventName.slice(2).toLowerCase(), handler);
+                    (_a = prevEl === null || prevEl === void 0 ? void 0 : prevEl.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(prevEl, eventName.slice(2).toLowerCase(), handler);
+                }
+            });
+            // this.virtualTriggerAriaStopWatch = this.watch(
+            //   [ariaControls, ariaDescribedby, ariaHaspopup, ariaExpanded],
+            //   (watches) => {
+            //     ;[
+            //       'aria-controls',
+            //       'aria-describedby',
+            //       'aria-haspopup',
+            //       'aria-expanded',
+            //     ].forEach((key, idx) => {
+            //       isNil(watches[idx])
+            //         ? el.removeAttribute(key)
+            //         : el.setAttribute(key, watches[idx]!)
+            //     })
+            //   },
+            //   { immediate: true }
+            // )
+        }
+        if ((0, utils_1.isElement)(prevEl)) {
+            [
+                'aria-controls',
+                'aria-describedby',
+                'aria-haspopup',
+                'aria-expanded',
+            ].forEach((key) => prevEl.removeAttribute(key));
+        }
     }
 }
 exports.TdPopperTrigger = TdPopperTrigger;

package/src/components/feedback/td-popper/trigger/trigger.const.d.ts

@@ -0,0 +1 @@
+export declare const TRIGGER_ELE_EVENTS: readonly ["onMouseenter", "onMouseleave", "onClick", "onKeydown", "onFocus", "onBlur", "onContextmenu"];

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TRIGGER_ELE_EVENTS = void 0;
+exports.TRIGGER_ELE_EVENTS = [
+    'onMouseenter',
+    'onMouseleave',
+    'onClick',
+    'onKeydown',
+    'onFocus',
+    'onBlur',
+    'onContextmenu',
+];

package/src/components/feedback/td-popper/trigger/trigger.interface.d.ts

@@ -4,6 +4,7 @@ export interface ITdPopperTrigger extends IUI {
 }
 type IEvent = (event: Event) => void;
 export interface ITdPopperTriggerConfig extends IUIConfig {
+    virtualRef?: HTMLElement;
     virtualTriggering?: boolean;
     onMouseenter?: IEvent;
     onMouseleave?: IEvent;

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

@@ -6,7 +6,7 @@ class TdTooltipContent extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdTooltipContent';
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdTooltipContent = TdTooltipContent;

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

@@ -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.useParams(params);
     }
 }
 exports.TdTooltip = TdTooltip;

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

@@ -6,7 +6,7 @@ class TdTooltipTrigger extends ui_abstract_1.UI {
     constructor(params = {}) {
         super(params);
         this.className = 'TdTooltipTrigger';
-        this.props = this.setParams(params);
+        this.props = this.useParams(params);
     }
 }
 exports.TdTooltipTrigger = TdTooltipTrigger;

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

@@ -7,7 +7,7 @@ class CheckboxGroup extends framework_1.TypeDiv {
     constructor() {
         super();
         this.className = 'CheckboxGroup';
-        this.ctrl.addAttrName('checkbox-group');
+        this.attr.addName('checkbox-group');
         this.childNodes = [];
         this.value = [];
     }
@@ -17,7 +17,7 @@ class CheckboxGroup extends framework_1.TypeDiv {
         const random = Math.random();
         options.forEach((opt) => {
             const optObj = new checkbox_option_class_1.CheckboxOption();
-            optObj.input.ctrl.addAttrObj({
+            optObj.input.attr.addObj({
                 name: 'checkbox' + random,
                 label: opt.label,
                 value: opt.value,
@@ -37,21 +37,20 @@ class CheckboxGroup extends framework_1.TypeDiv {
             // console.error('value is ', value);
             this.value = value.split(',');
             this.childNodes.forEach((optObj) => {
-                var _a;
-                if (this.value.indexOf(String((_a = optObj.input.props.attrObj) === null || _a === void 0 ? void 0 : _a.value)) !== -1) {
-                    optObj.input.ctrl.setAttrObj({
+                if (this.value.indexOf(String(optObj.input.attr.get('value'))) !== -1) {
+                    optObj.input.attr.setObj({
                         checked: true
                     });
                 }
                 else {
-                    optObj.input.ctrl.removeAttribute('checked');
+                    optObj.input.attr.remove('checked');
                 }
             });
         }
         else {
             // console.error('value is ', value);
             this.childNodes.forEach((optObj) => {
-                optObj.input.ctrl.removeAttribute('checked');
+                optObj.input.attr.remove('checked');
             });
         }
     }

package/src/components/form/checkbox-group/checkbox-option/checkbox-option.class.d.ts

@@ -8,5 +8,5 @@ export declare class CheckboxOption extends TypeSpan implements ICheckboxOption
     childNodes: [Input, TextNode];
     textNode: TextNode;
     constructor();
-    initEvents(): void;
+    setup(): void;
 }

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

@@ -1,14 +1,13 @@
 "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() {
         super();
         this.className = 'CheckboxOption';
         this.input = new framework_1.Input({ parent: this });
-        this.input.ctrl.addAttrObj({
+        this.input.attr.addObj({
             type: 'checkbox'
             // name: optionSetting.name,
             // label: opt.label,
@@ -18,27 +17,29 @@ class CheckboxOption extends framework_1.TypeSpan {
         this.textNode = new framework_1.TextNode();
         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
-                    });
+    setup() {
+        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.attr.setObj({
+                            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.attr.remove('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.d.ts

@@ -18,5 +18,5 @@ export declare abstract class PropertyCascade extends FieldItem {
     set fieldSetting(value: IOptionSetting | undefined);
     resetCascadeConfigResultValue(value: string | number | boolean): void;
     resetCascadeConfig(optionSetting: IOptionSetting): void;
-    initEvents(): void;
+    setup(): void;
 }

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");
@@ -13,10 +12,10 @@ const field_item_style_1 = require("../field-item.style");
 class PropertyCascade extends field_item_abstract_1.FieldItem {
     constructor(labelText = '二级级联') {
         super(labelText);
-        this.ctrl.addAttrName('cascade-property');
+        this.attr.addName('cascade-property');
         this.cascadeDiv = new framework_1.Div();
-        this.cascadeDiv.ctrl.addAttrName('cascade');
-        this.cascadeDiv.ctrl.addStyleObj({
+        this.cascadeDiv.attr.addName('cascade');
+        this.cascadeDiv.style.addObj({
             height: '100%',
             lineHeight: '32px',
             textAlign: 'center',
@@ -35,16 +34,16 @@ class PropertyCascade extends field_item_abstract_1.FieldItem {
         });
         // 单独的方法实现
         this.firstStageSelectObj = new field_select_class_1.FieldSelect();
-        this.firstStageSelectObj.ctrl.addAttrName('first-stage-select');
-        this.firstStageSelectObj.ctrl.setStyleObj(Object.assign({}, field_item_style_1.itemContentStyle, {
+        this.firstStageSelectObj.attr.addName('first-stage-select');
+        this.firstStageSelectObj.style.setObj(Object.assign({}, field_item_style_1.itemContentStyle, {
             width: '100%',
             margin: '5px 0'
             // borderRadius: '4px 0 0 4px',
             // borderRight: 'none',
         }));
         this.secondStageSelectObj = new field_select_class_1.FieldSelect();
-        this.secondStageSelectObj.ctrl.addAttrName('second-stage-select');
-        this.secondStageSelectObj.ctrl.setStyleObj(Object.assign({}, field_item_style_1.itemContentStyle, {
+        this.secondStageSelectObj.attr.addName('second-stage-select');
+        this.secondStageSelectObj.style.setObj(Object.assign({}, field_item_style_1.itemContentStyle, {
             width: '100%'
         }));
         this.cascadeDiv.childNodes = [
@@ -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);
             }
         }
     }
@@ -151,40 +150,46 @@ class PropertyCascade extends field_item_abstract_1.FieldItem {
             // this.secondStageSelectObj.setSelectedValue(secondStageValue);
         }
     }
-    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;
+    setup() {
+        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;