From 26fbfc87d6a26d9aa9ce817988b95191529efdbd Mon Sep 17 00:00:00 2001
From: j0rgedev <jorgeoah.20@outlook.com>
Date: Wed, 25 Dec 2024 14:58:10 -0500
Subject: [PATCH] docs(toast): document all remove methods

---
 apps/showcase/doc/toast/RemovingToastsDoc.vue | 174 ++++++++++++++++++
 apps/showcase/pages/toast/index.vue           |   6 +
 2 files changed, 180 insertions(+)
 create mode 100644 apps/showcase/doc/toast/RemovingToastsDoc.vue

diff --git a/apps/showcase/doc/toast/RemovingToastsDoc.vue b/apps/showcase/doc/toast/RemovingToastsDoc.vue
new file mode 100644
index 000000000..4b19e6ed3
--- /dev/null
+++ b/apps/showcase/doc/toast/RemovingToastsDoc.vue
@@ -0,0 +1,174 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>The Toast Service provides multiple methods for removing toasts programmatically, whether it is a <i>specific</i> toast, all toasts in a <i>group</i>, or <i>all</i> toasts currently displayed.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <Toast />
+        <Toast group="warning" position="bottom-right"/>
+        <div class="flex flex-col gap-4">
+            <div class="flex flex-wrap gap-2 justify-center">
+                <Button @click="addToast" label="Add Toast" />
+                <Button @click="addWarningToast" label="Add Warning Toast" />
+            </div>
+            <div class="flex flex-wrap gap-2 justify-center">
+                <Button @click="clearToast" label="Clear Toast" severity="secondary" />
+                <Button @click="clearAllWarningToasts" label="Clear All Warning Toasts" severity="secondary" />
+                <Button @click="clearAll" label="Clear All" severity="secondary" />
+            </div>
+        </div>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            generalToastMessage: {
+                severity: 'info',
+                summary: 'General Toast',
+                detail: 'General toast message',
+            },
+            warningToastMessage: {
+                severity: 'warn',
+                summary: 'Warning Toast',
+                detail: 'Warning toast message',
+                group: 'warning'
+            },
+            code: {
+                basic: `
+<Toast />
+<Toast group="warning" position="bottom-right"/>
+
+<Button @click="addToast" label="Add Toast" />
+<Button @click="addWarningToast" label="Add Warning Toast" />
+
+<Button @click="clearToast" label="Clear Toast" severity="secondary" />
+<Button @click="clearAllWarningToasts" label="Clear All Warning Toasts" severity="secondary" />
+<Button @click="clearAll" label="Clear All" severity="secondary" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <Toast group="warning" position="bottom-right"/>
+        <div class="flex flex-col gap-4">
+            <div class="flex flex-wrap gap-2 justify-center">
+                <Button @click="addToast" label="Add Toast" />
+                <Button @click="addWarningToast" label="Add Warning Toast" />
+            </div>
+            <div class="flex flex-wrap gap-2 justify-center">
+                <Button @click="clearToast" label="Clear Toast" severity="secondary" />
+                <Button @click="clearAllWarningToasts" label="Clear All Warning Toasts" severity="secondary" />
+                <Button @click="clearAll" label="Clear All" severity="secondary" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            generalToastMessage: {
+                severity: 'info',
+                summary: 'General Toast',
+                detail: 'General toast message',
+            },
+            warningToastMessage: {
+                severity: 'warn',
+                summary: 'Warning Toast',
+                detail: 'Warning toast message',
+                group: 'warning'
+            },
+        };
+    },
+    methods: {
+        addToast() {
+            this.$toast.add(this.generalToastMessage);
+        },
+        clearToast() {
+            this.$toast.remove(this.generalToastMessage);
+        },
+        addWarningToast() {
+            this.$toast.add(this.warningToastMessage);
+        },
+        clearAllWarningToasts() {
+            this.$toast.removeGroup('warning');
+        },
+        clearAll() {
+            this.$toast.removeAllGroups();
+        }
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Toast />
+        <Toast group="warning" position="bottom-right"/>
+        <div class="flex flex-col gap-4">
+            <div class="flex flex-wrap gap-2 justify-center">
+                <Button @click="addToast" label="Add Toast" />
+                <Button @click="addWarningToast" label="Add Warning Toast" />
+            </div>
+            <div class="flex flex-wrap gap-2 justify-center">
+                <Button @click="clearToast" label="Clear Toast" severity="secondary" />
+                <Button @click="clearAllWarningToasts" label="Clear All Warning Toasts" severity="secondary" />
+                <Button @click="clearAll" label="Clear All" severity="secondary" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { useToast } from 'primevue/usetoast';
+
+const toast = useToast();
+
+const generalToastMessage = {
+    severity: 'info',
+    summary: 'General Toast',
+    detail: 'General toast message',
+};
+
+const warningToastMessage = {
+    severity: 'warn',
+    summary: 'Warning Toast',
+    detail: 'Warning toast message',
+    group: 'warning'
+};
+
+const addToast = () => toast.add(generalToastMessage);
+
+const clearToast = () => toast.remove(generalToastMessage);
+
+const addWarningToast = () => toast.add(warningToastMessage);
+
+const clearAllWarningToasts = () => toast.removeGroup('warning');
+
+const clearAll = () => toast.removeAllGroups();
+<\/script>
+`
+            },
+        };
+    },
+    methods: {
+        addToast() {
+            this.$toast.add(this.generalToastMessage);
+        },
+        clearToast() {
+            this.$toast.remove(this.generalToastMessage);
+        },
+        addWarningToast() {
+            this.$toast.add(this.warningToastMessage);
+        },
+        clearAllWarningToasts() {
+            this.$toast.removeGroup('warning');
+        },
+        clearAll() {
+            this.$toast.removeAllGroups();
+        }
+    }
+};
+</script>
diff --git a/apps/showcase/pages/toast/index.vue b/apps/showcase/pages/toast/index.vue
index 924d36f1a..8daeea617 100755
--- a/apps/showcase/pages/toast/index.vue
+++ b/apps/showcase/pages/toast/index.vue
@@ -15,6 +15,7 @@ import TemplateDoc from '@/doc/toast/TemplateDoc.vue';
 import ToastServiceDoc from '@/doc/toast/ToastServiceDoc.vue';
 import PTComponent from '@/doc/toast/pt/index.vue';
 import ThemingDoc from '@/doc/toast/theming/index.vue';
+import RemovingToastsDoc from '@/doc/toast/RemovingToastsDoc.vue';
 
 export default {
     data() {
@@ -65,6 +66,11 @@ export default {
                     label: 'Headless',
                     component: HeadlessDoc
                 },
+                {
+                    id: 'remove-toast',
+                    label: 'Removing Toasts',
+                    component: RemovingToastsDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',