vueless 1.4.7 → 1.4.8

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

@@ -44,34 +44,34 @@ export default {
   },
 } as Meta;
 
-const defaultTemplate = `
-  <UCol
-    justify="between"
-    class="h-full"
-  >
-    <URow
-      v-for="(cookie, index) in cookieSettings"
-      :key="cookie.label"
-      justify="between"
-      align="center"
-      block
-    >
-      <UCol gap="2xs">
-        <UHeader
-          :label="cookie.label"
-          class="text-sm"
-        />
-        <UText
-          :label="cookie.description"
-          size="sm"
-          variant="lifted"
-        />
-      </UCol>
-
-      <USwitch v-model="cookieValues[index]" />
-    </URow>
-  </UCol>
-`;
+const defaultTemplate = (isInvertedExpr: string = "false") => {
+  return `
+    <UCol justify="between" block class="h-full">
+      <URow
+        v-for="(cookie, index) in cookieSettings"
+        :key="cookie.label"
+        align="center"
+        block
+        gap="sm"
+      >
+        <UCol gap="2xs" class="min-w-0 flex-1">
+          <UHeader
+            :label="cookie.label"
+            class="text-sm"
+            :class="{ 'text-inverted': ${isInvertedExpr} }"
+          />
+          <UText
+            :label="cookie.description"
+            size="sm"
+            variant="lifted"
+          />
+        </UCol>
+
+        <USwitch v-model="cookieValues[index]" class="shrink-0" />
+      </URow>
+    </UCol>
+  `;
+};
 
 const cookieSettings = ref([
   {
@@ -95,7 +95,7 @@ const DefaultTemplate: StoryFn<UCardArgs> = (args: UCardArgs) => ({
   setup: () => ({ args, slots: getSlotNames(UCard.__name), cookieSettings, cookieValues }),
   template: `
     <UCard v-bind="args" class="max-w-96">
-      ${args.slotTemplate || getSlotsFragment(defaultTemplate)}
+      ${args.slotTemplate || getSlotsFragment(defaultTemplate())}
     </UCard>
   `,
 });
@@ -109,9 +109,10 @@ const EnumTemplate: StoryFn<UCardArgs> = (args: UCardArgs, { argTypes }) => ({
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
+        :config="{ title: option === 'inverted' ? 'text-inverted' : 'text-default' }"
         class="max-w-96"
       >
-        ${defaultTemplate}
+        ${defaultTemplate("option === 'inverted'")}
       </UCard>
     </URow>
   `,
@@ -135,7 +136,7 @@ NoDivided.args = {
     <template #footer-left>
       <UButton size="sm" label="Save" variant="subtle" />
     </template>
-    ${defaultTemplate}
+    ${defaultTemplate()}
   `,
 };
 
@@ -145,7 +146,7 @@ BeforeTitleSlot.args = {
     <template #before-title>
       <UIcon name="cookie" color="success" size="sm" />
     </template>
-    ${defaultTemplate}
+    ${defaultTemplate()}
   `,
 };
 
@@ -155,7 +156,7 @@ TitleSlot.args = {
     <template #title="{ title }">
       <UHeader :label="title" color="primary" />
     </template>
-    ${defaultTemplate}
+    ${defaultTemplate()}
   `,
 };
 
@@ -165,7 +166,7 @@ AfterTitleSlot.args = {
     <template #after-title>
       <UIcon name="cookie" color="success" size="sm" />
     </template>
-    ${defaultTemplate}
+    ${defaultTemplate()}
   `,
 };
 
@@ -175,18 +176,18 @@ ActionsSlot.args = {
   slotTemplate: `
     <template #actions>
       <URow align="center" class="max-w-fit">
-        <ULink label="Learn more" />
-        <UButton size="sm" label="Manage" variant="subtle" />
+        <ULink label="Learn more" size="sm" />
+        <UButton label="Manage" variant="subtle" size="xs" />
       </URow>
     </template>
-    ${defaultTemplate}
+    ${defaultTemplate()}
   `,
 };
 
 export const FooterLeftSlot = DefaultTemplate.bind({});
 FooterLeftSlot.args = {
   slotTemplate: `
-    ${defaultTemplate}
+    ${defaultTemplate()}
     <template #footer-left>
       <UButton size="sm" label="Cancel" variant="outlined" />
     </template>
@@ -196,7 +197,7 @@ FooterLeftSlot.args = {
 export const FooterRightSlot = DefaultTemplate.bind({});
 FooterRightSlot.args = {
   slotTemplate: `
-    ${defaultTemplate}
+    ${defaultTemplate()}
     <template #footer-right>
       <UButton size="sm" label="Save" />
     </template>

package/ui.container-col/config.ts

@@ -13,10 +13,12 @@ export default /*tw*/ {
         true: "w-full",
       },
       grow: {
-        true: "flex-grow",
+        true: "grow",
+        false: "grow-0",
       },
       shrink: {
-        true: "flex-shrink",
+        true: "shrink",
+        false: "shrink-0",
       },
       gap: {
         none: "gap-0",

package/ui.container-col/tests/UCol.test.ts

@@ -141,29 +141,37 @@ describe("UCol.vue", () => {
     });
 
     it("Grow – applies the correct grow class", () => {
-      const grow = true;
-      const expectedClasses = "flex-grow";
+      const growClasses = {
+        true: "grow",
+        false: "grow-0",
+      };
 
-      const component = mount(UCol, {
-        props: {
-          grow,
-        },
-      });
+      Object.entries(growClasses).forEach(([grow, classes]) => {
+        const component = mount(UCol, {
+          props: {
+            grow: grow === "true",
+          },
+        });
 
-      expect(component.attributes("class")).toContain(expectedClasses);
+        expect(component.attributes("class")).toContain(classes);
+      });
     });
 
     it("Shrink – applies the correct shrink class", () => {
-      const shrink = true;
-      const expectedClasses = "flex-shrink";
+      const shrinkClasses = {
+        true: "shrink",
+        false: "shrink-0",
+      };
 
-      const component = mount(UCol, {
-        props: {
-          shrink,
-        },
-      });
+      Object.entries(shrinkClasses).forEach(([shrink, classes]) => {
+        const component = mount(UCol, {
+          props: {
+            shrink: shrink === "true",
+          },
+        });
 
-      expect(component.attributes("class")).toContain(expectedClasses);
+        expect(component.attributes("class")).toContain(classes);
+      });
     });
 
     it("Tag – renders the correct HTML tag", () => {

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

@@ -525,10 +525,10 @@ describe("UDrawer", () => {
       expect(component.emitted("close")).toBeTruthy();
     });
 
-    it("CloseOnOverlay – emits events when overlay is clicked based on prop", () => {
+    it("CloseOnOverlay – emits events when overlay is clicked based on prop", async () => {
       const closeOnOverlay = [true, false];
 
-      closeOnOverlay.forEach(async (value) => {
+      for (const value of closeOnOverlay) {
         const component = mount(UDrawer, {
           props: {
             modelValue,
@@ -541,15 +541,9 @@ describe("UDrawer", () => {
         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("CloseOnOverlay – does not close when mousedown on drawer and mouseup on overlay", async () => {
@@ -573,10 +567,10 @@ describe("UDrawer", () => {
       expect(component.emitted("close")).toBeFalsy();
     });
 
-    it("CloseOnEsc – emits events when escape key is pressed based on prop", () => {
+    it("CloseOnEsc – emits events when escape key is pressed based on prop", async () => {
       const closeOnEsc = [true, false];
 
-      closeOnEsc.forEach(async (value) => {
+      for (const value of closeOnEsc) {
         const component = mount(UDrawer, {
           props: {
             modelValue,
@@ -588,15 +582,9 @@ describe("UDrawer", () => {
 
         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);
+      }
     });
   });
 
@@ -718,13 +706,7 @@ describe("UDrawer", () => {
       const drawerElement = component.find("[vl-key='drawerWrapper']");
       const style = drawerElement.attributes("style");
 
-      // Should contain transform when dragging (if style exists)
-      if (style) {
-        expect(style).toContain("transform");
-      } else {
-        // If no style attribute, that's also valid (transform might be applied via CSS classes)
-        expect(drawerElement.exists()).toBe(true);
-      }
+      expect(style ? style.includes("transform") : drawerElement.exists()).toBe(true);
     });
   });
 

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

@@ -264,7 +264,7 @@ WithoutDivider.args = {
   slotTemplate: `
     ${defaultTemplate}
     <template #footer-left>
-      <UButton label="Back" color="neutral" variant="subtle" />
+      <UButton label="Back" color="neutral" variant="subtle" block />
     </template>`,
 };
 WithoutDivider.parameters = {
@@ -404,7 +404,7 @@ FooterRightSlot.args = {
     </template>
 
     <template #footer-right>
-      <UButton label="Submit" variant="subtle" />
+      <UButton label="Not now" variant="subtle" color="neutral" />
     </template>
   `,
 };

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.container-modal-confirm/storybook/stories.ts

@@ -27,6 +27,10 @@ interface UModalConfirmArgs extends Props {
   modelValues?: UnknownObject;
 }
 
+const confirmModalDocsLayout = {
+  innerWrapper: "w-full max-h-full",
+};
+
 export default {
   id: "5080",
   title: "Containers / Modal Confirm",
@@ -35,6 +39,9 @@ export default {
     title: "Confirm Subscription Upgrade",
     confirmLabel: "Confirm",
     modelValue: true,
+    config: {
+      confirmModal: confirmModalDocsLayout,
+    },
   },
   argTypes: {
     ...getArgTypes(UModalConfirm.__name),
@@ -152,7 +159,14 @@ export const Inner: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs) => ({
       resetBodyOverflow();
     }
 
-    return { args, showMainModal, showInnerModal, openMainModal, openInnerModal };
+    return {
+      args,
+      showMainModal,
+      showInnerModal,
+      openMainModal,
+      openInnerModal,
+      confirmModalDocsLayout,
+    };
   },
   template: `
     <div>
@@ -181,6 +195,7 @@ export const Inner: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs) => ({
           "
           confirm-label="Agree"
           inner
+          :config="{ confirmModal: confirmModalDocsLayout }"
         >
           <UText label="Click Agree to proceed with subscription upgrade." />
         </UModalConfirm>
@@ -291,7 +306,7 @@ AfterTitleSlot.args = {
 
 export const ActionsSlot = DefaultTemplate.bind({});
 ActionsSlot.args = {
-  config: { confirmModal: { closeButton: "p-0" } },
+  config: { confirmModal: { closeButton: "p-0", innerWrapper: "w-full max-h-full" } },
   slotTemplate: `
     <template #actions="{ close }">
       <UButton

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

@@ -35,6 +35,7 @@ export default {
   component: UPage,
   args: {
     title: "Join Our Community",
+    config: { wrapper: "min-h-max", page: "min-h-max" },
   },
   argTypes: {
     ...getArgTypes(UPage.__name),
@@ -142,7 +143,11 @@ const EnumTemplate: StoryFn<UPageArgs> = (args: UPageArgs, { argTypes }) => ({
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
-        :config="{ wrapper: 'min-h-max', page: 'min-h-max mb-4' }"
+        :config="{
+          wrapper: 'min-h-max',
+          page: 'min-h-max mb-4',
+          title: option === 'inverted' ? 'text-inverted' : 'text-default'
+        }"
       >
         ${defaultTemplate}
       </UPage>

package/ui.container-row/config.ts

@@ -13,10 +13,12 @@ export default /*tw*/ {
         true: "w-full",
       },
       grow: {
-        true: "flex-grow",
+        true: "grow",
+        false: "grow-0",
       },
       shrink: {
-        true: "flex-shrink",
+        true: "shrink",
+        false: "shrink-0",
       },
       gap: {
         none: "gap-0",

package/ui.container-row/tests/URow.test.ts

@@ -141,29 +141,37 @@ describe("URow.vue", () => {
     });
 
     it("Grow – applies the correct grow class", () => {
-      const grow = true;
-      const expectedClasses = "flex-grow";
+      const growClasses = {
+        true: "grow",
+        false: "grow-0",
+      };
 
-      const component = mount(URow, {
-        props: {
-          grow,
-        },
-      });
+      Object.entries(growClasses).forEach(([grow, classes]) => {
+        const component = mount(URow, {
+          props: {
+            grow: grow === "true",
+          },
+        });
 
-      expect(component.attributes("class")).toContain(expectedClasses);
+        expect(component.attributes("class")).toContain(classes);
+      });
     });
 
     it("Shrink – applies the correct shrink class", () => {
-      const shrink = true;
-      const expectedClasses = "flex-shrink";
+      const shrinkClasses = {
+        true: "shrink",
+        false: "shrink-0",
+      };
 
-      const component = mount(URow, {
-        props: {
-          shrink,
-        },
-      });
+      Object.entries(shrinkClasses).forEach(([shrink, classes]) => {
+        const component = mount(URow, {
+          props: {
+            shrink: shrink === "true",
+          },
+        });
 
-      expect(component.attributes("class")).toContain(expectedClasses);
+        expect(component.attributes("class")).toContain(classes);
+      });
     });
 
     it("Tag – renders the correct HTML tag", () => {

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.data-table/storybook/stories.ts

@@ -184,7 +184,7 @@ Loading.parameters = {
 
 export const EmptyCellLabel = DefaultTemplate.bind({});
 EmptyCellLabel.args = {
-  emptyCellLabel: "---",
+  emptyCellLabel: "NO DATA",
   rows: [
     {
       id: getRandomId(),

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>