vueless 1.4.7 → 1.4.8

package/ui.form-input-file/storybook/stories.ts

@@ -14,6 +14,7 @@ import UBadge from "../../ui.text-badge/UBadge.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
@@ -109,15 +110,17 @@ LabelSlot.args = {
 };
 
 export const Slots: StoryFn<UInputFileArgs> = (args) => ({
-  components: { UInputFile, UCol, UBadge, UIcon, URow, UText },
+  components: { UInputFile, UCol, UBadge, UIcon, URow, UText, ULink },
   setup() {
-    return { args };
+    const files = ref<File[]>([]);
+
+    return { args, files };
   },
   template: `
     <UCol gap="xl">
       <UInputFile
         v-bind="args"
-        v-model="args.files"
+        v-model="files"
         label="Top Slot"
         :allowedFileTypes="['.jpeg', '.png']"
         :maxFileSize="2"
@@ -132,7 +135,7 @@ export const Slots: StoryFn<UInputFileArgs> = (args) => ({
 
       <UInputFile
         v-bind="args"
-        v-model="args.files"
+        v-model="files"
         label="Left Slot"
         :allowedFileTypes="['.pdf', '.doc', '.docx']"
       >
@@ -146,7 +149,7 @@ export const Slots: StoryFn<UInputFileArgs> = (args) => ({
 
       <UInputFile
         v-bind="args"
-        v-model="args.files"
+        v-model="files"
         label="Bottom Slot"
         multiple
         :allowedFileTypes="['.png', '.jpeg']"
@@ -158,6 +161,36 @@ export const Slots: StoryFn<UInputFileArgs> = (args) => ({
           </URow>
         </template>
       </UInputFile>
+
+      <UInputFile
+        v-bind="args"
+        v-model="files"
+        label="Upload document"
+      >
+        <template #description>
+          <UText size="sm" variant="lifted">
+            PDF or image, max 5MB, see
+            <ULink label="requirements" underlined size="sm" />.
+          </UText>
+        </template>
+      </UInputFile>
+
+      <UInputFile
+        v-bind="args"
+        v-model="files"
+        label="Upload document"
+        :error="true"
+      >
+        <template #error>
+          <UText size="sm" color="error">
+            <ul>
+              <li>File type is not accepted for this field</li>
+              <li>Maximum file size has been exceeded</li>
+              <li>Choose another file and upload again</li>
+            </ul>
+          </UText>
+        </template>
+      </UInputFile>
     </UCol>
   `,
 });

package/ui.form-input-number/storybook/stories.ts

@@ -14,6 +14,7 @@ import UButton from "../../ui.button/UButton.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
 import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
@@ -200,7 +201,7 @@ export const IconProps: StoryFn<UInputNumberArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<UInputNumberArgs> = (args) => ({
-  components: { UInputNumber, URow, UButton, UDropdownButton, UText },
+  components: { UInputNumber, URow, UCol, UButton, UDropdownButton, UText, ULink, UIcon },
   setup() {
     const currencies = [
       { label: "USD", value: "usd" },
@@ -209,42 +210,73 @@ export const Slots: StoryFn<UInputNumberArgs> = (args) => ({
     ];
 
     const currency = ref("usd");
+    const descriptionSlotValue = ref(0);
+    const errorSlotValue = ref(null);
 
-    return { args, currency, currencies };
+    return { args, currency, currencies, descriptionSlotValue, errorSlotValue };
   },
   template: `
-    <URow class="gap-4">
-      <UInputNumber
-        label="Left slot"
-        placeholder="Enter discount amount"
-        :config="{ numberInput: { wrapper: 'pl-0' } }"
-      >
-        <template #left>
-          <UDropdownButton
-            v-model="currency"
-            :options="currencies"
-            size="sm"
-            variant="soft"
-            class="rounded-r-none h-[49px]"
-          />
-        </template>
-      </UInputNumber>
+    <UCol gap="3xl">
+      <URow block>
+        <UInputNumber
+          label="Left slot"
+          placeholder="Enter discount amount"
+          :config="{ numberInput: { wrapper: 'pl-0' } }"
+        >
+          <template #left>
+            <UDropdownButton
+              v-model="currency"
+              :options="currencies"
+              size="sm"
+              variant="soft"
+              class="rounded-r-none h-[49px]"
+            />
+          </template>
+        </UInputNumber>
 
-      <UInputNumber
-        label="Right slot"
-        placeholder="Enter your annual payment"
-      >
-        <template #right>
-          <UText label="%, per year" variant="lifted" size="sm" :wrap="false" />
-        </template>
-      </UInputNumber>
-    </URow>
+        <UInputNumber
+          label="Right slot"
+          placeholder="Enter your annual payment"
+        >
+          <template #right>
+            <UText label="%, per year" variant="lifted" size="sm" :wrap="false" />
+          </template>
+        </UInputNumber>
+      </URow>
+
+      <URow block>
+        <UInputNumber v-model="descriptionSlotValue" label="Amount">
+          <template #description>
+            <UText size="sm" variant="lifted">
+              Net amount in
+              <ULink label="account currency" underlined size="sm" />.
+            </UText>
+          </template>
+        </UInputNumber>
+
+        <UInputNumber
+          v-model="errorSlotValue"
+          label="Amount"
+          :error="true"
+        >
+          <template #error>
+            <UText size="sm" color="error">
+              <ul>
+                <li>Value is outside the allowed range</li>
+                <li>Use up to two decimal places for this currency</li>
+                <li>Enter a number greater than zero</li>
+              </ul>
+            </UText>
+          </template>
+        </UInputNumber>
+      </URow>
+    </UCol>
   `,
 });
 Slots.parameters = {
   docs: {
     story: {
-      height: "250px",
+      height: "300px",
     },
   },
 };

package/ui.form-input-password/storybook/stories.ts

@@ -10,6 +10,9 @@ import {
 
 import UInputPassword from "../UInputPassword.vue";
 import UCol from "../../ui.container-col/UCol.vue";
+import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
@@ -139,69 +142,104 @@ export const IconProps: StoryFn<UInputPasswordArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<UInputPasswordArgs> = (args) => ({
-  components: { UInputPassword, URow, UButton, UDropdownButton },
+  components: { UInputPassword, URow, UCol, UButton, UDropdownButton, UText, ULink, UIcon },
   setup() {
     const wifiTypes = [
       { label: "WPA2", value: "wpa2" },
       { label: "WPA3", value: "wpa3" },
     ];
 
-    return { args, wifiTypes };
+    const descriptionSlotValue = ref("");
+    const errorSlotValue = ref("");
+
+    return { args, wifiTypes, descriptionSlotValue, errorSlotValue };
   },
   template: `
-    <URow align="stretch">
-      <UInputPassword
-        v-bind="args"
-        v-model="args.modelValue"
-        label="Enter your password"
-        :config="{ passwordInput: { wrapper: 'pl-0' } }"
-      >
-        <template #label="{ label }">
-          {{ label }}
-          <span class="text-red-500">*</span>
-        </template>
-
-        <template #left>
-          <UDropdownButton
-            v-model="args.wifiType"
-            :options="wifiTypes"
-            label="Wifi type"
-            size="sm"
-            variant="soft"
-            class="rounded-r-none h-[49px]"
-          />
-        </template>
-      </UInputPassword>
-
-      <UInputPassword
-        v-bind="args"
-        v-model="args.modelValue"
-        label="Enter your password"
-        :config="{ passwordInput: { wrapper: 'pr-0' } }"
-      >
-        <template #label="{ label }">
-          {{ label }}
-          <span class="text-red-500">*</span>
-        </template>
-
-        <template #right="{ visible, toggle }">
-          <UButton
-            :label="visible ? 'Hide' : 'Show'"
-            color="neutral"
-            variant="ghost"
-            size="sm"
-            class="rounded-l-none h-[49px] min-w-[69px]"
-            @click="toggle"
-          />
-        </template>
-      </UInputPassword>
-    </URow>
+    <UCol gap="3xl">
+      <URow block>
+        <UInputPassword
+          v-bind="args"
+          v-model="args.modelValue"
+          label="Enter your password"
+          :config="{ passwordInput: { wrapper: 'pl-0' } }"
+        >
+          <template #label="{ label }">
+            {{ label }}
+            <span class="text-red-500">*</span>
+          </template>
+
+          <template #left>
+            <UDropdownButton
+              v-model="args.wifiType"
+              :options="wifiTypes"
+              label="Wifi type"
+              size="sm"
+              variant="soft"
+              class="rounded-r-none h-[49px]"
+            />
+          </template>
+        </UInputPassword>
+
+        <UInputPassword
+          v-bind="args"
+          v-model="args.modelValue"
+          label="Enter your password"
+          :config="{ passwordInput: { wrapper: 'pr-0' } }"
+        >
+          <template #label="{ label }">
+            {{ label }}
+            <span class="text-red-500">*</span>
+          </template>
+
+          <template #right="{ visible, toggle }">
+            <UButton
+              :label="visible ? 'Hide' : 'Show'"
+              color="neutral"
+              variant="ghost"
+              size="sm"
+              class="rounded-l-none h-[49px] min-w-[69px]"
+              @click="toggle"
+            />
+          </template>
+        </UInputPassword>
+      </URow>
+
+      <URow block>
+        <UInputPassword
+          v-model="descriptionSlotValue"
+          label="Password"
+        >
+          <template #description>
+            <UText size="sm" variant="lifted">
+              Minimum 8 characters, see
+              <ULink label="password rules" underlined size="sm" />.
+            </UText>
+          </template>
+        </UInputPassword>
+
+        <UInputPassword
+          v-model="errorSlotValue"
+          label="Password"
+          :error="true"
+        >
+          <template #error>
+            <UText size="sm" color="error">
+              <ul>
+                <li>Password does not meet strength requirements</li>
+                <li>Use at least 8 characters with mixed case and numbers</li>
+                <li>Avoid common words and repeated characters</li>
+              </ul>
+            </UText>
+          </template>
+        </UInputPassword>
+      </URow>
+    </UCol>
   `,
 });
 Slots.parameters = {
   docs: {
     story: {
-      height: "200px",
+      height: "300px",
     },
   },
 };

package/ui.form-input-rating/UInputRating.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from "vue";
+import { computed, ref, useId, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
 import { hasSlotContent } from "../utils/helper";
@@ -27,6 +27,7 @@ const emit = defineEmits([
 ]);
 
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
+const instanceId = useId();
 
 const hovered = ref<number | null>(null);
 const preventHover = ref(false);
@@ -66,6 +67,10 @@ function onMouseHover(overStar: number | null = null) {
   }
 }
 
+function getStarInputId(index: number) {
+  return `${props.id ?? instanceId}-${index}`;
+}
+
 defineExpose({
   /**
    * A reference to the component's wrapper element for direct DOM manipulation.
@@ -112,13 +117,13 @@ const {
         v-for="(star, index) in stars"
         :key="star"
         tabindex="0"
-        :for="String(index)"
+        :for="getStarInputId(index)"
         v-bind="starLabelAttrs"
         @keydown.enter="onClickStar(star)"
         @keydown.space.prevent="onClickStar(star)"
       >
         <input
-          :id="String(index)"
+          :id="getStarInputId(index)"
           tabindex="-1"
           type="radio"
           :disabled="disabled"

package/ui.form-input-search/storybook/stories.ts

@@ -14,6 +14,7 @@ import UCol from "../../ui.container-col/UCol.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
 import UText from "../../ui.text-block/UText.vue";
+import ULink from "../../ui.button-link/ULink.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
@@ -152,7 +153,7 @@ export const IconProps: StoryFn<UInputSearchArgs> = (args) => ({
 });
 
 export const Slots: StoryFn<UInputSearchArgs> = (args) => ({
-  components: { UInputSearch, UCol, URow, UIcon, UDropdownButton, UText },
+  components: { UInputSearch, UCol, URow, UIcon, UDropdownButton, UText, ULink },
   setup() {
     const aiVersions = [
       { label: "GPT-4o", value: "gpt-4o" },
@@ -160,10 +161,13 @@ export const Slots: StoryFn<UInputSearchArgs> = (args) => ({
       { label: "GPT-4", value: "gpt-4" },
     ];
 
-    return { args, aiVersions };
+    const descriptionSlotValue = ref("");
+    const errorSlotValue = ref("");
+
+    return { args, aiVersions, descriptionSlotValue, errorSlotValue };
   },
   template: `
-    <UCol>
+    <UCol gap="3xl">
       <UInputSearch placeholder="Search by rental district...">
         <template #right>
           <URow align="center" gap="xs">
@@ -188,13 +192,39 @@ export const Slots: StoryFn<UInputSearchArgs> = (args) => ({
           />
         </template>
       </UInputSearch>
+
+      <UInputSearch v-model="descriptionSlotValue" label="Search products">
+        <template #description>
+          <UText size="sm" variant="lifted">
+            Tip: use
+            <ULink label="filters" underlined size="sm" />
+            for exact matches.
+          </UText>
+        </template>
+      </UInputSearch>
+
+      <UInputSearch
+        v-model="errorSlotValue"
+        label="Search"
+        :error="true"
+      >
+        <template #error>
+          <UText size="sm" color="error">
+            <ul>
+              <li>Search query is too short</li>
+              <li>Remove unsupported symbols from your search</li>
+              <li>Try different keywords and search again</li>
+            </ul>
+          </UText>
+        </template>
+      </UInputSearch>
     </UCol>
   `,
 });
 Slots.parameters = {
   docs: {
     story: {
-      height: "270px",
+      height: "500px",
     },
   },
 };

package/ui.form-label/ULabel.vue

@@ -170,9 +170,6 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
           {{ description }}
         </slot>
       </div>
-
-      <!-- @slot Use it to add something below the label content. -->
-      <slot name="bottom" />
     </div>
   </div>
 
@@ -226,8 +223,5 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
         {{ description }}
       </slot>
     </div>
-
-    <!-- @slot Use it to add something below the label content. -->
-    <slot name="bottom" />
   </div>
 </template>

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

@@ -114,29 +114,45 @@ Sizes.args = { enum: "size" };
 export const LabelAlign = EnumTemplate.bind({});
 LabelAlign.args = { enum: "align" };
 
-export const LabelSlot = DefaultTemplate.bind({});
-LabelSlot.args = {
-  label: "Email Address",
-  slotTemplate: `
-    <template #label="{ label }">
-      <URow align="center" gap="xs">
-        <UIcon name="mail" size="sm" class="text-primary" />
-        <UChip icon="asterisk" color="error" size="2xs">
-          <UText :label="label" class="mr-2" />
-        </UChip>
-      </URow>
-    </template>
-  `,
-};
+export const Slots: StoryFn<ULabelArgs> = () => ({
+  components: { ULabel, UText, URow, ULink, UIcon, UCol, UChip },
+  template: `
+    <UCol gap="3xl">
+      <ULabel label="Work email">
+        <UText label="johndoe@example.com" />
+        <template #label="{ label }">
+          <URow align="center" gap="xs">
+            <UIcon name="mail" size="sm" class="text-primary" />
+            <UChip icon="asterisk" color="error" size="xs">
+              <UText :label="label" class="mr-2" />
+            </UChip>
+          </URow>
+        </template>
+      </ULabel>
 
-export const BottomSlot = DefaultTemplate.bind({});
-BottomSlot.args = {
-  slotTemplate: `
-    <template #bottom>
-      <URow align="center" gap="2xs" class="mt-1">
-        <UIcon name="error" size="xs" />
-        <UText>Invalid email address. <ULink label="Need help?" /></UText>
-      </URow>
-    </template>
+      <ULabel label="Work email">
+        <UText label="johndoe@example.com" />
+        <template #description>
+          <UText size="sm" variant="lifted">
+            We will send a
+            <ULink label="confirmation link" underlined size="sm" />
+            to this address.
+          </UText>
+        </template>
+      </ULabel>
+
+      <ULabel label="Email" :error="true">
+        <UText label="not-an-email" />
+        <template #error>
+          <UText size="sm" color="error">
+            <ul>
+              <li>Email address format is invalid</li>
+              <li>Use a name@domain.com style address</li>
+              <li>Remove spaces and special characters from the local part</li>
+            </ul>
+          </UText>
+        </template>
+      </ULabel>
+    </UCol>
   `,
-};
+});

package/ui.form-label/tests/ULabel.test.ts

@@ -369,18 +369,6 @@ describe("ULabel.vue", () => {
 
       expect(component.find("[vl-key='label']").text()).toBe(slotContent);
     });
-
-    it("Bottom – renders content from bottom slot", () => {
-      const testClass = "custom-bottom";
-
-      const component = mount(ULabel, {
-        slots: {
-          bottom: `<div class="${testClass}">Bottom Slot Content</div>`,
-        },
-      });
-
-      expect(component.find(`.${testClass}`).exists()).toBe(true);
-    });
   });
 
   describe("Events", () => {

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

@@ -1,5 +1,6 @@
+import { nextTick } from "vue";
 import { flushPromises, mount } from "@vue/test-utils";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 
 import UListbox from "../UListbox.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -399,7 +400,37 @@ describe("UListbox.vue", () => {
         id: `option-${i}`,
       }));
 
-      const expectedStyle = "max-height:";
+      // Mock getComputedStyle to return non-zero heights for option elements
+      const originalGetComputedStyle = window.getComputedStyle;
+
+      vi.spyOn(window, "getComputedStyle").mockImplementation((el) => {
+        const real = originalGetComputedStyle(el);
+
+        return {
+          ...real,
+          height: "40px",
+          marginTop: "0px",
+          marginBottom: "4px",
+          paddingTop: "4px",
+          paddingBottom: "4px",
+          borderTopWidth: "1px",
+          borderBottomWidth: "1px",
+          gap: "4px",
+        } as CSSStyleDeclaration;
+      });
+
+      // Mock getBoundingClientRect for option elements
+      vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockReturnValue({
+        height: 40,
+        width: 100,
+        top: 0,
+        left: 0,
+        bottom: 40,
+        right: 100,
+        x: 0,
+        y: 0,
+        toJSON: () => {},
+      });
 
       const component = mount(UListbox, {
         props: {
@@ -409,10 +440,15 @@ describe("UListbox.vue", () => {
       });
 
       await flushPromises();
+      await nextTick();
 
       const wrapper = component.find('[vl-key="wrapper"]');
+      const styleAttr = wrapper.attributes("style");
+      const inlineMaxHeight = (wrapper.element as HTMLElement).style.maxHeight;
+
+      expect(styleAttr ?? inlineMaxHeight).toContain("max-height:");
 
-      expect(wrapper.attributes("style")).toContain(expectedStyle);
+      vi.restoreAllMocks();
     });
   });
 

package/ui.form-radio/URadio.vue

@@ -151,10 +151,5 @@ const { getDataTest, radioLabelAttrs, radioAttrs } = useUI<Config>(defaultConfig
       :data-test="getDataTest()"
       @change="onChange"
     />
-
-    <template #bottom>
-      <!-- @slot Use it to add something below the radio. -->
-      <slot name="bottom" />
-    </template>
   </ULabel>
 </template>