@getlupa/vue 0.8.2 → 0.8.3

package/dist/lupaSearch.js

@@ -1522,6 +1522,7 @@ const DEFAULT_PAGE_SIZE = 12;
 const DEFAULT_PAGE_SIZE_SELECTION = [12, 24, 36, 60];
 const LUPA_ROUTING_EVENT = "lupaRedirect";
 const RATING_STAR_HTML = "☆";
+const RESULT_ROOT_SELECTOR = "#lupa-search-results";
 const production = "https://api.lupasearch.com/v1/";
 const staging = "https://api.staging.lupasearch.com/v1/";
 const Env$1 = {
@@ -3976,22 +3977,21 @@ var ResultsLayoutEnum = /* @__PURE__ */ ((ResultsLayoutEnum2) => {
   ResultsLayoutEnum2["LIST"] = "List";
   return ResultsLayoutEnum2;
 })(ResultsLayoutEnum || {});
-const RESULT_ROOT_ID = "lupa-search-results";
 const SHADOW_ROOT_ID = "lupa-shadow-id";
 const CONTAINER_ROOT_ID = "lupa-search-container";
-const scrollToSearchResults = (timeout = 500) => {
+const scrollToSearchResults = (timeout = 500, containerSelector) => {
   if (timeout) {
-    setTimeout(() => scrollTo(RESULT_ROOT_ID), timeout);
+    setTimeout(() => scrollTo(containerSelector != null ? containerSelector : RESULT_ROOT_SELECTOR), timeout);
   } else {
-    scrollTo(RESULT_ROOT_ID);
+    scrollTo(RESULT_ROOT_SELECTOR);
   }
 };
-const scrollTo = (elementId) => {
+const scrollTo = (elementSelector) => {
   var _a, _b;
-  let el = document.getElementById(elementId);
+  let el = document.querySelector(elementSelector);
   const shadowRoot = (_a = document.getElementById(SHADOW_ROOT_ID)) == null ? void 0 : _a.shadowRoot;
   if (!el) {
-    el = (_b = shadowRoot == null ? void 0 : shadowRoot.getElementById(elementId)) != null ? _b : null;
+    el = (_b = shadowRoot == null ? void 0 : shadowRoot.getElementById(elementSelector)) != null ? _b : null;
   }
   if (!el) {
     return;
@@ -7376,8 +7376,10 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const paramStore = useParamsStore();
     const searchResultStore = useSearchResultStore();
+    const optionsStore = useOptionsStore();
     const { filters } = storeToRefs(paramStore);
     const { facets } = storeToRefs(searchResultStore);
+    const { searchResultOptions } = storeToRefs(optionsStore);
     vue.computed(() => {
       var _a;
       return (_a = facets.value) == null ? void 0 : _a.filter((f2) => {
@@ -7392,6 +7394,14 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
         return !((_a2 = props.options.promotedFacets) == null ? void 0 : _a2.includes(f2.key));
       });
     });
+    const scrollToResultsOptions = vue.computed(() => {
+      var _a, _b, _c, _d, _e, _f;
+      return {
+        enabled: ((_a = searchResultOptions.value.scrollToResults) == null ? void 0 : _a.enabled) === void 0 ? true : (_b = searchResultOptions.value.scrollToResults) == null ? void 0 : _b.enabled,
+        container: (_d = (_c = searchResultOptions.value.scrollToResults) == null ? void 0 : _c.scrollToContainerSelector) != null ? _d : RESULT_ROOT_SELECTOR,
+        timeout: (_f = (_e = searchResultOptions.value.scrollToResults) == null ? void 0 : _e.timeout) != null ? _f : 500
+      };
+    });
     const handleFacetSelect = (facetAction) => {
       switch (facetAction.type) {
         case "terms":
@@ -7404,7 +7414,12 @@ const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
           toggleHierarchyFilter(paramStore.appendParams, facetAction, filters.value);
           break;
       }
-      scrollToSearchResults();
+      if (scrollToResultsOptions.value.enabled) {
+        scrollToSearchResults(
+          scrollToResultsOptions.value.timeout,
+          scrollToResultsOptions.value.container
+        );
+      }
     };
     const clear = (facet) => {
       const param = getFacetKey(facet.key, facet.type);
@@ -7716,7 +7731,9 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     });
     const paramStore = useParamsStore();
     const screenStore = useScreenStore();
+    const optionsStore = useOptionsStore();
     const { isMobileWidth } = storeToRefs(screenStore);
+    const { searchResultOptions } = storeToRefs(optionsStore);
     const pageOptionsCount = vue.computed(() => {
       return isMobileWidth.value ? props.options.displayMobile : props.options.display;
     });
@@ -7750,12 +7767,25 @@ const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     const showPagination = vue.computed(() => {
       return pages.value.length > 1;
     });
+    const scrollToResultsOptions = vue.computed(() => {
+      var _a, _b, _c, _d, _e, _f;
+      return {
+        enabled: ((_a = searchResultOptions.value.scrollToResults) == null ? void 0 : _a.enabled) === void 0 ? true : (_b = searchResultOptions.value.scrollToResults) == null ? void 0 : _b.enabled,
+        container: (_d = (_c = searchResultOptions.value.scrollToResults) == null ? void 0 : _c.scrollToContainerSelector) != null ? _d : RESULT_ROOT_SELECTOR,
+        timeout: (_f = (_e = searchResultOptions.value.scrollToResults) == null ? void 0 : _e.timeout) != null ? _f : 500
+      };
+    });
     const handlePageChange = (page) => {
       if (page > 0) {
         paramStore.appendParams({
           params: [{ name: QUERY_PARAMS.PAGE, value: page.toString() }]
         });
-        scrollToSearchResults();
+        if (scrollToResultsOptions.value.enabled) {
+          scrollToSearchResults(
+            scrollToResultsOptions.value.timeout,
+            scrollToResultsOptions.value.container
+          );
+        }
       }
     };
     return (_ctx, _cache) => {

package/dist/lupaSearch.mjs

@@ -1520,6 +1520,7 @@ const DEFAULT_PAGE_SIZE = 12;
 const DEFAULT_PAGE_SIZE_SELECTION = [12, 24, 36, 60];
 const LUPA_ROUTING_EVENT = "lupaRedirect";
 const RATING_STAR_HTML = "☆";
+const RESULT_ROOT_SELECTOR = "#lupa-search-results";
 const production = "https://api.lupasearch.com/v1/";
 const staging = "https://api.staging.lupasearch.com/v1/";
 const Env$1 = {
@@ -3974,22 +3975,21 @@ var ResultsLayoutEnum = /* @__PURE__ */ ((ResultsLayoutEnum2) => {
   ResultsLayoutEnum2["LIST"] = "List";
   return ResultsLayoutEnum2;
 })(ResultsLayoutEnum || {});
-const RESULT_ROOT_ID = "lupa-search-results";
 const SHADOW_ROOT_ID = "lupa-shadow-id";
 const CONTAINER_ROOT_ID = "lupa-search-container";
-const scrollToSearchResults = (timeout = 500) => {
+const scrollToSearchResults = (timeout = 500, containerSelector) => {
   if (timeout) {
-    setTimeout(() => scrollTo(RESULT_ROOT_ID), timeout);
+    setTimeout(() => scrollTo(containerSelector != null ? containerSelector : RESULT_ROOT_SELECTOR), timeout);
   } else {
-    scrollTo(RESULT_ROOT_ID);
+    scrollTo(RESULT_ROOT_SELECTOR);
   }
 };
-const scrollTo = (elementId) => {
+const scrollTo = (elementSelector) => {
   var _a, _b;
-  let el = document.getElementById(elementId);
+  let el = document.querySelector(elementSelector);
   const shadowRoot = (_a = document.getElementById(SHADOW_ROOT_ID)) == null ? void 0 : _a.shadowRoot;
   if (!el) {
-    el = (_b = shadowRoot == null ? void 0 : shadowRoot.getElementById(elementId)) != null ? _b : null;
+    el = (_b = shadowRoot == null ? void 0 : shadowRoot.getElementById(elementSelector)) != null ? _b : null;
   }
   if (!el) {
     return;
@@ -7374,8 +7374,10 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     const props = __props;
     const paramStore = useParamsStore();
     const searchResultStore = useSearchResultStore();
+    const optionsStore = useOptionsStore();
     const { filters } = storeToRefs(paramStore);
     const { facets } = storeToRefs(searchResultStore);
+    const { searchResultOptions } = storeToRefs(optionsStore);
     computed(() => {
       var _a;
       return (_a = facets.value) == null ? void 0 : _a.filter((f2) => {
@@ -7390,6 +7392,14 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
         return !((_a2 = props.options.promotedFacets) == null ? void 0 : _a2.includes(f2.key));
       });
     });
+    const scrollToResultsOptions = computed(() => {
+      var _a, _b, _c, _d, _e, _f;
+      return {
+        enabled: ((_a = searchResultOptions.value.scrollToResults) == null ? void 0 : _a.enabled) === void 0 ? true : (_b = searchResultOptions.value.scrollToResults) == null ? void 0 : _b.enabled,
+        container: (_d = (_c = searchResultOptions.value.scrollToResults) == null ? void 0 : _c.scrollToContainerSelector) != null ? _d : RESULT_ROOT_SELECTOR,
+        timeout: (_f = (_e = searchResultOptions.value.scrollToResults) == null ? void 0 : _e.timeout) != null ? _f : 500
+      };
+    });
     const handleFacetSelect = (facetAction) => {
       switch (facetAction.type) {
         case "terms":
@@ -7402,7 +7412,12 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
           toggleHierarchyFilter(paramStore.appendParams, facetAction, filters.value);
           break;
       }
-      scrollToSearchResults();
+      if (scrollToResultsOptions.value.enabled) {
+        scrollToSearchResults(
+          scrollToResultsOptions.value.timeout,
+          scrollToResultsOptions.value.container
+        );
+      }
     };
     const clear = (facet) => {
       const param = getFacetKey(facet.key, facet.type);
@@ -7714,7 +7729,9 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     });
     const paramStore = useParamsStore();
     const screenStore = useScreenStore();
+    const optionsStore = useOptionsStore();
     const { isMobileWidth } = storeToRefs(screenStore);
+    const { searchResultOptions } = storeToRefs(optionsStore);
     const pageOptionsCount = computed(() => {
       return isMobileWidth.value ? props.options.displayMobile : props.options.display;
     });
@@ -7748,12 +7765,25 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
     const showPagination = computed(() => {
       return pages.value.length > 1;
     });
+    const scrollToResultsOptions = computed(() => {
+      var _a, _b, _c, _d, _e, _f;
+      return {
+        enabled: ((_a = searchResultOptions.value.scrollToResults) == null ? void 0 : _a.enabled) === void 0 ? true : (_b = searchResultOptions.value.scrollToResults) == null ? void 0 : _b.enabled,
+        container: (_d = (_c = searchResultOptions.value.scrollToResults) == null ? void 0 : _c.scrollToContainerSelector) != null ? _d : RESULT_ROOT_SELECTOR,
+        timeout: (_f = (_e = searchResultOptions.value.scrollToResults) == null ? void 0 : _e.timeout) != null ? _f : 500
+      };
+    });
     const handlePageChange = (page) => {
       if (page > 0) {
         paramStore.appendParams({
           params: [{ name: QUERY_PARAMS.PAGE, value: page.toString() }]
         });
-        scrollToSearchResults();
+        if (scrollToResultsOptions.value.enabled) {
+          scrollToSearchResults(
+            scrollToResultsOptions.value.timeout,
+            scrollToResultsOptions.value.container
+          );
+        }
       }
     };
     return (_ctx, _cache) => {

package/dist/src/constants/global.const.d.ts

@@ -15,3 +15,4 @@ export declare const DEFAULT_PAGE_SIZE_SELECTION: number[];
 export declare const LUPA_ROUTING_EVENT = "lupaRedirect";
 export declare const DEFAULT_CONTAINER_STYLE = "containerStyle.css";
 export declare const RATING_STAR_HTML = "☆";
+export declare const RESULT_ROOT_SELECTOR = "#lupa-search-results";

package/dist/src/index.d.ts

@@ -10,7 +10,7 @@ import type { SearchContainerOptions, SearchContainerConfigOptions } from './typ
 import type { SearchResultBadgeType, SearchResultBadgeElement, BadgeGenerateSeed, BadgeGenerateOptions, BadgeOptions } from './types/search-results/BadgeOptions';
 import { BadgeType } from './types/search-results/BadgeOptions';
 import type { RoutingBehavior } from './types/search-results/RoutingBehavior';
-import type { SearchResultsOptions, FacetStyle, SearchResultEventCallbacks, CallbackContext, SortCallbackContext, ResultCallbackContext, FacetFilterQuery, SearchResultsFilterOptions, ResultFacetOptions, DynamicData, SsrOptions } from './types/search-results/SearchResultsOptions';
+import type { SearchResultsOptions, FacetStyle, SearchResultEventCallbacks, CallbackContext, SortCallbackContext, ResultCallbackContext, FacetFilterQuery, SearchResultsFilterOptions, ResultFacetOptions, DynamicData, SsrOptions, ScrollToResultsOptions } from './types/search-results/SearchResultsOptions';
 import type { AnchorPosition } from './types/search-results/SearchResultsProductCardOptions';
 import type { SortOptions, SearchResultsSortOptions } from './types/search-results/SearchResultsSort';
 import SearchBox from './components/search-box/SearchBox.vue';
@@ -29,4 +29,4 @@ declare const LupaSearch: {
     install: (app: any) => void;
 };
 export { SearchBox, SearchResults, ProductList, Recommendations, SearchContainer, ChatContainer, DocumentElementType, SearchBoxPanelType, BadgeType, setupTracking, LupaSearch, initPinia, getInitialSearchResults };
-export type { TrackingOptions, SearchBoxOptions, SearchResultsOptions, ProductListOptions, SdkOptions, FacetStyle, Environment, RoutingBehavior, AnchorPosition, SortDirection, DocumentElement, ImageDocumentElement, TitleDocumentElement, DescriptionDocumentElement, CustomDocumentElement, PriceElement, RegularPriceDocumentElement, RatingElement, AddToCartElement, CustomHtmlElement, SortOptions, SearchResultsSortOptions, SearchResultEventCallbacks, CallbackContext, SortCallbackContext, ResultCallbackContext, FacetFilterQuery, CategoryFilterOptions, SearchResultsFilterOptions, SearchResultBadgeType, SearchResultBadgeElement, ResultFacetOptions, BadgeGenerateSeed, BadgeGenerateOptions, BadgeOptions, SearchContainerOptions, SearchContainerConfigOptions, SingleStarRatingElement, DynamicData, ProductRecommendationOptions, RecommendationABTestingOptions, SsrOptions, ChatOptions, ChatSettings, SearchBoxEventCallbacks, SearchBoxResultCallbackContext, QueryParams, SearchBoxResultsNavigateContext, RedirectionOptions };
+export type { TrackingOptions, SearchBoxOptions, SearchResultsOptions, ProductListOptions, SdkOptions, FacetStyle, Environment, RoutingBehavior, AnchorPosition, SortDirection, DocumentElement, ImageDocumentElement, TitleDocumentElement, DescriptionDocumentElement, CustomDocumentElement, PriceElement, RegularPriceDocumentElement, RatingElement, AddToCartElement, CustomHtmlElement, SortOptions, SearchResultsSortOptions, SearchResultEventCallbacks, CallbackContext, SortCallbackContext, ResultCallbackContext, FacetFilterQuery, CategoryFilterOptions, SearchResultsFilterOptions, SearchResultBadgeType, SearchResultBadgeElement, ResultFacetOptions, BadgeGenerateSeed, BadgeGenerateOptions, BadgeOptions, SearchContainerOptions, SearchContainerConfigOptions, SingleStarRatingElement, DynamicData, ProductRecommendationOptions, RecommendationABTestingOptions, SsrOptions, ChatOptions, ChatSettings, SearchBoxEventCallbacks, SearchBoxResultCallbackContext, QueryParams, SearchBoxResultsNavigateContext, RedirectionOptions, ScrollToResultsOptions };

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

@@ -14,6 +14,12 @@ export type SearchResultsOptions = SearchResultsProductOptions & SearchResultsAd
     dynamicData?: DynamicData;
     ssr?: SsrOptions;
     redirections?: RedirectionOptions;
+    scrollToResults?: ScrollToResultsOptions;
+};
+export type ScrollToResultsOptions = {
+    enabled?: boolean;
+    scrollToContainerSelector?: string;
+    timeout?: number;
 };
 export type SsrOptions = {
     baseUrl?: string;

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

@@ -1,4 +1,4 @@
-export declare const scrollToSearchResults: (timeout?: number) => void;
-export declare const scrollTo: (elementId: string) => void;
+export declare const scrollToSearchResults: (timeout?: number, containerSelector?: string) => void;
+export declare const scrollTo: (elementSelector: string) => void;
 export declare const disableBodyScroll: () => void;
 export declare const enableBodyScroll: () => void;

package/package.json

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