Renovate
34 lines
921 B
Vue
34 lines
921 B
Vue
<template>
|
|
<v-row dense>
|
|
<v-col cols="12" sm="12" md="6">
|
|
<v-icon class="me-1" icon='mdi-home' />
|
|
<span><strong>{{ distance.origin }}</strong></span>
|
|
</v-col>
|
|
<v-col cols="12" sm="12" md="6">
|
|
<v-icon class="me-1" icon='mdi-car' />
|
|
<span>{{ numericDistance }}</span>
|
|
<v-icon class="ms-2 me-1" icon='mdi-clock-outline' />
|
|
<span>{{ distance.duration }}</span>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script setup lang='ts'>
|
|
import type { PropType } from 'vue'
|
|
import { computed } from 'vue'
|
|
|
|
import type { DanceHallDistance } from '~~/graphql/generated/operations'
|
|
|
|
const props = defineProps({
|
|
distance: {
|
|
type: Object as PropType<DanceHallDistance>,
|
|
required: true,
|
|
},
|
|
})
|
|
const numericDistance = computed(() =>
|
|
`${Number(props.distance.distance / 1000).toLocaleString('sv-SE', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2,
|
|
})} km`)
|
|
</script>
|