Command with shortcuts

<!--
  Порт c-command-2 ("Command with shortcuts", CommandDialog) —
  .agent-tmp/reui-upstream/registry-reui/bases/radix/components/command/c-command-2.tsx

  `CommandDialog` — плавающий слой (Dialog). Несколько одновременно открытых
  fixed-диалогов на одной странице нестабильны: порядок монтирования порталов
  во Vue и React отличается, наверху оказывается разный диалог (см.
  docs/PORTING.md, раздел "command"). Поэтому, как и другие плавающие слои
  (popover/dropdown-menu/hover-card, §5/§10), диалог проверяется ЗАКРЫТЫМ —
  это и есть начальное состояние апстрима (`useState(false)`), верность
  оригиналу, а не поблажка (§4a). `DialogContent` не монтируется, пока диалог
  не открыт, поэтому `IconPlaceholder`/сетевые изображения внутри него не
  проверяются и не адаптированы.
-->
<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut } from "@/components/ui/command"
</script>

<template>
  <Button variant="outline">Open Command</Button>
  <CommandDialog>
    <Command class="**:data-[selected=true]:bg-muted **:data-selected:bg-transparent">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Settings">
          <CommandItem value="Profile">
            <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">
              <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
              <circle cx="12" cy="7" r="4" />
            </svg>
            <span>Profile</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem value="Billing">
            <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">
              <rect width="20" height="14" x="2" y="5" rx="2" />
              <line x1="2" x2="22" y1="10" y2="10" />
            </svg>
            <span>Billing</span>
            <CommandShortcut>⌘B</CommandShortcut>
          </CommandItem>
          <CommandItem value="Settings">
            <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">
              <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
              <circle cx="12" cy="12" r="3" />
            </svg>
            <span>Settings</span>
            <CommandShortcut>⌘S</CommandShortcut>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </CommandDialog>
</template>