UNPKG

vue3-ladda

Version:

A vue 3 component wrapper of Ladda button.

github.com/janwehner/vue3-ladda

janwehner/vue3-ladda

9 lines • 18.1 kB
1
2
3
4
5
6
7
8
9
!function(a,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):"object"==typeof exports?exports.VueLadda=t(require("vue")):a.VueLadda=t(a.vue)}(self,(function(a){return(()=>{var t={94:(a,t,d)=>{"use strict";d.r(t),d.d(t,{default:()=>o});var e=d(645),n=d.n(e)()((function(a){return a[1]}));n.push([a.id,'/*!\r\n * Ladda including the default theme.\r\n *//*!\r\n * Ladda\r\n * http://lab.hakim.se/ladda\r\n * MIT licensed\r\n *\r\n * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\r\n */@keyframes ladda-spinner-line-fade{0%,100%{opacity:0.22}1%{opacity:1}}.ladda-button{position:relative}.ladda-button .ladda-spinner{position:absolute;z-index:2;display:inline-block;width:32px;top:50%;margin-top:0;opacity:0;pointer-events:none}.ladda-button .ladda-label{position:relative;z-index:3}.ladda-button .ladda-progress{position:absolute;width:0;height:100%;left:0;top:0;background:rgba(0,0,0,0.2);display:none;transition:0.1s linear all !important}.ladda-button[data-loading] .ladda-progress{display:block}.ladda-button,.ladda-button .ladda-spinner,.ladda-button .ladda-label{transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important}.ladda-button[data-style=zoom-in],.ladda-button[data-style=zoom-in] .ladda-spinner,.ladda-button[data-style=zoom-in] .ladda-label,.ladda-button[data-style=zoom-out],.ladda-button[data-style=zoom-out] .ladda-spinner,.ladda-button[data-style=zoom-out] .ladda-label{transition:0.3s ease all !important}.ladda-button[data-style=expand-right] .ladda-spinner{right:-6px}.ladda-button[data-style=expand-right][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-right][data-size="xs"] .ladda-spinner{right:-12px}.ladda-button[data-style=expand-right][data-loading]{padding-right:56px}.ladda-button[data-style=expand-right][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-right][data-loading][data-size="s"],.ladda-button[data-style=expand-right][data-loading][data-size="xs"]{padding-right:40px}.ladda-button[data-style=expand-left] .ladda-spinner{left:26px}.ladda-button[data-style=expand-left][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-left][data-size="xs"] .ladda-spinner{left:4px}.ladda-button[data-style=expand-left][data-loading]{padding-left:56px}.ladda-button[data-style=expand-left][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-left][data-loading][data-size="s"],.ladda-button[data-style=expand-left][data-loading][data-size="xs"]{padding-left:40px}.ladda-button[data-style=expand-up]{overflow:hidden}.ladda-button[data-style=expand-up] .ladda-spinner{top:-32px;left:50%;margin-left:0}.ladda-button[data-style=expand-up][data-loading]{padding-top:54px}.ladda-button[data-style=expand-up][data-loading] .ladda-spinner{opacity:1;top:26px;margin-top:0}.ladda-button[data-style=expand-up][data-loading][data-size="s"],.ladda-button[data-style=expand-up][data-loading][data-size="xs"]{padding-top:32px}.ladda-button[data-style=expand-up][data-loading][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-up][data-loading][data-size="xs"] .ladda-spinner{top:4px}.ladda-button[data-style=expand-down]{overflow:hidden}.ladda-button[data-style=expand-down] .ladda-spinner{top:62px;left:50%;margin-left:0}.ladda-button[data-style=expand-down][data-size="s"] .ladda-spinner,.ladda-button[data-style=expand-down][data-size="xs"] .ladda-spinner{top:40px}.ladda-button[data-style=expand-down][data-loading]{padding-bottom:54px}.ladda-button[data-style=expand-down][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=expand-down][data-loading][data-size="s"],.ladda-button[data-style=expand-down][data-loading][data-size="xs"]{padding-bottom:32px}.ladda-button[data-style=slide-left]{overflow:hidden}.ladda-button[data-style=slide-left] .ladda-label{position:relative}.ladda-button[data-style=slide-left] .ladda-spinner{left:100%;margin-left:0}.ladda-button[data-style=slide-left][data-loading] .ladda-label{opacity:0;left:-100%}.ladda-button[data-style=slide-left][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-right]{overflow:hidden}.ladda-button[data-style=slide-right] .ladda-label{position:relative}.ladda-button[data-style=slide-right] .ladda-spinner{right:100%;margin-left:0;left:16px}[dir="rtl"] .ladda-button[data-style=slide-right] .ladda-spinner{right:auto}.ladda-button[data-style=slide-right][data-loading] .ladda-label{opacity:0;left:100%}.ladda-button[data-style=slide-right][data-loading] .ladda-spinner{opacity:1;left:50%}.ladda-button[data-style=slide-up]{overflow:hidden}.ladda-button[data-style=slide-up] .ladda-label{position:relative}.ladda-button[data-style=slide-up] .ladda-spinner{left:50%;margin-left:0;margin-top:1em}.ladda-button[data-style=slide-up][data-loading] .ladda-label{opacity:0;top:-1em}.ladda-button[data-style=slide-up][data-loading] .ladda-spinner{opacity:1;margin-top:0}.ladda-button[data-style=slide-down]{overflow:hidden}.ladda-button[data-style=slide-down] .ladda-label{position:relative}.ladda-button[data-style=slide-down] .ladda-spinner{left:50%;margin-left:0;margin-top:-2em}.ladda-button[data-style=slide-down][data-loading] .ladda-label{opacity:0;top:1em}.ladda-button[data-style=slide-down][data-loading] .ladda-spinner{opacity:1;margin-top:0}.ladda-button[data-style=zoom-out]{overflow:hidden}.ladda-button[data-style=zoom-out] .ladda-spinner{left:50%;margin-left:32px;transform:scale(2.5)}.ladda-button[data-style=zoom-out] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-out][data-loading] .ladda-label{opacity:0;transform:scale(0.5)}.ladda-button[data-style=zoom-out][data-loading] .ladda-spinner{opacity:1;margin-left:0;transform:none}.ladda-button[data-style=zoom-in]{overflow:hidden}.ladda-button[data-style=zoom-in] .ladda-spinner{left:50%;margin-left:-16px;transform:scale(0.2)}.ladda-button[data-style=zoom-in] .ladda-label{position:relative;display:inline-block}.ladda-button[data-style=zoom-in][data-loading] .ladda-label{opacity:0;transform:scale(2.2)}.ladda-button[data-style=zoom-in][data-loading] .ladda-spinner{opacity:1;margin-left:0;transform:none}.ladda-button[data-style=contract]{overflow:hidden;width:100px}.ladda-button[data-style=contract] .ladda-spinner{left:50%;margin-left:0}.ladda-button[data-style=contract][data-loading]{border-radius:50%;width:52px}.ladda-button[data-style=contract][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract][data-loading] .ladda-spinner{opacity:1}.ladda-button[data-style=contract-overlay]{overflow:hidden;width:100px;box-shadow:0px 0px 0px 2000px rgba(0,0,0,0)}.ladda-button[data-style=contract-overlay] .ladda-spinner{left:50%;margin-left:0}.ladda-button[data-style=contract-overlay][data-loading]{border-radius:50%;width:52px;box-shadow:0px 0px 0px 2000px rgba(0,0,0,0.8)}.ladda-button[data-style=contract-overlay][data-loading] .ladda-label{opacity:0}.ladda-button[data-style=contract-overlay][data-loading] .ladda-spinner{opacity:1}[dir="rtl"] .ladda-spinner>div{left:25% !important}.ladda-button{background:#666;border:0;padding:14px 18px;font-size:18px;cursor:pointer;color:#fff;border-radius:2px;border:1px solid transparent;-webkit-appearance:none;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ladda-button:hover{border-color:rgba(0,0,0,0.07);background-color:#888}.ladda-button[data-color=green]{background:#2aca76}.ladda-button[data-color=green]:hover{background-color:#38d683}.ladda-button[data-color=blue]{background:#53b5e6}.ladda-button[data-color=blue]:hover{background-color:#69bfe9}.ladda-button[data-color=red]{background:#ea8557}.ladda-button[data-color=red]:hover{background-color:#ed956e}.ladda-button[data-color=purple]{background:#9973C2}.ladda-button[data-color=purple]:hover{background-color:#a685ca}.ladda-button[data-color=mint]{background:#16a085}.ladda-button[data-color=mint]:hover{background-color:#19b698}.ladda-button[disabled],.ladda-button[data-loading]{border-color:rgba(0,0,0,0.07)}.ladda-button[disabled],.ladda-button[disabled]:hover,.ladda-button[data-loading],.ladda-button[data-loading]:hover{cursor:default;background-color:#999}.ladda-button[data-size=xs]{padding:4px 8px}.ladda-button[data-size=xs] .ladda-label{font-size:0.7em}.ladda-button[data-size=s]{padding:6px 10px}.ladda-button[data-size=s] .ladda-label{font-size:0.9em}.ladda-button[data-size=l] .ladda-label{font-size:1.2em}.ladda-button[data-size=xl] .ladda-label{font-size:1.5em}\n',""]);const o=n},645:a=>{"use strict";a.exports=function(a){var t=[];return t.toString=function(){return this.map((function(t){var d=a(t);return t[2]?"@media ".concat(t[2]," {").concat(d,"}"):d})).join("")},t.i=function(a,d,e){"string"==typeof a&&(a=[[null,a,""]]);var n={};if(e)for(var o=0;o<this.length;o++){var l=this[o][0];null!=l&&(n[l]=!0)}for(var i=0;i<a.length;i++){var r=[].concat(a[i]);e&&n[r[0]]||(d&&(r[2]?r[2]="".concat(d," and ").concat(r[2]):r[2]=d),t.push(r))}},t}},307:(a,t,d)=>{var e=d(94);e.__esModule&&(e=e.default),"string"==typeof e&&(e=[[a.id,e,""]]),e.locals&&(a.exports=e.locals);(0,d(346).Z)("519d3230",e,!1,{})},346:(a,t,d)=>{"use strict";function e(a,t){for(var d=[],e={},n=0;n<t.length;n++){var o=t[n],l=o[0],i={id:a+":"+n,css:o[1],media:o[2],sourceMap:o[3]};e[l]?e[l].parts.push(i):d.push(e[l]={id:l,parts:[i]})}return d}d.d(t,{Z:()=>f});var n="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!n)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var o={},l=n&&(document.head||document.getElementsByTagName("head")[0]),i=null,r=0,s=!1,u=function(){},p=null,c="data-vue-ssr-id",b="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function f(a,t,d,n){s=d,p=n||{};var l=e(a,t);return h(l),function(t){for(var d=[],n=0;n<l.length;n++){var i=l[n];(r=o[i.id]).refs--,d.push(r)}t?h(l=e(a,t)):l=[];for(n=0;n<d.length;n++){var r;if(0===(r=d[n]).refs){for(var s=0;s<r.parts.length;s++)r.parts[s]();delete o[r.id]}}}}function h(a){for(var t=0;t<a.length;t++){var d=a[t],e=o[d.id];if(e){e.refs++;for(var n=0;n<e.parts.length;n++)e.parts[n](d.parts[n]);for(;n<d.parts.length;n++)e.parts.push(y(d.parts[n]));e.parts.length>d.parts.length&&(e.parts.length=d.parts.length)}else{var l=[];for(n=0;n<d.parts.length;n++)l.push(y(d.parts[n]));o[d.id]={id:d.id,refs:1,parts:l}}}}function g(){var a=document.createElement("style");return a.type="text/css",l.appendChild(a),a}function y(a){var t,d,e=document.querySelector("style["+c+'~="'+a.id+'"]');if(e){if(s)return u;e.parentNode.removeChild(e)}if(b){var n=r++;e=i||(i=g()),t=v.bind(null,e,n,!1),d=v.bind(null,e,n,!0)}else e=g(),t=w.bind(null,e),d=function(){e.parentNode.removeChild(e)};return t(a),function(e){if(e){if(e.css===a.css&&e.media===a.media&&e.sourceMap===a.sourceMap)return;t(a=e)}else d()}}var m,x=(m=[],function(a,t){return m[a]=t,m.filter(Boolean).join("\n")});function v(a,t,d,e){var n=d?"":e.css;if(a.styleSheet)a.styleSheet.cssText=x(t,n);else{var o=document.createTextNode(n),l=a.childNodes;l[t]&&a.removeChild(l[t]),l.length?a.insertBefore(o,l[t]):a.appendChild(o)}}function w(a,t){var d=t.css,e=t.media,n=t.sourceMap;if(e&&a.setAttribute("media",e),p.ssrId&&a.setAttribute(c,t.id),n&&(d+="\n/*# sourceURL="+n.sources[0]+" */",d+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */"),a.styleSheet)a.styleSheet.cssText=d;else{for(;a.firstChild;)a.removeChild(a.firstChild);a.appendChild(document.createTextNode(d))}}},103:t=>{"use strict";t.exports=a}},d={};function e(a){var n=d[a];if(void 0!==n)return n.exports;var o=d[a]={id:a,exports:{}};return t[a](o,o.exports,e),o.exports}e.n=a=>{var t=a&&a.__esModule?()=>a.default:()=>a;return e.d(t,{a:t}),t},e.d=(a,t)=>{for(var d in t)e.o(t,d)&&!e.o(a,d)&&Object.defineProperty(a,d,{enumerable:!0,get:t[d]})},e.o=(a,t)=>Object.prototype.hasOwnProperty.call(a,t),e.r=a=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(a,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(a,"__esModule",{value:!0})};var n={};return(()=>{"use strict";e.r(n),e.d(n,{default:()=>f});var a=e(103),t=(0,a.createVNode)("span",{class:"ladda-label"},"Submit",-1);var d=function(){return(d=Object.assign||function(a){for(var t,d=1,e=arguments.length;d<e;d++)for(var n in t=arguments[d])Object.prototype.hasOwnProperty.call(t,n)&&(a[n]=t[n]);return a}).apply(this,arguments)},o={lines:12,length:7,width:5,radius:10,scale:1,corners:1,color:"#000",fadeColor:"transparent",animation:"spinner-line-fade-default",rotate:0,direction:1,speed:1,zIndex:2e9,className:"spinner",top:"50%",left:"50%",shadow:"0 0 1px transparent",position:"absolute"},l=function(){function a(a){void 0===a&&(a={}),this.opts=d(d({},o),a)}return a.prototype.spin=function(a){return this.stop(),this.el=document.createElement("div"),this.el.className=this.opts.className,this.el.setAttribute("role","progressbar"),i(this.el,{position:this.opts.position,width:0,zIndex:this.opts.zIndex,left:this.opts.left,top:this.opts.top,transform:"scale("+this.opts.scale+")"}),a&&a.insertBefore(this.el,a.firstChild||null),function(a,t){var d=Math.round(t.corners*t.width*500)/1e3+"px",e="none";!0===t.shadow?e="0 2px 4px #000":"string"==typeof t.shadow&&(e=t.shadow);for(var n=function(a){for(var t=/^\s*([a-zA-Z]+\s+)?(-?\d+(\.\d+)?)([a-zA-Z]*)\s+(-?\d+(\.\d+)?)([a-zA-Z]*)(.*)$/,d=[],e=0,n=a.split(",");e<n.length;e++){var o=n[e].match(t);if(null!==o){var l=+o[2],i=+o[5],r=o[4],s=o[7];0!==l||r||(r=s),0!==i||s||(s=r),r===s&&d.push({prefix:o[1]||"",x:l,y:i,xUnits:r,yUnits:s,end:o[8]})}}return d}(e),o=0;o<t.lines;o++){var l=~~(360/t.lines*o+t.rotate),u=i(document.createElement("div"),{position:"absolute",top:-t.width/2+"px",width:t.length+t.width+"px",height:t.width+"px",background:r(t.fadeColor,o),borderRadius:d,transformOrigin:"left",transform:"rotate("+l+"deg) translateX("+t.radius+"px)"}),p=o*t.direction/t.lines/t.speed;p-=1/t.speed;var c=i(document.createElement("div"),{width:"100%",height:"100%",background:r(t.color,o),borderRadius:d,boxShadow:s(n,l),animation:1/t.speed+"s linear "+p+"s infinite "+t.animation});u.appendChild(c),a.appendChild(u)}}(this.el,this.opts),this},a.prototype.stop=function(){return this.el&&("undefined"!=typeof requestAnimationFrame?cancelAnimationFrame(this.animateId):clearTimeout(this.animateId),this.el.parentNode&&this.el.parentNode.removeChild(this.el),this.el=void 0),this},a}();function i(a,t){for(var d in t)a.style[d]=t[d];return a}function r(a,t){return"string"==typeof a?a:a[t%a.length]}function s(a,t){for(var d=[],e=0,n=a;e<n.length;e++){var o=n[e],l=u(o.x,o.y,t);d.push(o.prefix+l[0]+o.xUnits+" "+l[1]+o.yUnits+o.end)}return d.join(", ")}function u(a,t,d){var e=d*Math.PI/180,n=Math.sin(e),o=Math.cos(e);return[Math.round(1e3*(a*o+t*n))/1e3,Math.round(1e3*(-a*n+t*o))/1e3]} /*! * Ladda * http://lab.hakim.se/ladda * MIT licensed * * Copyright (C) 2018 Hakim El Hattab, http://hakim.se */ var p=[];function c(a){if(void 0!==a){if(a.classList.contains("ladda-button")||a.classList.add("ladda-button"),a.hasAttribute("data-style")||a.setAttribute("data-style","expand-right"),!a.querySelector(".ladda-label")){var t=document.createElement("span");t.className="ladda-label",d=a,e=t,(n=document.createRange()).selectNodeContents(d),n.surroundContents(e),d.appendChild(e)}var d,e,n,o,i,r=a.querySelector(".ladda-spinner");r||((r=document.createElement("span")).className="ladda-spinner"),a.appendChild(r);var s={start:function(){return o||(o=function(a){var t,d,e=a.offsetHeight;0===e&&(e=parseFloat(window.getComputedStyle(a).height));e>32&&(e*=.8);a.hasAttribute("data-spinner-size")&&(e=parseInt(a.getAttribute("data-spinner-size"),10));a.hasAttribute("data-spinner-color")&&(t=a.getAttribute("data-spinner-color"));a.hasAttribute("data-spinner-lines")&&(d=parseInt(a.getAttribute("data-spinner-lines"),10));var n=.2*e;return new l({color:t||"#fff",lines:d||12,radius:n,length:.6*n,width:n<7?2:3,animation:"ladda-spinner-line-fade",zIndex:"auto",top:"auto",left:"auto",className:""})}(a)),a.disabled=!0,a.setAttribute("data-loading",""),clearTimeout(i),o.spin(r),this.setProgress(0),this},startAfter:function(a){return clearTimeout(i),i=setTimeout((function(){s.start()}),a),this},stop:function(){return s.isLoading()&&(a.disabled=!1,a.removeAttribute("data-loading")),clearTimeout(i),o&&(i=setTimeout((function(){o.stop()}),1e3)),this},toggle:function(){return this.isLoading()?this.stop():this.start()},setProgress:function(t){t=Math.max(Math.min(t,1),0);var d=a.querySelector(".ladda-progress");0===t&&d&&d.parentNode?d.parentNode.removeChild(d):(d||((d=document.createElement("div")).className="ladda-progress",a.appendChild(d)),d.style.width=(t||0)*a.offsetWidth+"px")},isLoading:function(){return a.hasAttribute("data-loading")},remove:function(){clearTimeout(i),a.disabled=!1,a.removeAttribute("data-loading"),o&&(o.stop(),o=null),p.splice(p.indexOf(s),1)}};return p.push(s),s}console.warn("Ladda button target must be defined.")}const b={name:"VueLadda",emits:["click"],props:{buttonClass:{type:[String,Object],default:"ladda-button"},dataStyle:{type:String,default:"expand-left"},loading:{type:Boolean,required:!0},progress:{validator:function(a){return a>=0&&a<=1},default:0}},watch:{loading:function(a){a?this.ladda.start():this.ladda.stop()},progress:function(a){this.ladda.setProgress(a)}},methods:{handleClick:function(a){this.$emit("click",a)}},mounted:function(){this.ladda=c(this.$refs.ladda),this.loading?this.ladda.start():this.ladda.stop()},beforeUnmount:function(){this.ladda.remove(),delete this.ladda}};e(307);b.render=function(d,e,n,o,l,i){return(0,a.openBlock)(),(0,a.createBlock)("button",{class:n.buttonClass,ref:"ladda","data-style":n.dataStyle,onClick:e[1]||(e[1]=function(){return i.handleClick&&i.handleClick.apply(i,arguments)})},[(0,a.renderSlot)(d.$slots,"default",{},(function(){return[t]}))],10,["data-style"])};const f=b})(),n})()}));