Skip to content

Commit

Permalink
fix: set inputmode dynamically based on fractionDigits (#72)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
fmaclen authored Nov 10, 2023
1 parent 2f3b624 commit 7d5c21b
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 29 deletions.
3 changes: 0 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions src/app.html
Original file line number Diff line number Diff line change
@@ -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" />
Expand Down
2 changes: 1 addition & 1 deletion src/lib/CurrencyInput.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@
: ''}
"
type="text"
inputmode="numeric"
inputmode={fractionDigits > 0 ? "decimal" : "numeric"}
name={`formatted-${name}`}
required={required && !isZero}
placeholder={handlePlaceholder(placeholder)}
Expand Down
93 changes: 68 additions & 25 deletions src/routes/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -174,6 +215,8 @@
margin: 0;
color: #666;
box-sizing: border-box;
max-width: 100%;
overflow-y: auto;
}
pre.demoForm__pre--placeholder {
Expand Down
14 changes: 14 additions & 0 deletions tests/svelte-currency-input.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
});
Expand Down

0 comments on commit 7d5c21b

Please sign in to comment.