Merge pull request #68 from dbssman/feature/66-add-error-message-component

🚨 Create error message component

Author: dbssman

docs/.vitepress/config.cts

@@ -110,6 +110,7 @@ export default defineConfig({
           },
           { text: `useFormContext`, link: '/api/use-form-context' },
           { text: `FormHandler`, link: '/api/form-handler' },
+          { text: `ErrorMessage`, link: '/api/error-message' },
         ],
       },
     ],

docs/api/error-message.md

@@ -0,0 +1,83 @@
+# \<ErrorMessage/>
+
+The `ErrorMessage` component is an utility Intended to be used right away, or wrapped for your customisation needs.
+
+Make sure you use `ErrorMessage` along with at least one of this situations:
+
+- With an existing handler instance in the current/previous levels of the component tree.
+- With a known formState
+
+Depending on your situation you might want to use the component in one of these two ways.
+
+## Explicit formState
+
+```vue
+<template @submit.prevent="handleSubmit(successFn)">
+  <form>
+    <form @submit.prevent="handleSubmit(successFn)">
+      <input v-bind="register('firstName', { required: true })" />
+      <ErrorMessage name="firstName" :form-state="formState">
+    </form>
+  </form>
+</template>
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
+
+const { handleSubmit, register, formState } = useFormHandler();
+
+const successFn = (form: Record<string, any>) => {
+  console.log({ form })
+}
+</script>
+```
+
+## Injected formState
+
+```vue
+<template @submit.prevent="handleSubmit(successFn)">
+  <form>
+    <form @submit.prevent="handleSubmit(successFn)">
+      <input v-bind="register('firstName', { required: true })" />
+      <ErrorMessage name="firstName">
+    </form>
+  </form>
+</template>
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
+
+const { handleSubmit, register } = useFormHandler();
+
+const successFn = (form: Record<string, any>) => {
+  console.log({ form })
+}
+</script>
+```
+
+:::warning
+Since for this approach, the component uses `useFormContext` internally, remember to pass the custom injectionKey in case you might be using some for your handler. i.e:
+
+```vue
+<template @submit.prevent="handleSubmit(successFn)">
+  <form>
+    <form @submit.prevent="handleSubmit(successFn)">
+      <input v-bind="register('firstName', { required: true })" />
+      <ErrorMessage name="firstName" :injection-key="injectionKey">
+    </form>
+  </form>
+</template>
+<script setup lang="ts">
+import { useFormHandler } from 'vue-form-handler'
+
+const injectionKey = Symbol('test')
+
+const { handleSubmit, register } = useFormHandler({
+    injectionKey
+});
+
+const successFn = (form: Record<string, any>) => {
+  console.log({ form })
+}
+</script>
+```
+
+:::

package-lock.json

@@ -0,0 +1,33 @@
+import { defineComponent, h } from 'vue'
+import { useFormContext } from './useFormContext'
+import { PropType, computed } from '@vue/runtime-core'
+import { FormState, InjectionKey } from './types'
+import { defaultInjectionKey } from './constants'
+
+export const ErrorMessage = defineComponent({
+  name: 'ErrorMessage',
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+    formState: {
+      type: Object as PropType<FormState>,
+    },
+    injectionKey: {
+      type: [String, Symbol] as PropType<InjectionKey>,
+      default: defaultInjectionKey,
+    },
+  },
+  setup(props) {
+    const usableFormState = computed(() =>
+      props.formState
+        ? props.formState
+        : useFormContext(props.injectionKey).formState
+    )
+    return () => {
+      const error = usableFormState.value.errors[props.name]
+      return error ? h('span', error) : null
+    }
+  },
+})

src/ErrorMessage.ts

@@ -1,4 +1,5 @@
 export * from './FormHandler'
+export * from './ErrorMessage'
 export * from './useFormHandler'
 export * from './useFormContext'
 export * from './types'

src/index.ts

@@ -0,0 +1,117 @@
+import { defineComponent } from '@vue/runtime-core'
+import { ErrorMessage } from '../ErrorMessage'
+import { useFormHandler } from '../useFormHandler'
+import { mount } from '@vue/test-utils'
+import { expect, it, describe } from 'vitest'
+
+describe('ErrorMessage', () => {
+  it('should mount', () => {
+    expect(ErrorMessage).toBeTruthy()
+
+    const { formState } = useFormHandler()
+    const wrapper = mount(ErrorMessage, {
+      props: {
+        name: 'test',
+        formState,
+      },
+    })
+    expect(wrapper.exists()).toBeTruthy()
+  })
+  it('should render nothing when no error', () => {
+    const { register, formState } = useFormHandler()
+    register('field')
+    const wrapper = mount(ErrorMessage, {
+      props: {
+        name: 'field',
+        formState,
+      },
+    })
+    expect(wrapper.html()).toBe('')
+  })
+  it('should render error when error', async () => {
+    const { register, formState, setError } = useFormHandler()
+    register('field')
+    setError('field', 'some error')
+    const wrapper = mount(ErrorMessage, {
+      props: {
+        name: 'field',
+        formState,
+      },
+    })
+    expect(wrapper.html()).toBe('<span>some error</span>')
+  })
+  it('should work with context', async () => {
+    const TestComponent = defineComponent({
+      template: `
+          <ErrorMessage name="hello" />
+          `,
+      components: {
+        ErrorMessage,
+      },
+      setup: () => {
+        useFormHandler()
+      },
+    })
+    const wrapper = mount(TestComponent)
+    expect(wrapper.html()).toBe('')
+  })
+  it('should work with context and error', async () => {
+    const TestComponent = defineComponent({
+      template: `
+          <ErrorMessage name="hello" />
+          `,
+      components: {
+        ErrorMessage,
+      },
+      setup: () => {
+        const { setError } = useFormHandler()
+        setError('hello', 'some error')
+      },
+    })
+    const wrapper = mount(TestComponent)
+    expect(wrapper.html()).toBe('<span>some error</span>')
+  })
+  it('should work with injection key', async () => {
+    const TestComponent = defineComponent({
+      template: `
+          <ErrorMessage name="hello" :injectionKey="injectionKey" />
+          `,
+      components: {
+        ErrorMessage,
+      },
+      setup: () => {
+        const injectionKey = Symbol('test')
+        useFormHandler({
+          injectionKey,
+        })
+        return {
+          injectionKey,
+        }
+      },
+    })
+    const wrapper = mount(TestComponent)
+    expect(wrapper.html()).toBe('')
+  })
+  it('should work with injection key and error', async () => {
+    const TestComponent = defineComponent({
+      template: `
+            <ErrorMessage name="hello" :injectionKey="injectionKey" />
+            `,
+      components: {
+        ErrorMessage,
+      },
+      setup: () => {
+        const injectionKey = Symbol('test')
+        const { setError } = useFormHandler({
+          injectionKey,
+        })
+        setError('hello', 'some error')
+        return {
+          injectionKey,
+        }
+      },
+    })
+    const wrapper = mount(TestComponent)
+    expect(wrapper.html()).toBe('<span>some error</span>')
+  })
+})