fix collapsible
This commit is contained in:
parent
4b00835a15
commit
eda1af9b1b
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
})
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue