vueless 0.0.745 → 0.0.747

package/composables/useUI.ts

@@ -130,8 +130,9 @@ export default function useUI<T>(
     const attrs = useAttrs() as KeyAttrs;
 
     const reactiveProps = computed(() => ({ ...props }));
+    const reactiveClass = computed(() => attrs.class);
 
-    watch([config, reactiveProps, classes], updateVuelessAttrs, { immediate: true });
+    watch([config, reactiveProps, classes, reactiveClass], updateVuelessAttrs, { immediate: true });
 
     /**
      * Updating Vueless attributes.

package/package.json

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

package/ui.form-input/storybook/stories.ts

@@ -1,4 +1,3 @@
-import { computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -43,15 +42,13 @@ const DefaultTemplate: StoryFn<UInputArgs> = (args: UInputArgs) => ({
   components: { UInput, UIcon },
   setup() {
     const slots = getSlotNames(UInput.__name);
-    const errorMessage = computed(() => (args.modelValue === "" ? args.error : ""));
 
-    return { args, slots, errorMessage };
+    return { args, slots };
   },
   template: `
     <UInput
       v-bind="args"
       v-model="args.modelValue"
-      :error="errorMessage"
       class="max-w-96"
     >
       ${args.slotTemplate || getSlotsFragment("")}
@@ -129,7 +126,7 @@ export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Provide additional details if necessary." };
 
 export const Error = DefaultTemplate.bind({});
-Error.args = { error: "This field is required. Please enter a value." };
+Error.args = { error: "This field is required. Please enter a value.", modelValue: "" };
 
 export const Readonly = DefaultTemplate.bind({});
 Readonly.args = {

package/ui.form-input-money/storybook/stories.ts

@@ -1,4 +1,3 @@
-import { computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -43,15 +42,13 @@ const DefaultTemplate: StoryFn<UInputMoneyArgs> = (args: UInputMoneyArgs) => ({
   components: { UInputMoney, UIcon, UButton },
   setup() {
     const slots = getSlotNames(UInputMoney.__name);
-    const errorMessage = computed(() => (Number(args.modelValue) > 0 ? "" : args.error));
 
-    return { args, slots, errorMessage };
+    return { args, slots };
   },
   template: `
     <UInputMoney
       v-bind="args"
       v-model="args.modelValue"
-      :error="errorMessage"
       class="max-w-96"
     >
       ${args.slotTemplate || getSlotsFragment("")}

package/ui.form-input-search/storybook/stories.ts

@@ -1,4 +1,3 @@
-import { computed } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -43,15 +42,13 @@ const DefaultTemplate: StoryFn<UInputSearchArgs> = (args: UInputSearchArgs) => (
   components: { UInputSearch, UButton, UIcon },
   setup() {
     const slots = getSlotNames(UInputSearch.__name);
-    const errorMessage = computed(() => (args.modelValue === "" ? args.error : ""));
 
-    return { args, slots, errorMessage };
+    return { args, slots };
   },
   template: `
     <UInputSearch
       v-bind="args"
       v-model="args.modelValue"
-      :error="errorMessage"
       class="max-w-96"
     >
       ${args.slotTemplate || getSlotsFragment("")}
@@ -104,7 +101,7 @@ export const Description = DefaultTemplate.bind({});
 Description.args = { description: "Search for additional details." };
 
 export const Error = DefaultTemplate.bind({});
-Error.args = { error: "This field is required. Please enter a value." };
+Error.args = { error: "This field is required. Please enter a value.", modelValue: "" };
 
 export const Disabled = DefaultTemplate.bind({});
 Disabled.args = { disabled: true };

package/ui.form-select/storybook/stories.ts

@@ -1,4 +1,4 @@
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -64,16 +64,14 @@ const DefaultTemplate: StoryFn<USelectArgs> = (args: USelectArgs) => ({
     }
 
     const slots = getSlotNames(USelect.__name);
-    const errorMessage = computed(() => (!args.modelValue ? args.error : ""));
     const showAlert = (message: string) => alert(message);
 
-    return { args, slots, getSelectedBadge, errorMessage, showAlert };
+    return { args, slots, getSelectedBadge, showAlert };
   },
   template: `
     <USelect
       v-bind="args"
       v-model="args.modelValue"
-      :error="errorMessage"
       class="max-w-96"
       @add="showAlert('You triggered the add action!')"
     >

package/ui.form-textarea/storybook/stories.ts

@@ -1,4 +1,4 @@
-import { ref, computed } from "vue";
+import { ref } from "vue";
 import {
   getArgTypes,
   getSlotNames,
@@ -44,15 +44,13 @@ const DefaultTemplate: StoryFn<UTextareaArgs> = (args: UTextareaArgs) => ({
   components: { UTextarea, UIcon },
   setup() {
     const slots = getSlotNames(UTextarea.__name);
-    const errorMessage = computed(() => (args.modelValue === "" ? args.error : ""));
 
-    return { args, slots, errorMessage };
+    return { args, slots };
   },
   template: `
     <UTextarea
       v-bind="args"
       v-model="args.modelValue"
-      :error="errorMessage"
       class="max-w-96"
     >
       ${args.slotTemplate || getSlotsFragment("")}