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

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

@@ -33,9 +33,9 @@ export default {
   args: {
     label: "Select your preferred communication methods:",
     options: [
-      { label: "Email Notifications", value: "email" },
-      { label: "SMS Alerts", value: "sms" },
-      { label: "Push Notifications", value: "push" },
+      { label: "Email Notifications", id: "email" },
+      { label: "SMS Alerts", id: "sms" },
+      { label: "Push Notifications", id: "push" },
     ],
   },
   argTypes: {
@@ -108,7 +108,7 @@ export const Options: StoryFn<UCheckboxGroupArgs> = (args: UCheckboxGroupArgs) =
       <UAlert
         :description="modelValue"
         size="sm"
-        variant="ghost"
+        variant="soft"
         color="success"
         bordered
       />
@@ -144,11 +144,48 @@ export const LabelSlot = DefaultTemplate.bind({});
 LabelSlot.args = {
   name: "LabelSlot",
   slotTemplate: `
-    <template #label>
-      <URow gap="2xs" align="center">
-        <UText>Select your <ULink label="notification preferences" /></UText>
-        <UIcon name="notifications" size="xs" />
-      </URow>
+    <template #label="{ label }">
+      {{ label }}
+      <span class="text-red-500">*</span>
     </template>
   `,
 };
+
+export const CustomKeys: StoryFn<UCheckboxGroupArgs> = (args: UCheckboxGroupArgs) => ({
+  components: { UCheckboxGroup, UCol, UAlert },
+  setup: () => ({ args, modelValue: ref([]) }),
+  template: `
+    <UCol>
+      <UCheckboxGroup v-bind="args" v-model="modelValue" />
+
+      <UAlert
+        :description="modelValue"
+        size="sm"
+        variant="soft"
+        color="success"
+        bordered
+      />
+    </UCol>
+  `,
+});
+CustomKeys.args = {
+  name: "CustomKeys",
+  label: "Select your preferred features:",
+  labelKey: "name",
+  valueKey: "id",
+  options: [
+    { id: "dark-mode", name: "Dark Mode" },
+    { id: "auto-save", name: "Auto-save" },
+    { id: "notifications", name: "Notifications" },
+    { id: "two-factor", name: "Two-factor Authentication" },
+  ],
+};
+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-checkbox-group/tests/UCheckboxGroup.test.ts

@@ -185,6 +185,71 @@ describe("UCheckboxGroup.vue", () => {
         expect(checkbox.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(UCheckboxGroup, {
+        props: {
+          options: customOptions,
+          labelKey: "name",
+        },
+      });
+
+      const checkboxes = component.findAllComponents(UCheckbox);
+
+      checkboxes.forEach((checkbox, index) => {
+        expect(checkbox.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(UCheckboxGroup, {
+        props: {
+          options: customOptions,
+          valueKey: "id",
+        },
+      });
+
+      const checkboxes = component.findAllComponents(UCheckbox);
+
+      checkboxes.forEach((checkbox, index) => {
+        expect(checkbox.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(UCheckboxGroup, {
+        props: {
+          options: customOptions,
+          labelKey: "title",
+          valueKey: "planId",
+          modelValue: [],
+        },
+      });
+
+      const checkboxes = component.findAllComponents(UCheckbox);
+
+      expect(checkboxes[0].props("label")).toBe("Basic Plan");
+      expect(checkboxes[0].props("value")).toBe("basic");
+      expect(checkboxes[1].props("label")).toBe("Pro Plan");
+      expect(checkboxes[1].props("value")).toBe("pro");
+    });
   });
 
   describe("Slots", () => {

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

@@ -16,6 +16,16 @@ export interface Props {
    */
   options?: UCheckboxOption[];
 
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey?: string;
+
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey?: string;
+
   /**
    * Checkbox group label.
    */

package/ui.form-date-picker/config.ts

@@ -125,6 +125,11 @@ export default /*tw*/ {
     },
     timeLabel: "Time",
     okLabel: "Ok",
+    /* These are used for a11y. */
+    previousYear: "Previous Year",
+    nextYear: "Next Year",
+    previousMonth: "Previous Month",
+    nextMonth: "Next Month",
   },
   defaults: {
     size: "md",

package/ui.form-input/UInput.vue

@@ -91,7 +91,7 @@ const VALIDATION_RULES_REG_EX = {
 
 const slots = useSlots();
 
-const wrapperRef = useTemplateRef<HTMLLabelElement>("wrapper");
+const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const inputRef = useTemplateRef<HTMLInputElement>("input");
 const leftSlotWrapperRef = useTemplateRef<HTMLSpanElement>("leftSlotWrapper");
 const labelComponentRef = useTemplateRef<InstanceType<typeof ULabel>>("labelComponent");
@@ -176,6 +176,10 @@ function onKeydown(event: KeyboardEvent) {
   emit("keydown", event);
 }
 
+function onSlotClick() {
+  inputRef.value?.focus();
+}
+
 /**
  * This trick prevents default browser autocomplete behavior.
  * @param toggleState { boolean }
@@ -286,11 +290,12 @@ 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'], { iconName: leftIcon }) || leftIcon"
         v-bind="leftSlotAttrs"
         ref="leftSlotWrapper"
+        @click="onSlotClick"
       >
         <!--
           @slot Use it to add something before the text.
@@ -328,6 +333,7 @@ const {
       <span
         v-if="hasSlotContent($slots['right'], { iconName: rightIcon }) || rightIcon"
         v-bind="rightSlotAttrs"
+        @click="onSlotClick"
       >
         <!--
           @slot Use it to add something after the text.
@@ -337,6 +343,6 @@ const {
           <UIcon v-if="rightIcon" color="neutral" :name="rightIcon" v-bind="rightIconAttrs" />
         </slot>
       </span>
-    </label>
+    </div>
   </ULabel>
 </template>

package/ui.form-input-counter/UInputCounter.vue

@@ -3,6 +3,7 @@ import { ref, computed, useTemplateRef, watch } from "vue";
 
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
+import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
@@ -41,6 +42,12 @@ const emit = defineEmits([
   "blur",
 ]);
 
+const { localeMessages } = useComponentLocaleMessages<typeof defaultConfig.i18n>(
+  COMPONENT_NAME,
+  defaultConfig.i18n,
+  props?.config?.i18n,
+);
+
 const inputComponentRef = useTemplateRef<InstanceType<typeof UInput>>("inputComponent");
 
 const addIntervalId = ref<number | null>(null);
@@ -181,6 +188,7 @@ const {
       :size="size"
       variant="outlined"
       :disabled="isSubtractButtonDisabled || disabled"
+      :aria-label="localeMessages.subtract"
       v-bind="subtractButtonAttrs"
       :data-test="getDataTest('subtract')"
       @click.prevent
@@ -221,6 +229,7 @@ const {
       square
       variant="outlined"
       :disabled="isAddButtonDisabled || disabled"
+      :aria-label="localeMessages.add"
       v-bind="addButtonAttrs"
       :data-test="getDataTest('add')"
       @click.prevent

package/ui.form-input-counter/config.ts

@@ -31,6 +31,11 @@ export default /*tw*/ {
   subtractButton: "{>actionButton}",
   addIcon: "{UIcon}",
   subtractIcon: "{UIcon}",
+  /* These are used for a11y. */
+  i18n: {
+    add: "Add",
+    subtract: "Subtract",
+  },
   defaults: {
     size: "md",
     decimalSeparator: ",",

package/ui.form-input-password/UInputPassword.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, useId } from "vue";
+import { ref, computed, useId, useTemplateRef, nextTick } from "vue";
 
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
@@ -42,6 +42,7 @@ const emit = defineEmits([
 
 const elementId = props.id || useId();
 
+const inputRef = useTemplateRef<InstanceType<typeof UInput>>("input");
 const isShownPassword = ref(false);
 
 const localValue = computed({
@@ -59,8 +60,12 @@ const passwordIcon = computed(() => {
     : config.value.defaults.passwordHiddenIcon || "";
 });
 
-function onClickShowPassword() {
+async function onClickShowPassword() {
   isShownPassword.value = !isShownPassword.value;
+
+  await nextTick();
+
+  inputRef.value?.inputRef?.focus();
 }
 
 function onFocus(event: FocusEvent) {
@@ -86,6 +91,7 @@ const { getDataTest, config, passwordInputAttrs, passwordIconAttrs, passwordIcon
 <template>
   <UInput
     :id="elementId"
+    ref="input"
     v-model="localValue"
     :type="inputType"
     :label="label"
@@ -120,29 +126,22 @@ const { getDataTest, config, passwordInputAttrs, passwordIconAttrs, passwordIcon
     </template>
 
     <template #right>
-      <label v-bind="passwordIconWrapperAttrs" :for="elementId">
+      <div v-bind="passwordIconWrapperAttrs" @click="onClickShowPassword">
         <!--
           @slot Use it to add something instead of the password icon.
           @binding {string} icon-name
           @binding {boolean} visible
-          @binding {function} toggle
         -->
-        <slot
-          name="right"
-          :icon-name="passwordIcon"
-          :visible="isShownPassword"
-          :toggle="onClickShowPassword"
-        >
+        <slot name="right" :icon-name="passwordIcon" :visible="isShownPassword">
           <UIcon
             :name="passwordIcon"
             color="neutral"
             interactive
             v-bind="passwordIconAttrs"
             :data-test="getDataTest('password-icon')"
-            @click="onClickShowPassword"
           />
         </slot>
-      </label>
+      </div>
     </template>
   </UInput>
 </template>

package/ui.form-input-password/tests/UInputPassword.test.ts

@@ -190,14 +190,14 @@ describe("UInputPassword.vue", () => {
       expect(input.attributes("type")).toBe("password");
       expect(passwordIcon.props("name")).toBe("visibility_off-fill");
 
-      await flushPromises();
       await passwordIcon.trigger("click");
+      await flushPromises();
 
       expect(input.attributes("type")).toBe("text");
       expect(passwordIcon.props("name")).toBe("visibility-fill");
 
-      await flushPromises();
       await passwordIcon.trigger("click");
+      await flushPromises();
 
       expect(input.attributes("type")).toBe("password");
       expect(passwordIcon.props("name")).toBe("visibility_off-fill");

package/ui.form-label/ULabel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useTemplateRef, useSlots } from "vue";
+import { computed, useTemplateRef, useSlots, useId } from "vue";
 
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
@@ -26,6 +26,8 @@ const emit = defineEmits([
 
 const slots = useSlots();
 
+const elementId = props.id || useId();
+
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const labelRef = useTemplateRef<HTMLLabelElement>("label");
 
@@ -102,6 +104,7 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
       <component
         :is="tag"
         v-if="label || hasSlotContent(slots['label'], { label })"
+        :id="elementId"
         ref="label"
         :for="props.for"
         v-bind="labelAttrs"
@@ -140,6 +143,7 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
     <component
       :is="tag"
       v-if="label || hasSlotContent(slots['label'], { label })"
+      :id="elementId"
       v-bind="labelAttrs"
       ref="label"
       :for="props.for"

package/ui.form-label/types.ts

@@ -15,6 +15,11 @@ export interface Props {
    */
   for?: string;
 
+  /**
+   * Component id (used for ARIA attributes).
+   */
+  id?: string;
+
   /**
    * Label description.
    */

package/ui.form-listbox/UListbox.vue

@@ -110,6 +110,19 @@ const addOptionKeyCombination = computed(() => {
   return isMac ? "(⌘ + Enter)" : "(Ctrl + Enter)";
 });
 
+const listboxAriaMultiselectable = computed(() => props.multiple || undefined);
+
+const listboxAriaActivedescendant = computed(() =>
+  pointer.value >= 0 ? `${elementId}-${pointer.value}` : undefined,
+);
+
+const getOptionAriaSelected = (option: Option) => {
+  if (option && option.groupLabel) return undefined;
+  if (option.divider) return undefined;
+
+  return !!isSelectedOption(option);
+};
+
 const filteredOptions = computed(() => {
   const normalizedSearch = searchModel.value.toLowerCase().trim();
 
@@ -337,6 +350,12 @@ function onInputSearchBlur(event: FocusEvent) {
 }
 
 defineExpose({
+  /**
+   * Current pointer index value.
+   * @property {Ref<number>}
+   */
+  pointer,
+
   /**
    * Allows setting the pointer to a specific index.
    * @property {Function}
@@ -442,14 +461,20 @@ const {
       @update:model-value="onSearchChange"
     />
 
-    <ul :id="`listbox-${elementId}`" v-bind="listAttrs" role="listbox">
+    <ul
+      v-bind="listAttrs"
+      role="listbox"
+      :aria-multiselectable="listboxAriaMultiselectable"
+      :aria-activedescendant="listboxAriaActivedescendant"
+    >
       <li
         v-for="(option, index) of filteredOptions"
-        :id="`${elementId}-${index}`"
         :key="index"
         v-bind="listItemAttrs"
         ref="option"
         :role="!(option && option.groupLabel) ? 'option' : undefined"
+        :aria-selected="getOptionAriaSelected(option)"
+        :aria-disabled="Boolean(option.disabled) || undefined"
         :data-group-label="Boolean(option.groupLabel)"
       >
         <UDivider v-if="option.divider" v-bind="optionDividerAttrs" />
@@ -505,10 +530,18 @@ const {
 
         <!-- group title -->
         <template v-if="option && (option.groupLabel || option.isSubGroup) && !option.isHidden">
-          <div v-if="option.groupLabel" v-bind="groupAttrs" v-text="option.groupLabel" />
+          <div
+            v-if="option.groupLabel"
+            role="group"
+            :aria-label="option.groupLabel"
+            v-bind="groupAttrs"
+            v-text="option.groupLabel"
+          />
 
           <div
             v-else-if="option.isSubGroup"
+            role="group"
+            :aria-label="String(option[labelKey])"
             :style="getMarginForSubCategory(option.level)"
             v-bind="subGroupAttrs"
             v-text="option[labelKey]"
@@ -516,13 +549,7 @@ const {
         </template>
       </li>
 
-      <li
-        v-if="!filteredOptions.length"
-        :id="`${elementId}-empty`"
-        ref="empty-option"
-        role="option"
-        v-bind="optionAttrs"
-      >
+      <li v-if="!filteredOptions.length" ref="empty-option" role="option" v-bind="optionAttrs">
         <!-- @slot Use it to add something instead of empty state. -->
         <slot name="empty">
           <span v-bind="optionContentAttrs" v-text="localeMessages.noDataToShow" />
@@ -532,7 +559,6 @@ const {
       <!-- Add button -->
       <template v-if="addOption">
         <li
-          :id="`${elementId}-addOption`"
           ref="add-option"
           role="option"
           v-bind="addOptionLabelWrapperAttrs"

package/ui.form-listbox/config.ts

@@ -100,7 +100,7 @@ export default /*tw*/ {
     color: "primary",
     size: "md",
     labelKey: "label",
-    valueKey: "id",
+    valueKey: "value",
     visibleOptions: undefined,
     debounce: 0,
     optionsLimit: 0,

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

@@ -37,11 +37,11 @@ export default {
   component: UListbox,
   args: {
     options: [
-      { label: "New York", id: 1 },
-      { label: "Los Angeles", id: 2 },
-      { label: "Chicago", id: 3 },
-      { label: "Houston", id: 4 },
-      { label: "San Francisco", id: 5 },
+      { label: "New York", value: 1 },
+      { label: "Los Angeles", value: 2 },
+      { label: "Chicago", value: 3 },
+      { label: "Houston", value: 4 },
+      { label: "San Francisco", value: 5 },
     ],
   },
   argTypes: {
@@ -176,12 +176,12 @@ GroupedOptions.parameters = {
 export const Divider = DefaultTemplate.bind({});
 Divider.args = {
   options: [
-    { label: "North America", id: "1" },
-    { label: "South America", id: "2" },
+    { label: "North America", value: "1" },
+    { label: "South America", value: "2" },
     { divider: true },
-    { label: "Europe", id: "3" },
+    { label: "Europe", value: "3" },
     { divider: true },
-    { label: "Asia", id: "4" },
+    { label: "Asia", value: "4" },
   ],
 };
 Divider.parameters = {
@@ -198,12 +198,12 @@ export const OptionSettings = DefaultTemplate.bind({});
 OptionSettings.args = {
   multiple: true,
   options: [
-    { label: "New York", id: "1", disabled: true },
-    { label: "Kyiv", id: "2", disabled: true },
-    { label: "Los Angeles", id: "3", isHidden: true },
+    { label: "New York", value: "1", disabled: true },
+    { label: "Kyiv", value: "2", disabled: true },
+    { label: "Los Angeles", value: "3", isHidden: true },
     {
       label: "Chicago",
-      id: "4",
+      value: "4",
       onClick: (option: Option) =>
         alert("onClick function for the third option: " + JSON.stringify(option)),
     },
@@ -244,7 +244,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -252,7 +252,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -260,7 +260,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -268,7 +268,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -287,7 +287,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -295,7 +295,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -303,7 +303,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -311,7 +311,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',
@@ -341,7 +341,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
         :options="[
           {
             label: 'John Doe',
-            id: '1',
+            value: '1',
             role: 'Developer',
             avatar: johnDoe,
             status: 'online',
@@ -349,7 +349,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Jane Smith',
-            id: '2',
+            value: '2',
             role: 'Designer',
             avatar: emilyDavis,
             status: 'away',
@@ -357,7 +357,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Mike Johnson',
-            id: '3',
+            value: '3',
             role: 'Product Manager',
             avatar: alexJohnson,
             status: 'offline',
@@ -365,7 +365,7 @@ export const OptionSlots: StoryFn<DefaultUListboxArgs> = (args) => ({
           },
           {
             label: 'Sarah Wilson',
-            id: '4',
+            value: '4',
             role: 'QA Engineer',
             avatar: patMorgan,
             status: 'online',