Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

BulmaBreadcrumbs v-model

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-02-02 12:50:12 +00:00
parent be78671ffe
commit c74c63be54
2 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
ui/src/components/BulmaBreadcrumb.vue → ui/src/components/BulmaBreadcrumbs.vue
View file

@ -4,7 +4,7 @@
<li <li
v-for="(step, index) in steps" v-for="(step, index) in steps"
:key="`step-${index}`" :key="`step-${index}`"
:class="current === index ? 'is-active' : ''" :class="modelValue === index ? 'is-active' : ''"
@click="change_step(index)" @click="change_step(index)"
> >
<a> <a>
@ -29,20 +29,20 @@ export interface Step {
@Options({ @Options({
props: { props: {
steps: Array, steps: Array,
current: Number, modelValue: Number,
}, },
emits: ["update:current"], emits: ["update:modelValue"],
}) })
export default class extends Vue { export default class extends Vue {
private steps!: Step[]; private steps!: Step[];
private current!: number; private modelValue!: number;
private change_step(next_step: number) { private change_step(next_step: number) {
if (next_step === this.current) { if (next_step === this.modelValue) {
return; return;
} }
this.$emit("update:current", next_step); this.$emit("update:modelValue", next_step);
} }
} }
</script> </script>

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

@ -2,7 +2,7 @@
<div class="box"> <div class="box">
<p class="title is-4">Türchen bearbeiten</p> <p class="title is-4">Türchen bearbeiten</p>
<BulmaBreadcrumb :steps="steps" v-model:current="current_step" /> <BulmaBreadcrumbs :steps="steps" v-model="current_step" />
<DoorPlacer v-if="current_step === 0" v-model:rectangles="rectangles" /> <DoorPlacer v-if="current_step === 0" v-model:rectangles="rectangles" />
<DoorChooser v-if="current_step === 1" v-model:rectangles="rectangles" /> <DoorChooser v-if="current_step === 1" v-model:rectangles="rectangles" />
@ -14,13 +14,13 @@
import { Vue, Options } from "vue-class-component"; import { Vue, Options } from "vue-class-component";
import { Rectangle } from "./rects/rectangles"; import { Rectangle } from "./rects/rectangles";
import BulmaBreadcrumb, { Step } from "./BulmaBreadcrumb.vue"; import BulmaBreadcrumbs, { Step } from "./BulmaBreadcrumbs.vue";
import DoorPlacer from "./door_map/DoorPlacer.vue"; import DoorPlacer from "./door_map/DoorPlacer.vue";
import DoorChooser from "./door_map/DoorChooser.vue"; import DoorChooser from "./door_map/DoorChooser.vue";
@Options({ @Options({
components: { components: {
BulmaBreadcrumb, BulmaBreadcrumbs,
DoorPlacer, DoorPlacer,
DoorChooser, DoorChooser,
}, },