[migrate] upgrade Tab components

[fix] Count Down CSS

Author: TechQuery

package.json

@@ -1,6 +1,6 @@
 {
     "name": "boot-cell",
-    "version": "2.0.0-beta.12",
+    "version": "2.0.0-beta.13",
     "license": "LGPL-3.0",
     "author": "[email protected]",
     "description": "Web Components UI library based on WebCell v3, BootStrap v5, BootStrap Icon v1 & FontAwesome v6",
@@ -29,7 +29,7 @@
         "dom-renderer": "^2.0.6",
         "mobx": "^6.12.0",
         "regenerator-runtime": "^0.14.1",
-        "web-cell": "^3.0.0-rc.8",
+        "web-cell": "^3.0.0-rc.9",
         "web-utility": "^4.1.3"
     },
     "peerDependencies": {

pnpm-lock.yaml

@@ -13,7 +13,9 @@ interface TimeSection {
     label: string;
 }
 
-const colors = Object.keys(Status).slice(0, 4);
+const colors = Object.keys(Status)
+    .filter(color => color !== 'tertiary')
+    .slice(0, 4);
 
 export interface CountDownProps {
     endTime?: string | Date | number;
@@ -100,7 +102,7 @@ export class CountDown extends HTMLElement implements WebCell<CountDownProps> {
                 {this.timeSections.map(({ value, label }, index) => (
                     <li
                         key={value}
-                        className={`list-inline-item display-4 bg-${colors[index]} d-inline-flex align-items-center justify-content-center rounded-5`}
+                        className={`list-inline-item fs-4 bg-${colors[index]} d-inline-flex align-items-center justify-content-center rounded-3`}
                         style={{ width: '5.5rem', height: '5.5rem' }}
                     >
                         <small>

source/CountDown.tsx

@@ -0,0 +1,116 @@
+import { JsxChildren } from 'dom-renderer';
+import { observable } from 'mobx';
+import {
+    WebCell,
+    attribute,
+    component,
+    observer,
+    on,
+    reaction
+} from 'web-cell';
+import { CustomElement } from 'web-utility';
+
+import { Nav, NavLink } from './Nav';
+
+export interface TabProps {
+    caption: JsxChildren;
+}
+
+export interface Tab extends WebCell<TabProps> {}
+
+@component({ tagName: 'tab-pane' })
+export class Tab extends HTMLElement implements WebCell<TabProps> {
+    caption: JsxChildren;
+
+    connectedCallback() {
+        this.classList.add('tab-pane', 'fade');
+        this.role = 'tabpanel';
+    }
+}
+
+@component({
+    tagName: 'tabs-box',
+    mode: 'open'
+})
+@observer
+export class Tabs extends HTMLElement implements CustomElement {
+    @observable
+    accessor tabMeta: TabProps[] = [];
+
+    @attribute
+    @observable
+    accessor currentIndex = 0;
+
+    connectedCallback() {
+        this.turnPaneTo(this.currentIndex);
+    }
+
+    @on('slotchange', 'slot')
+    handleSlotChange(_: Event, slot: HTMLSlotElement) {
+        const tabs = slot.assignedElements() as Tab[];
+
+        if (this.tabMeta.length !== tabs.length)
+            this.tabMeta = tabs.map(({ caption }) => ({ caption }));
+    }
+
+    @on('click', '.nav-tabs > .nav-link')
+    handleTabClick(
+        event: MouseEvent,
+        { dataset: { index } }: HTMLAnchorElement
+    ) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        this.currentIndex = +index;
+    }
+
+    @reaction(({ currentIndex }) => currentIndex)
+    turnPaneTo(index: number) {
+        const previous = this.querySelector<Tab>('tab-pane.active');
+
+        if (previous) {
+            previous.hidden = true;
+            previous.classList.remove('active', 'show');
+        }
+        const next = this.children[index] as Tab;
+
+        next.hidden = false;
+        next.classList.add('active', 'show');
+    }
+
+    renderContent() {
+        const { tabMeta, currentIndex } = this;
+
+        return (
+            <>
+                <Nav className="nav-tabs" role="tablist">
+                    {tabMeta.map(({ caption }, index) => (
+                        <NavLink
+                            role="tab"
+                            data-index={index}
+                            className={currentIndex === index ? 'active' : ''}
+                            ariaSelected={`${currentIndex === index}`}
+                        >
+                            {caption}
+                        </NavLink>
+                    ))}
+                </Nav>
+                <div className="tab-content">
+                    <slot />
+                </div>
+            </>
+        );
+    }
+
+    render() {
+        return (
+            <>
+                <link
+                    rel="stylesheet"
+                    href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css"
+                />
+                {this.renderContent()}
+            </>
+        );
+    }
+}

source/Tabs.tsx

@@ -19,5 +19,6 @@ export * from './Carousel';
 export * from './Nav';
 export * from './Navbar';
 export * from './Offcanvas';
+export * from './Tabs';
 export * from './CountDown';
 export * from './MonthCalendar';