vue-loading-overlay - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1

CHANGELOG.md

 # Changelog
 
+### [2.2.1](https://github.com/ankurk91/vue-loading-overlay/compare/2.2.0...2.2.1) 
+* Fix: regression in trap focus feature
+* Fix: regression in `z-index` issue
+* Docs: updated demo examples
+
 ### [2.2.0](https://github.com/ankurk91/vue-loading-overlay/compare/2.1.0...2.2.0) 
@@ -10,3 +15,3 @@ * Add: default slot to override the loading indicator
 * Test: add tests
-* docs: update readme with better examples
+* Docs: update readme with better examples
 
@@ -13,0 +18,0 @@ ### [2.1.0](https://github.com/ankurk91/vue-loading-overlay/compare/2.0.4...2.1.0)

dist/vue-loading.js

@@ -94,3 +94,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ 	return __webpack_require__(__webpack_require__.s = 3);
 /******/ })
@@ -106,2 +106,9 @@ /************************************************************************/
 /* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+
+/***/ }),
+/* 2 */,
+/* 3 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
@@ -159,7 +166,11 @@
 
+      // Use container as parent when available otherwise use parent element when isFullPage is false
+      var parent = this.container ? this.container : this.isFullPage ? null : this.$el.parentElement;
+
       if (
-      // When loading is full screen
-      !this.container ||
+      // Always prevent when loading is full screen
+      this.isFullPage ||
+      // When a parent exist means loader is running inside a container
       // When loading is NOT full screen and event target is inside the given container
-      this.container && this.container.contains(event.target)) {
+      parent && parent.contains(event.target)) {
         event.preventDefault();
@@ -419,2 +430,3 @@ this.$el.focus();
 
+component.options.__file = "Component.vue"
 /* harmony default export */ var Component = (component.exports);
@@ -448,3 +460,3 @@ // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","amd":"vue","root":"Vue"}
 // EXTERNAL MODULE: ./src/scss/index.scss
-var scss = __webpack_require__(3);
+var scss = __webpack_require__(1);
 
@@ -467,11 +479,4 @@ // CONCATENATED MODULE: ./src/index.js
 
-/***/ }),
-/* 2 */,
-/* 3 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-
 /***/ })
 /******/ ])["default"];
 });

dist/vue-loading.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("VueLoading",["vue"],t):"object"==typeof exports?exports.VueLoading=t(require("vue")):e.VueLoading=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){"use strict";n.r(t);var i=function(){return"undefined"!=typeof window},o=i?window.HTMLElement:Object,r=function(e,t,n,i,o,r,a,c){var u,s="function"==typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=[],s._compiled=!0),u)if(s.functional){s._injectStyles=u;var l=s.render;s.render=function(e,t){return u.call(t),l(e,t)}}else{var f=s.beforeCreate;s.beforeCreate=f?[].concat(f,u):[u]}return{exports:e,options:s}}({name:"vue-loading",mixins:[{mounted:function(){i()&&document.addEventListener("focusin",this.focusIn)},methods:{focusIn:function(e){this.isActive&&(e.target===this.$el||this.$el.contains(e.target)||(!this.container||this.container&&this.container.contains(e.target))&&(e.preventDefault(),this.$el.focus()))}},beforeDestroy:function(){i()&&document.removeEventListener("focusin",this.focusIn)}}],props:{active:Boolean,programmatic:Boolean,container:[Object,Function,o],isFullPage:{type:Boolean,default:!0},animation:{type:String,default:"fade"},canCancel:Boolean,onCancel:{type:Function,default:function(){}}},data:function(){return{isActive:this.active||!1}},created:function(){i()&&document.addEventListener("keyup",this.keyPress)},beforeMount:function(){i()&&this.programmatic&&(this.container?(this.isFullPage=!1,this.container.appendChild(this.$el)):document.body.appendChild(this.$el))},mounted:function(){this.programmatic&&(this.isActive=!0)},methods:{cancel:function(){this.canCancel&&this.isActive&&this.hide()},hide:function(){var e=this;this.$emit("close"),this.$emit("update:active",!1),this.onCancel.apply(null,arguments),this.programmatic&&(this.isActive=!1,setTimeout(function(){var t;e.$destroy(),void 0!==(t=e.$el).remove?t.remove():t.parentNode.removeChild(t)},150))},keyPress:function(e){27===e.keyCode&&this.cancel()}},watch:{active:function(e){this.isActive=e}},beforeDestroy:function(){i()&&document.removeEventListener("keyup",this.keyPress)}},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:e.animation}},[e.isActive?n("div",{staticClass:"loading-overlay is-active",class:{"is-full-page":e.isFullPage},attrs:{tabindex:"0","aria-live":"polite","aria-label":"Loading"}},[n("div",{staticClass:"loading-background",on:{click:function(t){return t.preventDefault(),e.cancel(t)}}}),e._v(" "),e._t("default",[n("div",{staticClass:"loading-icon"})])],2):e._e()])}).exports,a=n(0),c=n.n(a),u={show:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=Object.assign({programmatic:!0},e);return new(c.a.extend(r))({el:document.createElement("div"),propsData:t})}};n(3),r.install=function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1],e.$loading=u,e.prototype.$loading=u},t.default=r},,function(e,t,n){}]).default});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("VueLoading",["vue"],t):"object"==typeof exports?exports.VueLoading=t(require("vue")):e.VueLoading=t(e.Vue)}("undefined"!=typeof self?self:this,function(e){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(t,n){t.exports=e},function(e,t,n){},,function(e,t,n){"use strict";n.r(t);var i=function(){return"undefined"!=typeof window},o=i?window.HTMLElement:Object,r=function(e,t,n,i,o,r,a,c){var u,s="function"==typeof e?e.options:e;if(t&&(s.render=t,s.staticRenderFns=[],s._compiled=!0),u)if(s.functional){s._injectStyles=u;var l=s.render;s.render=function(e,t){return u.call(t),l(e,t)}}else{var f=s.beforeCreate;s.beforeCreate=f?[].concat(f,u):[u]}return{exports:e,options:s}}({name:"vue-loading",mixins:[{mounted:function(){i()&&document.addEventListener("focusin",this.focusIn)},methods:{focusIn:function(e){if(this.isActive&&e.target!==this.$el&&!this.$el.contains(e.target)){var t=this.container?this.container:this.isFullPage?null:this.$el.parentElement;(this.isFullPage||t&&t.contains(e.target))&&(e.preventDefault(),this.$el.focus())}}},beforeDestroy:function(){i()&&document.removeEventListener("focusin",this.focusIn)}}],props:{active:Boolean,programmatic:Boolean,container:[Object,Function,o],isFullPage:{type:Boolean,default:!0},animation:{type:String,default:"fade"},canCancel:Boolean,onCancel:{type:Function,default:function(){}}},data:function(){return{isActive:this.active||!1}},created:function(){i()&&document.addEventListener("keyup",this.keyPress)},beforeMount:function(){i()&&this.programmatic&&(this.container?(this.isFullPage=!1,this.container.appendChild(this.$el)):document.body.appendChild(this.$el))},mounted:function(){this.programmatic&&(this.isActive=!0)},methods:{cancel:function(){this.canCancel&&this.isActive&&this.hide()},hide:function(){var e=this;this.$emit("close"),this.$emit("update:active",!1),this.onCancel.apply(null,arguments),this.programmatic&&(this.isActive=!1,setTimeout(function(){var t;e.$destroy(),void 0!==(t=e.$el).remove?t.remove():t.parentNode.removeChild(t)},150))},keyPress:function(e){27===e.keyCode&&this.cancel()}},watch:{active:function(e){this.isActive=e}},beforeDestroy:function(){i()&&document.removeEventListener("keyup",this.keyPress)}},function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("transition",{attrs:{name:e.animation}},[e.isActive?n("div",{staticClass:"loading-overlay is-active",class:{"is-full-page":e.isFullPage},attrs:{tabindex:"0","aria-live":"polite","aria-label":"Loading"}},[n("div",{staticClass:"loading-background",on:{click:function(t){return t.preventDefault(),e.cancel(t)}}}),e._v(" "),e._t("default",[n("div",{staticClass:"loading-icon"})])],2):e._e()])});r.options.__file="Component.vue";var a=r.exports,c=n(0),u=n.n(c),s={show:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=Object.assign({programmatic:!0},e);return new(u.a.extend(a))({el:document.createElement("div"),propsData:t})}};n(1),a.install=function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1],e.$loading=s,e.prototype.$loading=s},t.default=a}]).default});

package.json

 {
   "name": "vue-loading-overlay",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Vue.js v2.x component for full screen loading indicator",
@@ -38,7 +38,8 @@ "main": "dist/vue-loading.js",
   "devDependencies": {
-    "@vue/test-utils": "^1.0.0-beta.23",
-    "autoprefixer": "^9.0.2",
+    "@vue/test-utils": "^1.0.0-beta.24",
+    "autoprefixer": "^9.1.0",
     "babel-core": "^6.26.3",
     "babel-loader": "^7.1.5",
     "babel-preset-env": "^1.7.0",
+    "bootstrap": "^4.1.3",
     "clean-webpack-plugin": "^0.1.18",
@@ -49,14 +50,14 @@ "cross-env": "^5.2.0",
     "html-webpack-plugin": "^3.2.0",
-    "jest": "^23.4.2",
+    "jest": "^23.5.0",
     "mini-css-extract-plugin": "^0.4.1",
-    "node-sass": "^4.9.2",
-    "postcss-loader": "^2.1.6",
+    "node-sass": "^4.9.3",
+    "postcss-loader": "^3.0.0",
     "sass-loader": "^7.1.0",
-    "style-loader": "^0.21.0",
+    "style-loader": "^0.22.1",
     "unminified-webpack-plugin": "^2.0.0",
     "vue": "^2.5.17",
     "vue-jest": "^2.6.0",
-    "vue-loader": "^15.2.6",
+    "vue-loader": "^15.3.0",
     "vue-template-compiler": "^2.5.17",
-    "webpack": "^4.16.3",
+    "webpack": "^4.16.5",
     "webpack-command": "^0.4.1",
@@ -63,0 +64,0 @@ "webpack-serve": "^2.0.2"

src/js/trapFocusMixin.js

@@ -24,7 +24,11 @@ import {hasWindow} from "./util";
 
+      // Use container as parent when available otherwise use parent element when isFullPage is false
+      let parent = this.container ? this.container : (this.isFullPage ? null : this.$el.parentElement);
+
       if (
-        // When loading is full screen
-        !this.container ||
+        // Always prevent when loading is full screen
+        this.isFullPage ||
+        // When a parent exist means loader is running inside a container
         // When loading is NOT full screen and event target is inside the given container
-        (this.container && this.container.contains(event.target))
+        (parent && parent.contains(event.target))
       ) {
@@ -31,0 +35,0 @@ event.preventDefault();

No alert changes

Improved metrics

Total package byte prevSize

37693

increased by1.36%

Worsened metrics

Dev dependency count

25

increased by4.17%

Lines of code

496

decreased by-9.16%

No dependency changes