Files
vue-formkit-example/src/__fk-inputs__/inputs/input-text.ts
严浩 742d92d8fd
Some checks failed
/ test (push) Failing after 28s
/ surge (push) Successful in 40s
feat: 更新输入文本组件,添加无效状态绑定,重命名值属性为 modelValue
2024-11-25 00:13:38 +08:00

64 lines
1.7 KiB
TypeScript

import { FormKitTypeDefinition, type FormKitFrameworkContext } from '@formkit/core';
import {
casts,
createSection,
label,
outer
} from '@formkit/inputs';
import PInputText from 'primevue/inputtext';
import { h, markRaw } from 'vue';
import { messages } from '../sections/messages';
export const InputText: FormKitTypeDefinition = {
type: 'input',
schema: outer(
label('$label'),
// custom_FComponent.schema,
createSection('input', () => ({
$cmp: 'PInputText',
bind: '$attrs',
props: {
invalid: '$state.invalid',
// 'type': '$type',
disabled: '$disabled',
name: '$node.name',
onInput: '$handlers.DOMInput',
onBlur: '$handlers.blur',
// value: '$_value',
modelValue: '$_value',
id: '$id',
'aria-describedby': '$describedBy',
'aria-required': '$state.required || undefined',
},
}))(),
messages(),
),
library: {
// 'FComponent': custom_FComponent.library,
'PInputText': markRaw(PInputText),
},
features: [casts],
// family: 'text',
// forceTypeProp: 'text',
// schemaMemoKey: 'g2f31c24kjh',
}
// @ts-ignore
const custom_FComponent = {
schema: createSection('input', () => ({
$cmp: 'FComponent',
props: { context: '$node.context', },
}))(),
library: markRaw(
((props: { context: FormKitFrameworkContext; }, /* context */) => {
return h(PInputText, {
id: props.context.id,
value: props.context._value,
...props.context.attrs,
onInput: props.context.handlers.DOMInput,
onBlur: props.context.handlers.blur,
})
}) satisfies import('vue').FunctionalComponent<{ context: FormKitFrameworkContext }>
)
}