@getlupa/vue 0.17.1 → 0.17.3

package/dist/lupaSearch.js

@@ -20007,6 +20007,9 @@ const _sfc_main$15 = /* @__PURE__ */ vue.defineComponent({
       }
       emit("product-click");
       handleRoutingEvent(link, event, boxRoutingBehavior.value === "event");
+      if (props.panelOptions.programmaticNavigation) {
+        window.location.assign(link);
+      }
     };
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$Z, [
@@ -20627,6 +20630,7 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
     const suggestedValue = vue.ref(defaultSuggestedValue);
     const opened = vue.ref(props.isSearchContainer);
     const focused = vue.ref(false);
+    const openedAt = vue.ref(null);
     const searchBoxInput = vue.ref(null);
     const { highlightedDocument } = storeToRefs(searchBoxStore);
     const searchValue = vue.computed(() => {
@@ -20663,7 +20667,7 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
     });
     const goToResultsDebounced = debounce$1(paramsStore.goToResults, (_a = props.options.debounce) != null ? _a : 300);
     vue.onMounted(() => {
-      var _a2;
+      var _a2, _b, _c;
       window.addEventListener("keydown", handleKeyDown);
       window.addEventListener("click", handleMouseClick);
       paramsStore.setSearchResultsLink(props.options.links.searchResults);
@@ -20674,6 +20678,9 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
       if (props.isSearchContainer && searchBoxInput.value) {
         (_a2 = searchBoxInput.value) == null ? void 0 : _a2.focus();
       }
+      if ((_b = props.options.callbacks) == null ? void 0 : _b.onMounted) {
+        (_c = props.options.callbacks) == null ? void 0 : _c.onMounted();
+      }
     });
     vue.onBeforeUnmount(() => {
       window.removeEventListener("keydown", handleKeyDown);
@@ -20681,11 +20688,14 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
       unbindSearchTriggers(searchTriggers.value, handleCurrentValueSearch);
     });
     const handleMouseClick = (e2) => {
-      var _a2, _b;
+      var _a2, _b, _c, _d;
       const el = document.getElementById("lupa-search-box");
       const elementClass = (_b = (_a2 = e2.target) == null ? void 0 : _a2.className) != null ? _b : "";
       const hasLupaClass = typeof elementClass.includes == "function" && elementClass.includes("lupa-search-box");
       const isOutsideElement = el && !el.contains(e2.target) && !hasLupaClass;
+      if (openedAt.value && Date.now() - (openedAt == null ? void 0 : openedAt.value) < 500) {
+        return;
+      }
       if (isOutsideElement && props.options.keepOpen) {
         focused.value = false;
       }
@@ -20694,11 +20704,18 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
       }
       opened.value = false;
       suggestedValue.value = defaultSuggestedValue;
+      if ((_c = props.options.callbacks) == null ? void 0 : _c.onClosed) {
+        (_d = props.options.callbacks) == null ? void 0 : _d.onClosed();
+      }
     };
     const close = () => {
+      var _a2, _b;
       opened.value = false;
       focused.value = false;
       suggestedValue.value = defaultSuggestedValue;
+      if ((_a2 = props.options.callbacks) == null ? void 0 : _a2.onClosed) {
+        (_b = props.options.callbacks) == null ? void 0 : _b.onClosed();
+      }
     };
     const handleKeyDown = (e2) => {
       var _a2, _b;
@@ -20717,15 +20734,22 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
           handleSearch();
           resetValues();
           break;
+        case "Escape":
+          opened.value = false;
+          focused.value = false;
+          break;
       }
     };
     const handleInput = (value) => {
-      var _a2;
+      var _a2, _b;
       opened.value = true;
       focused.value = true;
       inputValue.value = (_a2 = value == null ? void 0 : value.replace(/\s+$/, "")) != null ? _a2 : "";
       suggestedValue.value = defaultSuggestedValue;
       searchBoxStore.resetHighlightIndex();
+      if ((_b = props.options.callbacks) == null ? void 0 : _b.onSearchBoxInput) {
+        props.options.callbacks.onSearchBoxInput(value);
+      }
       trackSearchQuery(value);
       if (props.isSearchContainer) {
         goToResultsDebounced({
@@ -20858,6 +20882,13 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
       });
     };
     vue.watch(() => props.options.debounce, handleCurrentValueSearch);
+    vue.watch(opened, () => {
+      if (opened.value) {
+        openedAt.value = Date.now();
+      } else {
+        openedAt.value = null;
+      }
+    });
     const resetValues = () => {
       inputValue.value = "";
       suggestedValue.value = defaultSuggestedValue;
@@ -20869,6 +20900,20 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
     const slotProps = (props2) => {
       return __spreadValues({}, props2);
     };
+    const onFocus = () => {
+      var _a2, _b;
+      opened.value = true;
+      if ((_a2 = props.options.callbacks) == null ? void 0 : _a2.onFocused) {
+        (_b = props.options.callbacks) == null ? void 0 : _b.onFocused();
+      }
+    };
+    const onBlur = () => {
+      var _a2, _b;
+      focused.value = false;
+      if ((_a2 = props.options.callbacks) == null ? void 0 : _a2.onBlurred) {
+        (_b = props.options.callbacks) == null ? void 0 : _b.onBlurred();
+      }
+    };
     return (_ctx, _cache) => {
       var _a2;
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$W, [
@@ -20881,10 +20926,10 @@ const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
             ref_key: "searchBoxInput",
             ref: searchBoxInput,
             onInput: handleInput,
-            onBlur: _cache[0] || (_cache[0] = ($event) => focused.value = false),
-            onFocus: _cache[1] || (_cache[1] = ($event) => opened.value = true),
+            onBlur,
+            onFocus,
             onSearch: handleSearch,
-            onClose: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("close"))
+            onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
           }, null, 8, ["options", "suggestedValue", "can-close", "emit-input-on-focus"]),
           opened.value || _ctx.isSearchContainer ? (vue.openBlock(), vue.createBlock(_sfc_main$11, {
             key: 0,

package/dist/lupaSearch.mjs

@@ -20005,6 +20005,9 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
       }
       emit("product-click");
       handleRoutingEvent(link, event, boxRoutingBehavior.value === "event");
+      if (props.panelOptions.programmaticNavigation) {
+        window.location.assign(link);
+      }
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$Z, [
@@ -20625,6 +20628,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     const suggestedValue = ref(defaultSuggestedValue);
     const opened = ref(props.isSearchContainer);
     const focused = ref(false);
+    const openedAt = ref(null);
     const searchBoxInput = ref(null);
     const { highlightedDocument } = storeToRefs(searchBoxStore);
     const searchValue = computed(() => {
@@ -20661,7 +20665,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     });
     const goToResultsDebounced = debounce$1(paramsStore.goToResults, (_a = props.options.debounce) != null ? _a : 300);
     onMounted(() => {
-      var _a2;
+      var _a2, _b, _c;
       window.addEventListener("keydown", handleKeyDown);
       window.addEventListener("click", handleMouseClick);
       paramsStore.setSearchResultsLink(props.options.links.searchResults);
@@ -20672,6 +20676,9 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
       if (props.isSearchContainer && searchBoxInput.value) {
         (_a2 = searchBoxInput.value) == null ? void 0 : _a2.focus();
       }
+      if ((_b = props.options.callbacks) == null ? void 0 : _b.onMounted) {
+        (_c = props.options.callbacks) == null ? void 0 : _c.onMounted();
+      }
     });
     onBeforeUnmount(() => {
       window.removeEventListener("keydown", handleKeyDown);
@@ -20679,11 +20686,14 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
       unbindSearchTriggers(searchTriggers.value, handleCurrentValueSearch);
     });
     const handleMouseClick = (e2) => {
-      var _a2, _b;
+      var _a2, _b, _c, _d;
       const el = document.getElementById("lupa-search-box");
       const elementClass = (_b = (_a2 = e2.target) == null ? void 0 : _a2.className) != null ? _b : "";
       const hasLupaClass = typeof elementClass.includes == "function" && elementClass.includes("lupa-search-box");
       const isOutsideElement = el && !el.contains(e2.target) && !hasLupaClass;
+      if (openedAt.value && Date.now() - (openedAt == null ? void 0 : openedAt.value) < 500) {
+        return;
+      }
       if (isOutsideElement && props.options.keepOpen) {
         focused.value = false;
       }
@@ -20692,11 +20702,18 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
       }
       opened.value = false;
       suggestedValue.value = defaultSuggestedValue;
+      if ((_c = props.options.callbacks) == null ? void 0 : _c.onClosed) {
+        (_d = props.options.callbacks) == null ? void 0 : _d.onClosed();
+      }
     };
     const close = () => {
+      var _a2, _b;
       opened.value = false;
       focused.value = false;
       suggestedValue.value = defaultSuggestedValue;
+      if ((_a2 = props.options.callbacks) == null ? void 0 : _a2.onClosed) {
+        (_b = props.options.callbacks) == null ? void 0 : _b.onClosed();
+      }
     };
     const handleKeyDown = (e2) => {
       var _a2, _b;
@@ -20715,15 +20732,22 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
           handleSearch();
           resetValues();
           break;
+        case "Escape":
+          opened.value = false;
+          focused.value = false;
+          break;
       }
     };
     const handleInput = (value) => {
-      var _a2;
+      var _a2, _b;
       opened.value = true;
       focused.value = true;
       inputValue.value = (_a2 = value == null ? void 0 : value.replace(/\s+$/, "")) != null ? _a2 : "";
       suggestedValue.value = defaultSuggestedValue;
       searchBoxStore.resetHighlightIndex();
+      if ((_b = props.options.callbacks) == null ? void 0 : _b.onSearchBoxInput) {
+        props.options.callbacks.onSearchBoxInput(value);
+      }
       trackSearchQuery(value);
       if (props.isSearchContainer) {
         goToResultsDebounced({
@@ -20856,6 +20880,13 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
       });
     };
     watch(() => props.options.debounce, handleCurrentValueSearch);
+    watch(opened, () => {
+      if (opened.value) {
+        openedAt.value = Date.now();
+      } else {
+        openedAt.value = null;
+      }
+    });
     const resetValues = () => {
       inputValue.value = "";
       suggestedValue.value = defaultSuggestedValue;
@@ -20867,6 +20898,20 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
     const slotProps = (props2) => {
       return __spreadValues({}, props2);
     };
+    const onFocus = () => {
+      var _a2, _b;
+      opened.value = true;
+      if ((_a2 = props.options.callbacks) == null ? void 0 : _a2.onFocused) {
+        (_b = props.options.callbacks) == null ? void 0 : _b.onFocused();
+      }
+    };
+    const onBlur = () => {
+      var _a2, _b;
+      focused.value = false;
+      if ((_a2 = props.options.callbacks) == null ? void 0 : _a2.onBlurred) {
+        (_b = props.options.callbacks) == null ? void 0 : _b.onBlurred();
+      }
+    };
     return (_ctx, _cache) => {
       var _a2;
       return openBlock(), createElementBlock("div", _hoisted_1$W, [
@@ -20879,10 +20924,10 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
             ref_key: "searchBoxInput",
             ref: searchBoxInput,
             onInput: handleInput,
-            onBlur: _cache[0] || (_cache[0] = ($event) => focused.value = false),
-            onFocus: _cache[1] || (_cache[1] = ($event) => opened.value = true),
+            onBlur,
+            onFocus,
             onSearch: handleSearch,
-            onClose: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("close"))
+            onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
           }, null, 8, ["options", "suggestedValue", "can-close", "emit-input-on-focus"]),
           opened.value || _ctx.isSearchContainer ? (openBlock(), createBlock(_sfc_main$11, {
             key: 0,

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

@@ -57,6 +57,11 @@ export type SearchBoxResultsNavigateContext = {
     };
 };
 export type SearchBoxEventCallbacks = {
+    onMounted: () => unknown;
+    onFocused: () => unknown;
+    onBlurred: () => unknown;
+    onClosed: () => unknown;
+    onSearchBoxInput?: (input: string) => unknown;
     onSearchBoxResults?: (context: SearchBoxResultCallbackContext) => unknown;
     onSearchResultsNavigate?: (context: SearchBoxResultsNavigateContext) => unknown;
 };

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

@@ -38,6 +38,7 @@ export type DocumentSearchBoxPanel = SearchBoxPanelBase & {
     badges?: SearchBoxBadgeOptions;
     showGoToResults?: boolean;
     isInStock?: DisplayCondition | ((doc: Document) => boolean);
+    programmaticNavigation?: boolean;
     customDocumentHtmlAttributes?: CustomDocumentHtmlAttributes;
 };
 export type RelatedSourcePanel = Omit<DocumentSearchBoxPanel, 'type'> & {

package/package.json

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