@empathyco/x-components
Version:
Empathy X Components
311 lines (254 loc) • 6.22 kB
Markdown
---
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> |
## 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.
### Basic usage
```vue
<template>
<BaseCurrency :value="12345678.87654321" />
<!-- output: '12.345.678,87' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components'
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency,
},
}
</script>
```
```vue
<template>
<BaseCurrency :value="12345678.87654321" format="i.iii,ddd? €" />
<!-- output: '12.345.678,876 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components'
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency,
},
}
</script>
```
```vue
<template>
<BaseCurrency :value="12345678" format="i.iii,ddd? €" />
<!-- output: '12.345.678 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components'
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency,
},
}
</script>
```
```vue
<template>
<BaseCurrency :value="12345678.87654321" format="$ i.iii,dd" />
<!-- output: '$ 12.345.678,87' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components'
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency,
},
}
</script>
```
```vue
<template>
<BaseCurrency :value="12345678.87654321" format="$i.iii,dd" />
<!-- output: '$12.345.678,87' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components'
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency,
},
}
</script>
```
```vue
<template>
<BaseCurrency :value="12345678.87654321" format="i.iii,dd €" />
<!-- output: '12.345.678,87 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components'
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency,
},
}
</script>
```
```vue
<template>
<BaseCurrency :value="12345678.87654321" format="i.iii,dd€" />
<!-- output: '12.345.678,87€' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components'
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency,
},
}
</script>
```
```vue
<template>
<BaseCurrency :value="12345678.87654321" format="i,iii.dd €" />
<!-- output: '12,345,678.87 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components'
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency,
},
}
</script>
```
```vue
<template>
<BaseCurrency :value="12345678.87654321" format="i iii.dd €" />
<!-- output: '12 345 678.87 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components'
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency,
},
}
</script>
```
```vue
<template>
<BaseCurrency :value="12345678.87654321" format="i iii - dd €" />
<!-- output: '12 345 678 - 87 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components'
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency,
},
}
</script>
```
```vue
<template>
<BaseCurrency :value="12345678.87654321" format="i.iii,dddddd €" />
<!-- output: '12.345.678,876543 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components'
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency,
},
}
</script>
```
```vue
<template>
<BaseCurrency :value="12345678.87" format="i.iii,dddddd €" />
<!-- output: '12.345.678,870000 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components'
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency,
},
}
</script>
```
```vue
<template>
<BaseCurrency :value="12345678" format="i.iii,dddddd €" />
<!-- output: '12.345.678,000000 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components'
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency,
},
}
</script>
```
```vue
<template>
<BaseCurrency :value="12345678.87654321" format="i.iii,dd €" />
<!-- output: '12.345.678,87 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components'
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency,
},
}
</script>
```
```vue
<template>
<BaseCurrency :value="12345678.87654321" format="i.iii €" />
<!-- output: '12.345.678 €' -->
</template>
<script>
import { BaseCurrency } from '@empathyco/x-components'
export default {
name: 'BaseCurrencyDemo',
components: {
BaseCurrency,
},
}
</script>
```