@tekkare/auriga 0.1.0

package/dist/runtime/components/argAdvancedSearchBar.vue

@@ -0,0 +1,866 @@
+<template>
+  <div>
+    <div
+      class="filters_input_search"
+      :class="{ filters_shortcuts_open: typing }"
+      @keydown.backspace="handleDelete()"
+      @click="changeDisplay()"
+    >
+      <arg-icon
+        name="MagnifyingGlass"
+        color="var(--wild-blue-yonder)"
+        size="20"
+        class="search_icon"
+      />
+      <input
+        id="search_input"
+        v-model="value"
+        class="filters_input_style"
+        :placeholder="placeHolderValue"
+        @keydown.enter="addTag"
+        @keydown.left="selectTag(closeIndex - 1, 0)"
+        @keydown.right="selectTag(closeIndex + 1, 1)"
+        @keydown.up="shortcutSelect('asc')"
+        @keydown.down="shortcutSelect('desc')"
+      />
+      <div class="research_tags" id="tags">
+        <div
+          v-for="(search, searchIndex) in searchedWords"
+          :key="searchIndex"
+          :id="`tag${searchIndex}`"
+          :class="{
+            selected_tag: selectedTag === searchIndex,
+            duplicate_tag: duplicate.includes(search.value),
+          }"
+          class="input_shortcut_tag"
+          @mouseover="hoverTag = searchIndex"
+          @mouseleave="hoverTag = null"
+        >
+          <span v-if="search.type.length > 0" class="tag_search_type"
+            >{{ search.type }}
+          </span>
+          <span class="shortcut_keyword">{{ search.value }}</span>
+          <div
+            class="remove_search"
+            @click="removeTag(searchIndex)"
+            @click.stop
+          >
+            <arg-icon name="X" size="14" />
+          </div>
+        </div>
+      </div>
+      <div
+        class="remove_search_section"
+        @click="emptySearch()"
+        :class="{ 'select-remove': removeSelected }"
+      >
+        <arg-icon
+          name="XCircleFill"
+          size="20"
+          color="var(--wild-blue-yonder)"
+        />
+      </div>
+    </div>
+    <div v-if="typing" class="sub_input_section">
+      <div class="research_section" id="shortcuts" @click.stop>
+        <div class="research_title">
+          <p>Research options</p>
+          <arg-icon
+            name="QuestionFill"
+            color="var(--independence)"
+            size="16"
+            class="align_icon show_shortcuts"
+            @click.native="showInfo = !showInfo"
+          />
+        </div>
+        <div class="research_content">
+          <div
+            :class="{
+              research_item_selected: selectedShortcut === shortcut.symbol,
+            }"
+            class="research_item"
+            v-for="(shortcut, index) in shortcuts"
+            :key="index"
+            @click="selectSearch(shortcut)"
+            @mouseover="hoverShortcut = shortcut.symbol"
+            @mouseleave="hoverShortcut = ''"
+          >
+            <p class="research_keyword">{{ shortcut.keyword }}:</p>
+            <p class="research_value">{{ shortcut.value }}</p>
+            <arg-icon
+              name="Plus"
+              size="16"
+              :color="shortcutColor(shortcut.symbol)"
+              class="align_icon"
+            />
+          </div>
+        </div>
+        <div
+          v-if="hoverShortcut.length > 0 || selectedShortcut.length > 0"
+          class="research_footer"
+        >
+          <div class="research_separator"></div>
+          <div class="shortcuts_choice">
+            <p>Shortcut:</p>
+            <div class="shortcut_tag">
+              <p v-if="hoverShortcut.length > 0" class="shortcut_symbol">
+                {{ hoverShortcut }}
+              </p>
+              <p
+                v-else-if="selectedShortcut.length > 0"
+                class="shortcut_symbol"
+              >
+                {{ selectedShortcut }}
+              </p>
+              <p class="shortcut_keyword">keyword</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="showInfo" class="searchbar_info" id="info" @click.stop>
+        <div class="searchbar_shortcuts">
+          <p class="searchbar_info_title">Keyboard shortcuts</p>
+          <ul class="searchbar_info_content">
+            <li>
+              Use <b>left and right</b> arrows to navigate in the searchbar
+            </li>
+            <li>
+              Use <b>up and down</b> arrows to navigate in the research options
+            </li>
+            <li>
+              Hit the <b>enter</b> key to save your search input, delete a
+              selected search tag or delete all searches when the remove icon is
+              selected
+            </li>
+            <li>
+              If your search input is empty, you can delete your searches one by
+              one by hitting the <b>delete</b> key
+            </li>
+          </ul>
+          <p class="searchbar_info_title">Other info</p>
+          <ul class="searchbar_info_content">
+            <li>
+              You can search multiple words by seperating them with a comma
+            </li>
+          </ul>
+        </div>
+        <div class="close_info" @click="showInfo = false">
+          <arg-icon name="X" size="14" color="var(--pure-white)" />
+        </div>
+      </div>
+    </div>
+  </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: () => [],
+  },
+});
+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) {
+        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;
+      }
+    }
+  }
+});
+
+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;
+    }
+  } 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) {
+  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;
+    }
+  }
+  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 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, "");
+      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);
+        selectedShortcut.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);
+            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);
+    }
+  } 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);
+  }
+}
+</script>
+<style scoped>
+.research_tags {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  overflow-x: scroll;
+  gap: 8px;
+}
+.research_tags::-webkit-scrollbar {
+  display: none;
+}
+
+.filters_input_search {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0px 0px 0px 12px;
+  gap: 12px;
+  background: var(--pure-white);
+  border: 1.5px solid var(--dividers);
+  border-radius: 8px;
+  width: calc(100% - 12px);
+  height: 40px;
+}
+
+.filters_shortcuts_open {
+  border-radius: 8px 8px 8px 0px;
+}
+
+.filters_input_style {
+  max-width: 20%;
+  margin-right: 8px;
+}
+
+.filters_input_style,
+.filters_input_style:focus-visible {
+  border: none;
+  outline: none;
+}
+
+.filters_input_style::placeholder {
+  color: var(--wild-blue-yonder);
+}
+
+.research_section {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px;
+  width: 340px;
+  background: var(--pure-white);
+  border: 1.5px solid var(--dividers);
+  box-shadow: 0px 16px 40px rgba(62, 63, 94, 0.12);
+  border-radius: 0px 0px 8px 8px;
+  flex-shrink: 0;
+}
+
+.research_title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 16px;
+  gap: 8px;
+  flex: none;
+  order: 0;
+  align-self: stretch;
+  flex-grow: 0;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+.align_icon {
+  margin-left: auto;
+}
+
+.research_content {
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0px 8px;
+  flex: none;
+  order: 1;
+  align-self: stretch;
+  flex-grow: 0;
+}
+
+.research_item {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 8px;
+  gap: 4px;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.research_item:hover {
+  background: var(--background) !important;
+}
+
+.research_item_selected {
+  background: var(--background);
+}
+
+.research_keyword {
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 19px;
+}
+
+.research_value {
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 19px;
+  color: var(--cool-grey);
+}
+
+.research_item > svg {
+  margin-left: auto;
+}
+
+.research_footer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 16px 0px 0px;
+  flex: none;
+  order: 2;
+  align-self: stretch;
+  flex-grow: 0;
+}
+
+.research_separator {
+  background: var(--dividers);
+  width: 100%;
+  height: 1px;
+}
+
+.shortcuts_choice {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px 16px;
+  gap: 4px;
+  flex: none;
+  order: 1;
+  align-self: stretch;
+  flex-grow: 0;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+.shortcut_tag {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: 4px;
+  gap: 2px;
+  background: var(--background);
+  border-radius: 4px;
+  flex: none;
+  order: 1;
+  flex-grow: 0;
+}
+
+.shortcut_keyword {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+.shortcut_symbol {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 16px;
+}
+
+.tag_search_type {
+  font-size: 14px;
+  line-height: 16px;
+  color: var(--cool-grey);
+  text-transform: uppercase;
+}
+
+.input_shortcut_tag {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px 12px;
+  gap: 4px;
+  isolation: isolate;
+  background: var(--background);
+  border-radius: 8px;
+  position: relative;
+  width: auto;
+}
+
+.input_shortcut_tag:hover .remove_search,
+.input_shortcut_tag.selected_tag > .remove_search {
+  transition: all 0.3s ease;
+  left: calc(100% - 25px);
+  background: var(--background);
+  opacity: 1;
+  position: absolute;
+}
+
+.remove_search_section {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0px 12px;
+  border-left: 1px solid var(--dividers);
+  height: 100%;
+  margin-left: auto;
+  cursor: pointer;
+  border-radius: 0px 8px 8px 0px;
+}
+
+.remove_search {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 4px;
+  border-radius: 0px 8px 8px 0px;
+  background: var(--background);
+  border-left: 1px solid var(--dividers);
+  height: 100%;
+  transition: all 0.2s ease;
+  left: calc(100% - 15px);
+  cursor: pointer;
+  position: absolute;
+  opacity: 0;
+}
+
+.search_error {
+  color: var(--alert);
+  font-size: 14px;
+}
+
+.selected_tag {
+  border: 1px solid var(--primary);
+}
+
+.input_shortcut_tag.duplicate_tag {
+  background: var(--background) !important;
+  animation: shake 1s;
+}
+@keyframes shake {
+  10%,
+  90% {
+    transform: scale(0.9) translate3d(-1px, 0, 0);
+  }
+
+  20%,
+  80% {
+    transform: scale(0.9) translate3d(2px, 0, 0);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: scale(0.9) translate3d(-4px, 0, 0);
+  }
+
+  40%,
+  60% {
+    transform: scale(0.9) translate3d(4px, 0, 0);
+  }
+}
+.search_icon {
+  flex-shrink: 0;
+}
+
+.select-remove {
+  border: 1px solid var(--primary);
+}
+
+.sub_input_section {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  position: absolute;
+  z-index: 3;
+}
+
+@media screen and (max-width: 700px) {
+  .sub_input_section {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: flex-start;
+  }
+  .searchbar_info {
+    width: 338px;
+    height: 100px;
+    overflow-y: scroll;
+    border-radius: 0px !important;
+    opacity: 1 !important;
+  }
+}
+
+.searchbar_info {
+  box-shadow: 0px 16px 40px rgba(62, 63, 94, 0.12);
+  border: 1px solid var(--independence);
+  background: var(--independence);
+  color: var(--pure-white);
+  border-radius: 0px 0px 8px 8px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  max-width: 500px;
+}
+
+.searchbar_shortcuts {
+  padding: 16px;
+}
+
+.searchbar_info_title {
+  font-size: 14px;
+  font-weight: 700;
+  text-decoration: underline;
+}
+
+.searchbar_info_content {
+  font-size: 14px;
+  list-style: inside;
+  padding-inline-start: 0px !important;
+}
+
+.close_info {
+  cursor: pointer;
+  padding: 12px 16px 0px 0px;
+}
+
+.show_shortcuts {
+  cursor: pointer;
+}
+
+.filters_input_search:hover {
+  border: 1.5px solid rgba(33, 118, 255, 0.2) !important;
+}
+
+.filters_input_search:focus-within {
+  border: 1.5px solid var(--primary) !important;
+  box-shadow: 0px 0px 0px 4px rgba(33, 118, 255, 0.1) !important;
+}
+
+.filters_input_search:hover .search_icon,
+.filters_input_search:focus-within .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::placeholder {
+  color: var(--wild-blue-yonder);
+}
+</style>