@elmethis/core 0.6.4 → 0.7.0

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

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

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

@@ -0,0 +1,59 @@
+import { defineComponent, useCssModule, ref, useTemplateRef, watch, onMounted, createElementBlock, openBlock, normalizeClass } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmMermaid",
+  props: {
+    code: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const classes = useCssModule();
+    const isRendered = ref(false);
+    const elementRef = useTemplateRef("svgRef");
+    const renderMermaid = async () => {
+      if (!elementRef.value) return;
+      isRendered.value = false;
+      const { default: mermaid } = await import("mermaid");
+      try {
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: "base",
+          themeVariables: {
+            mainBkg: "#fbfcff",
+            lineColor: "#606875",
+            primaryColor: "#6c7483",
+            secondaryColor: "#e9dec5",
+            tertiaryColor: "#f5f6f8",
+            tertiaryBorderColor: "#e2d4b2",
+            tertiaryTextColor: "#b69545",
+            // Sequence Diagram
+            signalColor: "#949ba7"
+            // default: textColor
+          }
+        });
+        const { svg } = await mermaid.render(classes.mermaid, props.code);
+        elementRef.value.innerHTML = svg;
+        isRendered.value = true;
+      } catch (error) {
+        console.error("Mermaid render error:", error);
+        elementRef.value.innerHTML = `<pre>${props.code}</pre>`;
+      }
+    };
+    watch(() => props.code, renderMermaid);
+    onMounted(renderMermaid);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref: "svgRef",
+        class: normalizeClass([
+          _ctx.$style.mermaid,
+          {
+            [_ctx.$style.raw]: !isRendered.value,
+            [_ctx.$style.rendered]: isRendered.value
+          }
+        ])
+      }, null, 2);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,26 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._mermaid_1r2yy_1{display:block}._mermaid_1r2yy_1::-moz-selection{color:#cccfd5;background-color:#494f59}._mermaid_1r2yy_1::selection{color:#cccfd5;background-color:#494f59}._raw_1r2yy_9{opacity:0}._rendered_1r2yy_13{opacity:1}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const mermaid = "_mermaid_1r2yy_1";
+const raw = "_raw_1r2yy_9";
+const rendered = "_rendered_1r2yy_13";
+const style0 = {
+  mermaid,
+  raw,
+  rendered
+};
+export {
+  style0 as default,
+  mermaid,
+  raw,
+  rendered
+};

package/dist/components/others/ElmJsonComponentRenderer.vue.d.ts

@@ -2,5 +2,5 @@ import { Component } from 'jarkup-ts';
 export interface ElmJsonComponentRendererProps {
     jsonComponents: Component[];
 }
-declare const _default: import('vue').DefineComponent<ElmJsonComponentRendererProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmJsonComponentRendererProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: import('vue').DefineComponent<ElmJsonComponentRendererProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmJsonComponentRendererProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

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

@@ -10,7 +10,7 @@
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-import { defineComponent, useCssModule, defineAsyncComponent, createBlock, openBlock, resolveDynamicComponent, unref, h } from "vue";
+import { defineComponent, useCssModule, defineAsyncComponent, ref, computed, watch, createElementBlock, openBlock, createBlock, resolveDynamicComponent, h } from "vue";
 import "@mdi/js";
 import "polished";
 import "@vueuse/core";
@@ -38,6 +38,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const AsyncElmKatex = defineAsyncComponent({
       loader: () => import("../code/ElmKatex.vue.mjs")
     });
+    const AsyncElmMermaid = defineAsyncComponent({
+      loader: () => import("../code/ElmMermaid.vue.mjs")
+    });
     const AsyncElmInlineIcon = defineAsyncComponent({
       loader: () => import("../icon/ElmInlineIcon.vue.mjs")
     });
@@ -110,9 +113,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       loadingComponent: ElmBlockFallback
     });
     const convertInlineComponentsToPlainText = (inlineComponents) => {
-      return inlineComponents.map((component) => {
-        if (component.type === "Text") {
-          return component.props.text;
+      return inlineComponents.map((component2) => {
+        if (component2.type === "Text") {
+          return component2.props.text;
         } else {
           return "";
         }
@@ -195,6 +198,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           { default: () => render2(slots.default) }
         ) : h(AsyncElmCodeBlock, { code: props2.code, language: props2.language }),
         Katex: ({ props: props2 }) => h(AsyncElmKatex, { expression: props2.expression, block: true }),
+        Mermaid: ({ props: props2 }) => h(AsyncElmMermaid, { code: props2.code }),
         Table: ({ props: props2, slots }) => {
           let header = void 0;
           if (slots.header != null) {
@@ -231,15 +235,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const render = (jsonComponents) => {
       const results = [];
-      for (const component of jsonComponents) {
-        const renderFunction = defaultRenderFunctionMap(render)[component.type];
-        results.push(renderFunction(component));
+      for (const component2 of jsonComponents) {
+        const renderFunction = defaultRenderFunctionMap(render)[component2.type];
+        results.push(renderFunction(component2));
       }
       return results;
     };
-    const renderResult = render(props.jsonComponents);
+    const renderResult = ref(render(props.jsonComponents));
+    const component = computed(() => ({
+      render: () => renderResult.value
+    }));
+    watch(
+      () => props.jsonComponents,
+      (newComponents) => {
+        renderResult.value = render(newComponents);
+      }
+    );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(() => unref(renderResult)));
+      return openBlock(), createElementBlock("div", null, [
+        (openBlock(), createBlock(resolveDynamicComponent(component.value)))
+      ]);
     };
   }
 });

package/dist/components/others/ElmMarkdown.vue.d.ts

@@ -1,5 +1,5 @@
 export interface ElmMarkdownProps {
     markdown: string;
 }
-declare const _default: import('vue').DefineComponent<ElmMarkdownProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmMarkdownProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: import('vue').DefineComponent<ElmMarkdownProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ElmMarkdownProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/components/others/ElmMarkdown.vue.mjs

@@ -10,7 +10,7 @@
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-import { defineComponent, defineAsyncComponent, ref, computed, watch, createBlock, openBlock, resolveDynamicComponent, h } from "vue";
+import { defineComponent, defineAsyncComponent, ref, computed, watch, createElementBlock, openBlock, createBlock, resolveDynamicComponent, h } from "vue";
 import { marked as k } from "../../node_modules/.pnpm/marked@16.4.0/node_modules/marked/lib/marked.esm.mjs";
 import "@mdi/js";
 import "polished";
@@ -293,7 +293,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(component.value));
+      return openBlock(), createElementBlock("div", null, [
+        (openBlock(), createBlock(resolveDynamicComponent(component.value)))
+      ]);
     };
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/core",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "publishConfig": {
     "access": "public"
   },