@elmethis/core 0.1.0

package/dist/components/icon/languages/Sql.vue2.mjs

@@ -0,0 +1,26 @@
+import { defineComponent, createElementBlock, openBlock, createElementVNode } from "vue";
+const _hoisted_1 = ["width", "height"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Sql",
+  props: {
+    size: { default: 24 }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: _ctx.size,
+        height: _ctx.size,
+        viewBox: "0 0 128 128"
+      }, _cache[0] || (_cache[0] = [
+        createElementVNode("path", {
+          fill: "#00618a",
+          d: "M117.688 98.242c-6.973-.191-12.297.461-16.852 2.379c-1.293.547-3.355.559-3.566 2.18c.711.746.82 1.859 1.387 2.777c1.086 1.754 2.922 4.113 4.559 5.352c1.789 1.348 3.633 2.793 5.551 3.961c3.414 2.082 7.223 3.27 10.504 5.352c1.938 1.23 3.859 2.777 5.75 4.164c.934.684 1.563 1.75 2.773 2.18v-.195c-.637-.812-.801-1.93-1.387-2.777l-2.578-2.578c-2.52-3.344-5.719-6.281-9.117-8.719c-2.711-1.949-8.781-4.578-9.91-7.73l-.199-.199c1.922-.219 4.172-.914 5.949-1.391c2.98-.797 5.645-.59 8.719-1.387l4.164-1.187v-.793c-1.555-1.594-2.664-3.707-4.359-5.152c-4.441-3.781-9.285-7.555-14.273-10.703c-2.766-1.746-6.184-2.883-9.117-4.363c-.988-.496-2.719-.758-3.371-1.586c-1.539-1.961-2.379-4.449-3.566-6.738c-2.488-4.793-4.93-10.023-7.137-15.066c-1.504-3.437-2.484-6.828-4.359-9.91c-9-14.797-18.687-23.73-33.695-32.508c-3.195-1.867-7.039-2.605-11.102-3.57l-6.543-.395c-1.332-.555-2.715-2.184-3.965-2.977C16.977 3.52 4.223-3.312.539 5.672C-1.785 11.34 4.016 16.871 6.09 19.746c1.457 2.012 3.32 4.273 4.359 6.539c.688 1.492.805 2.984 1.391 4.559c1.438 3.883 2.695 8.109 4.559 11.695c.941 1.816 1.98 3.727 3.172 5.352c.727.996 1.98 1.438 2.18 2.973c-1.227 1.715-1.297 4.375-1.984 6.543c-3.098 9.77-1.926 21.91 2.578 29.137c1.383 2.223 4.641 6.98 9.117 5.156c3.918-1.598 3.043-6.539 4.164-10.902c.254-.988.098-1.715.594-2.379v.199l3.57 7.133c2.641 4.254 7.324 8.699 11.297 11.699c2.059 1.555 3.68 4.242 6.344 5.152v-.199h-.199c-.516-.805-1.324-1.137-1.98-1.781c-1.551-1.523-3.277-3.414-4.559-5.156c-3.613-4.902-6.805-10.27-9.711-15.855c-1.391-2.668-2.598-5.609-3.77-8.324c-.453-1.047-.445-2.633-1.387-3.172c-1.281 1.988-3.172 3.598-4.164 5.945c-1.582 3.754-1.789 8.336-2.375 13.082c-.348.125-.195.039-.398.199c-2.762-.668-3.73-3.508-4.758-5.949c-2.594-6.164-3.078-16.09-.793-23.191c.59-1.836 3.262-7.617 2.18-9.316c-.516-1.691-2.219-2.672-3.172-3.965c-1.18-1.598-2.355-3.703-3.172-5.551c-2.125-4.805-3.113-10.203-5.352-15.062c-1.07-2.324-2.875-4.676-4.359-6.738c-1.645-2.289-3.484-3.977-4.758-6.742c-.453-.984-1.066-2.559-.398-3.566c.215-.684.516-.969 1.191-1.191c1.148-.887 4.352.297 5.547.793c3.18 1.32 5.832 2.578 8.527 4.363c1.289.855 2.598 2.512 4.16 2.973h1.785c2.789.641 5.914.195 8.523.988c4.609 1.402 8.738 3.582 12.488 5.949c11.422 7.215 20.766 17.48 27.156 29.734c1.027 1.973 1.473 3.852 2.379 5.945c1.824 4.219 4.125 8.559 5.941 12.688c1.816 4.113 3.582 8.27 6.148 11.695c1.348 1.801 6.551 2.766 8.918 3.766c1.66.699 4.379 1.43 5.949 2.379c3 1.809 5.906 3.965 8.723 5.945c1.402.992 5.73 3.168 5.945 4.957zm-88.605-75.52c-1.453-.027-2.48.156-3.566.395v.199h.195c.695 1.422 1.918 2.34 2.777 3.566l1.98 4.164l.199-.195c1.227-.867 1.789-2.25 1.781-4.363c-.492-.52-.562-1.164-.992-1.785c-.562-.824-1.66-1.289-2.375-1.98zm0 0"
+        }, null, -1)
+      ]), 8, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/icon/languages/Terraform.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    size?: number;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, SVGSVGElement>;
+export default _default;

package/dist/components/icon/languages/Terraform.vue.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./Terraform.vue2.mjs";
+export {
+  _sfc_main as default
+};

package/dist/components/icon/languages/Terraform.vue2.mjs

@@ -0,0 +1,36 @@
+import { defineComponent, createElementBlock, openBlock, createElementVNode } from "vue";
+const _hoisted_1 = ["width", "height"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Terraform",
+  props: {
+    size: { default: 24 }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: _ctx.size,
+        height: _ctx.size,
+        viewBox: "0 0 128 128"
+      }, _cache[0] || (_cache[0] = [
+        createElementVNode("g", { "fill-rule": "evenodd" }, [
+          createElementVNode("path", {
+            fill: "#5c4ee5",
+            d: "M77.941 44.5v36.836L46.324 62.918V26.082zm0 0"
+          }),
+          createElementVNode("path", {
+            fill: "#4040b2",
+            d: "m81.41 81.336l31.633-18.418V26.082L81.41 44.5zm0 0"
+          }),
+          createElementVNode("path", {
+            fill: "#5c4ee5",
+            d: "M11.242 42.36L42.86 60.776V23.941L11.242 5.523zm66.699 43.015L46.324 66.957v36.82l31.617 18.418zm0 0"
+          })
+        ], -1)
+      ]), 8, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/icon/languages/Typescript.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    size?: number;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, SVGSVGElement>;
+export default _default;

package/dist/components/icon/languages/Typescript.vue.mjs

@@ -0,0 +1,4 @@
+import _sfc_main from "./Typescript.vue2.mjs";
+export {
+  _sfc_main as default
+};

package/dist/components/icon/languages/Typescript.vue2.mjs

@@ -0,0 +1,30 @@
+import { defineComponent, createElementBlock, openBlock, createElementVNode } from "vue";
+const _hoisted_1 = ["width", "height"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Typescript",
+  props: {
+    size: { default: 24 }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: _ctx.size,
+        height: _ctx.size,
+        viewBox: "0 0 128 128"
+      }, _cache[0] || (_cache[0] = [
+        createElementVNode("path", {
+          fill: "#fff",
+          d: "M22.67 47h99.67v73.67H22.67z"
+        }, null, -1),
+        createElementVNode("path", {
+          fill: "#007acc",
+          d: "M1.5 63.91v62.5h125v-125H1.5zm100.73-5a15.56 15.56 0 0 1 7.82 4.5a20.6 20.6 0 0 1 3 4c0 .16-5.4 3.81-8.69 5.85c-.12.08-.6-.44-1.13-1.23a7.09 7.09 0 0 0-5.87-3.53c-3.79-.26-6.23 1.73-6.21 5a4.6 4.6 0 0 0 .54 2.34c.83 1.73 2.38 2.76 7.24 4.86c8.95 3.85 12.78 6.39 15.16 10c2.66 4 3.25 10.46 1.45 15.24c-2 5.2-6.9 8.73-13.83 9.9a38.3 38.3 0 0 1-9.52-.1a23 23 0 0 1-12.72-6.63c-1.15-1.27-3.39-4.58-3.25-4.82a9 9 0 0 1 1.15-.73L82 101l3.59-2.08l.75 1.11a16.8 16.8 0 0 0 4.74 4.54c4 2.1 9.46 1.81 12.16-.62a5.43 5.43 0 0 0 .69-6.92c-1-1.39-3-2.56-8.59-5c-6.45-2.78-9.23-4.5-11.77-7.24a16.5 16.5 0 0 1-3.43-6.25a25 25 0 0 1-.22-8c1.33-6.23 6-10.58 12.82-11.87a31.7 31.7 0 0 1 9.49.26zm-29.34 5.24v5.12H56.66v46.23H45.15V69.26H28.88v-5a49 49 0 0 1 .12-5.17C29.08 59 39 59 51 59h21.83z"
+        }, null, -1)
+      ]), 8, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,23 @@
+(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

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,36 @@
+(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
+};

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

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

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

@@ -0,0 +1,21 @@
+import { Property } from 'csstype';
+export interface ElmFileProps {
+    /**
+     * The name of the file.
+     */
+    name?: string;
+    /**
+     * The source of the file.
+     */
+    src: string;
+    /**
+     * The size of the file in bytes.
+     */
+    filesize?: string;
+    /**
+     * The margin of the file.
+     */
+    margin?: Property.MarginBlock;
+}
+declare const _default: import('vue').DefineComponent<ElmFileProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmFileProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

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

@@ -0,0 +1,10 @@
+import _sfc_main from "./ElmFile.vue2.mjs";
+import style0 from "./ElmFile.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmFile = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+export {
+  ElmFile as default
+};

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

@@ -0,0 +1,79 @@
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createVNode, unref, createBlock, createCommentVNode } from "vue";
+import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
+import ElmMdiIcon from "../icon/ElmMdiIcon.vue.mjs";
+import { mdiFileOutline, mdiDownload } from "@mdi/js";
+const _hoisted_1 = { style: { opacity: 0.6 } };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmFile",
+  props: {
+    name: {},
+    src: {},
+    filesize: {},
+    margin: {}
+  },
+  setup(__props) {
+    function getLastPathSegmentWithoutQueryOrHash(urlString) {
+      const cleanedUrl = urlString.split(/[?#]/)[0];
+      const pathSegments = cleanedUrl.split("/").filter(Boolean);
+      return pathSegments.length > 0 ? pathSegments[pathSegments.length - 1] : null;
+    }
+    async function downloadFile(url, filename) {
+      let link;
+      try {
+        const response = await fetch(url);
+        if (!response.ok) throw new Error("Failed to download file");
+        const blob = await response.blob();
+        link = document.createElement("a");
+        link.href = URL.createObjectURL(blob);
+        link.download = filename;
+        link.click();
+      } catch (error) {
+        console.error("ERROR:", error);
+      } finally {
+        if (link) URL.revokeObjectURL(link.href);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.file),
+        style: normalizeStyle({ "--margin-block": _ctx.margin })
+      }, [
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style["left-container"])
+        }, [
+          createVNode(ElmMdiIcon, {
+            d: unref(mdiFileOutline),
+            size: "1.25em"
+          }, null, 8, ["d"]),
+          createVNode(ElmInlineText, {
+            text: _ctx.name ?? getLastPathSegmentWithoutQueryOrHash(_ctx.src) ?? "unknown file"
+          }, null, 8, ["text"])
+        ], 2),
+        createElementVNode("div", {
+          class: normalizeClass(_ctx.$style["right-container"])
+        }, [
+          createElementVNode("span", _hoisted_1, [
+            _ctx.filesize ? (openBlock(), createBlock(ElmInlineText, {
+              key: 0,
+              text: _ctx.filesize
+            }, null, 8, ["text"])) : createCommentVNode("", true)
+          ]),
+          createVNode(ElmMdiIcon, {
+            d: unref(mdiDownload),
+            class: normalizeClass(_ctx.$style["download-icon"]),
+            size: "1.25em",
+            onClick: _cache[0] || (_cache[0] = () => {
+              downloadFile(
+                _ctx.src,
+                _ctx.name ?? getLastPathSegmentWithoutQueryOrHash(_ctx.src) ?? "unknown file"
+              );
+            })
+          }, null, 8, ["d", "class"])
+        ], 2)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,23 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._file_1j0l6_1{margin-block:var(--margin-block);box-sizing:border-box;width:100%;padding:1rem;box-shadow:0 0 .125rem #0003;border-radius:.25rem;display:flex;justify-content:space-between;align-items:center;background-color:#fff3}[data-theme=dark] ._file_1j0l6_1{background-color:#0003}._file_1j0l6_1 ._left-container_1j0l6_16{display:flex;justify-content:flex-start;align-items:center;gap:.75rem}._file_1j0l6_1 ._right-container_1j0l6_22{display:flex;justify-content:flex-end;align-items:center;gap:.75rem}._file_1j0l6_1 ._right-container_1j0l6_22 ._download-icon_1j0l6_28{padding:.125rem;cursor:pointer;transition:color .2s,background-color .2s}._file_1j0l6_1 ._right-container_1j0l6_22 ._download-icon_1j0l6_28:hover{background-color:#0000001a}[data-theme=dark] ._file_1j0l6_1 ._right-container_1j0l6_22 ._download-icon_1j0l6_28:hover{background-color:#ffffff1a}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const file = "_file_1j0l6_1";
+const style0 = {
+  file,
+  "left-container": "_left-container_1j0l6_16",
+  "right-container": "_right-container_1j0l6_22",
+  "download-icon": "_download-icon_1j0l6_28"
+};
+export {
+  style0 as default,
+  file
+};

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

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as ElmImage } from './ElmImage.vue';
+declare const meta: Meta<typeof ElmImage>;
+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 Invalid: Story;

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

@@ -0,0 +1,23 @@
+import { Property } from 'csstype';
+export interface ElmImageProps {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Image alt text
+     */
+    alt?: string;
+    /**
+     * Enable modal on image click. Default: `false`
+     */
+    enableModal?: boolean;
+    /**
+     * The margin of the image.
+     */
+    margin?: Property.MarginBlock;
+}
+declare const _default: import('vue').DefineComponent<ElmImageProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmImageProps> & Readonly<{}>, {
+    enableModal: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,23 @@
+(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"]]);
+export {
+  ElmImage as default
+};

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

@@ -0,0 +1,91 @@
+import { defineComponent, ref, createElementBlock, openBlock, Fragment, createVNode, Transition, withCtx, unref, normalizeClass, 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";
+const _hoisted_1 = ["src", "alt"];
+const _hoisted_2 = ["src", "alt"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmImage",
+  props: {
+    src: {},
+    alt: {},
+    enableModal: { type: Boolean, default: false },
+    margin: {}
+  },
+  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, [
+        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),
+              style: normalizeStyle({ "--margin-block": _ctx.margin })
+            }, [
+              createVNode(ElmRectangleWave),
+              createElementVNode("div", null, [
+                createVNode(ElmDotLoadingIcon)
+              ])
+            ], 6)) : (openBlock(), createElementBlock("img", {
+              key: 2,
+              class: normalizeClass(_ctx.$style.image),
+              src: _ctx.src,
+              alt: _ctx.alt,
+              onClick: _cache[0] || (_cache[0] = () => {
+                if (_ctx.enableModal) {
+                  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"
+              })
+            }, null, 14, _hoisted_1))
+          ]),
+          _: 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_2)
+            ], 2)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,30 @@
+(function() {
+  "use strict";
+  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}"));
+      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 style0 = {
+  image,
+  error,
+  fallback,
+  modal,
+  "modal-image": "_modal-image_151nq_49"
+};
+export {
+  style0 as default,
+  error,
+  fallback,
+  image,
+  modal
+};