docs(modal): provide an example to bind event listeners (#1611)

docs/components/content/examples/ModalExampleComponent.vue

@@ -5,13 +5,24 @@ defineProps({
     default: 0
   }
 })
+
+const emit = defineEmits(['success'])
+
+function onSuccess () {
+  emit('success')
+}
 </script>
 
 <template>
   <UModal>
     <UCard>
-      <p>This modal was opened programmatically !</p>
-      <p>Count: {{ count }}</p>
+      <div class="space-y-2">
+        <p>This modal was opened programmatically !</p>
+        <p>Count: {{ count }}</p>
+        <UButton @click="onSuccess">
+          Click to emit a success event
+        </UButton>
+      </div>
     </UCard>
   </UModal>
 </template>

docs/components/content/examples/ModalExampleComposable.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
 import { ModalExampleComponent } from '#components'
 
+const toast = useToast()
 const modal = useModal()
 const count = ref(0)
 
 function openModal () {
   count.value += 1
   modal.open(ModalExampleComponent, {
-    count: count.value
+    count: count.value,
+    onSuccess () {
+      toast.add({
+        title: 'Success !',
+        id: 'modal-success'
+      })
+    }
   })
 }
 </script>