@canutin/svelte-currency-input 0.7.1 → 0.8.0

package/CurrencyInput.svelte

@@ -3,6 +3,12 @@ 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';
 export let value = DEFAULT_VALUE;
 export let locale = DEFAULT_LOCALE;
 export let currency = DEFAULT_CURRENCY;
@@ -12,6 +18,7 @@ export let disabled = false;
 export let placeholder = DEFAULT_VALUE;
 export let isNegativeAllowed = true;
 export let fractionDigits = DEFAULT_FRACTION_DIGITS;
+export let inputClasses = null;
 // Formats value as: e.g. $1,523.00 | -$1,523.00
 const formatCurrency = (value, maximumFractionDigits, minimumFractionDigits) => {
     return new Intl.NumberFormat(locale, {
@@ -26,8 +33,9 @@ const 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); // Keys that are not a digit, comma, period or minus sign
-    if (!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter)
+    if (!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter && !isTab)
         event.preventDefault();
 };
 let inputTarget;
@@ -38,29 +46,31 @@ const currencySymbol = formatCurrency(0, 0)
     .replace(/\u00A0/, ''); // e.g '0 €' > '€'
 // Updates `value` by stripping away the currency formatting
 const setUnformattedValue = (event) => {
-    // Don't format if the user is typing a `currencyDecimal` point
-    if (event.key === currencyDecimal)
-        return;
-    // Pressing `.` when the decimal point is `,` gets replaced with `,`
-    if (isDecimalComma && event.key === '.')
-        formattedValue = formattedValue.replace(/\.([^.]*)$/, currencyDecimal + '$1'); // Only replace the last occurence
-    // Pressing `,` when the decimal point is `.` gets replaced with `.`
-    if (!isDecimalComma && event.key === ',')
-        formattedValue = formattedValue.replace(/\,([^,]*)$/, currencyDecimal + '$1'); // Only replace the last occurence
-    // Don't format if `formattedValue` is ['$', '-$', "-"]
-    const ignoreSymbols = [currencySymbol, `-${currencySymbol}`, '-'];
-    const strippedUnformattedValue = formattedValue.replace(' ', '');
-    if (ignoreSymbols.includes(strippedUnformattedValue))
-        return;
-    // Set the starting caret positions
-    inputTarget = event.target;
+    if (event) {
+        // Don't format if the user is typing a `currencyDecimal` point
+        if (event.key === currencyDecimal)
+            return;
+        // Pressing `.` when the decimal point is `,` gets replaced with `,`
+        if (isDecimalComma && event.key === '.')
+            formattedValue = formattedValue.replace(/\.([^.]*)$/, currencyDecimal + '$1'); // Only replace the last occurence
+        // Pressing `,` when the decimal point is `.` gets replaced with `.`
+        if (!isDecimalComma && event.key === ',')
+            formattedValue = formattedValue.replace(/\,([^,]*)$/, currencyDecimal + '$1'); // Only replace the last occurence
+        // Don't format if `formattedValue` is ['$', '-$', "-"]
+        const ignoreSymbols = [currencySymbol, `-${currencySymbol}`, '-'];
+        const strippedUnformattedValue = formattedValue.replace(' ', '');
+        if (ignoreSymbols.includes(strippedUnformattedValue))
+            return;
+        // Set the starting caret positions
+        inputTarget = event.target;
+        // Reverse the value when minus is pressed
+        if (isNegativeAllowed && event.key === '-')
+            value = value * -1;
+    }
     // Remove all characters that arent: numbers, commas, periods (or minus signs if `isNegativeAllowed`)
     let unformattedValue = isNegativeAllowed
         ? formattedValue.replace(/[^0-9,.-]/g, '')
         : formattedValue.replace(/[^0-9,.]/g, '');
-    // Reverse the value when minus is pressed
-    if (isNegativeAllowed && event.key === '-')
-        value = value * -1;
     // Finally set the value
     if (Number.isNaN(parseFloat(unformattedValue))) {
         value = 0;
@@ -70,7 +80,18 @@ const setUnformattedValue = (event) => {
         unformattedValue = unformattedValue.replace(isDecimalComma ? /\./g : /\,/g, ''); // Remove all group symbols
         if (isDecimalComma)
             unformattedValue = unformattedValue.replace(',', '.'); // If the decimal point is a comma, replace it with a period
+        // If the zero-key has been pressed
+        // and if the current `value` is the same as the `value` before the key-press
+        // formatting may need to be done (Issue #30)
+        const previousValue = value;
         value = parseFloat(unformattedValue);
+        if (event && previousValue === value) {
+            // Do the formatting if the number of digits after the decimal point exceeds `fractionDigits`
+            if (unformattedValue.includes('.') &&
+                unformattedValue.split('.')[1].length > fractionDigits) {
+                setFormattedValue();
+            }
+        }
     }
 };
 const setFormattedValue = () => {
@@ -79,6 +100,8 @@ const setFormattedValue = () => {
     const previousFormattedValueLength = formattedValue.length;
     // Apply formatting to input
     formattedValue = isZero ? '' : formatCurrency(value, fractionDigits, 0);
+    // Update `value` after formatting
+    setUnformattedValue();
     // New caret position
     const endCaretPosition = startCaretPosition + formattedValue.length - previousFormattedValueLength;
     // HACK:
@@ -94,14 +117,24 @@ $: isNegative = value < 0;
 $: value, setFormattedValue();
 </script>
 
-<div class="currencyInput">
-	<input class="currencyInput__unformatted" type="hidden" {name} {disabled} bind:value />
+<div class={inputClasses?.wrapper ?? DEFAULT_CLASS_WRAPPER}>
+	<input
+		class={inputClasses?.unformatted ?? DEFAULT_CLASS_UNFORMATTED}
+		type="hidden"
+		{name}
+		{disabled}
+		bind:value
+	/>
 	<input
 		class="
-			currencyInput__formatted
-			{isNegativeAllowed && !isZero && !isNegative && 'currencyInput__formatted--positive'}
-			{isZero && 'currencyInput__formatted--zero'}
-			{isNegativeAllowed && isNegative && 'currencyInput__formatted--negative'}
+			{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="numeric"
@@ -112,6 +145,7 @@ $: value, setFormattedValue();
 		bind:value={formattedValue}
 		on:keydown={handleKeyDown}
 		on:keyup={setUnformattedValue}
+		on:blur={setFormattedValue}
 	/>
 </div>
 

package/CurrencyInput.svelte.d.ts

@@ -10,6 +10,14 @@ declare const __propDef: {
         placeholder?: number | null | undefined;
         isNegativeAllowed?: 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;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/README.md

@@ -15,7 +15,7 @@ A form input that converts numbers to localized currency formats as you type
 - Formats **positive** and **negative** values
 - Leverages [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) for **localizing** currency denominations and masking the input
 - Simple [API](#api)
-- Minimal [default styling](https://github.com/canutin/svelte-currency-input/blob/main/src/lib/CurrencyInput.svelte#L88-L118), easy to [customize](#styling)
+- Minimal default styling, easy to [customize](#styling)
 
 ## Usage
 
@@ -69,12 +69,43 @@ This is more or less what `<CurrencyInput />` looks like under the hood:
 | placeholder       | `number` `null` | `0`         | Overrides the default placeholder. Setting the value to a `number` will display it as formatted. Setting it to `null` will not show a placeholder   |
 | isNegativeAllowed | `boolean`       | `true`      | If `false`, forces formatting only to positive values and ignores `--positive` and `--negative` styling modifiers                                   |
 | fractionDigits    | `number`        | `2`         | Sets `maximumFractionDigits` in [`Intl.NumberFormat()` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits) used for formatting the currency. Supported digits: `0` to `20` |
+| inputClasses    | `object`        | [See below](#Styling)         | Selectively overrides any class names passed |
 
 ## Styling
 
-The [default styles](https://github.com/canutin/svelte-currency-input/blob/main/src/lib/CurrencyInput.svelte#L88-L118) use [BEM naming conventions](https://getbem.com/naming/). To override the default styles apply your styles as shown below:
+There are two ways of customizing the styling of the input:
+1. Passing it your own CSS classes
+2. Overriding the styles using the existing class names
+
+You can **override all of the class names** by passing an object to `inputClasses` that has **one or more** of these properties:
+
+```typescript
+interface InputClasses {
+  wrapper?: string; // <div> that contains the two <input> elements
+  unformatted?: string; // <input type="hidden"> that contains the unformatted value
+  formatted?: string; // <input type="text"> that contains the formatted value
+  formattedPositive?: string; // Class added when the formatted input is positive
+  formattedNegative?: string; // Class added when the formatted input is negative
+  formattedZero?: string; // Class added when the formatted input is zero
+}
+```
 
-```html
+Usage (with [Tailwind CSS](https://tailwindcss.com/) as an example):
+
+```svelte
+<CurrencyInput name="total" value="{420.69}" inputClasses={
+  { 
+    wrapper: "form-control block",
+    formatted: 'py-1.5 text-gray-700',
+    formattedPositive: 'text-green-700',
+    formattedNegative: 'text-red-700'
+  }
+} />
+```
+
+Alternatively you can **write your own CSS** by overriding the [default styles](https://github.com/canutin/svelte-currency-input/blob/main/src/lib/CurrencyInput.svelte) which use [BEM naming conventions](https://getbem.com/naming/). To do so apply your styles as shown below:
+
+```svelte
 <div class="my-currency-input">
   <CurrencyInput name="total" value="{420.69}" />
 </div>
@@ -118,3 +149,20 @@ npm run dev
 # or start the server and open the app in a new browser tab
 npm run dev -- --open
 ```
+
+#### Integration tests
+
+The component is tested using [Playwright](https://playwright.dev/).
+You can find the tests in [`tests/svelte-currency-input.test.ts`](https://github.com/Canutin/svelte-currency-input/blob/main/tests/svelte-currency-input.test.ts)
+
+To run all tests on **Chromium**, **Firefox** and **Webkit**:
+```bash
+npm run test
+```
+
+To run all tests on a specific browser (e.g. **Webkit**):
+```bash
+npx playwright test --project=webkit
+```
+
+Additional debug commands can be found on [Playwright's documentation](https://playwright.dev/docs/test-cli).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canutin/svelte-currency-input",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "exports": {
     "./package.json": "./package.json",
     ".": "./index.js",