@canutin/svelte-currency-input 0.3.1 → 0.4.0

package/README.md

@@ -58,15 +58,16 @@ 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://github.com/datasets/currency-codes/blob/master/data/codes-all.csv)                                   |
-| 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                                                                                                                        |
-| isNegativeAllowed | `boolean` | `true`      | If `false`, forces formatting only to positive values and ignores `--positive` and `--negative` styling modifiers                                   |
+| 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://github.com/datasets/currency-codes/blob/master/data/codes-all.csv)                                   |
+| 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                                   |
 
 ## Styling
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@canutin/svelte-currency-input",
-	"version": "0.3.1",
+	"version": "0.4.0",
 	"exports": {
 		".": "./index.js"
 	},

package/src/lib/CurrencyInput.svelte

@@ -10,6 +10,7 @@
 	export let name: string = DEFAULT_NAME;
 	export let required: boolean = false;
 	export let disabled: boolean = false;
+	export let placeholder: number | null = DEFAULT_VALUE;
 	export let isNegativeAllowed: boolean = true;
 
 	// Formats value as: e.g. $1,523.00 | -$1,523.00
@@ -75,11 +76,10 @@
 	};
 
 	let formattedValue = '';
+	let formattedPlaceholder = placeholder !== null ? formatCurrency(placeholder, 2, 2) : '';
 	$: isZero = value === 0;
 	$: isNegative = value < 0;
 	$: value, setFormattedValue();
-
-	const placeholder = formatCurrency(DEFAULT_VALUE, 2, 2); // e.g. '$0.00'
 </script>
 
 <div class="currencyInput">
@@ -95,7 +95,7 @@
 		inputmode="numeric"
 		name={`formatted-${name}`}
 		required={required && !isZero}
-		{placeholder}
+		placeholder={formattedPlaceholder}
 		{disabled}
 		bind:value={formattedValue}
 		on:keydown={handleKeyDown}

package/src/routes/+page.svelte

@@ -18,13 +18,19 @@
 	<div class="demoForm__container">
 		<CurrencyInput name="total" value={-42069.69} />
 		<CurrencyInput name="rent" />
+		<CurrencyInput name="balance" value={1234.56} isNegativeAllowed={false} placeholder={null} />
 		<CurrencyInput name="cashflow" value={5678.9} />
-		<CurrencyInput name="balance" value={1234.56} isNegativeAllowed={false} />
 
 		<CurrencyInput name="amount" value={5678.9} {locale} {currency} />
-		<CurrencyInput name="deficit" value={1234.56} isNegativeAllowed={false} {locale} {currency} />
 		<CurrencyInput name="loss" value={97532.95} disabled={true} {locale} {currency} />
 		<CurrencyInput name="cost" value={-42069.69} {locale} {currency} />
+		<CurrencyInput
+			name="deficit"
+			placeholder={1234.56}
+			isNegativeAllowed={false}
+			{locale}
+			{currency}
+		/>
 	</div>
 
 	<nav class="demoForm__output">

package/tests/svelte-currency-input.test.ts

@@ -71,16 +71,16 @@ test.describe('CurrencyInput', () => {
 					'formatted-total': '-$42,069.69',
 					rent: '0',
 					'formatted-rent': '',
-					cashflow: '5678.9',
-					'formatted-cashflow': '$5,678.9',
 					balance: '1234.56',
 					'formatted-balance': '$1,234.56',
+					cashflow: '5678.9',
+					'formatted-cashflow': '$5,678.9',
 					amount: '5678.9',
 					'formatted-amount': '€ 5.678,9',
-					deficit: '1234.56',
-					'formatted-deficit': '€ 1.234,56',
 					cost: '-42069.69',
-					'formatted-cost': '€ -42.069,69'
+					'formatted-cost': '€ -42.069,69',
+					deficit: '0',
+					'formatted-deficit': ''
 				},
 				null,
 				2
@@ -184,6 +184,26 @@ test.describe('CurrencyInput', () => {
 		await expect(rentFormattedInput).toHaveValue('');
 	});
 
+	test('Placeholders can be overriden', async ({ page }) => {
+		await page.goto('/');
+
+		// Default placeholder
+		const rentFormattedInput = page.locator('.currencyInput__formatted[name="formatted-rent"]');
+		await expect(rentFormattedInput).toHaveAttribute('placeholder', '$0.00');
+
+		// Null placeholder
+		const balanceFormattedInput = page.locator(
+			'.currencyInput__formatted[name="formatted-balance"]'
+		);
+		await expect(balanceFormattedInput).toHaveAttribute('placeholder', '');
+
+		// Overriden placeholder
+		const deficitFormattedInput = page.locator(
+			'.currencyInput__formatted[name="formatted-deficit"]'
+		);
+		await expect(deficitFormattedInput).toHaveAttribute('placeholder', '€ 1.234,56'); // The space is `%A0`, not `%20`
+	});
+
 	test.skip('Updating chained inputs have the correct behavior', async () => {
 		// TODO
 	});