feat: Direction (#54)

* feat: add direction * feat: expose types * chore: wrap direction content * Create tender-parrots-juggle.md * test: add e2e for direction * test: fix failed test * chore: add viewport to pw * chore: remove viewport to pw * chore: fix pw
unovue · Jun 17, 2024 · 76e23aa · 76e23aa
1 parent e1cfb98
commit 76e23aa
Show file tree

Hide file tree

Showing 13 changed files with 464 additions and 84 deletions.
diff --git a/.changeset/tender-parrots-juggle.md b/.changeset/tender-parrots-juggle.md
@@ -0,0 +1,6 @@
+---
+"vaul-vue": minor
+"playground": minor
+---
+
+feat: Direction
diff --git a/packages/vaul-vue/src/DrawerContent.vue b/packages/vaul-vue/src/DrawerContent.vue
@@ -17,6 +17,7 @@ const {
   dismissible,
   keyboardIsOpen,
   closeDrawer,
+  direction,
 } = injectDrawerRootContext()
 
 const snapPointHeight = computed(() => {
@@ -61,6 +62,7 @@ watch(
   <DialogContent
     ref="drawerRef"
     vaul-drawer=""
+    :vaul-drawer-direction="direction"
     :vaul-drawer-visible="isVisible ? 'true' : 'false'"
     :style="{ '--snap-point-height': snapPointHeight }"
     @pointerdown="onPress"

diff --git a/packages/vaul-vue/src/DrawerRoot.vue b/packages/vaul-vue/src/DrawerRoot.vue
@@ -24,6 +24,7 @@ const props = withDefaults(defineProps<DrawerRootProps>(), {
   nested: false,
   modal: true,
   scrollLockTimeout: SCROLL_LOCK_TIMEOUT,
+  direction: 'bottom',
 })
 
 const emit = defineEmits<DrawerRootEmits>()
@@ -96,18 +97,57 @@ defineExpose({
 <style>
 [vaul-drawer] {
   touch-action: none;
-  transform: translate3d(0, 100%, 0);
+  will-change: transform;
   transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
 }
 
-.vaul-dragging .vaul-scrollable {
+[vaul-drawer][vaul-drawer-direction='bottom'] {
+  transform: translate3d(0, 100%, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='top'] {
+  transform: translate3d(0, -100%, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='left'] {
+  transform: translate3d(-100%, 0, 0);
+}
+
+[vaul-drawer][vaul-drawer-direction='right'] {
+  transform: translate3d(100%, 0, 0);
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='top'] {
+  overflow-y: hidden !important;
+}
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='bottom'] {
   overflow-y: hidden !important;
 }
 
-[vaul-drawer][vaul-drawer-visible='true'] {
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='left'] {
+  overflow-x: hidden !important;
+}
+
+.vaul-dragging .vaul-scrollable [vault-drawer-direction='right'] {
+  overflow-x: hidden !important;
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='top'] {
+  transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='bottom'] {
   transform: translate3d(0, var(--snap-point-height, 0), 0);
 }
 
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='left'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[vaul-drawer][vaul-drawer-visible='true'][vaul-drawer-direction='right'] {
+  transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
 [vaul-overlay] {
   opacity: 0;
   transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
@@ -120,14 +160,42 @@ defineExpose({
 [vaul-drawer]::after {
   content: '';
   position: absolute;
-  top: 100%;
   background: inherit;
   background-color: inherit;
+}
+
+[vaul-drawer][vaul-drawer-direction='top']::after {
+  top: initial;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  height: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='bottom']::after {
+  top: 100%;
+  bottom: initial;
   left: 0;
   right: 0;
   height: 200%;
 }
 
+[vaul-drawer][vaul-drawer-direction='left']::after {
+  left: initial;
+  right: 100%;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
+[vaul-drawer][vaul-drawer-direction='right']::after {
+  left: 100%;
+  right: initial;
+  top: 0;
+  bottom: 0;
+  width: 200%;
+}
+
 [vaul-overlay][vaul-snap-points='true']:not([vaul-snap-points-overlay='true']):not([data-state='closed']) {
   opacity: 0;
 }

diff --git a/packages/vaul-vue/src/context.ts b/packages/vaul-vue/src/context.ts
@@ -1,5 +1,6 @@
 import type { ComponentPublicInstance, Ref } from 'vue'
 import { createContext } from 'radix-vue'
+import type { DrawerDirection } from './types'
 
 export interface DrawerRootContext {
   open: Ref<boolean>
@@ -15,10 +16,11 @@ export interface DrawerRootContext {
   snapPoints: Ref<(number | string)[] | undefined>
   keyboardIsOpen: Ref<boolean>
   activeSnapPoint: Ref<number | string | null | undefined>
-  pointerStartY: Ref<number>
+  pointerStart: Ref<number>
   dismissible: Ref<boolean>
   drawerHeightRef: Ref<number>
   snapPointsOffset: Ref<number[]>
+  direction: Ref<DrawerDirection>
   onPress: (event: PointerEvent) => void
   onDrag: (event: PointerEvent) => void
   onRelease: (event: PointerEvent) => void