fix collapsible

client/app.vue

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

client/components/global/transitions/Collapsible.vue

@@ -1,59 +1,43 @@
 <template>
-  <transition @leave="(el,done) => motions.collapsible.leave(done)">
+  <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 />
+      <slot/>
     </div>
   </transition>
 </template>
 
-<script>
+<script setup>
-import { vOnClickOutside } from '@vueuse/components'
+import {vOnClickOutside} from '@vueuse/components'
-import { useMotions } from '@vueuse/motion'
 
-export default {
+const props = defineProps({
-  name: 'Collapsible',
+  modelValue: {type: Boolean},
-  directives: {
+  closeOnClickAway: {type: Boolean, default: true},
-    onClickOutside: vOnClickOutside
+  maxHeight: {type: Number, default: 200},
+})
+const emits = defineEmits(['update:modelValue'])
+
+const motions = useMotions()
+const variants = ref({
+  enter: {
+    opacity: 1,
+    y: 0,
+    transition: {duration: 150, ease: 'easeOut'}
   },
-  props: {
+  initial: {
-    modelValue: { type: Boolean },
+    opacity: 0,
-    closeOnClickAway: { type: Boolean, default: true }
+    y: -10,
+    transition: {duration: 75, ease: 'easeIn'}
   },
-  setup () {
+})
-    return {
+const close = () => {
-      motions: useMotions()
+  if (props.closeOnClickAway) {
-    }
+    emits('update:modelValue', false)
-  },
-  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/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.debouncedSearch || this.debouncedSearch === '' || this.debouncedSearch === null) {
-      if (!this.throttledSearch || this.throttledSearch === '' || this.throttledSearch === 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
       })
     }