import { Directive } from "vue";

//#region src/into-view.d.ts
/**
 * 绑定值类型
 */
type BindingValue = (target: Element) => void;
/**
 * 目标元素类型
 */
type TargetElement = HTMLElement & {
  _into_view_callBack: BindingValue;
  _into_view_observer: IntersectionObserver;
};
/**
 * 进入视口指令
 *
 * 当元素进入视口时触发回调函数
 *
 * @example
 * ```vue
 * <template>
 *   <!-- 基本用法 -->
 *   <div v-into-view="handleIntoView">
 *     当我进入视口时触发回调
 *   </div>
 *
 *   <!-- 仅触发一次 -->
 *   <div v-into-view.once="handleIntoViewOnce">
 *     当我进入视口时仅触发一次回调
 *   </div>
 * </template>
 *
 * <script setup>
 * import { ref } from 'vue'
 *
 * const handleIntoView = (element) => {
 *   console.log('元素进入视口', element)
 * }
 *
 * const handleIntoViewOnce = (element) => {
 *   console.log('元素进入视口（仅一次）', element)
 * }
 * </script>
 * ```
 */
declare const intoView: Directive<TargetElement, BindingValue, 'once'>;
//#endregion
export { intoView };