@type-dom/ui 0.0.4 → 0.0.6

package/src/components/basic/td-link/td-link.class.js

@@ -5,101 +5,99 @@ const framework_1 = require("@type-dom/framework");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
 const td_link_style_1 = require("../td-link/td-link.style");
 class TdLink extends ui_abstract_1.UI {
-    constructor(configs) {
-        super({ tag: 'a' });
+    constructor(params) {
+        super(params, 'a');
         this.className = 'TdLink';
-        this.addStyleObj(td_link_style_1.$baseLink);
-        this.setConfig(configs);
+        (0, td_link_style_1.useType)(params);
+        this.ctrl.addStyleObj(td_link_style_1.$linkStyle);
+        this.props = this.setParams(params);
     }
-    setConfig(config) {
-        super.setConfig(config);
-        this.config = config;
-        if (config === null || config === void 0 ? void 0 : config.href) {
-            this.addAttrObj({
-                href: config.href
-            });
-        }
-        if (config === null || config === void 0 ? void 0 : config.target) {
-            this.addAttrObj({
-                target: config.target
-            });
-        }
-        if (config === null || config === void 0 ? void 0 : config.disabled) {
-            this.addAttrObj({
-                disabled: config.disabled
-            });
-        }
-        if (config === null || config === void 0 ? void 0 : config.type) {
-            if (config === null || config === void 0 ? void 0 : config.disabled) {
-                this.addStyleObj(td_link_style_1.$linkStateColors[config.type].disabled);
+    // override beforeCreate() {
+    //   this.ctrl.addStyleObj($linkStyle);
+    // }
+    setup() {
+        const props = this.props;
+        this.ctrl.addAttrObj({
+            href: props === null || props === void 0 ? void 0 : props.href,
+            target: props === null || props === void 0 ? void 0 : props.target,
+            disabled: props === null || props === void 0 ? void 0 : props.disabled
+        });
+        if (props === null || props === void 0 ? void 0 : props.type) {
+            if (props === null || props === void 0 ? void 0 : props.disabled) {
+                this.ctrl.addStyleObj(td_link_style_1.$linkStateColors[props.type].disabled);
             }
             else {
-                this.addStyleObj(td_link_style_1.$linkStateColors[config.type].default);
+                this.ctrl.addStyleObj(td_link_style_1.$linkStateColors[props.type].default);
             }
         }
         else {
-            this.addStyleObj(td_link_style_1.$linkStateColors.default.default);
+            this.ctrl.addStyleObj(td_link_style_1.$linkStateColors.default.default);
         }
-        if (config === null || config === void 0 ? void 0 : config.icon) {
-            if ((config === null || config === void 0 ? void 0 : config.iconPosition) === 'left') {
-                // 插入到前面
-                this.unshiftChild(config.icon);
-            }
-            else {
-                this.addChild(config.icon);
-            }
+        if (props === null || props === void 0 ? void 0 : props.icon) {
+            this.unshiftChild(props.icon);
         }
+        this.inner = new framework_1.Span({
+            name: 'inner',
+            styleObj: td_link_style_1.$linkInnerStyle
+        });
+        this.inner.addChild(this.getSlotNode());
+        this.addChild(this.inner);
     }
     initEvents() {
         this.addEvents({
-            mouseover: () => {
-                var _a, _b, _c, _d;
-                if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.type) {
-                    if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.disabled) {
-                        this.setStyleObj({
-                            cursor: framework_1.StyleCursor.notAllowed
+            click: (evt) => {
+                this.handleClick(evt);
+            },
+            mouseenter: () => {
+                if (this.props.type) {
+                    if (this.props.disabled) {
+                        this.ctrl.setStyleObj({
+                            cursor: 'notAllowed'
                         });
                     }
                     else {
-                        this.setStyleObj(td_link_style_1.$linkStateColors[(_c = this.config) === null || _c === void 0 ? void 0 : _c.type].hover);
+                        this.ctrl.setStyleObj(td_link_style_1.$linkStateColors[this.props.type].hover);
                     }
                 }
                 else {
-                    this.setStyleObj(td_link_style_1.$linkStateColors.default.hover);
+                    this.ctrl.setStyleObj(td_link_style_1.$linkStateColors.default.hover);
                 }
-                if (((_d = this.config) === null || _d === void 0 ? void 0 : _d.underline) === false) { // 设置 false 的情况下，不显示下划线
-                    this.setStyleObj({
+                if (this.props.underline === false) {
+                    // 设置 false 的情况下，不显示下划线
+                    this.ctrl.setStyleObj({
                         textDecoration: 'none'
                     });
                 }
                 else {
                     // 1. 默认显示下划线
                     // 2. 默认显示下划线，如果设置了 underline 为 true，则显示下划线
-                    this.setStyleObj({
+                    this.ctrl.setStyleObj({
                         textDecoration: 'underline'
                     });
                 }
             },
-            mouseout: (evt) => {
-                var _a, _b, _c, _d, _e;
-                this.setStyleObj({
+            mouseleave: (evt) => {
+                this.ctrl.setStyleObj({
                     textDecoration: 'none'
                 });
-                if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.type) {
-                    this.removeStyleObj(td_link_style_1.$linkStateColors[(_b = this.config) === null || _b === void 0 ? void 0 : _b.type].hover);
-                    if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.disabled) {
+                if (this.props.type) {
+                    this.ctrl.removeStyleObj(td_link_style_1.$linkStateColors[this.props.type].hover);
+                    if (this.props.disabled) {
                         evt === null || evt === void 0 ? void 0 : evt.preventDefault();
-                        this.setStyleObj(td_link_style_1.$linkStateColors[(_d = this.config) === null || _d === void 0 ? void 0 : _d.type].disabled);
+                        this.ctrl.setStyleObj(td_link_style_1.$linkStateColors[this.props.type].disabled);
                     }
                     else {
-                        this.setStyleObj(td_link_style_1.$linkStateColors[(_e = this.config) === null || _e === void 0 ? void 0 : _e.type].default);
+                        this.ctrl.setStyleObj(td_link_style_1.$linkStateColors[this.props.type].default);
                     }
                 }
                 else {
-                    this.removeStyleObj(td_link_style_1.$linkStateColors.default.hover);
+                    this.ctrl.removeStyleObj(td_link_style_1.$linkStateColors.default.hover);
                 }
             }
         });
     }
+    handleClick(event) {
+        this.emit('click', event);
+    }
 }
 exports.TdLink = TdLink;

package/src/components/basic/td-link/td-link.interface.d.ts

@@ -1,33 +1,41 @@
-import { TdIcon } from '@type-dom/ui';
 import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { TdIcon } from '../td-icon/td-icon.class';
 export interface ITdLink extends IUI {
     className: 'TdLink';
 }
+export type ITdLinkType = 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger';
 export interface ITdLinkConfig extends IUIConfig {
     title?: string;
-    type?: 'primary' | 'success' | 'warning' | 'info' | 'danger' | 'default';
+    /**
+     * @description type
+     *   default: 'default',
+     */
+    type?: ITdLinkType;
     /**
      * @description whether the component has underline
+     *     default: true,
      */
     underline?: boolean;
     /**
      * @description whether the component is disabled
+     *  default: false
      */
     disabled?: boolean;
     /**
      * @description same as native hyperlink's `href`
+     *  default: ''
      */
     href?: string;
     /**
      * @description same as native hyperlink's `target`
+     *     default: '_self',
      */
     target?: '_blank' | '_parent' | '_self' | '_top' | string;
     /**
      * @description icon component
      */
     icon?: TdIcon;
-    /**
-     * @description icon position 默认 right
-     */
-    iconPosition?: 'left' | 'right';
+    emits?: {
+        click?: (event: MouseEvent) => void;
+    };
 }

package/src/components/basic/td-link/td-link.style.d.ts

@@ -1,5 +1,16 @@
-import { IStyle } from '@type-dom/framework';
+import { IStyle } from '@type-dom/css-type';
 import { IType } from '../../../styles/var';
-export declare const $baseLink: Partial<IStyle>;
-export declare const $linkStateColors: Record<string, any>;
+import { ITdLinkConfig } from './td-link.interface';
+export declare const $link: {
+    fontSize: string;
+    fontWeight: number;
+    textColor: string;
+    hoverTextColor: string;
+    disabledTextColor: string;
+};
+export declare let $linkTextColor: string;
+export declare function useType(config?: ITdLinkConfig): void;
+export declare const $linkStyle: IStyle;
+export declare const $linkInnerStyle: IStyle;
+export declare const $linkStateColors: Record<IType, Record<string, IStyle>>;
 export declare function buttonVariant($type: IType): void;

package/src/components/basic/td-link/td-link.style.js

@@ -1,9 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonVariant = exports.$linkStateColors = exports.$baseLink = void 0;
-const framework_1 = require("@type-dom/framework");
+exports.$linkStateColors = exports.$linkInnerStyle = exports.$linkStyle = exports.$linkTextColor = exports.$link = void 0;
+exports.useType = useType;
+exports.buttonVariant = buttonVariant;
 const var_1 = require("../../../styles/var");
-exports.$baseLink = {
+// Link
+// css3 var in packages/theme-chalk/src/link.scss
+exports.$link = {
+    // 'font-size': getCssVar('font-size-base'),
+    fontSize: var_1.$fontSizes.base,
+    // 'font-weight': getCssVar('font-weight-primary'),
+    fontWeight: var_1.$fontWeightPrimary,
+    // 'text-color': getCssVar('text-color-regular'),
+    textColor: var_1.$textColor.regular,
+    // 'hover-text-color': getCssVar('color-primary'),
+    hoverTextColor: var_1.$colors.primary.base,
+    // 'disabled-text-color': getCssVar('text-color-placeholder'),
+    disabledTextColor: var_1.$textColor.placeholder
+};
+function useType(config) {
+    exports.$link.textColor = var_1.$colors[(config === null || config === void 0 ? void 0 : config.type) || 'default'].base;
+    exports.$link.hoverTextColor = var_1.$colors[(config === null || config === void 0 ? void 0 : config.type) || 'default']['light-3'];
+    exports.$link.disabledTextColor = var_1.$colors[(config === null || config === void 0 ? void 0 : config.type) || 'default']['light-5'];
+    buttonVariant((config === null || config === void 0 ? void 0 : config.type) || 'default');
+}
+exports.$linkStyle = {
     display: 'inline-flex',
     flexDirection: 'row',
     alignItems: 'center',
@@ -12,8 +33,19 @@ exports.$baseLink = {
     position: 'relative',
     textDecoration: 'none',
     outline: 'none',
-    cursor: framework_1.StyleCursor.pointer,
-    padding: '0'
+    cursor: 'pointer',
+    padding: '0',
+    // font-size: getCssVar('link', 'font-size'),
+    fontSize: exports.$link.fontSize,
+    // font-weight: getCssVar('link', 'font-weight'),
+    fontWeight: exports.$link.fontWeight,
+    // color: getCssVar('link', 'text-color'),
+    color: exports.$link.textColor
+};
+exports.$linkInnerStyle = {
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center'
 };
 exports.$linkStateColors = {};
 function buttonVariant($type) {
@@ -22,7 +54,9 @@ function buttonVariant($type) {
             color: var_1.$colors[$type].base
         },
         hover: {
-            color: $type === 'default' ? var_1.$colors['primary'].base : var_1.$colors[$type]['light-3'] // ['color', $type, 'light-3'],
+            color: $type === 'default'
+                ? var_1.$colors['primary'].base
+                : var_1.$colors[$type]['light-3'] // ['color', $type, 'light-3'],
             // content: '',
             // position: 'absolute',
             // left: 0,
@@ -39,7 +73,3 @@ function buttonVariant($type) {
         }
     };
 }
-exports.buttonVariant = buttonVariant;
-for (const $type of ['primary', 'success', 'warning', 'info', 'danger', 'default']) {
-    buttonVariant($type);
-}

package/src/components/basic/td-scrollbar/bar/bar.class.d.ts

@@ -3,6 +3,7 @@ import { TdScrollbarThumb } from '../thumb/thumb.class';
 import { ITdScrollbarBar, ITdScrollbarBarConfig } from './bar.interface';
 export declare class TdScrollbarBar extends UI implements ITdScrollbarBar {
     className: 'TdScrollbarBar';
+    props: ITdScrollbarBarConfig;
     thumbs: [TdScrollbarThumb, TdScrollbarThumb];
-    constructor(config?: ITdScrollbarBarConfig);
+    constructor(params?: ITdScrollbarBarConfig);
 }

package/src/components/basic/td-scrollbar/bar/bar.class.js

@@ -4,28 +4,29 @@ exports.TdScrollbarBar = void 0;
 const ui_abstract_1 = require("../../../../ui/ui.abstract");
 const thumb_class_1 = require("../thumb/thumb.class");
 class TdScrollbarBar extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdScrollbarBar';
-        this.addAttrName('td-scrollbar-bar');
-        this.addStyleObj({
+        this.ctrl.addAttrName('td-scrollbar-bar');
+        this.ctrl.addStyleObj({
             position: 'absolute',
             right: '2px',
             bottom: '2px',
             zIndex: 1,
-            borderRadius: '4px',
+            borderRadius: '4px'
         });
         // config?.minSize 20
         this.thumbs = [
             new thumb_class_1.TdScrollbarThumb({
                 vertical: false,
-                ratio: 1,
+                ratio: 1
             }),
             new thumb_class_1.TdScrollbarThumb({
                 vertical: true,
-                ratio: 1,
+                ratio: 1
             })
         ];
+        this.props = this.setParams(params);
     }
 }
 exports.TdScrollbarBar = TdScrollbarBar;

package/src/components/basic/td-scrollbar/td-scrollbar.class.d.ts

@@ -1,9 +1,9 @@
-import { ITdScrollbar, ITdScrollbarConfig } from './td-scrollbar.interface';
 import { UI } from '../../../ui/ui.abstract';
+import { ITdScrollbar, ITdScrollbarConfig } from './td-scrollbar.interface';
 export declare class TdScrollbar extends UI implements ITdScrollbar {
     className: 'TdScrollbar';
+    props: ITdScrollbarConfig;
     private wrap;
     private view;
-    constructor(config?: Partial<ITdScrollbarConfig>);
-    setConfig(config?: Partial<ITdScrollbarConfig>): void;
+    constructor(params?: ITdScrollbarConfig);
 }

package/src/components/basic/td-scrollbar/td-scrollbar.class.js

@@ -1,51 +1,49 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdScrollbar = void 0;
-const ui_abstract_1 = require("../../../ui/ui.abstract");
 const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
 const bar_class_1 = require("./bar/bar.class");
 class TdScrollbar extends ui_abstract_1.UI {
-    constructor(config) {
-        super(config);
+    constructor(params) {
+        super(params, params === null || params === void 0 ? void 0 : params.tag);
         this.className = 'TdScrollbar';
-        this.addAttrName('td-scrollbar');
-        this.addStyleObj({
+        this.ctrl.addAttrName('td-scrollbar');
+        this.ctrl.addStyleObj({
             overflow: 'hidden',
             position: 'relative',
-            height: '100%',
+            height: '100%'
         });
         this.wrap = new framework_1.Div({
             name: 'td-scrollbar-wrap',
             styleObj: {
                 overflow: 'auto',
-                height: (config === null || config === void 0 ? void 0 : config.height) || '100%',
+                height: (params === null || params === void 0 ? void 0 : params.height) || '100%'
             }
         });
         this.view = new framework_1.Div({
+            // params?.tag 默认是div，简化处理，不加其它的tag标签了；
             name: 'td-scrollbar-view'
         });
-        if (config === null || config === void 0 ? void 0 : config.viewStyle) {
-            this.view.addStyleObj(config.viewStyle);
+        if (params === null || params === void 0 ? void 0 : params.viewStyle) {
+            this.view.ctrl.addStyleObj(params.viewStyle);
         }
         this.wrap.addChild(this.view);
-        if (config === null || config === void 0 ? void 0 : config.wrapStyle) {
-            this.wrap.addStyleObj(config.wrapStyle);
+        if (params === null || params === void 0 ? void 0 : params.wrapStyle) {
+            this.wrap.ctrl.addStyleObj(params.wrapStyle);
         }
         this.addChild(this.wrap);
-        if (!(config === null || config === void 0 ? void 0 : config.native)) {
+        if (!(params === null || params === void 0 ? void 0 : params.native)) {
             const bar = new bar_class_1.TdScrollbarBar({
-                always: (config === null || config === void 0 ? void 0 : config.always) || true,
-                minSize: (config === null || config === void 0 ? void 0 : config.minSize) || 20,
+                always: (params === null || params === void 0 ? void 0 : params.always) || true,
+                minSize: (params === null || params === void 0 ? void 0 : params.minSize) || 20
             });
             this.addChildren(...bar.thumbs);
         }
-        if (config === null || config === void 0 ? void 0 : config.contents) {
-            this.view.addChildren(...config.contents);
+        if (params === null || params === void 0 ? void 0 : params.contents) {
+            this.view.addChildren(...params.contents);
         }
-        this.setConfig(config);
-    }
-    setConfig(config) {
-        super.setConfig(config);
+        this.props = this.setParams(params);
     }
 }
 exports.TdScrollbar = TdScrollbar;

package/src/components/basic/td-scrollbar/td-scrollbar.interface.d.ts

@@ -1,4 +1,5 @@
-import { IStyle, TypeElement } from '@type-dom/framework';
+import { TypeElement } from '@type-dom/framework';
+import { IStyle } from '@type-dom/css-type';
 import { IUI, IUIConfig } from '../../../ui/ui.interface';
 export interface ITdScrollbar extends IUI {
     className: 'TdScrollbar';
@@ -11,7 +12,7 @@ export interface ITdScrollbarConfig extends IUIConfig {
     /**
      * @description max height of scrollbar
      */
-    maxHeight: number | string;
+    maxHeight?: number | string;
     /**
      * @description whether to use the native scrollbar
      */

package/src/components/basic/td-scrollbar/thumb/thumb.class.d.ts

@@ -2,6 +2,7 @@ import { UI } from '../../../../ui/ui.abstract';
 import { ITdScrollbarThumb, ITdScrollbarThumbConfig } from './thumb.interface';
 export declare class TdScrollbarThumb extends UI implements ITdScrollbarThumb {
     className: 'TdScrollbarThumb';
+    props: ITdScrollbarThumbConfig;
     private thumb;
-    constructor(config?: ITdScrollbarThumbConfig);
+    constructor(params?: ITdScrollbarThumbConfig);
 }

package/src/components/basic/td-scrollbar/thumb/thumb.class.js

@@ -1,20 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdScrollbarThumb = void 0;
-const ui_abstract_1 = require("../../../../ui/ui.abstract");
 const framework_1 = require("@type-dom/framework");
-const ui_1 = require("@type-dom/ui");
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+const var_1 = require("../../../../styles/var");
 class TdScrollbarThumb extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdScrollbarThumb';
-        this.addAttrName('td-scrollbar-thumb');
-        this.addStyleObj({
+        this.ctrl.addAttrName('td-scrollbar-thumb');
+        this.ctrl.addStyleObj({
             position: 'absolute',
             right: '2px',
             bottom: '2px',
             zIndex: 1,
-            borderRadius: '4px',
+            borderRadius: '4px'
         });
         this.thumb = new framework_1.Div({
             styleObj: {
@@ -22,24 +22,24 @@ class TdScrollbarThumb extends ui_abstract_1.UI {
                 display: 'block',
                 width: 0,
                 height: 0,
-                cursor: framework_1.StyleCursor.pointer,
+                cursor: 'pointer',
                 borderRadius: 'inherit',
                 // background-color: var(
                 //   #{getCssVarName('scrollbar-bg-color')},
                 //   map.get($scrollbar, 'bg-color')
                 // ),
-                backgroundColor: ui_1.$scrollbar.bgColor,
+                backgroundColor: var_1.$scrollbar.bgColor,
                 // transition: getCssVar('transition-duration') background-color,
                 // transition: $transitionDuration + ' ' + $bgColor.default,
                 // opacity: var(
                 //   #{getCssVarName('scrollbar-opacity')},
                 //   map.get($scrollbar, 'opacity')
                 // ),
-                opacity: ui_1.$scrollbar.opacity,
-            },
+                opacity: var_1.$scrollbar.opacity
+            }
         });
         this.addChild(this.thumb);
-        this.setConfig(config);
+        this.props = this.setParams(params);
     }
 }
 exports.TdScrollbarThumb = TdScrollbarThumb;

package/src/components/basic/td-space/td-space.class.d.ts

@@ -1,12 +1,12 @@
-import { ITdSpace, ITdSpaceConfig } from './td-space.interface';
 import { UI } from '../../../ui/ui.abstract';
+import { ITdSpace, ITdSpaceConfig } from './td-space.interface';
 export declare class TdSpace extends UI implements ITdSpace {
     className: 'TdSpace';
+    props: ITdSpaceConfig;
     horizontalSize?: number;
     verticalSize?: number;
-    config?: ITdSpaceConfig;
-    constructor(config?: ITdSpaceConfig);
-    setConfig(config?: Partial<ITdSpaceConfig>): void;
-    initSize(size?: number | string | [number, number]): void;
+    constructor(params?: ITdSpaceConfig);
+    setup(): void;
+    useSize(size?: number | string | [number, number]): void;
     setSize(size: number | string | [number, number]): void;
 }

package/src/components/basic/td-space/td-space.class.js

@@ -3,52 +3,52 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdSpace = void 0;
 const utils_1 = require("@type-dom/utils");
 const framework_1 = require("@type-dom/framework");
-const td_space_const_1 = require("./td-space.const");
 const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_space_const_1 = require("./td-space.const");
 class TdSpace extends ui_abstract_1.UI {
-    constructor(config) {
-        super();
+    constructor(params) {
+        super(params);
         this.className = 'TdSpace';
-        this.config = config;
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             display: 'inline-flex',
             verticalAlign: 'top'
         });
-        this.setConfig(config);
+        this.addChild(this.getSlotNode());
+        this.props = this.setParams(params);
     }
-    setConfig(config) {
-        super.setConfig(config);
-        this.children.forEach(item => {
+    setup() {
+        this.children.forEach((item) => {
             if (item instanceof framework_1.TypeElement) {
-                item.addStyleObj({
+                item.ctrl.addStyleObj({
                     display: 'flex',
                     flexWrap: 'wrap'
                 });
             }
         });
-        this.initSize(config === null || config === void 0 ? void 0 : config.size);
-        if (config === null || config === void 0 ? void 0 : config.wrap) {
-            this.addStyle('flexWrap', 'wrap');
+        const props = this.props;
+        this.useSize(props === null || props === void 0 ? void 0 : props.size);
+        if (props === null || props === void 0 ? void 0 : props.wrap) {
+            this.ctrl.addStyle('flexWrap', 'wrap');
         }
-        if (config === null || config === void 0 ? void 0 : config.fill) {
-            this.addStyleObj({
+        if (props === null || props === void 0 ? void 0 : props.fill) {
+            this.ctrl.addStyleObj({
                 flexWrap: 'wrap',
                 flexGrow: 1,
-                minWidth: `${(config === null || config === void 0 ? void 0 : config.fillRatio) || 100}%`
+                minWidth: `${(props === null || props === void 0 ? void 0 : props.fillRatio) || 100}%`
             });
         }
-        if ((config === null || config === void 0 ? void 0 : config.direction) === 'horizontal') {
-            this.addStyle('flexDirection', 'row');
+        if ((props === null || props === void 0 ? void 0 : props.direction) === 'horizontal') {
+            this.ctrl.addStyle('flexDirection', 'row');
         }
-        if ((config === null || config === void 0 ? void 0 : config.direction) === 'vertical') {
-            this.addStyle('flexDirection', 'column');
+        if ((props === null || props === void 0 ? void 0 : props.direction) === 'vertical') {
+            this.ctrl.addStyle('flexDirection', 'column');
         }
-        if (config === null || config === void 0 ? void 0 : config.alignment) {
-            this.addStyle('alignItems', config.alignment);
+        if (props === null || props === void 0 ? void 0 : props.alignment) {
+            this.ctrl.addStyle('alignItems', props.alignment);
         }
     }
-    initSize(size) {
-        const config = this.config;
+    useSize(size) {
+        const props = this.props;
         if ((0, utils_1.isArray)(size)) {
             this.horizontalSize = size[0];
             this.verticalSize = size[1];
@@ -61,29 +61,31 @@ class TdSpace extends ui_abstract_1.UI {
             else {
                 val = td_space_const_1.SIZE_MAP[size || 'small'] || td_space_const_1.SIZE_MAP.small;
             }
-            if (((config === null || config === void 0 ? void 0 : config.wrap) || (config === null || config === void 0 ? void 0 : config.fill)) && (config === null || config === void 0 ? void 0 : config.direction) === 'horizontal') {
+            if (((props === null || props === void 0 ? void 0 : props.wrap) || (props === null || props === void 0 ? void 0 : props.fill)) &&
+                (props === null || props === void 0 ? void 0 : props.direction) === 'horizontal') {
                 this.horizontalSize = this.verticalSize = val;
             }
             else {
-                if ((config === null || config === void 0 ? void 0 : config.direction) === 'vertical') {
+                if ((props === null || props === void 0 ? void 0 : props.direction) === 'vertical') {
                     this.verticalSize = val;
                     this.horizontalSize = 0;
                 }
-                else { // horizontal 默认
+                else {
+                    // horizontal 默认
                     this.horizontalSize = val;
                     this.verticalSize = 0;
                 }
             }
         }
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             rowGap: this.verticalSize + 'px',
             columnGap: this.horizontalSize + 'px'
         });
     }
     setSize(size) {
         console.log('setSize size is ', size);
-        this.initSize(size);
-        this.setStyleObj({
+        this.useSize(size);
+        this.ctrl.setStyleObj({
             rowGap: this.verticalSize + 'px',
             columnGap: this.horizontalSize + 'px'
         });