chore(#312): update wrapper ignore logic

druxt · Oct 31, 2021 · 61c4356 · 61c4356
1 parent a2a0616
commit 61c4356
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 7 deletions.
diff --git a/examples/nuxt/wrappers/components/druxt/entity/node/Page.vue b/examples/nuxt/wrappers/components/druxt/entity/node/Page.vue
@@ -1,6 +1,7 @@
 <template>
   <div>
-    This is a DruxtWrapper: DruxtEntityNodePage.vue
+    <h3>This is a theme component: DruxtEntityNodePage.vue</h3>
+    <slot />
   </div>
 </template>
 

diff --git a/examples/nuxt/wrappers/pages/index.vue b/examples/nuxt/wrappers/pages/index.vue
@@ -1,26 +1,55 @@
 <template>
   <div v-if="!$fetchState.pending">
+    <h1>DruxtWrapper examples</h1>
+    <blockquote>
+      The DruxtWrapper is a theming component that wraps the DruxtModule output.
+      <br />
+      The following examples demonstrate different ways it can be used.
+    </blockquote>
+
+    <hr />
+
+    <h2>DruxtEntity default</h2>
+    <p>This is the default behaviour, renders a theme component.</p>
+    <pre><code>&lt;DruxtEntity :type="type" :uuid="uuid" /&gt;</code></pre>
     <details>
-      <summary><strong>Wrapper: default</strong></summary>
+      <summary><strong>Output</strong></summary>
       <DruxtEntity :type="type" :uuid="uuid" />
     </details>
 
+    <hr />
+
+    <h2>DruxtEntity with wrapper disabled</h2>
+    <p>
+      This will ignore any available wrapper components and renders the default
+      output of the DruxtEntity module.
+    </p>
+    <pre><code>&lt;DruxtEntity :type="type" :uuid="uuid" :wrapper="false" /&gt;</code></pre>
     <details>
-      <summary><strong>Wrapper: false</strong></summary>
+      <summary><strong>Output</strong></summary>
       <DruxtEntity :type="type" :uuid="uuid" :wrapper="false" />
     </details>
 
+    <hr />
+
+    <h2>DruxtEntity using template injection, default wrapper</h2>
+    <p>
+      The value of the template will be the output of the component, wrapper
+      component is ignored.
+    </p>
     <details>
-      <summary><strong>Template injection / Wrapper: default</strong></summary>
+      <summary><strong>Output</strong></summary>
       <DruxtEntity :type="type" :uuid="uuid">
         <template #default="{ entity }">
           <pre><code>{{ JSON.stringify(entity, null, '  ') }}</code></pre>
         </template>
       </DruxtEntity>
     </details>
 
+    <hr />
+
     <details>
-      <summary><strong>Template injection / Wrapper: true</strong></summary>
+      <summary><strong>Output</strong></summary>
       <DruxtEntity :type="type" :uuid="uuid" :wrapper="true">
         <template #default="{ entity }">
           <pre><code>{{ JSON.stringify(entity, null, '  ') }}</code></pre>

diff --git a/packages/druxt/src/components/DruxtModule.vue b/packages/druxt/src/components/DruxtModule.vue
@@ -110,7 +110,17 @@ export default {
     }
 
     // Build wrapper component object.
-    const options = this.getModuleComponents()
+    let options = []
+    const hasDefaultTemplate = !!(this.$vnode.data.scopedSlots || {}).default
+    // Load wrapper components if:
+    if (
+      // No default template and wrapper isn't false OR
+      (!hasDefaultTemplate && this.wrapper !== false) ||
+      // Default tempalte and wrapper is TRUE
+      (hasDefaultTemplate && this.wrapper === true)
+    ) {
+      options = this.getModuleComponents()
+    }
     let component = {
       is: (((options.filter(o => o.global) || [])[0] || {}).name || 'DruxtWrapper'),
       options: options.map(o => o.name) || [],
@@ -334,7 +344,7 @@ export default {
     delete attrs['data-fetch-key']
 
     // Unwrap default template based component if required.
-    if (this.$scopedSlots.default && !this.wrapper) {
+    if ((this.$scopedSlots.default && !this.wrapper) || this.wrapper === false) {
       this.component.is = 'DruxtWrapper'
     }