@effect-app/vue-components 4.0.0-beta.26 → 4.0.0-beta.261
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -9
- package/dist/reset.css +39 -38
- package/dist/types/components/CommandButton.vue.d.ts +24 -5
- package/dist/types/components/OmegaForm/InputProps.d.ts +1 -1
- package/dist/types/components/OmegaForm/OmegaArray.vue.d.ts +1 -1
- package/dist/types/components/OmegaForm/OmegaAutoGen.vue.d.ts +2 -2
- package/dist/types/components/OmegaForm/OmegaErrorsInternal.vue.d.ts +1 -1
- package/dist/types/components/OmegaForm/OmegaFormInput.vue.d.ts +1 -1
- package/dist/types/components/OmegaForm/OmegaInput.vue.d.ts +1 -1
- package/dist/types/components/OmegaForm/OmegaInternalInput.vue.d.ts +2 -1
- package/dist/types/components/OmegaForm/OmegaTaggedUnion.vue.d.ts +2 -2
- package/dist/types/components/OmegaForm/OmegaTaggedUnionInternal.vue.d.ts +3 -3
- package/dist/types/components/OmegaForm/OmegaWrapper.vue.d.ts +1 -1
- package/dist/types/components/OmegaForm/createUseFormWithCustomInput.d.ts +2 -2
- package/dist/types/components/OmegaForm/errors.d.ts +33 -0
- package/dist/types/components/OmegaForm/getOmegaStore.d.ts +1 -1
- package/dist/types/components/OmegaForm/hocs.d.ts +3 -0
- package/dist/types/components/OmegaForm/index.d.ts +13 -3
- package/dist/types/components/OmegaForm/inputs.d.ts +4 -0
- package/dist/types/components/OmegaForm/meta/checks.d.ts +4 -0
- package/dist/types/components/OmegaForm/meta/createMeta.d.ts +33 -0
- package/dist/types/components/OmegaForm/meta/defaults.d.ts +21 -0
- package/dist/types/components/OmegaForm/meta/redacted.d.ts +2 -0
- package/dist/types/components/OmegaForm/meta/types.d.ts +56 -0
- package/dist/types/components/OmegaForm/meta/walker.d.ts +18 -0
- package/dist/types/components/OmegaForm/persistency.d.ts +58 -0
- package/dist/types/components/OmegaForm/submit.d.ts +60 -0
- package/dist/types/components/OmegaForm/types.d.ts +289 -0
- package/dist/types/components/OmegaForm/useOmegaForm.d.ts +7 -213
- package/dist/types/components/OmegaForm/validation/localized.d.ts +10 -0
- package/dist/types/index.d.ts +0 -1
- package/dist/types/utils/index.d.ts +8 -8
- package/dist/vue-components.es.js +29 -44
- package/dist/vue-components10.es.js +5 -0
- package/dist/vue-components11.es.js +20 -0
- package/dist/vue-components12.es.js +49 -0
- package/dist/vue-components13.es.js +128 -0
- package/dist/vue-components14.es.js +65 -0
- package/dist/vue-components15.es.js +114 -0
- package/dist/vue-components16.es.js +22 -0
- package/dist/vue-components17.es.js +5 -0
- package/dist/vue-components18.es.js +80 -0
- package/dist/vue-components19.es.js +93 -0
- package/dist/vue-components2.es.js +11 -0
- package/dist/vue-components20.es.js +73 -0
- package/dist/vue-components21.es.js +12 -0
- package/dist/vue-components22.es.js +56 -0
- package/dist/vue-components23.es.js +5 -0
- package/dist/vue-components24.es.js +44 -0
- package/dist/vue-components25.es.js +5 -0
- package/dist/vue-components26.es.js +84 -0
- package/dist/vue-components28.es.js +8 -0
- package/dist/vue-components29.es.js +9 -0
- package/dist/vue-components3.es.js +98 -0
- package/dist/vue-components30.es.js +269 -0
- package/dist/vue-components32.es.js +8 -0
- package/dist/vue-components33.es.js +73 -0
- package/dist/vue-components34.es.js +5 -0
- package/dist/vue-components35.es.js +52 -0
- package/dist/vue-components36.es.js +5 -0
- package/dist/vue-components37.es.js +24 -0
- package/dist/vue-components38.es.js +5 -0
- package/dist/vue-components39.es.js +59 -0
- package/dist/vue-components4.es.js +5 -0
- package/dist/vue-components40.es.js +5 -0
- package/dist/vue-components41.es.js +12 -0
- package/dist/vue-components42.es.js +22 -0
- package/dist/vue-components44.es.js +9 -0
- package/dist/vue-components45.es.js +4 -0
- package/dist/vue-components46.es.js +38 -0
- package/dist/vue-components47.es.js +27 -0
- package/dist/vue-components48.es.js +28 -0
- package/dist/vue-components49.es.js +7 -0
- package/dist/vue-components5.es.js +24 -0
- package/dist/vue-components50.es.js +18 -0
- package/dist/vue-components51.es.js +36 -0
- package/dist/vue-components52.es.js +18 -0
- package/dist/vue-components53.es.js +21 -0
- package/dist/vue-components54.es.js +30 -0
- package/dist/vue-components55.es.js +7 -0
- package/dist/vue-components56.es.js +9 -0
- package/dist/vue-components57.es.js +38 -0
- package/dist/vue-components58.es.js +25 -0
- package/dist/vue-components59.es.js +128 -0
- package/dist/vue-components6.es.js +13 -0
- package/dist/vue-components60.es.js +24 -0
- package/dist/vue-components61.es.js +21 -0
- package/dist/vue-components62.es.js +9 -0
- package/dist/vue-components63.es.js +19 -0
- package/dist/vue-components64.es.js +5 -0
- package/dist/vue-components65.es.js +29 -0
- package/dist/vue-components66.es.js +5 -0
- package/dist/vue-components67.es.js +43 -0
- package/dist/vue-components68.es.js +100 -0
- package/dist/vue-components69.es.js +33 -0
- package/dist/vue-components7.es.js +13 -0
- package/dist/vue-components70.es.js +19 -0
- package/dist/vue-components71.es.js +48 -0
- package/dist/vue-components8.es.js +35 -0
- package/dist/vue-components9.es.js +47 -0
- package/package.json +30 -30
- package/src/components/CommandButton.vue +96 -16
- package/src/components/OmegaForm/InputProps.ts +1 -1
- package/src/components/OmegaForm/OmegaArray.vue +8 -9
- package/src/components/OmegaForm/OmegaAutoGen.vue +3 -2
- package/src/components/OmegaForm/OmegaErrorsInternal.vue +1 -1
- package/src/components/OmegaForm/OmegaFormInput.vue +1 -1
- package/src/components/OmegaForm/OmegaInput.vue +15 -38
- package/src/components/OmegaForm/OmegaInputVuetify.vue +5 -2
- package/src/components/OmegaForm/OmegaInternalInput.vue +17 -5
- package/src/components/OmegaForm/OmegaTaggedUnion.vue +10 -3
- package/src/components/OmegaForm/OmegaTaggedUnionInternal.vue +6 -6
- package/src/components/OmegaForm/OmegaWrapper.vue +1 -1
- package/src/components/OmegaForm/blockDialog.ts +18 -6
- package/src/components/OmegaForm/createUseFormWithCustomInput.ts +2 -1
- package/src/components/OmegaForm/errors.ts +136 -0
- package/src/components/OmegaForm/getOmegaStore.ts +1 -1
- package/src/components/OmegaForm/hocs.ts +19 -0
- package/src/components/OmegaForm/index.ts +16 -4
- package/src/components/OmegaForm/inputs.ts +22 -0
- package/src/components/OmegaForm/meta/checks.ts +82 -0
- package/src/components/OmegaForm/meta/createMeta.ts +140 -0
- package/src/components/OmegaForm/meta/defaults.ts +261 -0
- package/src/components/OmegaForm/meta/redacted.ts +66 -0
- package/src/components/OmegaForm/meta/types.ts +78 -0
- package/src/components/OmegaForm/meta/walker.ts +248 -0
- package/src/components/OmegaForm/persistency.ts +247 -0
- package/src/components/OmegaForm/submit.ts +131 -0
- package/src/components/OmegaForm/types.ts +759 -0
- package/src/components/OmegaForm/useOmegaForm.ts +99 -893
- package/src/components/OmegaForm/useRegisterField.ts +1 -1
- package/src/components/OmegaForm/validation/localized.ts +203 -0
- package/src/index.ts +0 -1
- package/src/reset.css +39 -38
- package/src/utils/index.ts +11 -8
- package/dist/types/components/OmegaForm/OmegaFormStuff.d.ts +0 -159
- package/dist/types/constants/index.d.ts +0 -1
- package/dist/vue-components.es10.js +0 -239
- package/dist/vue-components.es11.js +0 -32
- package/dist/vue-components.es12.js +0 -503
- package/dist/vue-components.es13.js +0 -49
- package/dist/vue-components.es14.js +0 -4
- package/dist/vue-components.es15.js +0 -4
- package/dist/vue-components.es16.js +0 -6
- package/dist/vue-components.es17.js +0 -13
- package/dist/vue-components.es18.js +0 -57
- package/dist/vue-components.es19.js +0 -56
- package/dist/vue-components.es2.js +0 -30
- package/dist/vue-components.es20.js +0 -8
- package/dist/vue-components.es21.js +0 -8
- package/dist/vue-components.es22.js +0 -5
- package/dist/vue-components.es23.js +0 -5
- package/dist/vue-components.es24.js +0 -4
- package/dist/vue-components.es25.js +0 -4
- package/dist/vue-components.es26.js +0 -4
- package/dist/vue-components.es27.js +0 -4
- package/dist/vue-components.es28.js +0 -19
- package/dist/vue-components.es29.js +0 -13
- package/dist/vue-components.es3.js +0 -17
- package/dist/vue-components.es30.js +0 -194
- package/dist/vue-components.es32.js +0 -31
- package/dist/vue-components.es33.js +0 -6
- package/dist/vue-components.es34.js +0 -4
- package/dist/vue-components.es35.js +0 -4
- package/dist/vue-components.es36.js +0 -113
- package/dist/vue-components.es38.js +0 -9
- package/dist/vue-components.es39.js +0 -34
- package/dist/vue-components.es4.js +0 -52
- package/dist/vue-components.es41.js +0 -6
- package/dist/vue-components.es42.js +0 -25
- package/dist/vue-components.es43.js +0 -7
- package/dist/vue-components.es44.js +0 -23
- package/dist/vue-components.es45.js +0 -32
- package/dist/vue-components.es46.js +0 -24
- package/dist/vue-components.es47.js +0 -14
- package/dist/vue-components.es48.js +0 -7
- package/dist/vue-components.es49.js +0 -21
- package/dist/vue-components.es5.js +0 -52
- package/dist/vue-components.es50.js +0 -11
- package/dist/vue-components.es51.js +0 -33
- package/dist/vue-components.es52.js +0 -50
- package/dist/vue-components.es53.js +0 -28
- package/dist/vue-components.es54.js +0 -13
- package/dist/vue-components.es55.js +0 -67
- package/dist/vue-components.es56.js +0 -58
- package/dist/vue-components.es57.js +0 -19
- package/dist/vue-components.es58.js +0 -35
- package/dist/vue-components.es59.js +0 -31
- package/dist/vue-components.es6.js +0 -69
- package/dist/vue-components.es60.js +0 -44
- package/dist/vue-components.es61.js +0 -4
- package/dist/vue-components.es62.js +0 -46
- package/dist/vue-components.es63.js +0 -4
- package/dist/vue-components.es7.js +0 -83
- package/dist/vue-components.es8.js +0 -63
- package/dist/vue-components.es9.js +0 -21
- package/src/components/OmegaForm/OmegaFormStuff.ts +0 -1276
- package/src/constants/index.ts +0 -1
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<component
|
|
3
3
|
:is="form.Field"
|
|
4
|
-
:key="fieldKey"
|
|
5
4
|
:name="name"
|
|
6
|
-
:validators="
|
|
7
|
-
onChange: schema,
|
|
8
|
-
...validators
|
|
9
|
-
}"
|
|
5
|
+
:validators="validators"
|
|
10
6
|
>
|
|
11
|
-
|
|
7
|
+
<!--
|
|
8
|
+
Read `state` from `field.state`, not the Field slot's `state` prop.
|
|
9
|
+
Since @tanstack/vue-form 1.32 the slot `state` is a one-time snapshot
|
|
10
|
+
taken when the field mounts and never updates, whereas `field.state`
|
|
11
|
+
is a reactive getter backed by the field store.
|
|
12
|
+
-->
|
|
13
|
+
<template #default="{ field }">
|
|
12
14
|
<OmegaInternalInput
|
|
13
15
|
v-if="meta"
|
|
14
16
|
v-bind="{ ...$attrs, ...$props, inputClass: computedClass }"
|
|
15
|
-
:field="field"
|
|
16
|
-
:state="state"
|
|
17
|
+
:field="field as any"
|
|
18
|
+
:state="field.state"
|
|
17
19
|
:register="form.registerField"
|
|
18
20
|
:label="label ?? errori18n(propsName)"
|
|
19
21
|
:meta="meta"
|
|
@@ -40,12 +42,13 @@
|
|
|
40
42
|
lang="ts"
|
|
41
43
|
generic="From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
|
|
42
44
|
>
|
|
45
|
+
/* eslint-disable @typescript-eslint/no-explicit-any -- TanStack Form Field generic interop and slot prop typing */
|
|
43
46
|
import { type DeepKeys } from "@tanstack/vue-form"
|
|
44
47
|
import { computed, inject, type Ref, useAttrs } from "vue"
|
|
45
|
-
import {
|
|
46
|
-
import { type FieldMeta
|
|
48
|
+
import { useErrorLabel } from "./errors"
|
|
49
|
+
import { type FieldMeta } from "./meta/types"
|
|
47
50
|
import OmegaInternalInput from "./OmegaInternalInput.vue"
|
|
48
|
-
import {
|
|
51
|
+
import { type OmegaInputPropsBase } from "./types"
|
|
49
52
|
|
|
50
53
|
const props = defineProps<OmegaInputPropsBase<From, To, Name>>()
|
|
51
54
|
|
|
@@ -57,13 +60,10 @@ defineSlots<{
|
|
|
57
60
|
default?: (props: any) => any
|
|
58
61
|
}>()
|
|
59
62
|
|
|
60
|
-
defineOptions({
|
|
61
|
-
inheritAttrs: false
|
|
62
|
-
})
|
|
63
|
+
defineOptions({ inheritAttrs: false })
|
|
63
64
|
|
|
64
65
|
const attrs = useAttrs()
|
|
65
66
|
|
|
66
|
-
// Compute the class to use based on inputClass prop
|
|
67
67
|
const computedClass = computed(() => {
|
|
68
68
|
if (props.inputClass === null) return undefined
|
|
69
69
|
if (props.inputClass !== undefined) return props.inputClass
|
|
@@ -82,28 +82,5 @@ const meta = computed(() => {
|
|
|
82
82
|
return props.form.meta[propsName.value]
|
|
83
83
|
})
|
|
84
84
|
|
|
85
|
-
// Key to force Field re-mount when meta type changes (for TaggedUnion support)
|
|
86
|
-
const fieldKey = computed(() => {
|
|
87
|
-
const m = meta.value
|
|
88
|
-
if (!m) return propsName.value
|
|
89
|
-
// Include type and key constraints in the key so Field re-mounts when validation rules change
|
|
90
|
-
// Cast to any since not all FieldMeta variants have these properties
|
|
91
|
-
const fm = m as any
|
|
92
|
-
return `${propsName.value}-${fm.type}-${fm.minLength ?? ""}-${fm.maxLength ?? ""}-${fm.minimum ?? ""}-${
|
|
93
|
-
fm.maximum ?? ""
|
|
94
|
-
}`
|
|
95
|
-
})
|
|
96
|
-
|
|
97
|
-
// Call useIntl during setup to avoid issues when computed re-evaluates
|
|
98
|
-
const { trans } = useIntl()
|
|
99
|
-
|
|
100
|
-
const schema = computed(() => {
|
|
101
|
-
if (!meta.value) {
|
|
102
|
-
console.log(props.name, Object.keys(props.form.meta), props.form.meta)
|
|
103
|
-
throw new Error("Meta is undefined")
|
|
104
|
-
}
|
|
105
|
-
return generateInputStandardSchemaFromFieldMeta(meta.value, trans)
|
|
106
|
-
})
|
|
107
|
-
|
|
108
85
|
const errori18n = useErrorLabel(props.form)
|
|
109
86
|
</script>
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
3
|
class="omega-input"
|
|
4
|
-
@focusout="
|
|
4
|
+
@focusout="(e) => {
|
|
5
|
+
$emit('blur', e)
|
|
6
|
+
field.handleBlur()
|
|
7
|
+
}"
|
|
5
8
|
@focusin="$emit('focus', $event)"
|
|
6
9
|
>
|
|
7
10
|
<component
|
|
@@ -204,8 +207,8 @@
|
|
|
204
207
|
generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
|
|
205
208
|
>
|
|
206
209
|
import { type DeepKeys } from "@tanstack/vue-form"
|
|
207
|
-
import { getInputType } from "../OmegaForm/OmegaFormStuff"
|
|
208
210
|
import type { VuetifyInputProps } from "./InputProps"
|
|
211
|
+
import { getInputType } from "./inputs"
|
|
209
212
|
|
|
210
213
|
defineProps<VuetifyInputProps<From, Name>>()
|
|
211
214
|
|
|
@@ -24,11 +24,13 @@
|
|
|
24
24
|
lang="ts"
|
|
25
25
|
generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
|
|
26
26
|
>
|
|
27
|
+
/* eslint-disable @typescript-eslint/no-explicit-any -- TanStack Form / Vue attrs interop */
|
|
27
28
|
import { type DeepKeys, useStore } from "@tanstack/vue-form"
|
|
28
29
|
import { computed, type ComputedRef, getCurrentInstance, useAttrs, useId, useSlots } from "vue"
|
|
29
30
|
import type { InputProps, OmegaFieldInternalApi } from "./InputProps"
|
|
30
|
-
import type {
|
|
31
|
+
import type { MetaRecord, NestedKeyOf } from "./meta/types"
|
|
31
32
|
import OmegaInputVuetify from "./OmegaInputVuetify.vue"
|
|
33
|
+
import type { FieldValidators, TypeOverride } from "./types"
|
|
32
34
|
|
|
33
35
|
defineOptions({
|
|
34
36
|
inheritAttrs: false
|
|
@@ -84,7 +86,8 @@ const id = useId()
|
|
|
84
86
|
|
|
85
87
|
const fieldApi = props.field
|
|
86
88
|
|
|
87
|
-
|
|
89
|
+
// Subscribed for side-effect: keeps component reactive to fieldApi.store changes
|
|
90
|
+
const _fieldState = useStore(fieldApi.store, (state) => state)
|
|
88
91
|
|
|
89
92
|
// Get errors from form-level fieldMeta (persists across Field re-mounts)
|
|
90
93
|
const formFieldMeta = useStore(fieldApi.form.store, (state) => state.fieldMeta)
|
|
@@ -128,6 +131,13 @@ const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value)
|
|
|
128
131
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
129
132
|
: null as any
|
|
130
133
|
)
|
|
134
|
+
} else if (props.meta?.isOptionalKey) {
|
|
135
|
+
// `S.optionalKey` expects the key to be ABSENT from the submitted
|
|
136
|
+
// object, not present-with-undefined. Remove it from form state
|
|
137
|
+
// rather than setting it to `undefined`. Note: this is distinct
|
|
138
|
+
// from `required: false`, which may also just mean "empty string
|
|
139
|
+
// is valid" for unconstrained `S.String` fields.
|
|
140
|
+
props.field.form.deleteField(props.field.name)
|
|
131
141
|
} else {
|
|
132
142
|
// Keep the actual value (e.g., empty string for S.String fields)
|
|
133
143
|
props.field.handleChange(value)
|
|
@@ -136,9 +146,11 @@ const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value)
|
|
|
136
146
|
props.field.handleChange(value)
|
|
137
147
|
}
|
|
138
148
|
|
|
139
|
-
//
|
|
140
|
-
//
|
|
141
|
-
|
|
149
|
+
// A change here may have materialised a nullable struct (this field is one
|
|
150
|
+
// of its children); backfill the untouched siblings so the live `values`
|
|
151
|
+
// matches what validation and decoding see.
|
|
152
|
+
const form = props.field.form as { normalizeNullableStructs?: () => void }
|
|
153
|
+
form.normalizeNullableStructs?.()
|
|
142
154
|
}
|
|
143
155
|
|
|
144
156
|
// Note: Default value normalization (converting empty strings to null/undefined for nullable fields)
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
import { type DeepKeys } from "@tanstack/vue-form"
|
|
9
9
|
import { computed, provide, ref, watch } from "vue"
|
|
10
10
|
import { type TaggedUnionOption } from "./InputProps"
|
|
11
|
-
import { type FieldPath } from "./OmegaFormStuff"
|
|
12
11
|
import OmegaTaggedUnionInternal from "./OmegaTaggedUnionInternal.vue"
|
|
12
|
+
import { type FieldPath } from "./types"
|
|
13
13
|
import { type useOmegaForm } from "./useOmegaForm"
|
|
14
14
|
|
|
15
15
|
const props = defineProps<{
|
|
@@ -30,6 +30,7 @@ watch(
|
|
|
30
30
|
() => {
|
|
31
31
|
const path = tagPath.value
|
|
32
32
|
// Navigate to the nested value
|
|
33
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- traversing arbitrary nested values
|
|
33
34
|
return path.split(".").reduce((acc: any, key) => acc?.[key], formValues.value) as string | null
|
|
34
35
|
},
|
|
35
36
|
(newTag) => {
|
|
@@ -74,9 +75,15 @@ provide("getMetaFromArray", getMetaFromArray)
|
|
|
74
75
|
/>
|
|
75
76
|
</slot>
|
|
76
77
|
<slot />
|
|
78
|
+
<!--
|
|
79
|
+
Drive the branch off `currentTag`: the tag is read from the form store
|
|
80
|
+
(the canonical state), the same single source of truth that feeds
|
|
81
|
+
`getMetaFromArray` above — rather than the `Field` slot's `state`,
|
|
82
|
+
which is only a projection of it.
|
|
83
|
+
-->
|
|
77
84
|
<OmegaTaggedUnionInternal
|
|
78
85
|
:field="inputProps.field as any"
|
|
79
|
-
:
|
|
86
|
+
:tag="currentTag"
|
|
80
87
|
:name="name"
|
|
81
88
|
:form="form"
|
|
82
89
|
>
|
|
@@ -91,7 +98,7 @@ provide("getMetaFromArray", getMetaFromArray)
|
|
|
91
98
|
</template>
|
|
92
99
|
</OmegaTaggedUnionInternal>
|
|
93
100
|
<slot
|
|
94
|
-
v-if="
|
|
101
|
+
v-if="currentTag"
|
|
95
102
|
name="OmegaCommon"
|
|
96
103
|
/>
|
|
97
104
|
</template>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<slot
|
|
3
|
-
v-if="
|
|
4
|
-
:name="`${name ? `${name}.` : ''}${
|
|
5
|
-
v-bind="{ field,
|
|
3
|
+
v-if="tag"
|
|
4
|
+
:name="`${name ? `${name}.` : ''}${tag}`"
|
|
5
|
+
v-bind="{ field, tag }"
|
|
6
6
|
/>
|
|
7
7
|
</template>
|
|
8
8
|
|
|
@@ -17,7 +17,7 @@ import { type OmegaFieldInternalApi } from "./InputProps"
|
|
|
17
17
|
import { type useOmegaForm } from "./useOmegaForm"
|
|
18
18
|
|
|
19
19
|
const props = defineProps<{
|
|
20
|
-
|
|
20
|
+
tag: string | null
|
|
21
21
|
field: OmegaFieldInternalApi<From, Name>
|
|
22
22
|
name?: DeepKeys<From>
|
|
23
23
|
form: ReturnType<typeof useOmegaForm<From, To>>
|
|
@@ -26,7 +26,7 @@ const props = defineProps<{
|
|
|
26
26
|
const values = props.form.useStore(({ values }) => values)
|
|
27
27
|
|
|
28
28
|
// Watch for _tag changes
|
|
29
|
-
watch(() => props.
|
|
29
|
+
watch(() => props.tag, (newTag, oldTag) => {
|
|
30
30
|
if (newTag === null) {
|
|
31
31
|
props.field.setValue(null as DeepValue<From, Name>)
|
|
32
32
|
}
|
|
@@ -34,7 +34,7 @@ watch(() => props.state, (newTag, oldTag) => {
|
|
|
34
34
|
if (newTag !== oldTag) {
|
|
35
35
|
props.form.reset(values.value)
|
|
36
36
|
setTimeout(() => {
|
|
37
|
-
props.field.validate("change")
|
|
37
|
+
void props.field.validate("change")
|
|
38
38
|
}, 0)
|
|
39
39
|
}
|
|
40
40
|
}, { immediate: true })
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
import { useStore } from "@tanstack/vue-form"
|
|
31
31
|
import { usePreventClose } from "./blockDialog"
|
|
32
32
|
import { getOmegaStore } from "./getOmegaStore"
|
|
33
|
-
import { type DefaultTypeProps, type OmegaFormApi, type OmegaFormState } from "./
|
|
33
|
+
import { type DefaultTypeProps, type OmegaFormApi, type OmegaFormState } from "./types"
|
|
34
34
|
import { type OmegaFormReturn } from "./useOmegaForm"
|
|
35
35
|
|
|
36
36
|
type OmegaWrapperProps = {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import mitt from "mitt"
|
|
2
2
|
import { inject, type InjectionKey, provide, type Ref } from "vue"
|
|
3
|
+
import { useIntl } from "../../utils"
|
|
3
4
|
import { onMountedWithCleanup } from "./onMountedWithCleanup"
|
|
4
5
|
|
|
5
6
|
export type DialogClosing = { prevent?: boolean | Promise<boolean> }
|
|
@@ -19,11 +20,19 @@ export const usePreventClose = (mkIsDirty: () => Ref<boolean>) => {
|
|
|
19
20
|
if (!bus) {
|
|
20
21
|
return
|
|
21
22
|
}
|
|
23
|
+
const { formatMessage, trans } = useIntl()
|
|
22
24
|
const isDirty = mkIsDirty()
|
|
25
|
+
const defaultMessage = "There are unsaved changes. Are you sure you want to close?"
|
|
23
26
|
onMountedWithCleanup(() => {
|
|
24
27
|
const onDialogClosing = (evt: DialogClosing) => {
|
|
25
28
|
if (isDirty.value) {
|
|
26
|
-
|
|
29
|
+
// Mirror the guard pattern in errors.ts: a custom `useIntl` mock may
|
|
30
|
+
// only provide `trans`, so fall back through trans → defaultMessage.
|
|
31
|
+
const message = formatMessage
|
|
32
|
+
? formatMessage({ id: "form.unsaved_changes_confirm", defaultMessage })
|
|
33
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any -- key may not be registered in the locale catalog
|
|
34
|
+
: trans?.("form.unsaved_changes_confirm" as any) ?? defaultMessage
|
|
35
|
+
if (!confirm(message)) {
|
|
27
36
|
evt.prevent = true
|
|
28
37
|
}
|
|
29
38
|
}
|
|
@@ -46,11 +55,14 @@ export const useOnClose = (close: () => void) => {
|
|
|
46
55
|
bus.emit("dialog-closing", evt)
|
|
47
56
|
if (evt.prevent) {
|
|
48
57
|
if (typeof evt.prevent === "object" && "then" in evt.prevent) {
|
|
49
|
-
evt
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
58
|
+
evt
|
|
59
|
+
.prevent
|
|
60
|
+
.then((r) => {
|
|
61
|
+
if (r) {
|
|
62
|
+
close()
|
|
63
|
+
}
|
|
64
|
+
})
|
|
65
|
+
.catch(console.error)
|
|
54
66
|
}
|
|
55
67
|
} else {
|
|
56
68
|
close()
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-explicit-any -- TanStack Form / Vue render-fn slot interop */
|
|
1
2
|
import type { DeepKeys } from "@tanstack/vue-form"
|
|
2
3
|
import { type Component, h } from "vue"
|
|
3
4
|
import type { MergedInputProps } from "./InputProps"
|
|
4
|
-
import { type DefaultTypeProps } from "./OmegaFormStuff"
|
|
5
5
|
import OmegaInput from "./OmegaInput.vue"
|
|
6
|
+
import { type DefaultTypeProps } from "./types"
|
|
6
7
|
import { useOmegaForm } from "./useOmegaForm"
|
|
7
8
|
|
|
8
9
|
export const createUseFormWithCustomInput = <
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
|
+
|
|
3
|
+
import { type Component, computed, type ComputedRef, type ConcreteComponent, h, onUnmounted, type Ref, ref, watch } from "vue"
|
|
4
|
+
import { useIntl } from "../../utils"
|
|
5
|
+
import type { OmegaError } from "./types"
|
|
6
|
+
import type { OF } from "./useOmegaForm"
|
|
7
|
+
|
|
8
|
+
export const useErrorLabel = (form: OF<any, any>) => {
|
|
9
|
+
const { formatMessage } = useIntl()
|
|
10
|
+
const humanize = (str: string) => {
|
|
11
|
+
return str
|
|
12
|
+
.replace(/([A-Z])/g, " $1") // Add space before capital letters
|
|
13
|
+
.replace(/^./, (char) => char.toUpperCase()) // Capitalize the first letter
|
|
14
|
+
.trim() // Remove leading/trailing spaces
|
|
15
|
+
}
|
|
16
|
+
const fallback = (propsName: string) =>
|
|
17
|
+
formatMessage
|
|
18
|
+
? formatMessage({ id: `general.fields.${propsName}`, defaultMessage: humanize(propsName) })
|
|
19
|
+
: humanize(propsName)
|
|
20
|
+
const i18n = (propsName: string) =>
|
|
21
|
+
form.i18nNamespace
|
|
22
|
+
? formatMessage({ id: `${form.i18nNamespace}.fields.${propsName}`, defaultMessage: fallback(propsName) })
|
|
23
|
+
: fallback(propsName)
|
|
24
|
+
|
|
25
|
+
return i18n
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export const eHoc = (errorProps: {
|
|
29
|
+
form: OF<any, any>
|
|
30
|
+
fieldMap: Ref<Map<string, { id: string; label: string }>>
|
|
31
|
+
}) => {
|
|
32
|
+
return function FormHoc<P>(
|
|
33
|
+
WrappedComponent: Component<P>
|
|
34
|
+
): ConcreteComponent<P> {
|
|
35
|
+
return {
|
|
36
|
+
setup() {
|
|
37
|
+
const { fieldMap, form } = errorProps
|
|
38
|
+
const generalErrors = form.useStore((state) => state.errors)
|
|
39
|
+
const fieldMeta = form.useStore((state) => state.fieldMeta)
|
|
40
|
+
const errorMap = form.useStore((state) => state.errorMap)
|
|
41
|
+
|
|
42
|
+
const errorLabel = useErrorLabel(form)
|
|
43
|
+
|
|
44
|
+
const errors = computed(() => {
|
|
45
|
+
// Collect errors from fieldMeta (field-level errors for registered fields)
|
|
46
|
+
const fieldErrors = Object.entries(fieldMeta.value).reduce<OmegaError[]>((acc, [key, m]) => {
|
|
47
|
+
const fieldErrors = (m as { errors?: Array<{ message?: string }> } | undefined)?.errors ?? []
|
|
48
|
+
if (!fieldErrors.length) {
|
|
49
|
+
return acc
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
const fieldInfo = fieldMap.value.get(key)
|
|
53
|
+
if (!fieldInfo) {
|
|
54
|
+
return acc
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
acc.push({
|
|
58
|
+
label: fieldInfo.label,
|
|
59
|
+
inputId: fieldInfo.id,
|
|
60
|
+
errors: [fieldErrors[0]?.message].filter(Boolean) as string[]
|
|
61
|
+
})
|
|
62
|
+
|
|
63
|
+
return acc
|
|
64
|
+
}, [])
|
|
65
|
+
|
|
66
|
+
// Collect errors from errorMap.onDynamic / errorMap.onSubmit ONLY for fields that are NOT registered
|
|
67
|
+
// (registered fields already have their errors in fieldMeta).
|
|
68
|
+
// Our localized standard schema writes to onDynamic via validationLogic: revalidateLogic();
|
|
69
|
+
// caller-provided validators.onSubmit (via tanstackFormOptions spread) writes to onSubmit.
|
|
70
|
+
const submitErrors: OmegaError[] = []
|
|
71
|
+
const submitIssueMaps = [errorMap.value.onDynamic, errorMap.value.onSubmit].filter(
|
|
72
|
+
Boolean
|
|
73
|
+
) as unknown as Array<
|
|
74
|
+
Record<string, unknown>
|
|
75
|
+
>
|
|
76
|
+
const seenPaths = new Set<string>()
|
|
77
|
+
for (const issuesByPath of submitIssueMaps) {
|
|
78
|
+
for (const [_, issues] of Object.entries(issuesByPath)) {
|
|
79
|
+
if (Array.isArray(issues) && issues.length) {
|
|
80
|
+
for (const issue of issues) {
|
|
81
|
+
const issAny: any = issue
|
|
82
|
+
if (issAny?.path && Array.isArray(issAny.path) && issAny.path.length) {
|
|
83
|
+
const fieldPath = issAny.path.join(".")
|
|
84
|
+
if (!fieldMap.value.has(fieldPath) && !seenPaths.has(fieldPath)) {
|
|
85
|
+
seenPaths.add(fieldPath)
|
|
86
|
+
submitErrors.push({
|
|
87
|
+
label: errorLabel(fieldPath),
|
|
88
|
+
inputId: fieldPath,
|
|
89
|
+
errors: [issAny.message].filter(Boolean)
|
|
90
|
+
})
|
|
91
|
+
break
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
// Combine both error sources (no need to check for duplicates since they're mutually exclusive)
|
|
100
|
+
return [...fieldErrors, ...submitErrors]
|
|
101
|
+
})
|
|
102
|
+
|
|
103
|
+
return {
|
|
104
|
+
generalErrors,
|
|
105
|
+
errors
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
render({ errors, generalErrors }: any) {
|
|
109
|
+
return h(WrappedComponent, {
|
|
110
|
+
errors,
|
|
111
|
+
generalErrors,
|
|
112
|
+
...this.$attrs
|
|
113
|
+
}, this.$slots)
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
export const makeFieldMap = () => {
|
|
120
|
+
const fieldMap = ref(new Map<string, { label: string; id: string }>())
|
|
121
|
+
const registerField = (field: ComputedRef<{ name: string; label: string; id: string }>) => {
|
|
122
|
+
watch(field, (f) => {
|
|
123
|
+
fieldMap.value.set(f.name, { label: f.label, id: f.id })
|
|
124
|
+
}, { immediate: true })
|
|
125
|
+
onUnmounted(() => {
|
|
126
|
+
// Only delete if we still own this entry (id matches)
|
|
127
|
+
// This prevents old components from deleting entries registered by new components
|
|
128
|
+
// during re-mount transitions (e.g., when :key changes)
|
|
129
|
+
const currentEntry = fieldMap.value.get(field.value.name)
|
|
130
|
+
if (currentEntry?.id === field.value.id) {
|
|
131
|
+
fieldMap.value.delete(field.value.name)
|
|
132
|
+
}
|
|
133
|
+
})
|
|
134
|
+
}
|
|
135
|
+
return { fieldMap, registerField }
|
|
136
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
|
+
|
|
3
|
+
import { type Component, type ConcreteComponent, h } from "vue"
|
|
4
|
+
import type { OF } from "./useOmegaForm"
|
|
5
|
+
|
|
6
|
+
export const fHoc = (form: OF<any, any>) => {
|
|
7
|
+
return function FormHoc<P>(
|
|
8
|
+
WrappedComponent: Component<P>
|
|
9
|
+
): ConcreteComponent<P> {
|
|
10
|
+
return {
|
|
11
|
+
render() {
|
|
12
|
+
return h(WrappedComponent, {
|
|
13
|
+
form,
|
|
14
|
+
...this.$attrs
|
|
15
|
+
}, this.$slots)
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -1,5 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import type * as S from "effect-app/Schema"
|
|
2
|
+
|
|
3
|
+
export { getInputType, type SupportedInputs } from "./inputs"
|
|
4
|
+
export { createMeta, generateMetaFromSchema, isNullableOrUndefined, metadataFromAst } from "./meta/createMeta"
|
|
5
|
+
export type { CreateMeta, FilterItems } from "./meta/createMeta"
|
|
6
|
+
export { defaultsValueFromSchema } from "./meta/defaults"
|
|
7
|
+
export { toFormSchema } from "./meta/redacted"
|
|
8
|
+
export type { BaseFieldMeta, BooleanFieldMeta, DateFieldMeta, FieldMeta, MetaRecord, MultipleFieldMeta, NestedKeyOf, NumberFieldMeta, SelectFieldMeta, StringFieldMeta, UnknownFieldMeta } from "./meta/types"
|
|
9
|
+
export { deepMerge } from "./persistency"
|
|
10
|
+
export type { BaseProps, DefaultTypeProps, FieldPath, FieldPath_, FieldValidators, FormComponent, FormProps, FormType, OmegaArrayProps, OmegaAutoGenMeta, OmegaError, OmegaFormApi, OmegaFormParams, OmegaFormState, OmegaInputProps, OmegaInputPropsBase, PrefixFromDepth, TypeOverride, TypesWithOptions } from "./types"
|
|
11
|
+
export { makeStandardSchemaV1Hooks, toLocalizedStandardSchemaV1 } from "./validation/localized"
|
|
12
|
+
|
|
13
|
+
export { FormErrors, OmegaFormKey, useErrorLabel, useOmegaForm } from "./useOmegaForm"
|
|
14
|
+
export type { defaultValuesPriorityUnion, OF, OmegaConfig, OmegaFormReturn, Policies } from "./useOmegaForm"
|
|
3
15
|
|
|
4
16
|
export { type ExtractTagValue, type ExtractUnionBranch, type InputProps, type MergedInputProps, type TaggedUnionOption, type TaggedUnionOptionsArray, type TaggedUnionProps } from "./InputProps"
|
|
5
17
|
export { default as OmegaInput } from "./OmegaInput.vue"
|
|
@@ -9,6 +21,6 @@ export { default as OmegaTaggedUnionInternal } from "./OmegaTaggedUnionInternal.
|
|
|
9
21
|
|
|
10
22
|
export { useOnClose, usePreventClose } from "./blockDialog"
|
|
11
23
|
|
|
12
|
-
export { getInputType } from "./OmegaFormStuff"
|
|
13
|
-
|
|
14
24
|
export { createUseFormWithCustomInput } from "./createUseFormWithCustomInput"
|
|
25
|
+
|
|
26
|
+
export const duplicateSchema = <From, To>(schema: S.Codec<To, From>) => schema
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
const supportedInputs = [
|
|
2
|
+
"button",
|
|
3
|
+
"checkbox",
|
|
4
|
+
"color",
|
|
5
|
+
"date",
|
|
6
|
+
"email",
|
|
7
|
+
"number",
|
|
8
|
+
"password",
|
|
9
|
+
"radio",
|
|
10
|
+
"range",
|
|
11
|
+
"search",
|
|
12
|
+
"submit",
|
|
13
|
+
"tel",
|
|
14
|
+
"text",
|
|
15
|
+
"time",
|
|
16
|
+
"url"
|
|
17
|
+
] as const
|
|
18
|
+
|
|
19
|
+
export type SupportedInputs = typeof supportedInputs[number]
|
|
20
|
+
|
|
21
|
+
export const getInputType = (input: string): SupportedInputs =>
|
|
22
|
+
(supportedInputs as readonly string[]).includes(input) ? input as SupportedInputs : "text"
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
|
+
import * as S from "effect-app/Schema"
|
|
3
|
+
import type * as Record from "effect/Record"
|
|
4
|
+
import type { FieldMeta } from "./types"
|
|
5
|
+
|
|
6
|
+
export const getCheckMetas = (property: S.AST.AST): Array<Record<string, any>> => {
|
|
7
|
+
const checks = property.checks ?? []
|
|
8
|
+
|
|
9
|
+
return checks.flatMap((check) => {
|
|
10
|
+
if (check._tag === "FilterGroup") {
|
|
11
|
+
return check.checks.flatMap((inner) => {
|
|
12
|
+
const meta = inner.annotations?.meta
|
|
13
|
+
return meta && typeof meta === "object" ? [meta as Record<string, any>] : []
|
|
14
|
+
})
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const meta = check.annotations?.meta
|
|
18
|
+
return meta && typeof meta === "object" ? [meta as Record<string, any>] : []
|
|
19
|
+
})
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export const getFieldMetadataFromAst = (property: S.AST.AST) => {
|
|
23
|
+
const base: Partial<FieldMeta> & Record<string, unknown> = {
|
|
24
|
+
description: S.AST.resolveDescription(property)
|
|
25
|
+
}
|
|
26
|
+
const checks = getCheckMetas(property)
|
|
27
|
+
|
|
28
|
+
if (S.AST.isString(property)) {
|
|
29
|
+
base.type = "string"
|
|
30
|
+
for (const check of checks) {
|
|
31
|
+
switch (check._tag) {
|
|
32
|
+
case "isMinLength":
|
|
33
|
+
base.minLength = check.minLength
|
|
34
|
+
break
|
|
35
|
+
case "isMaxLength":
|
|
36
|
+
base.maxLength = check.maxLength
|
|
37
|
+
break
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const format = property.annotations?.["format"]
|
|
42
|
+
if (format === "email") {
|
|
43
|
+
base.format = "email"
|
|
44
|
+
}
|
|
45
|
+
} else if (S.AST.isNumber(property)) {
|
|
46
|
+
base.type = "number"
|
|
47
|
+
for (const check of checks) {
|
|
48
|
+
switch (check._tag) {
|
|
49
|
+
case "isInt":
|
|
50
|
+
base.refinement = "int"
|
|
51
|
+
break
|
|
52
|
+
case "isGreaterThanOrEqualTo":
|
|
53
|
+
base.minimum = check.minimum
|
|
54
|
+
break
|
|
55
|
+
case "isLessThanOrEqualTo":
|
|
56
|
+
base.maximum = check.maximum
|
|
57
|
+
break
|
|
58
|
+
case "isBetween":
|
|
59
|
+
base.minimum = check.minimum
|
|
60
|
+
base.maximum = check.maximum
|
|
61
|
+
break
|
|
62
|
+
case "isGreaterThan":
|
|
63
|
+
base.exclusiveMinimum = check.exclusiveMinimum
|
|
64
|
+
break
|
|
65
|
+
case "isLessThan":
|
|
66
|
+
base.exclusiveMaximum = check.exclusiveMaximum
|
|
67
|
+
break
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
} else if (S.AST.isBoolean(property)) {
|
|
71
|
+
base.type = "boolean"
|
|
72
|
+
} else if (
|
|
73
|
+
S.AST.isDeclaration(property)
|
|
74
|
+
&& (property.annotations as any)?.typeConstructor?._tag === "Date"
|
|
75
|
+
) {
|
|
76
|
+
base.type = "date"
|
|
77
|
+
} else {
|
|
78
|
+
base.type = "unknown"
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
return base
|
|
82
|
+
}
|