{"version":3,"file":"evaLazy-CIl94ZeX.js","sources":["../../../app/javascript/components/shared/evaLazy.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :style=\"{ minHeight: `${currentMinHeight}px` }\"\n  >\n    <slot v-if=\"showSlot\" />\n  </div>\n</template>\n\n<script>\nimport { computed, ref, toRefs, watch } from \"vue\"\nimport { useElementVisibility } from \"@vueuse/core\"\n\n/**\n * @component EvaLazy\n *\n * A lazy-loading component that only renders its content when visible in the viewport.\n *\n * @example Usage:\n * <eva-lazy :min-height=\"200\" :unload-when-not-visible=\"true\">\n *   <template #default>\n *     <your-component />\n *   </template>\n * </eva-lazy>\n *\n * @important When using this component with unload-when-not-visible=true, you MUST wrap your content\n * in <template #default> tags to ensure proper component unmounting and memory cleanup. Otherwise,\n * Vue may maintain references to child components even when they're not visible, preventing garbage collection.\n *\n * The #default slot template ensures that the component's entire subtree is properly destroyed\n * when the v-if condition becomes false, rather than just detaching it from the DOM.\n */\nexport default {\n  props: {\n    minHeight: {\n      type: Number,\n      default: 100,\n    },\n    xThreshold: {\n      type: Number,\n      default: 100,\n    },\n    yThreshold: {\n      type: Number,\n      default: 100,\n    },\n    disableLazyLoading: {\n      type: Boolean,\n      default: false,\n    },\n    unloadWhenNotVisible: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const { xThreshold, yThreshold, disableLazyLoading, unloadWhenNotVisible, minHeight } = toRefs(props)\n    const container = ref(null)\n    const isVisible = useElementVisibility(container, {\n      xThreshold,\n      yThreshold,\n    })\n    const hasBeenVisible = ref(false)\n\n    const lastHeightWhenVisible = ref(null)\n\n    // Watch for visibility changes and update lastHeightWhenVisible\n    // when the element transitions from visible to not visible\n    watch(isVisible, (newValue, oldValue) => {\n      if (oldValue === true && newValue === false) {\n        lastHeightWhenVisible.value = container.value.clientHeight\n      }\n      if (newValue === true) {\n        hasBeenVisible.value = true\n      }\n    })\n\n    // Determine whether to show the slot content based on visibility and configuration\n    const showSlot = computed(() => {\n      if (disableLazyLoading.value) return true\n      if (unloadWhenNotVisible.value) return isVisible.value\n      return isVisible.value || hasBeenVisible.value\n    })\n\n    const currentMinHeight = computed(() => {\n      if (!showSlot.value) return lastHeightWhenVisible.value || minHeight.value || 0\n      return minHeight.value || 0\n    })\n\n    return {\n      container,\n      lastHeightWhenVisible,\n      showSlot,\n      currentMinHeight,\n    }\n  },\n}\n</script>\n"],"names":["_sfc_main","props","xThreshold","yThreshold","disableLazyLoading","unloadWhenNotVisible","minHeight","toRefs","container","ref","isVisible","useElementVisibility","hasBeenVisible","lastHeightWhenVisible","watch","newValue","oldValue","showSlot","computed","currentMinHeight"],"mappings":"+gBAgCA,MAAAA,EAAA,CACA,MAAA,CACA,UAAA,CACA,KAAA,OACA,QAAA,GACA,EACA,WAAA,CACA,KAAA,OACA,QAAA,GACA,EACA,WAAA,CACA,KAAA,OACA,QAAA,GACA,EACA,mBAAA,CACA,KAAA,QACA,QAAA,EACA,EACA,qBAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EACA,MAAAC,EAAA,CACA,KAAA,CAAA,WAAAC,EAAA,WAAAC,EAAA,mBAAAC,EAAA,qBAAAC,EAAA,UAAAC,CAAA,EAAAC,EAAAN,CAAA,EACAO,EAAAC,EAAA,IAAA,EACAC,EAAAC,EAAAH,EAAA,CAGA,CAAA,EACAI,EAAAH,EAAA,EAAA,EAEAI,EAAAJ,EAAA,IAAA,EAIAK,EAAAJ,EAAA,CAAAK,EAAAC,IAAA,CACAA,IAAA,IAAAD,IAAA,KACAF,EAAA,MAAAL,EAAA,MAAA,cAEAO,IAAA,KACAH,EAAA,MAAA,GAEA,CAAA,EAGA,MAAAK,EAAAC,EAAA,IACAd,EAAA,MAAA,GACAC,EAAA,MAAAK,EAAA,MACAA,EAAA,OAAAE,EAAA,KACA,EAEAO,EAAAD,EAAA,IACAD,EAAA,MACAX,EAAA,OAAA,EADAO,EAAA,OAAAP,EAAA,OAAA,CAEA,EAEA,MAAA,CACA,UAAAE,EACA,sBAAAK,EACA,SAAAI,EACA,iBAAAE,CACA,CACA,CACA"}