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