From 1685a34bb245aae9f5a9308d56fc43b05a936a63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?=
 <37316281+yanhao98@users.noreply.github.com>
Date: Sun, 8 Dec 2024 17:43:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=20ToastService?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=B6=88=E6=81=AF=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=B9=B6=E6=9B=B4=E6=96=B0=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/primevue.vue | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/primevue.vue b/src/components/primevue.vue
index 119887a..e0ebe5d 100644
--- a/src/components/primevue.vue
+++ b/src/components/primevue.vue
@@ -1,10 +1,23 @@
 <script setup lang="ts">
 // @ts-expect-error - Ignore missing types
 import ToastEventBus from 'primevue/toasteventbus';
+import type { ToastServiceMethods } from 'primevue/toastservice';
 
-function showToast() {
-  ToastEventBus.emit('add', { severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
-}
+// https://github.com/primefaces/primevue/blob/61929eae7526015af0362fc5889f2af7527403d1/packages/primevue/src/toastservice/ToastService.js
+const ToastService: ToastServiceMethods = {
+  add: (message) => {
+    ToastEventBus.emit('add', message);
+  },
+  remove: (message) => {
+    ToastEventBus.emit('remove', message);
+  },
+  removeGroup: (group) => {
+    ToastEventBus.emit('remove-group', group);
+  },
+  removeAllGroups: () => {
+    ToastEventBus.emit('remove-all-groups');
+  },
+};
 </script>
 
 <template>
@@ -26,6 +39,14 @@ function showToast() {
 
     <DatePicker dateFormat="dd/mm/yy" />
 
-    <Button @click="showToast">ToastService</Button>
+    <Button @click="ToastService.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 })">
+      ToastService
+    </Button>
   </div>
 </template>
+
+<style>
+.p-toast {
+  max-width: calc(100% - 50px);
+}
+</style>