fix(menu): vue sfc and context menu

examples/nuxt-ts/pages/context-menu.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import * as menu from "@zag-js/menu"
+import { normalizeProps, useMachine } from "@zag-js/vue"
+
+const [state, send] = useMachine(
+  menu.machine({
+    id: "v1",
+    onSelect: console.log,
+  }),
+)
+
+const api = computed(() => menu.connect(state.value, send, normalizeProps))
+</script>
+
+<template>
+  <main className="context-menu">
+    <div v-bind="api.contextTriggerProps">Right Click here</div>
+    <Teleport to="body">
+      <div v-bind="api.positionerProps">
+        <ul v-bind="api.contentProps">
+          <li v-bind="api.getItemProps({ id: 'edit' })">Edit</li>
+          <li v-bind="api.getItemProps({ id: 'duplicate' })">Duplicate</li>
+          <li v-bind="api.getItemProps({ id: 'delete' })">Delete</li>
+          <li v-bind="api.getItemProps({ id: 'export' })">Export...</li>
+        </ul>
+      </div>
+    </Teleport>
+  </main>
+
+  <Toolbar>
+    <StateVisualizer :state="state" />
+  </Toolbar>
+</template>

packages/machines/menu/src/menu.connect.ts

@@ -35,6 +35,7 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
   const popperStyles = getPlacementStyles({
     ...state.context.positioning,
     placement: state.context.currentPlacement,
+    anchorPoint: state.context.anchorPoint,
   })
 
   const api = {

packages/utilities/popper/src/get-styles.ts

@@ -13,8 +13,13 @@ const ARROW_FLOATING_STYLE = {
   right: "rotate(315deg)",
 } as const
 
-export function getPlacementStyles(options: PositioningOptions = {}) {
-  const { placement = "bottom", sameWidth, fitViewport, strategy = "absolute" } = options
+type PlacementStyleOptions = PositioningOptions & {
+  anchorPoint?: { x: number; y: number } | null
+}
+
+export function getPlacementStyles(options: PlacementStyleOptions = {}) {
+  const { placement = "bottom", sameWidth, fitViewport, strategy = "absolute", anchorPoint } = options
+  const point = anchorPoint || { x: 0, y: 0 }
 
   return {
     arrow: {
@@ -44,6 +49,8 @@ export function getPlacementStyles(options: PositioningOptions = {}) {
       maxHeight: fitViewport ? "var(--available-height)" : undefined,
       top: "0px",
       left: "0px",
+      "--x": `${point.x}px`,
+      "--y": `${point.y}px`,
       transform: `translate3d(var(--x), var(--y), 0)`,
     } as const,
   }