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

package/ui.other-theme-color-toggle/tests/UThemeColorToggle.test.ts

@@ -14,10 +14,8 @@ vi.mock("../../utils/theme.ts", () => ({
 }));
 
 describe("UThemeColorToggle.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Size prop
-    it("applies the correct size to color pickers", async () => {
+    it("Size – applies the correct size to color pickers", async () => {
       const sizes = ["sm", "md", "lg"];
 
       sizes.forEach((size) => {
@@ -39,8 +37,7 @@ describe("UThemeColorToggle.vue", () => {
       });
     });
 
-    // Primary prop
-    it("sets the primary color correctly", async () => {
+    it("Primary – sets the primary color correctly", async () => {
       const primary = "blue";
 
       const component = mount(UThemeColorToggle, {
@@ -55,8 +52,7 @@ describe("UThemeColorToggle.vue", () => {
       expect(primaryColorPicker.props("modelValue")).toBe(primary);
     });
 
-    // Neutral prop
-    it("sets the neutral color correctly", async () => {
+    it("Neutral – sets the neutral color correctly", async () => {
       const neutral = "gray";
 
       const component = mount(UThemeColorToggle, {
@@ -71,8 +67,7 @@ describe("UThemeColorToggle.vue", () => {
       expect(neutralColorPicker.props("modelValue")).toBe(neutral);
     });
 
-    // PrimaryColors prop
-    it("passes primaryColors to the primary color picker", async () => {
+    it("PrimaryColors – passes primaryColors to the primary color picker", async () => {
       const primaryColors = { blue: "#0000FF", red: "#FF0000" };
 
       const component = mount(UThemeColorToggle, {
@@ -86,8 +81,7 @@ describe("UThemeColorToggle.vue", () => {
       expect(primaryColorPicker.props("colors")).toEqual(primaryColors);
     });
 
-    // NeutralColors prop
-    it("passes neutralColors to the neutral color picker", async () => {
+    it("NeutralColors – passes neutralColors to the neutral color picker", async () => {
       const neutralColors = { gray: "#808080", black: "#000000" };
 
       const component = mount(UThemeColorToggle, {
@@ -101,8 +95,7 @@ describe("UThemeColorToggle.vue", () => {
       expect(neutralColorPicker.props("colors")).toEqual(neutralColors);
     });
 
-    // PrimaryLabels prop
-    it("passes primaryLabels to the primary color picker", async () => {
+    it("PrimaryLabels – passes primaryLabels to the primary color picker", async () => {
       const primaryLabels = { blue: "Blue", red: "Red" };
 
       const component = mount(UThemeColorToggle, {
@@ -117,8 +110,7 @@ describe("UThemeColorToggle.vue", () => {
       expect(primaryColorPicker.props("labels")).toEqual(primaryLabels);
     });
 
-    // NeutralLabels prop
-    it("passes neutralLabels to the neutral color picker", async () => {
+    it("NeutralLabels – passes neutralLabels to the neutral color picker", async () => {
       const neutralLabels = { gray: "Gray", black: "Black" };
 
       const component = mount(UThemeColorToggle, {
@@ -133,8 +125,7 @@ describe("UThemeColorToggle.vue", () => {
       expect(neutralColorPicker.props("labels")).toEqual(neutralLabels);
     });
 
-    // ID prop
-    it("applies the correct id attribute", () => {
+    it("ID – applies the correct id attribute", () => {
       const id = "test-theme-toggle-id";
 
       const component = mount(UThemeColorToggle, {
@@ -146,8 +137,7 @@ describe("UThemeColorToggle.vue", () => {
       expect(component.attributes("id")).toBe(id);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-theme-toggle";
 
       const component = mount(UThemeColorToggle, {
@@ -159,8 +149,7 @@ describe("UThemeColorToggle.vue", () => {
       expect(component.attributes("data-test")).toBe(dataTest);
     });
 
-    // Divider visibility
-    it("shows divider when both primaryColors and neutralColors are provided", () => {
+    it("Divider – shows divider when both primaryColors and neutralColors are provided", () => {
       const component = mount(UThemeColorToggle, {
         props: {
           primaryColors: { blue: "#0000FF" },
@@ -194,10 +183,8 @@ describe("UThemeColorToggle.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // update:primary event
-    it("emits update:primary event when primary color changes", async () => {
+    it("update:primary – emits update:primary event when primary color changes", async () => {
       const primaryColors = { blue: "#0000FF", red: "#FF0000" };
       const newColor = "red";
 
@@ -215,8 +202,7 @@ describe("UThemeColorToggle.vue", () => {
       expect(component.emitted("update:primary")![0]).toEqual([newColor]);
     });
 
-    // update:neutral event
-    it("emits update:neutral event when neutral color changes", async () => {
+    it("update:neutral – emits update:neutral event when neutral color changes", async () => {
       const neutralColors = { gray: "#808080", black: "#000000" };
       const newColor = "black";
 
@@ -235,10 +221,8 @@ describe("UThemeColorToggle.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // listRef
-    it("exposes listRef", () => {
+    it("listRef – exposes listRef", () => {
       const component = mount(UThemeColorToggle, {});
 
       expect(

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/config.ts

@@ -1,15 +1,3 @@
 export default /*tw*/ {
-  body: {
-    base: "rounded-medium animate-pulse h-24 w-full bg-neutral/50",
-    variants: {
-      variant: {
-        light: "brightness-75",
-        default: "brightness-50",
-        dark: "brightness-25",
-      },
-    },
-  },
-  defaults: {
-    variant: "default",
-  },
+  body: "rounded-medium animate-pulse h-24 w-full bg-inverted/15",
 };

package/ui.skeleton/storybook/stories.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
-import { getArgs, getArgTypes, getDocsDescription } from "../../utils/storybook";
+import { getArgTypes, getDocsDescription } from "../../utils/storybook";
 
 import USkeleton from "../USkeleton.vue";
 import UCol from "../../ui.container-col/UCol.vue";
@@ -7,7 +7,7 @@ import UCol from "../../ui.container-col/UCol.vue";
 import type { Props } from "../types";
 
 interface SkeletonArgs extends Props {
-  enum: "variant";
+  enum?: string;
 }
 
 export default {
@@ -32,26 +32,9 @@ const DefaultTemplate: StoryFn<SkeletonArgs> = (args: SkeletonArgs) => ({
   `,
 });
 
-const EnumVariantTemplate: StoryFn<SkeletonArgs> = (args: SkeletonArgs, { argTypes }) => ({
-  components: { USkeleton, UCol },
-  setup: () => ({ args, argTypes, getArgs }),
-  template: `
-    <UCol>
-      <USkeleton
-        v-for="option in argTypes?.[args.enum]?.options"
-        v-bind="getArgs(args, option)"
-        :key="option"
-      />
-    </UCol>
-  `,
-});
-
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Variant = EnumVariantTemplate.bind({});
-Variant.args = { enum: "variant" };
-
 export const Slot: StoryFn<SkeletonArgs> = (args) => ({
   components: { USkeleton, UCol },
   setup() {
@@ -59,7 +42,7 @@ export const Slot: StoryFn<SkeletonArgs> = (args) => ({
   },
   template: `
     <USkeleton v-bind="args" class="max-w-96 p-4">
-      <USkeleton class="w-15 h-10 rounded-small" variant="dark" />
+      <USkeleton class="w-15 h-10 rounded-small" />
     </USkeleton>
   `,
 });

package/ui.skeleton/tests/USkeleton.test.ts

@@ -3,32 +3,9 @@ import { describe, it, expect } from "vitest";
 
 import USkeleton from "../USkeleton.vue";
 
-import type { Props } from "../types";
-
 describe("USkeleton.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Variant prop
-    it("applies the correct variant class", () => {
-      const variants = {
-        light: "brightness-75",
-        default: "brightness-50",
-        dark: "brightness-25",
-      };
-
-      Object.entries(variants).forEach(([variant, classes]) => {
-        const component = mount(USkeleton, {
-          props: {
-            variant: variant as Props["variant"],
-          },
-        });
-
-        expect(component.attributes("class")).toContain(classes);
-      });
-    });
-
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("DataTest – applies the correct data-test attribute", () => {
       const dataTest = "test-skeleton";
 
       const component = mount(USkeleton, {
@@ -41,10 +18,8 @@ describe("USkeleton.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 slotClass = "custom-content";
 

package/ui.skeleton/types.ts

@@ -5,11 +5,6 @@ import type { ComponentConfig } from "../types";
 export type Config = typeof defaultConfig;
 
 export interface Props {
-  /**
-   * Brightness variant.
-   */
-  variant?: "light" | "default" | "dark";
-
   /**
    * Component config object.
    */

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,22 +11,23 @@ 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>
   <div v-bind="wrapperAttrs" :data-test="getDataTest()">
-    <USkeleton :variant="variant" v-bind="inputAttrs" />
+    <USkeleton v-bind="inputAttrs" />
     <!-- @slot Use it to customize the label skeleton. -->
     <slot v-if="label" name="label">
-      <USkeleton :variant="variant" v-bind="labelAttrs" />
+      <USkeleton v-bind="labelAttrs" />
     </slot>
   </div>
 </template>

package/ui.skeleton-choice/config.ts

@@ -39,7 +39,6 @@ export default /*tw*/ {
   },
   defaults: {
     type: "radio",
-    variant: "default",
     labelAlign: "left",
     size: "md",
     label: true,

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

@@ -8,7 +8,7 @@ import USkeleton from "../../ui.skeleton/USkeleton.vue";
 import type { Props } from "../types";
 
 interface SkeletonChoiceArgs extends Props {
-  enum: "variant" | "size" | "labelAlign" | "type";
+  enum: "size" | "labelAlign" | "type";
 }
 
 export default {
@@ -73,9 +73,6 @@ LabelAlign.args = { enum: "labelAlign" };
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const Variant = EnumVariantTemplate.bind({});
-Variant.args = { enum: "variant" };
-
 export const LabelSlot: StoryFn<SkeletonChoiceArgs> = (args) => ({
   components: { USkeletonChoice, USkeleton, UCol },
   setup() {
@@ -85,8 +82,8 @@ export const LabelSlot: StoryFn<SkeletonChoiceArgs> = (args) => ({
     <USkeletonChoice v-bind="args">
       <template #label>
         <UCol gap="2xs">
-          <USkeleton class="h-3 w-36 rounded-small" variant="dark" />
-          <USkeleton class="h-1.5 rounded-small" variant="dark" />
+          <USkeleton class="h-3 w-36 rounded-small" />
+          <USkeleton class="h-1.5 rounded-small" />
         </UCol>
       </template>
     </USkeletonChoice>

package/ui.skeleton-choice/tests/USkeletonChoice.test.ts

@@ -7,10 +7,8 @@ import USkeleton from "../../ui.skeleton/USkeleton.vue";
 import type { Props } from "../types";
 
 describe("USkeletonChoice.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Label prop - true
-    it("renders label skeleton when label prop is true", () => {
+    it("Label – renders label skeleton when label prop is true", () => {
       const label = true;
 
       const component = mount(USkeletonChoice, {
@@ -24,8 +22,7 @@ describe("USkeletonChoice.vue", () => {
       expect(skeletons.length).toBe(2); // Input and label skeletons
     });
 
-    // Label prop - false: Only input skeleton
-    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 component = mount(USkeletonChoice, {
@@ -39,8 +36,7 @@ describe("USkeletonChoice.vue", () => {
       expect(skeletons.length).toBe(1); // Only input skeleton
     });
 
-    // Size prop
-    it("applies the correct size class to wrapper", () => {
+    it("Size – applies the correct size class to wrapper", () => {
       const size = {
         sm: "gap-2",
         md: "gap-2.5",
@@ -99,8 +95,7 @@ describe("USkeletonChoice.vue", () => {
       });
     });
 
-    // LabelAlign prop
-    it("applies the correct labelAlign class to wrapper", () => {
+    it("LabelAlign – applies the correct labelAlign class to wrapper", () => {
       const labelAlign = {
         left: "flex-row",
         right: "flex-row-reverse",
@@ -117,8 +112,7 @@ describe("USkeletonChoice.vue", () => {
       });
     });
 
-    // Type prop
-    it("applies the correct type class to input", () => {
+    it("Type – applies the correct type class to input", () => {
       const type = {
         checkbox: "rounded-small",
         radio: "rounded-full",
@@ -137,27 +131,7 @@ describe("USkeletonChoice.vue", () => {
       });
     });
 
-    // Variant prop
-    it("passes the correct variant to skeleton components", () => {
-      const variants = ["light", "default", "dark"];
-
-      variants.forEach((variant) => {
-        const component = mount(USkeletonChoice, {
-          props: {
-            variant: variant as Props["variant"],
-          },
-        });
-
-        const inputSkeleton = component.findAllComponents(USkeleton)[0];
-        const labelSkeleton = component.findAllComponents(USkeleton)[1];
-
-        expect(inputSkeleton.props("variant")).toBe(variant);
-        expect(labelSkeleton.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-choice";
 
       const component = mount(USkeletonChoice, {
@@ -170,10 +144,8 @@ describe("USkeletonChoice.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";
 

package/ui.skeleton-choice/types.ts

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

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,29 +11,31 @@ 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">
-      <USkeleton :variant="variant" v-bind="labelAttrs" />
+    <slot v-if="labelAlign !== LABEL_ALIGN.topInside && label" name="label">
+      <USkeleton v-bind="labelAttrs" />
     </slot>
 
-    <USkeleton v-if="props.type === 'input'" :variant="variant" v-bind="inputAttrs">
+    <USkeleton v-if="type === 'input'" v-bind="inputAttrs">
       <!-- @slot Use it to add custom content inside the input skeleton. -->
       <slot />
     </USkeleton>
 
-    <USkeleton v-else :variant="variant" v-bind="textareaAttrs">
+    <USkeleton v-else v-bind="textareaAttrs">
       <!-- @slot Use it to add custom content inside the textarea skeleton. -->
       <slot />
     </USkeleton>

package/ui.skeleton-input/config.ts

@@ -50,7 +50,6 @@ export default /*tw*/ {
     },
   },
   defaults: {
-    variant: "default",
     labelAlign: "topInside",
     type: "input",
     size: "md",

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

@@ -16,7 +16,7 @@ import type { Props } from "../types";
 
 interface SkeletonInputArgs extends Props {
   slotTemplate?: string;
-  enum: "variant" | "size" | "labelAlign" | "type";
+  enum: "size" | "labelAlign" | "type";
 }
 
 export default {
@@ -88,9 +88,6 @@ export const Types: StoryFn<SkeletonInputArgs> = (args: SkeletonInputArgs) => ({
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const Variants = EnumTemplate.bind({});
-Variants.args = { enum: "variant" };
-
 export const Slot: StoryFn<SkeletonInputArgs> = (args) => ({
   components: { USkeletonInput, USkeleton, UCol },
   setup() {
@@ -99,7 +96,7 @@ export const Slot: StoryFn<SkeletonInputArgs> = (args) => ({
   template: `
     <USkeletonInput label-align="top" v-bind="args" class="!max-w-96">
       <UCol align="end" >
-        <USkeleton class="size-5 rounded-small" variant="dark" />
+        <USkeleton class="size-5 rounded-small" />
       </UCol>
     </USkeletonInput>
   `,
@@ -114,8 +111,8 @@ export const LabelSlot: StoryFn<SkeletonInputArgs> = (args) => ({
     <USkeletonInput v-bind="args" label-align="top" class="!max-w-96">
       <template #label>
         <UCol gap="2xs"s>
-          <USkeleton class="h-3 w-36 rounded-small" variant="dark" />
-          <USkeleton class="h-1.5 w-24 rounded-small" variant="dark" />
+          <USkeleton class="h-3 w-36 rounded-small" />
+          <USkeleton class="h-1.5 w-24 rounded-small" />
         </UCol>
       </template>
     </USkeletonInput>