DropdownMenu.vue

<script setup lang="ts">
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

const basicItems = [
  [
    { label: 'View trace', icon: 'i-material-symbols-timeline' },
    { label: 'Inspect session', icon: 'i-material-symbols-manage-search' },
    { label: 'Replay event', icon: 'i-material-symbols-replay' },
  ],
  [
    { label: 'Cancel job', icon: 'i-material-symbols-stop-circle-outline', color: 'error' as const },
  ],
]

const colorItems = [
  [
    { label: 'Start agent', icon: 'i-material-symbols-rocket-launch-outline', color: 'primary' as const },
    { label: 'Schedule run', icon: 'i-material-symbols-schedule', color: 'secondary' as const },
    { label: 'Job succeeded', icon: 'i-material-symbols-check-circle-outline', color: 'success' as const },
    { label: 'View logs', icon: 'i-material-symbols-article-outline', color: 'info' as const },
    { label: 'Lease expiring', icon: 'i-material-symbols-timer-outline', color: 'warning' as const },
    { label: 'Kill runtime', icon: 'i-material-symbols-cancel-outline', color: 'error' as const },
    { label: 'Settings', icon: 'i-material-symbols-settings-outline', color: 'neutral' as const },
  ],
]

const checkboxItems = ref([
  [
    { label: 'Verbose tracing', type: 'checkbox' as const, checked: true },
    { label: 'Auto-renew lease', type: 'checkbox' as const, checked: false },
    { label: 'Emit heartbeat', type: 'checkbox' as const, checked: true },
  ],
])

const withKbdsItems = [
  [
    { label: 'Run job', icon: 'i-material-symbols-play-arrow-outline', kbds: ['⌘', 'R'] },
    { label: 'Pause agent', icon: 'i-material-symbols-pause-circle-outline', kbds: ['⌘', 'P'] },
    { label: 'Open terminal', icon: 'i-material-symbols-terminal', kbds: ['⌘', '`'] },
  ],
  [
    { label: 'Cancel run', icon: 'i-material-symbols-stop-circle-outline', color: 'error' as const, kbds: ['⌘', '⌫'] },
  ],
]

const nestedItems = [
  [
    {
      label: 'Deploy runtime',
      icon: 'i-material-symbols-cloud-upload-outline',
      children: [
        [
          { label: 'Production', icon: 'i-material-symbols-verified-outline', color: 'success' as const },
          { label: 'Staging', icon: 'i-material-symbols-construction' },
          { label: 'Dev sandbox', icon: 'i-material-symbols-science-outline' },
        ],
      ],
    },
    {
      label: 'Assign agent',
      icon: 'i-material-symbols-person-outline',
      children: [
        [
          { label: 'Agent-Alpha', icon: 'i-material-symbols-robot-outline' },
          { label: 'Agent-Beta', icon: 'i-material-symbols-robot-outline' },
          { label: 'Agent-Gamma', icon: 'i-material-symbols-robot-outline' },
        ],
      ],
    },
  ],
  [
    { label: 'View trace', icon: 'i-material-symbols-timeline' },
  ],
]

const withDescItems = [
  [
    {
      label: 'Full trace',
      description: 'Complete span tree for this job',
      icon: 'i-material-symbols-timeline',
    },
    {
      label: 'Session replay',
      description: 'Replay all events in order',
      icon: 'i-material-symbols-replay',
    },
    {
      label: 'Export logs',
      description: 'Download as NDJSON',
      icon: 'i-material-symbols-download-outline',
    },
  ],
]
</script>

<template>
  <div class="flex flex-col gap-8">
    <GallerySection title="Basic">
      <UDropdownMenu :items="basicItems">
        <UButton icon="i-material-symbols-more-vert" color="neutral" variant="outline">
          Job actions
        </UButton>
      </UDropdownMenu>
    </GallerySection>

    <GallerySection title="Colors">
      <UDropdownMenu :items="colorItems">
        <UButton icon="i-material-symbols-palette-outline" color="neutral" variant="outline">
          Colored items
        </UButton>
      </UDropdownMenu>
    </GallerySection>

    <GallerySection title="Sizes">
      <UDropdownMenu
        v-for="s in sizes"
        :key="s"
        :size="s"
        :items="[[{ label: 'Inspect session', icon: 'i-material-symbols-manage-search' }, { label: 'View trace', icon: 'i-material-symbols-timeline' }]]"
      >
        <UButton :size="s" color="neutral" variant="outline">{{ s }}</UButton>
      </UDropdownMenu>
    </GallerySection>

    <GallerySection title="Checkbox items">
      <UDropdownMenu :items="checkboxItems">
        <UButton icon="i-material-symbols-tune" color="neutral" variant="outline">
          Runtime options
        </UButton>
      </UDropdownMenu>
    </GallerySection>

    <GallerySection title="Keyboard shortcuts">
      <UDropdownMenu :items="withKbdsItems">
        <UButton icon="i-material-symbols-keyboard-outline" color="neutral" variant="outline">
          Agent controls
        </UButton>
      </UDropdownMenu>
    </GallerySection>

    <GallerySection title="Nested submenus">
      <UDropdownMenu :items="nestedItems">
        <UButton icon="i-material-symbols-account-tree-outline" color="neutral" variant="outline">
          Deploy &amp; assign
        </UButton>
      </UDropdownMenu>
    </GallerySection>

    <GallerySection title="With descriptions">
      <UDropdownMenu :items="withDescItems">
        <UButton icon="i-material-symbols-article-outline" color="neutral" variant="outline">
          Diagnostics
        </UButton>
      </UDropdownMenu>
    </GallerySection>

    <GallerySection title="With filter">
      <UDropdownMenu
        :items="[[
          { label: 'Agent-Alpha', icon: 'i-material-symbols-robot-outline' },
          { label: 'Agent-Beta', icon: 'i-material-symbols-robot-outline' },
          { label: 'Agent-Gamma', icon: 'i-material-symbols-robot-outline' },
          { label: 'Agent-Delta', icon: 'i-material-symbols-robot-outline' },
          { label: 'Runtime-Core', icon: 'i-material-symbols-memory' },
          { label: 'Runtime-Edge', icon: 'i-material-symbols-memory' },
        ]]"
        filter
      >
        <UButton icon="i-material-symbols-search" color="neutral" variant="outline">
          Select agent
        </UButton>
      </UDropdownMenu>
    </GallerySection>

    <GallerySection title="With arrow">
      <UDropdownMenu :items="basicItems" arrow>
        <UButton icon="i-material-symbols-arrow-drop-down" color="primary">
          Actions
        </UButton>
      </UDropdownMenu>
    </GallerySection>

    <GallerySection title="Disabled">
      <UDropdownMenu :items="basicItems" disabled>
        <UButton icon="i-material-symbols-more-vert" color="neutral" variant="outline" disabled>
          Disabled
        </UButton>
      </UDropdownMenu>
    </GallerySection>
  </div>
</template>