@robuust-digital/vue-components 2.0.0 → 2.1.0

package/dist/core/index.js

@@ -1,10 +1,10 @@
-import { createElementBlock as l, openBlock as a, createElementVNode as c, Fragment as S, renderList as V, renderSlot as g, createTextVNode as P, toDisplayString as m, createVNode as x, unref as $, normalizeClass as y, createBlock as w, resolveDynamicComponent as C, withCtx as O, createCommentVNode as h, computed as B, useAttrs as N, ref as A, withDirectives as M, mergeProps as b, vModelDynamic as q, normalizeProps as D, guardReactiveProps as z, vModelSelect as E, vModelText as R } from "vue";
+import { createElementBlock as l, openBlock as a, createElementVNode as d, Fragment as k, renderList as V, renderSlot as c, createTextVNode as T, toDisplayString as f, createVNode as C, unref as h, normalizeClass as y, createBlock as w, resolveDynamicComponent as x, withCtx as O, createCommentVNode as $, computed as B, useAttrs as N, ref as A, withDirectives as M, mergeProps as p, vModelDynamic as q, normalizeProps as D, guardReactiveProps as z, vModelSelect as E, vModelText as R } from "vue";
 import { r as U } from "../_shared/XMarkIcon-90mcPzBs.js";
 import { r as Z } from "../_shared/ChevronDownIcon-z-5U4fIb.js";
-import { _ as Ee } from "../_shared/ChevronDownIcon-z-5U4fIb.js";
-import { _ as Ue } from "../_shared/ButtonBase-DfkwHIhN.js";
-import { u as j } from "../_shared/FormInput-C5LjZViC.js";
-import { _ as Ke } from "../_shared/FormInput-C5LjZViC.js";
+import { _ as Re } from "../_shared/ChevronDownIcon-z-5U4fIb.js";
+import { _ as Ze } from "../_shared/ButtonBase-DfkwHIhN.js";
+import { u as j } from "../_shared/FormInput-B-SQTZTA.js";
+import { _ as Ge } from "../_shared/FormInput-B-SQTZTA.js";
 import { S as K } from "../_shared/icon-spinner-CmxIOqaK.js";
 function G(e, u) {
   return a(), l("svg", {
@@ -14,7 +14,7 @@ function G(e, u) {
     "aria-hidden": "true",
     "data-slot": "icon"
   }, [
-    c("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z",
       "clip-rule": "evenodd"
@@ -29,14 +29,14 @@ function J(e, u) {
     "aria-hidden": "true",
     "data-slot": "icon"
   }, [
-    c("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z",
       "clip-rule": "evenodd"
     })
   ]);
 }
-const Q = { class: "rvc-accordion" }, W = ["open", "name"], X = ["innerHTML"], Oe = {
+const Q = { class: "rvc-accordion" }, W = ["open", "name"], X = ["innerHTML"], Me = {
   __name: "Accordion",
   props: {
     items: {
@@ -59,35 +59,35 @@ const Q = { class: "rvc-accordion" }, W = ["open", "name"], X = ["innerHTML"], O
   },
   setup(e) {
     return (u, r) => (a(), l("div", Q, [
-      (a(!0), l(S, null, V(e.items, (d, i) => (a(), l("details", {
-        key: i,
-        open: e.defaultOpenIndex === i,
+      (a(!0), l(k, null, V(e.items, (v, o) => (a(), l("details", {
+        key: o,
+        open: e.defaultOpenIndex === o,
         name: e.name
       }, [
-        c("summary", null, [
-          g(u.$slots, "summary", {
-            item: d,
-            index: i
+        d("summary", null, [
+          c(u.$slots, "summary", {
+            item: v,
+            index: o
           }, () => [
-            P(m(d.title) + " ", 1),
-            g(u.$slots, "icon", { classList: "rvc-accordion-icon" }, () => [
-              x($(J), { class: "rvc-accordion-icon" })
+            T(f(v.title) + " ", 1),
+            c(u.$slots, "icon", { classList: "rvc-accordion-icon" }, () => [
+              C(h(J), { class: "rvc-accordion-icon" })
             ])
           ])
         ]),
-        c("div", {
+        d("div", {
           class: y(["rvc-accordion-content", e.contentClass])
         }, [
-          g(u.$slots, "content", { item: d }, () => [
-            c("div", {
-              innerHTML: d.content
+          c(u.$slots, "content", { item: v }, () => [
+            d("div", {
+              innerHTML: v.content
             }, null, 8, X)
           ])
         ], 2)
       ], 8, W))), 128))
     ]));
   }
-}, Y = { class: "rvc-alert-title" }, Me = {
+}, Y = { class: "rvc-alert-title" }, je = {
   __name: "Alert",
   props: {
     as: {
@@ -114,37 +114,40 @@ const Q = { class: "rvc-accordion" }, W = ["open", "name"], X = ["innerHTML"], O
   },
   emits: ["alert:close"],
   setup(e) {
-    return (u, r) => (a(), w(C(e.as), {
+    return (u, r) => (a(), w(x(e.as), {
       class: y(["rvc-alert", `rvc-alert-${e.type}`])
     }, {
       default: O(() => [
-        g(u.$slots, "icon", {}, () => [
-          e.icon ? (a(), w(C(e.icon), {
+        c(u.$slots, "icon", {}, () => [
+          e.icon ? (a(), w(x(e.icon), {
             key: 0,
             class: "rvc-alert-icon"
-          })) : h("", !0)
+          })) : $("", !0)
         ]),
-        c("div", null, [
-          g(u.$slots, "title", {}, () => [
-            c("span", Y, m(e.title), 1)
+        d("div", null, [
+          c(u.$slots, "title", {}, () => [
+            d("span", Y, f(e.title), 1)
           ]),
-          g(u.$slots, "default")
+          c(u.$slots, "default")
         ]),
-        g(u.$slots, "close", {}, () => [
+        c(u.$slots, "close", {}, () => [
           e.close ? (a(), l("button", {
             key: 0,
             type: "button",
             class: "rvc-alert-close",
-            onClick: r[0] || (r[0] = (d) => u.$emit("alert:close"))
+            onClick: r[0] || (r[0] = (v) => u.$emit("alert:close"))
           }, [
-            x($(U))
-          ])) : h("", !0)
+            C(h(U))
+          ])) : $("", !0)
         ])
       ]),
       _: 3
     }, 8, ["class"]));
   }
-}, _ = { class: "rvc-checkbox-input" }, ee = ["for"], je = /* @__PURE__ */ Object.assign({
+}, _ = { class: "rvc-checkbox-input" }, ee = {
+  key: 0,
+  class: "rvc-checkbox-label"
+}, Ie = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "Checkbox",
@@ -153,10 +156,6 @@ const Q = { class: "rvc-accordion" }, W = ["open", "name"], X = ["innerHTML"], O
       type: [Boolean, String, Array, Object, Number],
       default: null
     },
-    id: {
-      type: String,
-      default: null
-    },
     label: {
       type: String,
       default: ""
@@ -168,34 +167,35 @@ const Q = { class: "rvc-accordion" }, W = ["open", "name"], X = ["innerHTML"], O
   },
   emits: ["update:modelValue"],
   setup(e, { emit: u }) {
-    const r = e, d = u, i = B({
+    const r = e, v = u, o = B({
       get: () => r.modelValue,
-      set: (t) => d("update:modelValue", t)
-    }), { hasModelBinding: v } = j(), f = N(), s = B(() => ({
-      ...f,
-      id: r.id,
+      set: (t) => v("update:modelValue", t)
+    }), { hasModelBinding: g } = j(), m = N(), s = B(() => ({
+      ...m,
       type: "checkbox"
     })), n = A(null);
-    return (t, o) => (a(), l("div", {
+    return (t, i) => (a(), l("label", {
       class: y(["rvc-checkbox", e.rootClass])
     }, [
-      $(v) ? M((a(), l("input", b({ key: 0 }, s.value, {
+      h(g) ? M((a(), l("input", p({ key: 0 }, s.value, {
         ref_key: "input",
         ref: n,
-        "onUpdate:modelValue": o[0] || (o[0] = (p) => i.value = p)
+        "onUpdate:modelValue": i[0] || (i[0] = (b) => o.value = b)
       }), null, 16)), [
-        [q, i.value]
-      ]) : (a(), l("input", b({ key: 1 }, s.value, {
+        [q, o.value]
+      ]) : (a(), l("input", p({ key: 1 }, s.value, {
         ref_key: "input",
         ref: n
       }), null, 16)),
-      c("span", _, [
-        x($(G))
+      c(t.$slots, "input", {}, () => [
+        d("span", _, [
+          c(t.$slots, "icon", {}, () => [
+            C(h(G))
+          ])
+        ])
       ]),
-      c("div", null, [
-        t.$slots.default || e.label ? g(t.$slots, "default", { key: 0 }, () => [
-          c("label", { for: e.id }, m(e.label), 9, ee)
-        ]) : h("", !0)
+      c(t.$slots, "default", { label: e.label }, () => [
+        e.label ? (a(), l("span", ee, f(e.label), 1)) : $("", !0)
       ])
     ], 2));
   }
@@ -208,7 +208,7 @@ function te(e, u) {
     "aria-hidden": "true",
     "data-slot": "icon"
   }, [
-    c("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M8 14a.75.75 0 0 1-.75-.75V4.56L4.03 7.78a.75.75 0 0 1-1.06-1.06l4.5-4.5a.75.75 0 0 1 1.06 0l4.5 4.5a.75.75 0 0 1-1.06 1.06L8.75 4.56v8.69A.75.75 0 0 1 8 14Z",
       "clip-rule": "evenodd"
@@ -223,7 +223,7 @@ function ae(e, u) {
     "aria-hidden": "true",
     "data-slot": "icon"
   }, [
-    c("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z",
       "clip-rule": "evenodd"
@@ -238,14 +238,14 @@ function ne(e, u) {
     "aria-hidden": "true",
     "data-slot": "icon"
   }, [
-    c("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z",
       "clip-rule": "evenodd"
     })
   ]);
 }
-const H = /* @__PURE__ */ Object.assign({
+const le = ["value"], se = ["value"], H = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "FormSelect",
@@ -270,14 +270,26 @@ const H = /* @__PURE__ */ Object.assign({
       type: String,
       default: "base",
       validator: (e) => ["sm", "base"].includes(e)
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    optionLabel: {
+      type: String,
+      default: "name"
+    },
+    optionValue: {
+      type: String,
+      default: "id"
     }
   },
   emits: ["update:modelValue"],
   setup(e, { emit: u }) {
-    const r = e, d = u, i = B({
+    const r = e, v = u, o = B({
       get: () => r.modelValue,
-      set: (s) => d("update:modelValue", s)
-    }), { hasModelBinding: v } = j(), f = A(null);
+      set: (s) => v("update:modelValue", s)
+    }), { hasModelBinding: g } = j(), m = A(null);
     return (s, n) => (a(), l("div", {
       class: y([
         "rvc-select",
@@ -285,37 +297,47 @@ const H = /* @__PURE__ */ Object.assign({
         e.rootClass
       ])
     }, [
-      e.prefixIcon ? g(s.$slots, "prefixIcon", {
+      e.prefixIcon ? c(s.$slots, "prefixIcon", {
         key: 0,
         icon: e.prefixIcon
       }, () => [
-        (a(), w(C(e.prefixIcon), { "aria-hidden": "true" }))
-      ]) : h("", !0),
-      g(s.$slots, "select", D(z(s.$attrs)), () => [
-        $(v) ? M((a(), l("select", b({ key: 0 }, s.$attrs, {
+        (a(), w(x(e.prefixIcon), { "aria-hidden": "true" }))
+      ]) : $("", !0),
+      c(s.$slots, "select", D(z(s.$attrs)), () => [
+        h(g) ? M((a(), l("select", p({ key: 0 }, s.$attrs, {
           ref_key: "select",
-          ref: f,
-          "onUpdate:modelValue": n[0] || (n[0] = (t) => i.value = t)
+          ref: m,
+          "onUpdate:modelValue": n[0] || (n[0] = (t) => o.value = t)
         }), [
-          g(s.$slots, "default")
+          c(s.$slots, "default", {}, () => [
+            e.options.length > 0 ? (a(!0), l(k, { key: 0 }, V(e.options, (t, i) => (a(), l("option", {
+              key: `option-${i}-${t[e.optionValue]}`,
+              value: t[e.optionValue]
+            }, f(t[e.optionLabel]), 9, le))), 128)) : $("", !0)
+          ])
         ], 16)), [
-          [E, i.value]
-        ]) : (a(), l("select", b({ key: 1 }, s.$attrs, {
+          [E, o.value]
+        ]) : (a(), l("select", p({ key: 1 }, s.$attrs, {
           ref_key: "select",
-          ref: f
+          ref: m
         }), [
-          g(s.$slots, "default")
+          c(s.$slots, "default", {}, () => [
+            e.options.length > 0 ? (a(!0), l(k, { key: 0 }, V(e.options, (t, i) => (a(), l("option", {
+              key: `option-${i}-${t[e.optionValue]}`,
+              value: t[e.optionValue]
+            }, f(t[e.optionLabel]), 9, se))), 128)) : $("", !0)
+          ])
         ], 16))
       ]),
-      g(s.$slots, "icon", { icon: e.icon }, () => [
-        (a(), w(C(e.icon ?? $(Z)), { "aria-hidden": "true" }))
+      c(s.$slots, "icon", { icon: e.icon }, () => [
+        (a(), w(x(e.icon ?? h(Z)), { "aria-hidden": "true" }))
       ])
     ], 2));
   }
-}), le = {
+}), oe = {
   key: 0,
   class: "rvc-pagination"
-}, se = ["value"], ie = { class: "rvc-pagination-info" }, re = { class: "rvc-pagination-nav-list" }, oe = ["disabled", "onClick"], ue = { key: 2 }, ce = { key: 3 }, de = {
+}, ie = ["value"], re = { class: "rvc-pagination-info" }, ue = { class: "rvc-pagination-nav-list" }, ce = ["disabled", "onClick"], de = { key: 2 }, ve = { key: 3 }, ge = {
   __name: "Pagination",
   props: {
     pagination: {
@@ -341,78 +363,78 @@ const H = /* @__PURE__ */ Object.assign({
   },
   emits: ["pagination:change", "pagination:perPage"],
   setup(e, { emit: u }) {
-    const r = e, d = u, i = A(r.perPage);
-    return (v, f) => {
+    const r = e, v = u, o = A(r.perPage);
+    return (g, m) => {
       var s;
-      return (s = e.pagination) != null && s.total ? (a(), l("div", le, [
-        g(v.$slots, "perPage", b(e.pagination, { perPage: i.value }), () => [
-          x(H, {
-            modelValue: i.value,
+      return (s = e.pagination) != null && s.total ? (a(), l("div", oe, [
+        c(g.$slots, "perPage", p(e.pagination, { perPage: o.value }), () => [
+          C(H, {
+            modelValue: o.value,
             "onUpdate:modelValue": [
-              f[0] || (f[0] = (n) => i.value = n),
-              f[1] || (f[1] = (n) => d("pagination:perPage", n))
+              m[0] || (m[0] = (n) => o.value = n),
+              m[1] || (m[1] = (n) => v("pagination:perPage", n))
             ],
             size: "sm",
             "root-class": "rvc-pagination-per-page"
           }, {
             default: O(() => [
-              (a(!0), l(S, null, V(e.perPageOptions, (n) => (a(), l("option", {
+              (a(!0), l(k, null, V(e.perPageOptions, (n) => (a(), l("option", {
                 key: `pagination-items-per-page-option-${n}`,
                 value: n
-              }, m(n) + " " + m(e.perPageLabel), 9, se))), 128))
+              }, f(n) + " " + f(e.perPageLabel), 9, ie))), 128))
             ]),
             _: 1
           }, 8, ["modelValue"])
         ]),
-        g(v.$slots, "info", b(e.pagination, { fromLabel: e.fromLabel }), () => [
-          c("div", ie, m(e.pagination.from) + " - " + m(e.pagination.to) + " " + m(e.fromLabel) + " " + m(e.pagination.total), 1)
+        c(g.$slots, "info", p(e.pagination, { fromLabel: e.fromLabel }), () => [
+          d("div", re, f(e.pagination.from) + " - " + f(e.pagination.to) + " " + f(e.fromLabel) + " " + f(e.pagination.total), 1)
         ]),
-        c("nav", null, [
-          c("ol", re, [
-            (a(!0), l(S, null, V(e.pagination.links, (n, t) => (a(), l("li", {
+        d("nav", null, [
+          d("ol", ue, [
+            (a(!0), l(k, null, V(e.pagination.links, (n, t) => (a(), l("li", {
               key: `pagination-link-${n.label}-${t}`,
               class: "rvc-pagination-nav-list-item"
             }, [
-              c("button", {
+              d("button", {
                 type: "button",
                 disabled: n.label === "..." || !n.url,
                 class: y([
                   "rvc-pagination-button",
                   { "rvc-pagination-button-active": n.active }
                 ]),
-                onClick: (o) => n.url && d("pagination:change", n.url)
+                onClick: (i) => n.url && v("pagination:change", n.url)
               }, [
-                n.url !== "..." && t === 0 ? (a(), w($(ae), {
+                n.url !== "..." && t === 0 ? (a(), w(h(ae), {
                   key: 0,
                   "aria-hidden": "true",
                   class: y([
                     "rvc-pagination-button-icon",
                     { "rvc-pagination-button-icon-disabled": !n.url }
                   ])
-                }, null, 8, ["class"])) : n.label !== "..." && t === e.pagination.links.length - 1 ? (a(), w($(ne), {
+                }, null, 8, ["class"])) : n.label !== "..." && t === e.pagination.links.length - 1 ? (a(), w(h(ne), {
                   key: 1,
                   "aria-hidden": "true",
                   class: y([
                     "rvc-pagination-button-icon",
                     { "rvc-pagination-button-icon-disabled": !n.url }
                   ])
-                }, null, 8, ["class"])) : n.label === "..." ? (a(), l("span", ue, " ... ")) : (a(), l("span", ce, m(n.label), 1))
-              ], 10, oe)
+                }, null, 8, ["class"])) : n.label === "..." ? (a(), l("span", de, " ... ")) : (a(), l("span", ve, f(n.label), 1))
+              ], 10, ce)
             ]))), 128))
           ])
         ])
-      ])) : h("", !0);
+      ])) : $("", !0);
     };
   }
-}, ve = { key: 0 }, ge = ["aria-label", "onClick"], fe = ["innerHTML"], me = { key: 1 }, pe = ["colspan"], ye = { key: 2 }, be = ["colspan"], $e = { class: "rvc-table-spinner-wrapper" }, Ie = {
+}, fe = { key: 0 }, me = ["aria-label", "onClick"], be = ["innerHTML"], ye = { key: 1 }, pe = ["colspan"], $e = { key: 2 }, he = ["colspan"], ke = { class: "rvc-table-spinner-wrapper" }, Se = { key: 1 }, Fe = {
   __name: "DataTable",
   props: {
     headers: {
       type: Array,
       default: () => [],
       validator: (e) => e.every((r) => {
-        const d = !r.align || ["left", "center", "right"].includes(r.align), v = !(r.sortable === !0) || typeof r.key == "string" && r.key.length > 0;
-        return v || console.warn("[DataTable] Header item with sortable=true is missing required 'key' property:", r), !d && r.align && console.warn("[DataTable] Header item has invalid 'align' value. Must be 'left', 'center' or 'right':", r), d && v;
+        const v = !r.align || ["left", "center", "right"].includes(r.align), g = !(r.sortable === !0) || typeof r.key == "string" && r.key.length > 0;
+        return g || console.warn("[DataTable] Header item with sortable=true is missing required 'key' property:", r), !v && r.align && console.warn("[DataTable] Header item has invalid 'align' value. Must be 'left', 'center' or 'right':", r), v && g;
       })
     },
     items: {
@@ -440,36 +462,41 @@ const H = /* @__PURE__ */ Object.assign({
     wrapperClass: {
       type: String,
       default: ""
+    },
+    defaultSort: {
+      type: Object,
+      default: null,
+      validator: (e) => e === null ? !0 : typeof e != "object" || !e.key || !["asc", "desc"].includes(e.direction) ? (console.warn("[DataTable] Invalid defaultSort prop. Must be an object with key and direction properties."), !1) : !0
     }
   },
   emits: ["table:sortBy", "pagination:change", "pagination:perPage"],
   setup(e, { emit: u }) {
-    const r = e, d = u, i = A(null), v = (s) => r.headers.find((n) => n.key === s), f = (s) => {
-      !i.value || i.value.key !== s.key ? i.value = {
+    const r = e, v = u, o = A(r.defaultSort), g = (s) => r.headers.find((n) => n.key === s), m = (s) => {
+      !o.value || o.value.key !== s.key ? o.value = {
         key: s.key,
         direction: "asc"
-      } : i.value.direction === "asc" ? i.value = {
+      } : o.value.direction === "asc" ? o.value = {
         key: s.key,
         direction: "desc"
-      } : i.value = null, d("table:sortBy", i.value);
+      } : o.value = null, v("table:sortBy", o.value);
     };
     return (s, n) => (a(), l("div", null, [
-      c("div", {
+      d("div", {
         class: y(["rvc-table-wrapper", e.wrapperClass])
       }, [
-        c("table", {
+        d("table", {
           class: y([{ "rvc-table-striped": e.striped }, "rvc-table"])
         }, [
-          e.headers.length ? (a(), l("thead", ve, [
-            g(s.$slots, "headers", { headers: e.headers }, () => [
-              c("tr", null, [
-                (a(!0), l(S, null, V(e.headers, (t, o) => g(s.$slots, "header", {
+          e.headers.length ? (a(), l("thead", fe, [
+            c(s.$slots, "headers", { headers: e.headers }, () => [
+              d("tr", null, [
+                (a(!0), l(k, null, V(e.headers, (t, i) => c(s.$slots, "header", {
                   header: t,
-                  index: o
+                  index: i
                 }, () => {
-                  var p, k;
+                  var b, S;
                   return [
-                    (a(), l("th", b({ ref_for: !0 }, t, {
+                    (a(), l("th", p({ ref_for: !0 }, t, {
                       key: `rvc-table-header-${t.id}`,
                       class: {
                         "rvc-table-text-left": t.align === "left" || !t.align,
@@ -488,107 +515,113 @@ const H = /* @__PURE__ */ Object.assign({
                             "rvc-table-sort-button-right": t.align === "right"
                           }
                         ]),
-                        onClick: (T) => f(t)
+                        onClick: (L) => m(t)
                       }, [
-                        g(s.$slots, "header-label", {
-                          sortBy: i.value,
+                        c(s.$slots, "header-label", {
+                          sortBy: o.value,
                           header: t
                         }, () => [
-                          P(m(t.label), 1)
+                          T(f(t.label), 1)
                         ]),
-                        x($(te), {
+                        C(h(te), {
                           class: y([
                             "rvc-table-sort-icon",
                             {
-                              "rvc-table-sort-icon-visible": ((p = i.value) == null ? void 0 : p.key) === t.key,
-                              "rvc-table-sort-icon-invisible": !i.value || i.value.key !== t.key,
-                              "rvc-table-sort-icon-rotated": ((k = i.value) == null ? void 0 : k.key) === t.key && i.value.direction === "desc"
+                              "rvc-table-sort-icon-visible": ((b = o.value) == null ? void 0 : b.key) === t.key,
+                              "rvc-table-sort-icon-invisible": !o.value || o.value.key !== t.key,
+                              "rvc-table-sort-icon-rotated": ((S = o.value) == null ? void 0 : S.key) === t.key && o.value.direction === "desc"
                             }
                           ])
                         }, null, 8, ["class"])
-                      ], 10, ge)) : g(s.$slots, "header-label", {
+                      ], 10, me)) : c(s.$slots, "header-label", {
                         key: 1,
-                        sortBy: i.value,
+                        sortBy: o.value,
                         header: t
                       }, () => [
-                        P(m(t.label), 1)
+                        T(f(t.label), 1)
                       ])
                     ], 16))
                   ];
                 })), 256))
               ])
             ])
-          ])) : h("", !0),
-          c("tbody", null, [
-            e.items.length && !e.spinning ? (a(!0), l(S, { key: 0 }, V(e.items, (t, o) => g(s.$slots, "items", {
+          ])) : $("", !0),
+          d("tbody", null, [
+            e.items.length && !e.spinning ? (a(!0), l(k, { key: 0 }, V(e.items, (t, i) => c(s.$slots, "items", {
               item: t,
-              index: o
+              index: i
             }, () => [
               (a(), l("tr", {
-                key: `rvc-table-row-${o}-${t.id}`
+                key: `rvc-table-row-${i}-${t.id}`
               }, [
-                g(s.$slots, "item", {
+                c(s.$slots, "item", {
                   item: t,
-                  index: o
+                  index: i
                 }, () => [
-                  (a(!0), l(S, null, V(t, (p, k) => {
-                    var T, L, I, F;
-                    return a(), l("td", b({
-                      key: `rvc-table-row-${o}-column-${k}-${t.id}`
+                  (a(!0), l(k, null, V(t, (b, S) => {
+                    var L, P, I, F;
+                    return a(), l("td", p({
+                      key: `rvc-table-row-${i}-column-${S}-${t.id}`
                     }, { ref_for: !0 }, t.attrs, {
                       class: {
-                        "rvc-table-text-left": ((T = v(k)) == null ? void 0 : T.align) === "left" || !((L = v(k)) != null && L.align),
-                        "rvc-table-text-center": ((I = v(k)) == null ? void 0 : I.align) === "center",
-                        "rvc-table-text-right": ((F = v(k)) == null ? void 0 : F.align) === "right"
+                        "rvc-table-text-left": ((L = g(S)) == null ? void 0 : L.align) === "left" || !((P = g(S)) != null && P.align),
+                        "rvc-table-text-center": ((I = g(S)) == null ? void 0 : I.align) === "center",
+                        "rvc-table-text-right": ((F = g(S)) == null ? void 0 : F.align) === "right"
                       },
-                      innerHTML: p
-                    }), null, 16, fe);
+                      innerHTML: b
+                    }), null, 16, be);
                   }), 128))
                 ])
               ]))
-            ])), 256)) : !e.items.length && !e.spinning ? (a(), l("tr", me, [
-              c("td", {
+            ])), 256)) : !e.items.length && !e.spinning ? (a(), l("tr", ye, [
+              d("td", {
                 colspan: e.headers.length,
                 class: "rvc-table-state"
               }, [
-                c("p", null, m(e.noResultsText), 1)
+                d("p", null, f(e.noResultsText), 1)
               ], 8, pe)
-            ])) : (a(), l("tr", ye, [
-              c("td", {
+            ])) : (a(), l("tr", $e, [
+              d("td", {
                 colspan: e.headers.length,
                 class: "rvc-table-state"
               }, [
-                g(s.$slots, "spinner", {
+                c(s.$slots, "spinner", {
                   spinning: e.spinning,
                   label: e.loadingText
                 }, () => [
-                  c("div", $e, [
-                    e.spinning ? (a(), w($(K), {
+                  d("div", ke, [
+                    e.spinning ? (a(), w(h(K), {
                       key: 0,
                       "aria-hidden": "true",
                       class: "rvc-table-spinner"
-                    })) : h("", !0),
-                    P(" " + m(e.loadingText), 1)
+                    })) : $("", !0),
+                    T(" " + f(e.loadingText), 1)
                   ])
                 ])
-              ], 8, be)
+              ], 8, he)
             ]))
-          ])
+          ]),
+          s.$slots.footer ? (a(), l("tfoot", Se, [
+            c(s.$slots, "footer", {
+              headers: e.headers,
+              items: e.items
+            })
+          ])) : $("", !0)
         ], 2)
       ], 2),
-      e.pagination ? g(s.$slots, "pagination", D(b({ key: 0 }, e.pagination)), () => [
-        x(de, {
+      e.pagination ? c(s.$slots, "pagination", D(p({ key: 0 }, e.pagination)), () => [
+        C(ge, {
           pagination: e.pagination,
-          "onPagination:change": n[0] || (n[0] = (t) => d("pagination:change", t)),
-          "onPagination:perPage": n[1] || (n[1] = (t) => d("pagination:perPage", t))
+          "onPagination:change": n[0] || (n[0] = (t) => v("pagination:change", t)),
+          "onPagination:perPage": n[1] || (n[1] = (t) => v("pagination:perPage", t))
         }, null, 8, ["pagination"])
-      ]) : h("", !0)
+      ]) : $("", !0)
     ]));
   }
-}, he = {
+}, Ve = {
   key: 1,
   class: "rvc-empty-state-title"
-}, Fe = {
+}, Ne = {
   __name: "EmptyState",
   props: {
     title: {
@@ -609,15 +642,15 @@ const H = /* @__PURE__ */ Object.assign({
     return (u, r) => (a(), l("div", {
       class: y(["rvc-empty-state", { "rvc-empty-state-bg": e.background }])
     }, [
-      e.icon ? (a(), w(C(e.icon), {
+      e.icon ? (a(), w(x(e.icon), {
         key: 0,
         class: "rvc-empty-state-icon"
-      })) : h("", !0),
-      e.title ? (a(), l("p", he, m(e.title), 1)) : h("", !0),
-      g(u.$slots, "default")
+      })) : $("", !0),
+      e.title ? (a(), l("p", Ve, f(e.title), 1)) : $("", !0),
+      c(u.$slots, "default")
     ], 2));
   }
-}, Ne = {
+}, qe = {
   __name: "FormTextarea",
   props: {
     modelValue: {
@@ -632,29 +665,29 @@ const H = /* @__PURE__ */ Object.assign({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: u }) {
-    const r = e, d = u, { hasModelBinding: i } = j(), v = A(null), f = B({
+    const r = e, v = u, { hasModelBinding: o } = j(), g = A(null), m = B({
       get: () => r.modelValue,
-      set: (n) => d("update:modelValue", n)
+      set: (n) => v("update:modelValue", n)
     }), s = B(() => [
       "rvc-textarea",
       `rvc-textarea-${r.size}`
     ]);
-    return (n, t) => $(i) ? M((a(), l("textarea", {
+    return (n, t) => h(o) ? M((a(), l("textarea", {
       key: 0,
       ref_key: "textarea",
-      ref: v,
-      "onUpdate:modelValue": t[0] || (t[0] = (o) => f.value = o),
+      ref: g,
+      "onUpdate:modelValue": t[0] || (t[0] = (i) => m.value = i),
       class: y(s.value)
     }, null, 2)), [
-      [R, f.value]
+      [R, m.value]
     ]) : (a(), l("textarea", {
       key: 1,
       ref_key: "textarea",
-      ref: v,
+      ref: g,
       class: y(s.value)
     }, null, 2));
   }
-}, ke = { class: "rvc-radio" }, Se = ["id"], we = { key: 2 }, Ve = ["for"], qe = /* @__PURE__ */ Object.assign({
+}, we = { class: "rvc-radio" }, Be = { class: "rvc-radio-label" }, De = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "Radio",
@@ -663,10 +696,6 @@ const H = /* @__PURE__ */ Object.assign({
       type: [Boolean, String, Array, Object, Number],
       default: null
     },
-    id: {
-      type: String,
-      default: null
-    },
     label: {
       type: String,
       default: ""
@@ -674,35 +703,33 @@ const H = /* @__PURE__ */ Object.assign({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: u }) {
-    const r = e, d = u, i = B({
+    const r = e, v = u, o = B({
       get: () => r.modelValue,
-      set: (t) => d("update:modelValue", t)
-    }), { hasModelBinding: v } = j(), f = N(), s = B(() => ({
-      ...f,
-      id: r.id,
+      set: (t) => v("update:modelValue", t)
+    }), { hasModelBinding: g } = j(), m = N(), s = B(() => ({
+      ...m,
       type: "radio"
     })), n = A(null);
-    return (t, o) => (a(), l("div", ke, [
-      $(v) ? M((a(), l("input", b({ key: 0 }, s.value, {
-        id: e.id,
+    return (t, i) => (a(), l("label", we, [
+      h(g) ? M((a(), l("input", p({ key: 0 }, s.value, {
         ref_key: "input",
         ref: n,
-        "onUpdate:modelValue": o[0] || (o[0] = (p) => i.value = p)
-      }), null, 16, Se)), [
-        [q, i.value]
-      ]) : (a(), l("input", b({ key: 1 }, s.value, {
+        "onUpdate:modelValue": i[0] || (i[0] = (b) => o.value = b)
+      }), null, 16)), [
+        [q, o.value]
+      ]) : (a(), l("input", p({ key: 1 }, s.value, {
         ref_key: "input",
         ref: n
       }), null, 16)),
-      o[1] || (o[1] = c("span", { class: "rvc-radio-input" }, null, -1)),
-      t.$slots.default || e.label ? (a(), l("span", we, [
-        g(t.$slots, "default", {}, () => [
-          c("label", { for: e.id }, m(e.label), 9, Ve)
-        ])
-      ])) : h("", !0)
+      c(t.$slots, "input", {}, () => [
+        i[1] || (i[1] = d("span", { class: "rvc-radio-input" }, null, -1))
+      ]),
+      c(t.$slots, "default", {}, () => [
+        d("span", Be, f(e.label), 1)
+      ])
     ]));
   }
-}), Be = { class: "rvc-tabs-nav" }, xe = ["value", "selected"], De = /* @__PURE__ */ Object.assign({
+}), Ce = { class: "rvc-tabs-nav" }, xe = ["value", "selected"], He = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "Tabs",
@@ -724,60 +751,60 @@ const H = /* @__PURE__ */ Object.assign({
   },
   emits: ["update:modelValue", "tabs:change"],
   setup(e, { emit: u }) {
-    const r = e, d = u, i = () => {
+    const r = e, v = u, o = () => {
       const n = r.tabs.findIndex((t) => t.active);
       return n >= 0 ? n : 0;
-    }, v = B({
-      get: () => r.modelValue ?? i(),
+    }, g = B({
+      get: () => r.modelValue ?? o(),
       set: (n) => {
         const t = r.tabs[n];
-        d("update:modelValue", n), d("tabs:change", t);
+        v("update:modelValue", n), v("tabs:change", t);
       }
-    }), f = (n) => {
+    }), m = (n) => {
       const t = +n.target.value;
-      v.value = t;
-      const o = r.tabs[t];
-      o != null && o.selectEvent && o.selectEvent();
+      g.value = t;
+      const i = r.tabs[t];
+      i != null && i.selectEvent && i.selectEvent();
     }, s = (n) => {
       const {
         active: t,
-        as: o,
-        bindAs: p,
-        selectEvent: k,
-        name: T,
-        ...L
+        as: i,
+        bindAs: b,
+        selectEvent: S,
+        name: L,
+        ...P
       } = n;
-      return L;
+      return P;
     };
-    return (n, t) => (a(), l(S, null, [
-      c("div", b(n.$attrs, {
+    return (n, t) => (a(), l(k, null, [
+      d("div", p(n.$attrs, {
         class: ["rvc-tabs", { "rvc-tabs-buttons": e.tabStyle === "buttons" }]
       }), [
-        c("nav", Be, [
-          (a(!0), l(S, null, V(e.tabs, (o, p) => (a(), w(C(o.as ? o.as : "button"), b({ ref_for: !0 }, s(o), {
-            key: `${p}-tab-item`,
-            as: o.bindAs ? o.bindAs : void 0,
-            class: ["rvc-tab", { "rvc-tab-active": v.value === p }],
-            onClick: (k) => v.value = p
+        d("nav", Ce, [
+          (a(!0), l(k, null, V(e.tabs, (i, b) => (a(), w(x(i.as ? i.as : "button"), p({ ref_for: !0 }, s(i), {
+            key: `${b}-tab-item`,
+            as: i.bindAs ? i.bindAs : void 0,
+            class: ["rvc-tab", { "rvc-tab-active": g.value === b }],
+            onClick: (S) => g.value = b
           }), {
             default: O(() => [
-              P(m(o.name), 1)
+              T(f(i.name), 1)
             ]),
             _: 2
           }, 1040, ["as", "class", "onClick"]))), 128))
         ])
       ], 16),
-      x(H, b(n.$attrs, {
+      C(H, p(n.$attrs, {
         "root-class": "rvc-tabs-select",
-        value: v.value,
-        onChange: f
+        value: g.value,
+        onChange: m
       }), {
         default: O(() => [
-          (a(!0), l(S, null, V(e.tabs, (o, p) => (a(), l("option", {
-            key: `${p}-tab-item-select-option`,
-            value: p,
-            selected: v.value === p
-          }, m(o.name), 9, xe))), 128))
+          (a(!0), l(k, null, V(e.tabs, (i, b) => (a(), l("option", {
+            key: `${b}-tab-item-select-option`,
+            value: b,
+            selected: g.value === b
+          }, f(i.name), 9, xe))), 128))
         ]),
         _: 1
       }, 16, ["value"])
@@ -785,17 +812,17 @@ const H = /* @__PURE__ */ Object.assign({
   }
 });
 export {
-  Oe as Accordion,
-  Me as Alert,
-  Ee as Badge,
-  Ue as ButtonBase,
-  je as Checkbox,
-  Ie as DataTable,
-  Fe as EmptyState,
-  Ke as FormInput,
+  Me as Accordion,
+  je as Alert,
+  Re as Badge,
+  Ze as ButtonBase,
+  Ie as Checkbox,
+  Fe as DataTable,
+  Ne as EmptyState,
+  Ge as FormInput,
   H as FormSelect,
-  Ne as FormTextarea,
-  de as Pagination,
-  qe as Radio,
-  De as Tabs
+  qe as FormTextarea,
+  ge as Pagination,
+  De as Radio,
+  He as Tabs
 };