@gxp-dev/mod-ui 2.0.10 → 2.0.12

package/dist/components/compositions/elements/input/TextareaInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,86 @@
+import e from "../../../ui/textarea/Textarea.js";
+import "../../../ui/textarea/index.js";
+import t from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { createBlock as n, createVNode as r, defineComponent as i, mergeModels as a, normalizeClass as o, onMounted as s, openBlock as c, unref as l, useModel as u, useTemplateRef as d, withCtx as f } from "vue";
+//#region src/components/compositions/elements/input/TextareaInput.vue?vue&type=script&setup=true&lang.ts
+var p = /* @__PURE__ */ i({
+	__name: "TextareaInput",
+	props: /* @__PURE__ */ a({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		maxlength: {},
+		minlength: {},
+		rows: { default: 3 },
+		helpText: {},
+		errors: { default: () => [] },
+		autoFocus: { type: Boolean }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(i) {
+		let a = i, p = u(i, "modelValue"), m = d("textareaRef");
+		return s(() => {
+			a.autoFocus && m.value?.focus();
+		}), (a, s) => (c(), n(l(t), {
+			label: i.label,
+			required: i.required,
+			"hide-label": i.hideLabel,
+			for: i.id,
+			"help-text": i.helpText,
+			errors: i.errors
+		}, {
+			default: f(() => [r(l(e), {
+				ref_key: "textareaRef",
+				ref: m,
+				"model-value": p.value ?? void 0,
+				id: i.id,
+				name: i.name ?? void 0,
+				placeholder: i.placeholder ?? "",
+				readonly: i.readonly,
+				disabled: i.disabled,
+				required: i.required,
+				maxlength: i.maxlength,
+				minlength: i.minlength,
+				rows: i.rows,
+				"data-element-name": i.name ?? void 0,
+				class: o(i.errors.length ? "border-destructive ring-destructive" : ""),
+				"onUpdate:modelValue": s[0] ||= (e) => p.value = e ?? ""
+			}, null, 8, [
+				"model-value",
+				"id",
+				"name",
+				"placeholder",
+				"readonly",
+				"disabled",
+				"required",
+				"maxlength",
+				"minlength",
+				"rows",
+				"data-element-name",
+				"class"
+			])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=TextareaInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/input/TextareaInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaInput.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/input/TextareaInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven textarea input composition. Composes the shadcn\n * `Textarea` primitive and `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <TextareaInput v-model=\"bio\" label=\"Bio\" :rows=\"5\" />\n */\nimport { onMounted, useTemplateRef } from \"vue\"\nimport { Textarea } from \"@/components/ui/textarea\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface TextareaInputProps {\n  modelValue?: string\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  maxlength?: number\n  minlength?: number\n  rows?: number\n  helpText?: string\n  errors?: string[]\n  autoFocus?: boolean\n}\n\nconst props = withDefaults(defineProps<TextareaInputProps>(), {\n  rows: 3,\n  errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst textareaRef = useTemplateRef<HTMLTextAreaElement>(\"textareaRef\")\n\nonMounted(() => {\n  if (props.autoFocus) {\n    textareaRef.value?.focus()\n  }\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    <Textarea\n      ref=\"textareaRef\"\n      :model-value=\"model ?? undefined\"\n      :id=\"id\"\n      :name=\"name ?? undefined\"\n      :placeholder=\"placeholder ?? ''\"\n      :readonly=\"readonly\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      :maxlength=\"maxlength\"\n      :minlength=\"minlength\"\n      :rows=\"rows\"\n      :data-element-name=\"name ?? undefined\"\n      :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      @update:model-value=\"(v: string | undefined) => (model = v ?? '')\"\n    />\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BA,IAAM,IAAQ,GAKR,IAAQ,EAAmB,GAAC,YAAY,GAExC,IAAc,EAAoC,aAAa;SAErE,QAAgB;GACd,AAAI,EAAM,aACR,EAAY,OAAO,MAAM;EAE7B,CAAC,mBAIC,EAwBa,EAAA,CAAA,GAAA;GAvBV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAiBP,CAfF,EAeE,EAAA,CAAA,GAAA;aAdI;IAAJ,KAAI;IACH,eAAa,EAAA,SAAS,KAAA;IACtB,IAAI,EAAA;IACJ,MAAM,EAAA,QAAQ,KAAA;IACd,aAAa,EAAA,eAAW;IACxB,UAAU,EAAA;IACV,UAAU,EAAA;IACV,UAAU,EAAA;IACV,WAAW,EAAA;IACX,WAAW,EAAA;IACX,MAAM,EAAA;IACN,qBAAmB,EAAA,QAAQ,KAAA;IAC3B,OAAK,EAAE,EAAA,OAAO,SAAM,wCAAA,EAAA;IACpB,uBAAkB,AAAA,EAAA,QAAG,MAA2B,EAAA,QAAQ,KAAC"}

package/dist/components/compositions/elements/input/UrlInput.js

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

package/dist/components/compositions/elements/input/UrlInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UrlInput.js","names":[],"sources":["../../../../../src/components/compositions/elements/input/UrlInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven URL input composition. Composes the shadcn `Input`\n * primitive (with `type=\"url\"`) and `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <UrlInput v-model=\"website\" label=\"Website\" />\n */\nimport { onMounted, useTemplateRef } from \"vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface UrlInputProps {\n  modelValue?: string\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  maxlength?: number\n  minlength?: number\n  helpText?: string\n  errors?: string[]\n  autoFocus?: boolean\n}\n\nconst props = withDefaults(defineProps<UrlInputProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst inputRef = useTemplateRef<HTMLInputElement>(\"inputRef\")\n\nonMounted(() => {\n  if (props.autoFocus) {\n    inputRef.value?.focus()\n  }\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    <Input\n      ref=\"inputRef\"\n      :model-value=\"model ?? undefined\"\n      :id=\"id\"\n      :name=\"name ?? undefined\"\n      type=\"url\"\n      :placeholder=\"placeholder ?? ''\"\n      :readonly=\"readonly\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      :maxlength=\"maxlength\"\n      :minlength=\"minlength\"\n      :data-element-name=\"name ?? undefined\"\n      :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      @update:model-value=\"(v: string | number | undefined) => (model = v == null ? '' : String(v))\"\n    />\n  </FieldFrame>\n</template>\n"],"mappings":""}

package/dist/components/compositions/elements/input/UrlInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,84 @@
+import e from "../../../ui/input/Input.js";
+import "../../../ui/input/index.js";
+import t from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { createBlock as n, createVNode as r, defineComponent as i, mergeModels as a, normalizeClass as o, onMounted as s, openBlock as c, unref as l, useModel as u, useTemplateRef as d, withCtx as f } from "vue";
+//#region src/components/compositions/elements/input/UrlInput.vue?vue&type=script&setup=true&lang.ts
+var p = /* @__PURE__ */ i({
+	__name: "UrlInput",
+	props: /* @__PURE__ */ a({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		maxlength: {},
+		minlength: {},
+		helpText: {},
+		errors: { default: () => [] },
+		autoFocus: { type: Boolean }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(i) {
+		let a = i, p = u(i, "modelValue"), m = d("inputRef");
+		return s(() => {
+			a.autoFocus && m.value?.focus();
+		}), (a, s) => (c(), n(l(t), {
+			label: i.label,
+			required: i.required,
+			"hide-label": i.hideLabel,
+			for: i.id,
+			"help-text": i.helpText,
+			errors: i.errors
+		}, {
+			default: f(() => [r(l(e), {
+				ref_key: "inputRef",
+				ref: m,
+				"model-value": p.value ?? void 0,
+				id: i.id,
+				name: i.name ?? void 0,
+				type: "url",
+				placeholder: i.placeholder ?? "",
+				readonly: i.readonly,
+				disabled: i.disabled,
+				required: i.required,
+				maxlength: i.maxlength,
+				minlength: i.minlength,
+				"data-element-name": i.name ?? void 0,
+				class: o(i.errors.length ? "border-destructive ring-destructive" : ""),
+				"onUpdate:modelValue": s[0] ||= (e) => p.value = e == null ? "" : String(e)
+			}, null, 8, [
+				"model-value",
+				"id",
+				"name",
+				"placeholder",
+				"readonly",
+				"disabled",
+				"required",
+				"maxlength",
+				"minlength",
+				"data-element-name",
+				"class"
+			])]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"for",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { p as default };
+
+//# sourceMappingURL=UrlInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/compositions/elements/input/UrlInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UrlInput.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/input/UrlInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven URL input composition. Composes the shadcn `Input`\n * primitive (with `type=\"url\"`) and `FieldFrame` chrome.\n *\n * Self-contained — usable directly in any Vue app:\n *\n *   <UrlInput v-model=\"website\" label=\"Website\" />\n */\nimport { onMounted, useTemplateRef } from \"vue\"\nimport { Input } from \"@/components/ui/input\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface UrlInputProps {\n  modelValue?: string\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  maxlength?: number\n  minlength?: number\n  helpText?: string\n  errors?: string[]\n  autoFocus?: boolean\n}\n\nconst props = withDefaults(defineProps<UrlInputProps>(), {\n  errors: () => [],\n})\n\nconst model = defineModel<string>(\"modelValue\")\n\nconst inputRef = useTemplateRef<HTMLInputElement>(\"inputRef\")\n\nonMounted(() => {\n  if (props.autoFocus) {\n    inputRef.value?.focus()\n  }\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    <Input\n      ref=\"inputRef\"\n      :model-value=\"model ?? undefined\"\n      :id=\"id\"\n      :name=\"name ?? undefined\"\n      type=\"url\"\n      :placeholder=\"placeholder ?? ''\"\n      :readonly=\"readonly\"\n      :disabled=\"disabled\"\n      :required=\"required\"\n      :maxlength=\"maxlength\"\n      :minlength=\"minlength\"\n      :data-element-name=\"name ?? undefined\"\n      :class=\"errors.length ? 'border-destructive ring-destructive' : ''\"\n      @update:model-value=\"(v: string | number | undefined) => (model = v == null ? '' : String(v))\"\n    />\n  </FieldFrame>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BA,IAAM,IAAQ,GAIR,IAAQ,EAAmB,GAAC,YAAY,GAExC,IAAW,EAAiC,UAAU;SAE5D,QAAgB;GACd,AAAI,EAAM,aACR,EAAS,OAAO,MAAM;EAE1B,CAAC,mBAIC,EAwBa,EAAA,CAAA,GAAA;GAvBV,OAAO,EAAA;GACP,UAAU,EAAA;GACV,cAAY,EAAA;GACZ,KAAK,EAAA;GACL,aAAW,EAAA;GACX,QAAQ,EAAA;;oBAiBP,CAfF,EAeE,EAAA,CAAA,GAAA;aAdI;IAAJ,KAAI;IACH,eAAa,EAAA,SAAS,KAAA;IACtB,IAAI,EAAA;IACJ,MAAM,EAAA,QAAQ,KAAA;IACf,MAAK;IACJ,aAAa,EAAA,eAAW;IACxB,UAAU,EAAA;IACV,UAAU,EAAA;IACV,UAAU,EAAA;IACV,WAAW,EAAA;IACX,WAAW,EAAA;IACX,qBAAmB,EAAA,QAAQ,KAAA;IAC3B,OAAK,EAAE,EAAA,OAAO,SAAM,wCAAA,EAAA;IACpB,uBAAkB,AAAA,EAAA,QAAG,MAAoC,EAAA,QAAQ,KAAC,OAAA,KAAgB,OAAO,CAAC"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxOption.js","names":[],"sources":["../../../../../src/components/compositions/elements/option-select/CheckboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven multi-checkbox composition. Renders one Checkbox per\n * option and stores the result as an array of selected values.\n *\n *   <CheckboxOption v-model=\"prefs\" :options=\"[...]\" label=\"Preferences\" />\n */\nimport { computed } from \"vue\"\nimport type { SelectOptionLike } from \"@/definitions/shared/select-options\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Label } from \"@/components/ui/label\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface CheckboxOptionProps {\n  modelValue?: Array<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<CheckboxOptionProps>(), {\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\nfunction isChecked(val: string): boolean {\n  return selected.value.includes(val)\n}\n\nfunction onToggle(val: string, checked: boolean | \"indeterminate\"): void {\n  const current = selected.value\n  if (checked === true) {\n    if (!current.includes(val)) {\n      model.value = [...current, val]\n    }\n  } else {\n    model.value = current.filter((v) => v !== val)\n  }\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    <div\n      :class=\"inline ? 'flex flex-row flex-wrap gap-4' : 'grid gap-2'\"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <div\n        v-for=\"opt in normalised\"\n        :key=\"opt.value\"\n        class=\"flex items-center gap-2\"\n      >\n        <Checkbox\n          :id=\"`${id ?? 'checkbox'}-${opt.value}`\"\n          :name=\"name\"\n          :model-value=\"isChecked(opt.value)\"\n          :disabled=\"opt.disabled || disabled || readonly\"\n          @update:model-value=\"(c) => onToggle(opt.value, c)\"\n        />\n        <Label\n          :for=\"`${id ?? 'checkbox'}-${opt.value}`\"\n          class=\"cursor-pointer\"\n        >\n          {{ opt.label }}\n        </Label>\n      </div>\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":""}