import { withDirectives, createVNode, resolveDirective } from "vue";
import { makeDimensionProps, useDimension } from "../../composables/dimension/index.mjs";
import { makeTagProps } from "../../composables/tag/index.mjs";
import { makeTransitionProps, MaybeTransition } from "../../composables/transition/index.mjs";
import { useProxiedModel } from "../../composables/proxied-model/index.mjs";
import { Intersect } from "../../directives/intersect/index.mjs";
import { FadeTransition } from "../transition/fade-transition.mjs";
import { genericComponent } from "../../utils/define-component.mjs";
const Lazy = genericComponent()({
  name: "VeLazy",
  directives: {
    Intersect
  },
  props: {
    modelValue: Boolean,
    options: {
      type: Object,
      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: () => {
          var _a;
          return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
        }
      })]
    }), [[resolveDirective("intersect"), onIntersect, props.options]]);
  }
});
export {
  Lazy
};
//# sourceMappingURL=lazy.mjs.map
