feat(ui): add input event to QInput

ui/playground/src/pages/form/input.vue

@@ -23,6 +23,11 @@
       </div>
       <q-input class="gigi" v-bind="props" outlined :model-value="text" @change="val => { text = val }" label="Label" label-color="green" />
 
+      <div class="text-h6">
+        Always (@input)
+      </div>
+      <q-input class="gigi" v-bind="props" outlined :model-value="text" @input="val => { text = val }" label="Label" label-color="green" />
+
       <div class="text-h6">
         Standard
       </div>

ui/playground/src/pages/form/select-part-7-text.vue

@@ -23,7 +23,7 @@
         fill-input
         hide-selected
         @filter="filterOptions"
-        @update:model-value-value="val => { model = val }"
+        @update:model-value="val => { model = val }"
       >
         <template v-slot:no-option>
           <q-item>

ui/src/components/input/QInput.js

@@ -43,7 +43,7 @@ export default createComponent({
 
   emits: [
     ...useFieldEmits,
-    'paste', 'change',
+    'paste', 'change', 'input',
     'keydown', 'click', 'animationend'
   ],
 
@@ -71,7 +71,7 @@ export default createComponent({
 
     const onComposition = useKeyComposition(onInput)
 
-    const state = useFieldState({ changeEvent: true })
+    const state = useFieldState({ changeEvent: true, inputEvent: true })
 
     const isTextarea = computed(() =>
       props.type === 'textarea' || props.autogrow === true
@@ -225,21 +225,22 @@ export default createComponent({
 
       if (props.type === 'file') {
         emit('update:modelValue', e.target.files)
+        emit('input', e.target.files)
         return
       }
 
       const val = e.target.value
 
-      if (e.target.qComposing === true) {
-        temp.value = val
-
-        return
-      }
-
       if (hasMask.value === true) {
         updateMaskValue(val, false, e.inputType)
       }
       else {
+        if (e.target.qComposing === true) {
+          temp.value = val
+          emit('input', val)
+
+          return
+        }
         emitValue(val)
 
         if (isTypeText.value === true && e.target === document.activeElement) {
@@ -266,6 +267,8 @@ export default createComponent({
     }
 
     function emitValue (val, stopWatcher) {
+      emit('input', val)
+
       emitValueFn = () => {
         emitTimer = null
 

ui/src/components/input/QInput.json

@@ -85,6 +85,16 @@
         }
       }
     },
+    "input": {
+      "desc": "Emitted when inputs new value; Also emitted during IME composition process; No debounce",
+      "params": {
+        "value": {
+          "type": [ "String", "null" ],
+          "desc": "New input value",
+          "required": true
+        }
+      }
+    },
 
     "click": { "internal": true },
     "paste": { "internal": true },

ui/src/composables/private.use-field/use-field.js

@@ -71,7 +71,7 @@ export const useFieldProps = {
 
 export const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur' ]
 
-export function useFieldState ({ requiredForAttr = true, tagProp, changeEvent = false } = {}) {
+export function useFieldState ({ requiredForAttr = true, tagProp, changeEvent = false, inputEvent = false } = {}) {
   const { props, proxy } = getCurrentInstance()
 
   const isDark = useDark(props, proxy.$q)
@@ -83,6 +83,7 @@ export function useFieldState ({ requiredForAttr = true, tagProp, changeEvent =
   return {
     requiredForAttr,
     changeEvent,
+    inputEvent,
     tag: tagProp === true
       ? computed(() => props.tag)
       : { value: 'label' },
@@ -345,6 +346,7 @@ export default function (state) {
 
     emit('update:modelValue', null)
     state.changeEvent === true && emit('change', null)
+    state.inputEvent === true && emit('input', null)
     emit('clear', props.modelValue)
 
     nextTick(() => {