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

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
 })