add activeTab, selectedTabIndex props
This commit is contained in:
Keith Cirkel
Родитель
f24eac67c1
Коммит
cd10c1aea7
|
|
@ -107,6 +107,10 @@ export class TabContainerElement extends HTMLElement {
|
|||
)
|
||||
}
|
||||
|
||||
get activeTab() {
|
||||
return this.#tabs[this.selectedTabIndex]
|
||||
}
|
||||
|
||||
get activePanel() {
|
||||
return this.#panelSlot.assignedNodes()[0] as HTMLElement
|
||||
}
|
||||
|
|
@ -181,7 +185,7 @@ export class TabContainerElement extends HTMLElement {
|
|||
const tabs = this.#tabs
|
||||
if (!tabs.includes(tab as HTMLElement)) return
|
||||
|
||||
const currentIndex = tabs.indexOf(tabs.find(e => e.matches('[aria-selected="true"]'))!)
|
||||
const currentIndex = this.selectedTabIndex
|
||||
const vertical = tab.closest('[role="tablist"]')?.getAttribute('aria-orientation') === 'vertical'
|
||||
const prevTab = event.code === 'ArrowLeft' || (vertical && event.code === 'ArrowUp')
|
||||
const nextTab = event.code === 'ArrowRight' || (vertical && event.code === 'ArrowDown')
|
||||
|
|
@ -218,6 +222,14 @@ export class TabContainerElement extends HTMLElement {
|
|||
}
|
||||
}
|
||||
|
||||
get selectedTabIndex(): number {
|
||||
return this.#tabs.findIndex(el => el.matches('[aria-selected=true]'))
|
||||
}
|
||||
|
||||
set selectedTabIndex(i: number) {
|
||||
this.selectTab(i)
|
||||
}
|
||||
|
||||
selectTab(index: number): void {
|
||||
if (!this.#setupComplete) {
|
||||
const tabListSlot = this.#tabListSlot
|
||||
|
|
@ -276,7 +288,7 @@ export class TabContainerElement extends HTMLElement {
|
|||
for (const el of afterSlotted) el.setAttribute('slot', 'after-panels')
|
||||
}
|
||||
const defaultTab = Number(this.getAttribute('default-tab') || -1)
|
||||
const defaultIndex = defaultTab >= 0 ? defaultTab : this.#tabs.findIndex(el => el.matches('[aria-selected=true]'))
|
||||
const defaultIndex = defaultTab >= 0 ? defaultTab : this.selectedTabIndex
|
||||
index = index >= 0 ? index : Math.max(0, defaultIndex)
|
||||
}
|
||||
|
||||
|
|
|
|||
22
test/test.js
22
test/test.js
|
|
@ -162,6 +162,8 @@ describe('tab-container', function () {
|
|||
'change events point to second panel',
|
||||
)
|
||||
assert.equal(document.activeElement, tabs[1])
|
||||
assert.equal(tabContainer.activeTab, tabs[1])
|
||||
assert.equal(tabContainer.selectedTabIndex, 1)
|
||||
})
|
||||
|
||||
it('keyboard shortcuts work and `tab-container-changed` events are dispatched', function () {
|
||||
|
|
@ -187,6 +189,8 @@ describe('tab-container', function () {
|
|||
assert.deepStrictEqual(tabs.map(isSelected), [true, false, false], 'First tab is selected')
|
||||
assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible')
|
||||
assert.equal(document.activeElement, tabs[0])
|
||||
assert.equal(tabContainer.activeTab, tabs[0])
|
||||
assert.equal(tabContainer.selectedTabIndex, 0)
|
||||
assert.equal(events.length, 2, 'tab-container-change(d) called')
|
||||
assert.deepStrictEqual(
|
||||
events.map(e => e.type),
|
||||
|
|
@ -280,6 +284,8 @@ describe('tab-container', function () {
|
|||
'change events point to second panel',
|
||||
)
|
||||
assert.equal(document.activeElement, tabs[1])
|
||||
assert.equal(tabContainer.activeTab, tabs[1])
|
||||
assert.equal(tabContainer.selectedTabIndex, 1)
|
||||
})
|
||||
|
||||
it('result in noop, when selectTab receives out of bounds index', function () {
|
||||
|
|
@ -417,6 +423,8 @@ describe('tab-container', function () {
|
|||
assert.deepStrictEqual(tabs.map(isSelected), [false, false, true], 'Third tab is selected')
|
||||
assert.deepStrictEqual(panels.map(isHidden), [true, true, false], 'Third panel is visible')
|
||||
assert.equal(document.activeElement, tabs[2])
|
||||
assert.equal(tabContainer.activeTab, tabs[2])
|
||||
assert.equal(tabContainer.selectedTabIndex, 2)
|
||||
assert.equal(events.length, 2, 'tab-container-change(d) called')
|
||||
assert.deepStrictEqual(
|
||||
events.map(e => e.type),
|
||||
|
|
@ -439,6 +447,8 @@ describe('tab-container', function () {
|
|||
assert.deepStrictEqual(tabs.map(isSelected), [true, false, false], 'First tab is selected')
|
||||
assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible')
|
||||
assert.equal(document.activeElement, tabs[0])
|
||||
assert.equal(tabContainer.activeTab, tabs[0])
|
||||
assert.equal(tabContainer.selectedTabIndex, 0)
|
||||
assert.equal(events.length, 2, 'tab-container-change(d) called')
|
||||
assert.deepStrictEqual(
|
||||
events.map(e => e.type),
|
||||
|
|
@ -461,6 +471,8 @@ describe('tab-container', function () {
|
|||
assert.deepStrictEqual(tabs.map(isSelected), [false, true, false], 'Second tab is selected')
|
||||
assert.deepStrictEqual(panels.map(isHidden), [true, false, true], 'Second panel is visible')
|
||||
assert.equal(document.activeElement, tabs[1])
|
||||
assert.equal(tabContainer.activeTab, tabs[1])
|
||||
assert.equal(tabContainer.selectedTabIndex, 1)
|
||||
assert.equal(events.length, 2, 'tab-container-change(d) called')
|
||||
assert.deepStrictEqual(
|
||||
events.map(e => e.type),
|
||||
|
|
@ -483,6 +495,8 @@ describe('tab-container', function () {
|
|||
assert.deepStrictEqual(tabs.map(isSelected), [false, false, true], 'Third tab is selected')
|
||||
assert.deepStrictEqual(panels.map(isHidden), [true, true, false], 'Third panel is visible')
|
||||
assert.equal(document.activeElement, tabs[2])
|
||||
assert.equal(tabContainer.activeTab, tabs[2])
|
||||
assert.equal(tabContainer.selectedTabIndex, 2)
|
||||
assert.equal(events.length, 2, 'tab-container-change(d) called')
|
||||
assert.deepStrictEqual(
|
||||
events.map(e => e.type),
|
||||
|
|
@ -506,6 +520,8 @@ describe('tab-container', function () {
|
|||
assert.deepStrictEqual(tabs.map(isSelected), [false, false, true], 'Third tab is selected')
|
||||
assert.deepStrictEqual(panels.map(isHidden), [true, true, false], 'Third panel is visible')
|
||||
assert.equal(document.activeElement, tabs[2])
|
||||
assert.equal(tabContainer.activetab, tabs[2])
|
||||
assert.equal(tabContainer.selectedTabIndex, 2)
|
||||
assert.equal(events.length, 2, 'tab-container-change(d) called')
|
||||
assert.deepStrictEqual(
|
||||
events.map(e => e.type),
|
||||
|
|
@ -528,6 +544,8 @@ describe('tab-container', function () {
|
|||
assert.deepStrictEqual(tabs.map(isSelected), [true, false, false], 'First tab is selected')
|
||||
assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible')
|
||||
assert.equal(document.activeElement, tabs[0])
|
||||
assert.equal(tabContainer.activeTab, tabs[0])
|
||||
assert.equal(tabContainer.selectedTabIndex, 0)
|
||||
assert.equal(events.length, 2, 'tab-container-change(d) called')
|
||||
assert.deepStrictEqual(
|
||||
events.map(e => e.type),
|
||||
|
|
@ -550,6 +568,8 @@ describe('tab-container', function () {
|
|||
assert.deepStrictEqual(tabs.map(isSelected), [false, true, false], 'Second tab is selected')
|
||||
assert.deepStrictEqual(panels.map(isHidden), [true, false, true], 'Second panel is visible')
|
||||
assert.equal(document.activeElement, tabs[1])
|
||||
assert.equal(tabContainer.activeTab, tabs[1])
|
||||
assert.equal(tabContainer.selectedTabIndex, 1)
|
||||
assert.equal(events.length, 2, 'tab-container-change(d) called')
|
||||
assert.deepStrictEqual(
|
||||
events.map(e => e.type),
|
||||
|
|
@ -572,6 +592,8 @@ describe('tab-container', function () {
|
|||
assert.deepStrictEqual(tabs.map(isSelected), [false, false, true], 'Third tab is selected')
|
||||
assert.deepStrictEqual(panels.map(isHidden), [true, true, false], 'Third panel is visible')
|
||||
assert.equal(document.activeElement, tabs[2])
|
||||
assert.equal(tabContainer.activetab, tabs[2])
|
||||
assert.equal(tabContainer.selectedTabIndex, 2)
|
||||
assert.equal(events.length, 2, 'tab-container-change(d) called')
|
||||
assert.deepStrictEqual(
|
||||
events.map(e => e.type),
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче