tinyval-vue

Состояние формы для Vue 3 на схемах tinyval: значения для v-model, ошибки, «трогал ли пользователь поле», отправка, ошибки с сервера и асинхронные проверки.

• ~2 kB gzip поверх схем, ~4 kB со всеми дополнениями и компонентами — в сборку попадает только используемое
• Composable (useForm, useField, useFieldArray) или компоненты (<TvForm>, <TvField>, <TvError>) — как удобнее
• Ошибки показываются, когда пора: после ухода с поля, при вводе или после отправки
• Ответ 422 от Laravel раскладывается по полям автоматически
• Типы: form.values — из начальных значений, данные в handleSubmit — из схемы

Установка

npm install tinyval tinyval-vue

Быстрый старт

<script setup lang="ts">
import { object, string, pipe, trim, minLength, email } from 'tinyval';
import { useForm } from 'tinyval-vue';

const Signup = object({
  name: pipe(string(), trim(), minLength(2)),
  email: pipe(string(), email()),
});

const form = useForm(Signup, { initial: { name: '', email: '' } });

const submit = form.handleSubmit(async (data) => {
  await api.post('/signup', data); // data: { name: string; email: string }
});
</script>

<template>
  <form @submit="submit">
    <input v-model="form.values.name" @blur="form.touch('name')" />
    <span v-if="form.errors.name">{{ form.errors.name }}</span>

    <input v-model="form.values.email" @blur="form.touch('email')" />
    <span v-if="form.errors.email">{{ form.errors.email }}</span>

    <button :disabled="form.submitting">Sign up</button>
  </form>
</template>

Схемы — обычные схемы tinyval: все правила, сообщения и примеры из документации tinyval работают в useForm без изменений.

Попробовать

Попробуйте email taken@mail.ru — «сервер» ответит, что он занят.

Имя Email Возраст (необязательно) Пароль Повтор пароля

{
  "valid": false,
  "dirty": false,
  "submitted": false,
  "touched": []
}

Что почитать

• Данные формы — values, data, changes, errors и как они меняются
• Поля формы — что отдаёт каждый тип поля и какую схему выбрать
• Ошибки — когда показываются, ошибки сервера, язык
• Асинхронные проверки — «email не занят» с задержкой при вводе
• Пошаговые формы — проверка по шагам
• Редактирование и черновики — PATCH только изменённых полей, черновик, предупреждение об уходе
• UI-библиотеки — Element Plus, Vuetify, PrimeVue, свой компонент поля
• Компоненты — форма без кода в <script>
• Components — a form without code in <script>
• API — useForm, useField, useFieldArray, useDraft, useLeaveGuard