@canutin/svelte-currency-input 0.1.1 → 0.2.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.
Files changed (3) hide show
  1. package/CurrencyInput.svelte +1 -2
  2. package/README.md +55 -53
  3. package/package.json +4 -4
package/CurrencyInput.svelte CHANGED
@@ -21,7 +21,6 @@ const formatCurrency = (value, maximumFractionDigits, minimumFractionDigits) =>
21
21
  const placeholder = formatCurrency(0, 2, 2); // e.g. '$0.00'
22
22
  const currencySymbol = formatCurrency(0, 0).replace('0', ''); // e.g. '$'
23
23
  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
24
  // Updates `value` by stripping away the currency formatting
26
25
  const setValue = (event) => {
27
26
  // Don't format if the user is typing a currencyDecimal point
@@ -67,7 +66,7 @@ const applyFormatting = () => {
67
66
  "
68
67
  type="text"
69
68
  inputmode="numeric"
70
- name={currenctInputName}
69
+ name={`formatted-${name}`}
71
70
  required={required && !isZero}
72
71
  {placeholder}
73
72
  {disabled}
package/README.md CHANGED
@@ -5,9 +5,9 @@ A form input that converts numbers to currencies as you type in localized format
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
  ---
@@ -17,7 +17,7 @@ A form input that converts numbers to currencies as you type in localized format
17
17
  - Formats **positive** and **negative** values
18
18
  - 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
19
19
  - Simple [API](#api)
20
- - Minimal default styling, [easy to customize](#styling)
20
+ - Minimal [default styling](https://github.com/canutin/svelte-currency-input/blob/main/src/lib/CurrencyInput.svelte#L88-L118), easy to [customize](#styling)
21
21
 
22
22
  ## Usage
23
23
 
@@ -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,60 +43,63 @@ 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
 
68
- The default styles use [BEM naming conventions](https://getbem.com/naming/). To override the default styles apply your styles as shown below:
78
+ 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:
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 value is zero */
87
- div.my-currency-input :global(input.currencyInput__formatted--zero) {
88
- /* ... */
89
- }
90
-
91
- /* Formatted input when the value is positive */
92
- div.my-currency-input :global(input.currencyInput__formatted--positive) {
93
- /* ... */
94
- }
95
-
96
- /* Formatted input when the value is negative */
97
- div.my-currency-input :global(input.currencyInput__formatted--negative) {
98
- /* ... */
99
- }
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) { /* ... */ }
100
103
  </style>
101
104
  ```
102
105
 
@@ -104,14 +107,13 @@ The default styles use [BEM naming conventions](https://getbem.com/naming/). To
104
107
 
105
108
  Here's ways in which you can contribute:
106
109
 
107
- - Found a bug? Open a [new issue](https://github.com/Canutin/svelte-currency-input/issues/new)
108
- - Browse our [existing issues](https://github.com/Canutin/svelte-currency-input/issues)
109
- - Submit a [pull request](https://github.com/Canutin/svelte-currency-input/pulls)
110
+ - Found a bug? Open a [new issue](https://github.com/canutin/svelte-currency-input/issues/new)
111
+ - Browse our [existing issues](https://github.com/canutin/svelte-currency-input/issues)
112
+ - Submit a [pull request](https://github.com/canutin/svelte-currency-input/pulls)
110
113
 
111
114
  ## Developing
112
115
 
113
- This package was generated with [SvelteKit](https://kit.svelte.dev/).
114
- 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:
115
117
 
116
118
  ```bash
117
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.1",
3
+ "version": "0.2.0",
4
4
  "exports": {
5
5
  "./package.json": "./package.json",
6
6
  ".": "./CurrencyInput.svelte",
@@ -38,13 +38,13 @@
38
38
  ],
39
39
  "repository": {
40
40
  "type": "git",
41
- "url": "git+https://github.com/Canutin/svelte-currency-input.git"
41
+ "url": "git+https://github.com/canutin/svelte-currency-input.git"
42
42
  },
43
43
  "author": "Fernando Maclen <hello@fernando.is>",
44
44
  "license": "MIT",
45
45
  "bugs": {
46
- "url": "https://github.com/Canutin/svelte-currency-input/issues"
46
+ "url": "https://github.com/canutin/svelte-currency-input/issues"
47
47
  },
48
- "homepage": "https://github.com/Canutin/svelte-currency-input#readme",
48
+ "homepage": "https://github.com/canutin/svelte-currency-input#readme",
49
49
  "svelte": "./CurrencyInput.svelte"
50
50
  }