@vue-interface/btn-activity 2.0.0-beta.1 → 2.0.0-beta.3
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.
- package/dist/btn-activity.css +1 -1
- package/dist/btn-activity.es.js +78 -188
- package/dist/btn-activity.umd.js +1 -14
- package/{index.js → dist/index.d.ts} +1 -4
- package/dist/src/BtnActivity.vue.d.ts +234 -0
- package/package.json +13 -4
- package/src/BtnActivity.vue +262 -277
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
|
|
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
|
|
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:
|
|
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:
|
|
131
|
-
maxWidth:
|
|
132
|
-
minWidth:
|
|
133
|
-
height:
|
|
134
|
-
maxHeight:
|
|
135
|
-
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 =
|
|
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
|
-
},
|
|
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
|
|
154
|
-
return
|
|
155
|
-
class:
|
|
156
|
-
style:
|
|
157
|
-
}, [
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
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
|
|
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
|
|
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
|
-
},
|
|
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
|
|
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
|
-
},
|
|
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
|
|
248
|
-
return
|
|
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:
|
|
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
|
|
262
|
-
const
|
|
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 (
|
|
169
|
+
switch (a) {
|
|
266
170
|
case "s":
|
|
267
171
|
s = e * 1e3;
|
|
268
172
|
break;
|
|
@@ -272,16 +176,17 @@ const tt = function(t) {
|
|
|
272
176
|
break;
|
|
273
177
|
}
|
|
274
178
|
return s || 0;
|
|
275
|
-
},
|
|
179
|
+
}, h = function(t, e) {
|
|
276
180
|
const i = (t.ownerDocument || document).defaultView;
|
|
277
|
-
setTimeout(
|
|
278
|
-
e
|
|
279
|
-
|
|
280
|
-
|
|
181
|
+
setTimeout(
|
|
182
|
+
e,
|
|
183
|
+
D(i == null ? void 0 : i.getComputedStyle(t).animationDuration)
|
|
184
|
+
);
|
|
185
|
+
}, L = {
|
|
281
186
|
name: "BtnActivity",
|
|
282
187
|
components: {
|
|
283
|
-
ActivityIndicator:
|
|
284
|
-
Btn:
|
|
188
|
+
ActivityIndicator: w,
|
|
189
|
+
Btn: W
|
|
285
190
|
},
|
|
286
191
|
props: {
|
|
287
192
|
active: Boolean,
|
|
@@ -314,19 +219,26 @@ const tt = function(t) {
|
|
|
314
219
|
},
|
|
315
220
|
computed: {
|
|
316
221
|
classes() {
|
|
317
|
-
|
|
222
|
+
return {
|
|
318
223
|
disabled: this.disabled,
|
|
319
224
|
active: this.active,
|
|
320
|
-
"btn-activity": this.activity
|
|
225
|
+
"btn-activity": this.activity,
|
|
226
|
+
[`btn-activity-${this.orientation.replace("btn-activity-", "")}`]: !!this.orientation,
|
|
227
|
+
[`'btn-activity-indicator-${this.indicatorProps.type.replace(
|
|
228
|
+
"btn-activity-indicator-",
|
|
229
|
+
""
|
|
230
|
+
)}`]: !!this.indicatorProps.type
|
|
321
231
|
};
|
|
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
232
|
},
|
|
324
233
|
indicatorProps() {
|
|
325
|
-
return Object.assign(
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
234
|
+
return Object.assign(
|
|
235
|
+
{
|
|
236
|
+
type: "spinner"
|
|
237
|
+
},
|
|
238
|
+
(typeof this.indicator == "string" ? {
|
|
239
|
+
type: this.indicator
|
|
240
|
+
} : this.indicator) || {}
|
|
241
|
+
);
|
|
330
242
|
}
|
|
331
243
|
},
|
|
332
244
|
watch: {
|
|
@@ -345,12 +257,12 @@ const tt = function(t) {
|
|
|
345
257
|
this.$el.disabled = !1, this.$el.classList.remove("disabled");
|
|
346
258
|
},
|
|
347
259
|
hideActivity() {
|
|
348
|
-
this.$el.classList.add("btn-hide-activity"),
|
|
260
|
+
this.$el.classList.add("btn-hide-activity"), h(this.$el, () => {
|
|
349
261
|
this.enable(), this.currentActivity = !1, this.$el.classList.remove("btn-activity", "btn-hide-activity"), this.$emit("hide-activity");
|
|
350
262
|
});
|
|
351
263
|
},
|
|
352
264
|
showActivity() {
|
|
353
|
-
this.currentActivity = !0, this.disable(),
|
|
265
|
+
this.currentActivity = !0, this.disable(), h(this.$el, () => {
|
|
354
266
|
this.$el.classList.add("btn-activity"), this.$emit("show-activity");
|
|
355
267
|
});
|
|
356
268
|
},
|
|
@@ -359,28 +271,6 @@ const tt = function(t) {
|
|
|
359
271
|
}
|
|
360
272
|
}
|
|
361
273
|
};
|
|
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
274
|
export {
|
|
385
|
-
|
|
275
|
+
L as BtnActivity
|
|
386
276
|
};
|
package/dist/btn-activity.umd.js
CHANGED
|
@@ -1,14 +1 @@
|
|
|
1
|
-
(function(
|
|
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"}})});
|