@canutin/svelte-currency-input 0.1.2 → 0.2.1

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.
Files changed (3) hide show
  1. package/CurrencyInput.svelte +6 -4
  2. package/README.md +51 -54
  3. package/package.json +1 -1
package/CurrencyInput.svelte CHANGED
@@ -19,9 +19,10 @@ const formatCurrency = (value, maximumFractionDigits, minimumFractionDigits) =>
19
19
  }).format(value);
20
20
  };
21
21
  const placeholder = formatCurrency(0, 2, 2); // e.g. '$0.00'
22
- const currencySymbol = formatCurrency(0, 0).replace('0', ''); // e.g. '$'
22
+ const currencySymbol = formatCurrency(0, 0)
23
+ .replace('0', '') // e.g. '$0' > '$'
24
+ .replace(/\u00A0/, ''); // e.g '0 €' > '€'
23
25
  const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1); // '.' or ','
24
- const currenctInputName = `formatted${name.replace(/^./g, ($1) => $1.toUpperCase())}`; // e.g. `formattedTotal`
25
26
  // Updates `value` by stripping away the currency formatting
26
27
  const setValue = (event) => {
27
28
  // Don't format if the user is typing a currencyDecimal point
@@ -44,10 +45,11 @@ const setValue = (event) => {
44
45
  value = 0;
45
46
  }
46
47
  else {
48
+ // The order of the following operations is *critical*
47
49
  const isDecimalComma = currencyDecimal === ','; // Remove currency formatting from `formattedValue` so we can assign it to `value`
50
+ unformattedValue = unformattedValue.replace(isDecimalComma ? /\./g : /\,/g, ''); // Remove all group symbols
48
51
  if (isDecimalComma)
49
52
  unformattedValue = unformattedValue.replace(',', '.'); // If the decimal point is a comma, replace it with a period
50
- unformattedValue = unformattedValue.replace(isDecimalComma ? /\./g : /\,/g, ''); // Remove all group symbols
51
53
  value = parseFloat(unformattedValue);
52
54
  }
53
55
  };
@@ -67,7 +69,7 @@ const applyFormatting = () => {
67
69
  "
68
70
  type="text"
69
71
  inputmode="numeric"
70
- name={currenctInputName}
72
+ name={`formatted-${name}`}
71
73
  required={required && !isZero}
72
74
  {placeholder}
73
75
  {disabled}
package/README.md CHANGED
@@ -1,13 +1,13 @@
1
1
  # svelte-currency-input
2
2
 
3
- A form input that converts numbers to currencies as you type in localized formats
3
+ A form input that converts numbers to currencies to localized formats as you type
4
4
 
5
5
  [<img width="1059" alt="image" src="https://user-images.githubusercontent.com/1434675/190315136-c1d310ab-0ef1-441d-a80c-2b3727d74f59.png">](https://svelte.dev/repl/d8f7d22e5b384555b430f62b157ac503?version=3.50.1)
6
6
 
7
7
  <p align="center">
8
- <a href="https://svelte.dev/repl/d8f7d22e5b384555b430f62b157ac503?version=3.50.1" target="_blank">
9
- <strong>REPL Demo</strong>
10
- </a>
8
+ <a href="https://svelte.dev/repl/d8f7d22e5b384555b430f62b157ac503?version=3.50.1" target="_blank">
9
+ Play with REPL
10
+ </a>
11
11
  </p>
12
12
 
13
13
  ---
@@ -27,13 +27,13 @@ npm install svelte-currency-input --save
27
27
 
28
28
  ```html
29
29
  <script lang="ts">
30
- import CurrencyInput from '@canutin/svelte-currency-input';
30
+ import CurrencyInput from '@canutin/svelte-currency-input';
31
31
 
32
- const locale = 'nl-NL';
33
- const currency = 'EUR';
32
+ const locale = 'nl-NL';
33
+ const currency = 'EUR';
34
34
  </script>
35
35
 
36
- <CurrencyInput name="exchange-rate" value="{-420.69}" {locale} {currency} />
36
+ <CurrencyInput name="total" value={-420.69} {locale} {currency} />
37
37
  ```
38
38
 
39
39
  ## How it works
@@ -43,25 +43,35 @@ This is more or less what `<CurrencyInput />` looks like under the hood:
43
43
 
44
44
  ```html
45
45
  <div class="currencyInput">
46
- <!-- Unformatted value -->
47
- <input class="currencyInput__unformatted" type="hidden" name="total" />
48
-
49
- <!-- Formatted value -->
50
- <input class="currencyInput__formatted" type="text" name="formattedTotal" />
46
+ <!-- Unformatted value -->
47
+ <input
48
+ class="currencyInput__unformatted"
49
+ type="hidden"
50
+ name="total"
51
+ value="-420.69"
52
+ />
53
+
54
+ <!-- Formatted value -->
55
+ <input
56
+ class="currencyInput__formatted"
57
+ type="text"
58
+ name="formatted-total"
59
+ value="€ -420,69"
60
+ />
51
61
  </div>
52
62
  ```
53
63
 
54
64
  ## API
55
65
 
56
- | Option | Type | Default | Description |
57
- | ----------------- | --------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
58
- | value | `number` | `undefined` | Initial value. If left `undefined` a formatted value of `0` is visible as a placeholder |
59
- | locale | `string` | `en-US` | Overrides default locale. [Examples](https://gist.github.com/ncreated/9934896) |
60
- | currency | `string` | `USD` | Overrides default currency. [Examples](https://github.com/datasets/currency-codes/blob/master/data/codes-all.csv) |
61
- | name | `string` | `total` | Applies the name to the [input fields](#how-it-works) for _unformatted_ (e.g `[name=total]`) and _formatted_ (e.g. `[name=formattedTotal]` in camelCase) values |
62
- | required | `boolean` | `false` | Marks the inputs as required |
63
- | disabled | `boolean` | `false` | Marks the inputs as disabled |
64
- | isNegativeAllowed | `boolean` | `true` | If `false`, forces formatting only to positive values and ignores `--positive` and `--negative` styling modifiers |
66
+ | Option | Type | Default | Description |
67
+ | ----------------- | --------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
68
+ | value | `number` | `undefined` | Initial value. If left `undefined` a formatted value of `0` is visible as a placeholder |
69
+ | locale | `string` | `en-US` | Overrides default locale. [Examples](https://gist.github.com/ncreated/9934896) |
70
+ | currency | `string` | `USD` | Overrides default currency. [Examples](https://github.com/datasets/currency-codes/blob/master/data/codes-all.csv) |
71
+ | 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 |
72
+ | required | `boolean` | `false` | Marks the inputs as required |
73
+ | disabled | `boolean` | `false` | Marks the inputs as disabled |
74
+ | isNegativeAllowed | `boolean` | `true` | If `false`, forces formatting only to positive values and ignores `--positive` and `--negative` styling modifiers |
65
75
 
66
76
  ## Styling
67
77
 
@@ -69,39 +79,27 @@ The [default styles](https://github.com/canutin/svelte-currency-input/blob/main/
69
79
 
70
80
  ```html
71
81
  <div class="my-currency-input">
72
- <CurrencyInput name="total" value="{420.69}" />
82
+ <CurrencyInput name="total" value="{420.69}" />
73
83
  </div>
74
84
 
75
85
  <style>
76
- /* Container */
77
- div.my-currency-input :global(div.currencyInput) {
78
- /* ... */
79
- }
80
-
81
- /* Formatted input */
82
- div.my-currency-input :global(input.currencyInput__formatted) {
83
- /* ... */
84
- }
85
-
86
- /* Formatted input when the it's disabled */
87
- div.my-currency-input :global(input.currencyInput__formatted:disabled) {
88
- /* ... */
89
- }
90
-
91
- /* Formatted input when the value is zero */
92
- div.my-currency-input :global(input.currencyInput__formatted--zero) {
93
- /* ... */
94
- }
95
-
96
- /* Formatted input when the value is positive */
97
- div.my-currency-input :global(input.currencyInput__formatted--positive) {
98
- /* ... */
99
- }
100
-
101
- /* Formatted input when the value is negative */
102
- div.my-currency-input :global(input.currencyInput__formatted--negative) {
103
- /* ... */
104
- }
86
+ /* Container */
87
+ div.my-currency-input :global(div.currencyInput) { /* ... */ }
88
+
89
+ /* Formatted input */
90
+ div.my-currency-input :global(input.currencyInput__formatted) { /* ... */ }
91
+
92
+ /* Formatted input when the it's disabled */
93
+ div.my-currency-input :global(input.currencyInput__formatted:disabled) { /* ... */ }
94
+
95
+ /* Formatted input when the value is zero */
96
+ div.my-currency-input :global(input.currencyInput__formatted--zero) { /* ... */ }
97
+
98
+ /* Formatted input when the value is positive */
99
+ div.my-currency-input :global(input.currencyInput__formatted--positive) { /* ... */ }
100
+
101
+ /* Formatted input when the value is negative */
102
+ div.my-currency-input :global(input.currencyInput__formatted--negative) { /* ... */ }
105
103
  </style>
106
104
  ```
107
105
 
@@ -115,8 +113,7 @@ Here's ways in which you can contribute:
115
113
 
116
114
  ## Developing
117
115
 
118
- This package was generated with [SvelteKit](https://kit.svelte.dev/).
119
- Install dependencies with `npm install`, then start a development server:
116
+ This package was generated with [SvelteKit](https://kit.svelte.dev/). Install dependencies with `npm install`, then start a development server:
120
117
 
121
118
  ```bash
122
119
  npm run dev
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canutin/svelte-currency-input",
3
- "version": "0.1.2",
3
+ "version": "0.2.1",
4
4
  "exports": {
5
5
  "./package.json": "./package.json",
6
6
  ".": "./CurrencyInput.svelte",