Fix mermaid component to support content binding.

nicegui/dependencies.py

@@ -81,8 +81,8 @@ def generate_resources(prefix: str, elements) -> Tuple[str, str, str, str, str]:
                 vue_scripts += f'{vue_components[name].script.replace("Vue.component", "app.component", 1)}\n'
                 vue_styles += f'{vue_components[name].style}\n'
             if name in js_components:
-                js_imports += f'import {{ default as {name} }} from "{prefix}/_nicegui/{__version__}/components/{name}";\n'
-                js_imports += f'app.component("{name}", {name});\n'
+                js_imports += f'import {{ default as vue_{name} }} from "{prefix}/_nicegui/{__version__}/components/{name}";\n'
+                js_imports += f'app.component("{name}", vue_{name});\n'
 
     vue_styles = f'<style>{vue_styles}</style>'
     import_maps = f'<script type="importmap">{json.dumps(import_maps)}</script>'

nicegui/element.py

@@ -34,7 +34,7 @@ class Element(Visibility):
         """
         super().__init__()
         self.client = _client or globals.get_client()
-        self.id = self.client.next_element_id
+        self.id = f'v{self.client.next_element_id}'
         self.client.next_element_id += 1
         self.tag = tag
         self._classes: List[str] = []

nicegui/elements/mermaid.js

@@ -1,13 +1,14 @@
 import mermaid from 'mermaid';
 export default {
-  template: `<div class="mermaid">{{ content }}</div>`,
+  template: `<div></div>`,
   mounted() {
-    mermaid.initialize({ startOnLoad: false, theme: 'default' });
-    this.update()
+    this.update(this.content)
   },
   methods: {
     async update(content) {
-      await mermaid.run({querySelector: '.mermaid'})
+      this.$el.innerHTML = content
+      this.$el.removeAttribute('data-processed');
+      await mermaid.run({nodes: [this.$el]});
     },
   },
   props: {

nicegui/templates/index.html

@@ -13,7 +13,8 @@
     <script src="{{ prefix | safe }}/_nicegui/{{version}}/static/socket.io.min.js"></script>
     {% if tailwind %}
     <script src="{{ prefix | safe }}/_nicegui/{{version}}/static/tailwindcss.min.js"></script>
-    {% endif %} {{ head_html | safe }}
+    {% endif %}
+    {{ head_html | safe }}
     <script src="{{ prefix | safe }}/_nicegui/{{version}}/static/vue.global.prod.js"></script>
     <script src="{{ prefix | safe }}/_nicegui/{{version}}/static/quasar.umd.prod.js"></script>
     {{ import_maps | safe }}
@@ -119,7 +120,7 @@
           };
         },
         render() {
-          return renderRecursively(this.elements, 0);
+          return renderRecursively(this.elements, 'v0');
         },
         mounted() {
           window.app = this;