@type-dom/ui 0.0.4 → 0.0.6

package/src/components/navigation/td-tabs/td-tab-nav.class.d.ts

@@ -0,0 +1,31 @@
+import { Div, Span, TypeElement } from '@type-dom/framework';
+import { UI } from '../../../ui/ui.abstract';
+import { IScrollable, ITdTabNav, ITdTabNavConfig } from './td-tab-nav.interface';
+export declare class TdTabNav extends UI implements ITdTabNav {
+    className: 'TdTabNav';
+    props: ITdTabNavConfig;
+    scrollBtn?: Span[];
+    nav: Div;
+    scrollable: IScrollable | false;
+    private navScroll?;
+    private navOffset?;
+    private sizeName;
+    private rootTabs;
+    private focusable?;
+    private isFocus;
+    private tabBar?;
+    tabs: Div[];
+    constructor(params: ITdTabNavConfig);
+    mounted(): void;
+    get navStyle(): {
+        transform: string;
+    };
+    scrollPrev(): void;
+    scrollNext(): void;
+    scrollToActiveTab(): Promise<void>;
+    change(): void;
+    selectTab(item: TypeElement | undefined): void;
+    changeTab(e: KeyboardEvent): void;
+    setFocus(): void;
+    removeFocus(): void;
+}

package/src/components/navigation/td-tabs/td-tab-nav.class.js

@@ -0,0 +1,355 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdTabNav = void 0;
+const tslib_1 = require("tslib");
+const framework_1 = require("@type-dom/framework");
+const svgs_1 = require("@type-dom/svgs");
+const utils_1 = require("@type-dom/utils");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+const var_1 = require("../../../styles/var");
+const aria_1 = require("../../../aria");
+const td_tabs_style_1 = require("./td-tabs.style");
+const td_tab_bar_class_1 = require("./td-tab-bar.class");
+const td_icon_class_1 = require("../../basic/td-icon/td-icon.class");
+class TdTabNav extends ui_abstract_1.UI {
+    constructor(params) {
+        var _a;
+        super(params);
+        this.tabs = [];
+        this.className = 'TdTabNav';
+        this.ctrl.addAttrName('td-tab-nav-wrap');
+        this.ctrl.addStyleObj(td_tabs_style_1.$tabsNavWrapStyle);
+        this.addChild(new framework_1.U({
+            name: 'underline',
+            styleObj: td_tabs_style_1.$tabsNavWrapAfterStyle,
+        }));
+        this.scrollable = false;
+        this.navOffset = 0;
+        this.isFocus = false;
+        this.focusable = true;
+        this.rootTabs = params.rootTabs;
+        this.sizeName = ['top', 'bottom'].includes(this.rootTabs.props.tabPosition || 'top')
+            ? 'width'
+            : 'height';
+        if (this.scrollable) {
+            this.scrollBtn = [
+                new framework_1.Span({
+                    name: 'nav-prev',
+                    // ns.is('disabled', !scrollable.value.prev),
+                    styleObj: Object.assign(Object.assign({}, td_tabs_style_1.$tabsNavScrollStyle), { left: 0 }),
+                    events: {
+                        click: (evt) => {
+                            this.scrollPrev();
+                        },
+                    },
+                    childNodes: [
+                        new td_icon_class_1.TdIcon({
+                            svgObj: new svgs_1.ElArrowLeftSvg(),
+                        }),
+                    ],
+                }),
+                new framework_1.Span({
+                    name: 'nav-next',
+                    //  ns.is('disabled', !scrollable.value.next),
+                    styleObj: Object.assign(Object.assign({}, td_tabs_style_1.$tabsNavScrollStyle), { right: 0 }),
+                    events: {
+                        click: (evt) => {
+                            this.scrollNext();
+                        },
+                    },
+                    childNodes: [
+                        new td_icon_class_1.TdIcon({
+                            svgObj: new svgs_1.ElArrowRightSvg(),
+                        }),
+                    ],
+                }),
+            ];
+            this.slotChild(this.scrollBtn);
+        }
+        // <div class={ns.e('nav-scroll')} ref={navScroll$}>
+        this.navScroll = new framework_1.Div({
+            name: 'nav-scroll',
+        });
+        this.addChild(this.navScroll);
+        this.nav = new framework_1.Div({
+            name: 'td-tab-nav-wrap-inner',
+            attrObj: {
+                role: 'tablist',
+            },
+            //  ns.is(rootTabs.props.tabPosition),
+            //  ns.is(
+            //    'stretch',
+            //    props.stretch &&
+            //      ['top', 'bottom'].includes(rootTabs.props.tabPosition)
+            //  ),
+            styleObj: td_tabs_style_1.$tabsNavStyle,
+            events: {
+                keydown: (evt) => {
+                    this.changeTab(evt);
+                },
+            },
+        });
+        this.navScroll.addChild(this.nav);
+        if (!params.type) {
+            this.tabBar = new td_tab_bar_class_1.TdTabBar({
+                rootTabs: params.rootTabs,
+                tabs: (params === null || params === void 0 ? void 0 : params.panes) || [],
+            });
+            this.nav.addChild(this.tabBar);
+        }
+        this.tabs =
+            ((_a = params.panes) === null || _a === void 0 ? void 0 : _a.map((pane, index) => {
+                var _a, _b, _c, _d, _e, _f;
+                // const uid = pane.uid
+                const disabled = pane.disabled;
+                const active = this.rootTabs.currentName === ((_a = pane.name) !== null && _a !== void 0 ? _a : index);
+                const tabindex = !disabled && active ? 0 : -1;
+                const tabName = (_b = pane.name) !== null && _b !== void 0 ? _b : (index + 1);
+                console.log('tabName is ', tabName);
+                const item = new framework_1.Div({
+                    name: 'tab-nav-item',
+                    //      ns.is(rootTabs.props.tabPosition),
+                    //         ns.is('active', pane.active),
+                    //         ns.is('disabled', disabled),
+                    //         ns.is('closable', closable),
+                    //         ns.is('focus', isFocus.value),
+                    attrObj: {
+                        tabName: tabName,
+                        //   aria-controls={`pane-${tabName}`}
+                        role: 'tab',
+                        ariaSelected: active,
+                        tabindex: tabindex
+                    },
+                    styleObj: td_tabs_style_1.$tabsItemStyle,
+                    events: {
+                        focus: () => {
+                            this.setFocus();
+                        },
+                        blur: () => {
+                            this.removeFocus();
+                        },
+                        click: (evt, ele) => {
+                            var _a, _b;
+                            console.log('tab-nav-item click . ');
+                            this.removeFocus();
+                            // this.rootTabs.currentName = tabName;
+                            (_b = (_a = params.emits) === null || _a === void 0 ? void 0 : _a.tabClick) === null || _b === void 0 ? void 0 : _b.call(_a, pane, tabName, evt);
+                            (0, framework_1.nextTick)(() => {
+                                this.selectTab(ele);
+                            });
+                        },
+                        keydown: (ev) => {
+                            var _a, _b;
+                            if (closable &&
+                                (ev.code === aria_1.EVENT_CODE.delete ||
+                                    ev.code === aria_1.EVENT_CODE.backspace)) {
+                                // emit('tabRemove', pane, ev)
+                                (_b = (_a = params.emits) === null || _a === void 0 ? void 0 : _a.tabRemove) === null || _b === void 0 ? void 0 : _b.call(_a, pane, ev);
+                            }
+                        },
+                    },
+                });
+                if (tabName === ((_c = this.rootTabs) === null || _c === void 0 ? void 0 : _c.currentName)) {
+                    item.ctrl.addStyleObj({
+                        color: var_1.$colors.primary.base,
+                    });
+                }
+                else {
+                    item.ctrl.addStyleObj({
+                        color: var_1.$textColor.regular,
+                    });
+                }
+                // const tabLabelContent = pane.slots?.label || pane?.label;
+                if ((_d = pane.slots) === null || _d === void 0 ? void 0 : _d.label) {
+                    item.slotChild((_e = pane.slots) === null || _e === void 0 ? void 0 : _e.label);
+                }
+                else if (pane.label) {
+                    item.addChild(new framework_1.TextNode(pane.label));
+                }
+                const closable = !disabled &&
+                    (pane.closable || ((_f = this.rootTabs) === null || _f === void 0 ? void 0 : _f.props.closable) || params.editable);
+                // pane.index = `${index}`
+                if (closable) {
+                    const btnClose = new td_icon_class_1.TdIcon({
+                        name: 'is-icon-close',
+                        svgObj: new svgs_1.ElCloseSvg(),
+                        events: {
+                            click: (evt) => {
+                                var _a, _b;
+                                console.log('btnClose click . ');
+                                (_b = (_a = params.emits) === null || _a === void 0 ? void 0 : _a.tabRemove) === null || _b === void 0 ? void 0 : _b.call(_a, pane, evt);
+                            },
+                        },
+                    });
+                    item.addChild(btnClose);
+                }
+                return item;
+            })) || [];
+        console.log('this.tabs is ', this.tabs);
+        this.nav.addChildren(...this.tabs);
+        this.nav.ctrl.addStyleObj(this.navStyle);
+        this.props = this.setParams(params);
+    }
+    mounted() {
+        setTimeout(() => this.scrollToActiveTab(), 0);
+        (0, framework_1.nextTick)().then(() => {
+            var _a;
+            (_a = this.tabBar) === null || _a === void 0 ? void 0 : _a.change();
+        });
+    }
+    get navStyle() {
+        const dir = this.sizeName === 'width' ? 'X' : 'Y';
+        return {
+            transform: `translate${dir}(-${this.navOffset}px)`,
+        };
+    }
+    scrollPrev() {
+        var _a;
+        if (!this.navScroll)
+            return;
+        const containerSize = (_a = this.navScroll) === null || _a === void 0 ? void 0 : _a.dom[`offset${(0, utils_1.capitalize)(this.sizeName)}`];
+        const currentOffset = this.navOffset;
+        if (!currentOffset)
+            return;
+        const newOffset = currentOffset > containerSize ? currentOffset - containerSize : 0;
+        this.navOffset = newOffset;
+    }
+    scrollNext() {
+        var _a, _b;
+        if (!this.navScroll || !this.nav)
+            return;
+        const navSize = (_a = this.nav) === null || _a === void 0 ? void 0 : _a.dom[`offset${(0, utils_1.capitalize)(this.sizeName)}`];
+        const containerSize = (_b = this.navScroll) === null || _b === void 0 ? void 0 : _b.dom[`offset${(0, utils_1.capitalize)(this.sizeName)}`];
+        const currentOffset = this.navOffset || 0;
+        if (navSize - currentOffset <= containerSize)
+            return;
+        const newOffset = navSize - currentOffset > containerSize * 2
+            ? currentOffset + containerSize
+            : navSize - containerSize;
+        this.navOffset = newOffset;
+    }
+    scrollToActiveTab() {
+        return tslib_1.__awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const nav = (_a = this.nav) === null || _a === void 0 ? void 0 : _a.dom;
+            if (!this.scrollable || !this.navScroll || !nav)
+                return;
+            yield (0, framework_1.nextTick)();
+            const activeTab = this.dom.querySelector('.is-active');
+            if (!activeTab)
+                return;
+            const navScroll = (_b = this.navScroll) === null || _b === void 0 ? void 0 : _b.dom;
+            const isHorizontal = ['top', 'bottom'].includes(((_c = this.rootTabs) === null || _c === void 0 ? void 0 : _c.props.tabPosition) || 'top');
+            const activeTabBounding = activeTab.getBoundingClientRect();
+            const navScrollBounding = navScroll.getBoundingClientRect();
+            const maxOffset = isHorizontal
+                ? nav.offsetWidth - navScrollBounding.width
+                : nav.offsetHeight - navScrollBounding.height;
+            const currentOffset = this.navOffset || 0;
+            let newOffset = currentOffset;
+            if (isHorizontal) {
+                if (activeTabBounding.left < navScrollBounding.left) {
+                    newOffset =
+                        currentOffset - (navScrollBounding.left - activeTabBounding.left);
+                }
+                if (activeTabBounding.right > navScrollBounding.right) {
+                    newOffset =
+                        currentOffset + activeTabBounding.right - navScrollBounding.right;
+                }
+            }
+            else {
+                if (activeTabBounding.top < navScrollBounding.top) {
+                    newOffset =
+                        currentOffset - (navScrollBounding.top - activeTabBounding.top);
+                }
+                if (activeTabBounding.bottom > navScrollBounding.bottom) {
+                    newOffset =
+                        currentOffset + (activeTabBounding.bottom - navScrollBounding.bottom);
+                }
+            }
+            newOffset = Math.max(newOffset, 0);
+            this.navOffset = Math.min(newOffset, maxOffset);
+        });
+    }
+    change() {
+        var _a, _b, _c;
+        if (!this.nav || !this.navScroll)
+            return;
+        this.props.stretch && ((_a = this.tabBar) === null || _a === void 0 ? void 0 : _a.change());
+        const navSize = (_b = this.nav) === null || _b === void 0 ? void 0 : _b.dom[`offset${(0, utils_1.capitalize)(this.sizeName)}`];
+        const containerSize = (_c = this.navScroll) === null || _c === void 0 ? void 0 : _c.dom[`offset${(0, utils_1.capitalize)(this.sizeName)}`];
+        const currentOffset = this.navOffset || 0;
+        if (containerSize < navSize) {
+            this.scrollable = this.scrollable || {};
+            this.scrollable.prev = currentOffset;
+            this.scrollable.next = currentOffset + containerSize < navSize;
+            if (navSize - currentOffset < containerSize) {
+                this.navOffset = navSize - containerSize;
+            }
+        }
+        else {
+            this.scrollable = false;
+            if (currentOffset > 0) {
+                this.navOffset = 0;
+            }
+        }
+    }
+    selectTab(item) {
+        var _a;
+        console.log('selectTab is ', item);
+        (_a = this.tabBar) === null || _a === void 0 ? void 0 : _a.change();
+        this.tabs.forEach((tab) => {
+            if (item === tab) {
+                tab.ctrl.setStyleObj({
+                    color: var_1.$colors.primary.base,
+                });
+            }
+            else {
+                tab.ctrl.setStyleObj({
+                    color: var_1.$textColor.regular,
+                });
+            }
+        });
+    }
+    changeTab(e) {
+        const code = e.code;
+        const { up, down, left, right } = aria_1.EVENT_CODE;
+        if (![up, down, left, right].includes(code))
+            return;
+        // 左右上下键更换tab
+        const tabList = Array.from(e.currentTarget.querySelectorAll('[role=tab]:not(.is-disabled)'));
+        const currentIndex = tabList.indexOf(e.target);
+        let nextIndex;
+        if (code === left || code === up) {
+            // left
+            if (currentIndex === 0) {
+                // first
+                nextIndex = tabList.length - 1;
+            }
+            else {
+                nextIndex = currentIndex - 1;
+            }
+        }
+        else {
+            // right
+            if (currentIndex < tabList.length - 1) {
+                // not last
+                nextIndex = currentIndex + 1;
+            }
+            else {
+                nextIndex = 0;
+            }
+        }
+        tabList[nextIndex].focus({ preventScroll: true }); // 改变焦点元素
+        tabList[nextIndex].click(); // 选中下一个tab
+        this.setFocus();
+    }
+    setFocus() {
+        if (this.focusable)
+            this.isFocus = true;
+    }
+    removeFocus() {
+        this.isFocus = false;
+    }
+}
+exports.TdTabNav = TdTabNav;

package/src/components/navigation/td-tabs/td-tab-nav.interface.d.ts

@@ -0,0 +1,23 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { ITdTabPaneConfig } from './td-tab-pane.interface';
+import { TdTabs } from './td-tabs.class';
+import { ITabPaneName } from './td-tabs.interface';
+export interface ITdTabNav extends IUI {
+    className: 'TdTabNav';
+}
+export interface ITdTabNavConfig extends IUIConfig {
+    rootTabs: TdTabs;
+    panes?: ITdTabPaneConfig[];
+    currentName?: string | number;
+    editable?: boolean;
+    type?: 'card' | 'border-card' | '';
+    stretch?: boolean;
+    emits?: {
+        tabClick?: (tab: ITdTabPaneConfig, tabName: ITabPaneName, event: Event) => void;
+        tabRemove?: (tab: ITdTabPaneConfig, evt: Event) => void;
+    };
+}
+export interface IScrollable {
+    next?: boolean;
+    prev?: number;
+}

package/src/components/navigation/td-tabs/td-tab-nav.interface.js

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

package/src/components/navigation/td-tabs/td-tab-pane.class.d.ts

@@ -0,0 +1,13 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdTabPane, ITdTabPaneConfig } from './td-tab-pane.interface';
+export declare class TdTabPane extends UI<undefined> implements ITdTabPane {
+    className: 'TdTabPane';
+    props: ITdTabPaneConfig;
+    isClosable?: boolean;
+    active: boolean;
+    shouldBeRender: boolean;
+    private panel?;
+    private loaded;
+    constructor(params?: ITdTabPaneConfig);
+    setActive(active: boolean): void;
+}

package/src/components/navigation/td-tabs/td-tab-pane.class.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TdTabPane = void 0;
+const framework_1 = require("@type-dom/framework");
+const ui_abstract_1 = require("../../../ui/ui.abstract");
+class TdTabPane extends ui_abstract_1.UI {
+    constructor(params) {
+        super(params, 'fragment');
+        this.className = 'TdTabPane';
+        this.isClosable = params === null || params === void 0 ? void 0 : params.closable;
+        this.active = false;
+        this.loaded = false; // params?.loaded;
+        this.shouldBeRender = !(params === null || params === void 0 ? void 0 : params.lazy) || this.loaded || this.active;
+        if (this.shouldBeRender) {
+            this.panel = new framework_1.Div({
+                className: 'tab-pane',
+                attrObj: {
+                    role: 'tab-panel',
+                },
+                styleObj: {
+                    display: !this.active ? 'block' : 'none',
+                },
+            });
+            if (params === null || params === void 0 ? void 0 : params.slot) {
+                this.panel.slotChild(params.slot);
+            }
+            this.addChild(this.panel);
+        }
+        this.props = this.setParams(params);
+    }
+    setActive(active) {
+        var _a, _b;
+        if (active) {
+            (_a = this.panel) === null || _a === void 0 ? void 0 : _a.ctrl.show();
+        }
+        else {
+            (_b = this.panel) === null || _b === void 0 ? void 0 : _b.ctrl.hide();
+        }
+    }
+}
+exports.TdTabPane = TdTabPane;

package/src/components/navigation/td-tabs/td-tab-pane.interface.d.ts

@@ -0,0 +1,31 @@
+import { IUI, IUIConfig } from '../../../ui/ui.interface';
+import { TypeElement } from '@type-dom/framework';
+export interface ITdTabPane extends IUI {
+    className: 'TdTabPane';
+}
+export interface ITdTabPaneConfig extends IUIConfig {
+    /**
+     * @description title of the tab
+     *     default: '',
+     */
+    label?: string;
+    /**
+     * @description identifier corresponding to the name of Tabs, representing the alias of the tab-pane, the default is ordinal number of the tab-pane in the sequence, e.g. the first tab-pane is '0'
+     */
+    name?: string | number;
+    /**
+     * @description whether Tab is closable
+     */
+    closable?: boolean;
+    /**
+     * @description whether Tab is disabled
+     */
+    disabled?: boolean;
+    /**
+     * @description whether Tab is lazily rendered
+     */
+    lazy?: boolean;
+    slots?: {
+        label?: TypeElement;
+    };
+}

package/src/components/navigation/td-tabs/td-tab-pane.interface.js

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

package/src/components/navigation/td-tabs/td-tabs.class.d.ts

@@ -0,0 +1,18 @@
+import { UI } from '../../../ui/ui.abstract';
+import { ITdTabPaneConfig } from './td-tab-pane.interface';
+import { ITabPaneName, ITdTabs, ITdTabsConfig } from './td-tabs.interface';
+import { TdTabNav } from './td-tab-nav.class';
+export declare class TdTabs extends UI implements ITdTabs {
+    className: 'TdTabs';
+    props: ITdTabsConfig;
+    currentName: ITabPaneName;
+    tabNav: TdTabNav;
+    private newBtn?;
+    private header;
+    private panel;
+    constructor(params?: ITdTabsConfig);
+    setCurrentName(value?: ITabPaneName, trigger?: boolean): Promise<void>;
+    handleTabClick(tab: ITdTabPaneConfig, tabName: ITabPaneName, event: Event): void;
+    handleTabRemove(pane: ITdTabPaneConfig, ev: Event): void;
+    handleTabAdd(): void;
+}