@type-dom/ui 0.0.8 → 0.0.10

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.setProps(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.setProps(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.setProps(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.setProps(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.setProps(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.setProps(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

@@ -7,7 +7,7 @@ class CheckboxOption extends framework_1.TypeSpan {
         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,
@@ -17,7 +17,7 @@ class CheckboxOption extends framework_1.TypeSpan {
         this.textNode = new framework_1.TextNode();
         this.childNodes = [this.input, this.textNode];
     }
-    initEvents() {
+    setup() {
         this.input.addEvents({
             click: () => {
                 var _a, _b, _c, _d;
@@ -27,13 +27,13 @@ class CheckboxOption extends framework_1.TypeSpan {
                 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({
+                        this.input.attr.setObj({
                             checked: true
                         });
                     }
                 }
                 else {
-                    this.input.ctrl.removeAttribute('checked');
+                    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));
                     }

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

@@ -12,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',
@@ -34,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 = [
@@ -150,7 +150,7 @@ class PropertyCascade extends field_item_abstract_1.FieldItem {
             // this.secondStageSelectObj.setSelectedValue(secondStageValue);
         }
     }
-    initEvents() {
+    setup() {
         this.firstStageSelectObj.addEvents({
             change: () => {
                 var _a, _b;

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

@@ -6,7 +6,7 @@ const field_item_style_1 = require("./field-item.style");
 class FieldItem extends framework_1.TypeDiv {
     constructor(labelText) {
         super();
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             // border: '1px solid #1890ff',
             // background: '#f3f9ff',
             display: 'flex',
@@ -23,9 +23,9 @@ class FieldItem extends framework_1.TypeDiv {
         //   this.label.textNode.setText(labelText);
         //   this.label.childNodes.push(this.label.textNode);
         // }
-        this.label.ctrl.addStyleObj(Object.assign({}, field_item_style_1.labelStyle));
+        this.label.style.addObj(Object.assign({}, field_item_style_1.labelStyle));
         this.button = new framework_1.Button({ parent: this });
-        this.button.ctrl.addStyleObj({
+        this.button.style.addObj({
             height: '28px',
             background: '#ffffff',
             borderWidth: '1px',

package/src/components/form/field-item/input/field-input.abstract.d.ts

@@ -8,5 +8,5 @@ export declare abstract class FieldInput extends FieldItem {
     protected constructor(labelText?: string, placeholder?: string);
     resetInputPlaceholder(placeholder: string): void;
     resetInputValue(value?: string | number): void;
-    initEvents(): void;
+    setup(): void;
 }

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

@@ -8,17 +8,17 @@ class FieldInput extends field_item_abstract_1.FieldItem {
     constructor(labelText = '控件名称', placeholder = '请输入') {
         super(labelText);
         this.content = new framework_1.Input({ parent: this });
-        this.content.props.styleObj = Object.assign({}, field_item_style_1.itemContentStyle);
-        this.content.props.attrObj = {
+        this.content.style.addObj(field_item_style_1.itemContentStyle);
+        this.content.attr.addObj({
             type: 'text',
             placeholder: placeholder
-        };
+        });
         if (this.mode === 'read') {
-            this.content.ctrl.addAttrObj({
+            this.content.attr.addObj({
                 disabled: true
             });
         }
-        // this.button.ctrl.addStyleObj({
+        // this.button.style.addObj({
         //   // position: 'absolute',
         //   // right: '10px',
         //   padding: '8px 3px 4px',
@@ -32,13 +32,13 @@ class FieldInput extends field_item_abstract_1.FieldItem {
         this.childNodes = [this.label, this.content, this.button];
     }
     resetInputPlaceholder(placeholder) {
-        this.content.ctrl.setAttribute('placeholder', placeholder);
+        this.content.attr.set('placeholder', placeholder);
     }
     resetInputValue(value = '') {
-        this.content.ctrl.setAttribute('value', value);
+        this.content.attr.set('value', value);
         this.content.dom.value = String(value);
     }
-    initEvents() {
+    setup() {
         this.content.addEvents({
             input: () => {
                 // console.log('this.input input, event is ', evt);

package/src/components/form/field-item/options/field-options.abstract.d.ts

@@ -1,4 +1,3 @@
-import { Observable } from 'rxjs';
 import { Button, Div, Label, IOptionSetting, IOptionSet } from '@type-dom/framework';
 import { FieldItem } from '../field-item.abstract';
 export declare abstract class PropertyOptions extends FieldItem {
@@ -10,12 +9,11 @@ export declare abstract class PropertyOptions extends FieldItem {
     optionsContent: Div;
     protected btn: Button;
     private readonly dotsSvg;
-    optionsConfigObservable: Observable<Event>;
     protected constructor(labelText?: string);
     get optionSetting(): IOptionSetting | undefined;
     set optionSetting(optConfig: IOptionSetting | undefined);
     resetOptionSettingResultValue(value: string | number | boolean): void;
     resetConfig(optionSetting: IOptionSetting): void;
     resetOptions(options: IOptionSet[]): void;
-    initEvents(): void;
+    setup(): void;
 }