@vue-interface/btn-activity 2.0.0-beta.16 → 2.0.0-beta.17

package/dist/btn-activity.js

@@ -1,186 +1,80 @@
-import { ActivityIndicator as d } from "@vue-interface/activity-indicator";
-import { Btn as h } from "@vue-interface/btn";
-import { defineComponent as v, resolveComponent as a, openBlock as y, createBlock as p, mergeProps as b, withCtx as u, renderSlot as m, createTextVNode as f, toDisplayString as g, createVNode as A, normalizeProps as $, guardReactiveProps as k } from "vue";
-const w = function(t) {
-  const e = parseFloat(t || 0), i = t && t.match(/m?s/), o = i ? i[0] : !1;
-  let s;
-  switch (o) {
-    case "s":
-      s = e * 1e3;
-      break;
-    case "ms":
-    default:
-      s = e;
-      break;
-  }
-  return s || 0;
-}, n = function(t, e) {
-  const i = (t.ownerDocument || document).defaultView;
-  setTimeout(
-    e,
-    w(
-      i == null ? void 0 : i.getComputedStyle(t).animationDuration
-    )
-  );
-}, B = v({
-  components: {
-    ActivityIndicator: d,
-    Btn: h
-  },
-  inheritAttrs: !1,
+import { defineComponent as m, ref as u, watchEffect as v, watch as g, openBlock as n, createBlock as l, unref as r, mergeProps as B, withCtx as s, renderSlot as z, createTextVNode as b, toDisplayString as h, createVNode as k, Transition as S, normalizeClass as w, createCommentVNode as C } from "vue";
+import { ActivityIndicator as A } from "@vue-interface/activity-indicator";
+import { Btn as N } from "@vue-interface/btn";
+const E = /* @__PURE__ */ m({
+  __name: "BtnActivity",
   props: {
-    /**
-    * Make the button appear with the active state.
-    */
-    active: Boolean,
-    /**
-    * Show the activity indicator inside the button.
-    */
-    activity: Boolean,
-    /**
-    * Display the button as block width.
-    */
-    block: Boolean,
-    /**
-    * Disable the button.
-    */
-    disabled: Boolean,
-    /**
-    * The type of activity indicator inside the button.
-    */
-    indicator: {
-      type: Object,
-      required: !0
-    },
-    /**
-    * The button label.
-    */
-    label: {
-      type: String,
-      default: void 0
-    },
-    /**
-    * The orientation of the activity button inside the button.
-    */
-    orientation: {
-      type: String,
-      default: "right"
-    },
-    /**
-    * The HTML tag.
-    */
-    tag: {
-      type: String,
-      default: void 0
-    }
+    activity: { type: Boolean },
+    indicator: {},
+    indicatorSize: {},
+    label: {},
+    orientation: { default: "right" },
+    active: { type: Boolean },
+    block: { type: Boolean },
+    disabled: { type: Boolean },
+    outline: { type: Boolean },
+    size: {},
+    tag: {},
+    variant: { default: "btn-primary" }
   },
   emits: ["click", "hide-activity", "show-activity"],
-  data() {
-    return {
-      currentActivity: this.activity
-    };
-  },
-  computed: {
-    /**
-    * An object of classes to append to the button.
-    */
-    classes() {
-      return {
-        "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 the button.
-    */
-    disable() {
-      this.$el.disabled = !0, this.$el.classList.add("disabled");
-    },
-    /**
-    * Enable the button.
-    */
-    enable() {
-      this.$el.disabled = !1, this.$el.classList.remove("disabled");
-    },
-    /**
-    * Hide the activity indicator inside the button.
-    */
-    hideActivity() {
-      this.$el.classList.add("btn-hide-activity"), n(this.$el, () => {
-        this.disabled || this.enable(), this.currentActivity = !1, this.$el.classList.remove("btn-activity", "btn-hide-activity"), this.$emit("hide-activity");
-      });
-    },
-    /**
-    * Show the activity indicator inside the button.
-    */
-    showActivity() {
-      this.currentActivity = !0, this.disable(), n(this.$el, () => {
-        this.$el.classList.add("btn-activity"), this.$emit("show-activity");
-      });
-    },
-    /**
-    * Show the activity indicator inside the button.
-    */
-    toggle() {
-      this.currentActivity ? this.hideActivity() : this.showActivity();
+  setup(c, { emit: p }) {
+    const i = c, o = p, e = u(i.activity);
+    v(() => {
+      e.value = i.activity;
+    }), g(e, (t) => {
+      o(t ? "show-activity" : "hide-activity");
+    });
+    function d() {
+      e.value = !e.value;
     }
+    const f = {
+      status: e,
+      toggle: d
+    };
+    return (t, a) => (n(), l(r(N), B(i, {
+      class: {
+        "gap-1": !t.indicatorSize || ["xs", "sm"].includes(t.indicatorSize),
+        "gap-2": ["md", "lg", "xl"].includes(t.indicatorSize),
+        "flex-col flex-col-reverse": t.orientation === "top",
+        "flex-col": t.orientation === "bottom",
+        "flex-row-reverse": t.orientation === "left"
+      },
+      onClick: a[0] || (a[0] = (y) => o("click", y, f))
+    }), {
+      default: s(() => [
+        z(t.$slots, "default", {}, () => [
+          b(h(t.label), 1)
+        ]),
+        k(S, {
+          "enter-active-class": "transition-all ease-out duration-250",
+          "enter-from-class": "opacity-0",
+          "enter-to-class": "opacity-100",
+          "leave-active-class": "transition-all ease-in duration-250",
+          "leave-from-class": "opacity-100",
+          "leave-to-class": "opacity-0"
+        }, {
+          default: s(() => [
+            e.value ? (n(), l(r(A), {
+              key: 0,
+              type: t.indicator,
+              size: t.indicatorSize ?? "xs",
+              class: w({
+                "pt-1": t.orientation === "top",
+                "pb-1": t.orientation === "bottom",
+                "pr-1": t.orientation === "left",
+                "pl-1": t.orientation === "right"
+              })
+            }, null, 8, ["type", "size", "class"])) : C("", !0)
+          ]),
+          _: 1
+        })
+      ]),
+      _: 3
+    }, 16, ["class"]));
   }
 });
-const P = (t, e) => {
-  const i = t.__vccOpts || t;
-  for (const [o, s] of e)
-    i[o] = s;
-  return i;
-};
-function C(t, e, i, o, s, S) {
-  const c = a("ActivityIndicator"), r = a("Btn");
-  return y(), p(r, b({
-    active: t.active,
-    block: t.block,
-    disabled: t.disabled,
-    tag: t.tag,
-    class: t.classes
-  }, Object.assign({}, t.$attrs, { onClick: void 0 }), {
-    onClick: e[0] || (e[0] = (l) => !t.disabled && t.$emit("click", l, {
-      disable: t.disable,
-      enable: t.enable,
-      toggle: t.toggle,
-      showActivity: t.showActivity,
-      hideActivity: t.hideActivity
-    }))
-  }), {
-    default: u(() => [
-      m(t.$slots, "default", {}, () => [
-        f(g(t.label), 1)
-      ]),
-      A(c, $(k(t.indicatorProps)), null, 16)
-    ]),
-    _: 3
-  }, 16, ["active", "block", "disabled", "tag", "class"]);
-}
-const O = /* @__PURE__ */ P(B, [["render", C]]);
 export {
-  O as BtnActivity
+  E as BtnActivity
 };
 //# sourceMappingURL=btn-activity.js.map

package/dist/btn-activity.js.map

@@ -1 +1 @@
-{"version":3,"file":"btn-activity.js","sources":["../src/BtnActivity.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { Btn } from '@vue-interface/btn';\nimport { defineComponent } from 'vue';\n\nconst convertAnimationDelayToInt = function (delay: any) {\n    const num = parseFloat(delay || 0);\n    const matches = delay && delay.match(/m?s/);\n    const unit = matches ? matches[0] : false;\n\n    let milliseconds;\n\n    switch (unit) {\n    case 's': // seconds\n        milliseconds = num * 1000;\n        break;\n    case 'ms':\n    default:\n        milliseconds = num;\n        break;\n    }\n\n    return milliseconds || 0;\n};\n\nconst animated = function (el: HTMLElement, callback: Function) {\n    const defaultView = (el.ownerDocument || document).defaultView;\n\n    setTimeout(\n        callback,\n        convertAnimationDelayToInt(\n            defaultView?.getComputedStyle(el).animationDuration\n        )\n    );\n};\n\nexport default defineComponent({\n\n    components: {\n        ActivityIndicator,\n        Btn,\n    },\n\n    inheritAttrs: false,\n\n    props: {\n        /**\n\t\t * Make the button appear with the active state.\n\t\t */\n        active: Boolean,\n\n        /**\n\t\t * Show the activity indicator inside the button.\n\t\t */\n        activity: Boolean,\n\n        /**\n\t\t * Display the button as block width.\n\t\t */\n        block: Boolean,\n\n        /**\n\t\t * Disable the button.\n\t\t */\n        disabled: Boolean,\n\n        /**\n\t\t * The type of activity indicator inside the button.\n\t\t */\n        indicator: {\n            type: Object,\n            required: true\n        },\n\n        /**\n\t\t * The button label.\n\t\t */\n        label: {\n            type: String,\n            default: undefined\n        },\n\n        /**\n\t\t * The orientation of the activity button inside the button.\n\t\t */\n        orientation: {\n            type: String,\n            default: 'right',\n        },\n\n        /**\n\t\t * The HTML tag.\n\t\t */\n        tag: {\n            type: String,\n            default: undefined\n        },\n    },\n\n    emits: ['click', 'hide-activity', 'show-activity'],\n\n    data() {\n        return {\n            currentActivity: this.activity,\n        };\n    },\n\n    computed: {\n        /**\n\t\t * An object of classes to append to the button.\n\t\t */\n        classes() {\n            return {\n                'btn-activity': this.activity,\n                [`btn-activity-${this.orientation.replace('btn-activity-', '')}`]: !!this.orientation,\n                [`btn-activity-indicator-${this.indicatorProps.type.replace('btn-activity-indicator-', '')}`]: !!this.indicatorProps.type,\n            };\n        },\n\n        indicatorProps() {\n            return Object.assign(\n                {\n                    type: 'spinner',\n                },\n                (typeof this.indicator === 'string'\n                    ? {\n                        type: this.indicator,\n                    }\n                    : this.indicator) || {}\n            );\n        },\n    },\n\n    watch: {\n        activity(value: boolean) {\n            if(value) {\n                this.showActivity();\n            } else {\n                this.hideActivity();\n            }\n        },\n    },\n\n    mounted() {\n        if(this.activity) {\n            this.showActivity();\n        }\n    },\n\n    methods: {\n        /**\n\t\t * Disable the button.\n\t\t */\n        disable(): void {\n            this.$el.disabled = true;\n            this.$el.classList.add('disabled');\n        },\n\n        /**\n\t\t * Enable the button.\n\t\t */\n        enable(): void {\n            this.$el.disabled = false;\n            this.$el.classList.remove('disabled');\n        },\n\n        /**\n\t\t * Hide the activity indicator inside the button.\n\t\t */\n        hideActivity(): void {\n            this.$el.classList.add('btn-hide-activity');\n\n            animated(this.$el, () => {\n                if(!this.disabled) {\n                \tthis.enable();\n                }\n\t\t\t\t\n                this.currentActivity = false;\n                this.$el.classList.remove('btn-activity', 'btn-hide-activity');\n                this.$emit('hide-activity');\n            });\n        },\n\n        /**\n\t\t * Show the activity indicator inside the button.\n\t\t */\n        showActivity(): void {\n            this.currentActivity = true;\n            this.disable();\n\n            animated(this.$el, () => {\n                this.$el.classList.add('btn-activity');\n                this.$emit('show-activity');\n            });\n        },\n\n        /**\n\t\t * Show the activity indicator inside the button.\n\t\t */\n        toggle(): void {\n            if(!this.currentActivity) {\n                this.showActivity();\n            } else {\n                this.hideActivity();\n            }\n        },\n    },\n});\n</script>\n\n<template>\n    <Btn\n        :active=\"active\"\n        :block=\"block\"\n        :disabled=\"disabled\"\n        :tag=\"tag\"\n        :class=\"classes\"\n        v-bind=\"Object.assign({}, $attrs, { onClick: undefined })\"\n        @click=\"!disabled && $emit('click', $event, {\n            disable,\n            enable,\n            toggle,\n            showActivity,\n            hideActivity,\n        })\">\n        <slot>{{ label }}</slot>\n        <ActivityIndicator v-bind=\"indicatorProps\" />\n    </Btn>\n</template>\n\n<style>\n@keyframes btn-activity-in {\n\n\t0%,\n\t100% {\n\t\ttransform: scale(1);\n\t}\n\n\t30% {\n\t\ttransform: scale(0.98);\n\t}\n}\n\n@keyframes btn-activity-out {\n\n\t0%,\n\t100% {\n\t\ttransform: scale(1);\n\t}\n\n\t70% {\n\t\ttransform: scale(0.98);\n\t}\n}\n\n.btn-activity-top,\n.btn.btn-activity-top,\n.btn-activity-bottom,\n.btn.btn-activity-bottom,\n.btn-activity-left,\n.btn.btn-activity-left,\n.btn-activity-right,\n.btn.btn-activity-right {\n\tdisplay: inline-flex;\n\tposition: relative;\n\ttransition: all calc(333ms / 2) ease-in;\n}\n\n.btn-activity-top .activity-indicator,\n.btn-activity-bottom .activity-indicator,\n.btn-activity-left .activity-indicator,\n.btn-activity-right .activity-indicator {\n\topacity: 0;\n\tposition: absolute;\n\tvisibility: hidden;\n\ttransition: opacity 333ms ease-in;\n}\n\n.btn-activity-top,\n.btn-activity-bottom {\n\tflex-direction: column;\n\talign-items: center;\n}\n\n.btn-activity-top .activity-indicator,\n.btn-activity-bottom .activity-indicator {\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n.btn-activity-top {\n\tflex-direction: column-reverse;\n}\n\n.btn-activity-top .activity-indicator {\n\tpadding-bottom: 1em;\n}\n\n.btn-activity-bottom .activity-indicator {\n\tpadding-top: 1em;\n}\n\n.btn-activity-left,\n.btn-activity-right {\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.btn-activity-left {\n\tflex-direction: row-reverse;\n}\n\n.btn-activity-left .activity-indicator {\n\tpadding-right: 1em;\n}\n\n.btn-activity-right .activity-indicator {\n\tpadding-left: 1em;\n}\n\n.btn-activity:not(.btn-link) {\n\tanimation: btn-activity-in 333ms;\n}\n\n.btn-hide-activity:not(.btn-link) {\n\tanimation: btn-activity-out 333ms;\n}\n\n.btn-activity.btn-hide-activity .activity-indicator {\n\topacity: 0;\n}\n\n.btn-activity .activity-indicator {\n\topacity: 1;\n\tvisibility: visible;\n\tposition: relative;\n\tfont-size: 0.55em;\n}\n</style>\n"],"names":["convertAnimationDelayToInt","delay","num","matches","unit","milliseconds","animated","el","callback","defaultView","_sfc_main","defineComponent","ActivityIndicator","Btn","value","_resolveComponent","_openBlock","_createBlock","_component_Btn","_mergeProps","_ctx","_cache","$event","_withCtx","_createTextVNode","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"btn-activity.js","sources":["../src/BtnActivity.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { Btn, type BtnProps } from '@vue-interface/btn';\nimport { ref, watch, watchEffect, type Component, type Ref } from 'vue';\n\nexport type BtnActivityProps = {\n    activity?: boolean;\n    indicator: Component;\n    indicatorSize?: string;\n    label?: string;\n    orientation?: 'top' | 'bottom' | 'left' | 'right';\n};\n\nconst props = withDefaults(defineProps<BtnActivityProps & BtnProps>(), {\n    orientation: 'right',\n    variant: 'btn-primary'\n});\n\nexport type BtnActivityContext = {\n    status: Ref<boolean>;\n    toggle: Function;\n}\n\nconst emit = defineEmits<{\n    click: [event: MouseEvent, context: BtnActivityContext];\n    'hide-activity': [];\n    'show-activity': [];\n}>();\n\nconst status = ref(props.activity);\n\nwatchEffect(() => {\n    status.value = props.activity;\n});\n\nwatch(status, (value) => {\n    if(value) {\n        emit('show-activity');\n    }\n    else {\n        emit('hide-activity');\n    }\n});\n\nfunction toggle() {\n    status.value = !status.value;\n}\n\nconst context = {\n    status,\n    toggle,\n};\n</script>\n\n<template>\n    <Btn\n        v-bind=\"props\"\n        :class=\"{\n            'gap-1': !indicatorSize || ['xs', 'sm'].includes(indicatorSize),\n            'gap-2': ['md', 'lg', 'xl'].includes(indicatorSize),\n            'flex-col flex-col-reverse': orientation === 'top',\n            'flex-col': orientation === 'bottom',\n            'flex-row-reverse': orientation === 'left',\n        }\"\n        @click=\"emit('click', $event, context)\">\n        <slot>{{ label }}</slot>\n        <Transition\n            enter-active-class=\"transition-all ease-out duration-250\"\n            enter-from-class=\"opacity-0\"\n            enter-to-class=\"opacity-100\"\n            leave-active-class=\"transition-all ease-in duration-250\"\n            leave-from-class=\"opacity-100\"\n            leave-to-class=\"opacity-0\">\n            <ActivityIndicator\n                v-if=\"status\"\n                :type=\"indicator\"\n                :size=\"indicatorSize ?? 'xs'\"\n                :class=\"{\n                    'pt-1': orientation === 'top',\n                    'pb-1': orientation === 'bottom',\n                    'pr-1': orientation === 'left',\n                    'pl-1': orientation === 'right',\n                }\" />\n        </Transition>\n    </Btn>\n</template>\n"],"names":["props","__props","emit","__emit","status","ref","watchEffect","watch","value","toggle","context"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,GAURC,IAAOC,GAMPC,IAASC,EAAIL,EAAM,QAAQ;AAEjC,IAAAM,EAAY,MAAM;AACd,MAAAF,EAAO,QAAQJ,EAAM;AAAA,IAAA,CACxB,GAEKO,EAAAH,GAAQ,CAACI,MAAU;AACrB,MACIN,EADDM,IACM,kBAGA,eAHe;AAAA,IAIxB,CACH;AAED,aAASC,IAAS;AACP,MAAAL,EAAA,QAAQ,CAACA,EAAO;AAAA,IAC3B;AAEA,UAAMM,IAAU;AAAA,MACZ,QAAAN;AAAA,MACA,QAAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/btn-activity.umd.cjs

@@ -1,2 +1,2 @@
-(function(n,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("@vue-interface/activity-indicator"),require("@vue-interface/btn"),require("vue")):typeof define=="function"&&define.amd?define(["exports","@vue-interface/activity-indicator","@vue-interface/btn","vue"],a):(n=typeof globalThis<"u"?globalThis:n||self,a(n.BtnActivity={},n.VueInterfaceActivityIndicator,n.VueInterfaceBtn,n.Vue))})(this,function(n,a,d,i){"use strict";const l=function(t){const s=parseFloat(t||0),e=t&&t.match(/m?s/),c=e?e[0]:!1;let o;switch(c){case"s":o=s*1e3;break;case"ms":default:o=s;break}return o||0},r=function(t,s){const e=(t.ownerDocument||document).defaultView;setTimeout(s,l(e==null?void 0:e.getComputedStyle(t).animationDuration))},y=i.defineComponent({components:{ActivityIndicator:a.ActivityIndicator,Btn:d.Btn},inheritAttrs:!1,props:{active:Boolean,activity:Boolean,block:Boolean,disabled:Boolean,indicator:{type:Object,required:!0},label:{type:String,default:void 0},orientation:{type:String,default:"right"},tag:{type:String,default:void 0}},emits:["click","hide-activity","show-activity"],data(){return{currentActivity:this.activity}},computed:{classes(){return{"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"),r(this.$el,()=>{this.disabled||this.enable(),this.currentActivity=!1,this.$el.classList.remove("btn-activity","btn-hide-activity"),this.$emit("hide-activity")})},showActivity(){this.currentActivity=!0,this.disable(),r(this.$el,()=>{this.$el.classList.add("btn-activity"),this.$emit("show-activity")})},toggle(){this.currentActivity?this.hideActivity():this.showActivity()}}}),m="",h=(t,s)=>{const e=t.__vccOpts||t;for(const[c,o]of s)e[c]=o;return e};function v(t,s,e,c,o,A){const u=i.resolveComponent("ActivityIndicator"),f=i.resolveComponent("Btn");return i.openBlock(),i.createBlock(f,i.mergeProps({active:t.active,block:t.block,disabled:t.disabled,tag:t.tag,class:t.classes},Object.assign({},t.$attrs,{onClick:void 0}),{onClick:s[0]||(s[0]=b=>!t.disabled&&t.$emit("click",b,{disable:t.disable,enable:t.enable,toggle:t.toggle,showActivity:t.showActivity,hideActivity:t.hideActivity}))}),{default:i.withCtx(()=>[i.renderSlot(t.$slots,"default",{},()=>[i.createTextVNode(i.toDisplayString(t.label),1)]),i.createVNode(u,i.normalizeProps(i.guardReactiveProps(t.indicatorProps)),null,16)]),_:3},16,["active","block","disabled","tag","class"])}const p=h(y,[["render",v]]);n.BtnActivity=p,Object.defineProperty(n,Symbol.toStringTag,{value:"Module"})});
+(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@vue-interface/activity-indicator"),require("@vue-interface/btn")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/activity-indicator","@vue-interface/btn"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i.BtnActivity={},i.Vue,i.VueInterfaceActivityIndicator,i.VueInterfaceBtn))})(this,function(i,t,c,l){"use strict";const s=t.defineComponent({__name:"BtnActivity",props:{activity:{type:Boolean},indicator:{},indicatorSize:{},label:{},orientation:{default:"right"},active:{type:Boolean},block:{type:Boolean},disabled:{type:Boolean},outline:{type:Boolean},size:{},tag:{},variant:{default:"btn-primary"}},emits:["click","hide-activity","show-activity"],setup(d,{emit:f}){const n=d,a=f,o=t.ref(n.activity);t.watchEffect(()=>{o.value=n.activity}),t.watch(o,e=>{a(e?"show-activity":"hide-activity")});function p(){o.value=!o.value}const y={status:o,toggle:p};return(e,r)=>(t.openBlock(),t.createBlock(t.unref(l.Btn),t.mergeProps(n,{class:{"gap-1":!e.indicatorSize||["xs","sm"].includes(e.indicatorSize),"gap-2":["md","lg","xl"].includes(e.indicatorSize),"flex-col flex-col-reverse":e.orientation==="top","flex-col":e.orientation==="bottom","flex-row-reverse":e.orientation==="left"},onClick:r[0]||(r[0]=u=>a("click",u,y))}),{default:t.withCtx(()=>[t.renderSlot(e.$slots,"default",{},()=>[t.createTextVNode(t.toDisplayString(e.label),1)]),t.createVNode(t.Transition,{"enter-active-class":"transition-all ease-out duration-250","enter-from-class":"opacity-0","enter-to-class":"opacity-100","leave-active-class":"transition-all ease-in duration-250","leave-from-class":"opacity-100","leave-to-class":"opacity-0"},{default:t.withCtx(()=>[o.value?(t.openBlock(),t.createBlock(t.unref(c.ActivityIndicator),{key:0,type:e.indicator,size:e.indicatorSize??"xs",class:t.normalizeClass({"pt-1":e.orientation==="top","pb-1":e.orientation==="bottom","pr-1":e.orientation==="left","pl-1":e.orientation==="right"})},null,8,["type","size","class"])):t.createCommentVNode("",!0)]),_:1})]),_:3},16,["class"]))}});i.BtnActivity=s,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=btn-activity.umd.cjs.map

package/dist/btn-activity.umd.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"btn-activity.umd.cjs","sources":["../src/BtnActivity.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { Btn } from '@vue-interface/btn';\nimport { defineComponent } from 'vue';\n\nconst convertAnimationDelayToInt = function (delay: any) {\n    const num = parseFloat(delay || 0);\n    const matches = delay && delay.match(/m?s/);\n    const unit = matches ? matches[0] : false;\n\n    let milliseconds;\n\n    switch (unit) {\n    case 's': // seconds\n        milliseconds = num * 1000;\n        break;\n    case 'ms':\n    default:\n        milliseconds = num;\n        break;\n    }\n\n    return milliseconds || 0;\n};\n\nconst animated = function (el: HTMLElement, callback: Function) {\n    const defaultView = (el.ownerDocument || document).defaultView;\n\n    setTimeout(\n        callback,\n        convertAnimationDelayToInt(\n            defaultView?.getComputedStyle(el).animationDuration\n        )\n    );\n};\n\nexport default defineComponent({\n\n    components: {\n        ActivityIndicator,\n        Btn,\n    },\n\n    inheritAttrs: false,\n\n    props: {\n        /**\n\t\t * Make the button appear with the active state.\n\t\t */\n        active: Boolean,\n\n        /**\n\t\t * Show the activity indicator inside the button.\n\t\t */\n        activity: Boolean,\n\n        /**\n\t\t * Display the button as block width.\n\t\t */\n        block: Boolean,\n\n        /**\n\t\t * Disable the button.\n\t\t */\n        disabled: Boolean,\n\n        /**\n\t\t * The type of activity indicator inside the button.\n\t\t */\n        indicator: {\n            type: Object,\n            required: true\n        },\n\n        /**\n\t\t * The button label.\n\t\t */\n        label: {\n            type: String,\n            default: undefined\n        },\n\n        /**\n\t\t * The orientation of the activity button inside the button.\n\t\t */\n        orientation: {\n            type: String,\n            default: 'right',\n        },\n\n        /**\n\t\t * The HTML tag.\n\t\t */\n        tag: {\n            type: String,\n            default: undefined\n        },\n    },\n\n    emits: ['click', 'hide-activity', 'show-activity'],\n\n    data() {\n        return {\n            currentActivity: this.activity,\n        };\n    },\n\n    computed: {\n        /**\n\t\t * An object of classes to append to the button.\n\t\t */\n        classes() {\n            return {\n                'btn-activity': this.activity,\n                [`btn-activity-${this.orientation.replace('btn-activity-', '')}`]: !!this.orientation,\n                [`btn-activity-indicator-${this.indicatorProps.type.replace('btn-activity-indicator-', '')}`]: !!this.indicatorProps.type,\n            };\n        },\n\n        indicatorProps() {\n            return Object.assign(\n                {\n                    type: 'spinner',\n                },\n                (typeof this.indicator === 'string'\n                    ? {\n                        type: this.indicator,\n                    }\n                    : this.indicator) || {}\n            );\n        },\n    },\n\n    watch: {\n        activity(value: boolean) {\n            if(value) {\n                this.showActivity();\n            } else {\n                this.hideActivity();\n            }\n        },\n    },\n\n    mounted() {\n        if(this.activity) {\n            this.showActivity();\n        }\n    },\n\n    methods: {\n        /**\n\t\t * Disable the button.\n\t\t */\n        disable(): void {\n            this.$el.disabled = true;\n            this.$el.classList.add('disabled');\n        },\n\n        /**\n\t\t * Enable the button.\n\t\t */\n        enable(): void {\n            this.$el.disabled = false;\n            this.$el.classList.remove('disabled');\n        },\n\n        /**\n\t\t * Hide the activity indicator inside the button.\n\t\t */\n        hideActivity(): void {\n            this.$el.classList.add('btn-hide-activity');\n\n            animated(this.$el, () => {\n                if(!this.disabled) {\n                \tthis.enable();\n                }\n\t\t\t\t\n                this.currentActivity = false;\n                this.$el.classList.remove('btn-activity', 'btn-hide-activity');\n                this.$emit('hide-activity');\n            });\n        },\n\n        /**\n\t\t * Show the activity indicator inside the button.\n\t\t */\n        showActivity(): void {\n            this.currentActivity = true;\n            this.disable();\n\n            animated(this.$el, () => {\n                this.$el.classList.add('btn-activity');\n                this.$emit('show-activity');\n            });\n        },\n\n        /**\n\t\t * Show the activity indicator inside the button.\n\t\t */\n        toggle(): void {\n            if(!this.currentActivity) {\n                this.showActivity();\n            } else {\n                this.hideActivity();\n            }\n        },\n    },\n});\n</script>\n\n<template>\n    <Btn\n        :active=\"active\"\n        :block=\"block\"\n        :disabled=\"disabled\"\n        :tag=\"tag\"\n        :class=\"classes\"\n        v-bind=\"Object.assign({}, $attrs, { onClick: undefined })\"\n        @click=\"!disabled && $emit('click', $event, {\n            disable,\n            enable,\n            toggle,\n            showActivity,\n            hideActivity,\n        })\">\n        <slot>{{ label }}</slot>\n        <ActivityIndicator v-bind=\"indicatorProps\" />\n    </Btn>\n</template>\n\n<style>\n@keyframes btn-activity-in {\n\n\t0%,\n\t100% {\n\t\ttransform: scale(1);\n\t}\n\n\t30% {\n\t\ttransform: scale(0.98);\n\t}\n}\n\n@keyframes btn-activity-out {\n\n\t0%,\n\t100% {\n\t\ttransform: scale(1);\n\t}\n\n\t70% {\n\t\ttransform: scale(0.98);\n\t}\n}\n\n.btn-activity-top,\n.btn.btn-activity-top,\n.btn-activity-bottom,\n.btn.btn-activity-bottom,\n.btn-activity-left,\n.btn.btn-activity-left,\n.btn-activity-right,\n.btn.btn-activity-right {\n\tdisplay: inline-flex;\n\tposition: relative;\n\ttransition: all calc(333ms / 2) ease-in;\n}\n\n.btn-activity-top .activity-indicator,\n.btn-activity-bottom .activity-indicator,\n.btn-activity-left .activity-indicator,\n.btn-activity-right .activity-indicator {\n\topacity: 0;\n\tposition: absolute;\n\tvisibility: hidden;\n\ttransition: opacity 333ms ease-in;\n}\n\n.btn-activity-top,\n.btn-activity-bottom {\n\tflex-direction: column;\n\talign-items: center;\n}\n\n.btn-activity-top .activity-indicator,\n.btn-activity-bottom .activity-indicator {\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n.btn-activity-top {\n\tflex-direction: column-reverse;\n}\n\n.btn-activity-top .activity-indicator {\n\tpadding-bottom: 1em;\n}\n\n.btn-activity-bottom .activity-indicator {\n\tpadding-top: 1em;\n}\n\n.btn-activity-left,\n.btn-activity-right {\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.btn-activity-left {\n\tflex-direction: row-reverse;\n}\n\n.btn-activity-left .activity-indicator {\n\tpadding-right: 1em;\n}\n\n.btn-activity-right .activity-indicator {\n\tpadding-left: 1em;\n}\n\n.btn-activity:not(.btn-link) {\n\tanimation: btn-activity-in 333ms;\n}\n\n.btn-hide-activity:not(.btn-link) {\n\tanimation: btn-activity-out 333ms;\n}\n\n.btn-activity.btn-hide-activity .activity-indicator {\n\topacity: 0;\n}\n\n.btn-activity .activity-indicator {\n\topacity: 1;\n\tvisibility: visible;\n\tposition: relative;\n\tfont-size: 0.55em;\n}\n</style>\n"],"names":["convertAnimationDelayToInt","delay","num","matches","unit","milliseconds","animated","el","callback","defaultView","_sfc_main","defineComponent","ActivityIndicator","Btn","value","_resolveComponent","_openBlock","_createBlock","_component_Btn","_mergeProps","_ctx","_cache","$event","_withCtx","_createTextVNode","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"btn-activity.umd.cjs","sources":["../src/BtnActivity.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { Btn, type BtnProps } from '@vue-interface/btn';\nimport { ref, watch, watchEffect, type Component, type Ref } from 'vue';\n\nexport type BtnActivityProps = {\n    activity?: boolean;\n    indicator: Component;\n    indicatorSize?: string;\n    label?: string;\n    orientation?: 'top' | 'bottom' | 'left' | 'right';\n};\n\nconst props = withDefaults(defineProps<BtnActivityProps & BtnProps>(), {\n    orientation: 'right',\n    variant: 'btn-primary'\n});\n\nexport type BtnActivityContext = {\n    status: Ref<boolean>;\n    toggle: Function;\n}\n\nconst emit = defineEmits<{\n    click: [event: MouseEvent, context: BtnActivityContext];\n    'hide-activity': [];\n    'show-activity': [];\n}>();\n\nconst status = ref(props.activity);\n\nwatchEffect(() => {\n    status.value = props.activity;\n});\n\nwatch(status, (value) => {\n    if(value) {\n        emit('show-activity');\n    }\n    else {\n        emit('hide-activity');\n    }\n});\n\nfunction toggle() {\n    status.value = !status.value;\n}\n\nconst context = {\n    status,\n    toggle,\n};\n</script>\n\n<template>\n    <Btn\n        v-bind=\"props\"\n        :class=\"{\n            'gap-1': !indicatorSize || ['xs', 'sm'].includes(indicatorSize),\n            'gap-2': ['md', 'lg', 'xl'].includes(indicatorSize),\n            'flex-col flex-col-reverse': orientation === 'top',\n            'flex-col': orientation === 'bottom',\n            'flex-row-reverse': orientation === 'left',\n        }\"\n        @click=\"emit('click', $event, context)\">\n        <slot>{{ label }}</slot>\n        <Transition\n            enter-active-class=\"transition-all ease-out duration-250\"\n            enter-from-class=\"opacity-0\"\n            enter-to-class=\"opacity-100\"\n            leave-active-class=\"transition-all ease-in duration-250\"\n            leave-from-class=\"opacity-100\"\n            leave-to-class=\"opacity-0\">\n            <ActivityIndicator\n                v-if=\"status\"\n                :type=\"indicator\"\n                :size=\"indicatorSize ?? 'xs'\"\n                :class=\"{\n                    'pt-1': orientation === 'top',\n                    'pb-1': orientation === 'bottom',\n                    'pr-1': orientation === 'left',\n                    'pl-1': orientation === 'right',\n                }\" />\n        </Transition>\n    </Btn>\n</template>\n"],"names":["props","__props","emit","__emit","status","ref","watchEffect","watch","value","toggle","context"],"mappings":"0xBAaA,MAAMA,EAAQC,EAURC,EAAOC,EAMPC,EAASC,EAAAA,IAAIL,EAAM,QAAQ,EAEjCM,EAAAA,YAAY,IAAM,CACdF,EAAO,MAAQJ,EAAM,QAAA,CACxB,EAEKO,QAAAH,EAASI,GAAU,CAEjBN,EADDM,EACM,gBAGA,eAHe,CAIxB,CACH,EAED,SAASC,GAAS,CACPL,EAAA,MAAQ,CAACA,EAAO,KAC3B,CAEA,MAAMM,EAAU,CACZ,OAAAN,EACA,OAAAK,CAAA"}

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

@@ -1,136 +1,56 @@
-declare const _default: 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: ObjectConstructor;
-        required: true;
-    };
-    /**
-     * The button label.
-     */
-    label: {
-        type: StringConstructor;
-        default: any;
-    };
-    /**
-     * The orientation of the activity button inside the button.
-     */
-    orientation: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * The HTML tag.
-     */
-    tag: {
-        type: StringConstructor;
-        default: any;
-    };
-}, unknown, {
-    currentActivity: boolean;
-}, {
-    /**
-     * An object of classes to append to the button.
-     */
-    classes(): {
-        [x: string]: any;
-        'btn-activity': any;
-    };
-    indicatorProps(): any;
+import { type BtnProps } from '@vue-interface/btn';
+import { type Component, type Ref } from 'vue';
+export type BtnActivityProps = {
+    activity?: boolean;
+    indicator: Component;
+    indicatorSize?: string;
+    label?: string;
+    orientation?: 'top' | 'bottom' | 'left' | 'right';
+};
+export type BtnActivityContext = {
+    status: Ref<boolean>;
+    toggle: Function;
+};
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BtnActivityProps & BtnProps>, {
+    orientation: string;
+    variant: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent, context: BtnActivityContext) => void;
+    "hide-activity": () => void;
+    "show-activity": () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BtnActivityProps & BtnProps>, {
+    orientation: string;
+    variant: string;
+}>>> & {
+    onClick?: (event: MouseEvent, context: BtnActivityContext) => any;
+    "onHide-activity"?: () => any;
+    "onShow-activity"?: () => 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, ("click" | "hide-activity" | "show-activity")[], "click" | "hide-activity" | "show-activity", 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: ObjectConstructor;
+    orientation: "top" | "bottom" | "left" | "right";
+    variant: string;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
         required: true;
     };
-    /**
-     * The button label.
-     */
-    label: {
-        type: StringConstructor;
-        default: any;
-    };
-    /**
-     * The orientation of the activity button inside the button.
-     */
-    orientation: {
-        type: StringConstructor;
-        default: string;
-    };
-    /**
-     * The HTML tag.
-     */
-    tag: {
-        type: StringConstructor;
-        default: any;
-    };
-}>> & {
-    onClick?: (...args: any[]) => any;
-    "onHide-activity"?: (...args: any[]) => any;
-    "onShow-activity"?: (...args: any[]) => any;
-}, {
-    label: string;
-    active: boolean;
-    block: boolean;
-    disabled: boolean;
-    tag: string;
-    activity: boolean;
-    orientation: string;
-}, {}>;
-export default _default;
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/btn-activity",
-  "version": "2.0.0-beta.16",
+  "version": "2.0.0-beta.17",
   "description": "A Vue activity button component.",
   "type": "module",
   "files": [
@@ -8,15 +8,13 @@
   ],
   "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.js",
       "require": "./dist/btn-activity.umd.cjs",
       "types": "./dist/index.d.ts"
-    },
-    "./dist/style.css": "./dist/style.css"
+    }
   },
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "scripts": {
@@ -43,8 +41,8 @@
   },
   "homepage": "https://github.com/vue-interface/btn-activity",
   "dependencies": {
-    "@vue-interface/activity-indicator": "^2.0.0-beta.7",
-    "@vue-interface/btn": "^3.0.0-beta.21"
+    "@vue-interface/activity-indicator": "^2.0.0-beta.20",
+    "@vue-interface/btn": "^3.0.0-beta.24"
   },
   "peerDependencies": {
     "vue": "^3.3.4"

package/dist/style.css

@@ -1 +0,0 @@
-@-webkit-keyframes btn-activity-in{0%,to{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.98);transform:scale(.98)}}@keyframes btn-activity-in{0%,to{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.98);transform:scale(.98)}}@-webkit-keyframes btn-activity-out{0%,to{-webkit-transform:scale(1);transform:scale(1)}70%{-webkit-transform:scale(.98);transform:scale(.98)}}@keyframes btn-activity-out{0%,to{-webkit-transform:scale(1);transform:scale(1)}70%{-webkit-transform:scale(.98);transform:scale(.98)}}.btn-activity-top,.btn.btn-activity-top,.btn-activity-bottom,.btn.btn-activity-bottom,.btn-activity-left,.btn.btn-activity-left,.btn-activity-right,.btn.btn-activity-right{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-transition:all 166.5ms ease-in;transition:all 166.5ms ease-in}.btn-activity-top .activity-indicator,.btn-activity-bottom .activity-indicator,.btn-activity-left .activity-indicator,.btn-activity-right .activity-indicator{opacity:0;position:absolute;visibility:hidden;-webkit-transition:opacity 333ms ease-in;transition:opacity 333ms ease-in}.btn-activity-top,.btn-activity-bottom{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.btn-activity-top .activity-indicator,.btn-activity-bottom .activity-indicator{margin-left:auto;margin-right:auto}.btn-activity-top{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.btn-activity-top .activity-indicator{padding-bottom:1em}.btn-activity-bottom .activity-indicator{padding-top:1em}.btn-activity-left,.btn-activity-right{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.btn-activity-left{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.btn-activity-left .activity-indicator{padding-right:1em}.btn-activity-right .activity-indicator{padding-left:1em}.btn-activity:not(.btn-link){-webkit-animation:btn-activity-in 333ms;animation:btn-activity-in 333ms}.btn-hide-activity:not(.btn-link){-webkit-animation:btn-activity-out 333ms;animation:btn-activity-out 333ms}.btn-activity.btn-hide-activity .activity-indicator{opacity:0}.btn-activity .activity-indicator{opacity:1;visibility:visible;position:relative;font-size:.55em}