diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ff2e7f..9088a95 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Changelog +## 1.1.0 +- Use better template compilation way + ## 1.0.11 - Fix options and example for stringHTMLRenderer diff --git a/dist/vue-promise-btn.common.js b/dist/vue-promise-btn.common.js index ae5f0d4..ada51f5 100644 --- a/dist/vue-promise-btn.common.js +++ b/dist/vue-promise-btn.common.js @@ -1 +1 @@ -"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var Vue=_interopDefault(require("vue")),Spinner={render:function(){var e=this.$createElement;return(this._self._c||e)("span",{staticClass:"spinner",style:this.style})},staticRenderFns:[],_scopeId:"data-v-39432f99",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}}}},isPromise=function(e){return!!e&&("object"==typeof e||"function"==typeof e)&&"function"==typeof e.then},isString=function(e){return"string"==typeof e},isObject=function(e){return e===Object(e)},pluginElPropName="$promiseBtnId",elementId=0,stringHTMLRenderer=function(e){return'\n "},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)])}},initSpinner=function(e,n,t,i){var r=document.createElement("SPAN");e.appendChild(r);var s={el:r,data:{show:!1},props:{parent:{type:Object,default:function(){return t.context}}}};return s=i?Object.assign({},s,{data:Object.assign({},s.data,{options:n}),template:n.stringHTMLRenderer(n)}):Object.assign({},s,{render:n.componentRenderer(n)})},enableBtn=function(e,n){e.getAttribute("disabled")&&n.disableBtn&&e.removeAttribute("disabled"),e.classList.remove(n.btnLoadingClass)},disableBtn=function(e,n){n.disableBtn&&e.setAttribute("disabled","disabled"),e.classList.add(n.btnLoadingClass)},setupVuePromiseBtn=function(e){var n={listeners:{},init:function(t,i,r){var s=isObject(i.value),o=t[pluginElPropName]=elementId++,a=s?i.value:{},p=Object.assign({},e,a),d=r.data.on&&r.data.on[p.action]&&r.data.on[p.action]._withTask,l=isString(p.loader),u=t,c=null,f=!1,m=!1,b=function(){f&&m&&(c.show=!1,f=!1,m=!1,enableBtn(u,p))},h=function(){g=!1,p.showSpinner&&(m=!0,b())};if(n.listeners[o]={el:t,eventType:p.action,handler:d},t.removeEventListener(p.action,d),!d)throw new Error("Please, provide proper handler/action for promise-btn");if("submit"===p.action&&!(u=t.querySelector('[type="submit"]')))throw new Error("No submit button found");if(p.showSpinner){var v=initSpinner(u,p,r,l);c=new Vue(v)}var g=!1;n.listener=function(e){if(!p.disableBtn||!g){var n=d(e);isPromise(n)&&(g=!0,disableBtn(u,p),p.showSpinner&&(c.show=!0,setTimeout(function(){f=!0,b()},p.minTimeout)),n.then(h).catch(function(e){throw h(),e}))}}},bind:function(e,t,i){var r;(r=t.def).init.apply(r,arguments);var s=e[pluginElPropName],o=n.listeners[s].eventType;e.addEventListener(o,n.listener)},unbind:function(e,t){var i=e[pluginElPropName],r=n.listeners[i].eventType;e.removeEventListener(r,n.listener),delete n.listeners[i],delete e[pluginElPropName]}};return n},defaultOptions={btnLoadingClass:"loading",showSpinner:!0,action:"click",disableBtn:!0,stringHTMLRenderer:stringHTMLRenderer,componentRenderer:componentRenderer,minTimeout:400,spinnerHiddenClass:"hidden",autoHideSpinnerWrapper:!1,loader:Spinner};function install(e,n){var t=Object.assign({},defaultOptions,n);e.directive("promise-btn",setupVuePromiseBtn(t))}var main={install:install,Spinner:Spinner,setupVuePromiseBtn:setupVuePromiseBtn};module.exports=main; +"use strict";function _interopDefault(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var Vue=_interopDefault(require("vue")),Spinner={render:function(){var e=this.$createElement;return(this._self._c||e)("span",{staticClass:"spinner",style:this.style})},staticRenderFns:[],_scopeId:"data-v-39432f99",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}}}},isPromise=function(e){return!!e&&("object"==typeof e||"function"==typeof e)&&"function"==typeof e.then},isString=function(e){return"string"==typeof e},isObject=function(e){return e===Object(e)},pluginElPropName="$promiseBtnId",elementId=0,stringHTMLRenderer=function(e){return'\n "},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)])}},initSpinner=function(e,n,t,i){var r=document.createElement("SPAN");e.appendChild(r);var s={el:r,data:{show:!1},props:{parent:{type:Object,default:function(){return t.context}}},render:n.componentRenderer(n)};if(i){var o=n.stringHTMLRenderer(n),a=Vue.compile(o);s=Object.assign({},s,{data:Object.assign({},s.data,{options:n}),render:a.render,staticRenderFns:a.staticRenderFns})}return s},enableBtn=function(e,n){e.getAttribute("disabled")&&n.disableBtn&&e.removeAttribute("disabled"),e.classList.remove(n.btnLoadingClass)},disableBtn=function(e,n){n.disableBtn&&e.setAttribute("disabled","disabled"),e.classList.add(n.btnLoadingClass)},setupVuePromiseBtn=function(e){var n={listeners:{},init:function(t,i,r){var s=isObject(i.value),o=t[pluginElPropName]=elementId++,a=s?i.value:{},d=Object.assign({},e,a),p=r.data.on&&r.data.on[d.action]&&r.data.on[d.action]._withTask,u=isString(d.loader),l=t,c=null,f=!1,m=!1,b=function(){f&&m&&(c.show=!1,f=!1,m=!1,enableBtn(l,d))},h=function(){w=!1,d.showSpinner&&(m=!0,b())};if(n.listeners[o]={el:t,eventType:d.action,handler:p},t.removeEventListener(d.action,p),!p)throw new Error("Please, provide proper handler/action for promise-btn");if("submit"===d.action&&!(l=t.querySelector('[type="submit"]')))throw new Error("No submit button found");if(d.showSpinner){var v=initSpinner(l,d,r,u);c=new Vue(v)}var w=!1;n.listener=function(e){if(!d.disableBtn||!w){var n=p(e);isPromise(n)&&(w=!0,disableBtn(l,d),d.showSpinner&&(c.show=!0,setTimeout(function(){f=!0,b()},d.minTimeout)),n.then(h).catch(function(e){throw h(),e}))}}},bind:function(e,t,i){var r;(r=t.def).init.apply(r,arguments);var s=e[pluginElPropName],o=n.listeners[s].eventType;e.addEventListener(o,n.listener)},unbind:function(e,t){var i=e[pluginElPropName],r=n.listeners[i].eventType;e.removeEventListener(r,n.listener),delete n.listeners[i],delete e[pluginElPropName]}};return n},defaultOptions={btnLoadingClass:"loading",showSpinner:!0,action:"click",disableBtn:!0,stringHTMLRenderer:stringHTMLRenderer,componentRenderer:componentRenderer,minTimeout:400,spinnerHiddenClass:"hidden",autoHideSpinnerWrapper:!1,loader:Spinner};function install(e,n){var t=Object.assign({},defaultOptions,n);e.directive("promise-btn",setupVuePromiseBtn(t))}var main={install:install,Spinner:Spinner,setupVuePromiseBtn:setupVuePromiseBtn};module.exports=main; diff --git a/dist/vue-promise-btn.js b/dist/vue-promise-btn.js index 0b80a6e..118bcae 100644 --- a/dist/vue-promise-btn.js +++ b/dist/vue-promise-btn.js @@ -1 +1 @@ -import Vue from"vue";var Spinner={render:function(){var e=this.$createElement;return(this._self._c||e)("span",{staticClass:"spinner",style:this.style})},staticRenderFns:[],_scopeId:"data-v-39432f99",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}}}},isPromise=function(e){return!!e&&("object"==typeof e||"function"==typeof e)&&"function"==typeof e.then},isString=function(e){return"string"==typeof e},isObject=function(e){return e===Object(e)},pluginElPropName="$promiseBtnId",elementId=0,stringHTMLRenderer=function(e){return'\n "},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)])}},initSpinner=function(e,n,t,i){var r=document.createElement("SPAN");e.appendChild(r);var s={el:r,data:{show:!1},props:{parent:{type:Object,default:function(){return t.context}}}};return s=i?Object.assign({},s,{data:Object.assign({},s.data,{options:n}),template:n.stringHTMLRenderer(n)}):Object.assign({},s,{render:n.componentRenderer(n)})},enableBtn=function(e,n){e.getAttribute("disabled")&&n.disableBtn&&e.removeAttribute("disabled"),e.classList.remove(n.btnLoadingClass)},disableBtn=function(e,n){n.disableBtn&&e.setAttribute("disabled","disabled"),e.classList.add(n.btnLoadingClass)},setupVuePromiseBtn=function(e){var n={listeners:{},init:function(t,i,r){var s=isObject(i.value),o=t[pluginElPropName]=elementId++,a=s?i.value:{},p=Object.assign({},e,a),d=r.data.on&&r.data.on[p.action]&&r.data.on[p.action]._withTask,l=isString(p.loader),u=t,c=null,m=!1,f=!1,b=function(){m&&f&&(c.show=!1,m=!1,f=!1,enableBtn(u,p))},h=function(){g=!1,p.showSpinner&&(f=!0,b())};if(n.listeners[o]={el:t,eventType:p.action,handler:d},t.removeEventListener(p.action,d),!d)throw new Error("Please, provide proper handler/action for promise-btn");if("submit"===p.action&&!(u=t.querySelector('[type="submit"]')))throw new Error("No submit button found");if(p.showSpinner){var v=initSpinner(u,p,r,l);c=new Vue(v)}var g=!1;n.listener=function(e){if(!p.disableBtn||!g){var n=d(e);isPromise(n)&&(g=!0,disableBtn(u,p),p.showSpinner&&(c.show=!0,setTimeout(function(){m=!0,b()},p.minTimeout)),n.then(h).catch(function(e){throw h(),e}))}}},bind:function(e,t,i){var r;(r=t.def).init.apply(r,arguments);var s=e[pluginElPropName],o=n.listeners[s].eventType;e.addEventListener(o,n.listener)},unbind:function(e,t){var i=e[pluginElPropName],r=n.listeners[i].eventType;e.removeEventListener(r,n.listener),delete n.listeners[i],delete e[pluginElPropName]}};return n},defaultOptions={btnLoadingClass:"loading",showSpinner:!0,action:"click",disableBtn:!0,stringHTMLRenderer:stringHTMLRenderer,componentRenderer:componentRenderer,minTimeout:400,spinnerHiddenClass:"hidden",autoHideSpinnerWrapper:!1,loader:Spinner};function install(e,n){var t=Object.assign({},defaultOptions,n);e.directive("promise-btn",setupVuePromiseBtn(t))}var main={install:install,Spinner:Spinner,setupVuePromiseBtn:setupVuePromiseBtn};export default main; +import Vue from"vue";var Spinner={render:function(){var e=this.$createElement;return(this._self._c||e)("span",{staticClass:"spinner",style:this.style})},staticRenderFns:[],_scopeId:"data-v-39432f99",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}}}},isPromise=function(e){return!!e&&("object"==typeof e||"function"==typeof e)&&"function"==typeof e.then},isString=function(e){return"string"==typeof e},isObject=function(e){return e===Object(e)},pluginElPropName="$promiseBtnId",elementId=0,stringHTMLRenderer=function(e){return'\n "},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)])}},initSpinner=function(e,n,t,i){var r=document.createElement("SPAN");e.appendChild(r);var s={el:r,data:{show:!1},props:{parent:{type:Object,default:function(){return t.context}}},render:n.componentRenderer(n)};if(i){var o=n.stringHTMLRenderer(n),a=Vue.compile(o);s=Object.assign({},s,{data:Object.assign({},s.data,{options:n}),render:a.render,staticRenderFns:a.staticRenderFns})}return s},enableBtn=function(e,n){e.getAttribute("disabled")&&n.disableBtn&&e.removeAttribute("disabled"),e.classList.remove(n.btnLoadingClass)},disableBtn=function(e,n){n.disableBtn&&e.setAttribute("disabled","disabled"),e.classList.add(n.btnLoadingClass)},setupVuePromiseBtn=function(e){var n={listeners:{},init:function(t,i,r){var s=isObject(i.value),o=t[pluginElPropName]=elementId++,a=s?i.value:{},d=Object.assign({},e,a),p=r.data.on&&r.data.on[d.action]&&r.data.on[d.action]._withTask,l=isString(d.loader),u=t,c=null,f=!1,m=!1,b=function(){f&&m&&(c.show=!1,f=!1,m=!1,enableBtn(u,d))},h=function(){w=!1,d.showSpinner&&(m=!0,b())};if(n.listeners[o]={el:t,eventType:d.action,handler:p},t.removeEventListener(d.action,p),!p)throw new Error("Please, provide proper handler/action for promise-btn");if("submit"===d.action&&!(u=t.querySelector('[type="submit"]')))throw new Error("No submit button found");if(d.showSpinner){var v=initSpinner(u,d,r,l);c=new Vue(v)}var w=!1;n.listener=function(e){if(!d.disableBtn||!w){var n=p(e);isPromise(n)&&(w=!0,disableBtn(u,d),d.showSpinner&&(c.show=!0,setTimeout(function(){f=!0,b()},d.minTimeout)),n.then(h).catch(function(e){throw h(),e}))}}},bind:function(e,t,i){var r;(r=t.def).init.apply(r,arguments);var s=e[pluginElPropName],o=n.listeners[s].eventType;e.addEventListener(o,n.listener)},unbind:function(e,t){var i=e[pluginElPropName],r=n.listeners[i].eventType;e.removeEventListener(r,n.listener),delete n.listeners[i],delete e[pluginElPropName]}};return n},defaultOptions={btnLoadingClass:"loading",showSpinner:!0,action:"click",disableBtn:!0,stringHTMLRenderer:stringHTMLRenderer,componentRenderer:componentRenderer,minTimeout:400,spinnerHiddenClass:"hidden",autoHideSpinnerWrapper:!1,loader:Spinner};function install(e,n){var t=Object.assign({},defaultOptions,n);e.directive("promise-btn",setupVuePromiseBtn(t))}var main={install:install,Spinner:Spinner,setupVuePromiseBtn:setupVuePromiseBtn};export default main; diff --git a/dist/vue-promise-btn.umd.js b/dist/vue-promise-btn.umd.js index 2c4647b..b374606 100644 --- a/dist/vue-promise-btn.umd.js +++ b/dist/vue-promise-btn.umd.js @@ -1 +1 @@ -!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("vue")):"function"==typeof define&&define.amd?define(["vue"],n):e.VuePromiseBtn=n(e.Vue)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var n={render:function(){var e=this.$createElement;return(this._self._c||e)("span",{staticClass:"spinner",style:this.style})},staticRenderFns:[],_scopeId:"data-v-39432f99",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}}}},t=0,i=function(n){var i={listeners:{},init:function(r,s,o){var a,d=(a=s.value)===Object(a),p=r.$promiseBtnId=t++,u=d?s.value:{},l=Object.assign({},n,u),c=o.data.on&&o.data.on[l.action]&&o.data.on[l.action]._withTask,f=function(e){return"string"==typeof e}(l.loader),h=r,b=null,m=!1,v=!1,w=function(){m&&v&&(b.show=!1,m=!1,v=!1,function(e,n){e.getAttribute("disabled")&&n.disableBtn&&e.removeAttribute("disabled"),e.classList.remove(n.btnLoadingClass)}(h,l))},y=function(){S=!1,l.showSpinner&&(v=!0,w())};if(i.listeners[p]={el:r,eventType:l.action,handler:c},r.removeEventListener(l.action,c),!c)throw new Error("Please, provide proper handler/action for promise-btn");if("submit"===l.action&&!(h=r.querySelector('[type="submit"]')))throw new Error("No submit button found");if(l.showSpinner){var g=function(e,n,t,i){var r=document.createElement("SPAN");e.appendChild(r);var s={el:r,data:{show:!1},props:{parent:{type:Object,default:function(){return t.context}}}};return s=i?Object.assign({},s,{data:Object.assign({},s.data,{options:n}),template:n.stringHTMLRenderer(n)}):Object.assign({},s,{render:n.componentRenderer(n)})}(h,l,o,f);b=new e(g)}var S=!1;i.listener=function(e){if(!l.disableBtn||!S){var n,t=c(e);!(n=t)||"object"!=typeof n&&"function"!=typeof n||"function"!=typeof n.then||(S=!0,function(e,n){n.disableBtn&&e.setAttribute("disabled","disabled"),e.classList.add(n.btnLoadingClass)}(h,l),l.showSpinner&&(b.show=!0,setTimeout(function(){m=!0,w()},l.minTimeout)),t.then(y).catch(function(e){throw y(),e}))}}},bind:function(e,n,t){var r;(r=n.def).init.apply(r,arguments);var s=e.$promiseBtnId,o=i.listeners[s].eventType;e.addEventListener(o,i.listener)},unbind:function(e,n){var t=e.$promiseBtnId,r=i.listeners[t].eventType;e.removeEventListener(r,i.listener),delete i.listeners[t],delete e.$promiseBtnId}};return i},r={btnLoadingClass:"loading",showSpinner:!0,action:"click",disableBtn:!0,stringHTMLRenderer:function(e){return'\n "},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};return{install:function(e,n){var t=Object.assign({},r,n);e.directive("promise-btn",i(t))},Spinner:n,setupVuePromiseBtn:i}}); +!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("vue")):"function"==typeof define&&define.amd?define(["vue"],n):e.VuePromiseBtn=n(e.Vue)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var n={render:function(){var e=this.$createElement;return(this._self._c||e)("span",{staticClass:"spinner",style:this.style})},staticRenderFns:[],_scopeId:"data-v-39432f99",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}}}},t=0,i=function(n){var i={listeners:{},init:function(r,s,o){var a,d=(a=s.value)===Object(a),p=r.$promiseBtnId=t++,u=d?s.value:{},l=Object.assign({},n,u),c=o.data.on&&o.data.on[l.action]&&o.data.on[l.action]._withTask,f=function(e){return"string"==typeof e}(l.loader),h=r,b=null,m=!1,v=!1,w=function(){m&&v&&(b.show=!1,m=!1,v=!1,function(e,n){e.getAttribute("disabled")&&n.disableBtn&&e.removeAttribute("disabled"),e.classList.remove(n.btnLoadingClass)}(h,l))},y=function(){S=!1,l.showSpinner&&(v=!0,w())};if(i.listeners[p]={el:r,eventType:l.action,handler:c},r.removeEventListener(l.action,c),!c)throw new Error("Please, provide proper handler/action for promise-btn");if("submit"===l.action&&!(h=r.querySelector('[type="submit"]')))throw new Error("No submit button found");if(l.showSpinner){var g=function(n,t,i,r){var s=document.createElement("SPAN");n.appendChild(s);var o={el:s,data:{show:!1},props:{parent:{type:Object,default:function(){return i.context}}},render:t.componentRenderer(t)};if(r){var a=t.stringHTMLRenderer(t),d=e.compile(a);o=Object.assign({},o,{data:Object.assign({},o.data,{options:t}),render:d.render,staticRenderFns:d.staticRenderFns})}return o}(h,l,o,f);b=new e(g)}var S=!1;i.listener=function(e){if(!l.disableBtn||!S){var n,t=c(e);!(n=t)||"object"!=typeof n&&"function"!=typeof n||"function"!=typeof n.then||(S=!0,function(e,n){n.disableBtn&&e.setAttribute("disabled","disabled"),e.classList.add(n.btnLoadingClass)}(h,l),l.showSpinner&&(b.show=!0,setTimeout(function(){m=!0,w()},l.minTimeout)),t.then(y).catch(function(e){throw y(),e}))}}},bind:function(e,n,t){var r;(r=n.def).init.apply(r,arguments);var s=e.$promiseBtnId,o=i.listeners[s].eventType;e.addEventListener(o,i.listener)},unbind:function(e,n){var t=e.$promiseBtnId,r=i.listeners[t].eventType;e.removeEventListener(r,i.listener),delete i.listeners[t],delete e.$promiseBtnId}};return i},r={btnLoadingClass:"loading",showSpinner:!0,action:"click",disableBtn:!0,stringHTMLRenderer:function(e){return'\n "},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};return{install:function(e,n){var t=Object.assign({},r,n);e.directive("promise-btn",i(t))},Spinner:n,setupVuePromiseBtn:i}}); diff --git a/package.json b/package.json index 959e663..f172e44 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-promise-btn", - "version": "1.0.11", + "version": "1.1.0", "description": "Vue.js plugin that handles buttons asynchronous lock and show loading state indicator", "scripts": { "start": "npm run dev", diff --git a/src/directives/vue-promise-btn.directive.js b/src/directives/vue-promise-btn.directive.js index 7b36d2b..b1d5edc 100644 --- a/src/directives/vue-promise-btn.directive.js +++ b/src/directives/vue-promise-btn.directive.js @@ -43,22 +43,21 @@ const initSpinner = function (btnEl, options, vnode, isLoaderString) { type: Object, default: () => vnode.context } - } + }, + render: options.componentRenderer(options) } if (isLoaderString) { + const tpl = options.stringHTMLRenderer(options) + const res = Vue.compile(tpl) vueSpinnerOptions = { ...vueSpinnerOptions, data: { ...vueSpinnerOptions.data, options }, - template: options.stringHTMLRenderer(options) - } - } else { - vueSpinnerOptions = { - ...vueSpinnerOptions, - render: options.componentRenderer(options) + render: res.render, + staticRenderFns: res.staticRenderFns } }