lv2-datatable
Version:
Integrate the Laravel datatables with your Vue app without using JQuery. It can handle listing data locally and remote.
1,064 lines (965 loc) • 40.2 kB
JavaScript
'use strict';function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"] != null) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}var debounce = function debounce(func, wait, immediate) {
var timeout, args, context, timestamp, result;
if (null == wait) wait = 100;
function later() {
var last = Date.now() - timestamp;
if (last < wait && last >= 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
if (!immediate) {
result = func.apply(context, args);
context = args = null;
}
}
}
var debounced = function debounced() {
context = this;
args = arguments;
timestamp = Date.now();
var callNow = immediate && !timeout;
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
debounced.clear = function () {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
};
debounced.flush = function () {
if (timeout) {
result = func.apply(context, args);
context = args = null;
clearTimeout(timeout);
timeout = null;
}
};
return debounced;
};//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var script$1 = {
name: "Paginate",
props: {
value: {
type: Number
},
pageCount: {
type: Number,
required: true
},
forcePage: {
type: Number
},
clickHandler: {
type: Function,
default: function _default() {}
},
pageRange: {
type: Number,
default: 3
},
marginPages: {
type: Number,
default: 1
},
prevText: {
type: String,
default: 'Prev'
},
nextText: {
type: String,
default: 'Next'
},
breakViewText: {
type: String,
default: '…'
},
containerClass: {
type: String
},
pageClass: {
type: String
},
pageLinkClass: {
type: String
},
prevClass: {
type: String
},
prevLinkClass: {
type: String
},
nextClass: {
type: String
},
nextLinkClass: {
type: String
},
breakViewClass: {
type: String
},
breakViewLinkClass: {
type: String
},
activeClass: {
type: String,
default: 'active'
},
disabledClass: {
type: String,
default: 'disabled'
},
noLiSurround: {
type: Boolean,
default: false
},
firstLastButton: {
type: Boolean,
default: false
},
firstButtonText: {
type: String,
default: 'First'
},
lastButtonText: {
type: String,
default: 'Last'
},
hidePrevNext: {
type: Boolean,
default: false
}
},
beforeUpdate: function beforeUpdate() {
if (this.forcePage === undefined) return;
if (this.forcePage !== this.selected) {
this.selected = this.forcePage;
}
},
computed: {
selected: {
get: function get() {
return this.value || this.innerValue;
},
set: function set(newValue) {
this.innerValue = newValue;
}
},
pages: function pages() {
var _this = this;
var items = {};
if (this.pageCount <= this.pageRange) {
for (var index = 0; index < this.pageCount; index++) {
items[index] = {
index: index,
content: index + 1,
selected: index === this.selected - 1
};
}
} else {
var halfPageRange = Math.floor(this.pageRange / 2);
var setPageItem = function setPageItem(index) {
items[index] = {
index: index,
content: index + 1,
selected: index === _this.selected - 1
};
};
var setBreakView = function setBreakView(index) {
items[index] = {
disabled: true,
breakView: true
};
}; // 1st - loop thru low end of margin pages
for (var i = 0; i < this.marginPages; i++) {
setPageItem(i);
} // 2nd - loop thru selected range
var selectedRangeLow = 0;
if (this.selected - halfPageRange > 0) {
selectedRangeLow = this.selected - 1 - halfPageRange;
}
var selectedRangeHigh = selectedRangeLow + this.pageRange - 1;
if (selectedRangeHigh >= this.pageCount) {
selectedRangeHigh = this.pageCount - 1;
selectedRangeLow = selectedRangeHigh - this.pageRange + 1;
}
for (var _i = selectedRangeLow; _i <= selectedRangeHigh && _i <= this.pageCount - 1; _i++) {
setPageItem(_i);
} // Check if there is breakView in the left of selected range
if (selectedRangeLow > this.marginPages) {
setBreakView(selectedRangeLow - 1);
} // Check if there is breakView in the right of selected range
if (selectedRangeHigh + 1 < this.pageCount - this.marginPages) {
setBreakView(selectedRangeHigh + 1);
} // 3rd - loop thru high end of margin pages
for (var _i2 = this.pageCount - 1; _i2 >= this.pageCount - this.marginPages; _i2--) {
setPageItem(_i2);
}
}
return items;
}
},
data: function data() {
return {
innerValue: 1
};
},
methods: {
handlePageSelected: function handlePageSelected(selected) {
if (this.selected === selected) return;
this.innerValue = selected;
this.$emit('input', selected);
this.clickHandler(selected);
},
prevPage: function prevPage() {
if (this.selected <= 1) return;
this.handlePageSelected(this.selected - 1);
},
nextPage: function nextPage() {
if (this.selected >= this.pageCount) return;
this.handlePageSelected(this.selected + 1);
},
firstPageSelected: function firstPageSelected() {
return this.selected === 1;
},
lastPageSelected: function lastPageSelected() {
return this.selected === this.pageCount || this.pageCount === 0;
},
selectFirstPage: function selectFirstPage() {
if (this.selected <= 1) return;
this.handlePageSelected(1);
},
selectLastPage: function selectLastPage() {
if (this.selected >= this.pageCount) return;
this.handlePageSelected(this.pageCount);
}
}
};function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}
// Vue.extend constructor export interop.
const options = typeof script === 'function' ? script.options : script;
// render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;
// functional template
if (isFunctionalTemplate) {
options.functional = true;
}
}
// scopedId
if (scopeId) {
options._scopeId = scopeId;
}
let hook;
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
// inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
}
// register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
}
else if (style) {
hook = shadowMode
? function (context) {
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
}
: function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
const originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
}
else {
// inject component registration as beforeCreate hook
const existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}function createInjectorSSR(context) {
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}
if (!context)
return () => { };
if (!('styles' in context)) {
context._styles = context._styles || {};
Object.defineProperty(context, 'styles', {
enumerable: true,
get: () => context._renderStyles(context._styles)
});
context._renderStyles = context._renderStyles || renderStyles;
}
return (id, style) => addStyle(id, style, context);
}
function addStyle(id, css, context) {
const group = css.media || 'default' ;
const style = context._styles[group] || (context._styles[group] = { ids: [], css: '' });
if (!style.ids.includes(id)) {
style.media = css.media;
style.ids.push(id);
let code = css.source;
style.css += code + '\n';
}
}
function renderStyles(styles) {
let css = '';
for (const key in styles) {
const style = styles[key];
css +=
'<style data-vue-ssr-id="' +
Array.from(style.ids).join(' ') +
'"' +
(style.media ? ' media="' + style.media + '"' : '') +
'>' +
style.css +
'</style>';
}
return css;
}/* script */
var __vue_script__$1 = script$1;
/* template */
var __vue_render__$1 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return !_vm.noLiSurround ? _c('ul', {
class: _vm.containerClass
}, [_vm._ssrNode((_vm.firstLastButton ? "<li" + _vm._ssrClass(null, [_vm.pageClass, _vm.firstPageSelected() ? _vm.disabledClass : '']) + " data-v-bd4124a2><a" + _vm._ssrAttr("tabindex", _vm.firstPageSelected() ? -1 : 0) + _vm._ssrClass(null, _vm.pageLinkClass) + " data-v-bd4124a2>" + _vm._s(_vm.firstButtonText) + "</a></li>" : "<!---->") + " " + (!(_vm.firstPageSelected() && _vm.hidePrevNext) ? "<li" + _vm._ssrClass(null, [_vm.prevClass, _vm.firstPageSelected() ? _vm.disabledClass : '']) + " data-v-bd4124a2><a" + _vm._ssrAttr("tabindex", _vm.firstPageSelected() ? -1 : 0) + _vm._ssrClass(null, _vm.prevLinkClass) + " data-v-bd4124a2>" + _vm._s(_vm.prevText) + "</a></li>" : "<!---->") + " "), _vm._l(_vm.pages, function (page) {
return _vm._ssrNode("<li" + _vm._ssrClass(null, [_vm.pageClass, page.selected ? _vm.activeClass : '', page.disabled ? _vm.disabledClass : '', page.breakView ? _vm.breakViewClass : '']) + " data-v-bd4124a2>", "</li>", [page.breakView ? _vm._ssrNode("<a tabindex=\"0\"" + _vm._ssrClass(null, [_vm.pageLinkClass, _vm.breakViewLinkClass]) + " data-v-bd4124a2>", "</a>", [_vm._t("breakViewContent", function () {
return [_vm._v(_vm._s(_vm.breakViewText))];
})], 2) : page.disabled ? _vm._ssrNode("<a tabindex=\"0\"" + _vm._ssrClass(null, _vm.pageLinkClass) + " data-v-bd4124a2>" + _vm._ssrEscape(_vm._s(page.content)) + "</a>") : _vm._ssrNode("<a tabindex=\"0\"" + _vm._ssrClass(null, _vm.pageLinkClass) + " data-v-bd4124a2>" + _vm._ssrEscape(_vm._s(page.content)) + "</a>")]);
}), _vm._ssrNode(" " + (!(_vm.lastPageSelected() && _vm.hidePrevNext) ? "<li" + _vm._ssrClass(null, [_vm.nextClass, _vm.lastPageSelected() ? _vm.disabledClass : '']) + " data-v-bd4124a2><a" + _vm._ssrAttr("tabindex", _vm.lastPageSelected() ? -1 : 0) + _vm._ssrClass(null, _vm.nextLinkClass) + " data-v-bd4124a2>" + _vm._s(_vm.nextText) + "</a></li>" : "<!---->") + " " + (_vm.firstLastButton ? "<li" + _vm._ssrClass(null, [_vm.pageClass, _vm.lastPageSelected() ? _vm.disabledClass : '']) + " data-v-bd4124a2><a" + _vm._ssrAttr("tabindex", _vm.lastPageSelected() ? -1 : 0) + _vm._ssrClass(null, _vm.pageLinkClass) + " data-v-bd4124a2>" + _vm._s(_vm.lastButtonText) + "</a></li>" : "<!---->"))], 2) : _c('div', {
class: _vm.containerClass
}, [_vm._ssrNode((_vm.firstLastButton ? "<a tabindex=\"0\"" + _vm._ssrClass(null, [_vm.pageLinkClass, _vm.firstPageSelected() ? _vm.disabledClass : '']) + " data-v-bd4124a2>" + _vm._s(_vm.firstButtonText) + "</a>" : "<!---->") + " " + (!(_vm.firstPageSelected() && _vm.hidePrevNext) ? "<a tabindex=\"0\"" + _vm._ssrClass(null, [_vm.prevLinkClass, _vm.firstPageSelected() ? _vm.disabledClass : '']) + " data-v-bd4124a2>" + _vm._s(_vm.prevText) + "</a>" : "<!---->") + " "), _vm._l(_vm.pages, function (page) {
return [page.breakView ? _vm._ssrNode("<a tabindex=\"0\"" + _vm._ssrClass(null, [_vm.pageLinkClass, _vm.breakViewLinkClass, page.disabled ? _vm.disabledClass : '']) + " data-v-bd4124a2>", "</a>", [_vm._t("breakViewContent", function () {
return [_vm._v(_vm._s(_vm.breakViewText))];
})], 2) : page.disabled ? _vm._ssrNode("<a tabindex=\"0\"" + _vm._ssrClass(null, [_vm.pageLinkClass, page.selected ? _vm.activeClass : '', _vm.disabledClass]) + " data-v-bd4124a2>" + _vm._ssrEscape(_vm._s(page.content)) + "</a>") : _vm._ssrNode("<a tabindex=\"0\"" + _vm._ssrClass(null, [_vm.pageLinkClass, page.selected ? _vm.activeClass : '']) + " data-v-bd4124a2>" + _vm._ssrEscape(_vm._s(page.content)) + "</a>")];
}), _vm._ssrNode(" " + (!(_vm.lastPageSelected() && _vm.hidePrevNext) ? "<a tabindex=\"0\"" + _vm._ssrClass(null, [_vm.nextLinkClass, _vm.lastPageSelected() ? _vm.disabledClass : '']) + " data-v-bd4124a2>" + _vm._s(_vm.nextText) + "</a>" : "<!---->") + " " + (_vm.firstLastButton ? "<a tabindex=\"0\"" + _vm._ssrClass(null, [_vm.pageLinkClass, _vm.lastPageSelected() ? _vm.disabledClass : '']) + " data-v-bd4124a2>" + _vm._s(_vm.lastButtonText) + "</a>" : "<!---->"))], 2);
};
var __vue_staticRenderFns__$1 = [];
/* style */
var __vue_inject_styles__$1 = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-bd4124a2_0", {
source: "a[data-v-bd4124a2]{cursor:pointer}",
map: undefined,
media: undefined
});
};
/* scoped */
var __vue_scope_id__$1 = "data-v-bd4124a2";
/* module identifier */
var __vue_module_identifier__$1 = "data-v-bd4124a2";
/* functional template */
var __vue_is_functional_template__$1 = false;
/* style inject shadow dom */
var __vue_component__$1 = /*#__PURE__*/normalizeComponent({
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, false, undefined, createInjectorSSR, undefined);
var Paginate = __vue_component__$1;var theme = function theme(_ref) {
var rowClasses = _ref.rowClasses,
colClasses = _ref.colClasses,
table = _ref.table,
paginate = _ref.paginate;
return {
row: rowClasses,
col: colClasses,
table: table,
paginate: paginate
};
};
var themeData = function themeData() {
var design = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bootstrap3';
switch (design) {
case 'bootstrap5':
return theme({
rowClasses: 'row',
colClasses: 'col-md-12',
table: {
colClasses: 'col-md-12',
tableClasses: 'table table-striped table-bordered table-sm',
tableContainer: 'position-relative',
formClasses: 'form-horizontal',
inputSearchClasses: 'form-control',
inputLengthOptionClasses: 'form-control'
},
paginate: {
colClasses: 'col-md-12',
containerClass: 'pagination',
pageClass: 'page-item',
pageLinkClass: 'page-link'
}
});
case 'bootstrap4':
return theme({
rowClasses: 'row',
colClasses: 'col-md-12',
table: {
colClasses: 'col-md-12',
tableClasses: 'table table-striped table-bordered table-sm',
tableContainer: 'position-relative',
formClasses: 'form-horizontal',
inputSearchClasses: 'form-control',
inputLengthOptionClasses: 'form-control'
},
paginate: {
colClasses: 'col-md-12',
containerClass: 'pagination',
pageClass: 'page-item',
pageLinkClass: 'page-link'
}
});
default:
return theme({
rowClasses: 'row',
colClasses: 'col-md-12',
table: {
colClasses: 'col-md-12',
tableClasses: 'table table-striped table-bordered',
tableContainer: 'position-relative',
formClasses: 'form-horizontal',
inputSearchClasses: 'form-control',
inputLengthOptionClasses: 'form-control'
},
paginate: {
colClasses: 'col-md-12',
containerClass: 'pagination',
pageClass: 'page-item',
pageLinkClass: null
}
});
}
};
var themeData$1 = themeData;var setState = function setState(key, initValue) {
if (initValue === undefined || initValue === null) {
localStorage.removeItem(key);
} else {
localStorage.setItem(key, JSON.stringify(initValue));
}
};
var getState = function getState(key) {
return JSON.parse(localStorage.getItem(key));
};
var setDataTableState$1 = function setDataTableState(tableId, _ref) {
var length = _ref.length,
search = _ref.search,
page = _ref.page,
start = _ref.start,
defaultOrder = _ref.defaultOrder,
recordsTotal = _ref.recordsTotal,
recordsFiltered = _ref.recordsFiltered;
setState("".concat(tableId, "_length"), length);
setState("".concat(tableId, "_search"), search);
setState("".concat(tableId, "_page"), page);
setState("".concat(tableId, "_start"), start);
setState("".concat(tableId, "_defaultOrder"), defaultOrder);
setState("".concat(tableId, "_recordsTotal"), recordsTotal);
setState("".concat(tableId, "_recordsFiltered"), recordsFiltered);
};
var getDataTableState$1 = function getDataTableState(tableId) {
var length = getState("".concat(tableId, "_length"));
var search = getState("".concat(tableId, "_search"));
var page = getState("".concat(tableId, "_page"));
var start = getState("".concat(tableId, "_start"));
var defaultOrder = getState("".concat(tableId, "_defaultOrder"));
var recordsTotal = getState("".concat(tableId, "_recordsTotal"));
var recordsFiltered = getState("".concat(tableId, "_recordsFiltered"));
return {
length: length,
search: search,
page: page,
start: start,
defaultOrder: defaultOrder,
recordsTotal: recordsTotal,
recordsFiltered: recordsFiltered
};
};
var useLocalStorage = {
setDataTableState: setDataTableState$1,
getDataTableState: getDataTableState$1
};var sEmptyTable$1="No data available in table";var sInfo$1="Showing _START_ to _END_ of _TOTAL_ entries";var sInfoEmpty$1="Showing 0 to 0 of 0 entries";var sInfoFiltered$1="(filtered from _MAX_ total entries)";var sInfoPostFix$1="";var sInfoThousands$1=",";var sLengthMenu$1="Show _MENU_ entries";var sLoadingRecords$1="Loading...";var sProcessing$1="Processing...";var sSearch$1="Search:";var sZeroRecords$1="No matching records found";var oPaginate$1={sFirst:"First",sLast:"Last",sNext:"Next",sPrevious:"Previous"};var oAria$1={sSortAscending:": activate to sort column ascending",sSortDescending:": activate to sort column descending"};var en = {sEmptyTable:sEmptyTable$1,sInfo:sInfo$1,sInfoEmpty:sInfoEmpty$1,sInfoFiltered:sInfoFiltered$1,sInfoPostFix:sInfoPostFix$1,sInfoThousands:sInfoThousands$1,sLengthMenu:sLengthMenu$1,sLoadingRecords:sLoadingRecords$1,sProcessing:sProcessing$1,sSearch:sSearch$1,sZeroRecords:sZeroRecords$1,oPaginate:oPaginate$1,oAria:oAria$1};var sEmptyTable="មិនមានទិន្នន័យក្នុងតារាងនេះទេ";var sInfo="បង្ហាញជួរទី _START_ ដល់ទី _END_ ក្នុងចំណោម _TOTAL_ ជួរ";var sInfoEmpty="បង្ហាញជួរទី 0 ដល់ទី 0 ក្នុងចំណោម 0 ជួរ";var sInfoFiltered="(បានចម្រាញ់ចេញពីទិន្នន័យសរុប _MAX_ ជួរ)";var sInfoPostFix="";var sInfoThousands=",";var sLengthMenu="បង្ហាញ _MENU_ ជួរ";var sLoadingRecords="កំពុងផ្ទុក...";var sProcessing="កំពុងដំណើរការ...";var sSearch="ស្វែងរក:";var sZeroRecords="មិនមានទិន្នន័យត្រូវតាមលក្ខខណ្ឌស្វែងរកទេ";var oPaginate={sFirst:"ដំបូងគេ",sLast:"ចុងក្រោយ",sNext:"បន្ទាប់",sPrevious:"ក្រោយ"};var oAria={sSortAscending:": ចុចដើម្បីរៀបជួរឈរនេះតាមលំដាប់ឡើង",sSortDescending:": ចុចដើម្បីរៀបជួរឈរនេះតាមលំដាប់ចុះ"};var km = {sEmptyTable:sEmptyTable,sInfo:sInfo,sInfoEmpty:sInfoEmpty,sInfoFiltered:sInfoFiltered,sInfoPostFix:sInfoPostFix,sInfoThousands:sInfoThousands,sLengthMenu:sLengthMenu,sLoadingRecords:sLoadingRecords,sProcessing:sProcessing,sSearch:sSearch,sZeroRecords:sZeroRecords,oPaginate:oPaginate,oAria:oAria};var useLocales = function useLocales() {
return {
en: en,
km: km
};
};
var useLocale = useLocales;//
var setDataTableState = useLocalStorage.setDataTableState,
getDataTableState = useLocalStorage.getDataTableState;
var script = {
name: "DataTable",
components: {
Paginate: Paginate
},
props: {
axios: {
type: [Object, Function, null],
default: null
},
tableId: {
type: String,
required: true
},
columns: {
type: Array,
required: true
},
locale: {
type: String,
default: "en"
},
lengthOptions: {
type: Array,
default: function _default() {
return [{
label: 10,
value: 10
}, {
label: 25,
value: 25
}, {
label: 50,
value: 50
}, {
label: 100,
value: 100
}];
}
},
order: {
type: [null, Array],
default: null
},
design: {
type: String,
default: "bootstrap3"
},
savedState: {
type: Boolean,
default: false
},
serverSide: {
type: Boolean,
default: false
},
url: {
type: String,
default: null
},
dataRows: {
type: Array,
default: function _default() {
return [];
}
}
},
data: function data() {
return {
rows: [],
length: this.lengthOptions[0].value,
start: 0,
pages: 0,
page: 1,
recordsTotal: 0,
recordsFiltered: 0,
search: null,
draw: 0,
locales: useLocale(),
defaultOrder: [null, "asc"],
isLoading: false
};
},
computed: {
sInfo: function sInfo() {
return this.selectedLocale.sInfo.replace("_START_", this.length * this.start + 1).replace("_END_", this.length * (this.start + 1)).replace("_TOTAL_", this.recordsTotal);
},
sLengthMenu: function sLengthMenu() {
return this.selectedLocale.sLengthMenu.split(" _MENU_ ");
},
selectedLocale: function selectedLocale() {
return this.locales[this.locale];
},
theme: function theme() {
return themeData$1(this.design);
}
},
watch: {
length: function length() {
this.fetchData(this.page);
}
},
methods: {
refresh: function refresh() {
this.fetchData(this.page);
},
onClickOrderColumn: function onClickOrderColumn() {
var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
if (index !== null && index >= 0) {
if (index > this.columns.length - 1) {
console.error("The order column index ".concat(index, " is out of range"));
return;
}
if (!this.columns[index].orderable) {
return;
}
this.defaultOrder = [index, this.defaultOrder[1] === "asc" ? "desc" : "asc"];
this.fetchData(this.page);
}
},
onSearch: debounce(function (event) {
this.search = event.target.value;
this.fetchData();
}, 500),
fetchData: function fetchData() {
var page = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
if (this.serverSide) {
this.requestDataApi(page);
} else {
this.requestLocalData(page);
}
},
requestDataApi: function requestDataApi(page) {
var _this$search,
_this = this;
this.page = page;
this.start = page - 1;
this.draw++;
var formData = new FormData();
formData.append("draw", this.draw);
this.columns.forEach(function (column, index) {
Object.keys(column).forEach(function (key) {
if (["data", "name", "orderable", "searchable"].includes(key)) {
var _column$key;
formData.append("columns[".concat(index, "][").concat(key, "]"), (_column$key = column[key]) !== null && _column$key !== void 0 ? _column$key : null);
if (key === "searchable" && column[key]) {
formData.append("columns[".concat(index, "][search][value]"), "");
formData.append("columns[".concat(index, "][search][regex]"), "false");
}
}
});
});
if (this.defaultOrder[0] !== null && this.defaultOrder[0] >= 0) {
formData.append("order[0][column]", this.defaultOrder[0]);
formData.append("order[0][dir]", this.defaultOrder[1]);
}
formData.append("start", this.start);
formData.append("length", this.length);
formData.append("search[value]", (_this$search = this.search) !== null && _this$search !== void 0 ? _this$search : "");
formData.append("search[regex]", "false");
this.saveStates();
this.isLoading = true;
this.axios.post(this.url, formData).then(function (_ref) {
var data = _ref.data;
if (data.data) {
_this.rows = data.data;
var recordsTotal = data.recordsTotal,
recordsFiltered = data.recordsFiltered;
_this.recordsTotal = recordsTotal;
_this.recordsFiltered = recordsFiltered;
_this.pages = Math.ceil(_this.recordsFiltered / _this.length);
}
}).finally(function () {
_this.isLoading = false;
});
},
requestLocalData: function requestLocalData(page) {
var _this2 = this;
this.page = page;
this.start = page - 1;
this.saveStates();
var recordFiltered = this.dataRows;
var searchColumns = this.columns.map(function (column) {
if (column.searchable) {
return column;
}
}).filter(function (column) {
return column !== undefined;
});
if (searchColumns.length && this.search !== "" && this.search !== null) {
recordFiltered = recordFiltered.map(function (row) {
for (var column in searchColumns) {
var _column = searchColumns[column].data;
var value = row[_column].toString();
if (value.includes(_this2.search)) {
return row;
}
}
}).filter(function (row) {
return row !== undefined;
});
}
recordFiltered = recordFiltered.sort(function (a, b) {
return a > b ? 1 : -1;
});
if (this.defaultOrder) {
this.rows = recordFiltered.slice(this.start * this.length, this.start * this.length + parseInt(this.length));
}
this.recordsTotal = this.dataRows.length;
this.recordsFiltered = recordFiltered.length;
this.pages = Math.ceil(this.recordsFiltered / this.length);
},
initStates: function initStates() {
if (this.savedState) {
var _getDataTableState = getDataTableState(this.tableId),
length = _getDataTableState.length,
search = _getDataTableState.search,
page = _getDataTableState.page,
start = _getDataTableState.start,
defaultOrder = _getDataTableState.defaultOrder,
recordsTotal = _getDataTableState.recordsTotal,
recordsFiltered = _getDataTableState.recordsFiltered;
this.length = length !== null && length !== void 0 ? length : this.lengthOptions[0].value;
this.search = search !== null && search !== void 0 ? search : null;
this.page = page !== null && page !== void 0 ? page : 1;
this.start = start !== null && start !== void 0 ? start : 0;
this.defaultOrder = defaultOrder !== null && defaultOrder !== void 0 ? defaultOrder : this.defaultOrder;
this.recordsTotal = recordsTotal !== null && recordsTotal !== void 0 ? recordsTotal : 0;
this.recordsFiltered = recordsFiltered !== null && recordsFiltered !== void 0 ? recordsFiltered : 0;
}
},
saveStates: function saveStates() {
if (this.savedState) {
setDataTableState(this.tableId, {
length: this.length,
search: this.search,
page: this.page,
start: this.start,
defaultOrder: this.defaultOrder,
recordsTotal: this.recordsTotal,
recordsFiltered: this.recordsFiltered
});
}
}
},
mounted: function mounted() {
if (this.order) {
this.defaultOrder = this.order;
this.onClickOrderColumn(this.defaultOrder[0]);
}
this.initStates();
this.fetchData(this.page);
}
};/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
class: _vm.theme.row
}, [_vm._ssrNode("<div" + _vm._ssrClass(null, _vm.theme.col) + ">", "</div>", [_vm._ssrNode("<div class=\"table-header-container\">", "</div>", [_vm._ssrNode("<div class=\"table-header-length-options\">", "</div>", [_vm._ssrNode(_vm._ssrEscape("\n " + _vm._s(_vm.sLengthMenu[0]) + "\n ")), _vm._ssrNode("<div" + _vm._ssrClass(null, _vm.theme.table.formClasses) + ">", "</div>", [_c('select', {
directives: [{
name: "model",
rawName: "v-model",
value: _vm.length,
expression: "length"
}],
class: _vm.theme.table.inputLengthOptionClasses,
on: {
"change": function change($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.length = $event.target.multiple ? $$selectedVal : $$selectedVal[0];
}
}
}, _vm._l(_vm.lengthOptions, function (option, key) {
return _c('option', {
key: key,
domProps: {
"value": option.value
}
}, [_vm._v("\n " + _vm._s(option.label) + "\n ")]);
}), 0)]), _vm._ssrNode(_vm._ssrEscape("\n " + _vm._s(_vm.sLengthMenu[1]) + "\n "))], 2), _vm._ssrNode(" <div class=\"table-header-search\">" + _vm._ssrEscape("\n " + _vm._s(_vm.selectedLocale.sSearch) + "\n ") + "<div" + _vm._ssrClass(null, _vm.theme.table.formClasses) + "><input type=\"text\"" + _vm._ssrAttr("value", _vm.search) + _vm._ssrClass(null, _vm.theme.table.inputSearchClasses) + "></div></div>")], 2)]), _vm._ssrNode(" "), _vm._ssrNode("<div" + _vm._ssrClass(null, _vm.theme.table.colClasses) + ">", "</div>", [_vm._ssrNode("<div" + _vm._ssrClass(null, _vm.theme.table.tableContainer) + ">", "</div>", [_vm._ssrNode((_vm.isLoading ? "<div class=\"loading-container\"><div class=\"loading-content\"><p class=\"m-0\">" + _vm._ssrEscape("\n " + _vm._s(_vm.selectedLocale.sLoadingRecords) + "\n ") + "</p></div></div>" : "<!---->") + " "), _vm._ssrNode("<table" + _vm._ssrAttr("id", _vm.tableId) + _vm._ssrClass(null, _vm.theme.table.tableClasses) + ">", "</table>", [_vm._ssrNode("<thead><tr>" + _vm._ssrList(_vm.columns, function (column, headerIndex) {
return "<th" + _vm._ssrStyle(null, "" + (column.width ? "width: " + column.width + "!important;" : ''), null) + "><div" + _vm._ssrClass("table-header-th", {
'cursor-pointer': column.orderable
}) + "><span>" + _vm._ssrEscape(_vm._s(column.title)) + "</span> " + (column.orderable ? _vm.defaultOrder[0] !== null && _vm.defaultOrder[0] === headerIndex ? (_vm.defaultOrder[1] === 'asc' ? "<i class=\"fa-solid fa-arrow-down-short-wide\"></i>" : "<!---->") + " " + (_vm.defaultOrder[1] === 'desc' ? "<i class=\"fa-solid fa-arrow-up-short-wide\"></i>" : "<!---->") : "<i class=\"fa fa-sort\" style=\"color: #dddddd\"></i>" : "<!---->") + "</div></th>";
}) + "</tr></thead> "), _vm._ssrNode("<tbody>", "</tbody>", [_vm.rows.length ? _vm._l(_vm.rows, function (row, key) {
return _vm._ssrNode("<tr>", "</tr>", _vm._l(_vm.columns, function (column, _key) {
return _vm._ssrNode("<td>", "</td>", [column.slot ? [_vm._t(column.slot, null, {
"column": column,
"row": row
})] : _vm._ssrNode(column.data.split('.').length > 1 ? _vm._ssrEscape("\n " + _vm._s(column.data.split('.').reduce(function (o, i) {
return o[i];
}, row)) + "\n ") : _vm._ssrEscape("\n " + _vm._s(row[column.data]) + "\n "))], 2);
}), 0);
}) : _vm._ssrNode("<tr><td" + _vm._ssrAttr("colspan", _vm.columns.length) + "><p class=\"text-muted text-center\">" + (_vm.search ? _vm._ssrEscape("\n " + _vm._s(_vm.selectedLocale.sZeroRecords) + "\n ") : _vm._ssrEscape("\n " + _vm._s(_vm.selectedLocale.sEmptyTable) + "\n ")) + "</p></td></tr>")], 2)], 2)], 2)]), _vm._ssrNode(" "), _vm._ssrNode("<div" + _vm._ssrClass(null, _vm.theme.paginate.colClasses) + ">", "</div>", [_vm._ssrNode("<div class=\"table-paginate-container\">", "</div>", [_vm._ssrNode("<p>" + _vm._ssrEscape(_vm._s(_vm.sInfo)) + "</p> "), _c('paginate', {
attrs: {
"click-handler": _vm.fetchData,
"container-class": _vm.theme.paginate.containerClass,
"force-page": _vm.page,
"next-link-class": _vm.theme.paginate.pageLinkClass,
"next-text": _vm.selectedLocale.oPaginate.sNext,
"page-class": _vm.theme.paginate.pageClass,
"page-count": _vm.pages,
"page-link-class": _vm.theme.paginate.pageLinkClass,
"prev-link-class": _vm.theme.paginate.pageLinkClass,
"prev-text": _vm.selectedLocale.oPaginate.sPrevious
}
})], 2)])], 2);
};
var __vue_staticRenderFns__ = [];
/* style */
var __vue_inject_styles__ = function __vue_inject_styles__(inject) {
if (!inject) return;
inject("data-v-007b53a3_0", {
source: ".table-header-th{display:flex;justify-content:space-between;align-items:center;gap:10px;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.cursor-pointer{cursor:pointer}.pagination{margin:0}.table-header-container{display:flex;align-items:center;justify-content:space-between}.table-header-container .table-header-length-options{display:flex;align-items:center;gap:10px;margin:20px 0}.table-header-container .table-header-search{display:flex;align-items:center;gap:10px;width:15vw;justify-content:flex-end;margin:20px 0}.table-paginate-container{display:flex;justify-content:space-between;align-items:center}.loading-container{width:100%;height:100%;position:absolute;background:rgba(136,136,136,.5);display:flex;align-items:center;justify-content:center;border-radius:4px}.position-relative{position:relative}.loading-container .loading-content{background-color:#888;color:#fff;padding:10px;border-radius:8px}.m-0{margin:0}",
map: undefined,
media: undefined
});
};
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = "data-v-007b53a3";
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject shadow dom */
var __vue_component__ = /*#__PURE__*/normalizeComponent({
render: __vue_render__,
staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, createInjectorSSR, undefined);
var component$1 = __vue_component__;// Import vue component
// IIFE injects install function into component, allowing component
// to be registered via Vue.use() as well as Vue.component(),
var component = /*#__PURE__*/(function () {
// Get component instance
var installable = component$1; // Attach install function executed by Vue.use()
installable.install = function (Vue) {
Vue.component('DataTable', installable);
};
return installable;
})(); // It's possible to expose named exports when writing components that can
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
// export const RollupDemoDirective = directive;
var namedExports=/*#__PURE__*/Object.freeze({__proto__:null,'default':component});// only expose one global var, with named exports exposed as properties of
// that global var (eg. plugin.namedExport)
Object.entries(namedExports).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
exportName = _ref2[0],
exported = _ref2[1];
if (exportName !== 'default') component[exportName] = exported;
});module.exports=component;