Form

<script setup lang="ts">
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'

const formSchema = toTypedSchema(z.object({
  username: z.string().min(2).max(50),
  password: z.string().min(6).max(50),
}))

const { handleSubmit, validate, errors } = useForm({
  validationSchema: formSchema,
})

const onSubmit = handleSubmit((values) => {
  // eslint-disable-next-line no-alert
  alert(JSON.stringify(values, null, 2))
})

async function onValidating() {
  await validate()

  const firstErrorField = Object.keys(errors.value)[0]
  if (firstErrorField) {
    const firstErrorFieldElement = document.querySelector(`[name=${firstErrorField}]`) as HTMLElement
    if (firstErrorFieldElement) {
      firstErrorFieldElement.focus()
      firstErrorFieldElement?.scrollIntoView({ behavior: 'smooth', block: 'center' })
    }
  }

  onSubmit()
}
</script>

<template>
  <form
    class="space-y-4"
    @submit.prevent="onValidating()"
  >
    <NFormField
      name="username"
      label="Username"
    >
      <NInput placeholder="username" />
    </NFormField>

    <NFormField
      name="password"
      label="Password"
    >
      <NInput type="password" placeholder="password" />
    </NFormField>

    <NButton type="submit">
      Submit
    </NButton>
  </form>
</template>

<template>
  <div class="flex">
    <NFormField
      label="Email"
      name="email"
      required
    >
      <NInput
        placeholder="phojrengel@gmail.com"
        leading="i-heroicons-envelope-20-solid"
      />
    </NFormField>
  </div>
</template>

<template>
  <div class="flex">
    <NFormField
      label="Email"
      required
      name="email"
      description="We'll never share your email with anyone else."
    >
      <NInput
        placeholder="phojrengel@gmail.com"
        leading="i-heroicons-envelope-20-solid"
      />
    </NFormField>
  </div>
</template>

<template>
  <div class="flex">
    <NFormGroup
      label="Email"
      name="email"
      hint="Optional"
    >
      <NInput
        placeholder="phojrengel@gmail.com"
        leading="i-heroicons-envelope-20-solid"
      />
    </NFormGroup>
  </div>
</template>

<template>
  <div class="flex">
    <NFormGroup
      label="Email"
      name="email"
      message="We'll never share your email with anyone else."
    >
      <NInput
        placeholder="phojrengel@gmail.com"
        leading="i-heroicons-envelope-20-solid"
      />
    </NFormGroup>
  </div>
</template>

<template>
  <div class="flex flex-col gap-4">
    <NFormField
      label="Username"
      name="username"
      message="Your username is available."
      status="success"
    >
      <NInput />
    </NFormField>

    <NFormField
      label="About Me"
      name="about"
      status="info"
      message="This information will be visible to other users."
    >
      <NInput type="textarea" />
    </NFormField>

    <NFormField
      label="Email"
      status="error"
      name="email"
      message="Your email is invalid"
    >
      <NInput />
    </NFormField>

    <NFormGroup
      label="Password"
      name="password"
      message="Your password is weak."
      status="warning"
    >
      <NInput
        type="password"
      />
    </NFormGroup>
  </div>
</template>

<script setup lang="ts">
import type { NFormFieldProps } from '../../../types'
import { Field } from 'vee-validate'
import { computed } from 'vue'
import { cn } from '../../../utils'
import FormFieldDefaultSlot from '../../slots/FormFieldDefault'
import FormControl from './FormControl.vue'
import FormDescription from './FormDescription.vue'
import FormItem from './FormItem.vue'
import FormLabel from './FormLabel.vue'
import FormMessage from './FormMessage.vue'

defineOptions({
  inheritAttrs: false,
})

const props = defineProps<NFormFieldProps>()

const statusClassVariants = computed(() => {
  const text = {
    info: 'text-info',
    success: 'text-success',
    warning: 'text-warning',
    error: 'text-error',
    default: 'text-muted',
  }

  return text[props.status ?? 'default']
})
</script>

<template>
  <Field
    v-slot="{ componentField, errorMessage }"
    :name
  >
    <FormItem
      :class="cn(
        props.class,
      )"
    >
      <slot name="top">
        <div
          :class="cn(
            'form-field-top-wrapper',
            una?.formFieldTopWrapper,
          )"
        >
          <div
            v-if="label || hint || description"
            :class="cn(
              'form-field-top-wrapper',
              una?.formFieldTopWrapper,
            )"
          >
            <div
              v-if="label || hint"
              :class="cn(
                'form-field-top-wrapper-inner',
                una?.formFieldTopWrapperInner,
              )"
            >
              <div
                :class="cn(
                  'form-field-label-wrapper',
                  una?.formFieldLabelWrapper,
                )"
              >
                <slot name="label">
                  <FormLabel
                    :una
                  >
                    <span>
                      {{ label }}
                    </span>

                    <span
                      v-if="required"
                      :class="cn(
                        'form-field-label-required',
                        una?.formFieldLabelRequired,
                      )"
                    />
                  </FormLabel>
                </slot>
              </div>

              <slot name="hint">
                <span
                  v-if="hint"
                  :class="cn(
                    'form-field-hint',
                    una?.formFieldHint,
                  )"
                >
                  {{ hint }}
                </span>
              </slot>
            </div>

            <slot name="description">
              <FormDescription
                v-if="description"
                :una
              >
                {{ description }}
              </FormDescription>
            </slot>
          </div>
        </div>
      </slot>

      <FormControl>
        <FormFieldDefaultSlot
          :status="!errorMessage ? status : 'error'"
          v-bind="componentField"
        >
          <slot />
        </FormFieldDefaultSlot>
      </FormControl>

      <slot name="bottom">
        <div
          :class="cn(
            'form-field-bottom-wrapper',
            una?.formFieldBottomWrapper,
          )"
        >
          <slot name="message">
            <div
              v-if="message && !errorMessage"
              :class="cn(
                'form-field-message-wrapper',
                una?.formFieldMessageWrapper,
              )"
            >
              <FormDescription
                :class="cn(
                  'form-field-message',
                  una?.formMessage,
                  statusClassVariants,
                )"
              >
                {{ message }}
              </FormDescription>
            </div>

            <FormMessage
              v-else
            />
          </slot>
        </div>
      </slot>
    </FormItem>
  </Field>
</template>

<script lang="ts" setup>
import { Slot } from 'radix-vue'
import { useFormField } from '../../../composables/useFormField'

const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
</script>

<template>
  <Slot
    :id="formItemId"
    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
    :aria-invalid="!!error"
  >
    <slot />
  </Slot>
</template>

<script lang="ts" setup>
import type { NFormDescriptionProps } from '../../../types'
import { useFormField } from '../../../composables/useFormField'
import { cn } from '../../../utils'

const props = defineProps<NFormDescriptionProps>()

const { formDescriptionId } = useFormField()
</script>

<template>
  <p
    :id="formDescriptionId"
    :class="cn(
      'form-description',
      props.una?.formDescription,
      props.class,
    )"
  >
    <slot />
  </p>
</template>

<script lang="ts" setup>
import type { NFormMessageProps } from '../../../types'
import { ErrorMessage } from 'vee-validate'
import { toValue } from 'vue'
import { useFormField } from '../../../composables/useFormField'
import { cn } from '../../../utils'

const props = defineProps<NFormMessageProps>()

const { name, formMessageId } = useFormField()
</script>

<template>
  <ErrorMessage
    :id="formMessageId"
    as="p"
    :name="toValue(name)"
    :class="cn(
      'form-message',
      props.una?.formMessage,
      props.class,
    )"
  />
</template>

<script lang="ts" setup>
import type { NFormLabelProps } from '../../../types'
import { useFormField } from '../../../composables/useFormField'
import { cn } from '../../../utils'
import Label from '../../elements/Label.vue'

const props = defineProps<NFormLabelProps>()

const { formItemId } = useFormField()
</script>

<template>
  <Label
    :class="cn(
      'form-label',
      props.una?.formLabel,
      props.class,
    )"
    :for="formItemId"
  >
    <slot />
  </Label>
</template>

<script lang="ts" setup>
import type { NFormItemProps } from '../../../types'
import { provide } from 'vue'
import { cn, randomId } from '../../../utils'
import { FORM_ITEM_INJECTION_KEY } from '../../../utils/injectionKeys'

const props = defineProps<NFormItemProps>()

const id = randomId('form')
provide(FORM_ITEM_INJECTION_KEY, id)
</script>

<template>
  <div
    :class="cn(
      'form-item',
      props.una?.formItem,
      props.class,
    )"
  >
    <slot />
  </div>
</template>