monobill-mintui 0.3.32 → 0.3.34

package/dist/index.js

@@ -167,7 +167,7 @@ class Q extends HTMLElement {
   }
 }
 customElements.get("mint-icon") || customElements.define("mint-icon", Q);
-const V = class V extends HTMLElement {
+const W = class W extends HTMLElement {
   constructor() {
     super(), this._button = null, this._clickHandler = null, this._isHandlingClick = !1, this._handleMouseDown = () => {
       this._button && !this.isDisabled() && !this.isLoading() && this._button.classList.add("mint-button-active");
@@ -187,7 +187,7 @@ const V = class V extends HTMLElement {
     return ["variant", "tone", "disabled", "loading", "button-type", "type", "full-width", "icon-position", "icon", "active"];
   }
   connectedCallback() {
-    if (!V._activeShadowStyleInjected) {
+    if (!W._activeShadowStyleInjected) {
       const t = document.createElement("style");
       t.textContent = `
         mint-button .mint-button-active {
@@ -200,7 +200,7 @@ const V = class V extends HTMLElement {
         mint-button[data-variant="link"] .mint-button-active {
           box-shadow: none !important;
         }
-      `, document.head.appendChild(t), V._activeShadowStyleInjected = !0;
+      `, document.head.appendChild(t), W._activeShadowStyleInjected = !0;
     }
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block"), this.render(), this._button && this.setupEventListeners(), this.isFullWidth() && this.classList.add("w-full");
   }
@@ -832,8 +832,8 @@ const V = class V extends HTMLElement {
     });
   }
 };
-V._activeShadowStyleInjected = !1;
-let U = V;
+W._activeShadowStyleInjected = !1;
+let U = W;
 customElements.get("mint-button") || customElements.define("mint-button", U);
 class tt extends HTMLElement {
   constructor() {
@@ -987,26 +987,34 @@ class tt extends HTMLElement {
     this._button && this._button.removeEventListener("click", this.handleToggle.bind(this));
   }
   handleToggle(t) {
-    this.isDisabled() || (this.checked = !this._checked, this.dispatchEvent(
-      new CustomEvent("input", {
-        detail: { checked: this._checked },
+    if (!this.isDisabled()) {
+      this.checked = !this._checked;
+      const e = new Event("input", {
         bubbles: !0,
         cancelable: !0,
         composed: !0
-      })
-    ), this.dispatchEvent(
-      new CustomEvent("change", {
-        detail: { checked: this._checked },
-        bubbles: !0,
-        cancelable: !0
-      })
-    ), this.dispatchEvent(
-      new CustomEvent("toggle", {
-        detail: { checked: this._checked },
-        bubbles: !0,
-        cancelable: !0
-      })
-    ));
+      });
+      this.dispatchEvent(e), this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: { checked: this._checked },
+          bubbles: !0,
+          cancelable: !0,
+          composed: !0
+        })
+      ), this.dispatchEvent(
+        new CustomEvent("change", {
+          detail: { checked: this._checked },
+          bubbles: !0,
+          cancelable: !0
+        })
+      ), this.dispatchEvent(
+        new CustomEvent("toggle", {
+          detail: { checked: this._checked },
+          bubbles: !0,
+          cancelable: !0
+        })
+      );
+    }
   }
   _renderSkeleton(t) {
     const e = this._getSwitchContainer(), i = this.getLabel(), s = this.getInfo();
@@ -2030,18 +2038,24 @@ class ht extends HTMLElement {
   }
   setupEventListeners() {
     this.removeEventListeners(), this._checkbox && (this._changeHandler = (t) => {
-      t.stopPropagation(), this._checked = this._checkbox.checked, this._checked ? this.hasAttribute("checked") || this.setAttribute("checked", "") : this.hasAttribute("checked") && this.removeAttribute("checked"), this.updateVisualState(), this.dispatchEvent(new CustomEvent("input", {
+      t.stopPropagation(), this._checked = this._checkbox.checked, this._checked ? this.hasAttribute("checked") || this.setAttribute("checked", "") : this.hasAttribute("checked") && this.removeAttribute("checked"), this.updateVisualState();
+      const e = new Event("input", {
+        bubbles: !0,
+        cancelable: !0,
+        composed: !0
+      });
+      this.dispatchEvent(e), this.dispatchEvent(new CustomEvent("input", {
         detail: { checked: this._checked, value: this.getValue() },
         bubbles: !0,
         cancelable: !0,
         composed: !0
       }));
-      const e = new CustomEvent("change", {
+      const i = new CustomEvent("change", {
         detail: { checked: this._checked, value: this.getValue() },
         bubbles: !0,
         cancelable: !0
       });
-      this.dispatchEvent(e);
+      this.dispatchEvent(i);
     }, this._checkbox.addEventListener("change", this._changeHandler), this._mousedownHandler = (t) => {
       t.stopPropagation();
       const e = this.querySelector(".mint-checkbox-wrapper");
@@ -2374,9 +2388,15 @@ class ut extends HTMLElement {
   }
   connectedCallback() {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "block", "w-full"), this.render(), this.addEventListener("choice-change", (t) => {
-      var s;
-      const i = ((s = t.detail) == null ? void 0 : s.value) || this.getValue();
-      this.dispatchEvent(new CustomEvent("input", {
+      var r;
+      const i = ((r = t.detail) == null ? void 0 : r.value) || this.getValue();
+      (this.getAttribute("value") || "") !== i && (i ? this.setAttribute("value", i) : this.removeAttribute("value"));
+      const n = new Event("input", {
+        bubbles: !0,
+        cancelable: !0,
+        composed: !0
+      });
+      this.dispatchEvent(n), this.dispatchEvent(new CustomEvent("input", {
         detail: { value: i },
         bubbles: !0,
         cancelable: !0,
@@ -2454,6 +2474,14 @@ class ut extends HTMLElement {
       });
     });
   }
+  // Define value property for v-model and framework compatibility
+  // Vue and other frameworks bind to the value property, not just methods
+  get value() {
+    return this.getValue();
+  }
+  set value(t) {
+    this.setValue(t || "");
+  }
   render() {
     const t = this.isLoading(), e = this.getLabel(), i = this.getInfo(), s = this.getId() || `mint-choice-${Math.random().toString(36).substr(2, 9)}`;
     this.getId() || this.setAttribute("id", s);
@@ -2744,12 +2772,19 @@ class pt extends HTMLElement {
   }
   setupEventListeners() {
     this._element && (this._element.addEventListener("input", () => {
-      var e;
-      const t = ((e = this._element) == null ? void 0 : e.value) || "";
-      t ? this.setAttribute("value", t) : this.removeAttribute("value"), this.dispatchEvent(new CustomEvent("input", {
+      var i;
+      const t = ((i = this._element) == null ? void 0 : i.value) || "";
+      t ? this.setAttribute("value", t) : this.removeAttribute("value");
+      const e = new Event("input", {
+        bubbles: !0,
+        cancelable: !0,
+        composed: !0
+      });
+      this.dispatchEvent(e), this.dispatchEvent(new CustomEvent("input", {
         detail: { value: t },
         bubbles: !0,
-        cancelable: !0
+        cancelable: !0,
+        composed: !0
       }));
     }), this._element.addEventListener("blur", () => {
       var e;
@@ -2833,6 +2868,14 @@ class ft extends HTMLElement {
   setValue(t) {
     t ? (this.setAttribute("value", t), this._textInput && (this._textInput.value = t), this._parseValue(t)) : (this.removeAttribute("value"), this._textInput && (this._textInput.value = ""), this._selectedStartDate = null, this._selectedEndDate = null), this._buildCalendar(), this._updateDisplayText();
   }
+  // Define value property for v-model and framework compatibility
+  // Vue and other frameworks bind to the value property, not just methods
+  get value() {
+    return this.getValue();
+  }
+  set value(t) {
+    this.setValue(t || "");
+  }
   getFormat() {
     return this.getAttribute("format") || "mm/dd/yyyy";
   }
@@ -3413,22 +3456,22 @@ class ft extends HTMLElement {
     const b = document.createElement("div");
     b.className = "grid grid-cols-7";
     const k = this.getMin() ? this._parseDateString(this.getMin(), this.getFormat()) : null, A = this.getMax() ? this._parseDateString(this.getMax(), this.getFormat()) : null, E = this._currentMonth === 0 ? 11 : this._currentMonth - 1, y = this._currentMonth === 0 ? this._currentYear - 1 : this._currentYear, x = this._getDaysInMonth(E, y), T = this._currentMonth === 11 ? 0 : this._currentMonth + 1, R = this._currentMonth === 11 ? this._currentYear + 1 : this._currentYear, P = e + t, J = Math.ceil(P / 7) * 7 - P, j = (w, I, S) => {
-      const W = this._isToday(w), $ = this._isDateSelected(w), q = this._isDateInRange(w), F = k && w < k || A && w > A;
+      const V = this._isToday(w), q = this._isDateSelected(w), $ = this._isDateInRange(w), F = k && w < k || A && w > A;
       let M = "rounded-md";
       if (this._isRange && this._selectedStartDate && this._selectedEndDate) {
         const D = this._isSameDate(w, this._selectedStartDate), L = this._isSameDate(w, this._selectedEndDate);
-        D && L ? M = "rounded-md" : D ? M = "rounded-l-md" : L ? M = "rounded-r-md" : q && (M = "rounded-none");
-      } else $ && !this._isRange && (M = "rounded-md");
+        D && L ? M = "rounded-md" : D ? M = "rounded-l-md" : L ? M = "rounded-r-md" : $ && (M = "rounded-none");
+      } else q && !this._isRange && (M = "rounded-md");
       const N = document.createElement("button");
       N.type = "button", N.disabled = !!F, N.tabIndex = F ? -1 : 0;
       let B = `w-full h-8 ${M} 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`;
-      return S ? B += $ ? " bg-slate-800 dark:bg-slate-600 text-white" : q ? " bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : W ? " 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" : B += $ ? " bg-slate-800 dark:bg-slate-600 text-white" : q ? " bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : " text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700", B += F ? " opacity-40 cursor-not-allowed" : "", N.className = B, N.textContent = I.toString(), F || N.addEventListener("click", () => {
+      return S ? B += q ? " bg-slate-800 dark:bg-slate-600 text-white" : $ ? " 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" : B += q ? " bg-slate-800 dark:bg-slate-600 text-white" : $ ? " bg-slate-100 dark:bg-slate-700 text-slate-800 dark:text-slate-200" : " text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700", B += F ? " opacity-40 cursor-not-allowed" : "", N.className = B, N.textContent = I.toString(), F || N.addEventListener("click", () => {
         this._handleDateClick(w);
       }), N;
     };
     for (let w = e - 1; w >= 0; w--) {
-      const I = x - w, S = new Date(y, E, I), W = j(S, I, !1);
-      b.appendChild(W);
+      const I = x - w, S = new Date(y, E, I), V = j(S, I, !1);
+      b.appendChild(V);
     }
     for (let w = 1; w <= t; w++) {
       const I = new Date(this._currentYear, this._currentMonth, w), S = j(I, w, !0);
@@ -3445,8 +3488,8 @@ class ft extends HTMLElement {
       I.className = "relative md:relative md:flex-1 md:min-h-0";
       const S = document.createElement("div");
       S.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", S.style.scrollbarWidth = "none", S.style.msOverflowStyle = "none", S.style.setProperty("-webkit-overflow-scrolling", "touch");
-      const W = document.createElement("style");
-      W.textContent = `
+      const V = document.createElement("style");
+      V.textContent = `
         .mint-date-shortcuts-row::-webkit-scrollbar {
           display: none;
         }
@@ -3470,11 +3513,11 @@ class ft extends HTMLElement {
             background: rgba(255, 255, 255, 0.2);
           }
         }
-      `, S.classList.add("mint-date-shortcuts-row"), document.head.querySelector("style[data-mint-date-shortcuts]") || (W.setAttribute("data-mint-date-shortcuts", "true"), document.head.appendChild(W));
-      const $ = document.createElement("div");
-      $.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", I.appendChild($);
+      `, S.classList.add("mint-date-shortcuts-row"), document.head.querySelector("style[data-mint-date-shortcuts]") || (V.setAttribute("data-mint-date-shortcuts", "true"), document.head.appendChild(V));
       const q = document.createElement("div");
-      q.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", I.appendChild(q);
+      q.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", I.appendChild(q);
+      const $ = document.createElement("div");
+      $.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", I.appendChild($);
       const F = document.createElement("div");
       F.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", I.appendChild(F);
       const M = document.createElement("div");
@@ -3482,10 +3525,10 @@ class ft extends HTMLElement {
       const N = () => {
         if (window.innerWidth >= 768) {
           const D = S.scrollTop, L = S.scrollHeight, z = S.clientHeight;
-          D > 0 ? F.style.opacity = "1" : F.style.opacity = "0", D + z < L - 1 ? M.style.opacity = "1" : M.style.opacity = "0", $.style.opacity = "0", q.style.opacity = "0";
+          D > 0 ? F.style.opacity = "1" : F.style.opacity = "0", D + z < L - 1 ? M.style.opacity = "1" : M.style.opacity = "0", q.style.opacity = "0", $.style.opacity = "0";
         } else {
           const D = S.scrollLeft, L = S.scrollWidth, z = S.clientWidth;
-          D > 0 ? $.style.opacity = "1" : $.style.opacity = "0", D + z < L - 1 ? q.style.opacity = "1" : q.style.opacity = "0", F.style.opacity = "0", M.style.opacity = "0";
+          D > 0 ? q.style.opacity = "1" : q.style.opacity = "0", D + z < L - 1 ? $.style.opacity = "1" : $.style.opacity = "0", F.style.opacity = "0", M.style.opacity = "0";
         }
       };
       S.addEventListener("scroll", N), window.addEventListener("resize", N), setTimeout(N, 0), a.forEach((B) => {
@@ -3626,21 +3669,29 @@ class ft extends HTMLElement {
     let s, n;
     if (i === "week" ? (s = this._getWeekStart(t), n = this._getWeekEnd(t)) : i === "month" ? (s = this._getMonthStart(t), n = this._getMonthEnd(t)) : (s = t, n = t), this.isRange() || i === "week" || i === "month") {
       this._selectedStartDate = s, this._selectedEndDate = n;
-      const a = this._formatDate(this._selectedStartDate, e), o = this._formatDate(this._selectedEndDate, e), l = `${a} - ${o}`;
-      this.setValue(l), this._textInput && (this._textInput.value = l), this._popover && typeof this._popover.close == "function" && this._popover.close();
+      const o = this._formatDate(this._selectedStartDate, e), l = this._formatDate(this._selectedEndDate, e), c = `${o} - ${l}`;
+      this.setValue(c), this._textInput && (this._textInput.value = c), this._popover && typeof this._popover.close == "function" && this._popover.close();
     } else {
       this._selectedStartDate = s, this._selectedEndDate = null;
-      const a = this._formatDate(s, e);
-      this.setValue(a), this._textInput && (this._textInput.value = a), this._popover && typeof this._popover.close == "function" && this._popover.close();
+      const o = this._formatDate(s, e);
+      this.setValue(o), this._textInput && (this._textInput.value = o), this._popover && typeof this._popover.close == "function" && this._popover.close();
     }
-    this._buildCalendar(), this._updateDisplayText(), this._exitInputMode(), this.dispatchEvent(new CustomEvent("input", {
+    this._buildCalendar(), this._updateDisplayText(), this._exitInputMode();
+    const a = new Event("input", {
+      bubbles: !0,
+      cancelable: !0,
+      composed: !0
+    });
+    this.dispatchEvent(a), this.dispatchEvent(new CustomEvent("input", {
       detail: { value: this.getValue() },
       bubbles: !0,
-      cancelable: !0
+      cancelable: !0,
+      composed: !0
     })), this.dispatchEvent(new CustomEvent("change", {
       detail: { value: this.getValue() },
       bubbles: !0,
-      cancelable: !0
+      cancelable: !0,
+      composed: !0
     }));
   }
   // Display mode helpers
@@ -3730,7 +3781,7 @@ class ft extends HTMLElement {
 customElements.get("mint-date-picker") || customElements.define("mint-date-picker", ft);
 class mt extends HTMLElement {
   constructor() {
-    super(), this._select = null, this._wrapper = null, this._caretUpIcon = null, this._caretDownIcon = null, this._changeHandler = null;
+    super(), this._select = null, this._wrapper = null, this._caretUpIcon = null, this._caretDownIcon = null, this._changeHandler = null, this._optionObserver = null;
   }
   static get observedAttributes() {
     return ["name", "value", "disabled", "id", "required", "label", "info", "error", "error-message", "multiple", "loading"];
@@ -3739,7 +3790,7 @@ class mt extends HTMLElement {
     this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block", "w-full"), this.getLabel() || console.error('mint-select: The "label" attribute is required. Please provide a label for the select.'), this.render();
   }
   disconnectedCallback() {
-    this._select && this._changeHandler && (this._select.removeEventListener("change", this._changeHandler), this._changeHandler = null);
+    this._select && this._changeHandler && (this._select.removeEventListener("change", this._changeHandler), this._changeHandler = null), this._optionObserver && (this._optionObserver.disconnect(), this._optionObserver = null);
   }
   isLoading() {
     return this.hasAttribute("loading");
@@ -3771,6 +3822,19 @@ class mt extends HTMLElement {
     const e = t || "";
     this.setAttribute("value", e), this._select && (this._select.value = e);
   }
+  // Define value property for v-model and framework compatibility
+  // Vue and other frameworks bind to the value property, not just the attribute
+  get value() {
+    return this.getValue();
+  }
+  set value(t) {
+    const e = t || "";
+    (this.getAttribute("value") || "") !== e && this.setAttribute("value", e), this._select && requestAnimationFrame(() => {
+      this._select && (e === "" || Array.from(this._select.options).some(
+        (n) => n.value === e
+      )) && this._select.value !== e && (this._select.value = e);
+    });
+  }
   isDisabled() {
     return this.hasAttribute("disabled");
   }
@@ -3855,7 +3919,13 @@ class mt extends HTMLElement {
     }
     if (this._select.value = o || "", this._changeHandler && this._select && this._select.removeEventListener("change", this._changeHandler), this._changeHandler = (h) => {
       const p = h.target.value;
-      p ? this.setAttribute("value", p) : this.removeAttribute("value"), this.dispatchEvent(new CustomEvent("input", {
+      (this.getAttribute("value") || "") !== p && (p ? this.setAttribute("value", p) : this.removeAttribute("value"));
+      const _ = new Event("input", {
+        bubbles: !0,
+        cancelable: !0,
+        composed: !0
+      });
+      this.dispatchEvent(_), this.dispatchEvent(new CustomEvent("input", {
         detail: { value: p },
         bubbles: !0,
         cancelable: !0,
@@ -3866,7 +3936,17 @@ class mt extends HTMLElement {
         cancelable: !0,
         composed: !0
       }));
-    }, this._select.addEventListener("change", this._changeHandler), this._wrapper.appendChild(this._select), c)
+    }, this._select.addEventListener("change", this._changeHandler), this._optionObserver && this._optionObserver.disconnect(), this._optionObserver = new MutationObserver(() => {
+      const h = this.getAttribute("value") || this.value || "";
+      this._select && h && requestAnimationFrame(() => {
+        this._select && Array.from(this._select.options).some(
+          (p) => p.value === h
+        ) && this._select.value !== h && (this._select.value = h);
+      });
+    }), this._optionObserver.observe(this._select, {
+      childList: !0,
+      subtree: !0
+    }), this._wrapper.appendChild(this._select), c)
       this._caretUpIcon = null, this._caretDownIcon = null;
     else {
       const h = document.createElement("div");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monobill-mintui",
-  "version": "0.3.32",
+  "version": "0.3.34",
   "description": "A modern framework-agnostic UI kit built as Web Components. Requires Tailwind CSS.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -60,10 +60,10 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/yourusername/mintui.git"
+    "url": "https://github.com/vnoxco/mintui.git"
   },
   "bugs": {
-    "url": "https://github.com/yourusername/mintui/issues"
+    "url": "https://github.com/vnoxco/mintui/issues"
   },
-  "homepage": "https://github.com/yourusername/mintui#readme"
+  "homepage": "https://github.com/vnoxco/mintui#readme"
 }