druxt-views 0.14.0 → 0.16.1

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # druxt-views
 
+## 0.16.1
+
+### Patch Changes
+
+- Updated dependencies [9161b38]
+  - druxt-router@0.24.0
+  - druxt-blocks@0.14.1
+  - druxt-entity@0.21.2
+
+## 0.16.0
+
+### Minor Changes
+
+- e7b1533: Refactored DruxtModule fetch hooks
+
+### Patch Changes
+
+- d80f5d4: Fixed issue with undefined wrapper in DruxtViewsFilter
+- Updated dependencies [025315a]
+  - druxt-entity@0.21.0
+  - druxt-blocks@0.14.0
+  - druxt@0.13.0
+  - druxt-router@0.23.0
+
+## 0.15.0
+
+### Minor Changes
+
+- c769243: Added support for Contextual filters (arguments)
+
+  ```vue
+  <DruxtView
+    :arguments="[1, 2, 3]"
+    displayid="block_1"
+    view-id="articles_aside"
+  />
+  ```
+
+### Patch Changes
+
+- Updated dependencies [4504a2f]
+  - druxt@0.12.0
+  - druxt-router@0.22.0
+  - druxt-entity@0.20.0
+  - druxt-blocks@0.13.1
+
+## 0.14.1
+
+### Patch Changes
+
+- b9e5839: Fixed missing templates in package
+
 ## 0.14.0
 
 ### Minor Changes

package/dist/components/DruxtView.vue

@@ -27,6 +27,20 @@ export default {
    * Vue.js Properties.
    */
   props: {
+    /**
+     * Views contextual filters.
+     *
+     * @type {array}
+     * @default []
+     *
+     * @example
+     * <DruxtView :arguments="[1, 2, 3]" display-id="block_1" view-id="articles_aside" />
+     */
+    arguments: {
+      type: Array,
+      default: () => [],
+    },
+
     /**
      * The View Display ID.
      *
@@ -99,55 +113,6 @@ export default {
     }
   },
 
-  /** */
-  async fetch() {
-    let component = { ...this.component }
-
-    // Fetch View.
-    if (!this.view && (this.uuid || this.viewId)) {
-      if (this.uuid) {
-        this.view = await this.getResource({
-          type: this.type,
-          id: this.uuid,
-        })
-      } else {
-        const collection = await this.getCollection({ type: this.type, query: new DrupalJsonApiParams().addFilter('drupal_internal__id', this.viewId) })
-        this.view = { data: collection.data[0] }
-      }
-
-      // Build wrapper component object.
-      const options = this.getModuleComponents()
-      component = {
-        is: (((options.filter(o => o.global) || [])[0] || {}).name || 'DruxtWrapper'),
-        options: options.map(o => o.name) || [],
-      }
-    }
-
-    // Get scoped slots.
-    component.slots = Object.keys(this.getScopedSlots())
-
-    // Get wrapper component data to merge with module settings.
-    const wrapperData = await this.getWrapperData(component.is)
-    component.settings = merge(this.$druxt.settings.views, wrapperData.druxt || {}, { arrayMerge: (dest, src) => src })
-
-    // Fetch JSON:API Views resource.
-    const viewId = this.viewId || (((this.view || {}).data || {}).attributes || {}).drupal_internal__id
-    if (viewId) {
-      const query = this.getQuery(component.settings)
-      this.resource = await this.getResults({
-        viewId,
-        displayId: this.displayId,
-        query: stringify(query)
-      })
-    }
-
-    // Build wrapper component propsData.
-    component = { ...component, ...this.getModulePropsData(wrapperData.props) }
-
-    // Set component data.
-    this.component = component
-  },
-
   fetchKey(getCounter) {
     const parts = ['DruxtView', this.viewId || this.uuid, this.displayId].filter((o) => o)
     return [...parts, getCounter(parts.join(':'))].join(':')
@@ -378,6 +343,13 @@ export default {
         query.page = this.model.page
       }
 
+      // Contextual filters.
+      if (this.arguments.length) {
+        for (const index in this.arguments) {
+          query[`views-argument[${index}]`] = this.arguments[index]
+        }
+      }
+
       // Exposed filters.
       if (Object.entries(this.model.filter || {}).length) {
         query['views-filter'] = this.model.filter
@@ -419,6 +391,38 @@ export default {
      */
     componentOptions: ({ displayId, uuid, viewId }) => ([[viewId || uuid, displayId]]),
 
+    /**
+     * Fetch View configuration resource.
+     */
+    async fetchConfig() {
+      if (!this.view && (this.uuid || this.viewId)) {
+        if (this.uuid) {
+          this.view = await this.getResource({
+            type: this.type,
+            id: this.uuid,
+          })
+        } else {
+          const collection = await this.getCollection({ type: this.type, query: new DrupalJsonApiParams().addFilter('drupal_internal__id', this.viewId) })
+          this.view = { data: collection.data[0] }
+        }
+      }
+    },
+
+    /**
+     * Fetch JSON:API Views results.
+     */
+    async fetchData(settings) {
+      const viewId = this.viewId || (((this.view || {}).data || {}).attributes || {}).drupal_internal__id
+      if (viewId) {
+        const query = this.getQuery(settings)
+        this.resource = await this.getResults({
+          viewId,
+          displayId: this.displayId,
+          query: stringify(query)
+        })
+      }
+    },
+
     /**
      * Provides propsData for the DruxtWrapper.
      *
@@ -434,6 +438,16 @@ export default {
       view: vm.view
     }),
 
+    /**
+     * Component settings.
+     */
+    settings: ({ $druxt }, wrapperSettings) => {
+      const settings = merge($druxt.settings.views || {}, wrapperSettings, { arrayMerge: (dest, src) => src })
+      return {
+        query: settings.query || {},
+      }
+    },
+
     /**
      * Provides the scoped slots object for the Module render function.
      *

package/dist/components/DruxtViewsFilter.vue

@@ -1,8 +1,8 @@
 <template>
   <component
-    :is="wrapper.component"
+    :is="(wrapper || {}).component || 'div'"
     v-if="!$fetchState.pending"
-    v-bind="wrapper.propsData"
+    v-bind="(wrapper || {}).propsData"
   >
     <component
       :is="component.is"

package/dist/druxt-views.esm.js

@@ -7,7 +7,7 @@ import { DruxtEntityContextMixin } from 'druxt-entity';
 
 async function DruxtViewsStorybook({ stories }) {
   const { addTemplate, options } = this;
-  const druxt = new DruxtClient(options.druxt.baseUrl, options.druxt);
+  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);

package/dist/druxt-views.ssr.js

@@ -16,7 +16,7 @@ const md5__default = /*#__PURE__*/_interopDefaultLegacy(md5);
 
 async function DruxtViewsStorybook({ stories }) {
   const { addTemplate, options } = this;
-  const druxt$1 = new druxt.DruxtClient(options.druxt.baseUrl, options.druxt);
+  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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt-views",
-  "version": "0.14.0",
+  "version": "0.16.1",
   "description": "Drupal Views components for Druxt with support for filters, pagination and sorting.",
   "keywords": [
     "cms",
@@ -38,16 +38,17 @@
   "module": "dist/druxt-views.esm.js",
   "files": [
     "dist",
-    "nuxt"
+    "nuxt",
+    "templates"
   ],
   "dependencies": {
     "axios": "^0.21.1",
     "deepmerge": "^4.2.2",
     "drupal-jsonapi-params": "^1.1.12",
-    "druxt": "^0.11.0",
-    "druxt-blocks": "^0.13.0",
-    "druxt-entity": "^0.19.0",
-    "druxt-router": "^0.21.0",
+    "druxt": "^0.13.0",
+    "druxt-blocks": "^0.14.1",
+    "druxt-entity": "^0.21.2",
+    "druxt-router": "^0.24.0",
     "md5": "^2.3.0"
   },
   "optionalDependencies": {

package/templates/druxt-views.stories.js

@@ -0,0 +1,42 @@
+import DruxtView from 'druxt-views/dist/components/DruxtView.vue'
+
+export default {
+  title: <%= devalue(options.title) %>,
+  component: DruxtView,
+  argTypes: {
+    displayId: {
+      control: {
+        type: 'select',
+        options: [<%= options.displays.map(({ id }) => `'${id}'`).join(', ') %>]
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: <%= options.description ? devalue(options.description) : '" "' %>
+      }
+    }
+  }
+}
+
+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/store.js

@@ -0,0 +1,3 @@
+import { DruxtViewsStore } from 'druxt-views'
+
+export default DruxtViewsStore