@type-dom/ui 0.1.0 → 0.1.1

package/README.md

@@ -1,44 +1,44 @@
-## 项目说明
-
-> 这是一个基于自建前端框架TypeDom创建的ui组件库。
-
-## 安装
-
-> npm install @type-dom/ui
-
-## 框架介绍
-
-    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 其它组件
+## 项目说明
+
+> 这是一个基于前端框架TypeDom创建的ui组件库。
+
+## 安装
+
+> npm install @type-dom/ui
+
+## 框架介绍
+
+    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,14 +1,18 @@
 {
   "name": "@type-dom/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "dependencies": {
     "@type-dom/svgs": "*"
   },
   "type": "commonjs",
   "main": "./src/index.js",
-  "typings": "./src/index.d.ts",
+  "types": "./src/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/type-dom/ui.git"
   }
-}
+}

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

@@ -0,0 +1,2 @@
+export { TdTeleport } from './td-teleport/td-teleport.class';
+export type * from './td-teleport/td-teleport.interface';

package/src/components/base/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdTeleport = void 0;
+var td_teleport_class_1 = require("./td-teleport/td-teleport.class");
+Object.defineProperty(exports, "TdTeleport", { enumerable: true, get: function () { return td_teleport_class_1.TdTeleport; } });

package/src/components/base/style/css.d.ts

@@ -0,0 +1 @@
+import '../../theme/base.css';

package/src/components/base/style/css.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../theme/base.css");

package/src/components/base/style/index.d.ts

@@ -0,0 +1 @@
+import '../../../theme-chalk/base.scss';

package/src/components/base/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../theme-chalk/base.scss");

package/src/components/base/td-teleport/td-teleport.class.d.ts

@@ -0,0 +1,7 @@
+import { TypeFragment } from '@type-dom/framework';
+import { ITdTeleport, TeleportProps } from './td-teleport.interface';
+export declare class TdTeleport extends TypeFragment implements ITdTeleport {
+    className: 'TdTeleport';
+    constructor(params?: TeleportProps);
+    setup(): void;
+}

package/src/components/base/td-teleport/td-teleport.class.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdTeleport = void 0;
+const framework_1 = require("@type-dom/framework");
+class TdTeleport extends framework_1.TypeFragment {
+    constructor(params = {}) {
+        super();
+        this.className = 'TdTeleport';
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b;
+        const props = this.props;
+        if (props.disabled) {
+            this.slotChildren(this.props.slot || ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.default));
+        }
+        else {
+            this.addChild(new framework_1.Teleport({
+                to: props.to,
+                slot: this.props.slot || ((_b = props.slots) === null || _b === void 0 ? void 0 : _b.default),
+            }));
+        }
+    }
+}
+exports.TdTeleport = TdTeleport;

package/src/components/base/td-teleport/td-teleport.interface.d.ts

@@ -0,0 +1,9 @@
+import { ITypeFragment, TypeFragmentProps } from '@type-dom/framework';
+import { MaybeRef } from '@type-dom/signals';
+export interface ITdTeleport extends ITypeFragment {
+    className: 'TdTeleport';
+}
+export interface TeleportProps extends TypeFragmentProps {
+    to?: MaybeRef<string | HTMLElement>;
+    disabled?: boolean;
+}

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

@@ -1,29 +1,29 @@
 export { TdButton } from './td-button/td-button.class';
-export type { ITdButton } from './td-button/td-button.interface';
+export type * 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 type * 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 type * from './td-icon/td-icon.interface';
 export { TdContainer } from './td-container/td-container.class';
 export { TdContainerComp } from './td-container/td-container';
-export type { ITdContainer } from './td-container/td-container.interface';
+export type * from './td-container/td-container.interface';
 export { TdHeader } from './td-container/td-header/td-header.class';
-export type { ITdHeader, ITdHeaderConfig } from './td-container/td-header/td-header.interface';
+export type * from './td-container/td-header/td-header.interface';
 export { TdAside } from './td-container/td-aside/td-aside.class';
-export type { ITdAside, ITdAsideConfig } from './td-container/td-aside/td-aside.interface';
+export type * from './td-container/td-aside/td-aside.interface';
 export { TdMain } from './td-container/td-main/td-main.class';
-export type { ITdMain, ITdMainConfig } from './td-container/td-main/td-main.interface';
+export type * 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 type * 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 type * 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 type * 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 type * from './td-link/td-link.interface';
 export { TdText } from './td-text/td-text.class';
-export type { ITdText } from './td-text/td-text.interface';
+export type * from './td-text/td-text.interface';
 export { TdSpace } from './td-space/td-space.class';
-export type { ITdSpace } from './td-space/td-space.interface';
+export type * from './td-space/td-space.interface';

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

@@ -0,0 +1,4 @@
+import { TinyColor } from '@type-dom/color';
+import { TdButtonProps } from './td-button.interface';
+export declare function darken(color: TinyColor, amount?: number): string;
+export declare function useButtonCustomStyle(props: TdButtonProps): import("@type-dom/signals").Computed<Record<string, string>>;

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

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.darken = darken;
+exports.useButtonCustomStyle = useButtonCustomStyle;
+// import { computed } from 'vue'
+// import { TinyColor } from '@ctrl/tinycolor'
+// import { useNamespace } from '@element-plus/hooks'
+// import { useFormDisabled } from '@element-plus/components/form'
+const color_1 = require("@type-dom/color");
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../hooks/use-namespace");
+const use_form_common_props_1 = require("../../form/td-form/hooks/use-form-common-props");
+function darken(color, amount = 20) {
+    return color.mix('#141414', amount).toString();
+}
+function useButtonCustomStyle(props) {
+    // console.log('useButtonCustomStyle . props is ', props);
+    const _disabled = (0, use_form_common_props_1.useFormDisabled)();
+    const ns = (0, use_namespace_1.useNamespace)('button');
+    // calculate hover & active color by custom color
+    // only work when custom color
+    return (0, signals_1.computed)(() => {
+        let styles = {};
+        let buttonColor = props.color;
+        if (buttonColor) {
+            const match = buttonColor === null || buttonColor === void 0 ? void 0 : buttonColor.match(/var\((.*?)\)/);
+            if (match) {
+                buttonColor = window
+                    .getComputedStyle(window.document.documentElement)
+                    .getPropertyValue(match[1]);
+            }
+            // console.log('buttonColor is ', buttonColor);
+            const color = new color_1.TinyColor(buttonColor);
+            const activeBgColor = props.dark
+                ? color.tint(20).toString()
+                : darken(color, 20);
+            if (props.plain) {
+                styles = ns.cssVarBlock({
+                    'bg-color': props.dark
+                        ? darken(color, 90)
+                        : color.tint(90).toString(),
+                    'text-color': buttonColor,
+                    'border-color': props.dark
+                        ? darken(color, 50)
+                        : color.tint(50).toString(),
+                    'hover-text-color': `var(${ns.cssVarName('color-white')})`,
+                    'hover-bg-color': buttonColor,
+                    'hover-border-color': buttonColor,
+                    'active-bg-color': activeBgColor,
+                    'active-text-color': `var(${ns.cssVarName('color-white')})`,
+                    'active-border-color': activeBgColor,
+                });
+                if (_disabled.get()) {
+                    styles[ns.cssVarBlockName('disabled-bg-color')] = props.dark
+                        ? darken(color, 90)
+                        : color.tint(90).toString();
+                    styles[ns.cssVarBlockName('disabled-text-color')] = props.dark
+                        ? darken(color, 50)
+                        : color.tint(50).toString();
+                    styles[ns.cssVarBlockName('disabled-border-color')] = props.dark
+                        ? darken(color, 80)
+                        : color.tint(80).toString();
+                }
+            }
+            else {
+                const hoverBgColor = props.dark
+                    ? darken(color, 30)
+                    : color.tint(30).toString();
+                const textColor = color.isDark()
+                    ? `var(${ns.cssVarName('color-white')})`
+                    : `var(${ns.cssVarName('color-black')})`;
+                styles = ns.cssVarBlock({
+                    'bg-color': buttonColor,
+                    'text-color': textColor,
+                    'border-color': buttonColor,
+                    'hover-bg-color': hoverBgColor,
+                    'hover-text-color': textColor,
+                    'hover-border-color': hoverBgColor,
+                    'active-bg-color': activeBgColor,
+                    'active-border-color': activeBgColor,
+                });
+                if (_disabled.get()) {
+                    const disabledButtonColor = props.dark
+                        ? darken(color, 50)
+                        : color.tint(50).toString();
+                    styles[ns.cssVarBlockName('disabled-bg-color')] = disabledButtonColor;
+                    styles[ns.cssVarBlockName('disabled-text-color')] = props.dark
+                        ? 'rgba(255, 255, 255, 0.5)'
+                        : `var(${ns.cssVarName('color-white')})`;
+                    styles[ns.cssVarBlockName('disabled-border-color')] =
+                        disabledButtonColor;
+                }
+            }
+        }
+        return styles;
+    });
+}

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

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

package/src/components/basic/td-button/constants.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/style/css.d.ts

@@ -0,0 +1,2 @@
+import '../../../base/style/css';
+import '../../../../theme-chalk/el-button.css';

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style/css");
+require("../../../../theme-chalk/el-button.css");

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

@@ -0,0 +1,2 @@
+import '../../../base/style';
+import '../../../../theme-chalk/button.scss';

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("../../../base/style");
+require("../../../../theme-chalk/button.scss");

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

@@ -1,18 +1,10 @@
-import { SlotNode, Span, TextNode, TypeHtml } from '@type-dom/framework';
-import { TdIcon } from '../td-icon/td-icon.class';
-import { ITdButtonAbstract, ITdButtonConfig } from './td-button.interface';
+import { TypeHtml } from '@type-dom/framework';
+import { ITdButtonAbstract, TdButtonProps } from './td-button.interface';
+import './style/index';
 export declare abstract class TdButtonAbstract extends TypeHtml implements ITdButtonAbstract {
     abstract className: 'TdButton' | string;
-    textNode?: TextNode;
-    props: ITdButtonConfig;
-    nodeName: string;
-    dom: HTMLElement;
-    span?: Span;
-    icon?: TdIcon | SlotNode;
-    private type?;
-    private plain?;
-    private disabled?;
-    protected constructor(params?: ITdButtonConfig);
+    props: TdButtonProps;
+    dom?: HTMLElement;
+    protected constructor(params?: TdButtonProps);
     setup(): void;
-    useType(params?: ITdButtonConfig): void;
 }

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

@@ -3,181 +3,86 @@ 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 var_1 = require("../../../styles/var");
-const td_input_style_1 = require("../../form/td-input/td-input.style");
-// import { $iconLeft, $iconLoading, $iconRight } from '../td-icon/td-icon.style';
+const signals_1 = require("@type-dom/signals");
+const use_namespace_1 = require("../../../hooks/use-namespace");
 const td_icon_class_1 = require("../td-icon/td-icon.class");
-const td_button_style_1 = require("./td-button.style");
+const td_button_const_1 = require("./td-button.const");
+const button_custom_1 = require("./button-custom");
+const use_button_1 = require("./use-button");
+require("./style/index");
 class TdButtonAbstract extends framework_1.TypeHtml {
     constructor(params = {}) {
-        var _a, _b, _c;
         super();
-        // this.useTag(params.tag || 'button');
-        this.nodeName = params.tag || 'button';
-        this.dom = document.createElement(this.nodeName);
+        this.assignProps(td_button_const_1.buttonProps);
+        this.addEmits(td_button_const_1.buttonEmits);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c, _d, _e, _f;
+        const props = this.props;
+        const buttonStyle = (0, button_custom_1.useButtonCustomStyle)(props);
+        if (props.color) {
+            console.error('buttonStyle is ', buttonStyle);
+        }
+        const ns = (0, use_namespace_1.useNamespace)('button');
+        const { _ref, _size, _type, _disabled, _props, shouldAddSpace, handleClick, } = (0, use_button_1.useButton)(props, this.emit);
+        const buttonKls = (0, signals_1.computed)(() => [
+            ns.b(),
+            ns.m(_type.get()),
+            ns.m(_size.get()),
+            ns.is('disabled', _disabled.get()),
+            ns.is('loading', props.loading),
+            ns.is('plain', props.plain),
+            ns.is('round', props.round),
+            ns.is('circle', props.circle),
+            ns.is('text', props.text),
+            ns.is('link', props.link),
+            ns.is('has-bg', props.bg),
+        ]);
+        // v-bind="_props"
+        // :is="tag"
+        this.assignProps({
+            nodeName: props.tag,
+        });
+        this.addEvents({
+            click: handleClick,
+        });
         this.attr.addObj({
-            name: 'td-button',
-            type: 'button'
+            type: 'button',
+            class: buttonKls,
+            refDom: _ref,
         });
-        this.style.addObj(td_button_style_1.$tdButtonBase);
-        if (params === null || params === void 0 ? void 0 : params.loading) {
-            if ((_a = params === null || params === void 0 ? void 0 : params.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);
+        this.style.addObj(buttonStyle);
+        // this.attr.addClass(buttonStyle);
+        if (props.loading) {
+            if ((_a = props.slots) === null || _a === void 0 ? void 0 : _a.loading) {
+                this.slotChildren(props.slots.loading);
             }
             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 ((params === null || params === void 0 ? void 0 : params.svgObj) || ((_b = params === null || params === void 0 ? void 0 : params.slots) === null || _b === void 0 ? void 0 : _b.icon)) {
-            this.icon = new td_icon_class_1.TdIcon({
-                name: 'icon-expand',
-                // svgObj: props.svgObj
-            });
-            if (params.svgObj) {
-                this.icon.addChild(params.svgObj);
-            }
-            else if ((_c = params === null || params === void 0 ? void 0 : params.slots) === null || _c === void 0 ? void 0 : _c.icon) {
-                // this.icon = props.slots.icon;
-                // this.iconSlot = new SlotNode('icon', props.slots.icon);
-                this.icon.slotChild(params.slots.icon);
-            }
-            this.addChild(this.icon);
-        }
-        // this.useIcon(props);
-        if (params === null || params === void 0 ? void 0 : params.slot) {
-            // this.defaultSlot = new SlotNode('default', props.slot);
-            // this.icon?.style.addObj($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.useSlots，所以这里要手动添加 slot。
-            this.getSlotNode().addSlot(params.slot);
-            this.addChild(span);
-        }
-        // 悬浮、聚焦、激活状态样式
-        // console.log('then td-button add events . ');
-        this.addEvents({
-            mouseenter: (evt) => {
-                // console.log('td-button mouseenter . ');
-                if (this.disabled) {
-                    this.style.setObj({
-                        cursor: 'not-allowed'
-                    });
-                }
-                else {
-                    if (this.type) {
-                        this.style.setObj(td_button_style_1.$buttonStateColors[this.type].hover);
-                    }
-                    else {
-                        this.style.setObj({
-                            color: var_1.$button.hover.textColor,
-                            backgroundColor: var_1.$button.hover.borderColor, // $colors['primary']['light-3'],
-                            borderColor: var_1.$button.hover.borderColor
-                        });
-                    }
-                }
-            },
-            mouseleave: () => {
-                // console.log('td-button mouseout . ');
-                if (this.disabled) {
-                    this.style.setObj({
-                        cursor: 'auto'
-                    });
-                }
-                else {
-                    if (this.type) {
-                        if (this.plain) {
-                            this.style.setObj(td_button_style_1.$buttonPlainColors[this.type].default);
-                        }
-                        else {
-                            this.style.setObj(td_button_style_1.$buttonStateColors[this.type].default);
-                        }
-                    }
-                    else {
-                        this.style.setObj({
-                            color: var_1.$button.textColor,
-                            backgroundColor: var_1.$button.bgColor,
-                            borderColor: var_1.$button.borderColor
-                        });
-                    }
-                }
+                this.addChildren(new td_icon_class_1.TdIcon({
+                    class: ns.is('loading'),
+                    slot: new svgs_1.ElLoadingSvg(),
+                }));
             }
-        });
-        this.props = this.useParams(params); // 这里的config赋值是要替换掉上面的config的预置值的。
-    }
-    setup() {
-        console.log('td-button setup . ');
-        const props = this.props;
-        this.useType(props);
-        if (props.disabled) {
-            this.disabled = props.disabled;
-            this.style.addObj({
-            // color: $button.disabled.textColor,
-            // backgroundColor: $button.disabled.bgColor,
-            // borderColor: $button.disabled.borderColor,
-            });
-        }
-        const size = props.size ? props.size : 'default';
-        this.style.addObj(td_button_style_1.$sizeOpts[size]);
-        if (props.round) {
-            this.style.addObj({
-                borderRadius: var_1.$borderRadius.round
-            });
-        }
-        else if (props.circle) {
-            this.style.addObj({
-                width: td_input_style_1.$inputHeight[props.size || 'default'], // map.get($input-height, 'default');
-                borderRadius: var_1.$borderRadius.circle,
-                padding: td_button_style_1.$buttonPaddingVertical.default
-            });
         }
-    }
-    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.style.addObj(td_button_style_1.$buttonPlainColors[params.type].disabled);
-                }
-                else {
-                    console.log(td_button_style_1.$buttonPlainColors[params.type].default);
-                    this.style.addObj(td_button_style_1.$buttonPlainColors[params.type].default);
-                }
+        else if (props.icon || ((_b = props.slots) === null || _b === void 0 ? void 0 : _b.icon)) {
+            if (props.icon) {
+                this.addChildren(new td_icon_class_1.TdIcon({
+                    slot: props.icon,
+                }));
             }
             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.style.addObj(td_button_style_1.$buttonStateColors[params.type].disabled);
-                }
-                else {
-                    this.style.addObj(td_button_style_1.$buttonStateColors[params.type].default);
-                }
+                this.addChildren(new td_icon_class_1.TdIcon({
+                    slot: (_c = props.slots) === null || _c === void 0 ? void 0 : _c.icon,
+                }));
             }
         }
+        if (((_d = props.slots) === null || _d === void 0 ? void 0 : _d.default) || props.slot) {
+            this.addChild(new framework_1.Span({
+                class: shouldAddSpace.get() ? ns.em('text', 'expand') : '',
+                slot: (_f = (_e = props.slots) === null || _e === void 0 ? void 0 : _e.default) !== null && _f !== void 0 ? _f : props.slot,
+            }));
+        }
     }
 }
 exports.TdButtonAbstract = TdButtonAbstract;

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

@@ -1,6 +1,6 @@
-import { ITdButton, ITdButtonConfig } from './td-button.interface';
+import { ITdButton, TdButtonProps } from './td-button.interface';
 import { TdButtonAbstract } from './td-button.abstract';
 export declare class TdButton extends TdButtonAbstract implements ITdButton {
     className: 'TdButton';
-    constructor(params?: ITdButtonConfig);
+    constructor(params?: TdButtonProps);
 }