@promodev/form-builder-vue3

@promogit/form-builder-vue3

Portage Vue 3 / TypeScript fidèle de lucien-form-builder : moteur de rendu des formulaires de participation Houston Promo, avec validation (vee-validate 4), internationalisation (vue-i18n, 17 locales) et 28 types de champs.

Deux façons de l'intégrer : module (bundler) ou CDN (widget autonome).

Module (bundler / npm)

Paquet privé publié sur GitHub Packages. Les consommateurs doivent ajouter à leur .npmrc : @promogit:registry=https://npm.pkg.github.com + un token GitHub.

npm install @promogit/form-builder-vue3

import { createApp } from "vue";
import { HoustonForm } from "@promogit/form-builder-vue3";
import "@promogit/form-builder-vue3/style.css"; // opt-in — retirez pour styler vous-même

createApp({
  components: { HoustonForm },
  template: `<HoustonForm :form-id="'69ca3bd62f951904a0f8f085'" server="https://…" />`,
}).mount("#app");

Le CSS est optionnel : ne l'importez pas si vous fournissez votre propre thème.

CDN (widget autonome)

Le widget IIFE (dist/widget/form-builder-vue3.iife.js) embarque Vue et s'auto-monte.

Paquet privé → unpkg / jsdelivr ne peuvent pas le servir (ils ne diffusent que le npm public). Auto-hébergez dist/widget/form-builder-vue3.iife.js et son .css (votre CDN/static, ou un asset de release GitHub), puis :

<link rel="stylesheet" href="https://VOTRE-CDN/form-builder-vue3.css" />
<div id="houston-form" data-form-id="69ca3bd62f951904a0f8f085" data-server="https://…"></div>
<script src="https://VOTRE-CDN/form-builder-vue3.iife.js"></script>

Thème (CSS désactivable)

Toute l'apparence passe par des variables --fb-*. Surchargez-les sans toucher au CSS de base :

:root {
  --fb-color-primary: #0055ff;
  --fb-radius: 6px;
  --fb-field-gap: 15px;
}

Build

pnpm install
pnpm run build   # module + widget + copie du CSS opt-in
pnpm test        # tests unitaires (vitest)