jenesius-vue-modal - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

dist/jenesius-vue-modal.cjs.js

 /*!
-  * jenesius-vue-modal v1.3.1
+  * jenesius-vue-modal v1.4.0
   * (c) 2021 Jenesius
@@ -12,415 +12,333 @@ * @license MIT
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
 
-  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-    _typeof = function (obj) {
-      return typeof obj;
-    };
-  } else {
-    _typeof = function (obj) {
-      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    };
-  }
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
 
-  return _typeof(obj);
-}
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-  try {
-    var info = gen[key](arg);
-    var value = info.value;
-  } catch (error) {
-    reject(error);
-    return;
-  }
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
 
-  if (info.done) {
-    resolve(value);
-  } else {
-    Promise.resolve(value).then(_next, _throw);
-  }
+function __extends(d, b) {
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 }
 
-function _asyncToGenerator(fn) {
-  return function () {
-    var self = this,
-        args = arguments;
-    return new Promise(function (resolve, reject) {
-      var gen = fn.apply(self, args);
-
-      function _next(value) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-      }
-
-      function _throw(err) {
-        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-      }
-
-      _next(undefined);
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-  };
 }
 
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
+function __generator(thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
 }
 
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
+/**
+ * last change: 25.11.2021
+ * */
+var ModalError = /** @class */ (function (_super) {
+    __extends(ModalError, _super);
+    function ModalError(message, details) {
+        if (details === void 0) { details = null; }
+        var _this = _super.call(this) || this;
+        _this.isModalError = true;
+        _this.message = message;
+        _this.details = details;
+        return _this;
+    }
+    ModalError.Undefined = function (id) {
+        return new ModalError("Modal with id: " + id + " not founded. The modal window may have been closed earlier.");
+    };
+    ModalError.UndefinedGuardName = function (name) {
+        return new ModalError("Guard's name " + name + " is not declaration.");
+    };
+    ModalError.NextReject = function (id) {
+        return new ModalError("Guard returned false. Modal navigation was stopped. Modal id " + id);
+    };
+    ModalError.GuardDeclarationType = function (func) {
+        return new ModalError("Guard's type should be a function. Provided:", func);
+    };
+    ModalError.ConfigurationType = function (config) {
+        return new ModalError("Configuration type must be an Object. Provided", config);
+    };
+    ModalError.ConfigurationUndefinedParam = function (param, availableParams) {
+        return new ModalError("In configuration founded unknown parameter: " + param + ". Available are " + availableParams.join(", ") + " ");
+    };
+    ModalError.QueueNoEmpty = function () {
+        return new ModalError("Modal's queue is not empty. Probably some modal reject closing by onClose hook.");
+    };
+    ModalError.EmptyModalQueue = function () {
+        return new ModalError("Modal queue is empty.");
+    };
+    ModalError.NotInitialized = function () {
+        return new ModalError("Modal Container not found. Put container from jenesius-vue-modal in App's template. Check documentation for more information https://modal.jenesius.com/docs.html/installation#getting-started.");
+    };
+    ModalError.ModalComponentNotProvided = function () {
+        return new ModalError("The first parameter(VueComponent) was not specified.");
+    };
+    return ModalError;
+}(Error));
 
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
+/**
+ * last change: 25.11.2021
+ * */
+var instanceStorage = {};
+function saveInstance(id, instance) {
+    instanceStorage[id] = instance;
 }
 
-function _defineProperty(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-
-  return obj;
-}
-
-function _inherits(subClass, superClass) {
-  if (typeof superClass !== "function" && superClass !== null) {
-    throw new TypeError("Super expression must either be null or a function");
-  }
-
-  subClass.prototype = Object.create(superClass && superClass.prototype, {
-    constructor: {
-      value: subClass,
-      writable: true,
-      configurable: true
+/**
+ * last change: 25.11.2021
+ * */
+var guards = {
+    store: {},
+    add: function (id, name, func) {
+        var availableNames = ["close"];
+        if (!availableNames.includes(name))
+            throw ModalError.UndefinedGuardName(name);
+        if (!this.store[id])
+            this.store[id] = {};
+        if (!this.store[id][name])
+            this.store[id][name] = [];
+        if (typeof func !== "function")
+            throw ModalError.GuardDeclarationType(func);
+        this.store[id][name].push(func);
+    },
+    get: function (id, name) {
+        if (!(id in this.store))
+            return [];
+        if (!(name in this.store[id]))
+            return [];
+        return this.store[id][name];
+    },
+    delete: function (id) {
+        if (!(id in this.store))
+            return;
+        delete this.store[id];
     }
-  });
-  if (superClass) _setPrototypeOf(subClass, superClass);
+};
+function runGuardQueue(guards) {
+    return guards.reduce(function (promiseAccumulator, guard) { return promiseAccumulator.then(function () { return guard(); }); }, Promise.resolve());
 }
-
-function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
-    return o.__proto__ || Object.getPrototypeOf(o);
-  };
-  return _getPrototypeOf(o);
+/*
+* FUNCTION ONLY FOR ONE GUARD.
+* Возвращет промис для любой функции хука
+* */
+function guardToPromiseFn(guard, id) {
+    return function () { return new Promise(function (resolve, reject) {
+        var next = function (valid) {
+            if (valid === void 0) { valid = true; }
+            if (valid === false)
+                reject(ModalError.NextReject(id));
+            resolve();
+        };
+        //First params is function-warning: next now is not available
+        Promise.resolve(guard.call(instanceStorage[id]))
+            .then(next)
+            .catch(function (err) { return reject(err); });
+    }); };
 }
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-
-  return _setPrototypeOf(o, p);
+/**
+ * last change: 25.11.2021
+ * */
+var configuration = {
+    scrollLock: true,
+    animation: "modal-list" // Animation name for transition-group
+};
+/**
+ * @description Method for changing default configuration.
+ * */
+function config(data) {
+    if (typeof data !== "object")
+        throw ModalError.ConfigurationType(data);
+    var availableKeys = Object.keys(configuration);
+    for (var key in data) {
+        if (!availableKeys.includes(key)) {
+            console.warn(ModalError.ConfigurationUndefinedParam(key, availableKeys));
+            continue;
+        }
+        // @ts-ignore
+        configuration[key] = data[key];
+    }
 }
 
-function _isNativeReflectConstruct() {
-  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
-  if (Reflect.construct.sham) return false;
-  if (typeof Proxy === "function") return true;
+/**
+ * last change: 25.11.2021
+ * */
+var modalQueue = vue.ref([]); //All modals that showing now
+var state$1 = {
+    initialized: false,
+};
+vue.watch(modalQueue.value, function () {
+    if (!configuration.scrollLock)
+        return;
+    if (modalQueue.value.length)
+        document.body.style.overflowY = "hidden";
+    else
+        document.body.style.overflowY = "auto";
+});
 
-  try {
-    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
-    return true;
-  } catch (e) {
-    return false;
-  }
+/**
+ * @description Try to close all modals windows. Throw error if some modal has onClose hook with returned false value.
+ * */
+function closeModal() {
+    return runGuardQueue(modalQueue.value.map(function (modalObject) { return function () { return modalObject.close(); }; }));
 }
 
-function _construct(Parent, args, Class) {
-  if (_isNativeReflectConstruct()) {
-    _construct = Reflect.construct;
-  } else {
-    _construct = function _construct(Parent, args, Class) {
-      var a = [null];
-      a.push.apply(a, args);
-      var Constructor = Function.bind.apply(Parent, a);
-      var instance = new Constructor();
-      if (Class) _setPrototypeOf(instance, Class.prototype);
-      return instance;
-    };
-  }
-
-  return _construct.apply(null, arguments);
+/**
+ * @description Try to close the last opened modal window.
+ * */
+function popModal() {
+    if (modalQueue.value.length === 0)
+        return Promise.resolve();
+    var lastModal = modalQueue.value[modalQueue.value.length - 1];
+    return lastModal.close();
 }
 
-function _isNativeFunction(fn) {
-  return Function.toString.call(fn).indexOf("[native code]") !== -1;
+/**
+ * @description Закрывает модальное окно по идентификатору
+ * ЕСЛИ МОДАЛЬНОЕ ОКНО БЫЛО НЕ НАХОДИТСЯ В АКТИВНЫХ ИНСТАНСАХ - ОШИБКА
+ * */
+function closeById(id) {
+    var indexFoRemove = modalQueue.value.findIndex(function (item) { return item.id === id; });
+    if (indexFoRemove === -1)
+        return Promise.reject(ModalError.Undefined(id)); //Modal with id not found
+    var arr = guards.get(id, "close").map(function (guard) { return guardToPromiseFn(guard, id); });
+    return runGuardQueue(arr)
+        .then(function () {
+        modalQueue.value.splice(indexFoRemove, 1);
+        delete instanceStorage[id];
+        guards.delete(id);
+    });
 }
 
-function _wrapNativeSuper(Class) {
-  var _cache = typeof Map === "function" ? new Map() : undefined;
-
-  _wrapNativeSuper = function _wrapNativeSuper(Class) {
-    if (Class === null || !_isNativeFunction(Class)) return Class;
-
-    if (typeof Class !== "function") {
-      throw new TypeError("Super expression must either be null or a function");
+/**
+ * last change: 25.11.2021
+ * */
+var Modal = /** @class */ (function () {
+    /**
+     * Создаёт объект управления модальным окном.
+     * Для управления идентификатором используется статическое поле modalId.
+     * ЕСЛИ В КОМПОНЕНТЕ ЕСТЬ beforeModalClose параметр, то добавляем его в guards
+     *
+     * @param {Object} component Any VueComponent that will be used like modal window
+     * @param {Object} params Object of input params. Used like props.
+     * */
+    function Modal(component, params) {
+        var _this = this;
+        this.id = Modal.modalId++;
+        this.component = vue.shallowRef(component);
+        this.params = params;
+        this.closed = vue.computed(function () { return !modalQueue.value.includes(_this); });
+        if (component.beforeModalClose)
+            guards.add(this.id, "close", component.beforeModalClose);
     }
-
-    if (typeof _cache !== "undefined") {
-      if (_cache.has(Class)) return _cache.get(Class);
-
-      _cache.set(Class, Wrapper);
-    }
-
-    function Wrapper() {
-      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
-    }
-
-    Wrapper.prototype = Object.create(Class.prototype, {
-      constructor: {
-        value: Wrapper,
+    /**
+     * @description Method for closing the modal window
+     * */
+    Modal.prototype.close = function () {
+        return closeById(this.id);
+    };
+    Object.defineProperty(Modal.prototype, "onclose", {
+        /**
+         * @description Hook for handling modal closing
+         * */
+        set: function (func) {
+            guards.add(this.id, "close", func);
+        },
         enumerable: false,
-        writable: true,
         configurable: true
-      }
     });
-    return _setPrototypeOf(Wrapper, Class);
-  };
+    Modal.modalId = 0;
+    return Modal;
+}());
 
-  return _wrapNativeSuper(Class);
+function _addModal(component, params) {
+    if (!state$1.initialized)
+        throw ModalError.NotInitialized();
+    if (!component)
+        throw ModalError.ModalComponentNotProvided();
+    var modal = new Modal(component, params);
+    modalQueue.value.push(modal);
+    return modal;
 }
 
-function _assertThisInitialized(self) {
-  if (self === void 0) {
-    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  }
-
-  return self;
+/**
+ * @description Method push modal to queue. Using this method you can open multiple windows. For closing use popModal
+ * */
+function pushModal(component, props) {
+    if (props === void 0) { props = {}; }
+    return _addModal(component, props);
 }
 
-function _possibleConstructorReturn(self, call) {
-  if (call && (typeof call === "object" || typeof call === "function")) {
-    return call;
-  } else if (call !== void 0) {
-    throw new TypeError("Derived constructors may only return object or undefined");
-  }
-
-  return _assertThisInitialized(self);
+/**
+ * @description OpenModal that was provided as component. Before opening try to close all previous modals.
+ * @param {Object} component Any Vue component
+ * @param {Object} props Props that will be passed to the component
+ *
+ * @return {Promise<Modal>} ModalObject
+ * */
+function openModal(component, props) {
+    if (props === void 0) { props = {}; }
+    return closeModal()
+        .then(function () {
+        if (modalQueue.value.length)
+            throw ModalError.QueueNoEmpty();
+        return pushModal(component, props);
+    });
 }
 
-function _createSuper(Derived) {
-  var hasNativeReflectConstruct = _isNativeReflectConstruct();
-
-  return function _createSuperInternal() {
-    var Super = _getPrototypeOf(Derived),
-        result;
-
-    if (hasNativeReflectConstruct) {
-      var NewTarget = _getPrototypeOf(this).constructor;
-
-      result = Reflect.construct(Super, arguments, NewTarget);
-    } else {
-      result = Super.apply(this, arguments);
-    }
-
-    return _possibleConstructorReturn(this, result);
-  };
+function onBeforeModalClose(callback) {
+    var _a;
+    var a = vue.getCurrentInstance();
+    var attrModalId = String((_a = a === null || a === void 0 ? void 0 : a.attrs) === null || _a === void 0 ? void 0 : _a["modal-id"]);
+    var modalId = attrModalId.replace(/[^0-9]/g, "");
+    guards.add(Number(modalId), "close", callback);
 }
 
-var state$1 = {
-  router: null
-};
-
-function init(router) {
-  if (state$1.router) return console.warn("useModalRouter should escaped only once.");
-  state$1.router = router;
-  /**
-   * Return ModalRouter or null
-   * */
-
-  function findModal(routerLocation) {
-    if (!routerLocation.matched.length) return null;
-
-    for (var i = routerLocation.matched.length - 1; i >= 0; i--) {
-      var components = routerLocation.matched[i].components;
-      var a = Object.values(components).find(function (route) {
-        return route._isModal;
-      });
-      if (a) return a;
-    }
-
-    return null;
-  }
-  /**
-   * Hook only for closing
-   * */
-
-
-  router.beforeEach( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(to, from) {
-      var _modal$getModalObject, _modal$getModalObject2, modal;
-
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.prev = 0;
-              modal = findModal(from);
-
-              if (!(modal && !((_modal$getModalObject = modal.getModalObject()) !== null && _modal$getModalObject !== void 0 && (_modal$getModalObject2 = _modal$getModalObject.closed) !== null && _modal$getModalObject2 !== void 0 && _modal$getModalObject2.value))) {
-                _context.next = 5;
-                break;
-              }
-
-              _context.next = 5;
-              return modal.close(true);
-
-            case 5:
-              _context.next = 10;
-              break;
-
-            case 7:
-              _context.prev = 7;
-              _context.t0 = _context["catch"](0);
-              return _context.abrupt("return", false);
-
-            case 10:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee, null, [[0, 7]]);
-    }));
-
-    return function (_x, _x2) {
-      return _ref.apply(this, arguments);
-    };
-  }());
-  /**
-   * Hook for opening modal
-   * */
-
-  router.afterEach( /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(to) {
-      var modal;
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              modal = findModal(to);
-
-              if (!modal) {
-                _context2.next = 4;
-                break;
-              }
-
-              _context2.next = 4;
-              return modal.initialize();
-
-            case 4:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-
-    return function (_x3) {
-      return _ref2.apply(this, arguments);
-    };
-  }());
-}
-
-function useModalRouter(component) {
-  var modal = null;
-  var isNavigationClosingGuard = false;
-
-  function initialize() {
-    return _initialize.apply(this, arguments);
-  }
-
-  function _initialize() {
-    _initialize = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-      return regeneratorRuntime.wrap(function _callee4$(_context4) {
-        while (1) {
-          switch (_context4.prev = _context4.next) {
-            case 0:
-              isNavigationClosingGuard = false;
-              modal = null;
-              _context4.next = 4;
-              return openModal(component, vue.computed(function () {
-                return state$1.router.currentRoute.value.params;
-              }));
-
-            case 4:
-              modal = _context4.sent;
-
-              modal.onclose = function () {
-                if (!isNavigationClosingGuard) state$1.router.back();
-              };
-
-            case 6:
-            case "end":
-              return _context4.stop();
-          }
-        }
-      }, _callee4);
-    }));
-    return _initialize.apply(this, arguments);
-  }
-
-  return {
-    getModalObject: function getModalObject() {
-      return modal;
-    },
-    _isModal: true,
-    close: function close() {
-      var _arguments = arguments;
-      return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-        var v;
-        return regeneratorRuntime.wrap(function _callee3$(_context3) {
-          while (1) {
-            switch (_context3.prev = _context3.next) {
-              case 0:
-                v = _arguments.length > 0 && _arguments[0] !== undefined ? _arguments[0] : false;
-                isNavigationClosingGuard = v;
-
-                if (!modal) {
-                  _context3.next = 6;
-                  break;
-                }
-
-                _context3.next = 5;
-                return modal.close();
-
-              case 5:
-                return _context3.abrupt("return", _context3.sent);
-
-              case 6:
-              case "end":
-                return _context3.stop();
-            }
-          }
-        }, _callee3);
-      }))();
-    },
-    initialize: initialize,
-    setup: function setup() {
-      return function () {
-        return null;
-      };
-    }
-  };
-}
-
-useModalRouter.init = init;
-
 var script$1 = {
@@ -467,8 +385,6 @@ props: {
 function styleInject(css, ref) {
-  if (ref === void 0) ref = {};
+  if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
 
-  if (!css || typeof document === 'undefined') {
-    return;
-  }
+  if (!css || typeof document === 'undefined') { return; }
 
@@ -499,4 +415,18 @@ var head = document.head || document.getElementsByTagName('head')[0];
 
-script$1.__file = "plugin/WidgetModalContainerItem.vue";
+script$1.__file = "plugin/components/WidgetModalContainerItem.vue";
 
+/**
+ * last change: 25.11.2021
+ * */
+function initialize() {
+    state$1.initialized = true;
+    /**
+     * If user press Escape then close last opened modal
+     * */
+    document.addEventListener("keyup", function (e) {
+        if (e.key === "Escape" || e.code === "Escape")
+            popModal();
+    });
+}
+
 var script = {
@@ -521,331 +451,120 @@ setup(){
 
-script.__file = "plugin/WidgetModalContainer.vue";
+script.__file = "plugin/components/WidgetModalContainer.vue";
 
-/*eslint-disable*/
-var modalQueue = vue.ref([]); //All modals that showing now
-
 var state = {
-  modalId: 0,
-  initialized: false // Boolean, false - if ModalContainer not inserted in project.
-
+    router: null
 };
-var configuration = {
-  /**
-   * true - if Modal was opened the page cannot be scrolled
-   * */
-  scrollLock: true,
-
-  /**
-  * Animation name for transition-group
-  * */
-  animation: "modal-list"
-};
-function config() {
-  var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-    scrollLock: scrollLock,
-    animation: animation
-  };
-  if (_typeof(data) !== "object") throw ModalError.ConfigurationType(data);
-  var availableKeys = Object.keys(configuration);
-
-  for (var key in data) {
-    if (!availableKeys.includes(key)) {
-      console.warn(ModalError.ConfigurationUndefinedParam(key, availableKeys));
-      continue;
+function init(router) {
+    var _this = this;
+    if (state.router)
+        return console.warn("useModalRouter should escaped only once.");
+    state.router = router;
+    /**
+     * Return ModalRouter or null
+     * */
+    function findModal(routerLocation) {
+        if (!routerLocation.matched.length)
+            return null;
+        for (var i = routerLocation.matched.length - 1; i >= 0; i--) {
+            var components = routerLocation.matched[i].components;
+            // @ts-ignore
+            var a = Object.values(components).find(function (route) { return route._isModal; });
+            if (a)
+                return a;
+        }
+        return null;
     }
-
-    configuration[key] = data[key];
-  }
+    /**
+     * Hook only for closing
+     * */
+    router.beforeEach(function (to, from) { return __awaiter(_this, void 0, void 0, function () {
+        var modal;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _c.trys.push([0, 3, , 4]);
+                    modal = findModal(from);
+                    if (!(modal && !((_b = (_a = modal.getModalObject()) === null || _a === void 0 ? void 0 : _a.closed) === null || _b === void 0 ? void 0 : _b.value))) return [3 /*break*/, 2];
+                    return [4 /*yield*/, modal.close(true)];
+                case 1:
+                    _c.sent();
+                    _c.label = 2;
+                case 2: return [3 /*break*/, 4];
+                case 3:
+                    _c.sent();
+                    return [2 /*return*/, false];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); });
+    /**
+     * Hook for opening modal
+     * */
+    router.afterEach(function (to) { return __awaiter(_this, void 0, void 0, function () {
+        var modal;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    modal = findModal(to);
+                    if (!modal) return [3 /*break*/, 2];
+                    return [4 /*yield*/, modal.initialize()];
+                case 1:
+                    _a.sent();
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); });
 }
-/**
- * Storage of hooks
- * store: {
- *     modalId: {
- *         close: [func, func]
- *     }
- * }
- * */
-
-var guards = {
-  store: {},
-  add: function add(id, name, func) {
-    var availableNames = ["close"];
-    if (!availableNames.includes(name)) throw ModalError.UndefinedGuardName(name);
-    if (!this.store[id]) this.store[id] = {};
-    if (!this.store[id][name]) this.store[id][name] = [];
-    if (typeof func !== "function") throw ModalError.GuardDeclarationType(func);
-    this.store[id][name].push(func);
-  },
-  get: function get(id, name) {
-    if (!(id in this.store)) return [];
-    if (!(name in this.store[id])) return [];
-    return this.store[id][name];
-  },
-  delete: function _delete(id) {
-    if (!(id in this.store)) return;
-    delete this.store[id];
-  }
-};
-
-var ModalObject = /*#__PURE__*/function () {
-  function ModalObject(component, params) {
-    var _this = this;
-
-    _classCallCheck(this, ModalObject);
-
-    _defineProperty(this, "id", void 0);
-
-    _defineProperty(this, "component", void 0);
-
-    _defineProperty(this, "params", void 0);
-
-    _defineProperty(this, "closed", void 0);
-
-    this.id = state.modalId++;
-    this.component = vue.shallowRef(component);
-    this.params = params;
-    this.closed = vue.computed(function () {
-      return !modalQueue.value.includes(_this);
-    });
-    if (component.beforeModalClose) guards.add(this.id, "close", component.beforeModalClose);
-  }
-
-  _createClass(ModalObject, [{
-    key: "close",
-    value: function close() {
-      return closeById(this.id);
+function useModalRouter(component) {
+    var modal = null;
+    var isNavigationClosingGuard = false;
+    function initialize() {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        isNavigationClosingGuard = false;
+                        modal = null;
+                        return [4 /*yield*/, openModal(component, vue.computed(function () { var _a; return (_a = state.router) === null || _a === void 0 ? void 0 : _a.currentRoute.value.params; }))];
+                    case 1:
+                        modal = _a.sent();
+                        modal.onclose = function () {
+                            var _a;
+                            if (!isNavigationClosingGuard)
+                                (_a = state.router) === null || _a === void 0 ? void 0 : _a.back();
+                        };
+                        return [2 /*return*/];
+                }
+            });
+        });
     }
-  }, {
-    key: "onclose",
-    set: function set(func) {
-      guards.add(this.id, "close", func);
-    }
-  }]);
-
-  return ModalObject;
-}();
-
-var ModalError = /*#__PURE__*/function (_Error) {
-  _inherits(ModalError, _Error);
-
-  var _super = _createSuper(ModalError);
-
-  function ModalError(message) {
-    var _this2;
-
-    _classCallCheck(this, ModalError);
-
-    _this2 = _super.call(this);
-
-    _defineProperty(_assertThisInitialized(_this2), "isModalError", void 0);
-
-    _this2.isModalError = true;
-    _this2.message = message;
-    return _this2;
-  }
-
-  _createClass(ModalError, null, [{
-    key: "Undefined",
-    value: function Undefined(id) {
-      return new ModalError("Modal with id: ".concat(id, " not founded. The modal window may have been closed earlier."));
-    }
-  }, {
-    key: "UndefinedGuardName",
-    value: function UndefinedGuardName(name) {
-      return new ModalError("Guard's name ".concat(name, " is not declaration."));
-    }
-  }, {
-    key: "NextReject",
-    value: function NextReject(id) {
-      return new ModalError("Guard returned false. Modal navigation was stopped. Modal id ".concat(id));
-    }
-  }, {
-    key: "GuardDeclarationType",
-    value: function GuardDeclarationType(func) {
-      return new ModalError("Guard's type should be a function. Provided:", func);
-    }
-  }, {
-    key: "ConfigurationType",
-    value: function ConfigurationType(config) {
-      return new ModalError("Configuration type must be an Object. Provided", config);
-    }
-  }, {
-    key: "ConfigurationUndefinedParam",
-    value: function ConfigurationUndefinedParam(param, availableParams) {
-      return new ModalError("In configuration founded unknown parameter: ".concat(param, ". Available are ").concat(availableParams.join(", "), " "));
-    }
-  }, {
-    key: "EmptyModalQueue",
-    value: function EmptyModalQueue() {
-      return new ModalError("Modal queue is empty.");
-    }
-  }]);
-
-  return ModalError;
-}( /*#__PURE__*/_wrapNativeSuper(Error));
-
-function closeById(id) {
-  var indexFoRemove = modalQueue.value.findIndex(function (item) {
-    return item.id === id;
-  });
-  if (indexFoRemove === -1) return Promise.reject(ModalError.Undefined(id)); //Modal with id not found
-
-  var arr = guards.get(id, "close").map(function (guard) {
-    return guardToPromiseFn(guard, id);
-  });
-  return runGuardQueue(arr).then(function () {
-    modalQueue.value.splice(indexFoRemove, 1);
-    delete instanceStorage[id];
-    guards.delete(id);
-  });
-  /*
-  .catch(err => Promise.reject(err))
-  .catch(err => (err instanceof ModalError)?err: Promise.reject(err))
-     */
-}
-
-function runGuardQueue(guards) {
-  return guards.reduce(function (promise, guard) {
-    return promise.then(function () {
-      return guard();
-    });
-  }, Promise.resolve());
-}
-/*
-* FUNCTION ONLY FOR ONE GUARD.
-* */
-
-
-function guardToPromiseFn(guard, id) {
-  return function () {
-    return new Promise(function (resolve, reject) {
-      var next = function next(valid) {
-        if (valid === false) return reject(ModalError.NextReject(id));
-        if (valid instanceof Error) reject(valid);
-        resolve();
-      }; //First params is function-warning: next now is not available
-
-
-      var nextWarning = function nextWarning() {
-        var err = new ModalError("Resolver function 'next' in modal's hooks no longer supported. (^1.2.0 version jenesius-vue-modal). You should return false/true values. https://modal.jenesius.com/docs.html/navigation-guards");
-        console.warn(err); //return throw ModalError.nextReject(4);
-      };
-
-      Promise.resolve(guard.call(instanceStorage[id], nextWarning)).then(next).catch(function (err) {
-        return reject(err);
-      });
-    });
-  };
-}
-
-vue.watch(modalQueue.value, function () {
-  if (!configuration.scrollLock) return;
-
-  try {
-    if (modalQueue.value.length) document.body.style.overflowY = "hidden";else document.body.style.overflowY = "auto";
-  } catch (e) {}
-});
-/**
- * Close all modals, if resolved -> open Modal
- *
- * Get: NameOfComponent:VueComponent, params:Object
- *
- * @Return ModalObject
- * */
-
-function openModal(component) {
-  var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return closeModal().then(function () {
-    if (!modalQueue.value.length) return pushModal(component, params);
-    return null;
-  });
-}
-/**
- * Function add modal to modalQuery
- * */
-
-function pushModal(component) {
-  var params = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return _addModal(component, params);
-}
-
-function _addModal(component, params) {
-  if (!state.initialized) {
-    var err = "Modal Container not found. Put container from jenesius-vue-modal in App's template. Check documentation for more information https://modal.jenesius.com/docs.html/installation#getting-started.";
-    console.warn(err);
-    throw err;
-  }
-
-  if (!component) {
-    var _err = "The first parameter(Component) was not specified.";
-    console.warn(_err);
-    throw _err;
-  }
-
-  var modal = new ModalObject(component, params);
-  modalQueue.value.push(modal);
-  return modal;
-}
-/**
- * Function close a last modal
- * */
-
-
-function popModal() {
-  if (modalQueue.value.length === 0) return Promise.resolve();
-  var lastModal = modalQueue.value[modalQueue.value.length - 1];
-  return lastModal.close();
-}
-/**
- * Function close all previous modals.
- *
- * */
-
-function closeModal() {
-  return runGuardQueue(modalQueue.value.map(function (modalObject) {
-    return function () {
-      return modalObject.close();
+    return {
+        getModalObject: function () { return modal; },
+        _isModal: true,
+        close: function (v) {
+            if (v === void 0) { v = false; }
+            return __awaiter(this, void 0, void 0, function () {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            isNavigationClosingGuard = v;
+                            if (!modal) return [3 /*break*/, 2];
+                            return [4 /*yield*/, modal.close()];
+                        case 1: return [2 /*return*/, _a.sent()];
+                        case 2: return [2 /*return*/];
+                    }
+                });
+            });
+        },
+        initialize: initialize,
+        setup: function () { return function () { return null; }; }
     };
-  }));
 }
-var container = script;
-function initialize() {
-  state.initialized = true;
-  /**
-   * If user press Escape then close last opened modal
-   * */
+useModalRouter.init = init;
 
-  document.addEventListener("keyup", function (e) {
-    if (e.key === "Escape" || e.code === "Escape") popModal();
-  });
-}
-function onBeforeModalClose(callback) {
-  var a = vue.getCurrentInstance();
-  var modalId = a.attrs["modal-id"].replace(/[^0-9]/g, "");
-  guards.add(modalId, "close", callback);
-} //Для сохранения this
-
-var instanceStorage = {};
-function saveInstance(id, instance) {
-  instanceStorage[id] = instance;
-}
-/**
-* Deprecated
-* */
-
-function useModal() {
-  console.warn("Function useModal is deprecated and was removed on 2.x.x version. Please use: import {openModal, closeModal, pushModal, popModal} from 'jenesius-vue-modal';");
-  return {
-    openModal: openModal,
-    closeModal: closeModal,
-    popModal: popModal,
-    pushModal: pushModal
-  };
-}
-
-exports._configuration = configuration;
 exports.closeModal = closeModal;
 exports.config = config;
-exports.container = container;
-exports.initialize = initialize;
+exports.container = script;
 exports.modalQueue = modalQueue;
@@ -856,4 +575,2 @@ exports.onBeforeModalClose = onBeforeModalClose;
 exports.pushModal = pushModal;
-exports.saveInstance = saveInstance;
-exports.useModal = useModal;
 exports.useModalRouter = useModalRouter;

package.json

 {
   "name": "jenesius-vue-modal",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "private": false,
   "description": "Simple modal plugin for Vue3",
   "author": "Jenesius",
-  "main": "dist/jenesius-vue-modal.cjs.js",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "test": "vue-cli-service test:unit",
     "lint": "vue-cli-service lint",
-    "rollup": "rollup -c ./rollup.config.js --environment BABEL_ENV:production"
+    "rollup": "rollup -c ./rollup.config.js --environment BABEL_ENV:production",
+    "test": "jest"
   },
+  "main": "dist/jenesius-vue-modal.cjs.js",
   "files": [
     "dist/jenesius-vue-modal.cjs.js",
-    "README.MD"
+    "README.MD",
+    "dist/**/*.ts"
   ],
   "dependencies": {
-    "vue": "^3.2.1"
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "core-js": "^3.6.5",
+    "vue": "^3.2.23"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/plugin-proposal-throw-expressions": "^7.14.5",
-    "@babel/plugin-transform-modules-commonjs": "^7.15.0",
-    "@babel/plugin-transform-runtime": "^7.15.0",
-    "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.15.0",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@vue/cli-plugin-babel": "^4.5.13",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-unit-jest": "^4.5.13",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.2.1",
-    "@vue/test-utils": "^2.0.0-rc.12",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.3",
-    "babel-plugin-transform-regenerator": "^6.26.0",
-    "babel-polyfill": "^6.26.0",
-    "chalk": "^4.1.2",
-    "core-js": "^3.16.2",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0-0",
-    "postcss": "^8.2.4",
-    "postcss-import": "14.0.0",
-    "rollup-plugin-postcss": "^4.0.0",
+    "@babel/preset-typescript": "^7.16.0",
+    "@rollup/plugin-typescript": "^8.3.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/cli-service": "^4.5.15",
+    "@vue/test-utils": "^2.0.0-rc.17",
+    "jest": "26.6.3",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-vue": "^6.0.0",
-    "typescript": "~3.9.3",
+    "ts-jest": "^26.5.5",
+    "typescript": "~4.1.5",
     "vue-jest": "^5.0.0-alpha.10",
-    "vue-router": "^4.0.10",
+    "vue-router": "^4.0.12",
+    "vue-template-compiler": "2.6.14",
     "vuex": "^4.0.2"
   },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {},
-    "overrides": [
-      {
-        "files": [
-          "**/__tests__/*.{j,t}s?(x)",
-          "**/tests/unit/**/*.spec.{j,t}s?(x)"
-        ],
-        "env": {
-          "jest": true
-        }
-      }
-    ]
-  },
   "browserslist": [
@@ -93,7 +56,8 @@ "> 1%",
   "license": "MIT",
-  "url": "https://github.com/Jenesius/vue-modal/issues",
   "repository": {
     "type": "git",
     "url": "https://github.com/Jenesius/vue-modal.git"
-  }
+  },
+  "types": "dist/dts/index.d.ts",
+  "url": "https://github.com/Jenesius/vue-modal/issues"
 }

New alerts

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35112

increased by10.43%

Dev dependency count

15

decreased by-50%

Number of package files

21

increased by425%

Worsened metrics

Dependency count

3

increased by200%

Lines of code

696

decreased by-2.93%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@rollup/plugin-commonjs@^21.0.1

• + Addedcore-js@^3.6.5

• + Added@rollup/plugin-commonjs@21.1.0(transitive)

• + Added@rollup/pluginutils@3.1.0(transitive)

• + Added@types/estree@0.0.39(transitive)

• + Addedbalanced-match@1.0.2(transitive)

• + Addedbrace-expansion@1.1.11(transitive)

• + Addedcommondir@1.0.1(transitive)

• + Addedconcat-map@0.0.1(transitive)

• + Addedcore-js@3.40.0(transitive)

• + Addedestree-walker@1.0.1(transitive)

• + Addedfs.realpath@1.0.0(transitive)

• + Addedfsevents@2.3.3(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglob@7.2.3(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedinflight@1.0.6(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedis-core-module@2.16.1(transitive)

• + Addedis-reference@1.2.1(transitive)

• + Addedmagic-string@0.25.9(transitive)

• + Addedminimatch@3.1.2(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedpath-is-absolute@1.0.1(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedresolve@1.22.10(transitive)

• + Addedrollup@2.79.2(transitive)

• + Addedsourcemap-codec@1.4.8(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedwrappy@1.0.2(transitive)

• Updatedvue@^3.2.23