From a0b8b93a5ae820e045399cc5a4679d005c23f791 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 11 Dec 2024 12:13:37 +0100
Subject: [PATCH] docs(ComponentExample): add `iframe` prop

---
 docs/app/components/content/ComponentExample.vue | 10 +++++++++-
 docs/app/pages/examples/[...slug].vue            |  4 ++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/docs/app/components/content/ComponentExample.vue b/docs/app/components/content/ComponentExample.vue
index 348fb601..cd3c97c8 100644
--- a/docs/app/components/content/ComponentExample.vue
+++ b/docs/app/components/content/ComponentExample.vue
@@ -5,6 +5,11 @@ import { get, set } from '#ui/utils'
 const props = withDefaults(defineProps<{
   name: string
   class?: any
+  /**
+   * Whether to render the component in an iframe
+   * @defaultValue false
+   */
+  iframe?: boolean | { [key: string]: any }
   props?: { [key: string]: any }
   /**
    * Whether to format the code with Prettier
@@ -112,6 +117,8 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
   }
   return acc
 }, {} as Record<string, any>) || {})
+
+const urlSearchParams = computed(() => new URLSearchParams(optionsValues.value).toString())
 </script>
 
 <template>
@@ -170,7 +177,8 @@ const optionsValues = ref(props.options?.reduce((acc, option) => {
         </div>
 
         <div class="flex justify-center p-4" :class="props.class">
-          <component :is="camelName" v-bind="{ ...componentProps, ...optionsValues }" />
+          <iframe v-if="iframe" v-bind="typeof iframe === 'object' ? iframe : {}" :src="`/examples/${name}?${urlSearchParams}`" class="w-full" />
+          <component :is="camelName" v-else v-bind="{ ...componentProps, ...optionsValues }" />
         </div>
       </div>
     </template>
diff --git a/docs/app/pages/examples/[...slug].vue b/docs/app/pages/examples/[...slug].vue
index b2dd857d..4edd123a 100644
--- a/docs/app/pages/examples/[...slug].vue
+++ b/docs/app/pages/examples/[...slug].vue
@@ -5,7 +5,7 @@ const name = route.params.slug?.[0]
 </script>
 
 <template>
-  <div class="p-4 flex flex-col justify-center h-screen overflow-auto">
-    <component :is="name" />
+  <div class="flex flex-col justify-center items-center h-screen">
+    <component :is="name" v-bind="route.query" />
   </div>
 </template>