vue-sidebar-bootstrap/dist/vue-sidebar-bootstrap.ssr.js

Create a mobile friendly sidebar layout for Bootstrap Vue.

'use strict';Object.defineProperty(exports,'__esModule',{value:true});function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function ownKeys(object, enumerableOnly) {
  var keys = Object.keys(object);

  if (Object.getOwnPropertySymbols) {
    var symbols = Object.getOwnPropertySymbols(object);
    if (enumerableOnly) symbols = symbols.filter(function (sym) {
      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
    });
    keys.push.apply(keys, symbols);
  }

  return keys;
}

function _objectSpread2(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};

    if (i % 2) {
      ownKeys(Object(source), true).forEach(function (key) {
        _defineProperty(target, key, source[key]);
      });
    } else if (Object.getOwnPropertyDescriptors) {
      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
    } else {
      ownKeys(Object(source)).forEach(function (key) {
        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
      });
    }
  }

  return target;
}

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArrayLimit(arr, i) {
  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

  return arr2;
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}//
//
//
//
//
//
//
//
//
var script = {
  name: 'VsbSidebarItemIcon',
  props: {
    icon: {
      type: [Object, String],
      default: function _default() {}
    }
  }
};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;
}/* 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 _vm.icon && Object.keys(_vm.icon).length ? _c(_vm.icon.tag ? _vm.icon.tag : 'b-icon', _vm._b({
    tag: "component",
    attrs: {
      "icon": !_vm.icon.tag ? _vm.icon : _vm.icon.attributes.icon
    }
  }, 'component', _vm.icon.attributes, false)) : _vm._e();
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = undefined;
/* module identifier */

var __vue_module_identifier__ = "data-v-15f0451c";
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

var __vue_component__ = /*#__PURE__*/normalizeComponent({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);//
var script$1 = {
  name: 'SidebarItem',
  props: {
    item: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    index: {
      type: Number,
      default: null
    },
    textSmall: {
      type: Boolean,
      default: false
    },
    sectionDisabled: {
      type: Boolean,
      default: false
    }
  },
  components: {
    VsbSidebarItemIcon: __vue_component__
  }
};/* script */
var __vue_script__$1 = script$1;
/* template */

var __vue_render__$1 = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('b-list-group-item', {
    directives: [{
      name: "b-toggle",
      rawName: "v-b-toggle",
      value: _vm.item.children ? "nav-item-" + _vm.index : null,
      expression: "item.children ? `nav-item-${index}` : null"
    }],
    staticClass: "d-flex justify-content-between align-items-center",
    attrs: {
      "to": _vm.item.link,
      "active-class": "active",
      "exact": "",
      "disabled": _vm.item.disabled || _vm.sectionDisabled
    }
  }, [_c('span', [_c('vsb-sidebar-item-icon', {
    staticClass: "mr-3",
    attrs: {
      "icon": _vm.item.icon
    }
  }), _vm._v(" "), _c('span', {
    class: {
      small: _vm.textSmall
    }
  }, [_vm._v(_vm._s(_vm.item.text))])], 1), _vm._v(" "), _vm._t("default")], 2);
};

var __vue_staticRenderFns__$1 = [];
/* style */

var __vue_inject_styles__$1 = undefined;
/* scoped */

var __vue_scope_id__$1 = undefined;
/* module identifier */

var __vue_module_identifier__$1 = "data-v-1fcfe8db";
/* functional template */

var __vue_is_functional_template__$1 = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

var __vue_component__$1 = /*#__PURE__*/normalizeComponent({
  render: __vue_render__$1,
  staticRenderFns: __vue_staticRenderFns__$1
}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);var script$2 = {
  name: 'VsbSidebar',
  props: {
    items: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    width: {
      type: String,
      default: '320px'
    },
    mobileFullscreen: {
      type: Boolean,
      default: false
    }
  },
  components: {
    VsbSidebarItem: __vue_component__$1,
    VsbSidebarItemIcon: __vue_component__
  },
  data: function data() {
    return {
      showSidebar: true,
      isMobile: false
    };
  },
  mounted: function mounted() {
    this.onResize();
    window.addEventListener('resize', this.onResize);
  },
  methods: {
    onResize: function onResize() {
      this.isMobile = window.innerWidth <= 768;
    }
  },
  watch: {
    isMobile: function isMobile(value) {
      this.$emit('is-mobile', value);
      this.showSidebar = !value;
    }
  },
  computed: {
    sections: function sections() {
      var sections = [];
      var emptySection = {
        name: null,
        children: []
      };
      this.items.forEach(function (section) {
        // If not section title, just add to the empty list
        if (!section.name) return emptySection.children.push(section); // Close empty section and add to final list if it contains children

        if (emptySection.children.length) {
          sections.push(_objectSpread2({}, emptySection));
          emptySection.children = [];
        }

        sections.push(section);
      });
      return sections;
    }
  }
};/* script */
var __vue_script__$2 = script$2;
/* template */

var __vue_render__$2 = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    staticClass: "align-self-end"
  }, [_vm._t("toggle-icon", [_c('b-icon', {
    directives: [{
      name: "b-toggle",
      rawName: "v-b-toggle.sidebar",
      modifiers: {
        "sidebar": true
      }
    }],
    staticClass: "h3 m-2 d-md-none",
    attrs: {
      "icon": "list"
    }
  })]), _vm._ssrNode(" "), _c('b-sidebar', _vm._b({
    attrs: {
      "id": "sidebar",
      "shadow": _vm.shadow,
      "no-close-on-esc": !_vm.isMobile,
      "no-close-on-backdrop": !_vm.isMobile,
      "no-close-on-route-change": !_vm.isMobile,
      "no-header-close": !_vm.isMobile,
      "backdrop": _vm.isMobile && _vm.backdrop,
      "width": _vm.isMobile && _vm.mobileFullscreen ? '100vh' : _vm.width
    },
    on: {
      "change": function change(val) {
        return _vm.$emit('change', val);
      }
    },
    scopedSlots: _vm._u([{
      key: "title",
      fn: function fn() {
        return [_vm._t("title", [_c('div', {
          staticClass: "p-2"
        }, [_c('h5', [_vm._v("Sidebar Title")])])])];
      },
      proxy: true
    }, {
      key: "default",
      fn: function fn() {
        return _vm._l(_vm.sections, function (section) {
          return _c('b-list-group', {
            key: section.name,
            staticClass: "mb-3",
            attrs: {
              "flush": ""
            }
          }, [_vm._t("section-title", [_c('h6', {
            class: ['ml-2', {
              'text-muted': section.disabled
            }]
          }, [_vm._v("\n            " + _vm._s(section.name) + "\n          ")])]), _vm._v(" "), _vm._l(section.children, function (item, index) {
            return _c('div', {
              key: item.text
            }, [_c('vsb-sidebar-item', {
              attrs: {
                "section-disabled": section.disabled,
                "item": item,
                "index": index
              }
            }, [_vm._t("dropdown-icon", [item.children ? _c('vsb-sidebar-item-icon', {
              directives: [{
                name: "b-toggle",
                rawName: "v-b-toggle",
                value: "nav-item-" + index,
                expression: "`nav-item-${index}`"
              }],
              staticStyle: {
                "width": "0.7em"
              },
              attrs: {
                "icon": "chevron-right"
              }
            }) : _vm._e()], {
              "item": item,
              "index": index
            })], 2), _vm._v(" "), item.children ? _c('b-collapse', {
              staticClass: "pl-3",
              attrs: {
                "id": "nav-item-" + index
              }
            }, [_c('b-list-group', {
              attrs: {
                "flush": ""
              }
            }, _vm._l(item.children, function (childItem) {
              return _c('vsb-sidebar-item', {
                key: childItem.text,
                attrs: {
                  "item": childItem,
                  "text-small": true
                }
              });
            }), 1)], 1) : _vm._e()], 1);
          })], 2);
        });
      },
      proxy: true
    }, {
      key: "footer",
      fn: function fn() {
        return [_vm._t("footer")];
      },
      proxy: true
    }], null, true),
    model: {
      value: _vm.showSidebar,
      callback: function callback($$v) {
        _vm.showSidebar = $$v;
      },
      expression: "showSidebar"
    }
  }, 'b-sidebar', _vm.$attrs, false))], 2);
};

var __vue_staticRenderFns__$2 = [];
/* style */

var __vue_inject_styles__$2 = undefined;
/* scoped */

var __vue_scope_id__$2 = undefined;
/* module identifier */

var __vue_module_identifier__$2 = "data-v-2c897312";
/* functional template */

var __vue_is_functional_template__$2 = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

var __vue_component__$2 = /*#__PURE__*/normalizeComponent({
  render: __vue_render__$2,
  staticRenderFns: __vue_staticRenderFns__$2
}, __vue_inject_styles__$2, __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, false, undefined, undefined, undefined);//
var script$3 = {
  name: 'VsbLayout',
  components: {
    VsbSidebar: __vue_component__$2
  },
  props: {
    navbarClass: {
      type: String,
      default: null
    }
  },
  data: function data() {
    return {
      sidebarOpen: true,
      isMobile: false
    };
  },
  computed: {
    sidebarStyling: function sidebarStyling() {
      // Does not add margin on mobile or when the sidebar is closed
      if (!this.sidebarOpen || this.isMobile) return;
      var sidebarWidth = this.$attrs.width || '320px';
      return {
        'margin-left': sidebarWidth,
        width: "calc(100vw - ".concat(sidebarWidth, ")")
      };
    }
  }
};/* script */
var __vue_script__$3 = script$3;
/* template */

var __vue_render__$3 = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    style: _vm.sidebarStyling,
    attrs: {
      "id": "layout"
    }
  }, [_c('b-navbar', {
    class: _vm.navbarClass,
    attrs: {
      "id": "navbar"
    }
  }, [_c('vsb-sidebar', _vm._b({
    on: {
      "change": function change(val) {
        return _vm.sidebarOpen = val;
      },
      "is-mobile": function isMobile(val) {
        return _vm.isMobile = val;
      }
    },
    scopedSlots: _vm._u([_vm._l(_vm.$scopedSlots, function (_, slot) {
      return {
        key: slot,
        fn: function fn(scope) {
          return [_vm._t(slot, null, null, scope)];
        }
      };
    })], null, true)
  }, 'vsb-sidebar', _vm.$attrs, false)), _vm._v(" "), _vm._t("navbar-content")], 2), _vm._ssrNode(" "), _vm._t("default", [_c('b-container', {
    staticClass: "py-5"
  }, [_c('router-view')], 1)])], 2);
};

var __vue_staticRenderFns__$3 = [];
/* style */

var __vue_inject_styles__$3 = undefined;
/* scoped */

var __vue_scope_id__$3 = undefined;
/* module identifier */

var __vue_module_identifier__$3 = "data-v-cb53d43c";
/* functional template */

var __vue_is_functional_template__$3 = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

var __vue_component__$3 = /*#__PURE__*/normalizeComponent({
  render: __vue_render__$3,
  staticRenderFns: __vue_staticRenderFns__$3
}, __vue_inject_styles__$3, __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, false, undefined, undefined, undefined);/* eslint-disable import/prefer-default-export */var components=/*#__PURE__*/Object.freeze({__proto__:null,VsbLayout: __vue_component__$3,VsbSidebar: __vue_component__$2,VsbSidebarItem: __vue_component__$1,VsbSidebarItemIcon: __vue_component__});var install = function installVueSidebarBootstrap(Vue) {
  if (install.installed) return;
  install.installed = true;
  Object.entries(components).forEach(function (_ref) {
    var _ref2 = _slicedToArray(_ref, 2),
        componentName = _ref2[0],
        component = _ref2[1];

    Vue.component(componentName, component);
  });
}; // Create module definition for Vue.use()


var plugin = {
  install: install
}; // To auto-install on non-es builds, 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);
  }
} // Default export is library as a whole, registered via Vue.use()
exports.VsbLayout=__vue_component__$3;exports.VsbSidebar=__vue_component__$2;exports.VsbSidebarItem=__vue_component__$1;exports.VsbSidebarItemIcon=__vue_component__;exports.default=plugin;