vueless 1.0.2-beta.37 → 1.0.2-beta.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.0.2-beta.37",
+  "version": "1.0.2-beta.38",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

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

@@ -52,7 +52,7 @@ export default {
 const defaultTemplate = `
   <UCol align="stretch">
     <URow>
-      <UInput label="Full Name" placeholder="John Doe" />
+      <UInput label="Name" placeholder="John Doe" />
       <UInput label="Email Address" type="email" placeholder="john.doe@example.com" />
     </URow>
 

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

@@ -47,7 +47,7 @@ const defaultTemplate = `
   <UCard title="Profile Information">
     <UCol align="stretch">
       <URow>
-        <UInput label="Full Name" placeholder="John Doe" />
+        <UInput label="Name" placeholder="John Doe" />
         <UInput label="Email Address" type="email" placeholder="john.doe@example.com" />
       </URow>
 

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

@@ -0,0 +1,314 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+
+import UCheckbox from "../UCheckbox.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import ULabel from "../../ui.form-label/ULabel.vue";
+
+import type { Props } from "../types.ts";
+
+describe("UCheckbox.vue", () => {
+  describe("Props", () => {
+    it("Model Value – sets the correct model value", async () => {
+      const modelValue = true;
+
+      const component = mount(UCheckbox, {
+        props: {
+          modelValue,
+          "onUpdate:modelValue": (e) => component.setProps({ modelValue: e }),
+        },
+      });
+
+      const inputElement = component.find("input");
+
+      await inputElement.trigger("change");
+
+      expect(component.emitted("update:modelValue")![0][0]).toBe(false);
+
+      await inputElement.trigger("change");
+
+      expect(component.emitted("update:modelValue")![1][0]).toBe(true);
+    });
+
+    it("Value – returns correct value type when checkbox is checked", async () => {
+      const testValues = ["string-value", 42, true, { id: 1, name: "test" }, [1, 2, 3]];
+
+      testValues.forEach(async (testValue) => {
+        const component = mount(UCheckbox, {
+          props: {
+            value: testValue,
+            modelValue: [],
+          },
+        });
+
+        const inputElement = component.find("input");
+
+        await inputElement.setValue(true);
+
+        const emittedValues = component.emitted("update:modelValue");
+
+        expect(emittedValues![0][0]).toEqual([testValue]);
+      });
+    });
+
+    it("TrueValue and FalseValue – returns correct values when checkbox is checked and unchecked", async () => {
+      const testValuePairs = [
+        { trueValue: "checked", falseValue: "unchecked" },
+        { trueValue: 1, falseValue: 0 },
+        { trueValue: { status: "active" }, falseValue: { status: "inactive" } },
+        { trueValue: true, falseValue: false },
+      ];
+
+      testValuePairs.forEach(async ({ trueValue, falseValue }) => {
+        const component = mount(UCheckbox, {
+          props: {
+            trueValue,
+            falseValue,
+            modelValue: falseValue,
+          },
+        });
+
+        const inputElement = component.find("input");
+
+        await inputElement.setValue(true);
+        let emittedValues = component.emitted("update:modelValue");
+
+        expect(emittedValues![0][0]).toEqual(trueValue);
+
+        await component.setProps({ modelValue: trueValue });
+
+        await inputElement.setValue(false);
+        emittedValues = component.emitted("update:modelValue");
+
+        expect(emittedValues![1][0]).toEqual(falseValue);
+      });
+    });
+
+    it("Partial – displays correct icon when checkbox is partially checked", () => {
+      const normalComponent = mount(UCheckbox, {
+        props: {
+          modelValue: true,
+          partial: false,
+        },
+      });
+
+      const normalIcon = normalComponent.findComponent(UIcon);
+
+      expect(normalIcon.props("name")).toBe("check");
+
+      const partialComponent = mount(UCheckbox, {
+        props: {
+          modelValue: true,
+          partial: true,
+        },
+      });
+
+      const partialIcon = partialComponent.findComponent(UIcon);
+
+      expect(partialIcon.props("name")).toBe("remove");
+    });
+
+    it("Name – sets the correct name attribute", async () => {
+      const name = "checkbox-name";
+
+      const component = mount(UCheckbox, {
+        props: {
+          name,
+        },
+      });
+
+      await flushPromises();
+
+      expect(component.find("input").attributes("name")).toBe(name);
+    });
+
+    it("Label – passes label to ULabel component", () => {
+      const labelText = "Test Label";
+
+      const component = mount(UCheckbox, {
+        props: {
+          label: labelText,
+        },
+      });
+
+      expect(component.getComponent(ULabel).props("label")).toBe(labelText);
+    });
+
+    it("Label Align – passes labelAlign prop to ULabel component", () => {
+      const labelAlign = "left";
+
+      const component = mount(UCheckbox, {
+        props: {
+          label: "Test Label",
+          labelAlign,
+        },
+      });
+
+      expect(component.getComponent(ULabel).props("align")).toBe(labelAlign);
+    });
+
+    it("Description – passes description to ULabel component", () => {
+      const descriptionText = "This is a description";
+
+      const component = mount(UCheckbox, {
+        props: {
+          description: descriptionText,
+        },
+      });
+
+      expect(component.getComponent(ULabel).props("description")).toBe(descriptionText);
+    });
+
+    it("Size – applies the correct size class", () => {
+      const size = {
+        sm: "size-4",
+        md: "size-5",
+        lg: "size-6",
+      };
+
+      Object.entries(size).forEach(([size, classes]) => {
+        const component = mount(UCheckbox, {
+          props: {
+            size: size as Props["size"],
+          },
+        });
+
+        expect(component.get("[vl-key='checkbox']").attributes("class")).toContain(classes);
+      });
+    });
+
+    it("Color – applies the correct color class when checked", () => {
+      const colors = [
+        "primary",
+        "secondary",
+        "error",
+        "warning",
+        "success",
+        "info",
+        "notice",
+        "neutral",
+        "grayscale",
+      ];
+
+      colors.forEach((color) => {
+        const component = mount(UCheckbox, {
+          props: {
+            color: color as Props["color"],
+            modelValue: true,
+          },
+        });
+
+        expect(component.find("label").attributes("class")).toContain(color);
+      });
+    });
+
+    it("Disabled – applies disabled attribute when disabled prop is true", () => {
+      const disabledOpacityVar = "--vl-disabled-opacity";
+
+      const component = mount(UCheckbox, {
+        props: {
+          disabled: true,
+        },
+      });
+
+      expect(component.find("input").attributes("disabled")).toBeDefined();
+      const labelComponent = component.findComponent(ULabel);
+      const checkboxInput = component.get("[vl-key='checkbox']");
+
+      expect(labelComponent.props("disabled")).toBe(true);
+      expect(checkboxInput.attributes("class")).toContain(disabledOpacityVar);
+    });
+
+    it("Id – applies the correct id attribute", () => {
+      const id = "test-switch-id";
+
+      const component = mount(UCheckbox, {
+        props: {
+          id,
+        },
+      });
+
+      expect(component.find("input").attributes("id")).toBe(id);
+    });
+
+    it("Data Test – applies the correct data-test attribute", () => {
+      const dataTest = "test-checkbox";
+      const labelDataTest = "test-checkbox-label";
+
+      const component = mount(UCheckbox, {
+        props: {
+          label: "Test",
+          dataTest,
+        },
+      });
+
+      expect(component.findComponent(ULabel).attributes("data-test")).toBe(labelDataTest);
+      expect(component.get("input").attributes("data-test")).toBe(dataTest);
+    });
+  });
+
+  describe("Slots", () => {
+    it("Label – renders custom content from label slot", () => {
+      const customLabelContent = "Custom Label Content";
+
+      const component = mount(UCheckbox, {
+        props: {
+          label: "Default Label",
+        },
+        slots: {
+          label: customLabelContent,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const labelElement = labelComponent.find("label");
+
+      expect(labelElement.text()).toBe(customLabelContent);
+    });
+
+    it("Label – exposes label prop to slot", () => {
+      const defaultLabel = "Test Label";
+
+      const component = mount(UCheckbox, {
+        props: {
+          label: defaultLabel,
+        },
+        slots: {
+          label: "Modified {{ params.label }}",
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const labelElement = labelComponent.find("label");
+
+      expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
+    });
+
+    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", () => {
+    it("Input – emits input event when checkbox is toggled", async () => {
+      const component = mount(UCheckbox);
+
+      await component.find("input").setValue(true);
+
+      expect(component.emitted("input")![0]).toEqual([true]);
+    });
+  });
+});

package/ui.form-checkbox/types.ts

@@ -21,7 +21,7 @@ export interface Props {
   modelValue?: boolean | string | number | UnknownArray | UnknownObject;
 
   /**
-   * Native value attribute.
+   * Value of the checkbox.
    */
   value?: boolean | string | number | UnknownArray | UnknownObject;
 

package/ui.form-checkbox-group/UCheckboxGroup.vue

@@ -46,7 +46,7 @@ provide<() => string>("getCheckboxGroupName", () => props.name);
 provide("getCheckboxGroupColor", () => props.color);
 provide("getCheckboxSize", () => props.size);
 
-watch(() => checkedItems.value.length, onChangeCheckedItems);
+watch(checkedItems, onChangeCheckedItems, { deep: true });
 watch(
   () => props?.modelValue?.length,
   (newValue, oldValue) => {
@@ -97,7 +97,7 @@ const { getDataTest, groupLabelAttrs, groupCheckboxAttrs, listAttrs } =
     </template>
 
     <div ref="list" v-bind="listAttrs">
-      <!-- @slot Use it to add URadio directly. -->
+      <!-- @slot Use it to add UCheckbox directly. -->
       <slot>
         <UCheckbox
           v-for="(option, index) in options"

package/ui.form-checkbox-group/tests/UCheckboxGroup.test.ts

@@ -0,0 +1,267 @@
+import { flushPromises, mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+import { nextTick } from "vue";
+
+import UCheckboxGroup from "../UCheckboxGroup.vue";
+import UCheckbox from "../../ui.form-checkbox/UCheckbox.vue";
+import ULabel from "../../ui.form-label/ULabel.vue";
+
+import type { Props } from "../types.ts";
+
+describe("UCheckboxGroup.vue", () => {
+  const defaultOptions = [
+    { label: "Email Notifications", value: "email" },
+    { label: "SMS Alerts", value: "sms" },
+    { label: "Push Notifications", value: "push" },
+  ];
+
+  describe("Props", () => {
+    it("Options - renders checkboxes for each option", () => {
+      const component = mount(UCheckboxGroup, {
+        props: {
+          options: defaultOptions,
+        },
+      });
+
+      const checkboxes = component.findAllComponents(UCheckbox);
+
+      expect(checkboxes).toHaveLength(defaultOptions.length);
+
+      checkboxes.forEach((checkbox, index) => {
+        expect(checkbox.props("label")).toBe(defaultOptions[index].label);
+        expect(checkbox.props("value")).toBe(defaultOptions[index].value);
+      });
+    });
+
+    it("Options – checkbox emits value on change", async () => {
+      const expectedValues = defaultOptions.map((option) => option.value);
+
+      const component = mount(UCheckboxGroup, {
+        props: {
+          options: defaultOptions,
+          name: "notification-preferences",
+          modelValue: [],
+        },
+      });
+
+      component.findAll("input[type='checkbox']").forEach(async (checkbox) => {
+        await checkbox.setValue(true);
+      });
+
+      await nextTick();
+
+      expect(component.emitted("update:modelValue")![1][0]).toEqual(expectedValues);
+    });
+
+    it("Label – passes label to ULabel component", () => {
+      const labelText = "Test Label";
+
+      const component = mount(UCheckboxGroup, {
+        props: {
+          label: labelText,
+        },
+      });
+
+      expect(component.getComponent(ULabel).props("label")).toBe(labelText);
+    });
+
+    it("Description – passes description to ULabel component", () => {
+      const descriptionText = "This is a description";
+
+      const component = mount(UCheckboxGroup, {
+        props: {
+          description: descriptionText,
+        },
+      });
+
+      expect(component.getComponent(ULabel).props("description")).toBe(descriptionText);
+    });
+
+    it("Error – passes error to ULabel component", () => {
+      const errorText = "This is an error message";
+
+      const component = mount(UCheckboxGroup, {
+        props: {
+          error: errorText,
+        },
+      });
+
+      expect(component.getComponent(ULabel).props("error")).toBe(errorText);
+    });
+
+    it("Size – applies the correct size class", () => {
+      const size = {
+        sm: "size-4",
+        md: "size-5",
+        lg: "size-6",
+      };
+
+      Object.entries(size).forEach(([size, classes]) => {
+        const component = mount(UCheckboxGroup, {
+          props: {
+            size: size as Props["size"],
+            options: defaultOptions,
+          },
+        });
+
+        const checkboxInput = component.getComponent(UCheckbox).get("input");
+
+        expect(checkboxInput.attributes("class")).toContain(classes);
+      });
+    });
+
+    it("Name – sets the correct UCheckbox name prop", async () => {
+      const name = "checkbox-name";
+
+      const component = mount(UCheckboxGroup, {
+        props: {
+          name,
+          options: defaultOptions,
+        },
+      });
+
+      await flushPromises();
+
+      component.findAllComponents("input").forEach((checkbox) => {
+        expect(checkbox.attributes("name")).toBe(name);
+      });
+    });
+
+    it("Color – sets correct UCheckbox color prop", () => {
+      const colors = [
+        "primary",
+        "secondary",
+        "error",
+        "warning",
+        "success",
+        "info",
+        "notice",
+        "neutral",
+        "grayscale",
+      ];
+
+      colors.forEach((color) => {
+        const component = mount(UCheckboxGroup, {
+          props: {
+            color: color as Props["color"],
+            options: defaultOptions,
+          },
+        });
+
+        component.findAllComponents(UCheckbox).forEach(async (checkbox) => {
+          const checkboxInput = checkbox.get("input");
+
+          await checkboxInput.trigger("input");
+
+          expect(checkboxInput.attributes("class")).toContain(color);
+        });
+      });
+    });
+
+    it("Disabled – sets correct UCheckbox disabled prop", () => {
+      const component = mount(UCheckboxGroup, {
+        props: {
+          disabled: true,
+          options: defaultOptions,
+        },
+      });
+
+      component.findAllComponents(UCheckbox).forEach((checkbox) => {
+        expect(checkbox.props("disabled")).toBe(true);
+      });
+    });
+
+    it("Data test  – sets correct data-test attribute to checkboxes", () => {
+      const dataTestValue = "checkbox";
+
+      const component = mount(UCheckboxGroup, {
+        props: {
+          "data-test": dataTestValue,
+          options: defaultOptions,
+        },
+      });
+
+      component.findAllComponents(UCheckbox).forEach((checkbox, idx) => {
+        expect(checkbox.attributes("data-test")).toBe(`${dataTestValue}-item-${idx}-label`);
+      });
+    });
+  });
+
+  describe("Slots", () => {
+    it("Label – renders custom content from label slot", () => {
+      const customLabelContent = "Custom Label Content";
+
+      const component = mount(UCheckboxGroup, {
+        props: {
+          label: "Default Label",
+        },
+        slots: {
+          label: customLabelContent,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const labelElement = labelComponent.find("label");
+
+      expect(labelElement.text()).toBe(customLabelContent);
+    });
+
+    it("Label – exposes label prop to slot", () => {
+      const defaultLabel = "Test Label";
+
+      const component = mount(UCheckboxGroup, {
+        props: {
+          label: defaultLabel,
+        },
+        slots: {
+          label: "Modified {{ params.label }}",
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const labelElement = labelComponent.find("label");
+
+      expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
+    });
+
+    it("Default slot – renders custom UCheckbox components", () => {
+      const component = mount(UCheckboxGroup, {
+        props: {
+          modelValue: [],
+          name: "custom-group",
+        },
+        slots: {
+          default: `
+            <UCheckbox value="option1" label="Custom Option 1" />
+            <UCheckbox value="option2" label="Custom Option 2" />
+            <UCheckbox value="option3" label="Custom Option 3" />
+          `,
+        },
+        global: {
+          components: {
+            UCheckbox,
+          },
+        },
+      });
+
+      const checkboxes = component.findAllComponents(UCheckbox);
+
+      expect(checkboxes).toHaveLength(3);
+
+      expect(checkboxes[0].props("value")).toBe("option1");
+      expect(checkboxes[0].props("label")).toBe("Custom Option 1");
+      expect(checkboxes[1].props("value")).toBe("option2");
+      expect(checkboxes[1].props("label")).toBe("Custom Option 2");
+      expect(checkboxes[2].props("value")).toBe("option3");
+      expect(checkboxes[2].props("label")).toBe("Custom Option 3");
+    });
+  });
+
+  describe("Exposed properties", () => {
+    it("exposes listRef", () => {
+      const component = mount(UCheckboxGroup);
+
+      expect(component.vm.listRef).toBeDefined();
+    });
+  });
+});

package/ui.form-checkbox-multi-state/UCheckboxMultiState.vue

@@ -92,6 +92,7 @@ const multiStateCheckboxAttrs = computed(() => {
     :color="color"
     :label-align="labelAlign"
     :disabled="disabled"
+    :data-test="dataTest"
     v-bind="multiStateCheckboxAttrs"
     @input="onClickCheckbox"
   />