Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-popup

Package Overview
Dependencies
Maintainers
1
Versions
39
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-popup - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

2

lib/index.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("VuePopup",["vue"],t):"object"==typeof exports?exports.VuePopup=t(require("vue")):e.VuePopup=t(e.vue)}(this,function(e){return function(e){function t(n){if(o[n])return o[n].exports;var i=o[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var o={};return t.m=e,t.c=o,t.p="/lib/",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var i=o(4),s=n(i),l=o(2),r=o(1),a=n(r);o(3);var d=1,u=[],c=function(e){if(-1===u.indexOf(e)){var t=function(e){var t=e.__vue__;if(!t){var o=e.previousSibling;o.__vue__&&(t=o.__vue__)}return t};s["default"].transition(e,{afterEnter:function(e){var o=t(e);o&&o.doAfterOpen&&o.doAfterOpen()},afterLeave:function(e){var o=t(e);o&&o.doAfterClose&&o.doAfterClose()}})}},f=function(e){return 3===e.nodeType?e.nextElementSibling:e};t["default"]={props:{visible:{type:Boolean,twoWay:!0,"default":!1},transition:{type:String,"default":""},openDelay:{},closeDelay:{},zIndex:{},modal:{type:Boolean,"default":!1},modalClass:{},closeOnPressEscape:{type:Boolean,"default":!1},closeOnClickModal:{type:Boolean,"default":!1}},created:function(){this.transition&&c(this.transition)},compiled:function(){this._popupId="popup-"+d++,a["default"].register(this._popupId,this)},beforeDestroy:function(){a["default"].deregister(this._popupId),a["default"].closeModal(this._popupId)},data:function(){return{rendered:!1}},watch:{visible:function(e){var t=this;if(e){if(this._opening)return;this.rendered?this.open():(this.rendered=!0,s["default"].nextTick(function(){t.open()}))}else this.close()}},methods:{open:function(e){var t=this;if(!this.rendered)return this.rendered=!0,void(this.visible=!0);var o=(0,l.merge)({},this,e);this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),clearTimeout(this._openTimer);var n=Number(o.openDelay);n>0?this._openTimer=setTimeout(function(){t._openTimer=null,t.doOpen(o)},n):this.doOpen(o)},doOpen:function(e){if(!this.willOpen||this.willOpen()){this._opening=!0,this.visible=!0;var t=f(this.$el),o=e.modal;o&&(this._closing&&(a["default"].closeModal(this._popupId),this._closing=!1),a["default"].openModal(this._popupId,a["default"].nextZIndex(),t,e.modalClass)),"static"===getComputedStyle(t).position&&(t.style.position="absolute");var n=e.zIndex;o?t.style.zIndex=a["default"].nextZIndex():n&&(t.style.zIndex=n),this.onOpen&&this.onOpen(),this.transition||this.doAfterOpen()}},doAfterOpen:function(){this._opening=!1},close:function(){var e=this;if(!this.willClose||this.willClose()){null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),clearTimeout(this._closeTimer);var t=Number(this.closeDelay);t>0?this._closeTimer=setTimeout(function(){e._closeTimer=null,e.doClose()},t):this.doClose()}},doClose:function(){this.visible=!1,this._closing=!0,this.onClose&&this.onClose(),this.transition||this.doAfterClose()},doAfterClose:function(){a["default"].closeModal(this._popupId),this._closing=!1}}}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){var e=i.modalDom;return e||(e=document.createElement("div"),i.modalDom=e,e.addEventListener("touchmove",function(e){e.preventDefault(),e.stopPropagation()}),e.addEventListener("click",function(){i.doOnModalClick&&i.doOnModalClick()})),e},n={},i={zIndex:1e3,getInstance:function(e){return n[e]},register:function(e,t){e&&t&&(n[e]=t)},deregister:function(e){e&&(n[e]=null,delete n[e])},nextZIndex:function(){return i.zIndex++},modalStack:[],doOnModalClick:function(){var e=i.modalStack[i.modalStack.length-1];if(e){var t=i.getInstance(e.id);t&&t.closeOnClickModal&&t.close()}},openModal:function(e,t,n,i){if(e&&void 0!==t){for(var s=this.modalStack,l=0,r=s.length;r>l;l++){var a=s[l];if(a.id===e)return}var d=o();if(d.classList.add("v-modal"),d.classList.add("modal-enter"),i){var u=i.trim().split(/\s+/);u.forEach(function(e){return d.classList.add(e)})}setTimeout(function(){d.classList.remove("modal-enter")},200),n&&n.parentNode&&11!==n.parentNode.nodeType?n.parentNode.appendChild(d):document.body.appendChild(d),t&&(d.style.zIndex=t),d.style.display="",this.modalStack.push({id:e,zIndex:t,modalClass:i})}},closeModal:function(e){var t=this.modalStack,n=o();if(t.length>0){var i=t[t.length-1];if(i.id===e){if(i.modalClass){var s=i.modalClass.trim().split(/\s+/);s.forEach(function(e){return n.classList.remove(e)})}t.pop(),t.length>0&&(n.style.zIndex=t[t.length-1].zIndex)}else for(var l=t.length-1;l>=0;l--)if(t[l].id===e){t.splice(l,1);break}}0===t.length&&(n.classList.add("modal-leave"),setTimeout(function(){0===t.length&&(n.parentNode&&n.parentNode.removeChild(n),n.style.display="none"),n.classList.remove("modal-leave")},200))}};window.addEventListener("keydown",function(e){if(27===e.keyCode&&i.modalStack.length>0){var t=i.modalStack[i.modalStack.length-1];if(!t)return;var o=i.getInstance(t.id);o.closeOnPressEscape&&o.close()}}),t["default"]=i},function(e,t){"use strict";function o(e){for(var t=1,o=arguments.length;o>t;t++){var n=arguments[t];for(var i in n)if(n.hasOwnProperty(i)){var s=n[i];void 0!==s&&(e[i]=s)}}return e}Object.defineProperty(t,"__esModule",{value:!0}),t.merge=o},function(e,t){},function(t,o){t.exports=e}])});
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("VuePopup",["vue"],t):"object"==typeof exports?exports.VuePopup=t(require("vue")):e.VuePopup=t(e.vue)}(this,function(e){return function(e){function t(n){if(o[n])return o[n].exports;var i=o[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var o={};return t.m=e,t.c=o,t.p="/lib/",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var i=o(4),s=n(i),l=o(2),r=o(1),a=n(r);o(3);var d=1,u=[],c=function(e){if(-1===u.indexOf(e)){var t=function(e){var t=e.__vue__;if(!t){var o=e.previousSibling;o.__vue__&&(t=o.__vue__)}return t};s["default"].transition(e,{afterEnter:function(e){var o=t(e);o&&o.doAfterOpen&&o.doAfterOpen()},afterLeave:function(e){var o=t(e);o&&o.doAfterClose&&o.doAfterClose()}})}},f=function(e){return 3===e.nodeType?e.nextElementSibling:e};t["default"]={props:{visible:{type:Boolean,twoWay:!0,"default":!1},transition:{type:String,"default":""},openDelay:{},closeDelay:{},zIndex:{},modal:{type:Boolean,"default":!1},modalClass:{},closeOnPressEscape:{type:Boolean,"default":!1},closeOnClickModal:{type:Boolean,"default":!1}},created:function(){this.transition&&c(this.transition)},compiled:function(){this._popupId="popup-"+d++,a["default"].register(this._popupId,this)},beforeDestroy:function(){a["default"].deregister(this._popupId),a["default"].closeModal(this._popupId)},data:function(){return{rendered:!1}},watch:{visible:function(e){var t=this;if(e){if(this._opening)return;this.rendered?this.open():(this.rendered=!0,s["default"].nextTick(function(){t.open()}))}else this.close()}},methods:{open:function(e){var t=this;if(!this.rendered)return this.rendered=!0,void(this.visible=!0);var o=(0,l.merge)({},this,e);this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),clearTimeout(this._openTimer);var n=Number(o.openDelay);n>0?this._openTimer=setTimeout(function(){t._openTimer=null,t.doOpen(o)},n):this.doOpen(o)},doOpen:function(e){if(!this.willOpen||this.willOpen()){this._opening=!0,this.visible=!0;var t=f(this.$el),o=e.modal;o&&(this._closing&&(a["default"].closeModal(this._popupId),this._closing=!1),a["default"].openModal(this._popupId,a["default"].nextZIndex(),t,e.modalClass)),"static"===getComputedStyle(t).position&&(t.style.position="absolute");var n=e.zIndex;o?t.style.zIndex=a["default"].nextZIndex():n&&(t.style.zIndex=n),this.onOpen&&this.onOpen(),this.transition||this.doAfterOpen()}},doAfterOpen:function(){this._opening=!1},close:function(){var e=this;if(!this.willClose||this.willClose()){null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),clearTimeout(this._closeTimer);var t=Number(this.closeDelay);t>0?this._closeTimer=setTimeout(function(){e._closeTimer=null,e.doClose()},t):this.doClose()}},doClose:function(){this.visible=!1,this._closing=!0,this.onClose&&this.onClose(),this.transition||this.doAfterClose()},doAfterClose:function(){a["default"].closeModal(this._popupId),this._closing=!1}}}},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){var e=i.modalDom;return e||(e=document.createElement("div"),i.modalDom=e,e.addEventListener("touchmove",function(e){e.preventDefault(),e.stopPropagation()}),e.addEventListener("click",function(){i.doOnModalClick&&i.doOnModalClick()})),e},n={},i={zIndex:1e3,getInstance:function(e){return n[e]},register:function(e,t){e&&t&&(n[e]=t)},deregister:function(e){e&&(n[e]=null,delete n[e])},nextZIndex:function(){return i.zIndex++},modalStack:[],doOnModalClick:function(){var e=i.modalStack[i.modalStack.length-1];if(e){var t=i.getInstance(e.id);t&&t.closeOnClickModal&&t.close()}},openModal:function(e,t,n,i){if(e&&void 0!==t){for(var s=this.modalStack,l=0,r=s.length;r>l;l++){var a=s[l];if(a.id===e)return}var d=o();if(d.classList.add("v-modal"),d.classList.add("v-modal-enter"),i){var u=i.trim().split(/\s+/);u.forEach(function(e){return d.classList.add(e)})}setTimeout(function(){d.classList.remove("v-modal-enter")},200),n&&n.parentNode&&11!==n.parentNode.nodeType?n.parentNode.appendChild(d):document.body.appendChild(d),t&&(d.style.zIndex=t),d.style.display="",this.modalStack.push({id:e,zIndex:t,modalClass:i})}},closeModal:function(e){var t=this.modalStack,n=o();if(t.length>0){var i=t[t.length-1];if(i.id===e){if(i.modalClass){var s=i.modalClass.trim().split(/\s+/);s.forEach(function(e){return n.classList.remove(e)})}t.pop(),t.length>0&&(n.style.zIndex=t[t.length-1].zIndex)}else for(var l=t.length-1;l>=0;l--)if(t[l].id===e){t.splice(l,1);break}}0===t.length&&(n.classList.add("v-modal-leave"),setTimeout(function(){0===t.length&&(n.parentNode&&n.parentNode.removeChild(n),n.style.display="none"),n.classList.remove("v-modal-leave")},200))}};window.addEventListener("keydown",function(e){if(27===e.keyCode&&i.modalStack.length>0){var t=i.modalStack[i.modalStack.length-1];if(!t)return;var o=i.getInstance(t.id);o.closeOnPressEscape&&o.close()}}),t["default"]=i},function(e,t){"use strict";function o(e){for(var t=1,o=arguments.length;o>t;t++){var n=arguments[t];for(var i in n)if(n.hasOwnProperty(i)){var s=n[i];void 0!==s&&(e[i]=s)}}return e}Object.defineProperty(t,"__esModule",{value:!0}),t.merge=o},function(e,t){},function(t,o){t.exports=e}])});
//# sourceMappingURL=index.js.map
{
"name": "vue-popup",
"version": "0.1.4",
"version": "0.1.5",
"description": "A popup mixin for vue.js",

@@ -5,0 +5,0 @@ "private": false,

@@ -25,2 +25,3 @@ # Overview

Goal: on your page you have a button. When it's clicked, an alert pops up.
First let's deal with the alert component in `alert.vue`:

@@ -43,3 +44,3 @@ ```html

import Popup from 'vue-popup';
require('vue-popup/lib/vue-popup.css');
require('vue-popup/lib/popup.css');
export default {

@@ -59,2 +60,3 @@ mixins: [Popup],

As you can see, `v-if="rendered"` and `v-show="visible"` should be added on the outermost tag of the component. Its `props` attribute has two keys: `modal` and `closeOnClickModal`, please refer to API below for detailed information.
That's it for the alert component. Let's move on to the main page:

@@ -61,0 +63,0 @@ ```html

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc