media-object-refinement

rei · Jan 6, 2025 · 56c2db1 · 56c2db1
1 parent c6e2714
commit 56c2db1
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 29 deletions.
diff --git a/src/components/choreographer/CdrChoreographer.vue b/src/components/choreographer/CdrChoreographer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useCssModule, type PropType } from 'vue';
+import { useCssModule, computed } from 'vue';
 import {
   CdrAbstract,
   CdrKicker,
@@ -9,42 +9,46 @@ import {
   CdrRating,
   CdrLink,
   CdrCard,
-  CdrSurface,
-  CdrMediaObject,
   CdrLayout,
   CdrPicture,
   CdrButton,
   CdrContainer,
 } from '../../lib';
-import { choreographerSchema } from '../../types/interfaces';
+import {
+  Choreographer,
+  ChoreographerComponents,
+  ChoreographerSchema,
+} from '../../types/interfaces';
 
 /** Choreographer is in an experimental stage and should be considered unstable */
 
 defineOptions({
   name: 'CdrChoreographer',
 });
 
-const componentMap = {
-  abstract: CdrAbstract,
-  kicker: CdrKicker,
-  title: CdrTitle,
-  body: CdrBody,
-  image: CdrImg,
-  picture: CdrPicture,
-  rating: CdrRating,
-  link: CdrLink,
-  card: CdrCard,
-  surface: CdrSurface,
-  mediaObject: CdrMediaObject,
-  layout: CdrLayout,
-  button: CdrButton,
-  container: CdrContainer,
-};
-
-defineProps({
-  schema: { type: Array as PropType<choreographerSchema[]>, default: () => [] },
+const props = withDefaults(defineProps<Choreographer>(), {
+  components: () => ({}),
 });
 
+const componentMap = computed(
+  () =>
+    ({
+      abstract: CdrAbstract,
+      kicker: CdrKicker,
+      title: CdrTitle,
+      body: CdrBody,
+      image: CdrImg,
+      picture: CdrPicture,
+      rating: CdrRating,
+      link: CdrLink,
+      card: CdrCard,
+      layout: CdrLayout,
+      button: CdrButton,
+      container: CdrContainer,
+      ...props.components,
+    }) as ChoreographerComponents,
+);
+
 const baseClass = 'cdr-choreographer';
 const style = useCssModule();
 </script>
@@ -53,12 +57,16 @@ const style = useCssModule();
   <component
     v-for="(entry, i) in schema"
     :key="`entry-${i}`"
-    :is="entry.type ? componentMap[entry.type as keyof typeof componentMap] : 'div'"
+    :is="
+      entry.type && componentMap[entry.type]
+        ? componentMap[entry.type as keyof typeof componentMap]
+        : 'div'
+    "
     v-bind="entry?.props"
     :class="style[`${baseClass}__${entry.type}`]"
   >
-    <template v-if="Array.isArray(entry?.content)">
-      <CdrChoreographer :schema="entry?.content" />
+    <template v-if="entry.content && Array.isArray(entry.content)">
+      <CdrChoreographer :schema="entry.content as [ChoreographerSchema]" />
     </template>
     <template v-else>
       {{ entry?.content }}

diff --git a/src/components/choreographer/examples/Choreographer.vue b/src/components/choreographer/examples/Choreographer.vue
@@ -15,6 +15,11 @@
     <cdr-card class="b-card">
       <CdrChoreographer :schema="schemaA" />
     </cdr-card>
+
+    <CdrChoreographer
+      :schema="schemaC"
+      :components="{ surface: CdrSurface }"
+    />
   </div>
 </template>
 
@@ -28,6 +33,7 @@ export default {
   },
   data() {
     return {
+      CdrSurface: Components.CdrSurface,
       schemaA: [
         {
           type: 'mediaObject',
@@ -142,6 +148,15 @@ export default {
           ],
         },
       ],
+      schemaC: [
+        {
+          type: 'surface',
+          props: {
+            background: 'secondary',
+          },
+          content: 'Using passed-in components',
+        },
+      ],
     };
   },
 };

diff --git a/src/types/interfaces.ts b/src/types/interfaces.ts
@@ -75,11 +75,20 @@ export interface selectOption {
   value: string;
 }
 
-export interface choreographerSchema {
+export interface ChoreographerSchema {
   type?: string;
   props?: object;
-  slots?: { [key: string]: choreographerSchema };
-  content?: string | choreographerSchema;
+  slots?: { [key: string]: ChoreographerSchema };
+  content?: string | ChoreographerSchema;
+}
+
+export interface ChoreographerComponents {
+  [key: string]: Component;
+}
+
+export interface Choreographer {
+  schema: [ChoreographerSchema];
+  components?: ChoreographerComponents;
 }
 
 /**