Fixed #1471 - Add input, focus, blur events for Checkbox

api-generator/components/checkbox.js

@@ -45,26 +45,24 @@ const CheckboxProps = [
 
 const CheckboxEvents = [
     {
-        "name": "click",
+        name: "click",
-        "description": "Callback to invoke on value click.",
+        description: "Callback to invoke on value click.",
-        arguments: [
-            {
-                name: "event",
-                type: "object",
-                description: "Browser event"
-            }
-        ]
     },
     {
-        "name": "change",
+        name: "change",
-        "description": "Callback to invoke on value change.",
+        description: "Callback to invoke on value change.",
-        arguments: [
+    },
-            {
+    {
-                name: "event",
+        name: "input",
-                type: "object",
+        description: "Callback to invoke on value change."
-                description: "Browser event"
+    },
-            }
+    {
-        ]
+        name: "focus",
+        description: "Callback to invoke when element receives focus."
+    },
+    {
+        name: "blur",
+        description: "Callback to invoke when element loses focus."
     }
 ];
 

src/components/checkbox/Checkbox.d.ts

@@ -13,6 +13,9 @@ declare class Checkbox {
     $emit(eventName: 'update:page', value: any): this;
     $emit(eventName: 'click', event: Event): this;
     $emit(eventName: 'change', event: Event): this;
+    $emit(eventName: 'input', value: boolean): this;
+    $emit(eventName: 'focus', event: Event): this;
+    $emit(eventName: 'blur', event: Event): this;
 }
 
 export default Checkbox;

src/components/checkbox/Checkbox.vue

@@ -54,14 +54,17 @@ export default {
                 this.$emit('click', event);
                 this.$emit('update:modelValue', newModelValue);
                 this.$emit('change', event);
+                this.$emit('input', newModelValue);
                 this.$refs.input.focus();
             }
         },
         onFocus() {
             this.focused = true;
+            this.$emit('focus', event);
         },
         onBlur() {
             this.focused = false;
+            this.$emit('blur', event);
         }
     },
     computed: {

src/views/checkbox/CheckboxDoc.vue

@@ -97,7 +97,6 @@ export default {
 		</div>
 
 		<h5>Events</h5>
-        <p>Any valid event such as focus and blur.</p>
         <div class="doc-tablewrapper">
             <table class="doc-table">
                 <thead>
@@ -118,6 +117,21 @@ export default {
                         <td>event: Browser event</td>
                         <td>Callback to invoke on value change.</td>
                     </tr>
+                    					<tr>
+						<td>focus</td>
+						<td>event: Browser event</td>
+						<td>Callback to invoke when element receives focus.</td>
+					</tr>
+					<tr>
+						<td>blur</td>
+						<td>event: Browser event</td>
+						<td>Callback to invoke when element loses focus.</td>
+					</tr>
+					<tr>
+						<td>input</td>
+						<td>value: New value</td>
+						<td>Callback to invoke on value change.</td>
+					</tr>
                 </tbody>
             </table>
         </div>