diff --git a/formkit.config.ts b/formkit.config.ts index 9b0fa12..5195cd8 100644 --- a/formkit.config.ts +++ b/formkit.config.ts @@ -12,6 +12,7 @@ import { addAsteriskPlugin } from './formkit.config.plugin.addAsteriskPlugin'; import { debugPlugin } from './formkit.config.plugin.debug'; import { form } from '@/__fk-inputs__/inputs/form'; import { PInputText } from '@/__fk-inputs__/inputs/input-text'; +import { PInputPassword } from '@/__fk-inputs__/inputs/input-password'; // const apiKey = 'fk-6cdd5192223' const config: FormKitOptions = { @@ -25,6 +26,7 @@ const config: FormKitOptions = { // ============================== form, PInputText, + PInputPassword, }), // createLibraryPlugin( // { diff --git a/src/__fk-inputs__/inputs/input-password.ts b/src/__fk-inputs__/inputs/input-password.ts new file mode 100644 index 0000000..5c894a4 --- /dev/null +++ b/src/__fk-inputs__/inputs/input-password.ts @@ -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> { + PInputPassword: { + type: 'PInputPassword'; + }; + } +} diff --git a/src/__fk-inputs__/inputs/input-text.ts b/src/__fk-inputs__/inputs/input-text.ts index 647e833..79cfb5c 100644 --- a/src/__fk-inputs__/inputs/input-text.ts +++ b/src/__fk-inputs__/inputs/input-text.ts @@ -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', diff --git a/src/all-custom/all-custom.vue b/src/all-custom/all-custom.vue index 67e5014..0e4ce30 100644 --- a/src/all-custom/all-custom.vue +++ b/src/all-custom/all-custom.vue @@ -46,6 +46,16 @@ async function submit() { validation="required" > +