@tekkare/auriga 0.2.35 → 0.2.37

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.35"
+  "version": "0.2.37"
 }

package/dist/runtime/components/argAdvancedSearchBar.vue

@@ -24,7 +24,7 @@
           </p>
         </div>
         <input
-          id="search_input"
+          id="search_input_advanced"
           v-model="value"
           class="filters_input_style"
           :placeholder="placeHolderValue"
@@ -228,6 +228,7 @@
 <script>
 import {
   onMounted,
+  onUnmounted,
   ref,
   computed,
   watch,
@@ -338,9 +339,6 @@ export default defineComponent({
       es: "cargando m\xE1s sugerencias"
     };
     watch(value, (new_value) => {
-      setTimeout(() => {
-        emit("onTyping", value.value);
-      }, 1e3);
       typing.value = false;
       if (new_value === "") {
         hoverShortcut.value = "";
@@ -360,6 +358,16 @@ export default defineComponent({
       }
       optionIndex.value = 1;
     });
+    function debounce(func, delay) {
+      let debounceTimer;
+      return function(...args) {
+        clearTimeout(debounceTimer);
+        debounceTimer = window.setTimeout(() => func.apply(this, args), delay);
+      };
+    }
+    function handleInput() {
+      emit("onTyping", value.value);
+    }
     watch(
       () => typing.value,
       () => {
@@ -388,7 +396,8 @@ export default defineComponent({
       }, 100);
     });
     onMounted(() => {
-      searchBar.value = document.getElementById("search_input");
+      searchBar.value = document.getElementById("search_input_advanced");
+      searchBar.value.addEventListener("input", debounce(handleInput, 200));
       tagsSection.value = document.getElementById("tags");
       if (props.customShortcuts.length > 0) {
         for (let i = 0; i < props.customShortcuts.length; i++) {
@@ -406,6 +415,9 @@ export default defineComponent({
         searchedWords.value = props.defaultInputs;
       }
     });
+    onUnmounted(() => {
+      searchBar.value.removeEventListener("input", debounce(handleInput, 200));
+    });
     function shortcutColor(shortcut) {
       if (shortcut === selectedShortcut.value || shortcut === hoverShortcut.value) {
         return "var(--darkest)";

package/dist/runtime/components/argSearchInput.vue

@@ -13,14 +13,14 @@
           class="search-icon"
         />
         <input
-          :value="searchValue"
+          id="search_input"
+          v-model="searchValue"
           class="filters_input_style"
           :placeholder="placeHolderValue"
-          @input="changeInput"
           @keydown.enter="submitSearch"
           @keydown.down="selectOption(true)"
           @keydown.up="selectOption(false)"
-          :autocomplete="false"
+          autocomplete="off"
         />
       </div>
       <div
@@ -73,7 +73,8 @@ import {
   ref,
   computed,
   watch,
-  defineComponent
+  defineComponent,
+  onUnmounted
 } from "vue";
 export default defineComponent({
   name: "argSearchInput",
@@ -115,6 +116,7 @@ export default defineComponent({
   setup(props, { emit }) {
     const searchValue = ref("");
     const suggOpen = ref(false);
+    const searchBar = ref();
     const notFound = {
       fr: "Aucune suggestion n'a \xE9t\xE9 trouv\xE9e",
       en: "No suggestions were found",
@@ -215,19 +217,31 @@ export default defineComponent({
         suggOpen.value = true;
       }
     }
+    function debounce(func, delay) {
+      let debounceTimer;
+      return function(...args) {
+        clearTimeout(debounceTimer);
+        debounceTimer = window.setTimeout(() => func.apply(this, args), delay);
+      };
+    }
+    function handleInput(event) {
+      searchValue.value = event?.target?.value;
+      emit("update:Value", searchValue.value);
+    }
     onMounted(() => {
+      searchBar.value = document.getElementById("search_input");
+      searchBar.value.addEventListener("input", debounce(handleInput, 200));
       searchValue.value = props.defaultValue;
     });
+    onUnmounted(() => {
+      searchBar.value.removeEventListener("input", debounce(handleInput, 200));
+    });
     watch(
       () => props.defaultValue,
       (new_value) => {
         searchValue.value = new_value;
       }
     );
-    function changeInput(event) {
-      searchValue.value = event.target.value;
-      emit("update:Value", searchValue.value);
-    }
     function submitSearch() {
       if (optionIndex.value > 0) {
         closeOnEnter.value = true;
@@ -243,7 +257,6 @@ export default defineComponent({
     }
     return {
       searchValue,
-      changeInput,
       submitSearch,
       clearValue,
       suggOpen,

package/dist/runtime/components/argSearchInput.vue.d.ts

@@ -48,7 +48,6 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     searchValue: import("vue").Ref<string>;
-    changeInput: (event: any) => void;
     submitSearch: () => void;
     clearValue: () => void;
     suggOpen: import("vue").Ref<boolean>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tekkare/auriga",
-  "version": "0.2.35",
+  "version": "0.2.37",
   "description": "Aurgia is a UI kit developped by Tekkare",
   "license": "MIT",
   "type": "module",