@getlupa/client 0.11.0 → 0.12.1

package/dist/cjs/components/common/ProductImage.vue.d.ts

@@ -0,0 +1,17 @@
+import Vue from "vue";
+import { Document } from "@getlupa/client-sdk/Types";
+import { ImageDocumentElement } from "@/types/DocumentElement";
+export default class ProductImage extends Vue {
+    item: Document;
+    options: ImageDocumentElement;
+    wrapperClass: string;
+    imageClass: string;
+    get hasFullImageUrl(): boolean;
+    get rootImageUrl(): string | undefined;
+    get image(): string;
+    get imageUrl(): string;
+    get hasImage(): boolean;
+    get placeholder(): string;
+    get finalUrl(): string;
+    replaceWithPlaceholder(e: Event): void;
+}

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

@@ -4,11 +4,4 @@ import { ImageDocumentElement } from "@/types/DocumentElement";
 export default class SearchBoxProductImage extends Vue {
     item: Document;
     options: ImageDocumentElement;
-    get hasFullImageUrl(): boolean;
-    get rootImageUrl(): string | undefined;
-    get image(): string;
-    get imageUrl(): string;
-    get hasImage(): boolean;
-    get placeholder(): string;
-    replaceWithPlaceholder(e: Event): void;
 }

package/dist/cjs/components/search-box/suggestions/SearchBoxSuggestion.vue.d.ts

@@ -6,5 +6,7 @@ export default class SearchBoxSuggestion extends Vue {
     highlight: boolean[];
     labels: SearchBoxOptionLabels;
     get title(): string;
+    get facetKey(): string;
+    get facetLabel(): string;
     handleSelect(): void;
 }

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

@@ -4,11 +4,4 @@ import { ImageDocumentElement } from "@/types/DocumentElement";
 export default class SearchResultsProductImage extends Vue {
     item: Document;
     options: ImageDocumentElement;
-    get hasFullImageUrl(): boolean;
-    get rootImageUrl(): string | undefined;
-    get image(): string;
-    get imageUrl(): string;
-    get hasImage(): boolean;
-    get placeholder(): string;
-    replaceWithPlaceholder(e: Event): void;
 }

package/dist/cjs/index.min.js

@@ -11029,7 +11029,7 @@ SearchBoxInput = __decorate([
         name: "searchBoxInput",
     })
 ], SearchBoxInput);
-var script$1a = SearchBoxInput;
+var script$1b = SearchBoxInput;
 
 function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
     if (typeof shadowMode !== 'boolean') {
@@ -11160,10 +11160,10 @@ function addStyle(id, css) {
 }
 
 /* script */
-const __vue_script__$1b = script$1a;
+const __vue_script__$1c = script$1b;
 
 /* template */
-var __vue_render__$1b = function () {
+var __vue_render__$1c = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
@@ -11248,34 +11248,34 @@ var __vue_render__$1b = function () {
       : _vm._e(),
   ])
 };
-var __vue_staticRenderFns__$1b = [];
-__vue_render__$1b._withStripped = true;
+var __vue_staticRenderFns__$1c = [];
+__vue_render__$1c._withStripped = true;
 
   /* style */
-  const __vue_inject_styles__$1b = function (inject) {
+  const __vue_inject_styles__$1c = function (inject) {
     if (!inject) return
     inject("data-v-af94f296_0", { source: "\n.lupa-search-box-input-field,\n.lupa-hint {\n  width: 100%;\n}\n.lupa-search-box-input-field {\n  position: relative !important;\n  background: transparent !important;\n}\n.lupa-hint {\n  opacity: 0.5;\n  position: absolute !important;\n  pointer-events: none;\n}\n.lupa-input-clear {\n  display: none;\n}\n", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$1b = undefined;
+  const __vue_scope_id__$1c = undefined;
   /* module identifier */
-  const __vue_module_identifier__$1b = undefined;
+  const __vue_module_identifier__$1c = undefined;
   /* functional template */
-  const __vue_is_functional_template__$1b = false;
+  const __vue_is_functional_template__$1c = false;
   /* style inject SSR */
   
   /* style inject shadow dom */
   
 
   
-  const __vue_component__$1b = /*#__PURE__*/normalizeComponent(
-    { render: __vue_render__$1b, staticRenderFns: __vue_staticRenderFns__$1b },
-    __vue_inject_styles__$1b,
-    __vue_script__$1b,
-    __vue_scope_id__$1b,
-    __vue_is_functional_template__$1b,
-    __vue_module_identifier__$1b,
+  const __vue_component__$1c = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$1c, staticRenderFns: __vue_staticRenderFns__$1c },
+    __vue_inject_styles__$1c,
+    __vue_script__$1c,
+    __vue_scope_id__$1c,
+    __vue_is_functional_template__$1c,
+    __vue_module_identifier__$1c,
     false,
     createInjector,
     undefined,
@@ -11297,7 +11297,7 @@ const debounce = (func, timeout) => {
     };
 };
 
-let SearchBoxProductImage = class SearchBoxProductImage extends Vue$1 {
+let ProductImage = class ProductImage extends Vue$1 {
     get hasFullImageUrl() {
         const imageUrl = this.image;
         return (typeof imageUrl === "string" &&
@@ -11323,6 +11323,12 @@ let SearchBoxProductImage = class SearchBoxProductImage extends Vue$1 {
     get placeholder() {
         return this.options.placeholder;
     }
+    get finalUrl() {
+        if (this.options.customUrl) {
+            return this.options.customUrl(this.item);
+        }
+        return this.hasImage ? this.imageUrl : this.placeholder;
+    }
     replaceWithPlaceholder(e) {
         var _a;
         const targetImage = e === null || e === void 0 ? void 0 : e.target;
@@ -11331,6 +11337,73 @@ let SearchBoxProductImage = class SearchBoxProductImage extends Vue$1 {
         }
     }
 };
+__decorate([
+    Prop()
+], ProductImage.prototype, "item", void 0);
+__decorate([
+    Prop()
+], ProductImage.prototype, "options", void 0);
+__decorate([
+    Prop({ default: "" })
+], ProductImage.prototype, "wrapperClass", void 0);
+__decorate([
+    Prop({ default: "" })
+], ProductImage.prototype, "imageClass", void 0);
+ProductImage = __decorate([
+    Component
+], ProductImage);
+var script$1a = ProductImage;
+
+/* script */
+const __vue_script__$1b = script$1a;
+
+/* template */
+var __vue_render__$1b = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", { class: _vm.wrapperClass }, [
+    _c("img", {
+      class: _vm.imageClass,
+      attrs: { src: _vm.finalUrl },
+      on: { error: _vm.replaceWithPlaceholder },
+    }),
+  ])
+};
+var __vue_staticRenderFns__$1b = [];
+__vue_render__$1b._withStripped = true;
+
+  /* style */
+  const __vue_inject_styles__$1b = undefined;
+  /* scoped */
+  const __vue_scope_id__$1b = undefined;
+  /* module identifier */
+  const __vue_module_identifier__$1b = undefined;
+  /* functional template */
+  const __vue_is_functional_template__$1b = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__$1b = /*#__PURE__*/normalizeComponent(
+    { render: __vue_render__$1b, staticRenderFns: __vue_staticRenderFns__$1b },
+    __vue_inject_styles__$1b,
+    __vue_script__$1b,
+    __vue_scope_id__$1b,
+    __vue_is_functional_template__$1b,
+    __vue_module_identifier__$1b,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+let SearchBoxProductImage = class SearchBoxProductImage extends Vue$1 {
+};
 __decorate([
     Prop()
 ], SearchBoxProductImage.prototype, "item", void 0);
@@ -11338,7 +11411,11 @@ __decorate([
     Prop()
 ], SearchBoxProductImage.prototype, "options", void 0);
 SearchBoxProductImage = __decorate([
-    Component
+    Component({
+        components: {
+            ProductImage: __vue_component__$1b,
+        },
+    })
 ], SearchBoxProductImage);
 var script$19 = SearchBoxProductImage;
 
@@ -11350,13 +11427,14 @@ var __vue_render__$1a = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "lupa-search-box-image-wrapper" }, [
-    _c("img", {
-      staticClass: "lupa-search-box-image",
-      attrs: { src: _vm.hasImage ? _vm.imageUrl : _vm.placeholder },
-      on: { error: _vm.replaceWithPlaceholder },
-    }),
-  ])
+  return _c("ProductImage", {
+    attrs: {
+      item: _vm.item,
+      options: _vm.options,
+      "wrapper-class": "lupa-search-box-image-wrapper",
+      "image-class": "lupa-search-box-image",
+    },
+  })
 };
 var __vue_staticRenderFns__$1a = [];
 __vue_render__$1a._withStripped = true;
@@ -12223,7 +12301,9 @@ const generateResultLink = (link, searchText, facet) => {
     if (!searchText) {
         return link;
     }
-    const facetParam = facet ? `&${FACET_PARAMS_TYPE.TERMS}=${facet.title}` : "";
+    const facetParam = facet
+        ? `&${FACET_PARAMS_TYPE.TERMS}${encodeParam(facet.key)}=${encodeParam(facet.title)}`
+        : "";
     const queryParam = `?${QUERY_PARAMS.QUERY}=${encodeParam(searchText)}`;
     return `${link}${queryParam}${facetParam}`;
 };
@@ -12677,6 +12757,16 @@ let SearchBoxSuggestion = class SearchBoxSuggestion extends Vue$1 {
             ? this.suggestion.displayHighlight
             : this.suggestion.display;
     }
+    get facetKey() {
+        var _a;
+        return ((_a = this.suggestion.facet) === null || _a === void 0 ? void 0 : _a.key) || "";
+    }
+    get facetLabel() {
+        var _a, _b;
+        return (((_b = (_a = this.suggestion.suggestion) === null || _a === void 0 ? void 0 : _a.facetLabels) === null || _b === void 0 ? void 0 : _b[this.facetKey]) ||
+            this.labels.defaultFacetLabel ||
+            this.facetKey);
+    }
     handleSelect() {
         this.$emit("select", {
             suggestion: this.suggestion.suggestion,
@@ -12714,10 +12804,7 @@ var __vue_render__$$ = function () {
     {
       on: {
         click: function ($event) {
-          return _vm.handleSelect({
-            suggestion: _vm.suggestion.suggestion,
-            override: true,
-          })
+          return _vm.handleSelect()
         },
       },
     },
@@ -12751,13 +12838,7 @@ var __vue_render__$$ = function () {
                   staticClass: "lupa-suggestion-facet-label",
                   attrs: { "data-cy": "lupa-suggestion-facet-label" },
                 },
-                [
-                  _vm._v(
-                    _vm._s(
-                      _vm.labels.defaultFacetLabel || _vm.suggestion.facet.key
-                    )
-                  ),
-                ]
+                [_vm._v(_vm._s(_vm.facetLabel))]
               ),
               _vm._v(" "),
               _c(
@@ -31079,7 +31160,7 @@ SearchBox = __decorate([
     Component({
         name: "searchBox",
         components: {
-            SearchBoxInput: __vue_component__$1b,
+            SearchBoxInput: __vue_component__$1c,
             SearchBoxMainPanel: __vue_component__$V,
         },
     })
@@ -34455,38 +34536,6 @@ __vue_render__$z._withStripped = true;
   );
 
 let SearchResultsProductImage = class SearchResultsProductImage extends Vue$1 {
-    get hasFullImageUrl() {
-        const imageUrl = this.image;
-        return (typeof imageUrl === "string" &&
-            (imageUrl.indexOf("http://") === 0 || imageUrl.indexOf("https://") === 0));
-    }
-    get rootImageUrl() {
-        return this.options.baseUrl;
-    }
-    get image() {
-        return this.item[this.options.key];
-    }
-    get imageUrl() {
-        var _a;
-        const imageUrl = this.image;
-        if (this.hasFullImageUrl) {
-            return imageUrl;
-        }
-        return `${(_a = this.rootImageUrl) !== null && _a !== void 0 ? _a : ""}/${imageUrl}`;
-    }
-    get hasImage() {
-        return Boolean(this.hasFullImageUrl || this.image);
-    }
-    get placeholder() {
-        return this.options.placeholder;
-    }
-    replaceWithPlaceholder(e) {
-        var _a;
-        const targetImage = e === null || e === void 0 ? void 0 : e.target;
-        if (targetImage && !((_a = targetImage === null || targetImage === void 0 ? void 0 : targetImage.src) === null || _a === void 0 ? void 0 : _a.includes(this.placeholder))) {
-            targetImage.src = this.placeholder;
-        }
-    }
 };
 __decorate([
     Prop()
@@ -34497,6 +34546,9 @@ __decorate([
 SearchResultsProductImage = __decorate([
     Component({
         name: "searchResultsProductImage",
+        components: {
+            ProductImage: __vue_component__$1b,
+        },
     })
 ], SearchResultsProductImage);
 var script$x = SearchResultsProductImage;
@@ -34509,13 +34561,14 @@ var __vue_render__$y = function () {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("div", { staticClass: "lupa-search-results-image-wrapper" }, [
-    _c("img", {
-      staticClass: "lupa-search-results-image",
-      attrs: { src: _vm.hasImage ? _vm.imageUrl : _vm.placeholder },
-      on: { error: _vm.replaceWithPlaceholder },
-    }),
-  ])
+  return _c("ProductImage", {
+    attrs: {
+      item: _vm.item,
+      options: _vm.options,
+      "wrapper-class": "lupa-search-results-image-wrapper",
+      "image-class": "lupa-search-results-image",
+    },
+  })
 };
 var __vue_staticRenderFns__$y = [];
 __vue_render__$y._withStripped = true;

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

@@ -20,6 +20,7 @@ export declare type ImageDocumentElement<T = any> = DocumentElementBase<T> & {
     placeholder: string;
     baseUrl?: string;
     key: string;
+    customUrl?: (document: T) => string;
 };
 export declare type TitleDocumentElement<T = any> = DocumentElementBase<T> & {
     type: DocumentElementType.TITLE;

package/dist/es/components/common/ProductImage.vue.d.ts

@@ -0,0 +1,17 @@
+import Vue from "vue";
+import { Document } from "@getlupa/client-sdk/Types";
+import { ImageDocumentElement } from "@/types/DocumentElement";
+export default class ProductImage extends Vue {
+    item: Document;
+    options: ImageDocumentElement;
+    wrapperClass: string;
+    imageClass: string;
+    get hasFullImageUrl(): boolean;
+    get rootImageUrl(): string | undefined;
+    get image(): string;
+    get imageUrl(): string;
+    get hasImage(): boolean;
+    get placeholder(): string;
+    get finalUrl(): string;
+    replaceWithPlaceholder(e: Event): void;
+}

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

@@ -4,11 +4,4 @@ import { ImageDocumentElement } from "@/types/DocumentElement";
 export default class SearchBoxProductImage extends Vue {
     item: Document;
     options: ImageDocumentElement;
-    get hasFullImageUrl(): boolean;
-    get rootImageUrl(): string | undefined;
-    get image(): string;
-    get imageUrl(): string;
-    get hasImage(): boolean;
-    get placeholder(): string;
-    replaceWithPlaceholder(e: Event): void;
 }

package/dist/es/components/search-box/suggestions/SearchBoxSuggestion.vue.d.ts

@@ -6,5 +6,7 @@ export default class SearchBoxSuggestion extends Vue {
     highlight: boolean[];
     labels: SearchBoxOptionLabels;
     get title(): string;
+    get facetKey(): string;
+    get facetLabel(): string;
     handleSelect(): void;
 }

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

@@ -4,11 +4,4 @@ import { ImageDocumentElement } from "@/types/DocumentElement";
 export default class SearchResultsProductImage extends Vue {
     item: Document;
     options: ImageDocumentElement;
-    get hasFullImageUrl(): boolean;
-    get rootImageUrl(): string | undefined;
-    get image(): string;
-    get imageUrl(): string;
-    get hasImage(): boolean;
-    get placeholder(): string;
-    replaceWithPlaceholder(e: Event): void;
 }