UNPKG

vue3-slide-up-down-fix

Version:

Vue 3 version of the vue-slide-up-down package

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