fix: update props to composable when component updates

bcakmakoglu · Jul 20, 2021 · c89e9f7 · c89e9f7
1 parent 05cebc9
commit c89e9f7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/src/components/Draggable.ts b/src/components/Draggable.ts
@@ -1,4 +1,4 @@
-import { h, defineComponent, PropType, isVue3, Ref } from 'vue-demi';
+import { h, defineComponent, PropType, isVue3, Ref, onUpdated } from 'vue-demi';
 import { DraggableOptions } from '../utils/types';
 import useDraggable from '../hooks/useDraggable';
 import { templateRef } from '@vueuse/core';
@@ -87,7 +87,7 @@ const Draggable = defineComponent({
   setup(props, { slots, emit }) {
     const init = (targets: Ref[]) => {
       targets.forEach((target) => {
-        const { onDrag, onDragStart, onDragStop, onTransformed } = useDraggable(target, props);
+        const { onDrag, onDragStart, onDragStop, onTransformed, updateState } = useDraggable(target, props);
 
         onDrag((dragEvent) => {
           emit('move', dragEvent);
@@ -104,6 +104,10 @@ const Draggable = defineComponent({
         onTransformed((transformEvent) => {
           emit('transformed', transformEvent);
         });
+
+        onUpdated(() => {
+          updateState(props);
+        });
       });
     };
 

diff --git a/src/components/DraggableCore.ts b/src/components/DraggableCore.ts
@@ -1,5 +1,5 @@
-import { h, defineComponent, PropType, isVue3 } from 'vue-demi';
-import {DraggableCoreOptions, DraggableOptions} from '../utils/types';
+import { h, defineComponent, PropType, isVue3, onUpdated } from 'vue-demi';
+import { DraggableCoreOptions, DraggableOptions } from '../utils/types';
 import useDraggableCore from '../hooks/useDraggableCore';
 import { templateRef } from '@vueuse/core';
 
@@ -55,7 +55,7 @@ const DraggableCore = defineComponent({
   setup(props, { slots, emit }) {
     const target = templateRef('core-target', null);
 
-    const { onDrag, onDragStart, onDragStop } = useDraggableCore(target, props);
+    const { onDrag, onDragStart, onDragStop, updateState } = useDraggableCore(target, props);
 
     onDrag((dragEvent) => {
       emit('move', dragEvent);
@@ -69,6 +69,10 @@ const DraggableCore = defineComponent({
       emit('stop', dragStopEvent);
     });
 
+    onUpdated(() => {
+      updateState(props);
+    });
+
     if (isVue3) {
       return () => {
         if (slots.default) return slots.default()?.map((node) => h(node, { ref: 'core-target' }));