feat(useContextMenu): new function

packages/.vitepress/theme/styles/demo.css

@@ -67,9 +67,9 @@
   }
 
   button.red {
-    --c-brand: #f56c6c;
-    --c-brand-dark: #e41c1c;
-    --c-brand-active: #e94c4c;
+    --vp-c-brand: #f56c6c;
+    --vp-c-brand-dark: #e41c1c;
+    --vp-c-brand-active: #e94c4c;
   }
 
   button:hover {

packages/components/index.ts

@@ -7,6 +7,7 @@ export * from '../core/useActiveElement/component'
 export * from '../core/useBattery/component'
 export * from '../core/useBrowserLocation/component'
 export * from '../core/useColorMode/component'
+export * from '../core/useContextMenu/component'
 export * from '../core/useDark/component'
 export * from '../core/useDeviceMotion/component'
 export * from '../core/useDeviceOrientation/component'

packages/core/index.ts

@@ -20,6 +20,7 @@ export * from './useCached'
 export * from './useClipboard'
 export * from './useColorMode'
 export * from './useConfirmDialog'
+export * from './useContextMenu'
 export * from './useCssVar'
 export * from './useCurrentElement'
 export * from './useCycleList'

packages/core/useContextMenu/Area.vue

@@ -0,0 +1,17 @@
+<template>
+  <div
+    class="el"
+    w="40"
+    h="40"
+    bg="gray-400/20"
+    border="rounded"
+    flex="~"
+    place="content-center"
+    select="none"
+    text-center
+  >
+    <div m="auto">
+      <slot />
+    </div>
+  </div>
+</template>

packages/core/useContextMenu/component.ts

@@ -0,0 +1,30 @@
+import { defineComponent, h, reactive, ref } from 'vue-demi'
+import type { RenderableComponent, UseContextMenuOptions } from '@vueuse/core'
+import { useContextMenu } from '@vueuse/core'
+export interface useContextMenuProps extends UseContextMenuOptions, RenderableComponent {
+
+}
+
+export const UseContextMenu = defineComponent<useContextMenuProps>({
+  name: 'UseContextMenu',
+  props: ['hideOnClick', 'onVisibleChange', 'target', 'as'] as unknown as undefined,
+  setup(props, { slots }) {
+    const menuElementRef = ref()
+    const targetRef = ref()
+    const data = reactive(useContextMenu(menuElementRef, {
+      ...props,
+      target: slots.target ? targetRef : undefined,
+    }))
+
+    const tag = props.as || 'div'
+    return () => {
+      if (slots.target && slots.menu) {
+        return h(tag, [
+          h(tag, { ref: targetRef }, slots.target(data)),
+          h(tag, { ref: menuElementRef }, slots.menu(data)),
+        ])
+      }
+      return h(props.as || 'div', { ref: menuElementRef }, (slots.menu || slots.default)?.(data))
+    }
+  },
+})

packages/core/useContextMenu/demo.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { useContextMenu } from '@vueuse/core'
+import { useToggle } from '@vueuse/shared'
+import { ref } from 'vue'
+import Area from './area.vue'
+import { UseContextMenu } from './component'
+
+const menuRef = ref<HTMLElement | null>(null)
+const targetRef = ref<HTMLElement | null>(null)
+const [hideOnClick, toggle] = useToggle(true)
+
+const { visible, position, stop, enabled } = useContextMenu(menuRef, {
+  hideOnClick,
+  target: targetRef,
+})
+</script>
+
+<template>
+  <div>
+    <div ref="menuRef" class="menu">
+      <div class="menu-item">
+        copy
+      </div>
+      <div class="menu-item">
+        paste
+      </div>
+      <div class="menu-item">
+        cut
+      </div>
+    </div>
+    <div flex gap-2>
+      <Area ref="targetRef">
+        Right click on me!
+      </Area>
+      <div>
+        <div>
+          <span mr-2>hideOnClick: <BooleanDisplay :value="hideOnClick" /> </span>
+          <button @click="toggle()">
+            toggle
+          </button>
+        </div>
+        <p>visible: <BooleanDisplay :value="visible" /></p>
+        <p>enabled: <BooleanDisplay :value="enabled" /></p>
+        <p>position: {{ position }}</p>
+        <button :class="{ red: enabled }" @click="enabled = !enabled">
+          {{ enabled ? 'disable' : 'enable' }}
+        </button>
+        <button @click="stop()">
+          stop
+        </button>
+      </div>
+    </div>
+  </div>
+  <div h="1px" bg="$vp-c-divider-light" m="block-4" />
+  <UseContextMenu :hide-on-click="true">
+    <!-- menu -->
+    <template #menu="{ stop }">
+      <div class="menu">
+        <div class="menu-item">
+          🚀 menu 1
+        </div>
+        <div class="menu-item">
+          🎁 menu 2
+        </div>
+        <div class="menu-item">
+          💖 menu 3
+        </div>
+        <div class="menu-item" @click="stop()">
+          🚫 Stop Me
+        </div>
+      </div>
+    </template>
+    <!-- target -->
+    <template #target="{ visible, stop, position }">
+      <div flex gap-2>
+        <Area>
+          <p text-red>
+            Renderless component
+          </p>
+          <p>
+            Right click on me!
+          </p>
+        </Area>
+        <div>
+          <p>hideOnClick: <BooleanDisplay :value="true" /></p>
+          <p>visible: <BooleanDisplay :value="visible" /></p>
+          <p>position: {{ position }}</p>
+          <button @click="stop()">
+            stop
+          </button>
+        </div>
+      </div>
+    </template>
+  </UseContextMenu>
+
+  <!-- global menu -->
+  <UseContextMenu v-slot="{ stop }" class="menu" z-20>
+    <div class="menu-item">
+      ✅ Global 1
+    </div>
+    <div class="menu-item">
+      ✅ Global 2
+    </div>
+    <div class="menu-item">
+      ✅ Global 3
+    </div>
+    <div class="menu-item" @click="stop()">
+      🚫 stop me
+    </div>
+  </UseContextMenu>
+</template>
+
+<style lang="postcss" scoped>
+.menu {
+    @apply bg-$vp-c-bg overflow-hidden p-2 shadow-xl rounded-md b-1 b-color-gray-400/30;
+    &-item {
+        @apply hover-bg-$vp-c-bg-mute hover-color-$vp-c-brand cursor-pointer px-2 rounded capitalize;
+    }
+}
+</style>

packages/core/useContextMenu/index.md

@@ -0,0 +1,100 @@
+---
+category: Elements
+---
+
+# useContextMenu
+
+add [`contextMenu`](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event) to your vue app with ease.
+
+::: tip
+After calling `stop()`, all event listeners related to the `contextMenu` will be irreversibly removed, later changes on the `enabled` ref will **NOT** have any effect.\
+If you want to temporarily `disable` / `enable` it, use `enabled.value = false` / `enabled.value = true` instead.
+:::
+
+## Usage
+
+```html
+<script setup lang="ts">
+import { useContextMenu } from '@vueuse/core'
+import { ref } from 'vue'
+
+const menuRef = ref<HTMLElement | null>(null)
+const targetRef = ref<HTMLElement | null>(null)
+const hideOnClick = ref(false)
+
+const { visible, position, enabled, stop } = useContextMenu(menuRef, {
+  hideOnClick,
+  target: targetRef,
+})
+</script>
+
+<template>
+  <div>
+    <!-- menu element -->
+    <div ref="menuRef">
+      <div>copy</div>
+      <div>paste</div>
+      <div>cut</div>
+    </div>
+    <!-- the element that the menu applies to -->
+    <div ref="targetRef" w-40 h-40>
+      Right click on me!
+    </div>
+    <!-- other element -->
+    <div>
+      <button @click="enabled = !enabled">
+        {{ enabled ? 'disable' : 'enable' }}
+      </button>
+      <button @click="stop()">
+        stop
+      </button>
+    </div>
+  </div>
+</template>
+```
+
+## Component Usage
+
+### Specify the `menu` & `target` with named slots
+
+The `menu` slot specifies the menu element, the `target` slot specifies the element that `menu` applies to. 
+
+```html
+<UseContextMenu>
+  <template #menu>
+    <div class="menu">
+    <div class="menu-item">
+      🚀 menu 1
+    </div>
+    <div class="menu-item">
+      🎁 menu 2
+    </div>
+    <div class="menu-item">
+      💖 menu 3
+    </div>
+    </div>
+  </template>
+  <template #target="{ visible, stop }">
+    <Area wa>
+      <p>Renderless component</p>
+      <p>visible: <BooleanDisplay :value="visible" /></p>
+      <button @click="stop()">stop</button>
+    </Area>
+  </template>
+</UseContextMenu>
+```
+
+### Global menu
+
+Without specifying the `target`, the menu will be applied to `window`.
+
+```html
+<UseContextMenu v-slot="{ stop }">
+    <div>✅ Global 1</div>
+    <div>✅ Global 2</div>
+    <div>✅ Global 3</div>
+    <div @click="stop()">
+      🤚 Stop me
+    </div>
+</UseContextMenu>
+```