@cratis/event-models 0.346.0 → 0.348.0

package/dist/screen-editor/BindingExpressionPropertyEditor-BDzuLWUA.js

@@ -0,0 +1,471 @@
+import { a as V, c as O, i as J, n as K, o as T, r as w, s as F, t as j, u as D } from "./defaultStructuredEditorStrings-Bwbw58wD.js";
+import { t as Q } from "./StructuredValueEditor-DUSATTWd.js";
+import { c as E } from "./structuredValue-vqCZttsk.js";
+import { useEffect as L, useRef as $, useState as A } from "react";
+import { Fragment as q, jsx as t, jsxs as u } from "react/jsx-runtime";
+import { BindingMode as B, BindingSourceKind as l, PropertyValueType as g } from "@cratis/scene.model";
+var i = /* @__PURE__ */ (function(e) {
+  return e.String = "string", e.Number = "number", e.Boolean = "boolean", e.Null = "null", e.Json = "json", e;
+})({});
+function v(e) {
+  return e.kind ?? l.DataContext;
+}
+var M = [
+  "kind",
+  "path",
+  "query",
+  "componentId",
+  "componentPropertyPath",
+  "value"
+], W = (e) => !!e && typeof e == "object" && !Array.isArray(e);
+function U(e) {
+  if (W(e))
+    return M.some((o) => o in e) ? e : void 0;
+}
+function z(e) {
+  return v(e) === l.CommandResponse && e.mode !== B.TwoWay ? [B.OneWay] : w;
+}
+function G(e) {
+  switch (v(e)) {
+    case l.Literal:
+      return {
+        ...e,
+        path: "",
+        query: void 0,
+        componentId: void 0,
+        componentPropertyPath: void 0
+      };
+    case l.QueryResult:
+      return {
+        ...e,
+        componentId: void 0,
+        componentPropertyPath: void 0,
+        value: void 0
+      };
+    case l.ComponentProperty:
+      return {
+        ...e,
+        query: void 0,
+        value: void 0,
+        path: e.componentPropertyPath ?? e.path
+      };
+    case l.DataContext:
+    case l.CommandResponse:
+      return {
+        ...e,
+        query: void 0,
+        componentId: void 0,
+        componentPropertyPath: void 0,
+        value: void 0
+      };
+  }
+}
+function Y(e, o) {
+  switch (e) {
+    case l.Literal:
+      return {
+        kind: e,
+        path: "",
+        value: o.value ?? ""
+      };
+    case l.QueryResult:
+      return {
+        kind: e,
+        query: o.query,
+        path: o.path
+      };
+    case l.ComponentProperty:
+      return {
+        kind: e,
+        componentId: o.componentId,
+        componentPropertyPath: o.componentPropertyPath ?? o.path,
+        path: o.componentPropertyPath ?? o.path
+      };
+    case l.CommandResponse:
+      return {
+        kind: e,
+        path: o.path,
+        mode: o.mode === B.TwoWay ? void 0 : o.mode
+      };
+    case l.DataContext:
+      return {
+        kind: e,
+        path: o.path
+      };
+  }
+}
+function H(e) {
+  if (e === null) return i.Null;
+  if (typeof e == "number") return i.Number;
+  if (typeof e == "boolean") return i.Boolean;
+  if (typeof e == "object") return i.Json;
+}
+var X = {
+  [g.Number]: i.Number,
+  [g.Boolean]: i.Boolean,
+  [g.Object]: i.Json,
+  [g.Collection]: i.Json,
+  [g.Json]: i.Json
+};
+function I(e, o) {
+  return H(e) ?? X[o] ?? i.String;
+}
+function N(e, o) {
+  return JSON.stringify({
+    kind: I(e, o),
+    value: e
+  }) ?? "undefined";
+}
+function _(e) {
+  switch (e) {
+    case i.String:
+      return "";
+    case i.Number:
+      return 0;
+    case i.Boolean:
+      return !1;
+    case i.Null:
+      return null;
+    case i.Json:
+      return {};
+  }
+}
+function Z(e, o) {
+  switch (e) {
+    case l.DataContext:
+      return o.dataContext;
+    case l.QueryResult:
+      return o.queryResult;
+    case l.ComponentProperty:
+      return o.componentProperty;
+    case l.Literal:
+      return o.literal;
+    case l.CommandResponse:
+      return o.commandResponse;
+  }
+}
+function k(e, o) {
+  return e === l.QueryResult && o.queryResults.length === 0 || e === l.ComponentProperty && o.componentOutputs.length === 0 || e === l.CommandResponse && !o.commandResponse;
+}
+function ee(e, o, d, s, c) {
+  const n = d.includes(e), h = k(e, s), y = e === l.CommandResponse ? c.commandResponseOutOfScope : c.unavailableSource;
+  return {
+    kind: e,
+    label: Z(e, c.sources),
+    disabled: e !== o && (!n || h),
+    reason: n ? h ? y : void 0 : c.incompatibleSource
+  };
+}
+function ne(e, o, d, s) {
+  const c = v(e);
+  return K.filter((n) => n !== l.CommandResponse || o.includes(n) || c === n).map((n) => ee(n, c, o, d, s));
+}
+var te = ({ property: e, sources: o, strings: d, disabled: s, onChange: c }) => {
+  const n = d.properties.binding, h = O(e.effectiveValue) ? e.effectiveValue : void 0, y = h ? void 0 : U(e.effectiveValue), b = T(e), a = h ?? b, C = e.descriptor.acceptedBindingKinds?.length ? e.descriptor.acceptedBindingKinds : V, P = ne(a, C, o, n), f = a.query ? o.queryResults.find((r) => r.id === a.query || r.name === a.query) : void 0, p = a.componentId ? o.componentOutputs.find((r) => r.componentId === a.componentId) : void 0, m = (r) => c(G({
+    ...a,
+    ...r
+  })), x = () => c(void 0);
+  return y !== void 0 ? /* @__PURE__ */ u("fieldset", {
+    className: "studio-editor-binding",
+    disabled: s,
+    children: [
+      /* @__PURE__ */ t("legend", { children: e.descriptor.label }),
+      /* @__PURE__ */ u("div", {
+        className: "studio-editor-binding__missing",
+        role: "alert",
+        children: [/* @__PURE__ */ t("p", { children: n.unsupportedValue }), /* @__PURE__ */ t("pre", { children: JSON.stringify(y, void 0, 2) ?? "" })]
+      }),
+      /* @__PURE__ */ u("div", {
+        className: "studio-editor-binding__row",
+        children: [/* @__PURE__ */ t("button", {
+          type: "button",
+          onClick: () => c(b),
+          children: n.replaceUnsupported
+        }), /* @__PURE__ */ t("button", {
+          type: "button",
+          onClick: x,
+          children: n.clear
+        })]
+      })
+    ]
+  }) : /* @__PURE__ */ u("fieldset", {
+    className: "studio-editor-binding",
+    disabled: s,
+    children: [
+      /* @__PURE__ */ t("legend", { children: e.descriptor.label }),
+      /* @__PURE__ */ u("div", {
+        className: "studio-editor-binding__row",
+        children: [
+          /* @__PURE__ */ u("label", { children: [/* @__PURE__ */ t("span", { children: n.source }), /* @__PURE__ */ t("select", {
+            value: a.kind ?? l.DataContext,
+            onChange: (r) => m(Y(r.target.value, a)),
+            children: P.map((r) => /* @__PURE__ */ t("option", {
+              value: r.kind,
+              disabled: r.disabled,
+              children: r.label
+            }, r.kind))
+          })] }),
+          /* @__PURE__ */ t(R, {
+            label: n.mode,
+            emptyLabel: n.inheritedMode,
+            value: a.mode,
+            options: z(a),
+            onChange: (r) => m({ mode: r })
+          }),
+          /* @__PURE__ */ t(R, {
+            label: n.nullBehavior,
+            emptyLabel: n.defaultNullBehavior,
+            value: a.nullBehavior,
+            options: J,
+            onChange: (r) => m({ nullBehavior: r })
+          }),
+          /* @__PURE__ */ t(R, {
+            label: n.expectedType,
+            emptyLabel: n.inferType,
+            value: a.expectedValueType,
+            options: F,
+            onChange: (r) => m({ expectedValueType: r })
+          })
+        ]
+      }),
+      P.filter((r) => r.disabled && r.reason).map((r) => /* @__PURE__ */ u("p", {
+        className: "studio-editor-binding__missing",
+        children: [
+          r.label,
+          ": ",
+          r.reason
+        ]
+      }, `${r.kind}:reason`)),
+      v(a) === l.DataContext && /* @__PURE__ */ t(S, {
+        id: `${e.descriptor.path}-data-context-paths`,
+        label: n.path,
+        value: a.path,
+        options: o.dataContextPaths,
+        onChange: (r) => m({ path: r })
+      }),
+      v(a) === l.CommandResponse && /* @__PURE__ */ t(oe, {
+        id: `${e.descriptor.path}-command-response-paths`,
+        path: a.path,
+        source: o.commandResponse,
+        text: n,
+        onChange: (r) => m({ path: r })
+      }),
+      v(a) === l.QueryResult && /* @__PURE__ */ u(q, { children: [
+        /* @__PURE__ */ u("label", { children: [/* @__PURE__ */ t("span", { children: n.query }), /* @__PURE__ */ u("select", {
+          value: a.query ?? "",
+          onChange: (r) => m({
+            query: r.target.value,
+            path: ""
+          }),
+          children: [
+            /* @__PURE__ */ t("option", {
+              value: "",
+              children: n.noSource
+            }),
+            a.query && !f && /* @__PURE__ */ t("option", {
+              value: a.query,
+              children: n.missingQuery(a.query)
+            }),
+            o.queryResults.map((r) => /* @__PURE__ */ t("option", {
+              value: r.id,
+              children: r.name
+            }, r.id))
+          ]
+        })] }),
+        /* @__PURE__ */ t(S, {
+          id: `${e.descriptor.path}-query-paths`,
+          label: n.path,
+          value: a.path,
+          options: f?.fields ?? [],
+          onChange: (r) => m({ path: r })
+        }),
+        a.query && !f && /* @__PURE__ */ t("p", {
+          className: "studio-editor-binding__missing",
+          role: "alert",
+          children: n.missingQuery(a.query)
+        })
+      ] }),
+      v(a) === l.ComponentProperty && /* @__PURE__ */ u(q, { children: [
+        /* @__PURE__ */ u("label", { children: [/* @__PURE__ */ t("span", { children: n.component }), /* @__PURE__ */ u("select", {
+          value: a.componentId ?? "",
+          onChange: (r) => m({
+            componentId: r.target.value,
+            componentPropertyPath: "",
+            path: ""
+          }),
+          children: [
+            /* @__PURE__ */ t("option", {
+              value: "",
+              children: n.noSource
+            }),
+            a.componentId && !p && /* @__PURE__ */ t("option", {
+              value: a.componentId,
+              children: n.missingComponent(a.componentId)
+            }),
+            o.componentOutputs.map((r) => /* @__PURE__ */ u("option", {
+              value: r.componentId,
+              children: [
+                r.label,
+                " (",
+                r.componentId,
+                ")"
+              ]
+            }, r.componentId))
+          ]
+        })] }),
+        /* @__PURE__ */ t(S, {
+          id: `${e.descriptor.path}-component-paths`,
+          label: n.componentProperty,
+          value: a.componentPropertyPath ?? a.path,
+          options: p?.outputs.map((r) => r.path) ?? [],
+          onChange: (r) => m({
+            componentPropertyPath: r,
+            path: r
+          })
+        }),
+        a.componentId && !p && /* @__PURE__ */ t("p", {
+          className: "studio-editor-binding__missing",
+          role: "alert",
+          children: n.missingComponent(a.componentId)
+        })
+      ] }),
+      v(a) === l.Literal && /* @__PURE__ */ t(re, {
+        value: a.value,
+        descriptor: e.descriptor,
+        targetType: a.expectedValueType ?? e.descriptor.valueType,
+        strings: n,
+        structured: d.properties.structured ?? j,
+        onChange: (r) => m({
+          value: r,
+          path: ""
+        })
+      }, N(a.value, a.expectedValueType ?? e.descriptor.valueType)),
+      h && /* @__PURE__ */ t("button", {
+        type: "button",
+        onClick: x,
+        children: n.clear
+      })
+    ]
+  });
+}, R = ({ label: e, emptyLabel: o, value: d, options: s, onChange: c }) => /* @__PURE__ */ u("label", { children: [/* @__PURE__ */ t("span", { children: e }), /* @__PURE__ */ u("select", {
+  value: d ?? "",
+  onChange: (n) => c(n.target.value === "" ? void 0 : n.target.value),
+  children: [/* @__PURE__ */ t("option", {
+    value: "",
+    children: o
+  }), s.map((n) => /* @__PURE__ */ t("option", {
+    value: n,
+    children: n
+  }, n))]
+})] }), oe = ({ id: e, path: o, source: d, text: s, onChange: c }) => /* @__PURE__ */ u(q, { children: [/* @__PURE__ */ t(S, {
+  id: e,
+  label: s.path,
+  value: o,
+  options: d?.paths ?? [],
+  onChange: c
+}), !d && /* @__PURE__ */ t("p", {
+  className: "studio-editor-binding__missing",
+  role: "alert",
+  children: s.commandResponseOutOfScope
+})] }), S = ({ id: e, label: o, value: d, options: s, onChange: c }) => /* @__PURE__ */ u("label", { children: [
+  /* @__PURE__ */ t("span", { children: o }),
+  /* @__PURE__ */ t("input", {
+    list: e,
+    value: d,
+    onChange: (n) => c(n.target.value)
+  }),
+  /* @__PURE__ */ t("datalist", {
+    id: e,
+    children: s.map((n) => /* @__PURE__ */ t("option", { value: n }, n))
+  })
+] }), re = ({ value: e, descriptor: o, targetType: d, strings: s, structured: c, onChange: n }) => {
+  const h = I(e, d), y = N(e, d), b = $(y), [a, C] = A(h);
+  L(() => {
+    const p = N(e, d);
+    p !== b.current && (b.current = p, C(I(e, d)));
+  }, [e, d]);
+  const P = (p) => {
+    C(p);
+    const m = _(p);
+    b.current = N(m, d), n(m);
+  }, f = E(o);
+  return /* @__PURE__ */ u("div", {
+    className: "studio-editor-binding__literal",
+    children: [
+      /* @__PURE__ */ u("label", { children: [/* @__PURE__ */ t("span", { children: s.literalType }), /* @__PURE__ */ u("select", {
+        value: a,
+        onChange: (p) => P(p.target.value),
+        children: [
+          /* @__PURE__ */ t("option", {
+            value: i.String,
+            children: "String"
+          }),
+          /* @__PURE__ */ t("option", {
+            value: i.Number,
+            children: "Number"
+          }),
+          /* @__PURE__ */ t("option", {
+            value: i.Boolean,
+            children: "Boolean"
+          }),
+          /* @__PURE__ */ t("option", {
+            value: i.Null,
+            children: "Null"
+          }),
+          (f || a === i.Json) && /* @__PURE__ */ t("option", {
+            value: i.Json,
+            children: s.literalStructured
+          })
+        ]
+      })] }),
+      a === i.String && /* @__PURE__ */ u("label", { children: [/* @__PURE__ */ t("span", { children: s.literalValue }), /* @__PURE__ */ t("input", {
+        value: typeof e == "string" ? e : "",
+        onChange: (p) => n(p.target.value)
+      })] }),
+      a === i.Number && /* @__PURE__ */ u("label", { children: [/* @__PURE__ */ t("span", { children: s.literalValue }), /* @__PURE__ */ t("input", {
+        type: "number",
+        value: typeof e == "number" ? String(e) : "",
+        onChange: (p) => n(p.target.value === "" ? void 0 : Number(p.target.value))
+      })] }),
+      a === i.Boolean && /* @__PURE__ */ u("label", { children: [/* @__PURE__ */ t("span", { children: s.literalValue }), /* @__PURE__ */ u("select", {
+        value: e === !0 ? "true" : "false",
+        onChange: (p) => n(p.target.value === "true"),
+        children: [/* @__PURE__ */ t("option", {
+          value: "true",
+          children: "true"
+        }), /* @__PURE__ */ t("option", {
+          value: "false",
+          children: "false"
+        })]
+      })] }),
+      a === i.Null && /* @__PURE__ */ t("p", { children: s.literalNull }),
+      a === i.Json && f && /* @__PURE__ */ t(Q, {
+        descriptor: o,
+        value: e,
+        idPrefix: "literal",
+        strings: c,
+        disabled: !1,
+        onChange: (p) => n(p ?? _(i.Json))
+      }),
+      a === i.Json && !f && /* @__PURE__ */ t("p", {
+        className: "studio-editor-binding__missing",
+        role: "alert",
+        children: s.literalNoEditor
+      })
+    ]
+  });
+}, de = ({ onChange: e, context: o, disabled: d }) => {
+  const { session: s } = o;
+  if (!s) return null;
+  const { controller: c, environment: n } = s, h = D(c.document, c.composition.roots, c.context, n.availableSources, n.queryCandidates);
+  return /* @__PURE__ */ t(te, {
+    property: s.property,
+    sources: h,
+    strings: s.screenStrings,
+    disabled: d === !0,
+    onChange: e
+  });
+};
+export {
+  de as BindingExpressionPropertyEditor
+};