{"version":3,"file":"ProductBlock-C6iq6Mnm.js","sources":["../../../../node-apps/site/src/components/shop/ProductPopover.vue","../../../../node-apps/site/src/components/shop/ProductBlock.vue"],"sourcesContent":["<template>\n  <div v-if=\"props.object\" class=\"product-content flex-column\">\n    <div class=\"product-detail\">\n      <ImageGallery\n        :images=\"props.object.images\"\n        :download=\"object.name\"\n        :alt=\"object.name\"\n      />\n      <div class=\"content\">\n        <RouterLink\n          :to=\"{\n            name: 'product-detail',\n            params: { slug: object.slug },\n            query: { back: props.back },\n          }\"\n          class=\"product-name\"\n        >\n          <h2>{{ props.object.name }}</h2>\n        </RouterLink>\n        <ProductPrice :object=\"props.object\" class=\"price\" />\n\n        <div class=\"categories\">\n          <div v-for=\"category of categoryLabels\" class=\"category-space\">\n            {{ category }}\n          </div>\n        </div>\n\n        <div class=\"add-row flex-row flex-align-center\">\n          <AddToCart expanded :object=\"props.object\" />\n        </div>\n        <RelatedProductsList\n          :object=\"props.object\"\n          :count=\"4\"\n          :setsOnly=\"true\"\n        />\n        <div class=\"remote-id\">{{ props.object.remote_id }}</div>\n      </div>\n    </div>\n    <div class=\"footer\" />\n  </div>\n  <div v-else-if=\"!shop.isReady\"></div>\n  <div v-else>\n    <h2>Product Not Found</h2>\n    {{ props.object }}\n  </div>\n</template>\n\n<route lang=\"json\">\n{\n  \"name\": \"product-detail\",\n  \"meta\": { \"fullWidth\": true }\n}\n</route>\n\n<script setup lang=\"ts\">\nimport ImageGallery from \"@/components/shop/ImageGallery.vue\";\nimport RelatedProductsList from \"@/components/shop/RelatedProductsList.vue\";\nimport type { Product } from \"@/stores/defs/shop_defs\";\nimport { useShopStore } from \"@/stores/shop\";\nimport { getCategoryLabels } from \"@/utils/shop\";\nimport { computed } from \"vue\";\nimport AddToCart from \"./AddToCart.vue\";\nimport ProductPrice from \"./ProductPrice.vue\";\n\nconst props = defineProps<{\n  object: Product;\n  back?: string;\n}>();\nconst shop = useShopStore();\n\nconst categoryLabels = computed(() => {\n  return getCategoryLabels(props.object);\n});\n</script>\n\n<style scoped>\n:deep(.related-products) {\n  background: white;\n  padding: 0 0 var(--md, 32px) 0;\n}\n:deep(.related-products h4) {\n  text-align: left;\n  text-transform: capitalize;\n  margin-bottom: var(--2XS, 8px);\n}\n\n:deep(.product-list) {\n  gap: var(--XS, 16px);\n  justify-content: left;\n}\n\n.product-detail {\n  max-width: 845px;\n  display: flex;\n  flex-direction: row;\n  /*padding: 0 var(--Sm);*/\n  /* margin: auto; */\n  gap: var(--sm, 24px);\n  :deep(.mini) {\n    width: 72px;\n  }\n  :deep(.mini img) {\n    height: 90px;\n    width: 72px;\n  }\n  :deep(.related-products .flex-row) {\n    gap: var(--XS, 8px);\n  }\n  :deep(.mini-name) {\n    display: none;\n  }\n  .related-products :deep(.flex-row .mini:nth-child(1)) {\n    margin-left: -24px;\n  }\n}\n.product-detail > * {\n  flex: 1 1 1px;\n}\n.product-name:hover h2 {\n  text-shadow: 0 0 1px black;\n}\n\nh2 {\n  color: var(--Black, #000);\n\n  /* Name of Piece */\n  font-family: Indivisible;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: normal;\n  text-align: left;\n  text-transform: none;\n}\n.small {\n  gap: 24px;\n}\n.small > img {\n  max-width: 72px;\n}\nimg.main {\n  width: 100%;\n  height: 432px;\n  aspect-ratio: 345 / 432;\n  object-fit: cover;\n}\n.add-row {\n  display: flex;\n  flex-direction: row;\n  gap: var(--XS, 16px);\n  margin: var(--md) 0;\n}\n.price {\n  color: var(--Black, #000);\n\n  /* Subhead 1 */\n  font-family: Indivisible;\n  font-size: 20px;\n  font-style: normal;\n  font-weight: 300;\n  line-height: normal;\n  padding-top: var(--2XS, 8px);\n}\n.remote-id {\n  color: var(--Black, #000);\n\n  /* Small Print */\n  font-family: Indivisible;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n.product-detail :deep(.content) {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  .categories {\n    margin: var(--md, 32px) 0 0 0;\n    font-size: 14px;\n    font-weight: 400;\n    padding: var(--2XS, 8px) 0;\n    .category-space {\n      padding: 0 var(--XS, 16px);\n      float: left;\n      border-right: 1px solid var(--50, #939598);\n    }\n    .category-space:first-child {\n      padding-left: 0;\n    }\n    .category-space:last-child {\n      padding-right: 0;\n      border-right: none;\n    }\n  }\n}\n</style>\n","<template>\n  <div\n    class=\"product-block flex-column\"\n    :class=\"{\n      'with-hover': props.object.images.length > 1,\n      [props.object.slug]: true,\n    }\"\n  >\n    <DebugBlock>\n      {{ props.object.remote_id }}<br />\n      {{ props.object.deployed.toISOString() }}<br />\n      {{\n        shop.objects.categories\n          .filter((c) => props.object.categories.includes(c.id))\n          .map((c) => c.name)\n          .join(\", \")\n      }}\n    </DebugBlock>\n    <a class=\"desktop-image\" href=\"#\">\n      <ThumbnailedImage\n        v-if=\"props.object.images.length > 0\"\n        @click.prevent=\"handleImageClick\"\n        :images=\"props.object.images[imageCycle % props.object.images.length]\"\n        :alt=\"props.object.name\"\n        class=\"primary-image\"\n      />\n      <div v-else class=\"empty\"></div>\n      <ThumbnailedImage\n        v-if=\"props.object.images.length > 1\"\n        @click.prevent=\"handleImageClick\"\n        :images=\"\n          props.object.images[(imageCycle + 1) % props.object.images.length]\n        \"\n        :alt=\"props.object.name\"\n        class=\"alternate-image\"\n      />\n      <div class=\"quick-look\">\n        <Button @click.prevent=\"showDialog\">\n          <span class=\"quick-look-text\">Quick Look</span>\n        </Button>\n      </div>\n    </a>\n    <Dialog\n      v-if=\"dialogAvailable\"\n      v-model:visible=\"dialogAvailable\"\n      :modal=\"true\"\n      :dismissable-mask=\"true\"\n      class=\"simple-dialog\"\n      ref=\"dialog\"\n    >\n      <template #container>\n        <ProductPopover :object=\"props.object\" :back=\"props.back\" />\n      </template>\n    </Dialog>\n    <div class=\"meta-row flex-row\">\n      <ProductPrice :object=\"object\" class=\"flex-static\" />\n      <RouterLink\n        :to=\"{\n          name: 'product-detail',\n          params: { slug: props.object.slug },\n          query: { back: props.back },\n        }\"\n        class=\"name flex-stretch\"\n      >\n        {{ props.object.name }}\n      </RouterLink>\n    </div>\n    <div class=\"add-row flex-row flex-align-center\">\n      <AddToCart\n        @update:quantity=\"emits('update:quantity', $event)\"\n        :quantity=\"quantity\"\n        :show-quantity=\"props.showQuantity\"\n        :show-wishlist=\"props.showWishlist\"\n        :object=\"props.object\"\n        @added=\"emits('added', $event)\"\n      />\n      <span class=\"flex-stretch\" />\n      <!-- <span class=\"muted\">{{\n        new Date(props.object.date_added).toLocaleDateString()\n      }}</span> -->\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ThumbnailedImage from \"@/components/ThumbnailedImage.vue\";\nimport AddToCart from \"@/components/shop/AddToCart.vue\";\nimport type { Product } from \"@/stores/defs/shop_defs\";\nimport { useShopStore } from \"@/stores/shop\";\nimport { useWindowStore } from \"@/stores/window\";\nimport Button from \"primevue/button\";\nimport Dialog from \"primevue/dialog\";\nimport { ref } from \"vue\";\nimport { RouterLink, useRouter } from \"vue-router\";\nimport DebugBlock from \"../DebugBlock.vue\";\nimport ProductPopover from \"./ProductPopover.vue\";\nimport ProductPrice from \"./ProductPrice.vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    object: Product;\n    quantity?: number;\n    showQuantity?: boolean;\n    showWishlist?: boolean;\n    back?: string;\n  }>(),\n  { showQuantity: false, showWishlist: true },\n);\nconst emits = defineEmits([\"added\", \"update:quantity\"]);\nconst window = useWindowStore();\nconst router = useRouter();\nconst shop = useShopStore();\n\nconst dialog = ref<HTMLDialogElement>();\nconst dialogAvailable = ref(false);\nconst imageCycle = ref(0);\n\n// preventing it from loading immediately so\n// that the related products don't need to load\nasync function showDialog() {\n  dialogAvailable.value = true;\n}\n\nfunction handleImageClick() {\n  if (window.width > 800) {\n    router.push({\n      name: \"product-detail\",\n      params: { slug: props.object.slug },\n      query: { back: props.back },\n    });\n  } else {\n    if (imageCycle.value) {\n      imageCycle.value = 0;\n    } else {\n      imageCycle.value = 1;\n    }\n  }\n}\n</script>\n\n<style scoped>\n.product-block {\n  max-width: 384px;\n  min-width: 100px;\n}\n.product-block > a {\n  display: grid;\n}\n.product-block img,\n.product-block .empty,\n.product-block .quick-look {\n  width: 100%;\n  object-fit: cover;\n  aspect-ratio: 8/10;\n  margin: auto;\n  grid-row: 1/1;\n  grid-column: 1/1;\n}\n.product-block .name {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.product-block .meta-row {\n  margin: var(--2XS, 8px) 0;\n}\n.product-block .meta-row,\n.product-block .add-row {\n  gap: var(--2XS, 8px);\n}\n\n.mobile-image {\n  display: none;\n}\n\n.quick-look {\n  position: relative;\n  display: none;\n  z-index: 3;\n  pointer-events: none;\n}\n.quick-look .p-button {\n  position: absolute;\n  bottom: 0px;\n  text-transform: uppercase;\n  width: 100%;\n  background: rgba(0, 0, 0, 0);\n  pointer-events: all;\n  padding: 14px;\n}\n.quick-look .p-button span {\n  padding: 10px;\n  width: 100%;\n  color: white;\n  font-weight: 300;\n  letter-spacing: 0.5px;\n  background: rgba(0, 0, 0, 0.3);\n  transition: all 0.2s ease;\n}\n\n.quick-look .p-button span:hover {\n  background: var(--White, #fff);\n  color: var(--Black, #000);\n}\n\n.alternate-image {\n  transition:\n    opacity 100ms,\n    border-radius 60ms,\n    transform 60ms;\n  opacity: 0;\n  z-index: 2;\n  transform: scale(1);\n}\n\n.muted {\n  color: rgba(0, 0, 0, 0.5);\n  font-size: 0.8em;\n}\n\n@media (min-width: 800px) {\n  .product-block:hover {\n    .quick-look {\n      display: block;\n    }\n    &.with-hover {\n      .alternate-image {\n        opacity: 1;\n        border-radius: 0;\n        transform: scale(1);\n      }\n      .primary-image {\n        opacity: 0;\n      }\n    }\n  }\n}\n</style>\n"],"names":["props","__props","shop","useShopStore","categoryLabels","computed","getCategoryLabels","emits","__emit","window","useWindowStore","router","useRouter","dialog","ref","dialogAvailable","imageCycle","showDialog","handleImageClick"],"mappings":"mmCAgEA,MAAMA,EAAQC,EAIRC,EAAOC,EAAa,EAEpBC,EAAiBC,EAAS,IACvBC,EAAkBN,EAAM,MAAM,CACtC,yvCC0BD,MAAMA,EAAQC,EAURM,EAAQC,EACRC,EAASC,EAAe,EACxBC,EAASC,EAAU,EACnBV,EAAOC,EAAa,EAEpBU,EAASC,EAAuB,EAChCC,EAAkBD,EAAI,EAAK,EAC3BE,EAAaF,EAAI,CAAC,EAIxB,eAAeG,GAAa,CAC1BF,EAAgB,MAAQ,EAAA,CAG1B,SAASG,GAAmB,CACtBT,EAAO,MAAQ,IACjBE,EAAO,KAAK,CACV,KAAM,iBACN,OAAQ,CAAE,KAAMX,EAAM,OAAO,IAAK,EAClC,MAAO,CAAE,KAAMA,EAAM,IAAK,CAAA,CAC3B,EAEGgB,EAAW,MACbA,EAAW,MAAQ,EAEnBA,EAAW,MAAQ,CAEvB"}