@benqoder/beam 0.1.0 → 0.1.2

package/dist/client.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,SAAS,CAAA;AAkB9D,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAGD,UAAU,UAAU;IAClB,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,cAAc,CAAC,CAAA;IAC7E,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;IACvE,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;IACzE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAClF;AAGD,KAAK,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AA2tBzC,iBAAS,UAAU,IAAI,IAAI,CAU1B;AA2CD,iBAAS,WAAW,IAAI,IAAI,CAU3B;AAID,iBAAS,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,GAAE,SAAS,GAAG,OAAmB,GAAG,IAAI,CAsB/E;AAwqBD,iBAAS,UAAU,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAUzC;AAogBD,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAMD,iBAAS,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CA0B9D;AAGD,QAAA,MAAM,SAAS;;;;;;;sBA/6DO,OAAO,CAAC,cAAc,CAAC;CAu7D5C,CAAA;AAGD,KAAK,YAAY,GAAG,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,KAAK,OAAO,CAAC,cAAc,CAAC,CAAA;AAE/G,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,IAAI,EAAE,OAAO,SAAS,GAAG;YACvB,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,CAAA;SAC/B,CAAA;KACF;CACF"}
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AACA,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,SAAS,CAAA;AAkB9D,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAGD,UAAU,UAAU;IAClB,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,cAAc,CAAC,CAAA;IAC7E,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;IACvE,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAAA;IACzE,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;CAClF;AAGD,KAAK,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC,CAAA;AAiuBzC,iBAAS,UAAU,IAAI,IAAI,CAU1B;AA2CD,iBAAS,WAAW,IAAI,IAAI,CAU3B;AAID,iBAAS,SAAS,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,GAAE,SAAS,GAAG,OAAmB,GAAG,IAAI,CAsB/E;AAwqBD,iBAAS,UAAU,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAUzC;AAogBD,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAMD,iBAAS,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CA0B9D;AAGD,QAAA,MAAM,SAAS;;;;;;;sBAr7DO,OAAO,CAAC,cAAc,CAAC;CA67D5C,CAAA;AAGD,KAAK,YAAY,GAAG,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,KAAK,OAAO,CAAC,cAAc,CAAC,CAAA;AAE/G,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,IAAI,EAAE,OAAO,SAAS,GAAG;YACvB,CAAC,MAAM,EAAE,MAAM,GAAG,YAAY,CAAA;SAC/B,CAAA;KACF;CACF"}

package/dist/client.js

@@ -572,9 +572,10 @@ document.addEventListener('click', (e) => {
         if (!checkConfirm(trigger))
             return;
         const modalId = trigger.getAttribute('beam-modal');
+        const size = trigger.getAttribute('beam-size') || 'medium';
         const params = getParams(trigger);
         if (modalId) {
-            openModal(modalId, params);
+            openModal(modalId, params, { size });
         }
     }
     // Close on backdrop click
@@ -626,7 +627,7 @@ document.addEventListener('keydown', (e) => {
         }
     }
 });
-async function openModal(id, params = {}) {
+async function openModal(id, params = {}, options = { size: 'medium' }) {
     try {
         const html = await api.modal(id, params);
         let backdrop = $('#modal-backdrop');
@@ -635,8 +636,9 @@ async function openModal(id, params = {}) {
             backdrop.id = 'modal-backdrop';
             document.body.appendChild(backdrop);
         }
+        const { size } = options;
         backdrop.innerHTML = `
-      <div id="modal-content" role="dialog" aria-modal="true">
+      <div id="modal-content" role="dialog" aria-modal="true" data-size="${size}">
         ${html}
       </div>
     `;
@@ -658,7 +660,7 @@ function closeModal() {
     if (backdrop) {
         backdrop.classList.remove('open');
         setTimeout(() => {
-            backdrop.innerHTML = '';
+            backdrop.remove();
         }, 200);
     }
     document.body.classList.remove('modal-open');
@@ -698,7 +700,7 @@ function closeDrawer() {
     if (backdrop) {
         backdrop.classList.remove('open');
         setTimeout(() => {
-            backdrop.innerHTML = '';
+            backdrop.remove();
         }, 200);
     }
     document.body.classList.remove('drawer-open');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@benqoder/beam",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -42,7 +42,7 @@
     "capnweb": "^0.4.0",
     "hono": "^4.0.0",
     "honox": "^0.1.0",
-    "idiomorph": "^0.3.0",
+    "idiomorph": "^0.7.0",
     "vite": "^5.0.0 || ^6.0.0"
   },
   "peerDependenciesMeta": {
@@ -55,7 +55,7 @@
     "capnweb": "^0.4.0",
     "hono": "^4.6.0",
     "honox": "^0.1.0",
-    "idiomorph": "^0.3.0",
+    "idiomorph": "^0.7.4",
     "typescript": "^5.0.0",
     "vite": "^6.0.0"
   }

package/src/beam.css

@@ -120,8 +120,8 @@
 #modal-content {
   background: white;
   border-radius: 0.5rem;
-  max-width: 32rem;
   width: 100%;
+  max-width: 32rem;
   max-height: calc(100vh - 2rem);
   overflow: auto;
   transform: scale(0.95);
@@ -134,6 +134,28 @@
   opacity: 1;
 }
 
+/* Modal sizes */
+#modal-content[data-size="small"] {
+  max-width: 24rem;
+}
+
+#modal-content[data-size="medium"] {
+  max-width: 32rem;
+}
+
+#modal-content[data-size="large"] {
+  max-width: 42rem;
+}
+
+#modal-content[data-size="xl"] {
+  max-width: 56rem;
+}
+
+#modal-content[data-size="full"] {
+  max-width: calc(100% - 2rem);
+  max-height: calc(100vh - 2rem);
+}
+
 /* Drawer backdrop */
 #drawer-backdrop {
   position: fixed;
@@ -188,42 +210,85 @@
   transform: translateX(0) translateY(0);
 }
 
-/* Drawer sizes */
+/* Drawer sizes - mobile first with max-width constraint */
+#drawer-content[data-position="left"],
+#drawer-content[data-position="right"] {
+  width: 100%;
+  max-width: 100%;
+}
+
 #drawer-content[data-size="small"] {
-  width: 20rem;
+  max-width: 20rem;
 }
 
 #drawer-content[data-size="medium"] {
-  width: 28rem;
+  max-width: 28rem;
 }
 
 #drawer-content[data-size="large"] {
-  width: 36rem;
+  max-width: 36rem;
+}
+
+#drawer-content[data-size="xl"] {
+  max-width: 48rem;
 }
 
 #drawer-content[data-size="full"] {
-  width: 100%;
+  max-width: 100%;
+}
+
+/* Responsive: on larger screens, use the defined max-width as width */
+@media (min-width: 640px) {
+  #drawer-content[data-size="small"] {
+    width: 20rem;
+  }
+
+  #drawer-content[data-size="medium"] {
+    width: 28rem;
+  }
+
+  #drawer-content[data-size="large"] {
+    width: 36rem;
+  }
+
+  #drawer-content[data-size="xl"] {
+    width: 48rem;
+  }
 }
 
 /* Vertical drawers (top/bottom) use height instead */
+#drawer-content[data-position="top"],
+#drawer-content[data-position="bottom"] {
+  width: 100%;
+  max-width: 100%;
+  max-height: 90vh;
+}
+
 #drawer-content[data-position="top"][data-size="small"],
 #drawer-content[data-position="bottom"][data-size="small"] {
-  width: 100%;
   height: 25vh;
 }
 
 #drawer-content[data-position="top"][data-size="medium"],
 #drawer-content[data-position="bottom"][data-size="medium"] {
-  width: 100%;
   height: 50vh;
 }
 
 #drawer-content[data-position="top"][data-size="large"],
 #drawer-content[data-position="bottom"][data-size="large"] {
-  width: 100%;
   height: 75vh;
 }
 
+#drawer-content[data-position="top"][data-size="xl"],
+#drawer-content[data-position="bottom"][data-size="xl"] {
+  height: 85vh;
+}
+
+#drawer-content[data-position="top"][data-size="full"],
+#drawer-content[data-position="bottom"][data-size="full"] {
+  height: 100vh;
+}
+
 /* Prevent body scroll when modal/drawer open */
 body.modal-open,
 body.drawer-open {