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

package/dist/components/inline/ElmInlineRuby.vue.d.ts

@@ -15,5 +15,5 @@ export interface ElmInlineRubyProps {
      */
     ruby: string;
 }
-declare const _default: import('vue').DefineComponent<ElmInlineRubyProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmInlineRubyProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: import('vue').DefineComponent<ElmInlineRubyProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmInlineRubyProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
 export default _default;

package/dist/components/inline/ElmInlineRuby.vue.mjs

@@ -0,0 +1,29 @@
+import { defineComponent, createElementBlock, openBlock, createVNode, createElementVNode } from "vue";
+import ElmInlineText from "./ElmInlineText.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmInlineRuby",
+  props: {
+    text: {},
+    color: {},
+    ruby: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("ruby", null, [
+        createVNode(ElmInlineText, {
+          text: _ctx.text,
+          color: _ctx.color
+        }, null, 8, ["text", "color"]),
+        createElementVNode("rt", null, [
+          createVNode(ElmInlineText, {
+            text: _ctx.ruby,
+            color: _ctx.color
+          }, null, 8, ["text", "color"])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/inline/ElmInlineRuby.vue2.mjs

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

package/dist/components/inline/ElmInlineText.stories.d.ts

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
 export declare const Colored: Story;
+export declare const Background: Story;

package/dist/components/inline/ElmInlineText.vue.d.ts

@@ -9,7 +9,7 @@ export interface ElmInlineTextProps {
      *
      * e.g.) `'red'`, `'#ff0000'`, `'rgba(255, 0, 0, 0.5)'`
      */
-    color?: Property.BackgroundColor;
+    color?: Property.Color;
     /**
      * Specifies the font size of the text.
      */
@@ -30,8 +30,17 @@ export interface ElmInlineTextProps {
      * Specifies whether the text should be strikethrough.
      */
     strikethrough?: boolean;
+    /**
+     * Specifies whether the text should be displayed as code.
+     */
+    code?: boolean;
+    /**
+     * Specifies the background color of the text.
+     */
+    backgroundColor?: Property.BackgroundColor;
 }
 declare const _default: import('vue').DefineComponent<ElmInlineTextProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmInlineTextProps> & Readonly<{}>, {
+    code: boolean;
     bold: boolean;
     italic: boolean;
     underline: boolean;

package/dist/components/inline/ElmInlineText.vue.mjs

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

package/dist/components/inline/ElmInlineText.vue2.mjs

@@ -0,0 +1,57 @@
+import { defineComponent, useCssModule, createBlock, openBlock, resolveDynamicComponent, h } from "vue";
+import { getLuminance } from "polished";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmInlineText",
+  props: {
+    text: {},
+    color: {},
+    size: {},
+    bold: { type: Boolean, default: false },
+    italic: { type: Boolean, default: false },
+    underline: { type: Boolean, default: false },
+    strikethrough: { type: Boolean, default: false },
+    code: { type: Boolean, default: false },
+    backgroundColor: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const style = useCssModule();
+    const render = () => {
+      const backgroundColor = props.backgroundColor != null ? getLuminance(props.backgroundColor) < 0.5 ? "rgba(255, 255, 255, 0.7)" : "rgba(0, 0, 0, 0.7)" : void 0;
+      let vnode = h(
+        "span",
+        {
+          class: style.text,
+          style: {
+            "--color": props.color ?? backgroundColor,
+            "--font-size": props.size,
+            "--background-color": props.backgroundColor
+          }
+        },
+        props.text
+      );
+      if (props.strikethrough) {
+        vnode = h("del", {}, vnode);
+      }
+      if (props.italic) {
+        vnode = h("em", {}, vnode);
+      }
+      if (props.underline) {
+        vnode = h("ins", {}, vnode);
+      }
+      if (props.bold) {
+        vnode = h("strong", {}, vnode);
+      }
+      if (props.code) {
+        vnode = h("code", { class: style.code }, vnode);
+      }
+      return vnode;
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(render()));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/inline/ElmInlineText.vue3.mjs

@@ -0,0 +1,23 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode('._text_8qsji_1{padding:0;margin:0;color:#000000b3;color:var(--color, rgba(0, 0, 0, .7));font-size:inherit;font-size:var(--font-size, inherit);line-height:1rem;line-height:var(--font-size, 1rem);background-color:var(--background-color)}._text_8qsji_1::-moz-selection{color:#ffffffb3;background-color:#000000b3;background-color:var(--color, rgba(0, 0, 0, .7))}._text_8qsji_1::selection{color:#ffffffb3;background-color:#000000b3;background-color:var(--color, rgba(0, 0, 0, .7))}[data-theme=dark] ._text_8qsji_1{color:#ffffffb3;color:var(--color, rgba(255, 255, 255, .7))}[data-theme=dark] ._text_8qsji_1::-moz-selection{color:#000000b3;background-color:#ffffffb3;background-color:var(--color, rgba(255, 255, 255, .7))}[data-theme=dark] ._text_8qsji_1::selection{color:#000000b3;background-color:#ffffffb3;background-color:var(--color, rgba(255, 255, 255, .7))}._code_8qsji_21{margin-inline:.25rem;padding:2px .5em;font-size:calc(1rem - 2px);border-radius:.125rem;background-color:#00000013;font-family:"Source Code Pro" monospace}'));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const text = "_text_8qsji_1";
+const code = "_code_8qsji_21";
+const style0 = {
+  text,
+  code
+};
+export {
+  code,
+  style0 as default,
+  text
+};

package/dist/components/inline/ElmTypingAnimation.stories.d.ts

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

package/dist/components/inline/ElmTypingAnimation.vue.d.ts

@@ -0,0 +1,21 @@
+import { Property } from 'csstype';
+export interface ElmTypingAnimationProps {
+    /**
+     * The texts to display.
+     */
+    texts: string[];
+    /**
+     * The interval between each text.
+     */
+    interval?: number;
+    /**
+     * The font size of the text.
+     */
+    fontSize: Property.FontSize<string | number>;
+}
+declare const _default: import('vue').DefineComponent<ElmTypingAnimationProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmTypingAnimationProps> & Readonly<{}>, {
+    texts: string[];
+    interval: number;
+    fontSize: Property.FontSize<string | number>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+export default _default;

package/dist/components/jsonschema/ElmChildContainer.stories.d.ts

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

package/dist/components/jsonschema/ElmChildContainer.vue.d.ts

@@ -0,0 +1,21 @@
+export interface ElmChildContainerProps {
+    icon: string;
+    text: string;
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<ElmChildContainerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmChildContainerProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/jsonschema/ElmFieldAttribute.stories.d.ts

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

package/dist/components/jsonschema/ElmFieldAttribute.vue.d.ts

@@ -0,0 +1,7 @@
+export interface ElmFieldAttributeProps {
+    icon: string;
+    name: string;
+    content: string;
+}
+declare const _default: import('vue').DefineComponent<ElmFieldAttributeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmFieldAttributeProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/jsonschema/ElmFieldType.stories.d.ts

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

package/dist/components/jsonschema/ElmFieldType.vue.d.ts

@@ -0,0 +1,8 @@
+import { JSONSchema7TypeName } from 'json-schema';
+export interface ElmFieldTypeProps {
+    type: JSONSchema7TypeName;
+    name?: string;
+    nullable?: boolean;
+}
+declare const _default: import('vue').DefineComponent<ElmFieldTypeProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmFieldTypeProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/jsonschema/ElmJsonSchema.stories.d.ts

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

package/dist/components/jsonschema/ElmJsonSchema.vue.d.ts

@@ -0,0 +1,7 @@
+import { JSONSchema7Definition } from 'json-schema';
+export interface ElmJsonSchemaProps {
+    name?: string;
+    schema: JSONSchema7Definition;
+}
+declare const _default: import('vue').DefineComponent<ElmJsonSchemaProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmJsonSchemaProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _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 Modal: Story;
+export declare const Invalid: Story;

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

@@ -0,0 +1,10 @@
+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 default _default;

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

@@ -0,0 +1,10 @@
+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]]);
+export {
+  ElmBlockImage as default
+};

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

@@ -0,0 +1,33 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, normalizeProps, guardReactiveProps } from "vue";
+import ElmImage from "./ElmImage.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmBlockImage",
+  props: {
+    rounded: { type: Boolean, default: true },
+    shadow: { type: Boolean, default: true },
+    src: {},
+    alt: {},
+    enableModal: { type: Boolean },
+    margin: {}
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style.container)
+      }, [
+        createElementVNode("div", {
+          style: normalizeStyle({
+            boxShadow: _ctx.shadow ? "0 0 0.125rem #b3b3b3" : void 0,
+            ..._ctx.rounded ? { borderRadius: "0.25rem", overflow: "hidden" } : {}
+          })
+        }, [
+          createVNode(ElmImage, normalizeProps(guardReactiveProps(props)), null, 16)
+        ], 4)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,20 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._container_ppumw_1{width:100%;display:flex;justify-content:center}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const container = "_container_ppumw_1";
+const style0 = {
+  container
+};
+export {
+  container,
+  style0 as default
+};

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

@@ -1,3 +1,4 @@
+import { Property } from 'csstype';
 export interface ElmFileProps {
     /**
      * The name of the file.
@@ -11,6 +12,10 @@ export interface ElmFileProps {
      * 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, {}, any>;
+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,77 @@
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createVNode, unref, createBlock, createCommentVNode } from "vue";
+import { Icon } from "@iconify/vue";
+import ElmInlineText from "../inline/ElmInlineText.vue.mjs";
+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(unref(Icon), {
+            icon: "mdi:file-outline",
+            class: normalizeClass(_ctx.$style.icon)
+          }, null, 8, ["class"]),
+          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(unref(Icon), {
+            icon: "mdi:download",
+            class: normalizeClass(_ctx.$style["download-icon"]),
+            onClick: _cache[0] || (_cache[0] = () => {
+              downloadFile(
+                _ctx.src,
+                _ctx.name ?? getLastPathSegmentWithoutQueryOrHash(_ctx.src) ?? "unknown file"
+              );
+            })
+          }, null, 8, ["class"])
+        ], 2)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

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

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

@@ -4,4 +4,6 @@ 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

@@ -1,3 +1,4 @@
+import { Property } from 'csstype';
 export interface ElmImageProps {
     /**
      * Image source URL
@@ -11,6 +12,10 @@ export interface ElmImageProps {
      * 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;

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

@@ -0,0 +1,22 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode(".v-enter-to[data-v-aae1a3f7],.v-leave-from[data-v-aae1a3f7]{opacity:1}.v-enter-active[data-v-aae1a3f7],.v-leave-active[data-v-aae1a3f7]{transition:opacity .3s}.v-enter-from[data-v-aae1a3f7],.v-leave-to[data-v-aae1a3f7]{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-aae1a3f7"]]);
+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 "../inline/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
+};