From aecfef20e6aa7a092741f4ab7988c6b3e04bd706 Mon Sep 17 00:00:00 2001
From: Sylvain Marroufin <marroufin.sylvain@gmail.com>
Date: Thu, 23 Jun 2022 15:58:58 +0200
Subject: [PATCH] feat(Slideover): allow opening from the right side (#64)

---
 src/runtime/components/overlays/Slideover.vue | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/runtime/components/overlays/Slideover.vue b/src/runtime/components/overlays/Slideover.vue
index 013cbe04..e48abd09 100644
--- a/src/runtime/components/overlays/Slideover.vue
+++ b/src/runtime/components/overlays/Slideover.vue
@@ -1,6 +1,12 @@
 <template>
   <TransitionRoot as="template" :show="isOpen">
-    <Dialog class="fixed inset-0 flex z-40" @close="isOpen = false">
+    <Dialog
+      class="fixed inset-0 flex z-40"
+      :class="{
+        'justify-end': side === 'right'
+      }"
+      @close="isOpen = false"
+    >
       <TransitionChild
         as="template"
         enter="transition-opacity ease-linear duration-300"
@@ -16,11 +22,11 @@
       <TransitionChild
         as="template"
         enter="transition ease-in-out duration-300 transform"
-        enter-from="-translate-x-full"
+        :enter-from="side === 'left' ? '-translate-x-full' : 'translate-x-full'"
         enter-to="translate-x-0"
         leave="transition ease-in-out duration-300 transform"
         leave-from="translate-x-0"
-        leave-to="-translate-x-full"
+        :leave-to="side === 'left' ? '-translate-x-full' : 'translate-x-full'"
       >
         <DialogPanel class="relative flex-1 flex flex-col w-full max-w-md u-bg-white focus:outline-none">
           <div v-if="$slots.header" class="border-b u-border-gray-200">
@@ -45,6 +51,11 @@ const props = defineProps({
   modelValue: {
     type: Boolean as PropType<boolean>,
     default: false
+  },
+  side: {
+    type: String,
+    default: 'left',
+    validator: (value: string) => ['left', 'right'].includes(value)
   }
 })
 const emit = defineEmits(['update:modelValue'])