Fix dropdown

client/components/global/Dropdown.vue

@@ -1,54 +1,50 @@
 <template>
-  <div class="relative">
+  <div class="relative" ref="dropdown">
     <slot name="trigger"
           :toggle="toggle"
           :open="open"
           :close="close"
     />
 
-    <collapsible v-model="isOpen" :class="dropdownClass">
+    <collapsible v-model="isOpen" :class="dropdownClass" @click-away="onClickAway">
       <div class="py-1 " role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
-        <slot />
+        <slot/>
       </div>
     </collapsible>
   </div>
 </template>
 
-<script>
-import { ref } from 'vue'
+<script setup>
+import {ref} from 'vue'
 import Collapsible from './transitions/Collapsible.vue'
 
-export default {
-  name: 'Dropdown',
-  components: { Collapsible },
-  directives: {},
-  props: {
-    dropdownClass: {
-      type: String,
-      default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20'
-    }
-  },
-  setup () {
-    const isOpen = ref(false)
+const props = defineProps({
+  dropdownClass: {
+    type: String,
+    default: 'origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 z-20'
+  }
+})
 
-    const open = () => {
-      isOpen.value = true
-    }
+const isOpen = ref(false)
+const dropdown = ref(null)
 
-    const close = () => {
-      isOpen.value = false
-    }
+const open = (event) => {
+  isOpen.value = true
+}
 
-    const toggle = () => {
-      isOpen.value = !isOpen.value
-    }
+const close = (event) => {
+  console.log('closing')
+  isOpen.value = false
+}
 
-    return {
-      isOpen,
-      open,
-      close,
-      toggle
-    }
+const toggle = (event) => {
+  isOpen.value = !isOpen.value
+}
+
+const onClickAway = (event) => {
+  // Check that event target isn't children of dropdown
+  if (dropdown.value && !dropdown.value.contains(event.target)) {
+    close(event)
   }
 }
 </script>

client/components/global/VButton.vue

@@ -2,9 +2,7 @@
   <NuxtLink v-if="href" :class="btnClasses" :href="href" :target="target">
     <slot />
   </NuxtLink>
-  <button v-else-if="!to" :type="nativeType" :disabled="loading?true:null" :class="btnClasses"
-          @click="onClick($event)"
-  >
+  <button v-else-if="!to" :type="nativeType" :disabled="loading?true:null" :class="btnClasses">
     <template v-if="!loading">
       <span class="no-underline mx-auto">
         <slot />
@@ -175,11 +173,5 @@ export default {
       }
     }
   },
-
-  methods: {
-    onClick (event) {
-      this.$emit('click', event)
-    }
-  }
 }
 </script>

client/components/global/transitions/Collapsible.vue

@@ -1,11 +1,9 @@
 <template>
-  <transition @leave="(el,done)=>motions.collapsible.leave(done)">
+  <transition @leave="onLeave">
     <div
       ref="collapsible"
       v-if="modelValue"
-      v-motion="'collapsible'"
-      :variants="variants"
-      v-on-click-outside.bubble="close"
+      v-on-click-outside.bubble="onClickAway"
     >
       <slot/>
     </div>
@@ -17,27 +15,38 @@ import {vOnClickOutside} from '@vueuse/components'
 
 const props = defineProps({
   modelValue: {type: Boolean},
-  closeOnClickAway: {type: Boolean, default: true},
   maxHeight: {type: Number, default: 200},
 })
-const emits = defineEmits(['update:modelValue'])
+const emits = defineEmits(['click-away'])
 
-const motions = useMotions()
-const variants = ref({
-  enter: {
-    opacity: 1,
-    y: 0,
-    transition: {duration: 150, ease: 'easeOut'}
-  },
+const motion = ref(null)
+const collapsible = ref(null)
+const variants = {
   initial: {
     opacity: 0,
     y: -10,
     transition: {duration: 75, ease: 'easeIn'}
   },
-})
-const close = () => {
-  if (props.closeOnClickAway) {
-    emits('update:modelValue', false)
+  enter: {
+    opacity: 1,
+    y: 0,
+    transition: {duration: 150, ease: 'easeOut'}
   }
 }
+
+watch(() => props.modelValue, (newValue) => {
+  if (newValue) {
+    nextTick(() => {
+      motion.value = useMotion(collapsible.value, variants)
+    })
+  }
+})
+
+const onLeave = (el, done) => {
+  motion.value.leave(done)
+}
+
+const onClickAway = (event) => {
+  emits('click-away', event)
+}
 </script>