druxt-breadcrumb - npm Package Compare versions

Comparing version 0.6.1 to 0.7.0

dist/druxt-breadcrumb.esm.js

 import { resolve } from 'path';
+import { DruxtComponentMixin } from 'druxt';
 import { mapState, mapActions } from 'vuex';
@@ -49,6 +50,6 @@ import { DruxtBlocksBlockMixin } from 'druxt-blocks';
 /**
- * The `<druxt-breadcrumb />` Vue.js component.
+ * The `<DruxtBreadcrumb />` Vue.js component.
  *
  * @example @lang vue
- * <druxt-breadcrumb />
+ * <DruxtBreadcrumb />
  */
@@ -58,2 +59,4 @@ var script = {
 
+  mixins: [DruxtComponentMixin],
+
   /**
@@ -66,15 +69,2 @@ * Vue.js Properties.
     /**
-     * The breadcrumb render component.
-     *
-     * @type {string}
-     * @default div
-     * @example @lang vue
-     * <DruxtBeadcrumb component="b-breadcrumb" />
-     */
-    component: {
-      type: String,
-      default: 'div'
-    },
-
-    /**
      * Show home crumb?
@@ -97,3 +87,6 @@ *
   fetch: async function fetch() {
-    await this.fetch();
+    await this.fetchCrumbs();
+
+    // Fetch theme component.
+    await DruxtComponentMixin.fetch.call(this);
   },
@@ -117,26 +110,3 @@
    */
-  computed: Object.assign({}, {settings: function settings() {
-      var settings = {
-        component: null,
-        home: null
-      };
-
-      for (var setting in settings) {
-        if (typeof this.$options.propsData[setting] !== 'undefined') {
-          settings[setting] = this[setting];
-          continue
-        }
-
-        if (typeof this.$druxtBreadcrumb.options[setting] !== 'undefined') {
-          settings[setting] = this.$druxtBreadcrumb.options[setting];
-          continue
-        }
-
-        settings[setting] = this[setting];
-      }
-
-      return settings
-    }},
-
-    mapState({
+  computed: Object.assign({}, mapState({
       route: function (state) { return state.druxtRouter.route; },
@@ -154,14 +124,7 @@ routes: function (state) { return state.druxtRouter.routes; }
     $route: async function() {
-      await this.fetch();
+      await this.$fetch();
     }
   },
 
-  created: function created() {
-    // Workaround for Vuepress docs.
-    if (!this.$fetch) {
-      this.fetch();
-    }
-  },
-
-  methods: Object.assign({}, {fetch: async function fetch() {
+  methods: Object.assign({}, {fetchCrumbs: async function fetchCrumbs() {
       // If there is no route, stop here.
@@ -171,3 +134,3 @@ if (!this.route || !Object.keys(this.route).length) { return }
       // If we are at the root and don't want a home crumb, stop here.
-      if (this.$route.path === '/' && !this.settings.home) { return }
+      if (this.$route.path === '/' && !this.home) { return }
 
@@ -206,3 +169,3 @@ // Current route crumb.
       // Home crumb.
-      if (this.settings.home) {
+      if (this.home) {
         crumbs.push({
@@ -222,3 +185,17 @@ to: '/',
       getRoute: 'druxtRouter/getRoute'
-    }))
+    })),
+
+  /**
+   * Druxt module function.
+   */
+  druxt: function (ref) {
+    var vm = ref.vm;
+
+    return ({
+    componentOptions: [['default']],
+    propsData: {
+      crumbs: vm.crumbs
+    }
+  });
+},
 };
@@ -305,3 +282,3 @@
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.crumbs.length > 0)?_c('div',[_c(_vm.settings.component,{tag:"component",attrs:{"items":_vm.crumbs}})],1):_vm._e()};
+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",class:_vm.wrapper.class,style:(_vm.wrapper.style)},'component',_vm.wrapper.propsData,false),[_c(_vm.component.is,_vm._b({tag:"component",scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._v("\n      "+_vm._s(_vm.crumbs)+"\n    ")]},proxy:true}],null,false,2189858211)},'component',_vm.component.propsData,false))],1):_vm._e()};
 var __vue_staticRenderFns__ = [];
@@ -370,3 +347,3 @@
 /* template */
-var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('druxt-breadcrumb')};
+var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('DruxtBreadcrumb')};
 var __vue_staticRenderFns__$1 = [];
@@ -411,3 +388,34 @@
 
+/**
+ * Provides Vue.js properties to render Drupal Breadcrumb component.
+ *
+ * @mixin
+ *
+ * @example @lang vue
+ * <script>
+ * import { DruxtBreadcrumbMixin } from 'druxt-breadcrumb'
+ *
+ * export default {
+ *   mixins: [DruxtBreadcrumbMixin],
+ * }
+ * </script>
+ */
+var DruxtBreadcrumbMixin = {
+  /**
+   * Vue.js Properties.
+   */
+  props: {
+    /**
+     * The Breadcrumbs.
+     *
+     * @type {object[]}
+     */
+    crumbs: {
+      type: Array,
+      require: true,
+    },
+  },
+};
+
 export default DruxtBreadcrumbModule;
-export { __vue_component__$1 as DruxtBlockSystemBreadcrumbBlock, __vue_component__ as DruxtBreadcrumb, index as DruxtBreadcrumbComponents };
+export { __vue_component__$1 as DruxtBlockSystemBreadcrumbBlock, __vue_component__ as DruxtBreadcrumb, index as DruxtBreadcrumbComponents, DruxtBreadcrumbMixin };

dist/druxt-breadcrumb.min.js

@@ -1,1 +0,1 @@
-var DruxtBreadcrumb=function(t,e,r,n){"use strict";function o(t,e,r,n,o,i,s,u,a,c){"boolean"!=typeof s&&(a=u,u=s,s=!1);var d,h="function"==typeof r?r.options:r;if(t&&t.render&&(h.render=t.render,h.staticRenderFns=t.staticRenderFns,h._compiled=!0,o&&(h.functional=!0)),n&&(h._scopeId=n),i?(d=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(i)},h._ssrRegister=d):e&&(d=s?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,u(t))}),d)if(h.functional){var f=h.render;h.render=function(t,e){return d.call(e),f(t,e)}}else{var l=h.beforeCreate;h.beforeCreate=l?[].concat(l,d):[d]}return r}var i=o({render:function(){var t=this,e=t.$createElement,r=t._self._c||e;return t.crumbs.length>0?r("div",[r(t.settings.component,{tag:"component",attrs:{items:t.crumbs}})],1):t._e()},staticRenderFns:[]},undefined,{name:"DruxtBreadcrumb",props:{component:{type:String,default:"div"},home:{type:Boolean,default:!0}},fetch:async function(){await this.fetch()},data:function(){return{crumbs:[]}},computed:Object.assign({},{settings:function(){var t={component:null,home:null};for(var e in t)void 0===this.$options.propsData[e]?void 0===this.$druxtBreadcrumb.options[e]?t[e]=this[e]:t[e]=this.$druxtBreadcrumb.options[e]:t[e]=this[e];return t}},r.mapState({route:function(t){return t.druxtRouter.route},routes:function(t){return t.druxtRouter.routes}})),watch:{$route:async function(){await this.fetch()}},created:function(){this.$fetch||this.fetch()},methods:Object.assign({},{fetch:async function(){if(this.route&&Object.keys(this.route).length&&("/"!==this.$route.path||this.settings.home)){var t=[{text:this.route.label}];if("/"!==this.$route.path){var e=this.$route.path.split("/").filter(String);for(e.pop();e.length>0;){var r="/"+e.join("/"),n=void 0;try{n=await this.getRoute(r)}catch(t){n=!1}n.label&&t.push({to:r,text:n.label}),e.pop()}this.settings.home&&t.push({to:"/",text:"Home"}),this.crumbs=t.reverse()}else this.crumbs=t}}},r.mapActions({getRoute:"druxtRouter/getRoute"}))},undefined,false,undefined,!1,void 0,void 0,void 0),s=o({render:function(){var t=this.$createElement;return(this._self._c||t)("druxt-breadcrumb")},staticRenderFns:[]},undefined,{name:"DruxtBlockSystemBreadcrumbBlock",mixins:[n.DruxtBlocksBlockMixin]},undefined,false,undefined,!1,void 0,void 0,void 0),u=Object.freeze({__proto__:null,DruxtBreadcrumb:i,DruxtBlockSystemBreadcrumbBlock:s});return t.DruxtBlockSystemBreadcrumbBlock=s,t.DruxtBreadcrumb=i,t.DruxtBreadcrumbComponents=u,t.default=function(t){if(void 0===this.options||!this.options.druxt)throw new TypeError("Druxt settings missing.");var r=this.options.druxt;r.breadcrumb=Object.assign({},{home:!0},r.breadcrumb),this.addPlugin({src:e.resolve(__dirname,"../nuxt/plugin.js"),fileName:"druxt-breadcrumb.js",options:r})},t}({},path,vuex,druxtBlocks);
+var DruxtBreadcrumb=function(t,e,r,n,o){"use strict";function s(t,e,r,n,o,s,i,u,a,c){"boolean"!=typeof i&&(a=u,u=i,i=!1);var d,p="function"==typeof r?r.options:r;if(t&&t.render&&(p.render=t.render,p.staticRenderFns=t.staticRenderFns,p._compiled=!0,o&&(p.functional=!0)),n&&(p._scopeId=n),s?(d=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=d):e&&(d=i?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,u(t))}),d)if(p.functional){var l=p.render;p.render=function(t,e){return d.call(e),l(t,e)}}else{var m=p.beforeCreate;p.beforeCreate=m?[].concat(m,d):[d]}return r}var i=s({render:function(){var t=this,e=t.$createElement,r=t._self._c||e;return t.$fetchState.pending?t._e():r(t.wrapper.component,t._b({tag:"component",class:t.wrapper.class,style:t.wrapper.style},"component",t.wrapper.propsData,!1),[r(t.component.is,t._b({tag:"component",scopedSlots:t._u([{key:"default",fn:function(){return[t._v("\n      "+t._s(t.crumbs)+"\n    ")]},proxy:!0}],null,!1,2189858211)},"component",t.component.propsData,!1))],1)},staticRenderFns:[]},undefined,{name:"DruxtBreadcrumb",mixins:[r.DruxtComponentMixin],props:{home:{type:Boolean,default:!0}},fetch:async function(){await this.fetchCrumbs(),await r.DruxtComponentMixin.fetch.call(this)},data:function(){return{crumbs:[]}},computed:Object.assign({},n.mapState({route:function(t){return t.druxtRouter.route},routes:function(t){return t.druxtRouter.routes}})),watch:{$route:async function(){await this.$fetch()}},methods:Object.assign({},{fetchCrumbs:async function(){if(this.route&&Object.keys(this.route).length&&("/"!==this.$route.path||this.home)){var t=[{text:this.route.label}];if("/"!==this.$route.path){var e=this.$route.path.split("/").filter(String);for(e.pop();e.length>0;){var r="/"+e.join("/"),n=void 0;try{n=await this.getRoute(r)}catch(t){n=!1}n.label&&t.push({to:r,text:n.label}),e.pop()}this.home&&t.push({to:"/",text:"Home"}),this.crumbs=t.reverse()}else this.crumbs=t}}},n.mapActions({getRoute:"druxtRouter/getRoute"})),druxt:function(t){return{componentOptions:[["default"]],propsData:{crumbs:t.vm.crumbs}}}},undefined,false,undefined,!1,void 0,void 0,void 0),u=s({render:function(){var t=this.$createElement;return(this._self._c||t)("DruxtBreadcrumb")},staticRenderFns:[]},undefined,{name:"DruxtBlockSystemBreadcrumbBlock",mixins:[o.DruxtBlocksBlockMixin]},undefined,false,undefined,!1,void 0,void 0,void 0),a=Object.freeze({__proto__:null,DruxtBreadcrumb:i,DruxtBlockSystemBreadcrumbBlock:u}),c={props:{crumbs:{type:Array,require:!0}}};return t.DruxtBlockSystemBreadcrumbBlock=u,t.DruxtBreadcrumb=i,t.DruxtBreadcrumbComponents=a,t.DruxtBreadcrumbMixin=c,t.default=function(t){if(void 0===this.options||!this.options.druxt)throw new TypeError("Druxt settings missing.");var r=this.options.druxt;r.breadcrumb=Object.assign({},{home:!0},r.breadcrumb),this.addPlugin({src:e.resolve(__dirname,"../nuxt/plugin.js"),fileName:"druxt-breadcrumb.js",options:r})},t}({},path,druxt,vuex,druxtBlocks);

dist/druxt-breadcrumb.ssr.js

@@ -1,2 +0,2 @@
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var path=require('path'),vuex=require('vuex'),druxtBlocks=require('druxt-blocks');/**
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var path=require('path'),druxt=require('druxt'),vuex=require('vuex'),druxtBlocks=require('druxt-blocks');/**
  * The Nuxt.js module function.
@@ -43,6 +43,6 @@ *
 /**
- * The `<druxt-breadcrumb />` Vue.js component.
+ * The `<DruxtBreadcrumb />` Vue.js component.
  *
  * @example @lang vue
- * <druxt-breadcrumb />
+ * <DruxtBreadcrumb />
  */
@@ -52,2 +52,4 @@ var script = {
 
+  mixins: [druxt.DruxtComponentMixin],
+
   /**
@@ -60,15 +62,2 @@ * Vue.js Properties.
     /**
-     * The breadcrumb render component.
-     *
-     * @type {string}
-     * @default div
-     * @example @lang vue
-     * <DruxtBeadcrumb component="b-breadcrumb" />
-     */
-    component: {
-      type: String,
-      default: 'div'
-    },
-
-    /**
      * Show home crumb?
@@ -91,3 +80,6 @@ *
   fetch: async function fetch() {
-    await this.fetch();
+    await this.fetchCrumbs();
+
+    // Fetch theme component.
+    await druxt.DruxtComponentMixin.fetch.call(this);
   },
@@ -111,26 +103,3 @@
    */
-  computed: Object.assign({}, {settings: function settings() {
-      var settings = {
-        component: null,
-        home: null
-      };
-
-      for (var setting in settings) {
-        if (typeof this.$options.propsData[setting] !== 'undefined') {
-          settings[setting] = this[setting];
-          continue
-        }
-
-        if (typeof this.$druxtBreadcrumb.options[setting] !== 'undefined') {
-          settings[setting] = this.$druxtBreadcrumb.options[setting];
-          continue
-        }
-
-        settings[setting] = this[setting];
-      }
-
-      return settings
-    }},
-
-    vuex.mapState({
+  computed: Object.assign({}, vuex.mapState({
       route: function (state) { return state.druxtRouter.route; },
@@ -148,14 +117,7 @@ routes: function (state) { return state.druxtRouter.routes; }
     $route: async function() {
-      await this.fetch();
+      await this.$fetch();
     }
   },
 
-  created: function created() {
-    // Workaround for Vuepress docs.
-    if (!this.$fetch) {
-      this.fetch();
-    }
-  },
-
-  methods: Object.assign({}, {fetch: async function fetch() {
+  methods: Object.assign({}, {fetchCrumbs: async function fetchCrumbs() {
       // If there is no route, stop here.
@@ -165,3 +127,3 @@ if (!this.route || !Object.keys(this.route).length) { return }
       // If we are at the root and don't want a home crumb, stop here.
-      if (this.$route.path === '/' && !this.settings.home) { return }
+      if (this.$route.path === '/' && !this.home) { return }
 
@@ -200,3 +162,3 @@ // Current route crumb.
       // Home crumb.
-      if (this.settings.home) {
+      if (this.home) {
         crumbs.push({
@@ -216,3 +178,17 @@ to: '/',
       getRoute: 'druxtRouter/getRoute'
-    }))
+    })),
+
+  /**
+   * Druxt module function.
+   */
+  druxt: function (ref) {
+    var vm = ref.vm;
+
+    return ({
+    componentOptions: [['default']],
+    propsData: {
+      crumbs: vm.crumbs
+    }
+  });
+},
 };function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
@@ -295,3 +271,3 @@ if (typeof shadowMode !== 'boolean') {
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.crumbs.length > 0)?_c('div',[_c(_vm.settings.component,{tag:"component",attrs:{"items":_vm.crumbs}})],1):_vm._e()};
+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",class:_vm.wrapper.class,style:(_vm.wrapper.style)},'component',_vm.wrapper.propsData,false),[_c(_vm.component.is,_vm._b({tag:"component",scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._v("\n      "+_vm._s(_vm.crumbs)+"\n    ")]},proxy:true}],null,false,2189858211)},'component',_vm.component.propsData,false))],1):_vm._e()};
 var __vue_staticRenderFns__ = [];
@@ -304,3 +280,3 @@
   /* module identifier */
-  var __vue_module_identifier__ = "data-v-565f6f2e";
+  var __vue_module_identifier__ = "data-v-8983a4ae";
   /* functional template */
@@ -357,3 +333,3 @@ var __vue_is_functional_template__ = false;
 /* template */
-var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('druxt-breadcrumb')};
+var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('DruxtBreadcrumb')};
 var __vue_staticRenderFns__$1 = [];
@@ -366,3 +342,3 @@
   /* module identifier */
-  var __vue_module_identifier__$1 = "data-v-760cf7ba";
+  var __vue_module_identifier__$1 = "data-v-127e0578";
   /* functional template */
@@ -389,2 +365,31 @@ var __vue_is_functional_template__$1 = false;
     undefined
-  );var index=/*#__PURE__*/Object.freeze({__proto__:null,DruxtBreadcrumb: __vue_component__,DruxtBlockSystemBreadcrumbBlock: __vue_component__$1});exports.DruxtBlockSystemBreadcrumbBlock=__vue_component__$1;exports.DruxtBreadcrumb=__vue_component__;exports.DruxtBreadcrumbComponents=index;exports.default=DruxtBreadcrumbModule;
+  );var index=/*#__PURE__*/Object.freeze({__proto__:null,DruxtBreadcrumb: __vue_component__,DruxtBlockSystemBreadcrumbBlock: __vue_component__$1});/**
+ * Provides Vue.js properties to render Drupal Breadcrumb component.
+ *
+ * @mixin
+ *
+ * @example @lang vue
+ * <script>
+ * import { DruxtBreadcrumbMixin } from 'druxt-breadcrumb'
+ *
+ * export default {
+ *   mixins: [DruxtBreadcrumbMixin],
+ * }
+ * </script>
+ */
+var DruxtBreadcrumbMixin = {
+  /**
+   * Vue.js Properties.
+   */
+  props: {
+    /**
+     * The Breadcrumbs.
+     *
+     * @type {object[]}
+     */
+    crumbs: {
+      type: Array,
+      require: true,
+    },
+  },
+};exports.DruxtBlockSystemBreadcrumbBlock=__vue_component__$1;exports.DruxtBreadcrumb=__vue_component__;exports.DruxtBreadcrumbComponents=index;exports.DruxtBreadcrumbMixin=DruxtBreadcrumbMixin;exports.default=DruxtBreadcrumbModule;

package.json

 {
   "name": "druxt-breadcrumb",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Provides a Breadcrumb Vue component to be used within a Druxt (DRUpal nuXT) project.",
@@ -48,2 +48,3 @@ "repository": {
     "codecov": "^3.8.1",
+    "druxt": "^0.3.3",
     "druxt-blocks": "^0.7.4",
@@ -50,0 +51,0 @@ "druxt-router": "^0.16.1",

README.md

@@ -30,6 +30,3 @@ # DruxtJS Breadcrumb
   druxt: {
-    baseUrl: 'https://example.com',
-    breadcrumb: {
-      component: 'b-breadcrumb'
-    }
+    baseUrl: 'https://demo-api.druxtjs.org',
   }
@@ -49,10 +46,1 @@ }
 | `baseUrl` | `string` | Yes | `null` | Base URL for the Drupal installation. |
-
-### Druxt Breadcrumb options
-
-These options are specific to this module.
-
-| Option | Type | Required | Default | Description |
-| --- | --- | --- | --- | --- |
-| `breadcrumb.component` | `string` | No | `div` | The component to use to render the breadcrumb. E.g., `b-breadcrumb` |
-| `breadcrumb.home` | `boolean` | No | `true` | Show optional 'Home' crumb. |

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

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

29238

increased by0.91%

Lines of code

712

increased by2.89%

Worsened metrics

Dependency count

5

increased by25%

Number of lines in readme file

45

decreased by-21.05%

Dependency changes

• + Addeddruxt@^0.3.3