vueless 1.4.4 → 1.4.5-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.4",
+  "version": "1.4.5-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",
@@ -57,7 +57,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.4.18",
+    "@vueless/storybook": "^1.5.2",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^10.0.2",
     "eslint-plugin-vue": "^10.3.0",

package/ui.form-input/UInput.vue

@@ -290,6 +290,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'], { iconName: leftIcon }) || leftIcon"

package/ui.form-input/tests/UInput.test.ts

@@ -341,6 +341,24 @@ describe("UInput.vue", () => {
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });
 
+    it("Description – renders custom content from description slot", () => {
+      const customDescription = "Custom description content";
+
+      const component = mount(UInput, {
+        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 slotClass = "custom-left";

package/ui.form-label/ULabel.vue

@@ -80,6 +80,9 @@ defineExpose({
 const mutatedProps = computed(() => ({
   error: Boolean(props.error) && !props.disabled,
   label: Boolean(props.label) || hasSlotContent(slots["label"], { label: props.label }),
+  description:
+    Boolean(props.description) ||
+    hasSlotContent(slots["description"], { description: props.description }),
   for: Boolean(props.for),
 }));
 
@@ -100,7 +103,15 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
     </div>
 
     <!-- `v-bind` isn't assigned, because the div is system -->
-    <div v-if="label || hasSlotContent(slots['label'], { label }) || error || description">
+    <div
+      v-if="
+        label ||
+        hasSlotContent(slots['label'], { label }) ||
+        error ||
+        description ||
+        hasSlotContent(slots['description'], { description })
+      "
+    >
       <component
         :is="tag"
         v-if="label || hasSlotContent(slots['label'], { label })"
@@ -128,11 +139,20 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
       />
 
       <div
-        v-if="description && !isShownError"
+        v-if="
+          (description || hasSlotContent(slots['description'], { description })) && !isShownError
+        "
         v-bind="descriptionAttrs"
         :data-test="getDataTest('description')"
-        v-text="description"
-      />
+      >
+        <!--
+          @slot Use this to add custom content instead of the description.
+          @binding {string} description
+        -->
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </div>
 
       <!-- @slot Use it to add something below the label content. -->
       <slot name="bottom" />
@@ -167,11 +187,18 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
     <div v-if="isShownError" v-bind="errorAttrs" :data-test="getDataTest('error')" v-text="error" />
 
     <div
-      v-if="description && !isShownError"
+      v-if="(description || hasSlotContent(slots['description'], { description })) && !isShownError"
       v-bind="descriptionAttrs"
       :data-test="getDataTest('description')"
-      v-text="description"
-    />
+    >
+      <!--
+        @slot Use this to add custom content instead of the description.
+        @binding {string} description
+      -->
+      <slot name="description" :description="description">
+        {{ description }}
+      </slot>
+    </div>
 
     <!-- @slot Use it to add something below the label content. -->
     <slot name="bottom" />

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

@@ -302,6 +302,25 @@ describe("ULabel.vue", () => {
       expect(labelElement.text()).not.toContain(defaultLabel);
     });
 
+    it("Description – renders content from description slot", () => {
+      const slotContent = "Custom description";
+      const defaultDescription = "Default description";
+
+      const component = mount(ULabel, {
+        props: {
+          description: defaultDescription,
+        },
+        slots: {
+          description: slotContent,
+        },
+      });
+
+      const descriptionElement = component.find("[vl-key='description']");
+
+      expect(descriptionElement.text()).toBe(slotContent);
+      expect(descriptionElement.text()).not.toContain(defaultDescription);
+    });
+
     it("Label – exposes label content", () => {
       const defaultLabel = "Label Content";
       const slotContent = "Modified Label Content";

package/ui.text-notify/UNotify.vue

@@ -44,6 +44,7 @@ onMounted(() => {
   window.addEventListener("notifyEnd", onNotifyEnd);
   window.addEventListener("notifyClearAll", onClearAll);
 
+  setPosition();
   waitForPageElement();
 });