b-sidebar
Version:
Vue2Sidebar: Bootstrap 4 sidebar component in Vue 2.0
1 lines • 13.4 kB
JavaScript
!function(a,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("bSidebar",[],t):"object"==typeof exports?exports.bSidebar=t():a.bSidebar=t()}("undefined"!=typeof self?self:this,function(){return function(a){function t(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return a[n].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var e={};return t.m=a,t.c=e,t.d=function(a,e,n){t.o(a,e)||Object.defineProperty(a,e,{configurable:!1,enumerable:!0,get:n})},t.n=function(a){var e=a&&a.__esModule?function(){return a.default}:function(){return a};return t.d(e,"a",e),e},t.o=function(a,t){return Object.prototype.hasOwnProperty.call(a,t)},t.p="",t(t.s=0)}([function(a,t,e){"use strict";function n(a){e(1)}Object.defineProperty(t,"__esModule",{value:!0});var r={data:function(){return{}},methods:{toggleSidebar:function(){this.$refs.sidebar.classList.toggle("active"),this.$refs.sidebaricon.classList.toggle("active")},isRoute:function(a){var t=this.$router.resolve(a.href);return t&&t.route&&t.route.matched.length>0}},props:{sidenavConfig:{type:Object},links:{type:Array},navs:{type:Array},header:{type:Object},hasNavbar:{type:Boolean}}},s=function(){var a=this,t=a.$createElement,e=a._self._c||t;return e("div",{attrs:{id:"bootstrap-sidebar"}},[e("div",{staticClass:"wrapper"},[e("nav",{ref:"sidebar",class:a.sidenavConfig.sidenavBgColor+" "+a.sidenavConfig.sidenavMainColor+" "+a.sidenavConfig.sidenavClass,attrs:{id:"sidebar"}},[e("div",{staticClass:"sidebar-header border-bottom"},[e("h3",[e("router-link",{staticClass:"w-100 sidebar-header navbar-brand",attrs:{to:a.header.href}},[a._v(a._s(a.header.title))])],1)]),a._v(" "),e("ul",{staticClass:"navbar-nav list-unstyled components"},a._l(a.links,function(t){return e("li",{staticClass:"nav-item active"},[t.links&&t.links.length>0?e("a",{staticClass:"nav-link dropdown-toggle collapsed",attrs:{href:"#nv"+t.label.toLowerCase().replace(" ","_"),"data-toggle":"collapse","aria-haspopup":"true","aria-expanded":"false"}},[t.icon?e("i",{class:"ml-1 fa "+t.icon}):a._e(),a._v(" "+a._s(t.label)+"\n ")]):a._e(),a._v(" "),e("ul",{staticClass:"navbar-nav list-unstyled collapse",attrs:{id:"nv"+t.label.toLowerCase().replace(" ","_")}},a._l(t.links,function(t){return e("li",{staticClass:"nav-item"},[e("a",{staticClass:"nav-link",attrs:{href:t.href}},[a._v(a._s(t.label))])])}))])}))]),a._v(" "),e("div",{staticStyle:{width:"100%"},attrs:{id:"content"}},[a.hasNavbar&&1==a.hasNavbar?e("nav",{class:"shadow navbar navbar-expand-lg "+a.sidenavConfig.sidenavBgColor+" "+a.sidenavConfig.sidenavMainColor+" "+a.sidenavConfig.navbarClass},[e("button",{ref:"sidebaricon",staticClass:"navbar-btn",attrs:{type:"button",id:"sidebarCollapse"},on:{click:function(t){return t.preventDefault(),a.toggleSidebar(t)}}},[e("span"),a._v(" "),e("span"),a._v(" "),e("span")]),a._v(" "),a._m(0),a._v(" "),e("div",{staticClass:"collapse navbar-collapse",attrs:{id:"navbarSupportedContent"}},[e("ul",{staticClass:"navbar-nav mr-auto"},a._l(a.navs,function(t){return e("li",{staticClass:"nav-item",class:{dropdown:t.navs&&t.navs.length>0}},[t.navs&&t.navs.length>0?e("a",{staticClass:"nav-link dropdown-toggle",attrs:{href:"#",id:"nv"+t.label.toLowerCase().replace(" ","_"),role:"button","data-toggle":"dropdown","aria-haspopup":"true","aria-expanded":"false"}},[a._v("\n "+a._s(t.label)+"\n ")]):a._e(),a._v(" "),t.navs&&t.navs.length>0?e("div",{ref:"nv"+t.label.toLowerCase().replace(" ","_"),refInFor:!0,staticClass:"dropdown-menu",class:{show:a.selected===t.label},attrs:{"aria-labelledby":"nv"+t.label.toLowerCase().replace(" ","_")}},a._l(t.navs,function(t){return e(a.isRoute(t)?"router-link":"a",{tag:"div",staticClass:"dropdown-item",attrs:{href:a.isRoute(t)?"#":t.href,to:t.href,replace:t.replace,"active-class":"parent-active","exact-active-class":"active"}},[t.icon?e("i",{staticClass:"icon fa fa-fw",class:(n={},n[t.icon]=!0,n)}):a._e(),a._v("\n "+a._s(t.label)+"\n ")]);var n})):e("a",{staticClass:"nav-link",attrs:{href:"#"}},[a._v(a._s(t.label))])])}))])]):a._e(),a._v(" "),e("router-view")],1)])])},o=[function(){var a=this,t=a.$createElement,e=a._self._c||t;return e("button",{staticClass:"navbar-toggler",attrs:{type:"button","data-toggle":"collapse","data-target":"#navbarSupportedContent","aria-controls":"navbarSupportedContent","aria-expanded":"false","aria-label":"Toggle navigation"}},[e("span",{staticClass:"navbar-toggler-icon"})])}],i={render:s,staticRenderFns:o},l=i,d=e(6),c=n,p=d(r,l,!1,c,"data-v-6a4cb5c4",null),f=p.exports;e.d(t,"Vue2SidebarPlugin",function(){return b}),e.d(t,"Vue2Sidebar",function(){return f});var b=function(a,t){a.component("side-bar",f)};f.install=b;t.default=f},function(a,t,e){var n=e(2);"string"==typeof n&&(n=[[a.i,n,""]]),n.locals&&(a.exports=n.locals);e(4)("45ef2361",n,!0,{})},function(a,t,e){t=a.exports=e(3)(!1),t.push([a.i,"p[data-v-6a4cb5c4]{font-family:Poppins,sans-serif;font-size:1.1em;font-weight:300;line-height:1.7em}a[data-v-6a4cb5c4],a[data-v-6a4cb5c4]:focus,a[data-v-6a4cb5c4]:hover{color:inherit;text-decoration:none;-webkit-transition:all .3s;transition:all .3s}.navbar[data-v-6a4cb5c4]{padding:15px 10px;border:none;border-radius:0;-webkit-box-shadow:1px 1px 3px rgba(0,0,0,.1);box-shadow:1px 1px 3px rgba(0,0,0,.1)}.navbar-btn[data-v-6a4cb5c4]{-webkit-box-shadow:none;box-shadow:none;outline:none!important;border:none}.line[data-v-6a4cb5c4]{width:100%;height:1px;border-bottom:1px dashed #ddd;margin:40px 0}.wrapper[data-v-6a4cb5c4]{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-perspective:1500px;perspective:1500px}#sidebar[data-v-6a4cb5c4]{min-width:250px;max-width:250px;-webkit-transition:all .6s cubic-bezier(.945,.02,.27,.665);transition:all .6s cubic-bezier(.945,.02,.27,.665);-webkit-transform-origin:bottom left;transform-origin:bottom left}#sidebar.active[data-v-6a4cb5c4]{margin-left:-250px;-webkit-transform:rotateY(100deg);transform:rotateY(100deg)}#sidebar .sidebar-header[data-v-6a4cb5c4]{padding:9.5px}#sidebar ul.components[data-v-6a4cb5c4]{padding:5px 0}#sidebar ul p[data-v-6a4cb5c4]{color:#fff;padding:10px}#sidebar ul li a[data-v-6a4cb5c4]{padding:10px;font-size:1.1em;display:block}a[data-toggle=collapse][data-v-6a4cb5c4]{position:relative}#sidebar .dropdown-toggle[data-v-6a4cb5c4]:after{-webkit-transform:translateY(-50%) rotate(180deg);transform:translateY(-50%) rotate(180deg)}#sidebar .dropdown-toggle.collapsed[data-v-6a4cb5c4]:after{-webkit-transform:translateY(-50%);transform:translateY(-50%)}#sidebar .dropdown-toggle[data-v-6a4cb5c4]:after{-webkit-transition:all .3s;transition:all .3s;display:block;position:absolute;top:50%;right:20px}ul ul a[data-v-6a4cb5c4]{font-size:.9em!important;padding-left:30px!important}ul.CTAs[data-v-6a4cb5c4]{padding:20px}ul.CTAs a[data-v-6a4cb5c4]{text-align:center;font-size:.9em!important;display:block;border-radius:5px;margin-bottom:5px}a.download[data-v-6a4cb5c4]{background:#fff;color:#7386d5}a.article[data-v-6a4cb5c4],a.article[data-v-6a4cb5c4]:hover{background:#6d7fcc!important;color:#fff!important}#content[data-v-6a4cb5c4]{width:100%;padding:0;min-height:100vh;-webkit-transition:all .3s;transition:all .3s}.navbar-dark #sidebarCollapse span[data-v-6a4cb5c4]{background:hsla(0,0%,100%,.5)}.navbar-light #sidebarCollapse span[data-v-6a4cb5c4]{background:rgba(0,0,0,.5)}#sidebarCollapse[data-v-6a4cb5c4]{width:40px;height:40px;background:transparent;cursor:pointer}#sidebarCollapse span[data-v-6a4cb5c4]{width:80%;height:2px;margin:0 auto;display:block;background:#555;-webkit-transition:all .8s cubic-bezier(.81,-.33,.345,1.375);transition:all .8s cubic-bezier(.81,-.33,.345,1.375);-webkit-transition-delay:.2s;transition-delay:.2s}#sidebarCollapse span[data-v-6a4cb5c4]:first-of-type{-webkit-transform:rotate(45deg) translate(2px,2px);transform:rotate(45deg) translate(2px,2px)}#sidebarCollapse span[data-v-6a4cb5c4]:nth-of-type(2){opacity:0}#sidebarCollapse span[data-v-6a4cb5c4]:last-of-type{-webkit-transform:rotate(-45deg) translate(1px,-1px);transform:rotate(-45deg) translate(1px,-1px)}#sidebarCollapse.active span[data-v-6a4cb5c4]{-webkit-transform:none;transform:none;opacity:1;margin:5px auto}@media (max-width:768px){#sidebar[data-v-6a4cb5c4]{margin-left:-250px;-webkit-transform:rotateY(90deg);transform:rotateY(90deg)}#sidebar.active[data-v-6a4cb5c4]{margin-left:0;-webkit-transform:none;transform:none}#sidebarCollapse span[data-v-6a4cb5c4]:first-of-type,#sidebarCollapse span[data-v-6a4cb5c4]:last-of-type,#sidebarCollapse span[data-v-6a4cb5c4]:nth-of-type(2){-webkit-transform:none;transform:none;opacity:1;margin:5px auto}#sidebarCollapse.active span[data-v-6a4cb5c4]{margin:0 auto}#sidebarCollapse.active span[data-v-6a4cb5c4]:first-of-type{-webkit-transform:rotate(45deg) translate(2px,2px);transform:rotate(45deg) translate(2px,2px)}#sidebarCollapse.active span[data-v-6a4cb5c4]:nth-of-type(2){opacity:0}#sidebarCollapse.active span[data-v-6a4cb5c4]:last-of-type{-webkit-transform:rotate(-45deg) translate(1px,-1px);transform:rotate(-45deg) translate(1px,-1px)}}",""])},function(a,t){function e(a,t){var e=a[1]||"",r=a[3];if(!r)return e;if(t&&"function"==typeof btoa){var s=n(r);return[e].concat(r.sources.map(function(a){return"/*# sourceURL="+r.sourceRoot+a+" */"})).concat([s]).join("\n")}return[e].join("\n")}function n(a){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"}a.exports=function(a){var t=[];return t.toString=function(){return this.map(function(t){var n=e(t,a);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(a,e){"string"==typeof a&&(a=[[null,a,""]]);for(var n={},r=0;r<this.length;r++){var s=this[r][0];"number"==typeof s&&(n[s]=!0)}for(r=0;r<a.length;r++){var o=a[r];"number"==typeof o[0]&&n[o[0]]||(e&&!o[2]?o[2]=e:e&&(o[2]="("+o[2]+") and ("+e+")"),t.push(o))}},t}},function(a,t,e){function n(a){for(var t=0;t<a.length;t++){var e=a[t],n=c[e.id];if(n){n.refs++;for(var r=0;r<n.parts.length;r++)n.parts[r](e.parts[r]);for(;r<e.parts.length;r++)n.parts.push(s(e.parts[r]));n.parts.length>e.parts.length&&(n.parts.length=e.parts.length)}else{for(var o=[],r=0;r<e.parts.length;r++)o.push(s(e.parts[r]));c[e.id]={id:e.id,refs:1,parts:o}}}}function r(){var a=document.createElement("style");return a.type="text/css",p.appendChild(a),a}function s(a){var t,e,n=document.querySelector("style["+h+'~="'+a.id+'"]');if(n){if(u)return v;n.parentNode.removeChild(n)}if(m){var s=b++;n=f||(f=r()),t=o.bind(null,n,s,!1),e=o.bind(null,n,s,!0)}else n=r(),t=i.bind(null,n),e=function(){n.parentNode.removeChild(n)};return t(a),function(n){if(n){if(n.css===a.css&&n.media===a.media&&n.sourceMap===a.sourceMap)return;t(a=n)}else e()}}function o(a,t,e,n){var r=e?"":n.css;if(a.styleSheet)a.styleSheet.cssText=x(t,r);else{var s=document.createTextNode(r),o=a.childNodes;o[t]&&a.removeChild(o[t]),o.length?a.insertBefore(s,o[t]):a.appendChild(s)}}function i(a,t){var e=t.css,n=t.media,r=t.sourceMap;if(n&&a.setAttribute("media",n),g.ssrId&&a.setAttribute(h,t.id),r&&(e+="\n/*# sourceURL="+r.sources[0]+" */",e+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),a.styleSheet)a.styleSheet.cssText=e;else{for(;a.firstChild;)a.removeChild(a.firstChild);a.appendChild(document.createTextNode(e))}}var l="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!l)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 d=e(5),c={},p=l&&(document.head||document.getElementsByTagName("head")[0]),f=null,b=0,u=!1,v=function(){},g=null,h="data-vue-ssr-id",m="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());a.exports=function(a,t,e,r){u=e,g=r||{};var s=d(a,t);return n(s),function(t){for(var e=[],r=0;r<s.length;r++){var o=s[r],i=c[o.id];i.refs--,e.push(i)}t?(s=d(a,t),n(s)):s=[];for(var r=0;r<e.length;r++){var i=e[r];if(0===i.refs){for(var l=0;l<i.parts.length;l++)i.parts[l]();delete c[i.id]}}}};var x=function(){var a=[];return function(t,e){return a[t]=e,a.filter(Boolean).join("\n")}}()},function(a,t){a.exports=function(a,t){for(var e=[],n={},r=0;r<t.length;r++){var s=t[r],o=s[0],i=s[1],l=s[2],d=s[3],c={id:a+":"+r,css:i,media:l,sourceMap:d};n[o]?n[o].parts.push(c):e.push(n[o]={id:o,parts:[c]})}return e}},function(a,t){a.exports=function(a,t,e,n,r,s){var o,i=a=a||{},l=typeof a.default;"object"!==l&&"function"!==l||(o=a,i=a.default);var d="function"==typeof i?i.options:i;t&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0),e&&(d.functional=!0),r&&(d._scopeId=r);var c;if(s?(c=function(a){a=a||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,a||"undefined"==typeof __VUE_SSR_CONTEXT__||(a=__VUE_SSR_CONTEXT__),n&&n.call(this,a),a&&a._registeredComponents&&a._registeredComponents.add(s)},d._ssrRegister=c):n&&(c=n),c){var p=d.functional,f=p?d.render:d.beforeCreate;p?(d._injectStyles=c,d.render=function(a,t){return c.call(t),f(a,t)}):d.beforeCreate=f?[].concat(f,c):[c]}return{esModule:o,exports:i,options:d}}}])});