New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@canutin/svelte-currency-input
Advanced tools
@canutin/svelte-currency-input - npm Package Compare versions
Comparing version 0.1.2 to 0.2.0
| { | ||
| "name": "@canutin/svelte-currency-input", | ||
| "version": "0.1.2", | ||
| "version": "0.2.0", | ||
| "exports": { | ||
@@ -5,0 +5,0 @@ "./package.json": "./package.json", |
@@ -8,5 +8,5 @@ # svelte-currency-input | ||
| <p align="center"> | ||
| <a href="https://svelte.dev/repl/d8f7d22e5b384555b430f62b157ac503?version=3.50.1" target="_blank"> | ||
| <strong>REPL Demo</strong> | ||
| </a> | ||
| <a href="https://svelte.dev/repl/d8f7d22e5b384555b430f62b157ac503?version=3.50.1" target="_blank"> | ||
| Play with REPL | ||
| </a> | ||
| </p> | ||
@@ -31,9 +31,9 @@ | ||
| <script lang="ts"> | ||
| import CurrencyInput from '@canutin/svelte-currency-input'; | ||
| import CurrencyInput from '@canutin/svelte-currency-input'; | ||
| const locale = 'nl-NL'; | ||
| const currency = 'EUR'; | ||
| const locale = 'nl-NL'; | ||
| const currency = 'EUR'; | ||
| </script> | ||
| <CurrencyInput name="exchange-rate" value="{-420.69}" {locale} {currency} /> | ||
| <CurrencyInput name="total" value={-420.69} {locale} {currency} /> | ||
| ``` | ||
@@ -48,7 +48,17 @@ | ||
| <div class="currencyInput"> | ||
| <!-- Unformatted value --> | ||
| <input class="currencyInput__unformatted" type="hidden" name="total" /> | ||
| <!-- Unformatted value --> | ||
| <input | ||
| class="currencyInput__unformatted" | ||
| type="hidden" | ||
| name="total" | ||
| value="-420.69" | ||
| /> | ||
| <!-- Formatted value --> | ||
| <input class="currencyInput__formatted" type="text" name="formattedTotal" /> | ||
| <!-- Formatted value --> | ||
| <input | ||
| class="currencyInput__formatted" | ||
| type="text" | ||
| name="formatted-total" | ||
| value="€ -420,69" | ||
| /> | ||
| </div> | ||
@@ -59,11 +69,11 @@ ``` | ||
| | 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=formattedTotal]` in camelCase) 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 | | ||
| | isNegativeAllowed | `boolean` | `true` | If `false`, forces formatting only to positive values and ignores `--positive` and `--negative` styling modifiers | | ||
@@ -76,35 +86,23 @@ ## Styling | ||
| <div class="my-currency-input"> | ||
| <CurrencyInput name="total" value="{420.69}" /> | ||
| <CurrencyInput name="total" value="{420.69}" /> | ||
| </div> | ||
| <style> | ||
| /* Container */ | ||
| div.my-currency-input :global(div.currencyInput) { | ||
| /* ... */ | ||
| } | ||
| /* Container */ | ||
| div.my-currency-input :global(div.currencyInput) { /* ... */ } | ||
| /* Formatted input */ | ||
| div.my-currency-input :global(input.currencyInput__formatted) { | ||
| /* ... */ | ||
| } | ||
| /* Formatted input */ | ||
| div.my-currency-input :global(input.currencyInput__formatted) { /* ... */ } | ||
| /* Formatted input when the it's disabled */ | ||
| div.my-currency-input :global(input.currencyInput__formatted:disabled) { | ||
| /* ... */ | ||
| } | ||
| /* Formatted input when the it's disabled */ | ||
| div.my-currency-input :global(input.currencyInput__formatted:disabled) { /* ... */ } | ||
| /* Formatted input when the value is zero */ | ||
| div.my-currency-input :global(input.currencyInput__formatted--zero) { | ||
| /* ... */ | ||
| } | ||
| /* Formatted input when the value is zero */ | ||
| div.my-currency-input :global(input.currencyInput__formatted--zero) { /* ... */ } | ||
| /* Formatted input when the value is positive */ | ||
| div.my-currency-input :global(input.currencyInput__formatted--positive) { | ||
| /* ... */ | ||
| } | ||
| /* Formatted input when the value is positive */ | ||
| div.my-currency-input :global(input.currencyInput__formatted--positive) { /* ... */ } | ||
| /* Formatted input when the value is negative */ | ||
| div.my-currency-input :global(input.currencyInput__formatted--negative) { | ||
| /* ... */ | ||
| } | ||
| /* Formatted input when the value is negative */ | ||
| div.my-currency-input :global(input.currencyInput__formatted--negative) { /* ... */ } | ||
| </style> | ||
@@ -123,4 +121,3 @@ ``` | ||
| This package was generated with [SvelteKit](https://kit.svelte.dev/). | ||
| Install dependencies with `npm install`, then start a development server: | ||
| This package was generated with [SvelteKit](https://kit.svelte.dev/). Install dependencies with `npm install`, then start a development server: | ||
@@ -127,0 +124,0 @@ ```bash |
Sorry, the diff of this file is not supported yet
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-1.32%
12073
- Number of lines in readme file
- decreased by-2.36%
124
No dependency changes