@dcodegroup-au/dsg-vue 1.0.0-next.1 → 1.0.2-next

package/dist/dsg-vue.table.esm.js

@@ -1,9 +1,9 @@
-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 { defineComponent as X, useModel as ae, computed as z, withDirectives as De, openBlock as s, createElementBlock as d, normalizeClass as B, createVNode as q, createCommentVNode as m, createElementVNode as k, Fragment as I, renderList as Q, vShow as ut, mergeModels as le, ref as P, useTemplateRef as Ie, unref as Y, withCtx as ne, renderSlot as M, toDisplayString as re, createBlock as N, 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 W, 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-gN_n5gOu.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({
+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 },
@@ -18,76 +18,76 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
     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;
+  setup(e, { expose: F, emit: g }) {
+    const r = ae(e, "pagination"), $ = z(() => r.value === null ? 0 : r.value?.last_page - e.firstPage + 1), L = z(() => r.value === null ? 0 : r.value?.last_page), b = z(() => r.value === null ? !1 : r.value?.current_page === e.firstPage), v = z(() => r.value === null ? !1 : r.value?.current_page === L.value), H = z(() => $.value < e.onEachSide * 2 + 4), x = z(() => e.onEachSide * 2 + 1), C = z(() => !r.value || r.value?.current_page <= e.onEachSide ? 1 : r.value?.current_page >= $.value - e.onEachSide ? $.value - e.onEachSide * 2 : r.value?.current_page - e.onEachSide), h = g, a = (R) => {
+      h("dsg-table:change-page", R);
+    }, T = (R) => R === r.value?.current_page;
     return F({
-      loadPage: l
-    }), (P, y) => De((s(), d("div", $t, [
+      loadPage: a
+    }), (R, 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,
+        onClick: y[0] || (y[0] = (p) => a(e.firstPage)),
+        class: B(["dsg-table-pagination__link", { "dsg-table-pagination__link--disabled": b.value }]),
+        disabled: b.value,
         title: "First",
         "aria-label": "First"
       }, [
-        q(O, {
+        q(W, {
           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,
+      ], 10, Tt)) : m("", !0),
+      k("a", {
+        onClick: y[1] || (y[1] = (p) => a("prev")),
+        class: B(["dsg-table-pagination__link", { "dsg-table-pagination__link--disabled": b.value }]),
+        disabled: b.value,
         title: "Previous",
         "aria-label": "Previous"
       }, [
-        q(O, {
+        q(W, {
           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", {
+      H.value ? (s(!0), d(I, { key: 1 }, Q($.value, (p, 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", {
+        onClick: (se) => a(V + e.firstPage),
+        class: B(["dsg-table-pagination__link", { "dsg-table-pagination__link--active": T(V + e.firstPage) }]),
+        innerHTML: p
+      }, null, 10, Mt))), 128)) : (s(!0), d(I, { key: 2 }, Q(x.value, (p, 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
+        onClick: (se) => a(C.value + V + e.firstPage - 1),
+        class: B(["dsg-table-pagination__link", { "dsg-table-pagination__link--active": T(C.value + V + e.firstPage - 1) }]),
+        innerHTML: C.value + p - 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,
+      k("a", {
+        onClick: y[2] || (y[2] = (p) => a("next")),
+        class: B(["dsg-table-pagination__link", { "dsg-table-pagination__link--disabled": v.value }]),
+        disabled: v.value,
         title: "Next",
         "aria-label": "Next"
       }, [
-        q(O, {
+        q(W, {
           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,
+        onClick: y[3] || (y[3] = (p) => a(L.value)),
+        class: B(["dsg-table-pagination__link", { "dsg-table-pagination__link--disabled": v.value }]),
+        disabled: v.value,
         title: "Last",
         "aria-label": "Last"
       }, [
-        q(O, {
+        q(W, {
           icon: e.lastIcon,
           size: "sm"
         }, null, 8, ["icon"])
-      ], 10, Ft)) : p("", !0)
+      ], 10, Ft)) : m("", !0)
     ], 512)), [
-      [rt, c.value && L.value > e.firstPage]
+      [ut, r.value && L.value > e.firstPage]
     ]);
   }
 }), Lt = ["innerHTML"], Ne = /* @__PURE__ */ X({
@@ -101,29 +101,31 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
   }),
   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
+    const F = ae(e, "pagination"), g = z(() => 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 (r, $) => (s(), d("div", {
+      class: "dsg-table-pagination-info",
+      innerHTML: g.value
     }, null, 8, Lt));
   }
 }), Ht = {
-  class: "dsg-table--actions",
+  class: "dsg-table-actions",
   ref: "dsgTableActions"
-}, Ut = { class: "dsg-table--action-trigger" }, At = {
+}, 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({
+  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" }, Ke = /* @__PURE__ */ X({
   __name: "DsgTableActions",
   props: {
-    placement: { default: "auto" }
+    placement: { default: "auto" },
+    data: { default: () => {
+    } }
   },
   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);
+    const g = P(!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) {
+    const r = z(() => e.data?.rowData ?? null), $ = z(() => r.value?.actions ?? null), L = z(() => r.value?.links ?? null), b = (C) => {
+      switch (C) {
         case "edit":
           return "edit-05";
         case "view":
@@ -135,95 +137,95 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
         default:
           return "dots-horizontal";
       }
-    }, H = (m, l, g) => {
-      switch (l) {
+    }, v = (C, h, a) => {
+      switch (h) {
         case "edit":
-          T("dsg-table:action-edit", g, v.value);
+          x("dsg-table:action-edit", a, r.value);
           break;
         case "view":
-          T("dsg-table:action-view", g, v.value);
+          x("dsg-table:action-view", a, r.value);
           break;
         case "delete":
-          T("dsg-table:action-delete", g, v.value);
+          x("dsg-table:action-delete", a, r.value);
           break;
         case "archive":
-          T("dsg-table:action-archive", g, v.value);
+          x("dsg-table:action-archive", a, r.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), {
+    }, H = (C, h) => {
+      const a = C.actionId || C.label.trim().toLowerCase().replace(/[^a-z0-9-]/g, "-").replace(/-+/g, "-");
+      x("dsg-table:link-clicked", h, a, r.value);
+    }, x = F;
+    return (C, h) => De((s(), d("div", Ht, [
+      q(Y(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),
+        shown: g.value,
+        class: "dsg-table-actions__popper",
+        onHide: h[1] || (h[1] = (a) => g.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)
+          g.value ? (s(), d("div", At, [
+            (s(!0), d(I, null, Q($.value, (a, T) => (s(), d(I, null, [
+              ["edit", "view", "delete", "archive"].includes(String(T)) ? (s(), d("a", {
+                key: T,
+                href: a?.link,
+                target: a?.target || "_self",
+                onClick: (R) => v(a, String(T), R)
               }, [
-                D("div", {
-                  class: B(["dsg-table--actions-menu-item", String(P)])
+                k("div", {
+                  class: B(["dsg-table-actions__menu-item", `dsg-table-actions__menu-item--${String(T)}`])
                 }, [
-                  q(O, {
-                    icon: b(String(P)),
+                  q(W, {
+                    icon: b(String(T)),
                     size: "sm"
                   }, null, 8, ["icon"]),
-                  D("span", {
-                    class: "flex-1",
-                    textContent: re(K(St)(String(P)))
+                  k("span", {
+                    class: "dsg-table-actions__menu-item-id",
+                    textContent: re(Y(St)(String(T)))
                   }, null, 8, qt)
                 ], 2)
-              ], 8, It)) : p("", !0)
+              ], 8, It)) : m("", !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
+            $.value && L.value ? (s(), d("hr", Vt)) : m("", !0),
+            L.value ? (s(!0), d(I, { key: 1 }, Q(L.value, (a) => (s(), d(I, {
+              key: a.label
             }, [
-              g.hasOwnProperty("component") ? (s(), W(ct(g.component), {
+              a.hasOwnProperty("component") ? (s(), N(ct(a.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", {
+                quote: r.value,
+                "row-data": r.value
+              }, null, 8, ["quote", "row-data"])) : a.hasOwnProperty("type") && a.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)
+                href: a.link,
+                target: a.target || "_self",
+                class: B(["dsg-table-actions__menu-item", a.class]),
+                onClick: (T) => H(a, T)
               }, [
-                g.icon ? (s(), W(O, {
+                a.icon ? (s(), N(W, {
                   key: 0,
-                  icon: g.icon,
+                  icon: a.icon,
                   size: "sm"
-                }, null, 8, ["icon"])) : p("", !0),
-                D("span", Wt, re(g.label), 1)
+                }, null, 8, ["icon"])) : m("", !0),
+                k("span", Wt, re(a.label), 1)
               ], 10, Ot))
-            ], 64))), 128)) : p("", !0)
-          ])) : p("", !0)
+            ], 64))), 128)) : m("", !0)
+          ])) : m("", !0)
         ]),
         default: ne(() => [
-          D("div", Ut, [
-            D("button", {
+          k("div", Ut, [
+            k("button", {
               type: "button",
-              class: "dsg-table--actions-button",
+              class: "dsg-table-actions__button",
               "aria-expanded": "false",
               "aria-haspopup": "true",
-              onClick: l[0] || (l[0] = (g) => f.value = !f.value)
+              onClick: h[0] || (h[0] = (a) => g.value = !g.value)
             }, [
-              M(m.$slots, "dsg-table-action-button-content", {}, () => [
-                q(O, {
+              M(C.$slots, "dsg-table-action-button-content", {}, () => [
+                q(W, {
                   icon: "dots-vertical",
                   size: "sm"
                 })
@@ -234,10 +236,10 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
         _: 3
       }, 8, ["placement", "shown"])
     ])), [
-      [K(pt), () => f.value = !1]
+      [Y(pt), () => g.value = !1]
     ]);
   }
-}), Nt = { class: "dsg-table--search" }, Ke = /* @__PURE__ */ X({
+}), Nt = { class: "dsg-table-search" }, je = /* @__PURE__ */ X({
   __name: "DsgTableSearch",
   props: {
     name: {},
@@ -253,22 +255,22 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
   },
   emits: ["dsg-table:term-changed"],
   setup(e, { emit: F }) {
-    const f = k("");
+    const g = P("");
     qe(() => {
-      const v = new URL(window.location.href).searchParams.get("term");
-      v && (f.value = v, c("dsg-table:term-changed", v));
+      const b = new URL(window.location.href).searchParams.get("term");
+      b && (g.value = b, r("dsg-table:term-changed", b));
     });
-    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());
+    const r = F, $ = Dt((L) => {
+      if (g.value = L, e.replaceState) {
+        const b = new URL(window.location.href);
+        g.value ? b.searchParams.set("term", g.value) : b.searchParams.delete("term"), window.history.pushState({}, "", b.toString());
       }
-      c("dsg-table:term-changed", f.value);
+      r("dsg-table:term-changed", g.value);
     }, 300);
-    return (L, v) => (s(), d("div", Nt, [
+    return (L, b) => (s(), d("div", Nt, [
       q(Pt, {
-        modelValue: f.value,
-        "onUpdate:modelValue": v[0] || (v[0] = (b) => f.value = b),
+        modelValue: g.value,
+        "onUpdate:modelValue": b[0] || (b[0] = (v) => g.value = v),
         name: e.name,
         id: e.id || e.name,
         placeholder: e.placeholder,
@@ -281,23 +283,23 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
         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($)(""))
+        onIconClicked: b[1] || (b[1] = (v) => Y($)(v)),
+        onEnterPressed: b[2] || (b[2] = (v) => Y($)(v)),
+        onOnClear: b[3] || (b[3] = () => Y($)(""))
       }, null, 8, ["modelValue", "name", "id", "placeholder", "disabled", "required", "readonly", "hidden"])
     ]));
   }
-}), jt = { class: "dsg-table--header-row" }, Kt = {
+}), Kt = { class: "dsg-table-row-header" }, jt = {
   key: 0,
-  class: "dsg-table--th dsg-table--th-checkbox",
+  class: "dsg-table-row-header__row dsg-table-row-header__row--checkbox",
   scope: "col"
 }, Qt = {
   key: 1,
-  class: "dsg-table--th dsg-table--th-expand-detail",
+  class: "dsg-table-row-header__row dsg-table-row-header__row--expand-detail",
   scope: "col"
 }, Yt = ["title", "id", "onClick"], Gt = {
   key: 0,
-  class: "dsg-table--th-sort-icon"
+  class: "dsg-table-row-header__sort-icon"
 }, Jt = ["innerHTML"], Xt = ["innerHTML"], Zt = ["innerHTML"], _t = ["innerHTML"], Qe = /* @__PURE__ */ X({
   __name: "DsgTableRowHeader",
   props: /* @__PURE__ */ le({
@@ -316,125 +318,125 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
   }),
   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));
+    const g = ae(e, "sortField"), r = ae(e, "selectedRows"), $ = ae(e, "hasSelected"), L = P("17px"), b = (C) => {
+      $.value && r.value.length > 0 && r.value.length !== e.tableDataLength ? ($.value = !0, v("dsg-table:on-select-all")) : !$.value && r.value.length === 0 ? ($.value = !1, v("dsg-table:on-select-all")) : v("dsg-table:on-deselect-all");
+    }, v = F, H = (C, h) => [
+      C,
+      C + "-" + Ct(String(h?.name)),
+      h.titleClass || "",
+      { "dsg-table-row-header__row--sortable": h.sortable },
+      { "dsg-table-row-header__row--sort-active": g.value?.name === h.name }
+    ], x = (C) => {
+      C.sortable && (g.value = {
+        name: String(C?.name),
+        field: String(C?.sortField),
+        direction: g.value?.name === C.name && g.value?.direction === "asc" ? "desc" : "asc"
+      }, v("dsg-table:sort-field", C));
     };
-    return (T, m) => (s(), d("tr", jt, [
-      e.hasSelectAll ? (s(), d("th", Kt, [
+    return (C, h) => (s(), d("tr", Kt, [
+      e.hasSelectAll ? (s(), d("th", jt, [
         q(Ve, {
           modelValue: $.value,
           "onUpdate:modelValue": [
-            m[0] || (m[0] = (l) => $.value = l),
-            v
+            h[0] || (h[0] = (a) => $.value = a),
+            b
           ],
-          indeterminate: c.value.length > 0 && c.value.length !== e.tableDataLength
+          indeterminate: r.value.length > 0 && r.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),
+      ])) : m("", !0),
+      e.showExpandDetail ? (s(), d("th", Qt)) : m("", !0),
+      (s(!0), d(I, null, Q(e.fields, (a, T) => (s(), d(I, null, [
+        a?.visible ? (s(), d("th", {
+          key: T,
+          class: B(H("dsg-table-row-header__row", a)),
+          style: te([{ width: a.width || void 0 }, a.style]),
+          title: a.title + (a.sortable ? " Sort" : ""),
+          id: "_" + a.name,
+          onClick: (R) => x(a),
           scope: "col"
         }, [
-          l.sortable ? (s(), d("div", Gt, [
-            l.tooltip ? (s(), W(He, Pe({
+          a.sortable ? (s(), d("div", Gt, [
+            a.tooltip ? (s(), N(He, Pe({
               key: 0,
               ref_for: !0
-            }, l.tooltip, { class: "dsg-table--th-tooltip" }), {
+            }, a.tooltip, { class: "dsg-table-row-header__tooltip" }), {
               "dsg-tooltip--trigger": ne(() => [
-                l.title ? (s(), d("span", {
+                a.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, {
+                  class: "dsg-table-row-header__title",
+                  innerHTML: a.title
+                }, null, 8, Jt)) : m("", !0),
+                a.tooltip.icon ? (s(), N(W, {
                   key: 1,
-                  icon: l.tooltip.icon,
+                  icon: a.tooltip.icon,
                   class: "inline-flex",
                   size: "xs"
-                }, null, 8, ["icon"])) : p("", !0)
+                }, null, 8, ["icon"])) : m("", !0)
               ]),
               _: 2
-            }, 1040)) : l.title ? (s(), d("span", {
+            }, 1040)) : a.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, {
+              class: "dsg-table-row-header__title",
+              innerHTML: a.title
+            }, null, 8, Xt)) : m("", !0),
+            a.sortable && g.value?.name !== a.name ? (s(), N(W, {
               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, {
+            })) : m("", !0),
+            a.sortable && g.value?.name === a.name && g.value?.direction === "asc" ? (s(), N(W, {
               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, {
+            })) : m("", !0),
+            a.sortable && g.value?.name === a.name && g.value?.direction === "desc" ? (s(), N(W, {
               key: 4,
               icon: "chevron-up",
               class: "inline-flex",
               size: "xs"
-            })) : p("", !0)
+            })) : m("", !0)
           ])) : (s(), d(I, { key: 1 }, [
-            l.tooltip ? (s(), W(He, Pe({
+            a.tooltip ? (s(), N(He, Pe({
               key: 0,
               ref_for: !0
-            }, l.tooltip, { class: "dsg-table--th-tooltip" }), {
+            }, a.tooltip, { class: "dsg-table-row-header__tooltip" }), {
               "dsg-tooltip--trigger": ne(() => [
-                D("span", {
-                  class: "dsg-table--th-title",
-                  innerHTML: K(Ae)(String(l?.title))
+                k("span", {
+                  class: "dsg-table-row-header__title",
+                  innerHTML: Y(Ae)(String(a?.title))
                 }, null, 8, Zt),
-                l.tooltip.icon ? (s(), W(O, {
+                a.tooltip.icon ? (s(), N(W, {
                   key: 0,
-                  icon: l.tooltip.icon,
+                  icon: a.tooltip.icon,
                   class: "inline-flex",
                   size: "xs"
-                }, null, 8, ["icon"])) : p("", !0)
+                }, null, 8, ["icon"])) : m("", !0)
               ]),
               _: 2
             }, 1040)) : (s(), d("span", {
               key: 1,
-              class: "dsg-table--th-title",
-              innerHTML: K(Ae)(String(l?.title))
+              class: "dsg-table-row-header__title",
+              innerHTML: Y(Ae)(String(a?.title))
             }, null, 8, _t))
           ], 64))
-        ], 14, Yt)) : p("", !0)
+        ], 14, Yt)) : m("", !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)
+        class: "dsg-table-row-header__col-gutter"
+      }, null, 4)) : m("", !0)
     ]));
   }
 }), ea = ["span"], ta = {
   key: 0,
-  class: "dsg-table--loading"
+  class: "dsg-table-component__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({
+  class: "dsg-table-component__cell dsg-table-component__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-component__footer" }, ba = /* @__PURE__ */ X({
   __name: "DsgTableComponent",
   props: /* @__PURE__ */ le({
     fields: { default: () => [] },
@@ -501,55 +503,56 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
     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,
+  setup(e, { expose: F, emit: g }) {
+    const r = (t) => t.map((l, n) => ({
+      field: l.field || "",
+      title: l.title || "",
+      name: l.name || "",
+      titleClass: l.titleClass || "",
+      dataClass: l.dataClass || "",
+      visible: l.visible ?? !0,
+      width: l.width || void 0,
+      sortField: l.sortField || null,
+      sortable: l.sortField,
+      formatter: l.formatter || null,
+      tooltip: l.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"
+      const l = ze().find((n) => n.key === e.queryParams.sort);
+      if (l && l.value.length > 0) {
+        const n = l.value[0], f = n.startsWith("-"), c = f ? n.substring(1) : n, S = e.fields.find((K) => K.sortField === c || K.name === c || K.field === c);
+        return S ? {
+          name: String(S.name || S.field),
+          field: c,
+          direction: f ? "desc" : "asc"
         } : {
-          name: u,
-          field: u,
-          direction: h ? "desc" : "asc"
+          name: c,
+          field: c,
+          direction: f ? "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 t = new URL(window.location.href), l = new URLSearchParams(t.search);
+        if (l.delete(e.queryParams.sort), y.value) {
+          const f = (y.value.direction === "desc" ? "-" : "") + y.value.field;
+          l.set(e.queryParams.sort, f);
         }
-        const n = `${t.pathname}${a.toString() ? "?" + a.toString() : ""}`;
+        const n = `${t.pathname}${l.toString() ? "?" + l.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;
+    }, b = P(r(e.fields)), v = P(e.data), H = P(null), x = P(e.initialPage), C = P("17px"), h = P(!1), a = P({}), T = P(0), R = P(!0), y = P($()), p = P(null), V = P(0), se = ae(e, "filterParams"), ue = ae(e, "perPage"), E = P([]), ie = P(!1), O = P(/* @__PURE__ */ new Set()), A = P(null), j = P(null), G = P(!1), Z = z(() => e.tableHeight != null), _ = z(() => {
+      let t = b.value.filter((l) => l.visible).length;
       return e.selectable && t++, e.hasDetailRow && e.expandableRows && t++, t;
-    }), fe = N(() => {
+    }), fe = z(() => {
       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;
-    });
+    }), be = (t, l) => {
+      const n = t?.[e.trackBy];
+      return n ?? l;
+    };
     oe(
       () => E.value.length,
       (t) => {
@@ -559,7 +562,7 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
     ), oe(
       () => e.fields,
       (t) => {
-        v.value = c(t);
+        b.value = r(t);
       },
       { immediate: !0, deep: !0 }
     ), oe(
@@ -575,8 +578,8 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
       }
     ), oe(
       () => e.apiUrl,
-      (t, a) => {
-        e.apiMode && t !== a && t && ee();
+      (t, l) => {
+        e.apiMode && t !== l && t && ee();
       }
     ), oe(
       () => y.value,
@@ -585,159 +588,159 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
       },
       { 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 U = g, he = (t, l) => t.formatter && typeof t.formatter == "function" ? t.formatter(t, l) : pe(l, String(t?.name), ""), we = (t) => "dsg-field--" + t.name?.toLowerCase().replaceAll(/[_ ]/g, "-"), me = (t, l) => {
       const n = {
-        odd: a % 2 === 0,
-        even: a % 2 !== 0,
-        "row-selected": t.selected
+        odd: l % 2 === 0,
+        even: l % 2 !== 0,
+        "dsg-table-component__row--selected": t.selected
       };
       if (!e.rowClass)
         return n;
-      let h = {};
+      let f = {};
       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);
+        const c = e.rowClass(t, l);
+        typeof c == "string" ? c.split(" ").forEach((S) => {
+          S.trim() && (f[S.trim()] = !0);
+        }) : Array.isArray(c) ? c.forEach((S) => {
+          typeof S == "string" && S.trim() && (f[S.trim()] = !0);
+        }) : typeof c == "object" && c !== null && (f = c);
+      } else typeof e.rowClass == "string" && e.rowClass.split(" ").forEach((c) => {
+        c.trim() && (f[c.trim()] = !0);
       });
-      return { ...n, ...h };
-    }, J = (t) => z.value.has(t[e.trackBy]), ce = (t, a) => {
+      return { ...n, ...f };
+    }, J = (t) => O.value.has(t[e.trackBy]), ce = (t, l) => {
       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));
+      O.value.has(n) ? (O.value.delete(n), U("dsg-table:row-collapsed", t, l)) : (e.expandMultiple || O.value.clear(), O.value.add(n), U("dsg-table:row-expanded", t, l));
     }, ge = (t) => {
-      z.value.delete(t[e.trackBy]);
-    }, ye = () => {
-      b.value?.forEach((t) => {
-        z.value.add(t[e.trackBy]);
-      });
+      const l = t[e.trackBy];
+      O.value.has(l) || (e.expandMultiple || O.value.clear(), O.value.add(l));
+    }, ye = (t) => {
+      O.value.delete(t[e.trackBy]);
     }, o = () => {
-      z.value.clear();
-    }, i = () => z.value, r = (t, a) => {
+      v.value?.forEach((t) => {
+        O.value.add(t[e.trackBy]);
+      });
+    }, i = () => {
+      O.value.clear();
+    }, u = () => O.value, w = (t, l) => {
       if (e.selectable) {
-        if (a !== void 0 && (A.value = a), t.selected)
+        if (l !== void 0 && (A.value = l), t.selected)
           E.value.push(t);
         else {
-          const n = E.value.findIndex((h) => h[e.trackBy] === t[e.trackBy]);
+          const n = E.value.findIndex((f) => f[e.trackBy] === t[e.trackBy]);
           n !== -1 && E.value.splice(n, 1);
         }
         U("dsg-table:rows-selected", E.value);
       }
-    }, w = (t, a, n) => {
+    }, D = (t, l, 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];
+        const f = Math.min(A.value, n), c = Math.max(A.value, n), S = !l.selected;
+        for (let K = f; K <= c; K++) {
+          if (K === A.value) continue;
+          const de = v.value?.[K];
           if (de) {
             const Be = de.selected;
-            if (de.selected = x, x && !Be)
+            if (de.selected = S, S && !Be)
               E.value.push(de);
-            else if (!x && Be) {
-              const Fe = E.value.findIndex((dt) => dt[e.trackBy] === de[e.trackBy]);
+            else if (!S && Be) {
+              const Fe = E.value.findIndex((rt) => rt[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);
+        A.value = n, j.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) => {
+      e.selectable && (v.value?.forEach((t) => {
+        t.selected = !0;
+      }), E.value = v.value?.filter((t) => t.selected) ?? [], A.value = null, U("dsg-table:rows-selected", E.value));
+    }, Ye = () => {
+      e.selectable && (v.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;
+      v.value = Array.isArray(t) ? t : [], e.selectable && (A.value = null, v.value.forEach((l) => {
+        l.selected = l.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 = () => ({
+    }, Ge = () => v.value ?? [], Je = (t) => {
+      t === "prev" ? x.value > e.firstPage && x.value-- : t === "next" ? x.value < (H.value?.last_page ?? 0) && x.value++ : t != x.value && t >= e.firstPage && t <= (H.value?.last_page ?? 0) && (x.value = t), ee();
+    }, Xe = () => ({
       [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?.page]: x.value,
       [e.queryParams?.perPage]: ue.value
     }), Se = () => {
-      S.value && (S.value.abort(), S.value = null);
-    }, Xe = (t, a) => {
+      p.value && (p.value.abort(), p.value = null);
+    }, Ze = (t, l) => {
       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);
+      const n = V.value, f = new AbortController();
+      return l.signal = f.signal, p.value = f, (e.httpMethod.toLowerCase() === "get" ? Ue.get(t, l) : (() => {
+        const S = l.params;
+        return delete l.params, Ue.post(t, S, l);
       })()).then(
-        (x) => ({ ...x, _requestId: n, _apiUrl: t }),
-        (x) => {
-          throw x.name === "AbortError" || x.code === "ERR_CANCELED" ? { ...x, _requestId: n, _cancelled: !0 } : { ...x, _requestId: n };
+        (S) => ({ ...S, _requestId: n, _apiUrl: t }),
+        (S) => {
+          throw S.name === "AbortError" || S.code === "ERR_CANCELED" ? { ...S, _requestId: n, _cancelled: !0 } : { ...S, _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) => {
+      const l = e.transform ? e.transform(t.data) : t.data;
+      v.value = pe(l, e.dataPath, null), e.selectable && (A.value = null, v.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(
+      })), H.value = pe(l, e.paginationPath, null) ?? null, T.value = v.value?.length ? v.value[0].order : T, !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;
+      ), p.value = null, U("dsg-table:pagination-data", H.value), H.value && x.value > (H.value?.last_page || 0) && v.value?.length === 0 && (x.value = e.initialPage, ee()), U("dsg-table:loaded"), R.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);
+      t._requestId && t._requestId !== V.value || t._apiUrl && t._apiUrl !== e.apiUrl || t._cancelled || (console.error("load-error", t), p.value = null, U("dsg-table:load-error", t), U("dsg-table:loaded"), R.value = !1);
     }, $e = () => {
       if (e.data !== null && Array.isArray(e.data)) {
-        ve(e.data), P.value = !1;
+        ve(e.data), R.value = !1;
         return;
       }
       if (e.dataManager && typeof e.dataManager == "function") {
         const t = e.dataManager();
-        ve(t), P.value = !1;
+        ve(t), R.value = !1;
       } else
-        ve(e.data), P.value = !1;
-    }, ee = (t = Ce, a = xe, n = {}) => {
-      const h = t || Ce, u = a || xe;
+        ve(e.data), R.value = !1;
+    }, ee = (t = Ce, l = xe, n = {}) => {
+      const f = t || Ce, c = l || xe;
       if (!e.apiMode) {
         $e();
         return;
       }
-      return P.value = !0, U("dsg-table:loading", P.value), e.httpOptions.params = {
-        ...Je(),
+      return R.value = !0, U("dsg-table:loading", R.value), e.httpOptions.params = {
+        ...Xe(),
         ...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) => {
+      }, Ze(e.apiUrl, e.httpOptions).then(f).catch((S) => c(S));
+    }, _e = (t, l, n) => {
+      U("dsg-table:row-clicked", t, l, n);
+    }, et = (t, l, n) => {
+      U("dsg-table:row-dblclick", t, l, n);
+    }, tt = (t, l, n) => {
+    }, at = (t, l, n, f) => {
+    }, lt = (t, l, n, f) => {
+    }, nt = (t, l, n, f) => {
+    }, st = (t, l, n) => {
     }, Te = (t) => {
       t.key === "Shift" && (G.value = !0);
     }, Re = (t) => {
-      t.key === "Shift" && (G.value = !1, Q.value = null);
+      t.key === "Shift" && (G.value = !1, j.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)
+      G.value = !1, j.value = null;
+    }, ot = (t) => {
+      e.selectable && G.value && A.value !== null && (j.value = t);
+    }, it = () => {
+      j.value = null;
+    }, dt = (t) => {
+      if (!e.selectable || !G.value || A.value === null || j.value === null)
         return !1;
-      const a = Math.min(A.value, Q.value), n = Math.max(A.value, Q.value);
-      return t >= a && t <= n;
+      const l = Math.min(A.value, j.value), n = Math.max(A.value, j.value);
+      return t >= l && t <= n;
     };
     qe(() => {
       e.apiMode === !0 ? ee() : $e(), e.selectable && (document.addEventListener("keydown", Te), document.addEventListener("keyup", Re), window.addEventListener("blur", Me));
@@ -748,156 +751,163 @@ You can explicitly suppress this warning by setting pagination-path="".`
       e.apiMode && (E.value = [], Se(), ee());
     };
     return F({
-      changePage: Ge,
+      changePage: Je,
       reload: Ee,
-      getData: Ye,
+      getData: Ge,
       setData: ve,
       setLoading: (t) => {
-        P.value = t, U("dsg-table:loading", P.value);
+        R.value = t, U("dsg-table:loading", R.value);
       },
-      expandRow: me,
-      collapseRow: ge,
+      expandRow: ge,
+      collapseRow: ye,
       toggleRowExpand: ce,
-      expandAllRows: ye,
-      collapseAllRows: o,
-      getExpandedRows: i,
+      expandAllRows: o,
+      collapseAllRows: i,
+      getExpandedRows: u,
       isRowExpanded: J
-    }), (t, a) => (s(), d("div", {
-      class: B(["dsg-table--wrapper", { "dsg-table--shift-active": e.selectable && G.value }]),
+    }), (t, l) => (s(), d("div", {
+      class: B(["dsg-table-component", { "dsg-table-component--shift-active": e.selectable && G.value }]),
       style: te(fe.value)
     }, [
-      D("div", {
+      k("div", {
         ref: "dsgTableBodyWrapper",
-        class: B(["dsg-table-body-wrapper", { "fixed-header": Z.value }]),
+        class: B(["dsg-table-component__body-wrapper", { "dsg-table-component__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])
+        k("table", {
+          class: B([
+            "dsg-table-component__main",
+            Z.value ? "dsg-table-component__main--fixed-header" : "",
+            "dsg-table-component__main--" + e.tableLayout,
+            a.value.table
+          ])
         }, [
-          D("colgroup", { span: _.value }, [
-            (s(!0), d(I, null, Y(v.value, (n, h) => (s(), d(I, null, [
+          k("colgroup", { span: _.value }, [
+            (s(!0), d(I, null, Q(b.value, (n, f) => (s(), d(I, null, [
               n?.visible ? (s(), d("col", {
-                key: h,
+                key: f,
                 style: te({ width: n.width || void 0 }),
-                class: B("dsg-table--col-" + n.name + " " + n.titleClass)
-              }, null, 6)) : p("", !0)
+                class: B("dsg-table-component__col-" + n.name + " " + n.titleClass)
+              }, null, 6)) : m("", !0)
             ], 64))), 256)),
-            !Z.value && m.value ? (s(), d("col", {
+            !Z.value && h.value ? (s(), d("col", {
               key: 0,
-              style: te({ width: T.value }),
-              class: "dsg-table--col-gutter"
-            }, null, 4)) : p("", !0)
+              style: te({ width: C.value }),
+              class: "dsg-table-component__col-gutter"
+            }, null, 4)) : m("", !0)
           ], 8, ea),
-          D("thead", {
-            class: B([[l.value.thead, { sticky: Z.value, "top-0": Z.value }], "dsg-table--head"])
+          k("thead", {
+            class: B([[a.value.thead, { sticky: Z.value, "top-0": Z.value }], "dsg-table-component__head"])
           }, [
-            M(t.$slots, "tableHeader", { fields: v.value }, () => [
+            M(t.$slots, "tableHeader", { fields: b.value }, () => [
               q(Qe, {
-                fields: v.value,
+                fields: b.value,
                 "has-select-all": e.selectable,
                 "selected-rows": E.value,
-                "onUpdate:selectedRows": a[0] || (a[0] = (n) => E.value = n),
+                "onUpdate:selectedRows": l[0] || (l[0] = (n) => E.value = n),
                 "has-selected": ie.value,
-                "onUpdate:hasSelected": a[1] || (a[1] = (n) => ie.value = n),
-                "scroll-visible": m.value,
+                "onUpdate:hasSelected": l[1] || (l[1] = (n) => ie.value = n),
+                "scroll-visible": h.value,
                 "show-expand-detail": e.hasDetailRow && e.showExpandDetail,
-                "table-data-length": b.value?.length,
+                "table-data-length": v.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
+                "onUpdate:sortField": l[2] || (l[2] = (n) => y.value = n),
+                "onDsgTable:sortField": l[3] || (l[3] = (n) => Ee()),
+                "onDsgTable:onSelectAll": ke,
+                "onDsgTable:onDeselectAll": Ye
               }, 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])
+          k("tbody", {
+            class: B(["dsg-table-component__body", a.value.tbody])
           }, [
-            P.value ? (s(), d("tr", ta, [
-              D("td", { colspan: _.value }, [
-                D("div", {
+            R.value ? (s(), d("tr", ta, [
+              k("td", { colspan: _.value }, [
+                k("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, {
+                    q(W, {
                       icon: "loading-02",
                       class: "animate-spin"
                     }),
-                    a[5] || (a[5] = D("span", { class: "text-xs font-medium text-gray-500" }, "Loading...", -1))
+                    l[5] || (l[5] = k("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())
+            ])) : (s(!0), d(I, { key: 1 }, Q(v.value, (n, f) => (s(), d(I, {
+              key: be(n, f)
+            }, [
+              k("tr", {
+                class: B(["dsg-table-component__row", [me(n, f), { "dsg-table-component__row--shift-range": e.selectable && dt(f) }]]),
+                onClick: (c) => _e(c, f, n),
+                onDblclick: (c) => et(c, f, n),
+                onMouseover: (c) => tt(),
+                onMouseenter: (c) => ot(f),
+                onMouseleave: l[4] || (l[4] = (c) => it())
               }, [
                 e.selectable ? (s(), d("td", {
                   key: 0,
-                  class: "dsg-table--tbody-cell dsg-table--tbody-cell-checkbox",
-                  onClickCapture: (u) => w(u, n, h)
+                  class: "dsg-table-component__cell dsg-table-component__cell--checkbox",
+                  onClickCapture: (c) => D(c, n, f)
                 }, [
                   q(Ve, {
                     modelValue: n.selected,
-                    "onUpdate:modelValue": [(u) => n.selected = u, (u) => r(n, h)]
+                    "onUpdate:modelValue": [(c) => n.selected = c, (c) => w(n, f)]
                   }, null, 8, ["modelValue", "onUpdate:modelValue"])
-                ], 40, sa)) : p("", !0),
+                ], 40, sa)) : m("", !0),
                 e.hasDetailRow && e.expandableRows ? (s(), d("td", oa, [
-                  D("button", {
+                  k("button", {
                     type: "button",
-                    class: B(["dsg-table--expand-toggle", { "is-expanded": J(n) }]),
+                    class: B(["dsg-table-component__expand-toggle", { "dsg-table-component__expand-toggle--expanded": J(n) }]),
                     "aria-expanded": J(n),
                     "aria-label": "Toggle row details",
-                    onClick: vt((u) => ce(n, h), ["stop"])
+                    onClick: vt((c) => ce(n, f), ["stop"])
                   }, [
-                    q(O, {
+                    q(W, {
                       icon: "chevron-right",
                       size: "sm",
-                      class: "dsg-table--expand-icon"
+                      class: "dsg-table-component__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", {
+                ])) : m("", !0),
+                (s(!0), d(I, null, Q(b.value, (c, S) => (s(), d(I, { key: S }, [
+                  c.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()
+                    class: B(["dsg-table-component__cell", c.dataClass]),
+                    style: te({ width: c.width || void 0 }),
+                    onClick: (K) => at(),
+                    onDblclick: (K) => lt(),
+                    onContextmenu: (K) => nt()
                   }, [
-                    M(t.$slots, he(u), {
+                    M(t.$slots, we(c), {
                       rowData: n,
-                      rowIndex: h,
-                      rowField: u
+                      rowIndex: f,
+                      rowField: c
                     }, () => [
-                      D("span", {
-                        innerHTML: be(u, n)
+                      k("span", {
+                        innerHTML: he(c, n)
                       }, null, 8, ra)
                     ])
-                  ], 46, da)) : p("", !0)
+                  ], 46, da)) : m("", !0)
                 ], 64))), 128))
               ], 42, na),
-              e.hasDetailRow && (!e.expandableRows || J(n)) ? (s(), W(ft, {
+              e.hasDetailRow && (!e.expandableRows || J(n)) ? (s(), N(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()
+                  k("tr", {
+                    class: B(["dsg-table-component__detail", { "dsg-table-component__detail--expanded": e.expandableRows && J(n) }]),
+                    onClick: (c) => st()
                   }, [
-                    D("td", { colspan: _.value }, [
+                    k("td", { colspan: _.value }, [
                       M(t.$slots, "dsg-table-detail-row", {
                         rowData: n,
-                        rowIndex: h,
+                        rowIndex: f,
                         options: e.detailRowOptions,
                         isExpanded: e.expandableRows ? J(n) : !0
                       })
@@ -905,23 +915,23 @@ You can explicitly suppress this warning by setting pagination-path="".`
                   ], 10, ua)
                 ]),
                 _: 2
-              }, 1032, ["name"])) : p("", !0)
+              }, 1032, ["name"])) : m("", !0)
             ], 64))), 128)),
-            !P.value && !b.value?.length && e.noDataTemplate.length ? (s(), d("tr", ga, [
-              D("td", {
+            !R.value && !v.value?.length && e.noDataTemplate.length ? (s(), d("tr", ga, [
+              k("td", {
                 colspan: _.value,
-                class: "dsg-table--empty-result"
+                class: "dsg-table-component__empty-result"
               }, [
                 M(t.$slots, "dsg-table-empty-result", {}, () => [
                   bt(re(e.noDataTemplate), 1)
                 ])
               ], 8, va)
-            ])) : p("", !0)
+            ])) : m("", !0)
           ], 2),
-          D("tfoot", fa, [
+          k("tfoot", fa, [
             M(t.$slots, "dsg-table-footer", {
-              fields: v.value,
-              data: b.value
+              fields: b.value,
+              data: v.value
             })
           ])
         ], 2)
@@ -930,16 +940,16 @@ You can explicitly suppress this warning by setting pagination-path="".`
   }
 }), 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 = {
+  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",
+  class: "dsg-table__search-header",
   ref: "dsgTableSearchHeaderEl"
-}, Pa = { class: "dsg-table--search-top" }, Da = {
+}, Pa = { class: "dsg-table__search-top" }, Da = {
   key: 2,
-  class: "dsg-table--footer",
+  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({
+}, 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: {},
@@ -981,117 +991,117 @@ You can explicitly suppress this warning by setting pagination-path="".`
     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 = () => {
+  setup(e, { expose: F, emit: g }) {
+    const r = (o) => {
+      R.value = o;
+    }, $ = P(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(",");
+            const u = i.key.replace("filter[", "").replace("]", ""), w = i.value;
+            o[`filter[${u}]`] = w.join(",");
           }
         }), o;
       } else
         return {};
-    }, v = N(() => ({
+    }, b = z(() => ({
       ...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);
+    })), v = ht(), H = P(!0), x = P(null), C = P("<p>Showing {from} to {to} of {total}</p>"), h = P(null), a = Ie("dsgTable"), T = P({ perPage: e.perPage, change: r }), R = P(e.perPage), y = P({ ...L(), ...e.initialFilters }), p = g, V = (o) => {
+      a.value?.changePage(o);
     }, se = (o) => {
-      m.value = o;
+      h.value = o;
     }, ue = ({ data: o }) => {
-      R.value = o, S("dsg-table:data-loaded", o);
+      x.value = o, p("dsg-table:data-loaded", o);
     }, E = () => {
-      l.value?.reload();
+      a.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.value?.setLoading(o);
+    }, O = (o) => {
+      const i = a.value?.getData?.() ?? [];
+      a.value?.setData(i.map((u) => u.id === o.id ? o : u));
     }, 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));
+      const i = a.value?.getData?.() ?? [];
+      a.value?.setData([...i, o]);
+    }, j = (o) => {
+      const i = a.value?.getData?.() ?? [];
+      a.value?.setData(i.filter((u) => u.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);
+      a.value?.setData(o);
+    }, Z = () => a.value?.getData() ?? [], _ = (o) => {
+      const i = a.value?.getData() ?? [], u = o(i);
+      u && a.value?.setData(u);
     }, fe = (o) => {
-      l.value?.expandRow(o);
-    }, U = (o) => {
-      l.value?.collapseRow(o);
-    }, be = (o, i) => {
-      l.value?.toggleRowExpand(o, i);
+      a.value?.expandRow(o);
+    }, be = (o) => {
+      a.value?.collapseRow(o);
+    }, U = (o, i) => {
+      a.value?.toggleRowExpand(o, i);
     }, he = () => {
-      l.value?.expandAllRows();
+      a.value?.expandAllRows();
     }, we = () => {
-      l.value?.collapseAllRows();
-    }, J = () => l.value?.getExpandedRows() ?? /* @__PURE__ */ new Set(), ce = (o) => {
+      a.value?.collapseAllRows();
+    }, me = () => a.value?.getExpandedRows() ?? /* @__PURE__ */ new Set(), J = (o) => {
       y.value = o;
-    }, me = () => y.value ?? {}, ge = (o) => {
+    }, ce = () => 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) => {
+      }), p("dsg-table:term-changed", o);
+    }, ye = (o, i, u) => {
       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["filter[term]"] && (w["filter[term]"] = y.value["filter[term]"]), Object.keys(o).forEach((D) => {
+        o[D] !== null && o[D] !== void 0 && o[D] !== "" && (w[D] = o[D]);
       }), y.value = w, Le(() => {
         E();
-      }), S("dsg-table:filter-updated", y.value, i, r);
+      }), p("dsg-table:filter-updated", y.value, i, u);
     };
     return F({
       reloadTable: E,
-      updateRowTable: z,
+      updateRowTable: O,
       addRowTable: A,
-      deleteRowTable: Q,
+      deleteRowTable: j,
       setData: G,
       getData: Z,
       mutateData: _,
       termChanged: ge,
-      setFilters: ce,
-      getFilters: me,
+      setFilters: J,
+      getFilters: ce,
       setLoading: ie,
       expandRow: fe,
-      collapseRow: U,
-      toggleRowExpand: be,
+      collapseRow: be,
+      toggleRowExpand: U,
       expandAllRows: he,
       collapseAllRows: we,
-      getExpandedRows: J,
+      getExpandedRows: me,
       changePage: V
     }), (o, i) => (s(), d("div", ha, [
       e.hasHeader ? (s(), d("div", wa, [
         M(o.$slots, "dsg-table--pre-header", {}, () => [
-          D("div", ma, [
+          k("div", ma, [
             M(o.$slots, "dsg-table--page-title", {
-              data: R.value,
+              data: x.value,
               title: e.title
             }, () => [
               e.title.length > 0 ? (s(), d("h1", {
                 key: 0,
-                class: "dsg-table--title",
+                class: "dsg-table__title",
                 textContent: re(e.title)
-              }, null, 8, ya)) : p("", !0)
+              }, null, 8, ya)) : m("", !0)
             ])
           ]),
-          D("div", ka, [
-            M(o.$slots, "dsg-table--page-actions", { data: R.value })
+          k("div", ka, [
+            M(o.$slots, "dsg-table--page-actions", { data: x.value })
           ])
         ])
-      ])) : p("", !0),
+      ])) : m("", !0),
       e.displaySearch ? (s(), d("div", pa, [
-        D("div", Pa, [
-          M(o.$slots, "dsg-table--search-header", { data: R.value }, () => [
-            q(Ke, {
+        k("div", Pa, [
+          M(o.$slots, "dsg-table--search-header", { data: x.value }, () => [
+            q(je, {
               name: "term",
-              "onDsgTable:termChanged": i[0] || (i[0] = (r) => ge(r))
+              "onDsgTable:termChanged": i[0] || (i[0] = (u) => ge(u))
             }),
             q(Oe, {
               entity: e.filterEntity,
@@ -1099,20 +1109,20 @@ You can explicitly suppress this warning by setting pagination-path="".`
               "search-endpoint": e.filterSearchEndpoint,
               "auto-sort": e.autoSortFilters,
               filters: e.filters,
-              "onDsgTable:filterUpdated": i[1] || (i[1] = (r, w, C) => ye(r, w, C))
+              "onDsgTable:filterUpdated": i[1] || (i[1] = (u, w, D) => ye(u, w, D))
             }, 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-actions", { data: x.value })
           ])
         ]),
         M(o.$slots, "dsg-table--search-navigation")
-      ], 512)) : p("", !0),
+      ], 512)) : m("", !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),
+        "onUpdate:filterParams": i[7] || (i[7] = (u) => y.value = u),
+        "per-page": R.value,
+        "onUpdate:perPage": i[8] || (i[8] = (u) => R.value = u),
         fields: e.fields,
         "load-on-start": e.loadOnStart,
         "pagination-path": e.paginationPath,
@@ -1121,7 +1131,7 @@ You can explicitly suppress this warning by setting pagination-path="".`
         "selected-row-highlight": e.selectedRowHighlight,
         "track-by": e.trackBy,
         "table-layout": e.tableLayout,
-        css: v.value,
+        css: b.value,
         data: e.data,
         "row-class": e.rowClass,
         "api-mode": $.value,
@@ -1133,114 +1143,114 @@ You can explicitly suppress this warning by setting pagination-path="".`
         "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:loading": i[9] || (i[9] = (u) => H.value = !0),
+        "onDsgTable:loaded": i[10] || (i[10] = (u) => 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))
+        "onDsgTable:rowsSelected": i[11] || (i[11] = (u) => p("dsg-table:rows-selected", u)),
+        "onDsgTable:rowClicked": i[12] || (i[12] = (u, w, D) => p("dsg-table:row-clicked", u, w, D)),
+        "onDsgTable:rowHover": i[13] || (i[13] = (u, w, D) => p("dsg-table:row-hover", u, w, D)),
+        "onDsgTable:rowDblclick": i[14] || (i[14] = (u, w, D) => p("dsg-table:row-dblclick", u, w, D)),
+        "onDsgTable:rowExpanded": i[15] || (i[15] = (u, w) => p("dsg-table:row-expanded", u, w)),
+        "onDsgTable:rowCollapsed": i[16] || (i[16] = (u, w) => p("dsg-table:row-collapsed", u, 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))
+        "dsg-field--actions": ne((u) => [
+          M(o.$slots, "dsg-table-actions", { data: u }, () => [
+            (s(), N(Ke, {
+              key: u.rowData?.[e.trackBy] ?? u.rowIndex,
+              data: u,
+              "onDsgTable:actionEdit": i[2] || (i[2] = (w, D) => p("dsg-table:action-edit", w, D)),
+              "onDsgTable:actionView": i[3] || (i[3] = (w, D) => p("dsg-table:action-view", w, D)),
+              "onDsgTable:actionDelete": i[4] || (i[4] = (w, D) => p("dsg-table:action-delete", w, D)),
+              "onDsgTable:actionArchive": i[5] || (i[5] = (w, D) => p("dsg-table:action-archive", w, D)),
+              "onDsgTable:linkClicked": i[6] || (i[6] = (w, D, ke) => p("dsg-table:link-clicked", w, D, ke))
             }, null, 8, ["data"]))
           ])
         ]),
         _: 2
       }, [
-        Y(K(b), (r, w) => ({
+        Q(Y(v), (u, w) => ({
           name: w,
-          fn: ne((C) => [
-            String(w) !== "dsg-field--actions" ? M(o.$slots, w, mt(Pe({ key: 0 }, C))) : p("", !0)
+          fn: ne((D) => [
+            String(w) !== "dsg-field--actions" ? M(o.$slots, w, mt(Pe({ key: 0 }, D))) : m("", !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, [
+        k("div", Sa, [
           M(o.$slots, "dsg-table--footer-left", {
-            data: m.value,
-            perPage: g.value
+            data: h.value,
+            perPage: T.value
           }, () => [
-            e.displayPaginationInfo ? (s(), W(Ne, {
+            e.displayPaginationInfo ? (s(), N(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),
+              pagination: h.value,
+              "onUpdate:pagination": i[17] || (i[17] = (u) => h.value = u),
+              "info-template": C.value
+            }, null, 8, ["pagination", "info-template"])) : m("", !0),
             M(o.$slots, "dsg-table--footer-left-extras", {
-              data: m.value,
-              perPage: g.value
+              data: h.value,
+              perPage: T.value
             })
           ])
         ]),
-        D("div", Ca, [
+        k("div", Ca, [
           M(o.$slots, "dsg-table--footer-center", {
-            data: m.value,
-            perPage: g.value
+            data: h.value,
+            perPage: T.value
           }, () => [
             M(o.$slots, "dsg-table--footer-center-extras", {
-              data: m.value,
-              perPage: g.value
+              data: h.value,
+              perPage: T.value
             })
           ])
         ]),
-        D("div", xa, [
+        k("div", xa, [
           M(o.$slots, "dsg-table--footer-right", {
-            data: m.value,
-            perPage: g.value
+            data: h.value,
+            perPage: T.value
           }, () => [
-            H.value === !1 && e.displayPaginationInfo ? (s(), W(We, {
+            H.value === !1 && e.displayPaginationInfo ? (s(), N(We, {
               key: 0,
               ref: "pagination",
-              pagination: m.value,
-              "onUpdate:pagination": i[18] || (i[18] = (r) => m.value = r),
+              pagination: h.value,
+              "onUpdate:pagination": i[18] || (i[18] = (u) => h.value = u),
               "onDsgTable:changePage": V
-            }, null, 8, ["pagination"])) : p("", !0),
+            }, null, 8, ["pagination"])) : m("", !0),
             M(o.$slots, "dsg-table--footer-right-extras", {
-              data: m.value,
-              perPage: g.value
+              data: h.value,
+              perPage: T.value
             })
           ])
         ])
-      ], 512)) : p("", !0)
+      ], 512)) : m("", !0)
     ]));
   }
-}), Ta = { class: "dsg-table--per-page" }, Ra = ["value", "textContent"], Ma = /* @__PURE__ */ X({
+}), Ta = { class: "dsg-table-per-page" }, Ra = ["value", "textContent"], Ma = /* @__PURE__ */ X({
   __name: "DsgTablePerPage",
   props: {
     perPageOptions: { default: () => [10, 20, 30, 50, 100] },
     perPage: {}
   },
   setup(e) {
-    return (F, f) => (s(), d("div", Ta, [
-      De(D("select", {
-        "onUpdate:modelValue": f[0] || (f[0] = (c) => e.perPage.perPage = c),
-        class: "dsg-table--per-page-select",
-        onChange: f[1] || (f[1] = (c) => e.perPage.change(e.perPage.perPage))
+    return (F, g) => (s(), d("div", Ta, [
+      De(k("select", {
+        "onUpdate:modelValue": g[0] || (g[0] = (r) => e.perPage.perPage = r),
+        class: "dsg-table-per-page__select",
+        onChange: g[1] || (g[1] = (r) => e.perPage.change(e.perPage.perPage))
       }, [
-        (s(!0), d(I, null, Y(e.perPageOptions, (c) => (s(), d("option", {
-          key: c,
-          value: c,
-          textContent: re(c)
+        (s(!0), d(I, null, Q(e.perPageOptions, (r) => (s(), d("option", {
+          key: r,
+          value: r,
+          textContent: re(r)
         }, null, 8, Ra))), 128))
       ], 544), [
         [yt, e.perPage.perPage]
       ])
     ]));
   }
-}), Ea = $a, Ba = je, Fa = Ma, La = Oe, Ha = We, Ua = Ne, Aa = Ke, Ia = Qe, ja = {
+}), Ea = $a, Ba = Ke, Fa = Ma, La = Oe, Ha = We, Ua = Ne, Aa = je, Ia = Qe, Ka = {
   DsgTable: Ea,
   DsgTableActions: Ba,
   DsgTablePerPage: Fa,
@@ -1259,5 +1269,5 @@ export {
   Fa as DsgTablePerPage,
   Ia as DsgTableRowHeader,
   Aa as DsgTableSearch,
-  ja as default
+  Ka as default
 };