@eos-ui/vue 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,305 @@
+/* empty css                */
+import { useMessages as e, usePortalTarget as t } from "../../config.js";
+import { useFieldAttrs as ee } from "../../composables/useFieldAttrs.js";
+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 i from "./EComboboxOption.js";
+/* 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";
+//#region src/components/Combobox/EComboboxBase.vue?vue&type=script&setup=true&lang.ts
+var be = { class: "e-combo-main" }, xe = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], Se = ["name", "value"], Ce = { class: "e-combo-tail" }, we = ["aria-label"], Te = {
+	class: "e-sr",
+	role: "status"
+}, Ee = ["aria-labelledby"], De = ["id"], Oe = {
+	key: 1,
+	class: "e-opt-status",
+	role: "option",
+	"aria-disabled": "true",
+	"aria-selected": "false"
+}, w = /*@__PURE__*/ p({
+	inheritAttrs: !1,
+	__name: "EComboboxBase",
+	props: /*@__PURE__*/ m({
+		hideLabel: { type: Boolean },
+		ariaLabel: {},
+		label: {},
+		bare: { type: Boolean },
+		options: {},
+		placeholder: {},
+		hint: {},
+		error: {},
+		required: { type: Boolean },
+		optional: { type: Boolean },
+		disabled: { type: Boolean },
+		name: {},
+		loading: { type: Boolean },
+		emptyText: {},
+		clearable: {
+			type: Boolean,
+			default: !0
+		},
+		filter: {},
+		id: {},
+		mode: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {},
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ m(["inputChange"], ["update:modelValue", "update:open"]),
+	setup(p, { expose: m, emit: w }) {
+		let T = p, E = w, D = b(p, "modelValue"), O = e(), ke = t(), k = ee(), A = n(), Ae = n(() => T.id), je = (e, { slots: t }) => oe("div", k.wrapper(), t.default?.({
+			id: Ae.value,
+			ariaInvalid: void 0,
+			ariaDescribedby: void 0
+		})), Me = o(() => T.bare ? {} : {
+			id: T.id,
+			label: T.label,
+			hideLabel: T.hideLabel,
+			hint: T.hint,
+			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);
+		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);
+		x(L, () => {
+			let e = z();
+			e !== B.value && (B.value = e, V.value = !1);
+		}), x(P, () => {
+			!V.value && !K.value && (B.value = z());
+		});
+		let q = g(), J = g(null);
+		de(() => {
+			if (!K.value) return;
+			let e = 0, t = () => {
+				q.value = J.value?.$el?.id || void 0, !q.value && e++ < 10 && requestAnimationFrame(t);
+			};
+			ce(t);
+		});
+		let Y = () => U.value?.$el?.querySelector("input") ?? null, X = () => Y()?.focus();
+		function Z(e) {
+			return M.value ? F.value.includes(e) : (N.value, I.value === e);
+		}
+		let Q = (e) => N.value ? e.label : e.value;
+		function Le(e) {
+			if (V.value = !1, M.value) {
+				D.value = Array.isArray(e) ? e : [], B.value = "", E("inputChange", "");
+				return;
+			}
+			let t = typeof e == "string" ? e : "";
+			D.value = t, B.value = N.value ? t : R(t), E("inputChange", B.value);
+		}
+		function Re(e) {
+			let t = e.target.value;
+			B.value = t, V.value = !0, H.value = !0, E("inputChange", t), N.value && (D.value = t);
+		}
+		function ze(e) {
+			D.value = F.value.filter((t) => t !== e);
+		}
+		function $() {
+			D.value = M.value ? [] : "", B.value = "", V.value = !1, E("inputChange", ""), X();
+		}
+		function Be(e) {
+			e.key === "Escape" && !K.value && B.value ? (e.preventDefault(), $()) : e.key === "Backspace" && M.value && !B.value && F.value.length && ze(F.value[F.value.length - 1]);
+		}
+		function Ve(e) {
+			(e.key === "Home" || e.key === "End") && e.stopImmediatePropagation();
+		}
+		function He(e) {
+			let t = e.relatedTarget;
+			t && (U.value?.$el?.contains(t) || t.closest?.(".e-popover")) || (H.value = !1, V.value = !1, N.value || (B.value = z()));
+		}
+		function Ue(e) {
+			e.target === e.currentTarget && !T.disabled && (e.preventDefault(), X());
+		}
+		function We(e) {
+			return {
+				id: e.id,
+				required: T.required && !(M.value && F.value.length) ? !0 : void 0,
+				placeholder: M.value && F.value.length ? "" : T.placeholder,
+				"aria-invalid": e.ariaInvalid,
+				"aria-label": T.bare ? j.value : void 0,
+				autocomplete: "off",
+				...q.value ? { "aria-controls": q.value } : {},
+				...G.value.length ? {} : { "aria-activedescendant": void 0 },
+				...k.input(e.ariaDescribedby)
+			};
+		}
+		return m({
+			input: o(() => Y()),
+			focus: X
+		}), (e, t) => (h(), s(fe(p.bare ? je : te), ue(ae({
+			...y(k).wrapper(),
+			...Me.value
+		})), {
+			default: S((e) => [f(y(_e), {
+				class: "e-combo-root",
+				"model-value": L.value,
+				multiple: M.value,
+				open: K.value,
+				disabled: p.disabled,
+				"ignore-filter": "",
+				"onUpdate:modelValue": Le,
+				"onUpdate:open": t[3] ||= (e) => H.value = e
+			}, {
+				default: S(() => [
+					f(y(pe), {
+						ref_key: "anchor",
+						ref: U,
+						class: le(["e-input-wrap e-combo", { "e-combo--multi": M.value }]),
+						"data-invalid": p.error && !p.bare ? "" : void 0,
+						"data-disabled": p.disabled ? "" : void 0,
+						onMousedown: Ue,
+						onFocusout: He
+					}, {
+						default: S(() => [
+							u("div", be, [M.value ? (h(!0), l(a, { key: 0 }, _(F.value, (e) => (h(), l("span", {
+								key: e,
+								class: "e-tag"
+							}, [d(v(R(e)) + " ", 1), u("button", {
+								type: "button",
+								class: "e-tag-x",
+								"aria-label": y(O)("removeItem", { label: R(e) }),
+								disabled: p.disabled,
+								onClick: (t) => ze(e)
+							}, [f(r, {
+								name: "x",
+								small: ""
+							})], 8, xe)]))), 128)) : c("", !0), f(y(he), se({
+								class: "e-input e-combo-input",
+								"model-value": B.value,
+								"display-value": (e) => typeof e == "string" ? N.value ? e : R(e) : "",
+								disabled: p.disabled
+							}, We(e), {
+								"onUpdate:modelValue": t[0] ||= (e) => B.value = e,
+								onInput: Re,
+								onKeydown: Be,
+								onKeydownCapture: Ve
+							}), null, 16, [
+								"model-value",
+								"display-value",
+								"disabled"
+							])]),
+							p.name ? (h(!0), l(a, { key: 0 }, _(M.value ? F.value : [I.value], (e, t) => (h(), l("input", {
+								key: t,
+								type: "hidden",
+								name: p.name,
+								value: e
+							}, null, 8, Se))), 128)) : c("", !0),
+							u("div", Ce, [Ie.value && p.clearable && !p.disabled ? (h(), l("button", {
+								key: 0,
+								type: "button",
+								class: "e-combo-btn",
+								"aria-label": y(O)("clear"),
+								onMousedown: t[1] ||= C(() => {}, ["prevent"]),
+								onClick: $
+							}, [f(r, { name: "x" })], 40, we)) : c("", !0), N.value ? c("", !0) : (h(), s(y(ve), {
+								key: 1,
+								class: "e-combo-btn",
+								"aria-label": y(O)("showOptions"),
+								disabled: p.disabled,
+								onMousedown: t[2] ||= C(() => {}, ["prevent"])
+							}, {
+								default: S(() => [f(r, {
+									name: "chevron-down",
+									bold: ""
+								})]),
+								_: 1
+							}, 8, ["aria-label", "disabled"]))])
+						]),
+						_: 2
+					}, 1032, [
+						"class",
+						"data-invalid",
+						"data-disabled"
+					]),
+					u("span", Te, v(Fe.value), 1),
+					f(y(ge), { to: y(ke) }, {
+						default: S(() => [f(y(me), {
+							ref_key: "content",
+							ref: J,
+							position: "popper",
+							align: "start",
+							"side-offset": 6,
+							"collision-padding": 8,
+							class: "e-popover e-listpanel e-root",
+							"aria-label": j.value,
+							"aria-busy": p.loading ? "true" : void 0
+						}, {
+							default: S(() => [f(y(ye), null, {
+								default: S(() => [G.value.length ? (h(!0), l(a, { key: 0 }, _(Ne.value, (e, t) => (h(), l(a, { key: t }, [e.group ? (h(), l("div", {
+									key: 0,
+									class: "e-opt-set",
+									role: "group",
+									"aria-labelledby": `${y(A)}-g${t}`
+								}, [u("div", {
+									id: `${y(A)}-g${t}`,
+									class: "e-opt-group"
+								}, v(e.group), 9, De), (h(!0), l(a, null, _(e.options, (e) => (h(), s(i, {
+									key: e.value,
+									option: e,
+									value: Q(e),
+									selected: Z(Q(e)),
+									query: W.value
+								}, null, 8, [
+									"option",
+									"value",
+									"selected",
+									"query"
+								]))), 128))], 8, Ee)) : (h(!0), l(a, { key: 1 }, _(e.options, (e) => (h(), s(i, {
+									key: e.value,
+									option: e,
+									value: Q(e),
+									selected: Z(Q(e)),
+									query: W.value
+								}, null, 8, [
+									"option",
+									"value",
+									"selected",
+									"query"
+								]))), 128))], 64))), 128)) : (h(), l("div", Oe, [p.loading ? (h(), s(ie, {
+									key: 0,
+									label: y(O)("searching")
+								}, null, 8, ["label"])) : (h(), l(a, { key: 1 }, [d(v(p.emptyText || y(O)("noMatches")), 1)], 64))]))]),
+								_: 1
+							})]),
+							_: 1
+						}, 8, ["aria-label", "aria-busy"])]),
+						_: 1
+					}, 8, ["to"])
+				]),
+				_: 2
+			}, 1032, [
+				"model-value",
+				"multiple",
+				"open",
+				"disabled"
+			])]),
+			_: 1
+		}, 16));
+	}
+});
+//#endregion
+export { w as default };
+
+//# sourceMappingURL=EComboboxBase.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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":"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"}

package/dist/components/Combobox/EComboboxOption.js

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

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,14 @@
+import { EOption } from '../Select/options.js';
+type __VLS_Props = {
+    /** The option to show. */
+    option: EOption;
+    /** What the item carries as its value. */
+    value: string;
+    /** Whether it is chosen: bold, with a check. */
+    selected: boolean;
+    /** The lower-case text people typed; the first match in the label and description is marked. */
+    query: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,56 @@
+import e from "../Icon/EIcon.js";
+import t from "./EHighlight.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
+var m = { class: "e-opt-text" }, h = { class: "e-opt-label" }, g = {
+	key: 0,
+	class: "e-opt-desc"
+}, _ = /*@__PURE__*/ s({
+	__name: "EComboboxOption",
+	props: {
+		option: {},
+		value: {},
+		selected: { type: Boolean },
+		query: {}
+	},
+	setup(s) {
+		return (_, v) => (l(), n(u(p), {
+			value: s.value,
+			disabled: s.option.disabled,
+			class: c(["e-opt", {
+				"e-opt--selected": s.selected,
+				"e-opt--disabled": s.option.disabled
+			}]),
+			onMousedown: v[0] ||= f(() => {}, ["prevent"])
+		}, {
+			default: d(() => [
+				s.option.icon ? (l(), n(e, {
+					key: 0,
+					name: s.option.icon
+				}, null, 8, ["name"])) : r("", !0),
+				a("span", m, [a("span", h, [o(u(t), {
+					text: s.option.label,
+					query: s.query
+				}, null, 8, ["text", "query"])]), s.option.description ? (l(), i("span", g, [o(u(t), {
+					text: s.option.description,
+					query: s.query
+				}, null, 8, ["text", "query"])])) : r("", !0)]),
+				s.selected ? (l(), n(e, {
+					key: 1,
+					name: "check",
+					bold: ""
+				})) : r("", !0)
+			]),
+			_: 1
+		}, 8, [
+			"value",
+			"disabled",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=EComboboxOption.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,22 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    query: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, () => string | (string | import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>)[], {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    query: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/Combobox/EHighlight.js

@@ -0,0 +1,29 @@
+import { defineComponent as e, h as t } from "vue";
+//#region src/components/Combobox/EHighlight.ts
+var n = e({
+	name: "EHighlight",
+	props: {
+		text: {
+			type: String,
+			required: !0
+		},
+		query: {
+			type: String,
+			required: !0
+		}
+	},
+	setup(e) {
+		return () => {
+			let n = e.query ? e.text.toLowerCase().indexOf(e.query) : -1;
+			return n < 0 ? e.text : [
+				e.text.slice(0, n),
+				t("mark", e.text.slice(n, n + e.query.length)),
+				e.text.slice(n + e.query.length)
+			];
+		};
+	}
+});
+//#endregion
+export { n as default };
+
+//# sourceMappingURL=EHighlight.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EHighlight.js","names":["EHighlight_default","defineComponent","i","props","h"],"sources":["../../../src/components/Combobox/EHighlight.ts"],"sourcesContent":["import { defineComponent, h } from \"vue\";\n\nexport default defineComponent({\n  name: \"EHighlight\",\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/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ECombobox } from './ECombobox.vue.js';
+export type { EComboboxProps } from './types.js';

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

@@ -0,0 +1,31 @@
+import { EOption, EOptionInput } from '../Select/options.js';
+import { ELabelProps } from '../Field/labelProps.js';
+/** What ECombobox, EAutocomplete and EMultiSelect take besides their `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. */
+    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. */
+    error?: string;
+    /** A word beside the label. A chosen value satisfies it. */
+    required?: boolean;
+    /** A word beside the label. Flag whichever is rarer. */
+    optional?: boolean;
+    disabled?: boolean;
+    /** Submits the value with a form (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". */
+    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. */
+    filter?: (option: EOption, query: string) => boolean;
+    /** The id of the input; the label points at it. Generated when left out. */
+    id?: string;
+}

package/dist/components/CurrencyField/ECurrencyField.js

@@ -0,0 +1,8 @@
+import e from "./ECurrencyField.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                               */
+//#region src/components/CurrencyField/ECurrencyField.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=ECurrencyField.js.map

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

@@ -0,0 +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":""}

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

@@ -0,0 +1,47 @@
+type __VLS_Props = {
+    /** The visible label, a mono kicker above the field. The symbol is decoration, so say what the amount is for. */
+    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. */
+    currency?: string;
+    /** BCP 47 tag for the symbol. Default: the configured locale. */
+    locale?: string;
+    /** The lowest value. Default 0, so no negatives. */
+    min?: number;
+    /** The highest value. */
+    max?: number;
+    /** How far a button or arrow key moves the amount. Default 0.01. */
+    step?: number;
+    /** Replaces the currency symbol before the value. */
+    prefix?: string;
+    /** A unit after the value. */
+    suffix?: string;
+    /** The name submitted with a form (the number, or empty). */
+    name?: string;
+    /** Help that stays under the field. */
+    hint?: string;
+    /** What to fix. Replaces the hint, marks the field invalid and is announced. */
+    error?: string;
+    /** A word beside the label. */
+    required?: boolean;
+    /** A word beside the label. Flag whichever is rarer. */
+    optional?: boolean;
+    disabled?: boolean;
+    /** The id of the input; the label points at it. Generated when left out. */
+    id?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: number | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    input: import('vue').ComputedRef<HTMLInputElement | null>;
+    focus: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;