diff --git a/src/__fk-inputs__/components/input-text.vue b/src/__fk-inputs__/components/input-text.vue deleted file mode 100644 index 14ba2d1..0000000 --- a/src/__fk-inputs__/components/input-text.vue +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/src/__fk-inputs__/components/messages.vue b/src/__fk-inputs__/components/messages.vue new file mode 100644 index 0000000..1ede675 --- /dev/null +++ b/src/__fk-inputs__/components/messages.vue @@ -0,0 +1,24 @@ + + + diff --git a/src/__fk-inputs__/inputs/inputs/text.ts b/src/__fk-inputs__/inputs/_demo_text.ts similarity index 100% rename from src/__fk-inputs__/inputs/inputs/text.ts rename to src/__fk-inputs__/inputs/_demo_text.ts diff --git a/src/__fk-inputs__/inputs/inputs/form.ts b/src/__fk-inputs__/inputs/form.ts similarity index 77% rename from src/__fk-inputs__/inputs/inputs/form.ts rename to src/__fk-inputs__/inputs/form.ts index 33e341c..1c99305 100644 --- a/src/__fk-inputs__/inputs/inputs/form.ts +++ b/src/__fk-inputs__/inputs/form.ts @@ -6,8 +6,22 @@ import { submitInput, forms, disablesChildren, + createSection, } from '@formkit/inputs' -import { formInput } from '../sections/formInput' + +const formInput = createSection('form', () => ({ + $el: 'form', + bind: '$attrs', + meta: { + autoAnimate: true, + }, + attrs: { + id: '$id', + name: '$node.name', + onSubmit: '$handlers.submit', + 'data-loading': '$state.loading || undefined', + }, +})) /** * Input definition for a form. diff --git a/src/__fk-inputs__/inputs/input-text.ts b/src/__fk-inputs__/inputs/input-text.ts new file mode 100644 index 0000000..8768f5c --- /dev/null +++ b/src/__fk-inputs__/inputs/input-text.ts @@ -0,0 +1,67 @@ +import MessagesCmp from '@/__fk-inputs__/components/messages.vue'; +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'; + +export const InputText: FormKitTypeDefinition = { + type: 'input', + schema: outer( + label('$label'), + // custom_FComponent.schema, + createSection('input', () => ({ + $cmp: 'PInputText', + bind: '$attrs', + props: { + // 'type': '$type', + disabled: '$disabled', + name: '$node.name', + onInput: '$handlers.DOMInput', + onBlur: '$handlers.blur', + value: '$_value', + id: '$id', + 'aria-describedby': '$describedBy', + 'aria-required': '$state.required || undefined', + }, + }))(), + createSection('messages', () => ({ + $cmp: 'MessagesCmp', + props: { context: '$node.context', }, + if: '$defaultMessagePlacement && $fns.length($messages)', + }))(), + ), + library: { + // 'FComponent': custom_FComponent.library, + 'PInputText': markRaw(PInputText), + 'MessagesCmp': markRaw(MessagesCmp) + }, + 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/__fk-inputs__/inputs/sections/formInput.ts b/src/__fk-inputs__/inputs/sections/formInput.ts deleted file mode 100644 index 9842323..0000000 --- a/src/__fk-inputs__/inputs/sections/formInput.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { createSection } from '@formkit/inputs' - -/** - * Form section - * - * @public - */ -export const formInput = createSection('form', () => ({ - $el: 'form', - bind: '$attrs', - meta: { - autoAnimate: true, - }, - attrs: { - id: '$id', - name: '$node.name', - onSubmit: '$handlers.submit', - 'data-loading': '$state.loading || undefined', - }, -})) diff --git a/src/__fk-inputs__/sections/messages.ts b/src/__fk-inputs__/sections/messages.ts new file mode 100644 index 0000000..99ee37a --- /dev/null +++ b/src/__fk-inputs__/sections/messages.ts @@ -0,0 +1,11 @@ +import { createSection } from '@formkit/inputs'; + +/** + * Messages section where all messages will be displayed. + * + * @public + */ +export const messages = createSection('messages', () => ({ + $el: 'ul', + if: '$defaultMessagePlacement && $fns.length($messages)', +})) diff --git a/src/all-custom/all-custom.vue b/src/all-custom/all-custom.vue index d33317c..49c9cd6 100644 --- a/src/all-custom/all-custom.vue +++ b/src/all-custom/all-custom.vue @@ -1,12 +1,8 @@ @@ -65,28 +27,32 @@ const fooInput: FormKitTypeDefinition = { :config="{ classes: { form: 'flex flex-col gap-4 w-full', + outer: 'flex flex-col gap-2', + label: 'font-bold block' } }" :type="form" + #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." > - - @@ -98,13 +64,15 @@ const fooInput: FormKitTypeDefinition = { - -
content
+
{{ value }}
+
+