@canutin/svelte-currency-input 0.5.2 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CurrencyInput.svelte +14 -0
- package/README.md +10 -10
- package/package.json +1 -1
package/CurrencyInput.svelte
CHANGED
|
@@ -30,6 +30,7 @@ const handleKeyDown = (event) => {
|
|
|
30
30
|
if (!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter)
|
|
31
31
|
event.preventDefault();
|
|
32
32
|
};
|
|
33
|
+
let inputTarget;
|
|
33
34
|
const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1); // '.' or ','
|
|
34
35
|
const isDecimalComma = currencyDecimal === ','; // Remove currency formatting from `formattedValue` so we can assign it to `value`
|
|
35
36
|
const currencySymbol = formatCurrency(0, 0)
|
|
@@ -45,6 +46,8 @@ const setUnformattedValue = (event) => {
|
|
|
45
46
|
const strippedUnformattedValue = formattedValue.replace(' ', '');
|
|
46
47
|
if (ignoreSymbols.includes(strippedUnformattedValue))
|
|
47
48
|
return;
|
|
49
|
+
// Set the starting caret positions
|
|
50
|
+
inputTarget = event.target;
|
|
48
51
|
// Remove all characters that arent: numbers, commas, periods (or minus signs if `isNegativeAllowed`)
|
|
49
52
|
let unformattedValue = isNegativeAllowed
|
|
50
53
|
? formattedValue.replace(/[^0-9,.-]/g, '')
|
|
@@ -65,7 +68,18 @@ const setUnformattedValue = (event) => {
|
|
|
65
68
|
}
|
|
66
69
|
};
|
|
67
70
|
const setFormattedValue = () => {
|
|
71
|
+
// Previous caret position
|
|
72
|
+
const startCaretPosition = inputTarget?.selectionStart || 0;
|
|
73
|
+
const previousFormattedValueLength = formattedValue.length;
|
|
74
|
+
// Apply formatting to input
|
|
68
75
|
formattedValue = isZero ? '' : formatCurrency(value, fractionDigits, 0);
|
|
76
|
+
// New caret position
|
|
77
|
+
const endCaretPosition = startCaretPosition + formattedValue.length - previousFormattedValueLength;
|
|
78
|
+
// HACK:
|
|
79
|
+
// Delay setting the new caret position until the input has been formatted
|
|
80
|
+
setTimeout(() => {
|
|
81
|
+
inputTarget?.setSelectionRange(endCaretPosition, endCaretPosition);
|
|
82
|
+
}, 0.1);
|
|
69
83
|
};
|
|
70
84
|
let formattedValue = '';
|
|
71
85
|
let formattedPlaceholder = placeholder !== null ? formatCurrency(placeholder, fractionDigits, fractionDigits) : '';
|
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
A form input that converts numbers to localized currency formats as you type
|
|
4
4
|
|
|
5
|
-
[<img width="
|
|
5
|
+
[<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)
|
|
6
6
|
|
|
7
7
|
<p align="center">
|
|
8
8
|
👩💻 Play with it on <a href="https://svelte.dev/repl/d8f7d22e5b384555b430f62b157ac503?version=3.50.1" target="_blank">REPL</a> — 💵 See it in a <a href="https://github.com/Canutin/desktop/blob/master/sveltekit/src/lib/components/FormCurrency.svelte" target="_blank">real project</a>!
|
|
@@ -58,17 +58,17 @@ This is more or less what `<CurrencyInput />` looks like under the hood:
|
|
|
58
58
|
|
|
59
59
|
## API
|
|
60
60
|
|
|
61
|
-
| Option | Type | Default | Description
|
|
62
|
-
| ----------------- | --------------- | ----------- |
|
|
63
|
-
| value | `number` | `undefined` | Initial value. If left `undefined` a formatted value of `0` is visible as a placeholder
|
|
64
|
-
| locale | `string` | `en-US` | Overrides default locale. [Examples](https://gist.github.com/ncreated/9934896)
|
|
65
|
-
| currency | `string` | `USD` | Overrides default currency. [Examples](https://
|
|
61
|
+
| Option | Type | Default | Description |
|
|
62
|
+
| ----------------- | --------------- | ----------- | ----------- |
|
|
63
|
+
| value | `number` | `undefined` | Initial value. If left `undefined` a formatted value of `0` is visible as a placeholder |
|
|
64
|
+
| locale | `string` | `en-US` | Overrides default locale. [Examples](https://gist.github.com/ncreated/9934896) |
|
|
65
|
+
| currency | `string` | `USD` | Overrides default currency. [Examples](https://www.xe.com/symbols/) |
|
|
66
66
|
| name | `string` | `total` | Applies the name to the [input fields](#how-it-works) for _unformatted_ (e.g `[name=total]`) and _formatted_ (e.g. `[name=formatted-total]`) values |
|
|
67
|
-
| required | `boolean` | `false` | Marks the inputs as required
|
|
68
|
-
| disabled | `boolean` | `false` | Marks the inputs as disabled
|
|
67
|
+
| required | `boolean` | `false` | Marks the inputs as required |
|
|
68
|
+
| disabled | `boolean` | `false` | Marks the inputs as disabled |
|
|
69
69
|
| 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 |
|
|
70
70
|
| isNegativeAllowed | `boolean` | `true` | If `false`, forces formatting only to positive values and ignores `--positive` and `--negative` styling modifiers |
|
|
71
|
-
| fractionDigits
|
|
71
|
+
| 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` |
|
|
72
72
|
|
|
73
73
|
## Styling
|
|
74
74
|
|
|
@@ -105,7 +105,7 @@ The [default styles](https://github.com/canutin/svelte-currency-input/blob/main/
|
|
|
105
105
|
Here's ways in which you can contribute:
|
|
106
106
|
|
|
107
107
|
- Found a bug? Open a [new issue](https://github.com/canutin/svelte-currency-input/issues/new)
|
|
108
|
-
-
|
|
108
|
+
- Comment or upvote [existing issues](https://github.com/canutin/svelte-currency-input/issues)
|
|
109
109
|
- Submit a [pull request](https://github.com/canutin/svelte-currency-input/pulls)
|
|
110
110
|
|
|
111
111
|
## Developing
|