From 8f5e8170e61fb4b5e54229f83e4407d856ef668d Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 6 Aug 2024 10:45:16 +0200
Subject: [PATCH] docs(ComponentCode/ComponentExample): add `class` prop

---
 docs/app/components/content/ComponentCode.vue    | 3 ++-
 docs/app/components/content/ComponentExample.vue | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue
index f0c6d9d6..414055cd 100644
--- a/docs/app/components/content/ComponentCode.vue
+++ b/docs/app/components/content/ComponentCode.vue
@@ -6,6 +6,7 @@ import * as theme from '#build/ui'
 import { get, set } from '#ui/utils'
 
 const props = defineProps<{
+  class?: any
   /** List of props to ignore in selection */
   ignore?: string[]
   /** List of props to hide from code and selection */
@@ -231,7 +232,7 @@ const { data: ast } = await useAsyncData(`component-code-${name}-${JSON.stringif
         </template>
       </div>
 
-      <div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4" :class="[!options.length && 'rounded-t-md']">
+      <div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4" :class="[!options.length && 'rounded-t-md', props.class]">
         <component :is="name" v-bind="componentProps">
           <template v-for="slot in Object.keys(slots || {})" :key="slot" #[slot]>
             <ContentSlot :name="slot" unwrap="p">
diff --git a/docs/app/components/content/ComponentExample.vue b/docs/app/components/content/ComponentExample.vue
index 093e7279..3e64f317 100644
--- a/docs/app/components/content/ComponentExample.vue
+++ b/docs/app/components/content/ComponentExample.vue
@@ -3,6 +3,7 @@ import { camelCase } from 'scule'
 
 const props = defineProps<{
   name: string
+  class?: any
   props?: { [key: string]: any }
   /**
    * Whether to format the code with Prettier
@@ -44,7 +45,7 @@ const { data: ast } = await useAsyncData(`component-example-${camelName}`, async
 <template>
   <div class="my-5">
     <div>
-      <div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4 rounded-t-md">
+      <div class="flex border border-b-0 border-gray-300 dark:border-gray-700 relative p-4 rounded-t-md" :class="[props.class]">
         <component :is="camelName" v-bind="componentProps" />
       </div>
     </div>