Merge pull request #79 from kimuraz/dev

kimuraz · web-flow · commit 8c4c2cc53014 · 2025-06-15T20:56:53.000+02:00
2.1.2
diff --git a/docs/guide/composables/components/DemoUseDragAndResize.vue b/docs/guide/composables/components/DemoUseDragAndResize.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { nextTick, onMounted, ref } from 'vue';
-import { useInteractContext, useDraggable, useResizable } from 'vue-interact';
+import { useInteractContext, useDraggable, useResizable } from '../../../../src';
 
 const interactableTarget = ref(null);
 
 const context = useInteractContext(interactableTarget);
 const { init, position } = useDraggable(context);
-const { init: initResize, resizeData } = useResizable(context);
+const { init: initResize, resizeData } = useResizable(context, {});
 
 onMounted(() => {
   nextTick(() => {
diff --git a/docs/guide/composables/components/DemoUseDraggable.vue b/docs/guide/composables/components/DemoUseDraggable.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { nextTick, onMounted, ref } from 'vue';
-import { useInteractContext, useDraggable } from 'vue-interact';
+import { useInteractContext, useDraggable } from '../../../../src';
 
 const interactableTarget = ref(null);
 
diff --git a/docs/guide/composables/components/DemoUseResizable.vue b/docs/guide/composables/components/DemoUseResizable.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { nextTick, onMounted, ref } from 'vue';
-import { useInteractContext, useResizable } from 'vue-interact';
+import { useInteractContext, useResizable } from '../../../../src';
 
 const interactableTarget = ref(null);
 
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-interact",
   "description": "Interact.js wrapper for VueJS",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "author": "Kimura <joseduardo.kimura@gmail.com>",
   "private": false,
   "type": "module",
diff --git a/src/composables/__tests__/useDraggable.test.ts b/src/composables/__tests__/useDraggable.test.ts
@@ -1,15 +1,25 @@
 import { ref } from 'vue';
 import useDraggable from '../useDraggable';
 import type { InteractContext } from '../useInteractContext';
+import type {
+    DraggableOptions,
+    DragEvent,
+} from '@interactjs/actions/drag/plugin';
 
 describe('useDraggable', () => {
     let context: InteractContext;
     let draggableMock: jest.Mock;
+    let setMock: jest.Mock;
 
     beforeEach(() => {
         draggableMock = jest.fn();
+        setMock = jest.fn();
         context = {
-            interactable: ref({ draggable: draggableMock } as any),
+            interactable: ref({
+                draggable: draggableMock,
+                set: setMock,
+                target: document.createElement('div'),
+            } as any),
             interact: {} as any,
             position: ref({ x: 0, y: 0 }),
             size: ref({ width: 0, height: 0 }),
@@ -27,6 +37,24 @@ describe('useDraggable', () => {
         expect(typeof options.listeners.end).toBe('function');
     });
 
+    it('draggableOptions getter should return merged initial options', () => {
+        const initialOpts: DraggableOptions = {
+            inertia: { enabled: true },
+            autoScroll: { enabled: true },
+        };
+        const { init, draggableOptions } = useDraggable(context, initialOpts);
+        init();
+
+        const currentOptions = draggableOptions.value;
+        expect(currentOptions.inertia).toEqual(initialOpts.inertia);
+        expect(currentOptions.autoScroll).toEqual(initialOpts.autoScroll);
+        expect(currentOptions.listeners).toBeDefined();
+        const listeners = currentOptions.listeners as any;
+        expect(typeof listeners.start).toBe('function');
+        expect(typeof listeners.move).toBe('function');
+        expect(typeof listeners.end).toBe('function');
+    });
+
     it('should handle drag events correctly', () => {
         const { init, isDragging, position } = useDraggable(context);
         init();
@@ -46,20 +74,49 @@ describe('useDraggable', () => {
         expect(isDragging.value).toBe(false);
     });
 
-    it('should call interactable.set when draggableOptions are set', () => {
-        const setMock = jest.fn();
-        context.interactable.value = {
-            draggable: draggableMock,
-            set: setMock,
-        } as any;
+    it('draggableOptions setter should update options and call interactable.set correctly', () => {
+        const { init, draggableOptions } = useDraggable(context, {
+            lockAxis: 'x',
+        });
+        init();
 
-        const { draggableOptions } = useDraggable(context);
+        const newSpecificOptions: DraggableOptions = {
+            inertia: { resistance: 10, enabled: true },
+            autoScroll: {
+                enabled: true,
+                container: document.createElement('div'),
+            },
+            cursorChecker: () => 'grabbing',
+        };
 
-        const newOptions = { enabled: false };
-        draggableOptions.value = newOptions;
+        draggableOptions.value = newSpecificOptions;
 
         expect(setMock).toHaveBeenCalledTimes(1);
-        expect(setMock).toHaveBeenCalledWith(newOptions);
+        expect(setMock).toHaveBeenCalledWith({
+            drag: expect.objectContaining({
+                inertia: newSpecificOptions.inertia,
+                autoScroll: newSpecificOptions.autoScroll,
+                cursorChecker: newSpecificOptions.cursorChecker,
+                listeners: expect.objectContaining({
+                    start: expect.any(Function),
+                    move: expect.any(Function),
+                    end: expect.any(Function),
+                }),
+            }),
+        });
+
+        const updatedOptions = draggableOptions.value;
+        expect(updatedOptions.inertia).toEqual(newSpecificOptions.inertia);
+        expect(updatedOptions.autoScroll).toEqual(
+            newSpecificOptions.autoScroll,
+        );
+        expect(updatedOptions.cursorChecker).toEqual(
+            newSpecificOptions.cursorChecker,
+        );
+        expect(updatedOptions.lockAxis).toBeUndefined();
+        expect(updatedOptions.listeners).toBeDefined();
+        const listeners = updatedOptions.listeners as any;
+        expect(typeof listeners.start).toBe('function');
     });
 
     it('init throws when context.interactable.value is null', () => {
diff --git a/src/composables/__tests__/useResizable.test.ts b/src/composables/__tests__/useResizable.test.ts
@@ -54,6 +54,46 @@ describe('useResizable', () => {
         expect(options.listeners).toBeDefined();
     });
 
+    it('resizableOptions getter should return merged initial options', () => {
+        const initialOpts: ResizableOptions = {
+            inertia: { enabled: true },
+            edges: { left: false, right: true, bottom: false, top: true },
+        };
+        const { init, resizableOptions } = useResizable(context, initialOpts);
+        init();
+
+        const currentOptions = resizableOptions.value;
+        expect(currentOptions.inertia).toEqual(initialOpts.inertia);
+        expect(currentOptions.edges).toEqual(initialOpts.edges);
+        expect(currentOptions.listeners).toBeDefined();
+    });
+
+    it('resizableOptions setter should call interactable.set and update options', () => {
+        const { init, resizableOptions } = useResizable(context, {});
+        const mockResizableInteractable = {
+            set: jest.fn(),
+        };
+        resizableMock.mockReturnValue(mockResizableInteractable);
+
+        init();
+
+        const newSpecificOptions: ResizableOptions = {
+            inertia: { enabled: false },
+            edges: { top: false, bottom: false, left: true, right: true },
+        };
+
+        resizableOptions.value = newSpecificOptions;
+
+        expect(mockResizableInteractable.set).toHaveBeenCalledTimes(1);
+        expect(mockResizableInteractable.set).toHaveBeenCalledWith({
+            resize: expect.objectContaining(newSpecificOptions),
+        });
+        const updatedOptions = resizableOptions.value;
+        expect(updatedOptions.inertia).toEqual(newSpecificOptions.inertia);
+        expect(updatedOptions.edges).toEqual(newSpecificOptions.edges);
+        expect(updatedOptions.listeners).toBeDefined();
+    });
+
     it('should handle resize events correctly', () => {
         const { init, isResizing, position, resizeData } = useResizable(
             context,
@@ -139,7 +179,16 @@ describe('useResizable', () => {
 
         expect(setMock).toHaveBeenCalledTimes(1);
         expect(setMock).toHaveBeenCalledWith(
-            expect.objectContaining(newOptions),
+            expect.objectContaining({
+                resize: {
+                    listeners: expect.objectContaining({
+                        start: expect.any(Function),
+                        move: expect.any(Function),
+                        end: expect.any(Function),
+                    }),
+                    ...newOptions,
+                },
+            }),
         );
     });
 
diff --git a/src/composables/useDraggable.ts b/src/composables/useDraggable.ts
@@ -14,23 +14,9 @@ const useDraggable = (
     interactOptions: DraggableOptions = {},
 ) => {
     const isDragging = ref<boolean>(false);
+    const _interactOptions = ref<DraggableOptions>(interactOptions);
     const position = context.position;
 
-    const draggableOptions = computed<DraggableOptions>({
-        get: () => ({
-            listeners: {
-                start: onDragStart,
-                move: onDragMove,
-                end: onDragEnd,
-            },
-            ...interactOptions,
-        }),
-        set: (value) => {
-            interactOptions = value;
-            (context.interactable.value as Interact.Interactable).set(value);
-        },
-    });
-
     const onDragStart = (event: Interact.DragEvent) => {
         isDragging.value = true;
     };
@@ -46,6 +32,28 @@ const useDraggable = (
         isDragging.value = false;
     };
 
+    const staticListeners = {
+        start: onDragStart,
+        move: onDragMove,
+        end: onDragEnd,
+    };
+
+    const draggableOptions = computed<DraggableOptions>({
+        get: () => ({
+            listeners: staticListeners,
+            ..._interactOptions.value,
+        }),
+        set: (value) => {
+            _interactOptions.value = value;
+            (context.interactable.value as Interact.Interactable).set({
+                drag: {
+                    listeners: staticListeners,
+                    ..._interactOptions.value,
+                },
+            });
+        },
+    });
+
     const init = () => {
         if (!context.interactable.value) {
             throw new Error('Interactable context is not set');
diff --git a/src/composables/useResizable.ts b/src/composables/useResizable.ts
@@ -6,27 +6,14 @@ import { InteractContext } from './useInteractContext';
 
 const useResizable = (
     context: InteractContext,
-    interactOptions: ResizableOptions,
+    interactOptions: ResizableOptions = {},
 ) => {
     const isResizing = ref<boolean>(false);
     const position = context.position;
     const resizeData = context.size;
+    const _interactOptions = ref<ResizableOptions>(interactOptions);
+
     let resizable: Interact.Interactable;
-    const resizableOptions = computed<ResizableOptions>({
-        get: () => ({
-            edges: { left: true, right: true, bottom: true, top: true },
-            listeners: {
-                start: onResizeStart,
-                move: onResizeMove,
-                end: onResizeEnd,
-            },
-            ...interactOptions,
-        }),
-        set: (value) => {
-            interactOptions = value;
-            resizable.set(value);
-        },
-    });
 
     const onResizeStart = (event: Interact.ResizeEvent) => {
         isResizing.value = true;
@@ -55,6 +42,36 @@ const useResizable = (
         isResizing.value = false;
     };
 
+    const staticListeners = {
+        start: onResizeStart,
+        move: onResizeMove,
+        end: onResizeEnd,
+    };
+    const defaultEdges = {
+        left: true,
+        right: true,
+        bottom: true,
+        top: true,
+    };
+
+    const resizableOptions = computed<ResizableOptions>({
+        get: () => ({
+            edges: { ...defaultEdges },
+            listeners: staticListeners,
+            ..._interactOptions.value,
+        }),
+        set: (value) => {
+            _interactOptions.value = value;
+            resizable.set({
+                resize: {
+                    edges: { ...defaultEdges },
+                    listeners: staticListeners,
+                    ..._interactOptions.value,
+                },
+            });
+        },
+    });
+
     const init = () => {
         if (!context.interactable.value) {
             throw new Error('Interactable context is not set');

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-interact",`
`3`	`3`	`"description": "Interact.js wrapper for VueJS",`
`4`		`- "version": "2.1.1",`
	`4`	`+ "version": "2.1.2",`
`5`	`5`	`"author": "Kimura <joseduardo.kimura@gmail.com>",`
`6`	`6`	`"private": false,`
`7`	`7`	`"type": "module",`