vue-height-collapsible/dist/vue-height-collapsible.min.js

Collapsible library based on CSS transition for Vue

var VueHeightCollapsible=function(){"use strict";let t="collapsed",e="collapsing",s="expanding",i="expanded",o="0px",n=t=>requestAnimationFrame((()=>{requestAnimationFrame(t)}));function r(t,e,s,i,o,n,r,l,a,h){"boolean"!=typeof r&&(a=l,l=r,r=!1);const d="function"==typeof s?s.options:s;let f;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),i&&(d._scopeId=i),n?(f=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,a(t)),t&&t._registeredComponents&&t._registeredComponents.add(n)},d._ssrRegister=f):e&&(f=r?function(t){e.call(this,h(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,l(t))}),f)if(d.functional){const t=d.render;d.render=function(e,s){return f.call(s),t(e,s)}}else{const t=d.beforeCreate;d.beforeCreate=t?[].concat(t,f):[f]}return s}var l=r({render:function(){var t=this,e=t.$createElement;return(t._self._c||e)(t.tag,{ref:"root",tag:"component",attrs:{"data-height-collapsible":"","data-collapse-state":t.collapseState}},[t._t("default",null,{state:t.collapseState})],2)},staticRenderFns:[]},undefined,{name:"HeightCollapsible",props:{isOpen:{type:Boolean,required:!0,default:!0},overflowOnExpanded:{type:Boolean,default:!1},tag:{type:String,default:"div"},transition:{type:String,default:null}},data(){return{collapseState:this.isOpen?i:t,isMounted:!1}},watch:{isOpen(t,e){this.isMounted?(t&&!e&&this.setExpanding(),!t&&e&&this.setCollapsing()):this.$emit("error",{type:"isOpen",msg:"not mounted yet"})},transition(t,e){t!==e&&this.$refs.root&&(this.$refs.root.style.transition=t)}},mounted(){this.isOpen?this.setExpanded():this.setCollapsed(),this.transition&&(this.$refs.root.style.transition=this.transition),this.$refs.root.addEventListener("transitionend",this.onTransitionEnd),this.isMounted=!0},beforeDestroy(){this.$refs.root.removeEventListener("transitionend",this.onTransitionEnd)},methods:{setCollapsed(){if(!this.$refs.root)return;this.collapseState=t;let e=this.$refs.root.style;e.overflowY=this.getOverflow(),e.height=o,e.visibility="hidden",this.$emit("update",{state:t,height:o})},setExpanded(){if(!this.$refs.root)return;this.collapseState=i;let t=this.$refs.root.style;t.overflowY=this.getOverflow(),t.height="",t.visibility="",this.$emit("update",{state:i,height:this.getElementHeight()})},setCollapsing(){if(!this.$refs.root)return;this.collapseState=e;let t=this.getElementHeight(),s=this.$refs.root.style;s.overflowY=this.getOverflow(),s.height=t,s.visibility="",this.$emit("update",{state:e,height:t}),n((()=>{this.$refs.root&&this.collapseState===e&&(this.$refs.root.style.height=o)}))},setExpanding(){this.$refs.root&&(this.$emit("update",{state:s,height:""}),this.collapseState=s,n((()=>{if(!this.$refs.root)return;if(this.collapseState!==s)return;let t=this.$refs.root.style;t.overflowY=this.getOverflow(),t.height=this.getElementHeight(),t.visibility=""})))},getElementHeight(){return`${this.$refs.root.scrollHeight}px`},getOverflow(){return this.collapseState===i&&this.overflowOnExpanded?"":"hidden"},onTransitionEnd(t){"height"===t.propertyName&&t.target===this.$refs.root&&(this.getElementHeight()===this.$refs.root.style.height?this.collapseState===s&&this.setExpanded():this.collapseState===e&&this.setCollapsed())}}},undefined,false,undefined,!1,void 0,void 0,void 0),a=(()=>{const t=l;return t.install=e=>{e.component("VueHeightCollapsible",t)},t})(),h=Object.freeze({__proto__:null,default:a});return Object.entries(h).forEach((([t,e])=>{"default"!==t&&(a[t]=e)})),a}();