Fonctionnalités incluses et cible Vueform Builder

Cette page sert de référentiel fonctionnel pour piloter l’évolution de QForm Builder face à Vueform Builder.

Objectif produit : faire évoluer QForm Builder pour proposer, au minimum, les mêmes familles d’options que Vueform Builder, tout en restant aligné avec notre stack : Nuxt 4 layer, Vue 3, Quasar 2, Pinia, FormKit, puis intégration naturelle dans NFZ Studio.

Lecture des statuts

Statut	Signification
✅ Inclus	Fonction déjà disponible et utilisable.
🟡 Partiel	Fonction présente, mais à stabiliser, exposer ou enrichir.
🔴 À développer	Fonction absente ou non exposée publiquement.
🎯 Cible	Fonction à viser pour atteindre ou dépasser la parité Vueform Builder.

Résumé des fonctionnalités actuelles

FormBuilder

FormBuilder est le composant d’édition principal. Il embarque l’interface complète du constructeur.

Fonctions actuellement incluses :

Fonction	Statut	Notes
Intégration comme composant Nuxt/Vue	✅	Utilisable dans une app Nuxt 4 via layer extends.
Interface builder autonome	✅	QLayout, toolbar, drawer gauche, drawer droit, canvas.
Drag-and-drop de champs	✅	Ajout de champs depuis le catalogue vers le canvas.
Catalogue de champs	🟡	Catalogue interne : inputs, checkbox, select, dates, fichiers, boutons, statiques, stepper. À exposer via API publique.
Édition des propriétés	✅	Panneau droit avec cartes de configuration par type.
Validation	🟡	Gestion FormKit existante, UI à compléter pour couvrir davantage de règles.
Conditions d’affichage / logique	🟡	Panneau ConditionsCard, opérateurs de base, logique à étendre et documenter.
Étapes / pages	🟡	Structure q-stepper présente. À renforcer pour couvrir la notion de pages avancées.
Arborescence	✅	Onglet Arborescence basé sur QTree, avec sélection champ/step.
Aperçu / édition	✅	Mode editing et previewing.
Prévisualisation responsive	🟡	Viewports default, sm, lg. À transformer en vrais presets device.
Historique undo/redo	✅	Store d’historique isolé par instance.
Multi-instance	✅	builder-id isole store, historique, autosave et état local.
Autosave local	✅	Sauvegarde locale isolée par builder-id ou storage-key.
Export de schéma	✅	API publique exportSchema(), événement schema-export. UI export dédiée à enrichir.
Import de schéma	✅	API publique importSchema(), événement schema-import. UI import dédiée à enrichir.
Sauvegarde externe	✅	Événement @save avec payload complet. Adaptable à Feathers/NFZ.
API publique via ref	✅	save, reset, setSchema, getSchema, setValues, getValues, setSettings, getSettings.
Personnalisation des libellés	🟡	Prop labels. À compléter vers un vrai système i18n/locales.
Personnalisation thème/UI	🟡	Hérite de Quasar. À compléter par un thème builder / design tokens.
Custom elements	🔴	Aujourd’hui possible par modification interne du catalogue, mais pas encore par API publique.
Custom config panels	🔴	Cartes internes existantes, mais pas encore de registre public.
Export code Vue natif	🔴	Non inclus. Option à évaluer après stabilisation JSON/runtime.
AI form generation	🔴	Non inclus. Cible possible via NFZ Studio/Agents.

FormViewer

FormViewer est le composant runtime destiné à rejouer un formulaire déjà construit.

Fonction	Statut	Notes
Rendu dynamique depuis schéma	✅	Rend un schéma FormKit/Quasar.
v-model des valeurs	✅	Le parent contrôle les données saisies.
Soumission	✅	Événement @submit.
Lecture seule	✅	Prop readonly.
Réutilisation dans app externe	✅	Compatible layer Nuxt.
Rendu sans builder	✅	Permet de sauvegarder un schéma en base puis le rejouer.
Rendu SSR	🔴	Le projet reste configuré ssr:false. À sécuriser si SSR nécessaire.

Comparaison fonctionnelle cible avec Vueform Builder

Vueform Builder met notamment en avant : intégration dans une application comme composant, drag-and-drop, export JSON, sauvegarde en base, rendu runtime via SDK, pages, conditions, tree, devices, validation, history, theming et i18n. Il documente aussi l’extension par custom elements et custom config panels.

Famille	Vueform Builder	QForm Builder actuel	Cible QForm Builder
Builder no-code intégré	Composant intégrable dans une app Vue	✅	Garder layer Nuxt + composant public.
Drag-and-drop	Builder drag-and-drop complet	✅	Améliorer feedback visuel et drop zones imbriquées.
Export JSON	Export / sauvegarde JSON	✅	Ajouter UI export/import claire dans toolbar ou panel export.
Sauvegarde en base	Via events/API côté app hôte	✅	Ajouter exemples NFZ forms service + CRUD.
Runtime renderer	Rendu depuis JSON sauvegardé	✅	Stabiliser FormViewer et documenter les contraintes.
Pages / Steps	Gestion avancée des pages	🟡	Renforcer q-stepper, duplication, réordonnancement, validation par étape.
Conditions	Conditions avancées	🟡	Étendre opérateurs, conditions groupées AND/OR, UX de test.
Tree / structure	Arborescence de formulaire	✅	Ajouter actions depuis l’arbre : déplacer, dupliquer, supprimer.
Devices	Prévisualisation par device	🟡	Ajouter presets mobile/tablet/desktop + largeur personnalisée.
Validation	Règles configurables	🟡	Étendre règles UI : required, email, regex, min/max, length, custom.
History	Undo/redo	✅	Ajouter historique visible et raccourcis clavier.
Theming	Thème et UI personnalisables	🟡	Ajouter design tokens, palettes, preview thème, presets dark/light.
I18n / locales	Localisation builder et formulaire	🟡	Remplacer/compléter labels par registre de locales.
Element list customization	Catégories et éléments configurables	🔴	Ajouter prop catalog + registry typé.
Custom elements	Extension d’éléments	🔴	Ajouter defineQFormElement() et rendu dynamique.
Custom config panels	Panneaux de config extensibles	🔴	Ajouter registry configPanels par type.
Presets	Configurations prédéfinies	🔴	Ajouter presets de builder : simple, survey, admin CRUD, onboarding.
Style panel	Panneau style avancé	🔴	Ajouter onglet style : classes, couleurs, tailles, densité, variant.
Export panel	Panneau export dédié	🔴	Ajouter export JSON, export TS, export Vue, copier/coller.
Form code export	Export composant Vue natif	🔴	Cible optionnelle après parité JSON/runtime.
AI	Génération assistée	🔴	Cible NFZ Studio : prompt → schéma → preview → apply.
White label / self-hosted	Intégration produit, données self-hosted	✅	Avantage naturel : source maîtrisée, pas de télémétrie imposée.

Détail du catalogue actuellement inclus

Champs interactifs

Élément	Type schéma	Statut
Champ texte	q-input, inputType: text	✅
Champ numérique	q-input, inputType: number	✅
Adresse e-mail	q-input, inputType: email	✅
Téléphone masqué	q-input, masque	✅
Zone de texte	q-input, inputType: textarea	✅
Case à cocher	q-checkbox	✅
Select	q-select	✅
Date	q-date	✅
Dates multiples	q-date-multiple	✅
Plage de dates	q-date-range	✅
Upload fichier	q-input, inputType: file	✅
Upload multi-fichiers	q-input, multiple, inputType: file	✅

Éléments statiques

Élément	Type schéma	Statut
Bouton submit	q-btn, type: submit	✅
Bouton principal	q-btn, color: primary	✅
Bouton secondaire	q-btn, color: secondary	✅
Bouton danger	q-btn, color: negative	✅
Séparateur	$el: hr	✅
Titre H1	$el: h1	✅
Titre H2	$el: h2	✅
Titre H3	$el: h3	✅
Titre H4	$el: h4	✅
Paragraphe	$el: p	✅
Citation	$el: blockquote	✅

Structures

Élément	Type schéma	Statut
Étapes	q-stepper	🟡

Options configurables déjà présentes

Les panneaux de configuration actuels couvrent déjà plusieurs familles d’options :

Famille	Fichiers liés	Statut
Propriétés générales	PropertiesCard.vue	✅
Attributs HTML/FormKit	AttributesCard.vue	✅
Données / options	DataCard.vue, OptionsCard.vue	✅
Validation	ValidationCard.vue	🟡
Conditions	ConditionsCard.vue	🟡
Layout / colonnes	LayoutCard.vue	✅
Options bouton	ButtonOptionsCard.vue	✅
Options checkbox	CheckboxOptionsCard.vue	✅
Options date	DateOptionsCard.vue	✅
Options fichier	FileOptionsCard.vue	✅
Options stepper	QStepperConfig.vue	🟡

Roadmap de parité minimale

Phase 1 — Stabiliser le contrat public

Objectif : rendre toutes les fonctionnalités existantes consommables par une application externe sans modifier les fichiers internes.

À faire :

1. Ajouter une prop catalog pour injecter des éléments personnalisés.
2. Ajouter un type public QFormBuilderElementDefinition.
3. Ajouter un registre public des panneaux de config par type.
4. Ajouter un panneau Export officiel : JSON, copie presse-papiers, téléchargement.
5. Ajouter un panneau Import officiel : JSON, fichier, validation du schéma.
6. Documenter un service NFZ forms pour sauvegarder/charger les schémas.

Phase 2 — Atteindre le socle Vueform Builder

Objectif : couvrir les familles visibles dans Vueform Builder : pages, conditions, tree, devices, validation, history, theming, i18n.

À faire :

1. Renforcer les steps/pages : réordonnancement, duplication, suppression, validation par étape.
2. Étendre les conditions : groupes AND/OR, opérateurs date/texte/nombre, preview de résultat.
3. Améliorer l’arborescence : actions contextuelles, drag depuis tree, recherche.
4. Ajouter des devices : mobile, tablet, desktop, custom width.
5. Étendre la validation : règles prédéfinies + messages + règles custom.
6. Ajouter un panneau history visible et raccourcis clavier.
7. Ajouter un vrai système de locales.
8. Ajouter un panneau style/thème compatible Quasar.

Phase 3 — Dépasser Vueform Builder dans l’écosystème NFZ

Objectif : tirer parti de Nuxt 4, Quasar, Feathers/NFZ et des agents IA.

À faire :

1. Génération de formulaire depuis un service NFZ ou un schéma Zod.
2. Mapping automatique Zod schema → FormBuilder schema.
3. Mapping FormBuilder schema → service CRUD NFZ.
4. Agent IA : prompt métier → formulaire complet → validation → service NFZ.
5. Templates métier : formulaire agent public, formulaire RH, formulaire incident cyber, formulaire CRUD admin.
6. Version headless pour intégrer le canvas dans un dashboard déjà structuré.

Critère de réussite

QForm Builder atteint la parité minimale lorsque l’on peut :

1. intégrer le builder dans une app Nuxt 4 comme un simple composant ;
2. créer un formulaire complet sans code ;
3. gérer champs, pages, conditions, validation, responsive preview et historique ;
4. personnaliser le catalogue et les panneaux ;
5. sauvegarder le JSON en base ;
6. rejouer le formulaire avec FormViewer ;
7. brancher le cycle complet sur NFZ Studio sans couplage direct aux pages.