docs: added some input test cases

Author: mtorromeo

apps/docs/src/stories/Components/TextInput.story.vue

@@ -10,6 +10,10 @@
       <pf-text-input v-model="text1" aria-label="text input example" />
     </story-canvas>
 
+    <story-canvas title="Numeric">
+      <pf-text-input v-model="number1" type="number" aria-label="text input example" />
+    </story-canvas>
+
     <story-canvas title="Disabled">
       <pf-text-input
         disabled
@@ -101,9 +105,10 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, type Ref } from "vue";
 import ClockIcon from '@vue-patternfly/icons/clock-icon';
 
-const text1 = ref('');
+const text1: Ref<string | null> = ref(null);
 const text2 = ref('');
+const number1 = ref(0);
 </script>

packages/core/src/components/TextInput.vue

@@ -115,8 +115,8 @@ const {
   value,
   effectiveValidated,
   onBlur,
-  onChange,
-  onInput,
+  onChange: commonOnChange,
+  onInput: commonOnInput,
   onInvalid,
   onKeyUp,
   ...inputValidationData
@@ -134,6 +134,30 @@ function focus() {
   input.value?.focus();
 }
 
+function onChange(event: Event) {
+  if (!input.value) {
+    return;
+  }
+  const value = input.value.value;
+  if (props.type === 'number') {
+    commonOnChange(event, value ? parseFloat(value) : null);
+  } else {
+    commonOnChange(event, value);
+  }
+}
+
+function onInput(event: InputEvent) {
+  if (!input.value) {
+    return;
+  }
+  const value = input.value.value;
+  if (props.type === 'number') {
+    commonOnInput(event, value ? parseFloat(value) : null);
+  } else {
+    commonOnInput(event, value);
+  }
+}
+
 defineExpose({
   ...inputValidationData,
   input,

packages/core/src/input.ts

@@ -108,10 +108,10 @@ export function useInputValidation({
     reportValidity,
     setCustomValidity,
 
-    onInput(event: InputEvent) {
+    onInput(event: InputEvent, value?: any) {
       instance?.$emit('input', event);
       if (!modifiers.lazy) {
-        value.value = (event.target as InputElement).value;
+        value.value = value ?? (event.target as InputElement).value;
       }
       if (autoValidate === 'input') {
         reportValidity();
@@ -129,10 +129,10 @@ export function useInputValidation({
       }
     },
 
-    onChange(event: Event) {
+    onChange(event: Event, value?: any) {
       instance?.$emit('change', event);
       if (modifiers.lazy) {
-        value.value = (event.target as InputElement).value;
+        value.value = value ?? (event.target as InputElement).value;
       }
       if (autoValidate === 'change') {
         reportValidity();