vue-bootstrap-sidebar
Version:
Simple sidebar component for Vue applications build using bootstrap-vue
306 lines (286 loc) • 10.7 kB
JavaScript
;Object.defineProperty(exports,'__esModule',{value:true});function _interopDefault(e){return(e&&(typeof e==='object')&&'default'in e)?e['default']:e}var HamburgerButton=_interopDefault(require('@jurajkavka/vue-hamburger-button'));//
var script = {
name: 'BootstrapSidebar',
components: {
HamburgerButton: HamburgerButton
},
props: {
links: {
type: Array,
default: null
},
initialShow: {
type: Boolean,
default: true
},
theme: {
type: String,
default: 'default-theme'
},
header: {
type: String,
default: 'Sidebar'
}
},
data: function data() {
return {
show: this.initialShow
};
},
methods: {
onButtonClick: function 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;
}function createInjectorSSR(context) {
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
if (!context)
return () => { };
if (!('styles' in context)) {
context._styles = context._styles || {};
Object.defineProperty(context, 'styles', {
enumerable: true,
get: () => context._renderStyles(context._styles)
});
context._renderStyles = context._renderStyles || renderStyles;
}
return (id, style) => addStyle(id, style, context);
}
function addStyle(id, css, context) {
const group = css.media || 'default' ;
const style = context._styles[group] || (context._styles[group] = { ids: [], css: '' });
if (!style.ids.includes(id)) {
style.media = css.media;
style.ids.push(id);
let code = css.source;
style.css += code + '\n';
}
}
function renderStyles(styles) {
let css = '';
for (const key in styles) {
const style = styles[key];
css +=
'<style data-vue-ssr-id="' +
Array.from(style.ids).join(' ') +
'"' +
(style.media ? ' media="' + style.media + '"' : '') +
'>' +
style.css +
'</style>';
}
return css;
}/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', [_vm._ssrNode("<nav id=\"sidebar\"" + _vm._ssrClass("vue-bootstrap-sidebar default-theme", [_vm.theme] && [_vm.show ? 'sidebar-visible' : 'sidebar-hidden']) + ">", "</nav>", [_vm._ssrNode("<div class=\"sidebar-header\">" + _vm._s(_vm.header) + "</div> "), _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._ssrNode(" "), _c('HamburgerButton', {
staticClass: "sidebar-button",
class: [_vm.show ? 'visible' : 'hidden'],
attrs: {
"id": "sidebarButton",
"is-hamburger": !_vm.initialShow
},
on: {
"click": _vm.onButtonClick
}
})], 2), _vm._ssrNode(" "), _vm._ssrNode("<div id=\"navbar\"" + _vm._ssrClass(null, [_vm.show ? 'sidebar' : 'no-sidebar']) + ">", "</div>", [_vm._t("navbar")], 2), _vm._ssrNode(" "), _vm._ssrNode("<div id=\"content\"" + _vm._ssrClass(null, [_vm.show ? 'sidebar' : 'no-sidebar']) + ">", "</div>", [_vm._t("content")], 2)], 2);
};
var __vue_staticRenderFns__ = [];
/* style */
var __vue_inject_styles__ = function __vue_inject_styles__(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 */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = "data-v-d5ed1e34";
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject shadow dom */
var __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, undefined, createInjectorSSR, undefined);// Import vue component
var install = function install(Vue) {
if (install.installed) return;
install.installed = true;
Vue.component('BootstrapSidebar', __vue_component__);
}; // Create module definition for Vue.use()
var plugin = {
install: install
}; // To auto-install when vue is found
// eslint-disable-next-line no-redeclare
/* global window global */
var 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;
exports.default=__vue_component__;