@elmethis/core 0.1.9 → 0.2.0

package/dist/components/code/ElmCodeBlock.vue.mjs

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode(".v-enter-to[data-v-ea96c386],.v-leave-from[data-v-ea96c386]{opacity:1}.v-enter-active[data-v-ea96c386],.v-leave-active[data-v-ea96c386]{transition:opacity .15s}.v-enter-from[data-v-ea96c386],.v-leave-to[data-v-ea96c386]{opacity:0}"));
+      elementStyle.appendChild(document.createTextNode(".v-enter-to[data-v-fd68c0a3],.v-leave-from[data-v-fd68c0a3]{opacity:1}.v-enter-active[data-v-fd68c0a3],.v-leave-active[data-v-fd68c0a3]{transition:opacity .15s}.v-enter-from[data-v-fd68c0a3],.v-leave-to[data-v-fd68c0a3]{opacity:0}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -17,7 +17,7 @@ import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
 const cssModules = {
   "$style": style0
 };
-const ElmCodeBlock = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-ea96c386"]]);
+const ElmCodeBlock = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-fd68c0a3"]]);
 export {
   ElmCodeBlock as default
 };

package/dist/components/code/ElmCodeBlock.vue2.mjs

@@ -59,7 +59,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               language: _ctx.language,
               size: 20
             }, null, 8, ["language"]),
-            (openBlock(), createBlock(resolveDynamicComponent(() => renderCaption())))
+            createElementVNode("span", {
+              class: normalizeClass(_ctx.$style.caption)
+            }, [
+              (openBlock(), createBlock(resolveDynamicComponent(() => renderCaption())))
+            ], 2)
           ], 2),
           createElementVNode("div", {
             ref: "tooltipRef",

package/dist/components/code/ElmCodeBlock.vue3.mjs

@@ -3,32 +3,35 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("._wrapper_11asa_1{margin-block:var(--margin-block);opacity:var(--opacity);display:flex;flex-direction:column;border-radius:.25rem;transition:background-color .4s,opacity .8s;background-color:#fff6;box-shadow:0 0 .125rem #3e434b4d}[data-theme=dark] ._wrapper_11asa_1{background-color:#2c3037e6;box-shadow:0 0 .125rem #0006}._header_11asa_16{box-sizing:border-box;padding:.25rem .5rem .5rem;margin:.5rem;display:flex;flex-direction:row;justify-content:space-between;font-family:Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;border-bottom:solid 1px rgba(62,67,75,.3)}[data-theme=dark] ._header_11asa_16{border-color:#bec2ca4d}._header__left_11asa_30{display:flex;flex-direction:row;align-items:center;gap:.5rem}._copy-icon_11asa_37{box-sizing:border-box;padding:.125rem;width:26px;height:26px;border-radius:.125rem;cursor:pointer;transition:background-color .2s;color:#000000b3}[data-theme=dark] ._copy-icon_11asa_37{color:#ffffffb3}._copy-icon_11asa_37:hover{background-color:#0000001a}[data-theme=dark] ._copy-icon_11asa_37:hover{background-color:#ffffff1a}._header__right_11asa_57{position:relative;display:flex;flex-direction:row;align-items:center;gap:.5rem}._code_11asa_65{position:relative;padding:.25rem 1rem 1rem;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(105,135,184,.3) rgba(105,135,184,.15)}._code-body_11asa_73{transition:opacity .2s}._fallback_11asa_77{position:absolute;top:0;left:0;height:100%;width:100%;box-sizing:border-box;padding:auto;display:flex;justify-content:center;align-items:center;transition:opacity .2s;pointer-events:none}._tooltip_11asa_92{position:absolute;bottom:-2.5rem;right:0;display:flex;flex-wrap:none;justify-content:center;align-items:center;gap:.25rem;height:20px;white-space:nowrap}"));
+      elementStyle.appendChild(document.createTextNode("._wrapper_1ysrf_1{margin-block:var(--margin-block);opacity:var(--opacity);display:flex;flex-direction:column;border-radius:.25rem;transition:background-color .4s,opacity .8s;background-color:#fff6;box-shadow:0 0 .125rem #3e434b4d}[data-theme=dark] ._wrapper_1ysrf_1{background-color:#2c3037e6;box-shadow:0 0 .125rem #0006}._header_1ysrf_16{box-sizing:border-box;width:calc(100% - 1rem);padding:.25rem .5rem .5rem;margin:.5rem;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;font-family:Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;border-bottom:solid 1px rgba(62,67,75,.3)}[data-theme=dark] ._header_1ysrf_16{border-color:#bec2ca4d}._header__left_1ysrf_32{width:calc(100% - 2rem);display:flex;flex-direction:row;align-items:center;gap:.5rem}._caption_1ysrf_40{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}._copy-icon_1ysrf_46{box-sizing:border-box;padding:.125rem;width:26px;height:26px;border-radius:.125rem;cursor:pointer;transition:background-color .2s;color:#000000b3}[data-theme=dark] ._copy-icon_1ysrf_46{color:#ffffffb3}._copy-icon_1ysrf_46:hover{background-color:#0000001a}[data-theme=dark] ._copy-icon_1ysrf_46:hover{background-color:#ffffff1a}._header__right_1ysrf_66{position:relative;display:flex;flex-direction:row;align-items:center;gap:.5rem}._code_1ysrf_74{position:relative;padding:.25rem 1rem 1rem;overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(105,135,184,.3) rgba(105,135,184,.15)}._code-body_1ysrf_82{transition:opacity .2s}._fallback_1ysrf_86{position:absolute;top:0;left:0;height:100%;width:100%;box-sizing:border-box;padding:auto;display:flex;justify-content:center;align-items:center;transition:opacity .2s;pointer-events:none}._tooltip_1ysrf_101{position:absolute;bottom:-2.5rem;right:0;display:flex;flex-wrap:none;justify-content:center;align-items:center;gap:.25rem;height:20px;white-space:nowrap}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-const wrapper = "_wrapper_11asa_1";
-const header = "_header_11asa_16";
-const header__left = "_header__left_11asa_30";
-const header__right = "_header__right_11asa_57";
-const code = "_code_11asa_65";
-const fallback = "_fallback_11asa_77";
-const tooltip = "_tooltip_11asa_92";
+const wrapper = "_wrapper_1ysrf_1";
+const header = "_header_1ysrf_16";
+const header__left = "_header__left_1ysrf_32";
+const caption = "_caption_1ysrf_40";
+const header__right = "_header__right_1ysrf_66";
+const code = "_code_1ysrf_74";
+const fallback = "_fallback_1ysrf_86";
+const tooltip = "_tooltip_1ysrf_101";
 const style0 = {
   wrapper,
   header,
   header__left,
-  "copy-icon": "_copy-icon_11asa_37",
+  caption,
+  "copy-icon": "_copy-icon_1ysrf_46",
   header__right,
   code,
-  "code-body": "_code-body_11asa_73",
+  "code-body": "_code-body_1ysrf_82",
   fallback,
   tooltip
 };
 export {
+  caption,
   code,
   style0 as default,
   fallback,

package/dist/components/media/ElmImage.stories.d.ts

@@ -5,5 +5,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
 export declare const Svg: Story;
-export declare const Modal: Story;
+export declare const LongAlt: Story;
 export declare const Invalid: Story;

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

@@ -8,6 +8,7 @@ export interface ElmImageProps {
      * Image alt text
      */
     alt?: string;
+    block?: boolean;
     /**
      * Enable modal on image click. Default: `false`
      */
@@ -18,6 +19,7 @@ export interface ElmImageProps {
     margin?: Property.MarginBlock;
 }
 declare const _default: import('vue').DefineComponent<ElmImageProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmImageProps> & Readonly<{}>, {
+    block: boolean;
     enableModal: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

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

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

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

@@ -1,8 +1,11 @@
-import { defineComponent, ref, createElementBlock, openBlock, Fragment, createVNode, Transition, withCtx, unref, normalizeClass, normalizeStyle, createElementVNode, createCommentVNode } from "vue";
+import { defineComponent, ref, createElementBlock, openBlock, normalizeClass, createVNode, Transition, unref, withCtx, normalizeStyle, createElementVNode, 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 "../typography/ElmInlineText.vue.mjs";
+import fadeStyle from "../../styles/transition-fade.module.scss.mjs";
+import { mdiMessageImageOutline } from "@mdi/js";
+import ElmMdiIcon from "../icon/ElmMdiIcon.vue.mjs";
 const _hoisted_1 = ["src", "alt"];
 const _hoisted_2 = ["src", "alt"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -10,6 +13,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     src: {},
     alt: {},
+    block: { type: Boolean, default: false },
     enableModal: { type: Boolean, default: false },
     margin: {}
   },
@@ -22,8 +26,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       isModalOpen.value = false;
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        createVNode(Transition, { mode: "out-in" }, {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.wrapper)
+      }, [
+        createVNode(Transition, {
+          mode: "out-in",
+          "enter-from-class": unref(fadeStyle)["fade-enter-from"],
+          "enter-active-class": unref(fadeStyle)["fade-enter-active"],
+          "enter-to-class": unref(fadeStyle)["fade-fast-enter-to"],
+          "leave-from-class": unref(fadeStyle)["fade-fast-leave-from"],
+          "leave-active-class": unref(fadeStyle)["fade-fast-leave-active"],
+          "leave-to-class": unref(fadeStyle)["fade-fast-leave-to"]
+        }, {
           default: withCtx(() => [
             unref(error) ? (openBlock(), createElementBlock("div", {
               key: 0,
@@ -45,26 +59,56 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])
             ], 6)) : (openBlock(), createElementBlock("img", {
               key: 2,
-              class: normalizeClass(_ctx.$style.image),
+              class: normalizeClass(_ctx.block ? _ctx.$style["image-block"] : _ctx.$style.image),
               src: _ctx.src,
               alt: _ctx.alt,
-              onClick: _cache[0] || (_cache[0] = () => {
-                if (_ctx.enableModal) {
-                  isModalOpen.value = true;
-                }
-              }),
+              onClick: _cache[0] || (_cache[0] = ($event) => isModalOpen.value = true),
               style: normalizeStyle({
-                "--height": unref(isLoading) ? "0" : "auto",
-                "--opacity": unref(isLoading) ? 0 : 1,
                 "--cursor": _ctx.enableModal ? "zoom-in" : "inherit",
-                "--margin-block": _ctx.margin,
-                display: unref(isLoading) ? "none" : "block"
+                "--margin-block": _ctx.margin
               })
             }, null, 14, _hoisted_1))
           ]),
           _: 1
-        }),
-        createVNode(Transition, null, {
+        }, 8, ["enter-from-class", "enter-active-class", "enter-to-class", "leave-from-class", "leave-active-class", "leave-to-class"]),
+        createVNode(Transition, {
+          "enter-from-class": unref(fadeStyle)["fade-enter-from"],
+          "enter-active-class": unref(fadeStyle)["fade-enter-active"],
+          "enter-to-class": unref(fadeStyle)["fade-enter-to"],
+          "leave-from-class": unref(fadeStyle)["fade-leave-from"],
+          "leave-active-class": unref(fadeStyle)["fade-leave-active"],
+          "leave-to-class": unref(fadeStyle)["fade-leave-to"]
+        }, {
+          default: withCtx(() => [
+            _ctx.block && !unref(isLoading) && _ctx.alt != null && _ctx.alt.trim() !== "" ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(_ctx.$style["alt-container"])
+            }, [
+              createVNode(ElmMdiIcon, {
+                d: unref(mdiMessageImageOutline),
+                color: "#6987b8",
+                style: { "flex-shrink": "0" }
+              }, null, 8, ["d"]),
+              createElementVNode("div", {
+                class: normalizeClass(_ctx.$style["alt-text"])
+              }, [
+                createVNode(ElmInlineText, {
+                  text: _ctx.alt,
+                  size: "0.8rem"
+                }, null, 8, ["text"])
+              ], 2)
+            ], 2)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["enter-from-class", "enter-active-class", "enter-to-class", "leave-from-class", "leave-active-class", "leave-to-class"]),
+        createVNode(Transition, {
+          "enter-from-class": unref(fadeStyle)["fade-enter-from"],
+          "enter-active-class": unref(fadeStyle)["fade-enter-active"],
+          "enter-to-class": unref(fadeStyle)["fade-enter-to"],
+          "leave-from-class": unref(fadeStyle)["fade-leave-from"],
+          "leave-active-class": unref(fadeStyle)["fade-leave-active"],
+          "leave-to-class": unref(fadeStyle)["fade-leave-to"]
+        }, {
           default: withCtx(() => [
             isModalOpen.value ? (openBlock(), createElementBlock("div", {
               key: 0,
@@ -74,15 +118,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: normalizeClass(_ctx.$style["modal-image"]),
                 src: _ctx.src,
                 alt: _ctx.alt,
-                onClick: _cache[1] || (_cache[1] = () => {
-                  isModalOpen.value = false;
-                })
+                onClick: _cache[1] || (_cache[1] = ($event) => isModalOpen.value = false)
               }, null, 10, _hoisted_2)
             ], 2)) : createCommentVNode("", true)
           ]),
           _: 1
-        })
-      ], 64);
+        }, 8, ["enter-from-class", "enter-active-class", "enter-to-class", "leave-from-class", "leave-active-class", "leave-to-class"])
+      ], 2);
     };
   }
 });

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

@@ -3,28 +3,33 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("._image_151nq_1{display:block;margin-block:var(--margin-block);max-width:100%;height:var(--height);opacity:var(--opacity);transition:opacity .4s;cursor:var(--cursor)}._error_151nq_11{display:flex;justify-content:center;align-items:center;gap:1rem;width:100%;height:100%;min-height:10rem;line-height:1.5rem;color:#c56565}._fallback_151nq_23{margin-block:var(--margin-block);margin:0;padding:0;position:relative;width:100%;z-index:1;display:flex;justify-content:center;align-items:center;aspect-ratio:1200/630}._modal_151nq_36{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_151nq_36 ._modal-image_151nq_49{width:100vw;height:100vh;-o-object-fit:contain;object-fit:contain}"));
+      elementStyle.appendChild(document.createTextNode("._wrapper_nf1kx_1{width:100%;display:flex;flex-direction:column;align-items:center}._image_nf1kx_8{display:block;margin-block:var(--margin-block);max-width:100%;cursor:var(--cursor)}._error_nf1kx_15{display:flex;justify-content:center;align-items:center;gap:1rem;width:100%;height:100%;min-height:10rem;line-height:1.5rem;color:#c56565}._fallback_nf1kx_27{margin-block:var(--margin-block);margin:0;padding:0;position:relative;width:100%;z-index:1;display:flex;justify-content:center;align-items:center;aspect-ratio:1200/630}._image-block_nf1kx_40{overflow:hidden;border-radius:.25rem;box-shadow:0 0 .125rem #0000004d;display:block;max-width:100%;cursor:zoom-in}._alt-container_nf1kx_49{max-width:80%;margin:1rem;display:flex;justify-content:center;align-items:center;gap:1rem;color:#6987b8;opacity:.8}._modal_nf1kx_60{position:fixed;z-index:10;top:0;left:0;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background-color:#23262acc;cursor:zoom-out}._modal-image_nf1kx_74{display:block;max-width:100%}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-const image = "_image_151nq_1";
-const error = "_error_151nq_11";
-const fallback = "_fallback_151nq_23";
-const modal = "_modal_151nq_36";
+const wrapper = "_wrapper_nf1kx_1";
+const image = "_image_nf1kx_8";
+const error = "_error_nf1kx_15";
+const fallback = "_fallback_nf1kx_27";
+const modal = "_modal_nf1kx_60";
 const style0 = {
+  wrapper,
   image,
   error,
   fallback,
+  "image-block": "_image-block_nf1kx_40",
+  "alt-container": "_alt-container_nf1kx_49",
   modal,
-  "modal-image": "_modal-image_151nq_49"
+  "modal-image": "_modal-image_nf1kx_74"
 };
 export {
   style0 as default,
   error,
   fallback,
   image,
-  modal
+  modal,
+  wrapper
 };

package/dist/components/others/ElmJsonComponentRenderer.vue2.mjs

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode(".v-enter-to[data-v-610548e5],.v-leave-from[data-v-610548e5]{opacity:1}.v-enter-active[data-v-610548e5],.v-leave-active[data-v-610548e5]{transition:opacity .1s}.v-enter-from[data-v-610548e5],.v-leave-to[data-v-610548e5]{opacity:0}\n.v-enter-to[data-v-a6508d78],.v-leave-from[data-v-a6508d78]{opacity:1}.v-enter-active[data-v-a6508d78],.v-leave-active[data-v-a6508d78]{transition:opacity .3s}.v-enter-from[data-v-a6508d78],.v-leave-to[data-v-a6508d78]{opacity:0}\n.v-enter-to[data-v-ea96c386],.v-leave-from[data-v-ea96c386]{opacity:1}.v-enter-active[data-v-ea96c386],.v-leave-active[data-v-ea96c386]{transition:opacity .15s}.v-enter-from[data-v-ea96c386],.v-leave-to[data-v-ea96c386]{opacity:0}\n.v-enter-to[data-v-83a74154],.v-leave-from[data-v-83a74154]{opacity:1}.v-enter-active[data-v-83a74154],.v-leave-active[data-v-83a74154]{transition:opacity .2s}.v-enter-from[data-v-83a74154],.v-leave-to[data-v-83a74154]{opacity:0}\n.fade-enter-active[data-v-12f55baa],.fade-leave-active[data-v-12f55baa]{transition:all .3s ease}.fade-enter-from[data-v-12f55baa],.fade-leave-to[data-v-12f55baa]{opacity:0;transform:translate(30px)}\n.v-enter-to[data-v-84bc9c5d],.v-leave-from[data-v-84bc9c5d]{opacity:1}.v-enter-active[data-v-84bc9c5d],.v-leave-active[data-v-84bc9c5d]{transition:opacity .15s}.v-enter-from[data-v-84bc9c5d],.v-leave-to[data-v-84bc9c5d]{opacity:0}\n.v-enter-to[data-v-f6774eea],.v-leave-from[data-v-f6774eea]{opacity:1}.v-enter-active[data-v-f6774eea],.v-leave-active[data-v-f6774eea]{transition:opacity .1s}.v-enter-from[data-v-f6774eea],.v-leave-to[data-v-f6774eea]{opacity:0}\n.v-enter-to[data-v-4e995755],.v-leave-from[data-v-4e995755]{opacity:1}.v-enter-active[data-v-4e995755],.v-leave-active[data-v-4e995755]{transition:opacity .3s}.v-enter-from[data-v-4e995755],.v-leave-to[data-v-4e995755]{opacity:0}\n.elmethis-list-common{margin-block:1rem;opacity:var(--opacity);transition:opacity .8s;box-sizing:border-box;padding-left:1.25rem}.elmethis-bulleted-list li{box-sizing:border-box;padding-left:.5rem;margin-block:.75rem}.elmethis-bulleted-list li::marker{content:url(data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMTYgMTYnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICA+CiAgICA8cGF0aAogICAgICBmaWxsPScjNDQ5NzYzJwogICAgICBvcGFjaXR5PScwLjgnCiAgICAgIGQ9J00zIDMuNzMyYTEuNSAxLjUgMCAwIDEgMi4zMDUtMS4yNjVsNi43MDYgNC4yNjdhMS41IDEuNSAwIDAgMSAwIDIuNTMxbC02LjcwNiA0LjI2OEExLjUgMS41IDAgMCAxIDMgMTIuMjY3VjMuNzMyWicKICAgIC8+CiAgPC9zdmc+)}.elmethis-bulleted-list li ul li::marker{content:url(data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjQgMjQnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9J3RyYW5zcGFyZW50JwogID4KICAgIDxwYXRoCiAgICAgIHN0cm9rZUxpbmVjYXA9J3JvdW5kJwogICAgICBzdHJva2VMaW5lam9pbj0ncm91bmQnCiAgICAgIGQ9J001LjI1IDUuNjUzYzAtLjg1Ni45MTctMS4zOTggMS42NjctLjk4NmwxMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMSAwIDEuOTcybC0xMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMS0xLjY2Ny0uOTg2VjUuNjUzWicKICAgIC8+CiAgPC9zdmc+)}.elmethis-bulleted-list li ul li ul li::marker{content:url(data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjAgMjAnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9JyM0NDk3NjMnCiAgPgogICAgPHBhdGgKICAgICAgZmlsbFJ1bGU9J2V2ZW5vZGQnCiAgICAgIGQ9J004LjIyIDUuMjJhLjc1Ljc1IDAgMCAxIDEuMDYgMGw0LjI1IDQuMjVhLjc1Ljc1IDAgMCAxIDAgMS4wNmwtNC4yNSA0LjI1YS43NS43NSAwIDAgMS0xLjA2LTEuMDZMMTEuOTQgMTAgOC4yMiA2LjI4YS43NS43NSAwIDAgMSAwLTEuMDZaJwogICAgICBjbGlwUnVsZT0nZXZlbm9kZCcKICAgIC8+CiAgPC9zdmc+)}.elmethis-numbered-list li{box-sizing:border-box;padding-left:.25rem;margin-block:.75rem;margin-left:.25rem;list-style-type:decimal}.elmethis-numbered-list li::marker{font-weight:700;color:#9771bd}.elmethis-numbered-list li ol li{list-style-type:lower-alpha}.elmethis-numbered-list li ol li ol li{list-style-type:lower-roman}.elmethis-numbered-list li ol li ol li ol li{list-style-type:lower-greek}"));
+      elementStyle.appendChild(document.createTextNode(".v-enter-to[data-v-610548e5],.v-leave-from[data-v-610548e5]{opacity:1}.v-enter-active[data-v-610548e5],.v-leave-active[data-v-610548e5]{transition:opacity .1s}.v-enter-from[data-v-610548e5],.v-leave-to[data-v-610548e5]{opacity:0}\n.v-enter-to[data-v-fd68c0a3],.v-leave-from[data-v-fd68c0a3]{opacity:1}.v-enter-active[data-v-fd68c0a3],.v-leave-active[data-v-fd68c0a3]{transition:opacity .15s}.v-enter-from[data-v-fd68c0a3],.v-leave-to[data-v-fd68c0a3]{opacity:0}\n.v-enter-to[data-v-83a74154],.v-leave-from[data-v-83a74154]{opacity:1}.v-enter-active[data-v-83a74154],.v-leave-active[data-v-83a74154]{transition:opacity .2s}.v-enter-from[data-v-83a74154],.v-leave-to[data-v-83a74154]{opacity:0}\n.fade-enter-active[data-v-12f55baa],.fade-leave-active[data-v-12f55baa]{transition:all .3s ease}.fade-enter-from[data-v-12f55baa],.fade-leave-to[data-v-12f55baa]{opacity:0;transform:translate(30px)}\n.v-enter-to[data-v-84bc9c5d],.v-leave-from[data-v-84bc9c5d]{opacity:1}.v-enter-active[data-v-84bc9c5d],.v-leave-active[data-v-84bc9c5d]{transition:opacity .15s}.v-enter-from[data-v-84bc9c5d],.v-leave-to[data-v-84bc9c5d]{opacity:0}\n.v-enter-to[data-v-f6774eea],.v-leave-from[data-v-f6774eea]{opacity:1}.v-enter-active[data-v-f6774eea],.v-leave-active[data-v-f6774eea]{transition:opacity .1s}.v-enter-from[data-v-f6774eea],.v-leave-to[data-v-f6774eea]{opacity:0}\n.v-enter-to[data-v-4e995755],.v-leave-from[data-v-4e995755]{opacity:1}.v-enter-active[data-v-4e995755],.v-leave-active[data-v-4e995755]{transition:opacity .3s}.v-enter-from[data-v-4e995755],.v-leave-to[data-v-4e995755]{opacity:0}\n.elmethis-list-common{margin-block:1rem;opacity:var(--opacity);transition:opacity .8s;box-sizing:border-box;padding-left:1.25rem}.elmethis-bulleted-list li{box-sizing:border-box;padding-left:.5rem;margin-block:.75rem}.elmethis-bulleted-list li::marker{content:url(data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMTYgMTYnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICA+CiAgICA8cGF0aAogICAgICBmaWxsPScjNDQ5NzYzJwogICAgICBvcGFjaXR5PScwLjgnCiAgICAgIGQ9J00zIDMuNzMyYTEuNSAxLjUgMCAwIDEgMi4zMDUtMS4yNjVsNi43MDYgNC4yNjdhMS41IDEuNSAwIDAgMSAwIDIuNTMxbC02LjcwNiA0LjI2OEExLjUgMS41IDAgMCAxIDMgMTIuMjY3VjMuNzMyWicKICAgIC8+CiAgPC9zdmc+)}.elmethis-bulleted-list li ul li::marker{content:url(data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjQgMjQnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9J3RyYW5zcGFyZW50JwogID4KICAgIDxwYXRoCiAgICAgIHN0cm9rZUxpbmVjYXA9J3JvdW5kJwogICAgICBzdHJva2VMaW5lam9pbj0ncm91bmQnCiAgICAgIGQ9J001LjI1IDUuNjUzYzAtLjg1Ni45MTctMS4zOTggMS42NjctLjk4NmwxMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMSAwIDEuOTcybC0xMS41NCA2LjM0N2ExLjEyNSAxLjEyNSAwIDAgMS0xLjY2Ny0uOTg2VjUuNjUzWicKICAgIC8+CiAgPC9zdmc+)}.elmethis-bulleted-list li ul li ul li::marker{content:url(data:image/svg+xml;base64,ICA8c3ZnCiAgICB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnCiAgICB2aWV3Qm94PScwIDAgMjAgMjAnCiAgICB3aWR0aD0nMTJweCcKICAgIGhlaWdodD0nMTJweCcKICAgIHN0cm9rZT0nIzQ0OTc2MycKICAgIGZpbGw9JyM0NDk3NjMnCiAgPgogICAgPHBhdGgKICAgICAgZmlsbFJ1bGU9J2V2ZW5vZGQnCiAgICAgIGQ9J004LjIyIDUuMjJhLjc1Ljc1IDAgMCAxIDEuMDYgMGw0LjI1IDQuMjVhLjc1Ljc1IDAgMCAxIDAgMS4wNmwtNC4yNSA0LjI1YS43NS43NSAwIDAgMS0xLjA2LTEuMDZMMTEuOTQgMTAgOC4yMiA2LjI4YS43NS43NSAwIDAgMSAwLTEuMDZaJwogICAgICBjbGlwUnVsZT0nZXZlbm9kZCcKICAgIC8+CiAgPC9zdmc+)}.elmethis-numbered-list li{box-sizing:border-box;padding-left:.25rem;margin-block:.75rem;margin-left:.25rem;list-style-type:decimal}.elmethis-numbered-list li::marker{font-weight:700;color:#9771bd}.elmethis-numbered-list li ol li{list-style-type:lower-alpha}.elmethis-numbered-list li ol li ol li{list-style-type:lower-roman}.elmethis-numbered-list li ol li ol li ol li{list-style-type:lower-greek}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
@@ -15,7 +15,6 @@ import "@mdi/js";
 
 import "polished";
 import "@vueuse/core";
-
 import ElmBlockFallback from "../fallback/ElmBlockFallback.vue.mjs";
 
 
@@ -79,8 +78,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       loader: () => import("../media/ElmFile.vue.mjs"),
       loadingComponent: ElmBlockFallback
     });
-    const AsyncElmBlockImage = defineAsyncComponent({
-      loader: () => import("../media/ElmBlockImage.vue.mjs"),
+    const AsyncElmImage = defineAsyncComponent({
+      loader: () => import("../media/ElmImage.vue.mjs"),
       loadingComponent: ElmBlockFallback
     });
     const AsyncElmCodeBlock = defineAsyncComponent({
@@ -175,9 +174,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           image: props2.image
         }),
         File: ({ props: props2 }) => h(AsyncElmFile, { src: props2.src, name: props2.name }),
-        Image: ({ props: props2 }) => h(AsyncElmBlockImage, {
+        Image: ({ props: props2 }) => h(AsyncElmImage, {
           src: props2.src,
-          alt: props2.alt
+          alt: props2.alt,
+          block: true,
+          enableModal: true
         }),
         CodeBlock: ({ props: props2, slots }) => slots != null ? h(
           AsyncElmCodeBlock,

package/dist/index.d.ts

@@ -58,8 +58,6 @@ export type { ElmMdiIconProps } from './components/icon/ElmMdiIcon.vue';
 export { default as ElmMdiIcon } from './components/icon/ElmMdiIcon.vue';
 export type { ElmToggleThemeProps } from './components/icon/ElmToggleTheme.vue';
 export { default as ElmToggleTheme } from './components/icon/ElmToggleTheme.vue';
-export type { ElmBlockImageProps } from './components/media/ElmBlockImage.vue';
-export { default as ElmBlockImage } from './components/media/ElmImage.vue';
 export type { ElmFileProps } from './components/media/ElmFile.vue';
 export { default as ElmFile } from './components/media/ElmFile.vue';
 export type { ElmImageProps } from './components/media/ElmImage.vue';

package/dist/index.mjs

@@ -40,64 +40,63 @@ import { default as default28 } from "./components/icon/ElmLanguageIcon.vue.mjs"
 import { default as default29 } from "./components/icon/ElmLoginIcon.vue.mjs";
 import { default as default30 } from "./components/icon/ElmMdiIcon.vue.mjs";
 import { default as default31 } from "./components/icon/ElmToggleTheme.vue.mjs";
-import { default as default32, default as default33 } from "./components/media/ElmImage.vue.mjs";
-import { default as default34 } from "./components/media/ElmFile.vue.mjs";
-import { default as default35 } from "./components/navigation/ElmBookmark.vue.mjs";
-import { default as default36 } from "./components/navigation/ElmBreadcrumb.vue.mjs";
-import { default as default37 } from "./components/navigation/ElmPagetop.vue.mjs";
-import { default as default38 } from "./components/navigation/ElmTableOfContents.vue.mjs";
-import { default as default39 } from "./components/others/ElmColorSample.vue.mjs";
-import { default as default40 } from "./components/others/ElmColorTable.vue.mjs";
-import { default as default41 } from "./components/others/ElmJsonComponentRenderer.vue.mjs";
-import { default as default42 } from "./components/table/ElmTable.vue.mjs";
-import { default as default43 } from "./components/table/ElmTableHeader.vue.mjs";
-import { default as default44 } from "./components/table/ElmTableBody.vue.mjs";
-import { default as default45 } from "./components/table/ElmTableRow.vue.mjs";
-import { default as default46 } from "./components/table/ElmTableCell.vue.mjs";
-import { default as default47 } from "./components/typography/ElmBlockQuote.vue.mjs";
-import { default as default48 } from "./components/typography/ElmCallout.vue.mjs";
-import { default as default49 } from "./components/typography/ElmDivider.vue.mjs";
-import { default as default50 } from "./components/typography/ElmFragmentIdentifier.vue.mjs";
-import { default as default51 } from "./components/typography/ElmHeading.vue.mjs";
-import { default as default52 } from "./components/typography/ElmInlineText.vue.mjs";
-import { default as default53 } from "./components/typography/ElmParagraph.vue.mjs";
-import { default as default54 } from "./components/typography/ElmList.vue.mjs";
+import { default as default32 } from "./components/media/ElmFile.vue.mjs";
+import { default as default33 } from "./components/media/ElmImage.vue.mjs";
+import { default as default34 } from "./components/navigation/ElmBookmark.vue.mjs";
+import { default as default35 } from "./components/navigation/ElmBreadcrumb.vue.mjs";
+import { default as default36 } from "./components/navigation/ElmPagetop.vue.mjs";
+import { default as default37 } from "./components/navigation/ElmTableOfContents.vue.mjs";
+import { default as default38 } from "./components/others/ElmColorSample.vue.mjs";
+import { default as default39 } from "./components/others/ElmColorTable.vue.mjs";
+import { default as default40 } from "./components/others/ElmJsonComponentRenderer.vue.mjs";
+import { default as default41 } from "./components/table/ElmTable.vue.mjs";
+import { default as default42 } from "./components/table/ElmTableHeader.vue.mjs";
+import { default as default43 } from "./components/table/ElmTableBody.vue.mjs";
+import { default as default44 } from "./components/table/ElmTableRow.vue.mjs";
+import { default as default45 } from "./components/table/ElmTableCell.vue.mjs";
+import { default as default46 } from "./components/typography/ElmBlockQuote.vue.mjs";
+import { default as default47 } from "./components/typography/ElmCallout.vue.mjs";
+import { default as default48 } from "./components/typography/ElmDivider.vue.mjs";
+import { default as default49 } from "./components/typography/ElmFragmentIdentifier.vue.mjs";
+import { default as default50 } from "./components/typography/ElmHeading.vue.mjs";
+import { default as default51 } from "./components/typography/ElmInlineText.vue.mjs";
+import { default as default52 } from "./components/typography/ElmParagraph.vue.mjs";
+import { default as default53 } from "./components/typography/ElmList.vue.mjs";
 
 import { useElmethisTheme } from "./hooks/useElmethisTheme.mjs";
 import { useTyping } from "./hooks/useTyping.mjs";
 export {
   default24 as ElmArrowIcon,
   default16 as ElmBlockFallback,
-  default32 as ElmBlockImage,
-  default47 as ElmBlockQuote,
-  default35 as ElmBookmark,
+  default46 as ElmBlockQuote,
+  default34 as ElmBookmark,
   default25 as ElmBookmarkIcon,
-  default36 as ElmBreadcrumb,
+  default35 as ElmBreadcrumb,
   default19 as ElmButton,
-  default48 as ElmCallout,
+  default47 as ElmCallout,
   default20 as ElmCheckbox,
   default2 as ElmCodeBlock,
-  default39 as ElmColorSample,
-  default40 as ElmColorTable,
+  default38 as ElmColorSample,
+  default39 as ElmColorTable,
   default26 as ElmCubeIcon,
   default4 as ElmDesktopWindow,
-  default49 as ElmDivider,
+  default48 as ElmDivider,
   default27 as ElmDotLoadingIcon,
-  default34 as ElmFile,
-  default50 as ElmFragmentIdentifier,
-  default51 as ElmHeading,
+  default32 as ElmFile,
+  default49 as ElmFragmentIdentifier,
+  default50 as ElmHeading,
   default33 as ElmImage,
-  default52 as ElmInlineText,
-  default41 as ElmJsonComponentRenderer,
+  default51 as ElmInlineText,
+  default40 as ElmJsonComponentRenderer,
   default3 as ElmKatex,
   default28 as ElmLanguageIcon,
-  default54 as ElmList,
+  default53 as ElmList,
   default29 as ElmLoginIcon,
   default30 as ElmMdiIcon,
   default5 as ElmModal,
   default13 as ElmMultiProgress,
-  default37 as ElmPagetop,
-  default53 as ElmParagraph,
+  default36 as ElmPagetop,
+  default52 as ElmParagraph,
   default6 as ElmParallax,
   default12 as ElmProgress,
   default15 as ElmRectangleWave,
@@ -108,12 +107,12 @@ export {
   default17 as ElmSpinner,
   default14 as ElmStatusMessage,
   default22 as ElmSwitch,
-  default42 as ElmTable,
-  default44 as ElmTableBody,
-  default46 as ElmTableCell,
-  default43 as ElmTableHeader,
-  default38 as ElmTableOfContents,
-  default45 as ElmTableRow,
+  default41 as ElmTable,
+  default43 as ElmTableBody,
+  default45 as ElmTableCell,
+  default42 as ElmTableHeader,
+  default37 as ElmTableOfContents,
+  default44 as ElmTableRow,
   default23 as ElmTextField,
   default10 as ElmToggle,
   default31 as ElmToggleTheme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/core",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -24,30 +24,30 @@
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
-    "@vueuse/core": "^13.1.0",
+    "@vueuse/core": "^13.2.0",
     "katex": "^0.16.22",
     "lodash-es": "^4.17.21",
     "nanoid": "^5.1.5",
     "polished": "^4.3.1",
-    "shiki": "^3.4.0"
+    "shiki": "^3.4.2"
   },
   "devDependencies": {
     "@notionhq/client": "^3.0.1",
-    "@storybook/vue3": "^8.6.12",
+    "@storybook/vue3": "^8.6.14",
     "@types/json-schema": "^7.0.15",
     "@types/katex": "^0.16.7",
     "@types/lodash-es": "^4.17.12",
     "@types/prismjs": "^1.26.5",
-    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue": "^5.2.4",
     "csstype": "^3.1.3",
     "jarkup-ts": "^0.4.1",
     "openapi-types": "^12.1.3",
     "postcss": "^8.5.3",
     "postcss-preset-env": "^10.1.6",
-    "sass": "^1.87.0",
+    "sass": "^1.89.0",
     "vite": "^6.3.5",
     "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-dts": "^4.5.3",
+    "vite-plugin-dts": "^4.5.4",
     "vue-tsc": "^2.2.10"
   },
   "peerDependencies": {

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

@@ -1,9 +0,0 @@
-import { Meta, StoryObj } from '@storybook/vue3';
-import { default as ElmBlockImage } from './ElmBlockImage.vue';
-declare const meta: Meta<typeof ElmBlockImage>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Primary: Story;
-export declare const Svg: Story;
-export declare const LongAlt: Story;
-export declare const Invalid: Story;

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

@@ -1,12 +0,0 @@
-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,23 +0,0 @@
-(function() {
-  "use strict";
-  try {
-    if (typeof document != "undefined") {
-      var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode(".v-enter-to[data-v-42e56906],.v-leave-from[data-v-42e56906]{opacity:1}.v-enter-active[data-v-42e56906],.v-leave-active[data-v-42e56906]{transition:opacity .3s}.v-enter-from[data-v-42e56906],.v-leave-to[data-v-42e56906]{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], ["__scopeId", "data-v-42e56906"]]);
-export {
-  ElmBlockImage as default
-};

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

@@ -1,117 +0,0 @@
-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 "../typography/ElmInlineText.vue.mjs";
-import { mdiMessageImageOutline } from "@mdi/js";
-const _hoisted_1 = ["src", "alt"];
-const _hoisted_2 = ["d"];
-const _hoisted_3 = ["src", "alt"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "ElmBlockImage",
-  props: {
-    src: {},
-    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(Fragment, null, [
-        createElementVNode("div", {
-          class: normalizeClass(_ctx.$style.container)
-        }, [
-          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(() => [
-            !unref(isLoading) && _ctx.alt != null && _ctx.alt.trim() !== "" ? (openBlock(), createElementBlock("div", {
-              key: 0,
-              class: normalizeClass(_ctx.$style["alt-container"])
-            }, [
-              (openBlock(), createElementBlock("svg", {
-                class: normalizeClass(_ctx.$style["alt-icon"]),
-                viewBox: "0 0 24 24",
-                width: "1rem",
-                height: "1rem",
-                fill: "currentColor"
-              }, [
-                createElementVNode("path", { d: unref(mdiMessageImageOutline) }, null, 8, _hoisted_2)
-              ], 2)),
-              createElementVNode("div", {
-                class: normalizeClass(_ctx.$style["alt-text"])
-              }, [
-                createVNode(ElmInlineText, {
-                  text: _ctx.alt,
-                  size: "0.8rem"
-                }, null, 8, ["text"])
-              ], 2)
-            ], 2)) : createCommentVNode("", true)
-          ]),
-          _: 1
-        }),
-        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_3)
-            ], 2)) : createCommentVNode("", true)
-          ]),
-          _: 1
-        })
-      ], 64);
-    };
-  }
-});
-export {
-  _sfc_main as default
-};

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

@@ -1,36 +0,0 @@
-(function() {
-  "use strict";
-  try {
-    if (typeof document != "undefined") {
-      var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("._container_1n578_1{margin-block:1rem;width:100%;display:flex;justify-content:center;align-items:center}._image_1n578_9{overflow:hidden;border-radius:.25rem;box-shadow:0 0 .125rem #0000004d;display:block;max-width:100%;height:var(--height);opacity:var(--opacity);transition:opacity .4s;cursor:zoom-in}._alt-container_1n578_21{margin:1rem;display:flex;justify-content:center;align-items:flex-end;gap:.5rem;color:#6987b8;opacity:.8}._alt-icon_1n578_31{fill:#6987b8}._alt-text_1n578_35{width:-moz-fit-content;width:fit-content}._error_1n578_39{display:flex;justify-content:center;align-items:center;gap:1rem;width:100%;height:100%;min-height:10rem;line-height:1.5rem;color:#c56565}._fallback_1n578_51{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_1n578_64{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_1n578_64 ._modal-image_1n578_77{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_1n578_1";
-const image = "_image_1n578_9";
-const error = "_error_1n578_39";
-const fallback = "_fallback_1n578_51";
-const modal = "_modal_1n578_64";
-const style0 = {
-  container,
-  image,
-  "alt-container": "_alt-container_1n578_21",
-  "alt-icon": "_alt-icon_1n578_31",
-  "alt-text": "_alt-text_1n578_35",
-  error,
-  fallback,
-  modal,
-  "modal-image": "_modal-image_1n578_77"
-};
-export {
-  container,
-  style0 as default,
-  error,
-  fallback,
-  image,
-  modal
-};