From 8ecf007f601984ee6284f25481711ae45809a23e Mon Sep 17 00:00:00 2001 From: Guillaume Chau Date: Wed, 1 Apr 2020 01:31:13 +0200 Subject: [PATCH] chore: v1.0.4 --- dist/vue-virtual-scroller.css | 2 +- dist/vue-virtual-scroller.esm.js | 2 +- dist/vue-virtual-scroller.min.js | 2 +- dist/vue-virtual-scroller.umd.js | 2 +- package.json | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/dist/vue-virtual-scroller.css b/dist/vue-virtual-scroller.css index 1cdd1438..a0d607b8 100644 --- a/dist/vue-virtual-scroller.css +++ b/dist/vue-virtual-scroller.css @@ -1 +1 @@ -.vue-recycle-scroller{position:relative}.vue-recycle-scroller.direction-vertical:not(.page-mode){overflow-y:auto}.vue-recycle-scroller.direction-horizontal:not(.page-mode){overflow-x:auto}.vue-recycle-scroller.direction-horizontal{display:-webkit-box;display:-ms-flexbox;display:flex}.vue-recycle-scroller__slot{-webkit-box-flex:1;-ms-flex:auto 0 0px;flex:auto 0 0}.vue-recycle-scroller__item-wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;position:relative}.vue-recycle-scroller.ready .vue-recycle-scroller__item-view{position:absolute;top:0;left:0;will-change:transform}.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{width:100%}.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{height:100%}.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{width:100%}.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{height:100%} \ No newline at end of file +.vue-recycle-scroller{position:relative}.vue-recycle-scroller.direction-vertical:not(.page-mode){overflow-y:auto}.vue-recycle-scroller.direction-horizontal:not(.page-mode){overflow-x:auto}.vue-recycle-scroller.direction-horizontal{display:-webkit-box;display:-ms-flexbox;display:flex}.vue-recycle-scroller__slot{-webkit-box-flex:1;-ms-flex:auto 0 0px;flex:auto 0 0}.vue-recycle-scroller__item-wrapper{-webkit-box-flex:1;-ms-flex:1;flex:1;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;position:relative}.vue-recycle-scroller.ready .vue-recycle-scroller__item-view{position:absolute;top:0;left:0;will-change:transform}.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{width:100%}.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{height:100%}.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{width:100%}.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{height:100%}.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1} \ No newline at end of file diff --git a/dist/vue-virtual-scroller.esm.js b/dist/vue-virtual-scroller.esm.js index 371c9c50..4c7bbd55 100644 --- a/dist/vue-virtual-scroller.esm.js +++ b/dist/vue-virtual-scroller.esm.js @@ -1500,7 +1500,7 @@ function registerComponents(Vue, prefix) { var plugin = { // eslint-disable-next-line no-undef - version: "1.0.3", + version: "1.0.4", install: function install(Vue, options) { var finalOptions = Object.assign({}, { installComponents: true, diff --git a/dist/vue-virtual-scroller.min.js b/dist/vue-virtual-scroller.min.js index 75bb0ebd..4c8ec9b8 100644 --- a/dist/vue-virtual-scroller.min.js +++ b/dist/vue-virtual-scroller.min.js @@ -1,2 +1,2 @@ -var VueVirtualScroller=function(e,t){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var i={itemsLimit:1e3};function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function s(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,n)}return i}function o(e){for(var t=1;te.length)&&(t=e.length);for(var i=0,n=new Array(t);i=e.length?{done:!0}:{done:!1,value:e[t++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var n,r,s=!0,o=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return s=e.done,e},e:function(e){o=!0,r=e},f:function(){try{s||null==n.return||n.return()}finally{if(o)throw r}}}}var c=void 0;function d(){d.init||(d.init=!0,c=-1!==function(){var e=window.navigator.userAgent,t=e.indexOf("MSIE ");if(t>0)return parseInt(e.substring(t+5,e.indexOf(".",t)),10);if(e.indexOf("Trident/")>0){var i=e.indexOf("rv:");return parseInt(e.substring(i+3,e.indexOf(".",i)),10)}var n=e.indexOf("Edge/");return n>0?parseInt(e.substring(n+5,e.indexOf(".",n)),10):-1}())}var u={render:function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"resize-observer",attrs:{tabindex:"-1"}})},staticRenderFns:[],_scopeId:"data-v-b329ee4c",name:"resize-observer",methods:{compareAndNotify:function(){this._w===this.$el.offsetWidth&&this._h===this.$el.offsetHeight||(this._w=this.$el.offsetWidth,this._h=this.$el.offsetHeight,this.$emit("notify"))},addResizeHandlers:function(){this._resizeObject.contentDocument.defaultView.addEventListener("resize",this.compareAndNotify),this.compareAndNotify()},removeResizeHandlers:function(){this._resizeObject&&this._resizeObject.onload&&(!c&&this._resizeObject.contentDocument&&this._resizeObject.contentDocument.defaultView.removeEventListener("resize",this.compareAndNotify),delete this._resizeObject.onload)}},mounted:function(){var e=this;d(),this.$nextTick((function(){e._w=e.$el.offsetWidth,e._h=e.$el.offsetHeight}));var t=document.createElement("object");this._resizeObject=t,t.setAttribute("aria-hidden","true"),t.setAttribute("tabindex",-1),t.onload=this.addResizeHandlers,t.type="text/html",c&&this.$el.appendChild(t),t.data="about:blank",c||this.$el.appendChild(t)},beforeDestroy:function(){this.removeResizeHandlers()}};var h={version:"0.4.5",install:function(e){e.component("resize-observer",u),e.component("ResizeObserver",u)}},f=null;function v(e){return(v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function p(e,t){for(var i=0;i2&&void 0!==arguments[2]?arguments[2]:{},o=function(o){for(var l=arguments.length,a=new Array(l>1?l-1:0),c=1;c1){var n=e.find((function(e){return e.isIntersecting}));n&&(t=n)}if(i.callback){var r=t.isIntersecting&&t.intersectionRatio>=i.threshold;if(r===i.oldResult)return;i.oldResult=r,i.callback(r,t)}}),this.options.intersection),t.context.$nextTick((function(){i.observer&&i.observer.observe(i.el)}))}}},{key:"destroyObserver",value:function(){this.observer&&(this.observer.disconnect(),this.observer=null),this.callback&&this.callback._clear&&(this.callback._clear(),this.callback=null)}},{key:"threshold",get:function(){return this.options.intersection&&this.options.intersection.threshold||0}}])&&p(t.prototype,i),n&&p(t,n),e}();function b(e,t,i){var n=t.value;if(n)if("undefined"==typeof IntersectionObserver)console.warn("[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill");else{var r=new y(e,n,i);e._vue_visibilityState=r}}function g(e){var t=e._vue_visibilityState;t&&(t.destroyObserver(),delete e._vue_visibilityState)}var _={bind:b,update:function(e,t,i){var n=t.value;if(!function e(t,i){if(t===i)return!0;if("object"===v(t)){for(var n in t)if(!e(t[n],i[n]))return!1;return!0}return!1}(n,t.oldValue)){var r=e._vue_visibilityState;n?r?r.createObserver(n,i):b(e,{value:n},i):g(e)}},unbind:g};var S={version:"0.4.6",install:function(e){e.directive("observe-visibility",_)}},$=null;"undefined"!=typeof window?$=window.Vue:"undefined"!=typeof global&&($=global.Vue),$&&$.use(S);var z="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};var w=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){var t,i;t=z,i=function(){var e=/(auto|scroll)/,t=function(e,i){return null===e.parentNode?i:t(e.parentNode,i.concat([e]))},i=function(e,t){return getComputedStyle(e,null).getPropertyValue(t)},n=function(t){return e.test(function(e){return i(e,"overflow")+i(e,"overflow-y")+i(e,"overflow-x")}(t))};return function(e){if(e instanceof HTMLElement||e instanceof SVGElement){for(var i=t(e.parentNode,[]),r=0;r1&&void 0!==arguments[1]&&arguments[1],i=this.$_unusedViews,n=e.nr.type,r=i.get(n);r||(r=[],i.set(n,r)),r.push(e),t||(e.nr.used=!1,e.position=-9999,this.$_views.delete(e.nr.key))},handleResize:function(){this.$emit("resize"),this.ready&&this.updateVisibleItems(!1)},handleScroll:function(e){var t=this;this.$_scrollDirty||(this.$_scrollDirty=!0,requestAnimationFrame((function(){t.$_scrollDirty=!1,t.updateVisibleItems(!1).continuous||(clearTimeout(t.$_refreshTimout),t.$_refreshTimout=setTimeout(t.handleScroll,100))})))},handleVisibilityChange:function(e,t){var i=this;this.ready&&(e||0!==t.boundingClientRect.width||0!==t.boundingClientRect.height?(this.$emit("visible"),requestAnimationFrame((function(){i.updateVisibleItems(!1)}))):this.$emit("hidden"))},updateVisibleItems:function(e){var t,n,r,s,o=this.itemSize,l=this.typeField,a=this.simpleArray?null:this.keyField,c=this.items,d=c.length,u=this.sizes,h=this.$_views,f=this.$_unusedViews,v=this.pool;if(d)if(this.$isServer)t=0,n=this.prerender,r=null;else{var p=this.getScroll(),m=this.buffer;if(p.start-=m,p.end+=m,null===o){var y,b=0,g=d-1,_=~~(d/2);do{y=_,u[_].accumulatorp.start&&(g=_),_=~~((b+g)/2)}while(_!==y);for(_<0&&(_=0),t=_,r=u[d-1].accumulator,n=_;nd&&(n=d)}else(t=~~(p.start/o))<0&&(t=0),(n=Math.ceil(p.end/o))>d&&(n=d),r=d*o}else t=n=r=0;n-t>i.itemsLimit&&this.itemsLimitError(),this.totalSize=r;var S,$,z,w,O,x=t<=this.$_endIndex&&n>=this.$_startIndex;if(this.$_continuous!==x){if(x){h.clear(),f.clear();for(var D=0,I=v.length;D=n)&&this.unuseView(s));x||(S=new Map);for(var T=t;Tr&&(o=r-s),e={start:s,end:s+o}}else e=i?{start:t.scrollTop,end:t.scrollTop+t.clientHeight}:{start:t.scrollLeft,end:t.scrollLeft+t.clientWidth};return e},applyPageMode:function(){this.pageMode?this.addListeners():this.removeListeners()},addListeners:function(){this.listenerTarget=this.getListenerTarget(),this.listenerTarget.addEventListener("scroll",this.handleScroll,!!D&&{passive:!0}),this.listenerTarget.addEventListener("resize",this.handleResize)},removeListeners:function(){this.listenerTarget&&(this.listenerTarget.removeEventListener("scroll",this.handleScroll),this.listenerTarget.removeEventListener("resize",this.handleResize),this.listenerTarget=null)},scrollToItem:function(e){var t;t=null===this.itemSize?e>0?this.sizes[e-1].accumulator:0:e*this.itemSize,this.scrollToPosition(t)},scrollToPosition:function(e){"vertical"===this.direction?this.$el.scrollTop=e:this.$el.scrollLeft=e},itemsLimitError:function(){var e=this;throw setTimeout((function(){console.log("It seems the scroller element isn't scrolling, so it tries to render all the items at once.","Scroller:",e.$el),console.log("Make sure the scroller has a fixed height (or width) and 'overflow-y' (or 'overflow-x') set to 'auto' so it can scroll correctly and only render the items visible in the scroll viewport.")})),new Error("Rendered items limit reached")}}};var k=function(){var e,t,i=this,n=i.$createElement,r=i._self._c||n;return r("div",{directives:[{name:"observe-visibility",rawName:"v-observe-visibility",value:i.handleVisibilityChange,expression:"handleVisibilityChange"}],staticClass:"vue-recycle-scroller",class:(e={ready:i.ready,"page-mode":i.pageMode},e["direction-"+i.direction]=!0,e),on:{"&scroll":function(e){return i.handleScroll(e)}}},[i.$slots.before?r("div",{staticClass:"vue-recycle-scroller__slot"},[i._t("before")],2):i._e(),i._v(" "),r("div",{ref:"wrapper",staticClass:"vue-recycle-scroller__item-wrapper",style:(t={},t["vertical"===i.direction?"minHeight":"minWidth"]=i.totalSize+"px",t)},i._l(i.pool,(function(e){return r("div",{key:e.nr.id,staticClass:"vue-recycle-scroller__item-view",class:{hover:i.hoverKey===e.nr.key},style:i.ready?{transform:"translate"+("vertical"===i.direction?"Y":"X")+"("+e.position+"px)"}:null,on:{mouseenter:function(t){i.hoverKey=e.nr.key},mouseleave:function(e){i.hoverKey=null}}},[i._t("default",null,{item:e.item,index:e.nr.index,active:e.nr.used})],2)})),0),i._v(" "),i.$slots.after?r("div",{staticClass:"vue-recycle-scroller__slot"},[i._t("after")],2):i._e(),i._v(" "),r("ResizeObserver",{on:{notify:i.handleResize}})],1)};k._withStripped=!0;const P=V({render:k,staticRenderFns:[]},void 0,T,void 0,!1,void 0,!1,void 0,void 0,void 0);const A={name:"DynamicScroller",components:{RecycleScroller:P},inheritAttrs:!1,provide:function(){return"undefined"!=typeof ResizeObserver&&(this.$_resizeObserver=new ResizeObserver((function(e){var t,i=a(e);try{for(i.s();!(t=i.n()).done;){var n=t.value;if(n.target){var r=new CustomEvent("resize",{detail:{contentRect:n.contentRect}});n.target.dispatchEvent(r)}}}catch(e){i.e(e)}finally{i.f()}}))),{vscrollData:this.vscrollData,vscrollParent:this,vscrollResizeObserver:this.$_resizeObserver}},props:o({},O,{minItemSize:{type:[Number,String],required:!0}}),data:function(){return{vscrollData:{active:!0,sizes:{},validSizes:{},keyField:this.keyField,simpleArray:!1}}},computed:{simpleArray:x,itemsWithSize:function(){for(var e=[],t=this.items,i=this.keyField,n=this.simpleArray,r=this.vscrollData.sizes,s=0;s0&&void 0!==arguments[0])||arguments[0];(e||this.simpleArray)&&(this.vscrollData.validSizes={}),this.$emit("vscroll:update",{force:!0})},scrollToItem:function(e){var t=this.$refs.scroller;t&&t.scrollToItem(e)},getItemSize:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,i=this.simpleArray?null!=t?t:this.items.indexOf(e):e[this.keyField];return this.vscrollData.sizes[i]||0},scrollToBottom:function(){var e=this;if(!this.$_scrollingToBottom){this.$_scrollingToBottom=!0;var t=this.$el;this.$nextTick((function(){t.scrollTop=t.scrollHeight+5e3;requestAnimationFrame((function i(){t.scrollTop=t.scrollHeight+5e3,requestAnimationFrame((function(){t.scrollTop=t.scrollHeight+5e3,0===e.$_undefinedSizes?e.$_scrollingToBottom=!1:requestAnimationFrame(i)}))}))}))}}}};var E=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("RecycleScroller",e._g(e._b({ref:"scroller",attrs:{items:e.itemsWithSize,"min-item-size":e.minItemSize,direction:e.direction,"key-field":"id"},on:{resize:e.onScrollerResize,visible:e.onScrollerVisible},scopedSlots:e._u([{key:"default",fn:function(t){var i=t.item,n=t.index,r=t.active;return[e._t("default",null,null,{item:i.item,index:n,active:r,itemWithSize:i})]}}],null,!0)},"RecycleScroller",e.$attrs,!1),e.listeners),[e._v(" "),i("template",{slot:"before"},[e._t("before")],2),e._v(" "),i("template",{slot:"after"},[e._t("after")],2)],2)};E._withStripped=!0;const j=V({render:E,staticRenderFns:[]},void 0,A,void 0,!1,void 0,!1,void 0,void 0,void 0);const U=V({},void 0,{name:"DynamicScrollerItem",inject:["vscrollData","vscrollParent","vscrollResizeObserver"],props:{item:{required:!0},watchData:{type:Boolean,default:!1},active:{type:Boolean,required:!0},index:{type:Number,default:void 0},sizeDependencies:{type:[Array,Object],default:null},emitResize:{type:Boolean,default:!1},tag:{type:String,default:"div"}},computed:{id:function(){return this.vscrollData.simpleArray?this.index:this.item[this.vscrollData.keyField]},size:function(){return this.vscrollData.validSizes[this.id]&&this.vscrollData.sizes[this.id]||0}},watch:{watchData:"updateWatchData",id:function(){this.size||this.onDataUpdate()},active:function(e){this.size||(e?this.vscrollParent.$_undefinedMap[this.id]||(this.vscrollParent.$_undefinedSizes++,this.vscrollParent.$_undefinedMap[this.id]=!0):this.vscrollParent.$_undefinedMap[this.id]&&(this.vscrollParent.$_undefinedSizes--,this.vscrollParent.$_undefinedMap[this.id]=!1)),this.vscrollResizeObserver?e?this.observeSize():this.unobserveSize():e&&this.$_pendingVScrollUpdate===this.id&&this.updateSize()}},created:function(){var e=this;if(!this.$isServer&&(this.$_forceNextVScrollUpdate=null,this.updateWatchData(),!this.vscrollResizeObserver)){var t=function(t){e.$watch((function(){return e.sizeDependencies[t]}),e.onDataUpdate)};for(var i in this.sizeDependencies)t(i);this.vscrollParent.$on("vscroll:update",this.onVscrollUpdate),this.vscrollParent.$on("vscroll:update-size",this.onVscrollUpdateSize)}},mounted:function(){this.vscrollData.active&&(this.updateSize(),this.observeSize())},beforeDestroy:function(){this.vscrollParent.$off("vscroll:update",this.onVscrollUpdate),this.vscrollParent.$off("vscroll:update-size",this.onVscrollUpdateSize),this.unobserveSize()},methods:{updateSize:function(){this.active&&this.vscrollData.active?this.$_pendingSizeUpdate!==this.id&&(this.$_pendingSizeUpdate=this.id,this.$_forceNextVScrollUpdate=null,this.$_pendingVScrollUpdate=null,this.active&&this.vscrollData.active&&this.computeSize(this.id)):this.$_forceNextVScrollUpdate=this.id},updateWatchData:function(){var e=this;this.watchData?this.$_watchData=this.$watch("data",(function(){e.onDataUpdate()}),{deep:!0}):this.$_watchData&&(this.$_watchData(),this.$_watchData=null)},onVscrollUpdate:function(e){var t=e.force;!this.active&&t&&(this.$_pendingVScrollUpdate=this.id),this.$_forceNextVScrollUpdate!==this.id&&!t&&this.size||this.updateSize()},onDataUpdate:function(){this.updateSize()},computeSize:function(e){var t=this;this.$nextTick((function(){if(t.id===e){var i=t.$el.offsetWidth,n=t.$el.offsetHeight;t.applySize(i,n)}t.$_pendingSizeUpdate=null}))},applySize:function(e,t){var i=Math.round("vertical"===this.vscrollParent.direction?t:e);i&&this.size!==i&&(this.vscrollParent.$_undefinedMap[this.id]&&(this.vscrollParent.$_undefinedSizes--,this.vscrollParent.$_undefinedMap[this.id]=void 0),this.$set(this.vscrollData.sizes,this.id,i),this.$set(this.vscrollData.validSizes,this.id,!0),this.emitResize&&this.$emit("resize",this.id))},observeSize:function(){this.vscrollResizeObserver&&(this.vscrollResizeObserver.observe(this.$el.parentNode),this.$el.parentNode.addEventListener("resize",this.onResize))},unobserveSize:function(){this.vscrollResizeObserver&&(this.vscrollResizeObserver.unobserve(this.$el.parentNode),this.$el.parentNode.removeEventListener("resize",this.onResize))},onResize:function(e){var t=e.detail.contentRect,i=t.width,n=t.height;this.applySize(i,n)}},render:function(e){return e(this.tag,this.$slots.default)}},void 0,void 0,void 0,!1,void 0,void 0,void 0);var C={version:"1.0.3",install:function(e,t){var n=Object.assign({},{installComponents:!0,componentsPrefix:""},t);for(var r in n)void 0!==n[r]&&(i[r]=n[r]);n.installComponents&&function(e,t){e.component("".concat(t,"recycle-scroller"),P),e.component("".concat(t,"RecycleScroller"),P),e.component("".concat(t,"dynamic-scroller"),j),e.component("".concat(t,"DynamicScroller"),j),e.component("".concat(t,"dynamic-scroller-item"),U),e.component("".concat(t,"DynamicScrollerItem"),U)}(e,n.componentsPrefix)}},M=null;return"undefined"!=typeof window?M=window.Vue:"undefined"!=typeof global&&(M=global.Vue),M&&M.use(C),e.DynamicScroller=j,e.DynamicScrollerItem=U,e.IdState=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=e.idProp,n=void 0===i?function(e){return e.item.id}:i,r={},s=new t({data:function(){return{store:r}}});return{data:function(){return{idState:null}},created:function(){var e=this;this.$_id=null,this.$_getId="function"==typeof n?function(){return n.call(e,e)}:function(){return e[n]},this.$watch(this.$_getId,{handler:function(e){var t=this;this.$nextTick((function(){t.$_id=e}))},immediate:!0}),this.$_updateIdState()},beforeUpdate:function(){this.$_updateIdState()},methods:{$_idStateInit:function(e){var t=this.$options.idState;if("function"==typeof t){var i=t.call(this,this);return s.$set(r,e,i),this.$_id=e,i}throw new Error("[mixin IdState] Missing `idState` function on component definition.")},$_updateIdState:function(){var e=this.$_getId();null==e&&console.warn("No id found for IdState with idProp: '".concat(n,"'.")),e!==this.$_id&&(r[e]||this.$_idStateInit(e),this.idState=r[e])}}}},e.RecycleScroller=P,e.default=C,e}({},Vue); +var VueVirtualScroller=function(e,t){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;var i={itemsLimit:1e3};function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,t,i){return t in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}function s(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,n)}return i}function o(e){for(var t=1;te.length)&&(t=e.length);for(var i=0,n=new Array(t);i=e.length?{done:!0}:{done:!1,value:e[t++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var n,r,s=!0,o=!1;return{s:function(){n=e[Symbol.iterator]()},n:function(){var e=n.next();return s=e.done,e},e:function(e){o=!0,r=e},f:function(){try{s||null==n.return||n.return()}finally{if(o)throw r}}}}var c=void 0;function d(){d.init||(d.init=!0,c=-1!==function(){var e=window.navigator.userAgent,t=e.indexOf("MSIE ");if(t>0)return parseInt(e.substring(t+5,e.indexOf(".",t)),10);if(e.indexOf("Trident/")>0){var i=e.indexOf("rv:");return parseInt(e.substring(i+3,e.indexOf(".",i)),10)}var n=e.indexOf("Edge/");return n>0?parseInt(e.substring(n+5,e.indexOf(".",n)),10):-1}())}var u={render:function(){var e=this.$createElement;return(this._self._c||e)("div",{staticClass:"resize-observer",attrs:{tabindex:"-1"}})},staticRenderFns:[],_scopeId:"data-v-b329ee4c",name:"resize-observer",methods:{compareAndNotify:function(){this._w===this.$el.offsetWidth&&this._h===this.$el.offsetHeight||(this._w=this.$el.offsetWidth,this._h=this.$el.offsetHeight,this.$emit("notify"))},addResizeHandlers:function(){this._resizeObject.contentDocument.defaultView.addEventListener("resize",this.compareAndNotify),this.compareAndNotify()},removeResizeHandlers:function(){this._resizeObject&&this._resizeObject.onload&&(!c&&this._resizeObject.contentDocument&&this._resizeObject.contentDocument.defaultView.removeEventListener("resize",this.compareAndNotify),delete this._resizeObject.onload)}},mounted:function(){var e=this;d(),this.$nextTick((function(){e._w=e.$el.offsetWidth,e._h=e.$el.offsetHeight}));var t=document.createElement("object");this._resizeObject=t,t.setAttribute("aria-hidden","true"),t.setAttribute("tabindex",-1),t.onload=this.addResizeHandlers,t.type="text/html",c&&this.$el.appendChild(t),t.data="about:blank",c||this.$el.appendChild(t)},beforeDestroy:function(){this.removeResizeHandlers()}};var h={version:"0.4.5",install:function(e){e.component("resize-observer",u),e.component("ResizeObserver",u)}},f=null;function v(e){return(v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function p(e,t){for(var i=0;i2&&void 0!==arguments[2]?arguments[2]:{},o=function(o){for(var l=arguments.length,a=new Array(l>1?l-1:0),c=1;c1){var n=e.find((function(e){return e.isIntersecting}));n&&(t=n)}if(i.callback){var r=t.isIntersecting&&t.intersectionRatio>=i.threshold;if(r===i.oldResult)return;i.oldResult=r,i.callback(r,t)}}),this.options.intersection),t.context.$nextTick((function(){i.observer&&i.observer.observe(i.el)}))}}},{key:"destroyObserver",value:function(){this.observer&&(this.observer.disconnect(),this.observer=null),this.callback&&this.callback._clear&&(this.callback._clear(),this.callback=null)}},{key:"threshold",get:function(){return this.options.intersection&&this.options.intersection.threshold||0}}])&&p(t.prototype,i),n&&p(t,n),e}();function b(e,t,i){var n=t.value;if(n)if("undefined"==typeof IntersectionObserver)console.warn("[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill");else{var r=new y(e,n,i);e._vue_visibilityState=r}}function g(e){var t=e._vue_visibilityState;t&&(t.destroyObserver(),delete e._vue_visibilityState)}var _={bind:b,update:function(e,t,i){var n=t.value;if(!function e(t,i){if(t===i)return!0;if("object"===v(t)){for(var n in t)if(!e(t[n],i[n]))return!1;return!0}return!1}(n,t.oldValue)){var r=e._vue_visibilityState;n?r?r.createObserver(n,i):b(e,{value:n},i):g(e)}},unbind:g};var S={version:"0.4.6",install:function(e){e.directive("observe-visibility",_)}},$=null;"undefined"!=typeof window?$=window.Vue:"undefined"!=typeof global&&($=global.Vue),$&&$.use(S);var z="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};var w=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){var t,i;t=z,i=function(){var e=/(auto|scroll)/,t=function(e,i){return null===e.parentNode?i:t(e.parentNode,i.concat([e]))},i=function(e,t){return getComputedStyle(e,null).getPropertyValue(t)},n=function(t){return e.test(function(e){return i(e,"overflow")+i(e,"overflow-y")+i(e,"overflow-x")}(t))};return function(e){if(e instanceof HTMLElement||e instanceof SVGElement){for(var i=t(e.parentNode,[]),r=0;r1&&void 0!==arguments[1]&&arguments[1],i=this.$_unusedViews,n=e.nr.type,r=i.get(n);r||(r=[],i.set(n,r)),r.push(e),t||(e.nr.used=!1,e.position=-9999,this.$_views.delete(e.nr.key))},handleResize:function(){this.$emit("resize"),this.ready&&this.updateVisibleItems(!1)},handleScroll:function(e){var t=this;this.$_scrollDirty||(this.$_scrollDirty=!0,requestAnimationFrame((function(){t.$_scrollDirty=!1,t.updateVisibleItems(!1).continuous||(clearTimeout(t.$_refreshTimout),t.$_refreshTimout=setTimeout(t.handleScroll,100))})))},handleVisibilityChange:function(e,t){var i=this;this.ready&&(e||0!==t.boundingClientRect.width||0!==t.boundingClientRect.height?(this.$emit("visible"),requestAnimationFrame((function(){i.updateVisibleItems(!1)}))):this.$emit("hidden"))},updateVisibleItems:function(e){var t,n,r,s,o=this.itemSize,l=this.typeField,a=this.simpleArray?null:this.keyField,c=this.items,d=c.length,u=this.sizes,h=this.$_views,f=this.$_unusedViews,v=this.pool;if(d)if(this.$isServer)t=0,n=this.prerender,r=null;else{var p=this.getScroll(),m=this.buffer;if(p.start-=m,p.end+=m,null===o){var y,b=0,g=d-1,_=~~(d/2);do{y=_,u[_].accumulatorp.start&&(g=_),_=~~((b+g)/2)}while(_!==y);for(_<0&&(_=0),t=_,r=u[d-1].accumulator,n=_;nd&&(n=d)}else(t=~~(p.start/o))<0&&(t=0),(n=Math.ceil(p.end/o))>d&&(n=d),r=d*o}else t=n=r=0;n-t>i.itemsLimit&&this.itemsLimitError(),this.totalSize=r;var S,$,z,w,O,x=t<=this.$_endIndex&&n>=this.$_startIndex;if(this.$_continuous!==x){if(x){h.clear(),f.clear();for(var D=0,I=v.length;D=n)&&this.unuseView(s));x||(S=new Map);for(var T=t;Tr&&(o=r-s),e={start:s,end:s+o}}else e=i?{start:t.scrollTop,end:t.scrollTop+t.clientHeight}:{start:t.scrollLeft,end:t.scrollLeft+t.clientWidth};return e},applyPageMode:function(){this.pageMode?this.addListeners():this.removeListeners()},addListeners:function(){this.listenerTarget=this.getListenerTarget(),this.listenerTarget.addEventListener("scroll",this.handleScroll,!!D&&{passive:!0}),this.listenerTarget.addEventListener("resize",this.handleResize)},removeListeners:function(){this.listenerTarget&&(this.listenerTarget.removeEventListener("scroll",this.handleScroll),this.listenerTarget.removeEventListener("resize",this.handleResize),this.listenerTarget=null)},scrollToItem:function(e){var t;t=null===this.itemSize?e>0?this.sizes[e-1].accumulator:0:e*this.itemSize,this.scrollToPosition(t)},scrollToPosition:function(e){"vertical"===this.direction?this.$el.scrollTop=e:this.$el.scrollLeft=e},itemsLimitError:function(){var e=this;throw setTimeout((function(){console.log("It seems the scroller element isn't scrolling, so it tries to render all the items at once.","Scroller:",e.$el),console.log("Make sure the scroller has a fixed height (or width) and 'overflow-y' (or 'overflow-x') set to 'auto' so it can scroll correctly and only render the items visible in the scroll viewport.")})),new Error("Rendered items limit reached")}}};var k=function(){var e,t,i=this,n=i.$createElement,r=i._self._c||n;return r("div",{directives:[{name:"observe-visibility",rawName:"v-observe-visibility",value:i.handleVisibilityChange,expression:"handleVisibilityChange"}],staticClass:"vue-recycle-scroller",class:(e={ready:i.ready,"page-mode":i.pageMode},e["direction-"+i.direction]=!0,e),on:{"&scroll":function(e){return i.handleScroll(e)}}},[i.$slots.before?r("div",{staticClass:"vue-recycle-scroller__slot"},[i._t("before")],2):i._e(),i._v(" "),r("div",{ref:"wrapper",staticClass:"vue-recycle-scroller__item-wrapper",style:(t={},t["vertical"===i.direction?"minHeight":"minWidth"]=i.totalSize+"px",t)},i._l(i.pool,(function(e){return r("div",{key:e.nr.id,staticClass:"vue-recycle-scroller__item-view",class:{hover:i.hoverKey===e.nr.key},style:i.ready?{transform:"translate"+("vertical"===i.direction?"Y":"X")+"("+e.position+"px)"}:null,on:{mouseenter:function(t){i.hoverKey=e.nr.key},mouseleave:function(e){i.hoverKey=null}}},[i._t("default",null,{item:e.item,index:e.nr.index,active:e.nr.used})],2)})),0),i._v(" "),i.$slots.after?r("div",{staticClass:"vue-recycle-scroller__slot"},[i._t("after")],2):i._e(),i._v(" "),r("ResizeObserver",{on:{notify:i.handleResize}})],1)};k._withStripped=!0;const P=V({render:k,staticRenderFns:[]},void 0,T,void 0,!1,void 0,!1,void 0,void 0,void 0);const A={name:"DynamicScroller",components:{RecycleScroller:P},inheritAttrs:!1,provide:function(){return"undefined"!=typeof ResizeObserver&&(this.$_resizeObserver=new ResizeObserver((function(e){var t,i=a(e);try{for(i.s();!(t=i.n()).done;){var n=t.value;if(n.target){var r=new CustomEvent("resize",{detail:{contentRect:n.contentRect}});n.target.dispatchEvent(r)}}}catch(e){i.e(e)}finally{i.f()}}))),{vscrollData:this.vscrollData,vscrollParent:this,vscrollResizeObserver:this.$_resizeObserver}},props:o({},O,{minItemSize:{type:[Number,String],required:!0}}),data:function(){return{vscrollData:{active:!0,sizes:{},validSizes:{},keyField:this.keyField,simpleArray:!1}}},computed:{simpleArray:x,itemsWithSize:function(){for(var e=[],t=this.items,i=this.keyField,n=this.simpleArray,r=this.vscrollData.sizes,s=0;s0&&void 0!==arguments[0])||arguments[0];(e||this.simpleArray)&&(this.vscrollData.validSizes={}),this.$emit("vscroll:update",{force:!0})},scrollToItem:function(e){var t=this.$refs.scroller;t&&t.scrollToItem(e)},getItemSize:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,i=this.simpleArray?null!=t?t:this.items.indexOf(e):e[this.keyField];return this.vscrollData.sizes[i]||0},scrollToBottom:function(){var e=this;if(!this.$_scrollingToBottom){this.$_scrollingToBottom=!0;var t=this.$el;this.$nextTick((function(){t.scrollTop=t.scrollHeight+5e3;requestAnimationFrame((function i(){t.scrollTop=t.scrollHeight+5e3,requestAnimationFrame((function(){t.scrollTop=t.scrollHeight+5e3,0===e.$_undefinedSizes?e.$_scrollingToBottom=!1:requestAnimationFrame(i)}))}))}))}}}};var E=function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("RecycleScroller",e._g(e._b({ref:"scroller",attrs:{items:e.itemsWithSize,"min-item-size":e.minItemSize,direction:e.direction,"key-field":"id"},on:{resize:e.onScrollerResize,visible:e.onScrollerVisible},scopedSlots:e._u([{key:"default",fn:function(t){var i=t.item,n=t.index,r=t.active;return[e._t("default",null,null,{item:i.item,index:n,active:r,itemWithSize:i})]}}],null,!0)},"RecycleScroller",e.$attrs,!1),e.listeners),[e._v(" "),i("template",{slot:"before"},[e._t("before")],2),e._v(" "),i("template",{slot:"after"},[e._t("after")],2)],2)};E._withStripped=!0;const j=V({render:E,staticRenderFns:[]},void 0,A,void 0,!1,void 0,!1,void 0,void 0,void 0);const U=V({},void 0,{name:"DynamicScrollerItem",inject:["vscrollData","vscrollParent","vscrollResizeObserver"],props:{item:{required:!0},watchData:{type:Boolean,default:!1},active:{type:Boolean,required:!0},index:{type:Number,default:void 0},sizeDependencies:{type:[Array,Object],default:null},emitResize:{type:Boolean,default:!1},tag:{type:String,default:"div"}},computed:{id:function(){return this.vscrollData.simpleArray?this.index:this.item[this.vscrollData.keyField]},size:function(){return this.vscrollData.validSizes[this.id]&&this.vscrollData.sizes[this.id]||0}},watch:{watchData:"updateWatchData",id:function(){this.size||this.onDataUpdate()},active:function(e){this.size||(e?this.vscrollParent.$_undefinedMap[this.id]||(this.vscrollParent.$_undefinedSizes++,this.vscrollParent.$_undefinedMap[this.id]=!0):this.vscrollParent.$_undefinedMap[this.id]&&(this.vscrollParent.$_undefinedSizes--,this.vscrollParent.$_undefinedMap[this.id]=!1)),this.vscrollResizeObserver?e?this.observeSize():this.unobserveSize():e&&this.$_pendingVScrollUpdate===this.id&&this.updateSize()}},created:function(){var e=this;if(!this.$isServer&&(this.$_forceNextVScrollUpdate=null,this.updateWatchData(),!this.vscrollResizeObserver)){var t=function(t){e.$watch((function(){return e.sizeDependencies[t]}),e.onDataUpdate)};for(var i in this.sizeDependencies)t(i);this.vscrollParent.$on("vscroll:update",this.onVscrollUpdate),this.vscrollParent.$on("vscroll:update-size",this.onVscrollUpdateSize)}},mounted:function(){this.vscrollData.active&&(this.updateSize(),this.observeSize())},beforeDestroy:function(){this.vscrollParent.$off("vscroll:update",this.onVscrollUpdate),this.vscrollParent.$off("vscroll:update-size",this.onVscrollUpdateSize),this.unobserveSize()},methods:{updateSize:function(){this.active&&this.vscrollData.active?this.$_pendingSizeUpdate!==this.id&&(this.$_pendingSizeUpdate=this.id,this.$_forceNextVScrollUpdate=null,this.$_pendingVScrollUpdate=null,this.active&&this.vscrollData.active&&this.computeSize(this.id)):this.$_forceNextVScrollUpdate=this.id},updateWatchData:function(){var e=this;this.watchData?this.$_watchData=this.$watch("data",(function(){e.onDataUpdate()}),{deep:!0}):this.$_watchData&&(this.$_watchData(),this.$_watchData=null)},onVscrollUpdate:function(e){var t=e.force;!this.active&&t&&(this.$_pendingVScrollUpdate=this.id),this.$_forceNextVScrollUpdate!==this.id&&!t&&this.size||this.updateSize()},onDataUpdate:function(){this.updateSize()},computeSize:function(e){var t=this;this.$nextTick((function(){if(t.id===e){var i=t.$el.offsetWidth,n=t.$el.offsetHeight;t.applySize(i,n)}t.$_pendingSizeUpdate=null}))},applySize:function(e,t){var i=Math.round("vertical"===this.vscrollParent.direction?t:e);i&&this.size!==i&&(this.vscrollParent.$_undefinedMap[this.id]&&(this.vscrollParent.$_undefinedSizes--,this.vscrollParent.$_undefinedMap[this.id]=void 0),this.$set(this.vscrollData.sizes,this.id,i),this.$set(this.vscrollData.validSizes,this.id,!0),this.emitResize&&this.$emit("resize",this.id))},observeSize:function(){this.vscrollResizeObserver&&(this.vscrollResizeObserver.observe(this.$el.parentNode),this.$el.parentNode.addEventListener("resize",this.onResize))},unobserveSize:function(){this.vscrollResizeObserver&&(this.vscrollResizeObserver.unobserve(this.$el.parentNode),this.$el.parentNode.removeEventListener("resize",this.onResize))},onResize:function(e){var t=e.detail.contentRect,i=t.width,n=t.height;this.applySize(i,n)}},render:function(e){return e(this.tag,this.$slots.default)}},void 0,void 0,void 0,!1,void 0,void 0,void 0);var C={version:"1.0.4",install:function(e,t){var n=Object.assign({},{installComponents:!0,componentsPrefix:""},t);for(var r in n)void 0!==n[r]&&(i[r]=n[r]);n.installComponents&&function(e,t){e.component("".concat(t,"recycle-scroller"),P),e.component("".concat(t,"RecycleScroller"),P),e.component("".concat(t,"dynamic-scroller"),j),e.component("".concat(t,"DynamicScroller"),j),e.component("".concat(t,"dynamic-scroller-item"),U),e.component("".concat(t,"DynamicScrollerItem"),U)}(e,n.componentsPrefix)}},M=null;return"undefined"!=typeof window?M=window.Vue:"undefined"!=typeof global&&(M=global.Vue),M&&M.use(C),e.DynamicScroller=j,e.DynamicScrollerItem=U,e.IdState=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=e.idProp,n=void 0===i?function(e){return e.item.id}:i,r={},s=new t({data:function(){return{store:r}}});return{data:function(){return{idState:null}},created:function(){var e=this;this.$_id=null,this.$_getId="function"==typeof n?function(){return n.call(e,e)}:function(){return e[n]},this.$watch(this.$_getId,{handler:function(e){var t=this;this.$nextTick((function(){t.$_id=e}))},immediate:!0}),this.$_updateIdState()},beforeUpdate:function(){this.$_updateIdState()},methods:{$_idStateInit:function(e){var t=this.$options.idState;if("function"==typeof t){var i=t.call(this,this);return s.$set(r,e,i),this.$_id=e,i}throw new Error("[mixin IdState] Missing `idState` function on component definition.")},$_updateIdState:function(){var e=this.$_getId();null==e&&console.warn("No id found for IdState with idProp: '".concat(n,"'.")),e!==this.$_id&&(r[e]||this.$_idStateInit(e),this.idState=r[e])}}}},e.RecycleScroller=P,e.default=C,e}({},Vue); //# sourceMappingURL=vue-virtual-scroller.min.js.map diff --git a/dist/vue-virtual-scroller.umd.js b/dist/vue-virtual-scroller.umd.js index e9cc4233..73e284d1 100644 --- a/dist/vue-virtual-scroller.umd.js +++ b/dist/vue-virtual-scroller.umd.js @@ -1970,7 +1970,7 @@ var plugin$2 = { // eslint-disable-next-line no-undef - version: "1.0.3", + version: "1.0.4", install: function install(Vue, options) { var finalOptions = Object.assign({}, { installComponents: true, diff --git a/package.json b/package.json index 2dc9794c..4d01a4f7 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "vue-virtual-scroller", "description": "Smooth scrolling for any amount of data", - "version": "1.0.3", + "version": "1.0.4", "author": { "name": "Guillaume Chau", "email": "guillaume.b.chau@gmail.com"