vueless 1.3.6-beta.1 → 1.3.6-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.6-beta.1",
+  "version": "1.3.6-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",
@@ -57,7 +57,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.3.5",
+    "@vueless/storybook": "^1.3.6",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^10.0.2",
     "eslint-plugin-vue": "^10.3.0",

package/ui.form-calendar/tests/UCalendar.test.ts

@@ -131,6 +131,31 @@ describe("UCalendar.vue", () => {
       expect(rangeUpdate.to).not.toBeNull();
     });
 
+    it("Range – allows selecting the same day for from and to", async () => {
+      const component = mount(UCalendar, {
+        props: {
+          range: true,
+          modelValue: { from: null, to: null },
+          dateFormat: "Y-m-d",
+        },
+      });
+
+      const dayView = component.findComponent(DayView);
+      const days = dayView.findAll('[vl-key="day"]');
+
+      await days[5].trigger("click");
+      await days[5].trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeTruthy();
+      expect(component.emitted("update:modelValue")).toHaveLength(2);
+
+      const rangeUpdate = component.emitted("update:modelValue")![1][0] as RangeDate;
+
+      expect(rangeUpdate.from).not.toBeNull();
+      expect(rangeUpdate.to).not.toBeNull();
+      expect(rangeUpdate.from).toBe(rangeUpdate.to);
+    });
+
     it("Timepicker – shows timepicker when enabled", () => {
       const component = mount(UCalendar, {
         props: {
@@ -518,6 +543,94 @@ describe("UCalendar.vue", () => {
 
       expect(component.emitted("userDateChange")).toBeTruthy();
     });
+
+    it("ChangeRange – emits when first date is selected in range mode", async () => {
+      const component = mount(UCalendar, {
+        props: {
+          range: true,
+          modelValue: { from: null, to: null },
+          dateFormat: "Y-m-d",
+        },
+      });
+
+      const dayView = component.findComponent(DayView);
+      const days = dayView.findAll('[vl-key="day"]');
+
+      await days[0].trigger("click");
+
+      expect(component.emitted("change-range")).toBeTruthy();
+      expect(component.emitted("change-range")![0][0]).toHaveProperty("from");
+      expect(component.emitted("change-range")![0][0]).toHaveProperty("to");
+    });
+
+    it("ChangeRange – emits when both dates are selected in range mode", async () => {
+      const component = mount(UCalendar, {
+        props: {
+          range: true,
+          modelValue: { from: null, to: null },
+          dateFormat: "Y-m-d",
+        },
+      });
+
+      const dayView = component.findComponent(DayView);
+      const days = dayView.findAll('[vl-key="day"]');
+
+      await days[0].trigger("click");
+      await days[3].trigger("click");
+
+      const changeRangeEvents = component.emitted("change-range");
+
+      expect(changeRangeEvents).toBeTruthy();
+      expect(changeRangeEvents!.length).toBeGreaterThan(0);
+
+      const lastEvent = changeRangeEvents![changeRangeEvents!.length - 1][0] as RangeDate;
+
+      expect(lastEvent.from).not.toBeNull();
+      expect(lastEvent.to).not.toBeNull();
+    });
+
+    it("ChangeRange – emits when same date is selected twice in range mode", async () => {
+      const component = mount(UCalendar, {
+        props: {
+          range: true,
+          modelValue: { from: null, to: null },
+          dateFormat: "Y-m-d",
+        },
+      });
+
+      const dayView = component.findComponent(DayView);
+      const days = dayView.findAll('[vl-key="day"]');
+
+      await days[5].trigger("click");
+      await days[5].trigger("click");
+
+      const changeRangeEvents = component.emitted("change-range");
+
+      expect(changeRangeEvents).toBeTruthy();
+
+      const lastEvent = changeRangeEvents![changeRangeEvents!.length - 1][0] as RangeDate;
+
+      expect(lastEvent.from).not.toBeNull();
+      expect(lastEvent.to).not.toBeNull();
+      expect(lastEvent.from).toBe(lastEvent.to);
+    });
+
+    it("ChangeRange – does not emit when range mode is disabled", async () => {
+      const component = mount(UCalendar, {
+        props: {
+          range: false,
+          modelValue: null,
+          dateFormat: "Y-m-d",
+        },
+      });
+
+      const dayView = component.findComponent(DayView);
+      const day = dayView.find('[vl-key="day"]');
+
+      await day.trigger("click");
+
+      expect(component.emitted("change-range")).toBeFalsy();
+    });
   });
 
   describe("Exposed Properties", () => {

package/ui.form-date-picker-range/tests/UDatePickerRange.test.ts

@@ -440,6 +440,37 @@ describe("UDatePickerRange.vue", () => {
 
       expect(component.find("[vl-key='datepickerCalendar']").exists()).toBe(true);
     });
+
+    it("Menu – allows selecting the same day for from and to in range mode", async () => {
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          modelValue: { from: null, to: null },
+          dateFormat: "Y-m-d",
+          "onUpdate:modelValue": (value: RangeDate) => {
+            component.setProps({ modelValue: value });
+          },
+        },
+      });
+
+      const input = component.findComponent(UInput).get("input");
+
+      await input.trigger("focus");
+
+      const days = component.findAll("[vl-key='day']");
+
+      await days[10].trigger("click");
+      await days[10].trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeTruthy();
+
+      const emittedValues = component.emitted("update:modelValue")!;
+      const lastEmittedValue = emittedValues[emittedValues.length - 1][0] as RangeDate;
+
+      expect(lastEmittedValue.from).not.toBeNull();
+      expect(lastEmittedValue.to).not.toBeNull();
+      expect(lastEmittedValue.from).toBe(lastEmittedValue.to);
+    });
   });
 
   describe("Range Navigation", () => {
@@ -554,6 +585,89 @@ describe("UDatePickerRange.vue", () => {
     });
   });
 
+  describe("Events", () => {
+    it("ChangeRange – handles change-range event from calendar when dates are selected", async () => {
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          modelValue: { from: null, to: null },
+          dateFormat: "Y-m-d",
+          "onUpdate:modelValue": (value: RangeDate) => {
+            component.setProps({ modelValue: value });
+          },
+        },
+      });
+
+      const input = component.findComponent(UInput).find("input");
+
+      await input.trigger("focus");
+
+      const days = component.findAll("[vl-key='day']");
+
+      expect(days.length).toBeGreaterThan(0);
+
+      await days[0].trigger("click");
+      await days[3].trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeTruthy();
+    });
+
+    it("ChangeRange – handles change-range event from calendar when both dates are selected", async () => {
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          modelValue: { from: null, to: null },
+          dateFormat: "Y-m-d",
+          "onUpdate:modelValue": (value: RangeDate) => {
+            component.setProps({ modelValue: value });
+          },
+        },
+      });
+
+      const input = component.findComponent(UInput).find("input");
+
+      await input.trigger("focus");
+
+      const days = component.findAll("[vl-key='day']");
+
+      await days[0].trigger("click");
+      await days[3].trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeTruthy();
+    });
+
+    it("ChangeRange – handles change-range event from calendar when same date is selected twice", async () => {
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          modelValue: { from: null, to: null },
+          dateFormat: "Y-m-d",
+          "onUpdate:modelValue": (value: RangeDate) => {
+            component.setProps({ modelValue: value });
+          },
+        },
+      });
+
+      const input = component.findComponent(UInput).find("input");
+
+      await input.trigger("focus");
+
+      const days = component.findAll("[vl-key='day']");
+
+      await days[10].trigger("click");
+      await days[10].trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeTruthy();
+
+      const emittedValues = component.emitted("update:modelValue")!;
+      const lastEmittedValue = emittedValues[emittedValues.length - 1][0] as RangeDate;
+
+      expect(lastEmittedValue.from).not.toBeNull();
+      expect(lastEmittedValue.to).not.toBeNull();
+      expect(lastEmittedValue.from).toBe(lastEmittedValue.to);
+    });
+  });
+
   describe("Exposed Properties", () => {
     it("Exposes wrapper element ref", () => {
       const component = mount(UDatePickerRange, {