@dcodegroup-au/dsg-vue 0.1.40 → 1.0.1-next.1

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 { _ 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-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 },
@@ -28,7 +28,7 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
       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"]),
+        class: B(["dsg-table-pagination__link", { "dsg-table-pagination__link--disabled": v.value }]),
         disabled: v.value,
         title: "First",
         "aria-label": "First"
@@ -40,7 +40,7 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
       ], 10, Tt)) : p("", !0),
       D("a", {
         onClick: y[1] || (y[1] = (S) => l("prev")),
-        class: B([[v.value ? "disabled" : ""], "dsg-table--pagination-link"]),
+        class: B(["dsg-table-pagination__link", { "dsg-table-pagination__link--disabled": v.value }]),
         disabled: v.value,
         title: "Previous",
         "aria-label": "Previous"
@@ -53,17 +53,17 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
       H.value ? (s(!0), d(I, { key: 1 }, Y($.value, (S, V) => (s(), d("a", {
         key: V,
         onClick: (se) => l(V + e.firstPage),
-        class: B([[g(V + e.firstPage) ? "active" : ""], "dsg-table--pagination-link"]),
+        class: B(["dsg-table-pagination__link", { "dsg-table-pagination__link--active": g(V + e.firstPage) }]),
         innerHTML: S
       }, null, 10, Mt))), 128)) : (s(!0), d(I, { key: 2 }, Y(R.value, (S, V) => (s(), d("a", {
         key: V,
         onClick: (se) => l(T.value + V + e.firstPage - 1),
-        class: B([[g(T.value + V + e.firstPage - 1) ? "active" : ""], "dsg-table--pagination-link"]),
+        class: B(["dsg-table-pagination__link", { "dsg-table-pagination__link--active": g(T.value + V + e.firstPage - 1) }]),
         innerHTML: T.value + S - 1
       }, null, 10, Et))), 128)),
       D("a", {
         onClick: y[2] || (y[2] = (S) => l("next")),
-        class: B([[b.value ? "disabled" : ""], "dsg-table--pagination-link"]),
+        class: B(["dsg-table-pagination__link", { "dsg-table-pagination__link--disabled": b.value }]),
         disabled: b.value,
         title: "Next",
         "aria-label": "Next"
@@ -76,7 +76,7 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
       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"]),
+        class: B(["dsg-table-pagination__link", { "dsg-table-pagination__link--disabled": b.value }]),
         disabled: b.value,
         title: "Last",
         "aria-label": "Last"
@@ -103,16 +103,16 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
   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",
+      class: "dsg-table-pagination-info",
       innerHTML: f.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"
+  class: "dsg-table-actions__menu-wrapper"
 }, It = ["href", "target", "onClick"], qt = ["textContent"], Vt = { key: 0 }, zt = { key: 1 }, Ot = ["href", "target", "onClick"], Wt = { class: "flex-1" }, je = /* @__PURE__ */ X({
   __name: "DsgTableActions",
   props: {
@@ -161,7 +161,7 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
         "handle-resize": !0,
         strategy: "absolute",
         shown: f.value,
-        class: "dsg-table--actions__popper",
+        class: "dsg-table-actions__popper",
         onHide: l[1] || (l[1] = (g) => f.value = !1),
         ref: "floatingVueFilterDropdown"
       }, {
@@ -175,14 +175,14 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
                 onClick: (y) => H(g, String(P), y)
               }, [
                 D("div", {
-                  class: B(["dsg-table--actions-menu-item", String(P)])
+                  class: B(["dsg-table-actions__menu-item", `dsg-table-actions__menu-item--${String(P)}`])
                 }, [
                   q(O, {
                     icon: b(String(P)),
                     size: "sm"
                   }, null, 8, ["icon"]),
                   D("span", {
-                    class: "flex-1",
+                    class: "dsg-table-actions__menu-item-id",
                     textContent: re(K(St)(String(P)))
                   }, null, 8, qt)
                 ], 2)
@@ -200,7 +200,7 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
                 key: 2,
                 href: g.link,
                 target: g.target || "_self",
-                class: B(["dsg-table--actions-menu-item", g.class]),
+                class: B(["dsg-table-actions__menu-item", g.class]),
                 onClick: (P) => R(g, P)
               }, [
                 g.icon ? (s(), W(O, {
@@ -217,7 +217,7 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
           D("div", Ut, [
             D("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)
@@ -237,7 +237,7 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
       [K(pt), () => f.value = !1]
     ]);
   }
-}), Nt = { class: "dsg-table--search" }, Ke = /* @__PURE__ */ X({
+}), Nt = { class: "dsg-table-search" }, Ke = /* @__PURE__ */ X({
   __name: "DsgTableSearch",
   props: {
     name: {},
@@ -287,17 +287,17 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
       }, null, 8, ["modelValue", "name", "id", "placeholder", "disabled", "required", "readonly", "hidden"])
     ]));
   }
-}), jt = { class: "dsg-table--header-row" }, Kt = {
+}), jt = { class: "dsg-table-row-header" }, Kt = {
   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({
@@ -322,8 +322,8 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
       T,
       T + "-" + Ct(String(m?.name)),
       m.titleClass || "",
-      { sortable: m.sortable },
-      { "sort-active": f.value?.name === m.name }
+      { "dsg-table-row-header__row--sortable": m.sortable },
+      { "dsg-table-row-header__row--sort-active": f.value?.name === m.name }
     ], R = (T) => {
       T.sortable && (f.value = {
         name: String(T?.name),
@@ -346,7 +346,7 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
       (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)),
+          class: B(H("dsg-table-row-header__row", l)),
           style: te([{ width: l.width || void 0 }, l.style]),
           title: l.title + (l.sortable ? " Sort" : ""),
           id: "_" + l.name,
@@ -357,11 +357,11 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
             l.tooltip ? (s(), W(He, Pe({
               key: 0,
               ref_for: !0
-            }, l.tooltip, { class: "dsg-table--th-tooltip" }), {
+            }, l.tooltip, { class: "dsg-table-row-header__tooltip" }), {
               "dsg-tooltip--trigger": ne(() => [
                 l.title ? (s(), d("span", {
                   key: 0,
-                  class: "dsg-table--th-title",
+                  class: "dsg-table-row-header__title",
                   innerHTML: l.title
                 }, null, 8, Jt)) : p("", !0),
                 l.tooltip.icon ? (s(), W(O, {
@@ -374,7 +374,7 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
               _: 2
             }, 1040)) : l.title ? (s(), d("span", {
               key: 1,
-              class: "dsg-table--th-title",
+              class: "dsg-table-row-header__title",
               innerHTML: l.title
             }, null, 8, Xt)) : p("", !0),
             l.sortable && f.value?.name !== l.name ? (s(), W(O, {
@@ -399,10 +399,10 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
             l.tooltip ? (s(), W(He, Pe({
               key: 0,
               ref_for: !0
-            }, l.tooltip, { class: "dsg-table--th-tooltip" }), {
+            }, l.tooltip, { class: "dsg-table-row-header__tooltip" }), {
               "dsg-tooltip--trigger": ne(() => [
                 D("span", {
-                  class: "dsg-table--th-title",
+                  class: "dsg-table-row-header__title",
                   innerHTML: K(Ae)(String(l?.title))
                 }, null, 8, Zt),
                 l.tooltip.icon ? (s(), W(O, {
@@ -415,7 +415,7 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
               _: 2
             }, 1040)) : (s(), d("span", {
               key: 1,
-              class: "dsg-table--th-title",
+              class: "dsg-table-row-header__title",
               innerHTML: K(Ae)(String(l?.title))
             }, null, 8, _t))
           ], 64))
@@ -424,17 +424,17 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
       e.scrollVisible ? (s(), d("th", {
         key: 2,
         style: te({ width: L.value }),
-        class: "dsg-table--th-col-gutter"
+        class: "dsg-table-row-header__col-gutter"
       }, null, 4)) : p("", !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: () => [] },
@@ -519,9 +519,7 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
       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
-        );
+        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,
@@ -589,7 +587,7 @@ const $t = { class: "dsg-table--pagination" }, Tt = ["disabled"], Rt = ["disable
       const n = {
         odd: a % 2 === 0,
         even: a % 2 !== 0,
-        "row-selected": t.selected
+        "dsg-table-component__row--selected": t.selected
       };
       if (!e.rowClass)
         return n;
@@ -763,33 +761,38 @@ You can explicitly suppress this warning by setting pagination-path="".`
       getExpandedRows: i,
       isRowExpanded: J
     }), (t, a) => (s(), d("div", {
-      class: B(["dsg-table--wrapper", { "dsg-table--shift-active": e.selectable && G.value }]),
+      class: B(["dsg-table-component", { "dsg-table-component--shift-active": e.selectable && G.value }]),
       style: te(fe.value)
     }, [
       D("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])
+          class: B([
+            "dsg-table-component__main",
+            Z.value ? "dsg-table-component__main--fixed-header" : "",
+            "dsg-table-component__main--" + e.tableLayout,
+            l.value.table
+          ])
         }, [
           D("colgroup", { span: _.value }, [
             (s(!0), d(I, null, Y(v.value, (n, h) => (s(), d(I, null, [
               n?.visible ? (s(), d("col", {
                 key: h,
                 style: te({ width: n.width || void 0 }),
-                class: B("dsg-table--col-" + n.name + " " + n.titleClass)
+                class: B("dsg-table-component__col-" + n.name + " " + n.titleClass)
               }, null, 6)) : p("", !0)
             ], 64))), 256)),
             !Z.value && m.value ? (s(), d("col", {
               key: 0,
               style: te({ width: T.value }),
-              class: "dsg-table--col-gutter"
+              class: "dsg-table-component__col-gutter"
             }, null, 4)) : p("", !0)
           ], 8, ea),
           D("thead", {
-            class: B([[l.value.thead, { sticky: Z.value, "top-0": Z.value }], "dsg-table--head"])
+            class: B([[l.value.thead, { sticky: Z.value, "top-0": Z.value }], "dsg-table-component__head"])
           }, [
             M(t.$slots, "tableHeader", { fields: v.value }, () => [
               q(Qe, {
@@ -811,7 +814,7 @@ You can explicitly suppress this warning by setting pagination-path="".`
             ])
           ], 2),
           D("tbody", {
-            class: B(["dsg-table--body", l.value.tbody])
+            class: B(["dsg-table-component__body", l.value.tbody])
           }, [
             P.value ? (s(), d("tr", ta, [
               D("td", { colspan: _.value }, [
@@ -832,7 +835,7 @@ You can explicitly suppress this warning by setting pagination-path="".`
               ], 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) }]]),
+                class: B(["dsg-table-component__row", [we(n, h), { "dsg-table-component__row--shift-range": e.selectable && it(h) }]]),
                 onClick: (u) => Ze(u, h, n),
                 onDblclick: (u) => _e(u, h, n),
                 onMouseover: (u) => et(),
@@ -841,7 +844,7 @@ You can explicitly suppress this warning by setting pagination-path="".`
               }, [
                 e.selectable ? (s(), d("td", {
                   key: 0,
-                  class: "dsg-table--tbody-cell dsg-table--tbody-cell-checkbox",
+                  class: "dsg-table-component__cell dsg-table-component__cell--checkbox",
                   onClickCapture: (u) => w(u, n, h)
                 }, [
                   q(Ve, {
@@ -852,7 +855,7 @@ You can explicitly suppress this warning by setting pagination-path="".`
                 e.hasDetailRow && e.expandableRows ? (s(), d("td", oa, [
                   D("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"])
@@ -860,14 +863,14 @@ You can explicitly suppress this warning by setting pagination-path="".`
                     q(O, {
                       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", {
                     key: 0,
-                    class: B(["dsg-table--tbody-cell", u.dataClass]),
+                    class: B(["dsg-table-component__cell", u.dataClass]),
                     style: te({ width: u.width || void 0 }),
                     onClick: (j) => tt(),
                     onDblclick: (j) => at(),
@@ -891,7 +894,7 @@ You can explicitly suppress this warning by setting pagination-path="".`
               }, {
                 default: ne(() => [
                   D("tr", {
-                    class: B(["dsg-table--tbody-detail-row", { "is-expanded": e.expandableRows && J(n) }]),
+                    class: B(["dsg-table-component__detail", { "dsg-table-component__detail--expanded": e.expandableRows && J(n) }]),
                     onClick: (u) => nt()
                   }, [
                     D("td", { colspan: _.value }, [
@@ -910,7 +913,7 @@ You can explicitly suppress this warning by setting pagination-path="".`
             !P.value && !b.value?.length && e.noDataTemplate.length ? (s(), d("tr", ga, [
               D("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)
@@ -930,16 +933,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: {},
@@ -1076,7 +1079,7 @@ You can explicitly suppress this warning by setting pagination-path="".`
             }, () => [
               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)
             ])
@@ -1217,7 +1220,7 @@ You can explicitly suppress this warning by setting pagination-path="".`
       ], 512)) : p("", !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] },
@@ -1227,7 +1230,7 @@ You can explicitly suppress this warning by setting pagination-path="".`
     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",
+        class: "dsg-table-per-page__select",
         onChange: f[1] || (f[1] = (c) => e.perPage.change(e.perPage.perPage))
       }, [
         (s(!0), d(I, null, Y(e.perPageOptions, (c) => (s(), d("option", {

package/dist/main.d.ts

@@ -345,9 +345,9 @@ export declare const DsgCheckboxGroup: {
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: import('./main').DsgCheckboxModelType) => any;
 }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-    $slots: Partial<Record<`dsg-checkbox-group--panel-title--${string}`, (_: {
+    $slots: Partial<Record<`dsg-checkbox-group__panel-title--${string}`, (_: {
         data: import('./main').DsgCheckboxGroupOption;
-    }) => any>> & Partial<Record<`dsg-checkbox-group--panel-subtext--${string}`, (_: {}) => any>> & {
+    }) => any>> & Partial<Record<`dsg-checkbox-group__panel-subtext--${string}`, (_: {}) => any>> & {
         'dsg-checkbox-group--header'?(_: {}): any;
     };
 });
@@ -855,7 +855,6 @@ export declare const DsgDropdown: {
                 readonly theme?: import('./main').DsgAvatarTheme | undefined;
                 readonly isOnline?: boolean | undefined;
                 readonly uri?: string | undefined | undefined;
-                readonly classes?: string | undefined;
                 readonly companyLogoUri?: string | undefined | undefined;
                 readonly preventDefault?: boolean | undefined;
                 readonly title?: string | undefined;
@@ -937,7 +936,6 @@ export declare const DsgDropdown: {
                 readonly disabled?: boolean | undefined;
                 readonly iconBefore?: string | null | undefined;
                 readonly iconAfter?: string | null | undefined;
-                readonly classes?: string | undefined;
                 readonly width?: import('./main').DsgButtonWidth | undefined;
                 readonly uri?: string | null | undefined;
                 readonly targetUri?: import('./main').DsgButtonTargetUri | undefined;
@@ -1315,15 +1313,6 @@ export declare const DsgInputSelect: {
         };
     };
 });
-export declare const DsgInputDropdown: import('vue').DefineComponent<{
-    modelValue?: string;
-} & import('./main').DsgInputDropdownProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: string) => any;
-}, string, import('vue').PublicProps, Readonly<{
-    modelValue?: string;
-} & import('./main').DsgInputDropdownProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSelectElement>;
 export declare const DsgDatepicker: import('vue').DefineComponent<{
     modelValue?: import('./main').DsgDatepickerValue;
 } & import('./main').DsgDatepickerProps, {
@@ -1797,33 +1786,6 @@ export declare const DsgLabel: {
         'dsg-label-text'?(_: {}): any;
     };
 });
-export declare const DsgLink: {
-    new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./main').DsgLinkProps> & Readonly<{
-        "onLink-clicked"?: ((clickEvent: Event) => any) | undefined;
-    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-        "link-clicked": (clickEvent: Event) => any;
-    }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLAnchorElement, import('vue').ComponentProvideOptions, {
-        P: {};
-        B: {};
-        D: {};
-        C: {};
-        M: {};
-        Defaults: {};
-    }, Readonly<import('./main').DsgLinkProps> & Readonly<{
-        "onLink-clicked"?: ((clickEvent: Event) => any) | undefined;
-    }>, {}, {}, {}, {}, {}>;
-    __isFragment?: never;
-    __isTeleport?: never;
-    __isSuspense?: never;
-} & import('vue').ComponentOptionsBase<Readonly<import('./main').DsgLinkProps> & Readonly<{
-    "onLink-clicked"?: ((clickEvent: Event) => any) | undefined;
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "link-clicked": (clickEvent: Event) => any;
-}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-    $slots: {
-        'dsg-link-content'?(_: {}): any;
-    };
-});
 export declare const DsgModal: {
     new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./main').DsgModalProps> & Readonly<{
         "onBefore-open"?: (() => any) | undefined;
@@ -2854,11 +2816,9 @@ export type { DsgCheckboxGroupProps, DsgCheckboxGroupOption, DsgCheckboxGroupSiz
 export type { DsgDropdownType, DsgDropdownHeaderType, DsgDropdownAvatar, DsgDropdownMenuItem, DsgDropdownProps } from './components/Elements/DsgDropdown.vue';
 export type { DsgInputProps, DsgInputCurrencyPair, DsgInputPhoneFormat, DsgInputValidationPattern, DsgInputSize, DsgInputTheme, DsgInputTooltipTheme, DsgInputType, DsgInputWidth, } from './components/Elements/DsgInput.vue';
 export type { DsgInputSelectOption, DsgInputSelectProps } from './components/Elements/DsgInputSelect.vue';
-export type { DsgInputDropdownProps } from './components/Elements/DsgInputDropdown.vue';
 export type { DsgDatepickerType, DsgDatepickerValue, DsgDatepickerRangeConfig, DsgDatepickerSize, DsgDatepickerModelType, DsgDatepickerProps, DsgDatepickerFloatingConfig, DsgDatepickerTimeConfig, DsgDatepickerFormatsConfig, DsgUiClasses, } from './components/Elements/DsgDatepicker.vue';
 export type { DsgSliderProps, DsgSliderType, DsgSliderLabelPosition, DsgSliderValue } from './components/Elements/DsgSlider.vue';
 export type { DsgLabelProps, DsgLabelSize } from './components/Elements/DsgLabel.vue';
-export type { DsgLinkProps, DsgLinkSize, DsgLinkTargetUri } from './components/Elements/DsgLink.vue';
 export type { DsgModalProps, DsgModalType, DsgModalFooterType } from './components/Elements/DsgModal.vue';
 export type { DsgTagProps, DsgTagSize } from './components/Elements/DsgTag.vue';
 export type { DsgToggleProps, DsgToggleSize } from './components/Elements/DsgToggle.vue';
@@ -3146,9 +3106,9 @@ declare const _default: {
     }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
         "update:modelValue": (value: import('./main').DsgCheckboxModelType) => any;
     }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-        $slots: Partial<Record<`dsg-checkbox-group--panel-title--${string}`, (_: {
+        $slots: Partial<Record<`dsg-checkbox-group__panel-title--${string}`, (_: {
             data: import('./main').DsgCheckboxGroupOption;
-        }) => any>> & Partial<Record<`dsg-checkbox-group--panel-subtext--${string}`, (_: {}) => any>> & {
+        }) => any>> & Partial<Record<`dsg-checkbox-group__panel-subtext--${string}`, (_: {}) => any>> & {
             'dsg-checkbox-group--header'?(_: {}): any;
         };
     });
@@ -3656,7 +3616,6 @@ declare const _default: {
                     readonly theme?: import('./main').DsgAvatarTheme | undefined;
                     readonly isOnline?: boolean | undefined;
                     readonly uri?: string | undefined | undefined;
-                    readonly classes?: string | undefined;
                     readonly companyLogoUri?: string | undefined | undefined;
                     readonly preventDefault?: boolean | undefined;
                     readonly title?: string | undefined;
@@ -3738,7 +3697,6 @@ declare const _default: {
                     readonly disabled?: boolean | undefined;
                     readonly iconBefore?: string | null | undefined;
                     readonly iconAfter?: string | null | undefined;
-                    readonly classes?: string | undefined;
                     readonly width?: import('./main').DsgButtonWidth | undefined;
                     readonly uri?: string | null | undefined;
                     readonly targetUri?: import('./main').DsgButtonTargetUri | undefined;
@@ -4116,15 +4074,6 @@ declare const _default: {
             };
         };
     });
-    DsgInputDropdown: import('vue').DefineComponent<{
-        modelValue?: string;
-    } & import('./main').DsgInputDropdownProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-        "update:modelValue": (value: string) => any;
-    }, string, import('vue').PublicProps, Readonly<{
-        modelValue?: string;
-    } & import('./main').DsgInputDropdownProps> & Readonly<{
-        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSelectElement>;
     DsgDatepicker: import('vue').DefineComponent<{
         modelValue?: import('./main').DsgDatepickerValue;
     } & import('./main').DsgDatepickerProps, {
@@ -4598,33 +4547,6 @@ declare const _default: {
             'dsg-label-text'?(_: {}): any;
         };
     });
-    DsgLink: {
-        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./main').DsgLinkProps> & Readonly<{
-            "onLink-clicked"?: ((clickEvent: Event) => any) | undefined;
-        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-            "link-clicked": (clickEvent: Event) => any;
-        }, import('vue').PublicProps, {}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLAnchorElement, import('vue').ComponentProvideOptions, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import('./main').DsgLinkProps> & Readonly<{
-            "onLink-clicked"?: ((clickEvent: Event) => any) | undefined;
-        }>, {}, {}, {}, {}, {}>;
-        __isFragment?: never;
-        __isTeleport?: never;
-        __isSuspense?: never;
-    } & import('vue').ComponentOptionsBase<Readonly<import('./main').DsgLinkProps> & Readonly<{
-        "onLink-clicked"?: ((clickEvent: Event) => any) | undefined;
-    }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-        "link-clicked": (clickEvent: Event) => any;
-    }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
-        $slots: {
-            'dsg-link-content'?(_: {}): any;
-        };
-    });
     DsgModal: {
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./main').DsgModalProps> & Readonly<{
             "onBefore-open"?: (() => any) | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcodegroup-au/dsg-vue",
   "description": "Front-end Vue/Tailwind DSG for UntitledUI.",
-  "version": "0.1.40",
+  "version": "1.0.1-next.1",
   "type": "module",
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -135,7 +135,7 @@
     "sass": "^1.99.0",
     "semantic-release": "^24.2.9",
     "storybook": "^8.6.18",
-    "tailwindcss": "^3.4.19",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.59.2",
     "ua-parser-js": "^2.0.9",
@@ -166,5 +166,8 @@
     "overrides": {
       "axios": "1.13.6"
     }
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.2"
   }
-}
+}