vue-scroll-table
Version:
A Vue table component with fully customizable cells (using scoped slots), a sticky first column, horizontal scrolling and pagination.
1,131 lines (988 loc) • 56.9 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.VueScrollTable = {})));
}(this, (function (exports) { 'use strict';
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var script = {
props: ['classes', 'styles', 'direction'],
name: 'sort-icon',
watch: {
'classes.active': {
immediate: true,
handler: function(newActiveClasses) {
var activateClasses = function (activeClasses, currentClass) {
var obj;
return (Object.assign({}, activeClasses,
( obj = {}, obj[currentClass] = true, obj )));
};
this.activeClasses = Object.assign({}, this.defaultActiveClasses.reduce(activateClasses, {}),
newActiveClasses.reduce(activateClasses, {}));
}
},
'styles.active': {
immediate: true,
handler: function(newActiveStyles) {
this.activeStyle = Object.assign({}, this.defaultActiveStyle,
newActiveStyles);
}
}
},
data: function data() {
return {
defaultActiveClasses: ['s_active'],
defaultActiveStyle: {},
activeClasses: {},
activeStyle: {}
};
}
};
/* 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('button',{staticClass:"vst_sort-btn",class:[].concat( _vm.classes.button ),style:(_vm.styles.button)},[_c('span',{class:this.direction === 'ascending' ? _vm.activeClasses : {},style:(this.direction === 'ascending' ? _vm.activeStyle : {})},[_vm._v("\n ▲\n ")]),_vm._v(" "),_c('span',{class:this.direction === 'descending' ? _vm.activeClasses : {},style:(this.direction === 'descending' ? _vm.activeStyle : {})},[_vm._v("\n ▼\n ")])])};
var __vue_staticRenderFns__ = [];
/* style */
var __vue_inject_styles__ = function (inject) {
if (!inject) { return }
inject("data-v-c717b436_0", { source: "\n.vst_table-scroll .vst_sort-btn[data-v-c717b436]{position:relative;z-index:0\n}\nspan[data-v-c717b436]{opacity:.5\n}\nspan.s_active[data-v-c717b436]{opacity:1\n}", map: undefined, media: undefined });
};
/* scoped */
var __vue_scope_id__ = "data-v-c717b436";
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* component normalizer */
function __vue_normalize__(
template, style, script$$1,
scope, functional, moduleIdentifier,
createInjector, createInjectorSSR
) {
var component = (typeof script$$1 === 'function' ? script$$1.options : script$$1) || {};
// For security concerns, we use only base name in production mode.
component.__file = "SortIcon.vue";
if (!component.render) {
component.render = template.render;
component.staticRenderFns = template.staticRenderFns;
component._compiled = true;
if (functional) { component.functional = true; }
}
component._scopeId = scope;
{
var hook;
if (style) {
hook = function(context) {
style.call(this, createInjector(context));
};
}
if (hook !== undefined) {
if (component.functional) {
// register for functional component in vue file
var originalRender = component.render;
component.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context)
};
} else {
// inject component registration as beforeCreate hook
var existing = component.beforeCreate;
component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
}
return component
}
/* style inject */
function __vue_create_injector__() {
var head = document.head || document.getElementsByTagName('head')[0];
var styles = __vue_create_injector__.styles || (__vue_create_injector__.styles = {});
var isOldIE =
typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
return function addStyle(id, css) {
if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) { return } // SSR styles are present.
var group = isOldIE ? css.media || 'default' : id;
var style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
if (!style.ids.includes(id)) {
var code = css.source;
var index = style.ids.length;
style.ids.push(id);
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (isOldIE) {
style.element = style.element || document.querySelector('style[data-group=' + group + ']');
}
if (!style.element) {
var el = style.element = document.createElement('style');
el.type = 'text/css';
if (css.media) { el.setAttribute('media', css.media); }
if (isOldIE) {
el.setAttribute('data-group', group);
el.setAttribute('data-next-index', '0');
}
head.appendChild(el);
}
if (isOldIE) {
index = parseInt(style.element.getAttribute('data-next-index'));
style.element.setAttribute('data-next-index', index + 1);
}
if (style.element.styleSheet) {
style.parts.push(code);
style.element.styleSheet.cssText = style.parts
.filter(Boolean)
.join('\n');
} else {
var textNode = document.createTextNode(code);
var nodes = style.element.childNodes;
if (nodes[index]) { style.element.removeChild(nodes[index]); }
if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }
else { style.element.appendChild(textNode); }
}
}
}
}
/* style inject SSR */
var SortIcon = __vue_normalize__(
{ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
__vue_inject_styles__,
__vue_script__,
__vue_scope_id__,
__vue_is_functional_template__,
__vue_module_identifier__,
__vue_create_injector__,
undefined
);
//
var script$1 = {
name: 'table-part',
props: ['data', 'headers', 'direction', 'classes', 'styles'],
components: {
SortIcon: SortIcon
},
methods: {
onHeaderClick: function onHeaderClick($event, index, sortable) {
if (sortable) {
this.$emit('sort', index);
}
},
getCellDisplayValue: function getCellDisplayValue(cellData) {
if (typeof cellData === 'object') {
if (Object.keys(cellData).includes('value')) {
return cellData.value;
}
console.log(
"Cell data object should have a 'value' property, cell data:",
cellData
);
return cellData;
}
return cellData;
}
}
};
/* script */
var __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('table',{class:[].concat( _vm.classes.table ),style:(_vm.styles.table)},[_c('thead',[_c('tr',_vm._l((_vm.headers),function(header,i){return _c('th',{key:("scroll-table-part-header-" + i),class:[].concat( _vm.classes.tableHeader ),style:(Object.assign({ 'min-width': ((header.width) + "px"), 'width': ((header.width) + "px"), 'cursor': header.sortable ? 'pointer' : 'default' }, _vm.styles.tableHeader)),on:{"click":function($event){_vm.onHeaderClick($event, i, header.sortable);}}},[_vm._v("\n "+_vm._s(header.text)+"\n "),(header.sortable)?_c('sort-icon',{attrs:{"classes":{ button: _vm.classes.button, active: _vm.classes.active},"styles":{ button: _vm.styles.button, active: _vm.styles.active },"direction":_vm.direction}}):_vm._e()],1)}))]),_vm._v(" "),_c('tbody',_vm._l((_vm.data),function(row,i){return _c('tr',{key:("scroll-table-part-row-" + i),class:[].concat( _vm.classes.tableRow ),style:(_vm.styles.tableRow)},[_vm._l((_vm.headers),function(header,i){return [(typeof _vm.$scopedSlots[header.text.toLowerCase()] !== 'undefined')?_c('td',{key:("scroll-table-part-row-item-" + i),class:[].concat( _vm.classes.tableData ),style:(_vm.styles.tableData)},[_vm._t(header.text.toLowerCase(),null,{header:header,index:i,data:row[i],row:row})],2):_c('td',{key:("scroll-table-part-row-item-" + i),class:[].concat( _vm.classes.tableData ),style:(_vm.styles.tableData)},[_vm._v("\n "+_vm._s(_vm.getCellDisplayValue(row[i]))+"\n ")])]})],2)}))])};
var __vue_staticRenderFns__$1 = [];
/* style */
var __vue_inject_styles__$1 = function (inject) {
if (!inject) { return }
inject("data-v-1e1ed9b3_0", { source: "\nth[data-v-1e1ed9b3]{cursor:pointer;padding:20px;border-right:1px #fff solid\n}\ntable[data-v-1e1ed9b3]{border:1px solid #ddd;border-collapse:separate;border-left:0;border-right:0;border-radius:10px;border-spacing:0;margin-bottom:0\n}\ntd[data-v-1e1ed9b3]:first-child,th[data-v-1e1ed9b3]:first-child{border-left:1px solid #ddd\n}\ntd[data-v-1e1ed9b3]:last-child,th[data-v-1e1ed9b3]:last-child{border-right:1px solid #ddd\n}\ntbody:first-child tr:first-child td[data-v-1e1ed9b3]:first-child,thead:first-child tr:first-child th[data-v-1e1ed9b3]:first-child{border-radius:10px 0 0 0\n}\ntbody:last-child tr:last-child td[data-v-1e1ed9b3]:first-child,thead:last-child tr:last-child th[data-v-1e1ed9b3]:first-child{border-radius:0 0 0 10px\n}\nth[data-v-1e1ed9b3]:last-child{border-radius:0 10px 0 0\n}\ntr:last-child td[data-v-1e1ed9b3]:last-child{border-radius:0 0 10px 0\n}", map: undefined, media: undefined });
};
/* scoped */
var __vue_scope_id__$1 = "data-v-1e1ed9b3";
/* module identifier */
var __vue_module_identifier__$1 = undefined;
/* functional template */
var __vue_is_functional_template__$1 = false;
/* component normalizer */
function __vue_normalize__$1(
template, style, script,
scope, functional, moduleIdentifier,
createInjector, createInjectorSSR
) {
var component = (typeof script === 'function' ? script.options : script) || {};
// For security concerns, we use only base name in production mode.
component.__file = "TablePart.vue";
if (!component.render) {
component.render = template.render;
component.staticRenderFns = template.staticRenderFns;
component._compiled = true;
if (functional) { component.functional = true; }
}
component._scopeId = scope;
{
var hook;
if (style) {
hook = function(context) {
style.call(this, createInjector(context));
};
}
if (hook !== undefined) {
if (component.functional) {
// register for functional component in vue file
var originalRender = component.render;
component.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context)
};
} else {
// inject component registration as beforeCreate hook
var existing = component.beforeCreate;
component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
}
return component
}
/* style inject */
function __vue_create_injector__$1() {
var head = document.head || document.getElementsByTagName('head')[0];
var styles = __vue_create_injector__$1.styles || (__vue_create_injector__$1.styles = {});
var isOldIE =
typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
return function addStyle(id, css) {
if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) { return } // SSR styles are present.
var group = isOldIE ? css.media || 'default' : id;
var style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
if (!style.ids.includes(id)) {
var code = css.source;
var index = style.ids.length;
style.ids.push(id);
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (isOldIE) {
style.element = style.element || document.querySelector('style[data-group=' + group + ']');
}
if (!style.element) {
var el = style.element = document.createElement('style');
el.type = 'text/css';
if (css.media) { el.setAttribute('media', css.media); }
if (isOldIE) {
el.setAttribute('data-group', group);
el.setAttribute('data-next-index', '0');
}
head.appendChild(el);
}
if (isOldIE) {
index = parseInt(style.element.getAttribute('data-next-index'));
style.element.setAttribute('data-next-index', index + 1);
}
if (style.element.styleSheet) {
style.parts.push(code);
style.element.styleSheet.cssText = style.parts
.filter(Boolean)
.join('\n');
} else {
var textNode = document.createTextNode(code);
var nodes = style.element.childNodes;
if (nodes[index]) { style.element.removeChild(nodes[index]); }
if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }
else { style.element.appendChild(textNode); }
}
}
}
}
/* style inject SSR */
var TablePart = __vue_normalize__$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,
__vue_create_injector__$1,
undefined
);
//
//
//
//
//
//
//
//
//
//
var script$2 = {
props: [
'loading' ],
};
/* script */
var __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',{directives:[{name:"show",rawName:"v-show",value:(_vm.loading),expression:"loading"}],staticClass:"vst_loader"},[_c('svg',{attrs:{"version":"1.1","id":"vst_loader","xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","x":"0px","y":"0px","width":"36px","height":"36px","viewBox":"0 0 36 36","enable-background":"new 0 0 36 36","xml:space":"preserve"}},[_c('path',{attrs:{"opacity":"0.2","fill":"#262261","d":"M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"}}),_vm._v(" "),_c('path',{attrs:{"fill":"#262261","d":"M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0C22.32,8.481,24.301,9.057,26.013,10.047z"}},[_c('animateTransform',{attrs:{"attributeType":"xml","attributeName":"transform","type":"rotate","from":"0 20 20","to":"360 20 20","dur":"0.5s","repeatCount":"indefinite"}})],1)])])};
var __vue_staticRenderFns__$2 = [];
/* style */
var __vue_inject_styles__$2 = undefined;
/* scoped */
var __vue_scope_id__$2 = "data-v-7131bad5";
/* module identifier */
var __vue_module_identifier__$2 = undefined;
/* functional template */
var __vue_is_functional_template__$2 = false;
/* component normalizer */
function __vue_normalize__$2(
template, style, script,
scope, functional, moduleIdentifier,
createInjector, createInjectorSSR
) {
var component = (typeof script === 'function' ? script.options : script) || {};
// For security concerns, we use only base name in production mode.
component.__file = "Loader.vue";
if (!component.render) {
component.render = template.render;
component.staticRenderFns = template.staticRenderFns;
component._compiled = true;
if (functional) { component.functional = true; }
}
component._scopeId = scope;
return component
}
/* style inject */
/* style inject SSR */
var Loader = __vue_normalize__$2(
{ 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 isMergeableObject = function isMergeableObject(value) {
return isNonNullObject(value)
&& !isSpecial(value)
};
function isNonNullObject(value) {
return !!value && typeof value === 'object'
}
function isSpecial(value) {
var stringValue = Object.prototype.toString.call(value);
return stringValue === '[object RegExp]'
|| stringValue === '[object Date]'
|| isReactElement(value)
}
// see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;
function isReactElement(value) {
return value.$$typeof === REACT_ELEMENT_TYPE
}
function emptyTarget(val) {
return Array.isArray(val) ? [] : {}
}
function cloneUnlessOtherwiseSpecified(value, options) {
return (options.clone !== false && options.isMergeableObject(value))
? deepmerge(emptyTarget(value), value, options)
: value
}
function defaultArrayMerge(target, source, options) {
return target.concat(source).map(function(element) {
return cloneUnlessOtherwiseSpecified(element, options)
})
}
function mergeObject(target, source, options) {
var destination = {};
if (options.isMergeableObject(target)) {
Object.keys(target).forEach(function(key) {
destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
});
}
Object.keys(source).forEach(function(key) {
if (!options.isMergeableObject(source[key]) || !target[key]) {
destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
} else {
destination[key] = deepmerge(target[key], source[key], options);
}
});
return destination
}
function deepmerge(target, source, options) {
options = options || {};
options.arrayMerge = options.arrayMerge || defaultArrayMerge;
options.isMergeableObject = options.isMergeableObject || isMergeableObject;
var sourceIsArray = Array.isArray(source);
var targetIsArray = Array.isArray(target);
var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;
if (!sourceAndTargetTypesMatch) {
return cloneUnlessOtherwiseSpecified(source, options)
} else if (sourceIsArray) {
return options.arrayMerge(target, source, options)
} else {
return mergeObject(target, source, options)
}
}
deepmerge.all = function deepmergeAll(array, options) {
if (!Array.isArray(array)) {
throw new Error('first argument should be an array')
}
return array.reduce(function(prev, next) {
return deepmerge(prev, next, options)
}, {})
};
var deepmerge_1 = deepmerge;
var DEFAULT_CLASSES = {
pagination: {
container: [],
limit: {
container: [],
dropdown: []
},
links: {
container: [],
buttons: []
}
},
tableContainer: [],
sticky: {
container: [],
table: [],
tableHeader: [],
tableRow: [],
tableData: []
},
scroll: {
container: [],
table: [],
tableHeader: [],
tableRow: [],
tableData: []
},
sortButtons: {
button: [],
active: []
}
};
var DEFAULT_STYLES = {
pagination: {
container: {},
limit: {
container: {},
dropdown: {}
},
links: {
container: {},
buttons: {}
}
},
tableContainer: {},
sticky: {
container: {},
table: {},
tableHeader: {},
tableRow: {},
tableData: {}
},
scroll: {
container: {},
table: {},
tableHeader: {},
tableRow: {},
tableData: {}
},
sortButtons: {
button: {},
active: {}
}
};
function mergeDefaultClasses(classes) {
return deepmerge_1(DEFAULT_CLASSES, classes);
}
function mergeDefaultStyle(style) {
return deepmerge_1(DEFAULT_STYLES, style);
}
var PaginationButtonType = {
NUMBER: 'NUMBER',
LEFT: 'LEFT',
RIGHT: 'RIGHT',
ELLIPSIS: 'ELLIPSIS'
};
/**
* @typedef {Object} PaginationButton
* @property {number} page
* @property {string} label
* @property {boolean} disabled
* @property {boolean} current
* @property {PaginationButtonType} type
*/
/**
* Returns an array of pagination buttons
* @param {number} totalPages
* @param {number} currentPage
* @returns {Array<PaginationButton>} pagination buttons
*/
function getPaginationButtons(totalPages, currentPage) {
if (totalPages < 1) { return []; }
if (currentPage < 1) { currentPage = 1; }
if (currentPage > totalPages) { currentPage = totalPages; }
if (totalPages <= 7) {
// Variant complete
return [
getPreviousButton(currentPage === 1) ].concat( Array.from({ length: totalPages }, function (_, i) { return ({
page: i + 1,
label: i + 1,
disabled: false,
current: i + 1 === currentPage,
buttonType: PaginationButtonType.NUMBER
}); }),
[getNextButton(currentPage === totalPages)]
);
}
if (totalPages > 7 && currentPage <= 4) {
// Variant from left
return [
getPreviousButton(currentPage === 1) ].concat( Array.from({ length: 5 }, function (_, i) { return ({
page: i + 1,
label: i + 1,
disabled: false,
current: i + 1 === currentPage,
buttonType: PaginationButtonType.NUMBER
}); }),
[getEllipsisButton()],
[{
page: totalPages,
label: totalPages,
disabled: false,
current: false,
buttonType: PaginationButtonType.NUMBER
}],
[getNextButton(currentPage === totalPages)]
);
}
var compare = 4;
if (totalPages > 7 && currentPage > totalPages - compare) {
// Variant from right
return [
getPreviousButton(currentPage === 1),
{
page: 1,
label: 1,
disabled: false,
current: false,
buttonType: PaginationButtonType.NUMBER
},
getEllipsisButton() ].concat( Array.from({ length: 5 }, function (_, i) { return ({
page: totalPages - compare + i,
label: totalPages - compare + i,
disabled: false,
current: totalPages - compare + i === currentPage,
buttonType: PaginationButtonType.NUMBER
}); }),
[getNextButton(currentPage === totalPages)]
);
}
// Variant from middle
if (totalPages > 7 && currentPage > 4 && currentPage <= totalPages - 4) {
return [
getPreviousButton(currentPage === 1),
{
page: 1,
label: 1,
disabled: false,
current: false,
buttonType: PaginationButtonType.NUMBER
},
getEllipsisButton() ].concat( Array.from({ length: 3 }, function (_, i) { return ({
page: currentPage - 1 + i,
label: currentPage - 1 + i,
disabled: false,
current: currentPage - 1 + i === currentPage,
buttonType: PaginationButtonType.NUMBER
}); }),
[getEllipsisButton()],
[{
page: totalPages,
label: totalPages,
disabled: false,
current: false,
buttonType: PaginationButtonType.NUMBER
}],
[getNextButton(currentPage === totalPages)]
);
}
}
function getPreviousButton(disabled) {
return {
page: -1,
label: 'Previous',
disabled: disabled,
current: false,
buttonType: PaginationButtonType.LEFT
};
}
function getNextButton(disabled) {
return {
page: -1,
label: 'Next',
disabled: disabled,
current: false,
buttonType: PaginationButtonType.RIGHT
};
}
function getEllipsisButton() {
return {
page: -1,
label: '...',
disabled: false,
current: false,
buttonType: PaginationButtonType.ELLIPSIS
};
}
//
var script$3 = {
data: function data() {
return {
page: 1
};
},
props: {
paginationStyles: {
type: Object,
default: function default$1() {
return mergeDefaultStyle({});
}
},
paginationClasses: {
type: Object,
default: function default$2() {
return mergeDefaultClasses({});
}
},
pages: {
type: Number,
default: function default$3() {
return 1;
}
}
},
methods: {
paginate: function paginate(num) {
this.page = num;
this.$emit('on-paginated', num);
},
onClick: function onClick(buttonType, index) {
var this$1 = this;
var actions = {
LEFT: function () { return this$1.paginate(this$1.page - 1); },
RIGHT: function () { return this$1.paginate(this$1.page + 1); },
ELLIPSIS: function () {
/* do nothing */
},
default: function () { return this$1.paginate(index); }
};
return (actions[buttonType] || actions.default)();
}
},
computed: {
paginationButtons: function paginationButtons() {
return getPaginationButtons(this.pages, this.page);
}
}
};
/* script */
var __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:"vst_pagination_links",class:[].concat( _vm.paginationClasses.links.container ),style:(_vm.paginationStyles.links.container)},_vm._l((_vm.paginationButtons),function(button,index){return _c('button',{key:("scroll-table-pagination-link-" + index),class:[{ s_active: button.current }, [].concat( _vm.paginationClasses.links.buttons )],style:(_vm.paginationStyles.links.buttons),attrs:{"disabled":button.disabled},on:{"click":function($event){_vm.onClick(button.buttonType, button.page);}}},[(button.buttonType === 'LEFT')?[_vm._v("\n <\n ")]:(button.buttonType === 'RIGHT')?[_vm._v("\n >\n ")]:(button.buttonType === 'ELLIPSIS')?[_vm._v("\n ...\n ")]:[_vm._v("\n "+_vm._s(button.page)+"\n ")]],2)}))};
var __vue_staticRenderFns__$3 = [];
/* style */
var __vue_inject_styles__$3 = function (inject) {
if (!inject) { return }
inject("data-v-7c0fdea6_0", { source: "\n.s_active{background-color:#ccc\n}", map: undefined, media: undefined });
};
/* scoped */
var __vue_scope_id__$3 = undefined;
/* module identifier */
var __vue_module_identifier__$3 = undefined;
/* functional template */
var __vue_is_functional_template__$3 = false;
/* component normalizer */
function __vue_normalize__$3(
template, style, script,
scope, functional, moduleIdentifier,
createInjector, createInjectorSSR
) {
var component = (typeof script === 'function' ? script.options : script) || {};
// For security concerns, we use only base name in production mode.
component.__file = "Pagination.vue";
if (!component.render) {
component.render = template.render;
component.staticRenderFns = template.staticRenderFns;
component._compiled = true;
if (functional) { component.functional = true; }
}
component._scopeId = scope;
{
var hook;
if (style) {
hook = function(context) {
style.call(this, createInjector(context));
};
}
if (hook !== undefined) {
if (component.functional) {
// register for functional component in vue file
var originalRender = component.render;
component.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context)
};
} else {
// inject component registration as beforeCreate hook
var existing = component.beforeCreate;
component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
}
return component
}
/* style inject */
function __vue_create_injector__$2() {
var head = document.head || document.getElementsByTagName('head')[0];
var styles = __vue_create_injector__$2.styles || (__vue_create_injector__$2.styles = {});
var isOldIE =
typeof navigator !== 'undefined' &&
/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
return function addStyle(id, css) {
if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) { return } // SSR styles are present.
var group = isOldIE ? css.media || 'default' : id;
var style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });
if (!style.ids.includes(id)) {
var code = css.source;
var index = style.ids.length;
style.ids.push(id);
if (css.map) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
code +=
'\n/*# sourceMappingURL=data:application/json;base64,' +
btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
' */';
}
if (isOldIE) {
style.element = style.element || document.querySelector('style[data-group=' + group + ']');
}
if (!style.element) {
var el = style.element = document.createElement('style');
el.type = 'text/css';
if (css.media) { el.setAttribute('media', css.media); }
if (isOldIE) {
el.setAttribute('data-group', group);
el.setAttribute('data-next-index', '0');
}
head.appendChild(el);
}
if (isOldIE) {
index = parseInt(style.element.getAttribute('data-next-index'));
style.element.setAttribute('data-next-index', index + 1);
}
if (style.element.styleSheet) {
style.parts.push(code);
style.element.styleSheet.cssText = style.parts
.filter(Boolean)
.join('\n');
} else {
var textNode = document.createTextNode(code);
var nodes = style.element.childNodes;
if (nodes[index]) { style.element.removeChild(nodes[index]); }
if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }
else { style.element.appendChild(textNode); }
}
}
}
}
/* style inject SSR */
var Pagination = __vue_normalize__$3(
{ 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,
__vue_create_injector__$2,
undefined
);
//
var script$4 = {
name: 'scroll-table',
mounted: function mounted() {
if (this.limits.length) {
this.limit = this.limits[0];
}
if (this.hasScroll) {
window.addEventListener('resize', this.handleResize);
}
this.$nextTick(this.handleResize);
},
beforeDestroy: function() {
if (this.hasScroll) {
window.removeEventListener('resize', this.handleResize);
}
},
props: {
limits: {
type: Array,
default: function defaultValue() {
return [25, 50, 100];
}
},
hasScroll: {
default: false
},
data: {
default: function default$1() {
return [];
}
},
headers: {
default: function default$2() {
return [];
}
},
styles: {
type: Object,
default: function default$3() {
return mergeDefaultStyle({});
}
},
classes: {
type: Object,
default: function default$4() {
return mergeDefaultClasses({});
}
},
translations: {
type: Object,
default: function default$5() {
return {
limit: 'per page'
};
}
}
},
watch: {
limit: function limit() {
this.page = 1;
}
},
data: function data() {
return {
loading: false,
limit: 0,
page: 1,
sortKey: 'naam',
direction: 'descending',
mergedClasses: mergeDefaultClasses(this.classes),
mergedStyles: mergeDefaultStyle(this.styles)
};
},
computed: {
limitedData: function limitedData() {
var this$1 = this;
var vue = this;
var sortCallback = (function () {
if (this$1.data.length === 0) {
return function () {
return 0;
};
}
if (typeof this$1.data[0][this$1.sortKey] === 'object') {
// Sort callback for row array with data objects
return function (a, b) {
if (a[this$1.sortKey].value > b[this$1.sortKey].value)
{ return this$1.direction === 'descending' ? -1 : 1; }
if (a[this$1.sortKey].value < b[this$1.sortKey].value)
{ return this$1.direction === 'descending' ? 1 : -1; }
return 0;
};
}
// Sort callback for row array with simple string values
return function (a, b) {
if (a[this$1.sortKey] > b[this$1.sortKey])
{ return this$1.direction === 'descending' ? -1 : 1; }
if (a[this$1.sortKey] < b[this$1.sortKey])
{ return this$1.direction === 'descending' ? 1 : -1; }
return 0;
};
})();
var limitedData = [].concat( this.data ).sort(sortCallback).filter(function (row, i) {
if (i >= (vue.page - 1) * vue.limit && i < vue.page * vue.limit)
{ return true; }
return false;
});
if (!this.limit) { return this.data || []; }
return limitedData;
},
pages: function pages() {
if (!this.data.length || !this.limit) { return 0; }
var pages = Math.ceil(this.data.length / this.limit);
return pages;
}
},
methods: {
paginate: function paginate(num) {
this.page = num;
},
sortBy: function sortBy(key) {
this.direction =
this.direction === 'descending' ? 'ascending' : 'descending';
this.sortKey = key;
},
handleResize: function handleResize() {
if (!this.hasScroll) {
return;
}
this.$refs.overlay.$el.style.width = (this.$refs.scroll.$el.offsetWidth) + "px";
}
},
components: {
TablePart: TablePart,
Loader: Loader,
Pagination: Pagination
}
};
/* script */
var __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 (_vm.data)?_c('div',{staticClass:"vst_table-component-container"},[_c('div',{staticClass:"vst_pagination-container a_margin-bottom-20",class:[].concat( _vm.mergedClasses.pagination.container ),style:(_vm.mergedStyles.pagination.container)},[_c('div',{staticClass:"vst_pagination_limit a_margin-right-20",class:[].concat( _vm.mergedClasses.pagination.limit.container ),style:(_vm.mergedStyles.pagination.limit.container)},[_c('select',{directives:[{name:"model",rawName:"v-model",value:(_vm.limit),expression:"limit"}],staticClass:"v_transparent",class:[].concat( _vm.mergedClasses.pagination.limit.dropdown ),style:(_vm.mergedStyles.pagination.limit.dropdown),on:{"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.limit=$event.target.multiple ? $$selectedVal : $$selectedVal[0];}}},_vm._l((_vm.limits),function(limit,i){return _c('option',{key:("scroll-table-limit-" + i),domProps:{"value":limit}},[_vm._v("\n "+_vm._s(limit)+" "+_vm._s(_vm.translations.limit)+"\n ")])}))]),_vm._v(" "),_c('pagination',{staticClass:"vst_pagination_links",attrs:{"classes":_vm.classes,"styles":_vm.styles,"pages":_vm.pages,"paginationClasses":_vm.mergedClasses.pagination,"paginationStyles":_vm.mergedStyles.pagination,"limits":_vm.limits,"translations":_vm.translations},on:{"on-paginated":_vm.paginate}})],1),_vm._v(" "),_c('div',{staticClass:"vst_table-container",class:[{ 'v_has-scroll': _vm.hasScroll } ].concat( _vm.mergedClasses.tableContainer),style:(_vm.mergedStyles.tableContainer)},[(_vm.hasScroll)?_c('div',{staticClass:"vst_table-overlay",class:[].concat( _vm.mergedClasses.sticky.container ),style:(Object.assign({ 'width': ((_vm.headers[0].width) + "px") }, _vm.mergedStyles.sticky.container))},[_c('table-part',{ref:"overlay",attrs:{"classes":Object.assign(_vm.mergedClasses.sticky, _vm.mergedClasses.sortButtons),"styles":Object.assign(_vm.mergedStyles.sticky, _vm.mergedStyles.sortButtons),"headers":_vm.headers,"data":_vm.limitedData,"direction":_vm.direction},on:{"sort":function($event){_vm.sortBy($event);}},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})])},[_vm._l((Object.keys(_vm.$slots)),function(slot){return _vm._t(slot,null,{slot:slot})})],2)],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"vst_table-scroll",class:[].concat( _vm.mergedClasses.scroll.container ),style:(_vm.mergedStyles.scroll.container)},[_c('table-part',{ref:"scroll",attrs:{"classes":Object.assign(_vm.mergedClasses.scroll, _vm.mergedClasses.sortButtons),"styles":Object.assign(_vm.mergedStyles.scroll, _vm.mergedStyles.sortButtons),"headers":_vm.headers,"data":_vm.limitedData,"direction":_vm.direction},on:{"sort":function($event){_vm.sortBy($event);}},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})])},[_vm._l((Object.keys(_vm.$slots)),function(slot){return _vm._t(slot,null,{slot:slot})})],2)],1)]),_vm._v(" "),(!_vm.data)?_c('loader',{attrs:{"loading":_vm.loading}}):_vm._e()],1):_vm._e()};
var __vue_staticRenderFns__$4 = [];
/* style */
var __vue_inject_styles__$4 = function (inject) {
if (!inject) { return }
inject("data-v-1146f9d6_0", { source: "\n.a_margin-top-0{margin-top:0!important\n}\n.a_margin-right-0{margin-right:0!important\n}\n.a_margin-bottom-0{margin-bottom:0!important\n}\n.a_margin-left-0{margin-left:0!important\n}\n.a_margin-top-10{margin-top:5px!important\n}\n.a_margin-right-10{margin-right:5px!important\n}\n.a_margin-bottom-10{margin-bottom:5px!important\n}\n.a_margin-left-10{margin-left:5px!important\n}\n.a_margin-top-20{margin-top:10px!important\n}\n.a_margin-right-20{margin-right:10px!important\n}\n.a_margin-bottom-20{margin-bottom:10px!important\n}\n.a_margin-left-20{margin-left:10px!important\n}\n.a_margin-top-40{margin-top:20px!important\n}\n.a_margin-right-40{margin-right:20px!important\n}\n.a_margin-bottom-40{margin-bottom:20px!important\n}\n.a_margin-left-40{margin-left:20px!important\n}\n.a_margin-top-60{margin-top:30px!important\n}\n.a_margin-right-60{margin-right:30px!important\n}\n.a_margin-bottom-60{margin-bottom:30px!important\n}\n.a_margin-left-60{margin-left:30px!important\n}\n.a_margin-top-80{margin-top:40px!important\n}\n.a_margin-right-80{margin-right:40px!important\n}\n.a_margin-bottom-80{margin-bottom:40px!important\n}\n.a_margin-left-80{margin-left:40px!important\n}\n.a_margin-top-100{margin-top:50px!important\n}\n.a_margin-right-100{margin-right:50px!important\n}\n.a_margin-bottom-100{margin-bottom:50px!important\n}\n.a_margin-left-100{margin-left:50px!important\n}\n@media (min-width:800px){\n.a_margin-top-0{margin-top:0!important\n}\n}\n@media (min-width:800px){\n.a_margin-right-0{margin-right:0!important\n}\n}\n@media (min-width:800px){\n.a_margin-bottom-0{margin-bottom:0!important\n}\n}\n@media (min-width:800px){\n.a_margin-left-0{margin-left:0!important\n}\n}\n@media (min-width:800px){\n.a_margin-top-10{margin-top:10px!important\n}\n}\n@media (min-width:800px){\n.a_margin-right-10{margin-right:10px!important\n}\n}\n@media (min-width:800px){\n.a_margin-bottom-10{margin-bottom:10px!important\n}\n}\n@media (min-width:800px){\n.a_margin-left-10{margin-left:10px!important\n}\n}\n@media (min-width:800px){\n.a_margin-top-20{margin-top:20px!important\n}\n}\n@media (min-width:800px){\n.a_margin-right-20{margin-right:20px!important\n}\n}\n@media (min-width:800px){\n.a_margin-bottom-20{margin-bottom:20px!important\n}\n}\n@media (min-width:800px){\n.a_margin-left-20{margin-left:20px!important\n}\n}\n@media (min-width:800px){\n.a_margin-top-40{margin-top:40px!important\n}\n}\n@media (min-width:800px){\n.a_margin-right-40{margin-right:40px!important\n}\n}\n@media (min-width:800px){\n.a_margin-bottom-40{margin-bottom:40px!important\n}\n}\n@media (min-width:800px){\n.a_margin-left-40{margin-left:40px!important\n}\n}\n@media (min-width:800px){\n.a_margin-top-60{margin-top:60px!important\n}\n}\n@media (min-width:800px){\n.a_margin-right-60{margin-right:60px!important\n}\n}\n@media (min-width:800px){\n.a_margin-bottom-60{margin-bottom:60px!important\n}\n}\n@media (min-width:800px){\n.a_margin-left-60{margin-left:60px!important\n}\n}\n@media (min-width:800px){\n.a_margin-top-80{margin-top:80px!important\n}\n}\n@media (min-width:800px){\n.a_margin-right-80{margin-right:80px!important\n}\n}\n@media (min-width:800px){\n.a_margin-bottom-80{margin-bottom:80px!important\n}\n}\n@media (min-width:800px){\n.a_margin-left-80{margin-left:80px!important\n}\n}\n@media (min-width:800px){\n.a_margin-top-100{margin-top:100px!important\n}\n}\n@media (min-width:800px){\n.a_margin-right-100{margin-right:100px!important\n}\n}\n@media (min-width:800px){\n.a_margin-bottom-100{margin-bottom:100px!important\n}\n}\n@media (min-width:800px){\n.a_margin-left-100{margin-left:100px!important\n}\n}\n.a_padding-top-0{padding-top:0!important\n}\n.a_padding-bottom-0{padding-bottom:0!important\n}\n@media (min-width:800px){\n.a_padding-top-0{padding-top:0!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-0{padding-bottom:0!important\n}\n}\n.a_padding-0{padding:0!important\n}\n@media (min-width:800px){\n.a_padding-0{padding:0!important\n}\n}\n.a_padding-top-10{padding-top:5px!important\n}\n.a_padding-bottom-10{padding-bottom:5px!important\n}\n@media (min-width:800px){\n.a_padding-top-10{padding-top:10px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-10{padding-bottom:10px!important\n}\n}\n.a_padding-10{padding:5px!important\n}\n@media (min-width:800px){\n.a_padding-10{padding:10px!important\n}\n}\n.a_padding-top-20{padding-top:10px!important\n}\n.a_padding-bottom-20{padding-bottom:10px!important\n}\n@media (min-width:800px){\n.a_padding-top-20{padding-top:20px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-20{padding-bottom:20px!important\n}\n}\n.a_padding-20{padding:10px!important\n}\n@media (min-width:800px){\n.a_padding-20{padding:20px!important\n}\n}\n.a_padding-top-40{padding-top:20px!important\n}\n.a_padding-bottom-40{padding-bottom:20px!important\n}\n@media (min-width:800px){\n.a_padding-top-40{padding-top:40px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-40{padding-bottom:40px!important\n}\n}\n.a_padding-40{padding:20px!important\n}\n@media (min-width:800px){\n.a_padding-40{padding:40px!important\n}\n}\n.a_padding-top-60{padding-top:30px!important\n}\n.a_padding-bottom-60{padding-bottom:30px!important\n}\n@media (min-width:800px){\n.a_padding-top-60{padding-top:60px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-60{padding-bottom:60px!important\n}\n}\n.a_padding-60{padding:30px!important\n}\n@media (min-width:800px){\n.a_padding-60{padding:60px!important\n}\n}\n.a_padding-top-80{padding-top:40px!important\n}\n.a_padding-bottom-80{padding-bottom:40px!important\n}\n@media (min-width:800px){\n.a_padding-top-80{padding-top:80px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-80{padding-bottom:80px!important\n}\n}\n.a_padding-80{padding:40px!important\n}\n@media (min-width:800px){\n.a_padding-80{padding:80px!important\n}\n}\n.a_padding-top-100{padding-top:50px!important\n}\n.a_padding-bottom-100{padding-bottom:50px!important\n}\n@media (min-width:800px){\n.a_padding-top-100{padding-top:100px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-100{padding-bottom:100px!important\n}\n}\n.a_padding-100{padding:50px!important\n}\n@media (min-width:800px){\n.a_padding-100{padding:100px!important\n}\n}\n.a_padding-top-120{padding-top:60px!important\n}\n.a_padding-bottom-120{padding-bottom:60px!importan