{"version":3,"file":"CodeSearchBar-c0e6d753.js","sources":["../../src/components/code/CodeSearchBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onMounted, onUnmounted, ref, defineProps } from 'vue'\nimport { useRouter } from 'vue-router'\nimport { useId, searchBarExculseTargetIds } from '@/utils/useId'\nimport { MOBILEIDENAVIGATIONIDS } from '@/utils/ide'\nimport { languagesItems, type ILanguage } from '@/utils/sharedData/languages'\nimport { IDEVIEWTABS_MOBILE } from '@/utils/tabs'\nimport { useIdeStore } from '@/stores/ide.store'\nimport { useJdroidStore } from '@/stores/jdroid.store'\nimport projectsService from '@/services/ide/projects.service'\n\n/**\n * Contains unique id\n */\nconst id = useId('searchBar', true)\n\nconst props = defineProps({\n  isWithAnimation: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  isFullSize: {\n    type: Boolean,\n    required: false,\n    default: true\n  },\n  isMini: {\n    type: Boolean,\n    required: false,\n    default: false\n  },\n  isIdeMobileNav: {\n    type: Boolean,\n    required: false,\n    default: false\n  }\n})\n\nconst router = useRouter()\n\nconst ideStore = useIdeStore()\nconst isDark = false\nconst jdroidStore = useJdroidStore()\n\nconst searchTerm = ref('')\nconst languages: ILanguage[] = [...languagesItems]\n  .filter((langauge: ILanguage) => {\n    return !langauge.isAdvanced\n  })\n  .sort((a: ILanguage, b: ILanguage) => (a.displayName > b.displayName ? 1 : -1))\n\nconst showDropdown = ref(false)\n\nconst isIdeView = computed(() => {\n  return ideStore.isIdeView\n})\n\nconst showingMobileInputTab = computed(() => {\n  return ideStore.currentMobileTab == IDEVIEWTABS_MOBILE.INPUT\n})\n\nconst links = computed(() => {\n  if (searchTerm.value && searchTerm.value.trim() !== '') {\n    let links = languages.filter((o: ILanguage) => {\n      return o.searchTerm.includes(searchTerm.value.toLowerCase())\n    })\n    return links\n  } else {\n    return projectsService.groupFrameWorkLanguage(languages)\n  }\n})\n\nconst placeholder = computed(() => {\n  return props.isMini ? 'Search Language' : 'Search IDEs Compiler or Terminal'\n})\n\nconst isDefaultLightMode = computed(() => {\n  if (ideStore.isIdeView) {\n    if (isDark || ideStore?.colorMode == 'dark') return true\n    return false\n  }\n  return false\n})\n\n/**\n * @param event Click event\n * If clicking outside of dropdown div, dropdown will disappear\n */\nconst clickEventHandler = (event: any) => {\n  const inx = searchBarExculseTargetIds.findIndex((id) => id === event.target.id)\n  if (inx === -1) {\n    if (showDropdown.value) {\n      if (event.target.id != 'codeSearchDropdown') {\n        showDropdown.value = false\n      } else {\n        showDropdown.value = true\n      }\n    }\n  }\n}\n\ninterface slideItem {\n  icon: string\n  displayName: string\n}\n\nconst autoSlideIndex = ref<number>(0)\nconst autoSlideItem = ref<slideItem>({\n  icon: languages[autoSlideIndex.value].icon,\n  displayName: languages[autoSlideIndex.value].displayName\n})\nconst fadeEffect = ref<string>('')\nconst animationVisibility = ref<boolean>(props.isWithAnimation)\nconst searchBar: any = ref(null)\n\n/**\n *\n */\nconst autoSlide = (): void => {\n  animationVisibility.value = true\n  fadeEffect.value = 'fadeIn'\n  autoSlideIndex.value === languages.length - 1\n    ? (autoSlideIndex.value = 0)\n    : autoSlideIndex.value++\n  autoSlideItem.value.icon = languages[autoSlideIndex.value].icon\n  autoSlideItem.value.displayName = languages[autoSlideIndex.value].displayName\n\n  setTimeout(() => {\n    fadeEffect.value = 'fadeOut'\n  }, 1000)\n}\n\n/**\n * Remove auto slide animation and show dropdown\n */\nconst removeAutoSlide = async () => {\n  searchBar.value.focus()\n  clearInterval(autoSlideInterval)\n  animationVisibility.value = false\n  await new Promise((resolve) => setTimeout(resolve, 100))\n  showDropdown.value = true\n}\n\nlet autoSlideInterval: any\n/**\n * @param item Selected language\n * Start coding with selected language\n */\nconst startCoding = async (item: ILanguage) => {\n  if (!item.categoryText) {\n    if (ideStore.isIdeView) {\n      jdroidStore.setStartCodingLanguage(item)\n    } else {\n      jdroidStore.setStartCodingLanguage(item)\n      router.push('/start-coding')\n    }\n  }\n}\n\nonMounted(() => {\n  document.addEventListener('click', clickEventHandler)\n  autoSlideInterval = props.isWithAnimation && setInterval(autoSlide, 2000)\n})\n\nonUnmounted(() => {\n  document.removeEventListener('click', clickEventHandler)\n  removeAutoSlide\n})\n</script>\n\n<template>\n  <div\n    class=\"relative h-10 print:hidden\"\n    :class=\"[\n      { 'w-fit': props.isMini },\n      { 'mb-4': !props.isMini },\n      { 'w-full': showingMobileInputTab }\n    ]\"\n  >\n    <div class=\"relative h-full\">\n      <input\n        autocomplete=\"off\"\n        ref=\"searchBar\"\n        :placeholder=\"!animationVisibility ? placeholder : ''\"\n        name=\"languageSearch\"\n        :id=\"`${id}`\"\n        class=\"linear background-primary block w-full rounded-lg border border-gray-900 outline-none transition-all delay-150 dark:border-gray-200\"\n        :class=\"[\n          {\n            'px-6 py-4 sm:py-5': props.isFullSize //Code page\n          },\n          {\n            'h-full px-6 py-4': !props.isFullSize && !props.isMini\n          },\n          {\n            'max-w-80 border-opacity-15 py-2 pe-6 ps-2.5 dark:border-opacity-30': props.isMini\n          },\n          {\n            'section-tertiary': props.isMini && !showingMobileInputTab //Only if mini AND not mobile IDE view\n          },\n          {\n            'section-quaternary ': props.isWithAnimation\n          },\n          {\n            'bg-transparent text-[14px]': isIdeView //IDE header\n          },\n          {\n            'dark:section-primary bg-white ': props.isIdeMobileNav //IDE header\n          },\n          {\n            'section-secondary py-2': showingMobileInputTab //Mobile IDE\n          }\n        ]\"\n        v-model=\"searchTerm\"\n        @click=\"showDropdown = !showDropdown\"\n      />\n      <div\n        v-if=\"animationVisibility\"\n        @click=\"removeAutoSlide\"\n        :class=\"{ fadeOut: fadeEffect === 'fadeOut', fadeIn: fadeEffect === 'fadeIn' }\"\n        class=\"absolute left-0 top-0 flex h-full w-full items-center px-2 py-1.5\"\n        :id=\"MOBILEIDENAVIGATIONIDS.CODESEARCHBARID\"\n      >\n        <img :src=\"autoSlideItem.icon\" alt=\"language logo\" class=\"mr-2 h-8 w-8 p-1\" />\n        <span :id=\"MOBILEIDENAVIGATIONIDS.CODESEARCHBARID\" class=\"mr-8 truncate text-sm\">{{\n          autoSlideItem.displayName\n        }}</span>\n      </div>\n    </div>\n\n    <!-- Dropdown -->\n    <div\n      v-if=\"showDropdown\"\n      id=\"codeSearchDropdown\"\n      class=\"absolute right-0 z-40 mt-[1px] w-full min-w-36 rounded-lg p-3 lg:left-0\"\n      :class=\"[\n        {\n          'w-full': links.length > 10\n        },\n        {\n          'sm:w-full md:max-w-md': links.length < 10\n        },\n        {\n          'w-auto': props.isMini\n        },\n        {\n          'background-primary stroke-primary-default border ': props.isWithAnimation\n        },\n        {\n          'section-quaternary ': !showingMobileInputTab // When not mobile ide view\n        },\n        {\n          'section-secondary': showingMobileInputTab // Mobile IDE language bar\n        }\n      ]\"\n    >\n      <div\n        class=\"max-h-60 overflow-y-auto md:grid\"\n        :class=\"\n          props.isFullSize && links.length > 10\n            ? 'gap-3 md:grid-cols-2 lg:grid-cols-3'\n            : 'md:grid-cols-1'\n        \"\n      >\n        <button\n          v-for=\"(item, indx) in links\"\n          :key=\"indx\"\n          class=\"w-full\"\n          @click=\"() => startCoding(item as ILanguage)\"\n          id=\"codeSearchDropdown\"\n        >\n          <div\n            class=\"text-low pointer-events-none w-full truncate pt-2 text-left text-sm font-medium\"\n          >\n            {{ item.categoryText }}\n          </div>\n          <div\n            v-if=\"!props.isMini && !item.categoryText\"\n            class=\"hover:section-secondary flex items-center justify-between rounded-md px-2 py-3\"\n          >\n            <div>\n              <!-- Dark -->\n              <img\n                :src=\"(item as ILanguage).darkIcon ? (item as ILanguage).darkIcon : (item as ILanguage).icon\"\n                :alt=\"(item as ILanguage).displayName\"\n                class=\"light:hidden me-2 w-8 dark:inline-block\"\n              />\n              <!-- Light -->\n              <img\n                v-if=\"(item as ILanguage).darkIcon\"\n                :src=\"(item as ILanguage).icon\"\n                :alt=\"(item as ILanguage).displayName\"\n                class=\"light:inline-block me-2 w-8 dark:hidden\"\n              />\n              <span class=\"inline-block text-sm text-text-primary dark:text-text-primary-dark\">{{\n                (item as ILanguage).displayName\n              }}</span>\n            </div>\n            <span class=\"inline-block text-[10px]\"\n              >Code Now\n              <FontAwesomeIcon\n                icon=\"fa-arrow-right\"\n                class=\"w-3 text-text-primary dark:text-text-primary-dark\"\n              />\n            </span>\n            <!-- Empty message -->\n          </div>\n          <div\n            v-if=\"props.isMini && !item.categoryText\"\n            class=\"hover:surface-secondary-base hover:text-high text-low flex items-center justify-between overflow-x-clip rounded-md px-2 py-3\"\n          >\n            <div class=\"flex items-center justify-center gap-5\">\n              <!-- Dark -->\n              <img\n                v-if=\"isDefaultLightMode\"\n                :src=\"(item as ILanguage).darkIcon ? (item as ILanguage).darkIcon : (item as ILanguage).icon\"\n                :alt=\"(item as ILanguage).displayName\"\n                class=\"light:hidden h-5 w-5 dark:inline-block\"\n              />\n              <!-- Light -->\n              <img\n                v-if=\"!isDark\"\n                :src=\"(item as ILanguage).icon\"\n                :alt=\"(item as ILanguage).displayName\"\n                class=\"light:inline-block h-5 w-5 dark:hidden\"\n              />\n              <span class=\"inline-block truncate text-sm\">{{\n                (item as ILanguage).displayName\n              }}</span>\n            </div>\n            <!-- Empty message -->\n          </div>\n        </button>\n        <p v-if=\"links.length == 0\" class=\"text-secondary text-sm\">No language found.</p>\n      </div>\n    </div>\n    <div\n      v-if=\"!searchTerm\"\n      :class=\"isMini ? 'right-2.5' : 'right-5'\"\n      class=\"pointer-events-none absolute inset-y-0 flex items-center pl-3\"\n    >\n      <FontAwesomeIcon\n        icon=\"fa-magnifying-glass\"\n        class=\"h-4 w-4\"\n        :class=\"isIdeView ? 'sm:hidden xl:block' : ''\"\n      />\n    </div>\n    <button\n      v-if=\"searchTerm\"\n      @click=\";(searchTerm = ''), (showDropdown = false)\"\n      class=\"absolute inset-y-0 right-0 top-0 flex h-full items-center pr-3\"\n    >\n      <FontAwesomeIcon icon=\"fa-circle-xmark\" class=\"h-5 w-5\" />\n    </button>\n  </div>\n  <!-- Featured language icons -->\n  <div class=\"flex w-full flex-col justify-between gap-3 sm:flex-row\" v-if=\"!props.isMini\">\n    <a v-if=\"props.isFullSize\" class=\"text-xs underline\" href=\"#suggestALangauge\"\n      >Suggest a Language</a\n    >\n  </div>\n</template>\n\n<style scoped>\n/* For webkit-based browsers (Chrome, Safari) */\n#codeSearchDropdown ::-webkit-scrollbar {\n  width: 8px;\n  /* Adjust width as needed */\n}\n\n#codeSearchDropdown ::-webkit-scrollbar-thumb {\n  background-color: #747474;\n  /* Set the background color of the thumb */\n}\n\n/* For Firefox and some newer browsers */\n/* Note: This property might not be supported in all browsers */\n/* .scrollbar-color: #555 #fff; */\n/* Set thumb color and track color */\n.fadeOut {\n  -webkit-animation: fadeOut 2s ease-in alternate;\n  -moz-animation: fadeOut 2s ease-in alternate;\n  animation: fadeOut 2s ease-in alternate;\n}\n\n.fadeIn {\n  -webkit-animation: fadeIn 2s ease-in alternate;\n  -moz-animation: fadeIn 2s ease-in alternate;\n  animation: fadeIn 2s ease-in alternate;\n}\n\n@keyframes fadeOut {\n  0% {\n    opacity: 1;\n  }\n\n  50% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 0;\n  }\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n\n  50% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n</style>\n"],"names":["id","useId","props","__props","router","useRouter","ideStore","useIdeStore","jdroidStore","useJdroidStore","searchTerm","ref","languages","languagesItems","langauge","a","b","showDropdown","isIdeView","computed","showingMobileInputTab","IDEVIEWTABS_MOBILE","links","o","projectsService","placeholder","isDefaultLightMode","clickEventHandler","event","searchBarExculseTargetIds","autoSlideIndex","autoSlideItem","fadeEffect","animationVisibility","searchBar","autoSlide","removeAutoSlide","autoSlideInterval","resolve","startCoding","item","onMounted","onUnmounted"],"mappings":"g5CAcM,MAAAA,EAAKC,GAAM,YAAa,EAAI,EAE5BC,EAAQC,EAuBRC,EAASC,IAETC,EAAWC,IAEXC,EAAcC,IAEdC,EAAaC,EAAI,EAAE,EACnBC,EAAyB,CAAC,GAAGC,CAAc,EAC9C,OAAQC,GACA,CAACA,EAAS,UAClB,EACA,KAAK,CAACC,EAAcC,IAAkBD,EAAE,YAAcC,EAAE,YAAc,EAAI,EAAG,EAE1EC,EAAeN,EAAI,EAAK,EAExBO,EAAYC,EAAS,IAClBb,EAAS,SACjB,EAEKc,EAAwBD,EAAS,IAC9Bb,EAAS,kBAAoBe,EAAmB,KACxD,EAEKC,EAAQH,EAAS,IACjBT,EAAW,OAASA,EAAW,MAAM,SAAW,GACtCE,EAAU,OAAQW,GACrBA,EAAE,WAAW,SAASb,EAAW,MAAM,aAAa,CAC5D,EAGMc,EAAgB,uBAAuBZ,CAAS,CAE1D,EAEKa,EAAcN,EAAS,IACpBjB,EAAM,OAAS,kBAAoB,kCAC3C,EAEKwB,EAAqBP,EAAS,IAC9Bb,EAAS,WACGA,GAAA,YAAAA,EAAU,YAAa,OAGhC,EACR,EAMKqB,EAAqBC,GAAe,CAC5BC,GAA0B,UAAW7B,GAAOA,IAAO4B,EAAM,OAAO,EAAE,IAClE,IACNX,EAAa,QACXW,EAAM,OAAO,IAAM,qBACrBX,EAAa,MAAQ,GAErBA,EAAa,MAAQ,GAG3B,EAQIa,EAAiBnB,EAAY,CAAC,EAC9BoB,EAAgBpB,EAAe,CACnC,KAAMC,EAAUkB,EAAe,KAAK,EAAE,KACtC,YAAalB,EAAUkB,EAAe,KAAK,EAAE,WAAA,CAC9C,EACKE,EAAarB,EAAY,EAAE,EAC3BsB,EAAsBtB,EAAaT,EAAM,eAAe,EACxDgC,EAAiBvB,EAAI,IAAI,EAKzBwB,EAAY,IAAY,CAC5BF,EAAoB,MAAQ,GAC5BD,EAAW,MAAQ,SACnBF,EAAe,QAAUlB,EAAU,OAAS,EACvCkB,EAAe,MAAQ,EACxBA,EAAe,QACnBC,EAAc,MAAM,KAAOnB,EAAUkB,EAAe,KAAK,EAAE,KAC3DC,EAAc,MAAM,YAAcnB,EAAUkB,EAAe,KAAK,EAAE,YAElE,WAAW,IAAM,CACfE,EAAW,MAAQ,WAClB,GAAI,CAAA,EAMHI,EAAkB,SAAY,CAClCF,EAAU,MAAM,QAChB,cAAcG,CAAiB,EAC/BJ,EAAoB,MAAQ,GAC5B,MAAM,IAAI,QAASK,GAAY,WAAWA,EAAS,GAAG,CAAC,EACvDrB,EAAa,MAAQ,EAAA,EAGnB,IAAAoB,EAKE,MAAAE,EAAc,MAAOC,GAAoB,CACxCA,EAAK,eACJlC,EAAS,UACXE,EAAY,uBAAuBgC,CAAI,GAEvChC,EAAY,uBAAuBgC,CAAI,EACvCpC,EAAO,KAAK,eAAe,GAE/B,EAGF,OAAAqC,EAAU,IAAM,CACL,SAAA,iBAAiB,QAASd,CAAiB,EACpDU,EAAoBnC,EAAM,iBAAmB,YAAYiC,EAAW,GAAI,CAAA,CACzE,EAEDO,EAAY,IAAM,CACP,SAAA,oBAAoB,QAASf,CAAiB,CACvD,CACD"}