@eslamdevui/ui
Version:
A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
86 lines (85 loc) • 3.39 kB
TypeScript
import theme from '#build/ui/auth-form';
import type { AppConfig } from '@nuxt/schema';
import type { ButtonProps, FormProps, FormFieldProps, FormSchema, FormSubmitEvent, SeparatorProps, ComponentConfig, PinInputProps } from '../types';
type AuthForm = ComponentConfig<typeof theme, AppConfig, 'authForm'>;
type AuthFormField = FormFieldProps & {
name: string;
type?: 'checkbox' | 'select' | 'password' | 'text' | 'otp';
defaultValue?: any;
otp?: PinInputProps;
};
export interface AuthFormProps<T extends FormSchema = FormSchema<object>, F extends AuthFormField = AuthFormField> {
/**
* The element or component this component should render as.
* @defaultValue 'div'
*/
as?: any;
/**
* The icon displayed above the title.
* @IconifyIcon
*/
icon?: string;
title?: string;
description?: string;
fields?: F[];
/**
* Display a list of Button under the description.
* `{ color: 'neutral', variant: 'subtle', block: true }`{lang="ts-type"}
*/
providers?: ButtonProps[];
/**
* The text displayed in the separator.
* @defaultValue 'or'
*/
separator?: string | SeparatorProps;
/**
* Display a submit button at the bottom of the form.
* `{ label: 'Continue', block: true }`{lang="ts-type"}
*/
submit?: ButtonProps;
schema?: T;
validate?: FormProps<T>['validate'];
validateOn?: FormProps<T>['validateOn'];
validateOnInputDelay?: FormProps<T>['validateOnInputDelay'];
disabled?: FormProps<T>['disabled'];
loading?: ButtonProps['loading'];
class?: any;
ui?: AuthForm['slots'];
}
export type AuthFormEmits<T extends object> = {
submit: [payload: FormSubmitEvent<T>];
};
type DynamicFieldSlots<T, F, SlotProps = {
field: F;
state: T;
}> = Record<string, (props: SlotProps) => any> & Record<`${keyof T extends string ? keyof T : never}-field`, (props: SlotProps) => any>;
type DynamicFormFieldSlots<T> = Record<string, (props?: {}) => any> & Record<`${keyof T extends string ? keyof T : never}-${'label' | 'description' | 'hint' | 'help' | 'error'}`, (props?: {}) => any>;
export type AuthFormSlots<T extends object = object, F extends AuthFormField = AuthFormField> = {
header(props?: {}): any;
leading(props?: {}): any;
title(props?: {}): any;
description(props?: {}): any;
providers(props?: {}): any;
validation(props?: {}): any;
submit(props: {
loading: boolean;
}): any;
footer(props?: {}): any;
} & DynamicFieldSlots<T, F> & DynamicFormFieldSlots<T>;
declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AuthFormProps<FormSchema<object>, AuthFormField>, {
formRef: Readonly<import("vue").ShallowRef<any>>;
state: Record<string, any>;
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
submit: (payload: FormSubmitEvent<any>) => any;
}, string, import("vue").PublicProps, Readonly<AuthFormProps<FormSchema<object>, AuthFormField>> & Readonly<{
onSubmit?: ((payload: FormSubmitEvent<any>) => any) | undefined;
}>, {
loading: boolean;
separator: string | SeparatorProps;
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AuthFormSlots<object, AuthFormField>>;
export default _default;
type __VLS_WithSlots<T, S> = T & {
new (): {
$slots: S;
};
};