From d19d7077e450c7aba3d499585209be60c7414b31 Mon Sep 17 00:00:00 2001
From: Neil Richter <me@neilrichter.com>
Date: Wed, 10 Apr 2024 17:15:39 +0200
Subject: [PATCH]  docs(modal): provide an example to bind event listeners 
 (#1611)

---
 docs/components/content/ComponentExample.vue      |  6 ++++++
 .../content/examples/ModalExampleComponent.vue    | 15 +++++++++++++--
 .../content/examples/ModalExampleComposable.vue   |  9 ++++++++-
 docs/content/2.components/modal.md                |  8 +++++++-
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/docs/components/content/ComponentExample.vue b/docs/components/content/ComponentExample.vue
index f276889a..f4e7bb96 100644
--- a/docs/components/content/ComponentExample.vue
+++ b/docs/components/content/ComponentExample.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="[&>div>pre]:!rounded-t-none [&>div>pre]:!mt-0">
     <div
+      v-if="hasPreview"
       class="flex border border-gray-200 dark:border-gray-700 relative rounded-t-md"
       :class="[{ 'p-4': padding, 'rounded-b-md': !hasCode, 'border-b-0': hasCode, 'not-prose': !prose }, backgroundClass, extraClass]"
     >
@@ -37,6 +38,10 @@ const props = defineProps({
     type: Object,
     default: () => ({})
   },
+  hiddenPreview: {
+    type: Boolean,
+    default: false
+  },
   hiddenCode: {
     type: Boolean,
     default: false
@@ -79,6 +84,7 @@ const data = await fetchContentExampleCode(camelName)
 const highlighter = useShikiHighlighter()
 
 const hasCode = computed(() => !props.hiddenCode && (data?.code || instance.slots.code))
+const hasPreview = computed(() => !props.hiddenPreview && (props.component || instance.slots.default))
 
 const { data: ast } = await useAsyncData(`content-example-${camelName}-ast`, () => transformContent('content:_markdown.md', `\`\`\`vue\n${data?.code ?? ''}\n\`\`\``, {
   markdown: {
diff --git a/docs/components/content/examples/ModalExampleComponent.vue b/docs/components/content/examples/ModalExampleComponent.vue
index 6b3dc331..6d4e7690 100644
--- a/docs/components/content/examples/ModalExampleComponent.vue
+++ b/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>
diff --git a/docs/components/content/examples/ModalExampleComposable.vue b/docs/components/content/examples/ModalExampleComposable.vue
index 255c7fc6..25cd5190 100644
--- a/docs/components/content/examples/ModalExampleComposable.vue
+++ b/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>
diff --git a/docs/content/2.components/modal.md b/docs/content/2.components/modal.md
index dd89239e..2164ac96 100644
--- a/docs/content/2.components/modal.md
+++ b/docs/content/2.components/modal.md
@@ -77,7 +77,13 @@ First of all, add the `Modals` component to your app, preferably inside `app.vue
 
 Then, you can use the `useModal` composable to control your modals within your app.
 
-:component-example{component="modal-example-composable"}
+<!-- For prerendering -->
+:component-example{component="modal-example-component" hiddenCode hiddenPreview }
+
+::code-group{class="[&>div:last-child>div:first-child]:!rounded-t-none"}
+  :component-example{component="modal-example-composable" label="app.vue" }
+  :component-example{component="modal-example-component" hiddenPreview label="modal.vue" }
+::
 
 Additionally, you can close the modal within the modal component by calling `modal.close()`.