{
  "name": "ComboboxResponsive",
  "type": "registry:example",
  "dependencies": [
    "@vueuse/core"
  ],
  "registryDependencies": [
    "button",
    "command",
    "drawer",
    "popover"
  ],
  "files": [
    {
      "path": "example/ComboboxResponsive.vue",
      "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else :open=\"isOpen\" @update:open=\"(newOpenValue) => isOpen = newOpenValue\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
      "type": "registry:example",
      "target": "ComboboxResponsive.vue"
    }
  ]
}