Caleb Porzio 2 years ago
parent
commit
19ad6e6464

+ 2 - 0
packages/ui/src/index.js

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

+ 14 - 13
packages/ui/src/popover.js

@@ -13,7 +13,7 @@ export default function (Alpine) {
 
 
         return {
         return {
             get open() {
             get open() {
-                return $data.__isOpen
+                return $data.__isOpenState
             }
             }
         }
         }
     })
     })
@@ -22,6 +22,7 @@ export default function (Alpine) {
 function handleRoot(el, Alpine) {
 function handleRoot(el, Alpine) {
     Alpine.bind(el, {
     Alpine.bind(el, {
         'x-id'() { return ['alpine-popover-button', 'alpine-popover-panel'] },
         'x-id'() { return ['alpine-popover-button', 'alpine-popover-panel'] },
+        'x-modelable': '__isOpenState',
         'x-data'() {
         'x-data'() {
             return {
             return {
                 init() {
                 init() {
@@ -35,17 +36,17 @@ function handleRoot(el, Alpine) {
                 },
                 },
                 __buttonEl: undefined,
                 __buttonEl: undefined,
                 __panelEl: undefined,
                 __panelEl: undefined,
-                __isOpen: false,
+                __isOpenState: false,
                 __open() {
                 __open() {
-                    this.__isOpen = true
+                    this.__isOpenState = true
 
 
                     this.$dispatch('__close-others', { el: this.$el })
                     this.$dispatch('__close-others', { el: this.$el })
                 },
                 },
                 __toggle() {
                 __toggle() {
-                    this.__isOpen ? this.__close() : this.__open()
+                    this.__isOpenState ? this.__close() : this.__open()
                 },
                 },
                 __close(el) {
                 __close(el) {
-                    this.__isOpen = false
+                    this.__isOpenState = false
 
 
                     if (el === false) return
                     if (el === false) return
 
 
@@ -83,8 +84,8 @@ function handleButton(el, Alpine) {
     Alpine.bind(el, {
     Alpine.bind(el, {
         'x-ref': 'button',
         'x-ref': 'button',
         ':id'() { return this.$id('alpine-popover-button') },
         ':id'() { return this.$id('alpine-popover-button') },
-        ':aria-expanded'() { return this.$data.__isOpen },
-        ':aria-controls'() { return this.$data.__isOpen && this.$id('alpine-popover-panel') },
+        ':aria-expanded'() { return this.$data.__isOpenState },
+        ':aria-controls'() { return this.$data.__isOpenState && this.$id('alpine-popover-panel') },
         'x-init'() {
         'x-init'() {
             if (this.$el.tagName.toLowerCase() === 'button' && !this.$el.hasAttribute('type')) this.$el.type = 'button'
             if (this.$el.tagName.toLowerCase() === 'button' && !this.$el.hasAttribute('type')) this.$el.type = 'button'
 
 
@@ -92,7 +93,7 @@ function handleButton(el, Alpine) {
         },
         },
         '@click'() { this.$data.__toggle() },
         '@click'() { this.$data.__toggle() },
         '@keydown.tab'(e) {
         '@keydown.tab'(e) {
-            if (! e.shiftKey && this.$data.__isOpen) {
+            if (! e.shiftKey && this.$data.__isOpenState) {
                 let firstFocusableEl = this.$focus.within(this.$data.__panelEl).getFirst()
                 let firstFocusableEl = this.$focus.within(this.$data.__panelEl).getFirst()
 
 
                 if (firstFocusableEl) {
                 if (firstFocusableEl) {
@@ -104,7 +105,7 @@ function handleButton(el, Alpine) {
             }
             }
         },
         },
         '@keyup.tab'(e) {
         '@keyup.tab'(e) {
-            if (this.$data.__isOpen) {
+            if (this.$data.__isOpenState) {
                 // Check if the last focused element was "after" this one
                 // Check if the last focused element was "after" this one
                 let lastEl = this.$focus.previouslyFocused()
                 let lastEl = this.$focus.previouslyFocused()
 
 
@@ -134,13 +135,13 @@ function handlePanel(el, Alpine) {
     Alpine.bind(el, {
     Alpine.bind(el, {
         'x-init'() { this.$data.__panelEl = this.$el },
         'x-init'() { this.$data.__panelEl = this.$el },
         'x-effect'() {
         'x-effect'() {
-            this.$data.__isOpen && Alpine.bound(el, 'focus') && this.$focus.first()
+            this.$data.__isOpenState && Alpine.bound(el, 'focus') && this.$focus.first()
         },
         },
         'x-ref': 'panel',
         'x-ref': 'panel',
         ':id'() { return this.$id('alpine-popover-panel') },
         ':id'() { return this.$id('alpine-popover-panel') },
-        'x-show'() { return this.$data.__isOpen },
+        'x-show'() { return this.$data.__isOpenState },
         '@mousedown.window'($event) {
         '@mousedown.window'($event) {
-            if (! this.$data.__isOpen) return
+            if (! this.$data.__isOpenState) return
             if (this.$data.__contains(this.$data.__buttonEl, $event.target)) return
             if (this.$data.__contains(this.$data.__buttonEl, $event.target)) return
             if (this.$data.__contains(this.$el, $event.target)) return
             if (this.$data.__contains(this.$el, $event.target)) return
 
 
@@ -186,6 +187,6 @@ function handleGroup(el, Alpine) {
 
 
 function handleOverlay(el, Alpine) {
 function handleOverlay(el, Alpine) {
     Alpine.bind(el, {
     Alpine.bind(el, {
-        'x-show'() { return this.$data.__isOpen }
+        'x-show'() { return this.$data.__isOpenState }
     })
     })
 }
 }

+ 6 - 6
tests/cypress/integration/plugins/ui/popover.spec.js

@@ -1,6 +1,6 @@
 import { beVisible, haveAttribute, html, notBeVisible, notHaveAttribute, test } from '../../../utils'
 import { beVisible, haveAttribute, html, notBeVisible, notHaveAttribute, test } from '../../../utils'
 
 
-test.skip('button toggles panel',
+test('button toggles panel',
     [html`
     [html`
         <div x-data x-popover>
         <div x-data x-popover>
             <button x-popover:button>Toggle</button>
             <button x-popover:button>Toggle</button>
@@ -19,7 +19,7 @@ test.skip('button toggles panel',
     },
     },
 )
 )
 
 
-test.skip('has accessibility attributes',
+test('has accessibility attributes',
     [html`
     [html`
         <div x-data x-popover>
         <div x-data x-popover>
             <button x-popover:button>Toggle</button>
             <button x-popover:button>Toggle</button>
@@ -38,7 +38,7 @@ test.skip('has accessibility attributes',
     },
     },
 )
 )
 
 
-test.skip('escape closes panel',
+test('escape closes panel',
     [html`
     [html`
         <div x-data x-popover>
         <div x-data x-popover>
             <button x-popover:button>Toggle</button>
             <button x-popover:button>Toggle</button>
@@ -57,7 +57,7 @@ test.skip('escape closes panel',
     },
     },
 )
 )
 
 
-test.skip('clicking outside closes panel',
+test('clicking outside closes panel',
     [html`
     [html`
         <div>
         <div>
             <div x-data x-popover>
             <div x-data x-popover>
@@ -80,7 +80,7 @@ test.skip('clicking outside closes panel',
     },
     },
 )
 )
 
 
-test.skip('focusing away closes panel',
+test('focusing away closes panel',
     [html`
     [html`
         <div>
         <div>
             <div x-data x-popover>
             <div x-data x-popover>
@@ -103,7 +103,7 @@ test.skip('focusing away closes panel',
     },
     },
 )
 )
 
 
-test.skip('focusing away doesnt close panel if focusing inside a group',
+test('focusing away doesnt close panel if focusing inside a group',
     [html`
     [html`
         <div x-data>
         <div x-data>
             <div x-popover:group>
             <div x-popover:group>