64 lines
1.1 KiB
Plaintext
64 lines
1.1 KiB
Plaintext
<template>
|
|
<div class="price-display">
|
|
<span class="price-amount">{{ formattedPrice }}</span>
|
|
<span v-if="currency" class="price-currency">{{ currency }}</span>
|
|
<span v-if="unit" class="price-unit">/{{ unit }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, computed } from 'vue';
|
|
|
|
const props = defineProps({
|
|
price: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
currency: {
|
|
type: String,
|
|
default: '€'
|
|
},
|
|
unit: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
showDecimals: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
});
|
|
|
|
const formattedPrice = computed(() => {
|
|
const decimals = props.showDecimals ? 2 : 0;
|
|
return props.price.toLocaleString('fr-FR', {
|
|
minimumFractionDigits: decimals,
|
|
maximumFractionDigits: decimals
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.price-display {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.price-amount {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #059669;
|
|
}
|
|
|
|
.price-currency {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
color: #059669;
|
|
}
|
|
|
|
.price-unit {
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
font-weight: 400;
|
|
}
|
|
</style> |