@getlupa/client 1.12.5 → 1.12.6

package/dist/lupaSearch.iife.js

@@ -29008,22 +29008,30 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     getSearchBoxComponent,
     getSearchResultsComponent
   };
-  const app = {
-    box: {},
-    results: {},
-    productList: {},
-    searchContainer: {},
-    recommendations: {},
-    chat: {}
-  };
-  const tracking = (options) => {
-    setupTracking(options);
+  const getMountElement = (element, mountingBehavior = "replace", mountToParent) => {
+    const parent = element == null ? void 0 : element.parentElement;
+    if (mountingBehavior === "replace") {
+      let mountElement = element;
+      if (mountToParent) {
+        mountElement = parent;
+      }
+      return mountElement;
+    }
+    if (mountingBehavior === "append") {
+      const newElement = document.createElement("div");
+      element == null ? void 0 : element.append(newElement);
+      return newElement;
+    }
+    if (mountingBehavior === "prepend") {
+      const newElement = document.createElement("div");
+      element == null ? void 0 : element.prepend(newElement);
+      return newElement;
+    }
   };
-  const createVue = (selector, rootComponent, options, mountToParent = false) => {
+  const createVue = (selector, mountingBehavior = "replace", rootComponent, options, mountToParent = false) => {
     const pinia = initPinia();
     const element = typeof selector === "string" ? document.querySelector(selector) : selector;
-    const parent = element == null ? void 0 : element.parentElement;
-    const mountElement = mountToParent ? parent : element;
+    const mountElement = getMountElement(element, mountingBehavior, mountToParent);
     if (!mountElement) {
       console.error(`Cannot mount LupaSearch component. Element "${selector}" not found`);
       return;
@@ -29040,6 +29048,17 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
     return { mountedApp, mountedComponent, props, app: app2, mountElement };
   };
+  const app = {
+    box: {},
+    results: {},
+    productList: {},
+    searchContainer: {},
+    recommendations: {},
+    chat: {}
+  };
+  const tracking = (options) => {
+    setupTracking(options);
+  };
   const applySearchBox = (options, mountOptions) => {
     const existingInstance = app.box[options.inputSelector];
     if (existingInstance) {
@@ -29054,6 +29073,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
     const instance = createVue(
       options.inputSelector,
+      mountOptions == null ? void 0 : mountOptions.mountingBehavior,
       _sfc_main$4,
       { searchBoxOptions: options },
       true
@@ -29082,9 +29102,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       }
       return;
     }
-    const instance = createVue(options.containerSelector, _sfc_main$3, {
-      searchResultsOptions: options
-    });
+    const instance = createVue(
+      options.containerSelector,
+      mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+      _sfc_main$3,
+      {
+        searchResultsOptions: options
+      }
+    );
     if (!instance) {
       return;
     }
@@ -29102,9 +29127,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       }
       return;
     }
-    const instance = createVue(options.containerSelector, _sfc_main$2, {
-      productListOptions: options
-    });
+    const instance = createVue(
+      options.containerSelector,
+      mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+      _sfc_main$2,
+      {
+        productListOptions: options
+      }
+    );
     if (!instance) {
       return;
     }
@@ -29134,7 +29164,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       options: options.options
     });
     document.body.appendChild(host);
-    const instance = createVue(manager, _sfc_main$1, {
+    const instance = createVue(manager, mountOptions == null ? void 0 : mountOptions.mountingBehavior, _sfc_main$1, {
       searchContainerOptions: options
     });
     if (!instance) {
@@ -29171,9 +29201,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       }
       return;
     }
-    const instance = createVue(options.containerSelector, _sfc_main, {
-      recommendationOptions: options
-    });
+    const instance = createVue(
+      options.containerSelector,
+      mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+      _sfc_main,
+      {
+        recommendationOptions: options
+      }
+    );
     if (!instance) {
       return;
     }
@@ -29191,9 +29226,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       }
       return;
     }
-    const instance = createVue(options.displayOptions.containerSelector, _sfc_main$1o, {
-      options
-    });
+    const instance = createVue(
+      options.displayOptions.containerSelector,
+      mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+      _sfc_main$1o,
+      {
+        options
+      }
+    );
     if (!instance) {
       return;
     }

package/dist/lupaSearch.js

@@ -29008,22 +29008,30 @@ const SearchContainerConfigurationService = {
   getSearchBoxComponent,
   getSearchResultsComponent
 };
-const app = {
-  box: {},
-  results: {},
-  productList: {},
-  searchContainer: {},
-  recommendations: {},
-  chat: {}
-};
-const tracking = (options) => {
-  setupTracking(options);
+const getMountElement = (element, mountingBehavior = "replace", mountToParent) => {
+  const parent = element == null ? void 0 : element.parentElement;
+  if (mountingBehavior === "replace") {
+    let mountElement = element;
+    if (mountToParent) {
+      mountElement = parent;
+    }
+    return mountElement;
+  }
+  if (mountingBehavior === "append") {
+    const newElement = document.createElement("div");
+    element == null ? void 0 : element.append(newElement);
+    return newElement;
+  }
+  if (mountingBehavior === "prepend") {
+    const newElement = document.createElement("div");
+    element == null ? void 0 : element.prepend(newElement);
+    return newElement;
+  }
 };
-const createVue = (selector, rootComponent, options, mountToParent = false) => {
+const createVue = (selector, mountingBehavior = "replace", rootComponent, options, mountToParent = false) => {
   const pinia = initPinia();
   const element = typeof selector === "string" ? document.querySelector(selector) : selector;
-  const parent = element == null ? void 0 : element.parentElement;
-  const mountElement = mountToParent ? parent : element;
+  const mountElement = getMountElement(element, mountingBehavior, mountToParent);
   if (!mountElement) {
     console.error(`Cannot mount LupaSearch component. Element "${selector}" not found`);
     return;
@@ -29040,6 +29048,17 @@ const createVue = (selector, rootComponent, options, mountToParent = false) => {
   }
   return { mountedApp, mountedComponent, props, app: app2, mountElement };
 };
+const app = {
+  box: {},
+  results: {},
+  productList: {},
+  searchContainer: {},
+  recommendations: {},
+  chat: {}
+};
+const tracking = (options) => {
+  setupTracking(options);
+};
 const applySearchBox = (options, mountOptions) => {
   const existingInstance = app.box[options.inputSelector];
   if (existingInstance) {
@@ -29054,6 +29073,7 @@ const applySearchBox = (options, mountOptions) => {
   }
   const instance = createVue(
     options.inputSelector,
+    mountOptions == null ? void 0 : mountOptions.mountingBehavior,
     _sfc_main$4,
     { searchBoxOptions: options },
     true
@@ -29082,9 +29102,14 @@ const searchResults = (options, mountOptions) => {
     }
     return;
   }
-  const instance = createVue(options.containerSelector, _sfc_main$3, {
-    searchResultsOptions: options
-  });
+  const instance = createVue(
+    options.containerSelector,
+    mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+    _sfc_main$3,
+    {
+      searchResultsOptions: options
+    }
+  );
   if (!instance) {
     return;
   }
@@ -29102,9 +29127,14 @@ const productList = (options, mountOptions) => {
     }
     return;
   }
-  const instance = createVue(options.containerSelector, _sfc_main$2, {
-    productListOptions: options
-  });
+  const instance = createVue(
+    options.containerSelector,
+    mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+    _sfc_main$2,
+    {
+      productListOptions: options
+    }
+  );
   if (!instance) {
     return;
   }
@@ -29134,7 +29164,7 @@ const searchContainer = (options, mountOptions) => {
     options: options.options
   });
   document.body.appendChild(host);
-  const instance = createVue(manager, _sfc_main$1, {
+  const instance = createVue(manager, mountOptions == null ? void 0 : mountOptions.mountingBehavior, _sfc_main$1, {
     searchContainerOptions: options
   });
   if (!instance) {
@@ -29171,9 +29201,14 @@ const recommendations = (options, mountOptions) => {
     }
     return;
   }
-  const instance = createVue(options.containerSelector, _sfc_main, {
-    recommendationOptions: options
-  });
+  const instance = createVue(
+    options.containerSelector,
+    mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+    _sfc_main,
+    {
+      recommendationOptions: options
+    }
+  );
   if (!instance) {
     return;
   }
@@ -29191,9 +29226,14 @@ const chat = (options, mountOptions) => {
     }
     return;
   }
-  const instance = createVue(options.displayOptions.containerSelector, _sfc_main$1o, {
-    options
-  });
+  const instance = createVue(
+    options.displayOptions.containerSelector,
+    mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+    _sfc_main$1o,
+    {
+      options
+    }
+  );
   if (!instance) {
     return;
   }

package/dist/lupaSearch.mjs

@@ -29006,22 +29006,30 @@ const SearchContainerConfigurationService = {
   getSearchBoxComponent,
   getSearchResultsComponent
 };
-const app = {
-  box: {},
-  results: {},
-  productList: {},
-  searchContainer: {},
-  recommendations: {},
-  chat: {}
-};
-const tracking = (options) => {
-  setupTracking(options);
+const getMountElement = (element, mountingBehavior = "replace", mountToParent) => {
+  const parent = element == null ? void 0 : element.parentElement;
+  if (mountingBehavior === "replace") {
+    let mountElement = element;
+    if (mountToParent) {
+      mountElement = parent;
+    }
+    return mountElement;
+  }
+  if (mountingBehavior === "append") {
+    const newElement = document.createElement("div");
+    element == null ? void 0 : element.append(newElement);
+    return newElement;
+  }
+  if (mountingBehavior === "prepend") {
+    const newElement = document.createElement("div");
+    element == null ? void 0 : element.prepend(newElement);
+    return newElement;
+  }
 };
-const createVue = (selector, rootComponent, options, mountToParent = false) => {
+const createVue = (selector, mountingBehavior = "replace", rootComponent, options, mountToParent = false) => {
   const pinia = initPinia();
   const element = typeof selector === "string" ? document.querySelector(selector) : selector;
-  const parent = element == null ? void 0 : element.parentElement;
-  const mountElement = mountToParent ? parent : element;
+  const mountElement = getMountElement(element, mountingBehavior, mountToParent);
   if (!mountElement) {
     console.error(`Cannot mount LupaSearch component. Element "${selector}" not found`);
     return;
@@ -29038,6 +29046,17 @@ const createVue = (selector, rootComponent, options, mountToParent = false) => {
   }
   return { mountedApp, mountedComponent, props, app: app2, mountElement };
 };
+const app = {
+  box: {},
+  results: {},
+  productList: {},
+  searchContainer: {},
+  recommendations: {},
+  chat: {}
+};
+const tracking = (options) => {
+  setupTracking(options);
+};
 const applySearchBox = (options, mountOptions) => {
   const existingInstance = app.box[options.inputSelector];
   if (existingInstance) {
@@ -29052,6 +29071,7 @@ const applySearchBox = (options, mountOptions) => {
   }
   const instance = createVue(
     options.inputSelector,
+    mountOptions == null ? void 0 : mountOptions.mountingBehavior,
     _sfc_main$4,
     { searchBoxOptions: options },
     true
@@ -29080,9 +29100,14 @@ const searchResults = (options, mountOptions) => {
     }
     return;
   }
-  const instance = createVue(options.containerSelector, _sfc_main$3, {
-    searchResultsOptions: options
-  });
+  const instance = createVue(
+    options.containerSelector,
+    mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+    _sfc_main$3,
+    {
+      searchResultsOptions: options
+    }
+  );
   if (!instance) {
     return;
   }
@@ -29100,9 +29125,14 @@ const productList = (options, mountOptions) => {
     }
     return;
   }
-  const instance = createVue(options.containerSelector, _sfc_main$2, {
-    productListOptions: options
-  });
+  const instance = createVue(
+    options.containerSelector,
+    mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+    _sfc_main$2,
+    {
+      productListOptions: options
+    }
+  );
   if (!instance) {
     return;
   }
@@ -29132,7 +29162,7 @@ const searchContainer = (options, mountOptions) => {
     options: options.options
   });
   document.body.appendChild(host);
-  const instance = createVue(manager, _sfc_main$1, {
+  const instance = createVue(manager, mountOptions == null ? void 0 : mountOptions.mountingBehavior, _sfc_main$1, {
     searchContainerOptions: options
   });
   if (!instance) {
@@ -29169,9 +29199,14 @@ const recommendations = (options, mountOptions) => {
     }
     return;
   }
-  const instance = createVue(options.containerSelector, _sfc_main, {
-    recommendationOptions: options
-  });
+  const instance = createVue(
+    options.containerSelector,
+    mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+    _sfc_main,
+    {
+      recommendationOptions: options
+    }
+  );
   if (!instance) {
     return;
   }
@@ -29189,9 +29224,14 @@ const chat = (options, mountOptions) => {
     }
     return;
   }
-  const instance = createVue(options.displayOptions.containerSelector, _sfc_main$1o, {
-    options
-  });
+  const instance = createVue(
+    options.displayOptions.containerSelector,
+    mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+    _sfc_main$1o,
+    {
+      options
+    }
+  );
   if (!instance) {
     return;
   }

package/dist/lupaSearch.umd.js

@@ -29010,22 +29010,30 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     getSearchBoxComponent,
     getSearchResultsComponent
   };
-  const app = {
-    box: {},
-    results: {},
-    productList: {},
-    searchContainer: {},
-    recommendations: {},
-    chat: {}
-  };
-  const tracking = (options) => {
-    setupTracking(options);
+  const getMountElement = (element, mountingBehavior = "replace", mountToParent) => {
+    const parent = element == null ? void 0 : element.parentElement;
+    if (mountingBehavior === "replace") {
+      let mountElement = element;
+      if (mountToParent) {
+        mountElement = parent;
+      }
+      return mountElement;
+    }
+    if (mountingBehavior === "append") {
+      const newElement = document.createElement("div");
+      element == null ? void 0 : element.append(newElement);
+      return newElement;
+    }
+    if (mountingBehavior === "prepend") {
+      const newElement = document.createElement("div");
+      element == null ? void 0 : element.prepend(newElement);
+      return newElement;
+    }
   };
-  const createVue = (selector, rootComponent, options, mountToParent = false) => {
+  const createVue = (selector, mountingBehavior = "replace", rootComponent, options, mountToParent = false) => {
     const pinia = initPinia();
     const element = typeof selector === "string" ? document.querySelector(selector) : selector;
-    const parent = element == null ? void 0 : element.parentElement;
-    const mountElement = mountToParent ? parent : element;
+    const mountElement = getMountElement(element, mountingBehavior, mountToParent);
     if (!mountElement) {
       console.error(`Cannot mount LupaSearch component. Element "${selector}" not found`);
       return;
@@ -29042,6 +29050,17 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
     return { mountedApp, mountedComponent, props, app: app2, mountElement };
   };
+  const app = {
+    box: {},
+    results: {},
+    productList: {},
+    searchContainer: {},
+    recommendations: {},
+    chat: {}
+  };
+  const tracking = (options) => {
+    setupTracking(options);
+  };
   const applySearchBox = (options, mountOptions) => {
     const existingInstance = app.box[options.inputSelector];
     if (existingInstance) {
@@ -29056,6 +29075,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     }
     const instance = createVue(
       options.inputSelector,
+      mountOptions == null ? void 0 : mountOptions.mountingBehavior,
       _sfc_main$4,
       { searchBoxOptions: options },
       true
@@ -29084,9 +29104,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       }
       return;
     }
-    const instance = createVue(options.containerSelector, _sfc_main$3, {
-      searchResultsOptions: options
-    });
+    const instance = createVue(
+      options.containerSelector,
+      mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+      _sfc_main$3,
+      {
+        searchResultsOptions: options
+      }
+    );
     if (!instance) {
       return;
     }
@@ -29104,9 +29129,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       }
       return;
     }
-    const instance = createVue(options.containerSelector, _sfc_main$2, {
-      productListOptions: options
-    });
+    const instance = createVue(
+      options.containerSelector,
+      mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+      _sfc_main$2,
+      {
+        productListOptions: options
+      }
+    );
     if (!instance) {
       return;
     }
@@ -29136,7 +29166,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       options: options.options
     });
     document.body.appendChild(host);
-    const instance = createVue(manager, _sfc_main$1, {
+    const instance = createVue(manager, mountOptions == null ? void 0 : mountOptions.mountingBehavior, _sfc_main$1, {
       searchContainerOptions: options
     });
     if (!instance) {
@@ -29173,9 +29203,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       }
       return;
     }
-    const instance = createVue(options.containerSelector, _sfc_main, {
-      recommendationOptions: options
-    });
+    const instance = createVue(
+      options.containerSelector,
+      mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+      _sfc_main,
+      {
+        recommendationOptions: options
+      }
+    );
     if (!instance) {
       return;
     }
@@ -29193,9 +29228,14 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       }
       return;
     }
-    const instance = createVue(options.displayOptions.containerSelector, _sfc_main$1o, {
-      options
-    });
+    const instance = createVue(
+      options.displayOptions.containerSelector,
+      mountOptions == null ? void 0 : mountOptions.mountingBehavior,
+      _sfc_main$1o,
+      {
+        options
+      }
+    );
     if (!instance) {
       return;
     }

package/dist/src/index.d.ts

@@ -2,7 +2,8 @@ import type { Environment, SdkOptions, SortDirection, TrackingOptions, DocumentE
 import { DocumentElementType, SearchBoxPanelType, BadgeType, SearchResultBadgeType } from '@getlupa/vue';
 import { PreconfiguredSearchContainerOptions, SearchBoxDemoOptions, SearchDemoFields, SearchResultDemoOptions } from './types/PreconfiguredSearchContainerOptions';
 type MountOptions = {
-    fetch: boolean;
+    fetch?: boolean;
+    mountingBehavior?: 'replace' | 'append' | 'prepend';
 };
 declare const lupaSearch: {
     searchBox: (options: SearchBoxOptions, mountOptions?: MountOptions) => void;

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

@@ -0,0 +1,10 @@
+import { type Component } from 'vue';
+export declare const createVue: (selector: string | Element, mountingBehavior: string, rootComponent: Component, options: Record<string, unknown>, mountToParent?: boolean) => {
+    mountedApp: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}>, {}, {}>;
+    mountedComponent: any;
+    props: {
+        [x: string]: unknown;
+    };
+    app: import("vue").App<Element>;
+    mountElement: Element;
+};

package/package.json

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