L'intégration officielle de FormKit/Vue. Ce package est responsable de l'intégration de Vue avec le noyau FormKit et d'autres packages de première partie.
Crée une nouvelle entrée à partir d'un schéma ou d'un composant Vue avec les fonctionnalités "standard" de FormKit en place telles que les labels, le texte d'aide, les messages de validation et le support de classe.
createInput(schemaOrComponent: FormKitSchemaNode | FormKitSection | Component, definitionOptions?: Partial<FormKitTypeDefinition>): FormKitTypeDefinition;
schemaOrComponent — Le schéma réel de l'entrée ou le composant.definitionOptions optionnel — Toutes les options dans FormKitTypeDefinition que vous souhaitez définir.defineFormKitConfig(config: DefaultConfigOptions | (() => DefaultConfigOptions)): () => DefaultConfigOptions;
configEnregistre un rappel pour quand SSR est terminé. Aucune opération si ce n'est pas dans un contexte de serveur.
onSSRComplete(app: App<any> | undefined, callback: CallableFunction): void;
app — L'application Vue.callback — Le rappel à appeler après que SSR est terminé.Vide tous les rappels enregistrés avec onSSRComplete pour une application donnée.
ssrComplete(app: App<any>): void;
app — L'application Vue.useConfig(config?: FormKitOptions | ((...args: any[]) => FormKitOptions)): void;
config optionnelUn composable pour créer un nouveau nœud FormKit.
useInput<Props extends FormKitInputs<Props>, Context extends SetupContext<any, any>>(props: Props, context: Context, options?: FormKitOptions): FormKitNode;
propscontextoptions optionnelUne bibliothèque de composants disponibles pour le schéma (en plus de ceux enregistrés globalement)
interface FormKitComponentLibrary {
[index: string]: Component;
}
Définition de type pour le contexte du composant Vue FormKit.
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;
}
L'instance globale du 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;
}
Configuration pour les 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;
}
Les options autorisées pour defaultConfig.
export type DefaultConfigOptions = FormKitOptions & Partial<PluginConfigs> & Record<string, unknown>;
La définition TypeScript pour le composant 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>;
};
Les types de valeurs qui peuvent être rendus par Vue.
export type Renderable = null | string | number | boolean | VirtualNode;
Une liste d'éléments rendables.
export type RenderableList = Renderable | Renderable[] | (Renderable | Renderable[])[];
Une fonction d'emplacement qui peut être rendue.
export type RenderableSlot = (data?: Record<string, any>, key?: object) => RenderableList;
Un objet d'emplacements
export type RenderableSlots = Record<string, RenderableSlot>;
La définition de type pour les emplacements de FormKit, cela n'est pas destiné à être utilisé directement.
export type Slots<Props extends FormKitInputs<Props>> = InputType<Props> extends keyof FormKitInputSlots<Props> ? FormKitInputSlots<Props>[InputType<Props>] : {};
La signature réelle d'un VNode dans Vue.
export type VirtualNode = VNode<RendererNode, RendererElement, {
[key: string]: any;
}>;