media-object-refinement

rei · Dec 30, 2024 · c1fd7d8 · c1fd7d8
1 parent 0ca6814
commit c1fd7d8
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 45 deletions.
diff --git a/src/components/choreographer/CdrChoreographer.vue b/src/components/choreographer/CdrChoreographer.vue
@@ -53,7 +53,7 @@ const style = useCssModule();
   <component
     v-for="(entry, i) in schema"
     :key="`entry-${i}`"
-    :is="componentMap[entry.type as keyof typeof componentMap]"
+    :is="entry.type ? componentMap[entry.type as keyof typeof componentMap] : 'div'"
     v-bind="entry?.props"
     :class="style[`${baseClass}__${entry.type}`]"
   >
@@ -63,6 +63,15 @@ const style = useCssModule();
     <template v-else>
       {{ entry?.content }}
     </template>
+    <template
+      v-for="(value, key) in entry.slots"
+      #[key]
+    >
+      <CdrChoreographer
+        :key="key"
+        :schema="[value]"
+      />
+    </template>
   </component>
 </template>
 

diff --git a/src/components/choreographer/examples/Choreographer.vue b/src/components/choreographer/examples/Choreographer.vue
@@ -2,20 +2,19 @@
   <div class="foo">
     <h2>choreographer</h2>
     <h3>Standalone card built from schema</h3>
-    <div style="max-width: 550px; margin-bottom: 6.4rem;">
-      <CdrChoreographer :schema="schemaB"/>
-    </div>
+    <!-- <div style="max-width: 550px; margin-bottom: 6.4rem">
+      <CdrChoreographer :schema="schemaB" />
+    </div> -->
     <CdrChoreographer :schema="schemaA" />
-    <h3>Card</h3>
+    <!-- <h3>Card</h3>
 
     <cdr-card class="c-card">
       <CdrChoreographer :schema="schemaA" />
     </cdr-card>
 
     <cdr-card class="b-card">
       <CdrChoreographer :schema="schemaA" />
-    </cdr-card>
-
+    </cdr-card> -->
   </div>
 </template>
 
@@ -26,105 +25,125 @@ export default {
   name: 'Choreographer',
   components: {
     ...Components,
-},
+  },
   data() {
     return {
       schemaA: [
+        {
+          type: 'mediaObject',
+          slots: {
+            media: {
+              type: 'image',
+              props: {
+                alt: 'A sample image',
+                src: 'https://www.rei.com/dam/gerlach_090622_0135_web_lg.jpeg?t=ea16by9md',
+              },
+            },
+            content: {
+              content: [
+                { type: 'kicker', content: 'Example kicker' },
+                { type: 'title', content: 'Example title' },
+              ],
+            },
+          },
+        },
         {
           type: 'image',
           props: {
-            alt: "standard landscape",
-            src: "https://www.rei.com/dam/gerlach_090622_0135_web_lg.jpeg?t=ea16by9md",
+            alt: 'standard landscape',
+            src: 'https://www.rei.com/dam/gerlach_090622_0135_web_lg.jpeg?t=ea16by9md',
             responsive: true,
-            cover: true
+            cover: true,
           },
         },
         {
           type: 'kicker',
-          content: 'skills'
+          content: 'skills',
         },
         {
           type: 'link',
           props: {
             href: '#',
-            modifier: 'standalone'
+            modifier: 'standalone',
           },
           content: [
             {
               type: 'title',
               props: { tag: 'p' },
-              content: 'Running nutrition basics' 
-            }
-          ]
+              content: 'Running nutrition basics',
+            },
+          ],
         },
         {
           type: 'rating',
           props: {
-            rating: "4.0",
-            count: "49",
-            size: "small"
-          }
+            rating: '4.0',
+            count: '49',
+            size: 'small',
+          },
         },
         {
           type: 'abstract',
-          content: 'Fueling well is the key to longevity and improvement in running. Our experts guide you on filling your plate for your goals.'
-        }
+          content:
+            'Fueling well is the key to longevity and improvement in running. Our experts guide you on filling your plate for your goals.',
+        },
       ],
       schemaB: [
         {
           type: 'card',
           props: {
-            as: 'lead'
+            as: 'lead',
           },
           content: [
             {
               type: 'image',
               props: {
-                alt: "standard landscape",
-                src: "https://www.rei.com/dam/gerlach_090622_0135_web_lg.jpeg?t=ea16by9md",
+                alt: 'standard landscape',
+                src: 'https://www.rei.com/dam/gerlach_090622_0135_web_lg.jpeg?t=ea16by9md',
                 responsive: true,
-                cover: true
+                cover: true,
               },
             },
             {
               type: 'kicker',
               props: {
                 tag: 'span',
               },
-              content: 'skills'
+              content: 'skills',
             },
             {
               type: 'link',
               props: {
                 href: '#',
                 modifier: 'standalone',
-                class: "cdr-card__link"
+                class: 'cdr-card__link',
               },
               content: [
                 {
                   type: 'title',
                   props: { tag: 'p' },
-                  content: 'Running nutrition basics' 
-                }
-              ]
+                  content: 'Running nutrition basics',
+                },
+              ],
             },
             {
               type: 'rating',
               props: {
-                rating: "4.0",
-                count: "49",
-                size: "small"
-              }
+                rating: '4.0',
+                count: '49',
+                size: 'small',
+              },
             },
             {
               type: 'abstract',
-              content: 'Fueling well is the key to longevity and improvement in running. Our experts guide you on filling your plate for your goals.'
-            }
-          ]
-        }
-      ]
-    }
-  }
+              content:
+                'Fueling well is the key to longevity and improvement in running. Our experts guide you on filling your plate for your goals.',
+            },
+          ],
+        },
+      ],
+    };
+  },
 };
 </script>
 
@@ -140,7 +159,5 @@ export default {
   max-width: 600px;
   margin-bottom: 5rem;
   padding-bottom: 2.4rem;
-
-
 }
 </style>
diff --git a/src/types/interfaces.ts b/src/types/interfaces.ts
@@ -75,8 +75,9 @@ export interface selectOption {
 }
 
 export interface choreographerSchema {
-  type: string;
+  type?: string;
   props?: object;
+  slots?: { [key: string]: choreographerSchema };
   content?: string | choreographerSchema;
 }