@gxp-dev/mod-ui 2.0.10 → 2.0.14

package/dist/chunks/AsyncSelectOption-DD4PTdGr.js

@@ -0,0 +1,155 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { c as t, i as n, l as r, n as i, o as a, r as o, s } from "./combobox-BrYBRIqW.js";
+import { t as c } from "./field-frame-n5oLDNBT.js";
+import { t as l } from "./useAsyncSearch-CS_CQauO.js";
+import { Fragment as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createTextVNode as h, createVNode as g, defineComponent as _, mergeModels as v, normalizeClass as y, openBlock as b, renderList as x, toDisplayString as S, unref as C, useModel as w, watch as T, withCtx as E } from "vue";
+import { Loader2 as D, Search as O } from "@lucide/vue";
+//#region src/components/compositions/elements/option-select/AsyncSelectOption.vue?vue&type=script&setup=true&lang.ts
+var k = {
+	key: 0,
+	class: "px-2 py-2 text-sm text-muted-foreground",
+	"data-testid": "async-select-loading-text"
+}, A = /* @__PURE__ */ _({
+	__name: "AsyncSelectOption",
+	props: /* @__PURE__ */ v({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		onSearch: {},
+		initialOptions: { default: () => [] },
+		minSearchLength: { default: 1 },
+		debounceMs: { default: 250 },
+		loadingText: { default: "Loading..." },
+		emptyText: { default: "No results" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e, { expose: _ }) {
+		let v = e, A = w(e, "modelValue");
+		function j(e) {
+			return typeof e == "string" ? {
+				label: e,
+				value: e,
+				disabled: !1
+			} : {
+				label: e.label,
+				value: String(e.value),
+				disabled: !!e.disabled
+			};
+		}
+		let { query: M, results: N, isLoading: P, trigger: F } = l({
+			onSearch: v.onSearch,
+			initialOptions: v.initialOptions,
+			minSearchLength: v.minSearchLength,
+			debounceMs: v.debounceMs
+		});
+		T(() => v.initialOptions, (e) => {
+			M.value.length < v.minSearchLength && (N.value = e ? [...e] : []);
+		});
+		let I = d(() => (N.value ?? []).map(j)), L = d(() => {
+			let e = (v.initialOptions ?? []).map(j), t = I.value, n = /* @__PURE__ */ new Map();
+			for (let t of e) n.set(t.value, t);
+			for (let e of t) n.set(e.value, e);
+			return Array.from(n.values());
+		}), R = d(() => {
+			if (!(A.value === void 0 || A.value === null)) return String(A.value);
+		}), z = d(() => {
+			if (R.value === void 0) return "";
+			let e = L.value.find((e) => e.value === R.value);
+			return e ? e.label : R.value;
+		});
+		function B(e) {
+			let t = e.target.value;
+			F(t);
+		}
+		function V(e) {
+			if (Array.isArray(e)) {
+				A.value = e[0] === void 0 ? null : e[0];
+				return;
+			}
+			A.value = e === void 0 ? null : e;
+		}
+		function H(e) {
+			e && M.value === "" && (N.value = v.initialOptions ? [...v.initialOptions] : []);
+		}
+		return _({ trigger: F }), (l, d) => (b(), f(C(c), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: E(() => [g(C(r), {
+				"model-value": R.value,
+				disabled: e.disabled || e.readonly,
+				"ignore-filter": "",
+				"onUpdate:modelValue": V,
+				"onUpdate:open": H
+			}, {
+				default: E(() => [g(C(t), {
+					"data-element-name": e.name ?? void 0,
+					"data-testid": "async-select-anchor",
+					class: y(e.errors.length ? "border-destructive ring-destructive" : "")
+				}, {
+					default: E(() => [
+						g(C(O), { class: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+						g(C(n), {
+							id: e.id,
+							"model-value": C(M),
+							placeholder: z.value || (e.placeholder ?? "Search…"),
+							"data-testid": "async-select-input",
+							onInput: B
+						}, null, 8, [
+							"id",
+							"model-value",
+							"placeholder"
+						]),
+						C(P) ? (b(), f(C(D), {
+							key: 0,
+							"data-testid": "async-select-loader",
+							class: "ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground"
+						})) : p("", !0)
+					]),
+					_: 1
+				}, 8, ["data-element-name", "class"]), g(C(s), null, {
+					default: E(() => [C(P) ? (b(), m("div", k, S(e.loadingText), 1)) : I.value.length === 0 ? (b(), f(C(a), { key: 1 }, {
+						default: E(() => [h(S(e.emptyText), 1)]),
+						_: 1
+					})) : p("", !0), (b(!0), m(u, null, x(I.value, (e) => (b(), f(C(o), {
+						key: e.value,
+						value: e.value,
+						disabled: e.disabled
+					}, {
+						default: E(() => [g(C(i)), h(" " + S(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=AsyncSelectOption-DD4PTdGr.js.map

package/dist/chunks/AsyncSelectOption-DD4PTdGr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsyncSelectOption-DD4PTdGr.js","names":[],"sources":["../../src/components/compositions/elements/option-select/AsyncSelectOption.vue","../../src/components/compositions/elements/option-select/AsyncSelectOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven async select composition. Combines the shadcn Combobox\n * primitive with a Promise-returning `onSearch` callback the consumer\n * supplies — the composition itself makes no HTTP calls.\n *\n *   <AsyncSelectOption\n *     v-model=\"userId\"\n *     label=\"User\"\n *     :on-search=\"(q) => fetch(`/users?q=${q}`).then(r => r.json())\"\n *     :initial-options=\"[]\"\n *     :min-search-length=\"1\"\n *   />\n */\nimport { computed, watch } from \"vue\"\nimport { 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 AsyncSelectOptionProps {\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  /** Called when the user types — must return a Promise of options. */\n  onSearch?: (query: string) => Promise<SelectOptionLike[]>\n  /** Options shown before any search runs. */\n  initialOptions?: SelectOptionLike[]\n  /** Minimum length before `onSearch` is invoked. Default 1. */\n  minSearchLength?: number\n  /** Debounce delay before `onSearch` fires. Default 250. */\n  debounceMs?: number\n  loadingText?: string\n  emptyText?: string\n}\n\nconst props = withDefaults(defineProps<AsyncSelectOptionProps>(), {\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\n// Keep results in sync when initialOptions change and there's no query.\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    // Surface initial options on first open.\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-select-anchor\"\n        :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      >\n        <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n        <ComboboxInput\n          :id=\"id\"\n          :model-value=\"query\"\n          :placeholder=\"selectedLabel || (placeholder ?? 'Search…')\"\n          data-testid=\"async-select-input\"\n          @input=\"onInput\"\n        />\n        <Loader2\n          v-if=\"isLoading\"\n          data-testid=\"async-select-loader\"\n          class=\"ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <div\n          v-if=\"isLoading\"\n          class=\"px-2 py-2 text-sm text-muted-foreground\"\n          data-testid=\"async-select-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","<script setup lang=\"ts\">\n/**\n * Props-driven async select composition. Combines the shadcn Combobox\n * primitive with a Promise-returning `onSearch` callback the consumer\n * supplies — the composition itself makes no HTTP calls.\n *\n *   <AsyncSelectOption\n *     v-model=\"userId\"\n *     label=\"User\"\n *     :on-search=\"(q) => fetch(`/users?q=${q}`).then(r => r.json())\"\n *     :initial-options=\"[]\"\n *     :min-search-length=\"1\"\n *   />\n */\nimport { computed, watch } from \"vue\"\nimport { 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 AsyncSelectOptionProps {\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  /** Called when the user types — must return a Promise of options. */\n  onSearch?: (query: string) => Promise<SelectOptionLike[]>\n  /** Options shown before any search runs. */\n  initialOptions?: SelectOptionLike[]\n  /** Minimum length before `onSearch` is invoked. Default 1. */\n  minSearchLength?: number\n  /** Debounce delay before `onSearch` fires. Default 250. */\n  debounceMs?: number\n  loadingText?: string\n  emptyText?: string\n}\n\nconst props = withDefaults(defineProps<AsyncSelectOptionProps>(), {\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\n// Keep results in sync when initialOptions change and there's no query.\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    // Surface initial options on first open.\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-select-anchor\"\n        :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      >\n        <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n        <ComboboxInput\n          :id=\"id\"\n          :model-value=\"query\"\n          :placeholder=\"selectedLabel || (placeholder ?? 'Search…')\"\n          data-testid=\"async-select-input\"\n          @input=\"onInput\"\n        />\n        <Loader2\n          v-if=\"isLoading\"\n          data-testid=\"async-select-loader\"\n          class=\"ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <div\n          v-if=\"isLoading\"\n          class=\"px-2 py-2 text-sm text-muted-foreground\"\n          data-testid=\"async-select-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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqDA,IAAM,IAAQ,GASR,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,EAAE,UAAO,YAAS,cAAW,eAAY,EAAe;GAC5D,UAAU,EAAM;GAChB,gBAAgB,EAAM;GACtB,iBAAiB,EAAM;GACvB,YAAY,EAAM;EACpB,CAAC;EAGD,QACQ,EAAM,iBACX,MAAS;GACR,AAAI,EAAM,MAAM,SAAS,EAAM,oBAC7B,EAAQ,QAAQ,IAAO,CAAC,GAAG,CAAI,IAAI,CAAC;EAExC,CACF;EAEA,IAAM,IAAoB,SACvB,EAAQ,SAAS,CAAC,GAAG,IAAI,CAAe,CAC3C,GAEM,IAAgB,QAAmC;GACvD,IAAM,KAAW,EAAM,kBAAkB,CAAC,GAAG,IAAI,CAAe,GAC1D,IAAc,EAAkB,OAChC,oBAAS,IAAI,IAA8B;GACjD,KAAK,IAAM,KAAK,GACd,EAAO,IAAI,EAAE,OAAO,CAAC;GAEvB,KAAK,IAAM,KAAK,GACd,EAAO,IAAI,EAAE,OAAO,CAAC;GAEvB,OAAO,MAAM,KAAK,EAAO,OAAO,CAAC;EACnC,CAAC,GAEK,IAAe,QAAmC;GAClD,QAAM,UAAU,KAAA,KAAa,EAAM,UAAU,OAGjD,OAAO,OAAO,EAAM,KAAK;EAC3B,CAAC,GAEK,IAAgB,QAAuB;GAC3C,IAAI,EAAa,UAAU,KAAA,GACzB,OAAO;GAET,IAAM,IAAQ,EAAc,MAAM,MAAM,MAAM,EAAE,UAAU,EAAa,KAAK;GAC5E,OAAO,IAAQ,EAAM,QAAQ,EAAa;EAC5C,CAAC;EAED,SAAS,EAAQ,GAAoB;GACnC,IAAM,IAAQ,EAAM,OAA4B;GAChD,EAAQ,CAAI;EACd;EAEA,SAAS,EAAS,GAAqB;GACrC,IAAI,MAAM,QAAQ,CAAI,GAAG;IACvB,EAAM,QAAQ,EAAK,OAAO,KAAA,IAAY,OAAQ,EAAK;IACnD;GACF;GACA,EAAM,QAAQ,MAAS,KAAA,IAAY,OAAQ;EAC7C;EAEA,SAAS,EAAa,GAAqB;GACzC,AAAI,KAAQ,EAAM,UAAU,OAE1B,EAAQ,QAAQ,EAAM,iBAAiB,CAAC,GAAG,EAAM,cAAc,IAAI,CAAC;EAExE;SAEA,EAAa,EAAE,WAAQ,CAAC,mBAItB,EAwDa,EAAA,CAAA,GAAA;GAvDV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAiDE,CA/CX,EA+CW,EAAA,CAAA,GAAA;IA9CR,eAAa,EAAA;IACb,UAAU,EAAA,YAAY,EAAA;IACvB,iBAAA;IACC,uBAAoB;IACpB,iBAAa;;qBAoBG,CAlBjB,EAkBiB,EAAA,CAAA,GAAA;KAjBd,qBAAmB,EAAA,QAAQ,KAAA;KAC5B,eAAY;KACX,OAAK,EAAE,EAAA,OAAO,SAAM,wCAAA,EAAA;;sBAE8B;MAAnD,EAAmD,EAAA,CAAA,GAAA,EAA3C,OAAM,mCAAkC,CAAA;MAChD,EAME,EAAA,CAAA,GAAA;OALC,IAAI,EAAA;OACJ,eAAa,EAAA,CAAA;OACb,aAAa,EAAA,UAAkB,EAAA,eAAW;OAC3C,eAAY;OACJ;;;;;;MAGF,EAAA,CAAA,KAAA,EAAA,GADR,EAIE,EAAA,CAAA,GAAA;;OAFA,eAAY;OACZ,OAAM;;;;2CAGV,EAoBkB,EAAA,CAAA,GAAA,MAAA;sBAbV,CALE,EAAA,CAAA,KAAA,EAAA,GADR,EAMM,OANN,GAMM,EADD,EAAA,WAAW,GAAA,CAAA,KAEU,EAAA,MAAkB,WAAM,KAAA,EAAA,GAAlD,EAEgB,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;uBADC,CAAA,EAAA,EAAZ,EAAA,SAAS,GAAA,CAAA,CAAA,CAAA;;8BAEd,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/AsyncSelectPicker-PwS8Aa6W.js

@@ -0,0 +1,167 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { c as t, i as n, l as r, n as i, o as a, r as o, s } from "./combobox-BrYBRIqW.js";
+import { t as c } from "./field-frame-n5oLDNBT.js";
+import { t as l } from "./useAsyncSearch-CS_CQauO.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, watch as E, withCtx as D } from "vue";
+import { ChevronsUpDown as O, Loader2 as k, Search as A } from "@lucide/vue";
+//#region src/components/compositions/elements/picker/AsyncSelectPicker.vue?vue&type=script&setup=true&lang.ts
+var j = {
+	key: 0,
+	class: "truncate text-sm",
+	"data-testid": "async-picker-label"
+}, M = {
+	key: 1,
+	class: "text-sm text-muted-foreground"
+}, N = { class: "flex items-center border-b px-2 py-1.5" }, P = {
+	key: 0,
+	class: "px-2 py-2 text-sm text-muted-foreground",
+	"data-testid": "async-picker-loading-text"
+}, F = /* @__PURE__ */ v({
+	__name: "AsyncSelectPicker",
+	props: /* @__PURE__ */ y({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] },
+		onSearch: {},
+		initialOptions: { default: () => [] },
+		minSearchLength: { default: 1 },
+		debounceMs: { default: 250 },
+		loadingText: { default: "Loading..." },
+		emptyText: { default: "No results" }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(e, { expose: v }) {
+		let y = e, F = T(e, "modelValue");
+		function I(e) {
+			return typeof e == "string" ? {
+				label: e,
+				value: e,
+				disabled: !1
+			} : {
+				label: e.label,
+				value: String(e.value),
+				disabled: !!e.disabled
+			};
+		}
+		let { query: L, results: R, isLoading: z, trigger: B } = l({
+			onSearch: y.onSearch,
+			initialOptions: y.initialOptions,
+			minSearchLength: y.minSearchLength,
+			debounceMs: y.debounceMs
+		});
+		E(() => y.initialOptions, (e) => {
+			L.value.length < y.minSearchLength && (R.value = e ? [...e] : []);
+		});
+		let V = d(() => (R.value ?? []).map(I)), H = d(() => {
+			let e = (y.initialOptions ?? []).map(I), t = V.value, n = /* @__PURE__ */ new Map();
+			for (let t of e) n.set(t.value, t);
+			for (let e of t) n.set(e.value, e);
+			return Array.from(n.values());
+		}), U = d(() => {
+			if (!(F.value === void 0 || F.value === null)) return String(F.value);
+		}), W = d(() => {
+			if (U.value === void 0) return "";
+			let e = H.value.find((e) => e.value === U.value);
+			return e ? e.label : U.value;
+		});
+		function G(e) {
+			let t = e.target.value;
+			B(t);
+		}
+		function K(e) {
+			if (Array.isArray(e)) {
+				F.value = e[0] === void 0 ? null : e[0];
+				return;
+			}
+			F.value = e === void 0 ? null : e;
+		}
+		function q(e) {
+			e && L.value === "" && (R.value = y.initialOptions ? [...y.initialOptions] : []);
+		}
+		return v({ trigger: B }), (l, d) => (x(), f(w(c), {
+			label: e.label,
+			required: e.required,
+			"hide-label": e.hideLabel,
+			for: e.id,
+			"help-text": e.helpText,
+			errors: e.errors
+		}, {
+			default: D(() => [_(w(r), {
+				"model-value": U.value,
+				disabled: e.disabled || e.readonly,
+				"ignore-filter": "",
+				"onUpdate:modelValue": K,
+				"onUpdate:open": q
+			}, {
+				default: D(() => [_(w(t), {
+					"data-element-name": e.name ?? void 0,
+					"data-testid": "async-picker-anchor",
+					class: b(["justify-between text-left", e.errors.length ? "border-destructive ring-destructive" : ""])
+				}, {
+					default: D(() => [W.value ? (x(), m("span", j, C(W.value), 1)) : (x(), m("span", M, C(e.placeholder ?? "Select…"), 1)), _(w(O), { class: "ml-2 h-4 w-4 shrink-0 opacity-50" })]),
+					_: 1
+				}, 8, ["data-element-name", "class"]), _(w(s), null, {
+					default: D(() => [
+						h("div", N, [
+							_(w(A), { class: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+							_(w(n), {
+								id: e.id,
+								"model-value": w(L),
+								placeholder: e.placeholder ?? "Search…",
+								class: "h-8",
+								"data-testid": "async-picker-input",
+								onInput: G
+							}, null, 8, [
+								"id",
+								"model-value",
+								"placeholder"
+							]),
+							w(z) ? (x(), f(w(k), {
+								key: 0,
+								"data-testid": "async-picker-loader",
+								class: "ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground"
+							})) : p("", !0)
+						]),
+						w(z) ? (x(), m("div", P, C(e.loadingText), 1)) : V.value.length === 0 ? (x(), f(w(a), { key: 1 }, {
+							default: D(() => [g(C(e.emptyText), 1)]),
+							_: 1
+						})) : p("", !0),
+						(x(!0), m(u, null, S(V.value, (e) => (x(), f(w(o), {
+							key: e.value,
+							value: e.value,
+							disabled: e.disabled
+						}, {
+							default: D(() => [_(w(i)), 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"
+		]));
+	}
+}), I = /* @__PURE__ */ e({ default: () => L }), L = F;
+//#endregion
+export { I as n, L as t };
+
+//# sourceMappingURL=AsyncSelectPicker-PwS8Aa6W.js.map

package/dist/chunks/AsyncSelectPicker-PwS8Aa6W.js.map

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

package/dist/chunks/AutoCompleteOption-BRUgf-NE.js

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

package/dist/chunks/AutoCompleteOption-BRUgf-NE.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoCompleteOption-BRUgf-NE.js","names":[],"sources":["../../src/components/compositions/elements/option-select/AutoCompleteOption.vue","../../src/components/compositions/elements/option-select/AutoCompleteOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven autocomplete composition. Wraps the shadcn Combobox\n * primitive with client-side search filtering.\n *\n *   <AutoCompleteOption v-model=\"city\" :options=\"[...]\" label=\"City\" />\n */\nimport { computed, ref } from \"vue\"\nimport { 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\"\n\nexport interface AutoCompleteOptionProps {\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  minSearchLength?: number\n}\n\nconst props = withDefaults(defineProps<AutoCompleteOptionProps>(), {\n  errors: () => [],\n  options: () => [],\n  minSearchLength: 0,\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 query = ref(\"\")\n\nconst filtered = computed<NormalisedOption[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  if (q.length < props.minSearchLength) {\n    return normalised.value\n  }\n  if (q === \"\") {\n    return normalised.value\n  }\n  return normalised.value.filter((o) => o.label.toLowerCase().includes(q))\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\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</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      @update:model-value=\"onUpdate\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      >\n        <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n        <ComboboxInput\n          :id=\"id\"\n          v-model=\"query\"\n          :placeholder=\"placeholder ?? 'Search…'\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No matches.</ComboboxEmpty>\n        <ComboboxItem\n          v-for=\"opt in filtered\"\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 autocomplete composition. Wraps the shadcn Combobox\n * primitive with client-side search filtering.\n *\n *   <AutoCompleteOption v-model=\"city\" :options=\"[...]\" label=\"City\" />\n */\nimport { computed, ref } from \"vue\"\nimport { 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\"\n\nexport interface AutoCompleteOptionProps {\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  minSearchLength?: number\n}\n\nconst props = withDefaults(defineProps<AutoCompleteOptionProps>(), {\n  errors: () => [],\n  options: () => [],\n  minSearchLength: 0,\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 query = ref(\"\")\n\nconst filtered = computed<NormalisedOption[]>(() => {\n  const q = query.value.trim().toLowerCase()\n  if (q.length < props.minSearchLength) {\n    return normalised.value\n  }\n  if (q === \"\") {\n    return normalised.value\n  }\n  return normalised.value.filter((o) => o.label.toLowerCase().includes(q))\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\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</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      @update:model-value=\"onUpdate\"\n    >\n      <ComboboxAnchor\n        :data-element-name=\"name ?? undefined\"\n        :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      >\n        <Search class=\"mr-2 h-4 w-4 shrink-0 opacity-50\" />\n        <ComboboxInput\n          :id=\"id\"\n          v-model=\"query\"\n          :placeholder=\"placeholder ?? 'Search…'\"\n        />\n      </ComboboxAnchor>\n      <ComboboxContent>\n        <ComboboxEmpty>No matches.</ComboboxEmpty>\n        <ComboboxItem\n          v-for=\"opt in filtered\"\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqCA,IAAM,IAAQ,GAMR,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,IAAQ,EAAI,EAAE,GAEd,IAAW,QAAmC;GAClD,IAAM,IAAI,EAAM,MAAM,KAAK,EAAE,YAAY;GAOzC,OANI,EAAE,SAAS,EAAM,mBAGjB,MAAM,KACD,EAAW,QAEb,EAAW,MAAM,QAAQ,MAAM,EAAE,MAAM,YAAY,EAAE,SAAS,CAAC,CAAC;EACzE,CAAC,GAEK,IAAe,QAAmC;GAClD,QAAM,UAAU,KAAA,KAAa,EAAM,UAAU,OAGjD,OAAO,OAAO,EAAM,KAAK;EAC3B,CAAC;EAED,SAAS,EAAS,GAAqB;GACrC,IAAI,MAAM,QAAQ,CAAI,GAAG;IACvB,EAAM,QAAQ,EAAK,OAAO,KAAA,IAAY,OAAQ,EAAK;IACnD;GACF;GACA,EAAM,QAAQ,MAAS,KAAA,IAAY,OAAQ;EAC7C;yBAIE,EAqCa,EAAA,CAAA,GAAA;GApCV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBA8BE,CA5BX,EA4BW,EAAA,CAAA,GAAA;IA3BR,eAAa,EAAA;IACb,UAAU,EAAA,YAAY,EAAA;IACtB,uBAAoB;;qBAYJ,CAVjB,EAUiB,EAAA,CAAA,GAAA;KATd,qBAAmB,EAAA,QAAQ,KAAA;KAC3B,OAAK,EAAE,EAAA,OAAO,SAAM,wCAAA,EAAA;;sBAE8B,CAAnD,EAAmD,EAAA,CAAA,GAAA,EAA3C,OAAM,mCAAkC,CAAA,GAChD,EAIE,EAAA,CAAA,GAAA;MAHC,IAAI,EAAA;kBACI,EAAA;+CAAK,QAAA;MACb,aAAa,EAAA,eAAW;;;;;;;2CAG7B,EAWkB,EAAA,CAAA,GAAA,MAAA;sBAV0B,CAA1C,EAA0C,EAAA,CAAA,GAAA,MAAA;uBAAhB,CAAA,GAAA,AAAA,EAAA,OAAA,CAAA,EAAX,eAAW,EAAA,CAAA,CAAA,CAAA;;iBAC1B,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/BannerDisplay-CiuAyiqo.js

@@ -0,0 +1,56 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { i as t, n, r } from "./alert-BaV_rA2M.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createTextVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, ref as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, watch as h, withCtx as g } from "vue";
+import { Info as _ } from "@lucide/vue";
+//#region src/components/compositions/elements/display/BannerDisplay.vue?vue&type=script&setup=true&lang.ts
+var v = /* @__PURE__ */ c({
+	__name: "BannerDisplay",
+	props: {
+		value: {},
+		title: {},
+		variant: { default: "default" },
+		icon: {},
+		classList: {}
+	},
+	setup(e) {
+		let c = e, v = i(() => c.value === void 0 || c.value === null ? "" : String(c.value)), y = i(() => {
+			let e = c.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		});
+		function b(e) {
+			return e.replace(/[-_\s]+(.)?/g, (e, t) => t ? t.toUpperCase() : "").replace(/^(.)/, (e) => e.toUpperCase());
+		}
+		let x = d(null);
+		async function S(e) {
+			if (!e) {
+				x.value = null;
+				return;
+			}
+			x.value = (await import("@lucide/vue"))[b(e)] ?? null;
+		}
+		return h(() => c.icon, (e) => {
+			S(e);
+		}, { immediate: !0 }), (i, c) => (u(), a(m(t), {
+			variant: e.variant,
+			class: l(y.value),
+			"data-testid": "banner-display"
+		}, {
+			default: g(() => [
+				e.icon && x.value ? (u(), a(f(x.value), { key: 0 })) : e.icon ? o("", !0) : (u(), a(m(_), { key: 1 })),
+				e.title ? (u(), a(m(n), { key: 2 }, {
+					default: g(() => [s(p(e.title), 1)]),
+					_: 1
+				})) : o("", !0),
+				v.value ? (u(), a(m(r), { key: 3 }, {
+					default: g(() => [s(p(v.value), 1)]),
+					_: 1
+				})) : o("", !0)
+			]),
+			_: 1
+		}, 8, ["variant", "class"]));
+	}
+}), y = /* @__PURE__ */ e({ default: () => b }), b = v;
+//#endregion
+export { y as n, b as t };
+
+//# sourceMappingURL=BannerDisplay-CiuAyiqo.js.map

package/dist/chunks/BannerDisplay-CiuAyiqo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerDisplay-CiuAyiqo.js","names":[],"sources":["../../src/components/compositions/elements/display/BannerDisplay.vue","../../src/components/compositions/elements/display/BannerDisplay.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven banner display.\n *\n * Wraps the Alert primitive: `title` is the alert title and `value`\n * is the description. `variant` selects the colour scheme and `icon`\n * is a lucide icon name (PascalCase or kebab-case). The library is\n * lazy-imported so we only pay for it when an icon is requested.\n */\nimport { computed, ref, watch, type Component } from \"vue\"\nimport { Info } from \"@lucide/vue\"\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\"\nimport type { AlertVariants } from \"@/components/ui/alert\"\n\nexport interface BannerDisplayProps {\n  value?: string | number | null\n  title?: string\n  variant?: AlertVariants[\"variant\"]\n  icon?: string\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<BannerDisplayProps>(), {\n  variant: \"default\",\n})\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\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\nfunction toPascalCase(input: string): string {\n  return input\n    .replace(/[-_\\s]+(.)?/g, (_, ch?: string) => (ch ? ch.toUpperCase() : \"\"))\n    .replace(/^(.)/, (m) => m.toUpperCase())\n}\n\nconst ResolvedIcon = ref<Component | null>(null)\n\nasync function loadIcon(name: string | undefined): Promise<void> {\n  if (!name) {\n    ResolvedIcon.value = null\n    return\n  }\n  const mod = await import(\"@lucide/vue\")\n  const registry = mod as unknown as Record<string, Component | undefined>\n  ResolvedIcon.value = registry[toPascalCase(name)] ?? null\n}\n\nwatch(\n  () => props.icon,\n  (next) => {\n    void loadIcon(next)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <Alert\n    :variant=\"variant\"\n    :class=\"rootClass\"\n    data-testid=\"banner-display\"\n  >\n    <component\n      :is=\"ResolvedIcon\"\n      v-if=\"icon && ResolvedIcon\"\n    />\n    <Info v-else-if=\"!icon\" />\n    <AlertTitle v-if=\"title\">\n      {{ title }}\n    </AlertTitle>\n    <AlertDescription v-if=\"content\">\n      {{ content }}\n    </AlertDescription>\n  </Alert>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Props-driven banner display.\n *\n * Wraps the Alert primitive: `title` is the alert title and `value`\n * is the description. `variant` selects the colour scheme and `icon`\n * is a lucide icon name (PascalCase or kebab-case). The library is\n * lazy-imported so we only pay for it when an icon is requested.\n */\nimport { computed, ref, watch, type Component } from \"vue\"\nimport { Info } from \"@lucide/vue\"\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\"\nimport type { AlertVariants } from \"@/components/ui/alert\"\n\nexport interface BannerDisplayProps {\n  value?: string | number | null\n  title?: string\n  variant?: AlertVariants[\"variant\"]\n  icon?: string\n  classList?: string[] | string\n}\n\nconst props = withDefaults(defineProps<BannerDisplayProps>(), {\n  variant: \"default\",\n})\n\nconst content = computed<string>(() => {\n  if (props.value === undefined || props.value === null) {\n    return \"\"\n  }\n  return String(props.value)\n})\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\nfunction toPascalCase(input: string): string {\n  return input\n    .replace(/[-_\\s]+(.)?/g, (_, ch?: string) => (ch ? ch.toUpperCase() : \"\"))\n    .replace(/^(.)/, (m) => m.toUpperCase())\n}\n\nconst ResolvedIcon = ref<Component | null>(null)\n\nasync function loadIcon(name: string | undefined): Promise<void> {\n  if (!name) {\n    ResolvedIcon.value = null\n    return\n  }\n  const mod = await import(\"@lucide/vue\")\n  const registry = mod as unknown as Record<string, Component | undefined>\n  ResolvedIcon.value = registry[toPascalCase(name)] ?? null\n}\n\nwatch(\n  () => props.icon,\n  (next) => {\n    void loadIcon(next)\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <Alert\n    :variant=\"variant\"\n    :class=\"rootClass\"\n    data-testid=\"banner-display\"\n  >\n    <component\n      :is=\"ResolvedIcon\"\n      v-if=\"icon && ResolvedIcon\"\n    />\n    <Info v-else-if=\"!icon\" />\n    <AlertTitle v-if=\"title\">\n      {{ title }}\n    </AlertTitle>\n    <AlertDescription v-if=\"content\">\n      {{ content }}\n    </AlertDescription>\n  </Alert>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAsBA,IAAM,IAAQ,GAIR,IAAU,QACV,EAAM,UAAU,KAAA,KAAa,EAAM,UAAU,OACxC,KAEF,OAAO,EAAM,KAAK,CAC1B,GAEK,IAAY,QAAuB;GACvC,IAAM,IAAK,EAAM;GAIjB,OAHK,IAGE,MAAM,QAAQ,CAAE,IAAI,EAAG,KAAK,GAAG,IAAI,IAFjC;EAGX,CAAC;EAED,SAAS,EAAa,GAAuB;GAC3C,OAAO,EACJ,QAAQ,iBAAiB,GAAG,MAAiB,IAAK,EAAG,YAAY,IAAI,EAAG,EACxE,QAAQ,SAAS,MAAM,EAAE,YAAY,CAAC;EAC3C;EAEA,IAAM,IAAe,EAAsB,IAAI;EAE/C,eAAe,EAAS,GAAyC;GAC/D,IAAI,CAAC,GAAM;IACT,EAAa,QAAQ;IACrB;GACF;GAGA,EAAa,SAAQ,MAFH,OAAO,gBAEK,EAAa,CAAI,MAAM;EACvD;SAEA,QACQ,EAAM,OACX,MAAS;GACR,EAAc,CAAI;EACpB,GACA,EAAE,WAAW,GAAK,CACpB,mBAIE,EAgBQ,EAAA,CAAA,GAAA;GAfL,SAAS,EAAA;GACT,OAAK,EAAE,EAAA,KAAS;GACjB,eAAY;;oBAKV;IADM,EAAA,QAAQ,EAAA,SAAA,EAAA,GAFhB,EAGE,EAFK,EAAA,KAAY,GAAA,EAAA,KAAA,EAAA,CAAA,KAGD,EAAA,OAAQ,EAAA,IAAA,EAAA,KAAR,EAAA,GAAlB,EAA0B,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,CAAA;IACR,EAAA,SAAA,EAAA,GAAlB,EAEa,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;sBADA,CAAA,EAAA,EAAR,EAAA,KAAK,GAAA,CAAA,CAAA,CAAA;;;IAEc,EAAA,SAAA,EAAA,GAAxB,EAEmB,EAAA,CAAA,GAAA,EAAA,KAAA,EAAA,GAAA;sBADJ,CAAA,EAAA,EAAV,EAAA,KAAO,GAAA,CAAA,CAAA,CAAA"}

package/dist/chunks/BarcodeDisplay-kdnMuers.js

@@ -0,0 +1,50 @@
+import { t as e } from "./rolldown-runtime-Dy4uBu1J.js";
+import { computed as t, createCommentVNode as n, createElementBlock as r, defineComponent as i, normalizeClass as a, onMounted as o, openBlock as s, ref as c, toDisplayString as l, useTemplateRef as u, watch as d } from "vue";
+//#region src/components/compositions/elements/display/BarcodeDisplay.vue?vue&type=script&setup=true&lang.ts
+var f = ["aria-label"], p = {
+	key: 0,
+	class: "mt-1 text-xs text-destructive",
+	"data-testid": "barcode-error"
+}, m = /* @__PURE__ */ i({
+	__name: "BarcodeDisplay",
+	props: {
+		value: {},
+		format: { default: "CODE128" },
+		classList: {}
+	},
+	setup(e) {
+		let i = e, m = t(() => i.value === void 0 || i.value === null ? "" : String(i.value)), h = t(() => {
+			let e = i.classList;
+			return e ? Array.isArray(e) ? e.join(" ") : e : "";
+		}), g = u("svgRef"), _ = c("");
+		async function v() {
+			if (!(!g.value || !m.value)) try {
+				let e = (await import("jsbarcode")).default;
+				e(g.value, m.value, {
+					format: i.format,
+					displayValue: !0,
+					margin: 4
+				}), _.value = "";
+			} catch (e) {
+				_.value = e instanceof Error ? e.message : "Failed to render barcode";
+			}
+		}
+		return o(() => {
+			v();
+		}), d(() => [m.value, i.format], () => {
+			v();
+		}), (e, t) => (s(), r("div", {
+			class: a(["inline-block", h.value]),
+			"data-testid": "barcode-display"
+		}, [(s(), r("svg", {
+			ref_key: "svgRef",
+			ref: g,
+			role: "img",
+			"aria-label": `Barcode: ${m.value}`
+		}, null, 8, f)), _.value ? (s(), r("p", p, l(_.value), 1)) : n("", !0)], 2));
+	}
+}), h = /* @__PURE__ */ e({ default: () => g }), g = m;
+//#endregion
+export { h as n, g as t };
+
+//# sourceMappingURL=BarcodeDisplay-kdnMuers.js.map