@eos-ui/vue 0.0.0-stage → 0.1.1

package/dist/components/NumberField/ENumberField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,155 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import { focusInside as t } from "../../composables/focusInside.js";
+import { useFieldAttrs as n } from "../../composables/useFieldAttrs.js";
+import r from "../Icon/EIcon.js";
+import i from "../Field/EField.js";
+/* empty css                 */
+import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeModels as f, mergeProps as p, normalizeClass as m, openBlock as h, ref as g, toDisplayString as _, unref as v, useModel as y, watch as b, withCtx as x } from "vue";
+//#region src/components/NumberField/ENumberField.vue?vue&type=script&setup=true&lang.ts
+var S = ["data-invalid", "data-disabled"], C = ["aria-label", "disabled"], w = {
+	key: 0,
+	class: "e-affix e-affix--pre e-numfield-first",
+	"aria-hidden": "true"
+}, T = {
+	key: 1,
+	class: "e-affix e-affix--post e-numfield-last",
+	"aria-hidden": "true"
+}, E = ["aria-label", "disabled"], D = ["name", "value"], O = /*@__PURE__*/ d({
+	inheritAttrs: !1,
+	__name: "ENumberField",
+	props: /*@__PURE__*/ f({
+		label: {},
+		hideLabel: { type: Boolean },
+		min: {},
+		max: {},
+		step: {},
+		prefix: {},
+		suffix: {},
+		name: {},
+		hint: {},
+		error: {},
+		required: { type: Boolean },
+		optional: { type: Boolean },
+		disabled: { type: Boolean },
+		id: {}
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(d, { expose: f }) {
+		let O = d, k = y(d, "modelValue"), A = e(), j = n(), M = g(null), N = a(() => O.step || 1), P = a(() => (String(N.value).split(".")[1] || "").length), F = (e) => e == null ? "" : Number(e).toFixed(P.value), I = g(F(k.value));
+		b(k, (e) => I.value = F(e));
+		let L = a(() => k.value == null ? void 0 : Number(k.value));
+		function R(e) {
+			return O.min != null && e < O.min && (e = O.min), O.max != null && e > O.max && (e = O.max), e;
+		}
+		function z(e) {
+			e = R(e), k.value = e, I.value = e.toFixed(P.value);
+		}
+		function B(e, t = 1) {
+			let n = L.value == null ? O.min == null ? 0 : O.min - N.value * +(e > 0) : L.value;
+			z(Math.round((n + e * N.value * t) * 1e6) / 1e6);
+		}
+		function V() {
+			let e = parseFloat(I.value.replace(/,/g, ""));
+			isNaN(e) ? I.value === "" ? k.value = null : I.value = F(k.value) : z(e);
+		}
+		function H(e) {
+			e.key === "ArrowUp" ? (e.preventDefault(), B(1, e.shiftKey ? 10 : 1)) : e.key === "ArrowDown" ? (e.preventDefault(), B(-1, e.shiftKey ? 10 : 1)) : e.key === "Enter" && V();
+		}
+		function U(e) {
+			return {
+				id: e.id,
+				class: [
+					"e-input",
+					"e-numinput",
+					!O.prefix && "e-numfield-first",
+					!O.suffix && "e-numfield-last"
+				],
+				style: { "--e-chars": Math.max(I.value.length, 1) },
+				type: "text",
+				inputmode: "decimal",
+				role: "spinbutton",
+				autocomplete: "off",
+				value: I.value,
+				disabled: O.disabled,
+				required: O.required,
+				"aria-valuenow": L.value,
+				"aria-valuemin": O.min,
+				"aria-valuemax": O.max,
+				"aria-invalid": e.ariaInvalid,
+				...j.input(e.ariaDescribedby)
+			};
+		}
+		return f({
+			input: M,
+			focus: () => M.value?.focus()
+		}), (e, n) => (h(), o(i, p(v(j).wrapper(), {
+			id: d.id,
+			label: d.label,
+			"hide-label": d.hideLabel,
+			hint: d.hint,
+			error: d.error,
+			required: d.required,
+			optional: d.optional
+		}), {
+			default: x((e) => [l("div", {
+				class: m(["e-input-wrap e-numfield", { "e-numfield--affix": d.prefix || d.suffix }]),
+				"data-invalid": d.error ? "" : void 0,
+				"data-disabled": d.disabled ? "" : void 0,
+				onClick: n[3] ||= (...e) => v(t) && v(t)(...e)
+			}, [
+				l("button", {
+					type: "button",
+					class: "e-numbtn",
+					"aria-label": v(A)("decrease"),
+					disabled: d.disabled || d.min != null && L.value != null && L.value <= d.min,
+					onClick: n[0] ||= (e) => B(-1)
+				}, [u(r, {
+					name: "minus",
+					bold: ""
+				})], 8, C),
+				d.prefix ? (h(), c("span", w, _(d.prefix), 1)) : s("", !0),
+				l("input", p({
+					ref_key: "input",
+					ref: M
+				}, U(e), {
+					onInput: n[1] ||= (e) => I.value = e.target.value,
+					onBlur: V,
+					onKeydown: H
+				}), null, 16),
+				d.suffix ? (h(), c("span", T, _(d.suffix), 1)) : s("", !0),
+				l("button", {
+					type: "button",
+					class: "e-numbtn",
+					"aria-label": v(A)("increase"),
+					disabled: d.disabled || d.max != null && L.value != null && L.value >= d.max,
+					onClick: n[2] ||= (e) => B(1)
+				}, [u(r, {
+					name: "plus",
+					bold: ""
+				})], 8, E)
+			], 10, S), d.name ? (h(), c("input", {
+				key: 0,
+				type: "hidden",
+				name: d.name,
+				value: L.value == null ? "" : L.value
+			}, null, 8, D)) : s("", !0)]),
+			_: 1
+		}, 16, [
+			"id",
+			"label",
+			"hide-label",
+			"hint",
+			"error",
+			"required",
+			"optional"
+		]));
+	}
+});
+//#endregion
+export { O as default };
+
+//# sourceMappingURL=ENumberField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/NumberField/ENumberField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ENumberField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","_normalizeClass","_createVNode","EIcon","_createElementBlock","_toDisplayString","_createCommentVNode","EIcon_default","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_hoisted_6","ENumberField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","props","__props","model","useModel","t","useMessages","attrs","useFieldAttrs","input","ref","stepBy","computed","decimals","format","n","text","v","num","clamp","set","bump","base","dir","mult","commit","onKeydown","inputBind","field","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","normalizeClass","_cache","args","focusInside","createVNode","createElementBlock","toDisplayString","createCommentVNode","$event"],"sources":["../../../src/components/NumberField/ENumberField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from \"vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { focusInside } from \"../../composables/focusInside.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = defineProps<{\n  /** The visible label, a mono kicker above the field. */\n  label: string;\n  /** Keep the label for screen readers and remove it from the page. */\n  hideLabel?: boolean;\n  /** The lowest value. The value clamps to it and the decrease button disables there. */\n  min?: number;\n  /** The highest value. The value clamps to it and the increase button disables there. */\n  max?: number;\n  /** How far a button or arrow key moves the value. Decimals shown follow the step. */\n  step?: number;\n  /** A unit before the value. */\n  prefix?: string;\n  /** A unit after the value, such as visits. */\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 t = useMessages();\nconst attrs = useFieldAttrs();\nconst input = ref<HTMLInputElement | null>(null);\n\nconst stepBy = computed(() => props.step || 1);\nconst decimals = computed(() => (String(stepBy.value).split(\".\")[1] || \"\").length);\nconst format = (n: number | null | undefined) => (n == null ? \"\" : Number(n).toFixed(decimals.value));\nconst text = ref(format(model.value));\nwatch(model, (v) => (text.value = format(v)));\n\nconst num = computed(() => (model.value == null ? undefined : Number(model.value)));\n\nfunction clamp(n: number): number {\n  if (props.min != null && n < props.min) n = props.min;\n  if (props.max != null && n > props.max) n = props.max;\n  return n;\n}\nfunction set(n: number) {\n  n = clamp(n);\n  model.value = n;\n  text.value = n.toFixed(decimals.value);\n}\nfunction bump(dir: 1 | -1, mult = 1) {\n  const base = num.value == null ? (props.min != null ? props.min - stepBy.value * (dir > 0 ? 1 : 0) : 0) : num.value;\n  set(Math.round((base + dir * stepBy.value * mult) * 1e6) / 1e6);\n}\nfunction commit() {\n  const n = parseFloat(text.value.replace(/,/g, \"\"));\n  if (isNaN(n)) {\n    if (text.value === \"\") model.value = null;\n    else text.value = format(model.value);\n  } else set(n);\n}\nfunction onKeydown(e: KeyboardEvent) {\n  if (e.key === \"ArrowUp\") {\n    e.preventDefault();\n    bump(1, e.shiftKey ? 10 : 1);\n  } else if (e.key === \"ArrowDown\") {\n    e.preventDefault();\n    bump(-1, e.shiftKey ? 10 : 1);\n  } else if (e.key === \"Enter\") commit();\n}\n\nfunction inputBind(field: { id: string; ariaInvalid: \"true\" | undefined; ariaDescribedby: string | undefined }) {\n  return {\n    id: field.id,\n    class: [\"e-input\", \"e-numinput\", !props.prefix && \"e-numfield-first\", !props.suffix && \"e-numfield-last\"],\n    style: { \"--e-chars\": Math.max(text.value.length, 1) },\n    type: \"text\" as const,\n    inputmode: \"decimal\" as const,\n    role: \"spinbutton\",\n    autocomplete: \"off\",\n    value: text.value,\n    disabled: props.disabled,\n    required: props.required,\n    \"aria-valuenow\": num.value,\n    \"aria-valuemin\": props.min,\n    \"aria-valuemax\": props.max,\n    \"aria-invalid\": field.ariaInvalid,\n    ...attrs.input(field.ariaDescribedby),\n  };\n}\n\ndefineExpose({\n  input,\n  focus: () => input.value?.focus(),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <div\n        class=\"e-input-wrap e-numfield\"\n        :class=\"{ 'e-numfield--affix': prefix || suffix }\"\n        :data-invalid=\"error ? '' : undefined\"\n        :data-disabled=\"disabled ? '' : undefined\"\n        @click=\"focusInside\"\n      >\n        <button\n          type=\"button\"\n          class=\"e-numbtn\"\n          :aria-label=\"t('decrease')\"\n          :disabled=\"disabled || (min != null && num != null && num <= min)\"\n          @click=\"bump(-1)\"\n        >\n          <EIcon name=\"minus\" bold />\n        </button>\n        <span v-if=\"prefix\" class=\"e-affix e-affix--pre e-numfield-first\" aria-hidden=\"true\">{{ prefix }}</span>\n        <input\n          ref=\"input\"\n          v-bind=\"inputBind(field)\"\n          @input=\"text = ($event.target as HTMLInputElement).value\"\n          @blur=\"commit\"\n          @keydown=\"onKeydown\"\n        />\n        <span v-if=\"suffix\" class=\"e-affix e-affix--post e-numfield-last\" aria-hidden=\"true\">{{ suffix }}</span>\n        <button\n          type=\"button\"\n          class=\"e-numbtn\"\n          :aria-label=\"t('increase')\"\n          :disabled=\"disabled || (max != null && num != null && num >= max)\"\n          @click=\"bump(1)\"\n        >\n          <EIcon name=\"plus\" bold />\n        </button>\n      </div>\n      <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"num == null ? '' : num\" />\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-numfield {\n    align-items: stretch;\n    container-type: inline-size;\n  }\n\n  .e-numfield .e-numinput {\n    text-align: center;\n    font: 500 var(--e-text-md)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    height: auto;\n    padding-inline: var(--e-space-2);\n  }\n\n  .e-numbtn {\n    display: inline-grid;\n    place-items: center;\n    flex: none;\n    width: var(--e-control-height);\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: var(--e-ink);\n    cursor: pointer;\n    transition: background-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-numbtn:first-child {\n    border-inline-end: var(--e-stroke-hair) solid var(--e-border-strong);\n    border-start-start-radius: var(--e-radius-md);\n    border-end-start-radius: var(--e-radius-md);\n  }\n\n  .e-numbtn:last-child {\n    border-inline-start: var(--e-stroke-hair) solid var(--e-border-strong);\n    border-start-end-radius: var(--e-radius-md);\n    border-end-end-radius: var(--e-radius-md);\n  }\n\n  .e-numbtn:hover:not(:disabled) {\n    background: var(--e-wash-hover);\n  }\n\n  .e-numbtn:active:not(:disabled) {\n    background: var(--e-wash-press);\n  }\n\n  .e-numbtn:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: -3px;\n  }\n\n  .e-numbtn:disabled {\n    color: var(--e-muted);\n    cursor: not-allowed;\n    background: transparent;\n  }\n\n  .e-numfield--affix .e-numinput {\n    flex: none;\n    width: calc(var(--e-chars) * 1ch);\n    padding-inline: 0;\n    text-align: start;\n  }\n\n  .e-numfield--affix .e-affix--pre {\n    padding-inline: 0 var(--e-space-1);\n  }\n\n  .e-numfield--affix .e-affix--post {\n    padding-inline: var(--e-space-1) 0;\n  }\n\n  .e-numfield--affix .e-numfield-first {\n    margin-inline-start: auto;\n  }\n\n  .e-numfield--affix .e-numfield-last {\n    margin-inline-end: auto;\n  }\n\n  @container (max-width: 10rem) {\n    .e-numbtn {\n      display: none;\n    }\n\n    .e-numfield .e-numinput {\n      text-align: start;\n      padding-inline: var(--e-space-3);\n    }\n  }\n\n  @container (max-width: 13rem) {\n    .e-numfield--affix .e-numbtn {\n      display: none;\n    }\n\n    .e-numfield--affix .e-numfield-first {\n      margin-inline-start: var(--e-space-3);\n    }\n\n    .e-numfield--affix .e-numfield-last {\n      margin-inline-end: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-numbtn {\n      transition: none;\n    }\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYA,IAAM0B,IAAQC,GA8BRC,IAAQ5B,EAA0B2B,GAAA,YAAkB,GAEpDG,IAAIC,EAAY,GAChBC,IAAQC,EAAc,GACtBC,IAAQC,EAA6B,IAAI,GAEzCC,IAASC,QAAeX,EAAM,QAAQ,CAAC,GACvCY,IAAWD,SAAgB,OAAOD,EAAO,KAAK,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,GAAA,CAAI,MAAM,GAC3EG,KAAU,MAAkCC,KAAK,OAAO,KAAK,OAAOA,CAAC,CAAC,CAAC,QAAQF,EAAS,KAAK,GAC7FG,IAAON,EAAII,EAAOX,EAAM,KAAK,CAAC;EACpC,EAAMA,IAAQ,MAAO,EAAK,QAAQW,EAAOG,CAAC,CAAE;EAE5C,IAAMC,IAAMN,QAAgBT,EAAM,SAAS,OAAO,KAAA,IAAY,OAAOA,EAAM,KAAK,CAAE;EAElF,SAASgB,EAAM,GAAmB;GAGhC,OAFIlB,EAAM,OAAO,QAAQc,IAAId,EAAM,QAAK,IAAIA,EAAM,MAC9CA,EAAM,OAAO,QAAQc,IAAId,EAAM,QAAK,IAAIA,EAAM,MAC3Cc;EACT;EACA,SAASK,EAAI,GAAW;GAGtB,AAFA,IAAID,EAAMJ,CAAC,GACX,EAAM,QAAQA,GACd,EAAK,QAAQA,EAAE,QAAQF,EAAS,KAAK;EACvC;EACA,SAASQ,EAAK,GAAa,IAAO,GAAG;GACnC,IAAMC,IAAOJ,EAAI,SAAS,OAAQjB,EAAM,OAAO,OAAsD,IAA/CA,EAAM,MAAMU,EAAO,QAAS,MAAM,KAAkBO,EAAI;GAC9G,EAAI,KAAK,OAAOI,IAAOC,IAAMZ,EAAO,QAAQa,KAAQ,GAAG,IAAI,GAAG;EAChE;EACA,SAASC,IAAS;GAChB,IAAMV,IAAI,WAAWC,EAAK,MAAM,QAAQ,MAAM,EAAE,CAAC;GACjD,AAAI,MAAMD,CAAC,IACLC,EAAK,UAAU,KAAI,EAAM,QAAQ,OAChC,EAAK,QAAQF,EAAOX,EAAM,KAAK,IAC/BiB,EAAIL,CAAC;EACd;EACA,SAASW,EAAU,GAAkB;GACnC,AAAI,EAAE,QAAQ,aACZ,EAAE,eAAe,GACjBL,EAAK,GAAG,EAAE,WAAW,KAAK,CAAC,KAClB,EAAE,QAAQ,eACnB,EAAE,eAAe,GACjBA,EAAK,IAAI,EAAE,WAAW,KAAK,CAAC,KACnB,EAAE,QAAQ,WAASI,EAAO;EACvC;EAEA,SAASE,EAAU,GAA6F;GAC9G,OAAO;IACL,IAAIC,EAAM;IACV,OAAO;KAAC;KAAW;KAAc,CAAC3B,EAAM,UAAU;KAAoB,CAACA,EAAM,UAAU;IAAiB;IACxG,OAAO,EAAE,aAAa,KAAK,IAAIe,EAAK,MAAM,QAAQ,CAAC,EAAE;IACrD,MAAM;IACN,WAAW;IACX,MAAM;IACN,cAAc;IACd,OAAOA,EAAK;IACZ,UAAUf,EAAM;IAChB,UAAUA,EAAM;IAChB,iBAAiBiB,EAAI;IACrB,iBAAiBjB,EAAM;IACvB,iBAAiBA,EAAM;IACvB,gBAAgB2B,EAAM;IACtB,GAAGrB,EAAM,MAAMqB,EAAM,eAAe;GACtC;EACF;E,OAEA5B,EAAa;GACX;GACA,aAAaS,EAAM,OAAO,MAAM;EAClC,CAAC,I,UAICjC,EAAA,GAAAC,EAiDSC,GAjDTC,EACUC,EAgDD2B,CAAA,CAhDM,CAAC,QAAO,GAAA;GACpB,IAAIL,EAAA;GACJ,OAAOA,EAAA;GACP,cAAYA,EAAA;GACZ,MAAMA,EAAA;GACN,OAAOA,EAAA;GACP,UAAUA,EAAA;GACV,UAAUA,EAAA;;GAEA,SAAOrB,GAAE,MAAK,CAEvBC,EAkCM,OAAA;IAjCJ,OAAKC,EAAA,CAAC,2BAAyB,EAAA,qBACAmB,EAAA,UAAUA,EAAA,OAAM,CAAA,CAAA;IAC9C,gBAAcA,EAAA,QAAK,KAAQ,KAAA;IAC3B,iBAAeA,EAAA,WAAQ,KAAQ,KAAA;IAC/B,SAAK,AAAAkC,EAAA,QAAE,GAAAC,MAAAzD,EAAA0D,CAAA,KAAA1D,EAAA0D,CAAA,CAAA,CAAA,GAAAD,CAAA;;IAERvD,EAQS,UAAA;KAPP,MAAK;KACL,OAAM;KACL,cAAYF,EAAAyB,CAAA,CAAC,CAAA,UAAA;KACb,UAAUH,EAAA,YAAaA,EAAA,OAAG,QAAYgB,EAAA,SAAG,QAAYA,EAAA,SAAOhB,EAAA;KAC5D,SAAK,AAAAkC,EAAA,QAAA,MAAEf,EAAI,EAAA;I,IAEZrC,EAA2BC,GAAA;KAApB,MAAK;KAAQ,MAAA;;IAEViB,EAAA,UAAZ1B,EAAA,GAAAU,EAAwG,QAAxGO,GAAwGN,EAAhBe,EAAA,MAAM,GAAA,CAAA,K;IAC9FpB,EAME,SANFH,EAME;KALI,SAAA;KAAJ,KAAI8B;IACI,GAAAkB,EAAUC,CAAK,GAAA;KACtB,SAAK,AAAAQ,EAAA,QAAA,MAAE,EAAA,QAAQO,EAAO,OAA4B;KAClD,QAAMlB;KACG;;IAEAvB,EAAA,UAAZ1B,EAAA,GAAAU,EAAwG,QAAxGQ,GAAwGP,EAAhBe,EAAA,MAAM,GAAA,CAAA,K;IAC9FpB,EAQS,UAAA;KAPP,MAAK;KACL,OAAM;KACL,cAAYF,EAAAyB,CAAA,CAAC,CAAA,UAAA;KACb,UAAUH,EAAA,YAAaA,EAAA,OAAG,QAAYgB,EAAA,SAAG,QAAYA,EAAA,SAAOhB,EAAA;KAC5D,SAAK,AAAAkC,EAAA,QAAA,MAAEf,EAAI,CAAA;I,IAEZrC,EAA0BC,GAAA;KAAnB,MAAK;KAAO,MAAA;;G,WAGViB,EAAA,QAAb1B,EAAA,GAAAU,EAAgF,SAAA;;IAA7D,MAAK;IAAU,MAAMgB,EAAA;IAAO,OAAOgB,EAAA,SAAG,OAAA,KAAgBA,EAAA"}

package/dist/components/NumberField/index.d.ts

@@ -0,0 +1 @@
+export { default as ENumberField } from './ENumberField.vue.js';

package/dist/components/OtpField/EOtpField.js

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

package/dist/components/OtpField/EOtpField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EOtpField.js","names":["_sfc_main","EOtpField_vue_vue_type_script_setup_true_lang_default","EOtpField_default"],"sources":["../../../src/components/OtpField/EOtpField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, watch } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n  defineProps<{\n    /** The visible label. \"Verification code\" when left out. */\n    label?: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** How many characters. */\n    length?: number;\n    /** `numeric` opens the number pad; `text` takes letters and digits. */\n    type?: \"numeric\" | \"text\";\n    /** A gap between groups: 6 with 3 reads 123 456. */\n    groupSize?: number;\n    /** The name submitted with a form (the whole code). */\n    name?: string;\n    /** Start in the first empty box. */\n    autoFocus?: boolean;\n    /** Help under the boxes, read with each box. */\n    hint?: string;\n    /** What to fix. Replaces the hint and is announced. */\n    error?: string;\n    /** A word beside the label, and the `required` attribute on every box. */\n    required?: boolean;\n    /** A word beside the label. Flag whichever is rarer. */\n    optional?: boolean;\n    disabled?: boolean;\n    /** The id of the first box; the label and hint ids are built from it. Generated when left out. */\n    id?: string;\n  }>(),\n  { length: 6, type: \"numeric\", groupSize: 0 },\n);\n\nconst emit = defineEmits<{\n  /** Once, when the last box fills. */\n  complete: [code: string];\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst numeric = computed(() => props.type !== \"text\");\nconst refs: (HTMLInputElement | null)[] = [];\n\nfunction clean(s: unknown): string {\n  const text = String(s ?? \"\");\n  return (numeric.value ? text.replace(/\\D/g, \"\") : text.replace(/[^a-z0-9]/gi, \"\").toUpperCase()).slice(\n    0,\n    props.length,\n  );\n}\nconst value = computed(() => clean(model.value));\n\nlet live = value.value;\nwatch(value, (v) => (live = v), { flush: \"sync\" });\n\nfunction commit(next: string) {\n  next = clean(next);\n  const prev = live;\n  live = next;\n  model.value = next;\n  if (next.length === props.length && prev !== next) emit(\"complete\", next);\n}\nfunction focusAt(i: number) {\n  refs[Math.max(0, Math.min(props.length - 1, i))]?.focus();\n}\nconst without = (v: string, i: number) => v.slice(0, i) + v.slice(i + 1);\nfunction put(i: number, text: string) {\n  const chars = clean(text);\n  if (!chars) return;\n  const from = chars.length >= props.length ? 0 : Math.min(i, live.length);\n  commit(live.slice(0, from) + chars);\n  focusAt(from + chars.length);\n}\nfunction onInput(i: number, e: Event) {\n  const target = e.target as HTMLInputElement;\n  const v = live;\n  let raw = target.value;\n  if (!raw) {\n    commit(without(v, i));\n    return;\n  }\n  if (v[i] && raw.length === 2) {\n    const k = raw.indexOf(v[i]!);\n    raw = k >= 0 ? without(raw, k) : raw.charAt(1);\n  }\n  const chars = clean(raw);\n  if (!chars) {\n    target.value = live[i] ?? \"\";\n    return;\n  }\n  if (chars.length === 1 && i < v.length) {\n    commit(v.slice(0, i) + chars + v.slice(i + 1));\n    focusAt(i + 1);\n  } else put(i, chars);\n  target.value = live[i] ?? \"\";\n}\nfunction onKey(i: number, e: KeyboardEvent) {\n  const v = live;\n  const k = e.key;\n  if (k === \"Backspace\") {\n    e.preventDefault();\n    if (v[i]) {\n      commit(without(v, i));\n      focusAt(i);\n    } else if (i > 0) {\n      commit(without(v, i - 1));\n      focusAt(i - 1);\n    }\n  } else if (k === \"Delete\") {\n    e.preventDefault();\n    commit(without(v, i));\n  } else if (k === \"ArrowLeft\") {\n    e.preventDefault();\n    focusAt(i - 1);\n  } else if (k === \"ArrowRight\") {\n    e.preventDefault();\n    focusAt(Math.min(i + 1, v.length));\n  } else if (k === \"Home\") {\n    e.preventDefault();\n    focusAt(0);\n  } else if (k === \"End\") {\n    e.preventDefault();\n    focusAt(v.length);\n  }\n}\nfunction onFocus(i: number) {\n  if (i > live.length) focusAt(live.length);\n}\nfunction onPaste(i: number, e: ClipboardEvent) {\n  e.preventDefault();\n  put(i, e.clipboardData?.getData(\"text\") ?? \"\");\n}\n\nonMounted(() => {\n  if (props.autoFocus) focusAt(live.length);\n});\n\ndefineExpose({\n  focus: () => focusAt(live.length),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label || t('verificationCode')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <div role=\"group\" :aria-labelledby=\"`${field.id}-label`\" class=\"e-otp\" v-bind=\"attrs.input()\">\n        <template v-for=\"i in length\" :key=\"i\">\n          <span v-if=\"groupSize && i > 1 && (i - 1) % groupSize === 0\" class=\"e-otp-sep\" aria-hidden=\"true\" />\n          <input\n            :id=\"i === 1 ? field.id : undefined\"\n            :ref=\"(el) => (refs[i - 1] = el as HTMLInputElement | null)\"\n            class=\"e-input e-otp-box\"\n            type=\"text\"\n            :inputmode=\"numeric ? 'numeric' : 'text'\"\n            :autocomplete=\"i === 1 ? 'one-time-code' : 'off'\"\n            autocapitalize=\"characters\"\n            :spellcheck=\"false\"\n            :value=\"value[i - 1] || ''\"\n            :disabled=\"disabled\"\n            :required=\"required\"\n            :data-filled=\"value[i - 1] ? '' : undefined\"\n            :aria-label=\"t(numeric ? 'otpDigit' : 'otpChar', { n: i, total: length })\"\n            :aria-invalid=\"field.ariaInvalid\"\n            :aria-describedby=\"field.ariaDescribedby\"\n            @input=\"onInput(i - 1, $event)\"\n            @keydown=\"onKey(i - 1, $event)\"\n            @focus=\"onFocus(i - 1)\"\n            @paste=\"onPaste(i - 1, $event)\"\n          />\n        </template>\n        <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"value\" />\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-otp {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    max-width: 100%;\n  }\n\n  .e-otp-sep {\n    flex: none;\n    width: var(--e-space-3);\n  }\n\n  .e-otp .e-otp-box {\n    flex: 1 1 0;\n    width: 0;\n    min-width: 30px;\n    max-width: var(--e-control-height);\n    padding: 0;\n    text-align: center;\n    font: 500 var(--e-text-xl)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    text-transform: uppercase;\n    caret-color: var(--e-primary);\n  }\n\n  /* stylelint-disable-next-line selector-not-notation */\n  .e-otp .e-otp-box[data-filled]:not(:focus):not([aria-invalid=\"true\"]) {\n    border-color: var(--e-ink);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/OtpField/EOtpField.vue.d.ts

@@ -0,0 +1,46 @@
+type __VLS_Props = {
+    /** The visible label. "Verification code" when left out. */
+    label?: string;
+    /** Keep the label for screen readers and remove it from the page. */
+    hideLabel?: boolean;
+    /** How many characters. */
+    length?: number;
+    /** `numeric` opens the number pad; `text` takes letters and digits. */
+    type?: "numeric" | "text";
+    /** A gap between groups: 6 with 3 reads 123 456. */
+    groupSize?: number;
+    /** The name submitted with a form (the whole code). */
+    name?: string;
+    /** Start in the first empty box. */
+    autoFocus?: boolean;
+    /** Help under the boxes, read with each box. */
+    hint?: string;
+    /** What to fix. Replaces the hint and is announced. */
+    error?: string;
+    /** A word beside the label, and the `required` attribute on every box. */
+    required?: boolean;
+    /** A word beside the label. Flag whichever is rarer. */
+    optional?: boolean;
+    disabled?: boolean;
+    /** The id of the first box; the label and hint ids are built from it. Generated when left out. */
+    id?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
+    focus: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    complete: (code: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onComplete?: ((code: string) => any) | undefined;
+}>, {
+    length: number;
+    type: "text" | "numeric";
+    groupSize: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/OtpField/EOtpField.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,155 @@
+/* empty css                */
+import { useMessages as e } from "../../config.js";
+import { useFieldAttrs as t } from "../../composables/useFieldAttrs.js";
+import n from "../Field/EField.js";
+/* empty css                 */
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, mergeModels as u, mergeProps as d, onMounted as f, openBlock as p, renderList as m, unref as h, useModel as g, watch as _, withCtx as v } from "vue";
+//#region src/components/OtpField/EOtpField.vue?vue&type=script&setup=true&lang.ts
+var y = ["aria-labelledby"], b = {
+	key: 0,
+	class: "e-otp-sep",
+	"aria-hidden": "true"
+}, x = [
+	"id",
+	"inputmode",
+	"autocomplete",
+	"value",
+	"disabled",
+	"required",
+	"data-filled",
+	"aria-label",
+	"aria-invalid",
+	"aria-describedby",
+	"onInput",
+	"onKeydown",
+	"onFocus",
+	"onPaste"
+], S = ["name", "value"], C = /*@__PURE__*/ l({
+	inheritAttrs: !1,
+	__name: "EOtpField",
+	props: /*@__PURE__*/ u({
+		label: {},
+		hideLabel: { type: Boolean },
+		length: { default: 6 },
+		type: { default: "numeric" },
+		groupSize: { default: 0 },
+		name: {},
+		autoFocus: { type: Boolean },
+		hint: {},
+		error: {},
+		required: { type: Boolean },
+		optional: { type: Boolean },
+		disabled: { type: Boolean },
+		id: {}
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ u(["complete"], ["update:modelValue"]),
+	setup(l, { expose: u, emit: C }) {
+		let w = l, T = C, E = g(l, "modelValue"), D = e(), O = t(), k = i(() => w.type !== "text"), A = [];
+		function j(e) {
+			let t = String(e ?? "");
+			return (k.value ? t.replace(/\D/g, "") : t.replace(/[^a-z0-9]/gi, "").toUpperCase()).slice(0, w.length);
+		}
+		let M = i(() => j(E.value)), N = M.value;
+		_(M, (e) => N = e, { flush: "sync" });
+		function P(e) {
+			e = j(e);
+			let t = N;
+			N = e, E.value = e, e.length === w.length && t !== e && T("complete", e);
+		}
+		function F(e) {
+			A[Math.max(0, Math.min(w.length - 1, e))]?.focus();
+		}
+		let I = (e, t) => e.slice(0, t) + e.slice(t + 1);
+		function L(e, t) {
+			let n = j(t);
+			if (!n) return;
+			let r = n.length >= w.length ? 0 : Math.min(e, N.length);
+			P(N.slice(0, r) + n), F(r + n.length);
+		}
+		function R(e, t) {
+			let n = t.target, r = N, i = n.value;
+			if (!i) {
+				P(I(r, e));
+				return;
+			}
+			if (r[e] && i.length === 2) {
+				let t = i.indexOf(r[e]);
+				i = t >= 0 ? I(i, t) : i.charAt(1);
+			}
+			let a = j(i);
+			a && (a.length === 1 && e < r.length ? (P(r.slice(0, e) + a + r.slice(e + 1)), F(e + 1)) : L(e, a)), n.value = N[e] ?? "";
+		}
+		function z(e, t) {
+			let n = N, r = t.key;
+			r === "Backspace" ? (t.preventDefault(), n[e] ? (P(I(n, e)), F(e)) : e > 0 && (P(I(n, e - 1)), F(e - 1))) : r === "Delete" ? (t.preventDefault(), P(I(n, e))) : r === "ArrowLeft" ? (t.preventDefault(), F(e - 1)) : r === "ArrowRight" ? (t.preventDefault(), F(Math.min(e + 1, n.length))) : r === "Home" ? (t.preventDefault(), F(0)) : r === "End" && (t.preventDefault(), F(n.length));
+		}
+		function B(e) {
+			e > N.length && F(N.length);
+		}
+		function V(e, t) {
+			t.preventDefault(), L(e, t.clipboardData?.getData("text") ?? "");
+		}
+		return f(() => {
+			w.autoFocus && F(N.length);
+		}), u({ focus: () => F(N.length) }), (e, t) => (p(), a(n, d(h(O).wrapper(), {
+			id: l.id,
+			label: l.label || h(D)("verificationCode"),
+			"hide-label": l.hideLabel,
+			hint: l.hint,
+			error: l.error,
+			required: l.required,
+			optional: l.optional
+		}), {
+			default: v((e) => [c("div", d({
+				role: "group",
+				"aria-labelledby": `${e.id}-label`,
+				class: "e-otp"
+			}, h(O).input()), [(p(!0), s(r, null, m(l.length, (t) => (p(), s(r, { key: t }, [l.groupSize && t > 1 && (t - 1) % l.groupSize == 0 ? (p(), s("span", b)) : o("", !0), c("input", {
+				id: t === 1 ? e.id : void 0,
+				ref_for: !0,
+				ref: (e) => A[t - 1] = e,
+				class: "e-input e-otp-box",
+				type: "text",
+				inputmode: k.value ? "numeric" : "text",
+				autocomplete: t === 1 ? "one-time-code" : "off",
+				autocapitalize: "characters",
+				spellcheck: !1,
+				value: M.value[t - 1] || "",
+				disabled: l.disabled,
+				required: l.required,
+				"data-filled": M.value[t - 1] ? "" : void 0,
+				"aria-label": h(D)(k.value ? "otpDigit" : "otpChar", {
+					n: t,
+					total: l.length
+				}),
+				"aria-invalid": e.ariaInvalid,
+				"aria-describedby": e.ariaDescribedby,
+				onInput: (e) => R(t - 1, e),
+				onKeydown: (e) => z(t - 1, e),
+				onFocus: (e) => B(t - 1),
+				onPaste: (e) => V(t - 1, e)
+			}, null, 40, x)], 64))), 128)), l.name ? (p(), s("input", {
+				key: 0,
+				type: "hidden",
+				name: l.name,
+				value: M.value
+			}, null, 8, S)) : o("", !0)], 16, y)]),
+			_: 1
+		}, 16, [
+			"id",
+			"label",
+			"hide-label",
+			"hint",
+			"error",
+			"required",
+			"optional"
+		]));
+	}
+});
+//#endregion
+export { C as default };
+
+//# sourceMappingURL=EOtpField.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/OtpField/EOtpField.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EOtpField.vue_vue_type_script_setup_true_lang.js","names":["_useModel","_openBlock","_createBlock","EField","_mergeProps","_unref","_withCtx","_createElementVNode","_createElementBlock","_Fragment","_renderList","_createCommentVNode","EField_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","EOtpField_vue_vue_type_script_setup_true_lang_default","\"modelValue\"","\"modelModifiers\"","__expose","__emit","props","__props","emit","model","useModel","t","useMessages","attrs","useFieldAttrs","numeric","computed","refs","clean","text","s","value","live","v","commit","next","prev","focusAt","i","without","put","chars","from","onInput","target","e","raw","k","onKey","onFocus","onPaste","onMounted","openBlock","createBlock","mergeProps","unref","withCtx","createElementVNode","field","createElementBlock","Fragment","renderList","createCommentVNode","el","$event"],"sources":["../../../src/components/OtpField/EOtpField.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, watch } from \"vue\";\nimport EField from \"../Field/EField.vue\";\nimport { useMessages } from \"../../config.js\";\nimport { useFieldAttrs } from \"../../composables/useFieldAttrs.js\";\nimport \"../../styles/base.css\";\nimport \"../TextField/input.css\";\n\ndefineOptions({ inheritAttrs: false });\n\nconst props = withDefaults(\n  defineProps<{\n    /** The visible label. \"Verification code\" when left out. */\n    label?: string;\n    /** Keep the label for screen readers and remove it from the page. */\n    hideLabel?: boolean;\n    /** How many characters. */\n    length?: number;\n    /** `numeric` opens the number pad; `text` takes letters and digits. */\n    type?: \"numeric\" | \"text\";\n    /** A gap between groups: 6 with 3 reads 123 456. */\n    groupSize?: number;\n    /** The name submitted with a form (the whole code). */\n    name?: string;\n    /** Start in the first empty box. */\n    autoFocus?: boolean;\n    /** Help under the boxes, read with each box. */\n    hint?: string;\n    /** What to fix. Replaces the hint and is announced. */\n    error?: string;\n    /** A word beside the label, and the `required` attribute on every box. */\n    required?: boolean;\n    /** A word beside the label. Flag whichever is rarer. */\n    optional?: boolean;\n    disabled?: boolean;\n    /** The id of the first box; the label and hint ids are built from it. Generated when left out. */\n    id?: string;\n  }>(),\n  { length: 6, type: \"numeric\", groupSize: 0 },\n);\n\nconst emit = defineEmits<{\n  /** Once, when the last box fills. */\n  complete: [code: string];\n}>();\n\nconst model = defineModel<string>({ default: \"\" });\n\nconst t = useMessages();\nconst attrs = useFieldAttrs();\nconst numeric = computed(() => props.type !== \"text\");\nconst refs: (HTMLInputElement | null)[] = [];\n\nfunction clean(s: unknown): string {\n  const text = String(s ?? \"\");\n  return (numeric.value ? text.replace(/\\D/g, \"\") : text.replace(/[^a-z0-9]/gi, \"\").toUpperCase()).slice(\n    0,\n    props.length,\n  );\n}\nconst value = computed(() => clean(model.value));\n\nlet live = value.value;\nwatch(value, (v) => (live = v), { flush: \"sync\" });\n\nfunction commit(next: string) {\n  next = clean(next);\n  const prev = live;\n  live = next;\n  model.value = next;\n  if (next.length === props.length && prev !== next) emit(\"complete\", next);\n}\nfunction focusAt(i: number) {\n  refs[Math.max(0, Math.min(props.length - 1, i))]?.focus();\n}\nconst without = (v: string, i: number) => v.slice(0, i) + v.slice(i + 1);\nfunction put(i: number, text: string) {\n  const chars = clean(text);\n  if (!chars) return;\n  const from = chars.length >= props.length ? 0 : Math.min(i, live.length);\n  commit(live.slice(0, from) + chars);\n  focusAt(from + chars.length);\n}\nfunction onInput(i: number, e: Event) {\n  const target = e.target as HTMLInputElement;\n  const v = live;\n  let raw = target.value;\n  if (!raw) {\n    commit(without(v, i));\n    return;\n  }\n  if (v[i] && raw.length === 2) {\n    const k = raw.indexOf(v[i]!);\n    raw = k >= 0 ? without(raw, k) : raw.charAt(1);\n  }\n  const chars = clean(raw);\n  if (!chars) {\n    target.value = live[i] ?? \"\";\n    return;\n  }\n  if (chars.length === 1 && i < v.length) {\n    commit(v.slice(0, i) + chars + v.slice(i + 1));\n    focusAt(i + 1);\n  } else put(i, chars);\n  target.value = live[i] ?? \"\";\n}\nfunction onKey(i: number, e: KeyboardEvent) {\n  const v = live;\n  const k = e.key;\n  if (k === \"Backspace\") {\n    e.preventDefault();\n    if (v[i]) {\n      commit(without(v, i));\n      focusAt(i);\n    } else if (i > 0) {\n      commit(without(v, i - 1));\n      focusAt(i - 1);\n    }\n  } else if (k === \"Delete\") {\n    e.preventDefault();\n    commit(without(v, i));\n  } else if (k === \"ArrowLeft\") {\n    e.preventDefault();\n    focusAt(i - 1);\n  } else if (k === \"ArrowRight\") {\n    e.preventDefault();\n    focusAt(Math.min(i + 1, v.length));\n  } else if (k === \"Home\") {\n    e.preventDefault();\n    focusAt(0);\n  } else if (k === \"End\") {\n    e.preventDefault();\n    focusAt(v.length);\n  }\n}\nfunction onFocus(i: number) {\n  if (i > live.length) focusAt(live.length);\n}\nfunction onPaste(i: number, e: ClipboardEvent) {\n  e.preventDefault();\n  put(i, e.clipboardData?.getData(\"text\") ?? \"\");\n}\n\nonMounted(() => {\n  if (props.autoFocus) focusAt(live.length);\n});\n\ndefineExpose({\n  focus: () => focusAt(live.length),\n});\n</script>\n\n<template>\n  <EField\n    v-bind=\"attrs.wrapper()\"\n    :id=\"id\"\n    :label=\"label || t('verificationCode')\"\n    :hide-label=\"hideLabel\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :optional=\"optional\"\n  >\n    <template #default=\"field\">\n      <div role=\"group\" :aria-labelledby=\"`${field.id}-label`\" class=\"e-otp\" v-bind=\"attrs.input()\">\n        <template v-for=\"i in length\" :key=\"i\">\n          <span v-if=\"groupSize && i > 1 && (i - 1) % groupSize === 0\" class=\"e-otp-sep\" aria-hidden=\"true\" />\n          <input\n            :id=\"i === 1 ? field.id : undefined\"\n            :ref=\"(el) => (refs[i - 1] = el as HTMLInputElement | null)\"\n            class=\"e-input e-otp-box\"\n            type=\"text\"\n            :inputmode=\"numeric ? 'numeric' : 'text'\"\n            :autocomplete=\"i === 1 ? 'one-time-code' : 'off'\"\n            autocapitalize=\"characters\"\n            :spellcheck=\"false\"\n            :value=\"value[i - 1] || ''\"\n            :disabled=\"disabled\"\n            :required=\"required\"\n            :data-filled=\"value[i - 1] ? '' : undefined\"\n            :aria-label=\"t(numeric ? 'otpDigit' : 'otpChar', { n: i, total: length })\"\n            :aria-invalid=\"field.ariaInvalid\"\n            :aria-describedby=\"field.ariaDescribedby\"\n            @input=\"onInput(i - 1, $event)\"\n            @keydown=\"onKey(i - 1, $event)\"\n            @focus=\"onFocus(i - 1)\"\n            @paste=\"onPaste(i - 1, $event)\"\n          />\n        </template>\n        <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"value\" />\n      </div>\n    </template>\n  </EField>\n</template>\n\n<style>\n@layer e.controls {\n  .e-otp {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-2);\n    max-width: 100%;\n  }\n\n  .e-otp-sep {\n    flex: none;\n    width: var(--e-space-3);\n  }\n\n  .e-otp .e-otp-box {\n    flex: 1 1 0;\n    width: 0;\n    min-width: 30px;\n    max-width: var(--e-control-height);\n    padding: 0;\n    text-align: center;\n    font: 500 var(--e-text-xl)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    text-transform: uppercase;\n    caret-color: var(--e-primary);\n  }\n\n  /* stylelint-disable-next-line selector-not-notation */\n  .e-otp .e-otp-box[data-filled]:not(:focus):not([aria-invalid=\"true\"]) {\n    border-color: var(--e-ink);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/OtpField/index.d.ts

@@ -0,0 +1 @@
+export { default as EOtpField } from './EOtpField.vue.js';

package/dist/components/PageHeader/EPageHeader.js

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

package/dist/components/PageHeader/EPageHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EPageHeader.js","names":["_sfc_main","EPageHeader_vue_vue_type_script_setup_true_lang_default","EPageHeader_default"],"sources":["../../../src/components/PageHeader/EPageHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The page's title: where the person is, in their words (\"Visit on Oct 2\"). */\n    title: string;\n    /** A short line under the title. */\n    description?: string;\n    /** The heading level, 1 by default. A page has exactly one h1. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  }>(),\n  { headingLevel: 1 },\n);\n\ndefineSlots<{\n  /** An EBreadcrumb above the title. */\n  breadcrumb?(): unknown;\n  /** An EStamp beside the title. */\n  status?(): unknown;\n  /** The page's Buttons, the main one first. */\n  actions?(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-pagehead\">\n    <slot name=\"breadcrumb\" />\n    <div class=\"e-pagehead-row\">\n      <div class=\"e-pagehead-text\">\n        <div class=\"e-pagehead-titlerow\">\n          <component :is=\"`h${headingLevel}`\" class=\"e-pagehead-title\">{{ title }}</component>\n          <slot name=\"status\" />\n        </div>\n        <p v-if=\"description\" class=\"e-pagehead-desc\">{{ description }}</p>\n      </div>\n      <EActions v-if=\"$slots.actions\" class=\"e-pagehead-actions\"><slot name=\"actions\" /></EActions>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.page {\n  .e-pagehead {\n    display: grid;\n    gap: var(--e-space-3);\n    margin-bottom: var(--e-space-6);\n  }\n\n  .e-pagehead-row {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-pagehead-text {\n    flex: 1 1 18rem;\n    min-width: 0;\n  }\n\n  .e-pagehead-title {\n    margin: 0;\n    font: 500 var(--e-text-4xl) / 1.1 var(--e-font-sans);\n    text-wrap: balance;\n  }\n\n  .e-pagehead-desc {\n    margin: var(--e-space-2) 0 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-lg) / 1.45 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @media (max-width: 32rem) {\n    .e-pagehead-title {\n      font-size: var(--e-text-2xl);\n    }\n  }\n\n  .e-pagehead-titlerow {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  .e-pagehead-titlerow > :not(.e-pagehead-title) {\n    margin-top: var(--e-space-1);\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/PageHeader/EPageHeader.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    /** The page's title: where the person is, in their words ("Visit on Oct 2"). */
+    title: string;
+    /** A short line under the title. */
+    description?: string;
+    /** The heading level, 1 by default. A page has exactly one h1. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+};
+type __VLS_Slots = {
+    /** An EBreadcrumb above the title. */
+    breadcrumb?(): unknown;
+    /** An EStamp beside the title. */
+    status?(): unknown;
+    /** The page's Buttons, the main one first. */
+    actions?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/PageHeader/EPageHeader.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,31 @@
+/* empty css                */
+import e from "../Actions/EActions.js";
+import { createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, openBlock as s, renderSlot as c, resolveDynamicComponent as l, toDisplayString as u, withCtx as d } from "vue";
+//#region src/components/PageHeader/EPageHeader.vue?vue&type=script&setup=true&lang.ts
+var f = { class: "e-pagehead" }, p = { class: "e-pagehead-row" }, m = { class: "e-pagehead-text" }, h = { class: "e-pagehead-titlerow" }, g = {
+	key: 0,
+	class: "e-pagehead-desc"
+}, _ = /*@__PURE__*/ o({
+	__name: "EPageHeader",
+	props: {
+		title: {},
+		description: {},
+		headingLevel: { default: 1 }
+	},
+	setup(o) {
+		return (_, v) => (s(), r("div", f, [c(_.$slots, "breadcrumb"), i("div", p, [i("div", m, [i("div", h, [(s(), t(l(`h${o.headingLevel}`), { class: "e-pagehead-title" }, {
+			default: d(() => [a(u(o.title), 1)]),
+			_: 1
+		})), c(_.$slots, "status")]), o.description ? (s(), r("p", g, u(o.description), 1)) : n("", !0)]), _.$slots.actions ? (s(), t(e, {
+			key: 0,
+			class: "e-pagehead-actions"
+		}, {
+			default: d(() => [c(_.$slots, "actions")]),
+			_: 3
+		})) : n("", !0)])]));
+	}
+});
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=EPageHeader.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/PageHeader/EPageHeader.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EPageHeader.vue_vue_type_script_setup_true_lang.js","names":["$slots","_openBlock","_createElementBlock","_renderSlot","_createElementVNode","_createBlock","_resolveDynamicComponent","_withCtx","_createTextVNode","_toDisplayString","_createCommentVNode","EActions","EActions_default","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","EPageHeader_vue_vue_type_script_setup_true_lang_default","openBlock","createElementBlock","renderSlot","_ctx","createElementVNode","createBlock","resolveDynamicComponent","__props","withCtx","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/PageHeader/EPageHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport EActions from \"../Actions/EActions.vue\";\nimport \"../../styles/base.css\";\n\nwithDefaults(\n  defineProps<{\n    /** The page's title: where the person is, in their words (\"Visit on Oct 2\"). */\n    title: string;\n    /** A short line under the title. */\n    description?: string;\n    /** The heading level, 1 by default. A page has exactly one h1. */\n    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  }>(),\n  { headingLevel: 1 },\n);\n\ndefineSlots<{\n  /** An EBreadcrumb above the title. */\n  breadcrumb?(): unknown;\n  /** An EStamp beside the title. */\n  status?(): unknown;\n  /** The page's Buttons, the main one first. */\n  actions?(): unknown;\n}>();\n</script>\n\n<template>\n  <div class=\"e-pagehead\">\n    <slot name=\"breadcrumb\" />\n    <div class=\"e-pagehead-row\">\n      <div class=\"e-pagehead-text\">\n        <div class=\"e-pagehead-titlerow\">\n          <component :is=\"`h${headingLevel}`\" class=\"e-pagehead-title\">{{ title }}</component>\n          <slot name=\"status\" />\n        </div>\n        <p v-if=\"description\" class=\"e-pagehead-desc\">{{ description }}</p>\n      </div>\n      <EActions v-if=\"$slots.actions\" class=\"e-pagehead-actions\"><slot name=\"actions\" /></EActions>\n    </div>\n  </div>\n</template>\n\n<style>\n@layer e.page {\n  .e-pagehead {\n    display: grid;\n    gap: var(--e-space-3);\n    margin-bottom: var(--e-space-6);\n  }\n\n  .e-pagehead-row {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: flex-start;\n    justify-content: space-between;\n    gap: var(--e-space-3) var(--e-space-4);\n  }\n\n  .e-pagehead-text {\n    flex: 1 1 18rem;\n    min-width: 0;\n  }\n\n  .e-pagehead-title {\n    margin: 0;\n    font: 500 var(--e-text-4xl) / 1.1 var(--e-font-sans);\n    text-wrap: balance;\n  }\n\n  .e-pagehead-desc {\n    margin: var(--e-space-2) 0 0;\n    max-width: var(--e-measure);\n    font: 400 var(--e-text-lg) / 1.45 var(--e-font-sans);\n    color: var(--e-muted);\n  }\n\n  @media (max-width: 32rem) {\n    .e-pagehead-title {\n      font-size: var(--e-text-2xl);\n    }\n  }\n\n  .e-pagehead-titlerow {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--e-space-2) var(--e-space-4);\n  }\n\n  .e-pagehead-titlerow > :not(.e-pagehead-title) {\n    margin-top: var(--e-space-1);\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;E,kBA2BEC,EAAA,GAAAC,EAYM,OAZNW,GAYM,CAXJV,EAA0BmB,EAAA,QAAA,YAAA,GAC1BlB,EASM,OATNU,GASM,CARJV,EAMM,OANNW,GAMM,CALJX,EAGM,OAHNY,GAGM,EAFJf,EAAA,GAAAI,EAAoFC,EAAA,IAAhEoB,EAAA,cAAY,GAAA,EAAI,OAAM,mBAAkB,GAAA;GAAC,SAAAnB,QAAW,CAARC,EAAAC,EAAAiB,EAAA,KAAK,GAAA,CAAA,C;;E,KACrEvB,EAAsBmB,EAAA,QAAA,QAAA,C,IAEfI,EAAA,eAATzB,EAAA,GAAAC,EAAmE,KAAnEe,GAAmER,EAAlBiB,EAAA,WAAW,GAAA,CAAA,K,aAE9C1B,EAAAA,OAAO,WAAvBC,EAAA,GAAAI,EAA6FM,GAAA;;GAA7D,OAAM;;GAAqB,SAAAJ,QAAuB,CAAvBJ,EAAuBmB,EAAA,QAAA,SAAA,C"}

package/dist/components/PageHeader/index.d.ts

@@ -0,0 +1 @@
+export { default as EPageHeader } from './EPageHeader.vue.js';

package/dist/components/Pagination/EPagination.js

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

package/dist/components/Pagination/EPagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EPagination.js","names":["_sfc_main","EPagination_vue_vue_type_script_setup_true_lang_default","EPagination_default"],"sources":["../../../src/components/Pagination/EPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport EButton from \"../Button/EButton.vue\";\nimport EIcon from \"../Icon/EIcon.vue\";\nimport { useMessages } from \"../../config.js\";\nimport \"../../styles/base.css\";\n\nconst props = defineProps<{\n  /** How many pages there are. */\n  pageCount: number;\n}>();\n\nconst page = defineModel<number>({ default: 1 });\n\nconst t = useMessages();\n\nconst items = computed<(number | \"gap\")[]>(() => {\n  const list: (number | \"gap\")[] = [];\n  for (let i = 1; i <= props.pageCount; i++) {\n    if (i === 1 || i === props.pageCount || Math.abs(i - page.value) <= 1) list.push(i);\n    else if (list[list.length - 1] !== \"gap\") list.push(\"gap\");\n  }\n  return list.map((n, k) => {\n    const before = list[k - 1];\n    const after = list[k + 1];\n    return n === \"gap\" && typeof before === \"number\" && typeof after === \"number\" && after - before === 2\n      ? before + 1\n      : n;\n  });\n});\n</script>\n\n<template>\n  <nav class=\"e-pager\" :aria-label=\"t('pagination')\">\n    <EButton variant=\"outline\" icon=\"chevron-left\" :disabled=\"page <= 1\" @click=\"page = page - 1\">\n      {{ t(\"previous\") }}\n    </EButton>\n    <ul class=\"e-pages\">\n      <li v-for=\"(n, i) in items\" :key=\"i\">\n        <span v-if=\"n === 'gap'\" class=\"e-page-gap\" aria-hidden=\"true\">&hellip;</span>\n        <button\n          v-else\n          type=\"button\"\n          class=\"e-page\"\n          :aria-current=\"n === page ? 'page' : undefined\"\n          :aria-label=\"t('pageN', { n })\"\n          @click=\"page = n\"\n        >\n          {{ n }}\n        </button>\n      </li>\n    </ul>\n    <EButton variant=\"outline\" :disabled=\"page >= pageCount\" @click=\"page = page + 1\">\n      {{ t(\"next\") }}\n      <EIcon name=\"chevron-right\" />\n    </EButton>\n  </nav>\n</template>\n\n<style>\n@layer e.composites {\n  .e-pager {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    gap: var(--e-space-3);\n  }\n\n  .e-pages {\n    display: flex;\n    align-items: center;\n    gap: var(--e-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .e-page {\n    display: inline-grid;\n    place-items: center;\n    min-width: var(--e-control-height);\n    height: var(--e-control-height);\n    padding: 0 var(--e-space-2);\n    border: var(--e-stroke-edge) solid transparent;\n    border-radius: var(--e-radius-md);\n    background: transparent;\n    color: var(--e-ink);\n    font: 500 var(--e-text-sm)/1 var(--e-font-mono);\n    font-variant-numeric: tabular-nums;\n    cursor: pointer;\n    transition:\n      background-color var(--e-duration-tap) var(--e-easing-out),\n      border-color var(--e-duration-tap) var(--e-easing-out);\n  }\n\n  .e-page:hover {\n    background: var(--e-surface-tint);\n    border-color: var(--e-border-strong);\n  }\n\n  .e-page:focus-visible {\n    outline: var(--e-stroke-focus) solid var(--e-focus-ring);\n    outline-offset: var(--e-focus-gap);\n  }\n\n  .e-page[aria-current=\"page\"] {\n    background: var(--e-primary);\n    border-color: var(--e-primary);\n    color: var(--e-on-primary);\n    font-weight: 600;\n    cursor: default;\n  }\n\n  .e-page-gap {\n    display: inline-grid;\n    place-items: center;\n    min-width: 28px;\n    color: var(--e-muted);\n  }\n\n  @media (max-width: 32rem) {\n    .e-pages {\n      display: none;\n    }\n\n    .e-pager {\n      justify-content: space-between;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .e-page {\n      transition: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .e-page[aria-current=\"page\"] {\n      forced-color-adjust: none;\n      background: Highlight;\n      color: HighlightText;\n    }\n  }\n\n  @media print {\n    .e-pager {\n      display: none;\n    }\n  }\n}\n</style>\n"],"mappings":""}

package/dist/components/Pagination/EPagination.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    /** How many pages there are. */
+    pageCount: number;
+};
+type __VLS_ModelProps = {
+    modelValue?: number;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;