@type-dom/ui 0.0.1 → 0.0.3

package/src/components/basic/td-layout/td-col/td-col.class.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdCol = void 0;
+const rxjs_1 = require("rxjs");
+const utils_1 = require("@type-dom/utils");
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+class TdCol extends ui_abstract_1.UI {
+    constructor(config) {
+        super();
+        this.className = 'TdCol';
+        this.config = config;
+        this.setConfig(config);
+    }
+    get screenWidth() {
+        return window.innerWidth || document.documentElement.clientWidth;
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        if (config === null || config === void 0 ? void 0 : config.span) {
+            if (config.span === 0) {
+                this.addStyleObj({
+                    display: 'none'
+                });
+            }
+            else {
+                const proportion = (0, utils_1.formatFloat)(config.span / 24) * 100 + '%';
+                this.addStyleObj({
+                    maxWidth: proportion,
+                    flex: '0 0 ' + proportion
+                });
+            }
+        }
+        if (config === null || config === void 0 ? void 0 : config.offset) {
+            const proportion = (0, utils_1.formatFloat)(config.offset / 24) * 100 + '%';
+            this.addStyleObj({
+                marginLeft: proportion
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.pull) {
+            const proportion = (0, utils_1.formatFloat)(config.pull / 24) * 100 + '%';
+            this.addStyleObj({
+                position: 'relative',
+                right: proportion
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.push) {
+            const proportion = (0, utils_1.formatFloat)(config.push / 24) * 100 + '%';
+            this.addStyleObj({
+                position: 'relative',
+                left: proportion
+            });
+        }
+        this.resize();
+    }
+    resize() {
+        // console.log('this.screenWidth is ', this.screenWidth);
+        const config = this.config;
+        if (config === null || config === void 0 ? void 0 : config.xs) {
+            if (this.screenWidth < 768) {
+                // 超小屏幕（xs）
+                // console.log('当前屏幕尺寸小于768px，执行xs断点下的操作');
+                const proportion = (0, utils_1.formatFloat)(config.xs / 24) * 100 + '%';
+                this.setStyleObj({
+                    maxWidth: proportion,
+                    flex: '0 0 ' + proportion
+                });
+            }
+        }
+        if (config === null || config === void 0 ? void 0 : config.sm) {
+            if (this.screenWidth >= 768 && this.screenWidth < 992) {
+                // 小屏幕（sm）
+                // console.log('当前屏幕尺寸在768px至991px之间，执行md断点下的操作');
+                // 设置你的值或执行相应JS代码
+                const proportion = (0, utils_1.formatFloat)(config.sm / 24) * 100 + '%';
+                this.setStyleObj({
+                    maxWidth: proportion,
+                    flex: '0 0 ' + proportion
+                });
+            }
+        }
+        if (config === null || config === void 0 ? void 0 : config.md) {
+            if (this.screenWidth >= 992 && this.screenWidth < 1200) {
+                // 中屏幕（md）
+                // console.log('当前屏幕尺寸在992px至1199px之间，执行lg断点下的操作');
+                // 设置你的值或执行相应JS代码
+                const proportion = (0, utils_1.formatFloat)(config.md / 24) * 100 + '%';
+                this.setStyleObj({
+                    maxWidth: proportion,
+                    flex: '0 0 ' + proportion
+                });
+            }
+        }
+        if (config === null || config === void 0 ? void 0 : config.lg) {
+            if (this.screenWidth >= 1200 && this.screenWidth < 1920) {
+                // 大屏幕（lg）
+                // console.log('当前屏幕尺寸在1200px至1920px之间，执行lg断点下的操作');
+                // 设置你的值或执行相应JS代码
+                const proportion = (0, utils_1.formatFloat)(config.lg / 24) * 100 + '%';
+                this.setStyleObj({
+                    maxWidth: proportion,
+                    flex: '0 0 ' + proportion
+                });
+            }
+        }
+        if (config === null || config === void 0 ? void 0 : config.xl) {
+            if (this.screenWidth >= 1920) {
+                // 超大屏幕（xl及以上）
+                // console.log('当前屏幕尺寸等于或大于1920px，执行xl断点下的操作');
+                // 设置你的值或执行相应JS代码
+                const proportion = (0, utils_1.formatFloat)(config.xl / 24) * 100 + '%';
+                this.setStyleObj({
+                    maxWidth: proportion,
+                    flex: '0 0 ' + proportion
+                });
+            }
+        }
+    }
+    initEvents() {
+        this.subscriptions.push((0, rxjs_1.fromEvent)(window, 'resize')
+            .pipe((0, rxjs_1.debounceTime)(250) // 防抖延时
+        // distinctUntilChanged() // 可选，仅在窗口尺寸发生实际变化时才触发
+        )
+            .subscribe((event) => {
+            this.resize();
+        }));
+    }
+}
+exports.TdCol = TdCol;

package/src/components/basic/td-layout/td-col/td-col.interface.d.ts

@@ -0,0 +1,46 @@
+import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+export interface ITdCol extends IUI {
+    className: 'TdCol';
+}
+export interface ITdColConfig extends IUIConfig {
+    /**
+     * @description custom element tag
+     */
+    tag?: string;
+    /**
+     * @description number of column the grid spans
+     */
+    span?: number;
+    /**
+     * @description number of spacing on the left side of the grid
+     */
+    offset?: number;
+    /**
+     * @description number of columns that grid moves to the left
+     */
+    pull?: number;
+    /**
+     * @description number of columns that grid moves to the right
+     */
+    push?: number;
+    /**
+     * @description `<768px` Responsive columns or column props object
+     */
+    xs?: number;
+    /**
+     * @description `≥768px` Responsive columns or column props object
+     */
+    sm?: number;
+    /**
+     * @description `≥992px` Responsive columns or column props object
+     */
+    md?: number;
+    /**
+     * @description `≥1200px` Responsive columns or column props object
+     */
+    lg?: number;
+    /**
+     * @description `≥1920px` Responsive columns or column props object
+     */
+    xl?: number;
+}

package/src/components/basic/td-layout/td-row/td-row.class.d.ts

@@ -0,0 +1,10 @@
+import { ITdRow, ITdRowConfig } from './td-row.interface';
+import { UI } from '../../../../ui/ui.abstract';
+import { TdCol } from '../td-col/td-col.class';
+export declare class TdRow extends UI implements ITdRow {
+    className: 'TdRow';
+    childNodes: TdCol[];
+    gutter?: number;
+    constructor(config?: ITdRowConfig);
+    setConfig(config?: ITdRowConfig): void;
+}

package/src/components/basic/td-layout/td-row/td-row.class.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdRow = void 0;
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+const td_col_class_1 = require("../td-col/td-col.class");
+class TdRow extends ui_abstract_1.UI {
+    // justify: string = 'start';
+    // align: string = 'top';
+    // tag: string = 'div';
+    constructor(config) {
+        super();
+        this.className = 'TdRow';
+        this.addStyleObj({
+            display: 'flex',
+            flexWrap: 'wrap',
+            position: 'relative',
+            boxSizing: 'border-box'
+        });
+        this.childNodes = [];
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        if (config === null || config === void 0 ? void 0 : config.gutter) {
+            this.gutter = config.gutter;
+            this.addStyleObj({
+                marginLeft: `-${config.gutter / 2}px`,
+                marginRight: `-${config.gutter / 2}px`
+            });
+            this.children.forEach((child) => {
+                if (child instanceof td_col_class_1.TdCol) {
+                    if (config.gutter) {
+                        child.addStyleObj({
+                            boxSizing: 'border-box',
+                            paddingLeft: `${config.gutter / 2}px`,
+                            paddingRight: `${config.gutter / 2}px`
+                        });
+                    }
+                }
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.justify) {
+            // this.setJustify(config.justify);
+            switch (config.justify) {
+                case 'center':
+                    this.addStyleObj({
+                        justifyContent: 'center'
+                    });
+                    break;
+                case 'end':
+                    this.addStyleObj({
+                        justifyContent: 'flex-end'
+                    });
+                    break;
+                case 'space-between':
+                    this.addStyleObj({
+                        justifyContent: 'space-between'
+                    });
+                    break;
+                case 'space-around':
+                    this.addStyleObj({
+                        justifyContent: 'space-around'
+                    });
+                    break;
+                case 'space-evenly':
+                    this.addStyleObj({
+                        justifyContent: 'space-evenly'
+                    });
+                    break;
+                default:
+                    break;
+            }
+        }
+        if (config === null || config === void 0 ? void 0 : config.align) {
+            // this.setAlign(config.align);
+            switch (config.align) {
+                case 'top':
+                    this.addStyleObj({
+                        alignItems: 'flex-start'
+                    });
+                    break;
+                case 'middle':
+                    this.addStyleObj({
+                        alignItems: 'center'
+                    });
+                    break;
+                case 'bottom':
+                    this.addStyleObj({
+                        alignItems: 'flex-end'
+                    });
+                    break;
+                case 'stretch':
+                    this.addStyleObj({
+                        alignItems: 'stretch'
+                    });
+                    break;
+            }
+        }
+    }
+}
+exports.TdRow = TdRow;

package/src/components/basic/td-layout/td-row/td-row.interface.d.ts

@@ -0,0 +1,18 @@
+import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+export interface ITdRow extends IUI {
+    className: 'TdRow';
+}
+/**
+ * gutter: number = 0;
+ * justify: string = 'start';
+ * align: string = 'top';
+ * tag: string = 'div';
+ */
+export interface ITdRowConfig extends IUIConfig {
+    gutter?: number;
+    justify?: string;
+    align?: string;
+    tag?: string;
+}
+export declare const RowJustify: readonly ["start", "center", "end", "space-around", "space-between", "space-evenly"];
+export declare const RowAlign: readonly ["top", "middle", "bottom"];

package/src/components/basic/td-layout/td-row/td-row.interface.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowAlign = exports.RowJustify = void 0;
+exports.RowJustify = [
+    'start',
+    'center',
+    'end',
+    'space-around',
+    'space-between',
+    'space-evenly'
+];
+exports.RowAlign = ['top', 'middle', 'bottom'];

package/src/components/basic/td-layout/td-row/td-row.style.d.ts

@@ -0,0 +1 @@
+export {};

package/src/components/basic/td-layout/td-row/td-row.style.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const $base = {
+    display: 'flex',
+    flexWrap: 'wrap',
+    position: 'relative',
+    boxSizing: 'border-box'
+};

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

@@ -0,0 +1,11 @@
+import { UI } from '../../../ui/ui.abstract';
+import { TdIcon } from '../td-icon/td-icon.class';
+import { ITdLink, ITdLinkConfig } from './td-link.interface';
+export declare class TdLink extends UI implements ITdLink {
+    className: 'TdLink';
+    config?: ITdLinkConfig;
+    icon?: TdIcon;
+    constructor(configs: ITdLinkConfig);
+    setConfig(config?: Partial<ITdLinkConfig>): void;
+    initEvents(): void;
+}

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

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdLink = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const td_link_style_1 = require("../td-link/td-link.style");
+class TdLink extends ui_abstract_1.UI {
+    constructor(configs) {
+        super({ tag: 'a' });
+        this.className = 'TdLink';
+        this.addStyleObj(td_link_style_1.$baseLink);
+        this.setConfig(configs);
+    }
+    setConfig(config) {
+        super.setConfig(config);
+        this.config = config;
+        if (config === null || config === void 0 ? void 0 : config.href) {
+            this.addAttrObj({
+                href: config.href
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.target) {
+            this.addAttrObj({
+                target: config.target
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.disabled) {
+            this.addAttrObj({
+                disabled: config.disabled
+            });
+        }
+        if (config === null || config === void 0 ? void 0 : config.type) {
+            if (config === null || config === void 0 ? void 0 : config.disabled) {
+                this.addStyleObj(td_link_style_1.$linkStateColors[config.type].disabled);
+            }
+            else {
+                this.addStyleObj(td_link_style_1.$linkStateColors[config.type].default);
+            }
+        }
+        else {
+            this.addStyleObj(td_link_style_1.$linkStateColors.default.default);
+        }
+        if (config === null || config === void 0 ? void 0 : config.icon) {
+            if ((config === null || config === void 0 ? void 0 : config.iconPosition) === 'left') {
+                // 插入到前面
+                this.unshiftChild(config.icon);
+            }
+            else {
+                this.addChild(config.icon);
+            }
+        }
+    }
+    initEvents() {
+        this.addEvents({
+            mouseover: () => {
+                var _a, _b, _c, _d;
+                if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.type) {
+                    if ((_b = this.config) === null || _b === void 0 ? void 0 : _b.disabled) {
+                        this.setStyleObj({
+                            cursor: framework_1.StyleCursor.notAllowed
+                        });
+                    }
+                    else {
+                        this.setStyleObj(td_link_style_1.$linkStateColors[(_c = this.config) === null || _c === void 0 ? void 0 : _c.type].hover);
+                    }
+                }
+                else {
+                    this.setStyleObj(td_link_style_1.$linkStateColors.default.hover);
+                }
+                if (((_d = this.config) === null || _d === void 0 ? void 0 : _d.underline) === false) { // 设置 false 的情况下，不显示下划线
+                    this.setStyleObj({
+                        textDecoration: 'none'
+                    });
+                }
+                else {
+                    // 1. 默认显示下划线
+                    // 2. 默认显示下划线，如果设置了 underline 为 true，则显示下划线
+                    this.setStyleObj({
+                        textDecoration: 'underline'
+                    });
+                }
+            },
+            mouseout: (evt) => {
+                var _a, _b, _c, _d, _e;
+                this.setStyleObj({
+                    textDecoration: 'none'
+                });
+                if ((_a = this.config) === null || _a === void 0 ? void 0 : _a.type) {
+                    this.removeStyleObj(td_link_style_1.$linkStateColors[(_b = this.config) === null || _b === void 0 ? void 0 : _b.type].hover);
+                    if ((_c = this.config) === null || _c === void 0 ? void 0 : _c.disabled) {
+                        evt === null || evt === void 0 ? void 0 : evt.preventDefault();
+                        this.setStyleObj(td_link_style_1.$linkStateColors[(_d = this.config) === null || _d === void 0 ? void 0 : _d.type].disabled);
+                    }
+                    else {
+                        this.setStyleObj(td_link_style_1.$linkStateColors[(_e = this.config) === null || _e === void 0 ? void 0 : _e.type].default);
+                    }
+                }
+                else {
+                    this.removeStyleObj(td_link_style_1.$linkStateColors.default.hover);
+                }
+            }
+        });
+    }
+}
+exports.TdLink = TdLink;

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

@@ -0,0 +1,33 @@
+import { TdIcon } from '@type-dom/ui';
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+export interface ITdLink extends IUI {
+    className: 'TdLink';
+}
+export interface ITdLinkConfig extends IUIConfig {
+    title?: string;
+    type?: 'primary' | 'success' | 'warning' | 'info' | 'danger' | 'default';
+    /**
+     * @description whether the component has underline
+     */
+    underline?: boolean;
+    /**
+     * @description whether the component is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @description same as native hyperlink's `href`
+     */
+    href?: string;
+    /**
+     * @description same as native hyperlink's `target`
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top' | string;
+    /**
+     * @description icon component
+     */
+    icon?: TdIcon;
+    /**
+     * @description icon position 默认 right
+     */
+    iconPosition?: 'left' | 'right';
+}

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

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

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonVariant = exports.$linkStateColors = exports.$baseLink = void 0;
+const framework_1 = require("@type-dom/framework");
+const var_1 = require("../../../styles/var");
+exports.$baseLink = {
+    display: 'inline-flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    verticalAlign: 'middle',
+    position: 'relative',
+    textDecoration: 'none',
+    outline: 'none',
+    cursor: framework_1.StyleCursor.pointer,
+    padding: '0'
+};
+exports.$linkStateColors = {};
+function buttonVariant($type) {
+    exports.$linkStateColors[$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/components/basic/td-scrollbar/bar/bar.class.d.ts

@@ -0,0 +1,8 @@
+import { UI } from '../../../../ui/ui.abstract';
+import { TdScrollbarThumb } from '../thumb/thumb.class';
+import { ITdScrollbarBar, ITdScrollbarBarConfig } from './bar.interface';
+export declare class TdScrollbarBar extends UI implements ITdScrollbarBar {
+    className: 'TdScrollbarBar';
+    thumbs: [TdScrollbarThumb, TdScrollbarThumb];
+    constructor(config?: ITdScrollbarBarConfig);
+}

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdScrollbarBar = void 0;
+const ui_abstract_1 = require("../../../../ui/ui.abstract");
+const thumb_class_1 = require("../thumb/thumb.class");
+class TdScrollbarBar extends ui_abstract_1.UI {
+    constructor(config) {
+        super();
+        this.className = 'TdScrollbarBar';
+        this.addAttrName('td-scrollbar-bar');
+        this.addStyleObj({
+            position: 'absolute',
+            right: '2px',
+            bottom: '2px',
+            zIndex: 1,
+            borderRadius: '4px',
+        });
+        // config?.minSize 20
+        this.thumbs = [
+            new thumb_class_1.TdScrollbarThumb({
+                vertical: false,
+                ratio: 1,
+            }),
+            new thumb_class_1.TdScrollbarThumb({
+                vertical: true,
+                ratio: 1,
+            })
+        ];
+    }
+}
+exports.TdScrollbarBar = TdScrollbarBar;

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

@@ -0,0 +1,8 @@
+import { IUI, IUIConfig } from '../../../../ui/ui.interface';
+export interface ITdScrollbarBar extends IUI {
+    className: 'TdScrollbarBar';
+}
+export interface ITdScrollbarBarConfig extends IUIConfig {
+    always?: boolean;
+    minSize: number;
+}

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

@@ -0,0 +1,9 @@
+import { ITdScrollbar, ITdScrollbarConfig } from './td-scrollbar.interface';
+import { UI } from '../../../ui/ui.abstract';
+export declare class TdScrollbar extends UI implements ITdScrollbar {
+    className: 'TdScrollbar';
+    private wrap;
+    private view;
+    constructor(config?: Partial<ITdScrollbarConfig>);
+    setConfig(config?: Partial<ITdScrollbarConfig>): void;
+}

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

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdScrollbar = void 0;
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const framework_1 = require("@type-dom/framework");
+const bar_class_1 = require("./bar/bar.class");
+class TdScrollbar extends ui_abstract_1.UI {
+    constructor(config) {
+        super(config);
+        this.className = 'TdScrollbar';
+        this.addAttrName('td-scrollbar');
+        this.addStyleObj({
+            overflow: 'hidden',
+            position: 'relative',
+            height: '100%',
+        });
+        this.wrap = new framework_1.Div({
+            name: 'td-scrollbar-wrap',
+            styleObj: {
+                overflow: 'auto',
+                height: (config === null || config === void 0 ? void 0 : config.height) || '100%',
+            }
+        });
+        this.view = new framework_1.Div({
+            name: 'td-scrollbar-view'
+        });
+        if (config === null || config === void 0 ? void 0 : config.viewStyle) {
+            this.view.addStyleObj(config.viewStyle);
+        }
+        this.wrap.addChild(this.view);
+        if (config === null || config === void 0 ? void 0 : config.wrapStyle) {
+            this.wrap.addStyleObj(config.wrapStyle);
+        }
+        this.addChild(this.wrap);
+        if (!(config === null || config === void 0 ? void 0 : config.native)) {
+            const bar = new bar_class_1.TdScrollbarBar({
+                always: (config === null || config === void 0 ? void 0 : config.always) || true,
+                minSize: (config === null || config === void 0 ? void 0 : config.minSize) || 20,
+            });
+            this.addChildren(...bar.thumbs);
+        }
+        if (config === null || config === void 0 ? void 0 : config.contents) {
+            this.view.addChildren(...config.contents);
+        }
+        this.setConfig(config);
+    }
+    setConfig(config) {
+        super.setConfig(config);
+    }
+}
+exports.TdScrollbar = TdScrollbar;