@formkit/inputs

简介

官方的 FormKit Inputs 插件。此包含有所有原生 HTML 输入类型的源代码。阅读 inputs 文档 以获取使用说明。

辅助工具

$attrs()

通过应用一个将给定属性集合合并到节点中的高阶函数,将属性应用到给定的模式部分。

签名

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

参数

返回

FormKitSchemaExtendableSection

$extend()

使用给定的扩展集合扩展模式节点。

签名

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

参数

  • section — 要应用扩展的部分。
  • extendWith — 要应用到部分的部分模式片段。

返回

FormKitSchemaExtendableSection

$for()

将条件应用到给定的模式部分。

签名

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

参数

  • varName — 持有当前实例的变量的名称。
  • inName — 我们正在迭代的变量。
  • section — 要重复的部分。

返回

FormKitSchemaExtendableSection

$if()

将条件应用到给定的模式部分。

签名

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

参数

  • condition — 要应用到部分的模式条件。
  • then — 如果条件为真,则应用的部分。
  • otherwise 可选 — (否则) 如果条件为假,则应用的部分。

返回

FormKitSchemaExtendableSection

$root()

创建一个根模式部分。

签名

$root(section: FormKitSchemaExtendableSection): FormKitExtendableSchemaRoot;

参数

  • section — 一个要从中创建根的部分。

返回

FormKitSchemaExtendableSection

特性

checkboxes()

添加复选框选择支持的特性。

签名

checkboxes(node: FormKitNode): void;

参数

defaultIcon()

添加图标属性定义。

签名

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

参数

  • sectionKey — 应加载图标的位置。
  • defaultIcon — 如果在用户的 CSS 中找到匹配项,则应加载的图标。

返回

一个 FormKitPlugin

files()

添加文件处理支持到输入的特性。

签名

files(node: FormKitNode): void;

参数

initialValue()

确保输入具有 initialValue 属性的特性。

签名

initialValue(node: FormKitNode): void;

参数

localize()

创建一个新特性,生成用于在给定组件上使用的类型为 ui 的本地化消息。

签名

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

参数

  • key — 消息的键。
  • value * 可选 * — 消息的值。

返回

一个 FormKitPlugin

normalizeBoxes()

标准化框类型(复选框,单选框)的特性。

签名

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

参数

返回

一个 FormKitMiddleware

options()

将选项属性转换为可用值的特性,供特性或插件使用。

签名

options(node: FormKitNode): void;

参数

radios()

一个检查正在检查的值是否为当前值的功能。

签名

radios(node: FormKitNode): void;

参数

函数

casts()

一个允许转换为数字的功能。

签名

casts(node: FormKitNode): void;

参数

createLibraryPlugin()

基于 FormKitLibrary 列表创建插件。

签名

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

参数

返回

FormKitPlugin

createSection()

创建一个新的可重用部分。

签名

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>;

参数

  • section — schema的一个单独部分
  • el — 元素或返回schema节点的函数。
  • fragment

返回

返回 FormKitExtendableSchemaRootFormKitSchemaExtendableSection

disables()

一个允许禁用此节点的子节点的功能。

签名

disables(node: FormKitNode): void;

参数

eachSection()

在schema的每个部分上运行回调。如果stopOnCallbackReturn为true并且回调返回一个值,循环将停止并返回该值。

签名

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

参数

  • schema — 一个 FormKitSchemaNode 数组。
  • callback — 在每个部分上运行的回调。
  • stopOnCallbackReturn * 可选 * — 如果为真,如果回调返回一个值,循环将停止。
  • schemaParent * 可选 * — 当前 schema 节点的父节点。

返回

extendSchema()

使用扩展来扩展单个 schema 节点。扩展可以是任何部分节点,包括字符串。

签名

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

参数

  • schema — 基础 schema 节点。
  • extension * 可选 * — 要在基础 schema 节点上扩展的值。

返回

FormKitSchemaNode

findSection()

在 schema 中按名称查找部分。

签名

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

参数

返回

schema 和部分的元组,或者如果未找到,则返回 falsefalse 的元组。

form()

一个添加提交处理程序和操作部分的功能。

签名

form(node: FormKitNode): void;

参数

ignore()

一个默认应用 ignore="true" 的功能。

签名

ignore(node: FormKitNode): void;

参数

isGroupOption()

一个判断选项是组还是选项的助手。

签名

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

参数

  • option — 一个选项

isSchemaObject()

schema 对象的类型保护。

签名

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

参数

  • schema — 如果节点是 schema 节点但不是字符串或条件,则返回 true

返回

布尔值

isSlotCondition()

检查当前的 schema 节点是否为插槽条件。

签名

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

参数

返回

布尔值

示例

{
 if: '$slot.name',
 then: '$slot.name',
 else: []
} // 这个 schema 节点将返回 true。

normalizeOptions()

一个函数,用于将对象数组、字符串数组或键值对对象标准化为带有值和标签属性的对象数组。

签名

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

参数

返回

一个 FormKitOptionsList 列表。

renamesRadios()

自动重命名任何单选输入。

签名

renamesRadios(node: FormKitNode): void;

参数

  • node — 一个 formkit 节点。

返回

select()

将 options prop 转换为可用的值。

签名

select(node: FormKitNode): void;

参数

  • node — 一个 formkit 节点。

useSchema()

创建一个包含所有包装基础 schema 的输入 schema。

签名

useSchema(inputSection: FormKitSection): FormKitSchemaExtendableSection;

参数

  • inputSection — 存储在输入部分键位置的内容。

返回

FormKitExtendableSchemaRoot

TypeScript

FormKitBaseEvents

所有 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

应用于所有FormKit输入的基本属性。这些并非实际的运行时属性,而是从context.attrs对象中提取的。其中许多只是传递给输入元素的html属性。

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

FormKit中几乎所有的输入都有一套"基础"插槽。这是输入本身周围的"三明治",比如包装器、帮助文本、错误消息等。其他几个输入的插槽扩展了这个基础接口。

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

当提供选项时,单选框和复选框输入可用的插槽。

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

这些属性在一个或多个输入中用作条件,因此需要在所有输入类型上定义。这些都应明确地定义为 "undefined",然后只在使用它们的输入中在 FormKitInputProps 接口中定义为特定类型。

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

FormKitEventsAsProps

在一个完美的世界中,这个接口根本不需要。然而,Vue 期望接口被定义为方法重载。不幸的是,由于我们的事件接口使用泛型,UnionToIntersection 无法使用,这意味着如果我们将事件存储为具有属性键的标准接口,我们会丢失事件数据。我们找到的唯一可靠的方法是使用 "标准" 方法重载方法(参见 FormKitBaseEvents)来让 Volar(截至 2023 年 6 月)正确识别所有定义的事件。

(基本上我们不能使用这个接口中的事件来自动产生 FormKitBaseEvents,否则 Volar 会丢失事件数据)

这意味着我们无法从接口中获取事件名称,所以我们不能正确地在我们的属性中使用它们。这对于像 TSX 支持这样的事情很重要,其中事件名称需要作为 onEventName 属性可用。

这个接口被用来手动修补类型系统中的这个缺口。这些类型应该与 FormKitBaseEvents 以及 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

FormKit 的合成 "FileList" 中的单个文件对象。

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

FormKitFileSlots

文件输入可用的插槽,这些插槽扩展了基础插槽。

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

由每个FormKit输入发出的独特事件。这个接口的形状是:

interface FormKitInputEvents<Props extends Inputs> {
  typeString: { customEvent: (value: PropType<Props, 'value'>) => any } // <-- 所有独特的事件
}

所有输入也将继承来自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

请参阅评论集,了解为什么需要这种类型。

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

FormKitInputProps

这是为FormKit组件提供prop定义的基础接口。它用于定义每个FormKit库中的组件可用的props,通过使用一个区分的联合类型。这个接口的结构是:

interface FormKitInputProps {
 typeString: { type: 'string'; value?: string } // <-- 所有独特的props
}

所有输入也将继承来自FormKitBaseInputProps的所有props。

注意:所有输入都必须提供类型和值prop。

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

FormKit输入提供的插槽。这个接口的形状是:

interface FormKitInputSlots<Props extends Inputs> {
  typeString: { default: (value: PropType<Props, 'value'>) => any } // <-- 所有独特的插槽
}

插槽没有自动继承 - 每个插槽必须为每个输入明确定义。

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

选项组应始终格式化为带有组和嵌套选项的对象数组

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

FormKitOptionsGroupItemProp

选项组应始终格式化为带有组和嵌套选项的对象数组

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

FormKitOptionsItem

选项应始终格式化为带有标签和值属性的对象数组。

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

FormKitOptionsPropExtensions

允许通过使用其键被忽略,但值被应用到联合类型的接口来定义 prop 扩展。这允许任何第三方代码通过使用模块增强来扩展选项 prop,以向联合类型添加新值。

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

FormKitRuntimeProps

所有内置运行时 props 的类型。

警告:在编写这些内容时,它们仅特定于 Vue 的运行时 prop 要求,不应作为任何类型的外部 API 使用,因为它们可能会发生变化。

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

一个函数,它被调用时带有一个扩展参数,并返回一个有效的 schema 节点。

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

FormKitSection

一个函数,当被调用时,返回一个可以用扩展参数调用的函数。

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

FormKitSelectSlots

可用于选择输入的插槽,这些插槽扩展了基础插槽。

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

FormKitSlotData

传递给每个插槽的上下文对象的形状。

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

FormKitTextSlots

可用于FormKitText输入的插槽,这些插槽扩展了基础插槽。

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

OptionSlotData

对于具有选项范围的插槽可用的数据。

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

AllReals

试图捕获所有非未定义的值。这用于定义各种条件,其中未定义不是具体类型,但所有其他值需要采取一个逻辑分支。

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

FormKitButtonSlots

可用于按钮输入的插槽,这些插槽扩展了基础插槽。

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

FormKitEvents

所有FormKit事件应包含在给定的属性集中。

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

FormKitFileValue

一个基于数组的"FileList"。

export type FormKitFileValue = FormKitFile[];

FormKitInputs

所有FormKit输入应包含在此类型中。

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

FormKitInputSchema

要么是一个模式节点,要么是一个返回模式节点的函数。

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

FormKitOptionsList

选项项的数组。

export type FormKitOptionsList = FormKitOptionsItem[];

FormKitOptionsListWithGroups

带有组的选项项的数组。

export type FormKitOptionsListWithGroups = Array<FormKitOptionsItem | FormKitOptionsGroupItem>;

FormKitOptionsListWithGroupsProp

带有组支持的选项项的数组 - 其中组的 option 可以是任何有效的 FormKitOptionsProp 类型。

export type FormKitOptionsListWithGroupsProp = Array<FormKitOptionsItem | FormKitOptionsGroupItemProp>;

FormKitOptionsProp

可以传递给 options prop 的选项类型。

export type FormKitOptionsProp = FormKitOptionsPropExtensions[keyof FormKitOptionsPropExtensions];

FormKitOptionsPropWithGroups

可以传递给 options prop 的选项类型。

export type FormKitOptionsPropWithGroups = FormKitOptionsProp | FormKitOptionsListWithGroupsProp;

FormKitOptionsValue

传递给 options prop 的数据的正确形状。

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

从 props 中选择 "type",如果不存在,则默认为 "text"。

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

MergedEvents

将所有事件合并为一个类型。然后将其用作结构。

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

MergedProps

输入 props、基础 props 和条件 props 的合并。然后将其用作 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

从给定的 prop 中提取类型。

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