@type-dom/ui 0.0.3 → 0.0.5

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

@@ -13,10 +13,10 @@ const field_item_style_1 = require("../field-item.style");
 class PropertyCascade extends field_item_abstract_1.FieldItem {
     constructor(labelText = '二级级联') {
         super(labelText);
-        this.addAttrName('cascade-property');
+        this.ctrl.addAttrName('cascade-property');
         this.cascadeDiv = new framework_1.Div();
-        this.cascadeDiv.addAttrName('cascade');
-        this.cascadeDiv.addStyleObj({
+        this.cascadeDiv.ctrl.addAttrName('cascade');
+        this.cascadeDiv.ctrl.addStyleObj({
             height: '100%',
             lineHeight: '32px',
             textAlign: 'center',
@@ -27,7 +27,7 @@ class PropertyCascade extends field_item_abstract_1.FieldItem {
             // -webkit-box-sizing: border-box;
             boxSizing: 'border-box',
             color: '#606266',
-            display: framework_1.StyleDisplay.inlineBlock,
+            display: 'inlineBlock',
             outline: '0',
             // -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
             transition: 'border-color .2s cubic-bezier(.645,.045,.355,1)',
@@ -35,19 +35,22 @@ class PropertyCascade extends field_item_abstract_1.FieldItem {
         });
         // 单独的方法实现
         this.firstStageSelectObj = new field_select_class_1.FieldSelect();
-        this.firstStageSelectObj.addAttrName('first-stage-select');
-        this.firstStageSelectObj.setStyleObj(Object.assign({}, field_item_style_1.itemContentStyle, {
+        this.firstStageSelectObj.ctrl.addAttrName('first-stage-select');
+        this.firstStageSelectObj.ctrl.setStyleObj(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.addAttrName('second-stage-select');
-        this.secondStageSelectObj.setStyleObj(Object.assign({}, field_item_style_1.itemContentStyle, {
+        this.secondStageSelectObj.ctrl.addAttrName('second-stage-select');
+        this.secondStageSelectObj.ctrl.setStyleObj(Object.assign({}, field_item_style_1.itemContentStyle, {
             width: '100%'
         }));
-        this.cascadeDiv.childNodes = [this.firstStageSelectObj, this.secondStageSelectObj];
+        this.cascadeDiv.childNodes = [
+            this.firstStageSelectObj,
+            this.secondStageSelectObj
+        ];
         this.childNodes = [this.label, this.cascadeDiv, this.button];
     }
     get fieldSetting() {
@@ -59,7 +62,8 @@ class PropertyCascade extends field_item_abstract_1.FieldItem {
                 resultValue: fieldSetting.resultValue,
                 options: []
             };
-            if (fieldSetting.options[0].options === undefined) { // 如果只有一级，应该是老数据，要重新组装
+            if (fieldSetting.options[0].options === undefined) {
+                // 如果只有一级，应该是老数据，要重新组装
                 const values = [];
                 fieldSetting.options.forEach((opt) => {
                     if (opt.value.indexOf('.') === -1) {
@@ -79,9 +83,10 @@ class PropertyCascade extends field_item_abstract_1.FieldItem {
                     optionSetting.options.push(Object.assign({}, JSON.parse(value), { options: [] }));
                 });
                 fieldSetting.options.forEach((opt2) => {
-                    optionSetting.options.forEach(opt1 => {
+                    optionSetting.options.forEach((opt1) => {
                         var _a;
-                        if (String(opt1.value) === String(opt2.value.split('.')[0])) {
+                        if (String(opt1.value) ===
+                            String(opt2.value.split('.')[0])) {
                             (_a = opt1.options) === null || _a === void 0 ? void 0 : _a.push(opt2);
                         }
                     });
@@ -123,7 +128,8 @@ class PropertyCascade extends field_item_abstract_1.FieldItem {
         // this.cascadeDiv.clearChildNodes();
         // this.cascadeDiv.clearChildDom();
         this.cascadeConfig = optionSetting;
-        if (optionSetting.resultValue === 0) { // 如果第1级还没有选择
+        if (optionSetting.resultValue === 0) {
+            // 如果第1级还没有选择
             this.firstStageSelectObj.resetOptions(optionSetting.options, optionSetting.resultValue);
             //  todo 第2级，应该没有可选项。
             this.secondStageSelectObj.resetOptions([], 0);
@@ -134,7 +140,7 @@ class PropertyCascade extends field_item_abstract_1.FieldItem {
             const firstStageValue = String(optionSetting.resultValue).split('.')[0];
             this.firstStageSelectObj.resetOptions(optionSetting.options, firstStageValue);
             // const firstStageValue = optionSetting.resultValue.split('.')[0];
-            const selectedOption = optionSetting.options.find(opt => opt.value === firstStageValue);
+            const selectedOption = optionSetting.options.find((opt) => opt.value === firstStageValue);
             if (!(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.options)) {
                 // throw Error('选项有问题'); // 会阻塞修改单元格的控件类型
                 this.secondStageSelectObj.resetOptions([], 0);
@@ -150,7 +156,7 @@ class PropertyCascade extends field_item_abstract_1.FieldItem {
             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);
+            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');
             }
@@ -159,10 +165,12 @@ class PropertyCascade extends field_item_abstract_1.FieldItem {
                 this.resetCascadeConfigResultValue(selectedOption.value);
             }
             else {
-                this.secondStageSelectObj.resetOptions([{
+                this.secondStageSelectObj.resetOptions([
+                    {
                         label: '请先选择上级',
                         value: 0
-                    }], 0);
+                    }
+                ], 0);
                 return;
             }
             if (selectedOption && selectedOption.options) {

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

@@ -1,8 +1,12 @@
-import { Div, Input, Label, Span, Textarea, TypeComponent, Button } from '@type-dom/framework';
+import { Div, Input, Label, Span, Textarea, Button, TypeDiv } from '@type-dom/framework';
 import { Select } from '../select/select.class';
 import { IFieldItem } from './field-item.interface';
-export declare abstract class FieldItem extends TypeComponent implements IFieldItem {
-    abstract childNodes: [Label, ...(Span | Input | Textarea | Select | Div)[], Button];
+export declare abstract class FieldItem extends TypeDiv implements IFieldItem {
+    abstract childNodes: [
+        Label,
+        ...(Span | Input | Textarea | Select | Div)[],
+        Button
+    ];
     label: Label;
     button: Button;
     protected constructor(labelText: string);

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

@@ -3,24 +3,29 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldItem = void 0;
 const framework_1 = require("@type-dom/framework");
 const field_item_style_1 = require("./field-item.style");
-class FieldItem extends framework_1.TypeComponent {
+class FieldItem extends framework_1.TypeDiv {
     constructor(labelText) {
         super();
-        this.styleObj = {
+        this.ctrl.addStyleObj({
             // border: '1px solid #1890ff',
             // background: '#f3f9ff',
-            display: framework_1.StyleDisplay.flex,
+            display: 'flex',
             flexDirection: 'row',
             padding: '10px 0',
             // marginBottom: '10px!important',
             fontSize: '14px'
-        };
-        this.label = new framework_1.Label({ parent: this });
-        this.label.textNode.setText(labelText);
-        this.label.childNodes.push(this.label.textNode);
-        this.label.addStyleObj(Object.assign({}, field_item_style_1.labelStyle));
+        });
+        this.label = new framework_1.Label({
+            parent: this,
+            text: labelText
+        });
+        // if (this.label?.textNode) {
+        //   this.label.textNode.setText(labelText);
+        //   this.label.childNodes.push(this.label.textNode);
+        // }
+        this.label.ctrl.addStyleObj(Object.assign({}, field_item_style_1.labelStyle));
         this.button = new framework_1.Button({ parent: this });
-        this.button.addStyleObj({
+        this.button.ctrl.addStyleObj({
             height: '28px',
             background: '#ffffff',
             borderWidth: '1px',

package/src/components/form/field-item/field-item.style.d.ts

@@ -1,3 +1,3 @@
-import { IStyle } from '@type-dom/framework';
+import { IStyle } from '@type-dom/css-type';
 export declare const labelStyle: Partial<IStyle>;
 export declare const itemContentStyle: Partial<IStyle>;

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.itemContentStyle = exports.labelStyle = void 0;
-const framework_1 = require("@type-dom/framework");
 exports.labelStyle = {
     width: '80px',
     lineHeight: '28px',
@@ -26,7 +25,7 @@ exports.itemContentStyle = {
     // -webkit-box-sizing: border-box;
     boxSizing: 'border-box',
     color: '#606266',
-    display: framework_1.StyleDisplay.inlineBlock,
+    display: 'inlineBlock',
     fontSize: 'inherit',
     outline: '0',
     // padding: '0 5px',

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

@@ -1,8 +1,7 @@
-import { TypeHtml, Input, Label, Button } from '@type-dom/framework';
+import { Input, Label, Button } from '@type-dom/framework';
 import { FieldItem } from '../field-item.abstract';
 export declare abstract class FieldInput extends FieldItem {
     mode?: string;
-    parent?: TypeHtml;
     abstract reset(value?: string): void;
     childNodes: [Label, Input, Button];
     content: Input;

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

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

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

@@ -10,10 +10,10 @@ const field_item_style_1 = require("../field-item.style");
 class PropertyOptions extends field_item_abstract_1.FieldItem {
     constructor(labelText = '选项列表') {
         super(labelText);
-        this.addAttrName('option-property');
+        this.ctrl.addAttrName('option-property');
         this.selectConfigDiv = new framework_1.Div();
-        this.selectConfigDiv.addAttrName('select-config');
-        this.selectConfigDiv.addStyleObj({
+        this.selectConfigDiv.ctrl.addAttrName('select-config');
+        this.selectConfigDiv.ctrl.addStyleObj({
             height: '100%',
             lineHeight: '32px',
             textAlign: 'center',
@@ -24,27 +24,27 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
             // -webkit-box-sizing: border-box;
             boxSizing: 'border-box',
             color: '#606266',
-            display: framework_1.StyleDisplay.inlineBlock,
+            display: 'inlineBlock',
             outline: '0',
             // -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
             transition: 'border-color .2s cubic-bezier(.645,.045,.355,1)',
             width: 'calc(100% - 100px)'
         });
         this.selectDiv = new framework_1.Div();
-        this.selectDiv.addStyleObj({
+        this.selectDiv.ctrl.addStyleObj({
             display: 'flex',
             flexDirection: 'row'
         });
         // 单独的方法实现
         this.selectObj = new field_select_class_1.FieldSelect();
-        this.selectObj.addAttrName('select');
-        this.selectObj.addStyleObj(Object.assign({}, field_item_style_1.itemContentStyle, {
+        this.selectObj.ctrl.addAttrName('select');
+        this.selectObj.ctrl.addStyleObj(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.addStyleObj({
+        this.btn.ctrl.addStyleObj({
             // position: 'absolute',
             // right: '10px',
             padding: '8px 3px 4px',
@@ -59,22 +59,26 @@ 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.addStyleObj({
+        labelDiv.ctrl.addStyleObj({
             display: 'inline-block',
             width: '50%'
         });
         labelDiv.addChild(new framework_1.TextNode('标签'));
         const valueDiv = new framework_1.Div();
-        valueDiv.addStyleObj({
+        valueDiv.ctrl.addStyleObj({
             display: 'inline-block',
             width: '50%'
         });
         valueDiv.addChild(new framework_1.TextNode('值'));
         this.firstDiv.childNodes = [labelDiv, valueDiv];
         this.optionsContent = new framework_1.Div();
-        this.selectConfigDiv.childNodes = [this.selectDiv, this.firstDiv, this.optionsContent];
-        this.button.addStyleObj({
-            position: framework_1.StylePosition.absolute,
+        this.selectConfigDiv.childNodes = [
+            this.selectDiv,
+            this.firstDiv,
+            this.optionsContent
+        ];
+        this.button.ctrl.addStyleObj({
+            position: 'absolute',
             right: '10px',
             padding: '8px 3px 4px',
             fontSize: '16px',
@@ -86,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.setStyleObj({
+        // this.addDiv.ctrl.setStyleObj({
         //   textAlign: 'center',
         //   marginTop: '-10px',
         //   display: 'none', // 现在不需要动态添加选项。
@@ -141,30 +145,30 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         };
         // let optIndex = 0;
         // config.options设置
-        const selectedOption = optionSetting.options.find(opt => String(opt.value) === String(optionSetting.resultValue).split('.')[0]);
+        const selectedOption = optionSetting.options.find((opt) => String(opt.value) === String(optionSetting.resultValue).split('.')[0]);
         if (!(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.options)) {
             throw Error('选项有问题');
         }
         selectedOption.options.forEach((opt, optIndex) => {
             const optDiv = new framework_1.Div();
             const labelDiv = new framework_1.Div();
-            labelDiv.addStyleObj(styleObj);
-            labelDiv.setAttrObj({
+            labelDiv.ctrl.addStyleObj(styleObj);
+            labelDiv.ctrl.setAttrObj({
                 // contenteditable: 'true', // 现在选项不需要编辑
                 optIndex,
                 optType: 'label'
             });
             labelDiv.addChild(new framework_1.TextNode(opt.label));
             const valueDiv = new framework_1.Div();
-            valueDiv.addStyleObj(styleObj);
-            valueDiv.addAttrObj({
+            valueDiv.ctrl.addStyleObj(styleObj);
+            valueDiv.ctrl.addAttrObj({
                 // contenteditable: 'true', // 现在选项不需要编辑
                 optIndex,
                 optType: 'value'
             });
             valueDiv.addChild(new framework_1.TextNode(String(opt.value)));
             // const deleteDiv = new Div(optDiv);
-            // deleteDiv.setStyleObj({
+            // deleteDiv.ctrl.setStyleObj({
             //   display: 'none',
             //   // display: 'inline-block', // 现在不需要动态删除选项
             //   width: '10%',
@@ -174,7 +178,7 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
             //   // marginTop: '10px',
             // });
             // const svg = new DeleteSvg(deleteDiv);
-            // svg.setStyleObj({
+            // svg.ctrl.setStyleObj({
             //   width: '20',
             // });
             // deleteDiv.appendChild(svg);
@@ -197,18 +201,18 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         // config.options设置
         options.forEach((opt, optIndex) => {
             const optDiv = new framework_1.Div();
-            optDiv.setAttrName('option');
+            optDiv.ctrl.setAttrName('option');
             const labelDiv = new framework_1.Div();
-            labelDiv.addStyleObj(styleObj);
-            labelDiv.setAttrObj({
+            labelDiv.ctrl.addStyleObj(styleObj);
+            labelDiv.ctrl.setAttrObj({
                 // contenteditable: 'true', // 现在选项不需要编辑
                 optIndex,
                 optType: 'label'
             });
             labelDiv.addChild(new framework_1.TextNode(opt.label));
             const valueDiv = new framework_1.Div();
-            valueDiv.addStyleObj(styleObj);
-            valueDiv.addAttrObj({
+            valueDiv.ctrl.addStyleObj(styleObj);
+            valueDiv.ctrl.addAttrObj({
                 optIndex,
                 optType: 'value'
             });
@@ -227,7 +231,7 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
             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);
+            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');
             }

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

@@ -5,9 +5,9 @@ export declare abstract class FieldRadio extends FieldItem {
     name: string;
     resultValue: string | number | boolean;
     optionDiv: Div;
-    config: IOptionSetting;
+    params: IOptionSetting;
     private selectedOpt;
-    protected constructor(labelText: string | undefined, config: IOptionSetting);
+    protected constructor(labelText: string | undefined, params: IOptionSetting);
     abstract reset(value?: string): void;
     setOptions(options: IOptionSet[]): void;
     resetResultValue(value: string): void;

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

@@ -5,14 +5,14 @@ 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 {
-    constructor(labelText = '单选', config) {
+    constructor(labelText = '单选', params) {
         super(labelText);
-        this.name = config.name;
-        this.resultValue = config.resultValue;
+        this.name = params.name;
+        this.resultValue = params.resultValue;
         this.optionDiv = new framework_1.Div();
         this.childNodes = [this.label, this.optionDiv, this.button];
-        this.config = config;
-        this.setOptions(config.options);
+        this.params = params;
+        this.setOptions(params.options);
     }
     setOptions(options) {
         options.forEach((option, index) => {
@@ -28,24 +28,32 @@ class FieldRadio extends field_item_abstract_1.FieldItem {
             else {
                 button = this.optionDiv.childNodes[index];
             }
-            button.addStyleObj({
+            button.ctrl.addStyleObj({
                 height: '32px',
                 borderRadius: '0',
                 border: '1px solid #000'
             });
-            button.addAttrObj({
+            button.ctrl.addAttrObj({
                 type: 'radio',
                 value: option.value,
                 checked: option.checked
             });
             if (option.checked) {
-                button.styleObj.backgroundColor = '#00f';
-                button.styleObj.color = '#fff';
+                // button.styleObj.backgroundColor = '#00f';
+                // button.styleObj.color = '#fff';
+                button.ctrl.addStyleObj({
+                    backgroundColor: '#00f',
+                    color: '#fff',
+                });
                 this.selectedOpt = button;
             }
             else {
-                button.styleObj.backgroundColor = '#fff';
-                button.styleObj.color = '#000';
+                button.ctrl.addStyleObj({
+                    backgroundColor: '#fff',
+                    color: '#000'
+                });
+                // button.styleObj.backgroundColor = '#fff';
+                // button.styleObj.color = '#000';
             }
             // span.childNodes.push(label, inputRadio);
             // this.optionDiv.childNodes.push(button);
@@ -55,12 +63,12 @@ class FieldRadio extends field_item_abstract_1.FieldItem {
     resetResultValue(value) {
         console.log('resetResultValue value is ', value);
         this.resultValue = value;
-        this.config.options.forEach(item => {
+        this.params.options.forEach((item) => {
             item.checked = item.value === value;
         });
-        console.log('this.config.options is ', this.config.options);
-        this.setOptions(this.config.options);
-        this.optionDiv.render();
+        console.log('this.config.options is ', this.params.options);
+        this.setOptions(this.params.options);
+        this.optionDiv.mount();
     }
     initEvents() {
         this.optionDiv.childNodes.forEach((btn) => {
@@ -68,24 +76,25 @@ class FieldRadio extends field_item_abstract_1.FieldItem {
                 return;
             }
             this.subscriptions.push((0, rxjs_1.fromEvent)(btn.dom, 'click').subscribe(() => {
+                var _a;
                 // if (OfdEditor.mode === 'read') {
                 //   return;
                 // }
                 if (this.selectedOpt) {
-                    this.selectedOpt.setStyleObj({
+                    this.selectedOpt.ctrl.setStyleObj({
                         backgroundColor: '#fff',
                         color: '#000'
                     });
-                    this.selectedOpt.setAttribute('checked', false);
+                    this.selectedOpt.ctrl.setAttribute('checked', false);
                 }
                 this.selectedOpt = btn;
-                if (btn instanceof framework_1.TypeElement) {
-                    btn.setStyleObj({
+                if (btn instanceof framework_1.TypeHtml) {
+                    btn.ctrl.setStyleObj({
                         backgroundColor: '#00f',
                         color: '#fff'
                     });
-                    btn.setAttribute('checked', true);
-                    this.resultValue = btn.attrObj.value;
+                    btn.ctrl.setAttribute('checked', true);
+                    this.resultValue = (_a = btn.props.attrObj) === null || _a === void 0 ? void 0 : _a.value;
                     this.reset(this.resultValue);
                 }
                 else {

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

@@ -1,9 +1,8 @@
-import { Button, Label, TypeComponent } from '@type-dom/framework';
+import { Button, Label } from '@type-dom/framework';
 import { Select } from '../../select/select.class';
 import { FieldItem } from '../field-item.abstract';
 export declare abstract class FieldSelect extends FieldItem {
     abstract reset(value?: string): void;
-    parent?: TypeComponent;
     childNodes: [Label, Select, Button];
     select: Select;
     mode: string;

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

@@ -10,14 +10,14 @@ class FieldSelect extends field_item_abstract_1.FieldItem {
         super(labelText);
         this.mode = 'editor';
         this.select = new select_class_1.Select();
-        this.select.styleObj = Object.assign({}, field_item_style_1.itemContentStyle);
-        this.select.attrObj = {
+        this.select.props.styleObj = Object.assign({}, field_item_style_1.itemContentStyle);
+        this.select.props.attrObj = {
             name: 'property-select'
             // type: 'text',
             // placeholder: placeholder,
         };
         if (this.mode === 'read') {
-            this.select.addAttrObj({
+            this.select.ctrl.addAttrObj({
                 disabled: true
             });
         }

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.styleObj = {
+        this.content.props.styleObj = {
             height: '28px',
             lineHeight: '28px',
             textAlign: 'center',
@@ -19,7 +19,7 @@ class FieldSpan extends field_item_abstract_1.FieldItem {
             // -webkit-box-sizing: border-box;
             boxSizing: 'border-box',
             color: '#606266',
-            display: framework_1.StyleDisplay.inlineBlock,
+            display: 'inlineBlock',
             outline: '0',
             padding: '0 15px',
             // paddingLeft: '43px',
@@ -28,12 +28,12 @@ class FieldSpan extends field_item_abstract_1.FieldItem {
             transition: 'border-color .2s cubic-bezier(.645,.045,.355,1)',
             width: 'calc(100% - 80px)'
         };
-        this.attrObj = {
+        this.props.attrObj = {
             name: 'field-span'
         };
         this.textNode = new framework_1.TextNode('显示');
         this.content.addChild(this.textNode);
-        this.button.setStyleObj({
+        this.button.ctrl.setStyleObj({
             // position: 'absolute',
             // right: '10px',
             padding: '8px 3px 4px',

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

@@ -1,7 +1,6 @@
-import { Label, Textarea, TypeComponent, Button } from '@type-dom/framework';
+import { Label, Textarea, Button } from '@type-dom/framework';
 import { FieldItem } from '../field-item.abstract';
 export declare abstract class FieldTextarea extends FieldItem {
-    parent?: TypeComponent;
     childNodes: [Label, Textarea, Button];
     content: Textarea;
     mode: string;

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.addStyleObj({
+        this.ctrl.addStyleObj({
             display: 'block', // 不是 flex
             marginBottom: '20px'
         });
@@ -26,7 +26,7 @@ class FieldTextarea extends field_item_abstract_1.FieldItem {
                 // -webkit-box-sizing: border-box;
                 boxSizing: 'border-box',
                 color: '#606266',
-                display: framework_1.StyleDisplay.inlineBlock,
+                display: 'inlineBlock',
                 outline: '0',
                 padding: '0 5px',
                 // -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
@@ -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.addAttrObj({
+            this.content.ctrl.addAttrObj({
                 disabled: true
             });
         }
         this.button.textNode.setText('确定');
-        this.button.addStyleObj({
+        this.button.ctrl.addStyleObj({
             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.setAttribute('placeholder', placeholder);
+        this.content.ctrl.setAttribute('placeholder', placeholder);
     }
     resetInputValue(value = '') {
-        this.content.setAttribute('value', value);
+        this.content.ctrl.setAttribute('value', value);
         this.content.dom.value = String(value);
     }
 }