@type-dom/ui 0.0.3 → 0.0.5

package/src/components/data/td-table/td-table.interface.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/data/td-tag/td-tag.class.d.ts

@@ -0,0 +1,12 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdTag, ITdTagConfig } from './td-tag.interface';
+export declare class TdTag extends UI implements ITdTag {
+    className: 'TdTag';
+    props: ITdTagConfig;
+    private content;
+    private closeIcon?;
+    private defaultSlot?;
+    constructor(params?: ITdTagConfig);
+    handleClose(): void;
+    handleClick(): void;
+}

package/src/components/data/td-tag/td-tag.class.js

@@ -0,0 +1,144 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdTag = 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 td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+const var_1 = require("../../../styles/var");
+const td_tag_style_1 = require("./td-tag.style");
+class TdTag extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params, 'span');
+        this.className = 'TdTag';
+        this.ctrl.addAttrName('td-tag');
+        (0, td_tag_style_1.useType)();
+        const type = (params === null || params === void 0 ? void 0 : params.type) || 'primary';
+        const effect = (params === null || params === void 0 ? void 0 : params.effect) || 'light'; // 默认；
+        if (effect === 'dark') {
+            (0, td_tag_style_1.genTheme)('', '', 'light-3');
+            td_tag_style_1.$tag.textColor = var_1.$colorWhite;
+            td_tag_style_1.$tagTypes[type].textColor = var_1.$colorWhite;
+        }
+        else if (effect === 'plain') {
+            (0, td_tag_style_1.genTheme)(false, 'light-5', '');
+            td_tag_style_1.$tag.bgColor = var_1.$fillColor.blank;
+        }
+        else {
+            (0, td_tag_style_1.genTheme)('light-9', 'light-8', '');
+            console.log('genThem . then $tag is ', td_tag_style_1.$tag);
+            console.log('$tagTypes is ', td_tag_style_1.$tagTypes);
+        }
+        this.ctrl.addStyleObj({
+            // background-color: getCssVar('tag-bg-color'),
+            backgroundColor: td_tag_style_1.$tagTypes[type].bgColor,
+            // border-color: getCssVar('tag-border-color'),
+            borderColor: td_tag_style_1.$tagTypes[type].borderColor,
+            // color: getCssVar('tag-text-color'),
+            color: td_tag_style_1.$tagTypes[type].textColor,
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            verticalAlign: 'middle',
+            // height: map.get($tag-height, 'default'),
+            height: td_tag_style_1.$tagHeight.default,
+            // padding: 0 map.get($tag-padding, 'default') - $border-width,
+            padding: '0 ' +
+                (parseFloat(td_tag_style_1.$tagPadding.default) - parseFloat(var_1.$borderWidth) + 'px'),
+            // font-size: getCssVar('tag-font-size'),
+            fontSize: td_tag_style_1.$tag.fontSize,
+            lineHeight: 1,
+            // border-width: $tag-border-width,
+            borderWidth: var_1.$borderWidth,
+            borderStyle: 'solid',
+            // border-radius: getCssVar('tag-border-radius'),
+            borderRadius: td_tag_style_1.$tag.borderRadius,
+            boxSizing: 'border-box',
+            whiteSpace: 'nowrap'
+            // padding-right: map.get($tag-icon-span-gap, 'default') - $border-width; // isClosable
+            // paddingRight: params?.closable ? parseFloat($tagIconSpanGap.default) - parseFloat($borderWidth) + 'px' : ''
+        });
+        this.content = new framework_1.Span({
+            // add content slot
+            name: 'content'
+        });
+        this.addChild(this.content);
+        if (params === null || params === void 0 ? void 0 : params.slot) {
+            this.defaultSlot = new framework_1.SlotNode('default', params.slot);
+            this.content.addChild(this.defaultSlot);
+        }
+        // style样式应该在 style类中处理， useConfig useType useSize ....
+        if (params === null || params === void 0 ? void 0 : params.hit) {
+            this.ctrl.addStyleObj({
+                borderColor: var_1.$colorPrimary
+            });
+        }
+        if (params === null || params === void 0 ? void 0 : params.round) {
+            this.ctrl.addStyleObj({
+                borderRadius: td_tag_style_1.$tag.borderRadiusRounded
+            });
+        }
+        const size = (params === null || params === void 0 ? void 0 : params.size) || 'default';
+        this.ctrl.addStyleObj(td_tag_style_1.$tagSizes[size]);
+        // if (!params?.disableTransitions) { // TODO: 添加过渡
+        //   params?.parent?.addChild(new Transition({
+        //     slot: this,
+        //   }))
+        // }
+        this.props = this.setParams(params);
+        if (params === null || params === void 0 ? void 0 : params.closable) {
+            this.ctrl.addStyleObj({
+                paddingRight: parseFloat(td_tag_style_1.$tagIconSpanGap.default) - parseFloat(var_1.$borderWidth) + 'px'
+            });
+            this.closeIcon = new td_icon_class_1.TdIcon({
+                svgObj: new svgs_1.ElCloseSvg(),
+                styleObj: {
+                    flexShrink: 0,
+                    // color: getCssVar('tag', 'text-color'),
+                    // color: $tagTextColor,
+                    borderRadius: '50%',
+                    cursor: 'pointer',
+                    // font-size: calc(#{getCssVar('icon-size')} - #{$svg-margin-size * 2}),
+                    // height: getCssVar('icon-size'),
+                    height: td_tag_style_1.$tagIconSize[params.size || 'default'],
+                    // width: getCssVar('icon-size'),
+                    width: td_tag_style_1.$tagIconSize[params.size || 'default'],
+                    // margin-left: map.get($tag-icon-span-gap, 'default');
+                    marginLeft: td_tag_style_1.$tagIconSpanGap[params.size || 'default']
+                },
+                events: {
+                    mouseenter: (evt, element) => {
+                        // console.log('mouseenter . ');
+                        evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                        element === null || element === void 0 ? void 0 : element.ctrl.setStyleObj({
+                            backgroundColor: td_tag_style_1.$tagTypes[type].hoverColor,
+                            color: var_1.$colorWhite
+                        });
+                    },
+                    mouseleave: (evt, element) => {
+                        // console.log('mouseleave . ');
+                        evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                        element === null || element === void 0 ? void 0 : element.ctrl.setStyleObj({
+                            backgroundColor: td_tag_style_1.$tagTypes[type].bgColor,
+                            color: td_tag_style_1.$tagTypes[type].textColor
+                        });
+                    },
+                    click: (evt, element) => {
+                        // console.log('click . ');
+                        evt === null || evt === void 0 ? void 0 : evt.stopPropagation();
+                        this.handleClose();
+                    }
+                }
+            });
+            this.addChild(this.closeIcon);
+        }
+    }
+    handleClose() {
+        console.log('handleClose');
+        this.destroy();
+    }
+    handleClick() {
+        console.log('handleClick');
+    }
+}
+exports.TdTag = TdTag;

package/src/components/data/td-tag/td-tag.interface.d.ts

@@ -0,0 +1,42 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ISize } from '../../../styles/size';
+import { IType } from '../../../styles';
+export interface ITdTag extends IUI {
+    className: 'TdTag';
+}
+export interface ITdTagConfig extends IUIConfig {
+    /**
+     * @description type of Tag
+     *     default: 'primary',
+     */
+    type?: IType;
+    /**
+     * @description whether Tag can be removed
+     */
+    closable?: boolean;
+    /**
+     * @description whether to disable animations
+     */
+    disableTransitions?: boolean;
+    /**
+     * @description whether Tag has a highlighted border
+     */
+    hit?: boolean;
+    /**
+     * @description background color of the Tag
+     */
+    color?: string;
+    /**
+     * @description size of Tag
+     */
+    size?: ISize;
+    /**
+     * @description theme of Tag
+     *     default: 'light',
+     */
+    effect?: 'dark' | 'light' | 'plain';
+    /**
+     * @description whether Tag is rounded
+     */
+    round?: boolean;
+}

package/src/components/data/td-tag/td-tag.interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/src/components/data/td-tag/td-tag.style.d.ts

@@ -0,0 +1,45 @@
+import { IStyle } from '@type-dom/css-type';
+import { IType } from '../../../styles/var';
+import { ISize } from '../../../styles/size';
+export declare const $tag: {
+    fontSize: string;
+    bgColor?: string;
+    borderColor?: string;
+    hoverColor?: string;
+    borderRadius: string;
+    borderRadiusRounded?: string;
+    textColor?: string;
+    hit?: string;
+};
+export declare const $tagHeight: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $tagPadding: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $tagIconSize: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $tagBorderWidth = "1px";
+export declare const $tagIconSpanGap: {
+    large: string;
+    default: string;
+    small: string;
+};
+export declare const $iconSize = "14px";
+export declare const $tagTypes: Record<IType, {
+    bgColor: string;
+    borderColor: string;
+    hoverColor: string;
+    textColor: string;
+    hit: string;
+}>;
+export declare function genTheme($backgroundColorWeight: string | false, $borderColorWeight: string, $hoverColorWeight: string): void;
+export declare const $tagSizes: Record<ISize, IStyle<0 | (string & {}), string & {}>>;
+export declare function useType(): void;

package/src/components/data/td-tag/td-tag.style.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useType = exports.$tagSizes = exports.genTheme = exports.$tagTypes = exports.$iconSize = exports.$tagIconSpanGap = exports.$tagBorderWidth = exports.$tagIconSize = exports.$tagPadding = exports.$tagHeight = exports.$tag = void 0;
+const var_1 = require("../../../styles/var");
+exports.$tag = {
+    fontSize: '12px',
+    borderRadius: '4px',
+    borderRadiusRounded: '9999px',
+};
+exports.$tagHeight = {
+    large: '32px',
+    default: '24px',
+    small: '20px',
+};
+exports.$tagPadding = {
+    large: '12px',
+    default: '10px',
+    small: '8px',
+};
+exports.$tagIconSize = {
+    large: '16px',
+    default: '14px',
+    small: '12px',
+};
+exports.$tagBorderWidth = '1px';
+exports.$tagIconSpanGap = {
+    large: '8px',
+    default: '6px',
+    small: '4px',
+};
+exports.$iconSize = '14px';
+// 常用主题
+// dark
+// plain
+exports.$tagTypes = {};
+function genTheme($backgroundColorWeight, $borderColorWeight, $hoverColorWeight) {
+    exports.$tag.bgColor = returnVarList($backgroundColorWeight);
+    exports.$tag.borderColor = returnVarList($borderColorWeight);
+    exports.$tag.hoverColor = returnVarList($hoverColorWeight);
+    for (const type of var_1.$types) {
+        exports.$tagTypes[type] = {
+            bgColor: returnVarList($backgroundColorWeight, type),
+            borderColor: returnVarList($borderColorWeight, type),
+            hoverColor: returnVarList($hoverColorWeight, type),
+            textColor: var_1.$colors[type].base,
+            hit: var_1.$colors[type].base,
+        };
+        console.log('$tagTypes[type] is ', exports.$tagTypes[type]);
+    }
+    const hoverColor = returnVarList($hoverColorWeight, 'primary');
+    console.log('hoverColor is ', hoverColor);
+}
+exports.genTheme = genTheme;
+function returnVarList($var, $type = 'primary') {
+    console.log('returnVarList . ');
+    let $list = var_1.$fillColor.blank;
+    if ($var !== false) {
+        $list = var_1.$colors[$type] && var_1.$colors[$type][$var || 'base'];
+    }
+    return $list;
+}
+exports.$tagSizes = {};
+function useType() {
+    for (const size of ['large', 'default', 'small']) {
+        exports.$tagSizes[size] = {
+            padding: '0 ' +
+                (parseFloat(exports.$tagPadding[size]) - parseFloat(exports.$tagBorderWidth)) +
+                'px',
+            height: exports.$tagHeight[size],
+            // iconSize: $tagIconSize[size as ISize],
+            // iconSpanGap: $tagIconSpanGap[size]
+            marginLeft: exports.$tagIconSpanGap[size],
+            // paddingRight: parseFloat($tagIconSpanGap[size as ISize]) - parseFloat($borderWidth) + 'px', // closable 时
+        };
+        if (size === 'small') {
+            exports.$tagSizes[size].transform = 'scale(0.8)';
+        }
+    }
+}
+exports.useType = useType;

package/src/components/data/td-timeline/td-timeline.class.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/data/td-timeline/td-timeline.interface.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/data/td-tree/td-tree.class.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/data/td-tree/td-tree.interface.js

@@ -0,0 +1 @@
+"use strict";

package/src/components/feedback/dialog/dialog.class.d.ts

@@ -2,5 +2,6 @@ import { Overlay } from '../overlay/overlay.abstract';
 import { IDialogConfig } from './dialog.interface';
 export declare class Dialog extends Overlay {
     className: 'Dialog';
-    constructor(config?: Partial<IDialogConfig>);
+    props: IDialogConfig;
+    constructor(params?: IDialogConfig);
 }

package/src/components/feedback/dialog/dialog.class.js

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = void 0;
 const overlay_abstract_1 = require("../overlay/overlay.abstract");
 class Dialog extends overlay_abstract_1.Overlay {
-    constructor(config) {
+    constructor(params) {
         super();
         this.className = 'Dialog';
-        this.addAttrObj({
+        this.ctrl.addAttrObj({
             name: 'dialog'
         });
-        this.setConfig(config);
-        if (config === null || config === void 0 ? void 0 : config.el) {
-            this.mount(config.el);
+        this.props = this.setParams(params);
+        if (params === null || params === void 0 ? void 0 : params.to) {
+            this.mount(params.to);
         }
         else {
             this.mount(document.body);

package/src/components/feedback/dialog/dialog.interface.d.ts

@@ -1,5 +1,4 @@
-import { ITypeConfig } from '@type-dom/framework';
-export interface IDialogConfig extends ITypeConfig {
-    el?: HTMLElement;
+import { IUIConfig } from '../../../ui/ui.interface';
+export interface IDialogConfig extends IUIConfig {
     title?: string;
 }

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

@@ -1,2 +1,13 @@
 export { Dialog } from './dialog/dialog.class';
 export { MessageBox } from './message-box/message-box';
+export { TdAlert } from './td-alert/td-alert.class';
+export type * from './td-alert/td-alert.interface';
+export { TdDialog } from './td-dialog/td-dialog.class';
+export type * from './td-dialog/td-dialog.interface';
+export * from './td-dialog/td-dialog.style';
+export { TdMessage } from './td-message/td-message.class';
+export type * from './td-message/td-message.interface';
+export { TdMessageBox } from './td-message-box/td-message-box.class';
+export type * from './td-message-box/td-message-box.interface';
+export { TdNotification } from './td-notification/td-notification.class';
+export type * from './td-notification/td-notification.interface';

package/src/components/feedback/index.js

@@ -1,7 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessageBox = exports.Dialog = void 0;
+exports.TdNotification = exports.TdMessageBox = exports.TdMessage = exports.TdDialog = exports.TdAlert = exports.MessageBox = exports.Dialog = void 0;
+const tslib_1 = require("tslib");
 var dialog_class_1 = require("./dialog/dialog.class");
 Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return dialog_class_1.Dialog; } });
 var message_box_1 = require("./message-box/message-box");
 Object.defineProperty(exports, "MessageBox", { enumerable: true, get: function () { return message_box_1.MessageBox; } });
+var td_alert_class_1 = require("./td-alert/td-alert.class");
+Object.defineProperty(exports, "TdAlert", { enumerable: true, get: function () { return td_alert_class_1.TdAlert; } });
+var td_dialog_class_1 = require("./td-dialog/td-dialog.class");
+Object.defineProperty(exports, "TdDialog", { enumerable: true, get: function () { return td_dialog_class_1.TdDialog; } });
+tslib_1.__exportStar(require("./td-dialog/td-dialog.style"), exports);
+var td_message_class_1 = require("./td-message/td-message.class");
+Object.defineProperty(exports, "TdMessage", { enumerable: true, get: function () { return td_message_class_1.TdMessage; } });
+var td_message_box_class_1 = require("./td-message-box/td-message-box.class");
+Object.defineProperty(exports, "TdMessageBox", { enumerable: true, get: function () { return td_message_box_class_1.TdMessageBox; } });
+// export * from './td-message/td-message.style';
+var td_notification_class_1 = require("./td-notification/td-notification.class");
+Object.defineProperty(exports, "TdNotification", { enumerable: true, get: function () { return td_notification_class_1.TdNotification; } });
+// export { TdMessageBox } from './td-message-box/td-message-box';

package/src/components/feedback/message-box/message-box.d.ts

@@ -2,7 +2,8 @@ import { Overlay } from '../overlay/overlay.abstract';
 import { IMessageBoxConfig } from './message-box.interface';
 export declare class MessageBox extends Overlay {
     className: 'MessageBox';
-    constructor(config?: IMessageBoxConfig);
+    props: IMessageBoxConfig;
+    constructor(params?: IMessageBoxConfig);
     toast(title: string, message: string): void;
     confirm(title: string, message: string): void;
 }

package/src/components/feedback/message-box/message-box.interface.d.ts

@@ -1,4 +1,4 @@
-import { ITypeConfig } from '@type-dom/framework';
-export interface IMessageBoxConfig extends ITypeConfig {
+import { IUIConfig } from '../../../ui/ui.interface';
+export interface IMessageBoxConfig extends IUIConfig {
     el?: HTMLElement;
 }

package/src/components/feedback/message-box/message-box.js

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessageBox = void 0;
 const overlay_abstract_1 = require("../overlay/overlay.abstract");
 class MessageBox extends overlay_abstract_1.Overlay {
-    constructor(config) {
+    constructor(params) {
         super();
         this.className = 'MessageBox';
-        this.addAttrObj({
+        this.ctrl.addAttrObj({
             name: 'message-box'
         });
-        this.setConfig(config);
-        if (config === null || config === void 0 ? void 0 : config.el) {
-            this.mount(config.el);
+        this.props = this.setParams(params);
+        if (params === null || params === void 0 ? void 0 : params.el) {
+            this.mount(params.el);
         }
         else {
             // 默认挂载到body上;
@@ -23,7 +23,7 @@ class MessageBox extends overlay_abstract_1.Overlay {
         // this.clear();
         this.setTitle(title);
         this.setMsg(message);
-        this.show();
+        this.ctrl.show();
     }
     confirm(title, message) {
         this.setTitle(title);

package/src/components/feedback/overlay/container/body/body.js

@@ -6,14 +6,12 @@ class OverlayBody extends framework_1.TypeDiv {
     constructor() {
         super();
         this.className = 'OverlayBody';
-        this.styleObj = {
+        this.ctrl.addStyleObj({
             padding: '30px 20px',
             fontSize: '14px',
             wordBreak: 'break-all'
-        };
-        this.attrObj = {
-            name: 'overlay-body'
-        };
+        });
+        this.ctrl.addAttrName('overlay-body');
     }
 }
 exports.OverlayBody = OverlayBody;

package/src/components/feedback/overlay/container/container.js

@@ -10,18 +10,16 @@ class OverlayContainer extends framework_1.TypeDiv {
     constructor() {
         super();
         this.className = 'OverlayContainer';
-        this.styleObj = {
-            position: framework_1.StylePosition.relative,
+        this.ctrl.addStyleObj({
+            position: 'relative',
             margin: '15vh auto 50px',
             width: '50%',
             boxShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
             borderRadius: '4px',
             backgroundColor: '#FFF',
             padding: '20px'
-        };
-        this.attrObj = {
-            name: 'overlay-container'
-        };
+        });
+        this.ctrl.addAttrName('overlay-container');
         this.header = new header_1.OverlayHeader();
         this.header.parent = this;
         this.body = new body_1.OverlayBody();

package/src/components/feedback/overlay/container/footer/cancel-button/cancel-button.js

@@ -7,14 +7,14 @@ class CancelButton extends framework_1.TypeButton {
     constructor() {
         super();
         this.className = 'CancelButton';
-        this.addStyleObj({
+        this.ctrl.addStyleObj({
             // backgroundColor: '#f00',
             // color: '#FFF',
             margin: 'auto 10px'
             // outline: 'none',
             // border: '1px solid #f00',
         });
-        this.addAttrName('cancel-button');
+        this.ctrl.addAttrName('cancel-button');
         this.setTitle('取消');
     }
     initEvents() {
@@ -24,7 +24,7 @@ class CancelButton extends framework_1.TypeButton {
         }
         this.subscriptions.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
             var _a, _b, _c;
-            (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.hide();
+            (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.ctrl.hide();
         }));
     }
 }

package/src/components/feedback/overlay/container/footer/confirm-button/confirm-button.js

@@ -7,15 +7,13 @@ class ConfirmButton extends framework_1.TypeButton {
     constructor() {
         super();
         this.className = 'ConfirmButton';
-        this.styleObj = {
+        this.ctrl.addStyleObj({
             backgroundColor: '#1890ff',
             color: '#fff',
             borderColor: '#1890ff',
             margin: 'auto 10px'
-        };
-        this.attrObj = {
-            name: 'confirm-button'
-        };
+        });
+        this.ctrl.addAttrName('confirm-button');
         this.setTitle('确认');
         this.childNodes = [this.textNode];
     }
@@ -26,7 +24,7 @@ class ConfirmButton extends framework_1.TypeButton {
         }
         this.subscriptions.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
             var _a, _b, _c;
-            (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.hide();
+            (_c = (_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent) === null || _c === void 0 ? void 0 : _c.ctrl.hide();
         }));
     }
 }

package/src/components/feedback/overlay/container/footer/footer.d.ts

@@ -1,11 +1,10 @@
 import { TypeDiv } from '@type-dom/framework';
-import { OverlayContainer } from '../container';
 import { TdButton } from '../../../../basic/td-button/td-button.class';
+import { OverlayContainer } from '../container';
 export declare class OverlayFooter extends TypeDiv {
     className: 'OverlayFooter';
     parent?: OverlayContainer;
     cancelBtn: TdButton;
     confirmBtn: TdButton;
     constructor();
-    initEvents(): void;
 }