@vunset/vue 1.0.0-rc.2 → 1.0.0-rc.4

package/dist/components/chart/ChartAxis.vue.d.ts

@@ -12,6 +12,8 @@ type __VLS_Props = {
     numTicks?: number;
     /** Cut long row labels rather than dropping the ones that would collide. */
     trimLabels?: boolean;
+    /** A title along the axis, such as its unit. */
+    label?: 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;

package/dist/components/chart/ChartAxis.vue_vue_type_script_setup_true_lang.js

@@ -10,7 +10,8 @@ var ChartAxis_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		side: {},
 		format: { type: Function },
 		numTicks: {},
-		trimLabels: { type: Boolean }
+		trimLabels: { type: Boolean },
+		label: {}
 	},
 	setup(__props) {
 		const props = __props;

package/dist/components/chart/ChartDonut.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
 import { useChartSeries } from "./use-chart-series.js";
-import { chartName } from "./chart-scales.js";
+import { SVG_ANIMATION, chartName } from "./chart-scales.js";
 import ChartFrame_default from "./ChartFrame.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, defineComponent, guardReactiveProps, mergeProps, normalizeProps, normalizeStyle, openBlock, renderSlot, toDisplayString, withCtx } from "vue";
 import { formatNumber } from "@vunset/utils";
@@ -83,6 +83,7 @@ var ChartDonut_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			const width = props.arcWidth;
 			const cornerRadius = props.cornerRadius;
 			return defineChart({
+				svgAnimation: SVG_ANIMATION,
 				marks: [polar({
 					marks: [radialArc(pie(shown.value, {
 						value: "size",

package/dist/components/chart/ChartFrame.vue.d.ts

@@ -52,9 +52,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     /** Content before the drawing, such as a `ChartLegend`. */
     default(): unknown;
-    /** The tooltip's content, for the point in focus. */
+    /** The tooltip's content, for the point in focus; `pinned` once a click holds it. */
     tooltip(props: {
         point: ChartPoint<any>;
+        pinned: boolean;
     }): unknown;
     /** Content laid over the plot, centered on it. */
     center?(): unknown;

package/dist/components/chart/ChartFrame.vue_vue_type_script_setup_true_lang.js

@@ -49,7 +49,13 @@ var ChartFrame_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			emit("render", context);
 		}
 		const height = computed(() => typeof props.height === "number" ? `${props.height}px` : props.height);
-		const tooltipBody = ({ primaryPoint }) => primaryPoint ? h("div", mergeProps({ "data-part": "chart-tooltip" }, props.tooltipAttrs?.() ?? {}), [h("div", { "data-part": "tooltip" }, slots.tooltip({ point: primaryPoint }))]) : null;
+		const tooltipBody = ({ primaryPoint, pinned }) => primaryPoint ? h("div", mergeProps({
+			"data-part": "chart-tooltip",
+			"data-pinned": pinned ? "" : void 0
+		}, props.tooltipAttrs?.() ?? {}), [h("div", { "data-part": "tooltip" }, slots.tooltip({
+			point: primaryPoint,
+			pinned
+		}))]) : null;
 		const Drawing = defineComponent({
 			name: "ChartDrawing",
 			setup: () => () => h(Chart, {

package/dist/components/chart/ChartRoot.vue.d.ts

@@ -22,6 +22,7 @@ export interface ChartAxisPart {
     format?: (value: any) => string;
     numTicks?: number;
     trimLabels?: boolean;
+    label?: string;
 }
 export interface ChartGridPart {
     type: 'x' | 'y';
@@ -42,12 +43,17 @@ export interface ChartTooltipSlotProps<T = Record<string, any>> {
     row: T;
     /** Its `x-key` value, through the x axis' formatter. */
     heading: string;
-    /** The series showing, in order. */
+    /** The series showing, in order; in `point` mode, only the point's. */
     series: ChartTooltipSeries[];
+    /** Pinned in place by a click, Enter or Space. */
+    pinned: boolean;
 }
 export interface ChartTooltipPart {
     attrs: Record<string, unknown>;
     slot?: (props: ChartTooltipSlotProps) => unknown;
+    mode: 'row' | 'point';
+    sticky: boolean;
+    headingFormat?: (value: any) => string;
 }
 interface Parts {
     series: ChartSeriesPart;
@@ -83,6 +89,13 @@ declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNull
         data: T[];
         /** The key naming each row, along the x axis. */
         xKey: keyof T & string;
+        /**
+         * Where the rows sit along the x axis. `category` spaces them evenly, in
+         * order; `linear` places them by their `x-key` number; or pass a scale
+         * factory, such as d3-scale's `scaleUtc` for dates. Bars need `category`.
+         * @default 'category'
+         */
+        xScale?: "category" | "linear" | (() => unknown);
         /** A number means pixels. @default '20rem' */
         height?: number | string;
         /** Which way the bars grow, and so which way the rows run. @default 'vertical' */

package/dist/components/chart/ChartRoot.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { createContext } from "../../shared/context.js";
 import { useChartSeries } from "./use-chart-series.js";
-import { curveOf, plotted, rowFocus, rowLabel, rowTicks, tickLabels, valueLabel } from "./chart-scales.js";
+import { SVG_ANIMATION, curveOf, plotted, pointFocus, rowFocus, rowLabel, rowTicks, tickLabels, valueLabel } from "./chart-scales.js";
 import ChartFrame_default from "./ChartFrame.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderList, renderSlot, shallowRef, toDisplayString, unref, withCtx } from "vue";
 import { chartColors, formatNumber } from "@vunset/utils";
@@ -53,6 +53,10 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	props: {
 		data: {},
 		xKey: {},
+		xScale: {
+			type: [String, Function],
+			default: "category"
+		},
 		height: { default: "20rem" },
 		orientation: { default: "vertical" },
 		stacked: { type: Boolean },
@@ -97,6 +101,7 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			onHiddenChange: (next) => emit("update:hidden", next)
 		});
 		const horizontal = computed(() => props.orientation === "horizontal");
+		const continuous = computed(() => props.xScale !== "category");
 		const shownKeys = computed(() => visible.value.map((entry) => entry.category));
 		const shownColors = computed(() => visible.value.map((entry) => entry.color));
 		const shown = computed(() => series.value.filter((entry) => shownKeys.value.includes(entry.yKey)));
@@ -120,9 +125,12 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		});
 		const formatOf = (entry) => entry?.format ?? axisOf(entry?.scale ?? "y")?.format;
 		const xText = (row) => rowLabel(row, props.xKey, xAxis.value?.format);
-		/** The row's series for the tooltip, one per key showing. */
-		function tooltipSeries(row) {
-			return shownKeys.value.map((key, index) => {
+		const headingText = (row) => rowLabel(row, props.xKey, tooltips.value[0]?.headingFormat ?? xAxis.value?.format);
+		const tooltip$1 = computed(() => tooltips.value[0]);
+		const pointMode = computed(() => tooltip$1.value?.mode === "point");
+		/** The row's series for the tooltip, one per key showing; in `point` mode, only `key`'s. */
+		function tooltipSeries(row, only) {
+			const list = shownKeys.value.map((key, index) => {
 				const value = row[key];
 				const format = formatOf(series.value.find((entry) => entry.yKey === key));
 				return {
@@ -133,21 +141,25 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					text: format ? format(value) : formatNumber(Number(value) || 0)
 				};
 			});
+			return pointMode.value && only !== void 0 ? list.filter((entry) => entry.key === only) : list;
 		}
-		const tooltipProps = (row) => ({
-			row,
-			heading: xText(row),
-			series: tooltipSeries(row)
+		const tooltipProps = (point, pinned) => ({
+			row: point.datum.row,
+			heading: headingText(point.datum.row),
+			series: tooltipSeries(point.datum.row, point.datum.category),
+			pinned
 		});
 		const band = shallowRef();
 		const tickSize = shallowRef();
-		const fits = computed(() => xAxis.value?.trimLabels && !horizontal.value && band.value !== void 0 ? Math.max(1, Math.floor(band.value / ((tickSize.value ?? 11) * .6))) : void 0);
+		const fits = computed(() => xAxis.value?.trimLabels && !horizontal.value && !continuous.value && band.value !== void 0 ? Math.max(1, Math.floor(band.value / ((tickSize.value ?? 11) * .6))) : void 0);
 		const trim = (label, fits) => fits !== void 0 && label.length > fits ? `${label.slice(0, Math.max(1, fits - 1))}…` : label;
 		const areaGradient = (key) => `area-${colorIndex(key)}`;
 		const barGradient = (key) => `bar-${colorIndex(key)}`;
+		const at = (row, index) => continuous.value ? row[props.xKey] : index;
 		const pointsOf = (key, fill) => props.data.map((row, index) => ({
 			row,
 			index,
+			at: at(row, index),
 			category: key,
 			value: plotted(row[key]),
 			fill
@@ -159,6 +171,7 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			const data = props.data.flatMap((row, index) => bars.map((entry) => ({
 				row,
 				index,
+				at: index,
 				category: entry.yKey,
 				value: plotted(row[entry.yKey]),
 				fill: entry.gradient ? `url(#${barGradient(entry.yKey)})` : void 0
@@ -176,11 +189,11 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			return horizontal.value ? barX(data, {
 				...options,
 				x: "value",
-				y: "index",
+				y: "at",
 				xScale: valueId(first.scale)
 			}) : barY(data, {
 				...options,
-				x: "index",
+				x: "at",
 				y: "value",
 				yScale: valueId(first.scale)
 			});
@@ -190,10 +203,10 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			const channels = {
 				...horizontal.value ? {
 					x: "value",
-					y: "index",
+					y: "at",
 					xScale: valueId(entry.scale)
 				} : {
-					x: "index",
+					x: "at",
 					y: "value",
 					yScale: valueId(entry.scale)
 				},
@@ -264,7 +277,10 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			const marks = [];
 			let bars = false;
 			for (const entry of shown.value) if (entry.kind !== "bar") marks.push(...seriesMarks(entry));
-			else if (!bars) {
+			else if (continuous.value) {
+				if (process.env.NODE_ENV !== "production" && !bars) console.warn("[vunset] ChartBar needs `x-scale=\"category\"`: bars are left out on a continuous x axis.");
+				bars = true;
+			} else if (!bars) {
 				marks.push(barMark());
 				bars = true;
 			}
@@ -278,15 +294,29 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			const budget = fits.value;
 			const x = xAxis.value;
 			const firstBar = series.value.find((entry) => entry.kind === "bar");
-			const rowScale = {
+			const titled = (axis) => axis?.label ? { label: axis.label } : {};
+			const rowScale = continuous.value ? {
+				scale: props.xScale === "linear" ? scaleLinear : props.xScale,
+				grid: grids.value.some((entry) => entry.type === "x"),
+				axis: x ? {
+					line: false,
+					...tickLabels(tickSize.value),
+					...titled(x),
+					ticks: {
+						...x.format && { format: x.format },
+						...x.numTicks !== void 0 && { count: x.numTicks }
+					}
+				} : false
+			} : {
 				scale: firstBar ? () => scaleBand().padding(firstBar.padding ?? .1) : () => scalePoint().padding(0),
 				grid: grids.value.some((entry) => entry.type === "x"),
 				axis: x ? {
 					line: false,
 					...tickLabels(tickSize.value),
+					...titled(x),
 					ticks: {
 						format: (index) => trim(xText(props.data[index]), budget),
-						values: rowTicks(props.data.length, x.numTicks)
+						values: shown.value.length ? rowTicks(props.data.length, x.numTicks) : void 0
 					}
 				} : false
 			};
@@ -303,6 +333,7 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					axis: axis && axisShown(scale) ? {
 						line: false,
 						...tickLabels(tickSize.value),
+						...titled(axis),
 						ticks: {
 							format: (raw) => valueLabel(raw, axis.format),
 							...axis.numTicks !== void 0 && { count: axis.numTicks }
@@ -311,6 +342,7 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				}];
 			}));
 			return defineChart({
+				svgAnimation: SVG_ANIMATION,
 				marks,
 				scales: {
 					[rowId.value]: rowScale,
@@ -318,15 +350,16 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				},
 				color: { scale: scaleOrdinal().domain(shownKeys.value).range(shownColors.value) },
 				gradients: gradients(),
-				...rowFocus(horizontal.value),
-				tooltip: tooltips.value.length > 0 && {
+				...pointMode.value ? pointFocus : rowFocus(horizontal.value),
+				tooltip: tooltip$1.value && {
 					use: tooltip,
+					sticky: tooltip$1.value.sticky,
 					content: (points) => {
 						const row = points[0]?.datum.row;
 						if (!row) return { rows: [] };
 						return {
-							title: row[props.xKey] !== void 0 ? xText(row) : void 0,
-							rows: tooltipSeries(row).map((entry) => ({
+							title: row[props.xKey] !== void 0 ? headingText(row) : void 0,
+							rows: tooltipSeries(row, points[0].datum.category).map((entry) => ({
 								label: entry.label,
 								value: entry.text,
 								color: entry.color
@@ -348,7 +381,6 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				for (const label of svg.querySelectorAll(`text[data-ts-key^="${valueId(scale)}-tick-label"]`)) label.setAttribute("fill", color);
 			}
 		}
-		const tooltip$1 = computed(() => tooltips.value[0]);
 		const Render = (own) => own.render();
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(ChartFrame_default, mergeProps({
@@ -361,10 +393,10 @@ var ChartRoot_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				"tick-size": tickSize.value,
 				"onUpdate:tickSize": _cache[0] || (_cache[0] = ($event) => tickSize.value = $event)
 			}, _ctx.$attrs, { onRender }), {
-				tooltip: withCtx(({ point }) => [tooltip$1.value?.slot ? (openBlock(), createBlock(Render, {
+				tooltip: withCtx(({ point, pinned }) => [tooltip$1.value?.slot ? (openBlock(), createBlock(Render, {
 					key: 0,
-					render: () => tooltip$1.value.slot(tooltipProps(point.datum.row))
-				}, null, 8, ["render"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [point.datum.row[props.xKey] !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(xText(point.datum.row)), 1)) : createCommentVNode("", true), createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(tooltipSeries(point.datum.row), (entry) => {
+					render: () => tooltip$1.value.slot(tooltipProps(point, pinned))
+				}, null, 8, ["render"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [point.datum.row[props.xKey] !== void 0 ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString(headingText(point.datum.row)), 1)) : createCommentVNode("", true), createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(tooltipSeries(point.datum.row, point.datum.category), (entry) => {
 					return openBlock(), createElementBlock("div", {
 						key: entry.key,
 						"data-part": "tooltip-row"

package/dist/components/chart/ChartTooltip.vue.d.ts

@@ -1,9 +1,20 @@
 import { type ChartTooltipSlotProps } from './ChartRoot.vue';
+type __VLS_Props = {
+    /** `row`: every series at the row under the pointer. `point`: the one point nearest it. @default 'row' */
+    mode?: 'row' | 'point';
+    /** A click, Enter or Space pins it in place; another, or Escape, lets it go. @default true */
+    sticky?: boolean;
+    /** Formats the heading from the row's `x-key` value, apart from the x axis' ticks. Defaults to the x axis' `format`. */
+    headingFormat?: (value: any) => string;
+};
 type __VLS_Slots = {
     /** Replaces the content: a heading, then a row per series. */
     default?(props: ChartTooltipSlotProps): unknown;
 };
-declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sticky: boolean;
+    mode: "row" | "point";
+}, {}, {}, {}, 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;

package/dist/components/chart/ChartTooltip.vue_vue_type_script_setup_true_lang.js

@@ -5,12 +5,24 @@ var ChartTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ def
 	name: "ChartTooltip",
 	inheritAttrs: false,
 	__name: "ChartTooltip",
+	props: {
+		mode: { default: "row" },
+		sticky: {
+			type: Boolean,
+			default: true
+		},
+		headingFormat: {}
+	},
 	setup(__props) {
+		const props = __props;
 		const slots = useSlots();
 		const attrs = useAttrs();
 		useChartPart("tooltip", () => ({
 			attrs,
-			slot: slots.default
+			slot: slots.default,
+			mode: props.mode,
+			sticky: props.sticky,
+			headingFormat: props.headingFormat
 		}));
 		return (_ctx, _cache) => {
 			return null;

package/dist/components/chart/chart-scales.d.ts

@@ -6,6 +6,11 @@ import type { ChartCurve } from '@tanstack/charts';
 export declare function rowTicks(length: number, count: number | undefined): number[] | undefined;
 /** TanStack's own tick label size, in px, until `--chart-tick-font-size` sets one. */
 export declare const TICK_FONT_SIZE = 11;
+/** Tweens a redraw for new data or a toggled series; off under reduced motion, never on resize. */
+export declare const SVG_ANIMATION: {
+    readonly duration: 240;
+    readonly easing: "ease-out";
+};
 /** An axis' tick labels at `size` px; TanStack lays the axis out for it. */
 export declare const tickLabels: (size: number | undefined) => {
     tickLabels?: undefined;
@@ -28,6 +33,11 @@ export declare const rowFocus: (horizontal?: boolean) => {
     focus: "group-y" | "group-x";
     maxFocusDistance: number;
 };
+/** The one point nearest the pointer, however far. */
+export declare const pointFocus: {
+    focus: "nearest";
+    maxFocusDistance: number;
+};
 /** A chart's accessible name: what it plots, in the reader's words. */
 export declare const chartName: (categories: string[], labelFormat: ((category: string) => string) | undefined, fallback: string) => string;
 /** A line's run between its points: bending through them, or straight. TanStack draws straight by default. */

package/dist/components/chart/chart-scales.js

@@ -10,12 +10,19 @@ function rowTicks(length, count) {
 	const step = Math.max(1, Math.ceil(length / Math.max(1, count)));
 	return Array.from({ length }, (_, index) => index).filter((index) => index % step === 0);
 }
+/** Tweens a redraw for new data or a toggled series; off under reduced motion, never on resize. */
+var SVG_ANIMATION = {
+	duration: 240,
+	easing: "ease-out"
+};
 /** An axis' tick labels at `size` px; TanStack lays the axis out for it. */
 var tickLabels = (size) => size === void 0 ? {} : { tickLabels: { fontSize: size } };
 /** A row's `xKey` value as its axis label. */
 function rowLabel(row, xKey, format) {
 	const raw = row?.[xKey];
-	return raw === void 0 ? "" : format ? format(raw) : String(raw);
+	if (raw === void 0) return "";
+	if (format) return format(raw);
+	return raw instanceof Date ? raw.toLocaleString() : String(raw);
 }
 /** A value axis label: the caller's formatter, or a grouped number. */
 var valueLabel = (raw, format) => format ? format(raw) : formatNumber(raw);
@@ -29,6 +36,11 @@ var rowFocus = (horizontal = false) => ({
 	focus: horizontal ? "group-y" : "group-x",
 	maxFocusDistance: Number.POSITIVE_INFINITY
 });
+/** The one point nearest the pointer, however far. */
+var pointFocus = {
+	focus: "nearest",
+	maxFocusDistance: Number.POSITIVE_INFINITY
+};
 /** A chart's accessible name: what it plots, in the reader's words. */
 var chartName = (categories, labelFormat, fallback) => categories.map((category) => labelFormat ? labelFormat(category) : category).join(", ") || fallback;
 var SMOOTH = {
@@ -38,4 +50,4 @@ var SMOOTH = {
 /** A line's run between its points: bending through them, or straight. TanStack draws straight by default. */
 var curveOf = (curve) => curve === "smooth" ? SMOOTH : void 0;
 //#endregion
-export { chartName, curveOf, plotted, rowFocus, rowLabel, rowTicks, tickLabels, valueLabel };
+export { SVG_ANIMATION, chartName, curveOf, plotted, pointFocus, rowFocus, rowLabel, rowTicks, tickLabels, valueLabel };

package/dist/shared/use-input.js

@@ -20,12 +20,19 @@ function useInput(options = {}) {
 	});
 	const invalid = () => (toValue(options.invalid) ?? false) || (field?.state.value.invalid ?? false) || outsideLimits();
 	const normalize = (raw) => raw == null ? void 0 : String(raw);
+	const typed = ref();
 	const value = useControlled({
-		value: () => normalize(toValue(options.value)),
+		value: () => {
+			const raw = toValue(options.value);
+			return typeof raw === "number" && typed.value !== void 0 && parseFloat(typed.value) === raw ? typed.value : normalize(raw);
+		},
 		defaultValue: () => normalize(toValue(options.defaultValue)) ?? "",
 		prop: "modelValue",
 		empty: "",
-		onChange: options.onChange,
+		onChange: (next) => {
+			typed.value = next;
+			options.onChange?.(next);
+		},
 		name: "useInput",
 		label: "value"
 	});
@@ -108,7 +115,15 @@ function useInput(options = {}) {
 				const element = event.target;
 				const inserted = insertedText(event);
 				if (inserted === null) return;
-				if (!accepts(prospectiveValue(element, inserted) ?? element.value + inserted)) event.preventDefault();
+				if (accepts(prospectiveValue(element, inserted) ?? element.value + inserted)) return;
+				event.preventDefault();
+				if (!numeric() || !/^insertFrom(Paste|Drop)/.test(event.inputType)) return;
+				const cleaned = inserted.replace(/[,\s]/g, "");
+				const start = element.selectionStart ?? element.value.length;
+				const end = element.selectionEnd ?? element.value.length;
+				if (!accepts(element.value.slice(0, start) + cleaned + element.value.slice(end))) return;
+				element.setRangeText(cleaned, start, end, "end");
+				handleInput({ target: element });
 			},
 			onInput(event) {
 				if (composing) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vunset/vue",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "description": "Headless, unstyled Vue 3 components: keyboard, focus and ARIA handled, the look left to you.",
   "keywords": [
     "vue",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^2.0.1",
-    "@vunset/utils": "1.0.0-rc.2"
+    "@vunset/utils": "1.0.0-rc.4"
   },
   "peerDependencies": {
     "@tanstack/charts": "^1.1.0",