vue-modals - npm Package Compare versions

Comparing version 0.4.2 to 0.5.0

dist/vue-modal.js

@@ -194,3 +194,2 @@ /******/ (function(modules) { // webpackBootstrap
 	        Vue.component('modal', __webpack_require__(37));
-	        Vue.component('modal-slide-show', __webpack_require__(44));
 
@@ -736,3 +735,3 @@ (0, _defineProperties2.default)(Vue.prototype, {
 	// module
-	exports.push([module.id, "\r\n    .vue-modal-mask {\r\n        position: fixed;\r\n        z-index: 10000;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-color: rgba(0, 0, 0, .7);\r\n        -webkit-transition: opacity .3s ease;\r\n        transition: opacity .3s ease;\r\n        overflow-y: scroll;\r\n    }\r\n    .vue-modal-mask > .vue-modal-wrapper {\r\n        display:table;\r\n        margin: 0 auto;\r\n        height: 100%;\r\n        max-width: 800px;\r\n        -webkit-transition: margin-top .4s ease;\r\n        transition: margin-top .4s ease;\r\n        overflow: hidden;\r\n    }\r\n    .vue-modal-mask > .vue-modal-wrapper > .vue-modal-container {\r\n        display:table-cell;\r\n        vertical-align:middle;\r\n    }\r\n    .vue-modal-mask > .vue-modal-close {\r\n        position: fixed;\r\n        right: 30px;\r\n        top: 10px;\r\n        color: #fff;\r\n        font-weight: bold;\r\n        font-size: 16px;\r\n        font-family: verdana;\r\n        cursor: pointer;\r\n        z-index: 10001;\r\n    }\r\n\r\n    /* transitions */\r\n    .slide-down-enter.vue-modal-mask,\r\n    .slide-down-leave.vue-modal-mask {\r\n        opacity: 0;\r\n    }\r\n    .slide-down-enter .vue-modal-wrapper,\r\n    .slide-down-leave .vue-modal-wrapper {\r\n        margin-top: -500px;\r\n    }\r\n\r\n    /*.center-pop-enter.vue-modal-mask,\r\n    .center-pop-leave.vue-modal-mask {\r\n        opacity: 0;\r\n    }\r\n    .center-pop-enter .vue-modal-wrapper,\r\n    .center-pop-leave .vue-modal-wrapper {\r\n        max-width: 0px;\r\n    }*/\r\n", ""]);
+	exports.push([module.id, "\r\n    .vue-modal-mask {\r\n        position: fixed;\r\n        z-index: 10000;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-color: rgba(0, 0, 0, .7);\r\n        -webkit-transition: opacity .3s ease;\r\n        transition: opacity .3s ease;\r\n        overflow-y: scroll;\r\n    }\r\n    .vue-modal-mask > .vue-modal-wrapper {\r\n        display:table;\r\n        margin: 0 auto;\r\n        height: 100%;\r\n        max-width: 600px;\r\n        -webkit-transition: margin-top .4s ease;\r\n        transition: margin-top .4s ease;\r\n        overflow: hidden;\r\n    }\r\n    .vue-modal-mask > .vue-modal-wrapper > .vue-modal-container {\r\n        display:table-cell;\r\n        vertical-align:middle;\r\n    }\r\n    .vue-modal-mask > .vue-modal-close {\r\n        position: fixed;\r\n        right: 30px;\r\n        top: 10px;\r\n        color: #fff;\r\n        font-weight: bold;\r\n        font-size: 16px;\r\n        font-family: verdana;\r\n        cursor: pointer;\r\n        z-index: 10001;\r\n    }\r\n\r\n    /* transitions */\r\n    .slide-down-enter.vue-modal-mask,\r\n    .slide-down-leave.vue-modal-mask {\r\n        opacity: 0;\r\n    }\r\n    .slide-down-enter .vue-modal-wrapper,\r\n    .slide-down-leave .vue-modal-wrapper {\r\n        margin-top: -500px;\r\n    }\r\n\r\n    /*.center-pop-enter.vue-modal-mask,\r\n    .center-pop-leave.vue-modal-mask {\r\n        opacity: 0;\r\n    }\r\n    .center-pop-enter .vue-modal-wrapper,\r\n    .center-pop-leave .vue-modal-wrapper {\r\n        max-width: 0px;\r\n    }*/\r\n", ""]);
 
@@ -1064,6 +1063,4 @@ // exports
 	//         <div class="vue-modal-wrapper">
-	//             <div class="vue-modal-container">
-	//                 <div v-on:click.stop="nothing()">
-	//                     <slot name="content"></slot>
-	//                 </div>
+	//             <div class="vue-modal-container" v-on:click.stop="nothing()">
+	//                 <slot name="content"></slot>
 	//             </div>
@@ -1129,3 +1126,3 @@ //         </div>
 	//         height: 100%;
-	//         max-width: 800px;
+	//         max-width: 600px;
 	//         transition: margin-top .4s ease;
@@ -1174,3 +1171,3 @@ //         overflow: hidden;
 
-	module.exports = "\r\n    <div v-show=\"show\" class=\"vue-modal-mask\" v-on:click.stop=\"hide()\" :transition=\"transition\">\r\n        <div class=\"vue-modal-close\">x</div>\r\n\r\n        <div class=\"vue-modal-wrapper\">\r\n            <div class=\"vue-modal-container\">\r\n                <div v-on:click.stop=\"nothing()\">\r\n                    <slot name=\"content\"></slot>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n";
+	module.exports = "\r\n    <div v-show=\"show\" class=\"vue-modal-mask\" v-on:click.stop=\"hide()\" :transition=\"transition\">\r\n        <div class=\"vue-modal-close\">x</div>\r\n\r\n        <div class=\"vue-modal-wrapper\">\r\n            <div class=\"vue-modal-container\" v-on:click.stop=\"nothing()\">\r\n                <slot name=\"content\"></slot>\r\n            </div>\r\n        </div>\r\n    </div>\r\n";
 
@@ -1252,3 +1249,3 @@ /***/ },
 	//         <div slot="content">
-	//             <iframe v-if="data && !type"
+	//             <iframe v-if="data"
 	//                 src="{{ src }}"
@@ -1268,7 +1265,2 @@ //                 class="modal-slide-show-iframe"
 	//
-	//             <img v-if="data && type === 'image'"
-	//                 src="{{ src }}"
-	//                 width="{{ this.width || 400 }}"
-	//             />
-	//
 	//             <div v-if="!data" class="modal-slide-show-no-data">
@@ -1278,3 +1270,3 @@ //                 No data loaded.
 	//
-	//             <div v-if="data.length > 1" class="modal-slide-show-previous">
+	//             <div class="modal-slide-show-previous">
 	//                 <div>
@@ -1284,3 +1276,3 @@ //                     <div v-on:click.stop="previous()">&lsaquo;</div>
 	//             </div>
-	//             <div v-if="data.length > 1" class="modal-slide-show-next">
+	//             <div class="modal-slide-show-next">
 	//                 <div>
@@ -1296,3 +1288,3 @@ //                     <div v-on:click.stop="next()">&rsaquo;</div>
 	exports.default = {
-	    props: ['name', 'transition', 'data', 'type', 'width', 'height'],
+	    props: ['name', 'transition', 'data', 'width', 'height'],
 	    data: function data() {
@@ -1309,7 +1301,4 @@ return {
 	            onShow: function onShow() {
-	                var index = this.$modal.data(this.name).index;
+	                this.index = this.$modal.data(this.name).index || this.index;
 
-	                this.index = index !== undefined ? index : this.index;
-	                this.updateSrc();
-
 	                if (modals && modals[this.name] && modals[this.name].onShow) {
@@ -1329,6 +1318,8 @@ modals[this.name].onShow.call(this.$parent);
 
+	    watch: {
+	        index: function index() {
+	            this.src = this.data[this.index].url;
+	        }
+	    },
 	    methods: {
-	        updateSrc: function updateSrc() {
-	            this.src = this.data[this.index].link;
-	        },
 	        previous: function previous() {
@@ -1340,4 +1331,2 @@ if (this.index === 0) {
 	            }
-
-	            this.updateSrc();
 	        },
@@ -1350,4 +1339,2 @@ next: function next() {
 	            }
-
-	            this.updateSrc();
 	        }
@@ -1408,5 +1395,5 @@ },
 
-	module.exports = "\r\n    <modal :name=\"name\" :transition=\"transition || 'slide-down'\">\r\n        <div slot=\"content\">\r\n            <iframe v-if=\"data && !type\"\r\n                src=\"{{ src }}\"\r\n                class=\"modal-slide-show-iframe\"\r\n                width=\"{{ this.width || 400 }}\"\r\n                height=\"{{ this.width || 300 }}\"\r\n                marginwidth=\"0\"\r\n                marginheight=\"0\"\r\n                align=\"top\"\r\n                scrolling=\"No\"\r\n                frameborder=\"0\"\r\n                hspace=\"0\"\r\n                vspace=\"0\"\r\n            >\r\n            </iframe>\r\n\r\n            <img v-if=\"data && type === 'image'\"\r\n                src=\"{{ src }}\"\r\n                width=\"{{ this.width || 400 }}\"\r\n            />\r\n            \r\n            <div v-if=\"!data\" class=\"modal-slide-show-no-data\">\r\n                No data loaded.\r\n            </div>\r\n\r\n            <div v-if=\"data.length > 1\" class=\"modal-slide-show-previous\">\r\n                <div>\r\n                    <div v-on:click.stop=\"previous()\">&lsaquo;</div>\r\n                </div>\r\n            </div>\r\n            <div v-if=\"data.length > 1\" class=\"modal-slide-show-next\">\r\n                <div>\r\n                    <div v-on:click.stop=\"next()\">&rsaquo;</div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </modal>\r\n";
+	module.exports = "\r\n    <modal :name=\"name\" :transition=\"transition || 'slide-down'\">\r\n        <div slot=\"content\">\r\n            <iframe v-if=\"data\"\r\n                src=\"{{ src }}\"\r\n                class=\"modal-slide-show-iframe\"\r\n                width=\"{{ this.width || 400 }}\"\r\n                height=\"{{ this.width || 300 }}\"\r\n                marginwidth=\"0\"\r\n                marginheight=\"0\"\r\n                align=\"top\"\r\n                scrolling=\"No\"\r\n                frameborder=\"0\"\r\n                hspace=\"0\"\r\n                vspace=\"0\"\r\n            >\r\n            </iframe>\r\n            \r\n            <div v-if=\"!data\" class=\"modal-slide-show-no-data\">\r\n                No data loaded.\r\n            </div>\r\n\r\n            <div class=\"modal-slide-show-previous\">\r\n                <div>\r\n                    <div v-on:click.stop=\"previous()\">&lsaquo;</div>\r\n                </div>\r\n            </div>\r\n            <div class=\"modal-slide-show-next\">\r\n                <div>\r\n                    <div v-on:click.stop=\"next()\">&rsaquo;</div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </modal>\r\n";
 
 /***/ }
 /******/ ]);

package.json

@@ -32,3 +32,3 @@ {
   },
-  "version": "0.4.2"
+  "version": "0.5.0"
 }

README.md

@@ -71,6 +71,6 @@ # vue-modal
                 videos: [{
-                    link: 'http://somelink.com/123',
+                    url: 'http://somelink.com/123',
                     name: 'zero'
                 }, {
-                    link: 'http://somelink.com/456',
+                    url: 'http://somelink.com/456',
                     name: 'one'
@@ -77,0 +77,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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

57721

decreased by-2.05%

Number of package files

9

decreased by-18.18%

Lines of code

1304

decreased by-0.84%

No dependency changes