feat(Button): loading-auto (#2198)

playground/app/components/FormNestedExample.vue

@@ -35,8 +35,8 @@ function onError(event: any) {
     :state="state"
     :schema="schema"
     class="gap-4 flex flex-col w-60"
-    @submit="(event) => onSubmit(event)"
-    @error="(event) => onError(event)"
+    @submit="onSubmit"
+    @error="onError"
   >
     <UFormField label="Email" name="email">
       <UInput v-model="state.email" placeholder="john@lennon.com" />

playground/app/pages/components/button.vue

@@ -4,6 +4,10 @@ import theme from '#build/ui/button'
 
 const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
 const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
+
+function onClick() {
+  return new Promise<void>(res => setTimeout(res, 5000))
+}
 </script>
 
 <template>
@@ -23,7 +27,7 @@ const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme
       </UButton>
     </div>
     <div class="flex items-center gap-2">
-      <UButton loading>
+      <UButton loading-auto @click="onClick">
         Loading
       </UButton>
     </div>

playground/app/pages/components/form.vue

@@ -25,7 +25,7 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
         :state="state"
         :schema="schema"
         class="gap-4 flex flex-col w-60"
-        @submit="(event) => onSubmit(event)"
+        @submit="onSubmit"
       >
         <UFormField label="Email" name="email">
           <UInput v-model="state.email" placeholder="john@lennon.com" />
@@ -51,7 +51,7 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
         :schema="schema"
         class="gap-4 flex flex-col w-60"
         :validate-on-input-delay="2000"
-        @submit="(event) => onSubmit(event)"
+        @submit="onSubmit"
       >
         <UFormField label="Email" name="email">
           <UInput v-model="state2.email" placeholder="john@lennon.com" />