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

package/dist/btn-activity.es.js

@@ -1,4 +1,4 @@
-import { openBlock as c, createElementBlock as d, normalizeClass as m, normalizeStyle as $, createElementVNode as k, createBlock as P, resolveDynamicComponent as z, createCommentVNode as p, toDisplayString as S, resolveComponent as B, createTextVNode as E, renderSlot as D, createVNode as N, normalizeProps as O, guardReactiveProps as R } from "vue";
+import { openBlock as c, createElementBlock as p, normalizeClass as z, normalizeStyle as R, createElementVNode as N, createBlock as m, resolveDynamicComponent as w, createCommentVNode as b, toDisplayString as f, mergeProps as O, withCtx as $, renderSlot as A, createTextVNode as B, resolveComponent as x, createVNode as D, normalizeProps as L, guardReactiveProps as j } from "vue";
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -13,81 +13,81 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-var u = function() {
-  return u = Object.assign || function(e) {
+var h = function() {
+  return h = Object.assign || function(e) {
     for (var i, n = 1, s = arguments.length; n < s; n++) {
       i = arguments[n];
-      for (var r in i)
-        Object.prototype.hasOwnProperty.call(i, r) && (e[r] = i[r]);
+      for (var a in i)
+        Object.prototype.hasOwnProperty.call(i, a) && (e[a] = i[a]);
     }
     return e;
-  }, u.apply(this, arguments);
+  }, h.apply(this, arguments);
 };
-function j(t) {
+function T(t) {
   return t.toLowerCase();
 }
-var T = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g], F = /[^A-Z0-9]+/gi;
-function L(t, e) {
+var V = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g], F = /[^A-Z0-9]+/gi;
+function H(t, e) {
   e === void 0 && (e = {});
-  for (var i = e.splitRegexp, n = i === void 0 ? T : i, s = e.stripRegexp, r = s === void 0 ? F : s, o = e.transform, h = o === void 0 ? j : o, g = e.delimiter, C = g === void 0 ? " " : g, l = f(f(t, n, "$1\0$2"), r, "\0"), y = 0, v = l.length; l.charAt(y) === "\0"; )
-    y++;
-  for (; l.charAt(v - 1) === "\0"; )
-    v--;
-  return l.slice(y, v).split("\0").map(h).join(C);
+  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"; )
+    v++;
+  for (; d.charAt(y - 1) === "\0"; )
+    y--;
+  return d.slice(v, y).split("\0").map(_).join(E);
 }
-function f(t, e, i) {
+function P(t, e, i) {
   return e instanceof RegExp ? t.replace(e, i) : e.reduce(function(n, s) {
     return n.replace(s, i);
   }, t);
 }
-function H(t, e) {
-  return e === void 0 && (e = {}), L(t, u({
+function I(t, e) {
+  return e === void 0 && (e = {}), H(t, h({
     delimiter: "."
   }, e));
 }
-function _(t, e) {
-  return e === void 0 && (e = {}), H(t, u({
+function u(t, e) {
+  return e === void 0 && (e = {}), I(t, h({
     delimiter: "-"
   }, e));
 }
-class w {
+class k {
   constructor(e = {}) {
     this.components = /* @__PURE__ */ new Map(), Object.entries(e).forEach(([i, n]) => {
       this.register(i, n);
     });
   }
   get(e) {
-    const i = this.components.get(e = _(e));
+    const i = this.components.get(e = u(e));
     if (i)
       return i;
     throw new Error(`"${e}" has not been registered yet!`);
   }
   register(e, i) {
     return typeof e == "object" ? (Object.entries(e).forEach(([n, s]) => {
-      this.register(_(n), s);
-    }), this) : (this.components.set(_(e), i), this);
+      this.register(u(n), s);
+    }), this) : (this.components.set(u(e), i), this);
   }
   remove(e) {
-    return this.components.delete(_(e)), this;
+    return this.components.delete(u(e)), this;
   }
   reset() {
     return this.components = /* @__PURE__ */ new Map(), this;
   }
 }
-function I(...t) {
-  return new w(...t);
+function W(...t) {
+  return new k(...t);
 }
-const b = I();
-const A = (t, e) => {
+const S = W();
+const g = (t, e) => {
   const i = t.__vccOpts || t;
   for (const [n, s] of e)
     i[n] = s;
   return i;
 };
-function a(t, e = "px") {
+function r(t, e = "px") {
   return t != null && t !== !1 && isFinite(t) ? `${t}${e}` : t;
 }
-const V = {
+const q = {
   name: "ActivityIndicator",
   props: {
     absolute: Boolean,
@@ -98,9 +98,9 @@ const V = {
       default: "md"
     },
     registry: {
-      type: w,
+      type: k,
       default() {
-        return b;
+        return S;
       }
     },
     type: {
@@ -127,12 +127,12 @@ const V = {
     },
     style() {
       return {
-        width: a(this.width),
-        maxWidth: a(this.maxWidth),
-        minWidth: a(this.minWidth),
-        height: a(this.height),
-        maxHeight: a(this.maxHeight),
-        minHeight: a(this.minHeight)
+        width: r(this.width),
+        maxWidth: r(this.maxWidth),
+        minWidth: r(this.minWidth),
+        height: r(this.height),
+        maxHeight: r(this.maxHeight),
+        minHeight: r(this.minHeight)
       };
     }
   },
@@ -142,30 +142,124 @@ const V = {
   },
   methods: {
     async component() {
-      let t = b.get(this.type);
+      let t = S.get(this.type);
       return t instanceof Promise ? t : (typeof t == "function" && (t = await t()), t.default ? t.default : t);
     }
   }
-}, W = { class: "activity-indicator-content" }, q = {
+}, Z = { class: "activity-indicator-content" }, G = {
   key: 1,
   class: "activity-indicator-label"
 };
-function Z(t, e, i, n, s, r) {
-  return c(), d("div", {
-    class: m(["activity-indicator", r.classes]),
-    style: $(r.style)
+function M(t, e, i, n, s, a) {
+  return c(), p("div", {
+    class: z(["activity-indicator", a.classes]),
+    style: R(a.style)
   }, [
-    k("div", W, [
-      t.is ? (c(), P(z(t.is()), {
+    N("div", Z, [
+      t.is ? (c(), m(w(t.is()), {
         key: 0,
         class: "mx-auto"
-      })) : p("", !0),
-      i.label ? (c(), d("div", q, S(i.label), 1)) : p("", !0)
+      })) : b("", !0),
+      i.label ? (c(), p("div", G, f(i.label), 1)) : b("", !0)
     ])
   ], 6);
 }
-const G = /* @__PURE__ */ A(V, [["render", Z]]);
-const M = function(t) {
+const U = /* @__PURE__ */ g(q, [["render", M]]);
+const X = {
+  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}` : "";
+    }
+  }
+}, J = {
+  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}` : "";
+    }
+  }
+}, K = {
+  name: "Btn",
+  mixins: [
+    X,
+    J
+  ],
+  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 Q(t, e, i, n, s, a) {
+  return c(), m(w(a.component), O(t.$attrs, {
+    disabled: i.disabled,
+    class: a.classes,
+    role: "button"
+  }), {
+    default: $(() => [
+      A(t.$slots, "default", {}, () => [
+        B(f(i.label), 1)
+      ])
+    ]),
+    _: 3
+  }, 16, ["disabled", "class"]);
+}
+const Y = /* @__PURE__ */ g(K, [["render", Q]]);
+const tt = function(t) {
   const e = parseFloat(t || 0, 10), i = t && t.match(/m?s/), n = i ? i[0] : !1;
   let s;
   switch (n) {
@@ -178,50 +272,54 @@ const M = function(t) {
       break;
   }
   return s || 0;
-}, x = function(t, e) {
+}, C = function(t, e) {
   const i = (t.ownerDocument || document).defaultView;
   setTimeout(() => {
     e.apply();
-  }, M(i.getComputedStyle(t).animationDuration));
-}, U = {
+  }, tt(i.getComputedStyle(t).animationDuration));
+}, et = {
   name: "BtnActivity",
   components: {
-    ActivityIndicator: G
+    ActivityIndicator: U,
+    Btn: Y
   },
   props: {
     active: Boolean,
     activity: Boolean,
     block: Boolean,
     disabled: Boolean,
+    indicator: {
+      type: [Object, String],
+      default: "spinner"
+    },
     label: String,
-    icon: String,
-    type: String,
+    orientation: {
+      type: String,
+      default: "right"
+    },
     size: {
       type: String,
       default: "md"
     },
+    tag: String,
     variant: {
       type: String,
       default: "primary"
-    },
-    indicator: {
-      type: [Object, String],
-      default: "spinner"
-    },
-    orientation: {
-      type: String,
-      default: "right"
     }
   },
+  data() {
+    return {
+      currentActivity: this.activity
+    };
+  },
   computed: {
     classes() {
       const t = {
         disabled: this.disabled,
         active: this.active,
-        "btn-block": this.block,
         "btn-activity": this.activity
       };
-      return t["btn-" + this.size.replace("btn-", "")] = !!this.size, t["btn-" + this.variant.replace("btn-", "")] = !!this.variant, t["btn-activity-" + this.orientation.replace("btn-activity-", "")] = !!this.orientation, t["btn-activity-indicator-" + this.indicatorProps.type.replace("btn-activity-indicator-", "")] = !!this.indicatorProps.type, t;
+      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({
@@ -236,45 +334,53 @@ const M = function(t) {
       t ? this.showActivity() : this.hideActivity();
     }
   },
+  mounted() {
+    this.activity && this.showActivity();
+  },
   methods: {
     disable() {
-      this.$el.disabled = !0;
+      this.$el.disabled = !0, this.$el.classList.add("disabled");
     },
     enable() {
-      this.$el.disabled = !1;
+      this.$el.disabled = !1, this.$el.classList.remove("disabled");
     },
-    showActivity() {
-      this.disable(), x(this.$el, () => {
-        this.$el.classList.add("btn-activity"), this.$emit("show-activity");
+    hideActivity() {
+      this.$el.classList.add("btn-hide-activity"), C(this.$el, () => {
+        this.enable(), this.currentActivity = !1, this.$el.classList.remove("btn-activity", "btn-hide-activity"), this.$emit("hide-activity");
       });
     },
-    hideActivity() {
-      this.$el.classList.add("btn-hide-activity"), x(this.$el, () => {
-        this.enable(), this.$el.classList.remove("btn-activity", "btn-hide-activity"), this.$emit("hide-activity");
+    showActivity() {
+      this.currentActivity = !0, this.disable(), C(this.$el, () => {
+        this.$el.classList.add("btn-activity"), this.$emit("show-activity");
       });
     },
-    onClick(t) {
-      this.disabled ? t.preventDefault() : this.$emit("click", t);
+    toggle() {
+      this.currentActivity ? this.hideActivity() : this.showActivity();
     }
   }
-}, X = ["type"];
-function J(t, e, i, n, s, r) {
-  const o = B("activity-indicator");
-  return c(), d("button", {
-    type: i.type,
-    class: m(["btn", r.classes]),
-    onClick: e[0] || (e[0] = (...h) => r.onClick && r.onClick(...h))
-  }, [
-    i.icon ? (c(), d("i", {
-      key: 0,
-      class: m(i.icon)
-    }, null, 2)) : p("", !0),
-    E(" " + S(i.label) + " ", 1),
-    D(t.$slots, "default"),
-    N(o, O(R(r.indicatorProps)), null, 16)
-  ], 10, X);
+};
+function it(t, e, i, n, s, a) {
+  const o = x("activity-indicator"), _ = x("btn");
+  return c(), m(_, {
+    active: i.active,
+    block: i.block,
+    disabled: i.disabled,
+    size: i.size,
+    tag: i.tag,
+    variant: i.variant,
+    class: z(a.classes),
+    onClick: e[0] || (e[0] = (l) => !i.disabled && t.$emit("click", l, this))
+  }, {
+    default: $(() => [
+      A(t.$slots, "default", {}, () => [
+        B(f(i.label), 1)
+      ]),
+      D(o, L(j(a.indicatorProps)), null, 16)
+    ]),
+    _: 3
+  }, 8, ["active", "block", "disabled", "size", "tag", "variant", "class"]);
 }
-const Q = /* @__PURE__ */ A(U, [["render", J]]);
+const st = /* @__PURE__ */ g(et, [["render", it]]);
 export {
-  Q as BtnActivity
+  st as BtnActivity
 };

package/dist/btn-activity.umd.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/btn-activity",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.1",
   "description": "A Vue activity button component.",
   "files": [
     "index.js",

package/src/BtnActivity.vue

@@ -1,13 +1,21 @@
 <template>
-    <button :type="type" class="btn" :class="classes" @click="onClick">
-        <i v-if="icon" :class="icon" /> {{ label }}
-        <slot />
+    <btn
+        :active="active"
+        :block="block"
+        :disabled="disabled"
+        :size="size"
+        :tag="tag"
+        :variant="variant"
+        :class="classes"
+        @click="(e) => !disabled && $emit('click', e, this)">
+        <slot>{{ label }}</slot>
         <activity-indicator v-bind="indicatorProps" />
-    </button>
+    </btn>
 </template>
 
 <script>
 import { ActivityIndicator } from '@vue-interface/activity-indicator';
+import { Btn } from '@vue-interface/btn';
 
 const convertAnimationDelayToInt = function(delay) {
     const num = parseFloat(delay || 0, 10);
@@ -40,9 +48,10 @@ const animated = function(el, callback) {
 export default {
 
     name: 'BtnActivity',
-
+    
     components: {
-        ActivityIndicator
+        ActivityIndicator,
+        Btn
     },
 
     props: {
@@ -69,33 +78,38 @@ export default {
         block: Boolean,
 
         /**
-         * Make the button appear with the disabled state.
+         * Disable the button.
          *
          * @property {Boolean}
          */
         disabled: Boolean,
 
         /**
-         * The button label. If not passed as a property, label must be passed
-         * inside the element's html.
+         * The type of activity indicator inside the button.
          *
          * @property {String}
          */
-        label: String,
+        indicator: {
+            type: [Object, String],
+            default: 'spinner'
+        },
 
         /**
-         * The button icon
+         * The button label.
          *
          * @property {String}
          */
-        icon: String,
+        label: String,
 
         /**
-         * The `type` attribute for the button element.
+         * The orientation of the activity button inside the button.
          *
          * @property {String}
          */
-        type: String,
+        orientation: {
+            type: String,
+            default: 'right'
+        },
 
         /**
          * The size of the button.
@@ -108,35 +122,28 @@ export default {
         },
 
         /**
-         * The variant of the button.
-         *
-         * @property {String}
-         */
-        variant: {
-            type: String,
-            default: 'primary'
-        },
-
-        /**
-         * The type of activity indicator inside the button.
+         * The HTML tag.
          *
          * @property {String}
          */
-        indicator: {
-            type: [Object, String],
-            default: 'spinner'
-        },
+        tag: String,
 
         /**
-         * The orientation of the activity button inside the button.
+         * The variant of the button.
          *
          * @property {String}
          */
-        orientation: {
+        variant: {
             type: String,
-            default: 'right'
+            default: 'primary'
         }
     },
+    
+    data() {
+        return {
+            currentActivity: this.activity
+        };
+    },
 
     computed: {
 
@@ -149,12 +156,9 @@ export default {
             const classes = {
                 'disabled': this.disabled,
                 'active': this.active,
-                'btn-block': this.block,
                 'btn-activity': this.activity
             };
 
-            classes['btn-' + this.size.replace('btn-', '')] = !!this.size;
-            classes['btn-' + this.variant.replace('btn-', '')] = !!this.variant;
             classes['btn-activity-' + this.orientation.replace('btn-activity-', '')] = !!this.orientation;
             classes['btn-activity-indicator-' + this.indicatorProps.type.replace('btn-activity-indicator-', '')] = !!this.indicatorProps.type;
 
@@ -184,6 +188,12 @@ export default {
 
     },
 
+    mounted() {
+        if(this.activity) {
+            this.showActivity();
+        }
+    },
+
     methods: {
 
         /**
@@ -193,6 +203,7 @@ export default {
          */
         disable() {
             this.$el.disabled = true;
+            this.$el.classList.add('disabled');
         },
 
         /**
@@ -202,48 +213,51 @@ export default {
          */
         enable() {
             this.$el.disabled = false;
+            this.$el.classList.remove('disabled');
         },
 
         /**
-         * Show the activity indicator inside the button.
+         * Hide the activity indicator inside the button.
          *
          * @return void
          */
-        showActivity() {
-            this.disable();
+        hideActivity() {
+            this.$el.classList.add('btn-hide-activity');
 
             animated(this.$el, () => {
-                this.$el.classList.add('btn-activity');
-                this.$emit('show-activity');
+                this.enable();
+                this.currentActivity = false;
+                this.$el.classList.remove('btn-activity', 'btn-hide-activity');
+                this.$emit('hide-activity');
             });
         },
 
         /**
-         * Hide the activity indicator inside the button.
+         * Show the activity indicator inside the button.
          *
          * @return void
          */
-        hideActivity() {
-            this.$el.classList.add('btn-hide-activity');
+        showActivity() {
+            this.currentActivity = true;
+            this.disable();
 
             animated(this.$el, () => {
-                this.enable();
-                this.$el.classList.remove('btn-activity', 'btn-hide-activity');
-                this.$emit('hide-activity');
+                this.$el.classList.add('btn-activity');
+                this.$emit('show-activity');
             });
         },
 
         /**
-         * The click callback function
+         * Show the activity indicator inside the button.
          *
          * @return void
          */
-        onClick(event) {
-            if(!this.disabled) {
-                this.$emit('click', event);
+        toggle() {
+            if(!this.currentActivity) {
+                this.showActivity();
             }
             else {
-                event.preventDefault();
+                this.hideActivity();
             }
         }