lucien-form-svelte

v0.0.4

Published

5 months ago

Composant de formulaire Svelte réutilisable avec validation, multi-étapes et traductions

0High
0Medium
0Low

cylwin

svelte form formulaire component validation multi-step i18n forms

lucien-form-svelte

Composant de formulaire Svelte réutilisable avec validation, multi-étapes et support de 24 langues européennes.

Fonctionnalités

✅ Multi-étapes : Navigation fluide entre les étapes du formulaire
✅ Validation avancée : Règles de validation personnalisées avec Zod
✅ 24 langues : Support de toutes les langues européennes (fr, en, de, es, it, etc.)
✅ Confirmation email : Champ de confirmation avec validation
✅ Composants riches :
- Input, Email, Phone, IBAN, SIREN
- Date picker avec calcul d'âge
- Adresse avec autocomplétion Google Maps
- Upload de fichiers multiples
- MultiSelect avec recherche prédictive
- Radio, Checkbox, Textarea
✅ Validation unique : Vérification côté serveur
✅ Affichage conditionnel : displayIf pour masquer/afficher des champs
✅ Messages d'erreur personnalisés : forceErrorMessage, validationLabel

Installation

Via NPM

npm install lucien-form-svelte

Via CDN (unpkg)

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/lucien-form-svelte@latest/dist/style.css">

<!-- JavaScript UMD -->
<script src="https://unpkg.com/lucien-form-svelte@latest/dist/form-svelte.umd.cjs"></script>

Via CDN (jsdelivr)

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lucien-form-svelte@latest/dist/style.css">

<!-- JavaScript UMD -->
<script src="https://cdn.jsdelivr.net/npm/lucien-form-svelte@latest/dist/form-svelte.umd.cjs"></script>

Utilisation

1. Dans un fichier HTML classique (CDN)

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/lucien-form-svelte@latest/dist/style.css">
</head>
<body>
  <div id="formulaire"></div>

  <script src="https://unpkg.com/lucien-form-svelte@latest/dist/form-svelte.umd.cjs"></script>
  <script>
    new window.FormSvelte.default({
      target: document.getElementById('formulaire'),
      props: {
        formId: '68d3906bd720f71c6ba952e1', // ID de votre formulaire
        googleMapsApiKey: 'VOTRE_CLE_API' // Optionnel
      }
    });
  </script>
</body>
</html>

2. Dans WordPress

Ajoutez dans votre thème ou via un plugin :

<!-- Dans header.php ou functions.php -->
<link rel="stylesheet" href="https://unpkg.com/lucien-form-svelte@latest/dist/style.css">

<!-- Dans votre page/article -->
<div id="lucien-formulaire"></div>

<script src="https://unpkg.com/lucien-form-svelte@latest/dist/form-svelte.umd.cjs"></script>
<script>
  new window.FormSvelte.default({
    target: document.getElementById('lucien-formulaire'),
    props: {
      formId: 'VOTRE_FORM_ID'
    }
  });
</script>

3. Dans une application Vue 3

<template>
  <div ref="formulaireContainer"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import Formulaire from 'lucien-form-svelte';
import 'lucien-form-svelte/dist/style.css';

const formulaireContainer = ref(null);
let formulaireInstance = null;

onMounted(() => {
  formulaireInstance = new Formulaire({
    target: formulaireContainer.value,
    props: {
      formId: '68d3906bd720f71c6ba952e1',
      googleMapsApiKey: 'VOTRE_CLE_API'
    }
  });
});

onUnmounted(() => {
  if (formulaireInstance) {
    formulaireInstance.$destroy();
  }
});
</script>

4. Dans une application Svelte

<script>
import Formulaire from 'lucien-form-svelte';
import 'lucien-form-svelte/dist/style.css';
</script>

<Formulaire
  formId="68d3906bd720f71c6ba952e1"
  googleMapsApiKey="VOTRE_CLE_API"
/>

5. Dans React

import { useEffect, useRef } from 'react';
import Formulaire from 'lucien-form-svelte';
import 'lucien-form-svelte/dist/style.css';

function FormulaireComponent() {
  const containerRef = useRef(null);
  const formulaireRef = useRef(null);

  useEffect(() => {
    if (containerRef.current) {
      formulaireRef.current = new Formulaire({
        target: containerRef.current,
        props: {
          formId: '68d3906bd720f71c6ba952e1'
        }
      });
    }

    return () => {
      if (formulaireRef.current) {
        formulaireRef.current.$destroy();
      }
    };
  }, []);

  return <div ref={containerRef}></div>;
}

Props

| Prop | Type | Défaut | Description | |------|------|--------|-------------| | formId | string \| null | null | ID du formulaire à charger depuis l'API | | title | string | "Mon formulaire" | Titre du formulaire (fallback) | | googleMapsApiKey | string | "" | Clé API Google Maps pour l'autocomplétion d'adresse |

Configuration de l'API

Le package se connecte à l'API : https://api-gabarit.promo.dev

Vous pouvez configurer un serveur personnalisé via :

window.promodevServer = "https://votre-api.com";

Structure JSON du formulaire

{
  "title": "Mon formulaire",
  "lang": "fr",
  "form": [
    {
      "name": "Étape 1",
      "fields": [
        {
          "name": "email",
          "label": "Email",
          "component": "Input",
          "type": "email",
          "required": true,
          "confirmation": true,
          "confirmationLabel": "Confirmez votre email",
          "blockTempEmailProviders": true,
          "save_to": "email"
        },
        {
          "name": "age",
          "label": "Âge",
          "component": "InputNumber",
          "required": true,
          "validation": "min_value:18",
          "save_to": "age"
        }
      ]
    }
  ]
}

Composants disponibles

Input : Champ texte classique
Email : Email avec validation et confirmation
Phone : Téléphone avec validation internationale
InputNumber : Nombre avec min/max
Textarea : Zone de texte multiligne
Select : Liste déroulante
MultiSelect : Sélection multiple avec recherche
Radio : Boutons radio
Checkbox : Cases à cocher
DateInput : Sélecteur de date avec calcul d'âge
Address : Adresse avec Google Maps autocomplete
IBAN : Validation IBAN
SIREN : Validation SIREN français
SecuriteSociale : Numéro de sécurité sociale
MultipleFiles : Upload de fichiers multiples

Validation

Règles de validation disponibles :

required
email
min_value:18
max_value:100
min_length:5
max_length:50
length:9
numeric
alpha
alphanumeric
url
phone

Langues supportées

🇫🇷 Français, 🇬🇧 Anglais, 🇩🇪 Allemand, 🇪🇸 Espagnol, 🇮🇹 Italien, 🇵🇹 Portugais, 🇳🇱 Néerlandais, 🇵🇱 Polonais, 🇷🇴 Roumain, 🇬🇷 Grec, 🇨🇿 Tchèque, 🇸🇪 Suédois, 🇭🇺 Hongrois, 🇧🇬 Bulgare, 🇩🇰 Danois, 🇫🇮 Finlandais, 🇸🇰 Slovaque, 🇭🇷 Croate, 🇪🇪 Estonien, 🇱🇻 Letton, 🇱🇹 Lituanien, 🇸🇮 Slovène, 🇲🇹 Maltais, 🇦🇱 Albanais

Développement

# Installer les dépendances
npm install

# Développement
npm run dev

# Build
npm run build

# Vérifier TypeScript
npm run check

# Publier une nouvelle version
npm version patch  # ou minor/major
npm publish

License

MIT © PromoDev

Support

Problèmes ou questions ? Créez une issue sur GitHub

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

lucien-form-svelte

Fonctionnalités

Installation

Via NPM

Via CDN (unpkg)

Via CDN (jsdelivr)

Utilisation

1. Dans un fichier HTML classique (CDN)

2. Dans WordPress

3. Dans une application Vue 3

4. Dans une application Svelte

5. Dans React

Props

Configuration de l'API

Structure JSON du formulaire

Composants disponibles

Validation

Langues supportées

Développement

License

Support