@type-dom/ui 0.0.2 → 0.0.3

package/README.md

@@ -1,11 +1,45 @@
-# ui
+## 项目说明
 
-This library was generated with [Nx](https://nx.dev).
+> 这是一个基于自建前端框架TypeDom创建的ui组件库。
 
-## Building
+## 安装
 
-Run `nx build ui` to build the library.
+> npm install @type-dom/ui
 
-## Running unit tests
 
-Run `nx test ui` to execute the unit tests via [Jest](https://jestjs.io).
+## 框架介绍
+
+    1、技术栈
+        –	type-dom框架
+        –	webpack
+        –	typescript
+        –	抽象类
+        –	实体类
+    2、项目结构
+        –	src
+            –	lib
+                -   basic
+                -   data
+                -   feedback
+                -   form
+                -   navigation
+                -   other
+                -   styles
+            –
+        -   test
+
+# type-dom 自定义组件
+
+## basic 基础组件
+
+### button 按钮组件
+
+## data 数据组件
+
+## form 表单组件
+
+## feedback 反馈组件
+
+## navigation 导航组件
+
+## other 其它组件

package/package.json

@@ -1,12 +1,18 @@
 {
   "name": "@type-dom/ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "dependencies": {
+    "@type-dom/svgs": "*",
+    "rxjs": "^7.5.7",
     "tslib": "^2.3.0"
   },
   "type": "commonjs",
   "main": "./src/index.js",
   "typings": "./src/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/type-dom/ui.git"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"

package/src/aria.d.ts

@@ -0,0 +1,17 @@
+export declare const EVENT_CODE: {
+    tab: string;
+    enter: string;
+    space: string;
+    left: string;
+    up: string;
+    right: string;
+    down: string;
+    esc: string;
+    delete: string;
+    backspace: string;
+    numpadEnter: string;
+    pageUp: string;
+    pageDown: string;
+    home: string;
+    end: string;
+};

package/src/aria.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EVENT_CODE = void 0;
+exports.EVENT_CODE = {
+    tab: 'Tab',
+    enter: 'Enter',
+    space: 'Space',
+    left: 'ArrowLeft', // 37
+    up: 'ArrowUp', // 38
+    right: 'ArrowRight', // 39
+    down: 'ArrowDown', // 40
+    esc: 'Escape',
+    delete: 'Delete',
+    backspace: 'Backspace',
+    numpadEnter: 'NumpadEnter',
+    pageUp: 'PageUp',
+    pageDown: 'PageDown',
+    home: 'Home',
+    end: 'End',
+};

package/src/{basic → components/basic}/index.d.ts

@@ -1,5 +1,7 @@
 export { TdButton } from './td-button/td-button.class';
 export type { ITdButton } from './td-button/td-button.interface';
+export { TdButtonGroup } from './td-button-group/td-button-group.class';
+export type { ITdButtonGroup } from './td-button-group/td-button-group.interface';
 export { TdIcon } from './td-icon/td-icon.class';
 export type { ITdIcon } from './td-icon/td-icon.interface';
 export { TdContainer } from './td-container/td-container.class';
@@ -13,3 +15,13 @@ 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 { 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';
+export type { ITdCol } from './td-layout/td-col/td-col.interface';
+export { TdLink } from './td-link/td-link.class';
+export type { ITdLink } from './td-link/td-link.interface';
+export { TdText } from './td-text/td-text.class';
+export type { ITdText } from './td-text/td-text.interface';
+export { TdSpace } from './td-space/td-space.class';
+export type { ITdSpace } from './td-space/td-space.interface';

package/src/components/basic/index.js

@@ -0,0 +1,48 @@
+"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;
+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; } });
+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");
+Object.defineProperty(exports, "TdContainer", { enumerable: true, get: function () { return td_container_class_1.TdContainer; } });
+var td_container_1 = require("./td-container/td-container");
+Object.defineProperty(exports, "TdContainerComp", { enumerable: true, get: function () { return td_container_1.TdContainerComp; } });
+var td_header_class_1 = require("./td-container/td-header/td-header.class");
+Object.defineProperty(exports, "TdHeader", { enumerable: true, get: function () { return td_header_class_1.TdHeader; } });
+var td_aside_class_1 = require("./td-container/td-aside/td-aside.class");
+Object.defineProperty(exports, "TdAside", { enumerable: true, get: function () { return td_aside_class_1.TdAside; } });
+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; } });
+// 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; } });
+var td_col_class_1 = require("./td-layout/td-col/td-col.class");
+Object.defineProperty(exports, "TdCol", { enumerable: true, get: function () { return td_col_class_1.TdCol; } });
+// 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; } });
+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; } });
+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
+// export { TdList } from './td-list/td-list.class';
+// export type { ITdList, ITdListItem } from './td-list/td-list.interface';
+// // menu
+// export { TdMenu } from './td-menu/td-menu.class';
+// export type { ITdMenu, ITdMenuItem } from './td-menu/td-menu.interface';
+// // pagination
+// export { TdPagination } from './td-pagination/td-pagination.class';
+// export type { ITdPagination } from './td-pagination/td-pagination.interface';
+// // progress
+// export { TdProgress } from './td-progress/td-progress.class';
+// export type { ITdProgress } from './td-progress/td-progress.interface';
+// // radio
+// export { TdRadio } from './td-radio/td-radio.class';
+// export type { ITdRadio } from './td-radio/td-radio.interface';

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

@@ -1,15 +1,17 @@
-import { TypeButton, TextNode, Span } from '@type-dom/framework';
+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 TypeButton implements ITdButton {
+export declare class TdButton extends UI implements ITdButton {
     className: 'TdButton';
     childNodes: (Span | TdIcon)[];
-    span: Span;
     textNode: TextNode;
+    span: Span;
     private type?;
     private plain?;
     private disabled?;
-    constructor(config?: Partial<ITdButtonConfig>);
-    setConfig(config?: Partial<ITdButtonConfig>): void;
+    private icon?;
+    constructor(config?: ITdButtonConfig);
+    setConfig(config?: ITdButtonConfig): void;
     initEvents(): void;
 }

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

@@ -0,0 +1,179 @@
+"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 . ');
+        }
+        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/{basic → components/basic}/td-button/td-button.interface.d.ts

@@ -1,17 +1,18 @@
-import { ITypeButton, ISpan, ITypeConfig, TypeSvgSvg } from '@type-dom/framework';
+import { ISpan, TypeSvgSvg } from '@type-dom/framework';
 import { ITdIcon } from '../td-icon/td-icon.interface';
-export interface ITdButton extends ITypeButton {
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdButton extends IUI {
     className: 'TdButton';
     childNodes: (ISpan | ITdIcon)[];
 }
-export type IButtonSize = '' | 'mini' | 'small' | 'middle' | 'large';
+export type IButtonSize = 'small' | 'default' | 'large';
 export type IButtonType = 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger' | 'text' | '';
 export type IButtonNativeType = 'button' | 'submit' | 'reset';
 /**
  *     type、plain、round 和 circle 来定义按钮的样式。
  *         type: primary/success/warning/danger/info
- *         size: mini/small/middle/large
- *         round,
+ *         size: small/default/large
+ *         round: boolean
  *         circle: boolean
  *     使用 icon 属性来为按钮添加图标。
  *         icon: 'Search'
@@ -20,20 +21,19 @@ export type IButtonNativeType = 'button' | 'submit' | 'reset';
  *     color 自定义按钮的颜色。
  *     disabled  按钮是否为禁用状态
  */
-export interface ITdButtonConfig extends ITypeConfig {
-    size: IButtonSize;
-    disabled: boolean;
-    title: string;
-    type: IButtonType;
-    SvgClass: any;
-    svgObj: TypeSvgSvg;
-    iconPosition: 'left' | 'right';
-    icon: string;
-    nativeType: IButtonNativeType;
-    loading: boolean;
-    plain: boolean;
-    round: boolean;
-    circle: boolean;
-    loadingIcon: string;
-    color: string;
+export interface ITdButtonConfig extends IUIConfig {
+    size?: IButtonSize;
+    disabled?: boolean;
+    title?: string;
+    type?: IButtonType;
+    svgObj?: TypeSvgSvg;
+    iconPosition?: 'left' | 'right';
+    icon?: string;
+    nativeType?: IButtonNativeType;
+    loading?: boolean;
+    plain?: boolean;
+    round?: boolean;
+    circle?: boolean;
+    loadingIcon?: string;
+    color?: string;
 }

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

@@ -1,5 +1,5 @@
 import { IStyle } from '@type-dom/framework';
-import { IType } from '../../styles/var';
+import { IType } from '../../../styles/var';
 export declare const $buttonIconSpanGap: {
     large: string;
     default: string;
@@ -11,3 +11,4 @@ export declare const $buttonStateColors: Record<string, Record<string, Partial<I
 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)";

package/src/{basic → components/basic}/td-button/td-button.style.js

@@ -1,37 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonPlain = exports.$buttonPlainColors = exports.buttonVariant = exports.$buttonStateColors = exports.tdButtonBase = exports.sizeOpts = exports.$buttonIconSpanGap = void 0;
+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");
-const var_1 = require("../../styles/var");
+const var_1 = require("../../../styles/var");
 exports.$buttonIconSpanGap = {
     large: '8px',
     default: '6px',
-    small: '4px',
+    small: '4px'
 };
 exports.sizeOpts = {
-    mini: {
-        height: var_1.$commonComponentSize.small,
-        fontSize: var_1.$buttonFontSize.small,
-        padding: var_1.$buttonPaddingVertical.small + ' ' + var_1.$buttonPaddingHorizontal.small,
-        borderRadius: var_1.$buttonBorderRadius.small,
-    },
+    // mini: {
+    //   height: $commonComponentSize.small,
+    //   fontSize: $fontSizeMap.small,
+    //   padding: $paddingVerticalMap.small + ' ' + $paddingHorizontalMap.small,
+    //   borderRadius: $borderRadiusMap.small
+    // },
     small: {
         height: var_1.$commonComponentSize.small,
-        fontSize: var_1.$buttonFontSize.small,
-        padding: var_1.$buttonPaddingVertical.small + ' ' + var_1.$buttonPaddingHorizontal.small,
-        borderRadius: var_1.$buttonBorderRadius.small,
+        fontSize: var_1.$fontSizeMap.small,
+        padding: var_1.$paddingVerticalMap.small + ' ' + var_1.$paddingHorizontalMap.small,
+        borderRadius: var_1.$borderRadiusMap.small
     },
-    middle: {
+    default: {
         height: var_1.$commonComponentSize.default,
-        fontSize: var_1.$buttonFontSize.default,
-        padding: var_1.$buttonPaddingVertical.default + ' ' + var_1.$buttonPaddingHorizontal.default,
-        borderRadius: var_1.$buttonBorderRadius.default,
+        fontSize: var_1.$fontSizeMap.default,
+        padding: var_1.$paddingVerticalMap.default + ' ' + var_1.$paddingHorizontalMap.default,
+        borderRadius: var_1.$borderRadiusMap.default
     },
     large: {
         height: var_1.$commonComponentSize.large,
-        fontSize: var_1.$buttonFontSize.large,
-        padding: var_1.$buttonPaddingVertical.large + ' ' + var_1.$buttonPaddingHorizontal.large,
-        borderRadius: var_1.$buttonBorderRadius.large,
+        fontSize: var_1.$fontSizeMap.large,
+        padding: var_1.$paddingVerticalMap.large + ' ' + var_1.$paddingHorizontalMap.large,
+        borderRadius: var_1.$borderRadiusMap.large
     }
 };
 exports.tdButtonBase = {
@@ -58,24 +58,24 @@ exports.tdButtonBase = {
     borderWidth: var_1.$borderWidth,
     borderStyle: var_1.$borderStyle,
     borderColor: var_1.$button.borderColor, // getCssVar('button', 'border-color');
-    padding: '8px 15px',
+    padding: '8px 15px'
 };
 exports.$buttonStateColors = {};
 function buttonVariant($type) {
-    const $buttonColorTypes = {
+    exports.$buttonStateColors[$type] = {
         default: {
             color: var_1.$colorWhite,
             backgroundColor: var_1.$colors[$type].base,
             borderColor: var_1.$colors[$type].base,
             borderWidth: var_1.$borderWidth,
-            outlineColor: var_1.$colors[$type]['light-5'],
+            outlineColor: var_1.$colors[$type]['light-5']
             // activeColor: $colors[$type]['dark-2'],
         },
         hover: {
             color: var_1.$colorWhite,
             // 'link-text-color': $colors[$type]['light-5'],
             backgroundColor: var_1.$colors[$type]['light-3'], // ['color', $type, 'light-3'],
-            borderColor: 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'], // ['color', $type, 'dark-2'],
@@ -84,10 +84,9 @@ function buttonVariant($type) {
         disabled: {
             color: var_1.$colorWhite,
             backgroundColor: var_1.$colors[$type]['light-5'], // ['color', $type, 'light-5'],
-            borderColor: var_1.$colors[$type]['light-5'], // ['color', $type, 'light-5'],
-        },
+            borderColor: var_1.$colors[$type]['light-5'] // ['color', $type, 'light-5'],
+        }
     };
-    exports.$buttonStateColors[$type] = $buttonColorTypes;
     // for (const $type1 in $buttonColorTypes) {
     //   console.log('$type1 is ', $type1);
     //   const $typeMap = $buttonColorTypes[$type1];
@@ -119,25 +118,30 @@ for (const $type of ['default', 'primary', 'success', 'warning', 'danger', 'info
 }
 exports.$buttonPlainColors = {};
 function buttonPlain($type) {
-    const $buttonColorTypes = {
+    exports.$buttonPlainColors[$type] = {
         default: {
             color: var_1.$colors[$type].base,
             backgroundColor: var_1.$colors[$type]['light-9'],
             borderColor: var_1.$colors[$type]['light-5'],
-            borderWidth: var_1.$borderWidth,
+            borderWidth: var_1.$borderWidth
         },
         hover: {
             color: var_1.$colorWhite,
             backgroundColor: var_1.$colors[$type].base,
-            borderColor: var_1.$colors[$type].base,
+            borderColor: var_1.$colors[$type].base
         },
         active: {
             color: var_1.$colorWhite
+        },
+        disabled: {
+            color: var_1.$colors[$type].base,
+            backgroundColor: var_1.$colors[$type]['light-9'], // ['color', $type, 'light-5'],
+            borderColor: var_1.$colors[$type]['light-5'] // ['color', $type, 'light-5'],
         }
     };
-    exports.$buttonPlainColors[$type] = $buttonColorTypes;
 }
 exports.buttonPlain = buttonPlain;
 for (const $type of ['default', 'primary', 'success', 'warning', 'danger', 'info']) {
     buttonPlain($type);
 }
+exports.$borderRightColor = 'rgba(255, 255, 255, .5)';

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

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