@zhibi/vue-auto-sizer/dist/index.cjs.js

A Vue AutoSizer component clone by react-virtualized AutoSizer component.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self)["@zhibi/vue-auto-sizer"]=t()}(this,(function(){"use strict";function e(e,i){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var i=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=i){var n,r,s,o,a=[],l=!0,d=!1;try{if(s=(i=i.call(e)).next,0===t){if(Object(i)!==i)return;l=!1}else for(;!(l=(n=s.call(i)).done)&&(a.push(n.value),a.length!==t);l=!0);}catch(e){d=!0,r=e}finally{try{if(!l&&null!=i.return&&(o=i.return(),Object(o)!==o))return}finally{if(d)throw r}}return a}}(e,i)||function(e,i){if(!e)return;if("string"==typeof e)return t(e,i);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(e,i)}(e,i)||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 t(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=new Array(t);i<t;i++)n[i]=e[i];return n}var i;i="undefined"!=typeof window?window:"undefined"!=typeof self?self:global;var n=null,r=null,s=i.clearTimeout,o=i.setTimeout,a=i.cancelAnimationFrame||i.mozCancelAnimationFrame||i.webkitCancelAnimationFrame,l=i.requestAnimationFrame||i.mozRequestAnimationFrame||i.webkitRequestAnimationFrame;function d(e){var t,s,o,a,l,d,h,c="undefined"!=typeof document&&document.attachEvent;if(!c){d=function(e){var t=e.__resizeTriggers__,i=t.firstElementChild,n=t.lastElementChild,r=i.firstElementChild;n.scrollLeft=n.scrollWidth,n.scrollTop=n.scrollHeight,r.style.width=i.offsetWidth+1+"px",r.style.height=i.offsetHeight+1+"px",i.scrollLeft=i.scrollWidth,i.scrollTop=i.scrollHeight},l=function(e){return e.offsetWidth!==e.__resizeLast__.width||e.offsetHeight!==e.__resizeLast__.height},h=function(e){if(!(e.target.className&&"function"==typeof e.target.className.indexOf&&e.target.className.indexOf("contract-trigger")<0&&e.target.className.indexOf("expand-trigger")<0)){var t=this;d(this),this.__resizeRAF__&&n(this.__resizeRAF__),this.__resizeRAF__=r((function(){l(t)&&(t.__resizeLast__.width=t.offsetWidth,t.__resizeLast__.height=t.offsetHeight,t.__resizeListeners__.forEach((function(i){i.call(t,e)})))}))}};var _=!1,f="";o="animationstart";var u="Webkit Moz O ms".split(" "),m="webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "),g=document.createElement("fakeelement");if(void 0!==g.style.animationName&&(_=!0),!1===_)for(var p=0;p<u.length;p++)if(void 0!==g.style[u[p]+"AnimationName"]){f="-"+u[p].toLowerCase()+"-",o=m[p],_=!0;break}t="@"+f+"keyframes "+(s="resizeanim")+" { from { opacity: 0; } to { opacity: 0; } } ",a=f+"animation: 1ms "+s+"; "}return{addResizeListener:function(n,r){if(c)n.attachEvent("onresize",r);else{if(!n.__resizeTriggers__){var l=n.ownerDocument,_=i.getComputedStyle(n);_&&"static"===_.position&&(n.style.position="relative"),function(i){if(!i.getElementById("detectElementResize")){var n=(t||"")+".resize-triggers { "+(a||"")+'visibility: hidden; opacity: 0; } .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',r=i.head||i.getElementsByTagName("head")[0],s=i.createElement("style");s.id="detectElementResize",s.type="text/css",null!=e&&s.setAttribute("nonce",e),s.styleSheet?s.styleSheet.cssText=n:s.appendChild(i.createTextNode(n)),r.appendChild(s)}}(l),n.__resizeLast__={},n.__resizeListeners__=[],(n.__resizeTriggers__=l.createElement("div")).className="resize-triggers";var f=l.createElement("div");f.className="expand-trigger",f.appendChild(l.createElement("div"));var u=l.createElement("div");u.className="contract-trigger",n.__resizeTriggers__.appendChild(f),n.__resizeTriggers__.appendChild(u),n.appendChild(n.__resizeTriggers__),d(n),n.addEventListener("scroll",h,!0),o&&(n.__resizeTriggers__.__animationListener__=function(e){e.animationName===s&&d(n)},n.__resizeTriggers__.addEventListener(o,n.__resizeTriggers__.__animationListener__))}n.__resizeListeners__.push(r)}},removeResizeListener:function(e,t){if(c)e.detachEvent("onresize",t);else if(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),!e.__resizeListeners__.length){e.removeEventListener("scroll",h,!0),e.__resizeTriggers__.__animationListener__&&(e.__resizeTriggers__.removeEventListener(o,e.__resizeTriggers__.__animationListener__),e.__resizeTriggers__.__animationListener__=null);try{e.__resizeTriggers__=!e.removeChild(e.__resizeTriggers__)}catch(e){}}}}}function h(e,t,i,n,r,s,o,a,l,d){"boolean"!=typeof o&&(l=a,a=o,o=!1);const h="function"==typeof i?i.options:i;let c;if(e&&e.render&&(h.render=e.render,h.staticRenderFns=e.staticRenderFns,h._compiled=!0,r&&(h.functional=!0)),n&&(h._scopeId=n),s?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(s)},h._ssrRegister=c):t&&(c=o?function(e){t.call(this,d(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,a(e))}),c)if(h.functional){const e=h.render;h.render=function(t,i){return c.call(i),e(t,i)}}else{const e=h.beforeCreate;h.beforeCreate=e?[].concat(e,c):[c]}return i}null==a||null==l?(n=s,r=function(e){return o(e,20)}):(n=function(t){var i=e(t,2),n=i[0],r=i[1];a(n),s(r)},r=function(e){var t=l((function(){s(i),e()})),i=o((function(){a(t),e()}),20);return[t,i]});const c={name:"AutoSizer",props:{children:Function,className:String,defaultHeight:Number,defaultWidth:Number,disableHeight:{type:Boolean,default:!1},disableWidth:{type:Boolean,default:!1},nonce:String,onResize:{type:Function,default:()=>{}},wrapperStyle:{type:Object,default:()=>({})}},data(){return{height:this.defaultHeight||0,width:this.defaultWidth||0,parentNode:null,detectElementResize:null}},mounted(){const{nonce:e}=this;this.$refs.autoSizer&&this.$refs.autoSizer.parentNode&&this.$refs.autoSizer.parentNode.ownerDocument&&this.$refs.autoSizer.parentNode.ownerDocument.defaultView&&this.$refs.autoSizer.parentNode instanceof this.$refs.autoSizer.parentNode.ownerDocument.defaultView.HTMLElement&&(this.parentNode=this.$refs.autoSizer.parentNode,this.window||window,this.detectElementResize=d(e),this.detectElementResize.addResizeListener(this.parentNode,this.onResizeHandler),this.onResizeHandler())},updated(){this.onResizeHandler()},beforeDestroy(){this.detectElementResize&&this.parentNode&&this.detectElementResize.removeResizeListener(this.parentNode,this.onResizeHandler)},computed:{outerStyle(){const e={overflow:"visible"};return this.disableHeight||(e.height=0),this.disableWidth||(e.width=0),e},childParams(){const e={};return this.disableHeight||(e.height=this.height),this.disableWidth||(e.width=this.width),e}},methods:{onResizeHandler(){const{disableHeight:e,disableWidth:t,onResize:i}=this;if(this.parentNode){const n=this.parentNode.offsetHeight||0,r=this.parentNode.offsetWidth||0,s=(this.window||window).getComputedStyle(this.parentNode)||{},o=parseInt(s.paddingLeft,10)||0,a=parseInt(s.paddingRight,10)||0,l=n-(parseInt(s.paddingTop,10)||0)-(parseInt(s.paddingBottom,10)||0),d=r-o-a;(!e&&this.height!==l||!t&&this.width!==d)&&(this.height=l,this.width=d,i({height:n,width:r}))}}},render(e){return e("div",{class:this.className,ref:"autoSizer",style:this.outerStyle},[this.$scopedSlots.default(this.childParams)])}};var _=function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{ref:"autoSizer",class:e.className,style:Object.assign({},e.outerStyle,e.wrapperStyle)},[e._t("default",null,{height:e.childParams.height,width:e.childParams.width})],2)};_._withStripped=!0;const f=h({render:_,staticRenderFns:[]},undefined,c,undefined,false,undefined,!1,void 0,void 0,void 0);return f.install=function(e){e.component(f.name,f)},f}));