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

package/dist/btn-activity.es.js

@@ -1,8 +1,8 @@
-import { inject as v, openBlock as o, createElementBlock as c, normalizeClass as y, normalizeStyle as p, createElementVNode as b, createBlock as d, resolveDynamicComponent as u, createCommentVNode as l, toDisplayString as m, mergeProps as f, withCtx as g, renderSlot as x, createTextVNode as S } from "vue";
-function n(t, e = "px") {
+import { inject as P, openBlock as c, createElementBlock as h, normalizeClass as m, normalizeStyle as S, createElementVNode as z, createBlock as o, resolveDynamicComponent as y, createCommentVNode as d, toDisplayString as l, mergeProps as _, withCtx as b, renderSlot as f, createTextVNode as p, resolveComponent as u, createVNode as $, normalizeProps as C, guardReactiveProps as B } from "vue";
+function r(t, e = "px") {
   return t != null && t !== !1 && isFinite(t) ? `${t}${e}` : t;
 }
-const P = {
+const w = {
   props: {
     absolute: Boolean,
     center: Boolean,
@@ -31,7 +31,7 @@ const P = {
   }),
   setup(t) {
     return {
-      registryInstance: v(t.registry || "indicators")
+      registryInstance: P(t.registry || "indicators")
     };
   },
   computed: {
@@ -44,12 +44,12 @@ const P = {
     },
     style() {
       return {
-        width: n(this.width),
-        maxWidth: n(this.maxWidth),
-        minWidth: n(this.minWidth),
-        height: n(this.height),
-        maxHeight: n(this.maxHeight),
-        minHeight: n(this.minHeight)
+        width: r(this.width),
+        maxWidth: r(this.maxWidth),
+        minWidth: r(this.minWidth),
+        height: r(this.height),
+        maxHeight: r(this.maxHeight),
+        minHeight: r(this.minHeight)
       };
     }
   },
@@ -63,27 +63,27 @@ const P = {
       return t instanceof Promise ? t : (typeof t == "function" && (t = await t()), t.default ? t.default : t);
     }
   }
-}, $ = (t, e) => {
+}, A = (t, e) => {
   const i = t.__vccOpts || t;
   for (const [a, s] of e)
     i[a] = s;
   return i;
-}, z = {
+}, k = {
   class: "activity-indicator-content"
-}, B = {
+}, N = {
   key: 1,
   class: "activity-indicator-label"
 };
-function C(t, e, i, a, s, r) {
-  return o(), c("div", {
-    class: y(["activity-indicator", r.classes]),
-    style: p(r.style)
-  }, [b("div", z, [t.is ? (o(), d(u(t.is()), {
+function H(t, e, i, a, s, n) {
+  return c(), h("div", {
+    class: m(["activity-indicator", n.classes]),
+    style: S(n.style)
+  }, [z("div", k, [t.is ? (c(), o(y(t.is()), {
     key: 0,
     class: "mx-auto"
-  })) : l("", !0), i.label ? (o(), c("div", B, m(i.label), 1)) : l("", !0)])], 6);
+  })) : d("", !0), i.label ? (c(), h("div", N, l(i.label), 1)) : d("", !0)])], 6);
 }
-const w = /* @__PURE__ */ $(P, [["render", C]]), A = {
+const O = /* @__PURE__ */ A(w, [["render", H]]), V = {
   props: {
     componentPrefix: String,
     size: String,
@@ -100,7 +100,7 @@ const w = /* @__PURE__ */ $(P, [["render", C]]), A = {
       return this.size ? !this.sizeableClassPrefix || this.hasSizeablePrefix ? this.size : `${this.sizeableClassPrefix}-${this.size}` : "";
     }
   }
-}, _ = {
+}, W = {
   props: {
     componentPrefix: String,
     variant: String,
@@ -117,9 +117,9 @@ const w = /* @__PURE__ */ $(P, [["render", C]]), A = {
       return this.variant ? !this.variantClassPrefix || this.hasVariantPrefix ? this.variant : `${this.variantClassPrefix}-${this.variant}` : "";
     }
   }
-}, k = {
+}, D = {
   name: "Btn",
-  mixins: [A, _],
+  mixins: [V, W],
   props: {
     active: Boolean,
     block: Boolean,
@@ -147,23 +147,23 @@ const w = /* @__PURE__ */ $(P, [["render", C]]), A = {
       return (this.variantPrefix || this.componentPrefix) + (this.outline ? "-outline" : "");
     }
   }
-}, N = (t, e) => {
+}, E = (t, e) => {
   const i = t.__vccOpts || t;
   for (const [a, s] of e)
     i[a] = s;
   return i;
 };
-function H(t, e, i, a, s, r) {
-  return o(), d(u(r.component), f(t.$attrs, {
+function L(t, e, i, a, s, n) {
+  return c(), o(y(n.component), _(t.$attrs, {
     disabled: i.disabled,
-    class: r.classes,
+    class: n.classes,
     role: "button"
   }), {
-    default: g(() => [x(t.$slots, "default", {}, () => [S(m(i.label), 1)])]),
+    default: b(() => [f(t.$slots, "default", {}, () => [p(l(i.label), 1)])]),
     _: 3
   }, 16, ["disabled", "class"]);
 }
-const W = /* @__PURE__ */ N(k, [["render", H]]), D = function(t) {
+const j = /* @__PURE__ */ E(D, [["render", L]]), I = function(t) {
   const e = parseFloat(t || 0), i = t && t.match(/m?s/), a = i ? i[0] : !1;
   let s;
   switch (a) {
@@ -176,14 +176,17 @@ const W = /* @__PURE__ */ N(k, [["render", H]]), D = function(t) {
       break;
   }
   return s || 0;
-}, h = function(t, e) {
+}, v = function(t, e) {
   const i = (t.ownerDocument || document).defaultView;
-  setTimeout(e, D(i == null ? void 0 : i.getComputedStyle(t).animationDuration));
-}, L = {
+  setTimeout(
+    e,
+    I(i == null ? void 0 : i.getComputedStyle(t).animationDuration)
+  );
+}, R = {
   name: "BtnActivity",
   components: {
-    ActivityIndicator: w,
-    Btn: W
+    ActivityIndicator: O,
+    Btn: j
   },
   props: {
     active: Boolean,
@@ -221,15 +224,21 @@ const W = /* @__PURE__ */ N(k, [["render", H]]), D = function(t) {
         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
+        [`'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) || {});
+      return Object.assign(
+        {
+          type: "spinner"
+        },
+        (typeof this.indicator == "string" ? {
+          type: this.indicator
+        } : this.indicator) || {}
+      );
     }
   },
   watch: {
@@ -248,12 +257,12 @@ const W = /* @__PURE__ */ N(k, [["render", H]]), D = function(t) {
       this.$el.disabled = !1, this.$el.classList.remove("disabled");
     },
     hideActivity() {
-      this.$el.classList.add("btn-hide-activity"), h(this.$el, () => {
+      this.$el.classList.add("btn-hide-activity"), v(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(), h(this.$el, () => {
+      this.currentActivity = !0, this.disable(), v(this.$el, () => {
         this.$el.classList.add("btn-activity"), this.$emit("show-activity");
       });
     },
@@ -262,6 +271,33 @@ const W = /* @__PURE__ */ N(k, [["render", H]]), D = function(t) {
     }
   }
 };
+const T = (t, e) => {
+  const i = t.__vccOpts || t;
+  for (const [a, s] of e)
+    i[a] = s;
+  return i;
+};
+function F(t, e, i, a, s, n) {
+  const g = u("activity-indicator"), x = u("btn");
+  return c(), o(x, {
+    active: i.active,
+    block: i.block,
+    disabled: i.disabled,
+    size: i.size,
+    tag: i.tag,
+    variant: i.variant,
+    class: m(n.classes)
+  }, {
+    default: b(() => [
+      f(t.$slots, "default", {}, () => [
+        p(l(i.label), 1)
+      ]),
+      $(g, C(B(n.indicatorProps)), null, 16)
+    ]),
+    _: 3
+  }, 8, ["active", "block", "disabled", "size", "tag", "variant", "class"]);
+}
+const G = /* @__PURE__ */ T(R, [["render", F]]);
 export {
-  L as BtnActivity
+  G as BtnActivity
 };

package/dist/btn-activity.umd.js

@@ -1 +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"}})});
+(function(o,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(o=typeof globalThis<"u"?globalThis:o||self,i(o.BtnActivity={},o.Vue))})(this,function(o,i){"use strict";function c(t,s="px"){return t!=null&&t!==!1&&isFinite(t)?`${t}${s}`:t}const d={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: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=this.registryInstance.get(this.type);return t instanceof Promise?t:(typeof t=="function"&&(t=await t()),t.default?t.default:t)}}},h=(t,s)=>{const e=t.__vccOpts||t;for(const[a,n]of s)e[a]=n;return e},m={class:"activity-indicator-content"},y={key:1,class:"activity-indicator-label"};function f(t,s,e,a,n,r){return i.openBlock(),i.createElementBlock("div",{class:i.normalizeClass(["activity-indicator",r.classes]),style:i.normalizeStyle(r.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",y,i.toDisplayString(e.label),1)):i.createCommentVNode("",!0)])],6)}const p=h(d,[["render",f]]),b={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}`:""}}},u={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}`:""}}},g={name:"Btn",mixins:[b,u],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":"")}}},v=(t,s)=>{const e=t.__vccOpts||t;for(const[a,n]of s)e[a]=n;return e};function x(t,s,e,a,n,r){return i.openBlock(),i.createBlock(i.resolveDynamicComponent(r.component),i.mergeProps(t.$attrs,{disabled:e.disabled,class:r.classes,role:"button"}),{default:i.withCtx(()=>[i.renderSlot(t.$slots,"default",{},()=>[i.createTextVNode(i.toDisplayString(e.label),1)])]),_:3},16,["disabled","class"])}const S=v(g,[["render",x]]),P=function(t){const s=parseFloat(t||0),e=t&&t.match(/m?s/),a=e?e[0]:!1;let n;switch(a){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))},z={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()}}},A="",_=(t,s)=>{const e=t.__vccOpts||t;for(const[a,n]of s)e[a]=n;return e};function B(t,s,e,a,n,r){const k=i.resolveComponent("activity-indicator"),$=i.resolveComponent("btn");return i.openBlock(),i.createBlock($,{active:e.active,block:e.block,disabled:e.disabled,size:e.size,tag:e.tag,variant:e.variant,class:i.normalizeClass(r.classes)},{default:i.withCtx(()=>[i.renderSlot(t.$slots,"default",{},()=>[i.createTextVNode(i.toDisplayString(e.label),1)]),i.createVNode(k,i.normalizeProps(i.guardReactiveProps(r.indicatorProps)),null,16)]),_:3},8,["active","block","disabled","size","tag","variant","class"])}const C=_(z,[["render",B]]);o.BtnActivity=C,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

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

@@ -43,11 +43,7 @@ declare const _sfc_main: {
                     minWidth: string | undefined;
                     height: string | undefined;
                     maxHeight: string | undefined;
-                    minHeight: string | undefined; /**
-                     * Disable the button.
-                     *
-                     * @property {Boolean}
-                     */
+                    minHeight: string | undefined;
                 };
             };
             mounted(): Promise<void>;
@@ -81,15 +77,15 @@ declare const _sfc_main: {
                 };
             })[];
             props: {
-                active: BooleanConstructor;
+                active: BooleanConstructor; /**
+                 * Make the button appear with the active state.
+                 *
+                 * @property {Boolean}
+                 */
                 block: BooleanConstructor;
                 componentPrefix: {
                     type: StringConstructor;
-                    default: string; /**
-                     * Display the button as block width.
-                     *
-                     * @property {Boolean}
-                     */
+                    default: string;
                 };
                 disabled: BooleanConstructor;
                 label: StringConstructor;
@@ -194,7 +190,7 @@ declare const _sfc_main: {
             [x: string]: any;
             disabled: any;
             active: any;
-            'btn-activity': any;
+            "btn-activity": any;
         };
         indicatorProps(): any;
     };

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@vue-interface/btn-activity",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.4",
   "description": "A Vue activity button component.",
   "files": [
     "index.js",
-    "dist",
-    "src"
+    "dist"
   ],
   "main": "./dist/btn-activity.umd.js",
   "module": "./dist/btn-activity.es.js",

package/src/BtnActivity.vue

@@ -1,349 +0,0 @@
-<script lang="ts">
-import { ActivityIndicator } from '@vue-interface/activity-indicator';
-import { Btn } from '@vue-interface/btn';
-
-const convertAnimationDelayToInt = function(delay: any) {
-    const num = parseFloat(delay || 0);
-    const matches = delay && delay.match(/m?s/);
-    const unit = matches ? matches[0] : false;
-
-    let milliseconds;
-
-    switch (unit) {
-    case 's': // seconds
-        milliseconds = num * 1000;
-        break;
-    case 'ms':
-    default:
-        milliseconds = num;
-        break;
-    }
-
-    return milliseconds || 0;
-};
-
-const animated = function(el: HTMLElement, callback: Function) {
-    const defaultView = (el.ownerDocument || document).defaultView;
-
-    setTimeout(callback, convertAnimationDelayToInt(defaultView?.getComputedStyle(el).animationDuration));
-};
-
-export default {
-
-    name: 'BtnActivity',
-    
-    components: {
-        ActivityIndicator,
-        Btn
-    },
-
-    props: {
-
-        /**
-         * Make the button appear with the active state.
-         *
-         * @property {Boolean}
-         */
-        active: Boolean,
-
-        /**
-         * Show the activity indicator inside the button.
-         *
-         * @property {Boolean}
-         */
-        activity: Boolean,
-
-        /**
-         * Display the button as block width.
-         *
-         * @property {Boolean}
-         */
-        block: Boolean,
-
-        /**
-         * Disable the button.
-         *
-         * @property {Boolean}
-         */
-        disabled: Boolean,
-
-        /**
-         * The type of activity indicator inside the button.
-         *
-         * @property {String}
-         */
-        indicator: {
-            type: [Object, String],
-            default: 'spinner'
-        },
-
-        /**
-         * The button label.
-         *
-         * @property {String}
-         */
-        label: String,
-
-        /**
-         * The orientation of the activity button inside the button.
-         *
-         * @property {String}
-         */
-        orientation: {
-            type: String,
-            default: 'right'
-        },
-
-        /**
-         * The size of the button.
-         *
-         * @property {String}
-         */
-        size: {
-            type: String,
-            default: 'md'
-        },
-
-        /**
-         * The HTML tag.
-         *
-         * @property {String}
-         */
-        tag: String,
-
-        /**
-         * The variant of the button.
-         *
-         * @property {String}
-         */
-        variant: {
-            type: String,
-            default: 'primary'
-        }
-    },
-    
-    data() {
-        return {
-            currentActivity: this.activity
-        };
-    },
-
-    computed: {
-
-        /**
-         * An object of classes to append to the button.
-         *
-         * @return void
-         */
-        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(value: boolean) {
-            if(value) {
-                this.showActivity();
-            }
-            else {
-                this.hideActivity();
-            }
-        }
-
-    },
-
-    mounted() {
-        if(this.activity) {
-            this.showActivity();
-        }
-    },
-
-    methods: {
-
-        /**
-         * Disable the button.
-         *
-         * @return void
-         */
-        disable() {
-            this.$el.disabled = true;
-            this.$el.classList.add('disabled');
-        },
-
-        /**
-         * Enable the button.
-         *
-         * @return void
-         */
-        enable() {
-            this.$el.disabled = false;
-            this.$el.classList.remove('disabled');
-        },
-
-        /**
-         * Hide the activity indicator inside the button.
-         *
-         * @return void
-         */
-        hideActivity() {
-            this.$el.classList.add('btn-hide-activity');
-
-            animated(this.$el, () => {
-                this.enable();
-                this.currentActivity = false;
-                this.$el.classList.remove('btn-activity', 'btn-hide-activity');
-                this.$emit('hide-activity');
-            });
-        },
-
-        /**
-         * Show the activity indicator inside the button.
-         *
-         * @return void
-         */
-        showActivity() {
-            this.currentActivity = true;
-            this.disable();
-
-            animated(this.$el, () => {
-                this.$el.classList.add('btn-activity');
-                this.$emit('show-activity');
-            });
-        },
-
-        /**
-         * Show the activity indicator inside the button.
-         *
-         * @return void
-         */
-        toggle() {
-            if(!this.currentActivity) {
-                this.showActivity();
-            }
-            else {
-                this.hideActivity();
-            }
-        }
-
-    }
-
-};
-</script>
-
-<style>
-@keyframes btn-activity-in {
-    0%, 100% {
-        transform: scale(1);
-    } 30% {
-        transform: scale(.98);
-    }
-}
-
-@keyframes btn-activity-out {
-    0%, 100% {
-        transform: scale(1);
-    } 70% {
-        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: inline-flex;
-    position: relative;
-    transition: all calc(333ms / 2) 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;
-    transition: opacity 333ms ease-in;
-}
-
-.btn-activity-top,
-.btn-activity-bottom {
-    flex-direction: column;
-    align-items: center;
-}
-
-.btn-activity-top .activity-indicator,
-.btn-activity-bottom .activity-indicator {
-    margin-left: auto;
-    margin-right: auto;
-}
-
-.btn-activity-top {
-    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 {
-    align-items: center;
-    justify-content: center;
-}
-
-.btn-activity-left {
-    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) {
-    animation: btn-activity-in 333ms;
-}
-
-.btn-hide-activity:not(.btn-link) {
-    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;
-}
-</style>