@empathyco/x-components
Version:
Empathy X Components
113 lines (89 loc) • 4 kB
Markdown
---
title: BaseCurrency
---
# BaseCurrency
## Props
| 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, 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" currency="EUR" />
<!-- output depends on locale, e.g., '12.345.678,88 €' for es-ES -->
</template>
<script setup>
import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
</script>
```
### Customizing decimal places
```vue
<template>
<BaseCurrency
:value="12345678.87654321"
currency="USD"
:format="{ minimumFractionDigits: 3, maximumFractionDigits: 3 }"
/>
<!-- output: '$12,345,678.877' for en-US locale -->
</template>
<script setup>
import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
</script>
```
### No decimal places
```vue
<template>
<BaseCurrency
:value="12345678.87"
currency="EUR"
:format="{ minimumFractionDigits: 0, maximumFractionDigits: 0 }"
/>
<!-- output: '12.345.679 €' for es-ES locale (rounds up) -->
</template>
<script setup>
import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
</script>
```
### Using different currencies
```vue
<template>
<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>
import BaseCurrency from "@empathyco/x-components/js/components/currency/base-currency.vue";
</script>
```
### Advanced formatting options
You can pass any valid Intl.NumberFormatOptions (except 'currency' and 'style' which are managed
internally):
```vue
<template>
<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>
```