[Fork] Add missing props noResults, noMore, error & a new one errorButton

.github/workflows/main.yml

@@ -53,6 +53,6 @@ jobs:
 
       - name: Publish 🚀
         if: steps.check.outputs.changed == 'true'
-        run: npm publish
+        run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "svelte-infinite-loading",
-  "version": "1.3.8",
+  "name": "@cokejoke/svelte-infinite-loading",
+  "version": "1.3.9",
   "description": "An infinite scroll component for Svelte apps",
   "svelte": "src/index.js",
   "main": "dist/svelte-infinite-loading.js",
@@ -41,17 +41,17 @@
     "svelte-components"
   ],
   "author": {
-    "name": "Skayo",
+    "name": "cokejoke",
     "email": "[email protected]",
     "url": "https://skayo.dev"
   },
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Skayo/svelte-infinite-loading.git"
+    "url": "git+https://github.com/cokejoke/svelte-infinite-loading.git"
   },
   "bugs": {
-    "url": "https://github.com/Skayo/svelte-infinite-loading/issues"
+    "url": "https://github.com/cokejoke/svelte-infinite-loading/issues"
   },
-  "homepage": "https://github.com/Skayo/svelte-infinite-loading"
+  "homepage": "https://github.com/cokejoke/svelte-infinite-loading"
 }

src/InfiniteLoading.svelte

@@ -161,6 +161,14 @@
 	export let forceUseInfiniteWrapper = false;
 	export let identifier = +new Date();
 
+    /**
+     * Slot props
+     */
+	export let noResults = 'No results :(';
+	export let noMore = 'No more data :)';
+	export let error = 'Oops, something went wrong :(';
+	export let errorButton = 'Retry';
+
 	let isFirstLoad = true; // save the current loading whether it is the first loading
 	let status = STATUS.READY;
 	let mounted = false;
@@ -334,26 +342,26 @@
 	{#if showNoResults}
 		<div class="infinite-status-prompt">
 			<slot name="noResults">
-				No results :(
+				{noResults}
 			</slot>
 		</div>
 	{/if}
 
 	{#if showNoMore}
 		<div class="infinite-status-prompt">
 			<slot name="noMore">
-				No more data :)
+				{noMore}
 			</slot>
 		</div>
 	{/if}
 
 	{#if showError}
 		<div class="infinite-status-prompt">
 			<slot name="error" {attemptLoad}>
-				Oops, something went wrong :(
+				{error}
 				<br>
 				<button class="btn-try-infinite" on:click={attemptLoad}>
-					Retry
+					{errorButton}
 				</button>
 			</slot>
 		</div>

types/index.d.ts

@@ -66,18 +66,23 @@ export interface InfiniteLoadingSlots {
 	 * This message will be displayed when there is no data, which means that we have called the InfiniteEvent.details.complete
 	 * method, before ever calling the InfiniteEvent.details.loaded method.
 	 */
-	noResults: {};
+	noResults: string;
 
 	/**
 	 * This message will be displayed when there is no more data, which means we have called the InfiniteEvent.details.loaded
 	 * method at least once before calling the InfiniteEvent.details.complete method.
 	 */
-	noMore: {};
+	noMore: string;
 
 	/**
 	 * This message will be displayed when loading has failed, which means that we have called the InfiniteEvent.details.error method.
 	 */
-	error: { attemptLoad: () => void };
+	error: string;
+
+	/**
+	 * This is a Part of the error message. It will change the button text, wich means that we have called the InfiniteEvent.details.error method.
+	 */
+	errorButton: string;
 
 	/**
 	 * This slot will be displayed when loading data, you can also use your own spinner here.