vuepress-plugin-md-enhance/lib/client/components/Mermaid.js

Markdown enhancement plugin for vuepress

import{useDarkMode as g,decodeData as c,LoadingIcon as v,isFunction as C}from"@vuepress/helper/client";import{watchImmediate as b}from"@vueuse/core";import{defineComponent as h,shallowRef as w,computed as y,ref as T,h as t,onMounted as x}from"vue";import"../styles/mermaid.scss";import{u as M}from"../mermaid-D26-9yYy.js";const a={useMaxWidth:!1},B=e=>({dark:e,background:e?"#1e1e1e":"#fff",primaryColor:e?"#389d70":"#4abf8a",primaryBorderColor:e?"#389d70":"#4abf8a",primaryTextColor:e?"#fff":"#000",secondaryColor:"#ffb500",secondaryBorderColor:e?"#fff":"#000",secondaryTextColor:e?"#ddd":"#333",tertiaryColor:e?"#282828":"#efeef4",tertiaryBorderColor:e?"#bbb":"#242424",tertiaryTextColor:e?"#ddd":"#333",noteBkgColor:e?"#f6d365":"#fff5ad",noteTextColor:"#242424",noteBorderColor:e?"#f6d365":"#333",lineColor:e?"#d3d3d3":"#333",textColor:e?"#fff":"#242424",mainBkg:e?"#389d70":"#4abf8a",errorBkgColor:"#eb4d5d",errorTextColor:"#fff",nodeBorder:e?"#389d70":"#4abf8a",nodeTextColor:e?"#fff":"#242424",signalTextColor:e?"#9e9e9e":"#242424",classText:"#fff",labelColor:"#fff",attributeBackgroundColorEven:e?"#0d1117":"#fff",attributeBackgroundColorOdd:e?"#161b22":"#f8f8f8",fillType0:e?"#cf1322":"#f1636e",fillType1:"#f39c12",fillType2:"#2ecc71",fillType3:"#fa541c",fillType4:"#25a55b",fillType5:"#13c2c2",fillType6:"#096dd9",fillType7:"#aa6fe9"});var k=h({name:"Mermaid",props:{id:{type:String,required:!0},code:{type:String,required:!0},title:String},setup(e){const d=g(),{themeVariables:i,...n}=M(),f=w(),s=y(()=>c(e.code)),l=T(""),p=async()=>{const{default:o}=await import("mermaid/dist/mermaid.esm.min.mjs");o.initialize({theme:"base",themeVariables:{...B(d.value),...C(i)?i(d.value):i},flowchart:a,sequence:a,journey:a,gantt:a,er:a,pie:a,...n,startOnLoad:!1}),l.value=(await o.render(e.id,s.value)).svg},m=()=>{const{body:o}=document,r=document.createElement("div");r.classList.add("mermaid-preview"),r.innerHTML=l.value,o.appendChild(r),r.addEventListener("click",()=>{o.removeChild(r)})},u=()=>{const o=`data:image/svg+xml;charset=utf8,${l.value.replace(/<br>/g,"<br />").replace(/%/g,"%25").replace(/"/g,"%22").replace(/'/g,"%27").replace(/&/g,"%26").replace(/#/g,"%23").replace(/{/g,"%7B").replace(/}/g,"%7D").replace(/</g,"%3C").replace(/>/g,"%3E")}`,r=document.createElement("a");r.setAttribute("href",o),r.setAttribute("download",`${e.title?c(e.title):e.id}.svg`),r.click()};return x(()=>{b(d,()=>p(),{flush:"post"})}),()=>[t("div",{class:"mermaid-actions"},[t("button",{class:"preview-button",onClick:()=>{m()},title:"preview",innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1316 1024" fill="currentColor"><path d="M658.286 0C415.89 0 0 297.106 0 512c0 214.82 415.89 512 658.286 512 242.322 0 658.285-294.839 658.285-512S900.608 0 658.286 0zm0 877.714c-161.573 0-512-221.769-512-365.714 0-144.018 350.427-365.714 512-365.714 161.572 0 512 217.16 512 365.714s-350.428 365.714-512 365.714z"/><path d="M658.286 292.571a219.429 219.429 0 1 0 0 438.858 219.429 219.429 0 0 0 0-438.858zm0 292.572a73.143 73.143 0 1 1 0-146.286 73.143 73.143 0 0 1 0 146.286z"/></svg>'}),t("button",{class:"download-button",onClick:()=>{u()},title:"download",innerHTML:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M828.976 894.125H190.189c-70.55 0-127.754-57.185-127.754-127.753V606.674c0-17.634 14.31-31.933 31.933-31.933h63.889c17.634 0 31.932 14.299 31.932 31.933v95.822c0 35.282 28.596 63.877 63.877 63.877h511.033c35.281 0 63.877-28.595 63.877-63.877v-95.822c0-17.634 14.298-31.933 31.943-31.933h63.878c17.635 0 31.933 14.299 31.933 31.933v159.7c0 70.566-57.191 127.751-127.754 127.751zM249.939 267.51c12.921-12.92 33.885-12.92 46.807 0l148.97 148.972V94.893c0-17.634 14.302-31.947 31.934-31.947h63.876c17.638 0 31.946 14.313 31.946 31.947v321.589l148.97-148.972c12.922-12.92 33.876-12.92 46.797 0l46.814 46.818c12.922 12.922 12.922 33.874 0 46.807L552.261 624.93c-1.14 1.138-21.664 13.684-42.315 13.693-20.877.01-41.88-12.542-43.021-13.693L203.122 361.135c-12.923-12.934-12.923-33.885 0-46.807l46.817-46.818z"/></svg>'})]),t("div",{ref:f,class:"mermaid-wrapper"},l.value?t("div",{class:"mermaid-content",innerHTML:l.value}):t(v,{class:"mermaid-loading",height:96}))]}});export{k as default};
//# sourceMappingURL=Mermaid.js.map