@getlupa/client 1.12.0 → 1.12.2

package/dist/lupaSearch.iife.js

@@ -8462,7 +8462,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _hoisted_2$R = { class: "lupa-input-clear" };
   const _hoisted_3$A = { id: "lupa-search-box-input" };
   const _hoisted_4$s = ["value"];
-  const _hoisted_5$h = ["aria-label", "placeholder"];
+  const _hoisted_5$i = ["aria-label", "placeholder"];
   const _hoisted_6$9 = /* @__PURE__ */ createBaseVNode("span", { class: "lupa-search-submit-icon" }, null, -1);
   const _hoisted_7$7 = [
     _hoisted_6$9
@@ -8582,7 +8582,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               placeholder: labels.value.placeholder,
               onInput: handleInput,
               onFocus: handleFocus
-            }), null, 16, _hoisted_5$h), [
+            }), null, 16, _hoisted_5$i), [
               [vModelText, inputValue.value]
             ]),
             _ctx.options.showSubmitButton ? (openBlock(), createElementBlock("button", {
@@ -8756,7 +8756,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     class: "lupa-suggestion-facet-label",
     "data-cy": "lupa-suggestion-facet-label"
   };
-  const _hoisted_5$g = {
+  const _hoisted_5$h = {
     class: "lupa-suggestion-facet-value",
     "data-cy": "lupa-suggestion-facet-value"
   };
@@ -8799,7 +8799,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           }, null, 8, _hoisted_1$1b)) : (openBlock(), createElementBlock("div", _hoisted_2$P, toDisplayString(_ctx.suggestion.display), 1)),
           _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$z, [
             createBaseVNode("span", _hoisted_4$r, toDisplayString(facetLabel.value), 1),
-            createBaseVNode("span", _hoisted_5$g, toDisplayString(_ctx.suggestion.facet.title), 1)
+            createBaseVNode("span", _hoisted_5$h, toDisplayString(_ctx.suggestion.facet.title), 1)
           ])) : createCommentVNode("", true)
         ]);
       };
@@ -9300,7 +9300,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _hoisted_2$M = { key: 0 };
   const _hoisted_3$y = { key: 1 };
   const _hoisted_4$q = { class: "lupa-search-box-custom-label" };
-  const _hoisted_5$f = { class: "lupa-search-box-custom-text" };
+  const _hoisted_5$g = { class: "lupa-search-box-custom-text" };
   const _sfc_main$19 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductCustom",
     props: {
@@ -9333,7 +9333,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
           !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$M, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$y, [
             createBaseVNode("div", _hoisted_4$q, toDisplayString(label.value), 1),
-            createBaseVNode("div", _hoisted_5$f, toDisplayString(text.value), 1)
+            createBaseVNode("div", _hoisted_5$g, toDisplayString(text.value), 1)
           ]))
         ], 16));
       };
@@ -9525,6 +9525,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       if (!width || !grid) {
         return;
       }
+      screenStore.setScreenWidth({ width });
       const { currentScreenWidth } = storeToRefs(screenStore);
       const screenWidth = (_a = currentScreenWidth.value) != null ? _a : "xl";
       columnCount.value = grid.columns[screenWidth];
@@ -10478,7 +10479,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     key: 1,
     class: "lupa-panel-title"
   };
-  const _hoisted_5$e = {
+  const _hoisted_5$f = {
     key: 1,
     id: "lupa-search-box-panel"
   };
@@ -10692,7 +10693,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
               onGoToResults: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("go-to-results"))
             }, null, 8, ["labels", "showTotalCount"])) : createCommentVNode("", true)
-          ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_5$e, [
+          ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_5$f, [
             createVNode(_sfc_main$1k, {
               options: _ctx.options.history,
               history: history.value,
@@ -11186,7 +11187,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     key: 1,
     class: "lupa-results-total-count"
   };
-  const _hoisted_4$l = ["innerHTML"];
+  const _hoisted_4$l = { class: "lupa-results-total-count-number" };
+  const _hoisted_5$e = ["innerHTML"];
   const _sfc_main$S = /* @__PURE__ */ defineComponent({
     __name: "SearchResultsTitle",
     props: {
@@ -11229,7 +11231,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           showSearchTitle.value ? (openBlock(), createElementBlock("h1", _hoisted_1$P, [
             createTextVNode(toDisplayString(_ctx.options.labels.searchResults), 1),
             queryText.value ? (openBlock(), createElementBlock("span", _hoisted_2$C, "'" + toDisplayString(queryText.value) + "'", 1)) : createCommentVNode("", true),
-            showProductCount.value ? (openBlock(), createElementBlock("span", _hoisted_3$s, "(" + toDisplayString(searchResultsCountLabel.value) + toDisplayString(unref(totalItems)) + ")", 1)) : createCommentVNode("", true)
+            showProductCount.value ? (openBlock(), createElementBlock("span", _hoisted_3$s, [
+              createTextVNode("(" + toDisplayString(searchResultsCountLabel.value), 1),
+              createBaseVNode("span", _hoisted_4$l, toDisplayString(unref(totalItems)), 1),
+              createTextVNode(")")
+            ])) : createCommentVNode("", true)
           ])) : createCommentVNode("", true),
           _ctx.showSummary ? (openBlock(), createBlock(_sfc_main$T, {
             key: 1,
@@ -11239,7 +11245,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
             key: 2,
             class: "lupa-result-page-description-top",
             innerHTML: descriptionTop.value
-          }, null, 8, _hoisted_4$l)) : createCommentVNode("", true)
+          }, null, 8, _hoisted_5$e)) : createCommentVNode("", true)
         ]);
       };
     }
@@ -13862,13 +13868,22 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _sfc_main$y = /* @__PURE__ */ defineComponent({
     __name: "SearchResultsPageSize",
     props: {
-      label: {},
+      labels: {},
       options: {}
     },
     setup(__props) {
+      const props = __props;
       const paramsStore = useParamsStore();
       const optionsStore = useOptionsStore();
       const select = ref(null);
+      const prefixLabel = computed(() => {
+        var _a, _b;
+        return (_b = (_a = props.labels) == null ? void 0 : _a.pageSizePrefix) != null ? _b : "";
+      });
+      const label = computed(() => {
+        var _a, _b;
+        return (_b = (_a = props.labels) == null ? void 0 : _a.pageSize) != null ? _b : "";
+      });
       const handleSelect = (e) => {
         const value = e.target.value;
         paramsStore.appendParams({
@@ -13879,17 +13894,17 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock("div", _hoisted_1$v, [
           createBaseVNode("div", _hoisted_2$o, [
-            createBaseVNode("label", _hoisted_3$h, toDisplayString(_ctx.label), 1),
+            createBaseVNode("label", _hoisted_3$h, toDisplayString(label.value), 1),
             createBaseVNode("select", {
               class: "lupa-select-dropdown",
-              "aria-label": _ctx.label,
+              "aria-label": label.value,
               "data-cy": "lupa-page-size-select-dropdown",
               onChange: handleSelect,
               ref_key: "select",
               ref: select
             }, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options.sizes, (option) => {
-                return openBlock(), createElementBlock("option", { key: option }, toDisplayString(option), 1);
+                return openBlock(), createElementBlock("option", { key: option }, toDisplayString(prefixLabel.value) + toDisplayString(option), 1);
               }), 128))
             ], 40, _hoisted_4$c)
           ])
@@ -14126,8 +14141,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
             paginationDisplay.value.pageSize ? (openBlock(), createBlock(_sfc_main$y, {
               key: 1,
               options: paginationOptions.value.pageSize,
-              label: paginationOptions.value.labels.pageSize
-            }, null, 8, ["options", "label"])) : (openBlock(), createElementBlock("div", _hoisted_8)),
+              labels: paginationOptions.value.labels
+            }, null, 8, ["options", "labels"])) : (openBlock(), createElementBlock("div", _hoisted_8)),
             sortOptions.value ? (openBlock(), createBlock(_sfc_main$x, {
               key: 3,
               options: sortOptions.value,
@@ -15555,8 +15570,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       const handleResize = () => {
         const doc2 = document.documentElement;
         doc2.style.setProperty("--lupa-full-height", `${window.innerHeight}px`);
-        searchResultStore.setColumnCount({ width: window.innerWidth, grid: props.options.grid });
         screenStore.setScreenWidth({ width: window.innerWidth });
+        searchResultStore.setColumnCount({ width: window.innerWidth, grid: props.options.grid });
       };
       const handleUrlChange = (params) => {
         var _a;
@@ -28374,7 +28389,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           top: false,
           bottom: true
         },
-        sizes: [10, 20, 25, 50]
+        sizes: [12, 24, 36]
       },
       pageSelection: {
         position: {

package/dist/lupaSearch.js

@@ -8462,7 +8462,7 @@ const _hoisted_1$1f = { id: "lupa-search-box-input-container" };
 const _hoisted_2$R = { class: "lupa-input-clear" };
 const _hoisted_3$A = { id: "lupa-search-box-input" };
 const _hoisted_4$s = ["value"];
-const _hoisted_5$h = ["aria-label", "placeholder"];
+const _hoisted_5$i = ["aria-label", "placeholder"];
 const _hoisted_6$9 = /* @__PURE__ */ createBaseVNode("span", { class: "lupa-search-submit-icon" }, null, -1);
 const _hoisted_7$7 = [
   _hoisted_6$9
@@ -8582,7 +8582,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
             placeholder: labels.value.placeholder,
             onInput: handleInput,
             onFocus: handleFocus
-          }), null, 16, _hoisted_5$h), [
+          }), null, 16, _hoisted_5$i), [
             [vModelText, inputValue.value]
           ]),
           _ctx.options.showSubmitButton ? (openBlock(), createElementBlock("button", {
@@ -8756,7 +8756,7 @@ const _hoisted_4$r = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
-const _hoisted_5$g = {
+const _hoisted_5$h = {
   class: "lupa-suggestion-facet-value",
   "data-cy": "lupa-suggestion-facet-value"
 };
@@ -8799,7 +8799,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
         }, null, 8, _hoisted_1$1b)) : (openBlock(), createElementBlock("div", _hoisted_2$P, toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$z, [
           createBaseVNode("span", _hoisted_4$r, toDisplayString(facetLabel.value), 1),
-          createBaseVNode("span", _hoisted_5$g, toDisplayString(_ctx.suggestion.facet.title), 1)
+          createBaseVNode("span", _hoisted_5$h, toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -9300,7 +9300,7 @@ const _hoisted_1$14 = ["innerHTML"];
 const _hoisted_2$M = { key: 0 };
 const _hoisted_3$y = { key: 1 };
 const _hoisted_4$q = { class: "lupa-search-box-custom-label" };
-const _hoisted_5$f = { class: "lupa-search-box-custom-text" };
+const _hoisted_5$g = { class: "lupa-search-box-custom-text" };
 const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductCustom",
   props: {
@@ -9333,7 +9333,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
       }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$M, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$y, [
           createBaseVNode("div", _hoisted_4$q, toDisplayString(label.value), 1),
-          createBaseVNode("div", _hoisted_5$f, toDisplayString(text.value), 1)
+          createBaseVNode("div", _hoisted_5$g, toDisplayString(text.value), 1)
         ]))
       ], 16));
     };
@@ -9525,6 +9525,7 @@ const useSearchResultStore = defineStore("searchResult", () => {
     if (!width || !grid) {
       return;
     }
+    screenStore.setScreenWidth({ width });
     const { currentScreenWidth } = storeToRefs(screenStore);
     const screenWidth = (_a = currentScreenWidth.value) != null ? _a : "xl";
     columnCount.value = grid.columns[screenWidth];
@@ -10478,7 +10479,7 @@ const _hoisted_4$n = {
   key: 1,
   class: "lupa-panel-title"
 };
-const _hoisted_5$e = {
+const _hoisted_5$f = {
   key: 1,
   id: "lupa-search-box-panel"
 };
@@ -10692,7 +10693,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
             showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
             onGoToResults: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("go-to-results"))
           }, null, 8, ["labels", "showTotalCount"])) : createCommentVNode("", true)
-        ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_5$e, [
+        ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_5$f, [
           createVNode(_sfc_main$1k, {
             options: _ctx.options.history,
             history: history.value,
@@ -11186,7 +11187,8 @@ const _hoisted_3$s = {
   key: 1,
   class: "lupa-results-total-count"
 };
-const _hoisted_4$l = ["innerHTML"];
+const _hoisted_4$l = { class: "lupa-results-total-count-number" };
+const _hoisted_5$e = ["innerHTML"];
 const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsTitle",
   props: {
@@ -11229,7 +11231,11 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
         showSearchTitle.value ? (openBlock(), createElementBlock("h1", _hoisted_1$P, [
           createTextVNode(toDisplayString(_ctx.options.labels.searchResults), 1),
           queryText.value ? (openBlock(), createElementBlock("span", _hoisted_2$C, "'" + toDisplayString(queryText.value) + "'", 1)) : createCommentVNode("", true),
-          showProductCount.value ? (openBlock(), createElementBlock("span", _hoisted_3$s, "(" + toDisplayString(searchResultsCountLabel.value) + toDisplayString(unref(totalItems)) + ")", 1)) : createCommentVNode("", true)
+          showProductCount.value ? (openBlock(), createElementBlock("span", _hoisted_3$s, [
+            createTextVNode("(" + toDisplayString(searchResultsCountLabel.value), 1),
+            createBaseVNode("span", _hoisted_4$l, toDisplayString(unref(totalItems)), 1),
+            createTextVNode(")")
+          ])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
         _ctx.showSummary ? (openBlock(), createBlock(_sfc_main$T, {
           key: 1,
@@ -11239,7 +11245,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
           key: 2,
           class: "lupa-result-page-description-top",
           innerHTML: descriptionTop.value
-        }, null, 8, _hoisted_4$l)) : createCommentVNode("", true)
+        }, null, 8, _hoisted_5$e)) : createCommentVNode("", true)
       ]);
     };
   }
@@ -13862,13 +13868,22 @@ const _hoisted_4$c = ["aria-label"];
 const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsPageSize",
   props: {
-    label: {},
+    labels: {},
     options: {}
   },
   setup(__props) {
+    const props = __props;
     const paramsStore = useParamsStore();
     const optionsStore = useOptionsStore();
     const select = ref(null);
+    const prefixLabel = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.labels) == null ? void 0 : _a.pageSizePrefix) != null ? _b : "";
+    });
+    const label = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.labels) == null ? void 0 : _a.pageSize) != null ? _b : "";
+    });
     const handleSelect = (e) => {
       const value = e.target.value;
       paramsStore.appendParams({
@@ -13879,17 +13894,17 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$v, [
         createBaseVNode("div", _hoisted_2$o, [
-          createBaseVNode("label", _hoisted_3$h, toDisplayString(_ctx.label), 1),
+          createBaseVNode("label", _hoisted_3$h, toDisplayString(label.value), 1),
           createBaseVNode("select", {
             class: "lupa-select-dropdown",
-            "aria-label": _ctx.label,
+            "aria-label": label.value,
             "data-cy": "lupa-page-size-select-dropdown",
             onChange: handleSelect,
             ref_key: "select",
             ref: select
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options.sizes, (option) => {
-              return openBlock(), createElementBlock("option", { key: option }, toDisplayString(option), 1);
+              return openBlock(), createElementBlock("option", { key: option }, toDisplayString(prefixLabel.value) + toDisplayString(option), 1);
             }), 128))
           ], 40, _hoisted_4$c)
         ])
@@ -14126,8 +14141,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           paginationDisplay.value.pageSize ? (openBlock(), createBlock(_sfc_main$y, {
             key: 1,
             options: paginationOptions.value.pageSize,
-            label: paginationOptions.value.labels.pageSize
-          }, null, 8, ["options", "label"])) : (openBlock(), createElementBlock("div", _hoisted_8)),
+            labels: paginationOptions.value.labels
+          }, null, 8, ["options", "labels"])) : (openBlock(), createElementBlock("div", _hoisted_8)),
           sortOptions.value ? (openBlock(), createBlock(_sfc_main$x, {
             key: 3,
             options: sortOptions.value,
@@ -15555,8 +15570,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const handleResize = () => {
       const doc2 = document.documentElement;
       doc2.style.setProperty("--lupa-full-height", `${window.innerHeight}px`);
-      searchResultStore.setColumnCount({ width: window.innerWidth, grid: props.options.grid });
       screenStore.setScreenWidth({ width: window.innerWidth });
+      searchResultStore.setColumnCount({ width: window.innerWidth, grid: props.options.grid });
     };
     const handleUrlChange = (params) => {
       var _a;
@@ -28374,7 +28389,7 @@ const DEFAULT_OPTIONS_RESULTS = {
         top: false,
         bottom: true
       },
-      sizes: [10, 20, 25, 50]
+      sizes: [12, 24, 36]
     },
     pageSelection: {
       position: {

package/dist/lupaSearch.mjs

@@ -8460,7 +8460,7 @@ const _hoisted_1$1f = { id: "lupa-search-box-input-container" };
 const _hoisted_2$R = { class: "lupa-input-clear" };
 const _hoisted_3$A = { id: "lupa-search-box-input" };
 const _hoisted_4$s = ["value"];
-const _hoisted_5$h = ["aria-label", "placeholder"];
+const _hoisted_5$i = ["aria-label", "placeholder"];
 const _hoisted_6$9 = /* @__PURE__ */ createBaseVNode("span", { class: "lupa-search-submit-icon" }, null, -1);
 const _hoisted_7$7 = [
   _hoisted_6$9
@@ -8580,7 +8580,7 @@ const _sfc_main$1n = /* @__PURE__ */ defineComponent({
             placeholder: labels.value.placeholder,
             onInput: handleInput,
             onFocus: handleFocus
-          }), null, 16, _hoisted_5$h), [
+          }), null, 16, _hoisted_5$i), [
             [vModelText, inputValue.value]
           ]),
           _ctx.options.showSubmitButton ? (openBlock(), createElementBlock("button", {
@@ -8754,7 +8754,7 @@ const _hoisted_4$r = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
-const _hoisted_5$g = {
+const _hoisted_5$h = {
   class: "lupa-suggestion-facet-value",
   "data-cy": "lupa-suggestion-facet-value"
 };
@@ -8797,7 +8797,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
         }, null, 8, _hoisted_1$1b)) : (openBlock(), createElementBlock("div", _hoisted_2$P, toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$z, [
           createBaseVNode("span", _hoisted_4$r, toDisplayString(facetLabel.value), 1),
-          createBaseVNode("span", _hoisted_5$g, toDisplayString(_ctx.suggestion.facet.title), 1)
+          createBaseVNode("span", _hoisted_5$h, toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -9298,7 +9298,7 @@ const _hoisted_1$14 = ["innerHTML"];
 const _hoisted_2$M = { key: 0 };
 const _hoisted_3$y = { key: 1 };
 const _hoisted_4$q = { class: "lupa-search-box-custom-label" };
-const _hoisted_5$f = { class: "lupa-search-box-custom-text" };
+const _hoisted_5$g = { class: "lupa-search-box-custom-text" };
 const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductCustom",
   props: {
@@ -9331,7 +9331,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
       }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$M, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$y, [
           createBaseVNode("div", _hoisted_4$q, toDisplayString(label.value), 1),
-          createBaseVNode("div", _hoisted_5$f, toDisplayString(text.value), 1)
+          createBaseVNode("div", _hoisted_5$g, toDisplayString(text.value), 1)
         ]))
       ], 16));
     };
@@ -9523,6 +9523,7 @@ const useSearchResultStore = defineStore("searchResult", () => {
     if (!width || !grid) {
       return;
     }
+    screenStore.setScreenWidth({ width });
     const { currentScreenWidth } = storeToRefs(screenStore);
     const screenWidth = (_a = currentScreenWidth.value) != null ? _a : "xl";
     columnCount.value = grid.columns[screenWidth];
@@ -10476,7 +10477,7 @@ const _hoisted_4$n = {
   key: 1,
   class: "lupa-panel-title"
 };
-const _hoisted_5$e = {
+const _hoisted_5$f = {
   key: 1,
   id: "lupa-search-box-panel"
 };
@@ -10690,7 +10691,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
             showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
             onGoToResults: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("go-to-results"))
           }, null, 8, ["labels", "showTotalCount"])) : createCommentVNode("", true)
-        ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_5$e, [
+        ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_5$f, [
           createVNode(_sfc_main$1k, {
             options: _ctx.options.history,
             history: history.value,
@@ -11184,7 +11185,8 @@ const _hoisted_3$s = {
   key: 1,
   class: "lupa-results-total-count"
 };
-const _hoisted_4$l = ["innerHTML"];
+const _hoisted_4$l = { class: "lupa-results-total-count-number" };
+const _hoisted_5$e = ["innerHTML"];
 const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsTitle",
   props: {
@@ -11227,7 +11229,11 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
         showSearchTitle.value ? (openBlock(), createElementBlock("h1", _hoisted_1$P, [
           createTextVNode(toDisplayString(_ctx.options.labels.searchResults), 1),
           queryText.value ? (openBlock(), createElementBlock("span", _hoisted_2$C, "'" + toDisplayString(queryText.value) + "'", 1)) : createCommentVNode("", true),
-          showProductCount.value ? (openBlock(), createElementBlock("span", _hoisted_3$s, "(" + toDisplayString(searchResultsCountLabel.value) + toDisplayString(unref(totalItems)) + ")", 1)) : createCommentVNode("", true)
+          showProductCount.value ? (openBlock(), createElementBlock("span", _hoisted_3$s, [
+            createTextVNode("(" + toDisplayString(searchResultsCountLabel.value), 1),
+            createBaseVNode("span", _hoisted_4$l, toDisplayString(unref(totalItems)), 1),
+            createTextVNode(")")
+          ])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
         _ctx.showSummary ? (openBlock(), createBlock(_sfc_main$T, {
           key: 1,
@@ -11237,7 +11243,7 @@ const _sfc_main$S = /* @__PURE__ */ defineComponent({
           key: 2,
           class: "lupa-result-page-description-top",
           innerHTML: descriptionTop.value
-        }, null, 8, _hoisted_4$l)) : createCommentVNode("", true)
+        }, null, 8, _hoisted_5$e)) : createCommentVNode("", true)
       ]);
     };
   }
@@ -13860,13 +13866,22 @@ const _hoisted_4$c = ["aria-label"];
 const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "SearchResultsPageSize",
   props: {
-    label: {},
+    labels: {},
     options: {}
   },
   setup(__props) {
+    const props = __props;
     const paramsStore = useParamsStore();
     const optionsStore = useOptionsStore();
     const select = ref(null);
+    const prefixLabel = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.labels) == null ? void 0 : _a.pageSizePrefix) != null ? _b : "";
+    });
+    const label = computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.labels) == null ? void 0 : _a.pageSize) != null ? _b : "";
+    });
     const handleSelect = (e) => {
       const value = e.target.value;
       paramsStore.appendParams({
@@ -13877,17 +13892,17 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$v, [
         createBaseVNode("div", _hoisted_2$o, [
-          createBaseVNode("label", _hoisted_3$h, toDisplayString(_ctx.label), 1),
+          createBaseVNode("label", _hoisted_3$h, toDisplayString(label.value), 1),
           createBaseVNode("select", {
             class: "lupa-select-dropdown",
-            "aria-label": _ctx.label,
+            "aria-label": label.value,
             "data-cy": "lupa-page-size-select-dropdown",
             onChange: handleSelect,
             ref_key: "select",
             ref: select
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options.sizes, (option) => {
-              return openBlock(), createElementBlock("option", { key: option }, toDisplayString(option), 1);
+              return openBlock(), createElementBlock("option", { key: option }, toDisplayString(prefixLabel.value) + toDisplayString(option), 1);
             }), 128))
           ], 40, _hoisted_4$c)
         ])
@@ -14124,8 +14139,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           paginationDisplay.value.pageSize ? (openBlock(), createBlock(_sfc_main$y, {
             key: 1,
             options: paginationOptions.value.pageSize,
-            label: paginationOptions.value.labels.pageSize
-          }, null, 8, ["options", "label"])) : (openBlock(), createElementBlock("div", _hoisted_8)),
+            labels: paginationOptions.value.labels
+          }, null, 8, ["options", "labels"])) : (openBlock(), createElementBlock("div", _hoisted_8)),
           sortOptions.value ? (openBlock(), createBlock(_sfc_main$x, {
             key: 3,
             options: sortOptions.value,
@@ -15553,8 +15568,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const handleResize = () => {
       const doc2 = document.documentElement;
       doc2.style.setProperty("--lupa-full-height", `${window.innerHeight}px`);
-      searchResultStore.setColumnCount({ width: window.innerWidth, grid: props.options.grid });
       screenStore.setScreenWidth({ width: window.innerWidth });
+      searchResultStore.setColumnCount({ width: window.innerWidth, grid: props.options.grid });
     };
     const handleUrlChange = (params) => {
       var _a;
@@ -28372,7 +28387,7 @@ const DEFAULT_OPTIONS_RESULTS = {
         top: false,
         bottom: true
       },
-      sizes: [10, 20, 25, 50]
+      sizes: [12, 24, 36]
     },
     pageSelection: {
       position: {

package/dist/lupaSearch.umd.js

@@ -8464,7 +8464,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _hoisted_2$R = { class: "lupa-input-clear" };
   const _hoisted_3$A = { id: "lupa-search-box-input" };
   const _hoisted_4$s = ["value"];
-  const _hoisted_5$h = ["aria-label", "placeholder"];
+  const _hoisted_5$i = ["aria-label", "placeholder"];
   const _hoisted_6$9 = /* @__PURE__ */ createBaseVNode("span", { class: "lupa-search-submit-icon" }, null, -1);
   const _hoisted_7$7 = [
     _hoisted_6$9
@@ -8584,7 +8584,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               placeholder: labels.value.placeholder,
               onInput: handleInput,
               onFocus: handleFocus
-            }), null, 16, _hoisted_5$h), [
+            }), null, 16, _hoisted_5$i), [
               [vModelText, inputValue.value]
             ]),
             _ctx.options.showSubmitButton ? (openBlock(), createElementBlock("button", {
@@ -8758,7 +8758,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     class: "lupa-suggestion-facet-label",
     "data-cy": "lupa-suggestion-facet-label"
   };
-  const _hoisted_5$g = {
+  const _hoisted_5$h = {
     class: "lupa-suggestion-facet-value",
     "data-cy": "lupa-suggestion-facet-value"
   };
@@ -8801,7 +8801,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           }, null, 8, _hoisted_1$1b)) : (openBlock(), createElementBlock("div", _hoisted_2$P, toDisplayString(_ctx.suggestion.display), 1)),
           _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$z, [
             createBaseVNode("span", _hoisted_4$r, toDisplayString(facetLabel.value), 1),
-            createBaseVNode("span", _hoisted_5$g, toDisplayString(_ctx.suggestion.facet.title), 1)
+            createBaseVNode("span", _hoisted_5$h, toDisplayString(_ctx.suggestion.facet.title), 1)
           ])) : createCommentVNode("", true)
         ]);
       };
@@ -9302,7 +9302,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _hoisted_2$M = { key: 0 };
   const _hoisted_3$y = { key: 1 };
   const _hoisted_4$q = { class: "lupa-search-box-custom-label" };
-  const _hoisted_5$f = { class: "lupa-search-box-custom-text" };
+  const _hoisted_5$g = { class: "lupa-search-box-custom-text" };
   const _sfc_main$19 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductCustom",
     props: {
@@ -9335,7 +9335,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
           !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$M, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$y, [
             createBaseVNode("div", _hoisted_4$q, toDisplayString(label.value), 1),
-            createBaseVNode("div", _hoisted_5$f, toDisplayString(text.value), 1)
+            createBaseVNode("div", _hoisted_5$g, toDisplayString(text.value), 1)
           ]))
         ], 16));
       };
@@ -9527,6 +9527,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       if (!width || !grid) {
         return;
       }
+      screenStore.setScreenWidth({ width });
       const { currentScreenWidth } = storeToRefs(screenStore);
       const screenWidth = (_a = currentScreenWidth.value) != null ? _a : "xl";
       columnCount.value = grid.columns[screenWidth];
@@ -10480,7 +10481,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     key: 1,
     class: "lupa-panel-title"
   };
-  const _hoisted_5$e = {
+  const _hoisted_5$f = {
     key: 1,
     id: "lupa-search-box-panel"
   };
@@ -10694,7 +10695,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
               showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
               onGoToResults: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("go-to-results"))
             }, null, 8, ["labels", "showTotalCount"])) : createCommentVNode("", true)
-          ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_5$e, [
+          ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_5$f, [
             createVNode(_sfc_main$1k, {
               options: _ctx.options.history,
               history: history.value,
@@ -11188,7 +11189,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     key: 1,
     class: "lupa-results-total-count"
   };
-  const _hoisted_4$l = ["innerHTML"];
+  const _hoisted_4$l = { class: "lupa-results-total-count-number" };
+  const _hoisted_5$e = ["innerHTML"];
   const _sfc_main$S = /* @__PURE__ */ defineComponent({
     __name: "SearchResultsTitle",
     props: {
@@ -11231,7 +11233,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           showSearchTitle.value ? (openBlock(), createElementBlock("h1", _hoisted_1$P, [
             createTextVNode(toDisplayString(_ctx.options.labels.searchResults), 1),
             queryText.value ? (openBlock(), createElementBlock("span", _hoisted_2$C, "'" + toDisplayString(queryText.value) + "'", 1)) : createCommentVNode("", true),
-            showProductCount.value ? (openBlock(), createElementBlock("span", _hoisted_3$s, "(" + toDisplayString(searchResultsCountLabel.value) + toDisplayString(unref(totalItems)) + ")", 1)) : createCommentVNode("", true)
+            showProductCount.value ? (openBlock(), createElementBlock("span", _hoisted_3$s, [
+              createTextVNode("(" + toDisplayString(searchResultsCountLabel.value), 1),
+              createBaseVNode("span", _hoisted_4$l, toDisplayString(unref(totalItems)), 1),
+              createTextVNode(")")
+            ])) : createCommentVNode("", true)
           ])) : createCommentVNode("", true),
           _ctx.showSummary ? (openBlock(), createBlock(_sfc_main$T, {
             key: 1,
@@ -11241,7 +11247,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
             key: 2,
             class: "lupa-result-page-description-top",
             innerHTML: descriptionTop.value
-          }, null, 8, _hoisted_4$l)) : createCommentVNode("", true)
+          }, null, 8, _hoisted_5$e)) : createCommentVNode("", true)
         ]);
       };
     }
@@ -13864,13 +13870,22 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const _sfc_main$y = /* @__PURE__ */ defineComponent({
     __name: "SearchResultsPageSize",
     props: {
-      label: {},
+      labels: {},
       options: {}
     },
     setup(__props) {
+      const props = __props;
       const paramsStore = useParamsStore();
       const optionsStore = useOptionsStore();
       const select = ref(null);
+      const prefixLabel = computed(() => {
+        var _a, _b;
+        return (_b = (_a = props.labels) == null ? void 0 : _a.pageSizePrefix) != null ? _b : "";
+      });
+      const label = computed(() => {
+        var _a, _b;
+        return (_b = (_a = props.labels) == null ? void 0 : _a.pageSize) != null ? _b : "";
+      });
       const handleSelect = (e) => {
         const value = e.target.value;
         paramsStore.appendParams({
@@ -13881,17 +13896,17 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock("div", _hoisted_1$v, [
           createBaseVNode("div", _hoisted_2$o, [
-            createBaseVNode("label", _hoisted_3$h, toDisplayString(_ctx.label), 1),
+            createBaseVNode("label", _hoisted_3$h, toDisplayString(label.value), 1),
             createBaseVNode("select", {
               class: "lupa-select-dropdown",
-              "aria-label": _ctx.label,
+              "aria-label": label.value,
               "data-cy": "lupa-page-size-select-dropdown",
               onChange: handleSelect,
               ref_key: "select",
               ref: select
             }, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options.sizes, (option) => {
-                return openBlock(), createElementBlock("option", { key: option }, toDisplayString(option), 1);
+                return openBlock(), createElementBlock("option", { key: option }, toDisplayString(prefixLabel.value) + toDisplayString(option), 1);
               }), 128))
             ], 40, _hoisted_4$c)
           ])
@@ -14128,8 +14143,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
             paginationDisplay.value.pageSize ? (openBlock(), createBlock(_sfc_main$y, {
               key: 1,
               options: paginationOptions.value.pageSize,
-              label: paginationOptions.value.labels.pageSize
-            }, null, 8, ["options", "label"])) : (openBlock(), createElementBlock("div", _hoisted_8)),
+              labels: paginationOptions.value.labels
+            }, null, 8, ["options", "labels"])) : (openBlock(), createElementBlock("div", _hoisted_8)),
             sortOptions.value ? (openBlock(), createBlock(_sfc_main$x, {
               key: 3,
               options: sortOptions.value,
@@ -15557,8 +15572,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       const handleResize = () => {
         const doc2 = document.documentElement;
         doc2.style.setProperty("--lupa-full-height", `${window.innerHeight}px`);
-        searchResultStore.setColumnCount({ width: window.innerWidth, grid: props.options.grid });
         screenStore.setScreenWidth({ width: window.innerWidth });
+        searchResultStore.setColumnCount({ width: window.innerWidth, grid: props.options.grid });
       };
       const handleUrlChange = (params) => {
         var _a;
@@ -28376,7 +28391,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           top: false,
           bottom: true
         },
-        sizes: [10, 20, 25, 50]
+        sizes: [12, 24, 36]
       },
       pageSelection: {
         position: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getlupa/client",
-  "version": "1.12.0",
+  "version": "1.12.2",
   "main": "dist/lupaSearch.js",
   "module": "dist/index.mjs",
   "types": "dist/src/index.d.ts",
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@getlupa/client-sdk": "^1.3.4",
-    "@getlupa/vue": "0.12.0",
+    "@getlupa/vue": "0.12.2",
     "@rushstack/eslint-patch": "^1.3.2",
     "@tsconfig/node18": "^2.0.1",
     "@types/jsdom": "^21.1.1",