chronocraft-scroller-vue - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

dist/chronoscrollervue-browser.min.js

@@ -1,1 +0,1 @@
-var chronoscrollervue=function(e,t){"use strict";var l=t.defineComponent({name:"Scroller",components:{},props:{data:{type:Array,default:()=>[]},orientation:{type:String,default:"vertical"},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:12}},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,p=0,u=!1,v=!1,h=0,m=0,x=0,g=!1,b=200,w=!1,y=t.ref(e.data);function L(){"vertical"===e.orientation?a.scrollTop+=f:a.scrollLeft+=f,f*=.97,Math.abs(f)>.5&&(p=requestAnimationFrame(L))}function k(){cancelAnimationFrame(p)}function T(){k(),p=requestAnimationFrame(L)}function S(){var e,t=S.width;return void 0===t&&((e=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>',e=e.firstChild,document.body.appendChild(e),t=S.width=e.offsetWidth-e.clientWidth,document.body.removeChild(e)),t}function E(t){y.value=[...y.value,...t],y.value.splice(0,t.length);let l=document.querySelector(".scroller-cell");l.offsetHeight,e.gap;let n=l.offsetWidth+e.gap;var r=0;if("vertical"===e.orientation)parseInt(t.length/e.numcols),r=m,a.scrollTop=r,d=r-(m-d);else{var o=parseInt(t.length/e.numrows);r=m-n*o,a.scrollLeft=r,d=r-(m-d)}setTimeout((()=>{w=!1}),100)}function z(t){y.value=[...t,...y.value],y.value.splice(y.value.length-t.length,y.value.length-1);let l=document.querySelector(".scroller-cell");l.offsetHeight,e.gap;let n=l.offsetWidth+e.gap;var r=0;if("vertical"===e.orientation)parseInt(t.length/e.numcols),r=m,a.scrollTop=r,d=r-(m-d);else{var o=parseInt(t.length/e.numrows);r=m+n*o,a.scrollLeft=r,d=r-(m-d)}setTimeout((()=>{w=!1}),100)}async function W(t,n,r){1===t&&("vertical"===e.orientation?a.scrollTop+a.offsetHeight>=a.scrollHeight-b&&(w||(w=!0,l.emit("on-update-data-next",(e=>{E(e)})))):(a.scrollLeft+a.offsetWidth>=a.scrollWidth-b||a.scrollLeft===a.scrollWidth-a.clientWidth)&&(w||(w=!0,l.emit("on-update-data-next",(e=>{setTimeout((()=>{E(e)}),10)}))))),-1===t&&("vertical"===e.orientation?a.scrollTop<b&&(w||(w=!0,l.emit("on-update-data-previous",(e=>{z(e)})))):a.scrollLeft<b&&(w||(w=!0,l.emit("on-update-data-previous",(e=>{setTimeout((()=>{z(e)}),10)})))))}function M(){console.log("Initialize"),a=document.querySelector(".scroller"),x=S();var t=0,i=0,p=0;if("vertical"===e.orientation)t=(e.numcols-1)*e.gap+x,a.offsetWidth,i=(a.offsetWidth-t-2*e.contentpadding)/e.numcols,n.value=String(i+"%"),o.value=String(i+"px"),e.cellsquared&&(p=(a.clientWidth-t-2*e.contentpadding)/e.numcols,r.value=p+"px");else{t=(e.numrows-1)*e.gap+x,a.offsetHeight,p=(a.offsetHeight-t-2*e.contentpadding)/e.numrows;var g=(a.offsetHeight-t-2*e.contentpadding)/e.numrows;r.value=String(p+"px"),o.value=String(g+"px"),e.cellsquared&&(i=p,n.value=i+"px")}a.addEventListener("mousedown",(t=>{u=!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),k()})),a.addEventListener("mouseleave",(()=>{u=!1,a.classList.remove("active")})),a.addEventListener("mouseup",(t=>{u=!1,v=!1,a.classList.remove("active"),T();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(u){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(k(),"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;if(a.scrollLeft+=l,f=a.scrollLeft-n,a.scrollLeft===a.scrollWidth-a.clientWidth){console.log("detectScrollEdges");W(parseInt(0/Math.abs(0)))}}l.emit("on-scroll"),T()})),a.addEventListener("scroll",(t=>{var l=0;if("vertical"===e.orientation){let e=a.scrollTop;l=e-m,W(parseInt(l/Math.abs(l))),m=e}else{let e=a.scrollLeft;l=e-m,W(parseInt(l/Math.abs(l))),m=e}}))}function B(e){M()}return t.onMounted((()=>{window.addEventListener("resize",B),M()})),{cellW:n,cellH:r,cellFlexBasis:o,scroller:a,cellRef:i,isMouseDown:u,startPos:s,startscrollPos:c,movescrollPos:d,scrollerMoving:v,previousPos:h,scrollbarWidth:x,justLoaded:g,scrollLoadingOffset:b,cellsdata:y}}});const n={class:"cell-text"};!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))}}("\n.scroller[data-v-52b13696] {\r\n    height: 500px;\r\n    background: #eaeaea;\n}\n.vertical-scroller[data-v-52b13696] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\n.horizontal-scroller[data-v-52b13696] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\n.scroller-container[data-v-52b13696] {\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-52b13696] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\n.horizontal-container[data-v-52b13696] {\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-52b13696] {\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;\n}\n.vertical-cell[data-v-52b13696] {\r\n    display: inline-block;\r\n    height: 50px;\n}\n.horizontal-cell[data-v-52b13696] {\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-52b13696] {\r\n    height: 20px;\n}\n.cell-text[data-v-52b13696] {\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 18pt;\n}\r\n"),l.render=function(e,l,r,o,a,i){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["scroller","vertical"===e.orientation?"vertical-scroller":"horizontal-scroller"])},[t.createElementVNode("div",{class:t.normalizeClass(["scroller-container","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",{ref_for:!0,ref:"cellRef",key:l.id,class:t.normalizeClass(["scroller-cell","vertical"===e.orientation?"vertical-cell":"horizontal-cell"]),style:t.normalizeStyle({"flex-basis":e.cellFlexBasis,height:e.cellH,width:e.cellW})},[t.renderSlot(e.$slots,"cell",{},(()=>[t.createElementVNode("span",n,t.toDisplayString(l.id),1)]))],6)))),128))]))],6)],2)},l.__scopeId="data-v-52b13696";var r=Object.freeze({__proto__:null,Scroller:l});const o={install(e){Object.entries(r).forEach((([t,l])=>{e.component(t,l)}))}};return e.Scroller=l,e.default=o,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue);
+var chronoscrollervue=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}},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,p=0,u=!1,h=!1,v=0,m=0,g=0,x=!1,b=200,w=!1,y=t.ref(!1),k=t.ref(""),L=t.ref(e.data);function T(){"vertical"===e.orientation?a.scrollTop+=f:a.scrollLeft+=f,f*=.97,Math.abs(f)>.5&&(p=requestAnimationFrame(T))}function S(){cancelAnimationFrame(p)}function E(){S(),p=requestAnimationFrame(T)}function z(){var e,t=z.width;return void 0===t&&((e=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>',e=e.firstChild,document.body.appendChild(e),t=z.width=e.offsetWidth-e.clientWidth,document.body.removeChild(e)),t}function W(t){L.value=[...L.value,...t],L.value.splice(0,t.length);let l=document.querySelector(".scroller-cell");l.offsetHeight,e.gap;let n=l.offsetWidth+e.gap;var r=0;if("vertical"===e.orientation)parseInt(t.length/e.numcols),r=m,a.scrollTop=r,d=r-(m-d);else{var o=parseInt(t.length/e.numrows);r=m-n*o,a.scrollLeft=r,d=r-(m-d)}setTimeout((()=>{w=!1}),100)}function M(t){L.value=[...t,...L.value],L.value.splice(L.value.length-t.length,L.value.length-1);let l=document.querySelector(".scroller-cell");l.offsetHeight,e.gap;let n=l.offsetWidth+e.gap;var r=0;if("vertical"===e.orientation)parseInt(t.length/e.numcols),r=m,a.scrollTop=r,d=r-(m-d);else{var o=parseInt(t.length/e.numrows);r=m+n*o,a.scrollLeft=r,d=r-(m-d)}setTimeout((()=>{w=!1}),100)}async function N(t,n,r){1===t&&("vertical"===e.orientation?a.scrollTop+a.offsetHeight>=a.scrollHeight-b&&(w||(w=!0,l.emit("on-update-data-next",(e=>{W(e)})))):(a.scrollLeft+a.offsetWidth>=a.scrollWidth-b||a.scrollLeft===a.scrollWidth-a.clientWidth)&&(w||(w=!0,l.emit("on-update-data-next",(e=>{setTimeout((()=>{W(e)}),10)}))))),-1===t&&("vertical"===e.orientation?a.scrollTop<b&&(w||(w=!0,l.emit("on-update-data-previous",(e=>{M(e)})))):a.scrollLeft<b&&(w||(w=!0,l.emit("on-update-data-previous",(e=>{setTimeout((()=>{M(e)}),10)})))))}function C(){console.log("Initialize"),a=document.querySelector(".scroller"),g=z();var t=0,i=0,p=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&&(p=(a.clientWidth-t-2*e.contentpadding)/e.numcols,r.value=p+"px");else{t=(e.numrows-1)*e.gap+g,a.offsetHeight,p=(a.offsetHeight-t-2*e.contentpadding)/e.numrows;var x=(a.offsetHeight-t-2*e.contentpadding)/e.numrows;r.value=String(p+"px"),o.value=String(x+"px"),e.cellsquared&&(i=p,n.value=i+"px")}a.addEventListener("mousedown",(t=>{u=!0,a.classList.add("active"),"vertical"===e.orientation?(s=t.pageY-a.offsetTop,c=t.pageY,d=a.scrollTop,v=t.clientY):(s=t.pageX-a.offsetLeft,c=t.pageX,d=a.scrollLeft,v=t.clientX),S()})),a.addEventListener("mouseleave",(()=>{u=!1,a.classList.remove("active")})),a.addEventListener("mouseup",(t=>{u=!1,h=!1,a.classList.remove("active"),E();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(u){t.preventDefault(),h=!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(S(),"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;if(a.scrollLeft+=l,f=a.scrollLeft-n,a.scrollLeft===a.scrollWidth-a.clientWidth){console.log("detectScrollEdges");N(parseInt(0/Math.abs(0)))}}l.emit("on-scroll"),E()})),a.addEventListener("scroll",(t=>{var l=0;if("vertical"===e.orientation){let e=a.scrollTop;l=e-m,N(parseInt(l/Math.abs(l))),m=e}else{let e=a.scrollLeft;l=e-m,N(parseInt(l/Math.abs(l))),m=e}}))}function B(e){C()}return t.onMounted((()=>{window.addEventListener("resize",B),C()})),t.onUpdated((()=>{!function(){let t=document.querySelector(".scroller-cell"),l=t.offsetHeight+e.gap,n=t.offsetWidth+e.gap;a=document.querySelector(".scroller");var r=0;if("vertical"===e.orientation){var o=a.offsetHeight/l;r=parseInt(Math.round(o)*e.numcols)}else{var i=a.offsetWidth/n;r=parseInt(Math.round(i)*e.numrows)}var s=r+3*e.newcellslength;s>L.value.length&&(console.log("Error: Minimum Cells Required to load at start should be: ",s),y.value=!0,k.value="Error: Minimum Cells Required to load at start should be: "+s+". 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:u,startPos:s,startscrollPos:c,movescrollPos:d,scrollerMoving:h,previousPos:v,scrollbarWidth:g,justLoaded:x,scrollLoadingOffset:b,cellsdata:L,alertvisible:y,alerttext:k}}});const n={class:"cell-text"},r={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-53e175ba] {\r\n    position: relative;\n}\n.alert-overlay[data-v-53e175ba] {\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-53e175ba] {\r\n    color: #fff;\r\n    font-weight: 400;\n}\n.debugcellstyle[data-v-53e175ba] {\r\n    background-color: brown !important;\n}\n.scroller[data-v-53e175ba] {\r\n    background: #eaeaea;\r\n    position: relative;\n}\n.vertical-scroller[data-v-53e175ba] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\n.horizontal-scroller[data-v-53e175ba] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\n.scroller-content[data-v-53e175ba] {\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-53e175ba] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\n.horizontal-container[data-v-53e175ba] {\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-53e175ba] {\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;\n}\n.vertical-cell[data-v-53e175ba] {\r\n    display: inline-block;\r\n    height: 50px;\n}\n.horizontal-cell[data-v-53e175ba] {\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-53e175ba] {\r\n    height: 20px;\n}\n.cell-text[data-v-53e175ba] {\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 18pt;\n}\r\n"),l.render=function(e,l,o,a,i,s){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"}])},[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",{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})},[t.renderSlot(e.$slots,"cell",{},(()=>[t.createElementVNode("span",n,t.toDisplayString(l.id),1)]))],6)))),128))]))],6)],6),e.alertvisible?(t.openBlock(),t.createElementBlock("div",r,[t.createElementVNode("h3",null,t.toDisplayString(e.alerttext),1)])):t.createCommentVNode("",!0)],4)},l.__scopeId="data-v-53e175ba";var o=Object.freeze({__proto__:null,Scroller:l});const a={install(e){Object.entries(o).forEach((([t,l])=>{e.component(t,l)}))}};return e.Scroller=l,e.default=a,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue);

dist/chronoscrollervue.esm.js

@@ -5,6 +5,6 @@
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.0.9
- // undefined License
+ // v0.0.11
+ // MIT License
 
-import { defineComponent, ref, onMounted, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, renderSlot, Fragment, renderList, toDisplayString } from 'vue';
+import { defineComponent, ref, onMounted, onUpdated, openBlock, createElementBlock, normalizeStyle, createElementVNode, normalizeClass, renderSlot, Fragment, renderList, toDisplayString, createCommentVNode } from 'vue';
 
@@ -25,2 +25,6 @@ var script = defineComponent({
     },
+    height: {
+      type: Number,
+      default: 400
+    },
     numcols: {
@@ -56,3 +60,7 @@ type: Number,
       type: Number,
-      default: 12
+      default: 6
+    },
+    newcellslength: {
+      type: Number,
+      default: 10
     }
@@ -81,2 +89,4 @@ },
     let loadingCells = false;
+    let alertvisible = ref(false);
+    let alerttext = ref("");
     let cellsdata = ref(props.data);
@@ -241,2 +251,31 @@
 
+    function GetTotalVisibleCells() {
+      let cell = document.querySelector(".scroller-cell");
+      let cellheight = cell.offsetHeight + props.gap;
+      let cellwidth = cell.offsetWidth + props.gap;
+      scroller = document.querySelector(".scroller");
+      var totalVisibleCells = 0;
+
+      if (props.orientation === 'vertical') {
+        var totalH = scroller.offsetHeight;
+        var totalCellsAtY = totalH / cellheight;
+        totalVisibleCells = parseInt(Math.round(totalCellsAtY) * props.numcols);
+      } else {
+        // Calculate the total visible cells
+        var totalW = scroller.offsetWidth;
+        var totalCellsAtX = totalW / cellwidth;
+        totalVisibleCells = parseInt(Math.round(totalCellsAtX) * props.numrows);
+      }
+
+      var minimumRequiredInitialCells = totalVisibleCells + 3 * props.newcellslength; // The Minimum Initial Loading Cells should Be:
+      // The ( Total visible cells ) + ( New cells added each time) * 3
+      // Otherwise the scrolling will not be working correctly
+
+      if (minimumRequiredInitialCells > cellsdata.value.length) {
+        console.log("Error: Minimum Cells Required to load at start should be: ", minimumRequiredInitialCells);
+        alertvisible.value = true;
+        alerttext.value = "Error: Minimum Cells Required to load at start should be: " + minimumRequiredInitialCells + ". This value is relevant to the scroller width and to the number of new cells added each time.";
+      }
+    }
+
     function Initialize() {
@@ -371,3 +410,3 @@ console.log('Initialize');
         context.emit("on-scroll");
-        beginMomentumTracking(); //UpdateCurrentMonth();
+        beginMomentumTracking();
       });
@@ -402,2 +441,5 @@ scroller.addEventListener("scroll", e => {
     });
+    onUpdated(() => {
+      GetTotalVisibleCells();
+    });
     return {
@@ -418,3 +460,5 @@ cellW,
       scrollLoadingOffset,
-      cellsdata
+      cellsdata,
+      alertvisible,
+      alerttext
     };
@@ -428,8 +472,20 @@ }
 };
+const _hoisted_2 = {
+  key: 0,
+  class: "alert-overlay"
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass(['scroller', _ctx.orientation === 'vertical' ? 'vertical-scroller' : 'horizontal-scroller'])
+    class: "scroller-container",
+    style: normalizeStyle([{
+      'height': _ctx.height + 'px'
+    }])
   }, [createElementVNode("div", {
-    class: normalizeClass(['scroller-container', _ctx.orientation === 'vertical' ? 'vertical-container' : 'horizontal-container']),
+    class: normalizeClass(['scroller', _ctx.orientation === 'vertical' ? 'vertical-scroller' : 'horizontal-scroller']),
     style: normalizeStyle([{
+      'height': _ctx.height + 'px'
+    }])
+  }, [createElementVNode("div", {
+    class: normalizeClass(['scroller-content', _ctx.orientation === 'vertical' ? 'vertical-container' : 'horizontal-container']),
+    style: normalizeStyle([{
       'gap': _ctx.gap + 'px'
@@ -444,3 +500,3 @@ }, {
       key: datacell.id,
-      class: normalizeClass(['scroller-cell', _ctx.orientation === 'vertical' ? 'vertical-cell' : 'horizontal-cell']),
+      class: normalizeClass(['scroller-cell', _ctx.orientation === 'vertical' ? 'vertical-cell' : 'horizontal-cell', datacell.debug ? 'debugcellstyle' : '']),
       style: normalizeStyle({
@@ -452,3 +508,3 @@ 'flex-basis': _ctx.cellFlexBasis,
     }, [renderSlot(_ctx.$slots, "cell", {}, () => [createElementVNode("span", _hoisted_1, toDisplayString(datacell.id), 1)])], 6);
-  }), 128))])], 6)], 2);
+  }), 128))])], 6)], 6), _ctx.alertvisible ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("h3", null, toDisplayString(_ctx.alerttext), 1)])) : createCommentVNode("", true)], 4);
 }
@@ -483,7 +539,7 @@
 
-var css_248z = "\n.scroller[data-v-52b13696] {\r\n    height: 500px;\r\n    background: #eaeaea;\n}\n.vertical-scroller[data-v-52b13696] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\n.horizontal-scroller[data-v-52b13696] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\n.scroller-container[data-v-52b13696] {\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-52b13696] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\n.horizontal-container[data-v-52b13696] {\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-52b13696] {\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;\n}\n.vertical-cell[data-v-52b13696] {\r\n    display: inline-block;\r\n    height: 50px;\n}\n.horizontal-cell[data-v-52b13696] {\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-52b13696] {\r\n    height: 20px;\n}\n.cell-text[data-v-52b13696] {\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 18pt;\n}\r\n";
+var css_248z = ".scroller-container[data-v-53e175ba] {\r\n    position: relative;\n}\n.alert-overlay[data-v-53e175ba] {\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-53e175ba] {\r\n    color: #fff;\r\n    font-weight: 400;\n}\n.debugcellstyle[data-v-53e175ba] {\r\n    background-color: brown !important;\n}\n.scroller[data-v-53e175ba] {\r\n    background: #eaeaea;\r\n    position: relative;\n}\n.vertical-scroller[data-v-53e175ba] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\n.horizontal-scroller[data-v-53e175ba] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\n.scroller-content[data-v-53e175ba] {\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-53e175ba] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\n.horizontal-container[data-v-53e175ba] {\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-53e175ba] {\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;\n}\n.vertical-cell[data-v-53e175ba] {\r\n    display: inline-block;\r\n    height: 50px;\n}\n.horizontal-cell[data-v-53e175ba] {\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-53e175ba] {\r\n    height: 20px;\n}\n.cell-text[data-v-53e175ba] {\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 18pt;\n}\r\n";
 styleInject(css_248z);
 
 script.render = render;
-script.__scopeId = "data-v-52b13696";
+script.__scopeId = "data-v-53e175ba";
 
@@ -490,0 +546,0 @@ var components = /*#__PURE__*/Object.freeze({

dist/cjs/index.js

@@ -5,6 +5,6 @@
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.0.9
- // undefined License
+ // v0.0.11
+ // MIT License
 
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Scroller=require('./Scroller-2882fd1c.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-6a1c8ce4.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.9
- // undefined License
+ // v0.0.11
+ // MIT License
 
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Scroller=require('./Scroller-2882fd1c.js');require('vue');exports["default"]=Scroller.s;
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Scroller=require('./Scroller-6a1c8ce4.js');require('vue');exports["default"]=Scroller.s;

dist/components/Scroller/index.ts

@@ -5,4 +5,4 @@
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.0.9
- // undefined License
+ // v0.0.11
+ // MIT License
 
@@ -29,2 +29,6 @@ (function (global, factory) {
         },
+        height: {
+          type: Number,
+          default: 400
+        },
         numcols: {
@@ -60,3 +64,7 @@ type: Number,
           type: Number,
-          default: 12
+          default: 6
+        },
+        newcellslength: {
+          type: Number,
+          default: 10
         }
@@ -85,2 +93,4 @@ },
         let loadingCells = false;
+        let alertvisible = vue.ref(false);
+        let alerttext = vue.ref("");
         let cellsdata = vue.ref(props.data);
@@ -245,2 +255,31 @@
 
+        function GetTotalVisibleCells() {
+          let cell = document.querySelector(".scroller-cell");
+          let cellheight = cell.offsetHeight + props.gap;
+          let cellwidth = cell.offsetWidth + props.gap;
+          scroller = document.querySelector(".scroller");
+          var totalVisibleCells = 0;
+
+          if (props.orientation === 'vertical') {
+            var totalH = scroller.offsetHeight;
+            var totalCellsAtY = totalH / cellheight;
+            totalVisibleCells = parseInt(Math.round(totalCellsAtY) * props.numcols);
+          } else {
+            // Calculate the total visible cells
+            var totalW = scroller.offsetWidth;
+            var totalCellsAtX = totalW / cellwidth;
+            totalVisibleCells = parseInt(Math.round(totalCellsAtX) * props.numrows);
+          }
+
+          var minimumRequiredInitialCells = totalVisibleCells + 3 * props.newcellslength; // The Minimum Initial Loading Cells should Be:
+          // The ( Total visible cells ) + ( New cells added each time) * 3
+          // Otherwise the scrolling will not be working correctly
+
+          if (minimumRequiredInitialCells > cellsdata.value.length) {
+            console.log("Error: Minimum Cells Required to load at start should be: ", minimumRequiredInitialCells);
+            alertvisible.value = true;
+            alerttext.value = "Error: Minimum Cells Required to load at start should be: " + minimumRequiredInitialCells + ". This value is relevant to the scroller width and to the number of new cells added each time.";
+          }
+        }
+
         function Initialize() {
@@ -375,3 +414,3 @@ console.log('Initialize');
             context.emit("on-scroll");
-            beginMomentumTracking(); //UpdateCurrentMonth();
+            beginMomentumTracking();
           });
@@ -406,2 +445,5 @@ scroller.addEventListener("scroll", e => {
         });
+        vue.onUpdated(() => {
+          GetTotalVisibleCells();
+        });
         return {
@@ -422,3 +464,5 @@ cellW,
           scrollLoadingOffset,
-          cellsdata
+          cellsdata,
+          alertvisible,
+          alerttext
         };
@@ -432,8 +476,20 @@ }
     };
+    const _hoisted_2 = {
+      key: 0,
+      class: "alert-overlay"
+    };
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       return vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(['scroller', _ctx.orientation === 'vertical' ? 'vertical-scroller' : 'horizontal-scroller'])
+        class: "scroller-container",
+        style: vue.normalizeStyle([{
+          'height': _ctx.height + 'px'
+        }])
       }, [vue.createElementVNode("div", {
-        class: vue.normalizeClass(['scroller-container', _ctx.orientation === 'vertical' ? 'vertical-container' : 'horizontal-container']),
+        class: vue.normalizeClass(['scroller', _ctx.orientation === 'vertical' ? 'vertical-scroller' : 'horizontal-scroller']),
         style: vue.normalizeStyle([{
+          'height': _ctx.height + 'px'
+        }])
+      }, [vue.createElementVNode("div", {
+        class: vue.normalizeClass(['scroller-content', _ctx.orientation === 'vertical' ? 'vertical-container' : 'horizontal-container']),
+        style: vue.normalizeStyle([{
           'gap': _ctx.gap + 'px'
@@ -448,3 +504,3 @@ }, {
           key: datacell.id,
-          class: vue.normalizeClass(['scroller-cell', _ctx.orientation === 'vertical' ? 'vertical-cell' : 'horizontal-cell']),
+          class: vue.normalizeClass(['scroller-cell', _ctx.orientation === 'vertical' ? 'vertical-cell' : 'horizontal-cell', datacell.debug ? 'debugcellstyle' : '']),
           style: vue.normalizeStyle({
@@ -456,3 +512,3 @@ 'flex-basis': _ctx.cellFlexBasis,
         }, [vue.renderSlot(_ctx.$slots, "cell", {}, () => [vue.createElementVNode("span", _hoisted_1, vue.toDisplayString(datacell.id), 1)])], 6);
-      }), 128))])], 6)], 2);
+      }), 128))])], 6)], 6), _ctx.alertvisible ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [vue.createElementVNode("h3", null, vue.toDisplayString(_ctx.alerttext), 1)])) : vue.createCommentVNode("", true)], 4);
     }
@@ -487,7 +543,7 @@
 
-    var css_248z = "\n.scroller[data-v-52b13696] {\r\n    height: 500px;\r\n    background: #eaeaea;\n}\n.vertical-scroller[data-v-52b13696] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\n.horizontal-scroller[data-v-52b13696] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\n.scroller-container[data-v-52b13696] {\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-52b13696] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\n.horizontal-container[data-v-52b13696] {\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-52b13696] {\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;\n}\n.vertical-cell[data-v-52b13696] {\r\n    display: inline-block;\r\n    height: 50px;\n}\n.horizontal-cell[data-v-52b13696] {\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-52b13696] {\r\n    height: 20px;\n}\n.cell-text[data-v-52b13696] {\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 18pt;\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[data-v-53e175ba] {\r\n    background: #eaeaea;\r\n    position: relative;\n}\r\n\r\n.vertical-scroller[data-v-53e175ba] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\r\n\r\n.horizontal-scroller[data-v-53e175ba] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\r\n\r\n.scroller-content[data-v-53e175ba] {\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-53e175ba] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\r\n\r\n.horizontal-container[data-v-53e175ba] {\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-53e175ba] {\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;\n}\r\n\r\n.vertical-cell[data-v-53e175ba] {\r\n    display: inline-block;\r\n    height: 50px;\n}\r\n\r\n.horizontal-cell[data-v-53e175ba] {\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-53e175ba] {\r\n    height: 20px;\n}\r\n\r\n.cell-text[data-v-53e175ba] {\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 18pt;\n}\r\n";
     styleInject(css_248z);
 
     script.render = render;
-    script.__scopeId = "data-v-52b13696";
+    script.__scopeId = "data-v-53e175ba";
 
@@ -494,0 +550,0 @@ exports["default"] = script;

dist/esm/index.js

@@ -5,7 +5,7 @@
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.0.9
- // undefined License
+ // v0.0.11
+ // MIT License
 
-import { s as script } from './Scroller-27c43655.js';
-export { s as Scroller } from './Scroller-27c43655.js';
+import { s as script } from './Scroller-86bba3c6.js';
+export { s as Scroller } from './Scroller-86bba3c6.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.9
- // undefined License
+ // v0.0.11
+ // MIT License
 
-import { s as script } from './Scroller-27c43655.js';
-export { s as default } from './Scroller-27c43655.js';
+import { s as script } from './Scroller-86bba3c6.js';
+export { s as default } from './Scroller-86bba3c6.js';
 import 'vue';

package.json

 {
   "name": "chronocraft-scroller-vue",
   "buildname": "chronoscrollervue",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component",
@@ -9,2 +9,18 @@ "main": "dist/cjs/index.js",
   "unpkg": "dist/chronocraft-scroller-vue.min.js",
+  "keywords": [
+      "scroller",
+      "smooth",
+      "scrollable",
+      "infinite",
+      "draggable",
+      "cal",
+      "scroll",
+      "cal",
+      "bidirectional",
+      "scrolling",
+      "multirow",
+      "multicolumn"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/yannisraft/chronocraft-scroller-vue",
   "files": [
@@ -11,0 +27,0 @@ "dist/*",

README.md

@@ -35,2 +35,12 @@ # A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component
 }
-```
+```
+
+### Important Notice
+To achive a smooth scrolling result without shaking or weird movement, the number of data cells loaded at initialization is relevant
+to the width of the scroller as well as the total new cell data added each time it receives new data.
+
+```
+Total Required Initial Data Length = ( Total visible cells ) + ( New cells added each time) * 3
+```
+
+This is calculated automatically and an alert screen appears when more data is required.

New alerts

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

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

220705

increased by31.36%

Number of package files

43

increased by4.88%

Lines of code

4060

increased by36.61%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

46

increased by31.43%

Worsened metrics

Number of low supply chain risk alerts

5

increased by66.67%

No dependency changes