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

package/ui.skeleton-input/tests/USkeletonInput.test.ts

@@ -7,10 +7,8 @@ import USkeleton from "../../ui.skeleton/USkeleton.vue";
 import type { Props } from "../types";
 
 describe("USkeletonInput.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Label prop
-    it("renders label skeleton when label prop is true and labelAlign is not topInside", () => {
+    it("Label – renders label skeleton when label prop is true and labelAlign is not topInside", () => {
       const label = true;
       const labelAlign = "top";
 
@@ -29,8 +27,7 @@ describe("USkeletonInput.vue", () => {
       expect(skeletons.length).toBe(expectedComponentAmount);
     });
 
-    // Label prop - no label
-    it("does not render label skeleton when label prop is false", () => {
+    it("Label – does not render label skeleton when label prop is false", () => {
       const label = false;
       const labelAlign = "top";
 
@@ -49,8 +46,7 @@ describe("USkeletonInput.vue", () => {
       expect(skeletons.length).toBe(expectedComponentAmount);
     });
 
-    // Label prop - no label if labelAlign is topInside
-    it("does not render label skeleton when labelAlign is topInside", () => {
+    it("Label – does not render label skeleton when labelAlign is topInside", () => {
       const label = true;
       const labelAlign = "topInside";
 
@@ -69,8 +65,7 @@ describe("USkeletonInput.vue", () => {
       expect(skeletons.length).toBe(expectedComponentAmount);
     });
 
-    // Size prop - input
-    it("applies the correct size class to input for input type", () => {
+    it("Size – applies the correct size class to input for input type", () => {
       const size = {
         sm: "h-11",
         md: "h-12.5",
@@ -92,8 +87,7 @@ describe("USkeletonInput.vue", () => {
       });
     });
 
-    // Size prop - textarea
-    it("applies the correct size class to input for textarea type", () => {
+    it("Size – applies the correct size class to input for textarea type", () => {
       const size = {
         sm: "h-15.75",
         md: "h-18",
@@ -115,8 +109,7 @@ describe("USkeletonInput.vue", () => {
       });
     });
 
-    // Size prop - label
-    it("applies the correct size class to label", () => {
+    it("Size – applies the correct size class to label", () => {
       const size = {
         sm: "h-3",
         md: "h-3.5",
@@ -137,8 +130,7 @@ describe("USkeletonInput.vue", () => {
       });
     });
 
-    // LabelAlign prop
-    it("applies the correct labelAlign class to wrapper", () => {
+    it("LabelAlign – applies the correct labelAlign class to wrapper", () => {
       const labelAlign = {
         top: "flex-col",
         left: "flex-row",
@@ -156,8 +148,7 @@ describe("USkeletonInput.vue", () => {
       });
     });
 
-    // Type prop
-    it("applies the correct type class to input", () => {
+    it("Type – applies the correct type class to input", () => {
       const type = {
         input: "h-8.5", // Using md size and top labelAlign as default
         textarea: "h-14.5", // Using md size and top labelAlign as default
@@ -178,32 +169,7 @@ describe("USkeletonInput.vue", () => {
       });
     });
 
-    // Variant prop
-    it("passes the correct variant to skeleton components", () => {
-      const variants = {
-        light: "light",
-        default: "default",
-        dark: "dark",
-      };
-
-      Object.entries(variants).forEach(([variant, expectedVariant]) => {
-        const component = mount(USkeletonInput, {
-          props: {
-            variant: variant as Props["variant"],
-            labelAlign: "top", // To ensure label is rendered
-          },
-        });
-
-        const skeletons = component.findAllComponents(USkeleton);
-
-        skeletons.forEach((skeleton) => {
-          expect(skeleton.props("variant")).toBe(expectedVariant);
-        });
-      });
-    });
-
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-skeleton-input";
 
       const component = mount(USkeletonInput, {
@@ -216,10 +182,8 @@ describe("USkeletonInput.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Label slot
-    it("renders content from label slot", () => {
+    it("Label – renders content from label slot", () => {
       const slotContent = "Custom Label";
       const slotClass = "custom-label";
 
@@ -238,8 +202,7 @@ describe("USkeletonInput.vue", () => {
       expect(component.findAllComponents(USkeleton).length).toBe(1); // Only input skeleton, not label skeleton
     });
 
-    // Default slot
-    it("renders content from default slot", () => {
+    it("Default – renders content from default slot", () => {
       const slotContent = "Custom Content";
       const slotClass = "custom-content";
 

package/ui.skeleton-input/types.ts

@@ -25,11 +25,6 @@ export interface Props {
    */
   type?: "input" | "textarea";
 
-  /**
-   * Brightness variant.
-   */
-  variant?: "light" | "default" | "dark";
-
   /**
    * Component config object.
    */

package/ui.skeleton-text/USkeletonText.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
@@ -12,24 +11,25 @@ import USkeleton from "../ui.skeleton/USkeleton.vue";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
 });
 
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
 const { getDataTest, wrapperAttrs, headerAttrs, textAttrs, headerWrapperAttrs, textWrapperAttrs } =
-  useUI<Config>(
-    defaultConfig,
-    computed(() => props),
-  );
+  useUI<Config>(defaultConfig);
 </script>
 
 <template>
   <div v-bind="wrapperAttrs" :data-test="getDataTest()">
     <div v-if="headerLines" v-bind="headerWrapperAttrs">
-      <USkeleton v-for="line in headerLines" :key="line" :variant="variant" v-bind="headerAttrs" />
+      <USkeleton v-for="line in headerLines" :key="line" v-bind="headerAttrs" />
     </div>
     <div v-if="textLines" v-bind="textWrapperAttrs">
-      <USkeleton v-for="line in textLines" :key="line" :variant="variant" v-bind="textAttrs" />
+      <USkeleton v-for="line in textLines" :key="line" v-bind="textAttrs" />
     </div>
   </div>
 </template>

package/ui.skeleton-text/config.ts

@@ -14,9 +14,10 @@ export default /*tw*/ {
         "2xl": "h-11.5",
       },
     },
+    compoundVariants: [{ textLines: 0, headerLines: 1, class: "last:max-w-full" }],
   },
   text: {
-    base: "{USkeleton} rounded-small last:max-w-4/5",
+    base: "{USkeleton} rounded-small only:max-w-full last:max-w-4/5",
     variants: {
       size: {
         xs: "h-3.5",
@@ -31,7 +32,6 @@ export default /*tw*/ {
   body: "{USkeleton} rounded-small",
   defaults: {
     size: "md",
-    variant: "default",
     headerLines: 0,
     textLines: 3,
   },

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

@@ -7,7 +7,7 @@ import UCol from "../../ui.container-col/UCol.vue";
 import type { Props } from "../types";
 
 interface SkeletonTextArgs extends Props {
-  enum: "size" | "variant";
+  enum: "size";
 }
 
 export default {
@@ -54,6 +54,3 @@ Default.args = {};
 
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size", headerLines: 1, textLines: 3 };
-
-export const Variant = EnumTemplate.bind({});
-Variant.args = { enum: "variant" };

package/ui.skeleton-text/tests/USkeletonText.test.ts

@@ -7,10 +7,8 @@ import USkeleton from "../../ui.skeleton/USkeleton.vue";
 import type { Props } from "../types";
 
 describe("USkeletonText.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // HeaderLines prop
-    it("renders the correct number of header lines", () => {
+    it("HeaderLines – renders the correct number of header lines", () => {
       const headerLines = 3;
 
       const component = mount(USkeletonText, {
@@ -26,8 +24,7 @@ describe("USkeletonText.vue", () => {
       expect(headerSkeletons.length).toBe(headerLines);
     });
 
-    // TextLines prop
-    it("renders the correct number of text lines", () => {
+    it("TextLines – renders the correct number of text lines", () => {
       const textLines = 5;
 
       const component = mount(USkeletonText, {
@@ -41,8 +38,7 @@ describe("USkeletonText.vue", () => {
       expect(textSkeletons.length).toBe(textLines);
     });
 
-    // Size prop - Header
-    it("applies the correct size class to header skeletons", () => {
+    it("Size – applies the correct size class to header skeletons", () => {
       const size = {
         xs: "h-4.5",
         sm: "h-5",
@@ -67,8 +63,7 @@ describe("USkeletonText.vue", () => {
       });
     });
 
-    // Size prop - Text
-    it("applies the correct size class to text skeletons", () => {
+    it("Size – applies the correct size class to text skeletons", () => {
       const size = {
         xs: "h-3.5",
         sm: "h-4.5",
@@ -93,29 +88,7 @@ describe("USkeletonText.vue", () => {
       });
     });
 
-    // Variant prop
-    it("passes the correct variant to skeleton components", () => {
-      const variants = ["light", "default", "dark"];
-
-      variants.forEach((variant) => {
-        const component = mount(USkeletonText, {
-          props: {
-            variant: variant as Props["variant"],
-            headerLines: 1,
-            textLines: 1,
-          },
-        });
-
-        const headerSkeleton = component.find("[vl-key='headerWrapper']").findComponent(USkeleton);
-        const textSkeleton = component.find("[vl-key='textWrapper']").findComponent(USkeleton);
-
-        expect(headerSkeleton.props("variant")).toBe(variant);
-        expect(textSkeleton.props("variant")).toBe(variant);
-      });
-    });
-
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-skeleton-text";
 
       const component = mount(USkeletonText, {

package/ui.skeleton-text/types.ts

@@ -20,11 +20,6 @@ export interface Props {
    */
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 
-  /**
-   * Brightness variant.
-   */
-  variant?: "light" | "default" | "dark";
-
   /**
    * Component config object.
    */

package/ui.text-alert/tests/UAlert.test.ts

@@ -9,10 +9,8 @@ import UText from "../../ui.text-block/UText.vue";
 import type { Props } from "../types";
 
 describe("UAlert.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Variant prop
-    it("applies the correct variant class", async () => {
+    it("Variant – applies the correct variant class", async () => {
       const variants = {
         solid: "text-inverted bg-primary",
         outlined: "text-primary border-primary",
@@ -32,8 +30,7 @@ describe("UAlert.vue", () => {
       });
     });
 
-    // Size prop
-    it("applies the correct size class", async () => {
+    it("Size – applies the correct size class", async () => {
       const size = {
         xs: "text-tiny",
         sm: "text-small",
@@ -53,8 +50,7 @@ describe("UAlert.vue", () => {
       });
     });
 
-    // Color prop
-    it("applies the correct color class", async () => {
+    it("Color – applies the correct color class", async () => {
       const colors = [
         "primary",
         "secondary",
@@ -78,8 +74,7 @@ describe("UAlert.vue", () => {
       });
     });
 
-    // Title prop
-    it("renders the correct title text", () => {
+    it("Title – renders the correct title text", () => {
       const title = "Alert Title";
 
       const component = mount(UAlert, {
@@ -91,8 +86,7 @@ describe("UAlert.vue", () => {
       expect(component.text()).toContain(title);
     });
 
-    // Description prop
-    it("renders the correct description text", () => {
+    it("Description – renders the correct description text", () => {
       const description = "Alert Description";
 
       const component = mount(UAlert, {
@@ -104,8 +98,7 @@ describe("UAlert.vue", () => {
       expect(component.text()).toContain(description);
     });
 
-    // Icon prop
-    it("renders icon when icon prop is provided", () => {
+    it("Icon – renders icon when icon prop is provided", () => {
       const icon = "info";
 
       const component = mount(UAlert, {
@@ -122,8 +115,7 @@ describe("UAlert.vue", () => {
       expect(alertIcon).toBeDefined();
     });
 
-    // Closable prop
-    it("renders close button when closable prop is true", () => {
+    it("Closable – renders close button when closable prop is true", () => {
       const closable = true;
 
       const component = mount(UAlert, {
@@ -137,8 +129,7 @@ describe("UAlert.vue", () => {
       expect(closeButton.exists()).toBe(true);
     });
 
-    // Timeout prop
-    it("auto-closes after timeout", async () => {
+    it("Timeout – auto-closes after timeout", async () => {
       vi.useFakeTimers();
 
       const timeout = 1000;
@@ -159,8 +150,7 @@ describe("UAlert.vue", () => {
       vi.useRealTimers();
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("Data Test – applies the correct data-test attribute", () => {
       const dataTest = "test-alert";
 
       const component = mount(UAlert, {
@@ -173,10 +163,8 @@ describe("UAlert.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(UAlert, {
@@ -188,8 +176,7 @@ describe("UAlert.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Title slot
-    it("renders content from title slot", () => {
+    it("Title – renders content from title slot", () => {
       const title = "Alert Title";
       const slotText = "Custom Title";
       const slotClass = "title-content";
@@ -208,8 +195,7 @@ describe("UAlert.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Description slot
-    it("renders content from description slot", () => {
+    it("Description – renders content from description slot", () => {
       const description = "Alert Description";
       const slotText = "Custom Description";
       const slotClass = "description-content";
@@ -228,8 +214,7 @@ describe("UAlert.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Left slot
-    it("renders content from left slot", () => {
+    it("Left – renders content from left slot", () => {
       const slotText = "Left";
       const slotClass = "left-content";
 
@@ -243,8 +228,7 @@ describe("UAlert.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Close slot
-    it("renders content from close slot", () => {
+    it("Close – renders content from close slot", () => {
       const slotText = "Close";
       const slotClass = "close-content";
 
@@ -261,8 +245,7 @@ describe("UAlert.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Slot bindings
-    it("provides correct bindings to slots", () => {
+    it("Slot – provides correct bindings to slots", () => {
       const title = "Alert Title";
       const description = "Alert Description";
       const icon = "info";
@@ -303,10 +286,8 @@ describe("UAlert.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Hidden event
-    it("emits hidden event when close button is clicked", async () => {
+    it("Hide – emits hidden event when close button is clicked", async () => {
       const component = mount(UAlert, {
         props: {
           closable: true,
@@ -319,10 +300,8 @@ describe("UAlert.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // wrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const component = mount(UAlert, {});
 
       expect(component.vm.wrapperRef).toBeDefined();

package/ui.text-badge/tests/UBadge.test.ts

@@ -13,10 +13,8 @@ describe("UBadge.vue", () => {
     label = "Badge";
   });
 
-  // Props tests
   describe("Props", () => {
-    // Variant prop
-    it("applies the correct variant class", async () => {
+    it("Variant – applies the correct variant class", async () => {
       const variants = {
         solid: "text-inverted bg-primary",
         outlined: "border-primary text-primary",
@@ -36,8 +34,7 @@ describe("UBadge.vue", () => {
       });
     });
 
-    // Size prop
-    it("applies the correct size class", async () => {
+    it("Size – applies the correct size class", async () => {
       const size = {
         sm: "text-tiny",
         md: "text-small",
@@ -55,8 +52,7 @@ describe("UBadge.vue", () => {
       });
     });
 
-    // Color prop
-    it("applies the correct color class", async () => {
+    it("Color – applies the correct color class", async () => {
       const colors = [
         "primary",
         "secondary",
@@ -80,8 +76,7 @@ describe("UBadge.vue", () => {
       });
     });
 
-    // Label prop
-    it("renders the correct label text", () => {
+    it("Label – renders the correct label text", () => {
       const component = mount(UBadge, {
         props: {
           label,
@@ -91,8 +86,7 @@ describe("UBadge.vue", () => {
       expect(component.text()).toBe(label);
     });
 
-    // Icon prop
-    it("renders icon when icon prop is provided", () => {
+    it("Icon – renders icon when icon prop is provided", () => {
       const icon = "close";
 
       const component = mount(UBadge, {
@@ -108,8 +102,7 @@ describe("UBadge.vue", () => {
       expect(nestedUIconComponents[0].props("name")).toBe(icon);
     });
 
-    // Left Icon prop
-    it("renders left icon when leftIcon prop is provided", () => {
+    it("Left – renders left icon when leftIcon prop is provided", () => {
       const leftIcon = "close";
       const label = "Badge";
 
@@ -127,8 +120,7 @@ describe("UBadge.vue", () => {
       expect(nestedUIconComponents[0].props("name")).toBe(leftIcon);
     });
 
-    // Right Icon prop
-    it("renders right icon when rightIcon prop is provided", () => {
+    it("Right – renders right icon when rightIcon prop is provided", () => {
       const rightIcon = "close";
       const label = "Badge";
 
@@ -146,8 +138,7 @@ describe("UBadge.vue", () => {
       expect(nestedUIconComponents[0].props("name")).toBe(rightIcon);
     });
 
-    // Round prop
-    it("applies round class when round prop is true", () => {
+    it("Round – applies round class when round prop is true", () => {
       const round = true;
       const roundClasses = "rounded-full";
 
@@ -160,8 +151,7 @@ describe("UBadge.vue", () => {
       expect(component.attributes("class")).toContain(roundClasses);
     });
 
-    // Tabindex prop
-    it("applies the correct tabindex attribute", () => {
+    it("Tabindex – applies the correct tabindex attribute", () => {
       const tabindex = "2";
 
       const component = mount(UBadge, {
@@ -173,8 +163,7 @@ describe("UBadge.vue", () => {
       expect(component.attributes("tabindex")).toBe(tabindex);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-badge";
 
       const component = mount(UBadge, {
@@ -187,10 +176,8 @@ describe("UBadge.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 = "Badge";
 
@@ -207,8 +194,7 @@ describe("UBadge.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Left slot
-    it("renders content from left slot", () => {
+    it("Left – renders content from left slot", () => {
       const slotText = "Left";
       const slotClass = "left-content";
 
@@ -226,8 +212,7 @@ describe("UBadge.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";
 
@@ -245,8 +230,7 @@ describe("UBadge.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Slot bindings
-    it("provides correct bindings to slots", () => {
+    it("Slot – provides correct bindings to slots", () => {
       const icon = "star";
       const labelClass = "badge-label";
       const iconClass = "badge-icon";
@@ -271,10 +255,8 @@ describe("UBadge.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Click event
-    it("emits click event when clicked", async () => {
+    it("Click – emits click event when clicked", async () => {
       const component = mount(UBadge, {});
 
       await component.trigger("click");
@@ -282,8 +264,7 @@ describe("UBadge.vue", () => {
       expect(component.emitted("click")).toBeTruthy();
     });
 
-    // Focus event
-    it("emits focus event when focused", async () => {
+    it("Focus – emits focus event when focused", async () => {
       const component = mount(UBadge, {});
 
       await component.trigger("focus");
@@ -291,8 +272,7 @@ describe("UBadge.vue", () => {
       expect(component.emitted("focus")).toBeTruthy();
     });
 
-    // Blur event
-    it("emits blur event when blurred", async () => {
+    it("Blur – emits blur event when blurred", async () => {
       const component = mount(UBadge, {});
 
       await component.trigger("blur");
@@ -300,8 +280,7 @@ describe("UBadge.vue", () => {
       expect(component.emitted("blur")).toBeTruthy();
     });
 
-    // Keydown event
-    it("emits keydown event when key is pressed", async () => {
+    it("Keydown – emits keydown event when key is pressed", async () => {
       const component = mount(UBadge, {});
 
       await component.trigger("keydown");
@@ -310,10 +289,8 @@ describe("UBadge.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // wrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const component = mount(UBadge, {});
 
       expect(component.vm.wrapperRef).toBeDefined();