From 92632e969eaa11521a166e50e346753929b7f523 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Mon, 12 May 2025 14:47:02 +0200
Subject: [PATCH] feat(Toast): add `progress` prop to hide progress bar (#4125)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 src/runtime/components/Toast.vue   | 10 ++++++++--
 src/runtime/components/Toaster.vue |  9 ++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/Toast.vue b/src/runtime/components/Toast.vue
index f7819783..fcb22abc 100644
--- a/src/runtime/components/Toast.vue
+++ b/src/runtime/components/Toast.vue
@@ -29,6 +29,11 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
    * @defaultValue 'vertical'
    */
   orientation?: Toast['variants']['orientation']
+  /**
+   * Whether to show the progress bar.
+   * @defaultValue true
+   */
+  progress?: boolean
   /**
    * Display a list of actions:
    * - under the title and description when orientation is `vertical`
@@ -76,7 +81,8 @@ import UButton from './Button.vue'
 
 const props = withDefaults(defineProps<ToastProps>(), {
   close: true,
-  orientation: 'vertical'
+  orientation: 'vertical',
+  progress: true
 })
 const emits = defineEmits<ToastEmits>()
 const slots = defineSlots<ToastSlots>()
@@ -179,6 +185,6 @@ defineExpose({
       </ToastClose>
     </div>
 
-    <div v-if="remaining > 0 && duration" :class="ui.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }" />
+    <div v-if="progress && remaining > 0 && duration" :class="ui.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }" />
   </ToastRoot>
 </template>
diff --git a/src/runtime/components/Toaster.vue b/src/runtime/components/Toaster.vue
index a689829d..f63af260 100644
--- a/src/runtime/components/Toaster.vue
+++ b/src/runtime/components/Toaster.vue
@@ -17,6 +17,11 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
    * @defaultValue true
    */
   expand?: boolean
+  /**
+   * Whether to show the progress bar on all toasts.
+   * @defaultValue true
+   */
+  progress?: boolean
   /**
    * Render the toaster in a portal.
    * @defaultValue true
@@ -49,7 +54,8 @@ import UToast from './Toast.vue'
 const props = withDefaults(defineProps<ToasterProps>(), {
   expand: true,
   portal: true,
-  duration: 5000
+  duration: 5000,
+  progress: true
 })
 defineSlots<ToasterSlots>()
 
@@ -109,6 +115,7 @@ function getOffset(index: number) {
       v-for="(toast, index) of toasts"
       :key="toast.id"
       ref="refs"
+      :progress="progress"
       v-bind="omit(toast, ['id', 'close'])"
       :close="(toast.close as boolean)"
       :data-expanded="expanded"