From 0eddc7f2eb0beab0bda8572b2c70dfe98781a19d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 27 Jul 2022 13:15:38 +0300
Subject: [PATCH] Refactor #2801 - RadioButton

---
 src/components/radiobutton/RadioButton.d.ts | 24 +++++++++++++++----
 src/components/radiobutton/RadioButton.vue  | 23 ++++++++----------
 src/views/radiobutton/RadioButtonDoc.vue    | 26 +++++++++++++++++----
 3 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/src/components/radiobutton/RadioButton.d.ts b/src/components/radiobutton/RadioButton.d.ts
index 5d56a6f51..51f867ada 100755
--- a/src/components/radiobutton/RadioButton.d.ts
+++ b/src/components/radiobutton/RadioButton.d.ts
@@ -10,13 +10,29 @@ export interface RadioButtonProps {
      */
     modelValue?: any;
     /**
-     * Style class of the component input field.
+     * Name of the input element.
      */
-    class?: any;
+    name?: string | undefined;
     /**
-     * Inline style of the component.
+     * When present, it specifies that the component should be disabled.
      */
-    style?: any;
+    disabled?: boolean | undefined;
+    /**
+     * Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: any;
+    /**
+     * Style class of the input field.
+     */
+    inputClass?: any;
+    /**
+     * 
+     */
+    inputProps?: object | undefined;
     /**
      * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
      */
diff --git a/src/components/radiobutton/RadioButton.vue b/src/components/radiobutton/RadioButton.vue
index 4b195e8c3..dddf5a4db 100755
--- a/src/components/radiobutton/RadioButton.vue
+++ b/src/components/radiobutton/RadioButton.vue
@@ -1,7 +1,8 @@
 <template>
     <div :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input ref="input" type="radio" :id="inputId" :name="name" :checked="checked" :disabled="disabled" :value="value" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" @focus="onFocus" @blur="onBlur" v-bind="inputProps">
+            <input ref="input" type="radio" :id="inputId" :class="inputClass" :style="inputStyle" :name="name" :checked="checked" :disabled="disabled" :value="value" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
+                @focus="onFocus" @blur="onBlur" v-bind="inputProps">
         </div>
         <div ref="box" :class="['p-radiobutton-box', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
             <div class="p-radiobutton-icon"></div>
@@ -18,22 +19,18 @@ export default {
     props: {
 		value: null,
         modelValue: null,
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        inputId: {
-            type: String,
-            default: null
-        },
-        inputProps: {
-            type: Object,
-            default: null
-        },
         name: {
             type: String,
             default: null
         },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        inputId: null,
+        inputClass: null,
+        inputStyle: null,
+        inputProps: null,
         'aria-labelledby': {
             type: String,
 			default: null
diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue
index 98e2ace1c..92b8d9ca0 100755
--- a/src/views/radiobutton/RadioButtonDoc.vue
+++ b/src/views/radiobutton/RadioButtonDoc.vue
@@ -68,16 +68,34 @@ export default {
                         <td>Value binding of the checkbox.</td>
                     </tr>
                     <tr>
-                        <td>style</td>
-                        <td>any</td>
+                        <td>name</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the input element.</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element should be disabled.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
                         <td>null</td>
                         <td>Style class of the component input field.</td>
                     </tr>
                     <tr>
-                        <td>class</td>
+                        <td>inputClass</td>
                         <td>string</td>
                         <td>null</td>
-                        <td>Inline style of the component.</td>
+                        <td>Style class of the input field.</td>
+                    </tr>
+                    <tr>
+                        <td>inputStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the input field.</td>
                     </tr>
 				</tbody>
 			</table>