@type-dom/ui 0.0.1 → 0.0.3

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

@@ -0,0 +1,63 @@
+import { IStyle, TypeElement } from '@type-dom/framework';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdScrollbar extends IUI {
+    className: 'TdScrollbar';
+}
+export interface ITdScrollbarConfig extends IUIConfig {
+    /**
+     * @description height of scrollbar
+     */
+    height?: number | string;
+    /**
+     * @description max height of scrollbar
+     */
+    maxHeight: number | string;
+    /**
+     * @description whether to use the native scrollbar
+     */
+    native?: boolean;
+    /**
+     * @description style of wrap
+     */
+    wrapStyle?: Partial<IStyle>;
+    /**
+     * @description class of view
+     */
+    /**
+     * @description style of view
+     */
+    viewStyle?: Partial<IStyle>;
+    /**
+     * @description element tag of the view
+     * default: div
+     */
+    /**
+     * @description do not respond to container size changes, if the container size does not change, it is better to set it to optimize performance
+     */
+    noresize?: boolean;
+    /**
+     * @description always show
+     */
+    always?: boolean;
+    /**
+     * @description minimum size of scrollbar
+     */
+    minSize?: number;
+    /**
+     * @description id of view
+     */
+    id?: string;
+    /**
+     * @description role of view
+     */
+    role?: string;
+    /**
+     * @description aria-label of view
+     */
+    ariaLabel?: string;
+    /**
+     * @description aria-orientation of view
+     */
+    ariaOrientation?: 'horizontal' | 'vertical';
+    contents?: TypeElement[];
+}

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// export const scrollbarProps = buildProps({
+//
+// } as const)

package/src/components/basic/td-scrollbar/thumb/thumb.class.d.ts

@@ -0,0 +1,7 @@
+import { UI } from '../../../../ui/ui.abstract';
+import { ITdScrollbarThumb, ITdScrollbarThumbConfig } from './thumb.interface';
+export declare class TdScrollbarThumb extends UI implements ITdScrollbarThumb {
+    className: 'TdScrollbarThumb';
+    private thumb;
+    constructor(config?: ITdScrollbarThumbConfig);
+}

package/src/components/basic/td-scrollbar/thumb/thumb.class.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdScrollbarThumb = void 0;
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
+const ui_1 = require("@type-dom/ui");
+class TdScrollbarThumb extends ui_abstract_1.UI {
+    constructor(config) {
+        super();
+        this.className = 'TdScrollbarThumb';
+        this.addAttrName('td-scrollbar-thumb');
+        this.addStyleObj({
+            position: 'absolute',
+            right: '2px',
+            bottom: '2px',
+            zIndex: 1,
+            borderRadius: '4px',
+        });
+        this.thumb = new framework_1.Div({
+            styleObj: {
+                position: 'relative',
+                display: 'block',
+                width: 0,
+                height: 0,
+                cursor: framework_1.StyleCursor.pointer,
+                borderRadius: 'inherit',
+                // background-color: var(
+                //   #{getCssVarName('scrollbar-bg-color')},
+                //   map.get($scrollbar, 'bg-color')
+                // ),
+                backgroundColor: ui_1.$scrollbar.bgColor,
+                // transition: getCssVar('transition-duration') background-color,
+                // transition: $transitionDuration + ' ' + $bgColor.default,
+                // opacity: var(
+                //   #{getCssVarName('scrollbar-opacity')},
+                //   map.get($scrollbar, 'opacity')
+                // ),
+                opacity: ui_1.$scrollbar.opacity,
+            },
+        });
+        this.addChild(this.thumb);
+        this.setConfig(config);
+    }
+}
+exports.TdScrollbarThumb = TdScrollbarThumb;

package/src/components/basic/td-scrollbar/thumb/thumb.interface.d.ts

@@ -0,0 +1,11 @@
+import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+export interface ITdScrollbarThumb extends IUI {
+    className: 'TdScrollbarThumb';
+}
+export interface ITdScrollbarThumbConfig extends IUIConfig {
+    vertical?: boolean;
+    size?: string;
+    move?: number;
+    ratio: number;
+    always?: boolean;
+}

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

@@ -0,0 +1,12 @@
+import { ITdSpace, ITdSpaceConfig } from './td-space.interface';
+import { UI } from '../../../ui/ui.abstract';
+export declare class TdSpace extends UI implements ITdSpace {
+    className: 'TdSpace';
+    horizontalSize?: number;
+    verticalSize?: number;
+    config?: ITdSpaceConfig;
+    constructor(config?: ITdSpaceConfig);
+    setConfig(config?: Partial<ITdSpaceConfig>): void;
+    initSize(size?: number | string | [number, number]): void;
+    setSize(size: number | string | [number, number]): void;
+}

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

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdSpace = void 0;
+const utils_1 = require("@type-dom/utils");
+const framework_1 = require("@type-dom/framework");
+const td_space_const_1 = require("./td-space.const");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+class TdSpace extends ui_abstract_1.UI {
+    constructor(config) {
+        super();
+        this.className = 'TdSpace';
+        this.config = config;
+        this.addStyleObj({
+            display: 'inline-flex',
+            verticalAlign: 'top'
+        });
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        this.children.forEach(item => {
+            if (item instanceof framework_1.TypeElement) {
+                item.addStyleObj({
+                    display: 'flex',
+                    flexWrap: 'wrap'
+                });
+            }
+        });
+        this.initSize(config === null || config === void 0 ? void 0 : config.size);
+        if (config === null || config === void 0 ? void 0 : config.wrap) {
+            this.addStyle('flexWrap', 'wrap');
+        }
+        if (config === null || config === void 0 ? void 0 : config.fill) {
+            this.addStyleObj({
+                flexWrap: 'wrap',
+                flexGrow: 1,
+                minWidth: `${(config === null || config === void 0 ? void 0 : config.fillRatio) || 100}%`
+            });
+        }
+        if ((config === null || config === void 0 ? void 0 : config.direction) === 'horizontal') {
+            this.addStyle('flexDirection', 'row');
+        }
+        if ((config === null || config === void 0 ? void 0 : config.direction) === 'vertical') {
+            this.addStyle('flexDirection', 'column');
+        }
+        if (config === null || config === void 0 ? void 0 : config.alignment) {
+            this.addStyle('alignItems', config.alignment);
+        }
+    }
+    initSize(size) {
+        const config = this.config;
+        if ((0, utils_1.isArray)(size)) {
+            this.horizontalSize = size[0];
+            this.verticalSize = size[1];
+        }
+        else {
+            let val;
+            if ((0, utils_1.isNumber)(size)) {
+                val = size;
+            }
+            else {
+                val = td_space_const_1.SIZE_MAP[size || 'small'] || td_space_const_1.SIZE_MAP.small;
+            }
+            if (((config === null || config === void 0 ? void 0 : config.wrap) || (config === null || config === void 0 ? void 0 : config.fill)) && (config === null || config === void 0 ? void 0 : config.direction) === 'horizontal') {
+                this.horizontalSize = this.verticalSize = val;
+            }
+            else {
+                if ((config === null || config === void 0 ? void 0 : config.direction) === 'vertical') {
+                    this.verticalSize = val;
+                    this.horizontalSize = 0;
+                }
+                else { // horizontal 默认
+                    this.horizontalSize = val;
+                    this.verticalSize = 0;
+                }
+            }
+        }
+        this.addStyleObj({
+            rowGap: this.verticalSize + 'px',
+            columnGap: this.horizontalSize + 'px'
+        });
+    }
+    setSize(size) {
+        console.log('setSize size is ', size);
+        this.initSize(size);
+        this.setStyleObj({
+            rowGap: this.verticalSize + 'px',
+            columnGap: this.horizontalSize + 'px'
+        });
+    }
+}
+exports.TdSpace = TdSpace;

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

@@ -0,0 +1,3 @@
+export declare const SIZE_MAP: {
+    [propName: string]: number;
+};

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIZE_MAP = void 0;
+exports.SIZE_MAP = {
+    small: 8,
+    default: 12,
+    large: 16
+};

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

@@ -0,0 +1,39 @@
+import { StyleAlignItems, TypeSvgSvg } from '@type-dom/framework';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdSpace extends IUI {
+    className: 'TdSpace';
+    horizontalSize?: number;
+    verticalSize?: number;
+}
+export interface ITdSpaceConfig extends IUIConfig {
+    /**
+     * @description Placement direction	排列的方向
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * @description Controls the alignment of items	对齐方式
+     */
+    alignment?: StyleAlignItems;
+    /**
+     * @description Spacer	间隔符
+     */
+    spacer?: string | number | TypeSvgSvg;
+    /**
+     * @description Auto wrapping 设置是否自动折行 default: false
+     */
+    wrap?: boolean;
+    /**
+     * @description Whether to fill the container	是否填充剩余空间 default: false
+     */
+    fill?: boolean;
+    /**
+     * @description Ratio of fill
+     */
+    fillRatio?: number;
+    /**
+     * Sets the space between each element.
+     * 间隔大小
+     * 元组：[水平间隔，垂直间隔]；
+     */
+    size?: number | string | [h: number, v: number];
+}

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

@@ -0,0 +1,10 @@
+import { UI } from '../../../ui/ui.abstract';
+import { TdIcon } from '../td-icon/td-icon.class';
+import { ITdText, ITdTextConfig } from './td-text.interface';
+export declare class TdText extends UI implements ITdText {
+    className: 'TdText';
+    config?: ITdTextConfig;
+    icon?: TdIcon;
+    constructor(config?: ITdTextConfig);
+    setConfig(config?: Partial<ITdTextConfig>): void;
+}

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdText = void 0;
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_text_style_1 = require("./td-text.style");
+class TdText extends ui_abstract_1.UI {
+    constructor(config) {
+        super({ tag: (config === null || config === void 0 ? void 0 : config.tag) || 'span' });
+        this.className = 'TdText';
+        this.addStyleObj(td_text_style_1.$baseText);
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        if (config === null || config === void 0 ? void 0 : config.type) {
+            this.addStyleObj(td_text_style_1.$textStateColors[config.type].default);
+        }
+        else {
+            this.addStyleObj(td_text_style_1.$textStateColors.default.default);
+        }
+        if (config === null || config === void 0 ? void 0 : config.size) {
+            this.addStyleObj(td_text_style_1.sizeOpts[config === null || config === void 0 ? void 0 : config.size]);
+        }
+        else {
+            this.addStyleObj(td_text_style_1.sizeOpts.default);
+        }
+        if ((config === null || config === void 0 ? void 0 : config.truncated) && (config === null || config === void 0 ? void 0 : config.width)) {
+            this.addStyleObj({
+                display: 'inline-block',
+                maxWidth: '100%',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                width: config === null || config === void 0 ? void 0 : config.width
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.lineClamp) {
+            this.addStyleObj({
+                '-webkit-line-clamp': config === null || config === void 0 ? void 0 : config.lineClamp,
+                display: '-webkit-inline-box',
+                '-webkit-box-orient': 'vertical',
+                overflow: 'hidden'
+            });
+        }
+    }
+}
+exports.TdText = TdText;

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

@@ -0,0 +1,21 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdText extends IUI {
+    className: 'TdText';
+}
+export interface ITdTextConfig extends IUIConfig {
+    type?: 'primary' | 'success' | 'info' | 'warning' | 'danger' | '';
+    size?: '' | 'default' | 'small' | 'large';
+    /**
+     * @description render ellipsis
+     */
+    truncated?: boolean;
+    width?: number | string;
+    /**
+     * @description maximum lines
+     */
+    lineClamp?: number | string;
+    /**
+     * @description custom element tag
+     */
+    tag?: 'span' | string;
+}

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

@@ -0,0 +1,6 @@
+import { IStyle } from '@type-dom/framework';
+import { IType } from '../../../styles/var';
+export declare const $baseText: Partial<IStyle>;
+export declare const sizeOpts: Record<string, Partial<IStyle>>;
+export declare const $textStateColors: Record<string, any>;
+export declare function buttonVariant($type: IType): void;

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonVariant = exports.$textStateColors = exports.sizeOpts = exports.$baseText = void 0;
+const var_1 = require("../../../styles/var");
+exports.$baseText = {
+    alignSelf: 'center',
+    margin: '0',
+    padding: '0',
+    fontSize: var_1.$fontSizeMap.default,
+    color: var_1.$colors.default.base,
+    overflowWrap: 'break-word'
+};
+exports.sizeOpts = {
+    // mini: {
+    //   height: $commonComponentSize.small,
+    //   fontSize: $fontSizeMap.small,
+    //   padding: $paddingVerticalMap.small + ' ' + $paddingHorizontalMap.small,
+    // },
+    small: {
+        height: var_1.$commonComponentSize.small,
+        fontSize: var_1.$fontSizes.extraSmall
+    },
+    default: {
+        height: var_1.$commonComponentSize.default,
+        fontSize: var_1.$fontSizes.base
+    },
+    large: {
+        height: var_1.$commonComponentSize.large,
+        fontSize: var_1.$fontSizes.medium
+    }
+};
+exports.$textStateColors = {};
+function buttonVariant($type) {
+    exports.$textStateColors[$type] = {
+        default: {
+            color: var_1.$colors[$type].base
+        },
+        hover: {
+            color: $type === 'default' ? var_1.$colors['primary'].base : var_1.$colors[$type]['light-3'] // ['color', $type, 'light-3'],
+            // content: '',
+            // position: 'absolute',
+            // left: 0,
+            // right: 0,
+            // height: 0,
+            // bottom: 0,
+            // borderBottom: '1px solid ' + ($type === 'default' ? $colors['primary'].base : $colors[$type]['light-3']),
+        },
+        active: {
+            color: var_1.$colors[$type]['dark-2'] // ['color', $type, 'dark-2'],
+        },
+        disabled: {
+            color: var_1.$colors[$type]['light-5'] // ['color', $type, 'light-5'],
+        }
+    };
+}
+exports.buttonVariant = buttonVariant;
+for (const $type of ['primary', 'success', 'warning', 'info', 'danger', 'default']) {
+    buttonVariant($type);
+}

package/src/{feedback/dialog/dialog.d.ts → components/feedback/dialog/dialog.class.d.ts}

@@ -1,7 +1,6 @@
-import { TypeRoot } from '@type-dom/framework';
 import { Overlay } from '../overlay/overlay.abstract';
+import { IDialogConfig } from './dialog.interface';
 export declare class Dialog extends Overlay {
     className: 'Dialog';
-    parent?: TypeRoot;
-    constructor();
+    constructor(config?: Partial<IDialogConfig>);
 }

package/src/{feedback/dialog/dialog.js → components/feedback/dialog/dialog.class.js}

@@ -3,12 +3,19 @@ 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() {
+    constructor(config) {
         super();
         this.className = 'Dialog';
         this.addAttrObj({
-            name: 'dialog',
+            name: 'dialog'
         });
+        this.setConfig(config);
+        if (config === null || config === void 0 ? void 0 : config.el) {
+            this.mount(config.el);
+        }
+        else {
+            this.mount(document.body);
+        }
     }
 }
 exports.Dialog = Dialog;

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

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

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

@@ -1,2 +1,2 @@
-export { Dialog } from './dialog/dialog';
+export { Dialog } from './dialog/dialog.class';
 export { MessageBox } from './message-box/message-box';

package/src/{feedback → components/feedback}/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessageBox = exports.Dialog = void 0;
-var dialog_1 = require("./dialog/dialog");
-Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return dialog_1.Dialog; } });
+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; } });

package/src/{feedback → components/feedback}/message-box/message-box.d.ts

@@ -1,9 +1,8 @@
-import { TypeRoot } from '@type-dom/framework';
 import { Overlay } from '../overlay/overlay.abstract';
+import { IMessageBoxConfig } from './message-box.interface';
 export declare class MessageBox extends Overlay {
     className: 'MessageBox';
-    parent?: TypeRoot;
-    constructor();
+    constructor(config?: IMessageBoxConfig);
     toast(title: string, message: string): void;
     confirm(title: string, message: string): void;
 }

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

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

package/src/{feedback → components/feedback}/message-box/message-box.js

@@ -3,12 +3,21 @@ 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() {
+    constructor(config) {
         super();
         this.className = 'MessageBox';
         this.addAttrObj({
-            name: 'message-box',
+            name: 'message-box'
         });
+        this.setConfig(config);
+        if (config === null || config === void 0 ? void 0 : config.el) {
+            this.mount(config.el);
+        }
+        else {
+            // 默认挂载到body上;
+            // todo 挂载到body上，需要能清理掉，否则会重复挂载
+            this.mount(document.body);
+        }
     }
     toast(title, message) {
         // this.clear();

package/src/{feedback → components/feedback}/overlay/container/body/body.js

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

package/src/{feedback → components/feedback}/overlay/container/container.js

@@ -10,19 +10,17 @@ class OverlayContainer extends framework_1.TypeDiv {
     constructor() {
         super();
         this.className = 'OverlayContainer';
-        this.propObj = {
-            styleObj: {
-                position: framework_1.StylePosition.relative,
-                margin: '15vh auto 50px',
-                width: '50%',
-                boxShadow: '0 1px 3px rgba(0, 0, 0, 0.3)',
-                borderRadius: '4px',
-                backgroundColor: '#FFF',
-                padding: '20px',
-            },
-            attrObj: {
-                name: 'overlay-container'
-            }
+        this.styleObj = {
+            position: framework_1.StylePosition.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.header = new header_1.OverlayHeader();
         this.header.parent = this;
@@ -33,7 +31,7 @@ class OverlayContainer extends framework_1.TypeDiv {
         this.childNodes = [this.header, this.body, this.footer];
     }
     initEvents() {
-        this.events.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe((e) => {
+        this.subscriptions.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe((e) => {
             e.stopPropagation();
         }));
     }

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

@@ -10,7 +10,7 @@ class CancelButton extends framework_1.TypeButton {
         this.addStyleObj({
             // backgroundColor: '#f00',
             // color: '#FFF',
-            margin: 'auto 10px',
+            margin: 'auto 10px'
             // outline: 'none',
             // border: '1px solid #f00',
         });
@@ -22,7 +22,7 @@ class CancelButton extends framework_1.TypeButton {
         if (!((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.parent)) {
             console.error('this.parent?.parent?.parent is undefined . ');
         }
-        this.events.push((0, rxjs_1.fromEvent)(this.dom, 'click').subscribe(() => {
+        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();
         }));