feat: 更新 README 和配置文件,添加 PInputText 组件并优化输入文本组件
This commit is contained in:
@ -1,30 +1,36 @@
|
||||
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 { FormKitTypeDefinition } from '@formkit/core';
|
||||
import type { FormKitInputs } from '@formkit/inputs';
|
||||
import { casts, createSection, label, outer } from '@formkit/inputs';
|
||||
import InputTextCmp from 'primevue/inputtext';
|
||||
import { markRaw } from 'vue';
|
||||
import { messages } from '../sections/messages';
|
||||
|
||||
export const InputText: FormKitTypeDefinition = {
|
||||
declare module '@formkit/inputs' {
|
||||
// https://formkit.com/essentials/custom-inputs#typescript-support
|
||||
interface FormKitInputProps<Props extends FormKitInputs<Props>> {
|
||||
PInputText: {
|
||||
type: 'PInputText';
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export const PInputText: FormKitTypeDefinition = {
|
||||
type: 'input',
|
||||
schema: outer(
|
||||
label('$label'),
|
||||
// custom_FComponent.schema,
|
||||
createSection('input', () => ({
|
||||
$cmp: 'PInputText',
|
||||
$cmp: 'InputTextCmp',
|
||||
bind: '$attrs',
|
||||
props: {
|
||||
invalid: '$state.invalid',
|
||||
// 'type': '$type',
|
||||
type: '$type',
|
||||
'a-typeeeee': '$type',
|
||||
'b-typeeeee': 'bbb',
|
||||
disabled: '$disabled',
|
||||
name: '$node.name',
|
||||
onInput: '$handlers.DOMInput',
|
||||
onBlur: '$handlers.blur',
|
||||
// value: '$_value',
|
||||
modelValue: '$_value',
|
||||
id: '$id',
|
||||
'aria-describedby': '$describedBy',
|
||||
@ -35,30 +41,8 @@ export const InputText: FormKitTypeDefinition = {
|
||||
),
|
||||
library: {
|
||||
// 'FComponent': custom_FComponent.library,
|
||||
'PInputText': markRaw(PInputText),
|
||||
InputTextCmp: markRaw(InputTextCmp),
|
||||
},
|
||||
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