vueless 1.4.7-beta.1 → 1.4.7-beta.3

package/ui.container-modal/tests/UModal.test.ts

@@ -578,10 +578,10 @@ describe("UModal", () => {
     });
 
     // CloseOnOverlay events
-    it("emits events when overlay is clicked based on closeOnOverlay prop", () => {
+    it("emits events when overlay is clicked based on closeOnOverlay prop", async () => {
       const closeOnOverlay = [true, false];
 
-      closeOnOverlay.forEach(async (value) => {
+      for (const value of closeOnOverlay) {
         const component = mount(UModal, {
           props: {
             modelValue,
@@ -594,15 +594,9 @@ describe("UModal", () => {
         await innerWrapper.trigger("mousedown");
         await innerWrapper.trigger("click");
 
-        if (value) {
-          expect(component.emitted("update:modelValue")).toBeTruthy();
-          expect(component.emitted("update:modelValue")?.[0]).toEqual([false]);
-          expect(component.emitted("close")).toBeTruthy();
-        } else {
-          expect(component.emitted("update:modelValue")).toBeFalsy();
-          expect(component.emitted("close")).toBeFalsy();
-        }
-      });
+        expect(component.emitted("update:modelValue")).toEqual(value ? [[false]] : undefined);
+        expect(Boolean(component.emitted("close")?.length)).toBe(value);
+      }
     });
 
     it("does not close when mousedown on modal and mouseup on overlay", async () => {
@@ -627,10 +621,10 @@ describe("UModal", () => {
     });
 
     // CloseOnEsc events
-    it("emits events when escape key is pressed based on closeOnEsc prop", () => {
+    it("emits events when escape key is pressed based on closeOnEsc prop", async () => {
       const closeOnEsc = [true, false];
 
-      closeOnEsc.forEach(async (value) => {
+      for (const value of closeOnEsc) {
         const component = mount(UModal, {
           props: {
             modelValue,
@@ -642,15 +636,9 @@ describe("UModal", () => {
 
         await wrapper.trigger("keydown", { key: "Escape" });
 
-        if (value) {
-          expect(component.emitted("update:modelValue")).toBeTruthy();
-          expect(component.emitted("update:modelValue")?.[0]).toEqual([false]);
-          expect(component.emitted("close")).toBeTruthy();
-        } else {
-          expect(component.emitted("update:modelValue")).toBeFalsy();
-          expect(component.emitted("close")).toBeFalsy();
-        }
-      });
+        expect(component.emitted("update:modelValue")).toEqual(value ? [[false]] : undefined);
+        expect(Boolean(component.emitted("close")?.length)).toBe(value);
+      }
     });
   });
 

package/ui.data-table/UTableRow.vue

@@ -284,8 +284,8 @@ function resolveSlotContent(slot: Slot | undefined, slotParams: Record<string, u
 function shouldRenderCellWrapper(row: Row, key: string): boolean {
   return Boolean(
     props.textEllipsis ||
-      (props.search && isCellSearchMatch(key)) ||
-      getCellContentClass(row, String(key)),
+    (props.search && isCellSearchMatch(key)) ||
+    getCellContentClass(row, String(key)),
   );
 }
 

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

@@ -62,6 +62,15 @@ describe("UCalendar.vue", () => {
     it("View – sets the correct view variant", () => {
       const viewCases = [View.Day, View.Month, View.Year];
 
+      const viewExpectations: Record<
+        (typeof viewCases)[number],
+        { day: boolean; month: boolean; year: boolean }
+      > = {
+        [View.Day]: { day: true, month: false, year: false },
+        [View.Month]: { day: false, month: true, year: false },
+        [View.Year]: { day: false, month: false, year: true },
+      };
+
       viewCases.forEach((view) => {
         const component = mount(UCalendar, {
           props: {
@@ -70,19 +79,11 @@ describe("UCalendar.vue", () => {
           },
         });
 
-        if (view === View.Day) {
-          expect(component.findComponent(DayView).exists()).toBe(true);
-          expect(component.findComponent(MonthView).exists()).toBe(false);
-          expect(component.findComponent(YearView).exists()).toBe(false);
-        } else if (view === View.Month) {
-          expect(component.findComponent(DayView).exists()).toBe(false);
-          expect(component.findComponent(MonthView).exists()).toBe(true);
-          expect(component.findComponent(YearView).exists()).toBe(false);
-        } else if (view === View.Year) {
-          expect(component.findComponent(DayView).exists()).toBe(false);
-          expect(component.findComponent(MonthView).exists()).toBe(false);
-          expect(component.findComponent(YearView).exists()).toBe(true);
-        }
+        const expected = viewExpectations[view];
+
+        expect(component.findComponent(DayView).exists()).toBe(expected.day);
+        expect(component.findComponent(MonthView).exists()).toBe(expected.month);
+        expect(component.findComponent(YearView).exists()).toBe(expected.year);
       });
     });
 

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

@@ -332,13 +332,12 @@ describe("UCalendarDayView.vue", () => {
       const dayButtons = component.findAll("button");
       const targetDay = dayButtons.find((button) => button.text() === "15");
 
-      if (targetDay) {
-        await targetDay.trigger("mouseover");
+      expect(targetDay, "day 15 should exist in the grid").toBeTruthy();
+      await targetDay!.trigger("mouseover");
 
-        const lastRangePreview = component.find('[vl-key="lastDayInRange"]');
+      const lastRangePreview = component.find('[vl-key="lastDayInRange"]');
 
-        expect(lastRangePreview.exists()).toBe(true);
-      }
+      expect(lastRangePreview.exists()).toBe(true);
     });
 
     it("applies another month range preview classes when hovering over another month day", async () => {
@@ -354,13 +353,14 @@ describe("UCalendarDayView.vue", () => {
 
       const anotherMonthDays = component.findAll('[vl-key="anotherMonthDay"]');
 
-      if (anotherMonthDays.length > 0) {
-        await anotherMonthDays[0].trigger("mouseover");
+      expect(anotherMonthDays.length, "need another-month cells for hover preview").toBeGreaterThan(
+        0,
+      );
+      await anotherMonthDays[0].trigger("mouseover");
 
-        const anotherMonthPreview = component.findAll('[vl-key="anotherMonthDayInRange"]');
+      const anotherMonthPreview = component.findAll('[vl-key="anotherMonthDayInRange"]');
 
-        expect(anotherMonthPreview.length).toBeGreaterThanOrEqual(0);
-      }
+      expect(anotherMonthPreview.length).toBeGreaterThanOrEqual(0);
     });
 
     it("clears range preview when mouse leaves day view", async () => {
@@ -376,14 +376,13 @@ describe("UCalendarDayView.vue", () => {
       const dayButtons = component.findAll("button");
       const targetDay = dayButtons.find((button) => button.text() === "15");
 
-      if (targetDay) {
-        await targetDay.trigger("mouseover");
-        await component.trigger("mouseleave");
+      expect(targetDay, "day 15 should exist in the grid").toBeTruthy();
+      await targetDay!.trigger("mouseover");
+      await component.trigger("mouseleave");
 
-        const lastRangePreview = component.find('[vl-key="lastDayInRange"]');
+      const lastRangePreview = component.find('[vl-key="lastDayInRange"]');
 
-        expect(lastRangePreview.exists()).toBe(false);
-      }
+      expect(lastRangePreview.exists()).toBe(false);
     });
   });
 

package/ui.form-checkbox/UCheckbox.vue

@@ -211,10 +211,5 @@ const {
 
       <UIcon v-else :name="config.defaults.checkedIcon" color="inherit" v-bind="checkedIconAttrs" />
     </label>
-
-    <template #bottom>
-      <!-- @slot Use it to add something below the checkbox. -->
-      <slot name="bottom" />
-    </template>
   </ULabel>
 </template>

package/ui.form-checkbox/storybook/stories.ts

@@ -17,6 +17,7 @@ import UChip from "../../ui.other-chip/UChip.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
+import { ref } from "vue";
 
 interface UCheckboxArgs extends Props {
   slotTemplate?: string;
@@ -142,23 +143,60 @@ Partial.parameters = {
   },
 };
 
-export const LabelSlot = DefaultTemplate.bind({});
-LabelSlot.args = {
-  slotTemplate: `
-    <template #label>
-      <URow gap="2xs" align="center">
-        <UText>I agree to the <ULink label="Privacy Policy" /></UText>
-        <UIcon name="contract" size="xs" />
-      </URow>
-    </template>
-  `,
-};
+export const Slots: StoryFn<UCheckboxArgs> = (args) => ({
+  components: { UCheckbox, UCol, UText, URow, ULink, UIcon },
+  setup: () => ({
+    args,
+    labelSlotValue: ref(false),
+    descriptionSlotValue: ref(false),
+    errorSlotValue: ref(false),
+  }),
+  template: `
+    <UCol gap="3xl">
+      <UCheckbox v-bind="args" v-model="labelSlotValue">
+        <template #label>
+          <URow gap="2xs" align="center">
+            <UText>I agree to the Privacy Policy</UText>
+            <UIcon name="contract" size="xs" />
+          </URow>
+        </template>
+      </UCheckbox>
+
+      <UCheckbox
+        v-bind="args"
+        v-model="descriptionSlotValue"
+        label="Email me product updates"
+      >
+        <template #description>
+          <URow align="center" gap="2xs" class="text-neutral">
+            <UIcon name="mail" size="xs" class="mt-0.5" color="primary" />
+            <UText size="sm">
+              Unsubscribe anytime.
+              <ULink label="Privacy policy" underlined size="sm" />.
+            </UText>
+          </URow>
+        </template>
+      </UCheckbox>
 
-export const BottomSlot = DefaultTemplate.bind({});
-BottomSlot.args = {
-  slotTemplate: `
-    <template #bottom>
-      <ULink label="Learn more" size="sm" class="mr-1.5" />
-    </template>
+      <UCheckbox
+        v-bind="args"
+        v-model="errorSlotValue"
+        label="Accept terms"
+        :error="true"
+      >
+        <template #error>
+          <URow align="center" gap="2xs">
+            <UIcon name="error" size="xs" color="error" />
+            <UText size="sm" color="error">
+              <ul>
+                <li>You must accept the terms to continue</li>
+                <li>This checkbox is required for registration</li>
+                <li>Clear the error by checking the box above</li>
+              </ul>
+            </UText>
+          </URow>
+        </template>
+      </UCheckbox>
+    </UCol>
   `,
-};
+});

package/ui.form-checkbox/tests/UCheckbox.test.ts

@@ -319,23 +319,6 @@ describe("UCheckbox.vue", () => {
 
       expect(errorElement.text()).toBe(customError);
     });
-
-    it("Bottom – renders custom content from bottom slot", () => {
-      const customBottomContent = "Custom Bottom Content";
-
-      const component = mount(UCheckbox, {
-        props: {
-          label: "Test Label",
-        },
-        slots: {
-          bottom: customBottomContent,
-        },
-      });
-
-      const labelComponent = component.getComponent(ULabel);
-
-      expect(labelComponent.text()).toContain(customBottomContent);
-    });
   });
 
   describe("Events", () => {

package/ui.form-checkbox-group/storybook/stories.ts

@@ -189,3 +189,64 @@ CustomKeys.parameters = {
     },
   },
 };
+
+export const Slots: StoryFn<UCheckboxGroupArgs> = (args) => ({
+  components: { UCheckboxGroup, UCol, UText, URow, ULink, UIcon },
+  setup: () => ({
+    args,
+    modelValueLabel: ref(""),
+    modelValueDescription: ref(""),
+    modelValueError: ref(""),
+  }),
+  template: `
+    <UCol gap="3xl">
+      <UCheckboxGroup
+        v-bind="args"
+        v-model="modelValueLabel"
+        name="LabelSlot"
+      >
+        <template #label>
+          <URow align="center" gap="2xs">
+            <UText>Choose how we notify you</UText>
+            <UIcon name="notifications" size="xs" color="neutral" />
+          </URow>
+        </template>
+      </UCheckboxGroup>
+
+      <UCheckboxGroup
+        v-bind="args"
+        v-model="modelValueDescription"
+        name="SlotsDescription"
+        label="Notification channels"
+      >
+        <template #description>
+          <URow align="center" gap="2xs" class="text-neutral">
+            <UIcon name="notifications" size="xs" color="primary" />
+            <UText size="sm">
+              You can change this later.
+              <ULink label="Notification settings" underlined size="sm" />.
+            </UText>
+          </URow>
+        </template>
+      </UCheckboxGroup>
+
+      <UCheckboxGroup
+        v-bind="args"
+        v-model="modelValueError"
+        name="SlotsError"
+        label="Select options"
+        :error="true"
+      >
+        <template #error>
+          <UText size="sm" color="error">
+            <ul>
+              <li>Invalid selection</li>
+              <li>At least one channel is required</li>
+              <li>Choose at least one option before submitting</li>
+            </ul>
+          </UText>
+        </template>
+      </UCheckboxGroup>
+    </UCol>
+  `,
+});

package/ui.form-date-picker/storybook/stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import { ref } from "vue";
 import {
   getArgs,
   getArgTypes,
@@ -13,6 +14,7 @@ import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import { COMPONENT_NAME } from "../constants";
 
@@ -364,43 +366,89 @@ export const IconProps: StoryFn<DefaultUDatePickerArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<DefaultUDatePickerArgs> = (args) => ({
-  components: { UDatePicker, URow, UButton },
-  setup: () => ({ args }),
+  components: { UDatePicker, URow, UCol, UButton, UText, ULink, UIcon },
+  setup: () => ({
+    args,
+    descriptionSlotValue: ref(dateValue),
+    errorSlotValue: ref<Date | null>(null),
+  }),
   template: `
-    <URow align="stretch">
-      <UDatePicker
-        v-bind="args"
-        v-model="args.leftModel"
-        class="w-full"
-        :config="{ datepickerInput: { wrapper: 'pl-0' } }"
-      >
-        <template #left>
-          <UButton
-            label="Today"
-            size="sm"
-            variant="soft"
-            class="h-full rounded-r-none"
-            @click="args.leftModel = new Date()"
-          />
-        </template>
-      </UDatePicker>
-
-      <UDatePicker
-        v-bind="args"
-        v-model="args.modelValue"
-        class="w-full"
-        :config="{ datepickerInput: { wrapper: 'pr-0' } }"
-      >
-        <template #right>
-          <UButton
-            label="Clear"
-            size="sm"
-            variant="ghost"
-            class="h-full rounded-l-none"
-            @click="args.modelValue = null"
-          />
-        </template>
-      </UDatePicker>
-    </URow>
+    <UCol gap="3xl">
+      <URow block>
+        <UDatePicker
+          v-bind="args"
+          v-model="args.leftModel"
+          class="w-full"
+          :config="{ datepickerInput: { wrapper: 'pl-0' } }"
+        >
+          <template #left>
+            <UButton
+              label="Today"
+              size="sm"
+              variant="soft"
+              class="h-full rounded-r-none"
+              @click="args.leftModel = new Date()"
+            />
+          </template>
+        </UDatePicker>
+
+        <UDatePicker
+          v-bind="args"
+          v-model="args.modelValue"
+          class="w-full"
+          :config="{ datepickerInput: { wrapper: 'pr-0' } }"
+        >
+          <template #right>
+            <UButton
+              label="Clear"
+              size="sm"
+              variant="ghost"
+              class="h-full rounded-l-none"
+              @click="args.modelValue = null"
+            />
+          </template>
+        </UDatePicker>
+      </URow>
+
+      <URow block>
+        <UDatePicker
+          v-bind="args"
+          v-model="descriptionSlotValue"
+          label="Event date"
+          class="w-full"
+        >
+          <template #description>
+            <URow align="center" gap="2xs" class="text-neutral">
+              <UIcon name="event" size="xs" color="primary" />
+              <UText size="sm">
+                Uses your local timezone.
+                <ULink label="Date policy" underlined size="sm" />.
+              </UText>
+            </URow>
+          </template>
+        </UDatePicker>
+
+        <UDatePicker
+          v-bind="args"
+          v-model="errorSlotValue"
+          label="Due date"
+          :error="true"
+          class="w-full"
+        >
+          <template #error>
+            <URow align="center" gap="2xs">
+              <UIcon name="error" size="xs" color="error" />
+              <UText size="sm" color="error">
+                <ul>
+                  <li>The selected date is not available</li>
+                  <li>Pick a day within the allowed range</li>
+                  <li>Weekends and holidays are excluded</li>
+                </ul>
+              </UText>
+            </URow>
+          </template>
+        </UDatePicker>
+      </URow>
+    </UCol>
   `,
 });

package/ui.form-date-picker-range/storybook/stories.ts

@@ -15,6 +15,7 @@ import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import { addDays } from "../../ui.form-calendar/utilDate";
 
@@ -296,44 +297,102 @@ export const IconProps: StoryFn<DefaultUDatePickerRangeArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<DefaultUDatePickerRangeArgs> = (args) => ({
-  components: { UDatePickerRange, URow, UButton },
-  setup: () => ({ args, fromDate, toDate, leftModel: ref({ from: null, to: null }) }),
+  components: { UDatePickerRange, URow, UCol, UButton, UText, ULink, UIcon },
+  setup: () => ({
+    args,
+    fromDate,
+    toDate,
+    leftModel: ref({ from: null, to: null }),
+    descriptionSlotValue: ref({ from: fromDate, to: toDate }),
+    errorSlotValue: ref({ from: null, to: null }),
+  }),
   template: `
-    <URow align="stretch">
-      <UDatePickerRange
-        label="Select date range"
-        v-model="leftModel"
-        variant="input"
-        class="w-full"
-        :config="{ datepickerInput: { wrapper: 'pl-0' } }"
-      >
-        <template #left>
-          <UButton
-            label="2 weeks"
-            size="sm"
-            variant="soft"
-            class="h-full rounded-r-none"
-            @click="leftModel = { from: fromDate, to: toDate }"
-          />
-        </template>
-      </UDatePickerRange>
-      <UDatePickerRange
-        label="Select date range"
-        v-model="args.modelValue"
-        variant="input"
-        class="w-full"
-        :config="{ datepickerInput: { wrapper: 'pr-0' } }"
-      >
-        <template #right>
-          <UButton
-            label="Clear"
-            size="sm"
-            variant="ghost"
-            class="h-full rounded-l-none"
-            @click="args.modelValue = { from: null, to: null }"
-          />
-        </template>
-      </UDatePickerRange>
-    </URow>
+    <UCol gap="3xl">
+      <URow block>
+        <UDatePickerRange
+          label="Select date range"
+          v-model="leftModel"
+          variant="input"
+          class="w-full"
+          :config="{ datepickerInput: { wrapper: 'pl-0' } }"
+        >
+          <template #left>
+            <UButton
+              label="2 weeks"
+              size="sm"
+              variant="soft"
+              class="h-full rounded-r-none"
+              @click="leftModel = { from: fromDate, to: toDate }"
+            />
+          </template>
+        </UDatePickerRange>
+        <UDatePickerRange
+          label="Select date range"
+          v-model="args.modelValue"
+          variant="input"
+          class="w-full"
+          :config="{ datepickerInput: { wrapper: 'pr-0' } }"
+        >
+          <template #right>
+            <UButton
+              label="Clear"
+              size="sm"
+              variant="ghost"
+              class="h-full rounded-l-none"
+              @click="args.modelValue = { from: null, to: null }"
+            />
+          </template>
+        </UDatePickerRange>
+      </URow>
+
+      <URow block>
+        <UDatePickerRange
+          v-bind="args"
+          v-model="descriptionSlotValue"
+          variant="input"
+          label="Report period"
+          class="w-full"
+        >
+          <template #description>
+            <URow align="center" gap="2xs" class="text-neutral">
+              <UIcon name="date_range" size="xs" color="primary" />
+              <UText size="sm">
+                Inclusive of start and end.
+                <ULink label="Fiscal calendar" underlined size="sm" />.
+              </UText>
+            </URow>
+          </template>
+        </UDatePickerRange>
+
+        <UDatePickerRange
+          v-bind="args"
+          v-model="errorSlotValue"
+          variant="input"
+          label="Stay dates"
+          :error="true"
+          class="w-full"
+        >
+          <template #error>
+            <URow align="center" gap="2xs">
+              <UIcon name="error" size="xs" color="error" />
+              <UText size="sm" color="error">
+                <ul>
+                  <li>End date must be after the start date</li>
+                  <li>Range cannot span more than 30 days</li>
+                  <li>Select both dates from the calendar</li>
+                </ul>
+              </UText>
+            </URow>
+          </template>
+        </UDatePickerRange>
+      </URow>
+    </UCol>
   `,
 });
+Slots.parameters = {
+  docs: {
+    story: {
+      height: "700px",
+    },
+  },
+};