@elmethis/qwik 0.0.17 → 0.0.18

package/lib/index.qwik.cjs

@@ -1060,15 +1060,15 @@ const ElmBlockFallback = qwik.component$(({ height = "16rem" }) => {
     ]
   });
 });
-const image$1 = "_image_zq5gl_11";
-const fallback = "_fallback_zq5gl_31";
+const image$1 = "_image_5s2ag_11";
+const fallback = "_fallback_5s2ag_33";
 const styles$g = {
-  "block-image": "_block-image_zq5gl_1",
-  "image-container": "_image-container_zq5gl_11",
+  "block-image": "_block-image_5s2ag_1",
+  "image-container": "_image-container_5s2ag_11",
   image: image$1,
   fallback,
-  "caption-box": "_caption-box_zq5gl_41",
-  "modal-container": "_modal-container_zq5gl_53"
+  "caption-box": "_caption-box_5s2ag_43",
+  "modal-container": "_modal-container_5s2ag_55"
 };
 const ElmBlockImage = qwik.component$(({ src, alt, caption: caption2, width, height, enableModal = true }) => {
   const isLoading = qwik.useSignal(true);
@@ -1077,7 +1077,7 @@ const ElmBlockImage = qwik.component$(({ src, alt, caption: caption2, width, hei
     isLoading.value = false;
   });
   const handleToggleModal = qwik.$(() => {
-    if (enableModal) {
+    if (enableModal && !isLoading.value) {
       isShowModal.value = !isShowModal.value;
     }
   });
@@ -1090,7 +1090,8 @@ const ElmBlockImage = qwik.component$(({ src, alt, caption: caption2, width, hei
     onLoad$: handleImageLoad,
     style: {
       "--opacity": isLoading.value ? 0 : 1,
-      "--cursor": enableModal ? isShowModal.value ? "zoom-out" : "zoom-in" : "default"
+      "--cursor": enableModal ? isShowModal.value ? "zoom-out" : "zoom-in" : "default",
+      "--aspect-ratio": width && height ? `${width} / ${height}` : "auto"
     }
   });
   const Modal = /* @__PURE__ */ jsxRuntime.jsx("div", {

package/lib/index.qwik.mjs

@@ -1058,15 +1058,15 @@ const ElmBlockFallback = component$(({ height = "16rem" }) => {
     ]
   });
 });
-const image$1 = "_image_zq5gl_11";
-const fallback = "_fallback_zq5gl_31";
+const image$1 = "_image_5s2ag_11";
+const fallback = "_fallback_5s2ag_33";
 const styles$g = {
-  "block-image": "_block-image_zq5gl_1",
-  "image-container": "_image-container_zq5gl_11",
+  "block-image": "_block-image_5s2ag_1",
+  "image-container": "_image-container_5s2ag_11",
   image: image$1,
   fallback,
-  "caption-box": "_caption-box_zq5gl_41",
-  "modal-container": "_modal-container_zq5gl_53"
+  "caption-box": "_caption-box_5s2ag_43",
+  "modal-container": "_modal-container_5s2ag_55"
 };
 const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height, enableModal = true }) => {
   const isLoading = useSignal(true);
@@ -1075,7 +1075,7 @@ const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height,
     isLoading.value = false;
   });
   const handleToggleModal = $(() => {
-    if (enableModal) {
+    if (enableModal && !isLoading.value) {
       isShowModal.value = !isShowModal.value;
     }
   });
@@ -1088,7 +1088,8 @@ const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height,
     onLoad$: handleImageLoad,
     style: {
       "--opacity": isLoading.value ? 0 : 1,
-      "--cursor": enableModal ? isShowModal.value ? "zoom-out" : "zoom-in" : "default"
+      "--cursor": enableModal ? isShowModal.value ? "zoom-out" : "zoom-in" : "default",
+      "--aspect-ratio": width && height ? `${width} / ${height}` : "auto"
     }
   });
   const Modal = /* @__PURE__ */ jsx("div", {

package/lib/style.css

@@ -434,7 +434,7 @@
 }
 [data-theme=dark] ._rectangle-wave_hej9g_17 {
   border-color: rgba(255, 255, 255, 0.7);
-}._block-image_zq5gl_1 {
+}._block-image_5s2ag_1 {
   margin: 0;
   display: flex;
   justify-content: center;
@@ -444,7 +444,7 @@
   width: 100%;
 }
 
-._image-container_zq5gl_11 {
+._image-container_5s2ag_11 {
   width: 100%;
   height: 100%;
   position: relative;
@@ -453,18 +453,20 @@
   align-items: center;
 }
 
-._image_zq5gl_11 {
+._image_5s2ag_11 {
   max-width: 100%;
-  max-height: 100%;
+  max-height: min(100%, 100vh);
+  height: auto;
   border-radius: 0.25rem;
   box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.1);
   transition: opacity 400ms;
   opacity: var(--opacity, 1);
   user-select: none;
+  aspect-ratio: var(--aspect-ratio, auto);
   cursor: var(--cursor);
 }
 
-._fallback_zq5gl_31 {
+._fallback_5s2ag_33 {
   width: 100%;
   height: 100%;
   inset: 0 0 auto auto;
@@ -474,7 +476,7 @@
   pointer-events: none;
 }
 
-._caption-box_zq5gl_41 {
+._caption-box_5s2ag_43 {
   box-sizing: border-box;
   padding: 0rem 1rem;
   display: flex;
@@ -486,7 +488,7 @@
   transition: opacity 400ms;
 }
 
-._modal-container_zq5gl_53 {
+._modal-container_5s2ag_55 {
   width: 100vw;
   height: 100vh;
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/qwik",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "publishConfig": {
     "access": "public"
   },