mirror of https://github.com/nocodb/nocodb
DarkPhoenix2704
2 months ago
6 changed files with 324 additions and 143 deletions
@ -0,0 +1,183 @@
|
||||
<script setup> |
||||
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue' |
||||
|
||||
const props = defineProps({ |
||||
modelValue: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
placement: { |
||||
type: String, |
||||
default: 'center', |
||||
validator: (value) => ['top', 'bottom', 'left', 'right', 'center'].includes(value), |
||||
}, |
||||
offset: { |
||||
type: Array, |
||||
default: () => [0, 10], |
||||
}, |
||||
width: { |
||||
type: String, |
||||
default: 'auto', |
||||
}, |
||||
zIndex: { |
||||
type: Number, |
||||
default: 1000, |
||||
}, |
||||
closeOnClickOutside: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
closeOnEsc: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
transition: { |
||||
type: String, |
||||
default: 'fade', |
||||
}, |
||||
}) |
||||
|
||||
const emit = defineEmits(['update:modelValue']) |
||||
|
||||
const triggerRef = ref(null) |
||||
const popoverRef = ref(null) |
||||
const isOpen = ref(props.modelValue) |
||||
|
||||
const popoverStyle = computed(() => ({ |
||||
position: 'fixed', |
||||
zIndex: props.zIndex, |
||||
width: props.width, |
||||
})) |
||||
|
||||
const updatePopoverPosition = () => { |
||||
if (!triggerRef.value || !popoverRef.value) return |
||||
|
||||
const triggerRect = triggerRef.value.getBoundingClientRect() |
||||
const popoverRect = popoverRef.value.getBoundingClientRect() |
||||
|
||||
let top, left |
||||
|
||||
switch (props.placement) { |
||||
case 'top': |
||||
top = triggerRect.top - popoverRect.height - props.offset[1] |
||||
left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2 + props.offset[0] |
||||
break |
||||
case 'bottom': |
||||
top = triggerRect.bottom + props.offset[1] |
||||
left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2 + props.offset[0] |
||||
break |
||||
case 'left': |
||||
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2 + props.offset[1] |
||||
left = triggerRect.left - popoverRect.width - props.offset[0] |
||||
break |
||||
case 'right': |
||||
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2 + props.offset[1] |
||||
left = triggerRect.right + props.offset[0] |
||||
break |
||||
case 'center': |
||||
top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2 + props.offset[1] |
||||
left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2 + props.offset[0] |
||||
break |
||||
} |
||||
|
||||
// Ensure the popover stays within the viewport |
||||
const viewportWidth = window.innerWidth |
||||
const viewportHeight = window.innerHeight |
||||
|
||||
top = Math.max(0, Math.min(top, viewportHeight - popoverRect.height)) |
||||
left = Math.max(0, Math.min(left, viewportWidth - popoverRect.width)) |
||||
|
||||
Object.assign(popoverRef.value.style, { |
||||
top: `${top}px`, |
||||
left: `${left}px`, |
||||
}) |
||||
} |
||||
|
||||
const openPopover = () => { |
||||
isOpen.value = true |
||||
emit('update:modelValue', true) |
||||
nextTick(updatePopoverPosition) |
||||
} |
||||
|
||||
const closePopover = () => { |
||||
isOpen.value = false |
||||
emit('update:modelValue', false) |
||||
} |
||||
|
||||
const handleClickOutside = (event) => { |
||||
if ( |
||||
props.closeOnClickOutside && |
||||
popoverRef.value && |
||||
!popoverRef.value.contains(event.target) && |
||||
!triggerRef.value.contains(event.target) |
||||
) { |
||||
closePopover() |
||||
} |
||||
} |
||||
|
||||
const handleKeyDown = (event) => { |
||||
if (props.closeOnEsc && event.key === 'Escape') { |
||||
closePopover() |
||||
} |
||||
} |
||||
|
||||
onMounted(() => { |
||||
if (props.closeOnClickOutside) document.addEventListener('mousedown', handleClickOutside) |
||||
if (props.closeOnEsc) document.addEventListener('keydown', handleKeyDown) |
||||
window.addEventListener('resize', updatePopoverPosition) |
||||
window.addEventListener('scroll', updatePopoverPosition) |
||||
}) |
||||
|
||||
onUnmounted(() => { |
||||
if (props.closeOnClickOutside) document.removeEventListener('mousedown', handleClickOutside) |
||||
if (props.closeOnEsc) document.removeEventListener('keydown', handleKeyDown) |
||||
window.removeEventListener('resize', updatePopoverPosition) |
||||
window.removeEventListener('scroll', updatePopoverPosition) |
||||
}) |
||||
|
||||
watch( |
||||
() => props.modelValue, |
||||
(newValue) => { |
||||
isOpen.value = newValue |
||||
if (newValue) nextTick(updatePopoverPosition) |
||||
}, |
||||
) |
||||
</script> |
||||
|
||||
<template> |
||||
<div> |
||||
<div ref="triggerRef" @click="openPopover"> |
||||
<slot name="trigger" :open="openPopover" :close="closePopover" :is-open="isOpen"> |
||||
<button>Open Popover</button> |
||||
</slot> |
||||
</div> |
||||
|
||||
<Teleport to="body"> |
||||
<Transition :name="transition"> |
||||
<div v-if="isOpen" ref="popoverRef" :style="popoverStyle" class="popover-content"> |
||||
<slot name="content" :close="closePopover"> |
||||
<div class="p-4"> |
||||
<p>Default popover content</p> |
||||
<button @click="closePopover">Close</button> |
||||
</div> |
||||
</slot> |
||||
</div> |
||||
</Transition> |
||||
</Teleport> |
||||
</div> |
||||
</template> |
||||
|
||||
<style scoped lang="scss"> |
||||
.popover-content { |
||||
} |
||||
|
||||
.fade-enter-active, |
||||
.fade-leave-active { |
||||
transition: opacity 0.3s ease; |
||||
} |
||||
|
||||
.fade-enter-from, |
||||
.fade-leave-to { |
||||
opacity: 0; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue