@gxp-dev/mod-ui 2.0.10 → 2.0.12

package/dist/components/compositions/elements/boolean/RadioBoolean.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,98 @@
+import e from "../../../ui/label/Label.js";
+import "../../../ui/label/index.js";
+import t from "../../../ui/radio-group/RadioGroup.js";
+import n from "../../../ui/radio-group/RadioGroupItem.js";
+import "../../../ui/radio-group/index.js";
+import r from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { computed as i, createBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, openBlock as f, toDisplayString as p, unref as m, useModel as h, withCtx as g } from "vue";
+//#region src/components/compositions/elements/boolean/RadioBoolean.vue?vue&type=script&setup=true&lang.ts
+var _ = { class: "flex items-center gap-2" }, v = { class: "flex items-center gap-2" }, y = /* @__PURE__ */ l({
+	__name: "RadioBoolean",
+	props: /* @__PURE__ */ u({
+		modelValue: { type: Boolean },
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		trueLabel: { default: "Yes" },
+		falseLabel: { default: "No" },
+		inline: { type: Boolean }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(l) {
+		let u = l, y = h(l, "modelValue"), b = i(() => y.value ? "true" : "false"), x = i(() => `${u.id ?? "radio-bool"}-true`), S = i(() => `${u.id ?? "radio-bool"}-false`);
+		function C(e) {
+			y.value = (Array.isArray(e) ? e[0] : e) === "true";
+		}
+		return (i, u) => (f(), a(m(r), {
+			label: l.label,
+			required: l.required,
+			"hide-label": l.hideLabel,
+			for: l.id,
+			"help-text": l.helpText,
+			errors: l.errors
+		}, {
+			default: g(() => [c(m(t), {
+				"model-value": b.value,
+				name: l.name,
+				disabled: l.disabled || l.readonly,
+				required: l.required,
+				"data-element-name": l.name ?? void 0,
+				class: d(l.inline ? "flex flex-row gap-4" : "grid gap-2"),
+				"onUpdate:modelValue": C
+			}, {
+				default: g(() => [o("div", _, [c(m(n), {
+					id: x.value,
+					value: "true"
+				}, null, 8, ["id"]), c(m(e), {
+					for: x.value,
+					class: "cursor-pointer"
+				}, {
+					default: g(() => [s(p(l.trueLabel), 1)]),
+					_: 1
+				}, 8, ["for"])]), o("div", v, [c(m(n), {
+					id: S.value,
+					value: "false"
+				}, null, 8, ["id"]), c(m(e), {
+					for: S.value,
+					class: "cursor-pointer"
+				}, {
+					default: g(() => [s(p(l.falseLabel), 1)]),
+					_: 1
+				}, 8, ["for"])])]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"name",
+				"disabled",
+				"required",
+				"data-element-name",
+				"class"
+			])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { y as default };
+
+//# sourceMappingURL=RadioBoolean.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/boolean/RadioBoolean.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioBoolean.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/boolean/RadioBoolean.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven radio composition for boolean values. Renders a\n * RadioGroup with two items: \"true\" and \"false\". Labels default to\n * \"Yes\" / \"No\" but can be customised via `trueLabel` / `falseLabel`.\n *\n *   <RadioBoolean v-model=\"agreed\" label=\"Agree?\" />\n *   <RadioBoolean\n *     v-model=\"agreed\"\n *     label=\"Agree?\"\n *     true-label=\"Of course\"\n *     false-label=\"Never\"\n *     inline\n *   />\n */\nimport { computed } from \"vue\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport { Label } from \"@/components/ui/label\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface RadioBooleanProps {\n  modelValue?: boolean\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  /** Label for the \"true\" option. Defaults to \"Yes\". */\n  trueLabel?: string\n  /** Label for the \"false\" option. Defaults to \"No\". */\n  falseLabel?: string\n  /** Render both choices on the same row. */\n  inline?: boolean\n}\n\nconst props = withDefaults(defineProps<RadioBooleanProps>(), {\n  errors: () => [],\n  trueLabel: \"Yes\",\n  falseLabel: \"No\",\n})\n\nconst model = defineModel<boolean>(\"modelValue\", { default: false })\n\nconst stringValue = computed<string>(() => (model.value ? \"true\" : \"false\"))\n\nconst trueId = computed(() => `${props.id ?? \"radio-bool\"}-true`)\nconst falseId = computed(() => `${props.id ?? \"radio-bool\"}-false`)\n\nfunction onUpdate(next: unknown): void {\n  const v = Array.isArray(next) ? next[0] : next\n  model.value = v === \"true\"\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <RadioGroup\n      :model-value=\"stringValue\"\n      :name=\"name\"\n      :disabled=\"disabled || readonly\"\n      :required=\"required\"\n      :data-element-name=\"name ?? undefined\"\n      :class=\"inline ? 'flex flex-row gap-4' : 'grid gap-2'\"\n      @update:model-value=\"onUpdate\"\n    >\n      <div class=\"flex items-center gap-2\">\n        <RadioGroupItem :id=\"trueId\" value=\"true\" />\n        <Label :for=\"trueId\" class=\"cursor-pointer\">{{ trueLabel }}</Label>\n      </div>\n      <div class=\"flex items-center gap-2\">\n        <RadioGroupItem :id=\"falseId\" value=\"false\" />\n        <Label :for=\"falseId\" class=\"cursor-pointer\">{{ falseLabel }}</Label>\n      </div>\n    </RadioGroup>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCA,IAAM,IAAQ,GAMR,IAAQ,EAAoB,GAAC,YAAgC,GAE7D,IAAc,QAAwB,EAAM,QAAQ,SAAS,OAAQ,GAErE,IAAS,QAAe,GAAG,EAAM,MAAM,aAAa,MAAM,GAC1D,IAAU,QAAe,GAAG,EAAM,MAAM,aAAa,OAAO;EAElE,SAAS,EAAS,GAAqB;GAErC,EAAM,SADI,MAAM,QAAQ,CAAI,IAAI,EAAK,KAAK,OACtB;EACtB;yBAIE,EA0Ba,EAAA,CAAA,GAAA;GAzBV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAmBI,CAjBb,EAiBa,EAAA,CAAA,GAAA;IAhBV,eAAa,EAAA;IACb,MAAM,EAAA;IACN,UAAU,EAAA,YAAY,EAAA;IACtB,UAAU,EAAA;IACV,qBAAmB,EAAA,QAAQ,KAAA;IAC3B,OAAK,EAAE,EAAA,SAAM,wBAAA,YAAA;IACb,uBAAoB;;qBAKf,CAHN,EAGM,OAHN,GAGM,CAFJ,EAA4C,EAAA,CAAA,GAAA;KAA3B,IAAI,EAAA;KAAQ,OAAM;yBACnC,EAAmE,EAAA,CAAA,GAAA;KAA3D,KAAK,EAAA;KAAQ,OAAM;;sBAAgC,CAAA,EAAA,EAAZ,EAAA,SAAS,GAAA,CAAA,CAAA,CAAA;;sBAE1D,EAGM,OAHN,GAGM,CAFJ,EAA8C,EAAA,CAAA,GAAA;KAA7B,IAAI,EAAA;KAAS,OAAM;yBACpC,EAAqE,EAAA,CAAA,GAAA;KAA7D,KAAK,EAAA;KAAS,OAAM;;sBAAiC,CAAA,EAAA,EAAb,EAAA,UAAU,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/compositions/elements/boolean/SwitchBoolean.js

@@ -0,0 +1,7 @@
+import e from "./SwitchBoolean.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/boolean/SwitchBoolean.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=SwitchBoolean.js.map

package/dist/components/compositions/elements/boolean/SwitchBoolean.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchBoolean.js","names":[],"sources":["../../../../../src/components/compositions/elements/boolean/SwitchBoolean.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven switch composition. Wraps the shadcn-vue Switch primitive\n * with `FieldFrame` chrome.\n *\n *   <SwitchBoolean v-model=\"notifications\" label=\"Notifications\" />\n *   <SwitchBoolean\n *     v-model=\"online\"\n *     label=\"Visibility\"\n *     true-label=\"Online\"\n *     false-label=\"Offline\"\n *   />\n */\nimport { computed } from \"vue\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { Label } from \"@/components/ui/label\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface SwitchBooleanProps {\n  modelValue?: boolean\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  /** Optional label suffix shown when the value is true. */\n  trueLabel?: string\n  /** Optional label suffix shown when the value is false. */\n  falseLabel?: string\n}\n\nconst props = withDefaults(defineProps<SwitchBooleanProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<boolean>(\"modelValue\", { default: false })\n\nconst stateLabel = computed(() =>\n  model.value\n    ? (props.trueLabel ?? \"\")\n    : (props.falseLabel ?? \"\"),\n)\n\nfunction onUpdate(checked: boolean): void {\n  model.value = checked\n}\n</script>\n\n<template>\n  <FieldFrame\n    :hide-label=\"true\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div class=\"flex items-center gap-3\">\n      <Switch\n        :id=\"id\"\n        :name=\"name\"\n        :disabled=\"disabled || readonly\"\n        :required=\"required\"\n        :model-value=\"model\"\n        :data-element-name=\"name ?? undefined\"\n        @update:model-value=\"onUpdate\"\n      />\n      <Label\n        v-if=\"!hideLabel && label\"\n        :for=\"id\"\n        :required=\"required\"\n        class=\"cursor-pointer\"\n        data-testid=\"field-frame-label\"\n      >\n        {{ label }}\n        <span\n          v-if=\"stateLabel\"\n          class=\"ml-2 text-xs font-normal text-muted-foreground\"\n        >\n          ({{ stateLabel }})\n        </span>\n      </Label>\n      <span\n        v-else-if=\"label\"\n        class=\"sr-only\"\n        data-testid=\"field-frame-label-sr\"\n      >\n        {{ label }}\n      </span>\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/boolean/SwitchBoolean.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,86 @@
+import e from "../../../ui/label/Label.js";
+import "../../../ui/label/index.js";
+import t from "../../../ui/switch/Switch.js";
+import "../../../ui/switch/index.js";
+import n from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, openBlock as f, toDisplayString as p, unref as m, useModel as h, withCtx as g } from "vue";
+//#region src/components/compositions/elements/boolean/SwitchBoolean.vue?vue&type=script&setup=true&lang.ts
+var _ = { class: "flex items-center gap-3" }, v = {
+	key: 0,
+	class: "ml-2 text-xs font-normal text-muted-foreground"
+}, y = {
+	key: 1,
+	class: "sr-only",
+	"data-testid": "field-frame-label-sr"
+}, b = /* @__PURE__ */ u({
+	__name: "SwitchBoolean",
+	props: /* @__PURE__ */ d({
+		modelValue: { type: Boolean },
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		trueLabel: {},
+		falseLabel: {}
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(u) {
+		let d = u, b = h(u, "modelValue"), x = r(() => b.value ? d.trueLabel ?? "" : d.falseLabel ?? "");
+		function S(e) {
+			b.value = e;
+		}
+		return (r, d) => (f(), i(m(n), {
+			"hide-label": !0,
+			for: u.id,
+			"help-text": u.helpText,
+			errors: u.errors
+		}, {
+			default: g(() => [s("div", _, [l(m(t), {
+				id: u.id,
+				name: u.name,
+				disabled: u.disabled || u.readonly,
+				required: u.required,
+				"model-value": b.value,
+				"data-element-name": u.name ?? void 0,
+				"onUpdate:modelValue": S
+			}, null, 8, [
+				"id",
+				"name",
+				"disabled",
+				"required",
+				"model-value",
+				"data-element-name"
+			]), !u.hideLabel && u.label ? (f(), i(m(e), {
+				key: 0,
+				for: u.id,
+				required: u.required,
+				class: "cursor-pointer",
+				"data-testid": "field-frame-label"
+			}, {
+				default: g(() => [c(p(u.label) + " ", 1), x.value ? (f(), o("span", v, " (" + p(x.value) + ") ", 1)) : a("", !0)]),
+				_: 1
+			}, 8, ["for", "required"])) : u.label ? (f(), o("span", y, p(u.label), 1)) : a("", !0)])]),
+			_: 1
+		}, 8, [
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { b as default };
+
+//# sourceMappingURL=SwitchBoolean.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/boolean/SwitchBoolean.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchBoolean.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/boolean/SwitchBoolean.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven switch composition. Wraps the shadcn-vue Switch primitive\n * with `FieldFrame` chrome.\n *\n *   <SwitchBoolean v-model=\"notifications\" label=\"Notifications\" />\n *   <SwitchBoolean\n *     v-model=\"online\"\n *     label=\"Visibility\"\n *     true-label=\"Online\"\n *     false-label=\"Offline\"\n *   />\n */\nimport { computed } from \"vue\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { Label } from \"@/components/ui/label\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface SwitchBooleanProps {\n  modelValue?: boolean\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  /** Optional label suffix shown when the value is true. */\n  trueLabel?: string\n  /** Optional label suffix shown when the value is false. */\n  falseLabel?: string\n}\n\nconst props = withDefaults(defineProps<SwitchBooleanProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<boolean>(\"modelValue\", { default: false })\n\nconst stateLabel = computed(() =>\n  model.value\n    ? (props.trueLabel ?? \"\")\n    : (props.falseLabel ?? \"\"),\n)\n\nfunction onUpdate(checked: boolean): void {\n  model.value = checked\n}\n</script>\n\n<template>\n  <FieldFrame\n    :hide-label=\"true\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div class=\"flex items-center gap-3\">\n      <Switch\n        :id=\"id\"\n        :name=\"name\"\n        :disabled=\"disabled || readonly\"\n        :required=\"required\"\n        :model-value=\"model\"\n        :data-element-name=\"name ?? undefined\"\n        @update:model-value=\"onUpdate\"\n      />\n      <Label\n        v-if=\"!hideLabel && label\"\n        :for=\"id\"\n        :required=\"required\"\n        class=\"cursor-pointer\"\n        data-testid=\"field-frame-label\"\n      >\n        {{ label }}\n        <span\n          v-if=\"stateLabel\"\n          class=\"ml-2 text-xs font-normal text-muted-foreground\"\n        >\n          ({{ stateLabel }})\n        </span>\n      </Label>\n      <span\n        v-else-if=\"label\"\n        class=\"sr-only\"\n        data-testid=\"field-frame-label-sr\"\n      >\n        {{ label }}\n      </span>\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmCA,IAAM,IAAQ,GAIR,IAAQ,EAAoB,GAAC,YAAgC,GAE7D,IAAa,QACjB,EAAM,QACD,EAAM,aAAa,KACnB,EAAM,cAAc,EAC3B;EAEA,SAAS,EAAS,GAAwB;GACxC,EAAM,QAAQ;EAChB;yBAIE,EAuCa,EAAA,CAAA,GAAA;GAtCV,cAAY;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAkCH,CAhCN,EAgCM,OAhCN,GAgCM,CA/BJ,EAQE,EAAA,CAAA,GAAA;IAPC,IAAI,EAAA;IACJ,MAAM,EAAA;IACN,UAAU,EAAA,YAAY,EAAA;IACtB,UAAU,EAAA;IACV,eAAa,EAAA;IACb,qBAAmB,EAAA,QAAQ,KAAA;IAC3B,uBAAoB;;;;;;;;QAGd,EAAA,aAAa,EAAA,SAAA,EAAA,GADtB,EAcQ,EAAA,CAAA,GAAA;;IAZL,KAAK,EAAA;IACL,UAAU,EAAA;IACX,OAAM;IACN,eAAY;;qBAED,CAAA,EAAA,EAAR,EAAA,KAAK,IAAG,KACX,CAAA,GACQ,EAAA,SAAA,EAAA,GADR,EAKO,QALP,GAGC,OACE,EAAG,EAAA,KAAU,IAAG,MACnB,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;iCAGW,EAAA,SAAA,EAAA,GADb,EAMO,QANP,GAMO,EADF,EAAA,KAAK,GAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,CAAA,CAAA,CAAA"}

package/dist/components/compositions/elements/builder/DependencyListBuilder.js

@@ -0,0 +1,7 @@
+import e from "./DependencyListBuilder.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/builder/DependencyListBuilder.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=DependencyListBuilder.js.map

package/dist/components/compositions/elements/builder/DependencyListBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DependencyListBuilder.js","names":[],"sources":["../../../../../src/components/compositions/elements/builder/DependencyListBuilder.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * DependencyListBuilder — visual editor for a list of conditional\n * rules of the shape \"when X happens then Y\".\n *\n * Three-pane layout (matches FormBuilder):\n *   - LEFT (Palette):    \"Add rule\" + a handful of rule templates.\n *   - MIDDLE (Canvas):   ordered list of rules; click a row to select.\n *   - RIGHT (Inspector): edits the selected rule — name, enabled,\n *                        conditions (add/edit/remove), actions\n *                        (add/edit/remove), conditionsLogic.\n *\n * State is owned by `dependencyListBuilderStore`. Two-way binds the\n * full `DependencyListBuilderSchema` via `defineModel`.\n */\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport { Plus, Trash2, X } from \"@lucide/vue\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  FieldFrame,\n  type FieldFrameProps,\n} from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Switch } from \"@/components/ui/switch\"\nimport {\n  useDependencyListBuilder,\n  type DependencyAction,\n  type DependencyActionType,\n  type DependencyCondition,\n  type DependencyListBuilderSchema,\n  type DependencyOperator,\n  type DependencyRule,\n  type DependencyRuleTemplate,\n} from \"@/stores/dependencyListBuilderStore\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DependencyListBuilderProps\n  extends Pick<FieldFrameProps, \"label\" | \"hideLabel\" | \"helpText\" | \"errors\"> {\n  /** Initial / current schema. Two-way bindable via v-model. */\n  modelValue?: DependencyListBuilderSchema\n  /**\n   * Identifier used to key the dependencyListBuilderStore. Defaults to\n   * a stable auto-generated id so multiple builders on the same page\n   * don't collide.\n   */\n  builderId?: string\n  name?: string | null\n  item?: Record<string, unknown>\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<DependencyListBuilderProps>(), {\n  errors: () => [],\n  item: () => ({}),\n})\n\nconst model = defineModel<DependencyListBuilderSchema | undefined>(\n  \"modelValue\",\n)\n\nlet nextAutoId = 0\nfunction makeAutoId(): string {\n  nextAutoId += 1\n  return `dep-list-builder-${Date.now()}-${nextAutoId}`\n}\nconst fallbackId = ref<string>(makeAutoId())\nconst builderId = computed<string>(() => props.builderId ?? fallbackId.value)\n\nconst builder = useDependencyListBuilder(builderId.value)\n\nfunction isSchema(value: unknown): value is DependencyListBuilderSchema {\n  if (typeof value !== \"object\" || value === null) {\n    return false\n  }\n  return Array.isArray((value as Record<string, unknown>).rules)\n}\n\nonMounted(() => {\n  const seed = model.value\n  if (isSchema(seed)) {\n    builder.loadSchema(seed)\n  }\n})\n\nwatch(\n  () => builder.schema.value,\n  (next) => {\n    model.value = next\n  },\n  { deep: true },\n)\n\nconst rules = computed<DependencyRule[]>(() => builder.schema.value.rules)\nconst selectedId = computed<string | null>(() => builder.selection.value.id)\nconst selectedRule = computed<DependencyRule | null>(() => {\n  const id = selectedId.value\n  if (!id) {\n    return null\n  }\n  return rules.value.find((r) => r.id === id) ?? null\n})\n\nconst OPERATORS: { label: string; value: DependencyOperator }[] = [\n  { label: \"equals\", value: \"equals\" },\n  { label: \"not equals\", value: \"not_equals\" },\n  { label: \"greater than\", value: \"greater_than\" },\n  { label: \"less than\", value: \"less_than\" },\n  { label: \"contains\", value: \"contains\" },\n  { label: \"is truthy\", value: \"is_truthy\" },\n  { label: \"is falsy\", value: \"is_falsy\" },\n]\n\nconst ACTION_TYPES: { label: string; value: DependencyActionType }[] = [\n  { label: \"Show field\", value: \"show\" },\n  { label: \"Hide field\", value: \"hide\" },\n  { label: \"Require field\", value: \"require\" },\n  { label: \"Set value\", value: \"set_value\" },\n  { label: \"Emit event\", value: \"emit_event\" },\n]\n\nconst LOGIC: { label: string; value: \"AND\" | \"OR\" }[] = [\n  { label: \"AND (all)\", value: \"AND\" },\n  { label: \"OR (any)\", value: \"OR\" },\n]\n\nconst PALETTE: { label: string; template: DependencyRuleTemplate }[] = [\n  { label: \"Add rule\", template: \"blank\" },\n  { label: \"Show field\", template: \"show-field\" },\n  { label: \"Hide field\", template: \"hide-field\" },\n  { label: \"Set value\", template: \"set-value\" },\n]\n\nfunction onPaletteAdd(template: DependencyRuleTemplate): void {\n  const id = builder.addRule(template)\n  builder.select(id)\n}\n\nfunction onRuleClick(ruleId: string): void {\n  builder.select(ruleId)\n}\n\nfunction onClearSelection(): void {\n  builder.select(null)\n}\n\nfunction onRemoveSelected(): void {\n  const id = selectedId.value\n  if (id) {\n    builder.removeRule(id)\n  }\n}\n\nfunction patchSelected(patch: Partial<Omit<DependencyRule, \"id\">>): void {\n  const id = selectedId.value\n  if (id) {\n    builder.updateRule(id, patch)\n  }\n}\n\nfunction onNameInput(e: Event): void {\n  patchSelected({ name: (e.target as HTMLInputElement).value })\n}\n\nfunction onEnabledChange(v: boolean): void {\n  patchSelected({ enabled: v })\n}\n\nfunction onLogicChange(v: unknown): void {\n  if (v === \"AND\" || v === \"OR\") {\n    patchSelected({ conditionsLogic: v })\n  }\n}\n\nfunction onAddCondition(): void {\n  const id = selectedId.value\n  if (id) {\n    builder.addCondition(id)\n  }\n}\n\nfunction onConditionFieldInput(index: number, e: Event): void {\n  const id = selectedId.value\n  if (id) {\n    builder.updateCondition(id, index, {\n      field: (e.target as HTMLInputElement).value,\n    })\n  }\n}\n\nfunction onConditionOperatorChange(index: number, v: unknown): void {\n  const id = selectedId.value\n  if (id && isOperator(v)) {\n    builder.updateCondition(id, index, { operator: v })\n  }\n}\n\nfunction onConditionValueInput(index: number, e: Event): void {\n  const id = selectedId.value\n  if (id) {\n    builder.updateCondition(id, index, {\n      value: (e.target as HTMLInputElement).value,\n    })\n  }\n}\n\nfunction onRemoveCondition(index: number): void {\n  const id = selectedId.value\n  if (id) {\n    builder.removeCondition(id, index)\n  }\n}\n\nfunction onAddAction(): void {\n  const id = selectedId.value\n  if (id) {\n    builder.addAction(id)\n  }\n}\n\nfunction onActionTypeChange(index: number, v: unknown): void {\n  const id = selectedId.value\n  if (id && isActionType(v)) {\n    builder.updateAction(id, index, { type: v })\n  }\n}\n\nfunction onActionTargetInput(index: number, e: Event): void {\n  const id = selectedId.value\n  if (id) {\n    builder.updateAction(id, index, {\n      target: (e.target as HTMLInputElement).value,\n    })\n  }\n}\n\nfunction onActionPayloadInput(index: number, e: Event): void {\n  const id = selectedId.value\n  if (id) {\n    builder.updateAction(id, index, {\n      payload: (e.target as HTMLInputElement).value,\n    })\n  }\n}\n\nfunction onRemoveAction(index: number): void {\n  const id = selectedId.value\n  if (id) {\n    builder.removeAction(id, index)\n  }\n}\n\nfunction isOperator(value: unknown): value is DependencyOperator {\n  return OPERATORS.some((o) => o.value === value)\n}\n\nfunction isActionType(value: unknown): value is DependencyActionType {\n  return ACTION_TYPES.some((a) => a.value === value)\n}\n\nfunction conditionValueString(c: DependencyCondition): string {\n  if (c.value === null || c.value === undefined) {\n    return \"\"\n  }\n  return String(c.value)\n}\n\nfunction actionTargetString(a: DependencyAction): string {\n  return a.target ?? \"\"\n}\n\nfunction actionPayloadString(a: DependencyAction): string {\n  if (a.payload === null || a.payload === undefined) {\n    return \"\"\n  }\n  return String(a.payload)\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"props.label\"\n    :hide-label=\"props.hideLabel\"\n    :help-text=\"props.helpText\"\n    :errors=\"props.errors\"\n    :class=\"props.classList\"\n  >\n    <div\n      :class=\"cn('gxp-dependency-list-builder grid gap-3 rounded-lg border bg-card')\"\n      style=\"grid-template-columns: 220px 1fr 320px; min-height: 24rem\"\n      data-testid=\"dependency-list-builder\"\n      :data-element-name=\"props.name ?? undefined\"\n    >\n      <aside\n        class=\"flex flex-col gap-2 border-r p-3 overflow-y-auto\"\n        data-testid=\"dependency-list-builder-palette\"\n      >\n        <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n          Rule palette\n        </h4>\n        <div class=\"flex flex-col gap-1\">\n          <button\n            v-for=\"entry in PALETTE\"\n            :key=\"entry.template\"\n            type=\"button\"\n            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\"\n            :data-testid=\"`dependency-list-builder-palette-${entry.template}`\"\n            @click=\"onPaletteAdd(entry.template)\"\n          >\n            <Plus class=\"mt-0.5 h-3.5 w-3.5 shrink-0\" />\n            <span class=\"font-medium\">{{ entry.label }}</span>\n          </button>\n        </div>\n      </aside>\n\n      <section\n        class=\"flex flex-col gap-3 overflow-y-auto p-3\"\n        data-testid=\"dependency-list-builder-canvas\"\n      >\n        <header class=\"flex items-center justify-between\">\n          <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n            Rules\n          </h4>\n          <Badge variant=\"outline\" class=\"font-mono text-[10px]\">\n            builder/dependency-list-builder\n          </Badge>\n        </header>\n\n        <p\n          v-if=\"rules.length === 0\"\n          class=\"py-6 text-center text-xs text-muted-foreground\"\n          data-testid=\"dependency-list-builder-canvas-empty\"\n        >\n          Click \"Add rule\" in the palette to create a rule.\n        </p>\n\n        <ul\n          v-else\n          class=\"flex flex-col gap-1 text-xs\"\n          data-testid=\"dependency-list-builder-canvas-list\"\n        >\n          <li\n            v-for=\"(rule, index) in rules\"\n            :key=\"rule.id\"\n            class=\"flex cursor-pointer items-center gap-2 rounded border bg-background px-2 py-1.5 transition-colors\"\n            :class=\"\n              selectedId === rule.id ? 'border-primary bg-accent/30' : ''\n            \"\n            :data-testid=\"`dependency-list-builder-row-${rule.id}`\"\n            @click=\"onRuleClick(rule.id)\"\n          >\n            <span class=\"w-6 text-right tabular-nums text-muted-foreground\">\n              {{ index + 1 }}.\n            </span>\n            <span class=\"font-medium\">{{ rule.name || \"(unnamed)\" }}</span>\n            <Badge variant=\"secondary\" class=\"font-mono text-[9px]\">\n              {{ rule.conditions.length }}c / {{ rule.actions.length }}a\n            </Badge>\n            <Switch\n              class=\"ml-auto\"\n              :model-value=\"rule.enabled\"\n              :data-testid=\"`dependency-list-builder-row-enabled-${rule.id}`\"\n              @click.stop\n              @update:model-value=\"\n                (v: boolean) => builder.updateRule(rule.id, { enabled: v })\n              \"\n            />\n          </li>\n        </ul>\n      </section>\n\n      <aside\n        class=\"flex flex-col gap-2 overflow-y-auto border-l p-3\"\n        data-testid=\"dependency-list-builder-inspector\"\n      >\n        <header class=\"flex items-center justify-between\">\n          <h4 class=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n            Inspector\n          </h4>\n          <Button\n            v-if=\"selectedId\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label=\"Clear selection\"\n            @click=\"onClearSelection\"\n          >\n            <X class=\"h-3.5 w-3.5\" />\n          </Button>\n        </header>\n\n        <p\n          v-if=\"!selectedRule\"\n          class=\"py-3 text-xs text-muted-foreground\"\n          data-testid=\"dependency-list-builder-inspector-empty\"\n        >\n          Select a rule on the canvas to edit it.\n        </p>\n\n        <div\n          v-else\n          class=\"flex flex-col gap-3\"\n          data-testid=\"dependency-list-builder-inspector-fields\"\n        >\n          <Card class=\"border-dashed\">\n            <CardHeader class=\"py-2\">\n              <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n                Rule\n              </CardTitle>\n            </CardHeader>\n            <CardContent class=\"flex flex-col gap-2 pb-3\">\n              <div class=\"flex flex-col gap-1\">\n                <Label for=\"dep-name\">Name</Label>\n                <Input\n                  id=\"dep-name\"\n                  :model-value=\"selectedRule.name\"\n                  data-testid=\"dependency-list-builder-inspector-name\"\n                  @input=\"onNameInput\"\n                />\n              </div>\n\n              <div class=\"flex items-center justify-between rounded border bg-background px-2 py-1\">\n                <Label for=\"dep-enabled\">Enabled</Label>\n                <Switch\n                  id=\"dep-enabled\"\n                  :model-value=\"selectedRule.enabled\"\n                  data-testid=\"dependency-list-builder-inspector-enabled\"\n                  @update:model-value=\"onEnabledChange\"\n                />\n              </div>\n\n              <div class=\"flex flex-col gap-1\">\n                <Label>Conditions logic</Label>\n                <Select\n                  :model-value=\"selectedRule.conditionsLogic\"\n                  @update:model-value=\"onLogicChange\"\n                >\n                  <SelectTrigger\n                    data-testid=\"dependency-list-builder-inspector-logic\"\n                  >\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem\n                      v-for=\"opt in LOGIC\"\n                      :key=\"opt.value\"\n                      :value=\"opt.value\"\n                    >\n                      {{ opt.label }}\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </CardContent>\n          </Card>\n\n          <Card class=\"border-dashed\">\n            <CardHeader class=\"flex flex-row items-center justify-between py-2\">\n              <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n                Conditions ({{ selectedRule.conditions.length }})\n              </CardTitle>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                data-testid=\"dependency-list-builder-add-condition\"\n                @click=\"onAddCondition\"\n              >\n                <Plus class=\"h-3.5 w-3.5\" />\n                Add\n              </Button>\n            </CardHeader>\n            <CardContent class=\"flex flex-col gap-3 pb-3\">\n              <p\n                v-if=\"selectedRule.conditions.length === 0\"\n                class=\"text-xs text-muted-foreground\"\n              >\n                No conditions yet.\n              </p>\n              <div\n                v-for=\"(condition, index) in selectedRule.conditions\"\n                :key=\"index\"\n                class=\"flex flex-col gap-1 rounded border bg-background p-2\"\n                :data-testid=\"`dependency-list-builder-condition-${index}`\"\n              >\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n                    #{{ index + 1 }}\n                  </span>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    aria-label=\"Remove condition\"\n                    :data-testid=\"`dependency-list-builder-condition-remove-${index}`\"\n                    @click=\"onRemoveCondition(index)\"\n                  >\n                    <Trash2 class=\"h-3.5 w-3.5\" />\n                  </Button>\n                </div>\n                <div class=\"flex flex-col gap-1\">\n                  <Label :for=\"`dep-cond-field-${index}`\">Field</Label>\n                  <Input\n                    :id=\"`dep-cond-field-${index}`\"\n                    :model-value=\"condition.field\"\n                    :data-testid=\"`dependency-list-builder-condition-field-${index}`\"\n                    @input=\"(e: Event) => onConditionFieldInput(index, e)\"\n                  />\n                </div>\n                <div class=\"flex flex-col gap-1\">\n                  <Label>Operator</Label>\n                  <Select\n                    :model-value=\"condition.operator\"\n                    @update:model-value=\"(v: unknown) => onConditionOperatorChange(index, v)\"\n                  >\n                    <SelectTrigger\n                      :data-testid=\"`dependency-list-builder-condition-operator-${index}`\"\n                    >\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem\n                        v-for=\"op in OPERATORS\"\n                        :key=\"op.value\"\n                        :value=\"op.value\"\n                      >\n                        {{ op.label }}\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div\n                  v-if=\"condition.operator !== 'is_truthy' && condition.operator !== 'is_falsy'\"\n                  class=\"flex flex-col gap-1\"\n                >\n                  <Label :for=\"`dep-cond-value-${index}`\">Value</Label>\n                  <Input\n                    :id=\"`dep-cond-value-${index}`\"\n                    :model-value=\"conditionValueString(condition)\"\n                    :data-testid=\"`dependency-list-builder-condition-value-${index}`\"\n                    @input=\"(e: Event) => onConditionValueInput(index, e)\"\n                  />\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n\n          <Card class=\"border-dashed\">\n            <CardHeader class=\"flex flex-row items-center justify-between py-2\">\n              <CardTitle class=\"font-mono text-xs uppercase tracking-wide\">\n                Actions ({{ selectedRule.actions.length }})\n              </CardTitle>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                data-testid=\"dependency-list-builder-add-action\"\n                @click=\"onAddAction\"\n              >\n                <Plus class=\"h-3.5 w-3.5\" />\n                Add\n              </Button>\n            </CardHeader>\n            <CardContent class=\"flex flex-col gap-3 pb-3\">\n              <p\n                v-if=\"selectedRule.actions.length === 0\"\n                class=\"text-xs text-muted-foreground\"\n              >\n                No actions yet.\n              </p>\n              <div\n                v-for=\"(action, index) in selectedRule.actions\"\n                :key=\"index\"\n                class=\"flex flex-col gap-1 rounded border bg-background p-2\"\n                :data-testid=\"`dependency-list-builder-action-${index}`\"\n              >\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-[10px] font-semibold uppercase tracking-wide text-muted-foreground\">\n                    #{{ index + 1 }}\n                  </span>\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    aria-label=\"Remove action\"\n                    :data-testid=\"`dependency-list-builder-action-remove-${index}`\"\n                    @click=\"onRemoveAction(index)\"\n                  >\n                    <Trash2 class=\"h-3.5 w-3.5\" />\n                  </Button>\n                </div>\n                <div class=\"flex flex-col gap-1\">\n                  <Label>Type</Label>\n                  <Select\n                    :model-value=\"action.type\"\n                    @update:model-value=\"(v: unknown) => onActionTypeChange(index, v)\"\n                  >\n                    <SelectTrigger\n                      :data-testid=\"`dependency-list-builder-action-type-${index}`\"\n                    >\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem\n                        v-for=\"t in ACTION_TYPES\"\n                        :key=\"t.value\"\n                        :value=\"t.value\"\n                      >\n                        {{ t.label }}\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"flex flex-col gap-1\">\n                  <Label :for=\"`dep-action-target-${index}`\">Target</Label>\n                  <Input\n                    :id=\"`dep-action-target-${index}`\"\n                    :model-value=\"actionTargetString(action)\"\n                    :data-testid=\"`dependency-list-builder-action-target-${index}`\"\n                    @input=\"(e: Event) => onActionTargetInput(index, e)\"\n                  />\n                </div>\n                <div class=\"flex flex-col gap-1\">\n                  <Label :for=\"`dep-action-payload-${index}`\">Payload</Label>\n                  <Input\n                    :id=\"`dep-action-payload-${index}`\"\n                    :model-value=\"actionPayloadString(action)\"\n                    :data-testid=\"`dependency-list-builder-action-payload-${index}`\"\n                    @input=\"(e: Event) => onActionPayloadInput(index, e)\"\n                  />\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n\n          <div class=\"flex items-center gap-1\">\n            <Button\n              variant=\"destructive\"\n              size=\"sm\"\n              class=\"ml-auto\"\n              data-testid=\"dependency-list-builder-remove\"\n              @click=\"onRemoveSelected\"\n            >\n              <Trash2 class=\"h-3.5 w-3.5\" />\n              Remove rule\n            </Button>\n          </div>\n        </div>\n      </aside>\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":""}