Add configurable page size to the Default UI

docs/content/docs/ui.md

@@ -15,6 +15,19 @@ new PagefindUI({ element: "#search" });
 
 A selector for the HTML element to attach Pagefind UI to. This is the only required argument.
 
+### Page size
+
+{{< diffcode >}}
+```javascript
+new PagefindUI({
+    element: "#search",
++    pageSize: 5
+});
+```
+{{< /diffcode >}}
+
+The number of search results to load at once, before a "Load more" button is shown. Defaults to `5`.
+
 ### Show sub results
 
 {{< diffcode >}}

pagefind_ui/default/svelte/ui.svelte

@@ -21,6 +21,7 @@
   }
 
   export let base_path = "/pagefind/";
+  export let page_size = 5;
   export let reset_styles = true;
   export let show_images = true;
   export let show_sub_results = false;
@@ -64,7 +65,7 @@
   let searched = false;
   let search_id = 0;
   let search_term = "";
-  let show = 5;
+  let show = page_size;
   let initial_filters = null;
   let available_filters = null;
   let selected_filters = {};
@@ -199,7 +200,7 @@
       }
       searchResult = results;
       loading = false;
-      show = 5;
+      show = page_size;
     }
   };
 
@@ -212,7 +213,7 @@
 
   const showMore = (e) => {
     e?.preventDefault();
-    show += 5;
+    show += page_size;
   };
 </script>
 

pagefind_ui/default/ui-core.js

@@ -15,6 +15,7 @@ export class PagefindUI {
 
     let selector = opts.element ?? "[data-pagefind-ui]";
     let bundlePath = opts.bundlePath ?? scriptBundlePath;
+    let pageSize = opts.pageSize ?? 5;
     let resetStyles = opts.resetStyles ?? true;
     let showImages = opts.showImages ?? true;
     let showSubResults = opts.showSubResults ?? false;
@@ -34,6 +35,7 @@ export class PagefindUI {
     // Remove the UI-specific config before passing it along to the Pagefind backend
     delete opts["element"];
     delete opts["bundlePath"];
+    delete opts["pageSize"];
     delete opts["resetStyles"];
     delete opts["showImages"];
     delete opts["showSubResults"];
@@ -54,6 +56,7 @@ export class PagefindUI {
         target: dom,
         props: {
           base_path: bundlePath,
+          page_size: pageSize,
           reset_styles: resetStyles,
           show_images: showImages,
           show_sub_results: showSubResults,