@type-dom/ui 0.0.3 → 0.0.5

package/README.md

@@ -6,7 +6,6 @@
 
 > npm install @type-dom/ui
 
-
 ## 框架介绍
 
     1、技术栈

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@type-dom/ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "dependencies": {
     "@type-dom/svgs": "*",
     "rxjs": "^7.5.7",

package/src/aria.d.ts

@@ -1,3 +1,4 @@
+import { IUIConfig } from './ui/ui.interface';
 export declare const EVENT_CODE: {
     tab: string;
     enter: string;
@@ -15,3 +16,17 @@ export declare const EVENT_CODE: {
     home: string;
     end: string;
 };
+export interface IAriaConfig extends IUIConfig {
+    /**
+     * @description native `aria-label` attribute
+     */
+    ariaLabel?: string;
+    /**
+     * @description native `aria-orientation` attribute
+     */
+    ariaOrientation?: 'horizontal' | 'vertical' | 'undefined';
+    /**
+     * @description native `aria-controls` attribute
+     */
+    ariaControls?: string;
+}

package/src/components/basic/index.d.ts

@@ -15,6 +15,8 @@ export { TdMain } from './td-container/td-main/td-main.class';
 export type { ITdMain, ITdMainConfig } from './td-container/td-main/td-main.interface';
 export { TdFooter } from './td-container/td-footer/td-footer.class';
 export type { ITdFooter } from './td-container/td-footer/td-footer.interface';
+export { TdScrollbar } from './td-scrollbar/td-scrollbar.class';
+export type { ITdScrollbar, ITdScrollbarConfig } from './td-scrollbar/td-scrollbar.interface';
 export { TdRow } from './td-layout/td-row/td-row.class';
 export type { ITdRow } from './td-layout/td-row/td-row.interface';
 export { TdCol } from './td-layout/td-col/td-col.class';

package/src/components/basic/index.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TdSpace = exports.TdText = exports.TdLink = exports.TdCol = exports.TdRow = exports.TdFooter = exports.TdMain = exports.TdAside = exports.TdHeader = exports.TdContainerComp = exports.TdContainer = exports.TdIcon = exports.TdButtonGroup = exports.TdButton = void 0;
+exports.TdSpace = exports.TdText = exports.TdLink = exports.TdCol = exports.TdRow = exports.TdScrollbar = exports.TdFooter = exports.TdMain = exports.TdAside = exports.TdHeader = exports.TdContainerComp = exports.TdContainer = exports.TdIcon = exports.TdButtonGroup = exports.TdButton = void 0;
+//  button
 var td_button_class_1 = require("./td-button/td-button.class");
 Object.defineProperty(exports, "TdButton", { enumerable: true, get: function () { return td_button_class_1.TdButton; } });
 var td_button_group_class_1 = require("./td-button-group/td-button-group.class");
 Object.defineProperty(exports, "TdButtonGroup", { enumerable: true, get: function () { return td_button_group_class_1.TdButtonGroup; } });
+// icon
 var td_icon_class_1 = require("./td-icon/td-icon.class");
 Object.defineProperty(exports, "TdIcon", { enumerable: true, get: function () { return td_icon_class_1.TdIcon; } });
 var td_container_class_1 = require("./td-container/td-container.class");
@@ -19,6 +21,9 @@ var td_main_class_1 = require("./td-container/td-main/td-main.class");
 Object.defineProperty(exports, "TdMain", { enumerable: true, get: function () { return td_main_class_1.TdMain; } });
 var td_footer_class_1 = require("./td-container/td-footer/td-footer.class");
 Object.defineProperty(exports, "TdFooter", { enumerable: true, get: function () { return td_footer_class_1.TdFooter; } });
+// scrollbar
+var td_scrollbar_class_1 = require("./td-scrollbar/td-scrollbar.class");
+Object.defineProperty(exports, "TdScrollbar", { enumerable: true, get: function () { return td_scrollbar_class_1.TdScrollbar; } });
 // layout
 var td_row_class_1 = require("./td-layout/td-row/td-row.class");
 Object.defineProperty(exports, "TdRow", { enumerable: true, get: function () { return td_row_class_1.TdRow; } });
@@ -27,8 +32,10 @@ Object.defineProperty(exports, "TdCol", { enumerable: true, get: function () { r
 // link
 var td_link_class_1 = require("./td-link/td-link.class");
 Object.defineProperty(exports, "TdLink", { enumerable: true, get: function () { return td_link_class_1.TdLink; } });
+// text
 var td_text_class_1 = require("./td-text/td-text.class");
 Object.defineProperty(exports, "TdText", { enumerable: true, get: function () { return td_text_class_1.TdText; } });
+// space
 var td_space_class_1 = require("./td-space/td-space.class");
 Object.defineProperty(exports, "TdSpace", { enumerable: true, get: function () { return td_space_class_1.TdSpace; } });
 // // list

package/src/components/basic/td-button/td-button.abstract.d.ts

@@ -0,0 +1,19 @@
+import { Span, TextNode } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { TdIcon } from '../td-icon/td-icon.class';
+import { ITdButtonAbstract, ITdButtonConfig } from './td-button.interface';
+export declare abstract class TdButtonAbstract extends UI implements ITdButtonAbstract {
+    abstract className: 'TdButton' | string;
+    childNodes: (Span | TdIcon)[];
+    textNode?: TextNode;
+    props: ITdButtonConfig;
+    span?: Span;
+    private type?;
+    private plain?;
+    private disabled?;
+    private icon?;
+    protected constructor(params?: ITdButtonConfig);
+    setup(): void;
+    initEvents(): void;
+    useType(params?: ITdButtonConfig): void;
+}

package/src/components/basic/td-button/td-button.abstract.js

@@ -0,0 +1,175 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdButtonAbstract = void 0;
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const var_1 = require("../../../styles/var");
+const td_input_style_1 = require("../../form/td-input/td-input.style");
+const td_icon_class_1 = require("../td-icon/td-icon.class");
+const td_button_style_1 = require("./td-button.style");
+// import '../../styles/style.css';
+class TdButtonAbstract extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params, (params === null || params === void 0 ? void 0 : params.tag) || 'button');
+        this.ctrl.addAttrObj({
+            type: 'button' // 默认
+        });
+        this.ctrl.addStyleObj(td_button_style_1.$tdButtonBase);
+        this.childNodes = [];
+        this.props = this.setParams(params); // 这里的config赋值是要替换掉上面的config的预置值的。
+    }
+    setup() {
+        var _a, _b, _c;
+        const props = this.props;
+        if (props === null || props === void 0 ? void 0 : props.loading) {
+            if ((_a = props === null || props === void 0 ? void 0 : props.slots) === null || _a === void 0 ? void 0 : _a.loading) {
+                // 如果插槽有 loading
+                // this.icon = props.slots.loading as TdIcon;
+                // this.loadingSlot = new SlotNode('loading', props.slots.loading);
+                this.icon = this.getSlotNode('loading');
+                this.addChild(this.icon);
+            }
+            else {
+                this.icon = new td_icon_class_1.TdIcon({
+                    name: 'loading-icon',
+                    svgObj: new svgs_1.ElLoadingSvg() // 默认的 loading 图标
+                });
+                console.warn('then add icon . icon is ', this.icon);
+                this.addChild(this.icon);
+            }
+        }
+        else if ((props === null || props === void 0 ? void 0 : props.svgObj) || ((_b = props === null || props === void 0 ? void 0 : props.slots) === null || _b === void 0 ? void 0 : _b.icon)) {
+            this.icon = new td_icon_class_1.TdIcon({
+                name: 'icon-expand',
+                // svgObj: props.svgObj
+            });
+            if (props.svgObj) {
+                this.icon.getSlotNode().addSlot(props.svgObj);
+            }
+            else if ((_c = props === null || props === void 0 ? void 0 : props.slots) === null || _c === void 0 ? void 0 : _c.icon) {
+                // this.icon = props.slots.icon;
+                // this.iconSlot = new SlotNode('icon', props.slots.icon);
+                this.icon.getSlotNode().addSlot(props.slots.icon);
+            }
+            this.addChild(this.icon);
+        }
+        // this.useIcon(props);
+        if (props === null || props === void 0 ? void 0 : props.slot) {
+            // this.defaultSlot = new SlotNode('default', props.slot);
+            // this.icon?.ctrl.addStyleObj($iconLeft);
+            // todo 会运行 2 次；
+            const span = new framework_1.Span({
+                name: 'text-expand',
+                styleObj: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    marginLeft: this.icon ? '6px' : undefined,
+                    // letterSpacing: '0.3em',
+                    // marginRight: '-0.3em',
+                },
+                childNodes: [this.getSlotNode()]
+            });
+            this.addChild(span);
+        }
+        this.useType(props);
+        if (props === null || props === void 0 ? void 0 : props.disabled) {
+            this.disabled = props.disabled;
+            this.ctrl.addStyleObj(var_1.$button.disabled);
+        }
+        const size = (props === null || props === void 0 ? void 0 : props.size) ? props.size : 'default';
+        this.ctrl.addStyleObj(td_button_style_1.$sizeOpts[size]);
+        if (props === null || props === void 0 ? void 0 : props.round) {
+            this.ctrl.addStyleObj({
+                borderRadius: var_1.$borderRadius.round
+            });
+        }
+        else if (props === null || props === void 0 ? void 0 : props.circle) {
+            this.ctrl.addStyleObj({
+                width: td_input_style_1.$inputHeight[props.size || 'default'], // map.get($input-height, 'default');
+                borderRadius: var_1.$borderRadius.circle,
+                padding: var_1.$paddingVerticalMap.default
+            });
+        }
+    }
+    // 悬浮、聚焦、激活状态样式
+    initEvents() {
+        this.addEvents({
+            mouseover: (evt) => {
+                // console.log('td-button mouseover . ');
+                if (this.disabled) {
+                    this.ctrl.setStyleObj({
+                        cursor: 'notAllowed'
+                    });
+                }
+                else {
+                    if (this.type) {
+                        this.ctrl.setStyleObj(td_button_style_1.$buttonStateColors[this.type].hover);
+                    }
+                    else {
+                        this.ctrl.setStyleObj({
+                            color: var_1.$button.hover.textColor,
+                            backgroundColor: var_1.$button.hover.borderColor, // $colors['primary']['light-3'],
+                            borderColor: var_1.$button.hover.borderColor
+                        });
+                    }
+                }
+            },
+            mouseout: () => {
+                // console.log('td-button mouseout . ');
+                if (this.disabled) {
+                    this.ctrl.setStyleObj({
+                        cursor: 'auto'
+                    });
+                }
+                else {
+                    if (this.type) {
+                        if (this.plain) {
+                            this.ctrl.setStyleObj(td_button_style_1.$buttonPlainColors[this.type].default);
+                        }
+                        else {
+                            this.ctrl.setStyleObj(td_button_style_1.$buttonStateColors[this.type].default);
+                        }
+                    }
+                    else {
+                        this.ctrl.setStyleObj({
+                            color: var_1.$button.textColor,
+                            backgroundColor: var_1.$button.bgColor,
+                            borderColor: var_1.$button.borderColor
+                        });
+                    }
+                }
+            }
+        });
+    }
+    useType(params) {
+        // const type = params?.type ? params.type : 'default';
+        // this.type = type;
+        if (params === null || params === void 0 ? void 0 : params.type) {
+            this.type = params.type;
+            if (params === null || params === void 0 ? void 0 : params.plain) {
+                console.log('params.plain . ');
+                this.plain = params.plain;
+                if (params.disabled) {
+                    this.disabled = params.disabled;
+                    this.ctrl.addStyleObj(td_button_style_1.$buttonPlainColors[params.type].disabled);
+                }
+                else {
+                    console.log(td_button_style_1.$buttonPlainColors[params.type].default);
+                    this.ctrl.addStyleObj(td_button_style_1.$buttonPlainColors[params.type].default);
+                }
+            }
+            else {
+                if (params === null || params === void 0 ? void 0 : params.disabled) {
+                    console.log('params?.disabled is true . $button.disabled is ', var_1.$button.disabled);
+                    this.disabled = params.disabled;
+                    this.ctrl.addStyleObj(td_button_style_1.$buttonStateColors[params.type].disabled);
+                }
+                else {
+                    this.ctrl.addStyleObj(td_button_style_1.$buttonStateColors[params.type].default);
+                }
+            }
+        }
+    }
+}
+exports.TdButtonAbstract = TdButtonAbstract;

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

@@ -1,17 +1,6 @@
-import { Span, TextNode } from '@type-dom/framework';
-import { UI } from '../../../ui/ui.abstract';
-import { TdIcon } from '../td-icon/td-icon.class';
 import { ITdButton, ITdButtonConfig } from './td-button.interface';
-export declare class TdButton extends UI implements ITdButton {
+import { TdButtonAbstract } from './td-button.abstract';
+export declare class TdButton extends TdButtonAbstract implements ITdButton {
     className: 'TdButton';
-    childNodes: (Span | TdIcon)[];
-    textNode: TextNode;
-    span: Span;
-    private type?;
-    private plain?;
-    private disabled?;
-    private icon?;
-    constructor(config?: ITdButtonConfig);
-    setConfig(config?: ITdButtonConfig): void;
-    initEvents(): void;
+    constructor(params?: ITdButtonConfig);
 }

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

@@ -1,179 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TdButton = void 0;
-const framework_1 = require("@type-dom/framework");
-const ui_abstract_1 = require("../../../ui/ui.abstract");
-const var_1 = require("../../../styles/var");
-const td_input_style_1 = require("../../form/td-input/td-input.style");
-const td_icon_style_1 = require("../td-icon/td-icon.style");
-const td_icon_class_1 = require("../td-icon/td-icon.class");
-const td_button_style_1 = require("./td-button.style");
-// import '../../styles/style.css';
-class TdButton extends ui_abstract_1.UI {
-    constructor(config) {
-        super({ tag: (config === null || config === void 0 ? void 0 : config.tag) || 'button' });
-        if ((config === null || config === void 0 ? void 0 : config.title) === 'Create') {
-            console.log('config.title is Create . ');
-        }
+const td_button_abstract_1 = require("./td-button.abstract");
+class TdButton extends td_button_abstract_1.TdButtonAbstract {
+    constructor(params) {
+        super(params);
         this.className = 'TdButton';
-        this.textNode = new framework_1.TextNode();
-        this.addAttrObj({
-            type: 'button' // 默认
-        });
-        // this.template = new Template(this);
-        // this.textNode = new TextNode();
-        this.span = new framework_1.Span({
-            parent: this,
-            styleObj: {
-                display: 'inline-flex',
-                alignItems: 'center'
-            },
-            childNodes: [this.textNode, new framework_1.Slot()]
-        });
-        this.addStyleObj(td_button_style_1.tdButtonBase);
-        this.childNodes = [this.span];
-        this.setConfig(config);
-    }
-    setConfig(config) {
-        super.setConfig(config);
-        if (config === null || config === void 0 ? void 0 : config.title) {
-            this.textNode.setText(config.title);
-        }
-        else {
-            this.clearChildren();
-        }
-        if (config === null || config === void 0 ? void 0 : config.svgObj) {
-            this.icon = new td_icon_class_1.TdIcon({
-                childNodes: [config.svgObj]
-            });
-            if (config.iconPosition === 'right') {
-                this.icon.addStyleObj(td_icon_style_1.$iconRight);
-                this.addChild(this.icon);
-            }
-            else {
-                if (config.title) { // 如果后面有文字
-                    this.icon.addStyleObj(td_icon_style_1.$iconLeft);
-                }
-                this.unshiftChild(this.icon); // 前面插入
-            }
-            if (config.circle) {
-                this.icon.addStyleObj({
-                    margin: undefined,
-                    float: undefined
-                });
-            }
-        }
-        // const type = config?.type ? config.type : 'default';
-        // this.type = type;
-        if (config === null || config === void 0 ? void 0 : config.type) {
-            this.type = config.type;
-            if (config === null || config === void 0 ? void 0 : config.plain) {
-                console.log('config.plain . ');
-                this.plain = config.plain;
-                if (config.disabled) {
-                    this.disabled = config.disabled;
-                    this.addStyleObj(td_button_style_1.$buttonPlainColors[config.type].disabled);
-                }
-                else {
-                    console.log(td_button_style_1.$buttonPlainColors[config.type].default);
-                    this.addStyleObj(td_button_style_1.$buttonPlainColors[config.type].default);
-                }
-            }
-            else {
-                if (config === null || config === void 0 ? void 0 : config.disabled) {
-                    console.log('config?.disabled is true . $button.disabled is ', var_1.$button.disabled);
-                    this.disabled = config.disabled;
-                    this.addStyleObj(td_button_style_1.$buttonStateColors[config.type].disabled);
-                }
-                else {
-                    this.addStyleObj(td_button_style_1.$buttonStateColors[config.type].default);
-                }
-            }
-        }
-        if (config === null || config === void 0 ? void 0 : config.loading) {
-            if (this.icon) {
-                this.icon.addStyleObj(td_icon_style_1.$iconLoading);
-            }
-            this.disabled = config.disabled;
-            if (config.type) {
-                this.addStyleObj(td_button_style_1.$buttonStateColors[config.type].disabled);
-            }
-            else {
-                this.addStyleObj(var_1.$button.disabled);
-            }
-            this.addStyleObj({
-                position: 'relative',
-                pointerEvents: 'none',
-            });
-        }
-        if (config === null || config === void 0 ? void 0 : config.disabled) {
-            this.disabled = config.disabled;
-            this.addStyleObj(var_1.$button.disabled);
-        }
-        const size = (config === null || config === void 0 ? void 0 : config.size) ? config.size : 'default';
-        this.addStyleObj(td_button_style_1.sizeOpts[size]);
-        if (config === null || config === void 0 ? void 0 : config.round) {
-            this.addStyleObj({
-                borderRadius: var_1.$borderRadius.round
-            });
-        }
-        else if (config === null || config === void 0 ? void 0 : config.circle) {
-            this.addStyleObj({
-                width: td_input_style_1.$inputHeight[config.size || 'default'], // map.get($input-height, 'default');
-                borderRadius: var_1.$borderRadius.circle,
-                padding: var_1.$paddingVerticalMap.default
-            });
-        }
-    }
-    // 悬浮、聚焦、激活状态样式
-    initEvents() {
-        this.addEvents({
-            mouseover: evt => {
-                // console.log('td-button mouseover . ');
-                if (this.disabled) {
-                    this.setStyleObj({
-                        cursor: framework_1.StyleCursor.notAllowed
-                    });
-                }
-                else {
-                    if (this.type) {
-                        this.setStyleObj(td_button_style_1.$buttonStateColors[this.type].hover);
-                    }
-                    else {
-                        this.setStyleObj({
-                            color: var_1.$button.hover.textColor,
-                            backgroundColor: var_1.$button.hover.borderColor, // $colors['primary']['light-3'],
-                            borderColor: var_1.$button.hover.borderColor
-                        });
-                    }
-                }
-            },
-            mouseout: () => {
-                // console.log('td-button mouseout . ');
-                if (this.disabled) {
-                    this.setStyleObj({
-                        cursor: framework_1.StyleCursor.auto
-                    });
-                }
-                else {
-                    if (this.type) {
-                        if (this.plain) {
-                            this.setStyleObj(td_button_style_1.$buttonPlainColors[this.type].default);
-                        }
-                        else {
-                            this.setStyleObj(td_button_style_1.$buttonStateColors[this.type].default);
-                        }
-                    }
-                    else {
-                        this.setStyleObj({
-                            color: var_1.$button.textColor,
-                            backgroundColor: var_1.$button.bgColor,
-                            borderColor: var_1.$button.borderColor
-                        });
-                    }
-                }
-            }
-        });
     }
 }
 exports.TdButton = TdButton;

package/src/components/basic/td-button/td-button.const.d.ts

@@ -0,0 +1,7 @@
+import { InjectionKey } from '@type-dom/framework';
+import type { ITdButtonConfig } from './td-button.interface';
+export interface ButtonGroupContext {
+    size?: ITdButtonConfig['size'];
+    type?: ITdButtonConfig['type'];
+}
+export declare const buttonGroupContextKey: InjectionKey<ButtonGroupContext>;

package/src/components/basic/td-button/td-button.const.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonGroupContextKey = void 0;
+exports.buttonGroupContextKey = Symbol('buttonGroupContextKey');

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

@@ -1,12 +1,20 @@
 import { ISpan, TypeSvgSvg } from '@type-dom/framework';
-import { ITdIcon } from '../td-icon/td-icon.interface';
 import { IUI, IUIConfig } from '../../../ui/ui.interface';
-export interface ITdButton extends IUI {
-    className: 'TdButton';
+import { ITdIcon } from '../td-icon/td-icon.interface';
+export interface ITdButtonAbstract extends IUI {
+    className: 'TdButton' | string;
     childNodes: (ISpan | ITdIcon)[];
 }
+export interface ITdButton extends ITdButtonAbstract {
+    className: 'TdButton';
+}
 export type IButtonSize = 'small' | 'default' | 'large';
-export type IButtonType = 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger' | 'text' | '';
+export type IButtonType = 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger'
+/**
+ * @deprecated
+ * Text type will be deprecated in the next major version (3.0.0)
+ */
+ | 'text' | '';
 export type IButtonNativeType = 'button' | 'submit' | 'reset';
 /**
  *     type、plain、round 和 circle 来定义按钮的样式。
@@ -24,16 +32,18 @@ export type IButtonNativeType = 'button' | 'submit' | 'reset';
 export interface ITdButtonConfig extends IUIConfig {
     size?: IButtonSize;
     disabled?: boolean;
-    title?: string;
     type?: IButtonType;
     svgObj?: TypeSvgSvg;
     iconPosition?: 'left' | 'right';
     icon?: string;
     nativeType?: IButtonNativeType;
     loading?: boolean;
+    loadingIcon?: TypeSvgSvg;
     plain?: boolean;
+    text?: boolean;
+    link?: boolean;
     round?: boolean;
+    bg?: boolean;
     circle?: boolean;
-    loadingIcon?: string;
     color?: string;
 }

package/src/components/basic/td-button/td-button.interface.js

@@ -1,2 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+// export interface ITdButtonSlots extends IUISlots {
+//   loading?: SlotNode;
+//   icon?: SlotNode; // 这里不是 TdIcon, 而是 svg
+// }

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

@@ -1,14 +1,19 @@
-import { IStyle } from '@type-dom/framework';
+import { IStyle } from '@type-dom/css-type';
 import { IType } from '../../../styles/var';
 export declare const $buttonIconSpanGap: {
     large: string;
     default: string;
     small: string;
 };
-export declare const sizeOpts: Record<string, Partial<IStyle>>;
-export declare const tdButtonBase: Partial<IStyle>;
+export declare const $sizeOpts: Record<string, Partial<IStyle>>;
+export declare const $tdButtonBase: IStyle;
 export declare const $buttonStateColors: Record<string, Record<string, Partial<IStyle>>>;
 export declare function buttonVariant($type: IType): void;
 export declare const $buttonPlainColors: Record<string, Record<string, Partial<IStyle>>>;
 export declare function buttonPlain($type: IType): void;
 export declare const $borderRightColor = "rgba(255, 255, 255, .5)";
+export declare const $buttonBorderRadius: {
+    large: string;
+    default: string;
+    small: string;
+};

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

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.$borderRightColor = exports.buttonPlain = exports.$buttonPlainColors = exports.buttonVariant = exports.$buttonStateColors = exports.tdButtonBase = exports.sizeOpts = exports.$buttonIconSpanGap = void 0;
-const framework_1 = require("@type-dom/framework");
+exports.$buttonBorderRadius = exports.$borderRightColor = exports.buttonPlain = exports.$buttonPlainColors = exports.buttonVariant = exports.$buttonStateColors = exports.$tdButtonBase = exports.$sizeOpts = exports.$buttonIconSpanGap = void 0;
 const var_1 = require("../../../styles/var");
 exports.$buttonIconSpanGap = {
     large: '8px',
     default: '6px',
     small: '4px'
 };
-exports.sizeOpts = {
+exports.$sizeOpts = {
     // mini: {
     //   height: $commonComponentSize.small,
     //   fontSize: $fontSizeMap.small,
@@ -34,15 +33,15 @@ exports.sizeOpts = {
         borderRadius: var_1.$borderRadiusMap.large
     }
 };
-exports.tdButtonBase = {
-    display: framework_1.StyleDisplay.inlineFlex,
+exports.$tdButtonBase = {
+    display: 'inline-flex',
     justifyContent: 'center',
     alignItems: 'center',
     lineHeight: '1',
     // min-height will expand when in flex
     height: '32px',
     whiteSpace: 'nowrap',
-    cursor: framework_1.StyleCursor.pointer,
+    cursor: 'pointer',
     color: var_1.$button.textColor,
     textAlign: 'center',
     boxSizing: 'border-box',
@@ -110,7 +109,14 @@ function buttonVariant($type) {
     // }
 }
 exports.buttonVariant = buttonVariant;
-for (const $type of ['default', 'primary', 'success', 'warning', 'danger', 'info']) {
+for (const $type of [
+    'default',
+    'primary',
+    'success',
+    'warning',
+    'danger',
+    'info'
+]) {
     // @include m($type) {
     //   @include button-variant($type);
     //   }
@@ -141,7 +147,19 @@ function buttonPlain($type) {
     };
 }
 exports.buttonPlain = buttonPlain;
-for (const $type of ['default', 'primary', 'success', 'warning', 'danger', 'info']) {
+for (const $type of [
+    'default',
+    'primary',
+    'success',
+    'warning',
+    'danger',
+    'info'
+]) {
     buttonPlain($type);
 }
 exports.$borderRightColor = 'rgba(255, 255, 255, .5)';
+exports.$buttonBorderRadius = {
+    large: var_1.$borderRadius.base,
+    default: var_1.$borderRadius.base,
+    small: parseInt(var_1.$borderRadius.base) - 1 + 'px',
+};

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

@@ -1,9 +1,9 @@
-import { TdButton } from '@type-dom/ui';
 import { UI } from '../../../ui/ui.abstract';
 import { ITdButtonGroup, ITdButtonGroupConfig } from './td-button-group.interface';
+import { TdButton } from '../td-button/td-button.class';
 export declare class TdButtonGroup extends UI implements ITdButtonGroup {
     className: 'TdButtonGroup';
-    constructor(config: ITdButtonGroupConfig);
+    constructor(params: ITdButtonGroupConfig);
     created(): void;
     mounted(): void;
     addBtnStyle(btn: TdButton, index: number): void;