From c974cab36700ee20f244b20e9ce7bf506fd9b9d6 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 26 May 2024 12:41:32 +0300
Subject: [PATCH] Improved headless toasts

---
 components/lib/toast/Toast.vue           |   2 +-
 components/lib/toast/style/ToastStyle.js |  16 +++-
 doc/toast/HeadlessDoc.vue                | 106 +++++++++++------------
 3 files changed, 64 insertions(+), 60 deletions(-)

diff --git a/components/lib/toast/Toast.vue b/components/lib/toast/Toast.vue
index 05f3617d7..0b6210ea4 100755
--- a/components/lib/toast/Toast.vue
+++ b/components/lib/toast/Toast.vue
@@ -1,7 +1,7 @@
 <template>
     <Portal>
         <div ref="container" :class="cx('root')" :style="sx('root', true, { position })" v-bind="ptmi('root')">
-            <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave" v-bind="{ ...ptm('message'), ...ptm('transition') }">
+            <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave" v-bind="{ ...ptm('transition') }">
                 <ToastMessage
                     v-for="msg of messages"
                     :key="msg.id"
diff --git a/components/lib/toast/style/ToastStyle.js b/components/lib/toast/style/ToastStyle.js
index 5147eedb1..2b156e530 100644
--- a/components/lib/toast/style/ToastStyle.js
+++ b/components/lib/toast/style/ToastStyle.js
@@ -8,11 +8,7 @@ const theme = ({ dt }) => `
 }
 
 .p-toast-message {
-    backdrop-filter: blur(${dt('toast.blur')});
     margin: 0 0 1rem 0;
-    border-radius: ${dt('toast.border.radius')};
-    border-width: ${dt('toast.border.width')};
-    border-style: solid;
 }
 
 .p-toast-message-icon {
@@ -67,6 +63,18 @@ const theme = ({ dt }) => `
     user-select: none;
 }
 
+.p-toast-message-info,
+.p-toast-message-success,
+.p-toast-message-warn,
+.p-toast-message-error,
+.p-toast-message-secondary,
+.p-toast-message-contrast {
+    border-width: ${dt('toast.border.width')};
+    border-style: solid;
+    backdrop-filter: blur(${dt('toast.blur')});
+    border-radius: ${dt('toast.border.radius')};
+}
+
 .p-toast-close-icon {
     font-size: ${dt('toast.close.icon.size')};
     width: ${dt('toast.close.icon.size')};
diff --git a/doc/toast/HeadlessDoc.vue b/doc/toast/HeadlessDoc.vue
index addf911de..99c76452b 100644
--- a/doc/toast/HeadlessDoc.vue
+++ b/doc/toast/HeadlessDoc.vue
@@ -5,19 +5,18 @@
     <div class="card flex justify-center">
         <Toast position="top-center" group="headless" @close="visible = false">
             <template #container="{ message, closeCallback }">
-                <section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px">
-                    <i class="pi pi-cloud-upload text-green-400 text-2xl"></i>
-                    <div class="flex flex-col gap-4 w-full">
-                        <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
-                        <p class="m-0 text-base text-white">{{ message.detail }}</p>
-                        <div class="flex flex-col gap-2">
-                            <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar>
-                            <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
-                        </div>
-                        <div class="flex gap-4 mb-4">
-                            <Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
-                            <Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
-                        </div>
+                <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
+                    <div class="flex items-center gap-5">
+                        <i class="pi pi-cloud-upload text-primary-50 dark:text-primary-900 text-2xl"></i>
+                        <span class="font-bold text-base text-primary-50 dark:text-primary-900">{{ message.summary }}</span>
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
+                        <label class="text-sm font-bold text-primary-50 dark:text-primary-900">{{ progress }}% uploaded</label>
+                    </div>
+                    <div class="flex gap-4 mb-4 justify-end">
+                        <Button label="Another Upload?" size="small" @click="closeCallback"></Button>
+                        <Button label="Cancel" size="small" @click="closeCallback"></Button>
                     </div>
                 </section>
             </template>
@@ -38,19 +37,18 @@ export default {
                 basic: `
 <Toast position="top-center" group="headless" @close="visible = false">
     <template #container="{ message, closeCallback }">
-        <section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px">
-            <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
-            <div class="flex flex-col gap-4 w-full">
-                <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
-                <p class="m-0 text-base text-surface-700">{{ message.detail }}</p>
-                <div class="flex flex-col gap-2">
-                    <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar>
-                    <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
-                </div>
-                <div class="flex gap-4 mb-4">
-                    <Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
-                    <Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
-                </div>
+        <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
+            <div class="flex items-center gap-5">
+                <i class="pi pi-cloud-upload text-primary-50 dark:text-primary-900 text-2xl"></i>
+                <span class="font-bold text-base text-primary-50 dark:text-primary-900">{{ message.summary }}</span>
+            </div>
+            <div class="flex flex-col gap-2">
+                <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
+                <label class="text-sm font-bold text-primary-50 dark:text-primary-900">{{ progress }}% uploaded</label>
+            </div>
+            <div class="flex gap-4 mb-4 justify-end">
+                <Button label="Another Upload?" size="small" @click="closeCallback"></Button>
+                <Button label="Cancel" size="small" @click="closeCallback"></Button>
             </div>
         </section>
     </template>
@@ -62,19 +60,18 @@ export default {
     <div class="card flex justify-center">
         <Toast position="top-center" group="headless" @close="visible = false">
             <template #container="{ message, closeCallback }">
-                <section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px">
-                    <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
-                    <div class="flex flex-col gap-4 w-full">
-                        <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
-                        <p class="m-0 text-base text-surface-700">{{ message.detail }}</p>
-                        <div class="flex flex-col gap-2">
-                            <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar>
-                            <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
-                        </div>
-                        <div class="flex gap-4 mb-4">
-                            <Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
-                            <Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
-                        </div>
+                <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
+                    <div class="flex items-center gap-5">
+                        <i class="pi pi-cloud-upload text-primary-50 dark:text-primary-900 text-2xl"></i>
+                        <span class="font-bold text-base text-primary-50 dark:text-primary-900">{{ message.summary }}</span>
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
+                        <label class="text-sm font-bold text-primary-50 dark:text-primary-900">{{ progress }}% uploaded</label>
+                    </div>
+                    <div class="flex gap-4 mb-4 justify-end">
+                        <Button label="Another Upload?" size="small" @click="closeCallback"></Button>
+                        <Button label="Cancel" size="small" @click="closeCallback"></Button>
                     </div>
                 </section>
             </template>
@@ -100,7 +97,7 @@ export default {
     methods: {
         show() {
             if (!this.visible) {
-                this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless' });
+                this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless', styleClass: 'backdrop-blur-lg' });
                 this.visible = true;
                 this.progress = 0;
 
@@ -129,19 +126,18 @@ export default {
     <div class="card flex justify-center">
         <Toast position="top-center" group="headless" @close="visible = false">
             <template #container="{ message, closeCallback }">
-                <section class="flex p-4 gap-4 w-full bg-black/90" style="border-radius: 10px">
-                    <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
-                    <div class="flex flex-col gap-4 w-full">
-                        <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
-                        <p class="m-0 text-base text-surface-700">{{ message.detail }}</p>
-                        <div class="flex flex-col gap-2">
-                            <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }"></ProgressBar>
-                            <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
-                        </div>
-                        <div class="flex gap-4 mb-4">
-                            <Button label="Another Upload?" text class="py-1 px-2" @click="closeCallback"></Button>
-                            <Button label="Cancel" text class="text-white py-1 px-2" @click="closeCallback"></Button>
-                        </div>
+                <section class="flex flex-col p-4 gap-4 w-full bg-primary/70 rounded-xl">
+                    <div class="flex items-center gap-5">
+                        <i class="pi pi-cloud-upload text-primary-50 dark:text-primary-900 text-2xl"></i>
+                        <span class="font-bold text-base text-primary-50 dark:text-primary-900">{{ message.summary }}</span>
+                    </div>
+                    <div class="flex flex-col gap-2">
+                        <ProgressBar :value="progress" :showValue="false" :style="{ height: '4px' }" pt:value:class="!bg-primary-50 dark:!bg-primary-900" class="!bg-primary/80"></ProgressBar>
+                        <label class="text-sm font-bold text-primary-50 dark:text-primary-900">{{ progress }}% uploaded</label>
+                    </div>
+                    <div class="flex gap-4 mb-4 justify-end">
+                        <Button label="Another Upload?" size="small" @click="closeCallback"></Button>
+                        <Button label="Cancel" size="small" @click="closeCallback"></Button>
                     </div>
                 </section>
             </template>
@@ -166,7 +162,7 @@ onUnmounted(() => {
 
 const show = () => {
     if (!visible.value) {
-        toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless' });
+        toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless', styleClass: 'backdrop-blur-lg' });
         visible.value = true;
         progress.value = 0;
 
@@ -199,7 +195,7 @@ const show = () => {
     methods: {
         show() {
             if (!this.visible) {
-                this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless' });
+                this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless', styleClass: 'backdrop-blur-lg' });
                 this.visible = true;
                 this.progress = 0;