From 5dd038ff9adf0d4d2dbbdbeb68347e523da6f4f2 Mon Sep 17 00:00:00 2001
From: NitroRCr <havechicken666@gmail.com>
Date: Fri, 27 Sep 2024 18:07:41 +0800
Subject: [PATCH 1/2] feat(ui): add input event to QInput

---
 ui/playground/src/pages/form/input.vue        |  5 +++++
 ui/src/components/input/QInput.js             | 19 +++++++++++--------
 ui/src/components/input/QInput.json           | 10 ++++++++++
 .../private.use-field/use-field.js            |  4 +++-
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/ui/playground/src/pages/form/input.vue b/ui/playground/src/pages/form/input.vue
index cc260a629f8..8deedff2674 100644
--- a/ui/playground/src/pages/form/input.vue
+++ b/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>
diff --git a/ui/src/components/input/QInput.js b/ui/src/components/input/QInput.js
index 8e87a629021..6259e09ef24 100644
--- a/ui/src/components/input/QInput.js
+++ b/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
 
diff --git a/ui/src/components/input/QInput.json b/ui/src/components/input/QInput.json
index ecc9b138d75..325ac69b53e 100644
--- a/ui/src/components/input/QInput.json
+++ b/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 },
diff --git a/ui/src/composables/private.use-field/use-field.js b/ui/src/composables/private.use-field/use-field.js
index 850e755f147..7d29fdb615e 100644
--- a/ui/src/composables/private.use-field/use-field.js
+++ b/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(() => {

From c744cb6b6a9d89de82792e475457a05d139da513 Mon Sep 17 00:00:00 2001
From: NitroRCr <havechicken666@gmail.com>
Date: Fri, 27 Sep 2024 18:13:59 +0800
Subject: [PATCH 2/2] fix(ui/playground): fix select-part-7-text.vue

---
 ui/playground/src/pages/form/select-part-7-text.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/playground/src/pages/form/select-part-7-text.vue b/ui/playground/src/pages/form/select-part-7-text.vue
index 00dbbb633fc..9bec2c82be2 100644
--- a/ui/playground/src/pages/form/select-part-7-text.vue
+++ b/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>