vueless 1.2.8-beta.1 → 1.2.8-beta.3

package/icons/storybook/rocket_launch.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m188.91-556.74 101.7 43.33q17.28-33.85 36.71-67.18 19.42-33.32 40.98-63.89l-76.37-15.28-103.02 103.02Zm156.39 84.11 131.33 131.56q58.44-27.43 107.48-59.59 49.04-32.17 79.8-62.93 80.05-80.28 117.81-163.84Q819.48-711 823.2-819.2q-108.2 3.72-191.77 41.48-83.56 37.76-163.6 117.81-30.76 30.76-62.93 79.8-32.16 49.04-59.6 107.48Zm231.16-99.59q-19.76-19.76-19.76-48.66 0-28.9 19.76-48.66 19.76-19.53 48.54-19.53 28.78 0 48.54 19.53 19.53 19.76 19.53 48.66 0 28.9-19.53 48.66Q653.78-552.7 625-552.7q-28.78 0-48.54-19.52ZM560.5-184.91l103.26-103.02-15.28-76.37q-30.57 21.56-63.89 41.1-33.33 19.55-67.18 36.59l43.09 101.7Zm331.26-702.61q8.52 143.17-35.08 257.09-43.59 113.91-142.11 212.67-1.48 1.24-2.96 2.84-1.48 1.59-2.72 2.83l22 110.48q3.48 17.15-1.74 33.19-5.22 16.03-17.65 28.46L537.87-65.33l-88.83-206.84-172.87-172.87-206.84-88.83L244.2-707.5q12.43-12.43 28.34-17.65 15.92-5.22 33.07-1.74l110.48 22q1.24-1.24 2.71-2.1 1.48-.86 2.96-2.1 98.76-99 212.79-142.98 114.04-43.97 257.21-35.45ZM141.59-324.04q36.91-36.92 89.56-37.3 52.65-.38 89.33 36.3 36.43 36.43 36.05 89.2-.38 52.77-37.05 89.45-27.68 27.67-85.64 45.63-57.97 17.96-168.64 32 14.04-110.67 31.5-169.26 17.45-58.59 44.89-86.02Zm47.98 48.74q-13.77 14.76-23.93 44.84-10.16 30.09-18.16 78.66 48.56-8 78.65-18.41 30.09-10.4 44.61-24.16 18.28-16.04 18.54-40.35.26-24.3-16.78-42.58-18.28-17.05-42.59-16.55-24.3.5-40.34 18.55Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.8-beta.1",
+  "version": "1.2.8-beta.3",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/ui.container-accordion/UAccordion.vue

@@ -109,7 +109,6 @@ const { getDataTest, accordionItemAttrs, accordionAttrs } = useUI<Config>(defaul
       <UAccordionItem
         v-for="(option, index) in options"
         :key="index"
-        :model-value="selectedItem"
         :value="option.value"
         :title="option.title"
         :description="option.description"

package/ui.container-accordion/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   accordion: "flex flex-col w-full divide-y divide-muted",
-  accordionItem: "{UAccordionItem} py-5 first:pt-0 last:pb-0",
+  accordionItem: "{UAccordionItem}",
   defaults: {
     size: "md",
     disabled: false,

package/ui.container-accordion/storybook/stories.ts

@@ -8,6 +8,7 @@ import {
 } from "../../utils/storybook";
 
 import UAccordion from "../../ui.container-accordion/UAccordion.vue";
+import UAccordionItem from "../../ui.container-accordion-item/UAccordionItem.vue";
 import UButton from "../../ui.button/UButton.vue";
 import ULink from "../../ui.button-link/ULink.vue";
 import UCol from "../../ui.container-col/UCol.vue";
@@ -68,7 +69,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UAccordionArgs> = (args: UAccordionArgs) => ({
-  components: { UAccordion, ULink, UButton, UCol, URow, UIcon },
+  components: { UAccordion, UAccordionItem, ULink, UButton, UCol, URow, UIcon },
   setup: () => ({ args, slots: getSlotNames(UAccordion.__name) }),
   template: `
     <UAccordion v-bind="args" v-model="args.modelValue">
@@ -110,3 +111,14 @@ Sizes.args = {
     },
   ],
 };
+
+export const DefaultSlot: StoryFn<UAccordionArgs> = (args: UAccordionArgs, { argTypes }) => ({
+  components: { UAccordion, UAccordionItem },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <UAccordion v-model="args.modelValue">
+      <UAccordionItem title="Custom Accordion Item 1" description="Custom Accordion Item 1" value="1" />
+      <UAccordionItem title="Custom Accordion Item 2" description="Custom Accordion Item 2" value="2" />
+    </UAccordion>
+  `,
+});

package/ui.container-accordion-item/UAccordionItem.vue

@@ -122,7 +122,13 @@ const {
   <div ref="wrapper" v-bind="wrapperAttrs" :data-test="getDataTest()" @click="onClickItem">
     <div v-bind="bodyAttrs">
       <div v-bind="titleAttrs" ref="title">
-        {{ title }}
+        <!--
+          @slot Use it to add custom title content.
+          @binding {string} title
+        -->
+        <slot name="title" :title="title">
+          {{ title }}
+        </slot>
         <!--
           @slot Use it to add something instead of the toggle icon.
           @binding {string} icon-name
@@ -140,11 +146,18 @@ const {
       </div>
 
       <div
-        v-if="description"
+        v-if="description || hasSlotContent(slots['description'])"
         :id="`description-${elementId}`"
         v-bind="descriptionAttrs"
-        v-text="description"
-      />
+      >
+        <!--
+          @slot Use it to add custom description content.
+          @binding {string} description
+        -->
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </div>
 
       <div v-if="isOpened && hasSlotContent(slots['default'])" v-bind="contentAttrs">
         <!-- @slot Use it to add accordion content. -->

package/ui.container-accordion-item/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "group cursor-pointer",
+    base: "group cursor-pointer py-5 first:pt-0 last:pb-0",
     variants: {
       disabled: {
         true: "cursor-not-allowed text-default/(--vl-disabled-opacity)",

package/ui.container-accordion-item/storybook/stories.ts

@@ -58,11 +58,12 @@ const EnumTemplate: StoryFn<UAccordionItemArgs> = (args: UAccordionItemArgs, { a
   components: { UAccordionItem, UCol },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
-    <UCol gap="xl">
+    <UCol gap="lg">
       <UAccordionItem
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
+        class="py-0"
       />
     </UCol>
   `,
@@ -112,3 +113,27 @@ ToggleSlot.args = {
     </template>
   `,
 };
+
+export const TitleSlot = DefaultTemplate.bind({});
+TitleSlot.args = {
+  slotTemplate: `
+    <template #title="{ title }">
+      <URow gap="xs" align="center">
+        <UIcon name="rocket_launch" size="xs" color="primary" />
+        <span>{{ title }}</span>
+      </URow>
+    </template>
+  `,
+};
+
+export const DescriptionSlot = DefaultTemplate.bind({});
+DescriptionSlot.args = {
+  slotTemplate: `
+    <template #description="{ description }">
+      <URow gap="xs" align="start">
+        <UIcon name="info" size="xs" color="accented" />
+        <span>{{ description }}</span>
+      </URow>
+    </template>
+  `,
+};

package/ui.container-accordion-item/tests/UAccordionItem.test.ts

@@ -176,6 +176,104 @@ describe("UAccordionItem", () => {
       expect(toggleElement.attributes("data-opened")).toBe("true");
     });
 
+    // Title slot
+    it("renders custom content in title slot", () => {
+      const title = "Original Title";
+      const slotClass = "custom-title";
+      const slotContent = "Custom Title Content";
+
+      const component = mount(UAccordionItem, {
+        props: { title },
+        slots: {
+          title: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
+
+      expect(component.text()).not.toContain(title);
+    });
+
+    // Title slot bindings
+    it("provides title binding to title slot", () => {
+      const title = "Test Title";
+      const slotClass = "custom-title";
+
+      const component = mount(UAccordionItem, {
+        props: { title },
+        slots: {
+          title: `
+            <template #default="{ title }">
+              <div class="${slotClass}" :data-title="title"></div>
+            </template>
+          `,
+        },
+      });
+
+      const titleElement = component.find(`.${slotClass}`);
+
+      expect(titleElement.exists()).toBe(true);
+      expect(titleElement.attributes("data-title")).toBe(title);
+    });
+
+    // Description slot
+    it("renders custom content in description slot", () => {
+      const description = "Original Description";
+      const slotClass = "custom-description";
+      const slotContent = "Custom Description Content";
+
+      const component = mount(UAccordionItem, {
+        props: { description },
+        slots: {
+          description: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
+
+      expect(component.text()).not.toContain(description);
+    });
+
+    // Description slot bindings
+    it("provides description binding to description slot", () => {
+      const description = "Test Description";
+      const slotClass = "custom-description";
+
+      const component = mount(UAccordionItem, {
+        props: { description },
+        slots: {
+          description: `
+            <template #default="{ description }">
+              <div class="${slotClass}" :data-description="description"></div>
+            </template>
+          `,
+        },
+      });
+
+      const descriptionElement = component.find(`.${slotClass}`);
+
+      expect(descriptionElement.exists()).toBe(true);
+      expect(descriptionElement.attributes("data-description")).toBe(description);
+    });
+
+    // Description slot with empty prop
+    it("renders description slot even when description prop is empty", () => {
+      const slotClass = "custom-description";
+      const slotContent = "Custom Description Content";
+
+      const component = mount(UAccordionItem, {
+        props: {},
+        slots: {
+          description: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
+    });
+
     // Default slot
     it("renders default slot content when accordion is opened", async () => {
       const slotContent = "Custom accordion content";
@@ -221,6 +319,94 @@ describe("UAccordionItem", () => {
 
       expect(component.find("[vl-key='content']").exists()).toBe(false);
     });
+
+    // Slot interactions with accordion behavior
+    it("title slot content is clickable and toggles accordion", async () => {
+      const title = "Test Title";
+      const slotClass = "custom-title";
+      const slotContent = "Custom Title Content";
+
+      const component = mount(UAccordionItem, {
+        props: { title },
+        slots: {
+          title: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      const titleElement = component.find(`.${slotClass}`);
+
+      expect(titleElement.exists()).toBe(true);
+
+      await titleElement.trigger("click");
+
+      const emitted = component.emitted("click");
+
+      expect(emitted).toBeTruthy();
+      expect(emitted?.[0]).toEqual([expect.any(String), true]);
+    });
+
+    it("description slot content is not clickable and does not toggle accordion", async () => {
+      const description = "Test Description";
+      const slotClass = "custom-description";
+      const slotContent = "Custom Description Content";
+
+      const component = mount(UAccordionItem, {
+        props: { description },
+        slots: {
+          description: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      const descriptionElement = component.find(`.${slotClass}`);
+
+      expect(descriptionElement.exists()).toBe(true);
+
+      await descriptionElement.trigger("click");
+
+      const emitted = component.emitted("click");
+
+      expect(emitted).toBeFalsy();
+    });
+
+    it("title slot preserves accordion toggle functionality", async () => {
+      const title = "Test Title";
+      const description = "Test Description";
+      const slotClass = "custom-title";
+      const slotContent = "Custom Title Content";
+
+      const component = mount(UAccordionItem, {
+        props: { title, description },
+        slots: {
+          title: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find("[id^='description-']").classes()).not.toContain("opacity-100");
+
+      await component.find(`.${slotClass}`).trigger("click");
+      expect(component.find("[id^='description-']").classes()).toContain("opacity-100");
+
+      await component.find(`.${slotClass}`).trigger("click");
+      expect(component.find("[id^='description-']").classes()).not.toContain("opacity-100");
+    });
+
+    it("description slot content is always visible when slot is provided", () => {
+      const slotClass = "custom-description";
+      const slotContent = "Custom Description Content";
+
+      const component = mount(UAccordionItem, {
+        props: {},
+        slots: {
+          description: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      // Description slot content should be visible even without description prop
+      const descriptionElement = component.find(`.${slotClass}`);
+
+      expect(descriptionElement.exists()).toBe(true);
+      expect(descriptionElement.text()).toBe(slotContent);
+    });
   });
 
   // Events

package/ui.form-input/UInput.vue

@@ -25,7 +25,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits([
   /**
-   * Triggers when the input value is changes.
+   * Triggers when the input value is changed.
    * @property {string} modelValue
    * @property {number} modelValue
    */
@@ -43,6 +43,7 @@ const emit = defineEmits([
 
   /**
    * Triggers when the input gains focus.
+   * @property {FocusEvent} event
    */
   "focus",
 
@@ -53,11 +54,12 @@ const emit = defineEmits([
 
   /**
    * Triggers when the input loses focus.
+   * @property {FocusEvent} event
    */
   "blur",
 
   /**
-   * Triggers when the input value is changes.
+   * Triggers when the input value is changed.
    * @property {string} modelValue
    * @property {number} modelValue
    */

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

@@ -27,6 +27,18 @@ const emit = defineEmits([
    * @property {number} modelValue
    */
   "update:modelValue",
+
+  /**
+   * Triggers when the input gains focus.
+   * @property {FocusEvent} event
+   */
+  "focus",
+
+  /**
+   * Triggers when the input loses focus.
+   * @property {FocusEvent} event
+   */
+  "blur",
 ]);
 
 const inputComponentRef = useTemplateRef<InstanceType<typeof UInput>>("inputComponent");
@@ -120,9 +132,15 @@ function onMouseLeave() {
   clearIntervals();
 }
 
-function onBlur() {
+function onFocus(event: FocusEvent) {
+  emit("focus", event);
+}
+
+function onBlur(event: FocusEvent) {
   if (Number(count.value) > props.max) count.value = props.max;
   if (Number(count.value) < props.min) count.value = props.min;
+
+  emit("blur", event);
 }
 
 function onInput() {
@@ -187,7 +205,13 @@ const {
       :size="size"
       :disabled="disabled"
       :readonly="readonly"
+      :min-fraction-digits="minFractionDigits"
+      :max-fraction-digits="maxFractionDigits"
+      :decimal-separator="decimalSeparator"
+      :thousands-separator="thousandsSeparator"
+      :prefix="prefix"
       v-bind="counterInputAttrs"
+      @focus="onFocus"
       @blur="onBlur"
       @input="onInput"
     />

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

@@ -33,9 +33,14 @@ export default /*tw*/ {
   subtractIcon: "{UIcon}",
   defaults: {
     size: "md",
+    decimalSeparator: ",",
+    thousandsSeparator: " ",
+    prefix: "",
     step: 1,
-    min: 1,
+    min: 0,
     max: 999,
+    minFractionDigits: 0,
+    maxFractionDigits: 2,
     readonly: false,
     disabled: false,
     /* icons */

package/ui.form-input-counter/tests/UInputCounter.test.ts

@@ -1,4 +1,4 @@
-import { mount } from "@vue/test-utils";
+import { flushPromises, mount } from "@vue/test-utils";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 
 import UInputCounter from "../UInputCounter.vue";
@@ -169,6 +169,90 @@ describe("UInputCounter.vue", () => {
       expect(addButton.props("disabled")).toBe(true);
     });
 
+    it("Min Fraction Digit – set fraction digit when it was not provided", async () => {
+      const initialValue = 12345678;
+      const initialValueWithFactions = "12 345 678,00";
+
+      const component = mount(UInputCounter, {
+        props: {
+          modelValue: initialValue,
+          minFractionDigits: 2,
+        },
+      });
+
+      await flushPromises();
+
+      expect(component.get("input").element.value).toBe(initialValueWithFactions);
+    });
+
+    it("Max Fraction Digit – truncate fraction digit to max value", async () => {
+      const initialValue = 12345678.011;
+      const initialValueWithFactions = "12 345 678,01";
+
+      const component = mount(UInputCounter, {
+        props: {
+          modelValue: initialValue,
+          maxFractionDigits: 2,
+        },
+      });
+
+      await flushPromises();
+
+      expect(component.get("input").element.value).toBe(initialValueWithFactions);
+    });
+
+    it("Decimal Separator – set correct decimal separator char", async () => {
+      const initialValue = 12345678.01;
+      const expectedDecimalSubString = "/01";
+
+      const component = mount(UInputCounter, {
+        props: {
+          modelValue: initialValue,
+          decimalSeparator: "/",
+        },
+      });
+
+      await flushPromises();
+
+      expect(component.get("input").element.value).toContain(expectedDecimalSubString);
+    });
+
+    it("Thousands Separator – set correct decimal separator char", async () => {
+      const initialValue = 12_345_678.01;
+      const expectedThousandsSeparator = "/";
+      const expectedThousandsSeparatorAmount = 2;
+
+      const component = mount(UInputCounter, {
+        props: {
+          modelValue: initialValue,
+          thousandsSeparator: expectedThousandsSeparator,
+        },
+      });
+
+      await flushPromises();
+
+      const inputValue = component.get("input").element.value;
+      const separatorCount = inputValue.split(expectedThousandsSeparator).length - 1;
+
+      expect(separatorCount).toBe(expectedThousandsSeparatorAmount);
+    });
+
+    it("Prefix – displays prefix at the beginning of the value", async () => {
+      const initialValue = 12345678;
+      const prefix = "pizza";
+
+      const component = mount(UInputCounter, {
+        props: {
+          modelValue: initialValue,
+          prefix: prefix,
+        },
+      });
+
+      await flushPromises();
+
+      expect(component.get("input").element.value.startsWith(prefix)).toBe(true);
+    });
+
     it("Readonly – renders text instead of input when readonly set to true", async () => {
       const component = mount(UInputCounter, {
         props: {

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

@@ -25,6 +25,31 @@ export interface Props {
    */
   max?: number;
 
+  /**
+   * Minimal number of signs after the decimal separator (fractional part of a number).
+   */
+  minFractionDigits?: number;
+
+  /**
+   * Maximal number of signs after the decimal separator (fractional part of a number).
+   */
+  maxFractionDigits?: number;
+
+  /**
+   * A symbol used to separate the integer part from the fractional part of a number.
+   */
+  decimalSeparator?: string;
+
+  /**
+   *  A symbol used to separate the thousand parts of a number.
+   */
+  thousandsSeparator?: string;
+
+  /**
+   * Prefix to display before input value.
+   */
+  prefix?: string;
+
   /**
    * Input size.
    */

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

@@ -11,7 +11,7 @@ import useFormatNumber from "./useFormatNumber";
 import { COMPONENT_NAME, RAW_DECIMAL_MARK } from "./constants";
 
 import type { Props, Config } from "./types";
-import { getRawValue } from "./utilFormat";
+import { getRawValue, getFixedNumber } from "./utilFormat";
 
 defineOptions({ inheritAttrs: false });
 
@@ -41,8 +41,15 @@ const emit = defineEmits([
    */
   "keyup",
 
+  /**
+   * Triggers when the input gains focus.
+   * @property {FocusEvent} event
+   */
+  "focus",
+
   /**
    * Triggers when the input loses focus.
+   * @property {FocusEvent} event
    */
   "blur",
 ]);
@@ -103,13 +110,17 @@ onMounted(() => {
 });
 
 function onKeyup(event: KeyboardEvent) {
-  const numberValue = !Number.isNaN(parseFloat(rawValue.value)) ? parseFloat(rawValue.value) : "";
+  const numberValue = getFixedNumber(parseFloat(rawValue.value), props.maxFractionDigits || 10);
 
   localValue.value = props.valueType === "number" ? numberValue : rawValue.value || "";
 
   emit("keyup", event);
 }
 
+function onFocus(event: FocusEvent) {
+  emit("focus", event);
+}
+
 function onBlur(event: FocusEvent) {
   emit("blur", event);
 }
@@ -164,6 +175,7 @@ const { getDataTest, numberInputAttrs } = useUI<Config>(defaultConfig);
     v-bind="numberInputAttrs"
     :data-test="getDataTest()"
     @keyup="onKeyup"
+    @focus="onFocus"
     @blur="onBlur"
     @input="onInput"
   >

package/ui.form-input-number/utilFormat.ts

@@ -2,6 +2,13 @@ import { RAW_DECIMAL_MARK } from "./constants";
 
 import type { FormatOptions } from "./types";
 
+export function getFixedNumber(value: number, maxDecimals: number = 10): number | "" {
+  if (!isFinite(value) || isNaN(value)) return "";
+  if (maxDecimals < 0) maxDecimals = 10;
+
+  return parseFloat(value.toFixed(maxDecimals));
+}
+
 export function getRawValue(
   value: string,
   options: Pick<FormatOptions, "prefix" | "decimalSeparator" | "thousandsSeparator">,
@@ -26,6 +33,11 @@ export function getFormattedValue(value: string, options: FormatOptions): string
   const isValidMinFractionDigits = minFractionDigits <= maxFractionDigits;
   const actualMinFractionDigit = isValidMinFractionDigits ? minFractionDigits : maxFractionDigits;
 
+  const numericValue = parseFloat(value);
+  const fixedValue = getFixedNumber(numericValue, Math.max(maxFractionDigits, 10));
+
+  if (fixedValue === "") return prefix;
+
   const intlNumberOptions: Intl.NumberFormatOptions = {
     minimumFractionDigits: actualMinFractionDigit,
     maximumFractionDigits: maxFractionDigits,
@@ -38,14 +50,12 @@ export function getFormattedValue(value: string, options: FormatOptions): string
 
   const intlNumber = new Intl.NumberFormat("en-US", intlNumberOptions);
 
-  const formattedValue = intlNumber
-    .formatToParts(value as Intl.StringNumericLiteral)
-    .map((part) => {
-      if (part.type === "group") part.value = thousandsSeparator;
-      if (part.type === "decimal") part.value = decimalSeparator;
+  const formattedValue = intlNumber.formatToParts(fixedValue).map((part) => {
+    if (part.type === "group") part.value = thousandsSeparator;
+    if (part.type === "decimal") part.value = decimalSeparator;
 
-      return part;
-    });
+    return part;
+  });
 
   formattedValue.unshift({ value: prefix, type: "minusSign" });
 

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

@@ -21,11 +21,23 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits([
   /**
-   * Triggers when the input value is changes.
+   * Triggers when the input value is changed.
    * @property {string} modelValue
    * @property {number} modelValue
    */
   "update:modelValue",
+
+  /**
+   * Triggers when the input gains focus.
+   * @property {FocusEvent} event
+   */
+  "focus",
+
+  /**
+   * Triggers when the input loses focus.
+   * @property {FocusEvent} event
+   */
+  "blur",
 ]);
 
 const elementId = props.id || useId();
@@ -51,6 +63,14 @@ function onClickShowPassword() {
   isShownPassword.value = !isShownPassword.value;
 }
 
+function onFocus(event: FocusEvent) {
+  emit("focus", event);
+}
+
+function onBlur(event: FocusEvent) {
+  emit("blur", event);
+}
+
 /**
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
@@ -80,6 +100,8 @@ const { getDataTest, config, passwordInputAttrs, passwordIconAttrs, passwordIcon
     :disabled="disabled"
     v-bind="passwordInputAttrs"
     :data-test="getDataTest()"
+    @focus="onFocus"
+    @blur="onBlur"
   >
     <template #left>
       <!--

package/ui.form-listbox/UListbox.vue

@@ -49,6 +49,7 @@ const emit = defineEmits([
 
   /**
    * Triggers when the search input value changes.
+   * @property {string} value
    */
   "searchChange",