vueless 1.2.15-beta.3 → 1.2.15-beta.5

package/ui.form-listbox/tests/UListbox.test.ts

@@ -9,9 +9,9 @@ import type { Props } from "../types";
 
 describe("UListbox.vue", () => {
   const defaultOptions = [
-    { label: "Option 1", id: "option1" },
-    { label: "Option 2", id: "option2" },
-    { label: "Option 3", id: "option3" },
+    { label: "Option 1", value: "option1" },
+    { label: "Option 2", value: "option2" },
+    { label: "Option 3", value: "option3" },
   ];
 
   const highlightedClass = "bg-primary/5";
@@ -140,10 +140,10 @@ describe("UListbox.vue", () => {
 
       await options[1].trigger("click");
 
-      expect(component.emitted("update:modelValue")![0][0]).toEqual([defaultOptions[0].id]);
+      expect(component.emitted("update:modelValue")![0][0]).toEqual([defaultOptions[0].value]);
       expect(component.emitted("update:modelValue")![1][0]).toEqual([
-        defaultOptions[0].id,
-        defaultOptions[1].id,
+        defaultOptions[0].value,
+        defaultOptions[1].value,
       ]);
     });
 

package/ui.form-radio-group/URadioGroup.vue

@@ -86,8 +86,8 @@ const { getDataTest, groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Confi
           v-for="(option, index) in options"
           :key="index"
           :model-value="selectedItem"
-          :value="option.value"
-          :label="option.label"
+          :value="option[valueKey]"
+          :label="String(option[labelKey] || undefined)"
           :description="option.description"
           :disabled="disabled"
           v-bind="groupRadioAttrs"

package/ui.form-radio-group/config.ts

@@ -14,6 +14,8 @@ export default /*tw*/ {
   defaults: {
     color: "primary",
     size: "md",
+    labelKey: "label",
+    valueKey: "value",
     disabled: false,
   },
 };

package/ui.form-radio-group/storybook/stories.ts

@@ -8,10 +8,11 @@ import {
 
 import URadioGroup from "../../ui.form-radio-group/URadioGroup.vue";
 import URadio from "../../ui.form-radio/URadio.vue";
+import UAlert from "../../ui.text-alert/UAlert.vue";
 import UCol from "../../ui.container-col/UCol.vue";
+import URow from "../../ui.container-row/URow.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import UText from "../../ui.text-block/UText.vue";
-import URow from "../../ui.container-row/URow.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
@@ -28,9 +29,9 @@ export default {
   args: {
     label: "Select your preferred delivery option:",
     options: [
-      { value: "standard", label: "Standard Shipping (3-5 business days)" },
-      { value: "express", label: "Express Shipping (1-2 business days)" },
-      { value: "pickup", label: "In-Store Pickup (Available same day)" },
+      { id: "standard", label: "Standard Shipping (3-5 business days)" },
+      { id: "express", label: "Express Shipping (1-2 business days)" },
+      { id: "pickup", label: "In-Store Pickup (Available same day)" },
     ],
   },
   argTypes: {
@@ -54,16 +55,17 @@ const DefaultTemplate: StoryFn<URadioGroupArgs> = (args: URadioGroupArgs) => ({
 });
 
 const EnumTemplate: StoryFn<URadioGroupArgs> = (args: URadioGroupArgs, { argTypes }) => ({
-  components: { URadioGroup, UCol },
+  components: { URadioGroup, URow },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
-    <UCol>
+    <URow>
       <URadioGroup
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
+        :name="option"
       />
-    </UCol>
+    </URow>
   `,
 });
 
@@ -125,8 +127,46 @@ LabelSlot.args = {
   name: "LabelSlot",
   slotTemplate: `
     <template #label="{ label }">
-      <span class="text-red-500">*</span>
       {{ label }}
+      <span class="text-red-500">*</span>
     </template>
   `,
 };
+
+export const CustomKeys: StoryFn<URadioGroupArgs> = (args: URadioGroupArgs) => ({
+  components: { URadioGroup, UCol, UAlert },
+  setup: () => ({ args }),
+  template: `
+    <UCol>
+      <URadioGroup v-bind="args" v-model="args.modelValue" />
+
+      <UAlert
+        :description="args.modelValue"
+        size="sm"
+        variant="soft"
+        color="success"
+        bordered
+      />
+    </UCol>
+  `,
+});
+CustomKeys.args = {
+  name: "CustomKeys",
+  label: "Select your subscription plan:",
+  labelKey: "title",
+  valueKey: "id",
+  options: [
+    { id: "basic", title: "Basic Plan - $9.99/month" },
+    { id: "pro", title: "Pro Plan - $19.99/month" },
+    { id: "enterprise", title: "Enterprise Plan - $49.99/month" },
+  ],
+};
+CustomKeys.parameters = {
+  docs: {
+    description: {
+      story:
+        "Use `labelKey` and `valueKey` props to specify custom keys for label and value in option objects. " +
+        "This is useful when working with data from APIs that use different property names.",
+    },
+  },
+};

package/ui.form-radio-group/tests/URadioGroup.test.ts

@@ -194,6 +194,74 @@ describe("URadioGroup.vue", () => {
         expect(radio.attributes("data-test")).toBe(`${dataTestValue}-item-${idx}-label`);
       });
     });
+
+    it("LabelKey – uses custom label key for option labels", () => {
+      const customOptions = [
+        { value: "option-1", name: "Option 1" },
+        { value: "option-2", name: "Option 2" },
+        { value: "option-3", name: "Option 3" },
+      ];
+
+      const component = mount(URadioGroup, {
+        props: {
+          name: defaultName,
+          options: customOptions,
+          labelKey: "name",
+        },
+      });
+
+      const radios = component.findAllComponents(URadio);
+
+      radios.forEach((radio, index) => {
+        expect(radio.props("label")).toBe(customOptions[index].name);
+      });
+    });
+
+    it("ValueKey – uses custom value key for option values", () => {
+      const customOptions = [
+        { id: "option-1", label: "Option 1" },
+        { id: "option-2", label: "Option 2" },
+        { id: "option-3", label: "Option 3" },
+      ];
+
+      const component = mount(URadioGroup, {
+        props: {
+          name: defaultName,
+          options: customOptions,
+          valueKey: "id",
+        },
+      });
+
+      const radios = component.findAllComponents(URadio);
+
+      radios.forEach((radio, index) => {
+        expect(radio.props("value")).toBe(customOptions[index].id);
+      });
+    });
+
+    it("LabelKey and ValueKey – works with complex objects", async () => {
+      const customOptions = [
+        { planId: "basic", title: "Basic Plan" },
+        { planId: "pro", title: "Pro Plan" },
+      ];
+
+      const component = mount(URadioGroup, {
+        props: {
+          name: defaultName,
+          options: customOptions,
+          labelKey: "title",
+          valueKey: "planId",
+          modelValue: "",
+        },
+      });
+
+      const radios = component.findAllComponents(URadio);
+
+      expect(radios[0].props("label")).toBe("Basic Plan");
+      expect(radios[0].props("value")).toBe("basic");
+      expect(radios[1].props("label")).toBe("Pro Plan");
+      expect(radios[1].props("value")).toBe("pro");
+    });
   });
 
   describe("Slots", () => {

package/ui.form-radio-group/types.ts

@@ -4,12 +4,16 @@ import type { UnknownObject, UnknownArray, ComponentConfig } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface URadioGroupOption {
-  value: string | number | boolean | UnknownArray | UnknownObject;
-  label: string;
+export interface BaseOption {
+  value?: string | number | boolean | UnknownArray | UnknownObject;
+  label?: string;
   description?: string;
 }
 
+export interface Option extends BaseOption {
+  [key: string]: string | number | boolean | UnknownArray | UnknownObject | undefined;
+}
+
 export type SetRadioGroupSelectedItem =
   | ((value: string | number | boolean | UnknownArray | UnknownObject) => void)
   | null;
@@ -23,7 +27,17 @@ export interface Props {
   /**
    * Radio group options.
    */
-  options?: URadioGroupOption[];
+  options?: Option[];
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey?: string;
+
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey?: string;
 
   /**
    * Radio group label.

package/ui.form-select/USelect.vue

@@ -218,6 +218,28 @@ const toggleIconName = computed(() => {
   return props.toggleIcon ? config.value.defaults.toggleIcon : "";
 });
 
+const ariaExpanded = computed(() => isOpen.value);
+
+const ariaActiveDescendant = computed(() => {
+  if (!isOpen.value || !listboxRef.value) return undefined;
+  const pointer = listboxRef.value.pointer;
+
+  if (pointer === undefined || pointer < 0) return undefined;
+
+  return `${elementId}-${pointer}`;
+});
+
+const ariaInvalid = computed(() => Boolean(props.error) ?? undefined);
+
+const ariaLabelledBy = computed(() => (props.label ? elementId : undefined));
+
+const ariaDescribedBy = computed(() => {
+  if (props.error) return `error-${elementId}`;
+  if (props.description) return `description-${elementId}`;
+
+  return undefined;
+});
+
 watch(localValue, setLabelPosition, { deep: true });
 
 onMounted(() => {
@@ -232,6 +254,10 @@ function onSearchChange(query: string) {
   emit("searchChange", query);
 }
 
+function onSearchUpdate(query: string) {
+  emit("update:search", query);
+}
+
 function onKeydownAddOption(event: KeyboardEvent) {
   if (!isOpen.value) return;
 
@@ -484,6 +510,7 @@ const {
 <template>
   <ULabel
     ref="labelComponent"
+    :for="elementId"
     :size="size"
     :label="label"
     :error="error"
@@ -515,7 +542,15 @@ const {
       ref="wrapper"
       :tabindex="searchable || disabled ? -1 : 0"
       role="combobox"
-      :aria-owns="'listbox-' + elementId"
+      :aria-expanded="ariaExpanded"
+      aria-haspopup="listbox"
+      :aria-controls="`listbox-${elementId}`"
+      :aria-activedescendant="ariaActiveDescendant"
+      :aria-disabled="disabled || undefined"
+      :aria-invalid="ariaInvalid"
+      :aria-labelledby="ariaLabelledBy"
+      :aria-describedby="ariaDescribedBy"
+      :aria-autocomplete="searchable ? 'list' : undefined"
       v-bind="wrapperAttrs"
       @focus="activate"
       @blur="onBlur"
@@ -830,7 +865,7 @@ const {
         @blur="onListboxBlur"
         @search-blur="onListboxSearchBlur"
         @search-change="onSearchChange"
-        @update:search="(value) => emit('update:search', value)"
+        @update:search="onSearchUpdate"
       >
         <template #before-option="{ option, index }">
           <!--

package/ui.form-select/config.ts

@@ -138,7 +138,7 @@ export default /*tw*/ {
     size: "md",
     labelAlign: "topInside",
     openDirection: "auto",
-    valueKey: "id",
+    valueKey: "value",
     labelKey: "label",
     groupLabelKey: "label",
     multipleVariant: "inline",

package/ui.form-select/tests/USelect.test.ts

@@ -11,9 +11,9 @@ import type { Props } from "../types";
 
 describe("USelect.vue", () => {
   const defaultOptions = [
-    { label: "Option 1", id: "option1" },
-    { label: "Option 2", id: "option2" },
-    { label: "Option 3", id: "option3" },
+    { label: "Option 1", value: "option1" },
+    { label: "Option 2", value: "option2" },
+    { label: "Option 3", value: "option3" },
   ];
 
   describe("Props", () => {
@@ -448,7 +448,9 @@ describe("USelect.vue", () => {
         },
       });
 
-      expect(component.find("[vl-key='wrapper']").attributes("aria-owns")).toBe(`listbox-${id}`);
+      expect(component.find("[vl-key='wrapper']").attributes("aria-controls")).toBe(
+        `listbox-${id}`,
+      );
     });
 
     it("Data Test – applies the correct data-test attributes", async () => {

package/ui.form-switch/USwitch.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useId, useTemplateRef } from "vue";
+import { computed, useId, useSlots, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
@@ -29,7 +29,7 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
-const wrapperRef = useTemplateRef<HTMLLabelElement>("wrapper");
+const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
 const { localeMessages } = useComponentLocaleMessages<typeof defaultConfig.i18n>(
   COMPONENT_NAME,
@@ -42,8 +42,14 @@ const checkedValue = computed({
   set: (value) => emit("update:modelValue", value),
 });
 
+const slots = useSlots();
+
 const elementId = props.id || useId();
 
+const hasLabel = computed(() => Boolean(props.label || slots.label));
+
+const inputAriaLabelledBy = computed(() => (hasLabel.value ? elementId : undefined));
+
 const switchLabel = computed(() => {
   return checkedValue.value ? localeMessages.value.active : localeMessages.value.inactive;
 });
@@ -62,7 +68,8 @@ function toggle() {
   }
 }
 
-function onClickToggle() {
+function onClickToggle(event: Event) {
+  event.stopPropagation();
   toggle();
 }
 
@@ -70,10 +77,14 @@ function onKeydownSpace() {
   toggle();
 }
 
+function onClickWrapper() {
+  toggle();
+}
+
 defineExpose({
   /**
    * A reference to the component's wrapper element for direct DOM manipulation.
-   * @property {HTMLLabelElement}
+   * @property {HTMLDivElement}
    */
   wrapperRef,
 });
@@ -118,13 +129,13 @@ const {
       <slot name="label" :label="label" />
     </template>
 
-    <label
+    <div
       ref="wrapper"
       tabindex="0"
-      :for="elementId"
       v-bind="wrapperAttrs"
       @keydown.enter="onKeydownSpace"
       @keydown.space.prevent="onKeydownSpace"
+      @click="onClickWrapper"
     >
       <input
         :id="elementId"
@@ -132,6 +143,8 @@ const {
         tabindex="-1"
         type="checkbox"
         :disabled="disabled"
+        :aria-labelledby="inputAriaLabelledBy"
+        :aria-label="!hasLabel ? localeMessages.switch : undefined"
         v-bind="inputAttrs"
         @click="onClickToggle"
       />
@@ -146,6 +159,6 @@ const {
       </span>
 
       <span v-if="toggleLabel" v-bind="toggleLabelAttrs" v-text="switchLabel" />
-    </label>
+    </div>
   </ULabel>
 </template>

package/ui.form-switch/config.ts

@@ -74,7 +74,9 @@ export default /*tw*/ {
       },
     ],
   },
+  /* These are used for a11y. */
   i18n: {
+    switch: "Switch",
     inactive: "Off",
     active: "On",
   },

package/ui.form-switch/tests/USwitch.test.ts

@@ -106,7 +106,7 @@ describe("USwitch.vue", () => {
           },
         });
 
-        expect(component.find("label").attributes("class")).toContain(color);
+        expect(component.get("[vl-key='wrapper']").attributes("class")).toContain(`bg-${color}`);
       });
     });
 
@@ -169,7 +169,9 @@ describe("USwitch.vue", () => {
       const labelComponent = component.findComponent(ULabel);
 
       expect(labelComponent.props("disabled")).toBe(true);
-      expect(component.find("label").attributes("class")).toContain("pointer-events-none");
+      expect(component.get("[vl-key='wrapper']").attributes("class")).toContain(
+        "pointer-events-none",
+      );
     });
 
     it("Id – applies the correct id attribute", () => {
@@ -210,7 +212,7 @@ describe("USwitch.vue", () => {
         },
       });
 
-      expect(component.findAll("label")[1].text()).toBe(customLabelContent);
+      expect(component.find("label").text()).toBe(customLabelContent);
     });
 
     it("Label – exposes label prop to slot", () => {
@@ -225,7 +227,7 @@ describe("USwitch.vue", () => {
         },
       });
 
-      expect(component.findAll("label")[1].text()).toBe(`Modified ${defaultLabel}`);
+      expect(component.find("label").text()).toBe(`Modified ${defaultLabel}`);
     });
   });
 

package/ui.form-textarea/UTextarea.vue

@@ -63,7 +63,7 @@ const elementId = props.id || useId();
 const textareaRef = useTemplateRef<HTMLTextAreaElement>("textarea");
 const labelComponentRef = useTemplateRef<InstanceType<typeof ULabel>>("labelComponent");
 const leftSlotWrapperRef = useTemplateRef<HTMLDivElement>("leftSlotWrapper");
-const wrapperRef = useTemplateRef<HTMLLabelElement>("wrapper");
+const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
 const currentRows = ref(Number(props.rows));
 
@@ -192,10 +192,14 @@ function onMousedown() {
   emit("mousedown");
 }
 
+function onSlotClick() {
+  textareaRef.value?.focus();
+}
+
 defineExpose({
   /**
    * A reference to the component's wrapper element for direct DOM manipulation.
-   * @property {HTMLLabelElement}
+   * @property {HTMLDivElement}
    */
   wrapperRef,
 
@@ -246,12 +250,13 @@ const {
       <slot name="label" :label="label" />
     </template>
 
-    <label ref="wrapper" :for="elementId" v-bind="wrapperAttrs">
+    <div ref="wrapper" v-bind="wrapperAttrs">
       <span
         v-if="hasSlotContent($slots['left'])"
         ref="leftSlotWrapper"
         :for="elementId"
         v-bind="leftSlotAttrs"
+        @click="onSlotClick"
       >
         <!-- @slot Use it to add something before the text. -->
         <slot name="left" />
@@ -277,10 +282,15 @@ const {
         @click="onClick"
       />
 
-      <span v-if="hasSlotContent($slots['right'])" :for="elementId" v-bind="rightSlotAttrs">
+      <span
+        v-if="hasSlotContent($slots['right'])"
+        :for="elementId"
+        v-bind="rightSlotAttrs"
+        @click="onSlotClick"
+      >
         <!-- @slot Use it to add something after the text. -->
         <slot name="right" />
       </span>
-    </label>
+    </div>
   </ULabel>
 </template>

package/ui.form-textarea/tests/UTextarea.test.ts

@@ -528,7 +528,7 @@ describe("UTextarea.vue", () => {
       });
 
       expect(component.vm.wrapperRef).toBeDefined();
-      expect(component.vm.wrapperRef!.tagName).toBe("LABEL");
+      expect(component.vm.wrapperRef!.tagName).toBe("DIV");
     });
 
     it("Textarea Element – exposes textarea element ref", () => {

package/ui.navigation-pagination/UPagination.vue

@@ -4,6 +4,7 @@ import { range } from "lodash-es";
 
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
+import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
 import UButton from "../ui.button/UButton.vue";
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -32,6 +33,12 @@ const emit = defineEmits([
   "update:modelValue",
 ]);
 
+const { localeMessages } = useComponentLocaleMessages<typeof defaultConfig.i18n>(
+  COMPONENT_NAME,
+  defaultConfig.i18n,
+  props?.config?.i18n,
+);
+
 const paginationRef = useTemplateRef<HTMLDivElement>("pagination");
 
 const currentPage = computed({
@@ -133,6 +140,7 @@ const {
       :label="firstLabel"
       :square="!firstLabel"
       :disabled="prevIsDisabled"
+      :aria-label="firstLabel || localeMessages.first"
       v-bind="firstButtonAttrs"
       :data-test="getDataTest('first')"
       @click="goToFirstPage"
@@ -156,6 +164,7 @@ const {
       :label="prevLabel"
       :square="!prevLabel"
       :disabled="prevIsDisabled"
+      :aria-label="prevLabel || localeMessages.prev"
       v-bind="prevButtonAttrs"
       :data-test="getDataTest('prev')"
       @click="goToPrevPage"
@@ -185,6 +194,8 @@ const {
         :variant="variant"
         :label="String(page.number)"
         :disabled="disabled"
+        :aria-label="`${localeMessages.currentPage} ${page.number}`"
+        :aria-current="true"
         v-bind="activeButtonAttrs"
         :data-test="getDataTest('active')"
       />
@@ -194,6 +205,7 @@ const {
         variant="ghost"
         :label="String(page.number)"
         :disabled="disabled"
+        :aria-label="`${localeMessages.goToPage} ${page.number}`"
         v-bind="inactiveButtonAttrs"
         :data-test="getDataTest('inactive')"
         @click="selectPage(page.number)"
@@ -205,6 +217,7 @@ const {
       :label="nextLabel"
       :square="!nextLabel"
       :disabled="nextIsDisabled"
+      :aria-label="nextLabel || localeMessages.next"
       v-bind="nextButtonAttrs"
       :data-test="getDataTest('next')"
       @click="goToNextPage"
@@ -229,6 +242,7 @@ const {
       :label="lastLabel"
       :square="!lastLabel"
       :disabled="nextIsDisabled"
+      :aria-label="lastLabel || localeMessages.last"
       v-bind="lastButtonAttrs"
       :data-test="getDataTest('last')"
       @click="goToLastPage"

package/ui.navigation-pagination/config.ts

@@ -34,6 +34,15 @@ export default /*tw*/ {
   firstIcon: "{>paginationIcon}",
   prevIcon: "{>paginationIcon}",
   nextIcon: "{>paginationIcon}",
+  /* These are used for a11y. */
+  i18n: {
+    first: "Go to first page",
+    last: "Go to last page",
+    prev: "Go to previous page",
+    next: "Go to next page",
+    currentPage: "Current page, page",
+    goToPage: "Go to page",
+  },
   defaults: {
     variant: "solid",
     size: "md",