fix: set inputmode dynamically based on fractionDigits (#72)

* fix: set inputmode dynamically based on `fractionDigits` * feat: make demo page responsive * fix: tweak styles of h1 * add title tag and link to REPL * add test * fix: remove peerDependencies
fmaclen · Nov 10, 2023 · 7d5c21b · 7d5c21b
1 parent 2f3b624
commit 7d5c21b
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -23,9 +23,6 @@
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
-	"peerDependencies": {
-		"svelte": "^3.59.2"
-	},
 	"devDependencies": {
 		"@playwright/test": "^1.39.0",
 		"@sveltejs/adapter-auto": "^2.0.0",

diff --git a/src/app.html b/src/app.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
+		<title>svelte-currency-input | Demo</title>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />

diff --git a/src/lib/CurrencyInput.svelte b/src/lib/CurrencyInput.svelte
@@ -204,7 +204,7 @@
 			: ''}
 		"
 		type="text"
-		inputmode="numeric"
+		inputmode={fractionDigits > 0 ? "decimal" : "numeric"}
 		name={`formatted-${name}`}
 		required={required && !isZero}
 		placeholder={handlePlaceholder(placeholder)}

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -15,6 +15,33 @@
 </script>
 
 <form class="demoForm" on:submit={handleSubmit}>
+	<nav class="demoForm__nav">
+		<h1 class="demoForm__h1">svelte-currency-input</h1>
+		<a class="demoForm__a" href="https://github.com/canutin/svelte-currency-input" target="_blank"
+			>GitHub repository</a
+		>
+		<a
+			class="demoForm__a"
+			href="https://github.com/canutin/svelte-currency-input/issues"
+			target="_blank">Known issues</a
+		>
+		<a
+			class="demoForm__a"
+			href="https://github.com/canutin/svelte-currency-input#contributing"
+			target="_blank">Contribute</a
+		>
+		<a
+			class="demoForm__a"
+			href="https://www.npmjs.com/package/@canutin/svelte-currency-input"
+			target="_blank">NPM</a
+		>
+		<a
+			class="demoForm__a"
+			href="https://svelte.dev/repl/d8f7d22e5b384555b430f62b157ac503?version=3.59.2"
+			target="_blank">REPL</a
+		>
+	</nav>
+
 	<div class="demoForm__container">
 		<CurrencyInput name="default" value={-42069.69} />
 		<CurrencyInput name="colon" locale="es-CR" currency="CRC" />
@@ -66,7 +93,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" />
+		<CurrencyInput name="dinars" value={0} placeholder={"How many Dinars?"} locale="en-US" currency="RSD" fractionDigits={0} />
 	</div>
 
 	<nav class="demoForm__output">
@@ -76,27 +103,6 @@
 				? output
 				: 'Submit form to see a JSON output of the values'}</pre>
 	</nav>
-
-	<nav class="demoForm__nav">
-		<a class="demoForm__a" href="https://github.com/canutin/svelte-currency-input" target="_blank"
-			>GitHub repository</a
-		>
-		<a
-			class="demoForm__a"
-			href="https://github.com/canutin/svelte-currency-input/issues"
-			target="_blank">Known issues</a
-		>
-		<a
-			class="demoForm__a"
-			href="https://github.com/canutin/svelte-currency-input#contributing"
-			target="_blank">Contribute</a
-		>
-		<a
-			class="demoForm__a"
-			href="https://www.npmjs.com/package/@canutin/svelte-currency-input"
-			target="_blank">NPM</a
-		>
-	</nav>
 </form>
 
 <style>
@@ -113,14 +119,22 @@
 
 		font-family: sans-serif;
 		box-sizing: border-box;
-		height: 100vh;
+		min-height: 100vh;
 		margin: 0;
 		background-color: #eaeaea;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		place-items: center;
 		padding: var(--gap);
+
+		@media (max-width: 768px) {
+			--gap: 48px;
+		}
+
+		@media (max-width: 512px) {
+			--gap: 32px;
+		}
 	}
 
 	form.demoForm {
@@ -136,13 +150,36 @@
 		justify-content: center;
 		gap: calc(var(--gap) / 2);
 		height: max-content;
+
+		@media (max-width: 768px) {
+			grid-template-columns: repeat(2, 1fr);
+		}
+		
+		@media (max-width: 512px) {
+			grid-template-columns: 1fr;
+		}
+	}
+
+	h1.demoForm__h1 {
+		color: #333;
+		font-size: 20px;
+		letter-spacing: -0.025em;
+		line-height: 1em;
+		margin-block: unset;
+		margin-right: auto;
+		padding-right: 16px;
 	}
 
 	nav.demoForm__nav {
 		font-size: 13px;
 		display: flex;
-		column-gap: 16px;
+		gap: 16px;
 		justify-content: center;
+
+		@media (max-width: 512px) {
+			flex-direction: column;
+			gap: 24px;
+		}
 	}
 
 	a.demoForm__a {
@@ -165,7 +202,11 @@
 	nav.demoForm__output {
 		display: grid;
 		grid-template-columns: max-content auto;
-		column-gap: calc(var(--gap) / 2);
+		gap: calc(var(--gap) / 2);
+
+		@media (max-width: 512px) {
+			grid-template-columns: unset;
+		}
 	}
 
 	pre.demoForm__pre {
@@ -174,6 +215,8 @@
 		margin: 0;
 		color: #666;
 		box-sizing: border-box;
+		max-width: 100%;
+		overflow-y: auto;
 	}
 
 	pre.demoForm__pre--placeholder {

diff --git a/tests/svelte-currency-input.test.ts b/tests/svelte-currency-input.test.ts
@@ -454,6 +454,20 @@ test.describe('CurrencyInput', () => {
 		await expect(dinarsFormattedInput).toHaveValue('RSD 123.');
 	});
 
+	test("inputmode is set correctly based on fractionDigits", async ({ page }) => {
+		// fractionDigits == undefined (defaults to 2)
+		const solesFormattedInput = page.locator('.currencyInput__formatted[name="formatted-soles"]');
+		await expect(solesFormattedInput).toHaveAttribute('inputmode', 'decimal');
+
+		// fractionDigits == 3
+		const rupeesFormattedInput = page.locator('.currencyInput__formatted[name="formatted-rupees"]');
+		await expect(rupeesFormattedInput).toHaveAttribute('inputmode', 'decimal');
+
+		// fractionDigits == 0
+		const dinarsFormattedInput = page.locator('.currencyInput__formatted[name="formatted-dinars"]');
+		await expect(dinarsFormattedInput).toHaveAttribute('inputmode', 'numeric');
+	});
+
 	test.skip('Updating chained inputs have the correct behavior', async () => {
 		// TODO
 	});