vue-bootstrap-sidebar
Version:
Simple sidebar component for Vue applications build using bootstrap-vue
355 lines (324 loc) • 11.3 kB
JavaScript
import HamburgerButton from '@jurajkavka/vue-hamburger-button';
//
var script = {
name: 'BootstrapSidebar',
components: {
HamburgerButton
},
props: {
links: {
type: Array,
default: null
},
initialShow: {
type: Boolean,
default: true
},
theme: {
type: String,
default: 'default-theme'
},
header: {
type: String,
default: 'Sidebar'
}
},
data() {
return {
show: this.initialShow
};
},
methods: {
onButtonClick() {
this.show = !this.show;
this.$emit('sidebarChanged', this.show);
}
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
const options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
let hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
const originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
const existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
const isOldIE = typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
function createInjector(context) {
return (id, style) => addStyle(id, style);
}
let HEAD;
const styles = {};
function addStyle(id, css) {
const group = isOldIE ? css.media || 'default' : id;
const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
if (!style.ids.has(id)) {
style.ids.add(id);
let code = css.source;
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (!style.element) {
style.element = document.createElement('style');
style.element.type = 'text/css';
if (css.media)
style.element.setAttribute('media', css.media);
if (HEAD === undefined) {
HEAD = document.head || document.getElementsByTagName('head')[0];
}
HEAD.appendChild(style.element);
}
if ('styleSheet' in style.element) {
style.styles.push(code);
style.element.styleSheet.cssText = style.styles
.filter(Boolean)
.join('\n');
}
else {
const index = style.ids.size - 1;
const textNode = document.createTextNode(code);
const nodes = style.element.childNodes;
if (nodes[index])
style.element.removeChild(nodes[index]);
if (nodes.length)
style.element.insertBefore(textNode, nodes[index]);
else
style.element.appendChild(textNode);
}
}
}
/* script */
const __vue_script__ = script;
/* template */
var __vue_render__ = function () {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', [_c('nav', {
staticClass: "vue-bootstrap-sidebar default-theme",
class: [_vm.theme] && [_vm.show ? 'sidebar-visible' : 'sidebar-hidden'],
attrs: {
"id": "sidebar"
}
}, [_c('div', {
staticClass: "sidebar-header",
domProps: {
"innerHTML": _vm._s(_vm.header)
}
}), _vm._v(" "), _c('b-list-group', {
staticClass: "items-wrapper"
}, [_vm._l(_vm.links, function (link, index) {
return [link.href !== undefined ? [_c('b-list-group-item', {
key: index
}, [_c('b-button', {
staticClass: "btn sidebar-menu-item",
attrs: {
"block": "",
"to": link.href,
"variant": "info",
"squared": true
}
}, [_c('div', {
staticClass: "fa-icon"
}, [link.faIcon ? _c('font-awesome-icon', {
tag: "component",
attrs: {
"icon": link.faIcon
}
}) : _vm._e()], 1), _vm._v(" "), _c('div', {
staticClass: "link-name"
}, [_vm._v("\n " + _vm._s(link.name) + "\n ")])])], 1)] : [_c('b-list-group-item', {
key: index
}, [_c('b-button', {
directives: [{
name: "b-toggle",
rawName: "v-b-toggle",
value: "accordion-" + link.name,
expression: "`accordion-${link.name}`"
}],
staticClass: "sidebar-menu-item dropdown-toggle",
attrs: {
"block": "",
"href": "#",
"variant": "info"
}
}, [_c('div', {
staticClass: "fa-icon"
}, [link.faIcon ? _c('font-awesome-icon', {
tag: "component",
attrs: {
"icon": link.faIcon
}
}) : _vm._e()], 1), _vm._v(" "), _c('div', {
staticClass: "link-name"
}, [_vm._v("\n " + _vm._s(link.name) + "\n ")])])], 1), _vm._v(" "), _c('b-collapse', {
key: index + 10,
attrs: {
"id": "accordion-" + link.name,
"accordion": "my-accordion",
"role": "tabpanel"
}
}, [_c('b-list-group', _vm._l(link.children, function (child, idx) {
return _c('b-list-group-item', {
key: idx
}, [_c('b-button', {
staticClass: "sidebar-menu-item child-level-1",
attrs: {
"block": "",
"variant": "primary",
"to": child.href
}
}, [_c('div', {
staticClass: "fa-icon"
}, [child.faIcon ? _c('font-awesome-icon', {
tag: "component",
attrs: {
"icon": child.faIcon
}
}) : _vm._e()], 1), _vm._v(" "), _c('div', {
staticClass: "link-name"
}, [_vm._v("\n " + _vm._s(child.name) + "\n ")])])], 1);
}), 1)], 1)]];
})], 2), _vm._v(" "), _c('HamburgerButton', {
staticClass: "sidebar-button",
class: [_vm.show ? 'visible' : 'hidden'],
attrs: {
"id": "sidebarButton",
"is-hamburger": !_vm.initialShow
},
on: {
"click": _vm.onButtonClick
}
})], 1), _vm._v(" "), _c('div', {
class: [_vm.show ? 'sidebar' : 'no-sidebar'],
attrs: {
"id": "navbar"
}
}, [_vm._t("navbar")], 2), _vm._v(" "), _c('div', {
class: [_vm.show ? 'sidebar' : 'no-sidebar'],
attrs: {
"id": "content"
}
}, [_vm._t("content")], 2)]);
};
var __vue_staticRenderFns__ = [];
/* style */
const __vue_inject_styles__ = function (inject) {
if (!inject) return;
inject("data-v-d5ed1e34_0", {
source: ".default-theme{display:inline-block;cursor:pointer}.default-theme .bar1,.default-theme .bar2,.default-theme .bar3{width:25px;height:3px;background-color:#333;margin:6px 0;transition:.4s}.default-theme.cross .bar1{-webkit-transform:rotate(-45deg) translate(-7px,6px);transform:rotate(-45deg) translate(-7px,6px)}.default-theme.cross .bar2{opacity:0}.default-theme.cross .bar3{-webkit-transform:rotate(45deg) translate(-6px,-6px);transform:rotate(45deg) translate(-6px,-6px)}",
map: undefined,
media: undefined
});
};
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject SSR */
/* style inject shadow dom */
const __vue_component__ = normalizeComponent({
render: __vue_render__,
staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);
// Import vue component
const install = function (Vue) {
if (install.installed) return;
install.installed = true;
Vue.component('BootstrapSidebar', __vue_component__);
}; // Create module definition for Vue.use()
const plugin = {
install
}; // To auto-install when vue is found
// eslint-disable-next-line no-redeclare
/* global window global */
let GlobalVue = null;
if (typeof window !== 'undefined') {
GlobalVue = window.Vue;
} else if (typeof global !== 'undefined') {
GlobalVue = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
} // Inject install function into component - allows component
// to be registered via Vue.use() as well as Vue.component()
__vue_component__.install = install; // Export component by default
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
// export const RollupDemoDirective = component;
export default __vue_component__;