Vue 3 better animation (#257)

* vue-3-better-animation

* Working on migration to vueuse/motion

* Form sidebar animations

* Clean code

* Added animations for modal

* Finished implementing better animations

---------

Co-authored-by: Forms Dev <chirag+new@notionforms.io>

resources/js/components/common/Dropdown.vue

@@ -5,25 +5,23 @@
           :open="open"
           :close="close"
     />
-    <transition name="fade">
-      <div v-if="isOpen" v-on-click-outside="close" :class="dropdownClass">
-        <div class="py-1 " role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
-          <slot />
-        </div>
+
+    <collapsible v-model="isOpen" :class="dropdownClass">
+      <div class="py-1 " role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
+        <slot />
       </div>
-    </transition>
+    </collapsible>
   </div>
 </template>
 
 <script>
 import { ref } from 'vue'
-import { vOnClickOutside } from '@vueuse/components'
+import Collapsible from './transitions/Collapsible.vue'
 
 export default {
   name: 'Dropdown',
-  directives: {
-    onClickOutside: vOnClickOutside
-  },
+  components: { Collapsible },
+  directives: {},
   props: {
     dropdownClass: {
       type: String,
@@ -45,14 +43,11 @@ export default {
       isOpen.value = !isOpen.value
     }
 
-    const dropdownRef = ref(null)
-
     return {
       isOpen,
       open,
       close,
-      toggle,
-      dropdownRef
+      toggle
     }
   }
 }

resources/js/components/common/transitions/Collapsible.vue

@@ -0,0 +1,59 @@
+<template>
+  <transition @leave="(el,done) => motions.collapsible.leave(done)">
+    <div
+      v-if="modelValue"
+      key="dropdown"
+      v-motion="'collapsible'"
+      v-on-click-outside.bubble="close"
+      :variants="motionCollapse"
+    >
+      <slot />
+    </div>
+  </transition>
+</template>
+
+<script>
+import { vOnClickOutside } from '@vueuse/components'
+import { useMotions } from '@vueuse/motion'
+
+export default {
+  name: 'Collapsible',
+  directives: {
+    onClickOutside: vOnClickOutside
+  },
+  props: {
+    modelValue: { type: Boolean },
+    closeOnClickAway: { type: Boolean, default: true }
+  },
+  setup () {
+    return {
+      motions: useMotions()
+    }
+  },
+  computed: {
+    motionCollapse () {
+      return {
+        enter: {
+          opacity: 1,
+          y: 0,
+          height: 'auto',
+          transition: { duration: 150, ease: 'easeOut' }
+        },
+        initial: {
+          opacity: 0,
+          y: -10,
+          height: 0,
+          transition: { duration: 75, ease: 'easeIn' }
+        }
+      }
+    }
+  },
+  methods: {
+    close () {
+      if (this.closeOnClickAway) {
+        this.$emit('update:modelValue', false)
+      }
+    }
+  }
+}
+</script>