A integração oficial do FormKit/Vue. Este pacote é responsável por integrar o Vue com o núcleo do FormKit e outros pacotes de primeira parte.
Cria uma nova entrada a partir do esquema ou um componente Vue com os recursos "padrão" do FormKit, como rótulos, texto de ajuda, mensagens de validação e suporte a classes.
createInput(schemaOrComponent: FormKitSchemaNode | FormKitSection | Component, definitionOptions?: Partial<FormKitTypeDefinition>): FormKitTypeDefinition;
schemaOrComponent — O esquema real da entrada ou o componente.definitionOptions opcional — Quaisquer opções no FormKitTypeDefinition que você deseja definir.defineFormKitConfig(config: DefaultConfigOptions | (() => DefaultConfigOptions)): () => DefaultConfigOptions;
configRegistra um callback para quando o SSR estiver completo. Não faz nada se não estiver em um contexto de servidor.
onSSRComplete(app: App<any> | undefined, callback: CallableFunction): void;
app — A aplicação Vue.callback — O callback a ser chamado após a conclusão do SSR.Executa todos os callbacks registrados com onSSRComplete para um determinado aplicativo.
ssrComplete(app: App<any>): void;
app — A aplicação Vue.useConfig(config?: FormKitOptions | ((...args: any[]) => FormKitOptions)): void;
config opcionalUm composable para criar um novo nó FormKit.
useInput<Props extends FormKitInputs<Props>, Context extends SetupContext<any, any>>(props: Props, context: Context, options?: FormKitOptions): FormKitNode;
propscontextoptions opcionalUma biblioteca de componentes disponíveis para o esquema (além dos registrados globalmente)
interface FormKitComponentLibrary {
[index: string]: Component;
}
Definição de tipo para o contexto do componente FormKit no Vue.
interface FormKitSetupContext<Props extends FormKitInputs<Props>> {
attrs: any;
emit: FormKitEvents<Props>;
expose(exposed:{
}): void;
props:{
}&Props;
slots: Slots<Props>;
}
interface FormKitSummaryMessage {
id: string;
key: string;
message: string;
type: string;
}
A instância global do plugin FormKit.
interface FormKitVuePlugin {
clearErrors: (formId: string) => void;
get: (id: string) => FormKitNode | undefined;
reset: (formId: string, resetTo?: unknown) => void;
setErrors: (formId: string, errors: string[] | Record<string, string | string[]>, inputErrors?: string[] | Record<string, string | string[]>) => void;
setLocale: (locale: string) => void;
submit: (formId: string) => void;
}
Configuração para plugins
interface PluginConfigs {
iconLoader: FormKitIconLoader;
iconLoaderUrl: FormKitIconLoaderUrl;
icons: Record<string, string | undefined>;
inputs: FormKitLibrary;
locale: string;
locales: FormKitLocaleRegistry;
messages: Record<string, Partial<FormKitLocale>>;
rules: Record<string, FormKitValidationRule>;
theme: string;
}
As opções permitidas para defaultConfig.
export type DefaultConfigOptions = FormKitOptions & Partial<PluginConfigs> & Record<string, unknown>;
A definição TypeScript para o componente FormKit.
export type FormKitComponent = <Props extends FormKitInputs<Props>>(props: Props & VNodeProps & AllowedComponentProps & ComponentCustomProps, context?: Pick<FormKitSetupContext<Props>, 'attrs' | 'emit' | 'slots'>, setup?: FormKitSetupContext<Props>) => VNode<RendererNode, RendererElement, {
[key: string]: any;
}> & {
__ctx?: FormKitSetupContext<Props>;
};
Os tipos de valores que podem ser renderizados pelo Vue.
export type Renderable = null | string | number | boolean | VirtualNode;
Uma lista de itens renderizáveis.
export type RenderableList = Renderable | Renderable[] | (Renderable | Renderable[])[];
Uma função de slot que pode ser renderizada.
export type RenderableSlot = (data?: Record<string, any>, key?: object) => RenderableList;
Um objeto de slots
export type RenderableSlots = Record<string, RenderableSlot>;
A definição de tipo para os slots do FormKit, isso não é destinado a ser usado diretamente.
export type Slots<Props extends FormKitInputs<Props>> = InputType<Props> extends keyof FormKitInputSlots<Props> ? FormKitInputSlots<Props>[InputType<Props>] : {};
A assinatura real de um VNode no Vue.
export type VirtualNode = VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;