fix(useDraggable): write to useStorage (#2575)

vueuse · Jan 4, 2023 · e39c2a7 · e39c2a7
1 parent c363935
commit e39c2a7
Showing 1 changed file with 18 additions and 12 deletions.
diff --git a/packages/core/useDraggable/component.ts b/packages/core/useDraggable/component.ts
@@ -2,7 +2,7 @@ import { computed, defineComponent, h, reactive, ref } from 'vue-demi'
 import type { UseDraggableOptions } from '@vueuse/core'
 import { isClient, useDraggable, useStorage } from '@vueuse/core'
 import { resolveUnref } from '@vueuse/shared'
-import type { RenderableComponent } from '../types'
+import type { Position, RenderableComponent } from '../types'
 
 export interface UseDraggableProps extends UseDraggableOptions, RenderableComponent {
   /**
@@ -34,22 +34,28 @@ export const UseDraggable = defineComponent<UseDraggableProps>({
   setup(props, { slots }) {
     const target = ref()
     const handle = computed(() => props.handle ?? target.value)
-    const initialValue = props.storageKey
-      ? useStorage(
-        props.storageKey,
-        resolveUnref(props.initialValue) || { x: 0, y: 0 },
-        isClient
-          ? props.storageType === 'session'
-            ? sessionStorage
-            : localStorage
-          : undefined,
-      )
-      : props.initialValue || { x: 0, y: 0 }
+    const storageValue = props.storageKey && useStorage(
+      props.storageKey,
+      resolveUnref(props.initialValue) || { x: 0, y: 0 },
+      isClient
+        ? props.storageType === 'session'
+          ? sessionStorage
+          : localStorage
+        : undefined,
+    )
+    const initialValue = storageValue || props.initialValue || { x: 0, y: 0 }
+    const onEnd = (position: Position) => {
+      if (!storageValue)
+        return
+      storageValue.value.x = position.x
+      storageValue.value.y = position.y
+    }
 
     const data = reactive(useDraggable(target, {
       ...props,
       handle,
       initialValue,
+      onEnd,
     }))
 
     return () => {