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

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

@@ -0,0 +1,14 @@
+<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__/inputs/inputs/form.ts

@@ -1,6 +1,5 @@
 import { FormKitTypeDefinition } from '@formkit/core'
 import {
-  formInput,
   messages,
   message,
   actions,
@@ -8,6 +7,7 @@ import {
   forms,
   disablesChildren,
 } from '@formkit/inputs'
+import { formInput } from '../sections/formInput'
 
 /**
  * Input definition for a form.
@@ -44,5 +44,5 @@ export const form: FormKitTypeDefinition = {
   /**
    * The key used to memoize the schema.
    */
-  schemaMemoKey: 'rorzq1rsrf',
+  // schemaMemoKey: 'rorzq1rsrf',
 }

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

@@ -0,0 +1,68 @@
+import { FormKitTypeDefinition } from '@formkit/core'
+import {
+  outer,
+  inner,
+  wrapper,
+  label,
+  help,
+  messages,
+  message,
+  icon,
+  prefix,
+  suffix,
+  textInput,
+  casts,
+  createSection,
+} from '@formkit/inputs'
+
+
+/**
+ * Input definition for a text.
+ * @public
+ */
+export const text: FormKitTypeDefinition = {
+  /**
+   * The actual schema of the input, or a function that returns the schema.
+   */
+  schema: outer(
+    wrapper(
+      label('$label'),
+      inner(
+        icon('prefix', 'label'),
+        prefix(),
+        textInput(),
+        suffix(),
+        icon('suffix')
+      )
+    ),
+    help('$help'),
+    messages(message('$message.value'))
+  ),
+  /**
+   * The type of node, can be a list, group, or input.
+   */
+  type: 'input',
+  /**
+   * The family of inputs this one belongs too. For example "text" and "email"
+   * are both part of the "text" family. This is primary used for styling.
+   */
+  family: 'text',
+  /**
+   * An array of extra props to accept for this input.
+   */
+  props: [
+    // 'label2',
+  ],
+  /**
+   * Forces node.props.type to be this explicit value.
+   */
+  forceTypeProp: 'text',
+  /**
+   * Additional features that should be added to your input
+   */
+  features: [casts],
+  /**
+   * The key used to memoize the schema.
+   */
+  // schemaMemoKey: 'g2f31c24kjh',
+}

src/__fk-inputs__/inputs/sections/formInput.ts

@@ -0,0 +1,20 @@
+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/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>

src/assets/main.css

@@ -24,3 +24,9 @@ body {
     background-color: #1f2937;
   }
 }
+
+
+/* DEV: */
+.formkit-outer {
+  border: 1px solid #e5e7eb;
+}