@tekkare/auriga 0.2.5 → 0.2.7

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.5"
+  "version": "0.2.7"
 }

package/dist/runtime/components/argAdvancedSearchBar.vue

@@ -76,7 +76,7 @@
               color="var(--medium)"
             />
             <span v-if="!highlightInput"> {{ sugg.text }} </span>
-            <span v-else v-html="highlightSearchInput(sugg.text)" />
+            <span v-else v-html="sugg.text" />
           </p>
         </div>
         <div v-else-if="!loadingSuggs" class="sugg_container">
@@ -297,7 +297,7 @@ export default defineComponent({
     const hoverTag = ref();
     const showInfo = ref(false);
     const showChangeType = ref(null);
-    const regexSearch = /^[\s\.\+\/\!]|[\+\/\!\s][\s\.]+|[\s\.]+[\+\/\!\s]$|\s+[\+\/]|\s+$/g;
+    const regexSearch = /^[\s\.\/\!]|[\/\!\s][\s\.]+|\s+[\/]|\s+$/g;
     const suggOpen = ref(false);
     const optionIndex = ref(0);
     const iconColor = computed(() => {
@@ -401,632 +401,6 @@ export default defineComponent({
         searchedWords.value = props.defaultInputs;
       }
     });
-    function highlightSearchInput(suggestion) {
-      const escapedInput = value.value.replace(
-        /[-\/\\^$*+?.()|[\]{}]/g,
-        "\\<script lang="ts">
-import {
-  onMounted,
-  onUpdated,
-  ref,
-  computed,
-  defineProps,
-  defineEmits,
-  watch,
-  defineComponent,
-} from "vue";
-import argIcon from "./argIcon.vue";
-import { useFuse } from "@vueuse/integrations/useFuse";
-interface Suggestion {
-  icon?: string;
-  text: string;
-}
-
-export default defineComponent({
-  name: "argAdvancedSearchBar",
-  components: { argIcon },
-  props: {
-    placeHolderValue: {
-      type: String,
-      default: "Type your search",
-    },
-    customShortcuts: {
-      type: Array<{ keyword: ""; value: ""; symbol: "" }>,
-      default: () => [],
-    },
-    defaultInputs: {
-      type: Array<{ type: ""; value: "" }>,
-      default: () => [],
-    },
-    suggestions: {
-      type: Array<Suggestion>,
-      default: null,
-    },
-    fuzzyThreshold: {
-      type: Number,
-      default: 0.5,
-    },
-    lang: {
-      type: String,
-      default: "en",
-      validator: (value: string) => {
-        return ["en", "fr", "es"].includes(value);
-      },
-    },
-    loadingSuggs: {
-      type: Boolean,
-      default: false,
-    },
-    highlightInput: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["update:Value", "onClose"],
-  setup(props, { emit }) {
-    const typing = ref(false);
-    const shortcuts = ref([
-      { keyword: "and", value: "add the word", symbol: "+" },
-      { keyword: "or", value: "matches at least one word", symbol: "/" },
-      { keyword: "not", value: "exclude the word", symbol: "!" },
-    ]);
-    const hoverShortcut = ref("" as string);
-    const selectedShortcut = ref("+" as string);
-    const searchedWords = ref([] as any);
-    const closeIndex = ref();
-    const value = ref("" as string);
-    const selectedTag = ref();
-    const duplicate = ref([]);
-    const searchBar = ref();
-    const tagsSection = ref();
-    const shortcutIndex = ref(-1);
-    const removeSelected = ref(false as boolean);
-    const hoverTag = ref();
-    const showInfo = ref(false as boolean);
-    const showChangeType = ref(null as any);
-    const regexSearch =
-      /^[\s\.\+\/\!]|[\+\/\!\s][\s\.]+|[\s\.]+[\+\/\!\s]$|\s+[\+\/]|\s+$/g;
-    // regex to check whitespaces / symbols in input value to avoid duplicate search
-    // each alternative is seperated by |
-    // 1st alternative: the word begins with a space or a symbol
-    // 2nd alternative: the word begins with a combination of one or more spaces and symbols
-    // 3rd alternative: the word ends with one or more spaces or symbols
-    // 4th alternative: the word contains one or more spaces followed by symbols
-    // 5th alternative: the word ends with one or more spaces
-
-    const suggOpen = ref(false);
-    const optionIndex = ref(0);
-
-    const iconColor = computed(() => {
-      if (typing.value === true) {
-        return "var(--primary)";
-      } else return "var(--medium)";
-    });
-
-    const hasShortcut = computed(() => {
-      if (selectedShortcut.value.length > 0 || hoverShortcut.value.length > 0) {
-        return true;
-      } else return false;
-    });
-
-    const infoHeight = computed(() => {
-      if (showInfo.value === true) {
-        const infoSection = document.getElementById("info");
-        const shortcutSection = document.getElementById("shortcuts");
-        if (infoSection !== null && shortcutSection !== null) {
-          if (infoSection.offsetHeight > shortcutSection.offsetHeight) {
-            return true;
-          } else return false;
-        } else return false;
-      } else return false;
-    });
-
-    const notFound = {
-      fr: "Aucune suggestion n'a été trouvée",
-      en: "No suggestions were found",
-      es: "No se encontraron sugerencias",
-    };
-    const loaderText = {
-      fr: "Plus de suggestions en chargement",
-      en: "Loading more suggestions",
-      es: "cargando más sugerencias",
-    };
-
-    watch(value, (new_value: string) => {
-      typing.value = false;
-      if (new_value === "") {
-        hoverShortcut.value = "";
-        suggOpen.value = false;
-        optionIndex.value = 0;
-        document.removeEventListener("click", closeSugg);
-      } else {
-        suggOpen.value = true;
-        setTimeout(() => {
-          document.addEventListener("click", closeSugg);
-        }, 100);
-        for (let i = 0; i < shortcuts.value.length; i++) {
-          if (new_value.startsWith(shortcuts.value[i].symbol)) {
-            selectedShortcut.value = shortcuts.value[i].symbol;
-          }
-        }
-      }
-    });
-
-    watch(
-      () => typing.value,
-      () => {
-        if (!typing.value) {
-          document.removeEventListener("click", close);
-        } else
-          setTimeout(() => {
-            document.addEventListener("click", close);
-          }, 100);
-      }
-    );
-
-    // watch(selectedShortcut, (new_shortcut: string) => {
-    //   value.value = `${new_shortcut}`;
-    // });
-
-    watch(closeIndex, (new_index: number) => {
-      if (new_index > searchedWords.value.length) {
-        removeSelected.value = true;
-      } else removeSelected.value = false;
-    });
-
-    const wordsLength = computed(() => {
-      return searchedWords.value.length;
-    });
-
-    watch(wordsLength, (newSearched: []) => {
-      setTimeout(() => {
-        if (tagsSection.value.scrollWidth > 4) {
-          tagsSection.value.scrollLeft += tagsSection.value.scrollWidth;
-        }
-      }, 100);
-    });
-
-    onMounted(() => {
-      searchBar.value = document.getElementById("search_input");
-      tagsSection.value = document.getElementById("tags");
-      if (props.customShortcuts.length > 0) {
-        for (let i = 0; i < props.customShortcuts.length; i++) {
-          shortcuts.value.push(props.customShortcuts[i]);
-        }
-      }
-      if (props.defaultInputs.length > 0) {
-        for (let i = 0; i < props.defaultInputs.length; i++) {
-          addToSearch(
-            props.defaultInputs[i].type,
-            props.defaultInputs[i].value,
-            true
-          );
-        }
-        searchedWords.value = props.defaultInputs;
-      }
-    });
-    function highlightSearchInput(suggestion: string): string {
-      // Échappe les caractères spéciaux pour une utilisation dans une expression régulière
-      const escapedInput = value.value.replace(
-        /[-\/\\^$*+?.()|[\]{}]/g,
-        "\\$&"
-      );
-      // Crée une nouvelle RegExp avec la valeur de recherche, en ignorant la casse
-      const regex = new RegExp(escapedInput);
-      // Remplace la partie correspondante par un span avec du style
-      return suggestion.replace(
-        regex,
-        (match) =>
-          `<span style="color: var(--primary); font-weight: 700">${match}</span>`
-      );
-    }
-
-    function shortcutColor(shortcut: string) {
-      if (
-        shortcut === selectedShortcut.value ||
-        shortcut === hoverShortcut.value
-      ) {
-        return "var(--darkest)";
-      } else return "var(--white)";
-    }
-
-    function handleChangeType(searchIndex: number) {
-      showChangeType.value = searchIndex;
-      setTimeout(() => {
-        document.addEventListener("click", close);
-      }, 200);
-    }
-
-    function changeSearchType(searchIndex: number, option: string) {
-      searchedWords.value[searchIndex].type = option;
-      emit("update:Value", searchedWords.value);
-      showChangeType.value = null;
-    }
-
-    function shortcutSelect(dir: string) {
-      typing.value = true;
-      let index;
-      if (selectedShortcut.value.length > 0) {
-        index = shortcuts.value.findIndex(
-          (x) => x.symbol === selectedShortcut.value
-        );
-      } else {
-        index = shortcutIndex.value;
-      }
-      if (dir === "desc") {
-        if (index < shortcuts.value.length - 1) {
-          selectedShortcut.value = shortcuts.value[index + 1].symbol;
-          shortcutIndex.value += 1;
-        } else {
-          selectedShortcut.value = shortcuts.value[0].symbol;
-          shortcutIndex.value = 0;
-        }
-      } else {
-        if (index > 0) {
-          selectedShortcut.value = shortcuts.value[index - 1].symbol;
-          shortcutIndex.value -= 1;
-        } else {
-          selectedShortcut.value =
-            shortcuts.value[shortcuts.value.length - 1].symbol;
-          shortcutIndex.value = shortcuts.value.length - 1;
-        }
-      }
-      // searchBar.value.focus();
-    }
-
-    function addToSearch(
-      search: string,
-      textValue: string,
-      isDefault: boolean
-    ) {
-      searchedWords.value.push({ type: search, value: textValue });
-      closeIndex.value = searchedWords.value.length;
-      selectedTag.value = null;
-      if (!isDefault) {
-        emit("update:Value", searchedWords.value);
-      }
-      searchBar.value.focus();
-      resetSearch();
-    }
-    const options = computed(() => ({
-      fuseOptions: {
-        includeScore: true,
-        threshold: 0.5,
-      },
-    }));
-    const filterSuggestions = computed(() => {
-      if (value.value.replace(/[+/!]/g, "").length > 0) {
-        return props.suggestions
-          .filter((f) =>
-            useFuse(
-              value.value.replace(/[+/!]/g, ""),
-              props.suggestions.map((a) => a.text),
-              options.value
-            )
-              .results.value.map((a) => a.item)
-              .includes(f.text)
-          )
-          .slice(0, 50);
-      } else return props.suggestions.slice(0, 50);
-    });
-
-    function selectTag(index: number, direction: number) {
-      let nextTag;
-      if (direction === 0) {
-        nextTag = document.getElementById(`tag${index + 1}`);
-      } else {
-        nextTag = document.getElementById(`tag${index + 1}`);
-      }
-      if (direction === 1 && index === 0 && tagsSection.value.scrollLeft > 0) {
-        tagsSection.value.scrollLeft = 0;
-      }
-      if (direction === 0 && index === searchedWords.value.length - 1) {
-        tagsSection.value.scrollLeft += tagsSection.value.scrollWidth;
-      }
-
-      if (
-        searchedWords.value.length > 0 &&
-        index < searchedWords.value.length &&
-        index >= 0
-      ) {
-        selectedTag.value = index;
-        closeIndex.value = index;
-        if (direction > 0 && index > 2 && nextTag !== null) {
-          tagsSection.value.scrollLeft += nextTag.offsetWidth;
-        } else if (
-          direction === 0 &&
-          index < searchedWords.value.length - 2 &&
-          nextTag !== null
-        ) {
-          tagsSection.value.scrollLeft -= nextTag.offsetWidth;
-        }
-      }
-      if (index < 0) {
-        selectedTag.value = null;
-        closeIndex.value = searchedWords.value.length + 1;
-      }
-      if (index >= searchedWords.value.length) {
-        selectedTag.value = null;
-        closeIndex.value = index;
-      }
-      if (index > searchedWords.value.length + 1) {
-        selectedTag.value = null;
-        closeIndex.value = -1;
-      }
-    }
-
-    function resetSearch() {
-      value.value = "";
-    }
-
-    function getKeyword(keyword: string) {
-      let returnKeyword = "";
-      for (let i = 0; i < shortcuts.value.length; i++) {
-        if (keyword === shortcuts.value[i].symbol) {
-          returnKeyword = shortcuts.value[i].keyword;
-        }
-      }
-      return returnKeyword;
-    }
-
-    function addTag() {
-      suggOpen.value = false;
-      if (removeSelected.value === true) {
-        emptySearch();
-      } else if (
-        selectedTag.value !== null &&
-        selectedTag.value < searchedWords.value.length &&
-        selectedTag.value >= 0
-      ) {
-        removeTag(selectedTag.value);
-      } else {
-        if (optionIndex.value > 0) {
-          value.value = filterSuggestions.value[optionIndex.value - 1].text;
-          if (
-            searchedWords.value.filter(
-              (f: any) =>
-                f.value === filterSuggestions.value[optionIndex.value - 1].text
-            ).length > 0
-          ) {
-            setTimeout(() => {
-              suggOpen.value = false;
-              value.value = "";
-            });
-          }
-          // closeOnEnter.value = true;
-        }
-        let search: any;
-        let searchValue = "";
-        let arrayValues: any[];
-        arrayValues = [];
-        if (value.value.length > 0) {
-          searchValue = value.value.replace(regexSearch, "");
-          for (let i = 0; i < shortcuts.value.length; i++) {
-            if (value.value.startsWith(shortcuts.value[i].symbol)) {
-              search = shortcuts.value[i].keyword;
-              searchValue = value.value.replace(shortcuts.value[i].symbol, "");
-            }
-          }
-          if (selectedShortcut.value.length > 0 && search === undefined) {
-            search = getKeyword(selectedShortcut.value);
-          } else if (hoverShortcut.value.length > 0 && search === undefined) {
-            search = getKeyword(hoverShortcut.value);
-          } else if (search === undefined) {
-            search = "and";
-          }
-          if (value.value.includes(",")) {
-            arrayValues = value.value.split(",");
-          }
-        }
-        if (searchValue.length > 0 && arrayValues.length === 0) {
-          if (
-            searchedWords.value.filter((f: any) => f.value === searchValue)
-              .length === 0
-          ) {
-            addToSearch(search, searchValue, false);
-          } else {
-            handleDuplicate(searchValue);
-            value.value = "";
-          }
-        } else if (arrayValues.length > 0) {
-          for (let i = 0; i < arrayValues.length; i++) {
-            const arraySearchValue = arrayValues[i].replace(regexSearch, "");
-            if (arraySearchValue.length > 0) {
-              if (
-                searchedWords.value.filter(
-                  (f: any) => f.value === arraySearchValue
-                ).length === 0
-              ) {
-                addToSearch(search, arraySearchValue, false);
-              } else {
-                handleDuplicate(arraySearchValue);
-                value.value = "";
-              }
-            }
-          }
-        }
-      }
-    }
-
-    function handleDuplicate(tag: any) {
-      duplicate.value.push(tag);
-      setTimeout(() => (duplicate.value = []), 1000);
-    }
-
-    function emptySearch() {
-      searchedWords.value = [];
-      removeSelected.value = false;
-      closeIndex.value = null;
-      value.value = "";
-      searchBar.value.focus();
-      emit("update:Value", searchedWords.value);
-    }
-    function selectSugg(sugg: Suggestion) {
-      // closeOnEnter.value = true;
-      if (
-        searchedWords.value.find(
-          (a: { type: string; value: string }) => a.value === sugg.text
-        ) === undefined
-      ) {
-        value.value = sugg.text;
-        addTag();
-      } else {
-        suggOpen.value = false;
-        handleDuplicate(sugg.text);
-      }
-    }
-
-    function selectSearch(item: any) {
-      const searchValue = value.value.replace(regexSearch, "");
-      selectedShortcut.value = item.symbol;
-      if (searchValue.length > 0) {
-        if (
-          searchedWords.value.filter((f: any) => f.value === searchValue)
-            .length === 0
-        ) {
-          addToSearch(getKeyword(item.symbol), searchValue, false);
-        } else {
-          handleDuplicate(searchValue);
-          value.value = "";
-        }
-      }
-      searchBar.value.focus();
-      typing.value = false;
-    }
-
-    function removeTag(tagIndex: any) {
-      searchedWords.value.splice(tagIndex, 1);
-      emit("update:Value", searchedWords.value);
-      if (tagIndex > 0 && value.value.length === 0) {
-        selectedTag.value -= 1;
-      } else {
-        selectedTag.value = searchedWords.value.length;
-      }
-
-      closeIndex.value = selectedTag.value;
-      searchBar.value.focus();
-    }
-
-    function handleDelete() {
-      if (value.value.length === 0) {
-        removeTag(searchedWords.value.length - 1);
-      }
-    }
-
-    function changeDisplay() {
-      if (typing.value === true) {
-        close();
-      } else {
-        typing.value = true;
-        setTimeout(() => {
-          document.addEventListener("click", close);
-        }, 100);
-      }
-      searchBar.value.focus();
-    }
-    function selectOption(isDown: boolean) {
-      if (isDown) {
-        optionIndex.value =
-          optionIndex.value === filterSuggestions.value.length
-            ? filterSuggestions.value.length
-            : optionIndex.value + 1;
-      } else {
-        optionIndex.value =
-          optionIndex.value === 0
-            ? filterSuggestions.value.length
-            : optionIndex.value - 1;
-      }
-      const suggContainer = document.querySelector(".search_suggestions");
-      const selectedOption =
-        suggContainer?.querySelectorAll("p")[optionIndex.value - 1];
-
-      if (selectedOption) {
-        const containerHeight = suggContainer?.clientHeight;
-        const containerScrollTop = suggContainer?.scrollTop;
-        const optionTop = selectedOption?.offsetTop;
-        const optionHeight = selectedOption?.offsetHeight * 2;
-
-        if (optionTop < containerScrollTop) {
-          // Scroll up to the selected option
-          suggContainer.scrollTop = optionTop;
-        } else if (
-          optionTop + optionHeight >
-          containerHeight + containerScrollTop
-        ) {
-          // Scroll down to the selected option
-          suggContainer.scrollTop = optionTop + optionHeight - containerHeight;
-        }
-      }
-    }
-
-    function close() {
-      emit("onClose");
-      typing.value = false;
-      showChangeType.value = null;
-    }
-
-    function closeSugg() {
-      suggOpen.value = false;
-      optionIndex.value = 0;
-      document.removeEventListener("click", close);
-    }
-
-    return {
-      close,
-      changeDisplay,
-      handleDelete,
-      removeTag,
-      selectSearch,
-      emptySearch,
-      getKeyword,
-      handleDuplicate,
-      addTag,
-      resetSearch,
-      selectTag,
-      addToSearch,
-      shortcutColor,
-      shortcutSelect,
-      typing,
-      shortcuts,
-      hoverShortcut,
-      selectedShortcut,
-      searchedWords,
-      closeIndex,
-      value,
-      selectedTag,
-      duplicate,
-      searchBar,
-      tagsSection,
-      shortcutIndex,
-      removeSelected,
-      hoverTag,
-      showInfo,
-      regexSearch,
-      iconColor,
-      hasShortcut,
-      infoHeight,
-      suggOpen,
-      filterSuggestions,
-      selectOption,
-      optionIndex,
-      selectSugg,
-      showChangeType,
-      changeSearchType,
-      notFound,
-      loaderText,
-      handleChangeType,
-      highlightSearchInput,
-    };
-  },
-});
-</script>"
-      );
-      const regex = new RegExp(escapedInput);
-      return suggestion.replace(
-        regex,
-        (match) => `<span style="color: var(--primary); font-weight: 700">${match}</span>`
-      );
-    }
     function shortcutColor(shortcut) {
       if (shortcut === selectedShortcut.value || shortcut === hoverShortcut.value) {
         return "var(--darkest)";
@@ -1349,8 +723,7 @@ export default defineComponent({
       changeSearchType,
       notFound,
       loaderText,
-      handleChangeType,
-      highlightSearchInput
+      handleChangeType
     };
   }
 });

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

@@ -173,7 +173,6 @@ declare const _default: import("vue").DefineComponent<{
         es: string;
     };
     handleChangeType: (searchIndex: number) => void;
-    highlightSearchInput: (suggestion: string) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:Value" | "onClose")[], "update:Value" | "onClose", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     placeHolderValue: {
         type: StringConstructor;

package/dist/runtime/components/argComplexSelect.vue

@@ -50,7 +50,12 @@
             <arg-pills
               v-for="(item, index) of smart_selection_table"
               :key="index"
-              @onClick="smart_selection_select_item(item)"
+              :active="smart_selection_selected?.name === item.name"
+              @onClick="
+                smart_selection_selected?.name !== item.name
+                  ? smart_selection_select_item(item)
+                  : del_all_element()
+              "
             >
               {{ item.name }}
             </arg-pills>
@@ -81,6 +86,16 @@
               v-model="searchNameAdd"
               @input="changeInput"
             />
+            <div
+              v-if="searchNameAdd.length > 0"
+              class="close-icon"
+              @click="
+                searchNameAdd = '';
+                changeInput();
+              "
+            >
+              <arg-icon name="X" size="14" color="var(--dark)" thickness="32" />
+            </div>
           </div>
           <div class="oip_select_complex_options">
             <arg-data-loader
@@ -142,10 +157,16 @@
           <arg-icon name="MagnifyingGlass" color="var(--medium)" size="14" />
           <input
             class="complex_input"
-            :placeholder="getPlaceholderAdd"
+            :placeholder="getPlaceholderDel"
             v-model="searchNameDel"
-            @input="changeInput"
           />
+          <div
+            v-if="searchNameDel.length > 0"
+            class="close-icon"
+            @click="searchNameDel = ''"
+          >
+            <arg-icon name="X" size="14" color="var(--dark)" thickness="32" />
+          </div>
         </div>
         <div class="oip_select_complex_options">
           <p class="oip_body" v-if="del_table.length === 0">
@@ -278,7 +299,7 @@ export default defineComponent({
     const getAddText = {
       en: "Custom selection",
       fr: "S\xE9lection sur mesure",
-      es: "Dselecci\xF3n personalizada"
+      es: "Selecci\xF3n personalizada"
     };
     const getAddAllText = {
       en: "Select all",
@@ -497,7 +518,7 @@ export default defineComponent({
     }
     function add_all_element() {
       smart_selection_selected.value = void 0;
-      del_table.value = Object.assign([], [...new Set(props.element_table)]);
+      del_table.value = Object.assign([], [...new Set(filterNameAdd.value)]);
       add_table.value = [];
       if (!props.need_apply) {
         apply_function();
@@ -745,3 +766,18 @@ export default defineComponent({
   align-self: stretch;
 }
 </style>
+
+<style>
+.close-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  background: var(--light);
+  padding: 5px;
+  cursor: pointer;
+}
+.close-icon:hover svg {
+  color: var(--primary) !important;
+}
+</style>

package/dist/runtime/components/argDropdownSelect.vue

@@ -56,6 +56,16 @@
           @input="changeInput()"
           :placeholder="getPlaceholder"
         />
+        <div
+          v-if="searchName.length > 0"
+          class="close-icon"
+          @click="
+            searchName = '';
+            changeInput();
+          "
+        >
+          <arg-icon name="X" size="14" color="var(--dark)" thickness="32" />
+        </div>
       </div>
       <!-- List -->
       <arg-data-loader

package/dist/runtime/components/argMultipleSelect.vue

@@ -43,6 +43,16 @@
           :placeholder="getPlaceholder"
           @input="changeInput()"
         />
+        <div
+          v-if="searchName.length > 0"
+          class="close-icon"
+          @click="
+            searchName = '';
+            changeInput();
+          "
+        >
+          <arg-icon name="X" size="14" color="var(--dark)" thickness="32" />
+        </div>
       </div>
       <arg-data-loader
         v-if="loading"

package/dist/runtime/components/argPills.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { ref, defineComponent } from "vue";
+import { ref, defineComponent, watch } from "vue";
 import argIcon from "./argIcon.vue";
 import argStyle from "./argStyle.vue";
 export default defineComponent({
@@ -53,6 +53,12 @@ export default defineComponent({
   emits: ["onClose", "onClick"],
   setup(props, { emit }) {
     const isActive = ref(props.active);
+    watch(
+      () => props.active,
+      () => {
+        isActive.value = props.active;
+      }
+    );
     function clickPill() {
       if (!props.haveClose) {
         isActive.value = !isActive.value;

package/dist/runtime/components/argSearchInput.vue

@@ -56,7 +56,7 @@
             color="var(--medium)"
           />
           <span v-if="!highlightInput"> {{ sugg.text }} </span>
-          <span v-else v-html="highlightSearchInput(sugg.text)" />
+          <span v-else v-html="sugg.text" />
         </p>
       </div>
       <div v-else-if="!loadingSuggs" class="sugg_container">
@@ -175,256 +175,6 @@ export default defineComponent({
         }
       }
     );
-    function highlightSearchInput(suggestion) {
-      const escapedInput = searchValue.value.replace(
-        /[-\/\\^$*+?.()|[\]{}]/g,
-        "\\<script lang="ts">
-import argIcon from "./argIcon.vue";
-import { useFuse } from "@vueuse/integrations/useFuse";
-import {
-  onMounted,
-  ref,
-  computed,
-  watch,
-  defineProps,
-  defineEmits,
-  defineComponent,
-} from "vue";
-interface Suggestion {
-  icon?: string;
-  text: string;
-}
-export default defineComponent({
-  name: "argSearchInput",
-  components: { argIcon },
-  props: {
-    placeHolderValue: {
-      type: String,
-      default: "Search here...",
-    },
-    defaultValue: {
-      type: String,
-      default: "",
-    },
-    suggestions: {
-      type: Array<Suggestion>,
-      default: null,
-    },
-    fuzzyThreshold: {
-      type: Number,
-      default: 0.5,
-    },
-    lang: {
-      type: String,
-      default: "en",
-      validator: (value: string) => {
-        return ["en", "fr", "es"].includes(value);
-      },
-    },
-    loadingSuggs: {
-      type: Boolean,
-      default: false,
-    },
-    highlightInput: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["update:Value", "submitSearch", "selectSuggestion"],
-
-  setup(props, { emit }) {
-    const searchValue = ref("");
-    const suggOpen = ref(false);
-
-    const notFound = {
-      fr: "Aucune suggestion n'a été trouvée",
-      en: "No suggestions were found",
-      es: "No se encontraron sugerencias",
-    };
-    const loaderText = {
-      fr: "Plus de suggestions en chargement",
-      en: "Loading more suggestions",
-      es: "cargando más sugerencias",
-    };
-
-    const closeOnEnter = ref(false);
-
-    const optionIndex = ref(0);
-
-    function selectOption(isDown: boolean) {
-      if (isDown) {
-        optionIndex.value =
-          optionIndex.value === filterSuggestions.value.length
-            ? filterSuggestions.value.length
-            : optionIndex.value + 1;
-      } else {
-        optionIndex.value =
-          optionIndex.value === 0
-            ? filterSuggestions.value.length
-            : optionIndex.value - 1;
-      }
-      const suggContainer = document.querySelector(".search_suggestions");
-      const selectedOption =
-        suggContainer?.querySelectorAll("p")[optionIndex.value - 1];
-
-      if (selectedOption) {
-        const containerHeight = suggContainer?.clientHeight;
-        const containerScrollTop = suggContainer?.scrollTop;
-        const optionTop = selectedOption?.offsetTop;
-        const optionHeight = selectedOption?.offsetHeight * 2;
-
-        if (optionTop < containerScrollTop) {
-          // Scroll up to the selected option
-          suggContainer.scrollTop = optionTop;
-        } else if (
-          optionTop + optionHeight >
-          containerHeight + containerScrollTop
-        ) {
-          // Scroll down to the selected option
-          suggContainer.scrollTop = optionTop + optionHeight - containerHeight;
-        }
-      }
-    }
-
-    watch(
-      () => searchValue.value,
-      () => {
-        if (searchValue.value.length > 0 && props.suggestions !== null) {
-          if (!closeOnEnter.value) {
-            suggOpen.value = true;
-            setTimeout(() => {
-              document.addEventListener("click", closeSugg);
-            });
-          } else {
-            suggOpen.value = false;
-            document.removeEventListener("click", closeSugg);
-            closeOnEnter.value = false;
-          }
-        } else {
-          suggOpen.value = false;
-          document.removeEventListener("click", closeSugg);
-        }
-      }
-    );
-
-    watch(
-      () => suggOpen.value,
-      () => {
-        if (!suggOpen.value) {
-          optionIndex.value = 0;
-        }
-      }
-    );
-
-    function highlightSearchInput(suggestion: string): string {
-      // Échappe les caractères spéciaux pour une utilisation dans une expression régulière
-      const escapedInput = searchValue.value.replace(
-        /[-\/\\^$*+?.()|[\]{}]/g,
-        "\\$&"
-      );
-      // Crée une nouvelle RegExp avec la valeur de recherche, en ignorant la casse
-      const regex = new RegExp(escapedInput);
-      // Remplace la partie correspondante par un span avec du style
-      return suggestion.replace(
-        regex,
-        (match) =>
-          `<span style="color: var(--primary); font-weight: 700">${match}</span>`
-      );
-    }
-
-    const options = computed(() => ({
-      fuseOptions: {
-        includeScore: true,
-        threshold: props.fuzzyThreshold,
-      },
-    }));
-
-    const filterSuggestions = computed(() => {
-      return props.suggestions
-        .filter((f) =>
-          useFuse(
-            searchValue,
-            props.suggestions.map((a) => a.text),
-            options.value
-          )
-            .results.value.map((a) => a.item)
-            .includes(f.text)
-        )
-        .slice(0, 50);
-    });
-
-    const selectSugg = (sugg: Suggestion) => {
-      closeOnEnter.value = true;
-      searchValue.value = sugg.text;
-      emit("update:Value", searchValue.value);
-      emit("selectSuggestion", searchValue.value);
-    };
-
-    function closeSugg() {
-      suggOpen.value = false;
-    }
-
-    function openSugg() {
-      if (searchValue.value.length > 0) {
-        suggOpen.value = true;
-      }
-    }
-
-    onMounted(() => {
-      searchValue.value = props.defaultValue;
-    });
-
-    watch(
-      () => props.defaultValue,
-      (new_value: string) => {
-        searchValue.value = new_value;
-      }
-    );
-
-    function changeInput(event: any) {
-      searchValue.value = event.target.value;
-      emit("update:Value", searchValue.value);
-    }
-    function submitSearch() {
-      if (optionIndex.value > 0) {
-        closeOnEnter.value = true;
-        searchValue.value = filterSuggestions.value[optionIndex.value - 1].text;
-        emit("update:Value", searchValue.value);
-        emit("selectSuggestion", searchValue.value);
-      }
-      emit("submitSearch");
-    }
-
-    function clearValue() {
-      searchValue.value = "";
-      emit("update:Value", searchValue.value);
-    }
-
-    return {
-      searchValue,
-      changeInput,
-      submitSearch,
-      clearValue,
-      suggOpen,
-      openSugg,
-      filterSuggestions,
-      selectSugg,
-      selectOption,
-      optionIndex,
-      notFound,
-      loaderText,
-      highlightSearchInput,
-    };
-  },
-});
-</script>"
-      );
-      const regex = new RegExp(escapedInput);
-      return suggestion.replace(
-        regex,
-        (match) => `<span style="color: var(--primary); font-weight: 700">${match}</span>`
-      );
-    }
     const options = computed(() => ({
       fuseOptions: {
         includeScore: true,
@@ -492,12 +242,11 @@ export default defineComponent({
       selectOption,
       optionIndex,
       notFound,
-      loaderText,
-      highlightSearchInput
+      loaderText
     };
   }
 });
 </script>
 <style scoped>
-.filters_input_search{align-items:center;background:var(--white);border:1.5px solid var(--light);border-radius:8px;display:flex;flex-direction:row;gap:12px;justify-content:space-between;min-height:40px;padding:0 12px;width:calc(100% - 24px)}.filters_input_search.no_bottom{border:1.5px solid var(--primary)!important;border-bottom:none!important;border-radius:8px 8px 0 0;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.search-section{align-items:center;display:flex;flex-direction:row;gap:12px;width:100%}.filters_input_search:not(.no_bottom):hover{border:1.5px solid rgba(33,118,255,.2)}.filters_input_search.no_bottom:hover{border-bottom:none!important}.filters_input_search:focus-within{border:1.5px solid var(--primary)!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.filters_input_search.no_bottom:focus-within{border-bottom:none!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.filters_input_search:focus-within .search-icon,.filters_input_search:hover .search-icon{color:var(--primary)!important}.filters_input_style{width:100%}.filters_input_style,.filters_input_style:focus-visible{border:none;outline:none}.filters_input_style::-moz-placeholder{color:var(--medium)}.filters_input_style::placeholder{color:var(--medium)}.close-icon{align-items:center;background:var(--light);border-radius:100%;cursor:pointer;display:flex;justify-content:center;padding:5px}.relative{position:relative;width:100%}.search_suggestions{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fff;border:1.5px solid var(--light);border-radius:0 0 8px 8px;left:0;max-height:200px;overflow-y:scroll;position:absolute;width:100%;z-index:99}.search_suggestions::-webkit-scrollbar{height:5px;width:5px}.search_suggestions::-webkit-scrollbar-thumb{background:var(--medium);border-radius:12px!important}.search_suggestions::-webkit-scrollbar-thumb:hover{background:var(--medium)!important}.sugg_open{border-top:1.5px solid var(--primary)!important;border:1.5px solid var(--primary)!important;border-top-color:var(--light)!important;box-shadow:2px 2px 3px rgba(33,118,255,.1),-2px 2px 3px rgba(33,118,255,.1)}.sugg_container{cursor:pointer;display:flex;flex-direction:column}.sugg_container p:not(.loading){align-items:center;display:flex;gap:8px;padding:8px 12px}.sugg_container p.selected,.sugg_container p:not(.not-found,.loading):hover{background:rgba(93,153,250,.2)}.sugg_container p.selected svg,.sugg_container p:not(.not-found,.loading):hover svg{color:var(--primary)!important}.sugg_container p:last-of-type{border-radius:0 0 8px 8px}.loading{color:var(--medium);font-style:italic;padding:8px 12px}.loading:after{animation:dots 1.3s step-end infinite;content:"";display:inline-block}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}to{content:""}}
+.filters_input_search{align-items:center;background:var(--white);border:1.5px solid var(--light);border-radius:8px;display:flex;flex-direction:row;gap:12px;justify-content:space-between;min-height:40px;padding:0 12px;width:calc(100% - 24px)}.filters_input_search.no_bottom{border:1.5px solid var(--primary)!important;border-bottom:none!important;border-radius:8px 8px 0 0;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.search-section{align-items:center;display:flex;flex-direction:row;gap:12px;width:100%}.filters_input_search:not(.no_bottom):hover{border:1.5px solid rgba(33,118,255,.2)}.filters_input_search.no_bottom:hover{border-bottom:none!important}.filters_input_search:focus-within{border:1.5px solid var(--primary)!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.filters_input_search.no_bottom:focus-within{border-bottom:none!important;filter:drop-shadow(0 0 4px rgba(33,118,255,.3))!important}.filters_input_search:focus-within .search-icon,.filters_input_search:hover .search-icon{color:var(--primary)!important}.filters_input_style{width:100%}.filters_input_style,.filters_input_style:focus-visible{border:none;outline:none}.filters_input_style::-moz-placeholder{color:var(--medium)}.filters_input_style::placeholder{color:var(--medium)}.close-icon{align-items:center;background:var(--light);border-radius:100%;cursor:pointer;display:flex;justify-content:center;padding:5px}.close-icon:hover svg{color:var(--primary)!important}.relative{position:relative;width:100%}.search_suggestions{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fff;border:1.5px solid var(--light);border-radius:0 0 8px 8px;left:0;max-height:200px;overflow-y:scroll;position:absolute;width:100%;z-index:99}.search_suggestions::-webkit-scrollbar{height:5px;width:5px}.search_suggestions::-webkit-scrollbar-thumb{background:var(--medium);border-radius:12px!important}.search_suggestions::-webkit-scrollbar-thumb:hover{background:var(--medium)!important}.sugg_open{border-top:1.5px solid var(--primary)!important;border:1.5px solid var(--primary)!important;border-top-color:var(--light)!important;box-shadow:2px 2px 3px rgba(33,118,255,.1),-2px 2px 3px rgba(33,118,255,.1)}.sugg_container{cursor:pointer;display:flex;flex-direction:column}.sugg_container p:not(.loading){align-items:center;display:flex;gap:8px;padding:8px 12px}.sugg_container p.selected,.sugg_container p:not(.not-found,.loading):hover{background:rgba(93,153,250,.2)}.sugg_container p.selected svg,.sugg_container p:not(.not-found,.loading):hover svg{color:var(--primary)!important}.sugg_container p:last-of-type{border-radius:0 0 8px 8px}.loading{color:var(--medium);font-style:italic;padding:8px 12px}.loading:after{animation:dots 1.3s step-end infinite;content:"";display:inline-block}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}to{content:""}}
 </style>

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

@@ -66,7 +66,6 @@ declare const _default: import("vue").DefineComponent<{
         en: string;
         es: string;
     };
-    highlightSearchInput: (suggestion: string) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:Value" | "submitSearch" | "selectSuggestion")[], "update:Value" | "submitSearch" | "selectSuggestion", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     placeHolderValue: {
         type: StringConstructor;

package/package.json

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