Référence FormBuilder et FormViewer

FormBuilder

Props

Prop	Type	Défaut	Description
builder-id	string	default	Identifiant stable de l’instance. Isole le store, l’historique et l’autosave.
schema	FormKitSchemaDefinition[]	[]	Schéma contrôlé via v-model:schema.
values	Record<string, unknown>	{}	Valeurs contrôlées via v-model:values.
settings	Partial<FormBuilderSettings>	interne	Paramètres du builder.
readonly	boolean	false	Force le mode lecture seule.
disabled	boolean	false	Désactive les actions utilisateur.
autosave	boolean	false	Active la sauvegarde locale automatique.
storage-key	string	calculée	Clé localStorage utilisée par l’autosave.
title	string	Constructeur de formulaires	Titre affiché dans la toolbar.
subtitle	string	texte interne	Sous-titre affiché dans la toolbar.
height	string	100vh	Hauteur du shell du builder.
left-drawer-open	boolean	interne	Contrôle le panneau gauche.
right-drawer-open	boolean	interne	Contrôle le panneau droit.
preview-mode	'editing' | 'previewing'	interne	Mode courant.
drawer-behavior	'default' | 'desktop' | 'mobile'	desktop	Comportement des drawers Quasar.
labels	Partial<FormBuilderLabels>	{}	Libellés personnalisés.

v-model

<FormBuilder
  v-model:schema="schema"
  v-model:values="values"
  v-model:settings="settings"
  v-model:left-drawer-open="leftDrawerOpen"
  v-model:right-drawer-open="rightDrawerOpen"
  v-model:preview-mode="previewMode"
/>

Événements

Événement	Payload	Description
save	{ builderId, schema, values, settings }	Déclenché par le bouton sauvegarder ou save().
reset	aucun	Déclenché après réinitialisation.
cancel	aucun	Réservé pour usage hôte.
submit	values	Déclenché lors de la soumission en preview.
field-add	{ field, index, schema }	Champ ajouté.
field-update	{ field, index, schema }	Champ modifié.
field-remove	{ field, index, schema }	Champ supprimé.
field-copy	{ field, index, schema }	Champ copié.
field-select	{ field, index, schema }	Champ sélectionné.
field-move	{ field, from, to, schema }	Champ déplacé.
schema-import	schema	Schéma importé via API publique.
schema-export	schema	Schéma exporté via API publique.
error	{ code, message, cause? }	Erreur contrôlée du builder.

API exposée par ref

export type FormBuilderPublicApi = {
  getBuilderId: () => string
  save: () => {
    builderId: string
    schema: FormKitSchemaDefinition[]
    values: Record<string, unknown>
    settings: Record<string, unknown>
  }
  reset: () => void
  setSchema: (schema: FormKitSchemaDefinition[]) => void
  getSchema: () => FormKitSchemaDefinition[]
  setValues: (values: Record<string, unknown>) => void
  getValues: () => Record<string, unknown>
  setSettings: (settings: Record<string, unknown>) => void
  getSettings: () => Record<string, unknown>
  importSchema: (schema: FormKitSchemaDefinition[]) => void
  exportSchema: () => FormKitSchemaDefinition[]
}

FormViewer

Props

Prop	Type	Défaut	Description
form-fields	FormKitSchemaDefinition[]	requis	Schéma à rendre.
readonly	boolean	false	Bloque les modifications et la soumission.

v-model

<FormViewer
  v-model="values"
  :form-fields="schema"
/>

Le modèle correspond aux valeurs du formulaire :

const values = ref<Record<string, unknown>>({})

Événement submit

<FormViewer
  v-model="values"
  :form-fields="schema"
  @submit="handleSubmit"
/>

function handleSubmit(data: Record<string, unknown>) {
  console.log(data)
}

Types pratiques à copier dans une app hôte

Tant que le package ne fournit pas encore d’export public de types, tu peux définir ces alias dans ton application :

// app/types/qform-builder.ts
import type { FormKitSchemaDefinition } from '@formkit/core'

export type QFormBuilderSchema = FormKitSchemaDefinition[]
export type QFormBuilderValues = Record<string, unknown>

export type QFormBuilderSavePayload = {
  builderId: string
  schema: QFormBuilderSchema
  values: QFormBuilderValues
  settings: Record<string, unknown>
}