From f0297e02d009ea5905c9ec66b606f7cff71f6f96 Mon Sep 17 00:00:00 2001
From: Hugo Richard <hugo.richard@epitech.eu>
Date: Fri, 17 Jan 2025 17:43:40 +0100
Subject: [PATCH] docs(modal/slideover): improve programmatic examples (#3131)

---
 .../content/examples/modal/ModalExample.vue           | 11 ++++++++++-
 .../examples/modal/ModalProgrammaticExample.vue       |  9 ++++++++-
 .../content/examples/slideover/SlideoverExample.vue   | 11 ++++++++++-
 .../slideover/SlideoverProgrammaticExample.vue        |  9 ++++++++-
 4 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/docs/app/components/content/examples/modal/ModalExample.vue b/docs/app/components/content/examples/modal/ModalExample.vue
index bc2256f9ef..a409d4179b 100644
--- a/docs/app/components/content/examples/modal/ModalExample.vue
+++ b/docs/app/components/content/examples/modal/ModalExample.vue
@@ -4,12 +4,21 @@ const modal = useModal()
 defineProps<{
   count: number
 }>()
+
+const emit = defineEmits(['success'])
+
+function onSuccess() {
+  emit('success')
+}
 </script>
 
 <template>
   <UModal :title="`This modal was opened programmatically ${count} times`">
     <template #footer>
-      <UButton color="neutral" label="Close" @click="modal.close()" />
+      <div class="flex gap-2">
+        <UButton color="neutral" label="Close" @click="modal.close()" />
+        <UButton label="Success" @click="onSuccess" />
+      </div>
     </template>
   </UModal>
 </template>
diff --git a/docs/app/components/content/examples/modal/ModalProgrammaticExample.vue b/docs/app/components/content/examples/modal/ModalProgrammaticExample.vue
index 7aca29b4d8..4b42d4eb19 100644
--- a/docs/app/components/content/examples/modal/ModalProgrammaticExample.vue
+++ b/docs/app/components/content/examples/modal/ModalProgrammaticExample.vue
@@ -3,6 +3,7 @@ import { LazyModalExample } from '#components'
 
 const count = ref(0)
 
+const toast = useToast()
 const modal = useModal()
 
 function open() {
@@ -10,7 +11,13 @@ function open() {
 
   modal.open(LazyModalExample, {
     description: 'And you can even provide a description!',
-    count: count.value
+    count: count.value,
+    onSuccess() {
+      toast.add({
+        title: 'Success !',
+        id: 'modal-success'
+      })
+    }
   })
 }
 </script>
diff --git a/docs/app/components/content/examples/slideover/SlideoverExample.vue b/docs/app/components/content/examples/slideover/SlideoverExample.vue
index 0c298949cf..3f43968ebb 100644
--- a/docs/app/components/content/examples/slideover/SlideoverExample.vue
+++ b/docs/app/components/content/examples/slideover/SlideoverExample.vue
@@ -4,6 +4,12 @@ const slideover = useSlideover()
 defineProps<{
   count: number
 }>()
+
+const emit = defineEmits(['success'])
+
+function onSuccess() {
+  emit('success')
+}
 </script>
 
 <template>
@@ -13,7 +19,10 @@ defineProps<{
     </template>
 
     <template #footer>
-      <UButton color="neutral" label="Close" @click="slideover.close()" />
+      <div class="flex gap-2">
+        <UButton color="neutral" label="Close" @click="slideover.close()" />
+        <UButton label="Success" @click="onSuccess" />
+      </div>
     </template>
   </USlideover>
 </template>
diff --git a/docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue b/docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue
index 4c681d68d8..f68d338585 100644
--- a/docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue
+++ b/docs/app/components/content/examples/slideover/SlideoverProgrammaticExample.vue
@@ -3,6 +3,7 @@ import { LazySlideoverExample } from '#components'
 
 const count = ref(0)
 
+const toast = useToast()
 const slideover = useSlideover()
 
 function open() {
@@ -10,7 +11,13 @@ function open() {
 
   slideover.open(LazySlideoverExample, {
     title: 'Slideover',
-    count: count.value
+    count: count.value,
+    onSuccess() {
+      toast.add({
+        title: 'Success !',
+        id: 'modal-success'
+      })
+    }
   })
 }
 </script>