</script>

<template>

<Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">

<div v-if="(icon || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description) || !!slots.header" :class="ui.header({ class: props.ui?.header })">

<Primitive :as="as" data-slot="root" :class="ui.root({ class: [props.ui?.root, props.class] })">

<div v-if="(icon || !!slots.leading) || (title || !!slots.title) || (description || !!slots.description) || !!slots.header" data-slot="header" :class="ui.header({ class: props.ui?.header })">

<slot name="header">

<div v-if="icon || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">

<div v-if="icon || !!slots.leading" data-slot="leading" :class="ui.leading({ class: props.ui?.leading })">

<slot name="leading" :ui="ui">

<UIcon v-if="icon" :name="icon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />

<UIcon v-if="icon" :name="icon" data-slot="leadingIcon" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />

</slot>

</div>

<div v-if="title || !!slots.title" :class="ui.title({ class: props.ui?.title })">

<div v-if="title || !!slots.title" data-slot="title" :class="ui.title({ class: props.ui?.title })">

<slot name="title">

{{ title }}

</slot>

</div>

<div v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">

<div v-if="description || !!slots.description" data-slot="description" :class="ui.description({ class: props.ui?.description })">

<slot name="description">

{{ description }}

</slot>

</div>

</slot>

</div>

<div :class="ui.body({ class: props.ui?.body })">

<div v-if="providers?.length || !!slots.providers" :class="ui.providers({ class: props.ui?.providers })">

<div data-slot="body" :class="ui.body({ class: props.ui?.body })">

<div v-if="providers?.length || !!slots.providers" data-slot="providers" :class="ui.providers({ class: props.ui?.providers })">

<slot name="providers">

<UButton

v-for="(provider, index) in providers"

<USeparator

v-if="providers?.length && fields?.length"

v-bind="typeof separator === 'object' ? separator : { label: separator }"

data-slot="separator"

:class="ui.separator({ class: props.ui?.separator })"

/>

:validate-on="validateOn"

:disabled="disabled"

:loading-auto="loadingAuto"

data-slot="form"

:class="ui.form({ class: props.ui?.form })"

v-bind="$attrs"

@submit="onSubmit"

<UCheckbox

v-if="field.type === 'checkbox'"

v-model="state[field.name]"

data-slot="checkbox"

:class="ui.checkbox({ class: props.ui?.checkbox })"

v-bind="(omitFieldProps(field))"

/>

<USelectMenu

v-else-if="field.type === 'select'"

v-model="state[field.name]"

data-slot="select"

:class="ui.select({ class: props.ui?.select })"

v-bind="(omitFieldProps(field) as AuthFormSelectField)"

/>

<UPinInput

v-else-if="field.type === 'otp'"

:id="field.name"

v-model="state[field.name]"

data-slot="otp"

:class="ui.otp({ class: props.ui?.otp })"

v-bind="(Object.assign({}, omitFieldProps(field), typeof (field as AuthFormOtpField).otp === 'object' ? (field as AuthFormOtpField).otp : {}) as any)"

otp

v-else-if="field.type === 'password'"

ref="passwordRef"

v-model="state[field.name]"

data-slot="password"

:class="ui.password({ class: props.ui?.password })"

v-bind="(omitFieldProps(field) as AuthFormInputField<'password'>)"

:type="passwordVisibility ? 'text' : 'password'"

<UInput

v-else

v-model="state[field.name]"

data-slot="input"

:class="ui.input({ class: props.ui?.input })"

v-bind="(omitFieldProps(field) as AuthFormInputField)"

/>

</UForm>

</div>

<div v-if="!!slots.footer" :class="ui.footer({ class: props.ui?.footer })">

<div v-if="!!slots.footer" data-slot="footer" :class="ui.footer({ class: props.ui?.footer })">

<slot name="footer" />

</div>

</Primitive>