feat: add ability to set a custom placeholder string

README.md

@@ -66,7 +66,7 @@ currency          | `string`        | `USD`       | Overrides default currency.
 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   |
+placeholder       | `string` `number` `null` | `0`         | A `string` will override the default placeholder. A `number` will override  it by formatting it to the set currency. Setting it to `null` will not show a placeholder   |
 isZeroNullish | `boolean`       | `false`      | If `true` and when the value is `0`, it will override the default placeholder and render the formatted value in the field like any other value. _Note: this option might become the default in future versions_                                   |
 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                                   |

src/lib/CurrencyInput.svelte

@@ -31,7 +31,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 placeholder: string | number | null = DEFAULT_VALUE;
 	export let autocomplete: string | null | undefined = undefined;
 	export let isNegativeAllowed: boolean = true;
 	export let isZeroNullish: boolean = false;
@@ -160,9 +160,13 @@
 		onValueChange(value);
 	};
 
+	const handlePlaceholder = (placeholder: string | number | null) => {
+		if (typeof placeholder === "number") return formatCurrency(placeholder, fractionDigits, fractionDigits);
+		if (placeholder === null) return "";
+		return placeholder;
+	};
+
 	let formattedValue = '';
-	let formattedPlaceholder =
-		placeholder !== null ? formatCurrency(placeholder, fractionDigits, fractionDigits) : '';
 	$: isNegative = value < 0;
 	$: isPositive = value > 0;
 	$: isZero = !isNegative && !isPositive;
@@ -192,7 +196,7 @@
 		inputmode="numeric"
 		name={`formatted-${name}`}
 		required={required && !isZero}
-		placeholder={formattedPlaceholder}
+		placeholder={handlePlaceholder(placeholder)}
 		{autocomplete}
 		{disabled}
 		bind:value={formattedValue}

src/routes/+page.svelte

@@ -66,6 +66,7 @@
 		/>
 		<CurrencyInput name="rupees" value={678} locale="hi-IN" currency="INR" fractionDigits={3} />
 		<CurrencyInput name="soles" value={0} isZeroNullish={true} placeholder={null} locale="es-PE" currency="PEN" />
+		<CurrencyInput name="dinars" value={0} placeholder={"How many Dinars?"} locale="en-US" currency="RSD" />
 	</div>
 
 	<nav class="demoForm__output">

tests/svelte-currency-input.test.ts

@@ -98,6 +98,8 @@ test.describe('CurrencyInput', () => {
 					'formatted-rupees': '₹678.000',
 					soles: '0',
 					'formatted-soles': 'S/ 0.00',
+					dinars: '0',
+					'formatted-dinars': '',
 				},
 				null,
 				2
@@ -297,7 +299,7 @@ test.describe('CurrencyInput', () => {
 		// Tabbing in Webkit is broken: https://github.com/Canutin/svelte-currency-input/issues/40
 		if (testInfo.project.name !== 'webkit') {
 			const formattedInputs = page.locator('.currencyInput__formatted');
-			expect(await formattedInputs.count()).toBe(11);
+			expect(await formattedInputs.count()).toBe(12);
 
 			await formattedInputs.first().focus();
 			await expect(formattedInputs.nth(0)).toBeFocused();
@@ -388,6 +390,14 @@ test.describe('CurrencyInput', () => {
 		await expect(colonFormattedInput).toHaveAttribute('placeholder', '₡0,00');
 	});
 
+	test("A custom placeholder can be set", async ({ page }) => {
+		const dinarsUnformattedInput = page.locator('.currencyInput__unformatted[name="dinars"]');
+		const dinarsFormattedInput = page.locator('.currencyInput__formatted[name="formatted-dinars"]');
+		await expect(dinarsUnformattedInput).toHaveValue('0');
+		await expect(dinarsFormattedInput).toHaveValue('');
+		await expect(dinarsFormattedInput).toHaveAttribute('placeholder', 'How many Dinars?');
+	});
+
 	test.skip('Updating chained inputs have the correct behavior', async () => {
 		// TODO
 	});