{"version":3,"file":"BlockContainer-35ec6708.js","sources":["../../components/ui/atoms/BlockContainer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, onMounted, nextTick, watch } from \"vue\";\n\nimport Btn from \"@/components/ui/atoms/Btn.vue\";\n\nconst scrollContainer = ref<HTMLElement | null>(null);\nconst isHovering = ref(false);\nconst hasOverflow = ref(false);\nconst hasLeftOverflow = ref(false);\nconst hasRightOverflow = ref(false);\nconst scrollContent = ref<HTMLElement | null>(null);\nconst isScrolling = ref(false);\n\nconst marginLeft = ref(0);\n\ninterface Props {\n  tag?: keyof HTMLElementTagNameMap;\n  theme?: string;\n  behaviour?: \"scroll\" | \"stripes\";\n}\n\nwithDefaults(defineProps<Props>(), {\n  tag: \"div\",\n  theme: \"off-black\",\n  behaviour: \"scroll\",\n});\n\nconst checkOverflow = () => {\n  if (!scrollContainer.value || !scrollContent.value) return;\n\n  const container = scrollContainer.value;\n  const content = scrollContent.value;\n\n  const contentVisibleWidth = Math.abs(marginLeft.value) + container.clientWidth;\n  const contentOverflowWidth = content.scrollWidth - contentVisibleWidth;\n\n  hasOverflow.value = contentOverflowWidth > 0;\n  hasLeftOverflow.value = marginLeft.value < 0;\n  hasRightOverflow.value = contentOverflowWidth > 0;\n};\n\nconst handleMouseEnter = () => {\n  isHovering.value = true;\n  checkOverflow();\n};\n\nconst handleMouseLeave = () => {\n  isHovering.value = false;\n  hasLeftOverflow.value = false;\n  hasRightOverflow.value = false;\n};\n\nconst resetScroll = () => {\n  marginLeft.value = 0;\n  if (scrollContent.value) {\n    scrollContent.value.style.marginLeft = `${marginLeft.value}px`;\n  }\n  checkOverflow();\n};\n\nconst scrollRight = () => {\n  if (scrollContent.value && !isScrolling.value) {\n    isScrolling.value = true;\n    const container = scrollContainer.value;\n    const content = scrollContent.value;\n\n    if (!container || !content) return;\n\n    const item = content.firstElementChild as HTMLElement;\n    if (item) {\n      const itemWidth = item.offsetWidth;\n      const gap = parseFloat(getComputedStyle(content).gap) || 0;\n      const totalItemWidth = itemWidth + gap + content.children.length;\n\n      // Calculate the total scroll width needed\n      const totalScrollWidth = content.scrollWidth - container.clientWidth;\n\n      // Calculate the number of clicks needed to cover the entire scroll width\n      // const maxScrollClicks = Math.ceil(totalScrollWidth / totalItemWidth);\n\n      // Calculate the scroll amount per click\n      // const scrollPerClick = totalScrollWidth / maxScrollClicks;\n      const scrollPerClick = totalItemWidth;\n\n      // Perform the scroll\n      if (\n        Math.abs(marginLeft.value) + container.clientWidth + scrollPerClick <=\n        content.scrollWidth\n      ) {\n        marginLeft.value -= scrollPerClick;\n        content.style.marginLeft = `${marginLeft.value}px`;\n        checkOverflow();\n      } else {\n        // Align to the end of the container\n        marginLeft.value = -totalScrollWidth;\n        content.style.marginLeft = `${marginLeft.value}px`;\n        hasOverflow.value = false;\n      }\n\n      setTimeout(() => {\n        isScrolling.value = false;\n      }, 350);\n    }\n  }\n};\n\nconst scrollLeft = () => {\n  if (scrollContent.value && !isScrolling.value) {\n    isScrolling.value = true;\n    const container = scrollContainer.value;\n    const content = scrollContent.value;\n\n    if (!container || !content) return;\n\n    const item = content.firstElementChild as HTMLElement;\n    if (item) {\n      const itemWidth = item.offsetWidth;\n      const gap = parseFloat(getComputedStyle(content).gap) || 0;\n      const totalItemWidth = itemWidth + gap + content.children.length * 2;\n\n      // Calculate the total scroll width necessary\n      // const totalScrollWidth = content.scrollWidth - container.clientWidth;\n\n      // Calculate the number of clicks needed to cover the entire scroll width\n      // const maxScrollClicks = Math.ceil(totalScrollWidth / totalItemWidth);\n\n      const scrollPerClick = totalItemWidth;\n      // Calculate the scroll amount per click\n      //const scrollPerClick = totalScrollWidth / maxScrollClicks;\n\n      // Perform the scroll\n      if (Math.abs(marginLeft.value) - scrollPerClick >= 0) {\n        marginLeft.value += scrollPerClick;\n        content.style.marginLeft = `${marginLeft.value}px`;\n        checkOverflow();\n      } else {\n        // Align to the start of the container\n        marginLeft.value = 0;\n        content.style.marginLeft = `${marginLeft.value}px`;\n      }\n\n      setTimeout(() => {\n        isScrolling.value = false;\n      }, 350);\n    }\n  }\n};\n\nonMounted(() => {\n  nextTick(() => {\n    checkOverflow();\n  });\n});\n\nwatch(marginLeft, () => {\n  checkOverflow();\n});\n\ndefineExpose({\n  resetScroll,\n});\n</script>\n\n<template>\n  <div\n    :class=\"`block-container ${theme} ${behaviour}`\"\n    ref=\"scrollContainer\"\n    @mouseenter=\"handleMouseEnter\"\n    @mouseleave=\"handleMouseLeave\"\n  >\n    <div\n      :class=\"`block-container ${theme} ${behaviour} scroll-content`\"\n      ref=\"scrollContent\"\n    >\n      <slot />\n    </div>\n    <Btn\n      v-if=\"behaviour === 'scroll'\"\n      theme=\"clear-bold\"\n      size=\"huge\"\n      action=\"prev-clear\"\n      @click=\"scrollLeft\"\n      :class=\"['scroll-prev-btn', { hidden: !hasLeftOverflow }]\"\n    />\n    <Btn\n      v-if=\"behaviour === 'scroll'\"\n      theme=\"clear-bold\"\n      size=\"huge\"\n      action=\"next-clear\"\n      @click=\"scrollRight\"\n      :class=\"['scroll-next-btn', { hidden: !hasOverflow }]\"\n    />\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n@use \"@/styles/settings/vars\";\n\n.scroll {\n  position: relative;\n}\n\n.scroll-content {\n  transition: margin-left 0.5s ease;\n}\n\n.scroll-next-btn,\n.scroll-prev-btn {\n  position: absolute;\n  border: 1px solid vars.$storm;\n  top: 50%;\n  right: 0;\n  left: auto;\n  transform: translateY(-50%) scale(0.7);\n  transition:\n    opacity 0.2s,\n    transform 0.4s,\n    visibility 0s 0.2s;\n  opacity: 0;\n  visibility: hidden;\n}\n\n@media (max-width: 1024px) {\n  .scroll-next-btn,\n  .scroll-prev-btn {\n    display: none;\n  }\n}\n\n.scroll-prev-btn {\n  left: 0;\n}\n\n.scroll:hover .scroll-next-btn.hidden,\n.scroll:hover .scroll-prev-btn.hidden {\n  transform: translateY(-50%) scale(0.7);\n  transition:\n    opacity 0.2s,\n    transform 0.4s,\n    visibility 0s 0.2s;\n  opacity: 0;\n  visibility: hidden;\n}\n\n.scroll:hover .scroll-next-btn,\n.scroll:hover .scroll-prev-btn {\n  opacity: 1;\n  transform: translateY(-50%) scale(1);\n  visibility: visible;\n  transition-delay: 0s;\n}\n</style>\n"],"names":["scrollContainer","ref","isHovering","hasOverflow","hasLeftOverflow","hasRightOverflow","scrollContent","isScrolling","marginLeft","checkOverflow","container","content","contentVisibleWidth","contentOverflowWidth","handleMouseEnter","handleMouseLeave","resetScroll","scrollRight","item","itemWidth","gap","totalItemWidth","totalScrollWidth","scrollPerClick","scrollLeft","onMounted","nextTick","watch","__expose"],"mappings":"2XAKM,MAAAA,EAAkBC,EAAwB,IAAI,EAC9CC,EAAaD,EAAI,EAAK,EACtBE,EAAcF,EAAI,EAAK,EACvBG,EAAkBH,EAAI,EAAK,EAC3BI,EAAmBJ,EAAI,EAAK,EAC5BK,EAAgBL,EAAwB,IAAI,EAC5CM,EAAcN,EAAI,EAAK,EAEvBO,EAAaP,EAAI,CAAC,EAclBQ,EAAgB,IAAM,CAC1B,GAAI,CAACT,EAAgB,OAAS,CAACM,EAAc,MAAO,OAEpD,MAAMI,EAAYV,EAAgB,MAC5BW,EAAUL,EAAc,MAExBM,EAAsB,KAAK,IAAIJ,EAAW,KAAK,EAAIE,EAAU,YAC7DG,EAAuBF,EAAQ,YAAcC,EAEnDT,EAAY,MAAQU,EAAuB,EAC3BT,EAAA,MAAQI,EAAW,MAAQ,EAC3CH,EAAiB,MAAQQ,EAAuB,CAAA,EAG5CC,EAAmB,IAAM,CAC7BZ,EAAW,MAAQ,GACLO,GAAA,EAGVM,EAAmB,IAAM,CAC7Bb,EAAW,MAAQ,GACnBE,EAAgB,MAAQ,GACxBC,EAAiB,MAAQ,EAAA,EAGrBW,EAAc,IAAM,CACxBR,EAAW,MAAQ,EACfF,EAAc,QAChBA,EAAc,MAAM,MAAM,WAAa,GAAGE,EAAW,KAAK,MAE9CC,GAAA,EAGVQ,EAAc,IAAM,CACxB,GAAIX,EAAc,OAAS,CAACC,EAAY,MAAO,CAC7CA,EAAY,MAAQ,GACpB,MAAMG,EAAYV,EAAgB,MAC5BW,EAAUL,EAAc,MAE1B,GAAA,CAACI,GAAa,CAACC,EAAS,OAE5B,MAAMO,EAAOP,EAAQ,kBACrB,GAAIO,EAAM,CACR,MAAMC,EAAYD,EAAK,YACjBE,EAAM,WAAW,iBAAiBT,CAAO,EAAE,GAAG,GAAK,EACnDU,EAAiBF,EAAYC,EAAMT,EAAQ,SAAS,OAGpDW,EAAmBX,EAAQ,YAAcD,EAAU,YAOnDa,EAAiBF,EAIrB,KAAK,IAAIb,EAAW,KAAK,EAAIE,EAAU,YAAca,GACrDZ,EAAQ,aAERH,EAAW,OAASe,EACpBZ,EAAQ,MAAM,WAAa,GAAGH,EAAW,KAAK,KAChCC,MAGdD,EAAW,MAAQ,CAACc,EACpBX,EAAQ,MAAM,WAAa,GAAGH,EAAW,KAAK,KAC9CL,EAAY,MAAQ,IAGtB,WAAW,IAAM,CACfI,EAAY,MAAQ,IACnB,GAAG,CACR,CACF,CAAA,EAGIiB,EAAa,IAAM,CACvB,GAAIlB,EAAc,OAAS,CAACC,EAAY,MAAO,CAC7CA,EAAY,MAAQ,GACpB,MAAMG,EAAYV,EAAgB,MAC5BW,EAAUL,EAAc,MAE1B,GAAA,CAACI,GAAa,CAACC,EAAS,OAE5B,MAAMO,EAAOP,EAAQ,kBACrB,GAAIO,EAAM,CACR,MAAMC,EAAYD,EAAK,YACjBE,EAAM,WAAW,iBAAiBT,CAAO,EAAE,GAAG,GAAK,EASnDY,EARiBJ,EAAYC,EAAMT,EAAQ,SAAS,OAAS,EAa/D,KAAK,IAAIH,EAAW,KAAK,EAAIe,GAAkB,GACjDf,EAAW,OAASe,EACpBZ,EAAQ,MAAM,WAAa,GAAGH,EAAW,KAAK,KAChCC,MAGdD,EAAW,MAAQ,EACnBG,EAAQ,MAAM,WAAa,GAAGH,EAAW,KAAK,MAGhD,WAAW,IAAM,CACfD,EAAY,MAAQ,IACnB,GAAG,CACR,CACF,CAAA,EAGF,OAAAkB,EAAU,IAAM,CACdC,EAAS,IAAM,CACCjB,GAAA,CACf,CAAA,CACF,EAEDkB,EAAMnB,EAAY,IAAM,CACRC,GAAA,CACf,EAEYmB,EAAA,CACX,YAAAZ,CAAA,CACD"}