@ea-lab/reactive-json 1.1.2 → 1.2.0

package/dist/component/action/ReactOnEvent.js

@@ -1,30 +1,50 @@
-import { jsx as C, Fragment as b } from "react/jsx-runtime";
-import { useContext as f, Children as l, Fragment as v, isValidElement as y, cloneElement as A } from "react";
-import { GlobalDataContext as E } from "../../engine/GlobalDataContext.js";
+import { jsx as d, Fragment as x } from "react/jsx-runtime";
+import { useContext as l, Children as f, Fragment as C, isValidElement as y, cloneElement as T } from "react";
+import { GlobalDataContext as A } from "../../engine/GlobalDataContext.js";
 import "../../jsonpath-B9kE9k9e.js";
 import "../../lodash-CYNxjS-I.js";
-import { TemplateContext as j } from "../../engine/TemplateContext.js";
+import { TemplateContext as E } from "../../engine/TemplateContext.js";
 import "../../engine/EventDispatcherContext.js";
 import "../../engine/EventDispatcherProvider.js";
 import "../../engine/PaginationContext.js";
 import "../../dnd-kit-sortable-tree.esm-Cz1RJyIg.js";
 import "../../index-NNBvIV0S.js";
-import { replaceEventPlaceholders as R } from "../../engine/utility/eventPlaceholderSystem.js";
+import { replaceEventPlaceholders as j } from "../../engine/utility/eventPlaceholderSystem.js";
 import "../../js-yaml-Bw0KO4XO.js";
 import "../../engine/ParsingDebugDisplay/ParsingDebugDisplay.js";
-const H = (p) => {
-  const s = f(E), g = f(j), e = s.plugins ?? {}, P = (e == null ? void 0 : e.reaction) ?? {}, { actionProps: F } = p, c = {};
-  for (const [o, a] of Object.entries(F))
+const H = (s) => {
+  const p = l(A), g = l(E), n = p.plugins ?? {}, b = (n == null ? void 0 : n.reaction) ?? {}, { actionProps: P } = s, c = {};
+  for (const [o, a] of Object.entries(P))
     c[o] = (t) => {
       let r = !0;
-      for (const n of a) {
-        if (!n)
+      for (const e of a) {
+        if (!e)
           continue;
-        const u = n.what && (P[n.what] ?? null);
+        const u = e.what && (b[e.what] ?? null);
         if (!u)
           continue;
-        const i = R(n, t);
-        if (u({ args: i, event: t, globalDataContext: s, templateContext: g }), i.stopPropagation === !0)
+        const i = j(e, t);
+        if (u({
+          args: i,
+          event: t,
+          eventData: {
+            // We copy the event data to make them available
+            // to asynchronous reaction functions.
+            // This is needed because React will reset the event object data
+            // to reuse it for other events (see pooling of events in React).
+            currentTarget: t.currentTarget,
+            bubbles: t.bubbles,
+            cancelable: t.cancelable,
+            composed: t.composed,
+            defaultPrevented: t.defaultPrevented,
+            isTrusted: t.isTrusted,
+            target: t.target,
+            timeStamp: t.timeStamp,
+            type: t.type
+          },
+          globalDataContext: p,
+          templateContext: g
+        }), i.stopPropagation === !0)
           break;
         r = i.stopPropagation ?? !0;
       }
@@ -33,13 +53,13 @@ const H = (p) => {
   const m = (o) => {
     if (!o)
       return o;
-    const a = l.toArray(o);
-    return l.map(a, (t) => {
+    const a = f.toArray(o);
+    return f.map(a, (t) => {
       var r;
-      return t.type === v ? m((r = t == null ? void 0 : t.props) == null ? void 0 : r.children) : typeof t != "object" || !y(t) ? t : A(t, c);
+      return t.type === C ? m((r = t == null ? void 0 : t.props) == null ? void 0 : r.children) : typeof t != "object" || !y(t) ? t : T(t, c);
     });
-  }, x = m(p.children);
-  return /* @__PURE__ */ C(b, { children: x });
+  }, F = m(s.children);
+  return /* @__PURE__ */ d(x, { children: F });
 };
 export {
   H as ReactOnEvent

package/dist/component/element/form/CheckBoxField.js

@@ -0,0 +1,84 @@
+import { jsxs as h, jsx as o, Fragment as V } from "react/jsx-runtime";
+import { useContext as I, useRef as w, useMemo as G } from "react";
+import { ActionDependant as S } from "../../../engine/Actions.js";
+import { useEvaluatedAttributes as f, evaluateTemplateValue as F } from "../../../engine/TemplateSystem.js";
+import { GlobalDataContext as _ } from "../../../engine/GlobalDataContext.js";
+import { TemplateContext as q } from "../../../engine/TemplateContext.js";
+import { propsDataLocationToPathAndValue as z } from "../../../engine/utility/formElementsCommon.js";
+import { View as J } from "../../../engine/View.js";
+const at = ({ props: t, datafield: R, path: A, currentData: m }) => {
+  const l = I(_), b = I(q), p = w(null), v = f(t.attributes), s = f(t.inputAttributes ?? []), y = f(t.labelAttributes ?? []), { formData: n, formDataPath: c } = z({
+    currentPath: A,
+    datafield: R,
+    dataLocation: t.dataLocation,
+    defaultValue: t.defaultFieldValue,
+    globalDataContext: l,
+    templateContext: b
+  });
+  let i;
+  if (t.dynamicOptions)
+    i = F({
+      valueToEvaluate: t.dynamicOptions,
+      globalDataContext: l,
+      templateContext: b
+    });
+  else if (t.options)
+    i = t.options;
+  else
+    return null;
+  if (!Array.isArray(i) || i.length === 0)
+    return null;
+  const g = t.controlType || "checkbox", x = t.multiple ?? i.length > 1, C = g === "radio", W = (r, e) => {
+    if (C)
+      l.updateData(e, c);
+    else if (x) {
+      const a = Array.isArray(n) ? n : [];
+      r.target.checked ? a.includes(e) || l.updateData([...a, e], c) : l.updateData(
+        a.filter((u) => u !== e),
+        c
+      );
+    } else
+      l.updateData(r.target.checked ? e : !1, c);
+  }, k = !!t.label, D = t.forceWrapper, P = D === !0 || D !== !1 && k, $ = G(() => s.id ? s.id : `checkbox-${Math.random().toString(36).substring(2, 9)}`, [s.id]), { id: K, ...j } = s, L = i.map((r, e) => {
+    const a = r.value, u = F({
+      valueToEvaluate: r.label,
+      globalDataContext: l,
+      templateContext: b
+    }), E = `${$}-${e}`;
+    let d = !1;
+    C ? d = n === a : x ? d = Array.isArray(n) && n.includes(a) : d = n === a || n === !0;
+    const B = f(r.attributes), H = {
+      type: g,
+      id: E,
+      checked: d,
+      onChange: (O) => W(O, a),
+      value: a,
+      ...j
+    }, M = {
+      htmlFor: E,
+      ...y
+    };
+    return /* @__PURE__ */ h("div", { ...B, children: [
+      /* @__PURE__ */ o("input", { ref: e === 0 ? p : null, ...H }),
+      u && /* @__PURE__ */ o("label", { ...M, style: { marginLeft: "0.5rem" }, children: u })
+    ] }, e);
+  }), T = k && /* @__PURE__ */ o("label", { ...y, children: /* @__PURE__ */ o(
+    J,
+    {
+      currentData: (m == null ? void 0 : m.label) ?? void 0,
+      datafield: "label",
+      path: A + ".label",
+      props: t.label
+    }
+  ) });
+  return /* @__PURE__ */ o(S, { ...t, attributesHolderRef: p, children: P ? /* @__PURE__ */ h("div", { ...v, children: [
+    T,
+    L
+  ] }) : /* @__PURE__ */ h(V, { children: [
+    T,
+    /* @__PURE__ */ o("div", { ...v, children: L })
+  ] }) });
+};
+export {
+  at as CheckBoxField
+};

package/dist/component/element/form/SelectField.js

@@ -0,0 +1,64 @@
+import { jsx as o, jsxs as g, Fragment as O } from "react/jsx-runtime";
+import { useContext as x, useRef as P, useMemo as R } from "react";
+import { ActionDependant as W } from "../../../engine/Actions.js";
+import { useEvaluatedAttributes as u, evaluateTemplateValue as V } from "../../../engine/TemplateSystem.js";
+import { GlobalDataContext as w } from "../../../engine/GlobalDataContext.js";
+import { TemplateContext as H } from "../../../engine/TemplateContext.js";
+import { propsDataLocationToPathAndValue as M } from "../../../engine/utility/formElementsCommon.js";
+import { View as B } from "../../../engine/View.js";
+const K = ({ props: t, datafield: C, path: c, currentData: r }) => {
+  const i = x(w), s = x(H), f = P(null), d = u(t.attributes), E = u(t.inputAttributes ?? []), L = u(t.labelAttributes ?? []), { formData: T, formDataPath: y } = M({
+    currentPath: c,
+    datafield: C,
+    dataLocation: t.dataLocation,
+    defaultValue: t.defaultFieldValue,
+    globalDataContext: i,
+    templateContext: s
+  }), D = (n) => {
+    let e = n.currentTarget.value;
+    e === "" && !t.allowEmptyStringAsValue ? e = void 0 : e === "true" ? e = !0 : e === "false" ? e = !1 : e === "null" && (e = null), i.updateData(e, y);
+  };
+  let l;
+  t.dynamicOptions ? l = V({
+    valueToEvaluate: t.dynamicOptions,
+    globalDataContext: i,
+    templateContext: s
+  }) : t.options ? l = t.options : l = [], Array.isArray(l) || (l = []);
+  const m = !!t.label, b = t.forceWrapper, v = b === !0 || b !== !1 && m, a = {
+    onChange: D,
+    value: T ?? "",
+    ...E
+  };
+  v || Object.assign(a, d);
+  const h = R(() => a.id ? a.id : `select-${Math.random().toString(36).substring(2, 9)}`, [a.id]);
+  a.id = h;
+  const F = {
+    htmlFor: h,
+    ...L
+  }, A = /* @__PURE__ */ o("select", { ref: f, ...a, children: l.length > 0 ? l.map((n, e) => {
+    const S = n.value ?? "", j = V({
+      valueToEvaluate: n.label,
+      globalDataContext: i,
+      templateContext: s
+    }) ?? "";
+    return /* @__PURE__ */ o("option", { value: S, children: j }, e);
+  }) : /* @__PURE__ */ o("option", { value: "", children: "No options available" }) }), p = m && /* @__PURE__ */ o("label", { ...F, children: /* @__PURE__ */ o(
+    B,
+    {
+      currentData: (r == null ? void 0 : r.label) ?? void 0,
+      datafield: "label",
+      path: c + ".label",
+      props: t.label
+    }
+  ) });
+  return /* @__PURE__ */ o(W, { ...t, attributesHolderRef: f, children: v ? /* @__PURE__ */ g("div", { ...d, children: [
+    p,
+    A
+  ] }) : /* @__PURE__ */ g(O, { children: [
+    p,
+    A
+  ] }) });
+};
+export {
+  K as SelectField
+};

package/dist/component/element/form/TextAreaField.js

@@ -0,0 +1,59 @@
+import { jsx as l, jsxs as x, Fragment as P } from "react/jsx-runtime";
+import { useContext as A, useRef as R, useMemo as j } from "react";
+import { ActionDependant as W } from "../../../engine/Actions.js";
+import { useEvaluatedAttributes as n, evaluateTemplateValue as v } from "../../../engine/TemplateSystem.js";
+import { GlobalDataContext as y } from "../../../engine/GlobalDataContext.js";
+import { TemplateContext as H } from "../../../engine/TemplateContext.js";
+import { propsDataLocationToPathAndValue as M } from "../../../engine/utility/formElementsCommon.js";
+import { View as B } from "../../../engine/View.js";
+const J = ({ props: t, datafield: p, path: i, currentData: o }) => {
+  const a = A(y), r = A(H), s = R(null), u = n(t.attributes), T = n(t.inputAttributes ?? []), g = n(t.labelAttributes ?? []), { formData: C, formDataPath: E } = M({
+    currentPath: i,
+    datafield: p,
+    dataLocation: t.dataLocation,
+    defaultValue: t.defaultFieldValue,
+    globalDataContext: a,
+    templateContext: r
+  }), L = (F) => {
+    a.updateData(F.currentTarget.value, E);
+  }, V = v({
+    valueToEvaluate: t.placeholder,
+    globalDataContext: a,
+    templateContext: r
+  }), w = v({
+    valueToEvaluate: t.rows,
+    globalDataContext: a,
+    templateContext: r
+  }), c = !!t.label, m = t.forceWrapper, d = m === !0 || m !== !1 && c, e = {
+    onChange: L,
+    placeholder: V,
+    rows: w ?? 3,
+    value: C ?? "",
+    ...T
+  };
+  d || Object.assign(e, u);
+  const b = j(() => e.id ? e.id : `textarea-${Math.random().toString(36).substring(2, 9)}`, [e.id]);
+  e.id = b;
+  const D = {
+    htmlFor: b,
+    ...g
+  }, f = /* @__PURE__ */ l("textarea", { ref: s, ...e }), h = c && /* @__PURE__ */ l("label", { ...D, children: /* @__PURE__ */ l(
+    B,
+    {
+      currentData: (o == null ? void 0 : o.label) ?? void 0,
+      datafield: "label",
+      path: i + ".label",
+      props: t.label
+    }
+  ) });
+  return /* @__PURE__ */ l(W, { ...t, attributesHolderRef: s, children: d ? /* @__PURE__ */ x("div", { ...u, children: [
+    h,
+    f
+  ] }) : /* @__PURE__ */ x(P, { children: [
+    h,
+    f
+  ] }) });
+};
+export {
+  J as TextAreaField
+};

package/dist/component/element/form/index.js

@@ -1,36 +1,42 @@
 import { Input as o } from "./Input.js";
-import { ColorField as i } from "./ColorField.js";
-import { DateField as m } from "./DateField.js";
-import { DateTimeField as p } from "./DateTimeField.js";
-import { EmailField as f } from "./EmailField.js";
-import { FileField as a } from "./FileField.js";
-import { HiddenField as T } from "./HiddenField.js";
+import { CheckBoxField as l } from "./CheckBoxField.js";
+import { ColorField as m } from "./ColorField.js";
+import { DateField as d } from "./DateField.js";
+import { DateTimeField as f } from "./DateTimeField.js";
+import { EmailField as a } from "./EmailField.js";
+import { FileField as n } from "./FileField.js";
+import { HiddenField as h } from "./HiddenField.js";
 import { MonthField as s } from "./MonthField.js";
-import { NumberField as D } from "./NumberField.js";
-import { PasswordField as c } from "./PasswordField.js";
-import { RangeField as k } from "./RangeField.js";
-import { SearchField as C } from "./SearchField.js";
-import { TelField as H } from "./TelField.js";
-import { TextField as M } from "./TextField.js";
-import { TimeField as P } from "./TimeField.js";
-import { UrlField as S } from "./UrlField.js";
-import { WeekField as W } from "./WeekField.js";
+import { NumberField as C } from "./NumberField.js";
+import { PasswordField as S } from "./PasswordField.js";
+import { RangeField as g } from "./RangeField.js";
+import { SearchField as A } from "./SearchField.js";
+import { SelectField as E } from "./SelectField.js";
+import { TelField as I } from "./TelField.js";
+import { TextAreaField as N } from "./TextAreaField.js";
+import { TextField as R } from "./TextField.js";
+import { TimeField as W } from "./TimeField.js";
+import { UrlField as q } from "./UrlField.js";
+import { WeekField as y } from "./WeekField.js";
 export {
-  i as ColorField,
-  m as DateField,
-  p as DateTimeField,
-  f as EmailField,
-  a as FileField,
-  T as HiddenField,
+  l as CheckBoxField,
+  m as ColorField,
+  d as DateField,
+  f as DateTimeField,
+  a as EmailField,
+  n as FileField,
+  h as HiddenField,
   o as Input,
   s as MonthField,
-  D as NumberField,
-  c as PasswordField,
-  k as RangeField,
-  C as SearchField,
-  H as TelField,
-  M as TextField,
-  P as TimeField,
-  S as UrlField,
-  W as WeekField
+  C as NumberField,
+  S as PasswordField,
+  g as RangeField,
+  A as SearchField,
+  E as SelectField,
+  I as TelField,
+  N as TextAreaField,
+  R as TextField,
+  W as TimeField,
+  q as UrlField,
+  y as WeekField
 };

package/dist/component/element/index.js

@@ -1,78 +1,84 @@
 import { d as o } from "../../index-CACLSxWi.js";
-import { f as e } from "../../index-2EvkwDZS.js";
+import { f as e } from "../../index-CpGvV5AF.js";
 import { h as r } from "../../index-BNvY8PkY.js";
 import { s as t } from "../../index-Ya6_R5yr.js";
 import { VariablesDebug as n } from "./debug/VariablesDebug/VariablesDebug.js";
-import { Input as s } from "./form/Input.js";
-import { ColorField as c } from "./form/ColorField.js";
-import { DateField as C } from "./form/DateField.js";
-import { DateTimeField as T } from "./form/DateTimeField.js";
-import { EmailField as g } from "./form/EmailField.js";
-import { FileField as S } from "./form/FileField.js";
-import { HiddenField as R } from "./form/HiddenField.js";
-import { MonthField as k } from "./form/MonthField.js";
-import { NumberField as w } from "./form/NumberField.js";
-import { PasswordField as H } from "./form/PasswordField.js";
-import { RangeField as J } from "./form/RangeField.js";
-import { SearchField as N } from "./form/SearchField.js";
-import { TelField as W } from "./form/TelField.js";
-import { TextField as A } from "./form/TextField.js";
-import { TimeField as U } from "./form/TimeField.js";
-import { UrlField as q } from "./form/UrlField.js";
-import { WeekField as G } from "./form/WeekField.js";
-import { FolderSortableTree as O } from "./html/FolderSortableTree.js";
-import { FormatNumeral as X } from "./html/FormatNumeral.js";
-import { Html as Z } from "./html/Html.js";
-import { LabelFromValue as $ } from "./html/LabelFromValue.js";
-import { PreformattedMarkup as eo } from "./html/PreformattedMarkup.js";
-import { SortableTreeItemCollapseButton as to } from "./html/SortableTreeItemCollapseButton.js";
-import { Count as po } from "./special/Count.js";
-import { DataFilter as lo } from "./special/DataFilter.js";
-import { DelayedActions as xo, getReactionFunctionsToExecute as ao } from "./special/DelayedActions.js";
-import { PageControls as so } from "./special/PageControls.js";
-import { Phantom as co } from "./special/Phantom.js";
-import { ReactiveJsonBasicComponentWrapper as Co } from "./special/ReactiveJsonBasicComponentWrapper.js";
-import { ReactiveJsonSubroot as To } from "./special/ReactiveJsonSubroot.js";
-import { Switch as go } from "./special/Switch.js";
-const i = {
+import { Input as F } from "./form/Input.js";
+import { CheckBoxField as c } from "./form/CheckBoxField.js";
+import { ColorField as C } from "./form/ColorField.js";
+import { DateField as T } from "./form/DateField.js";
+import { DateTimeField as S } from "./form/DateTimeField.js";
+import { EmailField as D } from "./form/EmailField.js";
+import { FileField as R } from "./form/FileField.js";
+import { HiddenField as B } from "./form/HiddenField.js";
+import { MonthField as v } from "./form/MonthField.js";
+import { NumberField as A } from "./form/NumberField.js";
+import { PasswordField as I } from "./form/PasswordField.js";
+import { RangeField as M } from "./form/RangeField.js";
+import { SearchField as V } from "./form/SearchField.js";
+import { SelectField as y } from "./form/SelectField.js";
+import { TelField as U } from "./form/TelField.js";
+import { TextAreaField as q } from "./form/TextAreaField.js";
+import { TextField as G } from "./form/TextField.js";
+import { TimeField as O } from "./form/TimeField.js";
+import { UrlField as X } from "./form/UrlField.js";
+import { WeekField as Z } from "./form/WeekField.js";
+import { FolderSortableTree as $ } from "./html/FolderSortableTree.js";
+import { FormatNumeral as eo } from "./html/FormatNumeral.js";
+import { Html as to } from "./html/Html.js";
+import { LabelFromValue as po } from "./html/LabelFromValue.js";
+import { PreformattedMarkup as lo } from "./html/PreformattedMarkup.js";
+import { SortableTreeItemCollapseButton as io } from "./html/SortableTreeItemCollapseButton.js";
+import { Count as no } from "./special/Count.js";
+import { DataFilter as so } from "./special/DataFilter.js";
+import { DelayedActions as uo, getReactionFunctionsToExecute as Co } from "./special/DelayedActions.js";
+import { PageControls as To } from "./special/PageControls.js";
+import { Phantom as So } from "./special/Phantom.js";
+import { ReactiveJsonBasicComponentWrapper as Do } from "./special/ReactiveJsonBasicComponentWrapper.js";
+import { ReactiveJsonSubroot as Ro } from "./special/ReactiveJsonSubroot.js";
+import { Switch as Bo } from "./special/Switch.js";
+const x = {
   ...o,
   ...e,
   ...r,
   ...t
 };
 export {
-  c as ColorField,
-  po as Count,
-  lo as DataFilter,
-  C as DateField,
-  T as DateTimeField,
-  xo as DelayedActions,
-  g as EmailField,
-  S as FileField,
-  O as FolderSortableTree,
-  X as FormatNumeral,
-  R as HiddenField,
-  Z as Html,
-  s as Input,
-  $ as LabelFromValue,
-  k as MonthField,
-  w as NumberField,
-  so as PageControls,
-  H as PasswordField,
-  co as Phantom,
-  eo as PreformattedMarkup,
-  J as RangeField,
-  Co as ReactiveJsonBasicComponentWrapper,
-  To as ReactiveJsonSubroot,
-  N as SearchField,
-  to as SortableTreeItemCollapseButton,
-  go as Switch,
-  W as TelField,
-  A as TextField,
-  U as TimeField,
-  q as UrlField,
+  c as CheckBoxField,
+  C as ColorField,
+  no as Count,
+  so as DataFilter,
+  T as DateField,
+  S as DateTimeField,
+  uo as DelayedActions,
+  D as EmailField,
+  R as FileField,
+  $ as FolderSortableTree,
+  eo as FormatNumeral,
+  B as HiddenField,
+  to as Html,
+  F as Input,
+  po as LabelFromValue,
+  v as MonthField,
+  A as NumberField,
+  To as PageControls,
+  I as PasswordField,
+  So as Phantom,
+  lo as PreformattedMarkup,
+  M as RangeField,
+  Do as ReactiveJsonBasicComponentWrapper,
+  Ro as ReactiveJsonSubroot,
+  V as SearchField,
+  y as SelectField,
+  io as SortableTreeItemCollapseButton,
+  Bo as Switch,
+  U as TelField,
+  q as TextAreaField,
+  G as TextField,
+  O as TimeField,
+  X as UrlField,
   n as VariablesDebug,
-  G as WeekField,
-  i as coreElementComponents,
-  ao as getReactionFunctionsToExecute
+  Z as WeekField,
+  x as coreElementComponents,
+  Co as getReactionFunctionsToExecute
 };