@canutin/svelte-currency-input 0.0.2 → 0.0.4

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.
@@ -1,10 +1,10 @@
1
- <script>export let value;
2
- export let name;
1
+ <script>export let value = 0;
2
+ export let locale = 'en-US';
3
+ export let currency = 'USD';
4
+ export let name = 'total';
3
5
  export let required = false;
4
6
  export let disabled = false;
5
7
  export let isNegativeAllowed = true;
6
- export let locale = 'en-US';
7
- export let currency = 'USD';
8
8
  let formattedValue = '';
9
9
  $: isZero = value === 0;
10
10
  $: isNegative = value < 0;
@@ -21,7 +21,7 @@ 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 = `currency${name.replace(/^./g, ($1) => $1.toUpperCase())}`;
24
+ const currenctInputName = `formatted${name.replace(/^./g, ($1) => $1.toUpperCase())}`; // e.g. `formattedTotal`
25
25
  // Updates `value` by stripping away the currency formatting
26
26
  const setValue = (event) => {
27
27
  // Don't format if the user is typing a currencyDecimal point
@@ -57,13 +57,13 @@ const applyFormatting = () => {
57
57
  </script>
58
58
 
59
59
  <div class="currencyInput">
60
- <input class="currencyInput__input" type="hidden" {name} {disabled} bind:value />
60
+ <input class="currencyInput__unformatted" type="hidden" {name} {disabled} bind:value />
61
61
  <input
62
62
  class="
63
- currencyInput__currency
64
- {isNegativeAllowed && !isZero && !isNegative && 'currencyInput__currency--positive'}
65
- {isZero && 'currencyInput__currency--zero'}
66
- {isNegativeAllowed && isNegative && 'currencyInput__currency--negative'}
63
+ currencyInput__formatted
64
+ {isNegativeAllowed && !isZero && !isNegative && 'currencyInput__formatted--positive'}
65
+ {isZero && 'currencyInput__formatted--zero'}
66
+ {isNegativeAllowed && isNegative && 'currencyInput__formatted--negative'}
67
67
  "
68
68
  type="text"
69
69
  inputmode="numeric"
@@ -76,54 +76,34 @@ const applyFormatting = () => {
76
76
  />
77
77
  </div>
78
78
 
79
- <style>div.currencyInput {
80
- display: flex;
81
- flex-direction: column;
82
- }
79
+ <style>
80
+ div.currencyInput {
81
+ display: flex;
82
+ flex-direction: column;
83
+ }
84
+
85
+ input.currencyInput__formatted {
86
+ border: 1px solid #e2e2e2;
87
+ padding: 10px;
88
+ box-sizing: border-box;
89
+ }
90
+
91
+ input.currencyInput__formatted--zero {
92
+ color: #333;
93
+ }
94
+
95
+ input.currencyInput__formatted--positive {
96
+ color: #00a36f;
97
+ }
98
+
99
+ input.currencyInput__formatted--negative {
100
+ color: #e75258;
101
+ }
83
102
 
84
- input.currencyInput__currency {
85
- background-color: var(--color-white);
86
- border: 2px solid var(--color-border);
87
- border-radius: 4px;
88
- padding: 10px;
89
- font-family: var(--font-sansSerif);
90
- font-size: 12px;
91
- box-sizing: border-box;
92
- /* background-color: var(--input-background-color);
93
- border-width: var(--input-border-width);
94
- border-style: var(--input-border-style);
95
- border-radius: var(--input-border-radius);
96
- border-color: var(--input-border-color);
97
- padding: var(--input-padding);
98
- font-family: var(--input-font-family);
99
- font-size: var(--input-font-size);
100
- box-sizing: var(--input-box-sizing); */
101
- font-family: var(--font-monospace);
102
- }
103
- input.currencyInput__currency:active, input.currencyInput__currency:focus {
104
- outline-color: var(--color-bluePrimary);
105
- outline-style: auto;
106
- /* outline-color: var(--input-active-outline-color);
107
- outline-style: var(--input-active-outline-style); */
108
- }
109
- input.currencyInput__currency--positive {
110
- color: var(--color-greenPrimary);
111
- }
112
- input.currencyInput__currency--zero {
113
- color: var(--color-grey80);
114
- }
115
- input.currencyInput__currency--negative {
116
- color: var(--color-redPrimary);
117
- }
118
- input.currencyInput__currency--error {
119
- border-color: var(--color-redPrimary);
120
- }
121
- input.currencyInput__currency::placeholder {
122
- color: var(--color-grey40);
123
- }
124
- input.currencyInput__currency:disabled {
125
- pointer-events: none;
126
- background-color: var(--color-grey10);
127
- color: var(--color-grey40);
128
- cursor: default;
129
- }</style>
103
+ input.currencyInput__formatted:disabled {
104
+ color: #999;
105
+ background-color: #e2e2e2;
106
+ pointer-events: none;
107
+ cursor: default;
108
+ }
109
+ </style>
@@ -1,13 +1,13 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
- value: number;
5
- name: string;
4
+ value?: number | undefined;
5
+ locale?: string | undefined;
6
+ currency?: string | undefined;
7
+ name?: string | undefined;
6
8
  required?: boolean | undefined;
7
9
  disabled?: boolean | undefined;
8
10
  isNegativeAllowed?: boolean | undefined;
9
- locale?: string | undefined;
10
- currency?: string | undefined;
11
11
  };
12
12
  events: {
13
13
  [evt: string]: CustomEvent<any>;
package/README.md CHANGED
@@ -1,27 +1,100 @@
1
1
  # svelte-currency-input
2
2
 
3
- A field input that formats numbers as currencies as you type
3
+ A form input that converts numbers to currencies as you type in localized formats
4
4
 
5
5
  <img width="1059" alt="image" src="https://user-images.githubusercontent.com/1434675/190315136-c1d310ab-0ef1-441d-a80c-2b3727d74f59.png">
6
6
 
7
7
 
8
8
  ## Features
9
9
 
10
- - Format **positive** and **negative** value
11
- - Leverages `Intl.NumberFormat` for **localizing** string formatting and currency denominations.
12
- - Easy to customize/theme
10
+ - Formats **positive** and **negative** values
11
+ - 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
12
+ - Comprehensive [API](#api)
13
+ - Minimal default styling, [easy to customize](#styling)
13
14
 
15
+ ## Usage
16
+
17
+ ```bash
18
+ npm install svelte-currency-input --save
19
+ ```
20
+
21
+ ```svelte
22
+ <script lang="ts">
23
+ import CurrencyInput from '@canutin/svelte-currency-input';
24
+
25
+ const locale = 'nl-NL';
26
+ const currency = 'EUR';
27
+ </script>
28
+
29
+ <CurrencyInput name="exchange-rate" value={-420.69} {locale} {currency} />
30
+ ```
31
+
32
+ ## How it works
33
+
34
+ When the form is submitted you get _unformatted_ or _formatted_ values from two `<input />`'s.
35
+ This is more or less what `<CurrencyInput />` looks like under the hood:
36
+
37
+ ```html
38
+ <div class="currencyInput">
39
+ <!-- Unformatted value -->
40
+ <input class="currencyInput__unformatted" type="hidden" name="total" />
41
+
42
+ <!-- Formatted value -->
43
+ <input class="currencyInput__formatted" type="text" name="formattedTotal" />
44
+ </div>
45
+ ```
46
+
47
+ ## API
48
+
49
+ | Option | Type | Default | Description |
50
+ | --- | --- | --- | --- |
51
+ | value | `number` | `undefined` | Initial value. If left `undefined` a formatted value of `0` is visible as a placeholder |
52
+ | locale | `string` | `en-US` | Overrides default locale. [Examples](https://gist.github.com/ncreated/9934896) |
53
+ | currency | `string` | `USD` | Overrides default currency. [Examples](https://github.com/datasets/currency-codes/blob/master/data/codes-all.csv) |
54
+ | 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 |
55
+ | required | `boolean` | `false` | Marks the inputs as required |
56
+ | disabled | `boolean` | `false` | Marks the inputs as disabled |
57
+ | isNegativeAllowed | `boolean` | `true` | If `true`, forces formatting only to positive values and ignores `--positive` and `--negative` styling modifiers |
58
+
59
+ ## Styling
60
+
61
+ The default styles use [BEM naming conventions](https://getbem.com/naming/). To override the default styles apply your styles as shown below:
62
+
63
+
64
+ ```svelte
65
+ <div class="my-currency-input">
66
+ <CurrencyInput name="total" value={420.69} />
67
+ </div>
68
+
69
+ <style>
70
+ /* Container */
71
+ div.my-currency-input :global(div.currencyInput) { /* ... */}
72
+
73
+ /* Formatted input */
74
+ div.my-currency-input :global(input.currencyInput__formatted) { /* ... */}
75
+
76
+ /* Formatted input when the value is zero */
77
+ div.my-currency-input :global(input.currencyInput__formatted--zero) { /* ... */}
78
+
79
+ /* Formatted input when the value is positive */
80
+ div.my-currency-input :global(input.currencyInput__formatted--positive) { /* ... */}
81
+
82
+ /* Formatted input when the value is negative */
83
+ div.my-currency-input :global(input.currencyInput__formatted--negative) { /* ... */}
84
+ </style>
85
+ ```
14
86
 
15
87
  ## Contributing
16
88
 
17
89
  Here's ways in which you can contribute:
18
90
  - Found a bug? Open a [new issue](https://github.com/Canutin/svelte-currency-input/issues/new)
19
- - Help us complete our [existing issues](https://github.com/Canutin/svelte-currency-input/issues)
91
+ - Browse our [existing issues](https://github.com/Canutin/svelte-currency-input/issues)
20
92
  - Submit a [pull request](https://github.com/Canutin/svelte-currency-input/pulls)
21
93
 
22
94
  ## Developing
23
95
 
24
- Install dependencies with `npm install`, start a development server:
96
+ This package was generated with [SvelteKit](https://kit.svelte.dev/).
97
+ Install dependencies with `npm install`, then start a development server:
25
98
 
26
99
  ```bash
27
100
  npm run dev
package/package.json CHANGED
@@ -1,6 +1,11 @@
1
1
  {
2
2
  "name": "@canutin/svelte-currency-input",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
+ "exports": {
5
+ "./package.json": "./package.json",
6
+ ".": "./CurrencyInput.svelte",
7
+ "./CurrencyInput.svelte": "./CurrencyInput.svelte"
8
+ },
4
9
  "devDependencies": {
5
10
  "@playwright/test": "^1.25.0",
6
11
  "@sveltejs/adapter-auto": "next",
@@ -13,7 +18,6 @@
13
18
  "eslint-plugin-svelte3": "^4.0.0",
14
19
  "prettier": "^2.6.2",
15
20
  "prettier-plugin-svelte": "^2.7.0",
16
- "sass": "^1.54.9",
17
21
  "svelte": "^3.44.0",
18
22
  "svelte-check": "^2.7.1",
19
23
  "svelte-preprocess": "^4.10.6",
@@ -24,118 +28,118 @@
24
28
  "type": "module",
25
29
  "description": "An input field that formats numbers to currency as you type",
26
30
  "dependencies": {
27
- "acorn": "^8.8.0",
28
31
  "abbrev": "^1.1.1",
32
+ "acorn": "^8.8.0",
33
+ "acorn-jsx": "^5.3.2",
29
34
  "agent-base": "^6.0.2",
30
35
  "ajv": "^6.12.6",
31
- "acorn-jsx": "^5.3.2",
32
36
  "ansi-regex": "^5.0.1",
33
37
  "ansi-styles": "^4.3.0",
34
38
  "anymatch": "^3.1.2",
35
- "argparse": "^2.0.1",
36
39
  "aproba": "^2.0.0",
37
40
  "are-we-there-yet": "^2.0.0",
41
+ "argparse": "^2.0.1",
38
42
  "array-union": "^2.1.0",
39
43
  "async-sema": "^3.1.1",
40
44
  "balanced-match": "^1.0.2",
41
45
  "binary-extensions": "^2.2.0",
42
46
  "bindings": "^1.5.0",
43
- "braces": "^3.0.2",
44
47
  "brace-expansion": "^1.1.11",
48
+ "braces": "^3.0.2",
45
49
  "buffer-crc32": "^0.2.13",
50
+ "callsites": "^3.1.0",
46
51
  "chalk": "^4.1.2",
47
52
  "chokidar": "^3.5.3",
48
- "callsites": "^3.1.0",
49
- "color-convert": "^2.0.1",
50
53
  "chownr": "^2.0.0",
54
+ "color-convert": "^2.0.1",
51
55
  "color-name": "^1.1.4",
52
56
  "color-support": "^1.1.3",
53
57
  "concat-map": "^0.0.1",
58
+ "console-control-strings": "^1.1.0",
54
59
  "cookie": "^0.5.0",
55
60
  "cross-spawn": "^7.0.3",
56
- "console-control-strings": "^1.1.0",
57
61
  "data-uri-to-buffer": "^4.0.0",
58
62
  "debug": "^4.3.4",
59
- "deepmerge": "^4.2.2",
60
- "delegates": "^1.0.0",
61
63
  "dedent-js": "^1.0.1",
62
64
  "deep-is": "^0.1.4",
65
+ "deepmerge": "^4.2.2",
66
+ "delegates": "^1.0.0",
63
67
  "detect-indent": "^6.1.0",
64
68
  "detect-libc": "^2.0.1",
65
69
  "devalue": "^3.1.3",
66
70
  "dir-glob": "^3.0.1",
67
71
  "doctrine": "^3.0.0",
68
72
  "emoji-regex": "^8.0.0",
69
- "es6-promise": "^3.3.1",
70
73
  "encoding": "^0.1.13",
74
+ "es6-promise": "^3.3.1",
71
75
  "esbuild": "^0.15.7",
72
76
  "esbuild-darwin-64": "^0.15.7",
73
77
  "escape-string-regexp": "^4.0.0",
74
78
  "eslint-scope": "^5.1.1",
75
- "eslint-visitor-keys": "^3.3.0",
76
79
  "eslint-utils": "^3.0.0",
77
- "estraverse": "^4.3.0",
80
+ "eslint-visitor-keys": "^3.3.0",
78
81
  "espree": "^9.4.0",
79
82
  "esquery": "^1.4.0",
80
83
  "esrecurse": "^4.3.0",
84
+ "estraverse": "^4.3.0",
81
85
  "estree-walker": "^2.0.2",
82
- "fast-deep-equal": "^3.1.3",
83
86
  "esutils": "^2.0.3",
87
+ "fast-deep-equal": "^3.1.3",
84
88
  "fast-glob": "^3.2.12",
85
89
  "fast-json-stable-stringify": "^2.1.0",
86
90
  "fast-levenshtein": "^2.0.6",
91
+ "fastq": "^1.13.0",
87
92
  "fetch-blob": "^3.2.0",
88
93
  "file-entry-cache": "^6.0.1",
89
- "fastq": "^1.13.0",
90
94
  "file-uri-to-path": "^1.0.0",
91
- "find-up": "^5.0.0",
92
95
  "fill-range": "^7.0.1",
96
+ "find-up": "^5.0.0",
93
97
  "flat-cache": "^3.0.4",
94
98
  "flatted": "^3.2.7",
95
99
  "formdata-polyfill": "^4.0.10",
96
100
  "fs-minipass": "^2.1.0",
101
+ "fs.realpath": "^1.0.0",
97
102
  "fsevents": "^2.3.2",
98
103
  "function-bind": "^1.1.1",
99
- "fs.realpath": "^1.0.0",
100
104
  "functional-red-black-tree": "^1.0.1",
101
- "glob": "^7.2.3",
102
105
  "gauge": "^3.0.2",
106
+ "glob": "^7.2.3",
103
107
  "glob-parent": "^5.1.2",
104
108
  "globals": "^13.17.0",
105
109
  "globalyzer": "^0.1.0",
106
110
  "globby": "^11.1.0",
107
111
  "globrex": "^0.1.2",
108
112
  "graceful-fs": "^4.2.10",
109
- "has": "^1.0.3",
110
113
  "grapheme-splitter": "^1.0.4",
114
+ "has": "^1.0.3",
111
115
  "has-flag": "^4.0.0",
112
116
  "has-unicode": "^2.0.1",
113
117
  "https-proxy-agent": "^5.0.1",
114
118
  "iconv-lite": "^0.6.3",
115
119
  "ignore": "^5.2.0",
120
+ "immutable": "^4.1.0",
116
121
  "import-fresh": "^3.3.0",
117
122
  "imurmurhash": "^0.1.4",
118
- "immutable": "^4.1.0",
119
123
  "inflight": "^1.0.6",
120
124
  "inherits": "^2.0.4",
121
125
  "is-binary-path": "^2.1.0",
122
- "is-extglob": "^2.1.1",
123
126
  "is-core-module": "^2.10.0",
124
- "is-glob": "^4.0.3",
127
+ "is-extglob": "^2.1.1",
125
128
  "is-fullwidth-code-point": "^3.0.0",
129
+ "is-glob": "^4.0.3",
126
130
  "is-number": "^7.0.0",
127
131
  "isexe": "^2.0.0",
128
132
  "js-sdsl": "^4.1.4",
129
133
  "js-yaml": "^4.1.0",
130
134
  "json-schema-traverse": "^0.4.1",
131
- "kleur": "^4.1.5",
132
- "locate-path": "^6.0.0",
133
135
  "json-stable-stringify-without-jsonify": "^1.0.1",
136
+ "kleur": "^4.1.5",
134
137
  "levn": "^0.4.1",
138
+ "locate-path": "^6.0.0",
135
139
  "lodash.merge": "^4.6.2",
136
140
  "lower-case": "^2.0.2",
137
- "magic-string": "^0.26.3",
138
141
  "lru-cache": "^6.0.0",
142
+ "magic-string": "^0.26.3",
139
143
  "make-dir": "^3.1.0",
140
144
  "merge2": "^1.4.1",
141
145
  "micromatch": "^4.0.5",
@@ -144,67 +148,67 @@
144
148
  "minimatch": "^3.1.2",
145
149
  "minimist": "^1.2.6",
146
150
  "minipass": "^3.3.4",
147
- "mkdirp": "^0.5.6",
148
151
  "minizlib": "^2.1.2",
152
+ "mkdirp": "^0.5.6",
149
153
  "mri": "^1.2.0",
150
- "ms": "^2.1.2",
151
154
  "mrmime": "^1.0.1",
155
+ "ms": "^2.1.2",
152
156
  "nanoid": "^3.3.4",
153
157
  "natural-compare": "^1.4.0",
154
- "node-domexception": "^1.0.0",
155
158
  "no-case": "^3.0.4",
159
+ "node-domexception": "^1.0.0",
156
160
  "node-fetch": "^3.2.10",
161
+ "node-gyp-build": "^4.5.0",
157
162
  "nopt": "^5.0.0",
158
163
  "normalize-path": "^3.0.0",
159
- "object-assign": "^4.1.1",
160
164
  "npmlog": "^5.0.1",
165
+ "object-assign": "^4.1.1",
161
166
  "once": "^1.4.0",
162
- "node-gyp-build": "^4.5.0",
163
167
  "optionator": "^0.9.1",
164
168
  "p-limit": "^3.1.0",
165
169
  "p-locate": "^5.0.0",
170
+ "parent-module": "^1.0.1",
166
171
  "pascal-case": "^3.1.2",
167
172
  "path-exists": "^4.0.0",
168
173
  "path-is-absolute": "^1.0.1",
169
174
  "path-key": "^3.1.1",
170
- "parent-module": "^1.0.1",
171
175
  "path-parse": "^1.0.7",
172
- "picocolors": "^1.0.0",
173
176
  "path-type": "^4.0.0",
177
+ "picocolors": "^1.0.0",
174
178
  "picomatch": "^2.3.1",
175
179
  "playwright-core": "^1.25.2",
176
180
  "postcss": "^8.4.16",
177
181
  "prelude-ls": "^1.2.1",
178
182
  "punycode": "^2.1.1",
179
183
  "queue-microtask": "^1.2.3",
180
- "readdirp": "^3.6.0",
181
184
  "readable-stream": "^3.6.0",
182
- "regexpp": "^3.2.0",
185
+ "readdirp": "^3.6.0",
183
186
  "regexparam": "^2.0.1",
187
+ "regexpp": "^3.2.0",
184
188
  "resolve": "^1.22.1",
185
189
  "resolve-from": "^5.0.0",
186
- "rimraf": "^3.0.2",
187
190
  "reusify": "^1.0.4",
191
+ "rimraf": "^3.0.2",
188
192
  "rollup": "^2.78.1",
189
193
  "rollup-pluginutils": "^2.8.2",
190
194
  "run-parallel": "^1.2.0",
191
195
  "sade": "^1.8.1",
192
196
  "safe-buffer": "^5.2.1",
193
197
  "safer-buffer": "^2.1.2",
194
- "semver": "^7.3.7",
195
198
  "sander": "^0.5.1",
199
+ "semver": "^7.3.7",
196
200
  "set-blocking": "^2.0.0",
197
201
  "set-cookie-parser": "^2.5.1",
198
202
  "shebang-command": "^2.0.0",
199
203
  "shebang-regex": "^3.0.0",
200
204
  "signal-exit": "^3.0.7",
201
- "slash": "^3.0.0",
202
205
  "sirv": "^2.0.2",
206
+ "slash": "^3.0.0",
203
207
  "sorcery": "^0.10.0",
204
208
  "source-map-js": "^1.0.2",
205
- "string-width": "^4.2.3",
206
209
  "sourcemap-codec": "^1.4.8",
207
210
  "string_decoder": "^1.3.0",
211
+ "string-width": "^4.2.3",
208
212
  "strip-ansi": "^6.0.1",
209
213
  "strip-indent": "^3.0.0",
210
214
  "strip-json-comments": "^3.1.1",
@@ -216,18 +220,18 @@
216
220
  "text-table": "^0.2.0",
217
221
  "tiny-glob": "^0.2.9",
218
222
  "to-regex-range": "^5.0.1",
219
- "tr46": "^0.0.3",
220
223
  "totalist": "^3.0.0",
224
+ "tr46": "^0.0.3",
221
225
  "tsutils": "^3.21.0",
222
- "type-fest": "^0.20.2",
223
226
  "type-check": "^0.4.0",
227
+ "type-fest": "^0.20.2",
224
228
  "undici": "^5.10.0",
225
229
  "uri-js": "^4.4.1",
226
230
  "util-deprecate": "^1.0.2",
227
231
  "web-streams-polyfill": "^3.2.1",
228
232
  "webidl-conversions": "^3.0.1",
229
- "which": "^2.0.2",
230
233
  "whatwg-url": "^5.0.0",
234
+ "which": "^2.0.2",
231
235
  "wide-align": "^1.1.5",
232
236
  "word-wrap": "^1.2.3",
233
237
  "worktop": "^0.8.0-next.14",
@@ -240,15 +244,10 @@
240
244
  "url": "git+https://github.com/Canutin/svelte-currency-input.git"
241
245
  },
242
246
  "author": "",
243
- "license": "ISC",
247
+ "license": "MIT",
244
248
  "bugs": {
245
249
  "url": "https://github.com/Canutin/svelte-currency-input/issues"
246
250
  },
247
251
  "homepage": "https://github.com/Canutin/svelte-currency-input#readme",
248
- "exports": {
249
- "./package.json": "./package.json",
250
- "./CurrencyInput.svelte": "./CurrencyInput.svelte",
251
- ".": "./index.js"
252
- },
253
- "svelte": "./index.js"
252
+ "svelte": "./CurrencyInput.svelte"
254
253
  }
package/index.d.ts DELETED
File without changes
package/index.js DELETED
@@ -1 +0,0 @@
1
- // Reexport your entry components here