Pipeline stage mover with dropdown

<script setup lang="ts">
import { ref } from "vue"
import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"

const stages = ["Lead", "Qualified", "Proposal", "Negotiation", "Closed Won"]

const stageIndex = ref(2)
</script>

<template>
  <ButtonGroup>
    <Button
      variant="outline"
      size="icon"
      aria-label="Previous stage"
      :disabled="stageIndex === 0"
      @click="stageIndex = stageIndex - 1"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
        class="lucide lucide-chevron-left"
      >
        <path d="m15 18-6-6 6-6" />
      </svg>
    </Button>

    <DropdownMenu>
      <DropdownMenuTrigger as-child>
        <Button variant="outline" class="min-w-36 justify-between">
          <span class="truncate">{{ stages[stageIndex] }}</span>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
            class="lucide lucide-chevrons-up-down size-3.5 shrink-0 opacity-50"
          >
            <path d="m7 15 5 5 5-5" />
            <path d="m7 9 5-5 5 5" />
          </svg>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent class="w-44">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Jump to stage</DropdownMenuLabel>
          <DropdownMenuItem
            v-for="(stage, i) in stages"
            :key="stage"
            @click="stageIndex = i"
          >
            {{ stage }}
            <svg
              v-if="i === stageIndex"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
              class="lucide lucide-check text-primary ml-auto size-3.5"
            >
              <path d="M20 6 9 17l-5-5" />
            </svg>
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>

    <Button
      variant="outline"
      size="icon"
      aria-label="Next stage"
      :disabled="stageIndex === stages.length - 1"
      @click="stageIndex = stageIndex + 1"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
        class="lucide lucide-chevron-right"
      >
        <path d="m9 18 6-6-6-6" />
      </svg>
    </Button>
  </ButtonGroup>
</template>