{"version":3,"file":"8XCteuRt.js","sources":["../../../../components/blog/CategoryPicker.vue","../../../../composables/storyblok/useCategoryPosts.ts"],"sourcesContent":["<template>\n  <GridContainer class=\"category-picker\">\n    <GridItem>\n      <h2>{{ t(\"title\") }}</h2>\n      <p>{{ t(\"subtitle\") }}</p>\n\n      <div class=\"category-picker-container\" v-if=\"categories.length\">\n        <div class=\"category-picker-wrapper\">\n          <button\n            v-for=\"category in categories\"\n            class=\"category\"\n            :class=\"{ active: category == activeCategory }\"\n            @click=\"activeCategory = category\"\n          >\n            {{ category }}\n          </button>\n\n          <button\n            class=\"category\"\n            :class=\"{ active: !activeCategory }\"\n            @click=\"activeCategory = ''\"\n          >\n            {{ t(\"btn.all-posts\") }}\n          </button>\n        </div>\n      </div>\n    </GridItem>\n  </GridContainer>\n</template>\n\n<script lang=\"ts\" setup>\nimport { GridContainer, GridItem } from \"cja-phoenix\";\n\ndefineProps<{\n  categories: string[];\n}>();\n\nconst { t } = useI18n();\n\nconst activeCategory = defineModel({\n  required: true,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.category-picker {\n  padding-top: 32px;\n  padding-bottom: 32px;\n\n  h2 {\n    font-size: 24px;\n    font-weight: 700;\n    line-height: 30px;\n    text-align: center;\n    margin: 0 0 8px;\n  }\n\n  p {\n    font-size: 18px;\n    line-height: 27px;\n    text-align: center;\n    margin: 0 0 32px;\n  }\n\n  .category-picker-container {\n    @media screen and (max-width: $break-md-max) {\n      overflow-x: auto;\n    }\n  }\n\n  .category-picker-wrapper {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n\n    @media screen and (max-width: $break-md-max) {\n      min-width: 1150px;\n      padding-bottom: 24px;\n    }\n\n    @media screen and (min-width: $break-lg-min) {\n      gap: 8px;\n      justify-content: center;\n      padding-bottom: 0;\n    }\n\n    .category {\n      cursor: pointer;\n      border: none;\n      padding: 14px 20px;\n      border-radius: 28px;\n      background: $extra-light-blue;\n      color: $main-blue;\n      font-size: 16px;\n      line-height: 20px;\n      transition: color 0.3s ease-in-out, background 0.3s ease-in-out;\n\n      @media screen and (min-width: $break-lg-min) {\n        padding: 8px 20px;\n        border-radius: 16px;\n      }\n\n      &:hover {\n        text-decoration: none;\n        background: $main-blue;\n        color: $white;\n      }\n\n      &.active {\n        background: $extra-dark-blue;\n        color: $white;\n      }\n    }\n  }\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"title\": \"Sabe tudo por tema\",\n    \"subtitle\": \"Escolhe um tema\",\n    \"btn\": {\n      \"all-posts\": \"Todos os Artigos\"\n    }\n  }\n}\n</i18n>\n","import { Post } from \"@/types/Post\";\nimport { Status } from \"~/types/CustomFetch\";\nimport { mapResultToPosts } from \"~/utils/storyblok/mapResultToPosts\";\n\nexport const useCategoryPosts = (category: Ref<string>) => {\n  const status: Ref<Status> = ref(\"idle\");\n  const { storyblokVersion } = useRuntimeConfig().public;\n\n  const posts: Ref<Post[]> = ref([]);\n  const page = ref(1);\n  const totalPages = ref(0);\n\n  watch(category, () => {\n    page.value = 1;\n  });\n\n  watch(\n    [page, category],\n    () => {\n      status.value = \"pending\";\n\n      useStoryblokApi()\n        .getStories({\n          version: storyblokVersion as \"draft\" | \"published\",\n          content_type: \"post\",\n          sort_by: \"first_published_at:desc\",\n          page: page.value,\n          per_page: 12,\n          resolve_links: \"url\",\n          resolve_relations: [\"post.author\", \"post.specialist\"],\n          filter_query: (() => {\n            const filter: {\n              category?: any;\n              postType: any;\n            } = {\n              postType: {\n                in: \"post\",\n              },\n            };\n\n            if (category.value) {\n              filter.category = {\n                in: category.value,\n              };\n            }\n\n            return filter;\n          })(),\n        })\n        .then((r) => {\n          const mappedResult = mapResultToPosts(r);\n\n          posts.value = mappedResult.posts;\n          totalPages.value = mappedResult.totalPages;\n\n          status.value = \"success\";\n        })\n        .catch(() => {\n          status.value = \"error\";\n        });\n    },\n    {\n      immediate: true,\n    }\n  );\n\n  return {\n    status,\n    posts,\n    page,\n    totalPages,\n  };\n};\n"],"names":["t","useI18n","activeCategory","_useModel","__props","useCategoryPosts","category","status","ref","storyblokVersion","useRuntimeConfig","posts","page","totalPages","watch","useStoryblokApi","filter","r","mappedResult","mapResultToPosts"],"mappings":"8cAqCM,KAAA,CAAE,EAAAA,CAAE,EAAIC,EAAQ,EAEhBC,EAAiBC,EAAWC,EAAA,YAEjC,0zBCrCYC,EAAoBC,GAA0B,CACnD,MAAAC,EAAsBC,EAAI,MAAM,EAChC,CAAE,iBAAAC,CAAA,EAAqBC,EAAA,EAAmB,OAE1CC,EAAqBH,EAAI,EAAE,EAC3BI,EAAOJ,EAAI,CAAC,EACZK,EAAaL,EAAI,CAAC,EAExB,OAAAM,EAAMR,EAAU,IAAM,CACpBM,EAAK,MAAQ,CAAA,CACd,EAEDE,EACE,CAACF,EAAMN,CAAQ,EACf,IAAM,CACJC,EAAO,MAAQ,UAEfQ,EAAA,EACG,WAAW,CACV,QAASN,EACT,aAAc,OACd,QAAS,0BACT,KAAMG,EAAK,MACX,SAAU,GACV,cAAe,MACf,kBAAmB,CAAC,cAAe,iBAAiB,EACpD,cAAe,IAAM,CACnB,MAAMI,EAGF,CACF,SAAU,CACR,GAAI,MAAA,CAER,EAEA,OAAIV,EAAS,QACXU,EAAO,SAAW,CAChB,GAAIV,EAAS,KACf,GAGKU,CACN,GAAA,CAAA,CACJ,EACA,KAAMC,GAAM,CACL,MAAAC,EAAeC,EAAiBF,CAAC,EAEvCN,EAAM,MAAQO,EAAa,MAC3BL,EAAW,MAAQK,EAAa,WAEhCX,EAAO,MAAQ,SAAA,CAChB,EACA,MAAM,IAAM,CACXA,EAAO,MAAQ,OAAA,CAChB,CACL,EACA,CACE,UAAW,EAAA,CAEf,EAEO,CACL,OAAAA,EACA,MAAAI,EACA,KAAAC,EACA,WAAAC,CACF,CACF"}