Allow Flux checkbox/radio/switch custom elements to use x-model like native inputs - ref livewire/flux#336

Author: calebporzio

packages/alpinejs/src/directives/x-model.js

@@ -1,10 +1,10 @@
+import bind, { isCheckbox, isRadio, safeParseBoolean } from '../utils/bind'
 import { evaluateLater } from '../evaluator'
 import { directive } from '../directives'
 import { mutateDom } from '../mutation'
 import { nextTick } from '../nextTick'
-import bind, { safeParseBoolean } from '../utils/bind'
-import on from '../utils/on'
 import { isCloning } from '../clone'
+import on from '../utils/on'
 
 directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
     let scopeTarget = el
@@ -71,7 +71,7 @@ directive('model', (el, { modifiers, expression }, { effect, cleanup }) => {
 
     if (modifiers.includes('fill'))
         if ([undefined, null, ''].includes(getValue())
-            || (el.type === 'checkbox' && Array.isArray(getValue()))
+            || (isCheckbox(el) && Array.isArray(getValue()))
             || (el.tagName.toLowerCase() === 'select' && el.multiple)) {
         setValue(
             getInputValue(el, modifiers, { target: el }, getValue())
@@ -138,7 +138,7 @@ function getInputValue(el, modifiers, event, currentValue) {
         // so we return event.target.value instead of event.detail
         if (event instanceof CustomEvent && event.detail !== undefined)
             return event.detail !== null && event.detail !== undefined ? event.detail : event.target.value
-        else if (el.type === 'checkbox') {
+        else if (isCheckbox(el)) {
             // If the data we are binding to is an array, toggle its value inside the array.
             if (Array.isArray(currentValue)) {
                 let newValue = null;
@@ -176,7 +176,7 @@ function getInputValue(el, modifiers, event, currentValue) {
         } else {
             let newValue
 
-            if (el.type === 'radio') {
+            if (isRadio(el)) {
                 if (event.target.checked) {
                     newValue = event.target.value
                 } else {

packages/alpinejs/src/utils/bind.js

@@ -39,7 +39,7 @@ export default function bind(el, name, value, modifiers = []) {
 }
 
 function bindInputValue(el, value) {
-    if (el.type === 'radio') {
+    if (isRadio(el)) {
         // Set radio value from x-bind:value, if no "value" attribute exists.
         // If there are any initial state values, radio will have a correct
         // "checked" value since x-bind:value is processed before x-model.
@@ -55,7 +55,7 @@ function bindInputValue(el, value) {
                 el.checked = checkedAttrLooseCompare(el.value, value)
             }
         }
-    } else if (el.type === 'checkbox') {
+    } else if (isCheckbox(el)) {
         // If we are explicitly binding a string to the :value, set the string,
         // If the value is a boolean/array/number/null/undefined, leave it alone, it will be set to "on"
         // automatically.
@@ -225,3 +225,11 @@ function getAttributeBinding(el, name, fallback) {
 
     return attr
 }
+
+export function isCheckbox(el) {
+    return el.type === 'checkbox' || el.localName === 'ui-checkbox' || el.localName === 'ui-switch'
+}
+
+export function isRadio(el) {
+    return el.type === 'radio' || el.localName === 'ui-radio'
+}