42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
|
<!-- Ported from legacy henza_pwa/src/components/ui/ScrollFetch.vue — the plain
|
||
|
|
infinite-scroll container (default ant Empty, no custom illustration). -->
|
||
|
|
<template>
|
||
|
|
<main
|
||
|
|
class="overflow-auto no-scrollbar w-[100vw] h-screen max-w-screen-md m-auto"
|
||
|
|
:style="{ paddingTop: padding || transition.headerHeight + 'px' }"
|
||
|
|
ref="scrollArea"
|
||
|
|
>
|
||
|
|
<slot></slot>
|
||
|
|
<Spinner cls="my-[10px]" :spinning="loading" :indicator="true" tip="درحال دریافت اطلاعات" />
|
||
|
|
<EmptyState v-if="flag" />
|
||
|
|
</main>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { useInfiniteScroll } from '@vueuse/core'
|
||
|
|
import Spinner from '../Spinner.vue'
|
||
|
|
import EmptyState from '../EmptyState.vue'
|
||
|
|
import { useTransitionStore } from '../../stores/transitionStore'
|
||
|
|
|
||
|
|
withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
loading: boolean
|
||
|
|
flag: boolean
|
||
|
|
padding?: string
|
||
|
|
}>(),
|
||
|
|
{},
|
||
|
|
)
|
||
|
|
const emit = defineEmits<{ (e: 'fetch'): void }>()
|
||
|
|
const transition = useTransitionStore()
|
||
|
|
const scrollArea = ref(null)
|
||
|
|
|
||
|
|
useInfiniteScroll(
|
||
|
|
scrollArea,
|
||
|
|
() => {
|
||
|
|
emit('fetch')
|
||
|
|
},
|
||
|
|
{ distance: 50 },
|
||
|
|
)
|
||
|
|
</script>
|