@canutin/svelte-currency-input 0.9.2 → 0.10.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.
- package/CurrencyInput.svelte +8 -6
- package/CurrencyInput.svelte.d.ts +1 -0
- package/README.md +14 -13
- package/package.json +2 -2
package/CurrencyInput.svelte
CHANGED
|
@@ -16,6 +16,7 @@ export let name = DEFAULT_NAME;
|
|
|
16
16
|
export let required = false;
|
|
17
17
|
export let disabled = false;
|
|
18
18
|
export let placeholder = DEFAULT_VALUE;
|
|
19
|
+
export let autocomplete = undefined;
|
|
19
20
|
export let isNegativeAllowed = true;
|
|
20
21
|
export let fractionDigits = DEFAULT_FRACTION_DIGITS;
|
|
21
22
|
export let inputClasses = null;
|
|
@@ -103,13 +104,13 @@ const setFormattedValue = () => {
|
|
|
103
104
|
formattedValue = isZero ? '' : formatCurrency(value, fractionDigits, 0);
|
|
104
105
|
// Update `value` after formatting
|
|
105
106
|
setUnformattedValue();
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
107
|
+
let retries = 0;
|
|
108
|
+
while (previousFormattedValueLength === formattedValue.length && retries < 10)
|
|
109
|
+
retries++;
|
|
110
|
+
if (previousFormattedValueLength !== formattedValue.length) {
|
|
111
|
+
const endCaretPosition = startCaretPosition + formattedValue.length - previousFormattedValueLength;
|
|
111
112
|
inputTarget?.setSelectionRange(endCaretPosition, endCaretPosition);
|
|
112
|
-
}
|
|
113
|
+
}
|
|
113
114
|
// Run callback function when `value` changes
|
|
114
115
|
onValueChange(value);
|
|
115
116
|
};
|
|
@@ -144,6 +145,7 @@ $: value, setFormattedValue();
|
|
|
144
145
|
name={`formatted-${name}`}
|
|
145
146
|
required={required && !isZero}
|
|
146
147
|
placeholder={formattedPlaceholder}
|
|
148
|
+
{autocomplete}
|
|
147
149
|
{disabled}
|
|
148
150
|
bind:value={formattedValue}
|
|
149
151
|
on:keydown={handleKeyDown}
|
|
@@ -8,6 +8,7 @@ declare const __propDef: {
|
|
|
8
8
|
required?: boolean | undefined;
|
|
9
9
|
disabled?: boolean | undefined;
|
|
10
10
|
placeholder?: number | null | undefined;
|
|
11
|
+
autocomplete?: string | null | undefined;
|
|
11
12
|
isNegativeAllowed?: boolean | undefined;
|
|
12
13
|
fractionDigits?: number | undefined;
|
|
13
14
|
inputClasses?: {
|
package/README.md
CHANGED
|
@@ -58,19 +58,20 @@ This is more or less what `<CurrencyInput />` looks like under the hood:
|
|
|
58
58
|
|
|
59
59
|
## API
|
|
60
60
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
|
61
|
+
Option | Type | Default | Description |
|
|
62
|
+
----------------- | --------------- | ----------- | ----------- |
|
|
63
|
+
value | `number` | `undefined` | Initial value. If left `undefined` a formatted value of `0` is visible as a placeholder |
|
|
64
|
+
locale | `string` | `en-US` | Overrides default locale. [Examples](https://gist.github.com/ncreated/9934896) |
|
|
65
|
+
currency | `string` | `USD` | Overrides default currency. [Examples](https://www.xe.com/symbols/) |
|
|
66
|
+
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 |
|
|
67
|
+
required | `boolean` | `false` | Marks the inputs as required |
|
|
68
|
+
disabled | `boolean` | `false` | Marks the inputs as disabled |
|
|
69
|
+
placeholder | `number` `null` | `0` | Overrides the default placeholder. Setting the value to a `number` will display it as formatted. Setting it to `null` will not show a placeholder |
|
|
70
|
+
autocomplete | `string` | `undefined` | Sets the autocomplete attribute. Accepts any valid HTML [autocomplete attribute values](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values) |
|
|
71
|
+
isNegativeAllowed | `boolean` | `true` | If `false`, forces formatting only to positive values and ignores `--positive` and `--negative` styling modifiers |
|
|
72
|
+
fractionDigits | `number` | `2` | Sets `maximumFractionDigits` in [`Intl.NumberFormat()` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumfractiondigits) used for formatting the currency. Supported digits: `0` to `20` |
|
|
73
|
+
inputClasses | `object` | [See below](#Styling) | Selectively overrides any class names passed |
|
|
74
|
+
onValueChange | `Callback` | `undefined` | Runs a callback function after the value changes |
|
|
74
75
|
|
|
75
76
|
## Styling
|
|
76
77
|
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@canutin/svelte-currency-input",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"exports": {
|
|
5
5
|
"./package.json": "./package.json",
|
|
6
6
|
".": "./index.js",
|
|
7
7
|
"./CurrencyInput.svelte": "./CurrencyInput.svelte"
|
|
8
8
|
},
|
|
9
9
|
"devDependencies": {
|
|
10
|
-
"@playwright/test": "^1.
|
|
10
|
+
"@playwright/test": "^1.37.1",
|
|
11
11
|
"@sveltejs/adapter-auto": "next",
|
|
12
12
|
"@sveltejs/kit": "next",
|
|
13
13
|
"@sveltejs/package": "next",
|