@type-dom/ui 0.0.1 → 0.0.2

package/README.md

@@ -1,11 +1,11 @@
-# ui
-
-This library was generated with [Nx](https://nx.dev).
-
-## Building
-
-Run `nx build ui` to build the library.
-
-## Running unit tests
-
-Run `nx test ui` to execute the unit tests via [Jest](https://jestjs.io).
+# ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build ui` to build the library.
+
+## Running unit tests
+
+Run `nx test ui` to execute the unit tests via [Jest](https://jestjs.io).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@type-dom/ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "dependencies": {
     "tslib": "^2.3.0"
   },

package/src/basic/td-button/td-button.class.d.ts

@@ -1,9 +1,8 @@
-import { TypeButton, TextNode, Span, TypeHtml, XElement } from '@type-dom/framework';
+import { TypeButton, TextNode, Span } from '@type-dom/framework';
 import { TdIcon } from '../td-icon/td-icon.class';
 import { ITdButton, ITdButtonConfig } from './td-button.interface';
 export declare class TdButton extends TypeButton implements ITdButton {
     className: 'TdButton';
-    parent?: TypeHtml | XElement;
     childNodes: (Span | TdIcon)[];
     span: Span;
     textNode: TextNode;

package/src/basic/td-button/td-button.class.js

@@ -13,39 +13,48 @@ class TdButton extends framework_1.TypeButton {
         super();
         this.className = 'TdButton';
         // this.template = new Template(this);
-        this.span = new framework_1.Span(this);
-        this.span.addStyleObj({
-            display: 'inline-flex',
-            alignItems: 'center',
-        });
         this.textNode = new framework_1.TextNode();
-        this.span.addChild(this.textNode);
-        const slot = new framework_1.Slot(this.span);
-        this.span.addChild(slot);
+        this.span = new framework_1.Span({
+            parent: this,
+            styleObj: {
+                display: 'inline-flex',
+                alignItems: 'center',
+            },
+            childNodes: [
+                this.textNode,
+                new framework_1.Slot(),
+            ]
+        });
         this.childNodes = [this.span];
         this.setConfig(config);
     }
     setConfig(config) {
         this.addStyleObj(td_button_style_1.tdButtonBase);
+        super.setConfig(config);
         if (config === null || config === void 0 ? void 0 : config.title) {
             this.textNode.setText(config.title);
         }
-        if (config === null || config === void 0 ? void 0 : config.SvgClass) {
+        else {
+            this.clearChildren();
+        }
+        if (config === null || config === void 0 ? void 0 : config.svgObj) {
             const icon = new td_icon_class_1.TdIcon({
-                SvgClass: config.SvgClass,
+                childNodes: [
+                    config.svgObj,
+                ]
             });
             if (config.iconPosition === 'right') {
                 icon.addStyleObj(td_icon_style_1.$iconRight);
                 this.addChild(icon);
             }
             else {
-                if (config.title) {
-                    icon.addStyleObj(td_icon_style_1.$iconLeft);
-                }
+                // if (config.title) {
+                //   icon.addStyleObj($iconLeft);
+                // }
                 // else {
                 //   icon.addStyleObj()
                 // }
-                this.unshiftChild(icon);
+                this.unshiftChild(icon); // 前面插入
             }
             if (config.loading) {
                 icon.addStyleObj(td_icon_style_1.$iconLoading);
@@ -106,7 +115,7 @@ class TdButton extends framework_1.TypeButton {
                 else {
                     this.setStyleObj({
                         color: var_1.$button.hover.textColor,
-                        backgroundColor: var_1.$button.hover.borderColor,
+                        backgroundColor: var_1.$button.hover.borderColor, // $colors['primary']['light-3'],
                         borderColor: var_1.$button.hover.borderColor,
                     });
                 }

package/src/basic/td-button/td-button.interface.d.ts

@@ -1,4 +1,4 @@
-import { ITypeButton, ISpan } from '@type-dom/framework';
+import { ITypeButton, ISpan, ITypeConfig, TypeSvgSvg } from '@type-dom/framework';
 import { ITdIcon } from '../td-icon/td-icon.interface';
 export interface ITdButton extends ITypeButton {
     className: 'TdButton';
@@ -20,12 +20,13 @@ export type IButtonNativeType = 'button' | 'submit' | 'reset';
  *     color 自定义按钮的颜色。
  *     disabled  按钮是否为禁用状态
  */
-export interface ITdButtonConfig {
+export interface ITdButtonConfig extends ITypeConfig {
     size: IButtonSize;
     disabled: boolean;
     title: string;
     type: IButtonType;
     SvgClass: any;
+    svgObj: TypeSvgSvg;
     iconPosition: 'left' | 'right';
     icon: string;
     nativeType: IButtonNativeType;

package/src/basic/td-button/td-button.style.js

@@ -48,16 +48,16 @@ exports.tdButtonBase = {
     boxSizing: 'border-box',
     outline: 'none',
     transition: '.1s',
-    fontWeight: var_1.$button.fontWeight,
+    fontWeight: var_1.$button.fontWeight, // getCssVar('button', 'font-weight');
     userSelect: 'none',
     verticalAlign: 'middle',
     appearance: 'none',
     // '-webkit-appearance': 'none',
-    backgroundColor: var_1.$button.bgColor,
+    backgroundColor: var_1.$button.bgColor, // getCssVar('button', 'bg-color');
     // border: $border, // getCssVar('border'),
     borderWidth: var_1.$borderWidth,
     borderStyle: var_1.$borderStyle,
-    borderColor: var_1.$button.borderColor,
+    borderColor: var_1.$button.borderColor, // getCssVar('button', 'border-color');
     padding: '8px 15px',
 };
 exports.$buttonStateColors = {};
@@ -74,16 +74,16 @@ function buttonVariant($type) {
         hover: {
             color: var_1.$colorWhite,
             // 'link-text-color': $colors[$type]['light-5'],
-            backgroundColor: var_1.$colors[$type]['light-3'],
+            backgroundColor: var_1.$colors[$type]['light-3'], // ['color', $type, 'light-3'],
             borderColor: var_1.$colors[$type]['light-3'], // ['color', $type, 'light-3'],
         },
         active: {
-            backgroundColor: var_1.$colors[$type]['dark-2'],
+            backgroundColor: var_1.$colors[$type]['dark-2'], // ['color', $type, 'dark-2'],
             borderColor: var_1.$colors[$type]['dark-2'] // ['color', $type, 'dark-2'],
         },
         disabled: {
             color: var_1.$colorWhite,
-            backgroundColor: var_1.$colors[$type]['light-5'],
+            backgroundColor: var_1.$colors[$type]['light-5'], // ['color', $type, 'light-5'],
             borderColor: var_1.$colors[$type]['light-5'], // ['color', $type, 'light-5'],
         },
     };

package/src/basic/td-container/td-aside/td-aside.class.d.ts

@@ -2,5 +2,5 @@ import { TypeAside } from '@type-dom/framework';
 import { ITdAsideConfig } from './td-aside.interface';
 export declare class TdAside extends TypeAside {
     className: 'TdAside';
-    constructor(config?: ITdAsideConfig);
+    constructor(config?: Partial<ITdAsideConfig>);
 }

package/src/basic/td-container/td-aside/td-aside.class.js

@@ -10,8 +10,20 @@ class TdAside extends framework_1.TypeAside {
             overflow: 'auto',
             boxSizing: 'border-box',
             flexShrink: 0,
-            width: (config === null || config === void 0 ? void 0 : config.width) || '300px'
+            width: '300px'
         });
+        if (config === null || config === void 0 ? void 0 : config.width) {
+            if (typeof config.width !== 'number') {
+                console.warn('TdAside: width should be a number');
+                this.addStyleObj({
+                    width: config.width,
+                });
+            }
+            this.addStyleObj({
+                width: config.width + 'px',
+            });
+        }
+        this.setConfig(config);
     }
 }
 exports.TdAside = TdAside;

package/src/basic/td-container/td-aside/td-aside.interface.d.ts

@@ -1,7 +1,8 @@
-import { ITypeAside } from '@type-dom/framework';
+import { ITypeAside, ITypeConfig } from '@type-dom/framework';
 export interface ITdAside extends ITypeAside {
     className: 'td-aside';
 }
-export interface ITdAsideConfig {
+export interface ITdAsideConfig extends ITypeConfig {
+    name: string;
     width: string | number;
 }

package/src/basic/td-container/td-container.class.d.ts

@@ -1,7 +1,10 @@
-import { TypeHtml, TypeSection, XElement } from '@type-dom/framework';
+import { TypeElement, TypeSection } from '@type-dom/framework';
 import { ITdContainerConfig } from './td-container.interface';
+import { TdAside } from './td-aside/td-aside.class';
+import { TdHeader } from './td-header/td-header.class';
+import { TdMain } from './td-main/td-main.class';
 export declare class TdContainer extends TypeSection {
     className: 'TdContainer';
-    parent?: TypeHtml | XElement;
-    constructor(config?: ITdContainerConfig);
+    childNodes: (TdAside | TdHeader | TdMain | TdContainer | TypeElement)[];
+    constructor(config?: Partial<ITdContainerConfig>);
 }

package/src/basic/td-container/td-container.class.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdContainer = void 0;
 const framework_1 = require("@type-dom/framework");
-// import '../../style/scss/index.scss';
 class TdContainer extends framework_1.TypeSection {
     constructor(config) {
         super();
@@ -11,17 +10,19 @@ class TdContainer extends framework_1.TypeSection {
         this.addAttrClass('td-container');
         this.addStyleObj({
             display: 'flex',
-            flexDirection: 'row',
+            flexDirection: 'row', // vertical ===> column
             flex: 1,
             flexBasis: 'auto',
             boxSizing: 'border-box',
             minWidth: 0,
         });
+        this.childNodes = [];
         if (config === null || config === void 0 ? void 0 : config.vertical) {
             this.addStyleObj({
                 flexDirection: 'column'
             });
         }
+        this.setConfig(config);
     }
 }
 exports.TdContainer = TdContainer;

package/src/basic/td-container/td-container.interface.d.ts

@@ -1,8 +1,14 @@
-import { ITypeSection } from '@type-dom/framework';
+import { ITypeConfig, ITypeSection, TextNode, TypeElement } from '@type-dom/framework';
+import { TdAside } from './td-aside/td-aside.class';
+import { TdHeader } from './td-header/td-header.class';
+import { TdMain } from './td-main/td-main.class';
+import { TdContainer } from './td-container.class';
 export interface ITdContainer extends ITypeSection {
     className: 'TdContainer';
 }
-export interface ITdContainerConfig {
+export interface ITdContainerConfig extends ITypeConfig {
+    name: string;
     vertical: boolean;
     direction: 'vertical' | 'horizontal';
+    childNodes: (TdAside | TdHeader | TdMain | TdContainer | TypeElement | TextNode)[];
 }

package/src/basic/td-container/td-footer/td-footer.class.d.ts

@@ -2,5 +2,5 @@ import { TypeFooter } from '@type-dom/framework';
 import type { ITdFooter, ITdFooterConfig } from './td-footer.interface';
 export declare class TdFooter extends TypeFooter implements ITdFooter {
     className: 'TdFooter';
-    constructor(config?: ITdFooterConfig);
+    constructor(config?: Partial<ITdFooterConfig>);
 }

package/src/basic/td-container/td-footer/td-footer.class.js

@@ -13,6 +13,18 @@ class TdFooter extends framework_1.TypeFooter {
             flexShrink: 0,
             backgroundColor: '#a0cfff',
         });
+        if (config === null || config === void 0 ? void 0 : config.styleObj) {
+            this.addStyleObj(config.styleObj);
+        }
+        if (config === null || config === void 0 ? void 0 : config.name) {
+            this.addAttrName(config.name);
+        }
+        if (config === null || config === void 0 ? void 0 : config.childNodes) {
+            this.childNodes = config.childNodes;
+        }
+        if (config === null || config === void 0 ? void 0 : config.text) {
+            this.childNodes = [new framework_1.TextNode(config.text)];
+        }
     }
 }
 exports.TdFooter = TdFooter;

package/src/basic/td-container/td-footer/td-footer.interface.d.ts

@@ -1,7 +1,11 @@
-import { ITypeFooter } from '@type-dom/framework';
+import { IStyle, ITypeFooter, TextNode, TypeElement } from '@type-dom/framework';
 export interface ITdFooter extends ITypeFooter {
     className: 'TdFooter';
 }
 export interface ITdFooterConfig {
     height: string;
+    name: string;
+    text: string;
+    styleObj: Partial<IStyle>;
+    childNodes: (TypeElement | TextNode)[];
 }

package/src/basic/td-container/td-header/td-header.class.d.ts

@@ -1,8 +1,9 @@
-import { TypeHeader } from '@type-dom/framework';
+import { TextNode, TypeElement, TypeHeader } from '@type-dom/framework';
 import type { ITdHeader, ITdHeaderConfig } from './td-header.interface';
 import { TdContainer } from '../td-container.class';
 export declare class TdHeader extends TypeHeader implements ITdHeader {
     className: 'TdHeader';
     parent?: TdContainer;
-    constructor(config?: ITdHeaderConfig);
+    childNodes: (TypeElement | TextNode)[];
+    constructor(config?: Partial<ITdHeaderConfig>);
 }

package/src/basic/td-container/td-header/td-header.class.js

@@ -13,6 +13,11 @@ class TdHeader extends framework_1.TypeHeader {
             flexShrink: 0,
             backgroundColor: '#a0cfff',
         });
+        this.childNodes = [];
+        if (config === null || config === void 0 ? void 0 : config.text) {
+            const text = new framework_1.TextNode(config === null || config === void 0 ? void 0 : config.text);
+            this.childNodes = [text];
+        }
     }
 }
 exports.TdHeader = TdHeader;

package/src/basic/td-container/td-header/td-header.interface.d.ts

@@ -1,7 +1,10 @@
-import { ITypeHeader } from '@type-dom/framework';
+import { ITypeHeader, TextNode, TypeElement } from '@type-dom/framework';
 export interface ITdHeader extends ITypeHeader {
     className: 'TdHeader';
 }
 export interface ITdHeaderConfig {
+    name: string;
+    text: string;
     height: string;
+    childNodes: (TypeElement | TextNode)[];
 }

package/src/basic/td-container/td-main/td-main.class.d.ts

@@ -1,6 +1,6 @@
 import { TypeMain } from '@type-dom/framework';
-import { ITdMain } from './td-main.interface';
+import { ITdMain, ITdMainConfig } from './td-main.interface';
 export declare class TdMain extends TypeMain implements ITdMain {
     className: 'TdMain';
-    constructor();
+    constructor(config?: Partial<ITdMainConfig>);
 }

package/src/basic/td-container/td-main/td-main.class.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdMain = void 0;
 const framework_1 = require("@type-dom/framework");
 class TdMain extends framework_1.TypeMain {
-    constructor() {
+    constructor(config) {
         super();
         this.className = 'TdMain';
         this.addStyleObj({
@@ -14,6 +14,10 @@ class TdMain extends framework_1.TypeMain {
             boxSizing: 'border-box',
             padding: '20px',
         });
+        if (config === null || config === void 0 ? void 0 : config.name) {
+            this.addAttrName(config.name);
+        }
+        this.setConfig(config);
     }
 }
 exports.TdMain = TdMain;

package/src/basic/td-container/td-main/td-main.interface.d.ts

@@ -1,6 +1,7 @@
-import { ITypeMain } from '@type-dom/framework';
+import { ITypeConfig, ITypeMain } from '@type-dom/framework';
 export interface ITdMain extends ITypeMain {
     className: 'TdMain';
 }
-export interface ITdMainConfig {
+export interface ITdMainConfig extends ITypeConfig {
+    name: string;
 }

package/src/basic/td-icon/td-icon.class.d.ts

@@ -6,6 +6,6 @@ export declare class TdIcon extends TypeI implements ITdIcon {
     svg?: TypeSvgSvg;
     constructor(config?: Partial<ITdIconConfig>);
     createSvg(className: string): void;
-    setConfig(config?: Partial<ITdIconConfig>): void;
+    resetConfig(config?: Partial<ITdIconConfig>): void;
     replaceSvg(svg: TypeSvgSvg): void;
 }

package/src/basic/td-icon/td-icon.class.js

@@ -7,22 +7,27 @@ class TdIcon extends framework_1.TypeI {
     constructor(config) {
         super();
         this.className = 'TdIcon';
-        const slot = new framework_1.Slot(this);
+        const slot = new framework_1.Slot({ parent: this });
         this.childNodes = [slot];
+        this.addStyleObj(td_icon_style_1.$tdIcon);
         this.setConfig(config);
+        this.resetConfig(config);
     }
     // todo
     createSvg(className) {
         return;
     }
-    setConfig(config) {
-        this.addStyleObj(td_icon_style_1.$tdIcon);
-        if (config === null || config === void 0 ? void 0 : config.SvgClass) {
+    resetConfig(config) {
+        if (config === null || config === void 0 ? void 0 : config.SvgClass) { // todo 直接作为 childNodes的子元素更合理；
             const svg = new config.SvgClass(this);
             // svg.resetSize('1em', '1em');
             this.addChild(svg);
             this.svg = svg;
         }
+        if (config === null || config === void 0 ? void 0 : config.svgObj) { // 直接作为 childNodes的子元素更合理；
+            this.addChild(config.svgObj);
+            this.svg = config.svgObj;
+        }
         if (config === null || config === void 0 ? void 0 : config.color) {
             this.addStyleObj({
                 color: config.color,
@@ -40,7 +45,7 @@ class TdIcon extends framework_1.TypeI {
             this.addStyleObj(td_icon_style_1.$iconRight);
         }
         else {
-            // this.addStyleObj($iconLeft);
+            this.addStyleObj(td_icon_style_1.$iconLeft);
         }
         // this.addStyleObj(sizeOpts[size]);
         // this.addAttrObj({

package/src/basic/td-icon/td-icon.interface.d.ts

@@ -1,9 +1,10 @@
-import { ITypeI } from '@type-dom/framework';
+import { ITypeConfig, ITypeI, TypeSvgSvg } from '@type-dom/framework';
 export interface ITdIcon extends ITypeI {
     className: 'TdIcon';
 }
-export interface ITdIconConfig {
+export interface ITdIconConfig extends ITypeConfig {
     SvgClass: any;
+    svgObj: TypeSvgSvg;
     size: string;
     color: string;
     loading: boolean;

package/src/basic/td-icon/td-icon.style.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.$iconLeft = exports.$iconRight = exports.$iconLoading = exports.$tdIcon = void 0;
 const framework_1 = require("@type-dom/framework");
 exports.$tdIcon = {
-    height: '1em',
+    // height: '1em',
     width: '1em',
     lineHeight: '1em',
     display: framework_1.StyleDisplay.inlineFlex,

package/src/basic/td-select/td-select.class.js

@@ -12,8 +12,7 @@ class TdSelect extends framework_1.TypeSelect {
         this.childNodes = [];
     }
     setOptions(options, value) {
-        this.clearChildNodes();
-        this.clearChildDom();
+        this.clearChildren();
         const firstOpt = new option_class_1.SelectOption();
         firstOpt.text.setText('请选择');
         firstOpt.addAttrObj({

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

@@ -13,7 +13,7 @@ class Overlay extends framework_1.TypeDiv {
             top: '0',
             right: '0',
             bottom: '0',
-            height: '100%',
+            height: '100%', // ???
             zIndex: 2000,
             backgroundColor: 'rgba(0, 0, 0, 0.5)',
             overflow: 'auto',
@@ -30,10 +30,14 @@ class Overlay extends framework_1.TypeDiv {
     }
     // 设置消息
     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();
+        const span = new framework_1.Span({
+            parent: this.container.body,
+            childNodes: [
+                new framework_1.TextNode(msg),
+            ]
+        });
+        // this.container.body.clearChild();
+        this.container.body.clearChildren();
         this.container.body.appendChild(span);
     }
     // 设置复杂的内容
@@ -48,10 +52,8 @@ class Overlay extends framework_1.TypeDiv {
     }
     clear() {
         this.container.header.title.text.setText('标题');
-        this.container.body.clearChildNodes();
-        this.container.body.clearChildDom();
-        this.container.body.clearChildNodes();
-        this.container.footer.clearChildDom();
+        this.container.body.clearChildren();
+        this.container.footer.clearChildrenDom();
     }
     clearBody() {
         // this.container.body.clearChildDom();

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

@@ -12,8 +12,7 @@ class CheckboxGroup extends framework_1.TypeDiv {
         this.value = [];
     }
     setOptions(options) {
-        this.clearChildNodes();
-        this.clearChildDom();
+        this.clearChildren();
         this.value = [];
         const random = Math.random();
         options.forEach((opt) => {

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

@@ -7,7 +7,7 @@ class CheckboxOption extends framework_1.TypeSpan {
     constructor() {
         super();
         this.className = 'CheckboxOption';
-        this.input = new framework_1.Input(this);
+        this.input = new framework_1.Input({ parent: this });
         this.input.addAttrObj({
             type: 'checkbox',
             // name: optionConfig.name,

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

@@ -15,11 +15,11 @@ class FieldItem extends framework_1.TypeComponent {
             // marginBottom: '10px!important',
             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',

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

@@ -8,7 +8,7 @@ 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 = new framework_1.Input({ parent: this });
         this.content.propObj = {
             styleObj: Object.assign({}, field_item_style_1.itemContentStyle),
             attrObj: {

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

@@ -43,7 +43,7 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
             borderRadius: '4px 0 0 4px',
             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',
@@ -132,8 +132,7 @@ class PropertyOptions extends field_item_abstract_1.FieldItem {
         this.selectObj.setOptions(optionConfig.options, optionConfig.resultValue);
         // todo 监听事件
         this.optionConfig = optionConfig;
-        this.optionsContent.clearChildNodes();
-        this.optionsContent.clearChildDom();
+        this.optionsContent.clearChildren();
         const styleObj = {
             display: 'inline-block',
             width: '45%',
@@ -187,8 +186,7 @@ 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%',

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

@@ -18,7 +18,7 @@ class FieldRadio extends field_item_abstract_1.FieldItem {
         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];

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

@@ -7,7 +7,7 @@ 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(this);
+        this.content = new framework_1.Span({ parent: this });
         this.content.propObj = {
             styleObj: {
                 height: '28px',

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

@@ -9,10 +9,10 @@ class FieldTextarea extends field_item_abstract_1.FieldItem {
         super(labelText);
         this.mode = 'edit';
         this.addStyleObj({
-            display: 'block',
+            display: 'block', // 不是 flex
             marginBottom: '20px',
         });
-        this.content = new framework_1.Textarea(this);
+        this.content = new framework_1.Textarea({ parent: this });
         this.content.propObj = {
             styleObj: {
                 height: '100%',

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

@@ -12,8 +12,7 @@ class RadioGroup extends framework_1.TypeDiv {
         this.childNodes = [];
     }
     setOptions(options) {
-        this.clearChildNodes();
-        this.clearChildDom();
+        this.clearChildren();
         const random = Math.random();
         options.forEach((opt) => {
             const optObj = new radio_option_class_1.RadioOption();

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

@@ -10,7 +10,7 @@ class RadioOption extends framework_1.TypeSpan {
         this.addStyleObj({
             padding: '0 5px',
         });
-        this.input = new framework_1.Input(this);
+        this.input = new framework_1.Input({ parent: this });
         this.input.addAttrObj({
             type: 'radio',
             // name: optionConfig.name,

package/src/form/select/select.class.js

@@ -11,10 +11,9 @@ class Select extends framework_1.TypeSelect {
         this.value = '';
     }
     setOptionConfig(optionConfig) {
-        this.clearChildNodes();
-        this.clearChildDom();
+        this.clearChildren();
         optionConfig.options.forEach((opt) => {
-            const optionObj = new framework_1.Option(this);
+            const optionObj = new framework_1.Option({ parent: this });
             optionObj.setAttrObj({
                 // label: opt.label,
                 value: opt.value,

package/src/others/collapsible-box/heading/expand-heading.js

@@ -32,7 +32,7 @@ class ExpandHeading extends framework_1.TypeComponent {
         });
         this.title = new framework_1.TextNode(title);
         // span.setStyle('verticalAlign', 'middle');
-        const span = new framework_1.Span(this);
+        const span = new framework_1.Span({ parent: this });
         span.childNodes = [this.title];
         this.childNodes = [this.svg, span];
     }

package/src/styles/var.js

@@ -187,7 +187,7 @@ console.log('$colors is ', exports.$colors);
 // Button
 // css3 var in packages/theme-chalk/src/button.scss
 exports.$button = {
-    fontWeight: exports.$fontWeightPrimary,
+    fontWeight: exports.$fontWeightPrimary, // getCssVar('font-weight-primary'),
     borderColor: exports.$borderColors[''],
     bgColor: exports.$fillColors.blank,
     textColor: exports.$textColors.regular,
@@ -209,8 +209,8 @@ exports.$button = {
     },
     active: {
         textColor: exports.$colorPrimary,
-        borderColor: exports.$colorPrimary,
-        bgColor: exports.$colors.primary['light-9'],
+        borderColor: exports.$colorPrimary, // 'hover-text-color'
+        bgColor: exports.$colors.primary['light-9'], //  getCssVar('button', 'hover-bg-color),
         color: exports.$textColors.primary, // getCssVar('text-color', 'primary'),
     },
     outline: {