@getlupa/vue 0.5.0 → 0.5.1

package/dist/lupaSearch.js

@@ -3035,7 +3035,7 @@ const useSearchBoxStore = defineStore("searchBox", () => {
 const _hoisted_1$1b = { id: "lupa-search-box-input-container" };
 const _hoisted_2$O = { class: "lupa-input-clear" };
 const _hoisted_3$A = { id: "lupa-search-box-input" };
-const _hoisted_4$r = ["value"];
+const _hoisted_4$q = ["value"];
 const _hoisted_5$f = ["placeholder"];
 const _hoisted_6$8 = {
   key: 0,
@@ -3130,7 +3130,7 @@ const _sfc_main$1j = /* @__PURE__ */ vue.defineComponent({
             class: "lupa-hint",
             value: showHint.value ? suggestedValue.value.item.suggestion : "",
             disabled: ""
-          }, null, 8, _hoisted_4$r),
+          }, null, 8, _hoisted_4$q),
           vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
           }, inputAttributes.value, {
@@ -3309,7 +3309,7 @@ const _hoisted_3$z = {
   class: "lupa-suggestion-facet",
   "data-cy": "lupa-suggestion-facet"
 };
-const _hoisted_4$q = {
+const _hoisted_4$p = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
@@ -3355,7 +3355,7 @@ const _sfc_main$1e = /* @__PURE__ */ vue.defineComponent({
           innerHTML: _ctx.suggestion.displayHighlight
         }, null, 8, _hoisted_1$17)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$M, vue.toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$z, [
-          vue.createElementVNode("span", _hoisted_4$q, vue.toDisplayString(facetLabel.value), 1),
+          vue.createElementVNode("span", _hoisted_4$p, vue.toDisplayString(facetLabel.value), 1),
           vue.createElementVNode("span", _hoisted_5$e, vue.toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : vue.createCommentVNode("", true)
       ]);
@@ -3757,7 +3757,7 @@ const _sfc_main$16 = /* @__PURE__ */ vue.defineComponent({
 const _hoisted_1$10 = ["innerHTML"];
 const _hoisted_2$J = { key: 0 };
 const _hoisted_3$y = { key: 1 };
-const _hoisted_4$p = { class: "lupa-search-box-custom-label" };
+const _hoisted_4$o = { class: "lupa-search-box-custom-label" };
 const _hoisted_5$d = { class: "lupa-search-box-custom-text" };
 const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
   __name: "SearchBoxProductCustom",
@@ -3790,7 +3790,7 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
         class: [className.value, "lupa-search-box-product-custom"]
       }, vue.toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$J, vue.toDisplayString(text.value), 1)) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$y, [
-          vue.createElementVNode("div", _hoisted_4$p, vue.toDisplayString(label.value), 1),
+          vue.createElementVNode("div", _hoisted_4$o, vue.toDisplayString(label.value), 1),
           vue.createElementVNode("div", _hoisted_5$d, vue.toDisplayString(text.value), 1)
         ]))
       ], 16));
@@ -4186,7 +4186,7 @@ const useTrackingStore = defineStore("tracking", () => {
 const _hoisted_1$Z = ["href"];
 const _hoisted_2$H = { class: "lupa-search-box-product-image-section" };
 const _hoisted_3$w = { class: "lupa-search-box-product-details-section" };
-const _hoisted_4$o = {
+const _hoisted_4$n = {
   key: 0,
   class: "lupa-search-box-product-add-to-cart-section"
 };
@@ -4307,7 +4307,7 @@ const _sfc_main$11 = /* @__PURE__ */ vue.defineComponent({
             }, null, 8, ["item", "element", "labels", "link"]);
           }), 128))
         ]),
-        addToCartElement.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$o, [
+        addToCartElement.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$n, [
           vue.createVNode(_sfc_main$12, {
             class: "lupa-search-box-product-element",
             item: _ctx.item,
@@ -4442,12 +4442,8 @@ const _hoisted_1$X = {
   key: 0,
   id: "lupa-search-box-panel"
 };
-const _hoisted_2$G = {
-  class: "lupa-main-panel",
-  "data-cy": "lupa-main-panel"
-};
-const _hoisted_3$v = ["data-cy"];
-const _hoisted_4$n = {
+const _hoisted_2$G = ["data-cy"];
+const _hoisted_3$v = {
   key: 1,
   id: "lupa-search-box-panel"
 };
@@ -4484,7 +4480,7 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
     const panels = vue.computed(() => props.options.panels);
     const sdkOptions = vue.computed(() => props.options.options);
     const searchBoxStore = useSearchBoxStore();
-    const { suggestionResults, hasAnyResults } = storeToRefs(searchBoxStore);
+    const { suggestionResults, hasAnyResults, panelItemCounts } = storeToRefs(searchBoxStore);
     const displayResults = vue.computed(
       () => {
         var _a, _b;
@@ -4565,6 +4561,12 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
         `${window.innerHeight - panel.getBoundingClientRect().y - 10}px`
       );
     };
+    const numberOfVisiblePanels = vue.computed(() => {
+      return panelItemCounts.value.filter((v) => v.count > 0).length;
+    });
+    const expandOnSinglePanel = vue.computed(() => {
+      return numberOfVisiblePanels.value === 1 && props.options.expandOnSinglePanel;
+    });
     return (_ctx, _cache) => {
       var _a;
       return vue.openBlock(), vue.createElementBlock("div", {
@@ -4572,7 +4574,11 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
         ref: panelContainer
       }, [
         displayResults.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$X, [
-          vue.createElementVNode("div", _hoisted_2$G, [
+          vue.createElementVNode("div", {
+            class: "lupa-main-panel",
+            style: vue.normalizeStyle(expandOnSinglePanel.value ? { display: "block" } : {}),
+            "data-cy": "lupa-main-panel"
+          }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(displayPanels.value, (panel, index) => {
               return vue.openBlock(), vue.createElementBlock("div", {
                 key: index,
@@ -4601,9 +4607,9 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
                     key: "0"
                   } : void 0
                 ]), 1064, ["panel", "options", "debounce", "inputValue", "labels"])) : vue.createCommentVNode("", true)
-              ], 10, _hoisted_3$v);
+              ], 10, _hoisted_2$G);
             }), 128))
-          ]),
+          ], 4),
           !vue.unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (vue.openBlock(), vue.createBlock(_sfc_main$1f, {
             key: 0,
             labels: labels.value
@@ -4614,7 +4620,7 @@ const _sfc_main$_ = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadVa
             showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
             onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
           }, null, 8, ["labels", "showTotalCount"])) : vue.createCommentVNode("", true)
-        ])) : displayHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$n, [
+        ])) : displayHistory.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$v, [
           vue.createVNode(_sfc_main$1g, {
             options: _ctx.options.history,
             history: history.value,
@@ -4683,7 +4689,8 @@ const _sfc_main$Z = /* @__PURE__ */ vue.defineComponent({
         "debounce",
         "showTotalCount",
         "hideMoreResultsButtonOnNoResults",
-        "showNoResultsPanel"
+        "showNoResultsPanel",
+        "expandOnSinglePanel"
       ])
     );
     const searchTriggers = vue.computed(() => {
@@ -9368,8 +9375,14 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     const isTitleResultTopPosition = vue.computed(() => {
       return props.options.searchTitlePosition === "search-results-top";
     });
+    const handlePopState = () => {
+      var _a;
+      const searchParams = getSearchParams((_a = props.options.ssr) == null ? void 0 : _a.url);
+      paramStore.add(parseParams(searchParams));
+    };
     vue.onMounted(() => {
       var _a, _b;
+      window.addEventListener("popstate", handlePopState);
       window.addEventListener("resize", handleResize);
       if (props.initialData) {
         searchResultStore.add(__spreadValues({}, props.initialData));
@@ -9380,6 +9393,7 @@ const _sfc_main$c = /* @__PURE__ */ vue.defineComponent({
     });
     vue.onBeforeUnmount(() => {
       window.removeEventListener("resize", handleResize);
+      window.removeEventListener("popstate", handlePopState);
     });
     const trackItemListView = (title, items = []) => {
       trackingStore.trackEvent({

package/dist/lupaSearch.mjs

@@ -37,7 +37,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, toDisplayString, createCommentVNode, onMounted, onBeforeMount, Fragment, renderList, createBlock, toHandlers, withModifiers, resolveDynamicComponent, createVNode, renderSlot, createSlots, withCtx, normalizeProps, guardReactiveProps, onBeforeUnmount, createTextVNode, onUnmounted, resolveComponent, vModelSelect, normalizeStyle, h as h$1, provide, cloneVNode } 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, toDisplayString, createCommentVNode, onMounted, onBeforeMount, Fragment, renderList, createBlock, toHandlers, withModifiers, resolveDynamicComponent, createVNode, renderSlot, createSlots, withCtx, normalizeProps, guardReactiveProps, onBeforeUnmount, normalizeStyle, createTextVNode, onUnmounted, resolveComponent, vModelSelect, h as h$1, provide, cloneVNode } from "vue";
 var isVue2 = false;
 function set(target, key, val) {
   if (Array.isArray(target)) {
@@ -3033,7 +3033,7 @@ const useSearchBoxStore = defineStore("searchBox", () => {
 const _hoisted_1$1b = { id: "lupa-search-box-input-container" };
 const _hoisted_2$O = { class: "lupa-input-clear" };
 const _hoisted_3$A = { id: "lupa-search-box-input" };
-const _hoisted_4$r = ["value"];
+const _hoisted_4$q = ["value"];
 const _hoisted_5$f = ["placeholder"];
 const _hoisted_6$8 = {
   key: 0,
@@ -3128,7 +3128,7 @@ const _sfc_main$1j = /* @__PURE__ */ defineComponent({
             class: "lupa-hint",
             value: showHint.value ? suggestedValue.value.item.suggestion : "",
             disabled: ""
-          }, null, 8, _hoisted_4$r),
+          }, null, 8, _hoisted_4$q),
           withDirectives(createElementVNode("input", mergeProps({
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => inputValue.value = $event)
           }, inputAttributes.value, {
@@ -3307,7 +3307,7 @@ const _hoisted_3$z = {
   class: "lupa-suggestion-facet",
   "data-cy": "lupa-suggestion-facet"
 };
-const _hoisted_4$q = {
+const _hoisted_4$p = {
   class: "lupa-suggestion-facet-label",
   "data-cy": "lupa-suggestion-facet-label"
 };
@@ -3353,7 +3353,7 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
           innerHTML: _ctx.suggestion.displayHighlight
         }, null, 8, _hoisted_1$17)) : (openBlock(), createElementBlock("div", _hoisted_2$M, toDisplayString(_ctx.suggestion.display), 1)),
         _ctx.suggestion.facet ? (openBlock(), createElementBlock("div", _hoisted_3$z, [
-          createElementVNode("span", _hoisted_4$q, toDisplayString(facetLabel.value), 1),
+          createElementVNode("span", _hoisted_4$p, toDisplayString(facetLabel.value), 1),
           createElementVNode("span", _hoisted_5$e, toDisplayString(_ctx.suggestion.facet.title), 1)
         ])) : createCommentVNode("", true)
       ]);
@@ -3755,7 +3755,7 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
 const _hoisted_1$10 = ["innerHTML"];
 const _hoisted_2$J = { key: 0 };
 const _hoisted_3$y = { key: 1 };
-const _hoisted_4$p = { class: "lupa-search-box-custom-label" };
+const _hoisted_4$o = { class: "lupa-search-box-custom-label" };
 const _hoisted_5$d = { class: "lupa-search-box-custom-text" };
 const _sfc_main$15 = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductCustom",
@@ -3788,7 +3788,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
         class: [className.value, "lupa-search-box-product-custom"]
       }, toHandlers(_ctx.options.action ? { click: handleClick } : {}, true)), [
         !label.value ? (openBlock(), createElementBlock("div", _hoisted_2$J, toDisplayString(text.value), 1)) : (openBlock(), createElementBlock("div", _hoisted_3$y, [
-          createElementVNode("div", _hoisted_4$p, toDisplayString(label.value), 1),
+          createElementVNode("div", _hoisted_4$o, toDisplayString(label.value), 1),
           createElementVNode("div", _hoisted_5$d, toDisplayString(text.value), 1)
         ]))
       ], 16));
@@ -4184,7 +4184,7 @@ const useTrackingStore = defineStore("tracking", () => {
 const _hoisted_1$Z = ["href"];
 const _hoisted_2$H = { class: "lupa-search-box-product-image-section" };
 const _hoisted_3$w = { class: "lupa-search-box-product-details-section" };
-const _hoisted_4$o = {
+const _hoisted_4$n = {
   key: 0,
   class: "lupa-search-box-product-add-to-cart-section"
 };
@@ -4305,7 +4305,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
             }, null, 8, ["item", "element", "labels", "link"]);
           }), 128))
         ]),
-        addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$o, [
+        addToCartElement.value ? (openBlock(), createElementBlock("div", _hoisted_4$n, [
           createVNode(_sfc_main$12, {
             class: "lupa-search-box-product-element",
             item: _ctx.item,
@@ -4440,12 +4440,8 @@ const _hoisted_1$X = {
   key: 0,
   id: "lupa-search-box-panel"
 };
-const _hoisted_2$G = {
-  class: "lupa-main-panel",
-  "data-cy": "lupa-main-panel"
-};
-const _hoisted_3$v = ["data-cy"];
-const _hoisted_4$n = {
+const _hoisted_2$G = ["data-cy"];
+const _hoisted_3$v = {
   key: 1,
   id: "lupa-search-box-panel"
 };
@@ -4482,7 +4478,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
     const panels = computed(() => props.options.panels);
     const sdkOptions = computed(() => props.options.options);
     const searchBoxStore = useSearchBoxStore();
-    const { suggestionResults, hasAnyResults } = storeToRefs(searchBoxStore);
+    const { suggestionResults, hasAnyResults, panelItemCounts } = storeToRefs(searchBoxStore);
     const displayResults = computed(
       () => {
         var _a, _b;
@@ -4563,6 +4559,12 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         `${window.innerHeight - panel.getBoundingClientRect().y - 10}px`
       );
     };
+    const numberOfVisiblePanels = computed(() => {
+      return panelItemCounts.value.filter((v) => v.count > 0).length;
+    });
+    const expandOnSinglePanel = computed(() => {
+      return numberOfVisiblePanels.value === 1 && props.options.expandOnSinglePanel;
+    });
     return (_ctx, _cache) => {
       var _a;
       return openBlock(), createElementBlock("div", {
@@ -4570,7 +4572,11 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
         ref: panelContainer
       }, [
         displayResults.value ? (openBlock(), createElementBlock("div", _hoisted_1$X, [
-          createElementVNode("div", _hoisted_2$G, [
+          createElementVNode("div", {
+            class: "lupa-main-panel",
+            style: normalizeStyle(expandOnSinglePanel.value ? { display: "block" } : {}),
+            "data-cy": "lupa-main-panel"
+          }, [
             (openBlock(true), createElementBlock(Fragment, null, renderList(displayPanels.value, (panel, index) => {
               return openBlock(), createElementBlock("div", {
                 key: index,
@@ -4599,9 +4605,9 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
                     key: "0"
                   } : void 0
                 ]), 1064, ["panel", "options", "debounce", "inputValue", "labels"])) : createCommentVNode("", true)
-              ], 10, _hoisted_3$v);
+              ], 10, _hoisted_2$G);
             }), 128))
-          ]),
+          ], 4),
           !unref(hasAnyResults) && _ctx.options.showNoResultsPanel ? (openBlock(), createBlock(_sfc_main$1f, {
             key: 0,
             labels: labels.value
@@ -4612,7 +4618,7 @@ const _sfc_main$_ = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues
             showTotalCount: (_a = _ctx.options.showTotalCount) != null ? _a : false,
             onGoToResults: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("go-to-results"))
           }, null, 8, ["labels", "showTotalCount"])) : createCommentVNode("", true)
-        ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_4$n, [
+        ])) : displayHistory.value ? (openBlock(), createElementBlock("div", _hoisted_3$v, [
           createVNode(_sfc_main$1g, {
             options: _ctx.options.history,
             history: history.value,
@@ -4681,7 +4687,8 @@ const _sfc_main$Z = /* @__PURE__ */ defineComponent({
         "debounce",
         "showTotalCount",
         "hideMoreResultsButtonOnNoResults",
-        "showNoResultsPanel"
+        "showNoResultsPanel",
+        "expandOnSinglePanel"
       ])
     );
     const searchTriggers = computed(() => {
@@ -9366,8 +9373,14 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const isTitleResultTopPosition = computed(() => {
       return props.options.searchTitlePosition === "search-results-top";
     });
+    const handlePopState = () => {
+      var _a;
+      const searchParams = getSearchParams((_a = props.options.ssr) == null ? void 0 : _a.url);
+      paramStore.add(parseParams(searchParams));
+    };
     onMounted(() => {
       var _a, _b;
+      window.addEventListener("popstate", handlePopState);
       window.addEventListener("resize", handleResize);
       if (props.initialData) {
         searchResultStore.add(__spreadValues({}, props.initialData));
@@ -9378,6 +9391,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     });
     onBeforeUnmount(() => {
       window.removeEventListener("resize", handleResize);
+      window.removeEventListener("popstate", handlePopState);
     });
     const trackItemListView = (title, items = []) => {
       trackingStore.trackEvent({

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

@@ -52,4 +52,5 @@ export type SearchBoxPanelOptions = SearchBoxInputOptions & {
     showTotalCount?: boolean;
     showNoResultsPanel?: boolean;
     hideMoreResultsButtonOnNoResults?: boolean;
+    expandOnSinglePanel?: boolean;
 };

package/package.json

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