@velkymx/vibeui 0.8.0 → 0.8.2

package/dist/vibeui.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as M, ref as L, onMounted as X, onBeforeUnmount as Y, watch as O, computed as h, openBlock as i, createElementBlock as s, normalizeClass as $, renderSlot as T, createTextVNode as I, toDisplayString as k, createCommentVNode as g, createBlock as q, resolveDynamicComponent as A, withCtx as j, createElementVNode as S, normalizeStyle as Z, Fragment as R, renderList as H, nextTick as se, reactive as Ce, provide as ge, unref as xe, inject as J, getCurrentInstance as ke, onUnmounted as Se, Teleport as fe, useModel as oe, withDirectives as he, vModelText as Be, vModelSelect as Le, withModifiers as le, mergeModels as pe } from "vue";
+import { defineComponent as M, ref as L, onMounted as X, onBeforeUnmount as Y, watch as O, computed as h, openBlock as i, createElementBlock as s, normalizeClass as $, renderSlot as T, createTextVNode as I, toDisplayString as k, createCommentVNode as g, createBlock as q, resolveDynamicComponent as A, withCtx as j, createElementVNode as S, normalizeStyle as Z, Fragment as R, renderList as H, nextTick as re, reactive as Ce, provide as ke, unref as xe, inject as J, getCurrentInstance as Se, onUnmounted as $e, Teleport as be, useModel as ne, withDirectives as pe, vModelText as Be, vModelSelect as Le, withModifiers as le, mergeModels as me } from "vue";
 const Te = /* @__PURE__ */ M({
   __name: "VibeAlert",
   props: {
@@ -496,10 +496,10 @@ const Te = /* @__PURE__ */ M({
         try {
           const b = (await import("bootstrap")).Tab;
           n.value.querySelectorAll('[data-bs-toggle="tab"], [data-bs-toggle="pill"]').forEach((w) => {
-            const B = w;
-            if (!o.has(B)) {
-              const C = new b(B);
-              o.set(B, C), B.addEventListener("show.bs.tab", v), B.addEventListener("shown.bs.tab", c), B.addEventListener("hide.bs.tab", m), B.addEventListener("hidden.bs.tab", f);
+            const x = w;
+            if (!o.has(x)) {
+              const C = new b(x);
+              o.set(x, C), x.addEventListener("show.bs.tab", v), x.addEventListener("shown.bs.tab", c), x.addEventListener("hide.bs.tab", m), x.addEventListener("hidden.bs.tab", f);
             }
           });
         } catch (u) {
@@ -515,7 +515,7 @@ const Te = /* @__PURE__ */ M({
         b.removeEventListener("show.bs.tab", v), b.removeEventListener("shown.bs.tab", c), b.removeEventListener("hide.bs.tab", m), b.removeEventListener("hidden.bs.tab", f), u.dispose();
       }), o.clear();
     }), O(() => a.items, async () => {
-      await se(), await V();
+      await re(), await V();
     }, { deep: !0 });
     const y = (u, b, p) => {
       u.disabled || l("item-click", { item: u, index: b, event: p });
@@ -539,16 +539,16 @@ const Te = /* @__PURE__ */ M({
               "aria-expanded": "false"
             }, k(p.text), 3),
             S("ul", et, [
-              (i(!0), s(R, null, H(p.children, (B, C) => (i(), s("li", { key: C }, [
-                B.divider ? (i(), s("hr", tt)) : B.header ? (i(), s("h6", at, k(B.text), 1)) : (i(), q(A(B.href ? "a" : B.to ? "router-link" : "button"), {
+              (i(!0), s(R, null, H(p.children, (x, C) => (i(), s("li", { key: C }, [
+                x.divider ? (i(), s("hr", tt)) : x.header ? (i(), s("h6", at, k(x.text), 1)) : (i(), q(A(x.href ? "a" : x.to ? "router-link" : "button"), {
                   key: 2,
-                  class: $(["dropdown-item", { active: B.active, disabled: B.disabled }]),
-                  href: B.href,
-                  to: B.to,
-                  type: !B.href && !B.to ? "button" : void 0
+                  class: $(["dropdown-item", { active: x.active, disabled: x.disabled }]),
+                  href: x.href,
+                  to: x.to,
+                  type: !x.href && !x.to ? "button" : void 0
                 }, {
                   default: j(() => [
-                    I(k(B.text), 1)
+                    I(k(x.text), 1)
                   ]),
                   _: 2
                 }, 1032, ["class", "href", "to", "type"]))
@@ -563,7 +563,7 @@ const Te = /* @__PURE__ */ M({
             "aria-current": p.active ? "page" : void 0,
             "data-bs-toggle": (e.tabs || e.pills) && p.href && p.href.startsWith("#") ? e.tabs ? "tab" : "pill" : void 0,
             "data-bs-target": p.href && p.href.startsWith("#") ? p.href : void 0,
-            onClick: (B) => y(p, w, B)
+            onClick: (x) => y(p, w, x)
           }, {
             default: j(() => [
               I(k(p.text), 1)
@@ -588,7 +588,7 @@ const Te = /* @__PURE__ */ M({
   emits: ["component-error"],
   setup(e, { emit: r }) {
     const t = e, a = Ce({});
-    ge("vibeNavbarCollapse", { collapseStates: a, toggleCollapse: (v) => {
+    ke("vibeNavbarCollapse", { collapseStates: a, toggleCollapse: (v) => {
       a[v] = !a[v];
     } });
     const n = h(() => {
@@ -979,10 +979,10 @@ const Te = /* @__PURE__ */ M({
     ], 4));
   }
 });
-let me = 0;
+let ye = 0;
 function G(e = "vibe") {
-  const r = ke(), t = r ? r.uid : "no-instance";
-  return me++, `${e}-${t}-${me}`;
+  const r = Se(), t = r ? r.uid : "no-instance";
+  return ye++, `${e}-${t}-${ye}`;
 }
 const Ct = ["id"], xt = { class: "accordion-header" }, Bt = ["data-bs-target", "aria-expanded", "aria-controls", "onClick"], Lt = ["id", "data-bs-parent"], Tt = { class: "accordion-body" }, Nt = /* @__PURE__ */ M({
   __name: "VibeAccordion",
@@ -1001,11 +1001,11 @@ const Ct = ["id"], xt = { class: "accordion-header" }, Bt = ["data-bs-target", "
           n.value.querySelectorAll(".accordion-collapse").forEach((p) => {
             const w = p.id;
             if (!o.has(w)) {
-              const B = new u(p, {
+              const x = new u(p, {
                 toggle: !1,
                 parent: a.alwaysOpen ? void 0 : `#${a.id}`
               });
-              o.set(w, B), p.addEventListener("show.bs.collapse", () => d(w)), p.addEventListener("shown.bs.collapse", () => v(w)), p.addEventListener("hide.bs.collapse", () => c(w)), p.addEventListener("hidden.bs.collapse", () => m(w)), a.items.find((z) => z.id === w)?.show && B.show();
+              o.set(w, x), p.addEventListener("show.bs.collapse", () => d(w)), p.addEventListener("shown.bs.collapse", () => v(w)), p.addEventListener("hide.bs.collapse", () => c(w)), p.addEventListener("hidden.bs.collapse", () => m(w)), a.items.find((z) => z.id === w)?.show && x.show();
             }
           });
         } catch (y) {
@@ -1022,7 +1022,7 @@ const Ct = ["id"], xt = { class: "accordion-header" }, Bt = ["data-bs-target", "
         b && (b.removeEventListener("show.bs.collapse", () => d(u)), b.removeEventListener("shown.bs.collapse", () => v(u)), b.removeEventListener("hide.bs.collapse", () => c(u)), b.removeEventListener("hidden.bs.collapse", () => m(u))), y.dispose();
       }), o.clear();
     }), O(() => a.items, async (y, u) => {
-      y.length !== u?.length && (await se(), await f()), y.forEach((b) => {
+      y.length !== u?.length && (await re(), await f()), y.forEach((b) => {
         const p = o.get(b.id);
         p && (b.show ? p.show() : a.alwaysOpen || p.hide());
       });
@@ -1219,14 +1219,14 @@ const Ct = ["id"], xt = { class: "accordion-header" }, Bt = ["data-bs-target", "
         class: $(c.value),
         "aria-labelledby": e.id
       }, [
-        (i(!0), s(R, null, H(e.items, (F, K) => (i(), s(R, { key: K }, [
+        (i(!0), s(R, null, H(e.items, (F, W) => (i(), s(R, { key: W }, [
           F.divider ? (i(), s("li", Ft, [...z[1] || (z[1] = [
             S("hr", { class: "dropdown-divider" }, null, -1)
           ])])) : F.header ? (i(), s("li", Pt, [
             S("h6", qt, [
               T(C.$slots, "header", {
                 item: F,
-                index: K
+                index: W
               }, () => [
                 I(k(F.text), 1)
               ])
@@ -1238,12 +1238,12 @@ const Ct = ["id"], xt = { class: "accordion-header" }, Bt = ["data-bs-target", "
               to: F.to,
               type: !F.href && !F.to ? "button" : void 0,
               disabled: F.disabled,
-              onClick: (_) => b(F, K, _)
+              onClick: (_) => b(F, W, _)
             }, {
               default: j(() => [
                 T(C.$slots, "item", {
                   item: F,
-                  index: K
+                  index: W
                 }, () => [
                   I(k(F.text), 1)
                 ])
@@ -1256,19 +1256,19 @@ const Ct = ["id"], xt = { class: "accordion-header" }, Bt = ["data-bs-target", "
     ], 2));
   }
 }), ee = [];
-function ye(e) {
+function ge(e) {
   if (ee.length > 0) {
     e.preventDefault();
     const r = ee.pop();
     r && r();
   }
 }
-function $e(e) {
+function we(e) {
   X(() => {
-    ee.push(e), ee.length === 1 && typeof document < "u" && document.addEventListener("backbutton", ye);
-  }), Se(() => {
+    ee.push(e), ee.length === 1 && typeof document < "u" && document.addEventListener("backbutton", ge);
+  }), $e(() => {
     const r = ee.indexOf(e);
-    r !== -1 && ee.splice(r, 1), ee.length === 0 && typeof document < "u" && document.removeEventListener("backbutton", ye);
+    r !== -1 && ee.splice(r, 1), ee.length === 0 && typeof document < "u" && document.removeEventListener("backbutton", ge);
   });
 }
 const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs-keyboard"], Ot = { class: "modal-content" }, Ht = {
@@ -1309,8 +1309,8 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
       if (n.value) {
         o.value && o.value.dispose();
         try {
-          const B = (await import("bootstrap")).Modal;
-          o.value = new B(n.value, {
+          const x = (await import("bootstrap")).Modal;
+          o.value = new x(n.value, {
             backdrop: a.staticBackdrop ? "static" : !0,
             keyboard: !a.staticBackdrop,
             focus: !0
@@ -1330,9 +1330,9 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
       o.value && (w && !d.value ? o.value.show() : !w && d.value && o.value.hide());
     }), O(() => a.staticBackdrop, y);
     const u = () => o.value?.show(), b = () => o.value?.hide(), p = () => o.value?.handleUpdate();
-    return $e(() => {
+    return we(() => {
       d.value && b();
-    }), r({ show: u, hide: b, handleUpdate: p, bsInstance: o }), (w, B) => (i(), q(fe, {
+    }), r({ show: u, hide: b, handleUpdate: p, bsInstance: o }), (w, x) => (i(), q(be, {
       to: e.teleport === !0 ? "body" : e.teleport || void 0,
       disabled: !e.teleport
     }, [
@@ -1430,9 +1430,9 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
       o.value && (p && !d.value ? o.value.show() : !p && d.value && o.value.hide());
     }), O([() => a.placement, () => a.backdrop, () => a.scroll], y);
     const u = () => o.value?.show(), b = () => o.value?.hide();
-    return $e(() => {
+    return we(() => {
       d.value && b();
-    }), r({ show: u, hide: b, bsInstance: o }), (p, w) => (i(), q(fe, {
+    }), r({ show: u, hide: b, bsInstance: o }), (p, w) => (i(), q(be, {
       to: e.teleport === !0 ? "body" : e.teleport || void 0,
       disabled: !e.teleport
     }, [
@@ -1489,8 +1489,8 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
       const w = ["toast"];
       return a.variant && w.push(`text-bg-${a.variant}`), w.join(" ");
     }), c = h(() => {
-      const w = ["toast-container", "position-fixed", "p-3"], B = a.placement;
-      return B.includes("top") && w.push("top-0"), B.includes("bottom") && w.push("bottom-0"), B.includes("middle") && w.push("top-50", "start-50", "translate-middle"), B.includes("start") && w.push("start-0"), B.includes("end") && w.push("end-0"), B.includes("center") && !B.includes("middle") && w.push("start-50", "translate-middle-x"), w.join(" ");
+      const w = ["toast-container", "position-fixed", "p-3"], x = a.placement;
+      return x.includes("top") && w.push("top-0"), x.includes("bottom") && w.push("bottom-0"), x.includes("middle") && w.push("top-50", "start-50", "translate-middle"), x.includes("start") && w.push("start-0"), x.includes("end") && w.push("end-0"), x.includes("center") && !x.includes("middle") && w.push("start-50", "translate-middle-x"), w.join(" ");
     }), m = () => {
       d.value = !0, l("show");
     }, f = () => {
@@ -1503,8 +1503,8 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
       if (n.value) {
         o.value && o.value.dispose();
         try {
-          const B = (await import("bootstrap")).Toast;
-          o.value = new B(n.value, {
+          const x = (await import("bootstrap")).Toast;
+          o.value = new x(n.value, {
             autohide: a.autohide,
             delay: a.delay
           }), n.value.addEventListener("show.bs.toast", m), n.value.addEventListener("shown.bs.toast", f), n.value.addEventListener("hide.bs.toast", V), n.value.addEventListener("hidden.bs.toast", y), a.modelValue && o.value.show();
@@ -1523,7 +1523,7 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
       o.value && (w && !d.value ? o.value.show() : !w && d.value && o.value.hide());
     }), O([() => a.autohide, () => a.delay], u);
     const b = () => o.value?.show(), p = () => o.value?.hide();
-    return r({ show: b, hide: p, bsInstance: o }), (w, B) => (i(), q(fe, {
+    return r({ show: b, hide: p, bsInstance: o }), (w, x) => (i(), q(be, {
       to: e.teleport === !0 ? "body" : e.teleport || void 0,
       disabled: !e.teleport
     }, [
@@ -1619,7 +1619,7 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
     }), O(() => a.modelValue, (y) => {
       o.value && y !== d.value && o.value.to(y);
     }), O(() => a.items, async () => {
-      await se(), await f();
+      await re(), await f();
     }, { deep: !0 });
     const V = (y, u) => y.alt ? y.alt : y.caption ? y.caption : y.captionText ? y.captionText : `Carousel slide ${u + 1}`;
     return r({ bsInstance: o, refresh: f }), (y, u) => (i(), s("div", {
@@ -1926,7 +1926,7 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
   class: "page-item"
 }, Ya = /* @__PURE__ */ M({
   __name: "VibeDataTable",
-  props: /* @__PURE__ */ pe({
+  props: /* @__PURE__ */ me({
     // Data
     items: { type: Array, default: () => [] },
     columns: { type: Array, required: !0 },
@@ -1966,12 +1966,12 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
     sortDesc: { type: Boolean, default: !1 },
     sortDescModifiers: {}
   }),
-  emits: /* @__PURE__ */ pe(["row-clicked", "component-error"], ["update:currentPage", "update:perPage", "update:sortBy", "update:sortDesc"]),
+  emits: /* @__PURE__ */ me(["row-clicked", "component-error"], ["update:currentPage", "update:perPage", "update:sortBy", "update:sortDesc"]),
   setup(e, { emit: r }) {
-    const t = e, a = oe(e, "currentPage"), l = oe(e, "perPage"), n = oe(e, "sortBy"), o = oe(e, "sortDesc"), d = r, v = L(""), c = L(null), m = L(""), f = (x, N) => t.rowKey && x[t.rowKey] !== void 0 ? String(x[t.rowKey]) : N;
-    O(v, (x) => {
+    const t = e, a = ne(e, "currentPage"), l = ne(e, "perPage"), n = ne(e, "sortBy"), o = ne(e, "sortDesc"), d = r, v = L(""), c = L(null), m = L(""), f = (B, N) => t.rowKey && B[t.rowKey] !== void 0 ? String(B[t.rowKey]) : N;
+    O(v, (B) => {
       c.value !== null && clearTimeout(c.value), c.value = setTimeout(() => {
-        m.value = x, a.value = 1, c.value = null;
+        m.value = B, a.value = 1, c.value = null;
       }, t.searchDebounce);
     }), Y(() => {
       c.value !== null && (clearTimeout(c.value), c.value = null);
@@ -1979,63 +1979,63 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
     const V = h(() => {
       if (!t.searchable || !m.value)
         return t.items || [];
-      const x = m.value.toLowerCase();
+      const B = m.value.toLowerCase();
       return (t.items || []).filter((N) => (t.columns || []).some((E) => {
         if (E.searchable === !1) return !1;
         const D = N[E.key];
-        return D == null ? !1 : String(D).toLowerCase().includes(x);
+        return D == null ? !1 : String(D).toLowerCase().includes(B);
       }));
-    }), y = (x, N, E) => {
-      if (x == null) return 1;
+    }), y = (B, N, E) => {
+      if (B == null) return 1;
       if (N == null) return -1;
-      if (typeof x == "string" && typeof N == "string") {
-        const D = x.toLowerCase(), U = N.toLowerCase();
+      if (typeof B == "string" && typeof N == "string") {
+        const D = B.toLowerCase(), U = N.toLowerCase();
         return D < U ? E ? 1 : -1 : D > U ? E ? -1 : 1 : 0;
       }
-      if (typeof x == "number" && typeof N == "number")
-        return x < N ? E ? 1 : -1 : x > N ? E ? -1 : 1 : 0;
-      if (typeof x == "boolean" && typeof N == "boolean")
-        return x === N ? 0 : (x ? 1 : -1) * (E ? -1 : 1);
-      if (x instanceof Date && N instanceof Date) {
-        const D = x.getTime(), U = N.getTime();
+      if (typeof B == "number" && typeof N == "number")
+        return B < N ? E ? 1 : -1 : B > N ? E ? -1 : 1 : 0;
+      if (typeof B == "boolean" && typeof N == "boolean")
+        return B === N ? 0 : (B ? 1 : -1) * (E ? -1 : 1);
+      if (B instanceof Date && N instanceof Date) {
+        const D = B.getTime(), U = N.getTime();
         return D < U ? E ? 1 : -1 : D > U ? E ? -1 : 1 : 0;
       }
       return 0;
     }, u = h(() => {
       if (!t.sortable || !n.value)
         return V.value;
-      const x = [...V.value], N = n.value;
-      return x.sort((E, D) => y(E[N], D[N], o.value)), x;
+      const B = [...V.value], N = n.value;
+      return B.sort((E, D) => y(E[N], D[N], o.value)), B;
     }), b = h(() => {
       if (!t.paginated)
         return u.value;
-      const x = (a.value - 1) * l.value, N = x + l.value;
-      return u.value.slice(x, N);
-    }), p = h(() => t.items.length), w = h(() => V.value.length), B = h(() => Math.ceil(w.value / l.value)), C = h(() => w.value === 0 ? 0 : (a.value - 1) * l.value + 1), z = h(() => {
-      const x = a.value * l.value;
-      return Math.min(x, w.value);
-    }), F = h(() => (w.value !== p.value ? t.filteredInfoText : t.infoText).replace("{start}", String(C.value)).replace("{end}", String(z.value)).replace("{total}", String(w.value)).replace("{totalRows}", String(p.value))), K = h(() => {
-      const x = ["table"];
-      return t.striped && x.push("table-striped"), t.bordered && x.push("table-bordered"), t.borderless && x.push("table-borderless"), t.hover && x.push("table-hover"), t.small && x.push("table-sm"), t.stack && x.push("vibe-table-stack"), t.variant && x.push(`table-${t.variant}`), x.join(" ");
-    }), _ = (x) => {
-      !t.sortable || x.sortable === !1 || (n.value === x.key ? o.value = !o.value : (n.value = x.key, o.value = !1));
-    }, W = (x) => {
-      x < 1 || x > B.value || (a.value = x);
-    }, P = () => {
+      const B = (a.value - 1) * l.value, N = B + l.value;
+      return u.value.slice(B, N);
+    }), p = h(() => t.items.length), w = h(() => V.value.length), x = h(() => Math.ceil(w.value / l.value)), C = h(() => w.value === 0 ? 0 : (a.value - 1) * l.value + 1), z = h(() => {
+      const B = a.value * l.value;
+      return Math.min(B, w.value);
+    }), F = h(() => (w.value !== p.value ? t.filteredInfoText : t.infoText).replace("{start}", String(C.value)).replace("{end}", String(z.value)).replace("{total}", String(w.value)).replace("{totalRows}", String(p.value))), W = h(() => {
+      const B = ["table"];
+      return t.striped && B.push("table-striped"), t.bordered && B.push("table-bordered"), t.borderless && B.push("table-borderless"), t.hover && B.push("table-hover"), t.small && B.push("table-sm"), t.stack && B.push("vibe-table-stack"), t.variant && B.push(`table-${t.variant}`), B.join(" ");
+    }), _ = (B) => {
+      !t.sortable || B.sortable === !1 || (n.value === B.key ? o.value = !o.value : (n.value = B.key, o.value = !1));
+    }, K = (B) => {
+      B < 1 || B > x.value || (a.value = B);
+    }, oe = () => {
       a.value = 1;
-    }, Q = (x, N) => {
-      d("row-clicked", x, N);
-    }, re = (x, N) => {
-      const E = x[N.key];
-      return N.formatter ? N.formatter(E, x) : E;
-    }, de = (x) => !t.sortable || x.sortable === !1 ? "" : n.value !== x.key ? "⇅" : o.value ? "↓" : "↑", Ve = (x) => {
-      const N = { ...x.thStyle };
-      return t.sortable && x.sortable !== !1 && (N.cursor = "pointer"), N;
+    }, P = (B, N) => {
+      d("row-clicked", B, N);
+    }, Q = (B, N) => {
+      const E = B[N.key];
+      return N.formatter ? N.formatter(E, B) : E;
+    }, de = (B) => !t.sortable || B.sortable === !1 ? "" : n.value !== B.key ? "⇅" : o.value ? "↓" : "↑", ue = (B) => {
+      const N = { ...B.thStyle };
+      return t.sortable && B.sortable !== !1 && (N.cursor = "pointer"), N;
     };
-    return (x, N) => (i(), s("div", wa, [
+    return (B, N) => (i(), s("div", wa, [
       S("div", Va, [
         e.searchable ? (i(), s("div", Ca, [
-          he(S("input", {
+          pe(S("input", {
             "onUpdate:modelValue": N[0] || (N[0] = (E) => v.value = E),
             type: "search",
             class: "form-control",
@@ -2047,11 +2047,11 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
         e.showPerPage && e.paginated ? (i(), s("div", Ba, [
           S("div", La, [
             N[6] || (N[6] = S("label", { class: "me-2 mb-0" }, "Show", -1)),
-            he(S("select", {
+            pe(S("select", {
               "onUpdate:modelValue": N[1] || (N[1] = (E) => l.value = E),
               class: "form-select form-select-sm",
               style: { width: "auto" },
-              onChange: P
+              onChange: oe
             }, [
               (i(!0), s(R, null, H(e.perPageOptions, (E) => (i(), s("option", {
                 key: E,
@@ -2073,14 +2073,14 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
         class: $({ "table-responsive": e.responsive })
       }, [
         S("table", {
-          class: $(K.value)
+          class: $(W.value)
         }, [
           S("thead", null, [
             S("tr", null, [
               (i(!0), s(R, null, H(e.columns, (E) => (i(), s("th", {
                 key: E.key,
                 class: $(E.headerClass),
-                style: Z(Ve(E)),
+                style: Z(ue(E)),
                 onClick: (D) => _(E)
               }, [
                 I(k(E.label) + " ", 1),
@@ -2091,7 +2091,7 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
           S("tbody", null, [
             (i(!0), s(R, null, H(b.value, (E, D) => (i(), s("tr", {
               key: f(E, D),
-              onClick: (U) => Q(E, D),
+              onClick: (U) => P(E, D),
               style: { cursor: "pointer" }
             }, [
               (i(!0), s(R, null, H(e.columns, (U) => (i(), s("td", {
@@ -2100,12 +2100,12 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
                 style: Z(U.tdStyle),
                 "data-label": U.label
               }, [
-                T(x.$slots, `cell(${U.key})`, {
+                T(B.$slots, `cell(${U.key})`, {
                   item: E,
                   value: E[U.key],
                   index: D
                 }, () => [
-                  I(k(re(E, U)), 1)
+                  I(k(Q(E, U)), 1)
                 ], !0)
               ], 14, Ia))), 128))
             ], 8, Ma))), 128)),
@@ -2122,7 +2122,7 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
         e.showInfo ? (i(), s("div", qa, [
           S("div", za, k(F.value), 1)
         ])) : g("", !0),
-        e.paginated && B.value > 1 ? (i(), s("div", Aa, [
+        e.paginated && x.value > 1 ? (i(), s("div", Aa, [
           S("nav", null, [
             S("ul", ja, [
               S("li", {
@@ -2131,20 +2131,20 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
                 S("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: N[2] || (N[2] = le((E) => W(a.value - 1), ["prevent"]))
+                  onClick: N[2] || (N[2] = le((E) => K(a.value - 1), ["prevent"]))
                 }, " Previous ")
               ], 2),
               a.value > 3 ? (i(), s("li", Oa, [
                 S("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: N[3] || (N[3] = le((E) => W(1), ["prevent"]))
+                  onClick: N[3] || (N[3] = le((E) => K(1), ["prevent"]))
                 }, "1")
               ])) : g("", !0),
               a.value > 4 ? (i(), s("li", Ha, [...N[8] || (N[8] = [
                 S("span", { class: "page-link" }, "...", -1)
               ])])) : g("", !0),
-              (i(!0), s(R, null, H(Array.from({ length: B.value }, (E, D) => D + 1).filter(
+              (i(!0), s(R, null, H(Array.from({ length: x.value }, (E, D) => D + 1).filter(
                 (E) => E >= a.value - 2 && E <= a.value + 2
               ), (E) => (i(), s("li", {
                 key: E,
@@ -2153,26 +2153,26 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
                 S("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: le((D) => W(E), ["prevent"])
+                  onClick: le((D) => K(E), ["prevent"])
                 }, k(E), 9, Da)
               ], 2))), 128)),
-              a.value < B.value - 3 ? (i(), s("li", Ga, [...N[9] || (N[9] = [
+              a.value < x.value - 3 ? (i(), s("li", Ga, [...N[9] || (N[9] = [
                 S("span", { class: "page-link" }, "...", -1)
               ])])) : g("", !0),
-              a.value < B.value - 2 ? (i(), s("li", Xa, [
+              a.value < x.value - 2 ? (i(), s("li", Xa, [
                 S("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: N[4] || (N[4] = le((E) => W(B.value), ["prevent"]))
-                }, k(B.value), 1)
+                  onClick: N[4] || (N[4] = le((E) => K(x.value), ["prevent"]))
+                }, k(x.value), 1)
               ])) : g("", !0),
               S("li", {
-                class: $(["page-item", { disabled: a.value === B.value }])
+                class: $(["page-item", { disabled: a.value === x.value }])
               }, [
                 S("a", {
                   class: "page-link",
                   href: "#",
-                  onClick: N[5] || (N[5] = le((E) => W(a.value + 1), ["prevent"]))
+                  onClick: N[5] || (N[5] = le((E) => K(a.value + 1), ["prevent"]))
                 }, " Next ")
               ], 2)
             ])
@@ -2547,7 +2547,7 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
       if (!V.value) return;
       let C = t.modelValue + t.step;
       t.max !== void 0 && C > t.max && (C = t.wrap ? t.min ?? 0 : t.max), a("update:modelValue", C), a("increment", C), t.validateOn === "change" && a("validate");
-    }, B = () => {
+    }, x = () => {
       if (!f.value) return;
       let C = t.modelValue - t.step;
       t.min !== void 0 && C < t.min && (C = t.wrap ? t.max ?? 0 : t.min), a("update:modelValue", C), a("decrement", C), t.validateOn === "change" && a("validate");
@@ -2570,7 +2570,7 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
           class: "btn btn-outline-secondary",
           type: "button",
           disabled: !f.value,
-          onClick: B,
+          onClick: x,
           "aria-label": "Decrement"
         }, [...z[0] || (z[0] = [
           S("span", { "aria-hidden": "true" }, "−", -1)
@@ -2751,8 +2751,8 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
         if (w = [...t.modelValue], p.checked)
           w.push(t.value);
         else {
-          const B = w.indexOf(t.value);
-          B > -1 && w.splice(B, 1);
+          const x = w.indexOf(t.value);
+          x > -1 && w.splice(x, 1);
         }
       else
         w = p.checked ? t.value : t.value === !0 ? !1 : null;
@@ -3000,7 +3000,7 @@ const jt = ["id", "aria-labelledby", "aria-hidden", "data-bs-backdrop", "data-bs
   },
   setup(e) {
     const r = e, t = h(() => r.labelFor || G("form-group")), a = L(!1);
-    ge("vibeFormGroup", {
+    ke("vibeFormGroup", {
       id: t,
       consumeId: () => a.value ? null : (a.value = !0, t.value),
       hasLabel: h(() => !!r.label),
@@ -3084,7 +3084,7 @@ function ho() {
     const f = window.matchMedia(`(min-width: ${m}px)`), V = () => {
       n();
     };
-    f.addEventListener("change", V), ke() && Se(() => f.removeEventListener("change", V));
+    f.addEventListener("change", V), Se() && $e(() => f.removeEventListener("change", V));
   }), {
     isXs: o,
     isSm: e,
@@ -3132,51 +3132,52 @@ const po = ["for"], mo = {
   },
   emits: ["update:modelValue", "validate", "blur", "focus", "change", "ready"],
   setup(e, { emit: r }) {
-    const t = e, a = r, l = J("vibeFormGroup", null), n = h(() => t.id || l?.id.value || G("wysiwyg")), { isMobile: o } = ho(), d = h(() => !!t.label && !l?.hasLabel.value), v = h(() => !!t.validationState && !l?.hasValidation.value), c = h(() => !!t.helpText && !l?.hasHelp.value), m = L(null), f = L(null), V = L(!1), y = L(null), u = L(!1), b = L(null), p = L(null), w = L(null), B = h(() => {
+    const t = e, a = r, l = J("vibeFormGroup", null), n = h(() => t.id || l?.id.value || G("wysiwyg")), { isMobile: o } = ho(), d = h(() => !!t.label && !l?.hasLabel.value), v = h(() => !!t.validationState && !l?.hasValidation.value), c = h(() => !!t.helpText && !l?.hasHelp.value), m = L(null), f = L(null), V = L(!1), y = L(null), u = L(!1), b = L(null), p = L(null), w = L(null), x = L(null), C = h(() => {
       const P = ["vibe-wysiwyg-container"];
       return t.validationState === "valid" && P.push("is-valid"), t.validationState === "invalid" && P.push("is-invalid"), t.disabled && P.push("disabled"), P.join(" ");
-    }), C = [
+    }), z = [
       [{ header: [1, 2, 3, !1] }],
       ["bold", "italic", "underline", "strike"],
       [{ list: "ordered" }, { list: "bullet" }],
       [{ color: [] }, { background: [] }],
       ["link", "image"],
       ["clean"]
-    ], z = [
+    ], F = [
       ["bold", "italic", "underline"],
       [{ list: "ordered" }, { list: "bullet" }],
       ["link", "clean"]
-    ], F = () => t.toolbar === !1 ? !1 : o.value ? t.mobileToolbar === !1 ? !1 : t.mobileToolbar !== void 0 ? t.mobileToolbar : z : t.toolbar === !0 || t.toolbar === void 0 ? C : t.toolbar, K = (P) => {
+    ], W = () => t.toolbar === !1 ? !1 : o.value ? t.mobileToolbar === !1 ? !1 : t.mobileToolbar !== void 0 ? t.mobileToolbar : F : t.toolbar === !0 || t.toolbar === void 0 ? z : t.toolbar, _ = (P) => {
       f.value && (u.value = !0, f.value.setContents([], "silent"), P && f.value.clipboard.dangerouslyPasteHTML(P, "silent"), u.value = !1);
-    }, _ = () => !f.value || f.value.getText().trim().length === 0 ? "" : f.value.getSemanticHTML(), W = async () => {
+    }, K = () => !f.value || f.value.getText().trim().length === 0 ? "" : f.value.getSemanticHTML(), oe = async () => {
       try {
         const P = await import("quill"), Q = P.default || P;
         if (await import("quill/dist/quill.snow.css"), m.value) {
-          const re = {
+          const de = {
             theme: t.theme,
             placeholder: t.placeholder,
             readOnly: t.readonly || t.disabled,
             modules: {
-              toolbar: F()
+              toolbar: W()
             }
           };
-          f.value = new Q(m.value, re), t.modelValue && K(t.modelValue), w.value = () => {
+          f.value = new Q(m.value, de), t.modelValue && _(t.modelValue), w.value = () => {
             if (u.value) return;
-            const de = _();
-            a("update:modelValue", de), a("change"), t.validateOn === "change" && a("validate");
+            const ue = K();
+            a("update:modelValue", ue), a("change"), t.validateOn === "change" && a("validate");
           }, f.value.on("text-change", w.value), b.value = () => {
             a("blur"), t.validateOn === "blur" && a("validate");
           }, f.value.root.addEventListener("blur", b.value), p.value = () => {
             a("focus");
-          }, f.value.root.addEventListener("focus", p.value), V.value = !0, a("ready", f.value);
+          }, f.value.root.addEventListener("focus", p.value), x.value = () => {
+          }, f.value.on("selection-change", x.value), V.value = !0, a("ready", f.value);
         }
       } catch (P) {
         console.error("Failed to load Quill editor:", P), y.value = "Failed to load WYSIWYG editor. Please install quill: npm install quill", V.value = !1;
       }
     };
-    return X(W), Y(() => {
+    return X(oe), Y(() => {
       if (f.value) {
-        if (w.value && (f.value.off("text-change", w.value), w.value = null), b.value && (f.value.root.removeEventListener("blur", b.value), b.value = null), p.value && (f.value.root.removeEventListener("focus", p.value), p.value = null), m.value) {
+        if (f.value.enable(!1), w.value && (f.value.off("text-change", w.value), w.value = null), x.value && (f.value.off("selection-change", x.value), x.value = null), b.value && (f.value.root.removeEventListener("blur", b.value), b.value = null), p.value && (f.value.root.removeEventListener("focus", p.value), p.value = null), f.value.selection = null, m.value) {
           const P = m.value.parentElement?.querySelector(".ql-toolbar");
           P && P.remove();
         }
@@ -3184,17 +3185,17 @@ const po = ["for"], mo = {
       }
     }), O(() => t.modelValue, (P) => {
       if (!f.value) return;
-      _() !== (P || "") && K(P || "");
+      K() !== (P || "") && _(P || "");
     }), O(() => t.disabled, (P) => {
       f.value && f.value.enable(!P);
     }), O(() => t.readonly, (P) => {
       f.value && f.value.enable(!P);
     }), O(o, async () => {
       if (f.value) {
-        const P = _();
+        const P = K();
         w.value && f.value.off("text-change", w.value), b.value && f.value.root.removeEventListener("blur", b.value), p.value && f.value.root.removeEventListener("focus", p.value);
         const Q = m.value?.parentElement?.querySelector(".ql-toolbar");
-        Q && Q.remove(), m.value && (m.value.innerHTML = ""), await se(), await W(), P && K(P);
+        Q && Q.remove(), m.value && (m.value.innerHTML = ""), await re(), await oe(), P && _(P);
       }
     }), (P, Q) => (i(), s("div", {
       class: $({ "mb-3": d.value || c.value || v.value })
@@ -3209,7 +3210,7 @@ const po = ["for"], mo = {
       ], 8, po)) : g("", !0),
       y.value ? (i(), s("div", yo, k(y.value), 1)) : (i(), s("div", {
         key: 2,
-        class: $(B.value),
+        class: $(C.value),
         style: Z({ minHeight: e.height })
       }, [
         S("div", {
@@ -3234,7 +3235,7 @@ const po = ["for"], mo = {
       ], 64)) : g("", !0)
     ], 2));
   }
-}), Vo = /* @__PURE__ */ ae(wo, [["__scopeId", "data-v-952f7269"]]), Co = {
+}), Vo = /* @__PURE__ */ ae(wo, [["__scopeId", "data-v-822ccb91"]]), Co = {
   key: 0,
   class: "input-group-text"
 }, xo = {
@@ -3393,63 +3394,63 @@ const Io = {
   async: (e) => ({
     validator: e
   })
-}, ue = "vibe-color-mode", ce = {
+}, ce = "vibe-color-mode", ve = {
   light: "dark",
   dark: "auto",
   auto: "light"
-}, ie = L("auto");
-let ve = !1;
-const be = [];
+}, se = L("auto");
+let fe = !1;
+const he = [];
 function To() {
   return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function we(e) {
+function Ve(e) {
   if (typeof document > "u") return;
   const r = e === "auto" ? To() : e;
   document.documentElement.setAttribute("data-bs-theme", r);
 }
-function ne(e) {
-  ie.value = e, we(e), be.forEach((r) => r(e));
+function ie(e) {
+  se.value = e, Ve(e), he.forEach((r) => r(e));
 }
-ne("auto");
+ie("auto");
 typeof window < "u" && window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
-  ie.value === "auto" && (we("auto"), be.forEach((e) => e("auto")));
+  se.value === "auto" && (Ve("auto"), he.forEach((e) => e("auto")));
 });
 function Ro() {
   function e(n) {
-    if (n in ce) {
+    if (n in ve) {
       try {
-        localStorage.setItem(ue, n);
+        localStorage.setItem(ce, n);
       } catch {
       }
-      ne(n);
+      ie(n);
     }
   }
   function r() {
-    if (ve) return;
+    if (fe) return;
     let n = "auto";
     try {
-      const o = localStorage.getItem(ue);
-      o !== null && o in ce && (n = o);
+      const o = localStorage.getItem(ce);
+      o !== null && o in ve && (n = o);
     } catch {
     }
-    ne(n), ve = !0;
+    ie(n), fe = !0;
   }
   function t() {
     try {
-      localStorage.removeItem(ue);
+      localStorage.removeItem(ce);
     } catch {
     }
-    ve = !1, ne("auto");
+    fe = !1, ie("auto");
   }
   function a() {
-    e(ce[ie.value] ?? "auto");
+    e(ve[se.value] ?? "auto");
   }
   function l(n) {
-    be.push(n);
+    he.push(n);
   }
   return {
-    colorMode: ie,
+    colorMode: se,
     setColorMode: e,
     toggleColorMode: a,
     initColorMode: r,
@@ -3504,7 +3505,7 @@ export {
   oa as VibeToast,
   ya as VibeTooltip,
   Eo as default,
-  $e as useBackButton,
+  we as useBackButton,
   ho as useBreakpoints,
   Ro as useColorMode,
   Mo as useFormValidation,