Work in progress

client/components/global/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>

client/components/global/transitions/VTransition.vue

@@ -0,0 +1,19 @@
+<template>
+  <transition v-if="name=='slideInUp'"
+              enter-active-class="linear duration-300 overflow-hidden"
+              enter-from-class="max-h-0"
+              enter-to-class="max-h-screen"
+              leave-active-class="linear duration-300 overflow-hidden"
+              leave-from-class="max-h-screen"
+              leave-to-class="max-h-0"
+  >
+    <slot />
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'VTransition',
+  props: { name: { default: 'slideInUp' } }
+}
+</script>