vueless 0.0.781 → 0.0.783

package/package.json

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

package/ui.button-toggle/storybook/docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { Markdown, Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
 import { getSource } from "../../utils/storybook.ts";
 
 import * as stories from "./stories.ts";
@@ -12,5 +12,22 @@ import defaultConfig from "../config.ts?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
+## Option meta keys
+Keys you may/have to provide to the component in an option object.
+
+<Markdown>
+{`
+|  Key name         | Description                                     | Type                    |
+| ------------------| ----------------------------------------------- | ------------------------|
+| value             | Option value                                    | String, Number, Boolean |
+| label             | Option label                                    | String                  |
+| disabled          | Indicates if option is disabled                 | Boolean                 |
+| icon              | Icon name which appears instead of option label.| String                  |
+| leftIcon          | Option left icon name                           | String                  |
+| rightIcon         | Option right icon name                          | String                  |
+| onClick           | Option event handler                            | Function                |        
+`}
+</Markdown>
+
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.button-toggle/storybook/stories.ts

@@ -140,16 +140,16 @@ export const OptionSlot = DefaultTemplate.bind({});
 OptionSlot.args = {
   name: "optionSlot",
   options: [
-    { value: "1", label: "Download", rightIcon: "download", color: "green" },
-    { value: "2", label: "Edit", rightIcon: "edit_note", color: "orange" },
-    { value: "3", label: "Delete", rightIcon: "delete", color: "red" },
+    { value: "1", label: "Download", iconName: "download", color: "green" },
+    { value: "2", label: "Edit", iconName: "edit_note", color: "orange" },
+    { value: "3", label: "Delete", iconName: "delete", color: "red" },
   ],
   slotTemplate: `
     <template #option="{ label, index }">
       <UBadge
         :label="label"
         :color="args.options[index].color"
-        :right-icon="args.options[index].rightIcon"
+        :right-icon="args.options[index].iconName"
       />
     </template>
   `,

package/ui.data-table/storybook/docs.mdx

@@ -16,7 +16,7 @@ import defaultConfig from "../config.ts?raw"
 Each character in the table below can be used in `dateFormat` and `userDateFormat` / `userDateTimeFormat` options to achieve the format you need.
 
 ## Row meta keys
-Keys you have/may to provide to component in row object.
+Keys you have/may to provide to the component in row object.
 
 <Markdown>
 {`

package/ui.dropdown-list/storybook/docs.mdx

@@ -13,7 +13,7 @@ import defaultConfig from "../config.ts?raw"
 <Stories of={stories} />
 
 ## Option meta keys
-Keys you may/have to provide to component in an option object.
+Keys you may/have to provide to the component in an option object.
 
 <Markdown>
 {`

package/ui.form-checkbox/storybook/docs.mdx

@@ -13,7 +13,7 @@ import defaultConfig from "../config.ts?raw"
 <Stories of={stories} />
 
 ## Option meta keys
-Keys you may/have to provide to component in an option object.
+Keys you may/have to provide to the component in an option object.
 
 <Markdown>
 {`

package/ui.form-checkbox-group/storybook/docs.mdx

@@ -13,7 +13,7 @@ import defaultConfig from "../config.ts?raw"
 <Stories of={stories} />
 
 ## Option meta keys
-Full list of keys you may/have to provide to component in an option object can be found here: [UCheckbox docs](https://ui.vueless.com/?path=/docs/3100--docs).
+Full list of keys you may/have to provide to the component in an option object can be found here: <a href="https://ui.vueless.com/?path=/docs/3100--docs" target="_blank">UCheckbox docs</a>.
 
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

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.",

package/ui.form-select/storybook/docs.mdx

@@ -13,7 +13,7 @@ import defaultConfig from "../config.ts?raw"
 <Stories of={stories} />
 
 ## Option meta keys
-Full list of keys you may/have to provide to component in an option object can be found here: [UDropdownList docs](https://ui.vueless.com/?path=/docs/2050--docs).
+Full list of keys you may/have to provide to the component in an option object can be found here: <a href="https://ui.vueless.com/?path=/docs/2050--docs" target="_blank">UDropdownList docs</a>.
 
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />