@getlupa/vue 0.12.0 → 0.12.2

package/dist/lupaSearch.js

@@ -3238,7 +3238,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__ */ vue.createElementVNode("span", { class: "lupa-search-submit-icon" }, null, -1);
 const _hoisted_7$7 = [
   _hoisted_6$9
@@ -3358,7 +3358,7 @@ const _sfc_main$1n = /* @__PURE__ */ vue.defineComponent({
             placeholder: labels.value.placeholder,
             onInput: handleInput,
             onFocus: handleFocus
-          }), null, 16, _hoisted_5$h), [
+          }), null, 16, _hoisted_5$i), [
             [vue.vModelText, inputValue.value]
           ]),
           _ctx.options.showSubmitButton ? (vue.openBlock(), vue.createElementBlock("button", {
@@ -3532,7 +3532,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"
 };
@@ -3575,7 +3575,7 @@ const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
         }, null, 8, _hoisted_1$1b)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$P, vue.toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$z, [
           vue.createElementVNode("span", _hoisted_4$r, vue.toDisplayString(facetLabel.value), 1),
-          vue.createElementVNode("span", _hoisted_5$g, vue.toDisplayString(_ctx.suggestion.facet.title), 1)
+          vue.createElementVNode("span", _hoisted_5$h, vue.toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : vue.createCommentVNode("", true)
       ]);
     };
@@ -4076,7 +4076,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__ */ vue.defineComponent({
   __name: "SearchBoxProductCustom",
   props: {
@@ -4109,7 +4109,7 @@ const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
       }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$M, vue.toDisplayString(text.value), 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$y, [
           vue.createElementVNode("div", _hoisted_4$q, vue.toDisplayString(label.value), 1),
-          vue.createElementVNode("div", _hoisted_5$f, vue.toDisplayString(text.value), 1)
+          vue.createElementVNode("div", _hoisted_5$g, vue.toDisplayString(text.value), 1)
         ]))
       ], 16));
     };
@@ -4301,6 +4301,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];
@@ -5254,7 +5255,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"
 };
@@ -5468,7 +5469,7 @@ const _sfc_main$W = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
             showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
             onGoToResults: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("go-to-results"))
           }, null, 8, ["labels", "showTotalCount"])) : vue.createCommentVNode("", true)
-        ])) : displayHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$e, [
+        ])) : displayHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$f, [
           vue.createVNode(_sfc_main$1k, {
             options: _ctx.options.history,
             history: history.value,
@@ -5978,7 +5979,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__ */ vue.defineComponent({
   __name: "SearchResultsTitle",
   props: {
@@ -6021,7 +6023,11 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
         showSearchTitle.value ? (vue.openBlock(), vue.createElementBlock("h1", _hoisted_1$P, [
           vue.createTextVNode(vue.toDisplayString(_ctx.options.labels.searchResults), 1),
           queryText.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$C, "'" + vue.toDisplayString(queryText.value) + "'", 1)) : vue.createCommentVNode("", true),
-          showProductCount.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$s, "(" + vue.toDisplayString(searchResultsCountLabel.value) + vue.toDisplayString(vue.unref(totalItems)) + ")", 1)) : vue.createCommentVNode("", true)
+          showProductCount.value ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$s, [
+            vue.createTextVNode("(" + vue.toDisplayString(searchResultsCountLabel.value), 1),
+            vue.createElementVNode("span", _hoisted_4$l, vue.toDisplayString(vue.unref(totalItems)), 1),
+            vue.createTextVNode(")")
+          ])) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true),
         _ctx.showSummary ? (vue.openBlock(), vue.createBlock(_sfc_main$T, {
           key: 1,
@@ -6031,7 +6037,7 @@ const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
           key: 2,
           class: "lupa-result-page-description-top",
           innerHTML: descriptionTop.value
-        }, null, 8, _hoisted_4$l)) : vue.createCommentVNode("", true)
+        }, null, 8, _hoisted_5$e)) : vue.createCommentVNode("", true)
       ]);
     };
   }
@@ -8654,13 +8660,22 @@ const _hoisted_4$c = ["aria-label"];
 const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchResultsPageSize",
   props: {
-    label: {},
+    labels: {},
     options: {}
   },
   setup(__props) {
+    const props = __props;
     const paramsStore = useParamsStore();
     const optionsStore = useOptionsStore();
     const select = vue.ref(null);
+    const prefixLabel = vue.computed(() => {
+      var _a, _b;
+      return (_b = (_a = props.labels) == null ? void 0 : _a.pageSizePrefix) != null ? _b : "";
+    });
+    const label = vue.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({
@@ -8671,17 +8686,17 @@ const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$v, [
         vue.createElementVNode("div", _hoisted_2$o, [
-          vue.createElementVNode("label", _hoisted_3$h, vue.toDisplayString(_ctx.label), 1),
+          vue.createElementVNode("label", _hoisted_3$h, vue.toDisplayString(label.value), 1),
           vue.createElementVNode("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
           }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.options.sizes, (option) => {
-              return vue.openBlock(), vue.createElementBlock("option", { key: option }, vue.toDisplayString(option), 1);
+              return vue.openBlock(), vue.createElementBlock("option", { key: option }, vue.toDisplayString(prefixLabel.value) + vue.toDisplayString(option), 1);
             }), 128))
           ], 40, _hoisted_4$c)
         ])
@@ -8918,8 +8933,8 @@ const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
           paginationDisplay.value.pageSize ? (vue.openBlock(), vue.createBlock(_sfc_main$y, {
             key: 1,
             options: paginationOptions.value.pageSize,
-            label: paginationOptions.value.labels.pageSize
-          }, null, 8, ["options", "label"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8)),
+            labels: paginationOptions.value.labels
+          }, null, 8, ["options", "labels"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_8)),
           sortOptions.value ? (vue.openBlock(), vue.createBlock(_sfc_main$x, {
             key: 3,
             options: sortOptions.value,
@@ -10347,8 +10362,8 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     const handleResize = () => {
       const doc = document.documentElement;
       doc.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;

package/dist/lupaSearch.mjs

@@ -3236,7 +3236,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__ */ createElementVNode("span", { class: "lupa-search-submit-icon" }, null, -1);
 const _hoisted_7$7 = [
   _hoisted_6$9
@@ -3356,7 +3356,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", {
@@ -3530,7 +3530,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"
 };
@@ -3573,7 +3573,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, [
           createElementVNode("span", _hoisted_4$r, toDisplayString(facetLabel.value), 1),
-          createElementVNode("span", _hoisted_5$g, toDisplayString(_ctx.suggestion.facet.title), 1)
+          createElementVNode("span", _hoisted_5$h, toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -4074,7 +4074,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: {
@@ -4107,7 +4107,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, [
           createElementVNode("div", _hoisted_4$q, toDisplayString(label.value), 1),
-          createElementVNode("div", _hoisted_5$f, toDisplayString(text.value), 1)
+          createElementVNode("div", _hoisted_5$g, toDisplayString(text.value), 1)
         ]))
       ], 16));
     };
@@ -4299,6 +4299,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];
@@ -5252,7 +5253,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"
 };
@@ -5466,7 +5467,7 @@ const _sfc_main$W = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             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,
@@ -5976,7 +5977,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: {
@@ -6019,7 +6021,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),
+            createElementVNode("span", _hoisted_4$l, toDisplayString(unref(totalItems)), 1),
+            createTextVNode(")")
+          ])) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
         _ctx.showSummary ? (openBlock(), createBlock(_sfc_main$T, {
           key: 1,
@@ -6029,7 +6035,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)
       ]);
     };
   }
@@ -8652,13 +8658,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({
@@ -8669,17 +8684,17 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$v, [
         createElementVNode("div", _hoisted_2$o, [
-          createElementVNode("label", _hoisted_3$h, toDisplayString(_ctx.label), 1),
+          createElementVNode("label", _hoisted_3$h, toDisplayString(label.value), 1),
           createElementVNode("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)
         ])
@@ -8916,8 +8931,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,
@@ -10345,8 +10360,8 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const handleResize = () => {
       const doc = document.documentElement;
       doc.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;

package/dist/src/components/search-results/products/pagination/SearchResultsPageSize.vue.d.ts

@@ -1,8 +1,9 @@
 import type { PropType as __PropType } from 'vue';
 import type { PaginationPageSize } from '../../../../types/search-results/PaginationOptions';
+import type { SearchResultsPaginationLabels } from '../../../../types/search-results/SearchResultsPagination';
 declare const _sfc_main: import("vue").DefineComponent<{
-    label: {
-        type: __PropType<string>;
+    labels: {
+        type: __PropType<SearchResultsPaginationLabels>;
         required: true;
     };
     options: {
@@ -10,8 +11,8 @@ declare const _sfc_main: import("vue").DefineComponent<{
         required: true;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    label: {
-        type: __PropType<string>;
+    labels: {
+        type: __PropType<SearchResultsPaginationLabels>;
         required: true;
     };
     options: {

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

@@ -114,6 +114,7 @@ export type SearchResultsPaginationLabels = {
     pageSize: string;
     showMore: string;
     showLess?: string;
+    pageSizePrefix?: string;
 };
 export type ResponsiveSearchResultPageSizes = {
     xs: number[];
@@ -127,6 +128,9 @@ export type SearchResultsPagination = {
     sizeSelection: {
         sizes: SearchResultPageSizes;
         position: SearchResultsPaginationPosition;
+        labels?: {
+            pageSizePrefix: string;
+        };
     };
     pageSelection: {
         position: SearchResultsPaginationPosition;

package/dist/src/types/search-results/SearchResultsPagination.d.ts

@@ -4,6 +4,7 @@ export type SearchResultsPaginationLabels = {
     showLess?: string;
     itemCount: string;
     filteredItemCount?: string;
+    pageSizePrefix?: string;
 };
 export type SearchResultsPagination = {
     sizeSelection: {

package/package.json

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