vue3-slide-up-down-fix
Version:
Vue 3 version of the vue-slide-up-down package
2 lines (1 loc) • 2.35 kB
JavaScript
(()=>{var M=Object.defineProperty,A=Object.defineProperties;var F=Object.getOwnPropertyDescriptors;var y=Object.getOwnPropertySymbols;var O=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var b=(e,l,a)=>l in e?M(e,l,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[l]=a,d=(e,l)=>{for(var a in l||(l={}))O.call(l,a)&&b(e,a,l[a]);if(y)for(var a of y(l))$.call(l,a)&&b(e,a,l[a]);return e},h=(e,l)=>A(e,F(l));var z=function(e){"use strict";var a={emits:["open-start","close-start","open-end","close-end","layout-shift"],props:d({},{modelValue:{type:Boolean,default:!1},duration:{type:Number,default:500},timingFunction:{type:String,default:"ease-in-out"},tag:{type:String,default:"div"},responsive:{type:Boolean,default:!1}}),setup(t,{slots:V,attrs:w,emit:i}){const n=e.ref(null),f=e.ref(!1),r=e.ref(!1),o=e.ref(0),s=e.ref(0),v=e.ref(!1),H=e.computed(()=>typeof t.duration=="number"?`${t.duration}ms`:t.duration),x=u=>{setTimeout(()=>{window.requestAnimationFrame(u)},0)},c=()=>{n.value&&(o.value=n.value.scrollHeight)},g=()=>{if(v.value===!0)return t.modelValue===!1&&(s.value=0),c(),m({target:n.value});s.value=o.value+"px",t.modelValue===!1?(r.value=!0,i("close-start"),x(()=>{s.value=0})):i("open-start"),v.value=!0},I=()=>{const u=setInterval(()=>{n.value&&n.value.scrollHeight!==0&&o.value===0&&(clearInterval(u),o.value=n.value.scrollHeight,g())},5);setTimeout(()=>{clearInterval(u)},5*1e3)},S=e.computed(()=>({transition:f.value?`height ${H.value} ${t.timingFunction}`:null,height:f.value?s.value:null,overflowY:r.value?"hidden":null,"--content-height":o.value})),T=e.computed(()=>({"aria-hidden":t.modelValue===!1,tabindex:t.modelValue===!1?"-1":null})),m=u=>{u.target===n.value&&(t.modelValue===!0?(s.value=null,r.value=!1,i("open-end")):i("close-end"),v.value=!1)};e.onMounted(()=>{c(),t.modelValue?s.value=o.value+"px":(s.value=0,r.value=!0),t.responsive&&B(),f.value=!0,I()}),e.watch(()=>t.modelValue,u=>{c(),g()});const p=()=>{t.modelValue!==!1&&(i("layout-shift"),s.value=o.value+"px",r.value=!0,c(),setTimeout(g,0))},B=()=>{const u=new MutationObserver(p),D={subtree:!0,attributes:!1,childList:!0,characterData:!1};u.observe(n.value,D)};return()=>e.h(t.tag,h(d(h(d({},Object.assign({},w,{style:S.value})),{class:"slide-up-down__container",onTransitionend:m}),T.value),{ref:n}),V.default())}};return a}(Vue);})();