vevet 2.7.1 → 2.10.0

package/build/cjs/app/events/Viewport.js

@@ -45,6 +45,7 @@ var Viewport = /** @class */ (function (_super) {
         var _this = _super.call(this, false) || this;
         _this._width = 0;
         _this._height = 0;
+        _this._radius = 0;
         _this._prevSize = { w: 0, h: 0 };
         _this._isDesktop = false;
         _this._isTablet = false;
@@ -66,6 +67,13 @@ var Viewport = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Viewport.prototype, "radius", {
+        get: function () {
+            return Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2)) / 2;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Viewport.prototype, "vw", {
         /**
          * Get VW value
@@ -86,6 +94,16 @@ var Viewport = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Viewport.prototype, "vr", {
+        /**
+         * Get VR value (viewport radius / 100)
+         */
+        get: function () {
+            return this.radius / 100;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Viewport.prototype, "prevSize", {
         /**
          * Get previous Viewport size
@@ -259,6 +277,7 @@ var Viewport = /** @class */ (function (_super) {
         var html = this._app.html;
         html.style.setProperty('--vw', "".concat(this.vw, "px"));
         html.style.setProperty('--vh', "".concat(this.vh, "px"));
+        html.style.setProperty('--vr', "".concat(this.vr, "px"));
     };
     /**
      * Launch callbacks on resize.

package/build/cjs/base/Callbacks.js

@@ -72,7 +72,7 @@ var Callbacks = /** @class */ (function () {
      */
     Callbacks.prototype.add = function (target, func, data) {
         if (data === void 0) { data = {}; }
-        var id = (0, common_1.randID)('callback');
+        var id = (0, common_1.id)('callback');
         var obj = {
             id: id,
             on: true,

package/build/cjs/utils/common/id.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var index = 0;
+/**
+ * Generate an ID
+ */
+function id(prefix) {
+    if (prefix === void 0) { prefix = 'id'; }
+    index += 1;
+    return "".concat(prefix, "_").concat(index);
+}
+exports.default = id;

package/build/cjs/utils/common/index.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.timeoutCallback = exports.mergeWithoutArrays = exports.randID = void 0;
-var randID_1 = __importDefault(require("./randID"));
-exports.randID = randID_1.default;
+exports.timeoutCallback = exports.mergeWithoutArrays = exports.id = void 0;
+var id_1 = __importDefault(require("./id"));
+exports.id = id_1.default;
 var mergeWithoutArrays_1 = __importDefault(require("./mergeWithoutArrays"));
 exports.mergeWithoutArrays = mergeWithoutArrays_1.default;
 var timeoutCallback_1 = __importDefault(require("./timeoutCallback"));

package/build/cjs/utils/common/orderId.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var index = 0;
+/**
+ * Generate a random ID
+ */
+function orderId(prefix) {
+    if (prefix === void 0) { prefix = 'id'; }
+    index += 1;
+    return "".concat(prefix, "_").concat(index);
+}
+exports.default = orderId;

package/build/cjs/utils/common/randID.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
  */
 function randID(prefix) {
     if (prefix === void 0) { prefix = 'id'; }
-    var id = "".concat(+new Date(), "_").concat(Math.round(Math.random() * 1000));
+    var id = "".concat(+new Date(), "_").concat(Math.round(Math.random() * 1));
     return "".concat(prefix, "_").concat(id);
 }
 exports.default = randID;

package/build/cjs/utils/listeners/onScroll.js

@@ -11,7 +11,7 @@ function onScroll(_a) {
     var container = _a.container, callback = _a.callback, _b = _a.isPassive, isPassive = _b === void 0 ? false : _b;
     // check if listeners for this element already exist
     var instance = instances.find(function (data) { return (data.container === container && data.isPassive === isPassive); });
-    var callbackId = (0, common_1.randID)('scroll-event');
+    var callbackId = (0, common_1.id)('scroll-event');
     // if a listener exists, we just add a new callback to its stack
     if (instance) {
         instance.callbacks.push({
@@ -22,7 +22,7 @@ function onScroll(_a) {
     else {
         // otherwise we create a new instance
         instance = {
-            id: (0, common_1.randID)('scroll-event-instance'),
+            id: (0, common_1.id)('scroll-event-instance'),
             container: container,
             callbacks: [{
                     id: callbackId,

package/build/es/app/events/Viewport.js

@@ -26,6 +26,7 @@ export class Viewport extends Callbacks {
         super(false);
         this._width = 0;
         this._height = 0;
+        this._radius = 0;
         this._prevSize = { w: 0, h: 0 };
         this._isDesktop = false;
         this._isTablet = false;
@@ -38,6 +39,9 @@ export class Viewport extends Callbacks {
     get height() {
         return this._height;
     }
+    get radius() {
+        return Math.sqrt(Math.pow(this.width, 2) + Math.pow(this.height, 2)) / 2;
+    }
     /**
      * Get VW value
      */
@@ -50,6 +54,12 @@ export class Viewport extends Callbacks {
     get vh() {
         return this.height / 100;
     }
+    /**
+     * Get VR value (viewport radius / 100)
+     */
+    get vr() {
+        return this.radius / 100;
+    }
     /**
      * Get previous Viewport size
      */
@@ -190,6 +200,7 @@ export class Viewport extends Callbacks {
         const { html } = this._app;
         html.style.setProperty('--vw', `${this.vw}px`);
         html.style.setProperty('--vh', `${this.vh}px`);
+        html.style.setProperty('--vr', `${this.vr}px`);
     }
     /**
      * Launch callbacks on resize.

package/build/es/base/Callbacks.js

@@ -1,4 +1,4 @@
-import { timeoutCallback, randID } from '../utils/common';
+import { timeoutCallback, id as orderId } from '../utils/common';
 /**
  * A class for callbacks' manipulation.
  */
@@ -52,7 +52,7 @@ export class Callbacks {
      * });
      */
     add(target, func, data = {}) {
-        const id = randID('callback');
+        const id = orderId('callback');
         const obj = {
             id,
             on: true,

package/build/es/utils/common/id.js

@@ -0,0 +1,8 @@
+let index = 0;
+/**
+ * Generate an ID
+ */
+export default function id(prefix = 'id') {
+    index += 1;
+    return `${prefix}_${index}`;
+}

package/build/es/utils/common/index.js

@@ -1,4 +1,4 @@
-import randID from './randID';
+import id from './id';
 import mergeWithoutArrays from './mergeWithoutArrays';
 import timeoutCallback from './timeoutCallback';
-export { randID, mergeWithoutArrays, timeoutCallback, };
+export { id, mergeWithoutArrays, timeoutCallback, };

package/build/es/utils/common/orderId.js

@@ -0,0 +1,8 @@
+let index = 0;
+/**
+ * Generate a random ID
+ */
+export default function orderId(prefix = 'id') {
+    index += 1;
+    return `${prefix}_${index}`;
+}

package/build/es/utils/common/randID.js

@@ -2,6 +2,6 @@
  * Generate a random ID
  */
 export default function randID(prefix = 'id') {
-    const id = `${+new Date()}_${Math.round(Math.random() * 1000)}`;
+    const id = `${+new Date()}_${Math.round(Math.random() * 1)}`;
     return `${prefix}_${id}`;
 }

package/build/es/utils/listeners/onScroll.js

@@ -1,6 +1,6 @@
 import { addEventListener, selectOne } from 'vevet-dom';
 import { SmoothScroll } from '../../components/scroll/smooth-scroll/SmoothScroll';
-import { randID } from '../common';
+import { id as orderId } from '../common';
 let instances = [];
 /**
  * Add OnScroll event
@@ -8,7 +8,7 @@ let instances = [];
 export default function onScroll({ container, callback, isPassive = false, }) {
     // check if listeners for this element already exist
     let instance = instances.find((data) => (data.container === container && data.isPassive === isPassive));
-    const callbackId = randID('scroll-event');
+    const callbackId = orderId('scroll-event');
     // if a listener exists, we just add a new callback to its stack
     if (instance) {
         instance.callbacks.push({
@@ -19,7 +19,7 @@ export default function onScroll({ container, callback, isPassive = false, }) {
     else {
         // otherwise we create a new instance
         instance = {
-            id: randID('scroll-event-instance'),
+            id: orderId('scroll-event-instance'),
             container,
             callbacks: [{
                     id: callbackId,

package/build/types/app/events/Viewport.d.ts

@@ -58,6 +58,11 @@ export declare class Viewport extends Callbacks<NViewport.CallbacksTypes> {
      */
     protected _height: number;
     get height(): number;
+    /**
+     * Current Viewport radius
+     */
+    protected _radius: number;
+    get radius(): number;
     /**
      * Get VW value
      */
@@ -66,6 +71,10 @@ export declare class Viewport extends Callbacks<NViewport.CallbacksTypes> {
      * Get VH value
      */
     get vh(): number;
+    /**
+     * Get VR value (viewport radius / 100)
+     */
+    get vr(): number;
     /**
      * Previous Viewport size
      */

package/build/types/app/events/Viewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Viewport.d.ts","sourceRoot":"","sources":["../../../../src/ts/app/events/Viewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAIrD,yBAAiB,SAAS,CAAC;IAEvB;;OAEG;IACH,UAAiB,OAAO;QACpB,YAAY,EAAE,OAAO,CAAC;QACtB,aAAa,EAAE,OAAO,CAAC;QACvB,kBAAkB,EAAE,OAAO,CAAC;KAC/B;IAED;;OAEG;IACH,UAAiB,cAAe,SAAQ,UAAU,CAAC,cAAc;QAC7D;;WAEG;QACH,GAAG,EAAE,OAAO,CAAC;QACb;;WAEG;QACH,GAAG,EAAE,OAAO,CAAC;QACb;;WAEG;QACH,IAAI,EAAE,OAAO,CAAC;QACd;;WAEG;QACH,IAAI,EAAE,OAAO,CAAA;QACb;;WAEG;QACH,IAAI,EAAE,OAAO,CAAC;QACd;;WAEG;QACH,IAAI,EAAE,OAAO,CAAC;QACd;;WAEG;QACH,EAAE,EAAE,OAAO,CAAC;KACf;CAEJ;AAqBD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,SAAS,CACnC,SAAS,CAAC,cAAc,CAC3B;IACG;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC;IACzB,IAAI,KAAK,WAER;IAED;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;IAC1B,IAAI,MAAM,WAET;IAED;;OAEG;IACH,IAAI,EAAE,WAEL;IACD;;OAEG;IACH,IAAI,EAAE,WAEL;IAED;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE;QACjB,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACb,CAAC;IAEF;;OAEG;IACH,IAAI,QAAQ;;;MAEX;IAED;;OAEG;IACH,IAAI,WAAW,YAEd;IAED;;OAEG;IACH,IAAI,UAAU,YAEb;IAED;;OAEG;IACH,SAAS,CAAC,UAAU,EAAE,OAAO,CAAC;IAC9B,IAAI,SAAS,YAEZ;IAED;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC;IAC7B,IAAI,QAAQ,YAEX;IAED;;OAEG;IACH,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC5B,IAAI,OAAO,YAEV;IAED;;OAEG;IACH,IAAI,GAAG,WAKN;IAED;;OAEG;IACH,IAAI,eAAe,WAKlB;IAED,SAAS,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;;IAgB9D,SAAS,CAAC,YAAY;IAMtB,SAAS,CAAC,UAAU;IAapB;;OAEG;IACH,SAAS,CAAC,UAAU;IA0BpB;;OAEG;IACH,SAAS,CAAC,cAAc;IA4CxB;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAC9B,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,MAAM,EAAE;IAenB;;OAEG;IACH,SAAS,CAAC,cAAc;IAQxB;;OAEG;IACH,SAAS,CAAC,SAAS;IACf;;OAEG;IACH,KAAK,UAAQ;IA6CjB;;OAEG;IACI,WAAW;CAGrB"}
+{"version":3,"file":"Viewport.d.ts","sourceRoot":"","sources":["../../../../src/ts/app/events/Viewport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAIrD,yBAAiB,SAAS,CAAC;IAEvB;;OAEG;IACH,UAAiB,OAAO;QACpB,YAAY,EAAE,OAAO,CAAC;QACtB,aAAa,EAAE,OAAO,CAAC;QACvB,kBAAkB,EAAE,OAAO,CAAC;KAC/B;IAED;;OAEG;IACH,UAAiB,cAAe,SAAQ,UAAU,CAAC,cAAc;QAC7D;;WAEG;QACH,GAAG,EAAE,OAAO,CAAC;QACb;;WAEG;QACH,GAAG,EAAE,OAAO,CAAC;QACb;;WAEG;QACH,IAAI,EAAE,OAAO,CAAC;QACd;;WAEG;QACH,IAAI,EAAE,OAAO,CAAA;QACb;;WAEG;QACH,IAAI,EAAE,OAAO,CAAC;QACd;;WAEG;QACH,IAAI,EAAE,OAAO,CAAC;QACd;;WAEG;QACH,EAAE,EAAE,OAAO,CAAC;KACf;CAEJ;AAqBD;;;GAGG;AACH,qBAAa,QAAS,SAAQ,SAAS,CACnC,SAAS,CAAC,cAAc,CAC3B;IACG;;OAEG;IACH,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC;IACzB,IAAI,KAAK,WAER;IAED;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;IAC1B,IAAI,MAAM,WAET;IAED;;OAEG;IACH,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;IAC1B,IAAI,MAAM,WAET;IAED;;OAEG;IACH,IAAI,EAAE,WAEL;IACD;;OAEG;IACH,IAAI,EAAE,WAEL;IACD;;OAEG;IACH,IAAI,EAAE,WAEL;IAED;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE;QACjB,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACb,CAAC;IAEF;;OAEG;IACH,IAAI,QAAQ;;;MAEX;IAED;;OAEG;IACH,IAAI,WAAW,YAEd;IAED;;OAEG;IACH,IAAI,UAAU,YAEb;IAED;;OAEG;IACH,SAAS,CAAC,UAAU,EAAE,OAAO,CAAC;IAC9B,IAAI,SAAS,YAEZ;IAED;;OAEG;IACH,SAAS,CAAC,SAAS,EAAE,OAAO,CAAC;IAC7B,IAAI,QAAQ,YAEX;IAED;;OAEG;IACH,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC5B,IAAI,OAAO,YAEV;IAED;;OAEG;IACH,IAAI,GAAG,WAKN;IAED;;OAEG;IACH,IAAI,eAAe,WAKlB;IAED,SAAS,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;;IAiB9D,SAAS,CAAC,YAAY;IAMtB,SAAS,CAAC,UAAU;IAapB;;OAEG;IACH,SAAS,CAAC,UAAU;IA0BpB;;OAEG;IACH,SAAS,CAAC,cAAc;IA4CxB;;OAEG;IACH,SAAS,CAAC,wBAAwB,CAC9B,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,MAAM,EAAE;IAenB;;OAEG;IACH,SAAS,CAAC,cAAc;IASxB;;OAEG;IACH,SAAS,CAAC,SAAS;IACf;;OAEG;IACH,KAAK,UAAQ;IA6CjB;;OAEG;IACI,WAAW;CAGrB"}

package/build/types/utils/common/id.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generate an ID
+ */
+export default function id(prefix?: string): string;
+//# sourceMappingURL=id.d.ts.map

package/build/types/utils/common/id.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"id.d.ts","sourceRoot":"","sources":["../../../../src/ts/utils/common/id.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,EAAE,CACtB,MAAM,SAAO,UAIhB"}

package/build/types/utils/common/index.d.ts

@@ -1,5 +1,5 @@
-import randID from './randID';
+import id from './id';
 import mergeWithoutArrays from './mergeWithoutArrays';
 import timeoutCallback from './timeoutCallback';
-export { randID, mergeWithoutArrays, timeoutCallback, };
+export { id, mergeWithoutArrays, timeoutCallback, };
 //# sourceMappingURL=index.d.ts.map

package/build/types/utils/common/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ts/utils/common/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACH,MAAM,EACN,kBAAkB,EAClB,eAAe,GAClB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ts/utils/common/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AACtD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EACH,EAAE,EACF,kBAAkB,EAClB,eAAe,GAClB,CAAC"}

package/build/types/utils/common/orderId.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generate a random ID
+ */
+export default function orderId(prefix?: string): string;
+//# sourceMappingURL=orderId.d.ts.map

package/build/types/utils/common/orderId.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"orderId.d.ts","sourceRoot":"","sources":["../../../../src/ts/utils/common/orderId.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAC3B,MAAM,SAAO,UAIhB"}

package/package.json

@@ -1,22 +1,24 @@
 {
   "name": "vevet",
-  "version": "2.7.1",
+  "version": "2.10.0",
   "description": "VEVET - A JavaScript library",
   "browserslist": [
     "since 2015"
   ],
   "scripts": {
-    "pages-build": "node ./examples-src/compiler/index.js && webpack --config ./examples-src/webpack/webpack.prod.js",
+    "pages-build": "node ./examples-src/compiler/index.js && NODE_ENV=production webpack --config ./examples-src/webpack/prod.js",
     "pages-dev": "npm-run-all --parallel pages-dev:pug pages-dev:webpack",
     "pages-dev:pug": "nodemon --watch ./examples-src/pages --watch ./examples-src/compiler --ext pug,json,ts,js,html,css ./examples-src/compiler/index.js",
-    "pages-dev:webpack": "webpack serve --config ./examples-src/webpack/webpack.dev.js",
-    "watch-tsc": "nodemon --watch ./src/ts --ext ts,js --exec \"npm run prepare:es\"",
+    "pages-dev:webpack": "NODE_ENV=development webpack serve --config ./examples-src/webpack/dev.js",
     "prepare:all": "npm run prepare:es && npm run prepare:cjs && npm run prepare:cdn",
     "prepare:es": "tsc ./src/ts/index.ts --outDir ./build/es --target es6 --module es6 --moduleResolution node --esModuleInterop true --allowSyntheticDefaultImports true --declaration true --declarationDir ./build/types --declarationMap true",
     "prepare:cjs": "tsc ./src/ts/index.ts --outDir ./build/cjs --target es5 --module commonjs --moduleResolution node --esModuleInterop true --allowSyntheticDefaultImports true",
     "prepare:cdn": "webpack --config ./config/webpack.cdn.js",
     "lint:js": "eslint . --ext .ts,.js",
-    "prepare": "npm run prepare:all",
+    "docs": "typedoc --out examples-build/docs ./src/ts --theme default --hideGenerator",
+    "gh-pages": "git add examples-build/* && git commit -m \"Update github pages\" && npm run gh-pages:push",
+    "gh-pages:push": "git subtree split --prefix examples-build/ -b gh-pages-temp && git push -f origin gh-pages-temp:gh-pages && git branch -D gh-pages-temp",
+    "prepare": "npm run lint:js && npm run prepare:all && npm run pages-build && npm run docs && npm run gh-pages",
     "release": "npm publish"
   },
   "main": "./build/cjs/index.js",
@@ -57,6 +59,10 @@
     "text animation",
     "timeline"
   ],
+  "files": [
+    "src",
+    "build"
+  ],
   "author": "Anton Bobrov <anton.bobrov@hotmail.com>",
   "license": "MIT",
   "devDependencies": {
@@ -67,7 +73,8 @@
     "@typescript-eslint/eslint-plugin": "^4.28.1",
     "@typescript-eslint/parser": "^4.28.1",
     "babel-loader": "^8.2.2",
-    "bootstrap": "^5.0.2",
+    "base-href-webpack-plugin": "^3.0.1",
+    "bootstrap": "^5.1.3",
     "clean-webpack-plugin": "^4.0.0-alpha.0",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^6.2.0",
@@ -90,6 +97,7 @@
     "style-loader": "^3.2.1",
     "terser-webpack-plugin": "^5.1.4",
     "ts-loader": "^9.2.3",
+    "typedoc": "^0.22.15",
     "typescript": "^4.3.5",
     "webpack": "^5.41.1",
     "webpack-cli": "^4.7.2",

package/src/ts/app/events/Viewport.ts

@@ -92,6 +92,14 @@ export class Viewport extends Callbacks<
         return this._height;
     }
 
+    /**
+     * Current Viewport radius
+     */
+    protected _radius: number;
+    get radius () {
+        return Math.sqrt(this.width ** 2 + this.height ** 2) / 2;
+    }
+
     /**
      * Get VW value
      */
@@ -104,6 +112,12 @@ export class Viewport extends Callbacks<
     get vh () {
         return this.height / 100;
     }
+    /**
+     * Get VR value (viewport radius / 100)
+     */
+    get vr () {
+        return this.radius / 100;
+    }
 
     /**
      * Previous Viewport size
@@ -186,6 +200,7 @@ export class Viewport extends Callbacks<
         super(false);
         this._width = 0;
         this._height = 0;
+        this._radius = 0;
         this._prevSize = { w: 0, h: 0 };
         this._isDesktop = false;
         this._isTablet = false;
@@ -316,6 +331,7 @@ export class Viewport extends Callbacks<
         const { html } = this._app;
         html.style.setProperty('--vw', `${this.vw}px`);
         html.style.setProperty('--vh', `${this.vh}px`);
+        html.style.setProperty('--vr', `${this.vr}px`);
     }
 
 

package/src/ts/base/Callbacks.ts

@@ -1,5 +1,5 @@
 import { Application } from '../app/Application';
-import { timeoutCallback, randID } from '../utils/common';
+import { timeoutCallback, id as orderId } from '../utils/common';
 
 
 
@@ -174,7 +174,7 @@ export class Callbacks<
         func: NCallbacks.CallbackSettings<Types, Target>['do'],
         data: NCallbacks.CallbackBaseSettings = {},
     ): NCallbacks.AddedCallback {
-        const id = randID('callback');
+        const id = orderId('callback');
         const obj: NCallbacks.CallbacksData<Types> = {
             id,
             on: true,

package/src/ts/utils/common/id.ts

@@ -0,0 +1,11 @@
+let index = 0;
+
+/**
+ * Generate an ID
+ */
+export default function id (
+    prefix = 'id',
+) {
+    index += 1;
+    return `${prefix}_${index}`;
+}

package/src/ts/utils/common/index.ts

@@ -1,9 +1,9 @@
-import randID from './randID';
+import id from './id';
 import mergeWithoutArrays from './mergeWithoutArrays';
 import timeoutCallback from './timeoutCallback';
 
 export {
-    randID,
+    id,
     mergeWithoutArrays,
     timeoutCallback,
 };

package/src/ts/utils/listeners/onScroll.ts

@@ -1,7 +1,7 @@
 import { addEventListener, selectOne } from 'vevet-dom';
 import { IRemovable } from '../types/general';
 import { SmoothScroll } from '../../components/scroll/smooth-scroll/SmoothScroll';
-import { randID } from '../common';
+import { id as orderId } from '../common';
 
 type Container = string | Element | SmoothScroll | Window;
 
@@ -43,7 +43,7 @@ export default function onScroll ({
     let instance = instances.find((data) => (
         data.container === container && data.isPassive === isPassive
     ))!;
-    const callbackId = randID('scroll-event');
+    const callbackId = orderId('scroll-event');
 
     // if a listener exists, we just add a new callback to its stack
     if (instance) {
@@ -54,7 +54,7 @@ export default function onScroll ({
     } else {
         // otherwise we create a new instance
         instance = {
-            id: randID('scroll-event-instance'),
+            id: orderId('scroll-event-instance'),
             container,
             callbacks: [{
                 id: callbackId,

package/build/cjs/utils/scroll/to.js

@@ -1,41 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var Timeline_1 = require("../../components/timeline/Timeline");
-var getScrollValues_1 = __importDefault(require("./getScrollValues"));
-/**
- * Scroll to coordinates
- */
-function scrollTo(_a) {
-    var _b = _a.container, container = _b === void 0 ? window : _b, _c = _a.top, top = _c === void 0 ? 0 : _c, _d = _a.left, left = _d === void 0 ? 0 : _d, _e = _a.duration, duration = _e === void 0 ? 250 : _e;
-    return new Promise(function (resolve, reject) {
-        // save start values
-        var startValues = (0, getScrollValues_1.default)(container);
-        if (startValues) {
-            // create animation
-            var timeline = new Timeline_1.Timeline({
-                duration: duration,
-            });
-            timeline.addCallback('progress', function (data) {
-                if (container) {
-                    container.scrollTo({
-                        top: startValues.scrollTop
-                            + (top - startValues.scrollTop) * data.easing,
-                        left: startValues.scrollLeft
-                            + (left - startValues.scrollLeft) * data.easing,
-                        behavior: 'auto',
-                    });
-                }
-            });
-            timeline.addCallback('end', function () {
-                resolve();
-            });
-            timeline.play();
-            return;
-        }
-        reject();
-    });
-}
-exports.default = scrollTo;

package/build/es/utils/scroll/to.js

@@ -1,34 +0,0 @@
-import { Timeline } from '../../components/timeline/Timeline';
-import getScrollValues from './getScrollValues';
-/**
- * Scroll to coordinates
- */
-export default function scrollTo({ container = window, top = 0, left = 0, duration = 250, }) {
-    return new Promise((resolve, reject) => {
-        // save start values
-        const startValues = getScrollValues(container);
-        if (startValues) {
-            // create animation
-            const timeline = new Timeline({
-                duration,
-            });
-            timeline.addCallback('progress', (data) => {
-                if (container) {
-                    container.scrollTo({
-                        top: startValues.scrollTop
-                            + (top - startValues.scrollTop) * data.easing,
-                        left: startValues.scrollLeft
-                            + (left - startValues.scrollLeft) * data.easing,
-                        behavior: 'auto',
-                    });
-                }
-            });
-            timeline.addCallback('end', () => {
-                resolve();
-            });
-            timeline.play();
-            return;
-        }
-        reject();
-    });
-}

package/build/types/utils/scroll/to.d.ts

@@ -1,28 +0,0 @@
-import { ScrollLike } from '../types/general';
-interface Props {
-    /**
-     * @default window
-     */
-    container?: Window | Element | ScrollLike;
-    /**
-     * top padding
-     * @default 0
-     */
-    top?: number;
-    /**
-     * left padding
-     * @default 0
-     */
-    left?: number;
-    /**
-     * scroll duration
-     * @default 250
-     */
-    duration?: number;
-}
-/**
- * Scroll to coordinates
- */
-export default function scrollTo({ container, top, left, duration, }: Props): Promise<void>;
-export {};
-//# sourceMappingURL=to.d.ts.map

package/build/types/utils/scroll/to.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"to.d.ts","sourceRoot":"","sources":["../../../../src/ts/utils/scroll/to.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAG9C,UAAU,KAAK;IACX;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IAC1C;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAE,EAC9B,SAAkB,EAClB,GAAO,EACP,IAAQ,EACR,QAAc,GACjB,EAAE,KAAK,iBA8BP"}

package/src/ts/utils/common/randID.ts

@@ -1,9 +0,0 @@
-/**
- * Generate a random ID
- */
-export default function randID (
-    prefix = 'id',
-) {
-    const id = `${+new Date()}_${Math.round(Math.random() * 1000)}`;
-    return `${prefix}_${id}`;
-}