@type-dom/ui 0.0.1 → 0.0.3

package/src/{form → components/form}/field-item/field-item.abstract.js

@@ -5,21 +5,21 @@ const framework_1 = require("@type-dom/framework");
 const field_item_style_1 = require("./field-item.style");
 class FieldItem extends framework_1.TypeComponent {
     constructor(labelText) {
-        super('div');
-        this.propObj.styleObj = {
+        super();
+        this.styleObj = {
             // border: '1px solid #1890ff',
             // background: '#f3f9ff',
-            display: 'flex',
+            display: framework_1.StyleDisplay.flex,
             flexDirection: 'row',
             padding: '10px 0',
             // marginBottom: '10px!important',
-            fontSize: '14px',
+            fontSize: '14px'
         };
-        this.label = new framework_1.Label(this);
+        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.button = new framework_1.Button(this);
+        this.button = new framework_1.Button({ parent: this });
         this.button.addStyleObj({
             height: '28px',
             background: '#ffffff',
@@ -27,16 +27,11 @@ class FieldItem extends framework_1.TypeComponent {
             borderStyle: 'solid',
             borderLeft: 'none',
             borderColor: '#dcdfe6',
-            display: 'none',
+            display: 'none'
         });
     }
     setLabelTitle(text) {
         this.label.childNodes[0].nodeValue = text;
     }
-    show() {
-        this.setStyleObj({
-            display: framework_1.StyleDisplay.flex,
-        });
-    }
 }
 exports.FieldItem = FieldItem;

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

@@ -0,0 +1,5 @@
+import { IButton, ILabel, ITypeNode } from '@type-dom/framework';
+export interface IFieldItem extends ITypeNode {
+    label: ILabel;
+    button: IButton;
+}

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

package/src/{form → components/form}/field-item/field-item.style.js

@@ -13,7 +13,7 @@ exports.labelStyle = {
     paddingRight: '2px',
     // padding: '0 12px 0 0',
     // '-webkit-box-sizing': 'border-box',
-    boxSizing: 'border-box',
+    boxSizing: 'border-box'
 };
 exports.itemContentStyle = {
     height: '28px',
@@ -35,5 +35,5 @@ exports.itemContentStyle = {
     margin: '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% - ' + exports.labelStyle.width + ')',
+    width: 'calc(100% - ' + exports.labelStyle.width + ')'
 };

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

@@ -8,17 +8,15 @@ const field_item_style_1 = require("../field-item.style");
 class FieldInput extends field_item_abstract_1.FieldItem {
     constructor(labelText = '控件名称', placeholder = '请输入') {
         super(labelText);
-        this.content = new framework_1.Input(this);
-        this.content.propObj = {
-            styleObj: Object.assign({}, field_item_style_1.itemContentStyle),
-            attrObj: {
-                type: 'text',
-                placeholder: placeholder,
-            }
+        this.content = new framework_1.Input({ parent: this });
+        this.content.styleObj = Object.assign({}, field_item_style_1.itemContentStyle);
+        this.content.attrObj = {
+            type: 'text',
+            placeholder: placeholder
         };
         if (this.mode === 'read') {
             this.content.addAttrObj({
-                disabled: true,
+                disabled: true
             });
         }
         // this.button.addStyleObj({
@@ -42,7 +40,7 @@ class FieldInput extends field_item_abstract_1.FieldItem {
         this.content.dom.value = String(value);
     }
     initEvents() {
-        this.events.push((0, rxjs_1.fromEvent)(this.content.dom, 'input').subscribe(() => {
+        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);

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

@@ -0,0 +1,21 @@
+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 {
+    childNodes: [Label, Div, Button];
+    selectConfigDiv: Div;
+    private readonly firstDiv;
+    selectDiv: Div;
+    private readonly selectObj;
+    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;
+}

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

@@ -4,14 +4,14 @@ exports.PropertyOptions = void 0;
 const rxjs_1 = require("rxjs");
 const framework_1 = require("@type-dom/framework");
 const svgs_1 = require("@type-dom/svgs");
-const td_select_class_1 = require("../../../basic/td-select/td-select.class");
+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 {
     constructor(labelText = '选项列表') {
         super(labelText);
         this.addAttrName('option-property');
-        this.selectConfigDiv = new framework_1.Division();
+        this.selectConfigDiv = new framework_1.Div();
         this.selectConfigDiv.addAttrName('select-config');
         this.selectConfigDiv.addStyleObj({
             height: '100%',
@@ -28,50 +28,50 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
             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)',
+            width: 'calc(100% - 100px)'
         });
-        this.selectDiv = new framework_1.Division();
+        this.selectDiv = new framework_1.Div();
         this.selectDiv.addStyleObj({
             display: 'flex',
-            flexDirection: 'row',
+            flexDirection: 'row'
         });
         // 单独的方法实现
-        this.selectObj = new td_select_class_1.TdSelect();
+        this.selectObj = new field_select_class_1.FieldSelect();
         this.selectObj.addAttrName('select');
         this.selectObj.addStyleObj(Object.assign({}, field_item_style_1.itemContentStyle, {
             width: '100%',
             borderRadius: '4px 0 0 4px',
-            borderRight: 'none',
+            borderRight: 'none'
         }));
-        this.btn = new framework_1.Button(this.selectDiv);
+        this.btn = new framework_1.Button({ parent: this.selectDiv });
         this.btn.addStyleObj({
             // position: 'absolute',
             // right: '10px',
             padding: '8px 3px 4px',
             fontSize: '16px',
             border: '1px solid #DCDFE6',
-            borderRadius: '0 4px 4px 0',
+            borderRadius: '0 4px 4px 0'
         });
-        this.dotsSvg = new svgs_1.TdThreeDotsSvg(this.btn);
+        this.dotsSvg = new svgs_1.TdThreeDotsSvg({ parent: this.btn });
         this.dotsSvg.resetSize(16, 16);
         this.btn.textNode.setText('');
         this.btn.addChild(this.dotsSvg);
         this.selectDiv.childNodes = [this.selectObj, this.btn];
-        this.firstDiv = new framework_1.Division();
-        const labelDiv = new framework_1.Division();
+        this.firstDiv = new framework_1.Div();
+        const labelDiv = new framework_1.Div();
         labelDiv.addStyleObj({
             display: 'inline-block',
-            width: '50%',
+            width: '50%'
         });
         labelDiv.addChild(new framework_1.TextNode('标签'));
-        const valueDiv = new framework_1.Division();
+        const valueDiv = new framework_1.Div();
         valueDiv.addStyleObj({
             display: 'inline-block',
-            width: '50%',
+            width: '50%'
         });
         valueDiv.addChild(new framework_1.TextNode('值'));
         this.firstDiv.childNodes = [labelDiv, valueDiv];
-        this.optionsContent = new framework_1.Division();
+        this.optionsContent = new framework_1.Div();
         this.selectConfigDiv.childNodes = [this.selectDiv, this.firstDiv, this.optionsContent];
         this.button.addStyleObj({
             position: framework_1.StylePosition.absolute,
@@ -81,90 +81,89 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
             // border: 'none',
             display: 'none',
             border: '1px solid #DCDFE6',
-            borderRadius: '0 4px 4px 0',
+            borderRadius: '0 4px 4px 0'
         });
         this.childNodes = [this.label, this.selectConfigDiv, this.button];
         // 创建添加按钮
-        // this.addDiv = new Division(this.selectConfigDiv);
+        // this.addDiv = new Div(this.selectConfigDiv);
         // this.addDiv.setStyleObj({
         //   textAlign: 'center',
         //   marginTop: '-10px',
         //   display: 'none', // 现在不需要动态添加选项。
         // });
-        // const svg = new AddSvg(this.addDiv);
+        // 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');
     }
-    get optionConfig() {
+    get optionSetting() {
         var _a;
-        return (_a = this === null || this === void 0 ? void 0 : this.configs) === null || _a === void 0 ? void 0 : _a.optionConfig;
+        return (_a = this.settings) === null || _a === void 0 ? void 0 : _a.optionSetting;
     }
-    set optionConfig(optConfig) {
-        if (this.configs === undefined) {
+    set optionSetting(optConfig) {
+        if (this.settings === undefined) {
             if (optConfig !== undefined) {
-                this.configs = {
-                    optionConfig: optConfig
+                this.settings = {
+                    optionSetting: optConfig
                 };
             }
         }
         else {
             if (optConfig === undefined) {
-                delete this.configs.optionConfig;
+                delete this.settings.optionSetting;
             }
             else {
-                this.configs.optionConfig = optConfig;
+                this.settings.optionSetting = optConfig;
             }
         }
     }
-    resetOptionConfigResultValue(value) {
-        // AppRoot.selectedControl?.propObj.attrObj.optionConfig''
-        // this.optionConfig = Object.assign(this.optionConfig, { resultValue: value });
-        if (this.optionConfig)
-            this.optionConfig.resultValue = value;
+    resetOptionSettingResultValue(value) {
+        // AppRoot.selectedControl?.attrObj.optionSetting''
+        // this.optionSetting = Object.assign(this.optionSetting, { resultValue: value });
+        if (this.optionSetting)
+            this.optionSetting.resultValue = value;
     }
     // vue项目中返回的是选中的项目。只有一层，没有两层。
-    resetConfig(optionConfig) {
-        console.log('optionConfig is ', optionConfig);
+    resetConfig(optionSetting) {
+        console.log('optionSetting is ', optionSetting);
         // this.selectConfigDiv.clearChildNodes();
         // this.selectConfigDiv.clearChildDom();
         // this.selectConfigDiv.appendChild(this.selectObj).appendChild(this.firstDiv);
-        this.selectObj.setOptions(optionConfig.options, optionConfig.resultValue);
+        this.selectObj.setOptions(optionSetting.options, optionSetting.resultValue);
         // todo 监听事件
-        this.optionConfig = optionConfig;
-        this.optionsContent.clearChildNodes();
-        this.optionsContent.clearChildDom();
+        this.optionSetting = optionSetting;
+        this.optionsContent.clearChildren();
         const styleObj = {
             display: 'inline-block',
             width: '45%',
             border: '1px solid #ccc',
-            boxSizing: 'border-box',
+            boxSizing: 'border-box'
         };
         // let optIndex = 0;
         // config.options设置
-        const selectedOption = optionConfig.options.find(opt => String(opt.value) === String(optionConfig.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.Division();
-            const labelDiv = new framework_1.Division();
+            const optDiv = new framework_1.Div();
+            const labelDiv = new framework_1.Div();
             labelDiv.addStyleObj(styleObj);
             labelDiv.setAttrObj({
                 // contenteditable: 'true', // 现在选项不需要编辑
                 optIndex,
-                optType: 'label',
+                optType: 'label'
             });
             labelDiv.addChild(new framework_1.TextNode(opt.label));
-            const valueDiv = new framework_1.Division();
+            const valueDiv = new framework_1.Div();
             valueDiv.addStyleObj(styleObj);
             valueDiv.addAttrObj({
                 // contenteditable: 'true', // 现在选项不需要编辑
                 optIndex,
-                optType: 'value',
+                optType: 'value'
             });
             valueDiv.addChild(new framework_1.TextNode(String(opt.value)));
-            // const deleteDiv = new Division(optDiv);
+            // const deleteDiv = new Div(optDiv);
             // deleteDiv.setStyleObj({
             //   display: 'none',
             //   // display: 'inline-block', // 现在不需要动态删除选项
@@ -187,32 +186,31 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         // this.selectConfigDiv.clearChildNodes();
         // this.selectConfigDiv.clearChildDom();
         // this.selectConfigDiv.appendChild(this.selectObj).appendChild(this.firstDiv);
-        this.optionsContent.clearChildNodes();
-        this.optionsContent.clearChildDom();
+        this.optionsContent.clearChildren();
         const styleObj = {
             display: 'inline-block',
             width: '45%',
             border: '1px solid #ccc',
-            boxSizing: 'border-box',
+            boxSizing: 'border-box'
         };
         // let optIndex = 0;
         // config.options设置
         options.forEach((opt, optIndex) => {
-            const optDiv = new framework_1.Division();
+            const optDiv = new framework_1.Div();
             optDiv.setAttrName('option');
-            const labelDiv = new framework_1.Division();
+            const labelDiv = new framework_1.Div();
             labelDiv.addStyleObj(styleObj);
             labelDiv.setAttrObj({
                 // contenteditable: 'true', // 现在选项不需要编辑
                 optIndex,
-                optType: 'label',
+                optType: 'label'
             });
             labelDiv.addChild(new framework_1.TextNode(opt.label));
-            const valueDiv = new framework_1.Division();
+            const valueDiv = new framework_1.Div();
             valueDiv.addStyleObj(styleObj);
             valueDiv.addAttrObj({
                 optIndex,
-                optType: 'value',
+                optType: 'value'
             });
             valueDiv.addChild(new framework_1.TextNode(String(opt.value)));
             optDiv.childNodes = [labelDiv, valueDiv];
@@ -220,7 +218,7 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         });
     }
     initEvents() {
-        this.events.push(this.optionsConfigObservable.subscribe(() => {
+        this.subscriptions.push(this.optionsConfigObservable.subscribe(() => {
             console.log('this.btn click . ');
             console.log('this.optionsConfigObservable is ', this.optionsConfigObservable);
         }), 
@@ -229,13 +227,13 @@ 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.optionConfig) === 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.optionConfig) {
-                throw Error('无法获取optionConfig');
+            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');
             }
             if (selectedOption && selectedOption.options) {
-                this.resetOptionConfigResultValue(selectedOption.value);
-                console.log('this.optionConfig is ', this.optionConfig);
+                this.resetOptionSettingResultValue(selectedOption.value);
+                console.log('this.optionSetting is ', this.optionSetting);
                 console.log('selectOption is ', selectedOption);
                 this.resetOptions(selectedOption.options);
                 // this.resetControl();

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

@@ -1,16 +1,15 @@
-import { Button, Division, Label } from '@type-dom/framework';
-import { IOption, IOptionConfig } from '../field-item.interface';
+import { Button, Div, Label, IOptionSet, IOptionSetting } from '@type-dom/framework';
 import { FieldItem } from '../field-item.abstract';
 export declare abstract class FieldRadio extends FieldItem {
-    config: IOptionConfig;
-    childNodes: [Label, Division, Button];
+    childNodes: [Label, Div, Button];
     name: string;
     resultValue: string | number | boolean;
-    optionDiv: Division;
+    optionDiv: Div;
+    config: IOptionSetting;
     private selectedOpt;
-    protected constructor(labelText: string | undefined, config: IOptionConfig);
+    protected constructor(labelText: string | undefined, config: IOptionSetting);
     abstract reset(value?: string): void;
-    setOptions(options: IOption[]): void;
+    setOptions(options: IOptionSet[]): void;
     resetResultValue(value: string): void;
     initEvents(): void;
 }

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

@@ -7,18 +7,18 @@ const field_item_abstract_1 = require("../field-item.abstract");
 class FieldRadio extends field_item_abstract_1.FieldItem {
     constructor(labelText = '单选', config) {
         super(labelText);
-        this.config = config;
         this.name = config.name;
         this.resultValue = config.resultValue;
-        this.optionDiv = new framework_1.Division();
+        this.optionDiv = new framework_1.Div();
         this.childNodes = [this.label, this.optionDiv, this.button];
+        this.config = config;
         this.setOptions(config.options);
     }
     setOptions(options) {
         options.forEach((option, index) => {
             let button;
             if (!this.optionDiv.childNodes[index]) {
-                button = new framework_1.Button(this);
+                button = new framework_1.Button({ parent: this });
                 button.setTitle(option.label);
                 // const label = new TextNode(button, option.label);
                 // button.childNodes = [label];
@@ -31,7 +31,7 @@ class FieldRadio extends field_item_abstract_1.FieldItem {
             button.addStyleObj({
                 height: '32px',
                 borderRadius: '0',
-                border: '1px solid #000',
+                border: '1px solid #000'
             });
             button.addAttrObj({
                 type: 'radio',
@@ -39,13 +39,13 @@ class FieldRadio extends field_item_abstract_1.FieldItem {
                 checked: option.checked
             });
             if (option.checked) {
-                button.propObj.styleObj.backgroundColor = '#00f';
-                button.propObj.styleObj.color = '#fff';
+                button.styleObj.backgroundColor = '#00f';
+                button.styleObj.color = '#fff';
                 this.selectedOpt = button;
             }
             else {
-                button.propObj.styleObj.backgroundColor = '#fff';
-                button.propObj.styleObj.color = '#000';
+                button.styleObj.backgroundColor = '#fff';
+                button.styleObj.color = '#000';
             }
             // span.childNodes.push(label, inputRadio);
             // this.optionDiv.childNodes.push(button);
@@ -67,14 +67,14 @@ class FieldRadio extends field_item_abstract_1.FieldItem {
             if (btn.dom === undefined) {
                 return;
             }
-            this.events.push((0, rxjs_1.fromEvent)(btn.dom, 'click').subscribe(() => {
+            this.subscriptions.push((0, rxjs_1.fromEvent)(btn.dom, 'click').subscribe(() => {
                 // if (OfdEditor.mode === 'read') {
                 //   return;
                 // }
                 if (this.selectedOpt) {
                     this.selectedOpt.setStyleObj({
                         backgroundColor: '#fff',
-                        color: '#000',
+                        color: '#000'
                     });
                     this.selectedOpt.setAttribute('checked', false);
                 }
@@ -82,7 +82,7 @@ class FieldRadio extends field_item_abstract_1.FieldItem {
                 if (btn instanceof framework_1.TypeElement) {
                     btn.setStyleObj({
                         backgroundColor: '#00f',
-                        color: '#fff',
+                        color: '#fff'
                     });
                     btn.setAttribute('checked', true);
                     this.resultValue = btn.attrObj.value;

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

@@ -10,23 +10,21 @@ class FieldSelect extends field_item_abstract_1.FieldItem {
         super(labelText);
         this.mode = 'editor';
         this.select = new select_class_1.Select();
-        this.select.propObj = {
-            styleObj: Object.assign({}, field_item_style_1.itemContentStyle),
-            attrObj: {
-                name: 'property-select'
-                // type: 'text',
-                // placeholder: placeholder,
-            }
+        this.select.styleObj = Object.assign({}, field_item_style_1.itemContentStyle);
+        this.select.attrObj = {
+            name: 'property-select'
+            // type: 'text',
+            // placeholder: placeholder,
         };
         if (this.mode === 'read') {
             this.select.addAttrObj({
-                disabled: true,
+                disabled: true
             });
         }
         this.childNodes = [this.label, this.select, this.button];
     }
     initEvents() {
-        this.events.push(
+        this.subscriptions.push(
         // 如果只有一个选项时，监听change，input有问题。
         (0, rxjs_1.fromEvent)(this.select.dom, 'click').subscribe((evt) => {
             console.log('this.select.dom click, event is ', evt);

package/src/{form → components/form}/field-item/span/field-span.abstract.d.ts

@@ -1,7 +1,7 @@
 import { Label, Span, TextNode, Button } from '@type-dom/framework';
 import { FieldItem } from '../field-item.abstract';
 export declare abstract class FieldSpan extends FieldItem {
-    readonly text: TextNode;
+    textNode: TextNode;
     childNodes: [Label, Span, Button];
     content: Span;
     protected constructor(labelText?: string);

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldSpan = void 0;
+const framework_1 = require("@type-dom/framework");
+// import { TdButton } from '../../../basic';
+const field_item_abstract_1 = require("../field-item.abstract");
+class FieldSpan extends field_item_abstract_1.FieldItem {
+    constructor(labelText = '控件名称') {
+        super(labelText);
+        this.content = new framework_1.Span({ parent: this });
+        this.content.styleObj = {
+            height: '28px',
+            lineHeight: '28px',
+            textAlign: 'center',
+            backgroundColor: '#FFF',
+            backgroundImage: 'none',
+            borderRadius: '4px',
+            border: '1px solid #DCDFE6',
+            // -webkit-box-sizing: border-box;
+            boxSizing: 'border-box',
+            color: '#606266',
+            display: framework_1.StyleDisplay.inlineBlock,
+            outline: '0',
+            padding: '0 15px',
+            // paddingLeft: '43px',
+            // paddingRight: '43px',
+            // -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.attrObj = {
+            name: 'field-span'
+        };
+        this.textNode = new framework_1.TextNode('显示');
+        this.content.addChild(this.textNode);
+        this.button.setStyleObj({
+            // position: 'absolute',
+            // right: '10px',
+            padding: '8px 3px 4px',
+            fontSize: '16px',
+            display: 'none',
+            border: '1px solid #DCDFE6',
+            borderRadius: '0 4px 4px 0'
+        });
+        this.button.textNode.setText('');
+        this.childNodes = [this.label, this.content, this.button];
+    }
+    resetText(value = '') {
+        this.textNode.setText(value);
+    }
+}
+exports.FieldSpan = FieldSpan;

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

@@ -9,11 +9,11 @@ class FieldTextarea extends field_item_abstract_1.FieldItem {
         super(labelText);
         this.mode = 'edit';
         this.addStyleObj({
-            display: 'block',
-            marginBottom: '20px',
+            display: 'block', // 不是 flex
+            marginBottom: '20px'
         });
-        this.content = new framework_1.Textarea(this);
-        this.content.propObj = {
+        this.content = new framework_1.Textarea({
+            parent: this,
             styleObj: {
                 height: '100%',
                 minHeight: '80px',
@@ -31,24 +31,24 @@ class FieldTextarea extends field_item_abstract_1.FieldItem {
                 padding: '0 5px',
                 // -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
                 transition: 'border-color .2s cubic-bezier(.645,.045,.355,1)',
-                width: 'calc(100% - ' + field_item_style_1.labelStyle.width + ')',
+                width: 'calc(100% - ' + field_item_style_1.labelStyle.width + ')'
             },
             attrObj: {
-                placeholder: placeholder,
+                placeholder: placeholder
             }
-        };
+        });
         console.log('this.parent is ', this.parent);
         console.log('this.mode is ', this.mode);
         if (this.mode === 'read') {
             this.content.addAttrObj({
-                disabled: true,
+                disabled: true
             });
         }
         this.button.textNode.setText('确定');
         this.button.addStyleObj({
             height: '24px',
             float: 'right',
-            display: 'block',
+            display: 'block'
         });
         this.childNodes = [this.label, this.content, this.button];
     }