vectis-ui 0.12.0 → 0.13.0

package/dist/components/VNumberInput/VNumberInput.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,251 @@
+import { useMessages as e, useResolvedLocale as t } from "../../i18n/state.js";
+import n from "../VIcon/VIcon.js";
+import ee from "../VSeparator/VSeparator.js";
+import { useControlShape as r } from "../../composables/useControlShape.js";
+import { expand_more as te } from "../VIcon/icons/expand_more.js";
+import { expand_less as ne } from "../VIcon/icons/expand_less.js";
+import { canClear as re } from "../../composables/useClearable.js";
+import { inputGroupKey as ie } from "../VInput/context.js";
+import ae from "../VInput/VInput.js";
+import { add as i } from "../VIcon/icons/add.js";
+import { remove as a } from "../VIcon/icons/remove.js";
+import { partitionAttrs as oe } from "../../utils/attrs.js";
+import { clamp as o, numberSeparators as se, parseNumber as s, scale as c, stepValue as l } from "./number.js";
+import { Fragment as u, computed as d, createBlock as ce, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createSlots as le, createVNode as h, defineComponent as g, inject as ue, mergeModels as _, mergeProps as v, openBlock as y, ref as b, unref as x, useAttrs as S, useModel as C, watch as de, withCtx as w, withModifiers as T } from "vue";
+//#region src/components/VNumberInput/VNumberInput.vue?vue&type=script&setup=true&lang.ts
+var fe = ["aria-label", "disabled"], pe = ["aria-label", "disabled"], me = { class: "v-number-input-stack" }, he = ["aria-label", "disabled"], ge = ["aria-label", "disabled"], _e = [
+	"name",
+	"form",
+	"value",
+	"disabled"
+], E = /*@__PURE__*/ g({
+	inheritAttrs: !1,
+	__name: "VNumberInput",
+	props: /*@__PURE__*/ _({
+		min: { default: void 0 },
+		max: { default: void 0 },
+		step: { default: 1 },
+		formatOptions: { default: void 0 },
+		locale: { default: void 0 },
+		controls: { default: "split" },
+		incrementLabel: { default: void 0 },
+		decrementLabel: { default: void 0 },
+		size: { default: "md" },
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: void 0 },
+		hint: { default: void 0 },
+		error: { default: void 0 },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		hideLabel: {
+			type: Boolean,
+			default: !1
+		},
+		labelPosition: { default: "top" },
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		clearLabel: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		loadingText: { default: void 0 }
+	}, {
+		modelValue: { default: null },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ _(["clear"], ["update:modelValue"]),
+	setup(g, { expose: _, emit: E }) {
+		let D = g, O = E, k = C(g, "modelValue"), A = e(), j = t(() => D.locale), M = d(() => D.incrementLabel ?? A.value.numberInput.increment), N = d(() => D.decrementLabel ?? A.value.numberInput.decrement), { disabled: P } = r(D, ue(ie, null)), F = S(), I = d(() => oe(F, ["name", "form"])), ve = d(() => I.value.rest), L = d(() => I.value.picked.name), ye = d(() => I.value.picked.form), R = d(() => D.formatOptions?.style === "percent"), be = d(() => se(j.value)), z = d(() => new Intl.NumberFormat(j.value, D.formatOptions)), B = d(() => new Intl.NumberFormat(j.value, {
+			useGrouping: !1,
+			maximumFractionDigits: 20
+		})), V = (e) => e === null ? "" : z.value.format(e), xe = (e) => e === null ? "" : B.value.format(R.value ? c(e, 100) : e);
+		function H() {
+			let e = s(K.value, be.value);
+			return e === null || Number.isNaN(e) || !R.value ? e : c(e, .01);
+		}
+		let U = b(null), W = b(null), G = b(!1), K = b(V(k.value));
+		function q() {
+			K.value = G.value ? xe(k.value) : V(k.value);
+		}
+		de([
+			k,
+			z,
+			B
+		], q);
+		function J(e) {
+			k.value = e, q(), W.value && (W.value.value = e === null ? "" : String(e));
+		}
+		function Y() {
+			let e = H();
+			Number.isNaN(e) ? q() : J(e === null ? null : o(e, D.min, D.max));
+		}
+		let X = d(() => !P.value && !D.readonly), Se = d(() => D.loading || re(D, P.value, K.value !== "")), Z = d(() => k.value !== null && D.min !== void 0 && k.value <= D.min), Q = d(() => k.value !== null && D.max !== void 0 && k.value >= D.max);
+		function $(e) {
+			if (!X.value) return;
+			let t = G.value ? H() : k.value, n = t === null || Number.isNaN(t) ? k.value : t;
+			if (n === null) return J(o(0, D.min, D.max));
+			J(o(l(n, e, D.step > 0 ? D.step : 1, D.min ?? 0), D.min, D.max));
+		}
+		function Ce(e) {
+			if (e.altKey || e.ctrlKey || e.metaKey) return;
+			let t = {
+				ArrowUp: 1,
+				ArrowDown: -1,
+				PageUp: 10,
+				PageDown: -10
+			};
+			e.key in t ? (e.preventDefault(), $(t[e.key])) : e.key === "Home" && D.min !== void 0 && X.value ? (e.preventDefault(), J(D.min)) : e.key === "End" && D.max !== void 0 && X.value ? (e.preventDefault(), J(D.max)) : e.key === "Enter" && Y();
+		}
+		function we() {
+			G.value = !0, q();
+		}
+		function Te() {
+			G.value = !1, Y();
+		}
+		function Ee() {
+			J(null), O("clear");
+		}
+		return _({
+			focus: (e) => U.value?.focus(e),
+			select: () => U.value?.select(),
+			el: d(() => U.value?.el ?? null)
+		}), (e, t) => (y(), p(u, null, [h(ae, v({
+			ref_key: "inputRef",
+			ref: U,
+			modelValue: K.value,
+			"onUpdate:modelValue": t[8] ||= (e) => K.value = e,
+			class: "v-number-input",
+			role: "spinbutton",
+			inputmode: "decimal",
+			autocomplete: "off",
+			"aria-valuenow": k.value ?? void 0,
+			"aria-valuemin": g.min,
+			"aria-valuemax": g.max,
+			"aria-valuetext": k.value === null ? void 0 : V(k.value),
+			"data-controls": g.controls
+		}, ve.value, {
+			size: g.size,
+			compact: g.compact,
+			label: g.label,
+			hint: g.hint,
+			error: g.error,
+			required: g.required,
+			"hide-label": g.hideLabel,
+			"label-position": g.labelPosition,
+			invalid: g.invalid,
+			disabled: g.disabled,
+			readonly: g.readonly,
+			clearable: g.clearable,
+			"clear-label": g.clearLabel,
+			loading: g.loading,
+			"loading-text": g.loadingText,
+			onFocus: we,
+			onBlur: Te,
+			onKeydown: Ce,
+			onClear: Ee
+		}), le({ _: 2 }, [g.controls === "split" ? {
+			name: "start",
+			fn: w(() => [m("button", {
+				type: "button",
+				tabindex: "-1",
+				class: "v-field-action v-number-input-step",
+				"aria-label": N.value,
+				disabled: !X.value || Z.value,
+				onMousedown: t[0] ||= T(() => {}, ["prevent"]),
+				onClick: t[1] ||= (e) => $(-1)
+			}, [h(n, { name: x(a) }, null, 8, ["name"])], 40, fe)]),
+			key: "0"
+		} : void 0, g.controls === "split" ? {
+			name: "value-end",
+			fn: w(() => [m("button", {
+				type: "button",
+				tabindex: "-1",
+				class: "v-field-action v-number-input-step",
+				"aria-label": M.value,
+				disabled: !X.value || Q.value,
+				onMousedown: t[2] ||= T(() => {}, ["prevent"]),
+				onClick: t[3] ||= (e) => $(1)
+			}, [h(n, { name: x(i) }, null, 8, ["name"])], 40, pe), Se.value ? (y(), ce(ee, {
+				key: 0,
+				orientation: "vertical",
+				class: "v-number-input-divider"
+			})) : f("", !0)]),
+			key: "1"
+		} : g.controls === "stacked" ? {
+			name: "value-end",
+			fn: w(() => [m("span", me, [m("button", {
+				type: "button",
+				tabindex: "-1",
+				class: "v-field-action v-number-input-step",
+				"aria-label": M.value,
+				disabled: !X.value || Q.value,
+				onMousedown: t[4] ||= T(() => {}, ["prevent"]),
+				onClick: t[5] ||= (e) => $(1)
+			}, [h(n, { name: x(ne) }, null, 8, ["name"])], 40, he), m("button", {
+				type: "button",
+				tabindex: "-1",
+				class: "v-field-action v-number-input-step",
+				"aria-label": N.value,
+				disabled: !X.value || Z.value,
+				onMousedown: t[6] ||= T(() => {}, ["prevent"]),
+				onClick: t[7] ||= (e) => $(-1)
+			}, [h(n, { name: x(te) }, null, 8, ["name"])], 40, ge)])]),
+			key: "2"
+		} : void 0]), 1040, [
+			"modelValue",
+			"aria-valuenow",
+			"aria-valuemin",
+			"aria-valuemax",
+			"aria-valuetext",
+			"data-controls",
+			"size",
+			"compact",
+			"label",
+			"hint",
+			"error",
+			"required",
+			"hide-label",
+			"label-position",
+			"invalid",
+			"disabled",
+			"readonly",
+			"clearable",
+			"clear-label",
+			"loading",
+			"loading-text"
+		]), L.value ? (y(), p("input", {
+			key: 0,
+			ref_key: "hiddenEl",
+			ref: W,
+			type: "hidden",
+			name: L.value,
+			form: ye.value,
+			value: k.value ?? "",
+			disabled: x(P)
+		}, null, 8, _e)) : f("", !0)], 64));
+	}
+});
+//#endregion
+export { E as default };
+
+//# sourceMappingURL=VNumberInput.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/VNumberInput/VNumberInput.vue_vue_type_script_setup_true_lang.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VNumberInput.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../src/components/VNumberInput/VNumberInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\n// @a11y @core\n/**\n * A text field announced as a spinbutton rather than a native number input: only a text field\n * can show a number formatted for its locale (separators, currency, unit, percent), which\n * `type=\"number\"` refuses. The keyboard of a spinbutton, the parsing and the stepping are\n * therefore rebuilt here; the typed value is committed on blur and on Enter, so that a minimum\n * never interrupts the typing of a number that would have reached it.\n */\nimport { computed, inject, ref, useAttrs, watch } from 'vue'\n\nimport VIcon from '../VIcon/VIcon.vue'\nimport { add as addIcon } from '../VIcon/icons/add'\nimport { expand_less as expandLessIcon } from '../VIcon/icons/expand_less'\nimport { expand_more as expandMoreIcon } from '../VIcon/icons/expand_more'\nimport { remove as removeIcon } from '../VIcon/icons/remove'\nimport type { FieldLabelPosition } from '../VField/VField.vue'\nimport VInput from '../VInput/VInput.vue'\nimport type { InputSize } from '../VInput/VInput.vue'\nimport { inputGroupKey } from '../VInput/context'\nimport VSeparator from '../VSeparator/VSeparator.vue'\n\nimport { canClear } from '../../composables/useClearable'\nimport { partitionAttrs } from '../../utils/attrs'\nimport { useControlShape } from '../../composables/useControlShape'\nimport { useMessages, useResolvedLocale } from '../../i18n/state'\n\nimport { clamp, numberSeparators, parseNumber, scale, stepValue } from './number'\n\n/**\n * Where the step buttons sit: a minus at the start and a plus at the end, both stacked at the\n * end, or none.\n */\nexport type NumberInputControls = 'split' | 'stacked' | 'none'\n\ninterface NumberInputProps {\n  /** The smallest value. A typed value below it is raised to it when committed. */\n  min?: number\n  /** The largest value. A typed value above it is lowered to it when committed. */\n  max?: number\n  /**\n   * How far the arrow keys and the buttons move the value, on a grid that starts at `min`, or at\n   * 0 without one. Page Up and Page Down move it ten steps.\n   */\n  step?: number\n  /**\n   * How the value is shown while the field is not being edited: the options of\n   * `Intl.NumberFormat`, for a currency, a unit, a percentage or a number of decimals. With\n   * `style: 'percent'`, the value 0.25 shows and is typed as 25.\n   */\n  formatOptions?: Intl.NumberFormatOptions\n  /** The locale the number is written and read in. It defaults to the design system's. */\n  locale?: string\n  /** Where the step buttons sit. Whatever their place, they stay out of the tab order. */\n  controls?: NumberInputControls\n  /** What the plus button does, in words. It falls back to the design system dictionary. */\n  incrementLabel?: string\n  /** What the minus button does, in words. It falls back to the design system dictionary. */\n  decrementLabel?: string\n  /** The height of the field: 32, 40 or 48 pixels. */\n  size?: InputSize\n  /** Takes 4px off the height. */\n  compact?: boolean\n  /** The label above the field, tied to it. */\n  label?: string\n  /** A line of help under the field, read out along with the label. */\n  hint?: string\n  /**\n   * A message saying what is wrong with the value, shown in place of the hint. It marks the\n   * field invalid and is announced when it appears or changes.\n   */\n  error?: string\n  /** Marks the field as required: an asterisk follows the label, and the field is `required`. */\n  required?: boolean\n  /** Hides the label visually. It still names the field for assistive technology. */\n  hideLabel?: boolean\n  /**\n   * Where the label sits: above the field (`top`, the default), or at its start, in a column of\n   * its own, moving back above when there is not room for both.\n   */\n  labelPosition?: FieldLabelPosition\n  /** Marks the field as invalid whatever the browser thinks. */\n  invalid?: boolean\n  /** Makes the field unusable, greyed out through the colour tokens. */\n  disabled?: boolean\n  /** Shows the value without allowing it to be changed, by typing or by stepping. */\n  readonly?: boolean\n  /** Offers a cross that empties the field, setting the value to `null`. */\n  clearable?: boolean\n  /** What the clear button does, in words. It falls back to the design system dictionary. */\n  clearLabel?: string\n  /** Shows a spinner at the end of the field. */\n  loading?: boolean\n  /** What screen readers announce while the spinner turns. */\n  loadingText?: string\n}\n\ndefineOptions({ inheritAttrs: false })\n\nconst props = withDefaults(defineProps<NumberInputProps>(), {\n  min: undefined,\n  max: undefined,\n  step: 1,\n  formatOptions: undefined,\n  locale: undefined,\n  controls: 'split',\n  incrementLabel: undefined,\n  decrementLabel: undefined,\n  size: 'md',\n  compact: false,\n  label: undefined,\n  hint: undefined,\n  error: undefined,\n  required: false,\n  hideLabel: false,\n  labelPosition: 'top',\n  invalid: false,\n  disabled: false,\n  readonly: false,\n  clearable: false,\n  clearLabel: undefined,\n  loading: false,\n  loadingText: undefined,\n})\n\nconst emit = defineEmits<{\n  /** The clear button was pressed. The value is already `null`. */\n  clear: []\n}>()\n\n/** The value, `null` while the field is empty. */\nconst model = defineModel<number | null>({ default: null })\n\nconst m = useMessages()\nconst resolvedLocale = useResolvedLocale(() => props.locale)\nconst incrementText = computed(() => props.incrementLabel ?? m.value.numberInput.increment)\nconst decrementText = computed(() => props.decrementLabel ?? m.value.numberInput.decrement)\n\nconst group = inject(inputGroupKey, null)\nconst { disabled: resolvedDisabled } = useControlShape(props, group)\n\n// @a11y\n// Everything goes down to VInput, which keeps `class` and `style` on its wrapper; except `name`\n// and `form`, which move to a hidden input carrying the bare number: the visible field holds\n// formatted text (\"1 234,50 €\"), which is not what a form should submit.\nconst attrs = useAttrs()\nconst split = computed(() => partitionAttrs(attrs, ['name', 'form']))\nconst fieldAttrs = computed(() => split.value.rest)\nconst formName = computed(() => split.value.picked.name as string | undefined)\nconst formOwner = computed(() => split.value.picked.form as string | undefined)\n\nconst percent = computed(() => props.formatOptions?.style === 'percent')\nconst separators = computed(() => numberSeparators(resolvedLocale.value))\nconst displayFormat = computed(\n  () => new Intl.NumberFormat(resolvedLocale.value, props.formatOptions),\n)\n// The value as it is edited: no grouping, no symbol, every decimal it has.\nconst editFormat = computed(\n  () =>\n    new Intl.NumberFormat(resolvedLocale.value, {\n      useGrouping: false,\n      maximumFractionDigits: 20,\n    }),\n)\n\nconst display = (value: number | null) => (value === null ? '' : displayFormat.value.format(value))\nconst editable = (value: number | null) =>\n  value === null ? '' : editFormat.value.format(percent.value ? scale(value, 100) : value)\n\n/** What was typed, read as a value: `null` when empty, `NaN` when not a number. */\nfunction typedValue(): number | null {\n  const value = parseNumber(text.value, separators.value)\n  return value === null || Number.isNaN(value) || !percent.value ? value : scale(value, 0.01)\n}\n\nconst inputRef = ref<InstanceType<typeof VInput> | null>(null)\nconst hiddenEl = ref<HTMLInputElement | null>(null)\nconst focused = ref(false)\nconst text = ref(display(model.value))\n\nfunction syncText() {\n  text.value = focused.value ? editable(model.value) : display(model.value)\n}\n\nwatch([model, displayFormat, editFormat], syncText)\n\nfunction setValue(value: number | null) {\n  model.value = value\n  syncText()\n  // @core\n  // Enter submits a form as the default action of the very keydown that commits the value,\n  // before Vue renders: the hidden input is written now, or the previous number is submitted.\n  if (hiddenEl.value) hiddenEl.value.value = value === null ? '' : String(value)\n}\n\n/** Commits what was typed: empty is `null`, a number is kept within bounds, text is undone. */\nfunction commit() {\n  const value = typedValue()\n  if (Number.isNaN(value)) syncText()\n  else setValue(value === null ? null : clamp(value, props.min, props.max))\n}\n\nconst editableField = computed(() => !resolvedDisabled.value && !props.readonly)\n/**\n * Whether the field's own controls follow the plus button: the clear cross, which VInput shows by\n * the same rule, or the spinner. A rule then sets the plus apart from them.\n */\nconst endControls = computed(\n  () => props.loading || canClear(props, resolvedDisabled.value, text.value !== ''),\n)\nconst atMin = computed(\n  () => model.value !== null && props.min !== undefined && model.value <= props.min,\n)\nconst atMax = computed(\n  () => model.value !== null && props.max !== undefined && model.value >= props.max,\n)\n\n/**\n * Moves the value by a number of steps, from what is typed when it reads as a number. An empty\n * field starts from 0, or from the nearest bound when 0 is out of range.\n */\nfunction stepBy(steps: number) {\n  if (!editableField.value) return\n  const typed = focused.value ? typedValue() : model.value\n  const current = typed === null || Number.isNaN(typed) ? model.value : typed\n  if (current === null) return setValue(clamp(0, props.min, props.max))\n  const step = props.step > 0 ? props.step : 1\n  setValue(clamp(stepValue(current, steps, step, props.min ?? 0), props.min, props.max))\n}\n\n// @keyboard\n// The keys of the APG spinbutton. Home and End only take a value when there is a bound to go\n// to; otherwise they keep moving the caret, as in any text field.\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.altKey || event.ctrlKey || event.metaKey) return\n  const steps: Record<string, number> = { ArrowUp: 1, ArrowDown: -1, PageUp: 10, PageDown: -10 }\n  if (event.key in steps) {\n    event.preventDefault()\n    stepBy(steps[event.key]!)\n  } else if (event.key === 'Home' && props.min !== undefined && editableField.value) {\n    event.preventDefault()\n    setValue(props.min)\n  } else if (event.key === 'End' && props.max !== undefined && editableField.value) {\n    event.preventDefault()\n    setValue(props.max)\n  } else if (event.key === 'Enter') {\n    commit()\n  }\n}\n\nfunction onFocus() {\n  focused.value = true\n  syncText()\n}\n\nfunction onBlur() {\n  focused.value = false\n  commit()\n}\n\nfunction onClear() {\n  setValue(null)\n  emit('clear')\n}\n\ndefineExpose({\n  /** Moves the focus to the real input. */\n  focus: (options?: FocusOptions) => inputRef.value?.focus(options),\n  /** Selects everything in the field. */\n  select: () => inputRef.value?.select(),\n  /** The real `<input>`. */\n  el: computed(() => inputRef.value?.el ?? null),\n})\n</script>\n\n<template>\n  <VInput\n    ref=\"inputRef\"\n    v-model=\"text\"\n    class=\"v-number-input\"\n    role=\"spinbutton\"\n    inputmode=\"decimal\"\n    autocomplete=\"off\"\n    :aria-valuenow=\"model ?? undefined\"\n    :aria-valuemin=\"min\"\n    :aria-valuemax=\"max\"\n    :aria-valuetext=\"model === null ? undefined : display(model)\"\n    :data-controls=\"controls\"\n    v-bind=\"fieldAttrs\"\n    :size=\"size\"\n    :compact=\"compact\"\n    :label=\"label\"\n    :hint=\"hint\"\n    :error=\"error\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :label-position=\"labelPosition\"\n    :invalid=\"invalid\"\n    :disabled=\"disabled\"\n    :readonly=\"readonly\"\n    :clearable=\"clearable\"\n    :clear-label=\"clearLabel\"\n    :loading=\"loading\"\n    :loading-text=\"loadingText\"\n    @focus=\"onFocus\"\n    @blur=\"onBlur\"\n    @keydown=\"onKeydown\"\n    @clear=\"onClear\"\n  >\n    <!--\n      The buttons stay out of the tab order: the arrow keys do what they do, from the field. A\n      press does not take the focus either, so the field keeps it while the value moves.\n    -->\n    <template v-if=\"controls === 'split'\" #start>\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"v-field-action v-number-input-step\"\n        :aria-label=\"decrementText\"\n        :disabled=\"!editableField || atMin\"\n        @mousedown.prevent\n        @click=\"stepBy(-1)\"\n      >\n        <VIcon :name=\"removeIcon\" />\n      </button>\n    </template>\n    <template v-if=\"controls === 'split'\" #value-end>\n      <button\n        type=\"button\"\n        tabindex=\"-1\"\n        class=\"v-field-action v-number-input-step\"\n        :aria-label=\"incrementText\"\n        :disabled=\"!editableField || atMax\"\n        @mousedown.prevent\n        @click=\"stepBy(1)\"\n      >\n        <VIcon :name=\"addIcon\" />\n      </button>\n      <VSeparator v-if=\"endControls\" orientation=\"vertical\" class=\"v-number-input-divider\" />\n    </template>\n    <template v-else-if=\"controls === 'stacked'\" #value-end>\n      <span class=\"v-number-input-stack\">\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"v-field-action v-number-input-step\"\n          :aria-label=\"incrementText\"\n          :disabled=\"!editableField || atMax\"\n          @mousedown.prevent\n          @click=\"stepBy(1)\"\n        >\n          <VIcon :name=\"expandLessIcon\" />\n        </button>\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          class=\"v-field-action v-number-input-step\"\n          :aria-label=\"decrementText\"\n          :disabled=\"!editableField || atMin\"\n          @mousedown.prevent\n          @click=\"stepBy(-1)\"\n        >\n          <VIcon :name=\"expandMoreIcon\" />\n        </button>\n      </span>\n    </template>\n  </VInput>\n  <input\n    v-if=\"formName\"\n    ref=\"hiddenEl\"\n    type=\"hidden\"\n    :name=\"formName\"\n    :form=\"formOwner\"\n    :value=\"model ?? ''\"\n    :disabled=\"resolvedDisabled\"\n  />\n</template>\n\n<style>\n@layer vectis.components {\n  .v-number-input .v-input-control {\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* Between a minus and a plus, the number reads as the thing they act on. */\n  .v-number-input .v-input-control[data-controls='split'] {\n    text-align: center;\n  }\n\n  /*\n   * The rule between the plus button and the field's own controls, as VTimeInput draws after\n   * AM/PM: icon height rather than the full height a vertical VSeparator stretches to, which\n   * would read as a division of the box rather than a break in the row.\n   */\n  .v-separator[data-orientation='vertical'].v-number-input-divider {\n    align-self: center;\n    block-size: var(--control-action-size);\n  }\n\n  .v-number-input-step:disabled {\n    color: var(--vectis-color-text-subtle);\n    cursor: not-allowed;\n  }\n\n  /*\n   * The stacked pair fills the field's height, set apart from the value by a divider. Each half\n   * takes its icon size from the height it has: the field's, less its two 1px borders.\n   */\n  .v-number-input-stack {\n    --vectis-icon-size: calc((var(--control-height) - 2px) / 2);\n\n    display: flex;\n    flex-direction: column;\n    align-self: stretch;\n    border-inline-start: 1px solid var(--vectis-color-border);\n  }\n\n  /*\n   * Last in the field, the pair reaches over the field's padding to its end edge. Followed by the\n   * clear cross or the spinner, it stays in the flow and a second divider sets it apart from them.\n   */\n  .v-number-input-stack:last-child {\n    margin-inline-end: calc(-1 * var(--control-padding-inline-field));\n  }\n\n  .v-number-input-stack:not(:last-child) {\n    border-inline-end: 1px solid var(--vectis-color-border);\n  }\n\n  .v-number-input-stack > .v-number-input-step {\n    flex: 1 1 0;\n    block-size: auto;\n    inline-size: var(--control-action-size);\n    margin: 0;\n    border-radius: 0;\n  }\n\n  .v-number-input-stack > .v-number-input-step + .v-number-input-step {\n    border-block-start: 1px solid var(--vectis-color-border);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/components/VNumberInput/number.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The arithmetic and the locale handling of VNumberInput, kept free of Vue: reading what was
+ * typed, writing a value back for editing, and stepping on a grid without floating-point drift.
+ */
+/** The two separators a locale writes numbers with: "1 234,5" in French, "1,234.5" in English. */
+export interface NumberSeparators {
+    group: string;
+    decimal: string;
+}
+export declare function numberSeparators(locale: string): NumberSeparators;
+/**
+ * Reads a typed number: `null` for an empty field, `NaN` for text that is not a number.
+ *
+ * Group separators and any space are dropped, the locale's decimal separator becomes a point,
+ * and a point is also accepted as the decimal separator where the locale does not group with
+ * it. Currency, unit and percent symbols are ignored, so a formatted value pasted back in reads
+ * as the number it shows.
+ */
+export declare function parseNumber(text: string, separators: NumberSeparators): number | null;
+/** The number of decimals a value is written with: 0.25 has two, 1e-7 has seven. */
+export declare function decimalsOf(value: number): number;
+/** Multiplies by a power of ten without picking up drift: 0.07 × 100 is 7, not 7.000000000000001. */
+export declare function scale(value: number, factor: number): number;
+export declare function clamp(value: number, min: number | undefined, max: number | undefined): number;
+/**
+ * Moves a value by a number of steps on the grid that starts at `base`. A value off the grid
+ * lands on the next grid line in the direction of travel first, as a native number input does:
+ * up from 1.5 by a step of 1 gives 2, not 2.5.
+ */
+export declare function stepValue(value: number, steps: number, step: number, base: number): number;

package/dist/components/VNumberInput/number.js

@@ -0,0 +1,38 @@
+//#region src/components/VNumberInput/number.ts
+function e(e) {
+	let t = new Intl.NumberFormat(e).formatToParts(12345.6);
+	return {
+		group: t.find((e) => e.type === "group")?.value ?? "",
+		decimal: t.find((e) => e.type === "decimal")?.value ?? "."
+	};
+}
+var t = /[−‒–﹣－]/g, n = /^-?(\d+\.?\d*|\.\d+)$/;
+function r(e, r) {
+	let i = e.trim();
+	if (!i) return null;
+	let a = i.replace(t, "-");
+	return r.group && (a = a.split(r.group).join("")), a = a.replace(/\s/g, ""), r.decimal !== "." && (a = a.split(r.decimal).join(".")), a = a.replace(/[^\d.-]/g, ""), n.test(a) ? Number(a) : NaN;
+}
+function i(e) {
+	let t = String(e), n = t.indexOf("e-");
+	if (n >= 0) return Number(t.slice(n + 2)) + i(Number(t.slice(0, n)));
+	let r = t.indexOf(".");
+	return r < 0 ? 0 : t.length - r - 1;
+}
+function a(e, t) {
+	return Number(e.toFixed(Math.min(t, 100)));
+}
+function o(e, t) {
+	return Number((e * t).toPrecision(15));
+}
+function s(e, t, n) {
+	return n !== void 0 && e > n && (e = n), t !== void 0 && e < t && (e = t), e;
+}
+function c(e, t, n, r) {
+	let o = Math.max(i(n), i(r)), s = a((e - r) / n, 10);
+	return a(r + ((Number.isInteger(s) ? s : t > 0 ? Math.floor(s) : Math.ceil(s)) + t) * n, o);
+}
+//#endregion
+export { s as clamp, i as decimalsOf, e as numberSeparators, r as parseNumber, o as scale, c as stepValue };
+
+//# sourceMappingURL=number.js.map

package/dist/components/VNumberInput/number.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number.js","names":[],"sources":["../../../src/components/VNumberInput/number.ts"],"sourcesContent":["// @core\n/**\n * The arithmetic and the locale handling of VNumberInput, kept free of Vue: reading what was\n * typed, writing a value back for editing, and stepping on a grid without floating-point drift.\n */\n\n/** The two separators a locale writes numbers with: \"1 234,5\" in French, \"1,234.5\" in English. */\nexport interface NumberSeparators {\n  group: string\n  decimal: string\n}\n\nexport function numberSeparators(locale: string): NumberSeparators {\n  const parts = new Intl.NumberFormat(locale).formatToParts(12345.6)\n  return {\n    group: parts.find((part) => part.type === 'group')?.value ?? '',\n    decimal: parts.find((part) => part.type === 'decimal')?.value ?? '.',\n  }\n}\n\n/** The minus signs a keyboard or a paste can bring, besides the hyphen. */\nconst MINUS = /[−‒–﹣－]/g\n\n/** What a number may look like once separators and symbols are gone: \"-12\", \"3.\", \".5\". */\nconst PLAIN = /^-?(\\d+\\.?\\d*|\\.\\d+)$/\n\n/**\n * Reads a typed number: `null` for an empty field, `NaN` for text that is not a number.\n *\n * Group separators and any space are dropped, the locale's decimal separator becomes a point,\n * and a point is also accepted as the decimal separator where the locale does not group with\n * it. Currency, unit and percent symbols are ignored, so a formatted value pasted back in reads\n * as the number it shows.\n */\nexport function parseNumber(text: string, separators: NumberSeparators): number | null {\n  const trimmed = text.trim()\n  if (!trimmed) return null\n  let plain = trimmed.replace(MINUS, '-')\n  if (separators.group) plain = plain.split(separators.group).join('')\n  plain = plain.replace(/\\s/g, '')\n  if (separators.decimal !== '.') plain = plain.split(separators.decimal).join('.')\n  plain = plain.replace(/[^\\d.-]/g, '')\n  return PLAIN.test(plain) ? Number(plain) : Number.NaN\n}\n\n/** The number of decimals a value is written with: 0.25 has two, 1e-7 has seven. */\nexport function decimalsOf(value: number): number {\n  const text = String(value)\n  const exponent = text.indexOf('e-')\n  if (exponent >= 0)\n    return Number(text.slice(exponent + 2)) + decimalsOf(Number(text.slice(0, exponent)))\n  const point = text.indexOf('.')\n  return point < 0 ? 0 : text.length - point - 1\n}\n\n/** Rounds to a number of decimals, which is what removes the drift of 0.1 + 0.2. */\nfunction roundTo(value: number, decimals: number): number {\n  return Number(value.toFixed(Math.min(decimals, 100)))\n}\n\n/** Multiplies by a power of ten without picking up drift: 0.07 × 100 is 7, not 7.000000000000001. */\nexport function scale(value: number, factor: number): number {\n  return Number((value * factor).toPrecision(15))\n}\n\nexport function clamp(value: number, min: number | undefined, max: number | undefined): number {\n  if (max !== undefined && value > max) value = max\n  if (min !== undefined && value < min) value = min\n  return value\n}\n\n/**\n * Moves a value by a number of steps on the grid that starts at `base`. A value off the grid\n * lands on the next grid line in the direction of travel first, as a native number input does:\n * up from 1.5 by a step of 1 gives 2, not 2.5.\n */\nexport function stepValue(value: number, steps: number, step: number, base: number): number {\n  const decimals = Math.max(decimalsOf(step), decimalsOf(base))\n  const position = roundTo((value - base) / step, 10)\n  const onGrid = Number.isInteger(position)\n  const from = onGrid ? position : steps > 0 ? Math.floor(position) : Math.ceil(position)\n  return roundTo(base + (from + steps) * step, decimals)\n}\n"],"mappings":";AAYA,SAAgB,EAAiB,GAAkC;CACjE,IAAM,IAAQ,IAAI,KAAK,aAAa,CAAM,CAAC,CAAC,cAAc,OAAO;CACjE,OAAO;EACL,OAAO,EAAM,MAAM,MAAS,EAAK,SAAS,OAAO,CAAC,EAAE,SAAS;EAC7D,SAAS,EAAM,MAAM,MAAS,EAAK,SAAS,SAAS,CAAC,EAAE,SAAS;CACnE;AACF;AAGA,IAAM,IAAQ,YAGR,IAAQ;AAUd,SAAgB,EAAY,GAAc,GAA6C;CACrF,IAAM,IAAU,EAAK,KAAK;CAC1B,IAAI,CAAC,GAAS,OAAO;CACrB,IAAI,IAAQ,EAAQ,QAAQ,GAAO,GAAG;CAKtC,OAJI,EAAW,UAAO,IAAQ,EAAM,MAAM,EAAW,KAAK,CAAC,CAAC,KAAK,EAAE,IACnE,IAAQ,EAAM,QAAQ,OAAO,EAAE,GAC3B,EAAW,YAAY,QAAK,IAAQ,EAAM,MAAM,EAAW,OAAO,CAAC,CAAC,KAAK,GAAG,IAChF,IAAQ,EAAM,QAAQ,YAAY,EAAE,GAC7B,EAAM,KAAK,CAAK,IAAI,OAAO,CAAK,IAAI;AAC7C;AAGA,SAAgB,EAAW,GAAuB;CAChD,IAAM,IAAO,OAAO,CAAK,GACnB,IAAW,EAAK,QAAQ,IAAI;CAClC,IAAI,KAAY,GACd,OAAO,OAAO,EAAK,MAAM,IAAW,CAAC,CAAC,IAAI,EAAW,OAAO,EAAK,MAAM,GAAG,CAAQ,CAAC,CAAC;CACtF,IAAM,IAAQ,EAAK,QAAQ,GAAG;CAC9B,OAAO,IAAQ,IAAI,IAAI,EAAK,SAAS,IAAQ;AAC/C;AAGA,SAAS,EAAQ,GAAe,GAA0B;CACxD,OAAO,OAAO,EAAM,QAAQ,KAAK,IAAI,GAAU,GAAG,CAAC,CAAC;AACtD;AAGA,SAAgB,EAAM,GAAe,GAAwB;CAC3D,OAAO,QAAQ,IAAQ,EAAA,CAAQ,YAAY,EAAE,CAAC;AAChD;AAEA,SAAgB,EAAM,GAAe,GAAyB,GAAiC;CAG7F,OAFI,MAAQ,KAAA,KAAa,IAAQ,MAAK,IAAQ,IAC1C,MAAQ,KAAA,KAAa,IAAQ,MAAK,IAAQ,IACvC;AACT;AAOA,SAAgB,EAAU,GAAe,GAAe,GAAc,GAAsB;CAC1F,IAAM,IAAW,KAAK,IAAI,EAAW,CAAI,GAAG,EAAW,CAAI,CAAC,GACtD,IAAW,GAAS,IAAQ,KAAQ,GAAM,EAAE;CAGlD,OAAO,EAAQ,MAFA,OAAO,UAAU,CACnB,IAAS,IAAW,IAAQ,IAAI,KAAK,MAAM,CAAQ,IAAI,KAAK,KAAK,CAAQ,KACxD,KAAS,GAAM,CAAQ;AACvD"}

package/dist/components/VPagination/VPagination.d.ts

@@ -141,10 +141,10 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {
     size: PaginationSize;
     length: number;
     tone: PaginationTone;
-    elevated: boolean;
     compact: boolean;
     href: (page: number) => string;
     disabled: boolean;
+    elevated: boolean;
     detached: boolean;
     bordered: boolean;
     totalVisible: number;