diff --git a/.vscode/settings.json b/.vscode/settings.json index 28f2226..0dde9a5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,12 +3,12 @@ "source.fixAll": "explicit" }, "[vue]": { - "editor.defaultFormatter": "Vue.volar", + "editor.defaultFormatter": "Vue.volar" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "editor.formatOnSave": true, "editor.formatOnSaveMode": "file", - "typescript.tsdk": "node_modules/typescript/lib", -} \ No newline at end of file + "typescript.tsdk": "node_modules/typescript/lib" +} diff --git a/components.d.ts b/components.d.ts index 66e84c7..8cda0ff 100644 --- a/components.d.ts +++ b/components.d.ts @@ -7,14 +7,9 @@ export {} /* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { - Button: typeof import('primevue/button')['default'] - BUtton: typeof import('primevue/button')['default'] Fieldset: typeof import('primevue/fieldset')['default'] - Form: typeof import('@primevue/forms/form')['default'] - FormField: typeof import('@primevue/forms/formfield')['default'] + FloatLabel: typeof import('primevue/floatlabel')['default'] InputText: typeof import('primevue/inputtext')['default'] Message: typeof import('primevue/message')['default'] - Password: typeof import('primevue/password')['default'] - Toast: typeof import('primevue/toast')['default'] } } diff --git a/src/App.vue b/src/App.vue index 709b9c4..031ccaf 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,4 +13,11 @@ import ZodForm from './zod-form/index.vue'; + +
+ + + + +
diff --git a/src/__fk-inputs__/inputs/_demo_text.ts b/src/__fk-inputs__/inputs/_demo_text.ts deleted file mode 100644 index c6c8e19..0000000 --- a/src/__fk-inputs__/inputs/_demo_text.ts +++ /dev/null @@ -1,77 +0,0 @@ -import { FormKitTypeDefinition, type FormKitFrameworkContext } from '@formkit/core'; -import { - casts, - createSection, - help, - icon, - inner, - label, - outer, - prefix, - suffix, - textInput, - wrapper, -} from '@formkit/inputs'; -import { messages } from '../sections/messages'; -import { h, markRaw } from 'vue'; - -// https://github.com/formkit/formkit/blob/e57ad1632b95d34d9e6cf046a4802f7ae389700e/packages/vue/src/composables/createInput.ts - -/** - * Input definition for a text. - * @public - */ -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'))), - help('$help'), - messages(), - ), - /** - * The type of node, can be a list, group, or input. - */ - type: 'input', - /** - * The family of inputs this one belongs too. For example "text" and "email" - * are both part of the "text" family. This is primary used for styling. - */ - family: 'text', - /** - * An array of extra props to accept for this input. - */ - props: [ - // 'label2', - ], - /** - * Forces node.props.type to be this explicit value. - */ - // forceTypeProp: 'text', - /** - * Additional features that should be added to your input - */ - features: [casts], - /** - * 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/form.ts b/src/__fk-inputs__/inputs/form.ts index adb89ae..9643484 100644 --- a/src/__fk-inputs__/inputs/form.ts +++ b/src/__fk-inputs__/inputs/form.ts @@ -11,9 +11,9 @@ const formInput = createSection('form', () => ({ autoAnimate: true, }, attrs: { - id: '$id', - name: '$node.name', - onSubmit: '$handlers.submit', + 'id': '$id', + 'name': '$node.name', + 'onSubmit': '$handlers.submit', 'data-loading': '$state.loading || undefined', }, })); @@ -33,13 +33,13 @@ const button = createSection( ); export const form: FormKitTypeDefinition = { + type: 'group', schema: formInput( '$slots.default', messages(), actions(submitInput()), button(), // ), - type: 'group', props: [ 'submitLabel', 'submitAttrs', diff --git a/src/__fk-inputs__/inputs/input-password.ts b/src/__fk-inputs__/inputs/input-password.ts index 2afdcae..70fbe5c 100644 --- a/src/__fk-inputs__/inputs/input-password.ts +++ b/src/__fk-inputs__/inputs/input-password.ts @@ -4,29 +4,35 @@ import { casts, createSection, label, outer } from '@formkit/inputs'; import SchemaComponent from 'primevue/password'; import { markRaw } from 'vue'; import { messages } from '../sections/messages'; +import { floatLabel } from '../sections/floatLabel'; + +const input = createSection('input', () => ({ + $cmp: markRaw(SchemaComponent) as never, + bind: '$attrs', + props: { + invalid: '$state.invalid', + disabled: '$disabled', + // name: '$node.name', + // inputProps: {} + onInput: '$handlers.DOMInput', + onBlur: '$handlers.blur', + modelValue: '$_value', + inputId: '$id', + fluid: true, + }, +})); export const PInputPassword: FormKitTypeDefinition = { type: 'input', schema: outer( - label('$label'), - createSection('input', () => ({ - $cmp: markRaw(SchemaComponent) as never, - bind: '$attrs', - props: { - invalid: '$state.invalid', - disabled: '$disabled', - // name: '$node.name', - // inputProps: {} - onInput: '$handlers.DOMInput', - onBlur: '$handlers.blur', - modelValue: '$_value', - inputId: '$id', - }, - }))(), + floatLabel( + input(), // + label('$label'), + ), messages(), ), features: [casts], - // schemaMemoKey: 'g2f31c24kjh', + // schemaMemoKey: 'g2f31c24kjh', // Math.random().toString(36).substring(2, 15) }; declare module '@formkit/inputs' { diff --git a/src/__fk-inputs__/inputs/input-text.ts b/src/__fk-inputs__/inputs/input-text.ts index d1ba1b8..09d12a6 100644 --- a/src/__fk-inputs__/inputs/input-text.ts +++ b/src/__fk-inputs__/inputs/input-text.ts @@ -3,35 +3,36 @@ import type { FormKitInputs } from '@formkit/inputs'; import { casts, createSection, label, outer } from '@formkit/inputs'; import SchemaComponent from 'primevue/inputtext'; import { markRaw } from 'vue'; +import { floatLabel } from '../sections/floatLabel'; import { messages } from '../sections/messages'; -const cmpName = `SchemaComponent${SchemaComponent.name}`; +const input = createSection('input', () => ({ + $cmp: markRaw(SchemaComponent) as never, + bind: '$attrs', + props: { + invalid: '$state.invalid', + type: '$type', + disabled: '$disabled', + name: '$node.name', + onInput: '$handlers.DOMInput', + onBlur: '$handlers.blur', + modelValue: '$_value', + id: '$id', + fluid: true, + }, +})); export const PInputText: FormKitTypeDefinition = { type: 'input', schema: outer( - label('$label'), - createSection('input', () => ({ - $cmp: cmpName, - bind: '$attrs', - props: { - invalid: '$state.invalid', - type: '$type', - disabled: '$disabled', - name: '$node.name', - onInput: '$handlers.DOMInput', - onBlur: '$handlers.blur', - modelValue: '$_value', - id: '$id', - }, - }))(), + floatLabel( + input(), // + label('$label'), + ), messages(), ), - library: { - [cmpName]: markRaw(SchemaComponent), - }, features: [casts], - // schemaMemoKey: 'g2f31c24kjh', + // schemaMemoKey: 'g2f31c24kjh', // Math.random().toString(36).substring(2, 15) }; declare module '@formkit/inputs' { diff --git a/src/__fk-inputs__/sections/floatLabel.ts b/src/__fk-inputs__/sections/floatLabel.ts new file mode 100644 index 0000000..6155785 --- /dev/null +++ b/src/__fk-inputs__/sections/floatLabel.ts @@ -0,0 +1,8 @@ +import { createSection } from '@formkit/inputs'; +import FloatLabel from 'primevue/floatlabel'; +import { markRaw } from 'vue'; + +export const floatLabel = createSection('floatLabel', () => ({ + $cmp: markRaw(FloatLabel) as never, + bind: '$attrs', +})); diff --git a/src/all-custom/all-custom.vue b/src/all-custom/all-custom.vue index 5f34399..03a2e45 100644 --- a/src/all-custom/all-custom.vue +++ b/src/all-custom/all-custom.vue @@ -1,10 +1,8 @@