feat: 删除 input-text 组件,添加消息组件,重构表单输入逻辑
This commit is contained in:
67
src/__fk-inputs__/inputs/input-text.ts
Normal file
67
src/__fk-inputs__/inputs/input-text.ts
Normal file
@ -0,0 +1,67 @@
|
||||
import MessagesCmp from '@/__fk-inputs__/components/messages.vue';
|
||||
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';
|
||||
|
||||
export const InputText: FormKitTypeDefinition = {
|
||||
type: 'input',
|
||||
schema: outer(
|
||||
label('$label'),
|
||||
// custom_FComponent.schema,
|
||||
createSection('input', () => ({
|
||||
$cmp: 'PInputText',
|
||||
bind: '$attrs',
|
||||
props: {
|
||||
// 'type': '$type',
|
||||
disabled: '$disabled',
|
||||
name: '$node.name',
|
||||
onInput: '$handlers.DOMInput',
|
||||
onBlur: '$handlers.blur',
|
||||
value: '$_value',
|
||||
id: '$id',
|
||||
'aria-describedby': '$describedBy',
|
||||
'aria-required': '$state.required || undefined',
|
||||
},
|
||||
}))(),
|
||||
createSection('messages', () => ({
|
||||
$cmp: 'MessagesCmp',
|
||||
props: { context: '$node.context', },
|
||||
if: '$defaultMessagePlacement && $fns.length($messages)',
|
||||
}))(),
|
||||
),
|
||||
library: {
|
||||
// 'FComponent': custom_FComponent.library,
|
||||
'PInputText': markRaw(PInputText),
|
||||
'MessagesCmp': markRaw(MessagesCmp)
|
||||
},
|
||||
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 }>
|
||||
)
|
||||
}
|
Reference in New Issue
Block a user