monobill-mintui 0.3.24 → 0.3.26

package/dist/index.js

@@ -2570,7 +2570,7 @@ class tt extends HTMLElement {
     return this.hasAttribute("loading");
   }
   render() {
-    var b, k, E, x;
+    var b, k, x, E;
     this.getType();
     const t = this._getNormalizedType(), e = this._isTextarea(), i = this._isMoney(), s = this._isColor(), n = this.getPlaceholder(), r = this.isDisabled(), a = this.isReadonly(), l = this.isRequired(), o = this.getId(), c = this.getName(), d = this.getAttribute("value") || (s ? "#000000" : ""), p = this.getRows(), h = this.getIcon(), m = this.getLabel(), f = this.getInfo(), u = this.isLoading();
     if (this._renderSkeleton(u), s) {
@@ -2630,15 +2630,15 @@ class tt extends HTMLElement {
         const y = document.createElement("mint-icon");
         y.setAttribute("name", "caret-down"), y.className = "w-[1rem] h-[1rem]", this._numberDecrementButton.appendChild(y), this._numberSpinnerContainer.appendChild(this._numberDecrementButton), this._numberIncrementButton.addEventListener("click", (w) => {
           if (w.preventDefault(), w.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
-            const A = parseFloat(this._input.value) || 0, I = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, H = this._input.max ? parseFloat(this._input.max) : void 0;
+            const A = parseFloat(this._input.value) || 0, I = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, D = this._input.max ? parseFloat(this._input.max) : void 0;
             let L = A + I;
-            H !== void 0 && L > H && (L = H), S !== void 0 && L < S && (L = S), this._input.value = L.toString(), this.setAttribute("value", L.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
+            D !== void 0 && L > D && (L = D), S !== void 0 && L < S && (L = S), this._input.value = L.toString(), this.setAttribute("value", L.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
           }
         }), this._numberDecrementButton.addEventListener("click", (w) => {
           if (w.preventDefault(), w.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
-            const A = parseFloat(this._input.value) || 0, I = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, H = this._input.max ? parseFloat(this._input.max) : void 0;
+            const A = parseFloat(this._input.value) || 0, I = parseFloat(this._input.step) || 1, S = this._input.min ? parseFloat(this._input.min) : void 0, D = this._input.max ? parseFloat(this._input.max) : void 0;
             let L = A - I;
-            S !== void 0 && L < S && (L = S), H !== void 0 && L > H && (L = H), this._input.value = L.toString(), this.setAttribute("value", L.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
+            S !== void 0 && L < S && (L = S), D !== void 0 && L > D && (L = D), this._input.value = L.toString(), this.setAttribute("value", L.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
           }
         });
       }
@@ -2659,7 +2659,7 @@ class tt extends HTMLElement {
       let v = g.querySelector(".mint-input-label");
       if (m) {
         v || (v = document.createElement("label"), v.className = "mint-input-label text-sm font-medium text-gray-900 dark:text-gray-100 select-none", g.insertBefore(v, g.firstChild)), v.textContent = m;
-        const w = o || ((b = this._element) == null ? void 0 : b.id) || ((k = this._colorTextInput) == null ? void 0 : k.id) || ((E = this._input) == null ? void 0 : E.id) || ((x = this._textarea) == null ? void 0 : x.id);
+        const w = o || ((b = this._element) == null ? void 0 : b.id) || ((k = this._colorTextInput) == null ? void 0 : k.id) || ((x = this._input) == null ? void 0 : x.id) || ((E = this._textarea) == null ? void 0 : E.id);
         if (w)
           v.setAttribute("for", w);
         else {
@@ -2980,22 +2980,22 @@ class et extends HTMLElement {
       const u = t.split(i).filter((g) => g.length > 0), _ = e.split(/[\/\-\.\s]+/).filter((g) => g.length > 0);
       if (u.length === _.length) {
         let g = 0, b = 0, k = 0;
-        for (let E = 0; E < _.length; E++) {
-          const x = _[E].toLowerCase(), v = u[E];
-          if (x.includes("d"))
+        for (let x = 0; x < _.length; x++) {
+          const E = _[x].toLowerCase(), v = u[x];
+          if (E.includes("d"))
             g = parseInt(v, 10);
-          else if (x.includes("m"))
+          else if (E.includes("m"))
             b = parseInt(v, 10) - 1;
-          else if (x.includes("y")) {
+          else if (E.includes("y")) {
             let y = parseInt(v, 10);
-            const w = x.length, A = v.length;
+            const w = E.length, A = v.length;
             A === 2 && w === 4 ? y = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + y : A === 2 && w === 2 && (y = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + y), k = y;
           }
         }
         if (g && b >= 0 && b <= 11 && k) {
-          const E = new Date(k, b, g);
-          if (!isNaN(E.getTime()) && E.getDate() === g && E.getMonth() === b && E.getFullYear() === k)
-            return E;
+          const x = new Date(k, b, g);
+          if (!isNaN(x.getTime()) && x.getDate() === g && x.getMonth() === b && x.getFullYear() === k)
+            return x;
         }
       }
     }
@@ -3020,8 +3020,8 @@ class et extends HTMLElement {
       } else if (u.char === "y") {
         const _ = r.lastIndexOf("y") - r.indexOf("y") + 1, g = n.substr(m), b = Math.min(_, g.length), k = g.substr(0, b);
         if (k.length === 0) return null;
-        let E = parseInt(k, 10);
-        b === 2 && _ === 4 ? E = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + E : b === 2 && _ === 2 && (E = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + E), h = E, m += b;
+        let x = parseInt(k, 10);
+        b === 2 && _ === 4 ? x = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + x : b === 2 && _ === 2 && (x = Math.floor((/* @__PURE__ */ new Date()).getFullYear() / 100) * 100 + x), h = x, m += b;
       }
     if (!d || p < 0 || p > 11 || !h) return null;
     const f = new Date(h, p, d);
@@ -3114,12 +3114,12 @@ class et extends HTMLElement {
     this._startPartInputs = [], this._endPartInputs = [];
     const _ = (b) => {
       const k = document.createDocumentFragment();
-      return u.forEach((E) => {
-        if (E.type === "sep") {
-          const x = document.createElement("span");
-          x.textContent = E.value, x.className = "text-gray-400 dark:text-gray-500 select-none", k.appendChild(x);
+      return u.forEach((x) => {
+        if (x.type === "sep") {
+          const E = document.createElement("span");
+          E.textContent = x.value, E.className = "text-gray-400 dark:text-gray-500 select-none", k.appendChild(E);
         } else {
-          const x = E.part === "d" ? "dd" : E.part === "m" ? "mm" : E.len === 2 ? "yy" : "yyyy", v = this._createPartInput(E.len, x, n, r, a);
+          const E = x.part === "d" ? "dd" : x.part === "m" ? "mm" : x.len === 2 ? "yy" : "yyyy", v = this._createPartInput(x.len, E, n, r, a);
           b === "start" ? this._startPartInputs.push(v) : this._endPartInputs.push(v), k.appendChild(v);
         }
       }), k;
@@ -3325,34 +3325,34 @@ class et extends HTMLElement {
       this._currentMonth === 11 ? (this._currentMonth = 0, this._currentYear++) : this._currentMonth++, this._buildCalendar();
     }), o.appendChild(f);
     const _ = document.createElement("div");
-    _.className = "grid grid-cols-7 mb-2", s.forEach((E) => {
-      const x = document.createElement("div");
-      x.className = "text-xs font-medium text-gray-500 dark:text-gray-400 text-center py-1", x.textContent = E, _.appendChild(x);
+    _.className = "grid grid-cols-7 mb-2", s.forEach((x) => {
+      const E = document.createElement("div");
+      E.className = "text-xs font-medium text-gray-500 dark:text-gray-400 text-center py-1", E.textContent = x, _.appendChild(E);
     });
     const g = document.createElement("div");
     g.className = "grid grid-cols-7";
-    for (let E = 0; E < e; E++) {
-      const x = document.createElement("div");
-      x.className = "w-8 h-8", g.appendChild(x);
+    for (let x = 0; x < e; x++) {
+      const E = document.createElement("div");
+      E.className = "w-8 h-8", g.appendChild(E);
     }
     const b = this.getMin() ? this._parseDateString(this.getMin(), this.getFormat()) : null, k = this.getMax() ? this._parseDateString(this.getMax(), this.getFormat()) : null;
-    for (let E = 1; E <= t; E++) {
-      const x = new Date(this._currentYear, this._currentMonth, E), v = this._isToday(x), y = this._isDateSelected(x), w = this._isDateInRange(x), A = b && x < b || k && x > k;
+    for (let x = 1; x <= t; x++) {
+      const E = new Date(this._currentYear, this._currentMonth, x), v = this._isToday(E), y = this._isDateSelected(E), w = this._isDateInRange(E), A = b && E < b || k && E > k;
       let I = "rounded-md";
       if (this._isRange && this._selectedStartDate && this._selectedEndDate) {
-        const H = this._isSameDate(x, this._selectedStartDate), L = this._isSameDate(x, this._selectedEndDate);
-        H && L ? I = "rounded-md" : H ? I = "rounded-l-md" : L ? I = "rounded-r-md" : w && (I = "rounded-none");
+        const D = this._isSameDate(E, this._selectedStartDate), L = this._isSameDate(E, this._selectedEndDate);
+        D && L ? I = "rounded-md" : D ? I = "rounded-l-md" : L ? I = "rounded-r-md" : w && (I = "rounded-none");
       } else y && !this._isRange && (I = "rounded-md");
       const S = document.createElement("button");
-      S.type = "button", S.disabled = !!A, S.tabIndex = A ? -1 : 0, S.className = `w-full h-8 ${I} border-0 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${y ? "bg-slate-800 dark:bg-slate-600 text-white" : w ? "bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : v ? "text-gray-900 dark:text-gray-100 font-semibold" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"} ${A ? "opacity-40 cursor-not-allowed" : ""}`, S.textContent = E.toString(), A || S.addEventListener("click", () => {
-        this._handleDateClick(x);
+      S.type = "button", S.disabled = !!A, S.tabIndex = A ? -1 : 0, S.className = `w-full h-8 ${I} border-0 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500 ${y ? "bg-slate-800 dark:bg-slate-600 text-white" : w ? "bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : v ? "text-gray-900 dark:text-gray-100 font-semibold" : "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700"} ${A ? "opacity-40 cursor-not-allowed" : ""}`, S.textContent = x.toString(), A || S.addEventListener("click", () => {
+        this._handleDateClick(E);
       }), g.appendChild(S);
     }
     if (r) {
-      const E = document.createElement("div");
-      E.className = "mb-4 pb-4 border-b border-gray-200 dark:border-gray-700 md:mb-0 md:pb-0 md:border-b-0 md:border-r md:border-r-gray-200 dark:md:border-r-gray-700 md:pr-6 md:mr-0 md:w-32 md:flex-shrink-0 md:h-full md:flex md:flex-col";
       const x = document.createElement("div");
-      x.className = "relative md:relative md:flex-1 md:min-h-0";
+      x.className = "mb-4 pb-4 border-b border-gray-200 dark:border-gray-700 md:mb-0 md:pb-0 md:border-b-0 md:border-r md:border-r-gray-200 dark:md:border-r-gray-700 md:pr-6 md:mr-0 md:w-32 md:flex-shrink-0 md:h-full md:flex md:flex-col";
+      const E = document.createElement("div");
+      E.className = "relative md:relative md:flex-1 md:min-h-0";
       const v = document.createElement("div");
       v.className = "flex gap-2 overflow-x-auto pb-1 md:flex-col md:overflow-x-visible md:overflow-y-auto md:pb-0 md:gap-2", v.style.scrollbarWidth = "none", v.style.msOverflowStyle = "none", v.style.setProperty("-webkit-overflow-scrolling", "touch");
       const y = document.createElement("style");
@@ -3382,25 +3382,25 @@ class et extends HTMLElement {
         }
       `, v.classList.add("mint-date-shortcuts-row"), document.head.querySelector("style[data-mint-date-shortcuts]") || (y.setAttribute("data-mint-date-shortcuts", "true"), document.head.appendChild(y));
       const w = document.createElement("div");
-      w.className = "absolute left-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-r from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200 md:hidden", x.appendChild(w);
+      w.className = "absolute left-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-r from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200 md:hidden", E.appendChild(w);
       const A = document.createElement("div");
-      A.className = "absolute right-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-l from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200 md:hidden", x.appendChild(A);
+      A.className = "absolute right-0 top-0 bottom-0 w-8 pointer-events-none z-10 bg-gradient-to-l from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200 md:hidden", E.appendChild(A);
       const I = document.createElement("div");
-      I.className = "hidden md:block absolute top-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-b from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200", x.appendChild(I);
+      I.className = "hidden md:block absolute top-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-b from-white dark:from-gray-800 to-transparent opacity-0 transition-opacity duration-200", E.appendChild(I);
       const S = document.createElement("div");
-      S.className = "hidden md:block absolute bottom-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-t from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200", x.appendChild(S);
-      const H = () => {
+      S.className = "hidden md:block absolute bottom-0 left-0 right-0 h-8 pointer-events-none z-10 bg-gradient-to-t from-white dark:from-gray-800 to-transparent opacity-100 transition-opacity duration-200", E.appendChild(S);
+      const D = () => {
         if (window.innerWidth >= 768) {
-          const D = v.scrollTop, T = v.scrollHeight, N = v.clientHeight;
-          D > 0 ? I.style.opacity = "1" : I.style.opacity = "0", D + N < T - 1 ? S.style.opacity = "1" : S.style.opacity = "0", w.style.opacity = "0", A.style.opacity = "0";
+          const H = v.scrollTop, T = v.scrollHeight, N = v.clientHeight;
+          H > 0 ? I.style.opacity = "1" : I.style.opacity = "0", H + N < T - 1 ? S.style.opacity = "1" : S.style.opacity = "0", w.style.opacity = "0", A.style.opacity = "0";
         } else {
-          const D = v.scrollLeft, T = v.scrollWidth, N = v.clientWidth;
-          D > 0 ? w.style.opacity = "1" : w.style.opacity = "0", D + N < T - 1 ? A.style.opacity = "1" : A.style.opacity = "0", I.style.opacity = "0", S.style.opacity = "0";
+          const H = v.scrollLeft, T = v.scrollWidth, N = v.clientWidth;
+          H > 0 ? w.style.opacity = "1" : w.style.opacity = "0", H + N < T - 1 ? A.style.opacity = "1" : A.style.opacity = "0", I.style.opacity = "0", S.style.opacity = "0";
         }
       };
-      v.addEventListener("scroll", H), window.addEventListener("resize", H), setTimeout(H, 0), n.forEach((L) => {
-        const D = document.createElement("button");
-        D.type = "button", D.tabIndex = 0, D.className = "px-3 py-1.5 text-xs font-medium rounded-md bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors whitespace-nowrap flex-shrink-0 md:w-full md:text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", D.textContent = L.label, D.setAttribute("data-keep-popover-open", "true"), D.addEventListener("click", () => {
+      v.addEventListener("scroll", D), window.addEventListener("resize", D), setTimeout(D, 0), n.forEach((L) => {
+        const H = document.createElement("button");
+        H.type = "button", H.tabIndex = 0, H.className = "px-3 py-1.5 text-xs font-medium rounded-md bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors whitespace-nowrap flex-shrink-0 md:w-full md:text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-500", H.textContent = L.label, H.setAttribute("data-keep-popover-open", "true"), H.addEventListener("click", () => {
           const T = L.action();
           if (T) {
             if (this._isRange && "start" in T && "end" in T) {
@@ -3422,8 +3422,8 @@ class et extends HTMLElement {
               cancelable: !0
             }));
           }
-        }), v.appendChild(D);
-      }), x.appendChild(v), E.appendChild(x), a.appendChild(E);
+        }), v.appendChild(H);
+      }), E.appendChild(v), x.appendChild(E), a.appendChild(x);
     }
     l.appendChild(o), l.appendChild(_), l.appendChild(g), a.appendChild(l), this._calendarContainer.appendChild(a);
   }
@@ -4123,13 +4123,9 @@ class rt extends HTMLElement {
     const t = this.getAttribute("headers");
     t && this._parseHeaders(t), requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        if (this._formData) {
-          if (this._isReactiveObject(this._formData)) {
-            const e = this._getReactiveValue(this._formData);
-            e && typeof e == "object" && !Array.isArray(e) && (this._lastDataSnapshot = this._createDataSnapshot(e), this._setupReactiveDataObserver(this._formData));
-          }
-          this._applyFormData();
-        } else {
+        if (this._formData)
+          this._isReactiveObject(this._formData) ? this._setupReactiveDataObserver(this._formData) : this._lastDataSnapshot || (this._lastDataSnapshot = this._createDataSnapshot(this._formData)), this._applyFormData();
+        else {
           const e = this.getAttribute("data-form-data");
           e && (this._parseFormData(e), this._applyFormData());
         }
@@ -4168,7 +4164,7 @@ class rt extends HTMLElement {
     return this._formData;
   }
   set data(t) {
-    this._stopReactiveDataObserver(), this._reactiveDataProxy = null, this._lastDataSnapshot = null, t && typeof t == "object" && !Array.isArray(t) ? (this._formData = t, this._isReactiveObject(t) && this._setupReactiveDataObserver(t), this._lastDataSnapshot = this._createDataSnapshot(t)) : t == null ? this._formData = null : this._parseFormData(t), this.isConnected && this._form && requestAnimationFrame(() => {
+    this._stopReactiveDataObserver(), this._reactiveDataProxy = null, this._lastDataSnapshot = null, t && typeof t == "object" && !Array.isArray(t) ? (this._formData = t, this._isReactiveObject(t) ? this._setupReactiveDataObserver(t) : this._lastDataSnapshot = this._createDataSnapshot(t)) : t == null ? this._formData = null : this._parseFormData(t), this.isConnected && this._form && requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           this._applyFormData();
@@ -4319,8 +4315,8 @@ class rt extends HTMLElement {
           } catch {
           }
           try {
-            const k = { status: _, ok: !0, data: b }, E = await c._applySuccessInterceptors(k);
-            m(E);
+            const k = { status: _, ok: !0, data: b }, x = await c._applySuccessInterceptors(k);
+            m(x);
           } catch (k) {
             f(k);
           }
@@ -4331,8 +4327,8 @@ class rt extends HTMLElement {
           } catch {
           }
           try {
-            const k = { status: _, data: b, response: { status: _, data: b } }, E = await c._applyErrorInterceptors(k);
-            f(E);
+            const k = { status: _, data: b, response: { status: _, data: b } }, x = await c._applyErrorInterceptors(k);
+            f(x);
           } catch (k) {
             f(k);
           }
@@ -4877,14 +4873,17 @@ class rt extends HTMLElement {
   _isReactiveObject(t) {
     if (!t || typeof t != "object" || Array.isArray(t))
       return !1;
-    if ("__v_isRef" in t || "_value" in t || "__v_raw" in t || "__ob__" in t)
+    if ("__v_isRef" in t || "_value" in t || "__v_raw" in t || "__v_isReactive" in t || "__ob__" in t)
       return !0;
     try {
-      const e = Object.keys(t);
-      if (e.length > 0) {
-        const i = Object.getOwnPropertyDescriptor(t, e[0]);
-        if (i && (i.get || i.set))
-          return !0;
+      const e = t.toString();
+      if (e === "[object Object]" || e.includes("Proxy")) {
+        const i = Object.keys(t)[0];
+        if (i) {
+          const s = Object.getOwnPropertyDescriptor(t, i);
+          if (s && (s.get || s.set))
+            return !0;
+        }
       }
     } catch {
       return !0;
@@ -4893,13 +4892,32 @@ class rt extends HTMLElement {
   }
   /**
    * Create a deep snapshot of the data object for comparison
+   * Handles reactive objects by extracting their actual values
    */
   _createDataSnapshot(t) {
     try {
-      return JSON.parse(JSON.stringify(t));
+      const e = this._extractReactiveData(t);
+      return JSON.parse(JSON.stringify(e));
     } catch {
-      return { ...t };
+      return { ...this._extractReactiveData(t) };
+    }
+  }
+  /**
+   * Extract actual values from reactive objects recursively
+   */
+  _extractReactiveData(t) {
+    if (!t || typeof t != "object")
+      return t;
+    if (Array.isArray(t))
+      return t.map((i) => this._extractReactiveData(i));
+    const e = this._getReactiveValue(t);
+    if (e && typeof e == "object" && !Array.isArray(e)) {
+      const i = {};
+      for (const s in e)
+        Object.prototype.hasOwnProperty.call(e, s) && (i[s] = this._extractReactiveData(e[s]));
+      return i;
     }
+    return e;
   }
   /**
    * Check if data has changed by comparing current state with snapshot
@@ -4913,27 +4931,48 @@ class rt extends HTMLElement {
   }
   /**
    * Get the actual value from a potentially reactive object
+   * Handles Vue 3 refs, reactive, Vue 2, React state, and other reactivity systems
    */
   _getReactiveValue(t) {
-    return t && typeof t == "object" && "_value" in t ? t._value : (t && typeof t == "object" && "__ob__" in t, t);
+    if (!t || typeof t != "object")
+      return t;
+    if ("_value" in t || "__v_isRef" in t) {
+      if (typeof t.value < "u")
+        return t.value;
+      if ("_value" in t)
+        return t._value;
+    }
+    return "__v_raw" in t || "__v_isReactive" in t || "__ob__" in t, t;
   }
   /**
    * Set up observer for reactive data changes
+   * Works with Vue 3 (ref, reactive), Vue 2, React, and other reactivity systems
    */
   _setupReactiveDataObserver(t) {
-    if (!this.isConnected)
+    if (this._stopReactiveDataObserver(), !this.isConnected)
       return;
-    const e = () => {
+    const e = this._getReactiveValue(t);
+    if (e && typeof e == "object" && !Array.isArray(e))
+      this._lastDataSnapshot = this._createDataSnapshot(e);
+    else {
+      this._lastDataSnapshot = null;
+      return;
+    }
+    const i = () => {
       if (!this._formData || !this._lastDataSnapshot) {
         this._stopReactiveDataObserver();
         return;
       }
-      const i = this._getReactiveValue(this._formData);
-      i && typeof i == "object" && !Array.isArray(i) && this._hasDataChanged(i, this._lastDataSnapshot) && (this._lastDataSnapshot = this._createDataSnapshot(i), requestAnimationFrame(() => {
-        this._applyFormData();
-      })), this.isConnected && this._formData && (this._reactiveDataObserver = requestAnimationFrame(e));
+      const s = this._getReactiveValue(this._formData);
+      if (s && typeof s == "object" && !Array.isArray(s)) {
+        const n = this._createDataSnapshot(s);
+        this._hasDataChanged(n, this._lastDataSnapshot) && (this._lastDataSnapshot = n, requestAnimationFrame(() => {
+          this._applyFormData();
+        }));
+      }
+      this.isConnected && this._formData ? this._reactiveDataObserver = requestAnimationFrame(i) : this._stopReactiveDataObserver();
     };
-    this._reactiveDataObserver = requestAnimationFrame(e);
+    this._reactiveDataObserver = requestAnimationFrame(i);
   }
   /**
    * Stop observing reactive data changes
@@ -5849,15 +5888,15 @@ class ht extends HTMLElement {
       const g = await fetch(`${n}?${u.toString()}`, _);
       if (!g.ok)
         throw new Error(`HTTP error! status: ${g.status}`);
-      const b = await g.json(), k = ((l = b.content) == null ? void 0 : l.rows) || [], E = ((o = b.content) == null ? void 0 : o.total) || 0;
+      const b = await g.json(), k = ((l = b.content) == null ? void 0 : l.rows) || [], x = ((o = b.content) == null ? void 0 : o.total) || 0;
       if (this._configuration.loadMore && a !== 0)
         this._rows = this._rows.concat(k);
       else {
         let w = k;
-        this._configuration.predefinedData ? (w = [...this._configuration.predefinedData, ...k], this._totalRows = E + this._configuration.predefinedData.length) : this._totalRows = E, this._rows = w;
+        this._configuration.predefinedData ? (w = [...this._configuration.predefinedData, ...k], this._totalRows = x + this._configuration.predefinedData.length) : this._totalRows = x, this._rows = w;
       }
-      const x = Math.floor(a / r) + 1;
-      this._configuration.loadMore || (((c = b.content) == null ? void 0 : c.current_page) !== void 0 && b.content.current_page === x ? this._currentPage = b.content.current_page : this._currentPage = x, this._offset = (this._currentPage - 1) * r), this._lastPage = ((d = b.content) == null ? void 0 : d.last_page) || 1, this._fetching = !1, this._loaded = !0, this._loading = !1, this._fetchError = null, this._searching = !1;
+      const E = Math.floor(a / r) + 1;
+      this._configuration.loadMore || (((c = b.content) == null ? void 0 : c.current_page) !== void 0 && b.content.current_page === E ? this._currentPage = b.content.current_page : this._currentPage = E, this._offset = (this._currentPage - 1) * r), this._lastPage = ((d = b.content) == null ? void 0 : d.last_page) || 1, this._fetching = !1, this._loaded = !0, this._loading = !1, this._fetchError = null, this._searching = !1;
       const v = this._sorting;
       if (v && this._updateSortIcons(), this._sorting = !1, this._sortingColumn = null, v && this._updateSortIcons(), this.dispatchEvent(new CustomEvent("loaded", { detail: { rows: this._rows } })), this._updateSearchIcon(), (h = (p = this.querySelector(`#${this._tableId}`)) == null ? void 0 : p.closest("table")) == null ? void 0 : h.querySelector("tbody")) {
         if (v) {
@@ -6175,7 +6214,7 @@ class ht extends HTMLElement {
       s += '<mint-table class="table-section' + (this._inMintCard ? " rounded-t-none" : "") + '">', s += `<table id="${this._tableId}">`, s += "<thead><tr>", this._configuration.columns.forEach((r, a) => {
         r.hidden || (s += `<th width="${r.width || ""}" style="${this._getStyle(r)}" class="${this._getClasses(r)}" data-column-key="${a}">`, r.showLabel !== !1 && (s += '<div class="flex items-center">', s += `<div class="flex-1">${r.raw ? r.label : this._escapeHtml(r.label)}</div>`, r.sortable && (s += '<div class="ml-2 flex items-center">', s += '<mint-icon name="" class="w-4 h-4 text-gray-400"></mint-icon>', s += "</div>"), s += "</div>"), s += "</th>");
       }), s += "</tr></thead>", s += "<tbody>";
-      for (let r = 0; r < this._perPage; r++)
+      for (let r = 0; r < 4; r++)
         s += "<tr>", this._configuration.columns.forEach((a) => {
           a.hidden || (s += `<td style="${this._getStyle(a)}" class="${this._getClasses(a, !0)}">`, s += '<div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>', s += "</td>");
         }), s += "</tr>";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monobill-mintui",
-  "version": "0.3.24",
+  "version": "0.3.26",
   "description": "A modern framework-agnostic UI kit built as Web Components. Requires Tailwind CSS.",
   "type": "module",
   "main": "./dist/index.cjs",