138 lines
3.2 KiB
Vue
138 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import {
|
|
ChevronLeft as ChevronLeftIcon,
|
|
ChevronRight as ChevronRightIcon,
|
|
} from 'lucide-vue-next'
|
|
import type { ChildElement } from '@/stores/elements'
|
|
|
|
type ElementRouteName = 'element' | 'admin-element'
|
|
type ElementNavigationPrefix = 'element' | 'admin'
|
|
|
|
interface Props {
|
|
currentElementId: number
|
|
dataCyPrefix: ElementNavigationPrefix
|
|
routeName: ElementRouteName
|
|
siblingElements: ChildElement[]
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const currentSiblingIndex = computed(() => {
|
|
return props.siblingElements.findIndex((siblingElement) => {
|
|
return siblingElement.id === props.currentElementId
|
|
})
|
|
})
|
|
|
|
const hasSiblingNavigation = computed(() => {
|
|
return props.siblingElements.length > 1 && currentSiblingIndex.value !== -1
|
|
})
|
|
|
|
const previousSibling = computed(() => {
|
|
return siblingElementAtOffset(-1)
|
|
})
|
|
|
|
const nextSibling = computed(() => {
|
|
return siblingElementAtOffset(1)
|
|
})
|
|
|
|
const navigationDataCy = computed(() => {
|
|
return `${props.dataCyPrefix}-sibling-navigation`
|
|
})
|
|
|
|
const previousDataCy = computed(() => {
|
|
return `${props.dataCyPrefix}-sibling-previous`
|
|
})
|
|
|
|
const nextDataCy = computed(() => {
|
|
return `${props.dataCyPrefix}-sibling-next`
|
|
})
|
|
|
|
function siblingElementAtOffset(offset: number): ChildElement | null {
|
|
if (!hasSiblingNavigation.value) {
|
|
return null
|
|
}
|
|
|
|
const siblingCount = props.siblingElements.length
|
|
const targetIndex =
|
|
(currentSiblingIndex.value + offset + siblingCount) % siblingCount
|
|
|
|
return props.siblingElements[targetIndex] ?? null
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<nav
|
|
v-if="
|
|
hasSiblingNavigation && previousSibling !== null && nextSibling !== null
|
|
"
|
|
class="element-sibling-navigation"
|
|
:data-cy="navigationDataCy"
|
|
aria-label="Sibling elements"
|
|
>
|
|
<RouterLink
|
|
:to="{
|
|
name: routeName,
|
|
params: { id: previousSibling.id },
|
|
}"
|
|
class="element-sibling-navigation__link"
|
|
:data-cy="previousDataCy"
|
|
>
|
|
<ChevronLeftIcon :size="18" aria-hidden="true" />
|
|
<span>Previous</span>
|
|
</RouterLink>
|
|
<RouterLink
|
|
:to="{
|
|
name: routeName,
|
|
params: { id: nextSibling.id },
|
|
}"
|
|
class="element-sibling-navigation__link"
|
|
:data-cy="nextDataCy"
|
|
>
|
|
<span>Next</span>
|
|
<ChevronRightIcon :size="18" aria-hidden="true" />
|
|
</RouterLink>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.element-sibling-navigation {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 0.75rem;
|
|
margin: 1.35rem 0 0;
|
|
}
|
|
|
|
.element-sibling-navigation__link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.4rem;
|
|
min-height: 2.5rem;
|
|
padding: 0.55rem 0.95rem;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
color: var(--color-text);
|
|
background: var(--color-white);
|
|
font-family: var(--font-sans);
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
transition:
|
|
border-color 180ms ease,
|
|
color 180ms ease;
|
|
}
|
|
|
|
.element-sibling-navigation__link:hover,
|
|
.element-sibling-navigation__link:focus-visible {
|
|
border-color: var(--color-slate);
|
|
color: var(--color-slate);
|
|
}
|
|
|
|
.element-sibling-navigation__link:focus-visible {
|
|
outline: 3px solid rgb(61 78 93 / 24%);
|
|
outline-offset: 3px;
|
|
}
|
|
</style>
|