Skip to content

Commit 6f7ff52

Browse files
dbzx10299dbzx10299
committed
feat: add geist-vaul drawer example
1 parent 6507f1d commit 6f7ff52

File tree

7 files changed

+171
-5
lines changed

7 files changed

+171
-5
lines changed

‎docs/.vitepress/components/Drawer/GeistDefaultDrawer.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<script setup>
2+
import { Drawer } from 'geist-vaul'
3+
import './drawer.css'
4+
</script>
5+
6+
<template>
7+
<Drawer.Root>
8+
<Drawer.Trigger data-trigger>
9+
Open
10+
</Drawer.Trigger>
11+
<Drawer.Portal>
12+
<Drawer.Overlay data-overlay class="fixed inset-0 bg-black/40 z-9999"/>
13+
<Drawer.Content data-content class="content z-9999 bg-[#0a0a0a] rounded-t-[10px] mt-24 h-fit fixed bottom-0 left-0 right-0 outline-none">
14+
<div class="p-8 bg-[#0a0a0a] rounded-t-[10px] flex-1">
15+
<div class="max-w-md mx-auto">
16+
<Drawer.Title class="font-bold mb-4 color-[#ededed]">Drawer for Vue.</Drawer.Title>
17+
<p class="color-[#ededed] mb-2">
18+
This component can be used as a Dialog replacement on mobile and tablet devices. You can read about why
19+
and how it was built
20+
<a target="_blank" class="underline" href="https://emilkowal.ski/ui/building-a-drawer-component">
21+
here
22+
</a>
23+
.
24+
</p>
25+
<p class="color-[#ededed] mb-2">
26+
This one specifically is the most simplest setup you can have, just a simple drawer with a trigger.
27+
</p>
28+
</div>
29+
</div>
30+
</Drawer.Content>
31+
</Drawer.Portal>
32+
</Drawer.Root>
33+
</template>
34+
35+
<style scoped>
36+
h2 {
37+
margin-bottom: 16px;
38+
font-weight: 500;
39+
font-size: 16px;
40+
}
41+
42+
p {
43+
margin-bottom: 16px;
44+
}
45+
</style>

‎docs/.vitepress/components/Drawer/GeistScrollDrawer.vue‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<script setup>
2+
import { Drawer } from 'geist-vaul'
3+
import './drawer.css'
4+
</script>
5+
6+
<template>
7+
<Drawer.Root>
8+
<Drawer.Trigger data-trigger class="trigger relative flex h-10 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-full bg-white px-4 text-sm font-medium shadow-sm transition-all hover:bg-[#FAFAFA] dark:bg-[#161615] dark:hover:bg-[#1A1A19] dark:text-white">
9+
Open
10+
</Drawer.Trigger>
11+
<Drawer.Portal>
12+
<Drawer.Overlay data-overlay class="fixed inset-0 bg-black/40 z-9999"/>
13+
<Drawer.Content data-content class="z-9999 bg-[#0a0a0a] flex flex-col rounded-t-[10px] mt-24 h-[80%] lg:h-[320px] fixed bottom-0 left-0 right-0 outline-none">
14+
<div class="new-dialog_inner">
15+
<div class="modal-body">
16+
<div>
17+
<Drawer.Title class="font-mSdium m-4 color-[#ededed]" style="font-weight: 600; font-size: 18px; margin: 24px 0;">Create Token</Drawer.Title>
18+
<p class="color-[#ededed]">Some content contained within the modal.</p>
19+
<p class="color-[#ededed]">Some content contained within the modal.</p>
20+
<p class="color-[#ededed]">Some content contained within the modal.</p>
21+
<p class="color-[#ededed]">Some content contained within the modal.</p>
22+
<p class="color-[#ededed]">Some content contained within the modal.</p>
23+
<p class="color-[#ededed]">Some content contained within the modal.</p>
24+
<p class="color-[#ededed]">Some content contained within the modal.</p>
25+
<p class="color-[#ededed]">Some content contained within the modal.</p>
26+
<p class="color-[#ededed]">Some content contained within the modal.</p>
27+
<p class="color-[#ededed]">Some content contained within the modal.</p>
28+
<p class="color-[#ededed]">Some content contained within the modal.</p>
29+
<p class="color-[#ededed]">Some content contained within the modal.</p>
30+
<p class="color-[#ededed]">Some content contained within the modal.</p>
31+
<p class="color-[#ededed]">Some content contained within the modal.</p>
32+
<p class="color-[#ededed]">Some content contained within the modal.</p>
33+
<p class="color-[#ededed]">Some content contained within the modal.</p>
34+
<p class="color-[#ededed]">Some content contained within the modal.</p>
35+
<p class="color-[#ededed]">Some content contained within the modal.</p>
36+
<p class="color-[#ededed]">Some content contained within the modal.</p>
37+
<p class="color-[#ededed]">Some content contained within the modal.</p>
38+
<p class="color-[#ededed]">Some content contained within the modal.</p>
39+
<p class="color-[#ededed]">Some content contained within the modal.</p>
40+
<p class="color-[#ededed]">Some content contained within the modal.</p>
41+
<p class="color-[#ededed]">Some content contained within the modal.</p>
42+
<p class="color-[#ededed]">Some content contained within the modal.</p>
43+
<p class="color-[#ededed]">Some content contained within the modal.</p>
44+
<p class="color-[#ededed]">Some content contained within the modal.</p>
45+
<p class="color-[#ededed]">Some content contained within the modal.</p>
46+
<p class="color-[#ededed]">Some content contained within the modal.</p>
47+
<p class="color-[#ededed]">Some content contained within the modal.</p>
48+
<p class="color-[#ededed]">Some content contained within the modal.</p>
49+
<p class="color-[#ededed]">Some content contained within the modal.</p>
50+
<p class="color-[#ededed]">Some content contained within the modal.</p>
51+
<p class="color-[#ededed]">Some content contained within the modal.</p>
52+
<p class="color-[#ededed]">Some content contained within the modal.</p>
53+
<p class="color-[#ededed]">Some content contained within the modal.</p>
54+
<p class="color-[#ededed]">Some content contained within the modal.</p>
55+
<p class="color-[#ededed]">Some content contained within the modal.</p>
56+
<p class="color-[#ededed]">Some content contained within the modal.</p>
57+
<p class="color-[#ededed]">Some content contained within the modal.</p>
58+
<p class="color-[#ededed]">Some content contained within the modal.</p>
59+
<p class="color-[#ededed]">Some content contained within the modal.</p>
60+
<p class="color-[#ededed]">Some content contained within the modal.</p>
61+
<p class="color-[#ededed]">Some content contained within the modal.</p>
62+
<p class="color-[#ededed]">Some content contained within the modal.</p>
63+
<p class="color-[#ededed]">Some content contained within the modal.</p>
64+
<p class="color-[#ededed]">Some content contained within the modal.</p>
65+
<p class="color-[#ededed]">Some content contained within the modal.</p>
66+
<p class="color-[#ededed]">Some content contained within the modal.</p>
67+
<p class="color-[#ededed]">Some content contained within the modal.</p>
68+
</div>
69+
</div>
70+
</div>
71+
</Drawer.Content>
72+
</Drawer.Portal>
73+
</Drawer.Root>
74+
</template>
75+
76+
<style scoped>
77+
p {
78+
font-size: 14px;
79+
line-height: 1.25rem;
80+
font-weight: 400;
81+
}
82+
83+
.new-dialog_inner {
84+
border-top-left-radius: 10px;
85+
border-top-right-radius: 10px;
86+
outline: none;
87+
overflow-y: auto;
88+
overscroll-behavior: none;
89+
z-index: 1;
90+
background: #0a0a0a;
91+
}
92+
93+
.modal-body {
94+
font-size: 14px;
95+
line-height: 1.6;
96+
padding: 0 24px 24px;
97+
overflow-x: hidden;
98+
position: relative;
99+
border-top-left-radius: 10px;
100+
border-top-right-radius: 10px;
101+
overflow-y: auto;
102+
}
103+
</style>

‎docs/.vitepress/components/Drawer/NestedDrawer.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ import './drawer.css'
3434
<Drawer.Overlay data-overlay class="fixed inset-0 bg-black/40" />
3535
<Drawer.Content data-content class="bg-[#0a0a0a] flex flex-col rounded-t-[10px] lg:h-[327px] h-full mt-24 max-h-[94%] fixed bottom-0 left-0 right-0">
3636
<div class="p-4 bg-[#0a0a0a] rounded-t-[10px] flex-1">
37-
<div class="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 mb-8" />
37+
<div class="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-[#222] mb-8" />
3838
<div class="max-w-md mx-auto">
3939
<Drawer.Title class="font-medium mb-4 text-gray-100">This drawer is nested.</Drawer.Title>
4040
<p class="color-[#ededed] mb-2">

‎docs/geist-vaul.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup>
22
import CodePreview from './.vitepress/components/CodePreview.vue'
3-
import DefaultDrawer from './.vitepress/components/Drawer/DefaultDrawer.vue'
4-
import ScrollDrawer from './.vitepress/components/Drawer/ScrollDrawer.vue'
3+
import GeistDefaultDrawer from './.vitepress/components/Drawer/GeistDefaultDrawer.vue'
4+
import GeistScrollDrawer from './.vitepress/components/Drawer/GeistScrollDrawer.vue'
55

66
const defaultDrawer = `
77
<script setup lang=\"ts\">
@@ -179,7 +179,7 @@ The most basic setup for a drawer.
179179
lang="vue"
180180
>
181181
<template #preview>
182-
<DefaultDrawer/>
182+
<GeistDefaultDrawer/>
183183
</template>
184184
</CodePreview>
185185
@@ -192,6 +192,6 @@ A scrollable drawer. The behavior here mimics Apple's Sheet component.
192192
lang="vue"
193193
>
194194
<template #preview>
195-
<ScrollDrawer/>
195+
<GeistScrollDrawer/>
196196
</template>
197197
</CodePreview>

‎docs/vite.config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ import postcssMediaMinMax from 'postcss-media-minmax'
44

55
// https://vite.dev/config/
66
export default defineConfig({
7+
ssr: {
8+
noExternal: ['geist-vaul']
9+
},
710
plugins: [
811
tailwindcss()
912
],

‎package-lock.json‎

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"docs:preview": "vitepress preview docs"
4444
},
4545
"dependencies": {
46+
"geist-vaul": "^1.0.0",
4647
"reka-ui": "^2.2.1",
4748
"vue-remove-scroll": "^1.0.2"
4849
},

0 commit comments

Comments
 (0)