@vue-interface/btn-activity 2.0.0-beta.0 → 2.0.0-beta.2

package/dist/btn-activity.css

@@ -1 +1 @@
-.activity-indicator-label{margin-top:.75rem;text-align:center}.activity-indicator-xs{font-size:.5rem}.activity-indicator-sm{font-size:.75rem}.activity-indicator-md{font-size:1rem}.activity-indicator-lg{font-size:1.25rem}.activity-indicator-xl{font-size:1.75rem}.activity-indicator-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:auto}.activity-indicator-absolute{position:absolute;width:100%;height:100%;top:0;left:0}.activity-indicator-chase{width:2.5em;height:2.5em;position:relative;-webkit-animation:activity-indicator-chase 2.5s infinite linear both;animation:activity-indicator-chase 2.5s infinite linear both}.activity-indicator-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;-webkit-animation:activity-indicator-chase-dot 2s infinite ease-in-out both;animation:activity-indicator-chase-dot 2s infinite ease-in-out both}.activity-indicator-chase-dot:before{content:"";display:block;width:25%;height:25%;background-color:currentColor;border-radius:100%;-webkit-animation:activity-indicator-chase-dot-before 2s infinite ease-in-out both;animation:activity-indicator-chase-dot-before 2s infinite ease-in-out both}.activity-indicator-chase-dot:nth-child(1){-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.activity-indicator-chase-dot:nth-child(2){-webkit-animation-delay:-1s;animation-delay:-1s}.activity-indicator-chase-dot:nth-child(3){-webkit-animation-delay:-.9s;animation-delay:-.9s}.activity-indicator-chase-dot:nth-child(4){-webkit-animation-delay:-.8s;animation-delay:-.8s}.activity-indicator-chase-dot:nth-child(5){-webkit-animation-delay:-.7s;animation-delay:-.7s}.activity-indicator-chase-dot:nth-child(6){-webkit-animation-delay:-.6s;animation-delay:-.6s}.activity-indicator-chase-dot:nth-child(1):before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.activity-indicator-chase-dot:nth-child(2):before{-webkit-animation-delay:-1s;animation-delay:-1s}.activity-indicator-chase-dot:nth-child(3):before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.activity-indicator-chase-dot:nth-child(4):before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.activity-indicator-chase-dot:nth-child(5):before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.activity-indicator-chase-dot:nth-child(6):before{-webkit-animation-delay:-.6s;animation-delay:-.6s}@-webkit-keyframes activity-indicator-chase{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes activity-indicator-chase{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes activity-indicator-chase-dot{80%,to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes activity-indicator-chase-dot{80%,to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes activity-indicator-chase-dot-before{50%{-webkit-transform:scale(.4);transform:scale(.4)}to,0%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes activity-indicator-chase-dot-before{50%{-webkit-transform:scale(.4);transform:scale(.4)}to,0%{-webkit-transform:scale(1);transform:scale(1)}}.activity-indicator-circle-fade{width:2.5em;height:2.5em;position:relative}.activity-indicator-circle-fade .activity-indicator-circle{width:100%;height:100%;position:absolute;left:0;top:0}.activity-indicator-circle-fade .activity-indicator-circle:before{content:"";display:block;margin:0 auto;width:15%;height:15%;background-color:#333;border-radius:100%;-webkit-animation:activity-indicator-circle-fade 1.2s infinite ease-in-out both;animation:activity-indicator-circle-fade 1.2s infinite ease-in-out both}.activity-indicator-circle-fade .activity-indicator-circle2{-webkit-transform:rotate(30deg);transform:rotate(30deg)}.activity-indicator-circle-fade .activity-indicator-circle3{-webkit-transform:rotate(60deg);transform:rotate(60deg)}.activity-indicator-circle-fade .activity-indicator-circle4{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.activity-indicator-circle-fade .activity-indicator-circle5{-webkit-transform:rotate(120deg);transform:rotate(120deg)}.activity-indicator-circle-fade .activity-indicator-circle6{-webkit-transform:rotate(150deg);transform:rotate(150deg)}.activity-indicator-circle-fade .activity-indicator-circle7{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.activity-indicator-circle-fade .activity-indicator-circle8{-webkit-transform:rotate(210deg);transform:rotate(210deg)}.activity-indicator-circle-fade .activity-indicator-circle9{-webkit-transform:rotate(240deg);transform:rotate(240deg)}.activity-indicator-circle-fade .activity-indicator-circle10{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.activity-indicator-circle-fade .activity-indicator-circle11{-webkit-transform:rotate(300deg);transform:rotate(300deg)}.activity-indicator-circle-fade .activity-indicator-circle12{-webkit-transform:rotate(330deg);transform:rotate(330deg)}.activity-indicator-circle-fade .activity-indicator-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.activity-indicator-circle-fade .activity-indicator-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.activity-indicator-circle-fade .activity-indicator-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.activity-indicator-circle-fade .activity-indicator-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.activity-indicator-circle-fade .activity-indicator-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.activity-indicator-circle-fade .activity-indicator-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.activity-indicator-circle-fade .activity-indicator-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.activity-indicator-circle-fade .activity-indicator-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.activity-indicator-circle-fade .activity-indicator-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.activity-indicator-circle-fade .activity-indicator-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.activity-indicator-circle-fade .activity-indicator-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes activity-indicator-circle-fade{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes activity-indicator-circle-fade{0%,39%,to{opacity:0}40%{opacity:1}}.activity-indicator-circle-orbit{width:2.5em;height:2.5em;position:relative;text-align:center;-webkit-animation:activity-indicator-circle-orbit-rotate 2s infinite linear;animation:activity-indicator-circle-orbit-rotate 2s infinite linear}.activity-indicator-circle-orbit-dot1,.activity-indicator-circle-orbit-dot2{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:currentColor;border-radius:100%;-webkit-animation:activity-indicator-circle-orbit-bounce 2s infinite ease-in-out;animation:activity-indicator-circle-orbit-bounce 2s infinite ease-in-out}.activity-indicator-circle-orbit-dot2{top:auto;bottom:0;-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes activity-indicator-circle-orbit-rotate{to{-webkit-transform:rotate(360deg)}}@keyframes activity-indicator-circle-orbit-rotate{to{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}@-webkit-keyframes activity-indicator-circle-orbit-bounce{0%,to{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes activity-indicator-circle-orbit-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.activity-indicator-circle-trail{width:2.5em;height:2.5em;position:relative}.activity-indicator-circle-trail .activity-indicator-child{width:100%;height:100%;position:absolute;left:0;top:0}.activity-indicator-circle-trail .activity-indicator-child:before{content:"";display:block;margin:0 auto;width:.4em;height:.4em;background-color:currentColor;border-radius:100%;-webkit-animation:activity-indicator-circle-trail 1.2s infinite ease-in-out both;animation:activity-indicator-circle-trail 1.2s infinite ease-in-out both}.activity-indicator-circle-trail .activity-indicator-circle-trail2{-webkit-transform:rotate(30deg);transform:rotate(30deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail3{-webkit-transform:rotate(60deg);transform:rotate(60deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail4{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail5{-webkit-transform:rotate(120deg);transform:rotate(120deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail6{-webkit-transform:rotate(150deg);transform:rotate(150deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail7{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail8{-webkit-transform:rotate(210deg);transform:rotate(210deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail9{-webkit-transform:rotate(240deg);transform:rotate(240deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail10{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail11{-webkit-transform:rotate(300deg);transform:rotate(300deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail12{-webkit-transform:rotate(330deg);transform:rotate(330deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.activity-indicator-circle-trail .activity-indicator-circle-trail3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.activity-indicator-circle-trail .activity-indicator-circle-trail4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.activity-indicator-circle-trail .activity-indicator-circle-trail5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.activity-indicator-circle-trail .activity-indicator-circle-trail6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.activity-indicator-circle-trail .activity-indicator-circle-trail7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.activity-indicator-circle-trail .activity-indicator-circle-trail8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.activity-indicator-circle-trail .activity-indicator-circle-trail9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.activity-indicator-circle-trail .activity-indicator-circle-trail10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.activity-indicator-circle-trail .activity-indicator-circle-trail11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.activity-indicator-circle-trail .activity-indicator-circle-trail12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes activity-indicator-circle-trail{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes activity-indicator-circle-trail{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.activity-indicator-dots{font-size:1em;position:relative}.activity-indicator-dots>div{width:1em;height:1em;background-color:currentColor;border-radius:100%;display:inline-block;-webkit-animation:activity-indicator-dots 1.4s infinite ease-in-out both;animation:activity-indicator-dots 1.4s infinite ease-in-out both}.activity-indicator-dots>div:not(:last-child){margin-right:.2em}.activity-indicator-dots .activity-indicator-dots-bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.activity-indicator-dots .activity-indicator-dots-bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes activity-indicator-dots{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes activity-indicator-dots{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.activity-indicator-double-pulse{width:2.5em;height:2.5em;position:relative}.activity-indicator-double-pulse-bounce1,.activity-indicator-double-pulse-bounce2{width:100%;height:100%;border-radius:50%;background-color:currentColor;opacity:.66;position:absolute;top:0;left:0;-webkit-animation:activity-indicator-double-pulse 2s infinite ease-in-out;animation:activity-indicator-double-pulse 2s infinite ease-in-out}.activity-indicator-double-pulse-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes activity-indicator-double-pulse{0%,to{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes activity-indicator-double-pulse{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.activity-indicator-facebook{height:4em}.activity-indicator-facebook>div{background-color:#333;height:100%;width:6px;margin-right:2px;display:inline-block;-webkit-animation:activity-indicator-facebook 1.2s infinite ease-in-out;animation:activity-indicator-facebook 1.2s infinite ease-in-out}.activity-indicator-facebook .activity-indicator-facebook-rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.activity-indicator-facebook .activity-indicator-facebook-rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.activity-indicator-facebook .activity-indicator-facebook-rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.activity-indicator-facebook .activity-indicator-facebook-rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes activity-indicator-facebook{0%,40%,to{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes activity-indicator-facebook{0%,40%,to{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.activity-indicator-grid{width:2.5em;height:2.5em}.activity-indicator-grid .activity-indicator-grid{width:33%;height:33%;background-color:currentColor;float:left;-webkit-animation:activity-indicator-grid 1.3s infinite ease-in-out;animation:activity-indicator-grid 1.3s infinite ease-in-out}.activity-indicator-grid .activity-indicator-grid1{-webkit-animation-delay:.2s;animation-delay:.2s}.activity-indicator-grid .activity-indicator-grid2{-webkit-animation-delay:.3s;animation-delay:.3s}.activity-indicator-grid .activity-indicator-grid3{-webkit-animation-delay:.4s;animation-delay:.4s}.activity-indicator-grid .activity-indicator-grid4{-webkit-animation-delay:.1s;animation-delay:.1s}.activity-indicator-grid .activity-indicator-grid5{-webkit-animation-delay:.2s;animation-delay:.2s}.activity-indicator-grid .activity-indicator-grid6{-webkit-animation-delay:.3s;animation-delay:.3s}.activity-indicator-grid .activity-indicator-grid7{-webkit-animation-delay:0s;animation-delay:0s}.activity-indicator-grid .activity-indicator-grid8{-webkit-animation-delay:.1s;animation-delay:.1s}.activity-indicator-grid .activity-indicator-grid9{-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes activity-indicator-grid{0%,70%,to{-webkit-transform:scale3D(1,1,1);transform:scaleZ(1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}@keyframes activity-indicator-grid{0%,70%,to{-webkit-transform:scale3D(1,1,1);transform:scaleZ(1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}.activity-indicator-pulse{width:2.5em;height:2.5em;background-color:currentColor;border-radius:100%;-webkit-animation:activity-indicator-pulse 1s infinite ease-in-out;animation:activity-indicator-pulse 1s infinite ease-in-out}@-webkit-keyframes activity-indicator-pulse{0%{-webkit-transform:scale(0)}to{-webkit-transform:scale(1);opacity:0}}@keyframes activity-indicator-pulse{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.activity-indicator-spinner{width:2.5em;height:2.5em;position:relative}.activity-indicator-spinner .activity-indicator-spinner{width:100%;height:100%;position:absolute;left:0;top:0}.activity-indicator-spinner .activity-indicator-spinner:before{content:"";display:block;margin:0 auto;width:10%;height:33.333%;background-color:currentColor;-webkit-animation:activity-indicator-spinner 1.2s infinite ease-in-out both;animation:activity-indicator-spinner 1.2s infinite ease-in-out both}.activity-indicator-spinner .activity-indicator-spinner2{-webkit-transform:rotate(30deg);transform:rotate(30deg)}.activity-indicator-spinner .activity-indicator-spinner3{-webkit-transform:rotate(60deg);transform:rotate(60deg)}.activity-indicator-spinner .activity-indicator-spinner4{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.activity-indicator-spinner .activity-indicator-spinner5{-webkit-transform:rotate(120deg);transform:rotate(120deg)}.activity-indicator-spinner .activity-indicator-spinner6{-webkit-transform:rotate(150deg);transform:rotate(150deg)}.activity-indicator-spinner .activity-indicator-spinner7{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.activity-indicator-spinner .activity-indicator-spinner8{-webkit-transform:rotate(210deg);transform:rotate(210deg)}.activity-indicator-spinner .activity-indicator-spinner9{-webkit-transform:rotate(240deg);transform:rotate(240deg)}.activity-indicator-spinner .activity-indicator-spinner10{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.activity-indicator-spinner .activity-indicator-spinner11{-webkit-transform:rotate(300deg);transform:rotate(300deg)}.activity-indicator-spinner .activity-indicator-spinner12{-webkit-transform:rotate(330deg);transform:rotate(330deg)}.activity-indicator-spinner .activity-indicator-spinner2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.activity-indicator-spinner .activity-indicator-spinner3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.activity-indicator-spinner .activity-indicator-spinner4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.activity-indicator-spinner .activity-indicator-spinner5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.activity-indicator-spinner .activity-indicator-spinner6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.activity-indicator-spinner .activity-indicator-spinner7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.activity-indicator-spinner .activity-indicator-spinner8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.activity-indicator-spinner .activity-indicator-spinner9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.activity-indicator-spinner .activity-indicator-spinner10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.activity-indicator-spinner .activity-indicator-spinner11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.activity-indicator-spinner .activity-indicator-spinner12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes activity-indicator-spinner{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes activity-indicator-spinner{0%,39%,to{opacity:0}40%{opacity:1}}.activity-indicator-spotify{width:2em;height:2em;border-radius:50%;background:conic-gradient(white,black);position:relative;-webkit-animation:activity-indicator-spotify 1.4s linear infinite;animation:activity-indicator-spotify 1.4s linear infinite;-webkit-transform:translateZ(0);transform:translateZ(0)}.activity-indicator-spotify:after{background:white;width:75%;height:75%;border-radius:50%;content:"";margin:auto;position:absolute;top:0;left:0;bottom:0;right:0}@-webkit-keyframes activity-indicator-spotify{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes activity-indicator-spotify{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.activity-indicator-square{width:2.5em;height:2.5em;background-color:currentColor;-webkit-animation:activity-indicator-square 1.2s infinite ease-in-out;animation:activity-indicator-square 1.2s infinite ease-in-out}@-webkit-keyframes activity-indicator-square{0%{-webkit-transform:perspective(120px)}50%{-webkit-transform:perspective(120px) rotateY(180deg)}to{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}@keyframes activity-indicator-square{0%{transform:perspective(120px) rotateX(0) rotateY(0);-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}to{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.activity-indicator-square-fold{margin:1em;width:2.5em;height:2.5em;position:relative;-webkit-transform:rotateZ(45deg);transform:rotate(45deg)}.activity-indicator-square-fold .activity-indicator-square-fold-square{float:left;width:50%;height:50%;position:relative;-webkit-transform:scale(1.1);transform:scale(1.1)}.activity-indicator-square-fold .activity-indicator-square-fold-square:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#333;-webkit-animation:activity-indicator-square-fold 2.4s infinite linear both;animation:activity-indicator-square-fold 2.4s infinite linear both;-webkit-transform-origin:100% 100%;transform-origin:100% 100%}.activity-indicator-square-fold .activity-indicator-square-fold-square2{-webkit-transform:scale(1.1) rotateZ(90deg);transform:scale(1.1) rotate(90deg)}.activity-indicator-square-fold .activity-indicator-square-fold-square3{-webkit-transform:scale(1.1) rotateZ(180deg);transform:scale(1.1) rotate(180deg)}.activity-indicator-square-fold .activity-indicator-square-fold-square4{-webkit-transform:scale(1.1) rotateZ(270deg);transform:scale(1.1) rotate(270deg)}.activity-indicator-square-fold .activity-indicator-square-fold-square2:before{-webkit-animation-delay:.3s;animation-delay:.3s}.activity-indicator-square-fold .activity-indicator-square-fold-square3:before{-webkit-animation-delay:.6s;animation-delay:.6s}.activity-indicator-square-fold .activity-indicator-square-fold-square4:before{-webkit-animation-delay:.9s;animation-delay:.9s}@-webkit-keyframes activity-indicator-square-fold{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@keyframes activity-indicator-square-fold{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}.activity-indicator-square-orbit{margin:.5em;width:3em;height:3em;position:relative}.activity-indicator-square-orbit-cube1,.activity-indicator-square-orbit-cube2{background-color:#333;width:1em;height:1em;position:absolute;top:0;left:0;-webkit-animation:activity-indicator-square-orbit 1.8s infinite ease-in-out;animation:activity-indicator-square-orbit 1.8s infinite ease-in-out}.activity-indicator-square-orbit-cube2{-webkit-animation-delay:-.9s;animation-delay:-.9s}@-webkit-keyframes activity-indicator-square-orbit{25%{-webkit-transform:translateX(2em) rotate(-90deg) scale(.5)}50%{-webkit-transform:translateX(2em) translateY(2em) rotate(-180deg)}75%{-webkit-transform:translateX(0px) translateY(2em) rotate(-270deg) scale(.5)}to{-webkit-transform:rotate(-360deg)}}@keyframes activity-indicator-square-orbit{25%{transform:translate(2em) rotate(-90deg) scale(.5);-webkit-transform:translateX(2em) rotate(-90deg) scale(.5)}50%{transform:translate(2em) translateY(2em) rotate(-179deg);-webkit-transform:translateX(2em) translateY(2em) rotate(-179deg)}50.1%{transform:translate(2em) translateY(2em) rotate(-180deg);-webkit-transform:translateX(2em) translateY(2em) rotate(-180deg)}75%{transform:translate(0) translateY(2em) rotate(-270deg) scale(.5);-webkit-transform:translateX(0px) translateY(2em) rotate(-270deg) scale(.5)}to{transform:rotate(-360deg);-webkit-transform:rotate(-360deg)}}@-webkit-keyframes btn-activity-in{0%,to{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.98);transform:scale(.98)}}@keyframes btn-activity-in{0%,to{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.98);transform:scale(.98)}}@-webkit-keyframes btn-activity-out{0%,to{-webkit-transform:scale(1);transform:scale(1)}70%{-webkit-transform:scale(.98);transform:scale(.98)}}@keyframes btn-activity-out{0%,to{-webkit-transform:scale(1);transform:scale(1)}70%{-webkit-transform:scale(.98);transform:scale(.98)}}.btn-activity-top,.btn.btn-activity-top,.btn-activity-bottom,.btn.btn-activity-bottom,.btn-activity-left,.btn.btn-activity-left,.btn-activity-right,.btn.btn-activity-right{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-transition:all 166.5ms ease-in;transition:all 166.5ms ease-in}.btn-activity-top .activity-indicator,.btn-activity-bottom .activity-indicator,.btn-activity-left .activity-indicator,.btn-activity-right .activity-indicator{opacity:0;position:absolute;visibility:hidden;-webkit-transition:opacity 333ms ease-in;transition:opacity 333ms ease-in}.btn-activity-top,.btn-activity-bottom{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.btn-activity-top .activity-indicator,.btn-activity-bottom .activity-indicator{margin-left:auto;margin-right:auto}.btn-activity-top{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.btn-activity-top .activity-indicator{padding-bottom:1em}.btn-activity-bottom .activity-indicator{padding-top:1em}.btn-activity-left,.btn-activity-right{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.btn-activity-left{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.btn-activity-left .activity-indicator{padding-right:1em}.btn-activity-right .activity-indicator{padding-left:1em}.btn-activity:not(.btn-link){-webkit-animation:btn-activity-in 333ms;animation:btn-activity-in 333ms}.btn-hide-activity:not(.btn-link){-webkit-animation:btn-activity-out 333ms;animation:btn-activity-out 333ms}.btn-activity.btn-hide-activity .activity-indicator{opacity:0}.btn-activity .activity-indicator{opacity:1;visibility:visible;position:relative;font-size:.55em}
+@-webkit-keyframes btn-activity-in{0%,to{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.98);transform:scale(.98)}}@keyframes btn-activity-in{0%,to{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.98);transform:scale(.98)}}@-webkit-keyframes btn-activity-out{0%,to{-webkit-transform:scale(1);transform:scale(1)}70%{-webkit-transform:scale(.98);transform:scale(.98)}}@keyframes btn-activity-out{0%,to{-webkit-transform:scale(1);transform:scale(1)}70%{-webkit-transform:scale(.98);transform:scale(.98)}}.btn-activity-top,.btn.btn-activity-top,.btn-activity-bottom,.btn.btn-activity-bottom,.btn-activity-left,.btn.btn-activity-left,.btn-activity-right,.btn.btn-activity-right{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-transition:all 166.5ms ease-in;transition:all 166.5ms ease-in}.btn-activity-top .activity-indicator,.btn-activity-bottom .activity-indicator,.btn-activity-left .activity-indicator,.btn-activity-right .activity-indicator{opacity:0;position:absolute;visibility:hidden;-webkit-transition:opacity 333ms ease-in;transition:opacity 333ms ease-in}.btn-activity-top,.btn-activity-bottom{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.btn-activity-top .activity-indicator,.btn-activity-bottom .activity-indicator{margin-left:auto;margin-right:auto}.btn-activity-top{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.btn-activity-top .activity-indicator{padding-bottom:1em}.btn-activity-bottom .activity-indicator{padding-top:1em}.btn-activity-left,.btn-activity-right{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.btn-activity-left{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.btn-activity-left .activity-indicator{padding-right:1em}.btn-activity-right .activity-indicator{padding-left:1em}.btn-activity:not(.btn-link){-webkit-animation:btn-activity-in 333ms;animation:btn-activity-in 333ms}.btn-hide-activity:not(.btn-link){-webkit-animation:btn-activity-out 333ms;animation:btn-activity-out 333ms}.btn-activity.btn-hide-activity .activity-indicator{opacity:0}.btn-activity .activity-indicator{opacity:1;visibility:visible;position:relative;font-size:.55em}

package/dist/btn-activity.es.js

@@ -1,94 +1,8 @@
-import { openBlock as c, createElementBlock as d, normalizeClass as m, normalizeStyle as $, createElementVNode as k, createBlock as P, resolveDynamicComponent as z, createCommentVNode as p, toDisplayString as S, resolveComponent as B, createTextVNode as E, renderSlot as D, createVNode as N, normalizeProps as O, guardReactiveProps as R } from "vue";
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var u = function() {
-  return u = Object.assign || function(e) {
-    for (var i, n = 1, s = arguments.length; n < s; n++) {
-      i = arguments[n];
-      for (var r in i)
-        Object.prototype.hasOwnProperty.call(i, r) && (e[r] = i[r]);
-    }
-    return e;
-  }, u.apply(this, arguments);
-};
-function j(t) {
-  return t.toLowerCase();
-}
-var T = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g], F = /[^A-Z0-9]+/gi;
-function L(t, e) {
-  e === void 0 && (e = {});
-  for (var i = e.splitRegexp, n = i === void 0 ? T : i, s = e.stripRegexp, r = s === void 0 ? F : s, o = e.transform, h = o === void 0 ? j : o, g = e.delimiter, C = g === void 0 ? " " : g, l = f(f(t, n, "$1\0$2"), r, "\0"), y = 0, v = l.length; l.charAt(y) === "\0"; )
-    y++;
-  for (; l.charAt(v - 1) === "\0"; )
-    v--;
-  return l.slice(y, v).split("\0").map(h).join(C);
-}
-function f(t, e, i) {
-  return e instanceof RegExp ? t.replace(e, i) : e.reduce(function(n, s) {
-    return n.replace(s, i);
-  }, t);
-}
-function H(t, e) {
-  return e === void 0 && (e = {}), L(t, u({
-    delimiter: "."
-  }, e));
-}
-function _(t, e) {
-  return e === void 0 && (e = {}), H(t, u({
-    delimiter: "-"
-  }, e));
-}
-class w {
-  constructor(e = {}) {
-    this.components = /* @__PURE__ */ new Map(), Object.entries(e).forEach(([i, n]) => {
-      this.register(i, n);
-    });
-  }
-  get(e) {
-    const i = this.components.get(e = _(e));
-    if (i)
-      return i;
-    throw new Error(`"${e}" has not been registered yet!`);
-  }
-  register(e, i) {
-    return typeof e == "object" ? (Object.entries(e).forEach(([n, s]) => {
-      this.register(_(n), s);
-    }), this) : (this.components.set(_(e), i), this);
-  }
-  remove(e) {
-    return this.components.delete(_(e)), this;
-  }
-  reset() {
-    return this.components = /* @__PURE__ */ new Map(), this;
-  }
-}
-function I(...t) {
-  return new w(...t);
-}
-const b = I();
-const A = (t, e) => {
-  const i = t.__vccOpts || t;
-  for (const [n, s] of e)
-    i[n] = s;
-  return i;
-};
-function a(t, e = "px") {
+import { inject as v, openBlock as o, createElementBlock as c, normalizeClass as y, normalizeStyle as p, createElementVNode as b, createBlock as d, resolveDynamicComponent as u, createCommentVNode as l, toDisplayString as m, mergeProps as f, withCtx as g, renderSlot as x, createTextVNode as S } from "vue";
+function n(t, e = "px") {
   return t != null && t !== !1 && isFinite(t) ? `${t}${e}` : t;
 }
-const V = {
-  name: "ActivityIndicator",
+const P = {
   props: {
     absolute: Boolean,
     center: Boolean,
@@ -98,10 +12,8 @@ const V = {
       default: "md"
     },
     registry: {
-      type: w,
-      default() {
-        return b;
-      }
+      type: String,
+      default: "indicators"
     },
     type: {
       type: String,
@@ -117,6 +29,11 @@ const V = {
   data: () => ({
     is: null
   }),
+  setup(t) {
+    return {
+      registryInstance: v(t.registry || "indicators")
+    };
+  },
   computed: {
     classes() {
       return {
@@ -127,12 +44,12 @@ const V = {
     },
     style() {
       return {
-        width: a(this.width),
-        maxWidth: a(this.maxWidth),
-        minWidth: a(this.minWidth),
-        height: a(this.height),
-        maxHeight: a(this.maxHeight),
-        minHeight: a(this.minHeight)
+        width: n(this.width),
+        maxWidth: n(this.maxWidth),
+        minWidth: n(this.minWidth),
+        height: n(this.height),
+        maxHeight: n(this.maxHeight),
+        minHeight: n(this.minHeight)
       };
     }
   },
@@ -142,33 +59,114 @@ const V = {
   },
   methods: {
     async component() {
-      let t = b.get(this.type);
+      let t = this.registryInstance.get(this.type);
       return t instanceof Promise ? t : (typeof t == "function" && (t = await t()), t.default ? t.default : t);
     }
   }
-}, W = { class: "activity-indicator-content" }, q = {
+}, $ = (t, e) => {
+  const i = t.__vccOpts || t;
+  for (const [a, s] of e)
+    i[a] = s;
+  return i;
+}, z = {
+  class: "activity-indicator-content"
+}, B = {
   key: 1,
   class: "activity-indicator-label"
 };
-function Z(t, e, i, n, s, r) {
-  return c(), d("div", {
-    class: m(["activity-indicator", r.classes]),
-    style: $(r.style)
-  }, [
-    k("div", W, [
-      t.is ? (c(), P(z(t.is()), {
-        key: 0,
-        class: "mx-auto"
-      })) : p("", !0),
-      i.label ? (c(), d("div", q, S(i.label), 1)) : p("", !0)
-    ])
-  ], 6);
+function C(t, e, i, a, s, r) {
+  return o(), c("div", {
+    class: y(["activity-indicator", r.classes]),
+    style: p(r.style)
+  }, [b("div", z, [t.is ? (o(), d(u(t.is()), {
+    key: 0,
+    class: "mx-auto"
+  })) : l("", !0), i.label ? (o(), c("div", B, m(i.label), 1)) : l("", !0)])], 6);
+}
+const w = /* @__PURE__ */ $(P, [["render", C]]), A = {
+  props: {
+    componentPrefix: String,
+    size: String,
+    sizePrefix: String
+  },
+  computed: {
+    sizeableClassPrefix() {
+      return this.sizePrefix || this.componentPrefix;
+    },
+    hasSizeablePrefix() {
+      return this.size === void 0 ? !1 : !!this.size.match(new RegExp(`^${this.sizeableClassPrefix}`));
+    },
+    sizeableClass() {
+      return this.size ? !this.sizeableClassPrefix || this.hasSizeablePrefix ? this.size : `${this.sizeableClassPrefix}-${this.size}` : "";
+    }
+  }
+}, _ = {
+  props: {
+    componentPrefix: String,
+    variant: String,
+    variantPrefix: String
+  },
+  computed: {
+    variantClassPrefix() {
+      return this.variantPrefix || this.componentPrefix;
+    },
+    hasVariantPrefix() {
+      return this.variant === void 0 ? !1 : !!this.variant.match(new RegExp(`^${this.variantClassPrefix}`));
+    },
+    variantClass() {
+      return this.variant ? !this.variantClassPrefix || this.hasVariantPrefix ? this.variant : `${this.variantClassPrefix}-${this.variant}` : "";
+    }
+  }
+}, k = {
+  name: "Btn",
+  mixins: [A, _],
+  props: {
+    active: Boolean,
+    block: Boolean,
+    componentPrefix: {
+      type: String,
+      default: "btn"
+    },
+    disabled: Boolean,
+    label: String,
+    outline: Boolean,
+    tag: String,
+    variant: {
+      type: String,
+      default: "primary"
+    }
+  },
+  computed: {
+    classes() {
+      return ["btn", this.variantClass, this.sizeableClass, this.active && "active", this.block && "btn-block", this.disabled && "disabled"];
+    },
+    component() {
+      return this.tag ? this.tag : this.$attrs.href ? "a" : "button";
+    },
+    variantClassPrefix() {
+      return (this.variantPrefix || this.componentPrefix) + (this.outline ? "-outline" : "");
+    }
+  }
+}, N = (t, e) => {
+  const i = t.__vccOpts || t;
+  for (const [a, s] of e)
+    i[a] = s;
+  return i;
+};
+function H(t, e, i, a, s, r) {
+  return o(), d(u(r.component), f(t.$attrs, {
+    disabled: i.disabled,
+    class: r.classes,
+    role: "button"
+  }), {
+    default: g(() => [x(t.$slots, "default", {}, () => [S(m(i.label), 1)])]),
+    _: 3
+  }, 16, ["disabled", "class"]);
 }
-const G = /* @__PURE__ */ A(V, [["render", Z]]);
-const M = function(t) {
-  const e = parseFloat(t || 0, 10), i = t && t.match(/m?s/), n = i ? i[0] : !1;
+const W = /* @__PURE__ */ N(k, [["render", H]]), D = function(t) {
+  const e = parseFloat(t || 0), i = t && t.match(/m?s/), a = i ? i[0] : !1;
   let s;
-  switch (n) {
+  switch (a) {
     case "s":
       s = e * 1e3;
       break;
@@ -178,50 +176,53 @@ const M = function(t) {
       break;
   }
   return s || 0;
-}, x = function(t, e) {
+}, h = function(t, e) {
   const i = (t.ownerDocument || document).defaultView;
-  setTimeout(() => {
-    e.apply();
-  }, M(i.getComputedStyle(t).animationDuration));
-}, U = {
+  setTimeout(e, D(i == null ? void 0 : i.getComputedStyle(t).animationDuration));
+}, L = {
   name: "BtnActivity",
   components: {
-    ActivityIndicator: G
+    ActivityIndicator: w,
+    Btn: W
   },
   props: {
     active: Boolean,
     activity: Boolean,
     block: Boolean,
     disabled: Boolean,
+    indicator: {
+      type: [Object, String],
+      default: "spinner"
+    },
     label: String,
-    icon: String,
-    type: String,
+    orientation: {
+      type: String,
+      default: "right"
+    },
     size: {
       type: String,
       default: "md"
     },
+    tag: String,
     variant: {
       type: String,
       default: "primary"
-    },
-    indicator: {
-      type: [Object, String],
-      default: "spinner"
-    },
-    orientation: {
-      type: String,
-      default: "right"
     }
   },
+  data() {
+    return {
+      currentActivity: this.activity
+    };
+  },
   computed: {
     classes() {
-      const t = {
+      return {
         disabled: this.disabled,
         active: this.active,
-        "btn-block": this.block,
-        "btn-activity": this.activity
+        "btn-activity": this.activity,
+        [`btn-activity-${this.orientation.replace("btn-activity-", "")}`]: !!this.orientation,
+        [`'btn-activity-indicator-${this.indicatorProps.type.replace("btn-activity-indicator-", "")}`]: !!this.indicatorProps.type
       };
-      return t["btn-" + this.size.replace("btn-", "")] = !!this.size, t["btn-" + this.variant.replace("btn-", "")] = !!this.variant, t["btn-activity-" + this.orientation.replace("btn-activity-", "")] = !!this.orientation, t["btn-activity-indicator-" + this.indicatorProps.type.replace("btn-activity-indicator-", "")] = !!this.indicatorProps.type, t;
     },
     indicatorProps() {
       return Object.assign({
@@ -236,45 +237,31 @@ const M = function(t) {
       t ? this.showActivity() : this.hideActivity();
     }
   },
+  mounted() {
+    this.activity && this.showActivity();
+  },
   methods: {
     disable() {
-      this.$el.disabled = !0;
+      this.$el.disabled = !0, this.$el.classList.add("disabled");
     },
     enable() {
-      this.$el.disabled = !1;
+      this.$el.disabled = !1, this.$el.classList.remove("disabled");
     },
-    showActivity() {
-      this.disable(), x(this.$el, () => {
-        this.$el.classList.add("btn-activity"), this.$emit("show-activity");
+    hideActivity() {
+      this.$el.classList.add("btn-hide-activity"), h(this.$el, () => {
+        this.enable(), this.currentActivity = !1, this.$el.classList.remove("btn-activity", "btn-hide-activity"), this.$emit("hide-activity");
       });
     },
-    hideActivity() {
-      this.$el.classList.add("btn-hide-activity"), x(this.$el, () => {
-        this.enable(), this.$el.classList.remove("btn-activity", "btn-hide-activity"), this.$emit("hide-activity");
+    showActivity() {
+      this.currentActivity = !0, this.disable(), h(this.$el, () => {
+        this.$el.classList.add("btn-activity"), this.$emit("show-activity");
       });
     },
-    onClick(t) {
-      this.disabled ? t.preventDefault() : this.$emit("click", t);
+    toggle() {
+      this.currentActivity ? this.hideActivity() : this.showActivity();
     }
   }
-}, X = ["type"];
-function J(t, e, i, n, s, r) {
-  const o = B("activity-indicator");
-  return c(), d("button", {
-    type: i.type,
-    class: m(["btn", r.classes]),
-    onClick: e[0] || (e[0] = (...h) => r.onClick && r.onClick(...h))
-  }, [
-    i.icon ? (c(), d("i", {
-      key: 0,
-      class: m(i.icon)
-    }, null, 2)) : p("", !0),
-    E(" " + S(i.label) + " ", 1),
-    D(t.$slots, "default"),
-    N(o, O(R(r.indicatorProps)), null, 16)
-  ], 10, X);
-}
-const Q = /* @__PURE__ */ A(U, [["render", J]]);
+};
 export {
-  Q as BtnActivity
+  L as BtnActivity
 };

package/dist/btn-activity.umd.js

@@ -1,14 +1 @@
-(function(c,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(c=typeof globalThis<"u"?globalThis:c||self,n(c.BtnActivity={},c.Vue))})(this,function(c,n){"use strict";/*! *****************************************************************************
-  Copyright (c) Microsoft Corporation.
-
-  Permission to use, copy, modify, and/or distribute this software for any
-  purpose with or without fee is hereby granted.
-
-  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-  PERFORMANCE OF THIS SOFTWARE.
-  ***************************************************************************** */var l=function(){return l=Object.assign||function(e){for(var i,s=1,r=arguments.length;s<r;s++){i=arguments[s];for(var a in i)Object.prototype.hasOwnProperty.call(i,a)&&(e[a]=i[a])}return e},l.apply(this,arguments)};function S(t){return t.toLowerCase()}var w=[/([a-z0-9])([A-Z])/g,/([A-Z])([A-Z][a-z])/g],C=/[^A-Z0-9]+/gi;function k(t,e){e===void 0&&(e={});for(var i=e.splitRegexp,s=i===void 0?w:i,r=e.stripRegexp,a=r===void 0?C:r,_=e.transform,h=_===void 0?S:_,x=e.delimiter,V=x===void 0?" ":x,u=p(p(t,s,"$1\0$2"),a,"\0"),y=0,m=u.length;u.charAt(y)==="\0";)y++;for(;u.charAt(m-1)==="\0";)m--;return u.slice(y,m).split("\0").map(h).join(V)}function p(t,e,i){return e instanceof RegExp?t.replace(e,i):e.reduce(function(s,r){return s.replace(r,i)},t)}function A(t,e){return e===void 0&&(e={}),k(t,l({delimiter:"."},e))}function d(t,e){return e===void 0&&(e={}),A(t,l({delimiter:"-"},e))}class g{constructor(e={}){this.components=new Map,Object.entries(e).forEach(([i,s])=>{this.register(i,s)})}get(e){const i=this.components.get(e=d(e));if(i)return i;throw new Error(`"${e}" has not been registered yet!`)}register(e,i){return typeof e=="object"?(Object.entries(e).forEach(([s,r])=>{this.register(d(s),r)}),this):(this.components.set(d(e),i),this)}remove(e){return this.components.delete(d(e)),this}reset(){return this.components=new Map,this}}function B(...t){return new g(...t)}const f=B(),F="",v=(t,e)=>{const i=t.__vccOpts||t;for(const[s,r]of e)i[s]=r;return i};function o(t,e="px"){return t!=null&&t!==!1&&isFinite(t)?`${t}${e}`:t}const $={name:"ActivityIndicator",props:{absolute:Boolean,center:Boolean,label:String,size:{type:String,default:"md"},registry:{type:g,default(){return f}},type:{type:String,required:!0},height:[String,Number],maxHeight:[String,Number],minHeight:[String,Number],width:[String,Number],maxWidth:[String,Number],minWidth:[String,Number]},data:()=>({is:null}),computed:{classes(){return{"activity-indicator-center":this.center,"activity-indicator-absolute":this.absolute,[this.size&&`activity-indicator-${this.size}`]:!!this.size}},style(){return{width:o(this.width),maxWidth:o(this.maxWidth),minWidth:o(this.minWidth),height:o(this.height),maxHeight:o(this.maxHeight),minHeight:o(this.minHeight)}}},async mounted(){const t=await this.component();this.is=()=>t},methods:{async component(){let t=f.get(this.type);return t instanceof Promise?t:(typeof t=="function"&&(t=await t()),t.default?t.default:t)}}},E={class:"activity-indicator-content"},P={key:1,class:"activity-indicator-label"};function z(t,e,i,s,r,a){return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["activity-indicator",a.classes]),style:n.normalizeStyle(a.style)},[n.createElementVNode("div",E,[t.is?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(t.is()),{key:0,class:"mx-auto"})):n.createCommentVNode("",!0),i.label?(n.openBlock(),n.createElementBlock("div",P,n.toDisplayString(i.label),1)):n.createCommentVNode("",!0)])],6)}const N=v($,[["render",z]]),L="",H="",I="",W="",q="",M="",Z="",G="",U="",X="",J="",K="",Q="",Y="",tt="",D=function(t){const e=parseFloat(t||0,10),i=t&&t.match(/m?s/),s=i?i[0]:!1;let r;switch(s){case"s":r=e*1e3;break;case"ms":default:r=e;break}return r||0},b=function(t,e){const i=(t.ownerDocument||document).defaultView;setTimeout(()=>{e.apply()},D(i.getComputedStyle(t).animationDuration))},O={name:"BtnActivity",components:{ActivityIndicator:N},props:{active:Boolean,activity:Boolean,block:Boolean,disabled:Boolean,label:String,icon:String,type:String,size:{type:String,default:"md"},variant:{type:String,default:"primary"},indicator:{type:[Object,String],default:"spinner"},orientation:{type:String,default:"right"}},computed:{classes(){const t={disabled:this.disabled,active:this.active,"btn-block":this.block,"btn-activity":this.activity};return t["btn-"+this.size.replace("btn-","")]=!!this.size,t["btn-"+this.variant.replace("btn-","")]=!!this.variant,t["btn-activity-"+this.orientation.replace("btn-activity-","")]=!!this.orientation,t["btn-activity-indicator-"+this.indicatorProps.type.replace("btn-activity-indicator-","")]=!!this.indicatorProps.type,t},indicatorProps(){return Object.assign({type:"spinner"},(typeof this.indicator=="string"?{type:this.indicator}:this.indicator)||{})}},watch:{activity(t){t?this.showActivity():this.hideActivity()}},methods:{disable(){this.$el.disabled=!0},enable(){this.$el.disabled=!1},showActivity(){this.disable(),b(this.$el,()=>{this.$el.classList.add("btn-activity"),this.$emit("show-activity")})},hideActivity(){this.$el.classList.add("btn-hide-activity"),b(this.$el,()=>{this.enable(),this.$el.classList.remove("btn-activity","btn-hide-activity"),this.$emit("hide-activity")})},onClick(t){this.disabled?t.preventDefault():this.$emit("click",t)}}},T=["type"];function j(t,e,i,s,r,a){const _=n.resolveComponent("activity-indicator");return n.openBlock(),n.createElementBlock("button",{type:i.type,class:n.normalizeClass(["btn",a.classes]),onClick:e[0]||(e[0]=(...h)=>a.onClick&&a.onClick(...h))},[i.icon?(n.openBlock(),n.createElementBlock("i",{key:0,class:n.normalizeClass(i.icon)},null,2)):n.createCommentVNode("",!0),n.createTextVNode(" "+n.toDisplayString(i.label)+" ",1),n.renderSlot(t.$slots,"default"),n.createVNode(_,n.normalizeProps(n.guardReactiveProps(a.indicatorProps)),null,16)],10,T)}const R=v(O,[["render",j]]);c.BtnActivity=R,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(a,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(a=typeof globalThis<"u"?globalThis:a||self,i(a.BtnActivity={},a.Vue))})(this,function(a,i){"use strict";function o(t,s="px"){return t!=null&&t!==!1&&isFinite(t)?`${t}${s}`:t}const h={props:{absolute:Boolean,center:Boolean,label:String,size:{type:String,default:"md"},registry:{type:String,default:"indicators"},type:{type:String,required:!0},height:[String,Number],maxHeight:[String,Number],minHeight:[String,Number],width:[String,Number],maxWidth:[String,Number],minWidth:[String,Number]},data:()=>({is:null}),setup(t){return{registryInstance:i.inject(t.registry||"indicators")}},computed:{classes(){return{"activity-indicator-center":this.center,"activity-indicator-absolute":this.absolute,[this.size&&`activity-indicator-${this.size}`]:!!this.size}},style(){return{width:o(this.width),maxWidth:o(this.maxWidth),minWidth:o(this.minWidth),height:o(this.height),maxHeight:o(this.maxHeight),minHeight:o(this.minHeight)}}},async mounted(){const t=await this.component();this.is=()=>t},methods:{async component(){let t=this.registryInstance.get(this.type);return t instanceof Promise?t:(typeof t=="function"&&(t=await t()),t.default?t.default:t)}}},d=(t,s)=>{const e=t.__vccOpts||t;for(const[r,n]of s)e[r]=n;return e},m={class:"activity-indicator-content"},u={key:1,class:"activity-indicator-label"};function y(t,s,e,r,n,c){return i.openBlock(),i.createElementBlock("div",{class:i.normalizeClass(["activity-indicator",c.classes]),style:i.normalizeStyle(c.style)},[i.createElementVNode("div",m,[t.is?(i.openBlock(),i.createBlock(i.resolveDynamicComponent(t.is()),{key:0,class:"mx-auto"})):i.createCommentVNode("",!0),e.label?(i.openBlock(),i.createElementBlock("div",u,i.toDisplayString(e.label),1)):i.createCommentVNode("",!0)])],6)}const p=d(h,[["render",y]]),f={props:{componentPrefix:String,size:String,sizePrefix:String},computed:{sizeableClassPrefix(){return this.sizePrefix||this.componentPrefix},hasSizeablePrefix(){return this.size===void 0?!1:!!this.size.match(new RegExp(`^${this.sizeableClassPrefix}`))},sizeableClass(){return this.size?!this.sizeableClassPrefix||this.hasSizeablePrefix?this.size:`${this.sizeableClassPrefix}-${this.size}`:""}}},b={props:{componentPrefix:String,variant:String,variantPrefix:String},computed:{variantClassPrefix(){return this.variantPrefix||this.componentPrefix},hasVariantPrefix(){return this.variant===void 0?!1:!!this.variant.match(new RegExp(`^${this.variantClassPrefix}`))},variantClass(){return this.variant?!this.variantClassPrefix||this.hasVariantPrefix?this.variant:`${this.variantClassPrefix}-${this.variant}`:""}}},v={name:"Btn",mixins:[f,b],props:{active:Boolean,block:Boolean,componentPrefix:{type:String,default:"btn"},disabled:Boolean,label:String,outline:Boolean,tag:String,variant:{type:String,default:"primary"}},computed:{classes(){return["btn",this.variantClass,this.sizeableClass,this.active&&"active",this.block&&"btn-block",this.disabled&&"disabled"]},component(){return this.tag?this.tag:this.$attrs.href?"a":"button"},variantClassPrefix(){return(this.variantPrefix||this.componentPrefix)+(this.outline?"-outline":"")}}},g=(t,s)=>{const e=t.__vccOpts||t;for(const[r,n]of s)e[r]=n;return e};function x(t,s,e,r,n,c){return i.openBlock(),i.createBlock(i.resolveDynamicComponent(c.component),i.mergeProps(t.$attrs,{disabled:e.disabled,class:c.classes,role:"button"}),{default:i.withCtx(()=>[i.renderSlot(t.$slots,"default",{},()=>[i.createTextVNode(i.toDisplayString(e.label),1)])]),_:3},16,["disabled","class"])}const S=g(v,[["render",x]]),P=function(t){const s=parseFloat(t||0),e=t&&t.match(/m?s/),r=e?e[0]:!1;let n;switch(r){case"s":n=s*1e3;break;case"ms":default:n=s;break}return n||0},l=function(t,s){const e=(t.ownerDocument||document).defaultView;setTimeout(s,P(e==null?void 0:e.getComputedStyle(t).animationDuration))},$={name:"BtnActivity",components:{ActivityIndicator:p,Btn:S},props:{active:Boolean,activity:Boolean,block:Boolean,disabled:Boolean,indicator:{type:[Object,String],default:"spinner"},label:String,orientation:{type:String,default:"right"},size:{type:String,default:"md"},tag:String,variant:{type:String,default:"primary"}},data(){return{currentActivity:this.activity}},computed:{classes(){return{disabled:this.disabled,active:this.active,"btn-activity":this.activity,[`btn-activity-${this.orientation.replace("btn-activity-","")}`]:!!this.orientation,[`'btn-activity-indicator-${this.indicatorProps.type.replace("btn-activity-indicator-","")}`]:!!this.indicatorProps.type}},indicatorProps(){return Object.assign({type:"spinner"},(typeof this.indicator=="string"?{type:this.indicator}:this.indicator)||{})}},watch:{activity(t){t?this.showActivity():this.hideActivity()}},mounted(){this.activity&&this.showActivity()},methods:{disable(){this.$el.disabled=!0,this.$el.classList.add("disabled")},enable(){this.$el.disabled=!1,this.$el.classList.remove("disabled")},hideActivity(){this.$el.classList.add("btn-hide-activity"),l(this.$el,()=>{this.enable(),this.currentActivity=!1,this.$el.classList.remove("btn-activity","btn-hide-activity"),this.$emit("hide-activity")})},showActivity(){this.currentActivity=!0,this.disable(),l(this.$el,()=>{this.$el.classList.add("btn-activity"),this.$emit("show-activity")})},toggle(){this.currentActivity?this.hideActivity():this.showActivity()}}},z="";a.BtnActivity=$,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/{index.js → dist/index.d.ts}

@@ -1,5 +1,2 @@
 import BtnActivity from './src/BtnActivity.vue';
-
-export {
-    BtnActivity
-};
+export { BtnActivity };

package/dist/src/BtnActivity.vue.d.ts

@@ -0,0 +1,238 @@
+declare const _sfc_main: {
+    name: string;
+    components: {
+        ActivityIndicator: {
+            props: {
+                absolute: BooleanConstructor;
+                center: BooleanConstructor;
+                label: StringConstructor;
+                size: {
+                    type: StringConstructor;
+                    default: string;
+                };
+                registry: {
+                    type: StringConstructor;
+                    default: string;
+                };
+                type: {
+                    type: StringConstructor;
+                    required: boolean;
+                };
+                height: (StringConstructor | NumberConstructor)[];
+                maxHeight: (StringConstructor | NumberConstructor)[];
+                minHeight: (StringConstructor | NumberConstructor)[];
+                width: (StringConstructor | NumberConstructor)[];
+                maxWidth: (StringConstructor | NumberConstructor)[];
+                minWidth: (StringConstructor | NumberConstructor)[];
+            };
+            data: () => {
+                is: null;
+            };
+            setup(props: any): {
+                registryInstance: unknown;
+            };
+            computed: {
+                classes(): {
+                    [x: number]: boolean;
+                    'activity-indicator-center': any;
+                    'activity-indicator-absolute': any;
+                };
+                style(): {
+                    width: string | undefined;
+                    maxWidth: string | undefined;
+                    minWidth: string | undefined;
+                    height: string | undefined;
+                    maxHeight: string | undefined;
+                    minHeight: string | undefined; /**
+                     * Disable the button.
+                     *
+                     * @property {Boolean}
+                     */
+                };
+            };
+            mounted(): Promise<void>;
+            methods: {
+                component(): Promise<any>;
+            };
+        };
+        Btn: {
+            name: string;
+            mixins: ({
+                props: {
+                    componentPrefix: StringConstructor;
+                    size: StringConstructor;
+                    sizePrefix: StringConstructor;
+                };
+                computed: {
+                    sizeableClassPrefix(): string | undefined;
+                    hasSizeablePrefix(): boolean;
+                    sizeableClass(): string;
+                };
+            } | {
+                props: {
+                    componentPrefix: StringConstructor;
+                    variant: StringConstructor;
+                    variantPrefix: StringConstructor;
+                };
+                computed: {
+                    variantClassPrefix(): string | undefined;
+                    hasVariantPrefix(): boolean;
+                    variantClass(): string;
+                };
+            })[];
+            props: {
+                active: BooleanConstructor;
+                block: BooleanConstructor;
+                componentPrefix: {
+                    type: StringConstructor;
+                    default: string; /**
+                     * Display the button as block width.
+                     *
+                     * @property {Boolean}
+                     */
+                };
+                disabled: BooleanConstructor;
+                label: StringConstructor;
+                outline: BooleanConstructor;
+                tag: StringConstructor;
+                variant: {
+                    type: StringConstructor;
+                    default: string;
+                };
+            };
+            computed: {
+                classes(): string[];
+                component(): string;
+                variantClassPrefix(): string;
+            };
+        };
+    };
+    props: {
+        /**
+         * Make the button appear with the active state.
+         *
+         * @property {Boolean}
+         */
+        active: BooleanConstructor;
+        /**
+         * Show the activity indicator inside the button.
+         *
+         * @property {Boolean}
+         */
+        activity: BooleanConstructor;
+        /**
+         * Display the button as block width.
+         *
+         * @property {Boolean}
+         */
+        block: BooleanConstructor;
+        /**
+         * Disable the button.
+         *
+         * @property {Boolean}
+         */
+        disabled: BooleanConstructor;
+        /**
+         * The type of activity indicator inside the button.
+         *
+         * @property {String}
+         */
+        indicator: {
+            type: (ObjectConstructor | StringConstructor)[];
+            default: string;
+        };
+        /**
+         * The button label.
+         *
+         * @property {String}
+         */
+        label: StringConstructor;
+        /**
+         * The orientation of the activity button inside the button.
+         *
+         * @property {String}
+         */
+        orientation: {
+            type: StringConstructor;
+            default: string;
+        };
+        /**
+         * The size of the button.
+         *
+         * @property {String}
+         */
+        size: {
+            type: StringConstructor;
+            default: string;
+        };
+        /**
+         * The HTML tag.
+         *
+         * @property {String}
+         */
+        tag: StringConstructor;
+        /**
+         * The variant of the button.
+         *
+         * @property {String}
+         */
+        variant: {
+            type: StringConstructor;
+            default: string;
+        };
+    };
+    data(): {
+        currentActivity: any;
+    };
+    computed: {
+        /**
+         * An object of classes to append to the button.
+         *
+         * @return void
+         */
+        classes(): {
+            [x: string]: any;
+            disabled: any;
+            active: any;
+            'btn-activity': any;
+        };
+        indicatorProps(): any;
+    };
+    watch: {
+        activity(value: boolean): void;
+    };
+    mounted(): void;
+    methods: {
+        /**
+         * Disable the button.
+         *
+         * @return void
+         */
+        disable(): void;
+        /**
+         * Enable the button.
+         *
+         * @return void
+         */
+        enable(): void;
+        /**
+         * Hide the activity indicator inside the button.
+         *
+         * @return void
+         */
+        hideActivity(): void;
+        /**
+         * Show the activity indicator inside the button.
+         *
+         * @return void
+         */
+        showActivity(): void;
+        /**
+         * Show the activity indicator inside the button.
+         *
+         * @return void
+         */
+        toggle(): void;
+    };
+};
+export default _sfc_main;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/btn-activity",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.2",
   "description": "A Vue activity button component.",
   "files": [
     "index.js",
@@ -8,7 +8,15 @@
     "src"
   ],
   "main": "./dist/btn-activity.umd.js",
-  "module": "./index.js",
+  "module": "./dist/btn-activity.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/btn-activit.es.js",
+      "require": "./dist/btn-activit.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "scripts": {
     "dev": "vite",
@@ -39,8 +47,8 @@
   },
   "homepage": "https://github.com/vue-interface/btn-activity/docs#readme",
   "dependencies": {
-    "@vue-interface/activity-indicator": "^2.0.0-beta.0",
-    "@vue-interface/btn": "^3.0.0-beta.1"
+    "@vue-interface/activity-indicator": "^2.0.0-beta.4",
+    "@vue-interface/btn": "^3.0.0-beta.3"
   },
   "devDependencies": {
     "@rollup/plugin-babel": "^6.0.0",
@@ -55,6 +63,7 @@
     "postcss": "^8.4.6",
     "tailwindcss": "^3.0.18",
     "vite": "^3.1.7",
+    "vite-plugin-dts": "^1.7.1",
     "vue": "^3.2.40"
   }
 }

package/src/BtnActivity.vue

@@ -1,16 +1,9 @@
-<template>
-    <button :type="type" class="btn" :class="classes" @click="onClick">
-        <i v-if="icon" :class="icon" /> {{ label }}
-        <slot />
-        <activity-indicator v-bind="indicatorProps" />
-    </button>
-</template>
-
-<script>
+<script lang="ts">
 import { ActivityIndicator } from '@vue-interface/activity-indicator';
+import { Btn } from '@vue-interface/btn';
 
-const convertAnimationDelayToInt = function(delay) {
-    const num = parseFloat(delay || 0, 10);
+const convertAnimationDelayToInt = function(delay: any) {
+    const num = parseFloat(delay || 0);
     const matches = delay && delay.match(/m?s/);
     const unit = matches ? matches[0] : false;
 
@@ -29,20 +22,19 @@ const convertAnimationDelayToInt = function(delay) {
     return milliseconds || 0;
 };
 
-const animated = function(el, callback) {
+const animated = function(el: HTMLElement, callback: Function) {
     const defaultView = (el.ownerDocument || document).defaultView;
 
-    setTimeout(() => {
-        callback.apply();
-    }, convertAnimationDelayToInt(defaultView.getComputedStyle(el).animationDuration));
+    setTimeout(callback, convertAnimationDelayToInt(defaultView?.getComputedStyle(el).animationDuration));
 };
 
 export default {
 
     name: 'BtnActivity',
-
+    
     components: {
-        ActivityIndicator
+        ActivityIndicator,
+        Btn
     },
 
     props: {
@@ -69,33 +61,38 @@ export default {
         block: Boolean,
 
         /**
-         * Make the button appear with the disabled state.
+         * Disable the button.
          *
          * @property {Boolean}
          */
         disabled: Boolean,
 
         /**
-         * The button label. If not passed as a property, label must be passed
-         * inside the element's html.
+         * The type of activity indicator inside the button.
          *
          * @property {String}
          */
-        label: String,
+        indicator: {
+            type: [Object, String],
+            default: 'spinner'
+        },
 
         /**
-         * The button icon
+         * The button label.
          *
          * @property {String}
          */
-        icon: String,
+        label: String,
 
         /**
-         * The `type` attribute for the button element.
+         * The orientation of the activity button inside the button.
          *
          * @property {String}
          */
-        type: String,
+        orientation: {
+            type: String,
+            default: 'right'
+        },
 
         /**
          * The size of the button.
@@ -108,35 +105,28 @@ export default {
         },
 
         /**
-         * The variant of the button.
+         * The HTML tag.
          *
          * @property {String}
          */
-        variant: {
-            type: String,
-            default: 'primary'
-        },
-
-        /**
-         * The type of activity indicator inside the button.
-         *
-         * @property {String}
-         */
-        indicator: {
-            type: [Object, String],
-            default: 'spinner'
-        },
+        tag: String,
 
         /**
-         * The orientation of the activity button inside the button.
+         * The variant of the button.
          *
          * @property {String}
          */
-        orientation: {
+        variant: {
             type: String,
-            default: 'right'
+            default: 'primary'
         }
     },
+    
+    data() {
+        return {
+            currentActivity: this.activity
+        };
+    },
 
     computed: {
 
@@ -146,19 +136,13 @@ export default {
          * @return void
          */
         classes() {
-            const classes = {
+            return {
                 'disabled': this.disabled,
                 'active': this.active,
-                'btn-block': this.block,
-                'btn-activity': this.activity
+                'btn-activity': this.activity,
+                [`btn-activity-${this.orientation.replace('btn-activity-', '')}`]: !!this.orientation,
+                [`'btn-activity-indicator-${this.indicatorProps.type.replace('btn-activity-indicator-', '')}`]: !!this.indicatorProps.type,
             };
-
-            classes['btn-' + this.size.replace('btn-', '')] = !!this.size;
-            classes['btn-' + this.variant.replace('btn-', '')] = !!this.variant;
-            classes['btn-activity-' + this.orientation.replace('btn-activity-', '')] = !!this.orientation;
-            classes['btn-activity-indicator-' + this.indicatorProps.type.replace('btn-activity-indicator-', '')] = !!this.indicatorProps.type;
-
-            return classes;
         },
 
         indicatorProps() {
@@ -173,7 +157,7 @@ export default {
 
     watch: {
 
-        activity(value) {
+        activity(value: boolean) {
             if(value) {
                 this.showActivity();
             }
@@ -184,6 +168,12 @@ export default {
 
     },
 
+    mounted() {
+        if(this.activity) {
+            this.showActivity();
+        }
+    },
+
     methods: {
 
         /**
@@ -193,6 +183,7 @@ export default {
          */
         disable() {
             this.$el.disabled = true;
+            this.$el.classList.add('disabled');
         },
 
         /**
@@ -202,48 +193,51 @@ export default {
          */
         enable() {
             this.$el.disabled = false;
+            this.$el.classList.remove('disabled');
         },
 
         /**
-         * Show the activity indicator inside the button.
+         * Hide the activity indicator inside the button.
          *
          * @return void
          */
-        showActivity() {
-            this.disable();
+        hideActivity() {
+            this.$el.classList.add('btn-hide-activity');
 
             animated(this.$el, () => {
-                this.$el.classList.add('btn-activity');
-                this.$emit('show-activity');
+                this.enable();
+                this.currentActivity = false;
+                this.$el.classList.remove('btn-activity', 'btn-hide-activity');
+                this.$emit('hide-activity');
             });
         },
 
         /**
-         * Hide the activity indicator inside the button.
+         * Show the activity indicator inside the button.
          *
          * @return void
          */
-        hideActivity() {
-            this.$el.classList.add('btn-hide-activity');
+        showActivity() {
+            this.currentActivity = true;
+            this.disable();
 
             animated(this.$el, () => {
-                this.enable();
-                this.$el.classList.remove('btn-activity', 'btn-hide-activity');
-                this.$emit('hide-activity');
+                this.$el.classList.add('btn-activity');
+                this.$emit('show-activity');
             });
         },
 
         /**
-         * The click callback function
+         * Show the activity indicator inside the button.
          *
          * @return void
          */
-        onClick(event) {
-            if(!this.disabled) {
-                this.$emit('click', event);
+        toggle() {
+            if(!this.currentActivity) {
+                this.showActivity();
             }
             else {
-                event.preventDefault();
+                this.hideActivity();
             }
         }