@canutin/svelte-currency-input 0.9.3 → 0.10.1

package/CurrencyInput.svelte

@@ -1,4 +1,5 @@
-<script>const DEFAULT_LOCALE = 'en-US';
+<script>import { onMount } from "svelte";
+const DEFAULT_LOCALE = 'en-US';
 const DEFAULT_CURRENCY = 'USD';
 const DEFAULT_NAME = 'total';
 const DEFAULT_VALUE = 0;
@@ -16,6 +17,7 @@ export let name = DEFAULT_NAME;
 export let required = false;
 export let disabled = false;
 export let placeholder = DEFAULT_VALUE;
+export let autocomplete = undefined;
 export let isNegativeAllowed = true;
 export let fractionDigits = DEFAULT_FRACTION_DIGITS;
 export let inputClasses = null;
@@ -39,6 +41,11 @@ const handleKeyDown = (event) => {
     if (!isDeletion && !isModifier && !isArrowKey && isInvalidCharacter && !isTab)
         event.preventDefault();
 };
+// Formats the value when the input loses focus and sets the correct number of
+// fraction digits when the value is zero
+const handleOnBlur = () => setFormattedValue(true);
+// Also set the correct fraction digits when the value is zero on initial load
+onMount(() => setFormattedValue(true));
 let inputTarget;
 const currencyDecimal = new Intl.NumberFormat(locale).format(1.1).charAt(1); // '.' or ','
 const isDecimalComma = currencyDecimal === ',';
@@ -95,12 +102,12 @@ const setUnformattedValue = (event) => {
         }
     }
 };
-const setFormattedValue = () => {
+const setFormattedValue = (hasMinFractionDigits) => {
     // Previous caret position
     const startCaretPosition = inputTarget?.selectionStart || 0;
     const previousFormattedValueLength = formattedValue.length;
     // Apply formatting to input
-    formattedValue = isZero ? '' : formatCurrency(value, fractionDigits, 0);
+    formattedValue = isZero ? '' : formatCurrency(value, fractionDigits, hasMinFractionDigits ? fractionDigits : 0);
     // Update `value` after formatting
     setUnformattedValue();
     let retries = 0;
@@ -144,11 +151,12 @@ $: value, setFormattedValue();
 		name={`formatted-${name}`}
 		required={required && !isZero}
 		placeholder={formattedPlaceholder}
+		{autocomplete}
 		{disabled}
 		bind:value={formattedValue}
 		on:keydown={handleKeyDown}
 		on:keyup={setUnformattedValue}
-		on:blur={setFormattedValue}
+		on:blur={handleOnBlur}
 	/>
 </div>
 

package/CurrencyInput.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         required?: boolean | undefined;
         disabled?: boolean | undefined;
         placeholder?: number | null | undefined;
+        autocomplete?: string | null | undefined;
         isNegativeAllowed?: boolean | undefined;
         fractionDigits?: number | undefined;
         inputClasses?: {

package/README.md

@@ -58,19 +58,20 @@ This is more or less what `<CurrencyInput />` looks like under the hood:
 
 ## API
 
-| Option            | Type            | Default     | Description |
-| ----------------- | --------------- | ----------- | ----------- |
-| value             | `number`        | `undefined` | Initial value. If left `undefined` a formatted value of `0` is visible as a placeholder |
-| locale            | `string`        | `en-US`     | Overrides default locale. [Examples](https://gist.github.com/ncreated/9934896) |
-| currency          | `string`        | `USD`       | Overrides default currency. [Examples](https://www.xe.com/symbols/) |
-| 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 |
-| required          | `boolean`       | `false`     | Marks the inputs as required |
-| disabled          | `boolean`       | `false`     | Marks the inputs as disabled |
-| 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   |
-| isNegativeAllowed | `boolean`       | `true`      | If `false`, forces formatting only to positive values and ignores `--positive` and `--negative` styling modifiers                                   |
-| 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` |
-| inputClasses    | `object`        | [See below](#Styling)         | Selectively overrides any class names passed |
-| onValueChange          | `Callback`       | `undefined`     | Runs a callback function after the value changes |
+Option            | Type            | Default     | Description |
+----------------- | --------------- | ----------- | ----------- |
+value             | `number`        | `undefined` | Initial value. If left `undefined` a formatted value of `0` is visible as a placeholder |
+locale            | `string`        | `en-US`     | Overrides default locale. [Examples](https://gist.github.com/ncreated/9934896) |
+currency          | `string`        | `USD`       | Overrides default currency. [Examples](https://www.xe.com/symbols/) |
+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 |
+required          | `boolean`       | `false`     | Marks the inputs as required |
+disabled          | `boolean`       | `false`     | Marks the inputs as disabled |
+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   |
+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) |
+isNegativeAllowed | `boolean`       | `true`      | If `false`, forces formatting only to positive values and ignores `--positive` and `--negative` styling modifiers                                   |
+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` |
+inputClasses      | `object`        | [See below](#Styling)         | Selectively overrides any class names passed |
+onValueChange     | `Callback`      | `undefined` | Runs a callback function after the value changes |
 
 ## Styling
 

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@canutin/svelte-currency-input",
-  "version": "0.9.3",
+  "version": "0.10.1",
   "exports": {
     "./package.json": "./package.json",
     ".": "./index.js",
     "./CurrencyInput.svelte": "./CurrencyInput.svelte"
   },
   "devDependencies": {
-    "@playwright/test": "^1.25.0",
+    "@playwright/test": "^1.37.1",
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
     "@sveltejs/package": "next",