51 lines
1.5 KiB
Vue
51 lines
1.5 KiB
Vue
|
<!--
|
||
|
|
Ported from legacy henza_pwa/src/components/ui/ScrollFetchSearch.vue.
|
||
|
|
|
||
|
|
Legacy rendered two separate empty states, gated on an `isFav` prop, that
|
||
|
|
both used the SAME favoritEmpty image — a distinction without a difference,
|
||
|
|
preserved verbatim while this was a faithful port. The only caller that ever
|
||
|
|
passed `is-fav` was FavoritesView, which now renders its own empty state in
|
||
|
|
the redesigned language, so the prop had no remaining callers and the two
|
||
|
|
identical branches collapse to one.
|
||
|
|
-->
|
||
|
|
<template>
|
||
|
|
<main
|
||
|
|
class="flex flex-col flex-1 overflow-auto no-scrollbar w-[100vw] 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" :image="favoritEmpty" />
|
||
|
|
</main>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { useInfiniteScroll } from '@vueuse/core'
|
||
|
|
import EmptyState from '../EmptyState.vue'
|
||
|
|
import Spinner from '../Spinner.vue'
|
||
|
|
import favoritEmpty from '../../assets/img/empty/favoritEmpty.svg'
|
||
|
|
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>
|