import * as vue from "vue";
import { TemplateRef } from "vue";

//#region src/use-context-menu.d.ts
/**
 * 上下文菜单配置选项
 * @example
 * const options: UseContextMenuOptions = {
 *   closeOnClickOutside: true,
 *   closeOnEscape: true,
 *   offset: { x: 10, y: 10 }
 * }
 */
type UseContextMenuOptions = {
  /** 是否在点击外部时关闭上下文菜单，默认为 true */closeOnClickOutside?: boolean; /** 是否在按 ESC 键时关闭上下文菜单，默认为 true */
  closeOnEscape?: boolean; /** 上下文菜单的偏移量，默认为 { x: 0, y: 0 } */
  offset?: {
    x: number;
    y: number;
  };
};
/**
 * 上下文菜单组合式函数
 * 提供右键菜单的显示、隐藏和位置管理功能
 *
 * @param templateRef 可选的模板引用，用于指定监听上下文菜单事件的元素
 * @param options 上下文菜单配置选项
 * @returns 上下文菜单相关的状态和方法
 *
 * @example
 * // 基本用法
 * const container = ref<HTMLElement>()
 * const { x, y, show, hide } = useContextMenu(container, {
 *   closeOnClickOutside: true,
 *   closeOnEscape: true,
 *   offset: { x: 10, y: 10 }
 * })
 *
 * @example
 * // 在模板中使用
 * // <div ref="container">
 * //   右键点击此处
 * //   <div v-if="show" class="context-menu" :style="{ left: `${x}px`, top: `${y}px` }">
 * //     <div @click="hide">菜单项 1</div>
 * //   </div>
 * // </div>
 */
declare function useContextMenu(templateRef?: TemplateRef<HTMLElement>, options?: UseContextMenuOptions): {
  templateRef: Readonly<vue.ShallowRef<HTMLElement | null>> | undefined;
  x: vue.Ref<number, number>;
  y: vue.Ref<number, number>;
  show: vue.Ref<boolean, boolean>;
  hide: () => void;
  contextMenuEvent: (e: MouseEvent) => void;
};
/**
 * useContextMenu 函数的返回类型
 * 包含上下文菜单的状态和方法
 * @example
 * const menu: UseContextMenuReturns = useContextMenu(elRef)
 */
type UseContextMenuReturns = ReturnType<typeof useContextMenu>;
//#endregion
export { UseContextMenuOptions, UseContextMenuReturns, useContextMenu };