@elmethis/vue 0.2.11 → 0.3.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-92929132],.v-leave-from[data-v-92929132]{opacity:1}.v-enter-active[data-v-92929132],.v-leave-active[data-v-92929132]{transition:opacity .15s}.v-enter-from[data-v-92929132],.v-leave-to[data-v-92929132]{opacity:0}"));
+      elementStyle.appendChild(document.createTextNode(".v-enter-to[data-v-514e4afd],.v-leave-from[data-v-514e4afd]{opacity:1}.v-enter-active[data-v-514e4afd],.v-leave-active[data-v-514e4afd]{transition:opacity .15s}.v-enter-from[data-v-514e4afd],.v-leave-to[data-v-514e4afd]{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-92929132"]]);
+const ElmCodeBlock = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-514e4afd"]]);
 export {
   ElmCodeBlock as default
 };

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

@@ -3,7 +3,7 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode(".fade-enter-active[data-v-cbf6ab16],.fade-leave-active[data-v-cbf6ab16]{transition:all .1s ease}.fade-enter-from[data-v-cbf6ab16],.fade-leave-to[data-v-cbf6ab16]{opacity:0;transform:translate(.5rem)}"));
+      elementStyle.appendChild(document.createTextNode(".fade-enter-active[data-v-e975d67d],.fade-leave-active[data-v-e975d67d]{transition:all .1s ease}.fade-enter-from[data-v-e975d67d],.fade-leave-to[data-v-e975d67d]{opacity:0;transform:translate(.5rem)}"));
       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 ElmCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-cbf6ab16"]]);
+const ElmCommandPalette = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules], ["__scopeId", "data-v-e975d67d"]]);
 export {
   ElmCommandPalette as default
 };

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

@@ -20,4 +20,6 @@ export declare const CodeBlock: Story;
 export declare const Katex: Story;
 export declare const Table: Story;
 export declare const ColumnList: Story;
+export declare const ColumnListWithRatio: Story;
 export declare const Unsupported: Story;
+export declare const Unified: Story;

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

@@ -10,7 +10,7 @@
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-import { defineComponent, useCssModule, ref, computed, watch, createElementBlock, openBlock, createBlock, resolveDynamicComponent, h } from "vue";
+import { defineComponent, useCssModule, ref, computed, watch, createElementBlock, openBlock, normalizeClass, createBlock, resolveDynamicComponent, h } from "vue";
 import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
 import ElmKatex from "../code/ElmKatex.vue.mjs";
 import ElmMermaid from "../code/ElmMermaid.vue.mjs";
@@ -151,9 +151,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           { class: style["column-list"] },
           { default: () => render2(slots.default) }
         ),
-        Column: ({ slots }) => h(
+        Column: ({ props: props2, slots }) => h(
           "div",
-          { class: style.column },
+          {
+            class: style.column,
+            style: {
+              "--width-ratio": props2?.widthRatio ? props2.widthRatio : 1
+            }
+          },
           { default: () => render2(slots.default) }
         ),
         Unsupported: ({ props: props2 }) => h(ElmUnsupportedBlock, { details: props2?.details })
@@ -178,9 +183,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     );
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style["jarkup-body"])
+      }, [
         (openBlock(), createBlock(resolveDynamicComponent(components.value)))
-      ]);
+      ], 2);
     };
   }
 });

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

@@ -3,16 +3,17 @@
   try {
     if (typeof document != "undefined") {
       var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode("._column-list_1at6s_1{box-sizing:content-box;padding-block:.25rem;width:100%;display:flex;flex-direction:row;gap:.5rem;justify-content:space-around;overflow:auto}._column_1at6s_1{flex:1}"));
+      elementStyle.appendChild(document.createTextNode("._jarkup-body_zpjoe_1>*+*{margin-block-start:2em}._column-list_zpjoe_5{box-sizing:content-box;padding-block:.25rem;width:100%;display:flex;flex-direction:row;gap:.5rem;justify-content:space-around;overflow:auto}._column_zpjoe_5{flex:1;flex:var(--width-ratio, 1)}"));
       document.head.appendChild(elementStyle);
     }
   } catch (e) {
     console.error("vite-plugin-css-injected-by-js", e);
   }
 })();
-const column = "_column_1at6s_1";
+const column = "_column_zpjoe_5";
 const style0 = {
-  "column-list": "_column-list_1at6s_1",
+  "jarkup-body": "_jarkup-body_zpjoe_1",
+  "column-list": "_column-list_zpjoe_5",
   column
 };
 export {

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

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof ElmMarkdown>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Primary: Story;
+export declare const CodeBlock: Story;

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

@@ -1,255 +1,10 @@
-(function() {
-  "use strict";
-  try {
-    if (typeof document != "undefined") {
-      var elementStyle = document.createElement("style");
-      elementStyle.appendChild(document.createTextNode(".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) {
-    console.error("vite-plugin-css-injected-by-js", e);
-  }
-})();
-import { defineComponent, ref, computed, watch, createElementBlock, openBlock, Fragment, renderList, createBlock, resolveDynamicComponent, h } from "vue";
-import { marked } from "marked";
-import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
-import ElmHeading from "../typography/ElmHeading.vue.mjs";
-import ElmParagraph from "../typography/ElmParagraph.vue.mjs";
-import _sfc_main$2 from "../typography/ElmList.vue.mjs";
-
-import ElmBlockQuote from "../typography/ElmBlockQuote.vue.mjs";
-import ElmDivider from "../typography/ElmDivider.vue.mjs";
-import ElmImage from "../media/ElmImage.vue.mjs";
-import ElmCodeBlock from "../code/ElmCodeBlock.vue.mjs";
-import ElmTable from "../table/ElmTable.vue.mjs";
-import ElmTableHeader from "../table/ElmTableHeader.vue.mjs";
-import _sfc_main$1 from "../table/ElmTableBody.vue.mjs";
-import ElmTableRow from "../table/ElmTableRow.vue.mjs";
-import ElmTableCell from "../table/ElmTableCell.vue.mjs";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "ElmMarkdown",
-  props: {
-    markdown: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const renderByToken = ({ tokens }) => {
-      const results = [];
-      for (const token of tokens) {
-        switch (token.type) {
-          case "blockquote":
-            if (token.tokens != null && token.tokens.length !== 0) {
-              results.push(
-                h(
-                  ElmBlockQuote,
-                  {},
-                  {
-                    default: () => renderByToken({ tokens: token.tokens })
-                  }
-                )
-              );
-            }
-            break;
-          case "br":
-            results.push(h("br"));
-            break;
-          case "code":
-            results.push(
-              h(ElmCodeBlock, {
-                code: token.text.trim(),
-                language: token.lang
-              })
-            );
-            break;
-          case "codespan":
-            results.push(h(ElmInlineText, { text: token.text, code: true }));
-            break;
-          case "def":
-            h("span", "aaa");
-            break;
-          case "del":
-            results.push(
-              token.tokens != null && token.tokens.length !== 0 ? h(
-                ElmInlineText,
-                { strikethrough: true },
-                {
-                  default: () => renderByToken({ tokens: token.tokens })
-                }
-              ) : h(ElmInlineText, { text: token.text, strikethrough: true })
-            );
-            break;
-          case "em":
-            results.push(
-              token.tokens != null && token.tokens.length !== 0 ? h(
-                ElmInlineText,
-                { italic: true },
-                {
-                  default: () => renderByToken({ tokens: token.tokens })
-                }
-              ) : h(ElmInlineText, { text: token.text, italic: true })
-            );
-            break;
-          case "escape":
-            break;
-          case "heading":
-            if (token.tokens && token.tokens.length !== 0) {
-              results.push(
-                h(
-                  ElmHeading,
-                  { level: token.depth },
-                  {
-                    default: () => renderByToken({ tokens: token.tokens })
-                  }
-                )
-              );
-            } else {
-              results.push(h(ElmHeading, { level: token.depth, text: token.text }));
-            }
-            break;
-          case "hr":
-            results.push(h(ElmDivider));
-            break;
-          case "html":
-            break;
-          case "image":
-            results.push(
-              h(ElmImage, {
-                block: true,
-                enableModal: true,
-                src: token.href,
-                alt: token.text
-              })
-            );
-            break;
-          case "link":
-            results.push(
-              token.tokens != null && token.tokens.length !== 0 ? h(ElmInlineText, {
-                text: token.text,
-                href: token.href
-              }) : h(ElmInlineText, { text: token.text, href: token.href })
-            );
-            break;
-          case "list":
-            const listItems = token.items.map(
-              (item) => h("li", {}, renderByToken({ tokens: item.tokens }))
-            );
-            results.push(
-              h(
-                _sfc_main$2,
-                {
-                  listStyle: token.ordered ? "ordered" : "unordered"
-                },
-                { default: () => listItems }
-              )
-            );
-            break;
-          case "list_item":
-            results.push(
-              token.tokens != null && token.tokens.length !== 0 ? h(
-                "li",
-                {},
-                {
-                  default: () => renderByToken({ tokens: token.tokens })
-                }
-              ) : h("li", { text: token.text })
-            );
-            break;
-          case "paragraph":
-            if (token.tokens && token.tokens.length !== 0) {
-              results.push(
-                h(
-                  ElmParagraph,
-                  {},
-                  {
-                    default: () => renderByToken({ tokens: token.tokens })
-                  }
-                )
-              );
-            }
-            break;
-          case "space":
-            break;
-          case "strong":
-            results.push(
-              token.tokens != null && token.tokens.length !== 0 ? h(
-                ElmInlineText,
-                { bold: true },
-                {
-                  default: () => renderByToken({ tokens: token.tokens })
-                }
-              ) : h(ElmInlineText, { text: token.text, bold: true })
-            );
-            break;
-          case "table":
-            const renderTableCells = ({
-              cells
-            }) => cells.map(
-              (cell) => h(
-                ElmTableCell,
-                {},
-                { default: () => renderByToken({ tokens: cell.tokens }) }
-              )
-            );
-            const headerRow = h(
-              ElmTableRow,
-              {},
-              { default: () => renderTableCells({ cells: token.header }) }
-            );
-            const bodyRows = token.rows.map(
-              (row) => h(
-                ElmTableRow,
-                {},
-                { default: () => renderTableCells({ cells: row }) }
-              )
-            );
-            const table = h(
-              ElmTable,
-              {},
-              {
-                header: () => h(ElmTableHeader, {}, { default: () => headerRow }),
-                body: () => h(_sfc_main$1, {}, { default: () => bodyRows })
-              }
-            );
-            results.push(table);
-            break;
-          case "text":
-            results.push(
-              token.tokens != null && token.tokens.length !== 0 ? h(
-                ElmInlineText,
-                {},
-                {
-                  default: () => renderByToken({ tokens: token.tokens })
-                }
-              ) : h(ElmInlineText, { text: token.text })
-            );
-            break;
-        }
-      }
-      return results;
-    };
-    const renderMarkdown = ({ markdown }) => {
-      const tokens = marked.setOptions({ gfm: true }).lexer(markdown);
-      return renderByToken({ tokens });
-    };
-    const renderResult = ref(renderMarkdown({ markdown: props.markdown }));
-    const components = computed(() => ({
-      render: () => renderResult.value
-    }));
-    watch(
-      () => props.markdown,
-      (md) => {
-        if (md != null) renderResult.value = renderMarkdown({ markdown: md });
-      }
-    );
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", null, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(components.value, (component) => {
-          return openBlock(), createBlock(resolveDynamicComponent(component));
-        }), 256))
-      ]);
-    };
-  }
-});
+import _sfc_main from "./ElmMarkdown.vue2.mjs";
+import style0 from "./ElmMarkdown.vue3.mjs";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
+const cssModules = {
+  "$style": style0
+};
+const ElmMarkdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
 export {
-  _sfc_main as default
+  ElmMarkdown as default
 };

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

@@ -1,4 +1,257 @@
-import _sfc_main from "./ElmMarkdown.vue.mjs";
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode(".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) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+import { defineComponent, ref, computed, watch, createElementBlock, openBlock, normalizeClass, Fragment, renderList, createBlock, resolveDynamicComponent, h } from "vue";
+import { marked } from "marked";
+import ElmInlineText from "../typography/ElmInlineText.vue.mjs";
+import ElmHeading from "../typography/ElmHeading.vue.mjs";
+import ElmParagraph from "../typography/ElmParagraph.vue.mjs";
+import _sfc_main$2 from "../typography/ElmList.vue.mjs";
+
+import ElmBlockQuote from "../typography/ElmBlockQuote.vue.mjs";
+import ElmDivider from "../typography/ElmDivider.vue.mjs";
+import ElmImage from "../media/ElmImage.vue.mjs";
+import ElmCodeBlock from "../code/ElmCodeBlock.vue.mjs";
+import ElmTable from "../table/ElmTable.vue.mjs";
+import ElmTableHeader from "../table/ElmTableHeader.vue.mjs";
+import _sfc_main$1 from "../table/ElmTableBody.vue.mjs";
+import ElmTableRow from "../table/ElmTableRow.vue.mjs";
+import ElmTableCell from "../table/ElmTableCell.vue.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElmMarkdown",
+  props: {
+    markdown: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const renderByToken = ({ tokens }) => {
+      const results = [];
+      for (const token of tokens) {
+        switch (token.type) {
+          case "blockquote":
+            if (token.tokens != null && token.tokens.length !== 0) {
+              results.push(
+                h(
+                  ElmBlockQuote,
+                  {},
+                  {
+                    default: () => renderByToken({ tokens: token.tokens })
+                  }
+                )
+              );
+            }
+            break;
+          case "br":
+            results.push(h("br"));
+            break;
+          case "code":
+            results.push(
+              h(ElmCodeBlock, {
+                code: token.text.trim(),
+                language: token.lang
+              })
+            );
+            break;
+          case "codespan":
+            results.push(h(ElmInlineText, { text: token.text, code: true }));
+            break;
+          case "def":
+            h("span", "aaa");
+            break;
+          case "del":
+            results.push(
+              token.tokens != null && token.tokens.length !== 0 ? h(
+                ElmInlineText,
+                { strikethrough: true },
+                {
+                  default: () => renderByToken({ tokens: token.tokens })
+                }
+              ) : h(ElmInlineText, { text: token.text, strikethrough: true })
+            );
+            break;
+          case "em":
+            results.push(
+              token.tokens != null && token.tokens.length !== 0 ? h(
+                ElmInlineText,
+                { italic: true },
+                {
+                  default: () => renderByToken({ tokens: token.tokens })
+                }
+              ) : h(ElmInlineText, { text: token.text, italic: true })
+            );
+            break;
+          case "escape":
+            break;
+          case "heading":
+            if (token.tokens && token.tokens.length !== 0) {
+              results.push(
+                h(
+                  ElmHeading,
+                  { level: token.depth },
+                  {
+                    default: () => renderByToken({ tokens: token.tokens })
+                  }
+                )
+              );
+            } else {
+              results.push(h(ElmHeading, { level: token.depth, text: token.text }));
+            }
+            break;
+          case "hr":
+            results.push(h(ElmDivider));
+            break;
+          case "html":
+            break;
+          case "image":
+            results.push(
+              h(ElmImage, {
+                block: true,
+                enableModal: true,
+                src: token.href,
+                alt: token.text
+              })
+            );
+            break;
+          case "link":
+            results.push(
+              token.tokens != null && token.tokens.length !== 0 ? h(ElmInlineText, {
+                text: token.text,
+                href: token.href
+              }) : h(ElmInlineText, { text: token.text, href: token.href })
+            );
+            break;
+          case "list":
+            const listItems = token.items.map(
+              (item) => h("li", {}, renderByToken({ tokens: item.tokens }))
+            );
+            results.push(
+              h(
+                _sfc_main$2,
+                {
+                  listStyle: token.ordered ? "ordered" : "unordered"
+                },
+                { default: () => listItems }
+              )
+            );
+            break;
+          case "list_item":
+            results.push(
+              token.tokens != null && token.tokens.length !== 0 ? h(
+                "li",
+                {},
+                {
+                  default: () => renderByToken({ tokens: token.tokens })
+                }
+              ) : h("li", { text: token.text })
+            );
+            break;
+          case "paragraph":
+            if (token.tokens && token.tokens.length !== 0) {
+              results.push(
+                h(
+                  ElmParagraph,
+                  {},
+                  {
+                    default: () => renderByToken({ tokens: token.tokens })
+                  }
+                )
+              );
+            }
+            break;
+          case "space":
+            break;
+          case "strong":
+            results.push(
+              token.tokens != null && token.tokens.length !== 0 ? h(
+                ElmInlineText,
+                { bold: true },
+                {
+                  default: () => renderByToken({ tokens: token.tokens })
+                }
+              ) : h(ElmInlineText, { text: token.text, bold: true })
+            );
+            break;
+          case "table":
+            const renderTableCells = ({
+              cells
+            }) => cells.map(
+              (cell) => h(
+                ElmTableCell,
+                {},
+                { default: () => renderByToken({ tokens: cell.tokens }) }
+              )
+            );
+            const headerRow = h(
+              ElmTableRow,
+              {},
+              { default: () => renderTableCells({ cells: token.header }) }
+            );
+            const bodyRows = token.rows.map(
+              (row) => h(
+                ElmTableRow,
+                {},
+                { default: () => renderTableCells({ cells: row }) }
+              )
+            );
+            const table = h(
+              ElmTable,
+              {},
+              {
+                header: () => h(ElmTableHeader, {}, { default: () => headerRow }),
+                body: () => h(_sfc_main$1, {}, { default: () => bodyRows })
+              }
+            );
+            results.push(table);
+            break;
+          case "text":
+            results.push(
+              token.tokens != null && token.tokens.length !== 0 ? h(
+                ElmInlineText,
+                {},
+                {
+                  default: () => renderByToken({ tokens: token.tokens })
+                }
+              ) : h(ElmInlineText, { text: token.text })
+            );
+            break;
+        }
+      }
+      return results;
+    };
+    const renderMarkdown = ({ markdown }) => {
+      const tokens = marked.setOptions({ gfm: true }).lexer(markdown);
+      return renderByToken({ tokens });
+    };
+    const renderResult = ref(renderMarkdown({ markdown: props.markdown }));
+    const components = computed(() => ({
+      render: () => renderResult.value
+    }));
+    watch(
+      () => props.markdown,
+      (md) => {
+        if (md != null) renderResult.value = renderMarkdown({ markdown: md });
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(_ctx.$style["markdown-body"])
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(components.value, (component) => {
+          return openBlock(), createBlock(resolveDynamicComponent(component));
+        }), 256))
+      ], 2);
+    };
+  }
+});
 export {
   _sfc_main as default
 };

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

@@ -0,0 +1,18 @@
+(function() {
+  "use strict";
+  try {
+    if (typeof document != "undefined") {
+      var elementStyle = document.createElement("style");
+      elementStyle.appendChild(document.createTextNode("._markdown-body_grhpg_1>*+*{margin-block-start:2em}"));
+      document.head.appendChild(elementStyle);
+    }
+  } catch (e) {
+    console.error("vite-plugin-css-injected-by-js", e);
+  }
+})();
+const style0 = {
+  "markdown-body": "_markdown-body_grhpg_1"
+};
+export {
+  style0 as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/vue",
-  "version": "0.2.11",
+  "version": "0.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -24,32 +24,32 @@
   },
   "dependencies": {
     "@mdi/js": "^7.4.47",
-    "@vueuse/core": "^14.2.0",
+    "@vueuse/core": "^14.2.1",
     "fuse.js": "^7.1.0",
     "katex": "^0.16.28",
     "lodash-es": "^4.17.23",
-    "marked": "^17.0.1",
-    "mermaid": "^11.12.2",
+    "marked": "^17.0.3",
+    "mermaid": "^11.12.3",
     "nanoid": "^5.1.6",
     "polished": "^4.3.1",
-    "shiki": "^3.21.0"
+    "shiki": "^3.22.0"
   },
   "devDependencies": {
-    "@ag-ui/core": "^0.0.43",
+    "@ag-ui/core": "^0.0.45",
     "@notionhq/client": "^5.9.0",
-    "storybook": "^10.2.4",
-    "@storybook/addon-docs": "^10.2.4",
-    "@storybook/vue3-vite": "10.2.4",
+    "storybook": "^10.2.10",
+    "@storybook/addon-docs": "^10.2.10",
+    "@storybook/vue3-vite": "10.2.10",
     "@types/json-schema": "^7.0.15",
     "@types/katex": "^0.16.8",
     "@types/lodash-es": "^4.17.12",
-    "@types/prismjs": "^1.26.5",
+    "@types/prismjs": "^1.26.6",
     "@vitejs/plugin-vue": "^6.0.4",
     "csstype": "^3.2.3",
-    "jarkup-ts": "^0.6.0",
+    "jarkup-ts": "^0.7.0",
     "openapi-types": "^12.1.3",
     "postcss": "^8.5.6",
-    "postcss-preset-env": "^11.1.2",
+    "postcss-preset-env": "^11.1.3",
     "sass": "^1.97.3",
     "vite": "^7.3.1",
     "vite-plugin-css-injected-by-js": "^3.5.2",