feat: 更新 formkit 配置,优化组件导入和调试信息,调整提交延迟
This commit is contained in:
@ -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',
|
||||
}
|
||||
};
|
||||
|
@ -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)',
|
||||
}))
|
||||
}));
|
||||
|
@ -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
|
||||
">{{ 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>
|
||||
|
||||
|
Reference in New Issue
Block a user