@type-dom/ui 0.0.1

package/src/feedback/overlay/container/header/header.d.ts

@@ -0,0 +1,12 @@
+import { TypeDiv } from '@type-dom/framework';
+import { OverlayContainer } from '../container';
+import { OverlayTitle } from './title/title';
+import { CloseButton } from './close-button/close-button';
+export declare class OverlayHeader extends TypeDiv {
+    className: 'OverlayHeader';
+    parent?: OverlayContainer;
+    childNodes: [OverlayTitle, CloseButton];
+    title: OverlayTitle;
+    closeBtn: CloseButton;
+    constructor();
+}

package/src/feedback/overlay/container/header/header.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverlayHeader = void 0;
+const framework_1 = require("@type-dom/framework");
+const title_1 = require("./title/title");
+const close_button_1 = require("./close-button/close-button");
+class OverlayHeader extends framework_1.TypeDiv {
+    constructor() {
+        super();
+        this.className = 'OverlayHeader';
+        this.addStyleObj({
+            padding: '20px',
+            paddingBottom: '10px',
+            boxSizing: 'border-box',
+        });
+        this.addAttrObj({
+            name: 'overlay-header',
+        });
+        this.title = new title_1.OverlayTitle();
+        this.closeBtn = new close_button_1.CloseButton();
+        this.closeBtn.parent = this;
+        this.childNodes = [this.title, this.closeBtn];
+    }
+}
+exports.OverlayHeader = OverlayHeader;

package/src/feedback/overlay/container/header/title/title.d.ts

@@ -0,0 +1,9 @@
+import { TextNode, TypeSpan } from '@type-dom/framework';
+import { OverlayHeader } from '../header';
+export declare class OverlayTitle extends TypeSpan {
+    className: 'OverlayTitle';
+    parent?: OverlayHeader;
+    childNodes: TextNode[];
+    text: TextNode;
+    constructor();
+}

package/src/feedback/overlay/container/header/title/title.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverlayTitle = void 0;
+const framework_1 = require("@type-dom/framework");
+class OverlayTitle extends framework_1.TypeSpan {
+    constructor() {
+        super();
+        this.className = 'OverlayTitle';
+        this.propObj = {
+            styleObj: {
+                lineHeight: '16px',
+                fontSize: '16px',
+                color: '#000',
+            },
+            attrObj: {
+                name: 'overlay-title',
+            }
+        };
+        this.text = new framework_1.TextNode('标题');
+        this.childNodes = [this.text];
+    }
+}
+exports.OverlayTitle = OverlayTitle;

package/src/feedback/overlay/overlay.abstract.d.ts

@@ -0,0 +1,16 @@
+import { TypeDiv } from '@type-dom/framework';
+import { OverlayContainer } from './container/container';
+export declare abstract class Overlay extends TypeDiv {
+    abstract className: string;
+    childNodes: [OverlayContainer];
+    container: OverlayContainer;
+    protected constructor();
+    setTitle(title: string): void;
+    setMsg(msg: string): void;
+    setContent(content: string): void;
+    show(): void;
+    hide(): void;
+    clear(): void;
+    clearBody(): void;
+    initEvents(): void;
+}

package/src/feedback/overlay/overlay.abstract.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Overlay = void 0;
+const rxjs_1 = require("rxjs");
+const framework_1 = require("@type-dom/framework");
+const container_1 = require("./container/container");
+class Overlay extends framework_1.TypeDiv {
+    constructor() {
+        super();
+        this.addStyleObj({
+            position: framework_1.StylePosition.fixed,
+            left: '0',
+            top: '0',
+            right: '0',
+            bottom: '0',
+            height: '100%',
+            zIndex: 2000,
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            overflow: 'auto',
+            display: framework_1.StyleDisplay.none,
+        });
+        // document.body.appendChild(this.dom); // 挂载在 body 上
+        this.container = new container_1.OverlayContainer();
+        this.container.parent = this;
+        this.childNodes = [this.container];
+    }
+    setTitle(title) {
+        this.container.header.title.text.setText(title);
+        this.container.header.render();
+    }
+    // 设置消息
+    setMsg(msg) {
+        const span = new framework_1.Span(this.container.body);
+        const textNode = new framework_1.TextNode(msg);
+        span.addChild(textNode);
+        this.container.body.clearChild();
+        this.container.body.appendChild(span);
+    }
+    // 设置复杂的内容
+    setContent(content) {
+        //   ToDo
+    }
+    show() {
+        this.setStyle('display', 'block');
+    }
+    hide() {
+        this.setStyle('display', 'none');
+    }
+    clear() {
+        this.container.header.title.text.setText('标题');
+        this.container.body.clearChildNodes();
+        this.container.body.clearChildDom();
+        this.container.body.clearChildNodes();
+        this.container.footer.clearChildDom();
+    }
+    clearBody() {
+        // this.container.body.clearChildDom();
+    }
+    initEvents() {
+        this.events.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
+            this.hide();
+        }));
+    }
+}
+exports.Overlay = Overlay;

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

@@ -0,0 +1,13 @@
+import { TypeDiv, TypeHtml } from '@type-dom/framework';
+import { CheckboxOption } from './checkbox-option/checkbox-option.class';
+import { ICheckboxGroup } from './checkbox-group.interface';
+import { IOption } from './checkbox-option/checkbox-option.interface';
+export declare class CheckboxGroup extends TypeDiv implements ICheckboxGroup {
+    className: 'CheckboxGroup';
+    parent?: TypeHtml;
+    childNodes: CheckboxOption[];
+    value: (string | number | boolean)[];
+    constructor();
+    setOptions(options: IOption[]): void;
+    setValue(value: string | number | boolean): void;
+}

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxGroup = void 0;
+const framework_1 = require("@type-dom/framework");
+const checkbox_option_class_1 = require("./checkbox-option/checkbox-option.class");
+class CheckboxGroup extends framework_1.TypeDiv {
+    constructor() {
+        super();
+        this.className = 'CheckboxGroup';
+        this.addAttrName('checkbox-group');
+        this.childNodes = [];
+        this.value = [];
+    }
+    setOptions(options) {
+        this.clearChildNodes();
+        this.clearChildDom();
+        this.value = [];
+        const random = Math.random();
+        options.forEach((opt) => {
+            const optObj = new checkbox_option_class_1.CheckboxOption();
+            optObj.input.addAttrObj({
+                name: 'checkbox' + random,
+                label: opt.label,
+                value: opt.value,
+                checked: opt.checked || false
+            });
+            if (opt.checked) {
+                this.value.push(opt.value);
+            }
+            optObj.text.setText(opt.label);
+            this.addChild(optObj);
+        });
+    }
+    setValue(value) {
+        // console.error('checkbox group setValue ');
+        value = String(value);
+        if (value.trim()) {
+            // console.error('value is ', value);
+            this.value = value.split(',');
+            this.childNodes.forEach(optObj => {
+                if (this.value.indexOf(String(optObj.input.attrObj.value)) !== -1) {
+                    optObj.input.setAttrObj({
+                        checked: true,
+                    });
+                }
+                else {
+                    optObj.input.removeAttribute('checked');
+                }
+            });
+        }
+        else {
+            // console.error('value is ', value);
+            this.childNodes.forEach(optObj => {
+                optObj.input.removeAttribute('checked');
+            });
+        }
+    }
+}
+exports.CheckboxGroup = CheckboxGroup;

package/src/form/checkbox-group/checkbox-group.interface.d.ts

@@ -0,0 +1,6 @@
+import { ITypeDiv } from '@type-dom/framework';
+import { ICheckboxOption } from './checkbox-option/checkbox-option.interface';
+export interface ICheckboxGroup extends ITypeDiv {
+    className: 'CheckboxGroup';
+    childNodes: ICheckboxOption[];
+}

package/src/form/checkbox-group/checkbox-group.interface.js

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

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

@@ -0,0 +1,12 @@
+import { Input, TextNode, TypeSpan } from '@type-dom/framework';
+import { CheckboxGroup } from '../checkbox-group.class';
+import { ICheckboxOption } from './checkbox-option.interface';
+export declare class CheckboxOption extends TypeSpan implements ICheckboxOption {
+    className: 'CheckboxOption';
+    parent?: CheckboxGroup;
+    childNodes: [Input, TextNode];
+    input: Input;
+    text: TextNode;
+    constructor();
+    initEvents(): void;
+}

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxOption = void 0;
+const rxjs_1 = require("rxjs");
+const framework_1 = require("@type-dom/framework");
+class CheckboxOption extends framework_1.TypeSpan {
+    constructor() {
+        super();
+        this.className = 'CheckboxOption';
+        this.input = new framework_1.Input(this);
+        this.input.addAttrObj({
+            type: 'checkbox',
+            // name: optionConfig.name,
+            // label: opt.label,
+            // value: opt.value,
+            // checked: opt.checked || false
+        });
+        this.text = new framework_1.TextNode();
+        this.childNodes = [this.input, this.text];
+    }
+    initEvents() {
+        this.events.push((0, rxjs_1.fromEvent)(this.input.dom, 'click').subscribe(() => {
+            var _a, _b, _c;
+            console.log('this.input.dom click . ');
+            console.log('this.input.dom.value is ', this.input.dom.value);
+            const flag = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.value.findIndex(item => item === this.input.dom.value);
+            if (this.input.dom.checked) {
+                if (flag === -1) {
+                    (_b = this.parent) === null || _b === void 0 ? void 0 : _b.value.push(this.input.dom.value);
+                    this.input.setAttrObj({
+                        checked: true,
+                    });
+                }
+            }
+            else {
+                this.input.removeAttribute('checked');
+                if (flag && flag !== -1) {
+                    (_c = this.parent) === null || _c === void 0 ? void 0 : _c.value.splice(flag, 1);
+                }
+            }
+        }));
+    }
+}
+exports.CheckboxOption = CheckboxOption;

package/src/form/checkbox-group/checkbox-option/checkbox-option.interface.d.ts

@@ -0,0 +1,10 @@
+import { ITypeSpan, IInput, ITextNode } from '@type-dom/framework';
+export interface ICheckboxOption extends ITypeSpan {
+    className: 'CheckboxOption';
+    childNodes: [IInput, ITextNode];
+}
+export interface IOption {
+    label: string;
+    value: string;
+    checked: boolean;
+}

package/src/form/checkbox-group/checkbox-option/checkbox-option.interface.js

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

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

@@ -0,0 +1,22 @@
+import { Division, Label, Button } from '@type-dom/framework';
+import { FieldItem } from '../field-item.abstract';
+import { TdSelect } from '../../../basic/td-select/td-select.class';
+import { IOptionConfig } from '../field-item.interface';
+/**
+ * 两级联动，
+ * 目前只有 字段名称属性项用到。 控件属性栏 control-field 字段属性栏 field-name
+ */
+export declare abstract class PropertyCascade extends FieldItem {
+    childNodes: [Label, Division, Button];
+    cascadeDiv: Division;
+    firstStageSelectObj: TdSelect;
+    secondStageSelectObj: TdSelect;
+    private cascadeConfig?;
+    abstract reset(value?: string): void;
+    protected constructor(labelText?: string);
+    get fieldConfig(): IOptionConfig | undefined;
+    set fieldConfig(value: IOptionConfig | undefined);
+    resetCascadeConfigResultValue(value: string | number | boolean): void;
+    resetCascadeConfig(optionConfig: IOptionConfig): void;
+    initEvents(): void;
+}

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

@@ -0,0 +1,186 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PropertyCascade = void 0;
+const rxjs_1 = require("rxjs");
+const framework_1 = require("@type-dom/framework");
+const field_item_abstract_1 = require("../field-item.abstract");
+const field_item_style_1 = require("../field-item.style");
+const td_select_class_1 = require("../../../basic/td-select/td-select.class");
+/**
+ * 两级联动，
+ * 目前只有 字段名称属性项用到。 控件属性栏 control-field 字段属性栏 field-name
+ */
+class PropertyCascade extends field_item_abstract_1.FieldItem {
+    constructor(labelText = '二级级联') {
+        super(labelText);
+        this.addAttrName('cascade-property');
+        this.cascadeDiv = new framework_1.Division();
+        this.cascadeDiv.addAttrName('cascade');
+        this.cascadeDiv.addStyleObj({
+            height: '100%',
+            lineHeight: '32px',
+            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',
+            // -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.firstStageSelectObj = new td_select_class_1.TdSelect();
+        this.firstStageSelectObj.addAttrName('first-stage-select');
+        this.firstStageSelectObj.setStyleObj(Object.assign({}, field_item_style_1.itemContentStyle, {
+            width: '100%',
+            margin: '5px 0'
+            // borderRadius: '4px 0 0 4px',
+            // borderRight: 'none',
+        }));
+        this.secondStageSelectObj = new td_select_class_1.TdSelect();
+        this.secondStageSelectObj.addAttrName('second-stage-select');
+        this.secondStageSelectObj.setStyleObj(Object.assign({}, field_item_style_1.itemContentStyle, {
+            width: '100%',
+        }));
+        this.cascadeDiv.childNodes = [this.firstStageSelectObj, this.secondStageSelectObj];
+        this.childNodes = [this.label, this.cascadeDiv, this.button];
+    }
+    get fieldConfig() {
+        var _a;
+        const fieldConfigStr = (_a = this.configs) === null || _a === void 0 ? void 0 : _a.fieldConfig;
+        if (fieldConfigStr) {
+            const configJson = JSON.parse(fieldConfigStr);
+            const optionConfig = {
+                name: configJson.name,
+                resultValue: configJson.resultValue,
+                options: []
+            };
+            if (configJson.options[0].options === undefined) { // 如果只有一级，应该是老数据，要重新组装
+                const values = [];
+                configJson.options.forEach(opt => {
+                    if (opt.value.indexOf('.') === -1) {
+                        // 错误的测试数据，业务数据不会有这个问题。
+                        throw Error('字段名称不是二级组装的 。 ');
+                    }
+                    const tableValue = opt.value.split('.')[0];
+                    const tableLabel = opt.label.split('.')[0];
+                    values.push(JSON.stringify({
+                        label: tableLabel,
+                        value: tableValue,
+                    }));
+                });
+                // todo 如何去重
+                const firstStageValues = Array.from(new Set(values));
+                firstStageValues.forEach((value) => {
+                    optionConfig.options.push(Object.assign({}, JSON.parse(value), { options: [] }));
+                });
+                configJson.options.forEach((opt2) => {
+                    optionConfig.options.forEach(opt1 => {
+                        var _a;
+                        if (String(opt1.value) === String(opt2.value.split('.')[0])) {
+                            (_a = opt1.options) === null || _a === void 0 ? void 0 : _a.push(opt2);
+                        }
+                    });
+                });
+                // this.fieldConfig = optionConfig;
+                return optionConfig;
+            }
+            else {
+                return configJson;
+            }
+        }
+        return undefined;
+    }
+    set fieldConfig(value) {
+        // TypeFormDesigner.webDocument.setAttribute('field-config', JSON.stringify(value));
+        if (this.configs === undefined) {
+            if (value !== undefined) {
+                this.configs = {
+                    fieldConfig: JSON.stringify(value),
+                };
+            }
+        }
+        else {
+            if (value === undefined) {
+                delete this.configs.fieldConfig;
+            }
+            else {
+                this.configs.fieldConfig = JSON.stringify(value);
+            }
+        }
+    }
+    resetCascadeConfigResultValue(value) {
+        // AppRoot.selectedControl?.propObj.attrObj.optionConfig''
+        // this.cascadeConfig = Object.assign(this.cascadeConfig, { resultValue: value });
+        if (this.cascadeConfig) {
+            this.cascadeConfig.resultValue = value;
+        }
+    }
+    // todo vue项目中返回的是选中的项目。只有一层，没有两层。
+    resetCascadeConfig(optionConfig) {
+        console.log('optionConfig is ', optionConfig);
+        // this.cascadeDiv.clearChildNodes();
+        // this.cascadeDiv.clearChildDom();
+        this.cascadeConfig = optionConfig;
+        if (optionConfig.resultValue === 0) { // 如果第1级还没有选择
+            this.firstStageSelectObj.resetOptions(optionConfig.options, optionConfig.resultValue);
+            //  todo 第2级，应该没有可选项。
+            this.secondStageSelectObj.resetOptions([], 0);
+            return;
+        }
+        //  todo config.options设置
+        if (String(optionConfig.resultValue).indexOf('.') !== -1) {
+            const firstStageValue = String(optionConfig.resultValue).split('.')[0];
+            this.firstStageSelectObj.resetOptions(optionConfig.options, firstStageValue);
+            // const firstStageValue = optionConfig.resultValue.split('.')[0];
+            const selectedOption = optionConfig.options.find(opt => opt.value === firstStageValue);
+            if (!(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.options)) {
+                // throw Error('选项有问题'); // 会阻塞修改单元格的控件类型
+                this.secondStageSelectObj.resetOptions([], 0);
+                console.error('选项有问题');
+                return;
+            }
+            this.secondStageSelectObj.resetOptions(selectedOption.options, optionConfig.resultValue);
+            // this.secondStageSelectObj.setSelectedValue(secondStageValue);
+        }
+    }
+    initEvents() {
+        this.events.push((0, rxjs_1.fromEvent)(this.firstStageSelectObj.dom, 'change').subscribe(() => {
+            var _a, _b;
+            console.log('this.firstStageSelectObj.dom change . ');
+            console.log('this.firstStageSelectObj.dom.value is ', this.firstStageSelectObj.dom.value);
+            const selectedOption = (_b = (_a = this.cascadeConfig) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.find(opt => String(opt.value) === this.firstStageSelectObj.dom.value);
+            if (!this.cascadeConfig) {
+                throw Error('无法获取cascadeConfig');
+            }
+            // todo 没有改变值 ？？？？？
+            if (selectedOption) {
+                this.resetCascadeConfigResultValue(selectedOption.value);
+            }
+            else {
+                this.secondStageSelectObj.resetOptions([{
+                        label: '请先选择上级',
+                        value: 0
+                    }], 0);
+                return;
+            }
+            if (selectedOption && selectedOption.options) {
+                console.log('this.cascadeConfig is ', this.cascadeConfig);
+                console.log('selectedOption is ', selectedOption);
+                this.secondStageSelectObj.resetOptions(selectedOption.options, 0);
+            }
+        }), (0, rxjs_1.fromEvent)(this.secondStageSelectObj.dom, 'click').subscribe(() => {
+            console.log('this.secondStageSelectObj.dom change . ');
+            this.reset(this.secondStageSelectObj.dom.value);
+        }), (0, rxjs_1.fromEvent)(this.secondStageSelectObj.dom, 'change').subscribe(() => {
+            console.log('this.secondStageSelectObj.dom change . ');
+            this.reset(this.secondStageSelectObj.dom.value);
+        }));
+    }
+}
+exports.PropertyCascade = PropertyCascade;

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

@@ -0,0 +1,11 @@
+import { Division, Input, Label, Span, Textarea, TypeComponent, Button } from '@type-dom/framework';
+import { Select } from '../select/select.class';
+export declare abstract class FieldItem extends TypeComponent {
+    abstract className: string;
+    abstract childNodes: [Label, ...(Span | Input | Textarea | Select | Division)[], Button];
+    label: Label;
+    button: Button;
+    protected constructor(labelText: string);
+    setLabelTitle(text: string): void;
+    show(): void;
+}

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

@@ -0,0 +1,42 @@
+"use strict";
+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 {
+    constructor(labelText) {
+        super('div');
+        this.propObj.styleObj = {
+            // border: '1px solid #1890ff',
+            // background: '#f3f9ff',
+            display: 'flex',
+            flexDirection: 'row',
+            padding: '10px 0',
+            // marginBottom: '10px!important',
+            fontSize: '14px',
+        };
+        this.label = new framework_1.Label(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.addStyleObj({
+            height: '28px',
+            background: '#ffffff',
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            borderLeft: 'none',
+            borderColor: '#dcdfe6',
+            display: 'none',
+        });
+    }
+    setLabelTitle(text) {
+        this.label.childNodes[0].nodeValue = text;
+    }
+    show() {
+        this.setStyleObj({
+            display: framework_1.StyleDisplay.flex,
+        });
+    }
+}
+exports.FieldItem = FieldItem;

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

@@ -0,0 +1,12 @@
+export interface IOption {
+    label: string;
+    value: string | number | boolean;
+    checked?: boolean;
+    selected?: boolean;
+    options?: IOption[];
+}
+export interface IOptionConfig {
+    name: string;
+    resultValue: string | number | boolean;
+    options: IOption[];
+}

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

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

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

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

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

@@ -0,0 +1,39 @@
+"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',
+    textAlign: 'right',
+    verticalAlign: 'middle',
+    float: 'left',
+    fontSize: '14px',
+    color: '#606266',
+    paddingRight: '2px',
+    // padding: '0 12px 0 0',
+    // '-webkit-box-sizing': 'border-box',
+    boxSizing: 'border-box',
+};
+exports.itemContentStyle = {
+    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,
+    fontSize: 'inherit',
+    outline: '0',
+    // padding: '0 5px',
+    paddingLeft: '15px',
+    paddingRight: '5px',
+    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 + ')',
+};

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

@@ -0,0 +1,13 @@
+import { TypeHtml, 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;
+    protected constructor(labelText?: string, placeholder?: string);
+    resetInputPlaceholder(placeholder: string): void;
+    resetInputValue(value?: string | number): void;
+    initEvents(): void;
+}