@vanduo-oss/framework 1.4.1 → 1.4.2

package/README.md

@@ -1,4 +1,4 @@
-# Vanduo Framework v1.4.1
+# Vanduo Framework v1.4.2
 
 <p align="center">
   <img src="vanduo-banner.svg" alt="Vanduo Framework Banner" width="100%">
@@ -29,8 +29,8 @@ Vanduo is a zero-dependency UI framework built with HTML, CSS, and vanilla JavaS
 ### CDN
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.4.1/dist/vanduo.min.css">
-<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.4.1/dist/vanduo.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.4.2/dist/vanduo.min.css">
+<script src="https://cdn.jsdelivr.net/gh/vanduo-oss/framework@v1.4.2/dist/vanduo.min.js"></script>
 <script>
   Vanduo.init();
 </script>

package/css/components/datepicker.css

@@ -46,7 +46,9 @@
 /* ========== Calendar Popup ========== */
 
 .vd-datepicker-popup {
-  position: absolute;
+  position: fixed;
+  top: 0;
+  left: 0;
   z-index: var(--vd-dp-z-index);
   background: var(--vd-dp-bg);
   border: 1px solid var(--vd-dp-border-color);

package/css/components/modals.css

@@ -79,6 +79,7 @@
   outline: 0;
   opacity: 0;
   transition: var(--vd-modal-transition);
+  --vd-modal-dialog-max-width: var(--vd-modal-width);
 }
 
 .vd-modal.is-open {
@@ -91,9 +92,9 @@
 /* Modal Dialog */
 .vd-modal-dialog {
   position: relative;
-  width: auto;
+  width: min(calc(100% - 3.5rem), var(--vd-modal-dialog-max-width));
   margin: 1.75rem auto;
-  max-width: var(--vd-modal-width);
+  max-width: var(--vd-modal-dialog-max-width);
   pointer-events: none;
   transform: scale(0.95);
   transition: var(--vd-modal-dialog-transition);
@@ -202,16 +203,19 @@
 }
 
 /* Modal Sizes */
+.vd-modal-dialog.vd-modal-sm,
 .vd-modal-sm .vd-modal-dialog {
-  max-width: var(--vd-modal-width-sm);
+  --vd-modal-dialog-max-width: var(--vd-modal-width-sm);
 }
 
+.vd-modal-dialog.vd-modal-lg,
 .vd-modal-lg .vd-modal-dialog {
-  max-width: var(--vd-modal-width-lg);
+  --vd-modal-dialog-max-width: var(--vd-modal-width-lg);
 }
 
+.vd-modal-dialog.vd-modal-xl,
 .vd-modal-xl .vd-modal-dialog {
-  max-width: var(--vd-modal-width-xl);
+  --vd-modal-dialog-max-width: var(--vd-modal-width-xl);
 }
 
 .vd-modal-fullscreen .vd-modal-dialog {
@@ -256,6 +260,7 @@
 @media (max-width: 575.98px) {
   .vd-modal-dialog {
     margin: 0.5rem;
+    width: calc(100% - 1rem);
     max-width: calc(100% - 1rem);
   }
   
@@ -295,4 +300,3 @@
   overflow: hidden;
   padding-right: 0;
 }
-

package/css/components/timepicker.css

@@ -36,7 +36,9 @@
 /* ========== Popup ========== */
 
 .vd-timepicker-popup {
-  position: absolute;
+  position: fixed;
+  top: 0;
+  left: 0;
   z-index: var(--vd-tp-z-index);
   background: var(--vd-tp-bg);
   border: 1px solid var(--vd-tp-border-color);

package/dist/build-info.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.4.1",
-  "builtAt": "2026-05-23T09:27:52.907Z",
-  "commit": "4799a84",
+  "version": "1.4.2",
+  "builtAt": "2026-05-23T19:59:36.731Z",
+  "commit": "adbe750",
   "mode": "development+production"
 }

package/dist/vanduo.cjs.js

@@ -1,4 +1,4 @@
-/*! Vanduo v1.4.1 | Built: 2026-05-23T09:27:52.907Z | git:4799a84 | development */
+/*! Vanduo v1.4.2 | Built: 2026-05-23T19:59:36.731Z | git:adbe750 | development */
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -201,7 +201,7 @@ module.exports = __toCommonJS(index_exports);
 // js/vanduo.js
 (function() {
   "use strict";
-  const VANDUO_VERSION = true ? "1.4.1" : "0.0.0-dev";
+  const VANDUO_VERSION = true ? "1.4.2" : "0.0.0-dev";
   const hasOwn = Object.prototype.hasOwnProperty;
   const Vanduo2 = {
     version: VANDUO_VERSION,
@@ -8959,6 +8959,27 @@ module.exports = __toCommonJS(index_exports);
     x.setDate(x.getDate() + (6 - day));
     return x;
   }
+  function positionAnchoredPopup(anchor, popup, gap) {
+    const padding = 8;
+    const offset = gap != null ? gap : 4;
+    const rect = anchor.getBoundingClientRect();
+    popup.style.minWidth = Math.max(rect.width, 0) + "px";
+    let top = rect.bottom + offset;
+    let left = rect.left;
+    popup.style.top = top + "px";
+    popup.style.left = left + "px";
+    const popRect = popup.getBoundingClientRect();
+    if (popRect.bottom > window.innerHeight - padding && rect.top - popRect.height > padding) {
+      top = rect.top - popRect.height - offset;
+      popup.style.top = top + "px";
+    }
+    const alignedRect = popup.getBoundingClientRect();
+    left = rect.left;
+    if (left + alignedRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - alignedRect.width - padding;
+    }
+    popup.style.left = Math.max(padding, left) + "px";
+  }
   const Datepicker = {
     instances: /* @__PURE__ */ new Map(),
     init: function(root) {
@@ -9040,7 +9061,7 @@ module.exports = __toCommonJS(index_exports);
       wrapper.style.display = "inline-block";
       input.parentNode.insertBefore(wrapper, input);
       wrapper.appendChild(input);
-      wrapper.appendChild(popup);
+      document.body.appendChild(popup);
       const isSameDay = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
       const selectDate = (date) => {
         selectedDate = date;
@@ -9270,6 +9291,9 @@ module.exports = __toCommonJS(index_exports);
           }
           popup.appendChild(grid);
         }
+        if (popup.classList.contains("is-open")) {
+          requestAnimationFrame(positionPopup);
+        }
       };
       const handleGridKeydown = (e) => {
         if (!popup.classList.contains("is-open") || viewMode !== "days") return;
@@ -9337,6 +9361,13 @@ module.exports = __toCommonJS(index_exports);
         render();
         requestAnimationFrame(focusFocusedDay);
       };
+      const positionPopup = () => {
+        if (!popup.classList.contains("is-open")) return;
+        positionAnchoredPopup(input, popup);
+      };
+      const repositionHandler = () => {
+        positionPopup();
+      };
       const open = () => {
         viewMode = "days";
         if (selectedDate) {
@@ -9354,7 +9385,10 @@ module.exports = __toCommonJS(index_exports);
         render();
         popup.classList.add("is-open");
         input.setAttribute("aria-expanded", "true");
-        requestAnimationFrame(focusFocusedDay);
+        requestAnimationFrame(() => {
+          positionPopup();
+          focusFocusedDay();
+        });
       };
       const close = () => {
         popup.classList.remove("is-open");
@@ -9369,7 +9403,7 @@ module.exports = __toCommonJS(index_exports);
         open();
       };
       const outsideHandler = (e) => {
-        if (!wrapper.contains(e.target)) close();
+        if (!input.contains(e.target) && !popup.contains(e.target)) close();
       };
       const escHandler = (e) => {
         if (e.key === "Escape" && popup.classList.contains("is-open")) {
@@ -9382,6 +9416,8 @@ module.exports = __toCommonJS(index_exports);
       document.addEventListener("click", outsideHandler, true);
       document.addEventListener("keydown", escHandler);
       popup.addEventListener("keydown", handleGridKeydown);
+      window.addEventListener("resize", repositionHandler);
+      window.addEventListener("scroll", repositionHandler, true);
       input.setAttribute("aria-haspopup", "dialog");
       input.setAttribute("aria-expanded", "false");
       input.setAttribute("autocomplete", "off");
@@ -9389,7 +9425,10 @@ module.exports = __toCommonJS(index_exports);
         () => input.removeEventListener("focus", focusHandler),
         () => document.removeEventListener("click", outsideHandler, true),
         () => document.removeEventListener("keydown", escHandler),
-        () => popup.removeEventListener("keydown", handleGridKeydown)
+        () => popup.removeEventListener("keydown", handleGridKeydown),
+        () => window.removeEventListener("resize", repositionHandler),
+        () => window.removeEventListener("scroll", repositionHandler, true),
+        () => popup.remove()
       );
       this.instances.set(input, { cleanup, open, close, popup });
     },
@@ -9412,6 +9451,27 @@ module.exports = __toCommonJS(index_exports);
 // js/components/timepicker.js
 (function() {
   "use strict";
+  function positionAnchoredPopup(anchor, popup, gap) {
+    const padding = 8;
+    const offset = gap != null ? gap : 4;
+    const rect = anchor.getBoundingClientRect();
+    popup.style.minWidth = Math.max(rect.width, 0) + "px";
+    let top = rect.bottom + offset;
+    let left = rect.left;
+    popup.style.top = top + "px";
+    popup.style.left = left + "px";
+    const popRect = popup.getBoundingClientRect();
+    if (popRect.bottom > window.innerHeight - padding && rect.top - popRect.height > padding) {
+      top = rect.top - popRect.height - offset;
+      popup.style.top = top + "px";
+    }
+    const alignedRect = popup.getBoundingClientRect();
+    left = rect.left;
+    if (left + alignedRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - alignedRect.width - padding;
+    }
+    popup.style.left = Math.max(padding, left) + "px";
+  }
   const Timepicker = {
     instances: /* @__PURE__ */ new Map(),
     init: function(root) {
@@ -9436,7 +9496,7 @@ module.exports = __toCommonJS(index_exports);
       const popup = document.createElement("div");
       popup.className = "vd-timepicker-popup";
       popup.setAttribute("role", "listbox");
-      wrapper.appendChild(popup);
+      document.body.appendChild(popup);
       const times = [];
       for (let h = 0; h < 24; h++) {
         for (let m = 0; m < 60; m += step) {
@@ -9476,12 +9536,22 @@ module.exports = __toCommonJS(index_exports);
           popup.appendChild(item);
         });
       };
+      const positionPopup = () => {
+        if (!popup.classList.contains("is-open")) return;
+        positionAnchoredPopup(input, popup);
+      };
+      const repositionHandler = () => {
+        positionPopup();
+      };
       const open = () => {
         render();
         popup.classList.add("is-open");
         input.setAttribute("aria-expanded", "true");
-        const selected = popup.querySelector(".is-selected");
-        if (selected) selected.scrollIntoView({ block: "center" });
+        requestAnimationFrame(() => {
+          positionPopup();
+          const selected = popup.querySelector(".is-selected");
+          if (selected) selected.scrollIntoView({ block: "center" });
+        });
       };
       const close = () => {
         popup.classList.remove("is-open");
@@ -9489,7 +9559,7 @@ module.exports = __toCommonJS(index_exports);
       };
       const focusHandler = () => open();
       const outsideHandler = (e) => {
-        if (!wrapper.contains(e.target)) close();
+        if (!input.contains(e.target) && !popup.contains(e.target)) close();
       };
       const escHandler = (e) => {
         if (e.key === "Escape") close();
@@ -9497,6 +9567,8 @@ module.exports = __toCommonJS(index_exports);
       input.addEventListener("focus", focusHandler);
       document.addEventListener("click", outsideHandler, true);
       document.addEventListener("keydown", escHandler);
+      window.addEventListener("resize", repositionHandler);
+      window.addEventListener("scroll", repositionHandler, true);
       input.setAttribute("aria-haspopup", "listbox");
       input.setAttribute("aria-expanded", "false");
       input.setAttribute("autocomplete", "off");
@@ -9504,7 +9576,10 @@ module.exports = __toCommonJS(index_exports);
       cleanup.push(
         () => input.removeEventListener("focus", focusHandler),
         () => document.removeEventListener("click", outsideHandler, true),
-        () => document.removeEventListener("keydown", escHandler)
+        () => document.removeEventListener("keydown", escHandler),
+        () => window.removeEventListener("resize", repositionHandler),
+        () => window.removeEventListener("scroll", repositionHandler, true),
+        () => popup.remove()
       );
       this.instances.set(input, { cleanup, open, close });
     },