@volverjs/form-vue 1.0.0-beta.27 → 1.0.0-beta.28
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/dist/VvForm.d.ts +9 -9
- package/dist/VvFormField.d.ts +1 -1
- package/dist/VvFormWrapper.d.ts +4 -4
- package/dist/index.d.ts +41 -48
- package/dist/index.es.js +10 -10
- package/dist/index.umd.js +1 -1
- package/package.json +1 -1
- package/src/VvForm.ts +15 -14
- package/src/VvFormField.ts +2 -2
- package/src/VvFormWrapper.ts +5 -5
- package/src/index.ts +4 -4
package/dist/VvForm.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component, InjectionKey, PropType, SlotsType } from 'vue';
|
|
1
|
+
import { Component, InjectionKey, PropType, SlotsType, UnwrapRef } from 'vue';
|
|
2
2
|
import { z } from 'zod';
|
|
3
3
|
import { FormComponentOptions, FormSchema, FormTemplate, InjectedFormData, InjectedFormWrapperData } from './types';
|
|
4
4
|
import { FormStatus } from './enums';
|
|
@@ -85,18 +85,18 @@ export declare function defineForm<Schema extends FormSchema, Type, FormTemplate
|
|
|
85
85
|
modelValue: Record<string, any>;
|
|
86
86
|
}, SlotsType<{
|
|
87
87
|
default: {
|
|
88
|
-
errors: Readonly<import('vue').Ref<import('vue').DeepReadonly<z.inferFormattedError<Schema, string>> | undefined, import('vue').DeepReadonly<z.inferFormattedError<Schema, string>> | undefined
|
|
89
|
-
formData: import('vue').Ref<(undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined
|
|
88
|
+
errors: UnwrapRef<Readonly<import('vue').Ref<import('vue').DeepReadonly<z.inferFormattedError<Schema, string>> | undefined, import('vue').DeepReadonly<z.inferFormattedError<Schema, string>> | undefined>>>;
|
|
89
|
+
formData: UnwrapRef<import('vue').Ref<(undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined>>;
|
|
90
|
+
invalid: UnwrapRef<import('vue').ComputedRef<boolean>>;
|
|
91
|
+
readonly: UnwrapRef<import('vue').Ref<boolean, boolean>>;
|
|
92
|
+
status: UnwrapRef<Readonly<import('vue').Ref<FormStatus | undefined, FormStatus | undefined>>>;
|
|
93
|
+
wrappers: typeof wrappers;
|
|
94
|
+
clear: () => void;
|
|
90
95
|
ignoreUpdates: import('@vueuse/core').IgnoredUpdater;
|
|
91
|
-
|
|
92
|
-
readonly: import('vue').Ref<boolean, boolean>;
|
|
93
|
-
status: Readonly<import('vue').Ref<FormStatus | undefined, FormStatus | undefined>>;
|
|
96
|
+
reset: () => void;
|
|
94
97
|
stopUpdatesWatch: import('vue').WatchStopHandle;
|
|
95
98
|
submit: () => Promise<boolean>;
|
|
96
99
|
validate: (value?: (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>;
|
|
97
|
-
clear: () => void;
|
|
98
|
-
reset: () => void;
|
|
99
|
-
wrappers: typeof wrappers;
|
|
100
100
|
};
|
|
101
101
|
}>, {}, {}, "invalid" | "valid" | "reset" | "status" | "readonly" | "clear" | "submit" | "errors" | "tag" | "template" | "validate", import('vue').ComponentProvideOptions, true, {}, any>;
|
|
102
102
|
};
|
package/dist/VvFormField.d.ts
CHANGED
|
@@ -122,8 +122,8 @@ export declare function defineFormField<Schema extends FormSchema, Type>(formPro
|
|
|
122
122
|
invalid: boolean;
|
|
123
123
|
invalidLabel?: string[];
|
|
124
124
|
modelValue: any;
|
|
125
|
-
onUpdate: (value: unknown) => void;
|
|
126
125
|
readonly: boolean;
|
|
126
|
+
onUpdate: (value: unknown) => void;
|
|
127
127
|
submit?: InjectedFormData<Schema, Type>["submit"];
|
|
128
128
|
validate?: InjectedFormData<Schema, Type>["validate"];
|
|
129
129
|
};
|
package/dist/VvFormWrapper.d.ts
CHANGED
|
@@ -11,12 +11,12 @@ export declare function defineFormWrapper<Schema extends FormSchema, Type>(formP
|
|
|
11
11
|
default: undefined;
|
|
12
12
|
};
|
|
13
13
|
}>, {
|
|
14
|
-
clear: (() => void) | undefined;
|
|
15
14
|
errors: Readonly<Ref<DeepReadonly<inferFormattedError<Schema, string>> | undefined, DeepReadonly<inferFormattedError<Schema, string>> | undefined>> | undefined;
|
|
16
15
|
fields: Ref<Map<string, string> & Omit<Map<string, string>, keyof Map<any, any>>, Map<string, string> | (Map<string, string> & Omit<Map<string, string>, keyof Map<any, any>>)>;
|
|
17
16
|
fieldsErrors: Ref<Map<string, inferFormattedError<Schema, string>>, Map<string, inferFormattedError<Schema, string>>>;
|
|
18
17
|
formData: Ref<(undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined> | undefined;
|
|
19
18
|
invalid: import('vue').ComputedRef<boolean>;
|
|
19
|
+
clear: (() => void) | undefined;
|
|
20
20
|
reset: (() => void) | undefined;
|
|
21
21
|
submit: (() => Promise<boolean>) | undefined;
|
|
22
22
|
validate: ((formData?: (undefined extends Type ? Partial<z.TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>) | undefined;
|
|
@@ -38,14 +38,14 @@ export declare function defineFormWrapper<Schema extends FormSchema, Type>(formP
|
|
|
38
38
|
}, SlotsType<{
|
|
39
39
|
default: {
|
|
40
40
|
errors?: DeepReadonly<z.inferFormattedError<Schema>>;
|
|
41
|
+
fieldsErrors: Map<string, inferFormattedError<Schema, string>>;
|
|
41
42
|
formData?: undefined extends Type ? Partial<z.infer<Schema>> : Type;
|
|
42
43
|
formErrors?: DeepReadonly<inferFormattedError<Schema, string>>;
|
|
43
44
|
invalid: boolean;
|
|
45
|
+
clear?: InjectedFormData<Schema, Type>["clear"];
|
|
46
|
+
reset?: InjectedFormData<Schema, Type>["reset"];
|
|
44
47
|
submit?: InjectedFormData<Schema, Type>["submit"];
|
|
45
48
|
validate?: InjectedFormData<Schema, Type>["validate"];
|
|
46
49
|
validateWrapper?: () => Promise<boolean>;
|
|
47
|
-
fieldsErrors: Map<string, inferFormattedError<Schema, string>>;
|
|
48
|
-
clear?: InjectedFormData<Schema, Type>["clear"];
|
|
49
|
-
reset?: InjectedFormData<Schema, Type>["reset"];
|
|
50
50
|
};
|
|
51
51
|
}>, {}, {}, "invalid" | "reset" | "clear" | "submit" | "errors" | "tag" | "validate" | "formData" | "fields" | "fieldsErrors" | "validateWrapper", import('vue').ComponentProvideOptions, true, {}, any>;
|
package/dist/index.d.ts
CHANGED
|
@@ -93,18 +93,18 @@ export declare function useForm<Schema extends FormSchema, Type>(schema: Schema,
|
|
|
93
93
|
modelValue: Record<string, any>;
|
|
94
94
|
}, import('vue').SlotsType<{
|
|
95
95
|
default: {
|
|
96
|
-
errors:
|
|
97
|
-
formData:
|
|
96
|
+
errors: import('vue').DeepReadonly<import('zod').inferFormattedError<Schema, string>> | undefined;
|
|
97
|
+
formData: (undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined;
|
|
98
|
+
invalid: import('vue').UnwrapRef<import('vue').ComputedRef<boolean>>;
|
|
99
|
+
readonly: import('vue').UnwrapRef<import('vue').Ref<boolean, boolean>>;
|
|
100
|
+
status: import('vue').UnwrapRef<Readonly<import('vue').Ref<import('./enums').FormStatus | undefined, import('./enums').FormStatus | undefined>>>;
|
|
101
|
+
wrappers: Map<string, InjectedFormWrapperData<Schema>>;
|
|
102
|
+
clear: () => void;
|
|
98
103
|
ignoreUpdates: import('@vueuse/core').IgnoredUpdater;
|
|
99
|
-
|
|
100
|
-
readonly: import('vue').Ref<boolean, boolean>;
|
|
101
|
-
status: Readonly<import('vue').Ref<import('./enums').FormStatus | undefined, import('./enums').FormStatus | undefined>>;
|
|
104
|
+
reset: () => void;
|
|
102
105
|
stopUpdatesWatch: import('vue').WatchStopHandle;
|
|
103
106
|
submit: () => Promise<boolean>;
|
|
104
107
|
validate: (value?: (undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>;
|
|
105
|
-
clear: () => void;
|
|
106
|
-
reset: () => void;
|
|
107
|
-
wrappers: Map<string, InjectedFormWrapperData<Schema>>;
|
|
108
108
|
};
|
|
109
109
|
}>, {}, {}, "invalid" | "valid" | "reset" | "status" | "readonly" | "clear" | "submit" | "errors" | "tag" | "template" | "validate", import('vue').ComponentProvideOptions, true, {}, any>;
|
|
110
110
|
VvFormField: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
@@ -227,8 +227,8 @@ export declare function useForm<Schema extends FormSchema, Type>(schema: Schema,
|
|
|
227
227
|
invalid: boolean;
|
|
228
228
|
invalidLabel?: string[];
|
|
229
229
|
modelValue: any;
|
|
230
|
-
onUpdate: (value: unknown) => void;
|
|
231
230
|
readonly: boolean;
|
|
231
|
+
onUpdate: (value: unknown) => void;
|
|
232
232
|
submit?: InjectedFormData<Schema_2, Type_2>["submit"];
|
|
233
233
|
validate?: ((formData?: (undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>) | undefined;
|
|
234
234
|
};
|
|
@@ -385,12 +385,12 @@ export declare function useForm<Schema extends FormSchema, Type>(schema: Schema,
|
|
|
385
385
|
default: undefined;
|
|
386
386
|
};
|
|
387
387
|
}>, {
|
|
388
|
-
clear: (() => void) | undefined;
|
|
389
388
|
errors: Readonly<import('vue').Ref<import('vue').DeepReadonly<import('zod').inferFormattedError<Schema, string>> | undefined, import('vue').DeepReadonly<import('zod').inferFormattedError<Schema, string>> | undefined>> | undefined;
|
|
390
389
|
fields: import('vue').Ref<Map<string, string> & Omit<Map<string, string>, keyof Map<any, any>>, Map<string, string> | (Map<string, string> & Omit<Map<string, string>, keyof Map<any, any>>)>;
|
|
391
390
|
fieldsErrors: import('vue').Ref<Map<string, import('zod').inferFormattedError<Schema, string>>, Map<string, import('zod').inferFormattedError<Schema, string>>>;
|
|
392
391
|
formData: import('vue').Ref<(undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined, (undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined> | undefined;
|
|
393
392
|
invalid: import('vue').ComputedRef<boolean>;
|
|
393
|
+
clear: (() => void) | undefined;
|
|
394
394
|
reset: (() => void) | undefined;
|
|
395
395
|
submit: (() => Promise<boolean>) | undefined;
|
|
396
396
|
validate: ((formData?: (undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>) | undefined;
|
|
@@ -412,15 +412,15 @@ export declare function useForm<Schema extends FormSchema, Type>(schema: Schema,
|
|
|
412
412
|
}, import('vue').SlotsType<{
|
|
413
413
|
default: {
|
|
414
414
|
errors?: import('vue').DeepReadonly<import('zod').inferFormattedError<Schema, string>> | undefined;
|
|
415
|
+
fieldsErrors: Map<string, import('zod').inferFormattedError<Schema, string>>;
|
|
415
416
|
formData?: (undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined;
|
|
416
417
|
formErrors?: import('vue').DeepReadonly<import('zod').inferFormattedError<Schema, string>> | undefined;
|
|
417
418
|
invalid: boolean;
|
|
419
|
+
clear?: InjectedFormData<Schema_5, Type_5>["clear"];
|
|
420
|
+
reset?: InjectedFormData<Schema_5, Type_5>["reset"];
|
|
418
421
|
submit?: InjectedFormData<Schema_5, Type_5>["submit"];
|
|
419
422
|
validate?: ((formData?: (undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>) | undefined;
|
|
420
423
|
validateWrapper?: (() => Promise<boolean>) | undefined;
|
|
421
|
-
fieldsErrors: Map<string, import('zod').inferFormattedError<Schema, string>>;
|
|
422
|
-
clear?: InjectedFormData<Schema_5, Type_5>["clear"];
|
|
423
|
-
reset?: InjectedFormData<Schema_5, Type_5>["reset"];
|
|
424
424
|
};
|
|
425
425
|
}>, {}, {}, "invalid" | "reset" | "clear" | "submit" | "errors" | "tag" | "validate" | "formData" | "fields" | "fieldsErrors" | "validateWrapper", import('vue').ComponentProvideOptions, true, {}, any>;
|
|
426
426
|
} | {
|
|
@@ -531,34 +531,27 @@ export declare function useForm<Schema extends FormSchema, Type>(schema: Schema,
|
|
|
531
531
|
modelValue: Record<string, any>;
|
|
532
532
|
}, import('vue').SlotsType<{
|
|
533
533
|
default: {
|
|
534
|
-
errors:
|
|
534
|
+
errors: {
|
|
535
535
|
readonly [x: string]: {
|
|
536
536
|
readonly _errors: readonly string[];
|
|
537
537
|
} | undefined;
|
|
538
538
|
readonly _errors: readonly string[];
|
|
539
|
-
} | undefined
|
|
540
|
-
|
|
541
|
-
readonly _errors: readonly string[];
|
|
542
|
-
} | undefined;
|
|
543
|
-
readonly _errors: readonly string[];
|
|
544
|
-
} | undefined>>;
|
|
545
|
-
formData: import('vue').Ref<(undefined extends Type ? Partial<{
|
|
546
|
-
[x: string]: any;
|
|
547
|
-
}> : Type) | undefined, (undefined extends Type ? Partial<{
|
|
539
|
+
} | undefined;
|
|
540
|
+
formData: (undefined extends Type ? Partial<{
|
|
548
541
|
[x: string]: any;
|
|
549
|
-
}> : Type) | undefined
|
|
542
|
+
}> : Type) | undefined;
|
|
543
|
+
invalid: import('vue').UnwrapRef<import('vue').ComputedRef<boolean>>;
|
|
544
|
+
readonly: import('vue').UnwrapRef<import('vue').Ref<boolean, boolean>>;
|
|
545
|
+
status: import('vue').UnwrapRef<Readonly<import('vue').Ref<import('./enums').FormStatus | undefined, import('./enums').FormStatus | undefined>>>;
|
|
546
|
+
wrappers: Map<string, InjectedFormWrapperData<AnyZodObject>>;
|
|
547
|
+
clear: () => void;
|
|
550
548
|
ignoreUpdates: import('@vueuse/core').IgnoredUpdater;
|
|
551
|
-
|
|
552
|
-
readonly: import('vue').Ref<boolean, boolean>;
|
|
553
|
-
status: Readonly<import('vue').Ref<import('./enums').FormStatus | undefined, import('./enums').FormStatus | undefined>>;
|
|
549
|
+
reset: () => void;
|
|
554
550
|
stopUpdatesWatch: import('vue').WatchStopHandle;
|
|
555
551
|
submit: () => Promise<boolean>;
|
|
556
552
|
validate: (value?: (undefined extends Type ? Partial<{
|
|
557
553
|
[x: string]: any;
|
|
558
554
|
}> : Type) | undefined, fields?: Set<string>) => Promise<boolean>;
|
|
559
|
-
clear: () => void;
|
|
560
|
-
reset: () => void;
|
|
561
|
-
wrappers: Map<string, InjectedFormWrapperData<AnyZodObject>>;
|
|
562
555
|
};
|
|
563
556
|
}>, {}, {}, "invalid" | "valid" | "reset" | "status" | "readonly" | "clear" | "submit" | "errors" | "tag" | "template" | "validate", import('vue').ComponentProvideOptions, true, {}, any>;
|
|
564
557
|
VvFormField: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
@@ -680,8 +673,8 @@ export declare function useForm<Schema extends FormSchema, Type>(schema: Schema,
|
|
|
680
673
|
invalid: boolean;
|
|
681
674
|
invalidLabel?: string[];
|
|
682
675
|
modelValue: any;
|
|
683
|
-
onUpdate: (value: unknown) => void;
|
|
684
676
|
readonly: boolean;
|
|
677
|
+
onUpdate: (value: unknown) => void;
|
|
685
678
|
submit?: InjectedFormData<Schema_2, Type_2>["submit"];
|
|
686
679
|
validate?: ((formData?: (undefined extends Type ? Partial<{
|
|
687
680
|
[x: string]: any;
|
|
@@ -850,7 +843,6 @@ export declare function useForm<Schema extends FormSchema, Type>(schema: Schema,
|
|
|
850
843
|
default: undefined;
|
|
851
844
|
};
|
|
852
845
|
}>, {
|
|
853
|
-
clear: (() => void) | undefined;
|
|
854
846
|
errors: Readonly<import('vue').Ref<{
|
|
855
847
|
readonly [x: string]: {
|
|
856
848
|
readonly _errors: readonly string[];
|
|
@@ -870,6 +862,7 @@ export declare function useForm<Schema extends FormSchema, Type>(schema: Schema,
|
|
|
870
862
|
[x: string]: any;
|
|
871
863
|
}> : Type) | undefined> | undefined;
|
|
872
864
|
invalid: import('vue').ComputedRef<boolean>;
|
|
865
|
+
clear: (() => void) | undefined;
|
|
873
866
|
reset: (() => void) | undefined;
|
|
874
867
|
submit: (() => Promise<boolean>) | undefined;
|
|
875
868
|
validate: ((formData?: (undefined extends Type ? Partial<{
|
|
@@ -898,6 +891,7 @@ export declare function useForm<Schema extends FormSchema, Type>(schema: Schema,
|
|
|
898
891
|
} | undefined;
|
|
899
892
|
readonly _errors: readonly string[];
|
|
900
893
|
} | undefined;
|
|
894
|
+
fieldsErrors: Map<string, import('zod').inferFormattedError<AnyZodObject, string>>;
|
|
901
895
|
formData?: (undefined extends Type ? Partial<{
|
|
902
896
|
[x: string]: any;
|
|
903
897
|
}> : Type) | undefined;
|
|
@@ -908,14 +902,13 @@ export declare function useForm<Schema extends FormSchema, Type>(schema: Schema,
|
|
|
908
902
|
readonly _errors: readonly string[];
|
|
909
903
|
} | undefined;
|
|
910
904
|
invalid: boolean;
|
|
905
|
+
clear?: InjectedFormData<Schema_5, Type_5>["clear"];
|
|
906
|
+
reset?: InjectedFormData<Schema_5, Type_5>["reset"];
|
|
911
907
|
submit?: InjectedFormData<Schema_5, Type_5>["submit"];
|
|
912
908
|
validate?: ((formData?: (undefined extends Type ? Partial<{
|
|
913
909
|
[x: string]: any;
|
|
914
910
|
}> : Type) | undefined, fields?: Set<string>) => Promise<boolean>) | undefined;
|
|
915
911
|
validateWrapper?: (() => Promise<boolean>) | undefined;
|
|
916
|
-
fieldsErrors: Map<string, import('zod').inferFormattedError<AnyZodObject, string>>;
|
|
917
|
-
clear?: InjectedFormData<Schema_5, Type_5>["clear"];
|
|
918
|
-
reset?: InjectedFormData<Schema_5, Type_5>["reset"];
|
|
919
912
|
};
|
|
920
913
|
}>, {}, {}, "invalid" | "reset" | "clear" | "submit" | "errors" | "tag" | "validate" | "formData" | "fields" | "fieldsErrors" | "validateWrapper", import('vue').ComponentProvideOptions, true, {}, any>;
|
|
921
914
|
};
|
|
@@ -1016,18 +1009,18 @@ export declare function formType<Schema extends FormSchema, Type>(schema: Schema
|
|
|
1016
1009
|
modelValue: Record<string, any>;
|
|
1017
1010
|
}, import('vue').SlotsType<{
|
|
1018
1011
|
default: {
|
|
1019
|
-
errors:
|
|
1020
|
-
formData:
|
|
1012
|
+
errors: import('vue').DeepReadonly<import('zod').inferFormattedError<Schema, string>> | undefined;
|
|
1013
|
+
formData: (undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined;
|
|
1014
|
+
invalid: import('vue').UnwrapRef<import('vue').ComputedRef<boolean>>;
|
|
1015
|
+
readonly: import('vue').UnwrapRef<import('vue').Ref<boolean, boolean>>;
|
|
1016
|
+
status: import('vue').UnwrapRef<Readonly<import('vue').Ref<import('./enums').FormStatus | undefined, import('./enums').FormStatus | undefined>>>;
|
|
1017
|
+
wrappers: Map<string, InjectedFormWrapperData<Schema>>;
|
|
1018
|
+
clear: () => void;
|
|
1021
1019
|
ignoreUpdates: import('@vueuse/core').IgnoredUpdater;
|
|
1022
|
-
|
|
1023
|
-
readonly: import('vue').Ref<boolean, boolean>;
|
|
1024
|
-
status: Readonly<import('vue').Ref<import('./enums').FormStatus | undefined, import('./enums').FormStatus | undefined>>;
|
|
1020
|
+
reset: () => void;
|
|
1025
1021
|
stopUpdatesWatch: import('vue').WatchStopHandle;
|
|
1026
1022
|
submit: () => Promise<boolean>;
|
|
1027
1023
|
validate: (value?: (undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>;
|
|
1028
|
-
clear: () => void;
|
|
1029
|
-
reset: () => void;
|
|
1030
|
-
wrappers: Map<string, InjectedFormWrapperData<Schema>>;
|
|
1031
1024
|
};
|
|
1032
1025
|
}>, {}, {}, "invalid" | "valid" | "reset" | "status" | "readonly" | "clear" | "submit" | "errors" | "tag" | "template" | "validate", import('vue').ComponentProvideOptions, true, {}, any>;
|
|
1033
1026
|
VvFormField: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
@@ -1150,8 +1143,8 @@ export declare function formType<Schema extends FormSchema, Type>(schema: Schema
|
|
|
1150
1143
|
invalid: boolean;
|
|
1151
1144
|
invalidLabel?: string[];
|
|
1152
1145
|
modelValue: any;
|
|
1153
|
-
onUpdate: (value: unknown) => void;
|
|
1154
1146
|
readonly: boolean;
|
|
1147
|
+
onUpdate: (value: unknown) => void;
|
|
1155
1148
|
submit?: InjectedFormData<Schema_2, Type_2>["submit"];
|
|
1156
1149
|
validate?: ((formData?: (undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>) | undefined;
|
|
1157
1150
|
};
|
|
@@ -1308,12 +1301,12 @@ export declare function formType<Schema extends FormSchema, Type>(schema: Schema
|
|
|
1308
1301
|
default: undefined;
|
|
1309
1302
|
};
|
|
1310
1303
|
}>, {
|
|
1311
|
-
clear: (() => void) | undefined;
|
|
1312
1304
|
errors: Readonly<import('vue').Ref<import('vue').DeepReadonly<import('zod').inferFormattedError<Schema, string>> | undefined, import('vue').DeepReadonly<import('zod').inferFormattedError<Schema, string>> | undefined>> | undefined;
|
|
1313
1305
|
fields: import('vue').Ref<Map<string, string> & Omit<Map<string, string>, keyof Map<any, any>>, Map<string, string> | (Map<string, string> & Omit<Map<string, string>, keyof Map<any, any>>)>;
|
|
1314
1306
|
fieldsErrors: import('vue').Ref<Map<string, import('zod').inferFormattedError<Schema, string>>, Map<string, import('zod').inferFormattedError<Schema, string>>>;
|
|
1315
1307
|
formData: import('vue').Ref<(undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined, (undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined> | undefined;
|
|
1316
1308
|
invalid: import('vue').ComputedRef<boolean>;
|
|
1309
|
+
clear: (() => void) | undefined;
|
|
1317
1310
|
reset: (() => void) | undefined;
|
|
1318
1311
|
submit: (() => Promise<boolean>) | undefined;
|
|
1319
1312
|
validate: ((formData?: (undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>) | undefined;
|
|
@@ -1335,15 +1328,15 @@ export declare function formType<Schema extends FormSchema, Type>(schema: Schema
|
|
|
1335
1328
|
}, import('vue').SlotsType<{
|
|
1336
1329
|
default: {
|
|
1337
1330
|
errors?: import('vue').DeepReadonly<import('zod').inferFormattedError<Schema, string>> | undefined;
|
|
1331
|
+
fieldsErrors: Map<string, import('zod').inferFormattedError<Schema, string>>;
|
|
1338
1332
|
formData?: (undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined;
|
|
1339
1333
|
formErrors?: import('vue').DeepReadonly<import('zod').inferFormattedError<Schema, string>> | undefined;
|
|
1340
1334
|
invalid: boolean;
|
|
1335
|
+
clear?: InjectedFormData<Schema_5, Type_5>["clear"];
|
|
1336
|
+
reset?: InjectedFormData<Schema_5, Type_5>["reset"];
|
|
1341
1337
|
submit?: InjectedFormData<Schema_5, Type_5>["submit"];
|
|
1342
1338
|
validate?: ((formData?: (undefined extends Type ? Partial<import('zod').TypeOf<Schema>> : Type) | undefined, fields?: Set<string>) => Promise<boolean>) | undefined;
|
|
1343
1339
|
validateWrapper?: (() => Promise<boolean>) | undefined;
|
|
1344
|
-
fieldsErrors: Map<string, import('zod').inferFormattedError<Schema, string>>;
|
|
1345
|
-
clear?: InjectedFormData<Schema_5, Type_5>["clear"];
|
|
1346
|
-
reset?: InjectedFormData<Schema_5, Type_5>["reset"];
|
|
1347
1340
|
};
|
|
1348
1341
|
}>, {}, {}, "invalid" | "reset" | "clear" | "submit" | "errors" | "tag" | "validate" | "formData" | "fields" | "fieldsErrors" | "validateWrapper", import('vue').ComponentProvideOptions, true, {}, any>;
|
|
1349
1342
|
};
|
package/dist/index.es.js
CHANGED
|
@@ -225,18 +225,18 @@ function Ie(r, i, e, c, a) {
|
|
|
225
225
|
const k = () => {
|
|
226
226
|
var O, l;
|
|
227
227
|
return ((l = (O = this.$slots) == null ? void 0 : O.default) == null ? void 0 : l.call(O, {
|
|
228
|
+
errors: E.value,
|
|
229
|
+
formData: f.value,
|
|
230
|
+
invalid: o.value,
|
|
231
|
+
readonly: V.value,
|
|
232
|
+
status: A.value,
|
|
233
|
+
wrappers: a,
|
|
228
234
|
clear: b,
|
|
229
|
-
errors: E,
|
|
230
|
-
formData: f,
|
|
231
235
|
ignoreUpdates: x,
|
|
232
|
-
invalid: o,
|
|
233
|
-
readonly: V,
|
|
234
236
|
reset: m,
|
|
235
|
-
status: A,
|
|
236
237
|
stopUpdatesWatch: g,
|
|
237
238
|
submit: s,
|
|
238
|
-
validate: h
|
|
239
|
-
wrappers: a
|
|
239
|
+
validate: h
|
|
240
240
|
})) ?? this.$slots.default;
|
|
241
241
|
};
|
|
242
242
|
return R(
|
|
@@ -499,8 +499,8 @@ function Ae(r, i, e, c) {
|
|
|
499
499
|
invalid: s.value,
|
|
500
500
|
invalidLabel: m.value,
|
|
501
501
|
modelValue: h.value,
|
|
502
|
-
onUpdate: E,
|
|
503
502
|
readonly: B.value,
|
|
503
|
+
onUpdate: E,
|
|
504
504
|
submit: n == null ? void 0 : n.submit,
|
|
505
505
|
validate: n == null ? void 0 : n.validate
|
|
506
506
|
})) ?? t.default;
|
|
@@ -835,12 +835,12 @@ function $e(r, i) {
|
|
|
835
835
|
});
|
|
836
836
|
const n = () => (a == null ? void 0 : a.validate(void 0, new Set(d.value.values()))) ?? Promise.resolve(!0);
|
|
837
837
|
return {
|
|
838
|
-
clear: a == null ? void 0 : a.clear,
|
|
839
838
|
errors: a == null ? void 0 : a.errors,
|
|
840
839
|
fields: d,
|
|
841
840
|
fieldsErrors: o,
|
|
842
841
|
formData: a == null ? void 0 : a.formData,
|
|
843
842
|
invalid: V,
|
|
843
|
+
clear: a == null ? void 0 : a.clear,
|
|
844
844
|
reset: a == null ? void 0 : a.reset,
|
|
845
845
|
submit: a == null ? void 0 : a.submit,
|
|
846
846
|
validate: a == null ? void 0 : a.validate,
|
|
@@ -851,11 +851,11 @@ function $e(r, i) {
|
|
|
851
851
|
const e = () => {
|
|
852
852
|
var c, a;
|
|
853
853
|
return (a = (c = this.$slots).default) == null ? void 0 : a.call(c, {
|
|
854
|
-
clear: this.clear,
|
|
855
854
|
errors: this.errors,
|
|
856
855
|
fieldsErrors: this.fieldsErrors,
|
|
857
856
|
formData: this.formData,
|
|
858
857
|
invalid: this.invalid,
|
|
858
|
+
clear: this.clear,
|
|
859
859
|
reset: this.reset,
|
|
860
860
|
submit: this.submit,
|
|
861
861
|
validate: this.validate,
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(C,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vueuse/core"),require("zod")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","zod"],e):(C=typeof globalThis<"u"?globalThis:C||self,e(C["@volverjs/form-vue"]={},C.Vue,C.VueUseCore,C.zod))})(this,function(C,e,Q,A){"use strict";var b=(t=>(t.text="text",t.number="number",t.email="email",t.password="password",t.tel="tel",t.url="url",t.search="search",t.date="date",t.time="time",t.datetimeLocal="datetime-local",t.month="month",t.week="week",t.color="color",t.select="select",t.checkbox="checkbox",t.radio="radio",t.textarea="textarea",t.radioGroup="radioGroup",t.checkboxGroup="checkboxGroup",t.combobox="combobox",t.custom="custom",t))(b||{}),B=(t=>(t.invalid="invalid",t.valid="valid",t.submitting="submitting",t.reset="reset",t.updated="updated",t.unknown="unknown",t))(B||{});function W(t,i={}){const r=v=>{let d=v;for(;d instanceof A.ZodEffects;)d=d.innerType();return d instanceof A.ZodOptional&&(d=d._def.innerType),d},m=v=>{let d=v;for(;d instanceof A.ZodEffects;)d=d.innerType();return d instanceof A.ZodOptional},a=r(t);return{...(a instanceof A.ZodObject?a._def.unknownKeys==="passthrough":!1)?i:{},...Object.fromEntries(Object.entries(a.shape).map(([v,d])=>{const f=i[v],g=m(d);let c=r(d),s;if(c instanceof A.ZodDefault&&(s=c._def.defaultValue(),c=c._def.innerType),f===null&&c instanceof A.ZodNullable)return[v,f];if(f==null&&g)return[v,s];if(c instanceof A.ZodSchema){const y=d.safeParse(f);if(y.success)return[v,y.data??s]}if(c instanceof A.ZodArray&&Array.isArray(f)&&f.length){const y=r(c._def.type);if(y instanceof A.ZodObject)return[v,f.map(V=>W(y,V&&typeof V=="object"?V:void 0))]}if(c instanceof A.ZodRecord&&f){const y=r(c._def.valueType);if(y instanceof A.ZodObject)return[v,Object.keys(f).reduce((V,p)=>(V[p]=W(y,f[p]),V),{})]}return c instanceof A.ZodObject?[v,W(c,f&&typeof f=="object"?f:s)]:[v,s]}))}}function D(t,i,r,m,a){const n=e.ref(),v=e.ref(),d=e.computed(()=>v.value===B.invalid),f=e.ref(),g=e.ref(!1);let c;const s=x=>{const O=W(t,x);if(r!=null&&r.class){const u=r.class;return new u(O)}return O},y=async(x=f.value,O)=>{if(c=O,g.value)return!0;const u=await t.safeParseAsync(x);if(!u.success){if(v.value=B.invalid,!O)return n.value=u.error.format(),!1;const I=u.error.issues.filter(U=>O.has(U.path.join(".")));return I.length?(n.value=new A.ZodError(I).format(),!1):(n.value=void 0,!0)}return n.value=void 0,v.value=B.valid,f.value=s(u.data),!0},V=()=>{n.value=void 0,v.value=void 0,c=void 0},p=()=>{f.value=s(),V(),v.value=B.reset},o=async()=>g.value||!await y()?!1:(v.value=B.submitting,!0),{ignoreUpdates:S,stop:w}=Q.watchIgnorable(f,()=>{v.value=B.updated},{deep:!0,eventFilter:Q.throttleFilter((r==null?void 0:r.updateThrottle)??500)}),E=e.readonly(n),R=e.readonly(v),G=e.defineComponent({name:"VvForm",props:{continuousValidation:{type:Boolean,default:!1},modelValue:{type:Object,default:()=>({})},readonly:{type:Boolean,default:(r==null?void 0:r.readonly)??!1},tag:{type:String,default:"form"},template:{type:[Array,Function],default:void 0}},emits:["invalid","submit","update:modelValue","update:readonly","valid","reset"],expose:["errors","invalid","readonly","status","submit","tag","template","valid","validate","clear","reset"],slots:Object,setup(x,{emit:O}){return f.value=s(e.toRaw(x.modelValue)),e.watch(()=>x.modelValue,u=>{if(u){const I=e.isProxy(u)?e.toRaw(u):u;if(JSON.stringify(I)===JSON.stringify(e.toRaw(f.value)))return;f.value=typeof(I==null?void 0:I.clone)=="function"?I.clone():JSON.parse(JSON.stringify(I))}},{deep:!0}),e.watch(v,async u=>{var I,U,L,K,T,H;if(u===B.invalid){const l=e.toRaw(n.value);O("invalid",l),(I=r==null?void 0:r.onInvalid)==null||I.call(r,l);return}if(u===B.valid){const l=e.toRaw(f.value);O("valid",l),(U=r==null?void 0:r.onValid)==null||U.call(r,l),O("update:modelValue",l),(L=r==null?void 0:r.onUpdate)==null||L.call(r,l);return}if(u===B.submitting){const l=e.toRaw(f.value);O("submit",l),(K=r==null?void 0:r.onSubmit)==null||K.call(r,l);return}if(u===B.reset){const l=e.toRaw(f.value);O("reset",l),(T=r==null?void 0:r.onReset)==null||T.call(r,l);return}if(u===B.updated){if((n.value||r!=null&&r.continuousValidation||x.continuousValidation)&&await y(void 0,c),!f.value||!x.modelValue||JSON.stringify(f.value)!==JSON.stringify(x.modelValue)){const l=e.toRaw(f.value);O("update:modelValue",l),(H=r==null?void 0:r.onUpdate)==null||H.call(r,l)}v.value===B.updated&&(v.value=B.unknown)}}),e.onMounted(()=>{g.value=x.readonly}),e.watch(()=>x.readonly,u=>{g.value=u}),e.watch(g,u=>{u!==x.readonly&&O("update:readonly",g.value)}),e.provide(i,{clear:V,errors:E,formData:f,ignoreUpdates:S,invalid:d,readonly:g,reset:p,status:R,stopUpdatesWatch:w,submit:o,validate:y,wrappers:a}),{clear:V,errors:E,formData:f,ignoreUpdates:S,invalid:d,isReadonly:g,reset:p,status:R,stopUpdatesWatch:w,submit:o,validate:y,wrappers:a}},render(){const x=()=>{var O,u;return((u=(O=this.$slots)==null?void 0:O.default)==null?void 0:u.call(O,{clear:V,errors:E,formData:f,ignoreUpdates:S,invalid:d,readonly:g,reset:p,status:R,stopUpdatesWatch:w,submit:o,validate:y,wrappers:a}))??this.$slots.default};return e.h(this.tag,{onSubmit:e.withModifiers(this.submit,["prevent"]),onReset:e.withModifiers(this.reset,["prevent"])},(this.template??(r==null?void 0:r.template))&&m?[e.h(m,{schema:this.template??(r==null?void 0:r.template)},{default:x})]:{default:x})}});return{clear:V,errors:n,formData:f,ignoreUpdates:S,invalid:d,readonly:g,reset:p,status:v,wrappers:a,stopUpdatesWatch:w,submit:o,validate:y,VvForm:G}}function q(t){return Array.isArray(t)}function F(t){return typeof t<"u"}function X(t){return t===null}function Y(t){return typeof t=="object"}function z(t){return typeof t=="string"}function M(t){return typeof t>"u"}const ee=/^[0-9]+$/,re=["__proto__","prototype","constructor"];function $(t,i,r){const m=F(r)?r:void 0;if(!Y(t)||!z(i))return m;const a=j(i);if(a.length!==0){for(const n of a){if(n==="*")continue;const v=function(d){return d.map(f=>M(f)||X(f)?f:q(f)?v(f):f[n])};if(q(t)&&!ee.test(n)?t=v(t):t=t[n],M(t)||X(t))break}return M(t)?m:t}}function J(t,i,r){if(!Y(t)||!z(i))return;const m=j(i);if(m.length===0)return;const a=m.length;for(let n=0;n<a;n++){const v=m[n];if(n===a-1){t[v]=r;return}if(v==="*"&&q(t)){const d=m.slice(n+1).join(".");for(const f of t)J(f,d,r);return}M(t[v])&&(t[v]={}),t=t[v]}}function j(t){const i=t.split(/[.]|(?:\[(\d|\*)\])/).filter(r=>!!r);return i.some(r=>re.indexOf(r)!==-1)?[]:i}function te(t,i,r,m){return e.defineComponent({name:"VvFormField",props:{type:{type:String,validator:a=>Object.values(b).includes(a),default:b.custom},is:{type:[Object,String],default:void 0},name:{type:[String,Number,Boolean,Symbol],required:!0},props:{type:[Object,Function],default:()=>({})},showValid:{type:Boolean,default:!1},defaultValue:{type:[String,Number,Boolean,Array,Object],default:void 0},lazyLoad:{type:Boolean,default:!1},readonly:{type:Boolean,default:void 0}},emits:["invalid","update:formData","update:modelValue","valid"],expose:["component","errors","hasProps","invalid","invalidLabel","is","type"],slots:Object,setup(a,{slots:n,emit:v}){const{props:d,name:f}=e.toRefs(a),g=e.useId(),c=e.inject(i,void 0);c&&c.fields.value.set(g,a.name);const s=e.inject(t),y=e.computed({get(){if(s!=null&&s.formData)return $(new Object(s.formData.value),String(a.name))},set(u){s!=null&&s.formData&&(J(new Object(s.formData.value),String(a.name),u),v("update:modelValue",{newValue:y.value,formData:s==null?void 0:s.formData}))}});e.onMounted(()=>{y.value===void 0&&a.defaultValue!==void 0&&(y.value=a.defaultValue)}),e.onBeforeUnmount(()=>{c&&c.fields.value.delete(g)});const V=e.computed(()=>{if(s!=null&&s.errors.value)return $(s.errors.value,String(a.name))}),p=e.computed(()=>{var u;return(u=V.value)==null?void 0:u._errors}),o=e.computed(()=>V.value!==void 0),S=e.watch(o,()=>{if(o.value){v("invalid",V.value),c&&c.errors.value.set(String(a.name),V.value);return}v("valid",y.value),c&&c.errors.value.delete(a.name)}),w=e.watch(()=>s==null?void 0:s.formData,()=>{v("update:formData",s==null?void 0:s.formData)},{deep:!0});e.onBeforeUnmount(()=>{S(),w()});const E=u=>{u instanceof InputEvent&&(u=u.target.value),y.value=u},R=e.computed(()=>{let u=d.value;return typeof u=="function"&&(u=u(s==null?void 0:s.formData)),Object.keys(u).reduce((I,U)=>(I[U]=e.unref(u[U]),I),{})}),G=e.computed(()=>s!=null&&s.readonly.value?!0:R.value.readonly??a.readonly),x=e.computed(()=>({...R.value,name:R.value.name??a.name,invalid:o.value,valid:a.showValid?!!(!o.value&&y.value):void 0,type:(u=>{if([b.color,b.date,b.datetimeLocal,b.email,b.month,b.number,b.password,b.search,b.tel,b.text,b.time,b.url,b.week].includes(u))return u})(a.type),invalidLabel:p.value,modelValue:y.value,readonly:G.value,"onUpdate:modelValue":E}));return e.provide(r,{name:e.readonly(f),errors:e.readonly(V)}),{component:e.computed(()=>{if(a.type===b.custom)return{render(){var u;return((u=n.default)==null?void 0:u.call(n,{errors:V.value,formData:s==null?void 0:s.formData.value,formErrors:s==null?void 0:s.errors.value,invalid:o.value,invalidLabel:p.value,modelValue:y.value,onUpdate:E,readonly:G.value,submit:s==null?void 0:s.submit,validate:s==null?void 0:s.validate}))??n.default}};if(!((m==null?void 0:m.lazyLoad)??a.lazyLoad)){let u;switch(a.type){case b.select:u=e.resolveComponent("VvSelect");break;case b.checkbox:u=e.resolveComponent("VvCheckbox");break;case b.radio:u=e.resolveComponent("VvRadio");break;case b.textarea:u=e.resolveComponent("VvTextarea");break;case b.radioGroup:u=e.resolveComponent("VvRadioGroup");break;case b.checkboxGroup:u=e.resolveComponent("VvCheckboxGroup");break;case b.combobox:u=e.resolveComponent("VvCombobox");break;default:u=e.resolveComponent("VvInputText")}if(typeof u!="string")return u;console.warn(`[@volverjs/form-vue]: ${u} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`)}return e.defineAsyncComponent(async()=>{switch(m!=null&&m.sideEffects&&await Promise.resolve(m.sideEffects(a.type)),a.type){case b.textarea:return import("@volverjs/ui-vue/vv-textarea");case b.radio:return import("@volverjs/ui-vue/vv-radio");case b.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case b.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case b.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case b.select:return import("@volverjs/ui-vue/vv-select");case b.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:x,invalid:o}},render(){return this.is?e.h(this.is,this.hasProps,this.$slots):this.type===b.custom?e.h(this.component,null,this.$slots):e.h(this.component,this.hasProps,this.$slots)}})}function ne(t,i,r){return e.defineComponent({name:"VvFormFieldsGroup",props:{is:{type:[Object,String],default:void 0},names:{type:[Array,Object],required:!0},props:{type:[Object,Function],default:()=>({})},showValid:{type:Boolean,default:!1},defaultValues:{type:[Object],default:void 0},readonly:{type:Boolean,default:void 0}},emits:["invalid","update:formData","update:modelValue","valid"],expose:["component","errors","hasProps","invalid","invalidLabels","is"],slots:Object,setup(m,{slots:a,emit:n}){const{props:v,names:d,defaultValues:f}=e.toRefs(m),g=e.useId(),c=e.computed(()=>Array.isArray(d.value)?d.value:Object.values(d.value)),s=e.computed(()=>Array.isArray(d.value)?d.value:Object.keys(d.value)),y=e.computed(()=>Array.isArray(d.value)?d.value.reduce((l,h)=>(l[String(h)]=h,l),{}):d.value),V=e.computed(()=>Object.keys(y.value).reduce((l,h)=>(l[String(y.value[h])]=h,l),{})),p=e.inject(i,void 0);p&&c.value.forEach(l=>{p.fields.value.set(`${g}-${l}`,l)});const o=e.inject(t),S=e.computed({get(){return o!=null&&o.formData?s.value.reduce((l,h)=>(l[h]=$(new Object(o.formData.value),y.value[h]),l),{}):{}},set(l){o!=null&&o.formData&&(s.value.forEach(h=>{J(new Object(o.formData.value),y.value[h],l==null?void 0:l[h])}),n("update:modelValue",{newValue:S.value,formData:o==null?void 0:o.formData}))}});e.onMounted(()=>{f.value&&c.value.forEach(l=>{var h,k;((h=f.value)==null?void 0:h[l])!==void 0&&S.value[l]===void 0&&(S.value={...S.value,[l]:(k=f.value)==null?void 0:k[l]})})}),e.onBeforeUnmount(()=>{p&&c.value.forEach(l=>{p.fields.value.delete(`${g}-${l}`)})});const w=e.computed(()=>{if(!(o!=null&&o.errors.value))return;const l=c.value.reduce((h,k)=>{if(!o.errors.value)return h;const Z=$(o.errors.value,String(k));return Z===void 0||(h[String(k)]=Z),h},{});if(Object.keys(l).length!==0)return l}),E=e.computed(()=>{if(!w.value)return;const l=Object.keys(w.value).reduce((h,k)=>{var Z;return(Z=w.value)!=null&&Z[k]&&(h[V.value[k]]=w.value[k]._errors),h},{});if(Object.keys(l).length!==0)return l}),R=e.computed(()=>w.value!==void 0),G=e.computed(()=>s.value.reduce((l,h)=>{var k;return l[h]=!!((k=w.value)!=null&&k[V.value[h]]),l},{})),x=e.watch(R,()=>{if(R.value){n("invalid",w.value),p&&c.value.forEach(l=>{var h,k;if(!((h=w.value)!=null&&h[l])){p.errors.value.delete(l);return}p.errors.value.set(l,(k=w.value)==null?void 0:k[l])});return}n("valid",S.value),p&&c.value.forEach(l=>{p.errors.value.delete(l)})}),O=e.watch(()=>o==null?void 0:o.formData,()=>{n("update:formData",o==null?void 0:o.formData)},{deep:!0});e.onBeforeUnmount(()=>{x(),O()});const u=l=>{S.value=l},I=(l,h)=>{h instanceof InputEvent&&(h=h.target.value),s.value.includes(l)&&(S.value={...S.value,[l]:h})},U=e.computed(()=>{let l=v.value;return typeof l=="function"&&(l=l(o==null?void 0:o.formData)),Object.keys(l).reduce((h,k)=>(h[k]=e.unref(l[k]),h),{})}),L=e.computed(()=>o!=null&&o.readonly.value?!0:U.value.readonly??m.readonly),K=e.computed(()=>s.value.reduce((l,h)=>(l[`onUpdate:${h}`]=k=>{I(h,k)},l),{"onUpdate:modelValue":u})),T=e.computed(()=>({...K.value,...U.value,names:U.value.name??c.value,invalid:R.value,invalids:G.value,valid:m.showValid?!!(!R.value&&S.value):void 0,invalidLabels:E.value,modelValue:S.value,readonly:L.value}));return e.provide(r,{names:e.readonly(d),errors:e.readonly(w)}),{component:e.computed(()=>({render(){var l;return((l=a.default)==null?void 0:l.call(a,{errors:w.value,formData:o==null?void 0:o.formData.value,formErrors:o==null?void 0:o.errors.value,invalid:R.value,invalids:G.value,invalidLabels:E.value,modelValue:S.value,onUpdate:u,onUpdateField:I,readonly:L.value,submit:o==null?void 0:o.submit,validate:o==null?void 0:o.validate}))??a.default}})),hasProps:T,invalid:R}},render(){return this.is?e.h(this.is,this.hasProps,this.$slots):e.h(this.component,null,this.$slots)}})}function ae(t,i){return e.defineComponent({name:"VvFormWrapper",props:{name:{type:String,required:!0},tag:{type:String,default:void 0}},emits:["invalid","valid"],expose:["clear","errors","fields","fieldsErrors","formData","invalid","reset","submit","tag","validate","validateWrapper"],slots:Object,setup(r,{emit:m}){const a=e.inject(t),n=e.inject(i,void 0),v=e.ref(new Map),d=e.ref(new Map),{name:f}=e.toRefs(r),g=e.computed(()=>a!=null&&a.invalid.value?d.value.size>0:!1);e.watch(g,()=>{g.value?m("invalid"):m("valid")});const c={name:e.readonly(f),errors:d,invalid:e.readonly(g),fields:v};e.provide(i,c),e.watch(v,(y,V)=>{n!=null&&n.fields&&V.entries().forEach(([p])=>{y.has(p)||n==null||n.fields.value.delete(p)}),n!=null&&n.fields&&y.entries().forEach(([p,o])=>{n!=null&&n.fields.value.has(p)||n==null||n.fields.value.set(p,o)})},{deep:!0}),e.watch(d,(y,V)=>{n!=null&&n.errors&&(Array.from(V.keys()).forEach(p=>{n.errors.value.delete(p)}),Array.from(y.keys()).forEach(p=>{const o=y.get(p);o&&n.errors.value.set(p,o)}))},{deep:!0}),e.onMounted(()=>{if(!(a!=null&&a.wrappers)||!f.value){console.warn("[@volverjs/form-vue]: Invalid wrapper registration state");return}if(a.wrappers.has(f.value)){console.warn(`[@volverjs/form-vue]: wrapper name "${f.value}" is already used`);return}a.wrappers.set(f.value,c)}),e.onBeforeUnmount(()=>{a!=null&&a.wrappers&&f.value&&a.wrappers.delete(f.value)});const s=()=>(a==null?void 0:a.validate(void 0,new Set(v.value.values())))??Promise.resolve(!0);return{clear:a==null?void 0:a.clear,errors:a==null?void 0:a.errors,fields:v,fieldsErrors:d,formData:a==null?void 0:a.formData,invalid:g,reset:a==null?void 0:a.reset,submit:a==null?void 0:a.submit,validate:a==null?void 0:a.validate,validateWrapper:s}},render(){const r=()=>{var m,a;return(a=(m=this.$slots).default)==null?void 0:a.call(m,{clear:this.clear,errors:this.errors,fieldsErrors:this.fieldsErrors,formData:this.formData,invalid:this.invalid,reset:this.reset,submit:this.submit,validate:this.validate,validateWrapper:this.validateWrapper})};return this.tag?e.h(this.tag,null,{default:r}):r()}})}function le(t,i){const r=e.defineComponent({name:"VvFormTemplate",props:{schema:{type:[Array,Function],required:!0},scope:{type:Object,default:()=>({})}},slots:Object,setup(m,{slots:a}){const n=e.inject(t);if(n!=null&&n.formData)return()=>{var g;const v=typeof m.schema=="function"?m.schema(n,m.scope):m.schema;let d;const f=v.reduce((c,s)=>{const y=typeof s=="function"?s(n,m.scope):s,{vvIs:V,vvName:p,vvSlots:o,vvChildren:S,vvIf:w,vvElseIf:E,vvType:R,vvDefaultValue:G,vvShowValid:x,vvContent:O,...u}=y;if(w!==void 0){if(typeof w=="string"?d=!!$(new Object(n.formData.value),w):typeof w=="function"?d=e.unref(w(n)):d=e.unref(w),!d)return c}else if(E!==void 0&&d!==void 0){if(d||(typeof E=="string"?d=!!$(new Object(n.formData.value),E):typeof E=="function"?d=e.unref(E(n)):d=e.unref(E),!d))return c}else d=void 0;let I;return S&&(typeof V=="string"?I=e.h(r,{schema:S}):I={default:U=>e.h(r,{schema:S,scope:U})}),p?(c.push(e.h(i,{name:p,is:V,type:R,defaultValue:G,showValid:x,props:u},o??I??O)),c):V?(c.push(e.h(V,u,o??I??O)),c):(I&&("default"in I?c.push(I.default(m.scope)):c.push(I)),c)},[]);return f.push((g=a==null?void 0:a.default)==null?void 0:g.call(a,{errors:n==null?void 0:n.errors.value,formData:n==null?void 0:n.formData.value,invalid:n==null?void 0:n.invalid.value,status:n==null?void 0:n.status.value,submit:n==null?void 0:n.submit,validate:n==null?void 0:n.validate,clear:n==null?void 0:n.clear,reset:n==null?void 0:n.reset})),f}}});return r}function N(t,i={}){const r=Symbol("formInjectionKey"),m=Symbol("formWrapperInjectionKey"),a=Symbol("formFieldInjectionKey"),n=Symbol("formFieldsGroupInjectionKey"),v=ae(r,m),d=te(r,m,a,i),f=ne(r,m,n),g=le(r,d),c=new Map,{clear:s,errors:y,formData:V,ignoreUpdates:p,invalid:o,readonly:S,reset:w,status:E,stopUpdatesWatch:R,submit:G,validate:x,VvForm:O}=D(t,r,i,g,c);return{clear:s,errors:y,formData:V,formFieldInjectionKey:a,formInjectionKey:r,formWrapperInjectionKey:m,ignoreUpdates:p,invalid:o,readonly:S,reset:w,status:E,stopUpdatesWatch:R,submit:G,validate:x,wrappers:c,VvForm:O,VvFormField:d,VvFormFieldsGroup:f,VvFormTemplate:g,VvFormWrapper:v}}const P=Symbol("pluginInjectionKey");function ue(t){let i={};return t.schema&&(i=N(t.schema,t)),{...i,install(r,{global:m=!1}={}){r.provide(P,t),m&&(r.config.globalProperties.$vvForm=t,i!=null&&i.VvForm&&r.component("VvForm",i.VvForm),i!=null&&i.VvFormWrapper&&r.component("VvFormWrapper",i.VvFormWrapper),i!=null&&i.VvFormField&&r.component("VvFormField",i.VvFormField),i!=null&&i.VvFormFieldsGroup&&r.component("VvFormFieldsGroup",i.VvFormFieldsGroup),i!=null&&i.VvFormTemplate&&r.component("VvFormTemplate",i.VvFormTemplate))}}}const _=new Map;function se(t,i={}){if(i.scope&&_.has(i.scope))return _.get(i.scope);if(!e.getCurrentInstance()){const m=N(t,i);return i.scope&&_.set(i.scope,m),m}const r=N(t,{...e.inject(P,{}),...i});return i.scope&&_.set(i.scope,r),r}function oe(t,i={}){return N(t,i)}C.FormFieldType=b,C.createForm=ue,C.defaultObjectBySchema=W,C.formType=oe,C.pluginInjectionKey=P,C.useForm=se,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(C,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vueuse/core"),require("zod")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core","zod"],e):(C=typeof globalThis<"u"?globalThis:C||self,e(C["@volverjs/form-vue"]={},C.Vue,C.VueUseCore,C.zod))})(this,function(C,e,Q,A){"use strict";var b=(t=>(t.text="text",t.number="number",t.email="email",t.password="password",t.tel="tel",t.url="url",t.search="search",t.date="date",t.time="time",t.datetimeLocal="datetime-local",t.month="month",t.week="week",t.color="color",t.select="select",t.checkbox="checkbox",t.radio="radio",t.textarea="textarea",t.radioGroup="radioGroup",t.checkboxGroup="checkboxGroup",t.combobox="combobox",t.custom="custom",t))(b||{}),B=(t=>(t.invalid="invalid",t.valid="valid",t.submitting="submitting",t.reset="reset",t.updated="updated",t.unknown="unknown",t))(B||{});function W(t,i={}){const r=v=>{let d=v;for(;d instanceof A.ZodEffects;)d=d.innerType();return d instanceof A.ZodOptional&&(d=d._def.innerType),d},m=v=>{let d=v;for(;d instanceof A.ZodEffects;)d=d.innerType();return d instanceof A.ZodOptional},n=r(t);return{...(n instanceof A.ZodObject?n._def.unknownKeys==="passthrough":!1)?i:{},...Object.fromEntries(Object.entries(n.shape).map(([v,d])=>{const f=i[v],g=m(d);let c=r(d),s;if(c instanceof A.ZodDefault&&(s=c._def.defaultValue(),c=c._def.innerType),f===null&&c instanceof A.ZodNullable)return[v,f];if(f==null&&g)return[v,s];if(c instanceof A.ZodSchema){const y=d.safeParse(f);if(y.success)return[v,y.data??s]}if(c instanceof A.ZodArray&&Array.isArray(f)&&f.length){const y=r(c._def.type);if(y instanceof A.ZodObject)return[v,f.map(V=>W(y,V&&typeof V=="object"?V:void 0))]}if(c instanceof A.ZodRecord&&f){const y=r(c._def.valueType);if(y instanceof A.ZodObject)return[v,Object.keys(f).reduce((V,p)=>(V[p]=W(y,f[p]),V),{})]}return c instanceof A.ZodObject?[v,W(c,f&&typeof f=="object"?f:s)]:[v,s]}))}}function D(t,i,r,m,n){const a=e.ref(),v=e.ref(),d=e.computed(()=>v.value===B.invalid),f=e.ref(),g=e.ref(!1);let c;const s=x=>{const O=W(t,x);if(r!=null&&r.class){const u=r.class;return new u(O)}return O},y=async(x=f.value,O)=>{if(c=O,g.value)return!0;const u=await t.safeParseAsync(x);if(!u.success){if(v.value=B.invalid,!O)return a.value=u.error.format(),!1;const I=u.error.issues.filter(U=>O.has(U.path.join(".")));return I.length?(a.value=new A.ZodError(I).format(),!1):(a.value=void 0,!0)}return a.value=void 0,v.value=B.valid,f.value=s(u.data),!0},V=()=>{a.value=void 0,v.value=void 0,c=void 0},p=()=>{f.value=s(),V(),v.value=B.reset},o=async()=>g.value||!await y()?!1:(v.value=B.submitting,!0),{ignoreUpdates:S,stop:w}=Q.watchIgnorable(f,()=>{v.value=B.updated},{deep:!0,eventFilter:Q.throttleFilter((r==null?void 0:r.updateThrottle)??500)}),E=e.readonly(a),R=e.readonly(v),G=e.defineComponent({name:"VvForm",props:{continuousValidation:{type:Boolean,default:!1},modelValue:{type:Object,default:()=>({})},readonly:{type:Boolean,default:(r==null?void 0:r.readonly)??!1},tag:{type:String,default:"form"},template:{type:[Array,Function],default:void 0}},emits:["invalid","submit","update:modelValue","update:readonly","valid","reset"],expose:["errors","invalid","readonly","status","submit","tag","template","valid","validate","clear","reset"],slots:Object,setup(x,{emit:O}){return f.value=s(e.toRaw(x.modelValue)),e.watch(()=>x.modelValue,u=>{if(u){const I=e.isProxy(u)?e.toRaw(u):u;if(JSON.stringify(I)===JSON.stringify(e.toRaw(f.value)))return;f.value=typeof(I==null?void 0:I.clone)=="function"?I.clone():JSON.parse(JSON.stringify(I))}},{deep:!0}),e.watch(v,async u=>{var I,U,L,K,T,H;if(u===B.invalid){const l=e.toRaw(a.value);O("invalid",l),(I=r==null?void 0:r.onInvalid)==null||I.call(r,l);return}if(u===B.valid){const l=e.toRaw(f.value);O("valid",l),(U=r==null?void 0:r.onValid)==null||U.call(r,l),O("update:modelValue",l),(L=r==null?void 0:r.onUpdate)==null||L.call(r,l);return}if(u===B.submitting){const l=e.toRaw(f.value);O("submit",l),(K=r==null?void 0:r.onSubmit)==null||K.call(r,l);return}if(u===B.reset){const l=e.toRaw(f.value);O("reset",l),(T=r==null?void 0:r.onReset)==null||T.call(r,l);return}if(u===B.updated){if((a.value||r!=null&&r.continuousValidation||x.continuousValidation)&&await y(void 0,c),!f.value||!x.modelValue||JSON.stringify(f.value)!==JSON.stringify(x.modelValue)){const l=e.toRaw(f.value);O("update:modelValue",l),(H=r==null?void 0:r.onUpdate)==null||H.call(r,l)}v.value===B.updated&&(v.value=B.unknown)}}),e.onMounted(()=>{g.value=x.readonly}),e.watch(()=>x.readonly,u=>{g.value=u}),e.watch(g,u=>{u!==x.readonly&&O("update:readonly",g.value)}),e.provide(i,{clear:V,errors:E,formData:f,ignoreUpdates:S,invalid:d,readonly:g,reset:p,status:R,stopUpdatesWatch:w,submit:o,validate:y,wrappers:n}),{clear:V,errors:E,formData:f,ignoreUpdates:S,invalid:d,isReadonly:g,reset:p,status:R,stopUpdatesWatch:w,submit:o,validate:y,wrappers:n}},render(){const x=()=>{var O,u;return((u=(O=this.$slots)==null?void 0:O.default)==null?void 0:u.call(O,{errors:E.value,formData:f.value,invalid:d.value,readonly:g.value,status:R.value,wrappers:n,clear:V,ignoreUpdates:S,reset:p,stopUpdatesWatch:w,submit:o,validate:y}))??this.$slots.default};return e.h(this.tag,{onSubmit:e.withModifiers(this.submit,["prevent"]),onReset:e.withModifiers(this.reset,["prevent"])},(this.template??(r==null?void 0:r.template))&&m?[e.h(m,{schema:this.template??(r==null?void 0:r.template)},{default:x})]:{default:x})}});return{clear:V,errors:a,formData:f,ignoreUpdates:S,invalid:d,readonly:g,reset:p,status:v,wrappers:n,stopUpdatesWatch:w,submit:o,validate:y,VvForm:G}}function q(t){return Array.isArray(t)}function F(t){return typeof t<"u"}function X(t){return t===null}function Y(t){return typeof t=="object"}function z(t){return typeof t=="string"}function M(t){return typeof t>"u"}const ee=/^[0-9]+$/,re=["__proto__","prototype","constructor"];function $(t,i,r){const m=F(r)?r:void 0;if(!Y(t)||!z(i))return m;const n=j(i);if(n.length!==0){for(const a of n){if(a==="*")continue;const v=function(d){return d.map(f=>M(f)||X(f)?f:q(f)?v(f):f[a])};if(q(t)&&!ee.test(a)?t=v(t):t=t[a],M(t)||X(t))break}return M(t)?m:t}}function J(t,i,r){if(!Y(t)||!z(i))return;const m=j(i);if(m.length===0)return;const n=m.length;for(let a=0;a<n;a++){const v=m[a];if(a===n-1){t[v]=r;return}if(v==="*"&&q(t)){const d=m.slice(a+1).join(".");for(const f of t)J(f,d,r);return}M(t[v])&&(t[v]={}),t=t[v]}}function j(t){const i=t.split(/[.]|(?:\[(\d|\*)\])/).filter(r=>!!r);return i.some(r=>re.indexOf(r)!==-1)?[]:i}function te(t,i,r,m){return e.defineComponent({name:"VvFormField",props:{type:{type:String,validator:n=>Object.values(b).includes(n),default:b.custom},is:{type:[Object,String],default:void 0},name:{type:[String,Number,Boolean,Symbol],required:!0},props:{type:[Object,Function],default:()=>({})},showValid:{type:Boolean,default:!1},defaultValue:{type:[String,Number,Boolean,Array,Object],default:void 0},lazyLoad:{type:Boolean,default:!1},readonly:{type:Boolean,default:void 0}},emits:["invalid","update:formData","update:modelValue","valid"],expose:["component","errors","hasProps","invalid","invalidLabel","is","type"],slots:Object,setup(n,{slots:a,emit:v}){const{props:d,name:f}=e.toRefs(n),g=e.useId(),c=e.inject(i,void 0);c&&c.fields.value.set(g,n.name);const s=e.inject(t),y=e.computed({get(){if(s!=null&&s.formData)return $(new Object(s.formData.value),String(n.name))},set(u){s!=null&&s.formData&&(J(new Object(s.formData.value),String(n.name),u),v("update:modelValue",{newValue:y.value,formData:s==null?void 0:s.formData}))}});e.onMounted(()=>{y.value===void 0&&n.defaultValue!==void 0&&(y.value=n.defaultValue)}),e.onBeforeUnmount(()=>{c&&c.fields.value.delete(g)});const V=e.computed(()=>{if(s!=null&&s.errors.value)return $(s.errors.value,String(n.name))}),p=e.computed(()=>{var u;return(u=V.value)==null?void 0:u._errors}),o=e.computed(()=>V.value!==void 0),S=e.watch(o,()=>{if(o.value){v("invalid",V.value),c&&c.errors.value.set(String(n.name),V.value);return}v("valid",y.value),c&&c.errors.value.delete(n.name)}),w=e.watch(()=>s==null?void 0:s.formData,()=>{v("update:formData",s==null?void 0:s.formData)},{deep:!0});e.onBeforeUnmount(()=>{S(),w()});const E=u=>{u instanceof InputEvent&&(u=u.target.value),y.value=u},R=e.computed(()=>{let u=d.value;return typeof u=="function"&&(u=u(s==null?void 0:s.formData)),Object.keys(u).reduce((I,U)=>(I[U]=e.unref(u[U]),I),{})}),G=e.computed(()=>s!=null&&s.readonly.value?!0:R.value.readonly??n.readonly),x=e.computed(()=>({...R.value,name:R.value.name??n.name,invalid:o.value,valid:n.showValid?!!(!o.value&&y.value):void 0,type:(u=>{if([b.color,b.date,b.datetimeLocal,b.email,b.month,b.number,b.password,b.search,b.tel,b.text,b.time,b.url,b.week].includes(u))return u})(n.type),invalidLabel:p.value,modelValue:y.value,readonly:G.value,"onUpdate:modelValue":E}));return e.provide(r,{name:e.readonly(f),errors:e.readonly(V)}),{component:e.computed(()=>{if(n.type===b.custom)return{render(){var u;return((u=a.default)==null?void 0:u.call(a,{errors:V.value,formData:s==null?void 0:s.formData.value,formErrors:s==null?void 0:s.errors.value,invalid:o.value,invalidLabel:p.value,modelValue:y.value,readonly:G.value,onUpdate:E,submit:s==null?void 0:s.submit,validate:s==null?void 0:s.validate}))??a.default}};if(!((m==null?void 0:m.lazyLoad)??n.lazyLoad)){let u;switch(n.type){case b.select:u=e.resolveComponent("VvSelect");break;case b.checkbox:u=e.resolveComponent("VvCheckbox");break;case b.radio:u=e.resolveComponent("VvRadio");break;case b.textarea:u=e.resolveComponent("VvTextarea");break;case b.radioGroup:u=e.resolveComponent("VvRadioGroup");break;case b.checkboxGroup:u=e.resolveComponent("VvCheckboxGroup");break;case b.combobox:u=e.resolveComponent("VvCombobox");break;default:u=e.resolveComponent("VvInputText")}if(typeof u!="string")return u;console.warn(`[@volverjs/form-vue]: ${u} not found, the component will be loaded asynchronously. To avoid this warning, please set "lazyLoad" option.`)}return e.defineAsyncComponent(async()=>{switch(m!=null&&m.sideEffects&&await Promise.resolve(m.sideEffects(n.type)),n.type){case b.textarea:return import("@volverjs/ui-vue/vv-textarea");case b.radio:return import("@volverjs/ui-vue/vv-radio");case b.radioGroup:return import("@volverjs/ui-vue/vv-radio-group");case b.checkbox:return import("@volverjs/ui-vue/vv-checkbox");case b.checkboxGroup:return import("@volverjs/ui-vue/vv-checkbox-group");case b.select:return import("@volverjs/ui-vue/vv-select");case b.combobox:return import("@volverjs/ui-vue/vv-combobox")}return import("@volverjs/ui-vue/vv-input-text")})}),hasProps:x,invalid:o}},render(){return this.is?e.h(this.is,this.hasProps,this.$slots):this.type===b.custom?e.h(this.component,null,this.$slots):e.h(this.component,this.hasProps,this.$slots)}})}function ae(t,i,r){return e.defineComponent({name:"VvFormFieldsGroup",props:{is:{type:[Object,String],default:void 0},names:{type:[Array,Object],required:!0},props:{type:[Object,Function],default:()=>({})},showValid:{type:Boolean,default:!1},defaultValues:{type:[Object],default:void 0},readonly:{type:Boolean,default:void 0}},emits:["invalid","update:formData","update:modelValue","valid"],expose:["component","errors","hasProps","invalid","invalidLabels","is"],slots:Object,setup(m,{slots:n,emit:a}){const{props:v,names:d,defaultValues:f}=e.toRefs(m),g=e.useId(),c=e.computed(()=>Array.isArray(d.value)?d.value:Object.values(d.value)),s=e.computed(()=>Array.isArray(d.value)?d.value:Object.keys(d.value)),y=e.computed(()=>Array.isArray(d.value)?d.value.reduce((l,h)=>(l[String(h)]=h,l),{}):d.value),V=e.computed(()=>Object.keys(y.value).reduce((l,h)=>(l[String(y.value[h])]=h,l),{})),p=e.inject(i,void 0);p&&c.value.forEach(l=>{p.fields.value.set(`${g}-${l}`,l)});const o=e.inject(t),S=e.computed({get(){return o!=null&&o.formData?s.value.reduce((l,h)=>(l[h]=$(new Object(o.formData.value),y.value[h]),l),{}):{}},set(l){o!=null&&o.formData&&(s.value.forEach(h=>{J(new Object(o.formData.value),y.value[h],l==null?void 0:l[h])}),a("update:modelValue",{newValue:S.value,formData:o==null?void 0:o.formData}))}});e.onMounted(()=>{f.value&&c.value.forEach(l=>{var h,k;((h=f.value)==null?void 0:h[l])!==void 0&&S.value[l]===void 0&&(S.value={...S.value,[l]:(k=f.value)==null?void 0:k[l]})})}),e.onBeforeUnmount(()=>{p&&c.value.forEach(l=>{p.fields.value.delete(`${g}-${l}`)})});const w=e.computed(()=>{if(!(o!=null&&o.errors.value))return;const l=c.value.reduce((h,k)=>{if(!o.errors.value)return h;const Z=$(o.errors.value,String(k));return Z===void 0||(h[String(k)]=Z),h},{});if(Object.keys(l).length!==0)return l}),E=e.computed(()=>{if(!w.value)return;const l=Object.keys(w.value).reduce((h,k)=>{var Z;return(Z=w.value)!=null&&Z[k]&&(h[V.value[k]]=w.value[k]._errors),h},{});if(Object.keys(l).length!==0)return l}),R=e.computed(()=>w.value!==void 0),G=e.computed(()=>s.value.reduce((l,h)=>{var k;return l[h]=!!((k=w.value)!=null&&k[V.value[h]]),l},{})),x=e.watch(R,()=>{if(R.value){a("invalid",w.value),p&&c.value.forEach(l=>{var h,k;if(!((h=w.value)!=null&&h[l])){p.errors.value.delete(l);return}p.errors.value.set(l,(k=w.value)==null?void 0:k[l])});return}a("valid",S.value),p&&c.value.forEach(l=>{p.errors.value.delete(l)})}),O=e.watch(()=>o==null?void 0:o.formData,()=>{a("update:formData",o==null?void 0:o.formData)},{deep:!0});e.onBeforeUnmount(()=>{x(),O()});const u=l=>{S.value=l},I=(l,h)=>{h instanceof InputEvent&&(h=h.target.value),s.value.includes(l)&&(S.value={...S.value,[l]:h})},U=e.computed(()=>{let l=v.value;return typeof l=="function"&&(l=l(o==null?void 0:o.formData)),Object.keys(l).reduce((h,k)=>(h[k]=e.unref(l[k]),h),{})}),L=e.computed(()=>o!=null&&o.readonly.value?!0:U.value.readonly??m.readonly),K=e.computed(()=>s.value.reduce((l,h)=>(l[`onUpdate:${h}`]=k=>{I(h,k)},l),{"onUpdate:modelValue":u})),T=e.computed(()=>({...K.value,...U.value,names:U.value.name??c.value,invalid:R.value,invalids:G.value,valid:m.showValid?!!(!R.value&&S.value):void 0,invalidLabels:E.value,modelValue:S.value,readonly:L.value}));return e.provide(r,{names:e.readonly(d),errors:e.readonly(w)}),{component:e.computed(()=>({render(){var l;return((l=n.default)==null?void 0:l.call(n,{errors:w.value,formData:o==null?void 0:o.formData.value,formErrors:o==null?void 0:o.errors.value,invalid:R.value,invalids:G.value,invalidLabels:E.value,modelValue:S.value,onUpdate:u,onUpdateField:I,readonly:L.value,submit:o==null?void 0:o.submit,validate:o==null?void 0:o.validate}))??n.default}})),hasProps:T,invalid:R}},render(){return this.is?e.h(this.is,this.hasProps,this.$slots):e.h(this.component,null,this.$slots)}})}function ne(t,i){return e.defineComponent({name:"VvFormWrapper",props:{name:{type:String,required:!0},tag:{type:String,default:void 0}},emits:["invalid","valid"],expose:["clear","errors","fields","fieldsErrors","formData","invalid","reset","submit","tag","validate","validateWrapper"],slots:Object,setup(r,{emit:m}){const n=e.inject(t),a=e.inject(i,void 0),v=e.ref(new Map),d=e.ref(new Map),{name:f}=e.toRefs(r),g=e.computed(()=>n!=null&&n.invalid.value?d.value.size>0:!1);e.watch(g,()=>{g.value?m("invalid"):m("valid")});const c={name:e.readonly(f),errors:d,invalid:e.readonly(g),fields:v};e.provide(i,c),e.watch(v,(y,V)=>{a!=null&&a.fields&&V.entries().forEach(([p])=>{y.has(p)||a==null||a.fields.value.delete(p)}),a!=null&&a.fields&&y.entries().forEach(([p,o])=>{a!=null&&a.fields.value.has(p)||a==null||a.fields.value.set(p,o)})},{deep:!0}),e.watch(d,(y,V)=>{a!=null&&a.errors&&(Array.from(V.keys()).forEach(p=>{a.errors.value.delete(p)}),Array.from(y.keys()).forEach(p=>{const o=y.get(p);o&&a.errors.value.set(p,o)}))},{deep:!0}),e.onMounted(()=>{if(!(n!=null&&n.wrappers)||!f.value){console.warn("[@volverjs/form-vue]: Invalid wrapper registration state");return}if(n.wrappers.has(f.value)){console.warn(`[@volverjs/form-vue]: wrapper name "${f.value}" is already used`);return}n.wrappers.set(f.value,c)}),e.onBeforeUnmount(()=>{n!=null&&n.wrappers&&f.value&&n.wrappers.delete(f.value)});const s=()=>(n==null?void 0:n.validate(void 0,new Set(v.value.values())))??Promise.resolve(!0);return{errors:n==null?void 0:n.errors,fields:v,fieldsErrors:d,formData:n==null?void 0:n.formData,invalid:g,clear:n==null?void 0:n.clear,reset:n==null?void 0:n.reset,submit:n==null?void 0:n.submit,validate:n==null?void 0:n.validate,validateWrapper:s}},render(){const r=()=>{var m,n;return(n=(m=this.$slots).default)==null?void 0:n.call(m,{errors:this.errors,fieldsErrors:this.fieldsErrors,formData:this.formData,invalid:this.invalid,clear:this.clear,reset:this.reset,submit:this.submit,validate:this.validate,validateWrapper:this.validateWrapper})};return this.tag?e.h(this.tag,null,{default:r}):r()}})}function le(t,i){const r=e.defineComponent({name:"VvFormTemplate",props:{schema:{type:[Array,Function],required:!0},scope:{type:Object,default:()=>({})}},slots:Object,setup(m,{slots:n}){const a=e.inject(t);if(a!=null&&a.formData)return()=>{var g;const v=typeof m.schema=="function"?m.schema(a,m.scope):m.schema;let d;const f=v.reduce((c,s)=>{const y=typeof s=="function"?s(a,m.scope):s,{vvIs:V,vvName:p,vvSlots:o,vvChildren:S,vvIf:w,vvElseIf:E,vvType:R,vvDefaultValue:G,vvShowValid:x,vvContent:O,...u}=y;if(w!==void 0){if(typeof w=="string"?d=!!$(new Object(a.formData.value),w):typeof w=="function"?d=e.unref(w(a)):d=e.unref(w),!d)return c}else if(E!==void 0&&d!==void 0){if(d||(typeof E=="string"?d=!!$(new Object(a.formData.value),E):typeof E=="function"?d=e.unref(E(a)):d=e.unref(E),!d))return c}else d=void 0;let I;return S&&(typeof V=="string"?I=e.h(r,{schema:S}):I={default:U=>e.h(r,{schema:S,scope:U})}),p?(c.push(e.h(i,{name:p,is:V,type:R,defaultValue:G,showValid:x,props:u},o??I??O)),c):V?(c.push(e.h(V,u,o??I??O)),c):(I&&("default"in I?c.push(I.default(m.scope)):c.push(I)),c)},[]);return f.push((g=n==null?void 0:n.default)==null?void 0:g.call(n,{errors:a==null?void 0:a.errors.value,formData:a==null?void 0:a.formData.value,invalid:a==null?void 0:a.invalid.value,status:a==null?void 0:a.status.value,submit:a==null?void 0:a.submit,validate:a==null?void 0:a.validate,clear:a==null?void 0:a.clear,reset:a==null?void 0:a.reset})),f}}});return r}function N(t,i={}){const r=Symbol("formInjectionKey"),m=Symbol("formWrapperInjectionKey"),n=Symbol("formFieldInjectionKey"),a=Symbol("formFieldsGroupInjectionKey"),v=ne(r,m),d=te(r,m,n,i),f=ae(r,m,a),g=le(r,d),c=new Map,{clear:s,errors:y,formData:V,ignoreUpdates:p,invalid:o,readonly:S,reset:w,status:E,stopUpdatesWatch:R,submit:G,validate:x,VvForm:O}=D(t,r,i,g,c);return{clear:s,errors:y,formData:V,formFieldInjectionKey:n,formInjectionKey:r,formWrapperInjectionKey:m,ignoreUpdates:p,invalid:o,readonly:S,reset:w,status:E,stopUpdatesWatch:R,submit:G,validate:x,wrappers:c,VvForm:O,VvFormField:d,VvFormFieldsGroup:f,VvFormTemplate:g,VvFormWrapper:v}}const P=Symbol("pluginInjectionKey");function ue(t){let i={};return t.schema&&(i=N(t.schema,t)),{...i,install(r,{global:m=!1}={}){r.provide(P,t),m&&(r.config.globalProperties.$vvForm=t,i!=null&&i.VvForm&&r.component("VvForm",i.VvForm),i!=null&&i.VvFormWrapper&&r.component("VvFormWrapper",i.VvFormWrapper),i!=null&&i.VvFormField&&r.component("VvFormField",i.VvFormField),i!=null&&i.VvFormFieldsGroup&&r.component("VvFormFieldsGroup",i.VvFormFieldsGroup),i!=null&&i.VvFormTemplate&&r.component("VvFormTemplate",i.VvFormTemplate))}}}const _=new Map;function se(t,i={}){if(i.scope&&_.has(i.scope))return _.get(i.scope);if(!e.getCurrentInstance()){const m=N(t,i);return i.scope&&_.set(i.scope,m),m}const r=N(t,{...e.inject(P,{}),...i});return i.scope&&_.set(i.scope,r),r}function oe(t,i={}){return N(t,i)}C.FormFieldType=b,C.createForm=ue,C.defaultObjectBySchema=W,C.formType=oe,C.pluginInjectionKey=P,C.useForm=se,Object.defineProperty(C,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
package/src/VvForm.ts
CHANGED
|
@@ -3,6 +3,7 @@ import {
|
|
|
3
3
|
type InjectionKey,
|
|
4
4
|
type PropType,
|
|
5
5
|
type SlotsType,
|
|
6
|
+
type UnwrapRef,
|
|
6
7
|
computed,
|
|
7
8
|
defineComponent,
|
|
8
9
|
h,
|
|
@@ -159,18 +160,18 @@ export function defineForm<Schema extends FormSchema, Type, FormTemplateComponen
|
|
|
159
160
|
],
|
|
160
161
|
slots: Object as SlotsType<{
|
|
161
162
|
default: {
|
|
162
|
-
errors: typeof readonlyErrors
|
|
163
|
-
formData: typeof formData
|
|
163
|
+
errors: UnwrapRef<typeof readonlyErrors>
|
|
164
|
+
formData: UnwrapRef<typeof formData>
|
|
165
|
+
invalid: UnwrapRef<typeof invalid>
|
|
166
|
+
readonly: UnwrapRef<typeof readonly>
|
|
167
|
+
status: UnwrapRef<typeof readonlyStatus>
|
|
168
|
+
wrappers: typeof wrappers
|
|
169
|
+
clear: typeof clear
|
|
164
170
|
ignoreUpdates: typeof ignoreUpdates
|
|
165
|
-
|
|
166
|
-
readonly: typeof readonly
|
|
167
|
-
status: typeof readonlyStatus
|
|
171
|
+
reset: typeof reset
|
|
168
172
|
stopUpdatesWatch: typeof stopUpdatesWatch
|
|
169
173
|
submit: typeof submit
|
|
170
174
|
validate: typeof validate
|
|
171
|
-
clear: typeof clear
|
|
172
|
-
reset: typeof reset
|
|
173
|
-
wrappers: typeof wrappers
|
|
174
175
|
}
|
|
175
176
|
}>,
|
|
176
177
|
setup(props, { emit }) {
|
|
@@ -301,18 +302,18 @@ export function defineForm<Schema extends FormSchema, Type, FormTemplateComponen
|
|
|
301
302
|
render() {
|
|
302
303
|
const defaultSlot = () =>
|
|
303
304
|
this.$slots?.default?.({
|
|
305
|
+
errors: readonlyErrors.value,
|
|
306
|
+
formData: formData.value,
|
|
307
|
+
invalid: invalid.value,
|
|
308
|
+
readonly: readonly.value,
|
|
309
|
+
status: readonlyStatus.value,
|
|
310
|
+
wrappers,
|
|
304
311
|
clear,
|
|
305
|
-
errors: readonlyErrors,
|
|
306
|
-
formData,
|
|
307
312
|
ignoreUpdates,
|
|
308
|
-
invalid,
|
|
309
|
-
readonly,
|
|
310
313
|
reset,
|
|
311
|
-
status: readonlyStatus,
|
|
312
314
|
stopUpdatesWatch,
|
|
313
315
|
submit,
|
|
314
316
|
validate,
|
|
315
|
-
wrappers,
|
|
316
317
|
}) ?? this.$slots.default
|
|
317
318
|
return h(
|
|
318
319
|
this.tag,
|
package/src/VvFormField.ts
CHANGED
|
@@ -107,8 +107,8 @@ export function defineFormField<Schema extends FormSchema, Type>(formProvideKey:
|
|
|
107
107
|
invalid: boolean
|
|
108
108
|
invalidLabel?: string[]
|
|
109
109
|
modelValue: any
|
|
110
|
-
onUpdate: (value: unknown) => void
|
|
111
110
|
readonly: boolean
|
|
111
|
+
onUpdate: (value: unknown) => void
|
|
112
112
|
submit?: InjectedFormData<Schema, Type>['submit']
|
|
113
113
|
validate?: InjectedFormData<Schema, Type>['validate']
|
|
114
114
|
}
|
|
@@ -286,8 +286,8 @@ export function defineFormField<Schema extends FormSchema, Type>(formProvideKey:
|
|
|
286
286
|
invalid: invalid.value,
|
|
287
287
|
invalidLabel: invalidLabel.value,
|
|
288
288
|
modelValue: modelValue.value,
|
|
289
|
-
onUpdate,
|
|
290
289
|
readonly: isReadonly.value,
|
|
290
|
+
onUpdate,
|
|
291
291
|
submit: injectedFormData?.submit,
|
|
292
292
|
validate: injectedFormData?.validate,
|
|
293
293
|
}) ?? slots.default
|
package/src/VvFormWrapper.ts
CHANGED
|
@@ -52,15 +52,15 @@ export function defineFormWrapper<Schema extends FormSchema, Type>(formProvideKe
|
|
|
52
52
|
slots: Object as SlotsType<{
|
|
53
53
|
default: {
|
|
54
54
|
errors?: DeepReadonly<z.inferFormattedError<Schema>>
|
|
55
|
+
fieldsErrors: Map<string, inferFormattedError<Schema, string>>
|
|
55
56
|
formData?: undefined extends Type ? Partial<z.infer<Schema>> : Type
|
|
56
57
|
formErrors?: DeepReadonly<inferFormattedError<Schema, string>>
|
|
57
58
|
invalid: boolean
|
|
59
|
+
clear?: InjectedFormData<Schema, Type>['clear']
|
|
60
|
+
reset?: InjectedFormData<Schema, Type>['reset']
|
|
58
61
|
submit?: InjectedFormData<Schema, Type>['submit']
|
|
59
62
|
validate?: InjectedFormData<Schema, Type>['validate']
|
|
60
63
|
validateWrapper?: () => Promise<boolean>
|
|
61
|
-
fieldsErrors: Map<string, inferFormattedError<Schema, string>>
|
|
62
|
-
clear?: InjectedFormData<Schema, Type>['clear']
|
|
63
|
-
reset?: InjectedFormData<Schema, Type>['reset']
|
|
64
64
|
}
|
|
65
65
|
}>,
|
|
66
66
|
setup(props, { emit }) {
|
|
@@ -160,12 +160,12 @@ export function defineFormWrapper<Schema extends FormSchema, Type>(formProvideKe
|
|
|
160
160
|
}
|
|
161
161
|
|
|
162
162
|
return {
|
|
163
|
-
clear: injectedFormData?.clear,
|
|
164
163
|
errors: injectedFormData?.errors,
|
|
165
164
|
fields,
|
|
166
165
|
fieldsErrors,
|
|
167
166
|
formData: injectedFormData?.formData,
|
|
168
167
|
invalid,
|
|
168
|
+
clear: injectedFormData?.clear,
|
|
169
169
|
reset: injectedFormData?.reset,
|
|
170
170
|
submit: injectedFormData?.submit,
|
|
171
171
|
validate: injectedFormData?.validate,
|
|
@@ -175,11 +175,11 @@ export function defineFormWrapper<Schema extends FormSchema, Type>(formProvideKe
|
|
|
175
175
|
render() {
|
|
176
176
|
const defaultSlot = () =>
|
|
177
177
|
this.$slots.default?.({
|
|
178
|
-
clear: this.clear,
|
|
179
178
|
errors: this.errors,
|
|
180
179
|
fieldsErrors: this.fieldsErrors,
|
|
181
180
|
formData: this.formData,
|
|
182
181
|
invalid: this.invalid,
|
|
182
|
+
clear: this.clear,
|
|
183
183
|
reset: this.reset,
|
|
184
184
|
submit: this.submit,
|
|
185
185
|
validate: this.validate,
|
package/src/index.ts
CHANGED
|
@@ -39,22 +39,22 @@ function _formType<Schema extends FormSchema, Type>(schema: Schema, options: For
|
|
|
39
39
|
>
|
|
40
40
|
|
|
41
41
|
// create components
|
|
42
|
-
const VvFormWrapper = defineFormWrapper(
|
|
42
|
+
const VvFormWrapper = defineFormWrapper<Schema, Type>(
|
|
43
43
|
formInjectionKey,
|
|
44
44
|
formWrapperInjectionKey,
|
|
45
45
|
)
|
|
46
|
-
const VvFormField = defineFormField(
|
|
46
|
+
const VvFormField = defineFormField<Schema, Type>(
|
|
47
47
|
formInjectionKey,
|
|
48
48
|
formWrapperInjectionKey,
|
|
49
49
|
formFieldInjectionKey,
|
|
50
50
|
options,
|
|
51
51
|
)
|
|
52
|
-
const VvFormFieldsGroup = defineFormFieldsGroup(
|
|
52
|
+
const VvFormFieldsGroup = defineFormFieldsGroup<Schema, Type>(
|
|
53
53
|
formInjectionKey,
|
|
54
54
|
formWrapperInjectionKey,
|
|
55
55
|
formFieldsGroupInjectionKey,
|
|
56
56
|
)
|
|
57
|
-
const VvFormTemplate = defineFormTemplate(formInjectionKey, VvFormField)
|
|
57
|
+
const VvFormTemplate = defineFormTemplate<Schema, Type>(formInjectionKey, VvFormField)
|
|
58
58
|
const wrappers = new Map<string, InjectedFormWrapperData<Schema>>()
|
|
59
59
|
const {
|
|
60
60
|
clear,
|