@tekkare/auriga 0.1.0 → 0.1.4

package/dist/runtime/components/argAdvancedSearchBar.vue

@@ -152,348 +152,345 @@
   </div>
 </template>
 <script>
-export default {
-  name: "argAdvancedSearchBar"
-};
-</script>
-<script setup lang="ts">
-import { onMounted, ref, computed, defineProps, defineEmits, watch } from "vue";
-const props = defineProps({
-  placeHolderValue: {
-    type: String,
-    default: "Type your search",
-  },
-  customShortcuts: {
-    type: Array<any>,
-    default: () => [],
+import {
+  onMounted,
+  ref,
+  computed,
+  watch,
+  defineComponent
+} from "vue";
+import argIcon from "./argIcon.vue";
+export default defineComponent({
+  name: "argAdvancedSearchBar",
+  components: { argIcon },
+  props: {
+    placeHolderValue: {
+      type: String,
+      default: "Type your search"
+    },
+    customShortcuts: {
+      type: Array,
+      default: () => []
+    }
   },
-});
-var typing = ref(false);
-var 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: "!" },
-]);
-var hoverShortcut = ref("");
-var selectedShortcut = ref("");
-var searchedWords = ref([]);
-var closeIndex = ref();
-var value = ref("");
-var selectedTag = ref();
-var duplicate = ref("");
-var searchBar = ref();
-var tagsSection = ref();
-var shortcutIndex = ref(-1);
-var removeSelected = ref(false);
-var hoverTag = ref();
-var showInfo = ref();
-const regexSearch =
-  /^[\s\.\+\/\!]|(?:[\+\/\!\s])[\s{1,}\.{1,}\+{1,}\/{1,}\!{1,}]|[\s{1,}\.1,}\+{1,}\/{1,}\!{1,}]$|\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 emit = defineEmits(["update:Value", "onClose"]);
-
-let iconColor = computed(() => {
-  if (typing.value === true) {
-    return "var(--primary)";
-  } else return "var(--wild-blue-yonder)";
-});
-
-let hasShortcut = computed(() => {
-  if (selectedShortcut.value.length > 0 || hoverShortcut.value.length > 0) {
-    return true;
-  } else return false;
-});
-
-let 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) {
+  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("");
+    const selectedShortcut = ref("");
+    const searchedWords = ref([]);
+    const closeIndex = ref();
+    const value = ref("");
+    const selectedTag = ref();
+    const duplicate = ref("");
+    const searchBar = ref();
+    const tagsSection = ref();
+    const shortcutIndex = ref(-1);
+    const removeSelected = ref(false);
+    const hoverTag = ref();
+    const showInfo = ref();
+    const regexSearch = /^[\s\.\+\/\!]|(?:[\+\/\!\s])[\s{1,}\.{1,}\+{1,}\/{1,}\!{1,}]|[\s{1,}\.1,}\+{1,}\/{1,}\!{1,}]$|\s+[\+\/]|\s+$/g;
+    const iconColor = computed(() => {
+      if (typing.value === true) {
+        return "var(--primary)";
+      } else
+        return "var(--wild-blue-yonder)";
+    });
+    const hasShortcut = computed(() => {
+      if (selectedShortcut.value.length > 0 || hoverShortcut.value.length > 0) {
         return true;
-      } else return false;
-    } else return false;
-  }
-});
-
-watch(value, (new_value: string) => {
-  if (new_value === "") {
-    hoverShortcut.value = "";
-  } else {
-    for (let i = 0; i < shortcuts.value.length; i++) {
-      if (new_value.startsWith(shortcuts.value[i].symbol)) {
-        selectedShortcut.value = shortcuts.value[i].symbol;
+      } 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;
+    });
+    watch(value, (new_value) => {
+      if (new_value === "") {
+        hoverShortcut.value = "";
+      } else {
+        for (let i = 0; i < shortcuts.value.length; i++) {
+          if (new_value.startsWith(shortcuts.value[i].symbol)) {
+            selectedShortcut.value = shortcuts.value[i].symbol;
+          }
+        }
       }
+    });
+    watch(selectedShortcut, (new_shortcut) => {
+      value.value = `${new_shortcut}`;
+    });
+    watch(closeIndex, (new_index) => {
+      if (new_index > searchedWords.value.length) {
+        removeSelected.value = true;
+      } else
+        removeSelected.value = false;
+    });
+    watch(searchedWords, (newSearched) => {
+      setTimeout(() => {
+        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]);
+        }
+      }
+    });
+    function shortcutColor(shortcut) {
+      if (shortcut === selectedShortcut.value || shortcut === hoverShortcut.value) {
+        return "var(--independence)";
+      } else
+        return "var(--pure-white)";
     }
-  }
-});
-
-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;
-});
-
-watch(searchedWords, (newSearched: []) => {
-  setTimeout(() => {
-    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]);
-    }
-  }
-});
-
-function shortcutColor(shortcut: string) {
-  if (shortcut === selectedShortcut.value || shortcut === hoverShortcut.value) {
-    return "var(--independence)";
-  } else return "var(--pure-white)";
-}
-
-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;
+    function shortcutSelect(dir) {
+      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();
     }
-  } 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;
+    function addToSearch(search, textValue) {
+      searchedWords.value.push({ type: search, value: textValue });
+      closeIndex.value = searchedWords.value.length;
+      selectedTag.value = null;
+      emit("update:Value", searchedWords.value);
+      searchBar.value.focus();
+      resetSearch();
     }
-  }
-  searchBar.value.focus();
-}
-
-function addToSearch(search: string, textValue: string) {
-  searchedWords.value.push({ type: search, value: textValue });
-  closeIndex.value = searchedWords.value.length;
-  selectedTag.value = null;
-  emit("update:Value", searchedWords.value);
-  searchBar.value.focus();
-  resetSearch();
-}
-
-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;
+    function selectTag(index, direction) {
+      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;
+      }
     }
-  }
-  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) {
-  for (let i = 0; i < shortcuts.value.length; i++) {
-    if (keyword === shortcuts.value[i].symbol) {
-      return shortcuts.value[i].keyword;
+    function resetSearch() {
+      value.value = "";
     }
-  }
-}
-
-function addTag() {
-  if (removeSelected.value === true) {
-    emptySearch();
-  } else if (
-    selectedTag.value !== null &&
-    selectedTag.value < searchedWords.value.length &&
-    selectedTag.value >= 0
-  ) {
-    removeTag(selectedTag.value);
-  } else {
-    let search: any;
-    let searchValue = "";
-    let arrayValues: any[];
-    arrayValues = [];
-    if (value.value.length > 0) {
-      searchValue = value.value.replace(regexSearch, "");
+    function getKeyword(keyword) {
       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 (keyword === shortcuts.value[i].symbol) {
+          return shortcuts.value[i].keyword;
         }
       }
-      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);
-        selectedShortcut.value = "";
+    function addTag() {
+      if (removeSelected.value === true) {
+        emptySearch();
+      } else if (selectedTag.value !== null && selectedTag.value < searchedWords.value.length && selectedTag.value >= 0) {
+        removeTag(selectedTag.value);
       } else {
-        handleDuplicate(searchValue);
-      }
-    } else if (arrayValues.length > 0) {
-      for (let i = 0; i < arrayValues.length; i++) {
-        let arraySearchValue = arrayValues[i].replace(regexSearch, "");
-        if (arraySearchValue.length > 0) {
-          if (
-            searchedWords.value.filter((f: any) => f.value === arraySearchValue)
-              .length === 0
-          ) {
-            addToSearch(search, arraySearchValue);
+        let search;
+        let searchValue = "";
+        let arrayValues;
+        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 === void 0) {
+            search = getKeyword(selectedShortcut.value);
+          } else if (hoverShortcut.value.length > 0 && search === void 0) {
+            search = getKeyword(hoverShortcut.value);
+          } else if (search === void 0) {
+            search = "and";
+          }
+          if (value.value.includes(",")) {
+            arrayValues = value.value.split(",");
+          }
+        }
+        if (searchValue.length > 0 && arrayValues.length === 0) {
+          if (searchedWords.value.filter((f) => f.value === searchValue).length === 0) {
+            addToSearch(search, searchValue);
             selectedShortcut.value = "";
           } else {
-            handleDuplicate(arraySearchValue);
+            handleDuplicate(searchValue);
+          }
+        } else if (arrayValues.length > 0) {
+          for (let i = 0; i < arrayValues.length; i++) {
+            let arraySearchValue = arrayValues[i].replace(regexSearch, "");
+            if (arraySearchValue.length > 0) {
+              if (searchedWords.value.filter(
+                (f) => f.value === arraySearchValue
+              ).length === 0) {
+                addToSearch(search, arraySearchValue);
+                selectedShortcut.value = "";
+              } else {
+                handleDuplicate(arraySearchValue);
+              }
+            }
           }
         }
       }
     }
-  }
-}
-
-function handleDuplicate(tag: any) {
-  duplicate.value = `${duplicate.value} ${tag}`;
-  setTimeout(() => (duplicate.value = ""), 1000);
-}
-
-function emptySearch() {
-  searchedWords.value = [];
-  removeSelected.value = false;
-  closeIndex.value = null;
-  searchBar.value.focus();
-}
-
-function selectSearch(item: any) {
-  let 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);
-    } else {
-      handleDuplicate(searchValue);
+    function handleDuplicate(tag) {
+      duplicate.value = `${duplicate.value} ${tag}`;
+      setTimeout(() => duplicate.value = "", 1e3);
     }
-  } else {
-    value.value = `${item.symbol}`;
-  }
-  searchBar.value.focus();
-}
-
-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 close() {
-  if (typing.value === true) {
-    emit("onClose");
-    typing.value = false;
-    document.removeEventListener("click", close);
+    function emptySearch() {
+      searchedWords.value = [];
+      removeSelected.value = false;
+      closeIndex.value = null;
+      searchBar.value.focus();
+    }
+    function selectSearch(item) {
+      let searchValue = value.value.replace(regexSearch, "");
+      selectedShortcut.value = item.symbol;
+      if (searchValue.length > 0) {
+        if (searchedWords.value.filter((f) => f.value === searchValue).length === 0) {
+          addToSearch(getKeyword(item.symbol), searchValue);
+        } else {
+          handleDuplicate(searchValue);
+        }
+      } else {
+        value.value = `${item.symbol}`;
+      }
+      searchBar.value.focus();
+    }
+    function removeTag(tagIndex) {
+      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 close() {
+      if (typing.value === true) {
+        emit("onClose");
+        typing.value = false;
+        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
+    };
   }
-}
+});
 </script>
 <style scoped>
 .research_tags {