@type-dom/ui 0.0.7 → 0.0.9

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

@@ -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");
@@ -9,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',
@@ -33,18 +32,20 @@ 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() {
-        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);
-        }));
+    setup() {
+        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;

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;
 }

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

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PropertyOptions = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
 const field_select_class_1 = require("../../../form/field-select/field-select.class");
 const field_item_abstract_1 = require("../field-item.abstract");
 const field_item_style_1 = require("../field-item.style");
 class PropertyOptions extends field_item_abstract_1.FieldItem {
+    // optionsConfigObservable: Observable<Event>;
     constructor(labelText = '选项列表') {
         super(labelText);
-        this.ctrl.addAttrName('option-property');
+        this.attr.addName('option-property');
         this.selectConfigDiv = new framework_1.Div();
-        this.selectConfigDiv.ctrl.addAttrName('select-config');
-        this.selectConfigDiv.ctrl.addStyleObj({
+        this.selectConfigDiv.attr.addName('select-config');
+        this.selectConfigDiv.style.addObj({
             height: '100%',
             lineHeight: '32px',
             textAlign: 'center',
@@ -31,20 +31,20 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
             width: 'calc(100% - 100px)'
         });
         this.selectDiv = new framework_1.Div();
-        this.selectDiv.ctrl.addStyleObj({
+        this.selectDiv.style.addObj({
             display: 'flex',
             flexDirection: 'row'
         });
         // 单独的方法实现
         this.selectObj = new field_select_class_1.FieldSelect();
-        this.selectObj.ctrl.addAttrName('select');
-        this.selectObj.ctrl.addStyleObj(Object.assign({}, field_item_style_1.itemContentStyle, {
+        this.selectObj.attr.addName('select');
+        this.selectObj.style.addObj(Object.assign({}, field_item_style_1.itemContentStyle, {
             width: '100%',
             borderRadius: '4px 0 0 4px',
             borderRight: 'none'
         }));
         this.btn = new framework_1.Button({ parent: this.selectDiv });
-        this.btn.ctrl.addStyleObj({
+        this.btn.style.addObj({
             // position: 'absolute',
             // right: '10px',
             padding: '8px 3px 4px',
@@ -59,13 +59,13 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         this.selectDiv.childNodes = [this.selectObj, this.btn];
         this.firstDiv = new framework_1.Div();
         const labelDiv = new framework_1.Div();
-        labelDiv.ctrl.addStyleObj({
+        labelDiv.style.addObj({
             display: 'inline-block',
             width: '50%'
         });
         labelDiv.addChild(new framework_1.TextNode('标签'));
         const valueDiv = new framework_1.Div();
-        valueDiv.ctrl.addStyleObj({
+        valueDiv.style.addObj({
             display: 'inline-block',
             width: '50%'
         });
@@ -77,7 +77,7 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
             this.firstDiv,
             this.optionsContent
         ];
-        this.button.ctrl.addStyleObj({
+        this.button.style.addObj({
             position: 'absolute',
             right: '10px',
             padding: '8px 3px 4px',
@@ -90,7 +90,7 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         this.childNodes = [this.label, this.selectConfigDiv, this.button];
         // 创建添加按钮
         // this.addDiv = new Div(this.selectConfigDiv);
-        // this.addDiv.ctrl.setStyleObj({
+        // this.addDiv.style.setObj({
         //   textAlign: 'center',
         //   marginTop: '-10px',
         //   display: 'none', // 现在不需要动态添加选项。
@@ -98,7 +98,7 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         // const svg = new AddSvg({ parent: this.addDiv });
         // svg.addAttribute('width', '24px');
         // this.addDiv.addChild(svg);
-        this.optionsConfigObservable = (0, rxjs_1.fromEvent)(this.btn.dom, 'click');
+        // this.optionsConfigObservable = fromEvent(this.btn.dom, 'click');
     }
     get optionSetting() {
         var _a;
@@ -122,10 +122,11 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         }
     }
     resetOptionSettingResultValue(value) {
-        // AppRoot.selectedControl?.attrObj.optionSetting''
+        // AppRoot.selectedControl?.attr.get('optionSetting')''
         // this.optionSetting = Object.assign(this.optionSetting, { resultValue: value });
-        if (this.optionSetting)
+        if (this.optionSetting) {
             this.optionSetting.resultValue = value;
+        }
     }
     // vue项目中返回的是选中的项目。只有一层，没有两层。
     resetConfig(optionSetting) {
@@ -152,23 +153,23 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         selectedOption.options.forEach((opt, optIndex) => {
             const optDiv = new framework_1.Div();
             const labelDiv = new framework_1.Div();
-            labelDiv.ctrl.addStyleObj(styleObj);
-            labelDiv.ctrl.setAttrObj({
+            labelDiv.style.addObj(styleObj);
+            labelDiv.attr.setObj({
                 // contenteditable: 'true', // 现在选项不需要编辑
                 optIndex,
                 optType: 'label'
             });
             labelDiv.addChild(new framework_1.TextNode(opt.label));
             const valueDiv = new framework_1.Div();
-            valueDiv.ctrl.addStyleObj(styleObj);
-            valueDiv.ctrl.addAttrObj({
+            valueDiv.style.addObj(styleObj);
+            valueDiv.attr.addObj({
                 // contenteditable: 'true', // 现在选项不需要编辑
                 optIndex,
                 optType: 'value'
             });
             valueDiv.addChild(new framework_1.TextNode(String(opt.value)));
             // const deleteDiv = new Div(optDiv);
-            // deleteDiv.ctrl.setStyleObj({
+            // deleteDiv.style.setObj({
             //   display: 'none',
             //   // display: 'inline-block', // 现在不需要动态删除选项
             //   width: '10%',
@@ -178,7 +179,7 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
             //   // marginTop: '10px',
             // });
             // const svg = new DeleteSvg(deleteDiv);
-            // svg.ctrl.setStyleObj({
+            // svg.style.setObj({
             //   width: '20',
             // });
             // deleteDiv.appendChild(svg);
@@ -201,18 +202,18 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         // config.options设置
         options.forEach((opt, optIndex) => {
             const optDiv = new framework_1.Div();
-            optDiv.ctrl.setAttrName('option');
+            optDiv.attr.setName('option');
             const labelDiv = new framework_1.Div();
-            labelDiv.ctrl.addStyleObj(styleObj);
-            labelDiv.ctrl.setAttrObj({
+            labelDiv.style.addObj(styleObj);
+            labelDiv.attr.setObj({
                 // contenteditable: 'true', // 现在选项不需要编辑
                 optIndex,
                 optType: 'label'
             });
             labelDiv.addChild(new framework_1.TextNode(opt.label));
             const valueDiv = new framework_1.Div();
-            valueDiv.ctrl.addStyleObj(styleObj);
-            valueDiv.ctrl.addAttrObj({
+            valueDiv.style.addObj(styleObj);
+            valueDiv.attr.addObj({
                 optIndex,
                 optType: 'value'
             });
@@ -221,28 +222,30 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
             this.optionsContent.appendChild(optDiv);
         });
     }
-    initEvents() {
-        this.subscriptions.push(this.optionsConfigObservable.subscribe(() => {
-            console.log('this.btn click . ');
-            console.log('this.optionsConfigObservable is ', this.optionsConfigObservable);
-        }), 
-        // todo 没有改变值 ？？？？？ 是否要加click监听
-        (0, rxjs_1.fromEvent)(this.selectObj.dom, 'change').subscribe(() => {
-            var _a, _b;
-            console.log('this.selectObj.dom change . ');
-            console.log('this.selectObj.dom.value is ', this.selectObj.dom.value);
-            const selectedOption = (_b = (_a = this.optionSetting) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.find((opt) => String(opt.value) === this.selectObj.dom.value);
-            if (!this.optionSetting) {
-                throw Error('无法获取optionSetting');
+    setup() {
+        this.btn.addEvents({
+            click: () => {
+                console.log('this.btn click . ');
             }
-            if (selectedOption && selectedOption.options) {
-                this.resetOptionSettingResultValue(selectedOption.value);
-                console.log('this.optionSetting is ', this.optionSetting);
-                console.log('selectOption is ', selectedOption);
-                this.resetOptions(selectedOption.options);
-                // this.resetControl();
+        });
+        this.selectObj.addEvents({
+            change: () => {
+                var _a, _b;
+                console.log('this.selectObj.dom change . ');
+                console.log('this.selectObj.dom.value is ', this.selectObj.dom.value);
+                const selectedOption = ((_a = this.optionSetting) === null || _a === void 0 ? void 0 : _a.options) && ((_b = this.optionSetting) === null || _b === void 0 ? void 0 : _b.options.find((opt) => String(opt.value) === this.selectObj.dom.value));
+                if (!this.optionSetting) {
+                    throw Error('无法获取optionSetting');
+                }
+                if (selectedOption && selectedOption.options) {
+                    this.resetOptionSettingResultValue(selectedOption.value);
+                    console.log('this.optionSetting is ', this.optionSetting);
+                    console.log('selectOption is ', selectedOption);
+                    this.resetOptions(selectedOption.options);
+                    // this.resetControl();
+                }
             }
-        }));
+        });
     }
 }
 exports.PropertyOptions = PropertyOptions;

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

@@ -11,5 +11,5 @@ export declare abstract class FieldRadio extends FieldItem {
     abstract reset(value?: string): void;
     setOptions(options: IOptionSet[]): void;
     resetResultValue(value: string): void;
-    initEvents(): void;
+    mounted(): void;
 }

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldRadio = void 0;
-const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const field_item_abstract_1 = require("../field-item.abstract");
 class FieldRadio extends field_item_abstract_1.FieldItem {
@@ -28,32 +27,28 @@ class FieldRadio extends field_item_abstract_1.FieldItem {
             else {
                 button = this.optionDiv.childNodes[index];
             }
-            button.ctrl.addStyleObj({
+            button.style.addObj({
                 height: '32px',
                 borderRadius: '0',
                 border: '1px solid #000'
             });
-            button.ctrl.addAttrObj({
+            button.attr.addObj({
                 type: 'radio',
                 value: option.value,
                 checked: option.checked
             });
             if (option.checked) {
-                // button.styleObj.backgroundColor = '#00f';
-                // button.styleObj.color = '#fff';
-                button.ctrl.addStyleObj({
+                button.style.addObj({
                     backgroundColor: '#00f',
                     color: '#fff',
                 });
                 this.selectedOpt = button;
             }
             else {
-                button.ctrl.addStyleObj({
+                button.style.addObj({
                     backgroundColor: '#fff',
                     color: '#000'
                 });
-                // button.styleObj.backgroundColor = '#fff';
-                // button.styleObj.color = '#000';
             }
             // span.childNodes.push(label, inputRadio);
             // this.optionDiv.childNodes.push(button);
@@ -70,37 +65,38 @@ class FieldRadio extends field_item_abstract_1.FieldItem {
         this.setOptions(this.params.options);
         this.optionDiv.mount();
     }
-    initEvents() {
+    mounted() {
         this.optionDiv.childNodes.forEach((btn) => {
             if (btn.dom === undefined) {
                 return;
             }
-            this.subscriptions.push((0, rxjs_1.fromEvent)(btn.dom, 'click').subscribe(() => {
-                var _a;
-                // if (OfdEditor.mode === 'read') {
-                //   return;
-                // }
-                if (this.selectedOpt) {
-                    this.selectedOpt.ctrl.setStyleObj({
-                        backgroundColor: '#fff',
-                        color: '#000'
-                    });
-                    this.selectedOpt.ctrl.setAttribute('checked', false);
-                }
-                this.selectedOpt = btn;
-                if (btn instanceof framework_1.TypeHtml) {
-                    btn.ctrl.setStyleObj({
-                        backgroundColor: '#00f',
-                        color: '#fff'
-                    });
-                    btn.ctrl.setAttribute('checked', true);
-                    this.resultValue = (_a = btn.props.attrObj) === null || _a === void 0 ? void 0 : _a.value;
-                    this.reset(this.resultValue);
-                }
-                else {
-                    return;
-                }
-            }));
+            if (btn instanceof framework_1.TypeElement) {
+                btn.addEvent('click', () => {
+                    // if (OfdEditor.mode === 'read') {
+                    //   return;
+                    // }
+                    if (this.selectedOpt) {
+                        this.selectedOpt.style.setObj({
+                            backgroundColor: '#fff',
+                            color: '#000'
+                        });
+                        this.selectedOpt.attr.set('checked', false);
+                    }
+                    this.selectedOpt = btn;
+                    if (btn instanceof framework_1.TypeHtml) {
+                        btn.style.setObj({
+                            backgroundColor: '#00f',
+                            color: '#fff'
+                        });
+                        btn.attr.set('checked', true);
+                        this.resultValue = btn.attr.get('value');
+                        this.reset(this.resultValue);
+                    }
+                    else {
+                        return;
+                    }
+                });
+            }
         });
     }
 }

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

@@ -7,5 +7,5 @@ export declare abstract class FieldSelect extends FieldItem {
     select: Select;
     mode: string;
     protected constructor(labelText?: string);
-    initEvents(): void;
+    setup(): void;
 }

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldSelect = void 0;
-const rxjs_1 = require("rxjs");
 const select_class_1 = require("../../select/select.class");
 const field_item_abstract_1 = require("../field-item.abstract");
 const field_item_style_1 = require("../field-item.style");
@@ -10,33 +9,34 @@ class FieldSelect extends field_item_abstract_1.FieldItem {
         super(labelText);
         this.mode = 'editor';
         this.select = new select_class_1.Select();
-        this.select.props.styleObj = Object.assign({}, field_item_style_1.itemContentStyle);
-        this.select.props.attrObj = {
+        this.select.style.addObj(Object.assign({}, field_item_style_1.itemContentStyle));
+        this.select.attr.addObj({
             name: 'property-select'
             // type: 'text',
             // placeholder: placeholder,
-        };
+        });
         if (this.mode === 'read') {
-            this.select.ctrl.addAttrObj({
+            this.select.attr.addObj({
                 disabled: true
             });
         }
         this.childNodes = [this.label, this.select, this.button];
     }
-    initEvents() {
-        this.subscriptions.push(
-        // 如果只有一个选项时，监听change，input有问题。
-        (0, rxjs_1.fromEvent)(this.select.dom, 'click').subscribe((evt) => {
-            console.log('this.select.dom click, event is ', evt);
-            console.log('this.select.dom.value is ', this.select.dom.value);
-            // console.log(this.reset);
-            this.reset(this.select.dom.value);
-        }), (0, rxjs_1.fromEvent)(this.select.dom, 'change').subscribe((evt) => {
-            console.log('this.select.dom change, event is ', evt);
-            console.log('this.select.dom.value is ', this.select.dom.value);
-            // console.log(this.reset);
-            this.reset(this.select.dom.value);
-        }));
+    setup() {
+        this.select.addEvents({
+            click: (evt) => {
+                console.log('this.select.dom click, event is ', evt);
+                console.log('this.select.dom.value is ', this.select.dom.value);
+                // console.log(this.reset);
+                this.reset(this.select.dom.value);
+            },
+            change: (evt) => {
+                console.log('this.select.dom change, event is ', evt);
+                console.log('this.select.dom.value is ', this.select.dom.value);
+                // console.log(this.reset);
+                this.reset(this.select.dom.value);
+            }
+        });
     }
 }
 exports.FieldSelect = FieldSelect;

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

@@ -8,7 +8,7 @@ class FieldSpan extends field_item_abstract_1.FieldItem {
     constructor(labelText = '控件名称') {
         super(labelText);
         this.content = new framework_1.Span({ parent: this });
-        this.content.props.styleObj = {
+        this.content.style.addObj({
             height: '28px',
             lineHeight: '28px',
             textAlign: 'center',
@@ -27,13 +27,13 @@ class FieldSpan extends field_item_abstract_1.FieldItem {
             // -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
             transition: 'border-color .2s cubic-bezier(.645,.045,.355,1)',
             width: 'calc(100% - 80px)'
-        };
-        this.props.attrObj = {
+        });
+        this.attr.addObj({
             name: 'field-span'
-        };
+        });
         this.textNode = new framework_1.TextNode('显示');
         this.content.addChild(this.textNode);
-        this.button.ctrl.setStyleObj({
+        this.button.style.setObj({
             // position: 'absolute',
             // right: '10px',
             padding: '8px 3px 4px',

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

@@ -8,7 +8,7 @@ class FieldTextarea extends field_item_abstract_1.FieldItem {
     constructor(labelText = '控件名称', placeholder = '请输入') {
         super(labelText);
         this.mode = 'edit';
-        this.ctrl.addStyleObj({
+        this.style.addObj({
             display: 'block', // 不是 flex
             marginBottom: '20px'
         });
@@ -40,12 +40,12 @@ class FieldTextarea extends field_item_abstract_1.FieldItem {
         console.log('this.parent is ', this.parent);
         console.log('this.mode is ', this.mode);
         if (this.mode === 'read') {
-            this.content.ctrl.addAttrObj({
+            this.content.attr.addObj({
                 disabled: true
             });
         }
         this.button.textNode.setText('确定');
-        this.button.ctrl.addStyleObj({
+        this.button.style.addObj({
             height: '24px',
             float: 'right',
             display: 'block'
@@ -53,10 +53,10 @@ class FieldTextarea 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);
     }
 }

package/src/components/form/field-select/field-select.class.d.ts

@@ -8,5 +8,5 @@ export declare class FieldSelect extends TypeSelect implements IFieldSelect {
     constructor();
     setOptions(options: IOptionSet[], value: string | number | boolean): void;
     resetOptions(options: IOptionSet[], value: string | number | boolean): void;
-    initEvents(): void;
+    setup(): void;
 }