feat: 添加 PInputPassword 组件并在 formkit.config.ts 中注册

This commit is contained in:
严浩
2024-11-25 12:36:42 +08:00
parent a2e30f45e4
commit 5511685f18
4 changed files with 59 additions and 5 deletions

View File

@@ -0,0 +1,44 @@
import { FormKitTypeDefinition } from '@formkit/core';
import type { FormKitInputs } from '@formkit/inputs';
import { casts, createSection, label, outer } from '@formkit/inputs';
import SchemaComponent from 'primevue/password';
import { markRaw } from 'vue';
import { messages } from '../sections/messages';
const cmpName = `SchemaComponent${SchemaComponent.name}`;
export const PInputPassword: FormKitTypeDefinition = {
type: 'input',
schema: outer(
label('$label'),
createSection('input', () => ({
$cmp: cmpName,
bind: '$attrs',
props: {
invalid: '$state.invalid',
disabled: '$disabled',
// name: '$node.name',
// inputProps: {}
onInput: '$handlers.DOMInput',
onBlur: '$handlers.blur',
modelValue: '$_value',
inputId: '$id',
},
}))(),
messages(),
),
library: {
[cmpName]: markRaw(SchemaComponent),
},
features: [casts],
// schemaMemoKey: 'g2f31c24kjh',
};
declare module '@formkit/inputs' {
// https://formkit.com/essentials/custom-inputs#typescript-support
interface FormKitInputProps<Props extends FormKitInputs<Props>> {
PInputPassword: {
type: 'PInputPassword';
};
}
}

View File

@@ -1,11 +1,11 @@
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 SchemaComponent from 'primevue/inputtext';
import { markRaw } from 'vue';
import { messages } from '../sections/messages';
const cmpName = `SchemaComponentPInputText`;
const cmpName = `SchemaComponent${SchemaComponent.name}`;
export const PInputText: FormKitTypeDefinition = {
type: 'input',
@@ -23,14 +23,12 @@ export const PInputText: FormKitTypeDefinition = {
onBlur: '$handlers.blur',
modelValue: '$_value',
id: '$id',
'aria-describedby': '$describedBy',
'aria-required': '$state.required || undefined',
},
}))(),
messages(),
),
library: {
[cmpName]: markRaw(InputTextCmp),
[cmpName]: markRaw(SchemaComponent),
},
features: [casts],
// schemaMemoKey: 'g2f31c24kjh',

View File

@@ -46,6 +46,16 @@ async function submit() {
validation="required"
>
</FormKit>
<FormKit
type="PInputPassword"
name="PInputPassword"
label="密码"
placeholder="输入一个密码"
validation="required"
toggleMask
fluid
:feedback="false"
/>
<FormKit
:type="text"
label="customType"