advent22/ui/src/components/DoorMapEditor.vue

<template>
  <div class="box">
    <p class="title is-4">Türchen bearbeiten</p>

    <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
      <ul>
        <li
          v-for="(step, index) in steps"
          :key="'step-' + index"
          :class="current_step === index ? 'is-active' : ''"
          @click="current_step = index"
        >
          <a>{{ step }}</a>
        </li>
      </ul>
    </nav>

    <DoorPlacer v-if="current_step === 0" />
    <p v-if="current_step === 1">Narf!</p>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import DoorPlacer from "./door_map/DoorPlacer.vue";

@Options({
  components: {
    DoorPlacer,
  },
})
export default class DoorMapEditor extends Vue {
  private readonly steps: string[] = ["Platzieren", "Ordnen", "Überprüfen"];
  private current_step = 0;
}
</script>