{"version":3,"file":"CartItems-B6xTslBw.js","sources":["../../../../node-apps/site/src/components/shop/NumQuantity.vue","../../../../node-apps/site/src/components/shop/CartItems.vue"],"sourcesContent":["<template>\n  <div class=\"num-quantity\">\n    <Button\n      icon=\"pi pi-minus\"\n      text\n      rounded\n      aria-label=\"decrease quantity\"\n      tabindex=\"-1\"\n      @click=\"changeQuantity(-1)\"\n      class=\"decrease-button flex-static\"\n      :disabled=\"props.modelValue < props.minValue\"\n    />\n    <input\n      v-model.number=\"value\"\n      class=\"quantity-input flex-stretch\"\n      aria-label=\"item quantity\"\n      :size=\"3\"\n      :min=\"1\"\n      :max=\"props.maxValue\"\n    />\n    <Button\n      icon=\"pi pi-plus\"\n      text\n      rounded\n      aria-label=\"increase quantity\"\n      tabindex=\"-1\"\n      @click=\"changeQuantity(+1)\"\n      class=\"increase-button flex-static\"\n      :disabled=\"!!props.maxValue && props.modelValue >= props.maxValue\"\n    />\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport Button from \"primevue/button\";\nimport { computed } from \"vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue: number;\n    minValue?: number;\n    maxValue?: number;\n  }>(),\n  { minValue: 0 },\n);\nconst emits = defineEmits([\"update:modelValue\"]);\n\nconst value = computed<number>({\n  get: () => props.modelValue,\n  set: (v) => emits(\"update:modelValue\", v),\n});\n\nfunction changeQuantity(delta: number) {\n  value.value += delta;\n}\n</script>\n\n<style scoped>\n.num-quantity {\n  padding: 0px;\n  gap: 0;\n  margin: 0 0 var(--Sm, 24px) 0;\n  min-width: 92px !important;\n  flex: 0 0 auto;\n  width: min-content;\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  justify-content: stretch;\n}\n@media (max-width: 800px) {\n  .num-quantity {\n    border: 1px solid var(--30, #c4c4c4);\n  }\n}\n\n.num-quantity :deep(.p-button-icon) {\n  width: 7px;\n  height: 7px;\n}\n.p-button {\n  width: 24px;\n  padding: var(--2XS);\n}\n:deep(.p-button-icon) {\n  font-size: 6px;\n}\ninput {\n  border: none;\n  flex: 1 1 100%;\n}\ninput.quantity-input {\n  text-align: center;\n}\n</style>\n","<template>\n  <div class=\"cart-items flex-stretch\">\n    <div class=\"empty-header\"></div>\n    <div class=\"header header-item first\">Item</div>\n    <div class=\"header header-price\">Item Price</div>\n    <div class=\"header header-quantity\">Quantity</div>\n    <div class=\"header header-total\">Total Price</div>\n    <template v-for=\"item in cartItems\">\n      <div class=\"image-cell\">\n        <ThumbnailedImage\n          v-if=\"item.product?.images\"\n          :images=\"item.product.images[0]\"\n          :alt=\"item.product.name\"\n          sizes=\"150px\"\n        />\n      </div>\n      <div class=\"meta-cell flex-column flex-space-between second\">\n        <div v-if=\"item.promotion && item.product\">\n          <div>\n            <em>{{ promoName(item.promotion) }}</em>\n          </div>\n          <div class=\"name\">{{ item.product.name }}</div>\n          <div class=\"remoteId\">{{ item.product.remote_id }}</div>\n        </div>\n        <div v-else-if=\"item.product\">\n          <RouterLink\n            :to=\"{\n              name: 'product-detail',\n              params: { slug: item.product.slug },\n            }\"\n            class=\"name\"\n            tabindex=\"-1\"\n          >\n            {{ shop.getProductNameWithoutColor(item.product.name) }}\n          </RouterLink>\n          <div class=\"remoteId\">{{ item.product.remote_id }}</div>\n        </div>\n        <div v-else>Item</div>\n\n        <div v-if=\"item.product\">\n          <div>\n            {{ shop.getProductColorNames(item.product).join(\", \") }}\n          </div>\n          <div>\n            {{ shop.getProductType(item.product) }}\n          </div>\n        </div>\n\n        <div v-if=\"item.extras\" class=\"extra-form\">\n          <div v-if=\"item.extras.eventforms\" class=\"eventforms\">\n            <div\n              v-for=\"(values, eventform) in item.extras.eventforms\"\n              class=\"eventform p-2xs-y\"\n            >\n              <div v-for=\"(value, key) in values\" class=\"eventform-row\">\n                {{ `${key}`.replace(\"_\", \" \") }}: {{ value }}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"price-cell pa-p1\">\n        <ProductPrice v-if=\"!item.promotion\" :object=\"item.product\" />\n      </div>\n      <div class=\"quantity-cell pa-p1\">\n        <div\n          v-if=\"item.extras\"\n          class=\"flex-column flex-center flex-align-center p-2xs-t\"\n        >\n          1\n        </div>\n        <div\n          v-else-if=\"item.promotion\"\n          class=\"flex-column flex-center flex-align-center p-2xs-t\"\n        >\n          {{ item.quantity }}\n        </div>\n        <NumQuantity\n          v-else-if=\"!item.promotion\"\n          v-model=\"item.quantity\"\n          @update:modelValue=\"checkQuantity(item)\"\n        />\n        <a\n          href=\"#\"\n          v-if=\"!item.promotion\"\n          tabindex=\"-1\"\n          @click.prevent=\"removeItem(item)\"\n          class=\"small link remove-button\"\n        >\n          Remove\n        </a>\n      </div>\n      <div class=\"total-cell pa-p1\">\n        <ProductPrice :object=\"item.product\" :quantity=\"item.quantity\" />\n        <template v-if=\"props.showWishlist\">\n          <a\n            href=\"#\"\n            tabindex=\"-1\"\n            v-if=\"!item.promotion\"\n            @click.prevent=\"moveToWishlist(item)\"\n            class=\"small\"\n          >\n            Add to Wishlist\n          </a>\n        </template>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useCartStore } from \"@/stores/cart\";\nimport { useJoinStore } from \"@/stores/join\";\nimport { useShopStore } from \"@/stores/shop\";\nimport {\n  checkQuantity,\n  moveToWishlist,\n  removeItem,\n} from \"@/stores/utils/add_to_cart\";\nimport { computed } from \"vue\";\nimport ThumbnailedImage from \"../ThumbnailedImage.vue\";\nimport NumQuantity from \"./NumQuantity.vue\";\nimport ProductPrice from \"./ProductPrice.vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    showWishlist?: boolean;\n    showPromoItems?: boolean;\n  }>(),\n  {\n    showWishlist: true,\n    showPromoItems: true,\n  },\n);\n\nconst join = useJoinStore();\nconst cart = useCartStore();\nconst shop = useShopStore();\n\nconst cartItems = computed(() => {\n  if (!props.showPromoItems) {\n    return cart.items.filter((i) => !i.promotion);\n  }\n  return cart.items;\n});\n\nfunction promoName(promoId: number) {\n  const promo = shop.objects.promos.find((p) => p.id === promoId);\n  return promo?.description || \"Promotion\";\n}\n</script>\n\n<style scoped>\n.header {\n  border-bottom: 1px solid var(--30, #c4c4c4);\n  padding-bottom: 5px;\n}\n.first {\n  padding-left: var(--Sm, 24px);\n}\n.second {\n  padding-left: var(--lg, 48px);\n}\n\n.cart-items {\n  display: grid;\n  grid-template-columns: auto 1fr repeat(2, minmax(100px, auto)) auto;\n  gap: var(--3XS, 4px) 0;\n}\n\n.image-cell {\n  margin-right: var(--md);\n}\n.image-cell img {\n  object-fit: contain;\n  width: 150px;\n  height: 188px;\n}\n.meta-cell {\n  flex: 1 1 auto;\n  margin: 0 var(--Sm);\n  gap: var(--XMd);\n}\n.meta-cell .name {\n  /*margin-top: var(--XS);*/\n  margin-bottom: var(--2XS);\n}\n.meta-cell .remoteId {\n  color: var(--50, #939598);\n}\n#app .quantity-cell {\n  padding-top: 7px;\n}\n\n.quantity-cell .flex-row {\n  margin: 0 var(--Button-Spacing-Large, 10px) 0 0;\n  padding: 0 0 var(--2XS, 8px) 0px;\n  gap: var(--2XS, 8px);\n  color: #000;\n  text-align: center;\n}\n.quantity-cell .flex-row :deep(.p-button-icon) {\n  font-size: 6px;\n}\n\n.p-button {\n  padding: var(--2XS, 8px);\n}\n.p-button.pink,\n.p-button.grey {\n  padding: var(--2XS, 8px) var(--XS, 16px);\n}\n\n#app .p-button-text:hover {\n  color: var(--Black, #000);\n  font-weight: 400;\n}\n.meta-cell,\n.price-cell,\n.quantity-cell,\n.total-cell {\n  margin: var(--md) 0 0 0;\n  padding-top: var(--XS);\n  padding-bottom: var(--XMd);\n  border-bottom: 1px solid var(--30, #c4c4c4);\n}\n.quantity-cell,\n.total-cell {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.price-cell,\n.quantity-cell {\n  padding-right: 16px;\n}\n\n.p-button {\n  justify-content: left;\n}\n\n.small {\n  color: var(--50, #939598);\n  text-align: center;\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.eventform {\n  text-transform: uppercase;\n  opacity: 0.75;\n  border-top: 1px solid #ccc;\n}\n\n@media (max-width: 930px) and (min-width: 801px) {\n  .first {\n    padding-left: var(--XS, 16px);\n  }\n  .second {\n    padding-left: var(--XS, 16px);\n  }\n}\n\n@media only screen and (max-width: 800px) {\n  .flex-row,\n  #app .flex-row {\n    display: inline-grid;\n    width: 100%;\n  }\n  .first {\n    padding-left: var(--md, 32px);\n  }\n  .second {\n    margin: var(--md, 32px) 0 0 var(--md, 32px);\n    padding: 0;\n  }\n  .price-cell.pa-p1 {\n    padding: 0px var(--2XS, 8px);\n  }\n\n  .image-cell {\n    width: 100%;\n    grid-column: 1/1;\n    grid-row: span 3;\n    border-bottom: none;\n    margin: var(--md, 32px) 0 0 0;\n  }\n\n  .meta-cell {\n    gap: var(--2XS);\n    border-bottom: none;\n  }\n  .meta-cell.flex-space-between {\n    justify-content: normal;\n  }\n\n  .quantity-cell {\n    padding: 0;\n    margin: 0;\n    border-bottom: 0;\n    grid-column: span 2;\n  }\n  .quantity-cell .flex-row {\n    border: 1px solid var(--30, #c4c4c4);\n    padding: 0px;\n    display: flex !important;\n    gap: 0;\n    margin: 0 0 var(--Sm, 24px) 0;\n    min-width: 92px !important;\n  }\n  .quantity-cell .flex-row :deep(.p-button-icon) {\n    width: 7px;\n    height: 7px;\n  }\n\n  .p-button.small {\n    padding: 0;\n  }\n\n  .price-cell {\n    border-bottom: 0;\n  }\n\n  .cart-items {\n    display: grid;\n    grid-template-columns: max-content;\n  }\n  .cart-items .header-price,\n  .cart-items .header-quantity {\n    display: none;\n  }\n  .price-cell {\n    grid-column: 3/3;\n  }\n  .quantity-cell {\n    grid-column: 2/4;\n    a.small {\n      text-align: left;\n    }\n  }\n  #app .total-cell {\n    padding: 5px 0 var(--md, 32px) 0;\n    margin: 0 0 0 var(--md, 32px);\n    grid-column: span 2;\n    a.small {\n      text-align: left;\n    }\n  }\n  #app .total-cell .price {\n    display: none;\n  }\n  #app .quantity-cell {\n    width: 94px;\n    padding: var(--Sm, 24px) 0 0 var(--md, 32px);\n  }\n}\n\n@media screen and (max-width: 600px) {\n  .image-cell img {\n    width: 98px;\n    height: 123px;\n  }\n  .header-total {\n    text-align: right;\n  }\n  .price-cell.pa-p1 {\n    text-align: right;\n  }\n}\n</style>\n"],"names":["props","__props","emits","__emit","value","computed","v","changeQuantity","delta","useJoinStore","cart","useCartStore","shop","useShopStore","cartItems","i","promoName","promoId","promo"],"mappings":"+4BAqCA,MAAMA,EAAQC,EAQRC,EAAQC,EAERC,EAAQC,EAAiB,CAC7B,IAAK,IAAML,EAAM,WACjB,IAAMM,GAAMJ,EAAM,oBAAqBI,CAAC,CAAA,CACzC,EAED,SAASC,EAAeC,EAAe,CACrCJ,EAAM,OAASI,CAAA,+5CCuEjB,MAAMR,EAAQC,EAWDQ,EAAa,EAC1B,MAAMC,EAAOC,EAAa,EACpBC,EAAOC,EAAa,EAEpBC,EAAYT,EAAS,IACpBL,EAAM,eAGJU,EAAK,MAFHA,EAAK,MAAM,OAAQK,GAAM,CAACA,EAAE,SAAS,CAG/C,EAED,SAASC,EAAUC,EAAiB,CAC5B,MAAAC,EAAQN,EAAK,QAAQ,OAAO,KAAM,GAAM,EAAE,KAAOK,CAAO,EAC9D,OAAOC,GAAA,YAAAA,EAAO,cAAe,WAAA"}