import{objectType as e}from"../type.mjs";import t from"../raf.mjs";import n from"../hooks/useState.mjs";import{getTargetWaveColor as r}from"./util.mjs";import{Transition as i,createVNode as a,defineComponent as o,onBeforeUnmount as s,onMounted as c,render as l,shallowRef as u}from"vue";function d(e){return Number.isNaN(e)?0:e}var f=o({props:{target:e(),className:String},setup(e){let o=u(null),[f,p]=n(null),[m,h]=n([]),[g,_]=n(0),[v,y]=n(0),[b,x]=n(0),[S,C]=n(0),[w,T]=n(!1);function E(){let{target:t}=e,n=getComputedStyle(t);p(r(t));let i=n.position===`static`,{borderLeftWidth:a,borderTopWidth:o}=n;_(i?t.offsetLeft:d(-Number.parseFloat(a))),y(i?t.offsetTop:d(-Number.parseFloat(o))),x(t.offsetWidth),C(t.offsetHeight);let{borderTopLeftRadius:s,borderTopRightRadius:c,borderBottomLeftRadius:l,borderBottomRightRadius:u}=n;h([s,c,u,l].map(e=>d(Number.parseFloat(e))))}let D,O,k,A=()=>{clearTimeout(k),t.cancel(O),D?.disconnect()},j=()=>{let e=o.value?.parentElement;e&&(l(null,e),e.parentElement&&e.parentElement.removeChild(e))};c(()=>{A(),k=setTimeout(()=>{j()},5e3);let{target:n}=e;n&&(O=t(()=>{E(),T(!0)}),typeof ResizeObserver<`u`&&(D=new ResizeObserver(E),D.observe(n)))}),s(()=>{A()});let M=e=>{e.propertyName===`opacity`&&j()};return()=>{if(!w.value)return null;let t={left:`${g.value}px`,top:`${v.value}px`,width:`${b.value}px`,height:`${S.value}px`,borderRadius:m.value.map(e=>`${e}px`).join(` `)};return f&&(t[`--wave-color`]=f.value),a(i,{appear:!0,name:`wave-motion`,appearFromClass:`wave-motion-appear`,appearActiveClass:`wave-motion-appear`,appearToClass:`wave-motion-appear wave-motion-appear-active`},{default:()=>[a(`div`,{ref:o,class:e.className,style:t,onTransitionend:M},null)]})}}});function p(e,t){let n=document.createElement(`div`);return n.style.position=`absolute`,n.style.left=`0px`,n.style.top=`0px`,e?.insertBefore(n,e?.firstChild),l(a(f,{target:e,className:t},null),n),()=>{l(null,n),n.parentElement&&n.parentElement.removeChild(n)}}export{p as default};