vueless 1.4.6 → 1.4.7

package/icons/internal/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M222.15-182.15h143.78v-251.92h228.14v251.92h143.78v-386.89L480-762.37 222.15-568.96v386.81Zm-68.13 68.13v-489.09L480-847.65l326.22 244.54v489.09H528.57v-254.55h-97.14v254.55H154.02ZM480-472.76Z"/></svg>

package/icons/storybook/keep.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m640.22-454.22 86 77v68.37H514.07v240.28L480-34.5l-34.07-34.07v-240.28H234.02v-68.37l80-77v-327.45h-50v-68.13h426.2v68.13h-50v327.45Zm-313.96 77h301.48l-55.89-51.89v-352.56h-189.7v352.56l-55.89 51.89Zm150.74 0Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "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

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

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

@@ -302,6 +302,24 @@ describe("UCheckbox.vue", () => {
       expect(descriptionElement.text()).toBe(customDescription);
     });
 
+    it("Error – renders custom content from error slot", () => {
+      const customError = "Custom error content";
+
+      const component = mount(UCheckbox, {
+        props: {
+          error: "Default error message",
+        },
+        slots: {
+          error: customError,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const errorElement = labelComponent.find("[vl-child-key='error']");
+
+      expect(errorElement.text()).toBe(customError);
+    });
+
     it("Bottom – renders custom content from bottom slot", () => {
       const customBottomContent = "Custom Bottom Content";
 

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

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

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

@@ -307,6 +307,24 @@ describe("UCheckboxGroup.vue", () => {
       expect(descriptionElement.text()).toBe(customDescription);
     });
 
+    it("Error – renders custom content from error slot", () => {
+      const customError = "Custom error content";
+
+      const component = mount(UCheckboxGroup, {
+        props: {
+          error: "Default error message",
+        },
+        slots: {
+          error: customError,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const errorElement = labelComponent.find("[vl-child-key='error']");
+
+      expect(errorElement.text()).toBe(customError);
+    });
+
     it("Default slot – renders custom UCheckbox components", () => {
       const component = mount(UCheckboxGroup, {
         props: {

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

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

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

@@ -496,6 +496,25 @@ describe("UDatePicker.vue", () => {
 
       expect(descriptionElement.text()).toBe(customDescription);
     });
+
+    it("Error – renders custom content from error slot", () => {
+      const customError = "Custom error content";
+
+      const component = mount(UDatePicker, {
+        props: {
+          modelValue: new Date(),
+          error: "Default error message",
+        },
+        slots: {
+          error: customError,
+        },
+      });
+
+      const labelComponent = component.getComponent(UInput).getComponent(ULabel);
+      const errorElement = labelComponent.find("[vl-child-key='error']");
+
+      expect(errorElement.text()).toBe(customError);
+    });
   });
 
   describe("Exposed Properties", () => {

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

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

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

@@ -604,6 +604,26 @@ describe("UDatePickerRange.vue", () => {
 
       expect(descriptionElement.text()).toBe(customDescription);
     });
+
+    it("Error – renders custom content from error slot", () => {
+      const customError = "Custom error content";
+
+      const component = mount(UDatePickerRange, {
+        props: {
+          variant: "input",
+          modelValue: { from: null, to: null },
+          error: "Default error message",
+        },
+        slots: {
+          error: customError,
+        },
+      });
+
+      const labelComponent = component.getComponent(UInput).getComponent(ULabel);
+      const errorElement = labelComponent.find("[vl-child-key='error']");
+
+      expect(errorElement.text()).toBe(customError);
+    });
   });
 
   describe("Events", () => {

package/ui.form-input/UInput.vue

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

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

@@ -359,6 +359,24 @@ describe("UInput.vue", () => {
       expect(descriptionElement.text()).toBe(customDescription);
     });
 
+    it("Error – renders custom content from error slot", () => {
+      const customError = "Custom error content";
+
+      const component = mount(UInput, {
+        props: {
+          error: "Default error message",
+        },
+        slots: {
+          error: customError,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const errorElement = labelComponent.find("[vl-child-key='error']");
+
+      expect(errorElement.text()).toBe(customError);
+    });
+
     it("Left – renders custom content from left slot", () => {
       const slotText = "Custom Left Content";
       const slotClass = "custom-left";

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

@@ -321,6 +321,14 @@ const {
       <slot name="description" :description="description" />
     </template>
 
+    <template #error>
+      <!--
+        @slot Use this to add custom content instead of the error message.
+        @binding {string | boolean} error
+      -->
+      <slot name="error" :error="currentError" />
+    </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

@@ -310,6 +310,24 @@ describe("UInputFile.vue", () => {
       expect(descriptionElement.text()).toBe(customDescription);
     });
 
+    it("Error – renders custom content from error slot", () => {
+      const customError = "Custom error content";
+
+      const component = mount(UInputFile, {
+        props: {
+          error: "Default error message",
+        },
+        slots: {
+          error: customError,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const errorElement = labelComponent.find("[vl-child-key='error']");
+
+      expect(errorElement.text()).toBe(customError);
+    });
+
     it("Top – renders custom content from top slot", () => {
       const testClass = "custom-top";
 

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

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

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

@@ -431,6 +431,24 @@ describe("UInputNumber.vue", () => {
 
       expect(descriptionElement.text()).toBe(customDescription);
     });
+
+    it("Error – renders custom content from error slot", () => {
+      const customError = "Custom error content";
+
+      const component = mount(UInputNumber, {
+        props: {
+          error: "Default error message",
+        },
+        slots: {
+          error: customError,
+        },
+      });
+
+      const labelComponent = component.getComponent(UInput).getComponent(ULabel);
+      const errorElement = labelComponent.find("[vl-child-key='error']");
+
+      expect(errorElement.text()).toBe(customError);
+    });
   });
 
   describe("Exposed properties", () => {

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

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

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

@@ -318,5 +318,23 @@ describe("UInputPassword.vue", () => {
 
       expect(descriptionElement.text()).toBe(customDescription);
     });
+
+    it("Error – renders custom content from error slot", () => {
+      const customError = "Custom error content";
+
+      const component = mount(UInputPassword, {
+        props: {
+          error: "Default error message",
+        },
+        slots: {
+          error: customError,
+        },
+      });
+
+      const labelComponent = component.getComponent(UInput).getComponent(ULabel);
+      const errorElement = labelComponent.find("[vl-child-key='error']");
+
+      expect(errorElement.text()).toBe(customError);
+    });
   });
 });

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

@@ -152,6 +152,14 @@ const {
       <slot name="description" :description="description" />
     </template>
 
+    <template #error>
+      <!--
+        @slot Use this to add custom content instead of the error message.
+        @binding {string | boolean} error
+      -->
+      <slot name="error" :error="error" />
+    </template>
+
     <template #left>
       <!-- @slot Use it to add something before the text. -->
       <slot name="left" />

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

@@ -320,6 +320,24 @@ describe("UInputSearch.vue", () => {
 
       expect(descriptionElement.text()).toBe(customDescription);
     });
+
+    it("Error – renders custom content from error slot", () => {
+      const customError = "Custom error content";
+
+      const component = mount(UInputSearch, {
+        props: {
+          error: "Default error message",
+        },
+        slots: {
+          error: customError,
+        },
+      });
+
+      const labelComponent = component.getComponent(UInput).getComponent(ULabel);
+      const errorElement = labelComponent.find("[vl-child-key='error']");
+
+      expect(errorElement.text()).toBe(customError);
+    });
   });
 
   describe("Events", () => {

package/ui.form-label/ULabel.vue

@@ -55,8 +55,17 @@ const hasErrorState = computed(() => {
   return Boolean(props.error) && !props.disabled;
 });
 
-const showErrorMessage = computed(() => {
-  return hasErrorState.value && typeof props.error !== "boolean";
+const errorFallbackText = computed(() => {
+  return typeof props.error === "string" ? props.error : "";
+});
+
+const showErrorBlock = computed(() => {
+  if (!hasErrorState.value) return false;
+
+  return (
+    hasSlotContent(slots["error"], { error: props.error }) ||
+    (typeof props.error !== "boolean" && Boolean(props.error))
+  );
 });
 
 function onClick(event: MouseEvent) {
@@ -112,6 +121,7 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
         label ||
         hasSlotContent(slots['label'], { label }) ||
         error ||
+        hasSlotContent(slots['error'], { error }) ||
         description ||
         hasSlotContent(slots['description'], { description })
       "
@@ -135,12 +145,15 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
         </slot>
       </component>
 
-      <div
-        v-if="showErrorMessage"
-        v-bind="errorAttrs"
-        :data-test="getDataTest('error')"
-        v-text="error"
-      />
+      <div v-if="showErrorBlock" v-bind="errorAttrs" :data-test="getDataTest('error')">
+        <!--
+          @slot Use this to add custom content instead of the error message.
+          @binding {string | boolean} error
+        -->
+        <slot name="error" :error="error">
+          {{ errorFallbackText }}
+        </slot>
+      </div>
 
       <div
         v-if="
@@ -188,12 +201,15 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
       <slot />
     </div>
 
-    <div
-      v-if="showErrorMessage"
-      v-bind="errorAttrs"
-      :data-test="getDataTest('error')"
-      v-text="error"
-    />
+    <div v-if="showErrorBlock" v-bind="errorAttrs" :data-test="getDataTest('error')">
+      <!--
+        @slot Use this to add custom content instead of the error message.
+        @binding {string | boolean} error
+      -->
+      <slot name="error" :error="error">
+        {{ errorFallbackText }}
+      </slot>
+    </div>
 
     <div
       v-if="

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

@@ -111,6 +111,25 @@ describe("ULabel.vue", () => {
       expect(component.find("[vl-key='error']").exists()).toBe(false);
     });
 
+    it("Error – renders content from error slot", () => {
+      const slotContent = "Custom error from slot";
+      const defaultError = "Default error";
+
+      const component = mount(ULabel, {
+        props: {
+          error: defaultError,
+        },
+        slots: {
+          error: slotContent,
+        },
+      });
+
+      const errorElement = component.find("[vl-key='error']");
+
+      expect(errorElement.text()).toBe(slotContent);
+      expect(errorElement.text()).not.toContain(defaultError);
+    });
+
     it("Align – applies correct classes for align prop", () => {
       const alignCases = {
         top: "flex-col",

package/ui.form-radio/URadio.vue

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

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

@@ -224,6 +224,24 @@ describe("URadio.vue", () => {
       expect(descriptionElement.text()).toBe(customDescription);
     });
 
+    it("Error – renders custom content from error slot", () => {
+      const customError = "Custom error content";
+
+      const component = mount(URadio, {
+        props: {
+          error: "Default error message",
+        },
+        slots: {
+          error: customError,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const errorElement = labelComponent.find("[vl-child-key='error']");
+
+      expect(errorElement.text()).toBe(customError);
+    });
+
     it("Bottom – renders custom content from bottom slot", () => {
       const customBottomContent = "Custom Bottom Content";
 

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

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

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

@@ -322,6 +322,25 @@ describe("URadioGroup.vue", () => {
       expect(descriptionElement.text()).toBe(customDescription);
     });
 
+    it("Error – renders custom content from error slot", () => {
+      const customError = "Custom error content";
+
+      const component = mount(URadioGroup, {
+        props: {
+          error: "Default error message",
+          name: defaultName,
+        },
+        slots: {
+          error: customError,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const errorElement = labelComponent.find("[vl-child-key='error']");
+
+      expect(errorElement.text()).toBe(customError);
+    });
+
     it("Default slot – renders custom URadio components", () => {
       const component = mount(URadioGroup, {
         props: {

package/ui.form-select/USelect.vue

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

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

@@ -606,6 +606,25 @@ describe("USelect.vue", () => {
       expect(descriptionElement.text()).toBe(customDescription);
     });
 
+    it("Error – renders custom content from error slot", () => {
+      const customError = "Custom error content";
+
+      const component = mount(USelect, {
+        props: {
+          error: "Default error message",
+          options: defaultOptions,
+        },
+        slots: {
+          error: customError,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const errorElement = labelComponent.find("[vl-child-key='error']");
+
+      expect(errorElement.text()).toBe(customError);
+    });
+
     it("Left – renders custom content from left slot", () => {
       const slotContent = "Left Slot Content";
 

package/ui.form-textarea/UTextarea.vue

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

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

@@ -448,6 +448,24 @@ describe("UTextarea.vue", () => {
       expect(descriptionElement.text()).toBe(customDescription);
     });
 
+    it("Error – renders custom content from error slot", () => {
+      const customError = "Custom error content";
+
+      const component = mount(UTextarea, {
+        props: {
+          error: "Default error message",
+        },
+        slots: {
+          error: customError,
+        },
+      });
+
+      const labelComponent = component.getComponent(ULabel);
+      const errorElement = labelComponent.find("[vl-child-key='error']");
+
+      expect(errorElement.text()).toBe(customError);
+    });
+
     it("Left – renders custom content from left slot", () => {
       const slotText = "Custom Left Content";
       const testClass = "custom-left";