feat(Form): add validate-on error-input

Adds `error-input` option to the validate on prop to validate on input
only when the field has an error.

Resolves #2599

test/components/Checkbox.spec.ts

@@ -4,7 +4,7 @@ import ComponentRender from '../component-render'
 import theme from '#build/ui/checkbox'
 import { renderForm } from '../utils/form'
 import { mount, flushPromises } from '@vue/test-utils'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 
 describe('Checkbox', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -58,7 +58,7 @@ describe('Checkbox', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/CheckboxGroup.spec.ts

@@ -5,7 +5,7 @@ import theme from '#build/ui/checkbox-group'
 import themeCheckbox from '#build/ui/checkbox'
 import { flushPromises, mount } from '@vue/test-utils'
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 
 describe('CheckboxGroup', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -65,7 +65,7 @@ describe('CheckboxGroup', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/Input.spec.ts

@@ -4,8 +4,8 @@ import Input, { type InputProps, type InputSlots } from '../../src/runtime/compo
 import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
 
+import type { FormValidateOn } from '~/src/module'
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
 
 describe('Input', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -104,7 +104,7 @@ describe('Input', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[], eagerValidation?: boolean) {
+    async function createForm(validateOn?: FormValidateOn[], eagerValidation?: boolean) {
       const wrapper = await renderForm({
         props: {
           validateOn,
@@ -160,6 +160,18 @@ describe('Input', () => {
       expect(wrapper.text()).not.toContain('Error message')
     })
 
+    test('validate on error-input works', async () => {
+      const { input, wrapper } = await createForm(['error-input', 'blur'], true)
+      await input.setValue('value')
+      expect(wrapper.text()).not.toContain('Error message')
+
+      await input.trigger('blur')
+      expect(wrapper.text()).toContain('Error message')
+
+      await input.setValue('valid')
+      expect(wrapper.text()).not.toContain('Error message')
+    })
+
     test('validate on input without eager validation works', async () => {
       const { input, wrapper } = await createForm(['input'])
 

test/components/InputMenu.spec.ts

@@ -4,7 +4,7 @@ import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
 import { renderForm } from '../utils/form'
 import { flushPromises, mount } from '@vue/test-utils'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 import { expectEmitPayloadType } from '../utils/types'
 
 describe('InputMenu', () => {
@@ -110,7 +110,7 @@ describe('InputMenu', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/InputNumber.spec.ts

@@ -5,7 +5,7 @@ import { reactive } from 'vue'
 import InputNumber, { type InputNumberProps, type InputNumberSlots } from '../../src/runtime/components/InputNumber.vue'
 import ComponentRender from '../component-render'
 import theme from '#build/ui/input-number'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 import { renderForm } from '../utils/form'
 
 describe('InputNumber', () => {
@@ -61,7 +61,7 @@ describe('InputNumber', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         state: reactive({ value: 0 }),
         props: {

test/components/PinInput.spec.ts

@@ -5,7 +5,7 @@ import ComponentRender from '../component-render'
 import theme from '#build/ui/pin-input'
 
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 
 describe('PinInput', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -65,7 +65,7 @@ describe('PinInput', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/RadioGroup.spec.ts

@@ -4,7 +4,7 @@ import ComponentRender from '../component-render'
 import theme from '#build/ui/radio-group'
 import { flushPromises, mount } from '@vue/test-utils'
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 
 describe('RadioGroup', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -67,7 +67,7 @@ describe('RadioGroup', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/Select.spec.ts

@@ -4,7 +4,7 @@ import Select, { type SelectProps, type SelectSlots } from '../../src/runtime/co
 import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 import { expectEmitPayloadType } from '../utils/types'
 
 describe('Select', () => {
@@ -107,7 +107,7 @@ describe('Select', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/SelectMenu.spec.ts

@@ -4,7 +4,7 @@ import ComponentRender from '../component-render'
 import theme from '#build/ui/input'
 import { renderForm } from '../utils/form'
 import { flushPromises, mount } from '@vue/test-utils'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 import { expectEmitPayloadType } from '../utils/types'
 
 describe('SelectMenu', () => {
@@ -113,7 +113,7 @@ describe('SelectMenu', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/Slider.spec.ts

@@ -4,7 +4,7 @@ import ComponentRender from '../component-render'
 import theme from '#build/ui/slider'
 import { flushPromises, mount } from '@vue/test-utils'
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 
 describe('Slider', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -52,7 +52,7 @@ describe('Slider', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/Switch.spec.ts

@@ -4,7 +4,7 @@ import ComponentRender from '../component-render'
 import theme from '#build/ui/switch'
 import { flushPromises, mount } from '@vue/test-utils'
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 
 describe('Switch', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -55,7 +55,7 @@ describe('Switch', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[]) {
+    async function createForm(validateOn?: FormValidateOn[]) {
       const wrapper = await renderForm({
         props: {
           validateOn,

test/components/Textarea.spec.ts

@@ -4,7 +4,7 @@ import Textarea, { type TextareaProps, type TextareaSlots } from '../../src/runt
 import ComponentRender from '../component-render'
 import theme from '#build/ui/textarea'
 import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
+import type { FormValidateOn } from '~/src/module'
 
 describe('Textarea', () => {
   const sizes = Object.keys(theme.variants.size) as any
@@ -107,7 +107,7 @@ describe('Textarea', () => {
   })
 
   describe('form integration', async () => {
-    async function createForm(validateOn?: FormInputEvents[], eagerValidation?: boolean) {
+    async function createForm(validateOn?: FormValidateOn[], eagerValidation?: boolean) {
       const wrapper = await renderForm({
         props: {
           validateOn,