Skip to content

Commit 19df52e

Browse files
ackzellackzell
committed
Adding a drawer component. Also an independent tooltip component to use it as a directive and avoid wrapping things to get the tooltip going. Fixing lint issues.
1 parent dcc2c17 commit 19df52e

21 files changed

+208
-106
lines changed

‎eslint.config.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,4 +77,14 @@ export default antfu({
7777

7878
}],
7979
},
80+
}, {
81+
files: ['**/*.vue'],
82+
rules: {
83+
// ... your other rules
84+
85+
// Catch undefined components
86+
'vue/no-undef-components': ['error', {
87+
ignorePatterns: ['router-link', 'router-view'], // Ignore global components
88+
}],
89+
},
8090
});

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,12 +47,13 @@
4747
"@vue/tsconfig": "^0.7.0",
4848
"eslint": "^9.31.0",
4949
"eslint-plugin-vue": "~10.3.0",
50+
"floating-vue": "^5.2.2",
5051
"jiti": "^2.4.2",
5152
"npm-run-all2": "^8.0.4",
5253
"prettier": "3.6.2",
5354
"typescript": "~5.8.0",
5455
"unocss": "^66.4.2",
55-
"unocss-preset-animations": "^1.2.1",
56+
"unocss-preset-shadcn": "^0.5.0",
5657
"vite": "^7.0.6",
5758
"vite-plugin-vue-devtools": "^8.0.0",
5859
"vue-tsc": "^3.0.4"

‎pnpm-lock.yaml‎

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

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ onMounted(async () => {
4747
</script>
4848

4949
<template>
50-
<div class="repl-container" font-sans text-primary>
50+
<div class="repl-container" font-sans text-primary vaul-drawer-wrapper>
5151
<div
5252
v-if="errormessage"
5353
class="error"

‎src/assets/css/tailwind.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* Empty on purpose */

‎src/components/YvHeader.vue‎

Lines changed: 43 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -16,47 +16,56 @@ const { settings, toggleLayout, toggleTheme } = useSettingsStore();
1616

1717
<template>
1818
<div>
19-
<nav
20-
flex="~ justify-between"
21-
relative p-4 z-999 shadow-md
22-
bg="light dark:dark-900"
23-
border="b neutral-300/10"
24-
text="#333 dark:neutral-300"
25-
h="var(--nav-height)"
26-
transition="background-color 0.2s ease"
27-
>
28-
<h1 text-lg font-500 inline-flex items-center>
29-
<!-- TODO: maybe a logo would be cool -->
30-
<!-- <img alt="logo" src="/logo.svg" /> -->
31-
<span>yehyecoa-vue</span>
32-
</h1>
33-
<div flex gap-2 text-neutral-500>
34-
<button toolbar-btn @click="toggleLayout">
35-
<div :class="settings.layout === 'vertical' ? 'i-mynaui:rectangle' : 'i-mynaui:rectangle-vertical'" />
36-
</button>
37-
<button
38-
toolbar-btn
39-
:title="`Switch to ${settings.theme === 'dark' ? 'light' : 'dark'} theme`"
40-
@click="toggleTheme"
41-
>
42-
<div class="i-carbon:sun dark:i-carbon:moon" />
43-
</button>
44-
</div>
45-
</nav>
19+
<Drawer direction="right">
20+
<nav
21+
flex="~ justify-between"
22+
relative p-4 z-999 shadow-md
23+
bg="light dark:dark-900"
24+
border="b neutral-300/10"
25+
text="#333 dark:neutral-300"
26+
h="var(--nav-height)"
27+
transition="background-color 0.2s ease"
28+
>
29+
<h1 text-lg font-500 inline-flex items-center>
30+
<!-- TODO: maybe a logo would be cool -->
31+
<!-- <img alt="logo" src="/logo.svg" /> -->
32+
<span>yehyecoa-vue</span>
33+
</h1>
34+
<!-- <div>
35+
submenus here
36+
</div> -->
37+
<div flex gap-4 text-neutral-500>
38+
<DrawerTrigger>
39+
<button v-tooltip.bottom="'Open history'" class="toolbar-btn">
40+
<div class="i-carbon:data-backup" />
41+
</button>
42+
</DrawerTrigger>
43+
<button v-tooltip.bottom="`Switch to ${settings.layout === 'vertical' ? 'horizontal' : 'vertical'} layout`" toolbar-btn @click="toggleLayout">
44+
<div :class="settings.layout === 'vertical' ? 'i-mynaui:rectangle' : 'i-mynaui:rectangle-vertical'" />
45+
</button>
46+
<button
47+
v-tooltip.bottom="`Switch to ${settings.theme === 'dark' ? 'light' : 'dark'} theme`"
48+
toolbar-btn
49+
@click="toggleTheme"
50+
>
51+
<div class="i-carbon:sun dark:i-carbon:moon" />
52+
</button>
53+
</div>
54+
</nav>
4655

47-
<Drawer>
48-
<DrawerTrigger>Open</DrawerTrigger>
4956
<DrawerContent>
5057
<DrawerHeader>
51-
<DrawerTitle>Are you absolutely sure?</DrawerTitle>
52-
<DrawerDescription>This action cannot be undone.</DrawerDescription>
58+
<DrawerTitle>History</DrawerTitle>
59+
<DrawerDescription>This is the history for this file</DrawerDescription>
5360
</DrawerHeader>
5461
<DrawerFooter>
55-
<Button>Submit</Button>
62+
<button btn>
63+
Submit
64+
</button>
5665
<DrawerClose>
57-
<Button variant="outline">
66+
<button btn-outline w-full>
5867
Cancel
59-
</Button>
68+
</button>
6069
</DrawerClose>
6170
</DrawerFooter>
6271
</DrawerContent>

‎src/components/ui/drawer/Drawer.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<script lang="ts" setup>
2-
import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue"
3-
import { useForwardPropsEmits } from "reka-ui"
4-
import { DrawerRoot } from "vaul-vue"
2+
import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue';
3+
import { useForwardPropsEmits } from 'reka-ui';
4+
import { DrawerRoot } from 'vaul-vue';
55
66
const props = withDefaults(defineProps<DrawerRootProps>(), {
77
shouldScaleBackground: true,
8-
})
8+
});
99
10-
const emits = defineEmits<DrawerRootEmits>()
10+
const emits = defineEmits<DrawerRootEmits>();
1111
12-
const forwarded = useForwardPropsEmits(props, emits)
12+
const forwarded = useForwardPropsEmits(props, emits);
1313
</script>
1414

1515
<template>
1616
<DrawerRoot
1717
data-slot="drawer"
18-
v-bind="forwarded"
18+
v-bind="forwarded as Record<string, unknown>"
1919
>
2020
<slot />
2121
</DrawerRoot>

‎src/components/ui/drawer/DrawerClose.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<script lang="ts" setup>
2-
import type { DrawerCloseProps } from "vaul-vue"
3-
import { DrawerClose } from "vaul-vue"
2+
import type { DrawerCloseProps } from 'vaul-vue';
3+
import { DrawerClose } from 'vaul-vue';
44
5-
const props = defineProps<DrawerCloseProps>()
5+
const props = defineProps<DrawerCloseProps>();
66
</script>
77

88
<template>

‎src/components/ui/drawer/DrawerContent.vue‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<script lang="ts" setup>
2-
import type { DialogContentEmits, DialogContentProps } from "reka-ui"
3-
import type { HTMLAttributes } from "vue"
4-
import { useForwardPropsEmits } from "reka-ui"
5-
import { DrawerContent, DrawerPortal } from "vaul-vue"
6-
import { cn } from "@/lib/utils"
7-
import DrawerOverlay from "./DrawerOverlay.vue"
2+
import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
3+
import { DrawerContent, DrawerPortal } from 'vaul-vue';
4+
import { useForwardPropsEmits } from 'reka-ui';
5+
import type { HTMLAttributes } from 'vue';
86
9-
const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
10-
const emits = defineEmits<DialogContentEmits>()
7+
import { cn } from '@/lib/utils';
118
12-
const forwarded = useForwardPropsEmits(props, emits)
9+
import DrawerOverlay from './DrawerOverlay.vue';
10+
11+
const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
12+
const emits = defineEmits<DialogContentEmits>();
13+
14+
const forwarded = useForwardPropsEmits(props, emits);
1315
</script>
1416

1517
<template>

‎src/components/ui/drawer/DrawerDescription.vue‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<script lang="ts" setup>
2-
import type { DrawerDescriptionProps } from "vaul-vue"
3-
import type { HTMLAttributes } from "vue"
4-
import { reactiveOmit } from "@vueuse/core"
5-
import { DrawerDescription } from "vaul-vue"
6-
import { cn } from "@/lib/utils"
2+
import type { DrawerDescriptionProps } from 'vaul-vue';
3+
import { DrawerDescription } from 'vaul-vue';
4+
import { reactiveOmit } from '@vueuse/core';
5+
import type { HTMLAttributes } from 'vue';
76
8-
const props = defineProps<DrawerDescriptionProps & { class?: HTMLAttributes["class"] }>()
7+
import { cn } from '@/lib/utils';
98
10-
const delegatedProps = reactiveOmit(props, "class")
9+
const props = defineProps<DrawerDescriptionProps & { class?: HTMLAttributes['class'] }>();
10+
11+
const delegatedProps = reactiveOmit(props, 'class');
1112
</script>
1213

1314
<template>

0 commit comments

Comments
 (0)