55 lines
1.5 KiB
Vue
55 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import type { UseSwipeDirection } from '@vueuse/core'
|
|
import { useSwipe } from '@vueuse/core'
|
|
import { storeToRefs } from 'pinia'
|
|
import { usePageStore } from '~/stores/pages'
|
|
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const card = ref<HTMLElement | null>(null)
|
|
|
|
const pageStore = usePageStore()
|
|
const { pages } = storeToRefs(pageStore)
|
|
const swipe = useSwipe(card, {
|
|
passive: true,
|
|
onSwipeEnd: (_touch: TouchEvent, _direction: UseSwipeDirection) => {
|
|
const currentPage = pages.value.find(
|
|
(page) => page.path === route.fullPath,
|
|
)!
|
|
|
|
const currentIndex = pages.value.indexOf(currentPage)
|
|
|
|
if (
|
|
card.value?.offsetWidth &&
|
|
Math.abs(swipe.lengthX.value) > 1.5 * Math.abs(swipe.lengthY.value) &&
|
|
Math.abs(swipe.lengthX.value) / card.value?.offsetWidth >= 0.1
|
|
) {
|
|
router.push(
|
|
toRaw(pages.value)[
|
|
swipe.lengthX.value > 0
|
|
? (currentIndex + 1) % pages.value.length
|
|
: currentIndex - 1 < 0
|
|
? pages.value.length - (currentIndex + 1)
|
|
: currentIndex - 1
|
|
].path,
|
|
)
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<main
|
|
ref="card"
|
|
class="dimensions background rounded-1-sm overflow-auto d-flex flex-column gap-3 gap-sm-2 px-4 pt-4 pb-3"
|
|
>
|
|
<Options />
|
|
<Navigation />
|
|
<slot name="header" />
|
|
<NuxtPage
|
|
class="scrollbar fade-mask-sm flex-grow-1 overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3"
|
|
/>
|
|
<slot name="footer" />
|
|
</main>
|
|
</template>
|