@empathyco/x-components 6.3.2 → 7.0.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.0](https://github.com/empathyco/x/compare/@empathyco/x-components@6.3.2...@empathyco/x-components@7.0.0) (2026-05-25)
+
+### ⚠ BREAKING CHANGES
+
+* **currency:** Currency components props and simplified usage by default.
+
+### Code Refactoring
+
+* **currency:** remove currency-formatter utils, tests, and related format props in components (#2109)
+
+
 ## [6.3.2](https://github.com/empathyco/x/compare/@empathyco/x-components@6.3.1...@empathyco/x-components@6.3.2) (2026-05-25)
 
 **Note:** Version bump only for package @empathyco/x-components

package/core/index.js

@@ -175,7 +175,6 @@ export { AnimationProp } from '../js/types/animation-prop.js';
 export { arrayToObject, createEmitterArrayFilter, deepFilter, deepFlat, groupItemsBy, isArrayEmpty } from '../js/utils/array.js';
 export { CancelSymbol, cancellablePromise } from '../js/utils/cancellable-promise.js';
 export { clone } from '../js/utils/clone.js';
-export { currencyFormatter } from '../js/utils/currency-formatter.js';
 export { debounce as debounceFunction } from '../js/utils/debounce.js';
 export { areFiltersDifferent, createRawFilters } from '../js/utils/filters.js';
 export { FOCUSABLE_SELECTORS } from '../js/utils/focus.js';

package/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/docs/API-reference/api/x-components.basecurrency.md

@@ -4,10 +4,6 @@
 
 ## BaseCurrency variable
 
-Renders the value received as a property which always must be a JavaScript number, with the proper format provided as a string property or by injection. The rendered tag is a span in order to render a default inline HTML element.
-
-Regarding the format or mask to be defined as string: - Use 'i' to define integer numbers. - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the format doesn't include decimals, it is filled with zeros until reach the length defined with 'd's. - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group. - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more than one character. - If you want to hide the decimal part if it's zero, you can add the `?` symbol after the decimal characters (e.g. 'i.iii,dd?', for `1234` you would get `1.234` instead of `1.234,00`<!-- -->). - Set whatever you need around the integers and decimals marks. - Default mask: 'i.iii,dd' which returns '1.345,67'.
-
 **Signature:**
 
 ```typescript
@@ -16,35 +12,24 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         type: NumberConstructor;
         required: true;
     };
+    currency: StringConstructor;
     format: {
-        type: StringConstructor;
+        type: PropType<Omit<Intl.NumberFormatOptions, "currency" | "style">>;
+        default: () => {};
     };
 }>, {
-    currency: import("vue").ComputedRef<string>;
+    currencyText: import("vue").ComputedRef<string>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
         type: NumberConstructor;
         required: true;
     };
+    currency: StringConstructor;
     format: {
-        type: StringConstructor;
+        type: PropType<Omit<Intl.NumberFormatOptions, "currency" | "style">>;
+        default: () => {};
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
+}>> & Readonly<{}>, {
+    format: Omit<Intl.NumberFormatOptions, "currency" | "style">;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```
-
-## Remarks
-
-The number of 'd', which is the maximum decimal length, MUST matches with the length of decimals provided from the adapter. Otherwise, when the component truncate the decimal part, it deletes significant digits.
-
-Basic example:
-
-```vue
-<BaseCurrency
-  :value="123456.789"
-  format="i.iiii,dddd €"
-/>
-```
-It will render: `123.456,7890 €`<!-- -->.
-
-See docs below for more examples.
-

package/docs/API-reference/api/x-components.basepricefilterlabel.md

@@ -16,9 +16,8 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         }>;
         required: true;
     };
-    format: {
-        type: StringConstructor;
-    };
+    currency: StringConstructor;
+    format: PropType<Omit<Intl.NumberFormatOptions, "currency" | "style">>;
     lessThan: {
         type: StringConstructor;
         required: true;
@@ -40,9 +39,8 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         }>;
         required: true;
     };
-    format: {
-        type: StringConstructor;
-    };
+    currency: StringConstructor;
+    format: PropType<Omit<Intl.NumberFormatOptions, "currency" | "style">>;
     lessThan: {
         type: StringConstructor;
         required: true;

package/docs/API-reference/api/x-components.baseresultcurrentprice.md

@@ -14,8 +14,10 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         type: PropType<Result>;
         required: true;
     };
+    currency: StringConstructor;
     format: {
-        type: StringConstructor;
+        type: PropType<Omit<Intl.NumberFormatOptions, "currency" | "style">>;
+        default: () => {};
     };
 }>, {
     dynamicClasses: import("vue").ComputedRef<VueCSSClasses>;
@@ -24,10 +26,14 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         type: PropType<Result>;
         required: true;
     };
+    currency: StringConstructor;
     format: {
-        type: StringConstructor;
+        type: PropType<Omit<Intl.NumberFormatOptions, "currency" | "style">>;
+        default: () => {};
     };
-}>> & Readonly<{}>, {}, {}, {
+}>> & Readonly<{}>, {
+    format: Omit<Intl.NumberFormatOptions, "currency" | "style">;
+}, {}, {
     BaseCurrency: import("vue").DefineComponent<{}, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

package/docs/API-reference/api/x-components.baseresultpreviousprice.md

@@ -14,18 +14,24 @@ _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         type: PropType<Result>;
         required: true;
     };
+    currency: StringConstructor;
     format: {
-        type: StringConstructor;
+        type: PropType<Omit<Intl.NumberFormatOptions, "currency" | "style">>;
+        default: () => {};
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     result: {
         type: PropType<Result>;
         required: true;
     };
+    currency: StringConstructor;
     format: {
-        type: StringConstructor;
+        type: PropType<Omit<Intl.NumberFormatOptions, "currency" | "style">>;
+        default: () => {};
     };
-}>> & Readonly<{}>, {}, {}, {
+}>> & Readonly<{}>, {
+    format: Omit<Intl.NumberFormatOptions, "currency" | "style">;
+}, {}, {
     BaseCurrency: import("vue").DefineComponent<{}, {}, any>;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>
 ```

package/docs/API-reference/api/x-components.md

@@ -534,17 +534,6 @@ Creates a wire that executes the function passed. This function will receive a [
 Util function to generate type-safe wiring. If TypeScript ever accepts the PR about generic type inference this function can be removed.
 
 
-</td></tr>
-<tr><td>
-
-[currencyFormatter(value, format)](./x-components.currencyformatter.md)
-
-
-</td><td>
-
-Format a value with a given format.
-
-
 </td></tr>
 <tr><td>
 
@@ -3774,10 +3763,6 @@ Additionally, this component exposes the following props to modify the classes o
 
 </td><td>
 
-Renders the value received as a property which always must be a JavaScript number, with the proper format provided as a string property or by injection. The rendered tag is a span in order to render a default inline HTML element.
-
-Regarding the format or mask to be defined as string: - Use 'i' to define integer numbers. - Use 'd' to define decimal numbers. You can define the length of the decimal part. If the format doesn't include decimals, it is filled with zeros until reach the length defined with 'd's. - Integer separator must be defined between the 3rd and the 4th integer 'i' of a group. - Decimal separator must be defined between the last 'i' and the first 'd'. It can be more than one character. - If you want to hide the decimal part if it's zero, you can add the `?` symbol after the decimal characters (e.g. 'i.iii,dd?', for `1234` you would get `1.234` instead of `1.234,00`<!-- -->). - Set whatever you need around the integers and decimals marks. - Default mask: 'i.iii,dd' which returns '1.345,67'.
-
 
 </td></tr>
 <tr><td>

package/docs/API-reference/components/common/currency/x-components.base-currency.md

@@ -6,43 +6,26 @@ title: BaseCurrency
 
 # BaseCurrency
 
-Renders the value received as a property which always must be a JavaScript number, with the
-proper format provided as a string property or by injection. The rendered tag is a span in
-order to render a default inline HTML element.
-
-Regarding the format or mask to be defined as string:
-
-- Use 'i' to define integer numbers.
-- Use 'd' to define decimal numbers. You can define the length of the decimal part. If the
-  format doesn't include decimals, it is filled with zeros until reach the length defined with
-  'd's.
-- Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.
-- Decimal separator must be defined between the last 'i' and the first 'd'. It can be more
-  than one character.
-- If you want to hide the decimal part if it's zero, you can add the `?` symbol after the
-  decimal characters (e.g. 'i.iii,dd?', for `1234` you would get `1.234` instead of `1.234,00`).
-- Set whatever you need around the integers and decimals marks.
-- Default mask: 'i.iii,dd' which returns '1.345,67'.
-
 ## Props
 
-| Name                | Description                    | Type                | Default       |
-| ------------------- | ------------------------------ | ------------------- | ------------- |
-| <code>value</code>  | Numeric value to be formatted. | <code>number</code> | <code></code> |
-| <code>format</code> | The format as string.          | <code>string</code> | <code></code> |
+| Name                  | Description                                                                                                                                                                                    | Type                                                               | Default                 |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------------------- |
+| <code>value</code>    | Numeric value to be formatted.                                                                                                                                                                 | <code>number</code>                                                | <code></code>           |
+| <code>currency</code> | The ISO 4217 currency value. If not specified we use snippetConfig.currency                                                                                                                    | <code>string</code>                                                | <code></code>           |
+| <code>format</code>   | The currency format possibilities from Intl.NumberFormatOptions.<br />Allows customization of decimal places, grouping, etc.<br />Note: 'currency' and 'style' options are managed internally. | <code>Omit<Intl.NumberFormatOptions, 'currency' \| 'style'></code> | <code>() => ({})</code> |
 
 ## Example
 
-Renders the value received as a property, which always must be a JavaScript number, with the proper
-format provided as string property. The rendered tag is a span in order to render a default inline
-HTML element.
+Renders the value received as a property, which always must be a JavaScript number, formatted
+using the Intl.NumberFormat API with ISO 4217 currency codes. The rendered tag is a span in order
+to render a default inline HTML element.
 
 ### Basic usage
 
 ```vue
 <template>
-  <BaseCurrency :value="12345678.87654321" />
-  <!-- output: '12.345.678,87' -->
+  <BaseCurrency :value="12345678.87654321" currency="EUR" />
+  <!-- output depends on locale, e.g., '12.345.678,88 €' for es-ES -->
 </template>
 
 <script setup>
@@ -50,21 +33,16 @@ import BaseCurrency from "@empathyco/x-components/js/components/currency/base-cu
 </script>
 ```
 
-```vue
-<template>
-  <BaseCurrency :value="12345678.87654321" format="i.iii,ddd? €" />
-  <!-- output: '12.345.678,876 €' -->
-</template>
-
-<script setup>
-import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
-</script>
-```
+### Customizing decimal places
 
 ```vue
 <template>
-  <BaseCurrency :value="12345678" format="i.iii,ddd? €" />
-  <!-- output: '12.345.678 €' -->
+  <BaseCurrency
+    :value="12345678.87654321"
+    currency="USD"
+    :format="{ minimumFractionDigits: 3, maximumFractionDigits: 3 }"
+  />
+  <!-- output: '$12,345,678.877' for en-US locale -->
 </template>
 
 <script setup>
@@ -72,21 +50,16 @@ import BaseCurrency from "@empathyco/x-components/js/components/currency/base-cu
 </script>
 ```
 
-```vue
-<template>
-  <BaseCurrency :value="12345678.87654321" format="$ i.iii,dd" />
-  <!-- output: '$ 12.345.678,87' -->
-</template>
-
-<script setup>
-import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
-</script>
-```
+### No decimal places
 
 ```vue
 <template>
-  <BaseCurrency :value="12345678.87654321" format="$i.iii,dd" />
-  <!-- output: '$12.345.678,87' -->
+  <BaseCurrency
+    :value="12345678.87"
+    currency="EUR"
+    :format="{ minimumFractionDigits: 0, maximumFractionDigits: 0 }"
+  />
+  <!-- output: '12.345.679 €' for es-ES locale (rounds up) -->
 </template>
 
 <script setup>
@@ -94,21 +67,20 @@ import BaseCurrency from "@empathyco/x-components/js/components/currency/base-cu
 </script>
 ```
 
-```vue
-<template>
-  <BaseCurrency :value="12345678.87654321" format="i.iii,dd €" />
-  <!-- output: '12.345.678,87 €' -->
-</template>
-
-<script setup>
-import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
-</script>
-```
+### Using different currencies
 
 ```vue
 <template>
-  <BaseCurrency :value="12345678.87654321" format="i.iii,dd€" />
-  <!-- output: '12.345.678,87€' -->
+  <div>
+    <BaseCurrency :value="1234.56" currency="USD" />
+    <!-- output: '$1,234.56' for en-US -->
+    <BaseCurrency :value="1234.56" currency="EUR" />
+    <!-- output: '1.234,56 €' for es-ES -->
+    <BaseCurrency :value="1234.56" currency="GBP" />
+    <!-- output: '£1,234.56' for en-GB -->
+    <BaseCurrency :value="1234.56" currency="JPY" />
+    <!-- output: '¥1,235' for ja-JP -->
+  </div>
 </template>
 
 <script setup>
@@ -116,90 +88,25 @@ import BaseCurrency from "@empathyco/x-components/js/components/currency/base-cu
 </script>
 ```
 
-```vue
-<template>
-  <BaseCurrency :value="12345678.87654321" format="i,iii.dd €" />
-  <!-- output: '12,345,678.87 €' -->
-</template>
+### Advanced formatting options
 
-<script setup>
-import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
-</script>
-```
+You can pass any valid Intl.NumberFormatOptions (except 'currency' and 'style' which are managed
+internally):
 
 ```vue
 <template>
-  <BaseCurrency :value="12345678.87654321" format="i iii.dd €" />
-  <!-- output: '12 345 678.87 €' -->
+  <BaseCurrency
+    :value="1234567.89"
+    currency="EUR"
+    :format="{
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 4,
+      useGrouping: true,
+    }"
+  />
 </template>
 
 <script setup>
 import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
 </script>
 ```
-
-```vue
-<template>
-  <BaseCurrency :value="12345678.87654321" format="i iii - dd €" />
-  <!-- output: '12 345 678 - 87 €' -->
-</template>
-
-<script setup>
-import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
-</script>
-```
-
-```vue
-<template>
-  <BaseCurrency :value="12345678.87654321" format="i.iii,dddddd €" />
-  <!-- output: '12.345.678,876543 €' -->
-</template>
-
-<script setup>
-import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
-</script>
-```
-
-```vue
-<template>
-  <BaseCurrency :value="12345678.87" format="i.iii,dddddd €" />
-  <!-- output: '12.345.678,870000 €' -->
-</template>
-
-<script setup>
-import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
-</script>
-```
-
-```vue
-<template>
-  <BaseCurrency :value="12345678" format="i.iii,dddddd €" />
-  <!-- output: '12.345.678,000000 €' -->
-</template>
-
-<script setup>
-import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
-</script>
-```
-
-```vue
-<template>
-  <BaseCurrency :value="12345678.87654321" format="i.iii,dd €" />
-  <!-- output: '12.345.678,87 €' -->
-</template>
-
-<script setup>
-import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
-</script>
-```
-
-```vue
-<template>
-  <BaseCurrency :value="12345678.87654321" format="i.iii €" />
-  <!-- output: '12.345.678 €' -->
-</template>
-
-<script setup>
-import { BaseCurrency } from "@empathyco/x-components/js/components/currency/base-currency.vue";
-</script>
-```

package/docs/API-reference/components/common/filters/labels/x-components.base-price-filter-label.md

@@ -11,13 +11,14 @@ value of the filter.
 
 ## Props
 
-| Name                  | Description                                                            | Type                               | Default       |
-| --------------------- | ---------------------------------------------------------------------- | ---------------------------------- | ------------- |
-| <code>filter</code>   | The filter data for get min and max value.                             | <code>{ range: RangeValue }</code> | <code></code> |
-| <code>format</code>   | Configuration for show the label.                                      | <code>string</code>                | <code></code> |
-| <code>lessThan</code> | Message shown when the filter hasn't got the min value defined.        | <code>string</code>                | <code></code> |
-| <code>fromTo</code>   | Message shown when the filter has both the min and max values defined. | <code>string</code>                | <code></code> |
-| <code>from</code>     | Message shown when the filter hasn't got max value defined.            | <code>string</code>                | <code></code> |
+| Name                  | Description                                                                                                                  | Type                                                               | Default       |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------- |
+| <code>filter</code>   | The filter data for get min and max value.                                                                                   | <code>{ range: RangeValue }</code>                                 | <code></code> |
+| <code>currency</code> | An ISO 4217 currency value.                                                                                                  | <code>string</code>                                                | <code></code> |
+| <code>format</code>   | The currency format possibilities from Intl.NumberFormatOptions.<br />Allows customization of decimal places, grouping, etc. | <code>Omit<Intl.NumberFormatOptions, 'currency' \| 'style'></code> | <code></code> |
+| <code>lessThan</code> | Message shown when the filter hasn't got the min value defined.                                                              | <code>string</code>                                                | <code></code> |
+| <code>fromTo</code>   | Message shown when the filter has both the min and max values defined.                                                       | <code>string</code>                                                | <code></code> |
+| <code>from</code>     | Message shown when the filter hasn't got max value defined.                                                                  | <code>string</code>                                                | <code></code> |
 
 ## Example
 
@@ -44,7 +45,41 @@ how the price should look like.
         <NumberRangeFilter :filter="filter" v-slot="{ filter }">
           <BasePriceFilterLabel
             :filter="filter"
-            format="$i"
+            currency="USD"
+            lessThan="Less than {max}"
+            fromTo="From {min} to {max}"
+            from="More than {min}"
+          />
+        </NumberRangeFilter>
+      </Filters>
+    </template>
+  </Facets>
+</template>
+
+<script setup>
+import BasePriceFilterLabel from "@empathyco/x-components/js/components/filters/labels/base-price-filter-label.vue";
+import {
+  Filters,
+  Facets,
+  NumberRangeFilter,
+} from "@empathyco/x-components/facets";
+</script>
+```
+
+### Customizing format
+
+You can customize the number formatting using the `format` prop with `Intl.NumberFormatOptions`:
+
+```vue
+<template>
+  <Facets>
+    <template #price="{ facet }">
+      <Filters v-slot="{ filter }" :filters="facet.filters">
+        <NumberRangeFilter :filter="filter" v-slot="{ filter }">
+          <BasePriceFilterLabel
+            :filter="filter"
+            currency="EUR"
+            :format="{ minimumFractionDigits: 0, maximumFractionDigits: 0 }"
             lessThan="Less than {max}"
             fromTo="From {min} to {max}"
             from="More than {min}"

package/docs/API-reference/components/common/result/x-components.base-result-current-price.md

@@ -11,10 +11,11 @@ that may or may not be on sale.
 
 ## Props
 
-| Name                | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Type                | Default       |
-| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ------------- |
-| <code>result</code> | (Required) The @empathyco/x-types#Result information.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | <code>Result</code> | <code></code> |
-| <code>format</code> | Format or mask to be defined as string.<br />- Use 'i' to define integer numbers.<br />- Use 'd' to define decimal numbers. You can define the length of the decimal part. If the<br />doesn't include decimals, it is filled with zeros until reach the length defined with 'd's.<br />- Integer separator must be defined between the 3rd and the 4th integer 'i' of a group.<br />- Decimal separator must be defined between the last 'i' and the first 'd'. It can be more<br />than one character.<br />- Set whatever you need around the integers and decimals marks.<br />- Default mask: 'i.iii,dd' which returns '1.345,67'. | <code>string</code> | <code></code> |
+| Name                  | Description                                                                                                                  | Type                                                               | Default                 |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------------------- |
+| <code>result</code>   | (Required) The @empathyco/x-types#Result information.                                                                        | <code>Result</code>                                                | <code></code>           |
+| <code>currency</code> | Optional value coming from https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes.                           | <code>string</code>                                                | <code></code>           |
+| <code>format</code>   | The currency format possibilities from Intl.NumberFormatOptions.<br />Allows customization of decimal places, grouping, etc. | <code>Omit<Intl.NumberFormatOptions, 'currency' \| 'style'></code> | <code>() => ({})</code> |
 
 ## Slots
 
@@ -26,12 +27,12 @@ that may or may not be on sale.
 
 ### Basic example
 
-This component shows the current price formatted. You can provide the `format` by property or let
-the `BaseCurrency` component use an injected one.
+This component shows the current price formatted. You can provide the `currency` and `format`
+properties to customize the display.
 
 ```vue
 <template>
-  <BaseResultCurrentPrice :result="result" :format="'i.iii,ddd €'" />
+  <BaseResultCurrentPrice :result="result" currency="USD" />
 </template>
 
 <script setup>
@@ -43,6 +44,28 @@ const result = {
 </script>
 ```
 
+### Customizing format
+
+You can customize the number formatting using the `format` prop with `Intl.NumberFormatOptions`:
+
+```vue
+<template>
+  <BaseResultCurrentPrice
+    :result="result"
+    currency="EUR"
+    :format="{ minimumFractionDigits: 2, maximumFractionDigits: 2 }"
+  />
+</template>
+
+<script setup>
+import { BaseResultCurrentPrice } from "@empathyco/x-components";
+const result = {
+  price: { value: 123.456, hasDiscount: false },
+  // ...other result properties
+};
+</script>
+```
+
 ### Overriding default slot
 
 ```vue