From caaa69ed11c67870e21c0b5d80d460d53dbfea75 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 25 Oct 2023 18:56:34 +0300
Subject: [PATCH] New headless demo for toast

---
 doc/toast/HeadlessDoc.vue | 224 ++++++++++++++++++++++++++++++++++++++
 doc/toast/TemplateDoc.vue |   2 +-
 pages/toast/index.vue     |   6 +
 3 files changed, 231 insertions(+), 1 deletion(-)
 create mode 100644 doc/toast/HeadlessDoc.vue

diff --git a/doc/toast/HeadlessDoc.vue b/doc/toast/HeadlessDoc.vue
new file mode 100644
index 000000000..38924d474
--- /dev/null
+++ b/doc/toast/HeadlessDoc.vue
@@ -0,0 +1,224 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire toast UI instead of the default elements.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Toast position="top-center" group="headless" @close="visible = false">
+            <template #container="{ message, onClose }">
+                <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
+                    <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
+                    <div class="flex flex-column gap-3 w-full">
+                        <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
+                        <p class="m-0 text-base text-700">{{ message.detail }}</p>
+                        <div class="flex flex-column 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-3 mb-3">
+                            <Button label="Another Upload?" text class="p-0" @click="onClose"></Button>
+                            <Button label="Cancel" text class="text-white p-0" @click="onClose"></Button>
+                        </div>
+                    </div>
+                </section>
+            </template>
+        </Toast>
+        <Button @click="show" label="View" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            progress: 0,
+            interval: null,
+            code: {
+                basic: `
+<Toast position="top-center" group="headless" @close="visible = false">
+    <template #container="{ message, onClose }">
+        <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
+            <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
+            <div class="flex flex-column gap-3 w-full">
+                <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
+                <p class="m-0 text-base text-700">{{ message.detail }}</p>
+                <div class="flex flex-column 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-3 mb-3">
+                    <Button label="Another Upload?" text class="p-0" @click="onClose"></Button>
+                    <Button label="Cancel" text class="text-white p-0" @click="onClose"></Button>
+                </div>
+            </div>
+        </section>
+    </template>
+</Toast>
+<Button @click="show" label="View" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Toast position="top-center" group="headless" @close="visible = false">
+            <template #container="{ message, onClose }">
+                <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
+                    <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
+                    <div class="flex flex-column gap-3 w-full">
+                        <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
+                        <p class="m-0 text-base text-700">{{ message.detail }}</p>
+                        <div class="flex flex-column 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-3 mb-3">
+                            <Button label="Another Upload?" text class="p-0" @click="onClose"></Button>
+                            <Button label="Cancel" text class="text-white p-0" @click="onClose"></Button>
+                        </div>
+                    </div>
+                </section>
+            </template>
+        </Toast>
+        <Button @click="show" label="View" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            progress: 0,
+            interval: null
+        }
+    },
+    beforeUnmount() {
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+    },
+    methods: {
+        show() {
+            if (!this.visible) {
+                this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless' });
+                this.visible = true;
+                this.progress = 0;
+
+                if (this.interval) {
+                    clearInterval(this.interval);
+                }
+
+                this.interval = setInterval(() => {
+                    if (this.progress <= 100) {
+                        this.progress = this.progress + 20;
+                    }
+
+                    if (this.progress >= 100) {
+                        this.progress = 100;
+                        clearInterval(interval);
+                    }
+                }, 1000);
+            }
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Toast position="top-center" group="headless" @close="visible = false">
+            <template #container="{ message, onClose }">
+                <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
+                    <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
+                    <div class="flex flex-column gap-3 w-full">
+                        <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
+                        <p class="m-0 text-base text-700">{{ message.detail }}</p>
+                        <div class="flex flex-column 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-3 mb-3">
+                            <Button label="Another Upload?" text class="p-0" @click="onClose"></Button>
+                            <Button label="Cancel" text class="text-white p-0" @click="onClose"></Button>
+                        </div>
+                    </div>
+                </section>
+            </template>
+        </Toast>
+        <Button @click="show" label="View" />
+    </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+import { ref, onUnmounted } from 'vue';
+const toast = useToast();
+const visible = ref(false);
+const progress = ref(0);
+const interval = ref();
+
+onUnmounted(() => {
+    if (interval.value) {
+        clearInterval(interval.value);
+    }
+})
+
+const show = () => {
+    if (!visible.value) {
+        toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless' });
+        visible.value = true;
+        progress.value = 0;
+
+        if (interval.value) {
+            clearInterval(interval.value);
+        }
+
+        interval.value = setInterval(() => {
+            if (progress.value <= 100) {
+                progress.value = progress.value + 20;
+            }
+
+            if (progress.value >= 100) {
+                progress.value = 100;
+                clearInterval(interval.value);
+            }
+        }, 1000);
+    }
+};
+<\/script>
+`
+            }
+        };
+    },
+    beforeUnmount() {
+        if (this.interval) {
+            clearInterval(this.interval);
+        }
+    },
+    methods: {
+        show() {
+            if (!this.visible) {
+                this.$toast.add({ severity: 'custom', summary: 'Uploading your files.', group: 'headless' });
+                this.visible = true;
+                this.progress = 0;
+
+                if (this.interval) {
+                    clearInterval(this.interval);
+                }
+
+                this.interval = setInterval(() => {
+                    if (this.progress <= 100) {
+                        this.progress = this.progress + 20;
+                    }
+
+                    if (this.progress >= 100) {
+                        this.progress = 100;
+                        clearInterval(interval);
+                    }
+                }, 1000);
+            }
+        }
+    }
+};
+</script>
diff --git a/doc/toast/TemplateDoc.vue b/doc/toast/TemplateDoc.vue
index cf2e5acef..57a93072e 100644
--- a/doc/toast/TemplateDoc.vue
+++ b/doc/toast/TemplateDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Custom content inside a message is defined with the <i>content</i> option.</p>
+        <p>Custom content inside a message is defined with the <i>content</i> template.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Toast position="bottom-center" group="bc" @close="onClose">
diff --git a/pages/toast/index.vue b/pages/toast/index.vue
index 65aaecb30..924d36f1a 100755
--- a/pages/toast/index.vue
+++ b/pages/toast/index.vue
@@ -5,6 +5,7 @@
 <script>
 import AccessibilityDoc from '@/doc/toast/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/toast/BasicDoc.vue';
+import HeadlessDoc from '@/doc/toast/HeadlessDoc.vue';
 import ImportDoc from '@/doc/toast/ImportDoc.vue';
 import MultipleDoc from '@/doc/toast/MultipleDoc.vue';
 import PositionDoc from '@/doc/toast/PositionDoc.vue';
@@ -59,6 +60,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'headless',
+                    label: 'Headless',
+                    component: HeadlessDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',