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

docs/app/components/content/examples/button/ButtonLoadingAutoExample.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+async function onClick() {
+  return new Promise<void>(res => setTimeout(res, 1000))
+}
+</script>
+
+<template>
+  <UButton loading-auto @click="onClick">
+    Button
+  </UButton>
+</template>

docs/app/components/content/examples/button/ButtonLoadingAutoFormExample.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+const state = reactive({ fullName: '' })
+
+async function onSubmit() {
+  return new Promise<void>(res => setTimeout(res, 1000))
+}
+
+async function validate(data: Partial<typeof state>) {
+  if (!data.fullName?.length) return [{ name: 'fullName', message: 'Required' }]
+  return []
+}
+</script>
+
+<template>
+  <UForm :state="state" :validate="validate" @submit="onSubmit">
+    <UFormField name="fullName" label="Full name">
+      <UInput v-model="state.fullName" />
+    </UFormField>
+    <UButton type="submit" class="mt-2" loading-auto>
+      Submit
+    </UButton>
+  </UForm>
+</template>

docs/app/components/content/examples/form/FormExampleElements.vue

@@ -103,11 +103,11 @@ async function onSubmit(event: FormSubmitEvent<any>) {
     </div>
 
     <div class="flex gap-2 mt-8">
-      <UButton color="gray" type="submit" :disabled="form?.disabled">
+      <UButton color="gray" type="submit">
         Submit
       </UButton>
 
-      <UButton color="gray" variant="outline" :disabled="form?.disabled" @click="form?.clear()">
+      <UButton color="gray" variant="outline" @click="form?.clear()">
         Clear
       </UButton>
     </div>

docs/app/components/content/examples/form/FormExampleNested.vue

@@ -29,7 +29,7 @@ async function onSubmit(event: FormSubmitEvent<any>) {
     :state="state"
     :schema="schema"
     class="gap-4 flex flex-col w-60"
-    @submit="(event) => onSubmit(event)"
+    @submit="onSubmit"
   >
     <UFormField label="Name" name="name">
       <UInput v-model="state.name" placeholder="John Lennon" />

docs/app/components/content/examples/form/FormExampleOnError.vue

@@ -20,9 +20,11 @@ async function onSubmit(event: FormSubmitEvent<any>) {
 }
 
 async function onError(event: FormErrorEvent) {
-  const element = document.getElementById(event.errors[0].id)
-  element?.focus()
-  element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  if (event?.errors?.[0]?.id) {
+    const element = document.getElementById(event.errors[0].id)
+    element?.focus()
+    element?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+  }
 }
 </script>
 

docs/app/components/content/examples/form/FormExampleZod.vue

@@ -9,7 +9,7 @@ const schema = z.object({
 
 type Schema = z.output<typeof schema>
 
-const state = reactive({
+const state = reactive<Partial<Schema>>({
   email: undefined,
   password: undefined
 })