{"version":3,"file":"CJ4dl2N9.js","sources":["../../../../storyblok/blog/content/Search.vue"],"sourcesContent":["<template>\n  <BlogSearchHeaderForm\n    ref=\"searchHeader\"\n    :search=\"searchTerm\"\n    @update:search-term=\"(v: any) => (searchTerm = v, page = 1)\"\n  />\n  <GridContainer class=\"search-container\">\n    <GridItem>\n      <div\n        class=\"search-results\"\n        ref=\"searchContainer\"\n        v-if=\"searchTerm || searchTag\"\n      >\n        <h3>\n          {{\n            t(`title.${searchTerm || searchTag ? \"search\" : \"empty\"}`, {\n              search: searchTerm || searchTag,\n            })\n          }}\n        </h3>\n        <div class=\"search-results-wrapper\">\n          <Transition name=\"fade\" mode=\"out-in\">\n            <BlogPostList\n              :posts=\"posts\"\n              :status=\"status\"\n              :empty-message=\"t('title.empty', { search: searchTerm })\"\n              v-if=\"posts.length && status != 'pending'\"\n            />\n            <LoadingSpinner v-else />\n          </Transition>\n          <BlogPagination\n            v-bind=\"{ page, pageTotal: totalPages }\"\n            :scroll-target=\"searchContainer\"\n            @change-page=\"(v) => (page = v)\"\n          />\n        </div>\n      </div>\n      <BlogCategoryNavigator\n        v-if=\"viewport.isLessThan('md')\"\n        :categories=\"categories\"\n      />\n      <BlogCategoryList v-else v-bind=\"{ categories }\" />\n      <BannerSlideshow :blok=\"blok.slideshow.content\" v-if=\"blok.slideshow\" />\n      <div class=\"rubric-list-container\" v-if=\"blok.featuredRubrics\">\n        <h3>{{ t(\"rubrics.title\") }}</h3>\n        <BlogRubricList :rubrics=\"blok.featuredRubrics\" />\n      </div>\n      <div class=\"tools-list-container\">\n        <h3>{{ t(\"tools.title\") }}</h3>\n        <BlogToolList :tools=\"blok.toolList.content.tools\" />\n      </div>\n      <div class=\"guides-list-container\">\n        <div class=\"title-container\">\n          <h3>{{ t(\"guides.title\") }}</h3>\n          <CjaButton\n            :type=\"'tertiary'\"\n            :icon=\"'m-cgg-icon--chevron-right'\"\n            :href=\"'/blog/guias'\"\n            :alt-anchor=\"NuxtLink\"\n          >\n            {{ t(\"guides.btn\") }}\n          </CjaButton>\n        </div>\n        <FeaturedGuidesList :guides=\"blok.featuredGuidesList.content.guides\" />\n      </div>\n    </GridItem>\n  </GridContainer>\n</template>\n\n<script lang=\"ts\" setup>\nimport { NuxtLink } from \"#components\";\nimport {\n  CjaButton,\n  GridContainer,\n  GridItem,\n  LoadingSpinner,\n} from \"cja-phoenix\";\nimport { useSearchPosts } from \"~/composables/storyblok/useSearchPosts\";\nimport { SearchStoryblok } from \"~/types/bloks\";\n\ndefineProps<{\n  blok: SearchStoryblok;\n  story: any;\n  categories: string[];\n}>();\n\nconst { t } = useI18n();\nconst route = useRoute();\nconst viewport = useViewport();\n\nconst searchContainer = ref();\nconst searchHeader = ref();\nconst searchTerm = ref(route.query.search as string);\nconst searchTag = ref(route.query.tag as string);\n\nconst { status, posts, page, totalPages } = useSearchPosts(\n  searchTerm,\n  searchTag\n);\n\nwatch(searchTerm, () => {\n  if (searchTag.value) searchTag.value = \"\";\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.search-container {\n  padding-top: 40px;\n  padding-bottom: 40px;\n\n  h3 {\n    margin: 0 0 24px;\n    @include blog-header;\n  }\n\n  .search-results {\n    margin-bottom: 80px;\n\n    .search-results-wrapper {\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    }\n\n    .spinner {\n      margin: 20px auto;\n    }\n  }\n}\n\n.slideshow,\n.category-list,\n.tools-list-container,\n.rubric-list-container,\n.guides-list-container {\n  margin-bottom: 40px;\n}\n\n.guides-list-container {\n  .title-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 24px;\n\n    h2 {\n      margin: 0;\n    }\n  }\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"title\": {\n      \"search\": \"Resultado da pesquisa \\\"{search}\\\"\",\n      \"empty\": \"Não existe nenhum artigo para \\\"{search}\\\"\"\n    },\n    \"rubrics\": {\n      \"title\": \"Rubricas\"\n    },\n    \"tools\": {\n      \"title\": \"Simula connosco\"\n    },\n    \"guides\": {\n      \"title\": \"Guias\",\n      \"btn\": \"Ver todos\"\n    }\n  }\n}\n</i18n>\n"],"names":["t","useI18n","route","useRoute","viewport","useViewport","searchContainer","ref","searchHeader","searchTerm","searchTag","status","posts","page","totalPages","useSearchPosts","watch"],"mappings":"y2BAsFM,KAAA,CAAE,EAAAA,CAAE,EAAIC,EAAQ,EAChBC,EAAQC,EAAS,EACjBC,EAAWC,EAAY,EAEvBC,EAAkBC,EAAI,EACtBC,EAAeD,EAAI,EACnBE,EAAaF,EAAIL,EAAM,MAAM,MAAgB,EAC7CQ,EAAYH,EAAIL,EAAM,MAAM,GAAa,EAEzC,CAAE,OAAAS,EAAQ,MAAAC,EAAO,KAAAC,EAAM,WAAAC,CAAe,EAAAC,EAC1CN,EACAC,CACF,EAEA,OAAAM,EAAMP,EAAY,IAAM,CAClBC,EAAU,QAAOA,EAAU,MAAQ,GAAA,CACxC"}