@gxp-dev/mod-ui 2.0.0 → 2.0.1

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

@@ -1,583 +1,5 @@
-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"]));
-  }
-});
+import f from "./ReactiveCanvasBuilder.vue.js";
 export {
-  At as default
+  f as default
 };
 //# sourceMappingURL=ReactiveCanvasBuilder.vue2.js.map