@type-dom/ui 0.1.0 → 0.1.2

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

@@ -3,181 +3,85 @@ 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.addEmits(td_button_const_1.buttonEmits);
+        this.assignProps(td_button_const_1.buttonProps);
+        this.props = this.useParams(params);
+    }
+    setup() {
+        var _a, _b, _c, _d, _e, _f;
+        const props = this.props;
+        const emit = this.emit;
+        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, emit);
+        // console.log('_disabled.get() is ', _disabled.get());
+        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(Object.assign(Object.assign({}, _props), { nodeName: props.tag, refDom: _ref }));
+        this.addEvents({
+            click: handleClick,
+        });
         this.attr.addObj({
-            name: 'td-button',
-            type: 'button'
+            type: 'button',
+            class: buttonKls,
         });
-        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);
 }

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

@@ -1,7 +1,22 @@
 import { InjectionKey } from '@type-dom/framework';
-import type { ITdButtonConfig } from './td-button.interface';
+import type { TdButtonProps } from './td-button.interface';
 export interface ButtonGroupContext {
-    size?: ITdButtonConfig['size'];
-    type?: ITdButtonConfig['type'];
+    size?: TdButtonProps['size'];
+    type?: TdButtonProps['type'];
 }
 export declare const buttonGroupContextKey: InjectionKey<ButtonGroupContext>;
+export declare const buttonTypes: readonly ["default", "primary", "success", "warning", "info", "danger", "text", ""];
+export declare const buttonNativeTypes: readonly ["button", "submit", "reset"];
+export declare const buttonProps: {
+    type: string;
+    nativeType: string;
+    tag: string;
+};
+export declare const buttonEmits: {
+    click: (evt: MouseEvent) => boolean;
+};
+export type ButtonType = TdButtonProps['type'];
+export type ButtonNativeType = TdButtonProps['nativeType'];
+export interface ButtonConfigContext {
+    autoInsertSpace?: boolean;
+}

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

@@ -1,4 +1,27 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonGroupContextKey = void 0;
+exports.buttonEmits = exports.buttonProps = exports.buttonNativeTypes = exports.buttonTypes = exports.buttonGroupContextKey = void 0;
 exports.buttonGroupContextKey = Symbol('buttonGroupContextKey');
+exports.buttonTypes = [
+    'default',
+    'primary',
+    'success',
+    'warning',
+    'info',
+    'danger',
+    /**
+     * @deprecated
+     * Text type will be deprecated in the next major version (3.0.0)
+     */
+    'text',
+    '',
+];
+exports.buttonNativeTypes = ['button', 'submit', 'reset'];
+exports.buttonProps = {
+    type: '',
+    nativeType: 'button',
+    tag: 'button',
+};
+exports.buttonEmits = {
+    click: (evt) => evt instanceof MouseEvent,
+};

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

@@ -1,9 +1,12 @@
-import { ITypeConfig, ITypeHtml, TypeSvgSvg } from '@type-dom/framework';
+import { TypeProps, ITypeHtml, TypeSvgSvg } from '@type-dom/framework';
+import { MaybeRef } from '@type-dom/signals';
+import { ComponentSize } from '../../../constants';
 export interface ITdButtonAbstract extends ITypeHtml {
     className: 'TdButton' | string;
 }
 export interface ITdButton extends ITdButtonAbstract {
     className: 'TdButton';
+    props: TdButtonProps;
 }
 export type IButtonSize = 'small' | 'default' | 'large';
 export type IButtonType = 'default' | 'primary' | 'success' | 'warning' | 'info' | 'danger'
@@ -26,20 +29,79 @@ export type IButtonNativeType = 'button' | 'submit' | 'reset';
  *     color 自定义按钮的颜色。
  *     disabled  按钮是否为禁用状态
  */
-export interface ITdButtonConfig extends ITypeConfig {
-    size?: IButtonSize;
-    disabled?: boolean;
-    type?: IButtonType;
+export interface TdButtonProps extends TypeProps {
     svgObj?: TypeSvgSvg;
-    icon?: string;
+    /**
+     * @description button size
+     */
+    size?: ComponentSize;
+    /**
+     * @description disable the button
+     */
+    disabled?: MaybeRef<boolean>;
+    /**
+     * @description button type
+     */
+    type?: IButtonType;
+    /**
+     * @description icon component
+     */
+    icon?: TypeSvgSvg;
+    /**
+     * @description native button type
+     */
     nativeType?: IButtonNativeType;
+    /**
+     * @description determine whether it's loading
+     */
     loading?: boolean;
+    /**
+     * @description customize loading icon component
+     *     default?: () => Loading;
+     */
     loadingIcon?: TypeSvgSvg;
+    /**
+     * @description determine whether it's a plain button
+     */
     plain?: boolean;
+    /**
+     * @description determine whether it's a text button
+     */
     text?: boolean;
+    /**
+     * @description determine whether it's a link button
+     */
     link?: boolean;
-    round?: boolean;
+    /**
+     * @description determine whether the text button background color is always on
+     */
     bg?: boolean;
+    /**
+     * @description native button autofocus
+     */
+    autofocus?: boolean;
+    /**
+     * @description determine whether it's a round button
+     */
+    round?: boolean;
+    /**
+     * @description determine whether it's a circle button
+     */
     circle?: boolean;
+    /**
+     * @description custom button color; automatically calculate `hover` and `active` color
+     */
     color?: string;
+    /**
+     * @description dark mode; which automatically converts `color` to dark mode colors
+     */
+    dark?: boolean;
+    /**
+     * @description automatically insert a space between two chinese characters
+     */
+    autoInsertSpace?: boolean;
+    /**
+     * @description custom element tag
+     */
+    tag?: string;
 }

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

@@ -1,6 +1,2 @@
 "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.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/html';
+import { TdButton as Button } from './td-button.class';
+declare const meta: Meta<typeof Button>;
+export default meta;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const meta = {
+// component: new Button().dom,
+};
+exports.default = meta;
+// type Story = StoryObj<typeof Button>;
+// export const Basic: Story = {};
+//
+// export const Primary: Story = {
+//   args: {
+//     // primary: true,
+//     // type: 'primary',
+//   },
+// };

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

@@ -6,11 +6,13 @@ export declare const $buttonBorderRadius: {
     small: string;
 };
 export declare const $buttonPaddingVertical: {
+    '': string;
     large: string;
     default: string;
     small: string;
 };
 export declare const $buttonPaddingHorizontal: {
+    '': string;
     large: string;
     default: string;
     small: string;

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

@@ -11,11 +11,13 @@ exports.$buttonBorderRadius = {
     small: parseInt(var_1.$borderRadius.base, 10) - 1 + 'px',
 };
 exports.$buttonPaddingVertical = {
+    '': '9px',
     large: '13px',
     default: '9px',
     small: '6px',
 };
 exports.$buttonPaddingHorizontal = {
+    '': '16px',
     large: '20px',
     default: '16px',
     small: '12px',
@@ -23,7 +25,7 @@ exports.$buttonPaddingHorizontal = {
 exports.$buttonIconSpanGap = {
     large: '8px',
     default: '6px',
-    small: '4px'
+    small: '4px',
 };
 exports.$sizeOpts = {
     // mini: {
@@ -36,20 +38,20 @@ exports.$sizeOpts = {
         height: var_1.$commonComponentSize.small,
         fontSize: var_1.$fontSizeMap.small,
         padding: exports.$buttonPaddingVertical.small + ' ' + exports.$buttonPaddingHorizontal.small,
-        borderRadius: exports.$buttonBorderRadius.small
+        borderRadius: exports.$buttonBorderRadius.small,
     },
     default: {
         height: var_1.$commonComponentSize.default,
         fontSize: var_1.$fontSizeMap.default,
         padding: exports.$buttonPaddingVertical.default + ' ' + exports.$buttonPaddingHorizontal.default,
-        borderRadius: exports.$buttonBorderRadius.default
+        borderRadius: exports.$buttonBorderRadius.default,
     },
     large: {
         height: var_1.$commonComponentSize.large,
         fontSize: var_1.$fontSizeMap.large,
         padding: exports.$buttonPaddingVertical.large + ' ' + exports.$buttonPaddingHorizontal.large,
-        borderRadius: exports.$buttonBorderRadius.large
-    }
+        borderRadius: exports.$buttonBorderRadius.large,
+    },
 };
 exports.$tdButtonBase = {
     display: 'inline-flex',
@@ -75,7 +77,7 @@ exports.$tdButtonBase = {
     // borderWidth: $borderWidth,
     // borderStyle: $borderStyle,
     borderColor: var_1.$button.borderColor, // getCssVar('button', 'border-color');
-    padding: '8px 15px'
+    padding: '8px 15px',
 };
 exports.$buttonStateColors = {};
 function buttonVariant($type) {
@@ -85,24 +87,24 @@ function buttonVariant($type) {
             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'],
-            borderColor: var_1.$colors[$type]['dark-2'] // ['color', $type, 'dark-2'],
+            borderColor: var_1.$colors[$type]['dark-2'], // ['color', $type, 'dark-2'],
         },
         disabled: {
             color: var_1.$colorWhite,
             backgroundColor: var_1.$colors[$type]['light-5'], // ['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'],
+        },
     };
     // for (const $type1 in $buttonColorTypes) {
     //   console.log('$type1 is ', $type1);
@@ -132,7 +134,7 @@ for (const $type of [
     'success',
     'warning',
     'danger',
-    'info'
+    'info',
 ]) {
     // @include m($type) {
     //   @include button-variant($type);
@@ -146,21 +148,21 @@ function buttonPlain($type) {
             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
+            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'],
-        }
+            borderColor: var_1.$colors[$type]['light-5'], // ['color', $type, 'light-5'],
+        },
     };
 }
 for (const $type of [
@@ -169,7 +171,7 @@ for (const $type of [
     'success',
     'warning',
     'danger',
-    'info'
+    'info',
 ]) {
     buttonPlain($type);
 }

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

@@ -0,0 +1,21 @@
+import { AnyFn } from '@type-dom/utils';
+import { TdButtonProps } from './td-button.interface';
+export declare const useButton: (props: TdButtonProps, emit: AnyFn) => {
+    _disabled: import("@type-dom/signals").Computed<boolean>;
+    _size: import("@type-dom/signals").Computed<"" | "default" | "small" | "large">;
+    _type: import("@type-dom/signals").Computed<"primary" | "success" | "warning" | "danger" | "info" | "default" | "" | "text">;
+    _ref: import("@type-dom/signals").Signal<HTMLButtonElement>;
+    _props: import("@type-dom/signals").Computed<{
+        ariaDisabled: boolean | undefined;
+        disabled: boolean | undefined;
+        autofocus: boolean | undefined;
+        type: import("./td-button.interface").IButtonNativeType | undefined;
+    } | {
+        ariaDisabled?: undefined;
+        disabled?: undefined;
+        autofocus?: undefined;
+        type?: undefined;
+    }>;
+    shouldAddSpace: import("@type-dom/signals").Computed<boolean>;
+    handleClick: (evt?: MouseEvent) => void;
+};