@paroicms/tiny-modal 0.7.1 → 0.7.2

package/dist/tiny-modal.css

@@ -2,18 +2,22 @@
 .TinyModal {
   background: transparent;
   border: none;
+  display: flex;
+  flex-direction: column;
   margin: auto;
+  max-height: 100dvh;
+  max-width: 100dvw;
   padding: 0;
   position: fixed;
-  overflow: visible;
-  max-width: 100vw;
-  max-height: 100vh;
 }
 .TinyModal::backdrop {
   background-color: rgba(34, 34, 34, 0.7333333333);
 }
 .TinyModal-body {
-  overflow: scroll;
+  flex: 1;
+  max-width: 100%;
+  min-height: 0;
+  overflow: auto;
 }
 .TinyModal-closeButton {
   align-items: center;
@@ -40,6 +44,12 @@
     right: -18px;
   }
 }
+.TinyModal.fullHeight .TinyModal-closeButton {
+  top: 5px;
+}
+.TinyModal.fullWidth .TinyModal-closeButton {
+  right: 5px;
+}
 
 .TinyModalHidden {
   display: none !important;

package/dist/tiny-modal.d.ts

@@ -8,9 +8,11 @@ export default function initializeTinyModal(options: {
     dialogContent: HTMLElement;
     openButton?: string | HTMLElement;
     modalClass?: string;
+    loadCss?: boolean;
 }): TinyModal;
 export default function initializeTinyModal(options: {
     dialogContent: string;
     openButton?: string | HTMLElement;
     modalClass?: string;
+    loadCss?: boolean;
 }): TinyModal | undefined;

package/dist/tiny-modal.js

@@ -1,4 +1,8 @@
-export default function initializeTinyModal({ openButton, dialogContent, modalClass, }) {
+let cssLoaded = false;
+export default function initializeTinyModal({ openButton, dialogContent, modalClass, loadCss, }) {
+    if (loadCss) {
+        loadCssFromModuleUrl();
+    }
     const openBtnEl = openButton
         ? typeof openButton === "string"
             ? document.querySelector(openButton)
@@ -23,7 +27,6 @@ export default function initializeTinyModal({ openButton, dialogContent, modalCl
     bodyEl.appendChild(contentEl instanceof HTMLTemplateElement ? contentEl.content.cloneNode(true) : contentEl);
     dialogEl.appendChild(bodyEl);
     document.body.appendChild(dialogEl);
-    // change the map to use the specific event union
     const eventListeners = new Map();
     function on(eventName, listener) {
         if (!eventListeners.has(eventName)) {
@@ -38,6 +41,31 @@ export default function initializeTinyModal({ openButton, dialogContent, modalCl
             });
         }
     }
+    function updateCloseButtonPosition() {
+        const dialogRect = dialogEl.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        // Check if dialog is full height (with small tolerance for rounding)
+        if (Math.abs(dialogRect.height - viewportHeight) < 2) {
+            dialogEl.classList.add("fullHeight");
+        }
+        else {
+            dialogEl.classList.remove("fullHeight");
+        }
+        // Check if dialog is full width (with small tolerance for rounding)
+        if (Math.abs(dialogRect.width - viewportWidth) < 2) {
+            dialogEl.classList.add("fullWidth");
+        }
+        else {
+            dialogEl.classList.remove("fullWidth");
+        }
+    }
+    const resizeObserver = new ResizeObserver(() => {
+        if (dialogEl.open) {
+            updateCloseButtonPosition();
+        }
+    });
+    resizeObserver.observe(dialogEl);
     function open() {
         dialogEl.showModal();
         document.body.style.overflow = "hidden";
@@ -56,3 +84,30 @@ export default function initializeTinyModal({ openButton, dialogContent, modalCl
     });
     return { open, close, on };
 }
+function loadCssFromModuleUrl() {
+    if (cssLoaded)
+        return;
+    const moduleUrl = import.meta.url;
+    if (!moduleUrl)
+        throw new Error("import.meta.url not available");
+    // Derive CSS URL from the module URL
+    // e.g., https://esm.sh/@paroicms/tiny-modal@0.7.1 -> https://esm.sh/@paroicms/tiny-modal@0.7.1/dist/tiny-modal.css
+    // or https://esm.sh/@paroicms/tiny-modal@0.7.1/dist/tiny-modal.js -> https://esm.sh/@paroicms/tiny-modal@0.7.1/dist/tiny-modal.css
+    const cssUrl = moduleUrl.replace(/\/[^/]+\.m?js$/, () => {
+        if (moduleUrl.includes("/dist/")) {
+            return "/tiny-modal.css";
+        }
+        return "/dist/tiny-modal.css";
+    });
+    // Check if CSS is already loaded
+    if (document.querySelector(`link[href="${cssUrl}"]`)) {
+        cssLoaded = true;
+        return;
+    }
+    // Inject CSS link
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = cssUrl;
+    document.head.appendChild(link);
+    cssLoaded = true;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/tiny-modal",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Tiny modal library for creating modal dialogs",
   "author": "Paroi Team",
   "repository": {