@companix/formkit 0.0.14 → 0.0.16

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/bundle.es.js CHANGED
@@ -1,8 +1,8 @@
1
- import { jsx as v, Fragment as j, jsxs as M } from "react/jsx-runtime";
1
+ import { jsx as h, Fragment as j, jsxs as M } from "react/jsx-runtime";
2
2
  import { createContext as P, useState as R, useContext as q, useEffect as p, useMemo as A, useCallback as $, useRef as T } from "react";
3
3
  import L from "fast-deep-equal";
4
4
  const D = P({}), B = (n) => {
5
- const [, r] = R([]), e = q(D), s = e.getForm(n);
5
+ const [, r] = R([]), e = q(D), o = e.getForm(n);
6
6
  return p(() => {
7
7
  const { unsubscribe: t } = e.subscribeToForm(n, () => {
8
8
  r([]);
@@ -10,18 +10,18 @@ const D = P({}), B = (n) => {
10
10
  return () => {
11
11
  t();
12
12
  };
13
- }, []), s?.value;
13
+ }, []), o?.value;
14
14
  }, N = ({ canActivate: n, name: r, children: e }) => {
15
- const s = B(r);
16
- return n(s) ? /* @__PURE__ */ v(j, { children: e }) : null;
15
+ const o = B(r);
16
+ return n(o) ? /* @__PURE__ */ h(j, { children: e }) : null;
17
17
  }, z = ({ item: { Form: n }, name: r }) => {
18
- const [, e] = R([]), s = q(D), { unregistry: t } = A(() => s.registry(r, () => {
18
+ const [, e] = R([]), o = q(D), { unregistry: t } = A(() => o.registry(r, () => {
19
19
  e([]);
20
20
  }), []), f = $(
21
21
  (y) => {
22
22
  if (y && y.focus) {
23
- const F = s.getForm(r);
24
- F.focus = () => {
23
+ const v = o.getForm(r);
24
+ v.focus = () => {
25
25
  y.focus();
26
26
  };
27
27
  }
@@ -31,41 +31,41 @@ const D = P({}), B = (n) => {
31
31
  p(() => () => {
32
32
  t();
33
33
  }, []);
34
- const { value: h, error: m } = s.getForm(r);
35
- return /* @__PURE__ */ v(
34
+ const { value: b, error: x } = o.getForm(r);
35
+ return /* @__PURE__ */ h(
36
36
  n,
37
37
  {
38
38
  field: {
39
- value: h,
39
+ value: b,
40
40
  onChange: (y) => {
41
- s.onChange(r, y);
41
+ o.onChange(r, y);
42
42
  },
43
43
  onBlur: () => {
44
44
  },
45
45
  ref: f
46
46
  },
47
47
  isDirty: !1,
48
- error: m,
49
- disabled: s.disabled
48
+ error: x,
49
+ disabled: o.disabled
50
50
  }
51
51
  );
52
52
  }, G = ({ item: n, path: r }) => {
53
- const { getController: e, items: s } = n, t = q(D), f = A(() => {
53
+ const { getController: e, items: o } = n, t = q(D), f = A(() => {
54
54
  const l = {};
55
- return s.forEach(({ name: g, getForm: o }) => {
56
- l[g] = o(g, () => a(g));
55
+ return o.forEach(({ name: g, getForm: s }) => {
56
+ l[g] = s(g, () => a(g));
57
57
  }), l;
58
- }, []), h = $(() => {
58
+ }, []), b = $(() => {
59
59
  const l = [];
60
- return s.forEach(({ name: g }) => {
60
+ return o.forEach(({ name: g }) => {
61
61
  t.getForm([...r, g].join(".")).value !== void 0 && l.push(g);
62
62
  }), l;
63
- }, []), m = A(() => h(), []), [y, F] = R(m);
63
+ }, []), x = A(() => b(), []), [y, v] = R(x);
64
64
  p(() => {
65
65
  const { unregistry: l } = t.registryExtraForm(
66
- s.map(({ name: g }) => [...r, g].join(".")),
66
+ o.map(({ name: g }) => [...r, g].join(".")),
67
67
  () => {
68
- F(h());
68
+ v(b());
69
69
  }
70
70
  );
71
71
  return () => {
@@ -74,92 +74,92 @@ const D = P({}), B = (n) => {
74
74
  }, []);
75
75
  const d = $(
76
76
  (l) => {
77
- f[l] && !y.includes(l) && F((g) => [...g, l]);
77
+ f[l] && !y.includes(l) && v((g) => [...g, l]);
78
78
  },
79
79
  [y]
80
80
  ), a = $((l) => {
81
- F((g) => g.filter((o) => o !== l));
81
+ v((g) => g.filter((s) => s !== l));
82
82
  }, []);
83
83
  return /* @__PURE__ */ M(j, { children: [
84
84
  y.map((l) => {
85
85
  const g = f[l];
86
- return /* @__PURE__ */ v(E, { path: r, scheme: [g] }, `param-form--${l}`);
86
+ return /* @__PURE__ */ h(C, { path: r, scheme: [g] }, `param-form--${l}`);
87
87
  }),
88
88
  e(d, y)
89
89
  ] });
90
- }, E = ({ scheme: n, path: r }) => /* @__PURE__ */ v(j, { children: n.map((e, s) => e.type === "layout" ? /* @__PURE__ */ v(e.Layout, { children: /* @__PURE__ */ v(E, { path: r, scheme: e.childs }) }, `layout-form--${s}-${r.length}`) : e.type === "context" ? /* @__PURE__ */ v(
91
- E,
90
+ }, C = ({ scheme: n, path: r }) => /* @__PURE__ */ h(j, { children: n.map((e, o) => e.type === "layout" ? /* @__PURE__ */ h(e.Layout, { children: /* @__PURE__ */ h(C, { path: r, scheme: e.childs }) }, `layout-form--${o}-${r.length}`) : e.type === "context" ? /* @__PURE__ */ h(
91
+ C,
92
92
  {
93
93
  path: [...r, e.context],
94
94
  scheme: e.childs
95
95
  },
96
- `context-form--${s}-${e.context}-${r.length}`
97
- ) : e.type === "condition" ? /* @__PURE__ */ v(
96
+ `context-form--${o}-${e.context}-${r.length}`
97
+ ) : e.type === "condition" ? /* @__PURE__ */ h(
98
98
  N,
99
99
  {
100
100
  name: e.depended,
101
101
  canActivate: e.canActivate,
102
- children: /* @__PURE__ */ v(E, { path: r, scheme: e.childs })
102
+ children: /* @__PURE__ */ h(C, { path: r, scheme: e.childs })
103
103
  },
104
- `condition--${s}-${e.depended}-${r.length}`
105
- ) : e.type === "extra" ? /* @__PURE__ */ v(G, { path: r, item: e }, `partial-item--${s}-${r.length}`) : /* @__PURE__ */ v(
104
+ `condition--${o}-${e.depended}-${r.length}`
105
+ ) : e.type === "extra" ? /* @__PURE__ */ h(G, { path: r, item: e }, `partial-item--${o}-${r.length}`) : /* @__PURE__ */ h(
106
106
  z,
107
107
  {
108
108
  name: [...r, e.name].join("."),
109
109
  item: e
110
110
  },
111
- `form-item--${s}-${e.name}-${r.length}`
112
- )) }), C = (n, r, e, s) => {
111
+ `form-item--${o}-${e.name}-${r.length}`
112
+ )) }), V = (n, r, e, o) => {
113
113
  n.forEach((t) => {
114
- if (t.type === "form" && s(t, [...r, t.name].join("."), e[t.name]), t.type === "context") {
115
- C(t.childs, [...r, t.context], e[t.context] ?? {}, s);
114
+ if (t.type === "form" && o(t, [...r, t.name].join("."), e[t.name]), t.type === "context") {
115
+ V(t.childs, [...r, t.context], e[t.context] ?? {}, o);
116
116
  return;
117
117
  }
118
118
  if (t.type === "layout" || t.type === "condition") {
119
- C(t.childs, r, e, s);
119
+ V(t.childs, r, e, o);
120
120
  return;
121
121
  }
122
- t.type === "extra" && t.items.forEach(({ getForm: f, name: h }) => {
123
- C([f(h, () => {
124
- })], r, e, s);
122
+ t.type === "extra" && t.items.forEach(({ getForm: f, name: b }) => {
123
+ V([f(b, () => {
124
+ })], r, e, o);
125
125
  });
126
126
  });
127
- }, V = ({ scheme: n, values: r, path: e, forms: s }) => {
127
+ }, E = ({ scheme: n, values: r, path: e, forms: o }) => {
128
128
  n.forEach((t) => {
129
129
  if (t.type === "form") {
130
130
  const f = [...e, t.name].join(".");
131
- s[f].value !== void 0 && (r[t.name] = s[f].value);
131
+ o[f].value !== void 0 && (r[t.name] = o[f].value);
132
132
  }
133
133
  if (t.type === "context") {
134
- r[t.context] = {}, V({
134
+ r[t.context] = {}, E({
135
135
  scheme: t.childs,
136
136
  path: [...e, t.context],
137
137
  values: r[t.context],
138
- forms: s
138
+ forms: o
139
139
  });
140
140
  return;
141
141
  }
142
142
  if (t.type === "layout") {
143
- V({ scheme: t.childs, path: e, values: r, forms: s });
143
+ E({ scheme: t.childs, path: e, values: r, forms: o });
144
144
  return;
145
145
  }
146
146
  if (t.type === "condition") {
147
- const f = s[t.depended]?.value;
147
+ const f = o[t.depended]?.value;
148
148
  if (t.canActivate(f)) {
149
- V({ scheme: t.childs, path: e, values: r, forms: s });
149
+ E({ scheme: t.childs, path: e, values: r, forms: o });
150
150
  return;
151
151
  }
152
152
  }
153
- t.type === "extra" && t.items.forEach(({ getForm: f, name: h }) => {
154
- V({ scheme: [f(h, () => {
155
- })], path: e, values: r, forms: s });
153
+ t.type === "extra" && t.items.forEach(({ getForm: f, name: b }) => {
154
+ E({ scheme: [f(b, () => {
155
+ })], path: e, values: r, forms: o });
156
156
  });
157
157
  });
158
158
  }, w = (n, r) => {
159
159
  const e = {};
160
- return V({ scheme: n, path: [], values: e, forms: r }), e;
160
+ return E({ scheme: n, path: [], values: e, forms: r }), e;
161
161
  }, H = (n, r) => {
162
- const { onSubmit: e, onEqual: s, disabled: t, onDirty: f, onFormDirty: h, onChangeEvent: m, defaultValues: y } = r, F = { onSubmit: e }, d = {
162
+ const { onSubmit: e, onEqual: o, disabled: t, onDirty: f, onFormDirty: b, onChangeEvent: x, defaultValues: y } = r, v = { onSubmit: e }, d = {
163
163
  isActive: !1,
164
164
  isSubmitted: !1,
165
165
  dirtyCount: 0
@@ -167,27 +167,27 @@ const D = P({}), B = (n) => {
167
167
  subscribers: [],
168
168
  names: {}
169
169
  };
170
- C(n, [], y ?? {}, (o, u, i) => {
170
+ V(n, [], y ?? {}, (s, u, i) => {
171
171
  a[u] = {
172
172
  error: null,
173
173
  isDirty: !1,
174
174
  value: i,
175
175
  // текущее (динамическое) состояние поля. Значение равно переданному дефолтному, либо: определяется как дефолтное значение компонента формы в момент его монтирования, а до этого - undefined.
176
- startValue: i ?? o.defaultValue,
176
+ startValue: i ?? s.defaultValue,
177
177
  // начальное (стартовое) значение (равно переданному дефолтному, либо значению формы по умолчанию). Исходя из сравнения текущего значения со стартовым, можно понять, модифицированно ли поле
178
- defaultValue: o.defaultValue,
178
+ defaultValue: s.defaultValue,
179
179
  // дефолтное значение компонента формы
180
180
  rerender: () => {
181
181
  },
182
182
  subscribers: [],
183
- validate: o.validate
183
+ validate: s.validate
184
184
  };
185
185
  });
186
- const g = (o, u) => {
187
- f?.({ name: o, isDirty: u }), u && d.dirtyCount === 0 && h?.(!0), !u && d.dirtyCount === 1 && h?.(!1), d.dirtyCount += u ? 1 : -1;
186
+ const g = (s, u) => {
187
+ f?.({ name: s, isDirty: u }), u && d.dirtyCount === 0 && b?.(!0), !u && d.dirtyCount === 1 && b?.(!1), d.dirtyCount += u ? 1 : -1;
188
188
  };
189
189
  return {
190
- submitRef: F,
190
+ submitRef: v,
191
191
  scheme: n,
192
192
  disabled: t,
193
193
  activate() {
@@ -196,20 +196,20 @@ const D = P({}), B = (n) => {
196
196
  disactivate() {
197
197
  d.isActive = !1;
198
198
  },
199
- setError(o, u) {
200
- const i = this.getForm(o);
199
+ setError(s, u) {
200
+ const i = this.getForm(s);
201
201
  i && (i.error = {
202
202
  error: !0,
203
203
  messages: [u.message]
204
204
  }, i.rerender());
205
205
  },
206
- setFocus(o) {
207
- const u = this.getForm(o);
206
+ setFocus(s) {
207
+ const u = this.getForm(s);
208
208
  u && u.focus && u.focus();
209
209
  },
210
- setValue(o, u) {
211
- const i = this.getForm(o);
212
- i && i.value !== u && this.onChange(o, u);
210
+ setValue(s, u) {
211
+ const i = this.getForm(s);
212
+ i && i.value !== u && this.onChange(s, u);
213
213
  },
214
214
  getValues() {
215
215
  return w(n, a);
@@ -218,71 +218,76 @@ const D = P({}), B = (n) => {
218
218
  if (t)
219
219
  return;
220
220
  d.isSubmitted = !0;
221
- let o = !1, u = !1;
221
+ let s = !1, u = !1;
222
222
  for (const i in a) {
223
223
  const c = a[i];
224
224
  if (c.value !== void 0) {
225
- const b = c.validate(c.value);
226
- b && (u = !0, c.error = b, c.rerender(), !o && c.focus && (c.focus(), o = !0));
225
+ const F = c.validate(c.value);
226
+ F && (u = !0, c.error = F, c.rerender(), !s && c.focus && (c.focus(), s = !0));
227
227
  }
228
228
  }
229
229
  if (!u) {
230
230
  if (d.dirtyCount === 0) {
231
- s?.();
231
+ o?.();
232
232
  return;
233
233
  }
234
234
  const i = w(n, a);
235
- await F.onSubmit(i, {
236
- setError: (c, b) => {
237
- const x = this.getForm(c);
238
- x.error = {
235
+ await v.onSubmit(i, {
236
+ setError: (c, F) => {
237
+ const m = this.getForm(c);
238
+ m.error = {
239
239
  error: !0,
240
- messages: [b.message]
241
- }, x.rerender();
240
+ messages: [F.message]
241
+ }, m.rerender();
242
242
  }
243
243
  });
244
244
  }
245
245
  },
246
- reset(o, { asDirty: u }) {
247
- C(n, [], o, (i, c, b) => {
248
- if (b === void 0 && a[c].value === void 0)
246
+ reset(s, { asDirty: u }) {
247
+ V(n, [], s, (i, c, F) => {
248
+ if (F === void 0 && a[c].value === void 0)
249
249
  return;
250
- if (l.names[c] && b === void 0) {
251
- a[c].value = b;
250
+ if (l.names[c] && F === void 0) {
251
+ a[c].value = void 0;
252
252
  return;
253
253
  }
254
- const x = b ?? i.defaultValue;
255
- u || (a[c].startValue = x, a[c].isDirty = !1), a[c].value !== x && this.onChange(c, x);
254
+ const m = F ?? i.defaultValue;
255
+ u || (a[c].startValue = m, a[c].isDirty = !1), a[c].value !== m && this.onChange(c, m);
256
256
  }), u || (d.dirtyCount = 0, d.isSubmitted = !1), l.subscribers.forEach(({ visualizeEvalueatedForms: i }) => {
257
257
  i();
258
258
  });
259
259
  },
260
- registry(o, u) {
261
- return a[o].rerender = u, a[o].value === void 0 && (a[o].value = a[o].defaultValue), {
260
+ setAsDefault() {
261
+ V(n, [], {}, ({}, s) => {
262
+ a[s].startValue = a[s].value, a[s].isDirty = !1;
263
+ }), d.dirtyCount = 0, d.isSubmitted = !1;
264
+ },
265
+ registry(s, u) {
266
+ return a[s].rerender = u, a[s].value === void 0 && (a[s].value = a[s].defaultValue), {
262
267
  unregistry() {
263
- if (a[o].rerender = () => {
264
- }, a[o].focus = void 0, d.isActive) {
265
- a[o].value = void 0;
266
- const i = !L(a[o].startValue, a[o].defaultValue);
267
- a[o].isDirty !== i && g(o, i), a[o].isDirty = i;
268
+ if (a[s].rerender = () => {
269
+ }, a[s].focus = void 0, d.isActive) {
270
+ a[s].value = void 0;
271
+ const i = !L(a[s].startValue, a[s].defaultValue);
272
+ a[s].isDirty !== i && g(s, i), a[s].isDirty = i;
268
273
  }
269
274
  }
270
275
  };
271
276
  },
272
- getForm(o) {
273
- return a[o];
277
+ getForm(s) {
278
+ return a[s];
274
279
  },
275
- subscribeToForm(o, u) {
276
- const i = { callback: u }, c = this.getForm(o);
280
+ subscribeToForm(s, u) {
281
+ const i = { callback: u }, c = this.getForm(s);
277
282
  return c.subscribers.push(i), {
278
283
  unsubscribe: () => {
279
- c.subscribers = c.subscribers.filter((b) => b !== i);
284
+ c.subscribers = c.subscribers.filter((F) => F !== i);
280
285
  }
281
286
  };
282
287
  },
283
- registryExtraForm(o, u) {
288
+ registryExtraForm(s, u) {
284
289
  const i = { visualizeEvalueatedForms: u };
285
- return o.forEach((c) => {
290
+ return s.forEach((c) => {
286
291
  l.names[c] = !0;
287
292
  }), l.subscribers.push(i), {
288
293
  unregistry() {
@@ -290,44 +295,47 @@ const D = P({}), B = (n) => {
290
295
  }
291
296
  };
292
297
  },
293
- onChange(o, u) {
294
- const i = this.getForm(o), c = !L(u, i.startValue);
295
- i.isDirty !== c && g(o, c), i.isDirty = c, m?.({ name: o, value: u }), (i.error || d.isSubmitted) && (i.error = i.validate(u) || null), i.value = u, i.rerender(), i.subscribers.forEach(({ callback: b }) => {
296
- b();
298
+ onChange(s, u) {
299
+ const i = this.getForm(s), c = !L(u, i.startValue);
300
+ i.isDirty !== c && g(s, c), i.isDirty = c, x?.({ name: s, value: u }), (i.error || d.isSubmitted) && (i.error = i.validate(u) || null), i.value = u, i.rerender(), i.subscribers.forEach(({ callback: F }) => {
301
+ F();
297
302
  });
298
303
  }
299
304
  };
300
305
  }, Q = (n, r) => {
301
306
  const e = T(null);
302
307
  e.current === null && (e.current = H(n, r));
303
- const s = e.current;
308
+ const o = e.current;
304
309
  return p(() => {
305
310
  e.current && (e.current.submitRef.onSubmit = r.onSubmit);
306
311
  }, [r.onSubmit]), {
307
- manager: s,
312
+ manager: o,
308
313
  useValue: (t) => B(t),
309
314
  reset: (t, f = {}) => {
310
- s.reset(t, f);
315
+ o.reset(t, f);
316
+ },
317
+ setAsDefault: () => {
318
+ o.setAsDefault();
311
319
  },
312
320
  setFocus: (t) => {
313
- s.setFocus(t);
321
+ o.setFocus(t);
314
322
  },
315
323
  setError: (t, f) => {
316
- s.setError(t, f);
324
+ o.setError(t, f);
317
325
  },
318
326
  setValue: (t, f) => {
319
- s.setValue(t, f);
327
+ o.setValue(t, f);
320
328
  },
321
- getValues: () => s.getValues(),
329
+ getValues: () => o.getValues(),
322
330
  handleSubmit: async () => {
323
- await s.handleSubmit();
331
+ await o.handleSubmit();
324
332
  }
325
333
  };
326
334
  }, U = ({ manager: n }) => (A(() => {
327
335
  n.activate();
328
336
  }, []), p(() => () => {
329
337
  n.disactivate();
330
- }, []), /* @__PURE__ */ v(D.Provider, { value: n, children: /* @__PURE__ */ v(E, { scheme: n.scheme, path: [] }) })), S = (n) => {
338
+ }, []), /* @__PURE__ */ h(D.Provider, { value: n, children: /* @__PURE__ */ h(C, { scheme: n.scheme, path: [] }) })), S = (n) => {
331
339
  try {
332
340
  n();
333
341
  } catch (r) {
@@ -342,26 +350,26 @@ const D = P({}), B = (n) => {
342
350
  };
343
351
  }
344
352
  }, W = (n) => (r, e) => {
345
- const s = n.getRequireCheck(e), { $rules: t = {}, ...f } = e, { validate: h, required: m } = t;
353
+ const o = n.getRequireCheck(e), { $rules: t = {}, ...f } = e, { validate: b, required: x } = t;
346
354
  return {
347
355
  type: "form",
348
356
  name: r,
349
357
  defaultValue: n.defaultValue,
350
358
  Form: n.getForm(f),
351
359
  validate: (y) => {
352
- if (m) {
353
- const F = S(() => s(y));
354
- if (F)
355
- return F;
356
- if (h) {
357
- const d = S(() => h(y));
360
+ if (x) {
361
+ const v = S(() => o(y));
362
+ if (v)
363
+ return v;
364
+ if (b) {
365
+ const d = S(() => b(y));
358
366
  if (d)
359
367
  return d;
360
368
  }
361
369
  return;
362
370
  }
363
- if (h && !S(() => s(y))) {
364
- const d = S(() => h(y));
371
+ if (b && !S(() => o(y))) {
372
+ const d = S(() => b(y));
365
373
  if (d)
366
374
  return d;
367
375
  }
@@ -376,7 +384,7 @@ const D = P({}), B = (n) => {
376
384
  getController: r
377
385
  }) => ({
378
386
  type: "extra",
379
- items: n((e) => (s) => ({ type: "registry", name: e, getForm: s })),
387
+ items: n((e) => (o) => ({ type: "registry", name: e, getForm: o })),
380
388
  getController: r
381
389
  }), Z = (n) => (...r) => ({
382
390
  type: "context",
@@ -44,6 +44,7 @@ export interface FormManager<Values, FlattenValues, ClonedValues> {
44
44
  setValue: <K extends keyof FlattenValues>(name: K, value: FlattenValues[K]) => void;
45
45
  setError: SetError<FlattenValues>;
46
46
  reset: (v: DeepPartial<ClonedValues>, options: ResetOptions) => void;
47
+ setAsDefault: () => void;
47
48
  getValues: () => DeepPartial<ClonedValues>;
48
49
  }
49
50
  export declare const createFormManager: <Values extends FieldValues, Flatten, Cloned>(scheme: SchemeItems.All[], options: MainOptions<Values, Flatten, Cloned>) => FormManager<Values, Flatten, Cloned>;
package/dist/useForm.d.ts CHANGED
@@ -39,6 +39,7 @@ declare const useDynamicForm: (scheme: SchemeItems.All[], opts: MainOptions<Fiel
39
39
  reset: (values: {
40
40
  [x: string]: any;
41
41
  }, options?: ResetOptions) => void;
42
+ setAsDefault: () => void;
42
43
  setFocus: (name: string) => void;
43
44
  setError: (name: string, error: {
44
45
  message: string;
@@ -53,6 +54,7 @@ declare const useForm: <Items extends SchemeItems.All[], Values extends ExtractV
53
54
  manager: FormManager<Values, FlattenValues, Cloned>;
54
55
  useValue: <K extends keyof FlattenValues>(name: K) => FlattenValues[K];
55
56
  reset: (values: DeepPartial<Cloned>, options?: ResetOptions) => void;
57
+ setAsDefault: () => void;
56
58
  setFocus: (name: keyof FlattenValues) => void;
57
59
  setError: (name: keyof FlattenValues, error: {
58
60
  message: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@companix/formkit",
3
- "version": "0.0.14",
3
+ "version": "0.0.16",
4
4
  "module": "./dist/bundle.es.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "type": "module",