chronocraft-scroller-vue - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/chronocraftscrollervue-browser.min.js

@@ -1,1 +0,1 @@
-var chronocraftscrollervue=function(e,t){"use strict";var n=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},animatescroll:{type:Number,default:0}},setup(e,n){let l=t.ref(e.cellwidth+"px"),r=t.ref(e.cellheight+"px"),a=t.ref("100%"),o=null;const i=t.ref(null);let s,c,d,u=0,f=0,p=!1,v=!1,m=0,h=0,b=0,x=!1,g=200,w=!1,y=t.ref(!1),k=t.ref(!1),S=t.ref(""),T=1,L=1e7,z=t.ref(0);const E=t.ref(e.data);function N(){"vertical"===e.orientation?o.scrollTop+=u:o.scrollLeft+=u,u*=.97,Math.abs(u)>.5&&(f=requestAnimationFrame(N))}function B(){cancelAnimationFrame(f)}function C(){B(),f=requestAnimationFrame(N)}function M(){var t,n=M.width;return e.hasscrollbar?void 0===n&&((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),n=M.width=t.offsetWidth-t.clientWidth,document.body.removeChild(t)):n=0,n}function W(t){L-=E.value.length-1;for(let e=0;e<t.length;e++)t[e].index=L-e;E.value=[...E.value,...t],E.value.splice(0,t.length);let l=document.querySelector(".scroller-cell");l.offsetHeight,e.gap;let r=l.offsetWidth+e.gap;var a=0;if("vertical"===e.orientation)parseInt(t.length/e.numcols),a=h,o.scrollTop=a,d=a-(h-d);else{var i=parseInt(t.length/e.numrows);a=h-r*i,o.scrollLeft=a,d=a-(h-d)}setTimeout((()=>{w=!1}),400),n.emit("on-data-updated",JSON.parse(JSON.stringify(E.value)))}function I(t){for(let e=0;e<t.length;e++)t[e].index=L+t.length-e;L+=t.length-1,E.value=[...t,...E.value],E.value.splice(E.value.length-t.length,E.value.length-1);let l=document.querySelector(".scroller-cell"),r=l.offsetHeight+e.gap,a=l.offsetWidth+e.gap;var i=0;if("vertical"===e.orientation){var s=Math.floor(t.length/e.numcols);0===h?(i=r*s,setTimeout((()=>{o.scrollTop=i}),0)):(i=h,o.scrollTop=i),d=i-(h-d)}else{var c=parseInt(t.length/e.numrows);i=h+a*c,o.scrollLeft=i,d=i-(h-d)}setTimeout((()=>{w=!1}),400),n.emit("on-data-updated",JSON.parse(JSON.stringify(E.value)))}async function O(t,l,r){if(1===t)if("vertical"===e.orientation){if(o.scrollTop+o.offsetHeight>=o.scrollHeight-g&&!w){w=!0;var a=E.value[0].id,i=E.value[E.value.length-1].id;n.emit("on-update-data-next",(e=>{W(e)}),a,i)}}else if((o.scrollLeft+o.offsetWidth>=o.scrollWidth-g||o.scrollLeft===o.scrollWidth-o.clientWidth)&&!w){w=!0;a=E.value[0].id,i=E.value[E.value.length-1].id;n.emit("on-update-data-next",(e=>{setTimeout((()=>{W(e)}),10)}),a,i)}if(-1===t)if("vertical"===e.orientation){if(o.scrollTop<g&&!w){w=!0;a=E.value[0].id,i=E.value[E.value.length-1].id;n.emit("on-update-data-previous",(e=>{I(e)}),a,i)}}else if(o.scrollLeft<g&&!w){w=!0;a=E.value[0].id,i=E.value[E.value.length-1].id;n.emit("on-update-data-previous",(e=>{setTimeout((()=>{I(e)}),10)}),a,i)}}function q(t){"number"==typeof t&&("vertical"===e.orientation?o.scrollTo({top:t,left:0,behavior:"smooth"}):o.scrollTo({top:0,left:t,behavior:"smooth"}))}function H(t){for(var n=-1,l=0;l<E.value.length;l++)if(E.value[l]&&E.value[l].id===t){E.value[l];var r="cell_"+E.value[l].id,a=document.getElementById(r),o=a.getBoundingClientRect(),i=document.querySelector(".scroller-content");if("vertical"===e.orientation){var s=parseInt(i.style.paddingTop);n=a.offsetTop-s+e.gap}else{s=parseInt(i.style.paddingRight);n=parseInt(o.left-e.gap-s)}break}return n}function _(){o=document.querySelector(".scroller"),b=M();var t=0,i=0,f=0;if("vertical"===e.orientation)t=(e.numcols-1)*e.gap+b,o.offsetWidth,i=(o.offsetWidth-t-2*e.contentpadding)/e.numcols,l.value=String(i+"%"),a.value=String(i+"px"),e.cellsquared&&(f=(o.clientWidth-t-2*e.contentpadding)/e.numcols,r.value=f+"px");else{t=(e.numrows-1)*e.gap+b,o.offsetHeight,f=(o.offsetHeight-t-2*e.contentpadding)/e.numrows;var x=(o.offsetHeight-t-2*e.contentpadding)/e.numrows;r.value=String(f+"px"),a.value=String(x+"px"),e.cellsquared&&(i=f,l.value=i+"px")}o.addEventListener("mousedown",(t=>{p=!0,o.classList.add("active"),"vertical"===e.orientation?(s=t.pageY-o.offsetTop,c=t.pageY,d=o.scrollTop,m=t.clientY):(s=t.pageX-o.offsetLeft,c=t.pageX,d=o.scrollLeft,m=t.clientX),B()})),o.addEventListener("mouseleave",(()=>{p=!1,o.classList.remove("active")})),o.addEventListener("mouseup",(t=>{p=!1,v=!1,o.classList.remove("active"),C();var l=0;l="vertical"===e.orientation?c-t.pageY:c-t.pageX,Math.abs(l)>10&&n.emit("on-scroll")})),o.addEventListener("mousemove",(t=>{if(p){t.preventDefault(),v=!0;var n=0,l=0;"vertical"===e.orientation?(n=2*(t.pageY-o.offsetTop-s),l=o.scrollTop,o.scrollTop=d-n,u=o.scrollTop-l,o.scrollTop=d-n):(n=2*(t.pageX-o.offsetLeft-s),l=o.scrollLeft,o.scrollLeft=d-n,u=o.scrollLeft-l,o.scrollLeft=d-n)}})),o.addEventListener("wheel",(t=>{if(B(),"vertical"===e.orientation){const n=Math.sign(t.deltaY)*e.wheelscrollspeed,l=o.scrollTop;o.scrollTop+=n,u=o.scrollTop-l}else{const n=Math.sign(t.deltaY)*e.wheelscrollspeed,l=o.scrollLeft;o.scrollLeft+=n,u=o.scrollLeft-l,o.scrollLeft,o.scrollWidth,o.clientWidth}n.emit("on-scroll"),C()})),o.addEventListener("scroll",(t=>{var n=0;if("vertical"===e.orientation){let e=o.scrollTop;0!=(n=e-h)&&(T=parseInt(n/Math.abs(n))),h=e}else{let e=o.scrollLeft;0!=(n=e-h)&&(T=parseInt(n/Math.abs(n))),h=e}})),setInterval((()=>{e.orientation,O(T)}),200),setInterval((()=>{if("vertical"===e.orientation){let e=o.scrollTop;h=e}else{let e=o.scrollLeft;h=e}}),50)}function V(e){_()}return t.onBeforeMount((()=>{setTimeout((()=>{for(var e=0;e<E.value.length;e++)E.value[e].index=L-e}),10)})),t.onMounted((()=>{window.addEventListener("resize",V),_(),n.emit("on-data-updated",JSON.parse(JSON.stringify(E.value)))})),t.onUpdated((()=>{!function(){let t=document.querySelector(".scroller-cell");if(t){let i=t.offsetHeight+e.gap,s=t.offsetWidth+e.gap;o=document.querySelector(".scroller");var n=0;if("vertical"===e.orientation){var l=o.offsetHeight/i;n=parseInt(Math.round(l)*e.numcols)}else{var r=o.offsetWidth/s;n=parseInt(Math.round(r)*e.numrows)}var a=n+3*e.newcellslength;a>E.value.length&&(console.log("Error: Minimum Cells Required to load at start should be: ",a),y.value=!0,S.value="Error: Minimum Cells Required to load at start should be: "+a+". This value is relevant to the scroller width and to the number of new cells added each time.")}}()})),t.watch((()=>e.animatescroll),((e,t)=>{z.value=e,console.log("animatedirection: ",z)})),t.watch((()=>e.data),((e,t)=>{E.value=e})),{cellW:l,cellH:r,cellFlexBasis:a,scroller:o,cellRef:i,isMouseDown:p,ScrollTo:q,ScrollBy:function(t){"number"==typeof t&&("vertical"===e.orientation?o.scrollBy({top:t,left:0,behavior:"smooth"}):o.scrollBy({top:0,left:t,behavior:"smooth"}))},ScrollToCell:function(e){q(H(e))},GetCellsPosition:H,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},SetAnimateNext:function(e){z.value=1,k.value=!0,setTimeout((()=>{E.value=e,z.value=0,q(0)}),2e3),setTimeout((()=>{k.value=!1}),2100)},SetAnimatePrevious:function(e){z.value=-1,k.value=!0,setTimeout((()=>{E.value=e,z.value=0,q(0)}),2e3),setTimeout((()=>{k.value=!1}),2100)},startPos:s,startscrollPos:c,movescrollPos:d,scrollerMoving:v,previousPos:m,scrollbarWidth:b,justLoaded:x,scrollLoadingOffset:g,cellsdata:E,alertvisible:y,alerttext:S,dirsign:T,preloadvisible:k,animatedirection:z}}});const l=["id"],r={class:"cell-text"},a={class:"overlay"},o=[(e=>(t.pushScopeId("data-v-6e891a3c"),e=e(),t.popScopeId(),e))((()=>t.createElementVNode("img",{src:"2e0a73c1ed1881a5.png",alt:"preload"},null,-1)))],i={key:0,class:"alert-overlay"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&l.firstChild?l.insertBefore(r,l.firstChild):l.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".scroller-container[data-v-6e891a3c] {\r\n    position: relative;\n}\n.alert-overlay[data-v-6e891a3c] {\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    z-index: 100000000;\r\n    pointer-events: none;\n}\n.alert-overlay h3[data-v-6e891a3c] {\r\n    color: #fff;\r\n    font-weight: 400;\n}\n.preload-overlay[data-v-6e891a3c] {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0px;\r\n    left: 0px;\r\n    background: #eaeaeabb;\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    z-index: 100000000;\r\n    opacity: 0;\r\n    pointer-events: none;\n}\n.preload-overlay img[data-v-6e891a3c] {}\n.preloadvisible[data-v-6e891a3c] {\r\n    opacity: 1;\r\n    transition: opacity 2.0s cubic-bezier(0.23, 1, 0.32, 1) 0s;\n}\n.debugcellstyle[data-v-6e891a3c] {\r\n    background-color: brown !important;\n}\n.scroller-container[data-v-6e891a3c] {\r\n    position: relative;\n}\n.overlay[data-v-6e891a3c] {\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.animate-next[data-v-6e891a3c] {\r\n    /* transform: translate(0px, -800px);\r\n    transition: transform 2.0s cubic-bezier(0.23, 1, 0.32, 1) 200ms; */\r\n    /* transition: blur 2.0s cubic-bezier(0.23, 1, 0.32, 1) 0ms; */\r\n    -webkit-animation: keepblur-6e891a3c 2000ms;\r\n            animation: keepblur-6e891a3c 2000ms;\r\n\r\n    /* transition: opacity 3.0s cubic-bezier(0.23, 1, 0.32, 1) 2s;\r\n    opacity: 0.0;   */\n}\n.animate-previous[data-v-6e891a3c] {\r\n    /* transform: translate(0px, 800px);\r\n    transition: transform 2.0s cubic-bezier(0.23, 1, 0.32, 1) 200ms; */\r\n    -webkit-animation: keepblur-6e891a3c 2000ms;\r\n            animation: keepblur-6e891a3c 2000ms;\n}\n.noselect[data-v-6e891a3c] {\r\n    -webkit-touch-callout: none;\r\n    /* iOS Safari */\r\n    -webkit-user-select: none;\r\n    /* Safari */\r\n    /* Konqueror HTML */\r\n    /* Old versions of Firefox */\r\n    -ms-user-select: none;\r\n    /* Internet Explorer/Edge */\r\n    user-select: none;\r\n    /* Non-prefixed version, currently\r\n                                    supported by Chrome, Edge, Opera and Firefox */\n}\n@-webkit-keyframes blur-6e891a3c {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n50% {\r\n        -webkit-filter: blur(5px);\n}\n100% {\r\n        -webkit-filter: blur(0px);\n}\n}\n@keyframes blur-6e891a3c {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n50% {\r\n        -webkit-filter: blur(5px);\n}\n100% {\r\n        -webkit-filter: blur(0px);\n}\n}\n@-webkit-keyframes keepblur-6e891a3c {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n100% {\r\n        -webkit-filter: blur(15px);\n}\n}\n@keyframes keepblur-6e891a3c {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n100% {\r\n        -webkit-filter: blur(15px);\n}\n}\n.scroller[data-v-6e891a3c] {\r\n    background: #eaeaea;\r\n    position: relative;\n}\n.vertical-scroller[data-v-6e891a3c] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\n.horizontal-scroller[data-v-6e891a3c] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\n.scroller-content[data-v-6e891a3c] {\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-6e891a3c] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\n.horizontal-container[data-v-6e891a3c] {\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-6e891a3c] {\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-6e891a3c] {\r\n    display: inline-block;\r\n    height: 50px;\n}\n.horizontal-cell[data-v-6e891a3c] {\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-6e891a3c] {\r\n    height: 20px;\n}\n.cell-text[data-v-6e891a3c] {\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"),n.render=function(e,n,s,c,d,u){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",{"animate-next":1===e.animatedirection},{"animate-previous":-1===e.animatedirection}]),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,(n=>(t.openBlock(),t.createElementBlock("div",{id:"cell_"+n.id,ref_for:!0,ref:"cellRef",key:n.id,class:t.normalizeClass(["scroller-cell","vertical"===e.orientation?"vertical-cell":"horizontal-cell",n.debug?"debugcellstyle":""]),style:t.normalizeStyle({"flex-basis":e.cellFlexBasis,height:e.cellH,width:e.cellW,"z-index":n.index})},[t.renderSlot(e.$slots,"cell",{data:n},(()=>[t.createElementVNode("span",r,t.toDisplayString(n.id),1)]))],14,l)))),128))]))],6)],6),t.createElementVNode("div",a,[t.renderSlot(e.$slots,"overlay")]),t.createElementVNode("div",{class:t.normalizeClass(["preload-overlay","noselect",{preloadvisible:e.preloadvisible}])},o,2),e.alertvisible?(t.openBlock(),t.createElementBlock("div",i,[t.createElementVNode("h3",null,t.toDisplayString(e.alerttext),1)])):t.createCommentVNode("",!0)],4)},n.__scopeId="data-v-6e891a3c";var s=Object.freeze({__proto__:null,Scroller:n});const c={install(e){Object.entries(s).forEach((([t,n])=>{e.component(t,n)}))}};return e.Scroller=n,e.default=c,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue);
+var chronocraftscrollervue=function(e,t){"use strict";var n=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},animatescroll:{type:Number,default:0}},setup(e,n){let l=t.ref(e.cellwidth+"px"),r=t.ref(e.cellheight+"px"),a=t.ref("100%"),o=null;const i=t.ref(null);let s,c,d,u=0,f=0,p=!1,v=!1,m=0,h=0,b=0,x=!1,g=200,w=!1,y=t.ref(!1),k=t.ref(!1),S=t.ref(""),T=1,L=1e7,z=t.ref(0);const E=t.ref(e.data);function N(){"vertical"===e.orientation?o.scrollTop+=u:o.scrollLeft+=u,u*=.97,Math.abs(u)>.5&&(f=requestAnimationFrame(N))}function B(){cancelAnimationFrame(f)}function C(){B(),f=requestAnimationFrame(N)}function M(){var t,n=M.width;return e.hasscrollbar?void 0===n&&((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),n=M.width=t.offsetWidth-t.clientWidth,document.body.removeChild(t)):n=0,n}function W(t){L-=E.value.length-1;for(let e=0;e<t.length;e++)t[e].index=L-e;E.value=[...E.value,...t],E.value.splice(0,t.length);let l=document.querySelector(".scroller-cell");l.offsetHeight,e.gap;let r=l.offsetWidth+e.gap;var a=0;if("vertical"===e.orientation)parseInt(t.length/e.numcols),a=h,o.scrollTop=a,d=a-(h-d);else{var i=parseInt(t.length/e.numrows);a=h-r*i,o.scrollLeft=a,d=a-(h-d)}setTimeout((()=>{w=!1}),400),n.emit("on-data-updated",JSON.parse(JSON.stringify(E.value)))}function I(t){for(let e=0;e<t.length;e++)t[e].index=L+t.length-e;L+=t.length-1,E.value=[...t,...E.value],E.value.splice(E.value.length-t.length,E.value.length-1);let l=document.querySelector(".scroller-cell"),r=l.offsetHeight+e.gap,a=l.offsetWidth+e.gap;var i=0;if("vertical"===e.orientation){var s=Math.floor(t.length/e.numcols);0===h?(i=r*s,setTimeout((()=>{o.scrollTop=i}),0)):(i=h,o.scrollTop=i),d=i-(h-d)}else{var c=parseInt(t.length/e.numrows);i=h+a*c,o.scrollLeft=i,d=i-(h-d)}setTimeout((()=>{w=!1}),400),n.emit("on-data-updated",JSON.parse(JSON.stringify(E.value)))}async function O(t,l,r){if(1===t)if("vertical"===e.orientation){if(o.scrollTop+o.offsetHeight>=o.scrollHeight-g&&!w){w=!0;var a=E.value[0].id,i=E.value[E.value.length-1].id;n.emit("on-update-data-next",(e=>{W(e)}),a,i)}}else if((o.scrollLeft+o.offsetWidth>=o.scrollWidth-g||o.scrollLeft===o.scrollWidth-o.clientWidth)&&!w){w=!0;a=E.value[0].id,i=E.value[E.value.length-1].id;n.emit("on-update-data-next",(e=>{setTimeout((()=>{W(e)}),10)}),a,i)}if(-1===t)if("vertical"===e.orientation){if(o.scrollTop<g&&!w){w=!0;a=E.value[0].id,i=E.value[E.value.length-1].id;n.emit("on-update-data-previous",(e=>{I(e)}),a,i)}}else if(o.scrollLeft<g&&!w){w=!0;a=E.value[0].id,i=E.value[E.value.length-1].id;n.emit("on-update-data-previous",(e=>{setTimeout((()=>{I(e)}),10)}),a,i)}}function q(t){"number"==typeof t&&("vertical"===e.orientation?o.scrollTo({top:t,left:0,behavior:"smooth"}):o.scrollTo({top:0,left:t,behavior:"smooth"}))}function H(t){for(var n=-1,l=0;l<E.value.length;l++)if(E.value[l]&&E.value[l].id===t){E.value[l];var r="cell_"+E.value[l].id,a=document.getElementById(r),o=a.getBoundingClientRect(),i=document.querySelector(".scroller-content");if("vertical"===e.orientation){var s=parseInt(i.style.paddingTop);n=a.offsetTop-s+e.gap}else{s=parseInt(i.style.paddingRight);n=parseInt(o.left-e.gap-s)}break}return n}function _(){o=document.querySelector(".scroller"),b=M();var t=0,i=0,f=0;if("vertical"===e.orientation)t=(e.numcols-1)*e.gap+b,o.offsetWidth,i=(o.offsetWidth-t-2*e.contentpadding)/e.numcols,l.value=String(i+"%"),a.value=String(i+"px"),e.cellsquared&&(f=(o.clientWidth-t-2*e.contentpadding)/e.numcols,r.value=f+"px");else{t=(e.numrows-1)*e.gap+b,o.offsetHeight,f=(o.offsetHeight-t-2*e.contentpadding)/e.numrows;var x=(o.offsetHeight-t-2*e.contentpadding)/e.numrows;r.value=String(f+"px"),a.value=String(x+"px"),e.cellsquared&&(i=f,l.value=i+"px")}o.addEventListener("mousedown",(t=>{p=!0,o.classList.add("active"),"vertical"===e.orientation?(s=t.pageY-o.offsetTop,c=t.pageY,d=o.scrollTop,m=t.clientY):(s=t.pageX-o.offsetLeft,c=t.pageX,d=o.scrollLeft,m=t.clientX),B()})),o.addEventListener("mouseleave",(()=>{p=!1,o.classList.remove("active")})),o.addEventListener("mouseup",(t=>{p=!1,v=!1,o.classList.remove("active"),C();var l=0;l="vertical"===e.orientation?c-t.pageY:c-t.pageX,Math.abs(l)>10&&n.emit("on-scroll")})),o.addEventListener("mousemove",(t=>{if(p){t.preventDefault(),v=!0;var n=0,l=0;"vertical"===e.orientation?(n=2*(t.pageY-o.offsetTop-s),l=o.scrollTop,o.scrollTop=d-n,u=o.scrollTop-l,o.scrollTop=d-n):(n=2*(t.pageX-o.offsetLeft-s),l=o.scrollLeft,o.scrollLeft=d-n,u=o.scrollLeft-l,o.scrollLeft=d-n)}})),o.addEventListener("wheel",(t=>{if(B(),"vertical"===e.orientation){const n=Math.sign(t.deltaY)*e.wheelscrollspeed,l=o.scrollTop;o.scrollTop+=n,u=o.scrollTop-l}else{const n=Math.sign(t.deltaY)*e.wheelscrollspeed,l=o.scrollLeft;o.scrollLeft+=n,u=o.scrollLeft-l,o.scrollLeft,o.scrollWidth,o.clientWidth}n.emit("on-scroll"),C()})),o.addEventListener("scroll",(t=>{var n=0;if("vertical"===e.orientation){let e=o.scrollTop;0!=(n=e-h)&&(T=parseInt(n/Math.abs(n))),h=e}else{let e=o.scrollLeft;0!=(n=e-h)&&(T=parseInt(n/Math.abs(n))),h=e}})),setInterval((()=>{e.orientation,O(T)}),200),setInterval((()=>{if("vertical"===e.orientation){let e=o.scrollTop;h=e}else{let e=o.scrollLeft;h=e}}),50)}function V(e){_()}return t.onBeforeMount((()=>{setTimeout((()=>{for(var e=0;e<E.value.length;e++)E.value[e].index=L-e}),10)})),t.onMounted((()=>{window.addEventListener("resize",V),_(),n.emit("on-data-updated",JSON.parse(JSON.stringify(E.value)))})),t.onUpdated((()=>{!function(){let t=document.querySelector(".scroller-cell");if(t){let i=t.offsetHeight+e.gap,s=t.offsetWidth+e.gap;o=document.querySelector(".scroller");var n=0;if("vertical"===e.orientation){var l=o.offsetHeight/i;n=parseInt(Math.round(l)*e.numcols)}else{var r=o.offsetWidth/s;n=parseInt(Math.round(r)*e.numrows)}var a=n+3*e.newcellslength;a>E.value.length&&(console.log("Error: Minimum Cells Required to load at start should be: ",a),y.value=!0,S.value="Error: Minimum Cells Required to load at start should be: "+a+". This value is relevant to the scroller width and to the number of new cells added each time.")}}()})),t.watch((()=>e.animatescroll),((e,t)=>{z.value=e,console.log("animatedirection: ",z)})),t.watch((()=>e.data),((e,t)=>{E.value=e})),{cellW:l,cellH:r,cellFlexBasis:a,scroller:o,cellRef:i,isMouseDown:p,ScrollTo:q,ScrollBy:function(t){"number"==typeof t&&("vertical"===e.orientation?o.scrollBy({top:t,left:0,behavior:"smooth"}):o.scrollBy({top:0,left:t,behavior:"smooth"}))},ScrollToCell:function(e){q(H(e))},GetCellsPosition:H,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},SetAnimateNext:function(e){z.value=1,k.value=!0,setTimeout((()=>{E.value=e,z.value=0,q(0)}),2e3),setTimeout((()=>{k.value=!1}),2100)},SetAnimatePrevious:function(e){z.value=-1,k.value=!0,setTimeout((()=>{E.value=e,z.value=0,q(0)}),2e3),setTimeout((()=>{k.value=!1}),2100)},startPos:s,startscrollPos:c,movescrollPos:d,scrollerMoving:v,previousPos:m,scrollbarWidth:b,justLoaded:x,scrollLoadingOffset:g,cellsdata:E,alertvisible:y,alerttext:S,dirsign:T,preloadvisible:k,animatedirection:z}}});const l=["id"],r={class:"cell-text"},a={class:"overlay"},o=[(e=>(t.pushScopeId("data-v-12a5c070"),e=e(),t.popScopeId(),e))((()=>t.createElementVNode("img",{src:"2e0a73c1ed1881a5.png",alt:"preload"},null,-1)))],i={key:0,class:"alert-overlay"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&l.firstChild?l.insertBefore(r,l.firstChild):l.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".scroller-container[data-v-12a5c070] {\r\n    position: relative;\n}\n.alert-overlay[data-v-12a5c070] {\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    z-index: 100000000;\r\n    pointer-events: none;\n}\n.alert-overlay h3[data-v-12a5c070] {\r\n    color: #fff;\r\n    font-weight: 400;\n}\n.preload-overlay[data-v-12a5c070] {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0px;\r\n    left: 0px;\r\n    background: #eaeaeabb;\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    z-index: 100000000;\r\n    opacity: 0;\r\n    pointer-events: none;\n}\n.preload-overlay img[data-v-12a5c070] {}\n.preloadvisible[data-v-12a5c070] {\r\n    opacity: 1;\r\n    transition: opacity 2.0s cubic-bezier(0.23, 1, 0.32, 1) 0s;\n}\n.debugcellstyle[data-v-12a5c070] {\r\n    background-color: brown !important;\n}\n.scroller-container[data-v-12a5c070] {\r\n    position: relative;\n}\n.overlay[data-v-12a5c070] {\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.animate-next[data-v-12a5c070] {\r\n    /* transform: translate(0px, -800px);\r\n    transition: transform 2.0s cubic-bezier(0.23, 1, 0.32, 1) 200ms; */\r\n    /* transition: blur 2.0s cubic-bezier(0.23, 1, 0.32, 1) 0ms; */\r\n    -webkit-animation: keepblur-12a5c070 2000ms;\r\n            animation: keepblur-12a5c070 2000ms;\r\n\r\n    /* transition: opacity 3.0s cubic-bezier(0.23, 1, 0.32, 1) 2s;\r\n    opacity: 0.0;   */\n}\n.animate-previous[data-v-12a5c070] {\r\n    /* transform: translate(0px, 800px);\r\n    transition: transform 2.0s cubic-bezier(0.23, 1, 0.32, 1) 200ms; */\r\n    -webkit-animation: keepblur-12a5c070 2000ms;\r\n            animation: keepblur-12a5c070 2000ms;\n}\n.noselect[data-v-12a5c070] {\r\n    -webkit-touch-callout: none;\r\n    /* iOS Safari */\r\n    -webkit-user-select: none;\r\n    /* Safari */\r\n    /* Konqueror HTML */\r\n    /* Old versions of Firefox */\r\n    -ms-user-select: none;\r\n    /* Internet Explorer/Edge */\r\n    user-select: none;\r\n    /* Non-prefixed version, currently\r\n                                    supported by Chrome, Edge, Opera and Firefox */\n}\n@-webkit-keyframes blur-12a5c070 {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n50% {\r\n        -webkit-filter: blur(5px);\n}\n100% {\r\n        -webkit-filter: blur(0px);\n}\n}\n@keyframes blur-12a5c070 {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n50% {\r\n        -webkit-filter: blur(5px);\n}\n100% {\r\n        -webkit-filter: blur(0px);\n}\n}\n@-webkit-keyframes keepblur-12a5c070 {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n100% {\r\n        -webkit-filter: blur(15px);\n}\n}\n@keyframes keepblur-12a5c070 {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n100% {\r\n        -webkit-filter: blur(15px);\n}\n}\n.scroller[data-v-12a5c070] {\r\n    background: #eaeaea;\r\n    position: relative;\n}\n.vertical-scroller[data-v-12a5c070] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\n.horizontal-scroller[data-v-12a5c070] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\n.scroller-content[data-v-12a5c070] {\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-12a5c070] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\n.horizontal-container[data-v-12a5c070] {\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-12a5c070] {\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-12a5c070] {\r\n    display: inline-block;\r\n    height: 50px;\n}\n.horizontal-cell[data-v-12a5c070] {\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-12a5c070] {\r\n    height: 20px;\n}\n.cell-text[data-v-12a5c070] {\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"),n.render=function(e,n,s,c,d,u){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",{"animate-next":1===e.animatedirection},{"animate-previous":-1===e.animatedirection}]),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,(n=>(t.openBlock(),t.createElementBlock("div",{id:"cell_"+n.id,ref_for:!0,ref:"cellRef",key:n.id,class:t.normalizeClass(["scroller-cell","vertical"===e.orientation?"vertical-cell":"horizontal-cell",n.debug?"debugcellstyle":""]),style:t.normalizeStyle({"flex-basis":e.cellFlexBasis,height:e.cellH,width:e.cellW,"z-index":n.index})},[t.renderSlot(e.$slots,"cell",{data:n},(()=>[t.createElementVNode("span",r,t.toDisplayString(n.id),1)]))],14,l)))),128))]))],6)],6),t.createElementVNode("div",a,[t.renderSlot(e.$slots,"overlay")]),t.createElementVNode("div",{class:t.normalizeClass(["preload-overlay","noselect",{preloadvisible:e.preloadvisible}])},o,2),e.alertvisible?(t.openBlock(),t.createElementBlock("div",i,[t.createElementVNode("h3",null,t.toDisplayString(e.alerttext),1)])):t.createCommentVNode("",!0)],4)},n.__scopeId="data-v-12a5c070";var s=Object.freeze({__proto__:null,Scroller:n});const c={install(e){Object.entries(s).forEach((([t,n])=>{e.component(t,n)}))}};return e.Scroller=n,e.default=c,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.1.1
+ // v0.1.2
  // MIT License
@@ -700,3 +700,3 @@
 
-const _withScopeId = n => (pushScopeId("data-v-6e891a3c"), n = n(), popScopeId(), n);
+const _withScopeId = n => (pushScopeId("data-v-12a5c070"), n = n(), popScopeId(), n);
 
@@ -796,7 +796,7 @@ const _hoisted_1 = ["id"];
 
-var css_248z = ".scroller-container[data-v-6e891a3c] {\r\n    position: relative;\n}\n.alert-overlay[data-v-6e891a3c] {\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    z-index: 100000000;\r\n    pointer-events: none;\n}\n.alert-overlay h3[data-v-6e891a3c] {\r\n    color: #fff;\r\n    font-weight: 400;\n}\n.preload-overlay[data-v-6e891a3c] {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0px;\r\n    left: 0px;\r\n    background: #eaeaeabb;\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    z-index: 100000000;\r\n    opacity: 0;\r\n    pointer-events: none;\n}\n.preload-overlay img[data-v-6e891a3c] {}\n.preloadvisible[data-v-6e891a3c] {\r\n    opacity: 1;\r\n    transition: opacity 2.0s cubic-bezier(0.23, 1, 0.32, 1) 0s;\n}\n.debugcellstyle[data-v-6e891a3c] {\r\n    background-color: brown !important;\n}\n.scroller-container[data-v-6e891a3c] {\r\n    position: relative;\n}\n.overlay[data-v-6e891a3c] {\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.animate-next[data-v-6e891a3c] {\r\n    /* transform: translate(0px, -800px);\r\n    transition: transform 2.0s cubic-bezier(0.23, 1, 0.32, 1) 200ms; */\r\n    /* transition: blur 2.0s cubic-bezier(0.23, 1, 0.32, 1) 0ms; */\r\n    -webkit-animation: keepblur-6e891a3c 2000ms;\r\n            animation: keepblur-6e891a3c 2000ms;\r\n\r\n    /* transition: opacity 3.0s cubic-bezier(0.23, 1, 0.32, 1) 2s;\r\n    opacity: 0.0;   */\n}\n.animate-previous[data-v-6e891a3c] {\r\n    /* transform: translate(0px, 800px);\r\n    transition: transform 2.0s cubic-bezier(0.23, 1, 0.32, 1) 200ms; */\r\n    -webkit-animation: keepblur-6e891a3c 2000ms;\r\n            animation: keepblur-6e891a3c 2000ms;\n}\n.noselect[data-v-6e891a3c] {\r\n    -webkit-touch-callout: none;\r\n    /* iOS Safari */\r\n    -webkit-user-select: none;\r\n    /* Safari */\r\n    /* Konqueror HTML */\r\n    /* Old versions of Firefox */\r\n    -ms-user-select: none;\r\n    /* Internet Explorer/Edge */\r\n    user-select: none;\r\n    /* Non-prefixed version, currently\r\n                                    supported by Chrome, Edge, Opera and Firefox */\n}\n@-webkit-keyframes blur-6e891a3c {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n50% {\r\n        -webkit-filter: blur(5px);\n}\n100% {\r\n        -webkit-filter: blur(0px);\n}\n}\n@keyframes blur-6e891a3c {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n50% {\r\n        -webkit-filter: blur(5px);\n}\n100% {\r\n        -webkit-filter: blur(0px);\n}\n}\n@-webkit-keyframes keepblur-6e891a3c {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n100% {\r\n        -webkit-filter: blur(15px);\n}\n}\n@keyframes keepblur-6e891a3c {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n100% {\r\n        -webkit-filter: blur(15px);\n}\n}\n.scroller[data-v-6e891a3c] {\r\n    background: #eaeaea;\r\n    position: relative;\n}\n.vertical-scroller[data-v-6e891a3c] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\n.horizontal-scroller[data-v-6e891a3c] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\n.scroller-content[data-v-6e891a3c] {\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-6e891a3c] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\n.horizontal-container[data-v-6e891a3c] {\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-6e891a3c] {\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-6e891a3c] {\r\n    display: inline-block;\r\n    height: 50px;\n}\n.horizontal-cell[data-v-6e891a3c] {\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-6e891a3c] {\r\n    height: 20px;\n}\n.cell-text[data-v-6e891a3c] {\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-12a5c070] {\r\n    position: relative;\n}\n.alert-overlay[data-v-12a5c070] {\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    z-index: 100000000;\r\n    pointer-events: none;\n}\n.alert-overlay h3[data-v-12a5c070] {\r\n    color: #fff;\r\n    font-weight: 400;\n}\n.preload-overlay[data-v-12a5c070] {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0px;\r\n    left: 0px;\r\n    background: #eaeaeabb;\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    z-index: 100000000;\r\n    opacity: 0;\r\n    pointer-events: none;\n}\n.preload-overlay img[data-v-12a5c070] {}\n.preloadvisible[data-v-12a5c070] {\r\n    opacity: 1;\r\n    transition: opacity 2.0s cubic-bezier(0.23, 1, 0.32, 1) 0s;\n}\n.debugcellstyle[data-v-12a5c070] {\r\n    background-color: brown !important;\n}\n.scroller-container[data-v-12a5c070] {\r\n    position: relative;\n}\n.overlay[data-v-12a5c070] {\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.animate-next[data-v-12a5c070] {\r\n    /* transform: translate(0px, -800px);\r\n    transition: transform 2.0s cubic-bezier(0.23, 1, 0.32, 1) 200ms; */\r\n    /* transition: blur 2.0s cubic-bezier(0.23, 1, 0.32, 1) 0ms; */\r\n    -webkit-animation: keepblur-12a5c070 2000ms;\r\n            animation: keepblur-12a5c070 2000ms;\r\n\r\n    /* transition: opacity 3.0s cubic-bezier(0.23, 1, 0.32, 1) 2s;\r\n    opacity: 0.0;   */\n}\n.animate-previous[data-v-12a5c070] {\r\n    /* transform: translate(0px, 800px);\r\n    transition: transform 2.0s cubic-bezier(0.23, 1, 0.32, 1) 200ms; */\r\n    -webkit-animation: keepblur-12a5c070 2000ms;\r\n            animation: keepblur-12a5c070 2000ms;\n}\n.noselect[data-v-12a5c070] {\r\n    -webkit-touch-callout: none;\r\n    /* iOS Safari */\r\n    -webkit-user-select: none;\r\n    /* Safari */\r\n    /* Konqueror HTML */\r\n    /* Old versions of Firefox */\r\n    -ms-user-select: none;\r\n    /* Internet Explorer/Edge */\r\n    user-select: none;\r\n    /* Non-prefixed version, currently\r\n                                    supported by Chrome, Edge, Opera and Firefox */\n}\n@-webkit-keyframes blur-12a5c070 {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n50% {\r\n        -webkit-filter: blur(5px);\n}\n100% {\r\n        -webkit-filter: blur(0px);\n}\n}\n@keyframes blur-12a5c070 {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n50% {\r\n        -webkit-filter: blur(5px);\n}\n100% {\r\n        -webkit-filter: blur(0px);\n}\n}\n@-webkit-keyframes keepblur-12a5c070 {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n100% {\r\n        -webkit-filter: blur(15px);\n}\n}\n@keyframes keepblur-12a5c070 {\n0% {\r\n        -webkit-filter: blur(0px);\n}\n100% {\r\n        -webkit-filter: blur(15px);\n}\n}\n.scroller[data-v-12a5c070] {\r\n    background: #eaeaea;\r\n    position: relative;\n}\n.vertical-scroller[data-v-12a5c070] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\n.horizontal-scroller[data-v-12a5c070] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\n.scroller-content[data-v-12a5c070] {\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-12a5c070] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\n.horizontal-container[data-v-12a5c070] {\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-12a5c070] {\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-12a5c070] {\r\n    display: inline-block;\r\n    height: 50px;\n}\n.horizontal-cell[data-v-12a5c070] {\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-12a5c070] {\r\n    height: 20px;\n}\n.cell-text[data-v-12a5c070] {\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-6e891a3c";
+script.__scopeId = "data-v-12a5c070";
 
@@ -803,0 +803,0 @@ var components = /*#__PURE__*/Object.freeze({

dist/cjs/index.js

@@ -5,6 +5,6 @@
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.1.1
+ // v0.1.2
  // MIT License
 
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Scroller=require('./Scroller-55298c3a.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-31c6272f.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.1.1
+ // v0.1.2
  // MIT License
 
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Scroller=require('./Scroller-55298c3a.js');require('vue');exports["default"]=Scroller.s;
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Scroller=require('./Scroller-31c6272f.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.1.1
+ // v0.1.2
  // MIT License
@@ -704,3 +704,3 @@
 
-    const _withScopeId = n => (vue.pushScopeId("data-v-6e891a3c"), n = n(), vue.popScopeId(), n);
+    const _withScopeId = n => (vue.pushScopeId("data-v-12a5c070"), n = n(), vue.popScopeId(), n);
 
@@ -800,7 +800,7 @@ const _hoisted_1 = ["id"];
 
-    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    z-index: 100000000;\r\n    pointer-events: none;\r\n}\r\n\r\n.alert-overlay h3 {\r\n    color: #fff;\r\n    font-weight: 400;\r\n}\r\n\r\n.preload-overlay {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0px;\r\n    left: 0px;\r\n    background: #eaeaeabb;\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    z-index: 100000000;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n.preload-overlay img {}\r\n\r\n.preloadvisible {\r\n    opacity: 1;\r\n    transition: opacity 2.0s cubic-bezier(0.23, 1, 0.32, 1) 0s;\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.animate-next {\r\n    /* transform: translate(0px, -800px);\r\n    transition: transform 2.0s cubic-bezier(0.23, 1, 0.32, 1) 200ms; */\r\n    /* transition: blur 2.0s cubic-bezier(0.23, 1, 0.32, 1) 0ms; */\r\n    -webkit-animation: keepblur 2000ms;\r\n            animation: keepblur 2000ms;\r\n\r\n    /* transition: opacity 3.0s cubic-bezier(0.23, 1, 0.32, 1) 2s;\r\n    opacity: 0.0;   */\r\n}\r\n\r\n.animate-previous {\r\n    /* transform: translate(0px, 800px);\r\n    transition: transform 2.0s cubic-bezier(0.23, 1, 0.32, 1) 200ms; */\r\n    -webkit-animation: keepblur 2000ms;\r\n            animation: keepblur 2000ms;\r\n}\r\n\r\n.noselect {\r\n    -webkit-touch-callout: none;\r\n    /* iOS Safari */\r\n    -webkit-user-select: none;\r\n    /* Safari */\r\n    /* Konqueror HTML */\r\n    /* Old versions of Firefox */\r\n    -ms-user-select: none;\r\n    /* Internet Explorer/Edge */\r\n    user-select: none;\r\n    /* Non-prefixed version, currently\r\n                                    supported by Chrome, Edge, Opera and Firefox */\r\n}\r\n\r\n@-webkit-keyframes blur {\r\n    0% {\r\n        -webkit-filter: blur(0px);\r\n    }\r\n\r\n    50% {\r\n        -webkit-filter: blur(5px);\r\n    }\r\n\r\n    100% {\r\n        -webkit-filter: blur(0px);\r\n    }\r\n}\r\n\r\n@keyframes blur {\r\n    0% {\r\n        -webkit-filter: blur(0px);\r\n    }\r\n\r\n    50% {\r\n        -webkit-filter: blur(5px);\r\n    }\r\n\r\n    100% {\r\n        -webkit-filter: blur(0px);\r\n    }\r\n}\r\n\r\n@-webkit-keyframes keepblur {\r\n    0% {\r\n        -webkit-filter: blur(0px);\r\n    }\r\n\r\n    100% {\r\n        -webkit-filter: blur(15px);\r\n    }\r\n}\r\n\r\n@keyframes keepblur {\r\n    0% {\r\n        -webkit-filter: blur(0px);\r\n    }\r\n\r\n    100% {\r\n        -webkit-filter: blur(15px);\r\n    }\r\n}\r\n\r\n.scroller[data-v-6e891a3c] {\r\n    background: #eaeaea;\r\n    position: relative;\n}\r\n\r\n.vertical-scroller[data-v-6e891a3c] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\r\n\r\n.horizontal-scroller[data-v-6e891a3c] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\r\n\r\n.scroller-content[data-v-6e891a3c] {\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-6e891a3c] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\r\n\r\n.horizontal-container[data-v-6e891a3c] {\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-6e891a3c] {\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-6e891a3c] {\r\n    display: inline-block;\r\n    height: 50px;\n}\r\n\r\n.horizontal-cell[data-v-6e891a3c] {\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-6e891a3c] {\r\n    height: 20px;\n}\r\n\r\n.cell-text[data-v-6e891a3c] {\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    z-index: 100000000;\r\n    pointer-events: none;\r\n}\r\n\r\n.alert-overlay h3 {\r\n    color: #fff;\r\n    font-weight: 400;\r\n}\r\n\r\n.preload-overlay {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    top: 0px;\r\n    left: 0px;\r\n    background: #eaeaeabb;\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    z-index: 100000000;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n.preload-overlay img {}\r\n\r\n.preloadvisible {\r\n    opacity: 1;\r\n    transition: opacity 2.0s cubic-bezier(0.23, 1, 0.32, 1) 0s;\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.animate-next {\r\n    /* transform: translate(0px, -800px);\r\n    transition: transform 2.0s cubic-bezier(0.23, 1, 0.32, 1) 200ms; */\r\n    /* transition: blur 2.0s cubic-bezier(0.23, 1, 0.32, 1) 0ms; */\r\n    -webkit-animation: keepblur 2000ms;\r\n            animation: keepblur 2000ms;\r\n\r\n    /* transition: opacity 3.0s cubic-bezier(0.23, 1, 0.32, 1) 2s;\r\n    opacity: 0.0;   */\r\n}\r\n\r\n.animate-previous {\r\n    /* transform: translate(0px, 800px);\r\n    transition: transform 2.0s cubic-bezier(0.23, 1, 0.32, 1) 200ms; */\r\n    -webkit-animation: keepblur 2000ms;\r\n            animation: keepblur 2000ms;\r\n}\r\n\r\n.noselect {\r\n    -webkit-touch-callout: none;\r\n    /* iOS Safari */\r\n    -webkit-user-select: none;\r\n    /* Safari */\r\n    /* Konqueror HTML */\r\n    /* Old versions of Firefox */\r\n    -ms-user-select: none;\r\n    /* Internet Explorer/Edge */\r\n    user-select: none;\r\n    /* Non-prefixed version, currently\r\n                                    supported by Chrome, Edge, Opera and Firefox */\r\n}\r\n\r\n@-webkit-keyframes blur {\r\n    0% {\r\n        -webkit-filter: blur(0px);\r\n    }\r\n\r\n    50% {\r\n        -webkit-filter: blur(5px);\r\n    }\r\n\r\n    100% {\r\n        -webkit-filter: blur(0px);\r\n    }\r\n}\r\n\r\n@keyframes blur {\r\n    0% {\r\n        -webkit-filter: blur(0px);\r\n    }\r\n\r\n    50% {\r\n        -webkit-filter: blur(5px);\r\n    }\r\n\r\n    100% {\r\n        -webkit-filter: blur(0px);\r\n    }\r\n}\r\n\r\n@-webkit-keyframes keepblur {\r\n    0% {\r\n        -webkit-filter: blur(0px);\r\n    }\r\n\r\n    100% {\r\n        -webkit-filter: blur(15px);\r\n    }\r\n}\r\n\r\n@keyframes keepblur {\r\n    0% {\r\n        -webkit-filter: blur(0px);\r\n    }\r\n\r\n    100% {\r\n        -webkit-filter: blur(15px);\r\n    }\r\n}\r\n\r\n.scroller[data-v-12a5c070] {\r\n    background: #eaeaea;\r\n    position: relative;\n}\r\n\r\n.vertical-scroller[data-v-12a5c070] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\r\n\r\n.horizontal-scroller[data-v-12a5c070] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\r\n\r\n.scroller-content[data-v-12a5c070] {\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-12a5c070] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\r\n\r\n.horizontal-container[data-v-12a5c070] {\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-12a5c070] {\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-12a5c070] {\r\n    display: inline-block;\r\n    height: 50px;\n}\r\n\r\n.horizontal-cell[data-v-12a5c070] {\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-12a5c070] {\r\n    height: 20px;\n}\r\n\r\n.cell-text[data-v-12a5c070] {\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-6e891a3c";
+    script.__scopeId = "data-v-12a5c070";
 
@@ -807,0 +807,0 @@ exports["default"] = script;

dist/esm/index.js

@@ -5,7 +5,7 @@
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.1.1
+ // v0.1.2
  // MIT License
 
-import { s as script } from './Scroller-256cca9e.js';
-export { s as Scroller } from './Scroller-256cca9e.js';
+import { s as script } from './Scroller-7ff5d7d1.js';
+export { s as Scroller } from './Scroller-7ff5d7d1.js';
 import 'vue';
@@ -12,0 +12,0 @@

dist/esm/scroller.js

@@ -5,7 +5,7 @@
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.1.1
+ // v0.1.2
  // MIT License
 
-import { s as script } from './Scroller-256cca9e.js';
-export { s as default } from './Scroller-256cca9e.js';
+import { s as script } from './Scroller-7ff5d7d1.js';
+export { s as default } from './Scroller-7ff5d7d1.js';
 import 'vue';

package.json

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

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

Improved metrics

Total package byte prevSize

709157

increased by9.62%

Number of package files

42

increased by5%

Lines of code

10246

increased by16.3%

Worsened metrics

Number of low supply chain risk alerts

14

increased by16.67%

No dependency changes