@elmethis/qwik 0.0.31 → 0.0.33

package/lib/index.qwik.cjs

@@ -2200,24 +2200,30 @@ const ElmSquareLoadingIcon = qwik.component$(({ size = "3rem", dimensions = 4 })
     }, `${rowIndex}-${columnIndex}`)))
   });
 });
-const image$1 = "_image_sf1wj_12";
-const fallback = "_fallback_sf1wj_34";
+const image$1 = "_image_slok6_12";
+const fallback = "_fallback_slok6_37";
 const styles$h = {
-  "block-image": "_block-image_sf1wj_1",
-  "image-container": "_image-container_sf1wj_12",
+  "block-image": "_block-image_slok6_1",
+  "image-container": "_image-container_slok6_12",
   image: image$1,
   fallback,
-  "caption-box": "_caption-box_sf1wj_44",
-  "modal-container": "_modal-container_sf1wj_56"
+  "caption-box": "_caption-box_slok6_45",
+  "modal-container": "_modal-container_slok6_57"
 };
 const ElmBlockImage = qwik.component$(({ src, alt, caption: caption2, width, height, enableModal = true, srcset, sizes, style }) => {
   const isLoading = qwik.useSignal(true);
   const isShowModal = qwik.useSignal(false);
+  const modalRef = qwik.useSignal();
   const handleImageLoad = qwik.$(() => {
     isLoading.value = false;
   });
   const handleToggleModal = qwik.$(() => {
     if (enableModal && !isLoading.value) {
+      if (isShowModal.value) {
+        modalRef.value?.hidePopover();
+      } else {
+        modalRef.value?.showPopover();
+      }
       isShowModal.value = !isShowModal.value;
     }
   });
@@ -2237,12 +2243,10 @@ const ElmBlockImage = qwik.component$(({ src, alt, caption: caption2, width, hei
     }
   });
   const Modal = /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ref: modalRef,
     class: styles$h["modal-container"],
-    style: {
-      pointerEvents: isShowModal.value ? "auto" : "none",
-      "--opacity": isShowModal.value ? 1 : 0
-    },
     onClick$: handleToggleModal,
+    popover: "manual",
     children: ImageComponent
   });
   return /* @__PURE__ */ jsxRuntime.jsxs("figure", {

package/lib/index.qwik.mjs

@@ -2198,24 +2198,30 @@ const ElmSquareLoadingIcon = component$(({ size = "3rem", dimensions = 4 }) => {
     }, `${rowIndex}-${columnIndex}`)))
   });
 });
-const image$1 = "_image_sf1wj_12";
-const fallback = "_fallback_sf1wj_34";
+const image$1 = "_image_slok6_12";
+const fallback = "_fallback_slok6_37";
 const styles$h = {
-  "block-image": "_block-image_sf1wj_1",
-  "image-container": "_image-container_sf1wj_12",
+  "block-image": "_block-image_slok6_1",
+  "image-container": "_image-container_slok6_12",
   image: image$1,
   fallback,
-  "caption-box": "_caption-box_sf1wj_44",
-  "modal-container": "_modal-container_sf1wj_56"
+  "caption-box": "_caption-box_slok6_45",
+  "modal-container": "_modal-container_slok6_57"
 };
 const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height, enableModal = true, srcset, sizes, style }) => {
   const isLoading = useSignal(true);
   const isShowModal = useSignal(false);
+  const modalRef = useSignal();
   const handleImageLoad = $(() => {
     isLoading.value = false;
   });
   const handleToggleModal = $(() => {
     if (enableModal && !isLoading.value) {
+      if (isShowModal.value) {
+        modalRef.value?.hidePopover();
+      } else {
+        modalRef.value?.showPopover();
+      }
       isShowModal.value = !isShowModal.value;
     }
   });
@@ -2235,12 +2241,10 @@ const ElmBlockImage = component$(({ src, alt, caption: caption2, width, height,
     }
   });
   const Modal = /* @__PURE__ */ jsx("div", {
+    ref: modalRef,
     class: styles$h["modal-container"],
-    style: {
-      pointerEvents: isShowModal.value ? "auto" : "none",
-      "--opacity": isShowModal.value ? 1 : 0
-    },
     onClick$: handleToggleModal,
+    popover: "manual",
     children: ImageComponent
   });
   return /* @__PURE__ */ jsxs("figure", {

package/lib/style.css

@@ -995,7 +995,7 @@
 }
 [data-theme=dark] ._square_13xd3_24 {
   background-color: #b0b5be;
-}._block-image_sf1wj_1 {
+}._block-image_slok6_1 {
   margin-block: var(--margin-block, 0);
   margin-inline: 0;
   display: flex;
@@ -1006,31 +1006,32 @@
   width: 100%;
 }
 
-._image-container_sf1wj_12 {
+._image-container_slok6_12 {
   width: 100%;
   height: 100%;
   position: relative;
+
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-._image_sf1wj_12 {
+._image_slok6_12 {
+  box-sizing: border-box;
   max-width: 100%;
   max-height: min(100%, 100vh);
   height: auto;
   border-radius: 0.25rem;
-  box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 0.125rem oklch(from black l c h / 0.1);
   transition: opacity 400ms;
   opacity: var(--opacity, 1);
   user-select: none;
   aspect-ratio: var(--aspect-ratio, auto);
+
   cursor: var(--cursor);
 }
 
-._fallback_sf1wj_34 {
-  width: 100%;
-  height: 100%;
+._fallback_slok6_37 {
   inset: 0 0 auto auto;
   position: absolute;
   transition: opacity 400ms;
@@ -1038,7 +1039,7 @@
   pointer-events: none;
 }
 
-._caption-box_sf1wj_44 {
+._caption-box_slok6_45 {
   box-sizing: border-box;
   padding: 0rem 1rem;
   display: flex;
@@ -1050,20 +1051,59 @@
   transition: opacity 400ms;
 }
 
-._modal-container_sf1wj_56 {
-  width: 100vw;
+._modal-container_slok6_57 {
+  width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
-  position: fixed;
-  inset: 0 0 auto auto;
-  z-index: 100;
-  background-color: rgba(35, 38, 42, 0.8);
-  cursor: zoom-out;
-  opacity: var(--opacity, 1);
-  transition: opacity 200ms;
-}._file_eqa3m_1 {
+  overflow: hidden;
+  opacity: 0;
+  transform: scale(0.95);
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  margin: auto;
+  pointer-events: none;
+  transition:
+    opacity 200ms,
+    transform 200ms,
+    display 200ms allow-discrete,
+    overlay 200ms allow-discrete;
+
+  &::backdrop {
+    background-color: oklch(from #23262a l c h / 0.8);
+    opacity: 0;
+
+    transition:
+      background-color 200ms,
+      opacity 200ms,
+      display 200ms allow-discrete,
+      overlay 200ms allow-discrete;
+  }
+
+  &:popover-open {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+
+    &::backdrop {
+      opacity: 1;
+    }
+  }
+}
+
+@starting-style {
+  ._modal-container_slok6_57:popover-open {
+    opacity: 0;
+    transform: scale(0.95);
+
+    &::backdrop {
+      opacity: 0;
+    }
+  }
+}
+._file_eqa3m_1 {
   margin-block: var(--margin-block, 0);
   padding: 1rem;
   display: grid;

package/package.json

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