From 21be9561f207e4dd008ba71d40a5e3926400e696 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20P=C3=A4rnpuu?= <rene.parnpuu@gmail.com>
Date: Mon, 21 Aug 2023 11:51:11 +0300
Subject: [PATCH] Slot for no results added

---
 src/components/InfiniteLoading.vue | 16 +++++++++++++---
 src/types.ts                       |  1 +
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/InfiniteLoading.vue b/src/components/InfiniteLoading.vue
index dab294f..54cfb4d 100644
--- a/src/components/InfiniteLoading.vue
+++ b/src/components/InfiniteLoading.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Props, Params, State, StateHandler } from "@root/types";
-import { onMounted, ref, toRefs, onUnmounted, watch, nextTick } from "vue";
+import { computed, onMounted, ref, toRefs, onUnmounted, watch, nextTick } from "vue";
 import { startObserver, getParentEl, isVisible } from "@root/utils";
 // @ts-ignore
 import Spinner from "./Spinner.vue";
@@ -43,6 +43,7 @@ const stateHandler: StateHandler = {
     state.value = "loading";
   },
   async loaded() {
+    params.firstload = false;
     state.value = "loaded";
     const parentEl = params.parentEl || document.documentElement;
     await nextTick();
@@ -71,6 +72,12 @@ onMounted(async () => {
 onUnmounted(() => {
   observer?.disconnect();
 });
+
+const showNoMore = computed(() => state.value == "complete" && !params.firstload);
+
+const showNoResults = computed(() => state.value == "complete" && params.firstload);
+
+const showError = computed(() => state.value === "error");
 </script>
 
 <template>
@@ -80,10 +87,13 @@ onUnmounted(() => {
         <Spinner />
       </slot>
     </div>
-    <slot v-if="state == 'complete'" name="complete">
+    <slot v-if="showNoMore" name="complete">
       <span> {{ slots?.complete || "No more results!" }} </span>
     </slot>
-    <slot v-if="state == 'error'" name="error" :retry="params.emit">
+    <slot v-if="showNoResults" name="noResults">
+      <span> {{ slots?.noResults || "No data found!" }} </span>
+    </slot>
+    <slot v-if="showError" name="error" :retry="params.emit">
       <span class="state-error">
         <span>{{ slots?.error || "Oops something went wrong!" }}</span>
         <button class="retry" @click="params.emit">retry</button>
diff --git a/src/types.ts b/src/types.ts
index 4ff2ebe..23bd169 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -22,6 +22,7 @@ export interface Params {
 
 export interface Slots {
   complete?: string;
+  noResults?: string;
   error?: string;
 }