@canutin/svelte-currency-input 1.1.0 → 1.1.2

package/dist/currency-input.svelte

@@ -1,351 +1,249 @@
-<script lang="ts">
-	import type { HTMLInputAttributes } from 'svelte/elements';
-	import type {
-		IntlConfig,
-		CurrencyInputValues,
-		CleanValueOptions,
-		FormatValueOptions
-	} from './types';
-	import {
-		isNumber,
-		cleanValue,
-		fixedDecimalValue,
-		formatValue,
-		getLocaleConfig,
-		padTrimValue,
-		getSuffix,
-		repositionCursor
-	} from './utils/index';
-
-	type Props = Omit<HTMLInputAttributes, 'value'> & {
-		value?: string;
-		intlConfig?: IntlConfig;
-		prefix?: string;
-		suffix?: string;
-		decimalSeparator?: string;
-		groupSeparator?: string;
-		allowDecimals?: boolean;
-		decimalsLimit?: number;
-		decimalScale?: number;
-		fixedDecimalLength?: number;
-		allowNegativeValue?: boolean;
-		min?: number;
-		max?: number;
-		maxLength?: number;
-		step?: number;
-		disableGroupSeparators?: boolean;
-		disableAbbreviations?: boolean;
-		formatValueOnBlur?: boolean;
-		transformRawValue?: (rawValue: string) => string;
-		oninputvalue?: (values: CurrencyInputValues) => void;
-		onchangevalue?: (values: CurrencyInputValues) => void;
-		ref?: HTMLInputElement | null;
-	};
-
-	let {
-		value = $bindable(''),
-		intlConfig,
-		prefix: userPrefix,
-		suffix: userSuffix,
-		decimalSeparator: _decimalSeparator,
-		groupSeparator: _groupSeparator,
-		allowDecimals = true,
-		decimalsLimit,
-		decimalScale,
-		fixedDecimalLength,
-		allowNegativeValue = true,
-		min,
-		max,
-		maxLength: userMaxLength,
-		step,
-		disableGroupSeparators = false,
-		disableAbbreviations = false,
-		formatValueOnBlur = true,
-		transformRawValue,
-		oninputvalue,
-		onchangevalue,
-		ref = $bindable(null),
-		...restProps
-	}: Props = $props();
-
-	$effect(() => {
-		if (_decimalSeparator && isNumber(_decimalSeparator)) {
-			throw new Error('decimalSeparator cannot be a number');
-		}
-
-		if (_groupSeparator && isNumber(_groupSeparator)) {
-			throw new Error('groupSeparator cannot be a number');
-		}
-	});
-
-	let localeConfig = $derived(getLocaleConfig(intlConfig));
-	let decimalSeparator = $derived(_decimalSeparator || localeConfig.decimalSeparator || '');
-	let groupSeparator = $derived(_groupSeparator || localeConfig.groupSeparator || '');
-	let prefix = $derived(userPrefix ?? localeConfig.prefix);
-	let suffix = $derived(userSuffix ?? '');
-
-	$effect(() => {
-		if (
-			decimalSeparator &&
-			groupSeparator &&
-			decimalSeparator === groupSeparator &&
-			disableGroupSeparators === false
-		) {
-			throw new Error('decimalSeparator cannot be the same as groupSeparator');
-		}
-	});
-
-	let formatValueOptions = $derived<Partial<FormatValueOptions>>({
-		decimalSeparator,
-		groupSeparator,
-		disableGroupSeparators,
-		intlConfig,
-		prefix,
-		suffix
-	});
-
-	let cleanValueOptions = $derived<Partial<CleanValueOptions>>({
-		decimalSeparator,
-		groupSeparator,
-		allowDecimals,
-		decimalsLimit: decimalsLimit ?? fixedDecimalLength ?? 2,
-		allowNegativeValue,
-		disableAbbreviations,
-		prefix,
-		transformRawValue
-	});
-
-	let stateValue = $state('');
-	let dirty = $state(false);
-	let cursor = $state(0);
-	let changeCount = $state(0);
-	let lastKeyStroke = $state<string | null>(null);
-
-	$effect(() => {
-		if (stateValue === '-' || (decimalSeparator && stateValue === decimalSeparator)) {
-			return;
-		}
-		if (value !== undefined && value !== null && value !== '') {
-			const formatted = formatValue({
-				...formatValueOptions,
-				decimalScale: dirty ? undefined : decimalScale,
-				value: String(value)
-			});
-			if (!dirty) {
-				stateValue = formatted;
-			}
-		} else if (!dirty) {
-			stateValue = '';
-		}
-	});
-
-	$effect(() => {
-		if (dirty && stateValue !== '-' && ref && document.activeElement === ref) {
-			ref.setSelectionRange(cursor, cursor);
-		}
-	});
-
-	function processChange(inputValue: string, selectionStart?: number | null): void {
-		dirty = true;
-
-		const { modifiedValue, cursorPosition } = repositionCursor({
-			selectionStart,
-			value: inputValue,
-			lastKeyStroke,
-			stateValue,
-			groupSeparator
-		});
-
-		const stringValue = cleanValue({ value: modifiedValue, ...cleanValueOptions });
-
-		if (userMaxLength && stringValue.replace(/-/g, '').length > userMaxLength) {
-			if (ref) {
-				ref.value = stateValue;
-				const cursorPos = Math.min(selectionStart ?? 0, stateValue.length);
-				ref.setSelectionRange(cursorPos, cursorPos);
-			}
-			return;
-		}
-
-		if (stringValue === '' || stringValue === '-' || stringValue === decimalSeparator) {
-			value = '';
-			stateValue = stringValue;
-			cursor = 1;
-
-			if (ref) {
-				ref.value = stringValue;
-				ref.setSelectionRange(cursor, cursor);
-			}
-
-			const values: CurrencyInputValues = { float: null, formatted: '', value: '' };
-			oninputvalue?.(values);
-			return;
-		}
-
-		const stringValueWithoutSeparator = decimalSeparator
-			? stringValue.replace(decimalSeparator, '.')
-			: stringValue;
-
-		const numberValue = parseFloat(stringValueWithoutSeparator);
-
-		const formattedValue = formatValue({
-			value: stringValue,
-			...formatValueOptions
-		});
-
-		let newCursor = cursorPosition ?? formattedValue.length;
-		if (cursorPosition != null) {
-			newCursor = cursorPosition + (formattedValue.length - inputValue.length);
-			newCursor = newCursor <= 0 ? (prefix ? prefix.length : 0) : newCursor;
-		}
-
-		cursor = newCursor;
-		changeCount = changeCount + 1;
-		stateValue = formattedValue;
-		value = stringValue;
-
-		if (ref) {
-			ref.value = formattedValue;
-			ref.setSelectionRange(cursor, cursor);
-		}
-
-		const values: CurrencyInputValues = {
-			float: numberValue,
-			formatted: formattedValue,
-			value: stringValue
-		};
-		oninputvalue?.(values);
-	}
-
-	function handleInput(event: Event): void {
-		const target = event.target as HTMLInputElement;
-		const { value: inputValue, selectionStart } = target;
-
-		processChange(inputValue, selectionStart);
-	}
-
-	function handleBlur(event: FocusEvent): void {
-		const target = event.target as HTMLInputElement;
-		const { value: inputValue } = target;
-
-		const valueOnly = cleanValue({ value: inputValue, ...cleanValueOptions });
-
-		if (valueOnly === '-' || valueOnly === decimalSeparator || !valueOnly) {
-			stateValue = '';
-			value = '';
-			dirty = false;
-			return;
-		}
-
-		const fixedDecimals = fixedDecimalValue(valueOnly, decimalSeparator, fixedDecimalLength);
-
-		const newValue = padTrimValue(
-			fixedDecimals,
-			decimalSeparator,
-			decimalScale !== undefined ? decimalScale : fixedDecimalLength
-		);
-
-		const stringValueWithoutSeparator = decimalSeparator
-			? newValue.replace(decimalSeparator, '.')
-			: newValue;
-
-		const numberValue = parseFloat(stringValueWithoutSeparator);
-
-		const formattedValue = formatValue({
-			...formatValueOptions,
-			value: newValue
-		});
-
-		if (formatValueOnBlur) {
-			stateValue = formattedValue;
-			value = newValue;
-
-			const values: CurrencyInputValues = {
-				float: numberValue,
-				formatted: formattedValue,
-				value: newValue
-			};
-			onchangevalue?.(values);
-		}
-
-		dirty = false;
-	}
-
-	function handleKeyDown(event: KeyboardEvent): void {
-		const { key } = event;
-
-		lastKeyStroke = key;
-
-		if (step && (key === 'ArrowUp' || key === 'ArrowDown')) {
-			event.preventDefault();
-			cursor = stateValue.length;
-
-			const stringValueWithoutSeparator =
-				decimalSeparator && value ? value.replace(decimalSeparator, '.') : value;
-
-			const currentValue =
-				parseFloat(
-					stringValueWithoutSeparator != null && stringValueWithoutSeparator !== ''
-						? stringValueWithoutSeparator
-						: cleanValue({ value: stateValue, ...cleanValueOptions })
-				) || 0;
-			const newValue = key === 'ArrowUp' ? currentValue + step : currentValue - step;
-
-			if ((min !== undefined && newValue < min) || (!allowNegativeValue && newValue < 0)) {
-				return;
-			}
-
-			if (max !== undefined && newValue > max) {
-				return;
-			}
-
-			const fixedLength = String(step).includes('.')
-				? Number(String(step).split('.')[1].length)
-				: undefined;
-
-			processChange(
-				String(fixedLength ? newValue.toFixed(fixedLength) : newValue).replace(
-					'.',
-					decimalSeparator
-				)
-			);
-		}
-	}
-
-	function handleKeyUp(event: KeyboardEvent): void {
-		const { key } = event;
-		const target = event.currentTarget as HTMLInputElement;
-		const { selectionStart } = target;
-
-		if (key !== 'ArrowUp' && key !== 'ArrowDown' && stateValue !== '-') {
-			const suffixValue = getSuffix(stateValue, { groupSeparator, decimalSeparator });
-
-			if (
-				suffixValue &&
-				selectionStart &&
-				selectionStart > stateValue.length - suffixValue.length
-			) {
-				if (ref) {
-					const newCursor = stateValue.length - suffixValue.length;
-					ref.setSelectionRange(newCursor, newCursor);
-				}
-			}
-		}
-	}
-
-	let displayValue = $derived.by(() => {
-		if (stateValue === '-' || stateValue === decimalSeparator) {
-			return stateValue;
-		}
-		if (value !== undefined && value !== null && value !== '') {
-			return formatValue({
-				...formatValueOptions,
-				decimalScale: dirty ? undefined : decimalScale,
-				value: String(value)
-			});
-		}
-		return stateValue;
-	});
+<script lang="ts">import {
+  isNumber,
+  cleanValue,
+  fixedDecimalValue,
+  formatValue,
+  getLocaleConfig,
+  padTrimValue,
+  getSuffix,
+  repositionCursor
+} from "./utils/index";
+let {
+  value = $bindable(""),
+  intlConfig,
+  prefix: userPrefix,
+  suffix: userSuffix,
+  decimalSeparator: _decimalSeparator,
+  groupSeparator: _groupSeparator,
+  allowDecimals = true,
+  decimalsLimit,
+  decimalScale,
+  fixedDecimalLength,
+  allowNegativeValue = true,
+  min,
+  max,
+  maxLength: userMaxLength,
+  step,
+  disableGroupSeparators = false,
+  disableAbbreviations = false,
+  formatValueOnBlur = true,
+  transformRawValue,
+  oninputvalue,
+  onchangevalue,
+  ref = $bindable(null),
+  ...restProps
+} = $props();
+$effect(() => {
+  if (_decimalSeparator && isNumber(_decimalSeparator)) {
+    throw new Error("decimalSeparator cannot be a number");
+  }
+  if (_groupSeparator && isNumber(_groupSeparator)) {
+    throw new Error("groupSeparator cannot be a number");
+  }
+});
+let localeConfig = $derived(getLocaleConfig(intlConfig));
+let decimalSeparator = $derived(_decimalSeparator || localeConfig.decimalSeparator || "");
+let groupSeparator = $derived(_groupSeparator || localeConfig.groupSeparator || "");
+let prefix = $derived(userPrefix ?? localeConfig.prefix);
+let suffix = $derived(userSuffix ?? "");
+$effect(() => {
+  if (decimalSeparator && groupSeparator && decimalSeparator === groupSeparator && disableGroupSeparators === false) {
+    throw new Error("decimalSeparator cannot be the same as groupSeparator");
+  }
+});
+let formatValueOptions = $derived({
+  decimalSeparator,
+  groupSeparator,
+  disableGroupSeparators,
+  intlConfig,
+  prefix,
+  suffix
+});
+let cleanValueOptions = $derived({
+  decimalSeparator,
+  groupSeparator,
+  allowDecimals,
+  decimalsLimit: decimalsLimit ?? fixedDecimalLength ?? 2,
+  allowNegativeValue,
+  disableAbbreviations,
+  prefix,
+  transformRawValue
+});
+let stateValue = $state("");
+let dirty = $state(false);
+let cursor = $state(0);
+let changeCount = $state(0);
+let lastKeyStroke = $state(null);
+$effect(() => {
+  if (stateValue === "-" || decimalSeparator && stateValue === decimalSeparator) {
+    return;
+  }
+  if (value !== void 0 && value !== null && value !== "") {
+    const formatted = formatValue({
+      ...formatValueOptions,
+      decimalScale: dirty ? void 0 : decimalScale,
+      value: String(value)
+    });
+    if (!dirty) {
+      stateValue = formatted;
+    }
+  } else if (!dirty) {
+    stateValue = "";
+  }
+});
+$effect(() => {
+  if (dirty && stateValue !== "-" && ref && document.activeElement === ref) {
+    ref.setSelectionRange(cursor, cursor);
+  }
+});
+function processChange(inputValue, selectionStart) {
+  dirty = true;
+  const { modifiedValue, cursorPosition } = repositionCursor({
+    selectionStart,
+    value: inputValue,
+    lastKeyStroke,
+    stateValue,
+    groupSeparator
+  });
+  const stringValue = cleanValue({ value: modifiedValue, ...cleanValueOptions });
+  if (userMaxLength && stringValue.replace(/-/g, "").length > userMaxLength) {
+    if (ref) {
+      ref.value = stateValue;
+      const cursorPos = Math.min(selectionStart ?? 0, stateValue.length);
+      ref.setSelectionRange(cursorPos, cursorPos);
+    }
+    return;
+  }
+  if (stringValue === "" || stringValue === "-" || stringValue === decimalSeparator) {
+    value = "";
+    stateValue = stringValue;
+    cursor = 1;
+    if (ref) {
+      ref.value = stringValue;
+      ref.setSelectionRange(cursor, cursor);
+    }
+    const values2 = { float: null, formatted: "", value: "" };
+    oninputvalue?.(values2);
+    return;
+  }
+  const stringValueWithoutSeparator = decimalSeparator ? stringValue.replace(decimalSeparator, ".") : stringValue;
+  const numberValue = parseFloat(stringValueWithoutSeparator);
+  const formattedValue = formatValue({
+    value: stringValue,
+    ...formatValueOptions
+  });
+  let newCursor = cursorPosition ?? formattedValue.length;
+  if (cursorPosition != null) {
+    newCursor = cursorPosition + (formattedValue.length - inputValue.length);
+    newCursor = newCursor <= 0 ? prefix ? prefix.length : 0 : newCursor;
+  }
+  cursor = newCursor;
+  changeCount = changeCount + 1;
+  stateValue = formattedValue;
+  value = stringValue;
+  if (ref) {
+    ref.value = formattedValue;
+    ref.setSelectionRange(cursor, cursor);
+  }
+  const values = {
+    float: numberValue,
+    formatted: formattedValue,
+    value: stringValue
+  };
+  oninputvalue?.(values);
+}
+function handleInput(event) {
+  const target = event.target;
+  const { value: inputValue, selectionStart } = target;
+  processChange(inputValue, selectionStart);
+}
+function handleBlur(event) {
+  const target = event.target;
+  const { value: inputValue } = target;
+  const valueOnly = cleanValue({ value: inputValue, ...cleanValueOptions });
+  if (valueOnly === "-" || valueOnly === decimalSeparator || !valueOnly) {
+    stateValue = "";
+    value = "";
+    dirty = false;
+    return;
+  }
+  const fixedDecimals = fixedDecimalValue(valueOnly, decimalSeparator, fixedDecimalLength);
+  const newValue = padTrimValue(
+    fixedDecimals,
+    decimalSeparator,
+    decimalScale !== void 0 ? decimalScale : fixedDecimalLength
+  );
+  const stringValueWithoutSeparator = decimalSeparator ? newValue.replace(decimalSeparator, ".") : newValue;
+  const numberValue = parseFloat(stringValueWithoutSeparator);
+  const formattedValue = formatValue({
+    ...formatValueOptions,
+    value: newValue
+  });
+  if (formatValueOnBlur) {
+    stateValue = formattedValue;
+    value = newValue;
+    const values = {
+      float: numberValue,
+      formatted: formattedValue,
+      value: newValue
+    };
+    onchangevalue?.(values);
+  }
+  dirty = false;
+}
+function handleKeyDown(event) {
+  const { key } = event;
+  lastKeyStroke = key;
+  if (step && (key === "ArrowUp" || key === "ArrowDown")) {
+    event.preventDefault();
+    cursor = stateValue.length;
+    const stringValueWithoutSeparator = decimalSeparator && value ? value.replace(decimalSeparator, ".") : value;
+    const currentValue = parseFloat(
+      stringValueWithoutSeparator != null && stringValueWithoutSeparator !== "" ? stringValueWithoutSeparator : cleanValue({ value: stateValue, ...cleanValueOptions })
+    ) || 0;
+    const newValue = key === "ArrowUp" ? currentValue + step : currentValue - step;
+    if (min !== void 0 && newValue < min || !allowNegativeValue && newValue < 0) {
+      return;
+    }
+    if (max !== void 0 && newValue > max) {
+      return;
+    }
+    const fixedLength = String(step).includes(".") ? Number(String(step).split(".")[1].length) : void 0;
+    processChange(
+      String(fixedLength ? newValue.toFixed(fixedLength) : newValue).replace(
+        ".",
+        decimalSeparator
+      )
+    );
+  }
+}
+function handleKeyUp(event) {
+  const { key } = event;
+  const target = event.currentTarget;
+  const { selectionStart } = target;
+  if (key !== "ArrowUp" && key !== "ArrowDown" && stateValue !== "-") {
+    const suffixValue = getSuffix(stateValue, { groupSeparator, decimalSeparator });
+    if (suffixValue && selectionStart && selectionStart > stateValue.length - suffixValue.length) {
+      if (ref) {
+        const newCursor = stateValue.length - suffixValue.length;
+        ref.setSelectionRange(newCursor, newCursor);
+      }
+    }
+  }
+}
+let displayValue = $derived.by(() => {
+  if (stateValue === "-" || stateValue === decimalSeparator) {
+    return stateValue;
+  }
+  if (value !== void 0 && value !== null && value !== "") {
+    return formatValue({
+      ...formatValueOptions,
+      decimalScale: dirty ? void 0 : decimalScale,
+      value: String(value)
+    });
+  }
+  return stateValue;
+});
 </script>
 
 <input

package/dist/utils/parseAbbrValue.js

@@ -17,7 +17,16 @@ export const parseAbbrValue = (value, decimalSeparator = '.') => {
     if (match) {
         const [, digits, , abbr] = match;
         const multiplier = abbrMap[abbr.toLowerCase()];
-        return Number(digits.replace(decimalSeparator, '.')) * multiplier;
+        const result = Number(digits.replace(decimalSeparator, '.')) * multiplier;
+        // Round based on input precision to avoid floating-point errors
+        // e.g. 4.1 * 1000000 = 4099999.9999999995 should become 4100000
+        // but 1.12345678 * 1000 = 1123.45678 should preserve all decimals
+        const decimalPart = digits.split(decimalSeparator)[1] || '';
+        const inputDecimals = decimalPart.length;
+        const multiplierZeros = Math.log10(multiplier);
+        const resultDecimals = Math.max(0, inputDecimals - multiplierZeros);
+        const precision = Math.pow(10, resultDecimals);
+        return Math.round(result * precision) / precision;
     }
     return undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@canutin/svelte-currency-input",
-	"version": "1.1.0",
+	"version": "1.1.2",
 	"engines": {
 		"node": ">=22"
 	},