vueless 1.3.2-beta.2 → 1.3.2-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.2-beta.2",
+  "version": "1.3.2-beta.3",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.container-drawer/UDrawer.vue

@@ -6,6 +6,8 @@ import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 
 import UHeader from "../ui.text-header/UHeader.vue";
+import UButton from "../ui.button/UButton.vue";
+import UIcon from "../ui.image-icon/UIcon.vue";
 
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
@@ -38,8 +40,10 @@ const slots = useSlots();
 
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const drawerRef = useTemplateRef<HTMLDivElement>("drawer");
+const handleWrapperRef = useTemplateRef<HTMLDivElement>("handleWrapper");
 
 const isDragging = ref(false);
+const isDraggingFromHandle = ref(false);
 const dragStartPosition = ref({ x: 0, y: 0 });
 const dragCurrentPosition = ref({ x: 0, y: 0 });
 const minDragDistance = 10;
@@ -201,6 +205,12 @@ function onDragStart(e: MouseEvent | TouchEvent) {
   dragStartPosition.value = { x: clientX, y: clientY };
   dragCurrentPosition.value = { x: clientX, y: clientY };
 
+  const targetNode = e.target as Node;
+
+  isDraggingFromHandle.value = !!handleWrapperRef.value?.contains(targetNode);
+
+  if (!props.handle || !isDraggingFromHandle.value) return;
+
   document.addEventListener("mousemove", onDragMove);
   document.addEventListener("mouseup", onDragEnd);
   document.addEventListener("touchmove", onDragMove, { passive: false });
@@ -282,6 +292,8 @@ const {
   footerRightAttrs,
   beforeTitleAttrs,
   titleFallbackAttrs,
+  closeButtonAttrs,
+  closeIconAttrs,
 } = useUI<Config>(defaultConfig);
 </script>
 
@@ -329,9 +341,29 @@ const {
 
               <!--
                 @slot Use it to add something instead of the close button.
+                @binding {string} icon-name
                 @binding {function} close
               -->
-              <slot name="actions" :close="closeDrawer" />
+              <slot name="actions" :icon-name="config.defaults.closeIcon" :close="closeDrawer">
+                <UButton
+                  v-if="closeOnCross"
+                  size="2xs"
+                  square
+                  color="grayscale"
+                  variant="ghost"
+                  v-bind="closeButtonAttrs"
+                  @click="closeDrawer"
+                >
+                  <UIcon
+                    interactive
+                    size="sm"
+                    color="grayscale"
+                    :name="config.defaults.closeIcon"
+                    v-bind="closeIconAttrs"
+                    :data-test="getDataTest('close')"
+                  />
+                </UButton>
+              </slot>
             </div>
 
             <div v-bind="bodyAttrs">
@@ -352,7 +384,7 @@ const {
             </div>
           </div>
 
-          <div v-if="handle" v-bind="handleWrapperAttrs">
+          <div v-if="handle" v-bind="handleWrapperAttrs" ref="handleWrapper">
             <!-- @slot Use it to add something instead of the default handle. -->
             <slot name="handle">
               <div v-bind="handleAttrs" />

package/ui.container-drawer/config.ts

@@ -42,7 +42,7 @@ export default /*tw*/ {
     leaveToClass: "opacity-0",
   },
   innerWrapper: {
-    base: "h-full relative", // add overflow-y
+    base: "h-full relative",
     variants: {
       inset: {
         true: "m-4 h-[calc(100%-2rem)]",
@@ -60,6 +60,8 @@ export default /*tw*/ {
   beforeTitle: "flex items-center gap-3",
   titleFallback: "flex flex-col",
   title: "{UHeader}",
+  closeIcon: "{UIcon}",
+  closeButton: "{UButton} h-fit",
   description: "mt-1.5 text-medium font-normal text-lifted",
   body: {
     base: "px-6 pb-6 text-medium",
@@ -79,7 +81,7 @@ export default /*tw*/ {
   footerLeft: "flex flex-col md:flex-row gap-4 w-full",
   footerRight: "flex flex-col md:flex-row gap-4 w-full justify-end",
   drawerWrapper: {
-    base: "flex border absolute select-none cursor-grab active:cursor-grabbing overflow-x-hidden overflow-y-auto",
+    base: "flex border absolute select-none overflow-x-hidden",
     variants: {
       variant: {
         solid: "bg-default border-transparent",
@@ -99,9 +101,9 @@ export default /*tw*/ {
       },
     },
   },
-  drawer: "",
+  drawer: "overflow-y-auto",
   handleWrapper: {
-    base: "flex items-center justify-center bg-inherit",
+    base: "flex items-center justify-center bg-inherit cursor-grab active:cursor-grabbing",
     variants: {
       position: {
         top: "w-full h-11",
@@ -112,7 +114,7 @@ export default /*tw*/ {
     },
   },
   handle: {
-    base: "rounded-large cursor-pointer bg-lifted hover:bg-accented transition",
+    base: "rounded-large cursor-grab active:cursor-grabbing bg-lifted hover:bg-accented transition",
     compoundVariants: [
       { position: ["top", "bottom"], class: "w-11 h-1.5" },
       { position: ["left", "right"], class: "w-1.5 h-11" },
@@ -124,6 +126,9 @@ export default /*tw*/ {
     inset: false,
     handle: true,
     closeOnEsc: true,
+    closeOnCross: true,
     closeOnOverlay: true,
+    /* icons */
+    closeIcon: "close",
   },
 };

package/ui.container-drawer/storybook/stories.ts

@@ -156,6 +156,9 @@ NoCloseOnEscAndOverlay.args = {
   closeOnOverlay: false,
 };
 
+export const NoCloseOnCross = DefaultTemplate.bind({});
+NoCloseOnCross.args = { closeOnCross: false };
+
 export const Position = EnumTemplate.bind({});
 Position.args = { enum: "position", modelValues: {} };
 

package/ui.container-drawer/tests/UDrawer.test.ts

@@ -210,6 +210,40 @@ describe("UDrawer", () => {
 
       expect(drawerWrapper.attributes("data-test")).toBe(dataTest);
     });
+
+    it("CloseOnCross – shows cross by default and closes on click when true", async () => {
+      const component = mount(UDrawer, {
+        props: {
+          modelValue: true,
+          title: "Drawer Title",
+          closeOnCross: true,
+        },
+      });
+
+      const closeButton = component.find('[vl-key="closeButton"]');
+
+      expect(closeButton.exists()).toBe(true);
+
+      await closeButton.trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeTruthy();
+      expect(component.emitted("update:modelValue")?.[0]).toEqual([false]);
+      expect(component.emitted("close")).toBeTruthy();
+    });
+
+    it("CloseOnCross – hides cross when false", () => {
+      const component = mount(UDrawer, {
+        props: {
+          modelValue: true,
+          title: "Drawer Title",
+          closeOnCross: false,
+        },
+      });
+
+      const closeButton = component.find('[vl-key="closeButton"]');
+
+      expect(closeButton.exists()).toBe(false);
+    });
   });
 
   // Slots tests
@@ -545,26 +579,29 @@ describe("UDrawer", () => {
 
   // Drag functionality tests
   describe("Drag Functionality", () => {
-    it("Cursor – applies drag cursor classes when drawer is draggable", () => {
+    it("Cursor – applies drag cursor classes when handle is enabled", () => {
       const component = mount(UDrawer, {
         props: {
           modelValue: true,
+          handle: true,
         },
       });
 
-      const drawer = component.find("[vl-key='drawerWrapper']");
+      const handleWrapper = component.find("[vl-key='handleWrapper']");
 
-      expect(drawer.attributes("class")).toContain("cursor-grab");
+      expect(handleWrapper.attributes("class")).toContain("cursor-grab");
     });
 
-    it("Mouse Drag – handles drag start", async () => {
+    it("Mouse Drag – handles drag start from handle", async () => {
       const component = mount(UDrawer, {
         props: {
           modelValue: true,
+          handle: true,
         },
       });
 
       const drawer = component.find("[vl-key='drawerWrapper']");
+      const handleWrapper = component.find("[vl-key='handleWrapper']");
 
       // Mock getBoundingClientRect
       const mockRect = {
@@ -578,23 +615,25 @@ describe("UDrawer", () => {
 
       vi.spyOn(drawer.element, "getBoundingClientRect").mockReturnValue(mockRect as DOMRect);
 
-      await drawer.trigger("mousedown", {
+      await handleWrapper.trigger("mousedown", {
         clientX: 100,
         clientY: 100,
       });
 
-      // Check if drag state is initialized (drag should not start until minimum distance)
-      expect(drawer.attributes("class")).toContain("cursor-grab");
+      // Check if handle has drag cursor class
+      expect(handleWrapper.attributes("class")).toContain("cursor-grab");
     });
 
-    it("Touch Drag – handles drag start", async () => {
+    it("Touch Drag – handles drag start from handle", async () => {
       const component = mount(UDrawer, {
         props: {
           modelValue: true,
+          handle: true,
         },
       });
 
       const drawer = component.find("[vl-key='drawerWrapper']");
+      const handleWrapper = component.find("[vl-key='handleWrapper']");
 
       // Mock getBoundingClientRect
       const mockRect = {
@@ -608,12 +647,12 @@ describe("UDrawer", () => {
 
       vi.spyOn(drawer.element, "getBoundingClientRect").mockReturnValue(mockRect as DOMRect);
 
-      await drawer.trigger("touchstart", {
+      await handleWrapper.trigger("touchstart", {
         touches: [{ clientX: 100, clientY: 100 }],
       });
 
-      // Check if drag state is initialized (drag should not start until minimum distance)
-      expect(drawer.attributes("class")).toContain("cursor-grab");
+      // Check if handle has drag cursor class
+      expect(handleWrapper.attributes("class")).toContain("cursor-grab");
     });
 
     it("Transform – applies drag transform styles during drag", async () => {

package/ui.container-drawer/types.ts

@@ -50,6 +50,11 @@ export interface Props {
    */
   closeOnEsc?: boolean;
 
+  /**
+   * Allow closing drawer by clicking on close cross.
+   */
+  closeOnCross?: boolean;
+
   /**
    * Unique element id.
    */