test: wip on refactoring test utils

dev/pages/the-hero.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { dragAndDrop } from "../../src/vue/index";
+import { animations } from "../../src/index";
+
+const dragList = ref();
+
+const features = ref([
+  {
+    title: "Data-first",
+    description: "No direct DOM manipulations.",
+  },
+  {
+    title: "Lightweight",
+    description: "~4kb min-gzip. No dependencies.",
+  },
+  {
+    title: "Modern",
+    description: "Leverages modern web APIs.",
+  },
+  {
+    title: "Plugins",
+    description: "Multi-drag, animations, and more.",
+  },
+  {
+    title: "TypeScript",
+    description: "First-class TypeScript support.",
+  },
+  {
+    title: "Production-ready",
+    description: "Used on FormKit Pro inputs.",
+  },
+]);
+
+dragAndDrop({
+  parent: dragList,
+  values: features,
+  draggingClass: "[&>.card]:-rotate-2 before:-rotate-2",
+  dropZoneClass: "blur-[2px] opacity-60",
+  plugins: [
+    animations({
+      duration: 150,
+    }),
+  ],
+});
+</script>
+
+<template>
+  <div class="-mt-8 w-full transform-gpu">
+    <div id="vapor-wave-sun" class="transform-gpu" aria-hidden="true" />
+    <div class="flex flex-col pb-20 min-h-[85dvh]" id="vapor-wave-container">
+      <div class="page-section my-auto relative z-10">
+        <div
+          class="mt-[min(6vh,12em)] mb-[min(6vh,3.5em)] flex flex-col items-center"
+        >
+          <h1
+            :class="`
+              relative
+              font-display
+              text-[max(10vh,6.5em)]
+              text-emerald-500
+              mb-6
+              lg:mb-[max(4vh,1rem)]
+              tall:mt-[max(-6vh,-3rem)]
+              xtall:mt-[max(-12vh,-3rem)]
+              transition-all
+              duration-[1500ms]
+              text-center
+              leading-[0.5em]
+              w-48
+              lg:w-3/4
+              lg:max-w-[45vh]
+              tall:max-w-[min(22rem,50vh)]
+              drop-shadow-[-1px_1px_0_rgba(255,255,255,1)]
+              transform-gpu
+
+              dark:text-white
+            `"
+          ></h1>
+        </div>
+        <ul
+          ref="dragList"
+          :class="`
+            features
+            flex
+            flex-wrap
+            mt-4
+            bg-blue-100/40
+            border
+            border-sky-400
+            rounded-xl
+            p-3
+            backdrop-blur-[8px]
+
+            dark:bg-slate-800/20
+            dark:border-pink-500
+
+            before:content-['try_me']
+            before:absolute
+            before:bottom-full
+            before:left-2
+            before:text-blue-400
+            before:text-xs
+            before:uppercase
+
+            dark:before:text-pink-300
+          `"
+        >
+          <li
+            v-for="feature in features"
+            :key="feature.title"
+            :class="`
+              relative
+              z-20
+              flex
+              flex-col
+              grow
+              basis-[30%]
+              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
+            `"
+          >
+            <div
+              :class="`
+                card
+                rounded-md
+                px-1.5
+                py-2
+                md:p-3
+                grow
+                w-full
+                bg-white
+                border-t
+                border-r
+                border-sky-500
+                text-center
+
+                dark:border-red-400
+                dark:bg-indigo-950/80
+              `"
+            >
+              <span
+                class="text-sm md:text-lg block font-semibold text-emerald-600 mb-0.5 dark:text-emerald-400"
+              >
+                {{ feature.title }}
+              </span>
+              <p
+                class="text-xs md:text-md text-center text-slate-600 dark:text-slate-300"
+              >
+                {{ feature.description }}
+              </p>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>

docs/examples/config/config.ts

@@ -132,6 +132,20 @@ export interface ParentConfig<T> {
    * Function that is called when a node is set up.
    */
   setupNode: SetupNode;
+  /**
+   * Configuration for scrolling behavior.
+   *
+   * If a parent of the dragged element is scrollable, the parent will scroll on its x and y axis.
+   *
+   * I.e. Setting x: 0.9 will begin scrolling the parent when the dragged element is 90% of the way dragged to the left or the right of the scrollable container.
+   *
+   * Scroll Outside determines whether or not the parent will scroll when the dragged element is outside of the parent.
+   */
+  scrollBehavior: {
+    x: number;
+    y: number;
+    scrollOutside?: boolean;
+  };
   /**
    * Flag for whether or not to allow sorting within a given parent.
    */

playwright.config.ts

@@ -21,38 +21,38 @@ export default defineConfig({
         ...devices["Desktop Chrome"],
       },
     },
-    {
-      name: "Desktop Firefox Drag Tests",
-      testMatch: "tests/drag/**/*.spec.ts",
-      use: {
-        ...devices["Desktop Firefox"],
-      },
-    },
-    {
-      name: "Mobile Chrome Touch Tests",
-      testMatch: "tests/touch/**/*.spec.ts",
-      use: {
-        ...devices["Mobile Chrome"],
-      },
-    },
-    {
-      name: "Mobile Safari Touch Tests",
-      testMatch: "tests/touch/**/*.spec.ts",
-      use: {
-        ...devices["Mobile Safari"],
-      },
-    },
-    {
-      name: "Mobile Firefox Touch Tests",
-      testMatch: "tests/touch/**/*.spec.ts",
-      use: {
-        ...devices["Mobile Firefox"],
-      },
-    },
-    {
-      name: "Framework Tests",
-      testMatch: "tests-frameworks/**/*.spec.ts",
-      use: { ...devices["Desktop Chrome"] },
-    },
+    // {
+    //   name: "Desktop Firefox Drag Tests",
+    //   testMatch: "tests/drag/**/*.spec.ts",
+    //   use: {
+    //     ...devices["Desktop Firefox"],
+    //   },
+    // },
+    // {
+    //   name: "Mobile Chrome Touch Tests",
+    //   testMatch: "tests/touch/**/*.spec.ts",
+    //   use: {
+    //     ...devices["Mobile Chrome"],
+    //   },
+    // },
+    // {
+    //   name: "Mobile Safari Touch Tests",
+    //   testMatch: "tests/touch/**/*.spec.ts",
+    //   use: {
+    //     ...devices["Mobile Safari"],
+    //   },
+    // },
+    // {
+    //   name: "Mobile Firefox Touch Tests",
+    //   testMatch: "tests/touch/**/*.spec.ts",
+    //   use: {
+    //     ...devices["Mobile Firefox"],
+    //   },
+    // },
+    // {
+    //   name: "Framework Tests",
+    //   testMatch: "tests-frameworks/**/*.spec.ts",
+    //   use: { ...devices["Desktop Chrome"] },
+    // },
   ],
 });

playwright/tests/drag/sort.spec.ts

@@ -9,39 +9,34 @@ test.beforeAll(async ({ browser }) => {
 });
 
 test.describe("Sorting", async () => {
-  test("Drag sort works as expected.", async () => {
+  test.only("Drag sort works as expected.", async () => {
     await dragDrop(page, {
-      origin: "#Apple",
-      destination: "#Banana",
+      originEl: { id: "Apple", position: "center" },
+      destinationEl: { id: "Banana", position: "center" },
       dragStart: true,
-      drop: false,
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Banana Apple Orange"
     );
     await dragDrop(page, {
-      origin: "#Banana",
-      destination: "#Orange",
-      dragStart: false,
-      drop: true,
+      originEl: { id: "Banana", position: "center" },
+      destinationEl: { id: "Orange", position: "center" },
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Banana Orange Apple"
     );
     await dragDrop(page, {
-      origin: "#Banana",
-      destination: "#Orange",
+      originEl: { id: "Banana", position: "center" },
+      destinationEl: { id: "Orange", position: "center" },
       dragStart: true,
       drop: false,
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Orange Banana Apple"
     );
     await dragDrop(page, {
-      origin: "#Banana",
-      destination: "#Apple",
-      dragStart: false,
-      drop: true,
+      originEl: { id: "Banana", position: "center" },
+      destinationEl: { id: "Apple", position: "center" },
     });
     await expect(page.locator("#sort_values")).toHaveText(
       "Orange Apple Banana"