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
useFormKitContext
可组合函数,用于访问父级 FormKit
组件的上下文对象 — 或树中的任何其他 FormKit
组件。可选地,您可以提供一个效果回调,当上下文可用时执行。useFormKitContextById
可组合函数,用于访问具有显式id的任何 FormKit
组件的上下文对象。可选地,您可以提供一个效果回调,当上下文可用时执行。useFormKitNodeById
可组合函数,用于访问具有显式id的任何 FormKit
组件的节点对象。可选地,您可以提供一个效果回调,当节点可用时执行。FormKit
组件的 type
属性添加智能感知自动完成功能(#1241)。@formkit/core
包中新增 stopWatch
函数,允许从 watchRegistry
函数注销收据。getNode<T>()
函数添加类型泛型。@nuxt/tailwindcss
的新集成,自动包含 formkit.theme.ts
文件在 tailwind content
中。currency
和 unit
图标。FormKit
和 FormKitMessages
组件添加新的 library
属性,允许您包含额外的组件用于输入模式,例如,在使用 sections-schema
修改输入时(#1145)(#1137)。FormKitTypeDefinition
的 FormKit
组件的 value
类型是从 FormKitTypeDefinition
推断出来的。changeLocale
中的错误,导致更新的语言环境在新节点上未被使用(#1143)。@formkit/icons
包的树摇动问题(#1184)。FormKitIcon
组件添加到 Nuxt 模块的 autoImport
功能中(#1168)。BeforeStepChangeData
的类型(#1224)。datetime-local
输入类型的类型(#1129)。@formkit/vue
的 peerDependency
,以减少同一项目中多个 Vue 实例的事件(#1160)。role="button"
(#1210)。FormKit
组件的 type
参数现在需要在 FormKitInputProps
类型中有一个匹配的类型以支持 TypeScript。如果您使用了自定义输入并为 FormKitInputProps
提供了模块增强,您将需要更新 FormKitInputProps
类型以包含您的类型。
FormKit 1.5.0带来了FormKit的新开发版本。在开发中,FormKit现在使用了包含额外开发者体验增强功能的不同版本的包。这与Vue本身拥有“开发”和“生产”版本的方式类似,它允许FormKit提供改进的开发者体验,例如改进的HMR支持和更好的错误信息。
现在为未来版本大幅改进的开发者体验奠定了基础。此版本还包括数十个错误修复和改进。
createInput
现在支持第三个参数sectionsSchema,它允许你扩展createInput
自带的默认部分(#882)。didMount
和节点事件mounted
,用于识别<FormKit>
组件何时挂载到DOM上(#0b8753d)。node.children
被@formkit/observer
观察,这允许验证规则以响应性访问node.children
。changeLocale
可组合函数,它可以全局更改所有表单的区域设置,适用于Options API、Composition API和Nuxt自动导入(#1112)allow_non_alpha
和allow_numeric
。npx formkit create-app
),以使用themes.formkit.com的主题系统。options
(选择、复选框、单选框、自动完成等)的输入现在正确计算它们的__mask
值(#1046)。@formkit/nuxt
的实验性autoImport
功能(1095等)。node.clearErrors()
始终移除该节点本地的错误(#941)createInput()
的类型定义(#1105)。data-complete
(#1038)。true
或false
的情况下使用(#989)。Vitest不会自动使用Vite所使用的相同节点参数(条件)(参见#4971)。如果你在更新后发现你的测试失败了,你可以在你的vitest.config.js
文件中添加以下内容:
export default defineConfig({
resolver: {
conditions: process.env.VITEST ? ['development'] : undefined
},
test: {
// ...vitest配置
}
})
Vite应该在~1.2.x
或更高版本以使用此功能。
<KitchenSink>
组件,可以渲染 FormKit 输入的每一个样本(有助于样式设计)。state.required
属性(使得在必填输入项中添加星号变得更容易)。<input>
、<select>
和 <textarea>
元素添加 aria-required
属性(#984)。<FormKitSummary>
组件中新增 force-show
属性,即使没有可见错误也强制显示摘要。formkit
CLI 工具新增 create-theme
命令,从 @formkit/theme-starter
脚手架一个新主题。node.submit()
在自定义元素的阴影根内部失败的问题(#1057)。<FormKitProvider>
(及相关提供者)传递的错误(#1013)。invalidDate
消息移至 validation
本地化键(#953)min
和 max
验证消息(英文)为 validation
本地化键(#953)incomplete-message
属性(在表单上)成为响应式的错误(#1047)。length
规则计算输入中可用的字符数量。<KitchenSink>
组件,用于渲染所有输入样本。file
输入在outer
部分有多个文件时,添加一个data-has-multiple
属性。@formkit/nuxt
在autoImport
模式下的一个错误,其中SSR上下文在每个请求后都没有被重置,导致一些专业输入出现水合错误和破损的用户界面。select
输入现在支持分组选项 (<optgroup>
) (#426)。@formkit/nuxt
包现在包含一个实验性的 autoImport
选项,该选项只在使用 FormKit 的页面上加载 FormKit,而不是全局加载。这将从您的入口文件中删除 FormKit。我们计划最终使这成为默认行为,并鼓励使用当前 nuxt 模块的所有人尝试新选项。createInput()
创建的输入添加 prefix-icon
和 suffix-icon
的支持。colorpicker
输入添加 Tailwind 支持。color
图标。<FormKitProvider :config="yourConfig">
——一个定义新配置边界的组件。任何嵌套在 <FormKitProvider>
下的 <FormKit>
组件都将从这个位置继承它们的配置。<FormKitLazyProvider>
,它检查更高级别的 <Suspense>
边界(如果没有找到,它会注入一个),并注入一个 <FormKitConfigLoader>
组件。<FormKitConfigLoader>
组件。一个执行配置文件动态导入的异步组件。注意:上述新组件目前处于实验阶段,API稳定后将进一步进行文档化。
<FormKit>
组件的TypeScript定义中的一个错误,该错误在Vue语言工具(Volar)> 1.8.11
中导致TypeScript错误。@formkit/*
包的整体树摇动。alpha
、alphanumeric
和 contains_*
验证规则在 latin
字符集中的错误。随着这次发布,我们正式宣布FormKit稳定且可投入生产使用。许多社区成员已经在生产环境中使用FormKit超过一年了,他们对结果非常满意。我们希望你也会喜欢!
此外,FormKit Pro现已对公众开放(无需早期访问权限)。FormKit Pro仍处于Beta阶段,我们正在努力准备它的稳定发布。
<FormKitSummary>
组件,它会自动列出表单中的所有错误和验证消息,并提供跳转链接到每个错误(a11y)。radio
,checkbox
和range
输入的焦点样式(a11y)。4.5:1
(a11y)。file
输入现在在删除文件按钮中包含文件名(a11y)。file
输入现在会重新聚焦(a11y)。StepHandlers
、MultiStepHandlers
和BeforeStepChangeData
以协助输入多步骤。datetime-local
输入无法解析其插槽类型。我们不谈论布鲁诺。
meta
。元输入仅在内存中,并向您的表单添加数据,而无需向用户显示或在页面上渲染任何内容。元文档。text
,number
,range
和hidden
输入添加了一个新的number
属性,该属性使用parseInt
或parseFloat
将值转换为数字,并扩展或收缩值的类型定义以匹配。id
属性 (#908)。stepIndex
和steps
添加到step
输入的类型定义中。nl
语言环境的翻译。context.handlers.blur
的类型定义中添加了可选的FocusEvent
。barcode
输入,可通过 @formkit/barcode
包使用。Barcode 文档dropdown
输入功能:
@formkit/utils
中的 whenAvailable
工具动态引用其文档上下文,便于在 web 组件 shadow DOM 中使用 FormKit。#837dropdown
、autocomplete
和 taglist
输入添加新的行为属性。repeater
输入添加了一个 #empty
部分/插槽,当没有值时显示上下文。Repeater 文档lt
)repeater
尊重其父表单的禁用状态。#579taglist
接受空选项。#586autocomplete
输入与 Vue 的 @focus
指令兼容。#670taglist
接受其选项列表之外的值。#681datepicker
在 picker-only
模式下键盘导航的错误。#736actions
插槽中提交类型按钮的 pointer-events: none
。#790taglist
在启用 open-on-click
时尊重最大 prop。#793selectionAppearance
设置为 option
的 autocomplete
以配合 open-on-click
prop 使用。#817@formkit/utils
中的 eq
函数的问题。#819datepicker
在以 year
开始时的导航错误。#827taglist
在禁用 close-on-select
时尊重最大 prop。#838formkit-icon
类与 config.rootClasses
对齐。#859role="button"
div,解决了 datepicker
的 Safari 焦点问题。#864dropdown
、autocomplete
、taglist
)现在可以渲染不属于其选项列表的值。#877<FormKitRoot>
组件。此组件提供有关根元素(Document
或 ShadowRoot
)的上下文。在自定义元素(Web 组件)内使用 FormKit 时,将一个或多个 FormKit 输入包装在 <FormKitRoot>
中以确保正确的功能。node.props.__root
和 context.__root
属性,引用节点当前的根元素(Document | ShadowRoot
)。multi-step
输入添加新的node.next()
,node.previous()
和node.goTo()
扩展。这使得更容易外部控制multi-step
输入导航。#685node.restoreCache()
扩展,以允许在提交失败时将表单值恢复到缓存中。#727multi-step
输入的SSR hydration问题。#720blur
事件可能在路由更改时导致控制台错误的问题。#735beforeStepChange
现在可以与async
函数调用一起工作。#743file
输入在调用reset
后不允许重新上传相同文件的问题。#762fk-
前缀,防止Genesis CSS关键帧命名冲突。text
输入族的自定义输入重复使用第一个模式(#719)FormKitValidationMessage
以帮助类型验证消息函数(#695)key
,control
,debounce
,beforeSave
和beforeLoad
。group
的输入。例如(form
,group
,multi-step
等)。value
属性不更新(#717)。dynamic
列表属性允许您轻松创建自己的重复器。require_one
(感谢@devoidofgenius),contains_alpha
,contains_alphanumeric
,contains_alpha_space
,contains_symbol
,contains_uppercase
,contains_lowercase
,contains_numeric
,symbol
,uppercase
和lowercase
(感谢@riderx)。textarea
输入。commitRaw
事件,即使输入值没有变化也会触发。FormKitSchema
现在可以使用单个根节点(而不是片段)v-show
这样的标准Vue指令现在可以工作,通常不再需要为动态输入添加key
(#528)。node.reset()
函数的值成为输入的新默认值(#621)。zh-TW
)lv
)tet
)node.extend()
扩展核心节点。