@gxp-dev/mod-ui 2.0.8 → 2.0.12

package/dist/components/compositions/elements/option-select/RadioOption.js

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

package/dist/components/compositions/elements/option-select/RadioOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOption.js","names":[],"sources":["../../../../../src/components/compositions/elements/option-select/RadioOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven radio-group composition. Composes the shadcn-vue\n * `RadioGroup` primitive with `FieldFrame` chrome.\n *\n *   <RadioOption v-model=\"size\" :options=\"[...]\" label=\"Size\" />\n */\nimport { computed } from \"vue\"\nimport type { SelectOptionLike } from \"@/definitions/shared/select-options\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport { Label } from \"@/components/ui/label\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface RadioOptionProps {\n  modelValue?: string | number | null\n  options?: SelectOptionLike[]\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  inline?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nconst props = withDefaults(defineProps<RadioOptionProps>(), {\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 groupValue = 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  model.value = String(next)\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <RadioGroup\n      :model-value=\"groupValue\"\n      :name=\"name\"\n      :disabled=\"disabled || readonly\"\n      :required=\"required\"\n      :data-element-name=\"name ?? undefined\"\n      :class=\"inline ? 'flex flex-row flex-wrap gap-4' : 'grid gap-2'\"\n      @update:model-value=\"onUpdate\"\n    >\n      <div\n        v-for=\"opt in normalised\"\n        :key=\"opt.value\"\n        class=\"flex items-center gap-2\"\n      >\n        <RadioGroupItem\n          :id=\"`${id ?? 'radio'}-${opt.value}`\"\n          :value=\"opt.value\"\n          :disabled=\"opt.disabled\"\n        />\n        <Label\n          :for=\"`${id ?? 'radio'}-${opt.value}`\"\n          class=\"cursor-pointer\"\n        >\n          {{ opt.label }}\n        </Label>\n      </div>\n    </RadioGroup>\n  </FieldFrame>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/option-select/RadioOption.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,113 @@
+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 { Fragment as i, computed as a, createBlock as o, createElementBlock as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, openBlock as p, renderList as m, toDisplayString as h, unref as g, useModel as _, withCtx as v } from "vue";
+//#region src/components/compositions/elements/option-select/RadioOption.vue?vue&type=script&setup=true&lang.ts
+var y = /* @__PURE__ */ u({
+	__name: "RadioOption",
+	props: /* @__PURE__ */ d({
+		modelValue: {},
+		options: { default: () => [] },
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		inline: { type: Boolean },
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(u) {
+		let d = u, y = _(u, "modelValue");
+		function b(e) {
+			return typeof e == "string" ? {
+				label: e,
+				value: e,
+				disabled: !1
+			} : {
+				label: e.label,
+				value: String(e.value),
+				disabled: !!e.disabled
+			};
+		}
+		let x = a(() => (d.options ?? []).map(b)), S = a(() => {
+			if (!(y.value === void 0 || y.value === null)) return String(y.value);
+		});
+		function C(e) {
+			if (e == null) {
+				y.value = null;
+				return;
+			}
+			if (typeof e == "string" || typeof e == "number") {
+				y.value = e;
+				return;
+			}
+			y.value = String(e);
+		}
+		return (a, d) => (p(), o(g(r), {
+			label: u.label,
+			required: u.required,
+			"hide-label": u.hideLabel,
+			"help-text": u.helpText,
+			errors: u.errors
+		}, {
+			default: v(() => [l(g(t), {
+				"model-value": S.value,
+				name: u.name,
+				disabled: u.disabled || u.readonly,
+				required: u.required,
+				"data-element-name": u.name ?? void 0,
+				class: f(u.inline ? "flex flex-row flex-wrap gap-4" : "grid gap-2"),
+				"onUpdate:modelValue": C
+			}, {
+				default: v(() => [(p(!0), s(i, null, m(x.value, (t) => (p(), s("div", {
+					key: t.value,
+					class: "flex items-center gap-2"
+				}, [l(g(n), {
+					id: `${u.id ?? "radio"}-${t.value}`,
+					value: t.value,
+					disabled: t.disabled
+				}, null, 8, [
+					"id",
+					"value",
+					"disabled"
+				]), l(g(e), {
+					for: `${u.id ?? "radio"}-${t.value}`,
+					class: "cursor-pointer"
+				}, {
+					default: v(() => [c(h(t.label), 1)]),
+					_: 2
+				}, 1032, ["for"])]))), 128))]),
+				_: 1
+			}, 8, [
+				"model-value",
+				"name",
+				"disabled",
+				"required",
+				"data-element-name",
+				"class"
+			])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { y as default };
+
+//# sourceMappingURL=RadioOption.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/option-select/RadioOption.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOption.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/option-select/RadioOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven radio-group composition. Composes the shadcn-vue\n * `RadioGroup` primitive with `FieldFrame` chrome.\n *\n *   <RadioOption v-model=\"size\" :options=\"[...]\" label=\"Size\" />\n */\nimport { computed } from \"vue\"\nimport type { SelectOptionLike } from \"@/definitions/shared/select-options\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport { Label } from \"@/components/ui/label\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface RadioOptionProps {\n  modelValue?: string | number | null\n  options?: SelectOptionLike[]\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  inline?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nconst props = withDefaults(defineProps<RadioOptionProps>(), {\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 groupValue = 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  model.value = String(next)\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <RadioGroup\n      :model-value=\"groupValue\"\n      :name=\"name\"\n      :disabled=\"disabled || readonly\"\n      :required=\"required\"\n      :data-element-name=\"name ?? undefined\"\n      :class=\"inline ? 'flex flex-row flex-wrap gap-4' : 'grid gap-2'\"\n      @update:model-value=\"onUpdate\"\n    >\n      <div\n        v-for=\"opt in normalised\"\n        :key=\"opt.value\"\n        class=\"flex items-center gap-2\"\n      >\n        <RadioGroupItem\n          :id=\"`${id ?? 'radio'}-${opt.value}`\"\n          :value=\"opt.value\"\n          :disabled=\"opt.disabled\"\n        />\n        <Label\n          :for=\"`${id ?? 'radio'}-${opt.value}`\"\n          class=\"cursor-pointer\"\n        >\n          {{ opt.label }}\n        </Label>\n      </div>\n    </RadioGroup>\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BA,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,IAAa,QAAmC;GAChD,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,EAAM,QAAQ,OAAO,CAAI;EAC3B;yBAIE,EAkCa,EAAA,CAAA,GAAA;GAjCV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,aAAW,EAAA;GACX,QAAQ,EAAA;;oBA4BI,CA1Bb,EA0Ba,EAAA,CAAA,GAAA;IAzBV,eAAa,EAAA;IACb,MAAM,EAAA;IACN,UAAU,EAAA,YAAY,EAAA;IACtB,UAAU,EAAA;IACV,qBAAmB,EAAA,QAAQ,KAAA;IAC3B,OAAK,EAAE,EAAA,SAAM,kCAAA,YAAA;IACb,uBAAoB;;qBAGM,EAAA,EAAA,EAAA,GAD3B,EAgBM,GAAA,MAAA,EAfU,EAAA,QAAP,YADT,EAgBM,OAAA;KAdH,KAAK,EAAI;KACV,OAAM;QAEN,EAIE,EAAA,CAAA,GAAA;KAHC,IAAE,GAAK,EAAA,MAAE,QAAA,GAAe,EAAI;KAC5B,OAAO,EAAI;KACX,UAAU,EAAI;;;;;QAEjB,EAKQ,EAAA,CAAA,GAAA;KAJL,KAAG,GAAK,EAAA,MAAE,QAAA,GAAe,EAAI;KAC9B,OAAM;;sBAES,CAAA,EAAA,EAAZ,EAAI,KAAK,GAAA,CAAA,CAAA,CAAA"}

package/dist/components/compositions/elements/option-select/SelectMultipleOption.js

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

package/dist/components/compositions/elements/option-select/SelectMultipleOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMultipleOption.js","names":[],"sources":["../../../../../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"],"mappings":""}

package/dist/components/compositions/elements/option-select/SelectMultipleOption.vue_vue_type_script_setup_true_lang.js

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

package/dist/components/compositions/elements/option-select/SelectMultipleOption.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectMultipleOption.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../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"],"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/components/compositions/elements/option-select/SelectOption.js

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

package/dist/components/compositions/elements/option-select/SelectOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.js","names":[],"sources":["../../../../../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"],"mappings":""}

package/dist/components/compositions/elements/option-select/SelectOption.vue_vue_type_script_setup_true_lang.js

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

package/dist/components/compositions/elements/option-select/SelectOption.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../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"],"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/components/compositions/elements/picker/AsyncSelectPicker.js

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

package/dist/components/compositions/elements/picker/AsyncSelectPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncSelectPicker.js","names":[],"sources":["../../../../../src/components/compositions/elements/picker/AsyncSelectPicker.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven async select picker composition. Same callback-driven\n * search surface as `AsyncSelectOption` but presented as a button-style\n * picker — the trigger reads as a single selected value with a chevron,\n * and the Combobox panel appears beneath it.\n *\n *   <AsyncSelectPicker\n *     v-model=\"userId\"\n *     label=\"User\"\n *     :on-search=\"(q) => fetch(`/users?q=${q}`).then(r => r.json())\"\n *   />\n */\nimport { computed, watch } from \"vue\"\nimport { ChevronsUpDown, Loader2, Search } 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 { FieldFrame } from \"@/components/ui/field-frame\"\nimport { useAsyncSearch } from \"@/composables/useAsyncSearch\"\n\nexport interface AsyncSelectPickerProps {\n  modelValue?: string | number | null\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  onSearch?: (query: string) => Promise<SelectOptionLike[]>\n  initialOptions?: SelectOptionLike[]\n  minSearchLength?: number\n  debounceMs?: number\n  loadingText?: string\n  emptyText?: string\n}\n\nconst props = withDefaults(defineProps<AsyncSelectPickerProps>(), {\n  errors: () => [],\n  initialOptions: () => [],\n  minSearchLength: 1,\n  debounceMs: 250,\n  loadingText: \"Loading...\",\n  emptyText: \"No results\",\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 { query, results, isLoading, trigger } = useAsyncSearch({\n  onSearch: props.onSearch,\n  initialOptions: props.initialOptions,\n  minSearchLength: props.minSearchLength,\n  debounceMs: props.debounceMs,\n})\n\nwatch(\n  () => props.initialOptions,\n  (next) => {\n    if (query.value.length < props.minSearchLength) {\n      results.value = next ? [...next] : []\n    }\n  },\n)\n\nconst normalisedResults = computed<NormalisedOption[]>(() =>\n  (results.value ?? []).map(normaliseOption),\n)\n\nconst normalisedAll = computed<NormalisedOption[]>(() => {\n  const initial = (props.initialOptions ?? []).map(normaliseOption)\n  const fromResults = normalisedResults.value\n  const merged = new Map<string, NormalisedOption>()\n  for (const o of initial) {\n    merged.set(o.value, o)\n  }\n  for (const o of fromResults) {\n    merged.set(o.value, o)\n  }\n  return Array.from(merged.values())\n})\n\nconst currentValue = computed<string | undefined>(() => {\n  if (model.value === undefined || model.value === null) {\n    return undefined\n  }\n  return String(model.value)\n})\n\nconst selectedLabel = computed<string>(() => {\n  if (currentValue.value === undefined) {\n    return \"\"\n  }\n  const match = normalisedAll.value.find((o) => o.value === currentValue.value)\n  return match ? match.label : currentValue.value\n})\n\nfunction onInput(event: Event): void {\n  const next = (event.target as HTMLInputElement).value\n  trigger(next)\n}\n\nfunction onUpdate(next: unknown): void {\n  if (Array.isArray(next)) {\n    model.value = next[0] === undefined ? null : (next[0] as string | number)\n    return\n  }\n  model.value = next === undefined ? null : (next as string | number)\n}\n\nfunction onOpenChange(open: boolean): void {\n  if (open && query.value === \"\") {\n    results.value = props.initialOptions ? [...props.initialOptions] : []\n  }\n}\n\ndefineExpose({ trigger })\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    <Combobox\n      :model-value=\"currentValue\"\n      :disabled=\"disabled || readonly\"\n      ignore-filter\n      @update:model-value=\"onUpdate\"\n      @update:open=\"onOpenChange\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        data-testid=\"async-picker-anchor\"\n        :class=\"[\n          'justify-between text-left',\n          errors.length ? 'border-destructive ring-destructive' : '',\n        ]\"\n      >\n        <span\n          v-if=\"selectedLabel\"\n          class=\"truncate text-sm\"\n          data-testid=\"async-picker-label\"\n        >\n          {{ selectedLabel }}\n        </span>\n        <span v-else class=\"text-sm text-muted-foreground\">\n          {{ placeholder ?? \"Select…\" }}\n        </span>\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <div class=\"flex items-center border-b px-2 py-1.5\">\n          <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n          <ComboboxInput\n            :id=\"id\"\n            :model-value=\"query\"\n            :placeholder=\"placeholder ?? 'Search…'\"\n            class=\"h-8\"\n            data-testid=\"async-picker-input\"\n            @input=\"onInput\"\n          />\n          <Loader2\n            v-if=\"isLoading\"\n            data-testid=\"async-picker-loader\"\n            class=\"ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground\"\n          />\n        </div>\n        <div\n          v-if=\"isLoading\"\n          class=\"px-2 py-2 text-sm text-muted-foreground\"\n          data-testid=\"async-picker-loading-text\"\n        >\n          {{ loadingText }}\n        </div>\n        <ComboboxEmpty v-else-if=\"normalisedResults.length === 0\">\n          {{ emptyText }}\n        </ComboboxEmpty>\n        <ComboboxItem\n          v-for=\"opt in normalisedResults\"\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":""}