@getlupa/client 0.16.0-alpha-4 → 0.16.0

package/README.md

@@ -76,4 +76,6 @@ For more information about individual components and all available options:
 
 - [Search Results](/docs/components/search-results.md)
 
+- [Recommendations](/docs/components/recommendations.md)
+
 - [Tracing and Analytics](/docs/components/tracking.md)

package/dist/cjs/components/search-box/products/elements/SearchBoxProductCustom.vue.d.ts

@@ -8,4 +8,5 @@ export default class SearchBoxProductCustom extends Vue {
     get className(): string;
     get label(): string | undefined;
     get isHtml(): boolean;
+    handleClick(): Promise<void>;
 }

package/dist/cjs/components/search-box/products/elements/custom/SearchBoxProductCustomHtml.vue.d.ts

@@ -6,4 +6,5 @@ export default class SearchBoxProductCustomHtml extends Vue {
     options: CustomHtmlElement;
     get text(): string;
     get className(): string;
+    handleClick(): Promise<void>;
 }

package/dist/cjs/components/search-results/filters/SearchResultsFilters.vue.d.ts

@@ -3,6 +3,8 @@ import { SearchResultsFilterOptions } from "@/types/search-results/SearchResults
 export default class SearchResultsFilters extends Vue {
     options: SearchResultsFilterOptions;
     expandable: boolean;
+    get desktopFiltersVisible(): boolean;
+    get currentFiltersVisible(): boolean;
     get showCurrentFilters(): boolean;
     fetch(): void;
 }

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

@@ -14,7 +14,10 @@ export default class SearchResultsProducts extends Vue {
     get similarQueriesLabels(): SearchResultsSimilarQueriesLabels;
     get showTopFilters(): boolean;
     get showMobileFilters(): boolean;
+    get currentFilterToolbarVisible(): boolean;
     get currentFilterOptions(): ResultCurrentFilterOptions | undefined;
+    get currentFiltersClass(): string;
+    get desktopFiltersExpanded(): boolean;
     columnCount: number;
     searchResult: SearchQueryResult;
     layout: ResultsLayout;

package/dist/cjs/components/search-results/products/product-card/elements/SearchResultsProductCustom.vue.d.ts

@@ -10,4 +10,5 @@ export default class SearchResultsProductCustom extends Vue {
     get className(): string;
     get label(): string | undefined;
     get isHtml(): boolean;
+    handleClick(): Promise<void>;
 }

package/dist/cjs/components/search-results/products/product-card/elements/custom/SearchResultsProductCustomHtmlElement.vue.d.ts

@@ -6,4 +6,5 @@ export default class SearchResultsProductCustomHtmlElement extends Vue {
     options: CustomHtmlElement;
     get text(): string;
     get className(): string;
+    handleClick(): Promise<void>;
 }

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

@@ -57,6 +57,8 @@ export declare const SEARCH_RESULTS_CONFIGURATION: {
             visibility: {
                 mobileSidebar: boolean;
                 mobileToolbar: boolean;
+                desktopToolbar: boolean;
+                desktopSidebar: boolean;
             };
             labels: {
                 title: string;
@@ -66,6 +68,9 @@ export declare const SEARCH_RESULTS_CONFIGURATION: {
                 showFilterCount: boolean;
                 activeFiltersExpanded: boolean;
             };
+            desktopToolbar: {
+                activeFiltersExpanded: boolean;
+            };
         };
         facets: {
             labels: {

package/dist/cjs/index.min.js

@@ -11779,6 +11779,14 @@ let SearchBoxProductCustom = class SearchBoxProductCustom extends Vue$1 {
         var _a;
         return (_a = this.options.isHtml) !== null && _a !== void 0 ? _a : false;
     }
+    handleClick() {
+        return __awaiter$1(this, void 0, void 0, function* () {
+            if (!this.options.action) {
+                return;
+            }
+            yield this.options.action(this.item);
+        });
+    }
 };
 __decorate([
     Prop()
@@ -11800,23 +11808,36 @@ var __vue_render__$18 = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _vm.isHtml
-    ? _c("div", {
-        class: [_vm.className, "lupa-search-box-product-custom"],
-        domProps: { innerHTML: _vm._s(_vm.text) },
-      })
-    : _c("div", { class: [_vm.className, "lupa-search-box-product-custom"] }, [
-        !_vm.label
-          ? _c("div", [_vm._v("\n    " + _vm._s(_vm.text) + "\n  ")])
-          : _c("div", [
-              _c("div", { staticClass: "lupa-search-box-custom-label" }, [
-                _vm._v(_vm._s(_vm.label)),
-              ]),
-              _vm._v(" "),
-              _c("div", { staticClass: "lupa-search-box-custom-text" }, [
-                _vm._v(_vm._s(_vm.text)),
+    ? _c(
+        "div",
+        _vm._g(
+          {
+            class: [_vm.className, "lupa-search-box-product-custom"],
+            domProps: { innerHTML: _vm._s(_vm.text) },
+          },
+          _vm.options.action ? { click: _vm.handleClick } : {}
+        )
+      )
+    : _c(
+        "div",
+        _vm._g(
+          { class: [_vm.className, "lupa-search-box-product-custom"] },
+          _vm.options.action ? { click: _vm.handleClick } : {}
+        ),
+        [
+          !_vm.label
+            ? _c("div", [_vm._v("\n    " + _vm._s(_vm.text) + "\n  ")])
+            : _c("div", [
+                _c("div", { staticClass: "lupa-search-box-custom-label" }, [
+                  _vm._v(_vm._s(_vm.label)),
+                ]),
+                _vm._v(" "),
+                _c("div", { staticClass: "lupa-search-box-custom-text" }, [
+                  _vm._v(_vm._s(_vm.text)),
+                ]),
               ]),
-            ]),
-      ])
+        ]
+      )
 };
 var __vue_staticRenderFns__$18 = [];
 __vue_render__$18._withStripped = true;
@@ -11857,6 +11878,14 @@ let SearchBoxProductCustomHtml = class SearchBoxProductCustomHtml extends Vue$1
     get className() {
         return this.options.className;
     }
+    handleClick() {
+        return __awaiter$1(this, void 0, void 0, function* () {
+            if (!this.options.action) {
+                return;
+            }
+            yield this.options.action(this.item);
+        });
+    }
 };
 __decorate([
     Prop()
@@ -11879,10 +11908,13 @@ var __vue_render__$17 = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", {
-    class: _vm.className,
-    domProps: { innerHTML: _vm._s(_vm.text) },
-  })
+  return _c(
+    "div",
+    _vm._g(
+      { class: _vm.className, domProps: { innerHTML: _vm._s(_vm.text) } },
+      _vm.options.action ? { click: _vm.handleClick } : {}
+    )
+  )
 };
 var __vue_staticRenderFns__$17 = [];
 __vue_render__$17._withStripped = true;
@@ -33715,11 +33747,18 @@ __vue_render__$L._withStripped = true;
   );
 
 let SearchResultsFilters = class SearchResultsFilters extends Vue$1 {
-    get showCurrentFilters() {
+    get desktopFiltersVisible() {
+        var _a, _b, _c;
+        // Default is true
+        return (_c = (_b = (_a = this.options.currentFilters) === null || _a === void 0 ? void 0 : _a.visibility) === null || _b === void 0 ? void 0 : _b.desktopSidebar) !== null && _c !== void 0 ? _c : true;
+    }
+    get currentFiltersVisible() {
         var _a, _b;
-        return ((_b = (_a = this.options.currentFilters) === null || _a === void 0 ? void 0 : _a.visibility) === null || _b === void 0 ? void 0 : _b.mobileSidebar)
-            ? Boolean(this.options.facets)
-            : false;
+        return (((_b = (_a = this.options.currentFilters) === null || _a === void 0 ? void 0 : _a.visibility) === null || _b === void 0 ? void 0 : _b.mobileSidebar) ||
+            this.desktopFiltersVisible);
+    }
+    get showCurrentFilters() {
+        return this.currentFiltersVisible ? Boolean(this.options.facets) : false;
     }
     fetch() {
         var _a;
@@ -35261,6 +35300,14 @@ let SearchResultsProductCustom = class SearchResultsProductCustom extends Vue$1
         var _a;
         return (_a = this.options.isHtml) !== null && _a !== void 0 ? _a : false;
     }
+    handleClick() {
+        return __awaiter$1(this, void 0, void 0, function* () {
+            if (!this.options.action) {
+                return;
+            }
+            yield this.options.action(this.item);
+        });
+    }
 };
 __decorate([
     Prop()
@@ -35284,23 +35331,33 @@ var __vue_render__$u = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _vm.isHtml
-    ? _c("div", {
-        class: _vm.className,
-        domProps: { innerHTML: _vm._s(_vm.text) },
-      })
-    : _c("div", { class: _vm.className }, [
-        !_vm.label
-          ? _c("div", [_vm._v("\n    " + _vm._s(_vm.text) + "\n  ")])
-          : _c("div", [
-              _c("div", { staticClass: "lupa-search-box-custom-label" }, [
-                _vm._v(_vm._s(_vm.label)),
-              ]),
-              _vm._v(" "),
-              _c("div", { staticClass: "lupa-search-box-custom-text" }, [
-                _vm._v(_vm._s(_vm.text)),
+    ? _c(
+        "div",
+        _vm._g(
+          { class: _vm.className, domProps: { innerHTML: _vm._s(_vm.text) } },
+          _vm.options.action ? { click: _vm.handleClick } : {}
+        )
+      )
+    : _c(
+        "div",
+        _vm._g(
+          { class: _vm.className },
+          _vm.options.action ? { click: _vm.handleClick } : {}
+        ),
+        [
+          !_vm.label
+            ? _c("div", [_vm._v("\n    " + _vm._s(_vm.text) + "\n  ")])
+            : _c("div", [
+                _c("div", { staticClass: "lupa-search-box-custom-label" }, [
+                  _vm._v(_vm._s(_vm.label)),
+                ]),
+                _vm._v(" "),
+                _c("div", { staticClass: "lupa-search-box-custom-text" }, [
+                  _vm._v(_vm._s(_vm.text)),
+                ]),
               ]),
-            ]),
-      ])
+        ]
+      )
 };
 var __vue_staticRenderFns__$u = [];
 __vue_render__$u._withStripped = true;
@@ -35341,6 +35398,14 @@ let SearchResultsProductCustomHtmlElement = class SearchResultsProductCustomHtml
     get className() {
         return this.options.className;
     }
+    handleClick() {
+        return __awaiter$1(this, void 0, void 0, function* () {
+            if (!this.options.action) {
+                return;
+            }
+            yield this.options.action(this.item);
+        });
+    }
 };
 __decorate([
     Prop()
@@ -35363,10 +35428,13 @@ var __vue_render__$t = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", {
-    class: _vm.className,
-    domProps: { innerHTML: _vm._s(_vm.text) },
-  })
+  return _c(
+    "div",
+    _vm._g(
+      { class: _vm.className, domProps: { innerHTML: _vm._s(_vm.text) } },
+      _vm.options.action ? { click: _vm.handleClick } : {}
+    )
+  )
 };
 var __vue_staticRenderFns__$t = [];
 __vue_render__$t._withStripped = true;
@@ -37875,12 +37943,34 @@ let SearchResultsProducts = class SearchResultsProducts extends Vue$1 {
     get showMobileFilters() {
         return this.options.searchTitlePosition !== "search-results-top";
     }
+    get currentFilterToolbarVisible() {
+        var _a, _b, _c, _d, _e, _f;
+        return Boolean(((_c = (_b = (_a = this.options.filters) === null || _a === void 0 ? void 0 : _a.currentFilters) === null || _b === void 0 ? void 0 : _b.visibility) === null || _c === void 0 ? void 0 : _c.mobileToolbar) ||
+            ((_f = (_e = (_d = this.options.filters) === null || _d === void 0 ? void 0 : _d.currentFilters) === null || _e === void 0 ? void 0 : _e.visibility) === null || _f === void 0 ? void 0 : _f.desktopToolbar));
+    }
     get currentFilterOptions() {
-        var _a, _b, _c, _d;
-        return ((_c = (_b = (_a = this.options.filters) === null || _a === void 0 ? void 0 : _a.currentFilters) === null || _b === void 0 ? void 0 : _b.visibility) === null || _c === void 0 ? void 0 : _c.mobileToolbar)
-            ? (_d = this.options.filters) === null || _d === void 0 ? void 0 : _d.currentFilters
+        var _a;
+        return this.currentFilterToolbarVisible
+            ? (_a = this.options.filters) === null || _a === void 0 ? void 0 : _a.currentFilters
             : undefined;
     }
+    get currentFiltersClass() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (!this.currentFilterToolbarVisible) {
+            return "";
+        }
+        if (((_c = (_b = (_a = this.options.filters) === null || _a === void 0 ? void 0 : _a.currentFilters) === null || _b === void 0 ? void 0 : _b.visibility) === null || _c === void 0 ? void 0 : _c.mobileToolbar) &&
+            ((_f = (_e = (_d = this.options.filters) === null || _d === void 0 ? void 0 : _d.currentFilters) === null || _e === void 0 ? void 0 : _e.visibility) === null || _f === void 0 ? void 0 : _f.desktopToolbar)) {
+            return "lupa-toolbar-filters";
+        }
+        return ((_j = (_h = (_g = this.options.filters) === null || _g === void 0 ? void 0 : _g.currentFilters) === null || _h === void 0 ? void 0 : _h.visibility) === null || _j === void 0 ? void 0 : _j.mobileToolbar)
+            ? "lupa-filters-mobile"
+            : "lupa-toolbar-filters-desktop";
+    }
+    get desktopFiltersExpanded() {
+        var _a, _b, _c, _d, _e;
+        return ((_e = (_d = (_c = (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.currentFilters) === null || _c === void 0 ? void 0 : _c.desktopToolbar) === null || _d === void 0 ? void 0 : _d.activeFiltersExpanded) !== null && _e !== void 0 ? _e : false);
+    }
     get columnSize() {
         if (this.layout === ResultsLayoutEnum.LIST) {
             return "width: 100%";
@@ -37981,11 +38071,11 @@ var __vue_render__$c = function () {
             _vm._v(" "),
             _vm.currentFilterOptions
               ? _c("CurrentFilters", {
-                  staticClass: "lupa-filters-mobile",
+                  class: _vm.currentFiltersClass,
                   attrs: {
                     "data-cy": "lupa-search-result-filters-mobile-toolbar",
                     options: _vm.currentFilterOptions,
-                    expandable: true,
+                    expandable: !_vm.desktopFiltersExpanded,
                   },
                 })
               : _vm._e(),
@@ -38740,7 +38830,10 @@ var __vue_render__$8 = function () {
   var _c = _vm._self._c || _h;
   return _c(
     "div",
-    { staticClass: "lupa-search-result-wrapper" },
+    {
+      staticClass: "lupa-search-result-wrapper",
+      class: { "lupa-search-wrapper-no-results": !_vm.hasResults },
+    },
     [
       _vm.isContainer
         ? [

package/dist/cjs/types/DocumentElement.d.ts

@@ -43,6 +43,7 @@ export declare type CustomDocumentElement<T = any> = DocumentElementBase<T> & {
     className: string;
     key: string;
     label?: string;
+    action?: (document: T) => Promise<unknown> | undefined;
 };
 export declare type PriceElement<T = any> = DocumentElementBase<T> & {
     type: DocumentElementType.PRICE;
@@ -85,5 +86,6 @@ export declare type CustomHtmlElement<T = any> = DocumentElementBase<T> & {
     type: DocumentElementType.CUSTOM_HTML;
     html: (document: T) => string;
     className: string;
+    action?: (document: T) => Promise<unknown> | undefined;
 };
 export declare type DocumentElement = ImageDocumentElement | TitleDocumentElement | DescriptionDocumentElement | CustomDocumentElement | PriceElement | RegularPriceDocumentElement | RatingElement | SingleStarRatingElement | AddToCartElement | CustomHtmlElement;

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

@@ -110,13 +110,18 @@ export declare type ResultCurrentFilterOptions = {
         clearAll: string;
     };
     visibility?: {
-        mobileSidebar: boolean;
-        mobileToolbar: boolean;
+        mobileSidebar?: boolean;
+        mobileToolbar?: boolean;
+        desktopSidebar?: boolean;
+        desktopToolbar?: boolean;
     };
     mobileSidebar?: {
         showFilterCount?: boolean;
         activeFiltersExpanded?: boolean;
     };
+    desktopToolbar?: {
+        activeFiltersExpanded?: boolean;
+    };
 };
 export declare type FacetStyle = "sidebar" | "top-dropdown";
 export declare type FacetFilterQuery = {

package/dist/es/components/search-box/products/elements/SearchBoxProductCustom.vue.d.ts

@@ -8,4 +8,5 @@ export default class SearchBoxProductCustom extends Vue {
     get className(): string;
     get label(): string | undefined;
     get isHtml(): boolean;
+    handleClick(): Promise<void>;
 }

package/dist/es/components/search-box/products/elements/custom/SearchBoxProductCustomHtml.vue.d.ts

@@ -6,4 +6,5 @@ export default class SearchBoxProductCustomHtml extends Vue {
     options: CustomHtmlElement;
     get text(): string;
     get className(): string;
+    handleClick(): Promise<void>;
 }

package/dist/es/components/search-results/filters/SearchResultsFilters.vue.d.ts

@@ -3,6 +3,8 @@ import { SearchResultsFilterOptions } from "@/types/search-results/SearchResults
 export default class SearchResultsFilters extends Vue {
     options: SearchResultsFilterOptions;
     expandable: boolean;
+    get desktopFiltersVisible(): boolean;
+    get currentFiltersVisible(): boolean;
     get showCurrentFilters(): boolean;
     fetch(): void;
 }

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

@@ -14,7 +14,10 @@ export default class SearchResultsProducts extends Vue {
     get similarQueriesLabels(): SearchResultsSimilarQueriesLabels;
     get showTopFilters(): boolean;
     get showMobileFilters(): boolean;
+    get currentFilterToolbarVisible(): boolean;
     get currentFilterOptions(): ResultCurrentFilterOptions | undefined;
+    get currentFiltersClass(): string;
+    get desktopFiltersExpanded(): boolean;
     columnCount: number;
     searchResult: SearchQueryResult;
     layout: ResultsLayout;

package/dist/es/components/search-results/products/product-card/elements/SearchResultsProductCustom.vue.d.ts

@@ -10,4 +10,5 @@ export default class SearchResultsProductCustom extends Vue {
     get className(): string;
     get label(): string | undefined;
     get isHtml(): boolean;
+    handleClick(): Promise<void>;
 }

package/dist/es/components/search-results/products/product-card/elements/custom/SearchResultsProductCustomHtmlElement.vue.d.ts

@@ -6,4 +6,5 @@ export default class SearchResultsProductCustomHtmlElement extends Vue {
     options: CustomHtmlElement;
     get text(): string;
     get className(): string;
+    handleClick(): Promise<void>;
 }

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

@@ -57,6 +57,8 @@ export declare const SEARCH_RESULTS_CONFIGURATION: {
             visibility: {
                 mobileSidebar: boolean;
                 mobileToolbar: boolean;
+                desktopToolbar: boolean;
+                desktopSidebar: boolean;
             };
             labels: {
                 title: string;
@@ -66,6 +68,9 @@ export declare const SEARCH_RESULTS_CONFIGURATION: {
                 showFilterCount: boolean;
                 activeFiltersExpanded: boolean;
             };
+            desktopToolbar: {
+                activeFiltersExpanded: boolean;
+            };
         };
         facets: {
             labels: {