fix(docs): dedupe and add alias for vue

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>

src/components/Edges/Edge.vue

@@ -118,7 +118,6 @@ const edgePos = computed(() =>
 </script>
 <template>
   <g
-    v-if="!props.edge.isHidden && isVisible(edgePos)"
     :class="[
       'vue-flow__edge',
       `vue-flow__edge-${props.edge.type || 'default'}`,
@@ -137,6 +136,7 @@ const edgePos = computed(() =>
     @mouseleave="onEdgeMouseLeave"
   >
     <slot
+      v-if="!props.edge.isHidden && isVisible(edgePos)"
       v-bind="{
         id: props.edge.id,
         source: props.edge.source,

src/composables/useWindow.ts

@@ -1,6 +1,4 @@
-import { ssrWindow } from 'ssr-window'
-
 export default (): Window & typeof globalThis & { chrome?: any } => {
   if (typeof window !== 'undefined') return window
-  else return ssrWindow as any
+  else return {} as any
 }

src/container/Flow/Flow.vue

@@ -128,7 +128,11 @@ const init = (opts: typeof props) => {
 
 onBeforeUnmount(() => store?.$dispose())
 
-watch(props, (val) => init(val))
+watch(
+  () => props,
+  (val) => init(val),
+  { flush: 'pre', deep: true },
+)
 init(props)
 
 const nodeTypes = controlledComputed(
@@ -180,8 +184,8 @@ const edgeTypes = controlledComputed(
           </template>
         </EdgeRenderer>
       </SelectionPane>
+      <slot v-bind="{ ...props, store, hooks }"></slot>
     </ZoomPane>
-    <slot v-bind="{ ...props, store, hooks }"></slot>
   </div>
 </template>
 <style>

src/container/SelectionPane/SelectionPane.vue

@@ -29,24 +29,28 @@ const onContextMenu = (event: MouseEvent) => hooks.paneContextMenu.trigger(event
 
 const onWheel = (event: WheelEvent) => hooks.paneScroll.trigger(event)
 
-const selectionKeyPresed = useKeyPress(props.selectionKeyCode)
+const selectionKeyPresed = ref(false)
 
-useKeyPress(props.deleteKeyCode, (keyPressed) => {
-  if (keyPressed && store.selectedElements) {
-    const selectedNodes = store.selectedElements.filter(isNode)
-    const connectedEdges = getConnectedEdges(selectedNodes, store.edges)
-    const elementsToRemove = [...store.selectedElements, ...connectedEdges].reduce(
-      (res, item) => res.set(item.id, item),
-      new Map<ElementId, FlowElement>(),
-    )
+onMounted(() => {
+  useKeyPress(props.deleteKeyCode, (keyPressed) => {
+    if (keyPressed && store.selectedElements) {
+      const selectedNodes = store.selectedElements.filter(isNode)
+      const connectedEdges = getConnectedEdges(selectedNodes, store.edges)
+      const elementsToRemove = [...store.selectedElements, ...connectedEdges].reduce(
+        (res, item) => res.set(item.id, item),
+        new Map<ElementId, FlowElement>(),
+      )
 
-    hooks.elementsRemove.trigger(Array.from(elementsToRemove.values()))
-    store.unsetNodesSelection()
-    store.resetSelectedElements()
-  }
+      hooks.elementsRemove.trigger(Array.from(elementsToRemove.values()))
+      store.unsetNodesSelection()
+      store.resetSelectedElements()
+    }
+  })
+
+  useKeyPress(props.multiSelectionKeyCode, (keyPressed) => (store.multiSelectionActive = keyPressed))
+
+  useKeyPress(props.selectionKeyCode, (keyPressed) => (selectionKeyPresed.value = keyPressed))
 })
-
-useKeyPress(props.multiSelectionKeyCode, (keyPressed) => (store.multiSelectionActive = keyPressed))
 </script>
 <template>
   <slot></slot>

src/container/ZoomPane/ZoomPane.vue

@@ -37,7 +37,7 @@ const props = withDefaults(defineProps<ZoomPaneProps>(), {
 const store = useStore()
 const hooks = useHooks()
 
-const zoomPaneEl = templateRef<HTMLDivElement>('zoom-pane', null)
+const zoomPaneEl = templateRef<HTMLDivElement>('zoomPane', null)
 
 const viewChanged = (prevTransform: FlowTransform, eventTransform: ZoomTransform): boolean =>
   prevTransform.x !== eventTransform.x || prevTransform.y !== eventTransform.y || prevTransform.zoom !== eventTransform.k
@@ -218,7 +218,7 @@ onMounted(() => {
 })
 </script>
 <template>
-  <div ref="zoom-pane" class="vue-flow__renderer vue-flow__zoompane">
+  <div ref="zoomPane" class="vue-flow__renderer vue-flow__zoompane">
     <slot v-bind="{ transform, dimensions: { width, height } }"></slot>
   </div>
 </template>