Context menu with checkbox items.

<!--
  `checked`/`onCheckedChange` (Radix) в оригинале -> `v-model` на родном
  reka-ui пропе `modelValue`, см. docs/PORTING.md ("Расхождение имени
  пропа: checked -> modelValue/v-model").
-->
<script setup lang="ts">
import { ref } from "vue"
import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuTrigger } from "@/components/ui/context-menu"

const showBookmarksBar = ref(true)
const showFullUrls = ref(false)
const showDeveloperTools = ref(true)
</script>

<template>
  <div class="flex w-full items-center justify-center p-12">
    <ContextMenu>
      <ContextMenuTrigger class="text-muted-foreground rounded-lg flex aspect-[2/0.5] w-full max-w-[300px] items-center justify-center border border-dashed text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuGroup>
          <ContextMenuCheckboxItem v-model="showBookmarksBar">
            Show Bookmarks Bar
          </ContextMenuCheckboxItem>
          <ContextMenuCheckboxItem v-model="showFullUrls">
            Show Full URLs
          </ContextMenuCheckboxItem>
          <ContextMenuCheckboxItem v-model="showDeveloperTools">
            Show Developer Tools
          </ContextMenuCheckboxItem>
        </ContextMenuGroup>
      </ContextMenuContent>
    </ContextMenu>
  </div>
</template>