vue-promise-btn/dist/vue-promise-btn.js

Vue.js plugin that handles buttons asynchronous lock and show loading state indicator

import e from"vue";var n=function(e,n,t,r,i,o,s,a,d,p){"boolean"!=typeof s&&(d=a,a=s,s=!1);var c,l="function"==typeof t?t.options:t;if(e&&e.render&&(l.render=e.render,l.staticRenderFns=e.staticRenderFns,l._compiled=!0,i&&(l.functional=!0)),r&&(l._scopeId=r),o?(c=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),n&&n.call(this,d(e)),e&&e._registeredComponents&&e._registeredComponents.add(o)},l._ssrRegister=c):n&&(c=s?function(){n.call(this,p(this.$root.$options.shadowRoot))}:function(e){n.call(this,a(e))}),c)if(l.functional){var u=l.render;l.render=function(e,n){return c.call(n),u(e,n)}}else{var f=l.beforeCreate;l.beforeCreate=f?[].concat(f,c):[c]}return t}({render:function(){var e=this.$createElement;return(this._self._c||e)("span",{staticClass:"spinner",style:this.style})},staticRenderFns:[]},void 0,{name:"Spinner",props:{color:{type:String,default:"#3498db"},size:{type:Number,default:18},width:{type:Number,default:4},duration:{type:String,default:"1s"}},computed:{style:function(){return{borderTopColor:this.color,width:this.size+"px",height:this.size+"px",borderWidth:this.width+"px",animationDuration:this.duration}}}},"data-v-cc3e8e04",!1,void 0,void 0,void 0),t=0,r=function(n){var r={listeners:{},init:function(i,o,s){var a,d=(a=o.value)===Object(a),p=i.$promiseBtnId=t++,c=d?o.value:{},l=Object.assign({},n,c),u=function(e){return"string"==typeof e}(l.loader),f=i,v=null,m=!1,h=!1,b=!1,w=function(e){m&&h&&(l.showSpinner&&(v.show=!1),m=!1,h=!1,function(e,n){e.getAttribute("disabled")&&n.disableBtn&&e.removeAttribute("disabled"),e.classList.remove(n.btnLoadingClass)}(e,l))},_=function(){b=!1,h=!0,w(f)},y=function(e,n){return function(e){b=!0,function(e,n){n.disableBtn&&e.setAttribute("disabled","disabled"),e.classList.add(n.btnLoadingClass)}(e,l),l.showSpinner&&(v.show=!0),setTimeout(function(){m=!0,w(e)},l.minTimeout)}(e),n.then(function(){return _()}).catch(function(e){throw _(),e})};if(r.listeners[p]={el:i,eventType:l.action},"submit"===l.action&&!(f=i.querySelector('[type="submit"]')))throw new Error("No submit button found");if(l.showSpinner){var g=function(n,t,r,i){var o=document.createElement("SPAN");n.appendChild(o);var s={el:o,data:{show:!1},props:{parent:{type:Object,default:function(){return r.context}}},render:t.componentRenderer(t)};if(i){var a=t.stringHTMLRenderer(t),d=e.compile(a);s=Object.assign({},s,{data:Object.assign({},s.data,{options:t}),render:d.render,staticRenderFns:d.staticRenderFns})}return s}(f,l,s,u);v=new e(g)}if(l.hasOwnProperty("promise"))r.listeners[p].promiseHanlder=y;else{if(!!s.componentInstance){var C=s.componentInstance.$listeners&&s.componentInstance.$listeners[l.action];if(!C)throw new Error("Please, provide proper handler/action for promise-btn");r.listeners[p].eventHandler=C,s.componentInstance.$off(l.action)}else{var S=s.data.on&&s.data.on[l.action]&&(s.data.on[l.action]._withTask||s.data.on[l.action]._wrapper);if(!S)throw new Error("Please, provide proper handler/action for promise-btn");r.listeners[p].eventHandler=S,i.removeEventListener(l.action,S)}r.listener=function(e){var n=r.listeners[p].eventHandler;if(!l.disableBtn||!b){var t,i=n(e),o="function"==typeof i?function(e){for(var n=e;"function"==typeof n;)n=n();return n}(i):i;return!(t=o)||"object"!=typeof t&&"function"!=typeof t||"function"!=typeof t.then?void 0:y(f,o)}}}},bind:function(e,n,t){var i;(i=n.def).init.apply(i,arguments);var o=!!t.componentInstance,s=e.$promiseBtnId,a=r.listeners[s],d=a.eventType;a.promiseHanlder||(o?t.componentInstance.$on(d,r.listener):e.addEventListener(d,r.listener))},unbind:function(e,n,t){var i=!!t.componentInstance,o=e.$promiseBtnId,s=r.listeners[o].eventType;i?t.componentInstance.$off(s,r.listener):e.removeEventListener(s,r.listener),delete r.listeners[o],delete e.$promiseBtnId},componentUpdated:function(e,n,t,i){if(n&&n.value&&n.value.promise&&n.value.promise!==n.oldValue.promise){var o=e.$promiseBtnId;(0,r.listeners[o].promiseHanlder)(e,n.value.promise)}}};return r},i={btnLoadingClass:"loading",showSpinner:!0,action:"click",disableBtn:!0,stringHTMLRenderer:function(e){return'\n  <span class="promise-btn__spinner-wrapper"\n        :class="{[options.spinnerHiddenClass]: !show || false}"\n        v-show="options.autoHideSpinnerWrapper ? show : true"\n  >\n    '+e.loader+"\n  </span>"},componentRenderer:function(e){return function(n){var t;return n("span",{class:(t={"promise-btn__spinner-wrapper":!0},t[e.spinnerHiddenClass]=!!e.spinnerHiddenClass&&!this.show,t),directives:[{name:"show",value:!e.autoHideSpinnerWrapper||this.show}]},[n(e.loader)])}},minTimeout:400,spinnerHiddenClass:"hidden",autoHideSpinnerWrapper:!1,loader:n};export default{install:function(e,n){var t=Object.assign({},i,n);e.directive("promise-btn",r(t))},Spinner:n,setupVuePromiseBtn:r};