@getlupa/client 1.26.1 → 1.26.3

package/dist/lupaSearch.iife.js

@@ -19528,6 +19528,7 @@ var __async = (__this, __arguments, generator) => {
     const options = ref(DEFAULT_SEARCH_BOX_OPTIONS$1);
     const docResults = ref({});
     const suggestionResults = ref({});
+    const loadingResultsByQueryKey = ref({});
     const highlightedIndex = ref(-1);
     const inputValue = ref("");
     const resultInputValue = ref("");
@@ -19537,6 +19538,12 @@ var __async = (__this, __arguments, generator) => {
       var _a25;
       return ((_a25 = inputValue.value) == null ? void 0 : _a25.length) >= options.value.minInputLength;
     });
+    const setQueryKeyLoading = ({ queryKey, loading }) => {
+      var _a25;
+      loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_a25 = loadingResultsByQueryKey.value) != null ? _a25 : {}), {
+        [queryKey]: loading
+      });
+    };
     const panelItemCounts = computed(
       () => options.value.panels.map((p2) => {
         var _a25, _b25, _c, _d, _e;
@@ -19591,6 +19598,9 @@ var __async = (__this, __arguments, generator) => {
         title: panel.titleKey ? doc2[panel.titleKey] : ""
       };
     });
+    const anyPanelLoading = computed(
+      () => Object.values(loadingResultsByQueryKey.value).some((v) => v)
+    );
     const querySuggestions = (_0) => __async2(null, [_0], function* ({
       queryKey,
       publicQuery,
@@ -19601,6 +19611,7 @@ var __async = (__this, __arguments, generator) => {
         const currentRequestId = Date.now();
         latestRequestIdByQueryKey[queryKey] = currentRequestId;
         const context = getLupaTrackingContext();
+        setQueryKeyLoading({ queryKey, loading: true });
         const result2 = yield LupaSearchSdk.suggestions(
           queryKey,
           __spreadValues2(__spreadValues2({}, publicQuery), context),
@@ -19628,6 +19639,8 @@ var __async = (__this, __arguments, generator) => {
           options2.onError(err);
         }
         return { suggestions: void 0 };
+      } finally {
+        setQueryKeyLoading({ queryKey, loading: false });
       }
     });
     const emitSearchResultsCallback = () => {
@@ -19651,6 +19664,7 @@ var __async = (__this, __arguments, generator) => {
       try {
         const currentRequestId = Date.now();
         latestRequestIdByQueryKey[queryKey] = currentRequestId;
+        setQueryKeyLoading({ queryKey, loading: true });
         const context = getLupaTrackingContext();
         const result2 = yield LupaSearchSdk.query(queryKey, __spreadValues2(__spreadValues2({}, publicQuery), context), options2);
         if (latestRequestIdByQueryKey[queryKey] !== currentRequestId) {
@@ -19669,6 +19683,8 @@ var __async = (__this, __arguments, generator) => {
           options2.onError(err);
         }
         return { queryKey, result: { items: [] } };
+      } finally {
+        setQueryKeyLoading({ queryKey, loading: false });
       }
     });
     const highlightChange = ({ action }) => {
@@ -19699,12 +19715,14 @@ var __async = (__this, __arguments, generator) => {
       highlightedItem,
       highlightedDocument,
       hasAnyResults,
+      anyPanelLoading,
       querySuggestions,
       queryDocuments,
       highlightChange,
       saveInputValue,
       saveOptions,
-      resetHighlightIndex
+      resetHighlightIndex,
+      setQueryKeyLoading
     };
   });
   const Env = {
@@ -20592,7 +20610,9 @@ var __async = (__this, __arguments, generator) => {
       items: {},
       highlight: { type: Boolean },
       queryKey: {},
-      labels: {}
+      labels: {},
+      searchBoxOptions: {},
+      panelOptions: {}
     },
     emits: ["suggestionSelect"],
     setup(__props, { emit: __emit }) {
@@ -20607,7 +20627,7 @@ var __async = (__this, __arguments, generator) => {
       });
       const emit2 = __emit;
       const searchBoxStore = useSearchBoxStore();
-      const { highlightedItem } = storeToRefs(searchBoxStore);
+      const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
       const highlightedIndex = computed(() => {
         var _a25, _b25, _c;
         if (props.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -20653,6 +20673,7 @@ var __async = (__this, __arguments, generator) => {
         });
       });
       return (_ctx, _cache) => {
+        var _a25, _b25, _c;
         return openBlock(), createElementBlock("div", _hoisted_1$1k, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
             return openBlock(), createBlock(_sfc_main$1D, {
@@ -20668,7 +20689,11 @@ var __async = (__this, __arguments, generator) => {
               "data-cy": "lupa-suggestion",
               onSelect: handleSelect
             }, null, 8, ["class", "suggestion", "highlight", "labels"]);
-          }), 128))
+          }), 128)),
+          ((_b25 = (_a25 = items.value) == null ? void 0 : _a25.length) != null ? _b25 : 0) === 0 && ((_c = _ctx.panelOptions) == null ? void 0 : _c.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
+            key: 0,
+            options: _ctx.searchBoxOptions
+          }, null, 8, ["options"])) : createCommentVNode("", true)
         ]);
       };
     }
@@ -20691,6 +20716,7 @@ var __async = (__this, __arguments, generator) => {
     __name: "SearchBoxSuggestionsWrapper",
     props: {
       panel: {},
+      searchBoxOptions: {},
       options: {},
       inputValue: {},
       debounce: {},
@@ -20708,9 +20734,11 @@ var __async = (__this, __arguments, generator) => {
         return (_a25 = suggestionResults.value[props.panel.queryKey]) != null ? _a25 : [];
       });
       onMounted(() => {
+        searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
         getSuggestionsDebounced();
       });
       watch(inputValueProp, () => {
+        searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
         getSuggestionsDebounced();
       });
       const getSuggestions = () => {
@@ -20735,8 +20763,10 @@ var __async = (__this, __arguments, generator) => {
           highlight: _ctx.panel.highlight,
           queryKey: _ctx.panel.queryKey,
           labels: _ctx.labels,
+          "search-box-options": _ctx.searchBoxOptions,
+          "panel-options": _ctx.panel,
           onSuggestionSelect: _cache[0] || (_cache[0] = (item) => _ctx.$emit("itemSelect", item))
-        }, null, 8, ["items", "highlight", "queryKey", "labels"]);
+        }, null, 8, ["items", "highlight", "queryKey", "labels", "search-box-options", "panel-options"]);
       };
     }
   });
@@ -30559,7 +30589,7 @@ and ensure you are accounting for this risk.
     };
     const queryFacet = (_0) => __async2(null, [_0], function* ({ queryKey, facetKey }) {
       var _a25, _b25, _c, _d;
-      const query = { searchText: "", filters: __spreadValues2({}, filters.value) };
+      const query = { searchText: currentQueryText.value || "", filters: __spreadValues2({}, filters.value) };
       const options = (_a25 = optionsStore.envOptions) != null ? _a25 : { environment: "production" };
       const result2 = yield LupaSearchSdk.query(queryKey, query, options);
       if (!result2.success) {
@@ -31503,7 +31533,8 @@ and ensure you are accounting for this risk.
       items: {},
       inputValue: {},
       panelOptions: {},
-      labels: {}
+      labels: {},
+      searchBoxOptions: {}
     },
     emits: ["product-click"],
     setup(__props, { emit: __emit }) {
@@ -31514,7 +31545,7 @@ and ensure you are accounting for this risk.
       const optionsStore = useOptionsStore();
       const { boxRoutingBehavior } = storeToRefs(optionsStore);
       const emit2 = __emit;
-      const { highlightedItem } = storeToRefs(searchBoxStore);
+      const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
       const highlightedIndex = computed(() => {
         var _a25, _b25, _c;
         if (props.panelOptions.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -31592,7 +31623,7 @@ and ensure you are accounting for this risk.
         }
       };
       return (_ctx, _cache) => {
-        var _a25, _b25, _c;
+        var _a25, _b25, _c, _d, _e, _f;
         return openBlock(), createElementBlock("div", {
           id: "lupa-search-box-products",
           class: normalizeClass({ "lupa-search-box-products-expanded": showAll.value })
@@ -31622,11 +31653,15 @@ and ensure you are accounting for this risk.
             key: 2,
             innerHTML: _ctx.panelOptions.appendCustomHtml
           }, null, 8, _hoisted_1$14)) : createCommentVNode("", true),
-          showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+          ((_c = (_b25 = _ctx.items) == null ? void 0 : _b25.length) != null ? _c : 0) === 0 && ((_d = _ctx.panelOptions) == null ? void 0 : _d.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
             key: 3,
+            options: _ctx.searchBoxOptions
+          }, null, 8, ["options"])) : createCommentVNode("", true),
+          showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+            key: 4,
             class: "lupa-search-box-expand",
             onClick: _cache[0] || (_cache[0] = ($event) => showAll.value = !showAll.value)
-          }, toDisplayString(showAll.value ? (_b25 = _ctx.labels) == null ? void 0 : _b25.showLess : (_c = _ctx.labels) == null ? void 0 : _c.showMore), 1)) : createCommentVNode("", true),
+          }, toDisplayString(showAll.value ? (_e = _ctx.labels) == null ? void 0 : _e.showLess : (_f = _ctx.labels) == null ? void 0 : _f.showMore), 1)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default")
         ], 2);
       };
@@ -31797,9 +31832,11 @@ and ensure you are accounting for this risk.
       });
       const inputValueProp = computed(() => props.inputValue);
       onMounted(() => {
+        searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
         getItemsDebounced();
       });
       watch(inputValueProp, () => {
+        searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
         getItemsDebounced();
       });
       const enhancePanelData = () => __async2(null, null, function* () {
@@ -31840,9 +31877,10 @@ and ensure you are accounting for this risk.
         var _a25, _b25;
         return openBlock(), createBlock(_sfc_main$1i, {
           items: (_b25 = (_a25 = searchResult.value) == null ? void 0 : _a25.items) != null ? _b25 : [],
-          panelOptions: _ctx.panel,
+          "panel-options": _ctx.panel,
           labels: _ctx.labels,
-          inputValue: _ctx.inputValue,
+          "input-value": _ctx.inputValue,
+          "search-box-options": _ctx.searchBoxOptions,
           onProductClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("product-click"))
         }, createSlots({
           default: withCtx(() => {
@@ -31865,7 +31903,7 @@ and ensure you are accounting for this risk.
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["items", "panelOptions", "labels", "inputValue"]);
+        ]), 1032, ["items", "panel-options", "labels", "input-value", "search-box-options"]);
       };
     }
   });
@@ -32004,7 +32042,7 @@ and ensure you are accounting for this risk.
       const panels = computed(() => props.options.panels);
       const sdkOptions = computed(() => props.options.options);
       const searchBoxStore = useSearchBoxStore();
-      const { suggestionResults, hasAnyResults, panelItemCounts } = storeToRefs(searchBoxStore);
+      const { suggestionResults, hasAnyResults, panelItemCounts, anyPanelLoading } = storeToRefs(searchBoxStore);
       const emit2 = __emit;
       const isSearchEmpty = computed(() => !props.inputValue || props.inputValue.length < 1);
       const displayResults = computed(() => {
@@ -32192,7 +32230,7 @@ and ensure you are accounting for this risk.
                 ], 14, _hoisted_1$12);
               }), 128))
             ], 4),
-            !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1E, {
+            !unref(hasAnyResults) && _ctx.options.showNoResultsPanel && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
               key: 1,
               options: _ctx.options
             }, null, 8, ["options"])) : createCommentVNode("", true),
@@ -33374,7 +33412,7 @@ and ensure you are accounting for this risk.
       facet: {},
       currentFilters: {}
     },
-    emits: ["select"],
+    emits: ["select", "showMoreClicked", "filterFocused"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const searchResultStore = useSearchResultStore();
@@ -33438,6 +33476,9 @@ and ensure you are accounting for this risk.
       };
       const toggleShowAll = () => {
         showAll.value = !showAll.value;
+        if (showAll.value) {
+          emit2("showMoreClicked", facet.value.key);
+        }
       };
       const isChecked = (item) => {
         var _a25, _b25;
@@ -33467,8 +33508,9 @@ and ensure you are accounting for this risk.
             class: "lupa-term-filter",
             "data-cy": "lupa-term-filter",
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => termFilter.value = $event),
-            placeholder: _ctx.options.labels.facetFilter
-          }, null, 8, _hoisted_2$E)), [
+            placeholder: _ctx.options.labels.facetFilter,
+            onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("filterFocused"))
+          }, null, 40, _hoisted_2$E)), [
             [vModelText, termFilter.value]
           ]) : createCommentVNode("", true),
           createBaseVNode("div", _hoisted_3$u, [
@@ -35083,7 +35125,9 @@ and ensure you are accounting for this risk.
               facet: facet.value,
               currentFilters: currentFilters.value[facet.value.key],
               options: _ctx.options,
-              onSelect: handleFacetSelect
+              onSelect: handleFacetSelect,
+              onShowMoreClicked: handleFacetQueryFilter,
+              onFilterFocused: handleFacetQueryFilter
             }, null, 40, ["facet", "currentFilters", "options"])),
             _ctx.clearable ? (openBlock(), createElementBlock("div", {
               key: 0,

package/dist/lupaSearch.js

@@ -19528,6 +19528,7 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
   const options = ref(DEFAULT_SEARCH_BOX_OPTIONS$1);
   const docResults = ref({});
   const suggestionResults = ref({});
+  const loadingResultsByQueryKey = ref({});
   const highlightedIndex = ref(-1);
   const inputValue = ref("");
   const resultInputValue = ref("");
@@ -19537,6 +19538,12 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
     var _a25;
     return ((_a25 = inputValue.value) == null ? void 0 : _a25.length) >= options.value.minInputLength;
   });
+  const setQueryKeyLoading = ({ queryKey, loading }) => {
+    var _a25;
+    loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_a25 = loadingResultsByQueryKey.value) != null ? _a25 : {}), {
+      [queryKey]: loading
+    });
+  };
   const panelItemCounts = computed(
     () => options.value.panels.map((p2) => {
       var _a25, _b25, _c, _d, _e;
@@ -19591,6 +19598,9 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
       title: panel.titleKey ? doc2[panel.titleKey] : ""
     };
   });
+  const anyPanelLoading = computed(
+    () => Object.values(loadingResultsByQueryKey.value).some((v) => v)
+  );
   const querySuggestions = (_0) => __async2(null, [_0], function* ({
     queryKey,
     publicQuery,
@@ -19601,6 +19611,7 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
       const currentRequestId = Date.now();
       latestRequestIdByQueryKey[queryKey] = currentRequestId;
       const context = getLupaTrackingContext();
+      setQueryKeyLoading({ queryKey, loading: true });
       const result2 = yield LupaSearchSdk.suggestions(
         queryKey,
         __spreadValues2(__spreadValues2({}, publicQuery), context),
@@ -19628,6 +19639,8 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
         options2.onError(err);
       }
       return { suggestions: void 0 };
+    } finally {
+      setQueryKeyLoading({ queryKey, loading: false });
     }
   });
   const emitSearchResultsCallback = () => {
@@ -19651,6 +19664,7 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
     try {
       const currentRequestId = Date.now();
       latestRequestIdByQueryKey[queryKey] = currentRequestId;
+      setQueryKeyLoading({ queryKey, loading: true });
       const context = getLupaTrackingContext();
       const result2 = yield LupaSearchSdk.query(queryKey, __spreadValues2(__spreadValues2({}, publicQuery), context), options2);
       if (latestRequestIdByQueryKey[queryKey] !== currentRequestId) {
@@ -19669,6 +19683,8 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
         options2.onError(err);
       }
       return { queryKey, result: { items: [] } };
+    } finally {
+      setQueryKeyLoading({ queryKey, loading: false });
     }
   });
   const highlightChange = ({ action }) => {
@@ -19699,12 +19715,14 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
     highlightedItem,
     highlightedDocument,
     hasAnyResults,
+    anyPanelLoading,
     querySuggestions,
     queryDocuments,
     highlightChange,
     saveInputValue,
     saveOptions,
-    resetHighlightIndex
+    resetHighlightIndex,
+    setQueryKeyLoading
   };
 });
 const Env = {
@@ -20592,7 +20610,9 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     items: {},
     highlight: { type: Boolean },
     queryKey: {},
-    labels: {}
+    labels: {},
+    searchBoxOptions: {},
+    panelOptions: {}
   },
   emits: ["suggestionSelect"],
   setup(__props, { emit: __emit }) {
@@ -20607,7 +20627,7 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     });
     const emit2 = __emit;
     const searchBoxStore = useSearchBoxStore();
-    const { highlightedItem } = storeToRefs(searchBoxStore);
+    const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
     const highlightedIndex = computed(() => {
       var _a25, _b25, _c;
       if (props.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -20653,6 +20673,7 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
       });
     });
     return (_ctx, _cache) => {
+      var _a25, _b25, _c;
       return openBlock(), createElementBlock("div", _hoisted_1$1k, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
           return openBlock(), createBlock(_sfc_main$1D, {
@@ -20668,7 +20689,11 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
             "data-cy": "lupa-suggestion",
             onSelect: handleSelect
           }, null, 8, ["class", "suggestion", "highlight", "labels"]);
-        }), 128))
+        }), 128)),
+        ((_b25 = (_a25 = items.value) == null ? void 0 : _a25.length) != null ? _b25 : 0) === 0 && ((_c = _ctx.panelOptions) == null ? void 0 : _c.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
+          key: 0,
+          options: _ctx.searchBoxOptions
+        }, null, 8, ["options"])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -20691,6 +20716,7 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxSuggestionsWrapper",
   props: {
     panel: {},
+    searchBoxOptions: {},
     options: {},
     inputValue: {},
     debounce: {},
@@ -20708,9 +20734,11 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
       return (_a25 = suggestionResults.value[props.panel.queryKey]) != null ? _a25 : [];
     });
     onMounted(() => {
+      searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
       getSuggestionsDebounced();
     });
     watch(inputValueProp, () => {
+      searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
       getSuggestionsDebounced();
     });
     const getSuggestions = () => {
@@ -20735,8 +20763,10 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
         highlight: _ctx.panel.highlight,
         queryKey: _ctx.panel.queryKey,
         labels: _ctx.labels,
+        "search-box-options": _ctx.searchBoxOptions,
+        "panel-options": _ctx.panel,
         onSuggestionSelect: _cache[0] || (_cache[0] = (item) => _ctx.$emit("itemSelect", item))
-      }, null, 8, ["items", "highlight", "queryKey", "labels"]);
+      }, null, 8, ["items", "highlight", "queryKey", "labels", "search-box-options", "panel-options"]);
     };
   }
 });
@@ -30559,7 +30589,7 @@ const useSearchResultStore = /* @__PURE__ */ defineStore("searchResult", () => {
   };
   const queryFacet = (_0) => __async2(null, [_0], function* ({ queryKey, facetKey }) {
     var _a25, _b25, _c, _d;
-    const query = { searchText: "", filters: __spreadValues2({}, filters.value) };
+    const query = { searchText: currentQueryText.value || "", filters: __spreadValues2({}, filters.value) };
     const options = (_a25 = optionsStore.envOptions) != null ? _a25 : { environment: "production" };
     const result2 = yield LupaSearchSdk.query(queryKey, query, options);
     if (!result2.success) {
@@ -31503,7 +31533,8 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     items: {},
     inputValue: {},
     panelOptions: {},
-    labels: {}
+    labels: {},
+    searchBoxOptions: {}
   },
   emits: ["product-click"],
   setup(__props, { emit: __emit }) {
@@ -31514,7 +31545,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     const optionsStore = useOptionsStore();
     const { boxRoutingBehavior } = storeToRefs(optionsStore);
     const emit2 = __emit;
-    const { highlightedItem } = storeToRefs(searchBoxStore);
+    const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
     const highlightedIndex = computed(() => {
       var _a25, _b25, _c;
       if (props.panelOptions.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -31592,7 +31623,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      var _a25, _b25, _c;
+      var _a25, _b25, _c, _d, _e, _f;
       return openBlock(), createElementBlock("div", {
         id: "lupa-search-box-products",
         class: normalizeClass({ "lupa-search-box-products-expanded": showAll.value })
@@ -31622,11 +31653,15 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
           key: 2,
           innerHTML: _ctx.panelOptions.appendCustomHtml
         }, null, 8, _hoisted_1$14)) : createCommentVNode("", true),
-        showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+        ((_c = (_b25 = _ctx.items) == null ? void 0 : _b25.length) != null ? _c : 0) === 0 && ((_d = _ctx.panelOptions) == null ? void 0 : _d.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
           key: 3,
+          options: _ctx.searchBoxOptions
+        }, null, 8, ["options"])) : createCommentVNode("", true),
+        showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+          key: 4,
           class: "lupa-search-box-expand",
           onClick: _cache[0] || (_cache[0] = ($event) => showAll.value = !showAll.value)
-        }, toDisplayString(showAll.value ? (_b25 = _ctx.labels) == null ? void 0 : _b25.showLess : (_c = _ctx.labels) == null ? void 0 : _c.showMore), 1)) : createCommentVNode("", true),
+        }, toDisplayString(showAll.value ? (_e = _ctx.labels) == null ? void 0 : _e.showLess : (_f = _ctx.labels) == null ? void 0 : _f.showMore), 1)) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "default")
       ], 2);
     };
@@ -31797,9 +31832,11 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
     });
     const inputValueProp = computed(() => props.inputValue);
     onMounted(() => {
+      searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
       getItemsDebounced();
     });
     watch(inputValueProp, () => {
+      searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
       getItemsDebounced();
     });
     const enhancePanelData = () => __async2(null, null, function* () {
@@ -31840,9 +31877,10 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
       var _a25, _b25;
       return openBlock(), createBlock(_sfc_main$1i, {
         items: (_b25 = (_a25 = searchResult.value) == null ? void 0 : _a25.items) != null ? _b25 : [],
-        panelOptions: _ctx.panel,
+        "panel-options": _ctx.panel,
         labels: _ctx.labels,
-        inputValue: _ctx.inputValue,
+        "input-value": _ctx.inputValue,
+        "search-box-options": _ctx.searchBoxOptions,
         onProductClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("product-click"))
       }, createSlots({
         default: withCtx(() => {
@@ -31865,7 +31903,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["items", "panelOptions", "labels", "inputValue"]);
+      ]), 1032, ["items", "panel-options", "labels", "input-value", "search-box-options"]);
     };
   }
 });
@@ -32004,7 +32042,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
     const panels = computed(() => props.options.panels);
     const sdkOptions = computed(() => props.options.options);
     const searchBoxStore = useSearchBoxStore();
-    const { suggestionResults, hasAnyResults, panelItemCounts } = storeToRefs(searchBoxStore);
+    const { suggestionResults, hasAnyResults, panelItemCounts, anyPanelLoading } = storeToRefs(searchBoxStore);
     const emit2 = __emit;
     const isSearchEmpty = computed(() => !props.inputValue || props.inputValue.length < 1);
     const displayResults = computed(() => {
@@ -32192,7 +32230,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
               ], 14, _hoisted_1$12);
             }), 128))
           ], 4),
-          !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1E, {
+          !unref(hasAnyResults) && _ctx.options.showNoResultsPanel && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
             key: 1,
             options: _ctx.options
           }, null, 8, ["options"])) : createCommentVNode("", true),
@@ -33374,7 +33412,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     facet: {},
     currentFilters: {}
   },
-  emits: ["select"],
+  emits: ["select", "showMoreClicked", "filterFocused"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const searchResultStore = useSearchResultStore();
@@ -33438,6 +33476,9 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     };
     const toggleShowAll = () => {
       showAll.value = !showAll.value;
+      if (showAll.value) {
+        emit2("showMoreClicked", facet.value.key);
+      }
     };
     const isChecked = (item) => {
       var _a25, _b25;
@@ -33467,8 +33508,9 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
           class: "lupa-term-filter",
           "data-cy": "lupa-term-filter",
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => termFilter.value = $event),
-          placeholder: _ctx.options.labels.facetFilter
-        }, null, 8, _hoisted_2$E)), [
+          placeholder: _ctx.options.labels.facetFilter,
+          onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("filterFocused"))
+        }, null, 40, _hoisted_2$E)), [
           [vModelText, termFilter.value]
         ]) : createCommentVNode("", true),
         createBaseVNode("div", _hoisted_3$u, [
@@ -35083,7 +35125,9 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
             facet: facet.value,
             currentFilters: currentFilters.value[facet.value.key],
             options: _ctx.options,
-            onSelect: handleFacetSelect
+            onSelect: handleFacetSelect,
+            onShowMoreClicked: handleFacetQueryFilter,
+            onFilterFocused: handleFacetQueryFilter
           }, null, 40, ["facet", "currentFilters", "options"])),
           _ctx.clearable ? (openBlock(), createElementBlock("div", {
             key: 0,

package/dist/lupaSearch.mjs

@@ -19526,6 +19526,7 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
   const options = ref(DEFAULT_SEARCH_BOX_OPTIONS$1);
   const docResults = ref({});
   const suggestionResults = ref({});
+  const loadingResultsByQueryKey = ref({});
   const highlightedIndex = ref(-1);
   const inputValue = ref("");
   const resultInputValue = ref("");
@@ -19535,6 +19536,12 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
     var _a25;
     return ((_a25 = inputValue.value) == null ? void 0 : _a25.length) >= options.value.minInputLength;
   });
+  const setQueryKeyLoading = ({ queryKey, loading }) => {
+    var _a25;
+    loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_a25 = loadingResultsByQueryKey.value) != null ? _a25 : {}), {
+      [queryKey]: loading
+    });
+  };
   const panelItemCounts = computed(
     () => options.value.panels.map((p2) => {
       var _a25, _b25, _c, _d, _e;
@@ -19589,6 +19596,9 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
       title: panel.titleKey ? doc2[panel.titleKey] : ""
     };
   });
+  const anyPanelLoading = computed(
+    () => Object.values(loadingResultsByQueryKey.value).some((v) => v)
+  );
   const querySuggestions = (_0) => __async2(null, [_0], function* ({
     queryKey,
     publicQuery,
@@ -19599,6 +19609,7 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
       const currentRequestId = Date.now();
       latestRequestIdByQueryKey[queryKey] = currentRequestId;
       const context = getLupaTrackingContext();
+      setQueryKeyLoading({ queryKey, loading: true });
       const result2 = yield LupaSearchSdk.suggestions(
         queryKey,
         __spreadValues2(__spreadValues2({}, publicQuery), context),
@@ -19626,6 +19637,8 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
         options2.onError(err);
       }
       return { suggestions: void 0 };
+    } finally {
+      setQueryKeyLoading({ queryKey, loading: false });
     }
   });
   const emitSearchResultsCallback = () => {
@@ -19649,6 +19662,7 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
     try {
       const currentRequestId = Date.now();
       latestRequestIdByQueryKey[queryKey] = currentRequestId;
+      setQueryKeyLoading({ queryKey, loading: true });
       const context = getLupaTrackingContext();
       const result2 = yield LupaSearchSdk.query(queryKey, __spreadValues2(__spreadValues2({}, publicQuery), context), options2);
       if (latestRequestIdByQueryKey[queryKey] !== currentRequestId) {
@@ -19667,6 +19681,8 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
         options2.onError(err);
       }
       return { queryKey, result: { items: [] } };
+    } finally {
+      setQueryKeyLoading({ queryKey, loading: false });
     }
   });
   const highlightChange = ({ action }) => {
@@ -19697,12 +19713,14 @@ const useSearchBoxStore = /* @__PURE__ */ defineStore("searchBox", () => {
     highlightedItem,
     highlightedDocument,
     hasAnyResults,
+    anyPanelLoading,
     querySuggestions,
     queryDocuments,
     highlightChange,
     saveInputValue,
     saveOptions,
-    resetHighlightIndex
+    resetHighlightIndex,
+    setQueryKeyLoading
   };
 });
 const Env = {
@@ -20590,7 +20608,9 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     items: {},
     highlight: { type: Boolean },
     queryKey: {},
-    labels: {}
+    labels: {},
+    searchBoxOptions: {},
+    panelOptions: {}
   },
   emits: ["suggestionSelect"],
   setup(__props, { emit: __emit }) {
@@ -20605,7 +20625,7 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
     });
     const emit2 = __emit;
     const searchBoxStore = useSearchBoxStore();
-    const { highlightedItem } = storeToRefs(searchBoxStore);
+    const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
     const highlightedIndex = computed(() => {
       var _a25, _b25, _c;
       if (props.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -20651,6 +20671,7 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
       });
     });
     return (_ctx, _cache) => {
+      var _a25, _b25, _c;
       return openBlock(), createElementBlock("div", _hoisted_1$1k, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
           return openBlock(), createBlock(_sfc_main$1D, {
@@ -20666,7 +20687,11 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
             "data-cy": "lupa-suggestion",
             onSelect: handleSelect
           }, null, 8, ["class", "suggestion", "highlight", "labels"]);
-        }), 128))
+        }), 128)),
+        ((_b25 = (_a25 = items.value) == null ? void 0 : _a25.length) != null ? _b25 : 0) === 0 && ((_c = _ctx.panelOptions) == null ? void 0 : _c.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
+          key: 0,
+          options: _ctx.searchBoxOptions
+        }, null, 8, ["options"])) : createCommentVNode("", true)
       ]);
     };
   }
@@ -20689,6 +20714,7 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxSuggestionsWrapper",
   props: {
     panel: {},
+    searchBoxOptions: {},
     options: {},
     inputValue: {},
     debounce: {},
@@ -20706,9 +20732,11 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
       return (_a25 = suggestionResults.value[props.panel.queryKey]) != null ? _a25 : [];
     });
     onMounted(() => {
+      searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
       getSuggestionsDebounced();
     });
     watch(inputValueProp, () => {
+      searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
       getSuggestionsDebounced();
     });
     const getSuggestions = () => {
@@ -20733,8 +20761,10 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
         highlight: _ctx.panel.highlight,
         queryKey: _ctx.panel.queryKey,
         labels: _ctx.labels,
+        "search-box-options": _ctx.searchBoxOptions,
+        "panel-options": _ctx.panel,
         onSuggestionSelect: _cache[0] || (_cache[0] = (item) => _ctx.$emit("itemSelect", item))
-      }, null, 8, ["items", "highlight", "queryKey", "labels"]);
+      }, null, 8, ["items", "highlight", "queryKey", "labels", "search-box-options", "panel-options"]);
     };
   }
 });
@@ -30557,7 +30587,7 @@ const useSearchResultStore = /* @__PURE__ */ defineStore("searchResult", () => {
   };
   const queryFacet = (_0) => __async2(null, [_0], function* ({ queryKey, facetKey }) {
     var _a25, _b25, _c, _d;
-    const query = { searchText: "", filters: __spreadValues2({}, filters.value) };
+    const query = { searchText: currentQueryText.value || "", filters: __spreadValues2({}, filters.value) };
     const options = (_a25 = optionsStore.envOptions) != null ? _a25 : { environment: "production" };
     const result2 = yield LupaSearchSdk.query(queryKey, query, options);
     if (!result2.success) {
@@ -31501,7 +31531,8 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     items: {},
     inputValue: {},
     panelOptions: {},
-    labels: {}
+    labels: {},
+    searchBoxOptions: {}
   },
   emits: ["product-click"],
   setup(__props, { emit: __emit }) {
@@ -31512,7 +31543,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
     const optionsStore = useOptionsStore();
     const { boxRoutingBehavior } = storeToRefs(optionsStore);
     const emit2 = __emit;
-    const { highlightedItem } = storeToRefs(searchBoxStore);
+    const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
     const highlightedIndex = computed(() => {
       var _a25, _b25, _c;
       if (props.panelOptions.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -31590,7 +31621,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
       }
     };
     return (_ctx, _cache) => {
-      var _a25, _b25, _c;
+      var _a25, _b25, _c, _d, _e, _f;
       return openBlock(), createElementBlock("div", {
         id: "lupa-search-box-products",
         class: normalizeClass({ "lupa-search-box-products-expanded": showAll.value })
@@ -31620,11 +31651,15 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
           key: 2,
           innerHTML: _ctx.panelOptions.appendCustomHtml
         }, null, 8, _hoisted_1$14)) : createCommentVNode("", true),
-        showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+        ((_c = (_b25 = _ctx.items) == null ? void 0 : _b25.length) != null ? _c : 0) === 0 && ((_d = _ctx.panelOptions) == null ? void 0 : _d.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
           key: 3,
+          options: _ctx.searchBoxOptions
+        }, null, 8, ["options"])) : createCommentVNode("", true),
+        showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+          key: 4,
           class: "lupa-search-box-expand",
           onClick: _cache[0] || (_cache[0] = ($event) => showAll.value = !showAll.value)
-        }, toDisplayString(showAll.value ? (_b25 = _ctx.labels) == null ? void 0 : _b25.showLess : (_c = _ctx.labels) == null ? void 0 : _c.showMore), 1)) : createCommentVNode("", true),
+        }, toDisplayString(showAll.value ? (_e = _ctx.labels) == null ? void 0 : _e.showLess : (_f = _ctx.labels) == null ? void 0 : _f.showMore), 1)) : createCommentVNode("", true),
         renderSlot(_ctx.$slots, "default")
       ], 2);
     };
@@ -31795,9 +31830,11 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
     });
     const inputValueProp = computed(() => props.inputValue);
     onMounted(() => {
+      searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
       getItemsDebounced();
     });
     watch(inputValueProp, () => {
+      searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
       getItemsDebounced();
     });
     const enhancePanelData = () => __async2(null, null, function* () {
@@ -31838,9 +31875,10 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
       var _a25, _b25;
       return openBlock(), createBlock(_sfc_main$1i, {
         items: (_b25 = (_a25 = searchResult.value) == null ? void 0 : _a25.items) != null ? _b25 : [],
-        panelOptions: _ctx.panel,
+        "panel-options": _ctx.panel,
         labels: _ctx.labels,
-        inputValue: _ctx.inputValue,
+        "input-value": _ctx.inputValue,
+        "search-box-options": _ctx.searchBoxOptions,
         onProductClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("product-click"))
       }, createSlots({
         default: withCtx(() => {
@@ -31863,7 +31901,7 @@ const _sfc_main$1g = /* @__PURE__ */ defineComponent({
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["items", "panelOptions", "labels", "inputValue"]);
+      ]), 1032, ["items", "panel-options", "labels", "input-value", "search-box-options"]);
     };
   }
 });
@@ -32002,7 +32040,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
     const panels = computed(() => props.options.panels);
     const sdkOptions = computed(() => props.options.options);
     const searchBoxStore = useSearchBoxStore();
-    const { suggestionResults, hasAnyResults, panelItemCounts } = storeToRefs(searchBoxStore);
+    const { suggestionResults, hasAnyResults, panelItemCounts, anyPanelLoading } = storeToRefs(searchBoxStore);
     const emit2 = __emit;
     const isSearchEmpty = computed(() => !props.inputValue || props.inputValue.length < 1);
     const displayResults = computed(() => {
@@ -32190,7 +32228,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValu
               ], 14, _hoisted_1$12);
             }), 128))
           ], 4),
-          !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1E, {
+          !unref(hasAnyResults) && _ctx.options.showNoResultsPanel && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
             key: 1,
             options: _ctx.options
           }, null, 8, ["options"])) : createCommentVNode("", true),
@@ -33372,7 +33410,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     facet: {},
     currentFilters: {}
   },
-  emits: ["select"],
+  emits: ["select", "showMoreClicked", "filterFocused"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const searchResultStore = useSearchResultStore();
@@ -33436,6 +33474,9 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
     };
     const toggleShowAll = () => {
       showAll.value = !showAll.value;
+      if (showAll.value) {
+        emit2("showMoreClicked", facet.value.key);
+      }
     };
     const isChecked = (item) => {
       var _a25, _b25;
@@ -33465,8 +33506,9 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
           class: "lupa-term-filter",
           "data-cy": "lupa-term-filter",
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => termFilter.value = $event),
-          placeholder: _ctx.options.labels.facetFilter
-        }, null, 8, _hoisted_2$E)), [
+          placeholder: _ctx.options.labels.facetFilter,
+          onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("filterFocused"))
+        }, null, 40, _hoisted_2$E)), [
           [vModelText, termFilter.value]
         ]) : createCommentVNode("", true),
         createBaseVNode("div", _hoisted_3$u, [
@@ -35081,7 +35123,9 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent(__spreadProps2(__spreadValue
             facet: facet.value,
             currentFilters: currentFilters.value[facet.value.key],
             options: _ctx.options,
-            onSelect: handleFacetSelect
+            onSelect: handleFacetSelect,
+            onShowMoreClicked: handleFacetQueryFilter,
+            onFilterFocused: handleFacetQueryFilter
           }, null, 40, ["facet", "currentFilters", "options"])),
           _ctx.clearable ? (openBlock(), createElementBlock("div", {
             key: 0,

package/dist/lupaSearch.umd.js

@@ -19530,6 +19530,7 @@ var __async = (__this, __arguments, generator) => {
     const options = ref(DEFAULT_SEARCH_BOX_OPTIONS$1);
     const docResults = ref({});
     const suggestionResults = ref({});
+    const loadingResultsByQueryKey = ref({});
     const highlightedIndex = ref(-1);
     const inputValue = ref("");
     const resultInputValue = ref("");
@@ -19539,6 +19540,12 @@ var __async = (__this, __arguments, generator) => {
       var _a25;
       return ((_a25 = inputValue.value) == null ? void 0 : _a25.length) >= options.value.minInputLength;
     });
+    const setQueryKeyLoading = ({ queryKey, loading }) => {
+      var _a25;
+      loadingResultsByQueryKey.value = __spreadProps2(__spreadValues2({}, (_a25 = loadingResultsByQueryKey.value) != null ? _a25 : {}), {
+        [queryKey]: loading
+      });
+    };
     const panelItemCounts = computed(
       () => options.value.panels.map((p2) => {
         var _a25, _b25, _c, _d, _e;
@@ -19593,6 +19600,9 @@ var __async = (__this, __arguments, generator) => {
         title: panel.titleKey ? doc2[panel.titleKey] : ""
       };
     });
+    const anyPanelLoading = computed(
+      () => Object.values(loadingResultsByQueryKey.value).some((v) => v)
+    );
     const querySuggestions = (_0) => __async2(null, [_0], function* ({
       queryKey,
       publicQuery,
@@ -19603,6 +19613,7 @@ var __async = (__this, __arguments, generator) => {
         const currentRequestId = Date.now();
         latestRequestIdByQueryKey[queryKey] = currentRequestId;
         const context = getLupaTrackingContext();
+        setQueryKeyLoading({ queryKey, loading: true });
         const result2 = yield LupaSearchSdk.suggestions(
           queryKey,
           __spreadValues2(__spreadValues2({}, publicQuery), context),
@@ -19630,6 +19641,8 @@ var __async = (__this, __arguments, generator) => {
           options2.onError(err);
         }
         return { suggestions: void 0 };
+      } finally {
+        setQueryKeyLoading({ queryKey, loading: false });
       }
     });
     const emitSearchResultsCallback = () => {
@@ -19653,6 +19666,7 @@ var __async = (__this, __arguments, generator) => {
       try {
         const currentRequestId = Date.now();
         latestRequestIdByQueryKey[queryKey] = currentRequestId;
+        setQueryKeyLoading({ queryKey, loading: true });
         const context = getLupaTrackingContext();
         const result2 = yield LupaSearchSdk.query(queryKey, __spreadValues2(__spreadValues2({}, publicQuery), context), options2);
         if (latestRequestIdByQueryKey[queryKey] !== currentRequestId) {
@@ -19671,6 +19685,8 @@ var __async = (__this, __arguments, generator) => {
           options2.onError(err);
         }
         return { queryKey, result: { items: [] } };
+      } finally {
+        setQueryKeyLoading({ queryKey, loading: false });
       }
     });
     const highlightChange = ({ action }) => {
@@ -19701,12 +19717,14 @@ var __async = (__this, __arguments, generator) => {
       highlightedItem,
       highlightedDocument,
       hasAnyResults,
+      anyPanelLoading,
       querySuggestions,
       queryDocuments,
       highlightChange,
       saveInputValue,
       saveOptions,
-      resetHighlightIndex
+      resetHighlightIndex,
+      setQueryKeyLoading
     };
   });
   const Env = {
@@ -20594,7 +20612,9 @@ var __async = (__this, __arguments, generator) => {
       items: {},
       highlight: { type: Boolean },
       queryKey: {},
-      labels: {}
+      labels: {},
+      searchBoxOptions: {},
+      panelOptions: {}
     },
     emits: ["suggestionSelect"],
     setup(__props, { emit: __emit }) {
@@ -20609,7 +20629,7 @@ var __async = (__this, __arguments, generator) => {
       });
       const emit2 = __emit;
       const searchBoxStore = useSearchBoxStore();
-      const { highlightedItem } = storeToRefs(searchBoxStore);
+      const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
       const highlightedIndex = computed(() => {
         var _a25, _b25, _c;
         if (props.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -20655,6 +20675,7 @@ var __async = (__this, __arguments, generator) => {
         });
       });
       return (_ctx, _cache) => {
+        var _a25, _b25, _c;
         return openBlock(), createElementBlock("div", _hoisted_1$1k, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(items.value, (item, index) => {
             return openBlock(), createBlock(_sfc_main$1D, {
@@ -20670,7 +20691,11 @@ var __async = (__this, __arguments, generator) => {
               "data-cy": "lupa-suggestion",
               onSelect: handleSelect
             }, null, 8, ["class", "suggestion", "highlight", "labels"]);
-          }), 128))
+          }), 128)),
+          ((_b25 = (_a25 = items.value) == null ? void 0 : _a25.length) != null ? _b25 : 0) === 0 && ((_c = _ctx.panelOptions) == null ? void 0 : _c.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
+            key: 0,
+            options: _ctx.searchBoxOptions
+          }, null, 8, ["options"])) : createCommentVNode("", true)
         ]);
       };
     }
@@ -20693,6 +20718,7 @@ var __async = (__this, __arguments, generator) => {
     __name: "SearchBoxSuggestionsWrapper",
     props: {
       panel: {},
+      searchBoxOptions: {},
       options: {},
       inputValue: {},
       debounce: {},
@@ -20710,9 +20736,11 @@ var __async = (__this, __arguments, generator) => {
         return (_a25 = suggestionResults.value[props.panel.queryKey]) != null ? _a25 : [];
       });
       onMounted(() => {
+        searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
         getSuggestionsDebounced();
       });
       watch(inputValueProp, () => {
+        searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
         getSuggestionsDebounced();
       });
       const getSuggestions = () => {
@@ -20737,8 +20765,10 @@ var __async = (__this, __arguments, generator) => {
           highlight: _ctx.panel.highlight,
           queryKey: _ctx.panel.queryKey,
           labels: _ctx.labels,
+          "search-box-options": _ctx.searchBoxOptions,
+          "panel-options": _ctx.panel,
           onSuggestionSelect: _cache[0] || (_cache[0] = (item) => _ctx.$emit("itemSelect", item))
-        }, null, 8, ["items", "highlight", "queryKey", "labels"]);
+        }, null, 8, ["items", "highlight", "queryKey", "labels", "search-box-options", "panel-options"]);
       };
     }
   });
@@ -30561,7 +30591,7 @@ and ensure you are accounting for this risk.
     };
     const queryFacet = (_0) => __async2(null, [_0], function* ({ queryKey, facetKey }) {
       var _a25, _b25, _c, _d;
-      const query = { searchText: "", filters: __spreadValues2({}, filters.value) };
+      const query = { searchText: currentQueryText.value || "", filters: __spreadValues2({}, filters.value) };
       const options = (_a25 = optionsStore.envOptions) != null ? _a25 : { environment: "production" };
       const result2 = yield LupaSearchSdk.query(queryKey, query, options);
       if (!result2.success) {
@@ -31505,7 +31535,8 @@ and ensure you are accounting for this risk.
       items: {},
       inputValue: {},
       panelOptions: {},
-      labels: {}
+      labels: {},
+      searchBoxOptions: {}
     },
     emits: ["product-click"],
     setup(__props, { emit: __emit }) {
@@ -31516,7 +31547,7 @@ and ensure you are accounting for this risk.
       const optionsStore = useOptionsStore();
       const { boxRoutingBehavior } = storeToRefs(optionsStore);
       const emit2 = __emit;
-      const { highlightedItem } = storeToRefs(searchBoxStore);
+      const { highlightedItem, anyPanelLoading } = storeToRefs(searchBoxStore);
       const highlightedIndex = computed(() => {
         var _a25, _b25, _c;
         if (props.panelOptions.queryKey !== ((_a25 = highlightedItem.value) == null ? void 0 : _a25.queryKey)) {
@@ -31594,7 +31625,7 @@ and ensure you are accounting for this risk.
         }
       };
       return (_ctx, _cache) => {
-        var _a25, _b25, _c;
+        var _a25, _b25, _c, _d, _e, _f;
         return openBlock(), createElementBlock("div", {
           id: "lupa-search-box-products",
           class: normalizeClass({ "lupa-search-box-products-expanded": showAll.value })
@@ -31624,11 +31655,15 @@ and ensure you are accounting for this risk.
             key: 2,
             innerHTML: _ctx.panelOptions.appendCustomHtml
           }, null, 8, _hoisted_1$14)) : createCommentVNode("", true),
-          showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+          ((_c = (_b25 = _ctx.items) == null ? void 0 : _b25.length) != null ? _c : 0) === 0 && ((_d = _ctx.panelOptions) == null ? void 0 : _d.showPanelZeroResults) && _ctx.searchBoxOptions && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
             key: 3,
+            options: _ctx.searchBoxOptions
+          }, null, 8, ["options"])) : createCommentVNode("", true),
+          showAllItemsToggleButton.value ? (openBlock(), createElementBlock("a", {
+            key: 4,
             class: "lupa-search-box-expand",
             onClick: _cache[0] || (_cache[0] = ($event) => showAll.value = !showAll.value)
-          }, toDisplayString(showAll.value ? (_b25 = _ctx.labels) == null ? void 0 : _b25.showLess : (_c = _ctx.labels) == null ? void 0 : _c.showMore), 1)) : createCommentVNode("", true),
+          }, toDisplayString(showAll.value ? (_e = _ctx.labels) == null ? void 0 : _e.showLess : (_f = _ctx.labels) == null ? void 0 : _f.showMore), 1)) : createCommentVNode("", true),
           renderSlot(_ctx.$slots, "default")
         ], 2);
       };
@@ -31799,9 +31834,11 @@ and ensure you are accounting for this risk.
       });
       const inputValueProp = computed(() => props.inputValue);
       onMounted(() => {
+        searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
         getItemsDebounced();
       });
       watch(inputValueProp, () => {
+        searchBoxStore.setQueryKeyLoading({ queryKey: props.panel.queryKey, loading: true });
         getItemsDebounced();
       });
       const enhancePanelData = () => __async2(null, null, function* () {
@@ -31842,9 +31879,10 @@ and ensure you are accounting for this risk.
         var _a25, _b25;
         return openBlock(), createBlock(_sfc_main$1i, {
           items: (_b25 = (_a25 = searchResult.value) == null ? void 0 : _a25.items) != null ? _b25 : [],
-          panelOptions: _ctx.panel,
+          "panel-options": _ctx.panel,
           labels: _ctx.labels,
-          inputValue: _ctx.inputValue,
+          "input-value": _ctx.inputValue,
+          "search-box-options": _ctx.searchBoxOptions,
           onProductClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("product-click"))
         }, createSlots({
           default: withCtx(() => {
@@ -31867,7 +31905,7 @@ and ensure you are accounting for this risk.
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["items", "panelOptions", "labels", "inputValue"]);
+        ]), 1032, ["items", "panel-options", "labels", "input-value", "search-box-options"]);
       };
     }
   });
@@ -32006,7 +32044,7 @@ and ensure you are accounting for this risk.
       const panels = computed(() => props.options.panels);
       const sdkOptions = computed(() => props.options.options);
       const searchBoxStore = useSearchBoxStore();
-      const { suggestionResults, hasAnyResults, panelItemCounts } = storeToRefs(searchBoxStore);
+      const { suggestionResults, hasAnyResults, panelItemCounts, anyPanelLoading } = storeToRefs(searchBoxStore);
       const emit2 = __emit;
       const isSearchEmpty = computed(() => !props.inputValue || props.inputValue.length < 1);
       const displayResults = computed(() => {
@@ -32194,7 +32232,7 @@ and ensure you are accounting for this risk.
                 ], 14, _hoisted_1$12);
               }), 128))
             ], 4),
-            !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1E, {
+            !unref(hasAnyResults) && _ctx.options.showNoResultsPanel && !unref(anyPanelLoading) ? (openBlock(), createBlock(_sfc_main$1E, {
               key: 1,
               options: _ctx.options
             }, null, 8, ["options"])) : createCommentVNode("", true),
@@ -33376,7 +33414,7 @@ and ensure you are accounting for this risk.
       facet: {},
       currentFilters: {}
     },
-    emits: ["select"],
+    emits: ["select", "showMoreClicked", "filterFocused"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const searchResultStore = useSearchResultStore();
@@ -33440,6 +33478,9 @@ and ensure you are accounting for this risk.
       };
       const toggleShowAll = () => {
         showAll.value = !showAll.value;
+        if (showAll.value) {
+          emit2("showMoreClicked", facet.value.key);
+        }
       };
       const isChecked = (item) => {
         var _a25, _b25;
@@ -33469,8 +33510,9 @@ and ensure you are accounting for this risk.
             class: "lupa-term-filter",
             "data-cy": "lupa-term-filter",
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => termFilter.value = $event),
-            placeholder: _ctx.options.labels.facetFilter
-          }, null, 8, _hoisted_2$E)), [
+            placeholder: _ctx.options.labels.facetFilter,
+            onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("filterFocused"))
+          }, null, 40, _hoisted_2$E)), [
             [vModelText, termFilter.value]
           ]) : createCommentVNode("", true),
           createBaseVNode("div", _hoisted_3$u, [
@@ -35085,7 +35127,9 @@ and ensure you are accounting for this risk.
               facet: facet.value,
               currentFilters: currentFilters.value[facet.value.key],
               options: _ctx.options,
-              onSelect: handleFacetSelect
+              onSelect: handleFacetSelect,
+              onShowMoreClicked: handleFacetQueryFilter,
+              onFilterFocused: handleFacetQueryFilter
             }, null, 40, ["facet", "currentFilters", "options"])),
             _ctx.clearable ? (openBlock(), createElementBlock("div", {
               key: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getlupa/client",
-  "version": "1.26.1",
+  "version": "1.26.3",
   "main": "dist/lupaSearch.js",
   "module": "dist/lupaSearch.mjs",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@getlupa/client-sdk": "^1.8.1",
-    "@getlupa/vue": "0.25.4",
+    "@getlupa/vue": "0.26.1",
     "@rushstack/eslint-patch": "^1.12.0",
     "@tsconfig/node18": "^18.2.4",
     "@types/jsdom": "^21.1.7",