@sensetence/vue-quintable
Version:
<img alt="vue-quintable" src="https://sensetence.com/vue-quintable-demo/vue-table.png" width="265" height="222">
1,296 lines (1,295 loc) • 108 kB
JavaScript
import fe from "vue-select";
import { library as S } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon as de } from "@fortawesome/vue-fontawesome";
import ge from "v-tooltip";
import { faAngleDoubleLeft as pe, faAngleDoubleRight as me, faAngleLeft as we, faAngleRight as be, faCaretDown as ye, faCaretUp as Se, faCheck as ve, faChevronDown as Fe, faChevronUp as Ce, faCircleNotch as Re, faEye as ke, faEyeSlash as _e, faMinus as xe, faPlus as Pe, faSort as Oe, faSortAmountDown as qe, faSortAmountDownAlt as Ae, faSquare as je, faTimes as $e } from "@fortawesome/free-solid-svg-icons";
import le from "fuzzy.js";
import Te from "axios";
var Ee = typeof globalThis != "undefined" ? globalThis : typeof window != "undefined" ? window : typeof global != "undefined" ? global : typeof self != "undefined" ? self : {};
function Le(i) {
return i && i.__esModule && Object.prototype.hasOwnProperty.call(i, "default") ? i.default : i;
}
var L = {}, Ve = {
get exports() {
return L;
},
set exports(i) {
L = i;
}
};
/*!
* pretty-checkbox-vue v1.1.9
* (c) 2017-2018 Hamed Ehtesham
* Released under the MIT License.
*/
(function(i, e) {
(function(t, s) {
i.exports = s();
})(typeof self != "undefined" ? self : Ee, function() {
return function(t) {
var s = {};
function n(l) {
if (s[l])
return s[l].exports;
var o = s[l] = { i: l, l: !1, exports: {} };
return t[l].call(o.exports, o, o.exports, n), o.l = !0, o.exports;
}
return n.m = t, n.c = s, n.d = function(l, o, a) {
n.o(l, o) || Object.defineProperty(l, o, { configurable: !1, enumerable: !0, get: a });
}, n.n = function(l) {
var o = l && l.__esModule ? function() {
return l.default;
} : function() {
return l;
};
return n.d(o, "a", o), o;
}, n.o = function(l, o) {
return Object.prototype.hasOwnProperty.call(l, o);
}, n.p = "", n(n.s = 1);
}([function(t, s) {
t.exports = function(n, l, o, a, r, c) {
var u, f = n = n || {}, d = typeof n.default;
d !== "object" && d !== "function" || (u = n, f = n.default);
var g, m = typeof f == "function" ? f.options : f;
if (l && (m.render = l.render, m.staticRenderFns = l.staticRenderFns, m._compiled = !0), o && (m.functional = !0), r && (m._scopeId = r), c ? (g = function(b) {
(b = b || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) || typeof __VUE_SSR_CONTEXT__ == "undefined" || (b = __VUE_SSR_CONTEXT__), a && a.call(this, b), b && b._registeredComponents && b._registeredComponents.add(c);
}, m._ssrRegister = g) : a && (g = a), g) {
var w = m.functional, v = w ? m.render : m.beforeCreate;
w ? (m._injectStyles = g, m.render = function(b, p) {
return g.call(p), v(b, p);
}) : m.beforeCreate = v ? [].concat(v, g) : [g];
}
return { esModule: u, exports: f, options: m };
};
}, function(t, s, n) {
var l = n(0)(n(2), null, !1, null, null, null);
l.options.__file = "src/PrettyCheckbox.vue", t.exports = l.exports;
}, function(t, s, n) {
Object.defineProperty(s, "__esModule", { value: !0 });
var l = n(3), o = { name: "pretty-checkbox", input_type: "checkbox", model: l.model, props: l.props, data: l.data, computed: l.computed, watch: l.watch, mounted: l.mounted, methods: l.methods, render: l.render };
s.default = o;
}, function(t, s, n) {
var l = n(0)(n(4), n(5), !1, null, null, null);
l.options.__file = "src/PrettyInput.vue", t.exports = l.exports;
}, function(t, s, n) {
Object.defineProperty(s, "__esModule", { value: !0 }), s.default = { name: "pretty-input", model: { prop: "modelValue", event: "change" }, props: { type: String, name: String, value: {}, modelValue: {}, trueValue: {}, falseValue: {}, checked: {}, disabled: {}, required: {}, indeterminate: {}, color: String, offColor: String, hoverColor: String, indeterminateColor: String, toggle: {}, hover: {}, focus: {} }, data: function() {
return { m_checked: void 0, default_mode: !1 };
}, computed: { _type: function() {
return this.$options.input_type ? this.$options.input_type : this.type ? this.type : "checkbox";
}, shouldBeChecked: function() {
return this.modelValue !== void 0 ? this._type === "radio" ? this.modelValue === this.value : this.modelValue instanceof Array ? this.modelValue.includes(this.value) : this._trueValue ? this.modelValue === this.trueValue : typeof this.modelValue == "string" || !!this.modelValue : this.m_checked === void 0 ? this.m_checked = typeof this.checked == "string" || !!this.checked : this.m_checked;
}, _disabled: function() {
return typeof this.disabled == "string" || !!this.disabled;
}, _required: function() {
return typeof this.required == "string" || !!this.required;
}, _indeterminate: function() {
return typeof this.indeterminate == "string" || !!this.indeterminate;
}, _trueValue: function() {
return typeof this.trueValue == "string" ? this.trueValue : !!this.trueValue;
}, _falseValue: function() {
return typeof this.falseValue == "string" ? this.falseValue : !!this.falseValue;
}, _toggle: function() {
return typeof this.toggle == "string" || !!this.toggle;
}, _hover: function() {
return typeof this.hover == "string" || !!this.hover;
}, _focus: function() {
return typeof this.focus == "string" || !!this.focus;
}, classes: function() {
return { pretty: !0, "p-default": this.default_mode, "p-round": this._type === "radio" && this.default_mode, "p-toggle": this._toggle, "p-has-hover": this._hover, "p-has-focus": this._focus, "p-has-indeterminate": this._indeterminate };
}, onClasses: function() {
var l = { state: !0, "p-on": this._toggle };
return this.color && (l["p-" + this.color] = !0), l;
}, offClasses: function() {
var l = { state: !0, "p-off": !0 };
return this.offColor && (l["p-" + this.offColor] = !0), l;
}, hoverClasses: function() {
var l = { state: !0, "p-is-hover": !0 };
return this.hoverColor && (l["p-" + this.hoverColor] = !0), l;
}, indeterminateClasses: function() {
var l = { state: !0, "p-is-indeterminate": !0 };
return this.indeterminateColor && (l["p-" + this.indeterminateColor] = !0), l;
} }, watch: { checked: function(l) {
this.m_checked = l;
}, indeterminate: function(l) {
this.$refs.input.indeterminate = l;
} }, mounted: function() {
this.$vnode.data && !this.$vnode.data.staticClass && (this.default_mode = !0), this._indeterminate && (this.$refs.input.indeterminate = !0), this.$el.setAttribute("p-" + this._type, "");
}, methods: { updateInput: function(l) {
if (this._type !== "radio") {
this.$emit("update:indeterminate", !1);
var o = l.target.checked;
if (this.m_checked = o, this.modelValue instanceof Array) {
var a = [].concat(function(r) {
if (Array.isArray(r)) {
for (var c = 0, u = Array(r.length); c < r.length; c++)
u[c] = r[c];
return u;
}
return Array.from(r);
}(this.modelValue));
o ? a.push(this.value) : a.splice(a.indexOf(this.value), 1), this.$emit("change", a);
} else
this.$emit("change", o ? !this._trueValue || this.trueValue : !!this._falseValue && this.falseValue);
} else
this.$emit("change", this.value);
} } };
}, function(t, s, n) {
var l = function() {
var o = this.$createElement, a = this._self._c || o;
return a("div", { class: this.classes }, [a("input", { ref: "input", attrs: { type: this._type, name: this.name, disabled: this._disabled, required: this._required }, domProps: { checked: this.shouldBeChecked, value: this.value }, on: { change: this.updateInput } }), this._v(" "), a("div", { class: this.onClasses }, [this._t("extra"), this._v(" "), a("label", [this._t("default")], 2)], 2), this._v(" "), this._toggle ? a("div", { class: this.offClasses }, [this._t("off-extra"), this._v(" "), this._t("off-label")], 2) : this._e(), this._v(" "), this._hover ? a("div", { class: this.hoverClasses }, [this._t("hover-extra"), this._v(" "), this._t("hover-label")], 2) : this._e(), this._v(" "), this._indeterminate ? a("div", { class: this.indeterminateClasses }, [this._t("indeterminate-extra"), this._v(" "), this._t("indeterminate-label")], 2) : this._e()]);
};
l._withStripped = !0, t.exports = { render: l, staticRenderFns: [] };
}]);
});
})(Ve);
const Ue = /* @__PURE__ */ Le(L);
var V = {}, oe = {
get exports() {
return V;
},
set exports(i) {
V = i;
}
}, ae = typeof crypto != "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto != "undefined" && typeof window.msCrypto.getRandomValues == "function" && msCrypto.getRandomValues.bind(msCrypto);
if (ae) {
var re = new Uint8Array(16);
oe.exports = function() {
return ae(re), re;
};
} else {
var ce = new Array(16);
oe.exports = function() {
for (var e = 0, t; e < 16; e++)
e & 3 || (t = Math.random() * 4294967296), ce[e] = t >>> ((e & 3) << 3) & 255;
return ce;
};
}
var he = [];
for (var _ = 0; _ < 256; ++_)
he[_] = (_ + 256).toString(16).substr(1);
function De(i, e) {
var t = e || 0, s = he;
return [
s[i[t++]],
s[i[t++]],
s[i[t++]],
s[i[t++]],
"-",
s[i[t++]],
s[i[t++]],
"-",
s[i[t++]],
s[i[t++]],
"-",
s[i[t++]],
s[i[t++]],
"-",
s[i[t++]],
s[i[t++]],
s[i[t++]],
s[i[t++]],
s[i[t++]],
s[i[t++]]
].join("");
}
var Me = De, Ge = V, Ne = Me;
function Be(i, e, t) {
var s = e && t || 0;
typeof i == "string" && (e = i === "binary" ? new Array(16) : null, i = null), i = i || {};
var n = i.random || (i.rng || Ge)();
if (n[6] = n[6] & 15 | 64, n[8] = n[8] & 63 | 128, e)
for (var l = 0; l < 16; ++l)
e[s + l] = n[l];
return e || Ne(n);
}
var He = Be;
function Ie(i, e, t, s, n, l, o, a) {
var r = typeof i == "function" ? i.options : i;
e && (r.render = e, r.staticRenderFns = t, r._compiled = !0), s && (r.functional = !0), l && (r._scopeId = "data-v-" + l);
var c;
if (o ? (c = function(d) {
d = d || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext, !d && typeof __VUE_SSR_CONTEXT__ != "undefined" && (d = __VUE_SSR_CONTEXT__), n && n.call(this, d), d && d._registeredComponents && d._registeredComponents.add(o);
}, r._ssrRegister = c) : n && (c = a ? function() {
n.call(
this,
(r.functional ? this.parent : this).$root.$options.shadowRoot
);
} : n), c)
if (r.functional) {
r._injectStyles = c;
var u = r.render;
r.render = function(g, m) {
return c.call(m), u(g, m);
};
} else {
var f = r.beforeCreate;
r.beforeCreate = f ? [].concat(f, c) : [c];
}
return {
exports: i,
options: r
};
}
const Qe = {
name: "VueQuintable",
props: {
rows: {
type: Array,
default() {
return [];
}
},
config: {
type: Object,
default() {
return {};
}
},
dynamicConfig: {
type: Boolean,
default: !1
},
value: {
type: Array,
default() {
return [];
}
},
selectedRows: {
type: Array,
default() {
return [];
}
},
preSelectedRows: {
type: Array,
default() {
return [];
}
},
loading: {
type: Boolean,
default: !1
},
filters: {
type: Object,
default() {
return {};
}
},
filterGroups: {
type: Array,
default() {
return [];
}
},
verbose: {
type: Boolean,
default: !1
},
nested: {
type: Boolean,
default: !1
},
tableClasses: {
type: String,
default: ""
},
sortOrder: {
type: Array,
default() {
return [];
}
},
updated: {
type: [Boolean, Object, Date],
default: !1
},
axios: {
type: Function
},
identifier: {
type: String,
default: null
},
initialSearchTerm: {
type: String,
default: null
}
},
data() {
return {
rowsUpdatedKey: Date.now(),
indexesUpdatedKey: Date.now(),
generatedUpdatedKey: Date.now(),
hoveredRow: null,
allSelectedCustom: null,
selected: {},
openRows: {},
sortedIndexes: {},
currentSortIndexes: {},
query: "",
currentPage: 1,
paginationOptions: [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
15,
20,
25,
30,
50,
100
],
fetching: !1,
ajaxRows: [],
ajaxPages: 0,
ajaxAll: 0,
customRowsPerPage: null,
customMultiSort: null,
customPageSort: null,
hiddenBreakpoints: [],
initBreakpoints: !0,
breakpointTimeout: null,
cancelSource: null,
lastQuery: "",
pageOffset: 0,
uuid: He(),
loaderHeight: 0,
defaultOperator: "equal",
queryAjaxTimeout: null,
lastSearchQueryUpdated: null,
operatorFunctions: {
equal: (i, e) => e === i,
greater: (i, e) => e > i,
less: (i, e) => e < i,
greaterEqual: (i, e) => e >= i,
lessEqual: (i, e) => e <= i,
contains: (i, e) => !Array.isArray(e) && typeof e != "string" ? !1 : e.indexOf(i) !== -1,
notContains: (i, e) => !Array.isArray(e) && typeof e != "string" ? !1 : e.indexOf(i) === -1,
startsWith: (i, e) => typeof e != "string" ? !1 : e.indexOf(i) === 0,
endsWitch: (i, e) => typeof e != "string" ? !1 : e.indexOf(i, this.length - i.length) !== -1,
matches(i, e) {
return !(i instanceof RegExp) || typeof e != "string" ? !1 : i.test(e);
}
},
storedState: {},
activeRow: null
};
},
computed: {
/**
* Just a debug flag
*
*/
DEBUG() {
return this.verbose;
},
/**
* Checks if an axios instance has been passed to quintable or the default axios has to be used
*
*/
axiosFinal() {
return this.axios ? this.axios : this.$globalVueQuintableaxios ? this.$globalVueQuintableaxios : Te;
},
/**
* Set default values for all possible config values
*
*/
configFinal() {
if (!this.config)
return {};
let i = !1;
if (this.config.pagination === !0)
i = 25;
else if (this.config.pagination) {
let h = 0;
for (; this.paginationOptions[h] <= this.config.pagination && h < this.paginationOptions.length; )
h++;
i = this.paginationOptions[Math.min(h - 1, this.paginationOptions.length - 1)];
}
let e = "of";
this.config.numberOfVisibleRowsFillerWord && (e = this.config.numberOfVisibleRowsFillerWord);
let t = !1;
this.config.select && (t = !0);
let s = 250;
this.config.ajaxRequestDelay && (s = this.config.ajaxRequestDelay);
let n = "bg-muted";
this.config.hoverClass === !1 ? n = "" : this.config.hoverClass && this.config.hoverClass !== !0 && (n = this.config.hoverClass);
let l = "bg-muted";
this.config.activeClass === !1 ? l = "" : this.config.activeClass && this.config.activeClass !== !0 && (l = this.config.activeClass);
let o = !1;
this.config.multiSort && (o = !0);
let a = !1;
this.config.pageSort && (a = !0);
let r = !1;
this.config.multiSortSelect && (r = !0);
let c = !1;
this.config.pageSortSelect && (c = !0);
let u = !1;
this.config.ajaxUrl && (u = this.config.ajaxUrl);
let f = "post";
["pre", "post"].includes(this.config.selectPosition) && (f = this.config.selectPosition);
let d = !1;
this.config.expandedAll && (d = !0);
let g = !1;
this.config.useFuzzySearch && (g = !0);
let m = !1;
this.config.prettySelect && (m = !0);
let w = !1;
this.config.rowsSelect && (w = !0);
let v = !1;
this.config.keepSelect && (v = !0);
let b = !1;
this.config.disallowAllOption && (b = !0);
let p = !1;
this.config.hideEmptyColumns && (p = !0);
let y = "none";
["none", "active", "all"].includes(this.config.ignoreSortEmptyColumns) && (y = this.config.ignoreSortEmptyColumns);
let U = !1;
this.config.search && (U = !0);
let D = 1;
this.config.searchLength && (D = this.config.searchLength);
let M = "Search...";
this.config.searchPlaceholder && (M = this.config.searchPlaceholder);
let G = "Multiple sort";
this.config.multiSortPlaceholder && (G = this.config.multiSortPlaceholder);
let N = "Page sort";
this.config.pageSortPlaceholder && (N = this.config.pageSortPlaceholder);
let B = "AND";
["AND", "OR"].includes(this.config.filterRelation) && (B = this.config.filterRelation);
let H = "AND";
["AND", "OR"].includes(this.config.filterGroupRelation) && (H = this.config.filterGroupRelation);
let I = "Rows per page:";
this.config.rowsPlaceholder && (I = this.config.rowsPlaceholder);
let Q = "No rows...";
this.config.emptyPlaceholder && (Q = this.config.emptyPlaceholder);
let K = !1;
this.config.selectAll && (K = !0);
let C = !1;
this.config.selectAllRows && (C = !0), u && C && (console.warn(
"Option selectAllRows was deactivated automatically because ajaxUrl is set!"
), C = !1);
let R = !1;
this.config.storeState && (R = !0), !this.identifier && this.config.storeState && (console.warn(
"Option storeState was deactivated automatically because table identifier is not set!"
), R = !1);
const O = "test-local-storage";
try {
localStorage.setItem(O, O), localStorage.removeItem(O);
} catch (h) {
console.warn(
"Option storeState was deactivated automatically because local storage is not available!"
), R = !1;
}
let z = !1;
this.config.defaultSelected && (z = !0);
let J = !1;
this.config.hideRowToggle && (J = !0);
let W = !1;
this.config.enableRowTabIndex && (W = !0);
let X = "chevron-up";
this.config.expandedRowIcon && typeof this.config.expandedRowIcon == "string" && ["chevron-up", "minus", "caret-up", "eye-slash"].includes(
this.config.expandedRowIcon.toLowerCase()
) && (X = this.config.expandedRowIcon.toLowerCase());
let Y = "chevron-down";
this.config.collapsedRowIcon && typeof this.config.collapsedRowIcon == "string" && ["chevron-down", "plus", "caret-down", "eye"].includes(
this.config.collapsedRowIcon.toLowerCase()
) && (Y = this.config.collapsedRowIcon.toLowerCase());
let Z = 5;
this.config.pageRange && (Z = this.config.pageRange);
let ee = "col-12";
this.config.searchClass && (ee = this.config.searchClass);
let te = "row";
this.config.searchContainerClass && (te = this.config.searchContainerClass);
let ie = "GET";
this.config.requestMethod && typeof this.config.requestMethod == "string" && ["POST", "GET"].includes(this.config.requestMethod.toUpperCase()) && (ie = this.config.requestMethod.toUpperCase());
let se = 0, q = [], A = [], j = [], k = [], $ = [], T = [], F = [], E = [], ne = null;
if (this.config.columns) {
se = this.config.columns.length;
for (let h = 0; h < this.config.columns.length; h++)
F[h] = "", this.config.columns[h] && this.config.columns[h].headline ? (q[h] = this.config.columns[h].headline, F[h] += this.config.columns[h].headline.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/\s+/g, "-").toLowerCase()) : q[h] = "", F[h] += " column-" + (h + 1), this.config.columns[h].classes && (F[h] += " " + this.config.columns[h].classes), this.config.columns[h] && this.config.columns[h].breakpoint ? A[h] = this.config.columns[h].breakpoint : A[h] = "", this.config.columns[h] && this.config.columns[h].sort ? this.config.columns[h].firstSortDirection && typeof this.config.columns[h].firstSortDirection == "string" && ["DESC", "ASC"].includes(
this.config.columns[h].firstSortDirection.toUpperCase()
) ? k[h] = this.config.columns[h].firstSortDirection.toUpperCase() : k[h] = !0 : k[h] = !1, this.config.columns[h] && this.config.columns[h].ignoreEmpty ? E[h] = !0 : E[h] = !1, this.config.columns[h] && this.config.columns[h].sticky ? $[h] = !0 : $[h] = !1, this.config.columns[h] && this.config.columns[h].hidden ? j[h] = !0 : j[h] = !1, this.config.columns[h] && this.config.columns[h].align ? T[h] = this.config.columns[h].align : T[h] = !1;
ne = this.config.columns;
}
return {
headlines: q,
columnClasses: F,
sorts: k,
pageSort: a,
multiSort: o,
pageSortSelect: c,
multiSortSelect: r,
filterGroupRelation: H,
filterRelation: B,
rowsSelect: w,
keepSelect: v,
disallowAllOption: b,
defaultSelected: z,
searchLength: D,
search: U,
searchPlaceholder: M,
useFuzzySearch: g,
ajaxUrl: u,
pageSortPlaceholder: N,
multiSortPlaceholder: G,
rowsPlaceholder: I,
emptyPlaceholder: Q,
stickyCols: $,
alignments: T,
breakpoints: A,
hiddenCols: j,
ignoreEmpty: E,
hideEmptyColumns: p,
ignoreSortEmptyColumns: y,
pagination: i,
numberOfVisibleRowsFillerWord: e,
select: t,
selectAll: K,
selectAllRows: C,
hoverClass: n,
activeClass: l,
expandedAll: d,
pageRange: Z,
prettySelect: m,
number: se,
columns: ne,
hideRowToggle: J,
enableRowTabIndex: W,
expandedRowIcon: X,
collapsedRowIcon: Y,
selectPosition: f,
searchClass: ee,
searchContainerClass: te,
requestMethod: ie,
storeState: R,
ajaxRequestDelay: s
};
},
/**
* Checks which rows shall be shown
*
* @returns {Array} a boolean array which represents all indexes of the rows
*/
visibleRows() {
if (this.rowsUpdatedKey && !this.configFinal.ajaxUrl && this.currentRowsPerPage !== "All") {
let i = [];
for (let l = 0; l < this.rowsFinal.length; l++)
i.push(!1);
let e = {};
for (let l in this.sortedIndexes)
Object.prototype.hasOwnProperty.call(this.sortedIndexes, l) && this.filteredRows[this.sortedIndexes[l]] && (e[l] = this.sortedIndexes[l]);
let t = this.currentPage * this.currentRowsPerPage, s = t - this.currentRowsPerPage, n = 0;
for (let l in e)
Object.prototype.hasOwnProperty.call(e, l) && (l = parseInt(l), n < t && n >= s && (i[e[l]] = !0), n++);
return i;
} else
return this.filteredRows;
},
/**
* Checks which indexes belongs to the current visible rows
*
* @returns {Array} an array of all visible indexes
*/
visibleRowIndexes() {
let i = [];
if (this.indexesUpdatedKey)
if (this.configFinal.ajaxUrl && !this.pageSort)
for (let e = 0; e < this.rowsFinal.length; e++)
i.push(e);
else
for (let e in this.sortedIndexes)
Object.prototype.hasOwnProperty.call(this.sortedIndexes, e) && this.visibleRows[this.sortedIndexes[e]] && i.push(this.sortedIndexes[e]);
return i;
},
/**
* Checks which cells are hidden and shall be displayed as additional generated rows.
*
* @returns {Object} an object with sorted index as key and generated row array of cells as value
*/
generatedRows() {
let i = {};
if (this.generatedUpdatedKey)
for (let e = 0; e < this.rowsFinal.length; e++) {
let t = this.rowsFinal[e].cells ? this.rowsFinal[e].cells : this.rowsFinal[e], s = {};
for (let n = 0; n < this.hiddenBreakpoints.length; n++) {
let l = this.hiddenBreakpoints[n];
for (let o = 0; o < this.configFinal.columns.length; o++) {
let a = this.configFinal.columns[o];
!(this.configFinal.hiddenCols[o] || !this.configFinal.ignoreEmpty[o] && this.configFinal.hideEmptyColumns && (this.isColEmpty(o) || this.isColEmpty(o, e)) || this.emptyColumns[o]) && a.breakpoint && (a.breakpoint.toLocaleLowerCase() === "all" || a.breakpoint.toLocaleLowerCase() === l) && !a.sticky && !a.alwaysExpanded && (s[o] = t[o]);
}
}
i[e] = s;
}
return i;
},
stickyRows() {
let i = {};
for (let e = 0; e < this.rowsFinal.length; e++) {
let t = this.rowsFinal[e].cells ? this.rowsFinal[e].cells : this.rowsFinal[e], s = {};
for (let n = 0; n < this.hiddenBreakpoints.length; n++) {
let l = this.hiddenBreakpoints[n];
for (let o = 0; o < this.configFinal.columns.length; o++) {
let a = this.configFinal.columns[o];
const r = this.configFinal.hiddenCols[o] || !this.configFinal.ignoreEmpty[o] && this.configFinal.hideEmptyColumns && (this.isColEmpty(o) || this.isColEmpty(o, e)) || this.emptyColumns[o];
(!r && a.sticky || !r && a.breakpoint && (a.breakpoint.toLocaleLowerCase() === "all" || a.breakpoint.toLocaleLowerCase() === l) && a.alwaysExpanded) && (s[o] = t[o]);
}
}
i[e] = s;
}
return i;
},
/**
* Calculates the all selected flag. Special case: defaultSelected is set and no user action in place
*
*/
allSelectedProperty: {
get() {
return this.allSelectedCustom === null ? this.configFinal.defaultSelected : this.allSelectedCustom;
},
set(i) {
this.allSelectedCustom = i;
}
},
/**
* Calculates number of current rows per page. Special case: no user action in place
*
*/
currentRowsPerPageProperty: {
get() {
return this.customRowsPerPage ? this.customRowsPerPage : this.currentRowsPerPage;
},
set(i) {
this.customRowsPerPage = i;
}
},
/**
* Checks if page sort is currently active. Special case: no user action in place
*
*/
pageSort: {
get() {
return this.customPageSort === null ? this.configFinal.pageSort : this.customPageSort;
},
set(i) {
this.customPageSort = i;
}
},
/**
* Checks if multi sort is currently active. Special case: no user action in place
*
*/
multiSort: {
get() {
return this.customMultiSort === null ? this.configFinal.multiSort : this.customMultiSort;
},
set(i) {
this.customMultiSort = i;
}
},
/**
* Calculates the value of number of shown rows. If no pagination is set, all will be displayed.
*
*/
currentRowsPerPage() {
return this.customRowsPerPage ? this.customRowsPerPage : this.configFinal.pagination ? this.configFinal.pagination : "All";
},
/**
* Checks if there are any generated rows in place
*
*/
hasGeneratedRows() {
for (let i in this.generatedRows)
if (Object.prototype.hasOwnProperty.call(this.generatedRows, i) && Object.keys(this.generatedRows[i]).length)
return !0;
return !1;
},
/**
* Calculates the classes array for every cell from the align parameters of rows and cells and the custom class string passed to cells
*
*/
cellClassesParsed() {
let i = [];
for (let e = 0; e < this.rowsFinal.length; e++) {
i.push([]);
let t = this.rowsFinal[e].align, s = this.rowsFinal[e].cells ? this.rowsFinal[e].cells : this.rowsFinal[e];
for (let n = 0; n < s.length; n++) {
let l = [], o = this.configFinal.alignments[n];
if ((s[n].align || t || o) && (s[n].align ? l.push("text-" + s[n].align) : t ? l.push("text-" + t) : l.push("text-" + o)), s[n].classes) {
let a = s[n].classes.split(" ");
Array.prototype.push.apply(l, a);
}
i[e].push(l.join(" "));
}
}
return i;
},
/**
*Calculates the number of hidden columns
*
*/
hiddenColumns() {
const i = {};
for (let e = 0; e < this.visibleRowIndexes.length; e++) {
let t = 0;
const s = this.visibleRowIndexes[e];
for (let n = 0; n < this.hiddenBreakpoints.length; n++) {
let l = this.hiddenBreakpoints[n];
for (let o = 0; o < this.configFinal.columns.length; o++) {
let a = this.configFinal.columns[o];
if (!(this.configFinal.hiddenCols[o] || !this.configFinal.ignoreEmpty[o] && this.configFinal.hideEmptyColumns && (this.isColEmpty(o) || this.isColEmpty(o, s)) || this.emptyColumns[o]) && a.breakpoint && (a.breakpoint.toLocaleLowerCase() === "all" || a.breakpoint.toLocaleLowerCase() === l)) {
t++;
break;
}
}
}
i[s] = t;
}
return i;
},
/**
* Calculates the actual rows which shall be used.
*
*/
rowsFinal() {
return this.configFinal.ajaxUrl ? this.ajaxRows : this.rows ? this.rows : [];
},
/**
* Checks if some rows are selected
*
*/
someSelected() {
return Object.values(this.selected).filter((i) => i).length > 0;
},
/**
* Calculates the number of active sorts
*
*/
numberOfSorts() {
return Object.keys(this.currentSortIndexes).length;
},
/**
* Calculates the actual visible pagination options to sort out options which are bigger than number of rows
*
*/
paginationOptionsFilled() {
return (this.configFinal.disallowAllOption ? [] : ["All"]).concat(this.paginationOptions);
},
/**
* Calculates columns which can be sorted from config value
*
*/
sortingColumns() {
let i = {};
for (let e in this.currentSortIndexes)
Object.prototype.hasOwnProperty.call(this.currentSortIndexes, e) && (i[e] = this.configFinal.columns[e]);
return i;
},
/**
* Calculates the classes of every table header
*
*/
headerClass() {
let i = [];
for (let e = 0; e < this.configFinal.number; e++) {
let t = [];
this.configFinal.alignments[e] && t.push("text-" + this.configFinal.alignments[e]), this.configFinal.sorts[e] && (t.push("sort-header"), this.currentSortIndexes[e] && t.push("active")), i.push(
t.join(" ") + " quintable--table-container--table--header-row--th " + this.configFinal.columnClasses[e]
);
}
return i;
},
/**
* Calculates the actual displayed page range (number of shown page buttons in pagination) to prevent showing pages out of row range
*
*/
pageRange() {
return Math.min(this.configFinal.pageRange, this.pages);
},
/**
* Calculates number of pages regarding the rows per page and visible rows
*
*/
pages() {
return this.ajaxPages ? this.ajaxPages : !this.currentRowsPerPage || this.currentRowsPerPage === "All" ? 1 : Math.max(
1,
Math.ceil(this.numberOfVisibleRows / this.currentRowsPerPage)
);
},
/**
* Calculates the number of visible Rows without paging;
*
*/
numberOfVisibleRows() {
return this.configFinal.ajaxUrl ? this.ajaxAll : this.filteredRows.filter((i) => i).length;
},
/**
* Calculates all accessible pages regarding to page range and current page
*
*/
visiblePages() {
let i = [], e = 0;
if (this.pages < this.pageRange || this.currentPage === 1)
e = 1;
else if (this.currentPage === this.pages)
e = this.currentPage - (this.pageRange - 1);
else {
let t;
this.pageRange % 2 === 0 ? t = this.pageRange / 2 : (t = (this.pageRange - 1) / 2, this.currentPage + t > this.pages && t++), e = this.currentPage - t;
}
e = Math.max(e + this.pageOffset, 1);
for (let t = 0; t < this.pageRange && !(t + e > this.pages); t++)
i.push(t + e);
return i;
},
/**
* Checks if any filter is active
*
*/
filterActive() {
return this.filtersFinal && Object.keys(this.filtersFinal).length;
},
/**
* Calculates all rows which passes the filter and search restrictions
*
*/
filteredRows() {
let i = [];
if (this.configFinal.ajaxUrl)
return this.rowsFinal;
for (let e = 0; e < this.rowsFinal.length; e++)
i.push(!0);
if (!this.configFinal.search && !this.filterActive || !this.filterActive && this.configFinal.search && this.query.length < this.configFinal.searchLength)
return i;
for (let e = 0; e < this.rowsFinal.length; e++) {
let t = this.rowsFinal[e].cells ? this.rowsFinal[e].cells : this.rowsFinal[e], s = !1, n = !1;
if (this.configFinal.search && this.query.length >= this.configFinal.searchLength) {
for (let l = 0; l < t.length; l++) {
let o = t[l], a = o.html ? o.html : o.text;
if (a) {
if (this.configFinal.useFuzzySearch && le(
(a + "").toLowerCase(),
(this.query + "").toLowerCase()
).score > 6) {
s = !0;
break;
}
if ((a + "").toLowerCase().indexOf((this.query + "").toLowerCase()) !== -1) {
s = !0;
break;
}
}
}
if (this.rowsFinal[e].keywords)
for (let l = 0; l < this.rowsFinal[e].keywords.length; l++) {
if (this.configFinal.useFuzzySearch && le(
(this.rowsFinal[e].keywords[l] + "").toLowerCase(),
(this.query + "").toLowerCase()
).score > 6) {
s = !0;
break;
}
if ((this.rowsFinal[e].keywords[l] + "").toLowerCase().indexOf((this.query + "").toLowerCase()) !== -1) {
s = !0;
break;
}
}
n = !0;
}
if (this.filterActive && !this.rowsFinal[e].filters)
s = !1;
else if ((n && s || !n) && this.filterActive) {
if (this.filterGroups.length)
s = this.doFiltering(this.rowsFinal[e].filters);
else {
let l = {
items: [],
relation: this.configFinal.filterRelation
};
for (let o in this.filtersFinal)
Object.prototype.hasOwnProperty.call(this.filtersFinal, o) && l.items.push({ name: o });
s = this.doFilteringForGroup(
this.filtersFinal,
this.rowsFinal[e].filters,
l
), this.DEBUG && console.log("FILTER GROUPS CALCULATED", this.filterGroups);
}
this.DEBUG && (console.log(`
`), console.log("ROW " + e, s, this.rowsFinal[e].filters), console.log(`
`));
}
i[e] = s;
}
return i;
},
/**
* Checks if there are currently no rows visible
*
*/
noRows() {
return !this.numberOfVisibleRows;
},
/**
* Calculates the first visible row for displaying
*
*/
firstVisibleRow() {
return this.currentRowsPerPage === "All" || this.pages === 1 ? 1 : this.currentPage * this.currentRowsPerPage - this.currentRowsPerPage + 1;
},
/**
* Calculates the last visible row for displaying
*
*/
lastVisibleRow() {
return this.currentRowsPerPage === "All" || this.pages === 1 ? this.numberOfVisibleRows : Math.min(
this.firstVisibleRow + this.currentRowsPerPage - 1,
this.numberOfVisibleRows
);
},
/**
* Calculates if something is currently loading via ajax
*
*/
ajaxLoading() {
return this.loading || this.fetching;
},
/**
* Calculates if a headline is to be shown on generated rows
*
*/
showHeadlines() {
let i = [];
for (let e = 0; e < this.configFinal.number; e++)
//headline is not empty
this.configFinal.headlines[e] && //show breakpoints match with set settings
//no show breakpoint is set
(!this.configFinal.columns[e].showHeadlineBreakpoint || //show breakpoint is set and the hidden breakpoints contain this breakpoint
this.configFinal.columns[e].showHeadlineBreakpoint && this.hiddenBreakpoints.findIndex(
(t) => this.configFinal.columns[e] && t === this.configFinal.columns[e].showHeadlineBreakpoint
) !== -1) && //hide breakpoints match with set settings
//no hide breakpoint is set
(!this.configFinal.columns[e].hideHeadlineBreakpoint || //hide breakpoint is set and the hidden breakpoints contain this breakpoint
this.configFinal.columns[e].hideHeadlineBreakpoint && this.hiddenBreakpoints.findIndex(
(t) => this.configFinal.columns[e] && t === this.configFinal.columns[e].hideHeadlineBreakpoint
) === -1) ? i.push(!0) : i.push(!1);
return i;
},
/**
* Key of filter operator fuctions
*
*/
operators() {
return Object.keys(this.operatorFunctions);
},
emptyColumns() {
const i = {}, e = this.configFinal.ignoreSortEmptyColumns;
for (let t = 0; t < this.configFinal.number; t++) {
const s = this.configFinal.ignoreEmpty[t], n = this.configFinal.sorts[t];
!this.configFinal.hideEmptyColumns || s || e === "none" && n || e === "active" && Object.keys(this.currentSortIndexes).includes(t + "") ? i[t] = !1 : i[t] = this.isColEmpty(t);
}
return i;
},
filtersFinal() {
return !this.configFinal.storeState || !this.storedState.filters ? this.filters : this.storedState.filters;
},
rowClasses() {
const i = {};
for (let e = 0; e < this.visibleRowIndexes.length; e++) {
const t = this.visibleRowIndexes[e], s = [];
this.rowsFinal[t].classes && s.push(this.rowsFinal[t].classes), this.hoveredRow === t && s.push(this.configFinal.hoverClass), this.activeRow === t && s.push(this.configFinal.activeClass), this.openRows[t] && s.push("row-expanded"), this.hiddenColumns[t] > 0 && !this.openRows[t] && s.push("row-collapsed"), i[t] = s.join(" ");
}
return i;
}
},
watch: {
rowsFinal: {
handler(i) {
if (i && i.length)
for (let e = 0; e < i.length; e++) {
let t = i[e].cells ? i[e].cells : i[e];
t.length !== this.config.columns.length && console.error(
`Column count on row index ${e} doesn't fit for column config! expected: ${this.config.columns.length}, got: ${t.length}` + (this.configFinal.ajaxUrl ? ` | URL: ${this.configFinal.ajaxUrl}` : "") + (this.identifier ? ` | IDENTIFIER: ${this.identifier}` : ""),
i[e]
);
}
},
immediate: !0
},
/**
* Check if some rows should be selected due to an outside change
*
*/
preSelectedRows(i) {
if (i) {
for (let e = 0; e < this.rowsFinal.length; e++)
this.$set(this.selected, e, !1);
if (i && i.length) {
let e = 0;
const t = this.configFinal.selectAllRows ? this.rowsFinal.map((s, n) => n) : this.visibleRowIndexes;
for (let s = 0; s < i.length; s++) {
const n = i[s].key, l = i[s].value;
for (let o = 0; o < t.length; o++) {
const a = t[o];
!this.rowsFinal[a].disableSelect && this.rowsFinal[a][n] === l && (this.$set(this.selected, a, !0), e++);
}
}
this.configFinal.selectAllRows ? this.allSelectedCustom = e && e === this.rowsFinal.filter((s) => !s.disableSelect).length : this.allSelectedCustom = e && e === this.rowsFinal.filter(
(s, n) => !s.disableSelect && this.visibleRows[this.sortedIndexes[n]]
).length;
} else
this.allSelectedCustom = !1;
}
},
/**
* Resets page and selects if a filter value is changes
*
*/
filters: {
handler() {
if (this.configFinal.ajaxUrl) {
const i = !(this.configFinal.storeState && this.storedState.filters);
this.pageSort = !1, this.loadViaAjax(i, i, "FILTERS");
}
this.pageSort && (this.currentSortIndexes = {}, this.resetSorts(), this.recomputeEssentials()), this.configFinal.storeState && (this.$delete(this.storedState, "filters"), localStorage.setItem(
`vue-quintable-${this.identifier}-filters`,
JSON.stringify(this.filtersFinal)
));
},
deep: !0
},
filtersFinal(i) {
this.$emit("update:filters", i, "update:filters");
},
/**
* Trigger reload current page without changing filter/search/page from outside
*
*/
updated(i) {
this.configFinal.ajaxUrl && (i && i.clear ? this.loadViaAjax(!0, !0, "UPDATED") : i && this.loadViaAjax(!1, !0, "UPDATED"));
},
/**
* Set height of loader if loading is set from outside
*
*/
loading() {
this.loaderHeight = this.$refs["height-wrapper"] ? this.$refs["height-wrapper"].clientHeight : 0;
},
/**
* Reset page and select if filtering/search is active
*
*/
filteredRows: {
handler(i, e) {
if (JSON.stringify(i) === JSON.stringify(e) || this.configFinal.ajaxUrl)
return;
this.visibleRowIndexes.findIndex(
(n) => n === this.activeRow
) < 0 && (this.activeRow = null), this.currentPage !== 1 ? this.currentPage = 1 : this.configFinal.keepSelect || this.resetSelect("filteredRows watcher");
const s = [];
for (let n = 0; n < i.length; n++) {
const l = n.toString();
i[n] && s.push(
this.rowsFinal[this.sortedIndexes[l] ? this.sortedIndexes[l] : n]
);
}
this.$emit("filtered:rows", s, "filtered:rows");
},
deep: !0,
immediate: !0
},
/**
* Emits an event if breakpoints are changed
*
*/
hiddenBreakpoints(i) {
this.initBreakpoints || this.$emit("change:breakpoints", i, "change:breakpoints"), this.initBreakpoints = !1;
},
/**
* Emits an event if a row is hovered
*
*/
hoveredRow(i) {
i !== null && this.$emit("hover:row", this.rowsFinal[i], "hover:row");
},
/**
* Resets page and selects if a search query is entered and emits and event
*
*/
query(i, e) {
if (this.lastQuery = e, this.configFinal.ajaxUrl) {
this.pageSort = !1;
const t = !(this.configFinal.storeState && this.storedState.query);
clearTimeout(this.queryAjaxTimeout), this.queryAjaxTimeout = setTimeout(() => {
this.loadViaAjax(t, t, "QUERY");
}, this.configFinal.ajaxRequestDelay);
}
i.length >= this.configFinal.searchLength && this.lastSearchQueryUpdated !== i ? (this.$emit("update:search", i, "update:search"), this.lastSearchQueryUpdated = i) : this.lastSearchQueryUpdated !== null && (this.lastSearchQueryUpdated = null, this.$emit("update:search", null, "update:search")), this.pageSort && (this.currentSortIndexes = {}, this.resetSorts(), this.recomputeEssentials()), this.configFinal.storeState && (this.$delete(this.storedState, "query"), localStorage.setItem(
`vue-quintable-${this.identifier}-query`,
this.query
));
},
/**
* Resets page and selects if the number of rows per page is changed and emits and event
*
*/
currentRowsPerPage(i) {
this.$emit("update:rows-per-page", i, "update:rows-per-page");
const e = !(this.configFinal.storeState && this.storedState["rows-per-page"]);
if (this.configFinal.storeState && (this.$delete(this.storedState, "rows-per-page"), localStorage.setItem(
`vue-quintable-${this.identifier}-rows-per-page`,
this.currentRowsPerPage
)), this.configFinal.ajaxUrl) {
this.loadViaAjax(e, e, "PAGE_ROWS");
return;
}
this.currentPage !== 1 ? this.currentPage = 1 : this.configFinal.selectAllRows || this.resetSelect("currentRowsPerPage watcher");
},
/**
* Reset everything if rows have been changed (e.g. [re]loaded via ajax)
*
*/
rows() {
this.clearLists(), this.initLists(), this.activeRow = null, this.$nextTick(() => {
this.recomputeEssentials(), this.$forceUpdate(), this.configFinal.defaultSelected && (this.allSelectedCustom = null, this.checkAll(!0));
});
},
/**
* Reset everything if config has been changed (e.g. [re]loaded via ajax)
*
*/
config(i) {
if (typeof i != "object")
throw "config must be an object";
this.dynamicConfig || (this.initLists(), this.$forceUpdate(), this.activeRow = null, this.configFinal.ajaxUrl && this.loadViaAjax(!1, !0, "CONFIG"), this.configFinal.defaultSelected && this.checkAll(!0));
},
/**
* Prepare the selected rows array for passing to the event and emits it
*
*/
selected: {
handler(i) {
let e = [];
for (let t in this.sortedIndexes)
if (Object.prototype.hasOwnProperty.call(this.sortedIndexes, t) && i[this.sortedIndexes[t]]) {
const s = this.rowsFinal[this.sortedIndexes[t]];
s.disableSelect || e.push(s);
}
this.configFinal.storeState && localStorage.setItem(
`vue-quintable-${this.identifier}-selected-rows`,
JSON.stringify(i)
), this.$emit("input", e), this.$emit("update:selected-rows", e, "update:selected-rows");
},
deep: !0
},
/**
* Resets the row selection if page has been changed and emits an event
*
*/
currentPage(i) {
this.pageOffset = 0, this.activeRow = null, this.$emit("update:page", i, "update:page");
const e = !(this.configFinal.storeState && this.storedState["current-page"]);
if (this.configFinal.storeState && (this.$delete(this.storedState, "current-page"), localStorage.setItem(
`vue-quintable-${this.identifier}-current-page`,
this.currentPage
)), this.configFinal.ajaxUrl) {
this.resetSelect("currentPage watcher ajax"), this.loadViaAjax(!1, e, "PAGE");
return;
}
this.configFinal.selectAllRows || this.resetSelect("currentPage watcher"), this.pageSort && (this.currentSortIndexes = {}, this.resetSorts()), this.recomputeEssentials();
},
/**
* Reorder the indexes of sorting if a sort column has been removed (e.g. column 1,2,3 are active, 2 has been removed, 3 has to be 2 now)
*
*/
customMultiSort(i) {
if (!i && Object.keys(this.currentSortIndexes).length > 1) {
let e, t;
for (let s in this.currentSortIndexes)
if (Object.prototype.hasOwnProperty.call(
this.currentSortIndexes,
s
) && this.currentSortIndexes[s].order === 0) {
e = this.currentSortIndexes[s], t = s;
break;
}
this.currentSortIndexes = {}, this.$set(this.currentSortIndexes, t, e), this.sort();
}
},
/**
* Reset sort order on page sort change
*
*/
pageSort() {
this.currentSortIndexes = {}, this.resetSorts(), this.recomputeEssentials();
},
/**
* Reset sort order if it is changed from outside
*
*/
sortOrder: {
immediate: !0,
handler() {
this.currentSortIndexes = {};
for (let i = 0; i < this.sortOrder.length; i++)
typeof this.sortOrder[i] == "object" ? this.setSortColumn(this.sortOrder[i].index, this.sortOrder[i].asc) : typeof this.sortOrder[i] == "number" && this.setSortColumn(this.sortOrder[i]);
}
},
activeRow(i) {
const e = this.visibleRowIndexes.findIndex((t) => t === i);
this.$emit("active:row", this.rowsFinal[i], "active:row", e);
}
},
methods: {
/**
* sets search query from outside (search slot)
*
*/
setSearchQuery(i) {
this.query = i;
},
/**
* just a small string casting function
*
*/
valueToString: function(i) {
switch (i) {
case "":
case null:
case !1:
case void 0:
return "";
case 0:
case "0":
default:
return String(i);
}
},
/**
* checks if the passed cell is empty for one or all rows
*
*/
isColEmpty(i, e = -1) {
return (e > -1 ? [e] : this.visibleRowIndexes).map((n) => this.rowsFinal[n]).filter((n) => {
const l = n.cells ? n.cells : n;
return typeof l[i].isEmpty == "boolean" && l[i].isEmpty === !0 ? !1 : !!(typeof l[i].isEmpty == "boolean" && l[i].isEmpty === !1 || typeof l[i].text != "undefined" && this.valueToString(l[i].text) || typeof l[i].html != "undefined" && this.valueToString(l[i].html));
}).length <= 0;
},
/**
* Handler for generic component events
*
*/
handleComponentEvent(i) {
this.$emit("component:event", i, "component:event");
},
/**
* Calculate which pages should be displayed in pagination due to page offset