fixes regression in drop-or-swap plugin

Author: sashamilenkovic

dist/index.cjs

@@ -979,9 +979,10 @@ function updateDraggedOverNodes(data, state2) {
   );
   state2.currentTargetValue = targetData.node.data.value;
   state2.currentParent = targetData.parent;
-  addParentClass(
-    [state2.currentParent.el],
+  addClass(
+    state2.currentParent.el,
     isSynthDragState(state2) ? config.synthDropZoneParentClass : config.dropZoneParentClass,
+    state2.currentParent.data,
     true
   );
 }
@@ -1000,7 +1001,12 @@ function handleParentDragover2(data, state2) {
   );
   removeClass([state2.currentParent.el], currentConfig.dropZoneParentClass);
   const config = data.targetData.parent.data.config;
-  addParentClass([data.targetData.parent.el], config.dropZoneParentClass, true);
+  addClass(
+    data.targetData.parent.el,
+    config.dropZoneParentClass,
+    data.targetData.parent.data,
+    true
+  );
   dropSwapState.draggedOverNodes = [];
   state2.currentParent = data.targetData.parent;
 }
@@ -1015,9 +1021,10 @@ function handeParentPointerover(data) {
     currentConfig.synthDropZoneParentClass
   );
   const config = data.detail.targetData.parent.data.config;
-  addParentClass(
-    [data.detail.targetData.parent.el],
+  addClass(
+    data.detail.targetData.parent.el,
     config.synthDropZoneParentClass,
+    data.detail.targetData.parent.data,
     true
   );
   dropSwapState.draggedOverNodes = [];

dist/index.cjs.map

@@ -889,9 +889,10 @@ function updateDraggedOverNodes(data, state2) {
   );
   state2.currentTargetValue = targetData.node.data.value;
   state2.currentParent = targetData.parent;
-  addParentClass(
-    [state2.currentParent.el],
+  addClass(
+    state2.currentParent.el,
     isSynthDragState(state2) ? config.synthDropZoneParentClass : config.dropZoneParentClass,
+    state2.currentParent.data,
     true
   );
 }
@@ -910,7 +911,12 @@ function handleParentDragover2(data, state2) {
   );
   removeClass([state2.currentParent.el], currentConfig.dropZoneParentClass);
   const config = data.targetData.parent.data.config;
-  addParentClass([data.targetData.parent.el], config.dropZoneParentClass, true);
+  addClass(
+    data.targetData.parent.el,
+    config.dropZoneParentClass,
+    data.targetData.parent.data,
+    true
+  );
   dropSwapState.draggedOverNodes = [];
   state2.currentParent = data.targetData.parent;
 }
@@ -925,9 +931,10 @@ function handeParentPointerover(data) {
     currentConfig.synthDropZoneParentClass
   );
   const config = data.detail.targetData.parent.data.config;
-  addParentClass(
-    [data.detail.targetData.parent.el],
+  addClass(
+    data.detail.targetData.parent.el,
     config.synthDropZoneParentClass,
+    data.detail.targetData.parent.data,
     true
   );
   dropSwapState.draggedOverNodes = [];

dist/index.mjs

@@ -182,6 +182,13 @@ export async function syntheticDrag(
       })
     );
 
+    destinationElement.dispatchEvent(
+      new PointerEvent("pointerover", {
+        pointerId: 1,
+        ...destProps,
+      })
+    );
+
     await new Promise((resolve) => setTimeout(resolve, 100));
 
     // Additional move at destination to ensure hover state

dist/index.mjs.map

@@ -2784,28 +2784,27 @@ export function addClass(
 
   if (!classNames.length) return;
 
-  if (classNames.includes("longPress")) return;
-
   if (!data) {
     el.classList.add(...classNames);
     return;
   }
+  // Revert to original logic: Initialize privateClasses as empty for this call.
+  const privateClasses = [];
 
-  const privateClasses = [...(data.privateClasses || [])];
-
-  for (const className of classNames) {
-    if (!el.classList.contains(className)) {
-      el.classList.add(className);
+  for (const currentClassName of classNames) {
+    if (!el.classList.contains(currentClassName)) {
+      el.classList.add(currentClassName);
     } else if (
-      el.classList.contains(className) &&
+      // Only add to privateClasses if the element already had the class
+      // AND omitAppendPrivateClass is specifically false for THIS call.
+      el.classList.contains(currentClassName) &&
       omitAppendPrivateClass === false
     ) {
-      privateClasses.push(className);
+      privateClasses.push(currentClassName);
     }
   }
-
+  // Assign the newly computed privateClasses, overwriting any previous value.
   data.privateClasses = privateClasses;
-
   return data;
 }
 

playwright/utils.ts

@@ -18,10 +18,10 @@ import {
   addNodeClass,
   isSynthDragState,
   removeClass,
+  addClass,
   state,
   addEvents,
   isDragState,
-  addParentClass,
 } from "../../index";
 
 export const dropSwapState: DropSwapState<unknown> = {
@@ -147,11 +147,12 @@ function updateDraggedOverNodes<T>(
 
   state.currentParent = targetData.parent;
 
-  addParentClass(
-    [state.currentParent.el],
+  addClass(
+    state.currentParent.el,
     isSynthDragState(state)
       ? config.synthDropZoneParentClass
       : config.dropZoneParentClass,
+    state.currentParent.data,
     true
   );
 }
@@ -186,7 +187,12 @@ export function handleParentDragover<T>(
 
   const config = data.targetData.parent.data.config;
 
-  addParentClass([data.targetData.parent.el], config.dropZoneParentClass, true);
+  addClass(
+    data.targetData.parent.el,
+    config.dropZoneParentClass,
+    data.targetData.parent.data,
+    true
+  );
 
   dropSwapState.draggedOverNodes = [];
 
@@ -208,9 +214,10 @@ export function handeParentPointerover<T>(data: PointeroverParentEvent<T>) {
 
   const config = data.detail.targetData.parent.data.config;
 
-  addParentClass(
-    [data.detail.targetData.parent.el],
+  addClass(
+    data.detail.targetData.parent.el,
     config.synthDropZoneParentClass,
+    data.detail.targetData.parent.data,
     true
   );
 

src/index.ts

@@ -1,7 +1,7 @@
 // Generated by nuxi
+/// <reference types="@nuxt/telemetry" />
 /// <reference types="@nuxtjs/tailwindcss" />
 /// <reference types="@nuxt/devtools" />
-/// <reference types="@nuxt/telemetry" />
 /// <reference path="types/builder-env.d.ts" />
 /// <reference types="nuxt" />
 /// <reference path="types/app-defaults.d.ts" />