zammad/app/frontend/apps/mobile/components/CommonBackButton/CommonBackButton.vue
2026-01-02 15:41:09 +02:00

49 lines
1.3 KiB
Vue

<!-- Copyright (C) 2012-2026 Zammad Foundation, https://zammad-foundation.org/ -->
<script setup lang="ts">
import { computed } from 'vue'
import { useWalker } from '#shared/router/walker.ts'
import { useLocaleStore } from '#shared/stores/locale.ts'
import type { RouteLocationRaw } from 'vue-router'
interface Props {
fallback: RouteLocationRaw
label?: string
// list of routes users shouldn't go back to
// useful, if there is a possible infinite loop
// ticket -> information -> ticket -> information -> ...
ignore?: string[]
avoidHomeButton?: boolean
}
const props = defineProps<Props>()
const walker = useWalker()
const isHomeButton = computed(() => {
return !(props.avoidHomeButton || walker.getBackUrl(props.fallback) !== '/')
})
const locale = useLocaleStore()
const icon = computed(() => {
if (isHomeButton.value) return 'home'
if (locale.localeData?.dir === 'rtl') return 'chevron-right'
return 'chevron-left'
})
</script>
<template>
<button
class="flex cursor-pointer items-center"
:aria-label="isHomeButton ? $t('Go home') : $t('Go back')"
:class="{ 'gap-2': label }"
type="button"
@click="$walker.back(fallback, ignore)"
>
<CommonIcon :name="icon" decorative />
<span v-if="label">{{ isHomeButton ? $t('Home') : $t(label) }}</span>
</button>
</template>