@canutin/svelte-currency-input 0.0.4 → 0.1.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/LICENSE +21 -0
  2. package/README.md +39 -22
  3. package/package.json +12 -215
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2022 Canutin
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -2,14 +2,21 @@
2
2
 
3
3
  A form input that converts numbers to currencies as you type in localized formats
4
4
 
5
- <img width="1059" alt="image" src="https://user-images.githubusercontent.com/1434675/190315136-c1d310ab-0ef1-441d-a80c-2b3727d74f59.png">
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
+ <p align="center">
8
+ <a href="https://svelte.dev/repl/d8f7d22e5b384555b430f62b157ac503?version=3.50.1" target="_blank">
9
+ <strong>REPL Demo</strong>
10
+ </a>
11
+ </p>
12
+
13
+ ---
7
14
 
8
15
  ## Features
9
16
 
10
17
  - Formats **positive** and **negative** values
11
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
12
- - Comprehensive [API](#api)
19
+ - Simple [API](#api)
13
20
  - Minimal default styling, [easy to customize](#styling)
14
21
 
15
22
  ## Usage
@@ -18,7 +25,7 @@ A form input that converts numbers to currencies as you type in localized format
18
25
  npm install svelte-currency-input --save
19
26
  ```
20
27
 
21
- ```svelte
28
+ ```html
22
29
  <script lang="ts">
23
30
  import CurrencyInput from '@canutin/svelte-currency-input';
24
31
 
@@ -26,7 +33,7 @@ npm install svelte-currency-input --save
26
33
  const currency = 'EUR';
27
34
  </script>
28
35
 
29
- <CurrencyInput name="exchange-rate" value={-420.69} {locale} {currency} />
36
+ <CurrencyInput name="exchange-rate" value="{-420.69}" {locale} {currency} />
30
37
  ```
31
38
 
32
39
  ## How it works
@@ -36,7 +43,7 @@ This is more or less what `<CurrencyInput />` looks like under the hood:
36
43
 
37
44
  ```html
38
45
  <div class="currencyInput">
39
- <!-- Unformatted value -->
46
+ <!-- Unformatted value -->
40
47
  <input class="currencyInput__unformatted" type="hidden" name="total" />
41
48
 
42
49
  <!-- Formatted value -->
@@ -46,47 +53,57 @@ This is more or less what `<CurrencyInput />` looks like under the hood:
46
53
 
47
54
  ## API
48
55
 
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 |
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 |
58
65
 
59
66
  ## Styling
60
67
 
61
68
  The default styles use [BEM naming conventions](https://getbem.com/naming/). To override the default styles apply your styles as shown below:
62
69
 
63
-
64
- ```svelte
70
+ ```html
65
71
  <div class="my-currency-input">
66
- <CurrencyInput name="total" value={420.69} />
72
+ <CurrencyInput name="total" value="{420.69}" />
67
73
  </div>
68
74
 
69
75
  <style>
70
76
  /* Container */
71
- div.my-currency-input :global(div.currencyInput) { /* ... */}
77
+ div.my-currency-input :global(div.currencyInput) {
78
+ /* ... */
79
+ }
72
80
 
73
81
  /* Formatted input */
74
- div.my-currency-input :global(input.currencyInput__formatted) { /* ... */}
82
+ div.my-currency-input :global(input.currencyInput__formatted) {
83
+ /* ... */
84
+ }
75
85
 
76
86
  /* Formatted input when the value is zero */
77
- div.my-currency-input :global(input.currencyInput__formatted--zero) { /* ... */}
87
+ div.my-currency-input :global(input.currencyInput__formatted--zero) {
88
+ /* ... */
89
+ }
78
90
 
79
91
  /* Formatted input when the value is positive */
80
- div.my-currency-input :global(input.currencyInput__formatted--positive) { /* ... */}
92
+ div.my-currency-input :global(input.currencyInput__formatted--positive) {
93
+ /* ... */
94
+ }
81
95
 
82
96
  /* Formatted input when the value is negative */
83
- div.my-currency-input :global(input.currencyInput__formatted--negative) { /* ... */}
97
+ div.my-currency-input :global(input.currencyInput__formatted--negative) {
98
+ /* ... */
99
+ }
84
100
  </style>
85
101
  ```
86
102
 
87
103
  ## Contributing
88
104
 
89
105
  Here's ways in which you can contribute:
106
+
90
107
  - Found a bug? Open a [new issue](https://github.com/Canutin/svelte-currency-input/issues/new)
91
108
  - Browse our [existing issues](https://github.com/Canutin/svelte-currency-input/issues)
92
109
  - Submit a [pull request](https://github.com/Canutin/svelte-currency-input/pulls)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canutin/svelte-currency-input",
3
- "version": "0.0.4",
3
+ "version": "0.1.1",
4
4
  "exports": {
5
5
  "./package.json": "./package.json",
6
6
  ".": "./CurrencyInput.svelte",
@@ -26,224 +26,21 @@
26
26
  "vite": "^3.1.0"
27
27
  },
28
28
  "type": "module",
29
- "description": "An input field that formats numbers to currency as you type",
30
- "dependencies": {
31
- "abbrev": "^1.1.1",
32
- "acorn": "^8.8.0",
33
- "acorn-jsx": "^5.3.2",
34
- "agent-base": "^6.0.2",
35
- "ajv": "^6.12.6",
36
- "ansi-regex": "^5.0.1",
37
- "ansi-styles": "^4.3.0",
38
- "anymatch": "^3.1.2",
39
- "aproba": "^2.0.0",
40
- "are-we-there-yet": "^2.0.0",
41
- "argparse": "^2.0.1",
42
- "array-union": "^2.1.0",
43
- "async-sema": "^3.1.1",
44
- "balanced-match": "^1.0.2",
45
- "binary-extensions": "^2.2.0",
46
- "bindings": "^1.5.0",
47
- "brace-expansion": "^1.1.11",
48
- "braces": "^3.0.2",
49
- "buffer-crc32": "^0.2.13",
50
- "callsites": "^3.1.0",
51
- "chalk": "^4.1.2",
52
- "chokidar": "^3.5.3",
53
- "chownr": "^2.0.0",
54
- "color-convert": "^2.0.1",
55
- "color-name": "^1.1.4",
56
- "color-support": "^1.1.3",
57
- "concat-map": "^0.0.1",
58
- "console-control-strings": "^1.1.0",
59
- "cookie": "^0.5.0",
60
- "cross-spawn": "^7.0.3",
61
- "data-uri-to-buffer": "^4.0.0",
62
- "debug": "^4.3.4",
63
- "dedent-js": "^1.0.1",
64
- "deep-is": "^0.1.4",
65
- "deepmerge": "^4.2.2",
66
- "delegates": "^1.0.0",
67
- "detect-indent": "^6.1.0",
68
- "detect-libc": "^2.0.1",
69
- "devalue": "^3.1.3",
70
- "dir-glob": "^3.0.1",
71
- "doctrine": "^3.0.0",
72
- "emoji-regex": "^8.0.0",
73
- "encoding": "^0.1.13",
74
- "es6-promise": "^3.3.1",
75
- "esbuild": "^0.15.7",
76
- "esbuild-darwin-64": "^0.15.7",
77
- "escape-string-regexp": "^4.0.0",
78
- "eslint-scope": "^5.1.1",
79
- "eslint-utils": "^3.0.0",
80
- "eslint-visitor-keys": "^3.3.0",
81
- "espree": "^9.4.0",
82
- "esquery": "^1.4.0",
83
- "esrecurse": "^4.3.0",
84
- "estraverse": "^4.3.0",
85
- "estree-walker": "^2.0.2",
86
- "esutils": "^2.0.3",
87
- "fast-deep-equal": "^3.1.3",
88
- "fast-glob": "^3.2.12",
89
- "fast-json-stable-stringify": "^2.1.0",
90
- "fast-levenshtein": "^2.0.6",
91
- "fastq": "^1.13.0",
92
- "fetch-blob": "^3.2.0",
93
- "file-entry-cache": "^6.0.1",
94
- "file-uri-to-path": "^1.0.0",
95
- "fill-range": "^7.0.1",
96
- "find-up": "^5.0.0",
97
- "flat-cache": "^3.0.4",
98
- "flatted": "^3.2.7",
99
- "formdata-polyfill": "^4.0.10",
100
- "fs-minipass": "^2.1.0",
101
- "fs.realpath": "^1.0.0",
102
- "fsevents": "^2.3.2",
103
- "function-bind": "^1.1.1",
104
- "functional-red-black-tree": "^1.0.1",
105
- "gauge": "^3.0.2",
106
- "glob": "^7.2.3",
107
- "glob-parent": "^5.1.2",
108
- "globals": "^13.17.0",
109
- "globalyzer": "^0.1.0",
110
- "globby": "^11.1.0",
111
- "globrex": "^0.1.2",
112
- "graceful-fs": "^4.2.10",
113
- "grapheme-splitter": "^1.0.4",
114
- "has": "^1.0.3",
115
- "has-flag": "^4.0.0",
116
- "has-unicode": "^2.0.1",
117
- "https-proxy-agent": "^5.0.1",
118
- "iconv-lite": "^0.6.3",
119
- "ignore": "^5.2.0",
120
- "immutable": "^4.1.0",
121
- "import-fresh": "^3.3.0",
122
- "imurmurhash": "^0.1.4",
123
- "inflight": "^1.0.6",
124
- "inherits": "^2.0.4",
125
- "is-binary-path": "^2.1.0",
126
- "is-core-module": "^2.10.0",
127
- "is-extglob": "^2.1.1",
128
- "is-fullwidth-code-point": "^3.0.0",
129
- "is-glob": "^4.0.3",
130
- "is-number": "^7.0.0",
131
- "isexe": "^2.0.0",
132
- "js-sdsl": "^4.1.4",
133
- "js-yaml": "^4.1.0",
134
- "json-schema-traverse": "^0.4.1",
135
- "json-stable-stringify-without-jsonify": "^1.0.1",
136
- "kleur": "^4.1.5",
137
- "levn": "^0.4.1",
138
- "locate-path": "^6.0.0",
139
- "lodash.merge": "^4.6.2",
140
- "lower-case": "^2.0.2",
141
- "lru-cache": "^6.0.0",
142
- "magic-string": "^0.26.3",
143
- "make-dir": "^3.1.0",
144
- "merge2": "^1.4.1",
145
- "micromatch": "^4.0.5",
146
- "mime": "^3.0.0",
147
- "min-indent": "^1.0.1",
148
- "minimatch": "^3.1.2",
149
- "minimist": "^1.2.6",
150
- "minipass": "^3.3.4",
151
- "minizlib": "^2.1.2",
152
- "mkdirp": "^0.5.6",
153
- "mri": "^1.2.0",
154
- "mrmime": "^1.0.1",
155
- "ms": "^2.1.2",
156
- "nanoid": "^3.3.4",
157
- "natural-compare": "^1.4.0",
158
- "no-case": "^3.0.4",
159
- "node-domexception": "^1.0.0",
160
- "node-fetch": "^3.2.10",
161
- "node-gyp-build": "^4.5.0",
162
- "nopt": "^5.0.0",
163
- "normalize-path": "^3.0.0",
164
- "npmlog": "^5.0.1",
165
- "object-assign": "^4.1.1",
166
- "once": "^1.4.0",
167
- "optionator": "^0.9.1",
168
- "p-limit": "^3.1.0",
169
- "p-locate": "^5.0.0",
170
- "parent-module": "^1.0.1",
171
- "pascal-case": "^3.1.2",
172
- "path-exists": "^4.0.0",
173
- "path-is-absolute": "^1.0.1",
174
- "path-key": "^3.1.1",
175
- "path-parse": "^1.0.7",
176
- "path-type": "^4.0.0",
177
- "picocolors": "^1.0.0",
178
- "picomatch": "^2.3.1",
179
- "playwright-core": "^1.25.2",
180
- "postcss": "^8.4.16",
181
- "prelude-ls": "^1.2.1",
182
- "punycode": "^2.1.1",
183
- "queue-microtask": "^1.2.3",
184
- "readable-stream": "^3.6.0",
185
- "readdirp": "^3.6.0",
186
- "regexparam": "^2.0.1",
187
- "regexpp": "^3.2.0",
188
- "resolve": "^1.22.1",
189
- "resolve-from": "^5.0.0",
190
- "reusify": "^1.0.4",
191
- "rimraf": "^3.0.2",
192
- "rollup": "^2.78.1",
193
- "rollup-pluginutils": "^2.8.2",
194
- "run-parallel": "^1.2.0",
195
- "sade": "^1.8.1",
196
- "safe-buffer": "^5.2.1",
197
- "safer-buffer": "^2.1.2",
198
- "sander": "^0.5.1",
199
- "semver": "^7.3.7",
200
- "set-blocking": "^2.0.0",
201
- "set-cookie-parser": "^2.5.1",
202
- "shebang-command": "^2.0.0",
203
- "shebang-regex": "^3.0.0",
204
- "signal-exit": "^3.0.7",
205
- "sirv": "^2.0.2",
206
- "slash": "^3.0.0",
207
- "sorcery": "^0.10.0",
208
- "source-map-js": "^1.0.2",
209
- "sourcemap-codec": "^1.4.8",
210
- "string_decoder": "^1.3.0",
211
- "string-width": "^4.2.3",
212
- "strip-ansi": "^6.0.1",
213
- "strip-indent": "^3.0.0",
214
- "strip-json-comments": "^3.1.1",
215
- "supports-color": "^7.2.0",
216
- "supports-preserve-symlinks-flag": "^1.0.0",
217
- "svelte-hmr": "^0.14.12",
218
- "svelte2tsx": "^0.5.17",
219
- "tar": "^6.1.11",
220
- "text-table": "^0.2.0",
221
- "tiny-glob": "^0.2.9",
222
- "to-regex-range": "^5.0.1",
223
- "totalist": "^3.0.0",
224
- "tr46": "^0.0.3",
225
- "tsutils": "^3.21.0",
226
- "type-check": "^0.4.0",
227
- "type-fest": "^0.20.2",
228
- "undici": "^5.10.0",
229
- "uri-js": "^4.4.1",
230
- "util-deprecate": "^1.0.2",
231
- "web-streams-polyfill": "^3.2.1",
232
- "webidl-conversions": "^3.0.1",
233
- "whatwg-url": "^5.0.0",
234
- "which": "^2.0.2",
235
- "wide-align": "^1.1.5",
236
- "word-wrap": "^1.2.3",
237
- "worktop": "^0.8.0-next.14",
238
- "wrappy": "^1.0.2",
239
- "yallist": "^4.0.0",
240
- "yocto-queue": "^0.1.0"
241
- },
29
+ "description": "A form input that converts numbers to currencies as you type in localized formats",
30
+ "keywords": [
31
+ "svelte",
32
+ "currency",
33
+ "money",
34
+ "input",
35
+ "i18n",
36
+ "positive",
37
+ "negative"
38
+ ],
242
39
  "repository": {
243
40
  "type": "git",
244
41
  "url": "git+https://github.com/Canutin/svelte-currency-input.git"
245
42
  },
246
- "author": "",
43
+ "author": "Fernando Maclen <hello@fernando.is>",
247
44
  "license": "MIT",
248
45
  "bugs": {
249
46
  "url": "https://github.com/Canutin/svelte-currency-input/issues"