@dcodegroup-au/dsg-vue
Version:
Front-end Vue/Tailwind DSG for UntitledUI.
928 lines (927 loc) • 36.8 kB
JavaScript
import { defineComponent as W, mergeModels as x, useModel as Y, computed as O, withDirectives as oe, createElementBlock as n, openBlock as a, createCommentVNode as w, createElementVNode as m, normalizeClass as B, createVNode as F, Fragment as L, renderList as q, vShow as Se, ref as y, useTemplateRef as ge, useAttrs as Fe, unref as U, withCtx as Z, renderSlot as C, toDisplayString as _, createBlock as N, resolveDynamicComponent as Me, normalizeStyle as J, watch as te, onMounted as Be, Transition as Le, createTextVNode as Ee, useSlots as Re, createSlots as He, normalizeProps as Ie, mergeProps as ze, vModelSelect as Ve } from "vue";
import { _ as V, k as Ae, v as Oe, g as Ue, u as qe, c as ve, e as ce, i as be, j as Ne } from "./DsgTablePerPage.vue_vue_type_style_index_0_lang-BOlPdhxa.js";
import { ucfirst as We, ucwords as je, toSnakeCase as Ke } from "./dsg-vue.helpers-string.esm.js";
import { data_get as ne } from "./dsg-vue.helpers-object.esm.js";
const Qe = { class: "dsg-table--pagination" }, Ye = ["disabled"], xe = ["disabled"], Ge = ["onClick", "innerHTML"], Je = ["onClick", "innerHTML"], Xe = ["disabled"], Ze = ["disabled"], fe = /* @__PURE__ */ W({
__name: "DsgTablePagination",
props: /* @__PURE__ */ x({
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__ */ x(["dsg-table:change-page"], ["update:pagination"]),
setup(t, { expose: $, emit: v }) {
const i = Y(t, "pagination"), f = O(() => i.value === null ? 0 : i.value?.last_page - t.firstPage + 1), b = O(() => i.value === null ? 0 : i.value?.last_page), h = O(() => i.value === null ? !1 : i.value?.current_page === t.firstPage), p = O(() => i.value === null ? !1 : i.value?.current_page === b.value), R = O(() => f.value < t.onEachSide * 2 + 4), A = O(() => t.onEachSide * 2 + 1), r = O(() => !i.value || i.value?.current_page <= t.onEachSide ? 1 : i.value?.current_page >= f.value - t.onEachSide ? f.value - t.onEachSide * 2 : i.value?.current_page - t.onEachSide), k = v, l = (d) => {
k("dsg-table:change-page", d);
}, g = (d) => d === i.value?.current_page;
return $({
loadPage: l
}), (d, T) => oe((a(), n("div", Qe, [
d.showFirstLast ? (a(), n("a", {
key: 0,
onClick: T[0] || (T[0] = (H) => l(d.firstPage)),
class: B([[h.value ? "disabled" : ""], "dsg-table--pagination-link"]),
disabled: h.value,
title: "First",
"aria-label": "First"
}, [
F(V, {
icon: d.firstIcon,
size: "sm"
}, null, 8, ["icon"])
], 10, Ye)) : w("", !0),
m("a", {
onClick: T[1] || (T[1] = (H) => l("prev")),
class: B([[h.value ? "disabled" : ""], "dsg-table--pagination-link"]),
disabled: h.value,
title: "Previous",
"aria-label": "Previous"
}, [
F(V, {
icon: d.prevIcon,
size: "sm"
}, null, 8, ["icon"])
], 10, xe),
R.value ? (a(!0), n(L, { key: 1 }, q(f.value, (H, D) => (a(), n("a", {
key: D,
onClick: (j) => l(D + d.firstPage),
class: B([[g(D + d.firstPage) ? "active" : ""], "dsg-table--pagination-link"]),
innerHTML: H
}, null, 10, Ge))), 128)) : (a(!0), n(L, { key: 2 }, q(A.value, (H, D) => (a(), n("a", {
key: D,
onClick: (j) => l(r.value + D + d.firstPage - 1),
class: B([[g(r.value + D + d.firstPage - 1) ? "active" : ""], "dsg-table--pagination-link"]),
innerHTML: r.value + H - 1
}, null, 10, Je))), 128)),
m("a", {
onClick: T[2] || (T[2] = (H) => l("next")),
class: B([[p.value ? "disabled" : ""], "dsg-table--pagination-link"]),
disabled: p.value,
title: "Next",
"aria-label": "Next"
}, [
F(V, {
icon: d.nextIcon,
size: "sm"
}, null, 8, ["icon"])
], 10, Xe),
d.showFirstLast ? (a(), n("a", {
key: 3,
onClick: T[3] || (T[3] = (H) => l(b.value)),
class: B([[p.value ? "disabled" : ""], "dsg-table--pagination-link"]),
disabled: p.value,
title: "Last",
"aria-label": "Last"
}, [
F(V, {
icon: d.lastIcon,
size: "sm"
}, null, 8, ["icon"])
], 10, Ze)) : w("", !0)
], 512)), [
[Se, i.value && b.value > d.firstPage]
]);
}
}), _e = ["innerHTML"], pe = /* @__PURE__ */ W({
__name: "DsgTablePaginationInfo",
props: /* @__PURE__ */ x({
infoTemplate: { default: "Displaying {from} to {to} of {total} items" },
noDataTemplate: { default: "No relevant data" }
}, {
pagination: { default: null },
paginationModifiers: {}
}),
emits: ["update:pagination"],
setup(t) {
const $ = Y(t, "pagination"), v = O(() => $.value == null || $.value.total == 0 ? t.noDataTemplate : t.infoTemplate.replace("{from}", ($.value?.from || 0).toString()).replace("{to}", ($.value?.to || 0).toString()).replace("{total}", ($.value?.total || 0).toString()));
return (i, f) => (a(), n("div", {
class: "dsg-table--pagination-info",
innerHTML: v.value
}, null, 8, _e));
}
}), et = {
class: "dsg-table--actions",
ref: "dsgTableActions"
}, tt = { class: "dsg-table--action-trigger" }, at = {
key: 0,
class: "dsg-table--actions-menu-wrapper"
}, lt = ["href", "target", "onClick"], st = ["textContent"], nt = { key: 0 }, ot = ["href", "target", "onClick"], it = { class: "flex-1" }, me = /* @__PURE__ */ W({
__name: "DsgTableActions",
props: {
placement: { default: "auto" }
},
emits: ["dsg-table:action-edit", "dsg-table:action-view", "dsg-table:action-delete", "dsg-table:link-clicked"],
setup(t, { emit: $ }) {
const v = y(!1);
ge("dsgTableActions");
const i = Fe(), f = y(i.data.rowData?.actions ?? null), b = y(i.data.rowData?.links ?? null), h = y(i.data.rowData ?? null), p = (k) => {
switch (k) {
case "edit":
return "edit-05";
case "view":
return "eye";
case "delete":
return "trash-01";
default:
return "dots-horizontal";
}
}, R = (k, l, g) => {
switch (l) {
case "edit":
r("dsg-table:action-edit", g, h.value);
break;
case "view":
r("dsg-table:action-view", g, h.value);
break;
case "delete":
r("dsg-table:action-delete", g, h.value);
break;
}
}, A = (k, l) => {
const g = k.actionId || k.label.trim().toLowerCase().replace(/[^a-z0-9-]/g, "-").replace(/-+/g, "-");
r("dsg-table:link-clicked", l, g, h.value);
}, r = $;
return (k, l) => oe((a(), n("div", et, [
F(U(Ae), {
triggers: [],
placement: k.placement,
"handle-resize": !0,
strategy: "absolute",
shown: v.value,
class: "dsg-table--actions__popper",
onHide: l[1] || (l[1] = (g) => v.value = !1),
ref: "floatingVueFilterDropdown"
}, {
popper: Z(() => [
v.value ? (a(), n("div", at, [
(a(!0), n(L, null, q(f.value, (g, d) => (a(), n(L, null, [
["edit", "view", "delete"].includes(String(d)) ? (a(), n("a", {
key: d,
href: f.value?.link,
target: f.value?.target || "_self",
onClick: (T) => R(g, String(d), T)
}, [
m("div", {
class: B(["dsg-table--actions-menu-item", String(d)])
}, [
F(V, {
icon: p(String(d)),
size: "sm"
}, null, 8, ["icon"]),
m("span", {
class: "flex-1",
textContent: _(U(We)(String(d)))
}, null, 8, st)
], 2)
], 8, lt)) : w("", !0)
], 64))), 256)),
f.value && b.value ? (a(), n("hr", nt)) : w("", !0),
b.value ? (a(!0), n(L, { key: 1 }, q(b.value, (g) => (a(), n(L, {
key: g.label
}, [
g.hasOwnProperty("component") ? (a(), N(Me(g.component), {
key: 0,
quote: U(i).data.data.rowData,
"row-data": U(i).data.data.rowData
}, null, 8, ["quote", "row-data"])) : w("", !0),
m("a", {
href: g.link,
target: g.target || "_self",
class: "dsg-table--actions-menu-item",
onClick: (d) => A(g, d)
}, [
g.icon ? (a(), N(V, {
key: 0,
icon: g.icon,
size: "sm"
}, null, 8, ["icon"])) : w("", !0),
m("span", it, _(g.label), 1)
], 8, ot)
], 64))), 128)) : w("", !0)
])) : w("", !0)
]),
default: Z(() => [
m("div", tt, [
m("button", {
type: "button",
class: "dsg-table--actions-button",
"aria-expanded": "false",
"aria-haspopup": "true",
onClick: l[0] || (l[0] = (g) => v.value = !v.value)
}, [
C(k.$slots, "dsg-table-action-button-content", {}, () => [
F(V, {
icon: "dots-vertical",
size: "sm"
})
])
])
])
]),
_: 3
}, 8, ["placement", "shown"])
])), [
[U(Oe), () => v.value = !1]
]);
}
}), rt = { class: "dsg-table--search" }, he = /* @__PURE__ */ W({
__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: {}
},
emits: ["dsg-table:term-changed"],
setup(t, { emit: $ }) {
const v = y(""), i = $, f = qe((b) => {
v.value = b, i("dsg-table:term-changed", v.value);
}, 300);
return (b, h) => (a(), n("div", rt, [
F(Ue, {
value: v.value,
"onUpdate:value": h[0] || (h[0] = (p) => v.value = p),
name: b.name,
id: b.id || b.name,
placeholder: b.placeholder,
disabled: b.disabled,
required: b.required,
readonly: b.readonly,
hidden: b.hidden,
"has-clear-button": !0,
autocomplete: "off",
size: "sm",
icon: "search-sm",
"icon-clickable": !0,
onIconClicked: h[1] || (h[1] = (p) => U(f)(p)),
onEnterPressed: h[2] || (h[2] = (p) => U(f)(p)),
onOnClear: h[3] || (h[3] = () => U(f)(""))
}, null, 8, ["value", "name", "id", "placeholder", "disabled", "required", "readonly", "hidden"])
]));
}
}), dt = { class: "dsg-table--header-row" }, ut = {
key: 0,
class: "dsg-table--th dsg-table--th-checkbox",
scope: "col"
}, ct = {
key: 1,
class: "dsg-table--th dsg-table--th-expand-detail",
scope: "col"
}, gt = ["title", "id", "onClick"], vt = {
key: 0,
class: "dsg-table--th-sort-icon"
}, bt = ["innerHTML"], ft = ["innerHTML"], ye = /* @__PURE__ */ W({
__name: "DsgTableRowHeader",
props: /* @__PURE__ */ x({
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__ */ x(["dsg-table:sort-field", "dsg-table:on-select-all", "dsg-table:on-deselect-all"], ["update:sortField", "update:selectedRows", "update:hasSelected"]),
setup(t, { emit: $ }) {
const v = Y(t, "sortField"), i = Y(t, "selectedRows"), f = Y(t, "hasSelected"), b = y("17px"), h = (r) => {
f.value && i.value.length > 0 && i.value.length !== t.tableDataLength ? (f.value = !0, p("dsg-table:on-select-all")) : !f.value && i.value.length === 0 ? (f.value = !1, p("dsg-table:on-select-all")) : p("dsg-table:on-deselect-all");
}, p = $, R = (r, k) => [
r,
r + "-" + Ke(String(k?.name)),
k.titleClass || "",
{ sortable: k.sortable },
{ "sort-active": v.value?.name === k.name }
], A = (r) => {
r.sortable && (v.value = {
name: String(r?.name),
field: String(r?.sortField),
direction: v.value?.name === r.name && v.value?.direction === "asc" ? "desc" : "asc"
}, p("dsg-table:sort-field", r));
};
return (r, k) => (a(), n("tr", dt, [
r.hasSelectAll ? (a(), n("th", ut, [
F(ve, {
modelValue: f.value,
"onUpdate:modelValue": [
k[0] || (k[0] = (l) => f.value = l),
h
],
indeterminate: i.value.length > 0 && i.value.length !== r.tableDataLength
}, null, 8, ["modelValue", "indeterminate"])
])) : w("", !0),
r.showExpandDetail ? (a(), n("th", ct)) : w("", !0),
(a(!0), n(L, null, q(r.fields, (l, g) => (a(), n(L, null, [
l?.visible ? (a(), n("th", {
key: g,
class: B(R("dsg-table--th", l)),
style: J([{ width: l.width || void 0 }, l.style]),
title: l.title + (l.sortable ? " Sort" : ""),
id: "_" + l.name,
onClick: (d) => A(l),
scope: "col"
}, [
l.sortable ? (a(), n("div", vt, [
l.title ? (a(), n("span", {
key: 0,
class: "dsg-table--th-title",
innerHTML: l.title
}, null, 8, bt)) : w("", !0),
l.sortable && v.value?.name !== l.name ? (a(), N(V, {
key: 1,
icon: "chevron-selector-vertical",
class: "inline-flex",
size: "xs"
})) : w("", !0),
l.sortable && v.value?.name === l.name && v.value?.direction === "asc" ? (a(), N(V, {
key: 2,
icon: "chevron-down",
class: "inline-flex",
size: "xs"
})) : w("", !0),
l.sortable && v.value?.name === l.name && v.value?.direction === "desc" ? (a(), N(V, {
key: 3,
icon: "chevron-up",
class: "inline-flex",
size: "xs"
})) : w("", !0)
])) : (a(), n("span", {
key: 1,
class: "dsg-table--th-title",
innerHTML: U(je)(String(l?.title))
}, null, 8, ft))
], 14, gt)) : w("", !0)
], 64))), 256)),
r.scrollVisible ? (a(), n("th", {
key: 2,
style: J({ width: b.value }),
class: "dsg-table--th-col-gutter"
}, null, 4)) : w("", !0)
]));
}
}), pt = { class: "dsg-table--wrapper" }, mt = ["span"], ht = {
key: 0,
class: "dsg-table--loading"
}, yt = ["colspan"], kt = ["colspan"], wt = ["onClick", "onDblclick", "onMouseover"], Pt = {
key: 0,
class: "dsg-table--tbody-cell dsg-table--tbody-cell-checkbox"
}, $t = ["onClick", "onDblclick", "onContextmenu"], Dt = ["innerHTML"], Ct = ["onClick"], Tt = ["colspan"], St = { key: 2 }, Ft = ["colspan"], Mt = { class: "dsg-table--footer" }, Bt = /* @__PURE__ */ W({
__name: "DsgTableComponent",
props: /* @__PURE__ */ x({
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 },
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 }
}, {
filterParams: { default: {} },
filterParamsModifiers: {},
perPage: { default: 20 },
perPageModifiers: {}
}),
emits: /* @__PURE__ */ x(["dsg-table:loading", "dsg-table:loaded", "dsg-table:load-success", "dsg-table:load-error", "dsg-table:pagination-data", "dsg-table:rows-selected"], ["update:filterParams", "update:perPage"]),
setup(t, { expose: $, emit: v }) {
const i = (e) => e.map((o, u) => ({
field: o.field || "",
title: o.title || "",
name: o.name || "",
titleClass: o.titleClass || "",
dataClass: o.dataClass || "",
visible: o.visible !== !1,
width: o.width || void 0,
sortField: o.sortField || null,
sortable: o.sortField,
formatter: o.formatter || null,
$_index: u
})), f = y(i(t.fields)), b = y(t.data), h = y(null), p = y(t.initialPage), R = y("17px"), A = y(!1), r = y({}), k = y(0), l = y(!0), g = y(null), d = y(null), T = Y(t, "filterParams"), H = Y(t, "perPage"), D = y([]), j = y(!1), K = O(() => t.tableHeight != null), Q = O(() => f.value.filter((e) => e.visible).length);
te(
() => D.value.length,
(e) => {
j.value = t.selectable && e > 0;
},
{ immediate: !0 }
), te(
() => t.fields,
(e) => {
f.value = i(e);
},
{ immediate: !0 }
), te(
() => T.value,
() => {
X();
},
{ deep: !0 }
), te(
() => H.value,
() => {
X();
}
);
const I = v, ee = (e, o) => e.formatter && typeof e.formatter == "function" ? e.formatter(e, o) : ne(o, String(e?.name), ""), ae = (e) => "dsg-field--" + e.name?.toLowerCase().replaceAll(/[_ ]/g, "-"), s = (e) => {
if (t.selectable) {
if (e.selected)
D.value.push(e);
else {
const o = D.value.findIndex((u) => u[t.trackBy] === e[t.trackBy]);
o !== -1 && D.value.splice(o, 1);
}
I("dsg-table:rows-selected", D.value);
}
}, c = () => {
t.selectable && (b.value?.forEach((e) => {
e.selected = !0;
}), D.value = b.value?.filter((e) => e.selected) ?? [], I("dsg-table:rows-selected", D.value));
}, P = () => {
t.selectable && (b.value?.forEach((e) => {
e.selected = !1;
}), D.value = [], I("dsg-table:rows-selected", D.value));
}, S = (e) => {
e === "prev" ? p.value > t.firstPage && p.value-- : e === "next" ? p.value < (h.value?.last_page ?? 0) && p.value++ : e != p.value && e >= t.firstPage && e <= (h.value?.last_page ?? 0) && (p.value = e), X();
}, z = () => ({
[t.queryParams?.sort]: g.value ? (g.value?.direction === "desc" ? "-" : "") + g.value?.field : void 0,
[t.queryParams?.order]: g.value?.direction,
[t.queryParams?.page]: p.value,
[t.queryParams?.perPage]: H.value
}), G = () => {
d.value && (d.value.abort(), d.value = null);
}, le = async (e, o) => {
G();
const u = new AbortController();
if (o.signal = u.signal, d.value = u, t.httpMethod.toLowerCase() === "get")
return await ce.get(e, o);
{
const E = o.params;
return delete o.params, await ce.post(e, E, o);
}
}, ie = (e) => {
I("dsg-table:load-success", e);
const o = t.transform ? t.transform(e.data) : e.data;
b.value = ne(o, t.dataPath, null), t.selectable && b.value?.forEach((u) => {
u.selected = u.selected ?? !1;
}), h.value = ne(o, t.paginationPath, null) ?? null, k.value = b.value?.length ? b.value[0].order : k, h.value === null && console.warn(
'DsgTable: pagination-path "' + t.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="".`
), I("dsg-table:pagination-data", h.value), I("dsg-table:loaded"), l.value = !1;
}, re = (e) => {
console.error("load-error", e), I("dsg-table:load-error", e), I("dsg-table:loaded"), l.value = !1;
}, X = (e = ie, o = re, u = {}) => {
const E = e || ie, M = o || re;
if (t.apiMode)
return l.value = !0, I("dsg-table:loading", l.value), t.httpOptions.params = {
...z(),
...T.value
}, le(t.apiUrl, t.httpOptions).then(E).catch((se) => M(se));
}, ke = (e, o, u) => {
}, we = (e, o, u) => {
}, Pe = (e, o, u) => {
}, $e = (e, o, u, E) => {
}, De = (e, o, u, E) => {
}, Ce = (e, o, u, E) => {
}, Te = (e, o, u) => {
};
Be(() => {
t.apiMode === !0 && X();
});
const de = () => {
t.apiMode && (p.value = t.initialPage, D.value = [], G(), X());
};
return $({
changePage: S,
reload: de
}), (e, o) => (a(), n("div", pt, [
m("div", {
ref: "dsgTableBodyWrapper",
class: B(["dsg-table-body-wrapper", { "fixed-header": K.value }]),
style: J({ height: e.tableHeight || void 0 })
}, [
m("table", {
class: B(["dsg-table-main", K.value ? "fixed-header" : "", r.value.table, "table-" + e.tableLayout])
}, [
m("colgroup", { span: Q.value }, [
(a(!0), n(L, null, q(f.value, (u, E) => (a(), n(L, null, [
u?.visible ? (a(), n("col", {
key: E,
style: J({ width: u.width || void 0 }),
class: B("dsg-table--col-" + u.name + " " + u.titleClass)
}, null, 6)) : w("", !0)
], 64))), 256)),
!K.value && A.value ? (a(), n("col", {
key: 0,
style: J({ width: R.value }),
class: "dsg-table--col-gutter"
}, null, 4)) : w("", !0)
], 8, mt),
m("thead", {
class: B([[r.value.thead, { sticky: K.value, "top-0": K.value }], "dsg-table--head"])
}, [
C(e.$slots, "tableHeader", { fields: f.value }, () => [
F(ye, {
fields: f.value,
"has-select-all": e.selectable,
"selected-rows": D.value,
"onUpdate:selectedRows": o[0] || (o[0] = (u) => D.value = u),
"has-selected": j.value,
"onUpdate:hasSelected": o[1] || (o[1] = (u) => j.value = u),
"scroll-visible": A.value,
"show-expand-detail": e.hasDetailRow && e.showExpandDetail,
"table-data-length": b.value?.length,
"sort-field": g.value,
"onUpdate:sortField": o[2] || (o[2] = (u) => g.value = u),
"onDsgTable:sortField": o[3] || (o[3] = (u) => de()),
"onDsgTable:onSelectAll": c,
"onDsgTable:onDeselectAll": P
}, null, 8, ["fields", "has-select-all", "selected-rows", "has-selected", "scroll-visible", "show-expand-detail", "table-data-length", "sort-field"])
])
], 2),
m("tbody", {
class: B(["dsg-table--body", r.value.tbody])
}, [
l.value ? (a(), n("tr", ht, [
m("td", { colspan: Q.value }, [
m("div", {
"aria-label": "Loading...",
role: "status",
class: "flex items-center space-x-3 h-12 w-full justify-center",
colspan: Q.value
}, [
C(e.$slots, "dsg-table-loading", {}, () => [
F(V, {
icon: "loading-02",
class: "animate-spin"
}),
o[4] || (o[4] = m("span", { class: "text-xs font-medium text-gray-500" }, "Loading...", -1))
])
], 8, kt)
], 8, yt)
])) : (a(!0), n(L, { key: 1 }, q(b.value, (u, E) => (a(), n(L, { key: E }, [
m("tr", {
class: B(["dsg-table--tbody-row", { odd: E % 2 === 0, even: E % 2 !== 0, "row-selected": u.selected }]),
onClick: (M) => ke(),
onDblclick: (M) => we(),
onMouseover: (M) => Pe()
}, [
e.selectable ? (a(), n("td", Pt, [
F(ve, {
modelValue: u.selected,
"onUpdate:modelValue": [(M) => u.selected = M, (M) => s(u)]
}, null, 8, ["modelValue", "onUpdate:modelValue"])
])) : w("", !0),
(a(!0), n(L, null, q(f.value, (M, se) => (a(), n(L, { key: se }, [
M.visible ? (a(), n("td", {
key: 0,
class: B(["dsg-table--tbody-cell", M.dataClass]),
style: J({ width: M.width || void 0 }),
onClick: (ue) => $e(),
onDblclick: (ue) => De(),
onContextmenu: (ue) => Ce()
}, [
C(e.$slots, ae(M), {
rowData: u,
rowIndex: E,
rowField: M
}, () => [
m("span", {
innerHTML: ee(M, u)
}, null, 8, Dt)
])
], 46, $t)) : w("", !0)
], 64))), 128))
], 42, wt),
e.hasDetailRow ? (a(), N(Le, {
key: 0,
name: e.detailRowTransition
}, {
default: Z(() => [
m("tr", {
class: "dsg-table--tbody-detail-row",
onClick: (M) => Te()
}, [
m("td", { colspan: Q.value }, [
C(e.$slots, "dsg-table-detail-row", {
rowData: u,
rowIndex: E,
options: e.detailRowOptions
})
], 8, Tt)
], 8, Ct)
]),
_: 2
}, 1032, ["name"])) : w("", !0)
], 64))), 128)),
!b.value?.length && e.noDataTemplate.length ? (a(), n("tr", St, [
m("td", {
colspan: Q.value,
class: "dsg-table--empty-result"
}, [
C(e.$slots, "dsg-table-empty-result", {}, () => [
Ee(_(e.noDataTemplate), 1)
])
], 8, Ft)
])) : w("", !0)
], 2),
m("tfoot", Mt, [
C(e.$slots, "dsg-table-footer", {
fields: f.value,
data: b.value
})
])
], 2)
], 6)
]));
}
}), Lt = { class: "dsg-table" }, Et = { class: "dsg-table--pre-header" }, Rt = { class: "dsg-table--pre-header-left" }, Ht = ["textContent"], It = { class: "dsg-table--pre-header-right" }, zt = {
key: 0,
class: "dsg-table--search-header"
}, Vt = { class: "dsg-table--search-top" }, At = { class: "dsg-table--footer" }, Ot = { class: "dsg-table--footer-left" }, Ut = { class: "dsg-table--footer-center" }, qt = { class: "dsg-table--footer-right" }, Nt = /* @__PURE__ */ W({
__name: "DsgTable",
props: {
getUrl: {},
fields: {},
loadOnStart: { type: Boolean, default: !0 },
displayPaginationInfo: { type: Boolean, default: !0 },
reloadOnChangeTimer: { type: Boolean, default: !1 },
selectable: { type: Boolean, default: !1 },
trackBy: { default: "id" },
title: { default: "" },
filters: { default: () => {
} },
filterEntity: { default: "" },
filterEndpoint: { default: "" },
filterSearchEndpoint: { default: "" },
tableLayout: { default: "fixed" }
},
emits: ["dsg-table:action-edit", "dsg-table:action-view", "dsg-table:action-delete", "dsg-table:link-clicked", "dsg-table:rows-selected"],
setup(t, { expose: $, emit: v }) {
const i = (s) => {
g.value = s;
}, f = y(!!(t.filterEntity || t.filterEndpoint)), b = () => {
if (f.value) {
let s = {};
return Ne().forEach((c) => {
if (c.key.startsWith("filter[")) {
const P = c.key.replace("filter[", "").replace("]", ""), S = c.value;
s[`filter[${P}]`] = S.join(",");
}
}), s;
} else
return {};
}, h = Re(), p = y(!0), R = y(null), A = y("<p>Showing {from} to {to} of {total}</p>"), r = y(null), k = ge("dsgTable"), l = y({ perPage: 20, change: i }), g = y(20), d = y(b()), T = v, H = (s) => {
k.value?.changePage(s);
}, D = (s) => {
r.value = s;
}, j = ({ data: s }) => {
R.value = s;
}, K = () => {
p.value === !1 && k.value?.reload();
}, Q = (s) => {
k.value?.setData(
k.value?.tableData.map((c) => c.id === s.id ? s : c)
);
}, I = (s) => {
d.value = s;
}, ee = (s) => {
d.value["filter[term]"] = s;
}, ae = (s, c) => {
d.value = { "filter[term]": d.value["filter[term]"], ...s };
};
return $({
reloadTable: K,
updateRowTable: Q,
termChanged: ee,
setFilters: I
}), (s, c) => (a(), n("div", Lt, [
m("div", Et, [
C(s.$slots, "dsg-table--pre-header", {}, () => [
m("div", Rt, [
C(s.$slots, "dsg-table--page-title", {
data: R.value,
title: s.title
}, () => [
s.title.length > 0 ? (a(), n("h1", {
key: 0,
class: "dsg-table--title",
textContent: _(s.title)
}, null, 8, Ht)) : w("", !0)
])
]),
m("div", It, [
C(s.$slots, "dsg-table--page-actions", { data: R.value })
])
])
]),
s.displayPaginationInfo ? (a(), n("div", zt, [
m("div", Vt, [
C(s.$slots, "dsg-table--search-header", { data: R.value }, () => [
F(he, {
name: "term",
"onDsgTable:termChanged": c[0] || (c[0] = (P) => ee(P))
}),
F(be, {
entity: s.filterEntity,
"filter-endpoint": s.filterEndpoint,
"search-endpoint": s.filterSearchEndpoint,
filters: s.filters,
"onDsgTable:filterUpdated": c[1] || (c[1] = (P, S) => ae(P))
}, null, 8, ["entity", "filter-endpoint", "search-endpoint", "filters"]),
C(s.$slots, "dsg-table--search-actions", { data: R.value })
])
]),
C(s.$slots, "dsg-table--search-navigation")
])) : w("", !0),
F(Bt, {
ref: "dsgTable",
"api-url": s.getUrl,
"filter-params": d.value,
"onUpdate:filterParams": c[6] || (c[6] = (P) => d.value = P),
"per-page": g.value,
"onUpdate:perPage": c[7] || (c[7] = (P) => g.value = P),
fields: s.fields,
"load-on-start": s.loadOnStart,
"pagination-path": "meta",
selectable: s.selectable,
"track-by": s.trackBy,
"table-layout": s.tableLayout,
css: { tableWrapper: "border-b" },
"onDsgTable:loading": c[8] || (c[8] = (P) => p.value = !0),
"onDsgTable:loaded": c[9] || (c[9] = (P) => p.value = !1),
"onDsgTable:paginationData": D,
"onDsgTable:loadSuccess": j,
"onDsgTable:rowsSelected": c[10] || (c[10] = (P) => T("dsg-table:rows-selected", P))
}, He({
"dsg-field--actions": Z((P) => [
C(s.$slots, "dsg-table-actions", { data: P }, () => [
(a(), N(me, {
key: P.rowIndex,
data: P,
"onDsgTable:actionEdit": c[2] || (c[2] = (S, z) => T("dsg-table:action-edit", S, z)),
"onDsgTable:actionView": c[3] || (c[3] = (S, z) => T("dsg-table:action-view", S, z)),
"onDsgTable:actionDelete": c[4] || (c[4] = (S, z) => T("dsg-table:action-delete", S, z)),
"onDsgTable:linkClicked": c[5] || (c[5] = (S, z, G) => T("dsg-table:link-clicked", S, z, G))
}, null, 8, ["data"]))
])
]),
_: 2
}, [
q(U(h), (P, S) => ({
name: S,
fn: Z(({ rowData: z, rowField: G, rowIndex: le }) => [
String(S) !== "dsg-field--actions" ? C(s.$slots, S, Ie(ze({ key: 0 }, { rowData: z, rowField: G, rowIndex: le }))) : w("", !0)
])
}))
]), 1032, ["api-url", "filter-params", "per-page", "fields", "load-on-start", "selectable", "track-by", "table-layout"]),
m("div", At, [
m("div", Ot, [
C(s.$slots, "dsg-table--footer-left", {
data: r.value,
perPage: l.value
}, () => [
F(pe, {
"no-data-template": "",
ref: "paginationInfoStart",
pagination: r.value,
"onUpdate:pagination": c[11] || (c[11] = (P) => r.value = P),
"info-template": A.value
}, null, 8, ["pagination", "info-template"]),
C(s.$slots, "dsg-table--footer-left-extras", {
data: r.value,
perPage: l.value
})
])
]),
m("div", Ut, [
C(s.$slots, "dsg-table--footer-center", {
data: r.value,
perPage: l.value
}, () => [
C(s.$slots, "dsg-table--footer-center-extras", {
data: r.value,
perPage: l.value
})
])
]),
m("div", qt, [
C(s.$slots, "dsg-table--footer-right", {
data: r.value,
perPage: l.value
}, () => [
p.value === !1 ? (a(), N(fe, {
key: 0,
ref: "pagination",
pagination: r.value,
"onUpdate:pagination": c[12] || (c[12] = (P) => r.value = P),
"onDsgTable:changePage": H
}, null, 8, ["pagination"])) : w("", !0),
C(s.$slots, "dsg-table--footer-right-extras", {
data: r.value,
perPage: l.value
})
])
])
])
]));
}
}), Wt = { class: "dsg-table--per-page" }, jt = ["value", "textContent"], Kt = /* @__PURE__ */ W({
__name: "DsgTablePerPage",
props: {
perPageOptions: { default: () => [10, 20, 30, 50, 100] },
perPage: {}
},
setup(t) {
return ($, v) => (a(), n("div", Wt, [
oe(m("select", {
"onUpdate:modelValue": v[0] || (v[0] = (i) => $.perPage.perPage = i),
class: "dsg-table--per-page-select",
onChange: v[1] || (v[1] = (i) => $.perPage.change($.perPage.perPage))
}, [
(a(!0), n(L, null, q($.perPageOptions, (i) => (a(), n("option", {
key: i,
value: i,
textContent: _(i)
}, null, 8, jt))), 128))
], 544), [
[Ve, $.perPage.perPage]
])
]));
}
}), Qt = Nt, Yt = me, xt = Kt, Gt = be, Jt = fe, Xt = pe, Zt = he, _t = ye, sa = {
DsgTable: Qt,
DsgTableActions: Yt,
DsgTablePerPage: xt,
DsgTableFilter: Gt,
DsgTablePagination: Jt,
DsgTablePaginationInfo: Xt,
DsgTableSearch: Zt,
DsgTableRowHeader: _t
};
export {
Qt as DsgTable,
Yt as DsgTableActions,
Gt as DsgTableFilter,
Jt as DsgTablePagination,
Xt as DsgTablePaginationInfo,
xt as DsgTablePerPage,
_t as DsgTableRowHeader,
Zt as DsgTableSearch,
sa as default
};