vudal - npm Package Compare versions

Comparing version 1.5.3 to 1.6.4

dist/modalMixin.js

@@ -36,3 +36,2 @@ 'use strict';
     parentRef: {
-      type: String,
       default: null
@@ -42,3 +41,2 @@ },
     parent: {
-      type: String,
       default: null
@@ -111,2 +109,18 @@ },
       return _ismobilejs2.default.phone;
+    },
+    parents: function parents() {
+      if (this.parent != null) {
+        if (Array.isArray(this.parent)) {
+          return this.parent;
+        }
+        return [this.parent];
+      }
+      if (this.parentRef != null) {
+        if (Array.isArray(this.parentRef)) {
+          return this.parentRef;
+        }
+        return [this.parentRef];
+      }
+
+      return [];
     }
@@ -113,0 +127,0 @@ },

dist/plugin.js

@@ -133,3 +133,3 @@ 'use strict';
 
-          var parentModal = this.getParentModal(modal);
+          var parentModal = this.getActiveParentModal(modal);
           if (parentModal) {
@@ -158,3 +158,3 @@ (0, _jquery2.default)(parentModal.$el).addClass('child-active');
 
-          var parentModal = this.getParentModal(modal);
+          var parentModal = this.getActiveParentModal(modal);
           if (parentModal) {
@@ -193,18 +193,24 @@ (0, _jquery2.default)(parentModal.$el).removeClass('child-active');
       }, {
-        key: 'getParentModal',
-        value: function getParentModal(modal) {
-          if (modal.parentRef != null || modal.parent != null) {
-            var parentModal = this.modals.filter(function (m) {
+        key: 'getActiveParentModal',
+        value: function getActiveParentModal(modal) {
+          return this.getParentModals(modal).filter(function (m) {
+            return m.isVisible === true;
+          })[0];
+        }
+      }, {
+        key: 'getParentModals',
+        value: function getParentModals(modal) {
+          var _this3 = this;
+
+          console.log(modal.parents);
+          return modal.parents.map(function (parent) {
+            return _this3.modals.filter(function (m) {
               if (m.$vnode) {
-                return m.$vnode.data.ref === modal.parentRef || modal.name != null && m.name === modal.parent;
+                return m.$vnode.data.ref === parent || modal.name != null && m.name === parent;
               }
-              return modal.name != null && m.name === modal.parent;
+              return modal.name != null && m.name === parent;
             })[0];
-            if (parentModal) {
-              return parentModal;
-            }
-            return null;
-          }
-
-          return null;
+          }).filter(function (m) {
+            return m != null;
+          });
         }
@@ -231,6 +237,6 @@ }, {
         value: function resetPositions() {
-          var _this3 = this;
+          var _this4 = this;
 
           this.modals.forEach(function (modal) {
-            _this3.setPosition(modal);
+            _this4.setPosition(modal);
           });
@@ -241,3 +247,3 @@ }
         value: function alert(message) {
-          var _this4 = this;
+          var _this5 = this;
 
@@ -262,3 +268,3 @@ new Vue({
           Vue.nextTick(function () {
-            _this4.getModal('alertModal').$show();
+            _this5.getModal('alertModal').$show();
           });
@@ -265,0 +271,0 @@ }

package.json

 {
   "name": "vudal",
-  "version": "1.5.3",
+  "version": "1.6.4",
   "description": "Another modal window for vue",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/modalMixin.js

@@ -17,3 +17,2 @@ import objectAssign from 'object-assign';
     parentRef: {
-      type: String,
       default: null,
@@ -23,3 +22,2 @@ },
     parent: {
-      type: String,
       default: null,
@@ -80,2 +78,19 @@ },
     },
+
+    parents() {
+      if (this.parent != null) {
+        if (Array.isArray(this.parent)) {
+          return this.parent;
+        }
+        return [this.parent];
+      }
+      if (this.parentRef != null) {
+        if (Array.isArray(this.parentRef)) {
+          return this.parentRef;
+        }
+        return [this.parentRef];
+      }
+
+      return [];
+    },
   },
@@ -82,0 +97,0 @@

src/plugin.js

@@ -108,4 +108,4 @@ import $ from 'jquery';
 
-        // if exist parent, disable action on parent modal
-        const parentModal = this.getParentModal(modal);
+        // if parent modal exists then add blur
+        const parentModal = this.getActiveParentModal(modal);
         if (parentModal) {
@@ -132,4 +132,4 @@ $(parentModal.$el).addClass('child-active');
 
-        // if exist parent, disable action on parent modal
-        const parentModal = this.getParentModal(modal);
+        // if parent exists then remove blur
+        const parentModal = this.getActiveParentModal(modal);
         if (parentModal) {
@@ -163,18 +163,17 @@ $(parentModal.$el).removeClass('child-active');
 
-      getParentModal(modal) {
-        if (modal.parentRef != null || modal.parent != null) {
-          const parentModal = this.modals.filter((m) => {
+      getActiveParentModal(modal) {
+        return this.getParentModals(modal).filter(m => m.isVisible === true)[0];
+      }
+
+      getParentModals(modal) {
+        console.log(modal.parents);
+        return modal.parents.map((parent) => {
+          return this.modals.filter((m) => {
             if (m.$vnode) {
-              return m.$vnode.data.ref === modal.parentRef ||
-                (modal.name != null && m.name === modal.parent);
+              return m.$vnode.data.ref === parent ||
+                (modal.name != null && m.name === parent);
             }
-            return modal.name != null && m.name === modal.parent;
+            return modal.name != null && m.name === parent;
           })[0];
-          if (parentModal) {
-            return parentModal;
-          }
-          return null;
-        }
-
-        return null;
+        }).filter(m => m != null);
       }
@@ -181,0 +180,0 @@

test/vudal.spec.js

 import Vue from 'vue';
 import { VudalPlugin, Vudal } from './../src/index';
+import $ from 'jquery';
 
@@ -131,3 +132,29 @@ describe('vudal', () => {
     });
+
+    it('open modal with two parents', (done) => {
+      const secondModalRoot = new Vue({
+        template: '<vudal name="secondModal"></vudal>',
+        components: { Vudal },
+      }).$mount();
+      const secondModal = secondModalRoot.$children[0];
+
+      const childModalRoot = new Vue({
+        template: '<vudal name="childModal" :parent="[\'testModal\', \'secondModal\']"></vudal>',
+        components: { Vudal },
+      }).$mount();
+      const childModal = childModalRoot.$children[0];
+
+      secondModal.$show();
+      childModal.$show();
+
+      Vue.nextTick(() => {
+        expect(vm.$isActive).toEqual(false);
+        expect(secondModal.$isActive).toEqual(true);
+        expect(childModal.$isActive).toEqual(true);
+        expect($(vm.$el).hasClass('child-active')).toEqual(false);
+        expect($(secondModal.$el).hasClass('child-active')).toEqual(true);
+        done();
+      });
+    });
   });
 });

Fixed alerts

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

929630

increased by0.19%

Lines of code

9805

increased by0.55%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes