chore: couple minor fixes

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

examples/RGBFlow/RGBFlow.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { templateRef } from '@vueuse/core'
-import { Elements, FlowInstance, VueFlow } from '@braks/vue-flow'
 import RGBNode from './RGBNode.vue'
 import RGBOutputNode from './RGBOutputNode.vue'
+import { Elements, FlowInstance, VueFlow } from '~/index'
 
 type Colors = {
   red: number

examples/RGBFlow/RGBNode.vue

@@ -11,6 +11,7 @@ interface RGBNodeProps extends NodeProps {
     blue: number
   }
 }
+
 const props = defineProps<RGBNodeProps>()
 const emit = defineEmits(['change'])
 let color = 'red'
@@ -25,20 +26,18 @@ switch (props.data.color) {
     color = 'blue'
     break
 }
-const onChange = (e: any) => emit('change', { color, val: e.target.value })
+
+const colorVal = computed({
+  get: () => props.amount[color as 'red' | 'green' | 'blue'],
+  set: (val) => {
+    emit('change', { color, val })
+  },
+})
 </script>
 <template>
   <div class="wrapper">
     <div class="text-md" :style="{ color }">{{ `${color} Amount`.toUpperCase() }}</div>
-    <input
+    <input v-model="colorVal" class="slider nodrag" :style="{ '--color': color }" type="range" min="0" max="255" />
-      v-model="props.amount[color]"
-      class="slider nodrag"
-      :style="{ '--color': color } as any"
-      type="range"
-      min="0"
-      max="255"
-      @input="onChange"
-    />
     <Handle type="source" :position="Position.Right" :style="{ backgroundColor: color }" />
   </div>
 </template>
@@ -62,11 +61,7 @@ const onChange = (e: any) => emit('change', { color, val: e.target.value })
   -webkit-appearance: none;
   appearance: none;
 
-  &::-moz-range-thumb {
+  &::-moz-range-thumb,
-    @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
-    -webkit-appearance: none;
-    background: var(--color);
-  }
   &::-webkit-slider-thumb {
     @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
     -webkit-appearance: none;

src/additional-components/MiniMap/MiniMap.vue

@@ -14,7 +14,7 @@ const props = withDefaults(defineProps<MiniMapProps>(), {
   maskColor: 'rgb(240, 242, 243, 0.7)',
 })
 
-const attrs = useAttrs()
+const attrs: Record<string, any> = useAttrs()
 const window = useWindow()
 
 const defaultWidth = 200

src/composables/useVueFlow.ts

@@ -11,7 +11,7 @@ export default <N = any, E = N>(options?: Partial<FlowOptions<N, E>>): UseVueFlo
   let vueFlow: UseVueFlow | null = scope ? inject(VueFlow, null) ?? (scope.vueFlow as UseVueFlow) : null
   if (!vueFlow || (vueFlow && options?.id && options.id !== vueFlow.id)) {
     const name = options?.id ?? `vue-flow-${id++}`
-    let store: Store = useStore(options)
+    const store: Store = useStore(options)
     vueFlow = {
       id: name,
       store: reactive(store),
@@ -25,12 +25,6 @@ export default <N = any, E = N>(options?: Partial<FlowOptions<N, E>>): UseVueFlo
       provide(VueFlow, vueFlow)
       scope.vueFlow = vueFlow
     }
-
-    onScopeDispose(() => {
-      vueFlow = null as UseVueFlow
-      scope.vueFlow = null as UseVueFlow
-      store = null as Store
-    })
   }
   if (!vueFlow) throw new Error('VueFlow instance not found.')
 

src/container/VueFlow/watch.ts

@@ -33,7 +33,7 @@ export default (
         if (v && Array.isArray(v)) {
           pause()
           store.setNodes(v)
-          if (nodes) nodes = store.nodes
+          if (nodes) nodes.value = store.nodes
           await nextTick()
           resume()
         }
@@ -44,7 +44,7 @@ export default (
         if (v && Array.isArray(v)) {
           pause()
           store.setEdges(v)
-          if (edges) edges = store.edges
+          if (edges) edges.value = store.edges
           await nextTick()
           resume()
         }