vexip-ui/lib/components/collapse/collapse-transition.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const u=require("vue"),f=require("@vexip-ui/config"),b=require("./props.cjs"),T=u.defineComponent({name:"CollapseTransition",props:b.collapseTransitionProps,emits:[],setup(E,{slots:x}){const o=f.useProps("collapseTransition",E,{appear:!1,mode:{default:"default",validator:l=>["in-out","out-in","default"].includes(l)},horizontal:!1,duration:{default:250,validator:l=>l>=200},timing:null,fadeEffect:!1,reverse:!1});let m=null,g=null;return()=>{if(o.disabled)return u.renderSlot(x,"default");const l=o.duration,a=o.timing||"ease-in-out";let s="maxHeight",r="paddingTop",y="paddingBottom",d="marginTop",p="marginBottom",c="scrollHeight",v=`
        max-height ${l}ms ${a},
        padding-top ${l}ms ${a},
        padding-bottom ${l}ms ${a},
        margin-top ${l}ms ${a},
        margin-bottom ${l}ms ${a}
      `;o.horizontal&&(s="maxWidth",r="paddingLeft",y="paddingRight",d="marginLeft",p="marginRight",c="scrollWidth",v=`
          max-width ${l}ms ${a},
          padding-inline-start ${l}ms ${a},
          padding-inline-end ${l}ms ${a},
          margin-inline-start ${l}ms ${a},
          margin-inline-end ${l}ms ${a}
        `),o.fadeEffect&&(v=`
          ${v},
          opacity ${l}ms ease
        `);const i={},e={};return u.h(u.Transition,{appear:o.appear,mode:o.mode,onBeforeEnter(n){if(m)return;m="before";const t=n;i.paddingTop=t.style[r],i.paddingBottom=t.style[y],i.marginTop=t.style[d],i.marginBottom=t.style[p],i.transition=t.style.transition,i.boxSizing=t.style.boxSizing,i.opacity=t.style.opacity,t.style.transition=v,o.reverse||(t.style[s]="0",t.style[r]="0",t.style[y]="0",t.style[d]="0",t.style[p]="0",t.style.boxSizing="content-box",o.fadeEffect&&(t.style.opacity="0")),f.emitEvent(o.onBeforeEnter,n)},onEnter(n){if(m==="in")return;m="in";const t=n;i.overflow=t.style.overflow,t.style.overflow="hidden",t[c]!==0?t.style[s]=`${t[c]}px`:t.style[s]="",t.style[r]=i.paddingTop,t.style[y]=i.paddingBottom,t.style[d]=i.marginTop,t.style[p]=i.marginBottom,o.reverse?(t[c],t.style[s]="0",t.style[r]="0",t.style[y]="0",t.style[d]="0",t.style[p]="0",t.style.boxSizing="content-box",o.fadeEffect&&(t.style.opacity="0")):o.fadeEffect&&(t.style.opacity=i.opacity),f.emitEvent(o.onEnter,n)},onAfterEnter(n){const t=n;t.style.transition=i.transition||"",o.reverse||(t.style[s]="",t.style.overflow=i.overflow,t.style.boxSizing=i.boxSizing),m=null,f.emitEvent(o.onAfterEnter,n)},onEnterCancelled(n){const t=n;t.style.transition=i.transition||"",t.style[s]="",t.style.overflow=i.overflow,t.style.boxSizing=i.boxSizing,m=null,f.emitEvent(o.onEnterCancelled,n)},onBeforeLeave(n){if(g)return;g="before";const t=n;e.paddingTop=t.style[r],e.paddingBottom=t.style[y],e.marginTop=t.style[d],e.marginBottom=t.style[p],e.overflow=t.style.overflow,e.boxSizing=t.style.boxSizing,e.opacity=t.style.opacity,t.style[s]=`${t[c]}px`,t.style.overflow="hidden",f.emitEvent(o.onBeforeLeave,n)},onLeave(n){if(g==="in")return;g="in";const t=n;t[c]!==0&&(e.transition=t.style.transition,t.style.transition=v,t.style[s]="0",t.style[r]="0",t.style[y]="0",t.style[d]="0",t.style[p]="0",o.fadeEffect&&(t.style.opacity="0")),f.emitEvent(o.onLeave,n)},onAfterLeave(n){const t=n;t.style[s]="",t.style[r]=e.paddingTop,t.style[y]=e.paddingBottom,t.style[d]=e.marginTop,t.style[p]=e.marginBottom,t.style.overflow=e.overflow,t.style.transition=e.transition||"",t.style.boxSizing=e.boxSizing,t.style.opacity=e.opacity,g=null,f.emitEvent(o.onAfterLeave,n)},onLeaveCancelled(n){const t=n;t.style[s]="",t.style[r]=e.paddingTop,t.style[y]=e.paddingBottom,t.style[d]=e.marginTop,t.style[p]=e.marginBottom,t.style.overflow=e.overflow,t.style.transition=e.transition||"",t.style.boxSizing=e.boxSizing,t.style.opacity=e.opacity,g=null,f.emitEvent(o.onLeaveCancelled,n)}},x)}}});module.exports=T;
//# sourceMappingURL=collapse-transition.cjs.map