This commit is contained in:
JLEROY
2025-06-24 12:05:10 +02:00
parent aab8c44567
commit 3f503ebfb7
3 changed files with 36 additions and 55 deletions

View File

@@ -9,12 +9,12 @@
## 📦 Installation ## 📦 Installation
```bash ```bash
npm install @johanleroy/dialogue-lib npm install @angular/animations @johanleroy/dialogue-lib
``` ```
# 🚀 Utilisation de base # 🚀 Utilisation de base
### 1. Import du provider dans main.ts ### 1. Import du provider dans app.config.ts
```TS ```TS
import { bootstrapApplication } from '@angular/platform-browser'; import { bootstrapApplication } from '@angular/platform-browser';
@@ -40,62 +40,46 @@ export class HomeComponent {
private dialogue = inject(DialogueService); private dialogue = inject(DialogueService);
showAlert() { showSuccess() {
this.dialogue.confirm({ this.dialogue.confirm({
title: 'Attention !', type: 'success',
message: 'Cette action est irréversible.', title: 'Bravo !',
icon: 'warning', text: 'Vous avez réussie',
timeout: 5000 confirmText: 'Okay !',
timeout: 800,
backdropOpacity: 0.5,
}); });
} }
async showConfirm() { showError() {
const confirmed = await this.dialogue.confirm({ this.dialogue.confirm({
title: 'Supprimer lélément ?', type: 'error',
message: 'Cette action ne peut pas être annulée.', title: 'Aïeeeee !',
icon: 'trash' text: 'Une erreur est survenue',
confirmText: 'Mince !',
timeout: 800,
backdropOpacity: 0.5,
}); });
if (confirmed) {
// Suppression...
}
} }
showQuestion() {
this.dialogue.confirm({
type: 'question',
title: 'Êtes-vous sûr ?',
text: 'Supprimer définitivement l\'utilisateur ?',
confirmText: 'Oui, supprimer',
cancelText: 'Annuler',
backdropOpacity: 0.5,
}).then((res: boolean) => {
if (res) {
this.deleteUser(id);
}
});
}
} }
``` ```
# ⚙️ API
- alert(options: DialogueOptions): void
- title (string) Titre de lalerte
- message (string) Message affiché
- icon? (string) Nom de licône (ex : info, warning, check, trash)
- timeout? (number) Temps avant fermeture automatique (en ms)
- backdrop? (boolean) Affiche un fond sombre (par défaut : true)
- confirm(options: DialogueOptions): Promise<boolean>
- Comme alert, mais avec boutons Oui / Non
- Retourne true si l'utilisateur confirme.
# 🎨 Personnalisation
Tu peux override les styles avec Tailwind, ou créer un thème :
```CSS
/* styles.css */
.dialogue-container {
@apply bg-white rounded-xl shadow-xl p-4;
}
.dialogue-icon-warning {
@apply text-yellow-500;
}
```
# 📁 Structure recommandée
- src/lib/dialogue.service.ts : gestion centrale
- src/components/alert.component.ts : composant standalone
- src/interfaces/options.ts : interface DialogueOptions
- src/styles/dialogue.css : classes Tailwind par défaut
# 👨‍💻 Contribution # 👨‍💻 Contribution
Les PR sont les bienvenues ! Clone le repo : Les PR sont les bienvenues ! Clone le repo :

View File

@@ -1,10 +1,7 @@
{ {
"$schema": "./node_modules/ng-packagr/ng-package.schema.json", "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
"dest": "dist", "dest": "./dist/dialogue-lib",
"lib": { "lib": {
"entryFile": "src/public-api.ts" "entryFile": "src/public-api.ts"
}, }
"allowedNonPeerDependencies": [
"@angular/animations"
]
} }

View File

@@ -1,6 +1,6 @@
{ {
"name": "@johanleroy/dialogue-lib", "name": "@johanleroy/dialogue-lib",
"version": "1.0.1", "version": "1.0.2",
"description": "Système de dialogue Angular standalone avec alertes personnalisables", "description": "Système de dialogue Angular standalone avec alertes personnalisables",
"author": "Johan Leroy", "author": "Johan Leroy",
"license": "MIT", "license": "MIT",