@canutin/svelte-currency-input 0.7.2 → 0.9.0

package/CurrencyInput.svelte

@@ -3,6 +3,12 @@ const DEFAULT_CURRENCY = 'USD';
 const DEFAULT_NAME = 'total';
 const DEFAULT_VALUE = 0;
 const DEFAULT_FRACTION_DIGITS = 2;
+const DEFAULT_CLASS_WRAPPER = 'currencyInput';
+const DEFAULT_CLASS_UNFORMATTED = 'currencyInput__unformatted';
+const DEFAULT_CLASS_FORMATTED = 'currencyInput__formatted';
+const DEFAULT_CLASS_FORMATTED_POSITIVE = 'currencyInput__formatted--positive';
+const DEFAULT_CLASS_FORMATTED_NEGATIVE = 'currencyInput__formatted--negative';
+const DEFAULT_CLASS_FORMATTED_ZERO = 'currencyInput__formatted--zero';
 export let value = DEFAULT_VALUE;
 export let locale = DEFAULT_LOCALE;
 export let currency = DEFAULT_CURRENCY;
@@ -12,6 +18,8 @@ export let disabled = false;
 export let placeholder = DEFAULT_VALUE;
 export let isNegativeAllowed = true;
 export let fractionDigits = DEFAULT_FRACTION_DIGITS;
+export let inputClasses = null;
+export let onValueChange = () => { };
 // Formats value as: e.g. $1,523.00 | -$1,523.00
 const formatCurrency = (value, maximumFractionDigits, minimumFractionDigits) => {
     return new Intl.NumberFormat(locale, {
@@ -86,6 +94,7 @@ const setUnformattedValue = (event) => {
             }
         }
     }
+    onValueChange(value);
 };
 const setFormattedValue = () => {
     // Previous caret position
@@ -110,14 +119,24 @@ $: isNegative = value < 0;
 $: value, setFormattedValue();
 </script>
 
-<div class="currencyInput">
-	<input class="currencyInput__unformatted" type="hidden" {name} {disabled} bind:value />
+<div class={inputClasses?.wrapper ?? DEFAULT_CLASS_WRAPPER}>
+	<input
+		class={inputClasses?.unformatted ?? DEFAULT_CLASS_UNFORMATTED}
+		type="hidden"
+		{name}
+		{disabled}
+		bind:value
+	/>
 	<input
 		class="
-			currencyInput__formatted
-			{isNegativeAllowed && !isZero && !isNegative && 'currencyInput__formatted--positive'}
-			{isZero && 'currencyInput__formatted--zero'}
-			{isNegativeAllowed && isNegative && 'currencyInput__formatted--negative'}
+			{inputClasses?.formatted ?? DEFAULT_CLASS_FORMATTED}
+			{isNegativeAllowed && !isZero && !isNegative
+			? inputClasses?.formattedPositive ?? DEFAULT_CLASS_FORMATTED_POSITIVE
+			: ''}
+			{isZero ? inputClasses?.formattedZero ?? DEFAULT_CLASS_FORMATTED_ZERO : ''}
+			{isNegativeAllowed && isNegative
+			? inputClasses?.formattedNegative ?? DEFAULT_CLASS_FORMATTED_NEGATIVE
+			: ''}
 		"
 		type="text"
 		inputmode="numeric"

package/CurrencyInput.svelte.d.ts

@@ -10,6 +10,15 @@ declare const __propDef: {
         placeholder?: number | null | undefined;
         isNegativeAllowed?: boolean | undefined;
         fractionDigits?: number | undefined;
+        inputClasses?: {
+            wrapper?: string | undefined;
+            unformatted?: string | undefined;
+            formatted?: string | undefined;
+            formattedPositive?: string | undefined;
+            formattedNegative?: string | undefined;
+            formattedZero?: string | undefined;
+        } | null | undefined;
+        onValueChange?: ((value: number) => any) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/README.md

@@ -15,7 +15,7 @@ A form input that converts numbers to localized currency formats as you type
 - Formats **positive** and **negative** values
 - Leverages [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) for **localizing** currency denominations and masking the input
 - Simple [API](#api)
-- Minimal [default styling](https://github.com/canutin/svelte-currency-input/blob/main/src/lib/CurrencyInput.svelte#L88-L118), easy to [customize](#styling)
+- Minimal default styling, easy to [customize](#styling)
 
 ## Usage
 
@@ -69,12 +69,43 @@ This is more or less what `<CurrencyInput />` looks like under the hood:
 | 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 |
 
 ## Styling
 
-The [default styles](https://github.com/canutin/svelte-currency-input/blob/main/src/lib/CurrencyInput.svelte#L88-L118) use [BEM naming conventions](https://getbem.com/naming/). To override the default styles apply your styles as shown below:
+There are two ways of customizing the styling of the input:
+1. Passing it your own CSS classes
+2. Overriding the styles using the existing class names
+
+You can **override all of the class names** by passing an object to `inputClasses` that has **one or more** of these properties:
+
+```typescript
+interface InputClasses {
+  wrapper?: string; // <div> that contains the two <input> elements
+  unformatted?: string; // <input type="hidden"> that contains the unformatted value
+  formatted?: string; // <input type="text"> that contains the formatted value
+  formattedPositive?: string; // Class added when the formatted input is positive
+  formattedNegative?: string; // Class added when the formatted input is negative
+  formattedZero?: string; // Class added when the formatted input is zero
+}
+```
 
-```html
+Usage (with [Tailwind CSS](https://tailwindcss.com/) as an example):
+
+```svelte
+<CurrencyInput name="total" value="{420.69}" inputClasses={
+  { 
+    wrapper: "form-control block",
+    formatted: 'py-1.5 text-gray-700',
+    formattedPositive: 'text-green-700',
+    formattedNegative: 'text-red-700'
+  }
+} />
+```
+
+Alternatively you can **write your own CSS** by overriding the [default styles](https://github.com/canutin/svelte-currency-input/blob/main/src/lib/CurrencyInput.svelte) which use [BEM naming conventions](https://getbem.com/naming/). To do so apply your styles as shown below:
+
+```svelte
 <div class="my-currency-input">
   <CurrencyInput name="total" value="{420.69}" />
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canutin/svelte-currency-input",
-  "version": "0.7.2",
+  "version": "0.9.0",
   "exports": {
     "./package.json": "./package.json",
     ".": "./index.js",