@getlupa/client 1.14.3 → 1.14.4

package/dist/lupaSearch.iife.js

@@ -8561,7 +8561,7 @@ var __async = (__this, __arguments, generator) => {
   const _hoisted_1$1d = { id: "lupa-search-box-input-container" };
   const _hoisted_2$S = { class: "lupa-input-clear" };
   const _hoisted_3$B = { id: "lupa-search-box-input" };
-  const _hoisted_4$t = ["value"];
+  const _hoisted_4$s = ["value"];
   const _hoisted_5$k = ["aria-label", "placeholder"];
   const _hoisted_6$a = /* @__PURE__ */ createBaseVNode("span", { class: "lupa-search-submit-icon" }, null, -1);
   const _hoisted_7$7 = [
@@ -8668,7 +8668,7 @@ var __async = (__this, __arguments, generator) => {
               "aria-hidden": "true",
               value: showHint.value ? suggestedValue.value.item.suggestion : "",
               disabled: ""
-            }, null, 8, _hoisted_4$t),
+            }, null, 8, _hoisted_4$s),
             withDirectives(createBaseVNode("input", mergeProps({
               "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
             }, inputAttributes.value, {
@@ -8841,6 +8841,34 @@ var __async = (__this, __arguments, generator) => {
       };
     }
   });
+  const generateGridTemplate = (elements) => {
+    const indexedElements = elements.map((el, index) => __spreadProps2(__spreadValues2({}, el), { index }));
+    if (!indexedElements.length || !indexedElements.every((el) => el.gridArea === "left" || el.gridArea === "right")) {
+      return void 0;
+    }
+    let leftElements = indexedElements.filter((el) => el.gridArea === "left");
+    let rightElements = indexedElements.filter((el) => el.gridArea === "right");
+    if (!leftElements.length && !rightElements.length) {
+      return "";
+    } else if (!leftElements.length) {
+      leftElements = rightElements;
+    } else if (!rightElements.length) {
+      rightElements = leftElements;
+    }
+    const totalRows = Math.max(leftElements.length, rightElements.length);
+    const gridTemplate = [];
+    for (let row = 0; row < totalRows; row++) {
+      const leftIndex = row < leftElements.length ? row : leftElements.length - 1;
+      const rightIndex = row < rightElements.length ? row : rightElements.length - 1;
+      const leftElement = leftElements[leftIndex];
+      const rightElement = rightElements[rightIndex];
+      const leftColumn = `${leftElement.gridArea}${leftElement.index}`;
+      const rightColumn = `${rightElement.gridArea}${rightElement.index}`;
+      const gridRow = `${leftColumn} ${rightColumn}`;
+      gridTemplate.push(`"${gridRow}"`);
+    }
+    return gridTemplate.join(" ");
+  };
   const _hoisted_1$19 = ["innerHTML"];
   const _hoisted_2$Q = {
     key: 1,
@@ -8852,7 +8880,7 @@ var __async = (__this, __arguments, generator) => {
     class: "lupa-suggestion-facet",
     "data-cy": "lupa-suggestion-facet"
   };
-  const _hoisted_4$s = {
+  const _hoisted_4$r = {
     class: "lupa-suggestion-facet-label",
     "data-cy": "lupa-suggestion-facet-label"
   };
@@ -8898,7 +8926,7 @@ var __async = (__this, __arguments, generator) => {
             innerHTML: _ctx.suggestion.displayHighlight
           }, null, 8, _hoisted_1$19)) : (openBlock(), createElementBlock("div", _hoisted_2$Q, toDisplayString(_ctx.suggestion.display), 1)),
           _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$A, [
-            createBaseVNode("span", _hoisted_4$s, toDisplayString(facetLabel.value), 1),
+            createBaseVNode("span", _hoisted_4$r, toDisplayString(facetLabel.value), 1),
             createBaseVNode("span", _hoisted_5$j, toDisplayString(_ctx.suggestion.facet.title), 1)
           ])) : createCommentVNode("", true)
         ]);
@@ -9039,6 +9067,7 @@ var __async = (__this, __arguments, generator) => {
         });
       };
       const getSuggestionsDebounced = debounce$1(getSuggestions, props.debounce);
+      watch(() => props.panel.limit, getSuggestionsDebounced);
       return (_ctx, _cache) => {
         return openBlock(), createBlock(_sfc_main$1h, {
           items: searchResult.value,
@@ -18159,6 +18188,25 @@ and ensure you are accounting for this risk.
         var _a;
         return Boolean((_a = hoverImages.value) == null ? void 0 : _a.length);
       });
+      const widthOverride = computed(() => {
+        var _a, _b;
+        return (_b = (_a = props.options.dimensions) == null ? void 0 : _a.width) != null ? _b : void 0;
+      });
+      const heightOverride = computed(() => {
+        var _a, _b;
+        return (_b = (_a = props.options.dimensions) == null ? void 0 : _a.height) != null ? _b : void 0;
+      });
+      const objectFitOverride = computed(() => {
+        var _a, _b;
+        return (_b = (_a = props.options.dimensions) == null ? void 0 : _a.objectFit) != null ? _b : void 0;
+      });
+      const styleOverride = computed(() => {
+        return {
+          width: widthOverride.value ? `${widthOverride.value}px` : void 0,
+          height: heightOverride.value ? `${heightOverride.value}px` : void 0,
+          objectFit: objectFitOverride.value ? objectFitOverride.value : void 0
+        };
+      });
       const replaceWithPlaceholder = (e2) => {
         replaceImageWithPlaceholder(e2, placeholder.value);
       };
@@ -18223,6 +18271,7 @@ and ensure you are accounting for this risk.
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock("div", {
           class: normalizeClass({ [_ctx.wrapperClass]: Boolean(_ctx.wrapperClass), "lupa-images-hover": isHover.value }),
+          style: normalizeStyle(styleOverride.value),
           onMouseenter: handleMouseEnter,
           onMouseleave: handleMouseLeave
         }, [
@@ -18233,6 +18282,7 @@ and ensure you are accounting for this risk.
             default: withCtx(() => [
               (openBlock(), createElementBlock("img", mergeProps({
                 class: ["lupa-images-hover-image", { [_ctx.imageClass]: true, "lupa-images-hover-image": isHover.value }],
+                style: styleOverride.value,
                 src: finalUrl.value
               }, { alt: imageAlt.value ? imageAlt.value : void 0 }, {
                 onError: replaceWithPlaceholder,
@@ -18243,9 +18293,10 @@ and ensure you are accounting for this risk.
           })) : (openBlock(), createElementBlock("img", mergeProps({
             key: 1,
             class: ["lupa-images-main-image", { [_ctx.imageClass]: true }],
+            style: styleOverride.value,
             src: finalMainImageUrl.value
           }, { alt: imageAlt.value ? imageAlt.value : void 0 }, { onError: replaceWithPlaceholder }), null, 16, _hoisted_2$P))
-        ], 34);
+        ], 38);
       };
     }
   });
@@ -18387,7 +18438,7 @@ and ensure you are accounting for this risk.
   const _hoisted_1$13 = ["innerHTML"];
   const _hoisted_2$M = { key: 0 };
   const _hoisted_3$z = { key: 1 };
-  const _hoisted_4$r = { class: "lupa-search-box-custom-label" };
+  const _hoisted_4$q = { class: "lupa-search-box-custom-label" };
   const _hoisted_5$i = { class: "lupa-search-box-custom-text" };
   const _sfc_main$19 = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductCustom",
@@ -18420,7 +18471,7 @@ and ensure you are accounting for this risk.
           class: [className.value, "lupa-search-box-product-custom"]
         }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
           !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$M, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$z, [
-            createBaseVNode("div", _hoisted_4$r, toDisplayString(label.value), 1),
+            createBaseVNode("div", _hoisted_4$q, toDisplayString(label.value), 1),
             createBaseVNode("div", _hoisted_5$i, toDisplayString(text.value), 1)
           ]))
         ], 16));
@@ -18827,7 +18878,7 @@ and ensure you are accounting for this risk.
   const _hoisted_1$$ = { class: "lupa-badge-title" };
   const _hoisted_2$K = ["src"];
   const _hoisted_3$x = { key: 1 };
-  const _hoisted_4$q = {
+  const _hoisted_4$p = {
     key: 0,
     class: "lupa-badge-full-text"
   };
@@ -18871,7 +18922,7 @@ and ensure you are accounting for this risk.
             }, null, 8, _hoisted_2$K)) : createCommentVNode("", true),
             hasTitleText.value && showTitle.value ? (openBlock(), createElementBlock("span", _hoisted_3$x, toDisplayString(_ctx.badge.titleText), 1)) : createCommentVNode("", true)
           ]),
-          hasAdditionalText.value ? (openBlock(), createElementBlock("span", _hoisted_4$q, toDisplayString(_ctx.badge.additionalText), 1)) : createCommentVNode("", true)
+          hasAdditionalText.value ? (openBlock(), createElementBlock("span", _hoisted_4$p, toDisplayString(_ctx.badge.additionalText), 1)) : createCommentVNode("", true)
         ], 6);
       };
     }
@@ -19095,9 +19146,8 @@ and ensure you are accounting for this risk.
     }
   }));
   const _hoisted_1$V = ["href"];
-  const _hoisted_2$I = { class: "lupa-search-box-product-image-section" };
-  const _hoisted_3$w = { class: "lupa-search-box-product-details-section" };
-  const _hoisted_4$p = {
+  const _hoisted_2$I = { class: "lupa-search-box-product-details-section" };
+  const _hoisted_3$w = {
     key: 0,
     class: "lupa-search-box-product-add-to-cart-section"
   };
@@ -19125,6 +19175,25 @@ and ensure you are accounting for this risk.
         var _a, _b;
         return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter((e2) => e2.type === DocumentElementType.IMAGE)) != null ? _b : [];
       });
+      const mainImageElement = computed(() => {
+        return imageElements.value[0];
+      });
+      const widthOverride = computed(() => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = mainImageElement.value) == null ? void 0 : _a.dimensions) == null ? void 0 : _b.width) != null ? _c : void 0;
+      });
+      const heightOverride = computed(() => {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = mainImageElement.value) == null ? void 0 : _a.dimensions) == null ? void 0 : _b.height) != null ? _c : void 0;
+      });
+      const imageStyleOverride = computed(() => {
+        var _a;
+        return ((_a = mainImageElement.value) == null ? void 0 : _a.dimensions) ? {
+          width: widthOverride.value ? `${widthOverride.value}px` : void 0,
+          height: heightOverride.value ? `${heightOverride.value}px` : void 0,
+          minWidth: widthOverride.value ? `${widthOverride.value + 10}px` : void 0
+        } : {};
+      });
       const detailElements = computed(() => {
         var _a, _b;
         return (_b = (_a = props.panelOptions.elements) == null ? void 0 : _a.filter(
@@ -19163,7 +19232,10 @@ and ensure you are accounting for this risk.
           "data-cy": "lupa-search-box-product",
           onClick: handleClick
         }), [
-          createBaseVNode("div", _hoisted_2$I, [
+          createBaseVNode("div", {
+            class: "lupa-search-box-product-image-section",
+            style: normalizeStyle(imageStyleOverride.value)
+          }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(imageElements.value, (element) => {
               return openBlock(), createBlock(_sfc_main$16, {
                 class: "lupa-search-box-product-element",
@@ -19174,8 +19246,8 @@ and ensure you are accounting for this risk.
                 link: link.value
               }, null, 8, ["item", "element", "labels", "link"]);
             }), 128))
-          ]),
-          createBaseVNode("div", _hoisted_3$w, [
+          ], 4),
+          createBaseVNode("div", _hoisted_2$I, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(detailElements.value, (element) => {
               var _a;
               return openBlock(), createBlock(_sfc_main$16, {
@@ -19199,7 +19271,7 @@ and ensure you are accounting for this risk.
               ]), 1032, ["item", "element", "labels", "link"]);
             }), 128))
           ]),
-          addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$p, [
+          addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_3$w, [
             createVNode(_sfc_main$16, {
               class: "lupa-search-box-product-element",
               item: _ctx.item,
@@ -19457,6 +19529,7 @@ and ensure you are accounting for this risk.
         });
       };
       const getItemsDebounced = debounce$1(getItems, props.debounce);
+      watch(() => props.panel.limit, getItemsDebounced);
       return (_ctx, _cache) => {
         var _a, _b;
         return openBlock(), createBlock(_sfc_main$_, {
@@ -19645,6 +19718,13 @@ and ensure you are accounting for this risk.
       const displayPanels = computed(
         () => props.isSearchContainer ? panels.value.filter((p2) => p2.type === SearchBoxPanelType.SUGGESTION) : panels.value
       );
+      const gridTemplate = computed(() => generateGridTemplate(panels.value));
+      const styleOverrides = computed(() => {
+        return {
+          display: expandOnSinglePanel.value ? "block" : "grid",
+          gridTemplateAreas: gridTemplate.value ? gridTemplate.value : "left right"
+        };
+      });
       const getInput = (panel) => {
         var _a, _b;
         if (panel.type === SearchBoxPanelType.SUGGESTION || !panel.searchBySuggestion) {
@@ -19671,6 +19751,9 @@ and ensure you are accounting for this risk.
         searchBoxStore.resetHighlightIndex();
       });
       const handleNavigation = (e2) => {
+        if (!props.focused) {
+          return;
+        }
         switch (e2.key) {
           case "ArrowDown":
             e2.preventDefault();
@@ -19758,7 +19841,7 @@ and ensure you are accounting for this risk.
             }, toDisplayString(labels.value.closePanel), 1)) : createCommentVNode("", true),
             createBaseVNode("div", {
               class: "lupa-main-panel",
-              style: normalizeStyle(expandOnSinglePanel.value ? { display: "block" } : {}),
+              style: normalizeStyle(styleOverrides.value),
               "data-cy": "lupa-main-panel"
             }, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
@@ -19769,6 +19852,7 @@ and ensure you are accounting for this risk.
                     "lupa-panel-" + panel.type + "-index",
                     panel.customClassName ? panel.customClassName : ""
                   ]),
+                  style: normalizeStyle(panel.gridArea ? { gridArea: `${panel.gridArea}${index}` } : {}),
                   "data-cy": "lupa-panel-" + panel.type + "-index"
                 }, [
                   ((_a2 = panel.labels) == null ? void 0 : _a2.topResultsTitle) && showTopResultsPanelTitle(panel.queryKey) ? (openBlock(), createElementBlock("div", _hoisted_3$v, toDisplayString((_b = panel.labels) == null ? void 0 : _b.topResultsTitle), 1)) : createCommentVNode("", true),
@@ -19794,7 +19878,7 @@ and ensure you are accounting for this risk.
                       key: "0"
                     } : void 0
                   ]), 1064, ["panel", "search-box-options", "options", "debounce", "inputValue", "labels"])) : createCommentVNode("", true)
-                ], 10, _hoisted_2$G);
+                ], 14, _hoisted_2$G);
               }), 128))
             ], 4),
             !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1j, {
@@ -19858,6 +19942,7 @@ and ensure you are accounting for this risk.
       const inputValue = ref("");
       const suggestedValue = ref(defaultSuggestedValue);
       const opened = ref(props.isSearchContainer);
+      const focused = ref(false);
       const searchBoxInput = ref(null);
       const { highlightedDocument } = storeToRefs(searchBoxStore);
       const searchValue = computed(() => {
@@ -19916,6 +20001,9 @@ and ensure you are accounting for this risk.
         const elementClass = (_b = (_a2 = e2.target) == null ? void 0 : _a2.className) != null ? _b : "";
         const hasLupaClass = typeof elementClass.includes == "function" && elementClass.includes("lupa-search-box");
         const isOutsideElement = el && !el.contains(e2.target) && !hasLupaClass;
+        if (isOutsideElement && props.options.keepOpen) {
+          focused.value = false;
+        }
         if (!isOutsideElement || props.options.keepOpen) {
           return;
         }
@@ -19924,11 +20012,12 @@ and ensure you are accounting for this risk.
       };
       const close = () => {
         opened.value = false;
+        focused.value = false;
         suggestedValue.value = defaultSuggestedValue;
       };
       const handleKeyDown = (e2) => {
         var _a2, _b;
-        if (!opened.value) {
+        if (!focused.value) {
           return;
         }
         switch (e2.key) {
@@ -19948,6 +20037,7 @@ and ensure you are accounting for this risk.
       const handleInput = (value) => {
         var _a2;
         opened.value = true;
+        focused.value = true;
         inputValue.value = (_a2 = value == null ? void 0 : value.replace(/\s+$/, "")) != null ? _a2 : "";
         suggestedValue.value = defaultSuggestedValue;
         searchBoxStore.resetHighlightIndex();
@@ -20075,12 +20165,14 @@ and ensure you are accounting for this risk.
           }
         });
       };
+      watch(() => props.options.debounce, handleCurrentValueSearch);
       const resetValues = () => {
         inputValue.value = "";
         suggestedValue.value = defaultSuggestedValue;
       };
       const handleProductClick = () => {
         opened.value = false;
+        focused.value = false;
       };
       const slotProps = (props2) => {
         return __spreadValues2({}, props2);
@@ -20097,15 +20189,17 @@ and ensure you are accounting for this risk.
               ref_key: "searchBoxInput",
               ref: searchBoxInput,
               onInput: handleInput,
-              onFocus: _cache[0] || (_cache[0] = ($event) => opened.value = true),
+              onBlur: _cache[0] || (_cache[0] = ($event) => focused.value = false),
+              onFocus: _cache[1] || (_cache[1] = ($event) => opened.value = true),
               onSearch: handleSearch,
-              onClose: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("close"))
+              onClose: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("close"))
             }, null, 8, ["options", "suggestedValue", "can-close", "emit-input-on-focus"]),
             opened.value || _ctx.isSearchContainer ? (openBlock(), createBlock(_sfc_main$W, {
               key: 0,
               options: panelOptions.value,
               inputValue: inputValue.value,
               isSearchContainer: _ctx.isSearchContainer,
+              focused: focused.value,
               onFetched: handleItemsFetch,
               onItemSelect: handleItemSelect,
               onGoToResults: handleSearch,
@@ -20119,7 +20213,7 @@ and ensure you are accounting for this risk.
                 ]),
                 key: "0"
               } : void 0
-            ]), 1032, ["options", "inputValue", "isSearchContainer"])) : createCommentVNode("", true)
+            ]), 1032, ["options", "inputValue", "isSearchContainer", "focused"])) : createCommentVNode("", true)
           ])
         ]);
       };