@formkit/inputs

Introduction

Le plugin officiel FormKit Inputs. Ce package contient le code source pour tous les types d'entrée HTML natifs. Lisez la documentation des entrées pour les instructions d'utilisation.

Aides

$attrs()

Applique des attributs à une section de schéma donnée en appliquant une fonction d'ordre supérieur qui fusionne un ensemble donné d'attributs dans le nœud.

Signature

$attrs(attrs: FormKitSchemaAttributes | (() => FormKitSchemaAttributes), section: FormKitSchemaExtendableSection): FormKitSchemaExtendableSection;

Paramètres

Retourne

FormKitSchemaExtendableSection

$extend()

Étend un nœud de schéma avec un ensemble donné d'extensions.

Signature

$extend(section: FormKitSchemaExtendableSection, extendWith: Partial<FormKitSchemaNode>): FormKitSchemaExtendableSection;

Paramètres

  • section — Une section à laquelle appliquer une extension.
  • extendWith — Un extrait de schéma partiel à appliquer à la section.

Retourne

FormKitSchemaExtendableSection

$for()

Applique une condition à une section de schéma donnée.

Signature

$for(varName: string, inName: string, section: FormKitSchemaExtendableSection): (extensions: Record<string, Partial<FormKitSchemaNode>>) => FormKitSchemaNode;

Paramètres

  • varName — Le nom de la variable qui contient l'instance actuelle.
  • inName — La variable sur laquelle nous itérons.
  • section — Une section à répéter.

Retourne

FormKitSchemaExtendableSection

$if()

Applique une condition à une section de schéma donnée.

Signature

$if(condition: string, then: FormKitSchemaExtendableSection, otherwise?: FormKitSchemaExtendableSection): FormKitSchemaExtendableSection;

Paramètres

  • condition — Une condition de schéma à appliquer à une section.
  • then — La section qui s'applique si la condition est vraie.
  • otherwise optionnel — (sinon) La section qui s'applique si la condition est fausse.

Retourne

FormKitSchemaExtendableSection

$root()

Crée une section racine du schéma.

Signature

$root(section: FormKitSchemaExtendableSection): FormKitExtendableSchemaRoot;

Paramètres

  • section — Une section à transformer en racine.

Retourne

FormKitSchemaExtendableSection

Fonctionnalités

checkboxes()

Une fonctionnalité qui ajoute le support de la sélection par cases à cocher.

Signature

checkboxes(node: FormKitNode): void;

Paramètres

defaultIcon()

Ajoute une définition de propriétés d'icône.

Signature

defaultIcon(sectionKey: string, defaultIcon: string): (node: FormKitNode) => void;

Paramètres

  • sectionKey — l'emplacement où l'icône doit être chargée.
  • defaultIcon — l'icône qui doit être chargée si une correspondance est trouvée dans le CSS de l'utilisateur.

Retourne

Un FormKitPlugin.

files()

Une fonctionnalité pour ajouter le support de la gestion des fichiers à une entrée.

Signature

files(node: FormKitNode): void;

Paramètres

initialValue()

Une fonctionnalité qui garantit que l'entrée a une propriété initialValue.

Signature

initialValue(node: FormKitNode): void;

Paramètres

localize()

Crée une nouvelle fonctionnalité qui génère un message de localisation de type ui pour utilisation sur un composant donné.

Signature

localize(key: string, value?: string): (node: FormKitNode) => void;

Paramètres

  • key — La clé du message.
  • value * facultatif * — La valeur du message.

Retourne

Un FormKitPlugin.

normalizeBoxes()

Une fonctionnalité qui normalise les types de boîtes (cases à cocher, radios).

Signature

normalizeBoxes(node: FormKitNode): FormKitMiddleware<{
    prop: string | symbol;
    value: any;
}>;

Paramètres

Retourne

Un FormKitMiddleware.

options()

Une fonctionnalité qui convertit la propriété options en valeurs utilisables, à utiliser par une fonctionnalité ou un plugin.

Signature

options(node: FormKitNode): void;

Paramètres

radios()

Une fonctionnalité pour vérifier si la valeur vérifiée est la valeur actuelle.

Signature

radios(node: FormKitNode): void;

Paramètres

Fonctions

casts()

Une fonctionnalité qui permet de convertir en nombres.

Signature

casts(node: FormKitNode): void;

Paramètres

createLibraryPlugin()

Crée un plugin basé sur une liste de FormKitLibrary.

Signature

createLibraryPlugin(...libraries: FormKitLibrary[]): FormKitPlugin;

Paramètres

Retourne

FormKitPlugin

createSection()

Crée une nouvelle section réutilisable.

Signature

createSection(section: string, el: string | null | (() => FormKitSchemaNode), fragment: true): FormKitSection<FormKitExtendableSchemaRoot>;
createSection(section: string, el: string | null | (() => FormKitSchemaNode)): FormKitSection<FormKitSchemaExtendableSection>;
createSection(section: string, el: string | (() => FormKitSchemaNode), fragment: false): FormKitSection<FormKitSchemaExtendableSection>;

Paramètres

  • section — Une seule section de schéma
  • el — L'élément ou une fonction qui retourne un nœud de schéma.
  • fragment

Retourne

Retourne un FormKitExtendableSchemaRoot ou un FormKitSchemaExtendableSection.

disables()

Une fonctionnalité qui permet de désactiver les enfants de ce nœud.

Signature

disables(node: FormKitNode): void;

Paramètres

eachSection()

Exécute un rappel sur chaque section d'un schéma. Si stopOnCallbackReturn est vrai et que le rappel retourne une valeur, la boucle s'arrêtera et retournera cette valeur.

Signature

eachSection<T>(schema: FormKitSchemaDefinition, callback: (section: FormKitSchemaComponent | FormKitSchemaDOMNode, schemaParent: FormKitSchemaNode[], schema: FormKitSchemaCondition) => T, stopOnCallbackReturn?: boolean, schemaParent?: FormKitSchemaNode[]): T | void;

Paramètres

  • schema — Un tableau FormKitSchemaNode.
  • callback — Un callback à exécuter sur chaque section.
  • stopOnCallbackReturn * facultatif * — Si vrai, la boucle s'arrêtera si le callback renvoie une valeur.
  • schemaParent * facultatif * — Le parent du nœud de schéma actuel.

Retourne

extendSchema()

Étend un seul nœud de schéma avec une extension. L'extension peut être n'importe quel nœud partiel, y compris les chaînes.

Signature

extendSchema(schema: FormKitSchemaNode, extension?: Partial<FormKitSchemaNode>): FormKitSchemaNode;

Paramètres

  • schema — Le nœud de schéma de base.
  • extension * facultatif * — Les valeurs à étendre sur le nœud de schéma de base.

Retourne

FormKitSchemaNode

findSection()

Trouve une section par nom dans un schéma.

Signature

findSection(schema: FormKitSchemaDefinition, target: string): [false, false] | [FormKitSchemaNode[] | false, FormKitSchemaCondition];

Paramètres

Retourne

un tuple du schéma et de la section ou un tuple de false et false si non trouvé.

form()

Une fonctionnalité pour ajouter un gestionnaire de soumission et une section d'actions.

Signature

form(node: FormKitNode): void;

Paramètres

ignore()

Une fonctionnalité qui applique ignore="true" par défaut.

Signature

ignore(node: FormKitNode): void;

Paramètres

isGroupOption()

Un helper pour déterminer si une option est un groupe ou une option.

Signature

isGroupOption(option: FormKitOptionsItem | FormKitOptionsGroupItem | FormKitOptionsGroupItemProp): option is FormKitOptionsGroupItem;

Paramètres

  • option — Une option

isSchemaObject()

Garde de type pour les objets de schéma.

Signature

isSchemaObject(schema: Partial<FormKitSchemaNode>): schema is FormKitSchemaDOMNode | FormKitSchemaComponent | FormKitSchemaFormKit;

Paramètres

  • schema — renvoie true si le nœud est un nœud de schéma mais pas une chaîne ou conditionnelle.

Retours

boolean

isSlotCondition()

Vérifie si le nœud de schéma actuel est une condition de slot.

Signature

isSlotCondition(node: FormKitSchemaNode): node is {
    if: string;
    then: string;
    else: FormKitSchemaNode | FormKitSchemaNode[];
};

Paramètres

Retours

boolean

Exemples

{
 if: '$slot.name',
 then: '$slot.name',
 else: []
} // ce nœud de schéma renverrait vrai.

normalizeOptions()

Une fonction pour normaliser un tableau d'objets, un tableau de chaînes de caractères, ou un objet de clés-valeurs pour utiliser un tableau d'objets avec des propriétés de valeur et d'étiquette.

Signature

normalizeOptions<T extends FormKitOptionsPropWithGroups>(options: T): T extends FormKitOptionsProp ? FormKitOptionsList : FormKitOptionsListWithGroups;

Paramètres

Retours

Une liste de FormKitOptionsList.

renamesRadios()

Renomme automatiquement toutes les entrées radio.

Signature

renamesRadios(node: FormKitNode): void;

Paramètres

  • node — Un nœud formkit.

Retours

select()

Convertit la propriété options en valeurs utilisables.

Signature

select(node: FormKitNode): void;

Paramètres

  • node — Un nœud formkit.

useSchema()

Crée un schéma d'entrée avec tout le schéma de base enveloppant.

Signature

useSchema(inputSection: FormKitSection): FormKitSchemaExtendableSection;

Paramètres

  • inputSection — Contenu à stocker dans la clé de section d'entrée.

Retours

FormKitExtendableSchemaRoot

TypeScript

FormKitBaseEvents

Événements d'entrée généraux disponibles pour toutes les entrées FormKit.

interface FormKitBaseEvents<Props extends FormKitInputs<Props>> {
    (event:'input', value: PropType<Props, 'value'>, node: FormKitNode): any;
    (event:'inputRaw', value: PropType<Props, 'value'>, node: FormKitNode): any;
    (event:'input-raw', value: PropType<Props, 'value'>, node: FormKitNode): any;
    (event:'update: modelValue', value: PropType<Props, 'value'>): any;
    (event:'update: model-value', value: PropType<Props, 'value'>): any;
    (event:'node', node: FormKitNode): any;
}

FormKitBaseProps

Props de base qui devraient être appliquées à toutes les entrées FormKit. Ce ne sont pas de véritables props d'exécution et sont extraites de l'objet context.attrs. Beaucoup de ces éléments sont simplement des attributs html qui sont transmis à l'élément d'entrée.

interface FormKitBaseProps {
    accept: string;
    action: string;
    actions:'true' | 'false' | boolean;
    dirtyBehavior:'touched' | 'compare';
    disabled:'true' | 'false' | boolean;
    enctype: string;
    help: string;
    ignore:'true' | 'false' | boolean;
    label: string;
    max: string | number;
    method: string;
    min: string | number;
    multiple:'true' | 'false' | boolean;
    placeholder: string;
    preserve:'true' | 'false' | boolean;
    preserveErrors:'true' | 'false' | boolean;
    step: string | number;
}

FormKitBaseSlots

Presque toutes les entrées dans FormKit ont un ensemble de slots "de base". C'est le "sandwich" autour de l'entrée elle-même, comme les wrappers, le texte d'aide, les messages d'erreur, etc. Plusieurs autres slots d'entrée étendent cette interface de base.

interface FormKitBaseSlots<Props extends FormKitInputs<Props>> {
    help: FormKitSlotData<Props>;
    inner: FormKitSlotData<Props>;
    input: FormKitSlotData<Props>;
    label: FormKitSlotData<Props>;
    message: FormKitSlotData<Props, {
        message: FormKitMessage;
    }>;
    messages: FormKitSlotData<Props>;
    outer: FormKitSlotData<Props>;
    prefix: FormKitSlotData<Props>;
    prefixIcon: FormKitSlotData<Props>;
    suffix: FormKitSlotData<Props>;
    suffixIcon: FormKitSlotData<Props>;
    wrapper: FormKitSlotData<Props>;
}

FormKitBoxSlots

Les slots disponibles pour les entrées radio et checkbox lorsque des options sont fournies.

interface FormKitBoxSlots<Props extends FormKitInputs<Props>> {
    box: FormKitSlotData<Props, OptionSlotData<Props>>;
    decorator: FormKitSlotData<Props, OptionSlotData<Props>>;
    decoratorIcon: FormKitSlotData<Props, OptionSlotData<Props>>;
    fieldset: FormKitSlotData<Props>;
    help: FormKitSlotData<Props>;
    icon: FormKitSlotData<Props, OptionSlotData<Props>>;
    inner: FormKitSlotData<Props, OptionSlotData<Props>>;
    input: FormKitSlotData<Props, OptionSlotData<Props>>;
    label: FormKitSlotData<Props, OptionSlotData<Props>>;
    legend: FormKitSlotData<Props>;
    message: FormKitSlotData<Props, {
        message: FormKitMessage;
    }>;
    messages: FormKitSlotData<Props>;
    option: FormKitSlotData<Props, OptionSlotData<Props>>;
    optionHelp: FormKitSlotData<Props, OptionSlotData<Props>>;
    options: FormKitSlotData<Props>;
    prefix: FormKitSlotData<Props, OptionSlotData<Props>>;
    suffix: FormKitSlotData<Props, OptionSlotData<Props>>;
    wrapper: FormKitSlotData<Props, OptionSlotData<Props>>;
}

FormKitConditionalProps

Ce sont des props qui sont utilisées comme conditionnelles dans une ou plusieurs entrées, et à ce titre, elles doivent être définies sur tous les types d'entrée. Celles-ci devraient toutes être définies explicitement comme "undefined" ici, puis définies comme leur type spécifique dans l'interface FormKitInputProps uniquement sur les entrées qui les utilisent.

interface FormKitConditionalProps {
    number: undefined;
    offValue: undefined;
    onValue: undefined;
    options: undefined;
}

FormKitEventsAsProps

Dans un monde parfait, cette interface ne serait pas du tout nécessaire. Cependant, Vue s'attend à ce que les interfaces soient définies comme des surcharges de méthodes. Malheureusement, comme notre interface d'événements utilise des génériques, UnionToIntersection n'est pas capable d'être utilisé, ce qui signifie que nous perdons des données d'événement si nous stockons les événements comme une interface standard avec des clés de propriété. La seule façon que nous avons trouvée pour obtenir de manière fiable que Volar (en juin 2023) reconnaisse correctement tous les événements définis est d'utiliser l'approche de surcharge de méthode "standard" (voir FormKitBaseEvents).

(En gros, nous ne pouvons pas utiliser les événements de cette interface pour produire automatiquement les FormKitBaseEvents sans que Volar ne perde des données d'événement)

Cela signifie que nous n'avons aucun moyen d'obtenir les noms d'événements de l'interface, donc nous ne pouvons pas les utiliser correctement dans nos props. Cela compte pour des choses comme le support TSX où les noms d'événements doivent être disponibles en tant que props onEventName.

Cette interface est utilisée pour combler manuellement cette lacune dans le système de type. Ces types devraient correspondre 1-1 avec les événements définis dans FormKitBaseEvents ainsi que FormKitInputEvents.

interface FormKitEventsAsProps {
    'onUpdate: modelValue': (value: unknown, node: FormKitNode) => any;
    onInput: (value: unknown, node: FormKitNode) => any;
    onInputRaw: (value: unknown, node: FormKitNode) => any;
    onNode: (node: FormKitNode) => any;
}

FormKitFile

Un seul objet de fichier dans la "FileList" synthétique de FormKit.

interface FormKitFile {
    file?: File;
    name: string;
}

FormKitFileSlots

Les slots disponibles pour l'entrée de fichier, celles-ci étendent les slots de base.

interface FormKitFileSlots<Props extends FormKitInputs<Props>> extends FormKitBaseSlots<Props> {
    fileItem: FormKitSlotData<Props>;
    fileItemIcon: FormKitSlotData<Props, {
        file: FormKitFile;
    }>;
    fileList: FormKitSlotData<Props>;
    fileName: FormKitSlotData<Props, {
        file: FormKitFile;
    }>;
    fileRemove: FormKitSlotData<Props, {
        file: FormKitFile;
    }>;
    fileRemoveIcon: FormKitSlotData<Props, {
        file: FormKitFile;
    }>;
    noFiles: FormKitSlotData<Props>;
}

FormKitInputEvents

Événements uniques émis par chaque entrée FormKit. La forme de cette interface est :

interface FormKitInputEvents<Props extends Inputs> {
  typeString: { customEvent: (value: PropType<Props, 'value'>) => any } // <-- Tous les événements uniques
}

Toutes les entrées hériteront également de tous les événements de FormKitBaseInputEvents.

interface FormKitInputEvents<Props extends FormKitInputs<Props>> {
    form:{
        (event:'submit-raw', e: Event, node: FormKitNode): any;
        (event:'submit-invalid', node: FormKitNode): any;
        (event:'submit', data: any, node: FormKitNode): any;
    };
}

FormKitInputEventsAsProps

Voir le commentaire tome sur pourquoi ce type est nécessaire.

interface FormKitInputEventsAsProps<Props extends FormKitInputs<Props>> {
    form:{
        onSubmitRaw: (e: Event, node: FormKitNode) => any;
        onSubmitInvalid: (node: FormKitNode) => any;
        onSubmit: (data: any, node: FormKitNode) => any;
    };
}

FormKitInputProps

Ceci est l'interface de base pour fournir des définitions de props au composant FormKit. Il est utilisé pour définir les props qui sont disponibles pour chaque composant de la bibliothèque FormKit en utilisant un type d'union discriminé. La structure de cette interface est :

interface FormKitInputProps {
 typeString: { type: 'string'; value?: string } // <-- Toutes les props uniques
}

Toutes les entrées hériteront également de toutes les props de FormKitBaseInputProps.

Note : Il est important que toutes les entrées fournissent une prop de type et de valeur.

interface FormKitInputProps<Props extends FormKitInputs<Props>> {
    _:{
        type?: Props['type']extendskeyofFormKitInputProps<Props>?never: Props['type'];
        value?: string;
    };
    button:{
        type:'button';
        value?: undefined;
    };
    checkbox:{
        type:'checkbox';
        options?: FormKitOptionsProp;
        onValue?: any;
        offValue?: any;
        value?: Props['options']extendsRecord<inferT, string>?T[]: Props['options']extendsFormKitOptionsItem[]?Array<Props['options'][number]['value']>: Props['options']extendsArray<inferT>?T[]: (Props['onValue']extendsAllReals?Props['onValue']: true) | (Props['offValue']extendsAllReals?Props['offValue']: false);
    };
    color:{
        type:'color';
        value?: string;
    };
    date:{
        type:'date';
        value?: string;
    };
    datetimeLocal:{
        type:'datetimeLocal';
        value?: string;
    };
    email:{
        type:'email';
        value?: string;
    };
    file:{
        type:'file';
        value?: FormKitFile[];
    };
    form:{
        type:'form';
        value?: FormKitGroupValue;
        actions?: boolean | string;
        submitAttrs?: Record<string, any>;
        submitBehavior?:'disabled' | 'live';
        incompleteMessage?: false | string;
    };
    group:{
        type:'group';
        value?: FormKitGroupValue;
    };
    hidden:{
        type:'hidden';
        value?: Props['number']extendsAllReals?number: string;
        number?:'integer' | 'float' | 'true' | true;
    };
    list:{
        type:'list';
        value?: unknown[];
        dynamic?: boolean | 'true' | 'false';
        sync?: boolean | 'true' | 'false';
    };
    meta:{
        type:'meta';
        value?: any;
    };
    month:{
        type:'month';
        value?: string;
    };
    number:{
        type:'number';
        value?: Props['number']extendsAllReals?number: string;
        number?:'integer' | 'float' | 'true' | true;
    };
    password:{
        type:'password';
        value?: string;
    };
    radio:{
        type:'radio';
        options: FormKitOptionsProp;
        value?: FormKitOptionsValue<Props['options']>;
    };
    range:{
        type:'range';
        value?: Props['number']extendsAllReals?number: string;
        number?:'integer' | 'float' | 'true' | true;
    };
    search:{
        type:'search';
        value?: Props['number']extendsAllReals?number | string: string;
        number?:'integer' | 'float' | 'true' | true;
    };
    select:{
        type:'select';
        options?: FormKitOptionsPropWithGroups;
        value?: FormKitOptionsValue<Props['options']>;
    };
    submit:{
        type:'submit';
        value?: string;
    };
    tel:{
        type:'tel';
        value?: Props['number']extendsAllReals?number | string: string;
        number?:'integer' | 'float' | 'true' | true;
    };
    text:{
        type:'text';
        value?: Props['number']extendsAllReals?number | string: string;
        number?:'integer' | 'float' | 'true' | true;
    };
    textarea:{
        type:'textarea';
        value?: string;
    };
    time:{
        type:'time';
        value?: string;
    };
    url:{
        type:'url';
        value?: string;
    };
    week:{
        type:'week';
        value?: string;
    };
}

FormKitInputSlots

Slots fournis par chaque entrée FormKit. La forme de cette interface est :

interface FormKitInputSlots<Props extends Inputs> {
  typeString: { default: (value: PropType<Props, 'value'>) => any } // <-- Tous les slots uniques
}

Il n'y a pas d'héritage automatique des slots — chaque slot doit être explicitement défini pour chaque entrée.

interface FormKitInputSlots<Props extends FormKitInputs<Props>> {
    'datetime-local': FormKitTextSlots<Props>;
    button: FormKitButtonSlots<Props>;
    checkbox: Props['options']extendsAllReals?FormKitBoxSlots<Props>: FormKitBaseSlots<Props>;
    color: FormKitTextSlots<Props>;
    date: FormKitTextSlots<Props>;
    email: FormKitTextSlots<Props>;
    file: FormKitFileSlots<Props>;
    form:{
        form: FormKitSlotData<Props>;
        default: FormKitSlotData<Props>;
        message: FormKitSlotData<Props, {
        message: FormKitMessage;
    }>;
        messages: FormKitSlotData<Props>;
        actions: FormKitSlotData<Props>;
        submit: FormKitSlotData<Props>;
    };
    group:{
        default: FormKitSlotData<Props>;
    };
    hidden:{
        input: FormKitSlotData<Props>;
    };
    list:{
        default: FormKitSlotData<Props>;
    };
    meta:{
        wrapper: FormKitSlotData<Props>;
    };
    month: FormKitTextSlots<Props>;
    number: FormKitTextSlots<Props>;
    password: FormKitTextSlots<Props>;
    radio: Props['options']extendsAllReals?FormKitBoxSlots<Props>: FormKitBaseSlots<Props>;
    range: FormKitTextSlots<Props>;
    search: FormKitTextSlots<Props>;
    select: FormKitSelectSlots<Props>;
    submit: FormKitButtonSlots<Props>;
    tel: FormKitTextSlots<Props>;
    text: FormKitTextSlots<Props>;
    textarea: FormKitTextSlots<Props>;
    time: FormKitTextSlots<Props>;
    url: FormKitTextSlots<Props>;
    week: FormKitTextSlots<Props>;
}

FormKitOptionsGroupItem

Les groupes d'options doivent toujours être formatés sous forme de tableau d'objets avec un groupe et des options imbriquées

interface FormKitOptionsGroupItem {
    attrs?: Record<string, any>;
    group: string;
    options: FormKitOptionsList;
}

FormKitOptionsGroupItemProp

Les groupes d'options doivent toujours être formatés sous forme de tableau d'objets avec un groupe et des options imbriquées

interface FormKitOptionsGroupItemProp {
    attrs?: Record<string, any>;
    group: string;
    options: FormKitOptionsProp;
}

FormKitOptionsItem

Les options doivent toujours être formatées sous forme de tableau d'objets avec des propriétés label et value.

interface FormKitOptionsItem<V = unknown> {
    __original?: any;
    [index: string]: any;
    attrs?:{
        disabled?: boolean;
    }&Record<string, any>;
    label: string;
    value: V;
}

FormKitOptionsPropExtensions

Permet de définir des extensions de prop en utilisant une interface dont les clés sont ignorées, mais les valeurs sont appliquées à un type d'union. Cela permet à tout code tiers d'étendre la prop options en utilisant l'augmentation de module pour ajouter de nouvelles valeurs au type d'union.

interface FormKitOptionsPropExtensions {
    arrayOfNumbers: number[];
    arrayOfStrings: string[];
    optionsList: FormKitOptionsList;
    valueLabelPojo: Record<string | number, string>;
}

FormKitRuntimeProps

Typages pour toutes les props de runtime intégrées.

Avertissement : Au moment de la rédaction, ceux-ci sont uniquement spécifiques aux exigences de prop de runtime de Vue et ne doivent pas être utilisés comme une sorte d'API externe car ils sont susceptibles de changer.

interface FormKitRuntimeProps<Props extends FormKitInputs<Props>> {
    classes: Record<string, string | Record<string, boolean> | FormKitClasses>;
    config: Record<string, any>;
    delay: number;
    errors: string[];
    id: string;
    index: number;
    inputErrors: Record<string, string[]>;
    modelValue: PropType<Props, 'value'>;
    name: string;
    parent: FormKitNode;
    plugins: FormKitPlugin[];
    sectionsSchema: Record<string, Partial<FormKitSchemaNode> | FormKitSchemaCondition>;
    sync: boolean | undefined;
    type: string | FormKitTypeDefinition;
    validation: string | Array<[rule: string, ...args: any]>;
    validationLabel: string | ((node: FormKitNode) => string);
    validationMessages: Record<string, string | ((ctx:{
        node: FormKitNode;
        name: string;
        args: any[];
    }) => string)>;
    validationRules: Record<string, (node: FormKitNode) => boolean | Promise<boolean>>;
}

FormKitSchemaExtendableSection

Une fonction qui est appelée avec un argument d'extensions et qui renvoie un nœud de schéma valide.

interface FormKitSchemaExtendableSection {
    _s?: string;
    (extensions: Record<string, Partial<FormKitSchemaNode>>): FormKitSchemaNode;
}

FormKitSection

Une fonction qui, lorsqu'elle est appelée, renvoie une fonction qui peut à son tour être appelée avec un paramètre d'extension.

interface FormKitSection<T = FormKitSchemaExtendableSection> {
    (...children: Array<FormKitSchemaExtendableSection | string | FormKitSchemaCondition>): T;
}

FormKitSelectSlots

Les emplacements disponibles pour l'entrée de sélection, ceux-ci étendent les emplacements de base.

interface FormKitSelectSlots<Props extends FormKitInputs<Props>> extends FormKitBaseSlots<Props> {
    default: FormKitSlotData<Props>;
    option: FormKitSlotData<Props, OptionSlotData<Props>>;
    selectIcon: FormKitSlotData<Props>;
}

FormKitSlotData

La forme de l'objet de contexte qui est passé à chaque emplacement.

interface FormKitSlotData<Props extends FormKitInputs<Props>, E extends Record<string, any> = {}> {
    (context: FormKitFrameworkContext<PropType<Props, 'value'>>&E): any;
}

FormKitTextSlots

Les emplacements disponibles pour l'entrée de texte FormKit, ceux-ci étendent les emplacements de base.

interface FormKitTextSlots<Props extends FormKitInputs<Props>> extends FormKitBaseSlots<Props> {
}

OptionSlotData

Les données disponibles pour les emplacements qui ont une option dans leur portée.

interface OptionSlotData<Props extends FormKitInputs<Props>> {
    option: FormKitOptionsItem<PropType<Props, 'value'>>;
}

AllReals

Une tentative de capturer toutes les valeurs non indéfinies. Ceci est utilisé pour définir divers conditionnels où indéfini n'est pas un type concret, mais toutes les autres valeurs doivent prendre une branche logique.

export type AllReals = number | string | boolean | CallableFunction | Array<any> | null | Record<any, any>;

FormKitButtonSlots

Les emplacements disponibles pour l'entrée du bouton, ceux-ci étendent les emplacements de base.

export type FormKitButtonSlots<Props extends FormKitInputs<Props>> = Omit<FormKitBaseSlots<Props>, 'inner'> & {
    default: FormKitSlotData<Props>;
};

FormKitEvents

Tous les événements FormKit devraient être inclus pour un ensemble donné de props.

export type FormKitEvents<Props extends FormKitInputs<Props>> = MergedEvents<Props>;

FormKitFileValue

Un "FileList" basé sur un tableau synthétique.

export type FormKitFileValue = FormKitFile[];

FormKitInputs

Toutes les entrées FormKit devraient être incluses pour ce type.

export type FormKitInputs<Props extends FormKitInputs<Props>> = MergedProps<Props>[keyof MergedProps<Props>];

FormKitInputSchema

Soit un nœud de schéma, soit une fonction qui renvoie un nœud de schéma.

export type FormKitInputSchema = ((children?: FormKitSchemaDefinition) => FormKitSchemaNode) | FormKitSchemaNode;

FormKitOptionsList

Un tableau d'éléments d'option.

export type FormKitOptionsList = FormKitOptionsItem[];

FormKitOptionsListWithGroups

Un tableau d'éléments d'option avec un groupe.

export type FormKitOptionsListWithGroups = Array<FormKitOptionsItem | FormKitOptionsGroupItem>;

FormKitOptionsListWithGroupsProp

Un tableau d'éléments d'option avec un support de groupe — où l'option des groupes peut être de n'importe quel type FormKitOptionsProp valide.

export type FormKitOptionsListWithGroupsProp = Array<FormKitOptionsItem | FormKitOptionsGroupItemProp>;

FormKitOptionsProp

Les types d'options qui peuvent être passés à la prop options.

export type FormKitOptionsProp = FormKitOptionsPropExtensions[keyof FormKitOptionsPropExtensions];

FormKitOptionsPropWithGroups

Les types d'options qui peuvent être passés à la prop options.

export type FormKitOptionsPropWithGroups = FormKitOptionsProp | FormKitOptionsListWithGroupsProp;

FormKitOptionsValue

La forme correcte des données à passer à la prop options.

export type FormKitOptionsValue<Options> = Options extends FormKitOptionsProp ? Options extends Record<infer T, string> ? T : Options extends FormKitOptionsItem[] ? Options[number]['value'] : Options extends Array<infer T> ? T : unknown : unknown;

InputType

Sélectionne le "type" à partir des props s'il existe, sinon il est par défaut à "text".

export type InputType<Props extends FormKitInputs<Props>> = Props['type'] extends string ? Props['type'] : 'text';

MergedEvents

Fusionne tous les événements en un seul type. Ceci est ensuite utilisé comme structure pour

export type MergedEvents<Props extends FormKitInputs<Props>> = InputType<Props> extends keyof FormKitInputEvents<Props> ? FormKitBaseEvents<Props> & FormKitInputEvents<Props>[InputType<Props>] : FormKitBaseEvents<Props>;

MergedProps

Une fusion des props d'entrée, des props de base et des props conditionnels. Ceci est ensuite utilisé comme structure pour le type FormKitInputs.

export type MergedProps<Props extends FormKitInputs<Props>> = {
    [K in keyof FormKitInputProps<Props>]: Omit<Partial<FormKitBaseProps>, keyof FormKitInputProps<Props>[K]> & Omit<Partial<FormKitRuntimeProps<Props>>, keyof FormKitInputProps<Props>[K]> & Omit<Partial<FormKitConditionalProps>, keyof FormKitInputProps<Props>[K]> & Partial<K extends keyof FormKitInputEventsAsProps<Props> ? Omit<FormKitEventsAsProps, keyof FormKitInputEventsAsProps<Props>[K]> & FormKitInputEventsAsProps<Props>[K] : FormKitEventsAsProps> & FormKitInputProps<Props>[K];
};

PropType

Extrait le type d'une prop donnée.

export type PropType<Props extends FormKitInputs<Props>, T extends keyof FormKitInputs<Props>> = Extract<FormKitInputs<Props>, {
    type: Props['type'] extends string ? Props['type'] : 'text';
}>[T];