buefy
Version:
Lightweight UI components for Vue.js based on Bulma
1,584 lines (1,390 loc) • 336 kB
JavaScript
/*! Buefy v0.8.2 | MIT License | github.com/buefy/buefy */
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) :
typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) :
(global = global || self, factory(global.Buefy = {}, global.Vue));
}(this, function (exports, Vue) { 'use strict';
Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
function _typeof(obj) {
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function (obj) {
return typeof obj;
};
} else {
_typeof = function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
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 _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
}
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
/**
* Get value of an object property/path even if it's nested
*/
function getValueByPath(obj, path) {
var value = path.split('.').reduce(function (o, i) {
return o[i];
}, obj);
return value;
}
/**
* Extension of indexOf method by equality function if specified
*/
function indexOf(array, obj, fn) {
if (!array) return -1;
if (!fn || typeof fn !== 'function') return array.indexOf(obj);
for (var i = 0; i < array.length; i++) {
if (fn(array[i], obj)) {
return i;
}
}
return -1;
}
/**
* Mobile detection
* https://www.abeautifulsite.net/detecting-mobile-devices-with-javascript
*/
var isMobile = {
Android: function Android() {
return typeof window !== 'undefined' && window.navigator.userAgent.match(/Android/i);
},
BlackBerry: function BlackBerry() {
return typeof window !== 'undefined' && window.navigator.userAgent.match(/BlackBerry/i);
},
iOS: function iOS() {
return typeof window !== 'undefined' && window.navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function Opera() {
return typeof window !== 'undefined' && window.navigator.userAgent.match(/Opera Mini/i);
},
Windows: function Windows() {
return typeof window !== 'undefined' && window.navigator.userAgent.match(/IEMobile/i);
},
any: function any() {
return isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows();
}
};
function removeElement(el) {
if (typeof el.remove !== 'undefined') {
el.remove();
} else if (typeof el.parentNode !== 'undefined') {
el.parentNode.removeChild(el);
}
}
var config = {
defaultContainerElement: null,
defaultIconPack: 'mdi',
defaultIconComponent: null,
defaultDialogConfirmText: null,
defaultDialogCancelText: null,
defaultSnackbarDuration: 3500,
defaultSnackbarPosition: null,
defaultToastDuration: 2000,
defaultToastPosition: null,
defaultNotificationDuration: 2000,
defaultNotificationPosition: null,
defaultTooltipType: 'is-primary',
defaultTooltipAnimated: false,
defaultTooltipDelay: 0,
defaultInputAutocomplete: 'on',
defaultDateFormatter: null,
defaultDateParser: null,
defaultDateCreator: null,
defaultDayNames: null,
defaultMonthNames: null,
defaultFirstDayOfWeek: null,
defaultUnselectableDaysOfWeek: null,
defaultTimeFormatter: null,
defaultTimeParser: null,
defaultModalCanCancel: ['escape', 'x', 'outside', 'button'],
defaultModalScroll: null,
defaultDatepickerMobileNative: true,
defaultTimepickerMobileNative: true,
defaultNoticeQueue: true,
defaultInputHasCounter: true,
defaultTaginputHasCounter: true,
defaultUseHtml5Validation: true,
defaultDropdownMobileModal: true,
defaultFieldLabelPosition: null,
defaultDatepickerYearsRange: [-100, 3],
defaultDatepickerNearbyMonthDays: true,
defaultDatepickerNearbySelectableMonthDays: false,
defaultDatepickerShowWeekNumber: false
};
var config$1 = config;
var setOptions = function setOptions(options) {
config = options;
};
var FormElementMixin = {
props: {
size: String,
expanded: Boolean,
loading: Boolean,
rounded: Boolean,
icon: String,
iconPack: String,
// Native options to use in HTML5 validation
autocomplete: String,
maxlength: [Number, String],
useHtml5Validation: {
type: Boolean,
default: function _default() {
return config$1.defaultUseHtml5Validation;
}
},
validationMessage: String
},
data: function data() {
return {
isValid: true,
isFocused: false,
newIconPack: this.iconPack || config$1.defaultIconPack
};
},
computed: {
/**
* Find parent Field, max 3 levels deep.
*/
parentField: function parentField() {
var parent = this.$parent;
for (var i = 0; i < 3; i++) {
if (parent && !parent.$data._isField) {
parent = parent.$parent;
}
}
return parent;
},
/**
* Get the type prop from parent if it's a Field.
*/
statusType: function statusType() {
if (!this.parentField) return;
if (!this.parentField.newType) return;
if (typeof this.parentField.newType === 'string') {
return this.parentField.newType;
} else {
for (var key in this.parentField.newType) {
if (this.parentField.newType[key]) {
return key;
}
}
}
},
/**
* Get the message prop from parent if it's a Field.
*/
statusMessage: function statusMessage() {
if (!this.parentField) return;
return this.parentField.newMessage;
},
/**
* Fix icon size for inputs, large was too big
*/
iconSize: function iconSize() {
switch (this.size) {
case 'is-small':
return this.size;
case 'is-medium':
return;
case 'is-large':
return this.newIconPack === 'mdi' ? 'is-medium' : '';
}
}
},
methods: {
/**
* Focus method that work dynamically depending on the component.
*/
focus: function focus() {
var _this = this;
if (this.$data._elementRef === undefined) return;
this.$nextTick(function () {
var el = _this.$el.querySelector(_this.$data._elementRef);
if (el) el.focus();
});
},
onBlur: function onBlur($event) {
this.isFocused = false;
this.$emit('blur', $event);
this.checkHtml5Validity();
},
onFocus: function onFocus($event) {
this.isFocused = true;
this.$emit('focus', $event);
},
/**
* Check HTML5 validation, set isValid property.
* If validation fail, send 'is-danger' type,
* and error message to parent if it's a Field.
*/
checkHtml5Validity: function checkHtml5Validity() {
var _this2 = this;
if (!this.useHtml5Validation) return;
if (this.$refs[this.$data._elementRef] === undefined) return;
var el = this.$el.querySelector(this.$data._elementRef);
var type = null;
var message = null;
var isValid = true;
if (!el.checkValidity()) {
type = 'is-danger';
message = this.validationMessage || el.validationMessage;
isValid = false;
}
this.isValid = isValid;
this.$nextTick(function () {
if (_this2.parentField) {
// Set type only if not defined
if (!_this2.parentField.type) {
_this2.parentField.newType = type;
} // Set message only if not defined
if (!_this2.parentField.message) {
_this2.parentField.newMessage = message;
}
}
});
return this.isValid;
}
}
};
//
var script = {
name: 'BIcon',
props: {
type: [String, Object],
pack: String,
icon: String,
size: String,
customSize: String,
customClass: String,
both: Boolean // This is used internally to show both MDI and FA icon
},
computed: {
/**
* Internal icon name based on the pack.
* If pack is 'fa', gets the equivalent FA icon name of the MDI,
* internal icons are always MDI.
*/
newIcon: function newIcon() {
return this.newPack === 'mdi' ? "".concat(this.newPack, "-").concat(this.icon) : this.addFAPrefix(this.getEquivalentIconOf(this.icon));
},
newPack: function newPack() {
return this.pack || config$1.defaultIconPack;
},
newType: function newType() {
if (!this.type) return;
var splitType = [];
if (typeof this.type === 'string') {
splitType = this.type.split('-');
} else {
for (var key in this.type) {
if (this.type[key]) {
splitType = key.split('-');
break;
}
}
}
if (splitType.length <= 1) return;
return "has-text-".concat(splitType[1]);
},
newCustomSize: function newCustomSize() {
return this.customSize || this.customSizeByPack;
},
customSizeByPack: function customSizeByPack() {
var defaultSize = this.newPack === 'mdi' ? 'mdi-24px' : this.addFAPrefix('lg');
var mediumSize = this.newPack === 'mdi' ? 'mdi-36px' : this.addFAPrefix('2x');
var largeSize = this.newPack === 'mdi' ? 'mdi-48px' : this.addFAPrefix('3x');
switch (this.size) {
case 'is-small':
return;
case 'is-medium':
return mediumSize;
case 'is-large':
return largeSize;
default:
return defaultSize;
}
},
useIconComponent: function useIconComponent() {
return config$1.defaultIconComponent;
}
},
methods: {
addFAPrefix: function addFAPrefix(value) {
if (this.useIconComponent) {
return value;
}
return "fa-".concat(value);
},
/**
* Equivalent FA icon name of the MDI.
*/
getEquivalentIconOf: function getEquivalentIconOf(value) {
// Only transform the class if the both prop is set to true
if (!this.both) {
return value;
}
switch (value) {
case 'check':
return 'check';
case 'information':
return 'info-circle';
case 'check-circle':
return 'check-circle';
case 'alert':
return 'exclamation-triangle';
case 'alert-circle':
return 'exclamation-circle';
case 'arrow-up':
return 'arrow-up';
case 'chevron-right':
return 'angle-right';
case 'chevron-left':
return 'angle-left';
case 'chevron-down':
return 'angle-down';
case 'eye':
return 'eye';
case 'eye-off':
return 'eye-slash';
case 'menu-down':
return 'caret-down';
case 'menu-up':
return 'caret-up';
default:
return value;
}
}
}
};
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 hook(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 () {
style.call(this, createInjectorShadow(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;
}
var normalizeComponent_1 = normalizeComponent;
/* 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('span',{staticClass:"icon",class:[_vm.newType, _vm.size]},[(!_vm.useIconComponent)?_c('i',{class:[_vm.newPack, _vm.newIcon, _vm.newCustomSize, _vm.customClass]}):_c(_vm.useIconComponent,{tag:"component",class:[_vm.customClass],attrs:{"icon":[_vm.newPack, _vm.newIcon],"size":_vm.newCustomSize}})],1)};
var __vue_staticRenderFns__ = [];
/* style */
const __vue_inject_styles__ = undefined;
/* scoped */
const __vue_scope_id__ = undefined;
/* module identifier */
const __vue_module_identifier__ = undefined;
/* functional template */
const __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
var Icon = normalizeComponent_1(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
undefined,
undefined
);
var script$1 = {
name: 'BInput',
components: _defineProperty({}, Icon.name, Icon),
mixins: [FormElementMixin],
inheritAttrs: false,
props: {
value: [Number, String],
type: {
type: String,
default: 'text'
},
passwordReveal: Boolean,
hasCounter: {
type: Boolean,
default: function _default() {
return config$1.defaultInputHasCounter;
}
},
customClass: {
type: String,
default: ''
}
},
data: function data() {
return {
newValue: this.value,
newType: this.type,
newAutocomplete: this.autocomplete || config$1.defaultInputAutocomplete,
isPasswordVisible: false,
_elementRef: this.type === 'textarea' ? 'textarea' : 'input'
};
},
computed: {
computedValue: {
get: function get() {
return this.newValue;
},
set: function set(value) {
this.newValue = value;
this.$emit('input', value);
!this.isValid && this.checkHtml5Validity();
}
},
rootClasses: function rootClasses() {
return [this.iconPosition, this.size, {
'is-expanded': this.expanded,
'is-loading': this.loading,
'is-clearfix': !this.hasMessage
}];
},
inputClasses: function inputClasses() {
return [this.statusType, this.size, {
'is-rounded': this.rounded
}];
},
hasIconRight: function hasIconRight() {
return this.passwordReveal || this.loading || this.statusTypeIcon;
},
/**
* Position of the icon or if it's both sides.
*/
iconPosition: function iconPosition() {
if (this.icon && this.hasIconRight) {
return 'has-icons-left has-icons-right';
} else if (!this.icon && this.hasIconRight) {
return 'has-icons-right';
} else if (this.icon) {
return 'has-icons-left';
}
},
/**
* Icon name (MDI) based on the type.
*/
statusTypeIcon: function statusTypeIcon() {
switch (this.statusType) {
case 'is-success':
return 'check';
case 'is-danger':
return 'alert-circle';
case 'is-info':
return 'information';
case 'is-warning':
return 'alert';
}
},
/**
* Check if have any message prop from parent if it's a Field.
*/
hasMessage: function hasMessage() {
return !!this.statusMessage;
},
/**
* Current password-reveal icon name.
*/
passwordVisibleIcon: function passwordVisibleIcon() {
return !this.isPasswordVisible ? 'eye' : 'eye-off';
},
/**
* Get value length
*/
valueLength: function valueLength() {
if (typeof this.computedValue === 'string') {
return this.computedValue.length;
} else if (typeof this.computedValue === 'number') {
return this.computedValue.toString().length;
}
return 0;
}
},
watch: {
/**
* When v-model is changed:
* 1. Set internal value.
*/
value: function value(_value) {
this.newValue = _value;
}
},
methods: {
/**
* Toggle the visibility of a password-reveal input
* by changing the type and focus the input right away.
*/
togglePasswordVisibility: function togglePasswordVisibility() {
var _this = this;
this.isPasswordVisible = !this.isPasswordVisible;
this.newType = this.isPasswordVisible ? 'text' : 'password';
this.$nextTick(function () {
_this.$refs.input.focus();
});
},
/**
* Input's 'input' event listener, 'nextTick' is used to prevent event firing
* before ui update, helps when using masks (Cleavejs and potentially others).
*/
onInput: function onInput(event) {
var _this2 = this;
this.$nextTick(function () {
if (event.target) {
_this2.computedValue = event.target.value;
}
});
}
}
};
/* script */
const __vue_script__$1 = script$1;
/* template */
var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"control",class:_vm.rootClasses},[(_vm.type !== 'textarea')?_c('input',_vm._b({ref:"input",staticClass:"input",class:[_vm.inputClasses, _vm.customClass],attrs:{"type":_vm.newType,"autocomplete":_vm.newAutocomplete,"maxlength":_vm.maxlength},domProps:{"value":_vm.computedValue},on:{"input":_vm.onInput,"blur":_vm.onBlur,"focus":_vm.onFocus}},'input',_vm.$attrs,false)):_c('textarea',_vm._b({ref:"textarea",staticClass:"textarea",class:[_vm.inputClasses, _vm.customClass],attrs:{"maxlength":_vm.maxlength},domProps:{"value":_vm.computedValue},on:{"input":_vm.onInput,"blur":_vm.onBlur,"focus":_vm.onFocus}},'textarea',_vm.$attrs,false)),_vm._v(" "),(_vm.icon)?_c('b-icon',{staticClass:"is-left",attrs:{"icon":_vm.icon,"pack":_vm.iconPack,"size":_vm.iconSize}}):_vm._e(),_vm._v(" "),(!_vm.loading && (_vm.passwordReveal || _vm.statusTypeIcon))?_c('b-icon',{staticClass:"is-right",class:{ 'is-clickable': _vm.passwordReveal },attrs:{"icon":_vm.passwordReveal ? _vm.passwordVisibleIcon : _vm.statusTypeIcon,"pack":_vm.iconPack,"size":_vm.iconSize,"type":!_vm.passwordReveal ? _vm.statusType : 'is-primary',"both":""},nativeOn:{"click":function($event){_vm.togglePasswordVisibility($event);}}}):_vm._e(),_vm._v(" "),(_vm.maxlength && _vm.hasCounter && _vm.type !== 'number')?_c('small',{staticClass:"help counter",class:{ 'is-invisible': !_vm.isFocused }},[_vm._v("\n "+_vm._s(_vm.valueLength)+" / "+_vm._s(_vm.maxlength)+"\n ")]):_vm._e()],1)};
var __vue_staticRenderFns__$1 = [];
/* style */
const __vue_inject_styles__$1 = undefined;
/* scoped */
const __vue_scope_id__$1 = undefined;
/* module identifier */
const __vue_module_identifier__$1 = undefined;
/* functional template */
const __vue_is_functional_template__$1 = false;
/* style inject */
/* style inject SSR */
var Input = normalizeComponent_1(
{ 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,
undefined,
undefined
);
var script$2 = {
name: 'BAutocomplete',
components: _defineProperty({}, Input.name, Input),
mixins: [FormElementMixin],
inheritAttrs: false,
props: {
value: [Number, String],
data: {
type: Array,
default: function _default() {
return [];
}
},
field: {
type: String,
default: 'value'
},
keepFirst: Boolean,
clearOnSelect: Boolean,
openOnFocus: Boolean,
customFormatter: Function
},
data: function data() {
return {
selected: null,
hovered: null,
isActive: false,
newValue: this.value,
newAutocomplete: this.autocomplete || 'off',
isListInViewportVertically: true,
hasFocus: false,
_isAutocomplete: true,
_elementRef: 'input'
};
},
computed: {
/**
* White-listed items to not close when clicked.
* Add input, dropdown and all children.
*/
whiteList: function whiteList() {
var whiteList = [];
whiteList.push(this.$refs.input.$el.querySelector('input'));
whiteList.push(this.$refs.dropdown); // Add all chidren from dropdown
if (this.$refs.dropdown !== undefined) {
var children = this.$refs.dropdown.querySelectorAll('*');
var _iteratorNormalCompletion = true;
var _didIteratorError = false;
var _iteratorError = undefined;
try {
for (var _iterator = children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
var child = _step.value;
whiteList.push(child);
}
} catch (err) {
_didIteratorError = true;
_iteratorError = err;
} finally {
try {
if (!_iteratorNormalCompletion && _iterator.return != null) {
_iterator.return();
}
} finally {
if (_didIteratorError) {
throw _iteratorError;
}
}
}
}
return whiteList;
},
/**
* Check if exists default slot
*/
hasDefaultSlot: function hasDefaultSlot() {
return !!this.$scopedSlots.default;
},
/**
* Check if exists "empty" slot
*/
hasEmptySlot: function hasEmptySlot() {
return !!this.$slots.empty;
},
/**
* Check if exists "header" slot
*/
hasHeaderSlot: function hasHeaderSlot() {
return !!this.$slots.header;
},
/**
* Check if exists "footer" slot
*/
hasFooterSlot: function hasFooterSlot() {
return !!this.$slots.footer;
}
},
watch: {
/**
* When dropdown is toggled, check the visibility to know when
* to open upwards.
*/
isActive: function isActive(active) {
var _this = this;
if (active) {
this.calcDropdownInViewportVertical();
} else {
this.$nextTick(function () {
return _this.setHovered(null);
}); // Timeout to wait for the animation to finish before recalculating
setTimeout(function () {
_this.calcDropdownInViewportVertical();
}, 100);
}
},
/**
* When updating input's value
* 1. Emit changes
* 2. If value isn't the same as selected, set null
* 3. Close dropdown if value is clear or else open it
*/
newValue: function newValue(value) {
this.$emit('input', value); // Check if selected is invalid
var currentValue = this.getValue(this.selected);
if (currentValue && currentValue !== value) {
this.setSelected(null, false);
} // Close dropdown if input is clear or else open it
if (this.hasFocus && (!this.openOnFocus || value)) {
this.isActive = !!value;
}
},
/**
* When v-model is changed:
* 1. Update internal value.
* 2. If it's invalid, validate again.
*/
value: function value(_value) {
this.newValue = _value;
!this.isValid && this.$refs.input.checkHtml5Validity();
},
/**
* Select first option if "keep-first
*/
data: function data(value) {
// Keep first option always pre-selected
if (this.keepFirst) {
this.selectFirstOption(value);
}
}
},
methods: {
/**
* Set which option is currently hovered.
*/
setHovered: function setHovered(option) {
if (option === undefined) return;
this.hovered = option;
},
/**
* Set which option is currently selected, update v-model,
* update input value and close dropdown.
*/
setSelected: function setSelected(option) {
var _this2 = this;
var closeDropdown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
if (option === undefined) return;
this.selected = option;
this.$emit('select', this.selected);
if (this.selected !== null) {
this.newValue = this.clearOnSelect ? '' : this.getValue(this.selected);
}
closeDropdown && this.$nextTick(function () {
_this2.isActive = false;
});
},
/**
* Select first option
*/
selectFirstOption: function selectFirstOption(options) {
var _this3 = this;
this.$nextTick(function () {
if (options.length) {
// If has visible data or open on focus, keep updating the hovered
if (_this3.openOnFocus || _this3.newValue !== '' && _this3.hovered !== options[0]) {
_this3.setHovered(options[0]);
}
} else {
_this3.setHovered(null);
}
});
},
/**
* Enter key listener.
* Select the hovered option.
*/
enterPressed: function enterPressed() {
if (this.hovered === null) return;
this.setSelected(this.hovered);
},
/**
* Tab key listener.
* Select hovered option if it exists, close dropdown, then allow
* native handling to move to next tabbable element.
*/
tabPressed: function tabPressed() {
if (this.hovered === null) {
this.isActive = false;
return;
}
this.setSelected(this.hovered);
},
/**
* Close dropdown if clicked outside.
*/
clickedOutside: function clickedOutside(event) {
if (this.whiteList.indexOf(event.target) < 0) this.isActive = false;
},
/**
* Return display text for the input.
* If object, get value from path, or else just the value.
*/
getValue: function getValue(option) {
if (!option) return;
if (typeof this.customFormatter !== 'undefined') {
return this.customFormatter(option);
}
return _typeof(option) === 'object' ? getValueByPath(option, this.field) : option;
},
/**
* Calculate if the dropdown is vertically visible when activated,
* otherwise it is openened upwards.
*/
calcDropdownInViewportVertical: function calcDropdownInViewportVertical() {
var _this4 = this;
this.$nextTick(function () {
/**
* this.$refs.dropdown may be undefined
* when Autocomplete is conditional rendered
*/
if (_this4.$refs.dropdown === undefined) return;
var rect = _this4.$refs.dropdown.getBoundingClientRect();
_this4.isListInViewportVertically = rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
});
},
/**
* Arrows keys listener.
* If dropdown is active, set hovered option, or else just open.
*/
keyArrows: function keyArrows(direction) {
var sum = direction === 'down' ? 1 : -1;
if (this.isActive) {
var index = this.data.indexOf(this.hovered) + sum;
index = index > this.data.length - 1 ? this.data.length : index;
index = index < 0 ? 0 : index;
this.setHovered(this.data[index]);
var list = this.$refs.dropdown.querySelector('.dropdown-content');
var element = list.querySelectorAll('a.dropdown-item:not(.is-disabled)')[index];
if (!element) return;
var visMin = list.scrollTop;
var visMax = list.scrollTop + list.clientHeight - element.clientHeight;
if (element.offsetTop < visMin) {
list.scrollTop = element.offsetTop;
} else if (element.offsetTop >= visMax) {
list.scrollTop = element.offsetTop - list.clientHeight + element.clientHeight;
}
} else {
this.isActive = true;
}
},
/**
* Focus listener.
* If value is the same as selected, select all text.
*/
focused: function focused(event) {
if (this.getValue(this.selected) === this.newValue) {
this.$el.querySelector('input').select();
}
if (this.openOnFocus) {
this.isActive = true;
if (this.keepFirst) {
this.selectFirstOption(this.data);
}
}
this.hasFocus = true;
this.$emit('focus', event);
},
/**
* Blur listener.
*/
onBlur: function onBlur(event) {
this.hasFocus = false;
this.$emit('blur', event);
},
onInput: function onInput(event) {
var currentValue = this.getValue(this.selected);
if (currentValue && currentValue === this.newValue) return;
this.$emit('typing', this.newValue);
}
},
created: function created() {
if (typeof window !== 'undefined') {
document.addEventListener('click', this.clickedOutside);
window.addEventListener('resize', this.calcDropdownInViewportVertical);
}
},
beforeDestroy: function beforeDestroy() {
if (typeof window !== 'undefined') {
document.removeEventListener('click', this.clickedOutside);
window.removeEventListener('resize', this.calcDropdownInViewportVertical);
}
}
};
/* script */
const __vue_script__$2 = script$2;
/* template */
var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"autocomplete control",class:{'is-expanded': _vm.expanded}},[_c('b-input',_vm._b({ref:"input",attrs:{"type":"text","size":_vm.size,"loading":_vm.loading,"rounded":_vm.rounded,"icon":_vm.icon,"icon-pack":_vm.iconPack,"maxlength":_vm.maxlength,"autocomplete":_vm.newAutocomplete,"use-html5-validation":_vm.useHtml5Validation},on:{"input":_vm.onInput,"focus":_vm.focused,"blur":_vm.onBlur},nativeOn:{"keyup":function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"esc",27,$event.key)){ return null; }$event.preventDefault();_vm.isActive = false;},"keydown":[function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"tab",9,$event.key)){ return null; }_vm.tabPressed($event);},function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key)){ return null; }$event.preventDefault();_vm.enterPressed($event);},function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"up",38,$event.key)){ return null; }$event.preventDefault();_vm.keyArrows('up');},function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"down",40,$event.key)){ return null; }$event.preventDefault();_vm.keyArrows('down');}]},model:{value:(_vm.newValue),callback:function ($$v) {_vm.newValue=$$v;},expression:"newValue"}},'b-input',_vm.$attrs,false)),_vm._v(" "),_c('transition',{attrs:{"name":"fade"}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isActive && (_vm.data.length > 0 || _vm.hasEmptySlot || _vm.hasHeaderSlot)),expression:"isActive && (data.length > 0 || hasEmptySlot || hasHeaderSlot)"}],ref:"dropdown",staticClass:"dropdown-menu",class:{ 'is-opened-top': !_vm.isListInViewportVertically }},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isActive),expression:"isActive"}],staticClass:"dropdown-content"},[(_vm.hasHeaderSlot)?_c('div',{staticClass:"dropdown-item"},[_vm._t("header")],2):_vm._e(),_vm._v(" "),_vm._l((_vm.data),function(option,index){return _c('a',{key:index,staticClass:"dropdown-item",class:{ 'is-hovered': option === _vm.hovered },on:{"click":function($event){_vm.setSelected(option);}}},[(_vm.hasDefaultSlot)?_vm._t("default",null,{option:option,index:index}):_c('span',[_vm._v("\n "+_vm._s(_vm.getValue(option, true))+"\n ")])],2)}),_vm._v(" "),(_vm.data.length === 0 && _vm.hasEmptySlot)?_c('div',{staticClass:"dropdown-item is-disabled"},[_vm._t("empty")],2):_vm._e(),_vm._v(" "),(_vm.hasFooterSlot)?_c('div',{staticClass:"dropdown-item"},[_vm._t("footer")],2):_vm._e()],2)])])],1)};
var __vue_staticRenderFns__$2 = [];
/* style */
const __vue_inject_styles__$2 = undefined;
/* scoped */
const __vue_scope_id__$2 = undefined;
/* module identifier */
const __vue_module_identifier__$2 = undefined;
/* functional template */
const __vue_is_functional_template__$2 = false;
/* style inject */
/* style inject SSR */
var Autocomplete = normalizeComponent_1(
{ 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,
undefined,
undefined
);
var use = function use(plugin) {
if (typeof window !== 'undefined' && window.Vue) {
window.Vue.use(plugin);
}
};
var registerComponent = function registerComponent(Vue, component) {
Vue.component(component.name, component);
};
var registerComponentProgrammatic = function registerComponentProgrammatic(Vue, property, component) {
if (!Vue.prototype.$buefy) Vue.prototype.$buefy = {};
Vue.prototype.$buefy[property] = component;
};
var Plugin = {
install: function install(Vue) {
registerComponent(Vue, Autocomplete);
}
};
use(Plugin);
var script$3 = {
name: 'BButton',
components: _defineProperty({}, Icon.name, Icon),
inheritAttrs: false,
props: {
type: [String, Object],
size: String,
label: String,
iconPack: String,
iconLeft: String,
iconRight: String,
rounded: Boolean,
loading: Boolean,
outlined: Boolean,
inverted: Boolean,
focused: Boolean,
active: Boolean,
hovered: Boolean,
selected: Boolean,
nativeType: {
type: String,
default: 'button',
validator: function validator(value) {
return ['button', 'submit', 'reset'].indexOf(value) >= 0;
}
},
tag: {
type: String,
default: 'button',
validator: function validator(value) {
return ['button', 'a', 'input', 'router-link', 'nuxt-link', 'n-link', 'NuxtLink', 'NLink'].indexOf(value) >= 0;
}
}
},
computed: {
iconSize: function iconSize() {
if (!this.size || this.size === 'is-medium') {
return 'is-small';
} else if (this.size === 'is-large') {
return 'is-medium';
}
return this.size;
}
}
};
/* script */
const __vue_script__$3 = script$3;
/* template */
var __vue_render__$3 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.tag,_vm._b({tag:"component",staticClass:"button",class:[_vm.size, _vm.type, {
'is-rounded': _vm.rounded,
'is-loading': _vm.loading,
'is-outlined': _vm.outlined,
'is-inverted': _vm.inverted,
'is-focused': _vm.focused,
'is-active': _vm.active,
'is-hovered': _vm.hovered,
'is-selected': _vm.selected
}],attrs:{"type":_vm.nativeType},on:{"click":function($event){_vm.$emit('click', $event);}}},'component',_vm.$attrs,false),[(_vm.iconLeft)?_c('b-icon',{attrs:{"pack":_vm.iconPack,"icon":_vm.iconLeft,"size":_vm.iconSize}}):_vm._e(),_vm._v(" "),(_vm.label)?_c('span',[_vm._v(_vm._s(_vm.label))]):(_vm.$slots.default)?_c('span',[_vm._t("default")],2):_vm._e(),_vm._v(" "),(_vm.iconRight)?_c('b-icon',{attrs:{"pack":_vm.iconPack,"icon":_vm.iconRight,"size":_vm.iconSize}}):_vm._e()],1)};
var __vue_staticRenderFns__$3 = [];
/* style */
const __vue_inject_styles__$3 = undefined;
/* scoped */
const __vue_scope_id__$3 = undefined;
/* module identifier */
const __vue_module_identifier__$3 = undefined;
/* functional template */
const __vue_is_functional_template__$3 = false;
/* style inject */
/* style inject SSR */
var Button = normalizeComponent_1(
{ 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,
undefined,
undefined
);
var Plugin$1 = {
install: function install(Vue) {
registerComponent(Vue, Button);
}
};
use(Plugin$1);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var script$4 = {
name: 'BCheckbox',
props: {
value: [String, Number, Boolean, Function, Object, Array],
nativeValue: [String, Number, Boolean, Function, Object, Array],
indeterminate: Boolean,
type: String,
disabled: Boolean,
required: Boolean,
name: String,
size: String,
trueValue: {
type: [String, Number, Boolean, Function, Object, Array],
default: true
},
falseValue: {
type: [String, Number, Boolean, Function, Object, Array],
default: false
}
},
data: function data() {
return {
newValue: this.value
};
},
computed: {
computedValue: {
get: function get() {
return this.newValue;
},
set: function set(value) {
this.newValue = value;
this.$emit('input', value);
}
}
},
watch: {
/**
* When v-model change, set internal value.
*/
value: function value(_value) {
this.newValue = _value;
}
},
methods: {
focus: function focus() {
// MacOS FireFox and Safari do not focus when clicked
this.$refs.input.focus();
}
}
};
/* script */
const __vue_script__$4 = script$4;
/* template */
var __vue_render__$4 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('label',{ref:"label",staticClass:"b-checkbox checkbox",class:[_vm.size, { 'is-disabled': _vm.disabled }],attrs:{"disabled":_vm.disabled},on:{"click":_vm.focus,"keydown":function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key)){ return null; }$event.preventDefault();_vm.$refs.label.click();}}},[_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.computedValue),expression:"computedValue"}],ref:"input",attrs:{"type":"checkbox","disabled":_vm.disabled,"required":_vm.required,"name":_vm.name,"true-value":_vm.trueValue,"false-value":_vm.falseValue},domProps:{"indeterminate":_vm.indeterminate,"value":_vm.nativeValue,"checked":Array.isArray(_vm.computedValue)?_vm._i(_vm.computedValue,_vm.nativeValue)>-1:_vm._q(_vm.computedValue,_vm.trueValue)},on:{"click":function($event){$event.stopPropagation();},"change":function($event){var $$a=_vm.computedValue,$$el=$event.target,$$c=$$el.checked?(_vm.trueValue):(_vm.falseValue);if(Array.isArray($$a)){var $$v=_vm.nativeValue,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.computedValue=$$a.concat([$$v]));}else{$$i>-1&&(_vm.computedValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else{_vm.computedValue=$$c;}}}}),_vm._v(" "),_c('span',{staticClass:"check",class:_vm.type}),_vm._v(" "),_c('span',{staticClass:"control-label"},[_vm._t("default")],2)])};
var __vue_staticRenderFns__$4 = [];
/* style */
const __vue_inject_styles__$4 = undefined;
/* scoped */
const __vue_scope_id__$4 = undefined;
/* module identifier */
const __vue_module_identifier__$4 = undefined;
/* functional template */
const __vue_is_functional_template__$4 = false;
/* style inject */
/* style inject SSR */
var Checkbox = normalizeComponent_1(
{ render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
__vue_inject_styles__$4,
__vue_script__$4,
__vue_scope_id__$4,
__vue_is_functional_template__$4,
__vue_module_identifier__$4,
undefined,
undefined
);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var script$5 = {
name: 'BCheckboxButton',
props: {
value: [String, Number, Boolean, Function, Object, Array],
nativeValue: [String, Number, Boolean, Function, Object, Array],
disabled: Boolean,
required: Boolean,
name: String,
size: String,
type: {
type: String,
default: 'is-primary'
}
},
data: function data() {
return {
newValue: this.value,
isFocused: false
};
},
computed: {
computedValue: {
get: function get() {
return this.newValue;
},
set: function set(value) {
this.newValue = value;
this.$emit('input', value);
}
},
checked: function checked() {
if (Array.isArray(this.newValue)) {
return this.newValue.indexOf(this.nativeValue) >= 0;
}
return this.newValue === this.nativeValue;
}
},
watch: {
/**
* When v-model change, set internal value.
*/
value: function value(_value) {
this.newValue = _value;
}
},
methods: {
focus: function focus() {
// MacOS FireFox and Safari do not focus when clicked
this.$refs.input.focus();
}
}
};
/* script */
const __vue_script__$5 = script$5;
/* template */
var __vue_render__$5 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"control"},[_c('label',{ref:"label",staticClass:"b-checkbox checkbox button",class:[_vm.checked ? _vm.type : null, _vm.size, {
'is-disabled': _vm.disabled,
'is-focused': _vm.isFocused
}],attrs:{"disabled":_vm.disabled},on:{"click":_vm.focus,"keydown":function($event){if(!('button' in $event)&&_vm._k($event.keyCode,"enter",13,$event.key)){ return null; }$event.preventDefault();_vm.$refs.label.click();}}},[_vm._t("default"),_vm._v(" "),_c('input',{directives:[{name:"model",rawName:"v-model",value:(_vm.computedValue),expression:"computedValue"}],ref:"input",attrs:{"type":"checkbox","disabled":_vm.disabled,"required":_vm.required,"name":_vm.name},domProps:{"value":_vm.nativeValue,"checked":Array.isArray(_vm.computedValue)?_vm._i(_vm.computedValue,_vm.nativeValue)>-1:(_vm.computedValue)},on:{"click":function($event){$event.stopPropagation();},"focus":function($event){_vm.isFocused = true;},"blur":function($event){_vm.isFocused = false;},"change":function($event){var $$a=_vm.computedValue,$$el=$event.target,$$c=$$el.checked?(true):(false);if(Array.isArray($$a)){var $$v=_vm.nativeValue,$$i=_vm._i($$a,$$v);if($$el.checked){$$i<0&&(_vm.computedValue=$$a.concat([$$v]));}else{$$i>-1&&(_vm.computedValue=$$a.slice(0,$$i).concat($$a.slice($$i+1)));}}else{_vm.computedValue=$$c;}}}})],2)])};
var __vue_staticRenderFns__$5 = [];
/* style */
const __vue_inject_styles__$5 = undefined;
/* scoped */
const __vue_scope_id__$5 = undefined;
/* module identifier */
const __vue_module_identifier__$5 = undefined;
/* functional template */
const __vue_is_functional_template__$5 = false;
/* style inject */
/* style inject SSR */
var CheckboxButton = normalizeComponent_1(
{ render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 },
__vue_inject_styles__$5,
__vue_script__$5,
__vue_scope_id__$5,
__vue_is_functional_template__$5,
__vue_module_identifier__$5,
undefined,
undefined
);
var Plugin$2 = {
install: function install(Vue) {
registerComponent(Vue, Checkbox);
registerComponent(Vue, CheckboxButton);
}
};
use(Plugin$2);
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var script$6 = {
name: 'BCollapse',
props: {
open: {
type: Boolean,
default: true
},
animation: {
type: String,
default: 'fade'
},
ariaId: {
type: String,
default: ''
}
},
data: function data() {
return {
isOpen: this.open
};
},
watch: {
open: function open(value) {
this.isOpen = value;
}
},
methods: {
/**
* Toggle and emit events
*/
toggle: function toggle() {
this.isOpen = !this.isOpen;
this.$emit('update:open', this.isOpen);
this.$emit(this.isOpen ? 'open' : 'close');
}
}
};
/* script */
const __vue_script__$6 = script$6;
/* template */
var __vue_render__$6 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"collapse"},[_c('div',{staticClass:"collapse-trigger",on:{"click":_vm.toggle}},[_vm._t("trigger",null,{open:_vm.isOpen})],2),_vm._v(" "),_c('transition',{attrs:{"name":_vm.animation}},[_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.isOpen),expression:"isOpen"}],staticClass:"collapse-content",attrs:{"id":_vm.ariaId,"aria-expanded":_vm.isOpen}},[_vm._t("default")],2)])],1)};
var __vue_staticRenderFns__$6 = [];
/* style */
const __vue_inject_styles__$6 = undefined;
/* scoped */
const __vue_scope_id__$6 = undefined;
/* module identifier */
const __vue_module_identifier__$6 = undefined;
/* functional template */
const __vue_is_functional_template__$6 = false;
/* style inject */
/* style inject SSR */
var Collapse = normalizeComponent_1(
{ render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 },
__vue_inject_styles__$6,
__vue_script__$6,
__vue_scope_id__$6,
__vue_is_functional_template__$6,
__vue_module_identifier__$6,
undefined,
undefined
);
var Plugin$3 = {
install: function install(Vue) {
registerComponent(Vue, Collapse);
}
};
use(Plugin$3);
var AM = 'AM';
var PM = 'PM';
var HOUR_FORMAT_24 = '24';
var HOUR_FORMAT_12 = '12';
var defaultTi