docs: move examples dir out of components dir

docs/examples/interaction/App.vue

@@ -0,0 +1,20 @@
+<script setup>
+import { VueFlow } from '@vue-flow/core'
+import { ref } from 'vue'
+import InteractionControls from './InteractionControls.vue'
+
+const elements = ref([
+  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
+  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
+  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
+  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3' },
+])
+</script>
+
+<template>
+  <VueFlow v-model="elements" class="interactionflow" fit-view-on-init>
+    <InteractionControls />
+  </VueFlow>
+</template>

docs/examples/interaction/InteractionControls.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { useVueFlow } from '@vue-flow/core'
+import { ref } from 'vue'
+
+const {
+  nodesDraggable,
+  nodesConnectable,
+  elementsSelectable,
+  zoomOnScroll,
+  zoomOnDoubleClick,
+  zoomOnPinch,
+  panOnScroll,
+  panOnScrollMode,
+  panOnDrag,
+  onConnect,
+  onNodeDragStop,
+  onPaneClick,
+  onPaneScroll,
+  onPaneContextMenu,
+  onNodeDragStart,
+  onMoveEnd,
+  addEdges,
+} = useVueFlow()
+
+const captureZoomClick = ref(false)
+
+const captureZoomScroll = ref(false)
+
+onConnect((params) => addEdges(params))
+
+onNodeDragStart((e) => console.log('drag start', e))
+
+onNodeDragStop((e) => console.log('drag stop', e))
+
+onPaneClick((event) => captureZoomClick.value && console.log('pane click', event))
+
+onPaneScroll((event) => captureZoomScroll.value && console.log('pane scroll', event))
+
+onPaneContextMenu((event) => captureZoomClick.value && console.log('pane ctx menu', event))
+
+onMoveEnd((flowTransform) => console.log('move end', flowTransform))
+</script>
+
+<template>
+  <div class="controls">
+    <div>
+      <label class="label" for="draggable">
+        nodesDraggable
+        <input id="draggable" v-model="nodesDraggable" type="checkbox" class="vue-flow__draggable" />
+      </label>
+    </div>
+    <div>
+      <label class="label" for="connectable">
+        nodesConnectable
+        <input id="connectable" v-model="nodesConnectable" type="checkbox" class="vue-flow__connectable" />
+      </label>
+    </div>
+    <div>
+      <label class="label" for="selectable">
+        elementsSelectable
+        <input id="selectable" v-model="elementsSelectable" type="checkbox" class="vue-flow__selectable" />
+      </label>
+    </div>
+    <div>
+      <label class="label" for="zoomonscroll">
+        zoomOnScroll
+        <input id="zoomonscroll" v-model="zoomOnScroll" type="checkbox" class="vue-flow__zoomonscroll" />
+      </label>
+    </div>
+    <div>
+      <label class="label" for="zoomonpinch">
+        zoomOnPinch
+        <input id="zoomonpinch" v-model="zoomOnPinch" type="checkbox" class="vue-flow__zoomonpinch" />
+      </label>
+    </div>
+    <div>
+      <label class="label" for="panonscroll">
+        panOnScroll
+        <input id="panonscroll" v-model="panOnScroll" type="checkbox" class="vue-flow__panonscroll" />
+      </label>
+    </div>
+    <div>
+      <label class="label">
+        panOnScrollMode
+        <select id="panonscrollmode" v-model="panOnScrollMode" class="vue-flow__panonscrollmode">
+          <option value="free">free</option>
+          <option value="horizontal">horizontal</option>
+          <option value="vertical">vertical</option>
+        </select>
+      </label>
+    </div>
+    <div>
+      <label class="label" for="zoomondbl">
+        zoomOnDoubleClick
+        <input id="zoomondbl" v-model="zoomOnDoubleClick" type="checkbox" class="vue-flow__zoomondbl" />
+      </label>
+    </div>
+    <div>
+      <label class="label" for="panemoveable">
+        paneMovable
+        <input id="panemoveable" v-model="panOnDrag" type="checkbox" class="vue-flow__panemoveable" />
+      </label>
+    </div>
+    <div>
+      <label class="label" for="capturezoompaneclick">
+        capture onPaneClick
+        <input id="capturezoompaneclick" v-model="captureZoomClick" type="checkbox" class="vue-flow__capturezoompaneclick" />
+      </label>
+    </div>
+    <div>
+      <label class="label" for="capturezoompanescroll">
+        capture onPaneScroll
+        <input id="capturezoompanescroll" v-model="captureZoomScroll" type="checkbox" class="vue-flow__capturezoompanescroll" />
+      </label>
+    </div>
+  </div>
+</template>

docs/examples/interaction/index.ts

@@ -0,0 +1,3 @@
+export { default as InteractionApp } from './App.vue?raw'
+export { default as InteractionControls } from './InteractionControls.vue?raw'
+export { default as InteractionCSS } from './style.css?inline'

docs/examples/interaction/style.css

@@ -0,0 +1,22 @@
+.interactionflow .controls {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 4;
+  font-size: 11px;
+  background-color: lightgray;
+  border-bottom-right-radius: 10px;
+  padding: 8px;
+}
+
+.interactionflow .controls .label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+}
+
+.interactionflow .controls .label input {
+  cursor: pointer;
+}