druxt-views - npm Package Compare versions

Comparing version 0.6.2 to 0.7.0

dist/druxt-views.esm.js

 import { resolve } from 'path';
 import merge from 'deepmerge';
+import { DruxtComponentMixin } from 'druxt';
+import { stringify, parse } from 'qs';
 import { mapActions } from 'vuex';
-import { DruxtComponentMixin } from 'druxt';
 import { DruxtRouterMixin } from 'druxt-router';
@@ -9,2 +10,3 @@ import { DrupalJsonApiParams } from 'drupal-jsonapi-params';
 import { DruxtEntityContextMixin } from 'druxt-entity';
+import md5 from 'md5';
 
@@ -33,3 +35,3 @@ /**
  */
-var DruxtViewsModule = function (moduleOptions) {
+var DruxtViewsNuxtModule = function (moduleOptions) {
 
@@ -48,2 +50,12 @@ // Use root level Druxt options.
   });
+
+  // Add Vuex plugin.
+  this.addPlugin({
+    src: resolve(__dirname, '../nuxt/store.js'),
+    fileName: 'store/druxt-views.js',
+    options: options
+  });
+
+  // Enable Vuex Store.
+  this.options.store = true;
 };
@@ -121,10 +133,13 @@
   fetch: async function fetch() {
-    this.view = await this.getResource({
-      type: this.type,
-      id: this.uuid,
-    });
+    if (!this.view) {
+      this.view = await this.getResource({
+        type: this.type,
+        id: this.uuid,
+      });
+    }
 
-    this.results = await this.getResource({
-      type: ("views--" + (this.viewId)),
-      id: this.displayId
+    this.resource = await this.getResults({
+      viewId: this.viewId,
+      displayId: this.displayId,
+      query: stringify(this.query)
     });
@@ -140,10 +155,19 @@
    *
-   * @property {object[]} results - The View results JSON:API resources.
-   * @property {object} view - * The View JSON:API resource.
+   * @property {object} view - The View JSON:API resource.
    */
-  data: function () { return ({
-    results: [],
-    view: false
-  }); },
+  data: function data() {
+    // Stringify and parse the query object to fix nested objects.
+    var model = parse(stringify(this.$route.query));
 
+    return {
+      model: {
+        filter: model.filter || {},
+        page: parseInt(model.page) || null,
+        sort: model.sort || null,
+      },
+      resource: null,
+      view: false
+    }
+  },
+
   /**
@@ -161,5 +185,5 @@ * Vue.js Computed properties.
 
-      if (!((this.view || {}).attributes || {}).display) { return false }
+      if (!((((this.view || {}).data || {}).attributes || {}).display)) { return false }
 
-      var displays = this.view.attributes.display;
+      var displays = this.view.data.attributes.display;
       return Object.keys(displays).filter(function (key) {
@@ -180,5 +204,5 @@ return displays[key].display_plugin === 'attachment'
 
-      if (!((this.view || {}).attributes || {}).display) { return false }
+      if (!((((this.view || {}).data || {}).attributes || {}).display)) { return false }
 
-      var displays = this.view.attributes.display;
+      var displays = this.view.data.attributes.display;
       return Object.keys(displays).filter(function (key) {
@@ -192,2 +216,11 @@ return displays[key].display_plugin === 'attachment'
     /**
+     * The total item count.
+     *
+     * @type {integer}
+     */
+    count: function count() {
+      return parseInt(((this.resource || {}).meta || {}).count) || 0
+    },
+
+    /**
      * The View Display object.
@@ -198,9 +231,9 @@ *
     display: function display() {
-      if (!((this.view || {}).attributes || {}).display) { return false }
+      if (!(((this.view || {}).data || {}).attributes || {}).display) { return false }
 
-      if (this.display_id === 'default') { return this.view.attributes.display[this.display_id] }
+      if (this.display_id === 'default') { return this.view.data.attributes.display[this.display_id] }
 
       return merge(
-        this.view.attributes.display['default'],
-        this.view.attributes.display[this.displayId]
+        this.view.data.attributes.display['default'],
+        this.view.data.attributes.display[this.displayId]
       )
@@ -210,2 +243,11 @@ },
     /**
+     * Exposed filters.
+     *
+     * @type {object[]}
+     */
+    filters: function filters() {
+      return Object.values(((this.display || {}).display_options || {}).filters || {}).filter(function (filter) { return filter.exposed; })
+    },
+
+    /**
      * The View Headers data.
@@ -233,6 +275,106 @@ *
     },
+
+    /**
+     * The displays pager settings.
+     *
+     * @type {object}
+     */
+    pager: function pager() {
+      return ((this.display || {}).display_options || {}).pager || false
+    },
+
+    query: function query() {
+      var query = {};
+
+      // Pagination.
+      if (this.model.page) {
+        query.page = this.model.page;
+      }
+
+      // Exposed filters.
+      if (Object.entries(this.model.filter || {}).length) {
+        query['views-filter'] = this.model.filter;
+      }
+
+      // Exposed sorts.
+      if (this.model.sort) {
+        query['views-sort[sort_by]'] = this.model.sort;
+      }
+
+      return query
+    },
+
+    /**
+     * The JSON:API Views results.
+     *
+     * @type {object}
+     */
+    results: function results() {
+      return (this.resource || {}).data || []
+    },
+
+    /**
+     * Whether a pager should be shown.
+     *
+     * @type {boolean}
+     */
+    showPager: function showPager() {
+      return this.pager.type && this.pager.type !== 'none'
+    },
+
+    /**
+     * Whether Exposed sorts are available and should be displayed.
+     *
+     * @type {boolean}
+     */
+    showSorts: function showSorts() {
+      return !!(((((this.display || {}).display_options || {}).exposed_form || {}).options || {}).expose_sort_order && this.sorts.length)
+    },
+
+    /**
+     * Exposed sorts.
+     *
+     * @type {object[]}
+     */
+    sorts: function sorts() {
+      return Object.values(((this.display || {}).display_options || {}).sorts || {}).filter(function (sort) { return sort.exposed; })
+    }
   },
 
-  methods: Object.assign({}, mapActions({
-      getResource: 'druxtRouter/getEntity'
+  watch: {
+    '$route.query': async function $route_query(to, from) {
+      if (!Object.entries(to).length) {
+        this.model = {
+          filter: null,
+          page: null,
+          sort: null,
+        };
+        await this.$fetch;
+      }
+    },
+
+    displayId: async function displayId() {
+      await this.$fetch();
+    },
+
+    query: async function query(to, from) {
+      await this.$fetch();
+    },
+
+    uuid: async function uuid() {
+      await this.$fetch();
+    },
+  },
+
+  methods: Object.assign({}, {onFiltersUpdate: function onFiltersUpdate() {
+      this.model.page = null;
+      this.model.sort = null;
+    }},
+
+    /**
+     * Maps Vuex action to methods.
+     */
+    mapActions({
+      getResource: 'druxt/getResource',
+      getResults: 'druxt/views/getResults'
     })),
@@ -247,3 +389,6 @@
     propsData: {
+      count: vm.count,
       display: vm.display,
+      mode: vm.mode,
+      pager: vm.pager,
       results: vm.results,
@@ -253,13 +398,3 @@ view: vm.view
   });
-},
-
-  watch: {
-    uuid: async function uuid() {
-      await this.$fetch();
-    },
-
-    displayId: async function displayId() {
-      await this.$fetch();
-    }
-  }
+}
 };
@@ -346,10 +481,10 @@
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.$fetchState.pending)?_c(_vm.wrapper.component,_vm._b({tag:"component"},'component',_vm.wrapper.propsData,false),[_c(_vm.component.is,_vm._b({tag:"component",scopedSlots:_vm._u([{key:"header",fn:function(){return _vm._l((_vm.headers),function(header){return _c('span',{key:header.id,domProps:{"innerHTML":_vm._s(header.content.value)}})})},proxy:true},(_vm.attachments_before)?{key:"attachments_before",fn:function($attrs){return _vm._l((_vm.attachments_before),function(displayId){return _c('DruxtView',_vm._b({key:displayId,attrs:{"display-id":displayId,"type":_vm.type,"uuid":_vm.uuid,"view-id":_vm.viewId}},'DruxtView',$attrs,false))})}}:null,{key:"results",fn:function(options){return _vm._l((_vm.results),function(result){return _c('DruxtEntity',_vm._b({key:result.id},'DruxtEntity',Object.assign({}, {type: result.type,
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.$fetchState.pending && _vm.view)?_c(_vm.wrapper.component,_vm._b({tag:"component"},'component',_vm.wrapper.propsData,false),[_c(_vm.component.is,_vm._b({tag:"component",scopedSlots:_vm._u([{key:"header",fn:function(){return _vm._l((_vm.headers),function(header){return _c('span',{key:header.id,domProps:{"innerHTML":_vm._s(header.content.value)}})})},proxy:true},(_vm.filters)?{key:"filters",fn:function($attrs){return [_c('DruxtViewsFilters',_vm._b({attrs:{"filters":_vm.filters},on:{"input":_vm.onFiltersUpdate},model:{value:(_vm.model.filter),callback:function ($$v) {_vm.$set(_vm.model, "filter", $$v);},expression:"model.filter"}},'DruxtViewsFilters',Object.assign({}, _vm.display.display_options.exposed_form, $attrs),false))]}}:null,(_vm.showSorts)?{key:"sorts",fn:function($attrs){return [_c('DruxtViewsSorts',_vm._b({attrs:{"sorts":_vm.sorts},model:{value:(_vm.model.sort),callback:function ($$v) {_vm.$set(_vm.model, "sort", $$v);},expression:"model.sort"}},'DruxtViewsSorts',Object.assign({}, _vm.display.display_options.exposed_form, $attrs),false))]}}:null,(_vm.attachments_before)?{key:"attachments_before",fn:function($attrs){return _vm._l((_vm.attachments_before),function(attachmentDisplayId){return _c('DruxtView',_vm._b({key:attachmentDisplayId,attrs:{"display-id":attachmentDisplayId,"type":_vm.type,"uuid":_vm.uuid,"view-id":_vm.viewId}},'DruxtView',$attrs,false))})}}:null,{key:"results",fn:function(options){return _vm._l((_vm.results),function(result){return _c('DruxtEntity',_vm._b({key:result.id},'DruxtEntity',Object.assign({}, {type: result.type,
           uuid: result.id,
           mode: _vm.mode},
-          options),false))})}},(_vm.attachments_after)?{key:"attachments_after",fn:function($attrs){return _vm._l((_vm.attachments_after),function(displayId){return _c('DruxtView',_vm._b({key:displayId,attrs:{"display-id":displayId,"type":_vm.type,"uuid":_vm.uuid,"view-id":_vm.viewId}},'DruxtView',$attrs,false))})}}:null],null,true)},'component',_vm.component.propsData,false),[_vm._v(" "),_vm._v(" "),_vm._v(" "),_vm._v(" "),[_vm._l((_vm.headers),function(header){return _c('span',{key:header.id,domProps:{"innerHTML":_vm._s(header.content.value)}})}),_vm._v(" "),_vm._l((_vm.results),function(result){return _c('DruxtEntity',_vm._b({key:result.id},'DruxtEntity',{
+          options),false))})}},(_vm.showPager)?{key:"pager",fn:function($attrs){return [_c('DruxtViewsPager',_vm._b({model:{value:(_vm.model.page),callback:function ($$v) {_vm.$set(_vm.model, "page", $$v);},expression:"model.page"}},'DruxtViewsPager',Object.assign({}, {count: _vm.count}, _vm.pager, {resource: _vm.resource}, $attrs),false))]}}:null,(_vm.attachments_after)?{key:"attachments_after",fn:function($attrs){return _vm._l((_vm.attachments_after),function(attachmentDisplayId){return _c('DruxtView',_vm._b({key:attachmentDisplayId,attrs:{"display-id":attachmentDisplayId,"type":_vm.type,"uuid":_vm.uuid,"view-id":_vm.viewId}},'DruxtView',$attrs,false))})}}:null],null,true),model:{value:(_vm.model),callback:function ($$v) {_vm.model=$$v;},expression:"model"}},'component',_vm.component.propsData,false),[_vm._v(" "),_vm._v(" "),_vm._v(" "),_vm._v(" "),_vm._v(" "),_vm._v(" "),_vm._v(" "),[_vm._l((_vm.headers),function(header){return _c('span',{key:header.id,domProps:{"innerHTML":_vm._s(header.content.value)}})}),_vm._v(" "),_c('DruxtViewsFilters',_vm._b({attrs:{"filters":_vm.filters},on:{"input":_vm.onFiltersUpdate},model:{value:(_vm.model.filter),callback:function ($$v) {_vm.$set(_vm.model, "filter", $$v);},expression:"model.filter"}},'DruxtViewsFilters',_vm.display.display_options.exposed_form,false)),_vm._v(" "),(_vm.showSorts)?_c('DruxtViewsSorts',_vm._b({attrs:{"sorts":_vm.sorts},model:{value:(_vm.model.sort),callback:function ($$v) {_vm.$set(_vm.model, "sort", $$v);},expression:"model.sort"}},'DruxtViewsSorts',_vm.display.display_options.exposed_form,false)):_vm._e(),_vm._v(" "),_vm._l((_vm.results),function(result){return _c('DruxtEntity',_vm._b({key:result.id},'DruxtEntity',{
           type: result.type,
           uuid: result.id,
           mode: _vm.mode
-        },false))})]],2)],1):_vm._e()};
+        },false))}),_vm._v(" "),(_vm.showPager)?_c('DruxtViewsPager',_vm._b({model:{value:(_vm.model.page),callback:function ($$v) {_vm.$set(_vm.model, "page", $$v);},expression:"model.page"}},'DruxtViewsPager',Object.assign({}, {count: _vm.count}, _vm.pager, {resource: _vm.resource}),false)):_vm._e()]],2)],1):_vm._e()};
 var __vue_staticRenderFns__ = [];
@@ -388,4 +523,66 @@
 
+/**
+ * The `<DruxtViewsFilter />` Vue.js component.
+ *
+ * Renders a slot themable Exposed Views filter.
+ */
 var script$1 = {
-  mixins: [DruxtRouterMixin],
+  name: 'DruxtViewsFilter',
+
+  mixins: [DruxtComponentMixin],
+
+  /**
+   * Vue.js Properties.
+   *
+   * @see {@link https://vuejs.org/v2/guide/components-props.html}
+   */
+  props: {
+    /**
+     * The Exposed Filter objects.
+     *
+     * @type {object[]}
+     */
+    filter: {
+      type: Object,
+      required: true,
+    },
+
+    /**
+     * The DruxtViewFilter model value.
+     *
+     * @type {*}
+     */
+    value: {
+      type: [Array, Number, String],
+      default: undefined,
+    },
+  },
+
+  data: function data() {
+    return {
+      model: this.value,
+    }
+  },
+
+  watch: {
+    model: function model() {
+      this.$emit('input', this.model);
+    }
+  },
+
+  druxt: function (ref) {
+    var vm = ref.vm;
+
+    return ({
+    componentOptions: [
+      [vm.filter.id],
+      [vm.filter.plugin_id, vm.filter.id],
+      ['default']
+    ],
+
+    propsData: {
+      filter: vm.filter
+    }
+  });
+},
 };
@@ -397,3 +594,3 @@
 /* template */
-var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('DruxtView',_vm._b({},'DruxtView',_vm.route.props,false))};
+var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.$fetchState.pending)?_c(_vm.wrapper.component,_vm._b({tag:"component"},'component',_vm.wrapper.propsData,false),[_c(_vm.component.is,_vm._b({tag:"component",model:{value:(_vm.model),callback:function ($$v) {_vm.model=$$v;},expression:"model"}},'component',_vm.component.propsData,false))],1):_vm._e()};
 var __vue_staticRenderFns__$1 = [];
@@ -430,5 +627,504 @@
 
+/**
+ * The `<DruxtViewsFilters />` Vue.js component.
+ *
+ * Renders slot themable Exposed Views filters.
+ */
+var script$2 = {
+  name: 'DruxtViewsFilters',
+
+  mixins: [DruxtComponentMixin],
+
+  /**
+   * Vue.js Properties.
+   *
+   * @see {@link https://vuejs.org/v2/guide/components-props.html}
+   */
+  props: {
+    /**
+     * The Exposed Filter objects.
+     *
+     * @type {object[]}
+     */
+    filters: {
+      type: Array,
+      required: true,
+    },
+
+    /**
+     * The Exposed form options.
+     *
+     * @type {object}
+     */
+    options: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The Exposed form type.
+     *
+     * @type {string}
+     */
+    type: {
+      type: String,
+      default: 'basic',
+    },
+
+    /**
+     * The DruxtViewFilters model value.
+     *
+     * @type {object}
+     */
+    value: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+  },
+
+  data: function data() {
+    return {
+      model: Object.assign({}, this.value)
+    }
+  },
+
+  watch: {
+    model: {
+      deep: true,
+      handler: function handler() {
+        // Only emit 'input' if using the default 'DruxtWrapper' component.
+        if (this.component.is === 'DruxtWrapper') {
+          this.$emit('input', this.model);
+        }
+      }
+    }
+  },
+
+  druxt: function (ref) {
+    var vm = ref.vm;
+
+    return ({
+    componentOptions: [[vm.type], ['default']],
+
+    propsData: {
+      options: vm.options,
+      filters: vm.filters,
+      type: vm.type,
+    }
+  });
+},
+
+  render: function render(h) {
+    var this$1 = this;
+
+    var wrapperData = {
+      class: this.wrapper.class || undefined,
+      style: this.wrapper.style || undefined,
+      props: this.wrapper.propsData,
+    };
+
+    // Build scoped slots for each filter.
+    var scopedSlots = {};
+
+    this.filters.map(function (filter) {
+      scopedSlots[filter.expose.identifier] = function (attrs) { return h('DruxtViewsFilter', {
+        attrs: Object.assign({}, attrs, this$1.$attrs),
+        props: {
+          filter: filter,
+          value: this$1.model[filter.expose.identifier]
+        },
+        on: {
+          input: function (value) {
+            var obj;
+
+            this$1.model = Object.assign({}, this$1.model, ( obj = {}, obj[filter.expose.identifier] = value, obj ));
+          }
+        }
+      }); };
+    });
+
+    // Build default slot.
+    scopedSlots.default = function (attrs) { return this$1.filters.map(function (filter) { return scopedSlots[filter.expose.identifier](attrs); }); };
+
+    // Return wrapped component.
+    return h(this.wrapper.component, wrapperData, [
+      h(this.component.is, {
+        attrs: this.$attrs,
+        props: Object.assign({}, this.component.propsData,
+          {value: this.model}),
+        scopedSlots: scopedSlots,
+        on: {
+          input: function (value) {
+            this$1.model = value;
+            this$1.$emit('input', this$1.model);
+          }
+        }
+      })
+    ])
+  }
+};
+
+/* script */
+var __vue_script__$2 = script$2;
+
+/* template */
+
+  /* style */
+  var __vue_inject_styles__$2 = undefined;
+  /* scoped */
+  var __vue_scope_id__$2 = undefined;
+  /* module identifier */
+  var __vue_module_identifier__$2 = undefined;
+  /* functional template */
+  var __vue_is_functional_template__$2 = undefined;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__$2 = /*#__PURE__*/normalizeComponent(
+    {},
+    __vue_inject_styles__$2,
+    __vue_script__$2,
+    __vue_scope_id__$2,
+    __vue_is_functional_template__$2,
+    __vue_module_identifier__$2,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
 //
 
 /**
+ * The `<DruxtViewsPager />` Vue.js component.
+ *
+ * Renders a slot themable Views pager component.
+ */
+var script$3 = {
+  name: 'DruxtViewsPager',
+
+  mixins: [DruxtComponentMixin],
+
+  /**
+   * Vue.js Properties.
+   *
+   * @see {@link https://vuejs.org/v2/guide/components-props.html}
+   */
+  props: {
+    /**
+     * The JSON:API Views results total count.
+     *
+     * @type {integer}
+     */
+    count: {
+      type: [Boolean, Number],
+      default: false,
+    },
+
+    /**
+     * The Pager options.
+     *
+     * @type {object}
+     */
+    options: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The JSON:API Views results resource.
+     *
+     * @type {object}
+     */
+    resource: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The Pager type.
+     *
+     * @type {object}
+     */
+    type: {
+      type: String,
+      default: 'none',
+    },
+
+    /**
+     * The DruxtViewPager model value.
+     *
+     * @type {integer}
+     */
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data: function data() {
+    return {
+      model: this.value
+    }
+  },
+
+  watch: {
+    model: function model() {
+      this.$emit('input', this.model);
+    }
+  },
+
+  methods: {
+    getQuery: function getQuery(link) {
+      var query = Object.fromEntries(new URLSearchParams(link.href.split('?')[1]));
+      if (typeof query.page === 'string') { query.page = parseInt(query.page); }
+      return query
+    },
+
+    getRoute: function getRoute(link) {
+      var query = this.getQuery(link);
+      return { query: Object.assign({}, this.$route.query, {page: query.page}) }
+    },
+
+    setPage: function setPage(link) {
+      var query = this.getQuery(link);
+      this.model = query.page;
+    }
+  },
+
+  druxt: function (ref) {
+    var vm = ref.vm;
+
+    return ({
+    componentOptions: [[vm.type], ['default']],
+
+    propsData: {
+      count: parseInt(vm.count),
+      options: vm.options,
+      resource: vm.resource,
+      type: vm.type,
+    }
+  });
+}
+};
+
+/* script */
+var __vue_script__$3 = script$3;
+
+/* template */
+var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.$fetchState.pending)?_c(_vm.wrapper.component,_vm._b({tag:"component"},'component',_vm.wrapper.propsData,false),[_c(_vm.component.is,_vm._b({tag:"component",model:{value:(_vm.model),callback:function ($$v) {_vm.model=$$v;},expression:"model"}},'component',_vm.component.propsData,false),[_c('ul',[(_vm.resource.links.prev)?_c('li',[_c('nuxt-link',{attrs:{"to":_vm.getRoute(_vm.resource.links.prev)},nativeOn:{"click":function($event){return _vm.setPage(_vm.resource.links.prev)}}},[_vm._v("\n          "+_vm._s(_vm.options.tags.previous)+"\n        ")])],1):_vm._e(),_vm._v(" "),(_vm.resource.links.next)?_c('li',[_c('nuxt-link',{attrs:{"to":_vm.getRoute(_vm.resource.links.next)},nativeOn:{"click":function($event){return _vm.setPage(_vm.resource.links.next)}}},[_vm._v("\n          "+_vm._s(_vm.options.tags.next)+"\n        ")])],1):_vm._e()])])],1):_vm._e()};
+var __vue_staticRenderFns__$2 = [];
+
+  /* style */
+  var __vue_inject_styles__$3 = undefined;
+  /* scoped */
+  var __vue_scope_id__$3 = undefined;
+  /* module identifier */
+  var __vue_module_identifier__$3 = undefined;
+  /* functional template */
+  var __vue_is_functional_template__$3 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__$3 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
+    __vue_inject_styles__$3,
+    __vue_script__$3,
+    __vue_scope_id__$3,
+    __vue_is_functional_template__$3,
+    __vue_module_identifier__$3,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+//
+
+/**
+ * The `<DruxtViewsSorts />` Vue.js component.
+ *
+ * @example
+ * <DruxtViewsSorts
+ *   :options="{}"
+ *   :sorts="[{}]"
+ *   type="basic"
+ * />
+ */
+var script$4 = {
+  name: 'DruxtViewsSorts',
+
+  mixins: [DruxtComponentMixin],
+
+  /**
+   * Vue.js Properties.
+   *
+   * @see {@link https://vuejs.org/v2/guide/components-props.html}
+   */
+  props: {
+    /**
+     * The Exposed form options.
+     *
+     * @type {object}
+     */
+    options: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The Exposed Sort objects.
+     *
+     * @type {object[]}
+     */
+    sorts: {
+      type: Array,
+      default: function () { return ([]); },
+    },
+
+    /**
+     * The Exposed form type.
+     *
+     * @type {string}
+     */
+    type: {
+      type: String,
+      default: 'basic',
+    },
+
+    /**
+     * The DruxtViewSorts model value.
+     *
+     * @type {string}
+     */
+    value: {
+      type: String,
+      default: undefined,
+    },
+  },
+
+  data: function data() {
+    return {
+      model: this.value
+    }
+  },
+
+  watch: {
+    model: function model() {
+      this.$emit('input', this.model);
+    }
+  },
+
+  methods: {
+    sortBy: function sortBy(sort) {
+      return { query: Object.assign({}, this.$route.query, {sort: sort.id}) }
+    },
+  },
+
+  druxt: function (ref) {
+    var vm = ref.vm;
+
+    return ({
+    componentOptions: [[vm.type], ['default']],
+
+    propsData: {
+      options: vm.options,
+      sorts: vm.sorts,
+      type: vm.type,
+    }
+  });
+}
+};
+
+/* script */
+var __vue_script__$4 = script$4;
+
+/* template */
+var __vue_render__$3 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.$fetchState.pending)?_c(_vm.wrapper.component,_vm._b({tag:"component"},'component',_vm.wrapper.propsData,false),[_c(_vm.component.is,_vm._b({tag:"component",model:{value:(_vm.model),callback:function ($$v) {_vm.model=$$v;},expression:"model"}},'component',_vm.component.propsData,false),[_c('div',[_c('strong',[_vm._v(_vm._s(_vm.options.exposed_sorts_label))]),_vm._v(" "),_c('ul',_vm._l((_vm.sorts),function(sort){return _c('li',{key:sort.id},[_c('nuxt-link',{attrs:{"to":_vm.sortBy(sort)},nativeOn:{"click":function($event){_vm.model = sort.id;}}},[_vm._v("\n            "+_vm._s(sort.expose.label)+"\n          ")])],1)}),0)])])],1):_vm._e()};
+var __vue_staticRenderFns__$3 = [];
+
+  /* style */
+  var __vue_inject_styles__$4 = undefined;
+  /* scoped */
+  var __vue_scope_id__$4 = undefined;
+  /* module identifier */
+  var __vue_module_identifier__$4 = undefined;
+  /* functional template */
+  var __vue_is_functional_template__$4 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__$4 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
+    __vue_inject_styles__$4,
+    __vue_script__$4,
+    __vue_scope_id__$4,
+    __vue_is_functional_template__$4,
+    __vue_module_identifier__$4,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+//
+
+var script$5 = {
+  mixins: [DruxtRouterMixin],
+};
+
+/* script */
+var __vue_script__$5 = script$5;
+
+/* template */
+var __vue_render__$4 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('DruxtView',_vm._b({},'DruxtView',_vm.route.props,false))};
+var __vue_staticRenderFns__$4 = [];
+
+  /* style */
+  var __vue_inject_styles__$5 = undefined;
+  /* scoped */
+  var __vue_scope_id__$5 = undefined;
+  /* module identifier */
+  var __vue_module_identifier__$5 = undefined;
+  /* functional template */
+  var __vue_is_functional_template__$5 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__$5 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
+    __vue_inject_styles__$5,
+    __vue_script__$5,
+    __vue_scope_id__$5,
+    __vue_is_functional_template__$5,
+    __vue_module_identifier__$5,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+//
+
+/**
  * Views block.
@@ -447,3 +1143,3 @@ *
  */
-var script$2 = {
+var script$6 = {
   name: 'DruxtBlockViewsBlock',
@@ -530,16 +1226,16 @@
 /* script */
-var __vue_script__$2 = script$2;
+var __vue_script__$6 = script$6;
 
 /* template */
-var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.$fetchState.pending)?_c('div',[_c('DruxtView',_vm._b({},'DruxtView',_vm.propsData,false))],1):_vm._e()};
-var __vue_staticRenderFns__$2 = [];
+var __vue_render__$5 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.$fetchState.pending)?_c('div',[_c('DruxtView',_vm._b({},'DruxtView',_vm.propsData,false))],1):_vm._e()};
+var __vue_staticRenderFns__$5 = [];
 
   /* style */
-  var __vue_inject_styles__$2 = undefined;
+  var __vue_inject_styles__$6 = undefined;
   /* scoped */
-  var __vue_scope_id__$2 = undefined;
+  var __vue_scope_id__$6 = undefined;
   /* module identifier */
-  var __vue_module_identifier__$2 = undefined;
+  var __vue_module_identifier__$6 = undefined;
   /* functional template */
-  var __vue_is_functional_template__$2 = false;
+  var __vue_is_functional_template__$6 = false;
   /* style inject */
@@ -553,9 +1249,9 @@
   
-  var __vue_component__$2 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
-    __vue_inject_styles__$2,
-    __vue_script__$2,
-    __vue_scope_id__$2,
-    __vue_is_functional_template__$2,
-    __vue_module_identifier__$2,
+  var __vue_component__$6 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
+    __vue_inject_styles__$6,
+    __vue_script__$6,
+    __vue_scope_id__$6,
+    __vue_is_functional_template__$6,
+    __vue_module_identifier__$6,
     false,
@@ -567,17 +1263,82 @@ undefined,
 
+/**
+ * The `<DruxtView />` Vue.js component.
+ *
+ * @type {object}
+ * @exports DruxtView
+ * @see {@link ./DruxtView|DruxtView}
+ */
 
-
 var index = /*#__PURE__*/Object.freeze({
   __proto__: null,
   DruxtView: __vue_component__,
-  DruxtRouterView: __vue_component__$1,
-  DruxtBlockViewsBlock: __vue_component__$2
+  DruxtViewsFilter: __vue_component__$1,
+  DruxtViewsFilters: __vue_component__$2,
+  DruxtViewsPager: __vue_component__$3,
+  DruxtViewsSorts: __vue_component__$4,
+  DruxtRouterView: __vue_component__$5,
+  DruxtBlockViewsBlock: __vue_component__$6
 });
 
 /**
- * Provides Vue.js properties to render Drupal Views components.
+ * Provides Vue.js properties for DruxtViewsFilter slot themable components.
  *
- * This Mixin is intended for use by `view` type Component Suggestions for
- * targetted theming of Drupal Views.
+ * @mixin
  *
+ * @example @lang vue
+ * <script>
+ * import { DruxtViewsFilterMixin } from 'druxt-views'
+ *
+ * export default {
+ *   mixins: [DruxtViewsFilterMixin],
+ * }
+ * </script>
+ */
+var DruxtViewsFilterMixin = {
+  /**
+   * Vue.js Properties.
+   */
+  props: {
+    /**
+     * The Exposed Filter object.
+     *
+     * @type {object}
+     */
+    filter: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The DruxtViewFilter model value.
+     *
+     * @type {*}
+     */
+    value: {
+      type: [Array, Boolean, Number, String],
+      default: undefined,
+    },
+  },
+
+  /**
+   * Vue.js Data object.
+   *
+   * @property {object} model - The DruxtViewFilter model.
+   */
+  data: function data() {
+    return {
+      model: this.value
+    }
+  },
+
+  watch: {
+    model: function model() {
+      this.$emit('input', this.model);
+    }
+  }
+};
+
+/**
+ * Provides Vue.js properties for DruxtViewsFilters slot themable components.
+ *
  * @mixin
@@ -587,12 +1348,246 @@ *
  * <script>
- * // Import mixin.
+ * import { DruxtViewsFiltersMixin } from 'druxt-views'
+ *
+ * export default {
+ *   mixins: [DruxtViewsFiltersMixin],
+ * }
+ * </script>
+ */
+var DruxtViewsFiltersMixin = {
+  /**
+   * Vue.js Properties.
+   */
+  props: {
+    /**
+     * The Exposed Filter objects.
+     *
+     * @type {object[]}
+     */
+    filters: {
+      type: Array,
+      default: function () { return ([]); },
+    },
+
+    /**
+     * The Exposed form options.
+     *
+     * @type {object}
+     */
+    options: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The Exposed form type.
+     *
+     * @type {string}
+     */
+    type: {
+      type: String,
+      default: 'basic',
+    },
+
+    /**
+     * The DruxtViewFilters model value.
+     *
+     * @type {object}
+     */
+    value: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+  },
+
+  /**
+   * Vue.js Data object.
+   *
+   * @property {object} model - The DruxtViewFilters model.
+   */
+  data: function data() {
+    return {
+      model: this.value
+    }
+  }
+};
+
+/**
+ * Provides Vue.js properties for DruxtViewPager slot themable components.
+ *
+ * @mixin
+ *
+ * @example @lang vue
+ * <script>
+ * import { DruxtViewsPagerMixin } from 'druxt-views'
+ *
+ * export default {
+ *   mixins: [DruxtViewsPagerMixin],
+ * }
+ * </script>
+ */
+var DruxtViewsPagerMixin = {
+  /**
+   * Vue.js Properties.
+   */
+  props: {
+    /**
+     * The JSON:API Views results total count.
+     *
+     * @type {integer}
+     */
+    count: {
+      type: [Boolean, Number],
+      default: false,
+    },
+
+    /**
+     * The Pager options.
+     *
+     * @type {object}
+     */
+    options: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The JSON:API Views results resource.
+     *
+     * @type {object}
+     */
+    resource: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The Pager type.
+     *
+     * @type {object}
+     */
+    type: {
+      type: String,
+      default: 'none',
+    },
+
+    /**
+     * The DruxtViewPager model value.
+     *
+     * @type {integer}
+     */
+    value: {
+      type: Number,
+      default: 0,
+    },
+  },
+
+  /**
+   * Vue.js Data object.
+   *
+   * @property {object} model - The DruxtViewPager model.
+   */
+  data: function data() {
+    return {
+      model: this.value
+    }
+  },
+
+  watch: {
+    model: function model() {
+      this.$emit('input', this.model);
+    }
+  }
+};
+
+/**
+ * Provides Vue.js properties for DruxtViewSorts slot themable components.
+ *
+ * @mixin
+ *
+ * @example @lang vue
+ * <script>
+ * import { DruxtViewSortsMixin } from 'druxt-views'
+ *
+ * export default {
+ *   mixins: [DruxtViewSortsMixin],
+ * }
+ * </script>
+ */
+var DruxtViewsSortsMixin = {
+  /**
+   * Vue.js Properties.
+   */
+  props: {
+    /**
+     * The Exposed form options.
+     *
+     * @type {object}
+     */
+    options: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The Exposed Sort objects.
+     *
+     * @type {object[]}
+     */
+    sorts: {
+      type: Array,
+      default: function () { return ([]); },
+    },
+
+    /**
+     * The Exposed form type.
+     *
+     * @type {string}
+     */
+    type: {
+      type: String,
+      default: 'basic',
+    },
+
+    /**
+     * The DruxtViewSorts model value.
+     *
+     * @type {string}
+     */
+    value: {
+      type: String,
+      default: undefined,
+    },
+  },
+
+  /**
+   * Vue.js Data object.
+   *
+   * @property {object} model - The DruxtViewSorts model.
+   */
+  data: function data() {
+    return {
+      model: this.value
+    }
+  },
+
+  watch: {
+    model: function model() {
+      this.$emit('input', this.model);
+    }
+  }
+};
+
+/**
+ * Provides Vue.js properties for DruxtView slot themable components.
+ *
+ * @mixin
+ *
+ * @example @lang vue
+ * <script>
  * import { DruxtViewsViewMixin } from 'druxt-views'
  *
  * export default {
- *   // Register mixin.
  *   mixins: [DruxtViewsViewMixin],
  * }
  * </script>
- *
- * @see {@link https://entity.druxtjs.org/api/mixins/componentSuggestion.html|DruxtEntityComponentSuggestionMixin}
  */
@@ -612,2 +1607,12 @@ var DruxtViewsViewMixin = {
     /**
+     * The JSON:API Views results total count.
+     *
+     * @type {integer}
+     */
+    count: {
+      type: Number,
+      require: true,
+    },
+
+    /**
      * The View display object.
@@ -623,2 +1628,22 @@ *
     /**
+     * The Entity display mode.
+     *
+     * @type {boolean|string}
+     */
+    mode: {
+      type: [Boolean, String],
+      default: 'default'
+    },
+
+    /**
+     * The View pager settings.
+     *
+     * @type {object}
+     */
+    pager: {
+      type: Object,
+      require: true,
+    },
+
+    /**
      * The JSON:API Views results.
@@ -634,2 +1659,14 @@ *
     /**
+     * The DruxtView model value.
+     *
+     * @type {object}
+     */
+    value: {
+      type: Object,
+      default: function () { return ({
+        page: null,
+      }); }
+    },
+
+    /**
      * The JSON:API View resource.
@@ -643,6 +1680,150 @@ *
     },
+  },
+
+  /**
+   * Vue.js Data object.
+   *
+   * @property {object} model - The DruxtView model.
+   */
+  data: function data() {
+    return {
+      model: this.value
+    }
+  },
+
+  watch: {
+    model: function model() {
+      this.$emit('input', this.model);
+    }
   }
 };
 
-export default DruxtViewsModule;
-export { __vue_component__$2 as DruxtBlockViewsBlock, __vue_component__$1 as DruxtRouterView, __vue_component__ as DruxtView, index as DruxtViewsComponents, DruxtViewsViewMixin };
+/**
+ * Vue.js mixin for DruxtViewsFilter slot themable components.
+ *
+ * @type {object}
+ * @exports DruxtViewsFilterMixin
+ * @see {@link ./filter|DruxtViewsFilterMixin}
+ */
+
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  DruxtViewsFilterMixin: DruxtViewsFilterMixin,
+  DruxtViewsFiltersMixin: DruxtViewsFiltersMixin,
+  DruxtViewsPagerMixin: DruxtViewsPagerMixin,
+  DruxtViewsSortsMixin: DruxtViewsSortsMixin,
+  DruxtViewsViewMixin: DruxtViewsViewMixin
+});
+
+var DruxtViewsStore = function (ref) {
+  var store = ref.store;
+
+  if (typeof store === 'undefined') {
+    throw new TypeError('Vuex store not found.')
+  }
+
+  /**
+   * @namespace
+   */
+  var namespace = 'druxt/views';
+
+  /**
+   * The druxt/views Vuex module.
+   *
+   * Provides a Vuex state object, mutations and actions for interacting with JSON:API Views.
+   *
+   * @name druxt/views
+   * @module druxt/views
+   */
+  var module = {
+    namespaced: true,
+
+    /**
+     * Vuex State object.
+     *
+     * @name state
+     * @type {object}
+     * @property {object} results - JSON:API Views results store.
+     * @readonly
+     */
+    state: function () { return ({
+      results: {}
+    }); },
+
+    /**
+     * Vuex Mutations.
+     */
+    mutations: {
+      /**
+       * @name addResults
+       * @mutator {object} addResults=results Adds JSON:API Views results to the Vuex state object.
+       * @param {object} results - The JSON:API Views results.
+       *
+       * @example @lang js
+       * this.$store.commit('druxt/views/addResults', { results, viewId, displayId, hash })
+       */
+      addResults: function addResults (state, ref) {
+        var results = ref.results;
+        var viewId = ref.viewId;
+        var displayId = ref.displayId;
+        var hash = ref.hash;
+
+        if (!results || !viewId || !displayId || !hash) { return }
+
+        if (!state.results[viewId]) { state.results[viewId] = {}; }
+        if (!state.results[viewId][displayId]) { state.results[viewId][displayId] = {}; }
+        state.results[viewId][displayId][hash] = results;
+      }
+    },
+
+    /**
+     * Vuex Actions.
+     */
+    actions: {
+      /**
+       * Get View results.
+       *
+       * - Executes query against Drupal JSON:API.
+       * - Caches result in the Vuex store.
+       * - Returns cached result from Vuex store when available.
+       *
+       * @name getResults
+       * @action get=results
+       * @param {object} query The View results query object
+       * @return {object} The JSON:API Views results resource.
+       *
+       * @example @lang js
+       * const { data, meta, links } = await this.$store.dispatch('druxt/view/getResults', {
+       *   viewId,
+       *   displayId,
+       *   query
+       * })
+       */
+      getResults: async function getResults (ref, ref$1) {
+        var commit = ref.commit;
+        var state = ref.state;
+        var viewId = ref$1.viewId;
+        var displayId = ref$1.displayId;
+        var query = ref$1.query;
+
+        var hash = query ? md5(this.$druxt.buildQueryUrl('', query)) : '_default';
+        if (typeof ((state.results[viewId] || {})[displayId] || {})[hash] !== 'undefined') {
+          return state.results[viewId][displayId][hash]
+        }
+
+        var results = await this.$druxt.getResource(("views--" + viewId), displayId, query);
+
+        commit('addResults', { results: results, viewId: viewId, displayId: displayId, hash: hash });
+
+        return results
+      }
+    }
+  };
+
+  store.registerModule(namespace, module, {
+    preserveState: Boolean(store.state[namespace])
+  });
+};
+
+export default DruxtViewsNuxtModule;
+export { __vue_component__$6 as DruxtBlockViewsBlock, __vue_component__$5 as DruxtRouterView, __vue_component__ as DruxtView, index as DruxtViewsComponents, __vue_component__$1 as DruxtViewsFilter, DruxtViewsFilterMixin, __vue_component__$2 as DruxtViewsFilters, DruxtViewsFiltersMixin, index$1 as DruxtViewsMixins, __vue_component__$3 as DruxtViewsPager, DruxtViewsPagerMixin, __vue_component__$4 as DruxtViewsSorts, DruxtViewsSortsMixin, DruxtViewsStore, DruxtViewsViewMixin };

dist/druxt-views.min.js

@@ -1,1 +0,1 @@
-var VueDrupalEntity=function(t,e,i,n,s,r,u,a,d){"use strict";i=i&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i;function o(t,e,i,n,s,r,u,a,d,o){"boolean"!=typeof u&&(d=a,a=u,u=!1);var p,c="function"==typeof i?i.options:i;if(t&&t.render&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns,c._compiled=!0,s&&(c.functional=!0)),n&&(c._scopeId=n),r?(p=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,d(t)),t&&t._registeredComponents&&t._registeredComponents.add(r)},c._ssrRegister=p):e&&(p=u?function(t){e.call(this,o(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),p)if(c.functional){var l=c.render;c.render=function(t,e){return p.call(e),l(t,e)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,p):[p]}return i}var p=o({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.$fetchState.pending?t._e():i(t.wrapper.component,t._b({tag:"component"},"component",t.wrapper.propsData,!1),[i(t.component.is,t._b({tag:"component",scopedSlots:t._u([{key:"header",fn:function(){return t._l(t.headers,(function(e){return i("span",{key:e.id,domProps:{innerHTML:t._s(e.content.value)}})}))},proxy:!0},t.attachments_before?{key:"attachments_before",fn:function(e){return t._l(t.attachments_before,(function(n){return i("DruxtView",t._b({key:n,attrs:{"display-id":n,type:t.type,uuid:t.uuid,"view-id":t.viewId}},"DruxtView",e,!1))}))}}:null,{key:"results",fn:function(e){return t._l(t.results,(function(n){return i("DruxtEntity",t._b({key:n.id},"DruxtEntity",Object.assign({},{type:n.type,uuid:n.id,mode:t.mode},e),!1))}))}},t.attachments_after?{key:"attachments_after",fn:function(e){return t._l(t.attachments_after,(function(n){return i("DruxtView",t._b({key:n,attrs:{"display-id":n,type:t.type,uuid:t.uuid,"view-id":t.viewId}},"DruxtView",e,!1))}))}}:null],null,!0)},"component",t.component.propsData,!1),[t._v(" "),t._v(" "),t._v(" "),t._v(" "),[t._l(t.headers,(function(e){return i("span",{key:e.id,domProps:{innerHTML:t._s(e.content.value)}})})),t._v(" "),t._l(t.results,(function(e){return i("DruxtEntity",t._b({key:e.id},"DruxtEntity",{type:e.type,uuid:e.id,mode:t.mode},!1))}))]],2)],1)},staticRenderFns:[]},undefined,{name:"DruxtView",mixins:[s.DruxtComponentMixin],props:{displayId:{type:String,default:"default"},type:{type:String,default:"view--view"},uuid:{type:String,required:!0},viewId:{type:String,required:!0}},fetch:async function(){this.view=await this.getResource({type:this.type,id:this.uuid}),this.results=await this.getResource({type:"views--"+this.viewId,id:this.displayId}),await s.DruxtComponentMixin.fetch.call(this)},data:function(){return{results:[],view:!1}},computed:{attachments_after:function(){var t=this;if(!((this.view||{}).attributes||{}).display)return!1;var e=this.view.attributes.display;return Object.keys(e).filter((function(i){return"attachment"===e[i].display_plugin&&"after"===e[i].display_options.attachment_position&&void 0!==e[i].display_options.displays[t.displayId]}))},attachments_before:function(){var t=this;if(!((this.view||{}).attributes||{}).display)return!1;var e=this.view.attributes.display;return Object.keys(e).filter((function(i){return"attachment"===e[i].display_plugin&&"before"===e[i].display_options.attachment_position&&void 0!==e[i].display_options.displays[t.displayId]}))},display:function(){return!!((this.view||{}).attributes||{}).display&&("default"===this.display_id?this.view.attributes.display[this.display_id]:i(this.view.attributes.display.default,this.view.attributes.display[this.displayId]))},headers:function(){return this.display?this.display.display_options.header:[]},mode:function(){return!!this.display&&(!!this.display.display_options.row.type.includes("entity:")&&((this.display.display_options.row.options||{}).view_mode||"default"))}},methods:Object.assign({},n.mapActions({getResource:"druxtRouter/getEntity"})),druxt:function(t){var e=t.vm;return{componentOptions:[[e.viewId,e.displayId]],propsData:{display:e.display,results:e.results,view:e.view}}},watch:{uuid:async function(){await this.$fetch()},displayId:async function(){await this.$fetch()}}},undefined,false,undefined,!1,void 0,void 0,void 0),c=o({render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("DruxtView",t._b({},"DruxtView",t.route.props,!1))},staticRenderFns:[]},undefined,{mixins:[r.DruxtRouterMixin]},undefined,false,undefined,!1,void 0,void 0,void 0),l=o({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.$fetchState.pending?t._e():i("div",[i("DruxtView",t._b({},"DruxtView",t.propsData,!1))],1)},staticRenderFns:[]},undefined,{name:"DruxtBlockViewsBlock",mixins:[a.DruxtBlocksBlockMixin],fetch:async function(){var t=await this.getResources({resource:"view--view",query:(new u.DrupalJsonApiParams).addFilter("drupal_internal__id",this.viewId).addFields("view--view",["id"])});this.uuid=t[0].id},data:function(){return{uuid:!1}},computed:{displayId:function(){return this.settings.id.match(/views_block\:(.*?)-(.*)/)[2]},propsData:function(){if(!this.uuid)return!1;this.settings.id.match(/views_block\:(.*?)-(.*)/);return{displayId:this.displayId,uuid:this.uuid,viewId:this.viewId}},viewId:function(){return this.settings.id.match(/views_block\:(.*?)-(.*)/)[1]}},methods:Object.assign({},n.mapActions({getResources:"druxtRouter/getResources"}))},undefined,false,undefined,!1,void 0,void 0,void 0),f=Object.freeze({__proto__:null,DruxtView:p,DruxtRouterView:c,DruxtBlockViewsBlock:l}),y={mixins:[d.DruxtEntityContextMixin],props:{display:{type:Object,require:!0},results:{type:Array,require:!0},view:{type:Object,require:!0}}};return t.DruxtBlockViewsBlock=l,t.DruxtRouterView=c,t.DruxtView=p,t.DruxtViewsComponents=f,t.DruxtViewsViewMixin=y,t.default=function(t){if(void 0===this.options||!this.options.druxt)throw new TypeError("Druxt settings missing.");var i=this.options.druxt;this.addPlugin({src:e.resolve(__dirname,"../nuxt/plugin.js"),fileName:"druxt-views.js",options:i})},t}({},path,merge,vuex,druxt,druxtRouter,drupalJsonapiParams,druxtBlocks,druxtEntity);
+var VueDrupalEntity=function(t,e,i,n,r,s,o,u,a,d,l){"use strict";i=i&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i,l=l&&Object.prototype.hasOwnProperty.call(l,"default")?l.default:l;function p(t,e,i,n,r,s,o,u,a,d){"boolean"!=typeof o&&(a=u,u=o,o=!1);var l,p="function"==typeof i?i.options:i;if(t&&t.render&&(p.render=t.render,p.staticRenderFns=t.staticRenderFns,p._compiled=!0,r&&(p.functional=!0)),n&&(p._scopeId=n),s?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,a(t)),t&&t._registeredComponents&&t._registeredComponents.add(s)},p._ssrRegister=l):e&&(l=o?function(t){e.call(this,d(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,u(t))}),l)if(p.functional){var c=p.render;p.render=function(t,e){return l.call(e),c(t,e)}}else{var f=p.beforeCreate;p.beforeCreate=f?[].concat(f,l):[l]}return i}var c=p({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return!t.$fetchState.pending&&t.view?i(t.wrapper.component,t._b({tag:"component"},"component",t.wrapper.propsData,!1),[i(t.component.is,t._b({tag:"component",scopedSlots:t._u([{key:"header",fn:function(){return t._l(t.headers,(function(e){return i("span",{key:e.id,domProps:{innerHTML:t._s(e.content.value)}})}))},proxy:!0},t.filters?{key:"filters",fn:function(e){return[i("DruxtViewsFilters",t._b({attrs:{filters:t.filters},on:{input:t.onFiltersUpdate},model:{value:t.model.filter,callback:function(e){t.$set(t.model,"filter",e)},expression:"model.filter"}},"DruxtViewsFilters",Object.assign({},t.display.display_options.exposed_form,e),!1))]}}:null,t.showSorts?{key:"sorts",fn:function(e){return[i("DruxtViewsSorts",t._b({attrs:{sorts:t.sorts},model:{value:t.model.sort,callback:function(e){t.$set(t.model,"sort",e)},expression:"model.sort"}},"DruxtViewsSorts",Object.assign({},t.display.display_options.exposed_form,e),!1))]}}:null,t.attachments_before?{key:"attachments_before",fn:function(e){return t._l(t.attachments_before,(function(n){return i("DruxtView",t._b({key:n,attrs:{"display-id":n,type:t.type,uuid:t.uuid,"view-id":t.viewId}},"DruxtView",e,!1))}))}}:null,{key:"results",fn:function(e){return t._l(t.results,(function(n){return i("DruxtEntity",t._b({key:n.id},"DruxtEntity",Object.assign({},{type:n.type,uuid:n.id,mode:t.mode},e),!1))}))}},t.showPager?{key:"pager",fn:function(e){return[i("DruxtViewsPager",t._b({model:{value:t.model.page,callback:function(e){t.$set(t.model,"page",e)},expression:"model.page"}},"DruxtViewsPager",Object.assign({},{count:t.count},t.pager,{resource:t.resource},e),!1))]}}:null,t.attachments_after?{key:"attachments_after",fn:function(e){return t._l(t.attachments_after,(function(n){return i("DruxtView",t._b({key:n,attrs:{"display-id":n,type:t.type,uuid:t.uuid,"view-id":t.viewId}},"DruxtView",e,!1))}))}}:null],null,!0),model:{value:t.model,callback:function(e){t.model=e},expression:"model"}},"component",t.component.propsData,!1),[t._v(" "),t._v(" "),t._v(" "),t._v(" "),t._v(" "),t._v(" "),t._v(" "),[t._l(t.headers,(function(e){return i("span",{key:e.id,domProps:{innerHTML:t._s(e.content.value)}})})),t._v(" "),i("DruxtViewsFilters",t._b({attrs:{filters:t.filters},on:{input:t.onFiltersUpdate},model:{value:t.model.filter,callback:function(e){t.$set(t.model,"filter",e)},expression:"model.filter"}},"DruxtViewsFilters",t.display.display_options.exposed_form,!1)),t._v(" "),t.showSorts?i("DruxtViewsSorts",t._b({attrs:{sorts:t.sorts},model:{value:t.model.sort,callback:function(e){t.$set(t.model,"sort",e)},expression:"model.sort"}},"DruxtViewsSorts",t.display.display_options.exposed_form,!1)):t._e(),t._v(" "),t._l(t.results,(function(e){return i("DruxtEntity",t._b({key:e.id},"DruxtEntity",{type:e.type,uuid:e.id,mode:t.mode},!1))})),t._v(" "),t.showPager?i("DruxtViewsPager",t._b({model:{value:t.model.page,callback:function(e){t.$set(t.model,"page",e)},expression:"model.page"}},"DruxtViewsPager",Object.assign({},{count:t.count},t.pager,{resource:t.resource}),!1)):t._e()]],2)],1):t._e()},staticRenderFns:[]},undefined,{name:"DruxtView",mixins:[n.DruxtComponentMixin],props:{displayId:{type:String,default:"default"},type:{type:String,default:"view--view"},uuid:{type:String,required:!0},viewId:{type:String,required:!0}},fetch:async function(){this.view||(this.view=await this.getResource({type:this.type,id:this.uuid})),this.resource=await this.getResults({viewId:this.viewId,displayId:this.displayId,query:r.stringify(this.query)}),await n.DruxtComponentMixin.fetch.call(this)},data:function(){var t=r.parse(r.stringify(this.$route.query));return{model:{filter:t.filter||{},page:parseInt(t.page)||null,sort:t.sort||null},resource:null,view:!1}},computed:{attachments_after:function(){var t=this;if(!(((this.view||{}).data||{}).attributes||{}).display)return!1;var e=this.view.data.attributes.display;return Object.keys(e).filter((function(i){return"attachment"===e[i].display_plugin&&"after"===e[i].display_options.attachment_position&&void 0!==e[i].display_options.displays[t.displayId]}))},attachments_before:function(){var t=this;if(!(((this.view||{}).data||{}).attributes||{}).display)return!1;var e=this.view.data.attributes.display;return Object.keys(e).filter((function(i){return"attachment"===e[i].display_plugin&&"before"===e[i].display_options.attachment_position&&void 0!==e[i].display_options.displays[t.displayId]}))},count:function(){return parseInt(((this.resource||{}).meta||{}).count)||0},display:function(){return!!(((this.view||{}).data||{}).attributes||{}).display&&("default"===this.display_id?this.view.data.attributes.display[this.display_id]:i(this.view.data.attributes.display.default,this.view.data.attributes.display[this.displayId]))},filters:function(){return Object.values(((this.display||{}).display_options||{}).filters||{}).filter((function(t){return t.exposed}))},headers:function(){return this.display?this.display.display_options.header:[]},mode:function(){return!!this.display&&(!!this.display.display_options.row.type.includes("entity:")&&((this.display.display_options.row.options||{}).view_mode||"default"))},pager:function(){return((this.display||{}).display_options||{}).pager||!1},query:function(){var t={};return this.model.page&&(t.page=this.model.page),Object.entries(this.model.filter||{}).length&&(t["views-filter"]=this.model.filter),this.model.sort&&(t["views-sort[sort_by]"]=this.model.sort),t},results:function(){return(this.resource||{}).data||[]},showPager:function(){return this.pager.type&&"none"!==this.pager.type},showSorts:function(){return!(!((((this.display||{}).display_options||{}).exposed_form||{}).options||{}).expose_sort_order||!this.sorts.length)},sorts:function(){return Object.values(((this.display||{}).display_options||{}).sorts||{}).filter((function(t){return t.exposed}))}},watch:{"$route.query":async function(t,e){Object.entries(t).length||(this.model={filter:null,page:null,sort:null},await this.$fetch)},displayId:async function(){await this.$fetch()},query:async function(t,e){await this.$fetch()},uuid:async function(){await this.$fetch()}},methods:Object.assign({},{onFiltersUpdate:function(){this.model.page=null,this.model.sort=null}},s.mapActions({getResource:"druxt/getResource",getResults:"druxt/views/getResults"})),druxt:function(t){var e=t.vm;return{componentOptions:[[e.viewId,e.displayId]],propsData:{count:e.count,display:e.display,mode:e.mode,pager:e.pager,results:e.results,view:e.view}}}},undefined,false,undefined,!1,void 0,void 0,void 0),f=p({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.$fetchState.pending?t._e():i(t.wrapper.component,t._b({tag:"component"},"component",t.wrapper.propsData,!1),[i(t.component.is,t._b({tag:"component",model:{value:t.model,callback:function(e){t.model=e},expression:"model"}},"component",t.component.propsData,!1))],1)},staticRenderFns:[]},undefined,{name:"DruxtViewsFilter",mixins:[n.DruxtComponentMixin],props:{filter:{type:Object,required:!0},value:{type:[Array,Number,String],default:void 0}},data:function(){return{model:this.value}},watch:{model:function(){this.$emit("input",this.model)}},druxt:function(t){var e=t.vm;return{componentOptions:[[e.filter.id],[e.filter.plugin_id,e.filter.id],["default"]],propsData:{filter:e.filter}}}},undefined,false,undefined,!1,void 0,void 0,void 0),m=p({},undefined,{name:"DruxtViewsFilters",mixins:[n.DruxtComponentMixin],props:{filters:{type:Array,required:!0},options:{type:Object,default:function(){return{}}},type:{type:String,default:"basic"},value:{type:Object,default:function(){return{}}}},data:function(){return{model:Object.assign({},this.value)}},watch:{model:{deep:!0,handler:function(){"DruxtWrapper"===this.component.is&&this.$emit("input",this.model)}}},druxt:function(t){var e=t.vm;return{componentOptions:[[e.type],["default"]],propsData:{options:e.options,filters:e.filters,type:e.type}}},render:function(t){var e=this,i={class:this.wrapper.class||void 0,style:this.wrapper.style||void 0,props:this.wrapper.propsData},n={};return this.filters.map((function(i){n[i.expose.identifier]=function(n){return t("DruxtViewsFilter",{attrs:Object.assign({},n,e.$attrs),props:{filter:i,value:e.model[i.expose.identifier]},on:{input:function(t){var n;e.model=Object.assign({},e.model,((n={})[i.expose.identifier]=t,n))}}})}})),n.default=function(t){return e.filters.map((function(e){return n[e.expose.identifier](t)}))},t(this.wrapper.component,i,[t(this.component.is,{attrs:this.$attrs,props:Object.assign({},this.component.propsData,{value:this.model}),scopedSlots:n,on:{input:function(t){e.model=t,e.$emit("input",e.model)}}})])}},undefined,undefined,undefined,!1,void 0,void 0,void 0),y=p({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.$fetchState.pending?t._e():i(t.wrapper.component,t._b({tag:"component"},"component",t.wrapper.propsData,!1),[i(t.component.is,t._b({tag:"component",model:{value:t.model,callback:function(e){t.model=e},expression:"model"}},"component",t.component.propsData,!1),[i("ul",[t.resource.links.prev?i("li",[i("nuxt-link",{attrs:{to:t.getRoute(t.resource.links.prev)},nativeOn:{click:function(e){return t.setPage(t.resource.links.prev)}}},[t._v("\n          "+t._s(t.options.tags.previous)+"\n        ")])],1):t._e(),t._v(" "),t.resource.links.next?i("li",[i("nuxt-link",{attrs:{to:t.getRoute(t.resource.links.next)},nativeOn:{click:function(e){return t.setPage(t.resource.links.next)}}},[t._v("\n          "+t._s(t.options.tags.next)+"\n        ")])],1):t._e()])])],1)},staticRenderFns:[]},undefined,{name:"DruxtViewsPager",mixins:[n.DruxtComponentMixin],props:{count:{type:[Boolean,Number],default:!1},options:{type:Object,default:function(){return{}}},resource:{type:Object,default:function(){return{}}},type:{type:String,default:"none"},value:{type:Number,default:0}},data:function(){return{model:this.value}},watch:{model:function(){this.$emit("input",this.model)}},methods:{getQuery:function(t){var e=Object.fromEntries(new URLSearchParams(t.href.split("?")[1]));return"string"==typeof e.page&&(e.page=parseInt(e.page)),e},getRoute:function(t){var e=this.getQuery(t);return{query:Object.assign({},this.$route.query,{page:e.page})}},setPage:function(t){var e=this.getQuery(t);this.model=e.page}},druxt:function(t){var e=t.vm;return{componentOptions:[[e.type],["default"]],propsData:{count:parseInt(e.count),options:e.options,resource:e.resource,type:e.type}}}},undefined,false,undefined,!1,void 0,void 0,void 0),h=p({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.$fetchState.pending?t._e():i(t.wrapper.component,t._b({tag:"component"},"component",t.wrapper.propsData,!1),[i(t.component.is,t._b({tag:"component",model:{value:t.model,callback:function(e){t.model=e},expression:"model"}},"component",t.component.propsData,!1),[i("div",[i("strong",[t._v(t._s(t.options.exposed_sorts_label))]),t._v(" "),i("ul",t._l(t.sorts,(function(e){return i("li",{key:e.id},[i("nuxt-link",{attrs:{to:t.sortBy(e)},nativeOn:{click:function(i){t.model=e.id}}},[t._v("\n            "+t._s(e.expose.label)+"\n          ")])],1)})),0)])])],1)},staticRenderFns:[]},undefined,{name:"DruxtViewsSorts",mixins:[n.DruxtComponentMixin],props:{options:{type:Object,default:function(){return{}}},sorts:{type:Array,default:function(){return[]}},type:{type:String,default:"basic"},value:{type:String,default:void 0}},data:function(){return{model:this.value}},watch:{model:function(){this.$emit("input",this.model)}},methods:{sortBy:function(t){return{query:Object.assign({},this.$route.query,{sort:t.id})}}},druxt:function(t){var e=t.vm;return{componentOptions:[[e.type],["default"]],propsData:{options:e.options,sorts:e.sorts,type:e.type}}}},undefined,false,undefined,!1,void 0,void 0,void 0),v=p({render:function(){var t=this,e=t.$createElement;return(t._self._c||e)("DruxtView",t._b({},"DruxtView",t.route.props,!1))},staticRenderFns:[]},undefined,{mixins:[o.DruxtRouterMixin]},undefined,false,undefined,!1,void 0,void 0,void 0),x=p({render:function(){var t=this,e=t.$createElement,i=t._self._c||e;return t.$fetchState.pending?t._e():i("div",[i("DruxtView",t._b({},"DruxtView",t.propsData,!1))],1)},staticRenderFns:[]},undefined,{name:"DruxtBlockViewsBlock",mixins:[a.DruxtBlocksBlockMixin],fetch:async function(){var t=await this.getResources({resource:"view--view",query:(new u.DrupalJsonApiParams).addFilter("drupal_internal__id",this.viewId).addFields("view--view",["id"])});this.uuid=t[0].id},data:function(){return{uuid:!1}},computed:{displayId:function(){return this.settings.id.match(/views_block\:(.*?)-(.*)/)[2]},propsData:function(){if(!this.uuid)return!1;this.settings.id.match(/views_block\:(.*?)-(.*)/);return{displayId:this.displayId,uuid:this.uuid,viewId:this.viewId}},viewId:function(){return this.settings.id.match(/views_block\:(.*?)-(.*)/)[1]}},methods:Object.assign({},s.mapActions({getResources:"druxtRouter/getResources"}))},undefined,false,undefined,!1,void 0,void 0,void 0),w=Object.freeze({__proto__:null,DruxtView:c,DruxtViewsFilter:f,DruxtViewsFilters:m,DruxtViewsPager:y,DruxtViewsSorts:h,DruxtRouterView:v,DruxtBlockViewsBlock:x}),_={props:{filter:{type:Object,default:function(){return{}}},value:{type:[Array,Boolean,Number,String],default:void 0}},data:function(){return{model:this.value}},watch:{model:function(){this.$emit("input",this.model)}}},g={props:{filters:{type:Array,default:function(){return[]}},options:{type:Object,default:function(){return{}}},type:{type:String,default:"basic"},value:{type:Object,default:function(){return{}}}},data:function(){return{model:this.value}}},b={props:{count:{type:[Boolean,Number],default:!1},options:{type:Object,default:function(){return{}}},resource:{type:Object,default:function(){return{}}},type:{type:String,default:"none"},value:{type:Number,default:0}},data:function(){return{model:this.value}},watch:{model:function(){this.$emit("input",this.model)}}},D={props:{options:{type:Object,default:function(){return{}}},sorts:{type:Array,default:function(){return[]}},type:{type:String,default:"basic"},value:{type:String,default:void 0}},data:function(){return{model:this.value}},watch:{model:function(){this.$emit("input",this.model)}}},V={mixins:[d.DruxtEntityContextMixin],props:{count:{type:Number,require:!0},display:{type:Object,require:!0},mode:{type:[Boolean,String],default:"default"},pager:{type:Object,require:!0},results:{type:Array,require:!0},value:{type:Object,default:function(){return{page:null}}},view:{type:Object,require:!0}},data:function(){return{model:this.value}},watch:{model:function(){this.$emit("input",this.model)}}},O=Object.freeze({__proto__:null,DruxtViewsFilterMixin:_,DruxtViewsFiltersMixin:g,DruxtViewsPagerMixin:b,DruxtViewsSortsMixin:D,DruxtViewsViewMixin:V});return t.DruxtBlockViewsBlock=x,t.DruxtRouterView=v,t.DruxtView=c,t.DruxtViewsComponents=w,t.DruxtViewsFilter=f,t.DruxtViewsFilterMixin=_,t.DruxtViewsFilters=m,t.DruxtViewsFiltersMixin=g,t.DruxtViewsMixins=O,t.DruxtViewsPager=y,t.DruxtViewsPagerMixin=b,t.DruxtViewsSorts=h,t.DruxtViewsSortsMixin=D,t.DruxtViewsStore=function(t){var e=t.store;if(void 0===e)throw new TypeError("Vuex store not found.");var i="druxt/views",n={namespaced:!0,state:function(){return{results:{}}},mutations:{addResults:function(t,e){var i=e.results,n=e.viewId,r=e.displayId,s=e.hash;i&&n&&r&&s&&(t.results[n]||(t.results[n]={}),t.results[n][r]||(t.results[n][r]={}),t.results[n][r][s]=i)}},actions:{getResults:async function(t,e){var i=t.commit,n=t.state,r=e.viewId,s=e.displayId,o=e.query,u=o?l(this.$druxt.buildQueryUrl("",o)):"_default";if(void 0!==((n.results[r]||{})[s]||{})[u])return n.results[r][s][u];var a=await this.$druxt.getResource("views--"+r,s,o);return i("addResults",{results:a,viewId:r,displayId:s,hash:u}),a}}};e.registerModule(i,n,{preserveState:Boolean(e.state[i])})},t.DruxtViewsViewMixin=V,t.default=function(t){if(void 0===this.options||!this.options.druxt)throw new TypeError("Druxt settings missing.");var i=this.options.druxt;this.addPlugin({src:e.resolve(__dirname,"../nuxt/plugin.js"),fileName:"druxt-views.js",options:i}),this.addPlugin({src:e.resolve(__dirname,"../nuxt/store.js"),fileName:"store/druxt-views.js",options:i}),this.options.store=!0},t}({},path,merge,druxt,qs,vuex,druxtRouter,drupalJsonapiParams,druxtBlocks,druxtEntity,md5);

dist/druxt-views.ssr.js

@@ -1,2 +0,2 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});function _interopDefault(e){return(e&&(typeof e==='object')&&'default'in e)?e['default']:e}var path=require('path'),merge=_interopDefault(require('deepmerge')),vuex=require('vuex'),druxt=require('druxt'),druxtRouter=require('druxt-router'),drupalJsonapiParams=require('drupal-jsonapi-params'),druxtBlocks=require('druxt-blocks'),druxtEntity=require('druxt-entity');/**
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});function _interopDefault(e){return(e&&(typeof e==='object')&&'default'in e)?e['default']:e}var path=require('path'),merge=_interopDefault(require('deepmerge')),druxt=require('druxt'),qs=require('qs'),vuex=require('vuex'),druxtRouter=require('druxt-router'),drupalJsonapiParams=require('drupal-jsonapi-params'),druxtBlocks=require('druxt-blocks'),druxtEntity=require('druxt-entity'),md5=_interopDefault(require('md5'));/**
  * The NuxtJS module function.
@@ -23,3 +23,3 @@ *
  */
-var DruxtViewsModule = function (moduleOptions) {
+var DruxtViewsNuxtModule = function (moduleOptions) {
 
@@ -38,2 +38,12 @@ // Use root level Druxt options.
   });
+
+  // Add Vuex plugin.
+  this.addPlugin({
+    src: path.resolve(__dirname, '../nuxt/store.js'),
+    fileName: 'store/druxt-views.js',
+    options: options
+  });
+
+  // Enable Vuex Store.
+  this.options.store = true;
 };//
@@ -109,10 +119,13 @@
   fetch: async function fetch() {
-    this.view = await this.getResource({
-      type: this.type,
-      id: this.uuid,
-    });
+    if (!this.view) {
+      this.view = await this.getResource({
+        type: this.type,
+        id: this.uuid,
+      });
+    }
 
-    this.results = await this.getResource({
-      type: ("views--" + (this.viewId)),
-      id: this.displayId
+    this.resource = await this.getResults({
+      viewId: this.viewId,
+      displayId: this.displayId,
+      query: qs.stringify(this.query)
     });
@@ -128,10 +141,19 @@
    *
-   * @property {object[]} results - The View results JSON:API resources.
-   * @property {object} view - * The View JSON:API resource.
+   * @property {object} view - The View JSON:API resource.
    */
-  data: function () { return ({
-    results: [],
-    view: false
-  }); },
+  data: function data() {
+    // Stringify and parse the query object to fix nested objects.
+    var model = qs.parse(qs.stringify(this.$route.query));
 
+    return {
+      model: {
+        filter: model.filter || {},
+        page: parseInt(model.page) || null,
+        sort: model.sort || null,
+      },
+      resource: null,
+      view: false
+    }
+  },
+
   /**
@@ -149,5 +171,5 @@ * Vue.js Computed properties.
 
-      if (!((this.view || {}).attributes || {}).display) { return false }
+      if (!((((this.view || {}).data || {}).attributes || {}).display)) { return false }
 
-      var displays = this.view.attributes.display;
+      var displays = this.view.data.attributes.display;
       return Object.keys(displays).filter(function (key) {
@@ -168,5 +190,5 @@ return displays[key].display_plugin === 'attachment'
 
-      if (!((this.view || {}).attributes || {}).display) { return false }
+      if (!((((this.view || {}).data || {}).attributes || {}).display)) { return false }
 
-      var displays = this.view.attributes.display;
+      var displays = this.view.data.attributes.display;
       return Object.keys(displays).filter(function (key) {
@@ -180,2 +202,11 @@ return displays[key].display_plugin === 'attachment'
     /**
+     * The total item count.
+     *
+     * @type {integer}
+     */
+    count: function count() {
+      return parseInt(((this.resource || {}).meta || {}).count) || 0
+    },
+
+    /**
      * The View Display object.
@@ -186,9 +217,9 @@ *
     display: function display() {
-      if (!((this.view || {}).attributes || {}).display) { return false }
+      if (!(((this.view || {}).data || {}).attributes || {}).display) { return false }
 
-      if (this.display_id === 'default') { return this.view.attributes.display[this.display_id] }
+      if (this.display_id === 'default') { return this.view.data.attributes.display[this.display_id] }
 
       return merge(
-        this.view.attributes.display['default'],
-        this.view.attributes.display[this.displayId]
+        this.view.data.attributes.display['default'],
+        this.view.data.attributes.display[this.displayId]
       )
@@ -198,2 +229,11 @@ },
     /**
+     * Exposed filters.
+     *
+     * @type {object[]}
+     */
+    filters: function filters() {
+      return Object.values(((this.display || {}).display_options || {}).filters || {}).filter(function (filter) { return filter.exposed; })
+    },
+
+    /**
      * The View Headers data.
@@ -221,6 +261,106 @@ *
     },
+
+    /**
+     * The displays pager settings.
+     *
+     * @type {object}
+     */
+    pager: function pager() {
+      return ((this.display || {}).display_options || {}).pager || false
+    },
+
+    query: function query() {
+      var query = {};
+
+      // Pagination.
+      if (this.model.page) {
+        query.page = this.model.page;
+      }
+
+      // Exposed filters.
+      if (Object.entries(this.model.filter || {}).length) {
+        query['views-filter'] = this.model.filter;
+      }
+
+      // Exposed sorts.
+      if (this.model.sort) {
+        query['views-sort[sort_by]'] = this.model.sort;
+      }
+
+      return query
+    },
+
+    /**
+     * The JSON:API Views results.
+     *
+     * @type {object}
+     */
+    results: function results() {
+      return (this.resource || {}).data || []
+    },
+
+    /**
+     * Whether a pager should be shown.
+     *
+     * @type {boolean}
+     */
+    showPager: function showPager() {
+      return this.pager.type && this.pager.type !== 'none'
+    },
+
+    /**
+     * Whether Exposed sorts are available and should be displayed.
+     *
+     * @type {boolean}
+     */
+    showSorts: function showSorts() {
+      return !!(((((this.display || {}).display_options || {}).exposed_form || {}).options || {}).expose_sort_order && this.sorts.length)
+    },
+
+    /**
+     * Exposed sorts.
+     *
+     * @type {object[]}
+     */
+    sorts: function sorts() {
+      return Object.values(((this.display || {}).display_options || {}).sorts || {}).filter(function (sort) { return sort.exposed; })
+    }
   },
 
-  methods: Object.assign({}, vuex.mapActions({
-      getResource: 'druxtRouter/getEntity'
+  watch: {
+    '$route.query': async function $route_query(to, from) {
+      if (!Object.entries(to).length) {
+        this.model = {
+          filter: null,
+          page: null,
+          sort: null,
+        };
+        await this.$fetch;
+      }
+    },
+
+    displayId: async function displayId() {
+      await this.$fetch();
+    },
+
+    query: async function query(to, from) {
+      await this.$fetch();
+    },
+
+    uuid: async function uuid() {
+      await this.$fetch();
+    },
+  },
+
+  methods: Object.assign({}, {onFiltersUpdate: function onFiltersUpdate() {
+      this.model.page = null;
+      this.model.sort = null;
+    }},
+
+    /**
+     * Maps Vuex action to methods.
+     */
+    vuex.mapActions({
+      getResource: 'druxt/getResource',
+      getResults: 'druxt/views/getResults'
     })),
@@ -235,3 +375,6 @@
     propsData: {
+      count: vm.count,
       display: vm.display,
+      mode: vm.mode,
+      pager: vm.pager,
       results: vm.results,
@@ -241,13 +384,3 @@ view: vm.view
   });
-},
-
-  watch: {
-    uuid: async function uuid() {
-      await this.$fetch();
-    },
-
-    displayId: async function displayId() {
-      await this.$fetch();
-    }
-  }
+}
 };function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
@@ -330,10 +463,10 @@ if (typeof shadowMode !== 'boolean') {
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.$fetchState.pending)?_c(_vm.wrapper.component,_vm._b({tag:"component"},'component',_vm.wrapper.propsData,false),[_c(_vm.component.is,_vm._b({tag:"component",scopedSlots:_vm._u([{key:"header",fn:function(){return _vm._l((_vm.headers),function(header){return _c('span',{key:header.id,domProps:{"innerHTML":_vm._s(header.content.value)}})})},proxy:true},(_vm.attachments_before)?{key:"attachments_before",fn:function($attrs){return _vm._l((_vm.attachments_before),function(displayId){return _c('DruxtView',_vm._b({key:displayId,attrs:{"display-id":displayId,"type":_vm.type,"uuid":_vm.uuid,"view-id":_vm.viewId}},'DruxtView',$attrs,false))})}}:null,{key:"results",fn:function(options){return _vm._l((_vm.results),function(result){return _c('DruxtEntity',_vm._b({key:result.id},'DruxtEntity',Object.assign({}, {type: result.type,
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.$fetchState.pending && _vm.view)?_c(_vm.wrapper.component,_vm._b({tag:"component"},'component',_vm.wrapper.propsData,false),[_c(_vm.component.is,_vm._b({tag:"component",scopedSlots:_vm._u([{key:"header",fn:function(){return _vm._l((_vm.headers),function(header){return _c('span',{key:header.id,domProps:{"innerHTML":_vm._s(header.content.value)}})})},proxy:true},(_vm.filters)?{key:"filters",fn:function($attrs){return [_c('DruxtViewsFilters',_vm._b({attrs:{"filters":_vm.filters},on:{"input":_vm.onFiltersUpdate},model:{value:(_vm.model.filter),callback:function ($$v) {_vm.$set(_vm.model, "filter", $$v);},expression:"model.filter"}},'DruxtViewsFilters',Object.assign({}, _vm.display.display_options.exposed_form, $attrs),false))]}}:null,(_vm.showSorts)?{key:"sorts",fn:function($attrs){return [_c('DruxtViewsSorts',_vm._b({attrs:{"sorts":_vm.sorts},model:{value:(_vm.model.sort),callback:function ($$v) {_vm.$set(_vm.model, "sort", $$v);},expression:"model.sort"}},'DruxtViewsSorts',Object.assign({}, _vm.display.display_options.exposed_form, $attrs),false))]}}:null,(_vm.attachments_before)?{key:"attachments_before",fn:function($attrs){return _vm._l((_vm.attachments_before),function(attachmentDisplayId){return _c('DruxtView',_vm._b({key:attachmentDisplayId,attrs:{"display-id":attachmentDisplayId,"type":_vm.type,"uuid":_vm.uuid,"view-id":_vm.viewId}},'DruxtView',$attrs,false))})}}:null,{key:"results",fn:function(options){return _vm._l((_vm.results),function(result){return _c('DruxtEntity',_vm._b({key:result.id},'DruxtEntity',Object.assign({}, {type: result.type,
           uuid: result.id,
           mode: _vm.mode},
-          options),false))})}},(_vm.attachments_after)?{key:"attachments_after",fn:function($attrs){return _vm._l((_vm.attachments_after),function(displayId){return _c('DruxtView',_vm._b({key:displayId,attrs:{"display-id":displayId,"type":_vm.type,"uuid":_vm.uuid,"view-id":_vm.viewId}},'DruxtView',$attrs,false))})}}:null],null,true)},'component',_vm.component.propsData,false),[_vm._v(" "),_vm._v(" "),_vm._v(" "),_vm._v(" "),[_vm._l((_vm.headers),function(header){return _c('span',{key:header.id,domProps:{"innerHTML":_vm._s(header.content.value)}})}),_vm._v(" "),_vm._l((_vm.results),function(result){return _c('DruxtEntity',_vm._b({key:result.id},'DruxtEntity',{
+          options),false))})}},(_vm.showPager)?{key:"pager",fn:function($attrs){return [_c('DruxtViewsPager',_vm._b({model:{value:(_vm.model.page),callback:function ($$v) {_vm.$set(_vm.model, "page", $$v);},expression:"model.page"}},'DruxtViewsPager',Object.assign({}, {count: _vm.count}, _vm.pager, {resource: _vm.resource}, $attrs),false))]}}:null,(_vm.attachments_after)?{key:"attachments_after",fn:function($attrs){return _vm._l((_vm.attachments_after),function(attachmentDisplayId){return _c('DruxtView',_vm._b({key:attachmentDisplayId,attrs:{"display-id":attachmentDisplayId,"type":_vm.type,"uuid":_vm.uuid,"view-id":_vm.viewId}},'DruxtView',$attrs,false))})}}:null],null,true),model:{value:(_vm.model),callback:function ($$v) {_vm.model=$$v;},expression:"model"}},'component',_vm.component.propsData,false),[_vm._v(" "),_vm._v(" "),_vm._v(" "),_vm._v(" "),_vm._v(" "),_vm._v(" "),_vm._v(" "),[_vm._l((_vm.headers),function(header){return _c('span',{key:header.id,domProps:{"innerHTML":_vm._s(header.content.value)}})}),_vm._v(" "),_c('DruxtViewsFilters',_vm._b({attrs:{"filters":_vm.filters},on:{"input":_vm.onFiltersUpdate},model:{value:(_vm.model.filter),callback:function ($$v) {_vm.$set(_vm.model, "filter", $$v);},expression:"model.filter"}},'DruxtViewsFilters',_vm.display.display_options.exposed_form,false)),_vm._v(" "),(_vm.showSorts)?_c('DruxtViewsSorts',_vm._b({attrs:{"sorts":_vm.sorts},model:{value:(_vm.model.sort),callback:function ($$v) {_vm.$set(_vm.model, "sort", $$v);},expression:"model.sort"}},'DruxtViewsSorts',_vm.display.display_options.exposed_form,false)):_vm._e(),_vm._v(" "),_vm._l((_vm.results),function(result){return _c('DruxtEntity',_vm._b({key:result.id},'DruxtEntity',{
           type: result.type,
           uuid: result.id,
           mode: _vm.mode
-        },false))})]],2)],1):_vm._e()};
+        },false))}),_vm._v(" "),(_vm.showPager)?_c('DruxtViewsPager',_vm._b({model:{value:(_vm.model.page),callback:function ($$v) {_vm.$set(_vm.model, "page", $$v);},expression:"model.page"}},'DruxtViewsPager',Object.assign({}, {count: _vm.count}, _vm.pager, {resource: _vm.resource}),false)):_vm._e()]],2)],1):_vm._e()};
 var __vue_staticRenderFns__ = [];
@@ -346,3 +479,3 @@
   /* module identifier */
-  var __vue_module_identifier__ = "data-v-63cc8852";
+  var __vue_module_identifier__ = "data-v-6c976e5a";
   /* functional template */
@@ -371,4 +504,66 @@ var __vue_is_functional_template__ = false;
 
+/**
+ * The `<DruxtViewsFilter />` Vue.js component.
+ *
+ * Renders a slot themable Exposed Views filter.
+ */
 var script$1 = {
-  mixins: [druxtRouter.DruxtRouterMixin],
+  name: 'DruxtViewsFilter',
+
+  mixins: [druxt.DruxtComponentMixin],
+
+  /**
+   * Vue.js Properties.
+   *
+   * @see {@link https://vuejs.org/v2/guide/components-props.html}
+   */
+  props: {
+    /**
+     * The Exposed Filter objects.
+     *
+     * @type {object[]}
+     */
+    filter: {
+      type: Object,
+      required: true,
+    },
+
+    /**
+     * The DruxtViewFilter model value.
+     *
+     * @type {*}
+     */
+    value: {
+      type: [Array, Number, String],
+      default: undefined,
+    },
+  },
+
+  data: function data() {
+    return {
+      model: this.value,
+    }
+  },
+
+  watch: {
+    model: function model() {
+      this.$emit('input', this.model);
+    }
+  },
+
+  druxt: function (ref) {
+    var vm = ref.vm;
+
+    return ({
+    componentOptions: [
+      [vm.filter.id],
+      [vm.filter.plugin_id, vm.filter.id],
+      ['default']
+    ],
+
+    propsData: {
+      filter: vm.filter
+    }
+  });
+},
 };/* script */
@@ -378,3 +573,3 @@ var __vue_script__$1 = script$1;
 /* template */
-var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('DruxtView',_vm._b({},'DruxtView',_vm.route.props,false))};
+var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.$fetchState.pending)?_c(_vm.wrapper.component,_vm._b({tag:"component"},'component',_vm.wrapper.propsData,false),[_c(_vm.component.is,_vm._b({tag:"component",model:{value:(_vm.model),callback:function ($$v) {_vm.model=$$v;},expression:"model"}},'component',_vm.component.propsData,false))],1):_vm._e()};
 var __vue_staticRenderFns__$1 = [];
@@ -387,3 +582,3 @@
   /* module identifier */
-  var __vue_module_identifier__$1 = "data-v-0238dff1";
+  var __vue_module_identifier__$1 = "data-v-1fc837c2";
   /* functional template */
@@ -410,5 +605,488 @@ var __vue_is_functional_template__$1 = false;
     undefined
+  );/**
+ * The `<DruxtViewsFilters />` Vue.js component.
+ *
+ * Renders slot themable Exposed Views filters.
+ */
+var script$2 = {
+  name: 'DruxtViewsFilters',
+
+  mixins: [druxt.DruxtComponentMixin],
+
+  /**
+   * Vue.js Properties.
+   *
+   * @see {@link https://vuejs.org/v2/guide/components-props.html}
+   */
+  props: {
+    /**
+     * The Exposed Filter objects.
+     *
+     * @type {object[]}
+     */
+    filters: {
+      type: Array,
+      required: true,
+    },
+
+    /**
+     * The Exposed form options.
+     *
+     * @type {object}
+     */
+    options: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The Exposed form type.
+     *
+     * @type {string}
+     */
+    type: {
+      type: String,
+      default: 'basic',
+    },
+
+    /**
+     * The DruxtViewFilters model value.
+     *
+     * @type {object}
+     */
+    value: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+  },
+
+  data: function data() {
+    return {
+      model: Object.assign({}, this.value)
+    }
+  },
+
+  watch: {
+    model: {
+      deep: true,
+      handler: function handler() {
+        // Only emit 'input' if using the default 'DruxtWrapper' component.
+        if (this.component.is === 'DruxtWrapper') {
+          this.$emit('input', this.model);
+        }
+      }
+    }
+  },
+
+  druxt: function (ref) {
+    var vm = ref.vm;
+
+    return ({
+    componentOptions: [[vm.type], ['default']],
+
+    propsData: {
+      options: vm.options,
+      filters: vm.filters,
+      type: vm.type,
+    }
+  });
+},
+
+  render: function render(h) {
+    var this$1 = this;
+
+    var wrapperData = {
+      class: this.wrapper.class || undefined,
+      style: this.wrapper.style || undefined,
+      props: this.wrapper.propsData,
+    };
+
+    // Build scoped slots for each filter.
+    var scopedSlots = {};
+
+    this.filters.map(function (filter) {
+      scopedSlots[filter.expose.identifier] = function (attrs) { return h('DruxtViewsFilter', {
+        attrs: Object.assign({}, attrs, this$1.$attrs),
+        props: {
+          filter: filter,
+          value: this$1.model[filter.expose.identifier]
+        },
+        on: {
+          input: function (value) {
+            var obj;
+
+            this$1.model = Object.assign({}, this$1.model, ( obj = {}, obj[filter.expose.identifier] = value, obj ));
+          }
+        }
+      }); };
+    });
+
+    // Build default slot.
+    scopedSlots.default = function (attrs) { return this$1.filters.map(function (filter) { return scopedSlots[filter.expose.identifier](attrs); }); };
+
+    // Return wrapped component.
+    return h(this.wrapper.component, wrapperData, [
+      h(this.component.is, {
+        attrs: this.$attrs,
+        props: Object.assign({}, this.component.propsData,
+          {value: this.model}),
+        scopedSlots: scopedSlots,
+        on: {
+          input: function (value) {
+            this$1.model = value;
+            this$1.$emit('input', this$1.model);
+          }
+        }
+      })
+    ])
+  }
+};/* script */
+var __vue_script__$2 = script$2;
+
+/* template */
+
+  /* style */
+  var __vue_inject_styles__$2 = undefined;
+  /* scoped */
+  var __vue_scope_id__$2 = undefined;
+  /* module identifier */
+  var __vue_module_identifier__$2 = "data-v-f6554062";
+  /* functional template */
+  var __vue_is_functional_template__$2 = undefined;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__$2 = /*#__PURE__*/normalizeComponent(
+    {},
+    __vue_inject_styles__$2,
+    __vue_script__$2,
+    __vue_scope_id__$2,
+    __vue_is_functional_template__$2,
+    __vue_module_identifier__$2,
+    false,
+    undefined,
+    undefined,
+    undefined
   );//
 
 /**
+ * The `<DruxtViewsPager />` Vue.js component.
+ *
+ * Renders a slot themable Views pager component.
+ */
+var script$3 = {
+  name: 'DruxtViewsPager',
+
+  mixins: [druxt.DruxtComponentMixin],
+
+  /**
+   * Vue.js Properties.
+   *
+   * @see {@link https://vuejs.org/v2/guide/components-props.html}
+   */
+  props: {
+    /**
+     * The JSON:API Views results total count.
+     *
+     * @type {integer}
+     */
+    count: {
+      type: [Boolean, Number],
+      default: false,
+    },
+
+    /**
+     * The Pager options.
+     *
+     * @type {object}
+     */
+    options: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The JSON:API Views results resource.
+     *
+     * @type {object}
+     */
+    resource: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The Pager type.
+     *
+     * @type {object}
+     */
+    type: {
+      type: String,
+      default: 'none',
+    },
+
+    /**
+     * The DruxtViewPager model value.
+     *
+     * @type {integer}
+     */
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data: function data() {
+    return {
+      model: this.value
+    }
+  },
+
+  watch: {
+    model: function model() {
+      this.$emit('input', this.model);
+    }
+  },
+
+  methods: {
+    getQuery: function getQuery(link) {
+      var query = Object.fromEntries(new URLSearchParams(link.href.split('?')[1]));
+      if (typeof query.page === 'string') { query.page = parseInt(query.page); }
+      return query
+    },
+
+    getRoute: function getRoute(link) {
+      var query = this.getQuery(link);
+      return { query: Object.assign({}, this.$route.query, {page: query.page}) }
+    },
+
+    setPage: function setPage(link) {
+      var query = this.getQuery(link);
+      this.model = query.page;
+    }
+  },
+
+  druxt: function (ref) {
+    var vm = ref.vm;
+
+    return ({
+    componentOptions: [[vm.type], ['default']],
+
+    propsData: {
+      count: parseInt(vm.count),
+      options: vm.options,
+      resource: vm.resource,
+      type: vm.type,
+    }
+  });
+}
+};/* script */
+var __vue_script__$3 = script$3;
+
+/* template */
+var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.$fetchState.pending)?_c(_vm.wrapper.component,_vm._b({tag:"component"},'component',_vm.wrapper.propsData,false),[_c(_vm.component.is,_vm._b({tag:"component",model:{value:(_vm.model),callback:function ($$v) {_vm.model=$$v;},expression:"model"}},'component',_vm.component.propsData,false),[_c('ul',[(_vm.resource.links.prev)?_c('li',[_c('nuxt-link',{attrs:{"to":_vm.getRoute(_vm.resource.links.prev)},nativeOn:{"click":function($event){return _vm.setPage(_vm.resource.links.prev)}}},[_vm._v("\n          "+_vm._s(_vm.options.tags.previous)+"\n        ")])],1):_vm._e(),_vm._v(" "),(_vm.resource.links.next)?_c('li',[_c('nuxt-link',{attrs:{"to":_vm.getRoute(_vm.resource.links.next)},nativeOn:{"click":function($event){return _vm.setPage(_vm.resource.links.next)}}},[_vm._v("\n          "+_vm._s(_vm.options.tags.next)+"\n        ")])],1):_vm._e()])])],1):_vm._e()};
+var __vue_staticRenderFns__$2 = [];
+
+  /* style */
+  var __vue_inject_styles__$3 = undefined;
+  /* scoped */
+  var __vue_scope_id__$3 = undefined;
+  /* module identifier */
+  var __vue_module_identifier__$3 = "data-v-37a7fd88";
+  /* functional template */
+  var __vue_is_functional_template__$3 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__$3 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
+    __vue_inject_styles__$3,
+    __vue_script__$3,
+    __vue_scope_id__$3,
+    __vue_is_functional_template__$3,
+    __vue_module_identifier__$3,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );//
+
+/**
+ * The `<DruxtViewsSorts />` Vue.js component.
+ *
+ * @example
+ * <DruxtViewsSorts
+ *   :options="{}"
+ *   :sorts="[{}]"
+ *   type="basic"
+ * />
+ */
+var script$4 = {
+  name: 'DruxtViewsSorts',
+
+  mixins: [druxt.DruxtComponentMixin],
+
+  /**
+   * Vue.js Properties.
+   *
+   * @see {@link https://vuejs.org/v2/guide/components-props.html}
+   */
+  props: {
+    /**
+     * The Exposed form options.
+     *
+     * @type {object}
+     */
+    options: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The Exposed Sort objects.
+     *
+     * @type {object[]}
+     */
+    sorts: {
+      type: Array,
+      default: function () { return ([]); },
+    },
+
+    /**
+     * The Exposed form type.
+     *
+     * @type {string}
+     */
+    type: {
+      type: String,
+      default: 'basic',
+    },
+
+    /**
+     * The DruxtViewSorts model value.
+     *
+     * @type {string}
+     */
+    value: {
+      type: String,
+      default: undefined,
+    },
+  },
+
+  data: function data() {
+    return {
+      model: this.value
+    }
+  },
+
+  watch: {
+    model: function model() {
+      this.$emit('input', this.model);
+    }
+  },
+
+  methods: {
+    sortBy: function sortBy(sort) {
+      return { query: Object.assign({}, this.$route.query, {sort: sort.id}) }
+    },
+  },
+
+  druxt: function (ref) {
+    var vm = ref.vm;
+
+    return ({
+    componentOptions: [[vm.type], ['default']],
+
+    propsData: {
+      options: vm.options,
+      sorts: vm.sorts,
+      type: vm.type,
+    }
+  });
+}
+};/* script */
+var __vue_script__$4 = script$4;
+
+/* template */
+var __vue_render__$3 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.$fetchState.pending)?_c(_vm.wrapper.component,_vm._b({tag:"component"},'component',_vm.wrapper.propsData,false),[_c(_vm.component.is,_vm._b({tag:"component",model:{value:(_vm.model),callback:function ($$v) {_vm.model=$$v;},expression:"model"}},'component',_vm.component.propsData,false),[_c('div',[_c('strong',[_vm._v(_vm._s(_vm.options.exposed_sorts_label))]),_vm._v(" "),_c('ul',_vm._l((_vm.sorts),function(sort){return _c('li',{key:sort.id},[_c('nuxt-link',{attrs:{"to":_vm.sortBy(sort)},nativeOn:{"click":function($event){_vm.model = sort.id;}}},[_vm._v("\n            "+_vm._s(sort.expose.label)+"\n          ")])],1)}),0)])])],1):_vm._e()};
+var __vue_staticRenderFns__$3 = [];
+
+  /* style */
+  var __vue_inject_styles__$4 = undefined;
+  /* scoped */
+  var __vue_scope_id__$4 = undefined;
+  /* module identifier */
+  var __vue_module_identifier__$4 = "data-v-4623a890";
+  /* functional template */
+  var __vue_is_functional_template__$4 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__$4 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
+    __vue_inject_styles__$4,
+    __vue_script__$4,
+    __vue_scope_id__$4,
+    __vue_is_functional_template__$4,
+    __vue_module_identifier__$4,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );//
+
+var script$5 = {
+  mixins: [druxtRouter.DruxtRouterMixin],
+};/* script */
+var __vue_script__$5 = script$5;
+
+/* template */
+var __vue_render__$4 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('DruxtView',_vm._b({},'DruxtView',_vm.route.props,false))};
+var __vue_staticRenderFns__$4 = [];
+
+  /* style */
+  var __vue_inject_styles__$5 = undefined;
+  /* scoped */
+  var __vue_scope_id__$5 = undefined;
+  /* module identifier */
+  var __vue_module_identifier__$5 = "data-v-0238dff1";
+  /* functional template */
+  var __vue_is_functional_template__$5 = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  var __vue_component__$5 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
+    __vue_inject_styles__$5,
+    __vue_script__$5,
+    __vue_scope_id__$5,
+    __vue_is_functional_template__$5,
+    __vue_module_identifier__$5,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );//
+
+/**
  * Views block.
@@ -427,3 +1105,3 @@ *
  */
-var script$2 = {
+var script$6 = {
   name: 'DruxtBlockViewsBlock',
@@ -508,16 +1186,16 @@
 };/* script */
-var __vue_script__$2 = script$2;
+var __vue_script__$6 = script$6;
 
 /* template */
-var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.$fetchState.pending)?_c('div',[_c('DruxtView',_vm._b({},'DruxtView',_vm.propsData,false))],1):_vm._e()};
-var __vue_staticRenderFns__$2 = [];
+var __vue_render__$5 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (!_vm.$fetchState.pending)?_c('div',[_c('DruxtView',_vm._b({},'DruxtView',_vm.propsData,false))],1):_vm._e()};
+var __vue_staticRenderFns__$5 = [];
 
   /* style */
-  var __vue_inject_styles__$2 = undefined;
+  var __vue_inject_styles__$6 = undefined;
   /* scoped */
-  var __vue_scope_id__$2 = undefined;
+  var __vue_scope_id__$6 = undefined;
   /* module identifier */
-  var __vue_module_identifier__$2 = "data-v-6607b99c";
+  var __vue_module_identifier__$6 = "data-v-6607b99c";
   /* functional template */
-  var __vue_is_functional_template__$2 = false;
+  var __vue_is_functional_template__$6 = false;
   /* style inject */
@@ -531,9 +1209,9 @@
   
-  var __vue_component__$2 = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
-    __vue_inject_styles__$2,
-    __vue_script__$2,
-    __vue_scope_id__$2,
-    __vue_is_functional_template__$2,
-    __vue_module_identifier__$2,
+  var __vue_component__$6 = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
+    __vue_inject_styles__$6,
+    __vue_script__$6,
+    __vue_scope_id__$6,
+    __vue_is_functional_template__$6,
+    __vue_module_identifier__$6,
     false,
@@ -543,7 +1221,10 @@ undefined,
     undefined
-  );var index=/*#__PURE__*/Object.freeze({__proto__:null,DruxtView: __vue_component__,DruxtRouterView: __vue_component__$1,DruxtBlockViewsBlock: __vue_component__$2});/**
- * Provides Vue.js properties to render Drupal Views components.
+  );/**
+ * The `<DruxtView />` Vue.js component.
  *
- * This Mixin is intended for use by `view` type Component Suggestions for
- * targetted theming of Drupal Views.
+ * @type {object}
+ * @exports DruxtView
+ * @see {@link ./DruxtView|DruxtView}
+ */var index=/*#__PURE__*/Object.freeze({__proto__:null,DruxtView: __vue_component__,DruxtViewsFilter: __vue_component__$1,DruxtViewsFilters: __vue_component__$2,DruxtViewsPager: __vue_component__$3,DruxtViewsSorts: __vue_component__$4,DruxtRouterView: __vue_component__$5,DruxtBlockViewsBlock: __vue_component__$6});/**
+ * Provides Vue.js properties for DruxtViewsFilter slot themable components.
  *
@@ -554,12 +1235,296 @@ * @mixin
  * <script>
- * // Import mixin.
+ * import { DruxtViewsFilterMixin } from 'druxt-views'
+ *
+ * export default {
+ *   mixins: [DruxtViewsFilterMixin],
+ * }
+ * </script>
+ */
+var DruxtViewsFilterMixin = {
+  /**
+   * Vue.js Properties.
+   */
+  props: {
+    /**
+     * The Exposed Filter object.
+     *
+     * @type {object}
+     */
+    filter: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The DruxtViewFilter model value.
+     *
+     * @type {*}
+     */
+    value: {
+      type: [Array, Boolean, Number, String],
+      default: undefined,
+    },
+  },
+
+  /**
+   * Vue.js Data object.
+   *
+   * @property {object} model - The DruxtViewFilter model.
+   */
+  data: function data() {
+    return {
+      model: this.value
+    }
+  },
+
+  watch: {
+    model: function model() {
+      this.$emit('input', this.model);
+    }
+  }
+};/**
+ * Provides Vue.js properties for DruxtViewsFilters slot themable components.
+ *
+ * @mixin
+ *
+ * @example @lang vue
+ * <script>
+ * import { DruxtViewsFiltersMixin } from 'druxt-views'
+ *
+ * export default {
+ *   mixins: [DruxtViewsFiltersMixin],
+ * }
+ * </script>
+ */
+var DruxtViewsFiltersMixin = {
+  /**
+   * Vue.js Properties.
+   */
+  props: {
+    /**
+     * The Exposed Filter objects.
+     *
+     * @type {object[]}
+     */
+    filters: {
+      type: Array,
+      default: function () { return ([]); },
+    },
+
+    /**
+     * The Exposed form options.
+     *
+     * @type {object}
+     */
+    options: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The Exposed form type.
+     *
+     * @type {string}
+     */
+    type: {
+      type: String,
+      default: 'basic',
+    },
+
+    /**
+     * The DruxtViewFilters model value.
+     *
+     * @type {object}
+     */
+    value: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+  },
+
+  /**
+   * Vue.js Data object.
+   *
+   * @property {object} model - The DruxtViewFilters model.
+   */
+  data: function data() {
+    return {
+      model: this.value
+    }
+  }
+};/**
+ * Provides Vue.js properties for DruxtViewPager slot themable components.
+ *
+ * @mixin
+ *
+ * @example @lang vue
+ * <script>
+ * import { DruxtViewsPagerMixin } from 'druxt-views'
+ *
+ * export default {
+ *   mixins: [DruxtViewsPagerMixin],
+ * }
+ * </script>
+ */
+var DruxtViewsPagerMixin = {
+  /**
+   * Vue.js Properties.
+   */
+  props: {
+    /**
+     * The JSON:API Views results total count.
+     *
+     * @type {integer}
+     */
+    count: {
+      type: [Boolean, Number],
+      default: false,
+    },
+
+    /**
+     * The Pager options.
+     *
+     * @type {object}
+     */
+    options: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The JSON:API Views results resource.
+     *
+     * @type {object}
+     */
+    resource: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The Pager type.
+     *
+     * @type {object}
+     */
+    type: {
+      type: String,
+      default: 'none',
+    },
+
+    /**
+     * The DruxtViewPager model value.
+     *
+     * @type {integer}
+     */
+    value: {
+      type: Number,
+      default: 0,
+    },
+  },
+
+  /**
+   * Vue.js Data object.
+   *
+   * @property {object} model - The DruxtViewPager model.
+   */
+  data: function data() {
+    return {
+      model: this.value
+    }
+  },
+
+  watch: {
+    model: function model() {
+      this.$emit('input', this.model);
+    }
+  }
+};/**
+ * Provides Vue.js properties for DruxtViewSorts slot themable components.
+ *
+ * @mixin
+ *
+ * @example @lang vue
+ * <script>
+ * import { DruxtViewSortsMixin } from 'druxt-views'
+ *
+ * export default {
+ *   mixins: [DruxtViewSortsMixin],
+ * }
+ * </script>
+ */
+var DruxtViewsSortsMixin = {
+  /**
+   * Vue.js Properties.
+   */
+  props: {
+    /**
+     * The Exposed form options.
+     *
+     * @type {object}
+     */
+    options: {
+      type: Object,
+      default: function () { return ({}); },
+    },
+
+    /**
+     * The Exposed Sort objects.
+     *
+     * @type {object[]}
+     */
+    sorts: {
+      type: Array,
+      default: function () { return ([]); },
+    },
+
+    /**
+     * The Exposed form type.
+     *
+     * @type {string}
+     */
+    type: {
+      type: String,
+      default: 'basic',
+    },
+
+    /**
+     * The DruxtViewSorts model value.
+     *
+     * @type {string}
+     */
+    value: {
+      type: String,
+      default: undefined,
+    },
+  },
+
+  /**
+   * Vue.js Data object.
+   *
+   * @property {object} model - The DruxtViewSorts model.
+   */
+  data: function data() {
+    return {
+      model: this.value
+    }
+  },
+
+  watch: {
+    model: function model() {
+      this.$emit('input', this.model);
+    }
+  }
+};/**
+ * Provides Vue.js properties for DruxtView slot themable components.
+ *
+ * @mixin
+ *
+ * @example @lang vue
+ * <script>
  * import { DruxtViewsViewMixin } from 'druxt-views'
  *
  * export default {
- *   // Register mixin.
  *   mixins: [DruxtViewsViewMixin],
  * }
  * </script>
- *
- * @see {@link https://entity.druxtjs.org/api/mixins/componentSuggestion.html|DruxtEntityComponentSuggestionMixin}
  */
@@ -579,2 +1544,12 @@ var DruxtViewsViewMixin = {
     /**
+     * The JSON:API Views results total count.
+     *
+     * @type {integer}
+     */
+    count: {
+      type: Number,
+      require: true,
+    },
+
+    /**
      * The View display object.
@@ -590,2 +1565,22 @@ *
     /**
+     * The Entity display mode.
+     *
+     * @type {boolean|string}
+     */
+    mode: {
+      type: [Boolean, String],
+      default: 'default'
+    },
+
+    /**
+     * The View pager settings.
+     *
+     * @type {object}
+     */
+    pager: {
+      type: Object,
+      require: true,
+    },
+
+    /**
      * The JSON:API Views results.
@@ -601,2 +1596,14 @@ *
     /**
+     * The DruxtView model value.
+     *
+     * @type {object}
+     */
+    value: {
+      type: Object,
+      default: function () { return ({
+        page: null,
+      }); }
+    },
+
+    /**
      * The JSON:API View resource.
@@ -610,3 +1617,134 @@ *
     },
+  },
+
+  /**
+   * Vue.js Data object.
+   *
+   * @property {object} model - The DruxtView model.
+   */
+  data: function data() {
+    return {
+      model: this.value
+    }
+  },
+
+  watch: {
+    model: function model() {
+      this.$emit('input', this.model);
+    }
   }
-};exports.DruxtBlockViewsBlock=__vue_component__$2;exports.DruxtRouterView=__vue_component__$1;exports.DruxtView=__vue_component__;exports.DruxtViewsComponents=index;exports.DruxtViewsViewMixin=DruxtViewsViewMixin;exports.default=DruxtViewsModule;
+};/**
+ * Vue.js mixin for DruxtViewsFilter slot themable components.
+ *
+ * @type {object}
+ * @exports DruxtViewsFilterMixin
+ * @see {@link ./filter|DruxtViewsFilterMixin}
+ */var index$1=/*#__PURE__*/Object.freeze({__proto__:null,DruxtViewsFilterMixin: DruxtViewsFilterMixin,DruxtViewsFiltersMixin: DruxtViewsFiltersMixin,DruxtViewsPagerMixin: DruxtViewsPagerMixin,DruxtViewsSortsMixin: DruxtViewsSortsMixin,DruxtViewsViewMixin: DruxtViewsViewMixin});var DruxtViewsStore = function (ref) {
+  var store = ref.store;
+
+  if (typeof store === 'undefined') {
+    throw new TypeError('Vuex store not found.')
+  }
+
+  /**
+   * @namespace
+   */
+  var namespace = 'druxt/views';
+
+  /**
+   * The druxt/views Vuex module.
+   *
+   * Provides a Vuex state object, mutations and actions for interacting with JSON:API Views.
+   *
+   * @name druxt/views
+   * @module druxt/views
+   */
+  var module = {
+    namespaced: true,
+
+    /**
+     * Vuex State object.
+     *
+     * @name state
+     * @type {object}
+     * @property {object} results - JSON:API Views results store.
+     * @readonly
+     */
+    state: function () { return ({
+      results: {}
+    }); },
+
+    /**
+     * Vuex Mutations.
+     */
+    mutations: {
+      /**
+       * @name addResults
+       * @mutator {object} addResults=results Adds JSON:API Views results to the Vuex state object.
+       * @param {object} results - The JSON:API Views results.
+       *
+       * @example @lang js
+       * this.$store.commit('druxt/views/addResults', { results, viewId, displayId, hash })
+       */
+      addResults: function addResults (state, ref) {
+        var results = ref.results;
+        var viewId = ref.viewId;
+        var displayId = ref.displayId;
+        var hash = ref.hash;
+
+        if (!results || !viewId || !displayId || !hash) { return }
+
+        if (!state.results[viewId]) { state.results[viewId] = {}; }
+        if (!state.results[viewId][displayId]) { state.results[viewId][displayId] = {}; }
+        state.results[viewId][displayId][hash] = results;
+      }
+    },
+
+    /**
+     * Vuex Actions.
+     */
+    actions: {
+      /**
+       * Get View results.
+       *
+       * - Executes query against Drupal JSON:API.
+       * - Caches result in the Vuex store.
+       * - Returns cached result from Vuex store when available.
+       *
+       * @name getResults
+       * @action get=results
+       * @param {object} query The View results query object
+       * @return {object} The JSON:API Views results resource.
+       *
+       * @example @lang js
+       * const { data, meta, links } = await this.$store.dispatch('druxt/view/getResults', {
+       *   viewId,
+       *   displayId,
+       *   query
+       * })
+       */
+      getResults: async function getResults (ref, ref$1) {
+        var commit = ref.commit;
+        var state = ref.state;
+        var viewId = ref$1.viewId;
+        var displayId = ref$1.displayId;
+        var query = ref$1.query;
+
+        var hash = query ? md5(this.$druxt.buildQueryUrl('', query)) : '_default';
+        if (typeof ((state.results[viewId] || {})[displayId] || {})[hash] !== 'undefined') {
+          return state.results[viewId][displayId][hash]
+        }
+
+        var results = await this.$druxt.getResource(("views--" + viewId), displayId, query);
+
+        commit('addResults', { results: results, viewId: viewId, displayId: displayId, hash: hash });
+
+        return results
+      }
+    }
+  };
+
+  store.registerModule(namespace, module, {
+    preserveState: Boolean(store.state[namespace])
+  });
+};exports.DruxtBlockViewsBlock=__vue_component__$6;exports.DruxtRouterView=__vue_component__$5;exports.DruxtView=__vue_component__;exports.DruxtViewsComponents=index;exports.DruxtViewsFilter=__vue_component__$1;exports.DruxtViewsFilterMixin=DruxtViewsFilterMixin;exports.DruxtViewsFilters=__vue_component__$2;exports.DruxtViewsFiltersMixin=DruxtViewsFiltersMixin;exports.DruxtViewsMixins=index$1;exports.DruxtViewsPager=__vue_component__$3;exports.DruxtViewsPagerMixin=DruxtViewsPagerMixin;exports.DruxtViewsSorts=__vue_component__$4;exports.DruxtViewsSortsMixin=DruxtViewsSortsMixin;exports.DruxtViewsStore=DruxtViewsStore;exports.DruxtViewsViewMixin=DruxtViewsViewMixin;exports.default=DruxtViewsNuxtModule;

package.json

 {
   "name": "druxt-views",
-  "version": "0.6.2",
-  "description": "Drupal Views Vue.js components for Nuxt.js",
+  "version": "0.7.0",
+  "description": "Drupal Views Vue.js components for NuxtJS",
   "repository": {
@@ -50,6 +50,6 @@ "type": "git",
     "drupal-jsonapi-params": "^1.1.12",
-    "druxt": "^0.3.3",
-    "druxt-blocks": "^0.7.5",
-    "druxt-entity": "^0.7.2",
-    "druxt-router": "^0.17.2",
+    "druxt": "^0.4.1",
+    "druxt-blocks": "^0.8.0",
+    "druxt-entity": "^0.10.0",
+    "druxt-router": "^0.18.0",
     "vuex": "^3.6.0"
@@ -56,0 +56,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

110866

increased by149.9%

Number of package files

7

increased by16.67%

Lines of code

3149

increased by190.77%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedansi-styles@4.3.0(transitive)

• + Addedchalk@4.1.2(transitive)

• + Addedcharenc@0.0.2(transitive)

• + Addedcolor-convert@2.0.1(transitive)

• + Addedcolor-name@1.1.4(transitive)

• + Addedcore-js@3.38.1(transitive)

• + Addedcrypt@0.0.2(transitive)

• + Addeddruxt@0.10.00.4.2(transitive)

• + Addeddruxt-blocks@0.8.1(transitive)

• + Addeddruxt-entity@0.10.1(transitive)

• + Addeddruxt-router@0.18.1(transitive)

• + Addeddruxt-schema@0.7.10(transitive)

• + Addedhas-flag@4.0.0(transitive)

• + Addedis-buffer@1.1.6(transitive)

• + Addedmd5@2.3.0(transitive)

• + Addedscule@0.2.1(transitive)

• + Addedsupports-color@7.2.0(transitive)

• - Removeddruxt@0.3.4(transitive)

• - Removeddruxt-blocks@0.7.5(transitive)

• - Removeddruxt-entity@0.7.2(transitive)

• - Removeddruxt-router@0.16.10.17.3(transitive)

• - Removeddruxt-schema@0.6.2(transitive)

• Updateddruxt@^0.4.1

• Updateddruxt-blocks@^0.8.0

• Updateddruxt-entity@^0.10.0

• Updateddruxt-router@^0.18.0