UI Notification 🔔

UI Notification est un composant de notifications moderne pour Vue 3, conçu pour les dashboards, SaaS et applications métier.
Il fournit un dropdown de notifications complet avec gestion des états, catégories, priorités et internationalisation.

✨ Fonctionnalités

• 🔔 Icône cloche avec compteur de non-lus
• 📬 Dropdown interactif
• 🟢 Marquer comme lu / tout marquer comme lu
• ❌ Suppression individuelle ou globale
• 🎨 Catégories et priorités avec styles dynamiques
• 🌍 Internationalisation intégrée
• ⏱ Affichage du temps relatif
• 🧠 Store Pinia centralisé
• 🧩 Composables prêts à l’emploi
• 🧪 Full TypeScript

📦 Installation

npm install @axproo/ui-notification pinia vue

🔗 Peer Dependencies

Conformes au package.json :

| Package | Version | | ------- | ------- | | vue | ^3.5.24 | | pinia | ^3.0.4 | | vite | ^7.2.4 |

📁 Build & Outputs

Le build génère :

• dist/ui-notification.es.js → ESM
• dist/ui-notification.umd.js → UMD
• dist/index.d.ts → Types TypeScript

npm run build

🚀 Utilisation rapide

Importer la librairie

import {
  useNotifications,
  useNotificationStore,
  useNotificationI18n,
  formatTimeAgo,
  NotificationCategory,
  NotificationPriority
} from 'ui-notification'

Initialiser les notifications

Les plugins AXPROO s’initialisent via app.use() avec une configuration centralisée.

Exemple (main.ts)

import { createApp } from 'vue'
import App from './App.vue'

import { NotificationPlugin } from '@axproo/ui-notification'

const app = createApp(App)

app.use(NotificationPlugin, {
    apiBaseUrl: import.meta.env.VITE_API_URL,
    enableMock: import.meta.env.DEV,
    wsBaseUrl: import.meta.env.VITE_API_WS
})

app.mount('#app')

Exemple (<script setup lang=ts>)

import { useI18n } from 'vue-i18n'
import { Ref } from 'vue'
import { Language } from '@axproo/ui-topbar'

const { locale } = useI18n()

const {
  notifications,
  unreadCount
} = useNotifications(locale as Ref<Language>)

⚙️ Options communes

| Option | Type | Description | | ------------ | --------- | ------------------------- | | apiBaseUrl | string | URL de l’API backend | | enableMock | boolean | Active le mode mock (DEV) |

🔔 Options spécifiques – Notification

| Option | Type | Description | | ----------- | -------- | ------------------------------------------- | | wsBaseUrl | string | URL WebSocket pour notifications temps réel |

🌍 Variables d’environnement (.env)

VITE_API_URL=https://api.example.com
VITE_API_WS=wss://api.example.com/ws

💡 Tous les plugins AXPROO partagent la même philosophie de configuration pour garantir cohérence, simplicité et évolutivité.

Utiliser le store

const {
  markAllAsRead,
  markAsRead,
  remove,
  clearAll
} = useNotificationStore()

🧩 Exemple minimal

<template>
  <button>
    <Bell />
    <span v-if="unreadCount > 0">{{ unreadCount }}</span>
  </button>

  <div v-for="notif in notifications" :key="notif.id">
    <h4>{{ notif.title }}</h4>
    <p>{{ notif.message }}</p>
    <small>{{ formatTimeAgo(notif.timestamp, notif.language) }}</small>

    <button @click="markAsRead(notif.id)">Lire</button>
    <button @click="remove(notif.id)">Supprimer</button>
  </div>
</template>

🧠 Modèle de notification

interface Notification {
  id: string
  title: string
  message: string
  category: NotificationCategory
  priority: NotificationPriority
  isRead: boolean
  timestamp: number
  language: Language
}

🏷 Catégories

type NotificationCategory =
  | 'reservation'
  | 'payment'
  | 'reminder'
  | 'alert'
  | 'system'

🚨 Priorités

type NotificationPriority =
  | 'normal'
  | 'important'
  | 'urgent'

🌍 Internationalisation

const { t } = useNotificationI18n()

t.notification.title
t.notification.no
t.notification.delete
t.markAll
t.markAsRead
t.showAll
t.clearAll

🎨 Personnalisation UI

Exemple de mapping couleurs :

const colorClass = (category, priority) => {
  if (priority === 'urgent') return 'bg-red-500'
  if (category === 'payment') return 'bg-green-500'
  return 'bg-primary'
}

🧪 Cas d’usage

• Dashboard Admin
• SaaS
• ERP / CRM
• Applications métiers
• Topbar avec notifications

📄 Licence

MIT © AXPROO

🤝 Contribution

Les contributions sont bienvenues. Merci de respecter l’architecture TypeScript + Pinia.

🗺 Roadmap

• 🔄 Notifications temps réel (WebSocket)
• 🔔 Push notifications
• 🎨 Thèmes personnalisables
• 🧪 Tests unitaires