vueless 1.3.1 → 1.3.2-beta.1

package/ui.form-checkbox/storybook/optionKeys.mdx

@@ -0,0 +1,17 @@
+import { Markdown } from "@storybook/addon-docs/blocks";
+
+## Option meta keys
+Keys you may/have to provide to the component in an option object.
+
+<Markdown>
+  {`
+|  Key name         | Description                            | Type                                   |
+| ------------------| ---------------------------------------| ---------------------------------------|
+| value             | Native value attribute                 | Boolean, String, Number, Array, Object |
+| trueValue         | Own value for checkbox checked state   | Boolean, String, Number, Array, Object |
+| falseValue        | Own value for checkbox unchecked state | Boolean, String, Number, Array, Object |
+| label             | Option label                           | String                                 |
+| icon              | Option icon                            | String                                 |
+| description       | Option description                     | Number                                 |
+`}
+</Markdown>

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

@@ -158,9 +158,7 @@ export const BottomSlot = DefaultTemplate.bind({});
 BottomSlot.args = {
   slotTemplate: `
     <template #bottom>
-      <UChip icon="arrow_outward" size="sm" class="mt-2">
-        <ULink label="Learn more" size="sm" class="mr-1.5" />
-      </UChip>
+      <ULink label="Learn more" size="sm" class="mr-1.5" />
     </template>
   `,
 };

package/ui.form-checkbox-group/storybook/docs.mdx

@@ -3,6 +3,7 @@ import { getSource } from "../../utils/storybook";
 
 import * as stories from "./stories";
 import defaultConfig from "../config?raw"
+import CheckboxOptionKeys from "../../ui.form-checkbox/storybook/optionKeys.mdx"
 
 <Meta of={stories} />
 <Title of={stories} />
@@ -12,8 +13,7 @@ import defaultConfig from "../config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
-## Option meta keys
-Full list of keys you may/have to provide to the component in an option object can be found here: <a href="https://ui.vueless.com/?path=/docs/3100--docs" target="_blank">UCheckbox docs</a>.
+<CheckboxOptionKeys />
 
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-checkbox-multi-state/storybook/docs.mdx

@@ -3,6 +3,7 @@ import { getSource } from "../../utils/storybook";
 
 import * as stories from "./stories";
 import defaultConfig from "../config?raw"
+import CheckboxOptionKeys from "../../ui.form-checkbox/storybook/optionKeys.mdx"
 
 <Meta of={stories} />
 <Title of={stories} />
@@ -12,5 +13,7 @@ import defaultConfig from "../config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
+<CheckboxOptionKeys />
+
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.loader/ULoader.vue

@@ -4,6 +4,8 @@ import { useTemplateRef } from "vue";
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
+import UIcon from "../ui.image-icon/UIcon.vue";
+
 import { COMPONENT_NAME, ELLIPSES_AMOUNT } from "./constants";
 import defaultConfig from "./config";
 
@@ -29,7 +31,8 @@ defineExpose({
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { getDataTest, config, loaderAttrs, ellipseAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, config, loaderAttrs, ellipseAttrs, spinnerIconAttrs } =
+  useUI<Config>(defaultConfig);
 </script>
 
 <template>
@@ -37,7 +40,12 @@ const { getDataTest, config, loaderAttrs, ellipseAttrs } = useUI<Config>(default
     <div v-if="loading" ref="loader" v-bind="loaderAttrs" :data-test="getDataTest()">
       <!-- @slot Use it to add something instead of the default loader. -->
       <slot>
-        <div v-for="ellipse in ELLIPSES_AMOUNT" :key="ellipse" v-bind="ellipseAttrs" />
+        <template v-if="variant === 'spinner'">
+          <UIcon :name="config.defaults.spinnerIcon" :color="color" v-bind="spinnerIconAttrs" />
+        </template>
+        <template v-else>
+          <div v-for="ellipse in ELLIPSES_AMOUNT" :key="ellipse" v-bind="ellipseAttrs" />
+        </template>
       </slot>
     </div>
   </Transition>

package/ui.loader/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   loader: {
-    base: "relative flex items-center",
+    base: "relative flex items-center justify-center",
     variants: {
       size: {
         sm: "h-1.5 w-9",
@@ -49,9 +49,22 @@ export default /*tw*/ {
       },
     },
   },
+  spinnerIcon: {
+    base: "{UIcon} animate-spin",
+    defaults: {
+      size: {
+        sm: "sm",
+        md: "md",
+        lg: "lg",
+      },
+    },
+  },
   defaults: {
     color: "primary",
+    variant: "dots",
     size: "md",
     loading: false,
+    /* icons */
+    spinnerIcon: "progress_activity",
   },
 };

package/ui.loader/storybook/stories.ts

@@ -16,7 +16,7 @@ import type { Props } from "../types";
 
 interface ULoaderArgs extends Props {
   slotTemplate?: string;
-  enum: "size" | "color";
+  enum: "size" | "color" | "variant";
 }
 
 export default {
@@ -82,6 +82,9 @@ const LoadingTemplate: StoryFn<ULoaderArgs> = (args: ULoaderArgs) => ({
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant" };
+
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
 

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" },