Initial commit

resources/views/vendor/wirechat/components/popover.blade.php

@@ -0,0 +1,76 @@
+
+@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>