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

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(
       //   {

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<Props extends FormKitInputs<Props>> {
+    PInputPassword: {
+      type: 'PInputPassword';
+    };
+  }
+}

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',

src/all-custom/all-custom.vue

@@ -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"