chore(#312): update wrapper ignore logic

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

Hide file tree

Showing 4 changed files with 72 additions and 8 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,70 @@
 <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>
+    <pre><code>&lt;DruxtEntity :type="type" :uuid="uuid"&gt;
+    &lt;template #default="{ entity }"&gt;
+      ...
+    &lt;/template&gt;
+  &lt;/DruxtEntity&gt;</code></pre>
     <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 />
+
+    <h2>DruxtEntity using template injection with wrapper enabled</h2>
+    <p>
+      The value of the template will be the output of the default slot in a
+      wrapper component.
+    </p>
+    <pre><code>&lt;DruxtEntity :type="type" :uuid="uuid" :wrapper="true"&gt;
+    &lt;template #default="{ entity }"&gt;
+      ...
+    &lt;/template&gt;
+  &lt;/DruxtEntity&gt;</code></pre>
     <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 set
+      (hasDefaultTemplate && this.wrapper)
+    ) {
+      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'
     }
 

diff --git a/packages/druxt/test/components/DruxtModule.test.js b/packages/druxt/test/components/DruxtModule.test.js
@@ -13,6 +13,7 @@ describe('DruxtModule component', () => {
     mocks = {
       $createElement: jest.fn(),
       $fetchState: { pending: false },
+      $options: { druxt: {} },
       $nuxt: {
         context: {
           isDev: false,
@@ -199,11 +200,19 @@ describe('DruxtModule component', () => {
   })
 
   test('custom default slot', async () => {
+    const customModule = {
+      extends: DruxtModule,
+      druxt: {}
+    }
+
     const scopedSlots = { default: jest.fn() }
-    const wrapper = mount(DruxtModule, { localVue, mocks, scopedSlots })
+    const wrapper = mount(customModule, { localVue, mocks, scopedSlots })
     await wrapper.vm.$options.fetch.call(wrapper.vm)
 
     wrapper.vm.getScopedSlots().default.call(wrapper.vm)
     expect(scopedSlots.default).toHaveBeenCalled()
+
+    await wrapper.setProps({ wrapper: true })
+    await wrapper.vm.$options.fetch.call(wrapper.vm)
   })
 })