chronocraft-scroller-vue - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

dist/chronoscrollervue-browser.min.js

@@ -1,1 +0,1 @@
-var chronoscrollervue=function(e,t){"use strict";var n=t.defineComponent({name:"TimeClock",setup(e,n){let a=t.ref("00/00/0000"),r=t.ref("00:00:00");const o=["SUN","MON","TUE","WED","THU","FRI","SAT"];function i(e){return e<10?`0${e}`:e}return t.onMounted((()=>{setInterval((()=>{var e=new Date;r.value=i(e.getHours())+":"+i(e.getMinutes())+":"+i(e.getSeconds()),a.value=i(e.getFullYear())+"-"+i(e.getMonth()+1)+"-"+i(e.getDate())+" "+o[e.getDay()]}),1e3)})),{dateString:a,timeString:r}}});const a=e=>(t.pushScopeId("data-v-749ae0b0"),e=e(),t.popScopeId(),e),r={class:"widget-container"},o=a((()=>t.createElementVNode("h3",null,"Chronocraft Time Clock",-1))),i={class:"clock"},l=a((()=>t.createElementVNode("div",{class:"madewith"},"Created with Composition API",-1)));function d(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}d("\nh2[data-v-749ae0b0] {\r\n    font-size: 46pt;\r\n    font-weight: 500;\r\n    margin: 5px;\n}\nh4[data-v-749ae0b0] {\r\n    font-size: 18pt;\r\n    font-weight: 500;\r\n    margin: 5px;\n}\r\n"),n.render=function(e,n,a,d,s,c){return t.openBlock(),t.createElementBlock("div",r,[o,t.createElementVNode("div",i,[t.createElementVNode("h4",null,t.toDisplayString(e.dateString),1),t.createElementVNode("h2",null,t.toDisplayString(e.timeString),1)]),l])},n.__scopeId="data-v-749ae0b0";var s={name:"CountDownTimer",data:()=>({timeLeft:0,timeLeftString:"00:00",intervalTimer:null,status:"Idle",availableTimes:[{time:10,label:"10s"},{time:180,label:"3m"},{time:300,label:"5m"}]}),methods:{SetCounterTime(e){var t=this;this.intervalTimer&&clearInterval(this.intervalTimer),this.timeLeft=e,this.status="Counting...",this.UpdateTimeLabel(),this.intervalTimer=setInterval((()=>{t.timeLeft<=0?(clearInterval(t.intervalTimer),t.status="Ended",setTimeout((()=>{t.status="Idle"}),2e3)):(t.timeLeft--,t.UpdateTimeLabel(),t.status="Counting...")}),1e3)},UpdateTimeLabel(){const e=Math.floor(this.timeLeft%3600/60),t=this.timeLeft%60;this.timeLeftString=`${this.zeroPadded(e)}:${this.zeroPadded(t)}`},zeroPadded:e=>e<10?`0${e}`:e,hourConvert:e=>e%12||12}};const c=e=>(t.pushScopeId("data-v-51ddb80e"),e=e(),t.popScopeId(),e),m={class:"widget-container"},u=c((()=>t.createElementVNode("h3",null,"Chronocraft Count down Timer",-1))),p={class:"countdown"},h={class:"buttonscontainer"},v=["onClick"],f=c((()=>t.createElementVNode("div",{class:"madewith"},"Created with Options API",-1)));d(".buttonscontainer button[data-v-51ddb80e] {\r\n    margin-left: 20px;\r\n    padding: 10px 20px;\r\n    font-size: 16pt;\r\n    box-shadow: rgb(0 0 0 / 24%) 0px 1px 4px;\r\n    border: 0px solid;\r\n    background: #eaeaea;\n}\n.buttonscontainer button[data-v-51ddb80e]:hover {\r\n    cursor: pointer;\n}\n.buttonscontainer button[data-v-51ddb80e]:active {\r\n    background: #f7f7f7;\r\n    box-shadow: rgb(0 0 0 / 24%) 0px 0px 2px;\n}\r\n"),s.render=function(e,n,a,r,o,i){return t.openBlock(),t.createElementBlock("div",m,[u,t.createElementVNode("div",p,[t.createElementVNode("h2",null,t.toDisplayString(e.timeLeftString),1)]),t.createElementVNode("div",h,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.availableTimes,((e,n)=>(t.openBlock(),t.createElementBlock("button",{key:n,onClick:t=>i.SetCounterTime(e.time),type:"button"},t.toDisplayString(e.label),9,v)))),128))]),t.createElementVNode("h5",null,"Status: "+t.toDisplayString(e.status),1),f])},s.__scopeId="data-v-51ddb80e";var b=Object.freeze({__proto__:null,TimeClock:n,CountDownTimer:s});const g={install(e){Object.entries(b).forEach((([t,n])=>{e.component(t,n)}))}};return e.CountDownTimer=s,e.TimeClock=n,e.default=g,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue);
+var chronoscrollervue=function(e,t){"use strict";var l=t.defineComponent({name:"Scroller",components:{},props:{data:{type:Array,default:()=>[]},orientation:{type:String,default:"vertical"},numcols:{type:Number,default:4},numrows:{type:Number,default:4},gap:{type:Number,default:10},contentpadding:{type:Number,default:10},cellheight:{type:Number,default:100},cellwidth:{type:Number,default:100},cellsquared:{type:Boolean,default:!0},wheelscrollspeed:{type:Number,default:12}},setup(e,l){let n=t.ref(e.cellwidth+"px"),r=t.ref(e.cellheight+"px"),o=t.ref("100%"),a=null;const i=t.ref(null);let s,c,d,f=0,p=0,u=!1,v=!1,h=0,m=0,x=0,g=!1,b=200,w=!1,y=t.ref(e.data);function L(){"vertical"===e.orientation?a.scrollTop+=f:a.scrollLeft+=f,f*=.97,Math.abs(f)>.5&&(p=requestAnimationFrame(L))}function k(){cancelAnimationFrame(p)}function T(){k(),p=requestAnimationFrame(L)}function S(){var e,t=S.width;return void 0===t&&((e=document.createElement("div")).innerHTML='<div style="width:50px;height:50px;position:absolute;left:-50px;top:-50px;overflow:auto;"><div style="width:1px;height:100px;"></div></div>',e=e.firstChild,document.body.appendChild(e),t=S.width=e.offsetWidth-e.clientWidth,document.body.removeChild(e)),t}function E(t){y.value=[...y.value,...t],y.value.splice(0,t.length);let l=document.querySelector(".scroller-cell");l.offsetHeight,e.gap;let n=l.offsetWidth+e.gap;var r=0;if("vertical"===e.orientation)parseInt(t.length/e.numcols),r=m,a.scrollTop=r,d=r-(m-d);else{var o=parseInt(t.length/e.numrows);r=m-n*o,a.scrollLeft=r,d=r-(m-d)}setTimeout((()=>{w=!1}),100)}function z(t){y.value=[...t,...y.value],y.value.splice(y.value.length-t.length,y.value.length-1);let l=document.querySelector(".scroller-cell");l.offsetHeight,e.gap;let n=l.offsetWidth+e.gap;var r=0;if("vertical"===e.orientation)parseInt(t.length/e.numcols),r=m,a.scrollTop=r,d=r-(m-d);else{var o=parseInt(t.length/e.numrows);r=m+n*o,a.scrollLeft=r,d=r-(m-d)}setTimeout((()=>{w=!1}),100)}async function W(t,n,r){1===t&&("vertical"===e.orientation?a.scrollTop+a.offsetHeight>=a.scrollHeight-b&&(w||(w=!0,l.emit("on-update-data-next",(e=>{E(e)})))):(a.scrollLeft+a.offsetWidth>=a.scrollWidth-b||a.scrollLeft===a.scrollWidth-a.clientWidth)&&(w||(w=!0,l.emit("on-update-data-next",(e=>{setTimeout((()=>{E(e)}),10)}))))),-1===t&&("vertical"===e.orientation?a.scrollTop<b&&(w||(w=!0,l.emit("on-update-data-previous",(e=>{z(e)})))):a.scrollLeft<b&&(w||(w=!0,l.emit("on-update-data-previous",(e=>{setTimeout((()=>{z(e)}),10)})))))}function M(){console.log("Initialize"),a=document.querySelector(".scroller"),x=S();var t=0,i=0,p=0;if("vertical"===e.orientation)t=(e.numcols-1)*e.gap+x,a.offsetWidth,i=(a.offsetWidth-t-2*e.contentpadding)/e.numcols,n.value=String(i+"%"),o.value=String(i+"px"),e.cellsquared&&(p=(a.clientWidth-t-2*e.contentpadding)/e.numcols,r.value=p+"px");else{t=(e.numrows-1)*e.gap+x,a.offsetHeight,p=(a.offsetHeight-t-2*e.contentpadding)/e.numrows;var g=(a.offsetHeight-t-2*e.contentpadding)/e.numrows;r.value=String(p+"px"),o.value=String(g+"px"),e.cellsquared&&(i=p,n.value=i+"px")}a.addEventListener("mousedown",(t=>{u=!0,a.classList.add("active"),"vertical"===e.orientation?(s=t.pageY-a.offsetTop,c=t.pageY,d=a.scrollTop,h=t.clientY):(s=t.pageX-a.offsetLeft,c=t.pageX,d=a.scrollLeft,h=t.clientX),k()})),a.addEventListener("mouseleave",(()=>{u=!1,a.classList.remove("active")})),a.addEventListener("mouseup",(t=>{u=!1,v=!1,a.classList.remove("active"),T();var n=0;n="vertical"===e.orientation?c-t.pageY:c-t.pageX,Math.abs(n)>10&&l.emit("on-scroll")})),a.addEventListener("mousemove",(t=>{if(u){t.preventDefault(),v=!0;var l=0,n=0;"vertical"===e.orientation?(l=2*(t.pageY-a.offsetTop-s),n=a.scrollTop,a.scrollTop=d-l,f=a.scrollTop-n,a.scrollTop=d-l):(l=2*(t.pageX-a.offsetLeft-s),n=a.scrollLeft,a.scrollLeft=d-l,f=a.scrollLeft-n,a.scrollLeft=d-l)}})),a.addEventListener("wheel",(t=>{if(k(),"vertical"===e.orientation){const l=Math.sign(t.deltaY)*e.wheelscrollspeed,n=a.scrollTop;a.scrollTop+=l,f=a.scrollTop-n}else{const l=Math.sign(t.deltaY)*e.wheelscrollspeed,n=a.scrollLeft;if(a.scrollLeft+=l,f=a.scrollLeft-n,a.scrollLeft===a.scrollWidth-a.clientWidth){console.log("detectScrollEdges");W(parseInt(0/Math.abs(0)))}}l.emit("on-scroll"),T()})),a.addEventListener("scroll",(t=>{var l=0;if("vertical"===e.orientation){let e=a.scrollTop;l=e-m,W(parseInt(l/Math.abs(l))),m=e}else{let e=a.scrollLeft;l=e-m,W(parseInt(l/Math.abs(l))),m=e}}))}function B(e){M()}return t.onMounted((()=>{window.addEventListener("resize",B),M()})),{cellW:n,cellH:r,cellFlexBasis:o,scroller:a,cellRef:i,isMouseDown:u,startPos:s,startscrollPos:c,movescrollPos:d,scrollerMoving:v,previousPos:h,scrollbarWidth:x,justLoaded:g,scrollLoadingOffset:b,cellsdata:y}}});const n={class:"cell-text"};!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===l&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.scroller[data-v-52b13696] {\r\n    height: 500px;\r\n    background: #eaeaea;\n}\n.vertical-scroller[data-v-52b13696] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\n.horizontal-scroller[data-v-52b13696] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\n.scroller-container[data-v-52b13696] {\r\n    -ms-flex-line-pack: start;\r\n            -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    -webkit-flex-direction: row;\r\n        -ms-flex-direction: row;\r\n            flex-direction: row;\r\n    -webkit-flex-wrap: wrap;\r\n        -ms-flex-wrap: wrap;\r\n            flex-wrap: wrap;\n}\n.vertical-container[data-v-52b13696] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\n.horizontal-container[data-v-52b13696] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    -webkit-flex-flow: column wrap !important;\r\n        -ms-flex-flow: column wrap !important;\r\n            flex-flow: column wrap !important;\r\n    height: inherit !important;\r\n    -ms-flex-line-pack: start;\r\n            -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    width: 100%;\n}\n.scroller-cell[data-v-52b13696] {\r\n\r\n    background: #b6b6b6;\r\n\r\n    -webkit-flex: inherit;\r\n\r\n        -ms-flex: inherit;\r\n\r\n            flex: inherit;\r\n    -webkit-flex-grow: 0;\r\n        -ms-flex-positive: 0;\r\n            flex-grow: 0;\r\n    -ms-flex-negative: 0;\r\n            -webkit-flex-shrink: 0;\r\n            flex-shrink: 0;\r\n    -ms-flex-preferred-size: 25%;\r\n            -webkit-flex-basis: 25%;\r\n            flex-basis: 25%;\r\n\r\n    /* for theme */\r\n    background: #ffffff;\r\n    /* box-shadow: 2px 2px 2px 2px rgb(221 221 221 / 60%); */\r\n    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\r\n    border-radius: 5px;\n}\n.vertical-cell[data-v-52b13696] {\r\n    display: inline-block;\r\n    height: 50px;\n}\n.horizontal-cell[data-v-52b13696] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    height: unset !important;\r\n    width: 90px;\n}\n.dummycell[data-v-52b13696] {\r\n    height: 20px;\n}\n.cell-text[data-v-52b13696] {\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 18pt;\n}\r\n"),l.render=function(e,l,r,o,a,i){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["scroller","vertical"===e.orientation?"vertical-scroller":"horizontal-scroller"])},[t.createElementVNode("div",{class:t.normalizeClass(["scroller-container","vertical"===e.orientation?"vertical-container":"horizontal-container"]),style:t.normalizeStyle([{gap:e.gap+"px"},{padding:e.contentpadding+"px"}])},[t.renderSlot(e.$slots,"content",{},(()=>[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(e.cellsdata,(l=>(t.openBlock(),t.createElementBlock("div",{ref_for:!0,ref:"cellRef",key:l.id,class:t.normalizeClass(["scroller-cell","vertical"===e.orientation?"vertical-cell":"horizontal-cell"]),style:t.normalizeStyle({"flex-basis":e.cellFlexBasis,height:e.cellH,width:e.cellW})},[t.renderSlot(e.$slots,"cell",{},(()=>[t.createElementVNode("span",n,t.toDisplayString(l.id),1)]))],6)))),128))]))],6)],2)},l.__scopeId="data-v-52b13696";var r=Object.freeze({__proto__:null,Scroller:l});const o={install(e){Object.entries(r).forEach((([t,l])=>{e.component(t,l)}))}};return e.Scroller=l,e.default=o,Object.defineProperty(e,"__esModule",{value:!0}),e}({},Vue);

dist/chronoscrollervue.esm.js

 
  // chronocraft-scroller-vue
- // A VueJS 3.0 building template to create your own components library
+ // A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.0.20
+ // v0.0.9
  // undefined License
 
-import { defineComponent, ref, onMounted, openBlock, createElementBlock, createElementVNode, toDisplayString, pushScopeId, popScopeId, Fragment, renderList } from 'vue';
+import { defineComponent, ref, onMounted, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, renderSlot, Fragment, renderList, toDisplayString } from 'vue';
 
-// Component created with Composition API
-var script$1 = defineComponent({
-  name: 'TimeClock',
+var script = defineComponent({
+  name: "Scroller",
+  components: {},
+  props: {
+    data: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    orientation: {
+      type: String,
+      default: "vertical"
+    },
+    numcols: {
+      type: Number,
+      default: 4
+    },
+    numrows: {
+      type: Number,
+      default: 4
+    },
+    gap: {
+      type: Number,
+      default: 10
+    },
+    contentpadding: {
+      type: Number,
+      default: 10
+    },
+    cellheight: {
+      type: Number,
+      default: 100
+    },
+    cellwidth: {
+      type: Number,
+      default: 100
+    },
+    cellsquared: {
+      type: Boolean,
+      default: true
+    },
+    wheelscrollspeed: {
+      type: Number,
+      default: 12
+    }
+  },
 
   setup(props, context) {
-    let dateString = ref('00/00/0000');
-    let timeString = ref('00:00:00');
-    const week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
+    let cellW = ref(props.cellwidth + "px");
+    let cellH = ref(props.cellheight + "px");
+    let cellFlexBasis = ref("100%");
+    let scroller = null;
+    const cellRef = ref(null);
+    let veloc = 0;
+    let momentumID = 0;
+    let velocity = 0.97;
+    let isMouseDown = false;
+    let startPos;
+    let startscrollPos;
+    let movescrollPos;
+    let scrollerMoving = false;
+    let previousPos = 0;
+    let previousScrollPos = 0;
+    let scrollbarWidth = 0;
+    let justLoaded = false;
+    let scrollLoadingOffset = 200;
+    let loadingCells = false;
+    let cellsdata = ref(props.data);
 
-    function zeroPadded(num) {
-      return num < 10 ? `0${num}` : num;
+    function momentumLoop() {
+      if (props.orientation === 'vertical') {
+        scroller.scrollTop += veloc;
+      } else {
+        scroller.scrollLeft += veloc;
+      }
+
+      veloc *= velocity;
+
+      if (Math.abs(veloc) > 0.5) {
+        momentumID = requestAnimationFrame(momentumLoop);
+      }
     }
 
+    function cancelMomentumTracking() {
+      cancelAnimationFrame(momentumID);
+    }
+
+    function beginMomentumTracking() {
+      cancelMomentumTracking();
+      momentumID = requestAnimationFrame(momentumLoop);
+    }
+
+    function getScrollbarWidth() {
+      var div,
+          width = getScrollbarWidth.width;
+
+      if (width === undefined) {
+        div = document.createElement('div');
+        div.innerHTML = '<div style="width:50px;height:50px;position:absolute;left:-50px;top:-50px;overflow:auto;"><div style="width:1px;height:100px;"></div></div>';
+        div = div.firstChild;
+        document.body.appendChild(div);
+        width = getScrollbarWidth.width = div.offsetWidth - div.clientWidth;
+        document.body.removeChild(div);
+      }
+
+      return width;
+    }
+
+    function GenerateNextData(newdata) {
+      // Add new data
+      cellsdata.value = [...cellsdata.value, ...newdata]; // Remove Last n Cells where n=newdata.length
+      //
+
+      cellsdata.value.splice(0, newdata.length);
+      let cell = document.querySelector(".scroller-cell");
+      cell.offsetHeight + props.gap;
+      let cellwidth = cell.offsetWidth + props.gap;
+      var diff = 0;
+      var targetPosition = 0;
+
+      if (props.orientation === 'vertical') {
+        parseInt(newdata.length / props.numcols);
+        targetPosition = previousScrollPos; // - (cellheight * colsloaded);
+
+        scroller.scrollTop = targetPosition;
+        diff = previousScrollPos - movescrollPos;
+        movescrollPos = targetPosition - diff;
+      } else {
+        var rowsloaded = parseInt(newdata.length / props.numrows);
+        targetPosition = previousScrollPos - cellwidth * rowsloaded;
+        scroller.scrollLeft = targetPosition;
+        diff = previousScrollPos - movescrollPos;
+        movescrollPos = targetPosition - diff;
+      }
+
+      setTimeout(() => {
+        loadingCells = false;
+      }, 100);
+    }
+
+    function GeneratePreviousData(newdata) {
+      // Add new data
+      cellsdata.value = [...newdata, ...cellsdata.value]; // Remove Last n Cells where n=newdata.length
+      //
+
+      cellsdata.value.splice(cellsdata.value.length - newdata.length, cellsdata.value.length - 1);
+      let cell = document.querySelector(".scroller-cell");
+      cell.offsetHeight + props.gap;
+      let cellwidth = cell.offsetWidth + props.gap;
+      var diff = 0;
+      var targetPosition = 0;
+
+      if (props.orientation === 'vertical') {
+        parseInt(newdata.length / props.numcols);
+        targetPosition = previousScrollPos; // - (cellheight * colsloaded);
+
+        scroller.scrollTop = targetPosition;
+        diff = previousScrollPos - movescrollPos;
+        movescrollPos = targetPosition - diff;
+      } else {
+        var rowsloaded = parseInt(newdata.length / props.numrows);
+        targetPosition = previousScrollPos + cellwidth * rowsloaded;
+        scroller.scrollLeft = targetPosition;
+        diff = previousScrollPos - movescrollPos;
+        movescrollPos = targetPosition - diff;
+      }
+
+      setTimeout(() => {
+        loadingCells = false;
+      }, 100);
+    }
+
+    async function detectScrollEdges(sign, dragging, e) {
+      // Detect Scroll on Edges
+      // ----------------------
+      if (sign === 1) {
+        if (props.orientation === 'vertical') {
+          if (scroller.scrollTop + scroller.offsetHeight >= scroller.scrollHeight - scrollLoadingOffset) {
+            if (!loadingCells && !justLoaded) {
+              loadingCells = true;
+              context.emit("on-update-data-next", newdata => {
+                GenerateNextData(newdata);
+              });
+            }
+          }
+        } else {
+          if (scroller.scrollLeft + scroller.offsetWidth >= scroller.scrollWidth - scrollLoadingOffset || scroller.scrollLeft === scroller.scrollWidth - scroller.clientWidth) {
+            if (!loadingCells && !justLoaded) {
+              loadingCells = true;
+              context.emit("on-update-data-next", newdata => {
+                setTimeout(() => {
+                  GenerateNextData(newdata);
+                }, 10);
+              });
+            }
+          }
+        }
+      }
+
+      if (sign === -1) {
+        if (props.orientation === 'vertical') {
+          if (scroller.scrollTop < scrollLoadingOffset) {
+            if (!loadingCells && !justLoaded) {
+              loadingCells = true;
+              context.emit("on-update-data-previous", newdata => {
+                // done
+                GeneratePreviousData(newdata);
+              });
+            }
+          }
+        } else {
+          if (scroller.scrollLeft < scrollLoadingOffset) {
+            if (!loadingCells && !justLoaded) {
+              loadingCells = true;
+              context.emit("on-update-data-previous", newdata => {
+                // done
+                setTimeout(() => {
+                  GeneratePreviousData(newdata);
+                }, 10);
+              });
+            }
+          }
+        }
+      }
+    }
+
     function Initialize() {
-      setInterval(() => {
-        var cd = new Date();
-        timeString.value = zeroPadded(cd.getHours()) + ':' + zeroPadded(cd.getMinutes()) + ':' + zeroPadded(cd.getSeconds());
-        dateString.value = zeroPadded(cd.getFullYear()) + '-' + zeroPadded(cd.getMonth() + 1) + '-' + zeroPadded(cd.getDate()) + ' ' + week[cd.getDay()];
-      }, 1000);
+      console.log('Initialize');
+      scroller = document.querySelector(".scroller");
+      scrollbarWidth = getScrollbarWidth();
+      var totalgap = 0;
+      var newCellW = 0;
+      var newCellH = 0;
+
+      if (props.orientation === 'vertical') {
+        totalgap = (props.numcols - 1) * props.gap + scrollbarWidth;
+        totalgap / scroller.offsetWidth * 100;
+        newCellW = (scroller.offsetWidth - totalgap - props.contentpadding * 2) / props.numcols;
+        cellW.value = String(newCellW + '%');
+        cellFlexBasis.value = String(newCellW + 'px');
+
+        if (props.cellsquared) {
+          newCellH = (scroller.clientWidth - totalgap - props.contentpadding * 2) / props.numcols;
+          cellH.value = newCellH + "px";
+        }
+      } else {
+        totalgap = (props.numrows - 1) * props.gap + scrollbarWidth;
+        totalgap / scroller.offsetHeight * 100;
+        newCellH = (scroller.offsetHeight - totalgap - props.contentpadding * 2) / props.numrows; //var newCellFlexBasis = ((100 - totalgappercent) / props.numrows);
+
+        var newCellFlexBasis = (scroller.offsetHeight - totalgap - props.contentpadding * 2) / props.numrows;
+        cellH.value = String(newCellH + 'px'); //cellFlexBasis.value = String(newCellFlexBasis + '%');
+
+        cellFlexBasis.value = String(newCellFlexBasis + 'px');
+
+        if (props.cellsquared) {
+          newCellW = newCellH;
+          cellW.value = newCellW + "px";
+        }
+      } // ---- Add Scroller Events ----
+
+
+      scroller.addEventListener("mousedown", e => {
+        isMouseDown = true;
+        scroller.classList.add("active");
+
+        if (props.orientation === 'vertical') {
+          startPos = e.pageY - scroller.offsetTop;
+          startscrollPos = e.pageY;
+          movescrollPos = scroller.scrollTop;
+          previousPos = e.clientY;
+        } else {
+          startPos = e.pageX - scroller.offsetLeft;
+          startscrollPos = e.pageX;
+          movescrollPos = scroller.scrollLeft;
+          previousPos = e.clientX;
+        }
+
+        cancelMomentumTracking();
+      });
+      scroller.addEventListener("mouseleave", () => {
+        isMouseDown = false;
+        scroller.classList.remove("active");
+      });
+      scroller.addEventListener("mouseup", e => {
+        isMouseDown = false;
+        scrollerMoving = false;
+        scroller.classList.remove("active");
+        beginMomentumTracking();
+        var scrolldiff = 0;
+
+        if (props.orientation === 'vertical') {
+          scrolldiff = startscrollPos - e.pageY;
+        } else {
+          scrolldiff = startscrollPos - e.pageX;
+        }
+
+        if (Math.abs(scrolldiff) > 10) {
+          context.emit("on-scroll");
+        }
+      });
+      scroller.addEventListener("mousemove", e => {
+        if (!isMouseDown) return;
+        e.preventDefault();
+        scrollerMoving = true;
+        var pos = 0;
+        var walk = 0;
+        var prevscrollPos = 0;
+
+        if (props.orientation === 'vertical') {
+          pos = e.pageY - scroller.offsetTop;
+          walk = (pos - startPos) * 2; //scroll-fast
+
+          prevscrollPos = scroller.scrollTop;
+          scroller.scrollTop = movescrollPos - walk;
+          veloc = scroller.scrollTop - prevscrollPos;
+          scroller.scrollTop = movescrollPos - walk;
+        } else {
+          pos = e.pageX - scroller.offsetLeft;
+          walk = (pos - startPos) * 2; //scroll-fast
+
+          prevscrollPos = scroller.scrollLeft;
+          scroller.scrollLeft = movescrollPos - walk;
+          veloc = scroller.scrollLeft - prevscrollPos;
+          scroller.scrollLeft = movescrollPos - walk;
+        } //UpdateCurrentMonth();
+
+      });
+      scroller.addEventListener("wheel", e => {
+        cancelMomentumTracking();
+
+        if (props.orientation === 'vertical') {
+          const deltaY = Math.sign(e.deltaY);
+          const walk = deltaY * props.wheelscrollspeed;
+          const prevscrollTop = scroller.scrollTop;
+          scroller.scrollTop += walk;
+          veloc = scroller.scrollTop - prevscrollTop;
+        } else {
+          const deltaX = Math.sign(e.deltaY);
+          const walk = deltaX * props.wheelscrollspeed;
+          const prevscrollLeft = scroller.scrollLeft;
+          scroller.scrollLeft += walk;
+          veloc = scroller.scrollLeft - prevscrollLeft; //console.log("scroller.scrollLeft: ", scroller.scrollLeft);
+          //console.log("scroller.scrollWidth: ", scroller.scrollWidth - scroller.clientWidth);
+
+          if (scroller.scrollLeft === scroller.scrollWidth - scroller.clientWidth) {
+            console.log("detectScrollEdges");
+            var dirsign = 1;
+            var delta = 0;
+            dirsign = parseInt(delta / Math.abs(delta));
+            detectScrollEdges(dirsign);
+          }
+        }
+
+        context.emit("on-scroll");
+        beginMomentumTracking(); //UpdateCurrentMonth();
+      });
+      scroller.addEventListener("scroll", e => {
+        var delta = 0;
+        var dirsign = 1;
+
+        if (props.orientation === 'vertical') {
+          let scroll = scroller.scrollTop;
+          delta = scroll - previousScrollPos;
+          dirsign = parseInt(delta / Math.abs(delta));
+          detectScrollEdges(dirsign);
+          previousScrollPos = scroll;
+        } else {
+          let scroll = scroller.scrollLeft;
+          delta = scroll - previousScrollPos;
+          dirsign = parseInt(delta / Math.abs(delta));
+          detectScrollEdges(dirsign);
+          previousScrollPos = scroll;
+        }
+      });
     }
 
+    function WindowResized(e) {
+      Initialize();
+    }
+
     onMounted(() => {
+      window.addEventListener("resize", WindowResized);
       Initialize();
     });
     return {
-      dateString,
-      timeString
+      cellW,
+      cellH,
+      cellFlexBasis,
+      scroller,
+      cellRef,
+      isMouseDown,
+      startPos,
+      startscrollPos,
+      movescrollPos,
+      scrollerMoving,
+      previousPos,
+      scrollbarWidth,
+      justLoaded,
+      scrollLoadingOffset,
+      cellsdata
     };
   }
-  /* data: () => ({
-      dateString: '00/00/0000',
-      timeString: '00:00:00',
-      week: ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'],
-      intervalTimer: null
-  }),
-  mounted() {
-      var self = this;
-      this.intervalTimer = setInterval(() => {
-          var cd = new Date();
-          self.timeString = self.zeroPadded(cd.getHours(), 2) + ':' + self.zeroPadded(cd.getMinutes(), 2) + ':' + self.zeroPadded(cd.getSeconds(), 2);
-          self.dateString = self.zeroPadded(cd.getFullYear(), 4) + '-' + self.zeroPadded(cd.getMonth()+1, 2) + '-' + self.zeroPadded(cd.getDate(), 2) + ' ' + self.week[cd.getDay()];
-      }, 1000);
-  },
-  methods: {
-      zeroPadded(num) {
-          return num < 10 ? `0${num}` : num;
-      }
-  } */
 
-
 });
 
-const _withScopeId$1 = n => (pushScopeId("data-v-749ae0b0"), n = n(), popScopeId(), n);
-
-const _hoisted_1$1 = {
-  class: "widget-container"
+const _hoisted_1 = {
+  class: "cell-text"
 };
-
-const _hoisted_2$1 = /*#__PURE__*/_withScopeId$1(() => /*#__PURE__*/createElementVNode("h3", null, "Chronocraft Time Clock", -1));
-
-const _hoisted_3$1 = {
-  class: "clock"
-};
-
-const _hoisted_4$1 = /*#__PURE__*/_withScopeId$1(() => /*#__PURE__*/createElementVNode("div", {
-  class: "madewith"
-}, "Created with Composition API", -1));
-
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1$1, [_hoisted_2$1, createElementVNode("div", _hoisted_3$1, [createElementVNode("h4", null, toDisplayString(_ctx.dateString), 1), createElementVNode("h2", null, toDisplayString(_ctx.timeString), 1)]), _hoisted_4$1]);
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(['scroller', _ctx.orientation === 'vertical' ? 'vertical-scroller' : 'horizontal-scroller'])
+  }, [createElementVNode("div", {
+    class: normalizeClass(['scroller-container', _ctx.orientation === 'vertical' ? 'vertical-container' : 'horizontal-container']),
+    style: normalizeStyle([{
+      'gap': _ctx.gap + 'px'
+    }, {
+      'padding': _ctx.contentpadding + 'px'
+    }])
+  }, [renderSlot(_ctx.$slots, "content", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.cellsdata, datacell => {
+    return openBlock(), createElementBlock("div", {
+      ref_for: true,
+      ref: "cellRef",
+      key: datacell.id,
+      class: normalizeClass(['scroller-cell', _ctx.orientation === 'vertical' ? 'vertical-cell' : 'horizontal-cell']),
+      style: normalizeStyle({
+        'flex-basis': _ctx.cellFlexBasis,
+        'height': _ctx.cellH,
+        'width': _ctx.cellW
+      })
+    }, [renderSlot(_ctx.$slots, "cell", {}, () => [createElementVNode("span", _hoisted_1, toDisplayString(datacell.id), 1)])], 6);
+  }), 128))])], 6)], 2);
 }
@@ -109,109 +472,11 @@
 
-var css_248z$1 = "\nh2[data-v-749ae0b0] {\r\n    font-size: 46pt;\r\n    font-weight: 500;\r\n    margin: 5px;\n}\nh4[data-v-749ae0b0] {\r\n    font-size: 18pt;\r\n    font-weight: 500;\r\n    margin: 5px;\n}\r\n";
-styleInject(css_248z$1);
-
-script$1.render = render$1;
-script$1.__scopeId = "data-v-749ae0b0";
-
-// Component created with Options API
-// ----------------------------------------
-var script = {
-  name: 'CountDownTimer',
-  data: () => ({
-    timeLeft: 0,
-    // In Seconds
-    timeLeftString: '00:00',
-    intervalTimer: null,
-    status: 'Idle',
-    availableTimes: [{
-      time: 10,
-      label: '10s'
-    }, {
-      time: 180,
-      label: '3m'
-    }, {
-      time: 300,
-      label: '5m'
-    }]
-  }),
-  methods: {
-    SetCounterTime(sec) {
-      var self = this;
-      if (this.intervalTimer) clearInterval(this.intervalTimer);
-      this.timeLeft = sec;
-      this.status = 'Counting...';
-      this.UpdateTimeLabel();
-      this.intervalTimer = setInterval(() => {
-        if (self.timeLeft <= 0) {
-          clearInterval(self.intervalTimer);
-          self.status = 'Ended';
-          setTimeout(() => {
-            self.status = 'Idle';
-          }, 2000);
-        } else {
-          self.timeLeft--;
-          self.UpdateTimeLabel();
-          self.status = 'Counting...';
-        }
-      }, 1000);
-    },
-
-    UpdateTimeLabel() {
-      const minutes = Math.floor(this.timeLeft % 3600 / 60);
-      const seconds = this.timeLeft % 60;
-      this.timeLeftString = `${this.zeroPadded(minutes)}:${this.zeroPadded(seconds)}`;
-    },
-
-    zeroPadded(num) {
-      return num < 10 ? `0${num}` : num;
-    },
-
-    hourConvert(hour) {
-      // 15 --> 3
-      return hour % 12 || 12;
-    }
-
-  }
-};
-
-const _withScopeId = n => (pushScopeId("data-v-51ddb80e"), n = n(), popScopeId(), n);
-
-const _hoisted_1 = {
-  class: "widget-container"
-};
-
-const _hoisted_2 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createElementVNode("h3", null, "Chronocraft Count down Timer", -1));
-
-const _hoisted_3 = {
-  class: "countdown"
-};
-const _hoisted_4 = {
-  class: "buttonscontainer"
-};
-const _hoisted_5 = ["onClick"];
-
-const _hoisted_6 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createElementVNode("div", {
-  class: "madewith"
-}, "Created with Options API", -1));
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [_hoisted_2, createElementVNode("div", _hoisted_3, [createElementVNode("h2", null, toDisplayString(_ctx.timeLeftString), 1)]), createElementVNode("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.availableTimes, (btntime, index) => {
-    return openBlock(), createElementBlock("button", {
-      key: index,
-      onClick: $event => $options.SetCounterTime(btntime.time),
-      type: "button"
-    }, toDisplayString(btntime.label), 9, _hoisted_5);
-  }), 128))]), createElementVNode("h5", null, "Status: " + toDisplayString(_ctx.status), 1), _hoisted_6]);
-}
-
-var css_248z = ".buttonscontainer button[data-v-51ddb80e] {\r\n    margin-left: 20px;\r\n    padding: 10px 20px;\r\n    font-size: 16pt;\r\n    box-shadow: rgb(0 0 0 / 24%) 0px 1px 4px;\r\n    border: 0px solid;\r\n    background: #eaeaea;\n}\n.buttonscontainer button[data-v-51ddb80e]:hover {\r\n    cursor: pointer;\n}\n.buttonscontainer button[data-v-51ddb80e]:active {\r\n    background: #f7f7f7;\r\n    box-shadow: rgb(0 0 0 / 24%) 0px 0px 2px;\n}\r\n";
+var css_248z = "\n.scroller[data-v-52b13696] {\r\n    height: 500px;\r\n    background: #eaeaea;\n}\n.vertical-scroller[data-v-52b13696] {\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\n}\n.horizontal-scroller[data-v-52b13696] {\r\n    overflow-y: hidden;\r\n    overflow-x: auto;\n}\n.scroller-container[data-v-52b13696] {\r\n    -ms-flex-line-pack: start;\r\n            -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    -webkit-flex-direction: row;\r\n        -ms-flex-direction: row;\r\n            flex-direction: row;\r\n    -webkit-flex-wrap: wrap;\r\n        -ms-flex-wrap: wrap;\r\n            flex-wrap: wrap;\n}\n.vertical-container[data-v-52b13696] {\r\n    display: -webkit-flex;\r\n    display: -ms-flexbox;\r\n    display: flex;\n}\n.horizontal-container[data-v-52b13696] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    -webkit-flex-flow: column wrap !important;\r\n        -ms-flex-flow: column wrap !important;\r\n            flex-flow: column wrap !important;\r\n    height: inherit !important;\r\n    -ms-flex-line-pack: start;\r\n            -webkit-align-content: flex-start;\r\n            align-content: flex-start;\r\n    width: 100%;\n}\n.scroller-cell[data-v-52b13696] {\r\n\r\n    background: #b6b6b6;\r\n\r\n    -webkit-flex: inherit;\r\n\r\n        -ms-flex: inherit;\r\n\r\n            flex: inherit;\r\n    -webkit-flex-grow: 0;\r\n        -ms-flex-positive: 0;\r\n            flex-grow: 0;\r\n    -ms-flex-negative: 0;\r\n            -webkit-flex-shrink: 0;\r\n            flex-shrink: 0;\r\n    -ms-flex-preferred-size: 25%;\r\n            -webkit-flex-basis: 25%;\r\n            flex-basis: 25%;\r\n\r\n    /* for theme */\r\n    background: #ffffff;\r\n    /* box-shadow: 2px 2px 2px 2px rgb(221 221 221 / 60%); */\r\n    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;\r\n    border-radius: 5px;\n}\n.vertical-cell[data-v-52b13696] {\r\n    display: inline-block;\r\n    height: 50px;\n}\n.horizontal-cell[data-v-52b13696] {\r\n    display: -webkit-inline-flex;\r\n    display: -ms-inline-flexbox;\r\n    display: inline-flex;\r\n    height: unset !important;\r\n    width: 90px;\n}\n.dummycell[data-v-52b13696] {\r\n    height: 20px;\n}\n.cell-text[data-v-52b13696] {\r\n    width: 100%;\r\n    text-align: center;\r\n    font-size: 18pt;\n}\r\n";
 styleInject(css_248z);
 
 script.render = render;
-script.__scopeId = "data-v-51ddb80e";
+script.__scopeId = "data-v-52b13696";
 
 var components = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    TimeClock: script$1,
-    CountDownTimer: script
+    Scroller: script
 });
@@ -227,2 +492,2 @@
 
-export { script as CountDownTimer, script$1 as TimeClock, Plugin as default };
+export { script as Scroller, Plugin as default };

dist/cjs/index.js

 
  // chronocraft-scroller-vue
- // A VueJS 3.0 building template to create your own components library
+ // A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.0.20
+ // v0.0.9
  // undefined License
 
-'use strict';Object.defineProperty(exports,'__esModule',{value:true});var TimeClock=require('./TimeClock-e56decd6.js'),CountDownTimer=require('./CountDownTimer-9d38ea6a.js');require('vue'),require('./style-inject.es-23948a6b.js');var components=/*#__PURE__*/Object.freeze({__proto__:null,TimeClock:TimeClock.s,CountDownTimer:CountDownTimer.s});const Plugin = {
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Scroller=require('./Scroller-2882fd1c.js');require('vue');var components=/*#__PURE__*/Object.freeze({__proto__:null,Scroller:Scroller.s});const Plugin = {
     install(app) {
@@ -14,2 +14,2 @@ Object.entries(components).forEach(([componentName, component]) => {
     }
-};exports.TimeClock=TimeClock.s;exports.CountDownTimer=CountDownTimer.s;exports["default"]=Plugin;
+};exports.Scroller=Scroller.s;exports["default"]=Plugin;

dist/esm/index.js

 
  // chronocraft-scroller-vue
- // A VueJS 3.0 building template to create your own components library
+ // A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component
  // https://github.com/yannisraft/chronocraft-scroller-vue.git
- // v0.0.20
+ // v0.0.9
  // undefined License
 
-import { s as script } from './TimeClock-b431594d.js';
-export { s as TimeClock } from './TimeClock-b431594d.js';
-import { s as script$1 } from './CountDownTimer-714d8fe7.js';
-export { s as CountDownTimer } from './CountDownTimer-714d8fe7.js';
+import { s as script } from './Scroller-27c43655.js';
+export { s as Scroller } from './Scroller-27c43655.js';
 import 'vue';
-import './style-inject.es-6bf23337.js';
 
 var components = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  TimeClock: script,
-  CountDownTimer: script$1
+  Scroller: script
 });
@@ -20,0 +16,0 @@

package.json

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

README.md

@@ -7,59 +7,30 @@ # A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component
 
-**Technology Used:**
+### Features
+- Vuejs 3.0 Based Library
+- Typescript support
+- Using Rollup to create final bundle
+- Using PostCSS to include CSS Files
+- Minified Build
+- Includes VuePress for documenting your library
 
-[Vuejs 3.0](https://github.com/vuejs/vue-next)\
-[Typescript](https://github.com/microsoft/TypeScript)\
-[Rollup](https://github.com/rollup/rollup)
+## Usage of Scroller
+At the VueJS Initialization on the main.ts or .js file of the project
+add the following.
 
-## Usage 
-**As Component**
-```
-  import { Scroller } from 'chronocraft-scroller-vue';
-  ...
-  components:{
-    Scroller
-  }
-```
-
-**As Plugin**
-```
-  import ChronoCraftScroller from 'chronocraft-scroller-vue';
+```javascript
+import { ChronoCraftScroller } from 'chronocraft-scroller-vue';
     ...
-  app.use(ChronoCraftCScroller)
+app.use(ChronoCraftScroller)
 ```
 
+#### Using seperate components of the library inside you project
 
-## For building and Testing the Library
+When you want to import a specific component from the library into a dedicated place inside your code
 
-Please follow the folling steps accordingly:
-
-### Installing the Project
-```
-yarn install
-```
-
-### Running for Development
-```
-yarn serve
-```
-
-### Compiles and minifies for production
-```
-yarn build
-```
-
-### Building the Library
-```
-yarn build:js
-```
-
-### Building the Library With Separate Css file
-```
-yarn build:js_css
-```
-
-### Lints and fixes files
-```
-yarn lint
-```
-
+```javascript
+import { Scroller } from 'chronocraft-scroller-vue';
+...
+components:{
+Scroller
+}
+```

src/components/index.ts

@@ -1,2 +0,1 @@
-export { default as TimeClock } from './TimeClock';
-export { default as CountDownTimer } from './CountDownTimer';
+export { default as Scroller } from './Scroller';

New alerts

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

168097

increased by93.42%

Number of package files

41

increased by5.13%

Lines of code

2972

increased by105.96%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

35

decreased by-46.15%

Number of low supply chain risk alerts

3

increased byInfinity%

No dependency changes