druxt-views 0.17.2 → 0.18.0

package/dist/components/DruxtView.vue

@@ -7,16 +7,40 @@ import { parse, stringify } from 'qs'
 import { mapActions } from 'vuex'
 
 /**
- * Renders a Drupal View using DruxtEntity components, using data provided by
- * the Drupal JSON:API Views module.
+ * The DruxtView component renders Drupal Views using configuration and
+ * results provided by the Drupal View and the JSON:API Views module.
  *
- * Supports filtering, pagination and sorting.
+ * The component renders slots for  the View's headers, footers, entity results,
+ * exposed sorts and filters, and supports contextual filters.
  *
- * @example
+ * @example @lang vue
+ * <DruxtView display-id="block_1" view-id="promoted_items" />
+ *
+ * @example <caption>View with contextual filter</caption> @lang vue
  * <DruxtView
+ *   :arguments="[entity.attributes.drupal_internal__nid]"
  *   display-id="block_1"
- *   view-id="promoted_items"
+ *   view-id="articles_aside"
  * />
+ *
+ * @example <caption>DruxtView Wrapper component boilerplate</caption> @lang vue
+ * <template>
+ *   <DruxtDebug :json="results" />
+ * </template>
+ *
+ * <script>
+ * import { DruxtViewsViewMixin } from 'druxt-views'
+ * export default {
+ *   mixins: [DruxtViewsViewMixin]
+ * }
+ *
+ * @example <caption>DruxtView with template injection</caption> @lang vue
+ * <DruxtView>
+ *   <template #default="{ results }">
+ *     <!-- Do whatever you want here -->
+ *     <DruxtDebug :json="results" />
+ *   </template>
+ * </DruxtView>
  */
 export default {
   name: 'DruxtView',
@@ -475,6 +499,17 @@ export default {
       // Build scoped slots.
       const scopedSlots = {}
 
+      // Ensure an ID or UUID.
+      if (!this.viewId && !this.uuid) {
+        return {
+          default: () => h(
+            'DruxtDebug',
+            { props: { summary: "Missing required 'uuid' or 'viewId' prop.", }},
+            [h('p', "The DruxtView component requires either the 'uuid' or 'viewId' prop to be set.")]
+          )
+        }
+      }
+
       // Headers.
       scopedSlots.header = () => Object.entries(this.headers).map(([key, header]) => h('span', {
         domProps: { innerHTML: (header.content || {}).value }, key

package/dist/druxt-views.esm.js

@@ -10,32 +10,40 @@ async function DruxtViewsStorybook({ stories }) {
   const druxt = new DruxtClient(options.druxt.baseUrl, { ...options.druxt, proxy: { api: false } });
   const resourceType = "view--view";
   const query = new DrupalJsonApiParams().addFilter("status", 1).addFields(resourceType, ["display", "description", "drupal_internal__id", "label"]);
-  const collections = await druxt.getCollectionAll(resourceType, query);
+  const collections = (await druxt.getCollectionAll(resourceType, query)).map((collection) => collection.data).flat();
   const views = {};
-  for (const collection of collections) {
-    for (const view of collection.data) {
-      const { description, display, drupal_internal__id, label } = view.attributes;
-      const displays = Object.values(display).filter((item) => {
-        const options2 = item.id === "default" ? item : merge(display.default, item);
-        const extenders = options2.display_options.display_extenders;
-        if (!Array.isArray(extenders) && !(extenders.jsonapi_views || {}).enabled) {
-          return false;
-        }
-        return options2.display_options.row.type.startsWith("entity:");
-      });
-      if (displays.length) {
-        views[drupal_internal__id] = { description, displays, uuid: view.id, label };
-      }
+  for (const view of collections) {
+    const { description, display, drupal_internal__id, label } = view.attributes;
+    const displays = Object.values(display).filter((item) => {
+      const options2 = item.id === "default" ? item : merge(display.default, item);
+      const extenders = options2.display_options.display_extenders;
+      const enabled = !(!Array.isArray(extenders) && !(extenders.jsonapi_views || {}).enabled);
+      return enabled ? options2.display_options.row.type.startsWith("entity:") : false;
+    });
+    if (displays.length) {
+      views[drupal_internal__id] = {
+        description,
+        displays,
+        uuid: view.id,
+        viewId: drupal_internal__id,
+        label
+      };
     }
   }
+  addTemplate({
+    src: resolve(__dirname, `../templates/druxt-views.stories.js`),
+    fileName: `stories/druxt-views.stories.js`,
+    options: { views }
+  });
+  stories.push(resolve(options.buildDir, "./stories/druxt-views.stories.js"));
   for (const viewId of Object.keys(views)) {
     const { description, displays, label, uuid } = views[viewId];
     displays.sort((a) => a.id === "default" ? -1 : 0);
     const title = ["Druxt", "Views", label].join("/");
     addTemplate({
-      src: resolve(__dirname, "../templates/druxt-views.stories.js"),
+      src: resolve(__dirname, "../templates/druxt-views.instance.stories.js"),
       fileName: `stories/druxt-views.${viewId}.stories.js`,
-      options: { description, displays, title, uuid, viewId }
+      options: { description, displays, label, title, uuid, viewId }
     });
   }
   stories.push(resolve(options.buildDir, "./stories/druxt-views.*.stories.js"));
@@ -67,7 +75,6 @@ const DruxtViewsNuxtModule = function(moduleOptions = {}) {
   });
   options.store = true;
   this.nuxt.hook("storybook:config", async ({ stories }) => {
-    stories.push("druxt-views/dist/components/*.stories.mjs");
     await DruxtViewsStorybook.call(this, { stories });
   });
 };

package/dist/druxt-views.ssr.js

@@ -19,32 +19,40 @@ async function DruxtViewsStorybook({ stories }) {
   const druxt$1 = new druxt.DruxtClient(options.druxt.baseUrl, { ...options.druxt, proxy: { api: false } });
   const resourceType = "view--view";
   const query = new drupalJsonapiParams.DrupalJsonApiParams().addFilter("status", 1).addFields(resourceType, ["display", "description", "drupal_internal__id", "label"]);
-  const collections = await druxt$1.getCollectionAll(resourceType, query);
+  const collections = (await druxt$1.getCollectionAll(resourceType, query)).map((collection) => collection.data).flat();
   const views = {};
-  for (const collection of collections) {
-    for (const view of collection.data) {
-      const { description, display, drupal_internal__id, label } = view.attributes;
-      const displays = Object.values(display).filter((item) => {
-        const options2 = item.id === "default" ? item : merge__default['default'](display.default, item);
-        const extenders = options2.display_options.display_extenders;
-        if (!Array.isArray(extenders) && !(extenders.jsonapi_views || {}).enabled) {
-          return false;
-        }
-        return options2.display_options.row.type.startsWith("entity:");
-      });
-      if (displays.length) {
-        views[drupal_internal__id] = { description, displays, uuid: view.id, label };
-      }
+  for (const view of collections) {
+    const { description, display, drupal_internal__id, label } = view.attributes;
+    const displays = Object.values(display).filter((item) => {
+      const options2 = item.id === "default" ? item : merge__default['default'](display.default, item);
+      const extenders = options2.display_options.display_extenders;
+      const enabled = !(!Array.isArray(extenders) && !(extenders.jsonapi_views || {}).enabled);
+      return enabled ? options2.display_options.row.type.startsWith("entity:") : false;
+    });
+    if (displays.length) {
+      views[drupal_internal__id] = {
+        description,
+        displays,
+        uuid: view.id,
+        viewId: drupal_internal__id,
+        label
+      };
     }
   }
+  addTemplate({
+    src: path.resolve(__dirname, `../templates/druxt-views.stories.js`),
+    fileName: `stories/druxt-views.stories.js`,
+    options: { views }
+  });
+  stories.push(path.resolve(options.buildDir, "./stories/druxt-views.stories.js"));
   for (const viewId of Object.keys(views)) {
     const { description, displays, label, uuid } = views[viewId];
     displays.sort((a) => a.id === "default" ? -1 : 0);
     const title = ["Druxt", "Views", label].join("/");
     addTemplate({
-      src: path.resolve(__dirname, "../templates/druxt-views.stories.js"),
+      src: path.resolve(__dirname, "../templates/druxt-views.instance.stories.js"),
       fileName: `stories/druxt-views.${viewId}.stories.js`,
-      options: { description, displays, title, uuid, viewId }
+      options: { description, displays, label, title, uuid, viewId }
     });
   }
   stories.push(path.resolve(options.buildDir, "./stories/druxt-views.*.stories.js"));
@@ -76,7 +84,6 @@ const DruxtViewsNuxtModule = function(moduleOptions = {}) {
   });
   options.store = true;
   this.nuxt.hook("storybook:config", async ({ stories }) => {
-    stories.push("druxt-views/dist/components/*.stories.mjs");
     await DruxtViewsStorybook.call(this, { stories });
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt-views",
-  "version": "0.17.2",
+  "version": "0.18.0",
   "description": "Drupal Views components for Druxt with support for filters, pagination and sorting.",
   "keywords": [
     "cms",
@@ -44,10 +44,10 @@
     "axios": "^0.21.1",
     "deepmerge": "^4.2.2",
     "drupal-jsonapi-params": "^1.1.12",
-    "druxt": "^0.16.0",
-    "druxt-blocks": "^0.14.5",
-    "druxt-entity": "^0.23.0",
-    "druxt-router": "^0.25.0",
+    "druxt": "^0.17.0",
+    "druxt-blocks": "^0.15.0",
+    "druxt-entity": "^0.24.0",
+    "druxt-router": "^0.26.0",
     "md5": "^2.3.0"
   },
   "optionalDependencies": {

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

@@ -0,0 +1,45 @@
+import DruxtView from 'druxt-views/dist/components/DruxtView.vue'
+
+export default {
+  title: <%= devalue(options.title) %>,
+  component: DruxtView,
+  argTypes: {
+    displayId: {
+      options: [<%= options.displays.map(({ id }) => `'${id}'`).join(', ') %>],
+      control: {
+        type: 'select',
+      },
+    },
+    type: { table: { disable: true }},
+    viewId: { table: { disable: true }},
+    uuid: { table: { disable: true }},
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: <%= options.description ? devalue(options.description) : `"Renders the **${options.label}** view."` %> + '\n\n```jsx\n\n<DruxtView view-id="<%= options.viewId %>" />\n```'
+      }
+    }
+  }
+}
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(args),
+  template: '<DruxtView v-bind="$props" v-on="$props" />',
+})
+
+<% for (display of options.displays) { %>
+export const <%= display.id.charAt(0).toUpperCase() + display.id.slice(1) %> = Template.bind({})
+<%= display.id.charAt(0).toUpperCase() + display.id.slice(1) %>.args = {
+  displayId: '<%= display.id %>',
+  viewId: '<%= options.viewId %>',
+}
+<%= display.id.charAt(0).toUpperCase() + display.id.slice(1) %>.storyName = '<%= display.display_title %>'
+<%= display.id.charAt(0).toUpperCase() + display.id.slice(1) %>.parameters = {
+  docs: {
+    source: {
+      code: '<DruxtView display-id="<%= display.id %>" view-id="<%= options.viewId %>" />'
+    }
+  }
+}
+<% } %>

package/templates/druxt-views.stories.js

@@ -1,42 +1,82 @@
 import DruxtView from 'druxt-views/dist/components/DruxtView.vue'
 
 export default {
-  title: <%= devalue(options.title) %>,
+  title: 'Druxt/Views/DruxtView',
   component: DruxtView,
   argTypes: {
-    displayId: {
+    uuid: {
+      options: [<%= (Object.values(options.views) || []).map((o) => `'${o.uuid}'`).join(', ') %>],
       control: {
         type: 'select',
-        options: [<%= options.displays.map(({ id }) => `'${id}'`).join(', ') %>]
+        labels: Object.fromEntries([<%= (Object.values(options.views) || []).map((o) => `['${o.uuid}', "${o.label} (${o.uuid})"]`).join(', ') %>])
       },
     },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: <%= options.description ? devalue(options.description) : '" "' %>
-      }
+    viewId: {
+      options: [<%= (Object.keys(options.views) || []).map((s) => `'${s}'`).join(', ') %>],
+      control: {
+        type: 'select',
+        labels: Object.fromEntries([<%= (Object.values(options.views) || []).map((o) => `['${o.viewId}', "${o.label} (${o.viewId})"]`).join(', ') %>])
+      },
     }
   }
 }
 
 const Template = (args, { argTypes }) => ({
-  props: Object.keys(args),
-  template: '<DruxtView v-bind="$props" v-on="$props" />',
+  components: { DruxtView },
+  props: Object.keys(argTypes),
+  template: `<DruxtView v-bind="$props" />`
 })
 
-<% for (display of options.displays) { %>
-export const <%= display.id.charAt(0).toUpperCase() + display.id.slice(1) %> = Template.bind({})
-<%= display.id.charAt(0).toUpperCase() + display.id.slice(1) %>.args = {
-  displayId: '<%= display.id %>',
-  viewId: '<%= options.viewId %>',
+export const Default = Template.bind({})
+Default.storyName = 'DruxtView'
+
+let code
+
+// Wrapper story.
+code = `<template>
+  <DruxtDebug :json="results" />
+</template>
+
+<script>
+import { DruxtViewsViewMixin } from 'druxt-views'
+export default {
+  mixins: [DruxtViewsViewMixin]
 }
-<%= display.id.charAt(0).toUpperCase() + display.id.slice(1) %>.storyName = '<%= display.display_title %>'
-<%= display.id.charAt(0).toUpperCase() + display.id.slice(1) %>.parameters = {
+</script>`
+export const Wrapper = (args, { argTypes }) => ({
+  components: { DruxtView },
+  props: Object.keys(argTypes),
+  template: `<DruxtView 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>
+</DruxtView>`
+})
+Wrapper.parameters = {
   docs: {
-    source: {
-      code: '<DruxtView display-id="<%= display.id %>" view-id="<%= options.viewId %>" />'
-    }
+    storyDescription: 'The DruxtView 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 }
+  }
+}
+
+// Template injection story.
+code = `<DruxtView viewId="">
+  <template #default="{ results }">
+    <!-- Do whatever you want here -->
+    <DruxtDebug :json="results" open />
+  </template>
+</DruxtView>`
+export const TemplateInjection = (args, { argTypes }) => ({
+  components: { DruxtView },
+  props: Object.keys(argTypes),
+  template: code.replace('viewId=""', 'v-bind="$props"')
+})
+TemplateInjection.parameters = {
+  docs: {
+    storyDescription: 'The DruxtView component can be themed by injecting the default template into the compomnent.\n\n```jsx\n' + code + '\n```',
+    source: { code }
   }
 }
-<% } %>

package/dist/components/DruxtView.stories.mjs

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