50 lines
1.6 KiB
Vue
50 lines
1.6 KiB
Vue
<template>
|
|
<div class="flex flex-col items-center space-y-4 md:space-y-0 md:flex-row mt-10 justify-start md:justify-evenly">
|
|
<div v-if="backable"
|
|
class="bg-primary hover:bg-secondary px-4 py-2 shadow text-teal-200 leading-none cursor-pointer rounded-lg"
|
|
@click.prevent="back">Zurück</div>
|
|
<div v-if="nextable"
|
|
class="bg-primary hover:bg-emerald-600 px-4 py-2 shadow text-teal-200 leading-none cursor-pointer rounded-lg"
|
|
@click.prevent="next">Weiter</div>
|
|
<button v-else type="submit"
|
|
class="relative flex items-center bg-primary hover:bg-emerald-600 px-8 py-2 shadow text-teal-200 leading-none cursor-pointer rounded-lg">
|
|
<div x-show="loading" class="absolute left-1">
|
|
<div class="spinner">
|
|
<div class="bounce1"></div>
|
|
<div class="bounce2"></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
Anmeldung absenden
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import useNav from '../composables/useNav.js';
|
|
import { computed } from 'vue';
|
|
const emits = defineEmits(['update:modelValue']);
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
required: true,
|
|
type: Number,
|
|
},
|
|
last: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const innerValue = computed({
|
|
get() {
|
|
return props.modelValue;
|
|
},
|
|
set(newValue) {
|
|
emits('update:modelValue', newValue);
|
|
},
|
|
});
|
|
|
|
const { back, next, backable, nextable } = useNav(innerValue, props.last);
|
|
</script>
|