UNPKG

vue3-slide-up-down-fix

Version:

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

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