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

Collapsible library based on CSS transition for Vue

var VueHeightCollapsible=function(t){"use strict";function e(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var i=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==i)return;var n,r,o=[],s=!0,a=!1;try{for(i=i.call(t);!(s=(n=i.next()).done)&&(o.push(n.value),!e||o.length!==e);s=!0);}catch(t){a=!0,r=t}finally{try{s||null==i.return||i.return()}finally{if(a)throw r}}return o}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return i(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return i(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}var n="collapsed",r="collapsing",o="expanding",s="expanded",a="0px",l=function(t){return requestAnimationFrame((function(){requestAnimationFrame(t)}))},h={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:function(){return{collapseState:this.isOpen?s:n,isMounted:!1}},watch:{isOpen:function(t,e){this.isMounted?(t&&!e&&this.setExpanding(),!t&&e&&this.setCollapsing()):this.$emit("error",{type:"isOpen",msg:"not mounted yet"})},transition:function(t,e){t!==e&&this.$refs.root&&(this.$refs.root.style.transition=t)}},mounted:function(){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},beforeUnmount:function(){this.$refs.root.removeEventListener("transitionend",this.onTransitionEnd)},methods:{setCollapsed:function(){if(this.$refs.root){this.collapseState=n;var t=this.$refs.root.style;t.overflowY=this.getOverflow(),t.height=a,t.visibility="hidden",this.$emit("update",{state:n,height:a})}},setExpanded:function(){if(this.$refs.root){this.collapseState=s;var t=this.$refs.root.style;t.overflowY=this.getOverflow(),t.height="",t.visibility="",this.$emit("update",{state:s,height:this.getElementHeight()})}},setCollapsing:function(){var t=this;if(this.$refs.root){this.collapseState=r;var e=this.getElementHeight(),i=this.$refs.root.style;i.overflowY=this.getOverflow(),i.height=e,i.visibility="",this.$emit("update",{state:r,height:e}),l((function(){t.$refs.root&&t.collapseState===r&&(t.$refs.root.style.height=a)}))}},setExpanding:function(){var t=this;this.$refs.root&&(this.$emit("update",{state:o,height:""}),this.collapseState=o,l((function(){if(t.$refs.root&&t.collapseState===o){var e=t.$refs.root.style;e.overflowY=t.getOverflow(),e.height=t.getElementHeight(),e.visibility=""}})))},getElementHeight:function(){return"".concat(this.$refs.root.scrollHeight,"px")},getOverflow:function(){return this.collapseState===s&&this.overflowOnExpanded?"":"hidden"},onTransitionEnd:function(t){"height"===t.propertyName&&t.target===this.$refs.root&&(this.getElementHeight()===this.$refs.root.style.height?this.collapseState===o&&this.setExpanded():this.collapseState===r&&this.setCollapsed())}}};h.render=function(e,i,n,r,o,s){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(n.tag),{ref:"root","data-height-collapsible":"","data-collapse-state":o.collapseState},{default:t.withCtx((function(){return[t.renderSlot(e.$slots,"default",{state:o.collapseState})]})),_:3},8,["data-collapse-state"])};var f=function(){var t=h;return t.install=function(e){e.component("VueHeightCollapsible",t)},t}(),u=Object.freeze({__proto__:null,default:f});return Object.entries(u).forEach((function(t){var i=e(t,2),n=i[0],r=i[1];"default"!==n&&(f[n]=r)})),f}(Vue);