feat(Textarea, TextInput): added support for number, trim and lazy v-model modifiers

mtorromeo · mtorromeo · commit 4fb918ea6bef · 2025-08-18T17:43:22.000+02:00
diff --git a/apps/docs/src/stories/Components/TextInput.story.vue b/apps/docs/src/stories/Components/TextInput.story.vue
@@ -8,10 +8,27 @@
 
     <story-canvas title="Basic">
       <pf-text-input v-model="text1" aria-label="text input example" />
+      <pre>Value: {{ JSON.stringify(text1) }}</pre>
     </story-canvas>
 
     <story-canvas title="Numeric">
       <pf-text-input v-model="number1" type="number" aria-label="text input example" />
+      <pre>Value: {{ JSON.stringify(number1) }}</pre>
+    </story-canvas>
+
+    <story-canvas title="Number modifier">
+      <pf-text-input v-model.number="number2" aria-label="text input example" />
+      <pre>Value: {{ JSON.stringify(number2) }}</pre>
+    </story-canvas>
+
+    <story-canvas title="Trim modifier">
+      <pf-text-input v-model.trim="text2" aria-label="text input example" />
+      <pre>Value: {{ JSON.stringify(text2) }}</pre>
+    </story-canvas>
+
+    <story-canvas title="Lazy modifier">
+      <pf-text-input v-model.lazy="text3" aria-label="text input example" />
+      <pre>Value: {{ JSON.stringify(text3) }}</pre>
     </story-canvas>
 
     <story-canvas title="Disabled">
@@ -56,7 +73,7 @@
       />
       <br>
       <pf-text-input
-        v-model="text2"
+        v-model="text4"
         required
         pattern="[0-9a-f]*"
         placeholder="hexadecimal value (validates on change)"
@@ -110,5 +127,8 @@ import ClockIcon from '@vue-patternfly/icons/clock-icon';
 
 const text1: Ref<string | null> = ref(null);
 const text2 = ref('');
+const text3 = ref('');
+const text4 = ref('');
 const number1 = ref(0);
+const number2 = ref(0);
 </script>
diff --git a/packages/core/src/components/TextInput.vue b/packages/core/src/components/TextInput.vue
@@ -38,9 +38,7 @@
 </template>
 
 <script lang="ts">
-export type InputType = 'text' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url' | 'week';
-
-export interface Props<T extends InputType = 'text'> extends OUIAProps, /* @vue-ignore */ Omit<InputHTMLAttributes, 'value' | 'type' | 'aria-invalid'> {
+export interface Props<T extends InputType = 'text', N extends boolean = false> extends OUIAProps, /* @vue-ignore */ Omit<InputHTMLAttributes, 'value' | 'type' | 'aria-invalid'> {
   /** Flag to show if the text input is disabled. */
   disabled?: boolean;
   /** Flag to apply expanded styling */
@@ -57,6 +55,11 @@ export interface Props<T extends InputType = 'text'> extends OUIAProps, /* @vue-
   type?: T;
   /** Value of the text input. */
   modelValue?: string | number | null;
+  modelModifiers?: {
+    number?: N;
+    trim?: boolean;
+    lazy?: boolean;
+  };
   /** Aria-label. The text input requires an associated id or aria-label. */
   ariaLabel?: string;
   /** Trim text at start */
@@ -67,11 +70,11 @@ export interface Props<T extends InputType = 'text'> extends OUIAProps, /* @vue-
 }
 </script>
 
-<script lang="ts" setup generic="T extends InputType = 'text'">
+<script lang="ts" setup generic="T extends InputType = 'text', N extends boolean = false">
 import { computed, toRefs, type InputHTMLAttributes, getCurrentInstance, useTemplateRef } from 'vue';
 import { useChildrenTracker } from '../use';
 import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
-import { useInputValidation, type InputValidateState } from '../input';
+import { useInputValidation, type InputType, type InputValidateState } from '../input';
 import { FormGroupInputsKey, FormInputsKey } from './Form/common';
 import { useOUIAProps, type OUIAProps } from '../helpers/ouia';
 import PfFormControlIcon from './FormControlIcon.vue';
@@ -81,7 +84,7 @@ defineOptions({
   inheritAttrs: false,
 });
 
-const props = withDefaults(defineProps<Props<T>>(), {
+const props = withDefaults(defineProps<Props<T, N>>(), {
   autoValidate: true,
   modelValue: undefined,
 });
@@ -94,7 +97,7 @@ defineEmits<{
   (name: 'input', event: Event): void;
   (name: 'invalid', event: Event): void;
   (name: 'keyup', event: KeyboardEvent): void;
-  (name: 'update:modelValue', value: T extends 'number' ? number : string): void;
+  (name: 'update:modelValue', value: N extends true ? number : (T extends 'number' ? number : string)): void;
   (name: 'update:validated', value: InputValidateState): void;
 }>();
 
@@ -113,14 +116,15 @@ const {
   effectiveValidated,
   onBlur,
   onChange,
-  onInput: commonOnInput,
+  onInput,
   onInvalid,
   onKeyUp,
   ...inputValidationData
 } = useInputValidation({
   inputElement: input,
   autoValidate: props.autoValidate,
   validated: validated,
+  type: props.type,
 });
 
 useChildrenTracker(FormInputsKey, getCurrentInstance()?.proxy);
@@ -130,18 +134,6 @@ function focus() {
   input.value?.focus();
 }
 
-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,
diff --git a/packages/core/src/components/Textarea.vue b/packages/core/src/components/Textarea.vue
@@ -38,22 +38,9 @@
   </span>
 </template>
 
-<script lang="ts" setup>
-import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
-
-import { computed, onMounted, toRefs, type TextareaHTMLAttributes, getCurrentInstance, useTemplateRef } from 'vue';
-import { useInputValidation } from '../input';
-import { useChildrenTracker } from '../use';
-import { FormGroupInputsKey, FormInputsKey } from './Form/common';
-import { useOUIAProps, type OUIAProps } from '../helpers/ouia';
-import PfFormControlIcon from './FormControlIcon.vue';
 
-defineOptions({
-  name: 'PfTextarea',
-  inheritAttrs: false,
-});
-
-export interface Props extends OUIAProps, /* @vue-ignore */ Omit<TextareaHTMLAttributes, 'value' | 'aria-invalid'> {
+<script lang="ts">
+export interface Props<N extends boolean = false> extends OUIAProps, /* @vue-ignore */ Omit<TextareaHTMLAttributes, 'value' | 'aria-invalid'> {
   /** Flag to show if the text area is disabled. */
   disabled?: boolean;
 
@@ -75,6 +62,11 @@ export interface Props extends OUIAProps, /* @vue-ignore */ Omit<TextareaHTMLAtt
 
   /** Value of the text area. */
   modelValue?: string | number | null;
+  modelModifiers?: {
+    number?: N;
+    trim?: boolean;
+    lazy?: boolean;
+  };
 
   /** Value to indicate if the text area is modified to show that validation state.
    * If set to success, text area will be modified to indicate valid state.
@@ -90,8 +82,24 @@ export interface Props extends OUIAProps, /* @vue-ignore */ Omit<TextareaHTMLAtt
   /** Maximum width */
   maxWidth?: string;
 }
+</script>
+
+<script lang="ts" setup generic="N extends boolean = false">
+import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
+
+import { computed, onMounted, toRefs, type TextareaHTMLAttributes, getCurrentInstance, useTemplateRef } from 'vue';
+import { useInputValidation } from '../input';
+import { useChildrenTracker } from '../use';
+import { FormGroupInputsKey, FormInputsKey } from './Form/common';
+import { useOUIAProps, type OUIAProps } from '../helpers/ouia';
+import PfFormControlIcon from './FormControlIcon.vue';
+
+defineOptions({
+  name: 'PfTextarea',
+  inheritAttrs: false,
+});
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props<N>>(), {
   resizeOrientation: 'both',
   autoValidate: true,
   modelValue: undefined,
@@ -105,7 +113,7 @@ defineEmits<{
   (name: 'input', event: Event): void;
   (name: 'invalid', event: Event): void;
   (name: 'keyup', event: KeyboardEvent): void;
-  (name: 'update:modelValue', value: string): void;
+  (name: 'update:modelValue', value: N extends true ? number : string): void;
   (name: 'update:validated', value: 'success' | 'warning' | 'error' | 'default'): void;
 }>();
 
diff --git a/packages/core/src/input.ts b/packages/core/src/input.ts
@@ -3,16 +3,19 @@ import { onMounted } from "vue";
 
 export type InputValidateState = 'success' | 'warning' | 'error' | 'default';
 type InputElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+export type InputType = 'text' | 'date' | 'datetime-local' | 'email' | 'month' | 'number' | 'password' | 'search' | 'tel' | 'time' | 'url' | 'week';
 
 export function useInputValidation({
   autoValidate,
   validated,
   inputElement,
+  type,
   customCheckValidity,
 }: {
   autoValidate: '' | 'blur' | 'input' | 'change' | 'enter' | boolean;
   validated?: Ref<InputValidateState | undefined>;
   inputElement?: MaybeRef<InputElement | null>;
+  type?: InputType;
   customCheckValidity?: () => boolean;
 }) {
   const instance = getCurrentInstance()?.proxy;
@@ -21,7 +24,16 @@ export function useInputValidation({
   const effectiveValidated = computed(() => validated?.value ?? innerValidated.value);
   watch(effectiveValidated, () => instance?.$emit('update:validated', effectiveValidated.value));
 
-  const value = useModel((instance?.$props ?? {}) as { modelValue?: string | number | null }, 'modelValue');
+  const [value, modifiers] = useModel((instance?.$props ?? {}) as { modelValue?: string | number | null }, 'modelValue', {
+    get: (v) => v,
+    set: (v) => {
+      // force number cast unlike default number modifier
+      if (modifiers.number || type === 'number') {
+        return Number(v) as any;
+      }
+      return String(v) as any;
+    },
+  });
 
   function getInput() {
     return unref(inputElement) ?? (instance?.$el as InputElement | undefined);
@@ -96,9 +108,11 @@ export function useInputValidation({
     reportValidity,
     setCustomValidity,
 
-    onInput(event: InputEvent, value?: any) {
+    onInput(event: InputEvent) {
       instance?.$emit('input', event);
-      value.value = value ?? (event.target as InputElement).value;
+      if (!modifiers.lazy) {
+        value.value = (event.target as InputElement).value;
+      }
       if (autoValidate === 'input') {
         reportValidity();
       } else {
@@ -117,6 +131,9 @@ export function useInputValidation({
 
     onChange(event: Event) {
       instance?.$emit('change', event);
+      if (modifiers.lazy) {
+        value.value = (event.target as InputElement).value;
+      }
       if (autoValidate === 'change') {
         reportValidity();
       }
