import{anyType as e}from"../../_util/type.mjs";import{addClass as t,removeClass as n}from"../../vc-util/Dom/class.mjs";import{Transition as r,computed as i,createVNode as a,defineComponent as o,nextTick as s,onBeforeUnmount as c,ref as l,watch as u}from"vue";var d=e=>e?{left:e.offsetLeft,right:e.parentElement.clientWidth-e.clientWidth-e.offsetLeft,width:e.clientWidth}:null,f=e=>e===void 0?void 0:`${e}px`,p=o({props:{value:e(),getValueIndex:e(),prefixCls:e(),motionName:e(),onMotionStart:e(),onMotionEnd:e(),direction:e(),containerRef:e()},emits:[`motionStart`,`motionEnd`],setup(e,{emit:o}){let p=l(),m=t=>{let n=e.getValueIndex(t),r=e.containerRef.value?.querySelectorAll(`.${e.prefixCls}-item`)[n];return r?.offsetParent&&r},h=l(null),g=l(null);u(()=>e.value,(e,t)=>{let n=m(t),r=m(e),i=d(n),a=d(r);h.value=i,g.value=a,o(n&&r?`motionStart`:`motionEnd`)},{flush:`post`});let _=i(()=>e.direction===`rtl`?f(-h.value?.right):f(h.value?.left)),v=i(()=>e.direction===`rtl`?f(-g.value?.right):f(g.value?.left)),y,b=e=>{clearTimeout(y),s(()=>{e&&(e.style.transform=`translateX(var(--thumb-start-left))`,e.style.width=`var(--thumb-start-width)`)})},x=n=>{y=setTimeout(()=>{n&&(t(n,`${e.motionName}-appear-active`),n.style.transform=`translateX(var(--thumb-active-left))`,n.style.width=`var(--thumb-active-width)`)})},S=t=>{h.value=null,g.value=null,t&&(t.style.transform=null,t.style.width=null,n(t,`${e.motionName}-appear-active`)),o(`motionEnd`)},C=i(()=>({"--thumb-start-left":_.value,"--thumb-start-width":f(h.value?.width),"--thumb-active-left":v.value,"--thumb-active-width":f(g.value?.width)}));return c(()=>{clearTimeout(y)}),()=>{let t={ref:p,style:C.value,class:[`${e.prefixCls}-thumb`]};return a(r,{appear:!0,onBeforeEnter:b,onEnter:x,onAfterEnter:S},{default:()=>[!h.value||!g.value?null:a(`div`,t,null)]})}}});export{p as default};