vueless 1.3.1-beta.0 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.1-beta.0",
+  "version": "1.3.1",
   "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-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/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-drawer/UDrawer.vue

@@ -314,9 +314,9 @@ const {
                 <!-- @slot Use it to add something before the header title. -->
                 <slot name="before-title" />
                 <!--
-                @slot Use it to add something to the left side of the header.
-                @binding {string} title
-              -->
+                  @slot Use it to add something to the left side of the header.
+                  @binding {string} title
+                -->
                 <slot name="title" :title="title">
                   <div v-bind="titleFallbackAttrs">
                     <UHeader :label="title" size="sm" v-bind="titleAttrs" />

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.

package/ui.container-modal/UModal.vue

@@ -268,10 +268,10 @@ const {
             </div>
 
             <!--
-                @slot Use it to add something instead of the close button.
-                @binding {string} icon-name
-                @binding {function} close
-              -->
+              @slot Use it to add something instead of the close button.
+              @binding {string} icon-name
+              @binding {function} close
+            -->
             <slot name="actions" :icon-name="config.defaults.closeIcon" :close="closeModal">
               <UButton
                 v-if="closeOnCross"

package/ui.container-modal/config.ts

@@ -46,7 +46,7 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { divided: true, variant: ["subtle", "soft"], class: "border-default/50" },
+      { divided: true, variant: ["subtle", "soft", "inverted"], class: "border-default/50" },
       { divided: true, variant: ["solid", "outlined"], class: "border-muted" },
     ],
   },
@@ -60,6 +60,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",
       },
       size: {
         xs: "md:w-[25rem]",

package/ui.container-modal/types.ts

@@ -25,7 +25,7 @@ export interface Props {
   /**
    * Modal variant.
    */
-  variant?: "solid" | "outlined" | "subtle" | "soft";
+  variant?: "solid" | "outlined" | "subtle" | "soft" | "inverted";
 
   /**
    * Modal size (width).

package/ui.container-modal-confirm/tests/UModalConfirm.test.ts

@@ -145,7 +145,7 @@ describe("UModalConfirm", () => {
 
     // Variant prop
     it("passes variant prop to UModal", () => {
-      const variants = ["solid", "outlined", "subtle", "soft"];
+      const variants = ["solid", "outlined", "subtle", "soft", "inverted"];
 
       variants.forEach((variant) => {
         const component = mount(UModalConfirm, {

package/ui.container-modal-confirm/types.ts

@@ -52,7 +52,7 @@ export interface Props {
   /**
    * Modal variant.
    */
-  variant?: "solid" | "outlined" | "subtle" | "soft";
+  variant?: "solid" | "outlined" | "subtle" | "soft" | "inverted";
 
   /**
    * Modal size (width).

package/ui.container-page/config.ts

@@ -28,6 +28,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",
       },
       rounding: {
         true: "md:pr-4 border-r-0",
@@ -51,6 +52,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",
       },
     },
   },

package/ui.container-page/tests/UPage.test.ts

@@ -37,6 +37,7 @@ describe("UPage.vue", () => {
         outlined: "bg-default border-muted",
         subtle: "bg-muted border-default/50",
         soft: "bg-muted border-transparent",
+        inverted: "bg-inverted border-transparent",
       };
 
       Object.entries(variants).forEach(([variant, classes]) => {

package/ui.container-page/types.ts

@@ -34,7 +34,7 @@ export interface Props {
   /**
    * Page variant.
    */
-  variant?: "solid" | "outlined" | "subtle" | "soft";
+  variant?: "solid" | "outlined" | "subtle" | "soft" | "inverted";
 
   /**
    * Page size (width).

package/ui.form-input/UInput.vue

@@ -176,7 +176,9 @@ function onKeydown(event: KeyboardEvent) {
   emit("keydown", event);
 }
 
-function onSlotClick() {
+function onSlotClick(event: MouseEvent) {
+  if (event.target !== event.currentTarget) return;
+
   inputRef.value?.focus();
 }
 

package/ui.form-input/storybook/stories.ts

@@ -193,9 +193,9 @@ export const Slots: StoryFn<UInputArgs> = (args) => ({
   components: { UInput, URow, UDropdownButton, UText, UChip },
   setup() {
     const countryCodes = [
-      { label: "+33", id: "+33" },
-      { label: "+44", id: "+44" },
-      { label: "+49", id: "+49" },
+      { label: "+33", value: "+33" },
+      { label: "+44", value: "+44" },
+      { label: "+49", value: "+49" },
     ];
 
     const countryCode = ref("+33");

package/ui.skeleton/USkeleton.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
@@ -10,14 +9,15 @@ import type { Props, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
 });
 
-const { getDataTest, bodyAttrs } = useUI<Config>(
-  defaultConfig,
-  computed(() => props),
-);
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { getDataTest, bodyAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.skeleton-choice/USkeletonChoice.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from "vue";
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
@@ -12,14 +11,15 @@ import USkeleton from "../ui.skeleton/USkeleton.vue";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
 });
 
-const { getDataTest, inputAttrs, labelAttrs, wrapperAttrs } = useUI<Config>(
-  defaultConfig,
-  computed(() => props),
-);
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { getDataTest, inputAttrs, labelAttrs, wrapperAttrs } = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.skeleton-input/USkeletonInput.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,26 @@ import USkeleton from "../ui.skeleton/USkeleton.vue";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
 });
 
-const { getDataTest, inputAttrs, textareaAttrs, labelAttrs, wrapperAttrs } = useUI<Config>(
-  defaultConfig,
-  computed(() => props),
-);
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { getDataTest, inputAttrs, textareaAttrs, labelAttrs, wrapperAttrs } =
+  useUI<Config>(defaultConfig);
 </script>
 
 <template>
   <div v-bind="wrapperAttrs" :data-test="getDataTest()">
     <!-- @slot Use it to customize the label skeleton. -->
-    <slot v-if="props.labelAlign !== LABEL_ALIGN.topInside && props.label" name="label">
+    <slot v-if="labelAlign !== LABEL_ALIGN.topInside && label" name="label">
       <USkeleton :variant="variant" v-bind="labelAttrs" />
     </slot>
 
-    <USkeleton v-if="props.type === 'input'" :variant="variant" v-bind="inputAttrs">
+    <USkeleton v-if="type === 'input'" :variant="variant" v-bind="inputAttrs">
       <!-- @slot Use it to add custom content inside the input skeleton. -->
       <slot />
     </USkeleton>

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,15 +11,16 @@ 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>

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",

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

@@ -136,6 +136,20 @@ describe("UText.vue", () => {
       expect(component.html()).toContain(label);
     });
 
+    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);
+      });
+    });
+
     // DataTest prop
     it("applies the correct data-test attribute", () => {
       const dataTest = "test-text";
@@ -205,7 +219,7 @@ describe("UText.vue", () => {
     it("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-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: {