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/custom-node/App.vue

@@ -0,0 +1,82 @@
+<script setup>
+import { Background, ConnectionMode, MiniMap, Position, VueFlow } from '@braks/vue-flow'
+import { h, onMounted, ref } from 'vue'
+import ColorSelectorNode from './CustomNode.vue'
+import { presets } from './presets.js'
+
+const elements = ref([])
+
+const bgColor = ref(presets.ayame)
+const bgName = ref('AYAME')
+
+const connectionLineStyle = { stroke: '#fff' }
+
+const snapGrid = [16, 16]
+
+const nodeStroke = (n) => {
+  if (n.type === 'input') return '#0041d0'
+  if (n.type === 'custom') return presets.sumi
+  if (n.type === 'output') return '#ff0072'
+  return '#eee'
+}
+const nodeColor = (n) => {
+  if (n.type === 'custom') return bgColor.value
+  return '#fff'
+}
+
+// output labels
+const outputColorLabel = () => h('div', {}, bgColor.value)
+const outputNameLabel = () => h('div', {}, bgName.value)
+
+const onChange = (color) => {
+  bgColor.value = color.value
+  bgName.value = color.name
+}
+
+onMounted(() => {
+  elements.value = [
+    {
+      id: '1',
+      type: 'custom',
+      data: { color: bgColor },
+      position: { x: 0, y: 50 },
+    },
+    {
+      id: '2',
+      type: 'output',
+      label: outputNameLabel,
+      position: { x: 350, y: 25 },
+      targetPosition: Position.Left,
+    },
+    {
+      id: '3',
+      type: 'output',
+      label: outputColorLabel,
+      position: { x: 350, y: 175 },
+      targetPosition: Position.Left,
+    },
+
+    { id: 'e1a-2', source: '1', sourceHandle: 'a', target: '2', animated: true, style: { stroke: '#fff' } },
+    { id: 'e1b-3', source: '1', sourceHandle: 'b', target: '3', animated: true, style: { stroke: '#fff' } },
+  ]
+})
+</script>
+
+<template>
+  <VueFlow
+    v-model="elements"
+    :style="{ backgroundColor: bgColor }"
+    :connection-mode="ConnectionMode.Loose"
+    :connection-line-style="connectionLineStyle"
+    :snap-to-grid="true"
+    :snap-grid="snapGrid"
+    :default-zoom="1.5"
+    :fit-view-on-init="true"
+  >
+    <template #node-custom="props">
+      <ColorSelectorNode v-bind="props" @change="onChange" />
+    </template>
+    <Background :size="0.7" pattern-color="black" />
+    <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
+  </VueFlow>
+</template>

docs/components/examples/custom-node/CustomNode.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { Handle, Position } from '@braks/vue-flow'
+import { computed } from 'vue'
+import { presets } from './presets.js'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['change'])
+
+const targetHandleStyle = { background: '#555' }
+const sourceHandleStyleA = { ...targetHandleStyle, top: '10px' }
+const sourceHandleStyleB = { ...targetHandleStyle, bottom: '10px', top: 'auto' }
+
+const onConnect = (params) => console.log('handle onConnect', params)
+
+const onSelect = (color) => {
+  emit('change', color)
+}
+
+const colors = computed(() => {
+  return Object.keys(presets).map((color) => {
+    return {
+      name: color,
+      value: presets[color],
+    }
+  })
+})
+
+const selectedColor = computed(() => {
+  return colors.value.find((color) => color.value === props.data.color)
+})
+</script>
+
+<script>
+export default {
+  inheritAttrs: false,
+}
+</script>
+
+<template>
+  <div v-if="selectedColor">
+    Select a color
+  </div>
+  <div
+    style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 90%; margin: auto; gap: 3px"
+  >
+    <template v-for="color of colors" :key="color.name">
+      <button
+        :title="color.name"
+        :style="{ backgroundColor: color.value }"
+        style="padding: 3px; width: 25px; height: 25px"
+        type="button"
+        @click="onSelect(color)"
+      ></button>
+    </template>
+  </div>
+  <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
+  <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
+</template>

docs/components/examples/custom-node/index.ts

@@ -0,0 +1,4 @@
+export { default as CustomNodeApp } from './App.vue?raw'
+export { default as CustomNode } from './CustomNode.vue?raw'
+export { default as CustomNodeCSS } from './style.css'
+export { default as ColorPresets } from './presets.js?raw'

docs/components/examples/custom-node/presets.js

@@ -0,0 +1,23 @@
+export const presets = {
+  byakuroku: '#A8D8B9',
+  mizu: '#81C7D4',
+  asagi: '#33A6B8',
+  ukon: '#EFBB24',
+  mushikuri: '#D9CD90',
+  hiwa: '#BEC23F',
+  ichigo: '#B5495B',
+  kurenai: '#CB1B45',
+  syojyohi: '#E83015',
+  konjyo: '#113285',
+  fuji: '#8B81C3',
+  ayame: '#6F3381',
+  gofun: '#FFFFFB',
+  torinoko: '#DAC9A6',
+  kurotsurubami: '#0B1013',
+  sumi: '#1C1C1C',
+  ohni: '#F05E1C',
+  kokikuchinashi: '#FB9966',
+  beniukon: '#E98B2A',
+  sakura: '#FEDFE1',
+  toki: '#EEA9A9',
+}

docs/components/examples/custom-node/style.css

@@ -0,0 +1,12 @@
+.vue-flow__node-custom {
+  border: 1px solid #777;
+  padding: 10px;
+  border-radius: 10px;
+  background: whitesmoke;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  max-width: 250px;
+}