@getlupa/vue 0.15.8 → 0.15.10

package/dist/lupaSearch.js

@@ -2844,12 +2844,15 @@ const getFacetParam = (key, value, type = FACET_PARAMS_TYPE.TERMS) => {
     value
   };
 };
-const toggleTermFilter = (appendParams, facetAction, getQueryParamName, currentFilters) => {
+const toggleTermFilter = (appendParams, facetAction, getQueryParamName, currentFilters, paramsToRemove = []) => {
   const currentFilter = currentFilters == null ? void 0 : currentFilters[facetAction.key];
   const newParams = toggleTermParam(currentFilter, facetAction.value);
   appendParams({
     params: [getFacetParam(facetAction.key, newParams)],
-    paramsToRemove: [getQueryParamName ? getQueryParamName(QUERY_PARAMS.PAGE) : QUERY_PARAMS.PAGE]
+    paramsToRemove: [
+      ...paramsToRemove,
+      ...[getQueryParamName ? getQueryParamName(QUERY_PARAMS.PAGE) : QUERY_PARAMS.PAGE]
+    ]
   });
 };
 const replaceHierarchyParam = (params = [], param = "") => {
@@ -19466,26 +19469,104 @@ var RelatedQuerySourceType = /* @__PURE__ */ ((RelatedQuerySourceType2) => {
   RelatedQuerySourceType2["FACETS"] = "facets";
   return RelatedQuerySourceType2;
 })(RelatedQuerySourceType || {});
-const extractFacetsRelatedSource = (source, searchResults) => {
+const combineIdenticalValues = (results) => {
+  const result2 = [];
+  const keys = /* @__PURE__ */ new Set();
+  for (const item of results) {
+    const trimmedValue = item.value.trim().toLowerCase();
+    if (!keys.has(trimmedValue)) {
+      keys.add(trimmedValue);
+      result2.push({ key: item.key, value: item.value.trim() });
+    }
+  }
+  return result2;
+};
+const processFacetsRelatedSourceSuggestionQuery = (searchText, querySource, options, activeFilters) => __async(exports, null, function* () {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  if ((_a = Object.keys(activeFilters != null ? activeFilters : {})) == null ? void 0 : _a.length) {
+    return [];
+  }
+  const lupaQuery = {
+    searchText,
+    limit: 1,
+    trackTerm: false
+  };
+  try {
+    const result2 = yield LupaSearchSdk.suggestions(querySource.queryKey, lupaQuery, options);
+    if (!result2.success || ((_c = (_b = result2.items) == null ? void 0 : _b[0].suggestion) == null ? void 0 : _c.toLocaleLowerCase()) !== (searchText == null ? void 0 : searchText.toLocaleLowerCase())) {
+      return [];
+    }
+    return (_i = (_h = (_f = (_e = (_d = result2.items) == null ? void 0 : _d[0].facets) == null ? void 0 : _e[querySource.facetKey]) == null ? void 0 : _f.map((item) => ({
+      key: querySource.facetKey,
+      value: item.title
+    }))) == null ? void 0 : _h.slice(0, (_g = querySource.maxCount) != null ? _g : 5)) != null ? _i : [];
+  } catch (error) {
+    return [];
+  }
+});
+const processFacetsRelatedSourceDocumentQuery = (searchText, querySource, options, activeFilters) => __async(exports, null, function* () {
+  const lupaQuery = {
+    searchText,
+    limit: 1,
+    filters: activeFilters,
+    trackTerm: false
+  };
+  try {
+    const result2 = yield LupaSearchSdk.query(querySource.queryKey, lupaQuery, options);
+    if (!result2.success) {
+      return [];
+    }
+    return extractFacetsRelatedSourceFromOriginalQuery(
+      {
+        type: RelatedQuerySourceType.FACETS,
+        key: querySource.facetKey,
+        count: querySource.maxCount
+      },
+      result2
+    );
+  } catch (error) {
+    return [];
+  }
+});
+const processFacetsRelatedSourceQuery = (searchText, query, options, activeFilters) => __async(exports, null, function* () {
+  switch (query.type) {
+    case "document":
+      return processFacetsRelatedSourceDocumentQuery(searchText, query, options, activeFilters);
+    case "suggestion":
+      return processFacetsRelatedSourceSuggestionQuery(searchText, query, options, activeFilters);
+  }
+});
+const extractFacetsRelatedSource = (source, searchResults, options, activeFilters) => __async(exports, null, function* () {
+  var _a, _b;
+  if (!((_a = source.queries) == null ? void 0 : _a.length)) {
+    return extractFacetsRelatedSourceFromOriginalQuery(source, searchResults);
+  }
+  const promises = source.queries.map(
+    (query) => processFacetsRelatedSourceQuery(searchResults.searchText, query, options, activeFilters)
+  );
+  const result2 = (yield Promise.all(promises)).flat();
+  return (_b = combineIdenticalValues(result2)) == null ? void 0 : _b.slice(0, source.count);
+});
+const extractFacetsRelatedSourceFromOriginalQuery = (source, searchResults) => __async(exports, null, function* () {
   var _a, _b, _c, _d, _e;
   const facet = (_a = searchResults.facets) == null ? void 0 : _a.find((facet2) => facet2.key === source.key);
   if (!facet) {
     return [];
   }
   if (facet.type === "terms") {
-    return (_c = (_b = facet.items) == null ? void 0 : _b.slice(0, source.count)) == null ? void 0 : _c.map((item) => item.title);
+    return (_c = (_b = facet.items) == null ? void 0 : _b.slice(0, source.count)) == null ? void 0 : _c.map((item) => ({ key: source.key, value: item.title }));
   }
   if (facet.type === "hierarchy") {
-    return (_e = (_d = facet.items) == null ? void 0 : _d.slice(0, source.count)) == null ? void 0 : _e.map((item) => item.title);
+    return (_e = (_d = facet.items) == null ? void 0 : _d.slice(0, source.count)) == null ? void 0 : _e.map((item) => ({ key: source.key, value: item.title }));
   }
   return [];
-};
-const extractRelatedSource = (source, searchResults) => {
+});
+const extractRelatedSource = (source, searchResults, options, activeFilters) => __async(exports, null, function* () {
   switch (source.type) {
     case RelatedQuerySourceType.FACETS:
-      return extractFacetsRelatedSource(source, searchResults);
+      return extractFacetsRelatedSource(source, searchResults, options, activeFilters);
   }
-};
+});
 const _hoisted_1$h = { class: "lupa-related-query-item" };
 const _hoisted_2$e = { class: "lupa-related-query-image" };
 const _hoisted_3$a = { class: "lupa-related-query-label" };
@@ -19498,12 +19579,16 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
   __name: "RelatedQueryPanel",
   props: {
     query: {},
-    options: {}
+    sourceKey: {},
+    options: {},
+    existingItemsFromOtherQueries: {}
   },
-  setup(__props) {
+  emits: ["loaded"],
+  setup(__props, { emit }) {
     const props = __props;
     const loading = vue.ref(false);
     const relatedQueryResult = vue.ref(null);
+    const itemToDisplay = vue.ref(null);
     const optionsStore = useOptionsStore();
     const searchResultStore = useSearchResultStore();
     const { searchResultOptions } = storeToRefs(optionsStore);
@@ -19524,10 +19609,6 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
       var _a, _b;
       return ((_b = (_a = relatedQueryResult.value) == null ? void 0 : _a.items) == null ? void 0 : _b.length) > 0;
     });
-    const firstResultItem = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = relatedQueryResult.value) == null ? void 0 : _a.items) == null ? void 0 : _b[0];
-    });
     const totalItemCount = vue.computed(() => {
       var _a, _b;
       return (_b = (_a = relatedQueryResult.value) == null ? void 0 : _a.total) != null ? _b : 0;
@@ -19537,19 +19618,19 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
       return ((_a = props.options.source) == null ? void 0 : _a.mode) === "filter" ? (_b = searchResult.value) == null ? void 0 : _b.searchText : (_c = props.query) == null ? void 0 : _c.toLowerCase();
     });
     const relatedQueryFilters = vue.computed(() => {
-      var _a, _b, _c;
+      var _a;
       return ((_a = props.options.source) == null ? void 0 : _a.mode) === "filter" ? {
-        [(_c = (_b = props.options) == null ? void 0 : _b.source) == null ? void 0 : _c.key]: [props.query]
+        [props.sourceKey]: [props.query]
       } : {};
     });
     const searchForRelatedQuery = () => __async(this, null, function* () {
-      var _a, _b, _c;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
       if (!props.query) {
         return;
       }
       const lupaQuery = {
         searchText: searchText.value,
-        limit: 1,
+        limit: 3,
         filters: relatedQueryFilters.value,
         trackTerm: false
       };
@@ -19563,8 +19644,13 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
         if (result2.success) {
           relatedQueryResult.value = result2;
         }
+        const firstItem = (_c = (_b = relatedQueryResult.value) == null ? void 0 : _b.items) == null ? void 0 : _c[0];
+        itemToDisplay.value = (_f = (_e = (_d = relatedQueryResult == null ? void 0 : relatedQueryResult.value) == null ? void 0 : _d.items) == null ? void 0 : _e.find(
+          (i) => !props.existingItemsFromOtherQueries[`${i.id}`]
+        )) != null ? _f : firstItem;
+        emit("loaded", itemToDisplay.value);
       } catch (error) {
-        (_c = (_b = searchResultOptions.value) == null ? void 0 : _b.options) == null ? void 0 : _c.onError(error);
+        (_h = (_g = searchResultOptions.value) == null ? void 0 : _g.options) == null ? void 0 : _h.onError(error);
       } finally {
         loading.value = false;
       }
@@ -19582,11 +19668,11 @@ const _sfc_main$j = /* @__PURE__ */ vue.defineComponent({
       var _a;
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
         vue.createElementVNode("div", _hoisted_2$e, [
-          firstResultItem.value && image.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1l, {
+          itemToDisplay.value && image.value ? (vue.openBlock(), vue.createBlock(_sfc_main$1l, {
             key: 0,
             "wrapper-class": "lupa-related-query-image-wrapper",
             "image-class": "lupa-related-query-image",
-            item: firstResultItem.value,
+            item: itemToDisplay.value,
             options: image.value
           }, null, 8, ["item", "options"])) : vue.createCommentVNode("", true)
         ]),
@@ -19618,47 +19704,63 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     const paramsStore = useParamsStore();
     const optionsStore = useOptionsStore();
     const { searchResult } = storeToRefs(searchResultStore);
+    const { searchResultOptions } = storeToRefs(optionsStore);
+    const relatedQueries = vue.ref([]);
+    const allDisplayItems = vue.ref({});
+    const querySourceResultMap = vue.ref({});
     const currentSearchText = vue.computed(() => {
       var _a, _b;
       return (_b = (_a = searchResult.value) == null ? void 0 : _a.searchText) != null ? _b : "";
     });
-    const relatedQueries = vue.computed(() => {
-      if (!props.options || !searchResult.value) {
-        return [];
+    const currentFilters = vue.computed(() => paramsStore.filters);
+    const querySources = vue.computed(() => {
+      var _a, _b, _c, _d;
+      return (_d = (_c = (_b = (_a = props.options) == null ? void 0 : _a.source) == null ? void 0 : _b.queries) == null ? void 0 : _c.map((q) => q.facetKey)) != null ? _d : [];
+    });
+    const currentFiltersWithoutQuerySources = vue.computed(() => {
+      const filters = {};
+      if (currentFilters.value) {
+        for (const key in currentFilters.value) {
+          if (!querySources.value.includes(key)) {
+            filters[key] = currentFilters.value[key];
+          }
+        }
       }
-      const queries = extractRelatedSource(props.options.source, searchResult.value);
-      return queries;
+      return filters;
     });
+    vue.watch(searchResult, () => __async(this, null, function* () {
+      allDisplayItems.value = {};
+      querySourceResultMap.value = {};
+      if (!props.options || !searchResult.value) {
+        relatedQueries.value = [];
+      }
+      const queries = yield extractRelatedSource(
+        props.options.source,
+        searchResult.value,
+        searchResultOptions.value.options,
+        currentFiltersWithoutQuerySources.value
+      );
+      relatedQueries.value = queries;
+    }));
     const hasEnoughRelatedQueries = vue.computed(() => {
       return relatedQueries.value.length > 1;
     });
-    const goToResults = ({ searchText }) => {
-      paramsStore.goToResults({ searchText });
-    };
     const handleRelatedQueryClick = (query) => {
       var _a;
       if (((_a = props.options.source) == null ? void 0 : _a.mode) === "filter") {
         handleFilter(query);
       } else {
-        goToResults({ searchText: query });
+        paramsStore.goToResults({ searchText: query.value });
       }
     };
     const handleFilter = (query) => {
-      var _a, _b;
-      const facet = (_b = (_a = searchResult.value) == null ? void 0 : _a.facets) == null ? void 0 : _b.find(
-        (facet2) => {
-          var _a2, _b2;
-          return facet2.key === ((_b2 = (_a2 = props.options) == null ? void 0 : _a2.source) == null ? void 0 : _b2.key);
-        }
-      );
-      if (!facet || facet.type !== "terms") {
-        return [];
-      }
+      var _a;
       toggleTermFilter(
         paramsStore.appendParams,
-        { type: "terms", key: facet.key, value: query },
+        { type: "terms", key: query.key, value: query.value },
         optionsStore.getQueryParamName,
-        {}
+        {},
+        (_a = querySources.value) == null ? void 0 : _a.map((q) => `f.${q}`)
       );
     };
     const getSelectedFilterClass = (query) => {
@@ -19666,9 +19768,13 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
       if (((_a = props.options.source) == null ? void 0 : _a.mode) !== "filter") {
         return "";
       }
-      return Array.isArray((_c = (_b = searchResult.value) == null ? void 0 : _b.filters) == null ? void 0 : _c[props.options.source.key]) && ((_f = (_e = (_d = searchResult.value) == null ? void 0 : _d.filters) == null ? void 0 : _e[props.options.source.key]) == null ? void 0 : _f.includes(
-        query
-      )) ? "lupa-selected-related-query-filter" : "";
+      return Array.isArray((_c = (_b = searchResult.value) == null ? void 0 : _b.filters) == null ? void 0 : _c[query.key]) && ((_f = (_e = (_d = searchResult.value) == null ? void 0 : _d.filters) == null ? void 0 : _e[query.key]) == null ? void 0 : _f.includes(query.value)) ? "lupa-selected-related-query-filter" : "";
+    };
+    const processLoadedItem = (query, item) => {
+      if (item) {
+        allDisplayItems.value[`${item.id}`] = item;
+      }
+      querySourceResultMap.value[query.value] = Boolean(item);
     };
     return (_ctx, _cache) => {
       var _a, _b, _c, _d;
@@ -19676,19 +19782,24 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
         ((_b = (_a = _ctx.options) == null ? void 0 : _a.labels) == null ? void 0 : _b.title) ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_2$d, vue.toDisplayString((_d = (_c = _ctx.options) == null ? void 0 : _c.labels) == null ? void 0 : _d.title), 1)) : vue.createCommentVNode("", true),
         vue.createElementVNode("ul", null, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(relatedQueries.value, (query) => {
-            return vue.openBlock(), vue.createElementBlock("li", {
-              key: query + currentSearchText.value,
+            return vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
+              key: query.value + query.key + currentSearchText.value,
               class: vue.normalizeClass(getSelectedFilterClass(query))
             }, [
               vue.createElementVNode("a", {
                 onClick: ($event) => handleRelatedQueryClick(query)
               }, [
                 vue.createVNode(_sfc_main$j, {
+                  "source-key": query.key,
                   options: _ctx.options,
-                  query
-                }, null, 8, ["options", "query"])
+                  query: query.value,
+                  "existing-items-from-other-queries": allDisplayItems.value,
+                  onLoaded: (item) => processLoadedItem(query, item)
+                }, null, 8, ["source-key", "options", "query", "existing-items-from-other-queries", "onLoaded"])
               ], 8, _hoisted_3$9)
-            ], 2);
+            ], 2)), [
+              [vue.vShow, querySourceResultMap.value[query.value] !== false]
+            ]);
           }), 128))
         ])
       ])) : vue.createCommentVNode("", true);
@@ -19996,7 +20107,10 @@ const _hoisted_2$a = {
   class: "lupa-category-back"
 };
 const _hoisted_3$6 = ["href"];
-const _hoisted_4$3 = { class: "lupa-child-category-list" };
+const _hoisted_4$3 = {
+  key: 1,
+  class: "lupa-child-category-list"
+};
 const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
   __name: "CategoryTopFilters",
   props: {
@@ -20010,6 +20124,10 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
       var _a, _b;
       return Boolean((_b = (_a = props.options.categories) == null ? void 0 : _a.back) == null ? void 0 : _b.title);
     });
+    const hasRelatedCategoryChildren = vue.computed(() => {
+      var _a;
+      return ((_a = relatedCategoryChildren.value) == null ? void 0 : _a.length) > 0;
+    });
     const backTitle = vue.computed(() => {
       var _a, _b;
       return (_b = (_a = props.options.categories) == null ? void 0 : _a.back) == null ? void 0 : _b.title;
@@ -20036,7 +20154,10 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
     };
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(["lupa-category-top-mobile-filters", { "lupa-has-back-button": hasBackButton.value }])
+        class: vue.normalizeClass(["lupa-category-top-mobile-filters", {
+          "lupa-has-back-button": hasBackButton.value,
+          "has-related-category-children": hasRelatedCategoryChildren.value
+        }])
       }, [
         vue.createElementVNode("div", _hoisted_1$d, [
           hasBackButton.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$a, [
@@ -20046,7 +20167,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
               onClick: handleNavigationBack
             }, vue.toDisplayString(backTitle.value), 9, _hoisted_3$6)
           ])) : vue.createCommentVNode("", true),
-          vue.createElementVNode("div", _hoisted_4$3, [
+          hasRelatedCategoryChildren.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$3, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(relatedCategoryChildren), (child) => {
               return vue.openBlock(), vue.createBlock(_sfc_main$U, {
                 key: getCategoryKey(child),
@@ -20054,7 +20175,7 @@ const _sfc_main$f = /* @__PURE__ */ vue.defineComponent({
                 options: categoryOptions.value
               }, null, 8, ["item", "options"]);
             }), 128))
-          ]),
+          ])) : vue.createCommentVNode("", true),
           vue.createVNode(_sfc_main$B, {
             class: "lupa-toolbar-mobile",
             "pagination-location": "top",

package/dist/lupaSearch.mjs

@@ -49,7 +49,7 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { toRaw, isRef, isReactive, toRef, effectScope, ref, markRaw, hasInjectionContext, inject, getCurrentInstance, watch, reactive, nextTick, computed, unref, getCurrentScope, onScopeDispose, toRefs, defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, withDirectives, mergeProps, vModelText, createCommentVNode, toDisplayString, onMounted, onBeforeMount, Fragment, renderList, createBlock, onBeforeUnmount, normalizeStyle, Transition, withCtx, toHandlers, withModifiers, resolveDynamicComponent, renderSlot, createSlots, createVNode, createTextVNode, normalizeProps, guardReactiveProps, onUnmounted, resolveComponent, vModelSelect, h as h$1, provide, cloneVNode, vShow } from "vue";
+import { toRaw, isRef, isReactive, toRef, effectScope, ref, markRaw, hasInjectionContext, inject, getCurrentInstance, watch, reactive, nextTick, computed, unref, getCurrentScope, onScopeDispose, toRefs, defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, withDirectives, mergeProps, vModelText, createCommentVNode, toDisplayString, onMounted, onBeforeMount, Fragment, renderList, createBlock, onBeforeUnmount, normalizeStyle, Transition, withCtx, toHandlers, withModifiers, resolveDynamicComponent, renderSlot, createSlots, createVNode, createTextVNode, normalizeProps, guardReactiveProps, onUnmounted, resolveComponent, vModelSelect, vShow, h as h$1, provide, cloneVNode } from "vue";
 var isVue2 = false;
 function set(target, key, val) {
   if (Array.isArray(target)) {
@@ -2842,12 +2842,15 @@ const getFacetParam = (key, value, type = FACET_PARAMS_TYPE.TERMS) => {
     value
   };
 };
-const toggleTermFilter = (appendParams, facetAction, getQueryParamName, currentFilters) => {
+const toggleTermFilter = (appendParams, facetAction, getQueryParamName, currentFilters, paramsToRemove = []) => {
   const currentFilter = currentFilters == null ? void 0 : currentFilters[facetAction.key];
   const newParams = toggleTermParam(currentFilter, facetAction.value);
   appendParams({
     params: [getFacetParam(facetAction.key, newParams)],
-    paramsToRemove: [getQueryParamName ? getQueryParamName(QUERY_PARAMS.PAGE) : QUERY_PARAMS.PAGE]
+    paramsToRemove: [
+      ...paramsToRemove,
+      ...[getQueryParamName ? getQueryParamName(QUERY_PARAMS.PAGE) : QUERY_PARAMS.PAGE]
+    ]
   });
 };
 const replaceHierarchyParam = (params = [], param = "") => {
@@ -19464,26 +19467,104 @@ var RelatedQuerySourceType = /* @__PURE__ */ ((RelatedQuerySourceType2) => {
   RelatedQuerySourceType2["FACETS"] = "facets";
   return RelatedQuerySourceType2;
 })(RelatedQuerySourceType || {});
-const extractFacetsRelatedSource = (source, searchResults) => {
+const combineIdenticalValues = (results) => {
+  const result2 = [];
+  const keys = /* @__PURE__ */ new Set();
+  for (const item of results) {
+    const trimmedValue = item.value.trim().toLowerCase();
+    if (!keys.has(trimmedValue)) {
+      keys.add(trimmedValue);
+      result2.push({ key: item.key, value: item.value.trim() });
+    }
+  }
+  return result2;
+};
+const processFacetsRelatedSourceSuggestionQuery = (searchText, querySource, options, activeFilters) => __async(void 0, null, function* () {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  if ((_a = Object.keys(activeFilters != null ? activeFilters : {})) == null ? void 0 : _a.length) {
+    return [];
+  }
+  const lupaQuery = {
+    searchText,
+    limit: 1,
+    trackTerm: false
+  };
+  try {
+    const result2 = yield LupaSearchSdk.suggestions(querySource.queryKey, lupaQuery, options);
+    if (!result2.success || ((_c = (_b = result2.items) == null ? void 0 : _b[0].suggestion) == null ? void 0 : _c.toLocaleLowerCase()) !== (searchText == null ? void 0 : searchText.toLocaleLowerCase())) {
+      return [];
+    }
+    return (_i = (_h = (_f = (_e = (_d = result2.items) == null ? void 0 : _d[0].facets) == null ? void 0 : _e[querySource.facetKey]) == null ? void 0 : _f.map((item) => ({
+      key: querySource.facetKey,
+      value: item.title
+    }))) == null ? void 0 : _h.slice(0, (_g = querySource.maxCount) != null ? _g : 5)) != null ? _i : [];
+  } catch (error) {
+    return [];
+  }
+});
+const processFacetsRelatedSourceDocumentQuery = (searchText, querySource, options, activeFilters) => __async(void 0, null, function* () {
+  const lupaQuery = {
+    searchText,
+    limit: 1,
+    filters: activeFilters,
+    trackTerm: false
+  };
+  try {
+    const result2 = yield LupaSearchSdk.query(querySource.queryKey, lupaQuery, options);
+    if (!result2.success) {
+      return [];
+    }
+    return extractFacetsRelatedSourceFromOriginalQuery(
+      {
+        type: RelatedQuerySourceType.FACETS,
+        key: querySource.facetKey,
+        count: querySource.maxCount
+      },
+      result2
+    );
+  } catch (error) {
+    return [];
+  }
+});
+const processFacetsRelatedSourceQuery = (searchText, query, options, activeFilters) => __async(void 0, null, function* () {
+  switch (query.type) {
+    case "document":
+      return processFacetsRelatedSourceDocumentQuery(searchText, query, options, activeFilters);
+    case "suggestion":
+      return processFacetsRelatedSourceSuggestionQuery(searchText, query, options, activeFilters);
+  }
+});
+const extractFacetsRelatedSource = (source, searchResults, options, activeFilters) => __async(void 0, null, function* () {
+  var _a, _b;
+  if (!((_a = source.queries) == null ? void 0 : _a.length)) {
+    return extractFacetsRelatedSourceFromOriginalQuery(source, searchResults);
+  }
+  const promises = source.queries.map(
+    (query) => processFacetsRelatedSourceQuery(searchResults.searchText, query, options, activeFilters)
+  );
+  const result2 = (yield Promise.all(promises)).flat();
+  return (_b = combineIdenticalValues(result2)) == null ? void 0 : _b.slice(0, source.count);
+});
+const extractFacetsRelatedSourceFromOriginalQuery = (source, searchResults) => __async(void 0, null, function* () {
   var _a, _b, _c, _d, _e;
   const facet = (_a = searchResults.facets) == null ? void 0 : _a.find((facet2) => facet2.key === source.key);
   if (!facet) {
     return [];
   }
   if (facet.type === "terms") {
-    return (_c = (_b = facet.items) == null ? void 0 : _b.slice(0, source.count)) == null ? void 0 : _c.map((item) => item.title);
+    return (_c = (_b = facet.items) == null ? void 0 : _b.slice(0, source.count)) == null ? void 0 : _c.map((item) => ({ key: source.key, value: item.title }));
   }
   if (facet.type === "hierarchy") {
-    return (_e = (_d = facet.items) == null ? void 0 : _d.slice(0, source.count)) == null ? void 0 : _e.map((item) => item.title);
+    return (_e = (_d = facet.items) == null ? void 0 : _d.slice(0, source.count)) == null ? void 0 : _e.map((item) => ({ key: source.key, value: item.title }));
   }
   return [];
-};
-const extractRelatedSource = (source, searchResults) => {
+});
+const extractRelatedSource = (source, searchResults, options, activeFilters) => __async(void 0, null, function* () {
   switch (source.type) {
     case RelatedQuerySourceType.FACETS:
-      return extractFacetsRelatedSource(source, searchResults);
+      return extractFacetsRelatedSource(source, searchResults, options, activeFilters);
   }
-};
+});
 const _hoisted_1$h = { class: "lupa-related-query-item" };
 const _hoisted_2$e = { class: "lupa-related-query-image" };
 const _hoisted_3$a = { class: "lupa-related-query-label" };
@@ -19496,12 +19577,16 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "RelatedQueryPanel",
   props: {
     query: {},
-    options: {}
+    sourceKey: {},
+    options: {},
+    existingItemsFromOtherQueries: {}
   },
-  setup(__props) {
+  emits: ["loaded"],
+  setup(__props, { emit }) {
     const props = __props;
     const loading = ref(false);
     const relatedQueryResult = ref(null);
+    const itemToDisplay = ref(null);
     const optionsStore = useOptionsStore();
     const searchResultStore = useSearchResultStore();
     const { searchResultOptions } = storeToRefs(optionsStore);
@@ -19522,10 +19607,6 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       var _a, _b;
       return ((_b = (_a = relatedQueryResult.value) == null ? void 0 : _a.items) == null ? void 0 : _b.length) > 0;
     });
-    const firstResultItem = computed(() => {
-      var _a, _b;
-      return (_b = (_a = relatedQueryResult.value) == null ? void 0 : _a.items) == null ? void 0 : _b[0];
-    });
     const totalItemCount = computed(() => {
       var _a, _b;
       return (_b = (_a = relatedQueryResult.value) == null ? void 0 : _a.total) != null ? _b : 0;
@@ -19535,19 +19616,19 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       return ((_a = props.options.source) == null ? void 0 : _a.mode) === "filter" ? (_b = searchResult.value) == null ? void 0 : _b.searchText : (_c = props.query) == null ? void 0 : _c.toLowerCase();
     });
     const relatedQueryFilters = computed(() => {
-      var _a, _b, _c;
+      var _a;
       return ((_a = props.options.source) == null ? void 0 : _a.mode) === "filter" ? {
-        [(_c = (_b = props.options) == null ? void 0 : _b.source) == null ? void 0 : _c.key]: [props.query]
+        [props.sourceKey]: [props.query]
       } : {};
     });
     const searchForRelatedQuery = () => __async(this, null, function* () {
-      var _a, _b, _c;
+      var _a, _b, _c, _d, _e, _f, _g, _h;
       if (!props.query) {
         return;
       }
       const lupaQuery = {
         searchText: searchText.value,
-        limit: 1,
+        limit: 3,
         filters: relatedQueryFilters.value,
         trackTerm: false
       };
@@ -19561,8 +19642,13 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
         if (result2.success) {
           relatedQueryResult.value = result2;
         }
+        const firstItem = (_c = (_b = relatedQueryResult.value) == null ? void 0 : _b.items) == null ? void 0 : _c[0];
+        itemToDisplay.value = (_f = (_e = (_d = relatedQueryResult == null ? void 0 : relatedQueryResult.value) == null ? void 0 : _d.items) == null ? void 0 : _e.find(
+          (i) => !props.existingItemsFromOtherQueries[`${i.id}`]
+        )) != null ? _f : firstItem;
+        emit("loaded", itemToDisplay.value);
       } catch (error) {
-        (_c = (_b = searchResultOptions.value) == null ? void 0 : _b.options) == null ? void 0 : _c.onError(error);
+        (_h = (_g = searchResultOptions.value) == null ? void 0 : _g.options) == null ? void 0 : _h.onError(error);
       } finally {
         loading.value = false;
       }
@@ -19580,11 +19666,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       var _a;
       return openBlock(), createElementBlock("div", _hoisted_1$h, [
         createElementVNode("div", _hoisted_2$e, [
-          firstResultItem.value && image.value ? (openBlock(), createBlock(_sfc_main$1l, {
+          itemToDisplay.value && image.value ? (openBlock(), createBlock(_sfc_main$1l, {
             key: 0,
             "wrapper-class": "lupa-related-query-image-wrapper",
             "image-class": "lupa-related-query-image",
-            item: firstResultItem.value,
+            item: itemToDisplay.value,
             options: image.value
           }, null, 8, ["item", "options"])) : createCommentVNode("", true)
         ]),
@@ -19616,47 +19702,63 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const paramsStore = useParamsStore();
     const optionsStore = useOptionsStore();
     const { searchResult } = storeToRefs(searchResultStore);
+    const { searchResultOptions } = storeToRefs(optionsStore);
+    const relatedQueries = ref([]);
+    const allDisplayItems = ref({});
+    const querySourceResultMap = ref({});
     const currentSearchText = computed(() => {
       var _a, _b;
       return (_b = (_a = searchResult.value) == null ? void 0 : _a.searchText) != null ? _b : "";
     });
-    const relatedQueries = computed(() => {
-      if (!props.options || !searchResult.value) {
-        return [];
+    const currentFilters = computed(() => paramsStore.filters);
+    const querySources = computed(() => {
+      var _a, _b, _c, _d;
+      return (_d = (_c = (_b = (_a = props.options) == null ? void 0 : _a.source) == null ? void 0 : _b.queries) == null ? void 0 : _c.map((q) => q.facetKey)) != null ? _d : [];
+    });
+    const currentFiltersWithoutQuerySources = computed(() => {
+      const filters = {};
+      if (currentFilters.value) {
+        for (const key in currentFilters.value) {
+          if (!querySources.value.includes(key)) {
+            filters[key] = currentFilters.value[key];
+          }
+        }
       }
-      const queries = extractRelatedSource(props.options.source, searchResult.value);
-      return queries;
+      return filters;
     });
+    watch(searchResult, () => __async(this, null, function* () {
+      allDisplayItems.value = {};
+      querySourceResultMap.value = {};
+      if (!props.options || !searchResult.value) {
+        relatedQueries.value = [];
+      }
+      const queries = yield extractRelatedSource(
+        props.options.source,
+        searchResult.value,
+        searchResultOptions.value.options,
+        currentFiltersWithoutQuerySources.value
+      );
+      relatedQueries.value = queries;
+    }));
     const hasEnoughRelatedQueries = computed(() => {
       return relatedQueries.value.length > 1;
     });
-    const goToResults = ({ searchText }) => {
-      paramsStore.goToResults({ searchText });
-    };
     const handleRelatedQueryClick = (query) => {
       var _a;
       if (((_a = props.options.source) == null ? void 0 : _a.mode) === "filter") {
         handleFilter(query);
       } else {
-        goToResults({ searchText: query });
+        paramsStore.goToResults({ searchText: query.value });
       }
     };
     const handleFilter = (query) => {
-      var _a, _b;
-      const facet = (_b = (_a = searchResult.value) == null ? void 0 : _a.facets) == null ? void 0 : _b.find(
-        (facet2) => {
-          var _a2, _b2;
-          return facet2.key === ((_b2 = (_a2 = props.options) == null ? void 0 : _a2.source) == null ? void 0 : _b2.key);
-        }
-      );
-      if (!facet || facet.type !== "terms") {
-        return [];
-      }
+      var _a;
       toggleTermFilter(
         paramsStore.appendParams,
-        { type: "terms", key: facet.key, value: query },
+        { type: "terms", key: query.key, value: query.value },
         optionsStore.getQueryParamName,
-        {}
+        {},
+        (_a = querySources.value) == null ? void 0 : _a.map((q) => `f.${q}`)
       );
     };
     const getSelectedFilterClass = (query) => {
@@ -19664,9 +19766,13 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       if (((_a = props.options.source) == null ? void 0 : _a.mode) !== "filter") {
         return "";
       }
-      return Array.isArray((_c = (_b = searchResult.value) == null ? void 0 : _b.filters) == null ? void 0 : _c[props.options.source.key]) && ((_f = (_e = (_d = searchResult.value) == null ? void 0 : _d.filters) == null ? void 0 : _e[props.options.source.key]) == null ? void 0 : _f.includes(
-        query
-      )) ? "lupa-selected-related-query-filter" : "";
+      return Array.isArray((_c = (_b = searchResult.value) == null ? void 0 : _b.filters) == null ? void 0 : _c[query.key]) && ((_f = (_e = (_d = searchResult.value) == null ? void 0 : _d.filters) == null ? void 0 : _e[query.key]) == null ? void 0 : _f.includes(query.value)) ? "lupa-selected-related-query-filter" : "";
+    };
+    const processLoadedItem = (query, item) => {
+      if (item) {
+        allDisplayItems.value[`${item.id}`] = item;
+      }
+      querySourceResultMap.value[query.value] = Boolean(item);
     };
     return (_ctx, _cache) => {
       var _a, _b, _c, _d;
@@ -19674,19 +19780,24 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         ((_b = (_a = _ctx.options) == null ? void 0 : _a.labels) == null ? void 0 : _b.title) ? (openBlock(), createElementBlock("h3", _hoisted_2$d, toDisplayString((_d = (_c = _ctx.options) == null ? void 0 : _c.labels) == null ? void 0 : _d.title), 1)) : createCommentVNode("", true),
         createElementVNode("ul", null, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(relatedQueries.value, (query) => {
-            return openBlock(), createElementBlock("li", {
-              key: query + currentSearchText.value,
+            return withDirectives((openBlock(), createElementBlock("li", {
+              key: query.value + query.key + currentSearchText.value,
               class: normalizeClass(getSelectedFilterClass(query))
             }, [
               createElementVNode("a", {
                 onClick: ($event) => handleRelatedQueryClick(query)
               }, [
                 createVNode(_sfc_main$j, {
+                  "source-key": query.key,
                   options: _ctx.options,
-                  query
-                }, null, 8, ["options", "query"])
+                  query: query.value,
+                  "existing-items-from-other-queries": allDisplayItems.value,
+                  onLoaded: (item) => processLoadedItem(query, item)
+                }, null, 8, ["source-key", "options", "query", "existing-items-from-other-queries", "onLoaded"])
               ], 8, _hoisted_3$9)
-            ], 2);
+            ], 2)), [
+              [vShow, querySourceResultMap.value[query.value] !== false]
+            ]);
           }), 128))
         ])
       ])) : createCommentVNode("", true);
@@ -19994,7 +20105,10 @@ const _hoisted_2$a = {
   class: "lupa-category-back"
 };
 const _hoisted_3$6 = ["href"];
-const _hoisted_4$3 = { class: "lupa-child-category-list" };
+const _hoisted_4$3 = {
+  key: 1,
+  class: "lupa-child-category-list"
+};
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "CategoryTopFilters",
   props: {
@@ -20008,6 +20122,10 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
       var _a, _b;
       return Boolean((_b = (_a = props.options.categories) == null ? void 0 : _a.back) == null ? void 0 : _b.title);
     });
+    const hasRelatedCategoryChildren = computed(() => {
+      var _a;
+      return ((_a = relatedCategoryChildren.value) == null ? void 0 : _a.length) > 0;
+    });
     const backTitle = computed(() => {
       var _a, _b;
       return (_b = (_a = props.options.categories) == null ? void 0 : _a.back) == null ? void 0 : _b.title;
@@ -20034,7 +20152,10 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["lupa-category-top-mobile-filters", { "lupa-has-back-button": hasBackButton.value }])
+        class: normalizeClass(["lupa-category-top-mobile-filters", {
+          "lupa-has-back-button": hasBackButton.value,
+          "has-related-category-children": hasRelatedCategoryChildren.value
+        }])
       }, [
         createElementVNode("div", _hoisted_1$d, [
           hasBackButton.value ? (openBlock(), createElementBlock("div", _hoisted_2$a, [
@@ -20044,7 +20165,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
               onClick: handleNavigationBack
             }, toDisplayString(backTitle.value), 9, _hoisted_3$6)
           ])) : createCommentVNode("", true),
-          createElementVNode("div", _hoisted_4$3, [
+          hasRelatedCategoryChildren.value ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(relatedCategoryChildren), (child) => {
               return openBlock(), createBlock(_sfc_main$U, {
                 key: getCategoryKey(child),
@@ -20052,7 +20173,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
                 options: categoryOptions.value
               }, null, 8, ["item", "options"]);
             }), 128))
-          ]),
+          ])) : createCommentVNode("", true),
           createVNode(_sfc_main$B, {
             class: "lupa-toolbar-mobile",
             "pagination-location": "top",

package/dist/src/components/search-results/related-queries/RelatedQueryPanel.vue.d.ts

@@ -1,22 +1,41 @@
 import type { PropType as __PropType } from 'vue';
 import { RelatedQueryOptions } from '../../../types/search-results/RelatedQueryOptions';
+import { Document } from '@getlupa/client-sdk/Types';
 declare const _sfc_main: import("vue").DefineComponent<{
     query: {
         type: __PropType<string>;
         required: false;
     };
+    sourceKey: {
+        type: __PropType<string>;
+        required: false;
+    };
     options: {
         type: __PropType<RelatedQueryOptions>;
         required: false;
     };
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    existingItemsFromOtherQueries: {
+        type: __PropType<Record<string, Document>>;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "loaded"[], "loaded", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     query: {
         type: __PropType<string>;
         required: false;
     };
+    sourceKey: {
+        type: __PropType<string>;
+        required: false;
+    };
     options: {
         type: __PropType<RelatedQueryOptions>;
         required: false;
     };
-}>>, {}, {}>;
+    existingItemsFromOtherQueries: {
+        type: __PropType<Record<string, Document>>;
+        required: false;
+    };
+}>> & {
+    onLoaded?: (...args: any[]) => any;
+}, {}, {}>;
 export default _sfc_main;

package/dist/src/types/search-results/RelatedQueryOptions.d.ts

@@ -5,11 +5,18 @@ export declare enum RelatedQuerySourceType {
 export type RelatedQuerySourceBase = {
     type: RelatedQuerySourceType;
 };
+export type RelatedQueryFacetsSourceQuery = {
+    facetKey: string;
+    queryKey: string;
+    type: 'document' | 'suggestion';
+    maxCount?: number;
+};
 export type RelatedQueryFacetsSource = RelatedQuerySourceBase & {
     type: RelatedQuerySourceType.FACETS;
     key: string;
     count: number;
     mode?: 'query' | 'filter';
+    queries?: RelatedQueryFacetsSourceQuery[];
 };
 export type RelatedQuerySource = RelatedQueryFacetsSource;
 export type RelatedQueryOptions = {

package/dist/src/utils/filter.toggle.utils.d.ts

@@ -15,7 +15,7 @@ export declare const getFacetParam: (key: string, value: string[] | string, type
     name: string;
     value: string[] | string;
 };
-export declare const toggleTermFilter: (appendParams: AppendParams, facetAction: TermFacetAction, getQueryParamName?: (param: LupaQueryParamValue) => string, currentFilters?: FilterGroup) => void;
+export declare const toggleTermFilter: (appendParams: AppendParams, facetAction: TermFacetAction, getQueryParamName?: (param: LupaQueryParamValue) => string, currentFilters?: FilterGroup, paramsToRemove?: string[]) => void;
 export declare const toggleHierarchyFilter: (appendParams: AppendParams, facetAction: HierarchyFacetAction, getQueryParamName?: (param: LupaQueryParamValue) => string, currentFilters?: FilterGroup, removeAllLevels?: boolean) => void;
 export declare const toggleRangeFilter: (appendParams: AppendParams, facetAction: RangeFacetAction, getQueryParamName?: (param: LupaQueryParamValue) => string, currentFilters?: FilterGroup) => void;
 export declare const toggleTermParam: (params?: string[], param?: string) => string[];

package/dist/src/utils/relatedSource.utils.d.ts

@@ -1,3 +1,7 @@
+import { SdkOptions } from '../types/General';
 import { RelatedQuerySource } from '../types/search-results/RelatedQueryOptions';
-import type { SearchQueryResult } from '@getlupa/client-sdk/Types';
-export declare const extractRelatedSource: (source: RelatedQuerySource, searchResults: SearchQueryResult) => string[];
+import type { FilterGroup, SearchQueryResult } from '@getlupa/client-sdk/Types';
+export declare const extractRelatedSource: (source: RelatedQuerySource, searchResults: SearchQueryResult, options: SdkOptions, activeFilters?: FilterGroup) => Promise<{
+    key: string;
+    value: string;
+}[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getlupa/vue",
-  "version": "0.15.8",
+  "version": "0.15.10",
   "main": "dist/lupaSearch.mjs",
   "module": "dist/lupaSearch.mjs",
   "types": "dist/src/index.d.ts",