wip

packages/ui/src/index.js

@@ -1,11 +1,11 @@
 import dialog from './dialog'
 import popover from './popover'
-import radioGroup from './radio-group'
+import radio from './radio'
 import tabs from './tabs'
 
 export default function (Alpine) {
     dialog(Alpine)
     popover(Alpine)
-    radioGroup(Alpine)
+    radio(Alpine)
     tabs(Alpine)
 }

packages/ui/src/radio-group.js → packages/ui/src/radio.js

@@ -150,23 +150,23 @@ function handleOption(el, Alpine) {
         },
         'x-id'() { return ['alpine-radiogroup-label', 'alpine-radiogroup-description'] },
         'role': 'radio',
-        ':aria-checked'() { return this.$radioGroupOption.checked },
-        ':aria-disabled'() { return this.$radioGroupOption.disabled },
+        ':aria-checked'() { return this.$radioOption.checked },
+        ':aria-disabled'() { return this.$radioOption.disabled },
         ':aria-labelledby'() { return this.__hasLabel && this.$id('alpine-radiogroup-label') },
         ':aria-describedby'() { return this.__hasDescription && this.$id('alpine-radiogroup-description') },
         ':tabindex'() {
-            if (this.$radioGroupOption.disabled || disabled) return -1
-            if (this.$radioGroupOption.checked) return 0
+            if (this.$radioOption.disabled || disabled) return -1
+            if (this.$radioOption.checked) return 0
             if (!this.$data.__value && this.$data.__isFirstOption(value)) return 0
             return -1
         },
         '@click'() {
-            if (this.$radioGroupOption.disabled) return
+            if (this.$radioOption.disabled) return
             this.$data.__change(value)
             this.$el.focus()
         },
         '@focus'() {
-            if (this.$radioGroupOption.disabled) return
+            if (this.$radioOption.disabled) return
             this.$data.__setActive(value)
         },
         '@blur'() {

tests/cypress/integration/plugins/ui/radio-group.spec.js → tests/cypress/integration/plugins/ui/radio.spec.js

@@ -28,17 +28,17 @@ test('it works using x-model',
                 disabled: false,
             },
         ]}">
-            <div x-radio-group x-model="active">
+            <div x-radio x-model="active">
                 <fieldset>
                     <legend>
-                        <h2 x-radio-group:label>Privacy setting</h2>
+                        <h2 x-radio:label>Privacy setting</h2>
                     </legend>
 
                     <div>
                         <template x-for="({ id, name, description, disabled }, i) in access" :key="id">
-                            <div :option="id" x-radio-group:option :value="id" :disabled="disabled">
-                                <span x-radio-group:label x-text="name"></span>
-                                <span x-radio-group:description x-text="description"></span>
+                            <div :option="id" x-radio:option :value="id" :disabled="disabled">
+                                <span x-radio:label x-text="name"></span>
+                                <span x-radio:description x-text="description"></span>
                             </div>
                         </template>
                     </div>
@@ -85,17 +85,17 @@ test('cannot select any option when the group is disabled',
                 disabled: false,
             },
         ]}">
-            <div x-radio-group x-model="active" :disabled="true">
+            <div x-radio x-model="active" :disabled="true">
                 <fieldset>
                     <legend>
-                        <h2 x-radio-group:label>Privacy setting</h2>
+                        <h2 x-radio:label>Privacy setting</h2>
                     </legend>
 
                     <div>
                         <template x-for="({ id, name, description, disabled }, i) in access" :key="id">
-                            <div :option="id" x-radio-group:option :value="id" :disabled="disabled">
-                                <span x-radio-group:label x-text="name"></span>
-                                <span x-radio-group:description x-text="description"></span>
+                            <div :option="id" x-radio:option :value="id" :disabled="disabled">
+                                <span x-radio:label x-text="name"></span>
+                                <span x-radio:description x-text="description"></span>
                             </div>
                         </template>
                     </div>
@@ -140,17 +140,17 @@ test('cannot select a disabled option',
                 disabled: false,
             },
         ]}">
-            <div x-radio-group x-model="active">
+            <div x-radio x-model="active">
                 <fieldset>
                     <legend>
-                        <h2 x-radio-group:label>Privacy setting</h2>
+                        <h2 x-radio:label>Privacy setting</h2>
                     </legend>
 
                     <div>
                         <template x-for="({ id, name, description, disabled }, i) in access" :key="id">
-                            <div :option="id" x-radio-group:option :value="id" :disabled="disabled">
-                                <span x-radio-group:label x-text="name"></span>
-                                <span x-radio-group:description x-text="description"></span>
+                            <div :option="id" x-radio:option :value="id" :disabled="disabled">
+                                <span x-radio:label x-text="name"></span>
+                                <span x-radio:description x-text="description"></span>
                             </div>
                         </template>
                     </div>
@@ -195,17 +195,17 @@ test('keyboard navigation works',
                 disabled: false,
             },
         ]}">
-            <div x-radio-group x-model="active">
+            <div x-radio x-model="active">
                 <fieldset>
                     <legend>
-                        <h2 x-radio-group:label>Privacy setting</h2>
+                        <h2 x-radio:label>Privacy setting</h2>
                     </legend>
 
                     <div>
                         <template x-for="({ id, name, description, disabled }, i) in access" :key="id">
-                            <div :option="id" x-radio-group:option :value="id" :disabled="disabled">
-                                <span x-radio-group:label x-text="name"></span>
-                                <span x-radio-group:description x-text="description"></span>
+                            <div :option="id" x-radio:option :value="id" :disabled="disabled">
+                                <span x-radio:label x-text="name"></span>
+                                <span x-radio:description x-text="description"></span>
                             </div>
                         </template>
                     </div>
@@ -226,7 +226,7 @@ test('keyboard navigation works',
 
 test('has accessibility attributes',
     [html`
-        <main x-data="{ active: null, options: [
+        <main x-data="{ active: null, access: [
             {
                 id: 'access-1',
                 name: 'Public access',
@@ -252,18 +252,18 @@ test('has accessibility attributes',
                 disabled: false,
             },
         ]}">
-            <div x-radio-group group x-model="active">
+            <div x-radio group x-model="active">
                 <fieldset>
                     <legend>
-                        <h2 x-radio-group:label>Privacy setting</h2>
-                        <p x-radio-group:description>Some description</p>
+                        <h2 x-radio:label>Privacy setting</h2>
+                        <p x-radio:description>Some description</p>
                     </legend>
 
                     <div>
-                        <template x-for="({ id, name, description, disabled }, i) in options" :key="id">
-                            <div :option="id" x-radio-group:option="({ value: id, disabled: disabled })">
-                                <span :label="id" x-radio-group:label x-text="name"></span>
-                                <span :description="id" x-radio-group:description x-text="description"></span>
+                        <template x-for="({ id, name, description, disabled }, i) in access" :key="id">
+                            <div :option="id" x-radio:option="({ value: id, disabled: disabled })">
+                                <span :label="id" x-radio:label x-text="name"></span>
+                                <span :description="id" x-radio:description x-text="description"></span>
                             </div>
                         </template>
                     </div>