@scalar/api-reference/dist/components/IntersectionObserver.vue.js

Generate beautiful API references from OpenAPI documents

import { defineComponent, ref, onMounted, createBlock, openBlock, resolveDynamicComponent, withCtx, renderSlot } from "vue";
import { useIntersectionObserver } from "@vueuse/core";
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "IntersectionObserver",
  props: {
    id: {},
    is: {}
  },
  emits: ["intersecting"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emit = __emit;
    const intersectionObserverRef = ref();
    const calculateRootMargin = (element) => {
      const height = element.offsetHeight;
      return `${height / 2}px 0px ${height / 2}px 0px`;
    };
    const calculateThreshold = (element) => {
      const height = element.offsetHeight;
      return height < window.innerHeight ? 0.8 : 0.5;
    };
    onMounted(() => {
      if (intersectionObserverRef.value) {
        const options = {
          rootMargin: calculateRootMargin(intersectionObserverRef.value),
          threshold: calculateThreshold(intersectionObserverRef.value)
        };
        useIntersectionObserver(
          intersectionObserverRef,
          ([entry]) => {
            if (entry?.isIntersecting && props.id) {
              emit("intersecting", props.id);
            }
          },
          options
        );
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(resolveDynamicComponent(__props.is ?? "div"), {
        id: __props.id,
        ref_key: "intersectionObserverRef",
        ref: intersectionObserverRef
      }, {
        default: withCtx(() => [
          renderSlot(_ctx.$slots, "default")
        ]),
        _: 3
      }, 8, ["id"]);
    };
  }
});
export {
  _sfc_main as default
};