{"version":3,"file":"search-box-D7ZOgDO5.js","sources":["../../../app/javascript/components/shared/search-box.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ref, onMounted } from 'vue';\nimport axios from '@/api/axios';\n\ninterface Props {\n  keywords: string;\n}\n\nconst props = defineProps<Props>();\nconst searchTerm = ref('');\nconst selectedCountry = ref('');\nconst categories = ref([]);\nconst visible = ref(false);\nconst filteredCategories = ref([]);\nconst isActive = ref<boolean>(false);\n\nconst toggleVisible = (e: Event) => {\n  visible.value = false;\n  isActive.value = false;\n};\n\nconst searchCategories = () => {\n  isActive.value = true;\n  if (searchTerm.value === '') {\n    filteredCategories.value = [];\n    return;\n  }\n  visible.value = true;\n  let matches = 0;\n  let keywords = hankakuToZenkaku(searchTerm.value);\n  keywords = hiraToKana(keywords);\n  filteredCategories.value = categories.value.filter((category) => {\n    const searchTarget = [category[0], category[2]].filter((v) => v);\n    if (\n      searchTarget.some((value) => value.includes(keywords)) &&\n      matches < 10\n    ) {\n      matches++;\n      return category;\n    }\n  });\n};\n\nconst selectCountry = (country) => {\n  selectedCountry.value = country;\n  searchTerm.value = country;\n  visible.value = false;\n};\n\nconst toggleSearchBox = () => {\n  isActive.value = !isActive.value;\n};\n\nconst hiraToKana = (string: string) => {\n  return string.replace(/[\\u3041-\\u3096]/g, (match) => {\n    var chr = match.charCodeAt(0) + 0x60;\n    return String.fromCharCode(chr);\n  });\n};\n\nconst hankakuToZenkaku = (str: string) => {\n  return str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, (s) => {\n    return String.fromCharCode(s.charCodeAt(0) - 0xfee0);\n  });\n};\n\nonMounted(async () => {\n  if (props.keywords !== '') {\n    searchTerm.value = props.keywords;\n  }\n  await axios.get(`/api/v1/categories/names`).then((res) => {\n    categories.value = res.data;\n  });\n});\n</script>\n\n<template lang=\"pug\">\ndiv.wrapper(:class=\"{'is-active': isActive}\")\n  .backdrop(@click=\"toggleVisible()\" v-if=\"isActive\")\n  form.c-shared-elements-searchbox(action=\"/search\" method=\"get\")\n    input(\n      type=\"text\"\n      id=\"search\"\n      name=\"keywords\"\n      autocomplete=\"off\"\n      v-model=\"searchTerm\"\n      @keyup=\"searchCategories\"\n      @focus=\"searchCategories\"\n      @input=\"searchCategories\"\n      placeholder=\"キーワードで探す\")\n    .categories(v-if=\"filteredCategories.length > 0 && visible\")\n      h2 カテゴリ\n      ul.lists\n        li(v-for=\"country in filteredCategories\" :key=\"country[0]\" @click=\"selectCountry(country[0])\")\n          a(:href=\"`/categories/${country[1]}?keywords=${country[0]}`\") {{ country[0] }}\n    button(type=\"submit\")\n  i.icon.icon-times-solid(v-on:click=\"toggleSearchBox()\")\ni.icon.icon-search-solid(v-on:click=\"toggleSearchBox()\")\n</template>\n\n<style lang=\"scss\" scoped>\n@import '@/stylesheets/foundation/variables';\n@import '@/stylesheets/foundation/mixins';\n.wrapper {\n  position: relative;\n  width: 30vw;\n  max-width: 500px;\n  @include tablet {\n    width: inherit;\n    display: none;\n  }\n  &.is-active {\n    @include tablet {\n      position: fixed;\n      top: 5px;\n      right: 0;\n      left: 0;\n      // bottom: 0;\n      display: flex;\n      background-color: #fff;\n      z-index: 9999;\n      padding: $space-xs;\n      align-items: center;\n      border-bottom: 1px solid #e9edf1;\n      & > form {\n        width: 100%;\n        margin-right: $space-xs;\n      }\n    }\n  }\n}\n\n.backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n\n.c-shared-elements-searchbox {\n  position: relative;\n}\n\n.icon-search-solid {\n  transform: rotateY(180deg);\n  scale: 0.85;\n  @include desktop {\n    display: none;\n  }\n}\n.icon-times-solid {\n  @include desktop {\n    display: none;\n  }\n}\n\n.categories {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  width: 120%;\n  border: 1px solid #ccc;\n  // padding: 12px;\n  background-color: #fff;\n  z-index: 1;\n  @include tablet {\n    width: 100%;\n  }\n\n  h2 {\n    padding: 10px;\n    font-size: 14px;\n    font-weight: bold;\n    background: $pale-cool;\n    // border-bottom: 1px solid #ccc;\n  }\n  ul.lists {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n    li {\n      padding: 0.8rem;\n      cursor: pointer;\n      font-size: 14px;\n      &:not(:last-child) {\n        border-bottom: 1px solid $border-secondary;\n      }\n      &:hover {\n        background: #eee;\n      }\n      a {\n        display: block;\n      }\n    }\n  }\n}\n</style>\n"],"names":["props","__props","searchTerm","ref","selectedCountry","categories","visible","filteredCategories","isActive","toggleVisible","e","searchCategories","matches","keywords","hankakuToZenkaku","hiraToKana","category","v","value","selectCountry","country","toggleSearchBox","string","match","chr","str","s","onMounted","__async","axios","res"],"mappings":"owBAQA,MAAMA,EAAQC,EACRC,EAAaC,EAAI,EAAE,EACnBC,EAAkBD,EAAI,EAAE,EACxBE,EAAaF,EAAI,CAAA,CAAE,EACnBG,EAAUH,EAAI,EAAK,EACnBI,EAAqBJ,EAAI,CAAA,CAAE,EAC3BK,EAAWL,EAAa,EAAK,EAE7BM,EAAiBC,GAAa,CAClCJ,EAAQ,MAAQ,GAChBE,EAAS,MAAQ,EAAA,EAGbG,EAAmB,IAAM,CAEzB,GADJH,EAAS,MAAQ,GACbN,EAAW,QAAU,GAAI,CAC3BK,EAAmB,MAAQ,GAC3B,MACF,CACAD,EAAQ,MAAQ,GAChB,IAAIM,EAAU,EACVC,EAAWC,EAAiBZ,EAAW,KAAK,EAChDW,EAAWE,EAAWF,CAAQ,EAC9BN,EAAmB,MAAQF,EAAW,MAAM,OAAQW,GAAa,CAG7D,GAFmB,CAACA,EAAS,CAAC,EAAGA,EAAS,CAAC,CAAC,EAAE,OAAQC,GAAMA,CAAC,EAEhD,KAAMC,GAAUA,EAAM,SAASL,CAAQ,CAAC,GACrDD,EAAU,GAEV,OAAAA,IACOI,CACT,CACD,CAAA,EAGGG,EAAiBC,GAAY,CACjChB,EAAgB,MAAQgB,EACxBlB,EAAW,MAAQkB,EACnBd,EAAQ,MAAQ,EAAA,EAGZe,EAAkB,IAAM,CACnBb,EAAA,MAAQ,CAACA,EAAS,KAAA,EAGvBO,EAAcO,GACXA,EAAO,QAAQ,mBAAqBC,GAAU,CACnD,IAAIC,EAAMD,EAAM,WAAW,CAAC,EAAI,GACzB,OAAA,OAAO,aAAaC,CAAG,CAAA,CAC/B,EAGGV,EAAoBW,GACjBA,EAAI,QAAQ,eAAiBC,GAC3B,OAAO,aAAaA,EAAE,WAAW,CAAC,EAAI,KAAM,CACpD,EAGH,OAAAC,EAAU,IAAYC,EAAA,sBAChB5B,EAAM,WAAa,KACrBE,EAAW,MAAQF,EAAM,UAE3B,MAAM6B,EAAM,IAAI,0BAA0B,EAAE,KAAMC,GAAQ,CACxDzB,EAAW,MAAQyB,EAAI,IAAA,CACxB,CAAA,EACF"}