@axproo/form-store

Une librairie réutilisable pour la gestion dynamique des formulaires avec Vue 3 et Pinia, pensée pour être utilisée dans plusieurs projets. Elle fournit un FormStore standardisé et un composant Dynamic.vue capable de générer des champs dynamiquement à partir d’un modèle JSON.

🚀 Installation

npm install @axproo/form-store

⚙️ Configuration de base

Dans ton projet Vue 3, crée ton store personnalisé à partir du store générique exporté :

// src/stores/FormStore.js
import { useApi } from "@/core/http";
import i18n from "@/i18n";
import { createFormStore, Dynamic } from "@axproo/form-store";

export const useFormStore = createFormStore({
  api: useApi(),
  i18n: i18n.global,
});

🧩 Utilisation du composant Dynamic.vue

Tu peux ensuite utiliser le composant Dynamic pour générer tes champs dynamiquement :

<template>
  <Dynamic @update:modelValue="onChange" />
</template>

<script setup>
import { Dynamic } from "@axproo/form-store";

function onChange({ key, value }) {
  console.log(`Champ modifié : ${key} = ${value}`);
}
</script>

⚠️ Gestion des alertes avec le composant Alerts

<template>
  <Alerts :is-alert="forms.isAlert" :message="msg" :type="alert">
</template>

<script setup>
import { ref } from 'vue';
import { Alerts } from "@axproo/form-store"
import { useFormStore } from '@/stores/FormStore'

const forms = useFormStore();
const msg = ref(null)
const alert = ref("info") // info, success, danger, warning
</script>

🧠 Exemple de structure des champs

Le store gère automatiquement les champs du formulaire. Voici un exemple de structure que tu peux lui passer :

const fields = {
  username: {
    name: "username",
    type: "text",
    label: "Nom d'utilisateur",
    required: true,
    placeholder: "Entrez votre nom",
    class: "form-control",
  },
  password: {
    name: "password",
    type: "password",
    label: "Mot de passe",
    required: true,
    placeholder: "••••••••",
  },
};

📤 Soumission et validation du formulaire

Encapsule ton composant DynamicForm dans une balise et utilise la méthode submitForm() du store :

<template>
  <Alerts :is-alert="forms.isAlert" :message="msg" :type="alert">

  <form v-if="forms.isReady" @submit.prevent="submitForm" autocomplete="off">
    <DynamicForm @update:modelValue="onChange"/>
    <button class="btn btn-primary">Connexion</button>
  </form>
</template>

<script setup>
import { ref } from 'vue';
import { Alerts } from "@axproo/form-store"
import { useFormStore } from '@/stores/FormStore'

const forms = useFormStore();
const msg = ref(null)
const alert = ref(null)

const submitForm = async () => {
  try {
    const response = await forms.submitForm();
    alert.value = "success";
    msg.value = "Connexion réussie !";
  } catch (error) {
    alert.value = 'danger'
    msg.value = error.message || error
  }
}
</script>

🧰 Caractéristiques

✅ Génération automatique des champs (text, password, hidden, checkbox, etc.) ✅ Validation et gestion d’erreurs intégrées ✅ Gestion du formData et des erreurs via Pinia ✅ Support i18n pour les labels et messages ✅ Extensible avec vos propres composants personnalisés ✅ Intégration native avec toastr pour les notifications

📁 Structure du package

src/
 ├─ components/
 │   ├─ Alerts.vue
 │   └─ Dynamic.vue
 ├─ plugins/
 │   ├─ CheckboxForm.vue
 │   └─ InputForm.vue
 ├─ stores/
 │   └─ FormStore.js
 └─ utils/
     ├─ alert.js
     └─ toastr.js

🧑‍💻 Développement local

Pour tester ton package avant publication :

npm link
# puis dans ton projet Vue :
npm link @axproo/form-store

🏷️ Publication

npm version patch
npm publish --access public

Dans ton projet Vue, nettoie le cache npm si nécessaire et réinstalle:

rm -rf node_modules package-lock.json
npm install

📄 Licence

Ce projet est sous licence MIT. © 2025 AXPROO.

💬 Contact

👤 Christian Djomou 📧 [email protected]

🌐 https://axproo.com