@gxp-dev/mod-ui 2.0.10 → 2.0.14

package/dist/chunks/SelectMultipleOption-qwlcwb88.js

@@ -0,0 +1,127 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./badge-4iQG4kuk.js";
+import { n } from "./button-BAwcISlK.js";
+import { c as r, i, l as a, n as o, o as s, r as c, s as l } from "./combobox-BrYBRIqW.js";
+import { t as u } from "./field-frame-n5oLDNBT.js";
+import { Fragment as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createTextVNode as _, createVNode as v, defineComponent as y, mergeModels as b, normalizeClass as x, openBlock as S, renderList as C, toDisplayString as w, unref as T, useModel as E, withCtx as D } from "vue";
+import { X as O } from "@lucide/vue";
+//#region src/components/compositions/elements/option-select/SelectMultipleOption.vue?vue&type=script&setup=true&lang.ts
+var k = ["data-testid"], A = /* @__PURE__ */ y({
+	__name: "SelectMultipleOption",
+	props: /* @__PURE__ */ b({
+		modelValue: {},
+		options: { default: () => [] },
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let y = e, b = E(e, "modelValue");
+		function A(e) {
+			return typeof e == "string" ? {
+				label: e,
+				value: e,
+				disabled: !1
+			} : {
+				label: e.label,
+				value: String(e.value),
+				disabled: !!e.disabled
+			};
+		}
+		let j = f(() => (y.options ?? []).map(A)), M = f(() => {
+			let e = b.value;
+			return e ? Array.isArray(e) ? e.map((e) => String(e)) : [String(e)] : [];
+		}), N = (e) => j.value.find((t) => t.value === e)?.label ?? e;
+		function P(e) {
+			Array.isArray(e) ? b.value = e.map((e) => String(e)) : e == null ? b.value = [] : b.value = [String(e)];
+		}
+		function F(e) {
+			b.value = M.value.filter((t) => t !== e);
+		}
+		return (f, y) => (S(), p(T(u), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: D(() => [M.value.length ? (S(), h("div", {
+				key: 0,
+				class: "flex flex-wrap gap-1",
+				"data-testid": `${e.id ?? "select-multiple"}-chips`
+			}, [(S(!0), h(d, null, C(M.value, (r) => (S(), p(T(t), {
+				key: r,
+				variant: "secondary",
+				class: "flex items-center gap-1"
+			}, {
+				default: D(() => [g("span", null, w(N(r)), 1), !e.disabled && !e.readonly ? (S(), p(T(n), {
+					key: 0,
+					type: "button",
+					variant: "ghost",
+					size: "icon-sm",
+					class: "h-4 w-4 p-0",
+					"aria-label": `Remove ${N(r)}`,
+					onClick: (e) => F(r)
+				}, {
+					default: D(() => [v(T(O), { class: "h-3 w-3" })]),
+					_: 1
+				}, 8, ["aria-label", "onClick"])) : m("", !0)]),
+				_: 2
+			}, 1024))), 128))], 8, k)) : m("", !0), v(T(a), {
+				"model-value": M.value,
+				multiple: "",
+				disabled: e.disabled || e.readonly,
+				"onUpdate:modelValue": P
+			}, {
+				default: D(() => [v(T(r), {
+					"data-element-name": e.name ?? void 0,
+					class: x(e.errors.length ? "border-destructive ring-destructive" : "")
+				}, {
+					default: D(() => [v(T(i), {
+						id: e.id,
+						placeholder: e.placeholder ?? "Select multiple…"
+					}, null, 8, ["id", "placeholder"])]),
+					_: 1
+				}, 8, ["data-element-name", "class"]), v(T(l), null, {
+					default: D(() => [v(T(s), null, {
+						default: D(() => [...y[0] ||= [_("No options match.", -1)]]),
+						_: 1
+					}), (S(!0), h(d, null, C(j.value, (e) => (S(), p(T(c), {
+						key: e.value,
+						value: e.value,
+						disabled: e.disabled
+					}, {
+						default: D(() => [v(T(o)), _(" " + w(e.label), 1)]),
+						_: 2
+					}, 1032, ["value", "disabled"]))), 128))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, ["model-value", "disabled"])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), j = /* @__PURE__ */ e({ default: () => M }), M = A;
+//#endregion
+export { j as n, M as t };
+
+//# sourceMappingURL=SelectMultipleOption-qwlcwb88.js.map

package/dist/chunks/SelectMultipleOption-qwlcwb88.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMultipleOption-qwlcwb88.js","names":[],"sources":["../../src/components/compositions/elements/option-select/SelectMultipleOption.vue","../../src/components/compositions/elements/option-select/SelectMultipleOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven multi-select composition. Wraps the shadcn Combobox\n * primitive with badge chips showing the current selection.\n *\n *   <SelectMultipleOption v-model=\"tags\" :options=\"[...]\" label=\"Tags\" />\n */\nimport { computed } from \"vue\"\nimport { X } from \"@lucide/vue\"\nimport type { SelectOptionLike } from \"@/definitions/shared/select-options\"\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n} from \"@/components/ui/combobox\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface SelectMultipleOptionProps {\n  modelValue?: Array<string | number> | null\n  options?: SelectOptionLike[]\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nconst props = withDefaults(defineProps<SelectMultipleOptionProps>(), {\n  errors: () => [],\n  options: () => [],\n})\n\nconst model = defineModel<Array<string | number> | null>(\"modelValue\")\n\ninterface NormalisedOption {\n  label: string\n  value: string\n  disabled: boolean\n}\n\nfunction normaliseOption(opt: SelectOptionLike): NormalisedOption {\n  if (typeof opt === \"string\") {\n    return { label: opt, value: opt, disabled: false }\n  }\n  return {\n    label: opt.label,\n    value: String(opt.value),\n    disabled: Boolean(opt.disabled),\n  }\n}\n\nconst normalised = computed<NormalisedOption[]>(() =>\n  (props.options ?? []).map(normaliseOption),\n)\n\nconst selected = computed<string[]>(() => {\n  const v = model.value\n  if (!v) {\n    return []\n  }\n  if (Array.isArray(v)) {\n    return v.map((x) => String(x))\n  }\n  return [String(v)]\n})\n\nconst labelFor = (val: string): string =>\n  normalised.value.find((o) => o.value === val)?.label ?? val\n\nfunction onUpdate(next: unknown): void {\n  if (Array.isArray(next)) {\n    model.value = next.map((v) => String(v))\n  } else if (next === undefined || next === null) {\n    model.value = []\n  } else {\n    model.value = [String(next)]\n  }\n}\n\nfunction removeValue(val: string): void {\n  model.value = selected.value.filter((v) => v !== val)\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    <div\n      v-if=\"selected.length\"\n      class=\"flex flex-wrap gap-1\"\n      :data-testid=\"`${id ?? 'select-multiple'}-chips`\"\n    >\n      <Badge\n        v-for=\"v in selected\"\n        :key=\"v\"\n        variant=\"secondary\"\n        class=\"flex items-center gap-1\"\n      >\n        <span>{{ labelFor(v) }}</span>\n        <Button\n          v-if=\"!disabled && !readonly\"\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"h-4 w-4 p-0\"\n          :aria-label=\"`Remove ${labelFor(v)}`\"\n          @click=\"removeValue(v)\"\n        >\n          <X class=\"h-3 w-3\" />\n        </Button>\n      </Badge>\n    </div>\n    <Combobox\n      :model-value=\"selected\"\n      multiple\n      :disabled=\"disabled || readonly\"\n      @update:model-value=\"onUpdate\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      >\n        <ComboboxInput\n          :id=\"id\"\n          :placeholder=\"placeholder ?? 'Select multiple…'\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No options match.</ComboboxEmpty>\n        <ComboboxItem\n          v-for=\"opt in normalised\"\n          :key=\"opt.value\"\n          :value=\"opt.value\"\n          :disabled=\"opt.disabled\"\n        >\n          <ComboboxItemIndicator />\n          {{ opt.label }}\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven multi-select composition. Wraps the shadcn Combobox\n * primitive with badge chips showing the current selection.\n *\n *   <SelectMultipleOption v-model=\"tags\" :options=\"[...]\" label=\"Tags\" />\n */\nimport { computed } from \"vue\"\nimport { X } from \"@lucide/vue\"\nimport type { SelectOptionLike } from \"@/definitions/shared/select-options\"\nimport {\n  Combobox,\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxItemIndicator,\n} from \"@/components/ui/combobox\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface SelectMultipleOptionProps {\n  modelValue?: Array<string | number> | null\n  options?: SelectOptionLike[]\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nconst props = withDefaults(defineProps<SelectMultipleOptionProps>(), {\n  errors: () => [],\n  options: () => [],\n})\n\nconst model = defineModel<Array<string | number> | null>(\"modelValue\")\n\ninterface NormalisedOption {\n  label: string\n  value: string\n  disabled: boolean\n}\n\nfunction normaliseOption(opt: SelectOptionLike): NormalisedOption {\n  if (typeof opt === \"string\") {\n    return { label: opt, value: opt, disabled: false }\n  }\n  return {\n    label: opt.label,\n    value: String(opt.value),\n    disabled: Boolean(opt.disabled),\n  }\n}\n\nconst normalised = computed<NormalisedOption[]>(() =>\n  (props.options ?? []).map(normaliseOption),\n)\n\nconst selected = computed<string[]>(() => {\n  const v = model.value\n  if (!v) {\n    return []\n  }\n  if (Array.isArray(v)) {\n    return v.map((x) => String(x))\n  }\n  return [String(v)]\n})\n\nconst labelFor = (val: string): string =>\n  normalised.value.find((o) => o.value === val)?.label ?? val\n\nfunction onUpdate(next: unknown): void {\n  if (Array.isArray(next)) {\n    model.value = next.map((v) => String(v))\n  } else if (next === undefined || next === null) {\n    model.value = []\n  } else {\n    model.value = [String(next)]\n  }\n}\n\nfunction removeValue(val: string): void {\n  model.value = selected.value.filter((v) => v !== val)\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    <div\n      v-if=\"selected.length\"\n      class=\"flex flex-wrap gap-1\"\n      :data-testid=\"`${id ?? 'select-multiple'}-chips`\"\n    >\n      <Badge\n        v-for=\"v in selected\"\n        :key=\"v\"\n        variant=\"secondary\"\n        class=\"flex items-center gap-1\"\n      >\n        <span>{{ labelFor(v) }}</span>\n        <Button\n          v-if=\"!disabled && !readonly\"\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          class=\"h-4 w-4 p-0\"\n          :aria-label=\"`Remove ${labelFor(v)}`\"\n          @click=\"removeValue(v)\"\n        >\n          <X class=\"h-3 w-3\" />\n        </Button>\n      </Badge>\n    </div>\n    <Combobox\n      :model-value=\"selected\"\n      multiple\n      :disabled=\"disabled || readonly\"\n      @update:model-value=\"onUpdate\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      >\n        <ComboboxInput\n          :id=\"id\"\n          :placeholder=\"placeholder ?? 'Select multiple…'\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No options match.</ComboboxEmpty>\n        <ComboboxItem\n          v-for=\"opt in normalised\"\n          :key=\"opt.value\"\n          :value=\"opt.value\"\n          :disabled=\"opt.disabled\"\n        >\n          <ComboboxItemIndicator />\n          {{ opt.label }}\n        </ComboboxItem>\n      </ComboboxContent>\n    </Combobox>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsCA,IAAM,IAAQ,GAKR,IAAQ,EAA0C,GAAC,YAAY;EAQrE,SAAS,EAAgB,GAAyC;GAIhE,OAHI,OAAO,KAAQ,WACV;IAAE,OAAO;IAAK,OAAO;IAAK,UAAU;GAAM,IAE5C;IACL,OAAO,EAAI;IACX,OAAO,OAAO,EAAI,KAAK;IACvB,UAAU,EAAQ,EAAI;GACxB;EACF;EAEA,IAAM,IAAa,SAChB,EAAM,WAAW,CAAC,GAAG,IAAI,CAAe,CAC3C,GAEM,IAAW,QAAyB;GACxC,IAAM,IAAI,EAAM;GAOhB,OANK,IAGD,MAAM,QAAQ,CAAC,IACV,EAAE,KAAK,MAAM,OAAO,CAAC,CAAC,IAExB,CAAC,OAAO,CAAC,CAAC,IALR,CAAC;EAMZ,CAAC,GAEK,KAAY,MAChB,EAAW,MAAM,MAAM,MAAM,EAAE,UAAU,CAAG,GAAG,SAAS;EAE1D,SAAS,EAAS,GAAqB;GACrC,AAAI,MAAM,QAAQ,CAAI,IACpB,EAAM,QAAQ,EAAK,KAAK,MAAM,OAAO,CAAC,CAAC,IAC9B,KAA+B,OACxC,EAAM,QAAQ,CAAC,IAEf,EAAM,QAAQ,CAAC,OAAO,CAAI,CAAC;EAE/B;EAEA,SAAS,EAAY,GAAmB;GACtC,EAAM,QAAQ,EAAS,MAAM,QAAQ,MAAM,MAAM,CAAG;EACtD;yBAIE,EA6Da,EAAA,CAAA,GAAA;GA5DV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBA0BH,CAvBE,EAAA,MAAS,UAAA,EAAA,GADjB,EAwBM,OAAA;;IAtBJ,OAAM;IACL,eAAW,GAAK,EAAA,MAAE,kBAAA;eAEnB,EAkBQ,GAAA,MAAA,EAjBM,EAAA,QAAL,YADT,EAkBQ,EAAA,CAAA,GAAA;IAhBL,KAAK;IACN,SAAQ;IACR,OAAM;;qBAEwB,CAA9B,EAA8B,QAAA,MAAA,EAArB,EAAS,CAAC,CAAA,GAAA,CAAA,GAAA,CAEV,EAAA,YAAQ,CAAK,EAAA,YAAA,EAAA,GADtB,EAUS,EAAA,CAAA,GAAA;;KARP,MAAK;KACL,SAAQ;KACR,MAAK;KACL,OAAM;KACL,cAAU,UAAY,EAAS,CAAC;KAChC,UAAK,MAAE,EAAY,CAAC;;sBAEA,CAArB,EAAqB,EAAA,CAAA,GAAA,EAAlB,OAAM,UAAS,CAAA,CAAA,CAAA;;;;2CAIxB,EA2BW,EAAA,CAAA,GAAA;IA1BR,eAAa,EAAA;IACd,UAAA;IACC,UAAU,EAAA,YAAY,EAAA;IACtB,uBAAoB;;qBAUJ,CARjB,EAQiB,EAAA,CAAA,GAAA;KAPd,qBAAmB,EAAA,QAAQ,KAAA;KAC3B,OAAK,EAAE,EAAA,OAAO,SAAM,wCAAA,EAAA;;sBAKnB,CAHF,EAGE,EAAA,CAAA,GAAA;MAFC,IAAI,EAAA;MACJ,aAAa,EAAA,eAAW;;;2CAG7B,EAWkB,EAAA,CAAA,GAAA,MAAA;sBAVgC,CAAhD,EAAgD,EAAA,CAAA,GAAA,MAAA;uBAAhB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAjB,qBAAiB,EAAA,CAAA,CAAA,CAAA;;iBAChC,EAQe,GAAA,MAAA,EAPC,EAAA,QAAP,YADT,EAQe,EAAA,CAAA,GAAA;MANZ,KAAK,EAAI;MACT,OAAO,EAAI;MACX,UAAU,EAAI;;uBAEU,CAAzB,EAAyB,EAAA,CAAA,CAAA,GAAA,EAAA,MACzB,EAAG,EAAI,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/chunks/SelectOption-Crk-kANq.js

@@ -0,0 +1,116 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { l as t, n, s as r, t as i, u as a } from "./select-DZcdBLiy.js";
+import { t as o } from "./field-frame-n5oLDNBT.js";
+import { Fragment as s, computed as c, createBlock as l, createElementBlock as u, createTextVNode as d, createVNode as f, defineComponent as p, mergeModels as m, normalizeClass as h, openBlock as g, renderList as _, toDisplayString as v, unref as y, useModel as b, withCtx as x } from "vue";
+//#region src/components/compositions/elements/option-select/SelectOption.vue?vue&type=script&setup=true&lang.ts
+var S = /* @__PURE__ */ p({
+	__name: "SelectOption",
+	props: /* @__PURE__ */ m({
+		modelValue: {},
+		options: { default: () => [] },
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e) {
+		let p = e, m = b(e, "modelValue");
+		function S(e) {
+			return typeof e == "string" ? {
+				label: e,
+				value: e,
+				disabled: !1
+			} : {
+				label: e.label,
+				value: String(e.value),
+				disabled: !!e.disabled
+			};
+		}
+		let C = c(() => (p.options ?? []).map(S)), w = c(() => {
+			if (!(m.value === void 0 || m.value === null)) return String(m.value);
+		});
+		function T(e) {
+			if (e == null) {
+				m.value = null;
+				return;
+			}
+			if (typeof e == "string" || typeof e == "number") {
+				m.value = e;
+				return;
+			}
+			if (Array.isArray(e)) {
+				let t = e[0];
+				m.value = typeof t == "string" || typeof t == "number" ? t : null;
+				return;
+			}
+			m.value = String(e);
+		}
+		return (c, p) => (g(), l(y(o), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: x(() => [f(y(a), {
+				"model-value": w.value,
+				disabled: e.disabled || e.readonly,
+				name: e.name,
+				required: e.required,
+				"onUpdate:modelValue": T
+			}, {
+				default: x(() => [f(y(n), {
+					id: e.id,
+					"data-element-name": e.name ?? void 0,
+					class: h(e.errors.length ? "border-destructive ring-destructive" : "")
+				}, {
+					default: x(() => [f(y(i), { placeholder: e.placeholder ?? "Select…" }, null, 8, ["placeholder"])]),
+					_: 1
+				}, 8, [
+					"id",
+					"data-element-name",
+					"class"
+				]), f(y(t), null, {
+					default: x(() => [(g(!0), u(s, null, _(C.value, (e) => (g(), l(y(r), {
+						key: e.value,
+						value: e.value,
+						disabled: e.disabled
+					}, {
+						default: x(() => [d(v(e.label), 1)]),
+						_: 2
+					}, 1032, ["value", "disabled"]))), 128))]),
+					_: 1
+				})]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"disabled",
+				"name",
+				"required"
+			])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+}), C = /* @__PURE__ */ e({ default: () => w }), w = S;
+//#endregion
+export { C as n, w as t };
+
+//# sourceMappingURL=SelectOption-Crk-kANq.js.map

package/dist/chunks/SelectOption-Crk-kANq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption-Crk-kANq.js","names":[],"sources":["../../src/components/compositions/elements/option-select/SelectOption.vue","../../src/components/compositions/elements/option-select/SelectOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven single-select composition. Composes the shadcn `Select`\n * primitive with `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <SelectOption v-model=\"role\" :options=\"[...]\" label=\"Role\" />\n *\n * The JSON-driven engine renders this via `ElementRenderer`, which binds\n * `modelValue` / `errors` to the form-data store automatically.\n */\nimport { computed } from \"vue\"\nimport type { SelectOptionLike } from \"@/definitions/shared/select-options\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface SelectOptionProps {\n  modelValue?: string | number | null\n  options?: SelectOptionLike[]\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nconst props = withDefaults(defineProps<SelectOptionProps>(), {\n  errors: () => [],\n  options: () => [],\n})\n\nconst model = defineModel<string | number | null>(\"modelValue\")\n\ninterface NormalisedOption {\n  label: string\n  value: string\n  disabled: boolean\n}\n\nfunction normaliseOption(opt: SelectOptionLike): NormalisedOption {\n  if (typeof opt === \"string\") {\n    return { label: opt, value: opt, disabled: false }\n  }\n  return {\n    label: opt.label,\n    value: String(opt.value),\n    disabled: Boolean(opt.disabled),\n  }\n}\n\nconst normalised = computed<NormalisedOption[]>(() =>\n  (props.options ?? []).map(normaliseOption),\n)\n\nconst triggerValue = computed<string | undefined>(() => {\n  if (model.value === undefined || model.value === null) {\n    return undefined\n  }\n  return String(model.value)\n})\n\nfunction onUpdate(next: unknown): void {\n  if (next === undefined || next === null) {\n    model.value = null\n    return\n  }\n  if (typeof next === \"string\" || typeof next === \"number\") {\n    model.value = next\n    return\n  }\n  if (Array.isArray(next)) {\n    const first = next[0]\n    model.value =\n      typeof first === \"string\" || typeof first === \"number\" ? first : null\n    return\n  }\n  model.value = String(next)\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    <Select\n      :model-value=\"triggerValue\"\n      :disabled=\"disabled || readonly\"\n      :name=\"name\"\n      :required=\"required\"\n      @update:model-value=\"onUpdate\"\n    >\n      <SelectTrigger\n        :id=\"id\"\n        :data-element-name=\"name ?? undefined\"\n        :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      >\n        <SelectValue :placeholder=\"placeholder ?? 'Select…'\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectItem\n          v-for=\"opt in normalised\"\n          :key=\"opt.value\"\n          :value=\"opt.value\"\n          :disabled=\"opt.disabled\"\n        >\n          {{ opt.label }}\n        </SelectItem>\n      </SelectContent>\n    </Select>\n  </FieldFrame>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven single-select composition. Composes the shadcn `Select`\n * primitive with `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <SelectOption v-model=\"role\" :options=\"[...]\" label=\"Role\" />\n *\n * The JSON-driven engine renders this via `ElementRenderer`, which binds\n * `modelValue` / `errors` to the form-data store automatically.\n */\nimport { computed } from \"vue\"\nimport type { SelectOptionLike } from \"@/definitions/shared/select-options\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface SelectOptionProps {\n  modelValue?: string | number | null\n  options?: SelectOptionLike[]\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nconst props = withDefaults(defineProps<SelectOptionProps>(), {\n  errors: () => [],\n  options: () => [],\n})\n\nconst model = defineModel<string | number | null>(\"modelValue\")\n\ninterface NormalisedOption {\n  label: string\n  value: string\n  disabled: boolean\n}\n\nfunction normaliseOption(opt: SelectOptionLike): NormalisedOption {\n  if (typeof opt === \"string\") {\n    return { label: opt, value: opt, disabled: false }\n  }\n  return {\n    label: opt.label,\n    value: String(opt.value),\n    disabled: Boolean(opt.disabled),\n  }\n}\n\nconst normalised = computed<NormalisedOption[]>(() =>\n  (props.options ?? []).map(normaliseOption),\n)\n\nconst triggerValue = computed<string | undefined>(() => {\n  if (model.value === undefined || model.value === null) {\n    return undefined\n  }\n  return String(model.value)\n})\n\nfunction onUpdate(next: unknown): void {\n  if (next === undefined || next === null) {\n    model.value = null\n    return\n  }\n  if (typeof next === \"string\" || typeof next === \"number\") {\n    model.value = next\n    return\n  }\n  if (Array.isArray(next)) {\n    const first = next[0]\n    model.value =\n      typeof first === \"string\" || typeof first === \"number\" ? first : null\n    return\n  }\n  model.value = String(next)\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    <Select\n      :model-value=\"triggerValue\"\n      :disabled=\"disabled || readonly\"\n      :name=\"name\"\n      :required=\"required\"\n      @update:model-value=\"onUpdate\"\n    >\n      <SelectTrigger\n        :id=\"id\"\n        :data-element-name=\"name ?? undefined\"\n        :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      >\n        <SelectValue :placeholder=\"placeholder ?? 'Select…'\" />\n      </SelectTrigger>\n      <SelectContent>\n        <SelectItem\n          v-for=\"opt in normalised\"\n          :key=\"opt.value\"\n          :value=\"opt.value\"\n          :disabled=\"opt.disabled\"\n        >\n          {{ opt.label }}\n        </SelectItem>\n      </SelectContent>\n    </Select>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;EAsCA,IAAM,IAAQ,GAKR,IAAQ,EAAmC,GAAC,YAAY;EAQ9D,SAAS,EAAgB,GAAyC;GAIhE,OAHI,OAAO,KAAQ,WACV;IAAE,OAAO;IAAK,OAAO;IAAK,UAAU;GAAM,IAE5C;IACL,OAAO,EAAI;IACX,OAAO,OAAO,EAAI,KAAK;IACvB,UAAU,EAAQ,EAAI;GACxB;EACF;EAEA,IAAM,IAAa,SAChB,EAAM,WAAW,CAAC,GAAG,IAAI,CAAe,CAC3C,GAEM,IAAe,QAAmC;GAClD,QAAM,UAAU,KAAA,KAAa,EAAM,UAAU,OAGjD,OAAO,OAAO,EAAM,KAAK;EAC3B,CAAC;EAED,SAAS,EAAS,GAAqB;GACrC,IAAI,KAA+B,MAAM;IACvC,EAAM,QAAQ;IACd;GACF;GACA,IAAI,OAAO,KAAS,YAAY,OAAO,KAAS,UAAU;IACxD,EAAM,QAAQ;IACd;GACF;GACA,IAAI,MAAM,QAAQ,CAAI,GAAG;IACvB,IAAM,IAAQ,EAAK;IACnB,EAAM,QACJ,OAAO,KAAU,YAAY,OAAO,KAAU,WAAW,IAAQ;IACnE;GACF;GACA,EAAM,QAAQ,OAAO,CAAI;EAC3B;yBAIE,EAiCa,EAAA,CAAA,GAAA;GAhCV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBA0BA,CAxBT,EAwBS,EAAA,CAAA,GAAA;IAvBN,eAAa,EAAA;IACb,UAAU,EAAA,YAAY,EAAA;IACtB,MAAM,EAAA;IACN,UAAU,EAAA;IACV,uBAAoB;;qBAQL,CANhB,EAMgB,EAAA,CAAA,GAAA;KALb,IAAI,EAAA;KACJ,qBAAmB,EAAA,QAAQ,KAAA;KAC3B,OAAK,EAAE,EAAA,OAAO,SAAM,wCAAA,EAAA;;sBAEkC,CAAvD,EAAuD,EAAA,CAAA,GAAA,EAAzC,aAAa,EAAA,eAAW,UAAA,GAAA,MAAA,GAAA,CAAA,aAAA,CAAA,CAAA,CAAA;;;;;;QAExC,EASgB,EAAA,CAAA,GAAA,MAAA;sBAPa,EAAA,EAAA,EAAA,GAD3B,EAOa,GAAA,MAAA,EANG,EAAA,QAAP,YADT,EAOa,EAAA,CAAA,GAAA;MALV,KAAK,EAAI;MACT,OAAO,EAAI;MACX,UAAU,EAAI;;uBAEA,CAAA,EAAA,EAAZ,EAAI,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/chunks/SpriteDisplay-BQPEj5P8.js

@@ -0,0 +1,49 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { n as t } from "./badge-4iQG4kuk.js";
+import { a as n, n as r, o as i, r as a, s as o } from "./card-DAfWnvro.js";
+import { computed as s, createBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, normalizeClass as p, openBlock as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
+import { Construction as v } from "@lucide/vue";
+//#region src/components/compositions/elements/display/SpriteDisplay.vue?vue&type=script&setup=true&lang.ts
+var y = { class: "flex-1" }, b = /* @__PURE__ */ f({
+	__name: "SpriteDisplay",
+	props: {
+		label: {},
+		classList: {}
+	},
+	setup(e) {
+		let f = e, b = s(() => {
+			let e = f.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		return (s, f) => (m(), c(g(o), {
+			class: p(b.value),
+			"data-testid": "sprite-display"
+		}, {
+			default: _(() => [d(g(a), { class: "flex flex-row items-center gap-3 p-4" }, {
+				default: _(() => [
+					d(g(v), { class: "size-5 text-muted-foreground" }),
+					l("div", y, [d(g(r), { class: "text-base" }, {
+						default: _(() => [u(h(e.label ?? "Sprite"), 1)]),
+						_: 1
+					}), d(g(n), null, {
+						default: _(() => [...f[0] ||= [u(" Coming soon — sprite playback is not yet implemented. ", -1)]]),
+						_: 1
+					})]),
+					d(g(t), { variant: "secondary" }, {
+						default: _(() => [...f[1] ||= [u(" sprite ", -1)]]),
+						_: 1
+					})
+				]),
+				_: 1
+			}), d(g(i), { class: "p-4 pt-0 text-sm text-muted-foreground" }, {
+				default: _(() => [...f[2] ||= [u(" Sprite sheet format TBD. ", -1)]]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["class"]));
+	}
+}), x = /* @__PURE__ */ e({ default: () => S }), S = b;
+//#endregion
+export { x as n, S as t };
+
+//# sourceMappingURL=SpriteDisplay-BQPEj5P8.js.map

package/dist/chunks/SpriteDisplay-BQPEj5P8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpriteDisplay-BQPEj5P8.js","names":[],"sources":["../../src/components/compositions/elements/display/SpriteDisplay.vue","../../src/components/compositions/elements/display/SpriteDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * STUB props-driven sprite display.\n *\n * Pending decisions on sprite sheet format (CSS background, SVG\n * symbol, animation timeline).\n */\nimport { computed } from \"vue\"\nimport { Construction } from \"@lucide/vue\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Badge } from \"@/components/ui/badge\"\n\nexport interface SpriteDisplayProps {\n  label?: string\n  classList?: string[] | string\n}\n\nconst props = defineProps<SpriteDisplayProps>()\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n</script>\n\n<template>\n  <Card\n    :class=\"rootClass\"\n    data-testid=\"sprite-display\"\n  >\n    <CardHeader class=\"flex flex-row items-center gap-3 p-4\">\n      <Construction class=\"size-5 text-muted-foreground\" />\n      <div class=\"flex-1\">\n        <CardTitle class=\"text-base\">\n          {{ label ?? \"Sprite\" }}\n        </CardTitle>\n        <CardDescription>\n          Coming soon — sprite playback is not yet implemented.\n        </CardDescription>\n      </div>\n      <Badge variant=\"secondary\">\n        sprite\n      </Badge>\n    </CardHeader>\n    <CardContent class=\"p-4 pt-0 text-sm text-muted-foreground\">\n      Sprite sheet format TBD.\n    </CardContent>\n  </Card>\n</template>\n","<script setup lang=\"ts\">\n/**\n * STUB props-driven sprite display.\n *\n * Pending decisions on sprite sheet format (CSS background, SVG\n * symbol, animation timeline).\n */\nimport { computed } from \"vue\"\nimport { Construction } from \"@lucide/vue\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Badge } from \"@/components/ui/badge\"\n\nexport interface SpriteDisplayProps {\n  label?: string\n  classList?: string[] | string\n}\n\nconst props = defineProps<SpriteDisplayProps>()\n\nconst rootClass = computed<string>(() => {\n  const cl = props.classList\n  if (!cl) {\n    return \"\"\n  }\n  return Array.isArray(cl) ? cl.join(\" \") : cl\n})\n</script>\n\n<template>\n  <Card\n    :class=\"rootClass\"\n    data-testid=\"sprite-display\"\n  >\n    <CardHeader class=\"flex flex-row items-center gap-3 p-4\">\n      <Construction class=\"size-5 text-muted-foreground\" />\n      <div class=\"flex-1\">\n        <CardTitle class=\"text-base\">\n          {{ label ?? \"Sprite\" }}\n        </CardTitle>\n        <CardDescription>\n          Coming soon — sprite playback is not yet implemented.\n        </CardDescription>\n      </div>\n      <Badge variant=\"secondary\">\n        sprite\n      </Badge>\n    </CardHeader>\n    <CardContent class=\"p-4 pt-0 text-sm text-muted-foreground\">\n      Sprite sheet format TBD.\n    </CardContent>\n  </Card>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAuBA,IAAM,IAAQ,GAER,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC;yBAIC,EAqBO,EAAA,CAAA,GAAA;GApBJ,OAAK,EAAE,EAAA,KAAS;GACjB,eAAY;;oBAeC,CAbb,EAaa,EAAA,CAAA,GAAA,EAbD,OAAM,uCAAsC,GAAA;qBACD;KAArD,EAAqD,EAAA,CAAA,GAAA,EAAvC,OAAM,+BAA8B,CAAA;KAClD,EAOM,OAPN,GAOM,CANJ,EAEY,EAAA,CAAA,GAAA,EAFD,OAAM,YAAW,GAAA;uBACH,CAAA,EAAA,EAApB,EAAA,SAAK,QAAA,GAAA,CAAA,CAAA,CAAA;;SAEV,EAEkB,EAAA,CAAA,GAAA,MAAA;uBAAlB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAFiB,2DAEjB,EAAA,CAAA,CAAA,CAAA;;;KAEF,EAEQ,EAAA,CAAA,GAAA,EAFD,SAAQ,YAAW,GAAA;uBAE1B,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAF2B,YAE3B,EAAA,CAAA,CAAA,CAAA;;;;;OAEF,EAEc,EAAA,CAAA,GAAA,EAFD,OAAM,yCAAwC,GAAA;qBAE3D,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAF4D,8BAE5D,EAAA,CAAA,CAAA,CAAA"}

package/dist/chunks/SwitchBoolean-B9KYU4Ko.js

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

package/dist/chunks/SwitchBoolean-B9KYU4Ko.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchBoolean-B9KYU4Ko.js","names":[],"sources":["../../src/components/compositions/elements/boolean/SwitchBoolean.vue","../../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","<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/chunks/TabCard-0so26E89.js

@@ -0,0 +1,112 @@
+import { n as e } from "./utils-DAErOi9O.js";
+import { o as t, r as n, s as r } from "./card-DAfWnvro.js";
+import { a as i, i as a, o, r as s } from "./tabs-6wUJf_yA.js";
+import { t as c } from "./ElementRenderer-DUhlfnFD.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createTextVNode as h, createVNode as g, defineComponent as _, normalizeClass as v, normalizeStyle as y, openBlock as b, ref as x, renderList as S, toDisplayString as C, unref as w, withCtx as T } from "vue";
+//#region src/components/compositions/elements/card/TabCard.vue?vue&type=script&setup=true&lang.ts
+var E = { class: "text-base font-semibold" }, D = {
+	key: 0,
+	class: "py-3 text-sm text-muted-foreground"
+}, O = {
+	key: 0,
+	class: "py-3 text-sm text-muted-foreground"
+}, k = /* @__PURE__ */ _({
+	__name: "TabCard",
+	props: {
+		label: {},
+		title: {},
+		showCard: {
+			type: Boolean,
+			default: !0
+		},
+		gutterY: { default: "1rem" },
+		gutterX: { default: "0" },
+		tabs: { default: () => [] },
+		activeTab: { default: 0 },
+		item: { default: () => ({}) },
+		classList: {}
+	},
+	setup(_) {
+		let k = _, A = u(() => (k.tabs ?? []).map((e) => ({
+			...e,
+			children: (e.nestedElements ?? []).filter((e) => typeof e == "object" && !!e && typeof e.type == "string")
+		}))), j = x(u(() => A.value[k.activeTab ?? 0]?.id ?? A.value[0]?.id ?? "").value), M = u(() => ({
+			rowGap: k.gutterY,
+			columnGap: k.gutterX
+		})), N = u(() => k.title ?? k.label);
+		return (u, _) => k.showCard === !1 ? (b(), p("div", {
+			key: 1,
+			class: v(w(e)(k.classList))
+		}, [g(w(o), {
+			modelValue: j.value,
+			"onUpdate:modelValue": _[1] ||= (e) => j.value = e
+		}, {
+			default: T(() => [A.value.length ? (b(), d(w(a), { key: 0 }, {
+				default: T(() => [(b(!0), p(l, null, S(A.value, (e) => (b(), d(w(s), {
+					key: e.id,
+					value: e.id
+				}, {
+					default: T(() => [h(C(e.label), 1)]),
+					_: 2
+				}, 1032, ["value"]))), 128))]),
+				_: 1
+			})) : f("", !0), (b(!0), p(l, null, S(A.value, (e) => (b(), d(w(i), {
+				key: e.id,
+				value: e.id,
+				class: "flex flex-col pt-3",
+				style: y(M.value)
+			}, {
+				default: T(() => [(b(!0), p(l, null, S(e.children, (e) => (b(), d(c, {
+					key: e.id,
+					element: e,
+					item: k.item
+				}, null, 8, ["element", "item"]))), 128))]),
+				_: 2
+			}, 1032, ["value", "style"]))), 128))]),
+			_: 1
+		}, 8, ["modelValue"])], 2)) : (b(), d(w(r), {
+			key: 0,
+			class: v(w(e)(k.classList))
+		}, {
+			default: T(() => [N.value ? (b(), d(w(n), { key: 0 }, {
+				default: T(() => [m("span", E, C(N.value), 1)]),
+				_: 1
+			})) : f("", !0), g(w(t), null, {
+				default: T(() => [g(w(o), {
+					modelValue: j.value,
+					"onUpdate:modelValue": _[0] ||= (e) => j.value = e
+				}, {
+					default: T(() => [A.value.length ? (b(), d(w(a), { key: 0 }, {
+						default: T(() => [(b(!0), p(l, null, S(A.value, (e) => (b(), d(w(s), {
+							key: e.id,
+							value: e.id
+						}, {
+							default: T(() => [h(C(e.label), 1)]),
+							_: 2
+						}, 1032, ["value"]))), 128))]),
+						_: 1
+					})) : f("", !0), (b(!0), p(l, null, S(A.value, (e) => (b(), d(w(i), {
+						key: e.id,
+						value: e.id,
+						class: "flex flex-col pt-3",
+						style: y(M.value)
+					}, {
+						default: T(() => [(b(!0), p(l, null, S(e.children, (e) => (b(), d(c, {
+							key: e.id,
+							element: e,
+							item: k.item
+						}, null, 8, ["element", "item"]))), 128)), e.children.length ? f("", !0) : (b(), p("p", D, " No elements configured for this tab. "))]),
+						_: 2
+					}, 1032, ["value", "style"]))), 128))]),
+					_: 1
+				}, 8, ["modelValue"]), A.value.length ? f("", !0) : (b(), p("p", O, " No tabs configured. "))]),
+				_: 1
+			})]),
+			_: 1
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+export { k as default };
+
+//# sourceMappingURL=TabCard-0so26E89.js.map

package/dist/chunks/TabCard-0so26E89.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabCard-0so26E89.js","names":[],"sources":["../../src/components/compositions/elements/card/TabCard.vue","../../src/components/compositions/elements/card/TabCard.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * `card.tab` element composition.\n *\n * Renders a tabbed container. Each tab in `tabs` owns an optional\n * `nestedElements` array of resolved child elements. In the FormBuilder\n * each tab's `elementList` IDs are resolved before being forwarded here.\n */\nimport { computed, ref } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport { cn } from \"@/lib/utils\"\n\ninterface TabEntry {\n  id: string\n  label: string\n  nestedElements?: Array<Record<string, unknown>>\n}\n\nexport interface TabCardProps {\n  label?: string\n  title?: string\n  showCard?: boolean\n  gutterY?: string\n  gutterX?: string\n  /** Tab definitions including resolved child elements. */\n  tabs?: TabEntry[]\n  activeTab?: number\n  item?: Record<string, unknown>\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<TabCardProps>(), {\n  showCard: true,\n  gutterY: \"1rem\",\n  gutterX: \"0\",\n  tabs: () => [],\n  activeTab: 0,\n  item: () => ({}),\n})\n\nconst resolvedTabs = computed(() =>\n  (props.tabs ?? []).map((tab) => ({\n    ...tab,\n    children: (tab.nestedElements ?? []).filter(\n      (e): boolean =>\n        typeof e === \"object\" &&\n        e !== null &&\n        typeof (e as Record<string, unknown>).type === \"string\",\n    ) as unknown as CardElement[],\n  })),\n)\n\nconst activeTabId = computed(\n  () => resolvedTabs.value[props.activeTab ?? 0]?.id ?? resolvedTabs.value[0]?.id ?? \"\",\n)\nconst currentTab = ref(activeTabId.value)\n\nconst bodyStyle = computed(() => ({\n  rowGap: props.gutterY,\n  columnGap: props.gutterX,\n}))\n\nconst heading = computed(() => props.title ?? props.label)\n</script>\n\n<template>\n  <Card v-if=\"props.showCard !== false\" :class=\"cn(props.classList)\">\n    <CardHeader v-if=\"heading\">\n      <span class=\"text-base font-semibold\">{{ heading }}</span>\n    </CardHeader>\n    <CardContent>\n      <Tabs v-model=\"currentTab\">\n        <TabsList v-if=\"resolvedTabs.length\">\n          <TabsTrigger\n            v-for=\"tab in resolvedTabs\"\n            :key=\"tab.id\"\n            :value=\"tab.id\"\n          >\n            {{ tab.label }}\n          </TabsTrigger>\n        </TabsList>\n        <TabsContent\n          v-for=\"tab in resolvedTabs\"\n          :key=\"tab.id\"\n          :value=\"tab.id\"\n          class=\"flex flex-col pt-3\"\n          :style=\"bodyStyle\"\n        >\n          <ElementRenderer\n            v-for=\"child in tab.children\"\n            :key=\"child.id\"\n            :element=\"child\"\n            :item=\"props.item\"\n          />\n          <p v-if=\"!tab.children.length\" class=\"py-3 text-sm text-muted-foreground\">\n            No elements configured for this tab.\n          </p>\n        </TabsContent>\n      </Tabs>\n      <p v-if=\"!resolvedTabs.length\" class=\"py-3 text-sm text-muted-foreground\">\n        No tabs configured.\n      </p>\n    </CardContent>\n  </Card>\n\n  <div v-else :class=\"cn(props.classList)\">\n    <Tabs v-model=\"currentTab\">\n      <TabsList v-if=\"resolvedTabs.length\">\n        <TabsTrigger\n          v-for=\"tab in resolvedTabs\"\n          :key=\"tab.id\"\n          :value=\"tab.id\"\n        >\n          {{ tab.label }}\n        </TabsTrigger>\n      </TabsList>\n      <TabsContent\n        v-for=\"tab in resolvedTabs\"\n        :key=\"tab.id\"\n        :value=\"tab.id\"\n        class=\"flex flex-col pt-3\"\n        :style=\"bodyStyle\"\n      >\n        <ElementRenderer\n          v-for=\"child in tab.children\"\n          :key=\"child.id\"\n          :element=\"child\"\n          :item=\"props.item\"\n        />\n      </TabsContent>\n    </Tabs>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * `card.tab` element composition.\n *\n * Renders a tabbed container. Each tab in `tabs` owns an optional\n * `nestedElements` array of resolved child elements. In the FormBuilder\n * each tab's `elementList` IDs are resolved before being forwarded here.\n */\nimport { computed, ref } from \"vue\"\nimport type { CardElement } from \"@/definitions/elements\"\nimport {\n  Card,\n  CardContent,\n  CardHeader,\n} from \"@/components/ui/card\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\nimport ElementRenderer from \"@/engine/ElementRenderer.vue\"\nimport { cn } from \"@/lib/utils\"\n\ninterface TabEntry {\n  id: string\n  label: string\n  nestedElements?: Array<Record<string, unknown>>\n}\n\nexport interface TabCardProps {\n  label?: string\n  title?: string\n  showCard?: boolean\n  gutterY?: string\n  gutterX?: string\n  /** Tab definitions including resolved child elements. */\n  tabs?: TabEntry[]\n  activeTab?: number\n  item?: Record<string, unknown>\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<TabCardProps>(), {\n  showCard: true,\n  gutterY: \"1rem\",\n  gutterX: \"0\",\n  tabs: () => [],\n  activeTab: 0,\n  item: () => ({}),\n})\n\nconst resolvedTabs = computed(() =>\n  (props.tabs ?? []).map((tab) => ({\n    ...tab,\n    children: (tab.nestedElements ?? []).filter(\n      (e): boolean =>\n        typeof e === \"object\" &&\n        e !== null &&\n        typeof (e as Record<string, unknown>).type === \"string\",\n    ) as unknown as CardElement[],\n  })),\n)\n\nconst activeTabId = computed(\n  () => resolvedTabs.value[props.activeTab ?? 0]?.id ?? resolvedTabs.value[0]?.id ?? \"\",\n)\nconst currentTab = ref(activeTabId.value)\n\nconst bodyStyle = computed(() => ({\n  rowGap: props.gutterY,\n  columnGap: props.gutterX,\n}))\n\nconst heading = computed(() => props.title ?? props.label)\n</script>\n\n<template>\n  <Card v-if=\"props.showCard !== false\" :class=\"cn(props.classList)\">\n    <CardHeader v-if=\"heading\">\n      <span class=\"text-base font-semibold\">{{ heading }}</span>\n    </CardHeader>\n    <CardContent>\n      <Tabs v-model=\"currentTab\">\n        <TabsList v-if=\"resolvedTabs.length\">\n          <TabsTrigger\n            v-for=\"tab in resolvedTabs\"\n            :key=\"tab.id\"\n            :value=\"tab.id\"\n          >\n            {{ tab.label }}\n          </TabsTrigger>\n        </TabsList>\n        <TabsContent\n          v-for=\"tab in resolvedTabs\"\n          :key=\"tab.id\"\n          :value=\"tab.id\"\n          class=\"flex flex-col pt-3\"\n          :style=\"bodyStyle\"\n        >\n          <ElementRenderer\n            v-for=\"child in tab.children\"\n            :key=\"child.id\"\n            :element=\"child\"\n            :item=\"props.item\"\n          />\n          <p v-if=\"!tab.children.length\" class=\"py-3 text-sm text-muted-foreground\">\n            No elements configured for this tab.\n          </p>\n        </TabsContent>\n      </Tabs>\n      <p v-if=\"!resolvedTabs.length\" class=\"py-3 text-sm text-muted-foreground\">\n        No tabs configured.\n      </p>\n    </CardContent>\n  </Card>\n\n  <div v-else :class=\"cn(props.classList)\">\n    <Tabs v-model=\"currentTab\">\n      <TabsList v-if=\"resolvedTabs.length\">\n        <TabsTrigger\n          v-for=\"tab in resolvedTabs\"\n          :key=\"tab.id\"\n          :value=\"tab.id\"\n        >\n          {{ tab.label }}\n        </TabsTrigger>\n      </TabsList>\n      <TabsContent\n        v-for=\"tab in resolvedTabs\"\n        :key=\"tab.id\"\n        :value=\"tab.id\"\n        class=\"flex flex-col pt-3\"\n        :style=\"bodyStyle\"\n      >\n        <ElementRenderer\n          v-for=\"child in tab.children\"\n          :key=\"child.id\"\n          :element=\"child\"\n          :item=\"props.item\"\n        />\n      </TabsContent>\n    </Tabs>\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsCA,IAAM,IAAQ,GASR,IAAe,SAClB,EAAM,QAAQ,CAAC,GAAG,KAAK,OAAS;GAC/B,GAAG;GACH,WAAW,EAAI,kBAAkB,CAAC,GAAG,QAClC,MACC,OAAO,KAAM,cACb,KACA,OAAQ,EAA8B,QAAS,QACnD;EACF,EAAE,CACJ,GAKM,IAAa,EAHC,QACZ,EAAa,MAAM,EAAM,aAAa,IAAI,MAAM,EAAa,MAAM,IAAI,MAAM,EAE9D,EAAY,KAAK,GAElC,IAAY,SAAgB;GAChC,QAAQ,EAAM;GACd,WAAW,EAAM;EACnB,EAAE,GAEI,IAAU,QAAe,EAAM,SAAS,EAAM,KAAK;mBAI3C,EAAM,aAAQ,WAuC1B,EA0BM,OAAA;;GA1BO,OAAK,EAAE,EAAA,CAAA,EAAG,EAAM,SAAS,CAAA;MACpC,EAwBO,EAAA,CAAA,GAAA;eAxBQ,EAAA;4CAAU,QAAA;;oBASZ,CARK,EAAA,MAAa,UAAA,EAAA,GAA7B,EAQW,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;qBANoB,EAAA,EAAA,EAAA,GAD7B,EAMc,GAAA,MAAA,EALE,EAAA,QAAP,YADT,EAMc,EAAA,CAAA,GAAA;KAJX,KAAK,EAAI;KACT,OAAO,EAAI;;sBAEG,CAAA,EAAA,EAAZ,EAAI,KAAK,GAAA,CAAA,CAAA,CAAA;;;;4BAGhB,EAac,GAAA,MAAA,EAZE,EAAA,QAAP,YADT,EAac,EAAA,CAAA,GAAA;IAXX,KAAK,EAAI;IACT,OAAO,EAAI;IACZ,OAAM;IACL,OAAK,EAAE,EAAA,KAAS;;qBAGc,EAAA,EAAA,EAAA,GAD/B,EAKE,GAAA,MAAA,EAJgB,EAAI,WAAb,YADT,EAKE,GAAA;KAHC,KAAK,EAAM;KACX,SAAS;KACT,MAAM,EAAM;;;;;iCA7DK,EAAA,GAA1B,EAqCO,EAAA,CAAA,GAAA;;GArCgC,OAAK,EAAE,EAAA,CAAA,EAAG,EAAM,SAAS,CAAA;;oBAGjD,CAFK,EAAA,SAAA,EAAA,GAAlB,EAEa,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;qBAD+C,CAA1D,EAA0D,QAA1D,GAA0D,EAAjB,EAAA,KAAO,GAAA,CAAA,CAAA,CAAA;;oBAElD,EAgCc,EAAA,CAAA,GAAA,MAAA;qBAJL,CA3BP,EA2BO,EAAA,CAAA,GAAA;iBA3BQ,EAAA;8CAAU,QAAA;;sBASZ,CARK,EAAA,MAAa,UAAA,EAAA,GAA7B,EAQW,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;uBANoB,EAAA,EAAA,EAAA,GAD7B,EAMc,GAAA,MAAA,EALE,EAAA,QAAP,YADT,EAMc,EAAA,CAAA,GAAA;OAJX,KAAK,EAAI;OACT,OAAO,EAAI;;wBAEG,CAAA,EAAA,EAAZ,EAAI,KAAK,GAAA,CAAA,CAAA,CAAA;;;;8BAGhB,EAgBc,GAAA,MAAA,EAfE,EAAA,QAAP,YADT,EAgBc,EAAA,CAAA,GAAA;MAdX,KAAK,EAAI;MACT,OAAO,EAAI;MACZ,OAAM;MACL,OAAK,EAAE,EAAA,KAAS;;uBAGc,EAAA,EAAA,EAAA,GAD/B,EAKE,GAAA,MAAA,EAJgB,EAAI,WAAb,YADT,EAKE,GAAA;OAHC,KAAK,EAAM;OACX,SAAS;OACT,MAAM,EAAM;iDAEL,EAAI,SAAS,SAEvB,EAAA,IAAA,EAAA,KAFuB,EAAA,GAAvB,EAEI,KAFJ,GAA0E,wCAE1E,EAAA,CAAA;;;;2BAGM,EAAA,MAAa,SAEvB,EAAA,IAAA,EAAA,KAFuB,EAAA,GAAvB,EAEI,KAFJ,GAA0E,uBAE1E,EAAA,CAAA"}