From c79d79ad937ecbda68ac4402a297ebfbea59052e Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 25 Oct 2023 18:22:15 +0300
Subject: [PATCH] Update toast samples

---
 doc/toast/BasicDoc.vue        |  4 +-
 doc/toast/MultipleDoc.vue     |  1 -
 doc/toast/PositionDoc.vue     | 22 ++++-----
 doc/toast/SeverityDoc.vue     | 10 ++--
 doc/toast/StickyDoc.vue       | 14 +++---
 doc/toast/TemplateDoc.vue     | 89 +++++++++++++----------------------
 doc/toast/ToastServiceDoc.vue |  2 +-
 7 files changed, 58 insertions(+), 84 deletions(-)

diff --git a/doc/toast/BasicDoc.vue b/doc/toast/BasicDoc.vue
index a3b7aac19..fcb43a85a 100644
--- a/doc/toast/BasicDoc.vue
+++ b/doc/toast/BasicDoc.vue
@@ -1,8 +1,8 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface in PrimeVue that defines various properties such as
-            severity, summary and detail.
+            Ideal location of a Toast is the main application template so that it can be used by any component within the application. A single message is represented by the Message interface that defines properties such as severity, summary and
+            detail.
         </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
diff --git a/doc/toast/MultipleDoc.vue b/doc/toast/MultipleDoc.vue
index 1e5e786d6..6654b3bcb 100644
--- a/doc/toast/MultipleDoc.vue
+++ b/doc/toast/MultipleDoc.vue
@@ -16,7 +16,6 @@ export default {
                 basic: `
 <Toast />
 <Button label="Multiple" severity="warning" @click="showMultiple()" />
-
 `,
                 options: `
 <template>
diff --git a/doc/toast/PositionDoc.vue b/doc/toast/PositionDoc.vue
index 33623e8c1..0c5c09509 100644
--- a/doc/toast/PositionDoc.vue
+++ b/doc/toast/PositionDoc.vue
@@ -1,12 +1,12 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Location of the messages is customized with the <i>position</i> property.</p>
+        <p>A message can be targeted to a certain Toast component by matching the <i>group</i> keys whereas location is customized with the <i>position</i>.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <div class="flex flex-wrap gap-2">
-            <Button label="Top Left" class="mr-2" @click="showTopLeft" />
+            <Button label="Top Left" @click="showTopLeft" />
             <Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
-            <Button label="Bottom Right" severity="success" @click="showBottomRight" />
+            <Button label="Bottom Right" severity="help" @click="showBottomRight" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -22,11 +22,9 @@ export default {
 <Toast position="bottom-left" group="bl" />
 <Toast position="bottom-right" group="br" />
 
-<div class="flex flex-wrap gap-2">
-    <Button label="Top Left" class="mr-2" @click="showTopLeft" />
-    <Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
-    <Button label="Bottom Right" severity="success" @click="showBottomRight" />
-</div>
+<Button label="Top Left" @click="showTopLeft" />
+<Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
+<Button label="Bottom Right" severity="help" @click="showBottomRight" />
 `,
                 options: `
 <template>
@@ -36,9 +34,9 @@ export default {
         <Toast position="bottom-right" group="br" />
 
         <div class="flex flex-wrap gap-2">
-            <Button label="Top Left" class="mr-2" @click="showTopLeft" />
+            <Button label="Top Left" @click="showTopLeft" />
             <Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
-            <Button label="Bottom Right" severity="success" @click="showBottomRight" />
+            <Button label="Bottom Right" severity="help" @click="showBottomRight" />
         </div>
     </div>
 </template>
@@ -67,9 +65,9 @@ export default {
         <Toast position="bottom-right" group="br" />
         
         <div class="flex flex-wrap gap-2">
-            <Button label="Top Left" class="mr-2" @click="showTopLeft" />
+            <Button label="Top Left" @click="showTopLeft" />
             <Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
-            <Button label="Bottom Right" severity="success" @click="showBottomRight" />
+            <Button label="Bottom Right" severity="help" @click="showBottomRight" />
         </div>
     </div>
 </template>
diff --git a/doc/toast/SeverityDoc.vue b/doc/toast/SeverityDoc.vue
index 668ff1dec..3111f7891 100644
--- a/doc/toast/SeverityDoc.vue
+++ b/doc/toast/SeverityDoc.vue
@@ -20,12 +20,10 @@ export default {
             code: {
                 basic: `
 <Toast />
-<div class="flex flex-wrap gap-2">
-    <Button label="Success" severity="success" @click="showSuccess" />
-    <Button label="Info" severity="info" @click="showInfo" />
-    <Button label="Warn" severity="warning" @click="showWarn" />
-    <Button label="Error" severity="danger" @click="showError" />
-</div>
+<Button label="Success" severity="success" @click="showSuccess" />
+<Button label="Info" severity="info" @click="showInfo" />
+<Button label="Warn" severity="warning" @click="showWarn" />
+<Button label="Error" severity="danger" @click="showError" />
 `,
                 options: `
 <template>
diff --git a/doc/toast/StickyDoc.vue b/doc/toast/StickyDoc.vue
index 46b36582e..d473d3240 100644
--- a/doc/toast/StickyDoc.vue
+++ b/doc/toast/StickyDoc.vue
@@ -4,8 +4,8 @@
     </DocSectionText>
     <div class="card flex justify-content-center">
         <div class="flex flex-wrap gap-2">
-            <Button @click="showSticky" label="Sticky" severity="success" />
-            <Button label="Clear" @click="clear()" />
+            <Button @click="showSticky" label="Sticky" />
+            <Button label="Clear" severity="secondary" @click="clear()" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -19,15 +19,15 @@ export default {
                 basic: `
 <Toast />
 <Button @click="showSticky" label="Sticky" />
-<Button label="Clear" @click="clear()" />
+<Button label="Clear" severity="secondary" @click="clear()" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
-            <Button @click="showSticky" label="Sticky" severity="success" />
-            <Button label="Clear" @click="clear()" />
+            <Button @click="showSticky" label="Sticky" />
+            <Button label="Clear" severity="secondary" @click="clear()" />
         </div>
     </div>
 </template>
@@ -50,8 +50,8 @@ export default {
     <div class="card flex justify-content-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
-            <Button @click="showSticky" label="Sticky" severity="success" />
-            <Button label="Clear" @click="clear()" />
+            <Button @click="showSticky" label="Sticky" />
+            <Button label="Clear" severity="secondary" @click="clear()" />
         </div>
     </div>
 </template>
diff --git a/doc/toast/TemplateDoc.vue b/doc/toast/TemplateDoc.vue
index 816b700c4..cf2e5acef 100644
--- a/doc/toast/TemplateDoc.vue
+++ b/doc/toast/TemplateDoc.vue
@@ -5,19 +5,17 @@
     <div class="card flex justify-content-center">
         <Toast position="bottom-center" group="bc" @close="onClose">
             <template #message="slotProps">
-                <div class="flex flex-column align-items-center" style="flex: 1">
-                    <div class="text-center">
-                        <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
-                        <div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
-                    </div>
-                    <div class="flex gap-2">
-                        <Button severity="success" label="Yes" @click="onConfirm()"></Button>
-                        <Button severity="secondary" label="No" @click="onReject()"></Button>
+                <div class="flex flex-column align-items-start" style="flex: 1">
+                    <div class="flex align-items-center gap-2">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                        <span class="font-bold text-900">Amy Elsner</span>
                     </div>
+                    <div class="font-medium text-lg my-3 text-900">{{ slotProps.message.summary }}</div>
+                    <Button severity="success" outlined class="p-button-sm" label="Reply" @click="onReply()"></Button>
                 </div>
             </template>
         </Toast>
-        <Button @click="showTemplate" label="Confirm" />
+        <Button @click="showTemplate" label="View" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -31,38 +29,34 @@ export default {
                 basic: `
 <Toast position="bottom-center" group="bc" @close="onClose">
     <template #message="slotProps">
-        <div class="flex flex-column align-items-center" style="flex: 1">
-            <div class="text-center">
-                <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
-                <div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
-            </div>
-            <div class="flex gap-2">
-                <Button severity="success" label="Yes" @click="onConfirm()"></Button>
-                <Button severity="secondary" label="No" @click="onReject()"></Button>
+        <div class="flex flex-column align-items-start" style="flex: 1">
+            <div class="flex align-items-center gap-2">
+                <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+                <span class="font-bold text-900">Amy Elsner</span>
             </div>
+            <div class="font-medium text-lg my-3 text-900">{{ slotProps.message.summary }}</div>
+            <Button severity="success" outlined class="p-button-sm" label="Reply" @click="onReply()"></Button>
         </div>
     </template>
 </Toast>
-<Button @click="showTemplate" label="Confirm" />
+<Button @click="showTemplate" label="View" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
         <Toast position="bottom-center" group="bc" @close="onClose">
             <template #message="slotProps">
-                <div class="flex flex-column align-items-center" style="flex: 1">
-                    <div class="text-center">
-                        <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
-                        <div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
-                    </div>
-                    <div class="flex gap-2">
-                        <Button severity="success" label="Yes" @click="onConfirm()"></Button>
-                        <Button severity="secondary" label="No" @click="onReject()"></Button>
+                <div class="flex flex-column align-items-start" style="flex: 1">
+                    <div class="flex align-items-center gap-2">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                        <span class="font-bold text-900">Amy Elsner</span>
                     </div>
+                    <div class="font-medium text-lg my-3 text-900">{{ slotProps.message.summary }}</div>
+                    <Button severity="success" outlined class="p-button-sm" label="Reply" @click="onReply()"></Button>
                 </div>
             </template>
         </Toast>
-        <Button @click="showTemplate" label="Confirm" />
+        <Button @click="showTemplate" label="View" />
     </div>
 </template>
 
@@ -76,15 +70,11 @@ export default {
     methods: {
         showTemplate() {
             if (!this.visible) {
-                this.$toast.add({ severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc' });
+                this.$toast.add({ severity: 'success', summary: 'Can you send me the report?', group: 'bc' });
                 this.visible = true;
             }
         },
-        onConfirm() {
-            this.$toast.removeGroup('bc');
-            this.visible = false;
-        },
-        onReject() {
+        onReply() {
             this.$toast.removeGroup('bc');
             this.visible = false;
         },
@@ -100,19 +90,17 @@ export default {
     <div class="card flex justify-content-center">
         <Toast position="bottom-center" group="bc" @close="onClose">
             <template #message="slotProps">
-                <div class="flex flex-column align-items-center" style="flex: 1">
-                    <div class="text-center">
-                        <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
-                        <div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
-                    </div>
-                    <div class="flex gap-2">
-                        <Button severity="success" label="Yes" @click="onConfirm()"></Button>
-                        <Button severity="secondary" label="No" @click="onReject()"></Button>
+                <div class="flex flex-column align-items-start" style="flex: 1">
+                    <div class="flex align-items-center gap-2">
+                        <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                        <span class="font-bold text-900">Amy Elsner</span>
                     </div>
+                    <div class="font-medium text-lg my-3 text-900">{{ slotProps.message.summary }}</div>
+                    <Button severity="success" outlined class="p-button-sm" label="Reply" @click="onReply()"></Button>
                 </div>
             </template>
         </Toast>
-        <Button @click="showTemplate" label="Confirm" />
+        <Button @click="showTemplate" label="View" />
     </div>
 </template>
 
@@ -124,17 +112,12 @@ const visible = ref(false);
 
 const showTemplate = () => {
     if (!visible.value) {
-        toast.add({ severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc' });
+        toast.add({ severity: 'success', summary: 'Can you send me the report?', group: 'bc' });
         visible.value = true;
     } 
 };
 
-const onConfirm = () => {
-    toast.removeGroup('bc');
-    visible.value = false;
-}
-
-const onReject = () => {
+const onReply = () => {
     toast.removeGroup('bc');
     visible.value = false;
 }
@@ -150,15 +133,11 @@ const onClose = () => {
     methods: {
         showTemplate() {
             if (!this.visible) {
-                this.$toast.add({ severity: 'warn', summary: 'Are you sure?', detail: 'Proceed to confirm', group: 'bc' });
+                this.$toast.add({ severity: 'success', summary: 'Can you send me the report?', group: 'bc' });
                 this.visible = true;
             }
         },
-        onConfirm() {
-            this.$toast.removeGroup('bc');
-            this.visible = false;
-        },
-        onReject() {
+        onReply() {
             this.$toast.removeGroup('bc');
             this.visible = false;
         },
diff --git a/doc/toast/ToastServiceDoc.vue b/doc/toast/ToastServiceDoc.vue
index b58559160..e9f344c42 100644
--- a/doc/toast/ToastServiceDoc.vue
+++ b/doc/toast/ToastServiceDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
     <div class="doc-section-description">
-        <p><i>$toast</i> is available as a property in the application instance for Options API. The service can be injected with the <i>useToast</i> function for Composition API.</p>
+        <p>The service is available with the <i>useToast</i> function for Composition API or using the <i>$toast</i> property of the application for Options API.</p>
     </div>
     <DocSectionCode :code="code2" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>