feat(Button): auto loading state

playground/app/pages/button.vue

@@ -3,11 +3,19 @@ import theme from '#build/ui/button'
 
 const sizes = Object.keys(theme.variants.size)
 const variants = Object.keys(theme.variants.variant)
+
+async function longOperation() {
+  await new Promise((res) => setTimeout(res, 2000))
+}
 </script>
 
 <template>
   <div class="flex flex-col gap-2">
     <div class="flex items-center gap-2">
+     <UButton class="font-bold" @click="longOperation()" loading-auto>
+        Button auto loading
+      </UButton>
+
       <UButton class="font-bold">
         Button
       </UButton>

playground/app/pages/form.vue

@@ -16,11 +16,40 @@ const state2 = reactive<Partial<Schema>>({})
 function onSubmit(event: FormSubmitEvent<Schema>) {
   console.log(event.data)
 }
+
+async function longSubmit(event: FormSubmitEvent<Schema>) {
+  await new Promise((res) => setTimeout(res, 2000))
+  console.log(event.data)
+}
 </script>
 
 <template>
   <div class="flex flex-col gap-4">
     <div class="flex gap-4">
+      <UForm
+        :state="state"
+        :schema="schema"
+        class="gap-4 flex flex-col w-60"
+        @submit="(event) => longSubmit(event)"
+      >
+        <UFormField label="Email" name="email">
+          <UInput v-model="state.email" placeholder="john@lennon.com" />
+        </UFormField>
+
+        <UFormField label="Password" name="password">
+          <UInput v-model="state.password" type="password" />
+        </UFormField>
+
+        <UFormField name="tos">
+          <UCheckbox v-model="state.tos" label="I accept the terms and conditions" />
+        </UFormField>
+
+        <div>
+          <UButton color="gray" type="submit" loading-auto>
+            Submit auto loading
+          </UButton>
+        </div>
+      </UForm>
       <UForm
         :state="state"
         :schema="schema"

src/runtime/components/Button.vue

@@ -22,6 +22,8 @@ export interface ButtonProps extends UseComponentIconsProps, Omit<LinkProps, 'ra
   /** Render the button full width. */
   block?: boolean
   class?: any
+  loadingAuto?: boolean
+  onClick?: (event: Event) => void | Promise<void>;
   ui?: Partial<typeof button.slots>
 }
 
@@ -33,7 +35,7 @@ export interface ButtonSlots {
 </script>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref, inject, type Ref } from 'vue'
 import { useForwardProps } from 'radix-vue'
 import { useComponentIcons, useButtonGroup } from '#imports'
 import { UIcon, ULink } from '#components'
@@ -45,23 +47,42 @@ const slots = defineSlots<ButtonSlots>()
 const linkProps = useForwardProps(pickLinkProps(props))
 
 const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
-const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(computed(() => {
+  return { ...props, loading: isLoading.value }
+}))
 
 const ui = computed(() => tv({ extend: button, slots: props.ui })({
   color: props.color,
   variant: props.variant,
   size: buttonSize.value,
-  loading: props.loading,
+  loading: isLoading.value,
   block: props.block,
   square: props.square || (!slots.default && !props.label),
   leading: isLeading.value,
   trailing: isTrailing.value,
   buttonGroup: orientation.value
 }))
+
+const loadingAutoState = ref(false)
+const formLoading = inject<Ref<boolean> | undefined>('form-loading', undefined)
+
+const isLoading = computed(() => {
+  console.log(props.loading || (props.loadingAuto && (loadingAutoState.value || (formLoading?.value && props.type === 'submit'))))
+  return props.loading || (props.loadingAuto && (loadingAutoState.value || (formLoading?.value && props.type === 'submit')))
+})
+
+async function onClickWrapper(event: Event) {
+  if (props.onClick) {
+  console.log('click', event)
+    loadingAutoState.value = true
+    await props.onClick(event)
+    loadingAutoState.value = false
+  }
+}
 </script>
 
 <template>
-  <ULink :type="type" :disabled="disabled || loading" :class="ui.base({ class: props.class })" v-bind="linkProps" raw>
+  <ULink :type="type" :disabled="disabled || isLoading" :class="ui.base({ class: props.class })" v-bind="linkProps" raw @click="onClickWrapper">
     <slot name="leading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon()" />
     </slot>

src/runtime/components/Form.vue

@@ -20,11 +20,11 @@ export interface FormProps<T extends object> {
   validateOn?: FormInputEvents[]
   disabled?: boolean
   validateOnInputDelay?: number
+  onSubmit: (payload: FormSubmitEvent<T>) => void | Promise<void>
   class?: any
 }
 
 export interface FormEmits<T extends object> {
-  (e: 'submit', payload: FormSubmitEvent<T>): void
   (e: 'error', payload: FormErrorEvent): void
 }
 
@@ -34,7 +34,7 @@ export interface FormSlots {
 </script>
 
 <script lang="ts" setup generic="T extends object">
-import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed } from 'vue'
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, readonly } from 'vue'
 import { useEventBus } from '@vueuse/core'
 import { getYupErrors, isYupSchema, getValibotError, isValibotSchema, getZodErrors, isZodSchema, getJoiErrors, isJoiSchema } from '../utils/form'
 
@@ -157,6 +157,9 @@ async function _validate(opts: { name?: string | string[], silent?: boolean, nes
   return props.state as T
 }
 
+const loading = ref(false)
+provide('form-loading', loading)
+
 async function onSubmit(payload: Event) {
   const event = payload as SubmitEvent
 
@@ -166,7 +169,11 @@ async function onSubmit(payload: Event) {
       ...event,
       data: props.state
     }
-    emits('submit', submitEvent)
+    if (props.onSubmit) {
+      loading.value = true
+      await props.onSubmit(submitEvent)
+      loading.value = false
+    }
   } catch (error) {
     if (!(error instanceof FormValidationException)) {
       throw error
@@ -185,6 +192,7 @@ async function onSubmit(payload: Event) {
 defineExpose<Form<T>>({
   validate: _validate,
   errors,
+  loading: readonly(loading),
 
   setErrors(errs: FormError[], name?: string) {
     if (name) {

src/runtime/types/form.ts

@@ -13,6 +13,7 @@ export interface Form<T> {
   getErrors (path?: string): FormError[]
   submit (): Promise<void>
   disabled: ComputedRef<boolean>
+  loading: Readonly<Ref<boolean>>
 }
 
 export type FormSchema<T extends Record<string, any>> =