vueless 0.0.781 → 0.0.782

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.781",
+  "version": "0.0.782",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

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

@@ -36,10 +36,10 @@ const emit = defineEmits([
   "update:modelValue",
 
   /**
-   * Triggers when the input has not passed validation.
+   * Triggers error changes.
    * @property {string} value
    */
-  "update:error",
+  "error",
 ]);
 
 const { tm } = useLocale();
@@ -47,6 +47,8 @@ const { tm } = useLocale();
 const dropZoneRef = ref<HTMLDivElement | null>(null);
 const fileInputRef = ref<HTMLInputElement | null>(null);
 
+const localError = ref("");
+
 const elementId = props.id || useId();
 
 const i18nGlobal = tm(COMPONENT_NAME);
@@ -61,10 +63,7 @@ const currentFiles = computed<File | File[] | null>({
   },
 });
 
-const currentError = computed({
-  get: () => props.error,
-  set: (newValue) => emit("update:error", newValue),
-});
+const currentError = computed(() => localError.value || props.error);
 
 const extensionNames = computed(() => {
   return props.allowedFileTypes.map((type) => type.replace(".", ""));
@@ -105,6 +104,7 @@ onBeforeUnmount(() => {
 });
 
 watch(() => props.multiple, normalizeFilesForMultipleMode);
+watch(currentError, () => emit("error", currentError.value));
 
 function normalizeFilesForMultipleMode() {
   if (!props.multiple) return;
@@ -131,13 +131,19 @@ function validate(file: File) {
 
   const isValidSize = Number(targetFileSize) <= props.maxFileSize;
 
-  if (!isValidSize && props.maxFileSize) {
-    currentError.value = currentLocale.value.sizeError;
+  if (!isValidType) {
+    localError.value = currentLocale.value.formatError;
+
+    return;
   }
 
-  if (!isValidType) {
-    currentError.value = currentLocale.value.formatError;
+  if (!isValidSize && props.maxFileSize) {
+    localError.value = currentLocale.value.sizeError;
+
+    return;
   }
+
+  localError.value = "";
 }
 
 function onChangeFile(event: Event) {
@@ -242,10 +248,18 @@ function onClickRemoveItem(id: string | number) {
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
-  error: Boolean(props.error),
+  error: Boolean(currentError.value),
   label: Boolean(props.label),
 }));
 
+defineExpose({
+  /**
+   * An error.
+   * @property {boolean}
+   */
+  error: currentError,
+});
+
 const {
   getDataTest,
   config,
@@ -260,6 +274,8 @@ const {
   inputAttrs,
   fileListAttrs,
   buttonsAttrs,
+  chooseFileButtonErrorAttrs,
+  clearButtonErrorAttrs,
 } = useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
@@ -268,7 +284,7 @@ const {
     :for="elementId"
     :size="size"
     :label="label"
-    :error="error"
+    :error="currentError"
     :align="labelAlign"
     :disabled="disabled"
     :description="description"
@@ -316,11 +332,10 @@ const {
               :for="elementId"
               tag="label"
               variant="thirdary"
-              :color="error ? 'red' : 'brand'"
               :right-icon="config.defaults.chooseFileIcon"
               :label="currentLocale.uploadFile"
               :disabled="disabled"
-              v-bind="chooseFileButtonAttrs"
+              v-bind="currentError ? chooseFileButtonErrorAttrs : chooseFileButtonAttrs"
               :data-test="getDataTest('upload')"
             />
 
@@ -343,9 +358,8 @@ const {
             filled
             variant="thirdary"
             :disabled="disabled"
-            :color="error ? 'red' : 'brand'"
             :left-icon="config.defaults.clearIcon"
-            v-bind="clearButtonAttrs"
+            v-bind="currentError ? clearButtonErrorAttrs : clearButtonAttrs"
             :data-test="getDataTest('clear')"
             @click="onClickResetFiles"
           />

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

@@ -65,6 +65,12 @@ export default /*tw*/ {
       },
     },
   },
+  chooseFileButtonError: {
+    base: "{>chooseFileButton}",
+    defaults: {
+      color: "red",
+    },
+  },
   clearButton: {
     base: "{UButton}",
     defaults: {
@@ -75,6 +81,12 @@ export default /*tw*/ {
       },
     },
   },
+  clearButtonError: {
+    base: "{>clearButton}",
+    defaults: {
+      color: "red",
+    },
+  },
   input: "sr-only",
   i18n: {
     sizeError: "File size is too big.",