49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
<!--
|
|
Ported from legacy henza_pwa/src/components/ui/ScrollFetchAfterSearch.vue.
|
|
Legacy imported emp_after_search.svg / emp_before_search.svg and an `isSearch`
|
|
prop to pick between them, but the live template used neither — it rendered
|
|
`ordersEmpty.svg` unconditionally. Ported as-is (unused imports dropped,
|
|
`isSearch` kept since it is part of the component's declared prop contract).
|
|
-->
|
|
<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 && !loading" :image="ordersEmpty" />
|
|
</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 ordersEmpty from '../../assets/img/empty/ordersEmpty.svg'
|
|
import { useTransitionStore } from '../../stores/transitionStore'
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
loading: boolean
|
|
flag: boolean
|
|
padding?: string
|
|
isSearch?: boolean
|
|
}>(),
|
|
{},
|
|
)
|
|
const emit = defineEmits<{ (e: 'fetch'): void }>()
|
|
const transition = useTransitionStore()
|
|
const scrollArea = ref(null)
|
|
|
|
useInfiniteScroll(
|
|
scrollArea,
|
|
() => {
|
|
emit('fetch')
|
|
},
|
|
{ distance: 50 },
|
|
)
|
|
</script>
|