feat(Form): new component (#4)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/components/FormField.vue

@@ -0,0 +1,132 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/formField'
+
+const appConfig = _appConfig as AppConfig & { ui: { formField: Partial<typeof theme> } }
+
+const formField = tv({ extend: tv(theme), ...(appConfig.ui?.formField || {}) })
+
+type FormFieldVariants = VariantProps<typeof formField>
+
+export interface FormFieldProps {
+  name?: string
+  label?: string
+  description?: string
+  help?: string
+  error?: string
+  hint?: string
+  size?: FormFieldVariants['size']
+  required?: boolean
+  eagerValidation?: boolean
+  validateOnInputDelay?: number
+  class?: any
+  ui?: Partial<typeof formField.slots>
+}
+
+export interface FormFieldSlots {
+  label(props: { label?: string }): any
+  hint(props: { hint?: string }): any
+  description(props: { description?: string }): any
+  error(props: { error?: string }): any
+  help(props: { help?: string }): any
+  default(props: { error?: string }): any
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, inject, provide, type Ref } from 'vue'
+import type { FormError, InjectedFormFieldOptions } from '../types/form'
+import { useId } from '#imports'
+
+const props = defineProps<FormFieldProps>()
+defineSlots<FormFieldSlots>()
+
+const ui = computed(() => tv({ extend: formField, slots: props.ui })({
+  size: props.size,
+  required: props.required
+}))
+
+const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)
+
+const error = computed(() => {
+  return (props.error && typeof props.error === 'string') ||
+    typeof props.error === 'boolean'
+    ? props.error
+    : formErrors?.value?.find((error) => error.name === props.name)?.message
+})
+
+const inputId = ref(useId())
+
+provide<InjectedFormFieldOptions>('form-field', {
+  error,
+  inputId,
+  name: computed(() => props.name),
+  size: computed(() => props.size),
+  eagerValidation: computed(() => props.eagerValidation),
+  validateOnInputDelay: computed(() => props.validateOnInputDelay)
+})
+</script>
+
+<template>
+  <div :class="ui.root({ class: props.class })">
+    <div :class="ui.wrapper()">
+      <div v-if="label || $slots.label" :class="ui.labelWrapper()">
+        <label :for="inputId" :class="ui.label()">
+          <slot name="label" :label="label">
+            {{ label }}
+          </slot>
+        </label>
+        <span v-if="hint || $slots.hint" :class="ui.hint()">
+          <slot name="hint" :hint="hint">
+            {{ hint }}
+          </slot>
+        </span>
+      </div>
+
+      <p v-if="description || $slots.description" :class="ui.description()">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+
+    <div :class="label ? ui.container() : ''">
+      <slot :error="error" />
+
+      <Transition name="slide-fade" mode="out-in">
+        <p v-if="(typeof error === 'string' && error) || $slots.error" :class="ui.error()">
+          <slot name="error" :error="error">
+            {{ error }}
+          </slot>
+        </p>
+        <p v-else-if="help || $slots.help" :class="ui.help()">
+          <slot name="help" :help="help">
+            {{ help }}
+          </slot>
+        </p>
+      </Transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.slide-fade-enter-active {
+  transition: all 0.15s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.15s ease-out;
+}
+
+.slide-fade-enter-from {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+.slide-fade-leave-to {
+  transform: translateY(10px);
+  opacity: 0;
+}
+</style>