@getlupa/client 1.4.0 → 1.4.2

package/dist/lupaSearch.mjs

@@ -7534,6 +7534,10 @@ const useSearchBoxStore = defineStore("searchBox", () => {
       };
     })
   );
+  const hasAnyResults = computed(() => {
+    var _a;
+    return (_a = panelItemCounts.value) == null ? void 0 : _a.some((p2) => p2.count > 0);
+  });
   const totalCount = computed(
     () => {
       var _a, _b;
@@ -7586,6 +7590,7 @@ const useSearchBoxStore = defineStore("searchBox", () => {
         [queryKey]: flattenSuggestions(result.items, (_a = publicQuery.searchText) != null ? _a : "")
       });
       inputValue.value = publicQuery.searchText;
+      emitSearchResultsCallback();
       return {
         suggestions: result.items
       };
@@ -7597,6 +7602,19 @@ const useSearchBoxStore = defineStore("searchBox", () => {
       return { suggestions: void 0 };
     }
   });
+  const emitSearchResultsCallback = () => {
+    var _a;
+    if ((_a = options.value.callbacks) == null ? void 0 : _a.onSearchBoxResults) {
+      options.value.callbacks.onSearchBoxResults({
+        hasAnyResults: hasAnyResults.value,
+        docResults: docResults.value,
+        suggestionResults: suggestionResults.value,
+        totalCount: totalCount.value,
+        panelItemCounts: panelItemCounts.value,
+        inputValue: inputValue.value
+      });
+    }
+  };
   const queryDocuments = (_0) => __async(void 0, [_0], function* ({
     queryKey,
     publicQuery,
@@ -7610,6 +7628,7 @@ const useSearchBoxStore = defineStore("searchBox", () => {
       }
       highlightChange({ action: "clear" });
       docResults.value = __spreadProps2(__spreadValues2({}, docResults.value), { [queryKey]: result });
+      emitSearchResultsCallback();
       return { queryKey, result };
     } catch (err) {
       console.error(err);
@@ -7646,6 +7665,7 @@ const useSearchBoxStore = defineStore("searchBox", () => {
     totalCount,
     highlightedItem,
     highlightedDocument,
+    hasAnyResults,
     querySuggestions,
     queryDocuments,
     highlightChange,
@@ -7654,16 +7674,16 @@ const useSearchBoxStore = defineStore("searchBox", () => {
     resetHighlightIndex
   };
 });
-const _hoisted_1$1a = { id: "lupa-search-box-input-container" };
+const _hoisted_1$1b = { id: "lupa-search-box-input-container" };
 const _hoisted_2$O = { class: "lupa-input-clear" };
 const _hoisted_3$A = { id: "lupa-search-box-input" };
-const _hoisted_4$r = ["value"];
+const _hoisted_4$q = ["value"];
 const _hoisted_5$f = ["placeholder"];
 const _hoisted_6$8 = {
   key: 0,
   class: "lupa-close-label"
 };
-const _sfc_main$1i = /* @__PURE__ */ defineComponent({
+const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxInput",
   props: {
     options: {},
@@ -7740,7 +7760,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     };
     __expose({ focus });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$1a, [
+      return openBlock(), createElementBlock("div", _hoisted_1$1b, [
         createBaseVNode("div", _hoisted_2$O, [
           createBaseVNode("div", {
             class: normalizeClass(["lupa-input-clear-content", { "lupa-input-clear-filled": inputValue.value }]),
@@ -7752,7 +7772,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
             class: "lupa-hint",
             value: showHint.value ? suggestedValue.value.item.suggestion : "",
             disabled: ""
-          }, null, 8, _hoisted_4$r),
+          }, null, 8, _hoisted_4$q),
           withDirectives(createBaseVNode("input", mergeProps({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
           }, inputAttributes.value, {
@@ -7780,7 +7800,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1h = /* @__PURE__ */ defineComponent({
+const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxMoreResults",
   props: {
     labels: {},
@@ -7812,9 +7832,9 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$19 = { class: "lupa-search-box-history-item" };
+const _hoisted_1$1a = { class: "lupa-search-box-history-item" };
 const _hoisted_2$N = { class: "lupa-search-box-history-item-content" };
-const _sfc_main$1g = /* @__PURE__ */ defineComponent({
+const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxHistoryItem",
   props: {
     item: {},
@@ -7830,7 +7850,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
       emit2("click", { query: props.item });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$19, [
+      return openBlock(), createElementBlock("div", _hoisted_1$1a, [
         createBaseVNode("div", _hoisted_2$N, [
           createBaseVNode("div", {
             class: normalizeClass(["lupa-search-box-history-item-text", { "lupa-search-box-history-item-highlighted": _ctx.highlighted }]),
@@ -7845,11 +7865,11 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$18 = {
+const _hoisted_1$19 = {
   key: 0,
   class: "lupa-search-box-history-panel"
 };
-const _sfc_main$1f = /* @__PURE__ */ defineComponent({
+const _sfc_main$1g = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxHistoryPanel",
   props: {
     options: {}
@@ -7890,9 +7910,9 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      return hasHistory.value ? (openBlock(), createElementBlock("div", _hoisted_1$18, [
+      return hasHistory.value ? (openBlock(), createElementBlock("div", _hoisted_1$19, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(history), (item, index) => {
-          return openBlock(), createBlock(_sfc_main$1g, {
+          return openBlock(), createBlock(_sfc_main$1h, {
             key: item,
             item,
             highlighted: index === highlightIndex.value,
@@ -7908,6 +7928,18 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _hoisted_1$18 = { class: "lupa-search-box-no-results" };
+const _sfc_main$1f = /* @__PURE__ */ defineComponent({
+  __name: "SearchBoxNoResults",
+  props: {
+    labels: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("p", _hoisted_1$18, toDisplayString(_ctx.labels.noResults), 1);
+    };
+  }
+});
 const _hoisted_1$17 = ["innerHTML"];
 const _hoisted_2$M = {
   key: 1,
@@ -7919,7 +7951,7 @@ const _hoisted_3$z = {
   class: "lupa-suggestion-facet",
   "data-cy": "lupa-suggestion-facet"
 };
-const _hoisted_4$q = {
+const _hoisted_4$p = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
@@ -7965,7 +7997,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
           innerHTML: _ctx.suggestion.displayHighlight
         }, null, 8, _hoisted_1$17)) : (openBlock(), createElementBlock("div", _hoisted_2$M, toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$z, [
-          createBaseVNode("span", _hoisted_4$q, toDisplayString(facetLabel.value), 1),
+          createBaseVNode("span", _hoisted_4$p, toDisplayString(facetLabel.value), 1),
           createBaseVNode("span", _hoisted_5$e, toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : createCommentVNode("", true)
       ]);
@@ -8367,7 +8399,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
 const _hoisted_1$10 = ["innerHTML"];
 const _hoisted_2$J = { key: 0 };
 const _hoisted_3$y = { key: 1 };
-const _hoisted_4$p = { class: "lupa-search-box-custom-label" };
+const _hoisted_4$o = { class: "lupa-search-box-custom-label" };
 const _hoisted_5$d = { class: "lupa-search-box-custom-text" };
 const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductCustom",
@@ -8400,7 +8432,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
         class: [className.value, "lupa-search-box-product-custom"]
       }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$J, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$y, [
-          createBaseVNode("div", _hoisted_4$p, toDisplayString(label.value), 1),
+          createBaseVNode("div", _hoisted_4$o, toDisplayString(label.value), 1),
           createBaseVNode("div", _hoisted_5$d, toDisplayString(text.value), 1)
         ]))
       ], 16));
@@ -8796,7 +8828,7 @@ const useTrackingStore = defineStore("tracking", () => {
 const _hoisted_1$Z = ["href"];
 const _hoisted_2$H = { class: "lupa-search-box-product-image-section" };
 const _hoisted_3$w = { class: "lupa-search-box-product-details-section" };
-const _hoisted_4$o = {
+const _hoisted_4$n = {
   key: 0,
   class: "lupa-search-box-product-add-to-cart-section"
 };
@@ -8917,7 +8949,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["item", "element", "labels", "link"]);
           }), 128))
         ]),
-        addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$o, [
+        addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$n, [
           createVNode(_sfc_main$12, {
             class: "lupa-search-box-product-element",
             item: _ctx.item,
@@ -9052,12 +9084,8 @@ const _hoisted_1$X = {
   key: 0,
   id: "lupa-search-box-panel"
 };
-const _hoisted_2$G = {
-  class: "lupa-main-panel",
-  "data-cy": "lupa-main-panel"
-};
-const _hoisted_3$v = ["data-cy"];
-const _hoisted_4$n = {
+const _hoisted_2$G = ["data-cy"];
+const _hoisted_3$v = {
   key: 1,
   id: "lupa-search-box-panel"
 };
@@ -9094,7 +9122,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
     const panels = computed(() => props.options.panels);
     const sdkOptions = computed(() => props.options.options);
     const searchBoxStore = useSearchBoxStore();
-    const { suggestionResults } = storeToRefs(searchBoxStore);
+    const { suggestionResults, hasAnyResults, panelItemCounts } = storeToRefs(searchBoxStore);
     const displayResults = computed(
       () => {
         var _a, _b;
@@ -9175,6 +9203,12 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
         `${window.innerHeight - panel.getBoundingClientRect().y - 10}px`
       );
     };
+    const numberOfVisiblePanels = computed(() => {
+      return panelItemCounts.value.filter((v) => v.count > 0).length;
+    });
+    const expandOnSinglePanel = computed(() => {
+      return numberOfVisiblePanels.value === 1 && props.options.expandOnSinglePanel;
+    });
     return (_ctx, _cache) => {
       var _a;
       return openBlock(), createElementBlock("div", {
@@ -9182,7 +9216,11 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
         ref: panelContainer
       }, [
         displayResults.value ? (openBlock(), createElementBlock("div", _hoisted_1$X, [
-          createBaseVNode("div", _hoisted_2$G, [
+          createBaseVNode("div", {
+            class: "lupa-main-panel",
+            style: normalizeStyle(expandOnSinglePanel.value ? { display: "block" } : {}),
+            "data-cy": "lupa-main-panel"
+          }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
               return openBlock(), createElementBlock("div", {
                 key: index,
@@ -9211,16 +9249,21 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
                     key: "0"
                   } : void 0
                 ]), 1064, ["panel", "options", "debounce", "inputValue", "labels"])) : createCommentVNode("", true)
-              ], 10, _hoisted_3$v);
+              ], 10, _hoisted_2$G);
             }), 128))
-          ]),
-          createVNode(_sfc_main$1h, {
+          ], 4),
+          !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1f, {
+            key: 0,
+            labels: labels.value
+          }, null, 8, ["labels"])) : createCommentVNode("", true),
+          unref(hasAnyResults) || !_ctx.options.hideMoreResultsButtonOnNoResults ? (openBlock(), createBlock(_sfc_main$1i, {
+            key: 1,
             labels: labels.value,
             showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
             onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
-          }, null, 8, ["labels", "showTotalCount"])
-        ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_4$n, [
-          createVNode(_sfc_main$1f, {
+          }, null, 8, ["labels", "showTotalCount"])) : createCommentVNode("", true)
+        ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_3$v, [
+          createVNode(_sfc_main$1g, {
             options: _ctx.options.history,
             history: history.value,
             onGoToResults: handleGoToResults,
@@ -9286,7 +9329,10 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
         "links",
         "options",
         "debounce",
-        "showTotalCount"
+        "showTotalCount",
+        "hideMoreResultsButtonOnNoResults",
+        "showNoResultsPanel",
+        "expandOnSinglePanel"
       ])
     );
     const searchTriggers = computed(() => {
@@ -9482,7 +9528,7 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
       var _a2;
       return openBlock(), createElementBlock("div", _hoisted_1$W, [
         createBaseVNode("div", _hoisted_2$F, [
-          createVNode(_sfc_main$1i, {
+          createVNode(_sfc_main$1j, {
             options: inputOptions.value,
             suggestedValue: suggestedValue.value,
             "can-close": (_a2 = _ctx.isSearchContainer) != null ? _a2 : false,
@@ -13955,8 +14001,14 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const isTitleResultTopPosition = computed(() => {
       return props.options.searchTitlePosition === "search-results-top";
     });
+    const handlePopState = () => {
+      var _a;
+      const searchParams = getSearchParams((_a = props.options.ssr) == null ? void 0 : _a.url);
+      paramStore.add(parseParams(searchParams));
+    };
     onMounted(() => {
       var _a, _b;
+      window.addEventListener("popstate", handlePopState);
       window.addEventListener("resize", handleResize);
       if (props.initialData) {
         searchResultStore.add(__spreadValues2({}, props.initialData));
@@ -13967,6 +14019,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     });
     onBeforeUnmount(() => {
       window.removeEventListener("resize", handleResize);
+      window.removeEventListener("popstate", handlePopState);
     });
     const trackItemListView = (title, items = []) => {
       trackingStore.trackEvent({
@@ -21169,7 +21222,7 @@ const _hoisted_4 = {
   class: "lupa-chat-spinner-main"
 };
 const _hoisted_5 = { class: "lupasearch-chat-input" };
-const _sfc_main$1j = /* @__PURE__ */ defineComponent({
+const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   __name: "ChatContainer",
   props: {
     options: {}
@@ -27284,7 +27337,7 @@ const chat = (options, mountOptions) => {
     }
     return;
   }
-  const instance = createVue(options.displayOptions.containerSelector, _sfc_main$1j, {
+  const instance = createVue(options.displayOptions.containerSelector, _sfc_main$1k, {
     options
   });
   if (!instance) {