vueless 1.4.6-beta.1 → 1.4.6

package/icons/internal/home.svg

@@ -1 +0,0 @@
-<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

@@ -1 +0,0 @@
-<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-beta.1",
+  "version": "1.4.6",
   "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,14 +173,6 @@ 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,24 +302,6 @@ 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,14 +104,6 @@ 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,24 +307,6 @@ 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,14 +312,6 @@ 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,25 +496,6 @@ 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,14 +647,6 @@ 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,26 +604,6 @@ 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,14 +298,6 @@ 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,24 +359,6 @@ 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,14 +321,6 @@ 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,24 +310,6 @@ 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,14 +187,6 @@ 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,24 +431,6 @@ 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,14 +133,6 @@ 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,23 +318,5 @@ 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,14 +152,6 @@ 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,24 +320,6 @@ 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,17 +55,8 @@ const hasErrorState = computed(() => {
   return Boolean(props.error) && !props.disabled;
 });
 
-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))
-  );
+const showErrorMessage = computed(() => {
+  return hasErrorState.value && typeof props.error !== "boolean";
 });
 
 function onClick(event: MouseEvent) {
@@ -121,7 +112,6 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
         label ||
         hasSlotContent(slots['label'], { label }) ||
         error ||
-        hasSlotContent(slots['error'], { error }) ||
         description ||
         hasSlotContent(slots['description'], { description })
       "
@@ -145,15 +135,12 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
         </slot>
       </component>
 
-      <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="showErrorMessage"
+        v-bind="errorAttrs"
+        :data-test="getDataTest('error')"
+        v-text="error"
+      />
 
       <div
         v-if="
@@ -201,15 +188,12 @@ const { getDataTest, wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs, e
       <slot />
     </div>
 
-    <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="showErrorMessage"
+      v-bind="errorAttrs"
+      :data-test="getDataTest('error')"
+      v-text="error"
+    />
 
     <div
       v-if="

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

@@ -111,25 +111,6 @@ 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,14 +132,6 @@ 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,24 +224,6 @@ 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,14 +87,6 @@ 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,25 +322,6 @@ 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,14 +546,6 @@ 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,25 +606,6 @@ 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,14 +258,6 @@ 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,24 +448,6 @@ 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";