update(src): add distance prop

Author: oumoussa98

src/components/InfiniteLoading.vue

@@ -15,21 +15,23 @@ const emit = defineEmits(["infinite"]);
 const props = defineProps({
   top: { type: Boolean, required: false },
   target: { type: [String, Boolean], required: false },
+  distance: { type: Number, required: false, default: 0 },
   identifier: { required: false },
   firstLoad: { type: Boolean, required: false, default: true },
   slots: { type: Object, required: false },
 });
 
 const infiniteLoading = ref(null);
 const state = ref("ready");
-const { top, slots, firstLoad, target } = props;
+const { top, slots, firstLoad, target, distance } = props;
 const { identifier } = toRefs(props);
 
 const params = {
   infiniteLoading,
   target,
   top,
   firstLoad,
+  distance,
   emit: initEmitter(emit, stateHandler(state)),
   parentEl: null,
 };
@@ -71,10 +73,10 @@ onUnmounted(() => {
     <slot v-if="state == 'complete'" name="complete">
       <span> {{ slots?.complete || "No more results!" }} </span>
     </slot>
-    <slot v-if="state == 'error'" name="error" :retry="params.emitInfiniteEvent">
+    <slot v-if="state == 'error'" name="error" :retry="params.emit">
       <span class="state-error">
         <span>{{ slots?.error || "Oops something went wrong!" }}</span>
-        <button class="retry" @click="params.emitInfiniteEvent">retry</button>
+        <button class="retry" @click="params.emit">retry</button>
       </span>
     </slot>
   </div>

src/utils.js

@@ -13,7 +13,6 @@ const stateHandler = state => ({
   },
 });
 
-let emit;
 const initEmitter = (emit, stateHandler) => {
   return () => {
     stateHandler.loading();
@@ -32,21 +31,21 @@ const getScrollHeight = el => {
   return el?.scrollHeight || document.documentElement.scrollHeight;
 };
 
-let load = true;
-const intersect = entries => {
-  const entry = entries[0];
-  if (entry.isIntersecting) {
-    if (load) emit();
-    load = true;
-  }
-};
-
 let observer;
 const startObserver = params => {
   params.parentEl = document.querySelector(params.target) || null;
-  emit = params.emit;
-  observer = new IntersectionObserver(intersect, null);
-  if (!params.firstLoad) load = false;
+  let rootMargin = `0px 0px ${params.distance}px 0px`;
+  if (params.top) rootMargin = `${params.distance}px 0px 0px 0px`;
+  observer = new IntersectionObserver(
+    entries => {
+      const entry = entries[0];
+      if (entry.isIntersecting) {
+        if (params.firstLoad) params.emit();
+        params.firstLoad = true;
+      }
+    },
+    { root: params.parentEl, rootMargin }
+  );
   observer.observe(params.infiniteLoading.value);
 };