From dca0ff4a6003f577e74e25eb057e38a708f769cf Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 14 Mar 2022 16:51:40 +0100
Subject: [PATCH] docs: improve slots component display

---
 docs/pages/components/[component].vue | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/docs/pages/components/[component].vue b/docs/pages/components/[component].vue
index 73fc8229..a325e250 100644
--- a/docs/pages/components/[component].vue
+++ b/docs/pages/components/[component].vue
@@ -8,17 +8,18 @@
           <template v-if="Array.isArray(slot)">
             <div :key="key">
               <component
-                :is="slot.component ? `U${slot.component}` : slot.tag"
+                :is="slot.component ? `U${slot.component.name}` : slot.tag"
                 v-for="(slot, index) of slot"
                 :key="index"
                 :class="slot.class"
-                v-bind="slot.props || defaultProps[slot.component]"
+                v-bind="slot.component?.props || defaultProps[slot.component]"
                 v-html="slot.html"
               />
             </div>
           </template>
           <template v-else>
-            <component :is="slot.component ? `U${slot.component}` : slot.tag" :key="key" :class="slot.class" v-bind="slot.props || defaultProps[slot.component]" v-html="slot.html" />
+            <component :is="`U${slot.component.name}`" v-if="slot.component" :key="`${key}-component`" v-bind="slot.component?.props || defaultProps[slot.component]" />
+            <component :is="slot.tag" v-else :key="`${key}-tag`" :class="slot.class" v-html="slot.html" />
           </template>
         </template>
       </component>
@@ -202,10 +203,12 @@ const defaultProps = {
     label: 'Input group',
     slots: {
       default: {
-        component: 'Input',
-        props: {
-          name: 'input',
-          placeholder: 'Works with every form element'
+        component: {
+          name: 'Input',
+          props: {
+            name: 'input',
+            placeholder: 'Works with every form element'
+          }
         }
       }
     }
@@ -258,10 +261,12 @@ const defaultProps = {
         html: 'Modal content'
       },
       footer: {
-        component: 'Button',
-        props: {
-          label: 'Close',
-          onClick: () => { modal.value = false }
+        component: {
+          name: 'Button',
+          props: {
+            label: 'Close',
+            onClick: () => { modal.value = false }
+          }
         }
       }
     }