@elmethis/core 1.0.0-alpha.181 → 1.0.0-alpha.183

package/dist/components/media/ElmBlockImage.vue.d.ts

@@ -1,10 +1,12 @@
-import { ElmImageProps } from './ElmImage.vue';
-export type ElmBlockImageProps = {
-    rounded?: boolean;
-    shadow?: boolean;
-} & ElmImageProps;
-declare const _default: import('vue').DefineComponent<ElmBlockImageProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmBlockImageProps> & Readonly<{}>, {
-    rounded: boolean;
-    shadow: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export interface ElmBlockImageProps {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Image alt text
+     */
+    alt?: string;
+}
+declare const _default: import('vue').DefineComponent<ElmBlockImageProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmBlockImageProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/media/ElmBlockImage.vue.mjs

@@ -1,10 +1,22 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode(".v-enter-to[data-v-090cf1b2],.v-leave-from[data-v-090cf1b2]{opacity:1}.v-enter-active[data-v-090cf1b2],.v-leave-active[data-v-090cf1b2]{transition:opacity .3s}.v-enter-from[data-v-090cf1b2],.v-leave-to[data-v-090cf1b2]{opacity:0}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
 import _sfc_main from "./ElmBlockImage.vue2.mjs";
 import style0 from "./ElmBlockImage.vue3.mjs";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
 const cssModules = {
   "$style": style0
 };
-const ElmBlockImage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+const ElmBlockImage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-090cf1b2"]]);
 export {
   ElmBlockImage as default
 };

package/dist/components/media/ElmBlockImage.vue2.mjs

@@ -1,30 +1,85 @@
-import { defineComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, normalizeProps, guardReactiveProps } from "vue";
-import ElmImage from "./ElmImage.vue.mjs";
+import { defineComponent, ref, createElementBlock, openBlock, Fragment, createElementVNode, createVNode, normalizeClass, Transition, withCtx, unref, normalizeStyle, createCommentVNode } from "vue";
+import ElmRectangleWave from "../fallback/ElmRectangleWave.vue.mjs";
+import ElmDotLoadingIcon from "../icon/ElmDotLoadingIcon.vue.mjs";
+import { useImage, onKeyStroke } from "@vueuse/core";
+import ElmInlineText from "../inline/ElmInlineText.vue.mjs";
+const _hoisted_1 = ["src", "alt"];
+const _hoisted_2 = ["src", "alt"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ElmBlockImage",
   props: {
-    rounded: { type: Boolean, default: true },
-    shadow: { type: Boolean, default: true },
     src: {},
-    alt: {},
-    enableModal: { type: Boolean },
-    margin: {}
+    alt: {}
   },
   setup(__props) {
     const props = __props;
+    const { isLoading, error } = useImage({ src: props.src });
+    const isModalOpen = ref(false);
+    onKeyStroke("Escape", (e) => {
+      e.preventDefault();
+      isModalOpen.value = false;
+    });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(_ctx.$style.container)
-      }, [
+      return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("div", {
-          style: normalizeStyle({
-            boxShadow: _ctx.shadow ? "0 0 0.125rem #b3b3b3" : void 0,
-            ..._ctx.rounded ? { borderRadius: "0.25rem", overflow: "hidden" } : {}
-          })
+          class: normalizeClass(_ctx.$style.container)
         }, [
-          createVNode(ElmImage, normalizeProps(guardReactiveProps(props)), null, 16)
-        ], 4)
-      ], 2);
+          createVNode(Transition, { mode: "out-in" }, {
+            default: withCtx(() => [
+              unref(error) ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: normalizeClass(_ctx.$style.error)
+              }, [
+                createVNode(ElmInlineText, {
+                  text: "Error loading image",
+                  color: "#c56565",
+                  size: "1.5rem"
+                })
+              ], 2)) : unref(isLoading) ? (openBlock(), createElementBlock("div", {
+                key: 1,
+                class: normalizeClass(_ctx.$style.fallback)
+              }, [
+                createVNode(ElmRectangleWave),
+                createElementVNode("div", null, [
+                  createVNode(ElmDotLoadingIcon)
+                ])
+              ], 2)) : (openBlock(), createElementBlock("img", {
+                key: 2,
+                class: normalizeClass(_ctx.$style.image),
+                src: _ctx.src,
+                alt: _ctx.alt,
+                onClick: _cache[0] || (_cache[0] = () => {
+                  isModalOpen.value = true;
+                }),
+                style: normalizeStyle({
+                  "--height": unref(isLoading) ? "0" : "auto",
+                  "--opacity": unref(isLoading) ? 0 : 1,
+                  display: unref(isLoading) ? "none" : "block"
+                })
+              }, null, 14, _hoisted_1))
+            ]),
+            _: 1
+          })
+        ], 2),
+        createVNode(Transition, null, {
+          default: withCtx(() => [
+            isModalOpen.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(_ctx.$style.modal)
+            }, [
+              createElementVNode("img", {
+                class: normalizeClass(_ctx.$style["modal-image"]),
+                src: _ctx.src,
+                alt: _ctx.alt,
+                onClick: _cache[1] || (_cache[1] = () => {
+                  isModalOpen.value = false;
+                })
+              }, null, 10, _hoisted_2)
+            ], 2)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ], 64);
     };
   }
 });

package/dist/components/media/ElmBlockImage.vue3.mjs

@@ -3,18 +3,31 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("._container_ppumw_1{width:100%;display:flex;justify-content:center}"));
+      elementStyle.appendChild(document.createTextNode("._container_1y2x6_1{width:100%;display:flex;justify-content:center;align-items:center}._image_1y2x6_8{overflow:hidden;border-radius:.25rem;box-shadow:0 0 .25rem #0000004d;display:block;max-width:100%;height:var(--height);opacity:var(--opacity);transition:opacity .4s;cursor:zoom-in}._error_1y2x6_20{display:flex;justify-content:center;align-items:center;gap:1rem;width:100%;height:100%;min-height:10rem;line-height:1.5rem;color:#c56565}._fallback_1y2x6_32{margin-block:1rem;margin:0;padding:0;position:relative;width:100%;z-index:1;display:flex;justify-content:center;align-items:center;aspect-ratio:1200/630}._modal_1y2x6_45{z-index:1000;position:fixed;width:100%;height:100vh;top:0;left:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;cursor:zoom-out}._modal_1y2x6_45 ._modal-image_1y2x6_58{width:100vw;height:100vh;-o-object-fit:contain;object-fit:contain}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-const container = "_container_ppumw_1";
+const container = "_container_1y2x6_1";
+const image = "_image_1y2x6_8";
+const error = "_error_1y2x6_20";
+const fallback = "_fallback_1y2x6_32";
+const modal = "_modal_1y2x6_45";
 const style0 = {
-  container
+  container,
+  image,
+  error,
+  fallback,
+  modal,
+  "modal-image": "_modal-image_1y2x6_58"
 };
 export {
   container,
-  style0 as default
+  style0 as default,
+  error,
+  fallback,
+  image,
+  modal
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/core",
-  "version": "1.0.0-alpha.181",
+  "version": "1.0.0-alpha.183",
   "publishConfig": {
     "access": "public"
   },