@dcodegroup-au/dsg-vue
Version:
Front-end Vue/Tailwind DSG for UntitledUI.
1,204 lines • 51.8 kB
JavaScript
import { defineComponent as X, useModel as ae, computed as N, withDirectives as De, openBlock as s, createElementBlock as d, normalizeClass as B, createVNode as q, createCommentVNode as p, createElementVNode as D, Fragment as I, renderList as Y, vShow as rt, mergeModels as le, ref as k, useTemplateRef as Ie, useAttrs as ut, unref as K, withCtx as ne, renderSlot as M, toDisplayString as re, createBlock as W, resolveDynamicComponent as ct, onMounted as qe, normalizeStyle as te, mergeProps as Pe, watch as oe, onUnmounted as gt, withModifiers as vt, Transition as ft, createTextVNode as bt, useSlots as ht, createSlots as wt, normalizeProps as mt, nextTick as Le, vModelSelect as yt } from "vue";
import { _ as O, k as kt, v as pt, f as Pt, u as Dt, c as Ve, b as He, l as ze, e as Ue, i as Oe } from "./DsgTablePerPage.vue_vue_type_style_index_0_lang-BoJ6hpYL.js";
import { ucfirst as St, ucwords as Ae, toSnakeCase as Ct } from "./dsg-vue.helpers-string.esm.js";
import { data_get as pe } from "./dsg-vue.helpers-object.esm.js";
import { isEmpty as xt } from "./dsg-vue.helpers.esm.js";
const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disabled"], Mt = ["onClick", "innerHTML"], Et = ["onClick", "innerHTML"], Bt = ["disabled"], Ft = ["disabled"], We = /* @__PURE__ */ X({
__name: "DsgTablePagination",
props: /* @__PURE__ */ le({
onEachSide: { default: 3 },
firstPage: { default: 1 },
showFirstLast: { type: Boolean, default: !0 },
firstIcon: { default: "chevron-left-double" },
lastIcon: { default: "chevron-right-double" },
prevIcon: { default: "chevron-left" },
nextIcon: { default: "chevron-right" }
}, {
pagination: { default: null },
paginationModifiers: {}
}),
emits: /* @__PURE__ */ le(["dsg-table:change-page"], ["update:pagination"]),
setup(e, { expose: F, emit: f }) {
const c = ae(e, "pagination"), $ = N(() => c.value === null ? 0 : c.value?.last_page - e.firstPage + 1), L = N(() => c.value === null ? 0 : c.value?.last_page), v = N(() => c.value === null ? !1 : c.value?.current_page === e.firstPage), b = N(() => c.value === null ? !1 : c.value?.current_page === L.value), H = N(() => $.value < e.onEachSide * 2 + 4), R = N(() => e.onEachSide * 2 + 1), T = N(() => !c.value || c.value?.current_page <= e.onEachSide ? 1 : c.value?.current_page >= $.value - e.onEachSide ? $.value - e.onEachSide * 2 : c.value?.current_page - e.onEachSide), m = f, l = (P) => {
m("dsg-table:change-page", P);
}, g = (P) => P === c.value?.current_page;
return F({
loadPage: l
}), (P, y) => De((s(), d("div", $t, [
e.showFirstLast ? (s(), d("a", {
key: 0,
onClick: y[0] || (y[0] = (S) => l(e.firstPage)),
class: B([[v.value ? "disabled" : ""], "dsg-table--pagination-link"]),
disabled: v.value,
title: "First",
"aria-label": "First"
}, [
q(O, {
icon: e.firstIcon,
size: "sm"
}, null, 8, ["icon"])
], 10, Tt)) : p("", !0),
D("a", {
onClick: y[1] || (y[1] = (S) => l("prev")),
class: B([[v.value ? "disabled" : ""], "dsg-table--pagination-link"]),
disabled: v.value,
title: "Previous",
"aria-label": "Previous"
}, [
q(O, {
icon: e.prevIcon,
size: "sm"
}, null, 8, ["icon"])
], 10, Rt),
H.value ? (s(!0), d(I, { key: 1 }, Y($.value, (S, V) => (s(), d("a", {
key: V,
onClick: (se) => l(V + e.firstPage),
class: B([[g(V + e.firstPage) ? "active" : ""], "dsg-table--pagination-link"]),
innerHTML: S
}, null, 10, Mt))), 128)) : (s(!0), d(I, { key: 2 }, Y(R.value, (S, V) => (s(), d("a", {
key: V,
onClick: (se) => l(T.value + V + e.firstPage - 1),
class: B([[g(T.value + V + e.firstPage - 1) ? "active" : ""], "dsg-table--pagination-link"]),
innerHTML: T.value + S - 1
}, null, 10, Et))), 128)),
D("a", {
onClick: y[2] || (y[2] = (S) => l("next")),
class: B([[b.value ? "disabled" : ""], "dsg-table--pagination-link"]),
disabled: b.value,
title: "Next",
"aria-label": "Next"
}, [
q(O, {
icon: e.nextIcon,
size: "sm"
}, null, 8, ["icon"])
], 10, Bt),
e.showFirstLast ? (s(), d("a", {
key: 3,
onClick: y[3] || (y[3] = (S) => l(L.value)),
class: B([[b.value ? "disabled" : ""], "dsg-table--pagination-link"]),
disabled: b.value,
title: "Last",
"aria-label": "Last"
}, [
q(O, {
icon: e.lastIcon,
size: "sm"
}, null, 8, ["icon"])
], 10, Ft)) : p("", !0)
], 512)), [
[rt, c.value && L.value > e.firstPage]
]);
}
}), Lt = ["innerHTML"], Ne = /* @__PURE__ */ X({
__name: "DsgTablePaginationInfo",
props: /* @__PURE__ */ le({
infoTemplate: { default: "Displaying {from} to {to} of {total} items" },
noDataTemplate: { default: "No relevant data" }
}, {
pagination: { default: null },
paginationModifiers: {}
}),
emits: ["update:pagination"],
setup(e) {
const F = ae(e, "pagination"), f = N(() => F.value == null || F.value.total == 0 ? e.noDataTemplate : e.infoTemplate.replace("{from}", (F.value?.from || 0).toString()).replace("{to}", (F.value?.to || 0).toString()).replace("{total}", (F.value?.total || 0).toString()));
return (c, $) => (s(), d("div", {
class: "dsg-table--pagination-info",
innerHTML: f.value
}, null, 8, Lt));
}
}), Ht = {
class: "dsg-table--actions",
ref: "dsgTableActions"
}, Ut = { class: "dsg-table--action-trigger" }, At = {
key: 0,
class: "dsg-table--actions-menu-wrapper"
}, It = ["href", "target", "onClick"], qt = ["textContent"], Vt = { key: 0 }, zt = { key: 1 }, Ot = ["href", "target", "onClick"], Wt = { class: "flex-1" }, je = /* @__PURE__ */ X({
__name: "DsgTableActions",
props: {
placement: { default: "auto" }
},
emits: ["dsg-table:action-edit", "dsg-table:action-view", "dsg-table:action-delete", "dsg-table:action-archive", "dsg-table:link-clicked"],
setup(e, { emit: F }) {
const f = k(!1);
Ie("dsgTableActions");
const c = ut(), $ = k(c.data.rowData?.actions ?? null), L = k(c.data.rowData?.links ?? null), v = k(c.data.rowData ?? null), b = (m) => {
switch (m) {
case "edit":
return "edit-05";
case "view":
return "eye";
case "delete":
return "trash-01";
case "archive":
return "eye-off";
default:
return "dots-horizontal";
}
}, H = (m, l, g) => {
switch (l) {
case "edit":
T("dsg-table:action-edit", g, v.value);
break;
case "view":
T("dsg-table:action-view", g, v.value);
break;
case "delete":
T("dsg-table:action-delete", g, v.value);
break;
case "archive":
T("dsg-table:action-archive", g, v.value);
break;
}
}, R = (m, l) => {
const g = m.actionId || m.label.trim().toLowerCase().replace(/[^a-z0-9-]/g, "-").replace(/-+/g, "-");
T("dsg-table:link-clicked", l, g, v.value);
}, T = F;
return (m, l) => De((s(), d("div", Ht, [
q(K(kt), {
triggers: [],
placement: e.placement,
"handle-resize": !0,
strategy: "absolute",
shown: f.value,
class: "dsg-table--actions__popper",
onHide: l[1] || (l[1] = (g) => f.value = !1),
ref: "floatingVueFilterDropdown"
}, {
popper: ne(() => [
f.value ? (s(), d("div", At, [
(s(!0), d(I, null, Y($.value, (g, P) => (s(), d(I, null, [
["edit", "view", "delete", "archive"].includes(String(P)) ? (s(), d("a", {
key: P,
href: g?.link,
target: g?.target || "_self",
onClick: (y) => H(g, String(P), y)
}, [
D("div", {
class: B(["dsg-table--actions-menu-item", String(P)])
}, [
q(O, {
icon: b(String(P)),
size: "sm"
}, null, 8, ["icon"]),
D("span", {
class: "flex-1",
textContent: re(K(St)(String(P)))
}, null, 8, qt)
], 2)
], 8, It)) : p("", !0)
], 64))), 256)),
$.value && L.value ? (s(), d("hr", Vt)) : p("", !0),
L.value ? (s(!0), d(I, { key: 1 }, Y(L.value, (g) => (s(), d(I, {
key: g.label
}, [
g.hasOwnProperty("component") ? (s(), W(ct(g.component), {
key: 0,
quote: K(c).data.data.rowData,
"row-data": K(c).data.data.rowData
}, null, 8, ["quote", "row-data"])) : g.hasOwnProperty("type") && g.type == "break" ? (s(), d("hr", zt)) : (s(), d("a", {
key: 2,
href: g.link,
target: g.target || "_self",
class: B(["dsg-table--actions-menu-item", g.class]),
onClick: (P) => R(g, P)
}, [
g.icon ? (s(), W(O, {
key: 0,
icon: g.icon,
size: "sm"
}, null, 8, ["icon"])) : p("", !0),
D("span", Wt, re(g.label), 1)
], 10, Ot))
], 64))), 128)) : p("", !0)
])) : p("", !0)
]),
default: ne(() => [
D("div", Ut, [
D("button", {
type: "button",
class: "dsg-table--actions-button",
"aria-expanded": "false",
"aria-haspopup": "true",
onClick: l[0] || (l[0] = (g) => f.value = !f.value)
}, [
M(m.$slots, "dsg-table-action-button-content", {}, () => [
q(O, {
icon: "dots-vertical",
size: "sm"
})
])
])
])
]),
_: 3
}, 8, ["placement", "shown"])
])), [
[K(pt), () => f.value = !1]
]);
}
}), Nt = { class: "dsg-table--search" }, Ke = /* @__PURE__ */ X({
__name: "DsgTableSearch",
props: {
name: {},
id: {},
placeholder: { default: "Search" },
disabled: { type: Boolean, default: !1 },
required: { type: Boolean, default: !1 },
readonly: { type: Boolean, default: !1 },
hidden: { type: Boolean, default: !1 },
extraClasses: {},
eventName: {},
replaceState: { type: Boolean, default: !0 }
},
emits: ["dsg-table:term-changed"],
setup(e, { emit: F }) {
const f = k("");
qe(() => {
const v = new URL(window.location.href).searchParams.get("term");
v && (f.value = v, c("dsg-table:term-changed", v));
});
const c = F, $ = Dt((L) => {
if (f.value = L, e.replaceState) {
const v = new URL(window.location.href);
f.value ? v.searchParams.set("term", f.value) : v.searchParams.delete("term"), window.history.pushState({}, "", v.toString());
}
c("dsg-table:term-changed", f.value);
}, 300);
return (L, v) => (s(), d("div", Nt, [
q(Pt, {
modelValue: f.value,
"onUpdate:modelValue": v[0] || (v[0] = (b) => f.value = b),
name: e.name,
id: e.id || e.name,
placeholder: e.placeholder,
disabled: e.disabled,
required: e.required,
readonly: e.readonly,
hidden: e.hidden,
"has-clear-button": !0,
autocomplete: "off",
size: "sm",
icon: "search-sm",
"icon-clickable": !0,
onIconClicked: v[1] || (v[1] = (b) => K($)(b)),
onEnterPressed: v[2] || (v[2] = (b) => K($)(b)),
onOnClear: v[3] || (v[3] = () => K($)(""))
}, null, 8, ["modelValue", "name", "id", "placeholder", "disabled", "required", "readonly", "hidden"])
]));
}
}), jt = { class: "dsg-table--header-row" }, Kt = {
key: 0,
class: "dsg-table--th dsg-table--th-checkbox",
scope: "col"
}, Qt = {
key: 1,
class: "dsg-table--th dsg-table--th-expand-detail",
scope: "col"
}, Yt = ["title", "id", "onClick"], Gt = {
key: 0,
class: "dsg-table--th-sort-icon"
}, Jt = ["innerHTML"], Xt = ["innerHTML"], Zt = ["innerHTML"], _t = ["innerHTML"], Qe = /* @__PURE__ */ X({
__name: "DsgTableRowHeader",
props: /* @__PURE__ */ le({
fields: {},
scrollVisible: { type: Boolean },
hasSelectAll: { type: Boolean, default: !1 },
showExpandDetail: { type: Boolean, default: !0 },
tableDataLength: { default: 0 }
}, {
sortField: { default: null },
sortFieldModifiers: {},
selectedRows: { default: [] },
selectedRowsModifiers: {},
hasSelected: { type: Boolean, default: !1 },
hasSelectedModifiers: {}
}),
emits: /* @__PURE__ */ le(["dsg-table:sort-field", "dsg-table:on-select-all", "dsg-table:on-deselect-all"], ["update:sortField", "update:selectedRows", "update:hasSelected"]),
setup(e, { emit: F }) {
const f = ae(e, "sortField"), c = ae(e, "selectedRows"), $ = ae(e, "hasSelected"), L = k("17px"), v = (T) => {
$.value && c.value.length > 0 && c.value.length !== e.tableDataLength ? ($.value = !0, b("dsg-table:on-select-all")) : !$.value && c.value.length === 0 ? ($.value = !1, b("dsg-table:on-select-all")) : b("dsg-table:on-deselect-all");
}, b = F, H = (T, m) => [
T,
T + "-" + Ct(String(m?.name)),
m.titleClass || "",
{ sortable: m.sortable },
{ "sort-active": f.value?.name === m.name }
], R = (T) => {
T.sortable && (f.value = {
name: String(T?.name),
field: String(T?.sortField),
direction: f.value?.name === T.name && f.value?.direction === "asc" ? "desc" : "asc"
}, b("dsg-table:sort-field", T));
};
return (T, m) => (s(), d("tr", jt, [
e.hasSelectAll ? (s(), d("th", Kt, [
q(Ve, {
modelValue: $.value,
"onUpdate:modelValue": [
m[0] || (m[0] = (l) => $.value = l),
v
],
indeterminate: c.value.length > 0 && c.value.length !== e.tableDataLength
}, null, 8, ["modelValue", "indeterminate"])
])) : p("", !0),
e.showExpandDetail ? (s(), d("th", Qt)) : p("", !0),
(s(!0), d(I, null, Y(e.fields, (l, g) => (s(), d(I, null, [
l?.visible ? (s(), d("th", {
key: g,
class: B(H("dsg-table--th", l)),
style: te([{ width: l.width || void 0 }, l.style]),
title: l.title + (l.sortable ? " Sort" : ""),
id: "_" + l.name,
onClick: (P) => R(l),
scope: "col"
}, [
l.sortable ? (s(), d("div", Gt, [
l.tooltip ? (s(), W(He, Pe({
key: 0,
ref_for: !0
}, l.tooltip, { class: "dsg-table--th-tooltip" }), {
"dsg-tooltip--trigger": ne(() => [
l.title ? (s(), d("span", {
key: 0,
class: "dsg-table--th-title",
innerHTML: l.title
}, null, 8, Jt)) : p("", !0),
l.tooltip.icon ? (s(), W(O, {
key: 1,
icon: l.tooltip.icon,
class: "inline-flex",
size: "xs"
}, null, 8, ["icon"])) : p("", !0)
]),
_: 2
}, 1040)) : l.title ? (s(), d("span", {
key: 1,
class: "dsg-table--th-title",
innerHTML: l.title
}, null, 8, Xt)) : p("", !0),
l.sortable && f.value?.name !== l.name ? (s(), W(O, {
key: 2,
icon: "chevron-selector-vertical",
class: "inline-flex",
size: "xs"
})) : p("", !0),
l.sortable && f.value?.name === l.name && f.value?.direction === "asc" ? (s(), W(O, {
key: 3,
icon: "chevron-down",
class: "inline-flex",
size: "xs"
})) : p("", !0),
l.sortable && f.value?.name === l.name && f.value?.direction === "desc" ? (s(), W(O, {
key: 4,
icon: "chevron-up",
class: "inline-flex",
size: "xs"
})) : p("", !0)
])) : (s(), d(I, { key: 1 }, [
l.tooltip ? (s(), W(He, Pe({
key: 0,
ref_for: !0
}, l.tooltip, { class: "dsg-table--th-tooltip" }), {
"dsg-tooltip--trigger": ne(() => [
D("span", {
class: "dsg-table--th-title",
innerHTML: K(Ae)(String(l?.title))
}, null, 8, Zt),
l.tooltip.icon ? (s(), W(O, {
key: 0,
icon: l.tooltip.icon,
class: "inline-flex",
size: "xs"
}, null, 8, ["icon"])) : p("", !0)
]),
_: 2
}, 1040)) : (s(), d("span", {
key: 1,
class: "dsg-table--th-title",
innerHTML: K(Ae)(String(l?.title))
}, null, 8, _t))
], 64))
], 14, Yt)) : p("", !0)
], 64))), 256)),
e.scrollVisible ? (s(), d("th", {
key: 2,
style: te({ width: L.value }),
class: "dsg-table--th-col-gutter"
}, null, 4)) : p("", !0)
]));
}
}), ea = ["span"], ta = {
key: 0,
class: "dsg-table--loading"
}, aa = ["colspan"], la = ["colspan"], na = ["onClick", "onDblclick", "onMouseover", "onMouseenter"], sa = ["onClickCapture"], oa = {
key: 1,
class: "dsg-table--tbody-cell dsg-table--tbody-cell-expand"
}, ia = ["aria-expanded", "onClick"], da = ["onClick", "onDblclick", "onContextmenu"], ra = ["innerHTML"], ua = ["onClick"], ca = ["colspan"], ga = { key: 2 }, va = ["colspan"], fa = { class: "dsg-table--footer" }, ba = /* @__PURE__ */ X({
__name: "DsgTableComponent",
props: /* @__PURE__ */ le({
fields: { default: () => [] },
isDraggable: { type: Boolean, default: !1 },
dragApi: { default: "" },
loadOnStart: { type: Boolean, default: !0 },
apiUrl: { default: "" },
httpMethod: { default: "get" },
reactiveApiUrl: { type: Boolean, default: !0 },
apiMode: { type: Boolean, default: !0 },
data: { default: null },
dataManager: { type: [Function, null], default: null },
dataPath: { default: "data" },
tableLayout: { default: "fixed" },
paginationPath: { default: "links.pagination" },
queryParams: { default: () => ({
sort: "sort",
order: "order",
page: "page",
perPage: "per_page"
}) },
httpOptions: { default: () => ({}) },
hasDetailRow: { type: Boolean, default: !1 },
showExpandDetail: { type: Boolean, default: !0 },
expandableRows: { type: Boolean, default: !1 },
expandMultiple: { type: Boolean, default: !1 },
initialPage: { default: 1 },
firstPage: { default: 1 },
sortOrder: { default: () => [] },
multiSort: { type: Boolean },
tableHeight: { default: null },
multiSortKey: {},
rowClass: { type: [String, Function], default: "" },
detailRowComponent: {},
detailRowTransition: { default: "fade" },
detailRowClass: { type: [String, Function] },
detailRowOptions: { default: () => ({}) },
trackBy: { default: "id" },
css: { default: () => ({
tableWrapper: "dsg-table-wrapper",
thead: "dsg-table-thead",
tbody: "dsg-table-tbody",
table: "dsg-table-component"
}) },
minRows: { default: 0 },
noDataTemplate: { default: "No Data Available" },
showSortIcons: { type: Boolean },
headerRows: {},
transform: { type: [Function, null], default: null },
sortParams: { type: [Function, null], default: null },
fieldPrefix: {},
eventPrefix: {},
selectable: { type: Boolean, default: !1 },
shiftSelectHighlight: { default: () => {
} },
selectedRowHighlight: { default: () => {
} },
replaceState: { type: Boolean, default: !0 },
replaceStrategy: { default: "window" }
}, {
filterParams: { default: {} },
filterParamsModifiers: {},
perPage: { default: 20 },
perPageModifiers: {}
}),
emits: /* @__PURE__ */ le(["dsg-table:loading", "dsg-table:loaded", "dsg-table:load-success", "dsg-table:load-error", "dsg-table:pagination-data", "dsg-table:rows-selected", "dsg-table:row-clicked", "dsg-table:row-hover", "dsg-table:row-dblclick", "dsg-table:row-expanded", "dsg-table:row-collapsed"], ["update:filterParams", "update:perPage"]),
setup(e, { expose: F, emit: f }) {
const c = (t) => t.map((a, n) => ({
field: a.field || "",
title: a.title || "",
name: a.name || "",
titleClass: a.titleClass || "",
dataClass: a.dataClass || "",
visible: a.visible ?? !0,
width: a.width || void 0,
sortField: a.sortField || null,
sortable: a.sortField,
formatter: a.formatter || null,
tooltip: a.tooltip ?? null,
$_index: n
})), $ = () => {
if (!e.apiMode) return null;
const a = ze().find((n) => n.key === e.queryParams.sort);
if (a && a.value.length > 0) {
const n = a.value[0], h = n.startsWith("-"), u = h ? n.substring(1) : n, x = e.fields.find(
(j) => j.sortField === u || j.name === u || j.field === u
);
return x ? {
name: String(x.name || x.field),
field: u,
direction: h ? "desc" : "asc"
} : {
name: u,
field: u,
direction: h ? "desc" : "asc"
};
}
return null;
}, L = () => {
if (!(!e.apiMode || !e.replaceState) && e.replaceStrategy === "window") {
const t = new URL(window.location.href), a = new URLSearchParams(t.search);
if (a.delete(e.queryParams.sort), y.value) {
const h = (y.value.direction === "desc" ? "-" : "") + y.value.field;
a.set(e.queryParams.sort, h);
}
const n = `${t.pathname}${a.toString() ? "?" + a.toString() : ""}`;
window.history.pushState({}, "", n);
}
}, v = k(c(e.fields)), b = k(e.data), H = k(null), R = k(e.initialPage), T = k("17px"), m = k(!1), l = k({}), g = k(0), P = k(!0), y = k($()), S = k(null), V = k(0), se = ae(e, "filterParams"), ue = ae(e, "perPage"), E = k([]), ie = k(!1), z = k(/* @__PURE__ */ new Set()), A = k(null), Q = k(null), G = k(!1), Z = N(() => e.tableHeight != null), _ = N(() => {
let t = v.value.filter((a) => a.visible).length;
return e.selectable && t++, e.hasDetailRow && e.expandableRows && t++, t;
}), fe = N(() => {
const t = {};
return e.shiftSelectHighlight && (t["--dsg-shift-select-bg"] = e.shiftSelectHighlight), e.selectedRowHighlight && (t["--dsg-selected-row-bg"] = e.selectedRowHighlight), Object.keys(t).length > 0 ? t : void 0;
});
oe(
() => E.value.length,
(t) => {
ie.value = e.selectable && t > 0;
},
{ immediate: !0 }
), oe(
() => e.fields,
(t) => {
v.value = c(t);
},
{ immediate: !0, deep: !0 }
), oe(
() => se.value,
(t) => {
ee();
},
{ deep: !0 }
), oe(
() => ue.value,
() => {
ee();
}
), oe(
() => e.apiUrl,
(t, a) => {
e.apiMode && t !== a && t && ee();
}
), oe(
() => y.value,
() => {
L();
},
{ deep: !0 }
);
const U = f, be = (t, a) => t.formatter && typeof t.formatter == "function" ? t.formatter(t, a) : pe(a, String(t?.name), ""), he = (t) => "dsg-field--" + t.name?.toLowerCase().replaceAll(/[_ ]/g, "-"), we = (t, a) => {
const n = {
odd: a % 2 === 0,
even: a % 2 !== 0,
"row-selected": t.selected
};
if (!e.rowClass)
return n;
let h = {};
if (typeof e.rowClass == "function") {
const u = e.rowClass(t, a);
typeof u == "string" ? u.split(" ").forEach((x) => {
x.trim() && (h[x.trim()] = !0);
}) : Array.isArray(u) ? u.forEach((x) => {
typeof x == "string" && x.trim() && (h[x.trim()] = !0);
}) : typeof u == "object" && u !== null && (h = u);
} else typeof e.rowClass == "string" && e.rowClass.split(" ").forEach((u) => {
u.trim() && (h[u.trim()] = !0);
});
return { ...n, ...h };
}, J = (t) => z.value.has(t[e.trackBy]), ce = (t, a) => {
const n = t[e.trackBy];
z.value.has(n) ? (z.value.delete(n), U("dsg-table:row-collapsed", t, a)) : (e.expandMultiple || z.value.clear(), z.value.add(n), U("dsg-table:row-expanded", t, a));
}, me = (t) => {
const a = t[e.trackBy];
z.value.has(a) || (e.expandMultiple || z.value.clear(), z.value.add(a));
}, ge = (t) => {
z.value.delete(t[e.trackBy]);
}, ye = () => {
b.value?.forEach((t) => {
z.value.add(t[e.trackBy]);
});
}, o = () => {
z.value.clear();
}, i = () => z.value, r = (t, a) => {
if (e.selectable) {
if (a !== void 0 && (A.value = a), t.selected)
E.value.push(t);
else {
const n = E.value.findIndex((h) => h[e.trackBy] === t[e.trackBy]);
n !== -1 && E.value.splice(n, 1);
}
U("dsg-table:rows-selected", E.value);
}
}, w = (t, a, n) => {
if (e.selectable && t.shiftKey && A.value !== null) {
t.stopPropagation(), t.preventDefault();
const h = Math.min(A.value, n), u = Math.max(A.value, n), x = !a.selected;
for (let j = h; j <= u; j++) {
if (j === A.value) continue;
const de = b.value?.[j];
if (de) {
const Be = de.selected;
if (de.selected = x, x && !Be)
E.value.push(de);
else if (!x && Be) {
const Fe = E.value.findIndex((dt) => dt[e.trackBy] === de[e.trackBy]);
Fe !== -1 && E.value.splice(Fe, 1);
}
}
}
A.value = n, Q.value = null, U("dsg-table:rows-selected", E.value);
}
}, C = () => {
e.selectable && (b.value?.forEach((t) => {
t.selected = !0;
}), E.value = b.value?.filter((t) => t.selected) ?? [], A.value = null, U("dsg-table:rows-selected", E.value));
}, ke = () => {
e.selectable && (b.value?.forEach((t) => {
t.selected = !1;
}), E.value = [], A.value = null, U("dsg-table:rows-selected", E.value));
}, ve = (t) => {
b.value = Array.isArray(t) ? t : [], e.selectable && (A.value = null, b.value.forEach((a) => {
a.selected = a.selected ?? !1;
}));
}, Ye = () => b.value ?? [], Ge = (t) => {
t === "prev" ? R.value > e.firstPage && R.value-- : t === "next" ? R.value < (H.value?.last_page ?? 0) && R.value++ : t != R.value && t >= e.firstPage && t <= (H.value?.last_page ?? 0) && (R.value = t), ee();
}, Je = () => ({
[e.queryParams?.sort]: y.value ? (y.value?.direction === "desc" ? "-" : "") + y.value?.field : void 0,
[e.queryParams?.order]: y.value?.direction,
[e.queryParams?.page]: R.value,
[e.queryParams?.perPage]: ue.value
}), Se = () => {
S.value && (S.value.abort(), S.value = null);
}, Xe = (t, a) => {
Se(), V.value++;
const n = V.value, h = new AbortController();
return a.signal = h.signal, S.value = h, (e.httpMethod.toLowerCase() === "get" ? Ue.get(t, a) : (() => {
const x = a.params;
return delete a.params, Ue.post(t, x, a);
})()).then(
(x) => ({ ...x, _requestId: n, _apiUrl: t }),
(x) => {
throw x.name === "AbortError" || x.code === "ERR_CANCELED" ? { ...x, _requestId: n, _cancelled: !0 } : { ...x, _requestId: n };
}
);
}, Ce = (t) => {
if (t._requestId && t._requestId !== V.value || t._apiUrl && t._apiUrl !== e.apiUrl)
return;
U("dsg-table:load-success", t);
const a = e.transform ? e.transform(t.data) : t.data;
b.value = pe(a, e.dataPath, null), e.selectable && (A.value = null, b.value?.forEach((n) => {
n.selected = n.selected ?? !1;
})), H.value = pe(a, e.paginationPath, null) ?? null, g.value = b.value?.length ? b.value[0].order : g, !xt(e.paginationPath) && H.value === null && console.warn(
'DsgTable: pagination-path "' + e.paginationPath + `" not found. It looks like the data returned from the server does not have pagination information or you may have set it incorrectly.
You can explicitly suppress this warning by setting pagination-path="".`
), S.value = null, U("dsg-table:pagination-data", H.value), H.value && R.value > (H.value?.last_page || 0) && b.value?.length === 0 && (R.value = e.initialPage, ee()), U("dsg-table:loaded"), P.value = !1;
}, xe = (t) => {
t._requestId && t._requestId !== V.value || t._apiUrl && t._apiUrl !== e.apiUrl || t._cancelled || (console.error("load-error", t), S.value = null, U("dsg-table:load-error", t), U("dsg-table:loaded"), P.value = !1);
}, $e = () => {
if (e.data !== null && Array.isArray(e.data)) {
ve(e.data), P.value = !1;
return;
}
if (e.dataManager && typeof e.dataManager == "function") {
const t = e.dataManager();
ve(t), P.value = !1;
} else
ve(e.data), P.value = !1;
}, ee = (t = Ce, a = xe, n = {}) => {
const h = t || Ce, u = a || xe;
if (!e.apiMode) {
$e();
return;
}
return P.value = !0, U("dsg-table:loading", P.value), e.httpOptions.params = {
...Je(),
...se.value
}, Xe(e.apiUrl, e.httpOptions).then(h).catch((x) => u(x));
}, Ze = (t, a, n) => {
U("dsg-table:row-clicked", t, a, n);
}, _e = (t, a, n) => {
U("dsg-table:row-dblclick", t, a, n);
}, et = (t, a, n) => {
}, tt = (t, a, n, h) => {
}, at = (t, a, n, h) => {
}, lt = (t, a, n, h) => {
}, nt = (t, a, n) => {
}, Te = (t) => {
t.key === "Shift" && (G.value = !0);
}, Re = (t) => {
t.key === "Shift" && (G.value = !1, Q.value = null);
}, Me = () => {
G.value = !1, Q.value = null;
}, st = (t) => {
e.selectable && G.value && A.value !== null && (Q.value = t);
}, ot = () => {
Q.value = null;
}, it = (t) => {
if (!e.selectable || !G.value || A.value === null || Q.value === null)
return !1;
const a = Math.min(A.value, Q.value), n = Math.max(A.value, Q.value);
return t >= a && t <= n;
};
qe(() => {
e.apiMode === !0 ? ee() : $e(), e.selectable && (document.addEventListener("keydown", Te), document.addEventListener("keyup", Re), window.addEventListener("blur", Me));
}), gt(() => {
e.selectable && (document.removeEventListener("keydown", Te), document.removeEventListener("keyup", Re), window.removeEventListener("blur", Me));
});
const Ee = () => {
e.apiMode && (E.value = [], Se(), ee());
};
return F({
changePage: Ge,
reload: Ee,
getData: Ye,
setData: ve,
setLoading: (t) => {
P.value = t, U("dsg-table:loading", P.value);
},
expandRow: me,
collapseRow: ge,
toggleRowExpand: ce,
expandAllRows: ye,
collapseAllRows: o,
getExpandedRows: i,
isRowExpanded: J
}), (t, a) => (s(), d("div", {
class: B(["dsg-table--wrapper", { "dsg-table--shift-active": e.selectable && G.value }]),
style: te(fe.value)
}, [
D("div", {
ref: "dsgTableBodyWrapper",
class: B(["dsg-table-body-wrapper", { "fixed-header": Z.value }]),
style: te({ height: e.tableHeight || void 0 })
}, [
D("table", {
class: B(["dsg-table-main", Z.value ? "fixed-header" : "", l.value.table, "table-" + e.tableLayout])
}, [
D("colgroup", { span: _.value }, [
(s(!0), d(I, null, Y(v.value, (n, h) => (s(), d(I, null, [
n?.visible ? (s(), d("col", {
key: h,
style: te({ width: n.width || void 0 }),
class: B("dsg-table--col-" + n.name + " " + n.titleClass)
}, null, 6)) : p("", !0)
], 64))), 256)),
!Z.value && m.value ? (s(), d("col", {
key: 0,
style: te({ width: T.value }),
class: "dsg-table--col-gutter"
}, null, 4)) : p("", !0)
], 8, ea),
D("thead", {
class: B([[l.value.thead, { sticky: Z.value, "top-0": Z.value }], "dsg-table--head"])
}, [
M(t.$slots, "tableHeader", { fields: v.value }, () => [
q(Qe, {
fields: v.value,
"has-select-all": e.selectable,
"selected-rows": E.value,
"onUpdate:selectedRows": a[0] || (a[0] = (n) => E.value = n),
"has-selected": ie.value,
"onUpdate:hasSelected": a[1] || (a[1] = (n) => ie.value = n),
"scroll-visible": m.value,
"show-expand-detail": e.hasDetailRow && e.showExpandDetail,
"table-data-length": b.value?.length,
"sort-field": y.value,
"onUpdate:sortField": a[2] || (a[2] = (n) => y.value = n),
"onDsgTable:sortField": a[3] || (a[3] = (n) => Ee()),
"onDsgTable:onSelectAll": C,
"onDsgTable:onDeselectAll": ke
}, null, 8, ["fields", "has-select-all", "selected-rows", "has-selected", "scroll-visible", "show-expand-detail", "table-data-length", "sort-field"])
])
], 2),
D("tbody", {
class: B(["dsg-table--body", l.value.tbody])
}, [
P.value ? (s(), d("tr", ta, [
D("td", { colspan: _.value }, [
D("div", {
"aria-label": "Loading...",
role: "status",
class: "flex items-center space-x-3 h-12 w-full justify-center",
colspan: _.value
}, [
M(t.$slots, "dsg-table-loading", {}, () => [
q(O, {
icon: "loading-02",
class: "animate-spin"
}),
a[5] || (a[5] = D("span", { class: "text-xs font-medium text-gray-500" }, "Loading...", -1))
])
], 8, la)
], 8, aa)
])) : (s(!0), d(I, { key: 1 }, Y(b.value, (n, h) => (s(), d(I, { key: h }, [
D("tr", {
class: B(["dsg-table--tbody-row", [we(n, h), { "dsg-table--shift-range": e.selectable && it(h) }]]),
onClick: (u) => Ze(u, h, n),
onDblclick: (u) => _e(u, h, n),
onMouseover: (u) => et(),
onMouseenter: (u) => st(h),
onMouseleave: a[4] || (a[4] = (u) => ot())
}, [
e.selectable ? (s(), d("td", {
key: 0,
class: "dsg-table--tbody-cell dsg-table--tbody-cell-checkbox",
onClickCapture: (u) => w(u, n, h)
}, [
q(Ve, {
modelValue: n.selected,
"onUpdate:modelValue": [(u) => n.selected = u, (u) => r(n, h)]
}, null, 8, ["modelValue", "onUpdate:modelValue"])
], 40, sa)) : p("", !0),
e.hasDetailRow && e.expandableRows ? (s(), d("td", oa, [
D("button", {
type: "button",
class: B(["dsg-table--expand-toggle", { "is-expanded": J(n) }]),
"aria-expanded": J(n),
"aria-label": "Toggle row details",
onClick: vt((u) => ce(n, h), ["stop"])
}, [
q(O, {
icon: "chevron-right",
size: "sm",
class: "dsg-table--expand-icon"
})
], 10, ia)
])) : p("", !0),
(s(!0), d(I, null, Y(v.value, (u, x) => (s(), d(I, { key: x }, [
u.visible ? (s(), d("td", {
key: 0,
class: B(["dsg-table--tbody-cell", u.dataClass]),
style: te({ width: u.width || void 0 }),
onClick: (j) => tt(),
onDblclick: (j) => at(),
onContextmenu: (j) => lt()
}, [
M(t.$slots, he(u), {
rowData: n,
rowIndex: h,
rowField: u
}, () => [
D("span", {
innerHTML: be(u, n)
}, null, 8, ra)
])
], 46, da)) : p("", !0)
], 64))), 128))
], 42, na),
e.hasDetailRow && (!e.expandableRows || J(n)) ? (s(), W(ft, {
key: 0,
name: e.detailRowTransition
}, {
default: ne(() => [
D("tr", {
class: B(["dsg-table--tbody-detail-row", { "is-expanded": e.expandableRows && J(n) }]),
onClick: (u) => nt()
}, [
D("td", { colspan: _.value }, [
M(t.$slots, "dsg-table-detail-row", {
rowData: n,
rowIndex: h,
options: e.detailRowOptions,
isExpanded: e.expandableRows ? J(n) : !0
})
], 8, ca)
], 10, ua)
]),
_: 2
}, 1032, ["name"])) : p("", !0)
], 64))), 128)),
!P.value && !b.value?.length && e.noDataTemplate.length ? (s(), d("tr", ga, [
D("td", {
colspan: _.value,
class: "dsg-table--empty-result"
}, [
M(t.$slots, "dsg-table-empty-result", {}, () => [
bt(re(e.noDataTemplate), 1)
])
], 8, va)
])) : p("", !0)
], 2),
D("tfoot", fa, [
M(t.$slots, "dsg-table-footer", {
fields: v.value,
data: b.value
})
])
], 2)
], 6)
], 6));
}
}), ha = { class: "dsg-table" }, wa = {
key: 0,
class: "dsg-table--pre-header"
}, ma = { class: "dsg-table--pre-header-left" }, ya = ["textContent"], ka = { class: "dsg-table--pre-header-right" }, pa = {
key: 1,
class: "dsg-table--search-header",
ref: "dsgTableSearchHeaderEl"
}, Pa = { class: "dsg-table--search-top" }, Da = {
key: 2,
class: "dsg-table--footer",
ref: "dsgTableFooterEl"
}, Sa = { class: "dsg-table--footer-left" }, Ca = { class: "dsg-table--footer-center" }, xa = { class: "dsg-table--footer-right" }, $a = /* @__PURE__ */ X({
__name: "DsgTable",
props: {
getUrl: {},
fields: {},
loadOnStart: { type: Boolean, default: !0 },
displaySearch: { type: Boolean, default: !0 },
displayPaginationInfo: { type: Boolean, default: !0 },
reloadOnChangeTimer: { type: Boolean, default: !1 },
selectable: { type: Boolean, default: !1 },
shiftSelectHighlight: { default: () => {
} },
selectedRowHighlight: { default: () => {
} },
trackBy: { default: "id" },
title: { default: "" },
filters: { default: () => {
} },
initialFilters: { default: () => ({}) },
filterEntity: { default: "" },
filterEndpoint: { default: "" },
filterSearchEndpoint: { default: "" },
tableLayout: { default: "fixed" },
autoSortFilters: { type: Boolean, default: !0 },
data: { default: null },
hasHeader: { type: Boolean, default: !0 },
hasFooter: { type: Boolean, default: !0 },
perPage: { default: 20 },
paginationPath: { default: "meta" },
css: { default: () => ({ tableWrapper: "border-b" }) },
rowClass: { type: [String, Function], default: void 0 },
apiMode: { type: Boolean, default: !0 },
replaceState: { type: Boolean, default: !0 },
replaceStrategy: { default: "window" },
hasDetailRow: { type: Boolean, default: !1 },
expandableRows: { type: Boolean, default: !1 },
expandMultiple: { type: Boolean, default: !1 },
showExpandDetail: { type: Boolean, default: !0 },
detailRowTransition: { default: "fade" },
detailRowOptions: { default: () => ({}) }
},
emits: ["dsg-table:action-edit", "dsg-table:action-view", "dsg-table:action-delete", "dsg-table:action-archive", "dsg-table:link-clicked", "dsg-table:rows-selected", "dsg-table:row-clicked", "dsg-table:row-hover", "dsg-table:row-dblclick", "dsg-table:filter-updated", "dsg-table:term-changed", "dsg-table:data-loaded", "dsg-table:row-expanded", "dsg-table:row-collapsed"],
setup(e, { expose: F, emit: f }) {
const c = (o) => {
P.value = o;
}, $ = k(e.apiMode && !!(e.filterEntity || e.filterEndpoint || e.getUrl)), L = () => {
if ($.value) {
let o = {};
return ze().forEach((i) => {
if (i.key.startsWith("filter[")) {
const r = i.key.replace("filter[", "").replace("]", ""), w = i.value;
o[`filter[${r}]`] = w.join(",");
}
}), o;
} else
return {};
}, v = N(() => ({
...e.css,
tableWrapper: "border-b " + (e.css?.tableWrapper || "")
})), b = ht(), H = k(!0), R = k(null), T = k("<p>Showing {from} to {to} of {total}</p>"), m = k(null), l = Ie("dsgTable"), g = k({ perPage: e.perPage, change: c }), P = k(e.perPage), y = k({ ...L(), ...e.initialFilters }), S = f, V = (o) => {
l.value?.changePage(o);
}, se = (o) => {
m.value = o;
}, ue = ({ data: o }) => {
R.value = o, S("dsg-table:data-loaded", o);
}, E = () => {
l.value?.reload();
}, ie = (o) => {
l.value?.setLoading(o);
}, z = (o) => {
const i = l.value?.getData?.() ?? [];
l.value?.setData(i.map((r) => r.id === o.id ? o : r));
}, A = (o) => {
const i = l.value?.getData?.() ?? [];
l.value?.setData([...i, o]);
}, Q = (o) => {
const i = l.value?.getData?.() ?? [];
l.value?.setData(i.filter((r) => r.id !== o.id));
}, G = (o) => {
l.value?.setData(o);
}, Z = () => l.value?.getData() ?? [], _ = (o) => {
const i = l.value?.getData() ?? [], r = o(i);
r && l.value?.setData(r);
}, fe = (o) => {
l.value?.expandRow(o);
}, U = (o) => {
l.value?.collapseRow(o);
}, be = (o, i) => {
l.value?.toggleRowExpand(o, i);
}, he = () => {
l.value?.expandAllRows();
}, we = () => {
l.value?.collapseAllRows();
}, J = () => l.value?.getExpandedRows() ?? /* @__PURE__ */ new Set(), ce = (o) => {
y.value = o;
}, me = () => y.value ?? {}, ge = (o) => {
const i = { ...y.value };
!o || o.trim() === "" ? delete i["filter[term]"] : i["filter[term]"] = o, y.value = i, Le(() => {
E();
}), S("dsg-table:term-changed", o);
}, ye = (o, i, r) => {
let w = {};
y.value["filter[term]"] && (w["filter[term]"] = y.value["filter[term]"]), Object.keys(o).forEach((C) => {
o[C] !== null && o[C] !== void 0 && o[C] !== "" && (w[C] = o[C]);
}), y.value = w, Le(() => {
E();
}), S("dsg-table:filter-updated", y.value, i, r);
};
return F({
reloadTable: E,
updateRowTable: z,
addRowTable: A,
deleteRowTable: Q,
setData: G,
getData: Z,
mutateData: _,
termChanged: ge,
setFilters: ce,
getFilters: me,
setLoading: ie,
expandRow: fe,
collapseRow: U,
toggleRowExpand: be,
expandAllRows: he,
collapseAllRows: we,
getExpandedRows: J,
changePage: V
}), (o, i) => (s(), d("div", ha, [
e.hasHeader ? (s(), d("div", wa, [
M(o.$slots, "dsg-table--pre-header", {}, () => [
D("div", ma, [
M(o.$slots, "dsg-table--page-title", {
data: R.value,
title: e.title
}, () => [
e.title.length > 0 ? (s(), d("h1", {
key: 0,
class: "dsg-table--title",
textContent: re(e.title)
}, null, 8, ya)) : p("", !0)
])
]),
D("div", ka, [
M(o.$slots, "dsg-table--page-actions", { data: R.value })
])
])
])) : p("", !0),
e.displaySearch ? (s(), d("div", pa, [
D("div", Pa, [
M(o.$slots, "dsg-table--search-header", { data: R.value }, () => [
q(Ke, {
name: "term",
"onDsgTable:termChanged": i[0] || (i[0] = (r) => ge(r))
}),
q(Oe, {
entity: e.filterEntity,
"filter-endpoint": e.filterEndpoint,
"search-endpoint": e.filterSearchEndpoint,
"auto-sort": e.autoSortFilters,
filters: e.filters,
"onDsgTable:filterUpdated": i[1] || (i[1] = (r, w, C) => ye(r, w, C))
}, null, 8, ["entity", "filter-endpoint", "search-endpoint", "auto-sort", "filters"]),
M(o.$slots, "dsg-table--search-actions", { data: R.value })
])
]),
M(o.$slots, "dsg-table--search-navigation")
], 512)) : p("", !0),
q(ba, {
ref: "dsgTable",
"api-url": e.getUrl,
"filter-params": y.value,
"onUpdate:filterParams": i[7] || (i[7] = (r) => y.value = r),
"per-page": P.value,
"onUpdate:perPage": i[8] || (i[8] = (r) => P.value = r),
fields: e.fields,
"load-on-start": e.loadOnStart,
"pagination-path": e.paginationPath,
selectable: e.selectable,
"shift-select-highlight": e.shiftSelectHighlight,
"selected-row-highlight": e.selectedRowHighlight,
"track-by": e.trackBy,
"table-layout": e.tableLayout,
css: v.value,
data: e.data,
"row-class": e.rowClass,
"api-mode": $.value,
"replace-state": e.replaceState,
"replace-strategy": e.replaceStrategy,
"has-detail-row": e.hasDetailRow,
"expandable-rows": e.expandableRows,
"expand-multiple": e.expandMultiple,
"show-expand-detail": e.showExpandDetail,
"detail-row-transition": e.detailRowTransition,
"detail-row-options": e.detailRowOptions,
"onDsgTable:loading": i[9] || (i[9] = (r) => H.value = !0),
"onDsgTable:loaded": i[10] || (i[10] = (r) => H.value = !1),
"onDsgTable:paginationData": se,
"onDsgTable:loadSuccess": ue,
"onDsgTable:rowsSelected": i[11] || (i[11] = (r) => S("dsg-table:rows-selected", r)),
"onDsgTable:rowClicked": i[12] || (i[12] = (r, w, C) => S("dsg-table:row-clicked", r, w, C)),
"onDsgTable:rowHover": i[13] || (i[13] = (r, w, C) => S("dsg-table:row-hover", r, w, C)),
"onDsgTable:rowDblclick": i[14] || (i[14] = (r, w, C) => S("dsg-table:row-dblclick", r, w, C)),
"onDsgTable:rowExpanded": i[15] || (i[15] = (r, w) => S("dsg-table:row-expanded", r, w)),
"onDsgTable:rowCollapsed": i[16] || (i[16] = (r, w) => S("dsg-table:row-collapsed", r, w))
}, wt({
"dsg-field--actions": ne((r) => [
M(o.$slots, "dsg-table-actions", { data: r }, () => [
(s(), W(je, {
key: r.rowIndex,
data: r,
"onDsgTable:actionEdit": i[2] || (i[2] = (w, C) => S("dsg-table:action-edit", w, C)),
"onDsgTable:actionView": i[3] || (i[3] = (w, C) => S("dsg-table:action-view", w, C)),
"onDsgTable:actionDelete": i[4] || (i[4] = (w, C) => S("dsg-table:action-delete", w, C)),
"onDsgTable:actionArchive": i[5] || (i[5] = (w, C) => S("dsg-table:action-archive", w, C)),
"onDsgTable:linkClicked": i[6] || (i[6] = (w, C, ke) => S("dsg-table:link-clicked", w, C, ke))
}, null, 8, ["data"]))
])
]),
_: 2
}, [
Y(K(b), (r, w) => ({
name: w,
fn: ne((C) => [
String(w) !== "dsg-field--actions" ? M(o.$slots, w, mt(Pe({ key: 0 }, C))) : p("", !0)
])
}))
]), 1032, ["api-url", "filter-params", "per-page", "fields", "load-on-start", "pagination-path", "selectable", "shift-select-highlight", "selected-row-highlight", "track-by", "table-layout", "css", "data", "row-class", "api-mode", "replace-state", "replace-strategy", "has-detail-row", "expandable-rows", "expand-multiple", "show-expand-detail", "detail-row-transition", "detail-row-options"]),
e.hasFooter ? (s(), d("div", Da, [
D("div", Sa, [
M(o.$slots, "dsg-table--footer-left", {
data: m.value,
perPage: g.value
}, () => [
e.displayPaginationInfo ? (s(), W(Ne, {
key: 0,
ref: "paginationInfoStart",
pagination: m.value,
"onUpdate:pagination": i[17] || (i[17] = (r) => m.value = r),
"info-template": T.value
}, null, 8, ["pagination", "info-template"])) : p("", !0),
M(o.$slots, "dsg-table--footer-left-extras", {
data: m.value,
perPage: g.value
})
])
]),
D("div", Ca, [
M(o.$slots, "dsg-table--footer-center", {
data: m.value,
perPage: g.value
}, () => [
M(o.$slots, "dsg-table--footer-center-extras", {
data: m.value,
perPage: g.value
})
])
]),
D("div", xa, [
M(o.$slots, "dsg-table--footer-right", {
data: m.value,
perPage: g.value
}, () => [
H.value === !1 && e