@tekkare/auriga 0.2.34 → 0.2.36

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.34"
+  "version": "0.2.36"
 }

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,
@@ -299,9 +300,10 @@ export default defineComponent({
     const showChangeType = ref(null);
     const regexSearch = /^[\s\.\/\!]|[\/\!\s][\s\.]+|\s+[\/]|\s+$/g;
     const suggOpen = ref(false);
-    const optionIndex = ref(0);
+    const optionIndex = ref(1);
     const iconColor = computed(() => {
       if (typing.value === true) {
+        f;
         return "var(--primary)";
       } else
         return "var(--medium)";
@@ -337,14 +339,11 @@ export default defineComponent({
       es: "cargando m\xE1s sugerencias"
     };
     watch(value, (new_value) => {
-      setTimeout(() => {
-        emit("onTyping", value.value);
-      }, 500);
       typing.value = false;
       if (new_value === "") {
         hoverShortcut.value = "";
         suggOpen.value = false;
-        optionIndex.value = 0;
+        optionIndex.value = 1;
         document.removeEventListener("click", closeSugg);
       } else {
         suggOpen.value = true;
@@ -357,7 +356,18 @@ 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,
       () => {
@@ -386,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, 500));
       tagsSection.value = document.getElementById("tags");
       if (props.customShortcuts.length > 0) {
         for (let i = 0; i < props.customShortcuts.length; i++) {
@@ -404,6 +415,9 @@ export default defineComponent({
         searchedWords.value = props.defaultInputs;
       }
     });
+    onUnmounted(() => {
+      searchBar.value.removeEventListener("input", debounce(handleInput, 500));
+    });
     function shortcutColor(shortcut) {
       if (shortcut === selectedShortcut.value || shortcut === hoverShortcut.value) {
         return "var(--darkest)";
@@ -467,15 +481,34 @@ export default defineComponent({
     }));
     const filterSuggestions = computed(() => {
       if (value.value.replace(/[+/!]/g, "").length > 0) {
-        return props.suggestions.filter(
-          (f) => useFuse(
+        const filteredSuggs = props.suggestions.filter(
+          (f2) => useFuse(
             value.value.replace(/[+/!]/g, ""),
             props.suggestions.map((a) => a.text),
             options.value
-          ).results.value.map((a) => a.item).includes(f.text)
+          ).results.value.map((a) => a.item).includes(f2.text)
         ).slice(0, 50);
+        return [
+          ...[
+            {
+              text: value.value,
+              icon: "MagnifyingGlass",
+              html: `<span style="color: var(--primary)">${value.value}</span>`
+            }
+          ],
+          filteredSuggs
+        ].flat();
       } else
-        return props.suggestions.slice(0, 50);
+        return [
+          ...[
+            {
+              text: value.value,
+              icon: "MagnifyingGlass",
+              html: `<span style="color: var(--primary)">${value.value}</span>`
+            }
+          ],
+          props.suggestions.slice(0, 50)
+        ].flat();
     });
     function selectTag(index, direction) {
       let nextTag;
@@ -534,7 +567,7 @@ export default defineComponent({
         if (optionIndex.value > 0) {
           value.value = filterSuggestions.value[optionIndex.value - 1].text;
           if (searchedWords.value.filter(
-            (f) => f.value === filterSuggestions.value[optionIndex.value - 1].text
+            (f2) => f2.value === filterSuggestions.value[optionIndex.value - 1].text
           ).length > 0) {
             setTimeout(() => {
               suggOpen.value = false;
@@ -566,7 +599,7 @@ export default defineComponent({
           }
         }
         if (searchValue.length > 0 && arrayValues.length === 0) {
-          if (searchedWords.value.filter((f) => f.value === searchValue).length === 0) {
+          if (searchedWords.value.filter((f2) => f2.value === searchValue).length === 0) {
             addToSearch(search, searchValue, false);
           } else {
             handleDuplicate(searchValue);
@@ -577,7 +610,7 @@ export default defineComponent({
             const arraySearchValue = arrayValues[i].replace(regexSearch, "");
             if (arraySearchValue.length > 0) {
               if (searchedWords.value.filter(
-                (f) => f.value === arraySearchValue
+                (f2) => f2.value === arraySearchValue
               ).length === 0) {
                 addToSearch(search, arraySearchValue, false);
               } else {
@@ -616,7 +649,7 @@ export default defineComponent({
       const searchValue = value.value.replace(regexSearch, "");
       selectedShortcut.value = item.symbol;
       if (searchValue.length > 0) {
-        if (searchedWords.value.filter((f) => f.value === searchValue).length === 0) {
+        if (searchedWords.value.filter((f2) => f2.value === searchValue).length === 0) {
           addToSearch(getKeyword(item.symbol), searchValue, false);
         } else {
           handleDuplicate(searchValue);

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

@@ -139,7 +139,11 @@ declare const _default: import("vue").DefineComponent<{
     hasShortcut: import("vue").ComputedRef<boolean>;
     infoHeight: import("vue").ComputedRef<boolean>;
     suggOpen: import("vue").Ref<boolean>;
-    filterSuggestions: import("vue").ComputedRef<Suggestion[]>;
+    filterSuggestions: import("vue").ComputedRef<(Suggestion | {
+        text: string;
+        icon: string;
+        html: string;
+    })[]>;
     selectOption: (isDown: boolean) => void;
     optionIndex: import("vue").Ref<number>;
     selectSugg: (sugg: Suggestion) => void;

package/dist/runtime/components/argLoader.vue

@@ -0,0 +1,18 @@
+<template>
+  <span class="custom-loader" />
+</template>
+
+<script>
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "ArgLoader",
+  props: {},
+  setup() {
+    return {};
+  }
+});
+</script>
+
+<style scope>
+.custom-loader{animation:rotation 1s linear infinite;border:3px solid #5dc8ff;display:inline-block;height:48px;position:relative;width:48px}.custom-loader,.custom-loader:after{border-radius:50%;box-sizing:border-box}.custom-loader:after{border:3px solid transparent;border-bottom-color:#ffaeff;content:"";height:56px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:56px}@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
+</style>

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

@@ -0,0 +1,8 @@
+declare const _default: import("vue").DefineComponent<Readonly<import("vue").ComponentPropsOptions<{
+    [x: string]: unknown;
+}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, readonly string[] | Readonly<import("vue").ExtractPropTypes<Readonly<import("vue").ComponentObjectPropsOptions<{
+    [x: string]: unknown;
+}>>>>, {
+    readonly [x: number]: string;
+} | {}, {}>;
+export default _default;

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",
@@ -126,7 +128,7 @@ export default defineComponent({
       es: "cargando m\xE1s sugerencias"
     };
     const closeOnEnter = ref(false);
-    const optionIndex = ref(0);
+    const optionIndex = ref(1);
     function selectOption(isDown) {
       if (isDown) {
         optionIndex.value = optionIndex.value === filterSuggestions.value.length ? filterSuggestions.value.length : optionIndex.value + 1;
@@ -165,13 +167,14 @@ export default defineComponent({
           suggOpen.value = false;
           document.removeEventListener("click", closeSugg);
         }
+        optionIndex.value = 1;
       }
     );
     watch(
       () => suggOpen.value,
       () => {
         if (!suggOpen.value) {
-          optionIndex.value = 0;
+          optionIndex.value = 1;
         }
       }
     );
@@ -182,13 +185,23 @@ export default defineComponent({
       }
     }));
     const filterSuggestions = computed(() => {
-      return props.suggestions.filter(
+      const filteredSuggs = props.suggestions.filter(
         (f) => useFuse(
-          searchValue,
+          searchValue.value.replace(/[+/!]/g, ""),
           props.suggestions.map((a) => a.text),
           options.value
         ).results.value.map((a) => a.item).includes(f.text)
       ).slice(0, 50);
+      return [
+        ...[
+          {
+            text: searchValue.value,
+            icon: "MagnifyingGlass",
+            html: `<span style="color: var(--primary)">${searchValue.value}</span>`
+          }
+        ],
+        filteredSuggs
+      ].flat();
     });
     const selectSugg = (sugg) => {
       closeOnEnter.value = true;
@@ -204,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, 500));
       searchValue.value = props.defaultValue;
     });
+    onUnmounted(() => {
+      searchBar.value.removeEventListener("input", debounce(handleInput, 500));
+    });
     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;
@@ -232,7 +257,6 @@ export default defineComponent({
     }
     return {
       searchValue,
-      changeInput,
       submitSearch,
       clearValue,
       suggOpen,

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

@@ -48,12 +48,15 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, {
     searchValue: import("vue").Ref<string>;
-    changeInput: (event: any) => void;
     submitSearch: () => void;
     clearValue: () => void;
     suggOpen: import("vue").Ref<boolean>;
     openSugg: () => void;
-    filterSuggestions: import("vue").ComputedRef<Suggestion[]>;
+    filterSuggestions: import("vue").ComputedRef<(Suggestion | {
+        text: string;
+        icon: string;
+        html: string;
+    })[]>;
     selectSugg: (sugg: Suggestion) => void;
     selectOption: (isDown: boolean) => void;
     optionIndex: import("vue").Ref<number>;

package/package.json

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