wip

packages/ui/src/helpers.js

@@ -36,8 +36,6 @@ export default function (Alpine) {
             set active(value) { this.setActive(value) },
             set selected(value) { this.setSelected(value) },
             setSelected(value) {
-                console.log(value);
-
                 let item = this.items.find(i => i.value === value)
 
                 if (item && item.disabled) return
@@ -241,13 +239,13 @@ export default function (Alpine) {
             isFirst() {
                 return state.items.findIndex(i => i.el.isSameNode(el)) === 0
             },
-            get active() {
+            get isActive() {
                 if (state.reactive.active) return state.reactive.active === item.value
             },
-            get selected() {
+            get isSelected() {
                 if (state.reactive.selected) return state.reactive.selected === item.value
             },
-            get disabled() {
+            get isDisabled() {
                 return item.disabled
             },
             get el() { return item.el },

packages/ui/src/listbox.js

@@ -102,7 +102,6 @@ function handleOption(el, Alpine) {
                         queueMicrotask(() => {
                             this.__value = Alpine.bound(el, 'value');
                             this.__disabled = Alpine.bound(el, 'disabled', false);
-                            console.log(this.__value);
                         })
                     }
                 }

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

@@ -1,4 +1,4 @@
-import { beVisible, haveAttribute, haveText, html, notBeVisible, notHaveAttribute, test } from '../../../utils'
+import { beVisible, haveAttribute, haveClasses, haveText, html, notBeVisible, notHaveAttribute, test } from '../../../utils'
 
 test('it works with x-model',
     [html`
@@ -31,34 +31,30 @@ test('it works with x-model',
                         :disabled="person.disabled"
                     >
                         <span x-text="person.name"></span>
-
-                        <!-- <span x-show="$listboxOption.isSelected">
-                            selected
-                        </span> -->
                     </li>
                 </template>
             </ul>
-
-            <article x-text="active?.name"></article>
         </div>
     `],
     ({ get }) => {
         get('ul').should(notBeVisible())
-        get('button').click()
+        get('button')
+            .should(haveText('Select Person'))
+            .click()
         get('ul').should(beVisible())
         get('button').click()
         get('ul').should(notBeVisible())
         get('button').click()
         get('[option="2"]').click()
         get('ul').should(notBeVisible())
-        get('article').should(haveText('Arlene Mccoy'))
+        get('button').should(haveText('Arlene Mccoy'))
     },
 )
 
-test('it works with internal state/$listbox',
+test('it works with internal state',
     [html`
         <div
-            x-data="{ active: null, people: [
+            x-data="{ people: [
                 { id: 1, name: 'Wade Cooper' },
                 { id: 2, name: 'Arlene Mccoy' },
                 { id: 3, name: 'Devon Webb' },
@@ -74,7 +70,7 @@ test('it works with internal state/$listbox',
         >
             <label x-listbox:label>Assigned to</label>
 
-            <button x-listbox:button x-text="active ? active.name : 'Select Person'"></button>
+            <button x-listbox:button x-text="$listbox.selected ? $listbox.selected.name : 'Select Person'"></button>
 
             <ul x-listbox:options>
                 <template x-for="person in people" :key="person.id">
@@ -85,26 +81,82 @@ test('it works with internal state/$listbox',
                         :disabled="person.disabled"
                     >
                         <span x-text="person.name"></span>
-
-                        <!-- <span x-show="$listboxOption.isSelected">
-                            selected
-                        </span> -->
                     </li>
                 </template>
             </ul>
-
-            <article x-text="$listbox.selected?.name"></article>
         </div>
     `],
     ({ get }) => {
         get('ul').should(notBeVisible())
-        get('button').click()
+        get('button')
+            .should(haveText('Select Person'))
+            .click()
         get('ul').should(beVisible())
         get('button').click()
         get('ul').should(notBeVisible())
         get('button').click()
         get('[option="2"]').click()
         get('ul').should(notBeVisible())
+        get('button').should(haveText('Arlene Mccoy'))
+    },
+)
+
+test('$listbox/$listboxOption',
+    [html`
+        <div
+            x-data="{ people: [
+                { id: 1, name: 'Wade Cooper' },
+                { id: 2, name: 'Arlene Mccoy' },
+                { id: 3, name: 'Devon Webb' },
+                { id: 4, name: 'Tom Cook' },
+                { id: 5, name: 'Tanya Fox', disabled: true },
+                { id: 6, name: 'Hellen Schmidt' },
+                { id: 7, name: 'Caroline Schultz' },
+                { id: 8, name: 'Mason Heaney' },
+                { id: 9, name: 'Claudie Smitham' },
+                { id: 10, name: 'Emil Schaefer' },
+            ]}"
+            x-listbox
+        >
+            <label x-listbox:label>Assigned to</label>
+
+            <button x-listbox:button x-text="$listbox.selected ? $listbox.selected.name : 'Select Person'"></button>
+
+            <article x-text="$listbox.active?.name"></article>
+
+            <ul x-listbox:options>
+                <template x-for="person in people" :key="person.id">
+                    <li
+                        :option="person.id"
+                        x-listbox:option
+                        :value="person"
+                        :disabled="person.disabled"
+                        :class="{
+                            'selected': $listboxOption.isSelected,
+                            'active': $listboxOption.isActive,
+                            // 'disabled': $listboxOption.isDisabled, @todo: fix isDisabled
+                        }"
+                    >
+                        <span x-text="person.name"></span>
+                    </li>
+                </template>
+            </ul>
+        </div>
+    `],
+    ({ get }) => {
+        get('article').should(haveText(''))
+        get('[option="5"]').should(haveClasses(['disabled']))
+        get('button')
+            .should(haveText('Select Person'))
+            .click()
+        get('article').should(haveText('Wade Cooper'))
+        get('[option="1"]').should(haveClasses(['active']))
+        get('ul').type('{downarrow}')
         get('article').should(haveText('Arlene Mccoy'))
+        get('[option="2"]').should(haveClasses(['active']))
+        get('button').should(haveText('Select Person'))
+        get('[option="2"]').click()
+        get('button').should(haveText('Arlene Mccoy'))
+        get('[option="2"]').should(haveClasses(['selected']))
     },
 )