Skip to content

Commit

Permalink
tabs: better event and active attribute (#232)
Browse files Browse the repository at this point in the history
* tabs: better event and avctive attribute

* use data-attributes instead

* rebuild after rebase
  • Loading branch information
dbil25 authored Mar 22, 2024
1 parent b4475c3 commit d5b3935
Show file tree
Hide file tree
Showing 7 changed files with 37 additions and 9 deletions.
2 changes: 1 addition & 1 deletion dist/tailwindcss-stimulus-components.cjs

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/tailwindcss-stimulus-components.cjs.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/tailwindcss-stimulus-components.module.js

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/tailwindcss-stimulus-components.module.js.map

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 8 additions & 2 deletions src/tabs.js
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ export default class extends Controller {
this.indexValue = this.tabTargets.indexOf(event.currentTarget)
}

window.dispatchEvent(new CustomEvent('tsc:tab-change'))
}

nextTab() {
Expand All @@ -57,7 +56,12 @@ export default class extends Controller {

indexValueChanged() {
this.showTab()

this.dispatch("tab-change", {
target: this.tabTargets[this.indexValue],
detail: {
activeIndex: this.indexValue
}
})
// Update URL with the tab ID if it has one
// This will be automatically selected on page load
if (this.updateAnchorValue) {
Expand All @@ -79,11 +83,13 @@ export default class extends Controller {
if (index === this.indexValue) {
panel.classList.remove('hidden')
tab.ariaSelected = 'true'
tab.dataset.active = true
if (this.hasInactiveTabClass) tab?.classList?.remove(...this.inactiveTabClasses)
if (this.hasActiveTabClass) tab?.classList?.add(...this.activeTabClasses)
} else {
panel.classList.add('hidden')
tab.ariaSelected = null
delete tab.dataset.active
if (this.hasActiveTabClass) tab?.classList?.remove(...this.activeTabClasses)
if (this.hasInactiveTabClass) tab?.classList?.add(...this.inactiveTabClasses)
}
Expand Down
23 changes: 22 additions & 1 deletion test/tabs_test.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { fixture, expect, nextFrame } from '@open-wc/testing'
import { fixture, expect, nextFrame, oneEvent } from '@open-wc/testing'
import { fetchFixture } from './test_helpers'

import { Application } from '@hotwired/stimulus'
Expand Down Expand Up @@ -26,6 +26,27 @@ describe('TabsController', () => {
expect(panels[2].className.includes('hidden')).to.equal(false)
})

it('applies the active data-attribute to the active tab', async() => {
const element = document.querySelector("#tabs")
const tabs = element.querySelectorAll("[data-tabs-target='tab']")
expect(tabs[2].dataset.active).to.equal(undefined)

tabs[2].click()
await nextFrame()

expect(tabs[2].dataset.active).to.equal('true')
})

it('sends an event on tab change', async() => {
const element = document.querySelector("#tabs")
const tabs = element.querySelectorAll("[data-tabs-target='tab']")
const listener = oneEvent(tabs[2], 'tabs:tab-change')
tabs[2].click()

const { detail } = await listener
expect(detail.activeIndex).to.equal(2)
})

it('appends to location href when use-anchor is true', async () => {
const anchorTabCtrlr = document.querySelector("[data-tabs-update-anchor-value='true']")
const tab = anchorTabCtrlr.querySelector('#first')
Expand Down

0 comments on commit d5b3935

Please sign in to comment.