@volverjs/form-vue 1.0.0-beta.12 → 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 +5 -5
  3. package/dist/VvFormField.d.ts +7 -7
  4. package/dist/VvFormTemplate.d.ts +4 -4
  5. package/dist/VvFormWrapper.d.ts +3 -3
  6. package/dist/index.d.ts +17 -17
  7. package/dist/index.es.js +475 -453
  8. package/dist/index.umd.js +1 -1
  9. package/dist/types.d.ts +3 -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 +193 -188
  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 +111 -117
  19. package/src/utils.ts +93 -97
package/src/VvFormTemplate.ts CHANGED
@@ -1,202 +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
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
- }
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
+ }
106
110
 
107
- // children
108
- let hChildren: RenderFunctionOutput | {default: (scope: Record<string, unknown>) => RenderFunctionOutput} | undefined
109
- if(vvChildren) {
110
- if(typeof vvIs === 'string') {
111
- hChildren = h(VvFormTemplate, {
112
- schema: vvChildren,
113
- })
114
- } else {
115
- hChildren = {
116
- default: (scope: Record<string, unknown>) =>
117
- h(VvFormTemplate, {
118
- schema: vvChildren,
119
- scope,
120
- }),
121
- }
122
- }
123
- }
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
+ }
124
129
 
125
- // render
126
- if (vvName) {
127
- acc.push(
128
- h(
129
- VvFormField,
130
- {
131
- name: vvName,
132
- is: vvIs,
133
- type: vvType,
134
- defaultValue: vvDefaultValue,
135
- showValid: vvShowValid,
136
- props,
137
- },
138
- vvSlots ?? hChildren ?? vvContent,
139
- ),
140
- )
141
- return acc
142
- }
143
- if (vvIs) {
144
- acc.push(
145
- h(
146
- vvIs as Component,
147
- props,
148
- vvSlots ?? hChildren ?? vvContent,
149
- ),
150
- )
151
- return acc
152
- }
153
- if (hChildren) {
154
- if('default' in hChildren) {
155
- acc.push(hChildren.default(templateProps.scope))
156
- } else {
157
- acc.push(hChildren)
158
- }
159
- return acc
160
- }
161
- return acc
162
- }, [])
163
- toReturn.push(
164
- templateSlots?.default?.({
165
- formData: injectedFormData?.formData.value,
166
- submit: injectedFormData?.submit,
167
- validate: injectedFormData?.validate,
168
- errors: injectedFormData?.errors.value,
169
- status: injectedFormData?.status.value,
170
- invalid: injectedFormData?.invalid.value,
171
- }),
172
- )
173
- return toReturn
174
- }
175
- },
176
- })
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
+ })
177
183
 
178
- /**
179
- * An hack to add types to the default slot
180
- */
181
- return VvFormTemplate as typeof VvFormTemplate & {
182
- new (): {
183
- $slots: {
184
- default: (_: {
185
- formData: unknown extends
186
- | Partial<TypeOf<Schema>>
187
- | undefined
188
- ? undefined
189
- : Partial<TypeOf<Schema>> | undefined
190
- submit: () => Promise<boolean>
191
- validate: () => Promise<boolean>
192
- errors: Readonly<
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<
193
199
  Ref<DeepReadonly<z.inferFormattedError<Schema>>>
194
200
  >
195
- status: Ref<DeepReadonly<`${FormStatus}` | undefined>>
196
- invalid: Ref<DeepReadonly<boolean>>
197
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
198
- }) => any
199
- }
200
- }
201
- }
201
+ status: Ref<DeepReadonly<`${FormStatus}` | undefined>>
202
+ invalid: Ref<DeepReadonly<boolean>>
203
+ }) => any
204
+ }
205
+ }
206
+ }
202
207
  }