@asdecode/vue-facturation

📦 Vue Invoice Renderer & Editor

Un composant Vue 3 modulaire pour afficher, modifier, imprimer des factures dynamiques, avec prise en charge de la TVA, TPS, CSS, multidevise et QR code. Idéal pour les applications SaaS, ERP ou freelances souhaitant gérer facilement des factures professionnelles.

🚀 Installation

npm install @asdecode/vue-facturation

🧩 Composants inclus

| Composant         | Description                                              |
| ----------------- | -------------------------------------------------------- |
| `InvoiceRenderer` | Affiche une facture stylée avec QR code, logo, signature |
| `InvoiceEditor`   | Permet d’éditer dynamiquement une facture et ses options |

🔧 Utilisation de base

<template>
  <InvoiceEditor v-if="editMode" :invoice="invoice" :options="invoiceOptions" @save="handleSave" />
  <div v-else>
    <InvoiceRenderer
      :key="key"
      :showButtons="showButtons"
      :invoice="invoice"
      :options="invoiceOptions"
      @edit-invoice="openEditMode"
      @print-invoice="printInvoice"
    />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { InvoiceRenderer, InvoiceEditor } from '@asdecode/vue-facturation'
import '@asdecode/vue-facturation/dist/vue-facturation.css'

export default defineComponent({
  components: { InvoiceRenderer, InvoiceEditor },
  data() {
    return {
      key: 1,
      invoice: {
        seller: {
          name: 'Asdecode Community',
          logo: 'https://asdecode.com/images/logo.png',
          website: 'https://asdecode.com',
          email: '[email protected]',
          phone: '+241 062 67 32 25',
          signature: 'https://example.com/signature.png'
        },
        client: {
          name: 'Jean Client',
          address: 'Libreville, Gabon',
          phone: '+241 07 654 321'
        },
        items: [
          { title: 'Service A', qty: 2, price: 50000 },
          { title: 'Produit B', qty: 1, price: 20000 }
        ],
        description: [
          { title: 'Services', content: 'Service A effectué avec succès' },
          { title: 'Remarques', content: 'Paiement dû sous 7 jours' }
        ],
        taxes: {
          tva: 18,
          tps: 0,
          css: 2
        },
        issued_at: '2025-07-10',
        due_at: '2025-07-17',
        number: '0023',
        type: 'definitive'
      },
      invoiceOptions: {
        showTaxes: true,
        useTVA: true,
        useTPS: false,
        useCSS: true,
        currency: 'XAF',
        locale: 'fr'
      },
      editMode: false,
      showButtons: true
    }
  },
  methods: {
    openEditMode() {
      this.editMode = true
    },
    handleSave(updatedInvoice) {
      this.invoice = updatedInvoice.invoice
      this.invoiceOptions = updatedInvoice.options
      this.editMode = false
      this.key++
    },
    printInvoice() {
      this.showButtons = false
      this.$nextTick(() => {
        window.print()
        setTimeout(() => (this.showButtons = true), 1000)
      })
    }
  }
})
</script>

⚙️ Props

🔹 InvoiceRenderer
| Prop          | Type      | Description                                       |
| ------------- | --------- | ------------------------------------------------- |
| `invoice`     | `Object`  | Les données complètes de la facture               |
| `options`     | `Object`  | Options d'affichage (TVA, devise, etc.)           |
| `showButtons` | `Boolean` | Affiche ou non les boutons PDF / Print / Modifier |

🔹 InvoiceEditor
| Prop      | Type     | Description                                  |
| --------- | -------- | -------------------------------------------- |
| `invoice` | `Object` | Les données initiales à modifier             |
| `options` | `Object` | Les options initiales de la facture à éditer |

📤 Événements émis

| Événement       | Description                                                    |
| --------------- | -------------------------------------------------------------- |
| `edit-invoice`  | Déclenché depuis `InvoiceRenderer` pour éditer                 |
| `print-invoice` | Déclenche l’impression navigateur                              |
| `save`          | Déclenché depuis `InvoiceEditor` avec les données mises à jour |

Customize configuration

📝 Licence MIT — © 2025 Asdecode