update docs

doc/components/Header.vue

@@ -5,6 +5,7 @@
         <NuxtLink to="/" class="logo">Vue-diagrams</NuxtLink>
         <NuxtLink to="/guides">Guides</NuxtLink>
         <a href="stories">StoryBook</a>
+        <a href="playground">REPL playground</a>
         <span style="flex-grow: 1" />
         <a href="https://github.com/gwenaelp/vue-diagrams" style="display: flex; gap: 14px; align-items: center;">
           <img src="https://img.shields.io/github/forks/gwenaelp/vue-diagrams" alt="forks" />
@@ -25,7 +26,7 @@
   left: 0;
   right: 0;
   background: white;
-  box-shadow: 0px 0px 29px -8px rgb(0 0 0 / 75%);
+  box-shadow: 0px 0px 15px -8px rgb(0 0 0 / 75%);
   z-index: 10;
 }
 .container {

doc/components/Repl.vue

@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+//https://github.com/bcakmakoglu/vue-flow/blob/master/docs/components/DocsRepl.vue
+import type { SFCOptions } from '@vue/repl';
+import { ReplStore, Repl as VueRepl } from '@vue/repl';
+import '@vue/repl/style.css';
+import { exampleImports } from '../examples';
+import CodeMirror from '@vue/repl/codemirror-editor';
+import Diagram from '../../src/index';
+
+const props = defineProps<{
+  example: keyof typeof exampleImports;
+  mainFile?: string;
+  dependencies?: Record<string, string> }
+>()
+
+let css = '';
+
+const store = new ReplStore({
+  showOutput: true,
+  outputMode: 'preview',
+})
+
+
+const files: Record<string, (typeof imports)[keyof typeof imports]> = {}
+const imports = exampleImports[props.example]
+const additionalImports: Object = ('additionalImports' in imports ? imports.additionalImports : {}) as Object;
+
+for (const example of Object.keys(imports).filter((i) => i !== 'additionalImports')) {
+  if (example.includes('css')) {
+    css += `${imports[example as keyof typeof imports]}`
+  } else {
+    files[example] = imports[example as keyof typeof imports]
+  }
+}
+
+await store.setVueVersion('3.2.37')
+await store.setFiles(
+  {
+    ...files,
+    'main.css': css,
+  },
+  props.mainFile ?? 'App.vue',
+)
+
+// pre-set import map
+const diagram =
+store.setImportMap({
+  imports: {
+    'vue-diagrams': 'https://unpkg.com/vue-diagrams@latest',
+    ...additionalImports,
+  },
+} as any);
+
+</script>
+
+<template>
+  <VueRepl
+    :clear-console="true"
+    :editor="CodeMirror"
+    :auto-resize="true"
+    :store="store"
+    :show-compile-output="false"
+    :show-import-map="false"
+    @keydown.ctrl.s.prevent
+    @keydown.meta.s.prevent
+  />
+</template>
+
+<style>
+.file-selector {
+}
+
+.vue-repl {
+  --vh: 100vh;
+  margin-top: 52px;
+  height: calc(var(--vh) - 72px);
+}
+</style>

doc/examples/index.ts

@@ -0,0 +1,7 @@
+import { PlaygroundApp } from './playground'
+
+export const exampleImports = {
+  playground: {
+    'App.vue': PlaygroundApp,
+  },
+};

doc/examples/playground/App.vue

@@ -0,0 +1,35 @@
+<template>
+  <diagram :model="model" height="700" />
+</template>
+
+<script lang="ts">
+import { Diagram } from "vue-diagrams";
+export default {
+  components: {
+    Diagram,
+  },
+  data() {
+    const diagramModel = new Diagram.Model();
+
+    const node1 = diagramModel.addNode("test2", 300, 200);
+    const inPort = node1.addInPort("test");
+
+    const node2 = diagramModel.addNode("test", 10, 300, 144, 80);
+    const node2OutPort = node2.addOutPort("testOut");
+    node2.addOutPort("testOut2");
+    node2.color = "#00cc66";
+
+    const node3 = diagramModel.addNode("test3", 10, 100, 72, 100);
+    const node3OutPort = node3.addOutPort("testOut3");
+    node3.color = "#cc6600";
+    node3.deletable = false;
+
+    diagramModel.addLink(node2OutPort, inPort);
+    diagramModel.addLink(node3OutPort, inPort);
+
+    return {
+      model: diagramModel
+    };
+  },
+};
+</script>

doc/examples/playground/index.ts

@@ -0,0 +1 @@
+export { default as PlaygroundApp } from './App.vue?raw'

doc/package.json

@@ -1,5 +1,6 @@
 {
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -8,7 +9,7 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "nuxt": "^3.3.1"
+    "nuxt": "^3.8.2"
   },
   "dependencies": {
     "@codemirror/lang-javascript": "^6.1.4",

doc/pages/index.vue

@@ -22,8 +22,8 @@
     <section>
       <div class="container">
         <h2>Examples</h2>
-        <img :src="example2" style="max-width: 100%;"/>
-        <img :src="example3" style="max-width: 100%;"/>
+        <img :src="example2" style="max-width: 100%;" />
+        <img :src="example3" style="max-width: 100%;" />
       </div>
     </section>
     <section>

doc/pages/playground.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    Playground page
+    <client-only placeholder="Loading...">
+      <Repl example="playground" />
+    </client-only>
+  </div>
+</template>
+<script lang="ts">
+import Repl from '../components/Repl.vue';
+
+export default {
+  components: {
+    Repl,
+  },
+};
+</script>

doc/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "exclude": [
+    "node_modules",
+    "dist"
+  ],
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "es2017",
+    "lib": [
+      "DOM",
+      "ESNext"
+    ],
+    "preserveSymlinks": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "incremental": false,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "noUnusedLocals": false,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "types": [
+      "vite/client",
+      "@types/node"
+    ]
+  }
+}