@gxp-dev/mod-ui 2.0.12 → 2.0.14

package/dist/chunks/DependencyListBuilder-Cf8AMMJM.js

@@ -0,0 +1,557 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./utils-DAErOi9O.js";
+import { n } from "./badge-4iQG4kuk.js";
+import { n as r } from "./button-BAwcISlK.js";
+import { n as i, o as a, r as o, s } from "./card-DAfWnvro.js";
+import { t as c } from "./input-tw5ZQGKQ.js";
+import { n as l } from "./label-I5voJX5E.js";
+import { l as u, n as d, s as f, t as p, u as m } from "./select-DZcdBLiy.js";
+import { r as h } from "./switch--qhuMfjn.js";
+import { r as g } from "./dependencyListBuilderStore-CVWhMyuq.js";
+import { t as ee } from "./field-frame-n5oLDNBT.js";
+import { Fragment as _, computed as v, createBlock as y, createCommentVNode as b, createElementBlock as x, createElementVNode as S, createTextVNode as C, createVNode as w, defineComponent as T, mergeModels as E, normalizeClass as D, onMounted as te, openBlock as O, ref as ne, renderList as k, toDisplayString as A, unref as j, useModel as re, watch as ie, withCtx as M, withModifiers as ae } from "vue";
+import { Plus as N, Trash2 as P, X as oe } from "@lucide/vue";
+//#region src/components/compositions/elements/builder/DependencyListBuilder.vue?vue&type=script&setup=true&lang.ts
+var se = ["data-element-name"], ce = {
+	class: "flex flex-col gap-2 border-r p-3 overflow-y-auto",
+	"data-testid": "dependency-list-builder-palette"
+}, le = { class: "flex flex-col gap-1" }, ue = ["data-testid", "onClick"], de = { class: "font-medium" }, F = {
+	class: "flex flex-col gap-3 overflow-y-auto p-3",
+	"data-testid": "dependency-list-builder-canvas"
+}, I = { class: "flex items-center justify-between" }, L = {
+	key: 0,
+	class: "py-6 text-center text-xs text-muted-foreground",
+	"data-testid": "dependency-list-builder-canvas-empty"
+}, R = {
+	key: 1,
+	class: "flex flex-col gap-1 text-xs",
+	"data-testid": "dependency-list-builder-canvas-list"
+}, z = ["data-testid", "onClick"], B = { class: "w-6 text-right tabular-nums text-muted-foreground" }, V = { class: "font-medium" }, H = {
+	class: "flex flex-col gap-2 overflow-y-auto border-l p-3",
+	"data-testid": "dependency-list-builder-inspector"
+}, fe = { class: "flex items-center justify-between" }, pe = {
+	key: 0,
+	class: "py-3 text-xs text-muted-foreground",
+	"data-testid": "dependency-list-builder-inspector-empty"
+}, me = {
+	key: 1,
+	class: "flex flex-col gap-3",
+	"data-testid": "dependency-list-builder-inspector-fields"
+}, he = { class: "flex flex-col gap-1" }, ge = { class: "flex items-center justify-between rounded border bg-background px-2 py-1" }, _e = { class: "flex flex-col gap-1" }, ve = {
+	key: 0,
+	class: "text-xs text-muted-foreground"
+}, ye = ["data-testid"], be = { class: "flex items-center justify-between" }, xe = { class: "text-[10px] font-semibold uppercase tracking-wide text-muted-foreground" }, Se = { class: "flex flex-col gap-1" }, Ce = { class: "flex flex-col gap-1" }, we = {
+	key: 0,
+	class: "flex flex-col gap-1"
+}, Te = {
+	key: 0,
+	class: "text-xs text-muted-foreground"
+}, Ee = ["data-testid"], De = { class: "flex items-center justify-between" }, Oe = { class: "text-[10px] font-semibold uppercase tracking-wide text-muted-foreground" }, ke = { class: "flex flex-col gap-1" }, Ae = { class: "flex flex-col gap-1" }, je = { class: "flex flex-col gap-1" }, Me = { class: "flex items-center gap-1" }, U = /* @__PURE__ */ T({
+	__name: "DependencyListBuilder",
+	props: /* @__PURE__ */ E({
+		modelValue: {},
+		builderId: {},
+		name: {},
+		item: { default: () => ({}) },
+		classList: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let T = e, E = re(e, "modelValue"), U = 0;
+		function W() {
+			return U += 1, `dep-list-builder-${Date.now()}-${U}`;
+		}
+		let G = ne(W()), K = g(v(() => T.builderId ?? G.value).value);
+		function Ne(e) {
+			return typeof e != "object" || !e ? !1 : Array.isArray(e.rules);
+		}
+		te(() => {
+			let e = E.value;
+			Ne(e) && K.loadSchema(e);
+		}), ie(() => K.schema.value, (e) => {
+			E.value = e;
+		}, { deep: !0 });
+		let q = v(() => K.schema.value.rules), J = v(() => K.selection.value.id), Y = v(() => {
+			let e = J.value;
+			return e ? q.value.find((t) => t.id === e) ?? null : null;
+		}), X = [
+			{
+				label: "equals",
+				value: "equals"
+			},
+			{
+				label: "not equals",
+				value: "not_equals"
+			},
+			{
+				label: "greater than",
+				value: "greater_than"
+			},
+			{
+				label: "less than",
+				value: "less_than"
+			},
+			{
+				label: "contains",
+				value: "contains"
+			},
+			{
+				label: "is truthy",
+				value: "is_truthy"
+			},
+			{
+				label: "is falsy",
+				value: "is_falsy"
+			}
+		], Z = [
+			{
+				label: "Show field",
+				value: "show"
+			},
+			{
+				label: "Hide field",
+				value: "hide"
+			},
+			{
+				label: "Require field",
+				value: "require"
+			},
+			{
+				label: "Set value",
+				value: "set_value"
+			},
+			{
+				label: "Emit event",
+				value: "emit_event"
+			}
+		], Pe = [{
+			label: "AND (all)",
+			value: "AND"
+		}, {
+			label: "OR (any)",
+			value: "OR"
+		}], Fe = [
+			{
+				label: "Add rule",
+				template: "blank"
+			},
+			{
+				label: "Show field",
+				template: "show-field"
+			},
+			{
+				label: "Hide field",
+				template: "hide-field"
+			},
+			{
+				label: "Set value",
+				template: "set-value"
+			}
+		];
+		function Ie(e) {
+			let t = K.addRule(e);
+			K.select(t);
+		}
+		function Le(e) {
+			K.select(e);
+		}
+		function Re() {
+			K.select(null);
+		}
+		function ze() {
+			let e = J.value;
+			e && K.removeRule(e);
+		}
+		function Q(e) {
+			let t = J.value;
+			t && K.updateRule(t, e);
+		}
+		function Be(e) {
+			Q({ name: e.target.value });
+		}
+		function Ve(e) {
+			Q({ enabled: e });
+		}
+		function $(e) {
+			(e === "AND" || e === "OR") && Q({ conditionsLogic: e });
+		}
+		function He() {
+			let e = J.value;
+			e && K.addCondition(e);
+		}
+		function Ue(e, t) {
+			let n = J.value;
+			n && K.updateCondition(n, e, { field: t.target.value });
+		}
+		function We(e, t) {
+			let n = J.value;
+			n && Qe(t) && K.updateCondition(n, e, { operator: t });
+		}
+		function Ge(e, t) {
+			let n = J.value;
+			n && K.updateCondition(n, e, { value: t.target.value });
+		}
+		function Ke(e) {
+			let t = J.value;
+			t && K.removeCondition(t, e);
+		}
+		function qe() {
+			let e = J.value;
+			e && K.addAction(e);
+		}
+		function Je(e, t) {
+			let n = J.value;
+			n && $e(t) && K.updateAction(n, e, { type: t });
+		}
+		function Ye(e, t) {
+			let n = J.value;
+			n && K.updateAction(n, e, { target: t.target.value });
+		}
+		function Xe(e, t) {
+			let n = J.value;
+			n && K.updateAction(n, e, { payload: t.target.value });
+		}
+		function Ze(e) {
+			let t = J.value;
+			t && K.removeAction(t, e);
+		}
+		function Qe(e) {
+			return X.some((t) => t.value === e);
+		}
+		function $e(e) {
+			return Z.some((t) => t.value === e);
+		}
+		function et(e) {
+			return e.value === null || e.value === void 0 ? "" : String(e.value);
+		}
+		function tt(e) {
+			return e.target ?? "";
+		}
+		function nt(e) {
+			return e.payload === null || e.payload === void 0 ? "" : String(e.payload);
+		}
+		return (e, g) => (O(), y(j(ee), {
+			label: T.label,
+			"hide-label": T.hideLabel,
+			"help-text": T.helpText,
+			errors: T.errors,
+			class: D(T.classList)
+		}, {
+			default: M(() => [S("div", {
+				class: D(j(t)("gxp-dependency-list-builder grid gap-3 rounded-lg border bg-card")),
+				style: {
+					"grid-template-columns": "220px 1fr 320px",
+					"min-height": "24rem"
+				},
+				"data-testid": "dependency-list-builder",
+				"data-element-name": T.name ?? void 0
+			}, [
+				S("aside", ce, [g[1] ||= S("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Rule palette ", -1), S("div", le, [(O(), x(_, null, k(Fe, (e) => S("button", {
+					key: e.template,
+					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": `dependency-list-builder-palette-${e.template}`,
+					onClick: (t) => Ie(e.template)
+				}, [w(j(N), { class: "mt-0.5 h-3.5 w-3.5 shrink-0" }), S("span", de, A(e.label), 1)], 8, ue)), 64))])]),
+				S("section", F, [S("header", I, [g[3] ||= S("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Rules ", -1), w(j(n), {
+					variant: "outline",
+					class: "font-mono text-[10px]"
+				}, {
+					default: M(() => [...g[2] ||= [C(" builder/dependency-list-builder ", -1)]]),
+					_: 1
+				})]), q.value.length === 0 ? (O(), x("p", L, " Click \"Add rule\" in the palette to create a rule. ")) : (O(), x("ul", R, [(O(!0), x(_, null, k(q.value, (e, t) => (O(), x("li", {
+					key: e.id,
+					class: D(["flex cursor-pointer items-center gap-2 rounded border bg-background px-2 py-1.5 transition-colors", J.value === e.id ? "border-primary bg-accent/30" : ""]),
+					"data-testid": `dependency-list-builder-row-${e.id}`,
+					onClick: (t) => Le(e.id)
+				}, [
+					S("span", B, A(t + 1) + ". ", 1),
+					S("span", V, A(e.name || "(unnamed)"), 1),
+					w(j(n), {
+						variant: "secondary",
+						class: "font-mono text-[9px]"
+					}, {
+						default: M(() => [C(A(e.conditions.length) + "c / " + A(e.actions.length) + "a ", 1)]),
+						_: 2
+					}, 1024),
+					w(j(h), {
+						class: "ml-auto",
+						"model-value": e.enabled,
+						"data-testid": `dependency-list-builder-row-enabled-${e.id}`,
+						onClick: g[0] ||= ae(() => {}, ["stop"]),
+						"onUpdate:modelValue": (t) => j(K).updateRule(e.id, { enabled: t })
+					}, null, 8, [
+						"model-value",
+						"data-testid",
+						"onUpdate:modelValue"
+					])
+				], 10, z))), 128))]))]),
+				S("aside", H, [S("header", fe, [g[4] ||= S("h4", { class: "text-xs font-semibold uppercase tracking-wide text-muted-foreground" }, " Inspector ", -1), J.value ? (O(), y(j(r), {
+					key: 0,
+					variant: "ghost",
+					size: "icon-sm",
+					"aria-label": "Clear selection",
+					onClick: Re
+				}, {
+					default: M(() => [w(j(oe), { class: "h-3.5 w-3.5" })]),
+					_: 1
+				})) : b("", !0)]), Y.value ? (O(), x("div", me, [
+					w(j(s), { class: "border-dashed" }, {
+						default: M(() => [w(j(o), { class: "py-2" }, {
+							default: M(() => [w(j(i), { class: "font-mono text-xs uppercase tracking-wide" }, {
+								default: M(() => [...g[5] ||= [C(" Rule ", -1)]]),
+								_: 1
+							})]),
+							_: 1
+						}), w(j(a), { class: "flex flex-col gap-2 pb-3" }, {
+							default: M(() => [
+								S("div", he, [w(j(l), { for: "dep-name" }, {
+									default: M(() => [...g[6] ||= [C("Name", -1)]]),
+									_: 1
+								}), w(j(c), {
+									id: "dep-name",
+									"model-value": Y.value.name,
+									"data-testid": "dependency-list-builder-inspector-name",
+									onInput: Be
+								}, null, 8, ["model-value"])]),
+								S("div", ge, [w(j(l), { for: "dep-enabled" }, {
+									default: M(() => [...g[7] ||= [C("Enabled", -1)]]),
+									_: 1
+								}), w(j(h), {
+									id: "dep-enabled",
+									"model-value": Y.value.enabled,
+									"data-testid": "dependency-list-builder-inspector-enabled",
+									"onUpdate:modelValue": Ve
+								}, null, 8, ["model-value"])]),
+								S("div", _e, [w(j(l), null, {
+									default: M(() => [...g[8] ||= [C("Conditions logic", -1)]]),
+									_: 1
+								}), w(j(m), {
+									"model-value": Y.value.conditionsLogic,
+									"onUpdate:modelValue": $
+								}, {
+									default: M(() => [w(j(d), { "data-testid": "dependency-list-builder-inspector-logic" }, {
+										default: M(() => [w(j(p))]),
+										_: 1
+									}), w(j(u), null, {
+										default: M(() => [(O(), x(_, null, k(Pe, (e) => w(j(f), {
+											key: e.value,
+											value: e.value
+										}, {
+											default: M(() => [C(A(e.label), 1)]),
+											_: 2
+										}, 1032, ["value"])), 64))]),
+										_: 1
+									})]),
+									_: 1
+								}, 8, ["model-value"])])
+							]),
+							_: 1
+						})]),
+						_: 1
+					}),
+					w(j(s), { class: "border-dashed" }, {
+						default: M(() => [w(j(o), { class: "flex flex-row items-center justify-between py-2" }, {
+							default: M(() => [w(j(i), { class: "font-mono text-xs uppercase tracking-wide" }, {
+								default: M(() => [C(" Conditions (" + A(Y.value.conditions.length) + ") ", 1)]),
+								_: 1
+							}), w(j(r), {
+								variant: "outline",
+								size: "sm",
+								"data-testid": "dependency-list-builder-add-condition",
+								onClick: He
+							}, {
+								default: M(() => [w(j(N), { class: "h-3.5 w-3.5" }), g[9] ||= C(" Add ", -1)]),
+								_: 1
+							})]),
+							_: 1
+						}), w(j(a), { class: "flex flex-col gap-3 pb-3" }, {
+							default: M(() => [Y.value.conditions.length === 0 ? (O(), x("p", ve, " No conditions yet. ")) : b("", !0), (O(!0), x(_, null, k(Y.value.conditions, (e, t) => (O(), x("div", {
+								key: t,
+								class: "flex flex-col gap-1 rounded border bg-background p-2",
+								"data-testid": `dependency-list-builder-condition-${t}`
+							}, [
+								S("div", be, [S("span", xe, " #" + A(t + 1), 1), w(j(r), {
+									variant: "ghost",
+									size: "icon-sm",
+									"aria-label": "Remove condition",
+									"data-testid": `dependency-list-builder-condition-remove-${t}`,
+									onClick: (e) => Ke(t)
+								}, {
+									default: M(() => [w(j(P), { class: "h-3.5 w-3.5" })]),
+									_: 1
+								}, 8, ["data-testid", "onClick"])]),
+								S("div", Se, [w(j(l), { for: `dep-cond-field-${t}` }, {
+									default: M(() => [...g[10] ||= [C("Field", -1)]]),
+									_: 1
+								}, 8, ["for"]), w(j(c), {
+									id: `dep-cond-field-${t}`,
+									"model-value": e.field,
+									"data-testid": `dependency-list-builder-condition-field-${t}`,
+									onInput: (e) => Ue(t, e)
+								}, null, 8, [
+									"id",
+									"model-value",
+									"data-testid",
+									"onInput"
+								])]),
+								S("div", Ce, [w(j(l), null, {
+									default: M(() => [...g[11] ||= [C("Operator", -1)]]),
+									_: 1
+								}), w(j(m), {
+									"model-value": e.operator,
+									"onUpdate:modelValue": (e) => We(t, e)
+								}, {
+									default: M(() => [w(j(d), { "data-testid": `dependency-list-builder-condition-operator-${t}` }, {
+										default: M(() => [w(j(p))]),
+										_: 1
+									}, 8, ["data-testid"]), w(j(u), null, {
+										default: M(() => [(O(), x(_, null, k(X, (e) => w(j(f), {
+											key: e.value,
+											value: e.value
+										}, {
+											default: M(() => [C(A(e.label), 1)]),
+											_: 2
+										}, 1032, ["value"])), 64))]),
+										_: 1
+									})]),
+									_: 2
+								}, 1032, ["model-value", "onUpdate:modelValue"])]),
+								e.operator !== "is_truthy" && e.operator !== "is_falsy" ? (O(), x("div", we, [w(j(l), { for: `dep-cond-value-${t}` }, {
+									default: M(() => [...g[12] ||= [C("Value", -1)]]),
+									_: 1
+								}, 8, ["for"]), w(j(c), {
+									id: `dep-cond-value-${t}`,
+									"model-value": et(e),
+									"data-testid": `dependency-list-builder-condition-value-${t}`,
+									onInput: (e) => Ge(t, e)
+								}, null, 8, [
+									"id",
+									"model-value",
+									"data-testid",
+									"onInput"
+								])])) : b("", !0)
+							], 8, ye))), 128))]),
+							_: 1
+						})]),
+						_: 1
+					}),
+					w(j(s), { class: "border-dashed" }, {
+						default: M(() => [w(j(o), { class: "flex flex-row items-center justify-between py-2" }, {
+							default: M(() => [w(j(i), { class: "font-mono text-xs uppercase tracking-wide" }, {
+								default: M(() => [C(" Actions (" + A(Y.value.actions.length) + ") ", 1)]),
+								_: 1
+							}), w(j(r), {
+								variant: "outline",
+								size: "sm",
+								"data-testid": "dependency-list-builder-add-action",
+								onClick: qe
+							}, {
+								default: M(() => [w(j(N), { class: "h-3.5 w-3.5" }), g[13] ||= C(" Add ", -1)]),
+								_: 1
+							})]),
+							_: 1
+						}), w(j(a), { class: "flex flex-col gap-3 pb-3" }, {
+							default: M(() => [Y.value.actions.length === 0 ? (O(), x("p", Te, " No actions yet. ")) : b("", !0), (O(!0), x(_, null, k(Y.value.actions, (e, t) => (O(), x("div", {
+								key: t,
+								class: "flex flex-col gap-1 rounded border bg-background p-2",
+								"data-testid": `dependency-list-builder-action-${t}`
+							}, [
+								S("div", De, [S("span", Oe, " #" + A(t + 1), 1), w(j(r), {
+									variant: "ghost",
+									size: "icon-sm",
+									"aria-label": "Remove action",
+									"data-testid": `dependency-list-builder-action-remove-${t}`,
+									onClick: (e) => Ze(t)
+								}, {
+									default: M(() => [w(j(P), { class: "h-3.5 w-3.5" })]),
+									_: 1
+								}, 8, ["data-testid", "onClick"])]),
+								S("div", ke, [w(j(l), null, {
+									default: M(() => [...g[14] ||= [C("Type", -1)]]),
+									_: 1
+								}), w(j(m), {
+									"model-value": e.type,
+									"onUpdate:modelValue": (e) => Je(t, e)
+								}, {
+									default: M(() => [w(j(d), { "data-testid": `dependency-list-builder-action-type-${t}` }, {
+										default: M(() => [w(j(p))]),
+										_: 1
+									}, 8, ["data-testid"]), w(j(u), null, {
+										default: M(() => [(O(), x(_, null, k(Z, (e) => w(j(f), {
+											key: e.value,
+											value: e.value
+										}, {
+											default: M(() => [C(A(e.label), 1)]),
+											_: 2
+										}, 1032, ["value"])), 64))]),
+										_: 1
+									})]),
+									_: 2
+								}, 1032, ["model-value", "onUpdate:modelValue"])]),
+								S("div", Ae, [w(j(l), { for: `dep-action-target-${t}` }, {
+									default: M(() => [...g[15] ||= [C("Target", -1)]]),
+									_: 1
+								}, 8, ["for"]), w(j(c), {
+									id: `dep-action-target-${t}`,
+									"model-value": tt(e),
+									"data-testid": `dependency-list-builder-action-target-${t}`,
+									onInput: (e) => Ye(t, e)
+								}, null, 8, [
+									"id",
+									"model-value",
+									"data-testid",
+									"onInput"
+								])]),
+								S("div", je, [w(j(l), { for: `dep-action-payload-${t}` }, {
+									default: M(() => [...g[16] ||= [C("Payload", -1)]]),
+									_: 1
+								}, 8, ["for"]), w(j(c), {
+									id: `dep-action-payload-${t}`,
+									"model-value": nt(e),
+									"data-testid": `dependency-list-builder-action-payload-${t}`,
+									onInput: (e) => Xe(t, e)
+								}, null, 8, [
+									"id",
+									"model-value",
+									"data-testid",
+									"onInput"
+								])])
+							], 8, Ee))), 128))]),
+							_: 1
+						})]),
+						_: 1
+					}),
+					S("div", Me, [w(j(r), {
+						variant: "destructive",
+						size: "sm",
+						class: "ml-auto",
+						"data-testid": "dependency-list-builder-remove",
+						onClick: ze
+					}, {
+						default: M(() => [w(j(P), { class: "h-3.5 w-3.5" }), g[17] ||= C(" Remove rule ", -1)]),
+						_: 1
+					})])
+				])) : (O(), x("p", pe, " Select a rule on the canvas to edit it. "))])
+			], 10, se)]),
+			_: 1
+		}, 8, [
+			"label",
+			"hide-label",
+			"help-text",
+			"errors",
+			"class"
+		]));
+	}
+}), W = /* @__PURE__ */ e({ default: () => G }), G = U;
+//#endregion
+export { W as n, G as t };
+
+//# sourceMappingURL=DependencyListBuilder-Cf8AMMJM.js.map