fixes misstyling in multi-drg, adds back copy node style for outer el…

… of draaggable item, adds synth drag classes to docs examples
formkit · Jan 2, 2025 · 336d798 · 336d798
1 parent 88d63cc
commit 336d798
Show file tree

Hide file tree

Showing 14 changed files with 143 additions and 76 deletions.
diff --git a/dist/index.cjs b/dist/index.cjs
@@ -1249,11 +1249,6 @@ function copyNodeStyle(sourceNode, targetNode, omitKeys = false) {
       computedStyle.getPropertyPriority(key)
     );
   }
-  for (const child of Array.from(sourceNode.children)) {
-    if (!isNode(child)) continue;
-    const targetChild = targetNode.children[Array.from(sourceNode.children).indexOf(child)];
-    copyNodeStyle(child, targetChild, omitKeys);
-  }
 }
 function handleRootDragover(e) {
   if (!isDragState(state)) return;
@@ -2368,7 +2363,9 @@ function initSynthDrag(node, parent, e, _state, draggedNodes2) {
     });
   } else {
     if (!config.multiDrag || draggedNodes2.length === 1) {
+      console.log("boom");
       dragImage = node.el.cloneNode(true);
+      copyNodeStyle(node.el, dragImage);
       dragImage.id = "dnd-dragged-node-clone";
       display = dragImage.style.display;
       dragImage.setAttribute("popover", "manual");
@@ -2383,22 +2380,27 @@ function initSynthDrag(node, parent, e, _state, draggedNodes2) {
       });
     } else {
       const wrapper = document.createElement("div");
-      wrapper.setAttribute("popover", "");
+      console.log("getting here");
+      wrapper.setAttribute("popover", "manual");
       for (const node2 of draggedNodes2) {
         const clonedNode = node2.el.cloneNode(true);
+        copyNodeStyle(node2.el, clonedNode);
         clonedNode.style.pointerEvents = "none";
         wrapper.append(clonedNode);
       }
-      Object.assign(wrapper.style, {
+      display = wrapper.style.display;
+      wrapper.id = "dnd-dragged-node-clone";
+      dragImage = wrapper;
+      Object.assign(dragImage.style, {
         display: "flex",
         flexDirection: "column",
-        left: "-9999px",
         position: "absolute",
+        overflow: "hidden",
+        margin: 0,
+        padding: 0,
         pointerEvents: "none",
         zIndex: 9999
       });
-      wrapper.id = "dnd-dragged-node-clone";
-      dragImage = wrapper;
     }
   }
   dragImage.style.position = "absolute";

diff --git a/dist/index.cjs.map b/dist/index.cjs.map
diff --git a/dist/index.d.cts b/dist/index.d.cts
@@ -1323,6 +1323,15 @@ declare function transfer<T>(data: NodeEventData<T> | ParentEventData<T>, state:
  * @returns A function to get the parent event data.
  */
 declare function parentEventData<T>(callback: any): (e: Event) => NodeEventData<T> | undefined;
+/**
+ * Add class to the node.
+ *
+ * @param els - The nodes.
+ * @param className - The class name.
+ * @param omitAppendPrivateClass - Whether to omit append private class.
+ *
+ * @returns void
+ */
 declare function addNodeClass<T>(els: Array<Node | HTMLElement | Element>, className: string | undefined, omitAppendPrivateClass?: boolean): void;
 /**
  * Add class to the parent.

diff --git a/dist/index.d.ts b/dist/index.d.ts
@@ -1323,6 +1323,15 @@ declare function transfer<T>(data: NodeEventData<T> | ParentEventData<T>, state:
  * @returns A function to get the parent event data.
  */
 declare function parentEventData<T>(callback: any): (e: Event) => NodeEventData<T> | undefined;
+/**
+ * Add class to the node.
+ *
+ * @param els - The nodes.
+ * @param className - The class name.
+ * @param omitAppendPrivateClass - Whether to omit append private class.
+ *
+ * @returns void
+ */
 declare function addNodeClass<T>(els: Array<Node | HTMLElement | Element>, className: string | undefined, omitAppendPrivateClass?: boolean): void;
 /**
  * Add class to the parent.

diff --git a/dist/index.mjs b/dist/index.mjs
@@ -1159,11 +1159,6 @@ function copyNodeStyle(sourceNode, targetNode, omitKeys = false) {
       computedStyle.getPropertyPriority(key)
     );
   }
-  for (const child of Array.from(sourceNode.children)) {
-    if (!isNode(child)) continue;
-    const targetChild = targetNode.children[Array.from(sourceNode.children).indexOf(child)];
-    copyNodeStyle(child, targetChild, omitKeys);
-  }
 }
 function handleRootDragover(e) {
   if (!isDragState(state)) return;
@@ -2278,7 +2273,9 @@ function initSynthDrag(node, parent, e, _state, draggedNodes2) {
     });
   } else {
     if (!config.multiDrag || draggedNodes2.length === 1) {
+      console.log("boom");
       dragImage = node.el.cloneNode(true);
+      copyNodeStyle(node.el, dragImage);
       dragImage.id = "dnd-dragged-node-clone";
       display = dragImage.style.display;
       dragImage.setAttribute("popover", "manual");
@@ -2293,22 +2290,27 @@ function initSynthDrag(node, parent, e, _state, draggedNodes2) {
       });
     } else {
       const wrapper = document.createElement("div");
-      wrapper.setAttribute("popover", "");
+      console.log("getting here");
+      wrapper.setAttribute("popover", "manual");
       for (const node2 of draggedNodes2) {
         const clonedNode = node2.el.cloneNode(true);
+        copyNodeStyle(node2.el, clonedNode);
         clonedNode.style.pointerEvents = "none";
         wrapper.append(clonedNode);
       }
-      Object.assign(wrapper.style, {
+      display = wrapper.style.display;
+      wrapper.id = "dnd-dragged-node-clone";
+      dragImage = wrapper;
+      Object.assign(dragImage.style, {
         display: "flex",
         flexDirection: "column",
-        left: "-9999px",
         position: "absolute",
+        overflow: "hidden",
+        margin: 0,
+        padding: 0,
         pointerEvents: "none",
         zIndex: 9999
       });
-      wrapper.id = "dnd-dragged-node-clone";
-      dragImage = wrapper;
     }
   }
   dragImage.style.position = "absolute";

diff --git a/dist/index.mjs.map b/dist/index.mjs.map
diff --git a/docs/components/TheHero.vue b/docs/components/TheHero.vue
@@ -42,8 +42,9 @@ const features = ref([
 dragAndDrop({
   parent: dragList,
   values: features,
-  draggingClass: "[&>.card]:-rotate-2 before:-rotate-2",
   dropZoneClass: "blur-[2px] opacity-60",
+  synthDropZoneClass: "blur-[2px] opacity-60",
+  synthDraggingClass: "rounded-md",
 });
 
 function toggleFrameworkList(setting: boolean) {
@@ -340,17 +341,10 @@ onMounted(() => {
               m-2
               cursor-grab
               active:cursor-grabbing
-              active:shadow-xl
               active:select-none
 
-              before:absolute
-              before:z-[-1]
-              before:bg-pink-500
-              before:top-[3px]
-              before:-left-[3px]
-              before:w-full
-              before:h-full
-              before:rounded-md
+
+
 
               dark:before:bg-pink-400
             `"
@@ -365,8 +359,6 @@ onMounted(() => {
                 grow
                 w-full
                 bg-white
-                border-t
-                border-r
                 border-sky-500
                 text-center
 

diff --git a/docs/examples/ToDos.vue b/docs/examples/ToDos.vue
@@ -60,6 +60,10 @@ const todoConfig = {
   })(),
   dropZoneClass: !props.insert ? "!bg-lime-200" : undefined,
   dropZoneParentClass: !props.insert ? "!border-4 border-lime-300" : undefined,
+  synthDropZoneClass: !props.insert ? "!bg-lime-200" : undefined,
+  synthDropZoneParentClass: !props.insert
+    ? "!border-4 border-lime-300"
+    : undefined,
 };
 
 const doneConfig = {
@@ -94,6 +98,10 @@ const doneConfig = {
   })(),
   dropZoneClass: !props.insert ? "!bg-lime-200" : undefined,
   dropZoneParentClass: !props.insert ? "!border-4 border-lime-300" : undefined,
+  synthDropZoneClass: !props.insert ? "!bg-lime-200" : undefined,
+  synthDropZoneParentClass: !props.insert
+    ? "!border-4 border-lime-300"
+    : undefined,
 };
 
 const [todoList, todos] = useDragAndDrop(

diff --git a/docs/examples/draggable/demo.vue b/docs/examples/draggable/demo.vue
@@ -15,6 +15,8 @@ dragAndDrop({
   parent: dragList,
   values: tapes,
   dropZoneClass: "saturate-0 opacity-20",
+  synthDropZoneClass: "saturate-0 opacity-20",
+  synthDraggingClass: "bg-transparent",
   draggable: (el: HTMLElement) => {
     return el.id !== "no-drag";
   },

diff --git a/docs/examples/sorting/demo.vue b/docs/examples/sorting/demo.vue
@@ -14,6 +14,8 @@ dragAndDrop({
   parent: dragList,
   values: tapes,
   dropZoneClass: "saturate-0 opacity-20",
+  synthDropZoneClass: "saturate-0 opacity-20",
+  synthDraggingClass: "bg-transparent",
 });
 </script>
 

diff --git a/docs/examples/update-config/demo.vue b/docs/examples/update-config/demo.vue
@@ -3,14 +3,21 @@ import { useDragAndDrop } from "../../../src/vue/index";
 
 const disabled = ref(false);
 
-const [parentRef, values, updateConfig] = useDragAndDrop([
-  "Depeche Mode",
-  "Duran Duran",
-  "Pet",
-  "Kraftwerk",
-  "Tears for Fears",
-  "Spandau Ballet",
-]);
+const [parentRef, values, updateConfig] = useDragAndDrop(
+  [
+    "Depeche Mode",
+    "Duran Duran",
+    "Pet",
+    "Kraftwerk",
+    "Tears for Fears",
+    "Spandau Ballet",
+  ],
+  {
+    dropZoneClass: "saturate-0 opacity-20",
+    synthDropZoneClass: "saturate-0 opacity-20",
+    synthDraggingClass: "bg-transparent",
+  }
+);
 
 function toggleDisabled() {
   disabled.value = !disabled.value;

diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -19,7 +19,7 @@ export default defineNuxtConfig({
   css: ["@/assets/css/main.css"],
 
   experimental: {
-    componentIslands: true,
+    componentIslands: false,
   },
 
   runtimeConfig: {