{
  "name": "ComboboxPopover",
  "type": "registry:example",
  "dependencies": [],
  "registryDependencies": [
    "utils",
    "button",
    "command",
    "popover"
  ],
  "files": [
    {
      "path": "example/ComboboxPopover.vue",
      "content": "<script setup lang=\"ts\">\nimport type { Icon } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  ArrowUpCircle,\n  CheckCircle2,\n  Circle,\n  HelpCircle,\n  XCircle,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n  icon: Icon\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n    icon: HelpCircle,\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n    icon: Circle,\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n    icon: ArrowUpCircle,\n  },\n  {\n    value: 'done',\n    label: 'Done',\n    icon: CheckCircle2,\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n    icon: XCircle,\n  },\n]\n\nconst open = ref(false)\n// const value = ref<typeof statuses[number]>()\n\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            <component :is=\"selectedStatus?.icon\" class=\"mr-2 h-4 w-4 shrink-0\" />\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"(value) => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                <component\n                  :is=\"status.icon\"\n                  :key=\"status.value\"\n                  :class=\"cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',\n                  )\"\n                />\n                <span>{{ status.label }}</span>\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}