chronocraft-scroller-vue - npm Package Compare versions

chronocraft-scroller-vue

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.1.15 to 0.1.16

dist/cjs/_rollupPluginBabelHelpers-0ef4b4f7.js

dist/cjs/Scroller-71d2de4a.js

dist/cjs/style-inject.es-d398fde2.js

dist/cjs/VScrollerRow-54b8141f.js

dist/cjs/VScrollerRow-9c2adc64.js

dist/cjs/VScrollerScrollBar-1ab3bf16.js

dist/cjs/VScrollerScrollBar-94928a9e.js

dist/esm/_rollupPluginBabelHelpers-70b6930d.js

dist/esm/Scroller-733394d8.js

dist/esm/style-inject.es-d22d81f4.js

dist/esm/VScrollerRow-4a5a68fa.js

dist/esm/VScrollerRow-89bf2950.js

dist/esm/VScrollerScrollBar-60d299a7.js

dist/esm/VScrollerScrollBar-bdf4fabc.js

src/components/VScroller/VScrollerRow.vue

src/components/VScroller/VScrollerScrollBar.vue

dist/cjs/index.js

		@@ -5,12 +5,11 @@
		// https://github.com/yannisraft/chronocraft-scroller-vue.git
		// v0.1.15
		// v0.1.16
		// MIT License

		'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Scroller=require('./Scroller-97fed397.js'),VScroller=require('./VScroller-41493ef7.js');require('./_rollupPluginBabelHelpers-886f608b.js'),require('vue'),require('./style-inject.es-03fea8e3.js'),require('@/components/VScrollerScrollBar'),require('@/components/VScrollerRow');/* export { default as Scroller } from "./Scroller";
		'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Scroller=require('./Scroller-71d2de4a.js'),VScroller=require('./VScroller.js'),VScrollerScrollBar=require('./VScrollerScrollBar-1ab3bf16.js'),VScrollerRow=require('./VScrollerRow-9c2adc64.js');require('./_rollupPluginBabelHelpers-0ef4b4f7.js'),require('vue'),require('./style-inject.es-d398fde2.js'),require('VScrollerScrollBar'),require('VScrollerRow');/* export { default as Scroller } from "./Scroller";
		export { default as VScroller } from "./VScroller";
		export { default as VScrollerScrollBar } from "./VScroller"; */
		//import VScrollerScrollBar from './VScrollerScrollBar'
		//import VScrollerRow from './VScrollerRow'
		//export default { Scroller, VScroller, VScrollerScrollBar, VScrollerRow };
		var index = { Scroller: Scroller.s, VScroller: VScroller.s };var components=/#__PURE__/Object.freeze({__proto__:null,'default':index});const Plugin = {
		var index = { Scroller: Scroller.s, VScroller: VScroller["default"], VScrollerScrollBar: VScrollerScrollBar.s, VScrollerRow: VScrollerRow.s };
		//export default { Scroller, VScroller };
		var components=/#__PURE__/Object.freeze({__proto__:null,'default':index});const Plugin = {
		install(app) {
		@@ -17,0 +16,0 @@ Object.entries(components).forEach(([componentName, component]) => {

dist/cjs/Scroller.js

		@@ -5,5 +5,5 @@
		// https://github.com/yannisraft/chronocraft-scroller-vue.git
		// v0.1.15
		// v0.1.16
		// MIT License

		'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Scroller=require('./Scroller-97fed397.js');require('./_rollupPluginBabelHelpers-886f608b.js'),require('vue'),require('./style-inject.es-03fea8e3.js');exports["default"]=Scroller.s;
		'use strict';Object.defineProperty(exports,'__esModule',{value:true});var Scroller=require('./Scroller-71d2de4a.js');require('./_rollupPluginBabelHelpers-0ef4b4f7.js'),require('vue'),require('./style-inject.es-d398fde2.js');exports["default"]=Scroller.s;

794

dist/cjs/VScroller.js

		@@ -5,5 +5,795 @@
		// https://github.com/yannisraft/chronocraft-scroller-vue.git
		// v0.1.15
		// v0.1.16
		// MIT License

		'use strict';Object.defineProperty(exports,'__esModule',{value:true});var VScroller=require('./VScroller-41493ef7.js');require('./_rollupPluginBabelHelpers-886f608b.js'),require('vue'),require('@/components/VScrollerScrollBar'),require('@/components/VScrollerRow'),require('./style-inject.es-03fea8e3.js');exports["default"]=VScroller.s;
		'use strict';Object.defineProperty(exports,'__esModule',{value:true});var _rollupPluginBabelHelpers=require('./_rollupPluginBabelHelpers-0ef4b4f7.js'),vue=require('vue'),VScrollerScrollBar=require('VScrollerScrollBar'),VScrollerRow=require('VScrollerRow'),styleInject_es=require('./style-inject.es-d398fde2.js'),VScrollerScrollBar$1=require('./VScrollerScrollBar-1ab3bf16.js'),VScrollerRow$1=require('./VScrollerRow-9c2adc64.js');function _interopDefaultLegacy(e){return e&&typeof e==='object'&&'default'in e?e:{'default':e}}var VScrollerScrollBar__default=/#__PURE__/_interopDefaultLegacy(VScrollerScrollBar);var VScrollerRow__default=/#__PURE__/_interopDefaultLegacy(VScrollerRow);//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__default["default"],
		VScrollerRow: VScrollerRow__default["default"] //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.b(_rollupPluginBabelHelpers.b({}, 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.b(_rollupPluginBabelHelpers.b({}, 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$1.s, VScrollerRow: VScrollerRow$1.s };
		//export default VScroller;
		exports["default"]=VScroller;

dist/cjs/VScrollerRow.js

		@@ -5,85 +5,5 @@
		// https://github.com/yannisraft/chronocraft-scroller-vue.git
		// v0.1.15
		// v0.1.16
		// MIT License

		'use strict';Object.defineProperty(exports,'__esModule',{value:true});var vue=require('vue');var script = vue.defineComponent({
		name: 'VScrollerRow',
		props: {
		gap: {
		type: Number,
		default: 0
		},
		calculatedRowSize: {
		type: Number,
		default: 0
		},
		orientation: {
		type: String,
		default: "vertical"
		},
		row: {
		type: Object,
		default: function _default() {
		return {
		cells: {},
		index: 0,
		top: "0px",
		left: "0px",
		width: "0px"
		};
		}
		}
		},
		setup: function setup(props, context) {
		var IDGenerated = Math.floor(Math.random() * 999999) + 1000000; // ---- Reactive Attributes

		var rowId = vue.ref("row_" + IDGenerated);
		var flexDirection = vue.ref("row");
		if (props.orientation === "horizontal") flexDirection.value = "column";
		vue.onMounted(function () {
		var rowelement = document.getElementById(rowId.value);
		context.emit("on-rendered", rowelement.clientHeight);
		});
		return {
		rowId: rowId,
		flexDirection: flexDirection
		};
		}
		});var _hoisted_1 = ["id"];
		var _hoisted_2 = ["id"];
		function render(_ctx, _cache, $props, $setup, $data, $options) {
		return vue.openBlock(), vue.createElementBlock("div", {
		class: "scroller-row-v",
		id: _ctx.rowId,
		style: vue.normalizeStyle([{
		'margin-left': _ctx.gap + 'px'
		}, {
		'background-color': '#eaeaea'
		}, {
		top: _ctx.row.top,
		left: _ctx.row.left,
		width: _ctx.row.width,
		height: _ctx.row.height,
		'flex-direction': _ctx.flexDirection
		}])
		}, [vue.renderSlot(_ctx.$slots, "row", {
		data: _ctx.row
		}, function () {
		return [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.row.cells, function (cell, cellkey) {
		return vue.openBlock(), vue.createElementBlock("div", {
		class: "scroller-cell-v",
		key: cellkey,
		id: 'item' + cell.id,
		style: vue.normalizeStyle([{
		left: cell.left,
		top: cell.top,
		'flex-basis': cell.flexbasis
		}])
		}, [vue.renderSlot(_ctx.$slots, "cell", {
		data: cell
		}, function () {
		return [vue.createElementVNode("span", null, vue.toDisplayString(cell.index), 1)];
		})], 12, _hoisted_2);
		}), 128))];
		})], 12, _hoisted_1);
		}script.render = render;exports["default"]=script;
		'use strict';Object.defineProperty(exports,'__esModule',{value:true});var VScrollerRow=require('./VScrollerRow-9c2adc64.js');require('vue');exports["default"]=VScrollerRow.s;

241

dist/cjs/VScrollerScrollBar.js

		@@ -5,242 +5,5 @@
		// https://github.com/yannisraft/chronocraft-scroller-vue.git
		// v0.1.15
		// v0.1.16
		// MIT License

		'use strict';Object.defineProperty(exports,'__esModule',{value:true});var vue=require('vue'),styleInject_es=require('./style-inject.es-03fea8e3.js');var script = vue.defineComponent({
		name: "VScrollerScrollBar",
		components: {},
		props: {
		modelValue: {
		type: Array,
		default: function _default() {
		return [];
		}
		},
		active: {
		type: Boolean,
		default: true
		},
		viewportId: {
		type: String,
		default: ""
		},
		orientation: {
		type: String,
		default: "vertical"
		},
		mode: {
		type: String,
		default: "normal"
		},
		trackWidth: {
		type: Number,
		default: 12
		}
		},
		setup: function setup(props, context) {
		// ---- Attributes
		var viewport = null;
		var scrollbarButtonDown = false;
		var previousMovePosition = -100000;
		var IDGenerated = Math.floor(Math.random() * 999999) + 1000000;
		var scrollbarPercent = 0;
		var scrollbar_size;
		var scrollbar_track;
		var scrollbar_thumb;
		var scrollbar_up;
		var scrollbar_track_size;
		var scrollbar_thumb_size;
		var scrollbar_up_size;
		var scrollbar_min;
		var scrollbar_max; // ---- Reactive Attributes

		var scrollbarThumbPosition = vue.ref(0);
		var scrollbarId = vue.ref("scrollbar_" + IDGenerated); // ---- Methods Public

		function ScrollBackwardsClicked() {
		context.emit("on-backwards-clicked");

		if (props.mode !== "infinite") ;
		}

		function ScrollForwardClicked() {
		context.emit("on-forward-clicked");

		if (props.mode !== "infinite") ;
		} // ---- Methods Private


		function SetPosition(position) {
		var newValue = Math.max(scrollbar_min, Math.min(position, scrollbar_max));
		scrollbarThumbPosition.value = newValue;
		UpdatePercent();
		}

		function SetPercent(percent) {
		scrollbarPercent = percent;
		scrollbarThumbPosition.value = scrollbarPercent * (scrollbar_max - scrollbar_min) / 100;
		previousMovePosition = -100000;
		context.emit("on-change", scrollbarPercent);
		}

		function UpdatePercent() {
		var flatValue = scrollbarThumbPosition.value - scrollbar_min;
		scrollbarPercent = 100 * flatValue / (scrollbar_max - scrollbar_min);
		context.emit("on-change", scrollbarPercent);
		}

		function SetupScrollbar() {
		if (props.active) {
		if (props.viewportId !== "") {
		document.querySelector("#" + scrollbarId.value);
		scrollbar_track = document.querySelector("#" + scrollbarId.value + " .scroller-scrollbar-track");
		scrollbar_thumb = document.querySelector("#" + scrollbarId.value + " .scroller-scrollbar-thumb");
		scrollbar_up = document.querySelector("#" + scrollbarId.value + " .scroller-scrollbar-up");
		scrollbar_size = scrollbar_track.clientWidth;
		scrollbar_track_size = scrollbar_track.clientHeight;
		scrollbar_thumb_size = scrollbar_thumb.clientHeight;
		scrollbar_up_size = scrollbar_up.clientHeight;

		if (props.orientation === "horizontal") {
		scrollbar_track_size = scrollbar_track.clientWidth;
		scrollbar_thumb_size = scrollbar_thumb.clientWidth;
		scrollbar_up_size = scrollbar_up.clientWidth;
		scrollbar_size = scrollbar_track.clientHeight;
		viewport.style.height = "calc(100% - " + scrollbar_size + "px)";
		} else {
		viewport.style.width = "calc(100% - " + scrollbar_size + "px)";
		}

		scrollbar_min = scrollbar_up_size;
		scrollbar_max = scrollbar_track_size - scrollbar_up_size - scrollbar_thumb_size;
		scrollbarThumbPosition.value = scrollbar_up_size; // In Infinite mode the scrollbar thumb returns to middle

		if (props.mode === "infinite") SetPercent(50); // Setup Events

		scrollbar_thumb.addEventListener("mousedown", function (e) {
		scrollbarButtonDown = true;
		});
		document.addEventListener("mousemove", function (e) {
		if (!scrollbarButtonDown) return;
		e.preventDefault();

		if (previousMovePosition !== -100000) {
		var diff = e.clientY - previousMovePosition;

		if (props.orientation === "horizontal") {
		diff = e.clientX - previousMovePosition;
		SetPosition(scrollbarThumbPosition.value - diff);
		} else {
		SetPosition(scrollbarThumbPosition.value + diff);
		}
		}

		previousMovePosition = e.clientY;

		if (props.orientation === "horizontal") {
		previousMovePosition = e.clientX;
		}
		});
		document.addEventListener("mouseup", function (e) {
		scrollbarButtonDown = false;

		if (props.mode === "infinite") {
		SetPercent(50);
		}
		});
		}
		}
		}

		vue.onMounted(function () {
		viewport = document.querySelector("#" + props.viewportId);
		SetupScrollbar();
		});
		return {
		// Attributes
		scrollbarId: scrollbarId,
		scrollbarThumbPosition: scrollbarThumbPosition,
		// Methods Public
		ScrollBackwardsClicked: ScrollBackwardsClicked,
		ScrollForwardClicked: ScrollForwardClicked
		};
		}
		});var _hoisted_1 = ["id"];
		function render(_ctx, _cache, $props, $setup, $data, $options) {
		return _ctx.active ? (vue.openBlock(), vue.createElementBlock("div", {
		key: 0,
		id: _ctx.scrollbarId,
		class: "scroller-scrollbar",
		style: vue.normalizeStyle([_ctx.orientation === 'vertical' ? {
		'width': _ctx.trackWidth + 'px',
		'height': '100%',
		'top': '0px',
		'right': '0px'
		} : {
		'width': '100%',
		'height': _ctx.trackWidth + 'px',
		'bottom': '0px',
		'right': '0px',
		'top': 'unset'
		}])
		}, [vue.createElementVNode("div", {
		class: "scroller-scrollbar-track",
		style: vue.normalizeStyle([_ctx.orientation === 'vertical' ? {
		'width': _ctx.trackWidth + 'px',
		'height': '100%',
		'top': '0px',
		'right': '0px'
		} : {
		'width': '100%',
		'height': _ctx.trackWidth + 'px',
		'bottom': '0px',
		'right': '0px',
		'top': 'unset'
		}])
		}, null, 4), vue.createElementVNode("div", {
		class: "scroller-scrollbar-thumb",
		style: vue.normalizeStyle([_ctx.orientation === 'vertical' ? {
		'width': '100%',
		'height': '30px',
		'top': _ctx.scrollbarThumbPosition + 'px',
		'right': '0px'
		} : {
		'width': '30px',
		'height': '100%',
		'bottom': '0px',
		'right': _ctx.scrollbarThumbPosition + 'px',
		'top': 'unset'
		}])
		}, null, 4), vue.createElementVNode("div", {
		class: "scroller-scrollbar-up",
		onClick: _cache[0] \|\| (_cache[0] = function ($event) {
		return _ctx.ScrollBackwardsClicked();
		}),
		style: vue.normalizeStyle([_ctx.orientation === 'vertical' ? {
		'height': _ctx.trackWidth + 'px',
		'width': '100%',
		'top': '0px',
		'right': '0px'
		} : {
		'width': _ctx.trackWidth + 'px',
		'height': '100%',
		'bottom': '0px',
		'top': 'unset',
		'left': '0px',
		'right': 'unset'
		}])
		}, null, 4), vue.createElementVNode("div", {
		class: "scroller-scrollbar-down",
		onClick: _cache[1] \|\| (_cache[1] = function ($event) {
		return _ctx.ScrollForwardClicked();
		}),
		style: vue.normalizeStyle([_ctx.orientation === 'vertical' ? {
		'height': _ctx.trackWidth + 'px',
		'width': '100%'
		} : {
		'width': _ctx.trackWidth + 'px',
		'height': '100%'
		}])
		}, null, 4)], 12, _hoisted_1)) : vue.createCommentVNode("", true);
		}var css_248z = ".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";
		styleInject_es.s(css_248z);script.render = render;exports["default"]=script;
		'use strict';Object.defineProperty(exports,'__esModule',{value:true});var VScrollerScrollBar=require('./VScrollerScrollBar-1ab3bf16.js');require('vue'),require('./style-inject.es-d398fde2.js');exports["default"]=VScrollerScrollBar.s;

377

dist/components/VScroller/index.ts

		@@ -5,15 +5,15 @@
		// https://github.com/yannisraft/chronocraft-scroller-vue.git
		// v0.1.15
		// v0.1.16
		// MIT License

		(function (global, factory) {
		typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('@/components/VScrollerScrollBar'), require('@/components/VScrollerRow')) :
		typeof define === 'function' && define.amd ? define(['exports', 'vue', '@/components/VScrollerScrollBar', '@/components/VScrollerRow'], factory) :
		(global = typeof globalThis !== 'undefined' ? globalThis : global \|\| self, factory(global.VScroller = {}, global.Vue, global._VScrollerScrollBar, global._VScrollerRow));
		})(this, (function (exports, vue, _VScrollerScrollBar, _VScrollerRow) { 'use strict';
		typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('VScrollerScrollBar'), require('VScrollerRow')) :
		typeof define === 'function' && define.amd ? define(['exports', 'vue', 'VScrollerScrollBar', 'VScrollerRow'], factory) :
		(global = typeof globalThis !== 'undefined' ? globalThis : global \|\| self, factory(global.VScroller = {}, global.Vue, global.VScrollerScrollBar, global.VScrollerRow));
		})(this, (function (exports, vue, VScrollerScrollBar, VScrollerRow) { 'use strict';

		function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

		var _VScrollerScrollBar__default = /#__PURE__/_interopDefaultLegacy(_VScrollerScrollBar);
		var _VScrollerRow__default = /#__PURE__/_interopDefaultLegacy(_VScrollerRow);
		var VScrollerScrollBar__default = /#__PURE__/_interopDefaultLegacy(VScrollerScrollBar);
		var VScrollerRow__default = /#__PURE__/_interopDefaultLegacy(VScrollerRow);

		@@ -61,13 +61,16 @@ function ownKeys(object, enumerableOnly) {

		//import _VScrollerRow from "@/components/VScrollerRow";
		// BUILD

		/* import VScrollerScrollBar from "VScrollerScrollBar";
		import VScrollerRow from "VScrollerRow"; */
		//console.log(process.env.NODE_ENV);
		//export let VScrollerRow = _VScrollerRow;
		//export let VScrollerScrollBar = _VScrollerScrollBar;

		console.log(process.env.NODE_ENV);
		var VScrollerRow = _VScrollerRow__default["default"];
		var VScrollerScrollBar = _VScrollerScrollBar__default["default"];
		var script = vue.defineComponent({
		var script$2 = vue.defineComponent({
		name: "VScroller",
		components: {
		VScrollerScrollBar: VScrollerScrollBar,
		VScrollerRow: VScrollerRow //VScrollerScrollBar: () => import('./VScrollerScrollBar'),
		VScrollerScrollBar: VScrollerScrollBar__default["default"],
		VScrollerRow: VScrollerRow__default["default"] //VScrollerScrollBar: () => import('./VScrollerScrollBar'),
		//VScrollerRow: () => import('./VScrollerRow')
		@@ -810,6 +813,6 @@

		var _hoisted_1 = ["id"];
		var _hoisted_2 = ["id"];
		var _hoisted_1$2 = ["id"];
		var _hoisted_2$1 = ["id"];
		var _hoisted_3 = ["id"];
		function render(_ctx, _cache, $props, $setup, $data, $options) {
		function render$2(_ctx, _cache, $props, $setup, $data, $options) {
		var _component_VScrollerRow = vue.resolveComponent("VScrollerRow");
		@@ -840,3 +843,3 @@
		}, null, 8, ["calculatedRowSize", "sidegap", "row", "orientation"]);
		}), 128))], 12, _hoisted_3))], 8, _hoisted_2), vue.createVNode(_component_VScrollerScrollBar, {
		}), 128))], 12, _hoisted_3))], 8, _hoisted_2$1), vue.createVNode(_component_VScrollerScrollBar, {
		active: _ctx.hasScrollbar,
		@@ -849,3 +852,3 @@ orientation: _ctx.orientation,
		viewportId: _ctx.viewportId
		}, null, 8, ["active", "orientation", "mode", "onOnChange", "onOnBackwardsClicked", "onOnForwardClicked", "viewportId"])], 8, _hoisted_1);
		}, null, 8, ["active", "orientation", "mode", "onOnChange", "onOnBackwardsClicked", "onOnForwardClicked", "viewportId"])], 8, _hoisted_1$2);
		}
		@@ -880,11 +883,345 @@

		var css_248z = "\r\n/* @import \"./scroller.css\"; */\r\n";
		var css_248z$1 = "\r\n/* @import \"./scroller.css\"; */\r\n";
		styleInject(css_248z$1);

		script$2.render = render$2;

		var script$1 = vue.defineComponent({
		name: "VScrollerScrollBar",
		components: {},
		props: {
		modelValue: {
		type: Array,
		default: function _default() {
		return [];
		}
		},
		active: {
		type: Boolean,
		default: true
		},
		viewportId: {
		type: String,
		default: ""
		},
		orientation: {
		type: String,
		default: "vertical"
		},
		mode: {
		type: String,
		default: "normal"
		},
		trackWidth: {
		type: Number,
		default: 12
		}
		},
		setup: function setup(props, context) {
		// ---- Attributes
		var viewport = null;
		var scrollbarButtonDown = false;
		var previousMovePosition = -100000;
		var IDGenerated = Math.floor(Math.random() * 999999) + 1000000;
		var scrollbarPercent = 0;
		var scrollbar_size;
		var scrollbar_track;
		var scrollbar_thumb;
		var scrollbar_up;
		var scrollbar_track_size;
		var scrollbar_thumb_size;
		var scrollbar_up_size;
		var scrollbar_min;
		var scrollbar_max; // ---- Reactive Attributes

		var scrollbarThumbPosition = vue.ref(0);
		var scrollbarId = vue.ref("scrollbar_" + IDGenerated); // ---- Methods Public

		function ScrollBackwardsClicked() {
		context.emit("on-backwards-clicked");

		if (props.mode !== "infinite") ;
		}

		function ScrollForwardClicked() {
		context.emit("on-forward-clicked");

		if (props.mode !== "infinite") ;
		} // ---- Methods Private


		function SetPosition(position) {
		var newValue = Math.max(scrollbar_min, Math.min(position, scrollbar_max));
		scrollbarThumbPosition.value = newValue;
		UpdatePercent();
		}

		function SetPercent(percent) {
		scrollbarPercent = percent;
		scrollbarThumbPosition.value = scrollbarPercent * (scrollbar_max - scrollbar_min) / 100;
		previousMovePosition = -100000;
		context.emit("on-change", scrollbarPercent);
		}

		function UpdatePercent() {
		var flatValue = scrollbarThumbPosition.value - scrollbar_min;
		scrollbarPercent = 100 * flatValue / (scrollbar_max - scrollbar_min);
		context.emit("on-change", scrollbarPercent);
		}

		function SetupScrollbar() {
		if (props.active) {
		if (props.viewportId !== "") {
		document.querySelector("#" + scrollbarId.value);
		scrollbar_track = document.querySelector("#" + scrollbarId.value + " .scroller-scrollbar-track");
		scrollbar_thumb = document.querySelector("#" + scrollbarId.value + " .scroller-scrollbar-thumb");
		scrollbar_up = document.querySelector("#" + scrollbarId.value + " .scroller-scrollbar-up");
		scrollbar_size = scrollbar_track.clientWidth;
		scrollbar_track_size = scrollbar_track.clientHeight;
		scrollbar_thumb_size = scrollbar_thumb.clientHeight;
		scrollbar_up_size = scrollbar_up.clientHeight;

		if (props.orientation === "horizontal") {
		scrollbar_track_size = scrollbar_track.clientWidth;
		scrollbar_thumb_size = scrollbar_thumb.clientWidth;
		scrollbar_up_size = scrollbar_up.clientWidth;
		scrollbar_size = scrollbar_track.clientHeight;
		viewport.style.height = "calc(100% - " + scrollbar_size + "px)";
		} else {
		viewport.style.width = "calc(100% - " + scrollbar_size + "px)";
		}

		scrollbar_min = scrollbar_up_size;
		scrollbar_max = scrollbar_track_size - scrollbar_up_size - scrollbar_thumb_size;
		scrollbarThumbPosition.value = scrollbar_up_size; // In Infinite mode the scrollbar thumb returns to middle

		if (props.mode === "infinite") SetPercent(50); // Setup Events

		scrollbar_thumb.addEventListener("mousedown", function (e) {
		scrollbarButtonDown = true;
		});
		document.addEventListener("mousemove", function (e) {
		if (!scrollbarButtonDown) return;
		e.preventDefault();

		if (previousMovePosition !== -100000) {
		var diff = e.clientY - previousMovePosition;

		if (props.orientation === "horizontal") {
		diff = e.clientX - previousMovePosition;
		SetPosition(scrollbarThumbPosition.value - diff);
		} else {
		SetPosition(scrollbarThumbPosition.value + diff);
		}
		}

		previousMovePosition = e.clientY;

		if (props.orientation === "horizontal") {
		previousMovePosition = e.clientX;
		}
		});
		document.addEventListener("mouseup", function (e) {
		scrollbarButtonDown = false;

		if (props.mode === "infinite") {
		SetPercent(50);
		}
		});
		}
		}
		}

		vue.onMounted(function () {
		viewport = document.querySelector("#" + props.viewportId);
		SetupScrollbar();
		});
		return {
		// Attributes
		scrollbarId: scrollbarId,
		scrollbarThumbPosition: scrollbarThumbPosition,
		// Methods Public
		ScrollBackwardsClicked: ScrollBackwardsClicked,
		ScrollForwardClicked: ScrollForwardClicked
		};
		}
		});

		var _hoisted_1$1 = ["id"];
		function render$1(_ctx, _cache, $props, $setup, $data, $options) {
		return _ctx.active ? (vue.openBlock(), vue.createElementBlock("div", {
		key: 0,
		id: _ctx.scrollbarId,
		class: "scroller-scrollbar",
		style: vue.normalizeStyle([_ctx.orientation === 'vertical' ? {
		'width': _ctx.trackWidth + 'px',
		'height': '100%',
		'top': '0px',
		'right': '0px'
		} : {
		'width': '100%',
		'height': _ctx.trackWidth + 'px',
		'bottom': '0px',
		'right': '0px',
		'top': 'unset'
		}])
		}, [vue.createElementVNode("div", {
		class: "scroller-scrollbar-track",
		style: vue.normalizeStyle([_ctx.orientation === 'vertical' ? {
		'width': _ctx.trackWidth + 'px',
		'height': '100%',
		'top': '0px',
		'right': '0px'
		} : {
		'width': '100%',
		'height': _ctx.trackWidth + 'px',
		'bottom': '0px',
		'right': '0px',
		'top': 'unset'
		}])
		}, null, 4), vue.createElementVNode("div", {
		class: "scroller-scrollbar-thumb",
		style: vue.normalizeStyle([_ctx.orientation === 'vertical' ? {
		'width': '100%',
		'height': '30px',
		'top': _ctx.scrollbarThumbPosition + 'px',
		'right': '0px'
		} : {
		'width': '30px',
		'height': '100%',
		'bottom': '0px',
		'right': _ctx.scrollbarThumbPosition + 'px',
		'top': 'unset'
		}])
		}, null, 4), vue.createElementVNode("div", {
		class: "scroller-scrollbar-up",
		onClick: _cache[0] \|\| (_cache[0] = function ($event) {
		return _ctx.ScrollBackwardsClicked();
		}),
		style: vue.normalizeStyle([_ctx.orientation === 'vertical' ? {
		'height': _ctx.trackWidth + 'px',
		'width': '100%',
		'top': '0px',
		'right': '0px'
		} : {
		'width': _ctx.trackWidth + 'px',
		'height': '100%',
		'bottom': '0px',
		'top': 'unset',
		'left': '0px',
		'right': 'unset'
		}])
		}, null, 4), vue.createElementVNode("div", {
		class: "scroller-scrollbar-down",
		onClick: _cache[1] \|\| (_cache[1] = function ($event) {
		return _ctx.ScrollForwardClicked();
		}),
		style: vue.normalizeStyle([_ctx.orientation === 'vertical' ? {
		'height': _ctx.trackWidth + 'px',
		'width': '100%'
		} : {
		'width': _ctx.trackWidth + 'px',
		'height': '100%'
		}])
		}, null, 4)], 12, _hoisted_1$1)) : vue.createCommentVNode("", true);
		}

		var css_248z = ".scroller {\r\n height: 100%;\r\n}\r\n\r\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;\r\n}\r\n\r\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;\r\n}\r\n\r\n/ Only For Firefox /\r\n\r\n@supports (-moz-appearance:none) {\r\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 /\r\n }\r\n}\r\n\r\n/ Microsoft Edge Browser 12-18 /\r\n\r\n@supports (-ms-ime-align:auto) {\r\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}\r\n\r\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;\r\n}\r\n\r\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;\r\n \r\n}\r\n\r\n.noselect {\r\n -webkit-touch-callout: none;\r\n / iOS Safari /\r\n -webkit-user-select: none;\r\n / Safari /\r\n / Konqueror HTML /\r\n / Old versions of Firefox /\r\n -ms-user-select: none;\r\n / Internet Explorer/Edge /\r\n user-select: none;\r\n / Non-prefixed version, currently\r\n supported by Chrome, Edge, Opera and Firefox */\r\n}\r\n\r\n.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;\r\n}\r\n\r\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%;\r\n}\r\n\r\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;\r\n}\r\n\r\n.scroller-scrollbar-thumb-down {\r\n background-color: #1199aa;\r\n}\r\n\r\n.scroller-scrollbar-thumb-over {\r\n background-color: #33bbcc;\r\n}\r\n\r\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%;\r\n}\r\n\r\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%;\r\n}\r\n";
		styleInject(css_248z);

		script$1.render = render$1;

		var script = vue.defineComponent({
		name: 'VScrollerRow',
		props: {
		gap: {
		type: Number,
		default: 0
		},
		calculatedRowSize: {
		type: Number,
		default: 0
		},
		orientation: {
		type: String,
		default: "vertical"
		},
		row: {
		type: Object,
		default: function _default() {
		return {
		cells: {},
		index: 0,
		top: "0px",
		left: "0px",
		width: "0px"
		};
		}
		}
		},
		setup: function setup(props, context) {
		var IDGenerated = Math.floor(Math.random() * 999999) + 1000000; // ---- Reactive Attributes

		var rowId = vue.ref("row_" + IDGenerated);
		var flexDirection = vue.ref("row");
		if (props.orientation === "horizontal") flexDirection.value = "column";
		vue.onMounted(function () {
		var rowelement = document.getElementById(rowId.value);
		context.emit("on-rendered", rowelement.clientHeight);
		});
		return {
		rowId: rowId,
		flexDirection: flexDirection
		};
		}
		});

		var _hoisted_1 = ["id"];
		var _hoisted_2 = ["id"];
		function render(_ctx, _cache, $props, $setup, $data, $options) {
		return vue.openBlock(), vue.createElementBlock("div", {
		class: "scroller-row-v",
		id: _ctx.rowId,
		style: vue.normalizeStyle([{
		'margin-left': _ctx.gap + 'px'
		}, {
		'background-color': '#eaeaea'
		}, {
		top: _ctx.row.top,
		left: _ctx.row.left,
		width: _ctx.row.width,
		height: _ctx.row.height,
		'flex-direction': _ctx.flexDirection
		}])
		}, [vue.renderSlot(_ctx.$slots, "row", {
		data: _ctx.row
		}, function () {
		return [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.row.cells, function (cell, cellkey) {
		return vue.openBlock(), vue.createElementBlock("div", {
		class: "scroller-cell-v",
		key: cellkey,
		id: 'item' + cell.id,
		style: vue.normalizeStyle([{
		left: cell.left,
		top: cell.top,
		'flex-basis': cell.flexbasis
		}])
		}, [vue.renderSlot(_ctx.$slots, "cell", {
		data: cell
		}, function () {
		return [vue.createElementVNode("span", null, vue.toDisplayString(cell.index), 1)];
		})], 12, _hoisted_2);
		}), 128))];
		})], 12, _hoisted_1);
		}

		script.render = render;

		exports["default"] = script;
		var index = { VScroller: script$2, VScrollerScrollBar: script$1, VScrollerRow: script };
		//export default VScroller;

		exports["default"] = index;

		Object.defineProperty(exports, '__esModule', { value: true });

		}));

dist/components/VScrollerRow/index.ts

		@@ -5,3 +5,3 @@
		// https://github.com/yannisraft/chronocraft-scroller-vue.git
		// v0.1.15
		// v0.1.16
		// MIT License
		@@ -8,0 +8,0 @@

dist/components/VScrollerScrollBar/index.ts

		@@ -5,3 +5,3 @@
		// https://github.com/yannisraft/chronocraft-scroller-vue.git
		// v0.1.15
		// v0.1.16
		// MIT License
		@@ -8,0 +8,0 @@

dist/esm/index.js

		@@ -5,12 +5,14 @@
		// https://github.com/yannisraft/chronocraft-scroller-vue.git
		// v0.1.15
		// v0.1.16
		// MIT License

		import { s as script } from './Scroller-b8028111.js';
		import { s as script$1 } from './VScroller-535ed544.js';
		import './_rollupPluginBabelHelpers-9c1e596c.js';
		import { s as script } from './Scroller-733394d8.js';
		import VScroller from './VScroller.js';
		import { s as script$1 } from './VScrollerScrollBar-bdf4fabc.js';
		import { s as script$2 } from './VScrollerRow-4a5a68fa.js';
		import './_rollupPluginBabelHelpers-70b6930d.js';
		import 'vue';
		import './style-inject.es-8e066492.js';
		import '@/components/VScrollerScrollBar';
		import '@/components/VScrollerRow';
		import './style-inject.es-d22d81f4.js';
		import 'VScrollerScrollBar';
		import 'VScrollerRow';

		@@ -20,6 +22,4 @@ /* export { default as Scroller } from "./Scroller";
		export { default as VScrollerScrollBar } from "./VScroller"; */
		//import VScrollerScrollBar from './VScrollerScrollBar'
		//import VScrollerRow from './VScrollerRow'
		//export default { Scroller, VScroller, VScrollerScrollBar, VScrollerRow };
		var index = { Scroller: script, VScroller: script$1 };
		var index = { Scroller: script, VScroller, VScrollerScrollBar: script$1, VScrollerRow: script$2 };
		//export default { Scroller, VScroller };

		@@ -26,0 +26,0 @@ var components = /#__PURE__/Object.freeze({

dist/esm/Scroller.js

		@@ -5,9 +5,9 @@
		// https://github.com/yannisraft/chronocraft-scroller-vue.git
		// v0.1.15
		// v0.1.16
		// MIT License

		import { s as script } from './Scroller-b8028111.js';
		export { s as default } from './Scroller-b8028111.js';
		import './_rollupPluginBabelHelpers-9c1e596c.js';
		import { s as script } from './Scroller-733394d8.js';
		export { s as default } from './Scroller-733394d8.js';
		import './_rollupPluginBabelHelpers-70b6930d.js';
		import 'vue';
		import './style-inject.es-8e066492.js';
		import './style-inject.es-d22d81f4.js';

817

dist/esm/VScroller.js

		@@ -5,11 +5,812 @@
		// https://github.com/yannisraft/chronocraft-scroller-vue.git
		// v0.1.15
		// v0.1.16
		// MIT License

		import { s as script } from './VScroller-535ed544.js';
		export { s as default } from './VScroller-535ed544.js';
		import './_rollupPluginBabelHelpers-9c1e596c.js';
		import 'vue';
		import '@/components/VScrollerScrollBar';
		import '@/components/VScrollerRow';
		import './style-inject.es-8e066492.js';
		import { b as _objectSpread2 } from './_rollupPluginBabelHelpers-70b6930d.js';
		import { defineComponent, ref, watch, onMounted, onBeforeUpdate, resolveComponent, openBlock, createElementBlock, createElementVNode, normalizeStyle, Fragment, renderList, createBlock, createVNode } from 'vue';
		import VScrollerScrollBar from 'VScrollerScrollBar';
		import VScrollerRow from 'VScrollerRow';
		import { s as styleInject } from './style-inject.es-d22d81f4.js';
		import { s as script$1 } from './VScrollerScrollBar-bdf4fabc.js';
		import { s as script$2 } from './VScrollerRow-4a5a68fa.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: VScrollerScrollBar,
		VScrollerRow: VScrollerRow //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 };

dist/esm/VScrollerRow.js

		@@ -5,93 +5,7 @@
		// https://github.com/yannisraft/chronocraft-scroller-vue.git
		// v0.1.15
		// v0.1.16
		// MIT License

		import { defineComponent, ref, onMounted, openBlock, createElementBlock, normalizeStyle, renderSlot, Fragment, renderList, createElementVNode, toDisplayString } from 'vue';

		var script = defineComponent({
		name: 'VScrollerRow',
		props: {
		gap: {
		type: Number,
		default: 0
		},
		calculatedRowSize: {
		type: Number,
		default: 0
		},
		orientation: {
		type: String,
		default: "vertical"
		},
		row: {
		type: Object,
		default: function _default() {
		return {
		cells: {},
		index: 0,
		top: "0px",
		left: "0px",
		width: "0px"
		};
		}
		}
		},
		setup: function setup(props, context) {
		var IDGenerated = Math.floor(Math.random() * 999999) + 1000000; // ---- Reactive Attributes

		var rowId = ref("row_" + IDGenerated);
		var flexDirection = ref("row");
		if (props.orientation === "horizontal") flexDirection.value = "column";
		onMounted(function () {
		var rowelement = document.getElementById(rowId.value);
		context.emit("on-rendered", rowelement.clientHeight);
		});
		return {
		rowId: rowId,
		flexDirection: flexDirection
		};
		}
		});

		var _hoisted_1 = ["id"];
		var _hoisted_2 = ["id"];
		function render(_ctx, _cache, $props, $setup, $data, $options) {
		return openBlock(), createElementBlock("div", {
		class: "scroller-row-v",
		id: _ctx.rowId,
		style: normalizeStyle([{
		'margin-left': _ctx.gap + 'px'
		}, {
		'background-color': '#eaeaea'
		}, {
		top: _ctx.row.top,
		left: _ctx.row.left,
		width: _ctx.row.width,
		height: _ctx.row.height,
		'flex-direction': _ctx.flexDirection
		}])
		}, [renderSlot(_ctx.$slots, "row", {
		data: _ctx.row
		}, function () {
		return [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.row.cells, function (cell, cellkey) {
		return openBlock(), createElementBlock("div", {
		class: "scroller-cell-v",
		key: cellkey,
		id: 'item' + cell.id,
		style: normalizeStyle([{
		left: cell.left,
		top: cell.top,
		'flex-basis': cell.flexbasis
		}])
		}, [renderSlot(_ctx.$slots, "cell", {
		data: cell
		}, function () {
		return [createElementVNode("span", null, toDisplayString(cell.index), 1)];
		})], 12, _hoisted_2);
		}), 128))];
		})], 12, _hoisted_1);
		}

		script.render = render;

		export { script as default };
		import { s as script } from './VScrollerRow-4a5a68fa.js';
		export { s as default } from './VScrollerRow-4a5a68fa.js';
		import 'vue';

255

dist/esm/VScrollerScrollBar.js

		@@ -5,253 +5,8 @@
		// https://github.com/yannisraft/chronocraft-scroller-vue.git
		// v0.1.15
		// v0.1.16
		// MIT License

		import { defineComponent, ref, onMounted, openBlock, createElementBlock, normalizeStyle, createElementVNode, createCommentVNode } from 'vue';
		import { s as styleInject } from './style-inject.es-8e066492.js';

		var script = defineComponent({
		name: "VScrollerScrollBar",
		components: {},
		props: {
		modelValue: {
		type: Array,
		default: function _default() {
		return [];
		}
		},
		active: {
		type: Boolean,
		default: true
		},
		viewportId: {
		type: String,
		default: ""
		},
		orientation: {
		type: String,
		default: "vertical"
		},
		mode: {
		type: String,
		default: "normal"
		},
		trackWidth: {
		type: Number,
		default: 12
		}
		},
		setup: function setup(props, context) {
		// ---- Attributes
		var viewport = null;
		var scrollbarButtonDown = false;
		var previousMovePosition = -100000;
		var IDGenerated = Math.floor(Math.random() * 999999) + 1000000;
		var scrollbarPercent = 0;
		var scrollbar_size;
		var scrollbar_track;
		var scrollbar_thumb;
		var scrollbar_up;
		var scrollbar_track_size;
		var scrollbar_thumb_size;
		var scrollbar_up_size;
		var scrollbar_min;
		var scrollbar_max; // ---- Reactive Attributes

		var scrollbarThumbPosition = ref(0);
		var scrollbarId = ref("scrollbar_" + IDGenerated); // ---- Methods Public

		function ScrollBackwardsClicked() {
		context.emit("on-backwards-clicked");

		if (props.mode !== "infinite") ;
		}

		function ScrollForwardClicked() {
		context.emit("on-forward-clicked");

		if (props.mode !== "infinite") ;
		} // ---- Methods Private


		function SetPosition(position) {
		var newValue = Math.max(scrollbar_min, Math.min(position, scrollbar_max));
		scrollbarThumbPosition.value = newValue;
		UpdatePercent();
		}

		function SetPercent(percent) {
		scrollbarPercent = percent;
		scrollbarThumbPosition.value = scrollbarPercent * (scrollbar_max - scrollbar_min) / 100;
		previousMovePosition = -100000;
		context.emit("on-change", scrollbarPercent);
		}

		function UpdatePercent() {
		var flatValue = scrollbarThumbPosition.value - scrollbar_min;
		scrollbarPercent = 100 * flatValue / (scrollbar_max - scrollbar_min);
		context.emit("on-change", scrollbarPercent);
		}

		function SetupScrollbar() {
		if (props.active) {
		if (props.viewportId !== "") {
		document.querySelector("#" + scrollbarId.value);
		scrollbar_track = document.querySelector("#" + scrollbarId.value + " .scroller-scrollbar-track");
		scrollbar_thumb = document.querySelector("#" + scrollbarId.value + " .scroller-scrollbar-thumb");
		scrollbar_up = document.querySelector("#" + scrollbarId.value + " .scroller-scrollbar-up");
		scrollbar_size = scrollbar_track.clientWidth;
		scrollbar_track_size = scrollbar_track.clientHeight;
		scrollbar_thumb_size = scrollbar_thumb.clientHeight;
		scrollbar_up_size = scrollbar_up.clientHeight;

		if (props.orientation === "horizontal") {
		scrollbar_track_size = scrollbar_track.clientWidth;
		scrollbar_thumb_size = scrollbar_thumb.clientWidth;
		scrollbar_up_size = scrollbar_up.clientWidth;
		scrollbar_size = scrollbar_track.clientHeight;
		viewport.style.height = "calc(100% - " + scrollbar_size + "px)";
		} else {
		viewport.style.width = "calc(100% - " + scrollbar_size + "px)";
		}

		scrollbar_min = scrollbar_up_size;
		scrollbar_max = scrollbar_track_size - scrollbar_up_size - scrollbar_thumb_size;
		scrollbarThumbPosition.value = scrollbar_up_size; // In Infinite mode the scrollbar thumb returns to middle

		if (props.mode === "infinite") SetPercent(50); // Setup Events

		scrollbar_thumb.addEventListener("mousedown", function (e) {
		scrollbarButtonDown = true;
		});
		document.addEventListener("mousemove", function (e) {
		if (!scrollbarButtonDown) return;
		e.preventDefault();

		if (previousMovePosition !== -100000) {
		var diff = e.clientY - previousMovePosition;

		if (props.orientation === "horizontal") {
		diff = e.clientX - previousMovePosition;
		SetPosition(scrollbarThumbPosition.value - diff);
		} else {
		SetPosition(scrollbarThumbPosition.value + diff);
		}
		}

		previousMovePosition = e.clientY;

		if (props.orientation === "horizontal") {
		previousMovePosition = e.clientX;
		}
		});
		document.addEventListener("mouseup", function (e) {
		scrollbarButtonDown = false;

		if (props.mode === "infinite") {
		SetPercent(50);
		}
		});
		}
		}
		}

		onMounted(function () {
		viewport = document.querySelector("#" + props.viewportId);
		SetupScrollbar();
		});
		return {
		// Attributes
		scrollbarId: scrollbarId,
		scrollbarThumbPosition: scrollbarThumbPosition,
		// Methods Public
		ScrollBackwardsClicked: ScrollBackwardsClicked,
		ScrollForwardClicked: ScrollForwardClicked
		};
		}
		});

		var _hoisted_1 = ["id"];
		function render(_ctx, _cache, $props, $setup, $data, $options) {
		return _ctx.active ? (openBlock(), createElementBlock("div", {
		key: 0,
		id: _ctx.scrollbarId,
		class: "scroller-scrollbar",
		style: normalizeStyle([_ctx.orientation === 'vertical' ? {
		'width': _ctx.trackWidth + 'px',
		'height': '100%',
		'top': '0px',
		'right': '0px'
		} : {
		'width': '100%',
		'height': _ctx.trackWidth + 'px',
		'bottom': '0px',
		'right': '0px',
		'top': 'unset'
		}])
		}, [createElementVNode("div", {
		class: "scroller-scrollbar-track",
		style: normalizeStyle([_ctx.orientation === 'vertical' ? {
		'width': _ctx.trackWidth + 'px',
		'height': '100%',
		'top': '0px',
		'right': '0px'
		} : {
		'width': '100%',
		'height': _ctx.trackWidth + 'px',
		'bottom': '0px',
		'right': '0px',
		'top': 'unset'
		}])
		}, null, 4), createElementVNode("div", {
		class: "scroller-scrollbar-thumb",
		style: normalizeStyle([_ctx.orientation === 'vertical' ? {
		'width': '100%',
		'height': '30px',
		'top': _ctx.scrollbarThumbPosition + 'px',
		'right': '0px'
		} : {
		'width': '30px',
		'height': '100%',
		'bottom': '0px',
		'right': _ctx.scrollbarThumbPosition + 'px',
		'top': 'unset'
		}])
		}, null, 4), createElementVNode("div", {
		class: "scroller-scrollbar-up",
		onClick: _cache[0] \|\| (_cache[0] = function ($event) {
		return _ctx.ScrollBackwardsClicked();
		}),
		style: normalizeStyle([_ctx.orientation === 'vertical' ? {
		'height': _ctx.trackWidth + 'px',
		'width': '100%',
		'top': '0px',
		'right': '0px'
		} : {
		'width': _ctx.trackWidth + 'px',
		'height': '100%',
		'bottom': '0px',
		'top': 'unset',
		'left': '0px',
		'right': 'unset'
		}])
		}, null, 4), createElementVNode("div", {
		class: "scroller-scrollbar-down",
		onClick: _cache[1] \|\| (_cache[1] = function ($event) {
		return _ctx.ScrollForwardClicked();
		}),
		style: normalizeStyle([_ctx.orientation === 'vertical' ? {
		'height': _ctx.trackWidth + 'px',
		'width': '100%'
		} : {
		'width': _ctx.trackWidth + 'px',
		'height': '100%'
		}])
		}, null, 4)], 12, _hoisted_1)) : createCommentVNode("", true);
		}

		var css_248z = ".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";
		styleInject(css_248z);

		script.render = render;

		export { script as default };
		import { s as script } from './VScrollerScrollBar-bdf4fabc.js';
		export { s as default } from './VScrollerScrollBar-bdf4fabc.js';
		import 'vue';
		import './style-inject.es-d22d81f4.js';

package.json

		{
		"name": "chronocraft-scroller-vue",
		"version": "0.1.15",
		"version": "0.1.16",
		"private": false,
		@@ -5,0 +5,0 @@ "description": "A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component",

src/components/index.ts

		@@ -6,6 +6,6 @@ /* export { default as Scroller } from "./Scroller";
		import VScroller from './VScroller'
		//import VScrollerScrollBar from './VScrollerScrollBar'
		//import VScrollerRow from './VScrollerRow'
		import VScrollerScrollBar from './VScrollerScrollBar'
		import VScrollerRow from './VScrollerRow'

		//export default { Scroller, VScroller, VScrollerScrollBar, VScrollerRow };
		export default { Scroller, VScroller };
		export default { Scroller, VScroller, VScrollerScrollBar, VScrollerRow };
		//export default { Scroller, VScroller };

src/components/VScroller/index.ts

		import VScroller from "./VScroller.vue";
		//import VScrollerScrollBar from "../VScrollerScrollBar/VScrollerScrollBar.vue";
		//import VScrollerRow from "./VScrollerRow.vue";
		//export default { VScroller, VScrollerScrollBar, VScrollerRow };
		export default VScroller;
		import VScrollerScrollBar from "./VScrollerScrollBar.vue";
		import VScrollerRow from "./VScrollerRow.vue";
		export default { VScroller, VScrollerScrollBar, VScrollerRow };
		//export default VScroller;

src/components/VScrollerRow/index.ts

		@@ -1,2 +0,2 @@
		import VScrollerRow from "./VScrollerRow.vue";
		import VScrollerRow from "../VScroller/VScrollerRow.vue";
		export default VScrollerRow;

src/components/VScrollerScrollBar/index.ts

		@@ -1,2 +0,2 @@
		import VScrollerScrollBar from "./VScrollerScrollBar.vue";
		import VScrollerScrollBar from "../VScroller/VScrollerScrollBar.vue";
		export default VScrollerScrollBar;

src/components/VScrollerRow/VScrollerRow.vue

src/components/VScrollerScrollBar/VScrollerScrollBar.vue

dist/chronocraftscrollervue-browser.min.js

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

dist/chronocraftscrollervue.esm.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

src/components/VScroller/VScroller.vue

Sorry, the diff of this file is not supported yet

Improved metrics

Worsened metrics