@paroicms/tiny-modal 0.3.0 → 0.4.1

package/dist/tiny-modal.css

@@ -2,14 +2,20 @@
 .TinyModal {
   background: transparent;
   border: none;
-  margin: 0;
-  max-width: none;
+  margin: auto;
   padding: 0;
+  position: fixed;
+  overflow: visible;
+  max-width: 100vw;
+  max-height: 100vh;
 }
 .TinyModal::backdrop {
-  background-color: transparent;
+  background-color: rgba(34, 34, 34, 0.7333333333);
 }
-.TinyModal-closeBtn {
+.TinyModal-body {
+  overflow: scroll;
+}
+.TinyModal-closeButton {
   align-items: center;
   background-color: #bbb;
   border-radius: 50%;
@@ -21,20 +27,20 @@
   justify-content: center;
   line-height: 1;
   position: absolute;
-  right: 50px;
-  top: 10px;
+  right: -30px;
+  top: -30px;
   width: 40px;
   z-index: 2;
 }
-.TinyModal-closeBtn::before {
+.TinyModal-closeButton::before {
   content: "×";
 }
-.TinyModal-closeBtn:hover, .TinyModal-closeBtn:focus {
-  background-color: #888;
+@media (max-width: 400px) {
+  .TinyModal-closeButton {
+    right: -18px;
+  }
 }
 
-.HiddenForTinyModal {
+.TinyModalHidden {
   display: none !important;
 }
-
-/*# sourceMappingURL=tiny-modal.css.map */

package/dist/tiny-modal.d.ts

@@ -1,14 +1,16 @@
 export interface TinyModal {
+    on: (event: "open" | "close", listener: TinyModalEventListener) => void;
     open: () => void;
     close: () => void;
-    on: (event: "open" | "close", listener: TinyModalEventListener) => void;
 }
 export type TinyModalEventListener = () => void;
 export default function initializeTinyModal(options: {
-    openButton?: string | HTMLElement;
     dialogContent: HTMLElement;
+    openButton?: string | HTMLElement;
+    modalClass?: string;
 }): TinyModal;
 export default function initializeTinyModal(options: {
-    openButton?: string | HTMLElement;
     dialogContent: string;
+    openButton?: string | HTMLElement;
+    modalClass?: string;
 }): TinyModal | undefined;

package/dist/tiny-modal.js

@@ -1,4 +1,4 @@
-export default function initializeTinyModal({ openButton, dialogContent, }) {
+export default function initializeTinyModal({ openButton, dialogContent, modalClass, }) {
     const openBtnEl = openButton
         ? typeof openButton === "string"
             ? document.querySelector(openButton)
@@ -8,17 +8,20 @@ export default function initializeTinyModal({ openButton, dialogContent, }) {
     if (!contentEl)
         return;
     if (!(contentEl instanceof HTMLTemplateElement)) {
-        contentEl.classList.remove("HiddenForTinyModal");
+        contentEl.classList.remove("TinyModalHidden");
     }
     const dialogEl = document.createElement("dialog");
     dialogEl.classList.add("TinyModal");
+    if (modalClass) {
+        dialogEl.classList.add(modalClass);
+    }
     const closeBtnEl = document.createElement("button");
-    closeBtnEl.classList.add("TinyModal-closeBtn");
+    closeBtnEl.classList.add("TinyModal-closeButton");
     dialogEl.appendChild(closeBtnEl);
-    const wrapperEl = document.createElement("div");
-    wrapperEl.classList.add("TinyModal-wrapper");
-    wrapperEl.appendChild(contentEl instanceof HTMLTemplateElement ? contentEl.content.cloneNode(true) : contentEl);
-    dialogEl.appendChild(wrapperEl);
+    const bodyEl = document.createElement("div");
+    bodyEl.classList.add("TinyModal-body");
+    bodyEl.appendChild(contentEl instanceof HTMLTemplateElement ? contentEl.content.cloneNode(true) : contentEl);
+    dialogEl.appendChild(bodyEl);
     document.body.appendChild(dialogEl);
     const eventListeners = new Map();
     function on(event, listener) {
@@ -35,6 +38,7 @@ export default function initializeTinyModal({ openButton, dialogContent, }) {
     function open() {
         dialogEl.showModal();
         document.body.style.overflow = "hidden";
+        document.documentElement.style.overflow = "hidden";
         trigger("open");
     }
     function close() {
@@ -43,7 +47,8 @@ export default function initializeTinyModal({ openButton, dialogContent, }) {
     openBtnEl?.addEventListener("click", open);
     closeBtnEl.addEventListener("click", close);
     dialogEl.addEventListener("close", () => {
-        document.body.style.overflow = "";
+        document.body.style.removeProperty("overflow");
+        document.documentElement.style.removeProperty("overflow");
         trigger("close");
     });
     return { open, close, on };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paroicms/tiny-modal",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Tiny modal library for creating modal dialogs",
   "author": "Paroi Team",
   "repository": {
@@ -12,7 +12,7 @@
     "build": "tsc && npm run scss",
     "clear": "rimraf dist/*",
     "dev": "tsc --watch --preserveWatchOutput",
-    "scss": "sass src/tiny-modal.scss dist/tiny-modal.css",
+    "scss": "sass src/tiny-modal.scss dist/tiny-modal.css --no-source-map",
     "scss:watch": "sass --watch src/tiny-modal.scss dist/tiny-modal.css"
   },
   "keywords": [
@@ -24,7 +24,7 @@
   "main": "dist/tiny-modal.js",
   "typings": "dist/tiny-modal.d.ts",
   "devDependencies": {
-    "sass": "~1.84.0",
+    "sass": "~1.85.1",
     "rimraf": "~6.0.1",
     "typescript": "~5.8.2",
     "@paroicms/public-anywhere-lib": "0.19.0"

package/dist/tiny-modal.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../src/tiny-modal.scss"],"names":[],"mappings":";AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAEE;;;AAKN;EACE","file":"tiny-modal.css"}