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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/btn-activity.css +1 -1
  2. package/dist/btn-activity.es.js +64 -183
  3. package/dist/btn-activity.umd.js +1 -14
  4. package/{index.js → dist/index.d.ts} +1 -4
  5. package/dist/src/BtnActivity.vue.d.ts +238 -0
  6. package/package.json +13 -4
  7. package/src/BtnActivity.vue +10 -30
package/dist/btn-activity.css CHANGED
@@ -1 +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}
1
+ @-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 CHANGED
@@ -1,94 +1,8 @@
1
- import { openBlock as c, createElementBlock as p, normalizeClass as z, normalizeStyle as R, createElementVNode as N, createBlock as m, resolveDynamicComponent as w, createCommentVNode as b, toDisplayString as f, mergeProps as O, withCtx as $, renderSlot as A, createTextVNode as B, resolveComponent as x, createVNode as D, normalizeProps as L, guardReactiveProps as j } from "vue";
2
- /*! *****************************************************************************
3
- Copyright (c) Microsoft Corporation.
4
-
5
- Permission to use, copy, modify, and/or distribute this software for any
6
- purpose with or without fee is hereby granted.
7
-
8
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
9
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
10
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
11
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
12
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
13
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
14
- PERFORMANCE OF THIS SOFTWARE.
15
- ***************************************************************************** */
16
- var h = function() {
17
- return h = Object.assign || function(e) {
18
- for (var i, n = 1, s = arguments.length; n < s; n++) {
19
- i = arguments[n];
20
- for (var a in i)
21
- Object.prototype.hasOwnProperty.call(i, a) && (e[a] = i[a]);
22
- }
23
- return e;
24
- }, h.apply(this, arguments);
25
- };
26
- function T(t) {
27
- return t.toLowerCase();
28
- }
29
- var V = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g], F = /[^A-Z0-9]+/gi;
30
- function H(t, e) {
31
- e === void 0 && (e = {});
32
- for (var i = e.splitRegexp, n = i === void 0 ? V : i, s = e.stripRegexp, a = s === void 0 ? F : s, o = e.transform, _ = o === void 0 ? T : o, l = e.delimiter, E = l === void 0 ? " " : l, d = P(P(t, n, "$1\0$2"), a, "\0"), v = 0, y = d.length; d.charAt(v) === "\0"; )
33
- v++;
34
- for (; d.charAt(y - 1) === "\0"; )
35
- y--;
36
- return d.slice(v, y).split("\0").map(_).join(E);
37
- }
38
- function P(t, e, i) {
39
- return e instanceof RegExp ? t.replace(e, i) : e.reduce(function(n, s) {
40
- return n.replace(s, i);
41
- }, t);
42
- }
43
- function I(t, e) {
44
- return e === void 0 && (e = {}), H(t, h({
45
- delimiter: "."
46
- }, e));
47
- }
48
- function u(t, e) {
49
- return e === void 0 && (e = {}), I(t, h({
50
- delimiter: "-"
51
- }, e));
52
- }
53
- class k {
54
- constructor(e = {}) {
55
- this.components = /* @__PURE__ */ new Map(), Object.entries(e).forEach(([i, n]) => {
56
- this.register(i, n);
57
- });
58
- }
59
- get(e) {
60
- const i = this.components.get(e = u(e));
61
- if (i)
62
- return i;
63
- throw new Error(`"${e}" has not been registered yet!`);
64
- }
65
- register(e, i) {
66
- return typeof e == "object" ? (Object.entries(e).forEach(([n, s]) => {
67
- this.register(u(n), s);
68
- }), this) : (this.components.set(u(e), i), this);
69
- }
70
- remove(e) {
71
- return this.components.delete(u(e)), this;
72
- }
73
- reset() {
74
- return this.components = /* @__PURE__ */ new Map(), this;
75
- }
76
- }
77
- function W(...t) {
78
- return new k(...t);
79
- }
80
- const S = W();
81
- const g = (t, e) => {
82
- const i = t.__vccOpts || t;
83
- for (const [n, s] of e)
84
- i[n] = s;
85
- return i;
86
- };
87
- function r(t, e = "px") {
1
+ 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";
2
+ function n(t, e = "px") {
88
3
  return t != null && t !== !1 && isFinite(t) ? `${t}${e}` : t;
89
4
  }
90
- const q = {
91
- name: "ActivityIndicator",
5
+ const P = {
92
6
  props: {
93
7
  absolute: Boolean,
94
8
  center: Boolean,
@@ -98,10 +12,8 @@ const q = {
98
12
  default: "md"
99
13
  },
100
14
  registry: {
101
- type: k,
102
- default() {
103
- return S;
104
- }
15
+ type: String,
16
+ default: "indicators"
105
17
  },
106
18
  type: {
107
19
  type: String,
@@ -117,6 +29,11 @@ const q = {
117
29
  data: () => ({
118
30
  is: null
119
31
  }),
32
+ setup(t) {
33
+ return {
34
+ registryInstance: v(t.registry || "indicators")
35
+ };
36
+ },
120
37
  computed: {
121
38
  classes() {
122
39
  return {
@@ -127,12 +44,12 @@ const q = {
127
44
  },
128
45
  style() {
129
46
  return {
130
- width: r(this.width),
131
- maxWidth: r(this.maxWidth),
132
- minWidth: r(this.minWidth),
133
- height: r(this.height),
134
- maxHeight: r(this.maxHeight),
135
- minHeight: r(this.minHeight)
47
+ width: n(this.width),
48
+ maxWidth: n(this.maxWidth),
49
+ minWidth: n(this.minWidth),
50
+ height: n(this.height),
51
+ maxHeight: n(this.maxHeight),
52
+ minHeight: n(this.minHeight)
136
53
  };
137
54
  }
138
55
  },
@@ -142,30 +59,31 @@ const q = {
142
59
  },
143
60
  methods: {
144
61
  async component() {
145
- let t = S.get(this.type);
62
+ let t = this.registryInstance.get(this.type);
146
63
  return t instanceof Promise ? t : (typeof t == "function" && (t = await t()), t.default ? t.default : t);
147
64
  }
148
65
  }
149
- }, Z = { class: "activity-indicator-content" }, G = {
66
+ }, $ = (t, e) => {
67
+ const i = t.__vccOpts || t;
68
+ for (const [a, s] of e)
69
+ i[a] = s;
70
+ return i;
71
+ }, z = {
72
+ class: "activity-indicator-content"
73
+ }, B = {
150
74
  key: 1,
151
75
  class: "activity-indicator-label"
152
76
  };
153
- function M(t, e, i, n, s, a) {
154
- return c(), p("div", {
155
- class: z(["activity-indicator", a.classes]),
156
- style: R(a.style)
157
- }, [
158
- N("div", Z, [
159
- t.is ? (c(), m(w(t.is()), {
160
- key: 0,
161
- class: "mx-auto"
162
- })) : b("", !0),
163
- i.label ? (c(), p("div", G, f(i.label), 1)) : b("", !0)
164
- ])
165
- ], 6);
77
+ function C(t, e, i, a, s, r) {
78
+ return o(), c("div", {
79
+ class: y(["activity-indicator", r.classes]),
80
+ style: p(r.style)
81
+ }, [b("div", z, [t.is ? (o(), d(u(t.is()), {
82
+ key: 0,
83
+ class: "mx-auto"
84
+ })) : l("", !0), i.label ? (o(), c("div", B, m(i.label), 1)) : l("", !0)])], 6);
166
85
  }
167
- const U = /* @__PURE__ */ g(q, [["render", M]]);
168
- const X = {
86
+ const w = /* @__PURE__ */ $(P, [["render", C]]), A = {
169
87
  props: {
170
88
  componentPrefix: String,
171
89
  size: String,
@@ -176,15 +94,13 @@ const X = {
176
94
  return this.sizePrefix || this.componentPrefix;
177
95
  },
178
96
  hasSizeablePrefix() {
179
- return this.size && !!this.size.match(
180
- new RegExp(`^${this.sizeableClassPrefix}`)
181
- );
97
+ return this.size === void 0 ? !1 : !!this.size.match(new RegExp(`^${this.sizeableClassPrefix}`));
182
98
  },
183
99
  sizeableClass() {
184
100
  return this.size ? !this.sizeableClassPrefix || this.hasSizeablePrefix ? this.size : `${this.sizeableClassPrefix}-${this.size}` : "";
185
101
  }
186
102
  }
187
- }, J = {
103
+ }, _ = {
188
104
  props: {
189
105
  componentPrefix: String,
190
106
  variant: String,
@@ -195,20 +111,15 @@ const X = {
195
111
  return this.variantPrefix || this.componentPrefix;
196
112
  },
197
113
  hasVariantPrefix() {
198
- return this.variant && !!this.variant.match(
199
- new RegExp(`^${this.variantClassPrefix}`)
200
- );
114
+ return this.variant === void 0 ? !1 : !!this.variant.match(new RegExp(`^${this.variantClassPrefix}`));
201
115
  },
202
116
  variantClass() {
203
117
  return this.variant ? !this.variantClassPrefix || this.hasVariantPrefix ? this.variant : `${this.variantClassPrefix}-${this.variant}` : "";
204
118
  }
205
119
  }
206
- }, K = {
120
+ }, k = {
207
121
  name: "Btn",
208
- mixins: [
209
- X,
210
- J
211
- ],
122
+ mixins: [A, _],
212
123
  props: {
213
124
  active: Boolean,
214
125
  block: Boolean,
@@ -227,14 +138,7 @@ const X = {
227
138
  },
228
139
  computed: {
229
140
  classes() {
230
- return [
231
- "btn",
232
- this.variantClass,
233
- this.sizeableClass,
234
- this.active && "active",
235
- this.block && "btn-block",
236
- this.disabled && "disabled"
237
- ];
141
+ return ["btn", this.variantClass, this.sizeableClass, this.active && "active", this.block && "btn-block", this.disabled && "disabled"];
238
142
  },
239
143
  component() {
240
144
  return this.tag ? this.tag : this.$attrs.href ? "a" : "button";
@@ -243,26 +147,26 @@ const X = {
243
147
  return (this.variantPrefix || this.componentPrefix) + (this.outline ? "-outline" : "");
244
148
  }
245
149
  }
150
+ }, N = (t, e) => {
151
+ const i = t.__vccOpts || t;
152
+ for (const [a, s] of e)
153
+ i[a] = s;
154
+ return i;
246
155
  };
247
- function Q(t, e, i, n, s, a) {
248
- return c(), m(w(a.component), O(t.$attrs, {
156
+ function H(t, e, i, a, s, r) {
157
+ return o(), d(u(r.component), f(t.$attrs, {
249
158
  disabled: i.disabled,
250
- class: a.classes,
159
+ class: r.classes,
251
160
  role: "button"
252
161
  }), {
253
- default: $(() => [
254
- A(t.$slots, "default", {}, () => [
255
- B(f(i.label), 1)
256
- ])
257
- ]),
162
+ default: g(() => [x(t.$slots, "default", {}, () => [S(m(i.label), 1)])]),
258
163
  _: 3
259
164
  }, 16, ["disabled", "class"]);
260
165
  }
261
- const Y = /* @__PURE__ */ g(K, [["render", Q]]);
262
- const tt = function(t) {
263
- const e = parseFloat(t || 0, 10), i = t && t.match(/m?s/), n = i ? i[0] : !1;
166
+ const W = /* @__PURE__ */ N(k, [["render", H]]), D = function(t) {
167
+ const e = parseFloat(t || 0), i = t && t.match(/m?s/), a = i ? i[0] : !1;
264
168
  let s;
265
- switch (n) {
169
+ switch (a) {
266
170
  case "s":
267
171
  s = e * 1e3;
268
172
  break;
@@ -272,16 +176,14 @@ const tt = function(t) {
272
176
  break;
273
177
  }
274
178
  return s || 0;
275
- }, C = function(t, e) {
179
+ }, h = function(t, e) {
276
180
  const i = (t.ownerDocument || document).defaultView;
277
- setTimeout(() => {
278
- e.apply();
279
- }, tt(i.getComputedStyle(t).animationDuration));
280
- }, et = {
181
+ setTimeout(e, D(i == null ? void 0 : i.getComputedStyle(t).animationDuration));
182
+ }, L = {
281
183
  name: "BtnActivity",
282
184
  components: {
283
- ActivityIndicator: U,
284
- Btn: Y
185
+ ActivityIndicator: w,
186
+ Btn: W
285
187
  },
286
188
  props: {
287
189
  active: Boolean,
@@ -314,12 +216,13 @@ const tt = function(t) {
314
216
  },
315
217
  computed: {
316
218
  classes() {
317
- const t = {
219
+ return {
318
220
  disabled: this.disabled,
319
221
  active: this.active,
320
- "btn-activity": this.activity
222
+ "btn-activity": this.activity,
223
+ [`btn-activity-${this.orientation.replace("btn-activity-", "")}`]: !!this.orientation,
224
+ [`'btn-activity-indicator-${this.indicatorProps.type.replace("btn-activity-indicator-", "")}`]: !!this.indicatorProps.type
321
225
  };
322
- return 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;
323
226
  },
324
227
  indicatorProps() {
325
228
  return Object.assign({
@@ -345,12 +248,12 @@ const tt = function(t) {
345
248
  this.$el.disabled = !1, this.$el.classList.remove("disabled");
346
249
  },
347
250
  hideActivity() {
348
- this.$el.classList.add("btn-hide-activity"), C(this.$el, () => {
251
+ this.$el.classList.add("btn-hide-activity"), h(this.$el, () => {
349
252
  this.enable(), this.currentActivity = !1, this.$el.classList.remove("btn-activity", "btn-hide-activity"), this.$emit("hide-activity");
350
253
  });
351
254
  },
352
255
  showActivity() {
353
- this.currentActivity = !0, this.disable(), C(this.$el, () => {
256
+ this.currentActivity = !0, this.disable(), h(this.$el, () => {
354
257
  this.$el.classList.add("btn-activity"), this.$emit("show-activity");
355
258
  });
356
259
  },
@@ -359,28 +262,6 @@ const tt = function(t) {
359
262
  }
360
263
  }
361
264
  };
362
- function it(t, e, i, n, s, a) {
363
- const o = x("activity-indicator"), _ = x("btn");
364
- return c(), m(_, {
365
- active: i.active,
366
- block: i.block,
367
- disabled: i.disabled,
368
- size: i.size,
369
- tag: i.tag,
370
- variant: i.variant,
371
- class: z(a.classes),
372
- onClick: e[0] || (e[0] = (l) => !i.disabled && t.$emit("click", l, this))
373
- }, {
374
- default: $(() => [
375
- A(t.$slots, "default", {}, () => [
376
- B(f(i.label), 1)
377
- ]),
378
- D(o, L(j(a.indicatorProps)), null, 16)
379
- ]),
380
- _: 3
381
- }, 8, ["active", "block", "disabled", "size", "tag", "variant", "class"]);
382
- }
383
- const st = /* @__PURE__ */ g(et, [["render", it]]);
384
265
  export {
385
- st as BtnActivity
266
+ L as BtnActivity
386
267
  };
package/dist/btn-activity.umd.js CHANGED
@@ -1,14 +1 @@
1
- (function(o,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(o=typeof globalThis<"u"?globalThis:o||self,n(o.BtnActivity={},o.Vue))})(this,function(o,n){"use strict";/*! *****************************************************************************
2
- Copyright (c) Microsoft Corporation.
3
-
4
- Permission to use, copy, modify, and/or distribute this software for any
5
- purpose with or without fee is hereby granted.
6
-
7
- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
8
- REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
9
- AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
10
- INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
11
- LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
12
- OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
13
- PERFORMANCE OF THIS SOFTWARE.
14
- ***************************************************************************** */var l=function(){return l=Object.assign||function(e){for(var i,s=1,a=arguments.length;s<a;s++){i=arguments[s];for(var r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r])}return e},l.apply(this,arguments)};function S(t){return t.toLowerCase()}var P=[/([a-z0-9])([A-Z])/g,/([A-Z])([A-Z][a-z])/g],C=/[^A-Z0-9]+/gi;function z(t,e){e===void 0&&(e={});for(var i=e.splitRegexp,s=i===void 0?P:i,a=e.stripRegexp,r=a===void 0?C:a,h=e.transform,m=h===void 0?S:h,_=e.delimiter,F=_===void 0?" ":_,u=v(v(t,s,"$1\0$2"),r,"\0"),y=0,p=u.length;u.charAt(y)==="\0";)y++;for(;u.charAt(p-1)==="\0";)p--;return u.slice(y,p).split("\0").map(m).join(F)}function v(t,e,i){return e instanceof RegExp?t.replace(e,i):e.reduce(function(s,a){return s.replace(a,i)},t)}function $(t,e){return e===void 0&&(e={}),z(t,l({delimiter:"."},e))}function d(t,e){return e===void 0&&(e={}),$(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,a])=>{this.register(d(s),a)}),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 w(...t){return new g(...t)}const b=w(),H="",f=(t,e)=>{const i=t.__vccOpts||t;for(const[s,a]of e)i[s]=a;return i};function c(t,e="px"){return t!=null&&t!==!1&&isFinite(t)?`${t}${e}`:t}const A={name:"ActivityIndicator",props:{absolute:Boolean,center:Boolean,label:String,size:{type:String,default:"md"},registry:{type:g,default(){return b}},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:c(this.width),maxWidth:c(this.maxWidth),minWidth:c(this.minWidth),height:c(this.height),maxHeight:c(this.maxHeight),minHeight:c(this.minHeight)}}},async mounted(){const t=await this.component();this.is=()=>t},methods:{async component(){let t=b.get(this.type);return t instanceof Promise?t:(typeof t=="function"&&(t=await t()),t.default?t.default:t)}}},B={class:"activity-indicator-content"},k={key:1,class:"activity-indicator-label"};function E(t,e,i,s,a,r){return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(["activity-indicator",r.classes]),style:n.normalizeStyle(r.style)},[n.createElementVNode("div",B,[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",k,n.toDisplayString(i.label),1)):n.createCommentVNode("",!0)])],6)}const D=f(A,[["render",E]]),I="",W="",q="",M="",Z="",G="",U="",X="",J="",K="",Q="",Y="",tt="",et="",N={name:"Btn",mixins:[{props:{componentPrefix:String,size:String,sizePrefix:String},computed:{sizeableClassPrefix(){return this.sizePrefix||this.componentPrefix},hasSizeablePrefix(){return this.size&&!!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&&!!this.variant.match(new RegExp(`^${this.variantClassPrefix}`))},variantClass(){return this.variant?!this.variantClassPrefix||this.hasVariantPrefix?this.variant:`${this.variantClassPrefix}-${this.variant}`:""}}}],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":"")}}};function R(t,e,i,s,a,r){return n.openBlock(),n.createBlock(n.resolveDynamicComponent(r.component),n.mergeProps(t.$attrs,{disabled:i.disabled,class:r.classes,role:"button"}),{default:n.withCtx(()=>[n.renderSlot(t.$slots,"default",{},()=>[n.createTextVNode(n.toDisplayString(i.label),1)])]),_:3},16,["disabled","class"])}const T=f(N,[["render",R]]),st="",O=function(t){const e=parseFloat(t||0,10),i=t&&t.match(/m?s/),s=i?i[0]:!1;let a;switch(s){case"s":a=e*1e3;break;case"ms":default:a=e;break}return a||0},x=function(t,e){const i=(t.ownerDocument||document).defaultView;setTimeout(()=>{e.apply()},O(i.getComputedStyle(t).animationDuration))},V={name:"BtnActivity",components:{ActivityIndicator:D,Btn:T},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(){const t={disabled:this.disabled,active:this.active,"btn-activity":this.activity};return 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()}},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"),x(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(),x(this.$el,()=>{this.$el.classList.add("btn-activity"),this.$emit("show-activity")})},toggle(){this.currentActivity?this.hideActivity():this.showActivity()}}};function j(t,e,i,s,a,r){const h=n.resolveComponent("activity-indicator"),m=n.resolveComponent("btn");return n.openBlock(),n.createBlock(m,{active:i.active,block:i.block,disabled:i.disabled,size:i.size,tag:i.tag,variant:i.variant,class:n.normalizeClass(r.classes),onClick:e[0]||(e[0]=_=>!i.disabled&&t.$emit("click",_,this))},{default:n.withCtx(()=>[n.renderSlot(t.$slots,"default",{},()=>[n.createTextVNode(n.toDisplayString(i.label),1)]),n.createVNode(h,n.normalizeProps(n.guardReactiveProps(r.indicatorProps)),null,16)]),_:3},8,["active","block","disabled","size","tag","variant","class"])}const L=f(V,[["render",j]]);o.BtnActivity=L,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
1
+ (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} RENAMED
@@ -1,5 +1,2 @@
1
1
  import BtnActivity from './src/BtnActivity.vue';
2
-
3
- export {
4
- BtnActivity
5
- };
2
+ export { BtnActivity };
package/dist/src/BtnActivity.vue.d.ts ADDED
@@ -0,0 +1,238 @@
1
+ declare const _sfc_main: {
2
+ name: string;
3
+ components: {
4
+ ActivityIndicator: {
5
+ props: {
6
+ absolute: BooleanConstructor;
7
+ center: BooleanConstructor;
8
+ label: StringConstructor;
9
+ size: {
10
+ type: StringConstructor;
11
+ default: string;
12
+ };
13
+ registry: {
14
+ type: StringConstructor;
15
+ default: string;
16
+ };
17
+ type: {
18
+ type: StringConstructor;
19
+ required: boolean;
20
+ };
21
+ height: (StringConstructor | NumberConstructor)[];
22
+ maxHeight: (StringConstructor | NumberConstructor)[];
23
+ minHeight: (StringConstructor | NumberConstructor)[];
24
+ width: (StringConstructor | NumberConstructor)[];
25
+ maxWidth: (StringConstructor | NumberConstructor)[];
26
+ minWidth: (StringConstructor | NumberConstructor)[];
27
+ };
28
+ data: () => {
29
+ is: null;
30
+ };
31
+ setup(props: any): {
32
+ registryInstance: unknown;
33
+ };
34
+ computed: {
35
+ classes(): {
36
+ [x: number]: boolean;
37
+ 'activity-indicator-center': any;
38
+ 'activity-indicator-absolute': any;
39
+ };
40
+ style(): {
41
+ width: string | undefined;
42
+ maxWidth: string | undefined;
43
+ minWidth: string | undefined;
44
+ height: string | undefined;
45
+ maxHeight: string | undefined;
46
+ minHeight: string | undefined; /**
47
+ * Disable the button.
48
+ *
49
+ * @property {Boolean}
50
+ */
51
+ };
52
+ };
53
+ mounted(): Promise<void>;
54
+ methods: {
55
+ component(): Promise<any>;
56
+ };
57
+ };
58
+ Btn: {
59
+ name: string;
60
+ mixins: ({
61
+ props: {
62
+ componentPrefix: StringConstructor;
63
+ size: StringConstructor;
64
+ sizePrefix: StringConstructor;
65
+ };
66
+ computed: {
67
+ sizeableClassPrefix(): string | undefined;
68
+ hasSizeablePrefix(): boolean;
69
+ sizeableClass(): string;
70
+ };
71
+ } | {
72
+ props: {
73
+ componentPrefix: StringConstructor;
74
+ variant: StringConstructor;
75
+ variantPrefix: StringConstructor;
76
+ };
77
+ computed: {
78
+ variantClassPrefix(): string | undefined;
79
+ hasVariantPrefix(): boolean;
80
+ variantClass(): string;
81
+ };
82
+ })[];
83
+ props: {
84
+ active: BooleanConstructor;
85
+ block: BooleanConstructor;
86
+ componentPrefix: {
87
+ type: StringConstructor;
88
+ default: string; /**
89
+ * Display the button as block width.
90
+ *
91
+ * @property {Boolean}
92
+ */
93
+ };
94
+ disabled: BooleanConstructor;
95
+ label: StringConstructor;
96
+ outline: BooleanConstructor;
97
+ tag: StringConstructor;
98
+ variant: {
99
+ type: StringConstructor;
100
+ default: string;
101
+ };
102
+ };
103
+ computed: {
104
+ classes(): string[];
105
+ component(): string;
106
+ variantClassPrefix(): string;
107
+ };
108
+ };
109
+ };
110
+ props: {
111
+ /**
112
+ * Make the button appear with the active state.
113
+ *
114
+ * @property {Boolean}
115
+ */
116
+ active: BooleanConstructor;
117
+ /**
118
+ * Show the activity indicator inside the button.
119
+ *
120
+ * @property {Boolean}
121
+ */
122
+ activity: BooleanConstructor;
123
+ /**
124
+ * Display the button as block width.
125
+ *
126
+ * @property {Boolean}
127
+ */
128
+ block: BooleanConstructor;
129
+ /**
130
+ * Disable the button.
131
+ *
132
+ * @property {Boolean}
133
+ */
134
+ disabled: BooleanConstructor;
135
+ /**
136
+ * The type of activity indicator inside the button.
137
+ *
138
+ * @property {String}
139
+ */
140
+ indicator: {
141
+ type: (ObjectConstructor | StringConstructor)[];
142
+ default: string;
143
+ };
144
+ /**
145
+ * The button label.
146
+ *
147
+ * @property {String}
148
+ */
149
+ label: StringConstructor;
150
+ /**
151
+ * The orientation of the activity button inside the button.
152
+ *
153
+ * @property {String}
154
+ */
155
+ orientation: {
156
+ type: StringConstructor;
157
+ default: string;
158
+ };
159
+ /**
160
+ * The size of the button.
161
+ *
162
+ * @property {String}
163
+ */
164
+ size: {
165
+ type: StringConstructor;
166
+ default: string;
167
+ };
168
+ /**
169
+ * The HTML tag.
170
+ *
171
+ * @property {String}
172
+ */
173
+ tag: StringConstructor;
174
+ /**
175
+ * The variant of the button.
176
+ *
177
+ * @property {String}
178
+ */
179
+ variant: {
180
+ type: StringConstructor;
181
+ default: string;
182
+ };
183
+ };
184
+ data(): {
185
+ currentActivity: any;
186
+ };
187
+ computed: {
188
+ /**
189
+ * An object of classes to append to the button.
190
+ *
191
+ * @return void
192
+ */
193
+ classes(): {
194
+ [x: string]: any;
195
+ disabled: any;
196
+ active: any;
197
+ 'btn-activity': any;
198
+ };
199
+ indicatorProps(): any;
200
+ };
201
+ watch: {
202
+ activity(value: boolean): void;
203
+ };
204
+ mounted(): void;
205
+ methods: {
206
+ /**
207
+ * Disable the button.
208
+ *
209
+ * @return void
210
+ */
211
+ disable(): void;
212
+ /**
213
+ * Enable the button.
214
+ *
215
+ * @return void
216
+ */
217
+ enable(): void;
218
+ /**
219
+ * Hide the activity indicator inside the button.
220
+ *
221
+ * @return void
222
+ */
223
+ hideActivity(): void;
224
+ /**
225
+ * Show the activity indicator inside the button.
226
+ *
227
+ * @return void
228
+ */
229
+ showActivity(): void;
230
+ /**
231
+ * Show the activity indicator inside the button.
232
+ *
233
+ * @return void
234
+ */
235
+ toggle(): void;
236
+ };
237
+ };
238
+ export default _sfc_main;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vue-interface/btn-activity",
3
- "version": "2.0.0-beta.1",
3
+ "version": "2.0.0-beta.2",
4
4
  "description": "A Vue activity button component.",
5
5
  "files": [
6
6
  "index.js",
@@ -8,7 +8,15 @@
8
8
  "src"
9
9
  ],
10
10
  "main": "./dist/btn-activity.umd.js",
11
- "module": "./index.js",
11
+ "module": "./dist/btn-activity.es.js",
12
+ "types": "./dist/index.d.ts",
13
+ "exports": {
14
+ ".": {
15
+ "import": "./dist/btn-activit.es.js",
16
+ "require": "./dist/btn-activit.umd.js",
17
+ "types": "./dist/index.d.ts"
18
+ }
19
+ },
12
20
  "browserslist": "last 2 versions, > 0.5%, ie >= 11",
13
21
  "scripts": {
14
22
  "dev": "vite",
@@ -39,8 +47,8 @@
39
47
  },
40
48
  "homepage": "https://github.com/vue-interface/btn-activity/docs#readme",
41
49
  "dependencies": {
42
- "@vue-interface/activity-indicator": "^2.0.0-beta.0",
43
- "@vue-interface/btn": "^3.0.0-beta.1"
50
+ "@vue-interface/activity-indicator": "^2.0.0-beta.4",
51
+ "@vue-interface/btn": "^3.0.0-beta.3"
44
52
  },
45
53
  "devDependencies": {
46
54
  "@rollup/plugin-babel": "^6.0.0",
@@ -55,6 +63,7 @@
55
63
  "postcss": "^8.4.6",
56
64
  "tailwindcss": "^3.0.18",
57
65
  "vite": "^3.1.7",
66
+ "vite-plugin-dts": "^1.7.1",
58
67
  "vue": "^3.2.40"
59
68
  }
60
69
  }
package/src/BtnActivity.vue CHANGED
@@ -1,24 +1,9 @@
1
- <template>
2
- <btn
3
- :active="active"
4
- :block="block"
5
- :disabled="disabled"
6
- :size="size"
7
- :tag="tag"
8
- :variant="variant"
9
- :class="classes"
10
- @click="(e) => !disabled && $emit('click', e, this)">
11
- <slot>{{ label }}</slot>
12
- <activity-indicator v-bind="indicatorProps" />
13
- </btn>
14
- </template>
15
-
16
- <script>
1
+ <script lang="ts">
17
2
  import { ActivityIndicator } from '@vue-interface/activity-indicator';
18
3
  import { Btn } from '@vue-interface/btn';
19
4
 
20
- const convertAnimationDelayToInt = function(delay) {
21
- const num = parseFloat(delay || 0, 10);
5
+ const convertAnimationDelayToInt = function(delay: any) {
6
+ const num = parseFloat(delay || 0);
22
7
  const matches = delay && delay.match(/m?s/);
23
8
  const unit = matches ? matches[0] : false;
24
9
 
@@ -37,12 +22,10 @@ const convertAnimationDelayToInt = function(delay) {
37
22
  return milliseconds || 0;
38
23
  };
39
24
 
40
- const animated = function(el, callback) {
25
+ const animated = function(el: HTMLElement, callback: Function) {
41
26
  const defaultView = (el.ownerDocument || document).defaultView;
42
27
 
43
- setTimeout(() => {
44
- callback.apply();
45
- }, convertAnimationDelayToInt(defaultView.getComputedStyle(el).animationDuration));
28
+ setTimeout(callback, convertAnimationDelayToInt(defaultView?.getComputedStyle(el).animationDuration));
46
29
  };
47
30
 
48
31
  export default {
@@ -153,16 +136,13 @@ export default {
153
136
  * @return void
154
137
  */
155
138
  classes() {
156
- const classes = {
139
+ return {
157
140
  'disabled': this.disabled,
158
141
  'active': this.active,
159
- 'btn-activity': this.activity
142
+ 'btn-activity': this.activity,
143
+ [`btn-activity-${this.orientation.replace('btn-activity-', '')}`]: !!this.orientation,
144
+ [`'btn-activity-indicator-${this.indicatorProps.type.replace('btn-activity-indicator-', '')}`]: !!this.indicatorProps.type,
160
145
  };
161
-
162
- classes['btn-activity-' + this.orientation.replace('btn-activity-', '')] = !!this.orientation;
163
- classes['btn-activity-indicator-' + this.indicatorProps.type.replace('btn-activity-indicator-', '')] = !!this.indicatorProps.type;
164
-
165
- return classes;
166
146
  },
167
147
 
168
148
  indicatorProps() {
@@ -177,7 +157,7 @@ export default {
177
157
 
178
158
  watch: {
179
159
 
180
- activity(value) {
160
+ activity(value: boolean) {
181
161
  if(value) {
182
162
  this.showActivity();
183
163
  }