wip

packages/ui/src/index.js

@@ -1,7 +1,9 @@
 import dialog from './dialog'
 import popover from './popover'
+import tabs from './tabs'
 
 export default function (Alpine) {
     dialog(Alpine)
     popover(Alpine)
+    tabs(Alpine)
 }

packages/ui/src/tabs.js

@@ -12,7 +12,7 @@ export default function (Alpine) {
         let $data = Alpine.$data(el)
 
         return {
-            get selected() {
+            get isSelected() {
                 return $data.__selectedIndex === $data.__tabs.indexOf($data.__tabEl)
             }
         }
@@ -22,7 +22,7 @@ export default function (Alpine) {
         let $data = Alpine.$data(el)
 
         return {
-            get selected() {
+            get isSelected() {
                 return $data.__selectedIndex === $data.__panels.indexOf($data.__panelEl)
             }
         }
@@ -99,7 +99,7 @@ function handleTab(el, Alpine) {
         '@keydown.right.prevent.stop'() { this.$focus.within(this.$data.__activeTabs()).withWrapAround().next() },
         '@keydown.up.prevent.stop'() { this.$focus.within(this.$data.__activeTabs()).withWrapAround().prev() },
         '@keydown.left.prevent.stop'() { this.$focus.within(this.$data.__activeTabs()).withWrapAround().prev() },
-        ':tabindex'() { return this.$tab.selected ? 0 : -1 },
+        ':tabindex'() { return this.$tab.isSelected ? 0 : -1 },
         '@focus'() {
             if (this.$data.__manualActivation) {
                 this.$el.focus()
@@ -122,7 +122,7 @@ function handlePanels(el, Alpine) {
 
 function handlePanel(el, Alpine) {
     Alpine.bind(el, {
-        ':tabindex'() { return this.$tabPanel.selected ? 0 : -1 },
+        ':tabindex'() { return this.$tabPanel.isSelected ? 0 : -1 },
         'x-data'() { return {
             init() {
                 this.__panelEl = this.$el
@@ -130,7 +130,7 @@ function handlePanel(el, Alpine) {
             },
             __panelEl: undefined,
         }},
-        'x-show'() { return this.$tabPanel.selected },
+        'x-show'() { return this.$tabPanel.isSelected },
     })
 }
 

tests/cypress/integration/plugins/ui/tabs.spec.js

@@ -1,6 +1,6 @@
 import { beVisible, haveFocus, html, notBeVisible, test } from '../../../utils'
 
-test.skip('can use tabs to toggle panels',
+test('can use tabs to toggle panels',
     [html`
         <div x-data x-tabs>
             <div x-tabs:list>
@@ -23,7 +23,7 @@ test.skip('can use tabs to toggle panels',
     },
 )
 
-test.skip('can use arrow keys to cycle through tabs',
+test('can use arrow keys to cycle through tabs',
     [html`
         <div x-data x-tabs>
             <div x-tabs:list>
@@ -55,7 +55,7 @@ test.skip('can use arrow keys to cycle through tabs',
     },
 )
 
-test.skip('cant tab through tabs, can only use arrows',
+test('cant tab through tabs, can only use arrows',
     [html`
         <div>
             <button button-1>first focusable</button>