vue3-ladda/dist/vue-ladda.js

A vue 3 component wrapper of Ladda button.

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define(["vue"],e):"object"==typeof exports?exports.VueLadda=e(require("vue")):t.VueLadda=e(t.vue)}(self,(function(t){return(()=>{"use strict";var e={103:e=>{e.exports=t}},n={};function a(t){var r=n[t];if(void 0!==r)return r.exports;var i=n[t]={exports:{}};return e[t](i,i.exports,a),i.exports}a.d=(t,e)=>{for(var n in e)a.o(e,n)&&!a.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},a.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),a.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var r={};return(()=>{a.r(r),a.d(r,{default:()=>f});var t=a(103),e=(0,t.createVNode)("span",{class:"ladda-label"},"Submit",-1);var n=function(){return(n=Object.assign||function(t){for(var e,n=1,a=arguments.length;n<a;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t}).apply(this,arguments)},i={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"},o=function(){function t(t){void 0===t&&(t={}),this.opts=n(n({},i),t)}return t.prototype.spin=function(t){return this.stop(),this.el=document.createElement("div"),this.el.className=this.opts.className,this.el.setAttribute("role","progressbar"),s(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+")"}),t&&t.insertBefore(this.el,t.firstChild||null),function(t,e){var n=Math.round(e.corners*e.width*500)/1e3+"px",a="none";!0===e.shadow?a="0 2px 4px #000":"string"==typeof e.shadow&&(a=e.shadow);for(var r=function(t){for(var e=/^\s*([a-zA-Z]+\s+)?(-?\d+(\.\d+)?)([a-zA-Z]*)\s+(-?\d+(\.\d+)?)([a-zA-Z]*)(.*)$/,n=[],a=0,r=t.split(",");a<r.length;a++){var i=r[a].match(e);if(null!==i){var o=+i[2],s=+i[5],d=i[4],l=i[7];0!==o||d||(d=l),0!==s||l||(l=d),d===l&&n.push({prefix:i[1]||"",x:o,y:s,xUnits:d,yUnits:l,end:i[8]})}}return n}(a),i=0;i<e.lines;i++){var o=~~(360/e.lines*i+e.rotate),u=s(document.createElement("div"),{position:"absolute",top:-e.width/2+"px",width:e.length+e.width+"px",height:e.width+"px",background:d(e.fadeColor,i),borderRadius:n,transformOrigin:"left",transform:"rotate("+o+"deg) translateX("+e.radius+"px)"}),p=i*e.direction/e.lines/e.speed;p-=1/e.speed;var c=s(document.createElement("div"),{width:"100%",height:"100%",background:d(e.color,i),borderRadius:n,boxShadow:l(r,o),animation:1/e.speed+"s linear "+p+"s infinite "+e.animation});u.appendChild(c),t.appendChild(u)}}(this.el,this.opts),this},t.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},t}();function s(t,e){for(var n in e)t.style[n]=e[n];return t}function d(t,e){return"string"==typeof t?t:t[e%t.length]}function l(t,e){for(var n=[],a=0,r=t;a<r.length;a++){var i=r[a],o=u(i.x,i.y,e);n.push(i.prefix+o[0]+i.xUnits+" "+o[1]+i.yUnits+i.end)}return n.join(", ")}function u(t,e,n){var a=n*Math.PI/180,r=Math.sin(a),i=Math.cos(a);return[Math.round(1e3*(t*i+e*r))/1e3,Math.round(1e3*(-t*r+e*i))/1e3]}
/*!
 * Ladda
 * http://lab.hakim.se/ladda
 * MIT licensed
 *
 * Copyright (C) 2018 Hakim El Hattab, http://hakim.se
 */
var p=[];function c(t){if(void 0!==t){if(t.classList.contains("ladda-button")||t.classList.add("ladda-button"),t.hasAttribute("data-style")||t.setAttribute("data-style","expand-right"),!t.querySelector(".ladda-label")){var e=document.createElement("span");e.className="ladda-label",n=t,a=e,(r=document.createRange()).selectNodeContents(n),r.surroundContents(a),n.appendChild(a)}var n,a,r,i,s,d=t.querySelector(".ladda-spinner");d||((d=document.createElement("span")).className="ladda-spinner"),t.appendChild(d);var l={start:function(){return i||(i=function(t){var e,n,a=t.offsetHeight;0===a&&(a=parseFloat(window.getComputedStyle(t).height));a>32&&(a*=.8);t.hasAttribute("data-spinner-size")&&(a=parseInt(t.getAttribute("data-spinner-size"),10));t.hasAttribute("data-spinner-color")&&(e=t.getAttribute("data-spinner-color"));t.hasAttribute("data-spinner-lines")&&(n=parseInt(t.getAttribute("data-spinner-lines"),10));var r=.2*a;return new o({color:e||"#fff",lines:n||12,radius:r,length:.6*r,width:r<7?2:3,animation:"ladda-spinner-line-fade",zIndex:"auto",top:"auto",left:"auto",className:""})}(t)),t.disabled=!0,t.setAttribute("data-loading",""),clearTimeout(s),i.spin(d),this.setProgress(0),this},startAfter:function(t){return clearTimeout(s),s=setTimeout((function(){l.start()}),t),this},stop:function(){return l.isLoading()&&(t.disabled=!1,t.removeAttribute("data-loading")),clearTimeout(s),i&&(s=setTimeout((function(){i.stop()}),1e3)),this},toggle:function(){return this.isLoading()?this.stop():this.start()},setProgress:function(e){e=Math.max(Math.min(e,1),0);var n=t.querySelector(".ladda-progress");0===e&&n&&n.parentNode?n.parentNode.removeChild(n):(n||((n=document.createElement("div")).className="ladda-progress",t.appendChild(n)),n.style.width=(e||0)*t.offsetWidth+"px")},isLoading:function(){return t.hasAttribute("data-loading")},remove:function(){clearTimeout(s),t.disabled=!1,t.removeAttribute("data-loading"),i&&(i.stop(),i=null),p.splice(p.indexOf(l),1)}};return p.push(l),l}console.warn("Ladda button target must be defined.")}const h={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(t){return t>=0&&t<=1},default:0}},watch:{loading:function(t){t?this.ladda.start():this.ladda.stop()},progress:function(t){this.ladda.setProgress(t)}},methods:{handleClick:function(t){this.$emit("click",t)}},mounted:function(){this.ladda=c(this.$refs.ladda),this.loading?this.ladda.start():this.ladda.stop()},beforeUnmount:function(){this.ladda.remove(),delete this.ladda},render:function(n,a,r,i,o,s){return(0,t.openBlock)(),(0,t.createBlock)("button",{class:r.buttonClass,ref:"ladda","data-style":r.dataStyle,onClick:a[1]||(a[1]=function(){return s.handleClick&&s.handleClick.apply(s,arguments)})},[(0,t.renderSlot)(n.$slots,"default",{},(function(){return[e]}))],10,["data-style"])}},f=h})(),r})()}));