Add the sort option to the Default UI

docs/content/docs/ui.md

@@ -182,3 +182,18 @@ new PagefindUI({
 {{< /diffcode >}}
 
 Enabling autofocus automatically directs attention to the search input field for enhanced user convenience, particularly beneficial when the UI is loaded within a modal dialog. However, exercise caution, as using autofocus indiscriminately may pose potential accessibility challenges.
+
+### Sort
+
+{{< diffcode >}}
+```javascript
+new PagefindUI({
+    element: "#search",
++    sort: { date: "desc" }
+});
+```
+{{< /diffcode >}}
+
+Passes sort options to Pagefind for ranking. Note that using a sort will override all ranking by relevance.
+
+The object passed to this option must match the [sort config for the JS API](/docs/js-api-sorting/).

pagefind_ui/default/svelte/ui.svelte

@@ -35,6 +35,7 @@
   export let trigger_search_term = "";
   export let translations = {};
   export let autofocus = false;
+  export let sort = null;
 
   let val = "";
   $: if (trigger_search_term) {
@@ -186,7 +187,12 @@
     await waitForApiInit();
 
     const local_search_id = ++search_id;
-    const results = await pagefind.search(term, { filters });
+
+    const search_options = { filters };
+    if (sort && typeof sort === "object") {
+      search_options[sort] = sort;
+    }
+    const results = await pagefind.search(term, search_options);
     if (search_id === local_search_id) {
       if (results.filters && Object.keys(results.filters)?.length) {
         available_filters = results.filters;

pagefind_ui/default/ui-core.js

@@ -27,6 +27,7 @@ export class PagefindUI {
     let mergeIndex = opts.mergeIndex ?? [];
     let translations = opts.translations ?? [];
     let autofocus = opts.autofocus ?? false;
+    let sort = opts.sort ?? null;
 
     // Remove the UI-specific config before passing it along to the Pagefind backend
     delete opts["element"];
@@ -43,6 +44,7 @@ export class PagefindUI {
     delete opts["mergeIndex"];
     delete opts["translations"];
     delete opts["autofocus"];
+    delete opts["sort"];
 
     const dom =
       selector instanceof HTMLElement
@@ -65,6 +67,7 @@ export class PagefindUI {
           merge_index: mergeIndex,
           translations,
           autofocus,
+          sort,
           pagefind_options: opts,
         },
       });