druxt-site 0.10.5 → 0.11.0

package/dist/components/DruxtSite.vue

@@ -5,27 +5,20 @@ import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
 import { mapActions } from 'vuex'
 
 /**
- * Renders all available block regions based on the specified theme.
+ * The DruxtSite component renders all available Drupal block regions and
+ * content, based on the specified theme.
+ *
+ * While Drupal provides placement configuration for blocks, it does not provide
+ * any information on where each region should be placed.
+ *
+ * All regions are provided as scoped slots for the Druxt Wrapper component.
  *
  * @example @lang vue
  * <template>
  *   <DruxtSite theme="umami" />
  * </template>
  *
-  * @example <caption>Default slot override</caption> @lang vue
- * <template>
- *   <DruxtSite theme="umami">
- *     <template #default="{ props, regions, theme }">
- *       <DruxtBlockRegion
- *         v-for="region of regions"
- *         :key="region"
- *         v-bind="props[region]"
- *       />
- *     </template>
- *   </DruxtSite>
- * </template>
- *
- * @example <caption>Wrapper component</caption> @lang vue
+ * @example <caption>DruxtSite Wrapper component boilerplate</caption> @lang vue
  * <template>
  *   <div>
  *     <slot name="header" />
@@ -34,16 +27,32 @@ import { mapActions } from 'vuex'
  *   </div>
  * </template>
  *
- * @see {@link https://blocks.druxtjs.org/api/components/DruxtBlockRegion|DruxtBlockRegion}
+ * <script>
+ * import { DruxtSiteMixin } from 'druxt-site'
+ * export default {
+ *   mixins: [DruxtSiteMixin]
+ * }
+ *
+ * @example <caption>DruxtSite with template injection</caption> @lang vue
+ * <DruxtSite>
+ *   <template #default="{ props, regions, theme }">
+ *     <!-- Do whatever you want here -->
+ *     <DruxtBlockRegion
+ *       v-for="region of regions"
+ *       :key="region"
+ *       v-bind="props[region]"
+ *     />
+ *   </template>
+ * </DruxtSite>
+ *
+ * @see {@link /api/packages/blocks/components/DruxtBlockRegion|DruxtBlockRegion}
  */
 export default {
   name: 'DruxtSite',
 
   extends: DruxtModule,
 
-  /**
-   * Vue.js Properties.
-   */
+  /** */
   props: {
     /**
      * Drupal theme ID.
@@ -63,9 +72,7 @@ export default {
     defaultTheme: ($druxt.settings.site || {}).theme,
   }),
 
-  /**
-   * Vue.js Computed properties.
-   */
+  /** */
   computed: {
     /**
      * DruxtBlockRegion propsData for regions.
@@ -158,15 +165,15 @@ export default {
      *
      * @return {ScopedSlots} The Scoped slots object.
      */
-    slots() {
+    slots(h) {
       // If no regions, return Nuxt component.
       if (!this.regions.length) {
-        return { default: () => this.$createElement('Nuxt') }
+        return { default: () => h('Nuxt') }
       }
 
       // Build scoped slots for each region.
       const scopedSlots = {
-        ...Object.fromEntries(this.regions.map((region) => [region, (attrs) => this.$createElement('DruxtBlockRegion', {
+        ...Object.fromEntries(this.regions.map((region) => [region, (attrs) => h('DruxtBlockRegion', {
           attrs,
           key: region,
           props: this.props[region],

package/dist/druxt-site.esm.js

@@ -11,18 +11,23 @@ async function DruxtSiteStorybook({ options, stories }) {
   const query = new DrupalJsonApiParams().addFields(type, ["theme"]);
   const resources = (await druxt.getCollectionAll(type, query)).map((collection) => collection.data).flat();
   const themes = [...new Set(resources.map((o) => o.attributes.theme))].sort();
-  const siteStories = themes.map((theme) => {
+  addTemplate({
+    src: resolve(__dirname, `../templates/druxt-site.stories.js`),
+    fileName: `stories/druxt-site.stories.js`,
+    options: { themes }
+  });
+  themes.forEach((theme) => {
     addTemplate({
-      src: resolve(__dirname, "../templates/druxt-site.stories.js"),
+      src: resolve(__dirname, "../templates/druxt-site.instance.stories.js"),
       fileName: `stories/druxt-site.${theme}.stories.js`,
       options: {
         theme,
         title: titleFn(["Druxt", "Site", "Themes", theme])
       }
     });
-    return resolve(this.options.buildDir, `./stories/druxt-site.${theme}.stories.js`);
   });
-  stories.push.apply(stories, siteStories);
+  stories.push(resolve(this.options.buildDir, "./stories/druxt-site.stories.js"));
+  stories.push(resolve(this.options.buildDir, "./stories/druxt-site.*.stories.js"));
 }
 
 const DruxtSiteNuxtModule = async function(moduleOptions = {}) {
@@ -65,7 +70,6 @@ const DruxtSiteNuxtModule = async function(moduleOptions = {}) {
     this.addLayout(resolve(__dirname, "./layouts/default.vue"), "default");
   }
   this.nuxt.hook("storybook:config", async ({ stories }) => {
-    stories.push("druxt-site/dist/components/*.stories.mjs");
     await DruxtSiteStorybook.call(this, { options, stories });
   });
 };

package/dist/druxt-site.ssr.js

@@ -15,18 +15,23 @@ async function DruxtSiteStorybook({ options, stories }) {
   const query = new drupalJsonapiParams.DrupalJsonApiParams().addFields(type, ["theme"]);
   const resources = (await druxt$1.getCollectionAll(type, query)).map((collection) => collection.data).flat();
   const themes = [...new Set(resources.map((o) => o.attributes.theme))].sort();
-  const siteStories = themes.map((theme) => {
+  addTemplate({
+    src: path.resolve(__dirname, `../templates/druxt-site.stories.js`),
+    fileName: `stories/druxt-site.stories.js`,
+    options: { themes }
+  });
+  themes.forEach((theme) => {
     addTemplate({
-      src: path.resolve(__dirname, "../templates/druxt-site.stories.js"),
+      src: path.resolve(__dirname, "../templates/druxt-site.instance.stories.js"),
       fileName: `stories/druxt-site.${theme}.stories.js`,
       options: {
         theme,
         title: titleFn(["Druxt", "Site", "Themes", theme])
       }
     });
-    return path.resolve(this.options.buildDir, `./stories/druxt-site.${theme}.stories.js`);
   });
-  stories.push.apply(stories, siteStories);
+  stories.push(path.resolve(this.options.buildDir, "./stories/druxt-site.stories.js"));
+  stories.push(path.resolve(this.options.buildDir, "./stories/druxt-site.*.stories.js"));
 }
 
 const DruxtSiteNuxtModule = async function(moduleOptions = {}) {
@@ -69,7 +74,6 @@ const DruxtSiteNuxtModule = async function(moduleOptions = {}) {
     this.addLayout(path.resolve(__dirname, "./layouts/default.vue"), "default");
   }
   this.nuxt.hook("storybook:config", async ({ stories }) => {
-    stories.push("druxt-site/dist/components/*.stories.mjs");
     await DruxtSiteStorybook.call(this, { options, stories });
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt-site",
-  "version": "0.10.5",
+  "version": "0.11.0",
   "description": "Out of the box Decoupled Drupal sites with Druxt.",
   "keywords": [
     "cms",
@@ -43,14 +43,14 @@
   ],
   "dependencies": {
     "drupal-jsonapi-params": "^1.2.2",
-    "druxt": "^0.16.0",
-    "druxt-blocks": "^0.14.5",
-    "druxt-breadcrumb": "^0.13.4",
-    "druxt-entity": "^0.23.0",
-    "druxt-menu": "^0.15.3",
-    "druxt-router": "^0.25.0",
-    "druxt-schema": "^0.10.0",
-    "druxt-views": "^0.17.2",
+    "druxt": "^0.17.0",
+    "druxt-blocks": "^0.15.0",
+    "druxt-breadcrumb": "^0.14.0",
+    "druxt-entity": "^0.24.0",
+    "druxt-menu": "^0.16.0",
+    "druxt-router": "^0.26.0",
+    "druxt-schema": "^0.10.1",
+    "druxt-views": "^0.18.0",
     "md5": "^2.2.1"
   },
   "optionalDependencies": {

package/templates/druxt-site.instance.stories.js

@@ -0,0 +1,38 @@
+import DruxtSite from 'druxt-site/dist/components/DruxtSite.vue'
+
+export default {
+  title: '<%= options.title %>',
+  component: DruxtSite,
+  argTypes: {
+    theme: {
+      control: false,
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'Renders a Drupal block regions using the **<%= options.theme %>** theme configuration.\n\n```jsx\n\n<DruxtSite theme="<%= options.theme %>" />\n```'
+      },
+    },
+  },
+}
+
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    template: '<DruxtSite v-bind="$props" />',
+  }
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  theme: '<%= options.theme %>',
+}
+Default.storyName = '<%= options.theme.charAt(0).toUpperCase() + options.theme.slice(1) %>'
+Default.parameters = {
+  docs: {
+    source: {
+      code: '<DruxtSite theme="<%= options.theme %>" />'
+    }
+  }
+}

package/templates/druxt-site.stories.js

@@ -1,33 +1,75 @@
 import DruxtSite from 'druxt-site/dist/components/DruxtSite.vue'
 
 export default {
-  title: '<%= options.title %>',
+  title: 'Druxt/Site/DruxtSite',
   component: DruxtSite,
-  parameters: {
-    docs: {
-      description: {
-        component: ' '
-      },
-    },
-  },
+  argTypes: {
+    theme: {
+      options: [<%= (options.themes || []).map((s) => `'${s}'`).join(', ') %>],
+      control: {
+        type: 'select'
+      }
+    }
+  }
 }
 
-const Template = (args, { argTypes }) => {
-  return {
-    props: Object.keys(argTypes),
-    template: '<DruxtSite v-bind="$props" />',
+// Default story.
+export const Default = (args, { argTypes }) => ({
+  components: { DruxtSite },
+  props: Object.keys(argTypes),
+  template: `<DruxtSite v-bind="$props" />`
+})
+
+let code
+
+// Wrapper story.
+code = `<template>
+  <div>
+    <slot name="header" />
+    <slot name="content" />
+    <slot name="footer" />
+  </div>
+</template>
+
+<script>
+import { DruxtSiteMixin } from 'druxt-site'
+export default {
+  mixins: [DruxtSiteMixin]
+}`
+export const Wrapper = (args, { argTypes }) => ({
+  components: { DruxtSite },
+  props: Object.keys(argTypes),
+  template: `<DruxtSite v-bind="$props" ref="module">
+  <template #default>
+    Component options:
+    <ul>
+      <li v-for="option of $refs.module.getModuleComponents()" :key="option.name">{{ option.name }}</li>
+    </ul>
+  </template>
+</DruxtSite>`
+})
+Wrapper.parameters = {
+  docs: {
+    storyDescription: 'The DruxtSite component can be themed by using a Druxt Wrapper component.\n\nCreate an appropriately named component, using the relevant component option, with the following boilerplate:\n\n```jsx\n' + code + '\n```',
+    source: { code }
   }
 }
 
-export const Default = Template.bind({})
-Default.args = {
-  theme: '<%= options.theme %>',
-}
-Default.storyName = '<%= options.theme.charAt(0).toUpperCase() + options.theme.slice(1) %>'
-Default.parameters = {
+// Template injection story.
+code = `<DruxtSite theme="">
+  <template #default="{ regions }">
+    <!-- Do whatever you want here -->
+    <DruxtDebug :json="{ regions }" />
+  </template>
+</DruxtSite>`
+export const TemplateInjection = (args, { argTypes }) => ({
+  components: { DruxtSite },
+  props: Object.keys(argTypes),
+  template: code.replace('theme=""', 'v-bind="$props"')
+})
+TemplateInjection.parameters = {
   docs: {
-    source: {
-      code: '<DruxtSite theme="<%= options.theme %>" />'
-    }
+    storyDescription: 'The DruxtSite component can be themed by injecting the default template into the compomnent.\n\n```jsx\n' + code + '\n```',
+    source: { code }
   }
 }

package/dist/components/DruxtSite.stories.mjs

@@ -1,15 +0,0 @@
-import DruxtSite from './DruxtSite.vue'
-
-export default {
-  title: 'Druxt/Site/DruxtSite',
-  component: DruxtSite
-}
-
-const Template = (args, { argTypes }) => ({
-  components: { DruxtSite },
-  props: Object.keys(argTypes),
-  template: `<DruxtSite v-bind="$props" />`
-})
-
-export const Default = Template.bind({})
-Default.storyName = 'DruxtSite'