feat(VRadio): implement disabled state

fix #13
gitsindonesia · Sep 23, 2022 · e948e6c · e948e6c
1 parent 534da1b
commit e948e6c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/packages/forms/src/radio/VRadio.stories.ts b/packages/forms/src/radio/VRadio.stories.ts
@@ -45,6 +45,18 @@ Radio.parameters = {
   },
 };
 
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};
+Disabled.parameters = {
+  docs: {
+    source: {
+      code: '<v-radio disabled />',
+    },
+  },
+};
+
 export const Validation: Story<{}> = () => ({
   components: {VRadio, VBtn},
   setup() {

diff --git a/packages/forms/src/radio/VRadio.vue b/packages/forms/src/radio/VRadio.vue
@@ -57,6 +57,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  disabledClass: {
+    type: String,
+    default: 'disabled:text-gray-200 disabled:cursor-not-allowed',
+  },
 });
 
 const {modelValue, rules, label, inputClass, color, name, id} = toRefs(props);
@@ -114,7 +122,10 @@ watch(
         :name="name"
         :value="value"
         class="transition duration-300"
-        :class="[inputClass, colorClass]"
+        :class="[inputClass, colorClass, disabled && disabledClass]"
+        :aria-disabled="disabled"
+        :disabled="disabled"
+        v-bind="$attrs"
       />
       <label v-if="label" :for="id || name" :class="labelClass">
         {{ label }}