@eos-ui/vue 0.1.1 → 0.2.1

package/dist/components/Combobox/ECombobox.vue_vue_type_script_setup_true_lang.js

@@ -8,6 +8,8 @@ var c = /*@__PURE__*/ n({
 		ariaLabel: {},
 		label: {},
 		bare: { type: Boolean },
+		multiple: { type: Boolean },
+		freeform: { type: Boolean },
 		options: {},
 		placeholder: {},
 		hint: {},
@@ -25,7 +27,7 @@ var c = /*@__PURE__*/ n({
 		filter: {},
 		id: {}
 	}, {
-		modelValue: { default: "" },
+		modelValue: {},
 		modelModifiers: {},
 		open: {
 			type: Boolean,
@@ -47,7 +49,6 @@ var c = /*@__PURE__*/ n({
 			"onUpdate:modelValue": r[0] ||= (e) => l.value = e,
 			open: u.value,
 			"onUpdate:open": r[1] ||= (e) => u.value = e,
-			mode: "single",
 			onInputChange: r[2] ||= (e) => n.$emit("inputChange", e)
 		}), null, 16, ["modelValue", "open"]));
 	}

package/dist/components/Combobox/ECombobox.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ECombobox.vue_vue_type_script_setup_true_lang.js","names":["$emit","_useModel","_openBlock","_createBlock","EComboboxBase","_mergeProps","EComboboxBase_default","ECombobox_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","__expose","props","__props","model","useModel","open","base","ref","openBlock","createBlock","mergeProps","_cache","$event","_ctx","text"],"sources":["../../../src/components/Combobox/ECombobox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EComboboxBase from \"./EComboboxBase.vue\";\nimport type { EComboboxProps } from \"./types.js\";\n\nconst props = withDefaults(defineProps<EComboboxProps>(), { clearable: true });\n\ndefineEmits<{\n  /** The text in the input changed, by typing or by choosing. Use it to fetch options from a server. */\n  inputChange: [text: string];\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nconst base = ref<InstanceType<typeof EComboboxBase> | null>(null);\ndefineExpose({\n  input: () => base.value?.input ?? null,\n  focus: () => base.value?.focus(),\n});\n</script>\n\n<template>\n  <EComboboxBase\n    ref=\"base\"\n    v-bind=\"props\"\n    v-model=\"model\"\n    v-model:open=\"open\"\n    mode=\"single\"\n    @input-change=\"(text: string) => $emit('inputChange', text)\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,IAAMa,IAAQC,GAORC,IAAQd,EAAmBa,GAAA,YAAgB,GAE3CG,IAAOhB,EAAoBa,GAAC,MAA0B,GAEtDI,IAAOC,EAA+C,IAAI;E,OAChEP,EAAa;GACX,aAAaM,EAAK,OAAO,SAAS;GAClC,aAAaA,EAAK,OAAO,MAAM;EACjC,CAAC,I,UAIChB,EAAA,GAAAC,EAOEC,GAPFC,EAOE;GANI,SAAA;GAAJ,KAAIa;EACI,GAAAL,GAAK;GACJ,YAAAE,EAAA;GAAA,uBAAA,AAAAQ,EAAA,QAAA,MAAA,EAAK,QAAAC;GACN,MAAMP,EAAA;GAAA,iBAAA,AAAAM,EAAA,QAAA,MAAA,EAAI,QAAAC;GAClB,MAAK;GACJ,eAAY,AAAAD,EAAA,QAAG,MAAiBvB,EAAAA,MAAK,eAAgB0B,CAAI"}
+{"version":3,"file":"ECombobox.vue_vue_type_script_setup_true_lang.js","names":["$emit","_useModel","_openBlock","_createBlock","EComboboxBase","_mergeProps","EComboboxBase_default","ECombobox_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","__expose","props","__props","model","useModel","open","base","ref","openBlock","createBlock","mergeProps","_cache","$event","_ctx","text"],"sources":["../../../src/components/Combobox/ECombobox.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport EComboboxBase from \"./EComboboxBase.vue\";\nimport type { EComboboxProps } from \"./types.js\";\n\nconst props = withDefaults(defineProps<EComboboxProps>(), { clearable: true });\n\ndefineEmits<{\n  /** The text in the input changed, by typing or by choosing. Use it to fetch options from a server. */\n  inputChange: [text: string];\n}>();\n\n/** The `value` of the chosen option, empty for nothing; with `multiple` the chosen values in the order chosen (replaced, not mutated); with `freeform` the typed text, updated on every key. @default \"\" or [] */\nconst model = defineModel<string | string[]>();\n\n/** Whether the list is open. Setting it moves no focus; a disabled field never opens. */\nconst open = defineModel<boolean>(\"open\", { default: false });\n\nconst base = ref<InstanceType<typeof EComboboxBase> | null>(null);\ndefineExpose({\n  input: () => base.value?.input ?? null,\n  focus: () => base.value?.focus(),\n});\n</script>\n\n<template>\n  <EComboboxBase\n    ref=\"base\"\n    v-bind=\"props\"\n    v-model=\"model\"\n    v-model:open=\"open\"\n    @input-change=\"(text: string) => $emit('inputChange', text)\"\n  />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAKA,IAAMa,IAAQC,GAQRC,IAAQd,EAA8Ba,GAAA,YAAC,GAGvCG,IAAOhB,EAAoBa,GAAC,MAA0B,GAEtDI,IAAOC,EAA+C,IAAI;E,OAChEP,EAAa;GACX,aAAaM,EAAK,OAAO,SAAS;GAClC,aAAaA,EAAK,OAAO,MAAM;EACjC,CAAC,I,UAIChB,EAAA,GAAAC,EAMEC,GANFC,EAME;GALI,SAAA;GAAJ,KAAIa;EACI,GAAAL,GAAK;GACJ,YAAAE,EAAA;GAAA,uBAAA,AAAAQ,EAAA,QAAA,MAAA,EAAK,QAAAC;GACN,MAAMP,EAAA;GAAA,iBAAA,AAAAM,EAAA,QAAA,MAAA,EAAI,QAAAC;GACjB,eAAY,AAAAD,EAAA,QAAG,MAAiBvB,EAAAA,MAAK,eAAgB0B,CAAI"}

package/dist/components/Combobox/EComboboxBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"EComboboxBase.js","names":["_sfc_main","EComboboxBase_vue_vue_type_script_setup_true_lang_default","EComboboxBase_default"],"sources":["../../../src/components/Combobox/EComboboxBase.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, h, nextTick, onMounted, ref, watch, type FunctionalComponent } from \"vue\";\nimport {\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxInput,\n  ComboboxPortal,\n  ComboboxRoot,\n  ComboboxTrigger,\n  ComboboxViewport,\n} from \"reka-ui\";\nimport EField from \"../Field/EField.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESpinner from \"../Spinner/ESpinner.vue\";\nimport EComboboxOption from \"./EComboboxOption.vue\";\nimport { normalizeOptions, sectionOptions } from \"../Select/options.js\";\nimport type { EComboboxProps } from \"./types.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Select/panel.css\";\nimport \"./combo.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(defineProps<EComboboxProps & { mode: \"single\" | \"free\" | \"multiple\" }>(), {\n  clearable: true,\n});\n\nconst emit = defineEmits<{\n  /** The text in the input changed, by typing or by choosing. Use it to fetch options from a server. */\n  inputChange: [text: string];\n}>();\n\nconst model = defineModel<string | string[]>();\n\nconst t = useMessages();\nconst portal = usePortalTarget();\nconst attrs = useFieldAttrs();\nconst groupId = useUid();\nconst bareId = useUid(() => props.id);\n\nconst Bare: FunctionalComponent = (_, { slots }) =>\n  h(\"div\", attrs.wrapper(), slots.default?.({ id: bareId.value, ariaInvalid: undefined, ariaDescribedby: undefined }));\nconst frame = computed(() =>\n  props.bare\n    ? {}\n    : {\n        id: props.id,\n        label: props.label,\n        hideLabel: props.hideLabel,\n        hint: props.hint,\n        error: props.error,\n        required: props.required,\n        optional: props.optional,\n      },\n);\nconst listName = computed(() => (props.bare ? (props.ariaLabel ?? props.label) : props.label));\n\nconst multiple = computed(() => props.mode === \"multiple\");\nconst free = computed(() => props.mode === \"free\");\nconst all = computed(() => normalizeOptions(props.options));\nconst values = computed<string[]>(() => (multiple.value && Array.isArray(model.value) ? model.value : []));\nconst single = computed(() => (typeof model.value === \"string\" ? model.value : \"\"));\nconst rootValue = computed(() => (multiple.value ? values.value : single.value));\n\nfunction labelOf(v: string): string {\n  return all.value.find((o) => o.value === v)?.label ?? (free.value ? v : \"\");\n}\nconst resting = () => (multiple.value ? \"\" : labelOf(single.value));\n\nconst text = ref(resting());\nconst typing = ref(false);\nconst wantOpen = defineModel<boolean>(\"open\", { default: false });\nconst anchor = ref<{ $el: HTMLElement } | null>(null);\nconst query = computed(() => (typing.value ? text.value.trim().toLowerCase() : \"\"));\n\nconst shown = computed(() => {\n  const q = query.value;\n  if (props.filter) return all.value.filter((o) => props.filter!(o, q));\n  return all.value.filter(\n    (o) => !q || o.label.toLowerCase().includes(q) || (o.description ?? \"\").toLowerCase().includes(q),\n  );\n});\nconst sections = computed(() => sectionOptions(shown.value));\nconst hasList = computed(() => shown.value.length > 0 || !!props.loading || !free.value);\nconst open = computed(() => wantOpen.value && hasList.value && !props.disabled);\nconst announce = computed(() =>\n  open.value && !shown.value.length ? (props.loading ? t(\"searching\") : props.emptyText || t(\"noMatches\")) : \"\",\n);\nconst hasValue = computed(() => (multiple.value ? values.value.length > 0 : !!text.value));\n\nwatch(rootValue, () => {\n  const rest = resting();\n  if (rest !== text.value) {\n    text.value = rest;\n    typing.value = false;\n  }\n});\nwatch(all, () => {\n  if (!typing.value && !open.value) text.value = resting();\n});\n\nconst listId = ref<string | undefined>();\nconst content = ref<{ $el: HTMLElement } | null>(null);\nonMounted(() => {\n  if (!open.value) return;\n  let tries = 0;\n  const read = () => {\n    listId.value = content.value?.$el?.id || undefined;\n    if (!listId.value && tries++ < 10) requestAnimationFrame(read);\n  };\n  void nextTick(read);\n});\n\nconst inputEl = () => anchor.value?.$el?.querySelector(\"input\") ?? null;\nconst focusInput = () => inputEl()?.focus();\n\nfunction isSelected(value: string): boolean {\n  return multiple.value ? values.value.includes(value) : free.value ? single.value === value : single.value === value;\n}\nconst itemValue = (o: { value: string; label: string }) => (free.value ? o.label : o.value);\n\nfunction onPick(v: unknown) {\n  typing.value = false;\n  if (multiple.value) {\n    model.value = Array.isArray(v) ? (v as string[]) : [];\n    text.value = \"\";\n    emit(\"inputChange\", \"\");\n    return;\n  }\n  const next = typeof v === \"string\" ? v : \"\";\n  model.value = next;\n  text.value = free.value ? next : labelOf(next);\n  emit(\"inputChange\", text.value);\n}\n\nfunction onInput(e: Event) {\n  const v = (e.target as HTMLInputElement).value;\n  text.value = v;\n  typing.value = true;\n  wantOpen.value = true;\n  emit(\"inputChange\", v);\n  if (free.value) model.value = v;\n}\n\nfunction remove(v: string) {\n  model.value = values.value.filter((x) => x !== v);\n}\n\nfunction clear() {\n  model.value = multiple.value ? [] : \"\";\n  text.value = \"\";\n  typing.value = false;\n  emit(\"inputChange\", \"\");\n  focusInput();\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === \"Escape\" && !open.value && text.value) {\n    e.preventDefault();\n    clear();\n  } else if (e.key === \"Backspace\" && multiple.value && !text.value && values.value.length) {\n    remove(values.value[values.value.length - 1]!);\n  }\n}\n\nfunction keepCaretKeys(e: KeyboardEvent) {\n  if (e.key === \"Home\" || e.key === \"End\") e.stopImmediatePropagation();\n}\n\nfunction onBlur(e: FocusEvent) {\n  const next = e.relatedTarget as Element | null;\n  if (next && (anchor.value?.$el?.contains(next) || next.closest?.(\".e-popover\"))) return;\n  wantOpen.value = false;\n  typing.value = false;\n  if (!free.value) text.value = resting();\n}\n\nfunction onWrapDown(e: MouseEvent) {\n  if (e.target === e.currentTarget && !props.disabled) {\n    e.preventDefault();\n    focusInput();\n  }\n}\n\ntype FieldSlot = { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined };\nfunction inputBind(field: FieldSlot) {\n  return {\n    id: field.id,\n    required: props.required && !(multiple.value && values.value.length) ? true : undefined,\n    placeholder: multiple.value && values.value.length ? \"\" : props.placeholder,\n    \"aria-invalid\": field.ariaInvalid,\n    \"aria-label\": props.bare ? listName.value : undefined,\n    autocomplete: \"off\",\n    ...(listId.value ? { \"aria-controls\": listId.value } : {}),\n    ...(shown.value.length ? {} : { \"aria-activedescendant\": undefined }),\n    ...attrs.input(field.ariaDescribedby),\n  };\n}\n\ndefineExpose({\n  input: computed(() => inputEl()),\n  focus: focusInput,\n});\n</script>\n\n<template>\n  <component :is=\"bare ? Bare : EField\" v-bind=\"{ ...attrs.wrapper(), ...frame }\">\n    <template #default=\"field\">\n      <ComboboxRoot\n        class=\"e-combo-root\"\n        :model-value=\"rootValue\"\n        :multiple=\"multiple\"\n        :open=\"open\"\n        :disabled=\"disabled\"\n        ignore-filter\n        @update:model-value=\"onPick\"\n        @update:open=\"wantOpen = $event\"\n      >\n        <ComboboxAnchor\n          ref=\"anchor\"\n          class=\"e-input-wrap e-combo\"\n          :class=\"{ 'e-combo--multi': multiple }\"\n          :data-invalid=\"error && !bare ? '' : undefined\"\n          :data-disabled=\"disabled ? '' : undefined\"\n          @mousedown=\"onWrapDown\"\n          @focusout=\"onBlur\"\n        >\n          <div class=\"e-combo-main\">\n            <template v-if=\"multiple\">\n              <span v-for=\"v in values\" :key=\"v\" class=\"e-tag\">\n                {{ labelOf(v) }}\n                <button\n                  type=\"button\"\n                  class=\"e-tag-x\"\n                  :aria-label=\"t('removeItem', { label: labelOf(v) })\"\n                  :disabled=\"disabled\"\n                  @click=\"remove(v)\"\n                >\n                  <EIcon name=\"x\" small />\n                </button>\n              </span>\n            </template>\n            <ComboboxInput\n              class=\"e-input e-combo-input\"\n              :model-value=\"text\"\n              :display-value=\"(v: unknown) => (typeof v === 'string' ? (free ? v : labelOf(v)) : '')\"\n              :disabled=\"disabled\"\n              v-bind=\"inputBind(field)\"\n              @update:model-value=\"text = $event\"\n              @input=\"onInput\"\n              @keydown=\"onKeydown\"\n              @keydown.capture=\"keepCaretKeys\"\n            />\n          </div>\n          <template v-if=\"name\">\n            <input v-for=\"(v, k) in multiple ? values : [single]\" :key=\"k\" type=\"hidden\" :name=\"name\" :value=\"v\" />\n          </template>\n          <div class=\"e-combo-tail\">\n            <button\n              v-if=\"hasValue && clearable && !disabled\"\n              type=\"button\"\n              class=\"e-combo-btn\"\n              :aria-label=\"t('clear')\"\n              @mousedown.prevent\n              @click=\"clear\"\n            >\n              <EIcon name=\"x\" />\n            </button>\n            <ComboboxTrigger\n              v-if=\"!free\"\n              class=\"e-combo-btn\"\n              :aria-label=\"t('showOptions')\"\n              :disabled=\"disabled\"\n              @mousedown.prevent\n            >\n              <EIcon name=\"chevron-down\" bold />\n            </ComboboxTrigger>\n          </div>\n        </ComboboxAnchor>\n        <span class=\"e-sr\" role=\"status\">{{ announce }}</span>\n        <ComboboxPortal :to=\"portal\">\n          <ComboboxContent\n            ref=\"content\"\n            position=\"popper\"\n            align=\"start\"\n            :side-offset=\"6\"\n            :collision-padding=\"8\"\n            class=\"e-popover e-listpanel e-root\"\n            :aria-label=\"listName\"\n            :aria-busy=\"loading ? 'true' : undefined\"\n          >\n            <ComboboxViewport>\n              <template v-if=\"shown.length\">\n                <template v-for=\"(section, i) in sections\" :key=\"i\">\n                  <div v-if=\"section.group\" class=\"e-opt-set\" role=\"group\" :aria-labelledby=\"`${groupId}-g${i}`\">\n                    <div :id=\"`${groupId}-g${i}`\" class=\"e-opt-group\">{{ section.group }}</div>\n                    <EComboboxOption\n                      v-for=\"o in section.options\"\n                      :key=\"o.value\"\n                      :option=\"o\"\n                      :value=\"itemValue(o)\"\n                      :selected=\"isSelected(itemValue(o))\"\n                      :query=\"query\"\n                    />\n                  </div>\n                  <template v-else>\n                    <EComboboxOption\n                      v-for=\"o in section.options\"\n                      :key=\"o.value\"\n                      :option=\"o\"\n                      :value=\"itemValue(o)\"\n                      :selected=\"isSelected(itemValue(o))\"\n                      :query=\"query\"\n                    />\n                  </template>\n                </template>\n              </template>\n              <div v-else class=\"e-opt-status\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                <ESpinner v-if=\"loading\" :label=\"t('searching')\" />\n                <template v-else>{{ emptyText || t(\"noMatches\") }}</template>\n              </div>\n            </ComboboxViewport>\n          </ComboboxContent>\n        </ComboboxPortal>\n      </ComboboxRoot>\n    </template>\n  </component>\n</template>\n\n<style>\n@layer e.controls {\n  .e-combo-main {\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    align-items: center;\n    align-self: stretch;\n    gap: var(--e-space-1);\n    min-width: 0;\n  }\n\n  .e-combo-tail {\n    display: flex;\n    flex: none;\n    align-items: center;\n    align-self: center;\n  }\n\n  .e-combo--multi {\n    padding: 3px var(--e-space-1) 3px var(--e-space-2);\n    gap: var(--e-space-1);\n  }\n\n  .e-combo--multi .e-input {\n    height: calc(var(--e-control-height) - 9px);\n    align-self: center;\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    height: 32px;\n    padding: 0 var(--e-space-1) 0 var(--e-space-3);\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-primary);\n    color: var(--e-ink);\n    font: 500 var(--e-text-sm)/1 var(--e-font-sans);\n  }\n\n  .e-tag-x::after {\n    content: \"\";\n    position: absolute;\n    inset: -10px;\n  }\n\n  .e-tag-x {\n    position: relative;\n    display: inline-grid;\n    place-items: center;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: transparent;\n    color: var(--e-primary);\n    cursor: pointer;\n  }\n\n  .e-tag-x:hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 1px var(--e-primary);\n  }\n\n  .e-tag-x:active {\n    background: var(--e-wash-press);\n  }\n\n  .e-tag-x:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: 1px;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"EComboboxBase.js","names":["_sfc_main","EComboboxBase_vue_vue_type_script_setup_true_lang_default","EComboboxBase_default"],"sources":["../../../src/components/Combobox/EComboboxBase.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, h, nextTick, onMounted, ref, watch, type FunctionalComponent } from \"vue\";\nimport {\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxInput,\n  ComboboxPortal,\n  ComboboxRoot,\n  ComboboxTrigger,\n  ComboboxViewport,\n} from \"reka-ui\";\nimport EField from \"../Field/EField.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESpinner from \"../Spinner/ESpinner.vue\";\nimport EComboboxOption from \"./EComboboxOption.vue\";\nimport { normalizeOptions, sectionOptions } from \"../Select/options.js\";\nimport type { EComboboxProps } from \"./types.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Select/panel.css\";\nimport \"./combo.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(defineProps<EComboboxProps>(), {\n  clearable: true,\n});\n\nconst emit = defineEmits<{\n  /** The text in the input changed, by typing or by choosing. Use it to fetch options from a server. */\n  inputChange: [text: string];\n}>();\n\nconst model = defineModel<string | string[]>();\n\nconst t = useMessages();\nconst portal = usePortalTarget();\nconst attrs = useFieldAttrs();\nconst groupId = useUid();\nconst bareId = useUid(() => props.id);\n\nconst Bare: FunctionalComponent = (_, { slots }) =>\n  h(\"div\", attrs.wrapper(), slots.default?.({ id: bareId.value, ariaInvalid: undefined, ariaDescribedby: undefined }));\nconst frame = computed(() =>\n  props.bare\n    ? {}\n    : {\n        id: props.id,\n        label: props.label,\n        hideLabel: props.hideLabel,\n        hint: props.hint,\n        error: props.error,\n        required: props.required,\n        optional: props.optional,\n      },\n);\nconst listName = computed(() => (props.bare ? (props.ariaLabel ?? props.label) : props.label));\n\nconst multiple = computed(() => props.multiple);\n// Free text is for one value; with `multiple` it is ignored.\nconst free = computed(() => props.freeform && !props.multiple);\nconst all = computed(() => normalizeOptions(props.options));\nconst values = computed<string[]>(() => (multiple.value && Array.isArray(model.value) ? model.value : []));\nconst single = computed(() => (typeof model.value === \"string\" ? model.value : \"\"));\nconst rootValue = computed(() => (multiple.value ? values.value : single.value));\n\nfunction labelOf(v: string): string {\n  return all.value.find((o) => o.value === v)?.label ?? (free.value ? v : \"\");\n}\nconst resting = () => (multiple.value ? \"\" : labelOf(single.value));\n\nconst text = ref(resting());\nconst typing = ref(false);\nconst wantOpen = defineModel<boolean>(\"open\", { default: false });\nconst anchor = ref<{ $el: HTMLElement } | null>(null);\nconst query = computed(() => (typing.value ? text.value.trim().toLowerCase() : \"\"));\n\nconst shown = computed(() => {\n  const q = query.value;\n  if (props.filter) return all.value.filter((o) => props.filter!(o, q));\n  return all.value.filter(\n    (o) => !q || o.label.toLowerCase().includes(q) || (o.description ?? \"\").toLowerCase().includes(q),\n  );\n});\nconst sections = computed(() => sectionOptions(shown.value));\nconst hasList = computed(() => shown.value.length > 0 || !!props.loading || !free.value);\nconst open = computed(() => wantOpen.value && hasList.value && !props.disabled);\nconst announce = computed(() =>\n  open.value && !shown.value.length ? (props.loading ? t(\"searching\") : props.emptyText || t(\"noMatches\")) : \"\",\n);\nconst hasValue = computed(() => (multiple.value ? values.value.length > 0 : !!text.value));\n\nwatch(rootValue, () => {\n  const rest = resting();\n  if (rest !== text.value) {\n    text.value = rest;\n    typing.value = false;\n  }\n});\nwatch(all, () => {\n  if (!typing.value && !open.value) text.value = resting();\n});\n\nconst listId = ref<string | undefined>();\nconst content = ref<{ $el: HTMLElement } | null>(null);\nonMounted(() => {\n  if (!open.value) return;\n  let tries = 0;\n  const read = () => {\n    listId.value = content.value?.$el?.id || undefined;\n    if (!listId.value && tries++ < 10) requestAnimationFrame(read);\n  };\n  void nextTick(read);\n});\n\nconst inputEl = () => anchor.value?.$el?.querySelector(\"input\") ?? null;\nconst focusInput = () => inputEl()?.focus();\n\nfunction isSelected(value: string): boolean {\n  return multiple.value ? values.value.includes(value) : free.value ? single.value === value : single.value === value;\n}\nconst itemValue = (o: { value: string; label: string }) => (free.value ? o.label : o.value);\n\nfunction onPick(v: unknown) {\n  typing.value = false;\n  if (multiple.value) {\n    model.value = Array.isArray(v) ? (v as string[]) : [];\n    text.value = \"\";\n    emit(\"inputChange\", \"\");\n    return;\n  }\n  const next = typeof v === \"string\" ? v : \"\";\n  model.value = next;\n  text.value = free.value ? next : labelOf(next);\n  emit(\"inputChange\", text.value);\n}\n\nfunction onInput(e: Event) {\n  const v = (e.target as HTMLInputElement).value;\n  text.value = v;\n  typing.value = true;\n  wantOpen.value = true;\n  emit(\"inputChange\", v);\n  if (free.value) model.value = v;\n}\n\nfunction remove(v: string) {\n  model.value = values.value.filter((x) => x !== v);\n}\n\nfunction clear() {\n  model.value = multiple.value ? [] : \"\";\n  text.value = \"\";\n  typing.value = false;\n  emit(\"inputChange\", \"\");\n  focusInput();\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === \"Escape\" && !open.value && text.value) {\n    e.preventDefault();\n    clear();\n  } else if (e.key === \"Backspace\" && multiple.value && !text.value && values.value.length) {\n    remove(values.value[values.value.length - 1]!);\n  }\n}\n\nfunction keepCaretKeys(e: KeyboardEvent) {\n  if (e.key === \"Home\" || e.key === \"End\") e.stopImmediatePropagation();\n}\n\nfunction onBlur(e: FocusEvent) {\n  const next = e.relatedTarget as Element | null;\n  if (next && (anchor.value?.$el?.contains(next) || next.closest?.(\".e-popover\"))) return;\n  wantOpen.value = false;\n  typing.value = false;\n  if (!free.value) text.value = resting();\n}\n\nfunction onWrapDown(e: MouseEvent) {\n  if (e.target === e.currentTarget && !props.disabled) {\n    e.preventDefault();\n    focusInput();\n  }\n}\n\ntype FieldSlot = { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined };\nfunction inputBind(field: FieldSlot) {\n  return {\n    id: field.id,\n    required: props.required && !(multiple.value && values.value.length) ? true : undefined,\n    placeholder: multiple.value && values.value.length ? \"\" : props.placeholder,\n    \"aria-invalid\": field.ariaInvalid,\n    \"aria-label\": props.bare ? listName.value : undefined,\n    autocomplete: \"off\",\n    ...(listId.value ? { \"aria-controls\": listId.value } : {}),\n    ...(shown.value.length ? {} : { \"aria-activedescendant\": undefined }),\n    ...attrs.input(field.ariaDescribedby),\n  };\n}\n\ndefineExpose({\n  input: computed(() => inputEl()),\n  focus: focusInput,\n});\n</script>\n\n<template>\n  <component :is=\"bare ? Bare : EField\" v-bind=\"{ ...attrs.wrapper(), ...frame }\">\n    <template #default=\"field\">\n      <ComboboxRoot\n        class=\"e-combo-root\"\n        :model-value=\"rootValue\"\n        :multiple=\"multiple\"\n        :open=\"open\"\n        :disabled=\"disabled\"\n        ignore-filter\n        @update:model-value=\"onPick\"\n        @update:open=\"wantOpen = $event\"\n      >\n        <ComboboxAnchor\n          ref=\"anchor\"\n          class=\"e-input-wrap e-combo\"\n          :class=\"{ 'e-combo--multi': multiple }\"\n          :data-invalid=\"error && !bare ? '' : undefined\"\n          :data-disabled=\"disabled ? '' : undefined\"\n          @mousedown=\"onWrapDown\"\n          @focusout=\"onBlur\"\n        >\n          <div class=\"e-combo-main\">\n            <template v-if=\"multiple\">\n              <span v-for=\"v in values\" :key=\"v\" class=\"e-tag\">\n                {{ labelOf(v) }}\n                <button\n                  type=\"button\"\n                  class=\"e-tag-x\"\n                  :aria-label=\"t('removeItem', { label: labelOf(v) })\"\n                  :disabled=\"disabled\"\n                  @click=\"remove(v)\"\n                >\n                  <EIcon name=\"x\" small />\n                </button>\n              </span>\n            </template>\n            <ComboboxInput\n              class=\"e-input e-combo-input\"\n              :model-value=\"text\"\n              :display-value=\"(v: unknown) => (typeof v === 'string' ? (free ? v : labelOf(v)) : '')\"\n              :disabled=\"disabled\"\n              v-bind=\"inputBind(field)\"\n              @update:model-value=\"text = $event\"\n              @input=\"onInput\"\n              @keydown=\"onKeydown\"\n              @keydown.capture=\"keepCaretKeys\"\n            />\n          </div>\n          <template v-if=\"name\">\n            <input v-for=\"(v, k) in multiple ? values : [single]\" :key=\"k\" type=\"hidden\" :name=\"name\" :value=\"v\" />\n          </template>\n          <div class=\"e-combo-tail\">\n            <button\n              v-if=\"hasValue && clearable && !disabled\"\n              type=\"button\"\n              class=\"e-combo-btn\"\n              :aria-label=\"t('clear')\"\n              @mousedown.prevent\n              @click=\"clear\"\n            >\n              <EIcon name=\"x\" />\n            </button>\n            <ComboboxTrigger\n              v-if=\"!free\"\n              class=\"e-combo-btn\"\n              :aria-label=\"t('showOptions')\"\n              :disabled=\"disabled\"\n              @mousedown.prevent\n            >\n              <EIcon name=\"chevron-down\" bold />\n            </ComboboxTrigger>\n          </div>\n        </ComboboxAnchor>\n        <span class=\"e-sr\" role=\"status\">{{ announce }}</span>\n        <ComboboxPortal :to=\"portal\">\n          <ComboboxContent\n            ref=\"content\"\n            position=\"popper\"\n            align=\"start\"\n            :side-offset=\"6\"\n            :collision-padding=\"8\"\n            class=\"e-popover e-listpanel e-root\"\n            :aria-label=\"listName\"\n            :aria-busy=\"loading ? 'true' : undefined\"\n          >\n            <ComboboxViewport>\n              <template v-if=\"shown.length\">\n                <template v-for=\"(section, i) in sections\" :key=\"i\">\n                  <div v-if=\"section.group\" class=\"e-opt-set\" role=\"group\" :aria-labelledby=\"`${groupId}-g${i}`\">\n                    <div :id=\"`${groupId}-g${i}`\" class=\"e-opt-group\">{{ section.group }}</div>\n                    <EComboboxOption\n                      v-for=\"o in section.options\"\n                      :key=\"o.value\"\n                      :option=\"o\"\n                      :value=\"itemValue(o)\"\n                      :selected=\"isSelected(itemValue(o))\"\n                      :query=\"query\"\n                    />\n                  </div>\n                  <template v-else>\n                    <EComboboxOption\n                      v-for=\"o in section.options\"\n                      :key=\"o.value\"\n                      :option=\"o\"\n                      :value=\"itemValue(o)\"\n                      :selected=\"isSelected(itemValue(o))\"\n                      :query=\"query\"\n                    />\n                  </template>\n                </template>\n              </template>\n              <div v-else class=\"e-opt-status\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                <ESpinner v-if=\"loading\" :label=\"t('searching')\" />\n                <template v-else>{{ emptyText || t(\"noMatches\") }}</template>\n              </div>\n            </ComboboxViewport>\n          </ComboboxContent>\n        </ComboboxPortal>\n      </ComboboxRoot>\n    </template>\n  </component>\n</template>\n\n<style>\n@layer e.controls {\n  .e-combo-main {\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    align-items: center;\n    align-self: stretch;\n    gap: var(--e-space-1);\n    min-width: 0;\n  }\n\n  .e-combo-tail {\n    display: flex;\n    flex: none;\n    align-items: center;\n    align-self: center;\n  }\n\n  .e-combo--multi {\n    padding: 3px var(--e-space-1) 3px var(--e-space-2);\n    gap: var(--e-space-1);\n  }\n\n  .e-combo--multi .e-input {\n    height: calc(var(--e-control-height) - 9px);\n    align-self: center;\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    height: var(--e-space-8);\n    padding: 0 var(--e-space-1) 0 var(--e-space-3);\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-primary);\n    color: var(--e-ink);\n    font: 500 var(--e-text-sm)/1 var(--e-font-sans);\n  }\n\n  .e-tag-x::after {\n    content: \"\";\n    position: absolute;\n    inset: calc((var(--e-tap) - var(--e-space-6)) / -2);\n  }\n\n  .e-tag-x {\n    position: relative;\n    display: inline-grid;\n    place-items: center;\n    width: var(--e-space-6);\n    height: var(--e-space-6);\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: transparent;\n    color: var(--e-primary);\n    cursor: pointer;\n  }\n\n  .e-tag-x:hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-primary);\n  }\n\n  .e-tag-x:active {\n    background: var(--e-wash-press);\n  }\n\n  .e-tag-x:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  @media (forced-colors: active) {\n    .e-tag {\n      outline: var(--e-stroke-card) solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Combobox/EComboboxBase.vue.d.ts

@@ -8,43 +8,35 @@ declare const __VLS_export: import('vue').DefineComponent<({
 } & {
     label: string;
     bare?: boolean;
-} & import('./types.js').EComboboxFields & {
-    mode: "single" | "free" | "multiple";
-} & __VLS_ModelProps) | ({
+} & import('./types.js').EComboboxFields & __VLS_ModelProps) | ({
     hideLabel?: boolean;
     ariaLabel?: string;
 } & {
     label?: string;
     bare: true;
-} & import('./types.js').EComboboxFields & {
-    mode: "single" | "free" | "multiple";
-} & __VLS_ModelProps), {
+} & import('./types.js').EComboboxFields & __VLS_ModelProps), {
     input: import('vue').ComputedRef<HTMLInputElement | null>;
     focus: () => void | undefined;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:open": (value: boolean) => any;
     "update:modelValue": (value: string | string[] | undefined) => any;
     inputChange: (text: string) => any;
+    "update:open": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<({
     hideLabel?: boolean;
     ariaLabel?: string;
 } & {
     label: string;
     bare?: boolean;
-} & import('./types.js').EComboboxFields & {
-    mode: "single" | "free" | "multiple";
-} & __VLS_ModelProps) | ({
+} & import('./types.js').EComboboxFields & __VLS_ModelProps) | ({
     hideLabel?: boolean;
     ariaLabel?: string;
 } & {
     label?: string;
     bare: true;
-} & import('./types.js').EComboboxFields & {
-    mode: "single" | "free" | "multiple";
-} & __VLS_ModelProps)> & Readonly<{
-    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+} & import('./types.js').EComboboxFields & __VLS_ModelProps)> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
     onInputChange?: ((text: string) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     clearable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/Combobox/EComboboxBase.vue_vue_type_script_setup_true_lang.js

@@ -5,10 +5,10 @@ import { useUid as n } from "../../composables/useUid.js";
 import r from "../Icon/EIcon.js";
 import te from "../Field/EField.js";
 /* empty css                 */
-import { normalizeOptions as ne, sectionOptions as re } from "../Select/options.js";
-/* empty css              */
-import ie from "../Spinner/ESpinner.js";
+import ne from "../Spinner/ESpinner.js";
 import i from "./EComboboxOption.js";
+import { normalizeOptions as re, sectionOptions as ie } from "../Select/options.js";
+/* empty css              */
 /* empty css      */
 import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, guardReactiveProps as ae, h as oe, mergeModels as m, mergeProps as se, nextTick as ce, normalizeClass as le, normalizeProps as ue, onMounted as de, openBlock as h, ref as g, renderList as _, resolveDynamicComponent as fe, toDisplayString as v, unref as y, useModel as b, watch as x, withCtx as S, withModifiers as C } from "vue";
 import { ComboboxAnchor as pe, ComboboxContent as me, ComboboxInput as he, ComboboxPortal as ge, ComboboxRoot as _e, ComboboxTrigger as ve, ComboboxViewport as ye } from "reka-ui";
@@ -34,6 +34,8 @@ var be = { class: "e-combo-main" }, xe = [
 		ariaLabel: {},
 		label: {},
 		bare: { type: Boolean },
+		multiple: { type: Boolean },
+		freeform: { type: Boolean },
 		options: {},
 		placeholder: {},
 		hint: {},
@@ -49,8 +51,7 @@ var be = { class: "e-combo-main" }, xe = [
 			default: !0
 		},
 		filter: {},
-		id: {},
-		mode: {}
+		id: {}
 	}, {
 		modelValue: {},
 		modelModifiers: {},
@@ -74,14 +75,14 @@ var be = { class: "e-combo-main" }, xe = [
 			error: T.error,
 			required: T.required,
 			optional: T.optional
-		}), j = o(() => T.bare ? T.ariaLabel ?? T.label : T.label), M = o(() => T.mode === "multiple"), N = o(() => T.mode === "free"), P = o(() => ne(T.options)), F = o(() => M.value && Array.isArray(D.value) ? D.value : []), I = o(() => typeof D.value == "string" ? D.value : ""), L = o(() => M.value ? F.value : I.value);
+		}), j = o(() => T.bare ? T.ariaLabel ?? T.label : T.label), M = o(() => T.multiple), N = o(() => T.freeform && !T.multiple), P = o(() => re(T.options)), F = o(() => M.value && Array.isArray(D.value) ? D.value : []), I = o(() => typeof D.value == "string" ? D.value : ""), L = o(() => M.value ? F.value : I.value);
 		function R(e) {
 			return P.value.find((t) => t.value === e)?.label ?? (N.value ? e : "");
 		}
 		let z = () => M.value ? "" : R(I.value), B = g(z()), V = g(!1), H = b(p, "open"), U = g(null), W = o(() => V.value ? B.value.trim().toLowerCase() : ""), G = o(() => {
 			let e = W.value;
 			return T.filter ? P.value.filter((t) => T.filter(t, e)) : P.value.filter((t) => !e || t.label.toLowerCase().includes(e) || (t.description ?? "").toLowerCase().includes(e));
-		}), Ne = o(() => re(G.value)), Pe = o(() => G.value.length > 0 || !!T.loading || !N.value), K = o(() => H.value && Pe.value && !T.disabled), Fe = o(() => K.value && !G.value.length ? T.loading ? O("searching") : T.emptyText || O("noMatches") : ""), Ie = o(() => M.value ? F.value.length > 0 : !!B.value);
+		}), Ne = o(() => ie(G.value)), Pe = o(() => G.value.length > 0 || !!T.loading || !N.value), K = o(() => H.value && Pe.value && !T.disabled), Fe = o(() => K.value && !G.value.length ? T.loading ? O("searching") : T.emptyText || O("noMatches") : ""), Ie = o(() => M.value ? F.value.length > 0 : !!B.value);
 		x(L, () => {
 			let e = z();
 			e !== B.value && (B.value = e, V.value = !1);
@@ -277,7 +278,7 @@ var be = { class: "e-combo-main" }, xe = [
 									"value",
 									"selected",
 									"query"
-								]))), 128))], 64))), 128)) : (h(), l("div", Oe, [p.loading ? (h(), s(ie, {
+								]))), 128))], 64))), 128)) : (h(), l("div", Oe, [p.loading ? (h(), s(ne, {
 									key: 0,
 									label: y(O)("searching")
 								}, null, 8, ["label"])) : (h(), l(a, { key: 1 }, [d(v(p.emptyText || y(O)("noMatches")), 1)], 64))]))]),

package/dist/components/Combobox/EComboboxBase.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EComboboxBase.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_resolveDynamicComponent","EField","_normalizeProps","_guardReactiveProps","_unref","_withCtx","_createVNode","_normalizeClass","_createElementVNode","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","EIcon","_createCommentVNode","_mergeProps","_withModifiers","EComboboxOption","ESpinner","EIcon_default","EField_default","ESpinner_default","EComboboxOption_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","EComboboxBase_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","__expose","__emit","props","__props","emit","model","useModel","t","useMessages","portal","usePortalTarget","attrs","useFieldAttrs","groupId","useUid","bareId","Bare","h","slots","frame","computed","listName","multiple","free","all","normalizeOptions","values","single","rootValue","labelOf","o","v","resting","text","ref","typing","wantOpen","anchor","query","shown","q","sections","sectionOptions","hasList","open","announce","hasValue","watch","rest","listId","content","tries","read","inputEl","focusInput","isSelected","value","itemValue","onPick","next","onInput","remove","x","clear","onKeydown","keepCaretKeys","onBlur","onWrapDown","inputBind","field","openBlock","createBlock","resolveDynamicComponent","normalizeProps","guardReactiveProps","unref","withCtx","createVNode","ComboboxRoot","_cache","$event","ComboboxAnchor","normalizeClass","createElementVNode","createElementBlock","Fragment","renderList","createTextVNode","toDisplayString","createCommentVNode","ComboboxInput","mergeProps","k","withModifiers","ComboboxTrigger","ComboboxPortal","ComboboxContent","ComboboxViewport","i","section"],"sources":["../../../src/components/Combobox/EComboboxBase.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, h, nextTick, onMounted, ref, watch, type FunctionalComponent } from \"vue\";\nimport {\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxInput,\n  ComboboxPortal,\n  ComboboxRoot,\n  ComboboxTrigger,\n  ComboboxViewport,\n} from \"reka-ui\";\nimport EField from \"../Field/EField.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESpinner from \"../Spinner/ESpinner.vue\";\nimport EComboboxOption from \"./EComboboxOption.vue\";\nimport { normalizeOptions, sectionOptions } from \"../Select/options.js\";\nimport type { EComboboxProps } from \"./types.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Select/panel.css\";\nimport \"./combo.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(defineProps<EComboboxProps & { mode: \"single\" | \"free\" | \"multiple\" }>(), {\n  clearable: true,\n});\n\nconst emit = defineEmits<{\n  /** The text in the input changed, by typing or by choosing. Use it to fetch options from a server. */\n  inputChange: [text: string];\n}>();\n\nconst model = defineModel<string | string[]>();\n\nconst t = useMessages();\nconst portal = usePortalTarget();\nconst attrs = useFieldAttrs();\nconst groupId = useUid();\nconst bareId = useUid(() => props.id);\n\nconst Bare: FunctionalComponent = (_, { slots }) =>\n  h(\"div\", attrs.wrapper(), slots.default?.({ id: bareId.value, ariaInvalid: undefined, ariaDescribedby: undefined }));\nconst frame = computed(() =>\n  props.bare\n    ? {}\n    : {\n        id: props.id,\n        label: props.label,\n        hideLabel: props.hideLabel,\n        hint: props.hint,\n        error: props.error,\n        required: props.required,\n        optional: props.optional,\n      },\n);\nconst listName = computed(() => (props.bare ? (props.ariaLabel ?? props.label) : props.label));\n\nconst multiple = computed(() => props.mode === \"multiple\");\nconst free = computed(() => props.mode === \"free\");\nconst all = computed(() => normalizeOptions(props.options));\nconst values = computed<string[]>(() => (multiple.value && Array.isArray(model.value) ? model.value : []));\nconst single = computed(() => (typeof model.value === \"string\" ? model.value : \"\"));\nconst rootValue = computed(() => (multiple.value ? values.value : single.value));\n\nfunction labelOf(v: string): string {\n  return all.value.find((o) => o.value === v)?.label ?? (free.value ? v : \"\");\n}\nconst resting = () => (multiple.value ? \"\" : labelOf(single.value));\n\nconst text = ref(resting());\nconst typing = ref(false);\nconst wantOpen = defineModel<boolean>(\"open\", { default: false });\nconst anchor = ref<{ $el: HTMLElement } | null>(null);\nconst query = computed(() => (typing.value ? text.value.trim().toLowerCase() : \"\"));\n\nconst shown = computed(() => {\n  const q = query.value;\n  if (props.filter) return all.value.filter((o) => props.filter!(o, q));\n  return all.value.filter(\n    (o) => !q || o.label.toLowerCase().includes(q) || (o.description ?? \"\").toLowerCase().includes(q),\n  );\n});\nconst sections = computed(() => sectionOptions(shown.value));\nconst hasList = computed(() => shown.value.length > 0 || !!props.loading || !free.value);\nconst open = computed(() => wantOpen.value && hasList.value && !props.disabled);\nconst announce = computed(() =>\n  open.value && !shown.value.length ? (props.loading ? t(\"searching\") : props.emptyText || t(\"noMatches\")) : \"\",\n);\nconst hasValue = computed(() => (multiple.value ? values.value.length > 0 : !!text.value));\n\nwatch(rootValue, () => {\n  const rest = resting();\n  if (rest !== text.value) {\n    text.value = rest;\n    typing.value = false;\n  }\n});\nwatch(all, () => {\n  if (!typing.value && !open.value) text.value = resting();\n});\n\nconst listId = ref<string | undefined>();\nconst content = ref<{ $el: HTMLElement } | null>(null);\nonMounted(() => {\n  if (!open.value) return;\n  let tries = 0;\n  const read = () => {\n    listId.value = content.value?.$el?.id || undefined;\n    if (!listId.value && tries++ < 10) requestAnimationFrame(read);\n  };\n  void nextTick(read);\n});\n\nconst inputEl = () => anchor.value?.$el?.querySelector(\"input\") ?? null;\nconst focusInput = () => inputEl()?.focus();\n\nfunction isSelected(value: string): boolean {\n  return multiple.value ? values.value.includes(value) : free.value ? single.value === value : single.value === value;\n}\nconst itemValue = (o: { value: string; label: string }) => (free.value ? o.label : o.value);\n\nfunction onPick(v: unknown) {\n  typing.value = false;\n  if (multiple.value) {\n    model.value = Array.isArray(v) ? (v as string[]) : [];\n    text.value = \"\";\n    emit(\"inputChange\", \"\");\n    return;\n  }\n  const next = typeof v === \"string\" ? v : \"\";\n  model.value = next;\n  text.value = free.value ? next : labelOf(next);\n  emit(\"inputChange\", text.value);\n}\n\nfunction onInput(e: Event) {\n  const v = (e.target as HTMLInputElement).value;\n  text.value = v;\n  typing.value = true;\n  wantOpen.value = true;\n  emit(\"inputChange\", v);\n  if (free.value) model.value = v;\n}\n\nfunction remove(v: string) {\n  model.value = values.value.filter((x) => x !== v);\n}\n\nfunction clear() {\n  model.value = multiple.value ? [] : \"\";\n  text.value = \"\";\n  typing.value = false;\n  emit(\"inputChange\", \"\");\n  focusInput();\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === \"Escape\" && !open.value && text.value) {\n    e.preventDefault();\n    clear();\n  } else if (e.key === \"Backspace\" && multiple.value && !text.value && values.value.length) {\n    remove(values.value[values.value.length - 1]!);\n  }\n}\n\nfunction keepCaretKeys(e: KeyboardEvent) {\n  if (e.key === \"Home\" || e.key === \"End\") e.stopImmediatePropagation();\n}\n\nfunction onBlur(e: FocusEvent) {\n  const next = e.relatedTarget as Element | null;\n  if (next && (anchor.value?.$el?.contains(next) || next.closest?.(\".e-popover\"))) return;\n  wantOpen.value = false;\n  typing.value = false;\n  if (!free.value) text.value = resting();\n}\n\nfunction onWrapDown(e: MouseEvent) {\n  if (e.target === e.currentTarget && !props.disabled) {\n    e.preventDefault();\n    focusInput();\n  }\n}\n\ntype FieldSlot = { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined };\nfunction inputBind(field: FieldSlot) {\n  return {\n    id: field.id,\n    required: props.required && !(multiple.value && values.value.length) ? true : undefined,\n    placeholder: multiple.value && values.value.length ? \"\" : props.placeholder,\n    \"aria-invalid\": field.ariaInvalid,\n    \"aria-label\": props.bare ? listName.value : undefined,\n    autocomplete: \"off\",\n    ...(listId.value ? { \"aria-controls\": listId.value } : {}),\n    ...(shown.value.length ? {} : { \"aria-activedescendant\": undefined }),\n    ...attrs.input(field.ariaDescribedby),\n  };\n}\n\ndefineExpose({\n  input: computed(() => inputEl()),\n  focus: focusInput,\n});\n</script>\n\n<template>\n  <component :is=\"bare ? Bare : EField\" v-bind=\"{ ...attrs.wrapper(), ...frame }\">\n    <template #default=\"field\">\n      <ComboboxRoot\n        class=\"e-combo-root\"\n        :model-value=\"rootValue\"\n        :multiple=\"multiple\"\n        :open=\"open\"\n        :disabled=\"disabled\"\n        ignore-filter\n        @update:model-value=\"onPick\"\n        @update:open=\"wantOpen = $event\"\n      >\n        <ComboboxAnchor\n          ref=\"anchor\"\n          class=\"e-input-wrap e-combo\"\n          :class=\"{ 'e-combo--multi': multiple }\"\n          :data-invalid=\"error && !bare ? '' : undefined\"\n          :data-disabled=\"disabled ? '' : undefined\"\n          @mousedown=\"onWrapDown\"\n          @focusout=\"onBlur\"\n        >\n          <div class=\"e-combo-main\">\n            <template v-if=\"multiple\">\n              <span v-for=\"v in values\" :key=\"v\" class=\"e-tag\">\n                {{ labelOf(v) }}\n                <button\n                  type=\"button\"\n                  class=\"e-tag-x\"\n                  :aria-label=\"t('removeItem', { label: labelOf(v) })\"\n                  :disabled=\"disabled\"\n                  @click=\"remove(v)\"\n                >\n                  <EIcon name=\"x\" small />\n                </button>\n              </span>\n            </template>\n            <ComboboxInput\n              class=\"e-input e-combo-input\"\n              :model-value=\"text\"\n              :display-value=\"(v: unknown) => (typeof v === 'string' ? (free ? v : labelOf(v)) : '')\"\n              :disabled=\"disabled\"\n              v-bind=\"inputBind(field)\"\n              @update:model-value=\"text = $event\"\n              @input=\"onInput\"\n              @keydown=\"onKeydown\"\n              @keydown.capture=\"keepCaretKeys\"\n            />\n          </div>\n          <template v-if=\"name\">\n            <input v-for=\"(v, k) in multiple ? values : [single]\" :key=\"k\" type=\"hidden\" :name=\"name\" :value=\"v\" />\n          </template>\n          <div class=\"e-combo-tail\">\n            <button\n              v-if=\"hasValue && clearable && !disabled\"\n              type=\"button\"\n              class=\"e-combo-btn\"\n              :aria-label=\"t('clear')\"\n              @mousedown.prevent\n              @click=\"clear\"\n            >\n              <EIcon name=\"x\" />\n            </button>\n            <ComboboxTrigger\n              v-if=\"!free\"\n              class=\"e-combo-btn\"\n              :aria-label=\"t('showOptions')\"\n              :disabled=\"disabled\"\n              @mousedown.prevent\n            >\n              <EIcon name=\"chevron-down\" bold />\n            </ComboboxTrigger>\n          </div>\n        </ComboboxAnchor>\n        <span class=\"e-sr\" role=\"status\">{{ announce }}</span>\n        <ComboboxPortal :to=\"portal\">\n          <ComboboxContent\n            ref=\"content\"\n            position=\"popper\"\n            align=\"start\"\n            :side-offset=\"6\"\n            :collision-padding=\"8\"\n            class=\"e-popover e-listpanel e-root\"\n            :aria-label=\"listName\"\n            :aria-busy=\"loading ? 'true' : undefined\"\n          >\n            <ComboboxViewport>\n              <template v-if=\"shown.length\">\n                <template v-for=\"(section, i) in sections\" :key=\"i\">\n                  <div v-if=\"section.group\" class=\"e-opt-set\" role=\"group\" :aria-labelledby=\"`${groupId}-g${i}`\">\n                    <div :id=\"`${groupId}-g${i}`\" class=\"e-opt-group\">{{ section.group }}</div>\n                    <EComboboxOption\n                      v-for=\"o in section.options\"\n                      :key=\"o.value\"\n                      :option=\"o\"\n                      :value=\"itemValue(o)\"\n                      :selected=\"isSelected(itemValue(o))\"\n                      :query=\"query\"\n                    />\n                  </div>\n                  <template v-else>\n                    <EComboboxOption\n                      v-for=\"o in section.options\"\n                      :key=\"o.value\"\n                      :option=\"o\"\n                      :value=\"itemValue(o)\"\n                      :selected=\"isSelected(itemValue(o))\"\n                      :query=\"query\"\n                    />\n                  </template>\n                </template>\n              </template>\n              <div v-else class=\"e-opt-status\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                <ESpinner v-if=\"loading\" :label=\"t('searching')\" />\n                <template v-else>{{ emptyText || t(\"noMatches\") }}</template>\n              </div>\n            </ComboboxViewport>\n          </ComboboxContent>\n        </ComboboxPortal>\n      </ComboboxRoot>\n    </template>\n  </component>\n</template>\n\n<style>\n@layer e.controls {\n  .e-combo-main {\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    align-items: center;\n    align-self: stretch;\n    gap: var(--e-space-1);\n    min-width: 0;\n  }\n\n  .e-combo-tail {\n    display: flex;\n    flex: none;\n    align-items: center;\n    align-self: center;\n  }\n\n  .e-combo--multi {\n    padding: 3px var(--e-space-1) 3px var(--e-space-2);\n    gap: var(--e-space-1);\n  }\n\n  .e-combo--multi .e-input {\n    height: calc(var(--e-control-height) - 9px);\n    align-self: center;\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    height: 32px;\n    padding: 0 var(--e-space-1) 0 var(--e-space-3);\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 1px var(--e-primary);\n    color: var(--e-ink);\n    font: 500 var(--e-text-sm)/1 var(--e-font-sans);\n  }\n\n  .e-tag-x::after {\n    content: \"\";\n    position: absolute;\n    inset: -10px;\n  }\n\n  .e-tag-x {\n    position: relative;\n    display: inline-grid;\n    place-items: center;\n    width: 24px;\n    height: 24px;\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: transparent;\n    color: var(--e-primary);\n    cursor: pointer;\n  }\n\n  .e-tag-x:hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 1px var(--e-primary);\n  }\n\n  .e-tag-x:active {\n    background: var(--e-wash-press);\n  }\n\n  .e-tag-x:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: 1px;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BA,IAAM2C,IAAQC,GAIRC,IAAOH,GAKPI,IAAQ9C,EAA8B4C,GAAA,YAAC,GAEvCI,IAAIC,EAAY,GAChBC,KAASC,EAAgB,GACzBC,IAAQC,GAAc,GACtBC,IAAUC,EAAO,GACjBC,KAASD,QAAaZ,EAAM,EAAE,GAE9Bc,MAA6B,GAAG,EAAE,eACtCC,GAAE,OAAON,EAAM,QAAQ,GAAGO,EAAM,UAAU;GAAE,IAAIH,GAAO;GAAO,aAAa,KAAA;GAAW,iBAAiB,KAAA;EAAU,CAAC,CAAC,GAC/GI,KAAQC,QACZlB,EAAM,OACF,CAAC,IACD;GACE,IAAIA,EAAM;GACV,OAAOA,EAAM;GACb,WAAWA,EAAM;GACjB,MAAMA,EAAM;GACZ,OAAOA,EAAM;GACb,UAAUA,EAAM;GAChB,UAAUA,EAAM;EAClB,CACN,GACMmB,IAAWD,QAAgBlB,EAAM,OAAQA,EAAM,aAAaA,EAAM,QAASA,EAAM,KAAM,GAEvFoB,IAAWF,QAAelB,EAAM,SAAS,UAAU,GACnDqB,IAAOH,QAAelB,EAAM,SAAS,MAAM,GAC3CsB,IAAMJ,QAAeK,GAAiBvB,EAAM,OAAO,CAAC,GACpDwB,IAASN,QAA0BE,EAAS,SAAS,MAAM,QAAQjB,EAAM,KAAK,IAAIA,EAAM,QAAQ,CAAC,CAAE,GACnGsB,IAASP,QAAgB,OAAOf,EAAM,SAAU,WAAWA,EAAM,QAAQ,EAAG,GAC5EuB,IAAYR,QAAgBE,EAAS,QAAQI,EAAO,QAAQC,EAAO,KAAM;EAE/E,SAASE,EAAQ,GAAmB;GAClC,OAAOL,EAAI,MAAM,MAAM,MAAMM,EAAE,UAAUC,CAAC,CAAC,EAAE,UAAUR,EAAK,QAAQQ,IAAI;EAC1E;EACA,IAAMC,UAAiBV,EAAS,QAAQ,KAAKO,EAAQF,EAAO,KAAK,GAE3DM,IAAOC,EAAIF,EAAQ,CAAC,GACpBG,IAASD,EAAI,EAAK,GAClBE,IAAW7E,EAAoB4C,GAAC,MAA0B,GAC1DkC,IAASH,EAAiC,IAAI,GAC9CI,IAAQlB,QAAgBe,EAAO,QAAQF,EAAK,MAAM,KAAK,CAAC,CAAC,YAAY,IAAI,EAAG,GAE5EM,IAAQnB,QAAe;GAC3B,IAAMoB,IAAIF,EAAM;GAEhB,OADIpC,EAAM,SAAesB,EAAI,MAAM,QAAQ,MAAMtB,EAAM,OAAQ4B,GAAGU,CAAC,CAAC,IAC7DhB,EAAI,MAAM,QACd,MAAM,CAACgB,KAAKV,EAAE,MAAM,YAAY,CAAC,CAAC,SAASU,CAAC,MAAMV,EAAE,eAAe,GAAA,CAAI,YAAY,CAAC,CAAC,SAASU,CAAC,CAClG;EACF,CAAC,GACKC,KAAWrB,QAAesB,GAAeH,EAAM,KAAK,CAAC,GACrDI,KAAUvB,QAAemB,EAAM,MAAM,SAAS,KAAK,CAAC,CAACrC,EAAM,WAAW,CAACqB,EAAK,KAAK,GACjFqB,IAAOxB,QAAegB,EAAS,SAASO,GAAQ,SAAS,CAACzC,EAAM,QAAQ,GACxE2C,KAAWzB,QACfwB,EAAK,SAAS,CAACL,EAAM,MAAM,SAAUrC,EAAM,UAAUK,EAAE,WAAW,IAAIL,EAAM,aAAaK,EAAE,WAAW,IAAK,EAC7G,GACMuC,KAAW1B,QAAgBE,EAAS,QAAQI,EAAO,MAAM,SAAS,IAAI,CAAC,CAACO,EAAK,KAAM;EASzF,AAPAc,EAAMnB,SAAiB;GACrB,IAAMoB,IAAOhB,EAAQ;GACrB,AAAIgB,MAASf,EAAK,UAChB,EAAK,QAAQe,GACb,EAAO,QAAQ;EAEnB,CAAC,GACDD,EAAMvB,SAAW;GACf,AAAI,CAACW,EAAO,SAAS,CAACS,EAAK,UAAO,EAAK,QAAQZ,EAAQ;EACzD,CAAC;EAED,IAAMiB,IAASf,EAAwB,GACjCgB,IAAUhB,EAAiC,IAAI;EACrD,SAAgB;GACd,IAAI,CAACU,EAAK,OAAO;GACjB,IAAIO,IAAQ,GACNC,UAAa;IAEjB,AADA,EAAO,QAAQF,EAAQ,OAAO,KAAK,MAAM,KAAA,GACrC,CAACD,EAAO,SAAS,MAAU,MAAI,sBAAsBG,CAAI;GAC/D;GACA,GAAcA,CAAI;EACpB,CAAC;EAED,IAAMC,UAAgBhB,EAAO,OAAO,KAAK,cAAc,OAAO,KAAK,MAC7DiB,UAAmBD,EAAQ,CAAC,EAAE,MAAM;EAE1C,SAASE,EAAW,GAAwB;GAC1C,OAAOjC,EAAS,QAAQI,EAAO,MAAM,SAAS8B,CAAK,KAAIjC,EAAK,OAAQI,EAAO,UAAU6B;EACvF;EACA,IAAMC,KAAa,MAAyClC,EAAK,QAAQO,EAAE,QAAQA,EAAE;EAErF,SAAS4B,GAAO,GAAY;GAE1B,IADA,EAAO,QAAQ,IACXpC,EAAS,OAAO;IAGlB,AAFA,EAAM,QAAQ,MAAM,QAAQS,CAAC,IAAKA,IAAiB,CAAC,GACpD,EAAK,QAAQ,IACb3B,EAAK,eAAe,EAAE;IACtB;GACF;GACA,IAAMuD,IAAO,OAAO5B,KAAM,WAAWA,IAAI;GAGzC,AAFA,EAAM,QAAQ4B,GACd,EAAK,QAAQpC,EAAK,QAAQoC,IAAO9B,EAAQ8B,CAAI,GAC7CvD,EAAK,eAAe6B,EAAK,KAAK;EAChC;EAEA,SAAS2B,GAAQ,GAAU;GACzB,IAAM7B,IAAK,EAAE,OAA4B;GAKzC,AAJA,EAAK,QAAQA,GACb,EAAO,QAAQ,IACf,EAAS,QAAQ,IACjB3B,EAAK,eAAe2B,CAAC,GACjBR,EAAK,UAAO,EAAM,QAAQQ;EAChC;EAEA,SAAS8B,GAAO,GAAW;GACzB,EAAM,QAAQnC,EAAO,MAAM,QAAQ,MAAMoC,MAAM/B,CAAC;EAClD;EAEA,SAASgC,IAAQ;GAKf,AAJA,EAAM,QAAQzC,EAAS,QAAQ,CAAC,IAAI,IACpC,EAAK,QAAQ,IACb,EAAO,QAAQ,IACflB,EAAK,eAAe,EAAE,GACtBkD,EAAW;EACb;EAEA,SAASU,GAAU,GAAkB;GACnC,AAAI,EAAE,QAAQ,YAAY,CAACpB,EAAK,SAASX,EAAK,SAC5C,EAAE,eAAe,GACjB8B,EAAM,KACG,EAAE,QAAQ,eAAezC,EAAS,SAAS,CAACW,EAAK,SAASP,EAAO,MAAM,UAChFmC,GAAOnC,EAAO,MAAMA,EAAO,MAAM,SAAS,EAAG;EAEjD;EAEA,SAASuC,GAAc,GAAkB;GACvC,CAAI,EAAE,QAAQ,UAAU,EAAE,QAAQ,UAAO,EAAE,yBAAyB;EACtE;EAEA,SAASC,GAAO,GAAe;GAC7B,IAAMP,IAAO,EAAE;GACf,AAAIA,MAAStB,EAAO,OAAO,KAAK,SAASsB,CAAI,KAAKA,EAAK,UAAU,YAAY,OAC7E,EAAS,QAAQ,IACjB,EAAO,QAAQ,IACVpC,EAAK,UAAO,EAAK,QAAQS,EAAQ;EACxC;EAEA,SAASmC,GAAW,GAAe;GACjC,AAAI,EAAE,WAAW,EAAE,iBAAiB,CAACjE,EAAM,aACzC,EAAE,eAAe,GACjBoD,EAAW;EAEf;EAGA,SAASc,GAAU,GAAkB;GACnC,OAAO;IACL,IAAIC,EAAM;IACV,UAAUnE,EAAM,YAAY,EAAEoB,EAAS,SAASI,EAAO,MAAM,UAAU,KAAO,KAAA;IAC9E,aAAaJ,EAAS,SAASI,EAAO,MAAM,SAAS,KAAKxB,EAAM;IAChE,gBAAgBmE,EAAM;IACtB,cAAcnE,EAAM,OAAOmB,EAAS,QAAQ,KAAA;IAC5C,cAAc;IACd,GAAI4B,EAAO,QAAQ,EAAE,iBAAiBA,EAAO,MAAM,IAAI,CAAC;IACxD,GAAIV,EAAM,MAAM,SAAS,CAAC,IAAI,EAAE,yBAAyB,KAAA,EAAU;IACnE,GAAG5B,EAAM,MAAM0D,EAAM,eAAe;GACtC;EACF;E,OAEArE,EAAa;GACX,OAAOoB,QAAeiC,EAAQ,CAAC;GAC/B,OAAOC;EACT,CAAC,I,UAIC9F,EAAA,GAAAC,EAwHYC,GAxHIyC,EAAA,OAAOa,KAAOrD,EAAM,GAAAC,GAAAC,GAAA;GAAA,GAAeC,EAAA6C,CAAA,CAAK,CAAC,QAAO;GAAA,GAAOQ,GAAA;EAAK,CAAA,CAAA,GAAA;GAC/D,SAAOpD,GAAE,MAAK,CACvBC,EAoHeF,EAAAgH,EAAA,GAAA;IAnHb,OAAM;IACL,eAAalD,EAAA;IACb,UAAUN,EAAA;IACV,MAAMsB,EAAA;IACN,UAAUzC,EAAA;IACX,iBAAA;IACC,uBAAoBuD;IACpB,iBAAW,AAAAqB,EAAA,QAAA,MAAE,EAAA,QAAWC;;IAEzB,SAAAjH,QA4DiB;KA5DjBC,EA4DiBF,EAAAmH,EAAA,GAAA;MA3DX,SAAA;MAAJ,KAAI5C;MACJ,OAAKpE,GAAA,CAAC,wBAAsB,EAAA,kBACAqD,EAAA,MAAQ,CAAA,CAAA;MACnC,gBAAcnB,EAAA,SAAK,CAAKA,EAAA,OAAI,KAAQ,KAAA;MACpC,iBAAeA,EAAA,WAAQ,KAAQ,KAAA;MAC/B,aAAWgE;MACX,YAAUD;;MAEX,SAAAnG,QA0BM;OA1BNG,EA0BM,OA1BNgB,IA0BM,CAzBYoC,EAAA,SACd9D,EAAA,EAAA,GAAAW,EAWOC,GAAA,EAAA,KAAA,EAAA,GAAAC,EAXWqD,EAAA,QAAL,OAAblE,EAAA,GAAAW,EAWO,QAAA;QAXoB,KAAK4D;QAAG,OAAM;O,IACpCzD,EAAAC,EAAAsD,EAAQE,CAAC,CAAA,IAAI,KAChB,CAAA,GAAA7D,EAQS,UAAA;QAPP,MAAK;QACL,OAAM;QACL,cAAYJ,EAAAyC,CAAA,CAAC,CAAA,cAAA,EAAA,OAAwBsB,EAAQE,CAAC,EAAA,CAAA;QAC9C,UAAU5B,EAAA;QACV,UAAK,MAAE0D,GAAO9B,CAAC;O,IAEhB/D,EAAwBQ,GAAA;QAAjB,MAAK;QAAI,OAAA;O,oCAItBR,EAUEF,EAAA4H,EAAA,GAVFhH,GAUE;QATA,OAAM;QACL,eAAauD,EAAA;QACb,kBAAgB,MAAU,OAAaF,KAAC,WAAiBR,EAAA,QAAOQ,IAAIF,EAAQE,CAAC,IAAA;QAC7E,UAAU5B,EAAA;OACH,GAAAiE,GAAUC,CAAK,GAAA;QACtB,uBAAkB,AAAAU,EAAA,QAAA,MAAE,EAAA,QAAOC;QACpB;QACE;QACQ,kBAAAf;;;;;;OAGN9D,EAAA,QACd3C,EAAA,EAAA,GAAAW,EAAuGC,GAAA,EAAA,KAAA,EAAA,GAAAC,EAA/EiD,EAAA,QAAWI,EAAA,QAAM,CAAIC,EAAA,KAAM,IAApC,GAAG,OAAlBnE,EAAA,GAAAW,EAAuG,SAAA;QAAhD,KAAKyH;QAAG,MAAK;QAAU,MAAMzF,EAAA;QAAO,OAAO4B;;OAEpG7D,EAoBM,OApBNmB,IAoBM,CAlBIyD,GAAA,SAAY3C,EAAA,aAAS,CAAKA,EAAA,YADlC3C,EAAA,GAAAW,EASS,UAAA;;QAPP,MAAK;QACL,OAAM;QACL,cAAYL,EAAAyC,CAAA,CAAC,CAAA,OAAA;QACb,aAAS,AAAAwE,EAAA,OAAApG,QAAV,CAAA,GAAkB,CAAA,SAAA,CAAA;QACjB,SAAOoF;O,IAER/F,EAAkBQ,GAAA,EAAX,MAAK,IAAG,CAAA,C,yBAGR+C,EAAA,Q,aADT/D,EAAA,GAAAC,EAQkBK,EAAAgI,EAAA,GAAA;;QANhB,OAAM;QACL,cAAYhI,EAAAyC,CAAA,CAAC,CAAA,aAAA;QACb,UAAUJ,EAAA;QACV,aAAS,AAAA4E,EAAA,OAAApG,QAAV,CAAA,GAAkB,CAAA,SAAA,CAAA;;QAElB,SAAAZ,QAAkC,CAAlCC,EAAkCQ,GAAA;SAA3B,MAAK;SAAe,MAAA;;;;;;;;;;;KAIjCN,EAAsD,QAAtDqB,IAAsDhB,EAAlBsE,GAAA,KAAQ,GAAA,CAAA;KAC5C7E,EA2CiBF,EAAAiI,EAAA,GAAA,EA3CA,IAAIjI,EAAA2C,EAAA,EAAM,GAAA;MACzB,SAAA1C,QAyCkB,CAzClBC,EAyCkBF,EAAAkI,EAAA,GAAA;OAxCZ,SAAA;OAAJ,KAAI9C;OACJ,UAAS;OACT,OAAM;OACL,eAAa;OACb,qBAAmB;OACpB,OAAM;OACL,cAAY7B,EAAA;OACZ,aAAWlB,EAAA,UAAO,SAAY,KAAA;;OAE/B,SAAApC,QA8BmB,CA9BnBC,EA8BmBF,EAAAmI,EAAA,GAAA,MAAA;QA7BjB,SAAAlI,QAwBW,CAxBKwE,EAAA,MAAM,UACpB/E,EAAA,EAAA,GAAAW,EAsBWC,GAAA,EAAA,KAAA,EAAA,GAAAC,EAtBsBoE,GAAA,QAAf,GAAS,OAAsBjF,EAAA,GAAAW,EAAAC,GAAA,EAAA,KAAA8H,EAAC,GAAA,CACrCC,EAAQ,SAAnB3I,EAAA,GAAAW,EAUM,OAAA;;SAVoB,OAAM;SAAY,MAAK;SAAS,mBAAe,GAAKL,EAAA+C,CAAA,EAAO,IAAKqF;Q,IACxFhI,EAA2E,OAAA;SAArE,IAAE,GAAKJ,EAAA+C,CAAA,EAAO,IAAKqF;SAAK,OAAM;QAAiB,GAAA3H,EAAA4H,EAAQ,KAAK,GAAA,GAAA1G,EAAA,IAClEjC,EAAA,EAAA,GAAAW,EAOEC,GAAA,MAAAC,EANY8H,EAAQ,UAAb,OADT3I,EAAA,GAAAC,EAOEmB,GAAA;SALC,KAAKkD,EAAE;SACP,QAAQA;SACR,OAAO2B,EAAU3B,CAAC;SAClB,UAAUyB,EAAWE,EAAU3B,CAAC,CAAA;SAChC,OAAOQ,EAAA;;;;;;Q,yBAIV9E,EAAA,EAAA,GAAAW,EAOEC,GAAA,EAAA,KAAA,EAAA,GAAAC,EANY8H,EAAQ,UAAb,OADT3I,EAAA,GAAAC,EAOEmB,GAAA;SALC,KAAKkD,EAAE;SACP,QAAQA;SACR,OAAO2B,EAAU3B,CAAC;SAClB,UAAUyB,EAAWE,EAAU3B,CAAC,CAAA;SAChC,OAAOQ,EAAA;;;;;;Q,8BAKhB9E,EAAA,GAAAW,EAGM,OAHNuB,IAGM,CAFYS,EAAA,WAAhB3C,EAAA,GAAAC,EAAmDoB,IAAA;;SAAzB,OAAOf,EAAAyC,CAAA,CAAC,CAAA,WAAA;Q,2BAClC/C,EAAA,GAAAW,EAA6DC,GAAA,EAAA,KAAA,EAAA,GAAA,CAAzCE,EAAAC,EAAA4B,EAAA,aAAarC,EAAAyC,CAAA,CAAC,CAAA,WAAA,CAAA,GAAA,CAAA,C"}
+{"version":3,"file":"EComboboxBase.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","_resolveDynamicComponent","EField","_normalizeProps","_guardReactiveProps","_unref","_withCtx","_createVNode","_normalizeClass","_createElementVNode","_createElementBlock","_Fragment","_renderList","_createTextVNode","_toDisplayString","EIcon","_createCommentVNode","_mergeProps","_withModifiers","EComboboxOption","ESpinner","EIcon_default","EField_default","ESpinner_default","EComboboxOption_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_hoisted_9","EComboboxBase_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","\"open\"","\"openModifiers\"","__expose","__emit","props","__props","emit","model","useModel","t","useMessages","portal","usePortalTarget","attrs","useFieldAttrs","groupId","useUid","bareId","Bare","h","slots","frame","computed","listName","multiple","free","all","normalizeOptions","values","single","rootValue","labelOf","o","v","resting","text","ref","typing","wantOpen","anchor","query","shown","q","sections","sectionOptions","hasList","open","announce","hasValue","watch","rest","listId","content","tries","read","inputEl","focusInput","isSelected","value","itemValue","onPick","next","onInput","remove","x","clear","onKeydown","keepCaretKeys","onBlur","onWrapDown","inputBind","field","openBlock","createBlock","resolveDynamicComponent","normalizeProps","guardReactiveProps","unref","withCtx","createVNode","ComboboxRoot","_cache","$event","ComboboxAnchor","normalizeClass","createElementVNode","createElementBlock","Fragment","renderList","createTextVNode","toDisplayString","createCommentVNode","ComboboxInput","mergeProps","k","withModifiers","ComboboxTrigger","ComboboxPortal","ComboboxContent","ComboboxViewport","i","section"],"sources":["../../../src/components/Combobox/EComboboxBase.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, h, nextTick, onMounted, ref, watch, type FunctionalComponent } from \"vue\";\nimport {\n  ComboboxAnchor,\n  ComboboxContent,\n  ComboboxInput,\n  ComboboxPortal,\n  ComboboxRoot,\n  ComboboxTrigger,\n  ComboboxViewport,\n} from \"reka-ui\";\nimport EField from \"../Field/EField.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport ESpinner from \"../Spinner/ESpinner.vue\";\nimport EComboboxOption from \"./EComboboxOption.vue\";\nimport { normalizeOptions, sectionOptions } from \"../Select/options.js\";\nimport type { EComboboxProps } from \"./types.js\";\nimport { useMessages, usePortalTarget } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport { useUid } from \"../../composables/useUid.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\nimport \"../Select/panel.css\";\nimport \"./combo.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(defineProps<EComboboxProps>(), {\n  clearable: true,\n});\n\nconst emit = defineEmits<{\n  /** The text in the input changed, by typing or by choosing. Use it to fetch options from a server. */\n  inputChange: [text: string];\n}>();\n\nconst model = defineModel<string | string[]>();\n\nconst t = useMessages();\nconst portal = usePortalTarget();\nconst attrs = useFieldAttrs();\nconst groupId = useUid();\nconst bareId = useUid(() => props.id);\n\nconst Bare: FunctionalComponent = (_, { slots }) =>\n  h(\"div\", attrs.wrapper(), slots.default?.({ id: bareId.value, ariaInvalid: undefined, ariaDescribedby: undefined }));\nconst frame = computed(() =>\n  props.bare\n    ? {}\n    : {\n        id: props.id,\n        label: props.label,\n        hideLabel: props.hideLabel,\n        hint: props.hint,\n        error: props.error,\n        required: props.required,\n        optional: props.optional,\n      },\n);\nconst listName = computed(() => (props.bare ? (props.ariaLabel ?? props.label) : props.label));\n\nconst multiple = computed(() => props.multiple);\n// Free text is for one value; with `multiple` it is ignored.\nconst free = computed(() => props.freeform && !props.multiple);\nconst all = computed(() => normalizeOptions(props.options));\nconst values = computed<string[]>(() => (multiple.value && Array.isArray(model.value) ? model.value : []));\nconst single = computed(() => (typeof model.value === \"string\" ? model.value : \"\"));\nconst rootValue = computed(() => (multiple.value ? values.value : single.value));\n\nfunction labelOf(v: string): string {\n  return all.value.find((o) => o.value === v)?.label ?? (free.value ? v : \"\");\n}\nconst resting = () => (multiple.value ? \"\" : labelOf(single.value));\n\nconst text = ref(resting());\nconst typing = ref(false);\nconst wantOpen = defineModel<boolean>(\"open\", { default: false });\nconst anchor = ref<{ $el: HTMLElement } | null>(null);\nconst query = computed(() => (typing.value ? text.value.trim().toLowerCase() : \"\"));\n\nconst shown = computed(() => {\n  const q = query.value;\n  if (props.filter) return all.value.filter((o) => props.filter!(o, q));\n  return all.value.filter(\n    (o) => !q || o.label.toLowerCase().includes(q) || (o.description ?? \"\").toLowerCase().includes(q),\n  );\n});\nconst sections = computed(() => sectionOptions(shown.value));\nconst hasList = computed(() => shown.value.length > 0 || !!props.loading || !free.value);\nconst open = computed(() => wantOpen.value && hasList.value && !props.disabled);\nconst announce = computed(() =>\n  open.value && !shown.value.length ? (props.loading ? t(\"searching\") : props.emptyText || t(\"noMatches\")) : \"\",\n);\nconst hasValue = computed(() => (multiple.value ? values.value.length > 0 : !!text.value));\n\nwatch(rootValue, () => {\n  const rest = resting();\n  if (rest !== text.value) {\n    text.value = rest;\n    typing.value = false;\n  }\n});\nwatch(all, () => {\n  if (!typing.value && !open.value) text.value = resting();\n});\n\nconst listId = ref<string | undefined>();\nconst content = ref<{ $el: HTMLElement } | null>(null);\nonMounted(() => {\n  if (!open.value) return;\n  let tries = 0;\n  const read = () => {\n    listId.value = content.value?.$el?.id || undefined;\n    if (!listId.value && tries++ < 10) requestAnimationFrame(read);\n  };\n  void nextTick(read);\n});\n\nconst inputEl = () => anchor.value?.$el?.querySelector(\"input\") ?? null;\nconst focusInput = () => inputEl()?.focus();\n\nfunction isSelected(value: string): boolean {\n  return multiple.value ? values.value.includes(value) : free.value ? single.value === value : single.value === value;\n}\nconst itemValue = (o: { value: string; label: string }) => (free.value ? o.label : o.value);\n\nfunction onPick(v: unknown) {\n  typing.value = false;\n  if (multiple.value) {\n    model.value = Array.isArray(v) ? (v as string[]) : [];\n    text.value = \"\";\n    emit(\"inputChange\", \"\");\n    return;\n  }\n  const next = typeof v === \"string\" ? v : \"\";\n  model.value = next;\n  text.value = free.value ? next : labelOf(next);\n  emit(\"inputChange\", text.value);\n}\n\nfunction onInput(e: Event) {\n  const v = (e.target as HTMLInputElement).value;\n  text.value = v;\n  typing.value = true;\n  wantOpen.value = true;\n  emit(\"inputChange\", v);\n  if (free.value) model.value = v;\n}\n\nfunction remove(v: string) {\n  model.value = values.value.filter((x) => x !== v);\n}\n\nfunction clear() {\n  model.value = multiple.value ? [] : \"\";\n  text.value = \"\";\n  typing.value = false;\n  emit(\"inputChange\", \"\");\n  focusInput();\n}\n\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === \"Escape\" && !open.value && text.value) {\n    e.preventDefault();\n    clear();\n  } else if (e.key === \"Backspace\" && multiple.value && !text.value && values.value.length) {\n    remove(values.value[values.value.length - 1]!);\n  }\n}\n\nfunction keepCaretKeys(e: KeyboardEvent) {\n  if (e.key === \"Home\" || e.key === \"End\") e.stopImmediatePropagation();\n}\n\nfunction onBlur(e: FocusEvent) {\n  const next = e.relatedTarget as Element | null;\n  if (next && (anchor.value?.$el?.contains(next) || next.closest?.(\".e-popover\"))) return;\n  wantOpen.value = false;\n  typing.value = false;\n  if (!free.value) text.value = resting();\n}\n\nfunction onWrapDown(e: MouseEvent) {\n  if (e.target === e.currentTarget && !props.disabled) {\n    e.preventDefault();\n    focusInput();\n  }\n}\n\ntype FieldSlot = { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined };\nfunction inputBind(field: FieldSlot) {\n  return {\n    id: field.id,\n    required: props.required && !(multiple.value && values.value.length) ? true : undefined,\n    placeholder: multiple.value && values.value.length ? \"\" : props.placeholder,\n    \"aria-invalid\": field.ariaInvalid,\n    \"aria-label\": props.bare ? listName.value : undefined,\n    autocomplete: \"off\",\n    ...(listId.value ? { \"aria-controls\": listId.value } : {}),\n    ...(shown.value.length ? {} : { \"aria-activedescendant\": undefined }),\n    ...attrs.input(field.ariaDescribedby),\n  };\n}\n\ndefineExpose({\n  input: computed(() => inputEl()),\n  focus: focusInput,\n});\n</script>\n\n<template>\n  <component :is=\"bare ? Bare : EField\" v-bind=\"{ ...attrs.wrapper(), ...frame }\">\n    <template #default=\"field\">\n      <ComboboxRoot\n        class=\"e-combo-root\"\n        :model-value=\"rootValue\"\n        :multiple=\"multiple\"\n        :open=\"open\"\n        :disabled=\"disabled\"\n        ignore-filter\n        @update:model-value=\"onPick\"\n        @update:open=\"wantOpen = $event\"\n      >\n        <ComboboxAnchor\n          ref=\"anchor\"\n          class=\"e-input-wrap e-combo\"\n          :class=\"{ 'e-combo--multi': multiple }\"\n          :data-invalid=\"error && !bare ? '' : undefined\"\n          :data-disabled=\"disabled ? '' : undefined\"\n          @mousedown=\"onWrapDown\"\n          @focusout=\"onBlur\"\n        >\n          <div class=\"e-combo-main\">\n            <template v-if=\"multiple\">\n              <span v-for=\"v in values\" :key=\"v\" class=\"e-tag\">\n                {{ labelOf(v) }}\n                <button\n                  type=\"button\"\n                  class=\"e-tag-x\"\n                  :aria-label=\"t('removeItem', { label: labelOf(v) })\"\n                  :disabled=\"disabled\"\n                  @click=\"remove(v)\"\n                >\n                  <EIcon name=\"x\" small />\n                </button>\n              </span>\n            </template>\n            <ComboboxInput\n              class=\"e-input e-combo-input\"\n              :model-value=\"text\"\n              :display-value=\"(v: unknown) => (typeof v === 'string' ? (free ? v : labelOf(v)) : '')\"\n              :disabled=\"disabled\"\n              v-bind=\"inputBind(field)\"\n              @update:model-value=\"text = $event\"\n              @input=\"onInput\"\n              @keydown=\"onKeydown\"\n              @keydown.capture=\"keepCaretKeys\"\n            />\n          </div>\n          <template v-if=\"name\">\n            <input v-for=\"(v, k) in multiple ? values : [single]\" :key=\"k\" type=\"hidden\" :name=\"name\" :value=\"v\" />\n          </template>\n          <div class=\"e-combo-tail\">\n            <button\n              v-if=\"hasValue && clearable && !disabled\"\n              type=\"button\"\n              class=\"e-combo-btn\"\n              :aria-label=\"t('clear')\"\n              @mousedown.prevent\n              @click=\"clear\"\n            >\n              <EIcon name=\"x\" />\n            </button>\n            <ComboboxTrigger\n              v-if=\"!free\"\n              class=\"e-combo-btn\"\n              :aria-label=\"t('showOptions')\"\n              :disabled=\"disabled\"\n              @mousedown.prevent\n            >\n              <EIcon name=\"chevron-down\" bold />\n            </ComboboxTrigger>\n          </div>\n        </ComboboxAnchor>\n        <span class=\"e-sr\" role=\"status\">{{ announce }}</span>\n        <ComboboxPortal :to=\"portal\">\n          <ComboboxContent\n            ref=\"content\"\n            position=\"popper\"\n            align=\"start\"\n            :side-offset=\"6\"\n            :collision-padding=\"8\"\n            class=\"e-popover e-listpanel e-root\"\n            :aria-label=\"listName\"\n            :aria-busy=\"loading ? 'true' : undefined\"\n          >\n            <ComboboxViewport>\n              <template v-if=\"shown.length\">\n                <template v-for=\"(section, i) in sections\" :key=\"i\">\n                  <div v-if=\"section.group\" class=\"e-opt-set\" role=\"group\" :aria-labelledby=\"`${groupId}-g${i}`\">\n                    <div :id=\"`${groupId}-g${i}`\" class=\"e-opt-group\">{{ section.group }}</div>\n                    <EComboboxOption\n                      v-for=\"o in section.options\"\n                      :key=\"o.value\"\n                      :option=\"o\"\n                      :value=\"itemValue(o)\"\n                      :selected=\"isSelected(itemValue(o))\"\n                      :query=\"query\"\n                    />\n                  </div>\n                  <template v-else>\n                    <EComboboxOption\n                      v-for=\"o in section.options\"\n                      :key=\"o.value\"\n                      :option=\"o\"\n                      :value=\"itemValue(o)\"\n                      :selected=\"isSelected(itemValue(o))\"\n                      :query=\"query\"\n                    />\n                  </template>\n                </template>\n              </template>\n              <div v-else class=\"e-opt-status\" role=\"option\" aria-disabled=\"true\" aria-selected=\"false\">\n                <ESpinner v-if=\"loading\" :label=\"t('searching')\" />\n                <template v-else>{{ emptyText || t(\"noMatches\") }}</template>\n              </div>\n            </ComboboxViewport>\n          </ComboboxContent>\n        </ComboboxPortal>\n      </ComboboxRoot>\n    </template>\n  </component>\n</template>\n\n<style>\n@layer e.controls {\n  .e-combo-main {\n    display: flex;\n    flex: 1;\n    flex-wrap: wrap;\n    align-items: center;\n    align-self: stretch;\n    gap: var(--e-space-1);\n    min-width: 0;\n  }\n\n  .e-combo-tail {\n    display: flex;\n    flex: none;\n    align-items: center;\n    align-self: center;\n  }\n\n  .e-combo--multi {\n    padding: 3px var(--e-space-1) 3px var(--e-space-2);\n    gap: var(--e-space-1);\n  }\n\n  .e-combo--multi .e-input {\n    height: calc(var(--e-control-height) - 9px);\n    align-self: center;\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    height: var(--e-space-8);\n    padding: 0 var(--e-space-1) 0 var(--e-space-3);\n    border-radius: var(--e-radius-pill);\n    background: var(--e-surface-tint);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-primary);\n    color: var(--e-ink);\n    font: 500 var(--e-text-sm)/1 var(--e-font-sans);\n  }\n\n  .e-tag-x::after {\n    content: \"\";\n    position: absolute;\n    inset: calc((var(--e-tap) - var(--e-space-6)) / -2);\n  }\n\n  .e-tag-x {\n    position: relative;\n    display: inline-grid;\n    place-items: center;\n    width: var(--e-space-6);\n    height: var(--e-space-6);\n    padding: 0;\n    border: 0;\n    border-radius: 50%;\n    background: transparent;\n    color: var(--e-primary);\n    cursor: pointer;\n  }\n\n  .e-tag-x:hover {\n    background: var(--e-wash-hover);\n    box-shadow: inset 0 0 0 var(--e-stroke-card) var(--e-primary);\n  }\n\n  .e-tag-x:active {\n    background: var(--e-wash-press);\n  }\n\n  .e-tag-x:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  @media (forced-colors: active) {\n    .e-tag {\n      outline: var(--e-stroke-card) solid CanvasText;\n    }\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/Combobox/EComboboxOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"EComboboxOption.js","names":["_sfc_main","EComboboxOption_vue_vue_type_script_setup_true_lang_default","EComboboxOption_default"],"sources":["../../../src/components/Combobox/EComboboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxItem } from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EHighlight from \"./EHighlight.js\";\nimport type { EOption } from \"../Select/options.js\";\n\ndefineProps<{\n  /** The option to show. */\n  option: EOption;\n  /** What the item carries as its value. */\n  value: string;\n  /** Whether it is chosen: bold, with a check. */\n  selected: boolean;\n  /** The lower-case text people typed; the first match in the label and description is marked. */\n  query: string;\n}>();\n</script>\n\n<template>\n  <ComboboxItem\n    :value=\"value\"\n    :disabled=\"option.disabled\"\n    class=\"e-opt\"\n    :class=\"{ 'e-opt--selected': selected, 'e-opt--disabled': option.disabled }\"\n    @mousedown.prevent\n  >\n    <EIcon v-if=\"option.icon\" :name=\"option.icon\" />\n    <span class=\"e-opt-text\">\n      <span class=\"e-opt-label\"><EHighlight :text=\"option.label\" :query=\"query\" /></span>\n      <span v-if=\"option.description\" class=\"e-opt-desc\">\n        <EHighlight :text=\"option.description\" :query=\"query\" />\n      </span>\n    </span>\n    <EIcon v-if=\"selected\" name=\"check\" bold />\n  </ComboboxItem>\n</template>\n"],"mappings":""}
+{"version":3,"file":"EComboboxOption.js","names":["_sfc_main","EComboboxOption_vue_vue_type_script_setup_true_lang_default","EComboboxOption_default"],"sources":["../../../src/components/Combobox/EComboboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxItem } from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EMatchHighlight from \"./matchHighlight.js\";\nimport type { EOption } from \"../Select/options.js\";\n\ndefineProps<{\n  /** The option to show. */\n  option: EOption;\n  /** What the item carries as its value. */\n  value: string;\n  /** Whether it is chosen: bold, with a check. */\n  selected: boolean;\n  /** The lower-case text people typed; the first match in the label and description is marked. */\n  query: string;\n}>();\n</script>\n\n<template>\n  <ComboboxItem\n    :value=\"value\"\n    :disabled=\"option.disabled\"\n    class=\"e-opt\"\n    :class=\"{ 'e-opt--selected': selected, 'e-opt--disabled': option.disabled }\"\n    @mousedown.prevent\n  >\n    <EIcon v-if=\"option.icon\" :name=\"option.icon\" />\n    <span class=\"e-opt-text\">\n      <span class=\"e-opt-label\"><EMatchHighlight :text=\"option.label\" :query=\"query\" /></span>\n      <span v-if=\"option.description\" class=\"e-opt-desc\">\n        <EMatchHighlight :text=\"option.description\" :query=\"query\" />\n      </span>\n    </span>\n    <EIcon v-if=\"selected\" name=\"check\" bold />\n  </ComboboxItem>\n</template>\n"],"mappings":""}

package/dist/components/Combobox/EComboboxOption.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
 import e from "../Icon/EIcon.js";
-import t from "./EHighlight.js";
+import t from "./matchHighlight.js";
 import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, unref as u, withCtx as d, withModifiers as f } from "vue";
 import { ComboboxItem as p } from "reka-ui";
 //#region src/components/Combobox/EComboboxOption.vue?vue&type=script&setup=true&lang.ts

package/dist/components/Combobox/EComboboxOption.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"EComboboxOption.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_normalizeClass","_withModifiers","_withCtx","EIcon","_createCommentVNode","_createElementVNode","_createVNode","EHighlight","_createElementBlock","EIcon_default","EHighlight_default","_hoisted_1","_hoisted_2","_hoisted_3","EComboboxOption_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock","unref","ComboboxItem","__props","normalizeClass","_cache","withModifiers","withCtx","createCommentVNode","createElementVNode","createVNode","createElementBlock"],"sources":["../../../src/components/Combobox/EComboboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxItem } from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EHighlight from \"./EHighlight.js\";\nimport type { EOption } from \"../Select/options.js\";\n\ndefineProps<{\n  /** The option to show. */\n  option: EOption;\n  /** What the item carries as its value. */\n  value: string;\n  /** Whether it is chosen: bold, with a check. */\n  selected: boolean;\n  /** The lower-case text people typed; the first match in the label and description is marked. */\n  query: string;\n}>();\n</script>\n\n<template>\n  <ComboboxItem\n    :value=\"value\"\n    :disabled=\"option.disabled\"\n    class=\"e-opt\"\n    :class=\"{ 'e-opt--selected': selected, 'e-opt--disabled': option.disabled }\"\n    @mousedown.prevent\n  >\n    <EIcon v-if=\"option.icon\" :name=\"option.icon\" />\n    <span class=\"e-opt-text\">\n      <span class=\"e-opt-label\"><EHighlight :text=\"option.label\" :query=\"query\" /></span>\n      <span v-if=\"option.description\" class=\"e-opt-desc\">\n        <EHighlight :text=\"option.description\" :query=\"query\" />\n      </span>\n    </span>\n    <EIcon v-if=\"selected\" name=\"check\" bold />\n  </ComboboxItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;E,kBAmBEA,EAAA,GAAAC,EAeeC,EAAAmB,CAAA,GAAA;GAdZ,OAAOC,EAAA;GACP,UAAUA,EAAA,OAAO;GAClB,OAAKnB,EAAA,CAAC,SAAO;IAAA,mBACgBmB,EAAA;IAAQ,mBAAqBA,EAAA,OAAO;GAAQ,CAAA,CAAA;GACxE,aAAS,AAAAE,EAAA,OAAApB,QAAV,CAAA,GAAkB,CAAA,SAAA,CAAA;;GAElB,SAAAC,QAAgD;IAAnCiB,EAAA,OAAO,QAApBtB,EAAA,GAAAC,EAAgDK,GAAA;;KAArB,MAAMgB,EAAA,OAAO;;IACxCd,EAKO,QALPM,GAKO,CAJLN,EAAmF,QAAnFO,GAAmF,CAAzDN,EAAkDP,EAAAQ,CAAA,GAAA;KAArC,MAAMY,EAAA,OAAO;KAAQ,OAAOA,EAAA;I,kCACvDA,EAAA,OAAO,eAAnBtB,EAAA,GAAAW,EAEO,QAFPK,GAEO,CADLP,EAAwDP,EAAAQ,CAAA,GAAA;KAA3C,MAAMY,EAAA,OAAO;KAAc,OAAOA,EAAA;;IAGtCA,EAAA,YAAbtB,EAAA,GAAAC,EAA2CK,GAAA;;KAApB,MAAK;KAAQ,MAAA"}
+{"version":3,"file":"EComboboxOption.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createBlock","_unref","_normalizeClass","_withModifiers","_withCtx","EIcon","_createCommentVNode","_createElementVNode","_createVNode","EMatchHighlight","_createElementBlock","EIcon_default","matchHighlight_default","_hoisted_1","_hoisted_2","_hoisted_3","EComboboxOption_vue_vue_type_script_setup_true_lang_default","openBlock","createBlock","unref","ComboboxItem","__props","normalizeClass","_cache","withModifiers","withCtx","createCommentVNode","createElementVNode","createVNode","createElementBlock"],"sources":["../../../src/components/Combobox/EComboboxOption.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ComboboxItem } from \"reka-ui\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EMatchHighlight from \"./matchHighlight.js\";\nimport type { EOption } from \"../Select/options.js\";\n\ndefineProps<{\n  /** The option to show. */\n  option: EOption;\n  /** What the item carries as its value. */\n  value: string;\n  /** Whether it is chosen: bold, with a check. */\n  selected: boolean;\n  /** The lower-case text people typed; the first match in the label and description is marked. */\n  query: string;\n}>();\n</script>\n\n<template>\n  <ComboboxItem\n    :value=\"value\"\n    :disabled=\"option.disabled\"\n    class=\"e-opt\"\n    :class=\"{ 'e-opt--selected': selected, 'e-opt--disabled': option.disabled }\"\n    @mousedown.prevent\n  >\n    <EIcon v-if=\"option.icon\" :name=\"option.icon\" />\n    <span class=\"e-opt-text\">\n      <span class=\"e-opt-label\"><EMatchHighlight :text=\"option.label\" :query=\"query\" /></span>\n      <span v-if=\"option.description\" class=\"e-opt-desc\">\n        <EMatchHighlight :text=\"option.description\" :query=\"query\" />\n      </span>\n    </span>\n    <EIcon v-if=\"selected\" name=\"check\" bold />\n  </ComboboxItem>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;E,kBAmBEA,EAAA,GAAAC,EAeeC,EAAAmB,CAAA,GAAA;GAdZ,OAAOC,EAAA;GACP,UAAUA,EAAA,OAAO;GAClB,OAAKnB,EAAA,CAAC,SAAO;IAAA,mBACgBmB,EAAA;IAAQ,mBAAqBA,EAAA,OAAO;GAAQ,CAAA,CAAA;GACxE,aAAS,AAAAE,EAAA,OAAApB,QAAV,CAAA,GAAkB,CAAA,SAAA,CAAA;;GAElB,SAAAC,QAAgD;IAAnCiB,EAAA,OAAO,QAApBtB,EAAA,GAAAC,EAAgDK,GAAA;;KAArB,MAAMgB,EAAA,OAAO;;IACxCd,EAKO,QALPM,GAKO,CAJLN,EAAwF,QAAxFO,GAAwF,CAA9DN,EAAuDP,EAAAQ,CAAA,GAAA;KAArC,MAAMY,EAAA,OAAO;KAAQ,OAAOA,EAAA;I,kCAC5DA,EAAA,OAAO,eAAnBtB,EAAA,GAAAW,EAEO,QAFPK,GAEO,CADLP,EAA6DP,EAAAQ,CAAA,GAAA;KAA3C,MAAMY,EAAA,OAAO;KAAc,OAAOA,EAAA;;IAG3CA,EAAA,YAAbtB,EAAA,GAAAC,EAA2CK,GAAA;;KAApB,MAAK;KAAQ,MAAA"}

package/dist/components/Combobox/{EHighlight.js → matchHighlight.js}

@@ -1,7 +1,7 @@
 import { defineComponent as e, h as t } from "vue";
-//#region src/components/Combobox/EHighlight.ts
+//#region src/components/Combobox/matchHighlight.ts
 var n = e({
-	name: "EHighlight",
+	name: "EMatchHighlight",
 	props: {
 		text: {
 			type: String,
@@ -26,4 +26,4 @@ var n = e({
 //#endregion
 export { n as default };
 
-//# sourceMappingURL=EHighlight.js.map
+//# sourceMappingURL=matchHighlight.js.map

package/dist/components/Combobox/matchHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"matchHighlight.js","names":["matchHighlight_default","defineComponent","i","props","h"],"sources":["../../../src/components/Combobox/matchHighlight.ts"],"sourcesContent":["import { defineComponent, h } from \"vue\";\n\nexport default defineComponent({\n  name: \"EMatchHighlight\",\n  props: {\n    text: { type: String, required: true },\n    query: { type: String, required: true },\n  },\n  setup(props) {\n    return () => {\n      const i = props.query ? props.text.toLowerCase().indexOf(props.query) : -1;\n      if (i < 0) return props.text;\n      return [\n        props.text.slice(0, i),\n        h(\"mark\", props.text.slice(i, i + props.query.length)),\n        props.text.slice(i + props.query.length),\n      ];\n    };\n  },\n});\n"],"mappings":";;AAEA,IAAAA,IAAeC,EAAgB;CAC7B,MAAM;CACN,OAAO;EACL,MAAM;GAAE,MAAM;GAAQ,UAAU;EAAK;EACrC,OAAO;GAAE,MAAM;GAAQ,UAAU;EAAK;CACxC;CACA,MAAM,GAAO;EACX,aAAa;GACX,IAAMC,IAAIC,EAAM,QAAQA,EAAM,KAAK,YAAY,CAAC,CAAC,QAAQA,EAAM,KAAK,IAAI;GAExE,OADID,IAAI,IAAUC,EAAM,OACjB;IACLA,EAAM,KAAK,MAAM,GAAGD,CAAC;IACrBE,EAAE,QAAQD,EAAM,KAAK,MAAMD,GAAGA,IAAIC,EAAM,MAAM,MAAM,CAAC;IACrDA,EAAM,KAAK,MAAMD,IAAIC,EAAM,MAAM,MAAM;GACzC;EACF;CACF;AACF,CAAC"}

package/dist/components/Combobox/types.d.ts

@@ -1,31 +1,36 @@
 import { EOption, EOptionInput } from '../Select/options.js';
 import { ELabelProps } from '../Field/labelProps.js';
-/** What ECombobox, EAutocomplete and EMultiSelect take besides their `v-model`. */
+/** What ECombobox takes besides its `v-model`. */
 export type EComboboxProps = ELabelProps & EComboboxFields;
 export interface EComboboxFields {
-    /** Strings, or `{ value, label, description, icon, group, disabled }`. A value is never an empty string. */
+    /** Choose several: `v-model` is a `string[]`, shown as removable tags. The list stays open while choosing, `placeholder` shows only while nothing is chosen, and `name` submits one hidden input per value. */
+    multiple?: boolean;
+    /** Accept any typed text, not only an option: `v-model` is the text and options are suggestions, and choosing one puts its `label` in the field. No Show options button, and the list stays closed when nothing matches. Ignored with `multiple`. */
+    freeform?: boolean;
+    /** Strings, or `{ value, label, description, icon, group, disabled }` as in `ESelect`. A value is never an empty string. */
     options: readonly EOptionInput[];
     /** An example, never the label. */
     placeholder?: string;
     /** Help that stays under the field. */
     hint?: string;
-    /** What to fix. Replaces the hint, marks the input invalid and is announced. */
+    /** What to fix. Replaces the hint, marks the input `aria-invalid` and is announced. */
     error?: string;
-    /** A word beside the label. A chosen value satisfies it. */
+    /** The `required` attribute and a word beside the label. A chosen value satisfies it. */
     required?: boolean;
     /** A word beside the label. Flag whichever is rarer. */
     optional?: boolean;
+    /** Disables the field; a disabled field never opens. */
     disabled?: boolean;
-    /** Submits the value with a form (hidden inputs carry it, one per chosen value). */
+    /** Submits the value with a form, through a hidden input (hidden inputs carry it, one per chosen value). */
     name?: string;
     /** Show the Searching spinner in the list instead of the options, while a server answers. */
     loading?: boolean;
-    /** What the list says when nothing matches. Default "No matches". */
+    /** What the list says when nothing matches. @default "No matches" */
     emptyText?: string;
     /** The clear button, shown when there is something to clear. On by default. */
     clearable?: boolean;
-    /** Replaces the default match (the typed text appears in the label or description). `query` is trimmed and lower case. */
+    /** Replaces the default match (the typed text appears in the label or description). `query` is trimmed and lower case. Return `true` when the server filters. @default label or description contains query */
     filter?: (option: EOption, query: string) => boolean;
-    /** The id of the input; the label points at it. Generated when left out. */
+    /** The id of the input; the label points at it. @default generated */
     id?: string;
 }

package/dist/components/CurrencyField/ECurrencyField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ECurrencyField.js","names":["_sfc_main","ECurrencyField_vue_vue_type_script_setup_true_lang_default","ECurrencyField_default"],"sources":["../../../src/components/CurrencyField/ECurrencyField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport ENumberField from \"../NumberField/ENumberField.vue\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. The symbol is decoration, so say what the amount is for. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** ISO 4217 code for the symbol. Default: the configured currency. */\n  currency?: string;\n  /** BCP 47 tag for the symbol. Default: the configured locale. */\n  locale?: string;\n  /** The lowest value. Default 0, so no negatives. */\n  min?: number;\n  /** The highest value. */\n  max?: number;\n  /** How far a button or arrow key moves the amount. Default 0.01. */\n  step?: number;\n  /** Replaces the currency symbol before the value. */\n  prefix?: string;\n  /** A unit after the value. */\n  suffix?: string;\n  /** The name submitted with a form (the number, or empty). */\n  name?: string;\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the field invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<number | null>({ default: null });\n\nconst config = useConfig();\nconst field = ref<InstanceType<typeof ENumberField> | null>(null);\n\nfunction symbolOf(locale: string, currency: string): string | undefined {\n  try {\n    const parts = new Intl.NumberFormat(locale, { style: \"currency\", currency }).formatToParts(0);\n    return parts.find((p) => p.type === \"currency\")?.value;\n  } catch {\n    return undefined;\n  }\n}\n\nconst symbol = computed(\n  () =>\n    symbolOf(props.locale || config.locale, props.currency || config.currency) ??\n    symbolOf(config.locale, config.currency) ??\n    config.currency,\n);\n\ndefineExpose({\n  input: computed(() => field.value?.input ?? null),\n  focus: () => field.value?.focus(),\n});\n</script>\n\n<template>\n  <ENumberField\n    :id=\"id\"\n    ref=\"field\"\n    v-model=\"model\"\n    class=\"e-currency\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :min=\"min ?? 0\"\n    :max=\"max\"\n    :step=\"step ?? 0.01\"\n    :prefix=\"prefix ?? symbol\"\n    :suffix=\"suffix\"\n    :name=\"name\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n  />\n</template>\n\n<style>\n@layer e.composites {\n  .e-currency .e-input {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"ECurrencyField.js","names":["_sfc_main","ECurrencyField_vue_vue_type_script_setup_true_lang_default","ECurrencyField_default"],"sources":["../../../src/components/CurrencyField/ECurrencyField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport ENumberField from \"../NumberField/ENumberField.vue\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. The symbol is decoration, so say what the amount is for. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** ISO 4217 code. An unknown code falls back to the configured currency's symbol. @default configured currency */\n  currency?: string;\n  /** BCP 47 tag used for the symbol. @default configured locale */\n  locale?: string;\n  /** The lowest value, so no negatives by default. @default 0 */\n  min?: number;\n  /** The highest value. */\n  max?: number;\n  /** The size of one step of the buttons and arrow keys. Decimals shown follow the step. @default 0.01 */\n  step?: number;\n  /** Replaces the currency symbol before the value. */\n  prefix?: string;\n  /** A unit after the value. */\n  suffix?: string;\n  /** The name submitted with a form (the number, or empty). */\n  name?: string;\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the field invalid and is announced. */\n  error?: string;\n  /** The `required` attribute and a word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables the field and its buttons. */\n  disabled?: boolean;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** The amount; round to the cent in code. */\nconst model = defineModel<number | null>({ default: null });\n\nconst config = useConfig();\nconst field = ref<InstanceType<typeof ENumberField> | null>(null);\n\nfunction symbolOf(locale: string, currency: string): string | undefined {\n  try {\n    const parts = new Intl.NumberFormat(locale, { style: \"currency\", currency }).formatToParts(0);\n    return parts.find((p) => p.type === \"currency\")?.value;\n  } catch {\n    return undefined;\n  }\n}\n\nconst symbol = computed(\n  () =>\n    symbolOf(props.locale || config.locale, props.currency || config.currency) ??\n    symbolOf(config.locale, config.currency) ??\n    config.currency,\n);\n\ndefineExpose({\n  input: computed(() => field.value?.input ?? null),\n  focus: () => field.value?.focus(),\n});\n</script>\n\n<template>\n  <ENumberField\n    :id=\"id\"\n    ref=\"field\"\n    v-model=\"model\"\n    class=\"e-currency\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :min=\"min ?? 0\"\n    :max=\"max\"\n    :step=\"step ?? 0.01\"\n    :prefix=\"prefix ?? symbol\"\n    :suffix=\"suffix\"\n    :name=\"name\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n  />\n</template>\n\n<style>\n@layer e.composites {\n  .e-currency .e-input {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/CurrencyField/ECurrencyField.vue.d.ts

@@ -3,15 +3,15 @@ type __VLS_Props = {
     label: string;
     /** Keep the label for screen readers and remove it from the page. */
     hideLabel?: boolean;
-    /** ISO 4217 code for the symbol. Default: the configured currency. */
+    /** ISO 4217 code. An unknown code falls back to the configured currency's symbol. @default configured currency */
     currency?: string;
-    /** BCP 47 tag for the symbol. Default: the configured locale. */
+    /** BCP 47 tag used for the symbol. @default configured locale */
     locale?: string;
-    /** The lowest value. Default 0, so no negatives. */
+    /** The lowest value, so no negatives by default. @default 0 */
     min?: number;
     /** The highest value. */
     max?: number;
-    /** How far a button or arrow key moves the amount. Default 0.01. */
+    /** The size of one step of the buttons and arrow keys. Decimals shown follow the step. @default 0.01 */
     step?: number;
     /** Replaces the currency symbol before the value. */
     prefix?: string;
@@ -23,15 +23,17 @@ type __VLS_Props = {
     hint?: string;
     /** What to fix. Replaces the hint, marks the field invalid and is announced. */
     error?: string;
-    /** A word beside the label. */
+    /** The `required` attribute and a word beside the label. */
     required?: boolean;
     /** A word beside the label. Flag whichever is rarer. */
     optional?: boolean;
+    /** Disables the field and its buttons. */
     disabled?: boolean;
-    /** The id of the input; the label points at it. Generated when left out. */
+    /** The id of the input; the label points at it. @default generated */
     id?: string;
 };
 type __VLS_ModelProps = {
+    /** The amount; round to the cent in code. */
     modelValue?: number | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;

package/dist/components/CurrencyField/ECurrencyField.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"ECurrencyField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","ENumberField","ENumberField_default","ECurrencyField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","config","useConfig","field","ref","symbolOf","locale","p","symbol","computed","openBlock","createBlock","_cache","$event"],"sources":["../../../src/components/CurrencyField/ECurrencyField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport ENumberField from \"../NumberField/ENumberField.vue\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. The symbol is decoration, so say what the amount is for. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** ISO 4217 code for the symbol. Default: the configured currency. */\n  currency?: string;\n  /** BCP 47 tag for the symbol. Default: the configured locale. */\n  locale?: string;\n  /** The lowest value. Default 0, so no negatives. */\n  min?: number;\n  /** The highest value. */\n  max?: number;\n  /** How far a button or arrow key moves the amount. Default 0.01. */\n  step?: number;\n  /** Replaces the currency symbol before the value. */\n  prefix?: string;\n  /** A unit after the value. */\n  suffix?: string;\n  /** The name submitted with a form (the number, or empty). */\n  name?: string;\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the field invalid and is announced. */\n  error?: string;\n  /** A word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  disabled?: boolean;\n  /** The id of the input; the label points at it. Generated when left out. */\n  id?: string;\n}>();\n\nconst model = defineModel<number | null>({ default: null });\n\nconst config = useConfig();\nconst field = ref<InstanceType<typeof ENumberField> | null>(null);\n\nfunction symbolOf(locale: string, currency: string): string | undefined {\n  try {\n    const parts = new Intl.NumberFormat(locale, { style: \"currency\", currency }).formatToParts(0);\n    return parts.find((p) => p.type === \"currency\")?.value;\n  } catch {\n    return undefined;\n  }\n}\n\nconst symbol = computed(\n  () =>\n    symbolOf(props.locale || config.locale, props.currency || config.currency) ??\n    symbolOf(config.locale, config.currency) ??\n    config.currency,\n);\n\ndefineExpose({\n  input: computed(() => field.value?.input ?? null),\n  focus: () => field.value?.focus(),\n});\n</script>\n\n<template>\n  <ENumberField\n    :id=\"id\"\n    ref=\"field\"\n    v-model=\"model\"\n    class=\"e-currency\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :min=\"min ?? 0\"\n    :max=\"max\"\n    :step=\"step ?? 0.01\"\n    :prefix=\"prefix ?? symbol\"\n    :suffix=\"suffix\"\n    :name=\"name\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n  />\n</template>\n\n<style>\n@layer e.composites {\n  .e-currency .e-input {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAMS,IAAQC,GAkCRC,IAAQX,EAA0BU,GAAA,YAAkB,GAEpDG,IAASC,EAAU,GACnBC,IAAQC,EAA8C,IAAI;EAEhE,SAASC,EAAS,GAAgB,GAAsC;GACtE,IAAI;IAEF,OADc,IAAI,KAAK,aAAaC,GAAQ;KAAE,OAAO;KAAY;IAAS,CAAC,CAAC,CAAC,cAAc,CACpF,CAAA,CAAM,MAAM,MAAMC,EAAE,SAAS,UAAU,CAAC,EAAE;GACnD,QAAQ;IACN;GACF;EACF;EAEA,IAAMC,IAASC,QAEXJ,EAASR,EAAM,UAAUI,EAAO,QAAQJ,EAAM,YAAYI,EAAO,QAAQ,KACzEI,EAASJ,EAAO,QAAQA,EAAO,QAAQ,KACvCA,EAAO,QACX;E,OAEAL,EAAa;GACX,OAAOa,QAAeN,EAAM,OAAO,SAAS,IAAI;GAChD,aAAaA,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICd,EAAA,GAAAC,EAkBEC,GAAA;GAjBC,IAAIO,EAAA;GACD,SAAA;GAAJ,KAAIK;GACK,YAAAJ,EAAA;GAAA,uBAAA,AAAAa,EAAA,QAAA,MAAA,EAAK,QAAAC;GACd,OAAM;GACL,OAAOf,EAAA;GACP,cAAYA,EAAA;GACZ,KAAKA,EAAA,OAAG;GACR,KAAKA,EAAA;GACL,MAAMA,EAAA,QAAI;GACV,QAAQA,EAAA,UAAUU,EAAA;GAClB,QAAQV,EAAA;GACR,MAAMA,EAAA;GACN,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,UAAUA,EAAA"}
+{"version":3,"file":"ECurrencyField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","ENumberField","ENumberField_default","ECurrencyField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","config","useConfig","field","ref","symbolOf","locale","p","symbol","computed","openBlock","createBlock","_cache","$event"],"sources":["../../../src/components/CurrencyField/ECurrencyField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from \"vue\";\nimport ENumberField from \"../NumberField/ENumberField.vue\";\nimport { useConfig } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. The symbol is decoration, so say what the amount is for. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** ISO 4217 code. An unknown code falls back to the configured currency's symbol. @default configured currency */\n  currency?: string;\n  /** BCP 47 tag used for the symbol. @default configured locale */\n  locale?: string;\n  /** The lowest value, so no negatives by default. @default 0 */\n  min?: number;\n  /** The highest value. */\n  max?: number;\n  /** The size of one step of the buttons and arrow keys. Decimals shown follow the step. @default 0.01 */\n  step?: number;\n  /** Replaces the currency symbol before the value. */\n  prefix?: string;\n  /** A unit after the value. */\n  suffix?: string;\n  /** The name submitted with a form (the number, or empty). */\n  name?: string;\n  /** Help that stays under the field. */\n  hint?: string;\n  /** What to fix. Replaces the hint, marks the field invalid and is announced. */\n  error?: string;\n  /** The `required` attribute and a word beside the label. */\n  required?: boolean;\n  /** A word beside the label. Flag whichever is rarer. */\n  optional?: boolean;\n  /** Disables the field and its buttons. */\n  disabled?: boolean;\n  /** The id of the input; the label points at it. @default generated */\n  id?: string;\n}>();\n\n/** The amount; round to the cent in code. */\nconst model = defineModel<number | null>({ default: null });\n\nconst config = useConfig();\nconst field = ref<InstanceType<typeof ENumberField> | null>(null);\n\nfunction symbolOf(locale: string, currency: string): string | undefined {\n  try {\n    const parts = new Intl.NumberFormat(locale, { style: \"currency\", currency }).formatToParts(0);\n    return parts.find((p) => p.type === \"currency\")?.value;\n  } catch {\n    return undefined;\n  }\n}\n\nconst symbol = computed(\n  () =>\n    symbolOf(props.locale || config.locale, props.currency || config.currency) ??\n    symbolOf(config.locale, config.currency) ??\n    config.currency,\n);\n\ndefineExpose({\n  input: computed(() => field.value?.input ?? null),\n  focus: () => field.value?.focus(),\n});\n</script>\n\n<template>\n  <ENumberField\n    :id=\"id\"\n    ref=\"field\"\n    v-model=\"model\"\n    class=\"e-currency\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :min=\"min ?? 0\"\n    :max=\"max\"\n    :step=\"step ?? 0.01\"\n    :prefix=\"prefix ?? symbol\"\n    :suffix=\"suffix\"\n    :name=\"name\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n    :disabled=\"disabled\"\n  />\n</template>\n\n<style>\n@layer e.composites {\n  .e-currency .e-input {\n    font-variant-numeric: tabular-nums;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMA,IAAMS,IAAQC,GAoCRC,IAAQX,EAA0BU,GAAA,YAAkB,GAEpDG,IAASC,EAAU,GACnBC,IAAQC,EAA8C,IAAI;EAEhE,SAASC,EAAS,GAAgB,GAAsC;GACtE,IAAI;IAEF,OADc,IAAI,KAAK,aAAaC,GAAQ;KAAE,OAAO;KAAY;IAAS,CAAC,CAAC,CAAC,cAAc,CACpF,CAAA,CAAM,MAAM,MAAMC,EAAE,SAAS,UAAU,CAAC,EAAE;GACnD,QAAQ;IACN;GACF;EACF;EAEA,IAAMC,IAASC,QAEXJ,EAASR,EAAM,UAAUI,EAAO,QAAQJ,EAAM,YAAYI,EAAO,QAAQ,KACzEI,EAASJ,EAAO,QAAQA,EAAO,QAAQ,KACvCA,EAAO,QACX;E,OAEAL,EAAa;GACX,OAAOa,QAAeN,EAAM,OAAO,SAAS,IAAI;GAChD,aAAaA,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICd,EAAA,GAAAC,EAkBEC,GAAA;GAjBC,IAAIO,EAAA;GACD,SAAA;GAAJ,KAAIK;GACK,YAAAJ,EAAA;GAAA,uBAAA,AAAAa,EAAA,QAAA,MAAA,EAAK,QAAAC;GACd,OAAM;GACL,OAAOf,EAAA;GACP,cAAYA,EAAA;GACZ,KAAKA,EAAA,OAAG;GACR,KAAKA,EAAA;GACL,MAAMA,EAAA,QAAI;GACV,QAAQA,EAAA,UAAUU,EAAA;GAClB,QAAQV,EAAA;GACR,MAAMA,EAAA;GACN,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;GACV,UAAUA,EAAA"}