@barzhsieh/nuxt-content-mermaid 2.1.0-alpha.1 → 2.1.2

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.20.1 || ^4.1.0"
   },
-  "version": "2.1.0-alpha.1",
+  "version": "2.1.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/Mermaid.vue

@@ -298,6 +298,7 @@ watch(decodedCode, (newCode) => {
     <div
       v-else
       class="mermaid-wrapper"
+      :class="{ 'ncm-is-loading': isLoading && !hasRenderedOnce }"
     >
       <div ref="mermaidContainer">
         <!-- Initially show the slot's <pre><code> for SSR; client-side rendering will replace it with the mermaid SVG -->
@@ -337,5 +338,5 @@ watch(decodedCode, (newCode) => {
 </template>
 
 <style scoped>
-.mermaid-wrapper{position:relative;text-align:center}.mermaid-wrapper :deep(code),.mermaid-wrapper :deep(pre){margin:0;max-height:160px;opacity:0;overflow:hidden;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.mermaid-wrapper :deep(svg){display:inline-block;vertical-align:middle}.mermaid-error-default{text-align:center}.mermaid:not([data-processed]){color:transparent;min-height:10px}.mermaid-wrapper :deep(.edgeLabel),.mermaid-wrapper :deep(.label),.mermaid-wrapper :deep(.nodeLabel){overflow:visible!important;white-space:normal!important}.mermaid-wrapper :deep(foreignObject){overflow:visible!important}
+.mermaid-wrapper{--ncm-loading-min-height:160px;position:relative;text-align:center}.mermaid-wrapper.ncm-is-loading{min-height:var(--ncm-loading-min-height,160px)}.mermaid-wrapper :deep(code),.mermaid-wrapper :deep(pre){height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;clip-path:inset(50%);white-space:nowrap}.mermaid-wrapper :deep(svg){display:inline-block;vertical-align:middle}.mermaid-error-default{text-align:center}.mermaid:not([data-processed]){color:transparent;min-height:10px}.mermaid-wrapper :deep(.edgeLabel),.mermaid-wrapper :deep(.label),.mermaid-wrapper :deep(.nodeLabel){overflow:visible!important;white-space:normal!important}.mermaid-wrapper :deep(foreignObject){overflow:visible!important}
 </style>

package/dist/runtime/components/Spinner.vue

@@ -1,15 +1,19 @@
 <template>
   <svg
-    class="spinner"
+    class="ncm-spinner"
     viewBox="0 0 50 50"
   >
     <circle
-      class="path"
+      class="ncm-spinner__path"
       cx="25"
       cy="25"
       r="20"
       fill="none"
       stroke-width="5"
+      stroke="rgb(197, 197, 197)"
+      stroke-linecap="round"
+      stroke-dasharray="1 150"
+      stroke-dashoffset="0"
     />
   </svg>
 </template>
@@ -20,6 +24,6 @@ export default {
 };
 </script>
 
-<style>
-.spinner{--radius:20px;animation:rotate 2s linear infinite;height:calc(var(--radius)*2);left:50%;margin:calc(var(--radius)*-1) 0 0 calc(var(--radius)*-1);position:absolute;top:50%;width:calc(var(--radius)*2);z-index:2}.spinner .path{animation:dash 1.5s ease-in-out infinite;stroke:#c5c5c5;stroke-linecap:round}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
+<style scoped>
+.ncm-spinner{--radius:20px;animation:rotate 2s linear infinite;height:calc(var(--radius)*2);left:50%;margin:calc(var(--radius)*-1) 0 0 calc(var(--radius)*-1);position:absolute;top:50%;transform-origin:50% 50%;width:calc(var(--radius)*2);z-index:2}.ncm-spinner__path{animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}
 </style>

package/dist/runtime/composables/useMermaidTheme.d.ts

@@ -1,17 +1,17 @@
 import type { MermaidConfig } from 'mermaid';
 /**
- * 簡寫模式主題，用於快速切換配置的 light/dark 主題
- * - 'light': 對應 contentMermaid.theme.light 設定
- * - 'dark': 對應 contentMermaid.theme.dark 設定
- * @see https://mermaid.js.org/ecosystem/integrations.html
+ * Switch between configured dark/light themes
+ * - 'light': corresponds to contentMermaid.theme.light setting
+ * - 'dark': corresponds to contentMermaid.theme.dark setting
  */
 export type SimpleMermaidTheme = 'light' | 'dark';
 /**
- * Mermaid 主題類型
- * 可以是：
- * - 簡寫模式: 'light', 'dark' (對應配置的 light/dark 主題)
- * - 官方主題: 'default', 'forest', 'dark', 'neutral', 'base' 等
- * - null: 重置為自動模式
+ * Mermaid theme type
+ * Can be:
+ * - Simple mode: 'light', 'dark' (corresponds to configured light/dark theme)
+ * - Official themes: 'default', 'forest', 'dark', 'neutral', 'base', etc.
+ *   @see https://mermaid.js.org/config/schema-docs/config.html?#theme
+ * - null: Reset to auto mode
  */
 export type MermaidThemeMode = MermaidConfig['theme'] | SimpleMermaidTheme | null;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barzhsieh/nuxt-content-mermaid",
-  "version": "2.1.0-alpha.1",
+  "version": "2.1.2",
   "description": "A Nuxt module designed for integrating Mermaid with `@nuxt/content`. It automatically converts `mermaid` code blocks in Markdown into responsive chart components, and supports lazy loading and dark/light theme switching.",
   "keywords": [
     "nuxt",