Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-loading-overlay
Advanced tools
vue-loading-overlay - npm Package Compare versions
Comparing version 2.0.4 to 2.1.0
| # Changelog | ||
| ### [2.1.0](https://github.com/ankurk91/vue-loading-overlay/compare/2.0.4...2.1.0) | ||
| * Add: allow loader to be restricted to a container element | ||
| * Chore: auto pre-fixer | ||
| ### [2.0.4](https://github.com/ankurk91/vue-loading-overlay/compare/2.0.3...2.0.4) | ||
@@ -4,0 +8,0 @@ * Build: `dist` now includes non-minified js file as well |
@@ -10,3 +10,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| root["VueLoading"] = factory(root["Vue"]); | ||
| })(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_1__) { | ||
| })(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE__0__) { | ||
| return /******/ (function(modules) { // webpackBootstrap | ||
@@ -50,10 +50,30 @@ /******/ // The module cache | ||
| /******/ if(!__webpack_require__.o(exports, name)) { | ||
| /******/ Object.defineProperty(exports, name, { | ||
| /******/ configurable: false, | ||
| /******/ enumerable: true, | ||
| /******/ get: getter | ||
| /******/ }); | ||
| /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); | ||
| /******/ } | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // define __esModule on exports | ||
| /******/ __webpack_require__.r = function(exports) { | ||
| /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { | ||
| /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); | ||
| /******/ } | ||
| /******/ Object.defineProperty(exports, '__esModule', { value: true }); | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // create a fake namespace object | ||
| /******/ // mode & 1: value is a module id, require it | ||
| /******/ // mode & 2: merge all properties of value into the ns | ||
| /******/ // mode & 4: return value when already ns object | ||
| /******/ // mode & 8|1: behave like require | ||
| /******/ __webpack_require__.t = function(value, mode) { | ||
| /******/ if(mode & 1) value = __webpack_require__(value); | ||
| /******/ if(mode & 8) return value; | ||
| /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; | ||
| /******/ var ns = Object.create(null); | ||
| /******/ __webpack_require__.r(ns); | ||
| /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); | ||
| /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); | ||
| /******/ return ns; | ||
| /******/ }; | ||
| /******/ | ||
| /******/ // getDefaultExport function for compatibility with non-harmony modules | ||
@@ -74,4 +94,5 @@ /******/ __webpack_require__.n = function(module) { | ||
| /******/ | ||
| /******/ | ||
| /******/ // Load entry module and return exports | ||
| /******/ return __webpack_require__(__webpack_require__.s = 0); | ||
| /******/ return __webpack_require__(__webpack_require__.s = 1); | ||
| /******/ }) | ||
@@ -81,7 +102,20 @@ /************************************************************************/ | ||
| /* 0 */ | ||
| /***/ (function(module, exports) { | ||
| module.exports = __WEBPACK_EXTERNAL_MODULE__0__; | ||
| /***/ }), | ||
| /* 1 */ | ||
| /***/ (function(module, __webpack_exports__, __webpack_require__) { | ||
| "use strict"; | ||
| Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); | ||
| __webpack_require__.r(__webpack_exports__); | ||
| // CONCATENATED MODULE: ./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options!./src/js/Component.vue?vue&type=template&id=48345599 | ||
| var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":_vm.animation}},[(_vm.isActive)?_c('div',{staticClass:"loading-overlay is-active",class:{'is-full-page': _vm.isFullPage },attrs:{"aria-busy":_vm.isActive}},[_c('div',{staticClass:"loading-background",on:{"click":function($event){$event.preventDefault();return _vm.cancel($event)}}}),_vm._v(" "),_c('div',{staticClass:"loading-icon"})]):_vm._e()])} | ||
| var staticRenderFns = [] | ||
| // CONCATENATED MODULE: ./src/js/Component.vue?vue&type=template&id=48345599 | ||
| // CONCATENATED MODULE: ./src/js/util.js | ||
@@ -100,4 +134,6 @@ var removeElement = function removeElement(el) { | ||
| var HTMLElement = !hasWindow ? Object : window.HTMLElement; | ||
| // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/js/Component.vue | ||
| // CONCATENATED MODULE: ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options!./src/js/Component.vue?vue&type=script&lang=js | ||
| // | ||
@@ -112,6 +148,9 @@ // | ||
| // | ||
| // | ||
| // | ||
| // | ||
| /* harmony default export */ var Component = ({ | ||
| /* harmony default export */ var Componentvue_type_script_lang_js = ({ | ||
| name: 'vue-loading', | ||
@@ -121,2 +160,7 @@ props: { | ||
| programmatic: Boolean, | ||
| container: [Object, Function, HTMLElement], | ||
| isFullPage: { | ||
| type: Boolean, | ||
| default: true | ||
| }, | ||
| animation: { | ||
@@ -151,5 +195,10 @@ type: String, | ||
| beforeMount: function beforeMount() { | ||
| // Insert the Loading component in body tag | ||
| // only if it's programmatic | ||
| hasWindow && this.programmatic && document.body.appendChild(this.$el); | ||
| if (hasWindow && this.programmatic) { | ||
| if (!this.container) { | ||
| document.body.appendChild(this.$el); | ||
| } else { | ||
| this.isFullPage = false; | ||
| this.container.appendChild(this.$el); | ||
| } | ||
| } | ||
| }, | ||
@@ -208,7 +257,5 @@ mounted: function mounted() { | ||
| }); | ||
| // CONCATENATED MODULE: ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-244cb1b2","hasScoped":false,"optionsId":"0","buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/js/Component.vue | ||
| var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('transition',{attrs:{"name":_vm.animation}},[(_vm.isActive)?_c('div',{staticClass:"loading-overlay is-active",attrs:{"aria-busy":_vm.isActive}},[_c('div',{staticClass:"loading-background",on:{"click":function($event){$event.preventDefault();return _vm.cancel($event)}}}),_vm._v(" "),_c('div',{staticClass:"loading-icon"})]):_vm._e()])} | ||
| var staticRenderFns = [] | ||
| // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/component-normalizer.js | ||
| // CONCATENATED MODULE: ./src/js/Component.vue?vue&type=script&lang=js | ||
| /* harmony default export */ var js_Componentvue_type_script_lang_js = (Componentvue_type_script_lang_js); | ||
| // CONCATENATED MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js | ||
| /* globals __VUE_SSR_CONTEXT__ */ | ||
@@ -230,10 +277,2 @@ | ||
| ) { | ||
| scriptExports = scriptExports || {} | ||
| // ES6 modules interop | ||
| var type = typeof scriptExports.default | ||
| if (type === 'object' || type === 'function') { | ||
| scriptExports = scriptExports.default | ||
| } | ||
| // Vue.extend constructor export interop | ||
@@ -258,3 +297,3 @@ var options = typeof scriptExports === 'function' | ||
| if (scopeId) { | ||
| options._scopeId = scopeId | ||
| options._scopeId = 'data-v-' + scopeId | ||
| } | ||
@@ -319,31 +358,24 @@ | ||
| // CONCATENATED MODULE: ./src/js/Component.vue | ||
| /* script */ | ||
| /* template */ | ||
| /* template functional */ | ||
| var __vue_template_functional__ = false | ||
| /* styles */ | ||
| var __vue_styles__ = null | ||
| /* scopeId */ | ||
| var __vue_scopeId__ = null | ||
| /* moduleIdentifier (server only) */ | ||
| var __vue_module_identifier__ = null | ||
| var Component_Component = normalizeComponent( | ||
| Component, | ||
| /* normalize component */ | ||
| var component = normalizeComponent( | ||
| js_Componentvue_type_script_lang_js, | ||
| render, | ||
| staticRenderFns, | ||
| __vue_template_functional__, | ||
| __vue_styles__, | ||
| __vue_scopeId__, | ||
| __vue_module_identifier__ | ||
| false, | ||
| null, | ||
| null, | ||
| null | ||
| ) | ||
| /* harmony default export */ var js_Component = (Component_Component.exports); | ||
| /* harmony default export */ var Component = (component.exports); | ||
| // EXTERNAL MODULE: external {"commonjs":"vue","commonjs2":"vue","amd":"vue","root":"Vue"} | ||
| var external___commonjs___vue___commonjs2___vue___amd___vue___root___Vue__ = __webpack_require__(1); | ||
| var external___commonjs___vue___commonjs2___vue___amd___vue___root___Vue___default = /*#__PURE__*/__webpack_require__.n(external___commonjs___vue___commonjs2___vue___amd___vue___root___Vue__); | ||
| var external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_ = __webpack_require__(0); | ||
| var external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_); | ||
@@ -362,3 +394,3 @@ // CONCATENATED MODULE: ./src/js/api.js | ||
| var propsData = Object.assign(defaultParam, params); | ||
| var LoadingComponent = external___commonjs___vue___commonjs2___vue___amd___vue___root___Vue___default.a.extend(js_Component); | ||
| var LoadingComponent = external_commonjs_vue_commonjs2_vue_amd_vue_root_Vue_default.a.extend(Component); | ||
@@ -374,4 +406,3 @@ return new LoadingComponent({ | ||
| // EXTERNAL MODULE: ./src/scss/index.scss | ||
| var scss = __webpack_require__(2); | ||
| var scss_default = /*#__PURE__*/__webpack_require__.n(scss); | ||
| var scss = __webpack_require__(3); | ||
@@ -387,30 +418,18 @@ // CONCATENATED MODULE: ./src/index.js | ||
| Vue.$loading = api; | ||
| Object.defineProperties(Vue.prototype, { | ||
| $loading: { | ||
| get: function get() { | ||
| return api; | ||
| } | ||
| } | ||
| }); | ||
| Vue.prototype.$loading = api; | ||
| }; | ||
| js_Component.install = src_Plugin; | ||
| Component.install = src_Plugin; | ||
| /* harmony default export */ var src = __webpack_exports__["default"] = (js_Component); | ||
| /* harmony default export */ var src = __webpack_exports__["default"] = (Component); | ||
| /***/ }), | ||
| /* 1 */ | ||
| /***/ (function(module, exports) { | ||
| /* 2 */, | ||
| /* 3 */ | ||
| /***/ (function(module, exports, __webpack_require__) { | ||
| module.exports = __WEBPACK_EXTERNAL_MODULE_1__; | ||
| // extracted by mini-css-extract-plugin | ||
| /***/ }), | ||
| /* 2 */ | ||
| /***/ (function(module, exports) { | ||
| // removed by extract-text-webpack-plugin | ||
| /***/ }) | ||
| /******/ ])["default"]; | ||
| }); |
@@ -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){function t(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(e){void 0!==e.remove?e.remove():e.parentNode.removeChild(e)},i=function(){return"undefined"!=typeof window},r={name:"vue-loading",props:{active:Boolean,programmatic:Boolean,animation:{type:String,default:"fade"},canCancel:{type:Boolean,default:!1},onCancel:{type:Function,default:function(){}}},data:function(){return{isActive:this.active||!1}},created:function(){i&&document.addEventListener("keyup",this.escape)},beforeMount:function(){i&&this.programmatic&&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.onCancel.apply(null,arguments),this.$emit("close"),this.$emit("update:active",!1),this.programmatic&&(this.isActive=!1,setTimeout(function(){e.$destroy(),o(e.$el)},150))},escape:function(e){27===e.keyCode&&this.cancel()}},watch:{active:function(e){this.isActive=e}},beforeDestroy:function(){i&&document.removeEventListener("keyup",this.escape)}},a=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",attrs:{"aria-busy":e.isActive}},[n("div",{staticClass:"loading-background",on:{click:function(t){return t.preventDefault(),e.cancel(t)}}}),e._v(" "),n("div",{staticClass:"loading-icon"})]):e._e()])},c=[],s=function(e,t,n,o,i,r,a,c){e=e||{};var s=typeof e.default;"object"!==s&&"function"!==s||(e=e.default);var u="function"==typeof e?e.options:e;t&&(u.render=t,u.staticRenderFns=n,u._compiled=!0),o&&(u.functional=!0),r&&(u._scopeId=r);var d;if(a?(d=function(e){e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(a)},u._ssrRegister=d):i&&(d=c?function(){i.call(this,this.$root.$options.shadowRoot)}:i),d)if(u.functional){u._injectStyles=d;var f=u.render;u.render=function(e,t){return d.call(t),f(e,t)}}else{var l=u.beforeCreate;u.beforeCreate=l?[].concat(l,d):[d]}return{exports:e,options:u}}(r,a,c,!1,null,null,null),u=s.exports,d=n(1),f=n.n(d),l={show:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t={programmatic:!0},n=Object.assign(t,e);return new(f.a.extend(u))({el:document.createElement("div"),propsData:n})}},p=l,v=(n(2),function(e){arguments.length>1&&void 0!==arguments[1]&&arguments[1];e.$loading=p,Object.defineProperties(e.prototype,{$loading:{get:function(){return p}}})});u.install=v;t.default=u},function(t,n){t.exports=e},function(e,t){}]).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=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",props:{active:Boolean,programmatic:Boolean,container:[Object,Function,o],isFullPage:{type:Boolean,default:!0},animation:{type:String,default:"fade"},canCancel:{type:Boolean,default:!1},onCancel:{type:Function,default:function(){}}},data:function(){return{isActive:this.active||!1}},created:function(){i&&document.addEventListener("keyup",this.escape)},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.onCancel.apply(null,arguments),this.$emit("close"),this.$emit("update:active",!1),this.programmatic&&(this.isActive=!1,setTimeout(function(){var t;e.$destroy(),void 0!==(t=e.$el).remove?t.remove():t.parentNode.removeChild(t)},150))},escape:function(e){27===e.keyCode&&this.cancel()}},watch:{active:function(e){this.isActive=e}},beforeDestroy:function(){i&&document.removeEventListener("keyup",this.escape)}},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:{"aria-busy":e.isActive}},[n("div",{staticClass:"loading-background",on:{click:function(t){return t.preventDefault(),e.cancel(t)}}}),e._v(" "),n("div",{staticClass:"loading-icon"})]):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}); |
| { | ||
| "name": "vue-loading-overlay", | ||
| "version": "2.0.4", | ||
| "version": "2.1.0", | ||
| "description": "Vue.js v2.x component for full screen loading indicator", | ||
@@ -31,4 +31,4 @@ "main": "dist/vue-loading.js", | ||
| "start": "npm run dev", | ||
| "dev": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config=webpack.config.dev.js", | ||
| "build": "node ./node_modules/webpack/bin/webpack.js --hide-modules -p --progress", | ||
| "dev": "cross-env NODE_ENV=development webpack-serve --config=webpack.config.dev.js", | ||
| "build": "cross-env NODE_ENV=production webpack --mode production", | ||
| "prepublishOnly": "npm run build" | ||
@@ -38,19 +38,22 @@ }, | ||
| "devDependencies": { | ||
| "babel-core": "^6.25.0", | ||
| "babel-core": "^6.26.3", | ||
| "babel-loader": "^7.1.0", | ||
| "babel-preset-env": "^1.6.1", | ||
| "babel-preset-env": "^1.7.0", | ||
| "clean-webpack-plugin": "^0.1.18", | ||
| "cross-env": "^5.1.6", | ||
| "css-loader": "^0.28.9", | ||
| "extract-text-webpack-plugin": "^3.0.2", | ||
| "file-loader": "^1.1.6", | ||
| "html-webpack-plugin": "^2.30.1", | ||
| "node-sass": "^4.7.2", | ||
| "sass-loader": "^6.0.6", | ||
| "style-loader": "^0.20.1", | ||
| "unminified-webpack-plugin": "^1.4", | ||
| "html-webpack-plugin": "^3.2.0", | ||
| "mini-css-extract-plugin": "^0.4.0", | ||
| "node-sass": "^4.9.0", | ||
| "postcss-loader": "^2.1.5", | ||
| "sass-loader": "^7.0.1", | ||
| "style-loader": "^0.21.0", | ||
| "unminified-webpack-plugin": "^2.0.0", | ||
| "vue": "^2.5.13", | ||
| "vue-loader": "^14.1.1", | ||
| "vue-loader": "^15.2.4", | ||
| "vue-template-compiler": "^2.5.13", | ||
| "webpack": "^3.10.0", | ||
| "webpack-dev-server": "^2.11.1" | ||
| "webpack": "^4.10.2", | ||
| "webpack-command": "^0.2.0", | ||
| "webpack-serve": "^1.0.2" | ||
| }, | ||
@@ -57,0 +60,0 @@ "peerDependencies": { |
@@ -14,3 +14,2 @@ # Vue Loading Overlay Component | ||
| ## Installation | ||
| :mega: Now published to npm | ||
| ```bash | ||
@@ -29,4 +28,7 @@ # npm | ||
| <div> | ||
| <loading :active.sync="isLoading" :can-cancel="true" :on-cancel="whenCancelled"></loading> | ||
| <button @click.prevent="fetchData">fetch Data</button> | ||
| <loading :active.sync="isLoading" | ||
| :can-cancel="true" | ||
| :on-cancel="whenCancelled" | ||
| :is-full-page="true"></loading> | ||
| <button @click.prevent="doAjax">fetch Data</button> | ||
| </div> | ||
@@ -51,3 +53,3 @@ </template> | ||
| methods: { | ||
| fetchData() { | ||
| doAjax() { | ||
| this.isLoading = true; | ||
@@ -71,3 +73,4 @@ // AJAX example with axios | ||
| <form @submit.prevent="submit"> | ||
| <!-- form inputs --> | ||
| <!-- your form inputs goes here--> | ||
| <button type="submit">Save</button> | ||
| </form> | ||
@@ -89,2 +92,3 @@ </template> | ||
| let loader = this.$loading.show(); | ||
| // AJAX example with axios | ||
| axios.post('/api').then((response)=>{ | ||
@@ -104,5 +108,17 @@ loader.hide() | ||
| | :--- | :---: | :---: | :--- | | ||
| | canCancel | Boolean | `false` | Allow user to cancel | | ||
| | onCancel | Function | `()=>{}` | Do something upon cancel | | ||
| | can-cancel | Boolean | `false` | Allow user to cancel? | | ||
| | on-cancel | Function | `()=>{}` | Do something upon cancel | | ||
| | is-full-page | Boolean | `true` | When `false`; limit loader to its container* | | ||
| * When `is-full-page` is set to `false`, the container element should be positioned as `position: relative` | ||
| ## API methods | ||
| ### `this.$loading.show()` | ||
| ```js | ||
| // pass propsData to component | ||
| this.$loading.show({ | ||
| container: this.$refs.loadingContainer | ||
| }) | ||
| ``` | ||
| ## Install in non-module environments (without webpack) | ||
@@ -123,3 +139,3 @@ ```html | ||
| * Clone this repo | ||
| * Make sure you have node-js >=6.10 and [yarn](https://yarnpkg.com) >=1.x pre-installed | ||
| * Make sure you have node-js `>=6.10` and [yarn](https://yarnpkg.com) `>=1.x` pre-installed | ||
| * Install dependencies - `yarn install` | ||
@@ -129,6 +145,2 @@ * Run webpack dev server - `yarn start` | ||
| ## Browser support | ||
| * I have not taken care of old browsers. | ||
| * You can apply [autoprefixer](https://github.com/postcss/autoprefixer) on css to support older browsers. | ||
| ## Credits | ||
@@ -135,0 +147,0 @@ * [Buefy](https://buefy.github.io/#/documentation/loading) loading component |
@@ -7,11 +7,3 @@ import Component from './js/Component.vue'; | ||
| Vue.$loading = LoadingProgrammatic; | ||
| Object.defineProperties(Vue.prototype, { | ||
| $loading: { | ||
| get() { | ||
| return LoadingProgrammatic | ||
| } | ||
| } | ||
| }); | ||
| Vue.prototype.$loading = LoadingProgrammatic; | ||
| }; | ||
@@ -18,0 +10,0 @@ |
@@ -13,3 +13,4 @@ const removeElement = (el) => { | ||
| const HTMLElement = !hasWindow ? Object : window.HTMLElement; | ||
| export {removeElement, hasWindow} | ||
| export {removeElement, hasWindow, HTMLElement} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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 riskPackage 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
- increased by8.74%
30447
- Lines of code
- increased by4.1%
406
- Number of lines in readme file
- increased by9.16%
143
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Dev dependency count
- increased by17.65%
20
No dependency changes