fix collapsible

This commit is contained in:
Julien Nahum 2023-12-19 16:45:23 +01:00
parent 4b00835a15
commit eda1af9b1b
3 changed files with 37 additions and 55 deletions

View File

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

View File

@ -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>
import { vOnClickOutside } from '@vueuse/components'
import { useMotions } from '@vueuse/motion'
<script setup>
import {vOnClickOutside} from '@vueuse/components'
export default {
name: 'Collapsible',
directives: {
onClickOutside: vOnClickOutside
const props = defineProps({
modelValue: {type: Boolean},
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,
transition: {duration: 150, ease: 'easeOut'}
},
props: {
modelValue: { type: Boolean },
closeOnClickAway: { type: Boolean, default: true }
initial: {
opacity: 0,
y: -10,
transition: {duration: 75, ease: 'easeIn'}
},
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)
}
}
})
const close = () => {
if (props.closeOnClickAway) {
emits('update:modelValue', false)
}
}
</script>

View File

@ -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
})
}