vueless 1.2.15-beta.2 → 1.2.15-beta.4

package/ui.form-checkbox/UCheckbox.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { inject, ref, onMounted, computed, watchEffect, toValue, useId } from "vue";
+import { inject, ref, onMounted, computed, watchEffect, toValue, useId, useSlots } from "vue";
 import { isEqual } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
+import { useComponentLocaleMessages } from "../composables/useComponentLocaleMassages";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULabel from "../ui.form-label/ULabel.vue";
@@ -48,12 +49,24 @@ const emit = defineEmits([
   "input",
 ]);
 
+const { localeMessages } = useComponentLocaleMessages<typeof defaultConfig.i18n>(
+  COMPONENT_NAME,
+  defaultConfig.i18n,
+  props?.config?.i18n,
+);
+
+const slots = useSlots();
+
 const checkboxName = ref("");
 const checkboxSize = ref(props.size);
 const checkboxColor = ref(props.color);
 
 const elementId = props.id || useId();
 
+const hasLabel = computed(() => Boolean(props.label || slots.label));
+
+const inputAriaLabelledBy = computed(() => (hasLabel.value ? elementId : undefined));
+
 const isBinary = computed(() => !Array.isArray(props.modelValue));
 const isCheckboxInGroup = computed(() => Boolean(toValue(getCheckboxGroupName)));
 
@@ -108,6 +121,10 @@ function onChange() {
   emit("input", newModelValue);
 }
 
+function onIconClick() {
+  document.getElementById(elementId)?.click();
+}
+
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
@@ -161,15 +178,17 @@ const {
       :name="checkboxName"
       :checked="isChecked"
       :disabled="disabled"
+      :aria-labelledby="inputAriaLabelledBy"
+      :aria-label="!hasLabel ? localeMessages.checkbox : undefined"
       v-bind="checkboxAttrs"
       :data-test="getDataTest()"
       @change="onChange"
     />
 
-    <label
+    <div
       v-if="isChecked"
       v-bind="partial ? partiallyCheckedAttrs : checkedAttrs"
-      :for="elementId"
+      @click="onIconClick"
     >
       <UIcon
         v-if="partial"
@@ -179,7 +198,7 @@ const {
       />
 
       <UIcon v-else :name="config.defaults.checkedIcon" color="inherit" v-bind="checkedIconAttrs" />
-    </label>
+    </div>
 
     <template #bottom>
       <!-- @slot Use it to add something below the checkbox. -->

package/ui.form-checkbox/config.ts

@@ -51,6 +51,10 @@ export default /*tw*/ {
     },
   },
   partiallyCheckedIcon: "{>checkedIcon}",
+  /* These are used for a11y. */
+  i18n: {
+    checkbox: "Checkbox",
+  },
   defaults: {
     color: "primary",
     size: "md",

package/ui.form-checkbox/tests/UCheckbox.test.ts

@@ -198,7 +198,7 @@ describe("UCheckbox.vue", () => {
           },
         });
 
-        expect(component.find("label").attributes("class")).toContain(color);
+        expect(component.get("[vl-key='checked']").attributes("class")).toContain(`bg-${color}`);
       });
     });
 

package/ui.form-checkbox-group/UCheckboxGroup.vue

@@ -2,7 +2,7 @@
 import { provide, ref, watch, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import ULabel from "../ui.form-label/ULabel.vue";

package/ui.form-checkbox-multi-state/UCheckboxMultiState.vue

@@ -2,7 +2,7 @@
 import { computed, ref, watchEffect } from "vue";
 import { cloneDeep } from "../utils/helper";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";

package/{ui.form-color-picker/UColorPicker.vue → ui.form-color-toggle/UColorToggle.vue}

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, useId, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import vTooltip from "../v.tooltip/vTooltip";

package/{ui.form-color-picker → ui.form-color-toggle}/constants.ts

@@ -2,4 +2,4 @@
   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 = "UColorPicker";
+export const COMPONENT_NAME = "UColorToggle";

package/{ui.form-color-picker → ui.form-color-toggle}/storybook/stories.ts

@@ -6,22 +6,22 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UColorPicker from "../UColorPicker.vue";
+import UColorToggle from "../UColorToggle.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UButton from "../../ui.button/UButton.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
 
-interface UColorPickerArgs extends Props {
+interface UColorToggleArgs extends Props {
   slotTemplate?: string;
   enum: "size";
 }
 
 export default {
   id: "3190",
-  title: "Form Inputs & Controls / Color Picker",
-  component: UColorPicker,
+  title: "Form Inputs & Controls / Color Toggle",
+  component: UColorToggle,
   args: {
     modelValue: "",
     colors: /*tw*/ {
@@ -47,31 +47,31 @@ export default {
     },
   },
   argTypes: {
-    ...getArgTypes(UColorPicker.__name),
+    ...getArgTypes(UColorToggle.__name),
   },
   parameters: {
     docs: {
-      ...getDocsDescription(UColorPicker.__name),
+      ...getDocsDescription(UColorToggle.__name),
     },
   },
 } as Meta;
 
-const DefaultTemplate: StoryFn<UColorPickerArgs> = (args: UColorPickerArgs) => ({
-  components: { UColorPicker, UButton, UCol },
-  setup: () => ({ args, slots: getSlotNames(UColorPicker.__name) }),
+const DefaultTemplate: StoryFn<UColorToggleArgs> = (args: UColorToggleArgs) => ({
+  components: { UColorToggle, UButton, UCol },
+  setup: () => ({ args, slots: getSlotNames(UColorToggle.__name) }),
   template: `
-    <UColorPicker v-bind="args" v-model="args.modelValue">
+    <UColorToggle v-bind="args" v-model="args.modelValue">
       ${args.slotTemplate || getSlotsFragment("")}
-    </UColorPicker>
+    </UColorToggle>
   `,
 });
 
-const EnumTemplate: StoryFn<UColorPickerArgs> = (args: UColorPickerArgs, { argTypes }) => ({
-  components: { UCol, UColorPicker },
+const EnumTemplate: StoryFn<UColorToggleArgs> = (args: UColorToggleArgs, { argTypes }) => ({
+  components: { UCol, UColorToggle },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
     <UCol>
-      <UColorPicker
+      <UColorToggle
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"

package/{ui.form-color-picker/tests/UColorPicker.test.ts → ui.form-color-toggle/tests/UColorToggle.test.ts}

@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils";
 import { describe, it, expect } from "vitest";
 
-import UColorPicker from "../UColorPicker.vue";
+import UColorToggle from "../UColorToggle.vue";
 import UButton from "../../ui.button/UButton.vue";
 
 import type { Props } from "../types";
 
-describe("UColorPicker.vue", () => {
+describe("UColorToggle.vue", () => {
   describe("Props", () => {
     it("Model Value – selects the correct color based on modelValue", async () => {
       const modelValue = "primary";
@@ -18,7 +18,7 @@ describe("UColorPicker.vue", () => {
         secondary: "bg-secondary-500",
       };
 
-      const component = mount(UColorPicker, {
+      const component = mount(UColorToggle, {
         props: {
           modelValue,
           "onUpdate:modelValue": (value) => component.setProps({ modelValue: value }),
@@ -47,7 +47,7 @@ describe("UColorPicker.vue", () => {
       };
 
       Object.entries(sizes).forEach(([size, classes]) => {
-        const component = mount(UColorPicker, {
+        const component = mount(UColorToggle, {
           props: {
             modelValue: "",
             size: size as Props["size"],
@@ -70,7 +70,7 @@ describe("UColorPicker.vue", () => {
         error: "bg-error-500",
       };
 
-      const component = mount(UColorPicker, {
+      const component = mount(UColorToggle, {
         props: {
           modelValue: "",
           colors,
@@ -89,7 +89,7 @@ describe("UColorPicker.vue", () => {
     it("Id – applies the correct id attribute", () => {
       const id = "test-color-picker-id";
 
-      const component = mount(UColorPicker, {
+      const component = mount(UColorToggle, {
         props: {
           modelValue: "",
           id,
@@ -107,7 +107,7 @@ describe("UColorPicker.vue", () => {
         secondary: "bg-secondary-500",
       };
 
-      const component = mount(UColorPicker, {
+      const component = mount(UColorToggle, {
         props: {
           modelValue: "",
           dataTest,
@@ -127,7 +127,7 @@ describe("UColorPicker.vue", () => {
 
   describe("Exposed properties", () => {
     it("ListRef – exposes listRef", () => {
-      const component = mount(UColorPicker, {
+      const component = mount(UColorToggle, {
         props: {
           modelValue: "",
           colors: {

package/ui.form-date-picker/UDatePicker.vue

@@ -2,7 +2,7 @@
 import { computed, nextTick, ref, useId, useTemplateRef, watchEffect } from "vue";
 import { merge } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UInput from "../ui.form-input/UInput.vue";

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-date-picker-range/UDatePickerRange.vue

@@ -3,7 +3,7 @@ import { computed, watch, ref, nextTick, provide, useId, useTemplateRef, watchEf
 
 import { merge } from "lodash-es";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UIcon from "../ui.image-icon/UIcon.vue";

package/ui.form-input/UInput.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, useSlots, useId, useTemplateRef, watch } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 import { useMutationObserver } from "../composables/useMutationObserver";
@@ -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

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { ref, computed, useTemplateRef, watch } from "vue";
 
-import useUI from "../composables/useUI";
+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-file/UInputFile.vue

@@ -10,7 +10,7 @@ import {
   useTemplateRef,
 } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 import { getFileMbSize } from "./utilFileForm";

package/ui.form-input-number/UInputNumber.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, watch, onMounted, useId, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UInput from "../ui.form-input/UInput.vue";

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref, computed, useId } from "vue";
+import { ref, computed, useId, useTemplateRef, nextTick } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import defaultConfig from "./config";
@@ -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-input-rating/UInputRating.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { hasSlotContent } from "../utils/helper";
 import { getDefaults } from "../utils/ui";
 

package/ui.form-input-search/UInputSearch.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useId, ref, computed, watchEffect, useTemplateRef } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { createDebounce } from "../utils/helper";
 

package/ui.form-label/ULabel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, useTemplateRef, useSlots } from "vue";
+import { computed, useTemplateRef, useSlots, useId } from "vue";
 
-import useUI from "../composables/useUI";
+import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 import { hasSlotContent } from "../utils/helper";
 
@@ -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.
    */