import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
import { genericComponent } from "../../utils";
import { makeDimensionProps, useDimension } from "../../composables/dimension";
import { makeTagProps } from "../../composables/tag";
import { MaybeTransition, makeTransitionProps } from "../../composables/transition";
import { useProxiedModel } from "../../composables/proxied-model";
import { FadeTransition } from "../transition";
import { Intersect } from "../../directives/intersect";
const Lazy = genericComponent()({
  name: "VeLazy",
  directives: {
    Intersect
  },
  props: {
    modelValue: Boolean,
    options: {
      type: Object,
      // For more information on types, navigate to:
      // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
      default: () => ({
        root: void 0,
        rootMargin: void 0,
        threshold: void 0
      })
    },
    ...makeDimensionProps(),
    ...makeTagProps(),
    ...makeTransitionProps({
      transition: {
        component: FadeTransition
      }
    })
  },
  emits: {
    "update:modelValue": (_modelValue) => true
  },
  setup(props, {
    slots
  }) {
    const {
      dimensionStyles
    } = useDimension(props);
    const isActive = useProxiedModel(props, "modelValue");
    function onIntersect(isIntersecting) {
      if (isActive.value)
        return;
      isActive.value = isIntersecting;
    }
    return () => _withDirectives(_createVNode(props.tag, {
      "class": "ve-lazy",
      "style": dimensionStyles.value
    }, {
      default: () => [isActive.value && _createVNode(MaybeTransition, {
        "transition": props.transition
      }, {
        default: () => [slots.default?.()]
      })]
    }), [[_resolveDirective("intersect"), onIntersect, props.options]]);
  }
});
export {
  Lazy
};
//# sourceMappingURL=lazy.mjs.map
