@canutin/svelte-currency-input 0.13.0 → 1.0.0-next.7

package/dist/utils/getSuffix.d.ts

@@ -0,0 +1,6 @@
+type Options = {
+    decimalSeparator?: string;
+    groupSeparator?: string;
+};
+export declare const getSuffix: (value: string, { groupSeparator, decimalSeparator }: Options) => string | undefined;
+export {};

package/dist/utils/getSuffix.js

@@ -0,0 +1,6 @@
+import { escapeRegExp } from './escapeRegExp';
+export const getSuffix = (value, { groupSeparator = ',', decimalSeparator = '.' }) => {
+    const suffixReg = new RegExp(`\\d([^${escapeRegExp(groupSeparator)}${escapeRegExp(decimalSeparator)}0-9]+)`);
+    const suffixMatch = value.match(suffixReg);
+    return suffixMatch ? suffixMatch[1] : undefined;
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,13 @@
+export { addSeparators } from './addSeparators';
+export { cleanValue } from './cleanValue';
+export { escapeRegExp } from './escapeRegExp';
+export { fixedDecimalValue } from './fixedDecimalValue';
+export { formatValue } from './formatValue';
+export { getLocaleConfig } from './getLocaleConfig';
+export { getSuffix } from './getSuffix';
+export { isNumber } from './isNumber';
+export { padTrimValue } from './padTrimValue';
+export { parseAbbrValue, abbrValue } from './parseAbbrValue';
+export { removeInvalidChars } from './removeInvalidChars';
+export { removeSeparators } from './removeSeparators';
+export { repositionCursor } from './repositionCursor';

package/dist/utils/index.js

@@ -0,0 +1,13 @@
+export { addSeparators } from './addSeparators';
+export { cleanValue } from './cleanValue';
+export { escapeRegExp } from './escapeRegExp';
+export { fixedDecimalValue } from './fixedDecimalValue';
+export { formatValue } from './formatValue';
+export { getLocaleConfig } from './getLocaleConfig';
+export { getSuffix } from './getSuffix';
+export { isNumber } from './isNumber';
+export { padTrimValue } from './padTrimValue';
+export { parseAbbrValue, abbrValue } from './parseAbbrValue';
+export { removeInvalidChars } from './removeInvalidChars';
+export { removeSeparators } from './removeSeparators';
+export { repositionCursor } from './repositionCursor';

package/dist/utils/isNumber.d.ts

@@ -0,0 +1 @@
+export declare const isNumber: (input: string) => boolean;

package/dist/utils/isNumber.js

@@ -0,0 +1 @@
+export const isNumber = (input) => RegExp(/\d/, 'gi').test(input);

package/dist/utils/padTrimValue.d.ts

@@ -0,0 +1 @@
+export declare const padTrimValue: (value: string, decimalSeparator?: string, decimalScale?: number) => string;

package/dist/utils/padTrimValue.js

@@ -0,0 +1,26 @@
+export const padTrimValue = (value, decimalSeparator, decimalScale) => {
+    if (decimalScale === undefined ||
+        decimalSeparator === '' ||
+        decimalSeparator === undefined ||
+        value === '' ||
+        value === undefined) {
+        return value;
+    }
+    if (!value.match(/\d/g)) {
+        return '';
+    }
+    const [int, decimals] = value.split(decimalSeparator);
+    if (decimalScale === 0) {
+        return int;
+    }
+    let newValue = decimals || '';
+    if (newValue.length < decimalScale) {
+        while (newValue.length < decimalScale) {
+            newValue += '0';
+        }
+    }
+    else {
+        newValue = newValue.slice(0, decimalScale);
+    }
+    return `${int}${decimalSeparator}${newValue}`;
+};

package/dist/utils/parseAbbrValue.d.ts

@@ -0,0 +1,2 @@
+export declare const abbrValue: (value: number, decimalSeparator?: string, _decimalPlaces?: number) => string;
+export declare const parseAbbrValue: (value: string, decimalSeparator?: string) => number | undefined;

package/dist/utils/parseAbbrValue.js

@@ -0,0 +1,23 @@
+import { escapeRegExp } from './escapeRegExp';
+export const abbrValue = (value, decimalSeparator = '.', _decimalPlaces = 10) => {
+    if (value > 999) {
+        let valueLength = ('' + value).length;
+        const p = Math.pow;
+        const d = p(10, _decimalPlaces);
+        valueLength -= valueLength % 3;
+        const abbrValue = Math.round((value * d) / p(10, valueLength)) / d + ' kMGTPE'[valueLength / 3];
+        return abbrValue.replace('.', decimalSeparator);
+    }
+    return String(value);
+};
+const abbrMap = { k: 1000, m: 1000000, b: 1000000000 };
+export const parseAbbrValue = (value, decimalSeparator = '.') => {
+    const reg = new RegExp(`(\\d+(${escapeRegExp(decimalSeparator)}\\d*)?)([kmb])$`, 'i');
+    const match = value.match(reg);
+    if (match) {
+        const [, digits, , abbr] = match;
+        const multiplier = abbrMap[abbr.toLowerCase()];
+        return Number(digits.replace(decimalSeparator, '.')) * multiplier;
+    }
+    return undefined;
+};

package/dist/utils/removeInvalidChars.d.ts

@@ -0,0 +1 @@
+export declare const removeInvalidChars: (value: string, validChars: ReadonlyArray<string>) => string;

package/dist/utils/removeInvalidChars.js

@@ -0,0 +1,6 @@
+import { escapeRegExp } from './escapeRegExp';
+export const removeInvalidChars = (value, validChars) => {
+    const chars = escapeRegExp(validChars.join(''));
+    const reg = new RegExp(`[^\\d${chars}]`, 'gi');
+    return value.replace(reg, '');
+};

package/dist/utils/removeSeparators.d.ts

@@ -0,0 +1 @@
+export declare const removeSeparators: (value: string, separator?: string) => string;

package/dist/utils/removeSeparators.js

@@ -0,0 +1,5 @@
+import { escapeRegExp } from './escapeRegExp';
+export const removeSeparators = (value, separator = ',') => {
+    const reg = new RegExp(escapeRegExp(separator), 'g');
+    return value.replace(reg, '');
+};

package/dist/utils/repositionCursor.d.ts

@@ -0,0 +1,12 @@
+type RepositionCursorProps = {
+    selectionStart?: number | null;
+    value: string;
+    lastKeyStroke: string | null;
+    stateValue?: string;
+    groupSeparator?: string;
+};
+export declare const repositionCursor: ({ selectionStart, value, lastKeyStroke, stateValue, groupSeparator }: RepositionCursorProps) => {
+    modifiedValue: string;
+    cursorPosition: number | null | undefined;
+};
+export {};

package/dist/utils/repositionCursor.js

@@ -0,0 +1,18 @@
+export const repositionCursor = ({ selectionStart, value, lastKeyStroke, stateValue, groupSeparator }) => {
+    let cursorPosition = selectionStart;
+    let modifiedValue = value;
+    if (stateValue && cursorPosition) {
+        const splitValue = value.split('');
+        if (lastKeyStroke === 'Backspace' && stateValue[cursorPosition] === groupSeparator) {
+            splitValue.splice(cursorPosition - 1, 1);
+            cursorPosition -= 1;
+        }
+        if (lastKeyStroke === 'Delete' && stateValue[cursorPosition] === groupSeparator) {
+            splitValue.splice(cursorPosition, 1);
+            cursorPosition += 1;
+        }
+        modifiedValue = splitValue.join('');
+        return { modifiedValue, cursorPosition };
+    }
+    return { modifiedValue, cursorPosition: selectionStart };
+};

package/package.json

@@ -1,69 +1,19 @@
 {
 	"name": "@canutin/svelte-currency-input",
-	"version": "0.13.0",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"test": "playwright test",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"devDependencies": {
-		"@playwright/test": "^1.39.0",
-		"@sveltejs/adapter-auto": "^3.2.5",
-		"@sveltejs/adapter-cloudflare": "^4.7.3",
-		"@sveltejs/kit": "^2.7.1",
-		"@sveltejs/package": "^2.2.2",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@types/node": "^20.8.7",
-		"@typescript-eslint/eslint-plugin": "^6.0.0",
-		"@typescript-eslint/parser": "^6.0.0",
-		"date-fns": "^2.30.0",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
-		"publint": "^0.2.5",
-		"sass": "^1.69.0",
-		"semantic-release": "^24.1.1",
-		"svelte": "^4.2.19",
-		"svelte-check": "^3.4.3",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.0"
+	"version": "1.0.0-next.7",
+	"engines": {
+		"node": ">=22"
 	},
-	"optionalDependencies": {
-		"@cloudflare/workerd-linux-64": "^1.20240909.0",
-		"@rollup/rollup-linux-x64-gnu": "^4.21.3"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"description": "A form input that converts numbers to currencies as you type in localized formats",
+	"description": "A fully-featured currency input component for Svelte 5 that handles formatting, localization, and validation",
 	"keywords": [
 		"svelte",
+		"svelte5",
 		"currency",
 		"money",
 		"input",
 		"i18n",
-		"positive",
-		"negative"
+		"formatting",
+		"localization"
 	],
 	"repository": {
 		"type": "git",
@@ -74,5 +24,74 @@
 	"bugs": {
 		"url": "https://github.com/fmaclen/svelte-currency-input/issues"
 	},
-	"homepage": "https://svelte-currency-input.fernando.is"
+	"homepage": "https://svelte-currency-input.fernando.is",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"quality": "bun run format && bun run eslint . && bun run check",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run && npm run test:e2e",
+		"test:e2e": "playwright test"
+	},
+	"files": [
+		"dist"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.4.0",
+		"@eslint/js": "^9.39.1",
+		"@playwright/test": "^1.57.0",
+		"@semantic-release/commit-analyzer": "^13.0.1",
+		"@semantic-release/git": "^10.0.1",
+		"@semantic-release/github": "^12.0.2",
+		"@semantic-release/npm": "^13.1.3",
+		"@semantic-release/release-notes-generator": "^14.1.0",
+		"@sveltejs/adapter-cloudflare": "^7.2.4",
+		"@sveltejs/kit": "^2.49.1",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tailwindcss/vite": "^4.1.17",
+		"@testing-library/user-event": "^14.5.2",
+		"@types/node": "^22",
+		"@vitest/browser-playwright": "^4.0.15",
+		"eslint": "^9.39.1",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.13.1",
+		"globals": "^16.5.0",
+		"playwright": "^1.57.0",
+		"prettier": "^3.7.4",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"publint": "^0.3.15",
+		"semantic-release": "^25.0.2",
+		"svelte": "^5.45.6",
+		"svelte-check": "^4.3.4",
+		"tailwindcss": "^4.1.17",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.48.1",
+		"vite": "^7.2.6",
+		"vitest": "^4.0.15",
+		"vitest-browser-svelte": "^2.0.1"
+	}
 }

package/dist/CurrencyInput.svelte

@@ -1,181 +0,0 @@
-<script>import {
-  DEFAULT_LOCALE,
-  DEFAULT_CURRENCY,
-  DEFAULT_NAME,
-  DEFAULT_VALUE,
-  DEFAULT_FRACTION_DIGITS,
-  DEFAULT_CLASS_WRAPPER,
-  DEFAULT_CLASS_UNFORMATTED,
-  DEFAULT_CLASS_FORMATTED,
-  DEFAULT_CLASS_FORMATTED_POSITIVE,
-  DEFAULT_CLASS_FORMATTED_NEGATIVE,
-  DEFAULT_CLASS_FORMATTED_ZERO
-} from "./constants";
-import { onMount } from "svelte";
-export let value = DEFAULT_VALUE;
-export let locale = DEFAULT_LOCALE;
-export let currency = DEFAULT_CURRENCY;
-export let fractionDigits = DEFAULT_FRACTION_DIGITS;
-export let name = DEFAULT_NAME;
-export let id = void 0;
-export let required = false;
-export let disabled = false;
-export let placeholder = DEFAULT_VALUE;
-export let autocomplete = void 0;
-export let isNegativeAllowed = true;
-export let isZeroNullish = false;
-export let inputClasses = null;
-export let onValueChange = () => {
-};
-let inputElement;
-let inputTarget;
-let formattedValue = "";
-$: isNegative = value < 0;
-$: isPositive = value > 0;
-$: isZero = !isNegative && !isPositive;
-$: value, setFormattedValue();
-onMount(() => {
-  setFormattedValue();
-});
-function formatCurrency(value2, maximumFractionDigits, minimumFractionDigits) {
-  return new Intl.NumberFormat(locale, {
-    currency,
-    style: "currency",
-    maximumFractionDigits: maximumFractionDigits || 0,
-    minimumFractionDigits: minimumFractionDigits || 0
-  }).format(value2);
-}
-function handleKeyDown(event) {
-  const isDeletion = event.key === "Backspace" || event.key === "Delete";
-  const isModifier = event.metaKey || event.altKey || event.ctrlKey;
-  const isArrowKey = event.key === "ArrowLeft" || event.key === "ArrowRight";
-  const isTab = event.key === "Tab";
-  const isEnter = event.key === "Enter";
-  const isInvalidCharacter = !/^\d|,|\.|-$/g.test(event.key);
-  function isPunctuationDuplicated() {
-    if (event.key !== "," && event.key !== ".") return false;
-    if (isDecimalComma) return formattedValue.split(",").length >= 2;
-    if (!isDecimalComma) return formattedValue.split(".").length >= 2;
-    return false;
-  }
-  if (isPunctuationDuplicated() || !isDeletion && !isModifier && !isArrowKey && isInvalidCharacter && !isTab && !isEnter)
-    event.preventDefault();
-}
-function handlePlaceholder(placeholder2) {
-  if (typeof placeholder2 === "number")
-    return formatCurrency(placeholder2, fractionDigits, fractionDigits);
-  if (placeholder2 === null) return "";
-  return placeholder2;
-}
-const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1);
-const isDecimalComma = currencyDecimal === ",";
-const currencySymbol = formatCurrency(0, 0).replace("0", "").replace(/\u00A0/, "");
-function setUnformattedValue(event) {
-  if (event) {
-    if (event.key === currencyDecimal) return;
-    if (isDecimalComma && event.key === ".")
-      formattedValue = formattedValue.replace(/\.([^.]*)$/, currencyDecimal + "$1");
-    if (!isDecimalComma && event.key === ",")
-      formattedValue = formattedValue.replace(/\,([^,]*)$/, currencyDecimal + "$1");
-    const ignoreSymbols = [currencySymbol, `-${currencySymbol}`, "-"];
-    const strippedUnformattedValue = formattedValue.replace(" ", "");
-    if (ignoreSymbols.includes(strippedUnformattedValue)) return;
-    inputTarget = event.target;
-    if (isNegativeAllowed && event.key === "-") value = value * -1;
-  }
-  let unformattedValue = isNegativeAllowed ? formattedValue.replace(/[^0-9,.-]/g, "") : formattedValue.replace(/[^0-9,.]/g, "");
-  if (Number.isNaN(parseFloat(unformattedValue))) {
-    value = 0;
-  } else {
-    unformattedValue = unformattedValue.replace(isDecimalComma ? /\./g : /\,/g, "");
-    if (isDecimalComma) unformattedValue = unformattedValue.replace(",", ".");
-    const previousValue = value;
-    value = parseFloat(unformattedValue);
-    if (event && previousValue === value) {
-      if (unformattedValue.includes(".") && unformattedValue.split(".")[1].length > fractionDigits) {
-        setFormattedValue();
-      }
-    }
-  }
-}
-function setFormattedValue() {
-  if (!inputElement) return;
-  const startCaretPosition = inputElement.selectionStart || 0;
-  const previousFormattedValueLength = formattedValue.length;
-  formattedValue = isZero && !isZeroNullish ? "" : formatCurrency(
-    value,
-    fractionDigits,
-    document.activeElement === inputElement ? 0 : fractionDigits
-  );
-  setUnformattedValue();
-  let retries = 0;
-  while (previousFormattedValueLength === formattedValue.length && retries < 10) retries++;
-  if (previousFormattedValueLength !== formattedValue.length) {
-    const endCaretPosition = startCaretPosition + formattedValue.length - previousFormattedValueLength;
-    inputElement?.setSelectionRange(endCaretPosition, endCaretPosition);
-  }
-  onValueChange(value);
-}
-</script>
-
-<div class={inputClasses?.wrapper ?? DEFAULT_CLASS_WRAPPER}>
-	<input
-		class={inputClasses?.unformatted ?? DEFAULT_CLASS_UNFORMATTED}
-		type="hidden"
-		{name}
-		{disabled}
-		bind:value
-	/>
-	<input
-		class="
-			{inputClasses?.formatted ?? DEFAULT_CLASS_FORMATTED}
-			{isNegativeAllowed && !isZero && !isNegative
-			? inputClasses?.formattedPositive ?? DEFAULT_CLASS_FORMATTED_POSITIVE
-			: ''}
-			{isZero ? inputClasses?.formattedZero ?? DEFAULT_CLASS_FORMATTED_ZERO : ''}
-			{isNegativeAllowed && isNegative
-			? inputClasses?.formattedNegative ?? DEFAULT_CLASS_FORMATTED_NEGATIVE
-			: ''}
-		"
-		type="text"
-		inputmode={fractionDigits > 0 ? 'decimal' : 'numeric'}
-		name={`formatted-${name}`}
-		required={required && !isZero}
-		placeholder={handlePlaceholder(placeholder)}
-		{autocomplete}
-		{disabled}
-		{id}
-		bind:this={inputElement}
-		bind:value={formattedValue}
-		on:keydown={handleKeyDown}
-		on:keyup={setUnformattedValue}
-		on:blur={setFormattedValue}
-	/>
-</div>
-
-<style>
-	input.currencyInput__formatted {
-		border: 1px solid #e2e2e2;
-		padding: 10px;
-		box-sizing: border-box;
-	}
-
-	input.currencyInput__formatted--zero {
-		color: #333;
-	}
-
-	input.currencyInput__formatted--positive {
-		color: #00a36f;
-	}
-
-	input.currencyInput__formatted--negative {
-		color: #e75258;
-	}
-
-	input.currencyInput__formatted:disabled {
-		color: #999;
-		background-color: #e2e2e2;
-		pointer-events: none;
-		cursor: default;
-	}
-</style>

package/dist/CurrencyInput.svelte.d.ts

@@ -1,30 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { InputClasses, Callback } from './types';
-declare const __propDef: {
-    props: {
-        value?: number | undefined;
-        locale?: string | undefined;
-        currency?: string | undefined;
-        fractionDigits?: number | undefined;
-        name?: string | undefined;
-        id?: string | undefined;
-        required?: boolean | undefined;
-        disabled?: boolean | undefined;
-        placeholder?: string | number | null | undefined;
-        autocomplete?: string | null | undefined;
-        isNegativeAllowed?: boolean | undefined;
-        isZeroNullish?: boolean | undefined;
-        inputClasses?: InputClasses | null | undefined;
-        onValueChange?: Callback | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CurrencyInputProps = typeof __propDef.props;
-export type CurrencyInputEvents = typeof __propDef.events;
-export type CurrencyInputSlots = typeof __propDef.slots;
-export default class CurrencyInput extends SvelteComponentTyped<CurrencyInputProps, CurrencyInputEvents, CurrencyInputSlots> {
-}
-export {};

package/dist/constants.d.ts

@@ -1,11 +0,0 @@
-export declare const DEFAULT_LOCALE = "en-US";
-export declare const DEFAULT_CURRENCY = "USD";
-export declare const DEFAULT_NAME = "total";
-export declare const DEFAULT_VALUE = 0;
-export declare const DEFAULT_FRACTION_DIGITS = 2;
-export declare const DEFAULT_CLASS_WRAPPER = "currencyInput";
-export declare const DEFAULT_CLASS_UNFORMATTED = "currencyInput__unformatted";
-export declare const DEFAULT_CLASS_FORMATTED = "currencyInput__formatted";
-export declare const DEFAULT_CLASS_FORMATTED_POSITIVE = "currencyInput__formatted--positive";
-export declare const DEFAULT_CLASS_FORMATTED_NEGATIVE = "currencyInput__formatted--negative";
-export declare const DEFAULT_CLASS_FORMATTED_ZERO = "currencyInput__formatted--zero";

package/dist/constants.js

@@ -1,11 +0,0 @@
-export const DEFAULT_LOCALE = 'en-US';
-export const DEFAULT_CURRENCY = 'USD';
-export const DEFAULT_NAME = 'total';
-export const DEFAULT_VALUE = 0;
-export const DEFAULT_FRACTION_DIGITS = 2;
-export const DEFAULT_CLASS_WRAPPER = 'currencyInput';
-export const DEFAULT_CLASS_UNFORMATTED = 'currencyInput__unformatted';
-export const DEFAULT_CLASS_FORMATTED = 'currencyInput__formatted';
-export const DEFAULT_CLASS_FORMATTED_POSITIVE = 'currencyInput__formatted--positive';
-export const DEFAULT_CLASS_FORMATTED_NEGATIVE = 'currencyInput__formatted--negative';
-export const DEFAULT_CLASS_FORMATTED_ZERO = 'currencyInput__formatted--zero';