opnform/client/components/open/editors/EditorRightSidebar.vue

33 lines
787 B
Vue
Raw Normal View History

2023-12-09 14:47:03 +00:00
<template>
2023-12-20 15:10:32 +00:00
<transition @leave="(el,done) => sidebarMotion.leave(done)">
<div v-if="show" ref="sidebar"
2023-12-09 14:47:03 +00:00
class="absolute shadow-lg shadow-gray-800/30 top-0 h-[calc(100vh-53px)] right-0 lg:shadow-none lg:relative bg-white w-full md:w-1/2 lg:w-2/5 border-l overflow-y-scroll md:max-w-[20rem] flex-shrink-0 z-50"
>
<slot />
</div>
</transition>
</template>
2023-12-20 15:10:32 +00:00
<script setup>
import {slideRight, useMotion} from "@vueuse/motion"
import {watch} from "vue";
2023-12-09 14:47:03 +00:00
2023-12-20 15:10:32 +00:00
const props = defineProps({
show: {
type: Boolean,
default: false
2023-12-09 14:47:03 +00:00
}
2023-12-20 15:10:32 +00:00
})
const sidebar = ref(null)
const sidebarMotion = ref(null)
watch(() => props.show, (newVal) => {
if (newVal) {
nextTick(() => {
sidebarMotion.value = useMotion(sidebar.value, slideRight)
})
}
})
2023-12-09 14:47:03 +00:00
</script>