@teamnovu/kit-vue-forms 0.1.4 → 0.1.6
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.
|
@@ -18,6 +18,7 @@ export declare function useValidation<T extends FormDataDefault>(formState: {
|
|
|
18
18
|
validateForm: () => Promise<ValidationResult>;
|
|
19
19
|
defineValidator: <TData extends T>(options: ValidatorOptions<TData> | Ref<Validator<TData>>) => Ref<Validator<TData> | undefined, Validator<TData> | undefined>;
|
|
20
20
|
isValid: ComputedRef<boolean>;
|
|
21
|
+
reset: () => void;
|
|
21
22
|
validators: Ref<Ref<Validator<T> | undefined, Validator<T> | undefined>[], Ref<Validator<T> | undefined, Validator<T> | undefined>[]>;
|
|
22
23
|
isValidated: Ref<boolean, boolean>;
|
|
23
24
|
errors: Ref<{
|
package/dist/index.js
CHANGED
|
@@ -1,61 +1,61 @@
|
|
|
1
1
|
var T = Object.defineProperty;
|
|
2
|
-
var G = (
|
|
3
|
-
var
|
|
4
|
-
import { toValue as L, toRaw as Z, computed as
|
|
2
|
+
var G = (t, e, r) => e in t ? T(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
|
|
3
|
+
var F = (t, e, r) => G(t, typeof e != "symbol" ? e + "" : e, r);
|
|
4
|
+
import { toValue as L, toRaw as Z, computed as c, unref as d, reactive as D, toRefs as N, shallowReactive as q, toRef as _, onScopeDispose as H, ref as W, watch as w, isRef as k, getCurrentScope as Q, onBeforeUnmount as X, defineComponent as j, renderSlot as O, normalizeProps as z, guardReactiveProps as B, resolveComponent as Y, createBlock as $, openBlock as A, withCtx as C, resolveDynamicComponent as x, mergeProps as ee } from "vue";
|
|
5
5
|
import { cloneDeep as re } from "lodash-es";
|
|
6
6
|
import "zod";
|
|
7
|
-
function
|
|
8
|
-
const e = L(
|
|
9
|
-
return re(
|
|
7
|
+
function g(t) {
|
|
8
|
+
const e = L(t), r = Z(e);
|
|
9
|
+
return re(r);
|
|
10
10
|
}
|
|
11
|
-
function K(
|
|
12
|
-
return
|
|
11
|
+
function K(t) {
|
|
12
|
+
return t === "" ? [] : t.split(/\s*\.\s*/).filter(Boolean);
|
|
13
13
|
}
|
|
14
|
-
function
|
|
14
|
+
function P(t, e) {
|
|
15
15
|
return (Array.isArray(e) ? e : K(e)).reduce(
|
|
16
16
|
(s, o) => s == null ? void 0 : s[o],
|
|
17
|
-
|
|
17
|
+
t
|
|
18
18
|
);
|
|
19
19
|
}
|
|
20
|
-
function te(
|
|
20
|
+
function te(t, e, r) {
|
|
21
21
|
const s = Array.isArray(e) ? e : K(e);
|
|
22
22
|
if (s.length === 0)
|
|
23
23
|
throw new Error("Path cannot be empty");
|
|
24
24
|
const o = s.at(-1), n = s.slice(0, -1).reduce(
|
|
25
|
-
(
|
|
25
|
+
(p, h) => p[h],
|
|
26
26
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
27
|
-
|
|
27
|
+
t
|
|
28
28
|
);
|
|
29
|
-
n[o] =
|
|
29
|
+
n[o] = r;
|
|
30
30
|
}
|
|
31
|
-
const U = (
|
|
31
|
+
const U = (t, e) => c({
|
|
32
32
|
get() {
|
|
33
|
-
return
|
|
33
|
+
return P(d(t), d(e));
|
|
34
34
|
},
|
|
35
|
-
set(
|
|
36
|
-
te(
|
|
35
|
+
set(r) {
|
|
36
|
+
te(d(t), d(e), r);
|
|
37
37
|
}
|
|
38
38
|
});
|
|
39
|
-
function
|
|
40
|
-
return !
|
|
39
|
+
function R(t, e) {
|
|
40
|
+
return !t && !e ? "" : !t && e ? e : !e && t ? t : `${t}.${e}`;
|
|
41
41
|
}
|
|
42
|
-
function se(
|
|
42
|
+
function se(t, e) {
|
|
43
43
|
if (!e)
|
|
44
|
-
return
|
|
45
|
-
const
|
|
46
|
-
Object.entries(
|
|
47
|
-
([o, n]) => [o.slice(
|
|
44
|
+
return t;
|
|
45
|
+
const r = `${e}.`, s = Object.fromEntries(
|
|
46
|
+
Object.entries(t.propertyErrors).filter(([o]) => o.startsWith(r)).map(
|
|
47
|
+
([o, n]) => [o.slice(r.length), n]
|
|
48
48
|
)
|
|
49
49
|
);
|
|
50
50
|
return {
|
|
51
|
-
general:
|
|
51
|
+
general: t.general,
|
|
52
52
|
// Keep general errors
|
|
53
53
|
propertyErrors: s
|
|
54
54
|
};
|
|
55
55
|
}
|
|
56
56
|
class ae {
|
|
57
57
|
constructor(e) {
|
|
58
|
-
|
|
58
|
+
F(this, "rc", 1);
|
|
59
59
|
this.drop = e;
|
|
60
60
|
}
|
|
61
61
|
inc() {
|
|
@@ -65,138 +65,138 @@ class ae {
|
|
|
65
65
|
this.rc > 0 && (this.rc -= 1, this.rc === 0 && this.drop && this.drop());
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
|
-
function oe(
|
|
69
|
-
const e =
|
|
70
|
-
value:
|
|
71
|
-
path:
|
|
72
|
-
initialValue:
|
|
73
|
-
errors:
|
|
68
|
+
function oe(t) {
|
|
69
|
+
const e = D({
|
|
70
|
+
value: t.value,
|
|
71
|
+
path: t.path,
|
|
72
|
+
initialValue: c(() => Object.freeze(g(t.initialValue))),
|
|
73
|
+
errors: t.errors,
|
|
74
74
|
touched: !1
|
|
75
|
-
}),
|
|
75
|
+
}), r = c(() => JSON.stringify(e.value) !== JSON.stringify(e.initialValue)), s = (a) => {
|
|
76
76
|
e.value = a;
|
|
77
77
|
}, o = () => {
|
|
78
78
|
e.touched = !0;
|
|
79
79
|
}, n = () => {
|
|
80
|
-
},
|
|
81
|
-
e.value =
|
|
82
|
-
},
|
|
80
|
+
}, p = () => {
|
|
81
|
+
e.value = g(e.initialValue), e.touched = !1, e.errors = [];
|
|
82
|
+
}, h = (a) => {
|
|
83
83
|
e.errors = a;
|
|
84
|
-
},
|
|
84
|
+
}, V = () => {
|
|
85
85
|
e.errors = [];
|
|
86
|
-
},
|
|
86
|
+
}, i = N(e);
|
|
87
87
|
return {
|
|
88
|
-
data:
|
|
89
|
-
path:
|
|
90
|
-
initialValue:
|
|
91
|
-
errors:
|
|
92
|
-
touched:
|
|
93
|
-
dirty:
|
|
88
|
+
data: i.value,
|
|
89
|
+
path: i.path,
|
|
90
|
+
initialValue: i.initialValue,
|
|
91
|
+
errors: i.errors,
|
|
92
|
+
touched: i.touched,
|
|
93
|
+
dirty: r,
|
|
94
94
|
setData: s,
|
|
95
95
|
onBlur: o,
|
|
96
96
|
onFocus: n,
|
|
97
|
-
reset:
|
|
98
|
-
setErrors:
|
|
99
|
-
clearErrors:
|
|
97
|
+
reset: p,
|
|
98
|
+
setErrors: h,
|
|
99
|
+
clearErrors: V
|
|
100
100
|
};
|
|
101
101
|
}
|
|
102
|
-
function ne(
|
|
103
|
-
const
|
|
104
|
-
const u =
|
|
102
|
+
function ne(t, e) {
|
|
103
|
+
const r = /* @__PURE__ */ new Map(), s = q(/* @__PURE__ */ new Map()), o = (a) => {
|
|
104
|
+
const u = d(a.path);
|
|
105
105
|
s.set(u, a);
|
|
106
106
|
}, n = (a) => {
|
|
107
107
|
s.delete(a);
|
|
108
|
-
},
|
|
108
|
+
}, p = (a) => {
|
|
109
109
|
var u;
|
|
110
|
-
|
|
111
|
-
},
|
|
110
|
+
r.has(a) ? (u = r.get(a)) == null || u.inc() : r.set(a, new ae(() => n(a)));
|
|
111
|
+
}, h = (a) => {
|
|
112
112
|
var u;
|
|
113
|
-
|
|
114
|
-
},
|
|
113
|
+
r.has(a) && ((u = r.get(a)) == null || u.dec());
|
|
114
|
+
}, V = (a) => {
|
|
115
115
|
if (!s.has(a)) {
|
|
116
|
-
const
|
|
116
|
+
const v = oe({
|
|
117
117
|
path: a,
|
|
118
|
-
value: U(_(
|
|
119
|
-
initialValue:
|
|
120
|
-
errors:
|
|
118
|
+
value: U(_(t, "data"), a),
|
|
119
|
+
initialValue: c(() => P(t.initialData, a)),
|
|
120
|
+
errors: c({
|
|
121
121
|
get() {
|
|
122
122
|
return e.errors.value.propertyErrors[a] || [];
|
|
123
123
|
},
|
|
124
|
-
set(
|
|
125
|
-
e.errors.value.propertyErrors[a] =
|
|
124
|
+
set(E) {
|
|
125
|
+
e.errors.value.propertyErrors[a] = E;
|
|
126
126
|
}
|
|
127
127
|
})
|
|
128
128
|
});
|
|
129
|
-
o(
|
|
129
|
+
o(v);
|
|
130
130
|
}
|
|
131
131
|
const u = s.get(a);
|
|
132
|
-
return
|
|
133
|
-
|
|
132
|
+
return p(a), H(() => {
|
|
133
|
+
h(a);
|
|
134
134
|
}), u;
|
|
135
|
-
},
|
|
135
|
+
}, i = (a) => V(a.path);
|
|
136
136
|
return {
|
|
137
|
-
fields:
|
|
138
|
-
getField:
|
|
137
|
+
fields: c(() => [...s.values()]),
|
|
138
|
+
getField: V,
|
|
139
139
|
registerField: o,
|
|
140
140
|
deregisterField: n,
|
|
141
|
-
defineField:
|
|
141
|
+
defineField: i
|
|
142
142
|
};
|
|
143
143
|
}
|
|
144
|
-
function ie(
|
|
145
|
-
const e =
|
|
144
|
+
function ie(t) {
|
|
145
|
+
const e = c(() => t.fields.value.some((s) => d(s.dirty))), r = c(() => t.fields.value.some((s) => d(s.touched)));
|
|
146
146
|
return {
|
|
147
147
|
isDirty: e,
|
|
148
|
-
isTouched:
|
|
148
|
+
isTouched: r
|
|
149
149
|
};
|
|
150
150
|
}
|
|
151
|
-
function le(
|
|
152
|
-
return
|
|
153
|
-
(e,
|
|
151
|
+
function le(t) {
|
|
152
|
+
return t.filter(
|
|
153
|
+
(e, r, s) => s.indexOf(e) === r
|
|
154
154
|
);
|
|
155
155
|
}
|
|
156
|
-
function I(...
|
|
157
|
-
return
|
|
158
|
-
if (!e && !
|
|
156
|
+
function I(...t) {
|
|
157
|
+
return t.slice(1).reduce((e, r) => {
|
|
158
|
+
if (!e && !r)
|
|
159
159
|
return;
|
|
160
|
-
const s = ((
|
|
161
|
-
if (!e && ((
|
|
162
|
-
return
|
|
160
|
+
const s = ((r == null ? void 0 : r.length) ?? 0) > 0;
|
|
161
|
+
if (!e && ((r == null ? void 0 : r.length) ?? 0) > 0)
|
|
162
|
+
return r;
|
|
163
163
|
if (!s)
|
|
164
164
|
return e;
|
|
165
|
-
const o = (e ?? []).concat(
|
|
165
|
+
const o = (e ?? []).concat(r);
|
|
166
166
|
return le(o);
|
|
167
|
-
},
|
|
167
|
+
}, t[0]);
|
|
168
168
|
}
|
|
169
|
-
function ce(...
|
|
170
|
-
return
|
|
171
|
-
const o =
|
|
169
|
+
function ce(...t) {
|
|
170
|
+
return t.map((r) => Object.keys(r)).flat().reduce((r, s) => {
|
|
171
|
+
const o = t.map((n) => n[s]).filter(Boolean);
|
|
172
172
|
return {
|
|
173
|
-
...
|
|
173
|
+
...r,
|
|
174
174
|
[s]: I(...o)
|
|
175
175
|
};
|
|
176
176
|
}, {});
|
|
177
177
|
}
|
|
178
|
-
function S(...
|
|
179
|
-
if (!
|
|
178
|
+
function S(...t) {
|
|
179
|
+
if (!t.length)
|
|
180
180
|
return {
|
|
181
181
|
general: [],
|
|
182
182
|
propertyErrors: {}
|
|
183
183
|
};
|
|
184
|
-
const e =
|
|
185
|
-
return
|
|
186
|
-
(
|
|
187
|
-
general: I(
|
|
188
|
-
propertyErrors: ce(
|
|
184
|
+
const e = t[0];
|
|
185
|
+
return t.length === 1 ? e : t.slice(1).reduce(
|
|
186
|
+
(r, s) => ({
|
|
187
|
+
general: I(r.general, s.general),
|
|
188
|
+
propertyErrors: ce(r.propertyErrors ?? {}, s.propertyErrors ?? {})
|
|
189
189
|
}),
|
|
190
190
|
e
|
|
191
191
|
);
|
|
192
192
|
}
|
|
193
|
-
function M(
|
|
193
|
+
function M(t) {
|
|
194
194
|
var s;
|
|
195
|
-
const e = (((s =
|
|
196
|
-
return e ||
|
|
195
|
+
const e = (((s = t.general) == null ? void 0 : s.length) ?? 0) > 0, r = Object.entries(t.propertyErrors).filter(([, o]) => o == null ? void 0 : o.length).length > 0;
|
|
196
|
+
return e || r;
|
|
197
197
|
}
|
|
198
|
-
function ue(
|
|
199
|
-
const e =
|
|
198
|
+
function ue(t) {
|
|
199
|
+
const e = t.issues.filter((s) => s.path.length === 0).map((s) => s.message), r = t.issues.filter((s) => s.path.length > 0).reduce((s, o) => {
|
|
200
200
|
const n = o.path.join(".");
|
|
201
201
|
return {
|
|
202
202
|
...s,
|
|
@@ -205,7 +205,7 @@ function ue(r) {
|
|
|
205
205
|
}, {});
|
|
206
206
|
return {
|
|
207
207
|
general: e,
|
|
208
|
-
propertyErrors:
|
|
208
|
+
propertyErrors: r
|
|
209
209
|
};
|
|
210
210
|
}
|
|
211
211
|
const m = {
|
|
@@ -222,10 +222,10 @@ class de {
|
|
|
222
222
|
async validate(e) {
|
|
223
223
|
if (!this.schema)
|
|
224
224
|
return m;
|
|
225
|
-
const
|
|
226
|
-
if (
|
|
225
|
+
const r = await this.schema.safeParseAsync(e);
|
|
226
|
+
if (r.success)
|
|
227
227
|
return m;
|
|
228
|
-
const s = ue(
|
|
228
|
+
const s = ue(r.error);
|
|
229
229
|
return {
|
|
230
230
|
isValid: !1,
|
|
231
231
|
errors: {
|
|
@@ -243,13 +243,13 @@ class fe {
|
|
|
243
243
|
if (!this.validateFn)
|
|
244
244
|
return m;
|
|
245
245
|
try {
|
|
246
|
-
const
|
|
247
|
-
return
|
|
248
|
-
} catch (
|
|
246
|
+
const r = await this.validateFn(e);
|
|
247
|
+
return r.isValid ? m : r;
|
|
248
|
+
} catch (r) {
|
|
249
249
|
return {
|
|
250
250
|
isValid: !1,
|
|
251
251
|
errors: {
|
|
252
|
-
general: [
|
|
252
|
+
general: [r.message || "Validation error"],
|
|
253
253
|
propertyErrors: {}
|
|
254
254
|
}
|
|
255
255
|
};
|
|
@@ -257,108 +257,111 @@ class fe {
|
|
|
257
257
|
}
|
|
258
258
|
}
|
|
259
259
|
class pe {
|
|
260
|
-
constructor(e,
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
this.schema = e, this.validateFn =
|
|
260
|
+
constructor(e, r) {
|
|
261
|
+
F(this, "schemaValidator");
|
|
262
|
+
F(this, "functionValidator");
|
|
263
|
+
this.schema = e, this.validateFn = r, this.schemaValidator = new de(this.schema), this.functionValidator = new fe(this.validateFn);
|
|
264
264
|
}
|
|
265
265
|
async validate(e) {
|
|
266
|
-
const [
|
|
266
|
+
const [r, s] = await Promise.all([
|
|
267
267
|
this.schemaValidator.validate(e),
|
|
268
268
|
this.functionValidator.validate(e)
|
|
269
269
|
]);
|
|
270
270
|
return {
|
|
271
|
-
isValid:
|
|
272
|
-
errors: S(
|
|
271
|
+
isValid: r.isValid && s.isValid,
|
|
272
|
+
errors: S(r.errors, s.errors)
|
|
273
273
|
};
|
|
274
274
|
}
|
|
275
275
|
}
|
|
276
|
-
function b(
|
|
277
|
-
return
|
|
278
|
-
|
|
279
|
-
|
|
276
|
+
function b(t) {
|
|
277
|
+
return c(() => new pe(
|
|
278
|
+
d(t.schema),
|
|
279
|
+
d(t.validateFn)
|
|
280
280
|
));
|
|
281
281
|
}
|
|
282
|
-
function he(
|
|
283
|
-
const
|
|
282
|
+
function he(t, e) {
|
|
283
|
+
const r = D({
|
|
284
284
|
validators: W([b(e)]),
|
|
285
285
|
isValidated: !1,
|
|
286
|
-
errors:
|
|
287
|
-
})
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
286
|
+
errors: d(e.errors) ?? m.errors
|
|
287
|
+
}), s = (i = m.errors) => {
|
|
288
|
+
r.errors = S(d(e.errors) ?? m.errors, i);
|
|
289
|
+
};
|
|
290
|
+
w(() => d(e.errors), async () => {
|
|
291
|
+
if (r.isValidated) {
|
|
292
|
+
const i = await n();
|
|
293
|
+
s(i.errors);
|
|
292
294
|
} else
|
|
293
|
-
|
|
294
|
-
}, { immediate: !0 }),
|
|
295
|
-
[() =>
|
|
296
|
-
async (
|
|
297
|
-
if (
|
|
298
|
-
if (
|
|
299
|
-
const
|
|
300
|
-
|
|
295
|
+
s();
|
|
296
|
+
}, { immediate: !0 }), w(
|
|
297
|
+
[() => r.validators],
|
|
298
|
+
async (i) => {
|
|
299
|
+
if (r.isValidated)
|
|
300
|
+
if (i) {
|
|
301
|
+
const a = await n();
|
|
302
|
+
r.errors = a.errors;
|
|
301
303
|
} else
|
|
302
|
-
|
|
304
|
+
r.errors = m.errors;
|
|
303
305
|
},
|
|
304
306
|
{ immediate: !0 }
|
|
305
|
-
),
|
|
306
|
-
|
|
307
|
+
), w(() => t.data, () => {
|
|
308
|
+
r.isValidated && p();
|
|
307
309
|
});
|
|
308
|
-
const
|
|
309
|
-
const
|
|
310
|
-
return
|
|
311
|
-
|
|
312
|
-
(
|
|
310
|
+
const o = (i) => {
|
|
311
|
+
const a = k(i) ? i : b(i);
|
|
312
|
+
return r.validators.push(a), Q() && X(() => {
|
|
313
|
+
r.validators = r.validators.filter(
|
|
314
|
+
(u) => u !== a
|
|
313
315
|
);
|
|
314
|
-
}),
|
|
316
|
+
}), a;
|
|
315
317
|
};
|
|
316
|
-
async function
|
|
317
|
-
const
|
|
318
|
-
|
|
319
|
-
),
|
|
320
|
-
let { errors:
|
|
321
|
-
if (!
|
|
322
|
-
const
|
|
323
|
-
|
|
318
|
+
async function n() {
|
|
319
|
+
const i = await Promise.all(
|
|
320
|
+
r.validators.filter((v) => d(v) !== void 0).map((v) => d(v).validate(t.data))
|
|
321
|
+
), a = i.every((v) => v.isValid);
|
|
322
|
+
let { errors: u } = m;
|
|
323
|
+
if (!a) {
|
|
324
|
+
const v = i.map((E) => E.errors);
|
|
325
|
+
u = S(...v);
|
|
324
326
|
}
|
|
325
327
|
return {
|
|
326
|
-
errors:
|
|
327
|
-
isValid:
|
|
328
|
+
errors: u,
|
|
329
|
+
isValid: a
|
|
328
330
|
};
|
|
329
331
|
}
|
|
330
|
-
const
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
isValid: !M(l.errors),
|
|
336
|
-
errors: t.errors
|
|
332
|
+
const p = async () => {
|
|
333
|
+
const i = await n();
|
|
334
|
+
return s(i.errors), r.isValidated = !0, {
|
|
335
|
+
isValid: !M(i.errors),
|
|
336
|
+
errors: r.errors
|
|
337
337
|
};
|
|
338
|
-
},
|
|
338
|
+
}, h = c(() => !M(r.errors)), V = () => {
|
|
339
|
+
r.isValidated = !1, r.errors = d(e.errors) ?? m.errors;
|
|
340
|
+
};
|
|
339
341
|
return {
|
|
340
|
-
...N(
|
|
341
|
-
validateForm:
|
|
342
|
-
defineValidator:
|
|
343
|
-
isValid:
|
|
342
|
+
...N(r),
|
|
343
|
+
validateForm: p,
|
|
344
|
+
defineValidator: o,
|
|
345
|
+
isValid: h,
|
|
346
|
+
reset: V
|
|
344
347
|
};
|
|
345
348
|
}
|
|
346
349
|
class ve {
|
|
347
|
-
constructor(e,
|
|
348
|
-
this.path = e, this.validator =
|
|
350
|
+
constructor(e, r) {
|
|
351
|
+
this.path = e, this.validator = r;
|
|
349
352
|
}
|
|
350
353
|
async validate(e) {
|
|
351
|
-
const
|
|
354
|
+
const r = P(e, this.path);
|
|
352
355
|
if (!this.validator)
|
|
353
356
|
return m;
|
|
354
|
-
const s = await this.validator.validate(
|
|
357
|
+
const s = await this.validator.validate(r);
|
|
355
358
|
return {
|
|
356
359
|
isValid: s.isValid,
|
|
357
360
|
errors: {
|
|
358
361
|
general: s.errors.general || [],
|
|
359
362
|
propertyErrors: s.errors.propertyErrors ? Object.fromEntries(
|
|
360
363
|
Object.entries(s.errors.propertyErrors).map(([o, n]) => [
|
|
361
|
-
|
|
364
|
+
R(this.path, o),
|
|
362
365
|
n
|
|
363
366
|
])
|
|
364
367
|
) : {}
|
|
@@ -366,83 +369,83 @@ class ve {
|
|
|
366
369
|
};
|
|
367
370
|
}
|
|
368
371
|
}
|
|
369
|
-
function me(
|
|
370
|
-
const s = U(
|
|
371
|
-
...
|
|
372
|
-
path:
|
|
373
|
-
setData: (
|
|
374
|
-
|
|
372
|
+
function me(t, e, r) {
|
|
373
|
+
const s = U(t.data, e), o = c(() => P(t.initialData.value, e)), n = (l) => ({
|
|
374
|
+
...l,
|
|
375
|
+
path: c(() => d(l.path).replace(e + ".", "")),
|
|
376
|
+
setData: (f) => {
|
|
377
|
+
l.setData(f);
|
|
375
378
|
}
|
|
376
|
-
}),
|
|
377
|
-
const
|
|
378
|
-
return
|
|
379
|
-
},
|
|
380
|
-
const
|
|
381
|
-
...
|
|
382
|
-
path:
|
|
379
|
+
}), p = (l) => {
|
|
380
|
+
const f = R(e, l), y = t.getField(f);
|
|
381
|
+
return y ? n(y) : {};
|
|
382
|
+
}, h = (l) => {
|
|
383
|
+
const f = R(e, l.path), y = t.defineField({
|
|
384
|
+
...l,
|
|
385
|
+
path: f
|
|
383
386
|
});
|
|
384
|
-
return n(
|
|
385
|
-
},
|
|
386
|
-
const
|
|
387
|
-
return
|
|
388
|
-
}).map((
|
|
389
|
-
const
|
|
390
|
-
return
|
|
391
|
-
}), a =
|
|
387
|
+
return n(y);
|
|
388
|
+
}, V = c(() => t.fields.value.filter((l) => {
|
|
389
|
+
const f = l.path.value;
|
|
390
|
+
return f.startsWith(e + ".") || f === e;
|
|
391
|
+
}).map((l) => n(l))), i = () => t.fields.value.filter((l) => {
|
|
392
|
+
const f = l.path.value;
|
|
393
|
+
return f.startsWith(e + ".") || f === e;
|
|
394
|
+
}), a = c(() => i().some((l) => l.dirty.value)), u = c(() => i().some((l) => l.touched.value)), v = c(() => t.isValid.value), E = c(() => t.isValidated.value), J = c(() => se(d(t.errors), e));
|
|
392
395
|
return {
|
|
393
396
|
data: s,
|
|
394
|
-
fields:
|
|
397
|
+
fields: V,
|
|
395
398
|
initialData: o,
|
|
396
|
-
defineField:
|
|
397
|
-
getField:
|
|
399
|
+
defineField: h,
|
|
400
|
+
getField: p,
|
|
398
401
|
isDirty: a,
|
|
399
402
|
isTouched: u,
|
|
400
|
-
isValid:
|
|
401
|
-
isValidated:
|
|
403
|
+
isValid: v,
|
|
404
|
+
isValidated: E,
|
|
402
405
|
errors: J,
|
|
403
|
-
defineValidator: (
|
|
404
|
-
const
|
|
405
|
-
() => new ve(e, f
|
|
406
|
+
defineValidator: (l) => {
|
|
407
|
+
const f = k(l) ? l : b(l), y = c(
|
|
408
|
+
() => new ve(e, d(f))
|
|
406
409
|
);
|
|
407
|
-
return
|
|
410
|
+
return t.defineValidator(y), f;
|
|
408
411
|
},
|
|
409
|
-
reset: () =>
|
|
410
|
-
validateForm: () =>
|
|
411
|
-
getSubForm: (
|
|
412
|
-
const
|
|
413
|
-
return
|
|
414
|
-
|
|
415
|
-
|
|
412
|
+
reset: () => i().forEach((l) => l.reset()),
|
|
413
|
+
validateForm: () => t.validateForm(),
|
|
414
|
+
getSubForm: (l, f) => {
|
|
415
|
+
const y = R(e, l);
|
|
416
|
+
return t.getSubForm(
|
|
417
|
+
y,
|
|
418
|
+
f
|
|
416
419
|
);
|
|
417
420
|
}
|
|
418
421
|
};
|
|
419
422
|
}
|
|
420
|
-
function Pe(
|
|
421
|
-
const e =
|
|
423
|
+
function Pe(t) {
|
|
424
|
+
const e = c(() => Object.freeze(g(t.initialData))), r = W(g(e)), s = D({
|
|
422
425
|
initialData: e,
|
|
423
|
-
data:
|
|
426
|
+
data: r
|
|
424
427
|
});
|
|
425
|
-
|
|
426
|
-
s.data =
|
|
428
|
+
w(e, (a) => {
|
|
429
|
+
s.data = g(a);
|
|
427
430
|
});
|
|
428
|
-
const o = he(s,
|
|
429
|
-
|
|
431
|
+
const o = he(s, t), n = ne(s, o), p = ie(n), h = () => {
|
|
432
|
+
r.value = g(e), o.reset(), n.fields.value.forEach(
|
|
430
433
|
(a) => a.reset()
|
|
431
434
|
);
|
|
432
435
|
};
|
|
433
|
-
function
|
|
434
|
-
return me(
|
|
436
|
+
function V(a, u) {
|
|
437
|
+
return me(i, a);
|
|
435
438
|
}
|
|
436
|
-
const
|
|
439
|
+
const i = {
|
|
437
440
|
...n,
|
|
438
441
|
...o,
|
|
439
|
-
...
|
|
440
|
-
reset:
|
|
441
|
-
getSubForm:
|
|
442
|
+
...p,
|
|
443
|
+
reset: h,
|
|
444
|
+
getSubForm: V,
|
|
442
445
|
initialData: _(s, "initialData"),
|
|
443
446
|
data: _(s, "data")
|
|
444
447
|
};
|
|
445
|
-
return
|
|
448
|
+
return i;
|
|
446
449
|
}
|
|
447
450
|
const _e = /* @__PURE__ */ j({
|
|
448
451
|
__name: "Field",
|
|
@@ -453,10 +456,10 @@ const _e = /* @__PURE__ */ j({
|
|
|
453
456
|
path: {},
|
|
454
457
|
errors: {}
|
|
455
458
|
},
|
|
456
|
-
setup(
|
|
457
|
-
const e =
|
|
459
|
+
setup(t) {
|
|
460
|
+
const e = t, r = e.form.defineField({
|
|
458
461
|
path: e.path
|
|
459
|
-
}), s =
|
|
462
|
+
}), s = D(r);
|
|
460
463
|
return (o, n) => O(o.$slots, "default", z(B(s)));
|
|
461
464
|
}
|
|
462
465
|
}), Se = /* @__PURE__ */ j({
|
|
@@ -468,19 +471,19 @@ const _e = /* @__PURE__ */ j({
|
|
|
468
471
|
form: {},
|
|
469
472
|
path: {}
|
|
470
473
|
},
|
|
471
|
-
setup(
|
|
472
|
-
return (e,
|
|
474
|
+
setup(t) {
|
|
475
|
+
return (e, r) => {
|
|
473
476
|
const s = Y("Field");
|
|
474
477
|
return A(), $(s, {
|
|
475
478
|
form: e.form,
|
|
476
479
|
path: e.path
|
|
477
480
|
}, {
|
|
478
|
-
default: C(({ errors: o, data: n, setData:
|
|
481
|
+
default: C(({ errors: o, data: n, setData: p }) => [
|
|
479
482
|
(A(), $(x(e.component), ee({ ...e.componentProps, ...e.$attrs }, {
|
|
480
483
|
"model-value": n,
|
|
481
484
|
errors: o,
|
|
482
485
|
name: e.path,
|
|
483
|
-
"onUpdate:modelValue":
|
|
486
|
+
"onUpdate:modelValue": p
|
|
484
487
|
}), {
|
|
485
488
|
default: C(() => [
|
|
486
489
|
O(e.$slots, "default")
|
|
@@ -498,9 +501,9 @@ const _e = /* @__PURE__ */ j({
|
|
|
498
501
|
form: {},
|
|
499
502
|
path: {}
|
|
500
503
|
},
|
|
501
|
-
setup(
|
|
502
|
-
const e =
|
|
503
|
-
return (s, o) => O(s.$slots, "default", z(B({ subform:
|
|
504
|
+
setup(t) {
|
|
505
|
+
const e = t, r = c(() => e.form.getSubForm(e.path));
|
|
506
|
+
return (s, o) => O(s.$slots, "default", z(B({ subform: r.value })));
|
|
504
507
|
}
|
|
505
508
|
});
|
|
506
509
|
export {
|
package/package.json
CHANGED
|
@@ -36,6 +36,7 @@ export function useForm<T extends FormDataDefault>(options: UseFormOptions<T>) {
|
|
|
36
36
|
|
|
37
37
|
const reset = () => {
|
|
38
38
|
data.value = cloneRefValue(initialData)
|
|
39
|
+
validationState.reset()
|
|
39
40
|
fieldRegistry.fields.value.forEach(
|
|
40
41
|
(field: AnyField<T>) => field.reset(),
|
|
41
42
|
)
|
|
@@ -122,6 +122,10 @@ export function useValidation<T extends FormDataDefault>(
|
|
|
122
122
|
errors: unref(options.errors) ?? SuccessValidationResult.errors,
|
|
123
123
|
})
|
|
124
124
|
|
|
125
|
+
const updateErrors = (newErrors: ErrorBag = SuccessValidationResult.errors) => {
|
|
126
|
+
validationState.errors = mergeErrors(unref(options.errors) ?? SuccessValidationResult.errors, newErrors)
|
|
127
|
+
}
|
|
128
|
+
|
|
125
129
|
// Watch for changes in the error bag and update validation state
|
|
126
130
|
watch(() => unref(options.errors), async () => {
|
|
127
131
|
if (validationState.isValidated) {
|
|
@@ -198,10 +202,6 @@ export function useValidation<T extends FormDataDefault>(
|
|
|
198
202
|
}
|
|
199
203
|
}
|
|
200
204
|
|
|
201
|
-
const updateErrors = (newErrors: ErrorBag = SuccessValidationResult.errors) => {
|
|
202
|
-
validationState.errors = mergeErrors(unref(options.errors) ?? SuccessValidationResult.errors, newErrors)
|
|
203
|
-
}
|
|
204
|
-
|
|
205
205
|
const validateForm = async (): Promise<ValidationResult> => {
|
|
206
206
|
const validationResults = await getValidationResults()
|
|
207
207
|
|
|
@@ -217,11 +217,17 @@ export function useValidation<T extends FormDataDefault>(
|
|
|
217
217
|
|
|
218
218
|
const isValid = computed(() => !hasErrors(validationState.errors))
|
|
219
219
|
|
|
220
|
+
const reset = () => {
|
|
221
|
+
validationState.isValidated = false
|
|
222
|
+
validationState.errors = unref(options.errors) ?? SuccessValidationResult.errors
|
|
223
|
+
}
|
|
224
|
+
|
|
220
225
|
return {
|
|
221
226
|
...toRefs(validationState),
|
|
222
227
|
validateForm,
|
|
223
228
|
defineValidator,
|
|
224
229
|
isValid,
|
|
230
|
+
reset,
|
|
225
231
|
}
|
|
226
232
|
}
|
|
227
233
|
|
|
@@ -238,4 +238,45 @@ describe('useValidation', () => {
|
|
|
238
238
|
|
|
239
239
|
expect(field.errors.value).toEqual(['Name error'])
|
|
240
240
|
})
|
|
241
|
+
|
|
242
|
+
it('should initialize properly when using a zod schema', async () => {
|
|
243
|
+
const schema = z.object({
|
|
244
|
+
name: z.string().min(2),
|
|
245
|
+
})
|
|
246
|
+
|
|
247
|
+
const formState = { data: { name: 'A' } }
|
|
248
|
+
const validation = useValidation(formState, {
|
|
249
|
+
schema,
|
|
250
|
+
})
|
|
251
|
+
|
|
252
|
+
expect(validation.errors.value).toEqual(SuccessValidationResult.errors)
|
|
253
|
+
expect(validation.isValid.value).toEqual(true)
|
|
254
|
+
|
|
255
|
+
const result = await validation.validateForm()
|
|
256
|
+
|
|
257
|
+
expect(result.isValid).toBe(false)
|
|
258
|
+
expect(result.errors.propertyErrors.name).toEqual(['Too small: expected string to have >=2 characters']) // From schema validation
|
|
259
|
+
})
|
|
260
|
+
|
|
261
|
+
it('should reset the form errors', async () => {
|
|
262
|
+
const schema = z.object({
|
|
263
|
+
name: z.string().min(2),
|
|
264
|
+
})
|
|
265
|
+
|
|
266
|
+
const formState = { data: { name: 'A' } }
|
|
267
|
+
const validation = useValidation(formState, {
|
|
268
|
+
schema,
|
|
269
|
+
})
|
|
270
|
+
|
|
271
|
+
await validation.validateForm()
|
|
272
|
+
|
|
273
|
+
expect(validation.isValidated.value).toBe(true)
|
|
274
|
+
expect(validation.isValid.value).toBe(false)
|
|
275
|
+
expect(validation.errors.value.propertyErrors.name).toEqual(['Too small: expected string to have >=2 characters']) // From schema validation
|
|
276
|
+
|
|
277
|
+
validation.reset()
|
|
278
|
+
|
|
279
|
+
expect(validation.isValidated.value).toBe(false)
|
|
280
|
+
expect(validation.errors.value).toEqual(SuccessValidationResult.errors)
|
|
281
|
+
})
|
|
241
282
|
})
|