vueless 1.4.12-beta.0 → 1.4.12-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.0",
+  "version": "1.4.12-beta.2",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -59,7 +59,7 @@
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/test-utils": "^2.4.8",
     "@vue/tsconfig": "^0.9.1",
-    "@vueless/storybook": "^1.7.0",
+    "@vueless/storybook": "^1.7.3",
     "eslint": "^10.2.1",
     "eslint-plugin-storybook": "^10.3.5",
     "eslint-plugin-tailwindcss": "^4.0.0-alpha.7",

package/ui.data-list/UDataList.vue

@@ -129,6 +129,9 @@ const {
       :animation="animationDuration"
       :ghost-class="config.draggableGhost"
       :drag-class="config.draggableDrag"
+      :force-fallback="forceFallback"
+      :fallback-on-body="fallbackOnBody"
+      :fallback-class="fallbackClass"
       v-bind="draggableAttrs"
       :data-test="getDataTest()"
       @end="onDragEnd"

package/ui.data-list/config.ts

@@ -55,6 +55,9 @@ export default /*tw*/ {
     labelKey: "label",
     valueKey: "value",
     animationDuration: 200,
+    forceFallback: false,
+    fallbackOnBody: false,
+    fallbackClass: "sortable-fallback",
     /* icons */
     dragIcon: "drag_indicator",
   },

package/ui.data-list/storybook/stories.ts

@@ -118,6 +118,22 @@ Nesting.args = {
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
 
+export const ForceFallback = DefaultTemplate.bind({});
+ForceFallback.args = {
+  forceFallback: true,
+  fallbackOnBody: true,
+  fallbackClass: "sortable-fallback",
+};
+ForceFallback.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "Use `forceFallback` to drag with Sortable's JS fallback instead of native HTML5 DnD (browsers force translucency on native drag images). Pair with `fallbackOnBody` when the list sits inside an `overflow: hidden` container, and `fallbackClass` to style the floating clone.",
+    },
+  },
+};
+
 export const LabelSlot = DefaultTemplate.bind({});
 LabelSlot.args = {
   slotTemplate: `

package/ui.data-list/tests/UDataList.test.ts

@@ -162,6 +162,83 @@ describe("UDataList.vue", () => {
       expect(draggableComponent.vm.$attrs.animation).toBe(animationDuration);
     });
 
+    it("Force Fallback – passes forceFallback to draggable", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+          forceFallback: true,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["force-fallback"]).toBe(true);
+    });
+
+    it("Force Fallback – defaults to false", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["force-fallback"]).toBe(false);
+    });
+
+    it("Fallback On Body – passes fallbackOnBody to draggable", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+          fallbackOnBody: true,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["fallback-on-body"]).toBe(true);
+    });
+
+    it("Fallback On Body – defaults to false", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["fallback-on-body"]).toBe(false);
+    });
+
+    it("Fallback Class – passes fallbackClass to draggable", () => {
+      const fallbackClass = "custom-drag-fallback";
+
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+          fallbackClass,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["fallback-class"]).toBe(fallbackClass);
+    });
+
+    it("Fallback Class – defaults to sortable-fallback", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["fallback-class"]).toBe("sortable-fallback");
+    });
+
     it("Nesting – renders nested items when children array is present", async () => {
       const component = mount(UDataList, {
         props: {

package/ui.data-list/types.ts

@@ -49,6 +49,21 @@ export interface Props {
    */
   animationDuration?: number;
 
+  /**
+   * Sortable JS fallback (instead of native HTML5 DnD).
+   */
+  forceFallback?: boolean;
+
+  /**
+   * Append the fallback drag clone to document.body.
+   */
+  fallbackOnBody?: boolean;
+
+  /**
+   * CSS class for the Sortable fallback drag clone (forceFallback mode).
+   */
+  fallbackClass?: string;
+
   /**
    * Disable empty state for nested elements if empty (internal props).
    * @ignore