Finished implementing better animations

resources/js/components/Modal.vue

@@ -148,7 +148,7 @@ export default {
     }
   },
 
-  beforeDestroy () {
+  beforeUnmount () {
     document.body.classList.remove('overflow-hidden')
   },
 

resources/js/components/Navbar.vue

@@ -49,7 +49,7 @@
                   <template #trigger="{toggle}">
                     <button id="dropdown-menu-button" type="button"
                             class="flex items-center justify-center w-full rounded-md  px-4 py-2 text-sm text-gray-700 dark:text-gray-50 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-gray-500"
-                            dusk="nav-dropdown-button" @click.prevent="toggle()"
+                            dusk="nav-dropdown-button" @click.stop="toggle()"
                     >
                       <img :src="user.photo_url" class="rounded-full w-6 h-6">
                       <p class="ml-2 hidden sm:inline">
@@ -133,9 +133,9 @@
 
 <script>
 import { computed } from 'vue'
-import { useAuthStore } from '../stores/auth';
-import { useFormsStore } from '../stores/forms';
-import { useWorkspacesStore } from '../stores/workspaces';
+import { useAuthStore } from '../stores/auth'
+import { useFormsStore } from '../stores/forms'
+import { useWorkspacesStore } from '../stores/workspaces'
 import Dropdown from './common/Dropdown.vue'
 import WorkspaceDropdown from './WorkspaceDropdown.vue'
 
@@ -153,7 +153,7 @@ export default {
       authStore,
       formsStore,
       workspacesStore,
-      user : computed(() => authStore.user)
+      user: computed(() => authStore.user)
     }
   },
 

resources/js/components/WorkspaceDropdown.vue

@@ -4,7 +4,7 @@
             dusk="workspace-dropdown"
   >
     <template v-if="workspace" #trigger="{toggle}">
-      <div class="flex items-center cursor group" role="button" @click.prevent="toggle()">
+      <div class="flex items-center cursor group" role="button" @click.stop="toggle()">
         <div class="rounded-full h-8 8">
           <img v-if="isUrl(workspace.icon)"
                :src="workspace.icon"
@@ -61,9 +61,9 @@ export default {
     return {
       formsStore,
       workspacesStore,
-      user : computed(() => authStore.user),
-      workspaces : computed(() => workspacesStore.content),
-      loading : computed(() => workspacesStore.loading)
+      user: computed(() => authStore.user),
+      workspaces: computed(() => workspacesStore.content),
+      loading: computed(() => workspacesStore.loading)
     }
   },
 

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>

resources/js/components/forms/components/VSelect.vue

@@ -1,11 +1,11 @@
 <template>
-  <div v-on-click-outside="closeDropdown" class="v-select relative">
+  <div class="v-select relative">
     <span class="inline-block w-full rounded-md">
       <button type="button" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label"
               class="cursor-pointer"
               :style="inputStyle"
               :class="[theme.SelectInput.input,{'py-2': !multiple || loading,'py-1': multiple, '!ring-red-500 !ring-2': hasError, '!cursor-not-allowed !bg-gray-200': disabled}, inputClass]"
-              @click="openDropdown"
+              @click.stop="toggleDropdown"
       >
         <div :class="{'h-6': !multiple, 'min-h-8': multiple && !loading}">
           <transition name="fade" mode="out-in">
@@ -31,11 +31,11 @@
         </span>
       </button>
     </span>
-    <div v-show="isOpen"
-         class="absolute mt-1 rounded-md bg-white dark:bg-notion-dark-light shadow-lg z-10"
-         :class="dropdownClass"
+    <collapsible v-model="isOpen"
+                 class="absolute mt-1 rounded-md bg-white dark:bg-notion-dark-light shadow-xl z-10"
+                 :class="dropdownClass"
     >
-      <ul tabindex="-1" role="listbox" aria-labelled by="listbox-label" aria-activedescendant="listbox-item-3"
+      <ul tabindex="-1" role="listbox"
           class="rounded-md text-base leading-6 shadow-xs overflow-auto focus:outline-none sm:text-sm sm:leading-5 relative"
           :class="{'max-h-42 py-1': !isSearchable,'max-h-48 pb-1': isSearchable}"
       >
@@ -50,7 +50,7 @@
         <template v-if="filteredOptions.length > 0">
           <li v-for="item in filteredOptions" :key="item[optionKey]" role="option" :style="optionStyle"
               :class="{'px-3 pr-9': multiple, 'px-3': !multiple}"
-              class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white hover-bg-form-color focus:outline-none focus-text-white focus-nt-blue"
+              class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white hover:bg-form-color focus:outline-none focus-text-white focus-nt-blue"
               @click="select(item)"
           >
             <slot name="option" :option="item" :selected="isSelected(item)" />
@@ -61,29 +61,27 @@
         </p>
         <li v-if="allowCreation && searchTerm" role="option" :style="optionStyle"
             :class="{'px-3 pr-9': multiple, 'px-3': !multiple}"
-            class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white hover-bg-form-color focus:outline-none focus-text-white focus-nt-blue"
+            class="text-gray-900 cursor-default select-none relative py-2 cursor-pointer group hover:text-white hover:bg-form-color focus:outline-none focus-text-white focus-nt-blue"
             @click="createOption(searchTerm)"
         >
           Create <b class="px-1 bg-gray-300 rounded group-hover-text-black">{{ searchTerm }}</b>
         </li>
       </ul>
-    </div>
+    </collapsible>
   </div>
 </template>
 
 <script>
-import { vOnClickOutside } from '@vueuse/components'
-import TextInput from '../TextInput.vue'
-import Fuse from 'fuse.js'
+import Collapsible from '../../common/transitions/Collapsible.vue'
 import { themes } from '../../../config/form-themes'
+import TextInput from '../TextInput.vue'
 import debounce from 'debounce'
+import Fuse from 'fuse.js'
 
 export default {
   name: 'VSelect',
-  components: { TextInput },
-  directives: {
-    onClickOutside: vOnClickOutside
-  },
+  components: { Collapsible, TextInput },
+  directives: {},
   props: {
     data: Array,
     modelValue: { default: null },
@@ -169,16 +167,19 @@ export default {
       }
       return this.modelValue === value
     },
-    closeDropdown () {
-      this.isOpen = false
-      this.searchTerm = ''
-    },
-    openDropdown () {
-      this.isOpen = this.disabled ? false : !this.isOpen
+    toggleDropdown () {
+      if (this.disabled) {
+        this.isOpen = false
+      }
+      this.isOpen = !this.isOpen
+      if (!this.isOpen) {
+        this.searchTerm = ''
+      }
     },
     select (value) {
       if (!this.multiple) {
-        this.closeDropdown()
+        // Close after select
+        this.toggleDropdown()
       }
 
       if (this.emitKey) {

resources/js/components/open/forms/fields/components/ChangeFieldType.vue

@@ -1,15 +1,15 @@
 <template>
-  <dropdown dusk="nav-dropdown" v-if="changeTypeOptions.length > 0">
+  <dropdown v-if="changeTypeOptions.length > 0" dusk="nav-dropdown">
     <template #trigger="{toggle}">
-      <v-button class="relative" :class="btnClasses" size="small" color="light-gray" @click="toggle">
+      <v-button class="relative" :class="btnClasses" size="small" color="light-gray" @click.stop="toggle">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-4 w-4 text-blue-600 inline mr-1 -mt-1">
           <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
         </svg>
         <span class="whitespace-nowrap">Change Type</span>
       </v-button>
     </template>
 
-    <a href="#" v-for="(op, index) in changeTypeOptions" :key="index"
+    <a v-for="(op, index) in changeTypeOptions" :key="index" href="#"
        class="block px-4 py-2 text-md text-gray-700 dark:text-white hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 flex items-center"
        @click.prevent="changeType(op.value)"
     >
@@ -23,7 +23,7 @@ import Dropdown from '../../../../common/Dropdown.vue'
 
 export default {
   name: 'ChangeFieldType',
-  components: {Dropdown},
+  components: { Dropdown },
   props: {
     field: {
       type: Object,
@@ -34,25 +34,25 @@ export default {
       required: true
     }
   },
-  data() {
+  data () {
     return {}
   },
 
   computed: {
-    changeTypeOptions() {
-      var newTypes = []
+    changeTypeOptions () {
+      let newTypes = []
       if (['text', 'email', 'phone', 'number'].includes(this.field.type)) {
         newTypes = [
-          {'name': 'Text Input', 'value': 'text'},
-          {'name': 'Email Input', 'value': 'email'},
-          {'name': 'Phone Input', 'value': 'phone'},
-          {'name': 'Number Input', 'value': 'number'}
+          { name: 'Text Input', value: 'text' },
+          { name: 'Email Input', value: 'email' },
+          { name: 'Phone Input', value: 'phone' },
+          { name: 'Number Input', value: 'number' }
         ]
       }
       if (['select', 'multi_select'].includes(this.field.type)) {
         newTypes = [
-          {'name': 'Select Input', 'value': 'select'},
-          {'name': 'Multi-Select Input', 'value': 'multi_select'}
+          { name: 'Select Input', value: 'select' },
+          { name: 'Multi-Select Input', value: 'multi_select' }
         ]
       }
       return newTypes.filter((item) => {
@@ -68,11 +68,11 @@ export default {
 
   watch: {},
 
-  mounted() {
+  mounted () {
   },
 
   methods: {
-    changeType(newType) {
+    changeType (newType) {
       if (newType) {
         this.$emit('changeType', newType)
       }