docs: replace codesandbox embed with repl (#122)

* docs: Animations

* docs: add confetti gun

* docs: update basic example on home page

* docs(deps): Add stackblitz sdk to deps

* chore: update yarn.lock

* docs: use vue repl

* docs: remove stackblitz sdk

* docs: basic repl example

* docs: use repl for examples/index.md (basic example)

* docs: pass ext to repl

* docs: add copy plugin

* docs: use import map instead of dynamic imports

* docs: use repl for custom node example

* docs: hide repl errors

* docs: use repl for custom connectionline example

* docs: use repl for edges example

* docs: exclude repl from ssr

* docs: use repl for nested example

* docs: use repl for stress example

* docs: rename customNode to custom-node

* docs: use repl for update-edge example

* docs: use repl for update-node example

* docs: use repl for validation example

* docs: use repl for save-restore example

* docs: scale down minimap in repl examples

* docs: use repl for dnd example

* docs: use repl for empty example

* docs: use repl for hidden example

* docs: use repl for interaction example

* docs: use repl for multi example

* docs: add pinia example with stackblitz

* docs: update basic example

* docs: update examples

* docs: remove transition from intro

* docs: update features

* update: README.md

* docs: scope css

docs/components/examples/validation/App.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { VueFlow, addEdge } from '@braks/vue-flow'
+import { ref } from 'vue'
+import CustomInput from './CustomInput.vue'
+import CustomNode from './CustomNode.vue'
+
+const elements = ref([
+  { id: '0', type: 'custominput', position: { x: 0, y: 150 }, isValidTargetPos: (connection) => connection.target === 'B' },
+  {
+    id: 'A',
+    type: 'custom',
+    position: { x: 250, y: 0 },
+    isValidSourcePos: () => false,
+  },
+  { id: 'B', type: 'custom', position: { x: 250, y: 150 }, isValidSourcePos: (connection) => connection.target === 'B' },
+  { id: 'C', type: 'custom', position: { x: 250, y: 300 }, isValidSourcePos: (connection) => connection.target === 'B' },
+])
+
+const onLoad = (flowInstance) => flowInstance.fitView()
+const onConnectStart = ({ nodeId, handleType }) => console.log('on connect start', { nodeId, handleType })
+const onConnectStop = (event) => console.log('on connect stop', event)
+const onConnectEnd = (event) => console.log('on connect end', event)
+
+const onConnect = (params) => {
+  console.log('on connect', params)
+  addEdge(params, elements.value)
+}
+</script>
+
+<template>
+  <VueFlow
+    class="validationflow"
+    v-model="elements"
+    @connect="onConnect"
+    @pane-ready="onLoad"
+    @connect-start="onConnectStart"
+    @connect-stop="onConnectStop"
+    @connect-end="onConnectEnd"
+  >
+    <template #node-custominput="props">
+      <CustomInput v-bind="props" />
+    </template>
+    <template #node-custom="props">
+      <CustomNode v-bind="props" />
+    </template>
+  </VueFlow>
+</template>

docs/components/examples/validation/CustomInput.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { Handle, Position } from '@braks/vue-flow'
+
+const props = defineProps({
+  isValidTargetPos: {
+    type: Function,
+    required: false,
+  },
+})
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <div>Only connectable with B</div>
+  <Handle type="source" :position="Position.Right" :is-valid-connection="props.isValidTargetPos" />
+</template>

docs/components/examples/validation/CustomNode.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { Handle, Position } from '@braks/vue-flow'
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  isValidSourcePos: {
+    type: Function,
+    required: false,
+  },
+})
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <Handle type="target" :position="Position.Left" :is-valid-connection="props.isValidSourcePos" />
+  <div>{{ props.id }}</div>
+</template>

docs/components/examples/validation/index.ts

@@ -0,0 +1,4 @@
+export { default as ValidationApp } from './App.vue?raw'
+export { default as ValidationCustomInput } from './CustomInput.vue?raw'
+export { default as ValidationCustomNode } from './CustomNode.vue?raw'
+export { default as ValidationCSS } from './style.css'

docs/components/examples/validation/style.css

@@ -0,0 +1,31 @@
+.validationflow .vue-flow__node {
+  width: 150px;
+  border-radius: 5px;
+  padding: 10px;
+  color: #555;
+  border: 1px solid #ddd;
+  text-align: center;
+  font-size: 12px;
+}
+
+.validationflow .vue-flow__node-customnode {
+  background: #e6e6e9;
+  border: 1px solid #ddd;
+}
+
+.validationflow .vue-flow__node-custominput .vue-flow__handle {
+  background: #e6e6e9;
+}
+
+.validationflow .vue-flow__node-custominput {
+  background: #fff;
+
+}
+
+.validationflow .vue-flow__handle-connecting {
+  background: #ff6060;
+}
+
+.validationflow .vue-flow__handle-valid {
+  background: #55dd99;
+}