{"version":3,"file":"DfM69ELC.js","sources":["../../../../components/blog/PostList.vue"],"sourcesContent":["<template>\n  <div class=\"post-list\" :style=\"{ ...cssVars }\">\n    <Transition name=\"fade\" mode=\"out-in\">\n      <div\n        class=\"post-list-container\"\n        v-if=\"posts?.length && status == 'success'\"\n      >\n        <div class=\"post-list-wrapper\">\n          <PostPreview v-for=\"post in posts\" :post=\"post\" />\n        </div>\n      </div>\n      <div\n        class=\"empty-list-container\"\n        v-else-if=\"!posts?.length && status == 'success'\"\n      >\n        {{ emptyMessage || t(\"empty\") }}\n      </div>\n      <LoadingSpinner v-else />\n    </Transition>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Post } from \"@/types\";\nimport { LoadingSpinner } from \"cja-phoenix\";\n\nconst props = withDefaults(\n  defineProps<{\n    posts?: Post[];\n    emptyMessage?: string;\n    status: \"idle\" | \"pending\" | \"error\" | \"success\";\n    cols?: {\n      sm?: number;\n      md?: number;\n      lg?: number;\n      xl?: number;\n    };\n  }>(),\n  {\n    cols: () => ({\n      sm: 1,\n      md: 2,\n      lg: 3,\n      xl: 4,\n    }),\n  }\n);\n\nconst { t } = useI18n();\n\nconst cssVars = computed(() => ({\n  \"--sm-cols\": props.cols.sm,\n  \"--md-cols\": props.cols.md,\n  \"--lg-cols\": props.cols.lg,\n  \"--xl-cols\": props.cols.xl,\n}));\n</script>\n\n<style lang=\"scss\" scoped>\n.post-list {\n  .post-list-container {\n    .post-list-wrapper {\n      display: grid;\n      gap: 32px 24px;\n      grid-template-columns: repeat(var(--sm-cols), 1fr);\n\n      @media screen and (min-width: $break-md-min) {\n        grid-template-columns: repeat(var(--md-cols), 1fr);\n      }\n\n      @media screen and (min-width: $break-lg-min) {\n        grid-template-columns: repeat(var(--lg-cols), 1fr);\n      }\n\n      @media screen and (min-width: $break-xl-min) {\n        grid-template-columns: repeat(var(--xl-cols), 1fr);\n      }\n    }\n  }\n\n  .spinner {\n    margin: 32px auto;\n  }\n\n  .fade-enter-active,\n  .fade-leave-active {\n    transition: all 0.6s ease-in-out;\n  }\n\n  .fade-enter-from,\n  .fade-leave-to {\n    opacity: 0;\n  }\n\n  .fade-enter-to,\n  .fade-leave-from {\n    opacity: 1;\n  }\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"empty\": \"Não foram encontrados artigos\"\n  }\n}\n</i18n>\n"],"names":["props","__props","t","useI18n","cssVars","computed"],"mappings":"kZA0BA,MAAMA,EAAQC,EAsBR,CAAE,EAAAC,CAAE,EAAIC,EAAQ,EAEhBC,EAAUC,EAAS,KAAO,CAC9B,YAAaL,EAAM,KAAK,GACxB,YAAaA,EAAM,KAAK,GACxB,YAAaA,EAAM,KAAK,GACxB,YAAaA,EAAM,KAAK,EAAA,EACxB"}