[J-Sek]

closes #9235

• verify nested menu
• verify with submenu
• keep the x,y position relative to the activator when scrolling

shipped separately in b6b5acd

• close on right or middle-click outside
• close on touch-hold outside

Later

• verify/prevent iOS callout
• (maybe) submenu with open-on-hover should accept tap on mobile

Markup:

<template>
  <v-app theme="dark">
    <div class="d-flex justify-center flex-wrap py-6 ga-6">
      <v-menu target="cursor" context-menu>
        <template #activator="{ props }">
          <v-card
            v-bind="props"
            height="200"
            image="https://cdn.vuetifyjs.com/images/cards/cooking.png"
            width="300"
          >
            <v-chip
              class="position-absolute top-0 right-0 ma-1 bg-black"
              size="small"
              text="use right-click"
            />
          </v-card>
        </template>
        <v-sheet
          class="pa-3"
          width="210"
        >
          <div class="d-flex flex-wrap ga-2">
            <v-avatar v-for="c in colors" :key="c" :color="c" v-tooltip:bottom="c" />
          </div>
        </v-sheet>
      </v-menu>

      <v-card
        height="200"
        image="https://cdn.vuetifyjs.com/images/cards/plane.jpg"
        width="300"
      >
        <v-chip
          class="position-absolute top-0 right-0 ma-1 bg-black"
          size="small"
          text="use right-click"
        />
        <v-menu activator="parent" target="cursor" context-menu>
          <v-list :items="items" class="py-1" item-props />
        </v-menu>
      </v-card>

      <v-card
        height="200"
        image="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
        width="300"
        @contextmenu.prevent="onCardClick"
      >
        <v-chip
          class="position-absolute top-0 right-0 ma-1 bg-black"
          size="small"
          text="use right-click"
        />
      </v-card>

      <v-card
        height="200"
        image="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
        width="300"
      >
        <v-chip
          class="position-absolute top-0 right-0 ma-1 bg-black"
          size="small"
          text="nested + submenu"
        />
        <v-sheet
          class="position-absolute bottom-0 left-0 ma-3 pa-2 text-caption"
          color="black"
          rounded
        >
          inner area
          <v-menu activator="parent" context-menu>
            <v-list class="py-1" density="compact">
              <v-list-item title="Only left click here" link>
                <v-menu activator="parent" target="cursor">
                  <v-list class="py-1" density="compact">
                    <v-list-item title="Inner action 1" link />
                    <v-list-item title="Inner action 2" link />
                  </v-list>
                </v-menu>
              </v-list-item>
              <v-list-item title="Right-click me again" link>
                <v-menu activator="parent" context-menu>
                  <v-list class="py-1" density="compact">
                    <v-list-item title="Inner action 1" link />
                    <v-list-item title="Inner action 2" link />
                  </v-list>
                </v-menu>
              </v-list-item>
            </v-list>
          </v-menu>
        </v-sheet>

        <v-menu activator="parent" context-menu>
          <v-list class="py-1" density="compact">
            <v-list-item title="Outer action" link />
            <v-list-item v-for="i in 2" :key="i" :title="`More ${i}`" append-icon="mdi-menu-right" link>
              <v-menu :open-on-focus="false" activator="parent" open-on-hover submenu>
                <v-list class="py-1" density="compact">
                  <v-list-item v-for="j in 3" :key="j" :title="`Item ${i} - ${j}`" link>
                    <template v-if="j === 3" #append>
                      <v-icon icon="mdi-menu-right" size="small" />
                    </template>
                    <v-menu v-if="j === 3" :open-on-focus="false" activator="parent" open-on-hover submenu>
                      <v-list class="py-1" density="compact">
                        <v-list-item v-for="k in 3" :key="k" :title="`Item ${i} - ${j} - ${k}`" link />
                      </v-list>
                    </v-menu>
                  </v-list-item>
                </v-list>
              </v-menu>
            </v-list-item>
          </v-list>
        </v-menu>
      </v-card>

      <v-menu
        v-model="menu"
        :target="menuTarget"
        content-class="custom-context-menu"
      >
        <v-list :items="items" class="py-1" item-props />
      </v-menu>
    </div>
  </v-app>
</template>

<script setup lang="ts">
  import { shallowRef } from 'vue'

  const menu = shallowRef(false)
  const menuTarget = shallowRef([0, 0] as [number, number])

  const items = [
    { title: 'Menu item 1', value: 1 },
    { title: 'Menu item 2', value: 2 },
    { title: 'Menu item 3', value: 3 },
  ]

  const colors = [
    'rgb(174, 123, 90)',
    'rgb(87, 66, 48)',
    'rgb(216, 199, 175)',
    'rgb(192, 180, 164)',
  ]

  function onCardClick (e: MouseEvent) {
    if (menu.value) {
      menu.value = false
    } else {
      menuTarget.value = [e.clientX, e.clientY]
      menu.value = true
    }
  }
</script>

[KaelWD]

close on "right-click outside"

#11982