perf: Improve performance for Form components + add @change event

Author: rstoenescu

dev/components/components/pagination.vue

@@ -13,7 +13,7 @@
         then hit <ENTER>
       </p>
 
-      <q-pagination v-model="page" :max="17"></q-pagination>
+      <q-pagination @change="onChange" v-model="page" :max="17"></q-pagination>
 
       <p class="caption">Disabled State</p>
       <q-pagination v-model="page" :max="17" disable></q-pagination>
@@ -27,6 +27,11 @@ export default {
     return {
       page: 1
     }
+  },
+  methods: {
+    onChange (val) {
+      console.log('@change', val)
+    }
   }
 }
 </script>

dev/components/form/autocomplete.vue

@@ -7,7 +7,7 @@
       </p>
 
 
-      <q-search v-model="terms" placeholder="Start typing a country name">
+      <q-search @change="onChange" v-model="terms" placeholder="Start typing a country name">
         <q-autocomplete @search="search" @selected="selected" />
       </q-search>
 
@@ -108,6 +108,9 @@ export default {
     },
     selected (item) {
       Toast.create(`Selected suggestion "${item.label}"`)
+    },
+    onChange (val) {
+      console.log('@change', val)
     }
   }
 }

dev/components/form/checkbox.vue

@@ -10,7 +10,7 @@
       <q-checkbox v-model="checked" checked-icon="visibility" unchecked-icon="visibility_off" style="margin-left: 50px" />
 
       <br><br>
-      <q-checkbox v-model="checked" />
+      <q-checkbox @change="onChange" v-model="checked" />
       <br><br>
       <q-checkbox v-model="checked" label="Label" />
       <br><br>
@@ -35,11 +35,11 @@
         Model <span class="right-detail"><em>{{selection}}</em></span>
       </div>
 
-      <q-checkbox v-model="selection" val="one" label="One" />
+      <q-checkbox @change="onChange" v-model="selection" val="one" label="One" />
       <br><br>
-      <q-checkbox v-model="selection" val="two" label="Two" />
+      <q-checkbox @change="onChange" v-model="selection" val="two" label="Two" />
       <br><br>
-      <q-checkbox v-model="selection" val="three" label="Three" />
+      <q-checkbox @change="onChange" v-model="selection" val="three" label="Three" />
 
       <p class="caption">Disabled State</p>
       <q-checkbox v-model="checked" disable label="Disabled Checkbox" />
@@ -55,6 +55,7 @@
           type="checkbox"
           color="secondary"
           v-model="group"
+          @change="onChange"
           :options="[
             { label: 'Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 ', value: 'op2' },
             { label: 'Option 3', value: 'op3' },
@@ -72,6 +73,8 @@
         <q-option-group
           type="checkbox"
           v-model="group"
+          @focus="onFocus"
+          @blur="onBlur"
           :options="[
             { label: 'Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 ', value: 'op2' },
             { label: 'Option 3', value: 'op3' },
@@ -110,6 +113,14 @@
         </q-item>
       </q-list>
     </div>
+    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
+    <label for="jack">Jack</label>
+    <input type="checkbox" id="john" value="John" v-model="checkedNames">
+    <label for="john">John</label>
+    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" style="width:100px;height:100px;">
+    <label for="mike">Mike</label>
+    <br>
+    <span>Checked names: {{ checkedNames }}</span>
   </div>
 </template>
 
@@ -119,7 +130,19 @@ export default {
     return {
       checked: true,
       group: ['op2'],
-      selection: ['one', 'two', 'three']
+      selection: ['one', 'two', 'three'],
+      checkedNames: []
+    }
+  },
+  methods: {
+    onChange (val) {
+      console.log('@change', val)
+    },
+    onFocus () {
+      console.log('focused')
+    },
+    onBlur () {
+      console.log('blur')
     }
   }
 }

dev/components/form/chips-input.vue

@@ -12,7 +12,7 @@
         <span class="mobile-only">Tap</span>
         on Chips Textbox below to start adding Chips.
       </p>
-      <q-chips-input color="secondary" float-label="Float Label" v-model="model" placeholder="Some placeholder" />
+      <q-chips-input @change="onChange" color="secondary" float-label="Float Label" v-model="model" placeholder="Some placeholder" />
       <q-chips-input inverted color="dark" frame-color="amber" float-label="Float Label" v-model="model" placeholder="Some placeholder" />
 
       <div class="bg-grey-9" style="padding: 15px">
@@ -55,6 +55,11 @@ export default {
     return {
       model: ['Joe']
     }
+  },
+  methods: {
+    onChange (val) {
+      console.log('@change', val)
+    }
   }
 }
 </script>

dev/components/form/datetime-range.vue

@@ -29,7 +29,7 @@
       <p class="caption">
         Datetime Range
       </p>
-      <q-datetime-range type="datetime" v-model="first.range" :min="first.min" :max="first.max" />
+      <q-datetime-range @change="onChange" type="datetime" v-model="first.range" :min="first.min" :max="first.max" />
 
       <p class="caption">
         Datetime Range with Default Selection
@@ -106,6 +106,11 @@ export default {
         }
       }
     }
+  },
+  methods: {
+    onChange (val) {
+      console.log('@change', val.from, val.to)
+    }
   }
 }
 </script>

dev/components/form/datetime.vue

@@ -61,7 +61,7 @@
       <q-datetime v-model="model" type="time" format24h />
 
       <p class="caption">Date & Time</p>
-      <q-datetime v-model="model" type="datetime" />
+      <q-datetime @change="onChange" v-model="model" type="datetime" />
 
       <p class="caption">Default Selection</p>
       <q-datetime v-model="model" :default-selection="defaultSelection" type="datetime" />
@@ -100,7 +100,7 @@
             <q-datetime class="no-margin" v-model="model" type="date" />
           </q-item-main>
         </q-item>
-        <q-list-delimiter />
+        <q-item-delimiter />
         <q-list-header>Date & Time</q-list-header>
         <q-item>
           <q-item-side icon="notifications" />
@@ -149,7 +149,7 @@
       <q-inline-datetime v-model="model" type="time" format24h />
 
       <p class="caption">Date & Time</p>
-      <q-inline-datetime color="secondary" v-model="model" type="datetime" />
+      <q-inline-datetime @change="onChange" color="secondary" v-model="model" type="datetime" />
 
       <p class="caption">Date - Monday as First</p>
       <q-inline-datetime v-model="model" monday-first type="date" />
@@ -182,6 +182,11 @@ export default {
       min: date.subtractFromDate(day, {days: 5}),
       max: date.addToDate(day, {days: 4, month: 1, minutes: 10})
     }
+  },
+  methods: {
+    onChange (val) {
+      console.log('@change', val)
+    }
   }
 }
 </script>

dev/components/form/dialog-select.vue

@@ -2,9 +2,9 @@
   <div>
     <div class="layout-padding">
       <p class="caption">With Radios</p>
-      <q-dialog-select type="radio" v-model="select" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Radios"></q-dialog-select>
+      <q-dialog-select @change="onChange" type="radio" v-model="select" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Radios"></q-dialog-select>
       <p class="caption">With Checkboxes</p>
-      <q-dialog-select type="checkbox" v-model="multipleSelect" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Checkboxes"></q-dialog-select>
+      <q-dialog-select @change="onChange" type="checkbox" v-model="multipleSelect" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Checkboxes"></q-dialog-select>
       <p class="caption">With Toggles</p>
       <q-dialog-select type="toggle" v-model="multipleSelect" :options="selectOptions" ok-label="Pick" cancel-label="Neah" title="Toggles"></q-dialog-select>
 
@@ -18,7 +18,7 @@
       <q-dialog-select stack-label="Stack Label" type="radio" v-model="select" :options="selectOptions" static-label="Company"></q-dialog-select>
 
       <p class="caption">With Chips</p>
-      <q-dialog-select chips float-label="Float Label" type="checkbox" v-model="multipleSelect" :options="selectOptions" placeholder="Pick Company"></q-dialog-select>
+      <q-dialog-select @change="onChange" chips float-label="Float Label" type="checkbox" v-model="multipleSelect" :options="selectOptions" placeholder="Pick Company"></q-dialog-select>
 
       <p class="caption">Disabled State</p>
       <q-dialog-select disable type="radio" v-model="select" :options="selectOptions"></q-dialog-select>
@@ -93,6 +93,11 @@ export default {
         }
       ]
     }
+  },
+  methods: {
+    onChange (val) {
+      console.log('@change', val)
+    }
   }
 }
 </script>

dev/components/form/double-range.vue

@@ -8,7 +8,7 @@
           Model <span class="right-detail"><em>{{standalone.min}} to {{standalone.max}}</em> &nbsp;&nbsp;(0 to 50)</span>
         </span>
       </p>
-      <q-double-range v-model="standalone" :min="0" :max="50"></q-double-range>
+      <q-double-range @change="onChange" v-model="standalone" :min="0" :max="50"></q-double-range>
       <q-double-range v-model="standalone" :min="0" :max="50" square></q-double-range>
 
       <p class="caption">
@@ -163,6 +163,11 @@ export default {
         max: 35
       }
     }
+  },
+  methods: {
+    onChange (val) {
+      console.log('@change', val.min, val.max)
+    }
   }
 }
 </script>

dev/components/form/input.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="layout-padding input-example" style="max-width: 600px;">
-      <q-input v-model="text" />
+      <q-input @change="onChange" v-model="text" />
       <q-input v-model="text" stack-label="Stack Label" />
       <q-input v-model="text" float-label="Float Label" placeholder="Gigi" />
 
@@ -151,6 +151,11 @@ export default {
     length () {
       return this.text.length
     }
+  },
+  methods: {
+    onChange (val) {
+      console.log('@change', val)
+    }
   }
 }
 </script>

dev/components/form/knob.vue

@@ -10,6 +10,7 @@
         v-model="model"
         :min="min"
         :max="max"
+        @change="onChange"
       ></q-knob>
       <q-knob
         class="text-primary"
@@ -111,6 +112,11 @@ export default {
       min: 0,
       max: 50
     }
+  },
+  methods: {
+    onChange (val) {
+      console.log('@change', val)
+    }
   }
 }
 </script>