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