feat(#1): add druxt module components

Author: Decipher

src/components/DruxtLayoutBuilder.vue

@@ -1,51 +1,12 @@
-<template>
-  <div class="layout_builder">
-    <template v-for="(section, index) of sections">
-      <component
-        :is="componentIs(section.layout_id)"
-        v-if="componentIs(section.layout_id) !== 'div'"
-        :key="index"
-        :section="section"
-      >
-        <template
-          v-for="component of Object.values(section.components)"
-          #[component.uuid]
-        >
-          <component
-            :is="componentIs(component.configuration.id)"
-            v-if="componentIs(component.configuration.id) !== 'div'"
-            :key="component.uuid"
-            :component="component"
-            :entity="entity"
-          />
-
-          <DruxtDebug
-            v-else
-            :key="component.uuid"
-            :summary="`${componentName(component.configuration.id)} missing`"
-          >
-            <pre><code>{{ JSON.stringify(component, null, '  ') }}</code></pre>
-          </DruxtDebug>
-        </template>
-      </component>
-
-      <DruxtDebug
-        v-else
-        :key="index"
-        :summary="`${componentName(section.layout_id)} missing`"
-      >
-        <pre><code>{{ JSON.stringify(section, null, '  ') }}</code></pre>
-      </DruxtDebug>
-    </template>
-  </div>
-</template>
-
 <script>
-import { pascalCase, upperFirst } from 'scule'
+import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
+// import { pascalCase, upperFirst } from 'scule'
 
 export default {
   name: 'DruxtLayoutBuilder',
 
+  extends: DruxtModule,
+
   props: {
     entity: {
       type: Object,
@@ -57,15 +18,43 @@ export default {
     sections: ({ entity }) => entity.attributes.layout_builder__layout
   },
 
-  methods: {
-    componentIs(id) {
-      const name = this.componentName(id)
-      return this.$nuxt.$options.components[name] ? name : 'div'
-    },
-
-    componentName(id) {
-      return `DruxtLayoutBuilder${pascalCase(id.split(':').map((s) => upperFirst(s)).join(''))}`
-    },
+  druxt: {
+    /**
+     * @param {object} context - The module component ViewModel.
+     * @returns {ComponentOptions}
+     */
+    componentOptions: ({ entity }) => [
+      [entity.type],
+      ['default'],
+    ],
+
+    /**
+     * Provides propsData for the DruxtWrapper.
+     *
+     * @param {object} context - The module component ViewModel.
+     * @returns {PropsData}
+     */
+    propsData: ({ entity, sections }) => ({ entity, sections }),
+
+    /**
+     * @return {ScopedSlots} The Scoped slots object.
+     */
+    slots(h) {
+      const slots = {}
+
+      this.sections.forEach((section, index) => {
+        slots[`section-${index}`] = () => h('DruxtLayoutBuilderSection', {
+          props: {
+            entity: this.entity,
+            section,
+          }
+        })
+      })
+
+      slots.default = () => h('div', this.sections.map((section, index) => slots[`section-${index}`]()))
+
+      return slots
+    }
   }
 }
 </script>

src/components/DruxtLayoutBuilderComponent.vue

@@ -0,0 +1,61 @@
+<script>
+import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
+
+export default {
+  name: 'DruxtLayoutBuilderComponent',
+
+ extends: DruxtModule,
+
+  props: {
+    entity: {
+      type: Object,
+      required: true,
+    },
+
+    item: {
+      type: Object,
+      required: true,
+    }
+  },
+
+  // computed: {
+  //   components: ({ section }) => section.components
+  // },
+
+  druxt: {
+    /**
+     * @param {object} context - The module component ViewModel.
+     * @returns {ComponentOptions}
+     */
+    componentOptions: ({ item }) => [
+      ((item.configuration || {}).id || '').split(':'),
+      [item.region],
+      [item.uuid],
+      ['default'],
+    ],
+
+    /**
+     * Provides propsData for the DruxtWrapper.
+     *
+     * @param {object} context - The module component ViewModel.
+     * @returns {PropsData}
+     */
+    propsData: ({ entity, item }) => ({ entity, item }),
+
+    /**
+     * @return {ScopedSlots} The Scoped slots object.
+     */
+    slots() {
+      const slots = {}
+
+      // slots.default = () => h('DruxtDebug', {
+      //   props: {
+      //     json: this.item
+      //   }
+      // })
+
+      return slots
+    }
+  }
+}
+</script>

src/components/DruxtLayoutBuilderSection.vue

@@ -0,0 +1,64 @@
+<script>
+import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
+
+export default {
+  name: 'DruxtLayoutBuilderSection',
+
+ extends: DruxtModule,
+
+  props: {
+    entity: {
+      type: Object,
+      required: true,
+    },
+
+    section: {
+      type: Object,
+      required: true,
+    }
+  },
+
+  computed: {
+    components: ({ section }) => section.components
+  },
+
+  druxt: {
+    /**
+     * @param {object} context - The module component ViewModel.
+     * @returns {ComponentOptions}
+     */
+    componentOptions: ({ section }) => [
+      [section.layout_id],
+      ['default'],
+    ],
+
+    /**
+     * Provides propsData for the DruxtWrapper.
+     *
+     * @param {object} context - The module component ViewModel.
+     * @returns {PropsData}
+     */
+    propsData: ({ entity, section }) => ({ entity, section }),
+
+    /**
+     * @return {ScopedSlots} The Scoped slots object.
+     */
+    slots(h) {
+      const slots = {}
+
+      this.components.forEach((component, index) => {
+        slots[`component-${index}`] = () => h('DruxtLayoutBuilderComponent', {
+          props: {
+            entity: this.entity,
+            item: component,
+          }
+        })
+      })
+
+      slots.default = () => h('div', this.components.map((component, index) => slots[`component-${index}`]()))
+
+      return slots
+    }
+  }
+}
+</script>