La bibliothèque officielle du cœur de FormKit. Ce package est responsable de la plupart des fonctionnalités internes de FormKit. Vous pouvez lire la documentation spécifique sur son fonctionnement sur formkit.com.
Vous pouvez ajouter ce package en utilisant npm install @formkit/core ou yarn add @formkit/core.
L'objet Node de FormKit produit par createNode(). Chaque entrée <FormKit /> a 1 FormKitNode ("noeud central") associé à elle. Toutes les entrées, les formulaires et les groupes sont des instances de noeuds. Lisez-en plus sur les noeuds centraux dans la documentation d'architecture.
Ajoute un enfant à un noeud. Le noeud doit être un groupe ou une liste.
add: (node: FormKitNode, index?: number) => FormKitNode
Le FormKitNode ajouté.
L'adresse du noeud actuel à partir de la racine de l'arbre.
address: FormKitAddress
Une FormKitAddress.
Ajoute des props au noeud donné en les supprimant de node.props.attrs et en les déplaçant vers l'objet node.props de niveau supérieur.
addProps: (props: string[]) => FormKitNode
props — Un tableau de chaînes à ajouter comme clés pour les props.Le FormKitNode.
Obtient un noeud à une autre adresse. Les adresses sont des chemins de syntaxe pointée (ou des tableaux) de noms de noeuds. Par exemple : form.users.0.first_name. Il existe également quelques jetons de traversée "spéciaux" :
$root — Sélectionne le noeud racine.$parent — Sélectionne le noeud parent.$self — Sélectionne le noeud actuel.at: (address: FormKitAddress | string) => FormKitNode | undefined
address — Une chaîne valide ou une FormKitAddress.Le FormKitNode trouvé ou undefined.
Un tableau de noeuds enfants (groupes et listes).
children: Array<FormKitNode>
Un tableau de FormKitNode.
Efface les erreurs du noeud, et éventuellement tous les enfants.
clearErrors: (clearChildren?: boolean, sourceKey?: string) => FormKitNode
clearChildren optionnel — Si les enfants doivent être effacés.sourceKey optionnel — Une clé source à utiliser pour la réinitialisation.Le FormKitNode.
Un objet de FormKitConfig qui est partagé dans l'arbre -avec diverses options de configuration qui doivent être appliquées à l'ensemble de l'arbre.
config: FormKitConfig
Un FormKitConfig.
Définit le type de bibliothèque d'entrée actuel, y compris le type de nœud, le schéma et les propriétés.
define: (definition: FormKitTypeDefinition) => void
definition — Une FormKitTypeDefinition.Supprime le nœud du registre global, de son parent, et émet l'événement 'destroying'.
destroy: () => void
Effectue le rappel donné sur chacun des enfants du nœud donné.
each: (callback: FormKitChildCallback) => void
callback — Un FormKitChildCallback à appeler pour chaque enfant.Émet un événement à partir du nœud afin qu'il puisse être écouté par on.
emit: (event: string, payload?: any, bubble?: boolean, meta: Record<string, unknown>) => FormKitNode
event — Le nom de l'événement à émettre.payload optionnel — Une valeur à passer avec l'événement.bubble optionnel — Si l'événement doit remonter au parent.Le FormKitNode.
Étend un FormKitNode en ajoutant des propriétés arbitraires accessibles via node.{property}().
extend: (property: string, trap: FormKitTrap) => FormKitNode
property — La propriété à ajouter au nœud de base (node.{property}).trap — Un objet avec une propriété get et set.Le FormKitNode.
Dans un arbre donné, trouve un nœud correspondant à un sélecteur donné. Les sélecteurs peuvent être de simples chaînes de caractères ou une fonction.
find: (
selector: string,
searcher?: keyof FormKitNode | FormKitSearchFunction
) => FormKitNode | undefined
selector — Une chaîne de caractères sélecteur.searcher optionnel — Une clé de FormKitNode ou FormKitSearchFunction.Le FormKitNode trouvé ou undefined.
Ensemble de hooks.
hook: FormKitHooks
Les FormKitHooks.
L'index d'un nœud par rapport à ses frères et sœurs. Ceci n'est applicable que dans les cas où un nœud est un enfant d'une liste.
index: number
Un number.
La fonction utilisée pour définir la valeur d'un nœud. Toutes les modifications de la valeur d'un nœud doivent utiliser cette fonction car elle garantit que l'état de l'arbre est toujours entièrement suivi.
input: (value: unknown, async?: boolean) => Promise<unknown>
value — N'importe quelle valeur à utiliser pour le nœud.async optionnel — Si l'entrée doit se produire de manière asynchrone.Une Promise<unknown>.
Commence à false, passe à true lorsque la création du nœud est terminée.
isCreated: boolean
Un boolean.
Booléen reflétant l'état de règlement du nœud et de son sous-arbre.
isSettled: boolean
Un boolean.
Un registre de comptage pour les compteurs de messages arbitraires.
ledger: FormKitLedger
Un FormKitLedger.
Le nom de l'entrée dans l'arbre des nœuds. Lorsqu'un nœud est un enfant d'une liste, cela devient automatiquement son index.
name: string
Une string.
Supprime un écouteur d'événement par son jeton. Les reçus peuvent être partagés entre de nombreux écouteurs d'événements en déclarant explicitement la propriété "reçu" de la fonction d'écoute.
off: (receipt: string) => FormKitNode
receipt — Un reçu généré par la fonction on.Un reçu string.
Ajoute un écouteur d'événement pour un événement donné, et retourne un "reçu" qui est un jeton de chaîne aléatoire. Ce jeton doit être utilisé pour supprimer l'écouteur à l'avenir. Alternativement, vous pouvez attribuer une propriété "reçu" à la fonction d'écoute et ce reçu sera utilisé à la place. Cela permet à plusieurs écouteurs d'être tous désenregistrés avec un seul appel off() s'ils partagent le même reçu.
on: (eventName: string, listener: FormKitEventListener) => string
eventName — Le nom de l'événement à écouter.listener — Un FormKitEventListener à exécuter lorsque l'événement se produit.Une string de reçu.
Le parent d'un nœud.
parent: FormKitNode | null
Si trouvé un FormKitNode ou null.
Un objet de props proxied. Ceux-ci sont généralement fournis par l'adaptateur de choix.
props: Partial<FormKitProps>
Une liste optionnelle de FormKitProps.
Supprime un enfant du nœud.
remove: (node: FormKitNode) => FormKitNode
node — Un FormKitNode à supprimer.Le FormKitNode.
Réinitialise la valeur du nœud à sa valeur d'origine.
reset: () => FormKitNode
Le FormKitNode.
Récupère le nœud racine d'un arbre. Ceci est accompli via une traversée d'arbre à la demande, et ne devrait donc pas être utilisé dans des fonctions fréquemment appelées.
root: FormKitNode
Le FormKitNode.
Définit des erreurs sur l'entrée, et éventuellement sur les entrées enfants.
setErrors: (localErrors: ErrorMessages, childErrors?: ErrorMessages) => void
localErrors — Un ErrorMessages à utiliser.childErrors optionnel — Un ErrorMessages à utiliser pour les enfants.Une promesse qui se résout lorsqu'un nœud et toute sa sous-arborescence sont réglés. En d'autres termes — toutes les entrées ont terminé la validation de leurs valeurs.
settled: Promise<unknown>
Une Promise<unknown>.
Le magasin de nœuds interne.
store: FormKitStore
Un FormKitStore.
Déclenche un événement de soumission sur le formulaire le plus proche.
submit: () => void
Une fonction de texte ou de traduction qui expose une chaîne donnée au crochet "texte". Tout texte montré aux utilisateurs devrait être passé par cette fonction avant d'être affiché — surtout pour les auteurs de core et de plugins.
t: (key: string | FormKitTextFragment) => string
key — Une clé ou un FormKitTextFragment pour trouver la traduction.La string traduite.
Le type de nœud, ne devrait être que 'input', 'list', ou 'group'.
type: FormKitNodeType
Un FormKitNodeType.
Enregistre un nouveau plugin sur le nœud et son sous-arbre.
use: (
plugin: FormKitPlugin | FormKitPlugin[] | Set<FormKitPlugin>,
run?: boolean,
library?: boolean
) => FormKitNode
plugin — Un FormKitPlugin ou un tableau ou un ensemble de FormKitPlugin.run optionnel — Le plugin doit-il être exécuté à la création.library optionnel — La fonction de bibliothèque du plugin doit-elle être exécutée à la création.Le FormKitNode.
La valeur de l'entrée. Celle-ci ne devrait jamais être modifiée directement. Toutes les mutations souhaitées devraient être effectuées par input.
readonly value: unknown
Effectue une fonction sur chaque nœud de son sous-arbre (mais pas le nœud lui-même). C'est une opération coûteuse, elle devrait donc être effectuée très rarement et seulement lors d'événements de cycle de vie relativement rares comme le démarrage et l'arrêt.
walk: (callback: FormKitChildCallback, stopOnFalse?: boolean, recurseOnFalse?: boolean) => void
callback — Un FormKitChildCallback à exécuter pour chaque enfant.stopOnFalse optionnel — S'il faut s'arrêter lorsque le retour est faux.Effectue une recherche en largeur d'abord sur un sous-arbre de nœud et localise la première instance d'une correspondance.
bfs(tree: FormKitNode, searchValue: string | number, searchGoal?: keyof FormKitNode | FormKitSearchFunction): FormKitNode | undefined;
tree — Un FormKitNode à partir duquel commencer.searchValue — Une valeur à rechercher.searchGoal optionnel — Une valeur d'objectif.Un FormKitNode ou undefined.
Efface les erreurs sur le nœud et éventuellement ses enfants.
clearErrors(id: string, clearChildren?: boolean): void;
id — L'identifiant du nœud pour lequel vous souhaitez effacer les erreurs.clearChildren optionnel — Détermine si les enfants de ce nœud doivent avoir leurs erreurs effacées.Compile une chaîne logique comme "a != z || b == c" en une seule fonction. La valeur de retour est un objet avec une méthode "provide" qui itère sur tous les jetons de requête à utiliser comme remplacements.
compile(expr: string): FormKitCompilerOutput;
expr — Une chaîne à compiler.let name = {
value: 'jon'
}
const condition = compile("$name == 'bob'").provide((token) => {
return () => name.value // doit retourner une fonction !
})
condition() // false
Fonction qui produit une représentation d'objet standardisée des classes CSS.
createClasses(propertyKey: string, node: FormKitNode, sectionClassList?: FormKitClasses | string | Record<string, boolean>): Record<string, boolean>;
propertyKey — la clé de la section.node — Un FormKitNode.sectionClassList optionnel — Une string | Record<string, boolean> ou un FormKitClasses.Record<string, boolean>
Crée une nouvelle instance d'une option de configuration globale. Cet objet est essentiellement juste un objet FormKitOption, mais il peut être utilisé comme la racine pour le proxy de FormKitConfig et conserver l'émission d'événements.
createConfig(options?: Partial<FormKitConfig>): FormKitRootConfig;
options optionnel — Un objet de propriétés optionnelles de FormKitConfig.Crée un nouvel objet FormKitMessage.
createMessage(conf: Partial<FormKitMessage>, node?: FormKitNode): FormKitMessageProps;
conf — Un objet de propriétés optionnelles de FormKitMessage.node optionnel — Un FormKitNode.Crée une nouvelle instance d'un nœud FormKit. Les nœuds sont l'unité atomique d'un graphe FormKit.
createNode<V = unknown>(options?: FormKitOptions): FormKitNode<V>;
options optionnel — Un objet d'options FormKitOptions pour remplacer les valeurs par défaut.Un FormKitNode.
import { createNode } from '@formkit/core'
const input = createNode({
type: 'input', // par défaut à 'input' si non spécifié
value: 'bonjour monde du nœud',
})
console.log(input.value)
// 'bonjour monde du nœud'
Crée la valeur initiale pour un nœud en fonction des options passées et du type de l'entrée.
createValue(options: FormKitOptions): unknown;
options — Un FormKitOptions.unknown
Désenregistre un nœud du registre.
deregister(node: FormKitNode): void;
node — Un FormKitNode.Émet une erreur. Cela devrait généralement entraîner une exception.
error(code: number, data?: any): never;
code — Le code d'erreur entier.data optionnel — Généralement un objet d'informations à inclure.Combine plusieurs listes de classes en une seule liste.
generateClassList(node: FormKitNode, property: string, ...args: Record<string, boolean>[]): string | null;
node — Un FormKitNode.property — La clé de propriété à laquelle la liste de classes sera appliquée.args — Un tableau de Record<string, boolean> de liste(s) de classes CSS.string | null
Obtenez un nœud par un identifiant particulier.
getNode(id: string): FormKitNode | undefined;
id — Obtenez un nœud par un identifiant donné.Un FormKitNode ou undefined.
Type étroit qu'un nœud est un nœud DOM.
isComponent(node: string | Record<PropertyKey, any>): node is FormKitSchemaComponent;
node — Un nœud de schéma à vérifier.boolean
Détermine si un nœud est rendu conditionnellement ou non.
isConditional(node: FormKitSchemaNode): node is FormKitSchemaCondition;
isConditional(node: FormKitSchemaAttributesCondition | FormKitSchemaAttributes): node is FormKitSchemaAttributesCondition;
node — Un nœud de schéma à vérifier.boolean
Type étroit qu'un nœud est un nœud DOM.
isDOM(node: string | Record<PropertyKey, any>): node is FormKitSchemaDOMNode;
node — Un nœud de schéma à vérifierboolean
Un simple garde de type pour déterminer si le contexte évalué est de type liste.
isList(arg: FormKitContextShape): arg is FormKitListContext;
arg — Un FormKitContextShape.Retourne un boolean.
Détermine si un objet donné est un nœud.
isNode(node: any): node is FormKitNode;
node — N'importe quelle valeur.Retourne un boolean.
import { isNode, createNode } from '@formkit/core'
const input = createNode({
type: 'input', // par défaut à 'input' si non spécifié
value: 'hello node world',
})
const obj = {};
isNode(obj)
// false
isNode(input)
// true
Détermine si un nœud est un nœud de substitution.
isPlaceholder(node: FormKitNode | FormKitPlaceholderNode): node is FormKitPlaceholderNode;
node — Un FormKitNodeDétermine si le nœud est du sucre syntaxique ou non.
isSugar(node: FormKitSchemaNode): node is FormKitSchemaFormKit;
node — Un nœud de schéma à vérifier.boolean
Crée un dictionnaire basé sur le nom de tous les enfants dans un tableau.
names(children: FormKitNode[]): {
[index: string]: FormKitNode;
};
children — Un tableau de FormKitNode.Un dictionnaire de FormKitNode nommés.
Enregistre un nœud dans le registre si le nœud est un nœud racine, ou si le nœud a un alias node.props.alias explicite. Si ces deux conditions ne sont pas remplies, alors aucun nœud n'est enregistré (idempotent).
register(node: FormKitNode): void;
node — Un FormKitNode.Réinitialise une entrée à sa valeur "initiale". Si l'entrée est un groupe ou une liste, elle réinitialise également tous les enfants.
reset(id: string | FormKitNode, resetTo?: unknown): FormKitNode | undefined;
id — L'identifiant d'une entrée à réinitialiser.resetTo optionnel — Une valeur pour réinitialiser le nœud.Un FormKitNode ou undefined.
Réinitialise le nombre global d'enregistrements de nœuds, utile pour un nommage de nœud déterministe.
resetCount(): void;
Réinitialise l'ensemble du registre. Désenregistre tous les nœuds et supprime tous les écouteurs.
resetRegistry(): void;
Définit des erreurs sur un formulaire, un groupe ou une entrée.
setErrors(id: string, localErrors: ErrorMessages, childErrors?: ErrorMessages): void;
id — L'identifiant d'un formulaire.localErrors — Les erreurs à définir sur le formulaire ou les entrées du formulaire au format ErrorMessages.childErrors optionnel — (optionnel) Les erreurs à définir sur le formulaire ou les entrées du formulaire au format ErrorMessages.Soumet un formulaire FormKit de manière programmatique.
submitForm(id: string): void;
id — L'identifiant du formulaire.Convertit les nœuds de sucre syntaxique en nœuds standard.
sugar<T extends FormKitSchemaNode>(node: T): Exclude<FormKitSchemaNode, string | FormKitSchemaFormKit>;
node — Un nœud à convertir.Un FormKitSchemaNode sans les propriétés de FormKitSchemaFormKit.
Émet globalement un avertissement.
warn(code: number, data?: any): void;
code — Le code d'avertissement entier.data optionnel — Généralement un objet d'informations à inclure.Une façon de surveiller les changements dans le registre global.
watchRegistry(id: string, callback: FormKitEventListener): void;
id — Un id en syntaxe pointée où le nœud est situé.callback — Un callback au format de FormKitEventListener pour notifier quand le nœud est défini ou supprimé.Le type de callback pour node.each().
interface FormKitChildCallback {
(child: FormKitNode): any;
}
Une description d'une valeur enfant, généralement passée dans un arbre de nœuds.
interface FormKitChildValue {
from?: number | symbol;
name: string | number | symbol;
value: any;
}
Définition pour une fonction qui produit des classes CSS.
interface FormKitClasses {
(node: FormKitNode, sectionKey: string): string | Record<string, boolean>;
}
La sortie du compilateur, une fonction qui ajoute les tokens requis.
interface FormKitCompilerOutput {
(tokens?: Record<string, any>): boolean | number | string;
provide: FormKitCompilerProvider;
}
Options de configuration générales de type "app", celles-ci sont automatiquement héritées par tous les enfants - elles ne sont pas réactives.
interface FormKitConfig {
[index: string]: any;
classes?: Record<string, FormKitClasses | string | Record<string, boolean>>;
delimiter: string;
rootClasses: ((sectionKey: string, node: FormKitNode) => Record<string, boolean>) | false;
rootConfig?: FormKitRootConfig;
}
L'interface d'un objet de contexte de nœud FormKit. Un nœud FormKit est un proxy de cet objet.
interface FormKitContext {
_d: number;
_e: FormKitEventEmitter;
_resolve: ((value: unknown) => void) | false;
_tmo: number | false;
_value: unknown;
children: Array<FormKitNode | FormKitPlaceholderNode>;
config: FormKitConfig;
context?: FormKitFrameworkContext;
hook: FormKitHooks;
isCreated: boolean;
isSettled: boolean;
ledger: FormKitLedger;
name: string | symbol;
parent: FormKitNode | null;
plugins: Set<FormKitPlugin>;
props: Partial<FormKitProps>;
settled: Promise<unknown>;
store: FormKitStore;
sync: boolean;
traps: FormKitTraps;
type: FormKitNodeType;
uid: symbol;
value: unknown;
}
Définit la forme la plus basique d'un objet de contexte pour les gardes de type essayant de raisonner sur la valeur d'un contexte.
interface FormKitContextShape {
_value: unknown;
type: FormKitNodeType;
value: unknown;
}
L'objet compteur utilisé pour effectuer le comptage des instances dans un arbre.
interface FormKitCounter {
condition: FormKitCounterCondition;
count: number;
name: string;
node: FormKitNode;
promise: Promise<void>;
resolve: () => void;
}
Les compteurs de grand livre nécessitent une fonction de condition qui détermine si un message donné s'applique à lui ou non.
interface FormKitCounterCondition {
(message: FormKitMessage): boolean;
}
L'interface FormKitDispatcher est responsable de la création/exécution des "hooks".
interface FormKitDispatcher<T> {
(dispatchable: FormKitMiddleware<T>): number;
dispatch: (payload: T) => T;
remove: (dispatchable: FormKitMiddleware<T>) => void;
unshift: (dispatchable: FormKitMiddleware<T>) => number;
}
La structure interne d'un FormKitEvent.
interface FormKitEvent {
bubble: boolean;
meta?: Record<string, unknown>;
name: string;
origin: FormKitNode;
payload: any;
}
La définition de FormKitEventEmitter.
interface FormKitEventEmitter {
(node: FormKitNode, event: FormKitEvent): void;
flush: () => void;
off: (receipt: string) => void;
on: (eventName: string, listener: FormKitEventListener) => string;
pause: (node?: FormKitNode) => void;
play: (node?: FormKitNode) => void;
}
Définition des fonctions d'écoute d'événements.
interface FormKitEventListener {
(event: FormKitEvent): void;
receipt?: string;
}
Définit une fonction qui permet de remplacer sélectivement un schéma donné.
interface FormKitExtendableSchemaRoot {
(extensions: Record<string, Partial<FormKitSchemaNode> | FormKitSchemaCondition>): FormKitSchemaDefinition;
memoKey?: string;
}
Objet de contexte à être créé par et utilisé par chaque framework UI respectif. Aucune valeur n'est créée ou produite par FormKitCore, mais cette interface doit être suivie par chaque plugin respectif.
interface FormKitFrameworkContext<T = any> {
__root?: Document | ShadowRoot;
_value: T;
[index: string]: unknown;
attrs: Record<string, any>;
classes: Record<string, string>;
defaultMessagePlacement: boolean;
fns: Record<string, (...args: any[]) => any>;
handlers:{
blur: (e?: FocusEvent) => void;
touch: () => void;
DOMInput: (e: Event) => void;
}&Record<string, (...args: any[]) => void>;
help?: string;
id: string;
items: symbol[];
label?: string;
messages: Record<string, FormKitMessage>;
node: FormKitNode;
options?: Array<Record<string, any>&{
label: string;
value: any;
}>;
slots: Record<string, CallableFunction>;
state: FormKitFrameworkContextState;
type: string;
ui: Record<string, FormKitMessage>;
value: T;
}
L'état à l'intérieur du contexte de framework d'un nœud. Généralement utilisé pour suivre des choses comme les états flous et valides.
interface FormKitFrameworkContextState {
[index: string]: boolean;
blurred: boolean;
complete: boolean;
dirty: boolean;
errors: boolean;
rules: boolean;
settled: boolean;
submitted: boolean;
valid: boolean;
validationVisible: boolean;
}
Les entrées FormKit de type 'group' doivent avoir des valeurs clés par défaut.
interface FormKitGroupValue {
__init?: boolean;
[index: string]: unknown;
}
Décrit les données passant par les gestionnaires d'erreurs et d'avertissements.
interface FormKitHandlerPayload {
code: number;
data: any;
message?: string;
}
Les hooks disponibles pour les middlewares.
interface FormKitHooks {
classes: FormKitDispatcher<{
property: string;
classes: Record<string, boolean>;
}>;
commit: FormKitDispatcher<any>;
error: FormKitDispatcher<string>;
init: FormKitDispatcher<FormKitNode>;
input: FormKitDispatcher<any>;
message: FormKitDispatcher<FormKitMessage>;
prop: FormKitDispatcher<{
prop: string | symbol;
value: any;
}>;
schema: FormKitDispatcher<FormKitSchemaNode[] | FormKitSchemaCondition>;
setErrors: FormKitDispatcher<{
localErrors: ErrorMessages;
childErrors?: ErrorMessages;
}>;
submit: FormKitDispatcher<Record<string, any>>;
text: FormKitDispatcher<FormKitTextFragment>;
}
Un registre de messages d'entrée qui doivent être appliqués aux enfants du nœud auquel ils sont passés - où la clé de chaîne de l'objet est l'adresse du nœud pour appliquer les messages et la valeur est le message lui-même.
interface FormKitInputMessages {
[address: string]: FormKitMessage[];
}
Le grand livre FormKit, un service de comptage de messages à usage général fourni par le noyau FormKit pour compter les messages dans un arbre.
interface FormKitLedger {
count: (name: string, condition?: FormKitCounterCondition, increment?: number) => Promise<void>;
init: (node: FormKitNode) => void;
merge: (child: FormKitNode) => void;
settled: (name: string) => Promise<void>;
unmerge: (child: FormKitNode) => void;
value: (name: string) => number;
}
Une bibliothèque d'entrées, indexée par le nom du type.
interface FormKitLibrary {
[index: string]: FormKitTypeDefinition;
}
La définition la plus simple pour un contexte de type "liste".
interface FormKitListContext {
_value: FormKitListContextValue;
type:'list';
value: FormKitListContextValue;
}
Les messages peuvent avoir n'importe quelle métadonnée arbitraire attachée à eux.
interface FormKitMessageMeta {
[index: string]: any;
i18nArgs?: any[];
messageKey?: string;
}
La structure d'un message FormKitMessage de base. Ces messages sont utilisés pour stocker des informations sur l'état d'un nœud.
interface FormKitMessageProps {
blocking: boolean;
key: string;
meta: FormKitMessageMeta;
type: string;
value?: string | number | boolean;
visible: boolean;
}
Définit le magasin réel des messages.
interface FormKitMessageStore {
[index: string]: FormKitMessage;
}
Une interface vide pour ajouter des extensions de nœud FormKit.
interface FormKitNodeExtensions {
}
Un faux nœud qui est utilisé comme espace réservé dans le tableau de nœuds enfants lors de diverses manipulations de nœuds.
interface FormKitPlaceholderNode<V = unknown> {
__FKP: true;
_value: V;
input: (value: unknown, async?: boolean) => Promise<unknown>;
isSettled: boolean;
name: string;
type: FormKitNodeType;
uid: symbol;
use: (...args: any[]) => void;
value: V;
}
La définition de l'interface de base pour un FormKitPlugin. C'est juste une fonction qui accepte un argument de nœud.
interface FormKitPlugin {
(node: FormKitNode): false | any | void;
library?: (node: FormKitNode) => void;
}
Conditions imbriquées à l'intérieur des déclarations d'attributs.
interface FormKitSchemaAttributesCondition {
else?: FormKitAttributeValue;
if: string;
then: FormKitAttributeValue;
}
Définition pour une fonction qui peut étendre un nœud de schéma donné.
interface FormKitSchemaComposable {
(extendWith?: Partial<FormKitSchemaNode>, children?: string | FormKitSchemaNode[] | FormKitSchemaCondition, ...args: any[]): FormKitSchemaNode;
}
Le contexte qui est passé d'un rendu de schéma à l'autre.
interface FormKitSchemaContext {
__FK_SCP: Map<symbol, Record<string, any>>;
[index: string]: any;
}
Propriétés disponibles dans tous les nœuds de schéma.
interface FormKitSchemaProps {
bind?: string;
children?: string | FormKitSchemaNode[] | FormKitSchemaCondition;
for?: FormKitListStatement;
if?: string;
key?: string;
meta?: FormKitSchemaMeta;
}
Les pièges disponibles sur le magasin FormKit.
interface FormKitStoreTraps {
apply: (messages: Array<FormKitMessage> | FormKitInputMessages, clear?: MessageClearer) => void;
filter: (callback: (message: FormKitMessage) => boolean, type?: string) => FormKitStore;
reduce:<T>(reducer: (accumulator: T, message: FormKitMessage) => T, accumulator: T) => T;
release: () => void;
remove: (key: string) => FormKitStore;
set: (message: FormKitMessageProps) => FormKitStore;
touch: () => void;
}
La définition d'un FormKitTrap. Ceux-ci sont un peu comme des méthodes sur chaque FormKitNode. Ils sont toujours symétriques (get/set) — bien qu'il soit acceptable que l'un ou l'autre lance une exception.
interface FormKitTrap {
get: TrapGetter;
set: TrapSetter;
}
Des données arbitraires qui ont des propriétés. Pourrait être un POJO, pourrait être un tableau.
interface KeyedValue {
[index: number]: any;
[index: string]: any;
}
Messages enfant qui n'ont pas été immédiatement appliqués en raison de l'absence de l'enfant.
export type ChildMessageBuffer = Map<string, Array<[FormKitMessage[], MessageClearer | undefined]>>;
Messages d'erreur.
export type ErrorMessages = string | string[] | Record<string, string | string[]>;
Décrit le chemin vers un nœud particulier depuis le haut de l'arbre.
export type FormKitAddress = Array<string | number>;
Les types de valeurs possibles des attributs (dans le schéma).
export type FormKitAttributeValue = string | number | boolean | undefined | FormKitSchemaAttributes | FormKitSchemaAttributesCondition;
Une fonction qui accepte un rappel avec un jeton comme seul argument, et doit retourner une fonction qui fournit la vraie valeur du jeton.
export type FormKitCompilerProvider = (callback: (requirements: string[]) => Record<string, () => any>) => FormKitCompilerOutput;
Les entrées FormKit de type 'list' doivent avoir des valeurs de tableau par défaut.
export type FormKitListContextValue<T = any> = Array<T>;
Une instruction de boucle complète en syntaxe de tuple. Peut être lu comme "pour chaque valeur, clé? dans la liste".
export type FormKitListStatement = [value: any, key: number | string, list: FormKitListValue] | [value: any, list: FormKitListValue];
La valeur étant listée. Peut être un tableau, un objet ou un nombre.
export type FormKitListValue = string | Record<string, any> | Array<string | number | Record<string, any>> | number;
Un message FormKit est immuable, donc toutes les propriétés doivent être en lecture seule.
export type FormKitMessage = Readonly<FormKitMessageProps>;
Tous les FormKitMiddleware se conforment au modèle d'acceptation d'une charge utile et d'une fonction next(). Ils peuvent soit passer la charge utile au prochain middleware explicitement (comme argument de next), soit implicitement (pas d'argument pour next).
export type FormKitMiddleware<T = unknown> = (payload: T, next: (payload: T) => T) => T;
Ce sont les types de nœuds qui peuvent être créés. Ceux-ci sont différents du type d'entrées disponibles et décrivent plutôt leur but dans l'arbre.
export type FormKitNodeType = 'input' | 'list' | 'group';
Options qui peuvent être utilisées pour instancier un nouveau nœud via createNode().
export type FormKitOptions = Partial<Omit<FormKitContext, 'children' | 'plugins' | 'config' | 'hook'> & {
config: Partial<FormKitConfig>;
props: Partial<FormKitProps>;
children: FormKitNode[] | Set<FormKitNode>;
index?: number;
sync: boolean;
plugins: FormKitPlugin[];
alias: string;
schemaAlias: string;
}>;
Les "props" par instance côté utilisateur, qui sont généralement similaires aux props passées dans les composants sur le front end.
export type FormKitProps = {
__root?: Document | ShadowRoot;
delay: number;
id: string;
validationLabelStrategy?: (node?: FormKitNode) => string;
validationRules?: Record<string, (node: FormKitNode) => boolean | Promise<boolean>>;
validationMessages?: Record<string, ((ctx: {
name: string;
args: any[];
node: FormKitNode;
}) => string) | string>;
definition?: FormKitTypeDefinition;
context?: FormKitFrameworkContext;
[index: string]: any;
} & FormKitConfig;
Options de configuration globale.
export type FormKitRootConfig = Partial<FormKitConfig> & {
_add: (node: FormKitNode) => void;
_rm: (node: FormKitNode) => void;
};
Les attributs DOM sont de simples dictionnaires de chaînes.
export type FormKitSchemaAttributes = {
[index: string]: FormKitAttributeValue;
} | null | FormKitSchemaAttributesCondition;
Propriétés disponibles lors de la définition d'un composant non-FormKit générique.
export type FormKitSchemaComponent = {
$cmp: string;
props?: Record<string, any>;
} & FormKitSchemaProps;
Un nœud de schéma qui détermine quel contenu afficher.
export type FormKitSchemaCondition = {
if: string;
then: FormKitSchemaNode | FormKitSchemaNode[];
else?: FormKitSchemaNode | FormKitSchemaNode[];
};
Un objet de schéma entier ou un sous-arbre à partir de n'importe quel point d'entrée. Peut être un seul nœud, un tableau de nœuds, ou une condition. C'est le type qui est passé au constructeur FormKitSchema.
export type FormKitSchemaDefinition = FormKitSchemaNode | FormKitSchemaNode[] | FormKitSchemaCondition;
Propriétés disponibles lors de l'utilisation d'un nœud DOM.
export type FormKitSchemaDOMNode = {
$el: string | null;
attrs?: FormKitSchemaAttributes;
} & FormKitSchemaProps;
Sucre syntaxique pour un nœud FormKitSchemaComponent qui utilise FormKit.
export type FormKitSchemaFormKit = {
$formkit: string;
} & Record<string, any> & FormKitSchemaProps;
Les attributs Meta ne sont pas utilisés lors de l'analyse du schéma, mais peuvent être utilisés pour créer des outils.
export type FormKitSchemaMeta = {
[key: string]: string | number | boolean | undefined | null | CallableFunction | FormKitSchemaMeta;
};
Propriétés disponibles lors de la définition d'un nœud de schéma.
export type FormKitSchemaNode = FormKitSchemaDOMNode | FormKitSchemaComponent | FormKitSchemaTextNode | FormKitSchemaCondition | FormKitSchemaFormKit;
Un simple nœud de texte.
export type FormKitSchemaTextNode = string;
Les recherches en largeur et en profondeur peuvent utiliser un rappel de cette notation.
export type FormKitSearchFunction = (node: FormKitNode, searchTerm?: string | number) => boolean;
Le magasin de messages contient tous les messages qui se rapportent à un nœud donné.
export type FormKitStore = FormKitMessageStore & {
_n: FormKitNode;
_b: Array<[messages: FormKitMessage[], clear?: MessageClearer]>;
_m: ChildMessageBuffer;
_r?: string;
buffer: boolean;
} & FormKitStoreTraps;
Les fragments de texte sont de petits morceaux de texte utilisés pour des choses comme les messages de validation d'interface, ou les erreurs qui peuvent être exposées pour modification ou même traduction.
export type FormKitTextFragment = Partial<FormKitMessageProps> & {
key: string;
value: string;
type: string;
};
La signature de carte pour les pièges d'un nœud Map.
export type FormKitTraps = Map<string | symbol, FormKitTrap>;
Définition d'un élément de bibliothèque - lors de l'enregistrement d'un nouvel élément de bibliothèque, ce sont les propriétés requises et disponibles.
export type FormKitTypeDefinition = {
type: FormKitNodeType;
family?: string;
forceTypeProp?: string;
props?: string[];
schema?: FormKitExtendableSchemaRoot | FormKitSchemaNode[] | FormKitSchemaCondition;
component?: unknown;
library?: Record<string, unknown>;
features?: Array<(node: FormKitNode) => void>;
schemaMemoKey?: string;
};
Une chaîne ou une fonction qui permet d'effacer les messages.
export type MessageClearer = string | ((message: FormKitMessage) => boolean);
Signature pour l'un des pièges getter du nœud. Gardez à l'esprit que comme ce sont des pièges et non des méthodes de classe, leurs types de réponse sont déclarés explicitement dans l'interface FormKitNode.
export type TrapGetter = ((node: FormKitNode, context: FormKitContext, ...args: any[]) => unknown) | false;
La signature pour un piège setter d'un nœud - ces derniers sont plus rares que les pièges getter, mais peuvent être utiles pour bloquer l'accès à certaines propriétés de contexte ou modifier le comportement d'une affectation (ex. voir setParent).
export type TrapSetter = ((node: FormKitNode, context: FormKitContext, property: string | number | symbol, value: any) => boolean | never) | false;