Refactor #2801 - Checkbox

api-generator/components/checkbox.js

@@ -18,16 +18,28 @@ const CheckboxProps = [
         description: "Allows to select a boolean value instead of multiple values."
     },
     {
-        name: "class",
+        name: "disabled",
-        type: "string",
+        type: "boolean",
-        default: "null",
+        default: "false",
-        description: "Style class of the component."
+        description: "When present, it specifies that the element should be disabled."
     },
     {
-        name: "style",
+        name: "readonly",
-        type: "any",
+        type: "boolean",
+        default: "false",
+        description: "When present, it specifies that an input field is read-only."
+    },
+    {
+        name: "required",
+        type: "boolean",
+        default: "false",
+        description: "When present, it specifies that the element is required."
+    },
+    {
+        name: "tabindex",
+        type: "number",
         default: "null",
-        description: "Inline of the component."
+        description: "Index of the element in tabbing order."
     },
     {
         name: "trueValue",
@@ -40,6 +52,24 @@ const CheckboxProps = [
         type: "any",
         default: "null",
         description: "Value in unchecked state."
+    },
+    {
+        name: "inputId",
+        type: "string",
+        default: "null",
+        description: "Identifier of the underlying input element."
+    },
+    {
+        name: "inputClass",
+        type: "any",
+        default: "null",
+        description: "Style class of the input field."
+    },
+    {
+        name: "inputStyle",
+        type: "any",
+        default: "null",
+        description: "Inline style of the input field."
     }
 ];
 

src/components/checkbox/Checkbox.d.ts

@@ -9,18 +9,30 @@ export interface CheckboxProps {
      * Value binding of the checkbox.
      */
     modelValue?: any;
+    /**
+     * Name of the input element.
+     */
+    name?: string | undefined;
     /**
      * Allows to select a boolean value instead of multiple values.
      */
     binary?: boolean;
     /**
-     * Style class of the component input field.
+     * When present, it specifies that the element should be disabled.
      */
-    class?: any;
+    disabled?: boolean | undefined;
     /**
-     * Inline style of the component.
+     * When present, it specifies that an input field is read-only.
      */
-    style?: any;
+    readonly?: boolean | undefined;
+    /**
+     * When present, it specifies that the element is required.
+     */
+    required?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
     /**
      * Value in checked state.
      */
@@ -29,6 +41,22 @@ export interface CheckboxProps {
      * Value in unchecked state.
      */
     falseValue?: any;
+    /**
+     * Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Style class of the input field.
+     */
+    inputClass?: any | undefined;
+    /**
+      * Inline style of the input field.
+      */
+    inputStyle?: any | undefined;
+    /**
+     * 
+     */
+    inputProps?: object | undefined;
 }
 
 export interface CheckboxSlots {

src/components/checkbox/Checkbox.vue

@@ -1,7 +1,7 @@
 <template>
     <div :class="containerClass" @click="onClick($event)">
         <div class="p-hidden-accessible">
-            <input :id="inputId" ref="input" type="checkbox" :value="value" :name="name" :checked="checked" :tabindex="tabindex" :disabled="disabled" :readonly="readonly" :required="required" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
+            <input :id="inputId" ref="input" type="checkbox" :value="value" :class="inputClass" :style="inputStyle" :name="name" :checked="checked" :tabindex="tabindex" :disabled="disabled" :readonly="readonly" :required="required" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
                 @focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
         </div>
         <div ref="box" :class="['p-checkbox-box', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
@@ -44,12 +44,14 @@ export default {
             type: Boolean,
             default: false
         },
-        inputId: null,
-        inputProps: null,
         tabindex: {
             type: Number,
             default: null
         },
+        inputId: null,
+        inputClass: null,
+        inputStyle: null,
+        inputProps: null,
         'aria-labelledby': {
             type: String,
 			default: null

src/views/checkbox/CheckboxDoc.vue

@@ -69,24 +69,18 @@ export default {
                         <td>null</td>
                         <td>Value binding of the checkbox.</td>
                     </tr>
+                    <tr>
+                        <td>name</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the input element.</td>
+                    </tr>
                     <tr>
                         <td>binary</td>
                         <td>boolean</td>
                         <td>false</td>
                         <td>Allows to select a boolean value instead of multiple values.</td>
                     </tr>
-                    <tr>
-                        <td>style</td>
-                        <td>any</td>
-                        <td>null</td>
-                        <td>Style class of the component input field.</td>
-                    </tr>
-                    <tr>
-                        <td>class</td>
-                        <td>string</td>
-                        <td>null</td>
-                        <td>Inline style of the component.</td>
-                    </tr>
                     <tr>
                         <td>trueValue</td>
                         <td>any</td>
@@ -98,6 +92,54 @@ export default {
                         <td>any</td>
                         <td>null</td>
                         <td>Value in unchecked state.</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>readonly</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that an input field is read-only.</td>
+                    </tr>
+                    <tr>
+                        <td>required</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When present, it specifies that the element is required.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>null</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>inputId</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Identifier of the underlying input element.</td>
+                    </tr>
+                    <tr>
+                        <td>inputClass</td>
+                        <td>any</td>
+                        <td>null</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>
+                    <tr>
+                        <td>inputProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td></td>
                     </tr>
 				</tbody>
 			</table>