vueless 1.4.5 → 1.4.6-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.5",
+  "version": "1.4.6-beta.0",
   "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.form-checkbox/UCheckbox.vue

@@ -165,6 +165,14 @@ const {
       <slot name="label" :label="label" />
     </template>
 
+    <template #description>
+      <!--
+        @slot Use this to add custom content instead of the description.
+        @binding {string} description
+      -->
+      <slot name="description" :description="description" />
+    </template>
+
     <input
       :id="elementId"
       type="checkbox"

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

@@ -284,6 +284,24 @@ describe("UCheckbox.vue", () => {
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });
 
+    it("Description – renders custom content from description slot", () => {
+      const customDescription = "Custom description content";
+
+      const component = mount(UCheckbox, {
+        props: {
+          description: "Default description",
+        },
+        slots: {
+          description: customDescription,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const descriptionElement = labelComponent.find("[vl-child-key='description']");
+
+      expect(descriptionElement.text()).toBe(customDescription);
+    });
+
     it("Bottom – renders custom content from bottom slot", () => {
       const customBottomContent = "Custom Bottom Content";
 

package/ui.form-checkbox/types.ts

@@ -53,7 +53,7 @@ export interface Props {
   /**
    * Error message.
    */
-  error?: string;
+  error?: string | boolean;
 
   /**
    * Label placement.

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

@@ -96,6 +96,14 @@ const { getDataTest, groupLabelAttrs, groupCheckboxAttrs, listAttrs } =
       <slot name="label" :label="label" />
     </template>
 
+    <template #description>
+      <!--
+        @slot Use this to add custom content instead of the description.
+        @binding {string} description
+      -->
+      <slot name="description" :description="description" />
+    </template>
+
     <div ref="list" v-bind="listAttrs">
       <!-- @slot Use it to add UCheckbox directly. -->
       <slot>

package/ui.form-checkbox-group/tests/UCheckboxGroup.test.ts

@@ -289,6 +289,24 @@ describe("UCheckboxGroup.vue", () => {
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });
 
+    it("Description – renders custom content from description slot", () => {
+      const customDescription = "Custom description content";
+
+      const component = mount(UCheckboxGroup, {
+        props: {
+          description: "Default description",
+        },
+        slots: {
+          description: customDescription,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const descriptionElement = labelComponent.find("[vl-child-key='description']");
+
+      expect(descriptionElement.text()).toBe(customDescription);
+    });
+
     it("Default slot – renders custom UCheckbox components", () => {
       const component = mount(UCheckboxGroup, {
         props: {

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

@@ -39,7 +39,7 @@ export interface Props {
   /**
    * Checkbox group error message.
    */
-  error?: string;
+  error?: string | boolean;
 
   /**
    * Checkbox group size.

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

@@ -304,6 +304,14 @@ watchEffect(() => {
       @keydown.esc="deactivate"
       @keydown="onTextInputKeyDown"
     >
+      <template #description>
+        <!--
+          @slot Use this to add custom content instead of the description.
+          @binding {string} description
+        -->
+        <slot name="description" :description="description" />
+      </template>
+
       <template #left="{ iconName }">
         <!--
           @slot Use it add something before the date.

package/ui.form-date-picker/tests/UDatePicker.test.ts

@@ -4,6 +4,7 @@ import { nextTick } from "vue";
 
 import UDatePicker from "../UDatePicker.vue";
 import UInput from "../../ui.form-input/UInput.vue";
+import ULabel from "../../ui.form-label/ULabel.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Props } from "../types";
@@ -476,6 +477,25 @@ describe("UDatePicker.vue", () => {
 
       expect(component.find(`.${slotClass}`).exists()).toBe(true);
     });
+
+    it("Description – renders custom content from description slot", () => {
+      const customDescription = "Custom description content";
+
+      const component = mount(UDatePicker, {
+        props: {
+          modelValue: new Date(),
+          description: "Default description",
+        },
+        slots: {
+          description: customDescription,
+        },
+      });
+
+      const labelComponent = component.getComponent(UInput).getComponent(ULabel);
+      const descriptionElement = labelComponent.find("[vl-child-key='description']");
+
+      expect(descriptionElement.text()).toBe(customDescription);
+    });
   });
 
   describe("Exposed Properties", () => {

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

@@ -34,7 +34,7 @@ export interface Props<TModelValue> {
   /**
    * Datepicker error message.
    */
-  error?: string;
+  error?: string | boolean;
 
   /**
    * Make datepicker disabled.

package/ui.form-date-picker-range/UDatePickerRange.vue

@@ -639,6 +639,14 @@ watchEffect(() => {
       @focus="activate"
       @keydown.esc="deactivate"
     >
+      <template #description>
+        <!--
+          @slot Use this to add custom content instead of the description.
+          @binding {string} description
+        -->
+        <slot name="description" :description="description" />
+      </template>
+
       <template #left="{ iconName }">
         <!--
           @slot Use it to add something before the date.

package/ui.form-date-picker-range/tests/UDatePickerRange.test.ts

@@ -3,6 +3,7 @@ import { describe, it, expect } from "vitest";
 
 import UDatePickerRange from "../UDatePickerRange.vue";
 import UInput from "../../ui.form-input/UInput.vue";
+import ULabel from "../../ui.form-label/ULabel.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UDatePickerRangePeriodMenu from "../UDatePickerRangePeriodMenu.vue";
 
@@ -583,6 +584,26 @@ describe("UDatePickerRange.vue", () => {
 
       expect(component.text()).toContain(`Icon: ${rightIcon}`);
     });
+
+    it("Description – renders custom content from description slot", () => {
+      const customDescription = "Custom description content";
+
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          modelValue: { from: null, to: null },
+          description: "Default description",
+        },
+        slots: {
+          description: customDescription,
+        },
+      });
+
+      const labelComponent = component.getComponent(UInput).getComponent(ULabel);
+      const descriptionElement = labelComponent.find("[vl-child-key='description']");
+
+      expect(descriptionElement.text()).toBe(customDescription);
+    });
   });
 
   describe("Events", () => {

package/ui.form-date-picker-range/types.ts

@@ -110,7 +110,7 @@ export interface Props<TModelValue> {
   /**
    * Datepicker error message.
    */
-  error?: string;
+  error?: string | boolean;
 
   /**
    * Make datepicker disabled.

package/ui.form-input/types.ts

@@ -33,7 +33,7 @@ export interface Props {
   /**
    * Error message.
    */
-  error?: string;
+  error?: string | boolean;
 
   /**
    * Input size.

package/ui.form-input-file/UInputFile.vue

@@ -313,6 +313,14 @@ const {
       <slot name="label" :label="label" />
     </template>
 
+    <template #description>
+      <!--
+        @slot Use this to add custom content instead of the description.
+        @binding {string} description
+      -->
+      <slot name="description" :description="description" />
+    </template>
+
     <div ref="dropZone" :ondrop="onDrop" v-bind="dropzoneAttrs">
       <UText v-if="hasSlotContent($slots['top'])" :size="size" v-bind="descriptionTopAttrs">
         <!-- @slot Use it to add something above the component content. -->

package/ui.form-input-file/tests/UInputFile.test.ts

@@ -292,6 +292,24 @@ describe("UInputFile.vue", () => {
       expect(labelElement.text()).toBe(`Custom ${defaultLabel}`);
     });
 
+    it("Description – renders custom content from description slot", () => {
+      const customDescription = "Custom description content";
+
+      const component = mount(UInputFile, {
+        props: {
+          description: "Default description",
+        },
+        slots: {
+          description: customDescription,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const descriptionElement = labelComponent.find("[vl-child-key='description']");
+
+      expect(descriptionElement.text()).toBe(customDescription);
+    });
+
     it("Top – renders custom content from top slot", () => {
       const testClass = "custom-top";
 

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

@@ -23,7 +23,7 @@ export interface Props {
   /**
    * Error message.
    */
-  error?: string;
+  error?: string | boolean;
 
   /**
    * Label placement.

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

@@ -179,6 +179,14 @@ const { getDataTest, numberInputAttrs } = useUI<Config>(defaultConfig);
     @blur="onBlur"
     @input="onInput"
   >
+    <template #description>
+      <!--
+        @slot Use this to add custom content instead of the description.
+        @binding {string} description
+      -->
+      <slot name="description" :description="description" />
+    </template>
+
     <template #left>
       <!--
         @slot Use it to add something left.

package/ui.form-input-number/tests/UInputNumber.test.ts

@@ -3,6 +3,7 @@ import { describe, it, expect } from "vitest";
 
 import UInputNumber from "../UInputNumber.vue";
 import UInput from "../../ui.form-input/UInput.vue";
+import ULabel from "../../ui.form-label/ULabel.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Props } from "../types";
@@ -412,6 +413,24 @@ describe("UInputNumber.vue", () => {
       expect(component.find(`.${slotClass}`).exists()).toBe(true);
       expect(component.findComponent(UIcon).exists()).toBe(false);
     });
+
+    it("Description – renders custom content from description slot", () => {
+      const customDescription = "Custom description content";
+
+      const component = mount(UInputNumber, {
+        props: {
+          description: "Default description",
+        },
+        slots: {
+          description: customDescription,
+        },
+      });
+
+      const labelComponent = component.getComponent(UInput).getComponent(ULabel);
+      const descriptionElement = labelComponent.find("[vl-child-key='description']");
+
+      expect(descriptionElement.text()).toBe(customDescription);
+    });
   });
 
   describe("Exposed properties", () => {

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

@@ -52,7 +52,7 @@ export interface Props {
   /**
    * Error message.
    */
-  error?: string;
+  error?: string | boolean;
 
   /**
    * Input size.

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

@@ -125,6 +125,14 @@ const { getDataTest, config, passwordInputAttrs, passwordIconAttrs, passwordIcon
       <slot name="label" :label="label" />
     </template>
 
+    <template #description>
+      <!--
+        @slot Use this to add custom content instead of the description.
+        @binding {string} description
+      -->
+      <slot name="description" :description="description" />
+    </template>
+
     <template #right>
       <div v-bind="passwordIconWrapperAttrs" @click="onClickShowPassword">
         <!--

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

@@ -3,6 +3,7 @@ import { describe, it, expect } from "vitest";
 
 import UInputPassword from "../UInputPassword.vue";
 import UInput from "../../ui.form-input/UInput.vue";
+import ULabel from "../../ui.form-label/ULabel.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Props } from "../types";
@@ -299,5 +300,23 @@ describe("UInputPassword.vue", () => {
 
       expect(component.html()).toContain(`Icon: ${visibilityIcon}`);
     });
+
+    it("Description – renders custom content from description slot", () => {
+      const customDescription = "Custom description content";
+
+      const component = mount(UInputPassword, {
+        props: {
+          description: "Default description",
+        },
+        slots: {
+          description: customDescription,
+        },
+      });
+
+      const labelComponent = component.getComponent(UInput).getComponent(ULabel);
+      const descriptionElement = labelComponent.find("[vl-child-key='description']");
+
+      expect(descriptionElement.text()).toBe(customDescription);
+    });
   });
 });

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

@@ -33,7 +33,7 @@ export interface Props {
   /**
    * Error message.
    */
-  error?: string;
+  error?: string | boolean;
 
   /**
    * Input size.

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

@@ -144,6 +144,14 @@ const {
     @update:model-value="onUpdateValue"
     @keyup.enter="onKeyupEnter"
   >
+    <template #description>
+      <!--
+        @slot Use this to add custom content instead of the description.
+        @binding {string} description
+      -->
+      <slot name="description" :description="description" />
+    </template>
+
     <template #left>
       <!-- @slot Use it to add something before the text. -->
       <slot name="left" />

package/ui.form-input-search/tests/UInputSearch.test.ts

@@ -2,6 +2,7 @@ import { flushPromises, mount } from "@vue/test-utils";
 import { describe, it, expect, vi } from "vitest";
 
 import UInputSearch from "../UInputSearch.vue";
+import ULabel from "../../ui.form-label/ULabel.vue";
 import UInput from "../../ui.form-input/UInput.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
@@ -301,6 +302,24 @@ describe("UInputSearch.vue", () => {
 
       expect(component.getComponent(UButton).props("label")).toBe(searchButtonLabel);
     });
+
+    it("Description – renders custom content from description slot", () => {
+      const customDescription = "Custom description content";
+
+      const component = mount(UInputSearch, {
+        props: {
+          description: "Default description",
+        },
+        slots: {
+          description: customDescription,
+        },
+      });
+
+      const labelComponent = component.getComponent(UInput).getComponent(ULabel);
+      const descriptionElement = labelComponent.find("[vl-child-key='description']");
+
+      expect(descriptionElement.text()).toBe(customDescription);
+    });
   });
 
   describe("Events", () => {

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

@@ -38,7 +38,7 @@ export interface Props {
   /**
    * Error message.
    */
-  error?: string;
+  error?: string | boolean;
 
   /**
    * Minimum character length for search.

package/ui.form-label/ULabel.vue

@@ -51,10 +51,14 @@ const wrapperElement = computed(() => {
   return wrapperRef.value;
 });
 
-const isShownError = computed(() => {
+const hasErrorState = computed(() => {
   return Boolean(props.error) && !props.disabled;
 });
 
+const showErrorMessage = computed(() => {
+  return hasErrorState.value && typeof props.error !== "boolean";
+});
+
 function onClick(event: MouseEvent) {
   emit("click", event);
 }
@@ -78,7 +82,7 @@ defineExpose({
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
-  error: Boolean(props.error) && !props.disabled,
+  error: hasErrorState.value,
   label: Boolean(props.label) || hasSlotContent(slots["label"], { label: props.label }),
   description:
     Boolean(props.description) ||
@@ -132,7 +136,7 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
       </component>
 
       <div
-        v-if="isShownError"
+        v-if="showErrorMessage"
         v-bind="errorAttrs"
         :data-test="getDataTest('error')"
         v-text="error"
@@ -140,7 +144,7 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
 
       <div
         v-if="
-          (description || hasSlotContent(slots['description'], { description })) && !isShownError
+          (description || hasSlotContent(slots['description'], { description })) && !hasErrorState
         "
         v-bind="descriptionAttrs"
         :data-test="getDataTest('description')"
@@ -184,10 +188,17 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
       <slot />
     </div>
 
-    <div v-if="isShownError" v-bind="errorAttrs" :data-test="getDataTest('error')" v-text="error" />
+    <div
+      v-if="showErrorMessage"
+      v-bind="errorAttrs"
+      :data-test="getDataTest('error')"
+      v-text="error"
+    />
 
     <div
-      v-if="(description || hasSlotContent(slots['description'], { description })) && !isShownError"
+      v-if="
+        (description || hasSlotContent(slots['description'], { description })) && !hasErrorState
+      "
       v-bind="descriptionAttrs"
       :data-test="getDataTest('description')"
     >

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

@@ -97,6 +97,20 @@ describe("ULabel.vue", () => {
       expect(errorElement.text()).toBe(error);
     });
 
+    it("Error – boolean error applies error styling without rendering error text", () => {
+      const errorClasses = "text-error";
+
+      const component = mount(ULabel, {
+        props: {
+          error: true,
+          label: "Label",
+        },
+      });
+
+      expect(component.find("[vl-key='label']").attributes("class")).toContain(errorClasses);
+      expect(component.find("[vl-key='error']").exists()).toBe(false);
+    });
+
     it("Align – applies correct classes for align prop", () => {
       const alignCases = {
         top: "flex-col",

package/ui.form-label/types.ts

@@ -26,9 +26,9 @@ export interface Props {
   description?: string;
 
   /**
-   * Label error message.
+   * Label error message, or `true` for error styling without showing message text.
    */
-  error?: string;
+  error?: string | boolean;
 
   /**
    * Label align.

package/ui.form-radio/URadio.vue

@@ -124,6 +124,14 @@ const { getDataTest, radioLabelAttrs, radioAttrs } = useUI<Config>(defaultConfig
       <slot name="label" :label="label" />
     </template>
 
+    <template #description>
+      <!--
+        @slot Use this to add custom content instead of the description.
+        @binding {string} description
+      -->
+      <slot name="description" :description="description" />
+    </template>
+
     <input
       :id="elementId"
       type="radio"

package/ui.form-radio/tests/URadio.test.ts

@@ -206,6 +206,24 @@ describe("URadio.vue", () => {
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });
 
+    it("Description – renders custom content from description slot", () => {
+      const customDescription = "Custom description content";
+
+      const component = mount(URadio, {
+        props: {
+          description: "Default description",
+        },
+        slots: {
+          description: customDescription,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const descriptionElement = labelComponent.find("[vl-child-key='description']");
+
+      expect(descriptionElement.text()).toBe(customDescription);
+    });
+
     it("Bottom – renders custom content from bottom slot", () => {
       const customBottomContent = "Custom Bottom Content";
 

package/ui.form-radio/types.ts

@@ -35,7 +35,7 @@ export interface Props {
   /**
    * Error message.
    */
-  error?: string;
+  error?: string | boolean;
 
   /**
    * Radio name.

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

@@ -79,6 +79,14 @@ const { getDataTest, groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Confi
       <slot name="label" :label="label" />
     </template>
 
+    <template #description>
+      <!--
+        @slot Use this to add custom content instead of the description.
+        @binding {string} description
+      -->
+      <slot name="description" :description="description" />
+    </template>
+
     <div ref="list" v-bind="listAttrs">
       <!-- @slot Use it to add URadio directly. -->
       <slot>

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

@@ -303,6 +303,25 @@ describe("URadioGroup.vue", () => {
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });
 
+    it("Description – renders custom content from description slot", () => {
+      const customDescription = "Custom description content";
+
+      const component = mount(URadioGroup, {
+        props: {
+          description: "Default description",
+          name: defaultName,
+        },
+        slots: {
+          description: customDescription,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const descriptionElement = labelComponent.find("[vl-child-key='description']");
+
+      expect(descriptionElement.text()).toBe(customDescription);
+    });
+
     it("Default slot – renders custom URadio components", () => {
       const component = mount(URadioGroup, {
         props: {

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

@@ -52,7 +52,7 @@ export interface Props {
   /**
    * Radio group error message.
    */
-  error?: string;
+  error?: string | boolean;
 
   /**
    * Radio size.

package/ui.form-select/USelect.vue

@@ -538,6 +538,14 @@ const {
       </div>
     </template>
 
+    <template #description>
+      <!--
+        @slot Use this to add custom content instead of the description.
+        @binding {string} description
+      -->
+      <slot name="description" :description="description" />
+    </template>
+
     <div
       ref="wrapper"
       :tabindex="searchable || disabled ? -1 : 0"

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

@@ -587,6 +587,25 @@ describe("USelect.vue", () => {
       expect(component.text()).toContain(`Modified ${defaultLabel}`);
     });
 
+    it("Description – renders custom content from description slot", () => {
+      const customDescription = "Custom description content";
+
+      const component = mount(USelect, {
+        props: {
+          description: "Default description",
+          options: defaultOptions,
+        },
+        slots: {
+          description: customDescription,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const descriptionElement = labelComponent.find("[vl-child-key='description']");
+
+      expect(descriptionElement.text()).toBe(customDescription);
+    });
+
     it("Left – renders custom content from left slot", () => {
       const slotContent = "Left Slot Content";
 

package/ui.form-select/types.ts

@@ -39,7 +39,7 @@ export interface Props {
   /**
    * Select error message.
    */
-  error?: string;
+  error?: string | boolean;
 
   /**
    * Select size.

package/ui.form-switch/USwitch.vue

@@ -129,6 +129,14 @@ const {
       <slot name="label" :label="label" />
     </template>
 
+    <template #description>
+      <!--
+        @slot Use this to add custom content instead of the description.
+        @binding {string} description
+      -->
+      <slot name="description" :description="description" />
+    </template>
+
     <div
       ref="wrapper"
       tabindex="0"

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

@@ -229,6 +229,24 @@ describe("USwitch.vue", () => {
 
       expect(component.find("label").text()).toBe(`Modified ${defaultLabel}`);
     });
+
+    it("Description – renders custom content from description slot", () => {
+      const customDescription = "Custom description content";
+
+      const component = mount(USwitch, {
+        props: {
+          description: "Default description",
+        },
+        slots: {
+          description: customDescription,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const descriptionElement = labelComponent.find("[vl-child-key='description']");
+
+      expect(descriptionElement.text()).toBe(customDescription);
+    });
   });
 
   describe("Exposed properties", () => {

package/ui.form-textarea/UTextarea.vue

@@ -250,6 +250,14 @@ const {
       <slot name="label" :label="label" />
     </template>
 
+    <template #description>
+      <!--
+        @slot Use this to add custom content instead of the description.
+        @binding {string} description
+      -->
+      <slot name="description" :description="description" />
+    </template>
+
     <div ref="wrapper" v-bind="wrapperAttrs">
       <span
         v-if="hasSlotContent($slots['left'])"

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

@@ -430,6 +430,24 @@ describe("UTextarea.vue", () => {
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });
 
+    it("Description – renders custom content from description slot", () => {
+      const customDescription = "Custom description content";
+
+      const component = mount(UTextarea, {
+        props: {
+          description: "Default description",
+        },
+        slots: {
+          description: customDescription,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const descriptionElement = labelComponent.find("[vl-child-key='description']");
+
+      expect(descriptionElement.text()).toBe(customDescription);
+    });
+
     it("Left – renders custom content from left slot", () => {
       const slotText = "Custom Left Content";
       const testClass = "custom-left";

package/ui.form-textarea/types.ts

@@ -73,7 +73,7 @@ export interface Props {
   /**
    * Set error message.
    */
-  error?: string;
+  error?: string | boolean;
 
   /**
    * Set number of visible rows.

package/ui.text-files/UFiles.vue

@@ -81,6 +81,14 @@ const { getDataTest, filesLabelAttrs, itemsAttrs, itemAttrs } = useUI<Config>(de
       <slot name="label" :label="label" />
     </template>
 
+    <template #description>
+      <!--
+        @slot Use this to add custom content instead of the description.
+        @binding {string} description
+      -->
+      <slot name="description" :description="description" />
+    </template>
+
     <div ref="items" v-bind="itemsAttrs">
       <!-- @slot Use it to add UFile. -->
       <slot>

package/ui.text-files/tests/UFiles.test.ts

@@ -173,6 +173,25 @@ describe("UFiles.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
+    it("Description – renders custom content from description slot", () => {
+      const customDescription = "Custom description content";
+
+      const component = mount(UFiles, {
+        props: {
+          fileList: [],
+          description: "Default description",
+        },
+        slots: {
+          description: customDescription,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const descriptionElement = labelComponent.find("[vl-child-key='description']");
+
+      expect(descriptionElement.text()).toBe(customDescription);
+    });
+
     it("Before – renders content from before-file slot", () => {
       const slotText = "Before";
       const slotClass = "before-content";