feat: options (#90)

Author: dword-design

README.md

@@ -180,6 +180,16 @@ export default {
 </script>
 ```
 
+## Mermaid options
+
+It is possible to customize the diagram by passing options to the component. The options are internally passed to `mermaid.initialize`. See the [default config](https://github.com/mermaid-js/mermaid/blob/5b269348024c031e6d76c5582242ea89a86ebf47/src/defaultConfig.js) for a list of available options.
+
+```html
+<template>
+  <vue-mermaid-string :value="diagram" :options="{ maxTextSize: 10000 }" />
+</template>
+```
+
 ## Click events
 
 You can register click events by declaring them in the diagram string. See [the Mermaid docs](https://mermaid-js.github.io/mermaid/#/flowchart?id=interaction) for details. When registering a callback, you do not need to specify the callback name, the component will magically inject it into the diagram by itself. Implement the `node-click` event handler to react to click events:

src/__image_snapshots__/index-spec-js-index-options-1-snap.png

@@ -148,6 +148,34 @@ export default tester(
       }
       </script>
 
+    `,
+      async test() {
+        await this.page.goto('http://localhost:3000')
+        await this.page.waitForSelector('.foo')
+        expect(
+          await this.page.screenshot({ fullPage: true })
+        ).toMatchImageSnapshot(this)
+      },
+    },
+    options: {
+      page: endent`
+      <template>
+        <self class="foo" :value="diagram" :options="{ maxTextSize: 3 }" />
+      </template>
+
+      <script>
+      import { endent } from '@dword-design/functions'
+
+      export default {
+        computed: {
+          diagram: () => endent\`
+            graph TD
+              A --> B
+          \`,
+        },
+      }
+      </script>
+
     `,
       async test() {
         await this.page.goto('http://localhost:3000')

src/index.spec.js

@@ -40,13 +40,15 @@ export default {
         securityLevel: 'loose',
         startOnLoad: false,
         theme: 'default',
+        ...this.options,
       })
     }
 
     return this.update()
   },
   name: 'VueMermaidString',
   props: {
+    options: { default: () => ({}), type: Object },
     value: { required: true, type: String },
   },
   watch: {