Composition des formulaires
Composer champs générés, sections, contenu et actions.
Séparez le contrat d’un champ de sa disposition. Un champ décrit valeur et validation ; les blocs le placent à côté de textes et d’actions personnalisées.
Utilisez TableConfig.presentation à la racine pour une surface commune de consultation, création, édition et édition groupée, avec un choix mobile facultatif. Le défaut est un drawer à droite sur tous les écrans. Consultez la présentation commune des fiches pour la configuration et la migration.
Exemple de configuration
Partez du démarrage React ou du démarrage Vue. Le fichier suivant complète leur catalogue de produits. Passez cette configuration via getTableConfig en React ou config en Vue.
import { z } from "zod";
import type { FormConfig } from "@/components/ui/yayaw-table/components/forms/types";
export const productForm: FormConfig = {
id: "products",
title: "Edit product",
presentation: "drawer",
width: "38rem",
submitMode: "patch",
fields: [
{
name: "name",
label: "Name",
type: "text",
required: true,
bulkEdit: false,
schema: z.string().trim().min(1),
},
{
name: "price",
label: "Price",
type: "number",
min: 0,
schema: z.number().min(0),
},
{
name: "stock",
label: "Stock",
type: "number",
min: 0,
step: 1,
schema: z.number().int().min(0),
},
{
name: "status",
label: "Status",
type: "select",
options: [
{ value: "draft", label: "Draft" },
{ value: "active", label: "Active" },
{ value: "archived", label: "Archived" },
],
},
],
blocks: [
{
type: "content",
id: "help",
text: "Only changed fields are saved.",
tone: "info",
},
{ type: "field", name: "name" },
{
type: "section",
id: "inventory",
title: "Inventory",
columns: 2,
blocks: [
{ type: "field", name: "price" },
{ type: "field", name: "stock" },
],
},
{ type: "field", name: "status" },
],
};import { z } from "zod";
import type { FormConfig } from "@/components/ui/yayaw-table-vue/types";
export const productForm: FormConfig = {
id: "products",
title: "Edit product",
presentation: "drawer",
width: "38rem",
submitMode: "patch",
fields: [
{
name: "name",
label: "Name",
type: "text",
required: true,
bulkEdit: false,
schema: z.string().trim().min(1),
},
{
name: "price",
label: "Price",
type: "number",
min: 0,
schema: z.number().min(0),
},
{
name: "stock",
label: "Stock",
type: "number",
min: 0,
step: 1,
schema: z.number().int().min(0),
},
{
name: "status",
label: "Status",
type: "select",
options: [
{ value: "draft", label: "Draft" },
{ value: "active", label: "Active" },
{ value: "archived", label: "Archived" },
],
},
],
blocks: [
{
type: "content",
id: "help",
text: "Only changed fields are saved.",
tone: "info",
},
{ type: "field", name: "name" },
{
type: "section",
id: "inventory",
title: "Inventory",
columns: 2,
blocks: [
{ type: "field", name: "price" },
{ type: "field", name: "stock" },
],
},
{ type: "field", name: "status" },
],
};Sections ou blocs
Utilisez sections pour des groupes simples sur une, deux ou trois colonnes. Utilisez blocks pour combiner field, section, content, actions et custom. Un champ référencé plusieurs fois n’est rendu qu’une fois ; les champs omis restent disponibles en fin de formulaire.
Contrôles personnalisés
Les renderers React renvoient des nœuds React. Ceux de Vue renvoient des VNodes et les blocs personnalisés peuvent utiliser le slot form-{id}. Conservez les valeurs dans le runtime du formulaire via setFieldValue ; les actions personnalisées peuvent valider avant leur exécution et reçoivent un signal d’annulation. Choisissez presentation: "modal" pour une composition large ou un panneau latéral pour une édition contextuelle.