{"version":3,"file":"ArtworkGrid-D_EliFKz.js","sources":["../../src/components/artwork/ArtworkGrid.vue"],"sourcesContent":["<template>\n  <section :class=\"$style.section\">\n    <article v-for=\"(item, key) in data\" :key=\"key\">\n      <router-link\n        v-if=\"item.featuredImage\"\n        :to=\"{ name: 'ArtworkPost', params: { slugname: item.slug } }\"\n      >\n        <picture>\n          <img\n            :alt=\"item.featuredImage.node.altText\"\n            :src=\"proxySource(item.featuredImage.node.sourceUrl, getImageSize)\"\n            :srcset=\"item.imageSrcset\"\n            loading=\"lazy\"\n            sizes=\"(min-width: 960px) 470px, 100vw\"\n          />\n        </picture>\n        <header class=\"space-12-16-above\">\n          <h2 v-if=\"showArtist\" class=\"heading-4\" v-html=\"item.artists.nodes[0].name\"></h2>\n          <component\n            :is=\"showArtist ? 'h3' : 'h2'\"\n            :class=\"showArtist ? 'heading-5' : 'heading-4'\"\n            v-html=\"item.title\"\n          ></component>\n        </header>\n      </router-link>\n    </article>\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { Artwork } from '@/types/common.interface';\nimport { computed } from 'vue';\nimport { useImageProxy, useScreenSize } from '@/composables/Common.js';\n\nwithDefaults(\n  defineProps<{\n    data: Array<Artwork>;\n    showArtist?: boolean;\n  }>(),\n  { showArtist: true },\n);\n\nconst { isMobile } = useScreenSize();\nconst { proxySource } = useImageProxy();\n\nconst getImageSize = computed(() => (isMobile() ? 420 : 270));\n</script>\n\n<style lang=\"scss\" module>\n.section {\n  a {\n    display: block;\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: underline;\n    }\n    &:focus {\n      background-color: transparent;\n\n      div,\n      header {\n        @include focus-outline;\n      }\n\n      header {\n        h3,\n        h4 {\n          text-decoration: none;\n        }\n      }\n    }\n  }\n  div,\n  header {\n    @include outline-safari;\n  }\n  h3,\n  h4 {\n    margin-top: 0;\n  }\n  img {\n    bottom: initial;\n  }\n  picture {\n    display: block;\n    line-height: 0;\n  }\n}\n\n@media (min-width: $break-point) {\n  .section {\n    @include grid;\n    grid-row-gap: 3rem;\n\n    article {\n      grid-column: span 4;\n      margin-top: 0;\n    }\n  }\n}\n</style>\n"],"names":["isMobile","useScreenSize","proxySource","useImageProxy","getImageSize","computed"],"mappings":"+UA0CM,KAAA,CAAE,SAAAA,CAAS,EAAIC,EAAc,EAC7B,CAAE,YAAAC,CAAY,EAAIC,EAAc,EAEhCC,EAAeC,EAAS,IAAOL,EAAS,EAAI,IAAM,GAAI"}