Repères Vueform Builder
Cette page sert de grille de lecture pour suivre la parité fonctionnelle utile avec Vueform Builder. Elle ne cherche pas à recopier son interface : elle vérifie que QForm Builder couvre les mêmes familles de travail dans une application Nuxt 4, avec Quasar 2, FormKit, Pinia et des données auto-hébergées.
Positionnement
| Sujet | QForm Builder Community |
|---|---|
| Intégration | Layer Nuxt 4, consommable avec extends. |
| UI | Quasar 2, drawers responsives, canvas, catalogue, arbre et panneaux intégrés. |
| Runtime | FormViewer rejoue les schémas produits par le builder. |
| Données | Documents JSON versionnés, migrations, import/export et autosave isolé. |
| Extensibilité | Catalogue public, panneaux personnalisés, règles de validation, locales, thèmes et modèles. |
| Hébergement | Self-hosted, sans service externe imposé ni télémétrie obligatoire. |
Couverture fonctionnelle validée
Les anciennes pastilles intermédiaires de la page publique sont désormais traitées comme des fonctions Community validées. Les sujets qui ne relèvent pas du socle Community sont déplacés hors de cette grille afin de ne pas mélanger dette produit et pistes Studio.
| Famille | Statut | Ce qui est disponible |
|---|---|---|
| Installation Nuxt | ✅ | Layer prêt pour app neuve ou existante, avec exemple extends. |
| Builder visuel | ✅ | Catalogue, canvas, sélection, drag-and-drop, overlays, aperçu et mode édition. |
| Catalogue public | ✅ | Prop catalog, mode append ou replace, helper defineQFormElement() et merge typé. |
| Champs interactifs | ✅ | Texte, nombre, e-mail, téléphone, textarea, checkbox, select, dates, fichiers, range, rating, editor et contrôles Quasar avancés. |
| Éléments statiques | ✅ | Titres, paragraphes, séparateurs, boutons, contenu HTML contrôlé et consentement de confidentialité. |
| Structures imbriquées | ✅ | Sections, fieldsets, colonnes, tabs et steps avec routage d’interaction unifié. |
| Sauvegarde / chargement | ✅ | @save, autosave local, import/export JSON, document complet versionné et migrations. |
| Rendu runtime | ✅ | FormViewer compatible valeurs contrôlées, lecture seule, validation, thème et locales. |
| Conditions | ✅ | Groupes imbriqués, opérateurs typés, logique AND/OR et vérifications runtime. |
| Validation | ✅ | Règles FormKit, messages personnalisés, registre public et couverture runtime. |
| Étapes / pages | ✅ | Stepper, navigation contrôlée, duplication, suppression sûre et validation par étape. |
| Arborescence | ✅ | Vue récursive, sélection, actions, drag-and-drop et réordonnancement clavier. |
| Devices / responsive preview | ✅ | Sélecteur de viewport, presets default, sm, lg, diagnostics et drawers auto-fit. |
| Historique visible | ✅ | Undo/redo, panneau historique, restauration d’entrée, profondeur configurable et raccourcis. |
| Thème | ✅ | Theme Builder, presets, palettes, dark/light, icônes et aperçu accessible. |
| Styles de champ | ✅ | Surfaces, variants Quasar, densité, espacement, rayon, ombre, largeur et utilitaires UnoCSS autorisés. |
| I18n / locales | ✅ | Français et anglais inclus, surcharge hôte typée via locale et locales. |
| Panneaux personnalisés | ✅ | Prop configPanels, matcher par type ou prédicat, priorité et fallback interne. |
| Règles métier | ✅ | Prop validationRules, règles publiques typées et messages localisables. |
| Modèles / presets | ✅ | Registre de templates, modèles Community, remplacement protégé et application par API. |
| Export / import officiel | ✅ | Dialogues dédiés, export document complet, compatibilité schema-only et import migré. |
| Intégration application hôte | ✅ | API publique par ref, événements typés, host-app de test et contrat npm vérifié. |
| Accessibilité | ✅ | Navigation clavier, annonces, focus restore, modales auditées et axe WCAG 2.2 AA. |
Anciennes pastilles jaunes levées
| Ancien point à enrichir | Résultat actuel |
|---|---|
| Catalogue à exposer publiquement | ✅ catalog, catalogMode, defineQFormElement() et types publics. |
| Validation à compléter | ✅ règles natives, messages, registre public et tests runtime. |
| Conditions à étendre | ✅ groupes, opérateurs typés et simulateur logique. |
| Steps/pages à renforcer | ✅ stepper structuré, navigation bloquante, duplication et suppression contrôlée. |
| Vrais presets de devices | ✅ viewports exposés, sélecteur stable et drawers responsives. |
| Historique visible | ✅ panneau historique, undo/redo, restauration et raccourcis. |
| Système de locales | ✅ registre FR/EN, surcharge hôte et checks i18n. |
| Thème / design tokens | ✅ Theme Builder, dark/light, palettes, icônes et runtime theme. |
| Catalogue configurable | ✅ injection, remplacement ou fusion avec le catalogue Community. |
| Custom elements | ✅ définition typée d’éléments et rendu par le catalogue public. |
| Custom config panels | ✅ registre public avec matcher et priorité. |
| Presets de builder | ✅ templates Community et API applyTemplate(). |
| Panneau style | ✅ FieldStylesPanel, styles sérialisés et nettoyage runtime. |
| Panneau export/import | ✅ dialogues officiels, JSON versionné et compatibilité schéma historique. |
| Sauvegarde en base côté app | ✅ contrat @save et exemples d’intégration NFZ/documentés sans imposer un backend. |
Hors périmètre Community
Deux pistes restent volontairement séparées du socle Community : l’export d’un composant Vue natif autonome et la génération de formulaire depuis une description métier. Elles ont plus de valeur dans NFZ Studio ou dans un pack spécialisé, car elles impliquent des choix d’architecture serveur, de sécurité et de maintenance qui ne doivent pas alourdir le layer public.
Critère de parité minimale
QForm Builder couvre le socle attendu quand une application Nuxt 4 peut :
- intégrer le builder comme un composant public ;
- construire un formulaire complet sans modifier les fichiers internes ;
- gérer champs, structures, pages, conditions, validation, styles, responsive preview et historique ;
- personnaliser le catalogue et les panneaux de configuration ;
- sauvegarder un document JSON versionné ;
- rejouer ce document avec
FormViewer; - brancher le cycle complet sur NFZ Studio ou une autre application hôte sans couplage aux pages du playground.
Cette page est contrôlée par bun run vueform:parity:check afin d’éviter le retour de statuts intermédiaires non justifiés dans la documentation publique.