Get tab code good to go

index.html

@@ -10,17 +10,17 @@
     <!-- <script src="https://unpkg.com/alpinejs@3.0.0/dist/cdn.min.js" defer></script> -->
 
     <!-- Play around. -->
-    <div x-data x-tabs>
-        <div x-tabs:list>
-            <button x-tabs:tab button-1>First</button>
-            <button x-tabs:tab button-2 disabled :class="$tab.isDisabled && 'disabled'">Second</button>
-            <button x-tabs:tab button-3>Third</button>
-        </div>
-
-        <div x-tabs:panels>
-            <div x-tabs:panel panel-1>First Panel</div>
-            <div x-tabs:panel panel-2>Second Panel</div>
-            <div x-tabs:panel panel-3>Third Panel</div>
+    <div x-data="{ selectedIndex: 1 }">
+        <button @click="selectedIndex = selectedIndex ? 0 : 1">change</button>
+        <div x-data x-tabs x-model="selectedIndex">
+            <div x-tabs:list>
+                <button x-tabs:tab button-1>First</button>
+                <button x-tabs:tab button-2>Second</button>
+            </div>
+            <div x-tabs:panels>
+                <div x-tabs:panel panel-1>First Panel</div>
+                <div x-tabs:panel panel-2>Second Panel</div>
+            </div>
         </div>
     </div>
 </html>

packages/alpinejs/src/directives.js

@@ -189,6 +189,10 @@ let directiveOrder = [
     'ref',
     'data',
     'id',
+    // @todo: provide better directive ordering mechanisms so
+    // that I don't have to manually add things like "tabs"
+    // to the order list...
+    'tabs',
     'bind',
     'init',
     'for',

packages/ui/src/tabs.js

@@ -16,12 +16,6 @@ export default function (Alpine) {
                 return $data.__selectedIndex === $data.__tabs.indexOf($data.__tabEl)
             },
             get isDisabled() {
-                console.log($data.__isDisabled)
-                return true
-                return 'ey'
-                setTimeout(() => {
-                    console.log(($data.__isDisabled))
-                })
                 return $data.__isDisabled
             }
         }
@@ -40,6 +34,7 @@ export default function (Alpine) {
 
 function handleRoot(el, Alpine) {
     Alpine.bind(el, {
+        'x-modelable': '__selectedIndex',
         'x-data'() {
             return {
                 init() {
@@ -86,10 +81,11 @@ function handleTab(el, Alpine) {
             init() {
                 this.__tabEl = this.$el
                 this.$data.__addTab(this.$el)
-                // this.__tabEl.__disabled = this.__isDisabled = Alpine.bound(this.$el, 'disabled', false)
+                this.__tabEl.__disabled = Alpine.bound(this.$el, 'disabled', false)
+                this.__isDisabled = this.__tabEl.__disabled
             },
             __tabEl: undefined,
-            __isDisabled: 'hey',
+            __isDisabled: false,
         }},
         '@click'() {
             if (this.$el.__disabled) return

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

@@ -115,7 +115,7 @@ test('can detect the selected tab & panel',
     },
 )
 
-test.only('can disable a tab',
+test('can disable a tab',
     [html`
         <div x-data x-tabs>
             <div x-tabs:list>
@@ -140,8 +140,86 @@ test.only('can disable a tab',
         get('[button-1]').type('{rightArrow}')
         get('[panel-1]').should(notBeVisible())
         get('[panel-3]').should(beVisible())
-        get('[button-1]').type('{rightArrow}')
+        get('[button-3]').type('{rightArrow}')
         get('[panel-3]').should(notBeVisible())
         get('[panel-1]').should(beVisible())
     },
 )
+
+test('can traverse tabs manually',
+    [html`
+        <div x-data x-tabs manual>
+            <div x-tabs:list>
+                <button x-tabs:tab button-1>First</button>
+                <button x-tabs:tab button-2>Second</button>
+            </div>
+
+            <div x-tabs:panels>
+                <div x-tabs:panel panel-1>First Panel</div>
+                <div x-tabs:panel panel-2>Second Panel</div>
+            </div>
+        </div>
+    `],
+    ({ get }) => {
+        get('[button-1]').click()
+        get('[button-1]').should(haveFocus())
+        get('[panel-1]').should(beVisible())
+        get('[panel-2]').should(notBeVisible())
+        get('[button-1]').type('{rightArrow}')
+        get('[button-2]').should(haveFocus())
+        get('[panel-1]').should(beVisible())
+        get('[panel-2]').should(notBeVisible())
+        get('[button-2]').click()
+        get('[panel-1]').should(notBeVisible())
+        get('[panel-2]').should(beVisible())
+    },
+)
+
+test('can set a default index',
+    [html`
+        <div x-data x-tabs default-index="1">
+            <div x-tabs:list>
+                <button x-tabs:tab button-1>First</button>
+                <button x-tabs:tab button-2>Second</button>
+            </div>
+
+            <div x-tabs:panels>
+                <div x-tabs:panel panel-1>First Panel</div>
+                <div x-tabs:panel panel-2>Second Panel</div>
+            </div>
+        </div>
+    `],
+    ({ get }) => {
+        get('[panel-1]').should(notBeVisible())
+        get('[panel-2]').should(beVisible())
+    },
+)
+
+test('can programmatically control the selected tab',
+    [html`
+        <div x-data="{ selectedIndex: 1 }">
+            <button @click="selectedIndex = selectedIndex ? 0 : 1" button-toggle>Toggle tabs</button>
+
+            <div x-tabs x-model="selectedIndex">
+                <div x-tabs:list>
+                    <button x-tabs:tab button-1>First</button>
+                    <button x-tabs:tab button-2>Second</button>
+                </div>
+                <div x-tabs:panels>
+                    <div x-tabs:panel panel-1>First Panel</div>
+                    <div x-tabs:panel panel-2>Second Panel</div>
+                </div>
+            </div>
+        </div>
+    `],
+    ({ get }) => {
+        get('[panel-1]').should(notBeVisible())
+        get('[panel-2]').should(beVisible())
+        get('[button-toggle]').click()
+        get('[panel-2]').should(notBeVisible())
+        get('[panel-1]').should(beVisible())
+        get('[button-toggle]').click()
+        get('[panel-1]').should(notBeVisible())
+        get('[panel-2]').should(beVisible())
+    },
+)