-
Notifications
You must be signed in to change notification settings - Fork 296
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
29 changed files
with
900 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| --- | ||
| title: Drawer | ||
| description: A drawer component for vue. | ||
| source: apps/www/src/lib/registry/default/ui/drawer | ||
| primitive: https://github.com/radix-vue/vaul-vue | ||
| --- | ||
|
|
||
| <ComponentPreview name="DrawerDemo" /> | ||
|
|
||
| ## About | ||
|
|
||
| Drawer is built on top of [Vaul Vue](https://github.com/radix-vue/vaul-vue). | ||
|
|
||
| ## Installation | ||
|
|
||
| ```bash | ||
| npx shadcn-vue@latest add drawer | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ```vue showLineNumbers | ||
| <script setup lang="ts"> | ||
| import { | ||
| Drawer, | ||
| DrawerClose, | ||
| DrawerContent, | ||
| DrawerDescription, | ||
| DrawerFooter, | ||
| DrawerHeader, | ||
| DrawerTitle, | ||
| DrawerTrigger, | ||
| } from '@/components/ui/drawer' | ||
| </script> | ||
| <template> | ||
| <Drawer> | ||
| <DrawerTrigger>Open</DrawerTrigger> | ||
| <DrawerContent> | ||
| <DrawerHeader> | ||
| <DrawerTitle>Are you absolutely sure?</DrawerTitle> | ||
| <DrawerDescription>This action cannot be undone.</DrawerDescription> | ||
| </DrawerHeader> | ||
| <DrawerFooter> | ||
| <Button>Submit</Button> | ||
| <DrawerClose> | ||
| <Button variant="outline"> | ||
| Cancel | ||
| </Button> | ||
| </DrawerClose> | ||
| </DrawerFooter> | ||
| </DrawerContent> | ||
| </Drawer> | ||
| </template> | ||
| ``` | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Responsive Dialog | ||
|
|
||
| You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` component on desktop and a `Drawer` on mobile. | ||
|
|
||
| <ComponentPreview name="DrawerDialog" /> |
111 changes: 111 additions & 0 deletions
111
apps/www/src/lib/registry/default/example/DrawerDemo.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| <script setup lang="ts"> | ||
| import { ref } from 'vue' | ||
| import { Minus, Plus } from 'lucide-vue-next' | ||
| import { VisStackedBar, VisXYContainer } from '@unovis/vue' | ||
| import { Button } from '@/lib/registry/default/ui/button' | ||
| import { | ||
| Drawer, | ||
| DrawerClose, | ||
| DrawerContent, | ||
| DrawerDescription, | ||
| DrawerFooter, | ||
| DrawerHeader, | ||
| DrawerTitle, | ||
| DrawerTrigger, | ||
| } from '@/lib/registry/default/ui/drawer' | ||
| const goal = ref(350) | ||
| type Data = typeof data[number] | ||
| const data = [ | ||
| { goal: 400 }, | ||
| { goal: 300 }, | ||
| { goal: 200 }, | ||
| { goal: 300 }, | ||
| { goal: 200 }, | ||
| { goal: 278 }, | ||
| { goal: 189 }, | ||
| { goal: 239 }, | ||
| { goal: 300 }, | ||
| { goal: 200 }, | ||
| { goal: 278 }, | ||
| { goal: 189 }, | ||
| { goal: 349 }, | ||
| ] | ||
| </script> | ||
|
|
||
| <template> | ||
| <Drawer> | ||
| <DrawerTrigger as-child> | ||
| <Button variant="outline"> | ||
| Open Drawer | ||
| </Button> | ||
| </DrawerTrigger> | ||
| <DrawerContent> | ||
| <div class="mx-auto w-full max-w-sm"> | ||
| <DrawerHeader> | ||
| <DrawerTitle>Move Goal</DrawerTitle> | ||
| <DrawerDescription>Set your daily activity goal.</DrawerDescription> | ||
| </DrawerHeader> | ||
| <div class="p-4 pb-0"> | ||
| <div class="flex items-center justify-center space-x-2"> | ||
| <Button | ||
| variant="outline" | ||
| size="icon" | ||
| class="h-8 w-8 shrink-0 rounded-full" | ||
| :disabled="goal <= 200" | ||
| @click="goal -= 10" | ||
| > | ||
| <Minus class="h-4 w-4" /> | ||
| <span class="sr-only">Decrease</span> | ||
| </Button> | ||
| <div class="flex-1 text-center"> | ||
| <div class="text-7xl font-bold tracking-tighter"> | ||
| {{ goal }} | ||
| </div> | ||
| <div class="text-[0.70rem] uppercase text-muted-foreground"> | ||
| Calories/day | ||
| </div> | ||
| </div> | ||
| <Button | ||
| variant="outline" | ||
| size="icon" | ||
| class="h-8 w-8 shrink-0 rounded-full" | ||
| :disabled="goal >= 400" | ||
| @click="goal += 10" | ||
| > | ||
| <Plus class="h-4 w-4" /> | ||
| <span class="sr-only">Increase</span> | ||
| </Button> | ||
| </div> | ||
| <div class="my-3 px-3 h-[120px]"> | ||
| <VisXYContainer | ||
| :data="data" | ||
| class="h-[120px]" | ||
| :style="{ | ||
| 'opacity': 0.9, | ||
| '--theme-primary': `hsl(var(--foreground))`, | ||
| }" | ||
| > | ||
| <VisStackedBar | ||
| :x="(d: Data, i :number) => i" | ||
| :y="(d: Data) => d.goal" | ||
| color="var(--theme-primary)" | ||
| :bar-padding="0.1" | ||
| :rounded-corners="0" | ||
| /> | ||
| </VisXYContainer> | ||
| </div> | ||
| </div> | ||
| <DrawerFooter> | ||
| <Button>Submit</Button> | ||
| <DrawerClose as-child> | ||
| <Button variant="outline"> | ||
| Cancel | ||
| </Button> | ||
| </DrawerClose> | ||
| </DrawerFooter> | ||
| </div> | ||
| </DrawerContent> | ||
| </Drawer> | ||
| </template> |
90 changes: 90 additions & 0 deletions
90
apps/www/src/lib/registry/default/example/DrawerDialog.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| <script lang="ts" setup> | ||
| import { ref } from 'vue' | ||
| import { createReusableTemplate, useMediaQuery } from '@vueuse/core' | ||
| import { Button } from '@/lib/registry/default/ui/button' | ||
| import { | ||
| Dialog, | ||
| DialogContent, | ||
| DialogDescription, | ||
| DialogHeader, | ||
| DialogTitle, | ||
| DialogTrigger, | ||
| } from '@/lib/registry/default/ui/dialog' | ||
| import { | ||
| Drawer, | ||
| DrawerClose, | ||
| DrawerContent, | ||
| DrawerDescription, | ||
| DrawerFooter, | ||
| DrawerHeader, | ||
| DrawerTitle, | ||
| DrawerTrigger, | ||
| } from '@/lib/registry/default/ui/drawer' | ||
| import { Label } from '@/lib/registry/default/ui/label' | ||
| import { Input } from '@/lib/registry/default/ui/input' | ||
| // Reuse `form` section | ||
| const [UseTemplate, GridForm] = createReusableTemplate() | ||
| const isDesktop = useMediaQuery('(min-width: 768px)') | ||
| const isOpen = ref(false) | ||
| </script> | ||
|
|
||
| <template> | ||
| <UseTemplate> | ||
| <form class="grid items-start gap-4 px-4"> | ||
| <div class="grid gap-2"> | ||
| <Label html-for="email">Email</Label> | ||
| <Input id="email" type="email" default-value="shadcn@example.com" /> | ||
| </div> | ||
| <div class="grid gap-2"> | ||
| <Label html-for="username">Username</Label> | ||
| <Input id="username" default-value="@shadcn" /> | ||
| </div> | ||
| <Button type="submit"> | ||
| Save changes | ||
| </Button> | ||
| </form> | ||
| </UseTemplate> | ||
|
|
||
| <Dialog v-if="isDesktop" v-model:open="isOpen"> | ||
| <DialogTrigger as-child> | ||
| <Button variant="outline"> | ||
| Edit Profile | ||
| </Button> | ||
| </DialogTrigger> | ||
| <DialogContent class="sm:max-w-[425px]"> | ||
| <DialogHeader> | ||
| <DialogTitle>Edit profile</DialogTitle> | ||
| <DialogDescription> | ||
| Make changes to your profile here. Click save when you're done. | ||
| </DialogDescription> | ||
| </DialogHeader> | ||
| <GridForm /> | ||
| </DialogContent> | ||
| </Dialog> | ||
|
|
||
| <Drawer v-else v-model:open="isOpen"> | ||
| <DrawerTrigger as-child> | ||
| <Button variant="outline"> | ||
| Edit Profile | ||
| </Button> | ||
| </DrawerTrigger> | ||
| <DrawerContent> | ||
| <DrawerHeader class="text-left"> | ||
| <DrawerTitle>Edit profile</DrawerTitle> | ||
| <DrawerDescription> | ||
| Make changes to your profile here. Click save when you're done. | ||
| </DrawerDescription> | ||
| </DrawerHeader> | ||
| <GridForm /> | ||
| <DrawerFooter class="pt-2"> | ||
| <DrawerClose as-child> | ||
| <Button variant="outline"> | ||
| Cancel | ||
| </Button> | ||
| </DrawerClose> | ||
| </DrawerFooter> | ||
| </DrawerContent> | ||
| </Drawer> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <script lang="ts" setup> | ||
| import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue' | ||
| import { DrawerRoot } from 'vaul-vue' | ||
| import { useForwardPropsEmits } from 'radix-vue' | ||
| const props = withDefaults(defineProps<DrawerRootProps>(), { | ||
| shouldScaleBackground: true, | ||
| }) | ||
| const emits = defineEmits<DrawerRootEmits>() | ||
| const forwarded = useForwardPropsEmits(props, emits) | ||
| </script> | ||
|
|
||
| <template> | ||
| <DrawerRoot v-bind="forwarded"> | ||
| <slot /> | ||
| </DrawerRoot> | ||
| </template> |
28 changes: 28 additions & 0 deletions
28
apps/www/src/lib/registry/default/ui/drawer/DrawerContent.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <script lang="ts" setup> | ||
| import { DrawerContent, DrawerPortal } from 'vaul-vue' | ||
| import type { DialogContentEmits, DialogContentProps } from 'radix-vue' | ||
| import { useForwardPropsEmits } from 'radix-vue' | ||
| import type { HtmlHTMLAttributes } from 'vue' | ||
| import DrawerOverlay from './DrawerOverlay.vue' | ||
| import { cn } from '@/lib/utils' | ||
| const props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>() | ||
| const emits = defineEmits<DialogContentEmits>() | ||
| const forwarded = useForwardPropsEmits(props, emits) | ||
| </script> | ||
|
|
||
| <template> | ||
| <DrawerPortal> | ||
| <DrawerOverlay /> | ||
| <DrawerContent | ||
| v-bind="forwarded" :class="cn( | ||
| 'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background', | ||
| props.class, | ||
| )" | ||
| > | ||
| <div class="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" /> | ||
| <slot /> | ||
| </DrawerContent> | ||
| </DrawerPortal> | ||
| </template> |
Oops, something went wrong.