vue-bootstrap-table2
Version:
A sortable and searchable vue table, as a Vue component, using bootstrap styling.
553 lines (490 loc) • 352 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else if(typeof exports === 'object')
exports["VueBootstrapTable"] = factory();
else
root["VueBootstrapTable"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _VueBootstrapTable = __webpack_require__(1);
var _VueBootstrapTable2 = _interopRequireDefault(_VueBootstrapTable);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
module.exports = _VueBootstrapTable2.default;
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
var __vue_script__, __vue_template__
var __vue_styles__ = {}
__webpack_require__(2)
__vue_script__ = __webpack_require__(6)
if (Object.keys(__vue_script__).some(function (key) { return key !== "default" && key !== "__esModule" })) {
console.warn("[vue-loader] src/VueBootstrapTable.vue: named exports in *.vue files are ignored.")}
__vue_template__ = __webpack_require__(49)
module.exports = __vue_script__ || {}
if (module.exports.__esModule) module.exports = module.exports.default
var __vue_options__ = typeof module.exports === "function" ? (module.exports.options || (module.exports.options = {})) : module.exports
if (__vue_template__) {
__vue_options__.template = __vue_template__
}
if (!__vue_options__.computed) __vue_options__.computed = {}
Object.keys(__vue_styles__).forEach(function (key) {
var module = __vue_styles__[key]
__vue_options__.computed[key] = function () { return module }
})
if (false) {(function () { module.hot.accept()
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
var id = "_v-02b4a2b7/VueBootstrapTable.vue"
if (!module.hot.data) {
hotAPI.createRecord(id, module.exports)
} else {
hotAPI.update(id, module.exports, __vue_template__)
}
})()}
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(3);
if(typeof content === 'string') content = [[module.id, content, '']];
// add the styles to the DOM
var update = __webpack_require__(5)(content, {});
if(content.locals) module.exports = content.locals;
// Hot Module Replacement
if(false) {
// When the styles change, update the <style> tags
if(!content.locals) {
module.hot.accept("!!../node_modules/css-loader/index.js?sourceMap!../node_modules/vue-loader/lib/style-rewriter.js!../node_modules/vue-loader/lib/selector.js?type=style&index=0!./VueBootstrapTable.vue", function() {
var newContent = require("!!../node_modules/css-loader/index.js?sourceMap!../node_modules/vue-loader/lib/style-rewriter.js!../node_modules/vue-loader/lib/selector.js?type=style&index=0!./VueBootstrapTable.vue");
if(typeof newContent === 'string') newContent = [[module.id, newContent, '']];
update(newContent);
});
}
// When the module is disposed, remove the <style> tags
module.hot.dispose(function() { update(); });
}
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(4)();
// imports
// module
exports.push([module.id, "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n .vue-table {\n\n }\n\n /*#maindiv {\n content: \" \";\n box-sizing: border-box;\n display:\n table; width: 100%;\n }\n*/\n .spinner {\n border: 16px solid #f3f3f3; /* Light grey */\n border-top: 16px solid #3498db; /* Blue */\n border-radius: 50%;\n width: 120px;\n height: 120px;\n -webkit-animation: spin 2s linear infinite;\n animation: spin 2s linear infinite;\n position: absolute;\n left: 50%;\n top: 50%;\n margin: -60px 0 0 -60px;\n }\n\n @-webkit-keyframes spin {\n 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\n 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\n }\n\n @keyframes spin {\n 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }\n 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }\n }\n\n\n .vue-table-loading{\n position: absolute;\n z-index: 99;\n background-color: #ddd;\n opacity: 0.5;\n width: 100%;\n height: 100%;\n }\n\n .vue-table-loading-hidden {\n display: none;\n }\n\n table.vue-table thead > tr > th {\n cursor: pointer;\n padding-right: 30px !important;\n }\n\n /*.vue-table th.active {\n color: red;\n }*/\n\n .vue-table .arrow {\n opacity: 1;\n position: relative;\n }\n\n .vue-table .arrow:after {\n position: absolute;\n bottom: 8px;\n right: 8px;\n display: block;\n font-family: 'Glyphicons Halflings';\n content: \"\\E150\";\n /*\n display: inline-block;\n vertical-align: middle;\n width: 0;\n height: 0;\n margin-left: 5px;\n opacity: 0.66;*/\n }\n\n .vue-table .arrow.asc:after {\n content: \"\\E155\";\n /*\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 4px solid #000;\n */\n }\n\n .vue-table .arrow.dsc:after {\n content: \"\\E156\";\n }\n\n\n .vue-table .editableField {\n cursor:pointer;\n }\n\n /*.vue-table .selected-cell {\n background-color: #F7C072;\n }\n\n .vue-table .selected-row {\n background-color: #FAE1BE !important;\n }*/\n", "", {"version":3,"sources":["/./src/VueBootstrapTable.vue?1679b434"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAkFA;;KAEA;;IAEA;;;;;;EAMA;IACA;QACA,2BAAA,CAAA,gBAAA;QACA,+BAAA,CAAA,UAAA;QACA,mBAAA;QACA,aAAA;QACA,cAAA;QACA,2CAAA;gBAAA,mCAAA;QACA,mBAAA;QACA,UAAA;QACA,SAAA;QACA,wBAAA;KACA;;IAEA;QACA,KAAA,gCAAA,CAAA,wBAAA,EAAA;QACA,OAAA,kCAAA,CAAA,0BAAA,EAAA;KACA;;IAHA;QACA,KAAA,gCAAA,CAAA,wBAAA,EAAA;QACA,OAAA,kCAAA,CAAA,0BAAA,EAAA;KACA;;;IAGA;QACA,mBAAA;QACA,YAAA;QACA,uBAAA;QACA,aAAA;QACA,YAAA;QACA,aAAA;KACA;;IAEA;QACA,cAAA;KACA;;IAEA;QACA,gBAAA;QACA,+BAAA;KACA;;IAEA;;OAEA;;IAEA;QACA,WAAA;QACA,mBAAA;KACA;;IAEA;QACA,mBAAA;QACA,YAAA;QACA,WAAA;QACA,eAAA;QACA,oCAAA;QACA,iBAAA;QACA;;;;;;wBAMA;KACA;;IAEA;QACA,iBAAA;QACA;;;;UAIA;KACA;;IAEA;QACA,iBAAA;KACA;;;IAGA;QACA,eAAA;KACA;;IAEA;;;;;;OAMA","file":"VueBootstrapTable.vue","sourcesContent":["<template>\n <div id=\"maindiv\" @click=\"closeDropdown\" @keyup.esc=\"closeDropdown\">\n <!--<pre>{{columns | json}}</pre>-->\n <!--<pre>{{$data | json}}</pre>-->\n <div class=\"col-sm-6\">\n <div v-if=\"showFilter\" style=\"padding-top: 10px;padding-bottom: 10px;\">\n <div class=\"input-group\">\n <input type=\"text\" class=\"form-control\" placeholder=\"Filter\" v-model=\"filterKey\">\n <div class=\"input-group-addon\">\n <i class=\"glyphicon glyphicon-search\"></i>\n </div>\n </div>\n </div>\n </div>\n <div class=\"col-sm-6\">\n <div v-if=\"showColumnPicker\" style=\"padding-top: 10px;padding-bottom: 10px;float:right;\">\n <div class=\"btn-group\" :class=\"{'open' : columnMenuOpen}\">\n <button @click.stop.prevent=\"columnMenuOpen = !columnMenuOpen\" @keyup.esc=\"columnMenuOpen = false\"\n type=\"button\" class=\"btn btn-default dropdown-toggle\" data-toggle=\"dropdown\"\n aria-haspopup=\"true\">\n Columns <span class=\"caret\"></span>\n </button>\n <ul class=\"dropdown-menu\">\n <li v-for=\"column in displayCols\">\n <a href=\"#\" @click.stop.prevent=\"toggleColumn(column)\">\n <i v-if=\"column.visible\" class=\"glyphicon glyphicon-ok\"></i> {{column.title}}\n </a>\n </li>\n </ul>\n </div>\n </div>\n </div>\n <div class=\"col-sm-12\">\n <div id=\"loadingdiv\" :class=\"{'vue-table-loading': this.loading , 'vue-table-loading-hidden': !this.loading}\">\n <div class=\"spinner\"></div>\n </div>\n <table class=\"table table-bordered table-hover table-condensed table-striped vue-table\">\n <thead>\n <tr>\n <th v-for=\"column in displayColsVisible\" @click=\"sortBy($event, column.name)\"\n track-by=\"$index\"\n :class=\"getClasses(column)\">\n {{ column.title }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr v-for=\"entry in filteredValuesSorted \" track-by=\"$index\" @click=\"rowClickHandler($event, entry)\">\n <td v-for=\"column in displayColsVisible\" track-by=\"$index\"\n v-show=\"column.visible\" :class=\"column.cellstyle\">\n <span v-if=\"column.renderfunction!==false\" v-html=\"column.renderfunction( column.name, entry )\"></span>\n <span v-if=\"column.renderfunction===false && !column.editable\"> {{ entry[column.name] }} </span>\n <value-field-section v-if=\"column.renderfunction===false && column.editable\"\n :entry=\"entry\"\n :columnname=\"column.name\"></value-field-section>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n <div v-if=\"paginated\" class=\"col-sm-12\">\n <div class=\"btn-toolbar\" role=\"toolbar\" aria-label=\"pagination bar\">\n <div class=\"btn-group\" role=\"group\" aria-label=\"first page\">\n <button type=\"button\" class=\"btn btn-default\" @click=\"this.page=1\">«</button>\n </div>\n <div class=\"btn-group\" role=\"group\" aria-label=\"pages\">\n <button v-for=\"index in validPageNumbers\"\n type=\"button\" class=\"btn btn-default\"\n :class=\"{ active: this.page===index }\"\n @click=\"this.page=index\">\n {{index}}\n </button>\n </div>\n <div class=\"btn-group\" v-if=\"showPaginationEtc\">...</div>\n <div class=\"btn-group\" role=\"group\" aria-label=\"last page\">\n <button type=\"button\" class=\"btn btn-default\" @click=\"this.page=this.maxPage\">»</button>\n </div>\n </div>\n </div>\n </div>\n</template>\n<style>\n .vue-table {\n\n }\n\n /*#maindiv {\n content: \" \";\n box-sizing: border-box;\n display:\n table; width: 100%;\n }\n*/\n .spinner {\n border: 16px solid #f3f3f3; /* Light grey */\n border-top: 16px solid #3498db; /* Blue */\n border-radius: 50%;\n width: 120px;\n height: 120px;\n animation: spin 2s linear infinite;\n position: absolute;\n left: 50%;\n top: 50%;\n margin: -60px 0 0 -60px;\n }\n\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n\n\n .vue-table-loading{\n position: absolute;\n z-index: 99;\n background-color: #ddd;\n opacity: 0.5;\n width: 100%;\n height: 100%;\n }\n\n .vue-table-loading-hidden {\n display: none;\n }\n\n table.vue-table thead > tr > th {\n cursor: pointer;\n padding-right: 30px !important;\n }\n\n /*.vue-table th.active {\n color: red;\n }*/\n\n .vue-table .arrow {\n opacity: 1;\n position: relative;\n }\n\n .vue-table .arrow:after {\n position: absolute;\n bottom: 8px;\n right: 8px;\n display: block;\n font-family: 'Glyphicons Halflings';\n content: \"\\e150\";\n /*\n display: inline-block;\n vertical-align: middle;\n width: 0;\n height: 0;\n margin-left: 5px;\n opacity: 0.66;*/\n }\n\n .vue-table .arrow.asc:after {\n content: \"\\e155\";\n /*\n border-left: 4px solid transparent;\n border-right: 4px solid transparent;\n border-bottom: 4px solid #000;\n */\n }\n\n .vue-table .arrow.dsc:after {\n content: \"\\e156\";\n }\n\n\n .vue-table .editableField {\n cursor:pointer;\n }\n\n /*.vue-table .selected-cell {\n background-color: #F7C072;\n }\n\n .vue-table .selected-row {\n background-color: #FAE1BE !important;\n }*/\n</style>\n<script>\n\n import axios from 'axios';\n import qs from 'qs';\n import lodashorderby from 'lodash.orderby';\n import lodashincludes from 'lodash.includes';\n import lodashfindindex from 'lodash.findindex';\n\n\n /* Field Section used for displaying and editing value of cell */\n var valueFieldSection = {\n template: '<span v-if=\"!enabled\" @dblclick=\"toggleInput\" class=\"editableField\">{{this.entry[this.columnname]}}</span>'+\n '<div v-if=\"enabled\" class=\"input-group\">'+\n ' <input type=\"text\" class=\"form-control\" v-model=\"datavalue\" @keyup.enter=\"saveThis\" @keyup.esc=\"cancelThis\">'+\n ' <span class=\"input-group-btn\">'+\n ' <button class=\"btn btn-danger\" type=\"button\" @click=\"cancelThis\" ><span class=\"glyphicon glyphicon-remove\" aria-hidden=\"true\"></span></button>'+\n ' <button class=\"btn btn-primary\" type=\"button\" @click=\"saveThis\" ><span class=\"glyphicon glyphicon-ok\" aria-hidden=\"true\"></span></button>'+\n ' </span>'+\n '</div>',\n props: ['entry','columnname'],\n data: function () {\n return {\n enabled: false,\n datavalue: \"\",\n }\n },\n methods: {\n saveThis: function () {\n var originalValue = this.entry[this.columnname];\n this.entry[this.columnname] = this.datavalue;\n this.$dispatch('cellDataModifiedEvent', originalValue, this.datavalue, this.columnname, this.entry);\n this.enabled = !this.enabled;\n },\n cancelThis: function () {\n this.datavalue = this.entry[this.columnname];\n this.enabled = !this.enabled;\n },\n toggleInput: function () {\n this.datavalue= this.entry[this.columnname];\n this.enabled=!this.enabled;\n },\n }\n };\n\n export default {\n name: \"VueBootstrapTable\",\n components: {\n 'value-field-section': valueFieldSection,\n },\n props: {\n /**\n * The column titles, required\n */\n columns: {\n type: Array,\n required: true,\n },\n /**\n * The rows, an Array of objects\n */\n values: {\n type: Array,\n required: false,\n },\n /**\n * Enable/disable table sorting, optional, default true\n */\n sortable: {\n type: Boolean,\n required: false,\n default: true,\n },\n /**\n * Enable/disable table multicolumn sorting, optional, default false.\n * Also sortable must be enabled for this function to work.\n */\n multiColumnSortable: {\n type: Boolean,\n required: false,\n default: false,\n },\n /**\n * Enable/disable input filter, optional, default false\n */\n showFilter: {\n type: Boolean,\n required: false,\n default: false,\n },\n /**\n * Define if Filter search field is to work in a case Sensitive way. Default: true\n */\n filterCaseSensitive: {\n type: Boolean,\n required: false,\n default: true,\n },\n /**\n * Enable/disable column picker to show/hide table columns, optional, default false\n */\n showColumnPicker: {\n type: Boolean,\n required: false,\n default: false,\n },\n /**\n * Enable/disable pagination for the table, optional, default false\n */\n paginated: {\n type: Boolean,\n required: false,\n default: false,\n },\n /**\n * If pagination is enabled defining the page size, optional, default 10\n */\n pageSize: {\n type: Number,\n required: false,\n default: 10,\n },\n /**\n * If loading of table is to be done through ajax, then this object must be set\n */\n ajax: {\n type: Object,\n required: false,\n default: function () {\n return {\n enabled: false,\n url: \"\",\n method: \"GET\",\n delegate: false,\n axiosConfig: {}\n }\n }\n },\n /**\n * Function to handle row clicks\n */\n rowClickHandler: {\n type: Function,\n required: false,\n default: function () {}\n },\n },\n data: function () {\n return {\n filteredSize: 0,\n filterKey: \"\",\n sortKey: [],\n sortOrders: {},\n sortChanged: 1,\n columnMenuOpen: false,\n displayCols: [],\n filteredValues: [],\n page: 1,\n echo: 0,\n loading: false,\n };\n },\n ready: function () {\n this.loading= true;\n this.setSortOrders();\n var self = this;\n this.columns.forEach(function (column) {\n var obj = self.buildColumnObject(column);\n self.displayCols.push(obj);\n });\n if (this.ajax.enabled) {\n if (!this.ajax.delegate) {\n this.loading= true;\n this.fetchData(function (data) {\n self.values = data.data;\n self.processFilter();\n });\n }else\n this.processFilter();\n }else\n this.processFilter();\n },\n watch: {\n values: function () {\n this.processFilter();\n },\n columns: function () {\n this.displayCols = [];\n var self = this;\n this.columns.forEach(function (column) {\n var obj = self.buildColumnObject(column);\n self.displayCols.push(obj);\n });\n this.setSortOrders();\n },\n showFilter: function () {\n this.filterKey = \"\";\n },\n showColumnPicker: function () {\n this.columnMenuOpen = false;\n\n this.displayCols.forEach(function (column) {\n column.visible = true;\n });\n },\n filterKey: function () {\n // filter was updated, so resetting to page 1\n this.page = 1;\n this.processFilter();\n },\n sortKey: function () {\n this.processFilter();\n },\n sortChanged: function () {\n this.processFilter();\n },\n page: function () {\n this.processFilter();\n },\n paginated: function () {\n this.processFilter();\n },\n loading: function () {\n /*document.getElementById(\"loadingdiv\").style.width = document.getElementById(\"maindiv\").getBoundingClientRect().width + \"px\";\n document.getElementById(\"loadingdiv\").style.height = document.getElementById(\"maindiv\").getBoundingClientRect().height+\"px\";*/\n }\n },\n computed: {\n displayColsVisible: function () {\n var displayColsVisible = [];\n for (var a in this.displayCols) {\n if (this.displayCols[a].visible)\n displayColsVisible.push(this.displayCols[a]);\n }\n return displayColsVisible;\n },\n filteredValuesSorted: function () {\n var tColsDir = [];\n for(var i=0, len=this.sortKey.length; i < len; i++){\n tColsDir.push(this.sortOrders[this.sortKey[i]].toLowerCase());\n }\n return lodashorderby(this.filteredValues, this.sortKey , tColsDir);\n },\n validPageNumbers: function () {\n // 5 page max\n var result = [];\n var start = 1;\n if (this.page > 3)\n start = this.page-2;\n for ( var i = 0 ; start <= this.maxPage && i<5; start++ ) {\n result.push(start);\n i++;\n }\n return result;\n },\n maxPage: function () {\n return Math.ceil(this.filteredSize / this.pageSize);\n },\n showPaginationEtc: function () {\n var temp = 1;\n if (this.page > 3)\n temp = this.page-2;\n return ( (temp+4) < this.maxPage );\n },\n },\n methods: {\n processFilter: function () {\n var self = this;\n this.loading = true;\n if ( this.ajax.enabled && this.ajax.delegate ) {\n this.fetchData(function (data) {\n self.filteredSize = data.filtered;\n self.filteredValues = data.data;\n self.loading = false;\n });\n } else {\n var result = this.values.filter(item => {\n var good = false;\n for (var col in self.displayColsVisible) {\n if (self.filterCaseSensitive) {\n if (lodashincludes(item[self.displayColsVisible[col].name] + \"\", self.filterKey + \"\")) {\n good = true;\n }\n } else {\n if (lodashincludes((item[self.displayColsVisible[col].name] + \"\").toLowerCase(), (self.filterKey + \"\").toLowerCase())) {\n good = true;\n }\n }\n\n }\n return good;\n });\n\n var tColsDir = [];\n for(var i=0, len=this.sortKey.length; i < len; i++){\n tColsDir.push(this.sortOrders[this.sortKey[i]].toLowerCase());\n }\n\n result = lodashorderby(result, this.sortKey, tColsDir);\n\n this.filteredSize = result.length;\n if (this.paginated) {\n var startIndex = (this.page - 1) * this.pageSize;\n var tIndex = 0;\n var tempResult = [];\n while (tIndex < this.pageSize) {\n if (typeof result[startIndex + tIndex] !== \"undefined\")\n tempResult.push(result[startIndex + tIndex]);\n tIndex++;\n }\n self.filteredValues = tempResult;\n } else\n self.filteredValues = result;\n self.loading = false;\n }\n },\n fetchData: function ( dataCallBackFunction ) {\n var self = this;\n var ajaxParameters = {\n params: {}\n };\n this.echo++;\n if (this.ajax.enabled && this.ajax.delegate) {\n var tColsDir = [];\n for(var i=0, len=this.sortKey.length; i < len; i++){\n tColsDir.push(this.sortOrders[this.sortKey[i]].toLowerCase());\n }\n if ( this.ajax.method=== \"GET\" ) {\n //COPY\n ajaxParameters = JSON.parse(JSON.stringify(this.ajax.axiosConfig));\n ajaxParameters.params = {};\n ajaxParameters.params.sortcol = this.sortKey;\n ajaxParameters.params.sortdir = tColsDir;\n ajaxParameters.params.filter = this.filterKey;\n if (self.paginated ) {\n ajaxParameters.params.page = this.page;\n ajaxParameters.params.pagesize = this.pageSize;\n } else {\n ajaxParameters.params.page = 1;\n ajaxParameters.params.pagesize = null;\n }\n ajaxParameters.params.echo = this.echo;\n }\n if ( this.ajax.method=== \"POST\" ) {\n ajaxParameters.sortcol = this.sortKey;\n ajaxParameters.sortdir = tColsDir;\n ajaxParameters.filter = this.filterKey;\n if (self.paginated ) {\n ajaxParameters.page = this.page;\n ajaxParameters.pagesize = this.pageSize;\n } else {\n ajaxParameters.page = 1;\n ajaxParameters.pagesize = null;\n }\n ajaxParameters.echo = this.echo;\n }\n //console.log(JSON.stringify(ajaxParameters));\n }\n if( this.ajax.enabled && !this.ajax.delegate ) {\n if ( this.ajax.method=== \"GET\" ) {\n //COPY\n ajaxParameters = JSON.parse(JSON.stringify(this.ajax.axiosConfig));\n ajaxParameters.params = {};\n }\n if ( this.ajax.method=== \"POST\" ) {\n // Do nothing at this point !\n }\n }\n if (this.ajax.enabled && this.ajax.method === \"GET\") {\n axios.get(self.ajax.url, ajaxParameters )\n .then(response => {\n if (this.ajax.delegate) {\n if (response.data.echo !== self.echo) {\n return;\n }\n }\n\n dataCallBackFunction(response.data);\n this.$dispatch('ajaxLoadedEvent', response.data);\n })\n .catch(e => {\n this.$dispatch('ajaxLoadingError', e);\n });\n }\n if (this.ajax.enabled && this.ajax.method === \"POST\") {\n axios.post(self.ajax.url, qs.stringify(ajaxParameters) , this.ajax.axiosConfig )\n .then(response => {\n if (this.ajax.delegate) {\n if (response.data.echo !== self.echo) {\n return;\n }\n }\n\n dataCallBackFunction(response.data);\n this.$dispatch('ajaxLoadedEvent', response.data);\n })\n .catch(e => {\n this.$dispatch('ajaxLoadingError', e);\n });\n }\n },\n buildColumnObject: function (column) {\n var obj = {};\n obj.title = column.title;\n if ( typeof column.name !== \"undefined\")\n obj.name = column.name;\n else\n obj.name = column.title;\n if ( typeof column.visible !== \"undefined\")\n obj.visible = column.visible;\n else\n obj.visible = true;\n if ( typeof column.editable !== \"undefined\")\n obj.editable = column.editable;\n else\n obj.editable = false;\n if ( typeof column.renderfunction !== \"undefined\")\n obj.renderfunction = column.renderfunction;\n else\n obj.renderfunction = false;\n if ( typeof column.columnstyle !== \"undefined\")\n obj.columnstyle = column.columnstyle;\n else\n obj.columnstyle = \"\";\n if ( typeof column.cellstyle !== \"undefined\")\n obj.cellstyle = column.cellstyle;\n else\n obj.cellstyle = \"\";\n\n return obj;\n },\n setSortOrders: function () {\n this.sortKey = [];\n var sortOrders = {};\n this.columns.forEach(function (column) {\n sortOrders[column.name] = \"\";\n });\n this.sortOrders = sortOrders;\n\n },\n sortBy: function (event, key) {\n if (this.sortable) {\n var self = this;\n\n if (!this.multiColumnSortable || ( this.multiColumnSortable && !event.shiftKey)) {\n this.sortKey = [key];\n this.columns.forEach(function (column) {\n if (column.name !== key) {\n self.sortOrders[column.name] = \"\";\n }\n });\n } else {\n if (lodashfindindex(this.sortKey, function(o) { return o === key; }) === -1) {\n this.sortKey.push(key);\n }\n }\n if (this.sortOrders[key] === \"\") {\n this.sortOrders[key] = \"ASC\";\n } else if (this.sortOrders[key] === \"ASC\") {\n this.sortOrders[key] = \"DESC\";\n } else {\n this.sortOrders[key] = \"ASC\";\n }\n\n this.sortChanged = this.sortChanged * -1;\n }\n },\n getClasses: function (column) {\n var classes = [column.columnstyle];\n var key = column.name;\n if (this.sortable) {\n classes.push(\"arrow\");\n /*if (this.sortKey === key) {\n classes.push(\"active\");\n }*/\n if (lodashfindindex(this.sortKey, function(o) { return o === key; }) !== -1) {\n classes.push(\"active\");\n }\n\n if (this.sortOrders[key] === \"ASC\") {\n classes.push(\"asc\");\n } else if (this.sortOrders[key] === \"DESC\") {\n classes.push(\"dsc\");\n }\n }\n return classes;\n },\n toggleColumn: function (column) {\n column.visible = !column.visible;\n },\n closeDropdown: function () {\n this.columnMenuOpen = false;\n },\n },\n events: {\n }\n }\n</script>"],"sourceRoot":"webpack://"}]);
// exports
/***/ }),
/* 4 */
/***/ (function(module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function() {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
var result = [];
for(var i = 0; i < this.length; i++) {
var item = this[i];
if(item[2]) {
result.push("@media " + item[2] + "{" + item[1] + "}");
} else {
result.push(item[1]);
}
}
return result.join("");
};
// import a list of modules into the list
list.i = function(modules, mediaQuery) {
if(typeof modules === "string")
modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for(var i = 0; i < this.length; i++) {
var id = this[i][0];
if(typeof id === "number")
alreadyImportedModules[id] = true;
}
for(i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if(mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if(mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
/***/ }),
/* 5 */
/***/ (function(module, exports, __webpack_require__) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
var stylesInDom = {},
memoize = function(fn) {
var memo;
return function () {
if (typeof memo === "undefined") memo = fn.apply(this, arguments);
return memo;
};
},
isOldIE = memoize(function() {
return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
}),
getHeadElement = memoize(function () {
return document.head || document.getElementsByTagName("head")[0];
}),
singletonElement = null,
singletonCounter = 0,
styleElementsInsertedAtTop = [];
module.exports = function(list, options) {
if(false) {
if(typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment");
}
options = options || {};
// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
// tags it will allow on a page
if (typeof options.singleton === "undefined") options.singleton = isOldIE();
// By default, add <style> tags to the bottom of <head>.
if (typeof options.insertAt === "undefined") options.insertAt = "bottom";
var styles = listToStyles(list);
addStylesToDom(styles, options);
return function update(newList) {
var mayRemove = [];
for(var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
domStyle.refs--;
mayRemove.push(domStyle);
}
if(newList) {
var newStyles = listToStyles(newList);
addStylesToDom(newStyles, options);
}
for(var i = 0; i < mayRemove.length; i++) {
var domStyle = mayRemove[i];
if(domStyle.refs === 0) {
for(var j = 0; j < domStyle.parts.length; j++)
domStyle.parts[j]();
delete stylesInDom[domStyle.id];
}
}
};
}
function addStylesToDom(styles, options) {
for(var i = 0; i < styles.length; i++) {
var item = styles[i];
var domStyle = stylesInDom[item.id];
if(domStyle) {
domStyle.refs++;
for(var j = 0; j < domStyle.parts.length; j++) {
domStyle.parts[j](item.parts[j]);
}
for(; j < item.parts.length; j++) {
domStyle.parts.push(addStyle(item.parts[j], options));
}
} else {
var parts = [];
for(var j = 0; j < item.parts.length; j++) {
parts.push(addStyle(item.parts[j], options));
}
stylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};
}
}
}
function listToStyles(list) {
var styles = [];
var newStyles = {};
for(var i = 0; i < list.length; i++) {
var item = list[i];
var id = item[0];
var css = item[1];
var media = item[2];
var sourceMap = item[3];
var part = {css: css, media: media, sourceMap: sourceMap};
if(!newStyles[id])
styles.push(newStyles[id] = {id: id, parts: [part]});
else
newStyles[id].parts.push(part);
}
return styles;
}
function insertStyleElement(options, styleElement) {
var head = getHeadElement();
var lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
if (options.insertAt === "top") {
if(!lastStyleElementInsertedAtTop) {
head.insertBefore(styleElement, head.firstChild);
} else if(lastStyleElementInsertedAtTop.nextSibling) {
head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling);
} else {
head.appendChild(styleElement);
}
styleElementsInsertedAtTop.push(styleElement);
} else if (options.insertAt === "bottom") {
head.appendChild(styleElement);
} else {
throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
}
}
function removeStyleElement(styleElement) {
styleElement.parentNode.removeChild(styleElement);
var idx = styleElementsInsertedAtTop.indexOf(styleElement);
if(idx >= 0) {
styleElementsInsertedAtTop.splice(idx, 1);
}
}
function createStyleElement(options) {
var styleElement = document.createElement("style");
styleElement.type = "text/css";
insertStyleElement(options, styleElement);
return styleElement;
}
function addStyle(obj, options) {
var styleElement, update, remove;
if (options.singleton) {
var styleIndex = singletonCounter++;
styleElement = singletonElement || (singletonElement = createStyleElement(options));
update = applyToSingletonTag.bind(null, styleElement, styleIndex, false);
remove = applyToSingletonTag.bind(null, styleElement, styleIndex, true);
} else {
styleElement = createStyleElement(options);
update = applyToTag.bind(null, styleElement);
remove = function() {
removeStyleElement(styleElement);
};
}
update(obj);
return function updateStyle(newObj) {
if(newObj) {
if(newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap)
return;
update(obj = newObj);
} else {
remove();
}
};
}
var replaceText = (function () {
var textStore = [];
return function (index, replacement) {
textStore[index] = replacement;
return textStore.filter(Boolean).join('\n');
};
})();
function applyToSingletonTag(styleElement, index, remove, obj) {
var css = remove ? "" : obj.css;
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = replaceText(index, css);
} else {
var cssNode = document.createTextNode(css);
var childNodes = styleElement.childNodes;
if (childNodes[index]) styleElement.removeChild(childNodes[index]);
if (childNodes.length) {
styleElement.insertBefore(cssNode, childNodes[index]);
} else {
styleElement.appendChild(cssNode);
}
}
}
function applyToTag(styleElement, obj) {
var css = obj.css;
var media = obj.media;
var sourceMap = obj.sourceMap;
if (media) {
styleElement.setAttribute("media", media);
}
if (sourceMap) {
// https://developer.chrome.com/devtools/docs/javascript-debugging
// this makes source maps inside style tags work properly in Chrome
css += '\n/*# sourceURL=' + sourceMap.sources[0] + ' */';
// http://stackoverflow.com/a/26603875
css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */";
}
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = css;
} else {
while(styleElement.firstChild) {
styleElement.removeChild(styleElement.firstChild);
}
styleElement.appendChild(document.createTextNode(css));
}
}
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _stringify = __webpack_require__(7);
var _stringify2 = _interopRequireDefault(_stringify);
var _axios = __webpack_require__(10);
var _axios2 = _interopRequireDefault(_axios);
var _qs = __webpack_require__(40);
var _qs2 = _interopRequireDefault(_qs);
var _lodash = __webpack_require__(45);
var _lodash2 = _interopRequireDefault(_lodash);
var _lodash3 = __webpack_require__(47);
var _lodash4 = _interopRequireDefault(_lodash3);
var _lodash5 = __webpack_require__(48);
var _lodash6 = _interopRequireDefault(_lodash5);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/* Field Section used for displaying and editing value of cell */
var valueFieldSection = {
template: '<span v-if="!enabled" @dblclick="toggleInput" class="editableField">{{this.entry[this.columnname]}}</span>' + '<div v-if="enabled" class="input-group">' + ' <input type="text" class="form-control" v-model="datavalue" @keyup.enter="saveThis" @keyup.esc="cancelThis">' + ' <span class="input-group-btn">' + ' <button class="btn btn-danger" type="button" @click="cancelThis" ><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>' + ' <button class="btn btn-primary" type="button" @click="saveThis" ><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></button>' + ' </span>' + '</div>',
props: ['entry', 'columnname'],
data: function data() {
return {
enabled: false,
datavalue: ""
};
},
methods: {
saveThis: function saveThis() {
var originalValue = this.entry[this.columnname];
this.entry[this.columnname] = this.datavalue;
this.$dispatch('cellDataModifiedEvent', originalValue, this.datavalue, this.columnname, this.entry);
this.enabled = !this.enabled;
},
cancelThis: function cancelThis() {
this.datavalue = this.entry[this.columnname];
this.enabled = !this.enabled;
},
toggleInput: function toggleInput() {
this.datavalue = this.entry[this.columnname];
this.enabled = !this.enabled;
}
}
}; // <template>
// <div id="maindiv" @click="closeDropdown" @keyup.esc="closeDropdown">
// <!--<pre>{{columns | json}}</pre>-->
// <!--<pre>{{$data | json}}</pre>-->
// <div class="col-sm-6">
// <div v-if="showFilter" style="padding-top: 10px;padding-bottom: 10px;">
// <div class="input-group">
// <input type="text" class="form-control" placeholder="Filter" v-model="filterKey">
// <div class="input-group-addon">
// <i class="glyphicon glyphicon-search"></i>
// </div>
// </div>
// </div>
// </div>
// <div class="col-sm-6">
// <div v-if="showColumnPicker" style="padding-top: 10px;padding-bottom: 10px;float:right;">
// <div class="btn-group" :class="{'open' : columnMenuOpen}">
// <button @click.stop.prevent="columnMenuOpen = !columnMenuOpen" @keyup.esc="columnMenuOpen = false"
// type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
// aria-haspopup="true">
// Columns <span class="caret"></span>
// </button>
// <ul class="dropdown-menu">
// <li v-for="column in displayCols">
// <a href="#" @click.stop.prevent="toggleColumn(column)">
// <i v-if="column.visible" class="glyphicon glyphicon-ok"></i> {{column.title}}
// </a>
// </li>
// </ul>
// </div>
// </div>
// </div>
// <div class="col-sm-12">
// <div id="loadingdiv" :class="{'vue-table-loading': this.loading , 'vue-table-loading-hidden': !this.loading}">
// <div class="spinner"></div>
// </div>
// <table class="table table-bordered table-hover table-condensed table-striped vue-table">
// <thead>
// <tr>
// <th v-for="column in displayColsVisible" @click="sortBy($event, column.name)"
// track-by="$index"
// :class="getClasses(column)">
// {{ column.title }}
// </th>
// </tr>
// </thead>
// <tbody>
// <tr v-for="entry in filteredValuesSorted " track-by="$index" @click="rowClickHandler($event, entry)">
// <td v-for="column in displayColsVisible" track-by="$index"
// v-show="column.visible" :class="column.cellstyle">
// <span v-if="column.renderfunction!==false" v-html="column.renderfunction( column.name, entry )"></span>
// <span v-if="column.renderfunction===false && !column.editable"> {{ entry[column.name] }} </span>
// <value-field-section v-if="column.renderfunction===false && column.editable"
// :entry="entry"
// :columnname="column.name"></value-field-section>
// </td>
// </tr>
// </tbody>
// </table>
// </div>
// <div v-if="paginated" class="col-sm-12">
// <div class="btn-toolbar" role="toolbar" aria-label="pagination bar">
// <div class="btn-group" role="group" aria-label="first page">
// <button type="button" class="btn btn-default" @click="this.page=1">«</button>
// </div>
// <div class="btn-group" role="group" aria-label="pages">
// <button v-for="index in validPageNumbers"
// type="button" class="btn btn-default"
// :class="{ active: this.page===index }"
// @click="this.page=index">
// {{index}}
// </button>
//