Fixed #1234 - Add input, focus, blur events for InputSwitch

api-generator/components/inputswitch.js

@@ -27,6 +27,18 @@ const InputSwitchEvents = [
     {
         name: "change",
         description: "Callback to invoke on value change."
+    },
+    {
+        name: "input",
+        description: "Callback to invoke on value change."
+    },
+    {
+        name: "focus",
+        description: "Callback to invoke when element receives focus."
+    },
+    {
+        name: "blur",
+        description: "Callback to invoke when element loses focus."
     }
 ];
 

src/components/inputswitch/InputSwitch.d.ts

@@ -9,6 +9,9 @@ declare class InputSwitch {
     $emit(eventName: 'update:modelValue', value: boolean): 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 InputSwitch;

src/components/inputswitch/InputSwitch.vue

@@ -29,15 +29,18 @@ export default {
                 this.$emit('click', event);
                 this.$emit('update:modelValue', !this.modelValue);
                 this.$emit('change', event);
+                this.$emit('input', !this.modelValue);
                 this.$refs.input.focus();
             }
             event.preventDefault();
         },
-        onFocus() {
+        onFocus(event) {
             this.focused = true;
+            this.$emit('focus', event);
         },
-        onBlur() {
+        onBlur(event) {
             this.focused = false;
+            this.$emit('blur', event);
         }
     },
     computed: {

src/views/inputswitch/InputSwitchDoc.vue

@@ -73,7 +73,6 @@ export default {
 		</div>
 
 		<h5>Events</h5>
-		<p>Any valid event such as focus, blur and input are passed to the underlying input element. Following are the additional events to configure the component.</p>
 		<div class="doc-tablewrapper">
 			<table class="doc-table">
 				<thead>
@@ -86,12 +85,27 @@ export default {
 				<tbody>
 					<tr>
 						<td>click</td>
-						<td>-</td>
+						<td>event: Browser event</td>
 						<td>Callback to invoke on click.</td>
 					</tr>
 					<tr>
 						<td>change</td>
-						<td>-</td>
+						<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>