feat: add return State from loaded callback

docs/api/props.md

@@ -13,6 +13,8 @@ load(
     // Optional params:
     //   - count - how many items has been loaded
     //   - pageSize - items per page count
+    // Returns:
+    //  - State ( 'loading', 'no-more', 'no-results' )
     loaded,
 
     // Call when you have no more item

docs/api/types.md

@@ -3,7 +3,7 @@
 ## LoadAction
 ```ts
 type LoadAction = {
-  loaded(count?: number, pageSize?: number): void;
+  loaded(count?: number, pageSize?: number): State;
   noMore(): void;
   noResults(): void;
   error(): void;
@@ -24,3 +24,10 @@ Describes payload what we get in `loaded` prop callback.
 type Position = 'top' | 'left' | 'default';
 ```
 Describes possible loader positions.
+
+## State
+Added in `v1.2.0`
+```ts
+type State = 'loading' | 'error' | 'no-more' | 'no-results';
+```
+Describes possible state for loader.

docs/guide/loading-states.md

@@ -67,3 +67,17 @@ function load({ loaded }) {
 ---
 
 We have one more state `error`, but we can't rich it automatically, just using `loaded` callback. It's because **vue-eternal-loading** have no idea about loading errors, and it can switch states based on information which you pass to `loaded` and it's not enough information to set `error` state. How to set `error` state manually we will learn further in the next sections.
+
+---
+
+If you want to know which state now is inside `load` function - `loaded()` callback returns it for you.
+```js
+function load({ loaded }) {
+  // Load data from server
+  // ...
+  const state = loaded();
+  if (state === 'no-more') {
+    alert('Boom! You have reached the end.')
+  }
+}
+```

package.json

@@ -67,5 +67,6 @@
   ],
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "dependencies": {}
 }

src/components/VueEternalLoading/VueEternalLoading.vue

@@ -92,23 +92,27 @@ export default defineComponent({
       });
     }
 
-    function loaded(count?: number, pageSize?: number) {
+    function loaded(count?: number, pageSize?: number): State {
       if (count === 0) {
         if (isFirstLoad.value) {
           noResults();
+          return 'no-results';
         } else {
           noMore();
+          return 'no-more';
         }
       } else if (
         count !== undefined &&
         pageSize !== undefined &&
         count < pageSize
       ) {
         noMore();
+        return 'no-more';
       } else {
         isFirstLoad.value = false;
         restoreScroll();
         observe();
+        return 'loading';
       }
     }
 

src/components/VueEternalLoading/__tests__/VueEternalLoading.test.ts

@@ -117,13 +117,15 @@ describe('VueEternalLoading', () => {
     expect(observe).toHaveBeenCalledTimes(1);
     expect(unobserve).toHaveBeenCalledTimes(1);
     // @ts-ignore
-    action.loaded(5, 5);
+    let state = action.loaded(5, 5);
+    expect(state).toBe('loading');
     expect(observe).toHaveBeenCalledTimes(2);
     expect(unobserve).toHaveBeenCalledTimes(1);
     await nextTick();
     expect(wrapper.html()).toContain('STATE_LOADING');
     // @ts-ignore
-    action.loaded(4, 5);
+    state = action.loaded(4, 5);
+    expect(state).toBe('no-more');
     await nextTick();
     expect(wrapper.html()).toContain('STATE_NO_MORE');
   });
@@ -132,7 +134,8 @@ describe('VueEternalLoading', () => {
     const wrapper = getComponent();
     runCallback(true);
     // @ts-ignore
-    action.loaded(0, 5);
+    const state = action.loaded(0, 5);
+    expect(state).toBe('no-results');
     expect(observe).toHaveBeenCalledTimes(1);
     expect(unobserve).toHaveBeenCalledTimes(1);
     await nextTick();
@@ -243,15 +246,15 @@ describe('VueEternalLoading', () => {
 
   test('container is null', async () => {
     const wrapper = getComponent(true, null);
-    expect(observe).not.toHaveBeenCalled();
+    expect(observe).toHaveBeenCalled();
     expect(unobserve).not.toHaveBeenCalled();
 
     await wrapper.setProps({ container: document.documentElement });
-    expect(observe).toHaveBeenCalledTimes(1);
-    expect(unobserve).not.toHaveBeenCalled();
-
-    await wrapper.setProps({ container: document.body });
     expect(observe).toHaveBeenCalledTimes(2);
     expect(unobserve).toHaveBeenCalledTimes(1);
+
+    await wrapper.setProps({ container: document.body });
+    expect(observe).toHaveBeenCalledTimes(3);
+    expect(unobserve).toHaveBeenCalledTimes(2);
   });
 });

src/components/VueEternalLoading/helpers/type/type.ts

@@ -1,5 +1,5 @@
 export type LoadAction = {
-  loaded(count?: number, pageSize?: number): void;
+  loaded(count?: number, pageSize?: number): State;
   noMore(): void;
   noResults(): void;
   error(): void;

src/main.ts

@@ -4,4 +4,5 @@ export type {
   LoadAction,
   LoadPayload,
   Position,
+  State,
 } from './components/VueEternalLoading/helpers/type/type';

yarn.lock

@@ -3273,9 +3273,9 @@ caniuse-api@^3.0.0:
     lodash.uniq "^4.5.0"
 
 caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219:
-  version "1.0.30001243"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001243.tgz#d9250155c91e872186671c523f3ae50cfc94a3aa"
-  integrity sha512-vNxw9mkTBtkmLFnJRv/2rhs1yufpDfCkBZexG3Y0xdOH2Z/eE/85E4Dl5j1YUN34nZVsSp6vVRFQRrez9wJMRA==
+  version "1.0.30001292"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001292.tgz"
+  integrity sha512-jnT4Tq0Q4ma+6nncYQVe7d73kmDmE9C3OGTx3MvW7lBM/eY1S1DZTMBON7dqV481RhNiS5OxD7k9JQvmDOTirw==
 
 capture-exit@^2.0.0:
   version "2.0.0"