feat: 更新 README 和配置文件，添加 PInputText 组件并优化输入文本组件

README.md

@@ -1,21 +1,27 @@
 # [Vue FormKit Example](https://formkit.com)
 
 ## Knowledge
+
 - https://youtu.be/v8Sb1mXDWa8
 - [sections](https://formkit.com/inputs/text#sections)
 - [sections](https://formkit.com/essentials/inputs#sections)
 - [useformkitcontext](https://formkit.com/inputs/form#useformkitcontext)
 
 ## Custom Input
+
 - https://formkit.com/guides/export-and-restructure-inputs
+  - `npx formkit@latest export`
 
 ## Example
+
 - https://formkit.com/essentials/examples
 
 ## Theme
+
 - https://themes.formkit.com/editor?theme=regenesis
 - [Creating a Tailwind CSS theme for FormKit](https://dev.to/andrewboyd/creating-a-tailwind-css-theme-for-formkit-45o4)
 - [issues: Tailwind prefix support for regenesis theme](https://github.com/formkit/formkit/issues/1157)
 
 ## 3rd Party
-- https://github.com/mathsgod/formkit-element
+
+- https://github.com/mathsgod/formkit-element

formkit.config.ts

@@ -11,6 +11,7 @@ import type { App } from 'vue';
 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';
 
 // const apiKey = 'fk-6cdd5192223'
 const config: FormKitOptions = {
@@ -22,6 +23,7 @@ const config: FormKitOptions = {
         form,
         submit,
         text,
+        PInputText,
       }),
       // createLibraryPlugin(
       //   {

src/__fk-inputs__/inputs/_demo_text.ts

@@ -1,6 +1,7 @@
-import { FormKitTypeDefinition } from '@formkit/core'
+import { FormKitTypeDefinition, type FormKitFrameworkContext } from '@formkit/core';
 import {
   casts,
+  createSection,
   help,
   icon,
   inner,
@@ -9,10 +10,10 @@ import {
   prefix,
   suffix,
   textInput,
-  wrapper
+  wrapper,
-} from '@formkit/inputs'
+} from '@formkit/inputs';
-import { messages } from '../sections/messages'
+import { messages } from '../sections/messages';
-
+import { h, markRaw } from 'vue';
 
 /**
  * Input definition for a text.
@@ -23,16 +24,7 @@ export const text: FormKitTypeDefinition = {
    * The actual schema of the input, or a function that returns the schema.
    */
   schema: outer(
-    wrapper(
+    wrapper(label('$label'), inner(icon('prefix', 'label'), prefix(), textInput(), suffix(), icon('suffix'))),
-      label('$label'),
-      inner(
-        icon('prefix', 'label'),
-        prefix(),
-        textInput(),
-        suffix(),
-        icon('suffix')
-      )
-    ),
     help('$help'),
     messages(),
   ),
@@ -54,7 +46,7 @@ export const text: FormKitTypeDefinition = {
   /**
    * Forces node.props.type to be this explicit value.
    */
-  forceTypeProp: 'text',
+  // forceTypeProp: 'text',
   /**
    * Additional features that should be added to your input
    */
@@ -63,4 +55,21 @@ export const text: FormKitTypeDefinition = {
    * The key used to memoize the schema.
    */
   // schemaMemoKey: 'g2f31c24kjh',
-}
+};
+
+// @ts-ignore
+const custom_FComponent = {
+  schema: createSection('input', () => ({
+    $cmp: 'FComponent',
+    props: { context: '$node.context' },
+  }))(),
+  library: markRaw(((props: { context: FormKitFrameworkContext } /* context */) => {
+    return h('XxxxCmp', {
+      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 }>),
+};

src/__fk-inputs__/inputs/input-text.ts

@@ -1,30 +1,36 @@
-import { FormKitTypeDefinition, type FormKitFrameworkContext } from '@formkit/core';
+import { FormKitTypeDefinition } from '@formkit/core';
-import {
+import type { FormKitInputs } from '@formkit/inputs';
-  casts,
+import { casts, createSection, label, outer } from '@formkit/inputs';
-  createSection,
+import InputTextCmp from 'primevue/inputtext';
-  label,
+import { markRaw } from 'vue';
-  outer
-} from '@formkit/inputs';
-import PInputText from 'primevue/inputtext';
-import { h, 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 }>
-  )
-}

src/all-custom-primevue/all-custom-primevue.vue

@@ -13,7 +13,7 @@
         <label for="username">Username</label>
         <InputText
           id="username"
-          type="text"
+          type="username"
           placeholder="Username"
           fluid
           :invalid="true"

src/all-custom/all-custom.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { text } from '@/__fk-inputs__/inputs/_demo_text';
-import { InputText } from '@/__fk-inputs__/inputs/input-text';
 import Swal from 'sweetalert2';
 
 async function submit() {
@@ -39,8 +38,8 @@ async function submit() {
       incomplete-message="Please fill out all fields."
     >
       <FormKit
-        :type="InputText"
+        type="PInputText"
-        name="typeInputText"
+        name="PInputText"
         label="输入框"
         placeholder="请输入"
         some="prop"