vueless 1.3.6-beta.1 → 1.3.6-beta.10

package/ui.form-date-picker-range/tests/UDatePickerRange.test.ts

@@ -440,6 +440,37 @@ describe("UDatePickerRange.vue", () => {
 
       expect(component.find("[vl-key='datepickerCalendar']").exists()).toBe(true);
     });
+
+    it("Menu – allows selecting the same day for from and to in range mode", async () => {
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          modelValue: { from: null, to: null },
+          dateFormat: "Y-m-d",
+          "onUpdate:modelValue": (value: RangeDate) => {
+            component.setProps({ modelValue: value });
+          },
+        },
+      });
+
+      const input = component.findComponent(UInput).get("input");
+
+      await input.trigger("focus");
+
+      const days = component.findAll("[vl-key='day']");
+
+      await days[10].trigger("click");
+      await days[10].trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeTruthy();
+
+      const emittedValues = component.emitted("update:modelValue")!;
+      const lastEmittedValue = emittedValues[emittedValues.length - 1][0] as RangeDate;
+
+      expect(lastEmittedValue.from).not.toBeNull();
+      expect(lastEmittedValue.to).not.toBeNull();
+      expect(lastEmittedValue.from).toBe(lastEmittedValue.to);
+    });
   });
 
   describe("Range Navigation", () => {
@@ -554,6 +585,89 @@ describe("UDatePickerRange.vue", () => {
     });
   });
 
+  describe("Events", () => {
+    it("ChangeRange – handles change-range event from calendar when dates are selected", async () => {
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          modelValue: { from: null, to: null },
+          dateFormat: "Y-m-d",
+          "onUpdate:modelValue": (value: RangeDate) => {
+            component.setProps({ modelValue: value });
+          },
+        },
+      });
+
+      const input = component.findComponent(UInput).find("input");
+
+      await input.trigger("focus");
+
+      const days = component.findAll("[vl-key='day']");
+
+      expect(days.length).toBeGreaterThan(0);
+
+      await days[0].trigger("click");
+      await days[3].trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeTruthy();
+    });
+
+    it("ChangeRange – handles change-range event from calendar when both dates are selected", async () => {
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          modelValue: { from: null, to: null },
+          dateFormat: "Y-m-d",
+          "onUpdate:modelValue": (value: RangeDate) => {
+            component.setProps({ modelValue: value });
+          },
+        },
+      });
+
+      const input = component.findComponent(UInput).find("input");
+
+      await input.trigger("focus");
+
+      const days = component.findAll("[vl-key='day']");
+
+      await days[0].trigger("click");
+      await days[3].trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeTruthy();
+    });
+
+    it("ChangeRange – handles change-range event from calendar when same date is selected twice", async () => {
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          modelValue: { from: null, to: null },
+          dateFormat: "Y-m-d",
+          "onUpdate:modelValue": (value: RangeDate) => {
+            component.setProps({ modelValue: value });
+          },
+        },
+      });
+
+      const input = component.findComponent(UInput).find("input");
+
+      await input.trigger("focus");
+
+      const days = component.findAll("[vl-key='day']");
+
+      await days[10].trigger("click");
+      await days[10].trigger("click");
+
+      expect(component.emitted("update:modelValue")).toBeTruthy();
+
+      const emittedValues = component.emitted("update:modelValue")!;
+      const lastEmittedValue = emittedValues[emittedValues.length - 1][0] as RangeDate;
+
+      expect(lastEmittedValue.from).not.toBeNull();
+      expect(lastEmittedValue.to).not.toBeNull();
+      expect(lastEmittedValue.from).toBe(lastEmittedValue.to);
+    });
+  });
+
   describe("Exposed Properties", () => {
     it("Exposes wrapper element ref", () => {
       const component = mount(UDatePickerRange, {

package/ui.form-date-picker-range/types.ts

@@ -74,6 +74,7 @@ export interface UDatePickerRangeInputsProps {
   minDate: string | Date | undefined;
   config: Config;
   attrs: UDatePickerRangeInputsAttrs;
+  dataTest?: string | null;
 }
 
 export interface CustomRangeButton {

package/ui.form-listbox/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: {
     base: `
-      my-2 p-1 flex flex-col gap-1 w-auto absolute z-50 shadow-sm
+      p-1 flex flex-col gap-1 w-auto absolute z-50 shadow-sm
       rounded-medium border border-solid border-default bg-default
       overflow-auto [-webkit-overflow-scrolling:touch]
       focus:outline-hidden

package/ui.image-avatar/UAvatar.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed, useTemplateRef } from "vue";
+import { computed, inject, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
+import UChip from "../ui.other-chip/UChip.vue";
 
 import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
@@ -16,6 +17,7 @@ defineOptions({ inheritAttrs: false });
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   label: "",
+  chip: () => ({}),
 });
 
 const emit = defineEmits([
@@ -25,6 +27,16 @@ const emit = defineEmits([
   "click",
 ]);
 
+const getAvatarGroupSize = inject<() => Props["size"]>("getAvatarGroupSize", () => undefined);
+const getAvatarGroupVariant = inject<() => Props["variant"]>(
+  "getAvatarGroupVariant",
+  () => undefined,
+);
+const getAvatarGroupRounded = inject<() => Props["rounded"]>(
+  "getAvatarGroupRounded",
+  () => undefined,
+);
+
 const avatarRef = useTemplateRef<HTMLDivElement>("avatar");
 
 const labelFirstLetters = computed(() => {
@@ -42,6 +54,8 @@ const backgroundImage = computed(() => {
   return props.src ? `background-image: url(${props.src});` : "";
 });
 
+const hasChip = computed(() => props.chip != null && Boolean(Object.keys(props.chip).length));
+
 function onClick(event: MouseEvent) {
   emit("click", event);
 }
@@ -65,38 +79,51 @@ defineExpose({
 const mutatedProps = computed(() => ({
   /* component state, not a props */
   src: Boolean(props.src),
+  size: getAvatarGroupSize() || props.size,
+  variant: getAvatarGroupVariant() || props.variant,
+  rounded: getAvatarGroupRounded() || props.rounded,
 }));
 
-const { getDataTest, config, avatarAttrs, placeholderIconAttrs } = useUI<Config>(
-  defaultConfig,
-  mutatedProps,
-);
+const { getDataTest, config, avatarAttrs, placeholderIconAttrs, chipAttrs, hiddenAttrs } =
+  useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
-  <div
-    ref="avatar"
-    :title="label"
-    :style="backgroundImage"
-    v-bind="avatarAttrs"
-    :data-test="getDataTest()"
-    @click="onClick"
+  <UChip
+    :icon="chip.icon"
+    :color="chip.color"
+    :inset="chip.inset"
+    :x-position="chip.xPosition"
+    :y-position="chip.yPosition"
+    v-bind="chipAttrs"
   >
-    <template v-if="!backgroundImage">
-      <!--
-        @slot Use it to add something instead of the avatar image placeholder.
-        @binding {string} icon-name
-      -->
-      <slot name="placeholder" :icon-name="placeholderIconName">
-        <template v-if="labelFirstLetters">{{ labelFirstLetters }}</template>
-        <UIcon
-          v-else
-          :size="size"
-          color="inherit"
-          :name="placeholderIconName"
-          v-bind="placeholderIconAttrs"
-        />
-      </slot>
+    <div
+      ref="avatar"
+      :title="label"
+      :style="backgroundImage"
+      v-bind="avatarAttrs"
+      :data-test="getDataTest()"
+      @click="onClick"
+    >
+      <template v-if="!backgroundImage">
+        <!--
+          @slot Use it to add something instead of the avatar image placeholder.
+          @binding {string} icon-name
+        -->
+        <slot name="placeholder" :icon-name="placeholderIconName">
+          <template v-if="labelFirstLetters">{{ labelFirstLetters }}</template>
+          <UIcon
+            v-else
+            :size="size"
+            color="inherit"
+            :name="placeholderIconName"
+            v-bind="placeholderIconAttrs"
+          />
+        </slot>
+      </template>
+    </div>
+    <template v-if="!hasChip" #chip>
+      <span v-bind="hiddenAttrs">&nbsp;</span>
     </template>
-  </div>
+  </UChip>
 </template>

package/ui.image-avatar/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   avatar: {
     base: `
-      flex items-center justify-center shrink-0 border
+      flex items-center justify-center shrink-0 border relative
       text-{color} bg-{color}/10 bg-contain bg-center bg-no-repeat
     `,
     variants: {
@@ -34,6 +34,23 @@ export default /*tw*/ {
       },
     },
   },
+  chip: {
+    base: "{UChip}",
+    defaults: {
+      size: {
+        "3xs": "xs",
+        "2xs": "xs",
+        xs: "sm",
+        sm: "md",
+        md: "md",
+        lg: "lg",
+        xl: "xl",
+        "2xl": "xl",
+        "3xl": "xl",
+      },
+    },
+  },
+  hidden: "hidden",
   placeholderIcon: "{UIcon}",
   defaults: {
     color: "grayscale",

package/ui.image-avatar/storybook/docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/addon-docs/blocks";
 import { getSource } from "../../utils/storybook";
 
 import * as stories from "./stories";
@@ -12,5 +12,20 @@ import defaultConfig from "../config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
+## Chip Object Properties
+Keys you may/have to provide to the component in a `chip` object.
+
+<Markdown>
+{`
+|  Key name              | Description                                           | Type                    |
+| ---------------------- | ----------------------------------------------------- | ----------------------- |
+| icon                   | Chip icon name                                        | String                  |
+| color                  | Chip color                                            | String                  |
+| xPosition              | Chip x-axis position                                  | String                  |
+| yPosition              | Chip y-axis position                                  | String                  |
+| inset                  | Display the chip inside the component                 | Boolean                 |
+`}
+</Markdown>
+
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

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

@@ -9,7 +9,6 @@ import {
 import UAvatar from "../../ui.image-avatar/UAvatar.vue";
 import URow from "../../ui.container-row/URow.vue";
 import ULoader from "../../ui.loader/ULoader.vue";
-import tooltip from "../../v.tooltip/vTooltip";
 
 import johnDoeImg from "./assets/john-doe.png";
 
@@ -22,7 +21,7 @@ interface UAvatarArgs extends Props {
 }
 
 export default {
-  id: "6030",
+  id: "6020",
   title: "Images & Icons / Avatar",
   component: UAvatar,
   args: {
@@ -51,7 +50,6 @@ const DefaultTemplate: StoryFn<UAvatarArgs> = (args: UAvatarArgs) => ({
 
 const EnumTemplate: StoryFn<UAvatarArgs> = (args: UAvatarArgs, { argTypes }) => ({
   components: { URow, UAvatar },
-  directives: { tooltip },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
     <URow>
@@ -106,6 +104,22 @@ PlaceholderIcon.args = {
   placeholderIcon: "account_circle",
 };
 
+export const Chip = DefaultTemplate.bind({});
+Chip.args = {
+  rounded: "full",
+  chip: {
+    color: "warning",
+    inset: true,
+  },
+};
+Chip.parameters = {
+  docs: {
+    description: {
+      story: "For the full list of chip object properties, see the table below.",
+    },
+  },
+};
+
 export const Variants = EnumTemplate.bind({});
 Variants.args = { enum: "variant" };
 

package/ui.image-avatar/tests/UAvatar.test.ts

@@ -49,7 +49,11 @@ describe("UAvatar.vue", () => {
         },
       });
 
-      expect(component.attributes("style")).toContain(expectedStyle);
+      // Use the exposed ref to access the avatar div
+      const avatarRef = component.vm.avatarRef;
+
+      expect(avatarRef).toBeDefined();
+      expect(avatarRef?.getAttribute("style")).toContain(expectedStyle);
       // When src is provided, the component should not render any text content
       expect(component.text()).toBe(expectedText);
     });
@@ -94,7 +98,11 @@ describe("UAvatar.vue", () => {
           },
         });
 
-        expect(component.attributes("class")).toContain(classes);
+        // Use the exposed ref to access the avatar div
+        const avatarRef = component.vm.avatarRef;
+
+        expect(avatarRef).toBeDefined();
+        expect(avatarRef?.className).toContain(classes);
       });
     });
 
@@ -119,7 +127,11 @@ describe("UAvatar.vue", () => {
           },
         });
 
-        expect(component.attributes("class")).toContain(classes);
+        // Use the exposed ref to access the avatar div
+        const avatarRef = component.vm.avatarRef;
+
+        expect(avatarRef).toBeDefined();
+        expect(avatarRef?.className).toContain(classes);
       });
     });
 
@@ -144,7 +156,11 @@ describe("UAvatar.vue", () => {
           },
         });
 
-        expect(component.attributes("class")).toContain(color);
+        // Use the exposed ref to access the avatar div
+        const avatarRef = component.vm.avatarRef;
+
+        expect(avatarRef).toBeDefined();
+        expect(avatarRef?.className).toContain(color);
       });
     });
 
@@ -165,7 +181,11 @@ describe("UAvatar.vue", () => {
           },
         });
 
-        expect(component.attributes("class")).toContain(classes);
+        // Use the exposed ref to access the avatar div
+        const avatarRef = component.vm.avatarRef;
+
+        expect(avatarRef).toBeDefined();
+        expect(avatarRef?.className).toContain(classes);
       });
     });
 
@@ -179,7 +199,11 @@ describe("UAvatar.vue", () => {
         },
       });
 
-      expect(component.attributes("data-test")).toBe(dataTest);
+      // Use the exposed ref to access the avatar div
+      const avatarRef = component.vm.avatarRef;
+
+      expect(avatarRef).toBeDefined();
+      expect(avatarRef?.getAttribute("data-test")).toBe(dataTest);
     });
   });
 
@@ -215,7 +239,11 @@ describe("UAvatar.vue", () => {
         },
       });
 
-      await component.trigger("click");
+      // Use the exposed ref to access the avatar div and trigger click
+      const avatarRef = component.vm.avatarRef;
+
+      expect(avatarRef).toBeDefined();
+      avatarRef?.dispatchEvent(new Event("click"));
 
       expect(component.emitted("click")).toBeTruthy();
       expect(component.emitted("click")?.length).toBe(expectedLength);

package/ui.image-avatar/types.ts

@@ -4,6 +4,14 @@ import type { ComponentConfig } from "../types";
 
 export type Config = typeof defaultConfig;
 
+export interface ChipItem {
+  icon?: string;
+  color?: Props["color"];
+  xPosition?: "left" | "right";
+  yPosition?: "top" | "bottom";
+  inset?: boolean;
+}
+
 export interface Props {
   /**
    * Avatar label (username, nickname, etc.).
@@ -49,6 +57,11 @@ export interface Props {
    */
   placeholderIcon?: string;
 
+  /**
+   * Avatar chip config.
+   */
+  chip?: ChipItem;
+
   /**
    * Component config object.
    */

package/ui.image-avatar-group/UAvatarGroup.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, provide, useTemplateRef } from "vue";
+
+import { useUI } from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
+
+import UAvatar from "../ui.image-avatar/UAvatar.vue";
+
+import { COMPONENT_NAME } from "./constants";
+import defaultConfig from "./config";
+
+import type { Props, Config } from "./types";
+import type { Props as AvatarProps } from "../ui.image-avatar/types";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  avatars: () => [],
+});
+
+const avatarGroupRef = useTemplateRef<HTMLDivElement>("avatarGroup");
+
+provide("getAvatarGroupSize", () => props.size);
+provide("getAvatarGroupVariant", () => props.variant);
+provide("getAvatarGroupRounded", () => props.rounded);
+
+const visibleAvatars = computed(() => {
+  return props.avatars.slice(0, props.max);
+});
+
+const remainingCount = computed(() => {
+  return props.avatars.length - props.max;
+});
+
+const hasMoreAvatars = computed(() => remainingCount.value > 0);
+
+defineExpose({
+  /**
+   * A reference to the avatar group element for direct DOM manipulation.
+   * @property {HTMLDivElement}
+   */
+  avatarGroupRef,
+});
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { getDataTest, avatarGroupAttrs, avatarAttrs, remainingAttrs } = useUI<Config>(defaultConfig);
+</script>
+
+<template>
+  <div ref="avatarGroup" v-bind="avatarGroupAttrs" :data-test="getDataTest()">
+    <template v-for="(avatar, index) in visibleAvatars" :key="index">
+      <!--
+        @slot Use it to customize a specific avatar.
+        @binding {number} index
+        @binding {object} avatar
+      -->
+      <slot :name="`avatar-${index}`" :index="index" :avatar="avatar">
+        <UAvatar
+          :src="avatar.src"
+          :label="avatar.label"
+          :color="avatar.color as AvatarProps['color']"
+          :placeholder-icon="avatar.placeholderIcon"
+          :chip="avatar.chip"
+          v-bind="avatarAttrs"
+        />
+      </slot>
+    </template>
+
+    <div v-if="hasMoreAvatars">
+      <UAvatar :size="size" color="neutral" :rounded="rounded" v-bind="remainingAttrs">
+        <template #placeholder>
+          <!--
+            @slot Use it to customize the remaining count avatar.
+            @binding {number} remaining-count
+          -->
+          <slot name="remaining" :remaining-count="remainingCount">
+            {{ `+${remainingCount}` }}
+          </slot>
+        </template>
+      </UAvatar>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,11 @@
+export default /*tw*/ {
+  avatarGroup: "inline-flex items-center",
+  avatar: "{UAvatar} ring-3 -me-1.5",
+  remaining: "{UAvatar} ring-3",
+  defaults: {
+    variant: "solid",
+    rounded: "md",
+    size: "md",
+    max: 3,
+  },
+};

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

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const COMPONENT_NAME = "UAvatarGroup";

package/ui.image-avatar-group/storybook/docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
+import { getSource } from "../../utils/storybook";
+
+import * as stories from "./stories";
+import defaultConfig from "../config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />