base-ui/tabs/lit-tabs.ts

/*
 * Copyright (C) 2022 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {element} from "../BaseElement.js";
import {LitTabpane} from "./lit-tabpane.js";

@element('lit-tabs')
export class LitTabs extends HTMLElement {
    private tabPos: any
    private nav: HTMLDivElement | undefined | null
    private line: HTMLDivElement | undefined | null
    private slots: HTMLSlotElement | undefined | null

    constructor() {
        super();
        const shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.innerHTML = `
        <style>
        :host{
            display: block;
            text-align: unset;
            color: var(--dark-color1,#252525);
            background-color: var(--dark-background,#FFFFFF);
            box-shadow: #00000033 0 0 10px ;
        }
        ::slotted(lit-tabpane){
            box-sizing:border-box;
            width:100%;
            height:100%;
            flex-shrink:0;
            overflow:auto;
        }
        .nav-item{
            display: inline-flex;
            justify-content: center;
            align-items: center;
            padding: 6px 0px 6px 12px;
            font-size: .9rem;
            font-weight: normal;
            cursor: pointer;
            transition: all 0.3s;
            flex-shrink: 0;
        }
        .nav-item lit-icon{
            margin-right: 2px;
            font-size: inherit;
        }
        .nav-item[data-disabled]{
            pointer-events: all;
            cursor: not-allowed;
            color: #bfbfbf;
        }
        .nav-item[data-hidden]{
            pointer-events: all;
            cursor: not-allowed;
            color: #bfbfbf;
            display: none;
        }
        .tab-content{
            display: block;
            background-color: #fff;
            flex:1;
        }
        :host(:not([position])) .nav-root,
        :host([position^='top']) .nav-root{
            display: flex;
            position: relative;
            justify-content: center;
            align-items: center;
        }
        :host(:not([mode]):not([position])) .tab-line,
        :host([mode='flat'][position^='top']) .tab-line{
            position:absolute;
        }

        :host(:not([position])) .tab-nav-container,
        :host([position^='top']) .tab-nav-container{
            display: flex;
            position: relative;
            flex-direction: column;
            overflow-y: hidden;
            overflow-x: auto;
            overflow: -moz-scrollbars-none;
            -ms-overflow-style: none;
            transition: all 0.3s;
            flex: 1;
        }
        :host([position='top']) .tab-nav,
        :host([position='top-left']) .tab-nav{
            display: flex;
            position: relative;
            justify-content: flex-start;
            cursor: row-resize;
            user-select: none;
            margin-top: 6px;
            margin-left: 5px;
        }
        :host([position='top-center']) .tab-nav{
            display: flex;
            justify-content: center;
        }
        :host([position='top-right']) .tab-nav{
            display: flex;
            justify-content: flex-end;
        }

        :host([position^='top'][mode='card']) .nav-item{
            border-top: 1px solid var(--dark-border1,#f0f0f0);
            border-left: 1px solid var(--dark-border1,#f0f0f0);
            border-right: 1px solid var(--dark-border1,#f0f0f0);
            bottom: 0px;
            margin-right: 2px;
            position: relative;
            height: 100%;
        }
        :host([position^='top']) .tab-nav-bg-line{
            position: absolute;bottom: 0;height: 1px;
            width: 100%
        }
        :host([position^='top'][mode='card']) .nav-item:not([data-selected]){
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            background-color: var(--dark-border1,#D8D8D8);
            color: var(--dark-color1,#212121);
        }
        :host([position^='top'][mode='card']) .nav-item[data-selected]{
            background-color: var(--dark-background,#ffffff);
            bottom: 0px;
            color: var(--dark-color1,#212121);
            border-top: 1px solid var(--dark-border1,#bababa);
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            border-left: 1px solid var(--dark-border1,#bababa);
            border-right: 1px solid var(--dark-border1,#bababa);
        }

        :host([position^='bottom']) .tab{
            display: flex;
            flex-direction: column-reverse;
        }
        :host([mode='flat'][position^='bottom']) .tab-line{
            position:absolute;
            top: -3px;
            background-color: #42b983;
            height: 2px;
            transform: translateY(-100%);
            transition: all 0.3s;
        }
        :host([position^='bottom']) .tab-nav-container{
            display: flex;
            position: relative;
            flex-direction: column;
            overflow-x: auto;
            overflow-y: visible;
            overflow: -moz-scrollbars-none;
            -ms-overflow-style: none;
            transition: all 0.3s;
            flex: 1;
            border-top: #f0f0f0 1px solid;
        }
        :host([position^='bottom']) .nav-root{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        :host([position='bottom']) .tab-nav,
        :host([position='bottom-left']) .tab-nav{
            display: flex;
            position: relative;
            justify-content: flex-start;
        }
        :host([position='bottom-center']) .tab-nav{
            display: flex;
            justify-content: center;
        }
        :host([position='bottom-right']) .tab-nav{
            display: flex;
            justify-content: flex-end;
        }
        :host([position^='bottom'][mode='card']) .nav-item{
            border-top: 1px solid #ffffff;
            border-left: 1px solid #f0f0f0;
            border-right: 1px solid #f0f0f0;
            border-bottom: 1px solid #f0f0f0;
            top: -1px;
            margin-right: 2px;
            position: relative;
        }
        :host([position^='bottom']) .tab-nav-bg-line{
            position: absolute;top: 0;height: 1px;background-color: #f0f0f0;width: 100%
        }
        :host([position^='bottom'][mode='card']) .nav-item:not([data-selected]){
            background-color: #f5f5f5;
            border-top: 1px solid #f0f0f0;
        }
        :host([position^='bottom'][mode='card']) .nav-item[data-selected]{
            background-color: #ffffff;
            border-top: 1px solid #fff;
            top: -1px;
        }

        :host([position^='left']) .tab{
            display: flex;
            flex-direction: row;
        }
        :host([mode='flat'][position^='left']) .tab-line{
            position:absolute;
            right: 1px;
            background-color: #42b983;
            width: 3px;
            transform: translateX(100%);
            transition: all 0.3s;
        }
        :host([position^='left']) .tab-nav-container{
            display: flex;
            position: relative;
            flex-direction: row;
            overflow-x: auto;
            overflow-y: visible;
            overflow: -moz-scrollbars-none;
            -ms-overflow-style: none;
            transition: all 0.3s;
            flex: 1;
            border-right: #f0f0f0 1px solid;
        }
        :host([position^='left']) .nav-root{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        :host([position='left']) .tab-nav,
        :host([position='left-top']) .tab-nav{
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
        }
        :host([position='left-center']) .tab-nav{
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
        }
        :host([position='left-bottom']) .tab-nav{
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-end;
        }
        :host([position^='left'][mode='card']) .nav-item{
            border-top: 1px solid #f0f0f0;
            border-left: 1px solid #f0f0f0;
            border-right: 1px solid #ffffff;
            border-bottom: 1px solid #f0f0f0;
            right: -1px;
            margin-bottom: 2px;
            position: relative;
        }
        :host([position^='left']) .tab-nav-bg-line{
            position: absolute;right: 0;width: 1px;background-color: #f0f0f0;width: 100%
        }
        :host([position^='left'][mode='card']) .nav-item:not([data-selected]){
            background-color: #f5f5f5;
            border-right: 1px solid #f0f0f0;
        }
        :host([position^='left'][mode='card']) .nav-item[data-selected]{
            background-color: #ffffff;
            border-bottom: 1px solid #fff;
            right: -1px;
        }

        :host([position^='right']) .tab{
            display: flex;
            flex-direction: row-reverse;
        }
        :host([mode='flat'][position^='right']) .tab-line{
            position:absolute;
            left: 1px;
            background-color: #42b983;
            width: 3px;
            transform: translateX(-100%);
            transition: all 0.3s;
        }
        :host([position^='right']) .tab-nav-container{
            display: flex;
            position: relative;
            flex-direction: row-reverse;
            overflow-x: auto;
            overflow-y: visible;
            overflow: -moz-scrollbars-none;
            -ms-overflow-style: none;
            transition: all 0.3s;
            flex: 1;
            border-left: #f0f0f0 1px solid;
        }
        :host([position^='right']) .nav-root{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        :host([position='right']) .tab-nav,
        :host([position='right-top']) .tab-nav{
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-start;
        }
        :host([position='right-center']) .tab-nav{
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: center;
        }
        :host([position='right-bottom']) .tab-nav{
            display: flex;
            position: relative;
            flex-direction: column;
            justify-content: flex-end;
        }
        :host([position^='right'][mode='card']) .nav-item{
            border-top: 1px solid #f0f0f0;
            border-left: 1px solid #ffffff;
            border-right: 1px solid #f0f0f0;
            border-bottom: 1px solid #f0f0f0;
            left: -1px;
            margin-top: 2px;
            position: relative;
        }
        :host([position^='right']) .tab-nav-bg-line{
            position: absolute;left: 0;width: 1px;background-color: #f0f0f0;width: 100%
        }
        :host([position^='right'][mode='card']) .nav-item:not([data-selected]){
            background-color: #f5f5f5;
            border-left: 1px solid #f0f0f0;
        }
        :host([position^='right'][mode='card']) .nav-item[data-selected]{
            background-color: #ffffff;
            left: -1px;
        }


        .tab-nav-container::-webkit-scrollbar {
            display: none;
        }

        .close-icon:hover{
            color: #000;
        }
        .nav-item[data-closeable] .close-icon{
            display: block;
            padding: 2px 5px;
            color: var(--dark-icon,#606060)
        }
        .nav-item[data-closeable] .no-close-icon{
            display: none;
        }
        .nav-item:not([data-closeable]) .no-close-icon{
            display: block;
        }
        .nav-item:not([data-closeable]) .close-icon{
            display: none;
        }

        </style>
        <style id="filter"></style>
        <div class="tab" >
            <div class="nav-root" style="background-color: var(--dark-background4,#f2f2f2);">
                <slot name="left" style="flex:1"></slot>
                <div class="tab-nav-container" >
                    <div class="tab-nav-bg-line"></div>
                    <div class="tab-nav" id="nav" ></div>
                    <div class="tab-line" id="tab-line"></div>
                </div>
                <slot name="right" style="flex:1"></slot>
            </div>
            <div class="tab-content">
                <slot id="slot">NEED CONTENT</slot>
            </div>
        </div>
        `
    }

    static get observedAttributes() {
        return ['activekey', 'mode', 'position']
    }

    get position() {
        return this.getAttribute('position') || 'top';
    }

    set position(value) {
        this.setAttribute('position', value);
    }

    get mode() {
        return this.getAttribute('mode') || 'flat';
    }

    set mode(value) {
        this.setAttribute('mode', value);
    }

    get activekey() {
        return this.getAttribute("activekey") || '';
    }

    set activekey(value: string) {
        this.setAttribute('activekey', value);
    }

    set onTabClick(fn: any) {
        this.addEventListener('onTabClick', fn);
    }

    updateLabel(key: string, value: string) {
        if (this.nav) {
            let item = this.nav.querySelector(`.nav-item[data-key='${key}']`);
            if (item) {
                item.querySelector<HTMLSpanElement>("span")!.innerHTML = value;
                this.initTabPos()
            }
        }
    }

    updateDisabled(key: string, value: string) {
        if (this.nav) {
            let item = this.nav.querySelector(`.nav-item[data-key='${key}']`);
            if (item) {
                if (value) {
                    item.setAttribute('data-disabled', '')
                } else {
                    item.removeAttribute('data-disabled');
                }
                this.initTabPos()
            }
        }
    }

    updateCloseable(key: string, value: string) {
        if (this.nav) {
            let item = this.nav.querySelector(`.nav-item[data-key='${key}']`);
            if (item) {
                if (value) {
                    item.setAttribute('data-closeable', '')
                } else {
                    item.removeAttribute('data-closeable');
                }
                this.initTabPos()
            }
        }
    }

    updateHidden(key: string, value: string) {
        if (this.nav) {
            let item = this.nav.querySelector(`.nav-item[data-key='${key}']`);
            if (item) {
                if (value === "true") {
                    item.setAttribute('data-hidden', '')
                } else {
                    item.removeAttribute('data-hidden');
                }
                this.initTabPos()
            }
        }
    }

    initTabPos() {
        const items = this.nav!.querySelectorAll<HTMLDivElement>(".nav-item");
        Array.from(items).forEach((a, index) => {
            // @ts-ignore
            this.tabPos[a.dataset.key] = {
                index: index,
                width: a.offsetWidth,
                height: a.offsetHeight,
                left: a.offsetLeft,
                top: a.offsetTop,
                label: a.textContent
            }
        })
        if (this.activekey) {
            if (this.position.startsWith('left')) {
                this.line?.setAttribute('style', `height:${this.tabPos[this.activekey].height}px;transform:translate(100%,${this.tabPos[this.activekey].top}px)`);
            } else if (this.position.startsWith('top')) {
                if (this.tabPos[this.activekey]) {
                    this.line?.setAttribute('style', `width:${this.tabPos[this.activekey].width}px;transform:translate(${this.tabPos[this.activekey].left}px,100%)`);
                }
            } else if (this.position.startsWith('right')) {
                this.line?.setAttribute('style', `height:${this.tabPos[this.activekey].height}px;transform:translate(-100%,${this.tabPos[this.activekey].top}px)`);
            } else if (this.position.startsWith('bottom')) {
                this.line?.setAttribute('style', `width:${this.tabPos[this.activekey].width}px;transform:translate(${this.tabPos[this.activekey].left}px,100%)`);
            }
        }
    }

    connectedCallback() {
        let that = this;
        this.tabPos = {}
        this.nav = this.shadowRoot?.querySelector('#nav')
        this.line = this.shadowRoot?.querySelector('#tab-line')
        this.slots = this.shadowRoot?.querySelector('#slot');
        this.slots?.addEventListener('slotchange', () => {
            const elements: Element[] | undefined = this.slots?.assignedElements();
            let panes = this.querySelectorAll<LitTabpane>('lit-tabpane');
            if (this.activekey) {
                panes.forEach(a => {
                    if (a.key === this.activekey) {
                        a.style.display = 'block'
                    } else {
                        a.style.display = 'none';
                    }
                })
            } else {
                panes.forEach((a, index) => {
                    if (index === 0) {
                        a.style.display = 'block'
                        this.activekey = a.key || ''
                    } else {
                        a.style.display = 'none';
                    }
                })
            }

            let navHtml = "";
            elements?.map(it => it as LitTabpane).forEach(a => {
                if (a.disabled) {
                    navHtml += `<div class="nav-item" data-key="${a.key}" data-disabled ${a.closeable ? 'data-closeable' : ''}>
                    ${a.icon ? `<lit-icon name='${a.icon}'></lit-icon>` : ``}
                    <span>${a.tab}</span>
                    <lit-icon class="close-icon" name='close' size="12"></lit-icon><div class="no-close-icon" style="margin-right: 12px"></div>
                    </div>`;
                } else if (a.hidden) {
                    navHtml += `<div class="nav-item" data-key="${a.key}" data-hidden ${a.closeable ? 'data-closeable' : ''}>
                    ${a.icon ? `<lit-icon name='${a.icon}'></lit-icon>` : ``}
                    <span>${a.tab}</span>
                    <lit-icon class="close-icon" name='close' size="12"></lit-icon><div class="no-close-icon" style="margin-right: 12px"></div>
                    </div>`;
                } else {
                    if (a.key === this.activekey) {
                        navHtml += `<div class="nav-item" data-key="${a.key}" data-selected ${a.closeable ? 'data-closeable' : ''}>
                        ${a.icon ? `<lit-icon name='${a.icon}'></lit-icon>` : ``}
                        <span>${a.tab}</span>
                        <lit-icon class="close-icon" name='close' size="12"></lit-icon><div class="no-close-icon" style="margin-right: 12px"></div>
                        </div>`;
                    } else {
                        navHtml += `<div class="nav-item" data-key="${a.key}" ${a.closeable ? 'data-closeable' : ''}>
                            ${a.icon ? `<lit-icon name='${a.icon}'></lit-icon>` : ``}
                            <span>${a.tab}</span>
                            <lit-icon class="close-icon" name='close' size="12"></lit-icon><div class="no-close-icon" style="margin-right: 12px"></div>
                            </div>`;
                    }

                }
            })
            this.nav!.innerHTML = navHtml;
            this.initTabPos()
            this.nav!.querySelectorAll<HTMLElement>('.close-icon').forEach(a => {
                a.onclick = (e) => {
                    e.stopPropagation();
                    const closeKey = (e.target! as HTMLElement).parentElement!.dataset.key;
                    this.dispatchEvent(new CustomEvent('close-handler', {detail: {key: closeKey}, composed: true}));
                }
            });
        })
        this.nav!.onclick = (e) => {
            if ((e.target! as HTMLElement).closest('div')!.hasAttribute('data-disabled')) return;
            let key = (e.target! as HTMLElement).closest('div')!.dataset.key;
            if (key) {
                this.activeByKey(key)
            }
            let label = (e.target! as HTMLElement).closest('div')!.querySelector('span')!.textContent;
            this.dispatchEvent(new CustomEvent('onTabClick', {detail: {key: key, tab: label}}))
        };
    }

    activeByKey(key: string) {
        if (key === null || key === undefined) return;
        this.nav!.querySelectorAll('.nav-item').forEach(a => {
            if (a.getAttribute('data-key') === key) {
                a.setAttribute('data-selected', 'true');
            } else {
                a.removeAttribute('data-selected');
            }
        })
        let tbp = this.querySelector(`lit-tabpane[key='${key}']`);
        let panes = this.querySelectorAll<LitTabpane>('lit-tabpane');
        panes.forEach(a => {
            if (a.key === key) {
                a.style.display = 'block';
                this.activekey = a.key;
                this.initTabPos()
            } else {
                a.style.display = 'none';
            }
        })
    }

    activePane(key: string) {
        if (key === null || key === undefined) return false;
        let tbp = this.querySelector(`lit-tabpane[key='${key}']`);
        if (tbp) {
            this.activeByKey(key)
            return true;
        } else {
            return false;
        }
    }

    disconnectedCallback() {

    }

    adoptedCallback() {
    }

    attributeChangedCallback(name: string, oldValue: string, newValue: string) {
        if (name === 'activekey' && this.nav && oldValue !== newValue && newValue != '') {
            this.activeByKey(newValue)
        }
    }
}