From 5d5fc40348f95eaa4f3ba9855c6de76797492e5e Mon Sep 17 00:00:00 2001 From: Davide Di Pumpo Date: Fri, 31 Oct 2025 12:39:34 +0100 Subject: [PATCH 1/4] Revert "tries to improve performances (#506)" This reverts commit 92cf3c4c4a671418c17fd2ea1fd7f083a7f22125. --- .../src/components/OmegaForm/OmegaArray.vue | 5 ++-- .../src/components/OmegaForm/OmegaAutoGen.vue | 11 ++++---- .../components/OmegaForm/OmegaFormInput.vue | 5 ++-- .../components/OmegaForm/OmegaFormStuff.ts | 28 ++++++++----------- .../src/components/OmegaForm/OmegaInput.vue | 5 ++-- .../src/components/OmegaForm/useOmegaForm.ts | 12 ++++---- 6 files changed, 29 insertions(+), 37 deletions(-) diff --git a/packages/vue-components/src/components/OmegaForm/OmegaArray.vue b/packages/vue-components/src/components/OmegaForm/OmegaArray.vue index 3f62a9810a..7aeede001d 100644 --- a/packages/vue-components/src/components/OmegaForm/OmegaArray.vue +++ b/packages/vue-components/src/components/OmegaForm/OmegaArray.vue @@ -45,15 +45,14 @@ generic=" // dprint ignore - somehow with 120 chars, this becomes a mess. should report it. From extends Record, - To extends Record, - Name extends DeepKeys + To extends Record " > import { type DeepKeys } from "@tanstack/vue-form" import { computed, onMounted, provide } from "vue" import { type OmegaArrayProps } from "./OmegaFormStuff" -const props = defineProps>() +const props = defineProps>() defineOptions({ inheritAttrs: false diff --git a/packages/vue-components/src/components/OmegaForm/OmegaAutoGen.vue b/packages/vue-components/src/components/OmegaForm/OmegaAutoGen.vue index cb36af8dae..7021347e93 100644 --- a/packages/vue-components/src/components/OmegaForm/OmegaAutoGen.vue +++ b/packages/vue-components/src/components/OmegaForm/OmegaAutoGen.vue @@ -4,7 +4,7 @@ :child="{ name, label, ...attrs }" > @@ -16,16 +16,15 @@ lang="ts" generic=" From extends Record, - To extends Record, - Name extends DeepKeys + To extends Record " > import { type DeepKeys } from "@tanstack/vue-form" import { Array as A, Order, pipe } from "effect-app" import { computed } from "vue" -import { type FieldMeta, type FieldPath, type OmegaAutoGenMeta, type OmegaInputProps } from "./OmegaFormStuff" +import { type FieldMeta, type OmegaAutoGenMeta, type OmegaInputProps } from "./OmegaFormStuff" -type NewMeta = OmegaAutoGenMeta +type NewMeta = OmegaAutoGenMeta const mapObject = (fn: (value: A, key: K) => B) => (obj: Record): Record => Object.fromEntries( @@ -52,7 +51,7 @@ const filterMapRecord = ) const props = defineProps<{ - form: OmegaInputProps["form"] + form: OmegaInputProps["form"] pick?: DeepKeys[] omit?: DeepKeys[] labelMap?: (key: DeepKeys) => string | undefined diff --git a/packages/vue-components/src/components/OmegaForm/OmegaFormInput.vue b/packages/vue-components/src/components/OmegaForm/OmegaFormInput.vue index e598b0c2bc..4e8b9d2472 100644 --- a/packages/vue-components/src/components/OmegaForm/OmegaFormInput.vue +++ b/packages/vue-components/src/components/OmegaForm/OmegaFormInput.vue @@ -27,8 +27,7 @@ import { OmegaFormKey } from "./useOmegaForm" const form = inject(OmegaFormKey) as unknown as OmegaInputProps< From, - To, - Name + To >["form"] if (!form) { @@ -36,7 +35,7 @@ if (!form) { } defineProps< - BaseProps & DefaultTypeProps + BaseProps & DefaultTypeProps >() defineSlots<{ diff --git a/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts b/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts index 855c480c7f..8682e4558e 100644 --- a/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts +++ b/packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts @@ -17,19 +17,19 @@ export type FieldPath = unknown extends T ? string // technically we cannot have primitive at the root : T extends string | boolean | number | null | undefined | symbol | bigint ? "" // technically we cannot have array at the root - : T extends ReadonlyArray ? FieldPath_ + : T extends ReadonlyArray ? Compute> : { - [K in keyof T]: FieldPath_ + [K in keyof T]: Compute> }[keyof T] export type FieldPath_ = unknown extends T ? string : T extends string | boolean | number | null | undefined | symbol | bigint ? Path - : T extends ReadonlyArray ? FieldPath_ | Path + : T extends ReadonlyArray ? Compute> | Path : { - [K in keyof T]: FieldPath_ + [K in keyof T]: Compute> }[keyof T] -export type BaseProps> = { +export type BaseProps = FieldPath> = { /** * Will fallback to i18n when not specified. * Can also be provided via #label slot for custom HTML labels. @@ -64,34 +64,31 @@ export type DefaultTypeProps = { export type OmegaInputPropsBase< From extends Record, - To extends Record, - Name extends DeepKeys + To extends Record > = { form: OF & { meta: MetaRecord i18nNamespace?: string } -} & BaseProps +} & BaseProps export type OmegaInputProps< From extends Record, To extends Record, - Name extends DeepKeys, TypeProps = DefaultTypeProps > = { form: OmegaFormReturn & { meta: MetaRecord i18nNamespace?: string } -} & BaseProps +} & BaseProps export type OmegaArrayProps< From extends Record, - To extends Record, - Name extends DeepKeys + To extends Record > = & Omit< - OmegaInputProps, + OmegaInputProps, "validators" | "options" | "label" | "type" | "items" | "name" > & { @@ -889,9 +886,8 @@ export const nullableInput = ( export type OmegaAutoGenMeta< From extends Record, - To extends Record, - Name extends DeepKeys -> = Omit, "form"> + To extends Record +> = Omit, "form"> const supportedInputs = [ "button", diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInput.vue b/packages/vue-components/src/components/OmegaForm/OmegaInput.vue index de2e80f90a..9da3d19995 100644 --- a/packages/vue-components/src/components/OmegaForm/OmegaInput.vue +++ b/packages/vue-components/src/components/OmegaForm/OmegaInput.vue @@ -40,8 +40,7 @@ generic=" // dprint ignore - somehow with 120 chars, this becomes a mess. should report it. From extends Record, - To extends Record, - Name extends DeepKeys + To extends Record " > import { type DeepKeys } from "@tanstack/vue-form" @@ -50,7 +49,7 @@ import { useIntl } from "../../utils" import { type FieldMeta, generateInputStandardSchemaFromFieldMeta, type OmegaInputPropsBase } from "./OmegaFormStuff" import OmegaInternalInput from "./OmegaInternalInput.vue" -const props = defineProps>() +const props = defineProps>() // downgrade to *as* DeepKeys to avoid useless and possible infinite recursion in TS const propsName = computed(() => props.name as DeepKeys) diff --git a/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts b/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts index aa0e924724..ec28b33234 100644 --- a/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts +++ b/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts @@ -356,7 +356,7 @@ export interface OmegaFormReturn< ) => import("vue").VNode & { __ctx?: Awaited } - Array: >( + Array: ( __VLS_props: NonNullable>["props"], __VLS_ctx?: __VLS_PrettifyLocal>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable>["expose"], @@ -371,7 +371,7 @@ export interface OmegaFormReturn< >, never > - & (Omit, "form">) + & (Omit, "form">) & {} > & import("vue").PublicProps @@ -663,7 +663,7 @@ export interface OmegaFormReturn< __ctx?: Awaited } - AutoGen: >( + AutoGen: ( __VLS_props: NonNullable>["props"], __VLS_ctx?: __VLS_PrettifyLocal>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable>["expose"], @@ -682,9 +682,9 @@ export interface OmegaFormReturn< pick?: DeepKeys[] omit?: DeepKeys[] labelMap?: (key: DeepKeys) => string | undefined - filterMap?: >(key: DeepKeys, meta: M) => boolean | M + filterMap?: >(key: DeepKeys, meta: M) => boolean | M order?: DeepKeys[] - sort?: Order.Order> + sort?: Order.Order> } & {} > & import("vue").PublicProps @@ -692,7 +692,7 @@ export interface OmegaFormReturn< attrs: any slots: { default(props: { - child: OmegaAutoGenMeta + child: OmegaAutoGenMeta }): void } emit: {} From ac78aa83c5a1f9b9ef09d7ddbe0c70869d90da63 Mon Sep 17 00:00:00 2001 From: Davide Di Pumpo Date: Fri, 31 Oct 2025 12:39:40 +0100 Subject: [PATCH 2/4] Revert "chore: update versions (#507)" This reverts commit 49a123860cbbd7c91679e03a2ccea027dd3c940b. --- .changeset/fancy-parks-brush.md | 5 +++++ packages/vue-components/CHANGELOG.md | 6 ------ packages/vue-components/package.json | 2 +- 3 files changed, 6 insertions(+), 7 deletions(-) create mode 100644 .changeset/fancy-parks-brush.md diff --git a/.changeset/fancy-parks-brush.md b/.changeset/fancy-parks-brush.md new file mode 100644 index 0000000000..e29830ca1b --- /dev/null +++ b/.changeset/fancy-parks-brush.md @@ -0,0 +1,5 @@ +--- +"@effect-app/vue-components": patch +--- + +Tries to improve performances diff --git a/packages/vue-components/CHANGELOG.md b/packages/vue-components/CHANGELOG.md index 342faa158f..77589c2881 100644 --- a/packages/vue-components/CHANGELOG.md +++ b/packages/vue-components/CHANGELOG.md @@ -1,11 +1,5 @@ # @effect-app/vue-components -## 2.4.6 - -### Patch Changes - -- 92cf3c4: Tries to improve performances - ## 2.4.5 ### Patch Changes diff --git a/packages/vue-components/package.json b/packages/vue-components/package.json index 4569c89c26..e68cac5187 100644 --- a/packages/vue-components/package.json +++ b/packages/vue-components/package.json @@ -1,6 +1,6 @@ { "name": "@effect-app/vue-components", - "version": "2.4.6", + "version": "2.4.5", "scripts": { "build": "pnpm build:run", "build:run": "rimraf dist && vue-tsc && vite build", From 4e6be07d6462bc94cdccf26ce8799175217f50e9 Mon Sep 17 00:00:00 2001 From: Davide Di Pumpo Date: Fri, 31 Oct 2025 12:52:27 +0100 Subject: [PATCH 3/4] Tries factory to improve performances --- .changeset/shaky-worlds-sip.md | 5 + .../src/components/OmegaForm/useOmegaForm.ts | 734 ++++++------------ .../stories/OmegaForm/SimpleForm.vue | 5 +- 3 files changed, 230 insertions(+), 514 deletions(-) create mode 100644 .changeset/shaky-worlds-sip.md diff --git a/.changeset/shaky-worlds-sip.md b/.changeset/shaky-worlds-sip.md new file mode 100644 index 0000000000..056116c7c3 --- /dev/null +++ b/.changeset/shaky-worlds-sip.md @@ -0,0 +1,5 @@ +--- +"@effect-app/vue-components": patch +--- + +Tries factory diff --git a/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts b/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts index ec28b33234..b1c0d04ded 100644 --- a/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts +++ b/packages/vue-components/src/components/OmegaForm/useOmegaForm.ts @@ -212,528 +212,105 @@ export interface OmegaFormReturn< To extends Record, TypeProps = DefaultTypeProps > extends OF { - // this crazy thing here is copied from the OmegaFormInput.vue.d.ts, with `From` removed as Generic, instead closed over from the From generic above.. + // Pre-bound Input component with type-checked Name parameter Input: >( - __VLS_props: NonNullable>["props"], - __VLS_ctx?: __VLS_PrettifyLocal>, "attrs" | "emit" | "slots">>, - __VLS_expose?: NonNullable>["expose"], - __VLS_setup?: Promise<{ - props: - & __VLS_PrettifyLocal< - & Pick< - & Partial<{}> - & Omit< - {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, - never - >, - never - > - & TypeProps - & Partial<{}> - > - & BaseProps - & import("vue").PublicProps - expose(exposed: import("vue").ShallowUnwrapRef<{}>): void - attrs: any - slots: { - default?(props: MergedInputProps): void - label?: (props: { required: boolean; id: string; label: string }) => void + props: BaseProps & TypeProps & { + key?: string | number + ref?: any + }, + context?: { + slots?: { + default?(props: MergedInputProps): any + label?: (props: { required: boolean; id: string; label: string }) => any } - emit: {} - }> - ) => import("vue").VNode & { - __ctx?: Awaited - } + attrs?: Record + } + ) => import("vue").VNode Errors: ( - __VLS_props: NonNullable>["props"], - __VLS_ctx?: __VLS_PrettifyLocal>, "attrs" | "emit" | "slots">>, - __VLS_expose?: NonNullable>["expose"], - __VLS_setup?: Promise<{ - props: - & __VLS_PrettifyLocal< - & Pick< - & Partial<{}> - & Omit< - {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, - never - >, - never - > - & Partial<{}> - > - & import("vue").PublicProps - expose(exposed: import("vue").ShallowUnwrapRef<{}>): void - attrs: any - slots: { - default: (props: { errors: readonly OmegaError[]; showedGeneralErrors: string[] }) => void + props?: { + key?: string | number + ref?: any + }, + context?: { + slots?: { + default: (props: { errors: readonly OmegaError[]; showedGeneralErrors: string[] }) => any } - emit: {} - }> - ) => import("vue").VNode & { - __ctx?: Awaited - } + attrs?: Record + } + ) => import("vue").VNode TaggedUnion: >( - __VLS_props: NonNullable>["props"], - __VLS_ctx?: __VLS_PrettifyLocal>, "attrs" | "emit" | "slots">>, - __VLS_expose?: NonNullable>["expose"], - __VLS_setup?: Promise<{ - props: - & __VLS_PrettifyLocal< - & Pick< - & Partial<{}> - & Omit< - {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, - never - >, - never - > - & { - name: Name - type?: "select" | "radio" - options: import("./InputProps").TaggedUnionOptionsArray - label?: string - } - & {} - > - & import("vue").PublicProps - expose(exposed: import("vue").ShallowUnwrapRef<{}>): void - attrs: any - slots: Record< + props: { + name: Name + type?: "select" | "radio" + options: import("./InputProps").TaggedUnionOptionsArray + label?: string + key?: string | number + ref?: any + }, + context?: { + slots?: Record< string, (props: { - field: import("@tanstack/vue-form").FieldApi< - From, - Name, - DeepValue, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any - > - state: import("@tanstack/vue-form").FieldState< - From, - Name, - DeepValue, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any, - any - > + field: import("@tanstack/vue-form").FieldApi, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any> + state: import("@tanstack/vue-form").FieldState, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any> }) => any > - emit: {} - }> - ) => import("vue").VNode & { - __ctx?: Awaited - } - Array: ( - __VLS_props: NonNullable>["props"], - __VLS_ctx?: __VLS_PrettifyLocal>, "attrs" | "emit" | "slots">>, - __VLS_expose?: NonNullable>["expose"], - __VLS_setup?: Promise<{ - props: - & __VLS_PrettifyLocal< - & Pick< - & Partial<{}> - & Omit< - {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, - never - >, - never - > - & (Omit, "form">) - & {} - > - & import("vue").PublicProps - expose(exposed: import("vue").ShallowUnwrapRef<{}>): void - attrs: any - slots: { - "pre-array"?: (props: { - field: import("@tanstack/vue-form").FieldApi< - From, - DeepKeys, - DeepValue>, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").StandardSchemaV1, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - Record | undefined - > - state: import("@tanstack/vue-form").FieldState< - From, - DeepKeys, - DeepValue>, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").StandardSchemaV1, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined - > - }) => any - } & { - default?: (props: { - subField: import("@tanstack/vue-form").FieldApi< - From, - DeepKeys, - DeepValue>, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").StandardSchemaV1, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - Record | undefined - > - subState: import("@tanstack/vue-form").FieldState< - From, - DeepKeys, - DeepValue>, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").StandardSchemaV1, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined - > - index: number - field: import("@tanstack/vue-form").FieldApi< - From, - DeepKeys, - DeepValue>, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").StandardSchemaV1, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - Record | undefined - > - }) => any - } & { - "post-array"?: (props: { - field: import("@tanstack/vue-form").FieldApi< - From, - DeepKeys, - DeepValue>, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").StandardSchemaV1, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - Record | undefined - > - state: import("@tanstack/vue-form").FieldState< - From, - DeepKeys, - DeepValue>, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").StandardSchemaV1, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined - > - }) => any - } & { - field?: (props: { - field: import("@tanstack/vue-form").FieldApi< - From, - DeepKeys, - DeepValue>, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldValidateOrFn, DeepValue>> - | undefined, - | import("@tanstack/vue-form").FieldAsyncValidateOrFn, DeepValue>> - | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").StandardSchemaV1, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - import("@tanstack/vue-form").FormAsyncValidateOrFn | undefined, - Record | undefined - > - }) => any + attrs?: Record + } + ) => import("vue").VNode + Array: >( + props: { + name: Name + defaultItems?: DeepValue + key?: string | number + ref?: any + }, + context?: { + slots?: { + "pre-array"?: (props: { field: any; state: any }) => any + default?: (props: { subField: any; subState: any; index: number; field: any }) => any + "post-array"?: (props: { field: any; state: any }) => any + field?: (props: { field: any }) => any } - emit: {} - }> - ) => import("vue").VNode & { - __ctx?: Awaited - } + attrs?: Record + } + ) => import("vue").VNode AutoGen: ( - __VLS_props: NonNullable>["props"], - __VLS_ctx?: __VLS_PrettifyLocal>, "attrs" | "emit" | "slots">>, - __VLS_expose?: NonNullable>["expose"], - __VLS_setup?: Promise<{ - props: - & __VLS_PrettifyLocal< - Pick< - & Partial<{}> - & Omit< - {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, - never - >, - never - > & { - // form: OmegaInputProps["form"] - pick?: DeepKeys[] - omit?: DeepKeys[] - labelMap?: (key: DeepKeys) => string | undefined - filterMap?: >(key: DeepKeys, meta: M) => boolean | M - order?: DeepKeys[] - sort?: Order.Order> - } & {} - > - & import("vue").PublicProps - expose(exposed: import("vue").ShallowUnwrapRef<{}>): void - attrs: any - slots: { - default(props: { - child: OmegaAutoGenMeta - }): void + props: { + pick?: DeepKeys[] + omit?: DeepKeys[] + labelMap?: (key: DeepKeys) => string | undefined + filterMap?: >(key: DeepKeys, meta: M) => boolean | M + order?: DeepKeys[] + sort?: Order.Order> + key?: string | number + ref?: any + }, + context?: { + slots?: { + default(props: { child: OmegaAutoGenMeta }): any } - emit: {} - }> - ) => import("vue").VNode & { - __ctx?: Awaited - } - - Form: >( - __VLS_props: NonNullable>["props"], - __VLS_ctx?: __VLS_PrettifyLocal>, "attrs" | "emit" | "slots">>, - __VLS_expose?: NonNullable>["expose"], - __VLS_setup?: Promise<{ - props: - & __VLS_PrettifyLocal< - Pick< - & Partial<{}> - & Omit< - {} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, - never - >, - never - > & { - // form: OmegaFormReturn - disabled?: boolean - subscribe?: K[] - } & {} - > - & import("vue").PublicProps - expose(exposed: import("vue").ShallowUnwrapRef<{}>): void - attrs: any - slots: { + attrs?: Record + } + ) => import("vue").VNode + + Form: >( + props: { + disabled?: boolean + subscribe?: K[] + key?: string | number + ref?: any + }, + context?: { + slots?: { default(props: { subscribedValues: K[] extends undefined[] ? Record : Pick, K> - }): void + }): any } - emit: {} - }> - ) => import("vue").VNode & { - __ctx?: Awaited - } + attrs?: Record + } + ) => import("vue").VNode } export const useOmegaForm = < @@ -1089,14 +666,147 @@ export const useOmegaForm = < const errorContext = { form: formWithExtras, fieldMap } + // Pre-bound component functions with From and To already bound + const Input = >( + props: BaseProps & DefaultTypeProps & { + key?: string | number + ref?: any + }, + context?: { + slots?: { + default?(props: MergedInputProps): any + label?: (props: { required: boolean; id: string; label: string }) => any + } + attrs?: Record + } + ) => { + const InputComponent = omegaConfig?.input ?? OmegaInput + return h(InputComponent, { + ...props, + form: formWithExtras, + ...context?.attrs + }, context?.slots) + } + + const Errors = ( + props?: { + key?: string | number + ref?: any + }, + context?: { + slots?: { + default: (props: { errors: readonly OmegaError[]; showedGeneralErrors: string[] }) => any + } + attrs?: Record + } + ) => { + return h(eHoc(errorContext)(OmegaErrorsInternal) as any, { + ...props, + ...context?.attrs + }, context?.slots) + } + + const TaggedUnion = >( + props: { + name: Name + type?: "select" | "radio" + options: import("./InputProps").TaggedUnionOptionsArray + label?: string + key?: string | number + ref?: any + }, + context?: { + slots?: Record + attrs?: Record + } + ) => { + return h(OmegaTaggedUnion, { + ...props, + form: formWithExtras as any, + ...context?.attrs + }, context?.slots) + } + + const ArrayComponent = >( + props: { + name: Name + defaultItems?: DeepValue + key?: string | number + ref?: any + }, + context?: { + slots?: { + "pre-array"?: (props: { field: any; state: any }) => any + default?: (props: { subField: any; subState: any; index: number; field: any }) => any + "post-array"?: (props: { field: any; state: any }) => any + field?: (props: { field: any }) => any + } + attrs?: Record + } + ) => { + return h(OmegaArray, { + ...props, + form: formWithExtras as any, + ...context?.attrs + }, context?.slots) + } + + const AutoGen = ( + props: { + pick?: DeepKeys[] + omit?: DeepKeys[] + labelMap?: (key: DeepKeys) => string | undefined + filterMap?: >(key: DeepKeys, meta: M) => boolean | M + order?: DeepKeys[] + sort?: Order.Order> + key?: string | number + ref?: any + }, + context?: { + slots?: { + default(props: { child: OmegaAutoGenMeta }): any + } + attrs?: Record + } + ) => { + return h(OmegaAutoGen as any, { + ...props, + form: formWithExtras, + ...context?.attrs + }, context?.slots) + } + + const Form = >( + props: { + disabled?: boolean + subscribe?: K[] + key?: string | number + ref?: any + }, + context?: { + slots?: { + default(props: { + subscribedValues: K[] extends undefined[] ? Record : Pick, K> + }): any + } + attrs?: Record + } + ) => { + return h(OmegaForm as any, { + ...props, + form: formWithExtras, + ...context?.attrs + }, context?.slots) + } + return Object.assign(formWithExtras, { errorContext, - Form: fHoc(formWithExtras)(OmegaForm as any) as any, - Input: fHoc(formWithExtras)(omegaConfig?.input ?? OmegaInput) as any, - TaggedUnion: fHoc(formWithExtras)(OmegaTaggedUnion) as any, + Form, + Input, + TaggedUnion, Field: form.Field, - Errors: eHoc(errorContext)(OmegaErrorsInternal) as any, - Array: fHoc(formWithExtras)(OmegaArray) as any, - AutoGen: fHoc(formWithExtras)(OmegaAutoGen as any) as any + Errors, + Array: ArrayComponent, + AutoGen }) } diff --git a/packages/vue-components/stories/OmegaForm/SimpleForm.vue b/packages/vue-components/stories/OmegaForm/SimpleForm.vue index 5d9d179c3f..ca7af3fc71 100644 --- a/packages/vue-components/stories/OmegaForm/SimpleForm.vue +++ b/packages/vue-components/stories/OmegaForm/SimpleForm.vue @@ -7,6 +7,7 @@ name="asder2.value" >