Introducing KickStart — AI generated FormKit forms in seconds. Generate from a screenshot, edit with drag-and-drop or conversational AI, copy & paste as components or schema!
Try for free
官方的 FormKit 核心库。此包负责 FormKit 的大部分内部功能。您可以在 formkit.com 上阅读有关其工作方式的特定文档。
您可以使用 npm install @formkit/core
或 yarn add @formkit/core
添加此包。
由 createNode() 生成的 FormKit 的 Node 对象。每个 <FormKit />
输入都有 1 个与之关联的 FormKitNode("核心节点")。所有输入、表单和组都是节点的实例。在架构文档中阅读更多关于核心节点的信息。
向节点添加一个子节点。该节点必须是组或列表。
add: (node: FormKitNode, index?: number) => FormKitNode
已添加的 FormKitNode。
当前节点从树的根开始的地址。
address: FormKitAddress
一个 FormKitAddress。
通过从 node.props.attrs 中移除它们并将它们移动到顶级 node.props 对象,向给定节点添加 props。
addProps: (props: string[]) => FormKitNode
props
— 一个要作为 props 键添加的字符串数组。获取位于另一个地址的节点。地址是节点名称的点语法路径(或数组)。例如:form.users.0.first_name
。还有一些"特殊"的遍历令牌:
$root
— 选择根节点。$parent
— 选择父节点。$self
— 选择当前节点。at: (address: FormKitAddress | string) => FormKitNode | undefined
address
— 一个有效的字符串或 FormKitAddress。找到的 FormKitNode 或 undefined
。
子节点的数组(组和列表)。
children: Array<FormKitNode>
FormKitNode 的数组。
清除节点的错误,以及可选的所有子节点。
clearErrors: (clearChildren?: boolean, sourceKey?: string) => FormKitNode
clearChildren
可选 — 是否应清除子节点。sourceKey
可选 — 用于重置的源键。一个 FormKitConfig 对象,它在整个树中共享,包含应用于整个树的各种配置选项。
config: FormKitConfig
一个 FormKitConfig。
定义当前输入的库类型定义,包括节点类型、模式和属性。
define: (definition: FormKitTypeDefinition) => void
definition
— 一个 FormKitTypeDefinition。从全局注册表中删除节点,从其父节点中删除,并发出 'destroying' 事件。
destroy: () => void
在给定节点的每个子节点上执行给定的回调。
each: (callback: FormKitChildCallback) => void
callback
— 一个 FormKitChildCallback,将在每个子节点上调用。从节点发出事件,以便可以由 on 监听。
emit: (event: string, payload?: any, bubble?: boolean, meta: Record<string, unknown>) => FormKitNode
event
— 要发出的事件名称。payload
可选 — 与事件一起传递的值。bubble
可选 — 事件是否应冒泡到父节点。通过添加可通过 node.{property}()
访问的任意属性来扩展 FormKitNode。
extend: (property: string, trap: FormKitTrap) => FormKitNode
property
— 要添加到核心节点的属性 (node.{property}
)。trap
— 具有获取和设置属性的对象。在给定的树中,找到匹配给定选择器的节点。选择器可以是简单的字符串或函数。
find: (
selector: string,
searcher?: keyof FormKitNode | FormKitSearchFunction
) => FormKitNode | undefined
selector
— 选择器字符串。searcher
可选 — FormKitNode 或 FormKitSearchFunction 的 keyof。找到的 FormKitNode 或 undefined
。
一组钩子。
hook: FormKitHooks
节点相对于其兄弟节点的索引。只有在节点是列表的子节点的情况下才适用。
index: number
一个 number
。
用于设置节点值的函数。所有对节点值的更改都应使用此函数,因为它确保始终完全跟踪树的状态。
input: (value: unknown, async?: boolean) => Promise<unknown>
value
— 用于节点的任何值。async
可选 — 如果输入应异步进行。一个 Promise<unknown>
。
开始为假,当节点完成创建时设置为真。
isCreated: boolean
一个 boolean
。
反映节点及其子树的结算状态的布尔值。
isSettled: boolean
一个 boolean
。
用于任意消息计数器的计数分类账。
ledger: FormKitLedger
一个 FormKitLedger。
节点树中输入的名称。当节点是列表的子节点时,这将自动成为其索引。
name: string
一个 string
。
通过其令牌删除事件监听器。可以通过明确声明监听器函数的 "receipt" 属性在许多事件监听器之间共享收据。
off: (receipt: string) => FormKitNode
receipt
— 由 on
函数生成的收据。一个收据 string
。
为给定事件添加事件监听器,并返回一个随机字符串令牌的 "收据"。应使用此令牌在将来删除监听器。或者,您可以为监听器函数分配一个 "receipt" 属性,那么将使用该收据。如果它们共享相同的收据,这允许所有的监听器都可以通过一次 off() 调用来取消注册。
on: (eventName: string, listener: FormKitEventListener) => string
eventName
— 要监听的事件名称。listener
— 当事件发生时运行的 FormKitEventListener。一个收据 string
。
节点的父节点。
parent: FormKitNode | null
如果找到 FormKitNode 或 null
。
代理的 props 对象。这些通常由选择的适配器提供。
props: Partial<FormKitProps>
一个可选的 FormKitProps 列表。
从节点中移除一个子节点。
remove: (node: FormKitNode) => FormKitNode
node
— 要被移除的 FormKitNode。将节点的值重置为其原始值。
reset: () => FormKitNode
检索树的根节点。这是通过请求时的树遍历完成的,因此不应在频繁调用的函数中使用。
root: FormKitNode
在输入和可选的子输入上设置错误。
setErrors: (localErrors: ErrorMessages, childErrors?: ErrorMessages) => void
localErrors
— 要使用的 ErrorMessages。childErrors
可选 — 用于子节点的 ErrorMessages。当节点及其整个子树被解决时,解决的承诺。换句话说 - 所有输入都完成了他们的值提交。
settled: Promise<unknown>
一个 Promise<unknown>
。
内部节点存储。
store: FormKitStore
一个 FormKitStore。
在最近的表单上触发提交事件。
submit: () => void
一个文本或翻译函数,将给定的字符串暴露给 "text" 钩子。所有显示给用户的文本都应该在显示之前通过这个函数传递 - 尤其是对于核心和插件作者。
t: (key: string | FormKitTextFragment) => string
key
— 一个键或一个 FormKitTextFragment 用于查找翻译。翻译后的 string
。
节点的类型,只能是 'input','list' 或 'group'。
type: FormKitNodeType
一个 FormKitNodeType。
在节点及其子树上注册一个新插件。
use: (
plugin: FormKitPlugin | FormKitPlugin[] | Set<FormKitPlugin>,
run?: boolean,
library?: boolean
) => FormKitNode
plugin
— 一个 FormKitPlugin 或一个数组或集合的 FormKitPlugin。run
可选 — 是否应在创建时执行插件。library
可选 — 是否应在创建时执行插件的库函数。输入的值。这个值永远不应该直接修改。任何期望的变化应该通过 input 进行。
readonly value: unknown
在其子树的每个节点上执行一个函数(但不包括节点本身)。这是一个昂贵的操作,所以应该很少做,只有在相对罕见的生命周期事件,如启动和关闭时才做。
walk: (callback: FormKitChildCallback, stopOnFalse?: boolean, recurseOnFalse?: boolean) => void
callback
— 一个 FormKitChildCallback ,用于每个子节点执行。stopOnFalse
可选 — 如果返回值为 false,是否应该停止。在节点子树上执行广度优先搜索,并定位第一个匹配项。
bfs(tree: FormKitNode, searchValue: string | number, searchGoal?: keyof FormKitNode | FormKitSearchFunction): FormKitNode | undefined;
tree
— 一个 FormKitNode 作为起点。searchValue
— 要搜索的值。searchGoal
可选 — 目标值。一个 FormKitNode 或 undefined
。
清除节点上的错误,以及可选的其子节点上的错误。
clearErrors(id: string, clearChildren?: boolean): void;
id
— 你想要清除错误的节点的 id。clearChildren
可选 — 确定是否应清除此节点的子节点的错误。将类似于 "a != z || b == c"
的逻辑字符串编译成一个单一的函数。返回值是一个带有 "provide" 方法的对象,该方法遍历所有需求令牌以用作替换。
compile(expr: string): FormKitCompilerOutput;
expr
— 要编译的字符串。let name = {
value: 'jon'
}
const condition = compile("$name == 'bob'").provide((token) => {
return () => name.value // 必须返回一个函数!
})
condition() // false
生成 CSS 类的标准化对象表示的函数。
createClasses(propertyKey: string, node: FormKitNode, sectionClassList?: FormKitClasses | string | Record<string, boolean>): Record<string, boolean>;
propertyKey
— 部分键。node
— 一个 FormKitNode。sectionClassList
可选 — 一个 string | Record<string, boolean>
或一个 FormKitClasses。Record<string, boolean>
创建一个全局配置选项的新实例。这个对象本质上只是一个 FormKitOption 对象,但它可以作为 FormKitConfig 的代理的根,并保留事件 "发射"。
createConfig(options?: Partial<FormKitConfig>): FormKitRootConfig;
options
可选 — FormKitConfig 的可选属性的对象。创建一个新的 FormKitMessage 对象。
createMessage(conf: Partial<FormKitMessage>, node?: FormKitNode): FormKitMessageProps;
conf
— FormKitMessage 的可选属性的对象。node
可选 — 一个 FormKitNode。创建一个新的 FormKit 节点实例。节点是 FormKit 图的原子单位。
createNode<V = unknown>(options?: FormKitOptions): FormKitNode<V>;
options
可选 — 一个 FormKitOptions 的选项对象,用于覆盖默认值。一个 FormKitNode。
import { createNode } from '@formkit/core'
const input = createNode({
type: 'input', // 如果未指定,默认为 'input'
value: 'hello node world',
})
console.log(input.value)
// 'hello node world'
根据传入的选项和输入类型,创建节点的初始值。
createValue(options: FormKitOptions): unknown;
options
— 一个 FormKitOptions。unknown
从注册表中注销一个节点。
deregister(node: FormKitNode): void;
node
— 一个 FormKitNode。发出一个错误。通常应该导致一个异常。
error(code: number, data?: any): never;
code
— 整数错误代码。data
可选 — 通常是要包含的信息对象。将多个类列表合并为一个列表。
generateClassList(node: FormKitNode, property: string, ...args: Record<string, boolean>[]): string | null;
node
— 一个 FormKitNode。property
— 将应用类列表的属性键。args
— 一个 Record<string, boolean>
的 CSS 类列表数组。string | null
通过特定的 id 获取一个节点。
getNode(id: string): FormKitNode | undefined;
id
— 通过给定的 id 获取一个节点。一个 FormKitNode 或 undefined
。
类型缩小,节点是一个 DOM 节点。
isComponent(node: string | Record<PropertyKey, any>): node is FormKitSchemaComponent;
node
— 需要检查的 schema 节点。boolean
确定一个节点是否被条件性地渲染。
isConditional(node: FormKitSchemaNode): node is FormKitSchemaCondition;
isConditional(node: FormKitSchemaAttributesCondition | FormKitSchemaAttributes): node is FormKitSchemaAttributesCondition;
node
— 需要检查的 schema 节点。boolean
类型缩小,一个节点是 DOM 节点。
isDOM(node: string | Record<PropertyKey, any>): node is FormKitSchemaDOMNode;
node
— 需要检查的 schema 节点。boolean
一个简单的类型保护,用于确定正在评估的上下文是否是列表类型。
isList(arg: FormKitContextShape): arg is FormKitListContext;
arg
— 一个 FormKitContextShape。返回一个 boolean
。
确定给定的对象是否是一个节点。
isNode(node: any): node is FormKitNode;
node
— 任何值。返回一个 boolean
。
import { isNode, createNode } from '@formkit/core'
const input = createNode({
type: 'input', // 如果未指定,默认为 'input'
value: 'hello node world',
})
const obj = {};
isNode(obj)
// false
isNode(input)
// true
确定一个节点是否是占位符节点。
isPlaceholder(node: FormKitNode | FormKitPlaceholderNode): node is FormKitPlaceholderNode;
node
— 一个 FormKitNode确定节点是否是语法糖。
isSugar(node: FormKitSchemaNode): node is FormKitSchemaFormKit;
node
— 需要检查的 schema 节点。boolean
创建一个基于名称的字典,包含数组中的所有子节点。
names(children: FormKitNode[]): {
[index: string]: FormKitNode;
};
children
— 一个 FormKitNode 的数组。一个命名的 FormKitNode 的字典。
如果节点是根节点,_或者_节点具有明确的 node.props.alias,则将节点注册到注册表。如果这两个条件都不满足,则不会注册任何节点(幂等)。
register(node: FormKitNode): void;
node
— 一个 FormKitNode。将输入重置为其“初始”值。如果输入是组或列表,它也会重置所有子项。
reset(id: string | FormKitNode, resetTo?: unknown): FormKitNode | undefined;
id
— 要重置的输入的 id。resetTo
可选 — 重置节点的值。一个 FormKitNode 或 undefined
。
重置节点注册的全局数量,对于确定性节点命名很有用。
resetCount(): void;
重置整个注册表。取消注册所有节点并删除所有监听器。
resetRegistry(): void;
在表单、组或输入上设置错误。
setErrors(id: string, localErrors: ErrorMessages, childErrors?: ErrorMessages): void;
id
— 表单的 id。localErrors
— 要在表单或表单的输入上设置的错误,格式为 ErrorMessages。childErrors
可选 — (可选) 要在表单或表单的输入上设置的错误,格式为 ErrorMessages。以编程方式提交 FormKit 表单。
submitForm(id: string): void;
id
— 表单的 id。将语法糖节点转换为标准节点。
sugar<T extends FormKitSchemaNode>(node: T): Exclude<FormKitSchemaNode, string | FormKitSchemaFormKit>;
node
— 要转换的节点。一个没有 FormKitSchemaFormKit 属性的 FormKitSchemaNode。
全局发出警告。
warn(code: number, data?: any): void;
code
— 整数警告代码。data
可选 — 通常包含的信息对象。监视全局注册表中的变化的方法。
watchRegistry(id: string, callback: FormKitEventListener): void;
id
— 节点所在位置的点语法 id。callback
— 格式为 FormKitEventListener 的回调,用于在节点设置或删除时通知。node.each() 的回调类型。
interface FormKitChildCallback {
(child: FormKitNode): any;
}
子值的描述符,通常在节点树中向上传递。
interface FormKitChildValue {
from?: number | symbol;
name: string | number | symbol;
value: any;
}
生成 CSS 类的函数的定义。
interface FormKitClasses {
(node: FormKitNode, sectionKey: string): string | Record<string, boolean>;
}
编译器输出,一个添加所需令牌的函数。
interface FormKitCompilerOutput {
(tokens?: Record<string, any>): boolean | number | string;
provide: FormKitCompilerProvider;
}
一般的 "app" 类型的配置选项,这些选项会自动被所有子项继承 - 它们不是响应式的。
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;
}
FormKit 节点的上下文对象的接口。FormKit 节点是此对象的代理。
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;
}
定义一个上下文对象的最基本形状,用于类型保护尝试推理上下文的值。
interface FormKitContextShape {
_value: unknown;
type: FormKitNodeType;
value: unknown;
}
用于在树中执行实例计数的计数器对象。
interface FormKitCounter {
condition: FormKitCounterCondition;
count: number;
name: string;
node: FormKitNode;
promise: Promise<void>;
resolve: () => void;
}
分类账计数器需要一个条件函数,该函数确定给定的消息是否适用于它。
interface FormKitCounterCondition {
(message: FormKitMessage): boolean;
}
FormKitDispatcher接口负责创建/运行"钩子"。
interface FormKitDispatcher<T> {
(dispatchable: FormKitMiddleware<T>): number;
dispatch: (payload: T) => T;
remove: (dispatchable: FormKitMiddleware<T>) => void;
unshift: (dispatchable: FormKitMiddleware<T>) => number;
}
FormKitEvent的内部结构。
interface FormKitEvent {
bubble: boolean;
meta?: Record<string, unknown>;
name: string;
origin: FormKitNode;
payload: any;
}
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;
}
事件监听器函数的定义。
interface FormKitEventListener {
(event: FormKitEvent): void;
receipt?: string;
}
定义一个函数,该函数允许选择性地覆盖给定的模式。
interface FormKitExtendableSchemaRoot {
(extensions: Record<string, Partial<FormKitSchemaNode> | FormKitSchemaCondition>): FormKitSchemaDefinition;
memoKey?: string;
}
由每个各自的UI框架创建和使用的上下文对象。FormKitCore不创建或输出任何值,但每个各自的插件应遵循此接口。
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;
}
节点内部的框架上下文状态。通常用于跟踪模糊和有效性状态等事项。
interface FormKitFrameworkContextState {
[index: string]: boolean;
blurred: boolean;
complete: boolean;
dirty: boolean;
errors: boolean;
rules: boolean;
settled: boolean;
submitted: boolean;
valid: boolean;
validationVisible: boolean;
}
类型为'group'的FormKit输入必须默认具有键值。
interface FormKitGroupValue {
__init?: boolean;
[index: string]: unknown;
}
描述通过错误和警告处理程序传递的数据。
interface FormKitHandlerPayload {
code: number;
data: any;
message?: string;
}
可用于中间件的钩子。
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>;
}
应用于节点子项的输入消息的注册表 — 其中对象的字符串键是应用消息的节点的地址,值是消息本身。
interface FormKitInputMessages {
[address: string]: FormKitMessage[];
}
FormKit账本,这是FormKit核心提供的通用消息计数服务,用于在树中计数消息。
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;
}
由输入类型名称键入的库。
interface FormKitLibrary {
[index: string]: FormKitTypeDefinition;
}
类型为“list”的上下文的最简单定义。
interface FormKitListContext {
_value: FormKitListContextValue;
type:'list';
value: FormKitListContextValue;
}
消息可以附加任意元数据。
interface FormKitMessageMeta {
[index: string]: any;
i18nArgs?: any[];
messageKey?: string;
}
核心FormKitMessage的结构。这些消息用于存储节点状态的信息。
interface FormKitMessageProps {
blocking: boolean;
key: string;
meta: FormKitMessageMeta;
type: string;
value?: string | number | boolean;
visible: boolean;
}
定义消息的实际存储。
interface FormKitMessageStore {
[index: string]: FormKitMessage;
}
用于添加FormKit节点扩展的空接口。
interface FormKitNodeExtensions {
}
一个伪节点,用作在各种节点操作期间在子节点数组中的占位符。
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;
}
FormKitPlugin的基础接口定义。它只是一个接受节点参数的函数。
interface FormKitPlugin {
(node: FormKitNode): false | any | void;
library?: (node: FormKitNode) => void;
}
嵌套在属性声明中的条件。
interface FormKitSchemaAttributesCondition {
else?: FormKitAttributeValue;
if: string;
then: FormKitAttributeValue;
}
可以扩展给定模式节点的函数的定义。
interface FormKitSchemaComposable {
(extendWith?: Partial<FormKitSchemaNode>, children?: string | FormKitSchemaNode[] | FormKitSchemaCondition, ...args: any[]): FormKitSchemaNode;
}
从一个模式渲染传递到下一个的上下文。
interface FormKitSchemaContext {
__FK_SCP: Map<symbol, Record<string, any>>;
[index: string]: any;
}
所有模式节点中可用的属性。
interface FormKitSchemaProps {
bind?: string;
children?: string | FormKitSchemaNode[] | FormKitSchemaCondition;
for?: FormKitListStatement;
if?: string;
key?: string;
meta?: FormKitSchemaMeta;
}
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;
}
FormKitTrap的定义。这些有点像每个FormKitNode上的方法。它们总是对称的(get/set)——尽管其中任何一个抛出异常都是可以接受的。
interface FormKitTrap {
get: TrapGetter;
set: TrapSetter;
}
具有属性的任意数据。可能是一个POJO,也可能是一个数组。
interface KeyedValue {
[index: number]: any;
[index: string]: any;
}
由于子节点不存在而未立即应用的子消息。
export type ChildMessageBuffer = Map<string, Array<[FormKitMessage[], MessageClearer | undefined]>>;
错误消息。
export type ErrorMessages = string | string[] | Record<string, string | string[]>;
描述了从树的顶部到特定节点的路径。
export type FormKitAddress = Array<string | number>;
属性的可能值类型(在模式中)。
export type FormKitAttributeValue = string | number | boolean | undefined | FormKitSchemaAttributes | FormKitSchemaAttributesCondition;
一个接受带有令牌作为唯一参数的回调的函数,并且必须返回一个提供令牌真实值的函数。
export type FormKitCompilerProvider = (callback: (requirements: string[]) => Record<string, () => any>) => FormKitCompilerOutput;
类型为'list'的FormKit输入默认必须具有数组值。
export type FormKitListContextValue<T = any> = Array<T>;
完整的循环语句,采用元组语法。可以读作 "foreach value, key? in list"。
export type FormKitListStatement = [value: any, key: number | string, list: FormKitListValue] | [value: any, list: FormKitListValue];
正在列出的值。可以是数组,对象或数字。
export type FormKitListValue = string | Record<string, any> | Array<string | number | Record<string, any>> | number;
FormKit消息是不可变的,因此所有属性应为只读。
export type FormKitMessage = Readonly<FormKitMessageProps>;
所有FormKitMiddleware都遵循接受有效载荷和next()
函数的模式。他们可以显式地将有效载荷传递给下一个中间件(作为next的参数),或者隐式地(对next没有参数)。
export type FormKitMiddleware<T = unknown> = (payload: T, next: (payload: T) => T) => T;
这些是可以创建的节点类型。这些与可用的输入类型不同,而是描述了它们在树中的目的。
export type FormKitNodeType = 'input' | 'list' | 'group';
可以用于通过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;
}>;
用户级别的每个实例的"props",通常类似于传入前端组件的props。
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;
全局配置选项。
export type FormKitRootConfig = Partial<FormKitConfig> & {
_add: (node: FormKitNode) => void;
_rm: (node: FormKitNode) => void;
};
DOM属性是简单的字符串字典。
export type FormKitSchemaAttributes = {
[index: string]: FormKitAttributeValue;
} | null | FormKitSchemaAttributesCondition;
定义通用非FormKit组件时可用的属性。
export type FormKitSchemaComponent = {
$cmp: string;
props?: Record<string, any>;
} & FormKitSchemaProps;
决定渲染_哪些_内容的模式节点。
export type FormKitSchemaCondition = {
if: string;
then: FormKitSchemaNode | FormKitSchemaNode[];
else?: FormKitSchemaNode | FormKitSchemaNode[];
};
整个模式对象或从任何入口点的子树。可以是单个节点,节点数组,或条件。这是传递给FormKitSchema构造函数的类型。
export type FormKitSchemaDefinition = FormKitSchemaNode | FormKitSchemaNode[] | FormKitSchemaCondition;
使用DOM节点时可用的属性。
export type FormKitSchemaDOMNode = {
$el: string | null;
attrs?: FormKitSchemaAttributes;
} & FormKitSchemaProps;
用于使用FormKit的FormKitSchemaComponent节点的语法糖。
export type FormKitSchemaFormKit = {
$formkit: string;
} & Record<string, any> & FormKitSchemaProps;
元属性在解析模式时不使用,但可以用来创建工具。
export type FormKitSchemaMeta = {
[key: string]: string | number | boolean | undefined | null | CallableFunction | FormKitSchemaMeta;
};
定义模式节点时可用的属性。
export type FormKitSchemaNode = FormKitSchemaDOMNode | FormKitSchemaComponent | FormKitSchemaTextNode | FormKitSchemaCondition | FormKitSchemaFormKit;
一个简单的文本节点。
export type FormKitSchemaTextNode = string;
广度和深度优先搜索可以使用这种符号的回调。
export type FormKitSearchFunction = (node: FormKitNode, searchTerm?: string | number) => boolean;
消息存储包含了所有与给定节点相关的消息。
export type FormKitStore = FormKitMessageStore & {
_n: FormKitNode;
_b: Array<[messages: FormKitMessage[], clear?: MessageClearer]>;
_m: ChildMessageBuffer;
_r?: string;
buffer: boolean;
} & FormKitStoreTraps;
文本片段是用于诸如界面验证消息或可能暴露出来进行修改甚至翻译的错误的小块文本。
export type FormKitTextFragment = Partial<FormKitMessageProps> & {
key: string;
value: string;
type: string;
};
节点陷阱Map的映射签名。
export type FormKitTraps = Map<string | symbol, FormKitTrap>;
库项的定义 - 在注册新的库项时,这些是所需和可用的属性。
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;
};
允许清除消息的字符串或函数。
export type MessageClearer = string | ((message: FormKitMessage) => boolean);
任何节点的getter陷阱的签名。请记住,由于这些是陷阱而不是类方法,因此它们的响应类型在FormKitNode接口中明确声明。
export type TrapGetter = ((node: FormKitNode, context: FormKitContext, ...args: any[]) => unknown) | false;
节点的陷阱设置器的签名 - 这些比getter陷阱更少见,但可以用于阻止访问某些上下文属性或修改赋值的行为(例如,参见setParent)。
export type TrapSetter = ((node: FormKitNode, context: FormKitContext, property: string | number | symbol, value: any) => boolean | never) | false;