@gxp-dev/mod-ui 2.0.0

package/dist/components/compositions/elements/builder/ReactiveCanvasBuilder.vue2.js

@@ -0,0 +1,583 @@
+import { defineComponent as xe, useModel as ge, ref as B, computed as _, onMounted as _e, watch as R, onBeforeUnmount as we, openBlock as c, createBlock as M, unref as r, normalizeClass as P, withCtx as s, createElementVNode as n, createElementBlock as m, Fragment as L, renderList as N, createVNode as i, toDisplayString as f, createTextVNode as u, normalizeStyle as j, createCommentVNode as A, withModifiers as H, mergeModels as ye } from "vue";
+import { Plus as ke, X as Ce, Trash2 as Ie } from "lucide-vue-next";
+import "../../../ui/badge/index.js";
+import "../../../ui/button/index.js";
+import "../../../ui/card/index.js";
+import $e from "../../../ui/field-frame/FieldFrame.vue.js";
+import k from "../../../ui/input/Input.vue.js";
+import "../../../ui/label/index.js";
+import Se from "../../../ui/select/Select.vue.js";
+import Ee from "../../../ui/select/SelectContent.vue.js";
+import "@vueuse/core";
+import "reka-ui";
+import { cn as O } from "../../../../lib/utils.js";
+import Be from "../../../ui/select/SelectItem.vue.js";
+import Pe from "../../../ui/select/SelectTrigger.vue.js";
+import Le from "../../../ui/select/SelectValue.vue.js";
+import Ne from "../../../ui/textarea/Textarea.vue.js";
+import { useReactiveCanvasBuilder as ze, REACTIVE_CANVAS_BLOCK_TYPES as F } from "../../../../stores/reactiveCanvasBuilderStore.js";
+import Xe from "../../../ui/badge/Badge.vue.js";
+import U from "../../../ui/button/Button.vue.js";
+import K from "../../../ui/card/Card.vue.js";
+import Z from "../../../ui/card/CardHeader.vue.js";
+import q from "../../../ui/card/CardTitle.vue.js";
+import G from "../../../ui/card/CardContent.vue.js";
+import b from "../../../ui/label/Label.vue.js";
+const Ye = ["data-element-name"], Me = {
+  class: "flex flex-col gap-2 border-r p-3 overflow-y-auto",
+  "data-testid": "reactive-canvas-builder-palette"
+}, Ae = { class: "flex flex-col gap-1" }, He = ["data-testid", "onClick"], Ve = { class: "font-medium" }, We = {
+  class: "flex flex-col gap-3 overflow-auto p-3",
+  "data-testid": "reactive-canvas-builder-canvas"
+}, De = { class: "flex items-center justify-between gap-2" }, Te = { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, Je = {
+  key: 0,
+  class: "absolute inset-0 flex items-center justify-center text-center text-xs text-muted-foreground",
+  "data-testid": "reactive-canvas-builder-canvas-empty"
+}, Re = ["data-testid", "onClick", "onPointerdown"], je = { class: "flex items-center justify-between" }, Oe = { class: "font-mono text-[10px] text-muted-foreground" }, Fe = { class: "font-mono text-[10px] text-muted-foreground" }, Ue = { class: "mt-1 font-mono text-[10px] text-muted-foreground" }, Ke = ["data-testid", "onPointerdown"], Ze = {
+  class: "flex flex-col gap-2 overflow-y-auto border-l p-3",
+  "data-testid": "reactive-canvas-builder-inspector"
+}, qe = { class: "flex items-center justify-between" }, Ge = { class: "grid grid-cols-2 gap-2" }, Qe = { class: "flex flex-col gap-1" }, et = { class: "flex flex-col gap-1" }, tt = {
+  key: 0,
+  class: "py-3 text-xs text-muted-foreground",
+  "data-testid": "reactive-canvas-builder-inspector-empty"
+}, ot = {
+  key: 1,
+  class: "flex flex-col gap-3",
+  "data-testid": "reactive-canvas-builder-inspector-fields"
+}, rt = { class: "flex flex-col gap-1" }, it = { class: "grid grid-cols-2 gap-2" }, at = { class: "flex flex-col gap-1" }, nt = { class: "flex flex-col gap-1" }, st = { class: "flex flex-col gap-1" }, lt = { class: "flex flex-col gap-1" }, dt = { class: "flex flex-col gap-1" }, ct = {
+  key: 0,
+  class: "text-xs text-destructive",
+  "data-testid": "reactive-canvas-builder-inspector-props-error"
+}, ut = { class: "flex items-center gap-1" }, C = 20, At = /* @__PURE__ */ xe({
+  __name: "ReactiveCanvasBuilder",
+  props: /* @__PURE__ */ ye({
+    modelValue: {},
+    builderId: {},
+    name: {},
+    item: { default: () => ({}) },
+    classList: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(V) {
+    const x = V, W = ge(
+      V,
+      "modelValue"
+    );
+    let D = 0;
+    function Q() {
+      return D += 1, `reactive-canvas-${Date.now()}-${D}`;
+    }
+    const ee = B(Q()), te = _(() => x.builderId ?? ee.value), d = ze(te.value);
+    function oe(t) {
+      if (typeof t != "object" || t === null)
+        return !1;
+      const e = t;
+      return typeof e.width == "number" && typeof e.height == "number" && Array.isArray(e.blocks);
+    }
+    _e(() => {
+      const t = W.value;
+      oe(t) && d.loadSchema(t);
+    }), R(
+      () => d.schema.value,
+      (t) => {
+        W.value = t;
+      },
+      { deep: !0 }
+    );
+    const v = _(
+      () => d.schema.value
+    ), z = _(() => v.value.blocks), I = _(() => d.selection.value.id), h = _(() => {
+      const t = I.value;
+      return t ? z.value.find((e) => e.id === t) ?? null : null;
+    }), S = B(""), w = B(null);
+    R(
+      () => {
+        var t;
+        return (t = h.value) == null ? void 0 : t.id;
+      },
+      () => {
+        const t = h.value;
+        if (!t) {
+          S.value = "", w.value = null;
+          return;
+        }
+        S.value = JSON.stringify(t.props ?? {}, null, 2), w.value = null;
+      },
+      { immediate: !0 }
+    );
+    function re(t) {
+      const e = d.addBlock(t);
+      d.select(e);
+    }
+    function ie(t) {
+      d.select(t);
+    }
+    function ae() {
+      d.select(null);
+    }
+    function ne() {
+      const t = I.value;
+      t && d.removeBlock(t);
+    }
+    function X(t) {
+      const e = I.value;
+      e && d.updateBlock(e, t);
+    }
+    function E(t, e) {
+      const o = e.target.value, a = Number(o);
+      Number.isFinite(a) && X({ [t]: a });
+    }
+    function T(t, e) {
+      const o = e.target.value, a = Number(o);
+      Number.isFinite(a) && a > 0 && d.setCanvasSize({ [t]: a });
+    }
+    function se(t) {
+      typeof t == "string" && X({ type: t });
+    }
+    function le(t) {
+      const e = t.target.value;
+      S.value = e;
+      try {
+        const o = e.trim() === "" ? {} : JSON.parse(e);
+        if (typeof o != "object" || o === null || Array.isArray(o))
+          throw new Error("Props must be a JSON object");
+        w.value = null, X({ props: o });
+      } catch (o) {
+        w.value = o instanceof Error ? o.message : "Invalid JSON";
+      }
+    }
+    const de = _(() => ({
+      width: `${v.value.width}px`,
+      height: `${v.value.height}px`,
+      maxWidth: "100%"
+    }));
+    function ce(t) {
+      return {
+        left: `${t.x}px`,
+        top: `${t.y}px`,
+        width: `${t.width}px`,
+        height: `${t.height}px`
+      };
+    }
+    const $ = B(null), ue = _(
+      () => {
+        var t;
+        return ((t = $.value) == null ? void 0 : t.blockId) ?? null;
+      }
+    );
+    function pe(t, e, o, a) {
+      const l = Math.max(0, v.value.width - o), p = Math.max(0, v.value.height - a);
+      return {
+        x: Math.min(Math.max(0, t), l),
+        y: Math.min(Math.max(0, e), p)
+      };
+    }
+    function J(t, e, o, a = null) {
+      e.preventDefault(), e.stopPropagation(), d.select(t.id);
+      const l = e.target;
+      if (l && typeof l.setPointerCapture == "function")
+        try {
+          l.setPointerCapture(e.pointerId);
+        } catch {
+        }
+      $.value = {
+        mode: o,
+        corner: a,
+        blockId: t.id,
+        pointerId: e.pointerId,
+        target: l ?? e.currentTarget,
+        startClientX: e.clientX,
+        startClientY: e.clientY,
+        startX: t.x,
+        startY: t.y,
+        startWidth: t.width,
+        startHeight: t.height
+      }, window.addEventListener("pointermove", Y), window.addEventListener("pointerup", y), window.addEventListener("pointercancel", y);
+    }
+    function fe(t, e) {
+      e.button !== void 0 && e.button !== 0 || J(t, e, "drag");
+    }
+    function me(t, e, o) {
+      o.button !== void 0 && o.button !== 0 || J(t, o, "resize", e);
+    }
+    function ve(t, e, o) {
+      const a = t.startX + e, l = t.startY + o, p = pe(
+        a,
+        l,
+        t.startWidth,
+        t.startHeight
+      );
+      d.updateBlock(t.blockId, { x: p.x, y: p.y });
+    }
+    function he(t, e, o) {
+      let a = t.startX, l = t.startY, p = t.startWidth, g = t.startHeight;
+      switch (t.corner) {
+        case "br":
+          p = t.startWidth + e, g = t.startHeight + o;
+          break;
+        case "tr":
+          p = t.startWidth + e, g = t.startHeight - o, l = t.startY + o;
+          break;
+        case "bl":
+          p = t.startWidth - e, g = t.startHeight + o, a = t.startX + e;
+          break;
+        case "tl":
+          p = t.startWidth - e, g = t.startHeight - o, a = t.startX + e, l = t.startY + o;
+          break;
+        default:
+          return;
+      }
+      p < C && ((t.corner === "tl" || t.corner === "bl") && (a = t.startX + (t.startWidth - C)), p = C), g < C && ((t.corner === "tl" || t.corner === "tr") && (l = t.startY + (t.startHeight - C)), g = C), d.updateBlock(t.blockId, { x: a, y: l, width: p, height: g });
+    }
+    function Y(t) {
+      const e = $.value;
+      if (!e)
+        return;
+      const o = t.clientX - e.startClientX, a = t.clientY - e.startClientY;
+      e.mode === "drag" ? ve(e, o, a) : he(e, o, a);
+    }
+    function y(t) {
+      const e = $.value;
+      if (e) {
+        const o = e.target;
+        if (o && typeof o.releasePointerCapture == "function")
+          try {
+            o.releasePointerCapture(e.pointerId);
+          } catch {
+          }
+      }
+      $.value = null, window.removeEventListener("pointermove", Y), window.removeEventListener("pointerup", y), window.removeEventListener("pointercancel", y);
+    }
+    we(() => {
+      window.removeEventListener("pointermove", Y), window.removeEventListener("pointerup", y), window.removeEventListener("pointercancel", y);
+    });
+    const be = [
+      { corner: "tl", position: "-top-1 -left-1", cursor: "cursor-nwse-resize" },
+      { corner: "tr", position: "-top-1 -right-1", cursor: "cursor-nesw-resize" },
+      { corner: "bl", position: "-bottom-1 -left-1", cursor: "cursor-nesw-resize" },
+      { corner: "br", position: "-bottom-1 -right-1", cursor: "cursor-nwse-resize" }
+    ];
+    return (t, e) => (c(), M(r($e), {
+      label: x.label,
+      "hide-label": x.hideLabel,
+      "help-text": x.helpText,
+      errors: x.errors,
+      class: P(x.classList)
+    }, {
+      default: s(() => [
+        n("div", {
+          class: P(r(O)("gxp-reactive-canvas-builder grid gap-3 rounded-lg border bg-card")),
+          style: { "grid-template-columns": "220px 1fr 320px", "min-height": "24rem" },
+          "data-testid": "reactive-canvas-builder",
+          "data-element-name": x.name ?? void 0
+        }, [
+          n("aside", Me, [
+            e[7] || (e[7] = n("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Block palette ", -1)),
+            n("div", Ae, [
+              (c(!0), m(L, null, N(r(F), (o) => (c(), m("button", {
+                key: o,
+                type: "button",
+                class: "flex items-start gap-2 rounded-md border bg-background px-2 py-1.5 text-left text-xs transition-colors hover:border-primary hover:bg-accent/40",
+                "data-testid": `reactive-canvas-builder-palette-${o}`,
+                onClick: (a) => re(o)
+              }, [
+                i(r(ke), { class: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+                n("span", Ve, f(o), 1)
+              ], 8, He))), 128))
+            ])
+          ]),
+          n("section", We, [
+            n("header", De, [
+              n("h4", Te, " Canvas (" + f(v.value.width) + " x " + f(v.value.height) + ") ", 1),
+              i(r(Xe), {
+                variant: "outline",
+                class: "font-mono text-[10px]"
+              }, {
+                default: s(() => [...e[8] || (e[8] = [
+                  u(" builder/reactive-canvas-builder ", -1)
+                ])]),
+                _: 1
+              })
+            ]),
+            n("div", {
+              class: "relative overflow-auto rounded-md border border-dashed bg-background",
+              style: j(de.value),
+              "data-testid": "reactive-canvas-builder-surface"
+            }, [
+              z.value.length === 0 ? (c(), m("p", Je, " Click a block type in the palette to add it. ")) : A("", !0),
+              (c(!0), m(L, null, N(z.value, (o) => (c(), m("div", {
+                key: o.id,
+                class: P(["absolute cursor-move touch-none select-none rounded border bg-card p-2 text-xs shadow-sm transition-colors hover:border-primary", [
+                  I.value === o.id ? "border-primary ring-2 ring-primary/30" : "",
+                  ue.value === o.id ? "ring-2 ring-primary" : ""
+                ]]),
+                style: j(ce(o)),
+                "data-testid": `reactive-canvas-builder-block-${o.id}`,
+                onClick: H((a) => ie(o.id), ["stop"]),
+                onPointerdown: (a) => fe(o, a)
+              }, [
+                n("div", je, [
+                  n("span", Oe, f(o.type), 1),
+                  n("span", Fe, f(o.width) + "x" + f(o.height), 1)
+                ]),
+                n("div", Ue, " (" + f(o.x) + ", " + f(o.y) + ") ", 1),
+                (c(), m(L, null, N(be, (a) => n("span", {
+                  key: a.corner,
+                  class: P(
+                    r(O)(
+                      "absolute h-2 w-2 rounded-sm border border-primary/70 bg-primary/30 hover:bg-primary",
+                      a.position,
+                      a.cursor
+                    )
+                  ),
+                  "data-testid": `reactive-canvas-builder-block-${o.id}-resize-${a.corner}`,
+                  onClick: e[0] || (e[0] = H(() => {
+                  }, ["stop"])),
+                  onPointerdown: H(
+                    (l) => me(o, a.corner, l),
+                    ["stop"]
+                  )
+                }, null, 42, Ke)), 64))
+              ], 46, Re))), 128))
+            ], 4)
+          ]),
+          n("aside", Ze, [
+            n("header", qe, [
+              e[9] || (e[9] = n("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Inspector ", -1)),
+              I.value ? (c(), M(r(U), {
+                key: 0,
+                variant: "ghost",
+                size: "icon-sm",
+                "aria-label": "Clear selection",
+                onClick: ae
+              }, {
+                default: s(() => [
+                  i(r(Ce), { class: "h-3.5 w-3.5" })
+                ]),
+                _: 1
+              })) : A("", !0)
+            ]),
+            i(r(K), { class: "border-dashed" }, {
+              default: s(() => [
+                i(r(Z), { class: "py-2" }, {
+                  default: s(() => [
+                    i(r(q), { class: "font-mono text-xs uppercase tracking-wide" }, {
+                      default: s(() => [...e[10] || (e[10] = [
+                        u(" Canvas ", -1)
+                      ])]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }),
+                i(r(G), { class: "flex flex-col gap-2 pb-3" }, {
+                  default: s(() => [
+                    n("div", Ge, [
+                      n("div", Qe, [
+                        i(r(b), { for: "rcb-canvas-width" }, {
+                          default: s(() => [...e[11] || (e[11] = [
+                            u("Width", -1)
+                          ])]),
+                          _: 1
+                        }),
+                        i(r(k), {
+                          id: "rcb-canvas-width",
+                          type: "number",
+                          "model-value": v.value.width,
+                          "data-testid": "reactive-canvas-builder-canvas-width",
+                          onInput: e[1] || (e[1] = (o) => T("width", o))
+                        }, null, 8, ["model-value"])
+                      ]),
+                      n("div", et, [
+                        i(r(b), { for: "rcb-canvas-height" }, {
+                          default: s(() => [...e[12] || (e[12] = [
+                            u("Height", -1)
+                          ])]),
+                          _: 1
+                        }),
+                        i(r(k), {
+                          id: "rcb-canvas-height",
+                          type: "number",
+                          "model-value": v.value.height,
+                          "data-testid": "reactive-canvas-builder-canvas-height",
+                          onInput: e[2] || (e[2] = (o) => T("height", o))
+                        }, null, 8, ["model-value"])
+                      ])
+                    ])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            h.value ? (c(), m("div", ot, [
+              i(r(K), { class: "border-dashed" }, {
+                default: s(() => [
+                  i(r(Z), { class: "py-2" }, {
+                    default: s(() => [
+                      i(r(q), { class: "font-mono text-xs uppercase tracking-wide" }, {
+                        default: s(() => [
+                          u(f(h.value.type), 1)
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  }),
+                  i(r(G), { class: "flex flex-col gap-2 pb-3" }, {
+                    default: s(() => [
+                      n("div", rt, [
+                        i(r(b), null, {
+                          default: s(() => [...e[13] || (e[13] = [
+                            u("Block type", -1)
+                          ])]),
+                          _: 1
+                        }),
+                        i(r(Se), {
+                          "model-value": h.value.type,
+                          "onUpdate:modelValue": se
+                        }, {
+                          default: s(() => [
+                            i(r(Pe), { "data-testid": "reactive-canvas-builder-inspector-type" }, {
+                              default: s(() => [
+                                i(r(Le))
+                              ]),
+                              _: 1
+                            }),
+                            i(r(Ee), null, {
+                              default: s(() => [
+                                (c(!0), m(L, null, N(r(F), (o) => (c(), M(r(Be), {
+                                  key: o,
+                                  value: o
+                                }, {
+                                  default: s(() => [
+                                    u(f(o), 1)
+                                  ]),
+                                  _: 2
+                                }, 1032, ["value"]))), 128))
+                              ]),
+                              _: 1
+                            })
+                          ]),
+                          _: 1
+                        }, 8, ["model-value"])
+                      ]),
+                      n("div", it, [
+                        n("div", at, [
+                          i(r(b), { for: "rcb-block-x" }, {
+                            default: s(() => [...e[14] || (e[14] = [
+                              u("X", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          i(r(k), {
+                            id: "rcb-block-x",
+                            type: "number",
+                            "model-value": h.value.x,
+                            "data-testid": "reactive-canvas-builder-inspector-x",
+                            onInput: e[3] || (e[3] = (o) => E("x", o))
+                          }, null, 8, ["model-value"])
+                        ]),
+                        n("div", nt, [
+                          i(r(b), { for: "rcb-block-y" }, {
+                            default: s(() => [...e[15] || (e[15] = [
+                              u("Y", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          i(r(k), {
+                            id: "rcb-block-y",
+                            type: "number",
+                            "model-value": h.value.y,
+                            "data-testid": "reactive-canvas-builder-inspector-y",
+                            onInput: e[4] || (e[4] = (o) => E("y", o))
+                          }, null, 8, ["model-value"])
+                        ]),
+                        n("div", st, [
+                          i(r(b), { for: "rcb-block-width" }, {
+                            default: s(() => [...e[16] || (e[16] = [
+                              u("Width", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          i(r(k), {
+                            id: "rcb-block-width",
+                            type: "number",
+                            "model-value": h.value.width,
+                            "data-testid": "reactive-canvas-builder-inspector-width",
+                            onInput: e[5] || (e[5] = (o) => E("width", o))
+                          }, null, 8, ["model-value"])
+                        ]),
+                        n("div", lt, [
+                          i(r(b), { for: "rcb-block-height" }, {
+                            default: s(() => [...e[17] || (e[17] = [
+                              u("Height", -1)
+                            ])]),
+                            _: 1
+                          }),
+                          i(r(k), {
+                            id: "rcb-block-height",
+                            type: "number",
+                            "model-value": h.value.height,
+                            "data-testid": "reactive-canvas-builder-inspector-height",
+                            onInput: e[6] || (e[6] = (o) => E("height", o))
+                          }, null, 8, ["model-value"])
+                        ])
+                      ]),
+                      n("div", dt, [
+                        i(r(b), { for: "rcb-block-props" }, {
+                          default: s(() => [...e[18] || (e[18] = [
+                            u("Props (JSON)", -1)
+                          ])]),
+                          _: 1
+                        }),
+                        i(r(Ne), {
+                          id: "rcb-block-props",
+                          "model-value": S.value,
+                          rows: "6",
+                          class: "font-mono text-xs",
+                          "data-testid": "reactive-canvas-builder-inspector-props",
+                          onInput: le
+                        }, null, 8, ["model-value"]),
+                        w.value ? (c(), m("p", ct, f(w.value), 1)) : A("", !0)
+                      ])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              n("div", ut, [
+                i(r(U), {
+                  variant: "destructive",
+                  size: "sm",
+                  class: "ml-auto",
+                  "data-testid": "reactive-canvas-builder-remove",
+                  onClick: ne
+                }, {
+                  default: s(() => [
+                    i(r(Ie), { class: "h-3.5 w-3.5" }),
+                    e[19] || (e[19] = u(" Remove block ", -1))
+                  ]),
+                  _: 1
+                })
+              ])
+            ])) : (c(), m("p", tt, " Select a block on the canvas to edit it. "))
+          ])
+        ], 10, Ye)
+      ]),
+      _: 1
+    }, 8, ["label", "hide-label", "help-text", "errors", "class"]));
+  }
+});
+export {
+  At as default
+};
+//# sourceMappingURL=ReactiveCanvasBuilder.vue2.js.map