@gxp-dev/mod-ui 2.0.0 → 2.0.1

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

@@ -1,5 +1,170 @@
-import f from "./AsyncSelectOption.vue2.js";
+import { defineComponent as A, useModel as q, watch as w, computed as c, openBlock as r, createBlock as f, unref as l, withCtx as o, createVNode as d, normalizeClass as C, createCommentVNode as S, createElementBlock as L, toDisplayString as g, createTextVNode as O, Fragment as N, renderList as U, mergeModels as R } from "vue";
+import { Search as z, Loader2 as D } from "lucide-vue-next";
+import E from "../../../ui/combobox/Combobox.vue.js";
+import F from "../../../ui/combobox/ComboboxAnchor.vue.js";
+import I from "../../../ui/combobox/ComboboxContent.vue.js";
+import j from "../../../ui/combobox/ComboboxEmpty.vue.js";
+import "@vueuse/core";
+import "reka-ui";
+import "clsx";
+import "tailwind-merge";
+import G from "../../../ui/combobox/ComboboxInput.vue.js";
+import H from "../../../ui/combobox/ComboboxItem.vue.js";
+import J from "../../../ui/combobox/ComboboxItemIndicator.vue.js";
+import K from "../../../ui/field-frame/FieldFrame.vue.js";
+import { useAsyncSearch as P } from "../../../../composables/useAsyncSearch.js";
+const Q = {
+  key: 0,
+  class: "px-2 py-2 text-sm text-muted-foreground",
+  "data-testid": "async-select-loading-text"
+}, se = /* @__PURE__ */ A({
+  __name: "AsyncSelectOption",
+  props: /* @__PURE__ */ R({
+    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(a, { expose: k }) {
+    const t = a, u = q(a, "modelValue");
+    function p(e) {
+      return typeof e == "string" ? { label: e, value: e, disabled: !1 } : {
+        label: e.label,
+        value: String(e.value),
+        disabled: !!e.disabled
+      };
+    }
+    const { query: v, results: h, isLoading: y, trigger: x } = P({
+      onSearch: t.onSearch,
+      initialOptions: t.initialOptions,
+      minSearchLength: t.minSearchLength,
+      debounceMs: t.debounceMs
+    });
+    w(
+      () => t.initialOptions,
+      (e) => {
+        v.value.length < t.minSearchLength && (h.value = e ? [...e] : []);
+      }
+    );
+    const b = c(
+      () => (h.value ?? []).map(p)
+    ), V = c(() => {
+      const e = (t.initialOptions ?? []).map(p), i = b.value, n = /* @__PURE__ */ new Map();
+      for (const s of e)
+        n.set(s.value, s);
+      for (const s of i)
+        n.set(s.value, s);
+      return Array.from(n.values());
+    }), m = c(() => {
+      if (!(u.value === void 0 || u.value === null))
+        return String(u.value);
+    }), B = c(() => {
+      if (m.value === void 0)
+        return "";
+      const e = V.value.find((i) => i.value === m.value);
+      return e ? e.label : m.value;
+    });
+    function $(e) {
+      const i = e.target.value;
+      x(i);
+    }
+    function M(e) {
+      if (Array.isArray(e)) {
+        u.value = e[0] === void 0 ? null : e[0];
+        return;
+      }
+      u.value = e === void 0 ? null : e;
+    }
+    function T(e) {
+      e && v.value === "" && (h.value = t.initialOptions ? [...t.initialOptions] : []);
+    }
+    return k({ trigger: x }), (e, i) => (r(), f(l(K), {
+      label: a.label,
+      required: a.required,
+      "hide-label": a.hideLabel,
+      for: a.id,
+      "help-text": a.helpText,
+      errors: a.errors
+    }, {
+      default: o(() => [
+        d(l(E), {
+          "model-value": m.value,
+          disabled: a.disabled || a.readonly,
+          "ignore-filter": "",
+          "onUpdate:modelValue": M,
+          "onUpdate:open": T
+        }, {
+          default: o(() => [
+            d(l(F), {
+              "data-element-name": a.name ?? void 0,
+              "data-testid": "async-select-anchor",
+              class: C(a.errors.length ? "border-destructive ring-destructive" : "")
+            }, {
+              default: o(() => [
+                d(l(z), { class: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+                d(l(G), {
+                  id: a.id,
+                  "model-value": l(v),
+                  placeholder: B.value || (a.placeholder ?? "Search…"),
+                  "data-testid": "async-select-input",
+                  onInput: $
+                }, null, 8, ["id", "model-value", "placeholder"]),
+                l(y) ? (r(), f(l(D), {
+                  key: 0,
+                  "data-testid": "async-select-loader",
+                  class: "ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground"
+                })) : S("", !0)
+              ]),
+              _: 1
+            }, 8, ["data-element-name", "class"]),
+            d(l(I), null, {
+              default: o(() => [
+                l(y) ? (r(), L("div", Q, g(a.loadingText), 1)) : b.value.length === 0 ? (r(), f(l(j), { key: 1 }, {
+                  default: o(() => [
+                    O(g(a.emptyText), 1)
+                  ]),
+                  _: 1
+                })) : S("", !0),
+                (r(!0), L(N, null, U(b.value, (n) => (r(), f(l(H), {
+                  key: n.value,
+                  value: n.value,
+                  disabled: n.disabled
+                }, {
+                  default: o(() => [
+                    d(l(J)),
+                    O(" " + g(n.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["value", "disabled"]))), 128))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["model-value", "disabled"])
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
+  }
+});
 export {
-  f as default
+  se as default
 };
 //# sourceMappingURL=AsyncSelectOption.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AsyncSelectOption.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"AsyncSelectOption.vue.js","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-next\"\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"],"names":["props","__props","model","_useModel","normaliseOption","opt","query","results","isLoading","trigger","useAsyncSearch","watch","next","normalisedResults","computed","normalisedAll","initial","fromResults","merged","o","currentValue","selectedLabel","match","onInput","event","onUpdate","onOpenChange","open","__expose","_createBlock","_unref","FieldFrame","_createVNode","Combobox","ComboboxAnchor","_normalizeClass","Search","ComboboxInput","Loader2","ComboboxContent","_createElementBlock","_hoisted_1","_toDisplayString","ComboboxEmpty","_Fragment","_renderList","ComboboxItem","ComboboxItemIndicator"],"mappings":"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"}

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

@@ -1,170 +1,5 @@
-import { defineComponent as A, useModel as q, watch as w, computed as c, openBlock as r, createBlock as f, unref as l, withCtx as o, createVNode as d, normalizeClass as C, createCommentVNode as S, createElementBlock as L, toDisplayString as g, createTextVNode as O, Fragment as N, renderList as U, mergeModels as R } from "vue";
-import { Search as z, Loader2 as D } from "lucide-vue-next";
-import E from "../../../ui/combobox/Combobox.vue.js";
-import F from "../../../ui/combobox/ComboboxAnchor.vue.js";
-import I from "../../../ui/combobox/ComboboxContent.vue.js";
-import j from "../../../ui/combobox/ComboboxEmpty.vue.js";
-import "@vueuse/core";
-import "reka-ui";
-import "clsx";
-import "tailwind-merge";
-import G from "../../../ui/combobox/ComboboxInput.vue.js";
-import H from "../../../ui/combobox/ComboboxItem.vue.js";
-import J from "../../../ui/combobox/ComboboxItemIndicator.vue.js";
-import K from "../../../ui/field-frame/FieldFrame.vue.js";
-import { useAsyncSearch as P } from "../../../../composables/useAsyncSearch.js";
-const Q = {
-  key: 0,
-  class: "px-2 py-2 text-sm text-muted-foreground",
-  "data-testid": "async-select-loading-text"
-}, se = /* @__PURE__ */ A({
-  __name: "AsyncSelectOption",
-  props: /* @__PURE__ */ R({
-    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(a, { expose: k }) {
-    const t = a, u = q(a, "modelValue");
-    function p(e) {
-      return typeof e == "string" ? { label: e, value: e, disabled: !1 } : {
-        label: e.label,
-        value: String(e.value),
-        disabled: !!e.disabled
-      };
-    }
-    const { query: v, results: h, isLoading: y, trigger: x } = P({
-      onSearch: t.onSearch,
-      initialOptions: t.initialOptions,
-      minSearchLength: t.minSearchLength,
-      debounceMs: t.debounceMs
-    });
-    w(
-      () => t.initialOptions,
-      (e) => {
-        v.value.length < t.minSearchLength && (h.value = e ? [...e] : []);
-      }
-    );
-    const b = c(
-      () => (h.value ?? []).map(p)
-    ), V = c(() => {
-      const e = (t.initialOptions ?? []).map(p), i = b.value, n = /* @__PURE__ */ new Map();
-      for (const s of e)
-        n.set(s.value, s);
-      for (const s of i)
-        n.set(s.value, s);
-      return Array.from(n.values());
-    }), m = c(() => {
-      if (!(u.value === void 0 || u.value === null))
-        return String(u.value);
-    }), B = c(() => {
-      if (m.value === void 0)
-        return "";
-      const e = V.value.find((i) => i.value === m.value);
-      return e ? e.label : m.value;
-    });
-    function $(e) {
-      const i = e.target.value;
-      x(i);
-    }
-    function M(e) {
-      if (Array.isArray(e)) {
-        u.value = e[0] === void 0 ? null : e[0];
-        return;
-      }
-      u.value = e === void 0 ? null : e;
-    }
-    function T(e) {
-      e && v.value === "" && (h.value = t.initialOptions ? [...t.initialOptions] : []);
-    }
-    return k({ trigger: x }), (e, i) => (r(), f(l(K), {
-      label: a.label,
-      required: a.required,
-      "hide-label": a.hideLabel,
-      for: a.id,
-      "help-text": a.helpText,
-      errors: a.errors
-    }, {
-      default: o(() => [
-        d(l(E), {
-          "model-value": m.value,
-          disabled: a.disabled || a.readonly,
-          "ignore-filter": "",
-          "onUpdate:modelValue": M,
-          "onUpdate:open": T
-        }, {
-          default: o(() => [
-            d(l(F), {
-              "data-element-name": a.name ?? void 0,
-              "data-testid": "async-select-anchor",
-              class: C(a.errors.length ? "border-destructive ring-destructive" : "")
-            }, {
-              default: o(() => [
-                d(l(z), { class: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-                d(l(G), {
-                  id: a.id,
-                  "model-value": l(v),
-                  placeholder: B.value || (a.placeholder ?? "Search…"),
-                  "data-testid": "async-select-input",
-                  onInput: $
-                }, null, 8, ["id", "model-value", "placeholder"]),
-                l(y) ? (r(), f(l(D), {
-                  key: 0,
-                  "data-testid": "async-select-loader",
-                  class: "ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground"
-                })) : S("", !0)
-              ]),
-              _: 1
-            }, 8, ["data-element-name", "class"]),
-            d(l(I), null, {
-              default: o(() => [
-                l(y) ? (r(), L("div", Q, g(a.loadingText), 1)) : b.value.length === 0 ? (r(), f(l(j), { key: 1 }, {
-                  default: o(() => [
-                    O(g(a.emptyText), 1)
-                  ]),
-                  _: 1
-                })) : S("", !0),
-                (r(!0), L(N, null, U(b.value, (n) => (r(), f(l(H), {
-                  key: n.value,
-                  value: n.value,
-                  disabled: n.disabled
-                }, {
-                  default: o(() => [
-                    d(l(J)),
-                    O(" " + g(n.label), 1)
-                  ]),
-                  _: 2
-                }, 1032, ["value", "disabled"]))), 128))
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 8, ["model-value", "disabled"])
-      ]),
-      _: 1
-    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
-  }
-});
+import f from "./AsyncSelectOption.vue.js";
 export {
-  se as default
+  f as default
 };
 //# sourceMappingURL=AsyncSelectOption.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AsyncSelectOption.vue2.js","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-next\"\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"],"names":["props","__props","model","_useModel","normaliseOption","opt","query","results","isLoading","trigger","useAsyncSearch","watch","next","normalisedResults","computed","normalisedAll","initial","fromResults","merged","o","currentValue","selectedLabel","match","onInput","event","onUpdate","onOpenChange","open","__expose","_createBlock","_unref","FieldFrame","_createVNode","Combobox","ComboboxAnchor","_normalizeClass","Search","ComboboxInput","Loader2","ComboboxContent","_createElementBlock","_hoisted_1","_toDisplayString","ComboboxEmpty","_Fragment","_renderList","ComboboxItem","ComboboxItemIndicator"],"mappings":"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"}
+{"version":3,"file":"AsyncSelectOption.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/compositions/elements/option-select/AutoCompleteOption.vue.d.ts

@@ -0,0 +1,31 @@
+import { SelectOptionLike } from '../../../../definitions/shared/select-options';
+export interface AutoCompleteOptionProps {
+    modelValue?: string | number | null;
+    options?: SelectOptionLike[];
+    id?: string;
+    name?: string;
+    label?: string;
+    hideLabel?: boolean;
+    placeholder?: string;
+    required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    helpText?: string;
+    errors?: string[];
+    minSearchLength?: number;
+}
+type __VLS_Props = AutoCompleteOptionProps;
+type __VLS_PublicProps = {
+    "modelValue"?: string | number | null;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number | null) => any) | undefined;
+}>, {
+    minSearchLength: number;
+    options: SelectOptionLike[];
+    errors: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=AutoCompleteOption.vue.d.ts.map

package/dist/components/compositions/elements/option-select/AutoCompleteOption.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoCompleteOption.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/elements/option-select/AutoCompleteOption.vue"],"names":[],"mappings":"AAiJA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAA;AAY3E,MAAM,WAAW,uBAAuB;IACtC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAA;IACnC,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AAED,KAAK,WAAW,GAAG,uBAAuB,CAAC;AAkE3C,KAAK,iBAAiB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CACrC,GAAG,WAAW,CAAC;;;;;;qBAvEI,MAAM;aAXd,gBAAgB,EAAE;YAUnB,MAAM,EAAE;;AAoPnB,wBASG"}

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

@@ -1,5 +1,124 @@
-import f from "./AutoCompleteOption.vue2.js";
+import { defineComponent as g, useModel as V, computed as m, ref as B, openBlock as s, createBlock as c, unref as a, withCtx as i, createVNode as r, normalizeClass as $, createTextVNode as v, createElementBlock as L, Fragment as S, renderList as q, toDisplayString as C, mergeModels as k } from "vue";
+import { Search as w } from "lucide-vue-next";
+import x from "../../../ui/combobox/Combobox.vue.js";
+import A from "../../../ui/combobox/ComboboxAnchor.vue.js";
+import M from "../../../ui/combobox/ComboboxContent.vue.js";
+import N from "../../../ui/combobox/ComboboxEmpty.vue.js";
+import "@vueuse/core";
+import "reka-ui";
+import "clsx";
+import "tailwind-merge";
+import T from "../../../ui/combobox/ComboboxInput.vue.js";
+import U from "../../../ui/combobox/ComboboxItem.vue.js";
+import O from "../../../ui/combobox/ComboboxItemIndicator.vue.js";
+import z from "../../../ui/field-frame/FieldFrame.vue.js";
+const Y = /* @__PURE__ */ g({
+  __name: "AutoCompleteOption",
+  props: /* @__PURE__ */ k({
+    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(l) {
+    const f = l, d = V(l, "modelValue");
+    function b(e) {
+      return typeof e == "string" ? { label: e, value: e, disabled: !1 } : {
+        label: e.label,
+        value: String(e.value),
+        disabled: !!e.disabled
+      };
+    }
+    const n = m(
+      () => (f.options ?? []).map(b)
+    ), u = B(""), h = m(() => {
+      const e = u.value.trim().toLowerCase();
+      return e.length < f.minSearchLength || e === "" ? n.value : n.value.filter((t) => t.label.toLowerCase().includes(e));
+    }), p = m(() => {
+      if (!(d.value === void 0 || d.value === null))
+        return String(d.value);
+    });
+    function y(e) {
+      if (Array.isArray(e)) {
+        d.value = e[0] === void 0 ? null : e[0];
+        return;
+      }
+      d.value = e === void 0 ? null : e;
+    }
+    return (e, t) => (s(), c(a(z), {
+      label: l.label,
+      required: l.required,
+      "hide-label": l.hideLabel,
+      for: l.id,
+      "help-text": l.helpText,
+      errors: l.errors
+    }, {
+      default: i(() => [
+        r(a(x), {
+          "model-value": p.value,
+          disabled: l.disabled || l.readonly,
+          "onUpdate:modelValue": y
+        }, {
+          default: i(() => [
+            r(a(A), {
+              "data-element-name": l.name ?? void 0,
+              class: $(l.errors.length ? "border-destructive ring-destructive" : "")
+            }, {
+              default: i(() => [
+                r(a(w), { class: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+                r(a(T), {
+                  id: l.id,
+                  modelValue: u.value,
+                  "onUpdate:modelValue": t[0] || (t[0] = (o) => u.value = o),
+                  placeholder: l.placeholder ?? "Search…"
+                }, null, 8, ["id", "modelValue", "placeholder"])
+              ]),
+              _: 1
+            }, 8, ["data-element-name", "class"]),
+            r(a(M), null, {
+              default: i(() => [
+                r(a(N), null, {
+                  default: i(() => [...t[1] || (t[1] = [
+                    v("No matches.", -1)
+                  ])]),
+                  _: 1
+                }),
+                (s(!0), L(S, null, q(h.value, (o) => (s(), c(a(U), {
+                  key: o.value,
+                  value: o.value,
+                  disabled: o.disabled
+                }, {
+                  default: i(() => [
+                    r(a(O)),
+                    v(" " + C(o.label), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["value", "disabled"]))), 128))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["model-value", "disabled"])
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
+  }
+});
 export {
-  f as default
+  Y as default
 };
 //# sourceMappingURL=AutoCompleteOption.vue.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AutoCompleteOption.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"AutoCompleteOption.vue.js","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-next\"\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"],"names":["props","__props","model","_useModel","normaliseOption","opt","normalised","computed","query","ref","filtered","q","o","currentValue","onUpdate","next","_createBlock","_unref","FieldFrame","_createVNode","Combobox","ComboboxAnchor","_normalizeClass","Search","ComboboxInput","$event","ComboboxContent","ComboboxEmpty","_cache","_createElementBlock","_Fragment","_renderList","ComboboxItem","ComboboxItemIndicator","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,UAAMA,IAAQC,GAMRC,IAAQC,KAAoC,YAAY;AAQ9D,aAASC,EAAgBC,GAAyC;AAChE,aAAI,OAAOA,KAAQ,WACV,EAAE,OAAOA,GAAK,OAAOA,GAAK,UAAU,GAAA,IAEtC;AAAA,QACL,OAAOA,EAAI;AAAA,QACX,OAAO,OAAOA,EAAI,KAAK;AAAA,QACvB,UAAU,EAAQA,EAAI;AAAA,MAAQ;AAAA,IAElC;AAEA,UAAMC,IAAaC;AAAA,MAA6B,OAC7CP,EAAM,WAAW,CAAA,GAAI,IAAII,CAAe;AAAA,IAAA,GAGrCI,IAAQC,EAAI,EAAE,GAEdC,IAAWH,EAA6B,MAAM;AAClD,YAAMI,IAAIH,EAAM,MAAM,KAAA,EAAO,YAAA;AAI7B,aAHIG,EAAE,SAASX,EAAM,mBAGjBW,MAAM,KACDL,EAAW,QAEbA,EAAW,MAAM,OAAO,CAACM,MAAMA,EAAE,MAAM,YAAA,EAAc,SAASD,CAAC,CAAC;AAAA,IACzE,CAAC,GAEKE,IAAeN,EAA6B,MAAM;AACtD,UAAI,EAAAL,EAAM,UAAU,UAAaA,EAAM,UAAU;AAGjD,eAAO,OAAOA,EAAM,KAAK;AAAA,IAC3B,CAAC;AAED,aAASY,EAASC,GAAqB;AACrC,UAAI,MAAM,QAAQA,CAAI,GAAG;AACvB,QAAAb,EAAM,QAAQa,EAAK,CAAC,MAAM,SAAY,OAAQA,EAAK,CAAC;AACpD;AAAA,MACF;AACA,MAAAb,EAAM,QAAQa,MAAS,SAAY,OAAQA;AAAA,IAC7C;2BAIEC,EAqCaC,EAAAC,CAAA,GAAA;AAAA,MApCV,OAAOjB,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,KAAKA,EAAA;AAAA,MACL,aAAWA,EAAA;AAAA,MACX,QAAQA,EAAA;AAAA,IAAA;iBAET,MA4BW;AAAA,QA5BXkB,EA4BWF,EAAAG,CAAA,GAAA;AAAA,UA3BR,eAAaP,EAAA;AAAA,UACb,UAAUZ,EAAA,YAAYA,EAAA;AAAA,UACtB,uBAAoBa;AAAA,QAAA;qBAErB,MAUiB;AAAA,YAVjBK,EAUiBF,EAAAI,CAAA,GAAA;AAAA,cATd,qBAAmBpB,EAAA,QAAQ;AAAA,cAC3B,OAAKqB,EAAErB,EAAA,OAAO,SAAM,wCAAA,EAAA;AAAA,YAAA;yBAErB,MAAmD;AAAA,gBAAnDkB,EAAmDF,EAAAM,CAAA,GAAA,EAA3C,OAAM,oCAAkC;AAAA,gBAChDJ,EAIEF,EAAAO,CAAA,GAAA;AAAA,kBAHC,IAAIvB,EAAA;AAAA,8BACIO,EAAA;AAAA,gEAAAA,EAAK,QAAAiB;AAAA,kBACb,aAAaxB,EAAA,eAAW;AAAA,gBAAA;;;;YAG7BkB,EAWkBF,EAAAS,CAAA,GAAA,MAAA;AAAA,yBAVhB,MAA0C;AAAA,gBAA1CP,EAA0CF,EAAAU,CAAA,GAAA,MAAA;AAAA,6BAA3B,MAAW,CAAA,GAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA;AAAA,sBAAX,eAAW,EAAA;AAAA,kBAAA;;;wBAC1BC,EAQeC,GAAA,MAAAC,EAPCrB,EAAA,OAAQ,CAAfL,YADTW,EAQeC,EAAAe,CAAA,GAAA;AAAA,kBANZ,KAAK3B,EAAI;AAAA,kBACT,OAAOA,EAAI;AAAA,kBACX,UAAUA,EAAI;AAAA,gBAAA;6BAEf,MAAyB;AAAA,oBAAzBc,EAAyBF,EAAAgB,CAAA,CAAA;AAAA,sBAAA,MACzBC,EAAG7B,EAAI,KAAK,GAAA,CAAA;AAAA,kBAAA;;;;;;;;;;;;;;"}