@empathyco/x-components
Version:
Empathy X Components
90 lines (66 loc) • 3.1 kB
Markdown
---
title: BaseResultPreviousPrice
---
# BaseResultPreviousPrice
Component that renders the @empathyco/x-types#Result previous price.
## Props
| 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
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ------------------ | -------------------------------------------- |
| <code>default</code> | Base currency item | **result** <code>result</code> - Result data |
## Examples
### Basic example
This component shows the previous price formatted if it has discount. The component has optional
`currency` and `format` props to customize the display.
```vue
<template>
<BaseResultPreviousPrice :result="result" currency="USD" />
</template>
<script setup>
import { BaseResultPreviousPrice } from "@empathyco/x-components";
const result = {
price: { originalValue: 199.99, hasDiscount: true },
// ...other result properties
};
</script>
```
### Customizing format
You can customize the number formatting using the `format` prop with `Intl.NumberFormatOptions`:
```vue
<template>
<BaseResultPreviousPrice
:result="result"
currency="EUR"
:format="{ minimumFractionDigits: 2, maximumFractionDigits: 2 }"
/>
</template>
<script setup>
import { BaseResultPreviousPrice } from "@empathyco/x-components";
const result = {
price: { originalValue: 199.99, hasDiscount: true },
// ...other result properties
};
</script>
```
### Overriding default slot
```vue
<template>
<BaseResultPreviousPrice :result="result">
<span class="custom-base-result-previous-price">{{
result.price.originalValue
}}</span>
</BaseResultPreviousPrice>
</template>
<script setup>
import { BaseResultPreviousPrice } from "@empathyco/x-components";
const result = {
price: { originalValue: 199.99, hasDiscount: true },
// ...other result properties
};
</script>
```