Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue-tree-navigation

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-tree-navigation - npm Package Compare versions

Comparing version 3.0.1 to 4.0.0

2

dist/vue-tree-navigation.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueTreeNavigation=t():e.VueTreeNavigation=t()}(window,function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=29)}([function(e,t,n){"use strict";function i(e,t,n,i,r,a,o,s){var u,l="function"==typeof e?e.options:e;if(t&&(l.render=t,l.staticRenderFns=n,l._compiled=!0),i&&(l.functional=!0),a&&(l._scopeId="data-v-"+a),o?(u=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),r&&r.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(o)},l._ssrRegister=u):r&&(u=s?function(){r.call(this,this.$root.$options.shadowRoot)}:r),u)if(l.functional){l._injectStyles=u;var c=l.render;l.render=function(e,t){return u.call(t),c(e,t)}}else{var f=l.beforeCreate;l.beforeCreate=f?[].concat(f,u):[u]}return{exports:e,options:l}}n.d(t,"a",function(){return i})},function(e,t,n){"use strict";function i(e,t){for(var n=[],i={},r=0;r<t.length;r++){var a=t[r],o=a[0],s={id:e+":"+r,css:a[1],media:a[2],sourceMap:a[3]};i[o]?i[o].parts.push(s):n.push(i[o]={id:o,parts:[s]})}return n}n.r(t),n.d(t,"default",function(){return v});var r="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!r)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var a={},o=r&&(document.head||document.getElementsByTagName("head")[0]),s=null,u=0,l=!1,c=function(){},f=null,d="data-vue-ssr-id",p="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function v(e,t,n,r){l=n,f=r||{};var o=i(e,t);return h(o),function(t){for(var n=[],r=0;r<o.length;r++){var s=o[r];(u=a[s.id]).refs--,n.push(u)}t?h(o=i(e,t)):o=[];for(r=0;r<n.length;r++){var u;if(0===(u=n[r]).refs){for(var l=0;l<u.parts.length;l++)u.parts[l]();delete a[u.id]}}}}function h(e){for(var t=0;t<e.length;t++){var n=e[t],i=a[n.id];if(i){i.refs++;for(var r=0;r<i.parts.length;r++)i.parts[r](n.parts[r]);for(;r<n.parts.length;r++)i.parts.push(m(n.parts[r]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{var o=[];for(r=0;r<n.parts.length;r++)o.push(m(n.parts[r]));a[n.id]={id:n.id,refs:1,parts:o}}}}function g(){var e=document.createElement("style");return e.type="text/css",o.appendChild(e),e}function m(e){var t,n,i=document.querySelector("style["+d+'~="'+e.id+'"]');if(i){if(l)return c;i.parentNode.removeChild(i)}if(p){var r=u++;i=s||(s=g()),t=b.bind(null,i,r,!1),n=b.bind(null,i,r,!0)}else i=g(),t=function(e,t){var n=t.css,i=t.media,r=t.sourceMap;i&&e.setAttribute("media",i);f.ssrId&&e.setAttribute(d,t.id);r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");if(e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}.bind(null,i),n=function(){i.parentNode.removeChild(i)};return t(e),function(i){if(i){if(i.css===e.css&&i.media===e.media&&i.sourceMap===e.sourceMap)return;t(e=i)}else n()}}var _,y=(_=[],function(e,t){return _[e]=t,_.filter(Boolean).join("\n")});function b(e,t,n,i){var r=n?"":i.css;if(e.styleSheet)e.styleSheet.cssText=y(t,r);else{var a=document.createTextNode(r),o=e.childNodes;o[t]&&e.removeChild(o[t]),o.length?e.insertBefore(a,o[t]):e.appendChild(a)}}},function(e,t){e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var n=function(e,t){var n=e[1]||"",i=e[3];if(!i)return n;if(t&&"function"==typeof btoa){var r=(o=i,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),a=i.sources.map(function(e){return"/*# sourceURL="+i.sourceRoot+e+" */"});return[n].concat(a).concat([r]).join("\n")}var o;return[n].join("\n")}(t,e);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(e,n){"string"==typeof e&&(e=[[null,e,""]]);for(var i={},r=0;r<this.length;r++){var a=this[r][0];"number"==typeof a&&(i[a]=!0)}for(r=0;r<e.length;r++){var o=e[r];"number"==typeof o[0]&&i[o[0]]||(n&&!o[2]?o[2]=n:n&&(o[2]="("+o[2]+") and ("+n+")"),t.push(o))}},t}},function(e,t,n){var i=n(19);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);(0,n(1).default)("1263c5bb",i,!0,{})},function(e,t,n){var i=n(21);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);(0,n(1).default)("231535cc",i,!0,{})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={data:function(){return{active:!1}},props:{item:Object,required:!0},methods:{isActive:function(){return""!==this.item.meta.target&&(this.$route?(this.$route.path+this.$route.hash).endsWith(this.item.meta.target):window.location.href.endsWith(this.item.meta.target))}},computed:{showLabel:function(){return void 0===this.item.route&&void 0===this.item.element&&void 0===this.item.external},showRouterLink:function(){return this.showLink&&void 0!==this.$router},showHyperLink:function(){return this.showLink&&void 0===this.$router},showExternalHyperLink:function(){return void 0!==this.item.external},showLink:function(){return void 0!==this.item.route||void 0!==this.item.element},classes:function(){return{"NavigationItem--active":this.active}}},watch:{item:function(){this.active=this.isActive()},$route:function(){this.active=this.isActive()}},mounted:function(){var e=this;this.active=this.isActive(),this.$router||window.addEventListener("hashchange",function(){e.active=e.isActive()})}}},function(e,t,n){"use strict";n.r(t);var i=n(5),r=n.n(i);for(var a in i)"default"!==a&&function(e){n.d(t,e,function(){return i[e]})}(a);t.default=r.a},function(e,t,n){var i=n(23);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);(0,n(1).default)("63b4d5bb",i,!0,{})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={props:{open:{type:Boolean,required:!1,default:!1}}}},function(e,t,n){"use strict";n.r(t);var i=n(8),r=n.n(i);for(var a in i)"default"!==a&&function(e){n.d(t,e,function(){return i[e]})}(a);t.default=r.a},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=a(n(25)),r=a(n(15));function a(e){return e&&e.__esModule?e:{default:e}}t.default={data:function(){return{isOpen:null}},props:{parentItem:{type:Object,required:!0},level:{type:Number,required:!0},defaultOpenLevel:{type:Number,required:!0}},computed:{classes:function(){return e={"NavigationLevel--closed":!this.isOpen},t="NavigationLevel--level-"+this.level,n=!0,t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e;var e,t,n}},methods:{onToggleClick:function(){this.isOpen=!this.isOpen},onItemClick:function(){!1===this.isOpen&&(this.isOpen=!0)},renderLevelAsOpen:function(){if(this.defaultOpenLevel>=this.level)return!0;var e=void 0;if(e=void 0!==this.$router?this.$route.path+this.$route.hash:window.location.pathname+window.location.hash,""!==this.parentItem.meta.target&&e.includes(this.parentItem.meta.target))return!0;for(var t=0;t<this.parentItem.children.length;t++){var n=this.parentItem.children[t];if(""!==n.meta.target&&e.includes(n.meta.target))return!0}return!1}},components:{NavigationItem:r.default,NavigationToggle:i.default},mounted:function(){this.isOpen=this.renderLevelAsOpen()}}},function(e,t,n){"use strict";n.r(t);var i=n(10),r=n.n(i);for(var a in i)"default"!==a&&function(e){n.d(t,e,function(){return i[e]})}(a);t.default=r.a},function(e,t,n){"use strict";var i=function(){var e=this.$createElement,t=this._self._c||e;return t("span",{staticClass:"NavigationToggle",class:{"NavigationToggle--closed":!this.open}},[t("span",{staticClass:"NavigationToggle__icon",class:{"NavigationToggle__icon--closed":!this.open}})])},r=[];n.d(t,"a",function(){return i}),n.d(t,"b",function(){return r})},function(e,t,n){"use strict";var i=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("span",{staticClass:"NavigationItem",class:e.classes},[e.showLabel?n("span",{staticClass:"NavigationItem__label"},[e._v(e._s(e.item.name))]):e._e(),e._v(" "),e.showRouterLink?n("router-link",{staticClass:"NavigationItem__router-link",attrs:{to:e.item.meta.target}},[e._v(e._s(e.item.name))]):e._e(),e._v(" "),e.showHyperLink?n("a",{staticClass:"NavigationItem__link",attrs:{href:e.item.meta.target}},[e._v(e._s(e.item.name))]):e._e(),e._v(" "),e.showExternalHyperLink?n("a",{staticClass:"NavigationItem__external-link",attrs:{href:e.item.meta.target,target:"_blank"}},[e._v(e._s(e.item.name))]):e._e()],1)},r=[];n.d(t,"a",function(){return i}),n.d(t,"b",function(){return r})},function(e,t,n){"use strict";var i=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"NavigationLevel",class:e.classes},[n("div",{staticClass:"NavigationLevel__parent"},[n("NavigationToggle",{attrs:{open:e.isOpen},nativeOn:{click:function(t){return e.onToggleClick(t)}}}),e._v(" "),n("NavigationItem",{attrs:{item:e.parentItem},nativeOn:{click:function(t){return e.onItemClick(t)}}})],1),e._v(" "),n("ul",{staticClass:"NavigationLevel__children"},[e._t("default")],2)])},r=[];n.d(t,"a",function(){return i}),n.d(t,"b",function(){return r})},function(e,t,n){"use strict";n.r(t);var i=n(13),r=n(6);for(var a in r)"default"!==a&&function(e){n.d(t,e,function(){return r[e]})}(a);n(22);var o=n(0),s=Object(o.a)(r.default,i.a,i.b,!1,null,null,null);t.default=s.exports},function(e,t,n){(e.exports=n(2)(!1)).push([e.i,".TreeNavigation{display:inline-block;padding:0;margin:0}.TreeNavigation ul{padding:0;margin:0;list-style-type:none}.TreeNavigation li{padding-left:20px}",""])},function(e,t,n){var i=n(16);"string"==typeof i&&(i=[[e.i,i,""]]),i.locals&&(e.exports=i.locals);(0,n(1).default)("0965e660",i,!0,{})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});t.sanitizeElement=function(e){return void 0===e||""===e?e:("#"!==e[0]&&(e="#"+e),e)},t.sanitizeRoute=function(e){if(void 0!==e)return"/"!==e[0]&&(e="/"+e),"/"===e[e.length-1]&&(e=e.slice(0,-1)),e}},function(e,t,n){(e.exports=n(2)(!1)).push([e.i,".NavigationLevel--closed ul{display:none}",""])},function(e,t,n){"use strict";var i=n(3);n.n(i).a},function(e,t,n){(e.exports=n(2)(!1)).push([e.i,".NavigationItem{display:inline-block;padding-top:5px;padding-bottom:5px}.NavigationItem span{cursor:pointer}",""])},function(e,t,n){"use strict";var i=n(4);n.n(i).a},function(e,t,n){(e.exports=n(2)(!1)).push([e.i,".NavigationToggle{position:relative;top:-3px;padding:5px 5px 5px 3px;cursor:pointer}.NavigationToggle__icon{display:inline-block;padding:3px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)}.NavigationToggle__icon--closed{transform:rotate(-45deg)}",""])},function(e,t,n){"use strict";var i=n(7);n.n(i).a},function(e,t,n){"use strict";n.r(t);var i=n(12),r=n(9);for(var a in r)"default"!==a&&function(e){n.d(t,e,function(){return r[e]})}(a);n(24);var o=n(0),s=Object(o.a)(r.default,i.a,i.b,!1,null,null,null);t.default=s.exports},function(e,t,n){"use strict";n.r(t);var i=n(14),r=n(11);for(var a in r)"default"!==a&&function(e){n.d(t,e,function(){return r[e]})}(a);n(20);var o=n(0),s=Object(o.a)(r.default,i.a,i.b,!1,null,null,null);t.default=s.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.getItemMetadata=t.insertMetadataToItems=t.generateLevel=void 0;var i=o(n(26)),r=o(n(15)),a=n(18);function o(e){return e&&e.__esModule?e:{default:e}}t.generateLevel=function e(t,n,a,o){var s=[];return n.forEach(function(n){if(n.hasOwnProperty("children")){var u=t(i.default,{props:{parentItem:n,level:a,defaultOpenLevel:o}},[].concat(function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}(e(t,n.children,a+1,o))));s.push(t("li",[u]))}else{var l=t(r.default,{props:{item:n}});s.push(t("li",[l]))}}),s},t.insertMetadataToItems=function e(t,n){return t.forEach(function(t){t.meta=s(t,n),t.hasOwnProperty("children")&&(t.children=e(t.children,t))}),t};var s=t.getItemMetadata=function(e,t){var n=(0,a.sanitizeElement)(e.element),i=(0,a.sanitizeRoute)(e.route),r=e.external;if(void 0===t){if(void 0===n&&void 0===i&&void 0===r)return{path:"",target:""};if(void 0!==r)return{path:"",target:r};if(void 0!==i)return{path:i,target:i};if(void 0!==n)return{path:"",target:"/"+n}}var o=(0,a.sanitizeRoute)(t.meta.path);return void 0!==r?{path:o,target:r}:void 0!==i?{path:o+i,target:o+i}:void 0!==n?{path:o,target:(0,a.sanitizeRoute)(o+n)}:{path:o,target:""}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(27);n(17);var r={props:{items:{type:Array,required:!0},defaultOpenLevel:{type:Number,default:0}},computed:{itemsWithMetadata:function(){var e=JSON.parse(JSON.stringify(this.items));return(0,i.insertMetadataToItems)(e)}},render:function(e){return e("div",{class:"TreeNavigation"},[e("div",{class:["NavigationLevel","NavigationLevel--level-0"]},[e("ul",(0,i.generateLevel)(e,this.itemsWithMetadata,1,this.defaultOpenLevel))])])}};t.default=r},function(e,t,n){"use strict";var i,r=n(28),a=(i=r)&&i.__esModule?i:{default:i};e.exports={install:function(e,t){e.component("vue-tree-navigation",a.default)}}}])});
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueTreeNavigation=e():t.VueTreeNavigation=e()}(window,function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var r=e[i]={i:i,l:!1,exports:{}};return t[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(i,r,function(e){return t[e]}.bind(null,r));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=16)}([function(t,e,n){"use strict";function i(t,e,n,i,r,a,o,s){var u,l="function"==typeof t?t.options:t;if(e&&(l.render=e,l.staticRenderFns=n,l._compiled=!0),i&&(l.functional=!0),a&&(l._scopeId="data-v-"+a),o?(u=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__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},l._ssrRegister=u):r&&(u=s?function(){r.call(this,this.$root.$options.shadowRoot)}:r),u)if(l.functional){l._injectStyles=u;var c=l.render;l.render=function(t,e){return u.call(e),c(t,e)}}else{var f=l.beforeCreate;l.beforeCreate=f?[].concat(f,u):[u]}return{exports:t,options:l}}n.d(e,"a",function(){return i})},function(t,e){t.exports=function(t){var e=[];return e.toString=function(){return this.map(function(e){var n=function(t,e){var n=t[1]||"",i=t[3];if(!i)return n;if(e&&"function"==typeof btoa){var r=function(t){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(t))))+" */"}(i),a=i.sources.map(function(t){return"/*# sourceURL="+i.sourceRoot+t+" */"});return[n].concat(a).concat([r]).join("\n")}return[n].join("\n")}(e,t);return e[2]?"@media "+e[2]+"{"+n+"}":n}).join("")},e.i=function(t,n){"string"==typeof t&&(t=[[null,t,""]]);for(var i={},r=0;r<this.length;r++){var a=this[r][0];"number"==typeof a&&(i[a]=!0)}for(r=0;r<t.length;r++){var o=t[r];"number"==typeof o[0]&&i[o[0]]||(n&&!o[2]?o[2]=n:n&&(o[2]="("+o[2]+") and ("+n+")"),e.push(o))}},e}},function(t,e,n){"use strict";function i(t,e){for(var n=[],i={},r=0;r<e.length;r++){var a=e[r],o=a[0],s={id:t+":"+r,css:a[1],media:a[2],sourceMap:a[3]};i[o]?i[o].parts.push(s):n.push(i[o]={id:o,parts:[s]})}return n}n.r(e),n.d(e,"default",function(){return v});var r="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!r)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var a={},o=r&&(document.head||document.getElementsByTagName("head")[0]),s=null,u=0,l=!1,c=function(){},f=null,d="data-vue-ssr-id",p="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function v(t,e,n,r){l=n,f=r||{};var o=i(t,e);return h(o),function(e){for(var n=[],r=0;r<o.length;r++){var s=o[r];(u=a[s.id]).refs--,n.push(u)}e?h(o=i(t,e)):o=[];for(r=0;r<n.length;r++){var u;if(0===(u=n[r]).refs){for(var l=0;l<u.parts.length;l++)u.parts[l]();delete a[u.id]}}}}function h(t){for(var e=0;e<t.length;e++){var n=t[e],i=a[n.id];if(i){i.refs++;for(var r=0;r<i.parts.length;r++)i.parts[r](n.parts[r]);for(;r<n.parts.length;r++)i.parts.push(m(n.parts[r]));i.parts.length>n.parts.length&&(i.parts.length=n.parts.length)}else{var o=[];for(r=0;r<n.parts.length;r++)o.push(m(n.parts[r]));a[n.id]={id:n.id,refs:1,parts:o}}}}function g(){var t=document.createElement("style");return t.type="text/css",o.appendChild(t),t}function m(t){var e,n,i=document.querySelector("style["+d+'~="'+t.id+'"]');if(i){if(l)return c;i.parentNode.removeChild(i)}if(p){var r=u++;i=s||(s=g()),e=y.bind(null,i,r,!1),n=y.bind(null,i,r,!0)}else i=g(),e=function(t,e){var n=e.css,i=e.media,r=e.sourceMap;i&&t.setAttribute("media",i);f.ssrId&&t.setAttribute(d,e.id);r&&(n+="\n/*# sourceURL="+r.sources[0]+" */",n+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */");if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,i),n=function(){i.parentNode.removeChild(i)};return e(t),function(i){if(i){if(i.css===t.css&&i.media===t.media&&i.sourceMap===t.sourceMap)return;e(t=i)}else n()}}var _=function(){var t=[];return function(e,n){return t[e]=n,t.filter(Boolean).join("\n")}}();function y(t,e,n,i){var r=n?"":i.css;if(t.styleSheet)t.styleSheet.cssText=_(e,r);else{var a=document.createTextNode(r),o=t.childNodes;o[e]&&t.removeChild(o[e]),o.length?t.insertBefore(a,o[e]):t.appendChild(a)}}},function(t,e,n){"use strict";n.r(e);var i=n(4),r=n.n(i);for(var a in i)"default"!==a&&function(t){n.d(e,t,function(){return i[t]})}(a);e.default=r.a},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=a(n(20)),r=a(n(15));function a(t){return t&&t.__esModule?t:{default:t}}e.default={data:function(){return{isOpen:null}},props:{parentItem:{type:Object,required:!0},level:{type:Number,required:!0},defaultOpenLevel:{type:Number,required:!0}},computed:{classes:function(){return function(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}({"NavigationLevel--closed":!this.isOpen},"NavigationLevel--level-"+this.level,!0)}},methods:{onToggleClick:function(){this.isOpen=!this.isOpen},onItemClick:function(){!1===this.isOpen&&(this.isOpen=!0)},renderLevelAsOpen:function(){if(this.defaultOpenLevel>=this.level)return!0;var t=void 0;if(t=void 0!==this.$router?this.$route.path+this.$route.hash:window.location.pathname+window.location.hash,""!==this.parentItem.meta.target&&t.includes(this.parentItem.meta.target))return!0;for(var e=0;e<this.parentItem.children.length;e++){var n=this.parentItem.children[e];if(""!==n.meta.target&&t.includes(n.meta.target))return!0}return!1}},components:{NavigationItem:r.default,NavigationToggle:i.default},mounted:function(){this.isOpen=this.renderLevelAsOpen()}}},function(t,e,n){"use strict";n.r(e);var i=n(6),r=n.n(i);for(var a in i)"default"!==a&&function(t){n.d(e,t,function(){return i[t]})}(a);e.default=r.a},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={props:{open:{type:Boolean,required:!1,default:!1}}}},function(t,e,n){var i=n(22);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);(0,n(2).default)("24af1295",i,!0,{})},function(t,e,n){"use strict";n.r(e);var i=n(9),r=n.n(i);for(var a in i)"default"!==a&&function(t){n.d(e,t,function(){return i[t]})}(a);e.default=r.a},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={data:function(){return{active:!1}},props:{item:Object,required:!0},methods:{isActive:function(){return""!==this.item.meta.target&&(this.$route?(this.$route.path+this.$route.hash).endsWith(this.item.meta.target)||(this.$route.path+this.$route.hash).endsWith(this.item.meta.target+"/"):window.location.href.endsWith(this.item.meta.target)||window.location.href.endsWith(this.item.meta.target+"/"))}},computed:{showLabel:function(){return void 0===this.item.path&&void 0===this.item.element&&void 0===this.item.external},showRouterLink:function(){return this.showLink&&void 0!==this.$router},showHyperLink:function(){return this.showLink&&void 0===this.$router},showExternalHyperLink:function(){return void 0!==this.item.external},showLink:function(){return void 0!==this.item.path||void 0!==this.item.element},classes:function(){return{"NavigationItem--active":this.active}}},watch:{item:function(){this.active=this.isActive()},$route:function(){this.active=this.isActive()}},mounted:function(){var t=this;this.active=this.isActive(),this.$router||window.addEventListener("hashchange",function(){t.active=t.isActive()})}}},function(t,e,n){var i=n(24);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);(0,n(2).default)("7ceaf854",i,!0,{})},function(t,e,n){var i=n(26);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);(0,n(2).default)("ea5435ce",i,!0,{})},function(t,e,n){"use strict";var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"NavigationLevel",class:t.classes},[n("div",{staticClass:"NavigationLevel__parent"},[n("NavigationToggle",{attrs:{open:t.isOpen},nativeOn:{click:function(e){return t.onToggleClick(e)}}}),t._v(" "),n("NavigationItem",{attrs:{item:t.parentItem},nativeOn:{click:function(e){return t.onItemClick(e)}}})],1),t._v(" "),n("ul",{staticClass:"NavigationLevel__children"},[t._t("default")],2)])},r=[];n.d(e,"a",function(){return i}),n.d(e,"b",function(){return r})},function(t,e,n){"use strict";var i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",{staticClass:"NavigationItem",class:t.classes},[t.showLabel?n("span",{staticClass:"NavigationItem__label"},[t._v(t._s(t.item.name))]):t._e(),t._v(" "),t.showRouterLink?n("router-link",{staticClass:"NavigationItem__router-link",attrs:{to:t.item.meta.target}},[t._v(t._s(t.item.name))]):t._e(),t._v(" "),t.showHyperLink?n("a",{staticClass:"NavigationItem__link",attrs:{href:t.item.meta.target}},[t._v(t._s(t.item.name))]):t._e(),t._v(" "),t.showExternalHyperLink?n("a",{staticClass:"NavigationItem__external-link",attrs:{href:t.item.meta.target,target:"_blank"}},[t._v(t._s(t.item.name))]):t._e()],1)},r=[];n.d(e,"a",function(){return i}),n.d(e,"b",function(){return r})},function(t,e,n){"use strict";var i=function(){var t=this.$createElement,e=this._self._c||t;return e("span",{staticClass:"NavigationToggle",class:{"NavigationToggle--closed":!this.open}},[e("span",{staticClass:"NavigationToggle__icon",class:{"NavigationToggle__icon--closed":!this.open}})])},r=[];n.d(e,"a",function(){return i}),n.d(e,"b",function(){return r})},function(t,e,n){"use strict";n.r(e);var i=n(13),r=n(8);for(var a in r)"default"!==a&&function(t){n.d(e,t,function(){return r[t]})}(a);n(23);var o=n(0),s=Object(o.a)(r.default,i.a,i.b,!1,null,null,null);s.options.__file="NavigationItem.vue",e.default=s.exports},function(t,e,n){"use strict";var i=function(t){return t&&t.__esModule?t:{default:t}}(n(17));t.exports={install:function(t,e){t.component("vue-tree-navigation",i.default)}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(18);n(28);var r={props:{items:{type:Array,required:!1,default:function(){return[]}},defaultOpenLevel:{type:Number,default:0}},computed:{navItems:function(){return this.items&&this.items.length?this.items:this.$router&&this.$router.options&&this.$router.options.routes&&this.$router.options.routes.length?this.$router.options.routes:(console.warn("[VueTreeNavigation]: Haven't you forget to provide items or define vue-router routes?"),[])},navItemsWithMetadata:function(){var t=JSON.parse(JSON.stringify(this.navItems));return(0,i.insertMetadataToNavItems)(t)}},render:function(t){return t("div",{class:"TreeNavigation"},[t("div",{class:["NavigationLevel","NavigationLevel--level-0"]},[t("ul",(0,i.generateLevel)(t,this.navItemsWithMetadata,1,this.defaultOpenLevel))])])}};e.default=r},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.getItemMetadata=e.insertMetadataToNavItems=e.generateLevel=void 0;var i=o(n(19)),r=o(n(15)),a=n(27);function o(t){return t&&t.__esModule?t:{default:t}}e.generateLevel=function t(e,n,a,o){var s=[];return n.forEach(function(n){if(n.hasOwnProperty("children")){var u=e(i.default,{props:{parentItem:n,level:a,defaultOpenLevel:o}},[].concat(function(t){if(Array.isArray(t)){for(var e=0,n=Array(t.length);e<t.length;e++)n[e]=t[e];return n}return Array.from(t)}(t(e,n.children,a+1,o))));s.push(e("li",[u]))}else{var l=e(r.default,{props:{item:n}});s.push(e("li",[l]))}}),s},e.insertMetadataToNavItems=function t(e,n){return e.forEach(function(e){e.meta=s(e,n),e.hasOwnProperty("children")&&(e.children=t(e.children,e))}),e};var s=e.getItemMetadata=function(t,e){var n=(0,a.sanitizeElement)(t.element),i=(0,a.sanitizePath)(t.path),r=t.external;if(void 0===e){if(void 0===n&&void 0===i&&void 0===r)return{path:"",target:""};if(void 0!==r)return{path:"",target:r};if(void 0!==i)return{path:i,target:i};if(void 0!==n)return{path:"",target:"/"+n}}var o=(0,a.sanitizePath)(e.meta.path);return void 0!==r?{path:o,target:r}:void 0!==i?{path:o+i,target:o+i}:void 0!==n?{path:o,target:(0,a.sanitizePath)(o+n)}:{path:o,target:""}}},function(t,e,n){"use strict";n.r(e);var i=n(12),r=n(3);for(var a in r)"default"!==a&&function(t){n.d(e,t,function(){return r[t]})}(a);n(25);var o=n(0),s=Object(o.a)(r.default,i.a,i.b,!1,null,null,null);s.options.__file="NavigationLevel.vue",e.default=s.exports},function(t,e,n){"use strict";n.r(e);var i=n(14),r=n(5);for(var a in r)"default"!==a&&function(t){n.d(e,t,function(){return r[t]})}(a);n(21);var o=n(0),s=Object(o.a)(r.default,i.a,i.b,!1,null,null,null);s.options.__file="NavigationToggle.vue",e.default=s.exports},function(t,e,n){"use strict";var i=n(7);n.n(i).a},function(t,e,n){(t.exports=n(1)(!1)).push([t.i,"\n.NavigationToggle{position:relative;top:-3px;padding:5px 5px 5px 3px;cursor:pointer\n}\n.NavigationToggle__icon{display:inline-block;padding:3px;border:solid #000;border-width:0 2px 2px 0;transform:rotate(45deg)\n}\n.NavigationToggle__icon--closed{transform:rotate(-45deg)\n}\n",""])},function(t,e,n){"use strict";var i=n(10);n.n(i).a},function(t,e,n){(t.exports=n(1)(!1)).push([t.i,"\n.NavigationItem{display:inline-block;padding-top:5px;padding-bottom:5px\n}\n.NavigationItem span{cursor:pointer\n}\n",""])},function(t,e,n){"use strict";var i=n(11);n.n(i).a},function(t,e,n){(t.exports=n(1)(!1)).push([t.i,"\n.NavigationLevel--closed ul{display:none\n}\n",""])},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});e.sanitizeElement=function(t){return void 0===t||""===t?t:("#"!==t[0]&&(t="#"+t),t)},e.sanitizePath=function(t){if(void 0!==t)return"/"!==t[0]&&(t="/"+t),"/"===t[t.length-1]&&(t=t.slice(0,-1)),t}},function(t,e,n){var i=n(29);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);(0,n(2).default)("0965e660",i,!0,{})},function(t,e,n){(t.exports=n(1)(!1)).push([t.i,".TreeNavigation{display:inline-block;padding:0;margin:0}.TreeNavigation ul{padding:0;margin:0;list-style-type:none}.TreeNavigation li{padding-left:20px}\n",""])}])});
//# sourceMappingURL=vue-tree-navigation.js.map

73

package.json
{
"name": "vue-tree-navigation",
"version": "3.0.1",
"version": "4.0.0",
"description": "Vue.js 2 tree navigation",

@@ -31,53 +31,56 @@ "keywords": [

"lint:scss": "stylelint './**/*.scss'",
"lint": "npm run lint:js & npm run lint:scss",
"lint": "yarn lint:js & yarn lint:scss",
"prettier-list": "prettier --list-different '**/*.{js,vue}' --ignore-path .eslintignore",
"prettier": "prettier --write '**/*.{js,vue}' --ignore-path .eslintignore",
"unit": "jest",
"unit-ci": "jest --coverage && cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js"
"unit": "jest src/",
"e2e": "node ./e2e/runner.js"
},
"dependencies": {
"vue": "^2.5.11"
"vue": "^2.5.17"
},
"devDependencies": {
"@vue/test-utils": "^1.0.0-beta.18",
"@vue/test-utils": "^1.0.0-beta.25",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-jest": "^23.0.1",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"coveralls": "^3.0.1",
"cross-env": "^5.1.6",
"css-loader": "^0.28.7",
"eslint": "^4.13.1",
"eslint-config-prettier": "^2.9.0",
"eslint-config-standard": "^11.0.0",
"eslint-plugin-html": "^4.0.1",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-standard": "^3.1.0",
"file-loader": "^1.1.4",
"concurrently": "^4.0.1",
"cross-env": "^5.2.0",
"css-loader": "^1.0.0",
"cypress": "^3.1.0",
"eslint": "^5.6.1",
"eslint-config-prettier": "^3.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-cypress": "^2.0.1",
"eslint-plugin-html": "^4.0.6",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"file-loader": "^2.0.0",
"http-server": "^0.11.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^23.1.0",
"jest-each": "^23.1.0",
"jest-environment-jsdom": "^23.1.0",
"jest-environment-jsdom-global": "^1.1.0",
"jest": "^23.6.0",
"jest-each": "^23.6.0",
"jest-environment-jsdom": "^23.4.0",
"jest-plugin-context": "^2.6.0",
"jest-serializer-vue": "^2.0.2",
"node-sass": "^4.9.0",
"prettier": "1.13.5",
"sass-loader": "^7.0.3",
"stylelint": "^9.2.1",
"node-sass": "^4.9.3",
"prettier": "1.14.3",
"sass-loader": "^7.1.0",
"shelljs": "^0.8.2",
"stylelint": "^9.6.0",
"stylelint-config-recess-order": "^2.0.0",
"stylelint-config-standard": "^18.0.0",
"stylelint-processor-html": "^1.0.0",
"stylelint-scss": "^3.1.0",
"stylelint-scss": "^3.3.1",
"vue-jest": "^2.6.0",
"vue-loader": "^15.2.4",
"vue-loader": "^15.4.2",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.4.4",
"webpack": "^4.12.0",
"webpack-cli": "^3.0.3",
"webpack-dev-server": "^3.1.4"
"vue-template-compiler": "^2.5.17",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
},

@@ -108,4 +111,4 @@ "jest": {

],
"testEnvironment": "jest-environment-jsdom-global"
"testEnvironment": "jest-environment-jsdom"
}
}

127

README.md

@@ -1,6 +0,6 @@

# vue-tree-navigation [![Version](https://img.shields.io/npm/v/vue-tree-navigation.svg)](https://www.npmjs.com/package/vue-tree-navigation) [![Coverage Status](https://coveralls.io/repos/github/MisRob/vue-tree-navigation/badge.svg?branch=master)](https://coveralls.io/github/MisRob/vue-tree-navigation?branch=master) [![License](https://img.shields.io/npm/l/vue-tree-navigation.svg)](https://www.npmjs.com/package/vue-tree-navigation)
# vue-tree-navigation [![Version](https://img.shields.io/npm/v/vue-tree-navigation.svg)](https://www.npmjs.com/package/vue-tree-navigation) [![License](https://img.shields.io/npm/l/vue-tree-navigation.svg)](https://www.npmjs.com/package/vue-tree-navigation)
> Vue.js 2 tree navigation with vue-router support
For more information see [documentation/demo](https://vue-tree-navigation.misrob.cz)
For more detailed information see [documentation/demo](https://vue-tree-navigation.misrob.cz)

@@ -11,15 +11,96 @@ ## Features

- optional [vue-router](https://router.vuejs.org/en/) support (v2.0.0 or higher)
- a possibility to define a default open level
- generate navigation items automatically from _vue-router_ routes or define them manually
- define a default open level
- auto-open a level when a corresponding URL visited
- focused on core functionality, only necessary styles included
- elements are provided with meaningful classes to make customizations comfortable (for example `NavigationItem--active`, `NavigationLevel--level-1`, `NavigationLevel--closed`)
- external URLs support
## Example
### 1. Navigation items generated from _vue-router_ routes
Let's suppose you use _vue-router_ with the following routes definition
```javascript
const routes = [
{
name: 'Home',
path: '/',
},
{
name: 'Running',
path: '/running',
children: [
{
name: 'Barefoot',
path: 'barefoot',
},
],
},
{
name: 'Yoga',
path: '/yoga',
children: [
{
name: 'Mats',
path: 'mats',
},
{
name: 'Tops',
path: 'tops',
},
],
},
{
name: 'About',
path: '/about',
children: [
{
name: 'Career',
path: 'career',
children: [
{
name: 'Design',
path: 'design',
},
],
},
],
},
];
```
Then simply include _vue-tree-navigation_
```html
<template>
<vue-tree-navigation :items="items" :defaultOpenLevel="1" />
<vue-tree-navigation />
</template>
```
and it will generate the following menu:
```
- Home // --> /
- Running // --> /running
- Barefoot // --> /running/barefoot
- Yoga // --> /yoga
- Mats // --> /yoga/mats
- Tops // --> /yoga/tops
- About // --> /about
- Career // --> /about/career
- Design // --> /about/career/design
```
Do not forget to use named routes since _vue-tree-navigation_ uses `name` field to label navigation items.
### 2. Menu items defined manually
The following configuration
```html
<template>
<vue-tree-navigation :items="items" />
</template>
<script>

@@ -30,12 +111,12 @@ export default {

items: [
{ name: 'Products', children: [ // category label
{ name: 'Shoes', route: 'shoes' } // /shoes
{ name: 'Products', children: [
{ name: 'Shoes', path: 'shoes' }
]},
{ name: 'About', route: 'about', children: [ // /about
{ name: 'Contact', route: 'contact', children: [ // /about/contact
{ name: 'E-mail', element: 'email' }, // /about/contact#email
{ name: 'Phone', element: 'phone' } // /about/contact#phone
{ name: 'About', path: 'about', children: [
{ name: 'Contact', path: 'contact', children: [
{ name: 'E-mail', element: 'email' },
{ name: 'Phone', element: 'phone' }
]},
]},
{ name: 'Github', external: 'https://github.com' }, // https://github.com
{ name: 'Github', external: 'https://github.com' },
],

@@ -48,2 +129,16 @@ };

will generate
```
- Products // category label
- Shoes // --> /shoes
- About // --> /about
- Contact // --> /about/contact
- E-mail // --> /about/contact#email
- Phone // --> /about/contact#phone
- Github // --> https://github.com
```
For more examples see [documentation/demo](https://vue-tree-navigation.misrob.cz)
## Installation

@@ -57,3 +152,3 @@

*main.js*
_main.js_

@@ -69,3 +164,3 @@ ```javascript

```html
<script src="https://unpkg.com/vue-tree-navigation@3.0.0/dist/vue-tree-navigation.js"></script>
<script src="https://unpkg.com/vue-tree-navigation@4.0.0/dist/vue-tree-navigation.js"></script>

@@ -77,3 +172,3 @@ <script>

*Example*
_Example_

@@ -115,2 +210,4 @@ ```html

$ yarn unit --verbose
$ yarn e2e
```
dist/vue-tree-navigation.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc