@vue-interface/btn-activity 2.0.0-beta.3 → 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,17 +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)
+    I(i == null ? void 0 : i.getComputedStyle(t).animationDuration)
   );
-}, L = {
+}, R = {
   name: "BtnActivity",
   components: {
-    ActivityIndicator: w,
-    Btn: W
+    ActivityIndicator: O,
+    Btn: j
   },
   props: {
     active: Boolean,
@@ -257,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");
       });
     },
@@ -271,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/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@vue-interface/btn-activity",
-  "version": "2.0.0-beta.3",
+  "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,354 +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(0.98);
-  }
-}
-
-@keyframes btn-activity-out {
-  0%,
-  100% {
-    transform: scale(1);
-  }
-  70% {
-    transform: scale(0.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: 0.55em;
-}
-</style>