monobill-mintui 0.3.35 → 0.3.37

package/dist/index.js

@@ -1669,13 +1669,35 @@ class ct extends HTMLElement {
     return ["id", "direction", "open", "trigger-id", "padding", "hover"];
   }
   connectedCallback() {
-    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "fixed", "top-0", "left-0", "z-50", "pointer-events-none"), this.isOpen() || this.classList.add("hidden"), this.render(), this._setupTrigger(), this._observeDarkMode();
+    const t = this._isInsideModal() ? "z-[60]" : "z-50";
+    this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "fixed", "top-0", "left-0", t, "pointer-events-none"), this.isOpen() || this.classList.add("hidden"), this.render(), this._setupTrigger(), this._observeDarkMode();
+  }
+  _isInsideModal() {
+    let t = this;
+    for (; t; ) {
+      if (t.tagName === "MINT-MODAL")
+        return !0;
+      t = t.parentElement;
+    }
+    if (this._triggerElement)
+      for (t = this._triggerElement; t; ) {
+        if (t.tagName === "MINT-MODAL")
+          return !0;
+        t = t.parentElement;
+      }
+    return !1;
   }
   disconnectedCallback() {
     this._triggerElement && this._triggerElement.tagName === "MINT-BUTTON" && this._triggerElement.removeAttribute("active"), this._darkModeObserver && (this._darkModeObserver.disconnect(), this._darkModeObserver = null), this._clickOutsideHandler && (document.removeEventListener("click", this._clickOutsideHandler), this._clickOutsideHandler = null), this._triggerClickHandler && this._triggerElement && (this._triggerElement.removeEventListener("click", this._triggerClickHandler, !0), this._triggerClickHandler = null), this._removeHoverListeners(), this._scrollHandler && (window.removeEventListener("scroll", this._scrollHandler, !0), this._scrollHandler = null), this._resizeHandler && (window.removeEventListener("resize", this._resizeHandler), this._resizeHandler = null);
   }
   attributeChangedCallback(t, e, i) {
-    e !== i && (this.render(), (t === "trigger-id" || t === "hover") && this._setupTrigger(), t === "open" && this.isOpen() && this._closeOtherPopovers());
+    if (e !== i) {
+      if (this.isConnected) {
+        const s = this._isInsideModal() ? "z-[60]" : "z-50";
+        this.classList.remove("z-50", "z-[60]"), this.classList.add(s);
+      }
+      this.render(), (t === "trigger-id" || t === "hover") && this._setupTrigger(), t === "open" && this.isOpen() && this._closeOtherPopovers();
+    }
   }
   getId() {
     return this.getAttribute("id") || "";
@@ -1835,7 +1857,23 @@ class ct extends HTMLElement {
           r.render();
         });
       }), this._clickOutsideHandler && (document.removeEventListener("click", this._clickOutsideHandler, !1), this._clickOutsideHandler = null);
-    this._overlay || (this._overlay = document.createElement("div"), this._overlay.className = "fixed inset-0 pointer-events-none z-40", this.appendChild(this._overlay)), this._popover || (this._popover = document.createElement("div"), this._popover.className = "fixed z-50 pointer-events-auto", this.appendChild(this._popover)), this.isHoverEnabled() && this._attachHoverListeners();
+    if (this._overlay) {
+      const r = this._isInsideModal() ? "z-[55]" : "z-40";
+      this._overlay.className = `fixed inset-0 pointer-events-none ${r}`;
+    } else {
+      this._overlay = document.createElement("div");
+      const r = this._isInsideModal() ? "z-[55]" : "z-40";
+      this._overlay.className = `fixed inset-0 pointer-events-none ${r}`, this.appendChild(this._overlay);
+    }
+    if (this._popover) {
+      const r = this._isInsideModal() ? "z-[60]" : "z-50";
+      this._popover.className = `fixed ${r} pointer-events-auto`;
+    } else {
+      this._popover = document.createElement("div");
+      const r = this._isInsideModal() ? "z-[60]" : "z-50";
+      this._popover.className = `fixed ${r} pointer-events-auto`, this.appendChild(this._popover);
+    }
+    this.isHoverEnabled() && this._attachHoverListeners();
     let s = this._popover.querySelector(".popover-content");
     if (!s)
       s = document.createElement("div"), s.className = `popover-content bg-white dark:bg-gray-800 rounded-lg shadow-xl ${i} transition-all duration-200 ease-out transform`, this._popover.appendChild(s);
@@ -2757,15 +2795,15 @@ class pt 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", (x) => {
           if (x.preventDefault(), x.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
-            const T = parseFloat(this._input.value) || 0, R = parseFloat(this._input.step) || 1, P = this._input.min ? parseFloat(this._input.min) : void 0, O = this._input.max ? parseFloat(this._input.max) : void 0;
+            const T = parseFloat(this._input.value) || 0, R = parseFloat(this._input.step) || 1, P = this._input.min ? parseFloat(this._input.min) : void 0, q = this._input.max ? parseFloat(this._input.max) : void 0;
             let H = T + R;
-            O !== void 0 && H > O && (H = O), P !== void 0 && H < P && (H = P), this._input.value = H.toString(), this.setAttribute("value", H.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
+            q !== void 0 && H > q && (H = q), P !== void 0 && H < P && (H = P), this._input.value = H.toString(), this.setAttribute("value", H.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
           }
         }), this._numberDecrementButton.addEventListener("click", (x) => {
           if (x.preventDefault(), x.stopPropagation(), this._input && !this._input.disabled && !this._input.readOnly) {
-            const T = parseFloat(this._input.value) || 0, R = parseFloat(this._input.step) || 1, P = this._input.min ? parseFloat(this._input.min) : void 0, O = this._input.max ? parseFloat(this._input.max) : void 0;
+            const T = parseFloat(this._input.value) || 0, R = parseFloat(this._input.step) || 1, P = this._input.min ? parseFloat(this._input.min) : void 0, q = this._input.max ? parseFloat(this._input.max) : void 0;
             let H = T - R;
-            P !== void 0 && H < P && (H = P), O !== void 0 && H > O && (H = O), this._input.value = H.toString(), this.setAttribute("value", H.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
+            P !== void 0 && H < P && (H = P), q !== void 0 && H > q && (H = q), this._input.value = H.toString(), this.setAttribute("value", H.toString()), this._input.dispatchEvent(new Event("input", { bubbles: !0 })), this._input.dispatchEvent(new Event("change", { bubbles: !0 }));
           }
         });
       }
@@ -3395,38 +3433,38 @@ class ft extends HTMLElement {
       return;
     }
     if (!this._popover)
-      this._popover = document.createElement("mint-popover"), this._popover.setAttribute("direction", "down"), this._popover.setAttribute("padding", "0"), this.parentNode ? this.parentNode.insertBefore(this._popover, this.nextSibling) : document.body.appendChild(this._popover), requestAnimationFrame(() => {
+      this._popover = document.createElement("mint-popover"), this._popover.setAttribute("direction", "down"), this._popover.setAttribute("padding", "0"), this.closest("mint-modal") ? document.body.appendChild(this._popover) : this.parentNode ? this.parentNode.insertBefore(this._popover, this.nextSibling) : document.body.appendChild(this._popover), requestAnimationFrame(() => {
         requestAnimationFrame(() => {
-          this._popover && this._popover.isConnected && (this._popover.setAttribute("trigger-id", t), this._popoverObserver || (this._popoverObserver = new MutationObserver((i) => {
-            i.forEach((s) => {
-              var n;
-              if (s.type === "attributes" && s.attributeName === "open")
-                if ((n = this._popover) == null ? void 0 : n.hasAttribute("open"))
+          this._popover && this._popover.isConnected && (this._popover.setAttribute("trigger-id", t), this._popoverObserver || (this._popoverObserver = new MutationObserver((s) => {
+            s.forEach((n) => {
+              var r;
+              if (n.type === "attributes" && n.attributeName === "open")
+                if ((r = this._popover) == null ? void 0 : r.hasAttribute("open"))
                   requestAnimationFrame(() => {
                     this._buildCalendar();
-                    const a = this._popover;
-                    typeof a.render == "function" && a.render(), this._setupFocusTrap();
+                    const o = this._popover;
+                    typeof o.render == "function" && o.render(), this._setupFocusTrap();
                   });
                 else {
                   if (this._removeFocusTrap(), this._iconButton && !this._iconButton.disabled && requestAnimationFrame(() => {
-                    var a;
-                    (a = this._iconButton) == null || a.focus();
+                    var o;
+                    (o = this._iconButton) == null || o.focus();
                   }), this._viewMode = "calendar", this._selectedStartDate)
                     this._currentMonth = this._selectedStartDate.getMonth(), this._currentYear = this._selectedStartDate.getFullYear();
                   else {
-                    const a = /* @__PURE__ */ new Date();
-                    this._currentMonth = a.getMonth(), this._currentYear = a.getFullYear();
+                    const o = /* @__PURE__ */ new Date();
+                    this._currentMonth = o.getMonth(), this._currentYear = o.getFullYear();
                   }
                   requestAnimationFrame(() => {
                     this._buildCalendar();
                   }), this._hiddenInput && (this._syncHiddenInput(), setTimeout(() => {
-                    var o;
-                    const a = new FocusEvent("blur", {
+                    var l;
+                    const o = new FocusEvent("blur", {
                       bubbles: !0,
                       cancelable: !0,
                       relatedTarget: null
                     });
-                    (o = this._hiddenInput) == null || o.dispatchEvent(a);
+                    (l = this._hiddenInput) == null || l.dispatchEvent(o);
                   }, 0));
                 }
             });
@@ -3497,17 +3535,17 @@ 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 V = this._isToday(w), q = this._isDateSelected(w), $ = this._isDateInRange(w), F = k && w < k || A && w > A;
+    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, G = Math.ceil(P / 7) * 7 - P, j = (w, I, S) => {
+      const V = this._isToday(w), O = 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" : $ && (M = "rounded-none");
-      } else q && !this._isRange && (M = "rounded-md");
+      } else O && !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 += 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", () => {
+      return S ? B += O ? " 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 += O ? " 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;
     };
@@ -3519,7 +3557,7 @@ class ft extends HTMLElement {
       const I = new Date(this._currentYear, this._currentMonth, w), S = j(I, w, !0);
       b.appendChild(S);
     }
-    for (let w = 1; w <= J; w++) {
+    for (let w = 1; w <= G; w++) {
       const I = new Date(R, T, w), S = j(I, w, !1);
       b.appendChild(S);
     }
@@ -3556,8 +3594,8 @@ class ft extends HTMLElement {
           }
         }
       `, 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 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 O = document.createElement("div");
+      O.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(O);
       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");
@@ -3567,10 +3605,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", q.style.opacity = "0", $.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", O.style.opacity = "0", $.style.opacity = "0";
         } else {
           const D = S.scrollLeft, L = S.scrollWidth, z = S.clientWidth;
-          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";
+          D > 0 ? O.style.opacity = "1" : O.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) => {
@@ -3580,7 +3618,7 @@ class ft extends HTMLElement {
           if (L) {
             if (this._isRange && "start" in L && "end" in L) {
               this._selectedStartDate = L.start, this._selectedEndDate = L.end;
-              const z = this.getFormat(), Y = this._formatDate(L.start, z), G = this._formatDate(L.end, z), K = `${Y} - ${G}`;
+              const z = this.getFormat(), Y = this._formatDate(L.start, z), J = this._formatDate(L.end, z), K = `${Y} - ${J}`;
               this.setValue(K), this._currentMonth = L.start.getMonth(), this._currentYear = L.start.getFullYear();
             } else if (L instanceof Date) {
               this._selectedStartDate = L, this._selectedEndDate = null;
@@ -3823,16 +3861,35 @@ 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, this._optionObserver = null;
+    super(), this._select = null, this._wrapper = null, this._caretUpIcon = null, this._caretDownIcon = null, this._changeHandler = null, this._optionObserver = null, this._childrenObserver = null;
   }
   static get observedAttributes() {
     return ["name", "value", "disabled", "id", "required", "label", "info", "error", "error-message", "multiple", "loading"];
   }
   connectedCallback() {
-    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();
+    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(), this._childrenObserver && this._childrenObserver.disconnect(), this._childrenObserver = new MutationObserver((e) => {
+      e.some((s) => {
+        const n = Array.from(s.addedNodes).some(
+          (a) => a.nodeType === Node.ELEMENT_NODE && (a.tagName === "OPTION" || a.tagName === "OPTGROUP")
+        ) || Array.from(s.removedNodes).some(
+          (a) => a.nodeType === Node.ELEMENT_NODE && (a.tagName === "OPTION" || a.tagName === "OPTGROUP")
+        ), r = s.type === "attributes" && s.target.nodeType === Node.ELEMENT_NODE && (s.target.tagName === "OPTION" || s.target.tagName === "OPTGROUP");
+        return n || r;
+      }) && requestAnimationFrame(() => {
+        this.render();
+      });
+    }), this._childrenObserver.observe(this, {
+      childList: !0,
+      subtree: !0,
+      // Watch nested options in optgroups too
+      attributes: !0,
+      // Watch for attribute changes on options
+      attributeFilter: ["value", "selected", "disabled"]
+      // Only watch relevant attributes
+    });
   }
   disconnectedCallback() {
-    this._select && this._changeHandler && (this._select.removeEventListener("change", this._changeHandler), this._changeHandler = null), this._optionObserver && (this._optionObserver.disconnect(), this._optionObserver = null);
+    this._select && this._changeHandler && (this._select.removeEventListener("change", this._changeHandler), this._changeHandler = null), this._optionObserver && (this._optionObserver.disconnect(), this._optionObserver = null), this._childrenObserver && (this._childrenObserver.disconnect(), this._childrenObserver = null);
   }
   isLoading() {
     return this.hasAttribute("loading");
@@ -3959,7 +4016,7 @@ class mt extends HTMLElement {
       h.appendChild(f), this.appendChild(h);
     }
     this._wrapper = document.createElement("div"), this._wrapper.className = "relative w-full", this.appendChild(this._wrapper), this._select = document.createElement("select"), this._select.className = this.getSelectClasses(), r && (this._select.id = r), a && (this._select.name = a), l && (this._select.disabled = !0), c && (this._select.multiple = !0), this._select.setAttribute("aria-invalid", d ? "true" : "false");
-    const u = e.length > 0 ? e : i;
+    const u = i.length > 0 ? i : e;
     if (u.length > 0 && u.forEach((h) => {
       this._select.appendChild(h);
     }), this._select.options.length === 0) {

package/package.json

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