@canutin/svelte-currency-input 0.0.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.
@@ -0,0 +1,129 @@
1
+ <script>export let value;
2
+ export let name;
3
+ export let required = false;
4
+ export let disabled = false;
5
+ export let isNegativeAllowed = true;
6
+ export let locale = 'en-US';
7
+ export let currency = 'USD';
8
+ let formattedValue = '';
9
+ $: isZero = value === 0;
10
+ $: isNegative = value < 0;
11
+ $: value, applyFormatting();
12
+ // Formats value as: e.g. $1,523.00 | -$1,523.00
13
+ const formatCurrency = (value, maximumFractionDigits, minimumFractionDigits) => {
14
+ return new Intl.NumberFormat(locale, {
15
+ currency: currency,
16
+ style: 'currency',
17
+ maximumFractionDigits: maximumFractionDigits || 0,
18
+ minimumFractionDigits: minimumFractionDigits || 0
19
+ }).format(value);
20
+ };
21
+ const placeholder = formatCurrency(0, 2, 2); // e.g. '$0.00'
22
+ const currencySymbol = formatCurrency(0, 0).replace('0', ''); // e.g. '$'
23
+ const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1); // '.' or ','
24
+ const currenctInputName = `currency${name.replace(/^./g, ($1) => $1.toUpperCase())}`;
25
+ // Updates `value` by stripping away the currency formatting
26
+ const setValue = (event) => {
27
+ // Don't format if the user is typing a currencyDecimal point
28
+ if (event?.key === currencyDecimal)
29
+ return;
30
+ // If `formattedValue` is ['$', '-$', "-"] we don't need to continue
31
+ const ignoreSymbols = [currencySymbol, `-${currencySymbol}`, '-'];
32
+ const strippedUnformattedValue = formattedValue.replace(' ', '');
33
+ if (ignoreSymbols.includes(strippedUnformattedValue))
34
+ return;
35
+ // Remove all characters that arent: numbers, commas, periods (or minus signs if `isNegativeAllowed`)
36
+ let unformattedValue = isNegativeAllowed
37
+ ? formattedValue.replace(/[^0-9,.-]/g, '')
38
+ : formattedValue.replace(/[^0-9,.]/g, '');
39
+ // Reverse the value when minus is pressed
40
+ if (isNegativeAllowed && event?.key === '-')
41
+ value = value * -1;
42
+ // Finally set the value
43
+ if (Number.isNaN(parseFloat(unformattedValue))) {
44
+ value = 0;
45
+ }
46
+ else {
47
+ const isDecimalComma = currencyDecimal === ','; // Remove currency formatting from `formattedValue` so we can assign it to `value`
48
+ if (isDecimalComma)
49
+ 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
+ value = parseFloat(unformattedValue);
52
+ }
53
+ };
54
+ const applyFormatting = () => {
55
+ formattedValue = isZero ? '' : formatCurrency(value, 2, 0);
56
+ };
57
+ </script>
58
+
59
+ <div class="currencyInput">
60
+ <input class="currencyInput__input" type="hidden" {name} {disabled} bind:value />
61
+ <input
62
+ class="
63
+ currencyInput__currency
64
+ {isNegativeAllowed && !isZero && !isNegative && 'currencyInput__currency--positive'}
65
+ {isZero && 'currencyInput__currency--zero'}
66
+ {isNegativeAllowed && isNegative && 'currencyInput__currency--negative'}
67
+ "
68
+ type="text"
69
+ inputmode="numeric"
70
+ name={currenctInputName}
71
+ required={required && !isZero}
72
+ {placeholder}
73
+ {disabled}
74
+ bind:value={formattedValue}
75
+ on:keyup={setValue}
76
+ />
77
+ </div>
78
+
79
+ <style>div.currencyInput {
80
+ display: flex;
81
+ flex-direction: column;
82
+ }
83
+
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>
@@ -0,0 +1,22 @@
1
+ import { SvelteComponentTyped } from "svelte";
2
+ declare const __propDef: {
3
+ props: {
4
+ value: number;
5
+ name: string;
6
+ required?: boolean | undefined;
7
+ disabled?: boolean | undefined;
8
+ isNegativeAllowed?: boolean | undefined;
9
+ locale?: string | undefined;
10
+ currency?: string | undefined;
11
+ };
12
+ events: {
13
+ [evt: string]: CustomEvent<any>;
14
+ };
15
+ slots: {};
16
+ };
17
+ export declare type CurrencyInputProps = typeof __propDef.props;
18
+ export declare type CurrencyInputEvents = typeof __propDef.events;
19
+ export declare type CurrencyInputSlots = typeof __propDef.slots;
20
+ export default class CurrencyInput extends SvelteComponentTyped<CurrencyInputProps, CurrencyInputEvents, CurrencyInputSlots> {
21
+ }
22
+ export {};
package/README.md ADDED
@@ -0,0 +1,38 @@
1
+ # create-svelte
2
+
3
+ Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
4
+
5
+ ## Creating a project
6
+
7
+ If you're seeing this, you've probably already done this step. Congrats!
8
+
9
+ ```bash
10
+ # create a new project in the current directory
11
+ npm create svelte@latest
12
+
13
+ # create a new project in my-app
14
+ npm create svelte@latest my-app
15
+ ```
16
+
17
+ ## Developing
18
+
19
+ Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20
+
21
+ ```bash
22
+ npm run dev
23
+
24
+ # or start the server and open the app in a new browser tab
25
+ npm run dev -- --open
26
+ ```
27
+
28
+ ## Building
29
+
30
+ To create a production version of your app:
31
+
32
+ ```bash
33
+ npm run build
34
+ ```
35
+
36
+ You can preview the production build with `npm run preview`.
37
+
38
+ > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
package/index.d.ts ADDED
File without changes
package/index.js ADDED
@@ -0,0 +1 @@
1
+ // Reexport your entry components here
package/package.json ADDED
@@ -0,0 +1,255 @@
1
+ {
2
+ "name": "@canutin/svelte-currency-input",
3
+ "version": "0.0.1",
4
+ "devDependencies": {
5
+ "@playwright/test": "^1.25.0",
6
+ "@sveltejs/adapter-auto": "next",
7
+ "@sveltejs/kit": "next",
8
+ "@sveltejs/package": "^1.0.0-next.1",
9
+ "@typescript-eslint/eslint-plugin": "^5.27.0",
10
+ "@typescript-eslint/parser": "^5.27.0",
11
+ "eslint": "^8.16.0",
12
+ "eslint-config-prettier": "^8.3.0",
13
+ "eslint-plugin-svelte3": "^4.0.0",
14
+ "prettier": "^2.6.2",
15
+ "prettier-plugin-svelte": "^2.7.0",
16
+ "sass": "^1.54.9",
17
+ "svelte": "^3.44.0",
18
+ "svelte-check": "^2.7.1",
19
+ "svelte-preprocess": "^4.10.6",
20
+ "tslib": "^2.3.1",
21
+ "typescript": "^4.7.4",
22
+ "vite": "^3.1.0"
23
+ },
24
+ "type": "module",
25
+ "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
26
+ "main": "svelte.config.js",
27
+ "dependencies": {
28
+ "acorn": "^8.8.0",
29
+ "abbrev": "^1.1.1",
30
+ "agent-base": "^6.0.2",
31
+ "ajv": "^6.12.6",
32
+ "acorn-jsx": "^5.3.2",
33
+ "ansi-regex": "^5.0.1",
34
+ "ansi-styles": "^4.3.0",
35
+ "anymatch": "^3.1.2",
36
+ "argparse": "^2.0.1",
37
+ "aproba": "^2.0.0",
38
+ "are-we-there-yet": "^2.0.0",
39
+ "array-union": "^2.1.0",
40
+ "async-sema": "^3.1.1",
41
+ "balanced-match": "^1.0.2",
42
+ "binary-extensions": "^2.2.0",
43
+ "bindings": "^1.5.0",
44
+ "braces": "^3.0.2",
45
+ "brace-expansion": "^1.1.11",
46
+ "buffer-crc32": "^0.2.13",
47
+ "chalk": "^4.1.2",
48
+ "chokidar": "^3.5.3",
49
+ "callsites": "^3.1.0",
50
+ "color-convert": "^2.0.1",
51
+ "chownr": "^2.0.0",
52
+ "color-name": "^1.1.4",
53
+ "color-support": "^1.1.3",
54
+ "concat-map": "^0.0.1",
55
+ "cookie": "^0.5.0",
56
+ "cross-spawn": "^7.0.3",
57
+ "console-control-strings": "^1.1.0",
58
+ "data-uri-to-buffer": "^4.0.0",
59
+ "debug": "^4.3.4",
60
+ "deepmerge": "^4.2.2",
61
+ "delegates": "^1.0.0",
62
+ "dedent-js": "^1.0.1",
63
+ "deep-is": "^0.1.4",
64
+ "detect-indent": "^6.1.0",
65
+ "detect-libc": "^2.0.1",
66
+ "devalue": "^3.1.3",
67
+ "dir-glob": "^3.0.1",
68
+ "doctrine": "^3.0.0",
69
+ "emoji-regex": "^8.0.0",
70
+ "es6-promise": "^3.3.1",
71
+ "encoding": "^0.1.13",
72
+ "esbuild": "^0.15.7",
73
+ "esbuild-darwin-64": "^0.15.7",
74
+ "escape-string-regexp": "^4.0.0",
75
+ "eslint-scope": "^5.1.1",
76
+ "eslint-visitor-keys": "^3.3.0",
77
+ "eslint-utils": "^3.0.0",
78
+ "estraverse": "^4.3.0",
79
+ "espree": "^9.4.0",
80
+ "esquery": "^1.4.0",
81
+ "esrecurse": "^4.3.0",
82
+ "estree-walker": "^2.0.2",
83
+ "fast-deep-equal": "^3.1.3",
84
+ "esutils": "^2.0.3",
85
+ "fast-glob": "^3.2.12",
86
+ "fast-json-stable-stringify": "^2.1.0",
87
+ "fast-levenshtein": "^2.0.6",
88
+ "fetch-blob": "^3.2.0",
89
+ "file-entry-cache": "^6.0.1",
90
+ "fastq": "^1.13.0",
91
+ "file-uri-to-path": "^1.0.0",
92
+ "find-up": "^5.0.0",
93
+ "fill-range": "^7.0.1",
94
+ "flat-cache": "^3.0.4",
95
+ "flatted": "^3.2.7",
96
+ "formdata-polyfill": "^4.0.10",
97
+ "fs-minipass": "^2.1.0",
98
+ "fsevents": "^2.3.2",
99
+ "function-bind": "^1.1.1",
100
+ "fs.realpath": "^1.0.0",
101
+ "functional-red-black-tree": "^1.0.1",
102
+ "glob": "^7.2.3",
103
+ "gauge": "^3.0.2",
104
+ "glob-parent": "^5.1.2",
105
+ "globals": "^13.17.0",
106
+ "globalyzer": "^0.1.0",
107
+ "globby": "^11.1.0",
108
+ "globrex": "^0.1.2",
109
+ "graceful-fs": "^4.2.10",
110
+ "has": "^1.0.3",
111
+ "grapheme-splitter": "^1.0.4",
112
+ "has-flag": "^4.0.0",
113
+ "has-unicode": "^2.0.1",
114
+ "https-proxy-agent": "^5.0.1",
115
+ "iconv-lite": "^0.6.3",
116
+ "ignore": "^5.2.0",
117
+ "import-fresh": "^3.3.0",
118
+ "imurmurhash": "^0.1.4",
119
+ "immutable": "^4.1.0",
120
+ "inflight": "^1.0.6",
121
+ "inherits": "^2.0.4",
122
+ "is-binary-path": "^2.1.0",
123
+ "is-extglob": "^2.1.1",
124
+ "is-core-module": "^2.10.0",
125
+ "is-glob": "^4.0.3",
126
+ "is-fullwidth-code-point": "^3.0.0",
127
+ "is-number": "^7.0.0",
128
+ "isexe": "^2.0.0",
129
+ "js-sdsl": "^4.1.4",
130
+ "js-yaml": "^4.1.0",
131
+ "json-schema-traverse": "^0.4.1",
132
+ "kleur": "^4.1.5",
133
+ "locate-path": "^6.0.0",
134
+ "json-stable-stringify-without-jsonify": "^1.0.1",
135
+ "levn": "^0.4.1",
136
+ "lodash.merge": "^4.6.2",
137
+ "lower-case": "^2.0.2",
138
+ "magic-string": "^0.26.3",
139
+ "lru-cache": "^6.0.0",
140
+ "make-dir": "^3.1.0",
141
+ "merge2": "^1.4.1",
142
+ "micromatch": "^4.0.5",
143
+ "mime": "^3.0.0",
144
+ "min-indent": "^1.0.1",
145
+ "minimatch": "^3.1.2",
146
+ "minimist": "^1.2.6",
147
+ "minipass": "^3.3.4",
148
+ "mkdirp": "^0.5.6",
149
+ "minizlib": "^2.1.2",
150
+ "mri": "^1.2.0",
151
+ "ms": "^2.1.2",
152
+ "mrmime": "^1.0.1",
153
+ "nanoid": "^3.3.4",
154
+ "natural-compare": "^1.4.0",
155
+ "node-domexception": "^1.0.0",
156
+ "no-case": "^3.0.4",
157
+ "node-fetch": "^3.2.10",
158
+ "nopt": "^5.0.0",
159
+ "normalize-path": "^3.0.0",
160
+ "object-assign": "^4.1.1",
161
+ "npmlog": "^5.0.1",
162
+ "once": "^1.4.0",
163
+ "node-gyp-build": "^4.5.0",
164
+ "optionator": "^0.9.1",
165
+ "p-limit": "^3.1.0",
166
+ "p-locate": "^5.0.0",
167
+ "pascal-case": "^3.1.2",
168
+ "path-exists": "^4.0.0",
169
+ "path-is-absolute": "^1.0.1",
170
+ "path-key": "^3.1.1",
171
+ "parent-module": "^1.0.1",
172
+ "path-parse": "^1.0.7",
173
+ "picocolors": "^1.0.0",
174
+ "path-type": "^4.0.0",
175
+ "picomatch": "^2.3.1",
176
+ "playwright-core": "^1.25.2",
177
+ "postcss": "^8.4.16",
178
+ "prelude-ls": "^1.2.1",
179
+ "punycode": "^2.1.1",
180
+ "queue-microtask": "^1.2.3",
181
+ "readdirp": "^3.6.0",
182
+ "readable-stream": "^3.6.0",
183
+ "regexpp": "^3.2.0",
184
+ "regexparam": "^2.0.1",
185
+ "resolve": "^1.22.1",
186
+ "resolve-from": "^5.0.0",
187
+ "rimraf": "^3.0.2",
188
+ "reusify": "^1.0.4",
189
+ "rollup": "^2.78.1",
190
+ "rollup-pluginutils": "^2.8.2",
191
+ "run-parallel": "^1.2.0",
192
+ "sade": "^1.8.1",
193
+ "safe-buffer": "^5.2.1",
194
+ "safer-buffer": "^2.1.2",
195
+ "semver": "^7.3.7",
196
+ "sander": "^0.5.1",
197
+ "set-blocking": "^2.0.0",
198
+ "set-cookie-parser": "^2.5.1",
199
+ "shebang-command": "^2.0.0",
200
+ "shebang-regex": "^3.0.0",
201
+ "signal-exit": "^3.0.7",
202
+ "slash": "^3.0.0",
203
+ "sirv": "^2.0.2",
204
+ "sorcery": "^0.10.0",
205
+ "source-map-js": "^1.0.2",
206
+ "string-width": "^4.2.3",
207
+ "sourcemap-codec": "^1.4.8",
208
+ "string_decoder": "^1.3.0",
209
+ "strip-ansi": "^6.0.1",
210
+ "strip-indent": "^3.0.0",
211
+ "strip-json-comments": "^3.1.1",
212
+ "supports-color": "^7.2.0",
213
+ "supports-preserve-symlinks-flag": "^1.0.0",
214
+ "svelte-hmr": "^0.14.12",
215
+ "svelte2tsx": "^0.5.17",
216
+ "tar": "^6.1.11",
217
+ "text-table": "^0.2.0",
218
+ "tiny-glob": "^0.2.9",
219
+ "to-regex-range": "^5.0.1",
220
+ "tr46": "^0.0.3",
221
+ "totalist": "^3.0.0",
222
+ "tsutils": "^3.21.0",
223
+ "type-fest": "^0.20.2",
224
+ "type-check": "^0.4.0",
225
+ "undici": "^5.10.0",
226
+ "uri-js": "^4.4.1",
227
+ "util-deprecate": "^1.0.2",
228
+ "web-streams-polyfill": "^3.2.1",
229
+ "webidl-conversions": "^3.0.1",
230
+ "which": "^2.0.2",
231
+ "whatwg-url": "^5.0.0",
232
+ "wide-align": "^1.1.5",
233
+ "word-wrap": "^1.2.3",
234
+ "worktop": "^0.8.0-next.14",
235
+ "wrappy": "^1.0.2",
236
+ "yallist": "^4.0.0",
237
+ "yocto-queue": "^0.1.0"
238
+ },
239
+ "repository": {
240
+ "type": "git",
241
+ "url": "git+https://github.com/Canutin/svelte-currency-input.git"
242
+ },
243
+ "author": "",
244
+ "license": "ISC",
245
+ "bugs": {
246
+ "url": "https://github.com/Canutin/svelte-currency-input/issues"
247
+ },
248
+ "homepage": "https://github.com/Canutin/svelte-currency-input#readme",
249
+ "exports": {
250
+ "./package.json": "./package.json",
251
+ "./CurrencyInput.svelte": "./CurrencyInput.svelte",
252
+ ".": "./index.js"
253
+ },
254
+ "svelte": "./index.js"
255
+ }