76 lines
2.8 KiB
PHP
76 lines
2.8 KiB
PHP
|
|
@props([
|
|
'position'=>'bottom',
|
|
'popoverOffset'=>'20'
|
|
|
|
]
|
|
)
|
|
<div x-data="{
|
|
popoverOpen: false,
|
|
popoverArrow: false,
|
|
popoverPosition: 'top',
|
|
popoverHeight: 0,
|
|
popoverOffset: 40,
|
|
popoverHeightCalculate() {
|
|
this.$refs.popover.classList.add('invisible');
|
|
this.popoverOpen=true;
|
|
let that=this;
|
|
$nextTick(function(){
|
|
that.popoverHeight = that.$refs.popover.offsetHeight;
|
|
that.popoverOpen=false;
|
|
that.$refs.popover.classList.remove('invisible');
|
|
that.$refs.popoverInner.setAttribute('x-transition', '');
|
|
that.popoverPositionCalculate();
|
|
});
|
|
},
|
|
popoverPositionCalculate(){
|
|
if(window.innerHeight < (this.$refs.popoverButton.getBoundingClientRect().top + this.$refs.popoverButton.offsetHeight + this.popoverOffset + this.popoverHeight)){
|
|
this.popoverPosition = 'top';
|
|
} else {
|
|
this.popoverPosition = 'bottom';
|
|
}
|
|
}
|
|
}"
|
|
x-init="
|
|
that = this;
|
|
window.addEventListener('resize', function(){
|
|
popoverPositionCalculate();
|
|
});
|
|
$watch('popoverOpen', function(value){
|
|
if(value){
|
|
popoverPositionCalculate();
|
|
let el = document.getElementById('width');
|
|
if(el){
|
|
el.focus();
|
|
}
|
|
}
|
|
});
|
|
"
|
|
class="relative overflow-visible">
|
|
|
|
<button {{$trigger->attributes->class(["flex items-center cursor-pointer hover:scale-105 transition-transform justify-center disabled:cursor-progress"] )}} type="button" x-ref="popoverButton" @click="popoverOpen=!popoverOpen">
|
|
{{$trigger}}
|
|
</button>
|
|
|
|
<div x-ref="popover"
|
|
x-anchor.offset.17="$refs.popoverButton"
|
|
x-show="popoverOpen"
|
|
|
|
x-init="setTimeout(function(){ popoverHeightCalculate(); }, 100);"
|
|
@click.away="popoverOpen=false;"
|
|
@keydown.escape.window="popoverOpen=false"
|
|
class=" min-w-[13rem] max-w-fit "
|
|
x-cloak
|
|
@click="popoverOpen=false" >
|
|
<div
|
|
|
|
|
|
x-ref="popoverInner" x-show="popoverOpen" class="w-full p-2 bg-[var(--wc-light-primary)] dark:bg-[var(--wc-dark-secondary)] border border-[var(--wc-light-secondary)] dark:border-[var(--wc-dark-primary)] rounded-lg shadow-sm ">
|
|
<div x-show="popoverArrow && popoverPosition == 'bottom'" class="absolute top-0 inline-block w-5 mt-px overflow-hidden -translate-x-2 -translate-y-2.5 left-1/2"><div class="w-2.5 h-2.5 origin-bottom-left transform rotate-45 bg-white border-t border-l rounded-xs"></div></div>
|
|
<div x-show="popoverArrow && popoverPosition == 'top'" class="absolute bottom-0 inline-block w-5 mb-px overflow-hidden -translate-x-2 translate-y-2.5 left-1/2"><div class="w-2.5 h-2.5 origin-top-left transform -rotate-45 bg-white border-b border-l rounded-xs"></div></div>
|
|
<div class="grid gap-4">
|
|
{{$slot}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |