@canutin/svelte-currency-input 0.0.2 → 0.0.3

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,6 @@
1
1
  {
2
2
  "name": "@canutin/svelte-currency-input",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "devDependencies": {
5
5
  "@playwright/test": "^1.25.0",
6
6
  "@sveltejs/adapter-auto": "next",
@@ -13,7 +13,6 @@
13
13
  "eslint-plugin-svelte3": "^4.0.0",
14
14
  "prettier": "^2.6.2",
15
15
  "prettier-plugin-svelte": "^2.7.0",
16
- "sass": "^1.54.9",
17
16
  "svelte": "^3.44.0",
18
17
  "svelte-check": "^2.7.1",
19
18
  "svelte-preprocess": "^4.10.6",
@@ -24,118 +23,118 @@
24
23
  "type": "module",
25
24
  "description": "An input field that formats numbers to currency as you type",
26
25
  "dependencies": {
27
- "acorn": "^8.8.0",
28
26
  "abbrev": "^1.1.1",
27
+ "acorn": "^8.8.0",
28
+ "acorn-jsx": "^5.3.2",
29
29
  "agent-base": "^6.0.2",
30
30
  "ajv": "^6.12.6",
31
- "acorn-jsx": "^5.3.2",
32
31
  "ansi-regex": "^5.0.1",
33
32
  "ansi-styles": "^4.3.0",
34
33
  "anymatch": "^3.1.2",
35
- "argparse": "^2.0.1",
36
34
  "aproba": "^2.0.0",
37
35
  "are-we-there-yet": "^2.0.0",
36
+ "argparse": "^2.0.1",
38
37
  "array-union": "^2.1.0",
39
38
  "async-sema": "^3.1.1",
40
39
  "balanced-match": "^1.0.2",
41
40
  "binary-extensions": "^2.2.0",
42
41
  "bindings": "^1.5.0",
43
- "braces": "^3.0.2",
44
42
  "brace-expansion": "^1.1.11",
43
+ "braces": "^3.0.2",
45
44
  "buffer-crc32": "^0.2.13",
45
+ "callsites": "^3.1.0",
46
46
  "chalk": "^4.1.2",
47
47
  "chokidar": "^3.5.3",
48
- "callsites": "^3.1.0",
49
- "color-convert": "^2.0.1",
50
48
  "chownr": "^2.0.0",
49
+ "color-convert": "^2.0.1",
51
50
  "color-name": "^1.1.4",
52
51
  "color-support": "^1.1.3",
53
52
  "concat-map": "^0.0.1",
53
+ "console-control-strings": "^1.1.0",
54
54
  "cookie": "^0.5.0",
55
55
  "cross-spawn": "^7.0.3",
56
- "console-control-strings": "^1.1.0",
57
56
  "data-uri-to-buffer": "^4.0.0",
58
57
  "debug": "^4.3.4",
59
- "deepmerge": "^4.2.2",
60
- "delegates": "^1.0.0",
61
58
  "dedent-js": "^1.0.1",
62
59
  "deep-is": "^0.1.4",
60
+ "deepmerge": "^4.2.2",
61
+ "delegates": "^1.0.0",
63
62
  "detect-indent": "^6.1.0",
64
63
  "detect-libc": "^2.0.1",
65
64
  "devalue": "^3.1.3",
66
65
  "dir-glob": "^3.0.1",
67
66
  "doctrine": "^3.0.0",
68
67
  "emoji-regex": "^8.0.0",
69
- "es6-promise": "^3.3.1",
70
68
  "encoding": "^0.1.13",
69
+ "es6-promise": "^3.3.1",
71
70
  "esbuild": "^0.15.7",
72
71
  "esbuild-darwin-64": "^0.15.7",
73
72
  "escape-string-regexp": "^4.0.0",
74
73
  "eslint-scope": "^5.1.1",
75
- "eslint-visitor-keys": "^3.3.0",
76
74
  "eslint-utils": "^3.0.0",
77
- "estraverse": "^4.3.0",
75
+ "eslint-visitor-keys": "^3.3.0",
78
76
  "espree": "^9.4.0",
79
77
  "esquery": "^1.4.0",
80
78
  "esrecurse": "^4.3.0",
79
+ "estraverse": "^4.3.0",
81
80
  "estree-walker": "^2.0.2",
82
- "fast-deep-equal": "^3.1.3",
83
81
  "esutils": "^2.0.3",
82
+ "fast-deep-equal": "^3.1.3",
84
83
  "fast-glob": "^3.2.12",
85
84
  "fast-json-stable-stringify": "^2.1.0",
86
85
  "fast-levenshtein": "^2.0.6",
86
+ "fastq": "^1.13.0",
87
87
  "fetch-blob": "^3.2.0",
88
88
  "file-entry-cache": "^6.0.1",
89
- "fastq": "^1.13.0",
90
89
  "file-uri-to-path": "^1.0.0",
91
- "find-up": "^5.0.0",
92
90
  "fill-range": "^7.0.1",
91
+ "find-up": "^5.0.0",
93
92
  "flat-cache": "^3.0.4",
94
93
  "flatted": "^3.2.7",
95
94
  "formdata-polyfill": "^4.0.10",
96
95
  "fs-minipass": "^2.1.0",
96
+ "fs.realpath": "^1.0.0",
97
97
  "fsevents": "^2.3.2",
98
98
  "function-bind": "^1.1.1",
99
- "fs.realpath": "^1.0.0",
100
99
  "functional-red-black-tree": "^1.0.1",
101
- "glob": "^7.2.3",
102
100
  "gauge": "^3.0.2",
101
+ "glob": "^7.2.3",
103
102
  "glob-parent": "^5.1.2",
104
103
  "globals": "^13.17.0",
105
104
  "globalyzer": "^0.1.0",
106
105
  "globby": "^11.1.0",
107
106
  "globrex": "^0.1.2",
108
107
  "graceful-fs": "^4.2.10",
109
- "has": "^1.0.3",
110
108
  "grapheme-splitter": "^1.0.4",
109
+ "has": "^1.0.3",
111
110
  "has-flag": "^4.0.0",
112
111
  "has-unicode": "^2.0.1",
113
112
  "https-proxy-agent": "^5.0.1",
114
113
  "iconv-lite": "^0.6.3",
115
114
  "ignore": "^5.2.0",
115
+ "immutable": "^4.1.0",
116
116
  "import-fresh": "^3.3.0",
117
117
  "imurmurhash": "^0.1.4",
118
- "immutable": "^4.1.0",
119
118
  "inflight": "^1.0.6",
120
119
  "inherits": "^2.0.4",
121
120
  "is-binary-path": "^2.1.0",
122
- "is-extglob": "^2.1.1",
123
121
  "is-core-module": "^2.10.0",
124
- "is-glob": "^4.0.3",
122
+ "is-extglob": "^2.1.1",
125
123
  "is-fullwidth-code-point": "^3.0.0",
124
+ "is-glob": "^4.0.3",
126
125
  "is-number": "^7.0.0",
127
126
  "isexe": "^2.0.0",
128
127
  "js-sdsl": "^4.1.4",
129
128
  "js-yaml": "^4.1.0",
130
129
  "json-schema-traverse": "^0.4.1",
131
- "kleur": "^4.1.5",
132
- "locate-path": "^6.0.0",
133
130
  "json-stable-stringify-without-jsonify": "^1.0.1",
131
+ "kleur": "^4.1.5",
134
132
  "levn": "^0.4.1",
133
+ "locate-path": "^6.0.0",
135
134
  "lodash.merge": "^4.6.2",
136
135
  "lower-case": "^2.0.2",
137
- "magic-string": "^0.26.3",
138
136
  "lru-cache": "^6.0.0",
137
+ "magic-string": "^0.26.3",
139
138
  "make-dir": "^3.1.0",
140
139
  "merge2": "^1.4.1",
141
140
  "micromatch": "^4.0.5",
@@ -144,67 +143,67 @@
144
143
  "minimatch": "^3.1.2",
145
144
  "minimist": "^1.2.6",
146
145
  "minipass": "^3.3.4",
147
- "mkdirp": "^0.5.6",
148
146
  "minizlib": "^2.1.2",
147
+ "mkdirp": "^0.5.6",
149
148
  "mri": "^1.2.0",
150
- "ms": "^2.1.2",
151
149
  "mrmime": "^1.0.1",
150
+ "ms": "^2.1.2",
152
151
  "nanoid": "^3.3.4",
153
152
  "natural-compare": "^1.4.0",
154
- "node-domexception": "^1.0.0",
155
153
  "no-case": "^3.0.4",
154
+ "node-domexception": "^1.0.0",
156
155
  "node-fetch": "^3.2.10",
156
+ "node-gyp-build": "^4.5.0",
157
157
  "nopt": "^5.0.0",
158
158
  "normalize-path": "^3.0.0",
159
- "object-assign": "^4.1.1",
160
159
  "npmlog": "^5.0.1",
160
+ "object-assign": "^4.1.1",
161
161
  "once": "^1.4.0",
162
- "node-gyp-build": "^4.5.0",
163
162
  "optionator": "^0.9.1",
164
163
  "p-limit": "^3.1.0",
165
164
  "p-locate": "^5.0.0",
165
+ "parent-module": "^1.0.1",
166
166
  "pascal-case": "^3.1.2",
167
167
  "path-exists": "^4.0.0",
168
168
  "path-is-absolute": "^1.0.1",
169
169
  "path-key": "^3.1.1",
170
- "parent-module": "^1.0.1",
171
170
  "path-parse": "^1.0.7",
172
- "picocolors": "^1.0.0",
173
171
  "path-type": "^4.0.0",
172
+ "picocolors": "^1.0.0",
174
173
  "picomatch": "^2.3.1",
175
174
  "playwright-core": "^1.25.2",
176
175
  "postcss": "^8.4.16",
177
176
  "prelude-ls": "^1.2.1",
178
177
  "punycode": "^2.1.1",
179
178
  "queue-microtask": "^1.2.3",
180
- "readdirp": "^3.6.0",
181
179
  "readable-stream": "^3.6.0",
182
- "regexpp": "^3.2.0",
180
+ "readdirp": "^3.6.0",
183
181
  "regexparam": "^2.0.1",
182
+ "regexpp": "^3.2.0",
184
183
  "resolve": "^1.22.1",
185
184
  "resolve-from": "^5.0.0",
186
- "rimraf": "^3.0.2",
187
185
  "reusify": "^1.0.4",
186
+ "rimraf": "^3.0.2",
188
187
  "rollup": "^2.78.1",
189
188
  "rollup-pluginutils": "^2.8.2",
190
189
  "run-parallel": "^1.2.0",
191
190
  "sade": "^1.8.1",
192
191
  "safe-buffer": "^5.2.1",
193
192
  "safer-buffer": "^2.1.2",
194
- "semver": "^7.3.7",
195
193
  "sander": "^0.5.1",
194
+ "semver": "^7.3.7",
196
195
  "set-blocking": "^2.0.0",
197
196
  "set-cookie-parser": "^2.5.1",
198
197
  "shebang-command": "^2.0.0",
199
198
  "shebang-regex": "^3.0.0",
200
199
  "signal-exit": "^3.0.7",
201
- "slash": "^3.0.0",
202
200
  "sirv": "^2.0.2",
201
+ "slash": "^3.0.0",
203
202
  "sorcery": "^0.10.0",
204
203
  "source-map-js": "^1.0.2",
205
- "string-width": "^4.2.3",
206
204
  "sourcemap-codec": "^1.4.8",
207
205
  "string_decoder": "^1.3.0",
206
+ "string-width": "^4.2.3",
208
207
  "strip-ansi": "^6.0.1",
209
208
  "strip-indent": "^3.0.0",
210
209
  "strip-json-comments": "^3.1.1",
@@ -216,18 +215,18 @@
216
215
  "text-table": "^0.2.0",
217
216
  "tiny-glob": "^0.2.9",
218
217
  "to-regex-range": "^5.0.1",
219
- "tr46": "^0.0.3",
220
218
  "totalist": "^3.0.0",
219
+ "tr46": "^0.0.3",
221
220
  "tsutils": "^3.21.0",
222
- "type-fest": "^0.20.2",
223
221
  "type-check": "^0.4.0",
222
+ "type-fest": "^0.20.2",
224
223
  "undici": "^5.10.0",
225
224
  "uri-js": "^4.4.1",
226
225
  "util-deprecate": "^1.0.2",
227
226
  "web-streams-polyfill": "^3.2.1",
228
227
  "webidl-conversions": "^3.0.1",
229
- "which": "^2.0.2",
230
228
  "whatwg-url": "^5.0.0",
229
+ "which": "^2.0.2",
231
230
  "wide-align": "^1.1.5",
232
231
  "word-wrap": "^1.2.3",
233
232
  "worktop": "^0.8.0-next.14",
@@ -247,8 +246,6 @@
247
246
  "homepage": "https://github.com/Canutin/svelte-currency-input#readme",
248
247
  "exports": {
249
248
  "./package.json": "./package.json",
250
- "./CurrencyInput.svelte": "./CurrencyInput.svelte",
251
- ".": "./index.js"
252
- },
253
- "svelte": "./index.js"
249
+ "./CurrencyInput.svelte": "./CurrencyInput.svelte"
250
+ }
254
251
  }
package/index.d.ts DELETED
File without changes
package/index.js DELETED
@@ -1 +0,0 @@
1
- // Reexport your entry components here