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

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

@@ -30,10 +30,8 @@ describe("UFiles.vue", () => {
     URL.createObjectURL = originalCreateObjectURL;
   });
 
-  // Props tests
   describe("Props", () => {
-    // FileList prop
-    it("renders the correct number of files", () => {
+    it("FileList – renders the correct number of files", () => {
       const component = mount(UFiles, {
         props: {
           fileList,
@@ -45,8 +43,7 @@ describe("UFiles.vue", () => {
       expect(fileComponents.length).toBe(fileList.length);
     });
 
-    // Label prop
-    it("renders the correct label text", () => {
+    it("Label – renders the correct label text", () => {
       const label = "File List";
 
       const component = mount(UFiles, {
@@ -61,8 +58,7 @@ describe("UFiles.vue", () => {
       expect(labelComponent.props("label")).toBe(label);
     });
 
-    // Description prop
-    it("passes the correct description to ULabel", () => {
+    it("Description – passes the correct description to ULabel", () => {
       const description = "List of files";
 
       const component = mount(UFiles, {
@@ -77,8 +73,7 @@ describe("UFiles.vue", () => {
       expect(labelComponent.props("description")).toBe(description);
     });
 
-    // Size prop
-    it("passes the correct size prop to ULabel", () => {
+    it("Size – passes the correct size prop to ULabel", () => {
       const sizes = ["sm", "md", "lg"];
 
       sizes.forEach((size) => {
@@ -95,8 +90,7 @@ describe("UFiles.vue", () => {
       });
     });
 
-    // Removable prop
-    it("passes removable prop to UFile components", () => {
+    it("Removable – passes removable prop to UFile components", () => {
       const removable = true;
       const fileList = [createMockFile("file1.pdf")];
 
@@ -112,8 +106,7 @@ describe("UFiles.vue", () => {
       expect(fileComponent.props("removable")).toBe(removable);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute to file items", () => {
+    it("DataTest – applies the correct data-test attribute to file items", () => {
       const dataTest = "test-files";
       const fileList = [createMockFile("file1.pdf")];
 
@@ -129,8 +122,7 @@ describe("UFiles.vue", () => {
       expect(fileComponent.attributes("data-test")).toBe(`${dataTest}-item-0`);
     });
 
-    // Image file detection
-    it("detects image files and sets imageUrl prop", () => {
+    it("Image – detects image files and sets imageUrl prop", () => {
       const imageFile = createMockFile("image.jpg", "image/jpeg");
       const fileList = [imageFile];
 
@@ -146,10 +138,8 @@ describe("UFiles.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Default slot
-    it("renders content from default slot", () => {
+    it("Default – renders content from default slot", () => {
       const slotContent = "Custom Content";
 
       const component = mount(UFiles, {
@@ -164,8 +154,7 @@ describe("UFiles.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Label slot
-    it("renders content from label slot", () => {
+    it("Label – renders content from label slot", () => {
       const label = "File List";
       const slotText = "Custom Label";
       const slotClass = "label-content";
@@ -184,8 +173,7 @@ describe("UFiles.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Before-file slot
-    it("renders content from before-file slot", () => {
+    it("Before – renders content from before-file slot", () => {
       const slotText = "Before";
       const slotClass = "before-content";
 
@@ -206,8 +194,7 @@ describe("UFiles.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(`${slotText}0`);
     });
 
-    // After-file slot
-    it("renders content from after-file slot", () => {
+    it("After – renders content from after-file slot", () => {
       const slotText = "After";
       const slotClass = "after-content";
 
@@ -228,8 +215,7 @@ describe("UFiles.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(`${slotText}0`);
     });
 
-    // File slot with bindings
-    it("provides correct bindings to file slot", () => {
+    it("File – provides correct bindings to file slot", () => {
       const fileName = "file1.pdf";
       const fileIndex = "0";
       const fileList = [createMockFile(fileName)];
@@ -266,10 +252,8 @@ describe("UFiles.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Remove event
-    it("emits remove event when file is removed", async () => {
+    it("Remove – emits remove event when file is removed", async () => {
       const fileList = [createMockFile("file1.pdf")];
       const fileId = "test-id";
       const removable = true;
@@ -291,10 +275,8 @@ describe("UFiles.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // itemsRef
-    it("exposes itemsRef", () => {
+    it("itemsRef – exposes itemsRef", () => {
       const component = mount(UFiles, {
         props: {
           fileList: [],

package/ui.text-header/config.ts

@@ -6,6 +6,7 @@ export default /*tw*/ {
         lifted: "text-{color}-lifted",
         accented: "text-{color}-accented",
         muted: "text-{color}/(--vl-disabled-opacity)",
+        inverted: "text-{color} brightness-125 dark:brightness-75",
       },
       color: {
         inherit: "text-inherit",
@@ -34,6 +35,7 @@ export default /*tw*/ {
       { color: "text", variant: "lifted", class: "text-lifted" },
       { color: "text", variant: "accented", class: "text-accented" },
       { color: "text", variant: "muted", class: "text-muted" },
+      { color: "text", variant: "inverted", class: "text-inverted brightness-100 dark:brightness-100" },
     ],
   },
   defaults: {

package/ui.text-header/tests/UHeader.test.ts

@@ -6,10 +6,8 @@ import UHeader from "../UHeader.vue";
 import type { Props } from "../types";
 
 describe("UHeader.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Size prop
-    it("applies the correct size class", async () => {
+    it("Size – applies the correct size class", async () => {
       const size = {
         xs: "text-lg",
         sm: "text-xl",
@@ -30,8 +28,7 @@ describe("UHeader.vue", () => {
       });
     });
 
-    // Color prop
-    it("applies the correct color class", async () => {
+    it("Color – applies the correct color class", async () => {
       const colors = [
         "primary",
         "secondary",
@@ -58,8 +55,7 @@ describe("UHeader.vue", () => {
       });
     });
 
-    // Variant prop
-    it("applies the correct variant class", async () => {
+    it("Variant – applies the correct variant class", async () => {
       const variants = {
         default: "text-primary",
         lifted: "text-primary-lifted",
@@ -79,8 +75,7 @@ describe("UHeader.vue", () => {
       });
     });
 
-    // Weight prop
-    it("applies the correct weight class", async () => {
+    it("Weight – applies the correct weight class", async () => {
       const weights = {
         light: "font-light",
         normal: "font-normal",
@@ -100,8 +95,7 @@ describe("UHeader.vue", () => {
       });
     });
 
-    // Label prop
-    it("renders the correct label text", () => {
+    it("Label – renders the correct label text", () => {
       const label = "Header Text";
 
       const component = mount(UHeader, {
@@ -113,8 +107,7 @@ describe("UHeader.vue", () => {
       expect(component.text()).toBe(label);
     });
 
-    // Tag prop
-    it("renders the correct HTML tag", () => {
+    it("Tag – renders the correct HTML tag", () => {
       const tags = ["h1", "h2", "h3", "h4", "h5", "h6", "div", "span"];
 
       tags.forEach((tag) => {
@@ -128,8 +121,7 @@ describe("UHeader.vue", () => {
       });
     });
 
-    // Line prop
-    it("applies line class when line prop is true", () => {
+    it("Line – applies line class when line prop is true", () => {
       const line = true;
       const lineClasses = "leading-none";
 
@@ -142,8 +134,7 @@ describe("UHeader.vue", () => {
       expect(component.attributes("class")).toContain(lineClasses);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-header";
 
       const component = mount(UHeader, {
@@ -156,10 +147,8 @@ describe("UHeader.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Default slot
-    it("renders content from default slot", () => {
+    it("Default – renders content from default slot", () => {
       const slotContent = "Custom Content";
       const label = "Header";
 
@@ -177,10 +166,8 @@ describe("UHeader.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // headerRef
-    it("exposes headerRef", () => {
+    it("headerRef – exposes headerRef", () => {
       const component = mount(UHeader, {});
 
       expect(component.vm.headerRef).toBeDefined();

package/ui.text-notify/tests/UNotify.test.ts

@@ -46,10 +46,8 @@ describe("UNotify.vue", () => {
     dispatchNotifyEvent("notifyClearAll", {} as Notification);
   });
 
-  // Props tests
   describe("Props", () => {
-    // XPosition prop
-    it("applies the correct xPosition style", async () => {
+    it("X Position – applies the correct xPosition style", async () => {
       const positions = ["left", "center", "right"];
 
       for (const position of positions) {
@@ -73,8 +71,7 @@ describe("UNotify.vue", () => {
       }
     });
 
-    // YPosition prop
-    it("applies the correct yPosition style", async () => {
+    it("Y Position – applies the correct yPosition style", async () => {
       const positions = ["top", "bottom"];
 
       for (const position of positions) {
@@ -93,8 +90,7 @@ describe("UNotify.vue", () => {
       }
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-notify";
 
       const component = mountWithLocale({
@@ -107,8 +103,7 @@ describe("UNotify.vue", () => {
 
   // Event handling tests
   describe("Event Handling", () => {
-    // notifyStart event
-    it("adds notification when notifyStart event is dispatched", async () => {
+    it("notifyStart – adds notification when notifyStart event is dispatched", async () => {
       const component = mountWithLocale();
 
       dispatchNotifyEvent("notifyStart", mockNotification);
@@ -118,8 +113,7 @@ describe("UNotify.vue", () => {
       expect(component.text()).toContain(mockNotification.description);
     });
 
-    // notifyEnd event
-    it("removes notification when notifyEnd event is dispatched", async () => {
+    it("notifyEnd – removes notification when notifyEnd event is dispatched", async () => {
       const component = mountWithLocale();
 
       // Add notification
@@ -145,8 +139,7 @@ describe("UNotify.vue", () => {
       expect(finalCount).toBeLessThan(initialCount);
     });
 
-    // notifyClearAll event
-    it("clears all notifications when notifyClearAll event is dispatched", async () => {
+    it("notifyClearAll – clears all notifications when notifyClearAll event is dispatched", async () => {
       const component = mountWithLocale();
 
       // Add multiple notifications
@@ -176,8 +169,7 @@ describe("UNotify.vue", () => {
       expect(component.text()).not.toContain("Notification 2");
     });
 
-    // Close button click
-    it("removes notification when close button is clicked", async () => {
+    it("Close – removes notification when close button is clicked", async () => {
       const component = mountWithLocale();
 
       // Add notification
@@ -203,8 +195,7 @@ describe("UNotify.vue", () => {
 
   // Notification type tests
   describe("Notification Types", () => {
-    // Success notification
-    it("renders success notification with correct icon", async () => {
+    it("Success – renders success notification with correct icon", async () => {
       const component = mountWithLocale();
 
       dispatchNotifyEvent("notifyStart", {
@@ -223,8 +214,7 @@ describe("UNotify.vue", () => {
       expect(successIcon).toBeDefined();
     });
 
-    // Warning notification
-    it("renders warning notification with correct icon", async () => {
+    it("Warning – renders warning notification with correct icon", async () => {
       const component = mountWithLocale();
 
       dispatchNotifyEvent("notifyStart", {
@@ -243,8 +233,7 @@ describe("UNotify.vue", () => {
       expect(warningIcon).toBeDefined();
     });
 
-    // Error notification
-    it("renders error notification with correct icon", async () => {
+    it("Error – renders error notification with correct icon", async () => {
       const component = mountWithLocale();
 
       dispatchNotifyEvent("notifyStart", {
@@ -263,8 +252,7 @@ describe("UNotify.vue", () => {
       expect(errorIcon).toBeDefined();
     });
 
-    // Info notification
-    it("renders info notification with correct icon", async () => {
+    it("Info – renders info notification with correct icon", async () => {
       const component = mountWithLocale();
 
       dispatchNotifyEvent("notifyStart", {
@@ -284,10 +272,8 @@ describe("UNotify.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // notificationRef
-    it("exposes notificationRef", () => {
+    it("notificationRef – exposes notificationRef", () => {
       const component = mountWithLocale();
 
       expect(component.vm.notificationRef).toBeDefined();

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

@@ -13,10 +13,8 @@ describe("UNumber.vue", () => {
     value = 1234.56;
   });
 
-  // Props tests
   describe("Props", () => {
-    // Size prop
-    it("applies the correct size class", async () => {
+    it("Size – applies the correct size class", async () => {
       const sizeClasses = {
         xs: "text-tiny",
         sm: "text-small",
@@ -35,8 +33,7 @@ describe("UNumber.vue", () => {
       });
     });
 
-    // Color prop
-    it("applies the correct color class", async () => {
+    it("Color – applies the correct color class", async () => {
       const colors = [
         "primary",
         "secondary",
@@ -60,8 +57,7 @@ describe("UNumber.vue", () => {
       });
     });
 
-    // Value prop
-    it("renders the correct number value", () => {
+    it("Value – renders the correct number value", () => {
       const expectedFormattedNumber = "1 234,56";
 
       const component = mount(UNumber, {
@@ -73,8 +69,7 @@ describe("UNumber.vue", () => {
       expect(component.text()).toContain(expectedFormattedNumber);
     });
 
-    // Sign prop
-    it("renders the correct sign based on sign prop", () => {
+    it("Sign – renders the correct sign based on sign prop", () => {
       const testNegativeValue = -123;
 
       // Auto sign (negative value)
@@ -135,8 +130,7 @@ describe("UNumber.vue", () => {
       expect(unsignedComponent.text()).not.toContain(MATH_SIGN.PLUS);
     });
 
-    // Currency prop
-    it("renders the currency symbol", () => {
+    it("Currency – renders the currency symbol", () => {
       const currency = "$";
 
       const component = mount(UNumber, {
@@ -149,8 +143,7 @@ describe("UNumber.vue", () => {
       expect(component.text()).toContain(currency);
     });
 
-    // CurrencyAlign prop
-    it("aligns currency correctly based on currencyAlign prop", () => {
+    it("CurrencyAlign – aligns currency correctly based on currencyAlign prop", () => {
       const currency = "$";
 
       const alignTests = [
@@ -171,8 +164,7 @@ describe("UNumber.vue", () => {
       });
     });
 
-    // CurrencySpace prop
-    it("adds space between currency and number when currencySpace is true", () => {
+    it("CurrencySpace – adds space between currency and number when currencySpace is true", () => {
       const currency = "$";
 
       const spaceTests = [
@@ -200,8 +192,7 @@ describe("UNumber.vue", () => {
       });
     });
 
-    // MinFractionDigits prop
-    it("adds zeros to meet the minimum fraction digits requirement", () => {
+    it("MinFractionDigits – adds zeros to meet the minimum fraction digits requirement", () => {
       const value = 123;
       const minFractionDigits = 2;
       const expectedMinFractionResult = "123,00";
@@ -216,8 +207,7 @@ describe("UNumber.vue", () => {
       expect(component.text()).toContain(expectedMinFractionResult);
     });
 
-    // MaxFractionDigits prop
-    it("rounds the fraction to the maximum number of digits", () => {
+    it("MaxFractionDigits – 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
@@ -236,8 +226,7 @@ describe("UNumber.vue", () => {
       expect(component.text()).not.toContain(originalDecimalPart);
     });
 
-    // DecimalSeparator prop
-    it("uses the correct decimal separator", () => {
+    it("DecimalSeparator – uses the correct decimal separator", () => {
       const value = 123.45;
       const decimalSeparator = ",";
       const expectedFormattedNumber = "123,45";
@@ -252,8 +241,7 @@ describe("UNumber.vue", () => {
       expect(component.text()).toContain(expectedFormattedNumber);
     });
 
-    // ThousandsSeparator prop
-    it("uses the correct thousands separator", () => {
+    it("ThousandsSeparator – uses the correct thousands separator", () => {
       const value = 1234567.89;
       const thousandsSeparator = " ";
       const expectedFormattedInteger = "1 234 567";
@@ -268,8 +256,7 @@ describe("UNumber.vue", () => {
       expect(component.text()).toContain(expectedFormattedInteger);
     });
 
-    // Align prop
-    it("applies the correct align class", () => {
+    it("Align – applies the correct align class", () => {
       const alignClasses = {
         left: "justify-start",
         right: "justify-end",
@@ -286,8 +273,7 @@ describe("UNumber.vue", () => {
       });
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const testDataTest = "test-number";
 
       const component = mount(UNumber, {
@@ -300,10 +286,8 @@ describe("UNumber.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Left slot
-    it("renders content from left slot", () => {
+    it("Left – renders content from left slot", () => {
       const slotText = "Left";
       const slotClass = "left-content";
 
@@ -320,8 +304,7 @@ describe("UNumber.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Right slot
-    it("renders content from right slot", () => {
+    it("Right – renders content from right slot", () => {
       const slotText = "Right";
       const slotClass = "right-content";
 
@@ -339,10 +322,8 @@ describe("UNumber.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // wrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const component = mount(UNumber, {});
 
       expect(component.vm.wrapperRef).toBeDefined();