chore: extract distance display component and remove numeral filter

components/pages/events/Event/distance.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-layout
+    row
+    wrap
+  >
+    <v-flex xs12 sm6>
+      <v-icon>mdi-home</v-icon>
+      <span
+      ><strong>{{ distance.origin }}</strong></span
+      >
+    </v-flex>
+    <v-flex xs12 sm6>
+      <v-icon>mdi-car</v-icon>
+      <span>{{ numericDistance }} km</span>
+      <v-icon>mdi-clock-outline</v-icon>
+      <span>{{ distance.duration }}</span>
+    </v-flex>
+  </v-layout>
+</template>
+
+<script lang='ts'>
+import { computed, defineComponent, PropType } from 'vue'
+import { DanceHallDistance } from '~/graphql/generated/operations'
+
+export default defineComponent({
+  name: 'DistanceDisplay',
+  props: {
+    distance: {
+      type: Object as PropType<DanceHallDistance>,
+      required: true
+    }
+  },
+  setup(props) {
+    const numericDistance = computed(() =>
+      Number(props.distance.distance / 1000).toLocaleString('sv-SE', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2
+      }))
+    return {
+      numericDistance
+    }
+  }
+})
+</script>

components/pages/events/Event/index.vue

@@ -88,25 +88,7 @@
         </v-flex
         >
       </v-layout>
-      <v-layout
-        v-for='distance in event.distances'
-        :key='distance.origin'
-        row
-        wrap
-      >
-        <v-flex xs12 sm6>
-          <v-icon>mdi-home</v-icon>
-          <span
-          ><strong>{{ distance.origin }}</strong></span
-          >
-        </v-flex>
-        <v-flex xs12 sm6>
-          <v-icon>mdi-car</v-icon>
-          <span>{{ (distance.distance / 1000) | numeral('0,0.00') }} km</span>
-          <v-icon>mdi-clock-outline</v-icon>
-          <span>{{ distance.duration }}</span>
-        </v-flex>
-      </v-layout>
+      <distance-display v-for='distance in event.distances' :key='distance.origin' :distance='distance'/>
     </v-container>
   </v-card>
 </template>
@@ -118,9 +100,11 @@ import { format, formatDistanceToNow, parseISO } from 'date-fns'
 import { enGB, sv } from 'date-fns/locale'
 import { computed, defineComponent, getCurrentInstance, PropType } from 'vue'
 import { Event } from '~/graphql/generated/operations'
+import DistanceDisplay from '~/components/pages/events/Event/distance.vue'
 
 export default defineComponent({
   name: 'EventDetail',
+  components: { DistanceDisplay },
   props: {
     event: {
       type: Object as PropType<Event>,