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

package/icons/internal/progress_activity.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M480-74.02q-85.48 0-159.53-31.38-74.04-31.38-128.87-86.2-54.82-54.83-86.2-128.87Q74.02-394.52 74.02-480q0-85.47 31.38-159.48 31.37-74.02 86.16-128.91 54.79-54.89 128.86-86.36 74.07-31.47 159.58-31.47 13.67 0 23.87 10.34 10.2 10.33 10.2 23.99 0 13.65-10.2 23.85-10.2 10.19-23.87 10.19-140.29 0-239.07 98.78T142.15-480q0 140.28 98.78 239.07 98.78 98.78 239.07 98.78 140.28 0 239.07-98.78 98.78-98.78 98.78-239.07 0-13.67 10.19-23.87 10.2-10.2 23.85-10.2 13.66 0 23.99 10.2 10.34 10.2 10.34 23.87 0 85.51-31.48 159.58-31.49 74.08-86.32 128.88t-128.88 86.16Q565.5-74.02 480-74.02Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.1-beta.1",
+  "version": "1.3.2-beta.0",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.container-accordion/tests/UAccordion.test.ts

@@ -11,9 +11,8 @@ describe("UAccordion", () => {
     { value: "b", title: "B" },
   ];
 
-  // Props
   describe("Props", () => {
-    it("renders items from options", () => {
+    it("Options – renders items from options", () => {
       const component = mount(UAccordion, {
         props: { options },
       });
@@ -23,7 +22,7 @@ describe("UAccordion", () => {
       expect(items.length).toBe(options.length);
     });
 
-    it("passes base props down to items", () => {
+    it("Base Props – passes base props down to items", () => {
       const component = mount(UAccordion, {
         props: { size: "md", disabled: true, options },
       });
@@ -34,7 +33,7 @@ describe("UAccordion", () => {
       expect(item.props("disabled")).toBe(true);
     });
 
-    it("applies data-test attribute to wrapper", () => {
+    it("Data Test – applies data-test attribute to wrapper", () => {
       const dataTest = "accordion-test";
 
       const component = mount(UAccordion, {
@@ -45,9 +44,8 @@ describe("UAccordion", () => {
     });
   });
 
-  // Exposed refs
   describe("Exposed refs", () => {
-    it("exposes accordionRef", () => {
+    it("accordionRef – exposes accordionRef", () => {
       const component = mount(UAccordion);
 
       expect(component.vm.accordionRef).toBeDefined();
@@ -55,9 +53,8 @@ describe("UAccordion", () => {
     });
   });
 
-  // Events
   describe("Events", () => {
-    it("emits update:modelValue when an item is toggled (single)", async () => {
+    it("Model Value – emits update:modelValue when an item is toggled (single)", async () => {
       const modelValue = ref<string | null>(null);
 
       const component = mount(UAccordion, {
@@ -86,7 +83,7 @@ describe("UAccordion", () => {
       expect(updates2?.[1]).toEqual([null]);
     });
 
-    it("emits update:modelValue with arrays when multiple=true", async () => {
+    it("Model Value – emits update:modelValue with arrays when multiple=true", async () => {
       const modelValue = ref<string[]>([]);
 
       const component = mount(UAccordion, {

package/ui.container-accordion-item/tests/UAccordionItem.test.ts

@@ -7,10 +7,8 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import type { Props } from "../types";
 
 describe("UAccordionItem", () => {
-  // Props
   describe("Props", () => {
-    // Title prop
-    it("renders with title prop", () => {
+    it("Title – renders with title prop", () => {
       const title = "Accordion Title";
 
       const component = mount(UAccordionItem, {
@@ -22,8 +20,7 @@ describe("UAccordionItem", () => {
       expect(component.find("[vl-key='title']").text()).toContain(title);
     });
 
-    // Description prop
-    it("renders with description prop", () => {
+    it("Description – renders with description prop", () => {
       const description = "Accordion Description";
 
       const component = mount(UAccordionItem, {
@@ -35,8 +32,7 @@ describe("UAccordionItem", () => {
       expect(component.find("[vl-key='description']").text()).toBe(description);
     });
 
-    // Size prop
-    it("applies correct size classes", () => {
+    it("Size – applies correct size classes", () => {
       const sizeClasses = {
         sm: "text-small",
         md: "text-medium",
@@ -54,8 +50,7 @@ describe("UAccordionItem", () => {
       });
     });
 
-    // ToggleIcon prop
-    it("applies correct toggle icon behavior", () => {
+    it("Toggle Icon – applies correct toggle icon behavior", () => {
       const toggleIconTests = [
         { toggleIcon: true, exists: true, iconName: "keyboard_arrow_down" },
         { toggleIcon: "custom_icon", exists: true, iconName: "custom_icon" },
@@ -79,8 +74,7 @@ describe("UAccordionItem", () => {
       });
     });
 
-    // ID prop
-    it("uses provided id prop", () => {
+    it("ID – uses provided id prop", () => {
       const id = "custom-id";
       const description = "some text";
 
@@ -94,8 +88,7 @@ describe("UAccordionItem", () => {
       expect(component.find(`[vl-key='description']`).exists()).toBe(true);
     });
 
-    // DataTest prop
-    it("applies data-test attribute", () => {
+    it("Data Test – applies data-test attribute", () => {
       const dataTest = "accordion-test";
 
       const component = mount(UAccordionItem, {
@@ -108,10 +101,8 @@ describe("UAccordionItem", () => {
     });
   });
 
-  // Slots
   describe("Slots", () => {
-    // Toggle slot
-    it("renders default toggle icon when toggle slot is not provided", () => {
+    it("Toggle – renders default toggle icon when toggle slot is not provided", () => {
       const toggleIcon = true;
 
       const component = mount(UAccordionItem, {
@@ -125,8 +116,7 @@ describe("UAccordionItem", () => {
       expect(icon.exists()).toBe(true);
     });
 
-    // Custom toggle slot
-    it("renders custom content in toggle slot", () => {
+    it("Toggle – renders custom content in toggle slot", () => {
       const toggleIcon = true;
       const slotClass = "custom-toggle";
       const slotContent = "Custom Toggle";
@@ -145,8 +135,7 @@ describe("UAccordionItem", () => {
       expect(component.findComponent(UIcon).exists()).toBe(false);
     });
 
-    // Toggle slot bindings
-    it("provides icon-name and opened bindings to toggle slot", async () => {
+    it("Toggle – provides icon-name and opened bindings to toggle slot", async () => {
       const toggleIcon = true;
       const toggleClass = "custom-toggle";
       const defaultIconName = "keyboard_arrow_down";
@@ -176,8 +165,7 @@ describe("UAccordionItem", () => {
       expect(toggleElement.attributes("data-opened")).toBe("true");
     });
 
-    // Title slot
-    it("renders custom content in title slot", () => {
+    it("Title – renders custom content in title slot", () => {
       const title = "Original Title";
       const slotClass = "custom-title";
       const slotContent = "Custom Title Content";
@@ -195,8 +183,7 @@ describe("UAccordionItem", () => {
       expect(component.text()).not.toContain(title);
     });
 
-    // Title slot bindings
-    it("provides title binding to title slot", () => {
+    it("Title – provides title binding to title slot", () => {
       const title = "Test Title";
       const slotClass = "custom-title";
 
@@ -217,8 +204,7 @@ describe("UAccordionItem", () => {
       expect(titleElement.attributes("data-title")).toBe(title);
     });
 
-    // Description slot
-    it("renders custom content in description slot", () => {
+    it("Description – renders custom content in description slot", () => {
       const description = "Original Description";
       const slotClass = "custom-description";
       const slotContent = "Custom Description Content";
@@ -236,8 +222,7 @@ describe("UAccordionItem", () => {
       expect(component.text()).not.toContain(description);
     });
 
-    // Description slot bindings
-    it("provides description binding to description slot", () => {
+    it("Description – provides description binding to description slot", () => {
       const description = "Test Description";
       const slotClass = "custom-description";
 
@@ -274,8 +259,7 @@ describe("UAccordionItem", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Default slot
-    it("renders default slot content when accordion is opened", async () => {
+    it("Default – renders default slot content when accordion is opened", async () => {
       const slotContent = "Custom accordion content";
       const slotClass = "custom-content";
 
@@ -320,8 +304,7 @@ describe("UAccordionItem", () => {
       expect(component.find("[vl-key='content']").exists()).toBe(false);
     });
 
-    // Slot interactions with accordion behavior
-    it("title slot content is clickable and toggles accordion", async () => {
+    it("Title – title slot content is clickable and toggles accordion", async () => {
       const title = "Test Title";
       const slotClass = "custom-title";
       const slotContent = "Custom Title Content";
@@ -409,10 +392,8 @@ describe("UAccordionItem", () => {
     });
   });
 
-  // Events
   describe("Events", () => {
-    // Click event
-    it("emits click event with id and opened state when clicked", async () => {
+    it("Click – emits click event with id and opened state when clicked", async () => {
       const id = "test-id";
 
       const component = mount(UAccordionItem, {
@@ -437,10 +418,8 @@ describe("UAccordionItem", () => {
     });
   });
 
-  // Exposed refs
   describe("Exposed refs", () => {
-    // WrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const component = mount(UAccordionItem);
 
       expect(component.vm.wrapperRef).toBeDefined();
@@ -448,10 +427,8 @@ describe("UAccordionItem", () => {
     });
   });
 
-  // Component behavior
   describe("Component behavior", () => {
-    // Toggle behavior
-    it("toggles opened state when clicked", async () => {
+    it("Toggle – toggles opened state when clicked", async () => {
       const description = "Test Description";
       const openedClass = "opacity-100";
 

package/ui.container-card/config.ts

@@ -7,6 +7,7 @@ export default /*tw*/ {
         outlined: "bg-default border-muted",
         subtle: "bg-muted border-default/50",
         soft: "bg-muted border-transparent",
+        inverted: "bg-inverted border-transparent",
       },
     },
   },
@@ -23,6 +24,7 @@ export default /*tw*/ {
         outlined: "border-muted",
         subtle: "border-default/50",
         soft: "border-default/50",
+        inverted: "border-default/50",
       },
     },
   },

package/ui.container-card/tests/UCard.test.ts

@@ -7,10 +7,8 @@ import UHeader from "../../ui.text-header/UHeader.vue";
 import type { Props } from "../types";
 
 describe("UCard", () => {
-  // Props
   describe("Props", () => {
-    // Title prop
-    it("renders with title prop", () => {
+    it("Title – renders with title prop", () => {
       const title = "Card Title";
 
       const component = mount(UCard, {
@@ -25,15 +23,13 @@ describe("UCard", () => {
       expect(header.props("label")).toBe(title);
     });
 
-    // Title prop - Header visibility without props or slots
-    it("does not show header when no title or slots are provided", () => {
+    it("Title – does not show header when no title or slots are provided", () => {
       const component = mount(UCard);
 
       expect(component.findComponent(UHeader).exists()).toBe(false);
     });
 
-    // Description prop
-    it("renders with description prop", () => {
+    it("Description – renders with description prop", () => {
       const title = "Card Title";
       const description = "Card Description";
 
@@ -47,8 +43,7 @@ describe("UCard", () => {
       expect(component.find("[vl-key='description']").text()).toContain(description);
     });
 
-    // Variant prop
-    it("applies correct variant classes", () => {
+    it("Variant – applies correct variant classes", () => {
       const variants = {
         solid: "bg-default border-transparent",
         outlined: "bg-default border-muted",
@@ -67,8 +62,7 @@ describe("UCard", () => {
       });
     });
 
-    // DataTest prop
-    it("applies data-test attribute", () => {
+    it("Data Test – applies data-test attribute", () => {
       const dataTest = "card-test";
 
       const component = mount(UCard, {
@@ -81,10 +75,8 @@ describe("UCard", () => {
     });
   });
 
-  // Slots
   describe("Slots", () => {
-    // Default slot
-    it("renders content in default slot", () => {
+    it("Default – renders content in default slot", () => {
       const slotClass = "default-content";
       const slotContent = "Default Content";
 
@@ -98,8 +90,7 @@ describe("UCard", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Title slot
-    it("renders custom content in title slot", () => {
+    it("Title – renders custom content in title slot", () => {
       const title = "Original Title";
       const slotClass = "custom-title";
       const slotContent = "Custom Title";
@@ -118,8 +109,7 @@ describe("UCard", () => {
       expect(component.findComponent(UHeader).exists()).toBe(false);
     });
 
-    // Before-title slot
-    it("renders content in before-title slot", () => {
+    it("Before-title – renders content in before-title slot", () => {
       const title = "Card Title";
       const slotClass = "before-title";
       const slotContent = "Before Title";
@@ -137,8 +127,7 @@ describe("UCard", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // After-title slot
-    it("renders content in after-title slot", () => {
+    it("After-title – renders content in after-title slot", () => {
       const title = "Card Title";
       const slotClass = "after-title";
       const slotContent = "After Title";
@@ -156,8 +145,7 @@ describe("UCard", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Actions slot
-    it("renders content in actions slot", () => {
+    it("Actions – renders content in actions slot", () => {
       const title = "Card Title";
       const slotClass = "actions";
       const slotContent = "Actions";
@@ -175,8 +163,7 @@ describe("UCard", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
 
-    // Footer-left slot
-    it("renders content in footer-left slot", () => {
+    it("Footer-left – renders content in footer-left slot", () => {
       const slotClass = "footer-left";
       const slotContent = "Footer Left";
 
@@ -191,8 +178,7 @@ describe("UCard", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Footer-right slot
-    it("renders content in footer-right slot", () => {
+    it("Footer-right – renders content in footer-right slot", () => {
       const slotClass = "footer-right";
       const slotContent = "Footer Right";
 
@@ -207,8 +193,7 @@ describe("UCard", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Footer visibility without slots
-    it("does not show footer when no footer slots are provided", () => {
+    it("Footer – does not show footer when no footer slots are provided", () => {
       const component = mount(UCard);
 
       expect(component.find("[vl-key='footerLeft']").exists()).toBe(false);
@@ -216,10 +201,8 @@ describe("UCard", () => {
     });
   });
 
-  // Exposed refs
   describe("Exposed refs", () => {
-    // WrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const component = mount(UCard);
 
       expect(component.vm.wrapperRef).toBeDefined();

package/ui.container-card/types.ts

@@ -17,7 +17,7 @@ export interface Props {
   /**
    * Card variant.
    */
-  variant?: "solid" | "outlined" | "subtle" | "soft";
+  variant?: "solid" | "outlined" | "subtle" | "soft" | "inverted";
 
   /**
    * Component config object.

package/ui.container-col/tests/UCol.test.ts

@@ -6,10 +6,8 @@ import UCol from "../UCol.vue";
 import type { Props } from "../types";
 
 describe("UCol.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Gap prop
-    it("applies the correct gap class", () => {
+    it("Gap – applies the correct gap class", () => {
       const gapClasses = {
         none: "gap-0",
         "3xs": "gap-0.5",
@@ -34,8 +32,7 @@ describe("UCol.vue", () => {
       });
     });
 
-    // Align prop
-    it("applies the correct align class", () => {
+    it("Align – applies the correct align class", () => {
       const alignClasses = {
         start: "items-start",
         end: "items-end",
@@ -55,8 +52,7 @@ describe("UCol.vue", () => {
       });
     });
 
-    // Content prop
-    it("applies the correct content class", () => {
+    it("Content – applies the correct content class", () => {
       const contentClasses = {
         start: "content-start",
         end: "content-end",
@@ -80,8 +76,7 @@ describe("UCol.vue", () => {
       });
     });
 
-    // Justify prop
-    it("applies the correct justify class", () => {
+    it("Justify – applies the correct justify class", () => {
       const justifyClasses = {
         start: "justify-start",
         end: "justify-end",
@@ -102,8 +97,7 @@ describe("UCol.vue", () => {
       });
     });
 
-    // Reverse prop
-    it("applies the correct reverse class", () => {
+    it("Reverse – applies the correct reverse class", () => {
       const reverseClasses = {
         true: "flex-col-reverse",
         false: "flex-col",
@@ -120,8 +114,7 @@ describe("UCol.vue", () => {
       });
     });
 
-    // Wrap prop
-    it("applies the correct wrap class", () => {
+    it("Wrap – applies the correct wrap class", () => {
       const wrap = true;
       const expectedClasses = "flex-wrap";
 
@@ -134,8 +127,7 @@ describe("UCol.vue", () => {
       expect(component.attributes("class")).toContain(expectedClasses);
     });
 
-    // Block prop
-    it("applies the correct block class", () => {
+    it("Block – applies the correct block class", () => {
       const block = true;
       const expectedClasses = "w-full";
 
@@ -148,8 +140,7 @@ describe("UCol.vue", () => {
       expect(component.attributes("class")).toContain(expectedClasses);
     });
 
-    // Tag prop
-    it("renders the correct HTML tag", () => {
+    it("Tag – renders the correct HTML tag", () => {
       const tags = ["div", "section", "article", "main", "aside", "nav", "span"];
 
       tags.forEach((tag) => {
@@ -163,8 +154,7 @@ describe("UCol.vue", () => {
       });
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("Data Test – applies the correct data-test attribute", () => {
       const dataTest = "col-test";
 
       const component = mount(UCol, {
@@ -177,10 +167,8 @@ describe("UCol.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(UCol, {
@@ -193,10 +181,8 @@ describe("UCol.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // wrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const component = mount(UCol);
 
       expect(component.vm.wrapperRef).toBeDefined();

package/ui.container-drawer/config.ts

@@ -86,6 +86,7 @@ export default /*tw*/ {
         outlined: "bg-default border-muted",
         subtle: "bg-muted border-default/50",
         soft: "bg-muted border-transparent",
+        inverted: "bg-inverted border-transparent",
       },
       position: {
         top: "top-0 flex-col rounded-b-large w-full h-auto",

package/ui.container-drawer/types.ts

@@ -28,7 +28,7 @@ export interface Props {
   /**
    * Drawer variant.
    */
-  variant?: "solid" | "outlined" | "subtle" | "soft";
+  variant?: "solid" | "outlined" | "subtle" | "soft" | "inverted";
 
   /**
    * Control whether the Drawer has a handle or not.