Context menu

<script setup lang="ts">
import { nextTick, ref, useId } from 'vue'
import { Portal } from '../../lib/primitive'
import { provideDropdownMenu } from '../dropdown-menu/context'
import { provideContextMenu } from './context'

const open = defineModel<boolean>('open', { default: false })

/** An invisible point placed where the pointer was. The menu positions itself against it like any trigger. */
const anchor = ref<HTMLElement | null>(null)
const point = ref({ x: 0, y: 0 })
const focusFirst = ref(false)

function setOpen(next: boolean) {
  open.value = next
}

// The same state the dropdown menu's parts expect, so its items, groups and submenus all work inside.
provideDropdownMenu({ open, setOpen, anchor, focusFirst, triggerId: useId(), contentId: useId() })

provideContextMenu({
  openAt: async (x, y, fromKeyboard) => {
    // A second right-click while open moves the menu: close first so it reopens at the new point.
    if (open.value) {
      open.value = false
      await nextTick()
    }
    point.value = { x, y }
    focusFirst.value = fromKeyboard
    await nextTick()
    open.value = true
  },
})
</script>

<template>
  <slot :open="open" />
  <Portal>
    <span ref="anchor" class="er-context-menu-point" aria-hidden="true" :style="{ left: `${point.x}px`, top: `${point.y}px` }" />
  </Portal>
</template>

<style>
@layer components {
  .er-context-menu-point {
    position: fixed;
    width: 0;
    height: 0;
    pointer-events: none;
  }
}
</style>

<script setup lang="ts">
import { DropdownMenuContent } from '../dropdown-menu'
</script>

<template>
  <!-- The dropdown menu's own panel, opening down and to the right of the pointer. -->
  <DropdownMenuContent side="bottom" align="start" :side-offset="2">
    <slot />
  </DropdownMenuContent>
</template>

<script setup lang="ts">
import type { Component } from 'vue'
import { Primitive } from '../../lib/primitive'
import { useContextMenu } from './context'

const props = withDefaults(
  defineProps<{
    as?: string | Component
    /** Use the single child as the right-click area instead of wrapping it in an element. */
    asChild?: boolean
    disabled?: boolean
  }>(),
  { as: 'div' },
)

const menu = useContextMenu()

function onContextMenu(event: MouseEvent) {
  if (props.disabled) return
  event.preventDefault()
  // The Menu key and Shift+F10 also fire this event, without a real pointer position.
  const fromKeyboard = event.button !== 2 && event.detail === 0
  if (fromKeyboard) {
    const box = (event.currentTarget as HTMLElement).getBoundingClientRect()
    menu.openAt(box.left + Math.min(box.width / 2, 24), box.top + Math.min(box.height / 2, 24), true)
  } else {
    menu.openAt(event.clientX, event.clientY, false)
  }
}
</script>

<template>
  <Primitive :as="as" :as-child="asChild" @contextmenu="onContextMenu">
    <slot />
  </Primitive>
</template>

import { createContext } from '../../lib/context'

export interface ContextMenuContext {
  /** Open the menu at a point in the window. `fromKeyboard` puts focus on the first item. */
  openAt: (x: number, y: number, fromKeyboard: boolean) => void
}

export const [provideContextMenu, useContextMenu] = createContext<ContextMenuContext>('ContextMenu')

/** Context menu — a right-click menu. Fill it with the dropdown menu's items. */
export { default as ContextMenu } from './ContextMenu.vue'
export { default as ContextMenuContent } from './ContextMenuContent.vue'
export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'