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

package/ui.text-block/UText.vue

@@ -15,28 +15,28 @@ withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
 });
 
-const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
+const textRef = useTemplateRef<HTMLElement>("text");
 
 defineExpose({
   /**
    * A reference to the component's wrapper element for direct DOM manipulation.
-   * @property {HTMLDivElement}
+   * @property {HTMLElement}
    */
-  wrapperRef,
+  textRef,
 });
 
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { getDataTest, wrapperAttrs, labelAttrs } = useUI<Config>(defaultConfig);
+const { getDataTest, textAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>
-  <div ref="wrapper" v-bind="wrapperAttrs" :data-test="getDataTest()">
+  <component :is="tag" ref="text" v-bind="textAttrs" :data-test="getDataTest()">
     <!-- @slot Use it to add something inside. -->
     <slot>
-      <div v-bind="labelAttrs" v-text="label" />
+      {{ label }}
     </slot>
-  </div>
+  </component>
 </template>

package/ui.text-block/config.ts

@@ -1,7 +1,6 @@
 export default /*tw*/ {
-  wrapper: {
+  text: {
     base: `
-      flex flex-col
       font-normal leading-normal
       [&_b]:font-bold [&_i]:italic [&_p]:font-normal
       [&_a:not([class])]:underline [&_a:not([class])]:underline-offset-4
@@ -18,15 +17,16 @@ 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",
       },
       size: {
-        xs: "text-tiny gap-1",
-        sm: "text-small gap-2",
-        md: "text-medium gap-3",
-        lg: "text-large gap-4",
+        xs: "text-tiny",
+        sm: "text-small",
+        md: "text-medium",
+        lg: "text-large",
       },
       align: {
         left: "text-left",
@@ -52,15 +52,16 @@ 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" },
     ],
   },
-  label: "",
   defaults: {
     color: "text",
     variant: "default",
     size: "md",
     align: "left",
     weight: "normal",
+    tag: "div",
     line: false,
     wrap: true,
   },

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

@@ -114,6 +114,19 @@ export const Line: StoryFn<UTextArgs> = (args: UTextArgs) => ({
 });
 Line.args = {};
 
+export const Tag: StoryFn<UTextArgs> = (args: UTextArgs) => ({
+  components: { UText, UCol },
+  setup: () => ({ args }),
+  template: `
+    <UCol>
+      <UText tag="p" label="This is a paragraph tag" />
+      <UText tag="span" label="This is a span tag" />
+      <UText tag="div" label="This is a div tag (default)" />
+    </UCol>
+  `,
+});
+Tag.args = {};
+
 export const Wrap: StoryFn<UTextArgs> = (args: UTextArgs) => ({
   components: { UText, UCol },
   setup: () => ({ args }),
@@ -135,31 +148,6 @@ export const Wrap: StoryFn<UTextArgs> = (args: UTextArgs) => ({
 });
 Wrap.args = {};
 
-export const Paragraphs = DefaultTemplate.bind({});
-Paragraphs.args = {
-  slotTemplate: `
-    <template #default>
-      <p>
-        In a world where technology evolves at an unprecedented pace, staying
-        updated with the latest advancements is crucial for success. Companies
-        that adapt quickly to new trends often find themselves at the forefront
-        of their industries, leading to increased innovation and productivity.
-        However, it's not just about adopting new tools but also about integrating
-        them seamlessly into existing workflows to maximize their potential.
-      </p>
-
-      <p>
-        Employees must be encouraged to continuously learn and develop new skills,
-        ensuring they can leverage these technological advancements effectively.
-        This not only enhances their professional growth but also contributes to
-        the overall success of the organization. By fostering a culture of
-        continuous improvement, businesses can navigate the challenges of a
-        rapidly changing landscape and emerge stronger and more competitive.
-      </p>
-    </template>
-  `,
-};
-
 export const List = DefaultTemplate.bind({});
 List.args = {
   slotTemplate: `

package/ui.text-block/tests/UText.test.ts

@@ -6,10 +6,8 @@ import UText from "../UText.vue";
 import type { Props } from "../types";
 
 describe("UText.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-tiny",
         sm: "text-small",
@@ -28,8 +26,7 @@ describe("UText.vue", () => {
       });
     });
 
-    // Align prop
-    it("applies the correct align class", async () => {
+    it("Align – applies the correct align class", async () => {
       const align = {
         left: "text-left",
         center: "text-center",
@@ -47,8 +44,7 @@ describe("UText.vue", () => {
       });
     });
 
-    // Color prop
-    it("applies the correct color class", async () => {
+    it("Color – applies the correct color class", async () => {
       const colors = [
         "primary",
         "secondary",
@@ -76,8 +72,7 @@ describe("UText.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",
@@ -97,8 +92,7 @@ describe("UText.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 component = mount(UText, {
@@ -110,8 +104,7 @@ describe("UText.vue", () => {
       expect(component.attributes("class")).toContain("leading-none");
     });
 
-    // Wrap prop
-    it("applies text-nowrap class when wrap prop is false", () => {
+    it("Wrap – applies text-nowrap class when wrap prop is false", () => {
       const wrap = false;
 
       const component = mount(UText, {
@@ -123,8 +116,7 @@ describe("UText.vue", () => {
       expect(component.attributes("class")).toContain("text-nowrap");
     });
 
-    // Label prop
-    it("renders the correct label content", () => {
+    it("Label – renders the correct label content", () => {
       const label = "Text label";
 
       const component = mount(UText, {
@@ -136,8 +128,21 @@ describe("UText.vue", () => {
       expect(component.html()).toContain(label);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("renders the correct HTML tag", () => {
+      const tags = ["div", "p", "span", "section", "article"];
+
+      tags.forEach((tag) => {
+        const component = mount(UText, {
+          props: {
+            tag,
+          },
+        });
+
+        expect(component.element.tagName.toLowerCase()).toBe(tag);
+      });
+    });
+
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-text";
 
       const component = mount(UText, {
@@ -149,8 +154,7 @@ describe("UText.vue", () => {
       expect(component.attributes("data-test")).toBe(dataTest);
     });
 
-    // Config prop overriding classes
-    it("applies custom classes from config prop", () => {
+    it("Config – applies custom classes from config prop", () => {
       const customClasses = "font-bold";
 
       const component = mount(UText, {
@@ -165,10 +169,8 @@ describe("UText.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(UText, {
@@ -180,8 +182,7 @@ describe("UText.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Default slot overrides label prop
-    it("default slot overrides label prop", () => {
+    it("Default slot overrides label – default slot overrides label prop", () => {
       const label = "Label Text";
       const slotContent = "Custom Content";
 
@@ -199,13 +200,11 @@ describe("UText.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // wrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const component = mount(UText, {});
 
-      expect(component.vm.wrapperRef).toBeDefined();
+      expect(component.vm.textRef).toBeDefined();
     });
   });
 });

package/ui.text-block/types.ts

@@ -22,7 +22,7 @@ export interface Props {
   /**
    * Text variant.
    */
-  variant?: "default" | "accented" | "lifted" | "muted";
+  variant?: "default" | "accented" | "lifted" | "muted" | "inverted";
 
   /**
    * Font weight.
@@ -45,6 +45,11 @@ export interface Props {
     | "grayscale"
     | "inherit";
 
+  /**
+   * Allows changing HTML tag.
+   */
+  tag?: string;
+
   /**
    * Removes text line height (useful for 1-line text).
    */

package/ui.text-empty/tests/UEmpty.test.ts

@@ -8,10 +8,8 @@ import UHeader from "../../ui.text-header/UHeader.vue";
 import type { Props } from "../types";
 
 describe("UEmpty.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Size prop
-    it("applies the correct size class", async () => {
+    it("Size – applies the correct size class", async () => {
       const size = {
         sm: "2xl",
         md: "3xl",
@@ -32,8 +30,7 @@ describe("UEmpty.vue", () => {
       });
     });
 
-    // Icon prop default
-    it("renders default icon when icon prop is not provided", () => {
+    it("Icon – renders default icon when icon prop is not provided", () => {
       const defaultIcon = "emoji_food_beverage";
 
       const component = mount(UEmpty, {});
@@ -43,8 +40,7 @@ describe("UEmpty.vue", () => {
       expect(iconComponent.props("name")).toBe(defaultIcon);
     });
 
-    // Icon prop true
-    it("renders default icon when icon prop is true", () => {
+    it("Icon – renders default icon when icon prop is true", () => {
       const placeholderIcon = true;
       const defaultIcon = "emoji_food_beverage";
 
@@ -60,8 +56,7 @@ describe("UEmpty.vue", () => {
       expect(iconComponent.props("name")).toBe(defaultIcon);
     });
 
-    // Icon prop string
-    it("renders custom icon when icon prop is a string", () => {
+    it("Icon – renders custom icon when icon prop is a string", () => {
       const customIcon = "close";
 
       const component = mount(UEmpty, {
@@ -76,8 +71,7 @@ describe("UEmpty.vue", () => {
       expect(iconComponent.props("name")).toBe(customIcon);
     });
 
-    // Icon prop false
-    it("does not render icon when icon prop is false", () => {
+    it("Icon – does not render icon when icon prop is false", () => {
       const placeholderIcon = false;
 
       const component = mount(UEmpty, {
@@ -91,8 +85,7 @@ describe("UEmpty.vue", () => {
       expect(iconComponent.exists()).toBe(placeholderIcon);
     });
 
-    // Title prop
-    it("renders the correct title text", () => {
+    it("Title – renders the correct title text", () => {
       const title = "Empty State Title";
 
       const component = mount(UEmpty, {
@@ -107,8 +100,7 @@ describe("UEmpty.vue", () => {
       expect(headerComponent.props("label")).toBe(title);
     });
 
-    // Description prop
-    it("renders the correct description text", () => {
+    it("Description – renders the correct description text", () => {
       const description = "Empty State Description";
 
       const component = mount(UEmpty, {
@@ -120,8 +112,7 @@ describe("UEmpty.vue", () => {
       expect(component.text()).toContain(description);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-empty";
 
       const component = mount(UEmpty, {
@@ -134,10 +125,8 @@ describe("UEmpty.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(UEmpty, {
@@ -149,8 +138,7 @@ describe("UEmpty.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Default slot overrides title and description
-    it("default slot overrides title and description", () => {
+    it("Default – default slot overrides title and description", () => {
       const title = "Empty State Title";
       const description = "Empty State Description";
       const slotContent = "Custom Content";
@@ -171,8 +159,7 @@ describe("UEmpty.vue", () => {
       expect(component.text()).not.toContain(description);
     });
 
-    // Header slot
-    it("renders content from header slot", () => {
+    it("Header – renders content from header slot", () => {
       const slotText = "Custom Header";
       const slotClass = "header-content";
 
@@ -186,8 +173,7 @@ describe("UEmpty.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Header slot overrides default icon
-    it("header slot overrides default icon", () => {
+    it("Header – header slot overrides default icon", () => {
       const slotContent = "Custom Header";
 
       const component = mount(UEmpty, {
@@ -200,8 +186,7 @@ describe("UEmpty.vue", () => {
       expect(component.findComponent(UIcon).exists()).toBe(false);
     });
 
-    // Footer slot
-    it("renders content from footer slot", () => {
+    it("Footer – renders content from footer slot", () => {
       const slotText = "Custom Footer";
       const slotClass = "footer-content";
 
@@ -216,10 +201,8 @@ describe("UEmpty.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // wrapperRef
-    it("exposes wrapperRef", () => {
+    it("wrapperRef – exposes wrapperRef", () => {
       const component = mount(UEmpty, {});
 
       expect(component.vm.wrapperRef).toBeDefined();

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

@@ -9,10 +9,8 @@ import type { ComponentPublicInstance } from "vue";
 import type { Props } from "../types";
 
 describe("UFile.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // URL prop
-    it("passes the correct url to ULink", () => {
+    it("URL – passes the correct url to ULink", () => {
       const url = "https://example.com/file.pdf";
 
       const component = mount(UFile, {
@@ -26,8 +24,7 @@ describe("UFile.vue", () => {
       expect(linkComponent.props("href")).toBe(url);
     });
 
-    // ImageUrl prop
-    it("renders image when imageUrl prop is provided", () => {
+    it("ImageUrl – renders image when imageUrl prop is provided", () => {
       const imageUrl = "https://example.com/image.jpg";
 
       const component = mount(UFile, {
@@ -42,8 +39,7 @@ describe("UFile.vue", () => {
       expect(image.attributes("src")).toBe(imageUrl);
     });
 
-    // Label prop
-    it("renders the correct label text", () => {
+    it("Label – renders the correct label text", () => {
       const label = "Example File";
 
       const component = mount(UFile, {
@@ -57,8 +53,7 @@ describe("UFile.vue", () => {
       expect(linkComponent.text()).toContain(label);
     });
 
-    // Size prop
-    it("applies the correct size class", async () => {
+    it("Size – applies the correct size class", async () => {
       const sizeClasses = {
         sm: "gap-0.5",
         md: "gap-1",
@@ -76,8 +71,7 @@ describe("UFile.vue", () => {
       });
     });
 
-    // ID prop
-    it("uses provided id", () => {
+    it("ID – uses provided id", () => {
       const id = "test-file-id";
       const removable = true;
 
@@ -94,8 +88,7 @@ describe("UFile.vue", () => {
       expect(component.emitted("remove")?.[0][0]).toBe(id);
     });
 
-    // Removable prop
-    it("shows remove button when removable prop is true", () => {
+    it("Removable – shows remove button when removable prop is true", () => {
       const removable = true;
       const dataTest = "test-file";
       const removeIconDataTest = "test-file-remove-item";
@@ -115,8 +108,7 @@ describe("UFile.vue", () => {
       expect(removeIcon).toBeDefined();
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-file";
 
       const component = mount(UFile, {
@@ -129,10 +121,8 @@ describe("UFile.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(UFile, {
@@ -144,8 +134,7 @@ describe("UFile.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Default slot with bindings
-    it("provides correct bindings to default slot", () => {
+    it("Default – provides correct bindings to default slot", () => {
       const id = "test-id";
       const label = "Test File";
       const url = "https://example.com/file.pdf";
@@ -182,8 +171,7 @@ describe("UFile.vue", () => {
       expect(component.find(`.${imageUrlClass}`).text()).toBe(imageUrl);
     });
 
-    // Left slot
-    it("renders content from left slot", () => {
+    it("Left – renders content from left slot", () => {
       const slotText = "Left";
       const slotClass = "left-content";
 
@@ -197,8 +185,7 @@ describe("UFile.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";
 
@@ -213,10 +200,8 @@ describe("UFile.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Remove event
-    it("emits remove event when remove button is clicked", async () => {
+    it("Remove – emits remove event when remove button is clicked", async () => {
       const id = "test-file-id";
       const removable = true;
       const dataTest = "test-file";
@@ -245,10 +230,8 @@ describe("UFile.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // file ref
-    it("exposes file ref", () => {
+    it("file – exposes file ref", () => {
       const component = mount(UFile, {});
 
       expect(component.vm.fileRef).toBeDefined();