23 lines
2.8 KiB
JSON
23 lines
2.8 KiB
JSON
{
|
|
"name": "DrawerDialog",
|
|
"type": "registry:example",
|
|
"dependencies": [
|
|
"@vueuse/core"
|
|
],
|
|
"registryDependencies": [
|
|
"button",
|
|
"dialog",
|
|
"drawer",
|
|
"input",
|
|
"label"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "example/DrawerDialog.vue",
|
|
"content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\n// Reuse `form` section\nconst [UseTemplate, GridForm] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n <UseTemplate>\n <form class=\"grid items-start gap-4 px-4\">\n <div class=\"grid gap-2\">\n <Label html-for=\"email\">Email</Label>\n <Input id=\"email\" type=\"email\" default-value=\"shadcn@example.com\" />\n </div>\n <div class=\"grid gap-2\">\n <Label html-for=\"username\">Username</Label>\n <Input id=\"username\" default-value=\"@shadcn\" />\n </div>\n <Button type=\"submit\">\n Save changes\n </Button>\n </form>\n </UseTemplate>\n\n <Dialog v-if=\"isDesktop\" v-model:open=\"isOpen\">\n <DialogTrigger as-child>\n <Button variant=\"outline\">\n Edit Profile\n </Button>\n </DialogTrigger>\n <DialogContent class=\"sm:max-w-[425px]\">\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you're done.\n </DialogDescription>\n </DialogHeader>\n <GridForm />\n </DialogContent>\n </Dialog>\n\n <Drawer v-else v-model:open=\"isOpen\">\n <DrawerTrigger as-child>\n <Button variant=\"outline\">\n Edit Profile\n </Button>\n </DrawerTrigger>\n <DrawerContent>\n <DrawerHeader class=\"text-left\">\n <DrawerTitle>Edit profile</DrawerTitle>\n <DrawerDescription>\n Make changes to your profile here. Click save when you're done.\n </DrawerDescription>\n </DrawerHeader>\n <GridForm />\n <DrawerFooter class=\"pt-2\">\n <DrawerClose as-child>\n <Button variant=\"outline\">\n Cancel\n </Button>\n </DrawerClose>\n </DrawerFooter>\n </DrawerContent>\n </Drawer>\n</template>\n",
|
|
"type": "registry:example",
|
|
"target": ""
|
|
}
|
|
]
|
|
}
|