diff --git a/.env b/.env new file mode 100644 index 0000000..b2545d2 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +VITE_DEBUG_FORMKIT=true \ No newline at end of file diff --git a/formkit.config.ts b/formkit.config.ts index 31b9eeb..44bad88 100644 --- a/formkit.config.ts +++ b/formkit.config.ts @@ -3,7 +3,7 @@ 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'; +import type { FormKitOptions, FormKitPlugin } from '@formkit/core'; import { register as decodeErrors } from '@formkit/dev'; import { createI18nPlugin, zh } from '@formkit/i18n'; import { createLibraryPlugin, group, submit, text } from '@formkit/inputs'; @@ -14,53 +14,56 @@ import type { App } from 'vue'; import { addAsteriskPlugin } from './formkit.config.plugin.addAsteriskPlugin'; import { debugPlugin } from './formkit.config.plugin.debug'; +const plugins: FormKitPlugin[] = [ + // createProPlugin(apiKey, { toggle }), + // createLibraryPlugin(fkLibrary), + createLibraryPlugin({ + text, + submit, + group, + // ============================== + form, + PInputText, + PInputPassword, + }), + // createLibraryPlugin( + // { + // 'headlessuiSwitch': createInput(HeadlessuiToggle), + // } + // ), + // createThemePlugin( + // theme: undefined /* icons: genesisIcons, iconLoaderUrl, iconLoader */, + // ), + // ############################# + bindings, + createI18nPlugin({ zh }), + createValidationPlugin(defaultRules), + addAsteriskPlugin, + createAutoHeightTextareaPlugin(/* https://github.com/formkit/formkit/blob/ac1947a305eb5082ba95f53800305d080787cb32/packages/addons/src/plugins/autoHeightTextarea.ts */), + createAutoAnimatePlugin( + // https://auto-animate.formkit.com/#usage + // https://github.com/formkit/auto-animate/ + // https://github.com/formkit/formkit/blob/46d64d05c1b37875fc6227853f2bcfa987550c91/packages/addons/src/plugins/autoAnimatePlugin.ts + { + duration: 250, + easing: 'ease-in-out', + }, + { + /* optional animation targets object */ + // default: + global: ['outer', 'inner'], + form: ['form'], + repeater: ['items'], + }, + ), +]; +if (import.meta.env.VITE_DEBUG_FORMKIT === 'true') { + plugins.push(debugPlugin); +} + // const apiKey = 'fk-6cdd5192223' const config: FormKitOptions = { - plugins: [ - ...[ - // createProPlugin(apiKey, { toggle }), - // createLibraryPlugin(fkLibrary), - createLibraryPlugin({ - text, - submit, - group, - // ============================== - form, - PInputText, - PInputPassword, - }), - // createLibraryPlugin( - // { - // 'headlessuiSwitch': createInput(HeadlessuiToggle), - // } - // ), - ], - // createThemePlugin( - // theme: undefined /* icons: genesisIcons, iconLoaderUrl, iconLoader */, - // ), - bindings, - createI18nPlugin({ zh }), - createValidationPlugin(defaultRules), - addAsteriskPlugin, - createAutoHeightTextareaPlugin(/* https://github.com/formkit/formkit/blob/ac1947a305eb5082ba95f53800305d080787cb32/packages/addons/src/plugins/autoHeightTextarea.ts */), - createAutoAnimatePlugin( - // https://auto-animate.formkit.com/#usage - // https://github.com/formkit/auto-animate/ - // https://github.com/formkit/formkit/blob/46d64d05c1b37875fc6227853f2bcfa987550c91/packages/addons/src/plugins/autoAnimatePlugin.ts - { - duration: 250, - easing: 'ease-in-out', - }, - { - /* optional animation targets object */ - // default: - global: ['outer', 'inner'], - form: ['form'], - repeater: ['items'], - }, - ), - debugPlugin, - ], + plugins, config: { // rootClasses: false, // rootClasses, diff --git a/src/all-custom/all-custom.vue b/src/all-custom/all-custom.vue index ac22c9a..548edae 100644 --- a/src/all-custom/all-custom.vue +++ b/src/all-custom/all-custom.vue @@ -105,7 +105,7 @@ async function submit(formData: Record, formNode: FormKitNode) { label="Button" @click="() => { value!.button = value!.button || {}; - (value!.button as any).clicked = 'clicked'; + (value!.button as any).clicked = 'clicked-这个值在@submit回调的formData里不会出现'; (value!.group as any)['text-in-group-1'] = 'changed-by-button'; }" />