update: change name to vue flow

* Add gif to readme

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

examples/Basic/Basic.vue

@@ -54,7 +54,7 @@ const toggleClassnames = () => {
 </script>
 <template>
   <Flow
-    class="revue-flow-basic-example"
+    class="vue-flow-basic-example"
     :elements="elements"
     :default-zoom="1.5"
     :min-zoom="0.2"

examples/CustomNode/ColorSelectorNode.vue

@@ -25,7 +25,7 @@ const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: '10px'
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params)
 </script>
 <template>
-  <div class="revue-flow__node-color-selector">
+  <div class="vue-flow__node-color-selector">
     <Handle type="target" :position="Position.Left" :style="targetHandleStyle" :on-connect="onConnect" />
     <div>
       Custom Color Picker Node: <strong>{{ data.color }}</strong>

examples/DragNDrop/Sidebar.vue

@@ -9,13 +9,13 @@ const onDragStart = (event: DragEvent, nodeType: string) => {
 <template>
   <aside>
     <div class="description">You can drag these nodes to the pane on the left.</div>
-    <div class="revue-flow__node-input" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'input')">
+    <div class="vue-flow__node-input" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'input')">
       Input Node
     </div>
-    <div class="revue-flow__node-default" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'default')">
+    <div class="vue-flow__node-default" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'default')">
       Default Node
     </div>
-    <div class="revue-flow__node-output" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'output')">
+    <div class="vue-flow__node-output" :draggable="true" @dragstart="(event: DragEvent) => onDragStart(event, 'output')">
       Output Node
     </div>
   </aside>

examples/EdgeWithButton/ButtonEdge.vue

@@ -59,7 +59,7 @@ const center = computed(() =>
 )
 </script>
 <template>
-  <path :id="props.id" :style="props.style" class="revue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <path :id="props.id" :style="props.style" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <foreignObject
     :width="foreignObjectSize"
     :height="foreignObjectSize"

examples/Edges/CustomEdge.vue

@@ -32,7 +32,7 @@ const edgePath = computed(() =>
 const markerEnd = computed(() => getMarkerEnd(props.arrowHeadType, props.markerEndId))
 </script>
 <template>
-  <path :id="props.id" class="revue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <text>
     <textPath :href="`#${props.id}`" :style="{ fontSize: '12px' }" startOffset="50%" text-anchor="middle">
       {{ props.data.text }}

examples/Edges/CustomEdge2.vue

@@ -42,7 +42,7 @@ const center = computed(() =>
 )
 </script>
 <template>
-  <path :id="props.id" class="revue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
+  <path :id="props.id" class="vue-flow__edge-path" :d="edgePath" :marker-end="markerEnd" />
   <EdgeText
     :x="center[0]"
     :y="center[1]"

examples/Header.vue

@@ -10,7 +10,7 @@ const onChange = (event: any) => {
 </script>
 <template>
   <header>
-    <a class="logo" href="https://github.com/bcakmakoglu/revue-flow"> Revue Flow Dev </a>
+    <a class="logo" href="https://github.com/bcakmakoglu/vue-flow"> Vue Flow Dev </a>
     <select v-model="route.path" @change="onChange">
       <template v-for="r of routes" :key="r.path">
         <option v-if="r.path !== '/'" :value="r.path">

examples/Hidden/HiddenExample.vue

@@ -31,7 +31,7 @@ watchEffect(() => {
       <div>
         <label for="ishidden">
           isHidden
-          <input id="ishidden" v-model="isHidden" type="checkbox" class="revue-flow__ishidden" />
+          <input id="ishidden" v-model="isHidden" type="checkbox" class="vue-flow__ishidden" />
         </label>
       </div>
     </div>

examples/Interaction/InteractionExample.vue

@@ -73,43 +73,43 @@ const captureElementClick = ref(false)
       <div>
         <label for="draggable">
           nodesDraggable
-          <input id="draggable" v-model="isDraggable" type="checkbox" class="revue-flow__draggable" />
+          <input id="draggable" v-model="isDraggable" type="checkbox" class="vue-flow__draggable" />
         </label>
       </div>
       <div>
         <label for="connectable">
           nodesConnectable
-          <input id="connectable" v-model="isConnectable" type="checkbox" class="revue-flow__connectable" />
+          <input id="connectable" v-model="isConnectable" type="checkbox" class="vue-flow__connectable" />
         </label>
       </div>
       <div>
         <label for="selectable">
           elementsSelectable
-          <input id="selectable" v-model="isSelectable" type="checkbox" class="revue-flow__selectable" />
+          <input id="selectable" v-model="isSelectable" type="checkbox" class="vue-flow__selectable" />
         </label>
       </div>
       <div>
         <label for="zoomonscroll">
           zoomOnScroll
-          <input id="zoomonscroll" v-model="zoomOnScroll" type="checkbox" class="revue-flow__zoomonscroll" />
+          <input id="zoomonscroll" v-model="zoomOnScroll" type="checkbox" class="vue-flow__zoomonscroll" />
         </label>
       </div>
       <div>
         <label for="zoomonpinch">
           zoomOnPinch
-          <input id="zoomonpinch" v-model="zoomOnPinch" type="checkbox" class="revue-flow__zoomonpinch" />
+          <input id="zoomonpinch" v-model="zoomOnPinch" type="checkbox" class="vue-flow__zoomonpinch" />
         </label>
       </div>
       <div>
         <label for="panonscroll">
           panOnScroll
-          <input id="panonscroll" v-model="panOnScroll" type="checkbox" class="revue-flow__panonscroll" />
+          <input id="panonscroll" v-model="panOnScroll" type="checkbox" class="vue-flow__panonscroll" />
         </label>
       </div>
       <div>
         <label>
           panOnScrollMode
-          <select id="panonscrollmode" v-model="panOnScrollMode" class="revue-flow__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>
@@ -119,36 +119,31 @@ const captureElementClick = ref(false)
       <div>
         <label for="zoomondbl">
           zoomOnDoubleClick
-          <input id="zoomondbl" v-model="zoomOnDoubleClick" type="checkbox" class="revue-flow__zoomondbl" />
+          <input id="zoomondbl" v-model="zoomOnDoubleClick" type="checkbox" class="vue-flow__zoomondbl" />
         </label>
       </div>
       <div>
         <label for="panemoveable">
           paneMoveable
-          <input id="panemoveable" v-model="paneMoveable" type="checkbox" class="revue-flow__panemoveable" />
+          <input id="panemoveable" v-model="paneMoveable" type="checkbox" class="vue-flow__panemoveable" />
         </label>
       </div>
       <div>
         <label for="capturezoompaneclick">
           capture onPaneClick
-          <input id="capturezoompaneclick" v-model="captureZoomClick" type="checkbox" class="revue-flow__capturezoompaneclick" />
+          <input id="capturezoompaneclick" v-model="captureZoomClick" type="checkbox" class="vue-flow__capturezoompaneclick" />
         </label>
       </div>
       <div>
         <label for="capturezoompanescroll">
           capture onPaneScroll
-          <input
-            id="capturezoompanescroll"
-            v-model="captureZoomScroll"
-            type="checkbox"
-            class="revue-flow__capturezoompanescroll"
-          />
+          <input id="capturezoompanescroll" v-model="captureZoomScroll" type="checkbox" class="vue-flow__capturezoompanescroll" />
         </label>
       </div>
       <div>
         <label for="captureelementclick">
           capture onElementClick
-          <input id="captureelementclick" v-model="captureElementClick" type="checkbox" class="revue-flow__captureelementclick" />
+          <input id="captureelementclick" v-model="captureElementClick" type="checkbox" class="vue-flow__captureelementclick" />
         </label>
       </div>
     </div>

examples/index.css

@@ -58,22 +58,22 @@ header select {
   display: none;
 }
 
-.revue-flow__node a {
+.vue-flow__node a {
   font-weight: 700;
   color: #111;
 }
 
-.revue-flow__node.dark-node {
+.vue-flow__node.dark-node {
   background: #0041d0;
   color: #f8f8f8;
 }
 
-.revue-flow__node.dark {
+.vue-flow__node.dark {
   background: #557;
   color: #f8f8f8;
 }
 
-.revue-flow__node-selectorNode {
+.vue-flow__node-selectorNode {
   font-size: 14px;
   background: #f0f2f3;
   border: 1px solid #555;
@@ -81,7 +81,7 @@ header select {
   text-align: center;
 }
 
-.revue-flow__node-selectorNode .revue-flow__handle {
+.vue-flow__node-selectorNode .vue-flow__handle {
   border-color: #f0f2f3;
 }