Lenaisten/advent22
1
0
Fork 0
mirror of https://code.lenaisten.de/Lenaisten/advent22.git synced 2024-11-23 00:03:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

BulmaBreadcrumb component

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-01-31 22:31:27 +00:00
parent f87b25f730
commit 3af743a6e6
2 changed files with 51 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
ui/src/components/BulmaBreadcrumb.vue Normal file
View file

@ -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>

24
ui/src/components/DoorMapEditor.vue
View file

@ -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">
<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>
<BulmaBreadcrumb :steps="steps" v-model:current="current_step" />
<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>