vueless 1.3.6-beta.0 → 1.3.6-beta.10

package/ui.image-avatar-group/storybook/stories.ts

@@ -0,0 +1,147 @@
+import {
+  getArgs,
+  getArgTypes,
+  getSlotNames,
+  getSlotsFragment,
+  getDocsDescription,
+} from "../../utils/storybook";
+
+import UAvatarGroup from "../../ui.image-avatar-group/UAvatarGroup.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import ULink from "../../ui.button-link/ULink.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Props } from "../types.ts";
+
+interface UAvatarGroupArgs extends Props {
+  slotTemplate?: string;
+  enum: "size" | "variant" | "rounded";
+}
+
+export default {
+  id: "6030",
+  title: "Images & Icons / Avatar Group",
+  component: UAvatarGroup,
+  args: {
+    avatars: [
+      { src: "https://i.pravatar.cc/300?img=1" },
+      { src: "https://i.pravatar.cc/300?img=2" },
+      { src: "https://i.pravatar.cc/300?img=3" },
+      { src: "https://i.pravatar.cc/300?img=4" },
+    ],
+    rounded: "full",
+  },
+  argTypes: {
+    ...getArgTypes(UAvatarGroup.__name),
+  },
+  parameters: {
+    docs: {
+      ...getDocsDescription(UAvatarGroup.__name),
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UAvatarGroupArgs> = (args: UAvatarGroupArgs) => ({
+  components: { UAvatarGroup, UAvatar, ULink },
+  setup: () => ({
+    args,
+    slots: getSlotNames(UAvatarGroup.__name),
+  }),
+  template: `
+    <UAvatarGroup v-bind="args">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UAvatarGroup>
+  `,
+});
+
+const EnumTemplate: StoryFn<UAvatarGroupArgs> = (args: UAvatarGroupArgs, { argTypes }) => ({
+  components: { UCol, UAvatarGroup, UAvatar },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <UCol>
+      <UAvatarGroup
+        v-for="option in argTypes?.[args.enum]?.options"
+        v-bind="getArgs(args, option)"
+        :key="option"
+      >
+        ${args.slotTemplate}
+      </UAvatarGroup>
+    </UCol>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Max = DefaultTemplate.bind({});
+Max.args = { max: 2 };
+Max.parameters = {
+  docs: {
+    description: {
+      story:
+        "When the number of avatars is greater than the max, the remaining count avatar is displayed.",
+    },
+  },
+};
+
+export const Sizes = EnumTemplate.bind({});
+Sizes.args = {
+  enum: "size",
+  slotTemplate: `
+    <template #remaining>
+      <UAvatar :label="option" />
+    </template>
+  `,
+};
+
+export const Variants = EnumTemplate.bind({});
+Variants.args = {
+  enum: "variant",
+  avatars: [{ label: "John Doe" }],
+  config: { avatar: "ring-0" },
+};
+
+export const AvatarConfig = DefaultTemplate.bind({});
+AvatarConfig.args = {
+  avatars: [
+    { src: "https://i.pravatar.cc/300?img=1", label: "John Doe", chip: { color: "primary" } },
+    { color: "warning", placeholderIcon: "person" },
+    {
+      src: "https://i.pravatar.cc/300?img=9",
+      label: "Jane Smith",
+      color: "info",
+      chip: { color: "grayscale" },
+    },
+  ],
+};
+AvatarConfig.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "You can customize the `label`, `color`, `placeholderIcon` and `chip` of a specific avatar by passing the corresponding props to its object.",
+    },
+  },
+};
+
+export const AvatarSlot = DefaultTemplate.bind({});
+AvatarSlot.args = {
+  slotTemplate: `
+    <template #avatar-2="{ avatar }">
+      <UAvatar
+        :src="avatar.src"
+        class="ring-3 ring-primary"
+      />
+    </template>
+  `,
+};
+
+export const RemainingSlot = DefaultTemplate.bind({});
+RemainingSlot.args = {
+  slotTemplate: `
+    <template #remaining="{ remainingCount }">
+      <ULink :label="'+' + remainingCount" size="lg" color="info" underlined />
+    </template>
+  `,
+};

package/ui.image-avatar-group/tests/UAvatarGroup.test.ts

@@ -0,0 +1,141 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+
+import UAvatarGroup from "../UAvatarGroup.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+
+import type { Props } from "../types.ts";
+
+describe("UAvatarGroup.vue", () => {
+  describe("Props", () => {
+    it("Size – applies the correct size to child avatars", async () => {
+      const sizes = ["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+
+      sizes.forEach((size) => {
+        const component = mount(UAvatarGroup, {
+          props: {
+            size: size as Props["size"],
+            avatars: [{ label: "John Doe" }, { label: "Jane Smith" }],
+          },
+        });
+
+        // Check if avatars have the correct size (they should inherit from group)
+        const avatars = component.findAllComponents(UAvatar);
+
+        expect(avatars.length).toBeGreaterThan(0);
+      });
+    });
+
+    it("Max – limits the number of avatars displayed based on max prop", async () => {
+      const component = mount(UAvatarGroup, {
+        props: {
+          max: 2,
+          avatars: [{ label: "John Doe" }, { label: "Jane Smith" }, { label: "Bob Johnson" }],
+        },
+      });
+
+      // Should have 2 visible avatars + 1 remaining avatar
+      const avatars = component.findAllComponents(UAvatar);
+
+      expect(avatars.length).toBe(3);
+
+      // The last avatar should be the remaining count avatar
+      const lastAvatar = avatars[avatars.length - 1];
+
+      expect(lastAvatar.text()).toBe("+1");
+    });
+
+    it("Variant – applies the correct variant to child avatars", async () => {
+      const variants = ["solid", "outlined", "subtle", "soft"];
+
+      variants.forEach((variant) => {
+        const component = mount(UAvatarGroup, {
+          props: {
+            variant: variant as Props["variant"],
+            avatars: [{ label: "John Doe" }, { label: "Jane Smith" }],
+          },
+        });
+
+        const avatars = component.findAllComponents(UAvatar);
+
+        expect(avatars.length).toBeGreaterThan(0);
+      });
+    });
+
+    it("Rounded – applies the correct rounded to child avatars", async () => {
+      const roundedValues = ["none", "sm", "md", "lg", "full"];
+
+      roundedValues.forEach((rounded) => {
+        const component = mount(UAvatarGroup, {
+          props: {
+            rounded: rounded as Props["rounded"],
+            avatars: [{ label: "John Doe" }, { label: "Jane Smith" }],
+          },
+        });
+
+        const avatars = component.findAllComponents(UAvatar);
+
+        expect(avatars.length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe("Slots", () => {
+    it("Avatars – renders avatars from avatars prop", async () => {
+      const component = mount(UAvatarGroup, {
+        props: {
+          avatars: [{ label: "John Doe" }, { label: "Jane Smith" }],
+        },
+      });
+
+      const avatars = component.findAllComponents(UAvatar);
+
+      expect(avatars.length).toBe(2);
+    });
+
+    it("Remaining – renders custom remaining slot", async () => {
+      const component = mount(UAvatarGroup, {
+        props: {
+          max: 1,
+          avatars: [{ label: "John Doe" }, { label: "Jane Smith" }],
+        },
+        slots: {
+          remaining: `
+            <template #remaining="{ remainingCount }">
+              <span class="custom-remaining">
+                Custom {{ remainingCount }}
+              </span>
+            </template>
+          `,
+        },
+        global: {
+          components: {
+            UAvatar,
+          },
+        },
+      });
+
+      const avatars = component.findAllComponents(UAvatar);
+
+      expect(avatars.length).toBe(2);
+
+      // Check if custom remaining slot content is rendered
+      const customRemaining = component.find(".custom-remaining");
+
+      expect(customRemaining.exists()).toBe(true);
+      expect(customRemaining.text()).toContain("Custom");
+    });
+  });
+
+  describe("Exposed refs", () => {
+    it("exposes avatarGroupRef", () => {
+      const component = mount(UAvatarGroup, {
+        props: {
+          avatars: [{ label: "John Doe" }],
+        },
+      });
+
+      expect(component.vm.avatarGroupRef).toBeDefined();
+    });
+  });
+});

package/ui.image-avatar-group/types.ts

@@ -0,0 +1,51 @@
+import defaultConfig from "./config";
+
+import type { ComponentConfig } from "../types";
+import type { ChipItem } from "../ui.image-avatar/types";
+
+export type Config = typeof defaultConfig;
+
+export interface AvatarItem {
+  src?: string;
+  label?: string;
+  color?: string;
+  placeholderIcon?: string;
+  chip?: ChipItem;
+}
+
+export interface Props {
+  /**
+   * Avatar items.
+   */
+  avatars?: AvatarItem[];
+
+  /**
+   * Avatar group size.
+   */
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+
+  /**
+   * Maximum number of avatars to display.
+   */
+  max?: number;
+
+  /**
+   * Avatar variant.
+   */
+  variant?: "solid" | "outlined" | "subtle" | "soft";
+
+  /**
+   * Avatar corner rounding.
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string | null;
+}

package/ui.navigation-pagination/storybook/stories.ts

@@ -85,8 +85,8 @@ Limit.parameters = {
   },
 };
 
-export const Variant = EnumTemplate.bind({});
-Variant.args = { enum: "variant" };
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant" };
 
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };

package/ui.navigation-tab/tests/UTab.test.ts

@@ -1,4 +1,3 @@
-import { h } from "vue";
 import { mount } from "@vue/test-utils";
 import { describe, it, expect, vi } from "vitest";
 
@@ -386,7 +385,7 @@ describe("UTab.vue", () => {
           value,
         },
         slots: {
-          left: (props) => h("div", { "data-active": props.active }),
+          left: '<div :data-active="params.active" />',
         },
         global: {
           provide: {
@@ -409,7 +408,7 @@ describe("UTab.vue", () => {
           leftIcon,
         },
         slots: {
-          left: (props) => h("div", { "data-icon-name": props.iconName }),
+          left: '<div :data-icon-name="params.iconName" />',
         },
         global: {
           provide: defaultProvide,

package/ui.navigation-tabs/UTabs.vue

@@ -128,7 +128,50 @@ const {
           :disabled="item.disabled"
           v-bind="tabAttrs"
           :data-test="getDataTest(`item-${index}`)"
-        />
+        >
+          <template #left="{ iconName, active }">
+            <!--
+              @slot Use it to add something before the tab label.
+              @binding {object} item
+              @binding {number} index
+              @binding {boolean} active
+              @binding {string} icon-name
+            -->
+            <slot name="left" :item="item" :index="index" :active="active" :icon-name="iconName" />
+          </template>
+
+          <template #label="{ label, iconName, active }">
+            <!--
+              @slot Use it to add something instead of the tab label.
+              @binding {object} item
+              @binding {number} index
+              @binding {string} label
+              @binding {boolean} active
+              @binding {string} icon-name
+            -->
+            <slot
+              name="label"
+              :item="item"
+              :index="index"
+              :label="label"
+              :active="active"
+              :icon-name="iconName"
+            >
+              {{ label }}
+            </slot>
+          </template>
+
+          <template #right="{ iconName, active }">
+            <!--
+              @slot Use it to add something after the tab label.
+              @binding {object} item
+              @binding {number} index
+              @binding {boolean} active
+              @binding {string} icon-name
+            -->
+            <slot name="right" :item="item" :index="index" :active="active" :icon-name="iconName" />
+          </template>
+        </UTab>
       </slot>
     </div>
 

package/ui.navigation-tabs/storybook/stories.ts

@@ -10,6 +10,12 @@ import UTabs from "../../ui.navigation-tabs/UTabs.vue";
 import URow from "../../ui.container-row/URow.vue";
 import ULabel from "../../ui.form-label/ULabel.vue";
 import UTab from "../../ui.navigation-tab/UTab.vue";
+import UBadge from "../../ui.text-badge/UBadge.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import UChip from "../../ui.other-chip/UChip.vue";
+import UText from "../../ui.text-block/UText.vue";
+
+import johnDoe from "../../ui.navigation-tab/storybook/assets/john-doe.png";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
@@ -109,6 +115,33 @@ export const DefaultSlot: StoryFn<UTabsArgs> = (args) => ({
   `,
 });
 
+export const TabSlots: StoryFn<UTabsArgs> = (args) => ({
+  components: { UTabs, UBadge, UAvatar, UChip, UText },
+  setup: () => ({ args, johnDoe }),
+  template: `
+    <UTabs v-model="args.modelValue" v-bind="args">
+      <template #left="{ index }">
+        <UAvatar
+          v-if="index === 0"
+          :src="johnDoe"
+          size="3xs"
+          rounded="full"
+        />
+      </template>
+
+      <template #label="{ label, index }">
+        <UChip v-if="index === 1" size="sm">
+          <UText :label="label" color="primary" class="mr-1.5" />
+        </UChip>
+      </template>
+
+      <template #right="{ index }">
+        <UBadge v-if="index === 2" label="New!" size="sm" />
+      </template>
+    </UTabs>
+  `,
+});
+
 export const PrevNextSlots: StoryFn<UTabsArgs> = (args) => ({
   components: { UTabs },
   setup: () => ({ args, getOptionsArray }),

package/ui.navigation-tabs/tests/UTabs.test.ts

@@ -284,6 +284,94 @@ describe("UTabs.vue", () => {
       expect(component.find(`.${slotClass}`).exists()).toBe(true);
       expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
     });
+
+    it("Left – renders content from left slot for each tab", () => {
+      const slotText = "Left";
+      const slotClass = "left-content";
+
+      const component = mount(UTabs, {
+        props: {
+          options,
+        },
+        slots: {
+          left: `<span class="${slotClass}">${slotText}</span>`,
+        },
+      });
+
+      const leftContents = component.findAll(`.${slotClass}`);
+
+      expect(leftContents.length).toBe(options.length);
+      leftContents.forEach((left) => {
+        expect(left.text()).toBe(slotText);
+      });
+    });
+
+    it("Label – renders content from label slot instead of default label", () => {
+      const testOptions: UTabsOption[] = [{ value: "tab1", label: "Tab 1" }];
+      const slotText = "Custom Label";
+      const slotClass = "label-content";
+
+      const component = mount(UTabs, {
+        props: {
+          options: testOptions,
+        },
+        slots: {
+          label: `<span class="${slotClass}">${slotText}</span>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotText);
+      expect(component.text()).not.toContain(testOptions[0].label);
+    });
+
+    it("Right – renders content from right slot", () => {
+      const slotText = "Right";
+      const slotClass = "right-content";
+
+      const component = mount(UTabs, {
+        props: {
+          options,
+        },
+        slots: {
+          right: `<span class="${slotClass}">${slotText}</span>`,
+        },
+      });
+
+      expect(component.findAll(`.${slotClass}`).length).toBe(options.length);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotText);
+    });
+
+    it("Slot – passes item, index and active state to slots", () => {
+      const modelValue = "tab2";
+
+      const component = mount(UTabs, {
+        props: {
+          options,
+          modelValue,
+        },
+        slots: {
+          left: `
+            <div
+              :data-value="params.item.value"
+              :data-index="params.index"
+              :data-active="params.active"
+            />
+          `,
+        },
+      });
+
+      options.forEach((option, index) => {
+        const el = component.find(`[data-value="${option.value}"][data-index="${index}"]`);
+
+        expect(el.exists()).toBe(true);
+      });
+
+      const activeEl = component.find('[data-active="true"]');
+
+      expect(activeEl.exists()).toBe(true);
+      expect(activeEl.attributes("data-value")).toBe(modelValue);
+    });
   });
 
   describe("Events", () => {

package/ui.text-block/config.ts

@@ -44,6 +44,7 @@ export default /*tw*/ {
         true: "leading-none",
       },
       wrap: {
+        true: "text-wrap wrap-anywhere",
         false: "text-nowrap",
       },
     },

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

@@ -90,8 +90,8 @@ Sizes.args = { enum: "size" };
 export const Color = EnumTemplate.bind({});
 Color.args = { enum: "color" };
 
-export const Variant = EnumTemplate.bind({});
-Variant.args = { enum: "variant" };
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant" };
 
 export const Line: StoryFn<UTextArgs> = (args: UTextArgs) => ({
   components: { UText, UCol },

package/ui.text-notify/UNotify.vue

@@ -44,7 +44,7 @@ onMounted(() => {
   window.addEventListener("notifyEnd", onNotifyEnd);
   window.addEventListener("notifyClearAll", onClearAll);
 
-  setPosition();
+  waitForPageElement();
 });
 
 onBeforeUnmount(() => {
@@ -86,12 +86,37 @@ function getOffsetWidth(selector: string): number {
   return element ? (element as HTMLElement).offsetWidth : 0;
 }
 
+function waitForPageElement() {
+  const positionClasses = vuelessConfig.components?.UNotify?.positionClasses;
+  const pageClass = positionClasses?.page || config.value?.positionClasses?.page;
+  const maxWaitTime = 2000;
+  const startTime = Date.now();
+
+  function checkAndSetPosition() {
+    const element = document.querySelector(pageClass);
+
+    if (element) {
+      setPosition();
+
+      return;
+    }
+
+    if (Date.now() - startTime < maxWaitTime) {
+      requestAnimationFrame(checkAndSetPosition);
+    } else {
+      setPosition();
+    }
+  }
+
+  checkAndSetPosition();
+}
+
 function setPosition() {
   const positionClasses = vuelessConfig.components?.UNotify?.positionClasses;
   const pageClass = positionClasses?.page || config.value?.positionClasses?.page;
   const asideClass = positionClasses?.aside || config.value?.positionClasses?.aside;
-  const pageWidth = getOffsetWidth(`${pageClass}`);
-  const asideWidth = getOffsetWidth(`${asideClass}`);
+  const pageWidth = getOffsetWidth(`.${pageClass}`);
+  const asideWidth = getOffsetWidth(`.${asideClass}`);
   const notifyWidth = notificationsWrapperRef.value?.$el.offsetWidth || 0;
 
   const styles: Record<string, string> = {
@@ -104,15 +129,13 @@ function setPosition() {
   styles[props.yPosition] = "0px";
 
   if (props.xPosition === NotificationPosition.Center) {
-    styles.left = `calc(50% - ${notifyWidth / 2}px)`;
+    styles.left = pageWidth
+      ? `${asideWidth + pageWidth / 2 - notifyWidth / 2}px`
+      : `calc(50% - ${notifyWidth / 2}px)`;
   } else {
     styles[props.xPosition] = "0px";
   }
 
-  if (pageWidth && props.xPosition !== NotificationPosition.Right) {
-    styles.left = `${asideWidth + pageWidth / 2 - notifyWidth / 2}px`;
-  }
-
   notifyPositionStyles.value = styles;
 }
 

package/ui.text-notify/config.ts

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  wrapper: "absolute overflow-visible md:w-[22rem]",
+  wrapper: "mt-3 absolute overflow-visible md:w-[22rem]",
   transitionGroup: {
     moveClass: "transition duration-500",
     enterActiveClass: "transition duration-500",