uiv
Version:
Bootstrap 3 components implemented by Vue 2.
339 lines (322 loc) • 8.98 kB
JavaScript
function isElement (el) {
return el && el.nodeType === Node.ELEMENT_NODE
}
function addClass (el, className) {
if (!isElement(el)) {
return
}
if (el.className) {
var classes = el.className.split(' ');
if (classes.indexOf(className) < 0) {
classes.push(className);
el.className = classes.join(' ');
}
} else {
el.className = className;
}
}
function removeClass (el, className) {
if (!isElement(el)) {
return
}
if (el.className) {
var classes = el.className.split(' ');
var newClasses = [];
for (var i = 0, l = classes.length; i < l; i++) {
if (classes[i] !== className) {
newClasses.push(classes[i]);
}
}
el.className = newClasses.join(' ');
}
}
var COLLAPSE = 'collapse';
var IN = 'in';
var COLLAPSING = 'collapsing';
var Collapse = {
render: function render (h) {
return h(this.tag, {}, this.$slots.default)
},
props: {
tag: {
type: String,
default: 'div'
},
value: {
type: Boolean,
default: false
},
transition: {
type: Number,
default: 350
}
},
data: function data () {
return {
timeoutId: 0
}
},
watch: {
value: function value (show) {
this.toggle(show);
}
},
mounted: function mounted () {
var el = this.$el;
addClass(el, COLLAPSE);
if (this.value) {
addClass(el, IN);
}
},
methods: {
toggle: function toggle (show) {
var this$1 = this;
clearTimeout(this.timeoutId);
var el = this.$el;
if (show) {
this.$emit('show');
removeClass(el, COLLAPSE);
el.style.height = 'auto';
var height = window.getComputedStyle(el).height;
el.style.height = null;
addClass(el, COLLAPSING);
el.offsetHeight; // force repaint
el.style.height = height;
this.timeoutId = setTimeout(function () {
removeClass(el, COLLAPSING);
addClass(el, COLLAPSE);
addClass(el, IN);
el.style.height = null;
this$1.timeoutId = 0;
this$1.$emit('shown');
}, this.transition);
} else {
this.$emit('hide');
el.style.height = window.getComputedStyle(el).height;
removeClass(el, IN);
removeClass(el, COLLAPSE);
el.offsetHeight;
el.style.height = null;
addClass(el, COLLAPSING);
this.timeoutId = setTimeout(function () {
addClass(el, COLLAPSE);
removeClass(el, COLLAPSING);
el.style.height = null;
this$1.timeoutId = 0;
this$1.$emit('hidden');
}, this.transition);
}
}
}
};
var script = {
components: { Collapse: Collapse },
props: {
value: Boolean,
fluid: {
type: Boolean,
default: true
},
fixedTop: Boolean,
fixedBottom: Boolean,
staticTop: Boolean,
inverse: Boolean
},
data: function data () {
return {
show: false
}
},
computed: {
navClasses: function navClasses () {
return {
navbar: true,
'navbar-default': !this.inverse,
'navbar-inverse': this.inverse,
'navbar-static-top': this.staticTop,
'navbar-fixed-bottom': this.fixedBottom,
'navbar-fixed-top': this.fixedTop
}
}
},
mounted: function mounted () {
this.show = !!this.value;
},
watch: {
value: function value (v) {
this.show = v;
}
},
methods: {
toggle: function toggle () {
this.show = !this.show;
this.$emit('input', 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.
var 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;
}
var 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
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("nav", { class: _vm.navClasses }, [
_c(
"div",
{ class: _vm.fluid ? "container-fluid" : "container" },
[
_c(
"div",
{ staticClass: "navbar-header" },
[
_vm._t("collapse-btn", [
_c(
"button",
{
staticClass: "navbar-toggle collapsed",
attrs: { type: "button" },
on: { click: _vm.toggle }
},
[
_c("span", { staticClass: "sr-only" }, [
_vm._v("Toggle navigation")
]),
_vm._v(" "),
_c("span", { staticClass: "icon-bar" }),
_vm._v(" "),
_c("span", { staticClass: "icon-bar" }),
_vm._v(" "),
_c("span", { staticClass: "icon-bar" })
]
)
]),
_vm._v(" "),
_vm._t("brand")
],
2
),
_vm._v(" "),
_vm._t("default"),
_vm._v(" "),
_c(
"collapse",
{
staticClass: "navbar-collapse",
model: {
value: _vm.show,
callback: function($$v) {
_vm.show = $$v;
},
expression: "show"
}
},
[_vm._t("collapse")],
2
)
],
2
)
])
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
var __vue_inject_styles__ = undefined;
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* 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
);
export default __vue_component__;
//# sourceMappingURL=Navbar.js.map