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 @@
-
-
- input-text.vue
-
-
-
-
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 }}
+
+