@getlupa/client 1.1.0 → 1.1.3

package/dist/lupaSearch.iife.js

@@ -6855,6 +6855,20 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     DocumentElementType2["CUSTOM_HTML"] = "customHtml";
     return DocumentElementType2;
   })(DocumentElementType || {});
+  var SearchBoxPanelType = /* @__PURE__ */ ((SearchBoxPanelType2) => {
+    SearchBoxPanelType2["SUGGESTION"] = "suggestion";
+    SearchBoxPanelType2["DOCUMENT"] = "document";
+    return SearchBoxPanelType2;
+  })(SearchBoxPanelType || {});
+  var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
+    BadgeType2["DISCOUNTPERCENTAGE"] = "discountPercentage";
+    BadgeType2["DISCOUNTAMOUNT"] = "discountAmount";
+    BadgeType2["NEWITEM"] = "newItem";
+    BadgeType2["TEXT"] = "text";
+    BadgeType2["IMAGE"] = "image";
+    BadgeType2["CUSTOM_HTML"] = "customHtml";
+    return BadgeType2;
+  })(BadgeType || {});
   const retrieveHistory = () => {
     try {
       const historyString = window.localStorage.getItem(HISTORY_LOCAL_STORAGE_KEY);
@@ -7444,11 +7458,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       setSearchResultsLink
     };
   });
-  var SearchBoxPanelType = /* @__PURE__ */ ((SearchBoxPanelType2) => {
-    SearchBoxPanelType2["SUGGESTION"] = "suggestion";
-    SearchBoxPanelType2["DOCUMENT"] = "document";
-    return SearchBoxPanelType2;
-  })(SearchBoxPanelType || {});
   const flattenFacet = (key, facets, suggestion, inputValue) => {
     return facets.map((f2) => ({
       displayHighlight: getHint(suggestion.suggestion, inputValue != null ? inputValue : ""),
@@ -8602,8 +8611,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       setLoading
     };
   });
-  const _hoisted_1$S = { class: "lupa-search-results-add-to-cart-wrapper" };
-  const _hoisted_2$C = { class: "lupa-search-results-product-addtocart" };
+  const _hoisted_1$S = { class: "lupa-search-box-add-to-cart-wrapper" };
+  const _hoisted_2$C = { class: "lupa-search-box-product-addtocart" };
   const _hoisted_3$r = ["onClick", "disabled"];
   const _sfc_main$X = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductAddToCart",
@@ -9903,7 +9912,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     props: {
       options: {}
     },
-    setup(__props) {
+    setup(__props, { expose: __expose }) {
       const props = __props;
       const categoryChildren = ref([]);
       const optionStore = useOptionsStore();
@@ -9982,6 +9991,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         }
         handleRoutingEvent(backUrlLink.value, event, hasEventRouting.value);
       };
+      __expose({ fetch: fetch2 });
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock("div", _hoisted_1$H, [
           createBaseVNode("div", _hoisted_2$t, [
@@ -11809,8 +11819,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       options: {},
       expandable: { type: Boolean }
     },
-    setup(__props) {
+    setup(__props, { expose: __expose }) {
       const props = __props;
+      const categoryFilters = ref(null);
       const desktopFiltersVisible = computed(() => {
         var _a, _b, _c;
         return (_c = (_b = (_a = props.options.currentFilters) == null ? void 0 : _a.visibility) == null ? void 0 : _b.desktopSidebar) != null ? _c : true;
@@ -11822,6 +11833,13 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       const showCurrentFilters = computed(() => {
         return currentFiltersVisible.value ? Boolean(props.options.facets) : false;
       });
+      const fetch2 = () => {
+        var _a;
+        if (categoryFilters.value) {
+          (_a = categoryFilters.value) == null ? void 0 : _a.fetch();
+        }
+      };
+      __expose({ fetch: fetch2 });
       return (_ctx, _cache) => {
         var _a;
         return openBlock(), createElementBlock("div", _hoisted_1$z, [
@@ -11833,7 +11851,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           _ctx.options.categories ? (openBlock(), createBlock(_sfc_main$K, {
             key: 1,
             options: _ctx.options.categories,
-            ref: "categoryFilters"
+            ref_key: "categoryFilters",
+            ref: categoryFilters
           }, null, 8, ["options"])) : createCommentVNode("", true),
           _ctx.options.facets ? (openBlock(), createBlock(_sfc_main$D, {
             key: 2,
@@ -12420,15 +12439,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
     }
   });
-  var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
-    BadgeType2["DISCOUNTPERCENTAGE"] = "discountPercentage";
-    BadgeType2["DISCOUNTAMOUNT"] = "discountAmount";
-    BadgeType2["NEWITEM"] = "newItem";
-    BadgeType2["TEXT"] = "text";
-    BadgeType2["IMAGE"] = "image";
-    BadgeType2["CUSTOM_HTML"] = "customHtml";
-    return BadgeType2;
-  })(BadgeType || {});
   const _hoisted_1$p = { class: "lupa-generated-badges" };
   const _sfc_main$s = /* @__PURE__ */ defineComponent({
     __name: "SearchResultGeneratedBadges",
@@ -13876,7 +13886,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       isContainer: { type: Boolean },
       initialData: {}
     },
-    setup(__props) {
+    setup(__props, { expose: __expose }) {
       const props = __props;
       const searchResultStore = useSearchResultStore();
       const optionStore = useOptionsStore();
@@ -13907,12 +13917,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       onMounted(() => {
         var _a, _b;
         window.addEventListener("resize", handleResize);
-        optionStore.setSearchResultOptions({ options: props.options });
         if (props.initialData) {
           searchResultStore.add(__spreadValues2({}, props.initialData));
         }
         handleMounted();
-        optionStore.setInitialFilters({ initialFilters: initialFilters.value });
         (_b = (_a = props.options.callbacks) == null ? void 0 : _a.onMounted) == null ? void 0 : _b.call(_a);
         mounted.value = true;
       });
@@ -13998,6 +14006,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
       const handleMounted = () => {
         var _a;
+        optionStore.setSearchResultOptions({ options: props.options });
+        optionStore.setInitialFilters({ initialFilters: initialFilters.value });
         handleResize();
         if (props.isProductList) {
           const pageTitle = props.options.labels.htmlTitleTemplate;
@@ -14051,6 +14061,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         }
       };
       handleCreated();
+      __expose({ handleMounted, handleUrlChange });
       return (_ctx, _cache) => {
         var _a, _b, _c, _d, _e;
         return openBlock(), createElementBlock("div", {
@@ -26459,26 +26470,29 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     const parent = element == null ? void 0 : element.parentElement;
     const mountElement = mountToParent ? parent : element;
     if (!mountElement) {
-      console.error(`Cannot mount LupaSearch componbent. Element "${selector}" not found`);
+      console.error(`Cannot mount LupaSearch component. Element "${selector}" not found`);
       return;
     }
+    let mountedComponent = null;
     const props = reactive(__spreadValues({}, options));
-    const app2 = createApp(rootComponent, props);
+    const app2 = createApp({
+      render: () => mountedComponent = h$1(rootComponent, props)
+    });
     app2.use(pinia);
     const mountedApp = app2.mount(mountElement);
     if (mountToParent) {
       element == null ? void 0 : element.remove();
     }
-    return mountedApp;
+    return { mountedApp, mountedComponent, props };
   };
   const applySearchBox = (options, mountOptions) => {
     const existingInstance = app.box[options.inputSelector];
     if (existingInstance) {
-      existingInstance.searchBoxOptions = options;
+      existingInstance.props.searchBoxOptions = options;
       if (mountOptions == null ? void 0 : mountOptions.fetch) {
         setTimeout(() => {
-          var _a;
-          (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+          var _a, _b, _c, _d;
+          (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
         });
       }
       return;
@@ -26504,11 +26518,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const searchResults = (options, mountOptions) => {
     const existingInstance = app.results[options.containerSelector];
     if (existingInstance) {
-      existingInstance.searchResultsOptions = options;
+      existingInstance.props.searchResultsOptions = options;
       if (mountOptions == null ? void 0 : mountOptions.fetch) {
         setTimeout(() => {
-          var _a;
-          (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+          var _a, _b, _c, _d;
+          (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
         });
       }
       return;
@@ -26524,11 +26538,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const productList = (options, mountOptions) => {
     const existingInstance = app.productList[options.containerSelector];
     if (existingInstance) {
-      existingInstance.productListOptions = options;
+      existingInstance.props.productListOptions = options;
       if (mountOptions == null ? void 0 : mountOptions.fetch) {
         setTimeout(() => {
-          var _a;
-          (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+          var _a, _b, _c, _d;
+          (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
         });
       }
       return;
@@ -26542,16 +26556,15 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     app.productList[options.containerSelector] = instance;
   };
   const searchContainer = (options, mountOptions) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const existingInstance = app.searchContainer[options.trigger];
     if (existingInstance) {
-      existingInstance.searchContainerOptions.value = options;
-      existingInstance.reloadOptions();
-      console.log(existingInstance);
+      existingInstance.props.searchContainerOptions = options;
+      (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.reloadOptions) == null ? void 0 : _d.call(_c);
       if (mountOptions == null ? void 0 : mountOptions.fetch) {
         setTimeout(() => {
-          var _a2;
-          (_a2 = existingInstance.fetch) == null ? void 0 : _a2.call(existingInstance);
+          var _a2, _b2, _c2, _d2;
+          (_d2 = (_c2 = (_b2 = (_a2 = existingInstance.mountedComponent) == null ? void 0 : _a2.component) == null ? void 0 : _b2.exposed) == null ? void 0 : _c2.fetch) == null ? void 0 : _d2.call(_c2);
         });
       }
       return;
@@ -26562,7 +26575,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     attatchShadowDom({
       host,
       manager,
-      styleUrl: (_b = (_a = options.options) == null ? void 0 : _a.styleLink) != null ? _b : DEFAULT_CONTAINER_STYLE,
+      styleUrl: (_f = (_e = options.options) == null ? void 0 : _e.styleLink) != null ? _f : DEFAULT_CONTAINER_STYLE,
       options: options.options
     });
     document.body.appendChild(host);
@@ -26577,11 +26590,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const recommendations = (options, mountOptions) => {
     const existingInstance = app.recommendations[options.containerSelector];
     if (existingInstance) {
-      existingInstance.recommendationOptions = options;
+      existingInstance.props.recommendationOptions = options;
       if (mountOptions == null ? void 0 : mountOptions.fetch) {
         setTimeout(() => {
-          var _a;
-          (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+          var _a, _b, _c, _d;
+          (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
         });
       }
       return;
@@ -26683,7 +26696,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     window.getLupa = lupaSearch;
     window.lupaSearch = lupaSearch;
   }
+  exports.BadgeType = BadgeType;
   exports.DocumentElementType = DocumentElementType;
+  exports.SearchBoxPanelType = SearchBoxPanelType;
   exports.default = lupaSearch;
   Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
   return exports;

package/dist/lupaSearch.js

@@ -6855,6 +6855,20 @@ var DocumentElementType = /* @__PURE__ */ ((DocumentElementType2) => {
   DocumentElementType2["CUSTOM_HTML"] = "customHtml";
   return DocumentElementType2;
 })(DocumentElementType || {});
+var SearchBoxPanelType = /* @__PURE__ */ ((SearchBoxPanelType2) => {
+  SearchBoxPanelType2["SUGGESTION"] = "suggestion";
+  SearchBoxPanelType2["DOCUMENT"] = "document";
+  return SearchBoxPanelType2;
+})(SearchBoxPanelType || {});
+var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
+  BadgeType2["DISCOUNTPERCENTAGE"] = "discountPercentage";
+  BadgeType2["DISCOUNTAMOUNT"] = "discountAmount";
+  BadgeType2["NEWITEM"] = "newItem";
+  BadgeType2["TEXT"] = "text";
+  BadgeType2["IMAGE"] = "image";
+  BadgeType2["CUSTOM_HTML"] = "customHtml";
+  return BadgeType2;
+})(BadgeType || {});
 const retrieveHistory = () => {
   try {
     const historyString = window.localStorage.getItem(HISTORY_LOCAL_STORAGE_KEY);
@@ -7444,11 +7458,6 @@ const useParamsStore = defineStore("params", () => {
     setSearchResultsLink
   };
 });
-var SearchBoxPanelType = /* @__PURE__ */ ((SearchBoxPanelType2) => {
-  SearchBoxPanelType2["SUGGESTION"] = "suggestion";
-  SearchBoxPanelType2["DOCUMENT"] = "document";
-  return SearchBoxPanelType2;
-})(SearchBoxPanelType || {});
 const flattenFacet = (key, facets, suggestion, inputValue) => {
   return facets.map((f2) => ({
     displayHighlight: getHint(suggestion.suggestion, inputValue != null ? inputValue : ""),
@@ -8602,8 +8611,8 @@ const useSearchResultStore = defineStore("searchResult", () => {
     setLoading
   };
 });
-const _hoisted_1$S = { class: "lupa-search-results-add-to-cart-wrapper" };
-const _hoisted_2$C = { class: "lupa-search-results-product-addtocart" };
+const _hoisted_1$S = { class: "lupa-search-box-add-to-cart-wrapper" };
+const _hoisted_2$C = { class: "lupa-search-box-product-addtocart" };
 const _hoisted_3$r = ["onClick", "disabled"];
 const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductAddToCart",
@@ -9903,7 +9912,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   props: {
     options: {}
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const categoryChildren = ref([]);
     const optionStore = useOptionsStore();
@@ -9982,6 +9991,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       }
       handleRoutingEvent(backUrlLink.value, event, hasEventRouting.value);
     };
+    __expose({ fetch: fetch2 });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$H, [
         createBaseVNode("div", _hoisted_2$t, [
@@ -11809,8 +11819,9 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     options: {},
     expandable: { type: Boolean }
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
+    const categoryFilters = ref(null);
     const desktopFiltersVisible = computed(() => {
       var _a, _b, _c;
       return (_c = (_b = (_a = props.options.currentFilters) == null ? void 0 : _a.visibility) == null ? void 0 : _b.desktopSidebar) != null ? _c : true;
@@ -11822,6 +11833,13 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     const showCurrentFilters = computed(() => {
       return currentFiltersVisible.value ? Boolean(props.options.facets) : false;
     });
+    const fetch2 = () => {
+      var _a;
+      if (categoryFilters.value) {
+        (_a = categoryFilters.value) == null ? void 0 : _a.fetch();
+      }
+    };
+    __expose({ fetch: fetch2 });
     return (_ctx, _cache) => {
       var _a;
       return openBlock(), createElementBlock("div", _hoisted_1$z, [
@@ -11833,7 +11851,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
         _ctx.options.categories ? (openBlock(), createBlock(_sfc_main$K, {
           key: 1,
           options: _ctx.options.categories,
-          ref: "categoryFilters"
+          ref_key: "categoryFilters",
+          ref: categoryFilters
         }, null, 8, ["options"])) : createCommentVNode("", true),
         _ctx.options.facets ? (openBlock(), createBlock(_sfc_main$D, {
           key: 2,
@@ -12420,15 +12439,6 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
-  BadgeType2["DISCOUNTPERCENTAGE"] = "discountPercentage";
-  BadgeType2["DISCOUNTAMOUNT"] = "discountAmount";
-  BadgeType2["NEWITEM"] = "newItem";
-  BadgeType2["TEXT"] = "text";
-  BadgeType2["IMAGE"] = "image";
-  BadgeType2["CUSTOM_HTML"] = "customHtml";
-  return BadgeType2;
-})(BadgeType || {});
 const _hoisted_1$p = { class: "lupa-generated-badges" };
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "SearchResultGeneratedBadges",
@@ -13876,7 +13886,7 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
     isContainer: { type: Boolean },
     initialData: {}
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const searchResultStore = useSearchResultStore();
     const optionStore = useOptionsStore();
@@ -13907,12 +13917,10 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       var _a, _b;
       window.addEventListener("resize", handleResize);
-      optionStore.setSearchResultOptions({ options: props.options });
       if (props.initialData) {
         searchResultStore.add(__spreadValues2({}, props.initialData));
       }
       handleMounted();
-      optionStore.setInitialFilters({ initialFilters: initialFilters.value });
       (_b = (_a = props.options.callbacks) == null ? void 0 : _a.onMounted) == null ? void 0 : _b.call(_a);
       mounted.value = true;
     });
@@ -13998,6 +14006,8 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
     };
     const handleMounted = () => {
       var _a;
+      optionStore.setSearchResultOptions({ options: props.options });
+      optionStore.setInitialFilters({ initialFilters: initialFilters.value });
       handleResize();
       if (props.isProductList) {
         const pageTitle = props.options.labels.htmlTitleTemplate;
@@ -14051,6 +14061,7 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
       }
     };
     handleCreated();
+    __expose({ handleMounted, handleUrlChange });
     return (_ctx, _cache) => {
       var _a, _b, _c, _d, _e;
       return openBlock(), createElementBlock("div", {
@@ -26459,26 +26470,29 @@ const createVue = (selector, rootComponent, options, mountToParent = false) => {
   const parent = element == null ? void 0 : element.parentElement;
   const mountElement = mountToParent ? parent : element;
   if (!mountElement) {
-    console.error(`Cannot mount LupaSearch componbent. Element "${selector}" not found`);
+    console.error(`Cannot mount LupaSearch component. Element "${selector}" not found`);
     return;
   }
+  let mountedComponent = null;
   const props = reactive(__spreadValues({}, options));
-  const app2 = createApp(rootComponent, props);
+  const app2 = createApp({
+    render: () => mountedComponent = h$1(rootComponent, props)
+  });
   app2.use(pinia);
   const mountedApp = app2.mount(mountElement);
   if (mountToParent) {
     element == null ? void 0 : element.remove();
   }
-  return mountedApp;
+  return { mountedApp, mountedComponent, props };
 };
 const applySearchBox = (options, mountOptions) => {
   const existingInstance = app.box[options.inputSelector];
   if (existingInstance) {
-    existingInstance.searchBoxOptions = options;
+    existingInstance.props.searchBoxOptions = options;
     if (mountOptions == null ? void 0 : mountOptions.fetch) {
       setTimeout(() => {
-        var _a;
-        (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+        var _a, _b, _c, _d;
+        (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
       });
     }
     return;
@@ -26504,11 +26518,11 @@ const searchBox = (options, mountOptions) => {
 const searchResults = (options, mountOptions) => {
   const existingInstance = app.results[options.containerSelector];
   if (existingInstance) {
-    existingInstance.searchResultsOptions = options;
+    existingInstance.props.searchResultsOptions = options;
     if (mountOptions == null ? void 0 : mountOptions.fetch) {
       setTimeout(() => {
-        var _a;
-        (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+        var _a, _b, _c, _d;
+        (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
       });
     }
     return;
@@ -26524,11 +26538,11 @@ const searchResults = (options, mountOptions) => {
 const productList = (options, mountOptions) => {
   const existingInstance = app.productList[options.containerSelector];
   if (existingInstance) {
-    existingInstance.productListOptions = options;
+    existingInstance.props.productListOptions = options;
     if (mountOptions == null ? void 0 : mountOptions.fetch) {
       setTimeout(() => {
-        var _a;
-        (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+        var _a, _b, _c, _d;
+        (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
       });
     }
     return;
@@ -26542,16 +26556,15 @@ const productList = (options, mountOptions) => {
   app.productList[options.containerSelector] = instance;
 };
 const searchContainer = (options, mountOptions) => {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f;
   const existingInstance = app.searchContainer[options.trigger];
   if (existingInstance) {
-    existingInstance.searchContainerOptions.value = options;
-    existingInstance.reloadOptions();
-    console.log(existingInstance);
+    existingInstance.props.searchContainerOptions = options;
+    (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.reloadOptions) == null ? void 0 : _d.call(_c);
     if (mountOptions == null ? void 0 : mountOptions.fetch) {
       setTimeout(() => {
-        var _a2;
-        (_a2 = existingInstance.fetch) == null ? void 0 : _a2.call(existingInstance);
+        var _a2, _b2, _c2, _d2;
+        (_d2 = (_c2 = (_b2 = (_a2 = existingInstance.mountedComponent) == null ? void 0 : _a2.component) == null ? void 0 : _b2.exposed) == null ? void 0 : _c2.fetch) == null ? void 0 : _d2.call(_c2);
       });
     }
     return;
@@ -26562,7 +26575,7 @@ const searchContainer = (options, mountOptions) => {
   attatchShadowDom({
     host,
     manager,
-    styleUrl: (_b = (_a = options.options) == null ? void 0 : _a.styleLink) != null ? _b : DEFAULT_CONTAINER_STYLE,
+    styleUrl: (_f = (_e = options.options) == null ? void 0 : _e.styleLink) != null ? _f : DEFAULT_CONTAINER_STYLE,
     options: options.options
   });
   document.body.appendChild(host);
@@ -26577,11 +26590,11 @@ const searchContainer = (options, mountOptions) => {
 const recommendations = (options, mountOptions) => {
   const existingInstance = app.recommendations[options.containerSelector];
   if (existingInstance) {
-    existingInstance.recommendationOptions = options;
+    existingInstance.props.recommendationOptions = options;
     if (mountOptions == null ? void 0 : mountOptions.fetch) {
       setTimeout(() => {
-        var _a;
-        (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+        var _a, _b, _c, _d;
+        (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
       });
     }
     return;
@@ -26683,5 +26696,7 @@ if (window) {
   window.getLupa = lupaSearch;
   window.lupaSearch = lupaSearch;
 }
+exports.BadgeType = BadgeType;
 exports.DocumentElementType = DocumentElementType;
+exports.SearchBoxPanelType = SearchBoxPanelType;
 exports.default = lupaSearch;

package/dist/lupaSearch.mjs

@@ -6853,6 +6853,20 @@ var DocumentElementType = /* @__PURE__ */ ((DocumentElementType2) => {
   DocumentElementType2["CUSTOM_HTML"] = "customHtml";
   return DocumentElementType2;
 })(DocumentElementType || {});
+var SearchBoxPanelType = /* @__PURE__ */ ((SearchBoxPanelType2) => {
+  SearchBoxPanelType2["SUGGESTION"] = "suggestion";
+  SearchBoxPanelType2["DOCUMENT"] = "document";
+  return SearchBoxPanelType2;
+})(SearchBoxPanelType || {});
+var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
+  BadgeType2["DISCOUNTPERCENTAGE"] = "discountPercentage";
+  BadgeType2["DISCOUNTAMOUNT"] = "discountAmount";
+  BadgeType2["NEWITEM"] = "newItem";
+  BadgeType2["TEXT"] = "text";
+  BadgeType2["IMAGE"] = "image";
+  BadgeType2["CUSTOM_HTML"] = "customHtml";
+  return BadgeType2;
+})(BadgeType || {});
 const retrieveHistory = () => {
   try {
     const historyString = window.localStorage.getItem(HISTORY_LOCAL_STORAGE_KEY);
@@ -7442,11 +7456,6 @@ const useParamsStore = defineStore("params", () => {
     setSearchResultsLink
   };
 });
-var SearchBoxPanelType = /* @__PURE__ */ ((SearchBoxPanelType2) => {
-  SearchBoxPanelType2["SUGGESTION"] = "suggestion";
-  SearchBoxPanelType2["DOCUMENT"] = "document";
-  return SearchBoxPanelType2;
-})(SearchBoxPanelType || {});
 const flattenFacet = (key, facets, suggestion, inputValue) => {
   return facets.map((f2) => ({
     displayHighlight: getHint(suggestion.suggestion, inputValue != null ? inputValue : ""),
@@ -8600,8 +8609,8 @@ const useSearchResultStore = defineStore("searchResult", () => {
     setLoading
   };
 });
-const _hoisted_1$S = { class: "lupa-search-results-add-to-cart-wrapper" };
-const _hoisted_2$C = { class: "lupa-search-results-product-addtocart" };
+const _hoisted_1$S = { class: "lupa-search-box-add-to-cart-wrapper" };
+const _hoisted_2$C = { class: "lupa-search-box-product-addtocart" };
 const _hoisted_3$r = ["onClick", "disabled"];
 const _sfc_main$X = /* @__PURE__ */ defineComponent({
   __name: "SearchBoxProductAddToCart",
@@ -9901,7 +9910,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
   props: {
     options: {}
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const categoryChildren = ref([]);
     const optionStore = useOptionsStore();
@@ -9980,6 +9989,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
       }
       handleRoutingEvent(backUrlLink.value, event, hasEventRouting.value);
     };
+    __expose({ fetch: fetch2 });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$H, [
         createBaseVNode("div", _hoisted_2$t, [
@@ -11807,8 +11817,9 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     options: {},
     expandable: { type: Boolean }
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
+    const categoryFilters = ref(null);
     const desktopFiltersVisible = computed(() => {
       var _a, _b, _c;
       return (_c = (_b = (_a = props.options.currentFilters) == null ? void 0 : _a.visibility) == null ? void 0 : _b.desktopSidebar) != null ? _c : true;
@@ -11820,6 +11831,13 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     const showCurrentFilters = computed(() => {
       return currentFiltersVisible.value ? Boolean(props.options.facets) : false;
     });
+    const fetch2 = () => {
+      var _a;
+      if (categoryFilters.value) {
+        (_a = categoryFilters.value) == null ? void 0 : _a.fetch();
+      }
+    };
+    __expose({ fetch: fetch2 });
     return (_ctx, _cache) => {
       var _a;
       return openBlock(), createElementBlock("div", _hoisted_1$z, [
@@ -11831,7 +11849,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
         _ctx.options.categories ? (openBlock(), createBlock(_sfc_main$K, {
           key: 1,
           options: _ctx.options.categories,
-          ref: "categoryFilters"
+          ref_key: "categoryFilters",
+          ref: categoryFilters
         }, null, 8, ["options"])) : createCommentVNode("", true),
         _ctx.options.facets ? (openBlock(), createBlock(_sfc_main$D, {
           key: 2,
@@ -12418,15 +12437,6 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
-  BadgeType2["DISCOUNTPERCENTAGE"] = "discountPercentage";
-  BadgeType2["DISCOUNTAMOUNT"] = "discountAmount";
-  BadgeType2["NEWITEM"] = "newItem";
-  BadgeType2["TEXT"] = "text";
-  BadgeType2["IMAGE"] = "image";
-  BadgeType2["CUSTOM_HTML"] = "customHtml";
-  return BadgeType2;
-})(BadgeType || {});
 const _hoisted_1$p = { class: "lupa-generated-badges" };
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "SearchResultGeneratedBadges",
@@ -13874,7 +13884,7 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
     isContainer: { type: Boolean },
     initialData: {}
   },
-  setup(__props) {
+  setup(__props, { expose: __expose }) {
     const props = __props;
     const searchResultStore = useSearchResultStore();
     const optionStore = useOptionsStore();
@@ -13905,12 +13915,10 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
     onMounted(() => {
       var _a, _b;
       window.addEventListener("resize", handleResize);
-      optionStore.setSearchResultOptions({ options: props.options });
       if (props.initialData) {
         searchResultStore.add(__spreadValues2({}, props.initialData));
       }
       handleMounted();
-      optionStore.setInitialFilters({ initialFilters: initialFilters.value });
       (_b = (_a = props.options.callbacks) == null ? void 0 : _a.onMounted) == null ? void 0 : _b.call(_a);
       mounted.value = true;
     });
@@ -13996,6 +14004,8 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
     };
     const handleMounted = () => {
       var _a;
+      optionStore.setSearchResultOptions({ options: props.options });
+      optionStore.setInitialFilters({ initialFilters: initialFilters.value });
       handleResize();
       if (props.isProductList) {
         const pageTitle = props.options.labels.htmlTitleTemplate;
@@ -14049,6 +14059,7 @@ const _sfc_main$4$1 = /* @__PURE__ */ defineComponent({
       }
     };
     handleCreated();
+    __expose({ handleMounted, handleUrlChange });
     return (_ctx, _cache) => {
       var _a, _b, _c, _d, _e;
       return openBlock(), createElementBlock("div", {
@@ -26457,26 +26468,29 @@ const createVue = (selector, rootComponent, options, mountToParent = false) => {
   const parent = element == null ? void 0 : element.parentElement;
   const mountElement = mountToParent ? parent : element;
   if (!mountElement) {
-    console.error(`Cannot mount LupaSearch componbent. Element "${selector}" not found`);
+    console.error(`Cannot mount LupaSearch component. Element "${selector}" not found`);
     return;
   }
+  let mountedComponent = null;
   const props = reactive(__spreadValues({}, options));
-  const app2 = createApp(rootComponent, props);
+  const app2 = createApp({
+    render: () => mountedComponent = h$1(rootComponent, props)
+  });
   app2.use(pinia);
   const mountedApp = app2.mount(mountElement);
   if (mountToParent) {
     element == null ? void 0 : element.remove();
   }
-  return mountedApp;
+  return { mountedApp, mountedComponent, props };
 };
 const applySearchBox = (options, mountOptions) => {
   const existingInstance = app.box[options.inputSelector];
   if (existingInstance) {
-    existingInstance.searchBoxOptions = options;
+    existingInstance.props.searchBoxOptions = options;
     if (mountOptions == null ? void 0 : mountOptions.fetch) {
       setTimeout(() => {
-        var _a;
-        (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+        var _a, _b, _c, _d;
+        (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
       });
     }
     return;
@@ -26502,11 +26516,11 @@ const searchBox = (options, mountOptions) => {
 const searchResults = (options, mountOptions) => {
   const existingInstance = app.results[options.containerSelector];
   if (existingInstance) {
-    existingInstance.searchResultsOptions = options;
+    existingInstance.props.searchResultsOptions = options;
     if (mountOptions == null ? void 0 : mountOptions.fetch) {
       setTimeout(() => {
-        var _a;
-        (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+        var _a, _b, _c, _d;
+        (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
       });
     }
     return;
@@ -26522,11 +26536,11 @@ const searchResults = (options, mountOptions) => {
 const productList = (options, mountOptions) => {
   const existingInstance = app.productList[options.containerSelector];
   if (existingInstance) {
-    existingInstance.productListOptions = options;
+    existingInstance.props.productListOptions = options;
     if (mountOptions == null ? void 0 : mountOptions.fetch) {
       setTimeout(() => {
-        var _a;
-        (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+        var _a, _b, _c, _d;
+        (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
       });
     }
     return;
@@ -26540,16 +26554,15 @@ const productList = (options, mountOptions) => {
   app.productList[options.containerSelector] = instance;
 };
 const searchContainer = (options, mountOptions) => {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f;
   const existingInstance = app.searchContainer[options.trigger];
   if (existingInstance) {
-    existingInstance.searchContainerOptions.value = options;
-    existingInstance.reloadOptions();
-    console.log(existingInstance);
+    existingInstance.props.searchContainerOptions = options;
+    (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.reloadOptions) == null ? void 0 : _d.call(_c);
     if (mountOptions == null ? void 0 : mountOptions.fetch) {
       setTimeout(() => {
-        var _a2;
-        (_a2 = existingInstance.fetch) == null ? void 0 : _a2.call(existingInstance);
+        var _a2, _b2, _c2, _d2;
+        (_d2 = (_c2 = (_b2 = (_a2 = existingInstance.mountedComponent) == null ? void 0 : _a2.component) == null ? void 0 : _b2.exposed) == null ? void 0 : _c2.fetch) == null ? void 0 : _d2.call(_c2);
       });
     }
     return;
@@ -26560,7 +26573,7 @@ const searchContainer = (options, mountOptions) => {
   attatchShadowDom({
     host,
     manager,
-    styleUrl: (_b = (_a = options.options) == null ? void 0 : _a.styleLink) != null ? _b : DEFAULT_CONTAINER_STYLE,
+    styleUrl: (_f = (_e = options.options) == null ? void 0 : _e.styleLink) != null ? _f : DEFAULT_CONTAINER_STYLE,
     options: options.options
   });
   document.body.appendChild(host);
@@ -26575,11 +26588,11 @@ const searchContainer = (options, mountOptions) => {
 const recommendations = (options, mountOptions) => {
   const existingInstance = app.recommendations[options.containerSelector];
   if (existingInstance) {
-    existingInstance.recommendationOptions = options;
+    existingInstance.props.recommendationOptions = options;
     if (mountOptions == null ? void 0 : mountOptions.fetch) {
       setTimeout(() => {
-        var _a;
-        (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+        var _a, _b, _c, _d;
+        (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
       });
     }
     return;
@@ -26682,6 +26695,8 @@ if (window) {
   window.lupaSearch = lupaSearch;
 }
 export {
+  BadgeType,
   DocumentElementType,
+  SearchBoxPanelType,
   lupaSearch as default
 };

package/dist/lupaSearch.umd.js

@@ -6857,6 +6857,20 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     DocumentElementType2["CUSTOM_HTML"] = "customHtml";
     return DocumentElementType2;
   })(DocumentElementType || {});
+  var SearchBoxPanelType = /* @__PURE__ */ ((SearchBoxPanelType2) => {
+    SearchBoxPanelType2["SUGGESTION"] = "suggestion";
+    SearchBoxPanelType2["DOCUMENT"] = "document";
+    return SearchBoxPanelType2;
+  })(SearchBoxPanelType || {});
+  var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
+    BadgeType2["DISCOUNTPERCENTAGE"] = "discountPercentage";
+    BadgeType2["DISCOUNTAMOUNT"] = "discountAmount";
+    BadgeType2["NEWITEM"] = "newItem";
+    BadgeType2["TEXT"] = "text";
+    BadgeType2["IMAGE"] = "image";
+    BadgeType2["CUSTOM_HTML"] = "customHtml";
+    return BadgeType2;
+  })(BadgeType || {});
   const retrieveHistory = () => {
     try {
       const historyString = window.localStorage.getItem(HISTORY_LOCAL_STORAGE_KEY);
@@ -7446,11 +7460,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       setSearchResultsLink
     };
   });
-  var SearchBoxPanelType = /* @__PURE__ */ ((SearchBoxPanelType2) => {
-    SearchBoxPanelType2["SUGGESTION"] = "suggestion";
-    SearchBoxPanelType2["DOCUMENT"] = "document";
-    return SearchBoxPanelType2;
-  })(SearchBoxPanelType || {});
   const flattenFacet = (key, facets, suggestion, inputValue) => {
     return facets.map((f2) => ({
       displayHighlight: getHint(suggestion.suggestion, inputValue != null ? inputValue : ""),
@@ -8604,8 +8613,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       setLoading
     };
   });
-  const _hoisted_1$S = { class: "lupa-search-results-add-to-cart-wrapper" };
-  const _hoisted_2$C = { class: "lupa-search-results-product-addtocart" };
+  const _hoisted_1$S = { class: "lupa-search-box-add-to-cart-wrapper" };
+  const _hoisted_2$C = { class: "lupa-search-box-product-addtocart" };
   const _hoisted_3$r = ["onClick", "disabled"];
   const _sfc_main$X = /* @__PURE__ */ defineComponent({
     __name: "SearchBoxProductAddToCart",
@@ -9905,7 +9914,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     props: {
       options: {}
     },
-    setup(__props) {
+    setup(__props, { expose: __expose }) {
       const props = __props;
       const categoryChildren = ref([]);
       const optionStore = useOptionsStore();
@@ -9984,6 +9993,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         }
         handleRoutingEvent(backUrlLink.value, event, hasEventRouting.value);
       };
+      __expose({ fetch: fetch2 });
       return (_ctx, _cache) => {
         return openBlock(), createElementBlock("div", _hoisted_1$H, [
           createBaseVNode("div", _hoisted_2$t, [
@@ -11811,8 +11821,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       options: {},
       expandable: { type: Boolean }
     },
-    setup(__props) {
+    setup(__props, { expose: __expose }) {
       const props = __props;
+      const categoryFilters = ref(null);
       const desktopFiltersVisible = computed(() => {
         var _a, _b, _c;
         return (_c = (_b = (_a = props.options.currentFilters) == null ? void 0 : _a.visibility) == null ? void 0 : _b.desktopSidebar) != null ? _c : true;
@@ -11824,6 +11835,13 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       const showCurrentFilters = computed(() => {
         return currentFiltersVisible.value ? Boolean(props.options.facets) : false;
       });
+      const fetch2 = () => {
+        var _a;
+        if (categoryFilters.value) {
+          (_a = categoryFilters.value) == null ? void 0 : _a.fetch();
+        }
+      };
+      __expose({ fetch: fetch2 });
       return (_ctx, _cache) => {
         var _a;
         return openBlock(), createElementBlock("div", _hoisted_1$z, [
@@ -11835,7 +11853,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
           _ctx.options.categories ? (openBlock(), createBlock(_sfc_main$K, {
             key: 1,
             options: _ctx.options.categories,
-            ref: "categoryFilters"
+            ref_key: "categoryFilters",
+            ref: categoryFilters
           }, null, 8, ["options"])) : createCommentVNode("", true),
           _ctx.options.facets ? (openBlock(), createBlock(_sfc_main$D, {
             key: 2,
@@ -12422,15 +12441,6 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
     }
   });
-  var BadgeType = /* @__PURE__ */ ((BadgeType2) => {
-    BadgeType2["DISCOUNTPERCENTAGE"] = "discountPercentage";
-    BadgeType2["DISCOUNTAMOUNT"] = "discountAmount";
-    BadgeType2["NEWITEM"] = "newItem";
-    BadgeType2["TEXT"] = "text";
-    BadgeType2["IMAGE"] = "image";
-    BadgeType2["CUSTOM_HTML"] = "customHtml";
-    return BadgeType2;
-  })(BadgeType || {});
   const _hoisted_1$p = { class: "lupa-generated-badges" };
   const _sfc_main$s = /* @__PURE__ */ defineComponent({
     __name: "SearchResultGeneratedBadges",
@@ -13878,7 +13888,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       isContainer: { type: Boolean },
       initialData: {}
     },
-    setup(__props) {
+    setup(__props, { expose: __expose }) {
       const props = __props;
       const searchResultStore = useSearchResultStore();
       const optionStore = useOptionsStore();
@@ -13909,12 +13919,10 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       onMounted(() => {
         var _a, _b;
         window.addEventListener("resize", handleResize);
-        optionStore.setSearchResultOptions({ options: props.options });
         if (props.initialData) {
           searchResultStore.add(__spreadValues2({}, props.initialData));
         }
         handleMounted();
-        optionStore.setInitialFilters({ initialFilters: initialFilters.value });
         (_b = (_a = props.options.callbacks) == null ? void 0 : _a.onMounted) == null ? void 0 : _b.call(_a);
         mounted.value = true;
       });
@@ -14000,6 +14008,8 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
       };
       const handleMounted = () => {
         var _a;
+        optionStore.setSearchResultOptions({ options: props.options });
+        optionStore.setInitialFilters({ initialFilters: initialFilters.value });
         handleResize();
         if (props.isProductList) {
           const pageTitle = props.options.labels.htmlTitleTemplate;
@@ -14053,6 +14063,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
         }
       };
       handleCreated();
+      __expose({ handleMounted, handleUrlChange });
       return (_ctx, _cache) => {
         var _a, _b, _c, _d, _e;
         return openBlock(), createElementBlock("div", {
@@ -26461,26 +26472,29 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     const parent = element == null ? void 0 : element.parentElement;
     const mountElement = mountToParent ? parent : element;
     if (!mountElement) {
-      console.error(`Cannot mount LupaSearch componbent. Element "${selector}" not found`);
+      console.error(`Cannot mount LupaSearch component. Element "${selector}" not found`);
       return;
     }
+    let mountedComponent = null;
     const props = reactive(__spreadValues({}, options));
-    const app2 = createApp(rootComponent, props);
+    const app2 = createApp({
+      render: () => mountedComponent = h$1(rootComponent, props)
+    });
     app2.use(pinia);
     const mountedApp = app2.mount(mountElement);
     if (mountToParent) {
       element == null ? void 0 : element.remove();
     }
-    return mountedApp;
+    return { mountedApp, mountedComponent, props };
   };
   const applySearchBox = (options, mountOptions) => {
     const existingInstance = app.box[options.inputSelector];
     if (existingInstance) {
-      existingInstance.searchBoxOptions = options;
+      existingInstance.props.searchBoxOptions = options;
       if (mountOptions == null ? void 0 : mountOptions.fetch) {
         setTimeout(() => {
-          var _a;
-          (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+          var _a, _b, _c, _d;
+          (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
         });
       }
       return;
@@ -26506,11 +26520,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const searchResults = (options, mountOptions) => {
     const existingInstance = app.results[options.containerSelector];
     if (existingInstance) {
-      existingInstance.searchResultsOptions = options;
+      existingInstance.props.searchResultsOptions = options;
       if (mountOptions == null ? void 0 : mountOptions.fetch) {
         setTimeout(() => {
-          var _a;
-          (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+          var _a, _b, _c, _d;
+          (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
         });
       }
       return;
@@ -26526,11 +26540,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const productList = (options, mountOptions) => {
     const existingInstance = app.productList[options.containerSelector];
     if (existingInstance) {
-      existingInstance.productListOptions = options;
+      existingInstance.props.productListOptions = options;
       if (mountOptions == null ? void 0 : mountOptions.fetch) {
         setTimeout(() => {
-          var _a;
-          (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+          var _a, _b, _c, _d;
+          (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
         });
       }
       return;
@@ -26544,16 +26558,15 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     app.productList[options.containerSelector] = instance;
   };
   const searchContainer = (options, mountOptions) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f;
     const existingInstance = app.searchContainer[options.trigger];
     if (existingInstance) {
-      existingInstance.searchContainerOptions.value = options;
-      existingInstance.reloadOptions();
-      console.log(existingInstance);
+      existingInstance.props.searchContainerOptions = options;
+      (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.reloadOptions) == null ? void 0 : _d.call(_c);
       if (mountOptions == null ? void 0 : mountOptions.fetch) {
         setTimeout(() => {
-          var _a2;
-          (_a2 = existingInstance.fetch) == null ? void 0 : _a2.call(existingInstance);
+          var _a2, _b2, _c2, _d2;
+          (_d2 = (_c2 = (_b2 = (_a2 = existingInstance.mountedComponent) == null ? void 0 : _a2.component) == null ? void 0 : _b2.exposed) == null ? void 0 : _c2.fetch) == null ? void 0 : _d2.call(_c2);
         });
       }
       return;
@@ -26564,7 +26577,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     attatchShadowDom({
       host,
       manager,
-      styleUrl: (_b = (_a = options.options) == null ? void 0 : _a.styleLink) != null ? _b : DEFAULT_CONTAINER_STYLE,
+      styleUrl: (_f = (_e = options.options) == null ? void 0 : _e.styleLink) != null ? _f : DEFAULT_CONTAINER_STYLE,
       options: options.options
     });
     document.body.appendChild(host);
@@ -26579,11 +26592,11 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
   const recommendations = (options, mountOptions) => {
     const existingInstance = app.recommendations[options.containerSelector];
     if (existingInstance) {
-      existingInstance.recommendationOptions = options;
+      existingInstance.props.recommendationOptions = options;
       if (mountOptions == null ? void 0 : mountOptions.fetch) {
         setTimeout(() => {
-          var _a;
-          (_a = existingInstance.fetch) == null ? void 0 : _a.call(existingInstance);
+          var _a, _b, _c, _d;
+          (_d = (_c = (_b = (_a = existingInstance.mountedComponent) == null ? void 0 : _a.component) == null ? void 0 : _b.exposed) == null ? void 0 : _c.fetch) == null ? void 0 : _d.call(_c);
         });
       }
       return;
@@ -26685,7 +26698,9 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
     window.getLupa = lupaSearch;
     window.lupaSearch = lupaSearch;
   }
+  exports2.BadgeType = BadgeType;
   exports2.DocumentElementType = DocumentElementType;
+  exports2.SearchBoxPanelType = SearchBoxPanelType;
   exports2.default = lupaSearch;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 });

package/dist/src/index.d.ts

@@ -1,5 +1,5 @@
-import type { Environment, SdkOptions, SortDirection, TrackingOptions, DocumentElement, ImageDocumentElement, TitleDocumentElement, DescriptionDocumentElement, CustomDocumentElement, PriceElement, RegularPriceDocumentElement, RatingElement, AddToCartElement, CustomHtmlElement, SingleStarRatingElement, ProductListOptions, CategoryFilterOptions, ProductRecommendationOptions, RecommendationABTestingOptions, SearchBoxOptions, SearchBoxPanelType, SearchContainerOptions, SearchContainerConfigOptions, BadgeType, SearchResultBadgeType, SearchResultBadgeElement, BadgeGenerateSeed, BadgeGenerateOptions, BadgeOptions, RoutingBehavior, SearchResultsOptions, FacetStyle, SearchResultEventCallbacks, CallbackContext, FacetFilterQuery, SearchResultsFilterOptions, ResultFacetOptions, DynamicData, AnchorPosition, SortOptions, SearchResultsSortOptions } from '@getlupa/vue';
-import { DocumentElementType } from '@getlupa/vue';
+import type { Environment, SdkOptions, SortDirection, TrackingOptions, DocumentElement, ImageDocumentElement, TitleDocumentElement, DescriptionDocumentElement, CustomDocumentElement, PriceElement, RegularPriceDocumentElement, RatingElement, AddToCartElement, CustomHtmlElement, SingleStarRatingElement, ProductListOptions, CategoryFilterOptions, ProductRecommendationOptions, RecommendationABTestingOptions, SearchBoxOptions, SearchContainerOptions, SearchContainerConfigOptions, SearchResultBadgeElement, BadgeGenerateSeed, BadgeGenerateOptions, BadgeOptions, RoutingBehavior, SearchResultsOptions, FacetStyle, SearchResultEventCallbacks, CallbackContext, FacetFilterQuery, SearchResultsFilterOptions, ResultFacetOptions, DynamicData, AnchorPosition, SortOptions, SearchResultsSortOptions } from '@getlupa/vue';
+import { DocumentElementType, SearchBoxPanelType, BadgeType, SearchResultBadgeType } from '@getlupa/vue';
 type MountOptions = {
     fetch: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getlupa/client",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "main": "dist/lupaSearch.js",
   "module": "dist/index.mjs",
   "types": "dist/src/index.d.ts",
@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@getlupa/client-sdk": "^1.3.1",
-    "@getlupa/vue": "0.1.0",
+    "@getlupa/vue": "0.1.6",
     "@rushstack/eslint-patch": "^1.3.2",
     "@tsconfig/node18": "^2.0.1",
     "@types/jsdom": "^21.1.1",