feat(Drawer): implement with vaul-vue

Resolves #53

src/runtime/components/Drawer.vue

@@ -0,0 +1,100 @@
+<script lang="ts">
+import { tv } from 'tailwind-variants'
+import type { DrawerRootProps, DrawerRootEmits } from 'vaul-vue'
+import type { DialogContentProps } from 'radix-vue'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/drawer'
+
+const appConfig = _appConfig as AppConfig & { ui: { drawer: Partial<typeof theme> } }
+
+const drawer = tv({ extend: tv(theme), ...(appConfig.ui?.drawer || {}) })
+
+export interface DrawerProps extends Omit<DrawerRootProps, 'asChild'> {
+  title?: string
+  description?: string
+  content?: Omit<DialogContentProps, 'asChild' | 'forceMount'>
+  overlay?: boolean
+  portal?: boolean
+  class?: any
+  ui?: Partial<typeof drawer.slots>
+}
+
+export interface DrawerEmits extends DrawerRootEmits {}
+
+export interface DrawerSlots {
+  default(): any
+  handle(): any
+  content(): any
+  header(): any
+  title(): any
+  description(): any
+  body(): any
+  footer(): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRef } from 'vue'
+import { useForwardPropsEmits } from 'radix-vue'
+import { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerContent, DrawerTitle, DrawerDescription } from 'vaul-vue'
+import { reactivePick } from '@vueuse/core'
+
+const props = withDefaults(defineProps<DrawerProps>(), {
+  portal: true,
+  overlay: true
+})
+const emits = defineEmits<DrawerEmits>()
+defineSlots<DrawerSlots>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'activeSnapPoint', 'closeThreshold', 'defaultOpen', 'dismissible', 'fadeFromIndex', 'fixed', 'modal', 'nested', 'open', 'scrollLockTimeout', 'shouldScaleBackground', 'snapPoints'), emits)
+const contentProps = toRef(() => props.content)
+
+const ui = computed(() => tv({ extend: drawer, slots: props.ui })())
+</script>
+
+<template>
+  <DrawerRoot v-bind="rootProps">
+    <DrawerTrigger v-if="$slots.default" as-child>
+      <slot />
+    </DrawerTrigger>
+
+    <DrawerPortal :disabled="!portal">
+      <DrawerOverlay v-if="overlay" :class="ui.overlay()" />
+
+      <DrawerContent :class="ui.content({ class: props.class })" v-bind="contentProps">
+        <slot name="handle">
+          <div :class="ui.handle()" />
+        </slot>
+
+        <slot name="content">
+          <div :class="ui.container()">
+            <div v-if="$slots.header || (title || $slots.title) || (description || $slots.description)" :class="ui.header()">
+              <slot name="header">
+                <DrawerTitle v-if="title || $slots.title" :class="ui.title()">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DrawerTitle>
+
+                <DrawerDescription v-if="description || $slots.description" :class="ui.description()">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DrawerDescription>
+              </slot>
+            </div>
+
+            <div v-if="$slots.body" :class="ui.body()">
+              <slot name="body" />
+            </div>
+
+            <div v-if="$slots.footer" :class="ui.footer()">
+              <slot name="footer" />
+            </div>
+          </div>
+        </slot>
+      </DrawerContent>
+    </DrawerPortal>
+  </DrawerRoot>
+</template>

src/runtime/types/index.d.ts

@@ -8,6 +8,7 @@ export * from '../components/Checkbox.vue'
 export * from '../components/Chip.vue'
 export * from '../components/Collapsible.vue'
 export * from '../components/Container.vue'
+export * from '../components/Drawer.vue'
 export * from '../components/DropdownMenu.vue'
 export * from '../components/Form.vue'
 export * from '../components/FormField.vue'