feat: use handle blur correct

Kevin Szymura · Kevin Szymura · commit de9a0265ec96 · 2024-03-04T23:08:31.000+01:00
diff --git a/src/components/PrimeAutoComplete.vue b/src/components/PrimeAutoComplete.vue
@@ -22,6 +22,10 @@ function handleInput(e: any) {
   context?.node.input(props.context?._value)
 }
 
+const handleBlur = (event: Event) => {
+  context?.handlers.blur(event);
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -37,6 +41,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :suggestions="suggestions"
       @complete="search"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>
diff --git a/src/components/PrimeCheckbox.vue b/src/components/PrimeCheckbox.vue
@@ -16,6 +16,10 @@ function handleInput(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -32,6 +36,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :input-class="styleClass"
       :binary="attrs.binary ?? true"
       @change="handleInput"
+      @blur="handleBlur"
     />
     <span v-if="context.attrs.labelRight" class="formkit-prime-right">{{ context.attrs.labelRight }}</span>
   </div>
diff --git a/src/components/PrimeInputMask.vue b/src/components/PrimeInputMask.vue
@@ -12,9 +12,9 @@ const props = defineProps({
 const context = props.context
 const attrs = computed(() => context?.attrs)
 
-function handleInput(e: any) {
+function handleInput(e: Event) {
   context?.node.input(props.context?._value)
-  context?.handlers.blur(props.context?._value)
+  context?.handlers.blur(e)
 }
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
diff --git a/src/components/PrimeInputSwitch.vue b/src/components/PrimeInputSwitch.vue
@@ -15,6 +15,11 @@ const attrs = computed(() => context?.attrs)
 function handleInput(e: any) {
   context?.node.input(props.context?._value)
 }
+
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -30,6 +35,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :input-style="attrs.style"
       :input-class="styleClass"
       @change="handleInput"
+      @blur='handleBlur'
     />
     <span v-if="context.attrs.labelRight" class="formkit-prime-right">{{ context.attrs.labelRight }}</span>
   </div>
diff --git a/src/components/PrimeListbox.vue b/src/components/PrimeListbox.vue
@@ -16,6 +16,10 @@ function handleInput(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -30,6 +34,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :class="styleClass"
       :unstyled="attrs.unstyled ?? false"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>
diff --git a/src/components/PrimePassword.vue b/src/components/PrimePassword.vue
@@ -12,8 +12,8 @@ const props = defineProps({
 const context = props.context
 const attrs = computed(() => context?.attrs)
 
-function handleBlur(e: any) {
-  context?.handlers.blur(e.target.value)
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
 }
 
 function handleInput(e: any) {
diff --git a/src/components/PrimeRadioButton.vue b/src/components/PrimeRadioButton.vue
@@ -16,6 +16,10 @@ function handleChange(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -33,6 +37,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
         :input-class="styleClass"
         @click="handleChange"
         @change="handleChange"
+        @blur="handleChange"
       />
       <label :for="option.value">{{ option.label }}</label>
     </div>
diff --git a/src/components/PrimeRating.vue b/src/components/PrimeRating.vue
@@ -16,6 +16,10 @@ function handleInput(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -32,6 +36,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :off-icon="attrs.offIcon ?? 'pi pi-star'"
       :cancel="attrs.cancel ?? false"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>
diff --git a/src/components/PrimeSelectButton.vue b/src/components/PrimeSelectButton.vue
@@ -16,6 +16,10 @@ function handleChange(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -29,6 +33,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :style="attrs.style"
       :class="styleClass"
       @change="handleChange"
+      @blur="handleBlur"
     />
   </div>
 </template>
diff --git a/src/components/PrimeSlider.vue b/src/components/PrimeSlider.vue
@@ -16,6 +16,11 @@ function handleInput(e: any) {
   context?.node.input(e)
   context?.handlers.blur(e)
 }
+
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -29,6 +34,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :style="attrs.style"
       :class="styleClass"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>
diff --git a/src/components/PrimeTextarea.vue b/src/components/PrimeTextarea.vue
@@ -12,8 +12,8 @@ const props = defineProps({
 const context = props.context
 const attrs = computed(() => context?.attrs)
 
-function handleBlur(e: any) {
-  context?.handlers.blur(e.target.value)
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
 }
 
 function handleInput(e: any) {
diff --git a/src/components/PrimeToggleButton.vue b/src/components/PrimeToggleButton.vue
@@ -15,6 +15,11 @@ const attrs = computed(() => context?.attrs)
 function handleChange(e: any) {
   context?.node.input(props.context?._value)
 }
+
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -31,6 +36,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :on-icon="context.onIcon ?? 'pi pi-check'"
       :off-icon="context.offIcon ?? 'pi pi-times'"
       @change="handleChange"
+      @blur="handleBlur"
     />
   </div>
 </template>
diff --git a/src/components/PrimeTreeSelect.vue b/src/components/PrimeTreeSelect.vue
@@ -16,6 +16,10 @@ function handleInput(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -30,6 +34,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :input-style="attrs.style"
       :input-class="styleClass"
       @change="handleInput"
+      @blur="handleBlur"
     />
   </div>
 </template>
diff --git a/src/components/PrimeTriStateCheckbox.vue b/src/components/PrimeTriStateCheckbox.vue
@@ -16,6 +16,10 @@ function handleChange(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -31,6 +35,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :input-style="attrs.style"
       :input-class="styleClass"
       @change="handleChange"
+      @blur="handleBlur"
     />
     <span v-if="context.attrs.labelRight" class="formkit-prime-right">{{ context.attrs.labelRight }}</span>
   </div>
diff --git a/src/formkit/PrimeCalendar.vue b/src/formkit/PrimeCalendar.vue
@@ -22,7 +22,7 @@ function handleSelect(e: any) {
 }
 
 function handleBlur(e: CalendarBlurEvent) {
-  context?.handlers.blur(e.value)
+  context?.handlers.blur(e.originalEvent)
 }
 
 function handleClearClick() {
diff --git a/src/formkit/PrimeDropdown.vue b/src/formkit/PrimeDropdown.vue
@@ -12,8 +12,8 @@ const props = defineProps({
 const context = props.context
 const attrs = computed(() => context?.attrs)
 
-function handleBlur(e: any) {
-  context?.handlers.blur(e.value)
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
 }
 function handleInput(e: any) {
   context?.node.input(e.value)
diff --git a/src/formkit/PrimeInputNumber.vue b/src/formkit/PrimeInputNumber.vue
@@ -1,6 +1,7 @@
 <script setup lang='ts'>
 import { type PropType, computed } from 'vue';
 import { type FormKitFrameworkContext } from '@formkit/core';
+import { InputNumberBlurEvent } from 'primevue/inputnumber'
 
 const props = defineProps({
   context: {
@@ -12,8 +13,8 @@ const props = defineProps({
 const context = props.context
 const attrs = computed(() => context?.attrs)
 
-function handleBlur(e: any) {
-  context?.handlers.blur(e.value)
+function handleBlur(e: InputNumberBlurEvent) {
+  context?.handlers.blur(e.originalEvent)
 }
 
 function handleInput(e: any) {
diff --git a/src/formkit/PrimeInputText.vue b/src/formkit/PrimeInputText.vue
@@ -29,8 +29,8 @@ function spanClass() {
   return result
 }
 
-function handleBlur(e: any) {
-  context?.handlers.blur(e.target.value)
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
 }
 
 function handleInput(e: any) {
diff --git a/src/formkit/PrimeListbox.vue b/src/formkit/PrimeListbox.vue
@@ -16,6 +16,10 @@ function handleInput(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -46,6 +50,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :pt-options="attrs.ptOptions"
       :unstyled="attrs.unstyled ?? false"
       @change="handleInput"
+      @blur='handleBlur'
     />
   </div>
 </template>
diff --git a/src/formkit/PrimeMultiSelect.vue b/src/formkit/PrimeMultiSelect.vue
@@ -16,6 +16,10 @@ function handleChange(e: any) {
   context?.node.input(props.context?._value)
 }
 
+function handleBlur(e: Event) {
+  context?.handlers.blur(e)
+}
+
 const styleClass = computed(() => (context?.state.validationVisible && !context?.state.valid) ? `${attrs.value?.class} p-invalid` : attrs.value?.class)
 </script>
 
@@ -68,6 +72,7 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
       :pt-options="attrs.ptOptions"
       :unstyled="attrs.unstyled ?? false"
       @change="handleChange"
+      @blur="handleBlur"
     />
   </div>
 </template>

Original file line number	Diff line number	Diff line change
`@@ -12,8 +12,8 @@ const props = defineProps({`
`12`	`12`	`const context = props.context`
`13`	`13`	`const attrs = computed(() => context?.attrs)`
`14`	`14`
`15`		`-function handleBlur(e: any) {`
`16`		`- context?.handlers.blur(e.target.value)`
	`15`	`+function handleBlur(e: Event) {`
	`16`	`+ context?.handlers.blur(e)`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`function handleInput(e: any) {`