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

package/ui.loader/tests/ULoader.test.ts

@@ -2,14 +2,13 @@ import { mount } from "@vue/test-utils";
 import { describe, it, expect } from "vitest";
 
 import ULoader from "../ULoader.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Props } from "../types";
 
 describe("ULoader.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Loading prop - true
-    it("shows loader when loading prop is true", () => {
+    it("Loading – shows loader when loading prop is true", () => {
       const loading = true;
 
       const component = mount(ULoader, {
@@ -21,8 +20,7 @@ describe("ULoader.vue", () => {
       expect(component.find("[vl-key='loader']").exists()).toBe(true);
     });
 
-    // Loading prop - false
-    it("hides loader when loading prop is false", () => {
+    it("Loading – hides loader when loading prop is false", () => {
       const loading = false;
 
       const component = mount(ULoader, {
@@ -34,8 +32,7 @@ describe("ULoader.vue", () => {
       expect(component.find("[vl-key='loader']").exists()).toBe(false);
     });
 
-    // Color prop
-    it("applies the correct color to the loader", () => {
+    it("Color – applies the correct color to the loader", () => {
       const colors = [
         "primary",
         "secondary",
@@ -68,8 +65,7 @@ describe("ULoader.vue", () => {
       });
     });
 
-    // Size prop
-    it("applies the correct size to the loader", () => {
+    it("Size – applies the correct size to the loader", () => {
       const sizeVariants = {
         sm: "vueless-loader-ellipse-sm",
         md: "vueless-loader-ellipse-md",
@@ -93,8 +89,73 @@ describe("ULoader.vue", () => {
       });
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("Variant – renders dots variant by default", () => {
+      const component = mount(ULoader, {
+        props: {
+          loading: true,
+        },
+      });
+
+      expect(component.findAll("[vl-key='ellipse']").length).toBe(4);
+      expect(component.findComponent(UIcon).exists()).toBe(false);
+    });
+
+    it("Variant – renders spinner variant when variant prop is 'spinner'", () => {
+      const component = mount(ULoader, {
+        props: {
+          loading: true,
+          variant: "spinner",
+        },
+      });
+
+      expect(component.findComponent(UIcon).exists()).toBe(true);
+      expect(component.findAll("[vl-key='ellipse']").length).toBe(0);
+    });
+
+    it("Variant – applies color to spinner variant", () => {
+      const component = mount(ULoader, {
+        props: {
+          loading: true,
+          variant: "spinner",
+          color: "error",
+        },
+      });
+
+      expect(component.findComponent(UIcon).props("color")).toBe("error");
+    });
+
+    it("Variant – applies correct size to spinner variant", () => {
+      const sizeVariants = {
+        sm: "sm",
+        md: "md",
+        lg: "lg",
+      };
+
+      Object.entries(sizeVariants).forEach(([size, iconSize]) => {
+        const component = mount(ULoader, {
+          props: {
+            loading: true,
+            variant: "spinner",
+            size: size as Props["size"],
+          },
+        });
+
+        expect(component.findComponent(UIcon).props("size")).toBe(iconSize);
+      });
+    });
+
+    it("Variant – renders spinner variant with correct icon name", () => {
+      const component = mount(ULoader, {
+        props: {
+          loading: true,
+          variant: "spinner",
+        },
+      });
+
+      expect(component.findComponent(UIcon).exists()).toBe(true);
+    });
+
+    it("Data Test – applies the correct data-test attribute", () => {
       const dataTest = "test-loader";
 
       const component = mount(ULoader, {
@@ -108,10 +169,8 @@ describe("ULoader.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Default slot
-    it("renders content from default slot", () => {
+    it("Default – renders content from default slot", () => {
       const slotContent = "Custom Loader";
       const slotClass = "custom-loader";
 
@@ -130,10 +189,8 @@ describe("ULoader.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // loaderRef
-    it("exposes loaderRef", () => {
+    it("loaderRef – exposes loaderRef", () => {
       const component = mount(ULoader, {
         props: {
           loading: true,

package/ui.loader/types.ts

@@ -30,6 +30,11 @@ export interface Props {
    */
   size?: "sm" | "md" | "lg";
 
+  /**
+   * Loader variant.
+   */
+  variant?: "dots" | "spinner";
+
   /**
    * Component config object.
    */

package/ui.loader-overlay/tests/ULoaderOverlay.test.ts

@@ -16,10 +16,8 @@ describe("ULoaderOverlay.vue", () => {
     },
   };
 
-  // Props tests
   describe("Props", () => {
-    // Loading prop - true
-    it("shows overlay when loading prop is true", () => {
+    it("Loading – shows overlay when loading prop is true", () => {
       const loading = true;
 
       const component = mount(ULoaderOverlay, {
@@ -33,8 +31,7 @@ describe("ULoaderOverlay.vue", () => {
       expect(component.findComponent(ULoader).exists()).toBe(true);
     });
 
-    // Loading prop - false
-    it("hides overlay when loading prop is false", () => {
+    it("Loading – hides overlay when loading prop is false", () => {
       const loading = false;
 
       const component = mount(ULoaderOverlay, {
@@ -47,8 +44,7 @@ describe("ULoaderOverlay.vue", () => {
       expect(component.find("[vl-key='overlay']").exists()).toBe(false);
     });
 
-    // Color prop
-    it("applies the correct color to the loader", () => {
+    it("Color – applies the correct color to the loader", () => {
       const colors = [
         "primary",
         "secondary",
@@ -76,8 +72,7 @@ describe("ULoaderOverlay.vue", () => {
       });
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-loader-overlay";
 
       const component = mount(ULoaderOverlay, {
@@ -92,10 +87,8 @@ describe("ULoaderOverlay.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Default slot
-    it("renders content from default slot", () => {
+    it("Default – renders content from default slot", () => {
       const slotContent = "Custom Loader";
       const slotClass = "custom-loader";
 
@@ -151,10 +144,8 @@ describe("ULoaderOverlay.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // overlayRef
-    it("exposes overlayRef", () => {
+    it("overlayRef – exposes overlayRef", () => {
       const component = mount(ULoaderOverlay, {
         props: {
           loading,

package/ui.loader-progress/tests/ULoaderProgress.test.ts

@@ -28,10 +28,8 @@ describe("ULoaderProgress.vue", () => {
     vi.useRealTimers();
   });
 
-  // Props tests
   describe("Props", () => {
-    // Loading prop
-    it("accepts loading prop and starts the loader", () => {
+    it("Loading – accepts loading prop and starts the loader", () => {
       const loadings = [true, false];
 
       loadings.forEach(async (loading) => {
@@ -47,8 +45,7 @@ describe("ULoaderProgress.vue", () => {
       });
     });
 
-    // Color prop
-    it("applies the correct color class", () => {
+    it("Color – applies the correct color class", () => {
       const colors = [
         "primary",
         "secondary",
@@ -75,8 +72,7 @@ describe("ULoaderProgress.vue", () => {
       });
     });
 
-    // Size prop
-    it("applies the correct size class", () => {
+    it("Size – applies the correct size class", () => {
       const sizes = {
         xs: "h-px",
         sm: "h-0.5",
@@ -98,8 +94,7 @@ describe("ULoaderProgress.vue", () => {
       });
     });
 
-    // DataTest prop
-    it("accepts dataTest prop", () => {
+    it("DataTest – accepts dataTest prop", () => {
       const dataTest = "test-loader-progress";
 
       const component = mount(ULoaderProgress, {
@@ -113,10 +108,8 @@ describe("ULoaderProgress.vue", () => {
     });
   });
 
-  // Exposed methods and refs tests
   describe("Exposed methods and refs", () => {
-    // start method
-    it("exposes start method", () => {
+    it("start – exposes start method", () => {
       const expectedType = "function";
 
       const component = mount(ULoaderProgress, {
@@ -128,8 +121,7 @@ describe("ULoaderProgress.vue", () => {
       expect(() => component.vm.start()).not.toThrow();
     });
 
-    // stop method
-    it("exposes stop method", () => {
+    it("stop – exposes stop method", () => {
       const expectedType = "function";
 
       const component = mount(ULoaderProgress, {
@@ -141,8 +133,7 @@ describe("ULoaderProgress.vue", () => {
       expect(() => component.vm.stop()).not.toThrow();
     });
 
-    // isLoading computed property
-    it("exposes isLoading computed property", () => {
+    it("isLoading – exposes isLoading computed property", () => {
       const component = mount(ULoaderProgress, {
         global,
       });
@@ -150,8 +141,7 @@ describe("ULoaderProgress.vue", () => {
       expect(component.vm.isLoading).toBeDefined();
     });
 
-    // progressRef
-    it("exposes progressRef", () => {
+    it("progressRef – progressRef – exposes progressRef", () => {
       const component = mount(ULoaderProgress, {
         props: {
           loading,

package/ui.navigation-breadcrumbs/tests/UBreadcrumbs.test.ts

@@ -31,10 +31,8 @@ const mountWithRouter = (component: unknown, options: UnknownObject) => {
 };
 
 describe("UBreadcrumbs.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Links prop
-    it("renders the correct number of links", () => {
+    it("Links – renders the correct number of links", () => {
       const links: UBreadcrumb[] = [
         { label: "Home", to: "/" },
         { label: "Products", to: "/products" },
@@ -57,8 +55,7 @@ describe("UBreadcrumbs.vue", () => {
       });
     });
 
-    // Empty links array
-    it("renders nothing when links array is empty", () => {
+    it("Empty – renders nothing when links array is empty", () => {
       const component = mountWithRouter(UBreadcrumbs, {
         props: {
           links: [],
@@ -70,8 +67,7 @@ describe("UBreadcrumbs.vue", () => {
       expect(linkComponents.length).toBe(0);
     });
 
-    // Disabled link
-    it("disables link when disabled key is true", () => {
+    it("Disabled – disables link when disabled key is true", () => {
       const links: UBreadcrumb[] = [
         { label: "Home", to: "/", disabled: true },
         { label: "Products", to: "/products" },
@@ -89,8 +85,7 @@ describe("UBreadcrumbs.vue", () => {
       expect(linkComponents[1].props("disabled")).toBe(false);
     });
 
-    // Link without to or href
-    it("disables link when it has no to or href", () => {
+    it("Link – disables link when it has no to or href", () => {
       const links: UBreadcrumb[] = [{ label: "Home" }, { label: "Products", to: "/products" }];
 
       const component = mountWithRouter(UBreadcrumbs, {
@@ -105,8 +100,7 @@ describe("UBreadcrumbs.vue", () => {
       expect(linkComponents[1].props("disabled")).toBe(false);
     });
 
-    // Size prop
-    it("applies the correct size to links", () => {
+    it("Size – applies the correct size to links", () => {
       const sizes = ["sm", "md", "lg"];
       const links: UBreadcrumb[] = [
         { label: "Home", to: "/" },
@@ -130,8 +124,7 @@ describe("UBreadcrumbs.vue", () => {
       });
     });
 
-    // Color prop
-    it("applies the correct color to links", () => {
+    it("Color – applies the correct color to links", () => {
       const colors = [
         "primary",
         "secondary",
@@ -166,8 +159,7 @@ describe("UBreadcrumbs.vue", () => {
       });
     });
 
-    // Target prop
-    it("applies the correct target to links", () => {
+    it("Target – applies the correct target to links", () => {
       const target = "_blank";
       const links: UBreadcrumb[] = [
         { label: "Home", to: "/" },
@@ -189,8 +181,7 @@ describe("UBreadcrumbs.vue", () => {
       });
     });
 
-    // Underlined prop
-    it("applies underlined style to links when underlined prop is true", () => {
+    it("Underlined – applies underlined style to links when underlined prop is true", () => {
       const underlined = true;
       const links: UBreadcrumb[] = [
         { label: "Home", to: "/" },
@@ -212,8 +203,7 @@ describe("UBreadcrumbs.vue", () => {
       });
     });
 
-    // Dashed prop
-    it("applies dashed style to links when dashed prop is true", () => {
+    it("Dashed – applies dashed style to links when dashed prop is true", () => {
       const dashed = true;
       const links: UBreadcrumb[] = [
         { label: "Home", to: "/" },
@@ -235,8 +225,7 @@ describe("UBreadcrumbs.vue", () => {
       });
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-breadcrumbs";
       const links: UBreadcrumb[] = [
         { label: "Home", to: "/" },
@@ -258,8 +247,7 @@ describe("UBreadcrumbs.vue", () => {
       });
     });
 
-    // Link with icon
-    it("renders icon when link has icon prop", () => {
+    it("Link – renders icon when link has icon prop", () => {
       const links: UBreadcrumb[] = [
         { label: "Home", to: "/", icon: "home" },
         { label: "Products", to: "/products" },
@@ -278,8 +266,7 @@ describe("UBreadcrumbs.vue", () => {
       expect(iconComponents[0].props("name")).toBe("home");
     });
 
-    // Divider icon
-    it("renders divider icons between links", () => {
+    it("Divider – renders divider icons between links", () => {
       const links: UBreadcrumb[] = [
         { label: "Home", to: "/" },
         { label: "Products", to: "/products" },
@@ -301,10 +288,8 @@ describe("UBreadcrumbs.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Before-link slot
-    it("renders content from before-link slot", () => {
+    it("Before – renders content from before-link slot", () => {
       const links: UBreadcrumb[] = [
         { label: "Home", to: "/", icon: "home" },
         { label: "Products", to: "/products" },
@@ -325,8 +310,7 @@ describe("UBreadcrumbs.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // After-link slot
-    it("renders content from after-link slot", () => {
+    it("After – renders content from after-link slot", () => {
       const links: UBreadcrumb[] = [
         { label: "Home", to: "/", icon: "home" },
         { label: "Products", to: "/products" },
@@ -347,8 +331,7 @@ describe("UBreadcrumbs.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Label slot
-    it("renders content from label slot", () => {
+    it("Label – renders content from label slot", () => {
       const links: UBreadcrumb[] = [
         { label: "Home", to: "/" },
         { label: "Products", to: "/products" },
@@ -369,8 +352,7 @@ describe("UBreadcrumbs.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Divider slot
-    it("renders content from divider slot", () => {
+    it("Divider – renders content from divider slot", () => {
       const links: UBreadcrumb[] = [
         { label: "Home", to: "/" },
         { label: "Products", to: "/products" },
@@ -392,10 +374,8 @@ describe("UBreadcrumbs.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // clickLink event
-    it("emits clickLink event when link is clicked", async () => {
+    it("clickLink – emits clickLink event when link is clicked", async () => {
       const links: UBreadcrumb[] = [
         { label: "Home", to: "/" },
         { label: "Products", to: "/products" },
@@ -418,10 +398,8 @@ describe("UBreadcrumbs.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // breadcrumbsRef
-    it("exposes breadcrumbsRef", () => {
+    it("breadcrumbsRef – exposes breadcrumbsRef", () => {
       const links: UBreadcrumb[] = [
         { label: "Home", to: "/" },
         { label: "Products", to: "/products" },

package/ui.navigation-pagination/tests/UPagination.test.ts

@@ -8,10 +8,8 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import type { Props } from "../types";
 
 describe("UPagination.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Variant prop
-    it("applies the correct variant to buttons", async () => {
+    it("Variant – applies the correct variant to buttons", async () => {
       const variants = ["solid", "outlined", "subtle", "soft", "ghost"];
 
       variants.forEach((variant) => {
@@ -32,8 +30,7 @@ describe("UPagination.vue", () => {
       });
     });
 
-    // Size prop
-    it("applies the correct size to buttons", async () => {
+    it("Size – applies the correct size to buttons", async () => {
       const sizes = {
         sm: "text-small",
         md: "text-medium",
@@ -59,8 +56,7 @@ describe("UPagination.vue", () => {
       });
     });
 
-    // ModelValue prop
-    it("correctly highlights the current page", () => {
+    it("ModelValue – correctly highlights the current page", () => {
       const currentPage = 3;
 
       const component = mount(UPagination, {
@@ -78,8 +74,7 @@ describe("UPagination.vue", () => {
       expect(activeButton?.props("variant")).toBe("solid");
     });
 
-    // Total and perPage props
-    it("calculates the correct number of pages", () => {
+    it("Total – calculates the correct number of pages", () => {
       const total = 100;
       const perPage = 10;
 
@@ -104,8 +99,7 @@ describe("UPagination.vue", () => {
       expect(pageButtons.length).toBeLessThanOrEqual(expectedAmountOfButtons);
     });
 
-    // Limit prop
-    it("respects the limit of visible pages", () => {
+    it("Limit – respects the limit of visible pages", () => {
       const limit = 3;
 
       const component = mount(UPagination, {
@@ -127,8 +121,7 @@ describe("UPagination.vue", () => {
       expect(pageButtons.length).toBeLessThanOrEqual(limit);
     });
 
-    // FirstLabel, PrevLabel, NextLabel, LastLabel props
-    it("displays custom navigation labels", () => {
+    it("FirstLabel, PrevLabel, NextLabel, LastLabel – displays custom navigation labels", () => {
       const firstLabel = "First";
       const prevLabel = "Prev";
       const nextLabel = "Next";
@@ -154,8 +147,7 @@ describe("UPagination.vue", () => {
       expect(buttons[buttons.length - 1].text()).toBe(lastLabel);
     });
 
-    // Disabled prop
-    it("disables all buttons when disabled prop is true", () => {
+    it("Disabled – disables all buttons when disabled prop is true", () => {
       const disabled = true;
 
       const component = mount(UPagination, {
@@ -181,8 +173,7 @@ describe("UPagination.vue", () => {
       });
     });
 
-    // Ellipsis prop
-    it("shows ellipsis when ellipsis prop is true", () => {
+    it("Ellipsis – shows ellipsis when ellipsis prop is true", () => {
       const ellipsis = true;
       const expectedEllipsis = "…";
 
@@ -199,8 +190,7 @@ describe("UPagination.vue", () => {
       expect(component.html()).toContain(expectedEllipsis);
     });
 
-    // ShowFirst and ShowLast props
-    it("hides first/last buttons when showFirst/showLast props are false", () => {
+    it("ShowFirst – hides first/last buttons when showFirst/showLast props are false", () => {
       const component = mount(UPagination, {
         props: {
           modelValue: 5,
@@ -220,8 +210,7 @@ describe("UPagination.vue", () => {
       expect(lastButton.findComponent(UIcon).props("name")).toContain("chevron_right");
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-pagination";
 
       const component = mount(UPagination, {
@@ -240,10 +229,8 @@ describe("UPagination.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // First slot
-    it("renders content from first slot", () => {
+    it("First – renders content from first slot", () => {
       const slotContent = "Custom First";
       const slotClass = "first-content";
 
@@ -262,8 +249,7 @@ describe("UPagination.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Prev slot
-    it("renders content from prev slot", () => {
+    it("Prev – renders content from prev slot", () => {
       const slotContent = "Custom Prev";
       const slotClass = "prev-content";
 
@@ -282,8 +268,7 @@ describe("UPagination.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Ellipsis slot
-    it("renders content from ellipsis slot", () => {
+    it("Ellipsis – renders content from ellipsis slot", () => {
       const slotContent = "......";
       const slotClass = "ellipsis-content";
 
@@ -303,8 +288,7 @@ describe("UPagination.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Next slot
-    it("renders content from next slot", () => {
+    it("Next – renders content from next slot", () => {
       const slotContent = "Custom Next";
       const slotClass = "next-content";
 
@@ -323,8 +307,7 @@ describe("UPagination.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Last slot
-    it("renders content from last slot", () => {
+    it("Last – renders content from last slot", () => {
       const slotContent = "Custom Last";
       const slotClass = "last-content";
 
@@ -344,10 +327,8 @@ describe("UPagination.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Update:modelValue event
-    it("emits update:modelValue event when page is changed", async () => {
+    it("Update:modelValue – emits update:modelValue event when page is changed", async () => {
       const component = mount(UPagination, {
         props: {
           modelValue: 1,
@@ -370,8 +351,7 @@ describe("UPagination.vue", () => {
       expect(component.emitted("update:modelValue")?.[0]).toEqual([2]); // Second button value
     });
 
-    // Navigation button clicks
-    it("navigates to correct pages when navigation buttons are clicked", async () => {
+    it("Navigation – navigates to correct pages when navigation buttons are clicked", async () => {
       const component = mount(UPagination, {
         props: {
           modelValue: 5,
@@ -400,10 +380,8 @@ describe("UPagination.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // paginationRef
-    it("exposes paginationRef", () => {
+    it("paginationRef – exposes paginationRef", () => {
       const component = mount(UPagination, {
         props: {
           modelValue: 1,