{"version":3,"file":"CJ4eAuWM.js","sources":["../../../../components/blog/SearchHeader.vue"],"sourcesContent":["<template>\n  <SearchHeaderForm\n    ref=\"searchHeader\"\n    @update:search-term=\"(v) => (searchTerm = v)\"\n  />\n\n  <Drawer\n    ref=\"searchResults\"\n    :max-width=\"{ md: '100%', lg: '100%', xl: '100%' }\"\n    :height=\"drawerHeight\"\n  >\n    <div class=\"search-results\">\n      <GridContainer>\n        <GridItem class=\"search-results-wrapper\">\n          <div class=\"search-title\">\n            <h2>{{ t(\"drawer.title\") }}</h2>\n            <div class=\"post-number\" v-if=\"nFound\">\n              {{ t(\"drawer.postNumber\", { n: nFound }) }}\n            </div>\n          </div>\n          <div class=\"search-body\" :style=\"{ height: scrollHeight }\">\n            <Transition name=\"fade\" mode=\"out-in\">\n              <div\n                class=\"search-body-wrapper\"\n                v-if=\"posts.length && status == 'success'\"\n              >\n                <PostPreview\n                  v-for=\"post in posts\"\n                  :post=\"post\"\n                  :show-author=\"false\"\n                  :show-read-time=\"false\"\n                />\n              </div>\n              <div class=\"search-body-empty\" v-else-if=\"status == 'success'\">\n                {{ t(\"drawer.empty\", { search: searchTerm }) }}\n              </div>\n              <LoadingSpinner v-else />\n            </Transition>\n          </div>\n          <div class=\"search-footer\" v-if=\"searchTerm\">\n            <CjaButton\n              :type=\"'primary'\"\n              :href=\"`/blog/pesquisa?search=${searchTerm}`\"\n              :alt-anchor=\"NuxtLink\"\n            >\n              {{ t(\"drawer.btn\") }}\n            </CjaButton>\n          </div>\n        </GridItem>\n      </GridContainer>\n    </div>\n  </Drawer>\n</template>\n\n<script lang=\"ts\" setup>\nimport { NuxtLink } from \"#components\";\nimport {\n  CjaButton,\n  Drawer,\n  GridContainer,\n  GridItem,\n  LoadingSpinner,\n} from \"cja-phoenix\";\nimport SearchHeaderForm from \"./SearchHeaderForm.vue\";\nimport { useSearchPosts } from \"~/composables/storyblok/useSearchPosts\";\n\nconst { t } = useI18n();\n\nconst searchResults = ref();\nconst searchHeader = ref();\nconst searchTerm = ref();\n\nconst drawerHeight = ref();\nconst scrollHeight = ref();\n\nconst setDrawerHeight = () => {\n  const drawerHeightNumber =\n    window.innerHeight -\n    (searchHeader.value.$el.offsetHeight + searchHeader.value.$el.offsetTop);\n\n  drawerHeight.value = `${drawerHeightNumber}px`;\n\n  scrollHeight.value = `${drawerHeightNumber - 178}px`;\n};\n\nconst { status, posts, nFound } = useSearchPosts(searchTerm);\n\nconst disableScroll = () => {\n  document.querySelectorAll(\"html, body\").forEach((el) => {\n    (el as HTMLElement).style.overflow = \"hidden\";\n  });\n};\n\nconst enableScroll = () => {\n  document.querySelectorAll(\"html, body\").forEach((el) => {\n    (el as HTMLElement).style.overflow = \"\";\n  });\n};\n\nwatch(\n  () => searchTerm.value,\n  (n) => {\n    if (n && !searchResults.value.active) {\n      window.scrollTo({\n        top: 0,\n        behavior: \"smooth\",\n      });\n\n      searchResults.value.openDrawer();\n\n      disableScroll();\n    } else if (!n && searchResults.value.active) {\n      searchResults.value.closeDrawer();\n\n      enableScroll();\n    }\n  }\n);\n\nonMounted(() => {\n  window.addEventListener(\"resize\", setDrawerHeight);\n  setDrawerHeight();\n});\n\nonUnmounted(() => {\n  window.removeEventListener(\"resize\", setDrawerHeight);\n  enableScroll();\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.search-results {\n  height: 100%;\n  background: $white;\n  padding: 24px 0;\n\n  .search-results-wrapper {\n    padding-bottom: 84px;\n\n    .search-title {\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      gap: 16px;\n      align-items: center;\n      margin-bottom: 16px;\n\n      h2 {\n        font-size: 24px;\n        line-height: 30px;\n        margin: 0;\n      }\n\n      .post-number {\n        font-size: 14px;\n        line-height: 18px;\n      }\n    }\n\n    .search-body {\n      overflow-y: auto;\n\n      .search-body-wrapper {\n        display: grid;\n        grid-template-columns: 1fr;\n        gap: 16px;\n\n        @media screen and (min-width: $break-md-min) {\n          grid-template-columns: repeat(2, 1fr);\n        }\n\n        @media screen and (min-width: $break-lg-min) {\n          grid-template-columns: repeat(3, 1fr);\n        }\n\n        @media screen and (min-width: $break-xl-min) {\n          grid-template-columns: repeat(4, 1fr);\n        }\n      }\n\n      .search-body-empty {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 100%;\n      }\n\n      .spinner {\n        margin: 32px auto 0;\n      }\n    }\n\n    .search-footer {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      bottom: 0;\n      padding: 24px;\n      display: flex;\n      justify-content: center;\n      box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);\n      background: $white;\n    }\n  }\n}\n\n:deep(.drawer-container) {\n  transition-duration: 0s;\n}\n\n.fade-enter-active,\n.fade-leave-active {\n  transition: all 0.3s ease-in-out;\n}\n\n.fade-enter-to,\n.fade-leave-from {\n  opacity: 1;\n}\n\n.fade-enter-from,\n.fade-leave-to {\n  opacity: 0;\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"title\": \"Blog\",\n    \"description\": \"Dicas, artigos e ferramentas para gerir as tuas finanças pessoais de forma inteligente.\",\n    \"input\": {\n      \"search\": {\n        \"placeholder\": \"Pesquisa um tópico\"\n      }\n    },\n    \"drawer\": {\n      \"title\": \"Resultados\",\n      \"postNumber\": \"{n} artigos\",\n      \"btn\": \"Ver todos os resultados\",\n      \"empty\": \"Não existe nenhum artigo para \\\"{search}\\\"\"\n    }\n  }\n}\n</i18n>\n"],"names":["t","useI18n","searchResults","ref","searchHeader","searchTerm","drawerHeight","scrollHeight","setDrawerHeight","drawerHeightNumber","status","posts","nFound","useSearchPosts","disableScroll","el","enableScroll","watch","n","onMounted","onUnmounted"],"mappings":"0gBAkEM,KAAA,CAAE,EAAAA,CAAE,EAAIC,EAAQ,EAEhBC,EAAgBC,EAAI,EACpBC,EAAeD,EAAI,EACnBE,EAAaF,EAAI,EAEjBG,EAAeH,EAAI,EACnBI,EAAeJ,EAAI,EAEnBK,EAAkB,IAAM,CACtB,MAAAC,EACJ,OAAO,aACNL,EAAa,MAAM,IAAI,aAAeA,EAAa,MAAM,IAAI,WAEnDE,EAAA,MAAQ,GAAGG,CAAkB,KAE7BF,EAAA,MAAQ,GAAGE,EAAqB,GAAG,IAClD,EAEM,CAAE,OAAAC,EAAQ,MAAAC,EAAO,OAAAC,CAAO,EAAIC,EAAeR,CAAU,EAErDS,EAAgB,IAAM,CAC1B,SAAS,iBAAiB,YAAY,EAAE,QAASC,GAAO,CACrDA,EAAmB,MAAM,SAAW,QAAA,CACtC,CACH,EAEMC,EAAe,IAAM,CACzB,SAAS,iBAAiB,YAAY,EAAE,QAASD,GAAO,CACrDA,EAAmB,MAAM,SAAW,EAAA,CACtC,CACH,EAEA,OAAAE,EACE,IAAMZ,EAAW,MAChBa,GAAM,CACDA,GAAK,CAAChB,EAAc,MAAM,QAC5B,OAAO,SAAS,CACd,IAAK,EACL,SAAU,QAAA,CACX,EAEDA,EAAc,MAAM,WAAW,EAEjBY,EAAA,GACL,CAACI,GAAKhB,EAAc,MAAM,SACnCA,EAAc,MAAM,YAAY,EAEnBc,EAAA,EACf,CAEJ,EAEAG,EAAU,IAAM,CACP,OAAA,iBAAiB,SAAUX,CAAe,EACjCA,EAAA,CAAA,CACjB,EAEDY,EAAY,IAAM,CACT,OAAA,oBAAoB,SAAUZ,CAAe,EACvCQ,EAAA,CAAA,CACd"}