buefy
Version:
Lightweight UI components for Vue.js based on Bulma
1,603 lines (1,411 loc) • 64.9 kB
JavaScript
/*! Buefy v0.8.2 | MIT License | github.com/buefy/buefy */
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = global || self, factory(global.Table = {}));
}(this, function (exports) { 'use strict';
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;
}
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var script = {
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();
}
}
};
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('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__ = [];
/* 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 Checkbox = 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 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 script$1 = {
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;
}
}
}
};
/* 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('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__$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 Icon = 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: 'BPagination',
components: _defineProperty({}, Icon.name, Icon),
props: {
total: [Number, String],
perPage: {
type: [Number, String],
default: 20
},
current: {
type: [Number, String],
default: 1
},
rangeBefore: {
type: [Number, String],
default: 1
},
rangeAfter: {
type: [Number, String],
default: 1
},
size: String,
simple: Boolean,
rounded: Boolean,
order: String,
iconPack: String,
ariaNextLabel: String,
ariaPreviousLabel: String,
ariaPageLabel: String,
ariaCurrentLabel: String
},
computed: {
rootClasses: function rootClasses() {
return [this.order, this.size, {
'is-simple': this.simple,
'is-rounded': this.rounded
}];
},
beforeCurrent: function beforeCurrent() {
return parseInt(this.rangeBefore);
},
afterCurrent: function afterCurrent() {
return parseInt(this.rangeAfter);
},
/**
* Total page size (count).
*/
pageCount: function pageCount() {
return Math.ceil(this.total / this.perPage);
},
/**
* First item of the page (count).
*/
firstItem: function firstItem() {
var firstItem = this.current * this.perPage - this.perPage + 1;
return firstItem >= 0 ? firstItem : 0;
},
/**
* Check if previous button is available.
*/
hasPrev: function hasPrev() {
return this.current > 1;
},
/**
* Check if first page button should be visible.
*/
hasFirst: function hasFirst() {
return this.current >= 2 + this.beforeCurrent;
},
/**
* Check if first ellipsis should be visible.
*/
hasFirstEllipsis: function hasFirstEllipsis() {
return this.current >= this.beforeCurrent + 4;
},
/**
* Check if last page button should be visible.
*/
hasLast: function hasLast() {
return this.current <= this.pageCount - (1 + this.afterCurrent);
},
/**
* Check if last ellipsis should be visible.
*/
hasLastEllipsis: function hasLastEllipsis() {
return this.current < this.pageCount - (2 + this.afterCurrent);
},
/**
* Check if next button is available.
*/
hasNext: function hasNext() {
return this.current < this.pageCount;
},
/**
* Get near pages, 1 before and 1 after the current.
* Also add the click event to the array.
*/
pagesInRange: function pagesInRange() {
var _this = this;
if (this.simple) return;
var left = Math.max(1, this.current - this.beforeCurrent);
if (left - 1 === 2) {
left--; // Do not show the ellipsis if there is only one to hide
}
var right = Math.min(this.current + this.afterCurrent, this.pageCount);
if (this.pageCount - right === 2) {
right++; // Do not show the ellipsis if there is only one to hide
}
var pages = [];
var _loop = function _loop(i) {
pages.push({
number: i,
isCurrent: _this.current === i,
click: function click(event) {
if (_this.current === i) return;
_this.$emit('change', i);
_this.$emit('update:current', i); // Set focus on element to keep tab order
_this.$nextTick(function () {
return event.target.focus();
});
}
});
};
for (var i = left; i <= right; i++) {
_loop(i);
}
return pages;
}
},
watch: {
/**
* If current page is trying to be greater than page count, set to last.
*/
pageCount: function pageCount(value) {
if (this.current > value) this.last();
}
},
methods: {
/**
* Previous button click listener.
*/
prev: function prev() {
if (!this.hasPrev) return;
this.$emit('change', this.current - 1);
this.$emit('update:current', this.current - 1);
},
/**
* First button click listener.
*/
first: function first() {
this.$emit('change', 1);
this.$emit('update:current', 1);
},
/**
* Last button click listener.
*/
last: function last() {
this.$emit('change', this.pageCount);
this.$emit('update:current', this.pageCount);
},
/**
* Next button click listener.
*/
next: function next() {
if (!this.hasNext) return;
this.$emit('change', this.current + 1);
this.$emit('update:current', this.current + 1);
},
/**
* Get text for aria-label according to page number.
*/
getAriaPageLabel: function getAriaPageLabel(pageNumber, isCurrent) {
if (this.ariaPageLabel && (!isCurrent || !this.ariaCurrentLabel)) {
return this.ariaPageLabel + ' ' + pageNumber + '.';
} else if (this.ariaPageLabel && isCurrent && this.ariaCurrentLabel) {
return this.ariaCurrentLabel + ', ' + this.ariaPageLabel + ' ' + pageNumber + '.';
}
return null;
}
}
};
/* 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('nav',{staticClass:"pagination",class:_vm.rootClasses},[_c('a',{staticClass:"pagination-previous",attrs:{"role":"button","href":"#","disabled":!_vm.hasPrev,"aria-label":_vm.ariaPreviousLabel},on:{"click":function($event){$event.preventDefault();_vm.prev($event);}}},[_c('b-icon',{attrs:{"icon":"chevron-left","pack":_vm.iconPack,"both":"","aria-hidden":"true"}})],1),_vm._v(" "),_c('a',{staticClass:"pagination-next",attrs:{"role":"button","href":"#","disabled":!_vm.hasNext,"aria-label":_vm.ariaNextLabel},on:{"click":function($event){$event.preventDefault();_vm.next($event);}}},[_c('b-icon',{attrs:{"icon":"chevron-right","pack":_vm.iconPack,"both":"","aria-hidden":"true"}})],1),_vm._v(" "),(!_vm.simple)?_c('ul',{staticClass:"pagination-list"},[(_vm.hasFirst)?_c('li',[_c('a',{staticClass:"pagination-link",attrs:{"role":"button","href":"#","aria-label":_vm.getAriaPageLabel(1, false)},on:{"click":function($event){$event.preventDefault();_vm.first($event);}}},[_vm._v("\n 1\n ")])]):_vm._e(),_vm._v(" "),(_vm.hasFirstEllipsis)?_c('li',[_c('span',{staticClass:"pagination-ellipsis"},[_vm._v("…")])]):_vm._e(),_vm._v(" "),_vm._l((_vm.pagesInRange),function(page){return _c('li',{key:page.number},[_c('a',{staticClass:"pagination-link",class:{ 'is-current': page.isCurrent },attrs:{"role":"button","href":"#","aria-label":_vm.getAriaPageLabel(page.number, page.isCurrent),"aria-current":page.isCurrent},on:{"click":function($event){$event.preventDefault();page.click($event);}}},[_vm._v("\n "+_vm._s(page.number)+"\n ")])])}),_vm._v(" "),(_vm.hasLastEllipsis)?_c('li',[_c('span',{staticClass:"pagination-ellipsis"},[_vm._v("…")])]):_vm._e(),_vm._v(" "),(_vm.hasLast)?_c('li',[_c('a',{staticClass:"pagination-link",attrs:{"role":"button","href":"#","aria-label":_vm.getAriaPageLabel(_vm.pageCount, false)},on:{"click":function($event){$event.preventDefault();_vm.last($event);}}},[_vm._v("\n "+_vm._s(_vm.pageCount)+"\n ")])]):_vm._e()],2):_vm._e(),_vm._v(" "),(_vm.simple)?_c('small',{staticClass:"info"},[(_vm.perPage == 1)?[_vm._v("\n "+_vm._s(_vm.firstItem)+" / "+_vm._s(_vm.total)+"\n ")]:[_vm._v("\n "+_vm._s(_vm.firstItem)+"-"+_vm._s(Math.min(_vm.current * _vm.perPage, _vm.total))+" / "+_vm._s(_vm.total)+"\n ")]],2):_vm._e()])};
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 Pagination = 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 SlotComponent = {
name: 'BSlotComponent',
props: {
component: {
type: Object,
required: true
},
name: {
type: String,
default: 'default'
},
scoped: {
type: Boolean
},
props: {
type: Object
},
tag: {
type: String,
default: 'div'
},
event: {
type: String,
default: 'hook:updated'
}
},
methods: {
refresh: function refresh() {
this.$forceUpdate();
},
isVueComponent: function isVueComponent() {
return this.component && this.component._isVue;
}
},
created: function created() {
if (this.isVueComponent()) {
this.component.$on(this.event, this.refresh);
}
},
beforeDestroy: function beforeDestroy() {
if (this.isVueComponent()) {
this.component.$off(this.event, this.refresh);
}
},
render: function render(createElement) {
if (this.isVueComponent()) {
return createElement(this.tag, {}, this.scoped ? this.component.$scopedSlots[this.name](this.props) : this.component.$slots[this.name]);
}
}
};
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$3 = {
name: 'BSelect',
components: _defineProperty({}, Icon.name, Icon),
mixins: [FormElementMixin],
inheritAttrs: false,
props: {
value: {
type: [String, Number, Boolean, Object, Array, Function],
default: null
},
placeholder: String,
multiple: Boolean,
nativeSize: [String, Number]
},
data: function data() {
return {
selected: this.value,
_elementRef: 'select'
};
},
computed: {
computedValue: {
get: function get() {
return this.selected;
},
set: function set(value) {
this.selected = value;
this.$emit('input', value);
!this.isValid && this.checkHtml5Validity();
}
},
spanClasses: function spanClasses() {
return [this.size, this.statusType, {
'is-fullwidth': this.expanded,
'is-loading': this.loading,
'is-multiple': this.multiple,
'is-rounded': this.rounded,
'is-empty': this.selected === null
}];
}
},
watch: {
/**
* When v-model is changed:
* 1. Set the selected option.
* 2. If it's invalid, validate again.
*/
value: function value(_value) {
this.selected = _value;
!this.isValid && this.checkHtml5Validity();
}
}
};
/* 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('div',{staticClass:"control",class:{ 'is-expanded': _vm.expanded, 'has-icons-left': _vm.icon }},[_c('span',{staticClass:"select",class:_vm.spanClasses},[_c('select',_vm._b({directives:[{name:"model",rawName:"v-model",value:(_vm.computedValue),expression:"computedValue"}],ref:"select",attrs:{"multiple":_vm.multiple,"size":_vm.nativeSize},on:{"blur":function($event){_vm.$emit('blur', $event) && _vm.checkHtml5Validity();},"focus":function($event){_vm.$emit('focus', $event);},"change":function($event){var $$selectedVal = Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;return val}); _vm.computedValue=$event.target.multiple ? $$selectedVal : $$selectedVal[0];}}},'select',_vm.$attrs,false),[(_vm.placeholder)?[(_vm.computedValue == null)?_c('option',{attrs:{"disabled":"","hidden":""},domProps:{"value":null}},[_vm._v("\n "+_vm._s(_vm.placeholder)+"\n ")]):_vm._e()]:_vm._e(),_vm._v(" "),_vm._t("default")],2)]),_vm._v(" "),(_vm.icon)?_c('b-icon',{staticClass:"is-left",attrs:{"icon":_vm.icon,"pack":_vm.iconPack,"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 Select = 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 _components;
var script$4 = {
name: 'BTableMobileSort',
components: (_components = {}, _defineProperty(_components, Select.name, Select), _defineProperty(_components, Icon.name, Icon), _components),
props: {
currentSortColumn: Object,
isAsc: Boolean,
columns: Array,
placeholder: String
},
data: function data() {
return {
mobileSort: this.currentSortColumn
};
},
computed: {
showPlaceholder: function showPlaceholder() {
var _this = this;
return !this.columns || !this.columns.some(function (column) {
return column === _this.mobileSort;
});
}
},
watch: {
mobileSort: function mobileSort(column) {
if (this.currentSortColumn === column) return;
this.$emit('sort', column);
},
currentSortColumn: function currentSortColumn(column) {
this.mobileSort = column;
}
},
methods: {
sort: function sort() {
this.$emit('sort', this.mobileSort);
}
}
};
/* 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('div',{staticClass:"field table-mobile-sort"},[_c('div',{staticClass:"field has-addons"},[_c('b-select',{attrs:{"expanded":""},model:{value:(_vm.mobileSort),callback:function ($$v) {_vm.mobileSort=$$v;},expression:"mobileSort"}},[(_vm.placeholder)?[_c('option',{directives:[{name:"show",rawName:"v-show",value:(_vm.showPlaceholder),expression:"showPlaceholder"}],attrs:{"selected":"","disabled":"","hidden":""},domProps:{"value":{}}},[_vm._v("\n "+_vm._s(_vm.placeholder)+"\n ")])]:_vm._e(),_vm._v(" "),_vm._l((_vm.columns),function(column,index){return (column.sortable)?_c('option',{key:index,domProps:{"value":column}},[_vm._v("\n "+_vm._s(column.label)+"\n ")]):_vm._e()})],2),_vm._v(" "),_c('div',{staticClass:"control"},[_c('button',{staticClass:"button is-primary",on:{"click":_vm.sort}},[_c('b-icon',{directives:[{name:"show",rawName:"v-show",value:(_vm.currentSortColumn === _vm.mobileSort),expression:"currentSortColumn === mobileSort"}],class:{ 'is-desc': !_vm.isAsc },attrs:{"icon":"arrow-up","size":"is-small","both":""}})],1)])],1)])};
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 TableMobileSort = 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: 'BTableColumn',
props: {
label: String,
customKey: [String, Number],
field: String,
meta: [String, Number, Boolean, Function, Object, Array],
width: [Number, String],
numeric: Boolean,
centered: Boolean,
sortable: Boolean,
visible: {
type: Boolean,
default: true
},
customSort: Function,
internal: Boolean // Used internally by Table
},
data: function data() {
return {
newKey: this.customKey || this.label
};
},
computed: {
rootClasses: function rootClasses() {
return {
'has-text-right': this.numeric && !this.centered,
'has-text-centered': this.centered
};
}
},
methods: {
addRefToTable: function addRefToTable() {
var _this = this;
if (!this.$parent.$data._isTable) {
this.$destroy();
throw new Error('You should wrap bTableColumn on a bTable');
}
if (this.internal) return; // Since we're using scoped prop the columns gonna be multiplied,
// this finds when to stop based on the newKey property.
var repeated = this.$parent.newColumns.some(function (column) {
return column.newKey === _this.newKey;
});
!repeated && this.$parent.newColumns.push(this);
}
},
beforeMount: function beforeMount() {
this.addRefToTable();
},
beforeUpdate: function beforeUpdate() {
this.addRefToTable();
},
beforeDestroy: function beforeDestroy() {
var index = this.$parent.newColumns.map(function (column) {
return column.newKey;
}).indexOf(this.newKey);
if (index >= 0) {
this.$parent.newColumns.splice(index, 1);
}
}
};
/* 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 (_vm.visible)?_c('td',{class:_vm.rootClasses,attrs:{"data-label":_vm.label}},[_vm._t("default")],2):_vm._e()};
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 TableColumn = 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 _components$1;
var script$6 = {
name: 'BTable',
components: (_components$1 = {}, _defineProperty(_components$1, Checkbox.name, Checkbox), _defineProperty(_components$1, Icon.name, Icon), _defineProperty(_components$1, Pagination.name, Pagination), _defineProperty(_components$1, SlotComponent.name, SlotComponent), _defineProperty(_components$1, TableMobileSort.name, TableMobileSort), _defineProperty(_components$1, TableColumn.name, TableColumn), _components$1),
props: {
data: {
type: Array,
default: function _default() {
return [];
}
},
columns: {
type: Array,
default: function _default() {
return [];
}
},
bordered: Boolean,
striped: Boolean,
narrowed: Boolean,
hoverable: Boolean,
loading: Boolean,
detailed: Boolean,
checkable: Boolean,
headerCheckable: {
type: Boolean,
default: true
},
checkboxPosition: {
type: String,
default: 'left',
validator: function validator(value) {
return ['left', 'right'].indexOf(value) >= 0;
}
},
selected: Object,
focusable: Boolean,
customIsChecked: Function,
isRowCheckable: {
type: Function,
default: function _default() {
return true;
}
},
checkedRows: {
type: Array,
default: function _default() {
return [];
}
},
mobileCards: {
type: Boolean,
default: true
},
defaultSort: [String, Array],
defaultSortDirection: {
type: String,
default: 'asc'
},
sortIcon: {
type: String,
default: 'arrow-up'
},
sortIconSize: {
type: String,
default: 'is-small'
},
paginated: Boolean,
currentPage: {
type: Number,
default: 1
},
perPage: {
type: [Number, String],
default: 20
},
showDetailIcon: {
type: Boolean,
default: true
},
paginationSimple: Boolean,
paginationSize: String,
paginationPosition: {
type: String,
default: 'bottom',
validator: function validator(value) {
return ['bottom', 'top', 'both'].indexOf(value) >= 0;
}
},
backendSorting: Boolean,
rowClass: {
type: Function,
default: function _default() {
return '';
}
},
openedDetailed: {
type: Array,
default: function _default() {
return [];
}
},
hasDetailedVisible: {
type: Function,
default: function _default() {
return true;
}
},
detailKey: {
type: String,
default: ''
},
customDetailRow: {
type: Boolean,
default: false
},
backendPagination: Boolean,
total: {
type: [Number, String],
default: 0
},
iconPack: String,
mobileSortPlaceholder: String,
customRowKey: String,
draggable: {
type: Boolean,
defualt: false
},
ariaNextLabel: String,
ariaPreviousLabel: String,
ariaPageLabel: String,
ariaCurrentLabel: String
},
data: function data() {
return {
getValueByPath: getValueByPath,
newColumns: _toConsumableArray(this.columns),
visibleDetailRows: this.openedDetailed,
newData: this.data,
newDataTotal: this.backendPagination ? this.total : this.data.length,
newCheckedRows: _toConsumableArray(this.checkedRows),
newCurrentPage: this.currentPage,
currentSortColumn: {},
isAsc: true,
firstTimeSort: true,
// Used by first time initSort
_isTable: true // Used by TableColumn
};
},
computed: {
/**
* return if detailed row tabled
* will be with chevron column & icon or not
*/
showDetailRowIcon: function showDetailRowIcon() {
return this.detailed && this.showDetailIcon;
},
tableClasses: function tableClasses() {
return {
'is-bordered': this.bordered,
'is-striped': this.striped,
'is-narrow': this.narrowed,
'has-mobile-cards': this.mobileCards,
'is-hoverable': (this.hoverable || this.focusable) && this.visibleData.length
};
},
/**
* Splitted data based on the pagination.
*/
visibleData: function visibleData() {
if (!this.paginated) return this.newData;
var currentPage = this.newCurrentPage;
var perPage = this.perPage;
if (this.newData.length <= perPage) {
return this.newData;
} else {
var start = (currentPage - 1) * perPage;
var end = parseInt(start, 10) + parseInt(perPage, 10);
return this.newData.slice(start, end);
}
},
visibleColumns: function visibleColumns() {
if (!this.newColumns) return this.newColumns;
return this.newColumns.filter(function (column) {
return column.visible || column.visible === undefined;
});
},
/**
* Check if all rows in the page are checked.
*/
isAllChecked: function isAllChecked() {
var _this = this;
var validVisibleData = this.visibleData.filter(function (row) {
return _this.isRowCheckable(row);
});
if (validVisibleData.length === 0) return false;
var isAllChecked = validVisibleData.some(function (currentVisibleRow) {
return indexOf(_this.newCheckedRows, currentVisibleRow, _this.customIsChecked) < 0;
});
return !isAllChecked;
},
/**
* Check if all rows in the page are checkable.
*/
isAllUncheckable: function isAllUncheckable() {
var _this2 = this;
var validVisibleData = this.visibleData.filter(function (row) {
return _this2.isRowCheckable(row);
});
return validVisibleData.length === 0;
},
/**
* Check if has any sortable column.
*/
hasSortablenewColumns: function hasSortablenewColumns() {
return this.newColumns.some(function (column) {
return column.sortable;
});
},
/**
* Return total column count based if it's checkable or expanded
*/
columnCount: function columnCount() {
var count = this.newColumns.length;
count += this.checkable ? 1 : 0;
count += this.detailed ? 1 : 0;
return count;
}
},
watch: {
/**
* When data prop change:
* 1. Update internal value.
* 2. Reset newColumns (thead), in case it's on a v-for loop.
* 3. Sort again if it's not backend-sort.
* 4. Set new total if it's not backend-paginated.
*/
data: function data(value) {
var _this3 = this;
// Save newColumns before resetting
var newColumns = this.newColumns;
this.newColumns = [];
this.newData = value; // Prevent table from being headless, data could change and created hook
// on column might not trigger
this.$nextTick(function () {
if (!_this3.newColumns.length) _this3.newColumns = newColumns;
});
if (!this.backendSorting) {
this.sort(this.currentSortColumn, true);
}
if (!this.backendPagination) {
this.newDataTotal = value.length;
}
},
/**
* When Pagination total change, update internal total
* only if it's backend-paginated.
*/
total: function total(newTotal) {
if (!this.backendPagination) return;
this.newDataTotal = newTotal;
},
/**
* When checkedRows prop change, update internal value without
* mutating original data.
*/
checkedRows: function checkedRows(rows) {
this.newCheckedRows = _toConsumableArray(rows);
},
columns: function columns(value) {
this.newColumns = _toConsumableArray(value);
},
newColumns: function newColumns(value) {
this.checkSort();
},
/**
* When the user wants to control the detailed rows via props.
* Or wants to open the details of certain row with the router for example.
*/
openedDetailed: function openedDetailed(expandedRows) {
this.visibleDetailRows = expandedRows;
},
currentPage: function currentPage(newVal) {
this.newCurrentPage = newVal;
}
},
methods: {
/**
* Sort an array by key without mutating original data.
* Call the user sort function if it was passed.
*/
sortBy: function sortBy(array, key, fn, isAsc) {
var sorted = []; // Sorting without mutating original data
if (fn && typeof fn === 'function') {
sorted = _toConsumableArray(array).sort(function (a, b) {
return fn(a, b, isAsc);
});
} else {
sorted = _toConsumableArray(array).sort(function (a, b) {
// Get nested values from objects
var newA = getValueByPath(a, key);
var newB = getValueByPath(b, key); // sort boolean type
if (typeof newA === 'boolean' && typeof newB === 'boolean') {
return isAsc ? newA - newB : newB - newA;
}
if (!newA && newA !== 0) return 1;
if (!newB && newB !== 0) return -1;
if (newA === newB) return 0;
newA = typeof newA === 'string' ? newA.toUpperCase() : newA;
newB = typeof newB === 'string' ? newB.toUpperCase() : newB;
return isAsc ? newA > newB ? 1 : -1 : newA > newB ? -1 : 1;
});
}
return sorted;
},
/**
* Sort the column.
* Toggle current direction on column if it's sortable
* and not just updating the prop.
*/
sort: function sort(column) {
var updatingData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
if (!column || !column.sortable) return;
if (!updatingData) {
this.isAsc = column === this.currentSortColumn ? !this.isAsc : this.defaultSortDirection.toLowerCase() !== 'desc';
}
if (!this.firstTimeSort) {
this.$emit('sort', column.field, this.isAsc ? 'asc' : 'desc');
}
if (!this.backendSorting) {
this.newData = this.sortBy(this.newData, column.field, column.customSort, this.isAsc);
}
this.currentSortColumn = column;
},
/**
* Check if the row is checked (is added to the array).
*/
isRowChecked: function isRowChecked(row) {
return indexOf(this.newCheckedRows, row, this.customIsChecked) >= 0;
},
/**
* Remove a checked row from the array.
*/
removeCheckedRow: function removeCheckedRow(row) {
var index = indexOf(this.newCheckedRows, row, this.customIsChecked);
if (index >= 0) {
this.newCheckedRows.splice(index, 1);
}
},
/**
* Header checkbox click listener.
* Add or remove all rows in current page.
*/
checkAll: function checkAll() {
var _this4 = this;
var isAllChecked = this.isAllChecked;
this.visibleData.forEach(function (currentRow) {
_this4.removeCheckedRow(currentRow);
if (!isAllChecked) {
if (_this4.isRowCheckable(currentRow)) {
_this4.newCheckedRows.push(currentRow);
}
}
});
this.$emit('check', this.newCheckedRows);
this.$emit('check-all', this.newCheckedRows); // Emit checked rows to update user variable
this.$emit('update:checkedRows', this.newCheckedRows);
},
/**
* Row checkbox click listener.
* Add or remove a single row.
*/
checkRow: function checkRow(row) {
if (!this.isRowChecked(row)) {
this.newCheckedRows.push(row);
} else {
this.removeCheckedRow(row);
}
this.$emit('check', this.newCheckedRows, row); // Emit checked rows to update user variable
this.$emit('update:checkedRows', this.newCheckedRows);
},
/**
* Row click listener.
* Emit all necessary events.
*/
selectRow: function selectRow(row, index) {
this.$emit('click', row);
if (this.selected === row) return; // Emit new and old row
this.$emit('select', row, this.selected); // Emit new row to update user variable
this.$emit('update:sele