QForm Builder Community

QForm Builder Community est un Nuxt Layer pour créer, prévisualiser et exécuter des formulaires dynamiques avec Nuxt 4, Vue 3, Quasar 2, FormKit et TypeScript strict.

Version Community courante : 0.1.33.

Statut de cette archive : développement 0.1.33, après publication npm de 0.1.32.

Fonctionnalités principales

• constructeur visuel avec catalogue, canvas et panneau de propriétés ;
• 52 éléments Community : 27 champs, 20 contenus statiques et 5 structures ;
• sections, fieldsets, colonnes responsives, onglets et étapes imbriquées ;
• panneaux gauche/droit auto-fit, fluides et overlay sur écrans étroits, avec panneau de propriétés sans défilement horizontal ;
• drag-and-drop récursif avec session clic/sélection/drag unifiée par instance, copie, suppression et réorganisation ;
• panneau Styles commun à tous les composants, avec presets UnoCSS Attributify préfixés et propriétés Quasar 2 sécurisées ;
• conditions avancées et validation typée ;
• historique visible avec undo, redo et restauration ;
• Theme Builder clair/sombre avec presets, dégradés et icônes ;
• modèles de formulaires intégrés et registre extensible, dont privacy_consent partagé avec le catalogue Statiques ;
• import/export de documents versionnés et migrations ;
• composants publics FormBuilder et FormViewer ;
• interface et documentation en français et en anglais ;
• tests TypeScript, Nuxt/Nitro, Playwright, axe et packaging npm.

Installation

bun add @vevedh/qform-builder-layer \
  nuxt-quasar-ui @pinia/nuxt @formkit/nuxt \
  quasar @quasar/extras \
  @formkit/core @formkit/i18n @formkit/inputs @formkit/vue @formkit/utils

Dans nuxt.config.ts :

export default defineNuxtConfig({
  extends: ['@vevedh/qform-builder-layer'],
  compatibilityDate: '2026-05-08',
})

Utiliser le constructeur

<script setup lang="ts">
import type {
  FormBuilderSchema,
  FormBuilderValues,
} from '@vevedh/qform-builder-layer/types'

const schema = ref<FormBuilderSchema>([])
const values = ref<FormBuilderValues>({})
</script>

<template>
  <ClientOnly>
    <FormBuilder
      builder-id="contact-form-builder"
      v-model:schema="schema"
      v-model:values="values"
      title="Formulaire de contact"
      autosave
      height="calc(100vh - 32px)"
    />
  </ClientOnly>
</template>

Exécuter un formulaire

<script setup lang="ts">
import type {
  FormBuilderSchema,
  FormBuilderValues,
} from '@vevedh/qform-builder-layer/types'

const schema = ref<FormBuilderSchema>([])
const values = ref<FormBuilderValues>({})

function handleSubmit(payload: FormBuilderValues): void {
  console.info('Form submitted', payload)
}
</script>

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

Compatibilité FormKit

La baseline de développement et de test est FormKit 2.1.0. Les peer dependencies utilisent ^2.1.0, ce qui autorise les mises à jour compatibles de FormKit 2.x sans accepter automatiquement une future version majeure.

bun run clean
bun install --frozen-lockfile
bun run formkit:upgrade:check

La version 0.1.32 a publié le socle Community comme version latest npm. La branche 0.1.33 repart de cette base publiée pour enrichir la référence Vueform Builder et verrouiller les fonctions déjà validées en coches vertes. Le graphe Vite pré-bundle explicitement @formkit/inputs, utilisé par les propriétés Données de q-hidden, afin d’éviter un rechargement au premier affichage sous Windows.

Développement local

bun run clean
bun install --frozen-lockfile
bun run dev

Contrôles principaux :

bun run m0:check
bun run hidden-data:check
bun run e2e:hidden-data
bun run typecheck
bun run runtime:build:check
bun run release:doctor

Préparer le package npm

Le dépôt publie uniquement le tarball vérifié présent dans .artifacts/.

bun run lockfile:check
bun run npm:publish:check
bun run npm:publish:dry-run

La publication réelle est volontairement explicite. Elle utilise la gate automatisée release:publish:check; la revue manuelle reste réservée à release:candidate:check avant 1.0.0-rc.1 :

export NPM_PUBLISH_CONFIRM="@vevedh/[email protected]"
bun run npm:publish

La ligne stable courante est 0.1.33. Elle se publie avec le tag latest :

export NPM_PUBLISH_CONFIRM="@vevedh/[email protected]"
bun run npm:publish:latest

La prochaine release candidate 1.0.0-rc.1 devra rester sur next :

export NPM_PUBLISH_CONFIRM="@vevedh/[email protected]"
bun run npm:publish:next

Ne stockez jamais de token npm dans le dépôt. Utilisez l’authentification npm locale ou un mécanisme de publication de confiance dans la CI.

Documentation

• Documentation : https://vevedh.github.io/qform-builder-layer/
• Installation : https://vevedh.github.io/qform-builder-layer/guide/installation-nuxt-new
• API publique : https://vevedh.github.io/qform-builder-layer/reference/public-api-stability
• Publication npm : https://vevedh.github.io/qform-builder-layer/guide/npm-publication
• Déploiement GitHub Pages : https://vevedh.github.io/qform-builder-layer/guide/github-pages

Verrous avant 1.0

La préparation 1.0.0-rc.1 s’appuie sur quatre preuves à conserver dans release/ : trois passages verts de la matrice GitHub Actions RC, revue accessibilité manuelle, inspection bundle Theme Builder/IconPicker et intégration dans une application Nuxt 4 métier distincte.

bun run rc:final-locks:check
bun run bundle:watchlist:check
bun run release:candidate:check

Les formats persistés évoluent uniquement via le registre public de migrations.

Licence

MIT