41 lines
804 B
Vue
41 lines
804 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import FormattedNumber from "@/Components/FormattedNumber.vue";
|
|
|
|
const props = withDefaults(defineProps<{
|
|
value: number
|
|
unit?: 'km' | 'mi' | 'nm'
|
|
showUnits?: boolean
|
|
includeSpace?: boolean
|
|
}>(), {
|
|
showUnits: true,
|
|
unit: 'km',
|
|
includeSpace: false,
|
|
})
|
|
|
|
const CONVERSIONS: Record<string, number> = {
|
|
km: 1,
|
|
mi: 0.621371,
|
|
nm: 0.539957,
|
|
}
|
|
|
|
const LABELS: Record<string, string> = {
|
|
km: 'km',
|
|
mi: 'mi',
|
|
nm: 'nm',
|
|
}
|
|
|
|
const unit = computed(() => props.unit ?? 'km')
|
|
|
|
const converted = computed(() => props.value * CONVERSIONS[unit.value])
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<FormattedNumber :value="converted" />{{includeSpace ? ' ' : ''}}{{ showUnits ? LABELS[unit] : '' }}
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|