maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 3.34 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{computed,createElementBlock,createElementVNode,defineComponent,normalizeClass,normalizeStyle,onBeforeUnmount,onMounted,openBlock,ref,renderSlot,vShow,withDirectives}from"vue";import{isServer}from"@maz-ui/utils/helpers/isServer";import '../assets/MazCardSpotlight.BRAV3zmA.css';var _hoisted_1={class:`inner`};var MazCardSpotlight_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazCardSpotlight`,props:{color:{default:`primary`},elevation:{type:Boolean,default:!1},padding:{type:Boolean,default:!0},contentClass:{type:[Boolean,null,String,Object,Array],default:()=>void 0},contentStyle:{type:[Boolean,null,String,Object,Array],default:()=>void 0},innerOpacity:{default:.95}},setup(__props){let containerElement=ref();let blobElement=ref();let blobVisible=ref(!1);let rafId=null;let isIntersecting=!1;let cachedRect=null;let alphaColor=computed(()=>`hsl(var(--maz-${__props.color}) / 60%)`);let alphaColor20=computed(()=>`hsl(var(--maz-${__props.color}) / 20%)`);function updateCachedRect(){containerElement.value&&(cachedRect=containerElement.value.getBoundingClientRect())}function updateBlobPosition(x,y){if(!blobElement.value||!cachedRect)return;let translateX=x-cachedRect.left-208/2;let translateY=y-cachedRect.top-208/2;blobElement.value.style.transform=`translate(${translateX}px, ${translateY}px)`}function handleMouseMove(event){!isIntersecting||rafId!==null||(blobVisible.value=!0,rafId=requestAnimationFrame(()=>{updateBlobPosition(event.clientX,event.clientY),rafId=null}))}function stopBlobAnimation(){blobVisible.value=!1,rafId!==null&&(cancelAnimationFrame(rafId),rafId=null)}return onMounted(()=>{if(isServer()||!containerElement.value)return;updateCachedRect();let observer=new IntersectionObserver(entries=>{isIntersecting=entries[0].isIntersecting,isIntersecting||stopBlobAnimation()},{threshold:0});observer.observe(containerElement.value);let handleScrollResize=()=>{updateCachedRect()};globalThis.addEventListener(`mousemove`,handleMouseMove,{passive:!0}),globalThis.addEventListener(`scroll`,handleScrollResize,{passive:!0}),globalThis.addEventListener(`resize`,handleScrollResize,{passive:!0}),onBeforeUnmount(()=>{rafId!==null&&cancelAnimationFrame(rafId),observer.disconnect(),globalThis.removeEventListener(`mousemove`,handleMouseMove),globalThis.removeEventListener(`scroll`,handleScrollResize),globalThis.removeEventListener(`resize`,handleScrollResize)})}),(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{ref_key:`containerElement`,ref:containerElement,class:normalizeClass([`m-card-spotlight m-reset-css`,{"maz-shadow-elevation maz-drop-shadow-md":__props.elevation}]),style:normalizeStyle({backgroundColor:alphaColor20.value,"--inner-opacity":__props.innerOpacity})},[createElementVNode(`div`,_hoisted_1,[createElementVNode(`div`,{class:normalizeClass([`content`,[{"maz-p-4":__props.padding},__props.contentClass]]),style:normalizeStyle(__props.contentStyle)},[renderSlot(_ctx.$slots,`default`,{},void 0,!0)],6)]),withDirectives(createElementVNode(`div`,{ref_key:`blobElement`,ref:blobElement,class:`blob`,style:normalizeStyle({backgroundColor:alphaColor.value})},null,4),[[vShow,blobVisible.value]])],6))}}),[[`__scopeId`,`data-v-62fed5f8`]]);export{MazCardSpotlight_default as t};