chronocraft-scroller-vue - npm Package Compare versions

Comparing version 0.0.30 to 0.0.31

dist/chronocraftscrollervue-browser.min.js

@@ -1,1 +0,1 @@
-var chronocraftscrollervue=function(e,t){"use strict";var l=t.defineComponent({name:"Scroller",components:{},props:{data:{type:Array,default:()=>[]},orientation:{type:String,default:"vertical"},height:{type:Number,default:400},numcols:{type:Number,default:4},numrows:{type:Number,default:4},gap:{type:Number,default:10},contentpadding:{type:Number,default:10},cellheight:{type:Number,default:100},cellwidth:{type:Number,default:100},cellsquared:{type:Boolean,default:!0},wheelscrollspeed:{type:Number,default:6},newcellslength:{type:Number,default:10},manualmode:{type:Boolean,default:!1},hasscrollbar:{type:Boolean,default:!0}},setup(e,l){let n=t.ref(e.cellwidth+"px"),r=t.ref(e.cellheight+"px"),o=t.ref("100%"),a=null;const i=t.ref(null);let s,c,d,f=0,u=0,p=!1,v=!1,h=0,m=0,g=0,x=!1,b=200,y=!1,w=t.ref(!1),k=t.ref(""),T=1,S=1e7;const L=t.ref(e.data);function E(){"vertical"===e.orientation?a.scrollTop+=f:a.scrollLeft+=f,f*=.97,Math.abs(f)>.5&&(u=requestAnimationFrame(E))}function N(){cancelAnimationFrame(u)}function B(){N(),u=requestAnimationFrame(E)}function z(){var t,l=z.width;return e.hasscrollbar?void 0===l&&((t=document.createElement("div")).innerHTML='<div style="width:50px;height:50px;position:absolute;left:-50px;top:-50px;overflow:auto;"><div style="width:1px;height:100px;"></div></div>',t=t.firstChild,document.body.appendChild(t),l=z.width=t.offsetWidth-t.clientWidth,document.body.removeChild(t)):l=0,l}function W(t){S-=L.value.length-1;for(let e=0;e<t.length;e++)t[e].index=S-e;L.value=[...L.value,...t],L.value.splice(0,t.length);let n=document.querySelector(".scroller-cell");n.offsetHeight,e.gap;let r=n.offsetWidth+e.gap;var o=0;if("vertical"===e.orientation)parseInt(t.length/e.numcols),o=m,a.scrollTop=o,d=o-(m-d);else{var i=parseInt(t.length/e.numrows);o=m-r*i,a.scrollLeft=o,d=o-(m-d)}setTimeout((()=>{y=!1}),400),l.emit("on-data-updated",JSON.parse(JSON.stringify(L.value)))}function C(t){for(let e=0;e<t.length;e++)t[e].index=S+t.length-e;S+=t.length-1,L.value=[...t,...L.value],L.value.splice(L.value.length-t.length,L.value.length-1);let n=document.querySelector(".scroller-cell"),r=n.offsetHeight+e.gap,o=n.offsetWidth+e.gap;var i=0;if("vertical"===e.orientation){var s=Math.floor(t.length/e.numcols);0===m?(i=r*s,setTimeout((()=>{a.scrollTop=i}),0)):(i=m,a.scrollTop=i),d=i-(m-d)}else{var c=parseInt(t.length/e.numrows);i=m+o*c,a.scrollLeft=i,d=i-(m-d)}setTimeout((()=>{y=!1}),400),l.emit("on-data-updated",JSON.parse(JSON.stringify(L.value)))}async function M(t,n,r){if(1===t)if("vertical"===e.orientation){if(a.scrollTop+a.offsetHeight>=a.scrollHeight-b&&!y){y=!0;var o=L.value[0].id,i=L.value[L.value.length-1].id;l.emit("on-update-data-next",(e=>{W(e)}),o,i)}}else if((a.scrollLeft+a.offsetWidth>=a.scrollWidth-b||a.scrollLeft===a.scrollWidth-a.clientWidth)&&!y){y=!0;o=L.value[0].id,i=L.value[L.value.length-1].id;l.emit("on-update-data-next",(e=>{setTimeout((()=>{W(e)}),10)}),o,i)}if(-1===t)if("vertical"===e.orientation){if(a.scrollTop<b&&!y){y=!0;o=L.value[0].id,i=L.value[L.value.length-1].id;l.emit("on-update-data-previous",(e=>{C(e)}),o,i)}}else if(a.scrollLeft<b&&!y){y=!0;o=L.value[0].id,i=L.value[L.value.length-1].id;l.emit("on-update-data-previous",(e=>{setTimeout((()=>{C(e)}),10)}),o,i)}}function I(t){"number"==typeof t&&("vertical"===e.orientation?a.scrollTo({top:t,left:0,behavior:"smooth"}):a.scrollTo({top:0,left:t,behavior:"smooth"}))}function O(t){for(var l=-1,n=0;n<L.value.length;n++)if(L.value[n]&&L.value[n].id===t){L.value[n];var r="cell_"+L.value[n].id,o=document.getElementById(r),a=o.getBoundingClientRect(),i=document.querySelector(".scroller-content");if("vertical"===e.orientation){var s=parseInt(i.style.paddingTop);l=o.offsetTop-s+e.gap}else{s=parseInt(i.style.paddingRight);l=parseInt(a.left-e.gap-s)}break}return l}function q(){a=document.querySelector(".scroller"),g=z();var t=0,i=0,u=0;if("vertical"===e.orientation)t=(e.numcols-1)*e.gap+g,a.offsetWidth,i=(a.offsetWidth-t-2*e.contentpadding)/e.numcols,n.value=String(i+"%"),o.value=String(i+"px"),e.cellsquared&&(u=(a.clientWidth-t-2*e.contentpadding)/e.numcols,r.value=u+"px");else{t=(e.numrows-1)*e.gap+g,a.offsetHeight,u=(a.offsetHeight-t-2*e.contentpadding)/e.numrows;var x=(a.offsetHeight-t-2*e.contentpadding)/e.numrows;r.value=String(u+"px"),o.value=String(x+"px"),e.cellsquared&&(i=u,n.value=i+"px")}a.addEventListener("mousedown",(t=>{p=!0,a.classList.add("active"),"vertical"===e.orientation?(s=t.pageY-a.offsetTop,c=t.pageY,d=a.scrollTop,h=t.clientY):(s=t.pageX-a.offsetLeft,c=t.pageX,d=a.scrollLeft,h=t.clientX),N()})),a.addEventListener("mouseleave",(()=>{p=!1,a.classList.remove("active")})),a.addEventListener("mouseup",(t=>{p=!1,v=!1,a.classList.remove("active"),B();var n=0;n="vertical"===e.orientation?c-t.pageY:c-t.pageX,Math.abs(n)>10&&l.emit("on-scroll")})),a.addEventListener("mousemove",(t=>{if(p){t.preventDefault(),v=!0;var l=0,n=0;"vertical"===e.orientation?(l=2*(t.pageY-a.offsetTop-s),n=a.scrollTop,a.scrollTop=d-l,f=a.scrollTop-n,a.scrollTop=d-l):(l=2*(t.pageX-a.offsetLeft-s),n=a.scrollLeft,a.scrollLeft=d-l,f=a.scrollLeft-n,a.scrollLeft=d-l)}})),a.addEventListener("wheel",(t=>{if(N(),"vertical"===e.orientation){const l=Math.sign(t.deltaY)*e.wheelscrollspeed,n=a.scrollTop;a.scrollTop+=l,f=a.scrollTop-n}else{const l=Math.sign(t.deltaY)*e.wheelscrollspeed,n=a.scrollLeft;a.scrollLeft+=l,f=a.scrollLeft-n,a.scrollLeft,a.scrollWidth,a.clientWidth}l.emit("on-scroll"),B()})),a.addEventListener("scroll",(t=>{var l=0;if("vertical"===e.orientation){let e=a.scrollTop;0!=(l=e-m)&&(T=parseInt(l/Math.abs(l))),m=e}else{let e=a.scrollLeft;0!=(l=e-m)&&(T=parseInt(l/Math.abs(l))),m=e}})),setInterval((()=>{e.orientation,M(T)}),200),setInterval((()=>{if("vertical"===e.orientation){let e=a.scrollTop;m=e}else{let e=a.scrollLeft;m=e}}),50)}function H(e){q()}return t.onBeforeMount((()=>{setTimeout((()=>{for(var e=0;e<L.value.length;e++)L.value[e].index=S-e}),10)})),t.onMounted((()=>{window.addEventListener("resize",H),q(),l.emit("on-data-updated",JSON.parse(JSON.stringify(L.value)))})),t.onUpdated((()=>{!function(){let t=document.querySelector(".scroller-cell");if(t){let i=t.offsetHeight+e.gap,s=t.offsetWidth+e.gap;a=document.querySelector(".scroller");var l=0;if("vertical"===e.orientation){var n=a.offsetHeight/i;l=parseInt(Math.round(n)*e.numcols)}else{var r=a.offsetWidth/s;l=parseInt(Math.round(r)*e.numrows)}var o=l+3*e.newcellslength;o>L.value.length&&(console.log("Error: Minimum Cells Required to load at start should be: ",o),w.value=!0,k.value="Error: Minimum Cells Required to load at start should be: "+o+". This value is relevant to the scroller width and to the number of new cells added each time.")}}()})),{cellW:n,cellH:r,cellFlexBasis:o,scroller:a,cellRef:i,isMouseDown:p,ScrollTo:I,ScrollBy:function(t){"number"==typeof t&&("vertical"===e.orientation?a.scrollBy({top:t,left:0,behavior:"smooth"}):a.scrollBy({top:0,left:t,behavior:"smooth"}))},ScrollToCell:function(e){I(O(e))},GetCellsPosition:O,GetOverflowX:function(){let t="hidden";return"horizontal"===e.orientation&&e.hasscrollbar&&(t="auto"),t},GetOverflowY:function(){let t="hidden";return"vertical"===e.orientation&&e.hasscrollbar&&(t="auto"),t},startPos:s,startscrollPos:c,movescrollPos:d,scrollerMoving:v,previousPos:h,scrollbarWidth:g,justLoaded:x,scrollLoadingOffset:b,cellsdata:L,alertvisible:w,alerttext:k,dirsign:T}}});const n={class:"overlay"},r=["id"],o={class:"cell-text"},a={key:0,class:"alert-overlay"};!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===l&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".scroller-container[data-v-2883d3df] {\r\n    position: relative;\n}\n.alert-overlay[data-v-2883d3df] {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0px;\r\n    left: 0px;\r\n    background: #555555bb;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-justify-content: center;\r\n        -ms-flex-pack: center;\r\n            justify-content: center;\r\n    -webkit-align-items: center;\r\n        -ms-flex-align: center;\r\n            align-items: center;\n}\n.alert-overlay h3[data-v-2883d3df] {\r\n    color: #fff;\r\n    font-weight: 400;\n}\n.debugcellstyle[data-v-2883d3df] {\r\n    background-color: brown !important;\n}\n.overlay[data-v-2883d3df] {\r\n    position: fixed;\r\n    z-index: 100000000000000;\n}\n.scroller[data-v-2883d3df] {\r\n    background: #eaeaea;\r\n    position: relative;\n}\n.vertical-scroller[data-v-2883d3df] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\n.horizontal-scroller[data-v-2883d3df] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\n.scroller-content[data-v-2883d3df] {\r\n    -ms-flex-line-pack: start;\r\n            -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    -webkit-flex-direction: row;\r\n        -ms-flex-direction: row;\r\n            flex-direction: row;\r\n    -webkit-flex-wrap: wrap;\r\n        -ms-flex-wrap: wrap;\r\n            flex-wrap: wrap;\n}\n.vertical-container[data-v-2883d3df] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\n.horizontal-container[data-v-2883d3df] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    -webkit-flex-flow: column wrap !important;\r\n        -ms-flex-flow: column wrap !important;\r\n            flex-flow: column wrap !important;\r\n    height: inherit !important;\r\n    -ms-flex-line-pack: start;\r\n            -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    width: 100%;\n}\n.scroller-cell[data-v-2883d3df] {\r\n\r\n    background: #b6b6b6;\r\n\r\n    -webkit-flex: inherit;\r\n\r\n        -ms-flex: inherit;\r\n\r\n            flex: inherit;\r\n    -webkit-flex-grow: 0;\r\n        -ms-flex-positive: 0;\r\n            flex-grow: 0;\r\n    -ms-flex-negative: 0;\r\n            -webkit-flex-shrink: 0;\r\n            flex-shrink: 0;\r\n    -ms-flex-preferred-size: 25%;\r\n            -webkit-flex-basis: 25%;\r\n            flex-basis: 25%;\r\n\r\n    /* for theme */\r\n    background: #ffffff;\r\n    /* box-shadow: 2px 2px 2px 2px rgb(221 221 221 / 60%); */\r\n    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\r\n    border-radius: 5px;\r\n\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    -ms-user-select: none;\r\n    user-select: none;\n}\n.vertical-cell[data-v-2883d3df] {\r\n    display: inline-block;\r\n    height: 50px;\n}\n.horizontal-cell[data-v-2883d3df] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    height: unset !important;\r\n    width: 90px;\n}\n.dummycell[data-v-2883d3df] {\r\n    height: 20px;\n}\n.cell-text[data-v-2883d3df] {\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 18pt;\r\n\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    -ms-user-select: none;\r\n    user-select: none;\n}\r\n"),l.render=function(e,l,i,s,c,d){return t.openBlock(),t.createElementBlock("div",{class:"scroller-container",style:t.normalizeStyle([{height:e.height+"px"}])},[t.createElementVNode("div",{class:t.normalizeClass(["scroller","vertical"===e.orientation?"vertical-scroller":"horizontal-scroller"]),style:t.normalizeStyle([{height:e.height+"px"},{"overflow-x":e.GetOverflowX()+" !important","overflow-y":e.GetOverflowY()+" !important"}])},[t.createElementVNode("div",n,[t.renderSlot(e.$slots,"overlay")]),t.createElementVNode("div",{class:t.normalizeClass(["scroller-content","vertical"===e.orientation?"vertical-container":"horizontal-container"]),style:t.normalizeStyle([{gap:e.gap+"px"},{padding:e.contentpadding+"px"}])},[t.renderSlot(e.$slots,"content",{},(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.cellsdata,(l=>(t.openBlock(),t.createElementBlock("div",{id:"cell_"+l.id,ref_for:!0,ref:"cellRef",key:l.id,class:t.normalizeClass(["scroller-cell","vertical"===e.orientation?"vertical-cell":"horizontal-cell",l.debug?"debugcellstyle":""]),style:t.normalizeStyle({"flex-basis":e.cellFlexBasis,height:e.cellH,width:e.cellW,"z-index":l.index})},[t.renderSlot(e.$slots,"cell",{data:l},(()=>[t.createElementVNode("span",o,t.toDisplayString(l.id),1)]))],14,r)))),128))]))],6)],6),e.alertvisible?(t.openBlock(),t.createElementBlock("div",a,[t.createElementVNode("h3",null,t.toDisplayString(e.alerttext),1)])):t.createCommentVNode("",!0)],4)},l.__scopeId="data-v-2883d3df";var i=Object.freeze({__proto__:null,Scroller:l});const s={install(e){Object.entries(i).forEach((([t,l])=>{e.component(t,l)}))}};return e.Scroller=l,e.default=s,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue);
+var chronocraftscrollervue=function(e,t){"use strict";var l=t.defineComponent({name:"Scroller",components:{},props:{data:{type:Array,default:()=>[]},orientation:{type:String,default:"vertical"},height:{type:Number,default:400},numcols:{type:Number,default:4},numrows:{type:Number,default:4},gap:{type:Number,default:10},contentpadding:{type:Number,default:10},cellheight:{type:Number,default:100},cellwidth:{type:Number,default:100},cellsquared:{type:Boolean,default:!0},wheelscrollspeed:{type:Number,default:6},newcellslength:{type:Number,default:10},manualmode:{type:Boolean,default:!1},hasscrollbar:{type:Boolean,default:!0}},setup(e,l){let n=t.ref(e.cellwidth+"px"),r=t.ref(e.cellheight+"px"),o=t.ref("100%"),a=null;const i=t.ref(null);let s,c,d,f=0,u=0,p=!1,v=!1,h=0,m=0,g=0,x=!1,b=200,y=!1,w=t.ref(!1),k=t.ref(""),T=1,S=1e7;const L=t.ref(e.data);function E(){"vertical"===e.orientation?a.scrollTop+=f:a.scrollLeft+=f,f*=.97,Math.abs(f)>.5&&(u=requestAnimationFrame(E))}function N(){cancelAnimationFrame(u)}function B(){N(),u=requestAnimationFrame(E)}function z(){var t,l=z.width;return e.hasscrollbar?void 0===l&&((t=document.createElement("div")).innerHTML='<div style="width:50px;height:50px;position:absolute;left:-50px;top:-50px;overflow:auto;"><div style="width:1px;height:100px;"></div></div>',t=t.firstChild,document.body.appendChild(t),l=z.width=t.offsetWidth-t.clientWidth,document.body.removeChild(t)):l=0,l}function W(t){S-=L.value.length-1;for(let e=0;e<t.length;e++)t[e].index=S-e;L.value=[...L.value,...t],L.value.splice(0,t.length);let n=document.querySelector(".scroller-cell");n.offsetHeight,e.gap;let r=n.offsetWidth+e.gap;var o=0;if("vertical"===e.orientation)parseInt(t.length/e.numcols),o=m,a.scrollTop=o,d=o-(m-d);else{var i=parseInt(t.length/e.numrows);o=m-r*i,a.scrollLeft=o,d=o-(m-d)}setTimeout((()=>{y=!1}),400),l.emit("on-data-updated",JSON.parse(JSON.stringify(L.value)))}function C(t){for(let e=0;e<t.length;e++)t[e].index=S+t.length-e;S+=t.length-1,L.value=[...t,...L.value],L.value.splice(L.value.length-t.length,L.value.length-1);let n=document.querySelector(".scroller-cell"),r=n.offsetHeight+e.gap,o=n.offsetWidth+e.gap;var i=0;if("vertical"===e.orientation){var s=Math.floor(t.length/e.numcols);0===m?(i=r*s,setTimeout((()=>{a.scrollTop=i}),0)):(i=m,a.scrollTop=i),d=i-(m-d)}else{var c=parseInt(t.length/e.numrows);i=m+o*c,a.scrollLeft=i,d=i-(m-d)}setTimeout((()=>{y=!1}),400),l.emit("on-data-updated",JSON.parse(JSON.stringify(L.value)))}async function M(t,n,r){if(1===t)if("vertical"===e.orientation){if(a.scrollTop+a.offsetHeight>=a.scrollHeight-b&&!y){y=!0;var o=L.value[0].id,i=L.value[L.value.length-1].id;l.emit("on-update-data-next",(e=>{W(e)}),o,i)}}else if((a.scrollLeft+a.offsetWidth>=a.scrollWidth-b||a.scrollLeft===a.scrollWidth-a.clientWidth)&&!y){y=!0;o=L.value[0].id,i=L.value[L.value.length-1].id;l.emit("on-update-data-next",(e=>{setTimeout((()=>{W(e)}),10)}),o,i)}if(-1===t)if("vertical"===e.orientation){if(a.scrollTop<b&&!y){y=!0;o=L.value[0].id,i=L.value[L.value.length-1].id;l.emit("on-update-data-previous",(e=>{C(e)}),o,i)}}else if(a.scrollLeft<b&&!y){y=!0;o=L.value[0].id,i=L.value[L.value.length-1].id;l.emit("on-update-data-previous",(e=>{setTimeout((()=>{C(e)}),10)}),o,i)}}function I(t){"number"==typeof t&&("vertical"===e.orientation?a.scrollTo({top:t,left:0,behavior:"smooth"}):a.scrollTo({top:0,left:t,behavior:"smooth"}))}function O(t){for(var l=-1,n=0;n<L.value.length;n++)if(L.value[n]&&L.value[n].id===t){L.value[n];var r="cell_"+L.value[n].id,o=document.getElementById(r),a=o.getBoundingClientRect(),i=document.querySelector(".scroller-content");if("vertical"===e.orientation){var s=parseInt(i.style.paddingTop);l=o.offsetTop-s+e.gap}else{s=parseInt(i.style.paddingRight);l=parseInt(a.left-e.gap-s)}break}return l}function q(){a=document.querySelector(".scroller"),g=z();var t=0,i=0,u=0;if("vertical"===e.orientation)t=(e.numcols-1)*e.gap+g,a.offsetWidth,i=(a.offsetWidth-t-2*e.contentpadding)/e.numcols,n.value=String(i+"%"),o.value=String(i+"px"),e.cellsquared&&(u=(a.clientWidth-t-2*e.contentpadding)/e.numcols,r.value=u+"px");else{t=(e.numrows-1)*e.gap+g,a.offsetHeight,u=(a.offsetHeight-t-2*e.contentpadding)/e.numrows;var x=(a.offsetHeight-t-2*e.contentpadding)/e.numrows;r.value=String(u+"px"),o.value=String(x+"px"),e.cellsquared&&(i=u,n.value=i+"px")}a.addEventListener("mousedown",(t=>{p=!0,a.classList.add("active"),"vertical"===e.orientation?(s=t.pageY-a.offsetTop,c=t.pageY,d=a.scrollTop,h=t.clientY):(s=t.pageX-a.offsetLeft,c=t.pageX,d=a.scrollLeft,h=t.clientX),N()})),a.addEventListener("mouseleave",(()=>{p=!1,a.classList.remove("active")})),a.addEventListener("mouseup",(t=>{p=!1,v=!1,a.classList.remove("active"),B();var n=0;n="vertical"===e.orientation?c-t.pageY:c-t.pageX,Math.abs(n)>10&&l.emit("on-scroll")})),a.addEventListener("mousemove",(t=>{if(p){t.preventDefault(),v=!0;var l=0,n=0;"vertical"===e.orientation?(l=2*(t.pageY-a.offsetTop-s),n=a.scrollTop,a.scrollTop=d-l,f=a.scrollTop-n,a.scrollTop=d-l):(l=2*(t.pageX-a.offsetLeft-s),n=a.scrollLeft,a.scrollLeft=d-l,f=a.scrollLeft-n,a.scrollLeft=d-l)}})),a.addEventListener("wheel",(t=>{if(N(),"vertical"===e.orientation){const l=Math.sign(t.deltaY)*e.wheelscrollspeed,n=a.scrollTop;a.scrollTop+=l,f=a.scrollTop-n}else{const l=Math.sign(t.deltaY)*e.wheelscrollspeed,n=a.scrollLeft;a.scrollLeft+=l,f=a.scrollLeft-n,a.scrollLeft,a.scrollWidth,a.clientWidth}l.emit("on-scroll"),B()})),a.addEventListener("scroll",(t=>{var l=0;if("vertical"===e.orientation){let e=a.scrollTop;0!=(l=e-m)&&(T=parseInt(l/Math.abs(l))),m=e}else{let e=a.scrollLeft;0!=(l=e-m)&&(T=parseInt(l/Math.abs(l))),m=e}})),setInterval((()=>{e.orientation,M(T)}),200),setInterval((()=>{if("vertical"===e.orientation){let e=a.scrollTop;m=e}else{let e=a.scrollLeft;m=e}}),50)}function H(e){q()}return t.onBeforeMount((()=>{setTimeout((()=>{for(var e=0;e<L.value.length;e++)L.value[e].index=S-e}),10)})),t.onMounted((()=>{window.addEventListener("resize",H),q(),l.emit("on-data-updated",JSON.parse(JSON.stringify(L.value)))})),t.onUpdated((()=>{!function(){let t=document.querySelector(".scroller-cell");if(t){let i=t.offsetHeight+e.gap,s=t.offsetWidth+e.gap;a=document.querySelector(".scroller");var l=0;if("vertical"===e.orientation){var n=a.offsetHeight/i;l=parseInt(Math.round(n)*e.numcols)}else{var r=a.offsetWidth/s;l=parseInt(Math.round(r)*e.numrows)}var o=l+3*e.newcellslength;o>L.value.length&&(console.log("Error: Minimum Cells Required to load at start should be: ",o),w.value=!0,k.value="Error: Minimum Cells Required to load at start should be: "+o+". This value is relevant to the scroller width and to the number of new cells added each time.")}}()})),{cellW:n,cellH:r,cellFlexBasis:o,scroller:a,cellRef:i,isMouseDown:p,ScrollTo:I,ScrollBy:function(t){"number"==typeof t&&("vertical"===e.orientation?a.scrollBy({top:t,left:0,behavior:"smooth"}):a.scrollBy({top:0,left:t,behavior:"smooth"}))},ScrollToCell:function(e){I(O(e))},GetCellsPosition:O,GetOverflowX:function(){let t="hidden";return"horizontal"===e.orientation&&e.hasscrollbar&&(t="auto"),t},GetOverflowY:function(){let t="hidden";return"vertical"===e.orientation&&e.hasscrollbar&&(t="auto"),t},startPos:s,startscrollPos:c,movescrollPos:d,scrollerMoving:v,previousPos:h,scrollbarWidth:g,justLoaded:x,scrollLoadingOffset:b,cellsdata:L,alertvisible:w,alerttext:k,dirsign:T}}});const n=["id"],r={class:"cell-text"},o={class:"overlay"},a={key:0,class:"alert-overlay"};!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===l&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".scroller-container[data-v-602dc670] {\r\n    position: relative;\n}\n.alert-overlay[data-v-602dc670] {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0px;\r\n    left: 0px;\r\n    background: #555555bb;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-justify-content: center;\r\n        -ms-flex-pack: center;\r\n            justify-content: center;\r\n    -webkit-align-items: center;\r\n        -ms-flex-align: center;\r\n            align-items: center;\n}\n.alert-overlay h3[data-v-602dc670] {\r\n    color: #fff;\r\n    font-weight: 400;\n}\n.debugcellstyle[data-v-602dc670] {\r\n    background-color: brown !important;\n}\n.scroller-container[data-v-602dc670] {\r\n    position: relative;\n}\n.overlay[data-v-602dc670] {\r\n    position: absolute;\r\n    z-index: 100000000000000;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0px;\r\n    left: 0px;\r\n    pointer-events:none;\n}\n.scroller[data-v-602dc670] {\r\n    background: #eaeaea;\r\n    position: relative;\n}\n.vertical-scroller[data-v-602dc670] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\n.horizontal-scroller[data-v-602dc670] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\n.scroller-content[data-v-602dc670] {\r\n    -ms-flex-line-pack: start;\r\n            -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    -webkit-flex-direction: row;\r\n        -ms-flex-direction: row;\r\n            flex-direction: row;\r\n    -webkit-flex-wrap: wrap;\r\n        -ms-flex-wrap: wrap;\r\n            flex-wrap: wrap;\n}\n.vertical-container[data-v-602dc670] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\n.horizontal-container[data-v-602dc670] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    -webkit-flex-flow: column wrap !important;\r\n        -ms-flex-flow: column wrap !important;\r\n            flex-flow: column wrap !important;\r\n    height: inherit !important;\r\n    -ms-flex-line-pack: start;\r\n            -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    width: 100%;\n}\n.scroller-cell[data-v-602dc670] {\r\n\r\n    background: #b6b6b6;\r\n\r\n    -webkit-flex: inherit;\r\n\r\n        -ms-flex: inherit;\r\n\r\n            flex: inherit;\r\n    -webkit-flex-grow: 0;\r\n        -ms-flex-positive: 0;\r\n            flex-grow: 0;\r\n    -ms-flex-negative: 0;\r\n            -webkit-flex-shrink: 0;\r\n            flex-shrink: 0;\r\n    -ms-flex-preferred-size: 25%;\r\n            -webkit-flex-basis: 25%;\r\n            flex-basis: 25%;\r\n\r\n    /* for theme */\r\n    background: #ffffff;\r\n    /* box-shadow: 2px 2px 2px 2px rgb(221 221 221 / 60%); */\r\n    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\r\n    border-radius: 5px;\r\n\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    -ms-user-select: none;\r\n    user-select: none;\n}\n.vertical-cell[data-v-602dc670] {\r\n    display: inline-block;\r\n    height: 50px;\n}\n.horizontal-cell[data-v-602dc670] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    height: unset !important;\r\n    width: 90px;\n}\n.dummycell[data-v-602dc670] {\r\n    height: 20px;\n}\n.cell-text[data-v-602dc670] {\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 18pt;\r\n\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    -ms-user-select: none;\r\n    user-select: none;\n}\r\n"),l.render=function(e,l,i,s,c,d){return t.openBlock(),t.createElementBlock("div",{class:"scroller-container",style:t.normalizeStyle([{height:e.height+"px"}])},[t.createElementVNode("div",{class:t.normalizeClass(["scroller","vertical"===e.orientation?"vertical-scroller":"horizontal-scroller"]),style:t.normalizeStyle([{height:e.height+"px"},{"overflow-x":e.GetOverflowX()+" !important","overflow-y":e.GetOverflowY()+" !important"}])},[t.createElementVNode("div",{class:t.normalizeClass(["scroller-content","vertical"===e.orientation?"vertical-container":"horizontal-container"]),style:t.normalizeStyle([{gap:e.gap+"px"},{padding:e.contentpadding+"px"}])},[t.renderSlot(e.$slots,"content",{},(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.cellsdata,(l=>(t.openBlock(),t.createElementBlock("div",{id:"cell_"+l.id,ref_for:!0,ref:"cellRef",key:l.id,class:t.normalizeClass(["scroller-cell","vertical"===e.orientation?"vertical-cell":"horizontal-cell",l.debug?"debugcellstyle":""]),style:t.normalizeStyle({"flex-basis":e.cellFlexBasis,height:e.cellH,width:e.cellW,"z-index":l.index})},[t.renderSlot(e.$slots,"cell",{data:l},(()=>[t.createElementVNode("span",r,t.toDisplayString(l.id),1)]))],14,n)))),128))]))],6)],6),t.createElementVNode("div",o,[t.renderSlot(e.$slots,"overlay")]),e.alertvisible?(t.openBlock(),t.createElementBlock("div",a,[t.createElementVNode("h3",null,t.toDisplayString(e.alerttext),1)])):t.createCommentVNode("",!0)],4)},l.__scopeId="data-v-602dc670";var i=Object.freeze({__proto__:null,Scroller:l});const s={install(e){Object.entries(i).forEach((([t,l])=>{e.component(t,l)}))}};return e.Scroller=l,e.default=s,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue);

dist/chronocraftscrollervue.esm.js

@@ -5,3 +5,3 @@
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.0.30
+ // v0.0.31
  // MIT License
@@ -649,8 +649,8 @@
 
-const _hoisted_1 = {
-  class: "overlay"
+const _hoisted_1 = ["id"];
+const _hoisted_2 = {
+  class: "cell-text"
 };
-const _hoisted_2 = ["id"];
 const _hoisted_3 = {
-  class: "cell-text"
+  class: "overlay"
 };
@@ -675,3 +675,3 @@ const _hoisted_4 = {
     }])
-  }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "overlay")]), createElementVNode("div", {
+  }, [createElementVNode("div", {
     class: normalizeClass(['scroller-content', _ctx.orientation === 'vertical' ? 'vertical-container' : 'horizontal-container']),
@@ -698,4 +698,4 @@ style: normalizeStyle([{
       data: datacell
-    }, () => [createElementVNode("span", _hoisted_3, toDisplayString(datacell.id), 1)])], 14, _hoisted_2);
-  }), 128))])], 6)], 6), _ctx.alertvisible ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("h3", null, toDisplayString(_ctx.alerttext), 1)])) : createCommentVNode("", true)], 4);
+    }, () => [createElementVNode("span", _hoisted_2, toDisplayString(datacell.id), 1)])], 14, _hoisted_1);
+  }), 128))])], 6)], 6), createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "overlay")]), _ctx.alertvisible ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("h3", null, toDisplayString(_ctx.alerttext), 1)])) : createCommentVNode("", true)], 4);
 }
@@ -730,7 +730,7 @@
 
-var css_248z = ".scroller-container[data-v-2883d3df] {\r\n    position: relative;\n}\n.alert-overlay[data-v-2883d3df] {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0px;\r\n    left: 0px;\r\n    background: #555555bb;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-justify-content: center;\r\n        -ms-flex-pack: center;\r\n            justify-content: center;\r\n    -webkit-align-items: center;\r\n        -ms-flex-align: center;\r\n            align-items: center;\n}\n.alert-overlay h3[data-v-2883d3df] {\r\n    color: #fff;\r\n    font-weight: 400;\n}\n.debugcellstyle[data-v-2883d3df] {\r\n    background-color: brown !important;\n}\n.overlay[data-v-2883d3df] {\r\n    position: fixed;\r\n    z-index: 100000000000000;\n}\n.scroller[data-v-2883d3df] {\r\n    background: #eaeaea;\r\n    position: relative;\n}\n.vertical-scroller[data-v-2883d3df] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\n.horizontal-scroller[data-v-2883d3df] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\n.scroller-content[data-v-2883d3df] {\r\n    -ms-flex-line-pack: start;\r\n            -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    -webkit-flex-direction: row;\r\n        -ms-flex-direction: row;\r\n            flex-direction: row;\r\n    -webkit-flex-wrap: wrap;\r\n        -ms-flex-wrap: wrap;\r\n            flex-wrap: wrap;\n}\n.vertical-container[data-v-2883d3df] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\n.horizontal-container[data-v-2883d3df] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    -webkit-flex-flow: column wrap !important;\r\n        -ms-flex-flow: column wrap !important;\r\n            flex-flow: column wrap !important;\r\n    height: inherit !important;\r\n    -ms-flex-line-pack: start;\r\n            -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    width: 100%;\n}\n.scroller-cell[data-v-2883d3df] {\r\n\r\n    background: #b6b6b6;\r\n\r\n    -webkit-flex: inherit;\r\n\r\n        -ms-flex: inherit;\r\n\r\n            flex: inherit;\r\n    -webkit-flex-grow: 0;\r\n        -ms-flex-positive: 0;\r\n            flex-grow: 0;\r\n    -ms-flex-negative: 0;\r\n            -webkit-flex-shrink: 0;\r\n            flex-shrink: 0;\r\n    -ms-flex-preferred-size: 25%;\r\n            -webkit-flex-basis: 25%;\r\n            flex-basis: 25%;\r\n\r\n    /* for theme */\r\n    background: #ffffff;\r\n    /* box-shadow: 2px 2px 2px 2px rgb(221 221 221 / 60%); */\r\n    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\r\n    border-radius: 5px;\r\n\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    -ms-user-select: none;\r\n    user-select: none;\n}\n.vertical-cell[data-v-2883d3df] {\r\n    display: inline-block;\r\n    height: 50px;\n}\n.horizontal-cell[data-v-2883d3df] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    height: unset !important;\r\n    width: 90px;\n}\n.dummycell[data-v-2883d3df] {\r\n    height: 20px;\n}\n.cell-text[data-v-2883d3df] {\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 18pt;\r\n\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    -ms-user-select: none;\r\n    user-select: none;\n}\r\n";
+var css_248z = ".scroller-container[data-v-602dc670] {\r\n    position: relative;\n}\n.alert-overlay[data-v-602dc670] {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0px;\r\n    left: 0px;\r\n    background: #555555bb;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-justify-content: center;\r\n        -ms-flex-pack: center;\r\n            justify-content: center;\r\n    -webkit-align-items: center;\r\n        -ms-flex-align: center;\r\n            align-items: center;\n}\n.alert-overlay h3[data-v-602dc670] {\r\n    color: #fff;\r\n    font-weight: 400;\n}\n.debugcellstyle[data-v-602dc670] {\r\n    background-color: brown !important;\n}\n.scroller-container[data-v-602dc670] {\r\n    position: relative;\n}\n.overlay[data-v-602dc670] {\r\n    position: absolute;\r\n    z-index: 100000000000000;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0px;\r\n    left: 0px;\r\n    pointer-events:none;\n}\n.scroller[data-v-602dc670] {\r\n    background: #eaeaea;\r\n    position: relative;\n}\n.vertical-scroller[data-v-602dc670] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\n.horizontal-scroller[data-v-602dc670] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\n.scroller-content[data-v-602dc670] {\r\n    -ms-flex-line-pack: start;\r\n            -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    -webkit-flex-direction: row;\r\n        -ms-flex-direction: row;\r\n            flex-direction: row;\r\n    -webkit-flex-wrap: wrap;\r\n        -ms-flex-wrap: wrap;\r\n            flex-wrap: wrap;\n}\n.vertical-container[data-v-602dc670] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\n.horizontal-container[data-v-602dc670] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    -webkit-flex-flow: column wrap !important;\r\n        -ms-flex-flow: column wrap !important;\r\n            flex-flow: column wrap !important;\r\n    height: inherit !important;\r\n    -ms-flex-line-pack: start;\r\n            -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    width: 100%;\n}\n.scroller-cell[data-v-602dc670] {\r\n\r\n    background: #b6b6b6;\r\n\r\n    -webkit-flex: inherit;\r\n\r\n        -ms-flex: inherit;\r\n\r\n            flex: inherit;\r\n    -webkit-flex-grow: 0;\r\n        -ms-flex-positive: 0;\r\n            flex-grow: 0;\r\n    -ms-flex-negative: 0;\r\n            -webkit-flex-shrink: 0;\r\n            flex-shrink: 0;\r\n    -ms-flex-preferred-size: 25%;\r\n            -webkit-flex-basis: 25%;\r\n            flex-basis: 25%;\r\n\r\n    /* for theme */\r\n    background: #ffffff;\r\n    /* box-shadow: 2px 2px 2px 2px rgb(221 221 221 / 60%); */\r\n    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\r\n    border-radius: 5px;\r\n\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    -ms-user-select: none;\r\n    user-select: none;\n}\n.vertical-cell[data-v-602dc670] {\r\n    display: inline-block;\r\n    height: 50px;\n}\n.horizontal-cell[data-v-602dc670] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    height: unset !important;\r\n    width: 90px;\n}\n.dummycell[data-v-602dc670] {\r\n    height: 20px;\n}\n.cell-text[data-v-602dc670] {\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 18pt;\r\n\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    -ms-user-select: none;\r\n    user-select: none;\n}\r\n";
 styleInject(css_248z);
 
 script.render = render;
-script.__scopeId = "data-v-2883d3df";
+script.__scopeId = "data-v-602dc670";
 
@@ -737,0 +737,0 @@ var components = /*#__PURE__*/Object.freeze({

dist/cjs/index.js

@@ -5,6 +5,6 @@
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.0.30
+ // v0.0.31
  // MIT License
 
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Scroller=require('./Scroller-409d5821.js');require('vue');var components=/*#__PURE__*/Object.freeze({__proto__:null,Scroller:Scroller.s});const Plugin = {
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Scroller=require('./Scroller-0a68ec69.js');require('vue');var components=/*#__PURE__*/Object.freeze({__proto__:null,Scroller:Scroller.s});const Plugin = {
     install(app) {
@@ -11,0 +11,0 @@ Object.entries(components).forEach(([componentName, component]) => {

dist/cjs/Scroller.js

@@ -5,5 +5,5 @@
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.0.30
+ // v0.0.31
  // MIT License
 
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Scroller=require('./Scroller-409d5821.js');require('vue');exports["default"]=Scroller.s;
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Scroller=require('./Scroller-0a68ec69.js');require('vue');exports["default"]=Scroller.s;

dist/components/Scroller/index.ts

@@ -5,3 +5,3 @@
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.0.30
+ // v0.0.31
  // MIT License
@@ -653,8 +653,8 @@
 
-    const _hoisted_1 = {
-      class: "overlay"
+    const _hoisted_1 = ["id"];
+    const _hoisted_2 = {
+      class: "cell-text"
     };
-    const _hoisted_2 = ["id"];
     const _hoisted_3 = {
-      class: "cell-text"
+      class: "overlay"
     };
@@ -679,3 +679,3 @@ const _hoisted_4 = {
         }])
-      }, [vue.createElementVNode("div", _hoisted_1, [vue.renderSlot(_ctx.$slots, "overlay")]), vue.createElementVNode("div", {
+      }, [vue.createElementVNode("div", {
         class: vue.normalizeClass(['scroller-content', _ctx.orientation === 'vertical' ? 'vertical-container' : 'horizontal-container']),
@@ -702,4 +702,4 @@ style: vue.normalizeStyle([{
           data: datacell
-        }, () => [vue.createElementVNode("span", _hoisted_3, vue.toDisplayString(datacell.id), 1)])], 14, _hoisted_2);
-      }), 128))])], 6)], 6), _ctx.alertvisible ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [vue.createElementVNode("h3", null, vue.toDisplayString(_ctx.alerttext), 1)])) : vue.createCommentVNode("", true)], 4);
+        }, () => [vue.createElementVNode("span", _hoisted_2, vue.toDisplayString(datacell.id), 1)])], 14, _hoisted_1);
+      }), 128))])], 6)], 6), vue.createElementVNode("div", _hoisted_3, [vue.renderSlot(_ctx.$slots, "overlay")]), _ctx.alertvisible ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [vue.createElementVNode("h3", null, vue.toDisplayString(_ctx.alerttext), 1)])) : vue.createCommentVNode("", true)], 4);
     }
@@ -734,7 +734,7 @@
 
-    var css_248z = ".scroller-container {\r\n    position: relative;\r\n}\r\n\r\n.alert-overlay {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0px;\r\n    left: 0px;\r\n    background: #555555bb;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-justify-content: center;\r\n        -ms-flex-pack: center;\r\n            justify-content: center;\r\n    -webkit-align-items: center;\r\n        -ms-flex-align: center;\r\n            align-items: center;\r\n\r\n}\r\n\r\n.alert-overlay h3 {\r\n    color: #fff;\r\n    font-weight: 400;\r\n}\r\n\r\n.debugcellstyle {\r\n    background-color: brown !important;\r\n}\r\n\r\n.overlay {\r\n    position: fixed;\r\n    z-index: 100000000000000;\r\n}\r\n\r\n.scroller[data-v-2883d3df] {\r\n    background: #eaeaea;\r\n    position: relative;\n}\r\n\r\n.vertical-scroller[data-v-2883d3df] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\r\n\r\n.horizontal-scroller[data-v-2883d3df] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\r\n\r\n.scroller-content[data-v-2883d3df] {\r\n    -ms-flex-line-pack: start;\r\n        -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    -webkit-flex-direction: row;\r\n        -ms-flex-direction: row;\r\n            flex-direction: row;\r\n    -webkit-flex-wrap: wrap;\r\n        -ms-flex-wrap: wrap;\r\n            flex-wrap: wrap;\n}\r\n\r\n.vertical-container[data-v-2883d3df] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\r\n\r\n.horizontal-container[data-v-2883d3df] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    -webkit-flex-flow: column wrap !important;\r\n        -ms-flex-flow: column wrap !important;\r\n            flex-flow: column wrap !important;\r\n    height: inherit !important;\r\n    -ms-flex-line-pack: start;\r\n        -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    width: 100%;\n}\r\n\r\n.scroller-cell[data-v-2883d3df] {\r\n\r\n    background: #b6b6b6;\r\n\r\n    -webkit-flex: inherit;\r\n\r\n        -ms-flex: inherit;\r\n\r\n            flex: inherit;\r\n    -webkit-flex-grow: 0;\r\n        -ms-flex-positive: 0;\r\n            flex-grow: 0;\r\n    -ms-flex-negative: 0;\r\n        -webkit-flex-shrink: 0;\r\n            flex-shrink: 0;\r\n    -ms-flex-preferred-size: 25%;\r\n        -webkit-flex-basis: 25%;\r\n            flex-basis: 25%;\r\n\r\n    /* for theme */\r\n    background: #ffffff;\r\n    /* box-shadow: 2px 2px 2px 2px rgb(221 221 221 / 60%); */\r\n    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\r\n    border-radius: 5px;\r\n\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    -ms-user-select: none;\r\n    user-select: none;\n}\r\n\r\n.vertical-cell[data-v-2883d3df] {\r\n    display: inline-block;\r\n    height: 50px;\n}\r\n\r\n.horizontal-cell[data-v-2883d3df] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    height: unset !important;\r\n    width: 90px;\n}\r\n\r\n.dummycell[data-v-2883d3df] {\r\n    height: 20px;\n}\r\n\r\n.cell-text[data-v-2883d3df] {\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 18pt;\r\n\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    -ms-user-select: none;\r\n    user-select: none;\n}\r\n";
+    var css_248z = ".scroller-container {\r\n    position: relative;\r\n}\r\n\r\n.alert-overlay {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0px;\r\n    left: 0px;\r\n    background: #555555bb;\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\r\n    -webkit-justify-content: center;\r\n        -ms-flex-pack: center;\r\n            justify-content: center;\r\n    -webkit-align-items: center;\r\n        -ms-flex-align: center;\r\n            align-items: center;\r\n\r\n}\r\n\r\n.alert-overlay h3 {\r\n    color: #fff;\r\n    font-weight: 400;\r\n}\r\n\r\n.debugcellstyle {\r\n    background-color: brown !important;\r\n}\r\n\r\n.scroller-container {\r\n    position: relative;\r\n}\r\n\r\n.overlay {\r\n    position: absolute;\r\n    z-index: 100000000000000;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0px;\r\n    left: 0px;\r\n    pointer-events:none;\r\n}\r\n\r\n.scroller[data-v-602dc670] {\r\n    background: #eaeaea;\r\n    position: relative;\n}\r\n\r\n.vertical-scroller[data-v-602dc670] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\r\n\r\n.horizontal-scroller[data-v-602dc670] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\r\n\r\n.scroller-content[data-v-602dc670] {\r\n    -ms-flex-line-pack: start;\r\n        -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    -webkit-flex-direction: row;\r\n        -ms-flex-direction: row;\r\n            flex-direction: row;\r\n    -webkit-flex-wrap: wrap;\r\n        -ms-flex-wrap: wrap;\r\n            flex-wrap: wrap;\n}\r\n\r\n.vertical-container[data-v-602dc670] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\r\n\r\n.horizontal-container[data-v-602dc670] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    -webkit-flex-flow: column wrap !important;\r\n        -ms-flex-flow: column wrap !important;\r\n            flex-flow: column wrap !important;\r\n    height: inherit !important;\r\n    -ms-flex-line-pack: start;\r\n        -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    width: 100%;\n}\r\n\r\n.scroller-cell[data-v-602dc670] {\r\n\r\n    background: #b6b6b6;\r\n\r\n    -webkit-flex: inherit;\r\n\r\n        -ms-flex: inherit;\r\n\r\n            flex: inherit;\r\n    -webkit-flex-grow: 0;\r\n        -ms-flex-positive: 0;\r\n            flex-grow: 0;\r\n    -ms-flex-negative: 0;\r\n        -webkit-flex-shrink: 0;\r\n            flex-shrink: 0;\r\n    -ms-flex-preferred-size: 25%;\r\n        -webkit-flex-basis: 25%;\r\n            flex-basis: 25%;\r\n\r\n    /* for theme */\r\n    background: #ffffff;\r\n    /* box-shadow: 2px 2px 2px 2px rgb(221 221 221 / 60%); */\r\n    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\r\n    border-radius: 5px;\r\n\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    -ms-user-select: none;\r\n    user-select: none;\n}\r\n\r\n.vertical-cell[data-v-602dc670] {\r\n    display: inline-block;\r\n    height: 50px;\n}\r\n\r\n.horizontal-cell[data-v-602dc670] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    height: unset !important;\r\n    width: 90px;\n}\r\n\r\n.dummycell[data-v-602dc670] {\r\n    height: 20px;\n}\r\n\r\n.cell-text[data-v-602dc670] {\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 18pt;\r\n\r\n    -webkit-touch-callout: none;\r\n    -webkit-user-select: none;\r\n    -ms-user-select: none;\r\n    user-select: none;\n}\r\n";
     styleInject(css_248z);
 
     script.render = render;
-    script.__scopeId = "data-v-2883d3df";
+    script.__scopeId = "data-v-602dc670";
 
@@ -741,0 +741,0 @@ exports["default"] = script;

dist/esm/index.js

@@ -5,7 +5,7 @@
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.0.30
+ // v0.0.31
  // MIT License
 
-import { s as script } from './Scroller-82c01360.js';
-export { s as Scroller } from './Scroller-82c01360.js';
+import { s as script } from './Scroller-b2e5876d.js';
+export { s as Scroller } from './Scroller-b2e5876d.js';
 import 'vue';
@@ -12,0 +12,0 @@

dist/esm/Scroller.js

@@ -5,7 +5,7 @@
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.0.30
+ // v0.0.31
  // MIT License
 
-import { s as script } from './Scroller-82c01360.js';
-export { s as default } from './Scroller-82c01360.js';
+import { s as script } from './Scroller-b2e5876d.js';
+export { s as default } from './Scroller-b2e5876d.js';
 import 'vue';

package.json

 {
   "name": "chronocraft-scroller-vue",
   "buildname": "chronocraftscrollervue",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "description": "A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component",
@@ -6,0 +6,0 @@ "main": "dist/cjs/index.js",

README.md

@@ -83,2 +83,3 @@ # A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component
 |  Name  | hasprops  | Description  |
+|---|---|---|
 |  cell  | yes  | Overrides the cell rendering and passes the cells data as props
@@ -85,0 +86,0 @@ |  overlay  | no  | In this slot custom elements can be added as an overlay above the scroller content

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

650911

increased by9.04%

Number of package files

42

increased by5%

Lines of code

14122

increased by10.23%

Number of lines in readme file

97

increased by1.04%

Worsened metrics

Number of low supply chain risk alerts

23

increased by9.52%

No dependency changes