@canutin/svelte-currency-input 0.11.4 → 0.11.5

package/README.md

@@ -1,6 +1,6 @@
 # svelte-currency-input
 
-A form input that converts numbers to localized currency formats as you type
+A masked form input that converts numbers to localized currency formats as you type
 
 [<img width="962" alt="image" src="https://user-images.githubusercontent.com/1434675/190873948-c0385747-6fa9-4077-8bd5-717e4d1124a0.png">](https://svelte.dev/repl/d8f7d22e5b384555b430f62b157ac503?version=3.50.1)
 

package/dist/CurrencyInput.svelte

@@ -1,18 +1,21 @@
-<script>import { onMount } from "svelte";
-const DEFAULT_LOCALE = "en-US";
-const DEFAULT_CURRENCY = "USD";
-const DEFAULT_NAME = "total";
-const DEFAULT_VALUE = 0;
-const DEFAULT_FRACTION_DIGITS = 2;
-const DEFAULT_CLASS_WRAPPER = "currencyInput";
-const DEFAULT_CLASS_UNFORMATTED = "currencyInput__unformatted";
-const DEFAULT_CLASS_FORMATTED = "currencyInput__formatted";
-const DEFAULT_CLASS_FORMATTED_POSITIVE = "currencyInput__formatted--positive";
-const DEFAULT_CLASS_FORMATTED_NEGATIVE = "currencyInput__formatted--negative";
-const DEFAULT_CLASS_FORMATTED_ZERO = "currencyInput__formatted--zero";
+<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 required = false;
 export let disabled = false;
@@ -20,70 +23,70 @@ export let placeholder = DEFAULT_VALUE;
 export let autocomplete = void 0;
 export let isNegativeAllowed = true;
 export let isZeroNullish = false;
-export let fractionDigits = DEFAULT_FRACTION_DIGITS;
 export let inputClasses = null;
 export let onValueChange = () => {
 };
-const formatCurrency = (value2, maximumFractionDigits, minimumFractionDigits) => {
+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);
-};
-const handleKeyDown = (event) => {
+}
+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 isInvalidCharacter = !/^\d|,|\.|-$/g.test(event.key);
-  const isPunctuationDuplicated = () => {
-    if (event.key !== "," && event.key !== ".")
-      return false;
-    if (isDecimalComma)
-      return formattedValue.split(",").length >= 2;
-    if (!isDecimalComma)
-      return formattedValue.split(".").length >= 2;
+  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)
     event.preventDefault();
-};
-const handleOnBlur = () => setFormattedValue();
-let dom;
-let inputElement;
-onMount(() => {
-  dom = document;
-  setFormattedValue();
-});
-let inputTarget;
+}
+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/, "");
-const setUnformattedValue = (event) => {
+function setUnformattedValue(event) {
   if (event) {
-    if (event.key === currencyDecimal)
-      return;
+    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;
+    if (ignoreSymbols.includes(strippedUnformattedValue)) return;
     inputTarget = event.target;
-    if (isNegativeAllowed && event.key === "-")
-      value = value * -1;
+    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(",", ".");
+    if (isDecimalComma) unformattedValue = unformattedValue.replace(",", ".");
     const previousValue = value;
     value = parseFloat(unformattedValue);
     if (event && previousValue === value) {
@@ -92,43 +95,25 @@ const setUnformattedValue = (event) => {
       }
     }
   }
-};
-const setFormattedValue = () => {
-  if (!dom)
-    return;
-  const startCaretPosition = inputElement?.selectionStart || 0;
+}
+function setFormattedValue() {
+  if (!inputElement) return;
+  const startCaretPosition = inputElement.selectionStart || 0;
   const previousFormattedValueLength = formattedValue.length;
   formattedValue = isZero && !isZeroNullish ? "" : formatCurrency(
     value,
     fractionDigits,
-    dom.activeElement === inputElement ? 0 : fractionDigits
+    document.activeElement === inputElement ? 0 : fractionDigits
   );
   setUnformattedValue();
   let retries = 0;
-  while (previousFormattedValueLength === formattedValue.length && retries < 10)
-    retries++;
+  while (previousFormattedValueLength === formattedValue.length && retries < 10) retries++;
   if (previousFormattedValueLength !== formattedValue.length) {
     const endCaretPosition = startCaretPosition + formattedValue.length - previousFormattedValueLength;
     inputElement?.setSelectionRange(endCaretPosition, endCaretPosition);
   }
   onValueChange(value);
-};
-const handlePlaceholder = (placeholder2) => {
-  if (typeof placeholder2 === "number")
-    return formatCurrency(placeholder2, fractionDigits, fractionDigits);
-  if (placeholder2 === null)
-    return "";
-  return placeholder2;
-};
-let formattedValue = "";
-$:
-  isNegative = value < 0;
-$:
-  isPositive = value > 0;
-$:
-  isZero = !isNegative && !isPositive;
-$:
-  value, setFormattedValue();
+}
 </script>
 
 <div class={inputClasses?.wrapper ?? DEFAULT_CLASS_WRAPPER}>
@@ -161,7 +146,7 @@ $:
 		bind:value={formattedValue}
 		on:keydown={handleKeyDown}
 		on:keyup={setUnformattedValue}
-		on:blur={handleOnBlur}
+		on:blur={setFormattedValue}
 	/>
 </div>
 

package/dist/CurrencyInput.svelte.d.ts

@@ -1,9 +1,11 @@
 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;
         required?: boolean | undefined;
         disabled?: boolean | undefined;
@@ -11,16 +13,8 @@ declare const __propDef: {
         autocomplete?: string | null | undefined;
         isNegativeAllowed?: boolean | undefined;
         isZeroNullish?: boolean | undefined;
-        fractionDigits?: number | undefined;
-        inputClasses?: {
-            wrapper?: string | undefined;
-            unformatted?: string | undefined;
-            formatted?: string | undefined;
-            formattedPositive?: string | undefined;
-            formattedNegative?: string | undefined;
-            formattedZero?: string | undefined;
-        } | null | undefined;
-        onValueChange?: ((value: number) => any) | undefined;
+        inputClasses?: InputClasses | null | undefined;
+        onValueChange?: Callback | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/constants.d.ts

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,11 @@
+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';

package/dist/types.d.ts

@@ -0,0 +1,9 @@
+export interface InputClasses {
+    wrapper?: string;
+    unformatted?: string;
+    formatted?: string;
+    formattedPositive?: string;
+    formattedNegative?: string;
+    formattedZero?: string;
+}
+export type Callback = (value: number) => any;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@canutin/svelte-currency-input",
-	"version": "0.11.4",
+	"version": "0.11.5",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -25,10 +25,11 @@
 	],
 	"devDependencies": {
 		"@playwright/test": "^1.39.0",
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/adapter-cloudflare": "^2.3.3",
-		"@sveltejs/kit": "^1.26.0",
+		"@sveltejs/adapter-auto": "^3.2.0",
+		"@sveltejs/adapter-cloudflare": "^4.4.0",
+		"@sveltejs/kit": "^2.0.0",
 		"@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",
@@ -40,11 +41,16 @@
 		"prettier-plugin-svelte": "^2.10.1",
 		"publint": "^0.2.5",
 		"sass": "^1.69.0",
-		"semantic-release": "^19.0.5",
+		"semantic-release": "^24.1.1",
+		"svelte": "^4.2.19",
 		"svelte-check": "^3.4.3",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^4.4.2"
+		"vite": "^5.0.0"
+	},
+	"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",