druxt-views 0.18.2 → 0.20.0

package/dist/components/DruxtView.vue

@@ -281,8 +281,8 @@ export default {
   },
 
   watch: {
-    async '$route.query'(to) {
-      if (!Object.entries(to).length) {
+    '$route.query'(to) {
+      if (!Object.entries(to || {}).length) {
         this.model = {
           filter: {},
           page: null,
@@ -291,42 +291,42 @@ export default {
       }
     },
 
-    async displayId() {
-      await this.$fetch()
+    arguments() {
+      this.$fetch()
+    },
+
+    displayId() {
+      this.$fetch()
     },
 
     'model.filter': {
       deep: true,
-      async handler(to, from) {
-        if (!Object.entries(to).length && !Object.entries(from).length) {
+      handler(to, from) {
+        if (!Object.entries(to || {}).length && !Object.entries(from || {}).length) {
           return
         }
-        await this.$fetch()
+        this.$fetch()
       },
     },
 
-    async 'model.page'(to, from) {
+    'model.page'(to, from) {
       if (to !== from) {
-        await this.$fetch()
+        this.$fetch()
       }
     },
 
-    async 'model.sort'(to, from) {
+    'model.sort'(to, from) {
       if (to !== from) {
-        await this.$fetch()
+        this.$fetch()
       }
     },
 
-    async query() {
-      await this.$fetch()
-    },
-
-    async uuid() {
-      await this.$fetch()
+    uuid() {
+      this.$fetch()
     },
 
-    async viewId() {
-      await this.$fetch()
+    viewId() {
+      this.$fetch()
     },
   },
 
@@ -426,11 +426,16 @@ export default {
       if (!this.view && (this.uuid || this.viewId)) {
         if (this.uuid) {
           this.view = await this.getResource({
+            prefix: this.lang,
             type: this.type,
             id: this.uuid,
           })
         } else {
-          const collection = await this.getCollection({ type: this.type, query: new DrupalJsonApiParams().addFilter('drupal_internal__id', this.viewId) })
+          const collection = await this.getCollection({
+            prefix: this.lang,
+            type: this.type,
+            query: new DrupalJsonApiParams().addFilter('drupal_internal__id', this.viewId)
+          })
           this.view = { data: collection.data[0] }
         }
       }
@@ -444,9 +449,10 @@ export default {
       if (viewId) {
         const query = this.getQuery(settings)
         this.resource = await this.getResults({
-          viewId,
           displayId: this.displayId,
-          query: stringify(query)
+          prefix: this.lang,
+          query: stringify(query),
+          viewId
         })
       }
     },
@@ -563,6 +569,7 @@ export default {
           ref: 'attachements_before',
           props: {
             displayId,
+            langcode: this.lang,
             type: this.type,
             uuid: this.uuid,
             viewId: this.viewId,
@@ -584,6 +591,7 @@ export default {
           attrs: { ...attrs },
           key: result.id,
           props: {
+            langcode: this.lang,
             mode: this.mode,
             type: result.type,
             uuid: result.id
@@ -618,6 +626,7 @@ export default {
           ref: 'attachements_after',
           props: {
             displayId,
+            langcode: this.lang,
             type: this.type,
             uuid: this.uuid,
             viewId: this.viewId,
@@ -642,19 +651,29 @@ export default {
  *
  * @example @lang js
  * [
+ *   'DruxtView[ViewId][DisplayId][Langcode]',
  *   'DruxtView[ViewId][DisplayId]',
+ *   'DruxtView[ViewId][Langcode]',
  *   'DruxtView[ViewId]',
+ *   'DruxtView[UUID][DisplayId][Langcode]',
  *   'DruxtView[UUID][DisplayId]',
+ *   'DruxtView[UUID][Langcode]',
  *   'DruxtView[UUID]',
+ *   'DruxtView[DisplayId][Langcode]',
  *   'DruxtView[DisplayId]',
  * ]
  *
  * @example <caption>featured_articles (default)</caption> @lang js
  * [
+ *   'DruxtViewFeaturedArticlesDefaultEn',
  *   'DruxtViewFeaturedArticlesDefault',
+ *   'DruxtViewFeaturedArticlesEn',
  *   'DruxtViewFeaturedArticles',
+ *   'DruxtView16f5d68e5bae4d7aa61c6b2bc3b6d3b6DefaultEn',
  *   'DruxtView16f5d68e5bae4d7aa61c6b2bc3b6d3b6Default',
+ *   'DruxtView16f5d68e5bae4d7aa61c6b2bc3b6d3b6En',
  *   'DruxtView16f5d68e5bae4d7aa61c6b2bc3b6d3b6',
+ *   'DruxtViewDefaultEn',
  *   'DruxtViewDefault',
  * ]
  */

package/dist/components/DruxtViewsFilter.vue

@@ -55,16 +55,25 @@ export default {
  *
  * @example @lang js
  * [
+ *   'DruxtViewsFilter[FilterId][Langcode]',
  *   'DruxtViewsFilter[FilterId]',
+ *   'DruxtViewsFilter[PluginId][FilterId][Langcode]',
  *   'DruxtViewsFilter[PluginId][FilterId]',
+ *   'DruxtViewsFilter[PluginId][Langcode]',
+ *   'DruxtViewsFilter[PluginId]',
+ *   'DruxtViewsFilter[Default][Langcode]'
  *   'DruxtViewsFilter[Default]'
  * ]
  *
  * @example @lang js
  * [
+ *   'DruxtViewsFilterTaxonomyIndexTidTypeTargetIdEn',
  *   'DruxtViewsFilterTaxonomyIndexTidTypeTargetId',
+ *   'DruxtViewsFilterTypeTargetIdEn',
  *   'DruxtViewsFilterTypeTargetId',
+ *   'DruxtViewsFilterTaxonomyIndexTidEn',
  *   'DruxtViewsFilterTaxonomyIndexTid',
+ *   'DruxtViewsFilterDefaultEn',
  *   'DruxtViewsFilterDefault',
  * ]
  */

package/dist/components/DruxtViewsFilters.vue

@@ -125,13 +125,17 @@ export default {
  *
  * @example @lang js
  * [
+ *   'DruxtViewsFilters[Type][Langcode]',
  *   'DruxtViewsFilters[Type]',
+ *   'DruxtViewsFilters[Default][Langcode]'
  *   'DruxtViewsFilters[Default]'
  * ]
  *
  * @example @lang js
  * [
+ *   'DruxtViewsFiltersBasicEn',
  *   'DruxtViewsFiltersBasic',
+ *   'DruxtViewsFiltersDefaultEn'
  *   'DruxtViewsFiltersDefault'
  * ]
  */

package/dist/components/DruxtViewsPager.vue

@@ -178,13 +178,17 @@ export default {
  *
  * @example @lang js
  * [
+ *   'DruxtViewsPager[Type][Langcode]',
  *   'DruxtViewsPager[Type]',
+ *   'DruxtViewsPager[Default][Langcode]',
  *   'DruxtViewsPager[Default]'
  * ]
  *
  * @example @lang js
  * [
+ *   'DruxtViewsPagerFullEn',
  *   'DruxtViewsPagerFull',
+ *   'DruxtViewsPagerDefaultEn',
  *   'DruxtViewsPagerDefault'
  * ]
  */

package/dist/components/DruxtViewsSorts.vue

@@ -123,13 +123,17 @@ export default {
  *
  * @example @lang js
  * [
+ *   'DruxtViewsSorts[Type][Langcode]',
  *   'DruxtViewsSorts[Type]',
+ *   'DruxtViewsSorts[Default][Langcode]',
  *   'DruxtViewsSorts[Default]'
  * ]
  *
  * @example @lang js
  * [
+ *   'DruxtViewsSortsBasicEn',
  *   'DruxtViewsSortsBasic',
+ *   'DruxtViewsSortsDefaultEn',
  *   'DruxtViewsSortsDefault'
  * ]
  */

package/dist/components/blocks/DruxtBlockViewsBlock.vue

@@ -28,8 +28,6 @@ export default {
   name: 'DruxtBlockViewsBlock',
 
   /**
-   * Vue.js Mixins.
-   *
    * @see {@link https://blocks.druxtjs.org/api/mixins/block|DruxtBlocksBlockMixin}
    */
   mixins: [DruxtBlocksBlockMixin],
@@ -50,17 +48,16 @@ export default {
    */
   async fetch() {
     const results = await this.getCollection({
-      type: 'view--view',
+      prefix: this.langcode,
       query: new DrupalJsonApiParams()
         .addFilter('drupal_internal__id', this.viewId)
-        .addFields('view--view', ['id'])
+        .addFields('view--view', ['id']),
+      type: 'view--view',
     })
     this.uuid = results.data[0].id
   },
 
-  /**
-   * Vue.js Computed properties.
-   */
+  /** */
   computed: {
     /**
      * The View Display ID.
@@ -83,6 +80,7 @@ export default {
 
       return {
         displayId: this.displayId,
+        langcode: this.langcode,
         uuid: this.uuid,
         viewId: this.viewId
       }

package/dist/druxt-views.esm.js

@@ -3,6 +3,7 @@ import merge from 'deepmerge';
 import { DrupalJsonApiParams } from 'drupal-jsonapi-params';
 import { DruxtClient } from 'druxt';
 import md5 from 'md5';
+import Vue from 'vue';
 import { DruxtEntityContextMixin } from 'druxt-entity';
 
 async function DruxtViewsStorybook({ stories }) {
@@ -49,7 +50,7 @@ async function DruxtViewsStorybook({ stories }) {
   stories.push(resolve(options.buildDir, "./stories/druxt-views.*.stories.js"));
 }
 
-const DruxtViewsNuxtModule = function(moduleOptions = {}) {
+const DruxtViewsNuxtModule = async function(moduleOptions = {}) {
   const options = {
     baseUrl: moduleOptions.baseUrl,
     ...(this.options || {}).druxt || {},
@@ -63,10 +64,10 @@ const DruxtViewsNuxtModule = function(moduleOptions = {}) {
     dirs.push({ path: join(__dirname, "components") });
     dirs.push({ path: join(__dirname, "components/blocks") });
   });
-  this.addModule(["druxt", options]);
+  await this.addModule(["druxt", options]);
   const modules = ["druxt-entity", "druxt-schema"];
   for (const module of modules) {
-    this.addModule([module, { baseUrl: options.baseUrl }]);
+    await this.addModule([module, { baseUrl: options.baseUrl }]);
   }
   this.addPlugin({
     src: resolve(__dirname, "../templates/store.js"),
@@ -90,24 +91,26 @@ const DruxtViewsStore = ({ store }) => {
       results: {}
     }),
     mutations: {
-      addResults(state, { results, viewId, displayId, hash }) {
+      addResults(state, { results, viewId, displayId, prefix, hash }) {
         if (!results || !viewId || !displayId || !hash)
           return;
         if (!state.results[viewId])
-          state.results[viewId] = {};
+          Vue.set(state.results, viewId, {});
         if (!state.results[viewId][displayId])
-          state.results[viewId][displayId] = {};
-        state.results[viewId][displayId][hash] = results;
+          Vue.set(state.results[viewId], displayId, {});
+        if (!state.results[viewId][displayId][prefix])
+          Vue.set(state.results[viewId][displayId], prefix, {});
+        Vue.set(state.results[viewId][displayId][prefix], hash, results);
       }
     },
     actions: {
-      async getResults({ commit, state }, { viewId, displayId, query }) {
+      async getResults({ commit, state }, { viewId, displayId, query, prefix }) {
         const hash = query ? md5(this.$druxt.buildQueryUrl("", query)) : "_default";
-        if (typeof ((state.results[viewId] || {})[displayId] || {})[hash] !== "undefined") {
-          return state.results[viewId][displayId][hash];
+        if (typeof (((state.results[viewId] || {})[displayId] || {})[prefix] || {})[hash] !== "undefined") {
+          return state.results[viewId][displayId][prefix][hash];
         }
-        const results = await this.$druxt.getResource(`views--${viewId}`, displayId, query);
-        commit("addResults", { results, viewId, displayId, hash });
+        const results = await this.$druxt.getResource(`views--${viewId}`, displayId, query, prefix);
+        commit("addResults", { results, viewId, displayId, prefix, hash });
         return results;
       }
     }
@@ -249,6 +252,10 @@ const DruxtViewsViewMixin = {
       type: Object,
       require: true
     },
+    langcode: {
+      type: String,
+      default: void 0
+    },
     mode: {
       type: [Boolean, String],
       default: "default"
@@ -286,5 +293,4 @@ const DruxtViewsViewMixin = {
 
 DruxtViewsNuxtModule.meta = require("../package.json");
 
-export default DruxtViewsNuxtModule;
-export { DruxtViewsFilterMixin, DruxtViewsFiltersMixin, DruxtViewsPagerMixin, DruxtViewsSortsMixin, DruxtViewsStore, DruxtViewsViewMixin };
+export { DruxtViewsFilterMixin, DruxtViewsFiltersMixin, DruxtViewsPagerMixin, DruxtViewsSortsMixin, DruxtViewsStore, DruxtViewsViewMixin, DruxtViewsNuxtModule as default };

package/dist/druxt-views.ssr.js

@@ -7,12 +7,14 @@ const merge = require('deepmerge');
 const drupalJsonapiParams = require('drupal-jsonapi-params');
 const druxt = require('druxt');
 const md5 = require('md5');
+const Vue = require('vue');
 const druxtEntity = require('druxt-entity');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 const merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
 const md5__default = /*#__PURE__*/_interopDefaultLegacy(md5);
+const Vue__default = /*#__PURE__*/_interopDefaultLegacy(Vue);
 
 async function DruxtViewsStorybook({ stories }) {
   const { addTemplate, options } = this;
@@ -24,7 +26,7 @@ async function DruxtViewsStorybook({ stories }) {
   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 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;
@@ -58,7 +60,7 @@ async function DruxtViewsStorybook({ stories }) {
   stories.push(path.resolve(options.buildDir, "./stories/druxt-views.*.stories.js"));
 }
 
-const DruxtViewsNuxtModule = function(moduleOptions = {}) {
+const DruxtViewsNuxtModule = async function(moduleOptions = {}) {
   const options = {
     baseUrl: moduleOptions.baseUrl,
     ...(this.options || {}).druxt || {},
@@ -72,10 +74,10 @@ const DruxtViewsNuxtModule = function(moduleOptions = {}) {
     dirs.push({ path: path.join(__dirname, "components") });
     dirs.push({ path: path.join(__dirname, "components/blocks") });
   });
-  this.addModule(["druxt", options]);
+  await this.addModule(["druxt", options]);
   const modules = ["druxt-entity", "druxt-schema"];
   for (const module of modules) {
-    this.addModule([module, { baseUrl: options.baseUrl }]);
+    await this.addModule([module, { baseUrl: options.baseUrl }]);
   }
   this.addPlugin({
     src: path.resolve(__dirname, "../templates/store.js"),
@@ -99,24 +101,26 @@ const DruxtViewsStore = ({ store }) => {
       results: {}
     }),
     mutations: {
-      addResults(state, { results, viewId, displayId, hash }) {
+      addResults(state, { results, viewId, displayId, prefix, hash }) {
         if (!results || !viewId || !displayId || !hash)
           return;
         if (!state.results[viewId])
-          state.results[viewId] = {};
+          Vue__default["default"].set(state.results, viewId, {});
         if (!state.results[viewId][displayId])
-          state.results[viewId][displayId] = {};
-        state.results[viewId][displayId][hash] = results;
+          Vue__default["default"].set(state.results[viewId], displayId, {});
+        if (!state.results[viewId][displayId][prefix])
+          Vue__default["default"].set(state.results[viewId][displayId], prefix, {});
+        Vue__default["default"].set(state.results[viewId][displayId][prefix], hash, results);
       }
     },
     actions: {
-      async getResults({ commit, state }, { viewId, displayId, query }) {
-        const hash = query ? md5__default['default'](this.$druxt.buildQueryUrl("", query)) : "_default";
-        if (typeof ((state.results[viewId] || {})[displayId] || {})[hash] !== "undefined") {
-          return state.results[viewId][displayId][hash];
+      async getResults({ commit, state }, { viewId, displayId, query, prefix }) {
+        const hash = query ? md5__default["default"](this.$druxt.buildQueryUrl("", query)) : "_default";
+        if (typeof (((state.results[viewId] || {})[displayId] || {})[prefix] || {})[hash] !== "undefined") {
+          return state.results[viewId][displayId][prefix][hash];
         }
-        const results = await this.$druxt.getResource(`views--${viewId}`, displayId, query);
-        commit("addResults", { results, viewId, displayId, hash });
+        const results = await this.$druxt.getResource(`views--${viewId}`, displayId, query, prefix);
+        commit("addResults", { results, viewId, displayId, prefix, hash });
         return results;
       }
     }
@@ -258,6 +262,10 @@ const DruxtViewsViewMixin = {
       type: Object,
       require: true
     },
+    langcode: {
+      type: String,
+      default: void 0
+    },
     mode: {
       type: [Boolean, String],
       default: "default"
@@ -301,4 +309,4 @@ exports.DruxtViewsPagerMixin = DruxtViewsPagerMixin;
 exports.DruxtViewsSortsMixin = DruxtViewsSortsMixin;
 exports.DruxtViewsStore = DruxtViewsStore;
 exports.DruxtViewsViewMixin = DruxtViewsViewMixin;
-exports.default = DruxtViewsNuxtModule;
+exports["default"] = DruxtViewsNuxtModule;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "druxt-views",
-  "version": "0.18.2",
+  "version": "0.20.0",
   "description": "Drupal Views components for Druxt with support for filters, pagination and sorting.",
   "keywords": [
     "cms",
@@ -41,13 +41,13 @@
     "templates"
   ],
   "dependencies": {
-    "axios": "^0.21.1",
+    "axios": "^0.27.2",
     "deepmerge": "^4.2.2",
     "drupal-jsonapi-params": "^2.0.0",
-    "druxt": "^0.18.2",
-    "druxt-blocks": "^0.15.2",
-    "druxt-entity": "^0.24.3",
-    "druxt-router": "^0.26.1",
+    "druxt": "^0.20.0",
+    "druxt-blocks": "^0.16.3",
+    "druxt-entity": "^0.26.0",
+    "druxt-router": "^0.28.0",
     "md5": "^2.3.0"
   },
   "optionalDependencies": {

package/templates/druxt-views.stories.js

@@ -1,4 +1,10 @@
 import DruxtView from 'druxt-views/dist/components/DruxtView.vue'
+import DruxtModule from 'druxt/dist/components/DruxtModule.vue'
+
+DruxtView.__docgenInfo.props = [
+  ...DruxtModule.__docgenInfo.props,
+  ...DruxtView.__docgenInfo.props,
+].sort((a, b) => a.name < b.name ? -1 : 1).filter((o) => o.name !== 'v-model')
 
 export default {
   title: 'Druxt/Views/DruxtView',
@@ -57,7 +63,9 @@ export const Wrapper = (args, { argTypes }) => ({
 })
 Wrapper.parameters = {
   docs: {
-    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```',
+    description: {
+      story: '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 }
   }
 }
@@ -76,7 +84,9 @@ export const TemplateInjection = (args, { argTypes }) => ({
 })
 TemplateInjection.parameters = {
   docs: {
-    storyDescription: 'The DruxtView component can be themed by injecting the default template into the compomnent.\n\n```jsx\n' + code + '\n```',
+    description: {
+      story: 'The DruxtView component can be themed by injecting the default template into the compomnent.\n\n```jsx\n' + code + '\n```',
+    },
     source: { code }
   }
 }