{"version":3,"file":"WithScrollContainerBlockOverlay-B7QJmZfa.js","sources":["../../../app/javascript/src/components/Containers/WithScrollContainerBlockOverlay.vue"],"sourcesContent":["<template>\n  <div v-if=\"top\" class=\"overlay-wrapper\">\n    <div class=\"overlay top\" :style=\"{ height: `${topHeight}px` }\"></div>\n  </div>\n\n  <div class=\"scroll-container\" ref=\"el\"><slot /></div>\n\n  <div v-if=\"bottom\" class=\"overlay-wrapper\">\n    <div class=\"overlay bottom\" :style=\"{ height: `${bottomHeight}px` }\"></div>\n  </div>\n</template>\n\n<script setup>\nimport { ref, watchEffect } from 'vue';\nimport { useElementScroll } from \"@/helpers/vueHelpers.js\";\n\nconst props = defineProps({\n  top: {\n    type: Boolean,\n    default: true,\n  },\n  bottom: {\n    type: Boolean,\n    default: true,\n  },\n  // the overlay height is dynamic based on the scroll position, this sets a limit.\n  overlay: {\n    type: Number,\n    default: 150,\n  },\n  // Show a fixed height overlay, as long as there is still scrollable area left.\n  fixed: {\n    type: Boolean,\n    default: false\n  }\n});\n\nconst el = ref();\nconst topHeight = ref(0);\nconst bottomHeight = ref(0);\nconst { y, yRemaining } = useElementScroll(el);\n\nwatchEffect(() => {\n  if (props.fixed) {\n    topHeight.value = y.value > 0 ? props.overlay : 0;\n    bottomHeight.value = yRemaining.value > 0 ? props.overlay : 0;\n  }\n  else {\n    topHeight.value = Math.min(y.value, props.overlay);\n    bottomHeight.value = Math.min(yRemaining.value, props.overlay);\n  }\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.scroll-container {\n  height: 100%;\n  overflow-y: auto;\n}\n\n.overlay-wrapper {\n  position: relative;\n}\n\n.overlay {\n  position: absolute;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n  z-index: 1;\n\n  &.top {\n    top: 0;\n    background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, #FFF 92.5%);\n  }\n\n  &.bottom {\n    bottom: 0;\n    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 92.5%);\n  }\n}\n</style>"],"names":["props","__props","el","ref","topHeight","bottomHeight","y","yRemaining","useElementScroll","watchEffect"],"mappings":"+dAgBA,MAAMA,EAAQC,EAqBRC,EAAKC,EAAK,EACVC,EAAYD,EAAI,CAAC,EACjBE,EAAeF,EAAI,CAAC,EACpB,CAAE,EAAAG,EAAG,WAAAC,GAAeC,EAAiBN,CAAE,EAE7C,OAAAO,EAAY,IAAM,CACZT,EAAM,OACRI,EAAU,MAAQE,EAAE,MAAQ,EAAIN,EAAM,QAAU,EAChDK,EAAa,MAAQE,EAAW,MAAQ,EAAIP,EAAM,QAAU,IAG5DI,EAAU,MAAQ,KAAK,IAAIE,EAAE,MAAON,EAAM,OAAO,EACjDK,EAAa,MAAQ,KAAK,IAAIE,EAAW,MAAOP,EAAM,OAAO,EAEjE,CAAC"}