@companix/formkit 0.0.17 → 0.0.18

package/dist/bundle.es.js

@@ -1,34 +1,34 @@
-import { jsx as b, Fragment as j, jsxs as M } from "react/jsx-runtime";
-import { createContext as P, useState as w, useContext as R, useMemo as p, useEffect as S, useCallback as A, useRef as T } from "react";
+import { jsx as h, Fragment as j, jsxs as B } from "react/jsx-runtime";
+import { createContext as M, useState as w, useContext as R, useMemo as p, useEffect as S, useCallback as A, useRef as P } from "react";
 import L from "fast-deep-equal";
-const D = P({}), q = (o) => {
+const D = M({}), q = (n) => {
   const [, e] = w([]), r = R(D);
   if (!r)
-    throw new Error("useValue should be used in FormContext");
-  const n = p(() => {
-    const t = r.getForm(o);
+    throw new Error("useValue cannot be used outside Form context");
+  const s = p(() => {
+    const t = r.getForm(n);
     if (!t)
-      throw new Error(`form with name "${o}" doesnt exist in form`);
+      throw new Error(`form with name "${n}" doesnt exist in form`);
     return t;
-  }, [r, o]);
+  }, [r, n]);
   return S(() => {
-    const { unsubscribe: t } = r.subscribeToForm(o, () => {
+    const t = r.subscribeToForm(n, () => {
       e([]);
     });
     return () => {
       t();
     };
-  }, []), n.value;
-}, O = () => (o) => q(o), N = ({ canActivate: o, name: e, children: r }) => {
-  const n = q(e);
-  return o(n) ? /* @__PURE__ */ b(j, { children: r }) : null;
-}, U = ({ item: { Form: o }, name: e }) => {
-  const [, r] = w([]), n = R(D), { unregistry: t } = p(() => n.registry(e, () => {
+  }, []), s.value;
+}, O = () => (n) => q(n), N = ({ canActivate: n, name: e, children: r }) => {
+  const s = q(e);
+  return n(s) ? /* @__PURE__ */ h(j, { children: r }) : null;
+}, U = ({ item: { Form: n }, name: e }) => {
+  const [, r] = w([]), s = R(D), { unregistry: t } = p(() => s.registry(e, () => {
     r([]);
   }), []), f = A(
     (y) => {
       if (y && y.focus) {
-        const v = n.getForm(e);
+        const v = s.getForm(e);
         v.focus = () => {
           y.focus();
         };
@@ -39,41 +39,41 @@ const D = P({}), q = (o) => {
   S(() => () => {
     t();
   }, []);
-  const { value: h, error: x } = n.getForm(e);
-  return /* @__PURE__ */ b(
-    o,
+  const { value: g, error: m } = s.getForm(e);
+  return /* @__PURE__ */ h(
+    n,
     {
       field: {
-        value: h,
+        value: g,
         onChange: (y) => {
-          n.onChange(e, y);
+          s.onChange(e, y);
         },
         onBlur: () => {
         },
         ref: f
       },
       isDirty: !1,
-      error: x,
-      disabled: n.disabled
+      error: m,
+      disabled: s.disabled
     }
   );
-}, z = ({ item: o, path: e }) => {
-  const { getController: r, items: n } = o, t = R(D), f = p(() => {
+}, z = ({ item: n, path: e }) => {
+  const { getController: r, items: s } = n, t = R(D), f = p(() => {
     const l = {};
-    return n.forEach(({ name: g, getForm: s }) => {
-      l[g] = s(g, () => a(g));
+    return s.forEach(({ name: b, getForm: o }) => {
+      l[b] = o(b, () => a(b));
     }), l;
-  }, []), h = A(() => {
+  }, []), g = A(() => {
     const l = [];
-    return n.forEach(({ name: g }) => {
-      t.getForm([...e, g].join(".")).value !== void 0 && l.push(g);
+    return s.forEach(({ name: b }) => {
+      t.getForm([...e, b].join(".")).value !== void 0 && l.push(b);
     }), l;
-  }, []), x = p(() => h(), []), [y, v] = w(x);
+  }, []), m = p(() => g(), []), [y, v] = w(m);
   S(() => {
     const { unregistry: l } = t.registryExtraForm(
-      n.map(({ name: g }) => [...e, g].join(".")),
+      s.map(({ name: b }) => [...e, b].join(".")),
       () => {
-        v(h());
+        v(g());
       }
     );
     return () => {
@@ -82,92 +82,92 @@ const D = P({}), q = (o) => {
   }, []);
   const d = A(
     (l) => {
-      f[l] && !y.includes(l) && v((g) => [...g, l]);
+      f[l] && !y.includes(l) && v((b) => [...b, l]);
     },
     [y]
   ), a = A((l) => {
-    v((g) => g.filter((s) => s !== l));
+    v((b) => b.filter((o) => o !== l));
   }, []);
-  return /* @__PURE__ */ M(j, { children: [
+  return /* @__PURE__ */ B(j, { children: [
     y.map((l) => {
-      const g = f[l];
-      return /* @__PURE__ */ b(C, { path: e, scheme: [g] }, `param-form--${l}`);
+      const b = f[l];
+      return /* @__PURE__ */ h(C, { path: e, scheme: [b] }, `param-form--${l}`);
     }),
     r(d, y)
   ] });
-}, 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(
+}, C = ({ scheme: n, path: e }) => /* @__PURE__ */ h(j, { children: n.map((r, s) => r.type === "layout" ? /* @__PURE__ */ h(r.Layout, { children: /* @__PURE__ */ h(C, { path: e, scheme: r.childs }) }, `layout-form--${s}-${e.length}`) : r.type === "context" ? /* @__PURE__ */ h(
   C,
   {
     path: [...e, r.context],
     scheme: r.childs
   },
-  `context-form--${n}-${r.context}-${e.length}`
-) : r.type === "condition" ? /* @__PURE__ */ b(
+  `context-form--${s}-${r.context}-${e.length}`
+) : r.type === "condition" ? /* @__PURE__ */ h(
   N,
   {
     name: r.depended,
     canActivate: r.canActivate,
-    children: /* @__PURE__ */ b(C, { path: e, scheme: r.childs })
+    children: /* @__PURE__ */ h(C, { path: e, scheme: r.childs })
   },
-  `condition--${n}-${r.depended}-${e.length}`
-) : r.type === "extra" ? /* @__PURE__ */ b(z, { path: e, item: r }, `partial-item--${n}-${e.length}`) : /* @__PURE__ */ b(
+  `condition--${s}-${r.depended}-${e.length}`
+) : r.type === "extra" ? /* @__PURE__ */ h(z, { path: e, item: r }, `partial-item--${s}-${e.length}`) : /* @__PURE__ */ h(
   U,
   {
     name: [...e, r.name].join("."),
     item: r
   },
-  `form-item--${n}-${r.name}-${e.length}`
-)) }), V = (o, e, r, n) => {
-  o.forEach((t) => {
-    if (t.type === "form" && n(t, [...e, t.name].join("."), r[t.name]), t.type === "context") {
-      V(t.childs, [...e, t.context], r[t.context] ?? {}, n);
+  `form-item--${s}-${r.name}-${e.length}`
+)) }), V = (n, e, r, s) => {
+  n.forEach((t) => {
+    if (t.type === "form" && s(t, [...e, t.name].join("."), r[t.name]), t.type === "context") {
+      V(t.childs, [...e, t.context], r[t.context] ?? {}, s);
       return;
     }
     if (t.type === "layout" || t.type === "condition") {
-      V(t.childs, e, r, n);
+      V(t.childs, e, r, s);
       return;
     }
-    t.type === "extra" && t.items.forEach(({ getForm: f, name: h }) => {
-      V([f(h, () => {
-      })], e, r, n);
+    t.type === "extra" && t.items.forEach(({ getForm: f, name: g }) => {
+      V([f(g, () => {
+      })], e, r, s);
     });
   });
-}, E = ({ scheme: o, values: e, path: r, forms: n }) => {
-  o.forEach((t) => {
+}, E = ({ scheme: n, values: e, path: r, forms: s }) => {
+  n.forEach((t) => {
     if (t.type === "form") {
       const f = [...r, t.name].join(".");
-      n[f].value !== void 0 && (e[t.name] = n[f].value);
+      s[f].value !== void 0 && (e[t.name] = s[f].value);
     }
     if (t.type === "context") {
       e[t.context] = {}, E({
         scheme: t.childs,
         path: [...r, t.context],
         values: e[t.context],
-        forms: n
+        forms: s
       });
       return;
     }
     if (t.type === "layout") {
-      E({ scheme: t.childs, path: r, values: e, forms: n });
+      E({ scheme: t.childs, path: r, values: e, forms: s });
       return;
     }
     if (t.type === "condition") {
-      const f = n[t.depended]?.value;
+      const f = s[t.depended]?.value;
       if (t.canActivate(f)) {
-        E({ scheme: t.childs, path: r, values: e, forms: n });
+        E({ scheme: t.childs, path: r, values: e, forms: s });
         return;
       }
     }
-    t.type === "extra" && t.items.forEach(({ getForm: f, name: h }) => {
-      E({ scheme: [f(h, () => {
-      })], path: r, values: e, forms: n });
+    t.type === "extra" && t.items.forEach(({ getForm: f, name: g }) => {
+      E({ scheme: [f(g, () => {
+      })], path: r, values: e, forms: s });
     });
   });
-}, B = (o, e) => {
+}, T = (n, e) => {
   const r = {};
-  return E({ scheme: o, path: [], values: r, forms: e }), r;
-}, G = (o, e) => {
-  const { onSubmit: r, onEqual: n, disabled: t, onDirty: f, onFormDirty: h, onChangeEvent: x, defaultValues: y } = e, v = { onSubmit: r }, d = {
+  return E({ scheme: n, path: [], values: r, forms: e }), r;
+}, G = (n, e) => {
+  const { onSubmit: r, onEqual: s, disabled: t, onDirty: f, onFormDirty: g, onChangeEvent: m, defaultValues: y } = e, v = { onSubmit: r }, d = {
     isActive: !1,
     isSubmitted: !1,
     dirtyCount: 0
@@ -175,28 +175,28 @@ const D = P({}), q = (o) => {
     subscribers: [],
     names: {}
   };
-  V(o, [], y ?? {}, (s, u, i) => {
+  V(n, [], y ?? {}, (o, u, i) => {
     a[u] = {
       error: null,
       isDirty: !1,
       value: i,
       // текущее (динамическое) состояние поля. Значение равно переданному дефолтному, либо: определяется как дефолтное значение компонента формы в момент его монтирования, а до этого - undefined.
-      startValue: i ?? s.defaultValue,
+      startValue: i ?? o.defaultValue,
       // начальное (стартовое) значение (равно переданному дефолтному, либо значению формы по умолчанию). Исходя из сравнения текущего значения со стартовым, можно понять, модифицированно ли поле
-      defaultValue: s.defaultValue,
+      defaultValue: o.defaultValue,
       // дефолтное значение компонента формы
       rerender: () => {
       },
       subscribers: [],
-      validate: s.validate
+      validate: o.validate
     };
   });
-  const g = (s, u) => {
-    f?.({ name: s, isDirty: u }), u && d.dirtyCount === 0 && h?.(!0), !u && d.dirtyCount === 1 && h?.(!1), d.dirtyCount += u ? 1 : -1;
+  const b = (o, u) => {
+    f?.({ name: o, isDirty: u }), u && d.dirtyCount === 0 && g?.(!0), !u && d.dirtyCount === 1 && g?.(!1), d.dirtyCount += u ? 1 : -1;
   };
   return {
     submitRef: v,
-    scheme: o,
+    scheme: n,
     disabled: t,
     activate() {
       d.isActive = !0;
@@ -204,98 +204,96 @@ const D = P({}), q = (o) => {
     disactivate() {
       d.isActive = !1;
     },
-    setError(s, u) {
-      const i = this.getForm(s);
+    setError(o, u) {
+      const i = this.getForm(o);
       i && (i.error = {
         error: !0,
         messages: [u.message]
       }, i.rerender());
     },
-    setFocus(s) {
-      const u = this.getForm(s);
+    setFocus(o) {
+      const u = this.getForm(o);
       u && u.focus && u.focus();
     },
-    setValue(s, u) {
-      const i = this.getForm(s);
-      i && i.value !== u && this.onChange(s, u);
+    setValue(o, u) {
+      const i = this.getForm(o);
+      i && i.value !== u && this.onChange(o, u);
     },
     getValues() {
-      return B(o, a);
+      return T(n, a);
     },
     async handleSubmit() {
       if (t)
         return;
       d.isSubmitted = !0;
-      let s = !1, u = !1;
+      let o = !1, u = !1;
       for (const i in a) {
         const c = a[i];
         if (c.value !== void 0) {
           const F = c.validate(c.value);
-          F && (u = !0, c.error = F, c.rerender(), !s && c.focus && (c.focus(), s = !0));
+          F && (u = !0, c.error = F, c.rerender(), !o && c.focus && (c.focus(), o = !0));
         }
       }
       if (!u) {
         if (d.dirtyCount === 0) {
-          n?.();
+          s?.();
           return;
         }
-        const i = B(o, a);
+        const i = T(n, a);
         await v.onSubmit(i, {
           setError: (c, F) => {
-            const m = this.getForm(c);
-            m.error = {
+            const x = this.getForm(c);
+            x.error = {
               error: !0,
               messages: [F.message]
-            }, m.rerender();
+            }, x.rerender();
           }
         });
       }
     },
-    reset(s, { asDirty: u }) {
-      V(o, [], s, (i, c, F) => {
+    reset(o, { asDirty: u }) {
+      V(n, [], o, (i, c, F) => {
         if (F === void 0 && a[c].value === void 0)
           return;
         if (l.names[c] && F === void 0) {
           a[c].value = void 0;
           return;
         }
-        const m = F ?? i.defaultValue;
-        u || (a[c].startValue = m, a[c].isDirty = !1), a[c].value !== m && this.onChange(c, m);
+        const x = F ?? i.defaultValue;
+        u || (a[c].startValue = x, a[c].isDirty = !1), a[c].value !== x && this.onChange(c, x);
       }), u || (d.dirtyCount = 0, d.isSubmitted = !1), l.subscribers.forEach(({ visualizeEvalueatedForms: i }) => {
         i();
       });
     },
     setAsDefault() {
-      V(o, [], {}, ({}, s) => {
-        a[s].startValue = a[s].value, a[s].isDirty = !1;
+      V(n, [], {}, ({}, o) => {
+        a[o].startValue = a[o].value, a[o].isDirty = !1;
       }), d.dirtyCount = 0, d.isSubmitted = !1;
     },
-    registry(s, u) {
-      return a[s].rerender = u, a[s].value === void 0 && (a[s].value = a[s].defaultValue), {
+    registry(o, u) {
+      return a[o].rerender = u, a[o].value === void 0 && (a[o].value = a[o].defaultValue), {
         unregistry() {
-          if (a[s].rerender = () => {
-          }, a[s].focus = void 0, d.isActive) {
-            a[s].value = void 0;
-            const i = !L(a[s].startValue, a[s].defaultValue);
-            a[s].isDirty !== i && g(s, i), a[s].isDirty = i;
+          if (a[o].rerender = () => {
+          }, a[o].focus = void 0, d.isActive) {
+            a[o].value = void 0;
+            const i = !L(a[o].startValue, a[o].defaultValue);
+            a[o].isDirty !== i && b(o, i), a[o].isDirty = i;
           }
         }
       };
     },
-    getForm(s) {
-      return a[s];
+    getForm(o) {
+      return a[o];
     },
-    subscribeToForm(s, u) {
-      const i = { callback: u }, c = this.getForm(s);
-      return c.subscribers.push(i), {
-        unsubscribe: () => {
-          c.subscribers = c.subscribers.filter((F) => F !== i);
-        }
+    subscribeToForm(o, u) {
+      const i = { callback: u }, c = this.getForm(o);
+      return c.subscribers.push(i), () => {
+        c.subscribers = c.subscribers.filter((F) => F !== i);
       };
     },
-    registryExtraForm(s, u) {
+    registryExtraForm(o, u) {
       const i = { visualizeEvalueatedForms: u };
-      return s.forEach((c) => {
+      return o.forEach((c) => {
         l.names[c] = !0;
       }), l.subscribers.push(i), {
         unregistry() {
@@ -303,49 +301,51 @@ const D = P({}), q = (o) => {
         }
       };
     },
-    onChange(s, u) {
-      const i = this.getForm(s), c = !L(u, i.startValue);
-      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 }) => {
-        F();
+    onChange(o, u) {
+      const i = this.getForm(o), c = !L(u, i.startValue);
+      i.isDirty !== c && b(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: F }) => {
+        F(u);
       });
     }
   };
-}, Q = (o, e) => {
-  const r = T(null);
-  r.current === null && (r.current = G(o, e));
-  const n = r.current;
+}, Q = (n, e) => {
+  const r = P(null);
+  r.current === null && (r.current = G(n, e));
+  const s = r.current;
   return S(() => {
     r.current && (r.current.submitRef.onSubmit = e.onSubmit);
   }, [e.onSubmit]), {
-    manager: n,
+    manager: s,
     useValue: (t) => q(t),
     reset: (t, f = {}) => {
-      n.reset(t, f);
+      s.reset(t, f);
     },
     setAsDefault: () => {
-      n.setAsDefault();
+      s.setAsDefault();
     },
     setFocus: (t) => {
-      n.setFocus(t);
+      s.setFocus(t);
     },
     setError: (t, f) => {
-      n.setError(t, f);
+      s.setError(t, f);
     },
     setValue: (t, f) => {
-      n.setValue(t, f);
+      s.setValue(t, f);
     },
-    getValues: () => n.getValues(),
+    getValues: () => s.getValues(),
     handleSubmit: async () => {
-      await n.handleSubmit();
-    }
+      await s.handleSubmit();
+    },
+    // prettier-ignore
+    subscribe: (t, f) => s.subscribeToForm(t, f)
   };
-}, W = ({ manager: o }) => (p(() => {
-  o.activate();
+}, W = ({ manager: n }) => (p(() => {
+  n.activate();
 }, []), S(() => () => {
-  o.disactivate();
-}, []), /* @__PURE__ */ b(D.Provider, { value: o, children: /* @__PURE__ */ b(C, { scheme: o.scheme, path: [] }) })), $ = (o) => {
+  n.disactivate();
+}, []), /* @__PURE__ */ h(D.Provider, { value: n, children: /* @__PURE__ */ h(C, { scheme: n.scheme, path: [] }) })), $ = (n) => {
   try {
-    o();
+    n();
   } catch (e) {
     return e && typeof e == "string" ? {
       error: !0,
@@ -357,50 +357,50 @@ const D = P({}), q = (o) => {
       error: !0
     };
   }
-}, X = (o) => (e, r) => {
-  const n = o.getRequireCheck(r), { $rules: t = {}, ...f } = r, { validate: h, required: x } = t;
+}, X = (n) => (e, r) => {
+  const s = n.getRequireCheck(r), { $rules: t = {}, ...f } = r, { validate: g, required: m } = t;
   return {
     type: "form",
     name: e,
-    defaultValue: o.defaultValue,
-    Form: o.getForm(f),
+    defaultValue: n.defaultValue,
+    Form: n.getForm(f),
     validate: (y) => {
-      if (x) {
-        const v = $(() => n(y));
+      if (m) {
+        const v = $(() => s(y));
         if (v)
           return v;
-        if (h) {
-          const d = $(() => h(y));
+        if (g) {
+          const d = $(() => g(y));
           if (d)
             return d;
         }
         return;
       }
-      if (h && !$(() => n(y))) {
-        const d = $(() => h(y));
+      if (g && !$(() => s(y))) {
+        const d = $(() => g(y));
         if (d)
           return d;
       }
     }
   };
-}, Y = (o) => (e) => (...r) => ({
+}, Y = (n) => (e) => (...r) => ({
   type: "layout",
-  Layout: o(e),
+  Layout: n(e),
   childs: r
 }), Z = ({
-  getItems: o,
+  getItems: n,
   getController: e
 }) => ({
   type: "extra",
-  items: o((r) => (n) => ({ type: "registry", name: r, getForm: n })),
+  items: n((r) => (s) => ({ type: "registry", name: r, getForm: s })),
   getController: e
-}), _ = (o) => (...e) => ({
+}), _ = (n) => (...e) => ({
   type: "context",
-  context: o,
+  context: n,
   childs: e
-}), k = (o, e) => (...r) => ({
+}), k = (n, e) => (...r) => ({
   type: "condition",
-  depended: o,
+  depended: n,
   canActivate: e.canActivate,
   childs: r
 });

package/dist/manager/manager.d.ts

@@ -11,7 +11,7 @@ interface FormItem {
     focus?: () => void;
     validate: (value: any) => FieldError | void;
     subscribers: {
-        callback: () => void;
+        callback: (value: any) => void;
     }[];
 }
 export interface Forms {
@@ -32,9 +32,7 @@ export interface FormManager<Values, FlattenValues, ClonedValues> {
     registry: (name: string, callback: () => void) => {
         unregistry: () => void;
     };
-    subscribeToForm: (name: string, callback: () => void) => {
-        unsubscribe: () => void;
-    };
+    subscribeToForm: <K extends keyof FlattenValues>(name: K & string, callback: (value: FlattenValues[K]) => void) => () => void;
     registryExtraForm: (names: string[], callback: () => void) => {
         unregistry: () => void;
     };

package/dist/useForm.d.ts

@@ -49,6 +49,7 @@ declare const useDynamicForm: (scheme: SchemeItems.All[], opts: MainOptions<Fiel
         [x: string]: any;
     };
     handleSubmit: () => Promise<void>;
+    subscribe: <K extends string>(name: K, callback: (value: any) => void) => () => void;
 };
 declare const useForm: <Items extends SchemeItems.All[], Values extends ExtractValues<Items[number]>, FlattenValues extends ExtractFlatValues<Items[number]>, Cloned extends Copy<Values>>(scheme: Items, opts: MainOptions<Values, FlattenValues, Cloned>) => {
     manager: FormManager<Values, FlattenValues, Cloned>;
@@ -62,6 +63,7 @@ declare const useForm: <Items extends SchemeItems.All[], Values extends ExtractV
     setValue: <K extends keyof FlattenValues>(name: K, value: FlattenValues[K]) => void;
     getValues: () => DeepPartial<Cloned>;
     handleSubmit: () => Promise<void>;
+    subscribe: <K extends keyof FlattenValues>(name: K & string, callback: (value: FlattenValues[K]) => void) => () => void;
 };
 interface Props {
     manager: FormManager<any, any, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companix/formkit",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "module": "./dist/bundle.es.js",
   "types": "./dist/index.d.ts",
   "type": "module",