@elmethis/core 1.0.0-alpha.180 → 1.0.0-alpha.182

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

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

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

@@ -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-50369c29],.v-leave-from[data-v-50369c29]{opacity:1}.v-enter-active[data-v-50369c29],.v-leave-active[data-v-50369c29]{transition:opacity .3s}.v-enter-from[data-v-50369c29],.v-leave-to[data-v-50369c29]{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-50369c29"]]);
+export {
+  ElmBlockImage as default
+};

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

@@ -0,0 +1,91 @@
+import { defineComponent, ref, createElementBlock, openBlock, Fragment, createElementVNode, createVNode, Transition, withCtx, unref, normalizeClass, normalizeStyle, createCommentVNode } from "vue";
+import ElmRectangleWave from "../fallback/ElmRectangleWave.vue.mjs";
+import ElmDotLoadingIcon from "../icon/ElmDotLoadingIcon.vue.mjs";
+import { useImage, onKeyStroke } from "@vueuse/core";
+import ElmInlineText from "../inline/ElmInlineText.vue.mjs";
+const _hoisted_1 = { style: { marginBlock: "2rem" } };
+const _hoisted_2 = ["src", "alt"];
+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", _hoisted_1, [
+          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("div", {
+                key: 2,
+                class: normalizeClass(_ctx.$style.container)
+              }, [
+                createElementVNode("img", {
+                  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_2)
+              ], 2))
+            ]),
+            _: 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,33 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._container_7f0ob_1{overflow:hidden;border-radius:.25rem;box-shadow:0 0 .25rem #0000004d}._image_7f0ob_7{display:block;max-width:100%;height:var(--height);opacity:var(--opacity);transition:opacity .4s;cursor:zoom-in}._error_7f0ob_16{display:flex;justify-content:center;align-items:center;gap:1rem;width:100%;height:100%;min-height:10rem;line-height:1.5rem;color:#c56565}._fallback_7f0ob_28{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_7f0ob_41{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_7f0ob_41 ._modal-image_7f0ob_54{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_7f0ob_1";
+const image = "_image_7f0ob_7";
+const error = "_error_7f0ob_16";
+const fallback = "_fallback_7f0ob_28";
+const modal = "_modal_7f0ob_41";
+const style0 = {
+  container,
+  image,
+  error,
+  fallback,
+  modal,
+  "modal-image": "_modal-image_7f0ob_54"
+};
+export {
+  container,
+  style0 as default,
+  error,
+  fallback,
+  image,
+  modal
+};

package/dist/components/renderer/ElmJsonRenderer.vue.d.ts

@@ -22,14 +22,15 @@ import { ElmTableRowProps } from '../table/ElmTableRow.vue';
 import { ElmTableCellProps } from '../table/ElmTableCell.vue';
 import { ElmKatexProps } from '../code/ElmKatex.vue';
 import { ElmImageProps } from '../media/ElmImage.vue';
+import { ElmBlockImageProps } from '../media/ElmBlockImage.vue';
 import { ElmBookmarkProps } from '../navigation/ElmBookmark.vue';
 import { ElmToggleProps } from '../containments/ElmToggle.vue';
 import { ElmCheckboxProps } from '../form/ElmCheckbox.vue';
 import { ElmFileProps } from '../media/ElmFile.vue';
 import { ElmColumnProps } from '../containments/ElmColumn.vue';
 import { ElmColumnListProps } from '../containments/ElmColumnList.vue';
-type ComponentType = 'ElmInlineText' | 'ElmInlineLink' | 'ElmInlineIcon' | 'ElmCallout' | 'ElmBulletedList' | 'ElmNumberedList' | 'ElmListItem' | 'ElmBlockQuote' | 'ElmDivider' | 'ElmHeading1' | 'ElmHeading2' | 'ElmHeading3' | 'ElmHeading4' | 'ElmHeading5' | 'ElmHeading6' | 'ElmCodeBlock' | 'ElmParagraph' | 'ElmTable' | 'ElmTableHeader' | 'ElmTableBody' | 'ElmTableRow' | 'ElmTableCell' | 'ElmKatex' | 'ElmImage' | 'ElmBookmark' | 'ElmToggle' | 'ElmCheckbox' | 'ElmFile' | 'ElmColumn' | 'ElmColumnList';
-type ComponentProps = ElmInlineTextProps | ElmInlineLinkProps | ElmInlineIconProps | ElmCalloutProps | ElmBulletedListProps | ElmNumberedListProps | ElmListItemProps | ElmBlockQuoteProps | ElmDividerProps | ElmHeading1Props | ElmHeading2Props | ElmHeading3Props | ElmHeading4Props | ElmHeading5Props | ElmHeading6Props | ElmCodeBlockProps | ElmParagraphProps | ElmTableProps | ElmTableHeaderProps | ElmTableBodyProps | ElmTableRowProps | ElmTableCellProps | ElmKatexProps | ElmImageProps | ElmBookmarkProps | ElmToggleProps | ElmCheckboxProps | ElmFileProps | ElmColumnProps | ElmColumnListProps;
+type ComponentType = 'ElmInlineText' | 'ElmInlineLink' | 'ElmInlineIcon' | 'ElmCallout' | 'ElmBulletedList' | 'ElmNumberedList' | 'ElmListItem' | 'ElmBlockQuote' | 'ElmDivider' | 'ElmHeading1' | 'ElmHeading2' | 'ElmHeading3' | 'ElmHeading4' | 'ElmHeading5' | 'ElmHeading6' | 'ElmCodeBlock' | 'ElmParagraph' | 'ElmTable' | 'ElmTableHeader' | 'ElmTableBody' | 'ElmTableRow' | 'ElmTableCell' | 'ElmKatex' | 'ElmImage' | 'ElmBlockImage' | 'ElmBookmark' | 'ElmToggle' | 'ElmCheckbox' | 'ElmFile' | 'ElmColumn' | 'ElmColumnList';
+type ComponentProps = ElmInlineTextProps | ElmInlineLinkProps | ElmInlineIconProps | ElmCalloutProps | ElmBulletedListProps | ElmNumberedListProps | ElmListItemProps | ElmBlockQuoteProps | ElmDividerProps | ElmHeading1Props | ElmHeading2Props | ElmHeading3Props | ElmHeading4Props | ElmHeading5Props | ElmHeading6Props | ElmCodeBlockProps | ElmParagraphProps | ElmTableProps | ElmTableHeaderProps | ElmTableBodyProps | ElmTableRowProps | ElmTableCellProps | ElmKatexProps | ElmImageProps | ElmBlockImageProps | ElmBookmarkProps | ElmToggleProps | ElmCheckboxProps | ElmFileProps | ElmColumnProps | ElmColumnListProps;
 interface JsonComponentBase {
     type: ComponentType;
     id?: string;
@@ -156,6 +157,11 @@ interface ElmImageJsonComponent extends JsonComponentBase {
     id?: string;
     props?: ElmImageProps;
 }
+interface ElmBlockImageJsonComponent extends JsonComponentBase {
+    type: 'ElmBlockImage';
+    id?: string;
+    props?: ElmBlockImageProps;
+}
 interface ElmBookmarkJsonComponent extends JsonComponentBase {
     type: 'ElmBookmark';
     id?: string;
@@ -186,7 +192,7 @@ interface ElmColumnListJsonComponent extends JsonComponentBase {
     id?: string;
     props?: ElmColumnListProps;
 }
-type JsonComponent = ElmInlineTextJsonComponent | ElmInlineLinkJsonComponent | ElmInlineIconJsonComponent | ElmCalloutJsonComponent | ElmBulletedListJsonComponent | ElmNumberedListJsonComponent | ElmListItemJsonComponent | ElmBlockQuoteJsonComponent | ElmDividerJsonComponent | ElmHeading1JsonComponent | ElmHeading2JsonComponent | ElmHeading3JsonComponent | ElmHeading4JsonComponent | ElmHeading5JsonComponent | ElmHeading6JsonComponent | ElmCodeBlockJsonComponent | ElmParagraphJsonComponent | ElmTableJsonComponent | ElmTableHeaderJsonComponent | ElmTableBodyJsonComponent | ElmTableRowJsonComponent | ElmTableCellJsonComponent | ElmKatexJsonComponent | ElmImageJsonComponent | ElmBookmarkJsonComponent | ElmToggleJsonComponent | ElmCheckboxJsonComponent | ElmFileJsonComponent | ElmColumnJsonComponent | ElmColumnListJsonComponent;
+type JsonComponent = ElmInlineTextJsonComponent | ElmInlineLinkJsonComponent | ElmInlineIconJsonComponent | ElmCalloutJsonComponent | ElmBulletedListJsonComponent | ElmNumberedListJsonComponent | ElmListItemJsonComponent | ElmBlockQuoteJsonComponent | ElmDividerJsonComponent | ElmHeading1JsonComponent | ElmHeading2JsonComponent | ElmHeading3JsonComponent | ElmHeading4JsonComponent | ElmHeading5JsonComponent | ElmHeading6JsonComponent | ElmCodeBlockJsonComponent | ElmParagraphJsonComponent | ElmTableJsonComponent | ElmTableHeaderJsonComponent | ElmTableBodyJsonComponent | ElmTableRowJsonComponent | ElmTableCellJsonComponent | ElmKatexJsonComponent | ElmImageJsonComponent | ElmBlockImageJsonComponent | ElmBookmarkJsonComponent | ElmToggleJsonComponent | ElmCheckboxJsonComponent | ElmFileJsonComponent | ElmColumnJsonComponent | ElmColumnListJsonComponent;
 export interface ElmJsonRendererProps {
     json: JsonComponent[];
 }

package/dist/components/renderer/ElmJsonRenderer.vue.mjs

@@ -71,6 +71,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     const ElmKatex = defineAsyncComponent(() => import("../code/ElmKatex.vue.mjs"));
     const ElmImage = defineAsyncComponent(() => import("../media/ElmImage.vue.mjs"));
+    const ElmBlockImage = defineAsyncComponent(
+      () => import("../media/ElmBlockImage.vue.mjs")
+    );
     const ElmBookmark = defineAsyncComponent(
       () => import("../navigation/ElmBookmark.vue.mjs")
     );
@@ -112,6 +115,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       ElmTableCell: markRaw(ElmTableCell),
       ElmKatex: markRaw(ElmKatex),
       ElmImage: markRaw(ElmImage),
+      ElmBlockImage: markRaw(ElmBlockImage),
       ElmBookmark: markRaw(ElmBookmark),
       ElmToggle: markRaw(ElmToggle),
       ElmCheckbox: markRaw(ElmCheckbox),

package/package.json

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