@canutin/svelte-currency-input - npm Package Compare versions

Comparing version 0.7.2 to 0.8.0

CurrencyInput.svelte.d.ts

@@ -13,2 +13,10 @@ import { SvelteComponentTyped } from "svelte";
         fractionDigits?: number | undefined;
+        inputClasses?: {
+            wrapper?: string | undefined;
+            unformatted?: string | undefined;
+            formatted?: string | undefined;
+            formattedPositive?: string | undefined;
+            formattedNegative?: string | undefined;
+            formattedZero?: string | undefined;
+        } | null | undefined;
     };
@@ -15,0 +23,0 @@ events: {

package.json

 {
   "name": "@canutin/svelte-currency-input",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "exports": {
@@ -5,0 +5,0 @@ "./package.json": "./package.json",

README.md

@@ -18,3 +18,3 @@ # svelte-currency-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)
 
@@ -73,8 +73,39 @@ ## Usage
 | 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
 
-```html
+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
+}
+```
+
+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">
@@ -81,0 +112,0 @@ <CurrencyInput name="total" value="{420.69}" />

No alert changes

Improved metrics

Total package byte prevSize

17869

increased by13.66%

Lines of code

36

increased by28.57%

Number of lines in readme file

169

increased by22.46%

No dependency changes