feat: add autocomplete attribute (#51)

* feat: add autocomplete attribute

Fixes #49

* docs: add link to MDN docs

* test: add autocomplete="off" assertion

* chore: update GH actions to v3

* chore: update dependencies

* chore: update Svelte deps

* Revert "chore: update Svelte deps"

This reverts commit e346e33.

* Revert "chore: update dependencies"

This reverts commit 328b1aa.

* test: all passing locally

* chore: cleanup syntax

.github/workflows/release.yml

@@ -9,10 +9,9 @@ jobs:
     name: Publish
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '16.x'
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+
       - name: Install dependencies
         run: npm ci
       - name: Build package with SvelteKit

.github/workflows/test.yml

@@ -10,10 +10,9 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
-        with:
-          node-version: '16.x'
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+
       - name: Install dependencies
         run: npm ci
       - name: Install Playwright Browsers

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.json

@@ -14,7 +14,7 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.25.0",
+		"@playwright/test": "^1.37.1",
 		"@sveltejs/adapter-auto": "next",
 		"@sveltejs/kit": "next",
 		"@sveltejs/package": "next",

src/lib/CurrencyInput.svelte

@@ -30,6 +30,7 @@
 	export let required: boolean = false;
 	export let disabled: boolean = false;
 	export let placeholder: number | null = DEFAULT_VALUE;
+	export let autocomplete: string | null | undefined = undefined;
 	export let isNegativeAllowed: boolean = true;
 	export let fractionDigits: number = DEFAULT_FRACTION_DIGITS;
 	export let inputClasses: InputClasses | null = null;
@@ -181,6 +182,7 @@
 		name={`formatted-${name}`}
 		required={required && !isZero}
 		placeholder={formattedPlaceholder}
+		{autocomplete}
 		{disabled}
 		bind:value={formattedValue}
 		on:keydown={handleKeyDown}

src/routes/+page.svelte

@@ -53,6 +53,7 @@
 			value={unchangedValue}
 			isNegativeAllowed={false}
 			placeholder={null}
+			autocomplete="off"
 			locale="es-AR"
 			currency="ARS"
 			onValueChange={(value) => {

tests/svelte-currency-input.test.ts

@@ -347,6 +347,11 @@ test.describe('CurrencyInput', () => {
 		await page.keyboard.press('Backspace');
 	});
 
+	test('Autocomplete attribute can be set', async ({ page }) => {
+		const pesosFormattedInput = page.locator('.currencyInput__formatted[name="formatted-pesos"]');
+		await expect(pesosFormattedInput).toHaveAttribute('autocomplete', 'off');
+	});
+
 	test.skip('Updating chained inputs have the correct behavior', async () => {
 		// TODO
 	});