21 lines
3.4 KiB
JSON
21 lines
3.4 KiB
JSON
{
|
|
"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": ""
|
|
}
|
|
]
|
|
}
|