feat: added validateOn prop to text control

Author: logaretm

packages/core/src/useTextField/types.ts

@@ -1,8 +1,10 @@
+import { EventExpression } from '../helpers/useEventListener';
 import { StandardSchema } from '../types';
 import {
   AriaDescribableProps,
   AriaLabelableProps,
   AriaValidatableProps,
+  Arrayable,
   InputEvents,
   Numberish,
   TextInputBaseAttributes,
@@ -94,4 +96,9 @@ export interface TextControlProps {
    * Whether to disable HTML5 validation.
    */
   disableHtmlValidation?: TransparentWrapper<boolean>;
+
+  /**
+   * Events to validate on.
+   */
+  validateOn?: Arrayable<EventExpression>;
 }

packages/core/src/useTextField/useTextControl.ts

@@ -1,6 +1,6 @@
 import { shallowRef, toValue } from 'vue';
 import { InputEvents, Reactivify } from '../types';
-import { propsToValues, useCaptureProps } from '../utils/common';
+import { normalizeProps, propsToValues, useCaptureProps } from '../utils/common';
 import { TextControlProps } from './types';
 import { useInputValidity } from '../validation';
 import { FieldState, useFieldStateInjection } from '../useFieldState';
@@ -12,13 +12,19 @@ interface FormControlContext {
   state?: FieldState<string | undefined>;
 }
 
-export function useTextControl(props: Reactivify<TextControlProps>, ctx?: FormControlContext) {
+export function useTextControl(_props: Reactivify<TextControlProps>, ctx?: FormControlContext) {
   const inputEl = shallowRef<HTMLInputElement>();
+  const props = normalizeProps(_props);
   const field = ctx?.field ?? useFormFieldInjection();
   const state = ctx?.state ?? useFieldStateInjection<string | undefined>();
 
   if (state) {
-    useInputValidity({ inputEl, field: state, disableHtmlValidation: props.disableHtmlValidation });
+    useInputValidity({
+      inputEl,
+      field: state,
+      disableHtmlValidation: props.disableHtmlValidation,
+      events: () => toValue(props.validateOn) ?? ['change', 'blur'],
+    });
   }
 
   if (field) {

packages/playground/src/App.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import FormField from './components/FormField.vue';
 import TextControl from './components/TextControl.vue';
+
+const validationOn = ref(['test']);
 </script>
 
 <template>
   <FormField label="Name">
-    <TextControl required />
+    <TextControl required :validate-on="validationOn" />
+
+    <button @click="validationOn.push('blur')">Add blur</button>
+    {{ validationOn }}
   </FormField>
 </template>