jenesius-vue-modal - npm Package Compare versions

Comparing version 1.2.3 to 1.3.0

dist/jenesius-vue-modal.cjs.js

 /*!
-  * jenesius-vue-modal v1.2.2
+  * jenesius-vue-modal v1.3.0
   * (c) 2021 Jenesius
@@ -28,2 +28,38 @@ * @license MIT
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+  try {
+    var info = gen[key](arg);
+    var value = info.value;
+  } catch (error) {
+    reject(error);
+    return;
+  }
+
+  if (info.done) {
+    resolve(value);
+  } else {
+    Promise.resolve(value).then(_next, _throw);
+  }
+}
+
+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 _classCallCheck(instance, Constructor) {
@@ -200,2 +236,190 @@ if (!(instance instanceof Constructor)) {
 
+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 = {
@@ -218,3 +442,8 @@ props: {
 			}, [
-				vue.h("div", {class: "widget__modal-container__item-back widget__modal-back", onClick: popModal}),
+				vue.h("div", {class: "widget__modal-container__item-back widget__modal-back", onClick: () => {
+
+						return popModal()
+						.catch(() => {})
+
+					}}),
 				vue.h(props.component, { ...props.params, class: "widget__modal-wrap", "modal-id": `_modal_${props.id}`, ref: modalRef})
@@ -324,6 +553,6 @@ ])
     var availableNames = ["close"];
-    if (!availableNames.includes(name)) return console.warn("Name ".concat(name, " is not declaration."));
+    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") return console.warn("Onclose callback was provided not function:", func);
+    if (typeof func !== "function") throw ModalError.GuardDeclarationType(func);
     this.store[id][name].push(func);
@@ -335,2 +564,6 @@ },
     return this.store[id][name];
+  },
+  delete: function _delete(id) {
+    if (!(id in this.store)) return;
+    delete this.store[id];
   }
@@ -341,2 +574,4 @@ };
   function ModalObject(component, params) {
+    var _this = this;
+
     _classCallCheck(this, ModalObject);
@@ -350,5 +585,10 @@
 
+    _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);
@@ -378,13 +618,13 @@ }
   function ModalError(message) {
-    var _this;
+    var _this2;
 
     _classCallCheck(this, ModalError);
 
-    _this = _super.call(this);
+    _this2 = _super.call(this);
 
-    _defineProperty(_assertThisInitialized(_this), "isModalError", void 0);
+    _defineProperty(_assertThisInitialized(_this2), "isModalError", void 0);
 
-    _this.isModalError = true;
-    _this.message = message;
-    return _this;
+    _this2.isModalError = true;
+    _this2.message = message;
+    return _this2;
   }
@@ -398,7 +638,17 @@
   }, {
-    key: "nextReject",
-    value: function nextReject(id) {
-      return new ModalError("Next function from hook was rejected. Modal id ".concat(id));
+    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",
@@ -413,2 +663,7 @@ value: function ConfigurationType(config) {
     }
+  }, {
+    key: "EmptyModalQueue",
+    value: function EmptyModalQueue() {
+      return new ModalError("Modal queue is empty.");
+    }
   }]);
@@ -430,7 +685,9 @@
     modalQueue.value.splice(indexFoRemove, 1);
-    delete guards.store[id];
     delete instanceStorage[id];
-  }).catch(function (err) {
-    return err instanceof ModalError ? err : Promise.reject(err);
+    guards.delete(id);
   });
+  /*
+  .catch(err => Promise.reject(err))
+  .catch(err => (err instanceof ModalError)?err: Promise.reject(err))
+     */
 }
@@ -454,3 +711,3 @@
       var next = function next(valid) {
-        if (valid === false) return reject(ModalError.nextReject(id));
+        if (valid === false) return reject(ModalError.NextReject(id));
         if (valid instanceof Error) reject(valid);
@@ -462,3 +719,3 @@ resolve();
       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.");
+        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);
@@ -507,3 +764,3 @@ };
   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://www.npmjs.com/package/jenesius-vue-modal.";
+    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);
@@ -529,3 +786,3 @@ throw err;
 function popModal() {
-  if (modalQueue.value.length === 0) return;
+  if (modalQueue.value.length === 0) return Promise.resolve();
   var lastModal = modalQueue.value[modalQueue.value.length - 1];
@@ -592,1 +849,2 @@ return lastModal.close();
 exports.useModal = useModal;
+exports.useModalRouter = useModalRouter;

package.json

 {
   "name": "jenesius-vue-modal",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "private": false,
@@ -12,3 +12,4 @@ "description": "Simple modal plugin for Vue3",
     "test": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "rollup": "rollup -c ./rollup.config.js --environment BABEL_ENV:production"
   },
@@ -20,9 +21,11 @@ "files": [
   "dependencies": {
-    "vue": "^3.2.1",
-    "vuex": "^4.0.2"
+    "vue": "^3.2.1"
   },
   "devDependencies": {
+    "vuex": "^4.0.2",
     "@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",
@@ -38,2 +41,4 @@ "@rollup/plugin-babel": "^5.3.0",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-transform-regenerator": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
     "chalk": "^4.1.2",
@@ -40,0 +45,0 @@ "eslint": "^6.7.2",

README.md

@@ -54,3 +54,3 @@ # Jenesius Vue Modal
 ```js
-    const modal = await openModal(SomeVueComponent); // {id, close, onclose}
+    const modal = await openModal(SomeVueComponent); // {id, close, onclose, closed}
 ```
@@ -132,3 +132,35 @@
 
+# Integration with VueRouter
 
+For integrate modals into VueRouter you need to initialize your application:
+
+- Provide router to the **useModalRouter**:
+
+```js
+import {createWebHistory, createRouter} from "vue-router";
+import {useModalRouter} from "jenesius-vue-modal";
+
+const router = createRouter({
+    history: createWebHistory(), 
+    routes: [...],
+});
+
+useModalRouter.init(router);
+```
+
+- Wrap your component in a route handler:
+```js
+import Modal from "Modal.vue"
+
+const routes = [
+    {
+        path: "/any-route",
+        component: useModalRouter(Modal)
+    }
+]
+```
+
+Now, when route will be */any-route* the Modal window will open.
+For more information see [Docs](https://modal.jenesius.com/docs.html/integration-vue-router).
+
 # Example VueModalComponent
@@ -135,0 +167,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

31492

increased by33.02%

Dependency count

1

decreased by-50%

Lines of code

700

increased by44.93%

Number of lines in readme file

192

increased by20%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

28

increased by21.74%

Dependency changes

• - Removedvuex@^4.0.2

• - Removed@vue/devtools-api@6.6.4(transitive)

• - Removedvuex@4.1.0(transitive)