fix collapsible

client/app.vue

@@ -21,12 +21,11 @@
       </div>
     </transition>
 
-    <transition name="page" mode="out-in">
+
     <NuxtLayout>
       <NuxtLoadingIndicator color="#2563eb"/>
       <NuxtPage/>
     </NuxtLayout>
-    </transition>
     <ToolsStopImpersonation/>
     <!--    <notifications />-->
   </div>

client/components/global/transitions/Collapsible.vue

@@ -1,59 +1,43 @@
 <template>
   <transition @leave="(el,done)=>motions.collapsible.leave(done)">
     <div
+      ref="collapsible"
       v-if="modelValue"
-      key="dropdown"
       v-motion="'collapsible'"
+      :variants="variants"
       v-on-click-outside.bubble="close"
-      :variants="motionCollapse"
     >
       <slot/>
     </div>
   </transition>
 </template>
 
-<script>
+<script setup>
 import {vOnClickOutside} from '@vueuse/components'
-import { useMotions } from '@vueuse/motion'
 
-export default {
-  name: 'Collapsible',
-  directives: {
-    onClickOutside: vOnClickOutside
-  },
-  props: {
+const props = defineProps({
   modelValue: {type: Boolean},
-    closeOnClickAway: { type: Boolean, default: true }
-  },
-  setup () {
-    return {
-      motions: useMotions()
-    }
-  },
-  computed: {
-    motionCollapse () {
-      return {
+  closeOnClickAway: {type: Boolean, default: true},
+  maxHeight: {type: Number, default: 200},
+})
+const emits = defineEmits(['update:modelValue'])
+
+const motions = useMotions()
+const variants = ref({
   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)
-      }
-    }
+})
+const close = () => {
+  if (props.closeOnClickAway) {
+    emits('update:modelValue', false)
   }
 }
 </script>

client/components/pages/templates/TemplatesList.vue

@@ -81,7 +81,7 @@
 import {computed} from 'vue'
 import Fuse from 'fuse.js'
 import SingleTemplate from './SingleTemplate.vue'
-import {refThrottled} from "@vueuse/core";
+import {refDebounced} from "@vueuse/core";
 
 export default {
   name: 'TemplatesList',
@@ -101,10 +101,10 @@ export default {
     const authStore = useAuthStore()
     const templatesStore = useTemplatesStore()
     const search = ref('')
-    const throttledSearch = refThrottled(search, 1000)
+    const debouncedSearch = refDebounced(search, 500)
     return {
       search,
-      throttledSearch,
+      debouncedSearch,
       user: computed(() => authStore.user),
       industries: computed(() => [...templatesStore.industries.values()]),
       types: computed(() => [...templatesStore.types.values()])
@@ -150,8 +150,7 @@ export default {
         })
       }
 
-      console.log(this.throttledSearch, '---inode')
-      if (!this.throttledSearch || this.throttledSearch === '' || this.throttledSearch === null) {
+      if (!this.debouncedSearch || this.debouncedSearch === '' || this.debouncedSearch === null) {
         return enrichedTemplates
       }
 
@@ -165,7 +164,7 @@ export default {
         ]
       }
       const fuse = new Fuse(enrichedTemplates, fuzeOptions)
-      return fuse.search(this.throttledSearch).map((res) => {
+      return fuse.search(this.debouncedSearch).map((res) => {
         return res.item
       })
     }