From 0f45fcbf25e74d68cc592ebc2478230756eb357b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= Date: Mon, 25 Nov 2024 15:02:39 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20formkit=20?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=EF=BC=8C=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=AF=BC=E5=85=A5=E5=92=8C=E8=B0=83=E8=AF=95=E4=BF=A1=E6=81=AF?= =?UTF-8?q?=EF=BC=8C=E8=B0=83=E6=95=B4=E6=8F=90=E4=BA=A4=E5=BB=B6=E8=BF=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- formkit.config.plugin.debug.ts | 2 +- formkit.config.ts | 6 +-- src/__fk-inputs__/inputs/form.ts | 51 +++++++++----------------- src/__fk-inputs__/sections/messages.ts | 4 +- src/all-custom/all-custom.vue | 31 ++++++++-------- 5 files changed, 38 insertions(+), 56 deletions(-) diff --git a/formkit.config.plugin.debug.ts b/formkit.config.plugin.debug.ts index cca57f3..b465b72 100644 --- a/formkit.config.plugin.debug.ts +++ b/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(); diff --git a/formkit.config.ts b/formkit.config.ts index 5195cd8..85a3f0d 100644 --- a/formkit.config.ts +++ b/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 = { diff --git a/src/__fk-inputs__/inputs/form.ts b/src/__fk-inputs__/inputs/form.ts index 60da488..4359f70 100644 --- a/src/__fk-inputs__/inputs/form.ts +++ b/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', -} +}; diff --git a/src/__fk-inputs__/sections/messages.ts b/src/__fk-inputs__/sections/messages.ts index 7c8c7c3..77f2cd1 100644 --- a/src/__fk-inputs__/sections/messages.ts +++ b/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)', -})) +})); diff --git a/src/all-custom/all-custom.vue b/src/all-custom/all-custom.vue index daeb0f0..14459a7 100644 --- a/src/all-custom/all-custom.vue +++ b/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, 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, 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', + }" > , formNode: FormKitNode) { :feedback="false" /> - - + --> - 
{{ value }}
+ 
{{ value }}
- -