@companix/formkit 0.0.15 → 0.0.17

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,44 +1,52 @@
1
- import { jsx as h, Fragment as j, jsxs as M } from "react/jsx-runtime";
2
- import { createContext as P, useState as R, useContext as q, useEffect as p, useMemo as A, useCallback as $, useRef as T } from "react";
1
+ import { jsx as b, Fragment as j, jsxs as M } from "react/jsx-runtime";
2
+ import { createContext as P, useState as w, useContext as R, useMemo as p, useEffect as S, useCallback as A, useRef as T } from "react";
3
3
  import L from "fast-deep-equal";
4
- const D = P({}), B = (n) => {
5
- const [, r] = R([]), e = q(D), o = e.getForm(n);
6
- return p(() => {
7
- const { unsubscribe: t } = e.subscribeToForm(n, () => {
8
- r([]);
4
+ const D = P({}), q = (o) => {
5
+ const [, e] = w([]), r = R(D);
6
+ if (!r)
7
+ throw new Error("useValue should be used in FormContext");
8
+ const n = p(() => {
9
+ const t = r.getForm(o);
10
+ if (!t)
11
+ throw new Error(`form with name "${o}" doesnt exist in form`);
12
+ return t;
13
+ }, [r, o]);
14
+ return S(() => {
15
+ const { unsubscribe: t } = r.subscribeToForm(o, () => {
16
+ e([]);
9
17
  });
10
18
  return () => {
11
19
  t();
12
20
  };
13
- }, []), o?.value;
14
- }, N = ({ canActivate: n, name: r, children: e }) => {
15
- const o = B(r);
16
- return n(o) ? /* @__PURE__ */ h(j, { children: e }) : null;
17
- }, z = ({ item: { Form: n }, name: r }) => {
18
- const [, e] = R([]), o = q(D), { unregistry: t } = A(() => o.registry(r, () => {
19
- e([]);
20
- }), []), f = $(
21
+ }, []), n.value;
22
+ }, O = () => (o) => q(o), N = ({ canActivate: o, name: e, children: r }) => {
23
+ const n = q(e);
24
+ return o(n) ? /* @__PURE__ */ b(j, { children: r }) : null;
25
+ }, U = ({ item: { Form: o }, name: e }) => {
26
+ const [, r] = w([]), n = R(D), { unregistry: t } = p(() => n.registry(e, () => {
27
+ r([]);
28
+ }), []), f = A(
21
29
  (y) => {
22
30
  if (y && y.focus) {
23
- const v = o.getForm(r);
31
+ const v = n.getForm(e);
24
32
  v.focus = () => {
25
33
  y.focus();
26
34
  };
27
35
  }
28
36
  },
29
- [r]
37
+ [e]
30
38
  );
31
- p(() => () => {
39
+ S(() => () => {
32
40
  t();
33
41
  }, []);
34
- const { value: b, error: x } = o.getForm(r);
35
- return /* @__PURE__ */ h(
36
- n,
42
+ const { value: h, error: x } = n.getForm(e);
43
+ return /* @__PURE__ */ b(
44
+ o,
37
45
  {
38
46
  field: {
39
- value: b,
47
+ value: h,
40
48
  onChange: (y) => {
41
- o.onChange(r, y);
49
+ n.onChange(e, y);
42
50
  },
43
51
  onBlur: () => {
44
52
  },
@@ -46,120 +54,120 @@ const D = P({}), B = (n) => {
46
54
  },
47
55
  isDirty: !1,
48
56
  error: x,
49
- disabled: o.disabled
57
+ disabled: n.disabled
50
58
  }
51
59
  );
52
- }, G = ({ item: n, path: r }) => {
53
- const { getController: e, items: o } = n, t = q(D), f = A(() => {
60
+ }, z = ({ item: o, path: e }) => {
61
+ const { getController: r, items: n } = o, t = R(D), f = p(() => {
54
62
  const l = {};
55
- return o.forEach(({ name: g, getForm: s }) => {
63
+ return n.forEach(({ name: g, getForm: s }) => {
56
64
  l[g] = s(g, () => a(g));
57
65
  }), l;
58
- }, []), b = $(() => {
66
+ }, []), h = A(() => {
59
67
  const l = [];
60
- return o.forEach(({ name: g }) => {
61
- t.getForm([...r, g].join(".")).value !== void 0 && l.push(g);
68
+ return n.forEach(({ name: g }) => {
69
+ t.getForm([...e, g].join(".")).value !== void 0 && l.push(g);
62
70
  }), l;
63
- }, []), x = A(() => b(), []), [y, v] = R(x);
64
- p(() => {
71
+ }, []), x = p(() => h(), []), [y, v] = w(x);
72
+ S(() => {
65
73
  const { unregistry: l } = t.registryExtraForm(
66
- o.map(({ name: g }) => [...r, g].join(".")),
74
+ n.map(({ name: g }) => [...e, g].join(".")),
67
75
  () => {
68
- v(b());
76
+ v(h());
69
77
  }
70
78
  );
71
79
  return () => {
72
80
  l();
73
81
  };
74
82
  }, []);
75
- const d = $(
83
+ const d = A(
76
84
  (l) => {
77
85
  f[l] && !y.includes(l) && v((g) => [...g, l]);
78
86
  },
79
87
  [y]
80
- ), a = $((l) => {
88
+ ), a = A((l) => {
81
89
  v((g) => g.filter((s) => s !== l));
82
90
  }, []);
83
91
  return /* @__PURE__ */ M(j, { children: [
84
92
  y.map((l) => {
85
93
  const g = f[l];
86
- return /* @__PURE__ */ h(C, { path: r, scheme: [g] }, `param-form--${l}`);
94
+ return /* @__PURE__ */ b(C, { path: e, scheme: [g] }, `param-form--${l}`);
87
95
  }),
88
- e(d, y)
96
+ r(d, y)
89
97
  ] });
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(
98
+ }, C = ({ scheme: o, path: e }) => /* @__PURE__ */ b(j, { children: o.map((r, n) => r.type === "layout" ? /* @__PURE__ */ b(r.Layout, { children: /* @__PURE__ */ b(C, { path: e, scheme: r.childs }) }, `layout-form--${n}-${e.length}`) : r.type === "context" ? /* @__PURE__ */ b(
91
99
  C,
92
100
  {
93
- path: [...r, e.context],
94
- scheme: e.childs
101
+ path: [...e, r.context],
102
+ scheme: r.childs
95
103
  },
96
- `context-form--${o}-${e.context}-${r.length}`
97
- ) : e.type === "condition" ? /* @__PURE__ */ h(
104
+ `context-form--${n}-${r.context}-${e.length}`
105
+ ) : r.type === "condition" ? /* @__PURE__ */ b(
98
106
  N,
99
107
  {
100
- name: e.depended,
101
- canActivate: e.canActivate,
102
- children: /* @__PURE__ */ h(C, { path: r, scheme: e.childs })
108
+ name: r.depended,
109
+ canActivate: r.canActivate,
110
+ children: /* @__PURE__ */ b(C, { path: e, scheme: r.childs })
103
111
  },
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
- z,
112
+ `condition--${n}-${r.depended}-${e.length}`
113
+ ) : r.type === "extra" ? /* @__PURE__ */ b(z, { path: e, item: r }, `partial-item--${n}-${e.length}`) : /* @__PURE__ */ b(
114
+ U,
107
115
  {
108
- name: [...r, e.name].join("."),
109
- item: e
116
+ name: [...e, r.name].join("."),
117
+ item: r
110
118
  },
111
- `form-item--${o}-${e.name}-${r.length}`
112
- )) }), V = (n, r, e, o) => {
113
- n.forEach((t) => {
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);
119
+ `form-item--${n}-${r.name}-${e.length}`
120
+ )) }), V = (o, e, r, n) => {
121
+ o.forEach((t) => {
122
+ if (t.type === "form" && n(t, [...e, t.name].join("."), r[t.name]), t.type === "context") {
123
+ V(t.childs, [...e, t.context], r[t.context] ?? {}, n);
116
124
  return;
117
125
  }
118
126
  if (t.type === "layout" || t.type === "condition") {
119
- V(t.childs, r, e, o);
127
+ V(t.childs, e, r, n);
120
128
  return;
121
129
  }
122
- t.type === "extra" && t.items.forEach(({ getForm: f, name: b }) => {
123
- V([f(b, () => {
124
- })], r, e, o);
130
+ t.type === "extra" && t.items.forEach(({ getForm: f, name: h }) => {
131
+ V([f(h, () => {
132
+ })], e, r, n);
125
133
  });
126
134
  });
127
- }, E = ({ scheme: n, values: r, path: e, forms: o }) => {
128
- n.forEach((t) => {
135
+ }, E = ({ scheme: o, values: e, path: r, forms: n }) => {
136
+ o.forEach((t) => {
129
137
  if (t.type === "form") {
130
- const f = [...e, t.name].join(".");
131
- o[f].value !== void 0 && (r[t.name] = o[f].value);
138
+ const f = [...r, t.name].join(".");
139
+ n[f].value !== void 0 && (e[t.name] = n[f].value);
132
140
  }
133
141
  if (t.type === "context") {
134
- r[t.context] = {}, E({
142
+ e[t.context] = {}, E({
135
143
  scheme: t.childs,
136
- path: [...e, t.context],
137
- values: r[t.context],
138
- forms: o
144
+ path: [...r, t.context],
145
+ values: e[t.context],
146
+ forms: n
139
147
  });
140
148
  return;
141
149
  }
142
150
  if (t.type === "layout") {
143
- E({ scheme: t.childs, path: e, values: r, forms: o });
151
+ E({ scheme: t.childs, path: r, values: e, forms: n });
144
152
  return;
145
153
  }
146
154
  if (t.type === "condition") {
147
- const f = o[t.depended]?.value;
155
+ const f = n[t.depended]?.value;
148
156
  if (t.canActivate(f)) {
149
- E({ scheme: t.childs, path: e, values: r, forms: o });
157
+ E({ scheme: t.childs, path: r, values: e, forms: n });
150
158
  return;
151
159
  }
152
160
  }
153
- t.type === "extra" && t.items.forEach(({ getForm: f, name: b }) => {
154
- E({ scheme: [f(b, () => {
155
- })], path: e, values: r, forms: o });
161
+ t.type === "extra" && t.items.forEach(({ getForm: f, name: h }) => {
162
+ E({ scheme: [f(h, () => {
163
+ })], path: r, values: e, forms: n });
156
164
  });
157
165
  });
158
- }, w = (n, r) => {
159
- const e = {};
160
- return E({ scheme: n, path: [], values: e, forms: r }), e;
161
- }, H = (n, r) => {
162
- const { onSubmit: e, onEqual: o, disabled: t, onDirty: f, onFormDirty: b, onChangeEvent: x, defaultValues: y } = r, v = { onSubmit: e }, d = {
166
+ }, B = (o, e) => {
167
+ const r = {};
168
+ return E({ scheme: o, path: [], values: r, forms: e }), r;
169
+ }, G = (o, e) => {
170
+ const { onSubmit: r, onEqual: n, disabled: t, onDirty: f, onFormDirty: h, onChangeEvent: x, defaultValues: y } = e, v = { onSubmit: r }, d = {
163
171
  isActive: !1,
164
172
  isSubmitted: !1,
165
173
  dirtyCount: 0
@@ -167,7 +175,7 @@ const D = P({}), B = (n) => {
167
175
  subscribers: [],
168
176
  names: {}
169
177
  };
170
- V(n, [], y ?? {}, (s, u, i) => {
178
+ V(o, [], y ?? {}, (s, u, i) => {
171
179
  a[u] = {
172
180
  error: null,
173
181
  isDirty: !1,
@@ -184,11 +192,11 @@ const D = P({}), B = (n) => {
184
192
  };
185
193
  });
186
194
  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;
195
+ f?.({ name: s, isDirty: u }), u && d.dirtyCount === 0 && h?.(!0), !u && d.dirtyCount === 1 && h?.(!1), d.dirtyCount += u ? 1 : -1;
188
196
  };
189
197
  return {
190
198
  submitRef: v,
191
- scheme: n,
199
+ scheme: o,
192
200
  disabled: t,
193
201
  activate() {
194
202
  d.isActive = !0;
@@ -212,7 +220,7 @@ const D = P({}), B = (n) => {
212
220
  i && i.value !== u && this.onChange(s, u);
213
221
  },
214
222
  getValues() {
215
- return w(n, a);
223
+ return B(o, a);
216
224
  },
217
225
  async handleSubmit() {
218
226
  if (t)
@@ -228,10 +236,10 @@ const D = P({}), B = (n) => {
228
236
  }
229
237
  if (!u) {
230
238
  if (d.dirtyCount === 0) {
231
- o?.();
239
+ n?.();
232
240
  return;
233
241
  }
234
- const i = w(n, a);
242
+ const i = B(o, a);
235
243
  await v.onSubmit(i, {
236
244
  setError: (c, F) => {
237
245
  const m = this.getForm(c);
@@ -244,7 +252,7 @@ const D = P({}), B = (n) => {
244
252
  }
245
253
  },
246
254
  reset(s, { asDirty: u }) {
247
- V(n, [], s, (i, c, F) => {
255
+ V(o, [], s, (i, c, F) => {
248
256
  if (F === void 0 && a[c].value === void 0)
249
257
  return;
250
258
  if (l.names[c] && F === void 0) {
@@ -258,7 +266,7 @@ const D = P({}), B = (n) => {
258
266
  });
259
267
  },
260
268
  setAsDefault() {
261
- V(n, [], {}, ({}, s) => {
269
+ V(o, [], {}, ({}, s) => {
262
270
  a[s].startValue = a[s].value, a[s].isDirty = !1;
263
271
  }), d.dirtyCount = 0, d.isSubmitted = !1;
264
272
  },
@@ -302,103 +310,107 @@ const D = P({}), B = (n) => {
302
310
  });
303
311
  }
304
312
  };
305
- }, Q = (n, r) => {
306
- const e = T(null);
307
- e.current === null && (e.current = H(n, r));
308
- const o = e.current;
309
- return p(() => {
310
- e.current && (e.current.submitRef.onSubmit = r.onSubmit);
311
- }, [r.onSubmit]), {
312
- manager: o,
313
- useValue: (t) => B(t),
313
+ }, Q = (o, e) => {
314
+ const r = T(null);
315
+ r.current === null && (r.current = G(o, e));
316
+ const n = r.current;
317
+ return S(() => {
318
+ r.current && (r.current.submitRef.onSubmit = e.onSubmit);
319
+ }, [e.onSubmit]), {
320
+ manager: n,
321
+ useValue: (t) => q(t),
314
322
  reset: (t, f = {}) => {
315
- o.reset(t, f);
323
+ n.reset(t, f);
324
+ },
325
+ setAsDefault: () => {
326
+ n.setAsDefault();
316
327
  },
317
328
  setFocus: (t) => {
318
- o.setFocus(t);
329
+ n.setFocus(t);
319
330
  },
320
331
  setError: (t, f) => {
321
- o.setError(t, f);
332
+ n.setError(t, f);
322
333
  },
323
334
  setValue: (t, f) => {
324
- o.setValue(t, f);
335
+ n.setValue(t, f);
325
336
  },
326
- getValues: () => o.getValues(),
337
+ getValues: () => n.getValues(),
327
338
  handleSubmit: async () => {
328
- await o.handleSubmit();
339
+ await n.handleSubmit();
329
340
  }
330
341
  };
331
- }, U = ({ manager: n }) => (A(() => {
332
- n.activate();
333
- }, []), p(() => () => {
334
- n.disactivate();
335
- }, []), /* @__PURE__ */ h(D.Provider, { value: n, children: /* @__PURE__ */ h(C, { scheme: n.scheme, path: [] }) })), S = (n) => {
342
+ }, W = ({ manager: o }) => (p(() => {
343
+ o.activate();
344
+ }, []), S(() => () => {
345
+ o.disactivate();
346
+ }, []), /* @__PURE__ */ b(D.Provider, { value: o, children: /* @__PURE__ */ b(C, { scheme: o.scheme, path: [] }) })), $ = (o) => {
336
347
  try {
337
- n();
338
- } catch (r) {
339
- return r && typeof r == "string" ? {
348
+ o();
349
+ } catch (e) {
350
+ return e && typeof e == "string" ? {
340
351
  error: !0,
341
- messages: [r]
342
- } : r instanceof Array && r.every((e) => e && typeof e == "string") ? {
352
+ messages: [e]
353
+ } : e instanceof Array && e.every((r) => r && typeof r == "string") ? {
343
354
  error: !0,
344
- messages: r
355
+ messages: e
345
356
  } : {
346
357
  error: !0
347
358
  };
348
359
  }
349
- }, W = (n) => (r, e) => {
350
- const o = n.getRequireCheck(e), { $rules: t = {}, ...f } = e, { validate: b, required: x } = t;
360
+ }, X = (o) => (e, r) => {
361
+ const n = o.getRequireCheck(r), { $rules: t = {}, ...f } = r, { validate: h, required: x } = t;
351
362
  return {
352
363
  type: "form",
353
- name: r,
354
- defaultValue: n.defaultValue,
355
- Form: n.getForm(f),
364
+ name: e,
365
+ defaultValue: o.defaultValue,
366
+ Form: o.getForm(f),
356
367
  validate: (y) => {
357
368
  if (x) {
358
- const v = S(() => o(y));
369
+ const v = $(() => n(y));
359
370
  if (v)
360
371
  return v;
361
- if (b) {
362
- const d = S(() => b(y));
372
+ if (h) {
373
+ const d = $(() => h(y));
363
374
  if (d)
364
375
  return d;
365
376
  }
366
377
  return;
367
378
  }
368
- if (b && !S(() => o(y))) {
369
- const d = S(() => b(y));
379
+ if (h && !$(() => n(y))) {
380
+ const d = $(() => h(y));
370
381
  if (d)
371
382
  return d;
372
383
  }
373
384
  }
374
385
  };
375
- }, X = (n) => (r) => (...e) => ({
386
+ }, Y = (o) => (e) => (...r) => ({
376
387
  type: "layout",
377
- Layout: n(r),
378
- childs: e
379
- }), Y = ({
380
- getItems: n,
381
- getController: r
388
+ Layout: o(e),
389
+ childs: r
390
+ }), Z = ({
391
+ getItems: o,
392
+ getController: e
382
393
  }) => ({
383
394
  type: "extra",
384
- items: n((e) => (o) => ({ type: "registry", name: e, getForm: o })),
385
- getController: r
386
- }), Z = (n) => (...r) => ({
395
+ items: o((r) => (n) => ({ type: "registry", name: r, getForm: n })),
396
+ getController: e
397
+ }), _ = (o) => (...e) => ({
387
398
  type: "context",
388
- context: n,
389
- childs: r
390
- }), _ = (n, r) => (...e) => ({
391
- type: "condition",
392
- depended: n,
393
- canActivate: r.canActivate,
399
+ context: o,
394
400
  childs: e
401
+ }), k = (o, e) => (...r) => ({
402
+ type: "condition",
403
+ depended: o,
404
+ canActivate: e.canActivate,
405
+ childs: r
395
406
  });
396
407
  export {
397
- _ as Condition,
398
- Z as Context,
399
- U as FormLayout,
400
- Y as createExtraForm,
401
- W as createForm,
402
- X as createLayout,
408
+ k as Condition,
409
+ _ as Context,
410
+ W as FormLayout,
411
+ Z as createExtraForm,
412
+ X as createForm,
413
+ Y as createLayout,
414
+ O as createUseValue,
403
415
  Q as useForm
404
416
  };
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export { useForm, FormLayout } from './useForm';
2
+ export { createUseValue } from './useValue';
2
3
  export { createForm } from './core/builders/create-form';
3
4
  export { createLayout } from './core/builders/create-layout';
4
5
  export { createExtraForm } from './core/builders/create-extra-form';
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;
@@ -1 +1,4 @@
1
- export declare const useValue: (name: string) => any;
1
+ import { SchemeItems } from './core/types';
2
+ import { ExtractFlatValues } from './core/extract';
3
+ export declare const useValue: <T = any>(name: string) => T;
4
+ export declare const createUseValue: <Items extends SchemeItems.All[]>() => <FlattenValues extends ExtractFlatValues<Items[number]>, K extends keyof FlattenValues>(name: K & string) => FlattenValues[K];
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@companix/formkit",
3
- "version": "0.0.15",
3
+ "version": "0.0.17",
4
4
  "module": "./dist/bundle.es.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "type": "module",
7
- "author": "Pavel Victorov",
7
+ "author": "Pavel Victorov.",
8
8
  "files": [
9
9
  "dist"
10
10
  ],