BulmaBreadcrumb component

ui/src/components/BulmaBreadcrumb.vue

@@ -0,0 +1,48 @@
+<template>
+  <nav class="breadcrumb has-succeeds-separator">
+    <ul>
+      <li
+        v-for="(step, index) in steps"
+        :key="`step-${index}`"
+        :class="current === index ? 'is-active' : ''"
+        @click="change_step(index)"
+      >
+        <a>
+          <span class="icon is-small">
+            <font-awesome-icon :icon="step.icon" />
+          </span>
+          <span>{{ step.label }}</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from "vue-class-component";
+
+type Step = {
+  label: string;
+  icon: string;
+};
+
+@Options({
+  props: {
+    steps: Array,
+    current: Number,
+  },
+  emits: ["update:current"],
+})
+export default class extends Vue {
+  private steps!: Step[];
+  private current!: number;
+
+  private change_step(next_step: number) {
+    if (next_step === this.current) {
+      return;
+    }
+
+    this.$emit("update:current", next_step);
+  }
+}
+</script>

ui/src/components/DoorMapEditor.vue

@@ -2,23 +2,7 @@
   <div class="box">
     <p class="title is-4">Türchen bearbeiten</p>
 
-    <nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
+    <BulmaBreadcrumb :steps="steps" v-model:current="current_step" />
-      <ul>
-        <li
-          v-for="(step, index) in steps"
-          :key="`step-${index}`"
-          :class="current_step === index ? 'is-active' : ''"
-          @click="change_step(index)"
-        >
-          <a>
-            <span class="icon is-small">
-              <font-awesome-icon :icon="step.icon" />
-            </span>
-            <span>{{ step.label }}</span>
-          </a>
-        </li>
-      </ul>
-    </nav>
 
     <DoorPlacer v-if="current_step === 0" v-model:rectangles="rectangles" />
     <DoorChooser v-if="current_step === 1" v-model:rectangles="rectangles" />
@@ -30,6 +14,7 @@
 import { Vue, Options } from "vue-class-component";
 import { Rectangle } from "./rects/rectangles";
 
+import BulmaBreadcrumb from "./BulmaBreadcrumb.vue";
 import DoorPlacer from "./door_map/DoorPlacer.vue";
 import DoorChooser from "./door_map/DoorChooser.vue";
 
@@ -40,6 +25,7 @@ type Step = {
 
 @Options({
   components: {
+    BulmaBreadcrumb,
     DoorPlacer,
     DoorChooser,
   },
@@ -52,9 +38,5 @@ export default class extends Vue {
   ];
   private current_step = 0;
   private rectangles: Rectangle[] = [];
-
-  private change_step(next_step: number) {
-    this.current_step = next_step;
-  }
 }
 </script>