feat: 更新 formkit 配置,优化组件导入和调试信息,调整提交延迟
All checks were successful
/ test (push) Successful in 27s
/ surge (push) Successful in 44s

This commit is contained in:
严浩
2024-11-25 15:02:39 +08:00
parent d7058af64c
commit 0f45fcbf25
5 changed files with 38 additions and 56 deletions

View File

@ -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',
}
};

View File

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

View File

@ -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 dont 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
">{{ value }}</pre>
<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>