vueless 1.0.2-beta.8 → 1.0.2-beta.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.0.2-beta.8",
+  "version": "1.0.2-beta.9",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -30,13 +30,13 @@
   "scripts": {
     "pre:start": "npx node .scripts/icons",
     "dev:docs": "storybook dev -p 6006 --docs --no-open",
-    "dev": "STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
+    "dev": "storybook dev -p 6006 --no-open",
     "build": "storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
     "ts:check": "vue-tsc --build --force",
     "release:prepare": "npm run pre:start && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/ && npx node .scripts/writeLocales",
     "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
-    "release:patch": "release-it patch --ci --npm.publish",
+    "release:patch": "release-it patch --ci --npm.publish --git.tag --github.release",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
     "lint": "eslint --no-fix src/ .storybook/",
@@ -75,7 +75,7 @@
     "@vue/eslint-config-typescript": "^14.5.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.0.0",
+    "@vueless/storybook": "^1.0.1-beta.1",
     "eslint": "^9.27.0",
     "eslint-plugin-storybook": "^0.12.0",
     "eslint-plugin-vue": "^10.1.0",

package/ui.form-select/USelect.vue

@@ -795,7 +795,7 @@ const {
         @focus="activate"
         @blur="onListboxBlur"
         @search-blur="onListboxSearchBlur"
-        @update:model-value="onSearchChange"
+        @search-change="onSearchChange"
       >
         <template #before-option="{ option, index }">
           <!--

package/ui.text-file/UFile.vue

@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits([
   /**
-   * Triggers when remove button is clicked.
+   * Triggers when the remove button is clicked.
    * @property {string} fileId
    */
   "remove",

package/ui.text-file/tests/UFile.test.ts

@@ -0,0 +1,257 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+
+import UFile from "../UFile.vue";
+import ULink from "../../ui.button-link/ULink.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+
+import type { ComponentPublicInstance } from "vue";
+import type { Props } from "../types.ts";
+
+describe("UFile.vue", () => {
+  // Props tests
+  describe("Props", () => {
+    // URL prop
+    it("passes the correct url to ULink", () => {
+      const url = "https://example.com/file.pdf";
+
+      const component = mount(UFile, {
+        props: {
+          url,
+        },
+      });
+
+      const linkComponent = component.findComponent(ULink);
+
+      expect(linkComponent.props("href")).toBe(url);
+    });
+
+    // ImageUrl prop
+    it("renders image when imageUrl prop is provided", () => {
+      const imageUrl = "https://example.com/image.jpg";
+
+      const component = mount(UFile, {
+        props: {
+          imageUrl,
+        },
+      });
+
+      const image = component.find("img");
+
+      expect(image.exists()).toBe(true);
+      expect(image.attributes("src")).toBe(imageUrl);
+    });
+
+    // Label prop
+    it("renders the correct label text", () => {
+      const label = "Example File";
+
+      const component = mount(UFile, {
+        props: {
+          label,
+        },
+      });
+
+      const linkComponent = component.findComponent(ULink);
+
+      expect(linkComponent.text()).toContain(label);
+    });
+
+    // Size prop
+    it("applies the correct size class", async () => {
+      const sizeClasses = {
+        sm: "gap-0.5",
+        md: "gap-1",
+        lg: "gap-1.5",
+      };
+
+      Object.entries(sizeClasses).forEach(([size, classes]) => {
+        const component = mount(UFile, {
+          props: {
+            size: size as Props["size"],
+          },
+        });
+
+        expect(component.attributes("class")).toContain(classes);
+      });
+    });
+
+    // ID prop
+    it("uses provided id", () => {
+      const id = "test-file-id";
+      const removable = true;
+
+      const component = mount(UFile, {
+        props: {
+          id,
+          removable, // Need to set removable to true to show the remove button
+        },
+      });
+
+      // Directly call the onRemove method
+      (component.vm as ComponentPublicInstance & { onRemove: () => void }).onRemove();
+
+      expect(component.emitted("remove")?.[0][0]).toBe(id);
+    });
+
+    // Removable prop
+    it("shows remove button when removable prop is true", () => {
+      const removable = true;
+      const dataTest = "test-file";
+      const removeIconDataTest = "test-file-remove-item";
+
+      const component = mount(UFile, {
+        props: {
+          removable,
+          dataTest,
+        },
+      });
+
+      // Get the remove button directly using the same approach as in the event test
+      const removeIcon = component.findAllComponents(UIcon).find((component) => {
+        return component.props("dataTest") === removeIconDataTest;
+      });
+
+      expect(removeIcon).toBeDefined();
+    });
+
+    // DataTest prop
+    it("applies the correct data-test attribute", () => {
+      const dataTest = "test-file";
+
+      const component = mount(UFile, {
+        props: {
+          dataTest,
+        },
+      });
+
+      expect(component.attributes("data-test")).toBe(dataTest);
+    });
+  });
+
+  // Slots tests
+  describe("Slots", () => {
+    // Default slot
+    it("renders content from default slot", () => {
+      const slotContent = "Custom Content";
+
+      const component = mount(UFile, {
+        slots: {
+          default: slotContent,
+        },
+      });
+
+      expect(component.text()).toContain(slotContent);
+    });
+
+    // Default slot with bindings
+    it("provides correct bindings to default slot", () => {
+      const id = "test-id";
+      const label = "Test File";
+      const url = "https://example.com/file.pdf";
+      const imageUrl = "https://example.com/image.jpg";
+
+      // Define class names as constants instead of hardcoding them
+      const idClass = "file-id";
+      const labelClass = "file-label";
+      const urlClass = "file-url";
+      const imageUrlClass = "file-image-url";
+
+      const component = mount(UFile, {
+        props: {
+          id,
+          label,
+          url,
+          imageUrl,
+        },
+        slots: {
+          default: `
+            <template #default="{ id, label, url, imageUrl }">
+              <div class="${idClass}">{{ id }}</div>
+              <div class="${labelClass}">{{ label }}</div>
+              <div class="${urlClass}">{{ url }}</div>
+              <div class="${imageUrlClass}">{{ imageUrl }}</div>
+            </template>
+          `,
+        },
+      });
+
+      expect(component.find(`.${idClass}`).text()).toBe(id);
+      expect(component.find(`.${labelClass}`).text()).toBe(label);
+      expect(component.find(`.${urlClass}`).text()).toBe(url);
+      expect(component.find(`.${imageUrlClass}`).text()).toBe(imageUrl);
+    });
+
+    // Left slot
+    it("renders content from left slot", () => {
+      const slotText = "Left";
+      const slotClass = "left-content";
+
+      const component = mount(UFile, {
+        slots: {
+          left: `<span class='${slotClass}'>${slotText}</span>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotText);
+    });
+
+    // Right slot
+    it("renders content from right slot", () => {
+      const slotText = "Right";
+      const slotClass = "right-content";
+
+      const component = mount(UFile, {
+        slots: {
+          right: `<span class='${slotClass}'>${slotText}</span>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotText);
+    });
+  });
+
+  // Events tests
+  describe("Events", () => {
+    // Remove event
+    it("emits remove event when remove button is clicked", async () => {
+      const id = "test-file-id";
+      const removable = true;
+      const dataTest = "test-file";
+      const removeIconDataTest = "test-file-remove-item";
+
+      const component = mount(UFile, {
+        props: {
+          id,
+          removable,
+          dataTest,
+        },
+      });
+
+      const removeIcon = component.findAllComponents(UIcon).find((component) => {
+        return component.props("dataTest") === removeIconDataTest;
+      });
+
+      expect(removeIcon).toBeDefined();
+
+      // Directly call the onRemove method
+      (component.vm as ComponentPublicInstance & { onRemove: () => void }).onRemove();
+
+      // Check if the remove event was emitted with the correct value
+      expect(component.emitted("remove")).toBeTruthy();
+      expect(component.emitted("remove")?.[0][0]).toBe(id);
+    });
+  });
+
+  // Exposed refs tests
+  describe("Exposed refs", () => {
+    // link ref
+    it("exposes link ref", () => {
+      const component = mount(UFile, {});
+
+      expect(component.vm.link).toBeDefined();
+    });
+  });
+});

package/ui.text-files/UFiles.vue

@@ -98,36 +98,35 @@ const { getDataTest, filesLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(de
         >
           <template #left>
             <!--
-              @slot Use it to add something left.
+              @slot Use it to add something before the file content.
               @binding {number} index
             -->
-            <slot name="left" :index="index" />
+            <slot name="before-file" :index="index" />
           </template>
 
-          <template #default="{ id, label, url, imageUrl }">
-            <!-- @slot Use it to add a file directly.
-              @binding {string | number} id
-              @binding {string} label
-              @binding {string} url
-              @binding {string} image-url
-              @binding {number} index
-            -->
-            <slot
-              :id="id"
-              name="default"
-              :label="label"
-              :url="url"
-              :image-url="imageUrl"
-              :index="index"
-            />
-          </template>
+          <!--
+            @slot Use it to add a file directly.
+            @binding {string | number} id
+            @binding {string} label
+            @binding {string} url
+            @binding {string} image-url
+            @binding {number} index
+          -->
+          <slot
+            :id="file?.id"
+            name="file"
+            :label="file?.label"
+            :url="file?.url"
+            :image-url="file?.imageUrl"
+            :index="index"
+          />
 
           <template #right>
             <!--
-              @slot Use it to add something right.
+              @slot Use it to add something after the file content.
               @binding {number} index
             -->
-            <slot name="right" :index="index" />
+            <slot name="after-file" :index="index" />
           </template>
         </UFile>
       </slot>

package/ui.text-files/storybook/stories.ts

@@ -92,10 +92,10 @@ export const Slots: StoryFn<UFilesArgs> = (args) => ({
   },
   template: `
     <UFiles v-bind="args">
-      <template #left="{ index }">
+      <template #before-file="{ index }">
         <UIcon v-if="index === 0" name="info" color="warning" size="xs" />
       </template>
-      <template #right="{ index }">
+      <template #after-file="{ index }">
         <UIcon v-if="index === 1" name="check_circle" color="success" size="xs" />
       </template>
     </UFiles>

package/ui.text-files/tests/UFiles.test.ts

@@ -0,0 +1,325 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect, beforeAll, afterAll, vi } from "vitest";
+
+import UFiles from "../UFiles.vue";
+import UFile from "../../ui.text-file/UFile.vue";
+import ULabel from "../../ui.form-label/ULabel.vue";
+
+import type { Props } from "../types.ts";
+
+// Mock URL.createObjectURL
+const originalCreateObjectURL = URL.createObjectURL;
+const mockCreateObjectURL = vi.fn().mockImplementation((file) => `mock-url-for-${file.name}`);
+
+describe("UFiles.vue", () => {
+  const fileList = [createMockFile("file1.pdf"), createMockFile("file2.pdf")];
+
+  // Create a mock File object
+  function createMockFile(name: string, type: string = "application/pdf") {
+    return new File(["dummy content"], name, { type });
+  }
+
+  // Setup and teardown for URL.createObjectURL mock
+  beforeAll(() => {
+    // Mock URL.createObjectURL before tests
+    URL.createObjectURL = mockCreateObjectURL;
+  });
+
+  afterAll(() => {
+    // Restore original URL.createObjectURL after tests
+    URL.createObjectURL = originalCreateObjectURL;
+  });
+
+  // Props tests
+  describe("Props", () => {
+    // FileList prop
+    it("renders the correct number of files", () => {
+      const component = mount(UFiles, {
+        props: {
+          fileList,
+        },
+      });
+
+      const fileComponents = component.findAllComponents(UFile);
+
+      expect(fileComponents.length).toBe(fileList.length);
+    });
+
+    // Label prop
+    it("renders the correct label text", () => {
+      const label = "File List";
+
+      const component = mount(UFiles, {
+        props: {
+          fileList: [],
+          label,
+        },
+      });
+
+      const labelComponent = component.findComponent(ULabel);
+
+      expect(labelComponent.props("label")).toBe(label);
+    });
+
+    // LabelAlign prop
+    it("passes the correct labelAlign to ULabel", () => {
+      const labelAligns = ["top", "topWithDesc"];
+
+      labelAligns.forEach((labelAlign) => {
+        const component = mount(UFiles, {
+          props: {
+            fileList,
+            labelAlign: labelAlign as Props["labelAlign"],
+          },
+        });
+
+        const labelComponent = component.findComponent(ULabel);
+
+        expect(labelComponent.props("align")).toBe(labelAlign);
+      });
+    });
+
+    // Description prop
+    it("passes the correct description to ULabel", () => {
+      const description = "List of files";
+
+      const component = mount(UFiles, {
+        props: {
+          fileList,
+          description,
+        },
+      });
+
+      const labelComponent = component.findComponent(ULabel);
+
+      expect(labelComponent.props("description")).toBe(description);
+    });
+
+    // Size prop
+    it("passes the correct size prop to ULabel", () => {
+      const sizes = ["sm", "md", "lg"];
+
+      sizes.forEach((size) => {
+        const component = mount(UFiles, {
+          props: {
+            fileList,
+            size: size as Props["size"],
+          },
+        });
+
+        const labelComponent = component.findComponent(ULabel);
+
+        expect(labelComponent.props("size")).toBe(size);
+      });
+    });
+
+    // Removable prop
+    it("passes removable prop to UFile components", () => {
+      const removable = true;
+      const fileList = [createMockFile("file1.pdf")];
+
+      const component = mount(UFiles, {
+        props: {
+          fileList,
+          removable,
+        },
+      });
+
+      const fileComponent = component.findComponent(UFile);
+
+      expect(fileComponent.props("removable")).toBe(removable);
+    });
+
+    // DataTest prop
+    it("applies the correct data-test attribute to file items", () => {
+      const dataTest = "test-files";
+      const fileList = [createMockFile("file1.pdf")];
+
+      const component = mount(UFiles, {
+        props: {
+          fileList,
+          dataTest,
+        },
+      });
+
+      const fileComponent = component.findComponent(UFile);
+
+      expect(fileComponent.attributes("data-test")).toBe(`${dataTest}-item-0`);
+    });
+
+    // Image file detection
+    it("detects image files and sets imageUrl prop", () => {
+      const imageFile = createMockFile("image.jpg", "image/jpeg");
+      const fileList = [imageFile];
+
+      const component = mount(UFiles, {
+        props: {
+          fileList,
+        },
+      });
+
+      const fileComponent = component.findComponent(UFile);
+
+      expect(fileComponent.props("imageUrl")).toBeDefined();
+    });
+  });
+
+  // Slots tests
+  describe("Slots", () => {
+    // Default slot
+    it("renders content from default slot", () => {
+      const slotContent = "Custom Content";
+
+      const component = mount(UFiles, {
+        props: {
+          fileList: [],
+        },
+        slots: {
+          default: slotContent,
+        },
+      });
+
+      expect(component.text()).toContain(slotContent);
+    });
+
+    // Label slot
+    it("renders content from label slot", () => {
+      const label = "File List";
+      const slotText = "Custom Label";
+      const slotClass = "label-content";
+
+      const component = mount(UFiles, {
+        props: {
+          fileList: [],
+          label,
+        },
+        slots: {
+          label: `<span class='${slotClass}'>${slotText}</span>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotText);
+    });
+
+    // Before-file slot
+    it("renders content from before-file slot", () => {
+      const slotText = "Before";
+      const slotClass = "before-content";
+
+      const component = mount(UFiles, {
+        props: {
+          fileList,
+        },
+        slots: {
+          "before-file": `
+            <template #before-file="{ index }">
+              <span class='${slotClass}'>${slotText}{{ index }}</span>
+            </template>
+          `,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(`${slotText}0`);
+    });
+
+    // After-file slot
+    it("renders content from after-file slot", () => {
+      const slotText = "After";
+      const slotClass = "after-content";
+
+      const component = mount(UFiles, {
+        props: {
+          fileList,
+        },
+        slots: {
+          "after-file": `
+            <template #after-file="{ index }">
+              <span class='${slotClass}'>${slotText}{{ index }}</span>
+            </template>
+          `,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(`${slotText}0`);
+    });
+
+    // File slot with bindings
+    it("provides correct bindings to file slot", () => {
+      const fileName = "file1.pdf";
+      const fileIndex = "0";
+      const fileList = [createMockFile(fileName)];
+
+      // Define class names as constants instead of hardcoding them
+      const idClass = "file-id";
+      const labelClass = "file-label";
+      const urlClass = "file-url";
+      const imageUrlClass = "file-image-url";
+      const indexClass = "file-index";
+
+      const component = mount(UFiles, {
+        props: {
+          fileList,
+        },
+        slots: {
+          file: `
+            <template #file="{ id, label, url, imageUrl, index }">
+              <div v-if="id" class="${idClass}">{{ id }}</div>
+              <div v-if="label" class="${labelClass}">{{ label }}</div>
+              <div v-if="url" class="${urlClass}">{{ url }}</div>
+              <div v-if="imageUrl" class="${imageUrlClass}">{{ imageUrl }}</div>
+              <div v-if="index >= 0" class="${indexClass}">{{ index }}</div>
+            </template>
+          `,
+        },
+      });
+
+      expect(component.find(`.${idClass}`).exists()).toBe(true);
+      expect(component.find(`.${labelClass}`).text()).toBe(fileName);
+      expect(component.find(`.${urlClass}`).exists()).toBe(true);
+      expect(component.find(`.${imageUrlClass}`).exists()).toBe(false);
+      expect(component.find(`.${indexClass}`).text()).toBe(fileIndex);
+    });
+  });
+
+  // Events tests
+  describe("Events", () => {
+    // Remove event
+    it("emits remove event when file is removed", async () => {
+      const fileList = [createMockFile("file1.pdf")];
+      const fileId = "test-id";
+      const removable = true;
+
+      const component = mount(UFiles, {
+        props: {
+          fileList,
+          removable,
+        },
+      });
+
+      // Find the UFile component and trigger its remove event
+      const fileComponent = component.findComponent(UFile);
+
+      await fileComponent.vm.$emit("remove", fileId);
+
+      expect(component.emitted("remove")).toBeTruthy();
+      expect(component.emitted("remove")?.[0][0]).toBe(fileId);
+    });
+  });
+
+  // Exposed refs tests
+  describe("Exposed refs", () => {
+    // itemsRef
+    it("exposes itemsRef", () => {
+      const component = mount(UFiles, {
+        props: {
+          fileList: [],
+        },
+      });
+
+      expect(component.vm.itemsRef).toBeDefined();
+    });
+  });
+});

package/ui.text-number/tests/UNumber.test.ts

@@ -0,0 +1,351 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect, beforeAll } from "vitest";
+
+import UNumber from "../UNumber.vue";
+import { MATH_SIGN, MATH_SIGN_TYPE } from "../utilNumber.ts";
+
+import type { Props } from "../types.ts";
+
+describe("UNumber.vue", () => {
+  let value: number;
+
+  beforeAll(() => {
+    value = 1234.56;
+  });
+
+  // Props tests
+  describe("Props", () => {
+    // Size prop
+    it("applies the correct size class", async () => {
+      const sizeClasses = {
+        xs: "text-tiny",
+        sm: "text-small",
+        md: "text-medium",
+        lg: "text-large",
+      };
+
+      Object.entries(sizeClasses).forEach(([size, classes]) => {
+        const component = mount(UNumber, {
+          props: {
+            size: size as Props["size"],
+          },
+        });
+
+        expect(component.attributes("class")).toContain(classes);
+      });
+    });
+
+    // Color prop
+    it("applies the correct color class", async () => {
+      const colors = [
+        "primary",
+        "secondary",
+        "error",
+        "warning",
+        "success",
+        "info",
+        "notice",
+        "neutral",
+        "grayscale",
+      ];
+
+      colors.forEach((color) => {
+        const component = mount(UNumber, {
+          props: {
+            color: color as Props["color"],
+          },
+        });
+
+        expect(component.attributes("class")).toContain(color);
+      });
+    });
+
+    // Value prop
+    it("renders the correct number value", () => {
+      const expectedFormattedNumber = "1 234,56";
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+        },
+      });
+
+      expect(component.text()).toContain(expectedFormattedNumber);
+    });
+
+    // Sign prop
+    it("renders the correct sign based on sign prop", () => {
+      const testNegativeValue = -123;
+
+      // Auto sign (negative value)
+      // Should show minus sign for negative values
+      const autoComponent = mount(UNumber, {
+        props: {
+          value: testNegativeValue,
+          sign: MATH_SIGN_TYPE.auto as Props["sign"],
+        },
+      });
+
+      expect(autoComponent.text()).toContain(MATH_SIGN.MINUS);
+
+      // Auto sign (positive value)
+      // Should not show any sign for positive values
+      const autoPositiveComponent = mount(UNumber, {
+        props: {
+          value,
+          sign: MATH_SIGN_TYPE.auto as Props["sign"],
+        },
+      });
+
+      expect(autoPositiveComponent.text()).not.toContain(MATH_SIGN.MINUS);
+      expect(autoPositiveComponent.text()).not.toContain(MATH_SIGN.PLUS);
+
+      // Positive sign
+      // Should show plus sign regardless of value
+      const positiveComponent = mount(UNumber, {
+        props: {
+          value,
+          sign: MATH_SIGN_TYPE.positive as Props["sign"],
+        },
+      });
+
+      expect(positiveComponent.text()).toContain(MATH_SIGN.PLUS);
+
+      // Negative sign
+      // Should show minus sign regardless of value
+      const negativeComponent = mount(UNumber, {
+        props: {
+          value,
+          sign: MATH_SIGN_TYPE.negative as Props["sign"],
+        },
+      });
+
+      expect(negativeComponent.text()).toContain(MATH_SIGN.MINUS);
+
+      // Unsigned
+      // Should not show any sign regardless of value
+      const unsignedComponent = mount(UNumber, {
+        props: {
+          value: testNegativeValue,
+          sign: MATH_SIGN_TYPE.unsigned as Props["sign"],
+        },
+      });
+
+      expect(unsignedComponent.text()).not.toContain(MATH_SIGN.MINUS);
+      expect(unsignedComponent.text()).not.toContain(MATH_SIGN.PLUS);
+    });
+
+    // Currency prop
+    it("renders the currency symbol", () => {
+      const currency = "$";
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+          currency,
+        },
+      });
+
+      expect(component.text()).toContain(currency);
+    });
+
+    // CurrencyAlign prop
+    it("aligns currency correctly based on currencyAlign prop", () => {
+      const currency = "$";
+
+      const alignTests = [
+        { align: "left", expectation: (text: string) => text.startsWith(currency) },
+        { align: "right", expectation: (text: string) => text.endsWith(currency) },
+      ];
+
+      alignTests.forEach(({ align, expectation }) => {
+        const component = mount(UNumber, {
+          props: {
+            value,
+            currency,
+            currencyAlign: align as Props["currencyAlign"],
+          },
+        });
+
+        expect(expectation(component.text())).toBe(true);
+      });
+    });
+
+    // CurrencySpace prop
+    it("adds space between currency and number when currencySpace is true", () => {
+      const currency = "$";
+
+      const spaceTests = [
+        { space: true, align: "left" },
+        { space: false, align: "left" },
+        { space: true, align: "right" },
+        { space: false, align: "right" },
+      ];
+
+      spaceTests.forEach(({ space, align }) => {
+        const component = mount(UNumber, {
+          props: {
+            value,
+            currency,
+            currencySpace: space,
+            currencyAlign: align as Props["currencyAlign"],
+          },
+        });
+
+        expect(component.html()).toContain(currency);
+        // Visual inspection of spacing would be done in a real browser
+        // Here we just verify the component renders with the given props
+        expect(component.props().currencySpace).toBe(space);
+        expect(component.props().currencyAlign).toBe(align);
+      });
+    });
+
+    // MinFractionDigits prop
+    it("adds zeros to meet the minimum fraction digits requirement", () => {
+      const value = 123;
+      const minFractionDigits = 2;
+      const expectedMinFractionResult = "123,00";
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+          minFractionDigits,
+        },
+      });
+
+      expect(component.text()).toContain(expectedMinFractionResult);
+    });
+
+    // MaxFractionDigits prop
+    it("rounds the fraction to the maximum number of digits", () => {
+      const value = 123.456789;
+      const maxFractionDigits = 2;
+      const expectedMaxFractionResult = "123,46"; // Rounded from .456789 to 2 digits
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+          maxFractionDigits,
+        },
+      });
+
+      expect(component.text()).toContain(expectedMaxFractionResult);
+      // Original decimal part should not be present
+      const originalDecimalPart = value.toString().split(".")[1];
+
+      expect(component.text()).not.toContain(originalDecimalPart);
+    });
+
+    // DecimalSeparator prop
+    it("uses the correct decimal separator", () => {
+      const value = 123.45;
+      const decimalSeparator = ",";
+      const expectedFormattedNumber = "123,45";
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+          decimalSeparator,
+        },
+      });
+
+      expect(component.text()).toContain(expectedFormattedNumber);
+    });
+
+    // ThousandsSeparator prop
+    it("uses the correct thousands separator", () => {
+      const value = 1234567.89;
+      const thousandsSeparator = " ";
+      const expectedFormattedInteger = "1 234 567";
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+          thousandsSeparator,
+        },
+      });
+
+      expect(component.text()).toContain(expectedFormattedInteger);
+    });
+
+    // Align prop
+    it("applies the correct align class", () => {
+      const alignClasses = {
+        left: "justify-start",
+        right: "justify-end",
+      };
+
+      Object.entries(alignClasses).forEach(([align, classes]) => {
+        const component = mount(UNumber, {
+          props: {
+            align: align as Props["align"],
+          },
+        });
+
+        expect(component.attributes("class")).toContain(classes);
+      });
+    });
+
+    // DataTest prop
+    it("applies the correct data-test attribute", () => {
+      const testDataTest = "test-number";
+
+      const component = mount(UNumber, {
+        props: {
+          dataTest: testDataTest,
+        },
+      });
+
+      expect(component.find("[data-test]").attributes("data-test")).toBe(testDataTest);
+    });
+  });
+
+  // Slots tests
+  describe("Slots", () => {
+    // Left slot
+    it("renders content from left slot", () => {
+      const slotText = "Left";
+      const slotClass = "left-content";
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+        },
+        slots: {
+          left: `<span class='${slotClass}'>${slotText}</span>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotText);
+    });
+
+    // Right slot
+    it("renders content from right slot", () => {
+      const slotText = "Right";
+      const slotClass = "right-content";
+
+      const component = mount(UNumber, {
+        props: {
+          value,
+        },
+        slots: {
+          right: `<span class='${slotClass}'>${slotText}</span>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotText);
+    });
+  });
+
+  // Exposed refs tests
+  describe("Exposed refs", () => {
+    // wrapperRef
+    it("exposes wrapperRef", () => {
+      const component = mount(UNumber, {});
+
+      expect(component.vm.wrapperRef).toBeDefined();
+    });
+  });
+});

package/utils/node/helper.js

@@ -1,6 +1,7 @@
 import esbuild from "esbuild";
 import path from "node:path";
 import { cwd } from "node:process";
+import { pathToFileURL } from "node:url";
 import { existsSync, statSync } from "node:fs";
 import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
 
@@ -100,7 +101,9 @@ export async function getDefaultComponentConfig(name, configDir) {
   }
 
   if (existsSync(configOutPath)) {
-    config = (await import(configOutPath)).default;
+    const module = await import(pathToFileURL(configOutPath));
+
+    config = module.default;
   }
 
   return config;

package/utils/node/loaderIcon.js

@@ -125,7 +125,7 @@ export function generateIconExports() {
   const entries = files
     .map((relativePath) => {
       const fullImportPath = path.resolve(cachePath, relativePath).replace(/\\/g, "/");
-      const virtualPath = path.join(cwd(), ICONS_CACHED_DIR, relativePath);
+      const virtualPath = path.join(cwd(), ICONS_CACHED_DIR, relativePath).replace(/\\/g, "/");
 
       return `  ["${virtualPath}", import("${fullImportPath}?component")]`;
     })

package/utils/node/vuelessConfig.js

@@ -1,6 +1,7 @@
 import fs from "node:fs";
 import path from "node:path";
 import { cwd } from "node:process";
+import { pathToFileURL } from "node:url";
 import { defineConfig } from "cva";
 import { createGetMergedConfig } from "./mergeConfigs.js";
 import { merge } from "lodash-es";
@@ -35,7 +36,9 @@ export let vuelessConfig = {};
   fs.existsSync(configPathTs) && (await buildTSFile(configPathTs, configOutPath));
 
   if (fs.existsSync(configOutPath)) {
-    vuelessConfig = (await import(configOutPath)).default;
+    const module = await import(pathToFileURL(configOutPath));
+
+    vuelessConfig = module.default;
   }
 })();
 

package/utils/storybook.ts

@@ -304,7 +304,7 @@ export function getArgTypes(componentName: string | undefined) {
       description: event.description,
     };
 
-    if (import.meta.env.STORYBOOK_FULL) {
+    if (import.meta.env.DEV) {
       const eventName = "on" + event.name.charAt(0).toUpperCase() + event.name.slice(1);
 
       types[eventName] = {