@vue-interface/btn-activity 2.0.0-beta.5 → 2.0.0-beta.6

package/dist/btn-activity.js

@@ -0,0 +1,392 @@
+import { defineComponent as b, inject as O, openBlock as a, createElementBlock as g, normalizeClass as j, normalizeStyle as N, createElementVNode as E, createBlock as f, resolveDynamicComponent as x, createCommentVNode as $, toDisplayString as y, mergeProps as w, withCtx as A, renderSlot as C, createTextVNode as k, resolveComponent as P, createVNode as _, normalizeProps as H, guardReactiveProps as R } from "vue";
+function r(t, i = "px") {
+  return t != null && t !== !1 && isFinite(t) ? `${t}${i}` : t;
+}
+const V = b({
+  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: O(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: r(this.width),
+        maxWidth: r(this.maxWidth),
+        minWidth: r(this.minWidth),
+        height: r(this.height),
+        maxHeight: r(this.maxHeight),
+        minHeight: r(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);
+    }
+  }
+}), W = (t, i) => {
+  const e = t.__vccOpts || t;
+  for (const [n, s] of i)
+    e[n] = s;
+  return e;
+}, D = { class: "activity-indicator-content" }, L = {
+  key: 1,
+  class: "activity-indicator-label"
+};
+function I(t, i, e, n, s, o) {
+  return a(), g("div", {
+    class: j(["activity-indicator", t.classes]),
+    style: N(t.style)
+  }, [
+    E("div", D, [
+      t.is ? (a(), f(x(t.is()), {
+        key: 0,
+        class: "mx-auto"
+      })) : $("", !0),
+      t.label ? (a(), g("div", L, y(t.label), 1)) : $("", !0)
+    ])
+  ], 6);
+}
+const Z = /* @__PURE__ */ W(V, [["render", I]]);
+var F = Object.defineProperty, M = (t, i, e) => i in t ? F(t, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[i] = e, T = (t, i, e) => (M(t, typeof i != "symbol" ? i + "" : i, e), e), u = function() {
+  return u = Object.assign || function(t) {
+    for (var i, e = 1, n = arguments.length; e < n; e++) {
+      i = arguments[e];
+      for (var s in i)
+        Object.prototype.hasOwnProperty.call(i, s) && (t[s] = i[s]);
+    }
+    return t;
+  }, u.apply(this, arguments);
+};
+function q(t) {
+  return t.toLowerCase();
+}
+var G = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g], J = /[^A-Z0-9]+/gi;
+function K(t, i) {
+  i === void 0 && (i = {});
+  for (var e = i.splitRegexp, n = e === void 0 ? G : e, s = i.stripRegexp, o = s === void 0 ? J : s, c = i.transform, p = c === void 0 ? q : c, l = i.delimiter, B = l === void 0 ? " " : l, h = S(S(t, n, "$1\0$2"), o, "\0"), v = 0, m = h.length; h.charAt(v) === "\0"; )
+    v++;
+  for (; h.charAt(m - 1) === "\0"; )
+    m--;
+  return h.slice(v, m).split("\0").map(p).join(B);
+}
+function S(t, i, e) {
+  return i instanceof RegExp ? t.replace(i, e) : i.reduce(function(n, s) {
+    return n.replace(s, e);
+  }, t);
+}
+function Q(t, i) {
+  return i === void 0 && (i = {}), K(t, u({ delimiter: "." }, i));
+}
+function d(t, i) {
+  return i === void 0 && (i = {}), Q(t, u({ delimiter: "-" }, i));
+}
+class U {
+  constructor(i = {}) {
+    T(this, "components"), this.components = /* @__PURE__ */ new Map(), Object.entries(i).forEach(([e, n]) => {
+      this.register(e, n);
+    });
+  }
+  get(i) {
+    const e = this.components.get(
+      i = d(i)
+    );
+    if (e)
+      return e;
+    throw new Error(`"${i}" has not been registered yet!`);
+  }
+  register(i, e) {
+    return typeof i == "object" ? (Object.entries(i).forEach(([n, s]) => {
+      this.register(d(n), s);
+    }), this) : (this.components.set(d(i), e), this);
+  }
+  remove(i) {
+    return this.components.delete(d(i)), this;
+  }
+  reset() {
+    return this.components = /* @__PURE__ */ new Map(), this;
+  }
+}
+function X(t = {}) {
+  return new U(t);
+}
+X();
+const Y = {
+  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}` : "";
+    }
+  }
+}, tt = {
+  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}` : "";
+    }
+  }
+}, it = b({
+  mixins: [
+    Y,
+    tt
+  ],
+  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" : "");
+    }
+  }
+}), et = (t, i) => {
+  const e = t.__vccOpts || t;
+  for (const [n, s] of i)
+    e[n] = s;
+  return e;
+};
+function st(t, i, e, n, s, o) {
+  return a(), f(x(t.component), w(t.$attrs, {
+    disabled: t.disabled,
+    class: t.classes,
+    role: "button"
+  }), {
+    default: A(() => [
+      C(t.$slots, "default", {}, () => [
+        k(y(t.label), 1)
+      ])
+    ]),
+    _: 3
+  }, 16, ["disabled", "class"]);
+}
+const nt = /* @__PURE__ */ et(it, [["render", st]]), rt = function(t) {
+  const i = parseFloat(t || 0), e = t && t.match(/m?s/), n = e ? e[0] : !1;
+  let s;
+  switch (n) {
+    case "s":
+      s = i * 1e3;
+      break;
+    case "ms":
+    default:
+      s = i;
+      break;
+  }
+  return s || 0;
+}, z = function(t, i) {
+  const e = (t.ownerDocument || document).defaultView;
+  setTimeout(
+    i,
+    rt(
+      e == null ? void 0 : e.getComputedStyle(t).animationDuration
+    )
+  );
+}, at = b({
+  inheritAttrs: !1,
+  components: {
+    ActivityIndicator: Z,
+    Btn: nt
+  },
+  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"), z(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(), z(this.$el, () => {
+        this.$el.classList.add("btn-activity"), this.$emit("show-activity");
+      });
+    },
+    toggle() {
+      this.currentActivity ? this.hideActivity() : this.showActivity();
+    }
+  }
+});
+const ot = (t, i) => {
+  const e = t.__vccOpts || t;
+  for (const [n, s] of i)
+    e[n] = s;
+  return e;
+};
+function ct(t, i, e, n, s, o) {
+  const c = P("activity-indicator"), p = P("btn");
+  return a(), f(p, w({
+    active: t.active,
+    block: t.block,
+    disabled: t.disabled,
+    size: t.size,
+    tag: t.tag,
+    variant: t.variant,
+    class: t.classes,
+    onClick: i[0] || (i[0] = (l) => !t.disabled && t.$emit("click", l, {
+      disable: t.disable,
+      enable: t.enable,
+      toggle: t.toggle,
+      showActivity: t.showActivity,
+      hideActivity: t.hideActivity
+    }))
+  }, Object.assign({}, t.$attrs, { onClick: void 0 })), {
+    default: A(() => [
+      C(t.$slots, "default", {}, () => [
+        k(y(t.label), 1)
+      ]),
+      _(c, H(R(t.indicatorProps)), null, 16)
+    ]),
+    _: 3
+  }, 16, ["active", "block", "disabled", "size", "tag", "variant", "class"]);
+}
+const ht = /* @__PURE__ */ ot(at, [["render", ct]]);
+export {
+  ht as BtnActivity
+};

package/dist/btn-activity.umd.cjs

@@ -0,0 +1 @@
+(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.BtnActivity={},a.Vue))})(this,function(a,e){"use strict";function o(t,i="px"){return t!=null&&t!==!1&&isFinite(t)?`${t}${i}`:t}const v=e.defineComponent({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:e.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)}}}),$=(t,i)=>{const n=t.__vccOpts||t;for(const[r,s]of i)n[r]=s;return n},P={class:"activity-indicator-content"},S={key:1,class:"activity-indicator-label"};function x(t,i,n,r,s,d){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["activity-indicator",t.classes]),style:e.normalizeStyle(t.style)},[e.createElementVNode("div",P,[t.is?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.is()),{key:0,class:"mx-auto"})):e.createCommentVNode("",!0),t.label?(e.openBlock(),e.createElementBlock("div",S,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0)])],6)}const z=$(v,[["render",x]]);var C=Object.defineProperty,A=(t,i,n)=>i in t?C(t,i,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[i]=n,w=(t,i,n)=>(A(t,typeof i!="symbol"?i+"":i,n),n),c=function(){return c=Object.assign||function(t){for(var i,n=1,r=arguments.length;n<r;n++){i=arguments[n];for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s])}return t},c.apply(this,arguments)};function B(t){return t.toLowerCase()}var k=[/([a-z0-9])([A-Z])/g,/([A-Z])([A-Z][a-z])/g],j=/[^A-Z0-9]+/gi;function O(t,i){i===void 0&&(i={});for(var n=i.splitRegexp,r=n===void 0?k:n,s=i.stripRegexp,d=s===void 0?j:s,h=i.transform,u=h===void 0?B:h,p=i.delimiter,q=p===void 0?" ":p,m=b(b(t,r,"$1\0$2"),d,"\0"),f=0,y=m.length;m.charAt(f)==="\0";)f++;for(;m.charAt(y-1)==="\0";)y--;return m.slice(f,y).split("\0").map(u).join(q)}function b(t,i,n){return i instanceof RegExp?t.replace(i,n):i.reduce(function(r,s){return r.replace(s,n)},t)}function N(t,i){return i===void 0&&(i={}),O(t,c({delimiter:"."},i))}function l(t,i){return i===void 0&&(i={}),N(t,c({delimiter:"-"},i))}class _{constructor(i={}){w(this,"components"),this.components=new Map,Object.entries(i).forEach(([n,r])=>{this.register(n,r)})}get(i){const n=this.components.get(i=l(i));if(n)return n;throw new Error(`"${i}" has not been registered yet!`)}register(i,n){return typeof i=="object"?(Object.entries(i).forEach(([r,s])=>{this.register(l(r),s)}),this):(this.components.set(l(i),n),this)}remove(i){return this.components.delete(l(i)),this}reset(){return this.components=new Map,this}}function E(t={}){return new _(t)}E();const V={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}`:""}}},D={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}`:""}}},H=e.defineComponent({mixins:[V,D],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":"")}}}),R=(t,i)=>{const n=t.__vccOpts||t;for(const[r,s]of i)n[r]=s;return n};function T(t,i,n,r,s,d){return e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.component),e.mergeProps(t.$attrs,{disabled:t.disabled,class:t.classes,role:"button"}),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])]),_:3},16,["disabled","class"])}const W=R(H,[["render",T]]),L=function(t){const i=parseFloat(t||0),n=t&&t.match(/m?s/),r=n?n[0]:!1;let s;switch(r){case"s":s=i*1e3;break;case"ms":default:s=i;break}return s||0},g=function(t,i){const n=(t.ownerDocument||document).defaultView;setTimeout(i,L(n==null?void 0:n.getComputedStyle(t).animationDuration))},I=e.defineComponent({inheritAttrs:!1,components:{ActivityIndicator:z,Btn:W},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"),g(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(),g(this.$el,()=>{this.$el.classList.add("btn-activity"),this.$emit("show-activity")})},toggle(){this.currentActivity?this.hideActivity():this.showActivity()}}}),G="",M=(t,i)=>{const n=t.__vccOpts||t;for(const[r,s]of i)n[r]=s;return n};function Z(t,i,n,r,s,d){const h=e.resolveComponent("activity-indicator"),u=e.resolveComponent("btn");return e.openBlock(),e.createBlock(u,e.mergeProps({active:t.active,block:t.block,disabled:t.disabled,size:t.size,tag:t.tag,variant:t.variant,class:t.classes,onClick:i[0]||(i[0]=p=>!t.disabled&&t.$emit("click",p,{disable:t.disable,enable:t.enable,toggle:t.toggle,showActivity:t.showActivity,hideActivity:t.hideActivity}))},Object.assign({},t.$attrs,{onClick:void 0})),{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)]),e.createVNode(h,e.normalizeProps(e.guardReactiveProps(t.indicatorProps)),null,16)]),_:3},16,["active","block","disabled","size","tag","variant","class"])}const F=M(I,[["render",Z]]);a.BtnActivity=F,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

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

@@ -1,234 +1,151 @@
-declare const _sfc_main: {
-    name: string;
-    components: {
-        ActivityIndicator: {
-            props: {
-                absolute: BooleanConstructor;
-                center: BooleanConstructor;
-                label: StringConstructor;
-                size: {
-                    type: StringConstructor;
-                    default: string;
-                };
-                registry: {
-                    type: StringConstructor;
-                    default: string;
-                };
-                type: {
-                    type: StringConstructor;
-                    required: boolean;
-                };
-                height: (StringConstructor | NumberConstructor)[];
-                maxHeight: (StringConstructor | NumberConstructor)[];
-                minHeight: (StringConstructor | NumberConstructor)[];
-                width: (StringConstructor | NumberConstructor)[];
-                maxWidth: (StringConstructor | NumberConstructor)[];
-                minWidth: (StringConstructor | NumberConstructor)[];
-            };
-            data: () => {
-                is: null;
-            };
-            setup(props: any): {
-                registryInstance: unknown;
-            };
-            computed: {
-                classes(): {
-                    [x: number]: boolean;
-                    'activity-indicator-center': any;
-                    'activity-indicator-absolute': any;
-                };
-                style(): {
-                    width: string | undefined;
-                    maxWidth: string | undefined;
-                    minWidth: string | undefined;
-                    height: string | undefined;
-                    maxHeight: string | undefined;
-                    minHeight: string | undefined;
-                };
-            };
-            mounted(): Promise<void>;
-            methods: {
-                component(): Promise<any>;
-            };
-        };
-        Btn: {
-            name: string;
-            mixins: ({
-                props: {
-                    componentPrefix: StringConstructor;
-                    size: StringConstructor;
-                    sizePrefix: StringConstructor;
-                };
-                computed: {
-                    sizeableClassPrefix(): string | undefined;
-                    hasSizeablePrefix(): boolean;
-                    sizeableClass(): string;
-                };
-            } | {
-                props: {
-                    componentPrefix: StringConstructor;
-                    variant: StringConstructor;
-                    variantPrefix: StringConstructor;
-                };
-                computed: {
-                    variantClassPrefix(): string | undefined;
-                    hasVariantPrefix(): boolean;
-                    variantClass(): string;
-                };
-            })[];
-            props: {
-                active: BooleanConstructor; /**
-                 * Make the button appear with the active state.
-                 *
-                 * @property {Boolean}
-                 */
-                block: BooleanConstructor;
-                componentPrefix: {
-                    type: StringConstructor;
-                    default: string;
-                };
-                disabled: BooleanConstructor;
-                label: StringConstructor;
-                outline: BooleanConstructor;
-                tag: StringConstructor;
-                variant: {
-                    type: StringConstructor;
-                    default: string;
-                };
-            };
-            computed: {
-                classes(): string[];
-                component(): string;
-                variantClassPrefix(): string;
-            };
-        };
+declare const _sfc_main: import("vue").DefineComponent<{
+    /**
+     * Make the button appear with the active state.
+     */
+    active: BooleanConstructor;
+    /**
+     * Show the activity indicator inside the button.
+     */
+    activity: BooleanConstructor;
+    /**
+     * Display the button as block width.
+     */
+    block: BooleanConstructor;
+    /**
+     * Disable the button.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * The type of activity indicator inside the button.
+     */
+    indicator: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
     };
-    props: {
-        /**
-         * Make the button appear with the active state.
-         *
-         * @property {Boolean}
-         */
-        active: BooleanConstructor;
-        /**
-         * Show the activity indicator inside the button.
-         *
-         * @property {Boolean}
-         */
-        activity: BooleanConstructor;
-        /**
-         * Display the button as block width.
-         *
-         * @property {Boolean}
-         */
-        block: BooleanConstructor;
-        /**
-         * Disable the button.
-         *
-         * @property {Boolean}
-         */
-        disabled: BooleanConstructor;
-        /**
-         * The type of activity indicator inside the button.
-         *
-         * @property {String}
-         */
-        indicator: {
-            type: (ObjectConstructor | StringConstructor)[];
-            default: string;
-        };
-        /**
-         * The button label.
-         *
-         * @property {String}
-         */
-        label: StringConstructor;
-        /**
-         * The orientation of the activity button inside the button.
-         *
-         * @property {String}
-         */
-        orientation: {
-            type: StringConstructor;
-            default: string;
-        };
-        /**
-         * The size of the button.
-         *
-         * @property {String}
-         */
-        size: {
-            type: StringConstructor;
-            default: string;
-        };
-        /**
-         * The HTML tag.
-         *
-         * @property {String}
-         */
-        tag: StringConstructor;
-        /**
-         * The variant of the button.
-         *
-         * @property {String}
-         */
-        variant: {
-            type: StringConstructor;
-            default: string;
-        };
+    /**
+     * The button label.
+     */
+    label: StringConstructor;
+    /**
+     * The orientation of the activity button inside the button.
+     */
+    orientation: {
+        type: StringConstructor;
+        default: string;
     };
-    data(): {
-        currentActivity: any;
+    /**
+     * The size of the button.
+     */
+    size: {
+        type: StringConstructor;
+        default: string;
     };
-    computed: {
-        /**
-         * An object of classes to append to the button.
-         *
-         * @return void
-         */
-        classes(): {
-            [x: string]: any;
-            disabled: any;
-            active: any;
-            "btn-activity": any;
-        };
-        indicatorProps(): any;
+    /**
+     * The HTML tag.
+     */
+    tag: StringConstructor;
+    /**
+     * The variant of the button.
+     */
+    variant: {
+        type: StringConstructor;
+        default: string;
     };
-    watch: {
-        activity(value: boolean): void;
+}, unknown, {
+    currentActivity: boolean;
+}, {
+    /**
+     * An object of classes to append to the button.
+     */
+    classes(): {
+        [x: string]: any;
+        disabled: any;
+        active: any;
+        "btn-activity": any;
     };
-    mounted(): void;
-    methods: {
-        /**
-         * Disable the button.
-         *
-         * @return void
-         */
-        disable(): void;
-        /**
-         * Enable the button.
-         *
-         * @return void
-         */
-        enable(): void;
-        /**
-         * Hide the activity indicator inside the button.
-         *
-         * @return void
-         */
-        hideActivity(): void;
-        /**
-         * Show the activity indicator inside the button.
-         *
-         * @return void
-         */
-        showActivity(): void;
-        /**
-         * Show the activity indicator inside the button.
-         *
-         * @return void
-         */
-        toggle(): void;
+    indicatorProps(): any;
+}, {
+    /**
+     * Disable the button.
+     */
+    disable(): void;
+    /**
+     * Enable the button.
+     */
+    enable(): void;
+    /**
+     * Hide the activity indicator inside the button.
+     */
+    hideActivity(): void;
+    /**
+     * Show the activity indicator inside the button.
+     */
+    showActivity(): void;
+    /**
+     * Show the activity indicator inside the button.
+     */
+    toggle(): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Make the button appear with the active state.
+     */
+    active: BooleanConstructor;
+    /**
+     * Show the activity indicator inside the button.
+     */
+    activity: BooleanConstructor;
+    /**
+     * Display the button as block width.
+     */
+    block: BooleanConstructor;
+    /**
+     * Disable the button.
+     */
+    disabled: BooleanConstructor;
+    /**
+     * The type of activity indicator inside the button.
+     */
+    indicator: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: string;
     };
-};
+    /**
+     * The button label.
+     */
+    label: StringConstructor;
+    /**
+     * The orientation of the activity button inside the button.
+     */
+    orientation: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The size of the button.
+     */
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+    /**
+     * The HTML tag.
+     */
+    tag: StringConstructor;
+    /**
+     * The variant of the button.
+     */
+    variant: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    size: string;
+    active: boolean;
+    block: boolean;
+    disabled: boolean;
+    variant: string;
+    activity: boolean;
+    indicator: string | Record<string, any>;
+    orientation: string;
+}>;
 export default _sfc_main;

package/package.json

@@ -1,18 +1,20 @@
 {
   "name": "@vue-interface/btn-activity",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.6",
   "description": "A Vue activity button component.",
+  "type": "module",
   "files": [
     "index.js",
     "dist"
   ],
-  "main": "./dist/btn-activity.umd.js",
-  "module": "./dist/btn-activity.es.js",
+  "main": "./dist/btn-activity.umd.cjs",
+  "module": "./dist/btn-activity.js",
+  "style": "./dist/style.css",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/btn-activity.es.js",
-      "require": "./dist/btn-activity.umd.js",
+      "import": "./dist/btn-activity.js",
+      "require": "./dist/btn-activity.umd.cjs",
       "types": "./dist/index.d.ts"
     }
   },
@@ -46,11 +48,10 @@
   },
   "homepage": "https://github.com/vue-interface/btn-activity/docs#readme",
   "dependencies": {
-    "@vue-interface/activity-indicator": "^2.0.0-beta.4",
+    "@vue-interface/activity-indicator": "^2.0.0-beta.6",
     "@vue-interface/btn": "^3.0.0-beta.3"
   },
   "devDependencies": {
-    "@rollup/plugin-babel": "^6.0.0",
     "@vitejs/plugin-vue": "^3.1.2",
     "autoprefixer": "^10.4.2",
     "babel-eslint": "^10.1.0",

package/dist/btn-activity.es.js

@@ -1,303 +0,0 @@
-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 w = {
-  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: P(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: r(this.width),
-        maxWidth: r(this.maxWidth),
-        minWidth: r(this.minWidth),
-        height: r(this.height),
-        maxHeight: r(this.maxHeight),
-        minHeight: r(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);
-    }
-  }
-}, A = (t, e) => {
-  const i = t.__vccOpts || t;
-  for (const [a, s] of e)
-    i[a] = s;
-  return i;
-}, k = {
-  class: "activity-indicator-content"
-}, N = {
-  key: 1,
-  class: "activity-indicator-label"
-};
-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"
-  })) : d("", !0), i.label ? (c(), h("div", N, l(i.label), 1)) : d("", !0)])], 6);
-}
-const O = /* @__PURE__ */ A(w, [["render", H]]), V = {
-  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}` : "";
-    }
-  }
-}, W = {
-  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}` : "";
-    }
-  }
-}, D = {
-  name: "Btn",
-  mixins: [V, W],
-  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" : "");
-    }
-  }
-}, E = (t, e) => {
-  const i = t.__vccOpts || t;
-  for (const [a, s] of e)
-    i[a] = s;
-  return i;
-};
-function L(t, e, i, a, s, n) {
-  return c(), o(y(n.component), _(t.$attrs, {
-    disabled: i.disabled,
-    class: n.classes,
-    role: "button"
-  }), {
-    default: b(() => [f(t.$slots, "default", {}, () => [p(l(i.label), 1)])]),
-    _: 3
-  }, 16, ["disabled", "class"]);
-}
-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) {
-    case "s":
-      s = e * 1e3;
-      break;
-    case "ms":
-    default:
-      s = e;
-      break;
-  }
-  return s || 0;
-}, v = function(t, e) {
-  const i = (t.ownerDocument || document).defaultView;
-  setTimeout(
-    e,
-    I(i == null ? void 0 : i.getComputedStyle(t).animationDuration)
-  );
-}, R = {
-  name: "BtnActivity",
-  components: {
-    ActivityIndicator: O,
-    Btn: j
-  },
-  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"), 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(), v(this.$el, () => {
-        this.$el.classList.add("btn-activity"), this.$emit("show-activity");
-      });
-    },
-    toggle() {
-      this.currentActivity ? this.hideActivity() : this.showActivity();
-    }
-  }
-};
-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 {
-  G as BtnActivity
-};

package/dist/btn-activity.umd.js

@@ -1 +0,0 @@
-(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"}})});