@getlupa/vue 0.8.6 → 0.9.0

package/dist/lupaSearch.js

@@ -1900,7 +1900,8 @@ const trackLupaEvent = (queryKey, data = {}, options) => {
     itemId: (_b = data.itemId) != null ? _b : "",
     name: data.type,
     userId: getUserKey(),
-    sessionId: getSessionKey()
+    sessionId: getSessionKey(),
+    filters: data.filters
   };
   LupaSearchSdk.track(queryKey, eventData, options);
 };
@@ -2004,9 +2005,6 @@ const track = (queryKey, data = {}, options) => {
     return;
   }
   trackAnalyticsEvent(data);
-  if (!hasSearchQuery) {
-    return;
-  }
   trackLupaEvent(queryKey, data, options);
 };
 const DEFAULT_SEARCH_BOX_OPTIONS = {
@@ -2283,6 +2281,7 @@ var DocumentElementType = /* @__PURE__ */ ((DocumentElementType2) => {
 var SearchBoxPanelType = /* @__PURE__ */ ((SearchBoxPanelType2) => {
   SearchBoxPanelType2["SUGGESTION"] = "suggestion";
   SearchBoxPanelType2["DOCUMENT"] = "document";
+  SearchBoxPanelType2["RELATED_SOURCE"] = "related-source";
   return SearchBoxPanelType2;
 })(SearchBoxPanelType || {});
 var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
@@ -3199,12 +3198,12 @@ const _hoisted_1$1c = { id: "lupa-search-box-input-container" };
 const _hoisted_2$P = { class: "lupa-input-clear" };
 const _hoisted_3$A = { id: "lupa-search-box-input" };
 const _hoisted_4$s = ["value"];
-const _hoisted_5$g = ["aria-label", "placeholder"];
+const _hoisted_5$h = ["aria-label", "placeholder"];
 const _hoisted_6$9 = {
   key: 0,
   class: "lupa-close-label"
 };
-const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1l = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxInput",
   props: {
     options: {},
@@ -3312,7 +3311,7 @@ const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
             placeholder: labels.value.placeholder,
             onInput: handleInput,
             onFocus: handleFocus
-          }), null, 16, _hoisted_5$g), [
+          }), null, 16, _hoisted_5$h), [
             [vue.vModelText, inputValue.value]
           ])
         ]),
@@ -3327,7 +3326,7 @@ const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1k = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxMoreResults",
   props: {
     labels: {},
@@ -3361,7 +3360,7 @@ const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
 });
 const _hoisted_1$1b = { class: "lupa-search-box-history-item" };
 const _hoisted_2$O = { class: "lupa-search-box-history-item-content" };
-const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxHistoryItem",
   props: {
     item: {},
@@ -3396,7 +3395,7 @@ const _hoisted_1$1a = {
   key: 0,
   class: "lupa-search-box-history-panel"
 };
-const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1i = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxHistoryPanel",
   props: {
     options: {}
@@ -3439,7 +3438,7 @@ const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return hasHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1a, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(history), (item, index) => {
-          return vue.openBlock(), vue.createBlock(_sfc_main$1i, {
+          return vue.openBlock(), vue.createBlock(_sfc_main$1j, {
             key: item,
             item,
             highlighted: index === highlightIndex.value,
@@ -3456,7 +3455,7 @@ const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$19 = { class: "lupa-search-box-no-results" };
-const _sfc_main$1g = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1h = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxNoResults",
   props: {
     labels: {}
@@ -3482,11 +3481,11 @@ const _hoisted_4$r = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
-const _hoisted_5$f = {
+const _hoisted_5$g = {
   class: "lupa-suggestion-facet-value",
   "data-cy": "lupa-suggestion-facet-value"
 };
-const _sfc_main$1f = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1g = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxSuggestion",
   props: {
     suggestion: {},
@@ -3525,7 +3524,7 @@ const _sfc_main$1f = /* @__PURE__ */ vue.defineComponent({
         }, null, 8, _hoisted_1$18)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$N, vue.toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$z, [
           vue.createElementVNode("span", _hoisted_4$r, vue.toDisplayString(facetLabel.value), 1),
-          vue.createElementVNode("span", _hoisted_5$f, vue.toDisplayString(_ctx.suggestion.facet.title), 1)
+          vue.createElementVNode("span", _hoisted_5$g, vue.toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : vue.createCommentVNode("", true)
       ]);
     };
@@ -3535,7 +3534,7 @@ const _hoisted_1$17 = {
   id: "lupa-search-box-suggestions",
   "data-cy": "lupa-search-box-suggestions"
 };
-const _sfc_main$1e = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1f = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxSuggestions",
   props: {
     items: {},
@@ -3597,7 +3596,7 @@ const _sfc_main$1e = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$17, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items.value, (item, index) => {
-          return vue.openBlock(), vue.createBlock(_sfc_main$1f, {
+          return vue.openBlock(), vue.createBlock(_sfc_main$1g, {
             key: getSuggestionKey(item),
             class: vue.normalizeClass(["lupa-suggestion", index === highlightedIndex.value ? "lupa-suggestion-highlighted" : ""]),
             suggestion: item,
@@ -3625,7 +3624,7 @@ const debounce$1 = (func, timeout) => {
     }, timeout);
   };
 };
-const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1e = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxSuggestionsWrapper",
   props: {
     panel: {},
@@ -3666,7 +3665,7 @@ const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
     };
     const getSuggestionsDebounced = debounce$1(getSuggestions, props.debounce);
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$1e, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$1f, {
         items: searchResult.value,
         highlight: _ctx.panel.highlight,
         queryKey: _ctx.panel.queryKey,
@@ -3752,7 +3751,7 @@ const joinUrlParts = (...parts) => {
   return (_c = (_b = (_a = parts == null ? void 0 : parts.map((part) => part.replace(/(^\/+|\/+$)/g, ""))) == null ? void 0 : _a.filter((part) => part !== "")) == null ? void 0 : _b.join("/")) != null ? _c : "";
 };
 const _hoisted_1$16 = ["src"];
-const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1d = /* @__PURE__ */ vue.defineComponent({
   __name: "ProductImage",
   props: {
     item: {},
@@ -3810,7 +3809,7 @@ const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1c = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductImage",
   props: {
     item: {},
@@ -3818,7 +3817,7 @@ const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$1c, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$1d, {
         item: _ctx.item,
         options: _ctx.options,
         "wrapper-class": "lupa-search-box-image-wrapper",
@@ -3832,7 +3831,7 @@ const _hoisted_2$M = {
   key: 1,
   class: "lupa-search-box-product-title"
 };
-const _sfc_main$1a = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1b = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductTitle",
   props: {
     item: {},
@@ -3863,7 +3862,7 @@ const _hoisted_2$L = {
   key: 1,
   class: "lupa-search-box-product-description"
 };
-const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$1a = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductDescription",
   props: {
     item: {},
@@ -3888,7 +3887,7 @@ const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$13 = { class: "lupa-search-box-product-price" };
-const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$19 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductPrice",
   props: {
     item: {},
@@ -3913,7 +3912,7 @@ const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 const _hoisted_1$12 = { class: "lupa-search-box-product-regular-price" };
-const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$18 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductRegularPrice",
   props: {
     item: {},
@@ -3939,8 +3938,8 @@ const _hoisted_1$11 = ["innerHTML"];
 const _hoisted_2$K = { key: 0 };
 const _hoisted_3$y = { key: 1 };
 const _hoisted_4$q = { class: "lupa-search-box-custom-label" };
-const _hoisted_5$e = { class: "lupa-search-box-custom-text" };
-const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
+const _hoisted_5$f = { class: "lupa-search-box-custom-text" };
+const _sfc_main$17 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductCustom",
   props: {
     item: {},
@@ -3972,14 +3971,14 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
       }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$K, vue.toDisplayString(text.value), 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$y, [
           vue.createElementVNode("div", _hoisted_4$q, vue.toDisplayString(label.value), 1),
-          vue.createElementVNode("div", _hoisted_5$e, vue.toDisplayString(text.value), 1)
+          vue.createElementVNode("div", _hoisted_5$f, vue.toDisplayString(text.value), 1)
         ]))
       ], 16));
     };
   }
 });
 const _hoisted_1$10 = ["innerHTML"];
-const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductCustomHtml",
   props: {
     item: {},
@@ -4196,7 +4195,7 @@ const useSearchResultStore = defineStore("searchResult", () => {
 const _hoisted_1$$ = { class: "lupa-search-box-add-to-cart-wrapper" };
 const _hoisted_2$J = { class: "lupa-search-box-product-addtocart" };
 const _hoisted_3$x = ["onClick", "disabled"];
-const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductAddToCart",
   props: {
     item: {},
@@ -4239,17 +4238,17 @@ const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent({
 });
 const __default__$4 = {
   components: {
-    SearchBoxProductImage: _sfc_main$1b,
-    SearchBoxProductTitle: _sfc_main$1a,
-    SearchBoxProductDescription: _sfc_main$19,
-    SearchBoxProductPrice: _sfc_main$18,
-    SearchBoxProductRegularPrice: _sfc_main$17,
-    SearchBoxProductCustom: _sfc_main$16,
-    SearchBoxProductCustomHtml: _sfc_main$15,
-    SearchBoxProductAddToCart: _sfc_main$14
+    SearchBoxProductImage: _sfc_main$1c,
+    SearchBoxProductTitle: _sfc_main$1b,
+    SearchBoxProductDescription: _sfc_main$1a,
+    SearchBoxProductPrice: _sfc_main$19,
+    SearchBoxProductRegularPrice: _sfc_main$18,
+    SearchBoxProductCustom: _sfc_main$17,
+    SearchBoxProductCustomHtml: _sfc_main$16,
+    SearchBoxProductAddToCart: _sfc_main$15
   }
 };
-const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
+const _sfc_main$14 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
   __name: "SearchBoxProductElement",
   props: {
     item: {},
@@ -4315,7 +4314,7 @@ const _hoisted_4$p = {
   key: 0,
   class: "lupa-search-box-product-add-to-cart-section"
 };
-const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$13 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProduct",
   props: {
     item: {},
@@ -4373,7 +4372,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
       }), [
         vue.createElementVNode("div", _hoisted_2$I, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(imageElements.value, (element) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$13, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$14, {
               class: "lupa-search-box-product-element",
               item: _ctx.item,
               element,
@@ -4385,7 +4384,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
         ]),
         vue.createElementVNode("div", _hoisted_3$w, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(detailElements.value, (element) => {
-            return vue.openBlock(), vue.createBlock(_sfc_main$13, {
+            return vue.openBlock(), vue.createBlock(_sfc_main$14, {
               class: "lupa-search-box-product-element",
               item: _ctx.item,
               element,
@@ -4396,7 +4395,7 @@ const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
           }), 128))
         ]),
         addToCartElement.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$p, [
-          vue.createVNode(_sfc_main$13, {
+          vue.createVNode(_sfc_main$14, {
             class: "lupa-search-box-product-element",
             item: _ctx.item,
             element: addToCartElement.value,
@@ -4420,6 +4419,7 @@ const getSearchTrackingData = (searchText, type) => {
 };
 const useTrackingStore = defineStore("tracking", () => {
   const optionsStore = useOptionsStore();
+  const searchResultStore = useSearchResultStore();
   const trackSearch = ({
     queryKey,
     query,
@@ -4457,7 +4457,8 @@ const useTrackingStore = defineStore("tracking", () => {
     track(
       queryKey,
       __spreadProps(__spreadValues({}, data), {
-        analytics: data.analytics ? __spreadProps(__spreadValues({}, data.analytics), { items: mappedItems }) : void 0
+        analytics: data.analytics ? __spreadProps(__spreadValues({}, data.analytics), { items: mappedItems }) : void 0,
+        filters: searchResultStore.hasAnyFilter ? searchResultStore.filters : void 0
       }),
       options
     );
@@ -4465,7 +4466,7 @@ const useTrackingStore = defineStore("tracking", () => {
   return { trackSearch, trackResults, trackEvent };
 });
 const _hoisted_1$Z = { id: "lupa-search-box-products" };
-const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$12 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProducts",
   props: {
     items: {},
@@ -4538,7 +4539,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
             itemClicked: handleProductClick
           });
         }), 128)) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList(_ctx.items, (item, index) => {
-          return vue.openBlock(), vue.createBlock(_sfc_main$12, {
+          return vue.openBlock(), vue.createBlock(_sfc_main$13, {
             key: index,
             item,
             panelOptions: _ctx.panelOptions,
@@ -4552,7 +4553,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductsWrapper",
   props: {
     panel: {},
@@ -4604,7 +4605,7 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
     const getItemsDebounced = debounce$1(getItems, props.debounce);
     return (_ctx, _cache) => {
       var _a, _b;
-      return vue.openBlock(), vue.createBlock(_sfc_main$11, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$12, {
         items: (_b = (_a = searchResult.value) == null ? void 0 : _a.items) != null ? _b : [],
         panelOptions: _ctx.panel,
         labels: _ctx.labels,
@@ -4622,6 +4623,95 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
+  __name: "SearchBoxRelatedSourceWrapper",
+  props: {
+    panel: {},
+    inputValue: {},
+    options: {},
+    labels: {},
+    debounce: {}
+  },
+  emits: ["fetched"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const searchBoxStore = useSearchBoxStore();
+    const { docResults } = storeToRefs(searchBoxStore);
+    const searchResult = vue.ref(null);
+    const options = vue.computed(() => props.options);
+    const relatedSourceIds = vue.computed(() => {
+      var _a, _b, _c;
+      const queryKey = (_a = props.panel.sourceIds) == null ? void 0 : _a.queryKey;
+      if (!queryKey) {
+        return [];
+      }
+      const currentDocumentItems = (_c = (_b = docResults == null ? void 0 : docResults.value[queryKey]) == null ? void 0 : _b.items) != null ? _c : [];
+      const allFieldValues = currentDocumentItems.map((item) => item[props.panel.sourceIds.field]).flat();
+      const uniqueFieldValues = Array.from(new Set(allFieldValues));
+      return uniqueFieldValues;
+    });
+    const inputValueProp = vue.computed(() => props.inputValue);
+    vue.onMounted(() => {
+      getItemsDebounced();
+    });
+    vue.watch(relatedSourceIds, () => {
+      getItemsDebounced();
+    });
+    vue.watch(inputValueProp, () => {
+      getItemsDebounced();
+    });
+    const fetchRelatedItems = () => __async(this, null, function* () {
+      var _a, _b;
+      if (!((_a = props.panel.target) == null ? void 0 : _a.queryKey) || !relatedSourceIds.value.length) {
+        return { items: [], success: true, searchText: "", total: 0 };
+      }
+      try {
+        const result = yield LupaSearchSdk.queryByIds(
+          (_b = props.panel.target) == null ? void 0 : _b.queryKey,
+          relatedSourceIds.value,
+          options.value
+        );
+        if (!result.success) {
+          return { items: [], success: true, searchText: "", total: 0 };
+        }
+        return result;
+      } catch (err) {
+        console.error(err);
+        if (options == null ? void 0 : options.value.onError) {
+          options.value.onError(err);
+        }
+        return { items: [], success: true, searchText: "", total: 0 };
+      }
+    });
+    const getItems = () => __async(this, null, function* () {
+      searchResult.value = yield fetchRelatedItems();
+    });
+    const getItemsDebounced = debounce$1(getItems, props.debounce);
+    const documentPanelOptions = vue.computed(() => {
+      return __spreadProps(__spreadValues({}, props.panel), {
+        type: SearchBoxPanelType.DOCUMENT
+      });
+    });
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return vue.openBlock(), vue.createBlock(_sfc_main$12, {
+        items: (_b = (_a = searchResult.value) == null ? void 0 : _a.items) != null ? _b : [],
+        panelOptions: documentPanelOptions.value,
+        labels: _ctx.labels,
+        inputValue: _ctx.inputValue,
+        onProductClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("product-click"))
+      }, vue.createSlots({ _: 2 }, [
+        _ctx.$slots.productCard ? {
+          name: "productCard",
+          fn: vue.withCtx((props2) => [
+            vue.renderSlot(_ctx.$slots, "productCard", vue.normalizeProps(vue.guardReactiveProps(props2)))
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["items", "panelOptions", "labels", "inputValue"]);
+    };
+  }
+});
 const _hoisted_1$Y = {
   key: 0,
   id: "lupa-search-box-panel"
@@ -4629,16 +4719,21 @@ const _hoisted_1$Y = {
 const _hoisted_2$H = ["data-cy"];
 const _hoisted_3$v = {
   key: 0,
-  class: "lupa-panel-title"
+  class: "lupa-panel-title lupa-panel-title-top-results"
 };
 const _hoisted_4$o = {
+  key: 1,
+  class: "lupa-panel-title"
+};
+const _hoisted_5$e = {
   key: 1,
   id: "lupa-search-box-panel"
 };
 const __default__$3 = {
   components: {
-    SearchBoxSuggestionsWrapper: _sfc_main$1d,
-    SearchBoxProductsWrapper: _sfc_main$10
+    SearchBoxSuggestionsWrapper: _sfc_main$1e,
+    SearchBoxProductsWrapper: _sfc_main$11,
+    SearchBoxRelatedSourceWrapper: _sfc_main$10
   }
 };
 const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
@@ -4732,6 +4827,8 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
       switch (type) {
         case "suggestion":
           return "SearchBoxSuggestionsWrapper";
+        case "related-source":
+          return "SearchBoxRelatedSourceWrapper";
         default:
           return "SearchBoxProductsWrapper";
       }
@@ -4757,6 +4854,17 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
       const panel = panelItemCounts.value.find((v) => v.queryKey === queryKey);
       return (panel == null ? void 0 : panel.count) > 0 && (panel == null ? void 0 : panel.input.length) < 1;
     };
+    const canShowPanel = (panel) => {
+      var _a, _b, _c;
+      if (!((_a = panel.visibility) == null ? void 0 : _a.showWhenKeyHasNoResults)) {
+        return true;
+      }
+      const resultCountFromRelatedPanel = (_c = (_b = panelItemCounts.value.find((v) => {
+        var _a2;
+        return v.queryKey === ((_a2 = panel.visibility) == null ? void 0 : _a2.showWhenKeyHasNoResults);
+      })) == null ? void 0 : _b.count) != null ? _c : 0;
+      return resultCountFromRelatedPanel < 1;
+    };
     return (_ctx, _cache) => {
       var _a;
       return vue.openBlock(), vue.createElementBlock("div", {
@@ -4770,7 +4878,7 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
             "data-cy": "lupa-main-panel"
           }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayPanels.value, (panel, index) => {
-              var _a2, _b;
+              var _a2, _b, _c, _d;
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: index,
                 class: vue.normalizeClass([
@@ -4780,8 +4888,9 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
                 "data-cy": "lupa-panel-" + panel.type + "-index"
               }, [
                 ((_a2 = panel.labels) == null ? void 0 : _a2.topResultsTitle) && showTopResultsPanelTitle(panel.queryKey) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$v, vue.toDisplayString((_b = panel.labels) == null ? void 0 : _b.topResultsTitle), 1)) : vue.createCommentVNode("", true),
-                panel.queryKey ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getComponent(panel.type)), {
-                  key: 1,
+                ((_c = panel.labels) == null ? void 0 : _c.title) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$o, vue.toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : vue.createCommentVNode("", true),
+                panel.queryKey && canShowPanel(panel) ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(getComponent(panel.type)), {
+                  key: 2,
                   panel,
                   options: sdkOptions.value,
                   debounce: _ctx.options.debounce,
@@ -4802,18 +4911,18 @@ const _sfc_main$$ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
               ], 10, _hoisted_2$H);
             }), 128))
           ], 4),
-          !vue.unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (vue.openBlock(), vue.createBlock(_sfc_main$1g, {
+          !vue.unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (vue.openBlock(), vue.createBlock(_sfc_main$1h, {
             key: 0,
             labels: labels.value
           }, null, 8, ["labels"])) : vue.createCommentVNode("", true),
-          vue.unref(hasAnyResults) || !_ctx.options.hideMoreResultsButtonOnNoResults ? (vue.openBlock(), vue.createBlock(_sfc_main$1j, {
+          vue.unref(hasAnyResults) || !_ctx.options.hideMoreResultsButtonOnNoResults ? (vue.openBlock(), vue.createBlock(_sfc_main$1k, {
             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"])) : vue.createCommentVNode("", true)
-        ])) : displayHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$o, [
-          vue.createVNode(_sfc_main$1h, {
+        ])) : displayHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$e, [
+          vue.createVNode(_sfc_main$1i, {
             options: _ctx.options.history,
             history: history.value,
             onGoToResults: handleGoToResults,
@@ -5083,7 +5192,7 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent({
       var _a2;
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
         vue.createElementVNode("div", _hoisted_2$G, [
-          vue.createVNode(_sfc_main$1k, {
+          vue.createVNode(_sfc_main$1l, {
             options: inputOptions.value,
             suggestedValue: suggestedValue.value,
             "can-close": (_a2 = _ctx.isSearchContainer) != null ? _a2 : false,
@@ -8394,7 +8503,7 @@ const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$1c, {
+      return vue.openBlock(), vue.createBlock(_sfc_main$1d, {
         item: _ctx.item,
         options: _ctx.options,
         "wrapper-class": "lupa-search-results-image-wrapper",

package/dist/lupaSearch.mjs

@@ -1898,7 +1898,8 @@ const trackLupaEvent = (queryKey, data = {}, options) => {
     itemId: (_b = data.itemId) != null ? _b : "",
     name: data.type,
     userId: getUserKey(),
-    sessionId: getSessionKey()
+    sessionId: getSessionKey(),
+    filters: data.filters
   };
   LupaSearchSdk.track(queryKey, eventData, options);
 };
@@ -2002,9 +2003,6 @@ const track = (queryKey, data = {}, options) => {
     return;
   }
   trackAnalyticsEvent(data);
-  if (!hasSearchQuery) {
-    return;
-  }
   trackLupaEvent(queryKey, data, options);
 };
 const DEFAULT_SEARCH_BOX_OPTIONS = {
@@ -2281,6 +2279,7 @@ var DocumentElementType = /* @__PURE__ */ ((DocumentElementType2) => {
 var SearchBoxPanelType = /* @__PURE__ */ ((SearchBoxPanelType2) => {
   SearchBoxPanelType2["SUGGESTION"] = "suggestion";
   SearchBoxPanelType2["DOCUMENT"] = "document";
+  SearchBoxPanelType2["RELATED_SOURCE"] = "related-source";
   return SearchBoxPanelType2;
 })(SearchBoxPanelType || {});
 var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
@@ -3197,12 +3196,12 @@ const _hoisted_1$1c = { id: "lupa-search-box-input-container" };
 const _hoisted_2$P = { class: "lupa-input-clear" };
 const _hoisted_3$A = { id: "lupa-search-box-input" };
 const _hoisted_4$s = ["value"];
-const _hoisted_5$g = ["aria-label", "placeholder"];
+const _hoisted_5$h = ["aria-label", "placeholder"];
 const _hoisted_6$9 = {
   key: 0,
   class: "lupa-close-label"
 };
-const _sfc_main$1k = /* @__PURE__ */ defineComponent({
+const _sfc_main$1l = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxInput",
   props: {
     options: {},
@@ -3310,7 +3309,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
             placeholder: labels.value.placeholder,
             onInput: handleInput,
             onFocus: handleFocus
-          }), null, 16, _hoisted_5$g), [
+          }), null, 16, _hoisted_5$h), [
             [vModelText, inputValue.value]
           ])
         ]),
@@ -3325,7 +3324,7 @@ const _sfc_main$1k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1j = /* @__PURE__ */ defineComponent({
+const _sfc_main$1k = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxMoreResults",
   props: {
     labels: {},
@@ -3359,7 +3358,7 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1$1b = { class: "lupa-search-box-history-item" };
 const _hoisted_2$O = { class: "lupa-search-box-history-item-content" };
-const _sfc_main$1i = /* @__PURE__ */ defineComponent({
+const _sfc_main$1j = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxHistoryItem",
   props: {
     item: {},
@@ -3394,7 +3393,7 @@ const _hoisted_1$1a = {
   key: 0,
   class: "lupa-search-box-history-panel"
 };
-const _sfc_main$1h = /* @__PURE__ */ defineComponent({
+const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxHistoryPanel",
   props: {
     options: {}
@@ -3437,7 +3436,7 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return hasHistory.value ? (openBlock(), createElementBlock("div", _hoisted_1$1a, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(unref(history), (item, index) => {
-          return openBlock(), createBlock(_sfc_main$1i, {
+          return openBlock(), createBlock(_sfc_main$1j, {
             key: item,
             item,
             highlighted: index === highlightIndex.value,
@@ -3454,7 +3453,7 @@ const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$19 = { class: "lupa-search-box-no-results" };
-const _sfc_main$1g = /* @__PURE__ */ defineComponent({
+const _sfc_main$1h = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxNoResults",
   props: {
     labels: {}
@@ -3480,11 +3479,11 @@ const _hoisted_4$r = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
-const _hoisted_5$f = {
+const _hoisted_5$g = {
   class: "lupa-suggestion-facet-value",
   "data-cy": "lupa-suggestion-facet-value"
 };
-const _sfc_main$1f = /* @__PURE__ */ defineComponent({
+const _sfc_main$1g = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxSuggestion",
   props: {
     suggestion: {},
@@ -3523,7 +3522,7 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
         }, null, 8, _hoisted_1$18)) : (openBlock(), createElementBlock("div", _hoisted_2$N, toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$z, [
           createElementVNode("span", _hoisted_4$r, toDisplayString(facetLabel.value), 1),
-          createElementVNode("span", _hoisted_5$f, toDisplayString(_ctx.suggestion.facet.title), 1)
+          createElementVNode("span", _hoisted_5$g, toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : createCommentVNode("", true)
       ]);
     };
@@ -3533,7 +3532,7 @@ const _hoisted_1$17 = {
   id: "lupa-search-box-suggestions",
   "data-cy": "lupa-search-box-suggestions"
 };
-const _sfc_main$1e = /* @__PURE__ */ defineComponent({
+const _sfc_main$1f = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxSuggestions",
   props: {
     items: {},
@@ -3595,7 +3594,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$17, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
-          return openBlock(), createBlock(_sfc_main$1f, {
+          return openBlock(), createBlock(_sfc_main$1g, {
             key: getSuggestionKey(item),
             class: normalizeClass(["lupa-suggestion", index === highlightedIndex.value ? "lupa-suggestion-highlighted" : ""]),
             suggestion: item,
@@ -3623,7 +3622,7 @@ const debounce$1 = (func, timeout) => {
     }, timeout);
   };
 };
-const _sfc_main$1d = /* @__PURE__ */ defineComponent({
+const _sfc_main$1e = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxSuggestionsWrapper",
   props: {
     panel: {},
@@ -3664,7 +3663,7 @@ const _sfc_main$1d = /* @__PURE__ */ defineComponent({
     };
     const getSuggestionsDebounced = debounce$1(getSuggestions, props.debounce);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1e, {
+      return openBlock(), createBlock(_sfc_main$1f, {
         items: searchResult.value,
         highlight: _ctx.panel.highlight,
         queryKey: _ctx.panel.queryKey,
@@ -3750,7 +3749,7 @@ const joinUrlParts = (...parts) => {
   return (_c = (_b = (_a = parts == null ? void 0 : parts.map((part) => part.replace(/(^\/+|\/+$)/g, ""))) == null ? void 0 : _a.filter((part) => part !== "")) == null ? void 0 : _b.join("/")) != null ? _c : "";
 };
 const _hoisted_1$16 = ["src"];
-const _sfc_main$1c = /* @__PURE__ */ defineComponent({
+const _sfc_main$1d = /* @__PURE__ */ defineComponent({
   __name: "ProductImage",
   props: {
     item: {},
@@ -3808,7 +3807,7 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$1b = /* @__PURE__ */ defineComponent({
+const _sfc_main$1c = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductImage",
   props: {
     item: {},
@@ -3816,7 +3815,7 @@ const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1c, {
+      return openBlock(), createBlock(_sfc_main$1d, {
         item: _ctx.item,
         options: _ctx.options,
         "wrapper-class": "lupa-search-box-image-wrapper",
@@ -3830,7 +3829,7 @@ const _hoisted_2$M = {
   key: 1,
   class: "lupa-search-box-product-title"
 };
-const _sfc_main$1a = /* @__PURE__ */ defineComponent({
+const _sfc_main$1b = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductTitle",
   props: {
     item: {},
@@ -3861,7 +3860,7 @@ const _hoisted_2$L = {
   key: 1,
   class: "lupa-search-box-product-description"
 };
-const _sfc_main$19 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1a = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductDescription",
   props: {
     item: {},
@@ -3886,7 +3885,7 @@ const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$13 = { class: "lupa-search-box-product-price" };
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductPrice",
   props: {
     item: {},
@@ -3911,7 +3910,7 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$12 = { class: "lupa-search-box-product-regular-price" };
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductRegularPrice",
   props: {
     item: {},
@@ -3937,8 +3936,8 @@ const _hoisted_1$11 = ["innerHTML"];
 const _hoisted_2$K = { key: 0 };
 const _hoisted_3$y = { key: 1 };
 const _hoisted_4$q = { class: "lupa-search-box-custom-label" };
-const _hoisted_5$e = { class: "lupa-search-box-custom-text" };
-const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+const _hoisted_5$f = { class: "lupa-search-box-custom-text" };
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductCustom",
   props: {
     item: {},
@@ -3970,14 +3969,14 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
       }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$K, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$y, [
           createElementVNode("div", _hoisted_4$q, toDisplayString(label.value), 1),
-          createElementVNode("div", _hoisted_5$e, toDisplayString(text.value), 1)
+          createElementVNode("div", _hoisted_5$f, toDisplayString(text.value), 1)
         ]))
       ], 16));
     };
   }
 });
 const _hoisted_1$10 = ["innerHTML"];
-const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductCustomHtml",
   props: {
     item: {},
@@ -4194,7 +4193,7 @@ const useSearchResultStore = defineStore("searchResult", () => {
 const _hoisted_1$$ = { class: "lupa-search-box-add-to-cart-wrapper" };
 const _hoisted_2$J = { class: "lupa-search-box-product-addtocart" };
 const _hoisted_3$x = ["onClick", "disabled"];
-const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductAddToCart",
   props: {
     item: {},
@@ -4237,17 +4236,17 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 });
 const __default__$4 = {
   components: {
-    SearchBoxProductImage: _sfc_main$1b,
-    SearchBoxProductTitle: _sfc_main$1a,
-    SearchBoxProductDescription: _sfc_main$19,
-    SearchBoxProductPrice: _sfc_main$18,
-    SearchBoxProductRegularPrice: _sfc_main$17,
-    SearchBoxProductCustom: _sfc_main$16,
-    SearchBoxProductCustomHtml: _sfc_main$15,
-    SearchBoxProductAddToCart: _sfc_main$14
+    SearchBoxProductImage: _sfc_main$1c,
+    SearchBoxProductTitle: _sfc_main$1b,
+    SearchBoxProductDescription: _sfc_main$1a,
+    SearchBoxProductPrice: _sfc_main$19,
+    SearchBoxProductRegularPrice: _sfc_main$18,
+    SearchBoxProductCustom: _sfc_main$17,
+    SearchBoxProductCustomHtml: _sfc_main$16,
+    SearchBoxProductAddToCart: _sfc_main$15
   }
 };
-const _sfc_main$13 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
+const _sfc_main$14 = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$4), {
   __name: "SearchBoxProductElement",
   props: {
     item: {},
@@ -4313,7 +4312,7 @@ const _hoisted_4$p = {
   key: 0,
   class: "lupa-search-box-product-add-to-cart-section"
 };
-const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProduct",
   props: {
     item: {},
@@ -4371,7 +4370,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
       }), [
         createElementVNode("div", _hoisted_2$I, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(imageElements.value, (element) => {
-            return openBlock(), createBlock(_sfc_main$13, {
+            return openBlock(), createBlock(_sfc_main$14, {
               class: "lupa-search-box-product-element",
               item: _ctx.item,
               element,
@@ -4383,7 +4382,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
         ]),
         createElementVNode("div", _hoisted_3$w, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(detailElements.value, (element) => {
-            return openBlock(), createBlock(_sfc_main$13, {
+            return openBlock(), createBlock(_sfc_main$14, {
               class: "lupa-search-box-product-element",
               item: _ctx.item,
               element,
@@ -4394,7 +4393,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$p, [
-          createVNode(_sfc_main$13, {
+          createVNode(_sfc_main$14, {
             class: "lupa-search-box-product-element",
             item: _ctx.item,
             element: addToCartElement.value,
@@ -4418,6 +4417,7 @@ const getSearchTrackingData = (searchText, type) => {
 };
 const useTrackingStore = defineStore("tracking", () => {
   const optionsStore = useOptionsStore();
+  const searchResultStore = useSearchResultStore();
   const trackSearch = ({
     queryKey,
     query,
@@ -4455,7 +4455,8 @@ const useTrackingStore = defineStore("tracking", () => {
     track(
       queryKey,
       __spreadProps(__spreadValues({}, data), {
-        analytics: data.analytics ? __spreadProps(__spreadValues({}, data.analytics), { items: mappedItems }) : void 0
+        analytics: data.analytics ? __spreadProps(__spreadValues({}, data.analytics), { items: mappedItems }) : void 0,
+        filters: searchResultStore.hasAnyFilter ? searchResultStore.filters : void 0
       }),
       options
     );
@@ -4463,7 +4464,7 @@ const useTrackingStore = defineStore("tracking", () => {
   return { trackSearch, trackResults, trackEvent };
 });
 const _hoisted_1$Z = { id: "lupa-search-box-products" };
-const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProducts",
   props: {
     items: {},
@@ -4536,7 +4537,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
             itemClicked: handleProductClick
           });
         }), 128)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(_ctx.items, (item, index) => {
-          return openBlock(), createBlock(_sfc_main$12, {
+          return openBlock(), createBlock(_sfc_main$13, {
             key: index,
             item,
             panelOptions: _ctx.panelOptions,
@@ -4550,7 +4551,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductsWrapper",
   props: {
     panel: {},
@@ -4602,7 +4603,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     const getItemsDebounced = debounce$1(getItems, props.debounce);
     return (_ctx, _cache) => {
       var _a, _b;
-      return openBlock(), createBlock(_sfc_main$11, {
+      return openBlock(), createBlock(_sfc_main$12, {
         items: (_b = (_a = searchResult.value) == null ? void 0 : _a.items) != null ? _b : [],
         panelOptions: _ctx.panel,
         labels: _ctx.labels,
@@ -4620,6 +4621,95 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+  __name: "SearchBoxRelatedSourceWrapper",
+  props: {
+    panel: {},
+    inputValue: {},
+    options: {},
+    labels: {},
+    debounce: {}
+  },
+  emits: ["fetched"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const searchBoxStore = useSearchBoxStore();
+    const { docResults } = storeToRefs(searchBoxStore);
+    const searchResult = ref(null);
+    const options = computed(() => props.options);
+    const relatedSourceIds = computed(() => {
+      var _a, _b, _c;
+      const queryKey = (_a = props.panel.sourceIds) == null ? void 0 : _a.queryKey;
+      if (!queryKey) {
+        return [];
+      }
+      const currentDocumentItems = (_c = (_b = docResults == null ? void 0 : docResults.value[queryKey]) == null ? void 0 : _b.items) != null ? _c : [];
+      const allFieldValues = currentDocumentItems.map((item) => item[props.panel.sourceIds.field]).flat();
+      const uniqueFieldValues = Array.from(new Set(allFieldValues));
+      return uniqueFieldValues;
+    });
+    const inputValueProp = computed(() => props.inputValue);
+    onMounted(() => {
+      getItemsDebounced();
+    });
+    watch(relatedSourceIds, () => {
+      getItemsDebounced();
+    });
+    watch(inputValueProp, () => {
+      getItemsDebounced();
+    });
+    const fetchRelatedItems = () => __async(this, null, function* () {
+      var _a, _b;
+      if (!((_a = props.panel.target) == null ? void 0 : _a.queryKey) || !relatedSourceIds.value.length) {
+        return { items: [], success: true, searchText: "", total: 0 };
+      }
+      try {
+        const result = yield LupaSearchSdk.queryByIds(
+          (_b = props.panel.target) == null ? void 0 : _b.queryKey,
+          relatedSourceIds.value,
+          options.value
+        );
+        if (!result.success) {
+          return { items: [], success: true, searchText: "", total: 0 };
+        }
+        return result;
+      } catch (err) {
+        console.error(err);
+        if (options == null ? void 0 : options.value.onError) {
+          options.value.onError(err);
+        }
+        return { items: [], success: true, searchText: "", total: 0 };
+      }
+    });
+    const getItems = () => __async(this, null, function* () {
+      searchResult.value = yield fetchRelatedItems();
+    });
+    const getItemsDebounced = debounce$1(getItems, props.debounce);
+    const documentPanelOptions = computed(() => {
+      return __spreadProps(__spreadValues({}, props.panel), {
+        type: SearchBoxPanelType.DOCUMENT
+      });
+    });
+    return (_ctx, _cache) => {
+      var _a, _b;
+      return openBlock(), createBlock(_sfc_main$12, {
+        items: (_b = (_a = searchResult.value) == null ? void 0 : _a.items) != null ? _b : [],
+        panelOptions: documentPanelOptions.value,
+        labels: _ctx.labels,
+        inputValue: _ctx.inputValue,
+        onProductClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("product-click"))
+      }, createSlots({ _: 2 }, [
+        _ctx.$slots.productCard ? {
+          name: "productCard",
+          fn: withCtx((props2) => [
+            renderSlot(_ctx.$slots, "productCard", normalizeProps(guardReactiveProps(props2)))
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["items", "panelOptions", "labels", "inputValue"]);
+    };
+  }
+});
 const _hoisted_1$Y = {
   key: 0,
   id: "lupa-search-box-panel"
@@ -4627,16 +4717,21 @@ const _hoisted_1$Y = {
 const _hoisted_2$H = ["data-cy"];
 const _hoisted_3$v = {
   key: 0,
-  class: "lupa-panel-title"
+  class: "lupa-panel-title lupa-panel-title-top-results"
 };
 const _hoisted_4$o = {
+  key: 1,
+  class: "lupa-panel-title"
+};
+const _hoisted_5$e = {
   key: 1,
   id: "lupa-search-box-panel"
 };
 const __default__$3 = {
   components: {
-    SearchBoxSuggestionsWrapper: _sfc_main$1d,
-    SearchBoxProductsWrapper: _sfc_main$10
+    SearchBoxSuggestionsWrapper: _sfc_main$1e,
+    SearchBoxProductsWrapper: _sfc_main$11,
+    SearchBoxRelatedSourceWrapper: _sfc_main$10
   }
 };
 const _sfc_main$$ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__$3), {
@@ -4730,6 +4825,8 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       switch (type) {
         case "suggestion":
           return "SearchBoxSuggestionsWrapper";
+        case "related-source":
+          return "SearchBoxRelatedSourceWrapper";
         default:
           return "SearchBoxProductsWrapper";
       }
@@ -4755,6 +4852,17 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
       const panel = panelItemCounts.value.find((v) => v.queryKey === queryKey);
       return (panel == null ? void 0 : panel.count) > 0 && (panel == null ? void 0 : panel.input.length) < 1;
     };
+    const canShowPanel = (panel) => {
+      var _a, _b, _c;
+      if (!((_a = panel.visibility) == null ? void 0 : _a.showWhenKeyHasNoResults)) {
+        return true;
+      }
+      const resultCountFromRelatedPanel = (_c = (_b = panelItemCounts.value.find((v) => {
+        var _a2;
+        return v.queryKey === ((_a2 = panel.visibility) == null ? void 0 : _a2.showWhenKeyHasNoResults);
+      })) == null ? void 0 : _b.count) != null ? _c : 0;
+      return resultCountFromRelatedPanel < 1;
+    };
     return (_ctx, _cache) => {
       var _a;
       return openBlock(), createElementBlock("div", {
@@ -4768,7 +4876,7 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             "data-cy": "lupa-main-panel"
           }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
-              var _a2, _b;
+              var _a2, _b, _c, _d;
               return openBlock(), createElementBlock("div", {
                 key: index,
                 class: normalizeClass([
@@ -4778,8 +4886,9 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                 "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),
-                panel.queryKey ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
-                  key: 1,
+                ((_c = panel.labels) == null ? void 0 : _c.title) ? (openBlock(), createElementBlock("div", _hoisted_4$o, toDisplayString((_d = panel.labels) == null ? void 0 : _d.title), 1)) : createCommentVNode("", true),
+                panel.queryKey && canShowPanel(panel) ? (openBlock(), createBlock(resolveDynamicComponent(getComponent(panel.type)), {
+                  key: 2,
                   panel,
                   options: sdkOptions.value,
                   debounce: _ctx.options.debounce,
@@ -4800,18 +4909,18 @@ const _sfc_main$$ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
               ], 10, _hoisted_2$H);
             }), 128))
           ], 4),
-          !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1g, {
+          !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1h, {
             key: 0,
             labels: labels.value
           }, null, 8, ["labels"])) : createCommentVNode("", true),
-          unref(hasAnyResults) || !_ctx.options.hideMoreResultsButtonOnNoResults ? (openBlock(), createBlock(_sfc_main$1j, {
+          unref(hasAnyResults) || !_ctx.options.hideMoreResultsButtonOnNoResults ? (openBlock(), createBlock(_sfc_main$1k, {
             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"])) : createCommentVNode("", true)
-        ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_4$o, [
-          createVNode(_sfc_main$1h, {
+        ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_5$e, [
+          createVNode(_sfc_main$1i, {
             options: _ctx.options.history,
             history: history.value,
             onGoToResults: handleGoToResults,
@@ -5081,7 +5190,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent({
       var _a2;
       return openBlock(), createElementBlock("div", _hoisted_1$X, [
         createElementVNode("div", _hoisted_2$G, [
-          createVNode(_sfc_main$1k, {
+          createVNode(_sfc_main$1l, {
             options: inputOptions.value,
             suggestedValue: suggestedValue.value,
             "can-close": (_a2 = _ctx.isSearchContainer) != null ? _a2 : false,
@@ -8392,7 +8501,7 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1c, {
+      return openBlock(), createBlock(_sfc_main$1d, {
         item: _ctx.item,
         options: _ctx.options,
         "wrapper-class": "lupa-search-results-image-wrapper",

package/dist/src/components/search-box/related-source/SearchBoxRelatedSourceWrapper.vue.d.ts

@@ -0,0 +1,50 @@
+import type { PropType as __PropType } from 'vue';
+import { RelatedSourcePanel } from '../../../types/search-box/SearchBoxPanel';
+import { SdkOptions } from '../../../types/General';
+import { SearchBoxOptionLabels } from '../../../types/search-box/SearchBoxOptions';
+declare const _sfc_main: import("vue").DefineComponent<{
+    panel: {
+        type: __PropType<RelatedSourcePanel>;
+        required: true;
+    };
+    inputValue: {
+        type: __PropType<string>;
+        required: true;
+    };
+    options: {
+        type: __PropType<SdkOptions>;
+        required: true;
+    };
+    labels: {
+        type: __PropType<SearchBoxOptionLabels>;
+        required: false;
+    };
+    debounce: {
+        type: __PropType<number>;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "fetched"[], "fetched", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    panel: {
+        type: __PropType<RelatedSourcePanel>;
+        required: true;
+    };
+    inputValue: {
+        type: __PropType<string>;
+        required: true;
+    };
+    options: {
+        type: __PropType<SdkOptions>;
+        required: true;
+    };
+    labels: {
+        type: __PropType<SearchBoxOptionLabels>;
+        required: false;
+    };
+    debounce: {
+        type: __PropType<number>;
+        required: false;
+    };
+}>> & {
+    onFetched?: (...args: any[]) => any;
+}, {}, {}>;
+export default _sfc_main;

package/dist/src/stores/searchBox.d.ts

@@ -18,14 +18,14 @@ export declare const useSearchBoxStore: import("pinia").StoreDefinition<"searchB
     } | {
         queryKey: string;
         count: number;
-        panel: import('../types/search-box/SearchBoxPanel').DocumentSearchBoxPanel;
+        panel: import('../types/search-box/SearchBoxPanel').DocumentSearchBoxPanel | import('../types/search-box/SearchBoxPanel').RelatedSourcePanel;
         input: string;
     })[]>;
     totalCount: import("vue").ComputedRef<number>;
     highlightedItem: import("vue").ComputedRef<{
         queryKey: string;
         index: number;
-        panel: import('../types/search-box/SearchBoxPanel').DocumentSearchBoxPanel | import('../types/search-box/SearchBoxPanel').SuggestionSearchBoxPanel;
+        panel: import('../types/search-box/SearchBoxPanel').DocumentSearchBoxPanel | import('../types/search-box/SearchBoxPanel').SuggestionSearchBoxPanel | import('../types/search-box/SearchBoxPanel').RelatedSourcePanel;
     }>;
     highlightedDocument: import("vue").ComputedRef<{
         doc: any;
@@ -88,14 +88,14 @@ export declare const useSearchBoxStore: import("pinia").StoreDefinition<"searchB
     } | {
         queryKey: string;
         count: number;
-        panel: import('../types/search-box/SearchBoxPanel').DocumentSearchBoxPanel;
+        panel: import('../types/search-box/SearchBoxPanel').DocumentSearchBoxPanel | import('../types/search-box/SearchBoxPanel').RelatedSourcePanel;
         input: string;
     })[]>;
     totalCount: import("vue").ComputedRef<number>;
     highlightedItem: import("vue").ComputedRef<{
         queryKey: string;
         index: number;
-        panel: import('../types/search-box/SearchBoxPanel').DocumentSearchBoxPanel | import('../types/search-box/SearchBoxPanel').SuggestionSearchBoxPanel;
+        panel: import('../types/search-box/SearchBoxPanel').DocumentSearchBoxPanel | import('../types/search-box/SearchBoxPanel').SuggestionSearchBoxPanel | import('../types/search-box/SearchBoxPanel').RelatedSourcePanel;
     }>;
     highlightedDocument: import("vue").ComputedRef<{
         doc: any;
@@ -158,14 +158,14 @@ export declare const useSearchBoxStore: import("pinia").StoreDefinition<"searchB
     } | {
         queryKey: string;
         count: number;
-        panel: import('../types/search-box/SearchBoxPanel').DocumentSearchBoxPanel;
+        panel: import('../types/search-box/SearchBoxPanel').DocumentSearchBoxPanel | import('../types/search-box/SearchBoxPanel').RelatedSourcePanel;
         input: string;
     })[]>;
     totalCount: import("vue").ComputedRef<number>;
     highlightedItem: import("vue").ComputedRef<{
         queryKey: string;
         index: number;
-        panel: import('../types/search-box/SearchBoxPanel').DocumentSearchBoxPanel | import('../types/search-box/SearchBoxPanel').SuggestionSearchBoxPanel;
+        panel: import('../types/search-box/SearchBoxPanel').DocumentSearchBoxPanel | import('../types/search-box/SearchBoxPanel').SuggestionSearchBoxPanel | import('../types/search-box/SearchBoxPanel').RelatedSourcePanel;
     }>;
     highlightedDocument: import("vue").ComputedRef<{
         doc: any;

package/dist/src/types/search-box/Common.d.ts

@@ -1,4 +1,4 @@
-import type { Document, Suggestion, ReportableEventType } from '@getlupa/client-sdk/Types';
+import type { Document, Suggestion, ReportableEventType, FilterGroup } from '@getlupa/client-sdk/Types';
 import type { AnalyticsEventType } from '../AnalyticsOptions';
 import type { SearchBoxPanelType } from './SearchBoxPanel';
 export type FetchedData = {
@@ -42,6 +42,7 @@ export type TrackableEventData = {
     options?: {
         allowEmptySearchQuery: boolean;
     };
+    filters?: FilterGroup;
 };
 export type HighlightedDocInfo = {
     doc?: Document;

package/dist/src/types/search-box/SearchBoxPanel.d.ts

@@ -3,12 +3,14 @@ import type { Document } from '@getlupa/client-sdk/Types';
 import { CustomDocumentHtmlAttributes } from '../General';
 export declare enum SearchBoxPanelType {
     SUGGESTION = "suggestion",
-    DOCUMENT = "document"
+    DOCUMENT = "document",
+    RELATED_SOURCE = "related-source"
 }
 export type SearchBoxPanelLinks = {
     details: string;
 };
 export type SearchBoxPanelLabels = {
+    title?: string;
     topResultsTitle?: string;
 };
 export type SearchBoxPanelBase = {
@@ -16,6 +18,9 @@ export type SearchBoxPanelBase = {
     queryKey: string;
     limit: number;
     labels?: SearchBoxPanelLabels;
+    visibility?: {
+        showWhenKeyHasNoResults?: string;
+    };
 };
 export type DocumentSearchBoxPanel = SearchBoxPanelBase & {
     type: SearchBoxPanelType.DOCUMENT;
@@ -28,9 +33,19 @@ export type DocumentSearchBoxPanel = SearchBoxPanelBase & {
     isInStock?: (doc: Document) => boolean;
     customDocumentHtmlAttributes?: CustomDocumentHtmlAttributes;
 };
+export type RelatedSourcePanel = Omit<DocumentSearchBoxPanel, 'type'> & {
+    type: SearchBoxPanelType.RELATED_SOURCE;
+    sourceIds: {
+        queryKey: string;
+        field: string;
+    };
+    target: {
+        queryKey: string;
+    };
+};
 export type SuggestionSearchBoxPanel = SearchBoxPanelBase & {
     type: SearchBoxPanelType.SUGGESTION;
     highlight: boolean;
     customClassName?: string;
 };
-export type SearchBoxPanel = DocumentSearchBoxPanel | SuggestionSearchBoxPanel;
+export type SearchBoxPanel = DocumentSearchBoxPanel | SuggestionSearchBoxPanel | RelatedSourcePanel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getlupa/vue",
-  "version": "0.8.6",
+  "version": "0.9.0",
   "main": "dist/lupaSearch.mjs",
   "module": "dist/lupaSearch.mjs",
   "types": "dist/src/index.d.ts",
@@ -23,7 +23,7 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@getlupa/client-sdk": "^1.4.1",
+    "@getlupa/client-sdk": "^1.4.2",
     "@pinia/testing": "^0.1.2",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",