@getlupa/vue 0.22.0 → 0.22.2

package/dist/lupaSearch.js

@@ -12905,6 +12905,18 @@ const useParamsStore = /* @__PURE__ */ defineStore("params", () => {
     params.value = parseParams(optionsStore.getQueryParamName, url.searchParams);
     searchString.value = url.search;
   };
+  const getPageUrlWithNewParams = ({
+    params: newParams,
+    paramsToRemove,
+    encode: encode2 = true,
+    searchResultsLink: searchResultsLink2
+  }) => {
+    const url = getPageUrl(searchResultsLink2);
+    paramsToRemove = getRemovableParams(url, optionsStore.getQueryParamName, paramsToRemove);
+    removeParams(url, paramsToRemove);
+    newParams.forEach((p2) => appendParam(url, p2, encode2));
+    return url.search;
+  };
   const removeParameters = ({
     paramsToRemove,
     save = true
@@ -13042,6 +13054,7 @@ const useParamsStore = /* @__PURE__ */ defineStore("params", () => {
     sortParams,
     lastChangedParams,
     skipFacetReload,
+    getPageUrlWithNewParams,
     add,
     removeAllFilters,
     removeParameters,
@@ -13516,7 +13529,7 @@ const _hoisted_1$1l = {
 };
 const _hoisted_2$W = { class: "lupa-dialog-content" };
 const _hoisted_3$E = { class: "lupa-listening-text" };
-const _hoisted_4$v = { class: "lupa-mic-button-wrapper" };
+const _hoisted_4$u = { class: "lupa-mic-button-wrapper" };
 const _hoisted_5$l = ["aria-label"];
 const _sfc_main$1z = /* @__PURE__ */ vue.defineComponent({
   __name: "VoiceSearchDialog",
@@ -13630,7 +13643,7 @@ const _sfc_main$1z = /* @__PURE__ */ vue.defineComponent({
           }),
           vue.createElementVNode("div", _hoisted_2$W, [
             vue.createElementVNode("p", _hoisted_3$E, vue.toDisplayString(description.value), 1),
-            vue.createElementVNode("div", _hoisted_4$v, [
+            vue.createElementVNode("div", _hoisted_4$u, [
               vue.createElementVNode("button", {
                 class: vue.normalizeClass(["lupa-mic-button", { recording: vue.unref(isRecording) }]),
                 onClick: handleRecordingButtonClick,
@@ -13655,7 +13668,7 @@ const _sfc_main$1z = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$1k = { id: "lupa-search-box-input-container" };
 const _hoisted_2$V = { class: "lupa-input-clear" };
 const _hoisted_3$D = { id: "lupa-search-box-input" };
-const _hoisted_4$u = ["value"];
+const _hoisted_4$t = ["value"];
 const _hoisted_5$k = ["aria-label", "placeholder"];
 const _hoisted_6$8 = {
   key: 0,
@@ -13808,7 +13821,7 @@ const _sfc_main$1y = /* @__PURE__ */ vue.defineComponent({
             "aria-hidden": "true",
             value: showHint.value ? suggestedValue.value.item.suggestion : "",
             disabled: ""
-          }, null, 8, _hoisted_4$u),
+          }, null, 8, _hoisted_4$t),
           vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
           }, inputAttributes.value, {
@@ -14058,7 +14071,7 @@ const _hoisted_3$C = {
   class: "lupa-suggestion-facet",
   "data-cy": "lupa-suggestion-facet"
 };
-const _hoisted_4$t = {
+const _hoisted_4$s = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
@@ -14105,7 +14118,7 @@ const _sfc_main$1t = /* @__PURE__ */ vue.defineComponent({
           innerHTML: _ctx.suggestion.displayHighlight
         }, null, 8, _hoisted_1$1g)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$T, vue.toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$C, [
-          vue.createElementVNode("span", _hoisted_4$t, vue.toDisplayString(facetLabel.value), 1),
+          vue.createElementVNode("span", _hoisted_4$s, vue.toDisplayString(facetLabel.value), 1),
           vue.createElementVNode("span", _hoisted_5$j, vue.toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : vue.createCommentVNode("", true)
       ]);
@@ -23903,7 +23916,7 @@ const _sfc_main$1l = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$1a = ["innerHTML"];
 const _hoisted_2$P = { key: 0 };
 const _hoisted_3$B = { key: 1 };
-const _hoisted_4$s = { class: "lupa-search-box-custom-label" };
+const _hoisted_4$r = { class: "lupa-search-box-custom-label" };
 const _hoisted_5$i = { class: "lupa-search-box-custom-text" };
 const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductCustom",
@@ -23936,7 +23949,7 @@ const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
         class: [className.value, "lupa-search-box-product-custom"]
       }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$P, vue.toDisplayString(text.value), 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$B, [
-          vue.createElementVNode("div", _hoisted_4$s, vue.toDisplayString(label.value), 1),
+          vue.createElementVNode("div", _hoisted_4$r, vue.toDisplayString(label.value), 1),
           vue.createElementVNode("div", _hoisted_5$i, vue.toDisplayString(text.value), 1)
         ]))
       ], 16));
@@ -24287,7 +24300,7 @@ const useSearchResultStore = /* @__PURE__ */ defineStore("searchResult", () => {
 const _hoisted_1$18 = { class: "lupa-search-box-add-to-cart-wrapper" };
 const _hoisted_2$O = { class: "lupa-search-box-product-addtocart" };
 const _hoisted_3$A = ["disabled"];
-const _hoisted_4$r = ["href"];
+const _hoisted_4$q = ["href"];
 const _hoisted_5$h = ["disabled"];
 const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductAddToCart",
@@ -24343,7 +24356,7 @@ const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
             "data-cy": "lupa-add-to-cart",
             disabled: !inStockValue.value || loading.value
           }, _ctx.dynamicAttributes, { onClick: handleClick }), [
-            vue.createElementVNode("a", { href: _ctx.link }, vue.toDisplayString(label.value), 9, _hoisted_4$r)
+            vue.createElementVNode("a", { href: _ctx.link }, vue.toDisplayString(label.value), 9, _hoisted_4$q)
           ], 16, _hoisted_3$A)) : (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
             key: 1,
             onClick: vue.withModifiers(handleClick, ["stop", "prevent"]),
@@ -24463,7 +24476,7 @@ const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadV
 const _hoisted_1$16 = { class: "lupa-badge-title" };
 const _hoisted_2$N = ["src"];
 const _hoisted_3$z = { key: 1 };
-const _hoisted_4$q = {
+const _hoisted_4$p = {
   key: 0,
   class: "lupa-badge-full-text"
 };
@@ -24507,7 +24520,7 @@ const _sfc_main$1g = /* @__PURE__ */ vue.defineComponent({
           }, null, 8, _hoisted_2$N)) : vue.createCommentVNode("", true),
           hasTitleText.value && showTitle.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$z, vue.toDisplayString(_ctx.badge.titleText), 1)) : vue.createCommentVNode("", true)
         ]),
-        hasAdditionalText.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$q, vue.toDisplayString(_ctx.badge.additionalText), 1)) : vue.createCommentVNode("", true)
+        hasAdditionalText.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$p, vue.toDisplayString(_ctx.badge.additionalText), 1)) : vue.createCommentVNode("", true)
       ], 6);
     };
   }
@@ -25475,7 +25488,7 @@ const _hoisted_3$x = {
   key: 0,
   class: "lupa-panel-title lupa-panel-title-top-results"
 };
-const _hoisted_4$p = {
+const _hoisted_4$o = {
   key: 1,
   class: "lupa-panel-title"
 };
@@ -25671,7 +25684,7 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadV
                 "data-cy": "lupa-panel-" + panel.type + "-index"
               }, [
                 ((_a25 = panel.labels) == null ? void 0 : _a25.topResultsTitle) && showTopResultsPanelTitle(panel.queryKey) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$x, vue.toDisplayString((_b25 = panel.labels) == null ? void 0 : _b25.topResultsTitle), 1)) : vue.createCommentVNode("", true),
-                ((_c = panel.labels) == null ? void 0 : _c.title) && showPanelTitle(panel) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$p, vue.toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : vue.createCommentVNode("", true),
+                ((_c = panel.labels) == null ? void 0 : _c.title) && showPanelTitle(panel) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$o, vue.toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : vue.createCommentVNode("", true),
                 panel.queryKey && canShowPanel(panel) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getComponent(panel.type)), {
                   key: 2,
                   panel,
@@ -26185,7 +26198,7 @@ const _hoisted_3$w = {
   key: 1,
   "data-cy": "did-you-mean-label"
 };
-const _hoisted_4$o = { key: 1 };
+const _hoisted_4$n = { key: 1 };
 const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsDidYouMean",
   props: {
@@ -26236,7 +26249,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
                 class: "lupa-did-you-mean lupa-highlighted-search-text",
                 "data-cy": "did-you-mean-value",
                 onClick: _cache[0] || (_cache[0] = ($event) => goToResults({ searchText: didYouMeanValue.value }))
-              }, vue.toDisplayString(didYouMeanValue.value) + " ", 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$o, vue.toDisplayString(label) + " ", 1))
+              }, vue.toDisplayString(didYouMeanValue.value) + " ", 1)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$n, vue.toDisplayString(label) + " ", 1))
             ]);
           }), 128))
         ])) : vue.createCommentVNode("", true)
@@ -26286,7 +26299,7 @@ const _hoisted_3$v = {
   key: 1,
   class: "lupa-results-total-count"
 };
-const _hoisted_4$n = { class: "lupa-results-total-count-number" };
+const _hoisted_4$m = { class: "lupa-results-total-count-number" };
 const _hoisted_5$f = ["innerHTML"];
 const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsTitle",
@@ -26336,7 +26349,7 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
           queryText.value && !searchResultsTitleTemplate.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$G, "'" + vue.toDisplayString(queryText.value) + "'", 1)) : vue.createCommentVNode("", true),
           showProductCount.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$v, [
             vue.createTextVNode("(" + vue.toDisplayString(searchResultsCountLabel.value), 1),
-            vue.createElementVNode("span", _hoisted_4$n, vue.toDisplayString(vue.unref(totalItems)), 1),
+            vue.createElementVNode("span", _hoisted_4$m, vue.toDisplayString(vue.unref(totalItems)), 1),
             _cache[0] || (_cache[0] = vue.createTextVNode(")"))
           ])) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true),
@@ -26418,7 +26431,7 @@ const _hoisted_3$u = {
   key: 0,
   class: "filter-values"
 };
-const _hoisted_4$m = { class: "lupa-current-filter-list" };
+const _hoisted_4$l = { class: "lupa-current-filter-list" };
 const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
   __name: "CurrentFilters",
   props: {
@@ -26510,7 +26523,7 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
           }, null, 2)) : vue.createCommentVNode("", true)
         ]),
         !_ctx.expandable || isOpen.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$u, [
-          vue.createElementVNode("div", _hoisted_4$m, [
+          vue.createElementVNode("div", _hoisted_4$l, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(currentDisplayFilters.value, (filter) => {
               return vue.openBlock(), vue.createBlock(_sfc_main$$, {
                 key: filter.key + "_" + filter.value,
@@ -26579,7 +26592,7 @@ const _hoisted_1$R = {
 };
 const _hoisted_2$D = { class: "lupa-category-back" };
 const _hoisted_3$t = ["href"];
-const _hoisted_4$l = ["href"];
+const _hoisted_4$k = ["href"];
 const _hoisted_5$e = { class: "lupa-child-category-list" };
 const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
   __name: "CategoryFilter",
@@ -26686,7 +26699,7 @@ const _sfc_main$Y = /* @__PURE__ */ vue.defineComponent({
             href: parentUrlLink.value,
             class: vue.normalizeClass({ "lupa-title-category": !hasBackButton.value }),
             onClick: handleNavigationParent
-          }, vue.toDisplayString(parentTitle.value), 11, _hoisted_4$l)
+          }, vue.toDisplayString(parentTitle.value), 11, _hoisted_4$k)
         ], 2),
         vue.createElementVNode("div", _hoisted_5$e, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(categoryChildren.value, (child) => {
@@ -26707,7 +26720,7 @@ const _hoisted_1$Q = {
 };
 const _hoisted_2$C = ["placeholder"];
 const _hoisted_3$s = { class: "lupa-terms-list" };
-const _hoisted_4$k = ["onClick"];
+const _hoisted_4$j = ["onClick"];
 const _hoisted_5$d = { class: "lupa-term-checkbox-wrapper" };
 const _hoisted_6$7 = { class: "lupa-term-label" };
 const _hoisted_7$4 = {
@@ -26839,7 +26852,7 @@ const _sfc_main$X = /* @__PURE__ */ vue.defineComponent({
                 vue.createElementVNode("span", _hoisted_6$7, vue.toDisplayString(getItemLabel(item)), 1),
                 _ctx.options.showDocumentCount ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7$4, "(" + vue.toDisplayString(item.count) + ")", 1)) : vue.createCommentVNode("", true)
               ], 2)
-            ], 10, _hoisted_4$k);
+            ], 10, _hoisted_4$j);
           }), 128))
         ]),
         displayShowMore.value ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -27756,7 +27769,7 @@ const _hoisted_3$r = {
   key: 1,
   class: "lupa-stats-facet-summary-input"
 };
-const _hoisted_4$j = { class: "lupa-stats-from" };
+const _hoisted_4$i = { class: "lupa-stats-from" };
 const _hoisted_5$c = {
   key: 0,
   class: "lupa-stats-range-label"
@@ -27994,7 +28007,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$P, [
         !isInputVisible.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$B, vue.toDisplayString(statsSummary.value), 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$r, [
-          vue.createElementVNode("div", _hoisted_4$j, [
+          vue.createElementVNode("div", _hoisted_4$i, [
             rangeLabelFrom.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$c, vue.toDisplayString(rangeLabelFrom.value), 1)) : vue.createCommentVNode("", true),
             vue.withDirectives(vue.createElementVNode("input", {
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
@@ -28063,7 +28076,7 @@ const _hoisted_3$q = {
   key: 0,
   class: "lupa-term-count"
 };
-const _hoisted_4$i = {
+const _hoisted_4$h = {
   key: 0,
   class: "lupa-facet-level"
 };
@@ -28133,7 +28146,7 @@ const _sfc_main$V = /* @__PURE__ */ vue.defineComponent({
             _ctx.options.showDocumentCount ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$q, "(" + vue.toDisplayString(_ctx.item.count) + ")", 1)) : vue.createCommentVNode("", true)
           ], 2)
         ]),
-        showChildren.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$i, [
+        showChildren.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$h, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(treeItem.value.children, (itemChild) => {
             return vue.openBlock(), vue.createBlock(_component_HierarchyFacetLevel, {
               key: itemChild.title,
@@ -28681,7 +28694,7 @@ const _hoisted_1$I = {
 };
 const _hoisted_2$w = { class: "lupa-mobile-sidebar-content" };
 const _hoisted_3$o = { class: "lupa-sidebar-top" };
-const _hoisted_4$h = { class: "lupa-sidebar-title" };
+const _hoisted_4$g = { class: "lupa-sidebar-title" };
 const _hoisted_5$b = {
   key: 0,
   class: "lupa-sidebar-filter-count"
@@ -28726,7 +28739,7 @@ const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
         }),
         vue.createElementVNode("div", _hoisted_2$w, [
           vue.createElementVNode("div", _hoisted_3$o, [
-            vue.createElementVNode("div", _hoisted_4$h, [
+            vue.createElementVNode("div", _hoisted_4$g, [
               vue.createTextVNode(vue.toDisplayString(sidebarTitle.value) + " ", 1),
               isFilterCountVisible.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$b, vue.toDisplayString(vue.unref(currentFilterCount)), 1)) : vue.createCommentVNode("", true)
             ]),
@@ -28753,7 +28766,7 @@ const _hoisted_3$n = {
   key: 1,
   class: "lupa-search-results-breadcrumb-text"
 };
-const _hoisted_4$g = { key: 2 };
+const _hoisted_4$f = { key: 2 };
 const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsBreadcrumbs",
   props: {
@@ -28795,7 +28808,7 @@ const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
                 return handleNavigation(e2, (_a26 = breadcrumb == null ? void 0 : breadcrumb.link) != null ? _a26 : "");
               }
             }, vue.toDisplayString(getLabel(breadcrumb.label)), 9, _hoisted_2$v)) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$n, vue.toDisplayString(getLabel(breadcrumb.label)), 1)),
-            index < breadcrumbsValue.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$g, vue.toDisplayString((_a25 = breadcrumb.separator) != null ? _a25 : "/"), 1)) : vue.createCommentVNode("", true)
+            index < breadcrumbsValue.value.length - 1 ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$f, vue.toDisplayString((_a25 = breadcrumb.separator) != null ? _a25 : "/"), 1)) : vue.createCommentVNode("", true)
           ]);
         }), 128))
       ]);
@@ -28957,8 +28970,7 @@ const _hoisted_2$u = {
   key: 0,
   class: "lupa-page-number-separator"
 };
-const _hoisted_3$m = ["onClick"];
-const _hoisted_4$f = {
+const _hoisted_3$m = {
   key: 0,
   class: "lupa-page-number-separator"
 };
@@ -29025,7 +29037,24 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
         timeout: (_f = (_e = searchResultOptions.value.scrollToResults) == null ? void 0 : _e.timeout) != null ? _f : 500
       };
     });
-    const handlePageChange = (page) => {
+    const tagName = vue.computed(() => {
+      return props.options.renderAsLinks ? "a" : "div";
+    });
+    const getPageUrlWithNewParams = (page) => {
+      return paramStore.getPageUrlWithNewParams({
+        params: [{ name: optionsStore.getQueryParamName(QUERY_PARAMS.PAGE), value: page.toString() }]
+      });
+    };
+    const getHref = (page) => {
+      if (props.options.renderAsLinks) {
+        return getPageUrlWithNewParams(page);
+      }
+      return null;
+    };
+    const handlePageChange = (e2, page) => {
+      if (e2 && props.options.renderAsLinks) {
+        e2.preventDefault();
+      }
       if (page > 0) {
         paramStore.appendParams({
           params: [{ name: optionsStore.getQueryParamName(QUERY_PARAMS.PAGE), value: page.toString() }]
@@ -29039,46 +29068,78 @@ const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
       }
     };
     return (_ctx, _cache) => {
+      var _a25;
       return showPagination.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$D, [
-        showBack.value ? (vue.openBlock(), vue.createElementBlock("div", {
+        showBack.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
           key: 0,
           class: vue.normalizeClass(firstPageLabel.value === "<" ? "lupa-page-arrow" : "lupa-show-less"),
-          onClick: _cache[0] || (_cache[0] = () => handlePageChange(_ctx.options.selectedPage - 1))
-        }, vue.toDisplayString(firstPageLabel.value), 3)) : vue.createCommentVNode("", true),
+          href: getHref(_ctx.options.selectedPage - 1),
+          onClick: _cache[0] || (_cache[0] = (e2) => handlePageChange(e2, _ctx.options.selectedPage - 1))
+        }, {
+          default: vue.withCtx(() => [
+            vue.createTextVNode(vue.toDisplayString(firstPageLabel.value), 1)
+          ]),
+          _: 1
+        }, 8, ["class", "href"])) : vue.createCommentVNode("", true),
         showFirstPage.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-          vue.createElementVNode("div", {
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
+            href: getHref(1),
             class: "lupa-page-number lupa-page-number-first",
-            onClick: _cache[1] || (_cache[1] = () => handlePageChange(1))
-          }, " 1 "),
+            onClick: _cache[1] || (_cache[1] = (e2) => handlePageChange(e2, 1))
+          }, {
+            default: vue.withCtx(() => _cache[4] || (_cache[4] = [
+              vue.createTextVNode(" 1 ")
+            ])),
+            _: 1,
+            __: [4]
+          }, 8, ["href"])),
           showFirstPageSeparator.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$u, "...")) : vue.createCommentVNode("", true)
         ], 64)) : vue.createCommentVNode("", true),
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(pages.value, (page) => {
-          return vue.openBlock(), vue.createElementBlock("div", {
+          return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
             key: page,
-            onClick: () => handlePageChange(page),
+            href: getHref(page),
+            onClick: (e2) => handlePageChange(e2, page),
             class: vue.normalizeClass([
               "lupa-page-number",
               page === _ctx.options.selectedPage ? "lupa-page-number-selected" : ""
             ]),
             "data-cy": "lupa-page-number"
-          }, vue.toDisplayString(page), 11, _hoisted_3$m);
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(page), 1)
+            ]),
+            _: 2
+          }, 1032, ["href", "onClick", "class"]);
         }), 128)),
         showLastPage.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
-          showLastPageSeparator.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$f, "...")) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", {
+          showLastPageSeparator.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$m, "...")) : vue.createCommentVNode("", true),
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
+            href: getHref((_a25 = lastPage.value) != null ? _a25 : 1),
             class: "lupa-page-number lupa-page-number-last",
-            onClick: _cache[2] || (_cache[2] = () => {
-              var _a25;
-              return handlePageChange((_a25 = lastPage.value) != null ? _a25 : 1);
+            onClick: _cache[2] || (_cache[2] = (e2) => {
+              var _a26;
+              return handlePageChange(e2, (_a26 = lastPage.value) != null ? _a26 : 1);
             })
-          }, vue.toDisplayString(lastPage.value), 1)
+          }, {
+            default: vue.withCtx(() => [
+              vue.createTextVNode(vue.toDisplayString(lastPage.value), 1)
+            ]),
+            _: 1
+          }, 8, ["href"]))
         ], 64)) : vue.createCommentVNode("", true),
-        _ctx.options.selectedPage < _ctx.options.count ? (vue.openBlock(), vue.createElementBlock("div", {
+        _ctx.options.selectedPage < _ctx.options.count ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(tagName.value), {
           key: 3,
           class: vue.normalizeClass(lastPageLabel.value === ">" ? "lupa-page-arrow" : "lupa-show-more"),
+          href: getHref(_ctx.options.selectedPage + 1),
           "data-cy": "lupa-show-more",
-          onClick: _cache[3] || (_cache[3] = () => handlePageChange(_ctx.options.selectedPage + 1))
-        }, vue.toDisplayString(lastPageLabel.value), 3)) : vue.createCommentVNode("", true)
+          onClick: _cache[3] || (_cache[3] = (e2) => handlePageChange(e2, _ctx.options.selectedPage + 1))
+        }, {
+          default: vue.withCtx(() => [
+            vue.createTextVNode(vue.toDisplayString(lastPageLabel.value), 1)
+          ]),
+          _: 1
+        }, 8, ["class", "href"])) : vue.createCommentVNode("", true)
       ])) : vue.createCommentVNode("", true);
     };
   }
@@ -29312,6 +29373,7 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
       }
     });
     const paginationOptions = vue.computed(() => {
+      var _a25;
       const pageSelect = optionsValue.value.pagination.pageSelection;
       return {
         pageSize: {
@@ -29322,7 +29384,8 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
           count: getPageCount(searchResult.value.total, limit.value),
           selectedPage: page.value,
           display: pageSelect.display,
-          displayMobile: pageSelect.displayMobile
+          displayMobile: pageSelect.displayMobile,
+          renderAsLinks: (_a25 = pageSelect.renderAsLinks) != null ? _a25 : false
         },
         labels: optionsValue.value.labels
       };

package/dist/lupaSearch.mjs

@@ -12903,6 +12903,18 @@ const useParamsStore = /* @__PURE__ */ defineStore("params", () => {
     params.value = parseParams(optionsStore.getQueryParamName, url.searchParams);
     searchString.value = url.search;
   };
+  const getPageUrlWithNewParams = ({
+    params: newParams,
+    paramsToRemove,
+    encode: encode2 = true,
+    searchResultsLink: searchResultsLink2
+  }) => {
+    const url = getPageUrl(searchResultsLink2);
+    paramsToRemove = getRemovableParams(url, optionsStore.getQueryParamName, paramsToRemove);
+    removeParams(url, paramsToRemove);
+    newParams.forEach((p2) => appendParam(url, p2, encode2));
+    return url.search;
+  };
   const removeParameters = ({
     paramsToRemove,
     save = true
@@ -13040,6 +13052,7 @@ const useParamsStore = /* @__PURE__ */ defineStore("params", () => {
     sortParams,
     lastChangedParams,
     skipFacetReload,
+    getPageUrlWithNewParams,
     add,
     removeAllFilters,
     removeParameters,
@@ -13514,7 +13527,7 @@ const _hoisted_1$1l = {
 };
 const _hoisted_2$W = { class: "lupa-dialog-content" };
 const _hoisted_3$E = { class: "lupa-listening-text" };
-const _hoisted_4$v = { class: "lupa-mic-button-wrapper" };
+const _hoisted_4$u = { class: "lupa-mic-button-wrapper" };
 const _hoisted_5$l = ["aria-label"];
 const _sfc_main$1z = /* @__PURE__ */ defineComponent({
   __name: "VoiceSearchDialog",
@@ -13628,7 +13641,7 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
           }),
           createElementVNode("div", _hoisted_2$W, [
             createElementVNode("p", _hoisted_3$E, toDisplayString(description.value), 1),
-            createElementVNode("div", _hoisted_4$v, [
+            createElementVNode("div", _hoisted_4$u, [
               createElementVNode("button", {
                 class: normalizeClass(["lupa-mic-button", { recording: unref(isRecording) }]),
                 onClick: handleRecordingButtonClick,
@@ -13653,7 +13666,7 @@ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
 const _hoisted_1$1k = { id: "lupa-search-box-input-container" };
 const _hoisted_2$V = { class: "lupa-input-clear" };
 const _hoisted_3$D = { id: "lupa-search-box-input" };
-const _hoisted_4$u = ["value"];
+const _hoisted_4$t = ["value"];
 const _hoisted_5$k = ["aria-label", "placeholder"];
 const _hoisted_6$8 = {
   key: 0,
@@ -13806,7 +13819,7 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
             "aria-hidden": "true",
             value: showHint.value ? suggestedValue.value.item.suggestion : "",
             disabled: ""
-          }, null, 8, _hoisted_4$u),
+          }, null, 8, _hoisted_4$t),
           withDirectives(createElementVNode("input", mergeProps({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
           }, inputAttributes.value, {
@@ -14056,7 +14069,7 @@ const _hoisted_3$C = {
   class: "lupa-suggestion-facet",
   "data-cy": "lupa-suggestion-facet"
 };
-const _hoisted_4$t = {
+const _hoisted_4$s = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
@@ -14103,7 +14116,7 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
           innerHTML: _ctx.suggestion.displayHighlight
         }, null, 8, _hoisted_1$1g)) : (openBlock(), createElementBlock("div", _hoisted_2$T, toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$C, [
-          createElementVNode("span", _hoisted_4$t, toDisplayString(facetLabel.value), 1),
+          createElementVNode("span", _hoisted_4$s, toDisplayString(facetLabel.value), 1),
           createElementVNode("span", _hoisted_5$j, toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : createCommentVNode("", true)
       ]);
@@ -23901,7 +23914,7 @@ const _sfc_main$1l = /* @__PURE__ */ defineComponent({
 const _hoisted_1$1a = ["innerHTML"];
 const _hoisted_2$P = { key: 0 };
 const _hoisted_3$B = { key: 1 };
-const _hoisted_4$s = { class: "lupa-search-box-custom-label" };
+const _hoisted_4$r = { class: "lupa-search-box-custom-label" };
 const _hoisted_5$i = { class: "lupa-search-box-custom-text" };
 const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductCustom",
@@ -23934,7 +23947,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
         class: [className.value, "lupa-search-box-product-custom"]
       }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$P, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$B, [
-          createElementVNode("div", _hoisted_4$s, toDisplayString(label.value), 1),
+          createElementVNode("div", _hoisted_4$r, toDisplayString(label.value), 1),
           createElementVNode("div", _hoisted_5$i, toDisplayString(text.value), 1)
         ]))
       ], 16));
@@ -24285,7 +24298,7 @@ const useSearchResultStore = /* @__PURE__ */ defineStore("searchResult", () => {
 const _hoisted_1$18 = { class: "lupa-search-box-add-to-cart-wrapper" };
 const _hoisted_2$O = { class: "lupa-search-box-product-addtocart" };
 const _hoisted_3$A = ["disabled"];
-const _hoisted_4$r = ["href"];
+const _hoisted_4$q = ["href"];
 const _hoisted_5$h = ["disabled"];
 const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductAddToCart",
@@ -24341,7 +24354,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
             "data-cy": "lupa-add-to-cart",
             disabled: !inStockValue.value || loading.value
           }, _ctx.dynamicAttributes, { onClick: handleClick }), [
-            createElementVNode("a", { href: _ctx.link }, toDisplayString(label.value), 9, _hoisted_4$r)
+            createElementVNode("a", { href: _ctx.link }, toDisplayString(label.value), 9, _hoisted_4$q)
           ], 16, _hoisted_3$A)) : (openBlock(), createElementBlock("button", mergeProps({
             key: 1,
             onClick: withModifiers(handleClick, ["stop", "prevent"]),
@@ -24461,7 +24474,7 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValue
 const _hoisted_1$16 = { class: "lupa-badge-title" };
 const _hoisted_2$N = ["src"];
 const _hoisted_3$z = { key: 1 };
-const _hoisted_4$q = {
+const _hoisted_4$p = {
   key: 0,
   class: "lupa-badge-full-text"
 };
@@ -24505,7 +24518,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
           }, null, 8, _hoisted_2$N)) : createCommentVNode("", true),
           hasTitleText.value && showTitle.value ? (openBlock(), createElementBlock("span", _hoisted_3$z, toDisplayString(_ctx.badge.titleText), 1)) : createCommentVNode("", true)
         ]),
-        hasAdditionalText.value ? (openBlock(), createElementBlock("span", _hoisted_4$q, toDisplayString(_ctx.badge.additionalText), 1)) : createCommentVNode("", true)
+        hasAdditionalText.value ? (openBlock(), createElementBlock("span", _hoisted_4$p, toDisplayString(_ctx.badge.additionalText), 1)) : createCommentVNode("", true)
       ], 6);
     };
   }
@@ -25473,7 +25486,7 @@ const _hoisted_3$x = {
   key: 0,
   class: "lupa-panel-title lupa-panel-title-top-results"
 };
-const _hoisted_4$p = {
+const _hoisted_4$o = {
   key: 1,
   class: "lupa-panel-title"
 };
@@ -25669,7 +25682,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValue
                 "data-cy": "lupa-panel-" + panel.type + "-index"
               }, [
                 ((_a25 = panel.labels) == null ? void 0 : _a25.topResultsTitle) && showTopResultsPanelTitle(panel.queryKey) ? (openBlock(), createElementBlock("div", _hoisted_3$x, toDisplayString((_b25 = panel.labels) == null ? void 0 : _b25.topResultsTitle), 1)) : createCommentVNode("", true),
-                ((_c = panel.labels) == null ? void 0 : _c.title) && showPanelTitle(panel) ? (openBlock(), createElementBlock("div", _hoisted_4$p, toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : createCommentVNode("", true),
+                ((_c = panel.labels) == null ? void 0 : _c.title) && showPanelTitle(panel) ? (openBlock(), createElementBlock("div", _hoisted_4$o, toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : createCommentVNode("", true),
                 panel.queryKey && canShowPanel(panel) ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
                   key: 2,
                   panel,
@@ -26183,7 +26196,7 @@ const _hoisted_3$w = {
   key: 1,
   "data-cy": "did-you-mean-label"
 };
-const _hoisted_4$o = { key: 1 };
+const _hoisted_4$n = { key: 1 };
 const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsDidYouMean",
   props: {
@@ -26234,7 +26247,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
                 class: "lupa-did-you-mean lupa-highlighted-search-text",
                 "data-cy": "did-you-mean-value",
                 onClick: _cache[0] || (_cache[0] = ($event) => goToResults({ searchText: didYouMeanValue.value }))
-              }, toDisplayString(didYouMeanValue.value) + " ", 1)) : (openBlock(), createElementBlock("span", _hoisted_4$o, toDisplayString(label) + " ", 1))
+              }, toDisplayString(didYouMeanValue.value) + " ", 1)) : (openBlock(), createElementBlock("span", _hoisted_4$n, toDisplayString(label) + " ", 1))
             ]);
           }), 128))
         ])) : createCommentVNode("", true)
@@ -26284,7 +26297,7 @@ const _hoisted_3$v = {
   key: 1,
   class: "lupa-results-total-count"
 };
-const _hoisted_4$n = { class: "lupa-results-total-count-number" };
+const _hoisted_4$m = { class: "lupa-results-total-count-number" };
 const _hoisted_5$f = ["innerHTML"];
 const _sfc_main$10 = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsTitle",
@@ -26334,7 +26347,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
           queryText.value && !searchResultsTitleTemplate.value ? (openBlock(), createElementBlock("span", _hoisted_2$G, "'" + toDisplayString(queryText.value) + "'", 1)) : createCommentVNode("", true),
           showProductCount.value ? (openBlock(), createElementBlock("span", _hoisted_3$v, [
             createTextVNode("(" + toDisplayString(searchResultsCountLabel.value), 1),
-            createElementVNode("span", _hoisted_4$n, toDisplayString(unref(totalItems)), 1),
+            createElementVNode("span", _hoisted_4$m, toDisplayString(unref(totalItems)), 1),
             _cache[0] || (_cache[0] = createTextVNode(")"))
           ])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
@@ -26416,7 +26429,7 @@ const _hoisted_3$u = {
   key: 0,
   class: "filter-values"
 };
-const _hoisted_4$m = { class: "lupa-current-filter-list" };
+const _hoisted_4$l = { class: "lupa-current-filter-list" };
 const _sfc_main$_ = /* @__PURE__ */ defineComponent({
   __name: "CurrentFilters",
   props: {
@@ -26508,7 +26521,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
           }, null, 2)) : createCommentVNode("", true)
         ]),
         !_ctx.expandable || isOpen.value ? (openBlock(), createElementBlock("div", _hoisted_3$u, [
-          createElementVNode("div", _hoisted_4$m, [
+          createElementVNode("div", _hoisted_4$l, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(currentDisplayFilters.value, (filter) => {
               return openBlock(), createBlock(_sfc_main$$, {
                 key: filter.key + "_" + filter.value,
@@ -26577,7 +26590,7 @@ const _hoisted_1$R = {
 };
 const _hoisted_2$D = { class: "lupa-category-back" };
 const _hoisted_3$t = ["href"];
-const _hoisted_4$l = ["href"];
+const _hoisted_4$k = ["href"];
 const _hoisted_5$e = { class: "lupa-child-category-list" };
 const _sfc_main$Y = /* @__PURE__ */ defineComponent({
   __name: "CategoryFilter",
@@ -26684,7 +26697,7 @@ const _sfc_main$Y = /* @__PURE__ */ defineComponent({
             href: parentUrlLink.value,
             class: normalizeClass({ "lupa-title-category": !hasBackButton.value }),
             onClick: handleNavigationParent
-          }, toDisplayString(parentTitle.value), 11, _hoisted_4$l)
+          }, toDisplayString(parentTitle.value), 11, _hoisted_4$k)
         ], 2),
         createElementVNode("div", _hoisted_5$e, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(categoryChildren.value, (child) => {
@@ -26705,7 +26718,7 @@ const _hoisted_1$Q = {
 };
 const _hoisted_2$C = ["placeholder"];
 const _hoisted_3$s = { class: "lupa-terms-list" };
-const _hoisted_4$k = ["onClick"];
+const _hoisted_4$j = ["onClick"];
 const _hoisted_5$d = { class: "lupa-term-checkbox-wrapper" };
 const _hoisted_6$7 = { class: "lupa-term-label" };
 const _hoisted_7$4 = {
@@ -26837,7 +26850,7 @@ const _sfc_main$X = /* @__PURE__ */ defineComponent({
                 createElementVNode("span", _hoisted_6$7, toDisplayString(getItemLabel(item)), 1),
                 _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_7$4, "(" + toDisplayString(item.count) + ")", 1)) : createCommentVNode("", true)
               ], 2)
-            ], 10, _hoisted_4$k);
+            ], 10, _hoisted_4$j);
           }), 128))
         ]),
         displayShowMore.value ? (openBlock(), createElementBlock("div", {
@@ -27754,7 +27767,7 @@ const _hoisted_3$r = {
   key: 1,
   class: "lupa-stats-facet-summary-input"
 };
-const _hoisted_4$j = { class: "lupa-stats-from" };
+const _hoisted_4$i = { class: "lupa-stats-from" };
 const _hoisted_5$c = {
   key: 0,
   class: "lupa-stats-range-label"
@@ -27992,7 +28005,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$P, [
         !isInputVisible.value ? (openBlock(), createElementBlock("div", _hoisted_2$B, toDisplayString(statsSummary.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$r, [
-          createElementVNode("div", _hoisted_4$j, [
+          createElementVNode("div", _hoisted_4$i, [
             rangeLabelFrom.value ? (openBlock(), createElementBlock("div", _hoisted_5$c, toDisplayString(rangeLabelFrom.value), 1)) : createCommentVNode("", true),
             withDirectives(createElementVNode("input", {
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fromValue.value = $event),
@@ -28061,7 +28074,7 @@ const _hoisted_3$q = {
   key: 0,
   class: "lupa-term-count"
 };
-const _hoisted_4$i = {
+const _hoisted_4$h = {
   key: 0,
   class: "lupa-facet-level"
 };
@@ -28131,7 +28144,7 @@ const _sfc_main$V = /* @__PURE__ */ defineComponent({
             _ctx.options.showDocumentCount ? (openBlock(), createElementBlock("span", _hoisted_3$q, "(" + toDisplayString(_ctx.item.count) + ")", 1)) : createCommentVNode("", true)
           ], 2)
         ]),
-        showChildren.value ? (openBlock(), createElementBlock("div", _hoisted_4$i, [
+        showChildren.value ? (openBlock(), createElementBlock("div", _hoisted_4$h, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(treeItem.value.children, (itemChild) => {
             return openBlock(), createBlock(_component_HierarchyFacetLevel, {
               key: itemChild.title,
@@ -28679,7 +28692,7 @@ const _hoisted_1$I = {
 };
 const _hoisted_2$w = { class: "lupa-mobile-sidebar-content" };
 const _hoisted_3$o = { class: "lupa-sidebar-top" };
-const _hoisted_4$h = { class: "lupa-sidebar-title" };
+const _hoisted_4$g = { class: "lupa-sidebar-title" };
 const _hoisted_5$b = {
   key: 0,
   class: "lupa-sidebar-filter-count"
@@ -28724,7 +28737,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
         }),
         createElementVNode("div", _hoisted_2$w, [
           createElementVNode("div", _hoisted_3$o, [
-            createElementVNode("div", _hoisted_4$h, [
+            createElementVNode("div", _hoisted_4$g, [
               createTextVNode(toDisplayString(sidebarTitle.value) + " ", 1),
               isFilterCountVisible.value ? (openBlock(), createElementBlock("span", _hoisted_5$b, toDisplayString(unref(currentFilterCount)), 1)) : createCommentVNode("", true)
             ]),
@@ -28751,7 +28764,7 @@ const _hoisted_3$n = {
   key: 1,
   class: "lupa-search-results-breadcrumb-text"
 };
-const _hoisted_4$g = { key: 2 };
+const _hoisted_4$f = { key: 2 };
 const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsBreadcrumbs",
   props: {
@@ -28793,7 +28806,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
                 return handleNavigation(e2, (_a26 = breadcrumb == null ? void 0 : breadcrumb.link) != null ? _a26 : "");
               }
             }, toDisplayString(getLabel(breadcrumb.label)), 9, _hoisted_2$v)) : (openBlock(), createElementBlock("span", _hoisted_3$n, toDisplayString(getLabel(breadcrumb.label)), 1)),
-            index < breadcrumbsValue.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$g, toDisplayString((_a25 = breadcrumb.separator) != null ? _a25 : "/"), 1)) : createCommentVNode("", true)
+            index < breadcrumbsValue.value.length - 1 ? (openBlock(), createElementBlock("span", _hoisted_4$f, toDisplayString((_a25 = breadcrumb.separator) != null ? _a25 : "/"), 1)) : createCommentVNode("", true)
           ]);
         }), 128))
       ]);
@@ -28955,8 +28968,7 @@ const _hoisted_2$u = {
   key: 0,
   class: "lupa-page-number-separator"
 };
-const _hoisted_3$m = ["onClick"];
-const _hoisted_4$f = {
+const _hoisted_3$m = {
   key: 0,
   class: "lupa-page-number-separator"
 };
@@ -29023,7 +29035,24 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
         timeout: (_f = (_e = searchResultOptions.value.scrollToResults) == null ? void 0 : _e.timeout) != null ? _f : 500
       };
     });
-    const handlePageChange = (page) => {
+    const tagName = computed(() => {
+      return props.options.renderAsLinks ? "a" : "div";
+    });
+    const getPageUrlWithNewParams = (page) => {
+      return paramStore.getPageUrlWithNewParams({
+        params: [{ name: optionsStore.getQueryParamName(QUERY_PARAMS.PAGE), value: page.toString() }]
+      });
+    };
+    const getHref = (page) => {
+      if (props.options.renderAsLinks) {
+        return getPageUrlWithNewParams(page);
+      }
+      return null;
+    };
+    const handlePageChange = (e2, page) => {
+      if (e2 && props.options.renderAsLinks) {
+        e2.preventDefault();
+      }
       if (page > 0) {
         paramStore.appendParams({
           params: [{ name: optionsStore.getQueryParamName(QUERY_PARAMS.PAGE), value: page.toString() }]
@@ -29037,46 +29066,78 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
+      var _a25;
       return showPagination.value ? (openBlock(), createElementBlock("div", _hoisted_1$D, [
-        showBack.value ? (openBlock(), createElementBlock("div", {
+        showBack.value ? (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
           key: 0,
           class: normalizeClass(firstPageLabel.value === "<" ? "lupa-page-arrow" : "lupa-show-less"),
-          onClick: _cache[0] || (_cache[0] = () => handlePageChange(_ctx.options.selectedPage - 1))
-        }, toDisplayString(firstPageLabel.value), 3)) : createCommentVNode("", true),
+          href: getHref(_ctx.options.selectedPage - 1),
+          onClick: _cache[0] || (_cache[0] = (e2) => handlePageChange(e2, _ctx.options.selectedPage - 1))
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(firstPageLabel.value), 1)
+          ]),
+          _: 1
+        }, 8, ["class", "href"])) : createCommentVNode("", true),
         showFirstPage.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          createElementVNode("div", {
+          (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
+            href: getHref(1),
             class: "lupa-page-number lupa-page-number-first",
-            onClick: _cache[1] || (_cache[1] = () => handlePageChange(1))
-          }, " 1 "),
+            onClick: _cache[1] || (_cache[1] = (e2) => handlePageChange(e2, 1))
+          }, {
+            default: withCtx(() => _cache[4] || (_cache[4] = [
+              createTextVNode(" 1 ")
+            ])),
+            _: 1,
+            __: [4]
+          }, 8, ["href"])),
           showFirstPageSeparator.value ? (openBlock(), createElementBlock("div", _hoisted_2$u, "...")) : createCommentVNode("", true)
         ], 64)) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(pages.value, (page) => {
-          return openBlock(), createElementBlock("div", {
+          return openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
             key: page,
-            onClick: () => handlePageChange(page),
+            href: getHref(page),
+            onClick: (e2) => handlePageChange(e2, page),
             class: normalizeClass([
               "lupa-page-number",
               page === _ctx.options.selectedPage ? "lupa-page-number-selected" : ""
             ]),
             "data-cy": "lupa-page-number"
-          }, toDisplayString(page), 11, _hoisted_3$m);
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(page), 1)
+            ]),
+            _: 2
+          }, 1032, ["href", "onClick", "class"]);
         }), 128)),
         showLastPage.value ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          showLastPageSeparator.value ? (openBlock(), createElementBlock("div", _hoisted_4$f, "...")) : createCommentVNode("", true),
-          createElementVNode("div", {
+          showLastPageSeparator.value ? (openBlock(), createElementBlock("div", _hoisted_3$m, "...")) : createCommentVNode("", true),
+          (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
+            href: getHref((_a25 = lastPage.value) != null ? _a25 : 1),
             class: "lupa-page-number lupa-page-number-last",
-            onClick: _cache[2] || (_cache[2] = () => {
-              var _a25;
-              return handlePageChange((_a25 = lastPage.value) != null ? _a25 : 1);
+            onClick: _cache[2] || (_cache[2] = (e2) => {
+              var _a26;
+              return handlePageChange(e2, (_a26 = lastPage.value) != null ? _a26 : 1);
             })
-          }, toDisplayString(lastPage.value), 1)
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(lastPage.value), 1)
+            ]),
+            _: 1
+          }, 8, ["href"]))
         ], 64)) : createCommentVNode("", true),
-        _ctx.options.selectedPage < _ctx.options.count ? (openBlock(), createElementBlock("div", {
+        _ctx.options.selectedPage < _ctx.options.count ? (openBlock(), createBlock(resolveDynamicComponent(tagName.value), {
           key: 3,
           class: normalizeClass(lastPageLabel.value === ">" ? "lupa-page-arrow" : "lupa-show-more"),
+          href: getHref(_ctx.options.selectedPage + 1),
           "data-cy": "lupa-show-more",
-          onClick: _cache[3] || (_cache[3] = () => handlePageChange(_ctx.options.selectedPage + 1))
-        }, toDisplayString(lastPageLabel.value), 3)) : createCommentVNode("", true)
+          onClick: _cache[3] || (_cache[3] = (e2) => handlePageChange(e2, _ctx.options.selectedPage + 1))
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(lastPageLabel.value), 1)
+          ]),
+          _: 1
+        }, 8, ["class", "href"])) : createCommentVNode("", true)
       ])) : createCommentVNode("", true);
     };
   }
@@ -29310,6 +29371,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
       }
     });
     const paginationOptions = computed(() => {
+      var _a25;
       const pageSelect = optionsValue.value.pagination.pageSelection;
       return {
         pageSize: {
@@ -29320,7 +29382,8 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
           count: getPageCount(searchResult.value.total, limit.value),
           selectedPage: page.value,
           display: pageSelect.display,
-          displayMobile: pageSelect.displayMobile
+          displayMobile: pageSelect.displayMobile,
+          renderAsLinks: (_a25 = pageSelect.renderAsLinks) != null ? _a25 : false
         },
         labels: optionsValue.value.labels
       };

package/dist/stores/params.d.ts

@@ -24,6 +24,15 @@ export declare const useParamsStore: import('pinia').StoreDefinition<"params", P
     }>;
     lastChangedParams: Ref<any[], any[]>;
     skipFacetReload: import('vue').ComputedRef<boolean>;
+    getPageUrlWithNewParams: ({ params: newParams, paramsToRemove, encode, searchResultsLink }: {
+        params: {
+            name: string;
+            value: string;
+        }[];
+        paramsToRemove?: "all" | string[];
+        encode?: boolean;
+        searchResultsLink?: string;
+    }) => string;
     add: (newParams: QueryParams, ssr?: SsrOptions) => {
         params: QueryParams;
     };
@@ -77,6 +86,15 @@ export declare const useParamsStore: import('pinia').StoreDefinition<"params", P
     }>;
     lastChangedParams: Ref<any[], any[]>;
     skipFacetReload: import('vue').ComputedRef<boolean>;
+    getPageUrlWithNewParams: ({ params: newParams, paramsToRemove, encode, searchResultsLink }: {
+        params: {
+            name: string;
+            value: string;
+        }[];
+        paramsToRemove?: "all" | string[];
+        encode?: boolean;
+        searchResultsLink?: string;
+    }) => string;
     add: (newParams: QueryParams, ssr?: SsrOptions) => {
         params: QueryParams;
     };
@@ -130,6 +148,15 @@ export declare const useParamsStore: import('pinia').StoreDefinition<"params", P
     }>;
     lastChangedParams: Ref<any[], any[]>;
     skipFacetReload: import('vue').ComputedRef<boolean>;
+    getPageUrlWithNewParams: ({ params: newParams, paramsToRemove, encode, searchResultsLink }: {
+        params: {
+            name: string;
+            value: string;
+        }[];
+        paramsToRemove?: "all" | string[];
+        encode?: boolean;
+        searchResultsLink?: string;
+    }) => string;
     add: (newParams: QueryParams, ssr?: SsrOptions) => {
         params: QueryParams;
     };
@@ -161,4 +188,4 @@ export declare const useParamsStore: import('pinia').StoreDefinition<"params", P
     setDefaultLimit: (newDefaultLimit: number) => number;
     setSearchResultsLink: (newSearchResultsLink: string) => void;
     setSortSettings: ({ selectedSortKey, previousSortKey }: SortCallbackContext) => void;
-}, "add" | "removeAllFilters" | "removeParameters" | "handleNoResultsFlag" | "goToResults" | "appendParams" | "setDefaultLimit" | "setSearchResultsLink" | "setSortSettings">>;
+}, "add" | "getPageUrlWithNewParams" | "removeAllFilters" | "removeParameters" | "handleNoResultsFlag" | "goToResults" | "appendParams" | "setDefaultLimit" | "setSearchResultsLink" | "setSortSettings">>;

package/dist/types/search-results/PaginationOptions.d.ts

@@ -13,6 +13,7 @@ export type PaginationPageSelect = {
     selectedPage: number;
     display: number;
     displayMobile: number;
+    renderAsLinks?: boolean;
 };
 export type PaginationDisplay = {
     pageSize: boolean;

package/dist/types/search-results/SearchResultsOptions.d.ts

@@ -164,6 +164,7 @@ export type SearchResultsPagination = {
         position: SearchResultsPaginationPosition;
         display: number;
         displayMobile: number;
+        renderAsLinks?: boolean;
     };
 };
 export type SearchResultsPaginationPosition = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getlupa/vue",
-  "version": "0.22.0",
+  "version": "0.22.2",
   "main": "dist/lupaSearch.mjs",
   "module": "dist/lupaSearch.mjs",
   "types": "dist/src/index.d.ts",