chore: update

Author: segunadebayo

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

@@ -13,7 +13,7 @@ const api = computed(() => menu.connect(service, normalizeProps))
 <template>
   <main className="context-menu">
     <div v-bind="api.getContextTriggerProps()">Right Click here</div>
-    <Teleport to="body">
+    <Teleport to="#teleports"">
       <div v-bind="api.getPositionerProps()">
         <ul v-bind="api.getContentProps()">
           <li v-bind="api.getItemProps({ value: 'edit' })">Edit</li>

examples/nuxt-ts/pages/hover-card.vue

@@ -17,7 +17,7 @@ const api = computed(() => hoverCard.connect(service, normalizeProps))
     <div style="display: flex; gap: 50px">
       <a href="https://twitter.com/zag_js" target="_blank" v-bind="api.getTriggerProps()"> Twitter </a>
 
-      <Teleport to="body" v-if="api.open">
+      <Teleport to="#teleports" v-if="api.open">
         <div v-bind="api.getPositionerProps()">
           <div v-bind="api.getContentProps()">
             <div v-bind="api.getArrowProps()">

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

@@ -42,7 +42,7 @@ const checkboxes = computed(() =>
   <main>
     <div>
       <button v-bind="api.getTriggerProps()">Actions <span v-bind="api.getIndicatorProps()">▾</span></button>
-      <Teleport to="body">
+      <Teleport to="#teleports">
         <div v-bind="api.getPositionerProps()">
           <div v-bind="api.getContentProps()">
             <div v-for="item in radios" :key="item.value" v-bind="api.getOptionItemProps(item)">

examples/nuxt-ts/pages/menu.vue

@@ -17,7 +17,7 @@ const api = computed(() => menu.connect(service, normalizeProps))
   <main>
     <div>
       <button v-bind="api.getTriggerProps()">Actions <span v-bind="api.getIndicatorProps()">▾</span></button>
-      <Teleport to="body">
+      <Teleport to="#teleports">
         <div v-bind="api.getPositionerProps()">
           <ul v-bind="api.getContentProps()">
             <li v-bind="api.getItemProps({ value: 'edit' })">Edit</li>

examples/nuxt-ts/pages/popover.vue

@@ -20,7 +20,7 @@ const api = computed(() => popover.connect(service, normalizeProps))
         Click me
         <div v-bind="api.getIndicatorProps()">{{ ">" }}</div>
       </button>
-      <Teleport to="body" :disabled="!api.portalled">
+      <Teleport to="#teleports" :disabled="!api.portalled">
         <div v-bind="api.getPositionerProps()">
           <div data-testid="popover-content" class="popover-content" v-bind="api.getContentProps()">
             <div v-bind="api.getArrowProps()">

examples/nuxt-ts/pages/select.vue

@@ -37,7 +37,7 @@ const api = computed(() => select.connect(service, normalizeProps))
           <option v-for="option in selectData" :key="option.value" :value="option.value">{{ option.label }}</option>
         </select>
       </form>
-      <Teleport to="body">
+      <Teleport to="#teleports">
         <div v-bind="api.getPositionerProps()">
           <ul v-bind="api.getContentProps()">
             <li v-for="item in selectData" :key="item.value" v-bind="api.getItemProps({ item })">

examples/nuxt-ts/pages/time-picker.vue

@@ -21,7 +21,7 @@ const api = computed(() => timePicker.connect(service, normalizeProps))
         <button v-bind="api.getClearTriggerProps()">❌</button>
       </div>
 
-      <Teleport to="body">
+      <Teleport to="#teleports">
         <div v-bind="api.getPositionerProps()">
           <div v-bind="api.getContentProps()">
             <div v-bind="api.getColumnProps({ unit: 'hour' })">

examples/nuxt-ts/pages/tooltip.vue

@@ -16,7 +16,7 @@ const api = computed(() => tooltip.connect(service, normalizeProps))
   <div style="padding: 40px">
     <pre>{{ state.value }}</pre>
     <button ref="ref" v-bind="api.getTriggerProps()">Hover me</button>
-    <Teleport to="body">
+    <Teleport to="#teleports">
       <div v-if="api.open" v-bind="api.getPositionerProps()">
         <div v-bind="api.getContentProps()">Tooltip with a lot of text probably</div>
       </div>

examples/nuxt-ts/pages/tour.vue

@@ -39,7 +39,7 @@ const open = computed(() => api.value.open && api.value.step)
       </div>
     </div>
 
-    <Teleport to="body" v-if="open">
+    <Teleport to="#teleports" v-if="open">
       <div v-if="api.step?.backdrop" v-bind="api.getBackdropProps()" />
       <div v-bind="api.getSpotlightProps()" />
       <div v-bind="api.getPositionerProps()">

packages/frameworks/vue/src/machine.ts

@@ -80,18 +80,24 @@ export function useMachine<T extends BaseSchema>(
 
   let previousEventRef: any = { current: null }
   let eventRef = { current: { type: "__init__" } }
-  const currentEvent = () => eventRef.current
-  const previousEvent = () => previousEventRef.current
+
+  const getEvent = () => ({
+    ...eventRef.current,
+    current() {
+      return eventRef.current
+    },
+    previous() {
+      return previousEventRef.current
+    },
+  })
 
   const refs = useRefs(machine.refs?.({ prop, context: ctx }) ?? {})
 
   const getParams = (): any => ({
     state,
     context: ctx,
-    event: {
-      ...eventRef,
-      current: currentEvent,
-      previous: previousEvent,
+    get event() {
+      return getEvent()
     },
     prop,
     send,
@@ -150,7 +156,9 @@ export function useMachine<T extends BaseSchema>(
     return (
       machine.computed?.[key]({
         context: ctx as any,
-        event: eventRef.current,
+        get event() {
+          return getEvent()
+        },
         prop,
         refs,
         get scope() {
@@ -216,8 +224,8 @@ export function useMachine<T extends BaseSchema>(
   }
 
   const send = (event: any) => {
-    previousEventRef = eventRef
-    eventRef = event
+    previousEventRef.current = eventRef.current
+    eventRef.current = event
 
     let currentState = getCurrentState()
 
@@ -263,10 +271,8 @@ export function useMachine<T extends BaseSchema>(
     scope: scope.value,
     refs,
     computed,
-    event: {
-      ...eventRef,
-      current: currentEvent,
-      previous: previousEvent,
+    get event() {
+      return getEvent()
     },
   } as Service<T>
 }