<script lang="ts">
import { type } from "arktype";

const schema = type({
    firstName: "string > 0",
    lastName: "string > 0",
    email: "string.email",
    phone: "string"
});
type FormState = typeof schema.infer;
</script>
<script setup lang="ts">
const props = defineProps<{
  initialValues?: Partial<FormState>;
}>()
const state = reactive<Partial<FormState>>({ ...props.initialValues })
</script>

<template>
  <UForm
    :schema="schema"
    :state="state"
    class="flex flex-col gap-1"
    @submit="console.log"
    @error="console.log"
  >
    <UFormField label="First Name" name="firstName">
      <UInput v-model="state.firstName" />
    </UFormField>
    <UFormField label="Last Name" name="lastName">
      <UInput v-model="state.lastName" />
    </UFormField>
    <UFormField label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormField>
    <UFormField label="Phone" name="phone">
      <UInput v-model="state.phone" v-maska="'(###) ###-####'" />
    </UFormField>
    <div class="p-2">
      <UButton type="submit">
          Submit
      </UButton>
    </div>
  </UForm>
</template>

<script lang="ts">
import { type } from "arktype";

const schema = type({
    firstName: "string > 0",
    lastName: "string > 0",
    email: "string.email",
    phone: "string"
});
type FormState = typeof schema.infer;
</script>
<script setup lang="ts">
const props = defineProps<{
  initialValues?: Partial<FormState>;
}>()
const state = reactive<Partial<FormState>>({ ...props.initialValues })
</script>

<template>
  <UForm
    :schema="schema"
    :state="state"
    class="flex flex-col gap-1"
    @submit="console.log"
    @error="console.log"
  >
    <UFormField label="First Name" name="firstName">
      <UInput v-model="state.firstName" />
    </UFormField>
    <UFormField label="Last Name" name="lastName">
      <UInput v-model="state.lastName" />
    </UFormField>
    <UFormField label="Email" name="email">
      <UInput v-model="state.email" />
    </UFormField>
    <UFormField label="Phone" name="phone">
      <UInput v-model="state.phone" v-maska="'(###) ###-####'" />
    </UFormField>
    <div class="p-2">
      <UButton type="submit">
          Submit
      </UButton>
    </div>
  </UForm>
</template>