docs: move examples dir out of components dir

docs/examples/custom-node/App.vue

@@ -0,0 +1,129 @@
+<script setup>
+import { MiniMap } from '@vue-flow/minimap'
+import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
+import { h, onMounted, ref } from 'vue'
+import ColorSelectorNode from './CustomNode.vue'
+import { presets } from './presets.js'
+
+const { findNode } = useVueFlow()
+
+const elements = ref([])
+
+const gradient = ref(false)
+
+const bgColor = ref(presets.ayame)
+
+const bgName = ref('AYAME')
+
+const connectionLineStyle = { stroke: '#fff' }
+
+// minimap stroke color functions
+function nodeStroke(n) {
+  if (n.type === 'input') {
+    return '#0041d0'
+  }
+  if (n.type === 'custom') {
+    return presets.sumi
+  }
+  if (n.type === 'output') {
+    return '#ff0072'
+  }
+  return '#eee'
+}
+
+function nodeColor(n) {
+  if (n.type === 'custom') {
+    return bgColor.value
+  }
+  return '#fff'
+}
+
+// output labels
+function outputColorLabel() {
+  return h('div', {}, bgColor.value)
+}
+function outputNameLabel() {
+  return h('div', {}, bgName.value)
+}
+
+function onChange(color) {
+  gradient.value = false
+  bgColor.value = color.value
+  bgName.value = color.name
+
+  findNode('3').hidden = false
+}
+
+function onGradient() {
+  gradient.value = true
+  bgColor.value = null
+  bgName.value = 'gradient'
+
+  findNode('3').hidden = true
+}
+
+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: 200 },
+      targetPosition: Position.Left,
+    },
+    {
+      id: 'e1a-2',
+      source: '1',
+      sourceHandle: 'a',
+      target: '2',
+      animated: true,
+      style: () => ({
+        stroke: bgColor.value,
+        filter: 'invert(100%)',
+      }),
+    },
+    {
+      id: 'e1b-3',
+      source: '1',
+      sourceHandle: 'b',
+      target: '3',
+      animated: true,
+      style: () => ({
+        stroke: bgColor.value,
+        filter: 'invert(100%)',
+      }),
+    },
+  ]
+})
+</script>
+
+<template>
+  <VueFlow
+    v-model="elements"
+    class="customnodeflow"
+    :class="[gradient ? 'animated-bg-gradient' : '']"
+    :style="{ backgroundColor: bgColor }"
+    :connection-line-style="connectionLineStyle"
+    :default-viewport="{ zoom: 1.5 }"
+    fit-view-on-init
+  >
+    <template #node-custom="{ data }">
+      <ColorSelectorNode :data="data" @change="onChange" @gradient="onGradient" />
+    </template>
+
+    <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
+  </VueFlow>
+</template>

docs/examples/custom-node/CustomNode.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { Handle, Position } from '@vue-flow/core'
+import { computed } from 'vue'
+import { colors } from './presets.js'
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['change', 'gradient'])
+
+function onSelect(color) {
+  emit('change', color)
+}
+
+function onGradient() {
+  emit('gradient')
+}
+
+const sourceHandleStyleA = computed(() => ({ backgroundColor: props.data.color, filter: 'invert(100%)', top: '10px' }))
+
+const sourceHandleStyleB = computed(() => ({
+  backgroundColor: props.data.color,
+  filter: 'invert(100%)',
+  bottom: '10px',
+  top: 'auto',
+}))
+</script>
+
+<template>
+  <div>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 }" type="button" @click="onSelect(color)" />
+    </template>
+
+    <button class="animated-bg-gradient" title="gradient" type="button" @click="onGradient" />
+  </div>
+
+  <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
+
+  <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
+</template>

docs/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?inline'
+export { default as ColorPresets } from './presets.js?raw'

docs/examples/custom-node/presets.js

@@ -0,0 +1,30 @@
+export const presets = {
+  sumi: '#1C1C1C',
+  gofun: '#FFFFFB',
+  byakuroku: '#A8D8B9',
+  mizu: '#81C7D4',
+  asagi: '#33A6B8',
+  ukon: '#EFBB24',
+  mushikuri: '#D9CD90',
+  hiwa: '#BEC23F',
+  ichigo: '#B5495B',
+  kurenai: '#CB1B45',
+  syojyohi: '#E83015',
+  konjyo: '#113285',
+  fuji: '#8B81C3',
+  ayame: '#6F3381',
+  torinoko: '#DAC9A6',
+  kurotsurubami: '#0B1013',
+  ohni: '#F05E1C',
+  kokikuchinashi: '#FB9966',
+  beniukon: '#E98B2A',
+  sakura: '#FEDFE1',
+  toki: '#EEA9A9',
+}
+
+export const colors = Object.keys(presets).map((color) => {
+  return {
+    name: color,
+    value: presets[color],
+  }
+})

docs/examples/custom-node/style.css

@@ -0,0 +1,73 @@
+.customnodeflow .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;
+}
+
+.customnodeflow button {
+  padding: 5px;
+  width: 25px;
+  height: 25px;
+  border-radius: 25px;
+  -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+}
+
+.customnodeflow button:hover {
+  opacity: 0.9;
+  transform: scale(105%);
+  transition: 250ms all ease;
+}
+
+.animated-bg-gradient {
+  background: linear-gradient(122deg, #6f3381, #81c7d4, #fedfe1, #fffffb);
+  background-size: 800% 800%;
+
+  -webkit-animation: gradient 4s ease infinite;
+  -moz-animation: gradient 4s ease infinite;
+  animation: gradient 4s ease infinite;
+}
+
+@-webkit-keyframes gradient {
+  0% {
+    background-position: 0% 22%
+  }
+  50% {
+    background-position: 100% 79%
+  }
+  100% {
+    background-position: 0% 22%
+  }
+}
+
+@-moz-keyframes gradient {
+  0% {
+    background-position: 0% 22%
+  }
+  50% {
+    background-position: 100% 79%
+  }
+  100% {
+    background-position: 0% 22%
+  }
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 22%
+  }
+  50% {
+    background-position: 100% 79%
+  }
+  100% {
+    background-position: 0% 22%
+  }
+}