update: change name to vue flow

* Add gif to readme

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

src/additional-components/Background/Background.vue

@@ -24,7 +24,7 @@ const defaultColors: Record<BackgroundVariant, string> = {
 const store = useStore()
 // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
 
-const bgClasses = ['revue-flow__background']
+const bgClasses = ['vue-flow__background']
 const background = computed(() => {
   const scaledGap = props.gap && props.gap * store.transform[2]
   const xOffset = scaledGap && store.transform[0] % scaledGap

src/additional-components/Controls/ControlButton.vue

@@ -6,7 +6,7 @@ export interface ControlButtonProps extends ButtonHTMLAttributes {}
 const props: any = defineProps<ControlButtonProps>()
 </script>
 <template>
-  <button :class="['revue-flow__controls-button']" v-bind="props">
+  <button :class="['vue-flow__controls-button']" v-bind="props">
     <slot></slot>
   </button>
 </template>

src/additional-components/Controls/Controls.vue

@@ -30,7 +30,7 @@ const store = useStore()
 const { zoomIn, zoomOut, fitView } = useZoomPanHelper()
 
 const isInteractive = store.nodesDraggable && store.nodesConnectable && store.elementsSelectable
-const mapClasses = ['revue-flow__controls']
+const mapClasses = ['vue-flow__controls']
 
 const onZoomInHandler = () => {
   zoomIn?.()
@@ -56,14 +56,14 @@ const onInteractiveChangeHandler = () => {
   <div :class="mapClasses">
     <template v-if="props.showZoom">
       <slot name="control-zoom-in">
-        <ControlButton class="revue-flow__controls-zoomin" @click="onZoomInHandler">
+        <ControlButton class="vue-flow__controls-zoomin" @click="onZoomInHandler">
           <slot name="icon-zoom-in">
             <PlusIcon />
           </slot>
         </ControlButton>
       </slot>
       <slot name="control-zoom-out">
-        <ControlButton class="revue-flow__controls-zoomout" @click="onZoomOutHandler">
+        <ControlButton class="vue-flow__controls-zoomout" @click="onZoomOutHandler">
           <slot name="icon-zoom-out">
             <MinusIcon />
           </slot>
@@ -71,14 +71,14 @@ const onInteractiveChangeHandler = () => {
       </slot>
     </template>
     <slot name="control-fitview">
-      <ControlButton v-if="props.showFitView" class="revue-flow__controls-fitview" @click="onFitViewHandler">
+      <ControlButton v-if="props.showFitView" class="vue-flow__controls-fitview" @click="onFitViewHandler">
         <slot name="icon-fitview">
           <Fitview />
         </slot>
       </ControlButton>
     </slot>
     <slot name="control-interactive">
-      <ControlButton v-if="props.showInteractive" class="revue-flow__controls-interactive" @click="onInteractiveChangeHandler">
+      <ControlButton v-if="props.showInteractive" class="vue-flow__controls-interactive" @click="onInteractiveChangeHandler">
         <slot name="icon-unlock">
           <Unlock v-if="isInteractive" />
         </slot>

src/additional-components/MiniMap/MiniMap.vue

@@ -73,7 +73,7 @@ const viewBox = computed(() => {
     :width="elementWidth"
     :height="elementHeight"
     :viewBox="`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`"
-    class="revue-flow__minimap"
+    class="vue-flow__minimap"
   >
     <slot name="mini-map-nodes" :nodes="store.nodes" :view-box="viewBox">
       <template v-for="(node, i) of store.nodes" :key="`mini-map-node-${i}`">
@@ -94,7 +94,7 @@ const viewBox = computed(() => {
       </template>
     </slot>
     <path
-      class="revue-flow__minimap-mask"
+      class="vue-flow__minimap-mask"
       :d="`
       M${viewBox.x - viewBox.offset},${viewBox.y - viewBox.offset}h${viewBox.width + viewBox.offset * 2}
       v${viewBox.height + viewBox.offset * 2}

src/additional-components/MiniMap/MiniMapNode.vue

@@ -22,7 +22,7 @@ const fill = computed(() => (props.color || styles.background || styles.backgrou
 </script>
 <template>
   <rect
-    class="revue-flow__minimap-node"
+    class="vue-flow__minimap-node"
     :x="props.x"
     :y="props.y"
     :rx="props.borderRadius"

src/additional-components/index.ts

@@ -1,5 +1,5 @@
-// These components are not used by revue Flow directly
-// but the user can add them as children of a revue Flow component
+// These components are not used by vue flow directly
+// but the user can add them as children of a vue flow component
 
 export { default as MiniMap } from './MiniMap/MiniMap.vue'
 export { default as Controls } from './Controls/Controls.vue'