vue-scroll-table
Version:
A Vue table component with fully customizable cells (using scoped slots), a sticky first column, horizontal scrolling and pagination.
2 lines (1 loc) • 29 kB
JavaScript
var VueScrollTable=function(t){"use strict";var n=function(t,n,e,a,i,r,o,d){var s,l=("function"==typeof e?e.options:e)||{};if(l.__file="TablePart.vue",l.render||(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0,i&&(l.functional=!0)),l._scopeId=a,n&&(s=function(t){n.call(this,o(t))}),void 0!==s)if(l.functional){var p=l.render;l.render=function(t,n){return s.call(n),p(t,n)}}else{var m=l.beforeCreate;l.beforeCreate=m?[].concat(m,s):[s]}return l}({render:function(){var a=this,t=a.$createElement,i=a._self._c||t;return i("table",{class:[].concat(a.classes.table),style:a.styles.table},[i("thead",[i("tr",a._l(a.headers,function(n,e){return i("th",{key:"scroll-table-part-header-"+e,class:[].concat(a.classes.tableHeader),style:Object.assign({"min-width":n.width+"px",width:n.width+"px",cursor:n.sortable?"pointer":"default"},a.styles.tableHeader),on:{click:function(t){a.onHeaderClick(t,e,n.sortable)}}},[a._v("\n "+a._s(n.text)+"\n "),n.sortable?i("sort-icon",{attrs:{classes:{button:a.classes.button,active:a.classes.active},styles:{button:a.styles.button,active:a.styles.active},direction:a.direction}}):a._e()],1)}))]),a._v(" "),i("tbody",a._l(a.data,function(e,t){return i("tr",{key:"scroll-table-part-row-"+t,class:[].concat(a.classes.tableRow),style:a.styles.tableRow},[a._l(a.headers,function(t,n){return[void 0!==a.$scopedSlots[t.text.toLowerCase()]?i("td",{key:"scroll-table-part-row-item-"+n,class:[].concat(a.classes.tableData),style:a.styles.tableData},[a._t(t.text.toLowerCase(),null,{header:t,index:n,data:e[n],row:e})],2):i("td",{key:"scroll-table-part-row-item-"+n,class:[].concat(a.classes.tableData),style:a.styles.tableData},[a._v("\n "+a._s(a.getCellDisplayValue(e[n]))+"\n ")])]})],2)}))])},staticRenderFns:[]},function(t){t&&t("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:void 0,media:void 0})},{name:"table-part",props:["data","headers","direction","classes","styles"],components:{SortIcon:function(t,n,e,a,i,r,o,d){var s,l=("function"==typeof e?e.options:e)||{};if(l.__file="SortIcon.vue",l.render||(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0,i&&(l.functional=!0)),l._scopeId=a,n&&(s=function(t){n.call(this,o(t))}),void 0!==s)if(l.functional){var p=l.render;l.render=function(t,n){return s.call(n),p(t,n)}}else{var m=l.beforeCreate;l.beforeCreate=m?[].concat(m,s):[s]}return l}({render:function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("button",{staticClass:"vst_sort-btn",class:[].concat(t.classes.button),style:t.styles.button},[e("span",{class:"ascending"===this.direction?t.activeClasses:{},style:"ascending"===this.direction?t.activeStyle:{}},[t._v("\n ▲\n ")]),t._v(" "),e("span",{class:"descending"===this.direction?t.activeClasses:{},style:"descending"===this.direction?t.activeStyle:{}},[t._v("\n ▼\n ")])])},staticRenderFns:[]},function(t){t&&t("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:void 0,media:void 0})},{props:["classes","styles","direction"],name:"sort-icon",watch:{"classes.active":{immediate:!0,handler:function(t){var n=function(t,n){var e;return Object.assign({},t,((e={})[n]=!0,e))};this.activeClasses=Object.assign({},this.defaultActiveClasses.reduce(n,{}),t.reduce(n,{}))}},"styles.active":{immediate:!0,handler:function(t){this.activeStyle=Object.assign({},this.defaultActiveStyle,t)}}},data:function(){return{defaultActiveClasses:["s_active"],defaultActiveStyle:{},activeClasses:{},activeStyle:{}}}},"data-v-c717b436",!1,0,function t(){var l=document.head||document.getElementsByTagName("head")[0],p=t.styles||(t.styles={}),m="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(t,n){if(!document.querySelector('style[data-vue-ssr-id~="'+t+'"]')){var e=m?n.media||"default":t,a=p[e]||(p[e]={ids:[],parts:[],element:void 0});if(!a.ids.includes(t)){var i=n.source,r=a.ids.length;if(a.ids.push(t),n.map&&(i+="\n/*# sourceURL="+n.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),m&&(a.element=a.element||document.querySelector("style[data-group="+e+"]")),!a.element){var o=a.element=document.createElement("style");o.type="text/css",n.media&&o.setAttribute("media",n.media),m&&(o.setAttribute("data-group",e),o.setAttribute("data-next-index","0")),l.appendChild(o)}if(m&&(r=parseInt(a.element.getAttribute("data-next-index")),a.element.setAttribute("data-next-index",r+1)),a.element.styleSheet)a.parts.push(i),a.element.styleSheet.cssText=a.parts.filter(Boolean).join("\n");else{var d=document.createTextNode(i),s=a.element.childNodes;s[r]&&a.element.removeChild(s[r]),s.length?a.element.insertBefore(d,s[r]):a.element.appendChild(d)}}}}})},methods:{onHeaderClick:function(t,n,e){e&&this.$emit("sort",n)},getCellDisplayValue:function(t){return"object"==typeof t?Object.keys(t).includes("value")?t.value:(console.log("Cell data object should have a 'value' property, cell data:",t),t):t}}},"data-v-1e1ed9b3",!1,0,function t(){var l=document.head||document.getElementsByTagName("head")[0],p=t.styles||(t.styles={}),m="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(t,n){if(!document.querySelector('style[data-vue-ssr-id~="'+t+'"]')){var e=m?n.media||"default":t,a=p[e]||(p[e]={ids:[],parts:[],element:void 0});if(!a.ids.includes(t)){var i=n.source,r=a.ids.length;if(a.ids.push(t),n.map&&(i+="\n/*# sourceURL="+n.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),m&&(a.element=a.element||document.querySelector("style[data-group="+e+"]")),!a.element){var o=a.element=document.createElement("style");o.type="text/css",n.media&&o.setAttribute("media",n.media),m&&(o.setAttribute("data-group",e),o.setAttribute("data-next-index","0")),l.appendChild(o)}if(m&&(r=parseInt(a.element.getAttribute("data-next-index")),a.element.setAttribute("data-next-index",r+1)),a.element.styleSheet)a.parts.push(i),a.element.styleSheet.cssText=a.parts.filter(Boolean).join("\n");else{var d=document.createTextNode(i),s=a.element.childNodes;s[r]&&a.element.removeChild(s[r]),s.length?a.element.insertBefore(d,s[r]):a.element.appendChild(d)}}}}});var e,a,i,r,o,d=(e={render:function(){var t=this.$createElement,n=this._self._c||t;return n("div",{directives:[{name:"show",rawName:"v-show",value:this.loading,expression:"loading"}],staticClass:"vst_loader"},[n("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"}},[n("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"}}),this._v(" "),n("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"}},[n("animateTransform",{attrs:{attributeType:"xml",attributeName:"transform",type:"rotate",from:"0 20 20",to:"360 20 20",dur:"0.5s",repeatCount:"indefinite"}})],1)])])},staticRenderFns:[]},r=!(i="data-v-7131bad5"),(o=("function"==typeof(a={props:["loading"]})?a.options:a)||{}).__file="Loader.vue",o.render||(o.render=e.render,o.staticRenderFns=e.staticRenderFns,o._compiled=!0,r&&(o.functional=!0)),o._scopeId=i,o),s=function(t){return!(!(a=t)||"object"!=typeof a||(n=t,"[object RegExp]"===(e=Object.prototype.toString.call(n))||"[object Date]"===e||n.$$typeof===l));var n,e,a};var l="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function p(t,n){return!1!==n.clone&&n.isMergeableObject(t)?c((e=t,Array.isArray(e)?[]:{}),t,n):t;var e}function m(t,n,e){return t.concat(n).map(function(t){return p(t,e)})}function c(t,n,e){(e=e||{}).arrayMerge=e.arrayMerge||m,e.isMergeableObject=e.isMergeableObject||s;var a,i,r,o,d=Array.isArray(n);return d===Array.isArray(t)?d?e.arrayMerge(t,n,e):(a=t,i=n,o={},(r=e).isMergeableObject(a)&&Object.keys(a).forEach(function(t){o[t]=p(a[t],r)}),Object.keys(i).forEach(function(t){r.isMergeableObject(i[t])&&a[t]?o[t]=c(a[t],i[t],r):o[t]=p(i[t],r)}),o):p(n,e)}c.all=function(t,e){if(!Array.isArray(t))throw new Error("first argument should be an array");return t.reduce(function(t,n){return c(t,n,e)},{})};var g=c,u={pagination:{container:[],limit:{container:[],dropdown:[]},links:{container:[],buttons:[]}},tableContainer:[],sticky:{container:[],table:[],tableHeader:[],tableRow:[],tableData:[]},scroll:{container:[],table:[],tableHeader:[],tableRow:[],tableData:[]},sortButtons:{button:[],active:[]}},b={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 f(t){return g(u,t)}function h(t){return g(b,t)}var v={NUMBER:"NUMBER",LEFT:"LEFT",RIGHT:"RIGHT",ELLIPSIS:"ELLIPSIS"};function x(t){return{page:-1,label:"Previous",disabled:t,current:!1,buttonType:v.LEFT}}function y(t){return{page:-1,label:"Next",disabled:t,current:!1,buttonType:v.RIGHT}}function _(){return{page:-1,label:"...",disabled:!1,current:!1,buttonType:v.ELLIPSIS}}var w=function(t,n,e,a,i,r,o,d){var s,l=("function"==typeof e?e.options:e)||{};if(l.__file="Pagination.vue",l.render||(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0,i&&(l.functional=!0)),l._scopeId=a,n&&(s=function(t){n.call(this,o(t))}),void 0!==s)if(l.functional){var p=l.render;l.render=function(t,n){return s.call(n),p(t,n)}}else{var m=l.beforeCreate;l.beforeCreate=m?[].concat(m,s):[s]}return l}({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"vst_pagination_links",class:[].concat(e.paginationClasses.links.container),style:e.paginationStyles.links.container},e._l(e.paginationButtons,function(n,t){return a("button",{key:"scroll-table-pagination-link-"+t,class:[{s_active:n.current},[].concat(e.paginationClasses.links.buttons)],style:e.paginationStyles.links.buttons,attrs:{disabled:n.disabled},on:{click:function(t){e.onClick(n.buttonType,n.page)}}},["LEFT"===n.buttonType?[e._v("\n <\n ")]:"RIGHT"===n.buttonType?[e._v("\n >\n ")]:"ELLIPSIS"===n.buttonType?[e._v("\n ...\n ")]:[e._v("\n "+e._s(n.page)+"\n ")]],2)}))},staticRenderFns:[]},function(t){t&&t("data-v-7c0fdea6_0",{source:"\n.s_active{background-color:#ccc\n}",map:void 0,media:void 0})},{data:function(){return{page:1}},props:{paginationStyles:{type:Object,default:function(){return h({})}},paginationClasses:{type:Object,default:function(){return f({})}},pages:{type:Number,default:function(){return 1}}},methods:{paginate:function(t){this.page=t,this.$emit("on-paginated",t)},onClick:function(t,n){var e=this,a={LEFT:function(){return e.paginate(e.page-1)},RIGHT:function(){return e.paginate(e.page+1)},ELLIPSIS:function(){},default:function(){return e.paginate(n)}};return(a[t]||a.default)()}},computed:{paginationButtons:function(){return e=this.pages,a=this.page,e<1?[]:(a<1&&(a=1),e<a&&(a=e),e<=7?[x(1===a)].concat(Array.from({length:e},function(t,n){return{page:n+1,label:n+1,disabled:!1,current:n+1===a,buttonType:v.NUMBER}}),[y(a===e)]):7<e&&a<=4?[x(1===a)].concat(Array.from({length:5},function(t,n){return{page:n+1,label:n+1,disabled:!1,current:n+1===a,buttonType:v.NUMBER}}),[_()],[{page:e,label:e,disabled:!1,current:!1,buttonType:v.NUMBER}],[y(a===e)]):7<e&&e-4<a?[x(1===a),{page:1,label:1,disabled:!1,current:!1,buttonType:v.NUMBER},_()].concat(Array.from({length:5},function(t,n){return{page:e-4+n,label:e-4+n,disabled:!1,current:e-4+n===a,buttonType:v.NUMBER}}),[y(a===e)]):7<e&&4<a&&a<=e-4?[x(1===a),{page:1,label:1,disabled:!1,current:!1,buttonType:v.NUMBER},_()].concat(Array.from({length:3},function(t,n){return{page:a-1+n,label:a-1+n,disabled:!1,current:a-1+n===a,buttonType:v.NUMBER}}),[_()],[{page:e,label:e,disabled:!1,current:!1,buttonType:v.NUMBER}],[y(a===e)]):void 0);var e,a}}},void 0,!1,0,function t(){var l=document.head||document.getElementsByTagName("head")[0],p=t.styles||(t.styles={}),m="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(t,n){if(!document.querySelector('style[data-vue-ssr-id~="'+t+'"]')){var e=m?n.media||"default":t,a=p[e]||(p[e]={ids:[],parts:[],element:void 0});if(!a.ids.includes(t)){var i=n.source,r=a.ids.length;if(a.ids.push(t),n.map&&(i+="\n/*# sourceURL="+n.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),m&&(a.element=a.element||document.querySelector("style[data-group="+e+"]")),!a.element){var o=a.element=document.createElement("style");o.type="text/css",n.media&&o.setAttribute("media",n.media),m&&(o.setAttribute("data-group",e),o.setAttribute("data-next-index","0")),l.appendChild(o)}if(m&&(r=parseInt(a.element.getAttribute("data-next-index")),a.element.setAttribute("data-next-index",r+1)),a.element.styleSheet)a.parts.push(i),a.element.styleSheet.cssText=a.parts.filter(Boolean).join("\n");else{var d=document.createTextNode(i),s=a.element.childNodes;s[r]&&a.element.removeChild(s[r]),s.length?a.element.insertBefore(d,s[r]):a.element.appendChild(d)}}}}});var C=function(t,n,e,a,i,r,o,d){var s,l=("function"==typeof e?e.options:e)||{};if(l.__file="ScrollTable.vue",l.render||(l.render=t.render,l.staticRenderFns=t.staticRenderFns,l._compiled=!0,i&&(l.functional=!0)),l._scopeId=a,n&&(s=function(t){n.call(this,o(t))}),void 0!==s)if(l.functional){var p=l.render;l.render=function(t,n){return s.call(n),p(t,n)}}else{var m=l.beforeCreate;l.beforeCreate=m?[].concat(m,s):[s]}return l}({render:function(){var e=this,t=e.$createElement,a=e._self._c||t;return e.data?a("div",{staticClass:"vst_table-component-container"},[a("div",{staticClass:"vst_pagination-container a_margin-bottom-20",class:[].concat(e.mergedClasses.pagination.container),style:e.mergedStyles.pagination.container},[a("div",{staticClass:"vst_pagination_limit a_margin-right-20",class:[].concat(e.mergedClasses.pagination.limit.container),style:e.mergedStyles.pagination.limit.container},[a("select",{directives:[{name:"model",rawName:"v-model",value:e.limit,expression:"limit"}],staticClass:"v_transparent",class:[].concat(e.mergedClasses.pagination.limit.dropdown),style:e.mergedStyles.pagination.limit.dropdown,on:{change:function(t){var n=Array.prototype.filter.call(t.target.options,function(t){return t.selected}).map(function(t){return"_value"in t?t._value:t.value});e.limit=t.target.multiple?n:n[0]}}},e._l(e.limits,function(t,n){return a("option",{key:"scroll-table-limit-"+n,domProps:{value:t}},[e._v("\n "+e._s(t)+" "+e._s(e.translations.limit)+"\n ")])}))]),e._v(" "),a("pagination",{staticClass:"vst_pagination_links",attrs:{classes:e.classes,styles:e.styles,pages:e.pages,paginationClasses:e.mergedClasses.pagination,paginationStyles:e.mergedStyles.pagination,limits:e.limits,translations:e.translations},on:{"on-paginated":e.paginate}})],1),e._v(" "),a("div",{staticClass:"vst_table-container",class:[{"v_has-scroll":e.hasScroll}].concat(e.mergedClasses.tableContainer),style:e.mergedStyles.tableContainer},[e.hasScroll?a("div",{staticClass:"vst_table-overlay",class:[].concat(e.mergedClasses.sticky.container),style:Object.assign({width:e.headers[0].width+"px"},e.mergedStyles.sticky.container)},[a("table-part",{ref:"overlay",attrs:{classes:Object.assign(e.mergedClasses.sticky,e.mergedClasses.sortButtons),styles:Object.assign(e.mergedStyles.sticky,e.mergedStyles.sortButtons),headers:e.headers,data:e.limitedData,direction:e.direction},on:{sort:function(t){e.sortBy(t)}},scopedSlots:e._u([e._l(Object.keys(e.$scopedSlots),function(n){return{key:n,fn:function(t){return[e._t(n,null,null,t)]}}})])},[e._l(Object.keys(e.$slots),function(t){return e._t(t,null,{slot:t})})],2)],1):e._e(),e._v(" "),a("div",{staticClass:"vst_table-scroll",class:[].concat(e.mergedClasses.scroll.container),style:e.mergedStyles.scroll.container},[a("table-part",{ref:"scroll",attrs:{classes:Object.assign(e.mergedClasses.scroll,e.mergedClasses.sortButtons),styles:Object.assign(e.mergedStyles.scroll,e.mergedStyles.sortButtons),headers:e.headers,data:e.limitedData,direction:e.direction},on:{sort:function(t){e.sortBy(t)}},scopedSlots:e._u([e._l(Object.keys(e.$scopedSlots),function(n){return{key:n,fn:function(t){return[e._t(n,null,null,t)]}}})])},[e._l(Object.keys(e.$slots),function(t){return e._t(t,null,{slot:t})})],2)],1)]),e._v(" "),e.data?e._e():a("loader",{attrs:{loading:e.loading}})],1):e._e()},staticRenderFns:[]},function(t){t&&t("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!important\n}\n@media (min-width:800px){\n.a_padding-top-120{padding-top:120px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-120{padding-bottom:120px!important\n}\n}\n.a_padding-120{padding:60px!important\n}\n@media (min-width:800px){\n.a_padding-120{padding:120px!important\n}\n}\n.a_padding-top-140{padding-top:70px!important\n}\n.a_padding-bottom-140{padding-bottom:70px!important\n}\n@media (min-width:800px){\n.a_padding-top-140{padding-top:140px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-140{padding-bottom:140px!important\n}\n}\n.a_padding-140{padding:70px!important\n}\n@media (min-width:800px){\n.a_padding-140{padding:140px!important\n}\n}\n*{box-sizing:border-box\n}\n.vst_table-container{width:100%;position:relative\n}\n.vst_table-container.v_has-scroll .vst_table-overlay{height:calc(100% - 16px)\n}\n.vst_table-overlay{height:100%;background-color:#fff;position:absolute;top:0;left:0;overflow:hidden;z-index:1\n}\n.vst_table-overlay.v_has-scroll{display:none\n}\n.vst_table-scroll{overflow-x:auto\n}\n.vst_table-scroll table{width:100%\n}\n.vst_loader{width:100%;height:100%;position:absolute;top:0;left:calc(100% - 42px)\n}",map:void 0,media:void 0})},{name:"scroll-table",mounted:function(){this.limits.length&&(this.limit=this.limits[0]),this.hasScroll&&window.addEventListener("resize",this.handleResize),this.$nextTick(this.handleResize)},beforeDestroy:function(){this.hasScroll&&window.removeEventListener("resize",this.handleResize)},props:{limits:{type:Array,default:function(){return[25,50,100]}},hasScroll:{default:!1},data:{default:function(){return[]}},headers:{default:function(){return[]}},styles:{type:Object,default:function(){return h({})}},classes:{type:Object,default:function(){return f({})}},translations:{type:Object,default:function(){return{limit:"per page"}}}},watch:{limit:function(){this.page=1}},data:function(){return{loading:!1,limit:0,page:1,sortKey:"naam",direction:"descending",mergedClasses:f(this.classes),mergedStyles:h(this.styles)}},computed:{limitedData:function(){var e=this,a=this,t=0===e.data.length?function(){return 0}:"object"==typeof e.data[0][e.sortKey]?function(t,n){return t[e.sortKey].value>n[e.sortKey].value?"descending"===e.direction?-1:1:t[e.sortKey].value<n[e.sortKey].value?"descending"===e.direction?1:-1:0}:function(t,n){return t[e.sortKey]>n[e.sortKey]?"descending"===e.direction?-1:1:t[e.sortKey]<n[e.sortKey]?"descending"===e.direction?1:-1:0},n=[].concat(this.data).sort(t).filter(function(t,n){return n>=(a.page-1)*a.limit&&n<a.page*a.limit});return this.limit?n:this.data||[]},pages:function(){if(!this.data.length||!this.limit)return 0;var t=Math.ceil(this.data.length/this.limit);return t}},methods:{paginate:function(t){this.page=t},sortBy:function(t){this.direction="descending"===this.direction?"ascending":"descending",this.sortKey=t},handleResize:function(){this.hasScroll&&(this.$refs.overlay.$el.style.width=this.$refs.scroll.$el.offsetWidth+"px")}},components:{TablePart:n,Loader:d,Pagination:w}},void 0,!1,0,function t(){var l=document.head||document.getElementsByTagName("head")[0],p=t.styles||(t.styles={}),m="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(t,n){if(!document.querySelector('style[data-vue-ssr-id~="'+t+'"]')){var e=m?n.media||"default":t,a=p[e]||(p[e]={ids:[],parts:[],element:void 0});if(!a.ids.includes(t)){var i=n.source,r=a.ids.length;if(a.ids.push(t),n.map&&(i+="\n/*# sourceURL="+n.map.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n.map))))+" */"),m&&(a.element=a.element||document.querySelector("style[data-group="+e+"]")),!a.element){var o=a.element=document.createElement("style");o.type="text/css",n.media&&o.setAttribute("media",n.media),m&&(o.setAttribute("data-group",e),o.setAttribute("data-next-index","0")),l.appendChild(o)}if(m&&(r=parseInt(a.element.getAttribute("data-next-index")),a.element.setAttribute("data-next-index",r+1)),a.element.styleSheet)a.parts.push(i),a.element.styleSheet.cssText=a.parts.filter(Boolean).join("\n");else{var d=document.createTextNode(i),s=a.element.childNodes;s[r]&&a.element.removeChild(s[r]),s.length?a.element.insertBefore(d,s[r]):a.element.appendChild(d)}}}}});function S(t){S.installed||(S.installed=!0,t.component("scroll-table",C))}var R={install:S},T=null;return"undefined"!=typeof window?T=window.Vue:"undefined"!=typeof global&&(T=global.Vue),T&&T.use(R),t.install=S,t.default=C,t}({});