{
  "name": "DrawerDemo",
  "type": "registry:example",
  "dependencies": [
    "@unovis/vue",
    "@unovis/ts"
  ],
  "registryDependencies": [
    "button",
    "drawer"
  ],
  "files": [
    {
      "path": "example/DrawerDemo.vue",
      "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Minus, Plus } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <Minus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <Plus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}