81 lines
2.3 KiB
Vue
81 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from "vue";
|
|
import { useTranslation } from "i18next-vue";
|
|
|
|
export type ClosingButtonVariant = "close" | "mark_as_done";
|
|
|
|
const props = defineProps<{
|
|
showStartButton: boolean;
|
|
showPreviousButton: boolean;
|
|
showNextButton: boolean;
|
|
disableNextButton: boolean;
|
|
showExitButton: boolean;
|
|
closingButtonVariant: ClosingButtonVariant;
|
|
}>();
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const emit = defineEmits(["start", "previous", "next", "exit"]);
|
|
|
|
// eslint-disable-next-line vue/return-in-computed-property
|
|
const closingButtonText = computed(() => {
|
|
switch (props.closingButtonVariant) {
|
|
case "close":
|
|
return t("general.close");
|
|
case "mark_as_done":
|
|
return t("learningContent.markAsDone");
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="nav absolute bottom-0 w-full border-t px-6 py-4">
|
|
<div class="relative z-10 flex flex-row place-content-end bg-white">
|
|
<button
|
|
v-if="props.showPreviousButton"
|
|
class="btn-secondary mr-2 flex items-center"
|
|
data-cy="previous-step"
|
|
@click="$emit('previous')"
|
|
>
|
|
<it-icon-arrow-left class="mr-2 h-6 w-6"></it-icon-arrow-left>
|
|
{{ $t("general.backCapitalized") }}
|
|
</button>
|
|
<button
|
|
v-if="props.showNextButton"
|
|
:disabled="props.disableNextButton"
|
|
class="btn-blue z-10 flex items-center"
|
|
data-cy="next-step"
|
|
@click="$emit('next')"
|
|
>
|
|
{{ $t("general.next") }}
|
|
<it-icon-arrow-right class="ml-2 h-6 w-6"></it-icon-arrow-right>
|
|
</button>
|
|
<button
|
|
v-if="props.showStartButton"
|
|
type="button"
|
|
class="btn-blue z-10 flex items-center"
|
|
data-cy="next-step"
|
|
@click="$emit('start')"
|
|
>
|
|
{{ $t("general.start") }}
|
|
<it-icon-arrow-right class="ml-2 h-6 w-6"></it-icon-arrow-right>
|
|
</button>
|
|
<button
|
|
v-if="props.showExitButton"
|
|
type="button"
|
|
class="btn-blue z-10 flex items-center"
|
|
data-cy="complete-and-continue"
|
|
@click="emit('exit')"
|
|
>
|
|
{{ closingButtonText }}
|
|
<it-icon-check
|
|
v-if="props.closingButtonVariant == 'mark_as_done'"
|
|
class="ml-2"
|
|
></it-icon-check>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped></style>
|