feat: 重构表单输入组件，添加文本输入类型，优化配置和样式

src/all-custom/all-custom.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
 import Swal from 'sweetalert2';
-import { form } from '../inputs/form'
-import { FormKitSummary } from '@formkit/vue'
+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, 300))
+  await new Promise(r => setTimeout(r, 500))
   Swal.fire({
     title: 'Submitted! 🎉',
     icon: 'success',
@@ -12,20 +17,94 @@ async function submit() {
     timer: 1500
   })
 }
+
+/* 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>
 
 <template>
-
-  <!-- https://formkit.com/inputs/form#props-attributes -->
-  <FormKit
-    :type="form"
-    @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."
+  <Fieldset
+    legend="Form 1"
+    pt:content:class="flex justify-center"
   >
-    <FormKitSummary />
-    <div>content</div>
-  </FormKit>
+    <!-- https://formkit.com/inputs/form#props-attributes -->
+    <FormKit
+      :config="{
+        classes: {
+          form: 'flex flex-col gap-4 w-full',
+        }
+      }"
+      :type="form"
+      @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"
+        some="prop"
+        validation="required"
+        validation-visibility="live"
+      >
+      </FormKit>
+
+      <FormKit
+        :type="text"
+        label="customType"
+        validation="required"
+        validation-visibility="live"
+      >
+        <!-- <template #label>
+          <div>labelll</div>
+        </template> -->
+      </FormKit>
+
+      <FormKit
+        type="text"
+        label="默认text"
+        validation="required"
+        validation-visibility="live"
+      >
+      </FormKit>
+
+      <FormKitSummary />
+      <div>content</div>
+    </FormKit>
+  </Fieldset>
 </template>