@getlupa/client 0.6.0-alpha-20 → 0.6.0-alpha-21

package/dist/cjs/components/product-list/CategoryDescription.vue.d.ts

@@ -2,7 +2,6 @@ import Vue from "vue";
 import { ProductListOptions } from "@/types/product-list/ProductListOptions";
 export default class CategoryDescription extends Vue {
     options: ProductListOptions;
-    get title(): string | undefined;
     get description(): string | undefined;
     get overviewVisible(): boolean;
 }

package/dist/cjs/components/search-results/products/SearchResultsProducts.vue.d.ts

@@ -8,6 +8,7 @@ export default class SearchResultsProducts extends Vue {
     loading: boolean;
     hasResults: boolean;
     currentQueryText: string;
+    isPageEmpty: boolean;
     isMobileSidebarVisible: boolean;
     productCardOptions(): SearchResultsProductCardOptions;
     get similarQueriesLabels(): SearchResultsSimilarQueriesLabels;
@@ -21,4 +22,11 @@ export default class SearchResultsProducts extends Vue {
     page: number;
     get columnSize(): string;
     getProductKey(index: string, product: Document): string;
+    appendParams: ({ params, }: {
+        params: {
+            name: string;
+            value: string;
+        }[];
+    }) => void;
+    goToFirstPage(): void;
 }

package/dist/cjs/constants/development/searchResultsDev.example.const.d.ts

@@ -13,6 +13,8 @@ export declare const SEARCH_RESULTS_CONFIGURATION: {
         priceSeparator: string;
         showMore: string;
         emptyResults: string;
+        noItemsInPage: string;
+        backToFirstPage: string;
         mobileFilterButton: string;
         htmlTitleTemplate: string;
         noResultsSuggestion: string;

package/dist/cjs/constants/global.const.d.ts

@@ -11,4 +11,5 @@ export declare const XL_MIN_WIDTH = 1199;
 export declare const MAX_FACET_VALUES = 5000;
 export declare const CURRENCY_KEY_INDICATOR = "price";
 export declare const DEFAULT_PAGE_SIZE = 12;
+export declare const DEFAULT_PAGE_SIZE_SELECTION: number[];
 export declare const LUPA_ROUTING_EVENT = "lupaRedirect";

package/dist/cjs/index.min.js

@@ -11919,6 +11919,7 @@ const XL_MIN_WIDTH = 1199;
 const MAX_FACET_VALUES = 5000;
 const CURRENCY_KEY_INDICATOR = "price";
 const DEFAULT_PAGE_SIZE = 12;
+const DEFAULT_PAGE_SIZE_SELECTION = [12, 24, 36, 60];
 const LUPA_ROUTING_EVENT = "lupaRedirect";
 
 const formatRange = (filter) => {
@@ -19818,6 +19819,11 @@ let SearchResultsProducts = class SearchResultsProducts extends Vue$1 {
     getProductKey(index, product) {
         return getProductKey(index, product, this.options.idKey);
     }
+    goToFirstPage() {
+        this.appendParams({
+            params: [{ name: QUERY_PARAMS.PAGE, value: "1" }],
+        });
+    }
 };
 __decorate([
     Prop()
@@ -19831,6 +19837,9 @@ __decorate([
 __decorate([
     searchResult$4.Getter("currentQueryText")
 ], SearchResultsProducts.prototype, "currentQueryText", void 0);
+__decorate([
+    searchResult$4.Getter("isPageEmpty")
+], SearchResultsProducts.prototype, "isPageEmpty", void 0);
 __decorate([
     searchResult$4.State((state) => state.isMobileSidebarVisible)
 ], SearchResultsProducts.prototype, "isMobileSidebarVisible", void 0);
@@ -19849,6 +19858,9 @@ __decorate([
 __decorate([
     params$2.Getter("page")
 ], SearchResultsProducts.prototype, "page", void 0);
+__decorate([
+    params$2.Action("appendParams")
+], SearchResultsProducts.prototype, "appendParams", void 0);
 SearchResultsProducts = __decorate([
     Component({
         name: "searchResultsProducts",
@@ -19946,6 +19958,38 @@ var __vue_render__$8 = function () {
               1
             ),
             _vm._v(" "),
+            _vm.isPageEmpty && _vm.options.labels.noItemsInPage
+              ? _c(
+                  "div",
+                  {
+                    staticClass: "lupa-empty-results",
+                    attrs: { "data-cy": "lupa-no-results-in-page" },
+                  },
+                  [
+                    _vm._v(
+                      "\n      " +
+                        _vm._s(_vm.options.labels.noItemsInPage) +
+                        "\n      "
+                    ),
+                    _vm.options.labels.backToFirstPage
+                      ? _c(
+                          "span",
+                          {
+                            staticClass: "lupa-empty-page-action",
+                            on: { click: _vm.goToFirstPage },
+                          },
+                          [
+                            _vm._v(
+                              "\n        " +
+                                _vm._s(_vm.options.labels.backToFirstPage)
+                            ),
+                          ]
+                        )
+                      : _vm._e(),
+                  ]
+                )
+              : _vm._e(),
+            _vm._v(" "),
             _c("SearchResultsToolbar", {
               staticClass: "lupa-toolbar-bottom",
               attrs: { options: _vm.options, "pagination-location": "bottom" },
@@ -20755,17 +20799,13 @@ __vue_render__$3._withStripped = true;
   );
 
 let CategoryDescription = class CategoryDescription extends Vue$1 {
-    get title() {
-        var _a, _b;
-        return (_b = (_a = this.options.categories) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.title;
-    }
     get description() {
         var _a, _b;
         return (_b = (_a = this.options.categories) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.description;
     }
     get overviewVisible() {
         var _a, _b;
-        return Boolean((_b = (_a = this.options.categories) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.title);
+        return Boolean((_b = (_a = this.options.categories) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.description);
     }
 };
 __decorate([
@@ -20791,10 +20831,6 @@ var __vue_render__$2 = function () {
   var _c = _vm._self._c || _h;
   return _vm.overviewVisible
     ? _c("div", { staticClass: "lupa-category-overview" }, [
-        _c("div", { staticClass: "lupa-category-title" }, [
-          _vm._v(_vm._s(_vm.title)),
-        ]),
-        _vm._v(" "),
         _c("div", {
           staticClass: "lupa-category-description",
           domProps: { innerHTML: _vm._s(_vm.description) },
@@ -21662,6 +21698,10 @@ let SearchResultModule = class SearchResultModule extends VuexModule {
             return "xl";
         }
     }
+    get isPageEmpty() {
+        var _a;
+        return (this.hasResults && ((_a = this.searchResult.offset) !== null && _a !== void 0 ? _a : 0) >= this.totalItems);
+    }
     setSidebarVisibility({ visible }) {
         this.isMobileSidebarVisible = visible;
     }
@@ -21974,8 +22014,8 @@ let OptionsModule = class OptionsModule extends VuexModule {
         return (_b = (_a = this.currentResolutionPageSizes) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : DEFAULT_PAGE_SIZE;
     }
     get currentResolutionPageSizes() {
-        var _a, _b, _c;
-        const pageSizes = (_c = (_b = (_a = this.searchResultOptions) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.sizeSelection) === null || _c === void 0 ? void 0 : _c.sizes;
+        var _a, _b, _c, _d;
+        const pageSizes = (_d = (_c = (_b = (_a = this.searchResultOptions) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.sizeSelection) === null || _c === void 0 ? void 0 : _c.sizes) !== null && _d !== void 0 ? _d : DEFAULT_PAGE_SIZE_SELECTION;
         if (Array.isArray(pageSizes)) {
             return pageSizes;
         }

package/dist/cjs/store/modules/searchResult.d.ts

@@ -26,6 +26,7 @@ export default class SearchResultModule extends VuexModule {
     get itemRange(): number[];
     get isMobileWidth(): boolean;
     get currentScreenWidth(): ScreenSize;
+    get isPageEmpty(): boolean;
     setSidebarVisibility({ visible }: {
         visible: boolean;
     }): void;

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

@@ -39,6 +39,8 @@ export declare type SearchResultsOptionLabels = SearchResultsPaginationLabels &
     mobileFilterButton: string;
     htmlTitleTemplate: string;
     outOfStock?: string;
+    noItemsInPage?: string;
+    backToFirstPage?: string;
 };
 export declare type SearchResultsAdditionalPanels = {
     additionalPanels?: SearchResultsAdditionalPanelOptions[];

package/dist/es/components/product-list/CategoryDescription.vue.d.ts

@@ -2,7 +2,6 @@ import Vue from "vue";
 import { ProductListOptions } from "@/types/product-list/ProductListOptions";
 export default class CategoryDescription extends Vue {
     options: ProductListOptions;
-    get title(): string | undefined;
     get description(): string | undefined;
     get overviewVisible(): boolean;
 }

package/dist/es/components/search-results/products/SearchResultsProducts.vue.d.ts

@@ -8,6 +8,7 @@ export default class SearchResultsProducts extends Vue {
     loading: boolean;
     hasResults: boolean;
     currentQueryText: string;
+    isPageEmpty: boolean;
     isMobileSidebarVisible: boolean;
     productCardOptions(): SearchResultsProductCardOptions;
     get similarQueriesLabels(): SearchResultsSimilarQueriesLabels;
@@ -21,4 +22,11 @@ export default class SearchResultsProducts extends Vue {
     page: number;
     get columnSize(): string;
     getProductKey(index: string, product: Document): string;
+    appendParams: ({ params, }: {
+        params: {
+            name: string;
+            value: string;
+        }[];
+    }) => void;
+    goToFirstPage(): void;
 }

package/dist/es/constants/development/searchResultsDev.example.const.d.ts

@@ -13,6 +13,8 @@ export declare const SEARCH_RESULTS_CONFIGURATION: {
         priceSeparator: string;
         showMore: string;
         emptyResults: string;
+        noItemsInPage: string;
+        backToFirstPage: string;
         mobileFilterButton: string;
         htmlTitleTemplate: string;
         noResultsSuggestion: string;

package/dist/es/constants/global.const.d.ts

@@ -11,4 +11,5 @@ export declare const XL_MIN_WIDTH = 1199;
 export declare const MAX_FACET_VALUES = 5000;
 export declare const CURRENCY_KEY_INDICATOR = "price";
 export declare const DEFAULT_PAGE_SIZE = 12;
+export declare const DEFAULT_PAGE_SIZE_SELECTION: number[];
 export declare const LUPA_ROUTING_EVENT = "lupaRedirect";

package/dist/es/index.min.js

@@ -11915,6 +11915,7 @@ const XL_MIN_WIDTH = 1199;
 const MAX_FACET_VALUES = 5000;
 const CURRENCY_KEY_INDICATOR = "price";
 const DEFAULT_PAGE_SIZE = 12;
+const DEFAULT_PAGE_SIZE_SELECTION = [12, 24, 36, 60];
 const LUPA_ROUTING_EVENT = "lupaRedirect";
 
 const formatRange = (filter) => {
@@ -19814,6 +19815,11 @@ let SearchResultsProducts = class SearchResultsProducts extends Vue$1 {
     getProductKey(index, product) {
         return getProductKey(index, product, this.options.idKey);
     }
+    goToFirstPage() {
+        this.appendParams({
+            params: [{ name: QUERY_PARAMS.PAGE, value: "1" }],
+        });
+    }
 };
 __decorate([
     Prop()
@@ -19827,6 +19833,9 @@ __decorate([
 __decorate([
     searchResult$4.Getter("currentQueryText")
 ], SearchResultsProducts.prototype, "currentQueryText", void 0);
+__decorate([
+    searchResult$4.Getter("isPageEmpty")
+], SearchResultsProducts.prototype, "isPageEmpty", void 0);
 __decorate([
     searchResult$4.State((state) => state.isMobileSidebarVisible)
 ], SearchResultsProducts.prototype, "isMobileSidebarVisible", void 0);
@@ -19845,6 +19854,9 @@ __decorate([
 __decorate([
     params$2.Getter("page")
 ], SearchResultsProducts.prototype, "page", void 0);
+__decorate([
+    params$2.Action("appendParams")
+], SearchResultsProducts.prototype, "appendParams", void 0);
 SearchResultsProducts = __decorate([
     Component({
         name: "searchResultsProducts",
@@ -19942,6 +19954,38 @@ var __vue_render__$8 = function () {
               1
             ),
             _vm._v(" "),
+            _vm.isPageEmpty && _vm.options.labels.noItemsInPage
+              ? _c(
+                  "div",
+                  {
+                    staticClass: "lupa-empty-results",
+                    attrs: { "data-cy": "lupa-no-results-in-page" },
+                  },
+                  [
+                    _vm._v(
+                      "\n      " +
+                        _vm._s(_vm.options.labels.noItemsInPage) +
+                        "\n      "
+                    ),
+                    _vm.options.labels.backToFirstPage
+                      ? _c(
+                          "span",
+                          {
+                            staticClass: "lupa-empty-page-action",
+                            on: { click: _vm.goToFirstPage },
+                          },
+                          [
+                            _vm._v(
+                              "\n        " +
+                                _vm._s(_vm.options.labels.backToFirstPage)
+                            ),
+                          ]
+                        )
+                      : _vm._e(),
+                  ]
+                )
+              : _vm._e(),
+            _vm._v(" "),
             _c("SearchResultsToolbar", {
               staticClass: "lupa-toolbar-bottom",
               attrs: { options: _vm.options, "pagination-location": "bottom" },
@@ -20751,17 +20795,13 @@ __vue_render__$3._withStripped = true;
   );
 
 let CategoryDescription = class CategoryDescription extends Vue$1 {
-    get title() {
-        var _a, _b;
-        return (_b = (_a = this.options.categories) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.title;
-    }
     get description() {
         var _a, _b;
         return (_b = (_a = this.options.categories) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.description;
     }
     get overviewVisible() {
         var _a, _b;
-        return Boolean((_b = (_a = this.options.categories) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.title);
+        return Boolean((_b = (_a = this.options.categories) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.description);
     }
 };
 __decorate([
@@ -20787,10 +20827,6 @@ var __vue_render__$2 = function () {
   var _c = _vm._self._c || _h;
   return _vm.overviewVisible
     ? _c("div", { staticClass: "lupa-category-overview" }, [
-        _c("div", { staticClass: "lupa-category-title" }, [
-          _vm._v(_vm._s(_vm.title)),
-        ]),
-        _vm._v(" "),
         _c("div", {
           staticClass: "lupa-category-description",
           domProps: { innerHTML: _vm._s(_vm.description) },
@@ -21658,6 +21694,10 @@ let SearchResultModule = class SearchResultModule extends VuexModule {
             return "xl";
         }
     }
+    get isPageEmpty() {
+        var _a;
+        return (this.hasResults && ((_a = this.searchResult.offset) !== null && _a !== void 0 ? _a : 0) >= this.totalItems);
+    }
     setSidebarVisibility({ visible }) {
         this.isMobileSidebarVisible = visible;
     }
@@ -21970,8 +22010,8 @@ let OptionsModule = class OptionsModule extends VuexModule {
         return (_b = (_a = this.currentResolutionPageSizes) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : DEFAULT_PAGE_SIZE;
     }
     get currentResolutionPageSizes() {
-        var _a, _b, _c;
-        const pageSizes = (_c = (_b = (_a = this.searchResultOptions) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.sizeSelection) === null || _c === void 0 ? void 0 : _c.sizes;
+        var _a, _b, _c, _d;
+        const pageSizes = (_d = (_c = (_b = (_a = this.searchResultOptions) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.sizeSelection) === null || _c === void 0 ? void 0 : _c.sizes) !== null && _d !== void 0 ? _d : DEFAULT_PAGE_SIZE_SELECTION;
         if (Array.isArray(pageSizes)) {
             return pageSizes;
         }

package/dist/es/store/modules/searchResult.d.ts

@@ -26,6 +26,7 @@ export default class SearchResultModule extends VuexModule {
     get itemRange(): number[];
     get isMobileWidth(): boolean;
     get currentScreenWidth(): ScreenSize;
+    get isPageEmpty(): boolean;
     setSidebarVisibility({ visible }: {
         visible: boolean;
     }): void;

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

@@ -39,6 +39,8 @@ export declare type SearchResultsOptionLabels = SearchResultsPaginationLabels &
     mobileFilterButton: string;
     htmlTitleTemplate: string;
     outOfStock?: string;
+    noItemsInPage?: string;
+    backToFirstPage?: string;
 };
 export declare type SearchResultsAdditionalPanels = {
     additionalPanels?: SearchResultsAdditionalPanelOptions[];

package/dist/iife/components/product-list/CategoryDescription.vue.d.ts

@@ -2,7 +2,6 @@ import Vue from "vue";
 import { ProductListOptions } from "@/types/product-list/ProductListOptions";
 export default class CategoryDescription extends Vue {
     options: ProductListOptions;
-    get title(): string | undefined;
     get description(): string | undefined;
     get overviewVisible(): boolean;
 }

package/dist/iife/components/search-results/products/SearchResultsProducts.vue.d.ts

@@ -8,6 +8,7 @@ export default class SearchResultsProducts extends Vue {
     loading: boolean;
     hasResults: boolean;
     currentQueryText: string;
+    isPageEmpty: boolean;
     isMobileSidebarVisible: boolean;
     productCardOptions(): SearchResultsProductCardOptions;
     get similarQueriesLabels(): SearchResultsSimilarQueriesLabels;
@@ -21,4 +22,11 @@ export default class SearchResultsProducts extends Vue {
     page: number;
     get columnSize(): string;
     getProductKey(index: string, product: Document): string;
+    appendParams: ({ params, }: {
+        params: {
+            name: string;
+            value: string;
+        }[];
+    }) => void;
+    goToFirstPage(): void;
 }

package/dist/iife/constants/development/searchResultsDev.example.const.d.ts

@@ -13,6 +13,8 @@ export declare const SEARCH_RESULTS_CONFIGURATION: {
         priceSeparator: string;
         showMore: string;
         emptyResults: string;
+        noItemsInPage: string;
+        backToFirstPage: string;
         mobileFilterButton: string;
         htmlTitleTemplate: string;
         noResultsSuggestion: string;

package/dist/iife/constants/global.const.d.ts

@@ -11,4 +11,5 @@ export declare const XL_MIN_WIDTH = 1199;
 export declare const MAX_FACET_VALUES = 5000;
 export declare const CURRENCY_KEY_INDICATOR = "price";
 export declare const DEFAULT_PAGE_SIZE = 12;
+export declare const DEFAULT_PAGE_SIZE_SELECTION: number[];
 export declare const LUPA_ROUTING_EVENT = "lupaRedirect";