From c5ab33eeabba0af5729a6c22dff3ccfa6f5318a9 Mon Sep 17 00:00:00 2001 From: South Drifted Date: Tue, 6 Feb 2024 18:57:30 +0000 Subject: [PATCH] [migrate] upgrade Tab components [fix] Count Down CSS --- package.json | 4 +- pnpm-lock.yaml | 8 +-- source/CountDown.tsx | 6 ++- source/Tabs.tsx | 116 +++++++++++++++++++++++++++++++++++++++++++ source/index.ts | 1 + 5 files changed, 127 insertions(+), 8 deletions(-) create mode 100644 source/Tabs.tsx diff --git a/package.json b/package.json index 189216c6..cb83bd21 100644 --- a/package.json +++ b/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": "shiy2008@gmail.com", "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": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3186d24b..92365f5e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,8 +21,8 @@ dependencies: specifier: ^0.14.1 version: 0.14.1 web-cell: - specifier: ^3.0.0-rc.8 - version: 3.0.0-rc.8(element-internals-polyfill@1.3.10)(typescript@5.3.3) + specifier: ^3.0.0-rc.9 + version: 3.0.0-rc.9(element-internals-polyfill@1.3.10)(typescript@5.3.3) web-utility: specifier: ^4.1.3 version: 4.1.3(typescript@5.3.3) @@ -4968,8 +4968,8 @@ packages: - typescript dev: true - /web-cell@3.0.0-rc.8(element-internals-polyfill@1.3.10)(typescript@5.3.3): - resolution: {integrity: sha512-oxgBKP9nv7LFKRQmUBoltxVTlcBPatCvSlsUEaV31GA4tG5OT1e718HDZRrk3bSUfFL8KA6WR/i7wSxZohE20g==} + /web-cell@3.0.0-rc.9(element-internals-polyfill@1.3.10)(typescript@5.3.3): + resolution: {integrity: sha512-wUStFWbybREI1b7TdAksuh7qqneGCeatKnI//LpahXhwlG92B3hWYHG7DCYH7FIpBEd7/Id0EaAbYDFPj81MMA==} peerDependencies: '@webcomponents/webcomponentsjs': ^2.8 core-js: ^3 diff --git a/source/CountDown.tsx b/source/CountDown.tsx index 982cf732..3a346d96 100644 --- a/source/CountDown.tsx +++ b/source/CountDown.tsx @@ -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 { {this.timeSections.map(({ value, label }, index) => (
  • diff --git a/source/Tabs.tsx b/source/Tabs.tsx new file mode 100644 index 00000000..a59dc2c6 --- /dev/null +++ b/source/Tabs.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 {} + +@component({ tagName: 'tab-pane' }) +export class Tab extends HTMLElement implements WebCell { + 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-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 ( + <> + +
    + +
    + + ); + } + + render() { + return ( + <> + + {this.renderContent()} + + ); + } +} diff --git a/source/index.ts b/source/index.ts index 7f9a9c68..1f2cea6c 100644 --- a/source/index.ts +++ b/source/index.ts @@ -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';