diff --git a/custom-elements.json b/custom-elements.json index cc4e786..bb7e766 100644 --- a/custom-elements.json +++ b/custom-elements.json @@ -196,6 +196,10 @@ "kind": "field", "name": "selectedTabIndex" }, + { + "kind": "field", + "name": "defaultTabIndex" + }, { "kind": "method", "name": "selectTab", @@ -550,6 +554,13 @@ "text": "number" } }, + { + "kind": "field", + "name": "defaultTabIndex", + "type": { + "text": "number" + } + }, { "kind": "method", "name": "selectTab", diff --git a/examples/index.html b/examples/index.html index f616f61..4e3553e 100644 --- a/examples/index.html +++ b/examples/index.html @@ -100,6 +100,23 @@

Set initially selected tab

Set default tab

+ + + + + + +

+ Panel 2 +

+ + +

Panel with extra buttons

@@ -123,7 +140,7 @@

Panel with extra buttons

- + diff --git a/src/tab-container-element.ts b/src/tab-container-element.ts index b788a5c..c01164d 100644 --- a/src/tab-container-element.ts +++ b/src/tab-container-element.ts @@ -254,6 +254,14 @@ export class TabContainerElement extends HTMLElement { this.selectTab(i) } + get defaultTabIndex(): number { + return Number(this.getAttribute('default-tab') || -1) + } + + set defaultTabIndex(index: number) { + this.setAttribute('default-tab', String(index)) + } + selectTab(index: number): void { if (!this.#setupComplete) { const tabListSlot = this.#tabListSlot @@ -310,7 +318,7 @@ export class TabContainerElement extends HTMLElement { for (const el of afterTabSlotted) el.setAttribute('slot', 'after-tabs') for (const el of afterSlotted) el.setAttribute('slot', 'after-panels') } - const defaultTab = Number(this.getAttribute('default-tab') || -1) + const defaultTab = this.defaultTabIndex const defaultIndex = defaultTab >= 0 ? defaultTab : this.selectedTabIndex index = index >= 0 ? index : Math.max(0, defaultIndex) } diff --git a/test/test.js b/test/test.js index 4fc3370..eb0c08f 100644 --- a/test/test.js +++ b/test/test.js @@ -108,10 +108,10 @@ describe('tab-container', function () { }) }) - describe('after tree insertion with default-tab', function () { + describe('after tree insertion with defaulTabIndex', function () { beforeEach(function () { document.body.innerHTML = ` - + pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Alternative Proxies: