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)',
+}))