From ec9bef3fa98603da89521ca1d162a0be415c7892 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= Date: Mon, 25 Nov 2024 11:38:25 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20README=20=E5=92=8C?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E6=96=87=E4=BB=B6=EF=BC=8C=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=20PInputText=20=E7=BB=84=E4=BB=B6=E5=B9=B6=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=96=87=E6=9C=AC=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 8 ++- formkit.config.ts | 2 + src/__fk-inputs__/inputs/_demo_text.ts | 43 ++++++++------ src/__fk-inputs__/inputs/input-text.ts | 58 +++++++------------ .../all-custom-primevue.vue | 2 +- src/all-custom/all-custom.vue | 5 +- 6 files changed, 59 insertions(+), 59 deletions(-) diff --git a/README.md b/README.md index 83c2da5..14e97fc 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,27 @@ # [Vue FormKit Example](https://formkit.com) ## Knowledge + - https://youtu.be/v8Sb1mXDWa8 - [sections](https://formkit.com/inputs/text#sections) - [sections](https://formkit.com/essentials/inputs#sections) - [useformkitcontext](https://formkit.com/inputs/form#useformkitcontext) ## Custom Input + - https://formkit.com/guides/export-and-restructure-inputs + - `npx formkit@latest export` ## Example + - https://formkit.com/essentials/examples ## Theme + - https://themes.formkit.com/editor?theme=regenesis - [Creating a Tailwind CSS theme for FormKit](https://dev.to/andrewboyd/creating-a-tailwind-css-theme-for-formkit-45o4) - [issues: Tailwind prefix support for regenesis theme](https://github.com/formkit/formkit/issues/1157) ## 3rd Party -- https://github.com/mathsgod/formkit-element \ No newline at end of file + +- https://github.com/mathsgod/formkit-element diff --git a/formkit.config.ts b/formkit.config.ts index c85d327..366f038 100644 --- a/formkit.config.ts +++ b/formkit.config.ts @@ -11,6 +11,7 @@ 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'; // const apiKey = 'fk-6cdd5192223' const config: FormKitOptions = { @@ -22,6 +23,7 @@ const config: FormKitOptions = { form, submit, text, + PInputText, }), // createLibraryPlugin( // { diff --git a/src/__fk-inputs__/inputs/_demo_text.ts b/src/__fk-inputs__/inputs/_demo_text.ts index fb6df00..4d45efb 100644 --- a/src/__fk-inputs__/inputs/_demo_text.ts +++ b/src/__fk-inputs__/inputs/_demo_text.ts @@ -1,6 +1,7 @@ -import { FormKitTypeDefinition } from '@formkit/core' +import { FormKitTypeDefinition, type FormKitFrameworkContext } from '@formkit/core'; import { casts, + createSection, help, icon, inner, @@ -9,10 +10,10 @@ import { prefix, suffix, textInput, - wrapper -} from '@formkit/inputs' -import { messages } from '../sections/messages' - + wrapper, +} from '@formkit/inputs'; +import { messages } from '../sections/messages'; +import { h, markRaw } from 'vue'; /** * Input definition for a text. @@ -23,16 +24,7 @@ export const text: FormKitTypeDefinition = { * The actual schema of the input, or a function that returns the schema. */ schema: outer( - wrapper( - label('$label'), - inner( - icon('prefix', 'label'), - prefix(), - textInput(), - suffix(), - icon('suffix') - ) - ), + wrapper(label('$label'), inner(icon('prefix', 'label'), prefix(), textInput(), suffix(), icon('suffix'))), help('$help'), messages(), ), @@ -54,7 +46,7 @@ export const text: FormKitTypeDefinition = { /** * Forces node.props.type to be this explicit value. */ - forceTypeProp: 'text', + // forceTypeProp: 'text', /** * Additional features that should be added to your input */ @@ -63,4 +55,21 @@ export const text: FormKitTypeDefinition = { * The key used to memoize the schema. */ // schemaMemoKey: 'g2f31c24kjh', -} +}; + +// @ts-ignore +const custom_FComponent = { + schema: createSection('input', () => ({ + $cmp: 'FComponent', + props: { context: '$node.context' }, + }))(), + library: markRaw(((props: { context: FormKitFrameworkContext } /* context */) => { + return h('XxxxCmp', { + id: props.context.id, + value: props.context._value, + ...props.context.attrs, + onInput: props.context.handlers.DOMInput, + onBlur: props.context.handlers.blur, + }); + }) satisfies import('vue').FunctionalComponent<{ context: FormKitFrameworkContext }>), +}; diff --git a/src/__fk-inputs__/inputs/input-text.ts b/src/__fk-inputs__/inputs/input-text.ts index 847d327..042266e 100644 --- a/src/__fk-inputs__/inputs/input-text.ts +++ b/src/__fk-inputs__/inputs/input-text.ts @@ -1,30 +1,36 @@ -import { FormKitTypeDefinition, type FormKitFrameworkContext } from '@formkit/core'; -import { - casts, - createSection, - label, - outer -} from '@formkit/inputs'; -import PInputText from 'primevue/inputtext'; -import { h, markRaw } from 'vue'; +import { FormKitTypeDefinition } from '@formkit/core'; +import type { FormKitInputs } from '@formkit/inputs'; +import { casts, createSection, label, outer } from '@formkit/inputs'; +import InputTextCmp from 'primevue/inputtext'; +import { markRaw } from 'vue'; import { messages } from '../sections/messages'; -export const InputText: FormKitTypeDefinition = { +declare module '@formkit/inputs' { + // https://formkit.com/essentials/custom-inputs#typescript-support + interface FormKitInputProps> { + PInputText: { + type: 'PInputText'; + }; + } +} + +export const PInputText: FormKitTypeDefinition = { type: 'input', schema: outer( label('$label'), // custom_FComponent.schema, createSection('input', () => ({ - $cmp: 'PInputText', + $cmp: 'InputTextCmp', bind: '$attrs', props: { invalid: '$state.invalid', - // 'type': '$type', + type: '$type', + 'a-typeeeee': '$type', + 'b-typeeeee': 'bbb', disabled: '$disabled', name: '$node.name', onInput: '$handlers.DOMInput', onBlur: '$handlers.blur', - // value: '$_value', modelValue: '$_value', id: '$id', 'aria-describedby': '$describedBy', @@ -35,30 +41,8 @@ export const InputText: FormKitTypeDefinition = { ), library: { // 'FComponent': custom_FComponent.library, - 'PInputText': markRaw(PInputText), + InputTextCmp: markRaw(InputTextCmp), }, features: [casts], - // family: 'text', - // forceTypeProp: 'text', // schemaMemoKey: 'g2f31c24kjh', -} - - -// @ts-ignore -const custom_FComponent = { - schema: createSection('input', () => ({ - $cmp: 'FComponent', - props: { context: '$node.context', }, - }))(), - library: markRaw( - ((props: { context: FormKitFrameworkContext; }, /* context */) => { - return h(PInputText, { - id: props.context.id, - value: props.context._value, - ...props.context.attrs, - onInput: props.context.handlers.DOMInput, - onBlur: props.context.handlers.blur, - }) - }) satisfies import('vue').FunctionalComponent<{ context: FormKitFrameworkContext }> - ) -} \ No newline at end of file +}; diff --git a/src/all-custom-primevue/all-custom-primevue.vue b/src/all-custom-primevue/all-custom-primevue.vue index bd3e745..001c07a 100644 --- a/src/all-custom-primevue/all-custom-primevue.vue +++ b/src/all-custom-primevue/all-custom-primevue.vue @@ -13,7 +13,7 @@ import { text } from '@/__fk-inputs__/inputs/_demo_text'; -import { InputText } from '@/__fk-inputs__/inputs/input-text'; import Swal from 'sweetalert2'; async function submit() { @@ -39,8 +38,8 @@ async function submit() { incomplete-message="Please fill out all fields." >