# ivyforms/0.8.2/frontend/src/views/admin/testing/testing-page/TestingContextMenu.vue

The Innovative Form Builder – IvyForms, version 0.8.2. 62 lines.

- Page: https://pluginprobe.com/plugins/ivyforms/0.8.2/code/frontend/src/views/admin/testing/testing-page/TestingContextMenu.vue
- Raw: https://pluginprobe.com/plugins/ivyforms/0.8.2/raw/frontend/src/views/admin/testing/testing-page/TestingContextMenu.vue
- Modified: 2026-02-12T13:48:58+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/ivyforms/0.8.2/code/frontend/src/views/admin/testing/testing-page/TestingContextMenu.vue#L10-L20`.

```vue
<template>
  <h3>Menu Props Controls</h3>
  <div class="menu-controls">
    <label>
      Priority:
      <select>
        <!--      <select v-model="priority">-->
        <option value="primary">Primary</option>
        <option value="secondary">Secondary</option>
      </select>
    </label>

    <label>
      Style:
      <select>
        <!--      <select v-model="style">-->
        <option value="fill">Fill</option>
        <option value="ghost">Ghost</option>
      </select>
    </label>
  </div>

  <h3>Menu Component Preview</h3>
  <div class="menu-preview">
    <IvyButtonAction ref="menuButtonRef" @click="openMenu">Open Context Menu</IvyButtonAction>
    <IvyContextMenu />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useContextMenuStore } from '@/stores/contextMenuStore.ts'
import {
  createContextMenuAction,
  ContextMenuActionType,
} from '@/views/_components/context-menu/kit/ContextMenuActionType'
const contextMenuStore = useContextMenuStore()
const menuButtonRef = ref(null)

const actions = [
  createContextMenuAction(ContextMenuActionType.Edit),
  createContextMenuAction(ContextMenuActionType.Delete, {
    handler: () => console.log('Custom delete handler'),
  }),
  createContextMenuAction(ContextMenuActionType.Duplicate),
]

const openMenu = () => {
  contextMenuStore.openContextMenu({
    actions: actions,
    contextMenuButtonRef: menuButtonRef.value,
  })
}
</script>

<style lang="scss">
.menu-preview {
  width: 600px;
  align-items: center;
}
</style>

```