feat: 更新 formkit 配置，优化组件导入和调试信息，调整提交延迟

formkit.config.plugin.debug.ts

@@ -2,7 +2,7 @@ export function debugPlugin(node: import('@formkit/core').FormKitNode) {
   if (['button', 'submit', 'hidden', 'group', 'list', 'meta'].includes(node.props.type)) return;
 
   node.on('created', () => {
-    console.group('[node created]', node.props.label || node.props.submitLabel);
+    console.group('[node created]', node.props.label || node.props.submitLabel || node.name);
     console.debug(`node :>> `, node);
     console.debug(`node.props.definition :>> `, node.props.definition);
     console.groupEnd();

formkit.config.ts

@@ -1,3 +1,6 @@
+import { form } from '@/__fk-inputs__/inputs/form';
+import { PInputPassword } from '@/__fk-inputs__/inputs/input-password';
+import { PInputText } from '@/__fk-inputs__/inputs/input-text';
 import { createAutoAnimatePlugin, createAutoHeightTextareaPlugin } from '@formkit/addons';
 import { autoAnimatePlugin } from '@formkit/auto-animate/vue';
 import type { FormKitOptions } from '@formkit/core';
@@ -10,9 +13,6 @@ import { /* defaultConfig, */ bindings, plugin /* defaultConfig */ } from '@form
 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';
-import { PInputPassword } from '@/__fk-inputs__/inputs/input-password';
 
 // const apiKey = 'fk-6cdd5192223'
 const config: FormKitOptions = {

src/__fk-inputs__/inputs/form.ts

@@ -1,12 +1,8 @@
-import { FormKitTypeDefinition } from '@formkit/core'
-import {
-  actions,
-  submitInput,
-  forms,
-  disablesChildren,
-  createSection,
-} from '@formkit/inputs'
-import { messages } from '../sections/messages'
+import { FormKitTypeDefinition } from '@formkit/core';
+import { actions, submitInput, forms, disablesChildren, createSection } from '@formkit/inputs';
+import { messages } from '../sections/messages';
+import PButton from 'primevue/button';
+import { markRaw } from 'vue';
 
 const formInput = createSection('form', () => ({
   $el: 'form',
@@ -20,42 +16,29 @@ const formInput = createSection('form', () => ({
     onSubmit: '$handlers.submit',
     'data-loading': '$state.loading || undefined',
   },
-}))
+}));
 
-/**
- * Input definition for a form.
- * @public
- */
 export const form: FormKitTypeDefinition = {
-  /**
-   * The actual schema of the input, or a function that returns the schema.
-   */
   schema: formInput(
     '$slots.default',
     messages(),
-    actions(submitInput())
+    actions(submitInput()),
+    createSection('button', () => ({
+      $cmp: markRaw(PButton) as any,
+      bind: '$submitAttrs',
+      props: {
+        type: 'submit',
+        label: '$submitLabel',
+      },
+    }))(),
   ),
-  /**
-   * The type of node, can be a list, group, or input.
-   */
   type: 'group',
-  /**
-   * An array of extra props to accept for this input.
-   */
   props: [
-    'actions',
-    'submit',
     'submitLabel',
     'submitAttrs',
     'submitBehavior',
-    'incompleteMessage',
+    'incompleteMessage', // 抱歉，部分字段未被正确填写。
   ],
-  /**
-   * Additional features that should be added to your input
-   */
   features: [forms, disablesChildren],
-  /**
-   * The key used to memoize the schema.
-   */
   // schemaMemoKey: 'rorzq1rsrf',
-}
+};

src/__fk-inputs__/sections/messages.ts

@@ -4,6 +4,6 @@ import { markRaw } from 'vue';
 
 export const messages = createSection('messages', () => ({
   $cmp: markRaw(MessagesCmp) as any, // [element = node.$cmp](https://github.com/formkit/formkit/blob/2d5387ba98597775cb2a752af65aee84bc438863/packages/vue/src/FormKitSchema.ts#L449)
-  props: { context: '$node.context', },
+  props: { context: '$node.context' },
   if: '$defaultMessagePlacement && $fns.length($messages)',
-}))
+}));

src/all-custom/all-custom.vue

@@ -3,13 +3,15 @@ import { text } from '@/__fk-inputs__/inputs/_demo_text';
 import { FormKitNode } from '@formkit/core';
 import Swal from 'sweetalert2';
 
+
+
 async function submit(formData: Record<string, any>, formNode: FormKitNode) {
   console.group('submit');
   console.log('formData :>> ', formData);
   console.log('formNode :>> ', formNode);
   console.groupEnd();
 
-  await new Promise(r => setTimeout(r, 500))
+  await new Promise(r => setTimeout(r, 2000))
   Swal.fire({
     title: 'Submitted! 🎉',
     icon: 'success',
@@ -40,9 +42,9 @@ async function submit(formData: Record<string, any>, formNode: FormKitNode) {
       #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."
+      :submit-attrs="{
+        'some-submit-attr': 'value',
+      }"
     >
       <FormKit
         type="PInputText"
@@ -65,31 +67,28 @@ async function submit(formData: Record<string, any>, formNode: FormKitNode) {
         :feedback="false"
       />
       <FormKit
+        v-if="!value?.PInputPassword"
         :type="text"
-        label="customType"
-        validation="required"
-        validation-visibility="live"
+        :preserve="false"
+        name="customType"
+        value="this input will display if the password is empty"
       >
         <!-- <template #label>
           <div>labelll</div>
         </template> -->
       </FormKit>
 
-      <FormKit
+      <!-- <FormKit
+        v-if="false"
         type="text"
         label="默认text"
         validation="required"
       >
-      </FormKit>
+      </FormKit> -->
 
-      <pre class="font-mono text-sm p-4 bg-slate-100 mb-4 dark:bg-gray-900 overflow-x-auto rounded-md shadow-inner dark:text-gray-300
+      <pre class="font-mono text-sm p-4 bg-slate-100 dark:bg-gray-900 overflow-x-auto rounded-md shadow-inner dark:text-gray-300
       ">{{ value }}</pre>
       <!-- <FormKitSummary /> -->
-
-      <button
-        type="submit"
-        class="btn btn-primary"
-      >提交 ✨ </button>
     </FormKit>
   </Fieldset>