fix: update:model-value not triggering on add and remove (#138)

Author: NicolaiHorlacher

src/useDraggable.ts

@@ -142,6 +142,11 @@ export function useDraggable<T>(...args: any[]): UseDraggableReturn {
     const element = evt.item[CLONE_ELEMENT_KEY]
     if (isUndefined(element)) return
     removeNode(evt.item)
+    if (isRef<any[]>(list)) {
+      const newList = [...unref(list)]
+      list.value = insertElement(newList, evt.newDraggableIndex!, element)
+      return
+    }
     insertElement(unref(list), evt.newDraggableIndex!, element)
   }
 
@@ -151,11 +156,16 @@ export function useDraggable<T>(...args: any[]): UseDraggableReturn {
    */
   function onRemove(evt: DraggableEvent) {
     const { from, item, oldIndex, oldDraggableIndex, pullMode, clone } = evt
+    insertNodeAt(from, item, oldIndex!)
     if (pullMode === 'clone') {
-      insertNodeAt(from, item, oldIndex!)
       removeNode(clone)
       return
     }
+    if (isRef<any[]>(list)) {
+      const newList = [...unref(list)]
+      list.value = removeElement(newList, oldDraggableIndex!)
+      return
+    }
     removeElement(unref(list), oldDraggableIndex!)
   }
 

src/utils/index.ts

@@ -1,11 +1,12 @@
+import { warn } from './log'
+
 /**
  * Moves an element in an array from one position to another.
  * @param {T[]} array
  * @param {number} from
  * @param {number} to
+ * @returns {T[]}
  */
-import { warn } from './log'
-
 export function moveArrayElement<T>(array: T[], from: number, to: number): T[] {
   if (to >= 0 && to < array.length) {
     array.splice(to, 0, array.splice(from, 1)[0])
@@ -43,17 +44,20 @@ export function objectMap(object: Record<any, any>) {
  * @returns {T[]}
  */
 export function removeElement<T>(array: T[], index: number) {
-  if (Array.isArray(array)) return array.splice(index, 1)
+  if (Array.isArray(array)) array.splice(index, 1)
+  return array
 }
 
 /**
  * Inserts an element into an array.
  * @param {T[]} array
  * @param {number} index
  * @param element
+ * @returns {T[]}
  */
 export function insertElement<T>(array: T[], index: number, element: any) {
-  if (Array.isArray(array)) return array.splice(index, 0, element)
+  if (Array.isArray(array)) array.splice(index, 0, element)
+  return array
 }
 
 /**