@volverjs/form-vue 1.0.0-beta.11 → 1.0.0-beta.13

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.
Files changed (19) hide show
  1. package/README.md +247 -239
  2. package/dist/VvForm.d.ts +13 -13
  3. package/dist/VvFormField.d.ts +13 -13
  4. package/dist/VvFormTemplate.d.ts +15 -15
  5. package/dist/VvFormWrapper.d.ts +11 -11
  6. package/dist/index.d.ts +319 -319
  7. package/dist/index.es.js +481 -457
  8. package/dist/index.umd.js +1 -1
  9. package/dist/types.d.ts +6 -3
  10. package/dist/utils.d.ts +2 -2
  11. package/package.json +52 -56
  12. package/src/VvForm.ts +287 -291
  13. package/src/VvFormField.ts +323 -325
  14. package/src/VvFormTemplate.ts +196 -178
  15. package/src/VvFormWrapper.ts +144 -147
  16. package/src/enums.ts +26 -26
  17. package/src/index.ts +117 -128
  18. package/src/types.ts +113 -117
  19. package/src/utils.ts +93 -97
package/src/VvFormTemplate.ts CHANGED
@@ -1,189 +1,207 @@
1
1
  import { get } from 'ts-dot-prop'
2
2
  import {
3
- type Component,
4
- type PropType,
5
- type InjectionKey,
6
- type DeepReadonly,
7
- type Ref,
8
- type VNode,
9
- defineComponent,
10
- h,
11
- inject,
12
- unref,
3
+ type Component,
4
+ type PropType,
5
+ type InjectionKey,
6
+ type DeepReadonly,
7
+ type Ref,
8
+ type VNode,
9
+ defineComponent,
10
+ h,
11
+ inject,
12
+ unref,
13
13
  } from 'vue'
14
14
  import type { TypeOf, z } from 'zod'
15
- import type { FormSchema, InjectedFormData, FormTemplate } from './types'
15
+ import type { FormSchema, InjectedFormData, FormTemplate, RenderFunctionOutput } from './types'
16
16
  import type { FormStatus } from './enums'
17
17
 
18
- export const defineFormTemplate = <Schema extends FormSchema>(
19
- formProvideKey: InjectionKey<InjectedFormData<Schema>>,
20
- VvFormField: Component,
21
- ) => {
22
- const VvFormTemplate = defineComponent({
23
- name: 'VvFormTemplate',
24
- props: {
25
- schema: {
26
- type: [Array, Function] as PropType<FormTemplate<Schema>>,
27
- required: true,
28
- },
29
- scope: {
30
- type: Object as PropType<Record<string, unknown>>,
31
- default: () => ({}),
32
- },
33
- },
34
- setup(templateProps, { slots: templateSlots }) {
35
- const injectedFormData = inject(formProvideKey)
36
- if (!injectedFormData?.formData) return
37
- return () => {
38
- const normalizedSchema =
39
- typeof templateProps.schema === 'function'
40
- ? templateProps.schema(
41
- injectedFormData,
42
- templateProps.scope,
43
- )
44
- : templateProps.schema
45
- let lastIf: boolean | undefined = undefined
46
- const toReturn = normalizedSchema.reduce<
47
- (VNode | VNode[] | undefined)[]
48
- >((acc, field) => {
49
- const normalizedField =
50
- typeof field === 'function'
51
- ? field(injectedFormData, templateProps.scope)
52
- : field
53
- const {
54
- vvIs,
55
- vvName,
56
- vvSlots,
57
- vvChildren,
58
- vvIf,
59
- vvElseIf,
60
- vvType,
61
- vvDefaultValue,
62
- vvShowValid,
63
- vvContent,
64
- ...props
65
- } = normalizedField
18
+ export function defineFormTemplate<Schema extends FormSchema>(formProvideKey: InjectionKey<InjectedFormData<Schema>>, VvFormField: Component) {
19
+ const VvFormTemplate = defineComponent({
20
+ name: 'VvFormTemplate',
21
+ props: {
22
+ schema: {
23
+ type: [Array, Function] as PropType<FormTemplate<Schema>>,
24
+ required: true,
25
+ },
26
+ scope: {
27
+ type: Object as PropType<Record<string, unknown>>,
28
+ default: () => ({}),
29
+ },
30
+ },
31
+ setup(templateProps, { slots: templateSlots }) {
32
+ const injectedFormData = inject(formProvideKey)
33
+ if (!injectedFormData?.formData)
34
+ return
35
+ return () => {
36
+ const normalizedSchema
37
+ = typeof templateProps.schema === 'function'
38
+ ? templateProps.schema(
39
+ injectedFormData,
40
+ templateProps.scope,
41
+ )
42
+ : templateProps.schema
43
+ let lastIf: boolean | undefined
44
+ const toReturn = normalizedSchema.reduce<
45
+ (VNode | VNode[] | undefined)[]
46
+ >((acc, field) => {
47
+ const normalizedField
48
+ = typeof field === 'function'
49
+ ? field(injectedFormData, templateProps.scope)
50
+ : field
51
+ const {
52
+ vvIs,
53
+ vvName,
54
+ vvSlots,
55
+ vvChildren,
56
+ vvIf,
57
+ vvElseIf,
58
+ vvType,
59
+ vvDefaultValue,
60
+ vvShowValid,
61
+ vvContent,
62
+ ...props
63
+ } = normalizedField
66
64
 
67
- // conditions
68
- if (vvIf !== undefined) {
69
- if (typeof vvIf === 'string') {
70
- lastIf = Boolean(
71
- get(
72
- Object(injectedFormData.formData.value),
73
- vvIf,
74
- ),
75
- )
76
- } else if (typeof vvIf === 'function') {
77
- lastIf = unref(vvIf(injectedFormData))
78
- } else {
79
- lastIf = unref(vvIf)
80
- }
81
- if (!lastIf) {
82
- return acc
83
- }
84
- } else if (vvElseIf !== undefined && lastIf !== undefined) {
85
- if (lastIf) {
86
- return acc
87
- }
88
- if (typeof vvElseIf === 'string') {
89
- lastIf = Boolean(
90
- get(
91
- Object(injectedFormData.formData.value),
92
- vvElseIf,
93
- ),
94
- )
95
- } else if (typeof vvElseIf === 'function') {
96
- lastIf = unref(vvElseIf(injectedFormData))
97
- } else {
98
- lastIf = unref(vvElseIf)
99
- }
100
- if (!lastIf) {
101
- return acc
102
- }
103
- } else {
104
- lastIf = undefined
105
- }
106
- // children
107
- const hChildren = vvChildren
108
- ? {
109
- default: (scope: Record<string, unknown>) =>
110
- h(VvFormTemplate, {
111
- schema: vvChildren,
112
- scope,
113
- }),
114
- }
115
- : undefined
116
- // render
117
- if (vvName) {
118
- acc.push(
119
- h(
120
- VvFormField,
121
- {
122
- name: vvName,
123
- is: vvIs,
124
- type: vvType,
125
- defaultValue: vvDefaultValue,
126
- showValid: vvShowValid,
127
- props,
128
- },
129
- vvSlots ?? hChildren ?? vvContent,
130
- ),
131
- )
132
- return acc
133
- }
134
- if (vvIs) {
135
- acc.push(
136
- h(
137
- vvIs as Component,
138
- props,
139
- vvSlots ?? hChildren ?? vvContent,
140
- ),
141
- )
142
- return acc
143
- }
144
- if (hChildren) {
145
- acc.push(hChildren.default(templateProps.scope))
146
- return acc
147
- }
148
- return acc
149
- }, [])
150
- toReturn.push(
151
- templateSlots?.default?.({
152
- formData: injectedFormData?.formData.value,
153
- submit: injectedFormData?.submit,
154
- validate: injectedFormData?.validate,
155
- errors: injectedFormData?.errors.value,
156
- status: injectedFormData?.status.value,
157
- invalid: injectedFormData?.invalid.value,
158
- }),
159
- )
160
- return toReturn
161
- }
162
- },
163
- })
65
+ // conditions
66
+ if (vvIf !== undefined) {
67
+ if (typeof vvIf === 'string') {
68
+ lastIf = Boolean(
69
+ get(
70
+ Object(injectedFormData.formData.value),
71
+ vvIf,
72
+ ),
73
+ )
74
+ }
75
+ else if (typeof vvIf === 'function') {
76
+ lastIf = unref(vvIf(injectedFormData))
77
+ }
78
+ else {
79
+ lastIf = unref(vvIf)
80
+ }
81
+ if (!lastIf) {
82
+ return acc
83
+ }
84
+ }
85
+ else if (vvElseIf !== undefined && lastIf !== undefined) {
86
+ if (lastIf) {
87
+ return acc
88
+ }
89
+ if (typeof vvElseIf === 'string') {
90
+ lastIf = Boolean(
91
+ get(
92
+ Object(injectedFormData.formData.value),
93
+ vvElseIf,
94
+ ),
95
+ )
96
+ }
97
+ else if (typeof vvElseIf === 'function') {
98
+ lastIf = unref(vvElseIf(injectedFormData))
99
+ }
100
+ else {
101
+ lastIf = unref(vvElseIf)
102
+ }
103
+ if (!lastIf) {
104
+ return acc
105
+ }
106
+ }
107
+ else {
108
+ lastIf = undefined
109
+ }
164
110
 
165
- /**
166
- * An hack to add types to the default slot
167
- */
168
- return VvFormTemplate as typeof VvFormTemplate & {
169
- new (): {
170
- $slots: {
171
- default: (_: {
172
- formData: unknown extends
173
- | Partial<TypeOf<Schema>>
174
- | undefined
175
- ? undefined
176
- : Partial<TypeOf<Schema>> | undefined
177
- submit: () => Promise<boolean>
178
- validate: () => Promise<boolean>
179
- errors: Readonly<
111
+ // children
112
+ let hChildren: RenderFunctionOutput | { default: (scope: Record<string, unknown>) => RenderFunctionOutput } | undefined
113
+ if (vvChildren) {
114
+ if (typeof vvIs === 'string') {
115
+ hChildren = h(VvFormTemplate, {
116
+ schema: vvChildren,
117
+ })
118
+ }
119
+ else {
120
+ hChildren = {
121
+ default: (scope: Record<string, unknown>) =>
122
+ h(VvFormTemplate, {
123
+ schema: vvChildren,
124
+ scope,
125
+ }),
126
+ }
127
+ }
128
+ }
129
+
130
+ // render
131
+ if (vvName) {
132
+ acc.push(
133
+ h(
134
+ VvFormField,
135
+ {
136
+ name: vvName,
137
+ is: vvIs,
138
+ type: vvType,
139
+ defaultValue: vvDefaultValue,
140
+ showValid: vvShowValid,
141
+ props,
142
+ },
143
+ vvSlots ?? hChildren ?? vvContent,
144
+ ),
145
+ )
146
+ return acc
147
+ }
148
+ if (vvIs) {
149
+ acc.push(
150
+ h(
151
+ vvIs as Component,
152
+ props,
153
+ vvSlots ?? hChildren ?? vvContent,
154
+ ),
155
+ )
156
+ return acc
157
+ }
158
+ if (hChildren) {
159
+ if ('default' in hChildren) {
160
+ acc.push(hChildren.default(templateProps.scope))
161
+ }
162
+ else {
163
+ acc.push(hChildren)
164
+ }
165
+ return acc
166
+ }
167
+ return acc
168
+ }, [])
169
+ toReturn.push(
170
+ templateSlots?.default?.({
171
+ formData: injectedFormData?.formData.value,
172
+ submit: injectedFormData?.submit,
173
+ validate: injectedFormData?.validate,
174
+ errors: injectedFormData?.errors.value,
175
+ status: injectedFormData?.status.value,
176
+ invalid: injectedFormData?.invalid.value,
177
+ }),
178
+ )
179
+ return toReturn
180
+ }
181
+ },
182
+ })
183
+
184
+ /**
185
+ * An hack to add types to the default slot
186
+ */
187
+ return VvFormTemplate as typeof VvFormTemplate & {
188
+ new (): {
189
+ $slots: {
190
+ default: (_: {
191
+ formData: unknown extends
192
+ | Partial<TypeOf<Schema>>
193
+ | undefined
194
+ ? undefined
195
+ : Partial<TypeOf<Schema>> | undefined
196
+ submit: () => Promise<boolean>
197
+ validate: () => Promise<boolean>
198
+ errors: Readonly<
180
199
  Ref<DeepReadonly<z.inferFormattedError<Schema>>>
181
200
  >
182
- status: Ref<DeepReadonly<`${FormStatus}` | undefined>>
183
- invalid: Ref<DeepReadonly<boolean>>
184
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
185
- }) => any
186
- }
187
- }
188
- }
201
+ status: Ref<DeepReadonly<`${FormStatus}` | undefined>>
202
+ invalid: Ref<DeepReadonly<boolean>>
203
+ }) => any
204
+ }
205
+ }
206
+ }
189
207
  }