Socket
Socket
Sign inDemoInstall

chronocraft-scroller-vue

Package Overview
Dependencies
23
Maintainers
1
Versions
52
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.1.19 to 0.1.20

dist/cjs/_rollupPluginBabelHelpers-58b5939e.js
dist/cjs/style-inject.es-549ae26b.js
dist/cjs/VScroller-f486905b.js
dist/cjs/VScrollerRow-58c5279f.js
dist/cjs/VScrollerScrollBar-d42d5faa.js
dist/esm/_rollupPluginBabelHelpers-8e522d0f.js
dist/esm/style-inject.es-19e86df4.js
dist/esm/VScroller-90bf03d9.js
dist/esm/VScrollerRow-e5d8fa8f.js
dist/esm/VScrollerScrollBar-0f77a3ab.js

2

dist/chronocraftscrollervue-browser.min.js

@@ -1,1 +0,1 @@

var chronocraftscrollervue=function(e,t){"use strict";function r(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function n(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var l=t.defineComponent({name:"VScrollerScrollBar",components:{},props:{modelValue:{type:Array,default:function(){return[]}},active:{type:Boolean,default:!0},viewportId:{type:String,default:""},orientation:{type:String,default:"vertical"},mode:{type:String,default:"normal"},trackWidth:{type:Number,default:12}},setup:function(e,r){var n,o,l,i,a,c,s,d,u,p=null,f=!1,h=-1e5,v=Math.floor(999999*Math.random())+1e6,m=0,g=t.ref(0),b=t.ref("scrollbar_"+v);function w(e){var t,n=Math.max(d,Math.min(e,u));g.value=n,t=g.value-d,m=100*t/(u-d),r.emit("on-change",m)}function y(e){m=e,g.value=m*(u-d)/100,h=-1e5,r.emit("on-change",m)}return t.onMounted((function(){p=document.querySelector("#"+e.viewportId),e.active&&""!==e.viewportId&&(document.querySelector("#"+b.value),o=document.querySelector("#"+b.value+" .scroller-scrollbar-track"),l=document.querySelector("#"+b.value+" .scroller-scrollbar-thumb"),i=document.querySelector("#"+b.value+" .scroller-scrollbar-up"),n=o.clientWidth,a=o.clientHeight,c=l.clientHeight,s=i.clientHeight,"horizontal"===e.orientation?(a=o.clientWidth,c=l.clientWidth,s=i.clientWidth,n=o.clientHeight,p.style.height="calc(100% - "+n+"px)"):p.style.width="calc(100% - "+n+"px)",d=s,u=a-s-c,g.value=s,"infinite"===e.mode&&y(50),l.addEventListener("mousedown",(function(e){f=!0})),document.addEventListener("mousemove",(function(t){if(f){if(t.preventDefault(),-1e5!==h){var r=t.clientY-h;"horizontal"===e.orientation?(r=t.clientX-h,w(g.value-r)):w(g.value+r)}h=t.clientY,"horizontal"===e.orientation&&(h=t.clientX)}})),document.addEventListener("mouseup",(function(t){f=!1,"infinite"===e.mode&&y(50)})))})),{scrollbarId:b,scrollbarThumbPosition:g,ScrollBackwardsClicked:function(){r.emit("on-backwards-clicked"),e.mode},ScrollForwardClicked:function(){r.emit("on-forward-clicked"),e.mode}}}}),i=["id"];function a(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}a(".scroller {\r\n height: 100%;\n}\n.scroller-viewport {\r\n height: 100%;\r\n margin: 0px auto;\r\n overflow-y: hidden;\r\n overflow-x: hidden;\r\n border: 0px solid #bdbdbd;\r\n position: relative;\r\n margin: 0px;\n}\n.scroller-container {\r\n width: 100%;\r\n display: -webkit-flex;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -webkit-justify-content: start;\r\n -ms-flex-pack: start;\r\n justify-content: 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; \r\n /* transition: transform 100ms ease-out; */\r\n will-change: transform, opacity;\r\n position: relative;\n}\n/* Only For Firefox */\n@supports (-moz-appearance:none) {\n.scroller-container {\r\n transition: -webkit-transform 0ms ease-out;\r\n transition: transform 0ms ease-out;\r\n transition: transform 0ms ease-out, -webkit-transform 0ms ease-out;\r\n will-change: transform, opacity;\r\n\r\n transition-timing-function: linear;\r\n -moz-transition-timing-function: linear; /* Firefox 4 */\r\n -moz-transition-delay: 0ms; /* Firefox 4 */\n}\n}\n/* Microsoft Edge Browser 12-18 */\n@supports (-ms-ime-align:auto) {\n.scroller-container {\r\n transition: -webkit-transform 0ms ease-out;\r\n transition: transform 0ms ease-out;\r\n transition: transform 0ms ease-out, -webkit-transform 0ms ease-out;\r\n will-change: transform, opacity;\n}\n}\n.scroller-row-v {\r\n position: absolute;\r\n width: 100%;\r\n -webkit-flex: 1 1 auto;\r\n -ms-flex: 1 1 auto;\r\n flex: 1 1 auto;\r\n display: -webkit-flex;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -ms-flex-line-pack: stretch;\r\n -webkit-align-content: stretch;\r\n align-content: stretch;\r\n -webkit-align-items: stretch;\r\n -ms-flex-align: stretch;\r\n align-items: stretch;\r\n -webkit-justify-content: space-evenly;\r\n -ms-flex-pack: space-evenly;\r\n justify-content: space-evenly;\n}\n.scroller-cell-v {\r\n background-color: #9abacc; \r\n text-align: center;\r\n line-height: 40px;\r\n font-size: 9pt;\r\n font-family: Arial;\r\n color: #ffffff;\r\n width: auto;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n height: -webkit-fit-content;\r\n height: -moz-fit-content;\r\n height: fit-content;\r\n padding: 4px;\r\n margin: 3px;\n}\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 */\n}\n.scroller-scrollbar {\r\n font-family: verdana;\r\n height: 100%;\r\n position: absolute;\r\n top: 0px;\r\n right: 0px;\r\n width: 12px;\n}\n.scroller-scrollbar-down {\r\n background-color: #33ccaa;\r\n bottom: 0;\r\n cursor: pointer;\r\n position: absolute;\r\n right: 0;\r\n border-radius: 10px;\r\n width: 100%;\n}\n.scroller-scrollbar-thumb {\r\n background-color: #22aabb;\r\n cursor: pointer;\r\n position: absolute;\r\n right: 0;\r\n border-radius: 10px;\r\n width: 100%;\r\n height: 30px;\n}\n.scroller-scrollbar-thumb-down {\r\n background-color: #1199aa;\n}\n.scroller-scrollbar-thumb-over {\r\n background-color: #33bbcc;\n}\n.scroller-scrollbar-track {\r\n background-color: #dedede;\r\n cursor: pointer;\r\n height: 100%;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n width: 100%;\n}\n.scroller-scrollbar-up {\r\n background-color: #33ccaa;\r\n cursor: pointer;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n border-radius: 10px;\r\n width: 100%;\n}\r\n"),l.render=function(e,r,n,o,l,a){return e.active?(t.openBlock(),t.createElementBlock("div",{key:0,id:e.scrollbarId,class:"scroller-scrollbar",style:t.normalizeStyle(["vertical"===e.orientation?{width:e.trackWidth+"px",height:"100%",top:"0px",right:"0px"}:{width:"100%",height:e.trackWidth+"px",bottom:"0px",right:"0px",top:"unset"}])},[t.createElementVNode("div",{class:"scroller-scrollbar-track",style:t.normalizeStyle(["vertical"===e.orientation?{width:e.trackWidth+"px",height:"100%",top:"0px",right:"0px"}:{width:"100%",height:e.trackWidth+"px",bottom:"0px",right:"0px",top:"unset"}])},null,4),t.createElementVNode("div",{class:"scroller-scrollbar-thumb",style:t.normalizeStyle(["vertical"===e.orientation?{width:"100%",height:"30px",top:e.scrollbarThumbPosition+"px",right:"0px"}:{width:"30px",height:"100%",bottom:"0px",right:e.scrollbarThumbPosition+"px",top:"unset"}])},null,4),t.createElementVNode("div",{class:"scroller-scrollbar-up",onClick:r[0]||(r[0]=function(t){return e.ScrollBackwardsClicked()}),style:t.normalizeStyle(["vertical"===e.orientation?{height:e.trackWidth+"px",width:"100%",top:"0px",right:"0px"}:{width:e.trackWidth+"px",height:"100%",bottom:"0px",top:"unset",left:"0px",right:"unset"}])},null,4),t.createElementVNode("div",{class:"scroller-scrollbar-down",onClick:r[1]||(r[1]=function(t){return e.ScrollForwardClicked()}),style:t.normalizeStyle(["vertical"===e.orientation?{height:e.trackWidth+"px",width:"100%"}:{width:e.trackWidth+"px",height:"100%"}])},null,4)],12,i)):t.createCommentVNode("",!0)};var c=t.defineComponent({name:"VScrollerRow",props:{gap:{type:Number,default:0},calculatedRowSize:{type:Number,default:0},orientation:{type:String,default:"vertical"},row:{type:Object,default:function(){return{cells:{},index:0,top:"0px",left:"0px",width:"0px"}}}},setup:function(e,r){var n=Math.floor(999999*Math.random())+1e6,o=t.ref("row_"+n),l=t.ref("row");return"horizontal"===e.orientation&&(l.value="column"),t.onMounted((function(){var e=document.getElementById(o.value);r.emit("on-rendered",e.clientHeight)})),{rowId:o,flexDirection:l}}}),s=["id"],d=["id"];c.render=function(e,r,n,o,l,i){return t.openBlock(),t.createElementBlock("div",{class:"scroller-row-v",id:e.rowId,style:t.normalizeStyle([{"margin-left":e.gap+"px"},{"background-color":"#eaeaea"},{top:e.row.top,left:e.row.left,width:e.row.width,height:e.row.height,"flex-direction":e.flexDirection}])},[t.renderSlot(e.$slots,"row",{data:e.row},(function(){return[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.row.cells,(function(r,n){return t.openBlock(),t.createElementBlock("div",{class:"scroller-cell-v",key:n,id:"item"+r.id,style:t.normalizeStyle([{left:r.left,top:r.top,"flex-basis":r.flexbasis}])},[t.renderSlot(e.$slots,"cell",{data:r},(function(){return[t.createElementVNode("span",null,t.toDisplayString(r.index),1)]}))],12,d)})),128))]}))],12,s)};var u=t.defineComponent({name:"VScroller",components:{VScrollerScrollBar:l,VScrollerRow:c},props:{modelValue:{type:Object,default:function(){return{}}},height:{type:Number,default:-1},orientation:{type:String,default:"vertical"},numberOfColumns:{type:Number,default:5},numberOfRows:{type:Number,default:5},sidegap:{type:Number,default:5},cellHeight:{type:Number,default:50},cellWidth:{type:Number,default:50},cellSquared:{type:Boolean,default:!1},scrollSpeed:{type:Number,default:6},isInfinite:{type:Boolean,default:!1},hasScrollbar:{type:Boolean,default:!0}},setup:function(e,r){var o=Math.floor(999999*Math.random())+1e6,l=t.ref("scroller_"+o),i=t.ref("container_"+o),a=t.ref("viewport_"+o),c=t.ref(e.cellWidth),s=t.ref(e.cellHeight),d=t.ref(0),u=t.ref({}),p=t.ref([]),f=t.ref([]),h=t.ref(0),v=t.ref({}),m=t.ref(e.cellHeight),g=d.value,b=1,w=0,y=0,x=0,k=0,S=0,O=0,z=0,B=0,I=0,j="",E=0,C=.95,V=0,M=null,N=null,W="Y",F=!1;d.value;var H=d.value,P=null,q=0,L=0,D=e.scrollSpeed,R={},_=s.value,T=0,Y=50,A=null,X={},K=null;function G(){var e=q*D,t=d.value;d.value+=-e,E=d.value-t}function $(){M&&(M.style.transform="translate"+W+"("+d.value+"px)",d.value==g?L=1:d.value>g&&(L=-1),function(t){if(N){var r=N.clientHeight,n=_+2*e.sidegap;"horizontal"===e.orientation&&(r=N.clientWidth),n=m.value;var o=0;if(0===t&&0!==L&&(t=L),-1===t)o=-x*n-d.value-r,I*n+d.value+parseInt(Y/T)>-parseInt(Y/T)*n&&U(t),o<-n&&J(t,_);else if(1===t){o=(y-1)*n+d.value-r,B*n+d.value-r+parseInt(Y/T)<parseInt(Y/T)*n+r&&U(t),o<0&&J(t,_)}}}(q),g=d.value)}function U(e){1===e?r.emit("on-update-data-next",(function(e){Y=Object.keys(e).length,O+=Object.keys(e).length,B+=parseInt(Object.keys(e).length/T);for(var t=0;t<Math.abs(w-z);t++)R[z+t]&&delete R[z+t];z=w,I=x,R=n(n({},e),R)}),w,O):r.emit("on-update-data-previous",(function(e){Y=Object.keys(e).length,z-=Object.keys(e).length,I-=parseInt(Object.keys(e).length/T);for(var t=0;t<Math.abs(b-O);t++)R[O+t]&&delete R[O+t];O=b,B=y,R=n(n({},e),R)}),z,b)}function J(t,r){if(Object.keys(R).length>0)if(1===t){for(var n=[],o=T-k,l=0;l<o;l++){R[b+l]&&R[b+l]&&n.push({id:R[b+l].id,item:null,index:b+l})}if(n.length>0)for(l=0;l<n.length;l++){0===k&&y++;var i=0,a=y*m.value,c=l*(r+2*e.sidegap),s=0;"horizontal"===e.orientation&&(i=y*m.value,a=0,c=0,s=l*(r+2*e.sidegap)),0===k&&Q(a,i,y);var d=n[l].index;u.value[d]={id:n[l].id};var p=ee();if(p&&(p.cells[d]||Z(s,c,d)),k++,b++,k>T-1){k=0;var f=!1;for(l=0;l<n.length;l++)delete u.value[w],w++,z++,f||(v.value[x]&&delete v.value[x],f=!0);x++,I++}}else 0===q&&0!==L&&(L=0);for(l=0;l<n.length;l++)delete R[n[l].index];n=[]}else{var h=T-S;for(n=[],l=1;l<=h;l++){null!=R[w-l]&&R[w-l]&&n.push({id:R[w-l].id,item:null,index:w-l})}if(n.length>0)for(l=0;l<n.length;l++){0===S&&x--;i=0;var g=x*m.value,j=(c=(T-1-S)*(r+2*e.sidegap),0);"horizontal"===e.orientation&&(i=x*m.value,g=0,c=0,j=(T-1-S)*(r+2*e.sidegap)),0===S&&Q(g,i,x);var E=n[l].index;u.value[E]={id:n[l].id};var C=ee();if(C&&(C.cells[E]||Z(j,c,E)),w--,++S>T-1){S=0;var V=!1;for(l=0;l<n.length;l++)u.value[b-1],delete u.value[b-1],b--,O--,V||(v.value[y]&&delete v.value[y],V=!0);y--,B--}}else 0===q&&0!==L&&(L=0);for(l=0;l<n.length;l++)n[l]&&delete R[n[l].index];n=[]}}function Q(t,r,n,o){var l=parseInt(_+2*e.sidegap)+"px",i="calc(100% - "+2*e.sidegap+"px)";"horizontal"===e.orientation&&(l="calc(100% - "+2*e.sidegap+"px)",i=parseInt(_+2*e.sidegap)+"px"),v.value[n]={index:n,top:t+"px",left:r+"px",width:i,height:l,cells:{}},K=v.value[n]}function Z(e,t,r){var n=e,o=t;ee().cells[r]={index:r,id:"item"+u.value[r].id,left:o+"px",flexbasis:100/T+"%",top:n+"px"}}function ee(){return K}function te(){cancelAnimationFrame(j),j=requestAnimationFrame(re)}function re(){d.value+=E,"horizontal"===e.orientation&&(C=.9),E*=C,Math.abs(E)>.5&&(j=requestAnimationFrame(re))}return"horizontal"===e.orientation&&(W="X",m.value=e.cellWidth),window.addEventListener("wheel",(function(t){var r=Date.now()-V;D=2*e.scrollSpeed,r<10&&(D=6*e.scrollSpeed);var n=Math.sign(t.deltaY)*D,o=d.value;d.value+=-n,E=d.value-o,te(),V=Date.now()})),window.addEventListener("resize",(function(t){e.cellSquared&&(Object.keys(v.value).length>0&&(X=Object.assign({},v.value)),v.value={},m.value=N.clientWidth/T,"horizontal"===e.orientation&&(m.value=N.clientHeight/T),clearTimeout(A),A=setTimeout((function(){v.value=X}),500))})),t.watch((function(){return e.modelValue}),(function(t,r){0===Object.keys(u.value).length&&Object.keys(t).length>0&&(u.value=t,function(){b=Object.keys(u.value).reduce((function(e,t){return u.value[t]<u.value[e]?t:e})),w=b,y=-1,x=0,k=0,S=0,_=s.value,T=e.numberOfColumns,e.cellSquared&&(m.value=N.clientWidth/T),"horizontal"===e.orientation&&(_=c.value,T=e.numberOfRows,e.cellSquared&&(m.value=N.clientHeight/T));var t=parseInt(parseInt(Object.keys(u.value).length/2)/T)*(_+2*e.sidegap);for(var r in d.value-=t,u.value){0===k&&y++;var n=0,o=y*m.value,l=k*(_+2*e.sidegap),i=0;"horizontal"===e.orientation&&(n=y*m.value,o=0,l=0,i=k*(_+2*e.sidegap)),0===k&&Q(o,n,y);var a=ee();a&&(a.cells[r]||Z(i,l,r)),b++,++k>T-1&&(k=0)}O=b,z=w,B=y,I=x,M.style.transform="translate"+W+"("+d.value+"px) "}())}),{deep:!0}),t.onMounted((function(){console.log("onMounted"),M=document.getElementById(i.value),(N=document.getElementById(a.value)).addEventListener("mousedown",(function(t){F=!0,H=t.pageY,"horizontal"===e.orientation&&(H=t.pageX)})),document.addEventListener("mouseup",(function(e){F=!1,Math.abs(E)>30&&(E=30*Math.sign(E)),te()})),document.addEventListener("mousemove",(function(t){if(F){t.preventDefault();var r=t.pageY-H;"horizontal"===e.orientation?(r=t.pageX-H,H=t.pageX):H=t.pageY,E=r,d.value+=1*r}})),N.addEventListener("mouseleave",(function(e){F=!1})),setInterval((function(){$()}),5),r.emit("on-initilized")})),t.onBeforeUpdate((function(){f.value=[]})),{scrollerId:l,containerId:i,viewportId:a,cellWidthVal:c,cellHeightVal:s,translatePosition:d,cellsdata:u,alldata:v,cells:p,divs:f,scrollbarPosition:h,calculatedRowSize:m,renderKey:0,GetContainerHeight:function(){var t=e.height+"px";return-1===e.height&&(t="100%"),t},OnScrollBarChanged:function(t){D=e.scrollSpeed,(t<=30||t>70)&&(D=3*e.scrollSpeed),q=0,t<50?(q=-1,L=-1,"horizontal"===e.orientation&&(q=1,L=1)):t>50&&(q=1,L=1,"horizontal"===e.orientation&&(q=-1,L=-1)),0!==q?null===P&&(P=setInterval((function(){G()}),10)):(clearInterval(P),P=null)},onBackwardsClicked:function(){q=-1,L=-1,D=3*e.scrollSpeed,G(),te(),q=0,D=e.scrollSpeed},onForwardClicked:function(){q=1,L=1,D=3*e.scrollSpeed,G(),te(),q=0,D=e.scrollSpeed}}}}),p=["id"],f=["id"],h=["id"];a('\r\n/* @import "./scroller.css"; */\r\n'),u.render=function(e,r,n,o,l,i){var a=t.resolveComponent("VScrollerRow"),c=t.resolveComponent("VScrollerScrollBar");return t.openBlock(),t.createElementBlock("div",{id:e.scrollerId,class:"scroller noselect"},[t.createElementVNode("div",{id:e.viewportId,class:"scroller-viewport"},[(t.openBlock(),t.createElementBlock("div",{id:e.containerId,key:e.renderKey,class:"scroller-container",style:t.normalizeStyle([{height:e.GetContainerHeight()}])},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.alldata,(function(r,n){return t.openBlock(),t.createBlock(a,{key:n,calculatedRowSize:e.calculatedRowSize,sidegap:e.sidegap,row:r,orientation:e.orientation},null,8,["calculatedRowSize","sidegap","row","orientation"])})),128))],12,h))],8,f),t.createVNode(c,{active:e.hasScrollbar,orientation:e.orientation,mode:e.isInfinite?"infinite":"normal",onOnChange:e.OnScrollBarChanged,onOnBackwardsClicked:e.onBackwardsClicked,onOnForwardClicked:e.onForwardClicked,viewportId:e.viewportId},null,8,["active","orientation","mode","onOnChange","onOnBackwardsClicked","onOnForwardClicked","viewportId"])],8,p)};var v={VScroller:u,VScrollerScrollBar:l,VScrollerRow:c},m=Object.freeze({__proto__:null,default:v});const g={install(e){Object.entries(m).forEach((([t,r])=>{e.component(t,r)}))}};return e.default=g,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue);
var chronocraftscrollervue=function(e,t){"use strict";function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function r(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var l=t.defineComponent({name:"VScrollerScrollBar",components:{},props:{modelValue:{type:Array,default:function(){return[]}},active:{type:Boolean,default:!0},viewportId:{type:String,default:""},orientation:{type:String,default:"vertical"},mode:{type:String,default:"normal"},trackWidth:{type:Number,default:12}},setup:function(e,n){var r,o,l,i,a,c,s,d,u,p=null,f=!1,h=-1e5,v=Math.floor(999999*Math.random())+1e6,m=0,g=t.ref(0),b=t.ref("scrollbar_"+v);function w(e){var t,r=Math.max(d,Math.min(e,u));g.value=r,t=g.value-d,m=100*t/(u-d),n.emit("on-change",m)}function y(e){m=e,g.value=m*(u-d)/100,h=-1e5,n.emit("on-change",m)}return t.onMounted((function(){p=document.querySelector("#"+e.viewportId),e.active&&""!==e.viewportId&&(document.querySelector("#"+b.value),o=document.querySelector("#"+b.value+" .scroller-scrollbar-track"),l=document.querySelector("#"+b.value+" .scroller-scrollbar-thumb"),i=document.querySelector("#"+b.value+" .scroller-scrollbar-up"),r=o.clientWidth,a=o.clientHeight,c=l.clientHeight,s=i.clientHeight,"horizontal"===e.orientation?(a=o.clientWidth,c=l.clientWidth,s=i.clientWidth,r=o.clientHeight,p.style.height="calc(100% - "+r+"px)"):p.style.width="calc(100% - "+r+"px)",d=s,u=a-s-c,g.value=s,"infinite"===e.mode&&y(50),l.addEventListener("mousedown",(function(e){f=!0})),document.addEventListener("mousemove",(function(t){if(f){if(t.preventDefault(),-1e5!==h){var n=t.clientY-h;"horizontal"===e.orientation?(n=t.clientX-h,w(g.value-n)):w(g.value+n)}h=t.clientY,"horizontal"===e.orientation&&(h=t.clientX)}})),document.addEventListener("mouseup",(function(t){f=!1,"infinite"===e.mode&&y(50)})))})),{scrollbarId:b,scrollbarThumbPosition:g,ScrollBackwardsClicked:function(){n.emit("on-backwards-clicked"),e.mode},ScrollForwardClicked:function(){n.emit("on-forward-clicked"),e.mode}}}}),i=["id"];function a(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}a(".scroller {\r\n height: 100%;\n}\n.scroller-viewport {\r\n height: 100%;\r\n margin: 0px auto;\r\n overflow-y: hidden;\r\n overflow-x: hidden;\r\n border: 0px solid #bdbdbd;\r\n position: relative;\r\n margin: 0px;\n}\n.scroller-container {\r\n width: 100%;\r\n display: -webkit-flex;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -webkit-justify-content: start;\r\n -ms-flex-pack: start;\r\n justify-content: 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; \r\n /* transition: transform 100ms ease-out; */\r\n will-change: transform, opacity;\r\n position: relative;\n}\n/* Only For Firefox */\n@supports (-moz-appearance:none) {\n.scroller-container {\r\n transition: -webkit-transform 0ms ease-out;\r\n transition: transform 0ms ease-out;\r\n transition: transform 0ms ease-out, -webkit-transform 0ms ease-out;\r\n will-change: transform, opacity;\r\n\r\n transition-timing-function: linear;\r\n -moz-transition-timing-function: linear; /* Firefox 4 */\r\n -moz-transition-delay: 0ms; /* Firefox 4 */\n}\n}\n/* Microsoft Edge Browser 12-18 */\n@supports (-ms-ime-align:auto) {\n.scroller-container {\r\n transition: -webkit-transform 0ms ease-out;\r\n transition: transform 0ms ease-out;\r\n transition: transform 0ms ease-out, -webkit-transform 0ms ease-out;\r\n will-change: transform, opacity;\n}\n}\n.scroller-row-v {\r\n position: absolute;\r\n width: 100%;\r\n -webkit-flex: 1 1 auto;\r\n -ms-flex: 1 1 auto;\r\n flex: 1 1 auto;\r\n display: -webkit-flex;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -ms-flex-line-pack: stretch;\r\n -webkit-align-content: stretch;\r\n align-content: stretch;\r\n -webkit-align-items: stretch;\r\n -ms-flex-align: stretch;\r\n align-items: stretch;\r\n -webkit-justify-content: space-evenly;\r\n -ms-flex-pack: space-evenly;\r\n justify-content: space-evenly;\n}\n.scroller-cell-v {\r\n background-color: #9abacc; \r\n text-align: center;\r\n line-height: 40px;\r\n font-size: 9pt;\r\n font-family: Arial;\r\n color: #ffffff;\r\n width: auto;\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n height: -webkit-fit-content;\r\n height: -moz-fit-content;\r\n height: fit-content;\r\n padding: 4px;\r\n margin: 3px;\n}\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 */\n}\n.scroller-scrollbar {\r\n font-family: verdana;\r\n height: 100%;\r\n position: absolute;\r\n top: 0px;\r\n right: 0px;\r\n width: 12px;\n}\n.scroller-scrollbar-down {\r\n background-color: #33ccaa;\r\n bottom: 0;\r\n cursor: pointer;\r\n position: absolute;\r\n right: 0;\r\n border-radius: 10px;\r\n width: 100%;\n}\n.scroller-scrollbar-thumb {\r\n background-color: #22aabb;\r\n cursor: pointer;\r\n position: absolute;\r\n right: 0;\r\n border-radius: 10px;\r\n width: 100%;\r\n height: 30px;\n}\n.scroller-scrollbar-thumb-down {\r\n background-color: #1199aa;\n}\n.scroller-scrollbar-thumb-over {\r\n background-color: #33bbcc;\n}\n.scroller-scrollbar-track {\r\n background-color: #dedede;\r\n cursor: pointer;\r\n height: 100%;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n width: 100%;\n}\n.scroller-scrollbar-up {\r\n background-color: #33ccaa;\r\n cursor: pointer;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n border-radius: 10px;\r\n width: 100%;\n}\r\n"),l.render=function(e,n,r,o,l,a){return e.active?(t.openBlock(),t.createElementBlock("div",{key:0,id:e.scrollbarId,class:"scroller-scrollbar",style:t.normalizeStyle(["vertical"===e.orientation?{width:e.trackWidth+"px",height:"100%",top:"0px",right:"0px"}:{width:"100%",height:e.trackWidth+"px",bottom:"0px",right:"0px",top:"unset"}])},[t.createElementVNode("div",{class:"scroller-scrollbar-track",style:t.normalizeStyle(["vertical"===e.orientation?{width:e.trackWidth+"px",height:"100%",top:"0px",right:"0px"}:{width:"100%",height:e.trackWidth+"px",bottom:"0px",right:"0px",top:"unset"}])},null,4),t.createElementVNode("div",{class:"scroller-scrollbar-thumb",style:t.normalizeStyle(["vertical"===e.orientation?{width:"100%",height:"30px",top:e.scrollbarThumbPosition+"px",right:"0px"}:{width:"30px",height:"100%",bottom:"0px",right:e.scrollbarThumbPosition+"px",top:"unset"}])},null,4),t.createElementVNode("div",{class:"scroller-scrollbar-up",onClick:n[0]||(n[0]=function(t){return e.ScrollBackwardsClicked()}),style:t.normalizeStyle(["vertical"===e.orientation?{height:e.trackWidth+"px",width:"100%",top:"0px",right:"0px"}:{width:e.trackWidth+"px",height:"100%",bottom:"0px",top:"unset",left:"0px",right:"unset"}])},null,4),t.createElementVNode("div",{class:"scroller-scrollbar-down",onClick:n[1]||(n[1]=function(t){return e.ScrollForwardClicked()}),style:t.normalizeStyle(["vertical"===e.orientation?{height:e.trackWidth+"px",width:"100%"}:{width:e.trackWidth+"px",height:"100%"}])},null,4)],12,i)):t.createCommentVNode("",!0)};var c=t.defineComponent({name:"VScrollerRow",props:{gap:{type:Number,default:0},calculatedRowSize:{type:Number,default:0},orientation:{type:String,default:"vertical"},row:{type:Object,default:function(){return{cells:{},index:0,top:"0px",left:"0px",width:"0px"}}}},setup:function(e,n){var r=Math.floor(999999*Math.random())+1e6,o=t.ref("row_"+r),l=t.ref("row");return"horizontal"===e.orientation&&(l.value="column"),t.onMounted((function(){var e=document.getElementById(o.value);n.emit("on-rendered",e.clientHeight)})),{rowId:o,flexDirection:l}}}),s=["id"],d=["id"];c.render=function(e,n,r,o,l,i){return t.openBlock(),t.createElementBlock("div",{class:"scroller-row-v",id:e.rowId,style:t.normalizeStyle([{"margin-left":e.gap+"px"},{"background-color":"#eaeaea"},{top:e.row.top,left:e.row.left,width:e.row.width,height:e.row.height,"flex-direction":e.flexDirection}])},[t.renderSlot(e.$slots,"row",{data:e.row},(function(){return[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.row.cells,(function(n,r){return t.openBlock(),t.createElementBlock("div",{class:"scroller-cell-v",key:r,id:"item"+n.id,style:t.normalizeStyle([{left:n.left,top:n.top,"flex-basis":n.flexbasis}])},[t.renderSlot(e.$slots,"cell",{data:n},(function(){return[t.createElementVNode("span",null,t.toDisplayString(n.index),1)]}))],12,d)})),128))]}))],12,s)};var u=t.defineComponent({name:"VScroller",components:{VScrollerScrollBar:l,VScrollerRow:c},props:{modelValue:{type:Object,default:function(){return{}}},height:{type:Number,default:-1},orientation:{type:String,default:"vertical"},numberOfColumns:{type:Number,default:5},numberOfRows:{type:Number,default:5},sidegap:{type:Number,default:5},cellHeight:{type:Number,default:50},cellWidth:{type:Number,default:50},cellSquared:{type:Boolean,default:!1},scrollSpeed:{type:Number,default:6},isInfinite:{type:Boolean,default:!1},hasScrollbar:{type:Boolean,default:!0}},setup:function(e,n){var o=Math.floor(999999*Math.random())+1e6,l=t.ref("scroller_"+o),i=t.ref("container_"+o),a=t.ref("viewport_"+o),c=t.ref(e.cellWidth),s=t.ref(e.cellHeight),d=t.ref(0),u=t.ref({}),p=t.ref([]),f=t.ref([]),h=t.ref(0),v=t.ref({}),m=t.ref(e.cellHeight),g=d.value,b=1,w=0,y=0,x=0,k=0,S=0,O=0,z=0,B=0,I=0,j="",E=0,C=.95,M=0,N=null,V=null,W="Y",F=!1;d.value;var H=d.value,P=null,q=0,L=0,D=e.scrollSpeed,_={},R=s.value,T=0,Y=50,A=null,X={},K=null;function G(){var e=q*D,t=d.value;d.value+=-e,E=d.value-t}function $(){N&&(N.style.transform="translate"+W+"("+d.value+"px)",d.value==g?L=1:d.value>g&&(L=-1),function(t){if(V){var n=V.clientHeight,r=R+2*e.sidegap;"horizontal"===e.orientation&&(n=V.clientWidth),r=m.value;var o=0;if(0===t&&0!==L&&(t=L),-1===t)o=-x*r-d.value-n,I*r+d.value+parseInt(Y/T)>-parseInt(Y/T)*r&&U(t),o<-r&&J(t,R);else if(1===t){o=(y-1)*r+d.value-n,B*r+d.value-n+parseInt(Y/T)<parseInt(Y/T)*r+n&&U(t),o<0&&J(t,R)}}}(q),g=d.value)}function U(e){1===e?n.emit("on-update-data-next",(function(e){Y=Object.keys(e).length,O+=Object.keys(e).length,B+=parseInt(Object.keys(e).length/T);for(var t=0;t<Math.abs(w-z);t++)_[z+t]&&delete _[z+t];z=w,I=x,_=r(r({},e),_)}),w,O):n.emit("on-update-data-previous",(function(e){Y=Object.keys(e).length,z-=Object.keys(e).length,I-=parseInt(Object.keys(e).length/T);for(var t=0;t<Math.abs(b-O);t++)_[O+t]&&delete _[O+t];O=b,B=y,_=r(r({},e),_)}),z,b)}function J(t,n){if(Object.keys(_).length>0)if(1===t){for(var r=[],o=T-k,l=0;l<o;l++){_[b+l]&&_[b+l]&&r.push({id:_[b+l].id,item:null,index:b+l})}if(r.length>0)for(l=0;l<r.length;l++){0===k&&y++;var i=0,a=y*m.value,c=l*(n+2*e.sidegap),s=0;"horizontal"===e.orientation&&(i=y*m.value,a=0,c=0,s=l*(n+2*e.sidegap)),0===k&&Q(a,i,y);var d=r[l].index;u.value[d]={id:r[l].id};var p=ee();if(p&&(p.cells[d]||Z(s,c,d)),k++,b++,k>T-1){k=0;var f=!1;for(l=0;l<r.length;l++)delete u.value[w],w++,z++,f||(v.value[x]&&delete v.value[x],f=!0);x++,I++}}else 0===q&&0!==L&&(L=0);for(l=0;l<r.length;l++)delete _[r[l].index];r=[]}else{var h=T-S;for(r=[],l=1;l<=h;l++){null!=_[w-l]&&_[w-l]&&r.push({id:_[w-l].id,item:null,index:w-l})}if(r.length>0)for(l=0;l<r.length;l++){0===S&&x--;i=0;var g=x*m.value,j=(c=(T-1-S)*(n+2*e.sidegap),0);"horizontal"===e.orientation&&(i=x*m.value,g=0,c=0,j=(T-1-S)*(n+2*e.sidegap)),0===S&&Q(g,i,x);var E=r[l].index;u.value[E]={id:r[l].id};var C=ee();if(C&&(C.cells[E]||Z(j,c,E)),w--,++S>T-1){S=0;var M=!1;for(l=0;l<r.length;l++)u.value[b-1],delete u.value[b-1],b--,O--,M||(v.value[y]&&delete v.value[y],M=!0);y--,B--}}else 0===q&&0!==L&&(L=0);for(l=0;l<r.length;l++)r[l]&&delete _[r[l].index];r=[]}}function Q(t,n,r,o){var l=parseInt(R+2*e.sidegap)+"px",i="calc(100% - "+2*e.sidegap+"px)";"horizontal"===e.orientation&&(l="calc(100% - "+2*e.sidegap+"px)",i=parseInt(R+2*e.sidegap)+"px"),v.value[r]={index:r,top:t+"px",left:n+"px",width:i,height:l,cells:{}},K=v.value[r]}function Z(e,t,n){var r=e,o=t;ee().cells[n]={index:n,id:"item"+u.value[n].id,left:o+"px",flexbasis:100/T+"%",top:r+"px"}}function ee(){return K}function te(){cancelAnimationFrame(j),j=requestAnimationFrame(ne)}function ne(){d.value+=E,"horizontal"===e.orientation&&(C=.9),E*=C,Math.abs(E)>.5&&(j=requestAnimationFrame(ne))}return"horizontal"===e.orientation&&(W="X",m.value=e.cellWidth),window.addEventListener("wheel",(function(t){var n=Date.now()-M;D=2*e.scrollSpeed,n<10&&(D=6*e.scrollSpeed);var r=Math.sign(t.deltaY)*D,o=d.value;d.value+=-r,E=d.value-o,te(),M=Date.now()})),window.addEventListener("resize",(function(t){e.cellSquared&&(Object.keys(v.value).length>0&&(X=Object.assign({},v.value)),v.value={},m.value=V.clientWidth/T,"horizontal"===e.orientation&&(m.value=V.clientHeight/T),clearTimeout(A),A=setTimeout((function(){v.value=X}),500))})),t.watch((function(){return e.modelValue}),(function(t,n){0===Object.keys(u.value).length&&Object.keys(t).length>0&&(u.value=t,function(){b=Object.keys(u.value).reduce((function(e,t){return u.value[t]<u.value[e]?t:e})),w=b,y=-1,x=0,k=0,S=0,R=s.value,T=e.numberOfColumns,e.cellSquared&&(m.value=V.clientWidth/T),"horizontal"===e.orientation&&(R=c.value,T=e.numberOfRows,e.cellSquared&&(m.value=V.clientHeight/T));var t=parseInt(parseInt(Object.keys(u.value).length/2)/T)*(R+2*e.sidegap);for(var n in d.value-=t,u.value){0===k&&y++;var r=0,o=y*m.value,l=k*(R+2*e.sidegap),i=0;"horizontal"===e.orientation&&(r=y*m.value,o=0,l=0,i=k*(R+2*e.sidegap)),0===k&&Q(o,r,y);var a=ee();a&&(a.cells[n]||Z(i,l,n)),b++,++k>T-1&&(k=0)}O=b,z=w,B=y,I=x,N.style.transform="translate"+W+"("+d.value+"px) "}())}),{deep:!0}),t.onMounted((function(){console.log("onMounted"),N=document.getElementById(i.value),(V=document.getElementById(a.value)).addEventListener("mousedown",(function(t){F=!0,H=t.pageY,"horizontal"===e.orientation&&(H=t.pageX)})),document.addEventListener("mouseup",(function(e){F=!1,Math.abs(E)>30&&(E=30*Math.sign(E)),te()})),document.addEventListener("mousemove",(function(t){if(F){t.preventDefault();var n=t.pageY-H;"horizontal"===e.orientation?(n=t.pageX-H,H=t.pageX):H=t.pageY,E=n,d.value+=1*n}})),V.addEventListener("mouseleave",(function(e){F=!1})),setInterval((function(){$()}),5),n.emit("on-initilized")})),t.onBeforeUpdate((function(){f.value=[]})),{scrollerId:l,containerId:i,viewportId:a,cellWidthVal:c,cellHeightVal:s,translatePosition:d,cellsdata:u,alldata:v,cells:p,divs:f,scrollbarPosition:h,calculatedRowSize:m,renderKey:0,GetContainerHeight:function(){var t=e.height+"px";return-1===e.height&&(t="100%"),t},OnScrollBarChanged:function(t){D=e.scrollSpeed,(t<=30||t>70)&&(D=3*e.scrollSpeed),q=0,t<50?(q=-1,L=-1,"horizontal"===e.orientation&&(q=1,L=1)):t>50&&(q=1,L=1,"horizontal"===e.orientation&&(q=-1,L=-1)),0!==q?null===P&&(P=setInterval((function(){G()}),10)):(clearInterval(P),P=null)},onBackwardsClicked:function(){q=-1,L=-1,D=3*e.scrollSpeed,G(),te(),q=0,D=e.scrollSpeed},onForwardClicked:function(){q=1,L=1,D=3*e.scrollSpeed,G(),te(),q=0,D=e.scrollSpeed}}}}),p=["id"],f=["id"],h=["id"];a('\r\n/* @import "./scroller.css"; */\r\n'),u.render=function(e,n,r,o,l,i){var a=t.resolveComponent("VScrollerRow"),c=t.resolveComponent("VScrollerScrollBar");return t.openBlock(),t.createElementBlock("div",{id:e.scrollerId,class:"scroller noselect"},[t.createElementVNode("div",{id:e.viewportId,class:"scroller-viewport"},[(t.openBlock(),t.createElementBlock("div",{id:e.containerId,key:e.renderKey,class:"scroller-container",style:t.normalizeStyle([{height:e.GetContainerHeight()}])},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.alldata,(function(n,r){return t.openBlock(),t.createBlock(a,{key:r,calculatedRowSize:e.calculatedRowSize,sidegap:e.sidegap,row:n,orientation:e.orientation},null,8,["calculatedRowSize","sidegap","row","orientation"])})),128))],12,h))],8,f),t.createVNode(c,{active:e.hasScrollbar,orientation:e.orientation,mode:e.isInfinite?"infinite":"normal",onOnChange:e.OnScrollBarChanged,onOnBackwardsClicked:e.onBackwardsClicked,onOnForwardClicked:e.onForwardClicked,viewportId:e.viewportId},null,8,["active","orientation","mode","onOnChange","onOnBackwardsClicked","onOnForwardClicked","viewportId"])],8,p)};var v=Object.freeze({__proto__:null,default:u});const m={install(e){Object.entries(v).forEach((([t,n])=>{e.component(t,n)}))}};return e.default=m,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue);

7

dist/chronocraftscrollervue.esm.js

@@ -5,3 +5,3 @@

// https://github.com/yannisraft/chronocraft-scroller-vue.git
// v0.1.19
// v0.1.20
// MIT License

@@ -1206,5 +1206,2 @@

var VScroller = { VScroller: script, VScrollerScrollBar: script$2, VScrollerRow: script$1 };
//export default VScroller;
/* export { default as Scroller } from "./Scroller";

@@ -1217,3 +1214,3 @@ export { default as VScroller } from "./VScroller";

__proto__: null,
'default': VScroller
'default': script
});

@@ -1220,0 +1217,0 @@

6

dist/cjs/index.js

@@ -5,10 +5,10 @@

// https://github.com/yannisraft/chronocraft-scroller-vue.git
// v0.1.19
// v0.1.20
// MIT License
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var VScroller=require('./VScroller.js');require('./_rollupPluginBabelHelpers-bd59ab91.js'),require('vue'),require('./VScrollerScrollBar-e5eacf7b.js'),require('./style-inject.es-76dd76af.js'),require('./VScrollerRow-935f9dce.js');/* export { default as Scroller } from "./Scroller";
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var VScroller=require('./VScroller-f486905b.js');require('./_rollupPluginBabelHelpers-58b5939e.js'),require('vue'),require('./VScrollerScrollBar-d42d5faa.js'),require('./style-inject.es-549ae26b.js'),require('./VScrollerRow-58c5279f.js');/* export { default as Scroller } from "./Scroller";
export { default as VScroller } from "./VScroller";
export { default as VScrollerScrollBar } from "./VScroller"; */
//export default { Scroller, VScroller };
var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':VScroller["default"]});const Plugin = {
var components=/*#__PURE__*/Object.freeze({__proto__:null,'default':VScroller.s});const Plugin = {
install(app) {

@@ -15,0 +15,0 @@ Object.entries(components).forEach(([componentName, component]) => {

794

dist/cjs/VScroller.js

@@ -5,795 +5,5 @@

// https://github.com/yannisraft/chronocraft-scroller-vue.git
// v0.1.19
// v0.1.20
// MIT License
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var _rollupPluginBabelHelpers=require('./_rollupPluginBabelHelpers-bd59ab91.js'),vue=require('vue'),VScrollerScrollBar=require('./VScrollerScrollBar-e5eacf7b.js'),VScrollerRow=require('./VScrollerRow-935f9dce.js'),styleInject_es=require('./style-inject.es-76dd76af.js');//import _VScrollerRow from "@/components/VScrollerRow";
// BUILD
/* import VScrollerScrollBar from "VScrollerScrollBar";
import VScrollerRow from "VScrollerRow"; */
//console.log("production");
//export let VScrollerRow = _VScrollerRow;
//export let VScrollerScrollBar = _VScrollerScrollBar;
var script = vue.defineComponent({
name: "VScroller",
components: {
VScrollerScrollBar: VScrollerScrollBar.s,
VScrollerRow: VScrollerRow.s //VScrollerScrollBar: () => import('./VScrollerScrollBar'),
//VScrollerRow: () => import('./VScrollerRow')
},
props: {
modelValue: {
type: Object,
default: function _default() {
return {};
}
},
height: {
type: Number,
default: -1
},
orientation: {
type: String,
default: "vertical"
},
numberOfColumns: {
type: Number,
default: 5
},
numberOfRows: {
type: Number,
default: 5
},
sidegap: {
type: Number,
default: 5
},
cellHeight: {
type: Number,
default: 50
},
cellWidth: {
type: Number,
default: 50
},
cellSquared: {
type: Boolean,
default: false
},
scrollSpeed: {
type: Number,
default: 6
},
isInfinite: {
type: Boolean,
default: false
},
hasScrollbar: {
type: Boolean,
default: true
}
},
setup: function setup(props, context) {
var IDGenerated = Math.floor(Math.random() * 999999) + 1000000; // ---- Reactive Attributes
var scrollerId = vue.ref("scroller_" + IDGenerated);
var containerId = vue.ref("container_" + IDGenerated);
var viewportId = vue.ref("viewport_" + IDGenerated);
var cellWidthVal = vue.ref(props.cellWidth);
var cellHeightVal = vue.ref(props.cellHeight);
var translatePosition = vue.ref(0);
var cellsdata = vue.ref({}); //ref(props.modelValue);
var cells = vue.ref([]);
var divs = vue.ref([]);
var scrollbarPosition = vue.ref(0);
var alldata = vue.ref({});
var calculatedRowSize = vue.ref(props.cellHeight); // ---- Attributes
var renderKey = 0;
var translatePositionPrevious = translatePosition.value;
var indexInitial = 1;
var indexForward = indexInitial;
var indexBackward = indexInitial - 1;
var indexRowForward = 0;
var indexRowBackward = 0;
var indexLeftForward = 0;
var indexLeftBackward = 0;
var indexCacheForward = 0;
var indexCacheBackward = 0;
var indexCacheRowForward = 0;
var indexCacheRowBackward = 0;
var momentumID = "";
var velocityCurrent = 0;
var maxVelocity = 30;
var velocityMomentum = 0.95;
var timeSinceLastScroll = 0;
var container = null;
var viewport = null;
var translatePositionString = "Y";
var mouseDown = false;
translatePosition.value;
var dragScrollPreviousPosition = translatePosition.value;
var scrollInterval = null;
var scrolldirection = 0;
var previousscrolldirection = 0;
var finalScrollSpeed = props.scrollSpeed;
var scrollercache = {};
var cellSizeOriented = cellHeightVal.value;
var cellsNumberOriented = 0;
var newcellslength = 50;
var updateTime = 5;
var resizeWindowTimeout = null;
var resizeWindowData = {};
var currentRowElement = null; // ---- Initial Setup based on Orientation
if (props.orientation === "horizontal") {
translatePositionString = "X";
calculatedRowSize.value = props.cellWidth;
} // ---- Methods Public
//
function GetContainerHeight() {
var finalHeight = props.height + "px";
if (props.height === -1) {
finalHeight = "100%";
}
return finalHeight;
}
function OnScrollBarChanged(newvalue) {
finalScrollSpeed = props.scrollSpeed;
if (newvalue <= 30 || newvalue > 70) {
finalScrollSpeed = props.scrollSpeed * 3;
}
scrolldirection = 0;
if (newvalue < 50) {
// Move Backwards
scrolldirection = -1;
previousscrolldirection = -1;
if (props.orientation === 'horizontal') {
scrolldirection = 1;
previousscrolldirection = 1;
}
} else if (newvalue > 50) {
// Move Forward
scrolldirection = 1;
previousscrolldirection = 1;
if (props.orientation === 'horizontal') {
scrolldirection = -1;
previousscrolldirection = -1;
}
}
if (scrolldirection !== 0) {
if (scrollInterval === null) {
scrollInterval = setInterval(function () {
UpdatePosition();
}, 10);
}
} else {
clearInterval(scrollInterval);
scrollInterval = null;
}
}
function onBackwardsClicked() {
scrolldirection = -1;
previousscrolldirection = -1;
finalScrollSpeed = props.scrollSpeed * 3;
UpdatePosition();
BeginMomentumTracking();
scrolldirection = 0;
finalScrollSpeed = props.scrollSpeed;
}
function onForwardClicked() {
scrolldirection = 1;
previousscrolldirection = 1;
finalScrollSpeed = props.scrollSpeed * 3;
UpdatePosition();
BeginMomentumTracking();
scrolldirection = 0;
finalScrollSpeed = props.scrollSpeed;
} // ---- Methods Private
//
function UpdatePosition() {
var walk = scrolldirection * finalScrollSpeed;
var _translatePositionPrevious = translatePosition.value;
translatePosition.value += -walk;
velocityCurrent = translatePosition.value - _translatePositionPrevious;
}
function AnimateScroller() {
if (container) {
container.style.transform = "translate" + translatePositionString + "(" + translatePosition.value + "px)";
if (translatePosition.value == translatePositionPrevious) {
previousscrolldirection = 1;
} else if (translatePosition.value > translatePositionPrevious) {
previousscrolldirection = -1;
}
DetectEdges(scrolldirection);
translatePositionPrevious = translatePosition.value;
}
}
function DetectEdges(direction) {
if (viewport) {
var viewportSize = viewport.clientHeight;
var cellSizeWithGap = cellSizeOriented + props.sidegap * 2;
if (props.orientation === "horizontal") {
viewportSize = viewport.clientWidth;
}
cellSizeWithGap = calculatedRowSize.value;
var diff = 0;
var diffcache = 0;
if (direction === 0 && previousscrolldirection !== 0) direction = previousscrolldirection;
if (direction === -1) {
// Backwards
diff = -indexRowBackward * cellSizeWithGap - translatePosition.value - viewportSize;
diffcache = indexCacheRowBackward * cellSizeWithGap + translatePosition.value + parseInt(newcellslength / cellsNumberOriented);
var updatePositionTest = -parseInt(newcellslength / cellsNumberOriented) * cellSizeWithGap;
if (diffcache > updatePositionTest) {
UpdateScrollerCache(direction);
}
if (diff < -cellSizeWithGap) {
UpdateCells(direction, cellSizeOriented);
}
} else if (direction === 1) {
// Forward
diff = (indexRowForward - 1) * cellSizeWithGap + translatePosition.value - viewportSize;
diffcache = indexCacheRowForward * cellSizeWithGap + translatePosition.value - viewportSize + parseInt(newcellslength / cellsNumberOriented);
var _updatePositionTest = parseInt(newcellslength / cellsNumberOriented) * cellSizeWithGap + viewportSize;
if (diffcache < _updatePositionTest) {
UpdateScrollerCache(direction);
}
if (diff < 0) {
UpdateCells(direction, cellSizeOriented);
}
}
}
}
function UpdateScrollerCache(direction) {
if (direction === 1) {
// Forward
context.emit("on-update-data-next", function (newdata) {
newcellslength = Object.keys(newdata).length;
indexCacheForward += Object.keys(newdata).length;
indexCacheRowForward += parseInt(Object.keys(newdata).length / cellsNumberOriented); // Clear Data regarding Backward Cache
for (var i = 0; i < Math.abs(indexBackward - indexCacheBackward); i++) {
if (scrollercache[indexCacheBackward + i]) {
delete scrollercache[indexCacheBackward + i];
}
}
indexCacheBackward = indexBackward;
indexCacheRowBackward = indexRowBackward;
scrollercache = _rollupPluginBabelHelpers._(_rollupPluginBabelHelpers._({}, newdata), scrollercache);
}, indexBackward, indexCacheForward);
} else {
// Backward
context.emit("on-update-data-previous", function (newdata) {
newcellslength = Object.keys(newdata).length;
indexCacheBackward -= Object.keys(newdata).length;
indexCacheRowBackward -= parseInt(Object.keys(newdata).length / cellsNumberOriented); // Clear Data regarding Forward Cache
for (var i = 0; i < Math.abs(indexForward - indexCacheForward); i++) {
if (scrollercache[indexCacheForward + i]) {
delete scrollercache[indexCacheForward + i];
}
}
indexCacheForward = indexForward;
indexCacheRowForward = indexRowForward;
scrollercache = _rollupPluginBabelHelpers._(_rollupPluginBabelHelpers._({}, newdata), scrollercache);
}, indexCacheBackward, indexForward);
}
}
function UpdateCells(direction, cellSizeOriented) {
if (Object.keys(scrollercache).length > 0) {
if (direction === 1) {
// Add Cells Forward
//console.log("Add Cells Forward");
// Get all the cells that required to be loaded
var cellsToAdd = [];
var totalCellsToAdd = cellsNumberOriented - indexLeftForward;
for (var i = 0; i < totalCellsToAdd; i++) {
var cachecell = scrollercache[indexForward + i];
if (cachecell) {
if (scrollercache[indexForward + i]) {
cellsToAdd.push({
id: scrollercache[indexForward + i].id,
item: null,
index: indexForward + i
});
}
}
}
if (cellsToAdd.length > 0) {
for (var i = 0; i < cellsToAdd.length; i++) {
if (indexLeftForward === 0) {
indexRowForward++;
}
var leftval_row = 0;
var topval_row = indexRowForward * calculatedRowSize.value;
var leftval_cell = i * (cellSizeOriented + props.sidegap * 2);
var _topval_cell = 0;
if (props.orientation === "horizontal") {
leftval_row = indexRowForward * calculatedRowSize.value;
topval_row = 0;
leftval_cell = 0;
_topval_cell = i * (cellSizeOriented + props.sidegap * 2);
}
if (indexLeftForward === 0) {
AddRow(topval_row, leftval_row, indexRowForward);
}
var key = cellsToAdd[i].index;
cellsdata.value[key] = {
id: cellsToAdd[i].id
};
var _currentRowElement = GetCurrentRowElement();
if (_currentRowElement) {
if (!_currentRowElement.cells[key]) {
AddCell(_topval_cell, leftval_cell, key);
}
}
indexLeftForward++;
indexForward++;
if (indexLeftForward > cellsNumberOriented - 1) {
indexLeftForward = 0;
var rowRemoved = false;
for (var i = 0; i < cellsToAdd.length; i++) {
delete cellsdata.value[indexBackward];
indexBackward++;
indexCacheBackward++;
if (!rowRemoved) {
if (alldata.value[indexRowBackward]) {
delete alldata.value[indexRowBackward];
}
rowRemoved = true;
}
}
indexRowBackward++;
indexCacheRowBackward++;
}
}
} else {
if (scrolldirection === 0 && previousscrolldirection !== 0) previousscrolldirection = 0;
} // Delete the cells we just added that are inside scrollercache
for (var i = 0; i < cellsToAdd.length; i++) {
delete scrollercache[cellsToAdd[i].index];
}
cellsToAdd = [];
} else {
// Add Items Backward
//console.log("Add Cells Backward");
// Get all the cells that required to be loaded
var _totalCellsToAdd = cellsNumberOriented - indexLeftBackward;
var cellsToAdd = [];
for (var i = 1; i <= _totalCellsToAdd; i++) {
var cachecell = scrollercache[indexBackward - i];
if (cachecell !== null && typeof cachecell !== "undefined") {
if (scrollercache[indexBackward - i]) {
cellsToAdd.push({
id: scrollercache[indexBackward - i].id,
item: null,
index: indexBackward - i
});
}
}
}
if (cellsToAdd.length > 0) {
for (var i = 0; i < cellsToAdd.length; i++) {
if (indexLeftBackward === 0) {
indexRowBackward--;
}
var leftval_row = 0;
var _topval_row = indexRowBackward * calculatedRowSize.value;
var leftval_cell = (cellsNumberOriented - 1 - indexLeftBackward) * (cellSizeOriented + props.sidegap * 2);
var topval_cell = 0;
if (props.orientation === "horizontal") {
leftval_row = indexRowBackward * calculatedRowSize.value;
_topval_row = 0;
leftval_cell = 0;
topval_cell = (cellsNumberOriented - 1 - indexLeftBackward) * (cellSizeOriented + props.sidegap * 2);
}
if (indexLeftBackward === 0) {
AddRow(_topval_row, leftval_row, indexRowBackward);
}
var _key = cellsToAdd[i].index;
cellsdata.value[_key] = {
id: cellsToAdd[i].id
};
var currentRowElement = GetCurrentRowElement();
if (currentRowElement) {
if (!currentRowElement.cells[_key]) {
AddCell(topval_cell, leftval_cell, _key);
}
}
indexBackward--;
indexLeftBackward++;
if (indexLeftBackward > cellsNumberOriented - 1) {
indexLeftBackward = 0;
var _rowRemoved = false;
for (var i = 0; i < cellsToAdd.length; i++) {
cellsdata.value[indexForward - 1];
delete cellsdata.value[indexForward - 1];
indexForward--;
indexCacheForward--;
if (!_rowRemoved) {
if (alldata.value[indexRowForward]) {
delete alldata.value[indexRowForward];
}
_rowRemoved = true;
}
}
indexRowForward--;
indexCacheRowForward--;
}
}
} else {
if (scrolldirection === 0 && previousscrolldirection !== 0) previousscrolldirection = 0;
}
for (var i = 0; i < cellsToAdd.length; i++) {
if (cellsToAdd[i]) delete scrollercache[cellsToAdd[i].index];
}
cellsToAdd = [];
}
}
}
function AddRow(_top, _left, _index, isForward) {
var rowHeight = parseInt(cellSizeOriented + props.sidegap * 2) + "px";
var rowWidth = "calc(100% - " + 2 * props.sidegap + "px)";
if (props.orientation === "horizontal") {
rowHeight = "calc(100% - " + 2 * props.sidegap + "px)";
rowWidth = parseInt(cellSizeOriented + props.sidegap * 2) + "px";
}
alldata.value[_index] = {
index: _index,
top: _top + "px",
left: _left + "px",
width: rowWidth,
height: rowHeight,
cells: {}
};
currentRowElement = alldata.value[_index];
}
function AddCell(_top, _left, key) {
var cellTop = _top;
var cellLeft = _left;
var currentRowElement = GetCurrentRowElement();
currentRowElement.cells[key] = {
index: key,
id: "item" + cellsdata.value[key].id,
left: cellLeft + "px",
flexbasis: 100 / cellsNumberOriented + "%",
top: cellTop + "px"
};
}
function GetCurrentRowElement() {
var resultElement = null;
/* if (previousscrolldirection === -1) {
if (alldata.value[indexRowBackward - 1] !== null && typeof alldata.value[indexRowBackward - 1] !== 'undefined') {
resultElement = alldata.value[indexRowBackward - 1];
}
} else {
if (alldata.value[indexRowForward - 1] !== null && typeof alldata.value[indexRowForward - 1] !== 'undefined') {
resultElement = alldata.value[indexRowForward - 1];
}
} */
resultElement = currentRowElement;
return resultElement;
}
function GenerateInitialCells() {
indexForward = Object.keys(cellsdata.value).reduce(function (key, v) {
return cellsdata.value[v] < cellsdata.value[key] ? v : key;
});
indexBackward = indexForward;
indexRowForward = -1;
indexRowBackward = 0;
indexLeftForward = 0;
indexLeftBackward = 0;
cellSizeOriented = cellHeightVal.value;
cellsNumberOriented = props.numberOfColumns;
if (props.cellSquared) calculatedRowSize.value = viewport.clientWidth / cellsNumberOriented;
if (props.orientation === "horizontal") {
cellSizeOriented = cellWidthVal.value;
cellsNumberOriented = props.numberOfRows;
if (props.cellSquared) calculatedRowSize.value = viewport.clientHeight / cellsNumberOriented;
} // In order have cells visible at the back of the scroller
// set Position at the half of the cells size
var startPos = parseInt(parseInt(Object.keys(cellsdata.value).length / 2) / cellsNumberOriented) * (cellSizeOriented + props.sidegap * 2);
translatePosition.value -= startPos; //let isFirstRow = true;
for (var key in cellsdata.value) {
if (indexLeftForward === 0) {
indexRowForward++;
}
var leftval_row = 0;
var topval_row = indexRowForward * calculatedRowSize.value;
var leftval_cell = indexLeftForward * (cellSizeOriented + props.sidegap * 2);
var topval_cell = 0;
if (props.orientation === "horizontal") {
leftval_row = indexRowForward * calculatedRowSize.value;
topval_row = 0;
leftval_cell = 0;
topval_cell = indexLeftForward * (cellSizeOriented + props.sidegap * 2);
}
if (indexLeftForward === 0) {
AddRow(topval_row, leftval_row, indexRowForward);
}
var currentRowElement = GetCurrentRowElement();
if (currentRowElement) {
if (!currentRowElement.cells[key]) {
AddCell(topval_cell, leftval_cell, key);
}
}
indexForward++;
indexLeftForward++;
if (indexLeftForward > cellsNumberOriented - 1) {
indexLeftForward = 0;
}
} //console.log(alldata.value);
indexCacheForward = indexForward;
indexCacheBackward = indexBackward;
indexCacheRowForward = indexRowForward;
indexCacheRowBackward = indexRowBackward;
container.style.transform = "translate" + translatePositionString + "(" + translatePosition.value + "px) ";
}
function CancelMomentumTracking() {
cancelAnimationFrame(momentumID);
}
function BeginMomentumTracking() {
CancelMomentumTracking();
momentumID = requestAnimationFrame(MomentumLoop);
}
function MomentumLoop() {
translatePosition.value += velocityCurrent;
if (props.orientation === "horizontal") velocityMomentum = 0.9;
velocityCurrent *= velocityMomentum;
if (Math.abs(velocityCurrent) > 0.5) {
momentumID = requestAnimationFrame(MomentumLoop);
}
} // ---- Events
window.addEventListener("wheel", function (e) {
var timediff = Date.now() - timeSinceLastScroll;
finalScrollSpeed = props.scrollSpeed * 2;
if (timediff < 10) {
finalScrollSpeed = props.scrollSpeed * 6;
}
var deltaY = Math.sign(e.deltaY);
var walk = deltaY * finalScrollSpeed;
var _translatePositionPrevious = translatePosition.value;
translatePosition.value += -walk;
velocityCurrent = translatePosition.value - _translatePositionPrevious;
BeginMomentumTracking();
timeSinceLastScroll = Date.now();
});
window.addEventListener("resize", function (e) {
if (props.cellSquared) {
if (Object.keys(alldata.value).length > 0) resizeWindowData = Object.assign({}, alldata.value);
alldata.value = {};
calculatedRowSize.value = viewport.clientWidth / cellsNumberOriented;
if (props.orientation === "horizontal") {
calculatedRowSize.value = viewport.clientHeight / cellsNumberOriented;
}
clearTimeout(resizeWindowTimeout);
resizeWindowTimeout = setTimeout(function () {
alldata.value = resizeWindowData;
}, 500);
}
}); // ---- Watchers
vue.watch(function () {
return props.modelValue;
}, function (first, second) {
if (Object.keys(cellsdata.value).length === 0 && Object.keys(first).length > 0) {
cellsdata.value = first;
GenerateInitialCells();
}
}, {
deep: true
}); // ---- Lifecycle Hooks
vue.onMounted(function () {
console.log("onMounted");
container = document.getElementById(containerId.value);
viewport = document.getElementById(viewportId.value); // Add Container Events after its creation
viewport.addEventListener("mousedown", function (e) {
mouseDown = true;
dragScrollPreviousPosition = e.pageY;
if (props.orientation === "horizontal") {
dragScrollPreviousPosition = e.pageX;
}
});
document.addEventListener("mouseup", function (e) {
mouseDown = false;
if (Math.abs(velocityCurrent) > maxVelocity) velocityCurrent = maxVelocity * Math.sign(velocityCurrent);
BeginMomentumTracking();
});
document.addEventListener("mousemove", function (e) {
if (!mouseDown) return;
e.preventDefault();
var moveSpeed = 1;
var walk = e.pageY - dragScrollPreviousPosition;
if (props.orientation === "horizontal") {
walk = e.pageX - dragScrollPreviousPosition;
dragScrollPreviousPosition = e.pageX;
} else {
dragScrollPreviousPosition = e.pageY;
}
velocityCurrent = walk;
translatePosition.value += walk * moveSpeed;
});
viewport.addEventListener("mouseleave", function (e) {
mouseDown = false;
});
setInterval(function () {
AnimateScroller();
}, updateTime);
context.emit("on-initilized");
}); // Make sure to reset the refs before each update.
vue.onBeforeUpdate(function () {
divs.value = [];
});
return {
// Attributes
scrollerId: scrollerId,
containerId: containerId,
viewportId: viewportId,
cellWidthVal: cellWidthVal,
cellHeightVal: cellHeightVal,
translatePosition: translatePosition,
cellsdata: cellsdata,
alldata: alldata,
cells: cells,
divs: divs,
scrollbarPosition: scrollbarPosition,
calculatedRowSize: calculatedRowSize,
renderKey: renderKey,
// Methods Public
GetContainerHeight: GetContainerHeight,
OnScrollBarChanged: OnScrollBarChanged,
onBackwardsClicked: onBackwardsClicked,
onForwardClicked: onForwardClicked
};
}
});var _hoisted_1 = ["id"];
var _hoisted_2 = ["id"];
var _hoisted_3 = ["id"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
var _component_VScrollerRow = vue.resolveComponent("VScrollerRow");
var _component_VScrollerScrollBar = vue.resolveComponent("VScrollerScrollBar");
return vue.openBlock(), vue.createElementBlock("div", {
id: _ctx.scrollerId,
class: "scroller noselect"
}, [vue.createElementVNode("div", {
id: _ctx.viewportId,
class: "scroller-viewport"
}, [(vue.openBlock(), vue.createElementBlock("div", {
id: _ctx.containerId,
key: _ctx.renderKey,
class: "scroller-container",
style: vue.normalizeStyle([{
height: _ctx.GetContainerHeight()
}])
}, [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.alldata, function (row, rowkey) {
return vue.openBlock(), vue.createBlock(_component_VScrollerRow, {
key: rowkey,
calculatedRowSize: _ctx.calculatedRowSize,
sidegap: _ctx.sidegap,
row: row,
orientation: _ctx.orientation
}, null, 8, ["calculatedRowSize", "sidegap", "row", "orientation"]);
}), 128))], 12, _hoisted_3))], 8, _hoisted_2), vue.createVNode(_component_VScrollerScrollBar, {
active: _ctx.hasScrollbar,
orientation: _ctx.orientation,
mode: _ctx.isInfinite ? 'infinite' : 'normal',
onOnChange: _ctx.OnScrollBarChanged,
onOnBackwardsClicked: _ctx.onBackwardsClicked,
onOnForwardClicked: _ctx.onForwardClicked,
viewportId: _ctx.viewportId
}, null, 8, ["active", "orientation", "mode", "onOnChange", "onOnBackwardsClicked", "onOnForwardClicked", "viewportId"])], 8, _hoisted_1);
}var css_248z = "\r\n/* @import \"./scroller.css\"; */\r\n";
styleInject_es.s(css_248z);script.render = render;var VScroller = { VScroller: script, VScrollerScrollBar: VScrollerScrollBar.s, VScrollerRow: VScrollerRow.s };
//export default VScroller;
exports["default"]=VScroller;
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var VScroller=require('./VScroller-f486905b.js');require('./_rollupPluginBabelHelpers-58b5939e.js'),require('vue'),require('./VScrollerScrollBar-d42d5faa.js'),require('./style-inject.es-549ae26b.js'),require('./VScrollerRow-58c5279f.js');exports["default"]=VScroller.s;

4

dist/cjs/VScrollerRow.js

@@ -5,5 +5,5 @@

// https://github.com/yannisraft/chronocraft-scroller-vue.git
// v0.1.19
// v0.1.20
// MIT License
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var VScrollerRow=require('./VScrollerRow-935f9dce.js');require('vue');exports["default"]=VScrollerRow.s;
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var VScrollerRow=require('./VScrollerRow-58c5279f.js');require('vue');exports["default"]=VScrollerRow.s;

4

dist/cjs/VScrollerScrollBar.js

@@ -5,5 +5,5 @@

// https://github.com/yannisraft/chronocraft-scroller-vue.git
// v0.1.19
// v0.1.20
// MIT License
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var VScrollerScrollBar=require('./VScrollerScrollBar-e5eacf7b.js');require('vue'),require('./style-inject.es-76dd76af.js');exports["default"]=VScrollerScrollBar.s;
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var VScrollerScrollBar=require('./VScrollerScrollBar-d42d5faa.js');require('vue'),require('./style-inject.es-549ae26b.js');exports["default"]=VScrollerScrollBar.s;

7

dist/components/VScroller/index.ts

@@ -5,3 +5,3 @@

// https://github.com/yannisraft/chronocraft-scroller-vue.git
// v0.1.19
// v0.1.20
// MIT License

@@ -1210,9 +1210,6 @@

var index = { VScroller: script, VScrollerScrollBar: script$2, VScrollerRow: script$1 };
//export default VScroller;
exports["default"] = script;
exports["default"] = index;
Object.defineProperty(exports, '__esModule', { value: true });
}));

2

dist/components/VScrollerRow/index.ts

@@ -5,3 +5,3 @@

// https://github.com/yannisraft/chronocraft-scroller-vue.git
// v0.1.19
// v0.1.20
// MIT License

@@ -8,0 +8,0 @@

2

dist/components/VScrollerScrollBar/index.ts

@@ -5,3 +5,3 @@

// https://github.com/yannisraft/chronocraft-scroller-vue.git
// v0.1.19
// v0.1.20
// MIT License

@@ -8,0 +8,0 @@

14

dist/esm/index.js

@@ -5,11 +5,11 @@

// https://github.com/yannisraft/chronocraft-scroller-vue.git
// v0.1.19
// v0.1.20
// MIT License
import VScroller from './VScroller.js';
import './_rollupPluginBabelHelpers-9285e313.js';
import { s as script } from './VScroller-90bf03d9.js';
import './_rollupPluginBabelHelpers-8e522d0f.js';
import 'vue';
import './VScrollerScrollBar-d8fb6051.js';
import './style-inject.es-53f50720.js';
import './VScrollerRow-2cd98ce5.js';
import './VScrollerScrollBar-0f77a3ab.js';
import './style-inject.es-19e86df4.js';
import './VScrollerRow-e5d8fa8f.js';

@@ -23,3 +23,3 @@ /* export { default as Scroller } from "./Scroller";

__proto__: null,
'default': VScroller
'default': script
});

@@ -26,0 +26,0 @@

815

dist/esm/VScroller.js

@@ -5,810 +5,11 @@

// https://github.com/yannisraft/chronocraft-scroller-vue.git
// v0.1.19
// v0.1.20
// MIT License
import { _ as _objectSpread2 } from './_rollupPluginBabelHelpers-9285e313.js';
import { defineComponent, ref, watch, onMounted, onBeforeUpdate, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, renderList, createBlock, createVNode } from 'vue';
import { s as script$1 } from './VScrollerScrollBar-d8fb6051.js';
import { s as script$2 } from './VScrollerRow-2cd98ce5.js';
import { s as styleInject } from './style-inject.es-53f50720.js';
//import _VScrollerRow from "@/components/VScrollerRow";
// BUILD
/* import VScrollerScrollBar from "VScrollerScrollBar";
import VScrollerRow from "VScrollerRow"; */
//console.log("production");
//export let VScrollerRow = _VScrollerRow;
//export let VScrollerScrollBar = _VScrollerScrollBar;
var script = defineComponent({
name: "VScroller",
components: {
VScrollerScrollBar: script$1,
VScrollerRow: script$2 //VScrollerScrollBar: () => import('./VScrollerScrollBar'),
//VScrollerRow: () => import('./VScrollerRow')
},
props: {
modelValue: {
type: Object,
default: function _default() {
return {};
}
},
height: {
type: Number,
default: -1
},
orientation: {
type: String,
default: "vertical"
},
numberOfColumns: {
type: Number,
default: 5
},
numberOfRows: {
type: Number,
default: 5
},
sidegap: {
type: Number,
default: 5
},
cellHeight: {
type: Number,
default: 50
},
cellWidth: {
type: Number,
default: 50
},
cellSquared: {
type: Boolean,
default: false
},
scrollSpeed: {
type: Number,
default: 6
},
isInfinite: {
type: Boolean,
default: false
},
hasScrollbar: {
type: Boolean,
default: true
}
},
setup: function setup(props, context) {
var IDGenerated = Math.floor(Math.random() * 999999) + 1000000; // ---- Reactive Attributes
var scrollerId = ref("scroller_" + IDGenerated);
var containerId = ref("container_" + IDGenerated);
var viewportId = ref("viewport_" + IDGenerated);
var cellWidthVal = ref(props.cellWidth);
var cellHeightVal = ref(props.cellHeight);
var translatePosition = ref(0);
var cellsdata = ref({}); //ref(props.modelValue);
var cells = ref([]);
var divs = ref([]);
var scrollbarPosition = ref(0);
var alldata = ref({});
var calculatedRowSize = ref(props.cellHeight); // ---- Attributes
var renderKey = 0;
var translatePositionPrevious = translatePosition.value;
var indexInitial = 1;
var indexForward = indexInitial;
var indexBackward = indexInitial - 1;
var indexRowForward = 0;
var indexRowBackward = 0;
var indexLeftForward = 0;
var indexLeftBackward = 0;
var indexCacheForward = 0;
var indexCacheBackward = 0;
var indexCacheRowForward = 0;
var indexCacheRowBackward = 0;
var momentumID = "";
var velocityCurrent = 0;
var maxVelocity = 30;
var velocityMomentum = 0.95;
var timeSinceLastScroll = 0;
var container = null;
var viewport = null;
var translatePositionString = "Y";
var mouseDown = false;
translatePosition.value;
var dragScrollPreviousPosition = translatePosition.value;
var scrollInterval = null;
var scrolldirection = 0;
var previousscrolldirection = 0;
var finalScrollSpeed = props.scrollSpeed;
var scrollercache = {};
var cellSizeOriented = cellHeightVal.value;
var cellsNumberOriented = 0;
var newcellslength = 50;
var updateTime = 5;
var resizeWindowTimeout = null;
var resizeWindowData = {};
var currentRowElement = null; // ---- Initial Setup based on Orientation
if (props.orientation === "horizontal") {
translatePositionString = "X";
calculatedRowSize.value = props.cellWidth;
} // ---- Methods Public
//
function GetContainerHeight() {
var finalHeight = props.height + "px";
if (props.height === -1) {
finalHeight = "100%";
}
return finalHeight;
}
function OnScrollBarChanged(newvalue) {
finalScrollSpeed = props.scrollSpeed;
if (newvalue <= 30 || newvalue > 70) {
finalScrollSpeed = props.scrollSpeed * 3;
}
scrolldirection = 0;
if (newvalue < 50) {
// Move Backwards
scrolldirection = -1;
previousscrolldirection = -1;
if (props.orientation === 'horizontal') {
scrolldirection = 1;
previousscrolldirection = 1;
}
} else if (newvalue > 50) {
// Move Forward
scrolldirection = 1;
previousscrolldirection = 1;
if (props.orientation === 'horizontal') {
scrolldirection = -1;
previousscrolldirection = -1;
}
}
if (scrolldirection !== 0) {
if (scrollInterval === null) {
scrollInterval = setInterval(function () {
UpdatePosition();
}, 10);
}
} else {
clearInterval(scrollInterval);
scrollInterval = null;
}
}
function onBackwardsClicked() {
scrolldirection = -1;
previousscrolldirection = -1;
finalScrollSpeed = props.scrollSpeed * 3;
UpdatePosition();
BeginMomentumTracking();
scrolldirection = 0;
finalScrollSpeed = props.scrollSpeed;
}
function onForwardClicked() {
scrolldirection = 1;
previousscrolldirection = 1;
finalScrollSpeed = props.scrollSpeed * 3;
UpdatePosition();
BeginMomentumTracking();
scrolldirection = 0;
finalScrollSpeed = props.scrollSpeed;
} // ---- Methods Private
//
function UpdatePosition() {
var walk = scrolldirection * finalScrollSpeed;
var _translatePositionPrevious = translatePosition.value;
translatePosition.value += -walk;
velocityCurrent = translatePosition.value - _translatePositionPrevious;
}
function AnimateScroller() {
if (container) {
container.style.transform = "translate" + translatePositionString + "(" + translatePosition.value + "px)";
if (translatePosition.value == translatePositionPrevious) {
previousscrolldirection = 1;
} else if (translatePosition.value > translatePositionPrevious) {
previousscrolldirection = -1;
}
DetectEdges(scrolldirection);
translatePositionPrevious = translatePosition.value;
}
}
function DetectEdges(direction) {
if (viewport) {
var viewportSize = viewport.clientHeight;
var cellSizeWithGap = cellSizeOriented + props.sidegap * 2;
if (props.orientation === "horizontal") {
viewportSize = viewport.clientWidth;
}
cellSizeWithGap = calculatedRowSize.value;
var diff = 0;
var diffcache = 0;
if (direction === 0 && previousscrolldirection !== 0) direction = previousscrolldirection;
if (direction === -1) {
// Backwards
diff = -indexRowBackward * cellSizeWithGap - translatePosition.value - viewportSize;
diffcache = indexCacheRowBackward * cellSizeWithGap + translatePosition.value + parseInt(newcellslength / cellsNumberOriented);
var updatePositionTest = -parseInt(newcellslength / cellsNumberOriented) * cellSizeWithGap;
if (diffcache > updatePositionTest) {
UpdateScrollerCache(direction);
}
if (diff < -cellSizeWithGap) {
UpdateCells(direction, cellSizeOriented);
}
} else if (direction === 1) {
// Forward
diff = (indexRowForward - 1) * cellSizeWithGap + translatePosition.value - viewportSize;
diffcache = indexCacheRowForward * cellSizeWithGap + translatePosition.value - viewportSize + parseInt(newcellslength / cellsNumberOriented);
var _updatePositionTest = parseInt(newcellslength / cellsNumberOriented) * cellSizeWithGap + viewportSize;
if (diffcache < _updatePositionTest) {
UpdateScrollerCache(direction);
}
if (diff < 0) {
UpdateCells(direction, cellSizeOriented);
}
}
}
}
function UpdateScrollerCache(direction) {
if (direction === 1) {
// Forward
context.emit("on-update-data-next", function (newdata) {
newcellslength = Object.keys(newdata).length;
indexCacheForward += Object.keys(newdata).length;
indexCacheRowForward += parseInt(Object.keys(newdata).length / cellsNumberOriented); // Clear Data regarding Backward Cache
for (var i = 0; i < Math.abs(indexBackward - indexCacheBackward); i++) {
if (scrollercache[indexCacheBackward + i]) {
delete scrollercache[indexCacheBackward + i];
}
}
indexCacheBackward = indexBackward;
indexCacheRowBackward = indexRowBackward;
scrollercache = _objectSpread2(_objectSpread2({}, newdata), scrollercache);
}, indexBackward, indexCacheForward);
} else {
// Backward
context.emit("on-update-data-previous", function (newdata) {
newcellslength = Object.keys(newdata).length;
indexCacheBackward -= Object.keys(newdata).length;
indexCacheRowBackward -= parseInt(Object.keys(newdata).length / cellsNumberOriented); // Clear Data regarding Forward Cache
for (var i = 0; i < Math.abs(indexForward - indexCacheForward); i++) {
if (scrollercache[indexCacheForward + i]) {
delete scrollercache[indexCacheForward + i];
}
}
indexCacheForward = indexForward;
indexCacheRowForward = indexRowForward;
scrollercache = _objectSpread2(_objectSpread2({}, newdata), scrollercache);
}, indexCacheBackward, indexForward);
}
}
function UpdateCells(direction, cellSizeOriented) {
if (Object.keys(scrollercache).length > 0) {
if (direction === 1) {
// Add Cells Forward
//console.log("Add Cells Forward");
// Get all the cells that required to be loaded
var cellsToAdd = [];
var totalCellsToAdd = cellsNumberOriented - indexLeftForward;
for (var i = 0; i < totalCellsToAdd; i++) {
var cachecell = scrollercache[indexForward + i];
if (cachecell) {
if (scrollercache[indexForward + i]) {
cellsToAdd.push({
id: scrollercache[indexForward + i].id,
item: null,
index: indexForward + i
});
}
}
}
if (cellsToAdd.length > 0) {
for (var i = 0; i < cellsToAdd.length; i++) {
if (indexLeftForward === 0) {
indexRowForward++;
}
var leftval_row = 0;
var topval_row = indexRowForward * calculatedRowSize.value;
var leftval_cell = i * (cellSizeOriented + props.sidegap * 2);
var _topval_cell = 0;
if (props.orientation === "horizontal") {
leftval_row = indexRowForward * calculatedRowSize.value;
topval_row = 0;
leftval_cell = 0;
_topval_cell = i * (cellSizeOriented + props.sidegap * 2);
}
if (indexLeftForward === 0) {
AddRow(topval_row, leftval_row, indexRowForward);
}
var key = cellsToAdd[i].index;
cellsdata.value[key] = {
id: cellsToAdd[i].id
};
var _currentRowElement = GetCurrentRowElement();
if (_currentRowElement) {
if (!_currentRowElement.cells[key]) {
AddCell(_topval_cell, leftval_cell, key);
}
}
indexLeftForward++;
indexForward++;
if (indexLeftForward > cellsNumberOriented - 1) {
indexLeftForward = 0;
var rowRemoved = false;
for (var i = 0; i < cellsToAdd.length; i++) {
delete cellsdata.value[indexBackward];
indexBackward++;
indexCacheBackward++;
if (!rowRemoved) {
if (alldata.value[indexRowBackward]) {
delete alldata.value[indexRowBackward];
}
rowRemoved = true;
}
}
indexRowBackward++;
indexCacheRowBackward++;
}
}
} else {
if (scrolldirection === 0 && previousscrolldirection !== 0) previousscrolldirection = 0;
} // Delete the cells we just added that are inside scrollercache
for (var i = 0; i < cellsToAdd.length; i++) {
delete scrollercache[cellsToAdd[i].index];
}
cellsToAdd = [];
} else {
// Add Items Backward
//console.log("Add Cells Backward");
// Get all the cells that required to be loaded
var _totalCellsToAdd = cellsNumberOriented - indexLeftBackward;
var cellsToAdd = [];
for (var i = 1; i <= _totalCellsToAdd; i++) {
var cachecell = scrollercache[indexBackward - i];
if (cachecell !== null && typeof cachecell !== "undefined") {
if (scrollercache[indexBackward - i]) {
cellsToAdd.push({
id: scrollercache[indexBackward - i].id,
item: null,
index: indexBackward - i
});
}
}
}
if (cellsToAdd.length > 0) {
for (var i = 0; i < cellsToAdd.length; i++) {
if (indexLeftBackward === 0) {
indexRowBackward--;
}
var leftval_row = 0;
var _topval_row = indexRowBackward * calculatedRowSize.value;
var leftval_cell = (cellsNumberOriented - 1 - indexLeftBackward) * (cellSizeOriented + props.sidegap * 2);
var topval_cell = 0;
if (props.orientation === "horizontal") {
leftval_row = indexRowBackward * calculatedRowSize.value;
_topval_row = 0;
leftval_cell = 0;
topval_cell = (cellsNumberOriented - 1 - indexLeftBackward) * (cellSizeOriented + props.sidegap * 2);
}
if (indexLeftBackward === 0) {
AddRow(_topval_row, leftval_row, indexRowBackward);
}
var _key = cellsToAdd[i].index;
cellsdata.value[_key] = {
id: cellsToAdd[i].id
};
var currentRowElement = GetCurrentRowElement();
if (currentRowElement) {
if (!currentRowElement.cells[_key]) {
AddCell(topval_cell, leftval_cell, _key);
}
}
indexBackward--;
indexLeftBackward++;
if (indexLeftBackward > cellsNumberOriented - 1) {
indexLeftBackward = 0;
var _rowRemoved = false;
for (var i = 0; i < cellsToAdd.length; i++) {
cellsdata.value[indexForward - 1];
delete cellsdata.value[indexForward - 1];
indexForward--;
indexCacheForward--;
if (!_rowRemoved) {
if (alldata.value[indexRowForward]) {
delete alldata.value[indexRowForward];
}
_rowRemoved = true;
}
}
indexRowForward--;
indexCacheRowForward--;
}
}
} else {
if (scrolldirection === 0 && previousscrolldirection !== 0) previousscrolldirection = 0;
}
for (var i = 0; i < cellsToAdd.length; i++) {
if (cellsToAdd[i]) delete scrollercache[cellsToAdd[i].index];
}
cellsToAdd = [];
}
}
}
function AddRow(_top, _left, _index, isForward) {
var rowHeight = parseInt(cellSizeOriented + props.sidegap * 2) + "px";
var rowWidth = "calc(100% - " + 2 * props.sidegap + "px)";
if (props.orientation === "horizontal") {
rowHeight = "calc(100% - " + 2 * props.sidegap + "px)";
rowWidth = parseInt(cellSizeOriented + props.sidegap * 2) + "px";
}
alldata.value[_index] = {
index: _index,
top: _top + "px",
left: _left + "px",
width: rowWidth,
height: rowHeight,
cells: {}
};
currentRowElement = alldata.value[_index];
}
function AddCell(_top, _left, key) {
var cellTop = _top;
var cellLeft = _left;
var currentRowElement = GetCurrentRowElement();
currentRowElement.cells[key] = {
index: key,
id: "item" + cellsdata.value[key].id,
left: cellLeft + "px",
flexbasis: 100 / cellsNumberOriented + "%",
top: cellTop + "px"
};
}
function GetCurrentRowElement() {
var resultElement = null;
/* if (previousscrolldirection === -1) {
if (alldata.value[indexRowBackward - 1] !== null && typeof alldata.value[indexRowBackward - 1] !== 'undefined') {
resultElement = alldata.value[indexRowBackward - 1];
}
} else {
if (alldata.value[indexRowForward - 1] !== null && typeof alldata.value[indexRowForward - 1] !== 'undefined') {
resultElement = alldata.value[indexRowForward - 1];
}
} */
resultElement = currentRowElement;
return resultElement;
}
function GenerateInitialCells() {
indexForward = Object.keys(cellsdata.value).reduce(function (key, v) {
return cellsdata.value[v] < cellsdata.value[key] ? v : key;
});
indexBackward = indexForward;
indexRowForward = -1;
indexRowBackward = 0;
indexLeftForward = 0;
indexLeftBackward = 0;
cellSizeOriented = cellHeightVal.value;
cellsNumberOriented = props.numberOfColumns;
if (props.cellSquared) calculatedRowSize.value = viewport.clientWidth / cellsNumberOriented;
if (props.orientation === "horizontal") {
cellSizeOriented = cellWidthVal.value;
cellsNumberOriented = props.numberOfRows;
if (props.cellSquared) calculatedRowSize.value = viewport.clientHeight / cellsNumberOriented;
} // In order have cells visible at the back of the scroller
// set Position at the half of the cells size
var startPos = parseInt(parseInt(Object.keys(cellsdata.value).length / 2) / cellsNumberOriented) * (cellSizeOriented + props.sidegap * 2);
translatePosition.value -= startPos; //let isFirstRow = true;
for (var key in cellsdata.value) {
if (indexLeftForward === 0) {
indexRowForward++;
}
var leftval_row = 0;
var topval_row = indexRowForward * calculatedRowSize.value;
var leftval_cell = indexLeftForward * (cellSizeOriented + props.sidegap * 2);
var topval_cell = 0;
if (props.orientation === "horizontal") {
leftval_row = indexRowForward * calculatedRowSize.value;
topval_row = 0;
leftval_cell = 0;
topval_cell = indexLeftForward * (cellSizeOriented + props.sidegap * 2);
}
if (indexLeftForward === 0) {
AddRow(topval_row, leftval_row, indexRowForward);
}
var currentRowElement = GetCurrentRowElement();
if (currentRowElement) {
if (!currentRowElement.cells[key]) {
AddCell(topval_cell, leftval_cell, key);
}
}
indexForward++;
indexLeftForward++;
if (indexLeftForward > cellsNumberOriented - 1) {
indexLeftForward = 0;
}
} //console.log(alldata.value);
indexCacheForward = indexForward;
indexCacheBackward = indexBackward;
indexCacheRowForward = indexRowForward;
indexCacheRowBackward = indexRowBackward;
container.style.transform = "translate" + translatePositionString + "(" + translatePosition.value + "px) ";
}
function CancelMomentumTracking() {
cancelAnimationFrame(momentumID);
}
function BeginMomentumTracking() {
CancelMomentumTracking();
momentumID = requestAnimationFrame(MomentumLoop);
}
function MomentumLoop() {
translatePosition.value += velocityCurrent;
if (props.orientation === "horizontal") velocityMomentum = 0.9;
velocityCurrent *= velocityMomentum;
if (Math.abs(velocityCurrent) > 0.5) {
momentumID = requestAnimationFrame(MomentumLoop);
}
} // ---- Events
window.addEventListener("wheel", function (e) {
var timediff = Date.now() - timeSinceLastScroll;
finalScrollSpeed = props.scrollSpeed * 2;
if (timediff < 10) {
finalScrollSpeed = props.scrollSpeed * 6;
}
var deltaY = Math.sign(e.deltaY);
var walk = deltaY * finalScrollSpeed;
var _translatePositionPrevious = translatePosition.value;
translatePosition.value += -walk;
velocityCurrent = translatePosition.value - _translatePositionPrevious;
BeginMomentumTracking();
timeSinceLastScroll = Date.now();
});
window.addEventListener("resize", function (e) {
if (props.cellSquared) {
if (Object.keys(alldata.value).length > 0) resizeWindowData = Object.assign({}, alldata.value);
alldata.value = {};
calculatedRowSize.value = viewport.clientWidth / cellsNumberOriented;
if (props.orientation === "horizontal") {
calculatedRowSize.value = viewport.clientHeight / cellsNumberOriented;
}
clearTimeout(resizeWindowTimeout);
resizeWindowTimeout = setTimeout(function () {
alldata.value = resizeWindowData;
}, 500);
}
}); // ---- Watchers
watch(function () {
return props.modelValue;
}, function (first, second) {
if (Object.keys(cellsdata.value).length === 0 && Object.keys(first).length > 0) {
cellsdata.value = first;
GenerateInitialCells();
}
}, {
deep: true
}); // ---- Lifecycle Hooks
onMounted(function () {
console.log("onMounted");
container = document.getElementById(containerId.value);
viewport = document.getElementById(viewportId.value); // Add Container Events after its creation
viewport.addEventListener("mousedown", function (e) {
mouseDown = true;
dragScrollPreviousPosition = e.pageY;
if (props.orientation === "horizontal") {
dragScrollPreviousPosition = e.pageX;
}
});
document.addEventListener("mouseup", function (e) {
mouseDown = false;
if (Math.abs(velocityCurrent) > maxVelocity) velocityCurrent = maxVelocity * Math.sign(velocityCurrent);
BeginMomentumTracking();
});
document.addEventListener("mousemove", function (e) {
if (!mouseDown) return;
e.preventDefault();
var moveSpeed = 1;
var walk = e.pageY - dragScrollPreviousPosition;
if (props.orientation === "horizontal") {
walk = e.pageX - dragScrollPreviousPosition;
dragScrollPreviousPosition = e.pageX;
} else {
dragScrollPreviousPosition = e.pageY;
}
velocityCurrent = walk;
translatePosition.value += walk * moveSpeed;
});
viewport.addEventListener("mouseleave", function (e) {
mouseDown = false;
});
setInterval(function () {
AnimateScroller();
}, updateTime);
context.emit("on-initilized");
}); // Make sure to reset the refs before each update.
onBeforeUpdate(function () {
divs.value = [];
});
return {
// Attributes
scrollerId: scrollerId,
containerId: containerId,
viewportId: viewportId,
cellWidthVal: cellWidthVal,
cellHeightVal: cellHeightVal,
translatePosition: translatePosition,
cellsdata: cellsdata,
alldata: alldata,
cells: cells,
divs: divs,
scrollbarPosition: scrollbarPosition,
calculatedRowSize: calculatedRowSize,
renderKey: renderKey,
// Methods Public
GetContainerHeight: GetContainerHeight,
OnScrollBarChanged: OnScrollBarChanged,
onBackwardsClicked: onBackwardsClicked,
onForwardClicked: onForwardClicked
};
}
});
var _hoisted_1 = ["id"];
var _hoisted_2 = ["id"];
var _hoisted_3 = ["id"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
var _component_VScrollerRow = resolveComponent("VScrollerRow");
var _component_VScrollerScrollBar = resolveComponent("VScrollerScrollBar");
return openBlock(), createElementBlock("div", {
id: _ctx.scrollerId,
class: "scroller noselect"
}, [createElementVNode("div", {
id: _ctx.viewportId,
class: "scroller-viewport"
}, [(openBlock(), createElementBlock("div", {
id: _ctx.containerId,
key: _ctx.renderKey,
class: "scroller-container",
style: normalizeStyle([{
height: _ctx.GetContainerHeight()
}])
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.alldata, function (row, rowkey) {
return openBlock(), createBlock(_component_VScrollerRow, {
key: rowkey,
calculatedRowSize: _ctx.calculatedRowSize,
sidegap: _ctx.sidegap,
row: row,
orientation: _ctx.orientation
}, null, 8, ["calculatedRowSize", "sidegap", "row", "orientation"]);
}), 128))], 12, _hoisted_3))], 8, _hoisted_2), createVNode(_component_VScrollerScrollBar, {
active: _ctx.hasScrollbar,
orientation: _ctx.orientation,
mode: _ctx.isInfinite ? 'infinite' : 'normal',
onOnChange: _ctx.OnScrollBarChanged,
onOnBackwardsClicked: _ctx.onBackwardsClicked,
onOnForwardClicked: _ctx.onForwardClicked,
viewportId: _ctx.viewportId
}, null, 8, ["active", "orientation", "mode", "onOnChange", "onOnBackwardsClicked", "onOnForwardClicked", "viewportId"])], 8, _hoisted_1);
}
var css_248z = "\r\n/* @import \"./scroller.css\"; */\r\n";
styleInject(css_248z);
script.render = render;
var VScroller = { VScroller: script, VScrollerScrollBar: script$1, VScrollerRow: script$2 };
//export default VScroller;
export { VScroller as default };
import { s as script } from './VScroller-90bf03d9.js';
export { s as default } from './VScroller-90bf03d9.js';
import './_rollupPluginBabelHelpers-8e522d0f.js';
import 'vue';
import './VScrollerScrollBar-0f77a3ab.js';
import './style-inject.es-19e86df4.js';
import './VScrollerRow-e5d8fa8f.js';

6

dist/esm/VScrollerRow.js

@@ -5,7 +5,7 @@

// https://github.com/yannisraft/chronocraft-scroller-vue.git
// v0.1.19
// v0.1.20
// MIT License
import { s as script } from './VScrollerRow-2cd98ce5.js';
export { s as default } from './VScrollerRow-2cd98ce5.js';
import { s as script } from './VScrollerRow-e5d8fa8f.js';
export { s as default } from './VScrollerRow-e5d8fa8f.js';
import 'vue';

8

dist/esm/VScrollerScrollBar.js

@@ -5,8 +5,8 @@

// https://github.com/yannisraft/chronocraft-scroller-vue.git
// v0.1.19
// v0.1.20
// MIT License
import { s as script } from './VScrollerScrollBar-d8fb6051.js';
export { s as default } from './VScrollerScrollBar-d8fb6051.js';
import { s as script } from './VScrollerScrollBar-0f77a3ab.js';
export { s as default } from './VScrollerScrollBar-0f77a3ab.js';
import 'vue';
import './style-inject.es-53f50720.js';
import './style-inject.es-19e86df4.js';

2

package.json
{
"name": "chronocraft-scroller-vue",
"version": "0.1.19",
"version": "0.1.20",
"private": false,

@@ -5,0 +5,0 @@ "description": "A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component",

4

src/components/VScroller/index.ts
import VScroller from "./VScroller.vue";
import VScrollerScrollBar from "./VScrollerScrollBar.vue";
import VScrollerRow from "./VScrollerRow.vue";
export default { VScroller, VScrollerScrollBar, VScrollerRow };
//export default VScroller;
//export default { VScroller, VScrollerScrollBar, VScrollerRow };
export default VScroller;

2

types/index.d.ts

@@ -7,3 +7,3 @@ import { DefineComponent, Plugin } from "vue";

export const Scroller: Exclude<Plugin["install"], undefined> | DefineComponent;
//export const Scroller: Exclude<Plugin["install"], undefined> | DefineComponent;
export const VScroller: Exclude<Plugin["install"], undefined> | DefineComponent;
dist/cjs/scroller.js

Sorry, the diff of this file is too big to display

dist/components/scroller/index.ts

Sorry, the diff of this file is too big to display

dist/esm/scroller.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc