@type-dom/ui 0.0.4 → 0.0.6

package/README.md

@@ -1,45 +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,6 +1,6 @@
 {
   "name": "@type-dom/ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "dependencies": {
     "@type-dom/svgs": "*",
     "rxjs": "^7.5.7",
@@ -16,5 +16,6 @@
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
-  }
-}
+  },
+  "types": "./src/index.d.ts"
+}

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/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;
+};