vueless 1.3.1-beta.1 → 1.3.2-beta.0

package/ui.navigation-progress/tests/UProgress.test.ts

@@ -7,10 +7,8 @@ import UStepperProgress from "../UStepperProgress.vue";
 import type { Props } from "../types";
 
 describe("UProgress.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Value prop
-    it("sets the correct value for progress", () => {
+    it("Value – sets the correct value for progress", () => {
       const value = 50;
       const max = 100;
 
@@ -28,8 +26,7 @@ describe("UProgress.vue", () => {
       expect(progressElement.attributes("max")).toBe(max.toString());
     });
 
-    // Max prop (number)
-    it("sets the correct max value for progress", () => {
+    it("Max – sets the correct max value for progress", () => {
       const value = 5;
       const max = 10;
 
@@ -46,8 +43,7 @@ describe("UProgress.vue", () => {
       expect(progressElement.attributes("max")).toBe(max.toString());
     });
 
-    // Max prop (array)
-    it("handles array of steps for max prop", () => {
+    it("Max – handles array of steps for max prop", () => {
       const value = 1;
       const max = ["Step 1", "Step 2", "Step 3"];
 
@@ -65,8 +61,7 @@ describe("UProgress.vue", () => {
       expect(activeStep.text()).toBe(max[value]);
     });
 
-    // Size prop
-    it("applies the correct size class", () => {
+    it("Size – applies the correct size class", () => {
       const size = {
         xs: "h-0.5",
         sm: "h-1",
@@ -91,8 +86,7 @@ describe("UProgress.vue", () => {
       });
     });
 
-    // Color prop
-    it("applies the correct color class", () => {
+    it("Color – applies the correct color class", () => {
       const colors = [
         "primary",
         "secondary",
@@ -121,8 +115,7 @@ describe("UProgress.vue", () => {
       });
     });
 
-    // Variant prop
-    it("renders the correct component based on variant", () => {
+    it("Variant – renders the correct component based on variant", () => {
       const value = 50;
       const max = 100;
       const variants = ["progress", "stepper"];
@@ -146,8 +139,7 @@ describe("UProgress.vue", () => {
       });
     });
 
-    // Indicator prop
-    it("shows indicator when indicator prop is true", () => {
+    it("Indicator – shows indicator when indicator prop is true", () => {
       const value = 50;
       const indicator = true;
 
@@ -169,8 +161,7 @@ describe("UProgress.vue", () => {
       expect(indicatorElement.attributes("style")).toContain(expectedWidth);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const value = 1;
       const dataTest = "test-progress";
 
@@ -186,10 +177,8 @@ describe("UProgress.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Indicator slot
-    it("renders content from indicator slot", () => {
+    it("Indicator – renders content from indicator slot", () => {
       const value = 50;
       const slotContent = "Custom Indicator";
       const slotClass = "indicator-content";
@@ -209,8 +198,7 @@ describe("UProgress.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Step slot
-    it("renders content from step slot", () => {
+    it("Step – renders content from step slot", () => {
       const value = 1;
       const max = ["Step 1", "Step 2", "Step 3"];
       const slotContent = "Custom Step";
@@ -232,10 +220,8 @@ describe("UProgress.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // wrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const value = 50;
 
       const component = mount(UProgress, {

package/ui.navigation-tab/tests/UTab.test.ts

@@ -16,10 +16,8 @@ describe("UTab.vue", () => {
     getUTabsSize: "md",
   };
 
-  // Props tests
   describe("Props", () => {
-    // Label prop
-    it("renders the correct label text", () => {
+    it("Label – renders the correct label text", () => {
       const label = "Tab Item";
 
       const component = mount(UTab, {
@@ -35,8 +33,7 @@ describe("UTab.vue", () => {
       expect(component.text()).toBe(label);
     });
 
-    // Value prop
-    it("uses the provided value for tab identity", async () => {
+    it("Value – uses the provided value for tab identity", async () => {
       const value = "tab1";
       const setUTabsSelectedItem = vi.fn();
 
@@ -57,8 +54,7 @@ describe("UTab.vue", () => {
       expect(setUTabsSelectedItem).toHaveBeenCalledWith(value);
     });
 
-    // Icon prop
-    it("passes icon prop to UButton", () => {
+    it("Icon – passes icon prop to UButton", () => {
       const icon = "home";
 
       const component = mount(UTab, {
@@ -77,8 +73,7 @@ describe("UTab.vue", () => {
       expect(button.props("icon")).toBe(icon);
     });
 
-    // Left Icon prop
-    it("passes leftIcon prop to UButton", () => {
+    it("Left – passes leftIcon prop to UButton", () => {
       const leftIcon = "arrow-left";
 
       const component = mount(UTab, {
@@ -97,8 +92,7 @@ describe("UTab.vue", () => {
       expect(button.props("leftIcon")).toBe(leftIcon);
     });
 
-    // Right Icon prop
-    it("passes rightIcon prop to UButton", () => {
+    it("Right – passes rightIcon prop to UButton", () => {
       const rightIcon = "arrow-right";
 
       const component = mount(UTab, {
@@ -117,8 +111,7 @@ describe("UTab.vue", () => {
       expect(button.props("rightIcon")).toBe(rightIcon);
     });
 
-    // Disabled prop
-    it("passes disabled prop to UButton", () => {
+    it("Disabled – passes disabled prop to UButton", () => {
       const disabled = true;
 
       const component = mount(UTab, {
@@ -137,8 +130,7 @@ describe("UTab.vue", () => {
       expect(button.props("disabled")).toBe(disabled);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-tab";
 
       const component = mount(UTab, {
@@ -158,8 +150,7 @@ describe("UTab.vue", () => {
 
   // Active state tests
   describe("Active state", () => {
-    // Active state
-    it("applies active classes when tab is selected", () => {
+    it("Active – applies active classes when tab is selected", () => {
       const value = "tab1";
       const expectedClass = "border-primary";
 
@@ -181,8 +172,7 @@ describe("UTab.vue", () => {
       expect(button.attributes("class")).toContain(expectedClass);
     });
 
-    // Inactive state
-    it("applies inactive classes when tab is not selected", () => {
+    it("Inactive – applies inactive classes when tab is not selected", () => {
       const value = "tab1";
       const expectedClass = "border-transparent";
       const nonExpectedClass = "border-primary";
@@ -206,8 +196,7 @@ describe("UTab.vue", () => {
       expect(button.attributes("class")).not.toContain(nonExpectedClass);
     });
 
-    // Disabled does not activate
-    it("does not call setUTabsSelectedItem when disabled", async () => {
+    it("Disabled – does not call setUTabsSelectedItem when disabled", async () => {
       const disabled = true;
       const setUTabsSelectedItem = vi.fn();
 
@@ -232,8 +221,7 @@ describe("UTab.vue", () => {
 
   // Injected props tests
   describe("Injected props", () => {
-    // Size prop from UTabs
-    it("uses the size from UTabs provider", () => {
+    it("Size – uses the size from UTabs provider", () => {
       const size = "lg";
 
       const component = mount(UTab, {
@@ -254,8 +242,7 @@ describe("UTab.vue", () => {
       expect(button.props("size")).toBe(size);
     });
 
-    // Block prop from UTabs
-    it("uses the block prop from UTabs provider", () => {
+    it("Block – uses the block prop from UTabs provider", () => {
       const block = true;
 
       const component = mount(UTab, {
@@ -276,8 +263,7 @@ describe("UTab.vue", () => {
       expect(button.props("block")).toBe(block);
     });
 
-    // Square prop from UTabs
-    it("uses the square prop from UTabs provider", () => {
+    it("Square – uses the square prop from UTabs provider", () => {
       const square = true;
 
       const component = mount(UTab, {
@@ -298,8 +284,7 @@ describe("UTab.vue", () => {
       expect(button.props("square")).toBe(square);
     });
 
-    // Scrollable prop from UTabs
-    it("applies correct classes based on scrollable prop from UTabs", () => {
+    it("Scrollable – applies correct classes based on scrollable prop from UTabs", () => {
       const scrollable = false;
       const expectedClasses = "-mb-px";
 
@@ -322,10 +307,8 @@ describe("UTab.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Left slot
-    it("renders content from left slot", () => {
+    it("Left – renders content from left slot", () => {
       const label = "Tab Item";
       const slotText = "Left";
       const slotClass = "left-content";
@@ -348,8 +331,7 @@ describe("UTab.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Label slot
-    it("renders content from label slot", () => {
+    it("Label – renders content from label slot", () => {
       const label = "Tab Item";
       const slotText = "Custom Label";
       const slotClass = "label-content";
@@ -372,8 +354,7 @@ describe("UTab.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Right slot
-    it("renders content from right slot", () => {
+    it("Right – renders content from right slot", () => {
       const label = "Tab Item";
       const slotText = "Right";
       const slotClass = "right-content";
@@ -396,8 +377,7 @@ describe("UTab.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Slot binding - active state
-    it("passes active state to slots", () => {
+    it("Slot – passes active state to slots", () => {
       const value = "tab1";
 
       const component = mount(UTab, {
@@ -419,8 +399,7 @@ describe("UTab.vue", () => {
       expect(component.find('[data-active="true"]').exists()).toBe(true);
     });
 
-    // Slot binding - icon-name
-    it("passes icon-name to slots", () => {
+    it("Slot – passes icon-name to slots", () => {
       const leftIcon = "home";
 
       const component = mount(UTab, {
@@ -441,10 +420,8 @@ describe("UTab.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Click event
-    it("calls setUTabsSelectedItem when clicked", async () => {
+    it("Click – calls setUTabsSelectedItem when clicked", async () => {
       const value = "tab1";
       const setUTabsSelectedItem = vi.fn();
 
@@ -466,10 +443,8 @@ describe("UTab.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // button ref
-    it("exposes button ref", () => {
+    it("button – exposes button ref", () => {
       const component = mount(UTab, {
         props: {
           label: "Tab Item",

package/ui.navigation-tabs/tests/UTabs.test.ts

@@ -15,10 +15,8 @@ describe("UTabs.vue", () => {
     { value: "tab3", label: "Tab 3" },
   ];
 
-  // Props tests
   describe("Props", () => {
-    // ModelValue prop
-    it("correctly sets the selected tab", () => {
+    it("ModelValue – correctly sets the selected tab", () => {
       const modelValue = "tab2";
       const expectedActiveClass = "border-primary";
 
@@ -41,8 +39,7 @@ describe("UTabs.vue", () => {
       expect(activeTab.classes()).toContain(expectedActiveClass);
     });
 
-    // Options prop
-    it("renders the correct number of tabs from options", () => {
+    it("Options – renders the correct number of tabs from options", () => {
       const component = mount(UTabs, {
         props: {
           options,
@@ -61,8 +58,7 @@ describe("UTabs.vue", () => {
       });
     });
 
-    // Size prop
-    it("applies the correct size to tabs", () => {
+    it("Size – applies the correct size to tabs", () => {
       const sizes = ["2xs", "xs", "sm", "md", "lg", "xl"];
 
       sizes.forEach((size) => {
@@ -84,8 +80,7 @@ describe("UTabs.vue", () => {
       });
     });
 
-    // Scrollable prop
-    it("applies scrollable class when scrollable prop is true", () => {
+    it("Scrollable – applies scrollable class when scrollable prop is true", () => {
       const scrollable = true;
 
       const component = mount(UTabs, {
@@ -102,8 +97,7 @@ describe("UTabs.vue", () => {
       expect(tabsContainer.classes()).toContain("scroll-smooth");
     });
 
-    // Scroll buttons
-    it("shows scroll buttons when scrollable and content overflows", async () => {
+    it("Scroll – shows scroll buttons when scrollable and content overflows", async () => {
       const manyOptions: UTabsOption[] = Array.from({ length: 10 }, (_, i) => ({
         value: `tab${i}`,
         label: `Tab ${i}`,
@@ -140,8 +134,7 @@ describe("UTabs.vue", () => {
       expect(nextButton).toBeDefined();
     });
 
-    // Block prop
-    it("provides block value to tabs", () => {
+    it("Block – provides block value to tabs", () => {
       const block = true;
 
       const component = mount(UTabs, {
@@ -161,8 +154,7 @@ describe("UTabs.vue", () => {
       expect(button.props("block")).toBe(block);
     });
 
-    // Square prop
-    it("provides square value to tabs", () => {
+    it("Square – provides square value to tabs", () => {
       const square = true;
 
       const component = mount(UTabs, {
@@ -182,8 +174,7 @@ describe("UTabs.vue", () => {
       expect(button.props("square")).toBe(square);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-tabs";
       const singleOption = [options[0]];
 
@@ -207,10 +198,8 @@ describe("UTabs.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Default slot
-    it("renders content from default slot", () => {
+    it("Default – renders content from default slot", () => {
       const slotContent = "Custom Tabs";
       const slotClass = "custom-tabs";
 
@@ -224,8 +213,7 @@ describe("UTabs.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Prev slot
-    it("renders content from prev slot when scrollable", async () => {
+    it("Prev – renders content from prev slot when scrollable", async () => {
       const slotContent = "Prev";
       const slotClass = "prev-content";
       const dataTest = "test-tabs";
@@ -261,8 +249,7 @@ describe("UTabs.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Next slot
-    it("renders content from next slot when scrollable", async () => {
+    it("Next – renders content from next slot when scrollable", async () => {
       const slotContent = "Next";
       const slotClass = "next-content";
       const dataTest = "test-tabs";
@@ -299,10 +286,8 @@ describe("UTabs.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Update:modelValue event
-    it("emits update:modelValue event when tab is clicked", async () => {
+    it("Update:modelValue – emits update:modelValue event when tab is clicked", async () => {
       const component = mount(UTabs, {
         props: {
           options,
@@ -321,10 +306,8 @@ describe("UTabs.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // wrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const singleOption = [options[0]];
 
       const component = mount(UTabs, {

package/ui.other-chip/tests/UChip.test.ts

@@ -8,10 +8,8 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import type { Props } from "../types";
 
 describe("UChip.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Icon prop
-    it("renders UIcon when icon prop is provided", () => {
+    it("Icon – renders UIcon when icon prop is provided", () => {
       const icon = "close";
 
       const component = mount(UChip, {
@@ -28,8 +26,7 @@ describe("UChip.vue", () => {
       expect(nestedUDotComponents.length).toBe(0);
     });
 
-    // Default to UDot when no icon
-    it("renders UDot when no icon prop is provided", () => {
+    it("Default – renders UDot when no icon prop is provided", () => {
       const component = mount(UChip, {});
 
       const nestedUIconComponents = component.findAllComponents(UIcon);
@@ -39,8 +36,7 @@ describe("UChip.vue", () => {
       expect(nestedUDotComponents.length).toBe(1);
     });
 
-    // Color prop for UDot component
-    it("applies the correct color class to UDot component", async () => {
+    it("Color – applies the correct color class to UDot component", async () => {
       const colors = [
         "primary",
         "secondary",
@@ -68,8 +64,7 @@ describe("UChip.vue", () => {
       });
     });
 
-    // Color prop for UIcon component
-    it("applies the correct color class to UIcon component", async () => {
+    it("Color – applies the correct color class to UIcon component", async () => {
       const colors = [
         "primary",
         "secondary",
@@ -98,8 +93,7 @@ describe("UChip.vue", () => {
       });
     });
 
-    // Size prop
-    it("applies the correct size class", async () => {
+    it("Size – applies the correct size class", async () => {
       const sizes = ["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl"];
 
       sizes.forEach((size) => {
@@ -115,8 +109,7 @@ describe("UChip.vue", () => {
       });
     });
 
-    // xPosition prop
-    it("applies the correct xPosition class", async () => {
+    it("X Position – applies the correct xPosition class", async () => {
       const xPositions = {
         left: "left-px",
         right: "right-px",
@@ -135,8 +128,7 @@ describe("UChip.vue", () => {
       });
     });
 
-    // yPosition prop
-    it("applies the correct yPosition class", async () => {
+    it("Y Position – applies the correct yPosition class", async () => {
       const yPositions = {
         top: "top-px",
         bottom: "bottom-px",
@@ -155,8 +147,7 @@ describe("UChip.vue", () => {
       });
     });
 
-    // Inset prop - when false
-    it("applies transform classes when inset prop is false", async () => {
+    it("Inset – applies transform classes when inset prop is false", async () => {
       const inset = false;
       const yPosition = "top";
       const xPosition = "right";
@@ -175,8 +166,7 @@ describe("UChip.vue", () => {
       expect(chipWrapper.attributes("class")).toContain("translate-x-1/2");
     });
 
-    // Inset prop - when true
-    it("does not apply transform classes when inset prop is true", async () => {
+    it("Inset – does not apply transform classes when inset prop is true", async () => {
       const inset = true;
       const yPosition = "top";
       const xPosition = "right";
@@ -195,8 +185,7 @@ describe("UChip.vue", () => {
       expect(chipWrapper.attributes("class")).not.toContain("translate-x-1/2");
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-chip";
 
       const component = mount(UChip, {
@@ -209,10 +198,8 @@ describe("UChip.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Default slot
-    it("renders content from default slot", () => {
+    it("Default – renders content from default slot", () => {
       const slotContent = "Custom Content";
 
       const component = mount(UChip, {
@@ -224,8 +211,7 @@ describe("UChip.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Chip slot
-    it("renders content from chip slot", () => {
+    it("Chip – renders content from chip slot", () => {
       const slotText = "Custom Chip";
       const slotClass = "custom-chip";
 
@@ -242,10 +228,8 @@ describe("UChip.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // wrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const component = mount(UChip, {});
 
       expect(component.vm.wrapperRef).toBeDefined();

package/ui.other-dot/tests/UDot.test.ts

@@ -7,10 +7,8 @@ import type { Props } from "../types";
 import type { ComponentPublicInstance } from "vue";
 
 describe("UDot.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Size prop
-    it("applies the correct size class", () => {
+    it("Size – applies the correct size class", () => {
       const sizes = {
         xs: "size-1",
         sm: "size-1.5",
@@ -30,8 +28,7 @@ describe("UDot.vue", () => {
       });
     });
 
-    // Color prop
-    it("applies the correct color class", () => {
+    it("Color – applies the correct color class", () => {
       const colors = [
         "primary",
         "secondary",
@@ -55,8 +52,7 @@ describe("UDot.vue", () => {
       });
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-dot";
 
       const component = mount(UDot, {
@@ -69,10 +65,8 @@ describe("UDot.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // dotRef
-    it("exposes dotRef", () => {
+    it("dotRef – exposes dotRef", () => {
       const component = mount(UDot);
 
       expect(