feat: 删除 input-text 组件，添加消息组件，重构表单输入逻辑

src/__fk-inputs__/components/input-text.vue

@@ -1,14 +0,0 @@
-<template>
-  <div>
-    input-text.vue
-  </div>
-</template>
-
-<script setup lang="ts">
-import { FormKitFrameworkContext } from '@formkit/core';
-
-const props = defineProps<{
-  context: FormKitFrameworkContext & { 'some': string };
-}>();
-console.debug(`props.context.some :>> `, props.context.some);
-</script>

src/__fk-inputs__/components/messages.vue

@@ -0,0 +1,24 @@
+<template>
+  <Message
+    severity="error"
+    size="small"
+    variant="simple"
+  >
+    <!-- <template #container> -->
+    <ul class="my-0 flex flex-col gap-1">
+      <li
+        v-for="message in context.messages"
+        :key="message.key"
+        :id="`${context.id}-${message.key}`"
+        :data-message-type="message.type"
+      >{{ message.value }}</li>
+    </ul>
+    <!-- </template> -->
+  </Message>
+</template>
+
+<script setup lang="ts">
+import { FormKitFrameworkContext } from '@formkit/core';
+import Message from 'primevue/message';
+defineProps<{ context: FormKitFrameworkContext }>();
+</script>

src/__fk-inputs__/inputs/form.ts

@@ -6,8 +6,22 @@ import {
   submitInput,
   forms,
   disablesChildren,
+  createSection,
 } from '@formkit/inputs'
-import { formInput } from '../sections/formInput'
+
+const formInput = createSection('form', () => ({
+  $el: 'form',
+  bind: '$attrs',
+  meta: {
+    autoAnimate: true,
+  },
+  attrs: {
+    id: '$id',
+    name: '$node.name',
+    onSubmit: '$handlers.submit',
+    'data-loading': '$state.loading || undefined',
+  },
+}))
 
 /**
  * Input definition for a form.

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

@@ -0,0 +1,67 @@
+import MessagesCmp from '@/__fk-inputs__/components/messages.vue';
+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';
+
+export const InputText: FormKitTypeDefinition = {
+  type: 'input',
+  schema: outer(
+    label('$label'),
+    // custom_FComponent.schema,
+    createSection('input', () => ({
+      $cmp: 'PInputText',
+      bind: '$attrs',
+      props: {
+        // 'type': '$type',
+        disabled: '$disabled',
+        name: '$node.name',
+        onInput: '$handlers.DOMInput',
+        onBlur: '$handlers.blur',
+        value: '$_value',
+        id: '$id',
+        'aria-describedby': '$describedBy',
+        'aria-required': '$state.required || undefined',
+      },
+    }))(),
+    createSection('messages', () => ({
+      $cmp: 'MessagesCmp',
+      props: { context: '$node.context', },
+      if: '$defaultMessagePlacement && $fns.length($messages)',
+    }))(),
+  ),
+  library: {
+    // 'FComponent': custom_FComponent.library,
+    'PInputText': markRaw(PInputText),
+    'MessagesCmp': markRaw(MessagesCmp)
+  },
+  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/__fk-inputs__/inputs/sections/formInput.ts

@@ -1,20 +0,0 @@
-import { createSection } from '@formkit/inputs'
-
-/**
- * Form section
- *
- * @public
- */
-export const formInput = createSection('form', () => ({
-  $el: 'form',
-  bind: '$attrs',
-  meta: {
-    autoAnimate: true,
-  },
-  attrs: {
-    id: '$id',
-    name: '$node.name',
-    onSubmit: '$handlers.submit',
-    'data-loading': '$state.loading || undefined',
-  },
-}))

src/__fk-inputs__/sections/messages.ts

@@ -0,0 +1,11 @@
+import { createSection } from '@formkit/inputs';
+
+/**
+ * Messages section where all messages will be displayed.
+ *
+ * @public
+ */
+export const messages = createSection('messages', () => ({
+  $el: 'ul',
+  if: '$defaultMessagePlacement && $fns.length($messages)',
+}))

src/all-custom/all-custom.vue

@@ -1,12 +1,8 @@
 <script setup lang="ts">
+import { form } from '@/__fk-inputs__/inputs/form';
+import { InputText } from '@/__fk-inputs__/inputs/input-text';
+import { text } from '@/__fk-inputs__/inputs/_demo_text';
 import Swal from 'sweetalert2';
-import { createInput, FormKitSummary } from '@formkit/vue'
-import { form } from '__fk-inputs__/inputs/inputs/form';
-import { text } from '@/__fk-inputs__/inputs/inputs/text';
-import InputText from '@/__fk-inputs__/components/input-text.vue'
-import { createSection, outer } from '@formkit/inputs'
-import { FormKitTypeDefinition } from '@formkit/core';
-import { markRaw } from 'vue';
 
 async function submit() {
   await new Promise(r => setTimeout(r, 500))
@@ -18,40 +14,6 @@ async function submit() {
   })
 }
 
-/* const fooInput = createInput(
-  'hello11',
-  {
-    schemaMemoKey: '',
-  },
-  {
-    label: null,
-  }
-)
-console.debug(`fooInput :>> `, fooInput); */
-
-
-
-const fooInput: FormKitTypeDefinition = {
-  type: 'input',
-  props: ['some'],
-  schema: outer(
-    createSection('input', () => ({
-      $cmp: 'cmpName',
-      props: {
-        context: '$node.context',
-      },
-    }))(),
-  ),
-  library: {
-    'cmpName': markRaw(InputText),
-  },
-  // schema: createSection('input', () => ({
-  //   $cmp: InputText,
-  //   props: {
-  //     context: '$node.context',
-  //   },
-  // }))
-}
 
 </script>
 
@@ -65,28 +27,32 @@ const fooInput: FormKitTypeDefinition = {
       :config="{
         classes: {
           form: 'flex flex-col gap-4 w-full',
+          outer: 'flex flex-col gap-2',
+          label: 'font-bold block'
         }
       }"
       :type="form"
+      #default="{ value }"
       @submit="submit"
       submit-label="提交 ✨"
       :submit-attrs="{ class: 'btn btn-primary' }"
       :errors="['our server is not working.', 'But we don’t like you anyway!']"
       incomplete-message="Please fill out all fields."
     >
-
       <FormKit
-        :type="fooInput"
-        label="fooInput"
+        :type="InputText"
+        name="typeInputText"
+        label="输入框"
+        placeholder="请输入"
         some="prop"
         validation="required"
         validation-visibility="live"
       >
       </FormKit>
-
       <FormKit
         :type="text"
         label="customType"
+        value="default value"
         validation="required"
         validation-visibility="live"
       >
@@ -98,13 +64,15 @@ const fooInput: FormKitTypeDefinition = {
       <FormKit
         type="text"
         label="默认text"
+        value="default value"
         validation="required"
         validation-visibility="live"
       >
       </FormKit>
 
-      <FormKitSummary />
-      <div>content</div>
+      <pre class="font-mono text-sm p-4 bg-slate-100 mb-4 dark:bg-gray-900 ">{{ value }}</pre>
+      <!-- <FormKitSummary /> -->
     </FormKit>
   </Fieldset>
+
 </template>