station-manager-2.0/src/components/RouteList.vue

<template>
  <span class="routes">
    <!-- <span
      v-for="(route, i) in routes"
      class="route"
      :key="i"
      :class="{
        'text--accent': route.routeSpeed != 0 && route.routeLength != 0,
        internal: route.isInternal,
        hidden: route.hidden,
      }"
    >
    {{ route.routeName }}
     <span class="route-name">{{ route.routeName }}</span> 
      <span class="route-info"> ({{ route.routeTracks }}/{{ route.isElectric ? 'E' : 'N' }}/{{ route.isRouteSBL ? 'S' : 'P' }}) </span>
    </span>
     -->
  </span>
</template>

<script lang="ts">
import { PropType, defineComponent } from 'vue';
import { SceneryRoutesInfo } from '../types/sceneries.types';

export default defineComponent({
  props: {
    routes: {
      type: Array as PropType<SceneryRoutesInfo[]>,
    },
  },
});
</script>

<style lang="scss" scoped>
.route {
  &.internal > .route-name {
    text-decoration: underline;
  }

  &.hidden > .route-name {
    color: #ccc;
  }
}

.route-info {
  color: #aaa;
}
</style>