Form

<script setup lang="ts">
import { Button, Form, FormField, Input, Textarea, useForm } from "@bysages/vue";
import { ref } from "vue";
import { z } from "zod";

const status = ref("");

const form = useForm({
  defaultValues: { title: "", abstract: "" },
  validators: {
    onChange: z.object({
      title: z.string().min(1, "The title is required."),
      abstract: z.string().min(8, "Write at least 8 characters."),
    }),
  },
  onSubmit: () => {
    status.value = "Submitted.";
  },
});
</script>

<template>
  <Form :form="form" class="w-full">
    <FormField name="title" label="Title" hint="One line, no period" required>
      <template #default="{ field }">
        <Input
          :model-value="field.state.value"
          placeholder="Title of the piece"
          @update:model-value="field.handleChange"
          @blur="field.handleBlur"
        />
      </template>
    </FormField>
    <FormField name="abstract" label="Abstract">
      <template #default="{ field }">
        <Textarea
          :model-value="field.state.value"
          placeholder="What the piece says"
          @update:model-value="field.handleChange"
          @blur="field.handleBlur"
        />
      </template>
    </FormField>
    <Button type="submit">Submit</Button>
  </Form>
  <p role="status" class="mt-3 text-sm text-tertiary">
    {{ status }}
  </p>
</template>

<script setup lang="ts">
import { Button, Form, FormField, Input, Textarea, useForm } from "@bysages/vue";
import { ref } from "vue";

const status = ref("");

const form = useForm({
  defaultValues: { title: "", abstract: "" },
  onSubmit: () => {
    status.value = "Submitted.";
  },
});

const titleValidators = {
  onChange: ({ value }: { value: string }) => (value ? undefined : "Title is required"),
};

const abstractValidators = {
  onChange: ({ value }: { value: string }) => {
    if (!value) return "The abstract is required";
    if (value.length < 8) return "At least 8 characters";
    return undefined;
  },
};
</script>

<template>
  <Form :form="form" class="w-full">
    <FormField
      name="title"
      label="Title"
      hint="One line, no period"
      required
      :validators="titleValidators"
    >
      <template #default="{ field }">
        <Input
          :model-value="field.state.value"
          placeholder="Title of the piece"
          @update:model-value="field.handleChange"
          @blur="field.handleBlur"
        />
      </template>
    </FormField>
    <FormField name="abstract" label="Abstract" :validators="abstractValidators">
      <template #default="{ field }">
        <Textarea
          :model-value="field.state.value"
          placeholder="What the piece says"
          @update:model-value="field.handleChange"
          @blur="field.handleBlur"
        />
      </template>
    </FormField>
    <Button type="submit">Submit</Button>
  </Form>
  <p role="status" class="mt-3 text-sm text-tertiary">
    {{ status }}
  </p>
</template>

<script setup lang="ts">
import {
  Button,
  CheckboxGroup,
  Form,
  FormField,
  Input,
  Switch,
  Textarea,
  useForm,
} from "@bysages/vue";
import { ref } from "vue";
import { z } from "zod";

const status = ref("");

const topics = [
  { label: "Typography", value: "typography" },
  { label: "Lighting", value: "lighting" },
  { label: "Motion", value: "motion" },
];

const form = useForm({
  defaultValues: {
    title: "",
    summary: "",
    topics: [] as string[],
    consent: false,
  },
  validators: {
    onChange: z.object({
      title: z.string().min(1, "The title is required."),
      summary: z.string().min(8, "Write at least 8 characters."),
      topics: z.array(z.string()).min(1, "Pick at least one topic."),
      consent: z.boolean().refine((v) => v, "Please accept the terms."),
    }),
  },
  onSubmit: () => {
    status.value = "Submitted.";
  },
});
</script>

<template>
  <Form :form="form" class="w-full">
    <FormField name="title" label="Title" required>
      <template #default="{ field }">
        <Input
          :model-value="field.state.value"
          placeholder="Title of the piece"
          @update:model-value="field.handleChange"
          @blur="field.handleBlur"
        />
      </template>
    </FormField>
    <FormField name="summary" label="Summary" hint="A few sentences">
      <template #default="{ field }">
        <Textarea
          :model-value="field.state.value"
          placeholder="What the piece says"
          @update:model-value="field.handleChange"
          @blur="field.handleBlur"
        />
      </template>
    </FormField>
    <FormField name="topics" label="Topics" required>
      <template #default="{ field }">
        <CheckboxGroup
          :model-value="field.state.value"
          :options="topics"
          @update:model-value="field.handleChange"
          @blur="field.handleBlur"
        />
      </template>
    </FormField>
    <FormField name="consent">
      <template #default="{ field }">
        <Switch.Root
          :checked="field.state.value"
          @update:checked="field.handleChange"
          @blur="field.handleBlur"
        >
          <Switch.Control>
            <Switch.Thumb />
          </Switch.Control>
          <Switch.Label>I accept the terms</Switch.Label>
          <Switch.HiddenInput />
        </Switch.Root>
      </template>
    </FormField>
    <Button type="submit">Submit</Button>
  </Form>
  <p role="status" class="mt-3 text-sm text-tertiary">
    {{ status }}
  </p>
</template>