@vue-interface/btn-activity 4.0.7 → 4.0.9

package/dist/btn-activity.js

@@ -1,52 +1,52 @@
-import { defineComponent as f, ref as y, watchEffect as v, watch as m, createElementBlock as b, openBlock as l, normalizeClass as c, renderSlot as x, createVNode as h, createTextVNode as k, toDisplayString as z, Transition as g, withCtx as w, createBlock as B, createCommentVNode as S, unref as C } from "vue";
-import { ActivityIndicator as A } from "@vue-interface/activity-indicator";
-const N = ["disabled"], T = /* @__PURE__ */ f({
+import { defineComponent as y, ref as u, watchEffect as v, watch as f, createElementBlock as b, openBlock as n, normalizeClass as o, renderSlot as x, createVNode as h, createTextVNode as k, toDisplayString as z, Transition as g, withCtx as w, createBlock as B, createCommentVNode as S, unref as p } from "vue";
+import { ActivityIndicator as C } from "@vue-interface/activity-indicator";
+const A = ["disabled"], E = /* @__PURE__ */ y({
   __name: "BtnActivity",
   props: {
     activity: { type: Boolean },
     indicator: {},
-    indicatorSize: { default: "xs" },
+    indicatorSize: { default: "activity-indicator-xs" },
     label: { default: void 0 },
-    orientation: { default: "right" },
+    placement: { default: "right" },
     variant: { default: "btn-primary" },
     size: { default: "btn-md" },
     block: { type: Boolean },
     disabled: { type: Boolean }
   },
   emits: ["click", "hide-activity", "show-activity"],
-  setup(t, { emit: r }) {
-    const n = t, i = r, e = y(n.activity);
+  setup(t, { emit: s }) {
+    const c = t, i = s, e = u(c.activity);
     v(() => {
-      e.value = n.activity;
-    }), m(e, (a) => {
+      e.value = c.activity;
+    }), f(e, (a) => {
       i(a ? "show-activity" : "hide-activity");
     });
-    function s() {
+    function d() {
       e.value = !e.value;
     }
-    const d = {
+    const r = {
       status: e,
-      toggle: s
+      toggle: d
     };
-    return (a, o) => (l(), b("button", {
+    return (a, l) => (n(), b("button", {
       type: "button",
       disabled: t.disabled,
-      class: c([
+      class: o([
         "btn",
         t.variant,
         t.size,
         {
           "w-full": t.block,
-          "gap-1": ["xs", "sm"].includes(t.indicatorSize),
-          "gap-2": ["md", "lg", "xl"].includes(t.indicatorSize),
-          "flex-col-reverse": t.orientation === "top",
-          "flex-col": t.orientation === "bottom",
-          "flex-row-reverse": t.orientation === "left",
+          "gap-1": ["activity-indicator-xs", "activity-indicator-sm"].includes(t.indicatorSize),
+          "gap-2": ["activity-indicator-md", "activity-indicator-lg", "activity-indicator-xl"].includes(t.indicatorSize),
+          "flex-col-reverse": t.placement === "top",
+          "flex-col": t.placement === "bottom",
+          "flex-row-reverse": t.placement === "left",
           "inline-flex items-center justify-center": !0,
           "opacity-50 cursor-not-allowed": t.disabled
         }
       ]),
-      onClick: o[0] || (o[0] = (u) => i("click", u, d))
+      onClick: l[0] || (l[0] = (m) => i("click", m, r))
     }, [
       x(a.$slots, "default", {}, () => [
         k(z(t.label), 1)
@@ -60,24 +60,24 @@ const N = ["disabled"], T = /* @__PURE__ */ f({
         "leave-to-class": "opacity-0"
       }, {
         default: w(() => [
-          e.value ? (l(), B(C(A), {
+          e.value ? (n(), B(p(C), {
             key: 0,
             type: t.indicator,
             size: t.indicatorSize,
-            class: c({
-              "pt-1": t.orientation === "top",
-              "pb-1": t.orientation === "bottom",
-              "pr-1": t.orientation === "left",
-              "pl-1": t.orientation === "right"
+            class: o({
+              "pt-1": t.placement === "top",
+              "pb-1": t.placement === "bottom",
+              "pr-1": t.placement === "left",
+              "pl-1": t.placement === "right"
             })
           }, null, 8, ["type", "size", "class"])) : S("", !0)
         ]),
         _: 1
       })
-    ], 10, N));
+    ], 10, A));
   }
 });
 export {
-  T 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\" setup>\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { ref, watch, watchEffect, type Component, type Ref } from 'vue';\nimport { ActivityIndicatorSize } from '../../activity-indicator/src/ActivityIndicator.vue';\n\nexport type BtnActivityProps = {\n    activity?: boolean;\n    indicator: Component;\n    indicatorSize?: ActivityIndicatorSize;\n    label?: string;\n    orientation?: 'top' | 'bottom' | 'left' | 'right';\n    variant?: string;\n    size?: string;\n    block?: boolean;  \n    disabled?: boolean;\n};\n\nconst props = withDefaults(defineProps<BtnActivityProps>(), {\n    indicatorSize: 'xs',\n    label: undefined,\n    orientation: 'right',\n    variant: 'btn-primary',\n    size: 'btn-md'\n});\n\nexport type BtnActivityContext = {\n    status: Ref<boolean>;\n    toggle: () => void;\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    <button\n        type=\"button\"\n        :disabled=\"disabled\"\n        :class=\"[\n            'btn',\n            variant,\n            size,\n            {\n                'w-full': block,\n                'gap-1': ['xs', 'sm'].includes(indicatorSize),\n                'gap-2': ['md', 'lg', 'xl'].includes(indicatorSize),\n                'flex-col-reverse': orientation === 'top',\n                'flex-col': orientation === 'bottom',\n                'flex-row-reverse': orientation === 'left',\n                'inline-flex items-center justify-center': true,\n                'opacity-50 cursor-not-allowed': disabled,\n            }\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\"\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    </button>\n</template>"],"names":["props","__props","emit","__emit","status","ref","watchEffect","watch","value","toggle","context","_createElementBlock","_normalizeClass","_cache","$event","_renderSlot","_ctx","_createVNode","_Transition","_createBlock","_unref","ActivityIndicator"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,UAAMA,IAAQC,GAaRC,IAAOC,GAMPC,IAASC,EAAIL,EAAM,QAAQ;AAEjC,IAAAM,EAAY,MAAM;AACd,MAAAF,EAAO,QAAQJ,EAAM;AAAA,IACzB,CAAC,GAEDO,EAAMH,GAAQ,CAACI,MAAU;AACrB,MACIN,EADDM,IACM,kBAGA,eAHe;AAAA,IAK5B,CAAC;AAED,aAASC,IAAS;AACd,MAAAL,EAAO,QAAQ,CAACA,EAAO;AAAA,IAC3B;AAEA,UAAMM,IAAU;AAAA,MACZ,QAAAN;AAAA,MACA,QAAAK;AAAA,IAAA;2BAKAE,EAsCS,UAAA;AAAA,MArCL,MAAK;AAAA,MACJ,UAAUV,EAAA;AAAA,MACV,OAAKW,EAAA;AAAA;QAAmCX,EAAA;AAAA,QAAqBA,EAAA;AAAA;oBAA8CA,EAAA;AAAA,UAA6C,SAAA,CAAA,MAAA,IAAA,EAAA,SAASA,EAAA,aAAa;AAAA,UAA+C,SAAA,CAAA,MAAA,MAAA,IAAA,EAAA,SAASA,EAAA,aAAa;AAAA,8BAAuCA,EAAA,gBAAW;AAAA,sBAAwCA,EAAA,gBAAW;AAAA,8BAAmDA,EAAA,gBAAW;AAAA;2CAA+HA,EAAA;AAAA,QAAA;AAAA;MAerhB,SAAKY,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEZ,EAAI,SAAUY,GAAQJ,CAAO;AAAA,IAAA;MACrCK,EAAwBC,yBAAxB,MAAwB;AAAA,YAAff,EAAA,KAAK,GAAA,CAAA;AAAA,MAAA;MACdgB,EAiBaC,GAAA;AAAA,QAhBT,sBAAmB;AAAA,QACnB,oBAAiB;AAAA,QACjB,kBAAe;AAAA,QACf,sBAAmB;AAAA,QACnB,oBAAiB;AAAA,QACjB,kBAAe;AAAA,MAAA;;UAELd,EAAA,cADVe,EASSC,EAAAC,CAAA,GAAA;AAAA;YAPJ,MAAMpB,EAAA;AAAA,YACN,MAAMA,EAAA;AAAA,YACN,OAAKW,EAAA;AAAA,sBAAgCX,EAAA,gBAAW;AAAA,sBAAwCA,EAAA,gBAAW;AAAA,sBAA2CA,EAAA,gBAAW;AAAA,sBAAyCA,EAAA,gBAAW;AAAA,YAAA;;;;;;;;"}
+{"version":3,"file":"btn-activity.js","sources":["../src/BtnActivity.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ActivityIndicator, type ActivityIndicatorSizePrefix } from '@vue-interface/activity-indicator';\nimport { ref, watch, watchEffect, type Component, type Ref } from 'vue';\nimport type { ComponentSize } from '@vue-interface/sizeable';\n\nexport type BtnSizePrefix = 'btn';\n\nexport type BtnActivityProps = {\n    activity?: boolean;\n    indicator: Component;\n    indicatorSize?: ComponentSize<ActivityIndicatorSizePrefix>;\n    label?: string;\n    placement?: 'top' | 'bottom' | 'left' | 'right';\n    variant?: string;\n    size?: ComponentSize<BtnSizePrefix>;\n    block?: boolean;  \n    disabled?: boolean;\n};\n\nconst props = withDefaults(defineProps<BtnActivityProps>(), {\n    indicatorSize: 'activity-indicator-xs',\n    label: undefined,\n    placement: 'right',\n    variant: 'btn-primary',\n    size: 'btn-md'\n});\n\nexport type BtnActivityContext = {\n    status: Ref<boolean>;\n    toggle: () => void;\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    <button\n        type=\"button\"\n        :disabled=\"disabled\"\n        :class=\"[\n            'btn',\n            variant,\n            size,\n            {\n                'w-full': block,\n                'gap-1': ['activity-indicator-xs', 'activity-indicator-sm'].includes(indicatorSize as string),\n                'gap-2': ['activity-indicator-md', 'activity-indicator-lg', 'activity-indicator-xl'].includes(indicatorSize as string),\n                'flex-col-reverse': placement === 'top',\n                'flex-col': placement === 'bottom',\n                'flex-row-reverse': placement === 'left',\n                'inline-flex items-center justify-center': true,\n                'opacity-50 cursor-not-allowed': disabled,\n            }\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\"\n                :class=\"{\n                    'pt-1': placement === 'top',\n                    'pb-1': placement === 'bottom',\n                    'pr-1': placement === 'left',\n                    'pl-1': placement === 'right',\n                }\" />\n        </Transition>\n    </button>\n</template>"],"names":["props","__props","emit","__emit","status","ref","watchEffect","watch","value","toggle","context","_createElementBlock","_normalizeClass","_cache","$event","_renderSlot","_ctx","_createVNode","_Transition","_createBlock","_unref","ActivityIndicator"],"mappings":";;;;;;;;;;;;;;;;;AAmBA,UAAMA,IAAQC,GAaRC,IAAOC,GAMPC,IAASC,EAAIL,EAAM,QAAQ;AAEjC,IAAAM,EAAY,MAAM;AACd,MAAAF,EAAO,QAAQJ,EAAM;AAAA,IACzB,CAAC,GAEDO,EAAMH,GAAQ,CAACI,MAAU;AACrB,MACIN,EADDM,IACM,kBAGA,eAHe;AAAA,IAK5B,CAAC;AAED,aAASC,IAAS;AACd,MAAAL,EAAO,QAAQ,CAACA,EAAO;AAAA,IAC3B;AAEA,UAAMM,IAAU;AAAA,MACZ,QAAAN;AAAA,MACA,QAAAK;AAAA,IAAA;2BAKAE,EAsCS,UAAA;AAAA,MArCL,MAAK;AAAA,MACJ,UAAUV,EAAA;AAAA,MACV,OAAKW,EAAA;AAAA;QAAmCX,EAAA;AAAA,QAAqBA,EAAA;AAAA;oBAA8CA,EAAA;AAAA,UAAmF,SAAA,CAAA,yBAAA,uBAAA,EAAA,SAASA,EAAA,aAAa;AAAA,UAAkH,SAAA,CAAA,yBAAA,yBAAA,uBAAA,EAAA,SAASA,EAAA,aAAa;AAAA,8BAAiDA,EAAA,cAAS;AAAA,sBAAwCA,EAAA,cAAS;AAAA,8BAAmDA,EAAA,cAAS;AAAA;2CAA+HA,EAAA;AAAA,QAAA;AAAA;MAeloB,SAAKY,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAEZ,EAAI,SAAUY,GAAQJ,CAAO;AAAA,IAAA;MACrCK,EAAwBC,yBAAxB,MAAwB;AAAA,YAAff,EAAA,KAAK,GAAA,CAAA;AAAA,MAAA;MACdgB,EAiBaC,GAAA;AAAA,QAhBT,sBAAmB;AAAA,QACnB,oBAAiB;AAAA,QACjB,kBAAe;AAAA,QACf,sBAAmB;AAAA,QACnB,oBAAiB;AAAA,QACjB,kBAAe;AAAA,MAAA;mBACf,MASS;AAAA,UARCd,EAAA,cADVe,EASSC,EAAAC,CAAA,GAAA;AAAA;YAPJ,MAAMpB,EAAA;AAAA,YACN,MAAMA,EAAA;AAAA,YACN,OAAKW,EAAA;AAAA,sBAAgCX,EAAA,cAAS;AAAA,sBAAwCA,EAAA,cAAS;AAAA,sBAA2CA,EAAA,cAAS;AAAA,sBAAyCA,EAAA,cAAS;AAAA,YAAA;;;;;;;;"}

package/dist/btn-activity.umd.cjs

@@ -1,2 +1,2 @@
-(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@vue-interface/activity-indicator")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/activity-indicator"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i.BtnActivity={},i.Vue,i.VueInterfaceActivityIndicator))})(this,(function(i,t,r){"use strict";const s=["disabled"],d=t.defineComponent({__name:"BtnActivity",props:{activity:{type:Boolean},indicator:{},indicatorSize:{default:"xs"},label:{default:void 0},orientation:{default:"right"},variant:{default:"btn-primary"},size:{default:"btn-md"},block:{type:Boolean},disabled:{type:Boolean}},emits:["click","hide-activity","show-activity"],setup(e,{emit:f}){const c=e,a=f,n=t.ref(c.activity);t.watchEffect(()=>{n.value=c.activity}),t.watch(n,o=>{a(o?"show-activity":"hide-activity")});function y(){n.value=!n.value}const u={status:n,toggle:y};return(o,l)=>(t.openBlock(),t.createElementBlock("button",{type:"button",disabled:e.disabled,class:t.normalizeClass(["btn",e.variant,e.size,{"w-full":e.block,"gap-1":["xs","sm"].includes(e.indicatorSize),"gap-2":["md","lg","xl"].includes(e.indicatorSize),"flex-col-reverse":e.orientation==="top","flex-col":e.orientation==="bottom","flex-row-reverse":e.orientation==="left","inline-flex items-center justify-center":!0,"opacity-50 cursor-not-allowed":e.disabled}]),onClick:l[0]||(l[0]=m=>a("click",m,u))},[t.renderSlot(o.$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(()=>[n.value?(t.openBlock(),t.createBlock(t.unref(r.ActivityIndicator),{key:0,type:e.indicator,size:e.indicatorSize,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})],10,s))}});i.BtnActivity=d,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})}));
+(function(i,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@vue-interface/activity-indicator")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-interface/activity-indicator"],t):(i=typeof globalThis<"u"?globalThis:i||self,t(i.BtnActivity={},i.Vue,i.VueInterfaceActivityIndicator))})(this,(function(i,t,d){"use strict";const s=["disabled"],r=t.defineComponent({__name:"BtnActivity",props:{activity:{type:Boolean},indicator:{},indicatorSize:{default:"activity-indicator-xs"},label:{default:void 0},placement:{default:"right"},variant:{default:"btn-primary"},size:{default:"btn-md"},block:{type:Boolean},disabled:{type:Boolean}},emits:["click","hide-activity","show-activity"],setup(e,{emit:f}){const l=e,n=f,a=t.ref(l.activity);t.watchEffect(()=>{a.value=l.activity}),t.watch(a,c=>{n(c?"show-activity":"hide-activity")});function y(){a.value=!a.value}const m={status:a,toggle:y};return(c,o)=>(t.openBlock(),t.createElementBlock("button",{type:"button",disabled:e.disabled,class:t.normalizeClass(["btn",e.variant,e.size,{"w-full":e.block,"gap-1":["activity-indicator-xs","activity-indicator-sm"].includes(e.indicatorSize),"gap-2":["activity-indicator-md","activity-indicator-lg","activity-indicator-xl"].includes(e.indicatorSize),"flex-col-reverse":e.placement==="top","flex-col":e.placement==="bottom","flex-row-reverse":e.placement==="left","inline-flex items-center justify-center":!0,"opacity-50 cursor-not-allowed":e.disabled}]),onClick:o[0]||(o[0]=u=>n("click",u,m))},[t.renderSlot(c.$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(()=>[a.value?(t.openBlock(),t.createBlock(t.unref(d.ActivityIndicator),{key:0,type:e.indicator,size:e.indicatorSize,class:t.normalizeClass({"pt-1":e.placement==="top","pb-1":e.placement==="bottom","pr-1":e.placement==="left","pl-1":e.placement==="right"})},null,8,["type","size","class"])):t.createCommentVNode("",!0)]),_:1})],10,s))}});i.BtnActivity=r,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\" setup>\nimport { ActivityIndicator } from '@vue-interface/activity-indicator';\nimport { ref, watch, watchEffect, type Component, type Ref } from 'vue';\nimport { ActivityIndicatorSize } from '../../activity-indicator/src/ActivityIndicator.vue';\n\nexport type BtnActivityProps = {\n    activity?: boolean;\n    indicator: Component;\n    indicatorSize?: ActivityIndicatorSize;\n    label?: string;\n    orientation?: 'top' | 'bottom' | 'left' | 'right';\n    variant?: string;\n    size?: string;\n    block?: boolean;  \n    disabled?: boolean;\n};\n\nconst props = withDefaults(defineProps<BtnActivityProps>(), {\n    indicatorSize: 'xs',\n    label: undefined,\n    orientation: 'right',\n    variant: 'btn-primary',\n    size: 'btn-md'\n});\n\nexport type BtnActivityContext = {\n    status: Ref<boolean>;\n    toggle: () => void;\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    <button\n        type=\"button\"\n        :disabled=\"disabled\"\n        :class=\"[\n            'btn',\n            variant,\n            size,\n            {\n                'w-full': block,\n                'gap-1': ['xs', 'sm'].includes(indicatorSize),\n                'gap-2': ['md', 'lg', 'xl'].includes(indicatorSize),\n                'flex-col-reverse': orientation === 'top',\n                'flex-col': orientation === 'bottom',\n                'flex-row-reverse': orientation === 'left',\n                'inline-flex items-center justify-center': true,\n                'opacity-50 cursor-not-allowed': disabled,\n            }\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\"\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    </button>\n</template>"],"names":["props","__props","emit","__emit","status","ref","watchEffect","watch","value","toggle","context","_createElementBlock","_normalizeClass","_cache","$event","_renderSlot","_ctx","_createVNode","_Transition","_createBlock","_unref","ActivityIndicator"],"mappings":"ytBAiBA,MAAMA,EAAQC,EAaRC,EAAOC,EAMPC,EAASC,EAAAA,IAAIL,EAAM,QAAQ,EAEjCM,EAAAA,YAAY,IAAM,CACdF,EAAO,MAAQJ,EAAM,QACzB,CAAC,EAEDO,QAAMH,EAASI,GAAU,CAEjBN,EADDM,EACM,gBAGA,eAHe,CAK5B,CAAC,EAED,SAASC,GAAS,CACdL,EAAO,MAAQ,CAACA,EAAO,KAC3B,CAEA,MAAMM,EAAU,CACZ,OAAAN,EACA,OAAAK,CAAA,8BAKAE,EAAAA,mBAsCS,SAAA,CArCL,KAAK,SACJ,SAAUV,EAAA,SACV,MAAKW,EAAAA,eAAA,OAAmCX,EAAA,QAAqBA,EAAA,eAA8CA,EAAA,MAA6C,QAAA,CAAA,KAAA,IAAA,EAAA,SAASA,EAAA,aAAa,EAA+C,QAAA,CAAA,KAAA,KAAA,IAAA,EAAA,SAASA,EAAA,aAAa,qBAAuCA,EAAA,cAAW,iBAAwCA,EAAA,cAAW,4BAAmDA,EAAA,cAAW,oFAA+HA,EAAA,QAAA,IAerhB,QAAKY,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEZ,EAAI,QAAUY,EAAQJ,CAAO,EAAA,GACrCK,EAAAA,WAAwBC,sBAAxB,IAAwB,qCAAff,EAAA,KAAK,EAAA,CAAA,CAAA,GACdgB,EAAAA,YAiBaC,EAAAA,WAAA,CAhBT,qBAAmB,uCACnB,mBAAiB,YACjB,iBAAe,cACf,qBAAmB,sCACnB,mBAAiB,cACjB,iBAAe,WAAA,0BAELd,EAAA,qBADVe,EAAAA,YASSC,EAAAA,MAAAC,EAAAA,iBAAA,EAAA,OAPJ,KAAMpB,EAAA,UACN,KAAMA,EAAA,cACN,MAAKW,EAAAA,eAAA,QAAgCX,EAAA,cAAW,aAAwCA,EAAA,cAAW,gBAA2CA,EAAA,cAAW,cAAyCA,EAAA,cAAW,OAAA"}
+{"version":3,"file":"btn-activity.umd.cjs","sources":["../src/BtnActivity.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ActivityIndicator, type ActivityIndicatorSizePrefix } from '@vue-interface/activity-indicator';\nimport { ref, watch, watchEffect, type Component, type Ref } from 'vue';\nimport type { ComponentSize } from '@vue-interface/sizeable';\n\nexport type BtnSizePrefix = 'btn';\n\nexport type BtnActivityProps = {\n    activity?: boolean;\n    indicator: Component;\n    indicatorSize?: ComponentSize<ActivityIndicatorSizePrefix>;\n    label?: string;\n    placement?: 'top' | 'bottom' | 'left' | 'right';\n    variant?: string;\n    size?: ComponentSize<BtnSizePrefix>;\n    block?: boolean;  \n    disabled?: boolean;\n};\n\nconst props = withDefaults(defineProps<BtnActivityProps>(), {\n    indicatorSize: 'activity-indicator-xs',\n    label: undefined,\n    placement: 'right',\n    variant: 'btn-primary',\n    size: 'btn-md'\n});\n\nexport type BtnActivityContext = {\n    status: Ref<boolean>;\n    toggle: () => void;\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    <button\n        type=\"button\"\n        :disabled=\"disabled\"\n        :class=\"[\n            'btn',\n            variant,\n            size,\n            {\n                'w-full': block,\n                'gap-1': ['activity-indicator-xs', 'activity-indicator-sm'].includes(indicatorSize as string),\n                'gap-2': ['activity-indicator-md', 'activity-indicator-lg', 'activity-indicator-xl'].includes(indicatorSize as string),\n                'flex-col-reverse': placement === 'top',\n                'flex-col': placement === 'bottom',\n                'flex-row-reverse': placement === 'left',\n                'inline-flex items-center justify-center': true,\n                'opacity-50 cursor-not-allowed': disabled,\n            }\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\"\n                :class=\"{\n                    'pt-1': placement === 'top',\n                    'pb-1': placement === 'bottom',\n                    'pr-1': placement === 'left',\n                    'pl-1': placement === 'right',\n                }\" />\n        </Transition>\n    </button>\n</template>"],"names":["props","__props","emit","__emit","status","ref","watchEffect","watch","value","toggle","context","_createElementBlock","_normalizeClass","_cache","$event","_renderSlot","_ctx","_createVNode","_Transition","_createBlock","_unref","ActivityIndicator"],"mappings":"0uBAmBA,MAAMA,EAAQC,EAaRC,EAAOC,EAMPC,EAASC,EAAAA,IAAIL,EAAM,QAAQ,EAEjCM,EAAAA,YAAY,IAAM,CACdF,EAAO,MAAQJ,EAAM,QACzB,CAAC,EAEDO,QAAMH,EAASI,GAAU,CAEjBN,EADDM,EACM,gBAGA,eAHe,CAK5B,CAAC,EAED,SAASC,GAAS,CACdL,EAAO,MAAQ,CAACA,EAAO,KAC3B,CAEA,MAAMM,EAAU,CACZ,OAAAN,EACA,OAAAK,CAAA,8BAKAE,EAAAA,mBAsCS,SAAA,CArCL,KAAK,SACJ,SAAUV,EAAA,SACV,MAAKW,EAAAA,eAAA,OAAmCX,EAAA,QAAqBA,EAAA,eAA8CA,EAAA,MAAmF,QAAA,CAAA,wBAAA,uBAAA,EAAA,SAASA,EAAA,aAAa,EAAkH,QAAA,CAAA,wBAAA,wBAAA,uBAAA,EAAA,SAASA,EAAA,aAAa,qBAAiDA,EAAA,YAAS,iBAAwCA,EAAA,YAAS,4BAAmDA,EAAA,YAAS,oFAA+HA,EAAA,QAAA,IAeloB,QAAKY,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAAC,GAAEZ,EAAI,QAAUY,EAAQJ,CAAO,EAAA,GACrCK,EAAAA,WAAwBC,sBAAxB,IAAwB,qCAAff,EAAA,KAAK,EAAA,CAAA,CAAA,GACdgB,EAAAA,YAiBaC,EAAAA,WAAA,CAhBT,qBAAmB,uCACnB,mBAAiB,YACjB,iBAAe,cACf,qBAAmB,sCACnB,mBAAiB,cACjB,iBAAe,WAAA,qBACf,IASS,CARCd,EAAA,qBADVe,EAAAA,YASSC,EAAAA,MAAAC,EAAAA,iBAAA,EAAA,OAPJ,KAAMpB,EAAA,UACN,KAAMA,EAAA,cACN,MAAKW,EAAAA,eAAA,QAAgCX,EAAA,YAAS,aAAwCA,EAAA,YAAS,gBAA2CA,EAAA,YAAS,cAAyCA,EAAA,YAAS,OAAA"}

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

@@ -1,13 +1,15 @@
+import { ActivityIndicatorSizePrefix } from '@vue-interface/activity-indicator';
 import { Component, Ref } from 'vue';
-import { ActivityIndicatorSize } from '../../activity-indicator/src/ActivityIndicator.vue';
+import { ComponentSize } from '@vue-interface/sizeable';
+export type BtnSizePrefix = 'btn';
 export type BtnActivityProps = {
     activity?: boolean;
     indicator: Component;
-    indicatorSize?: ActivityIndicatorSize;
+    indicatorSize?: ComponentSize<ActivityIndicatorSizePrefix>;
     label?: string;
-    orientation?: 'top' | 'bottom' | 'left' | 'right';
+    placement?: 'top' | 'bottom' | 'left' | 'right';
     variant?: string;
-    size?: string;
+    size?: ComponentSize<BtnSizePrefix>;
     block?: boolean;
     disabled?: boolean;
 };
@@ -33,10 +35,10 @@ declare const __VLS_component: import('vue').DefineComponent<BtnActivityProps, {
     "onHide-activity"?: (() => any) | undefined;
     "onShow-activity"?: (() => any) | undefined;
 }>, {
-    size: string;
+    size: ComponentSize<BtnSizePrefix>;
     label: string;
-    indicatorSize: ActivityIndicatorSize;
-    orientation: "top" | "bottom" | "left" | "right";
+    indicatorSize: ComponentSize<ActivityIndicatorSizePrefix>;
+    placement: "top" | "bottom" | "left" | "right";
     variant: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/btn-activity",
-  "version": "4.0.7",
+  "version": "4.0.9",
   "description": "A Vue activity button component.",
   "type": "module",
   "main": "./dist/btn-activity.umd.cjs",
@@ -45,8 +45,9 @@
   ],
   "peerDependencies": {
     "vue": "^3.3.4",
-    "@vue-interface/activity-indicator": "3.0.6",
-    "@vue-interface/btn": "5.0.4"
+    "@vue-interface/sizeable": "2.0.0",
+    "@vue-interface/activity-indicator": "3.0.7",
+    "@vue-interface/btn": "5.0.5"
   },
   "scripts": {
     "dev": "vite",

package/src/BtnActivity.vue

@@ -1,24 +1,26 @@
 <script lang="ts" setup>
-import { ActivityIndicator } from '@vue-interface/activity-indicator';
+import { ActivityIndicator, type ActivityIndicatorSizePrefix } from '@vue-interface/activity-indicator';
 import { ref, watch, watchEffect, type Component, type Ref } from 'vue';
-import { ActivityIndicatorSize } from '../../activity-indicator/src/ActivityIndicator.vue';
+import type { ComponentSize } from '@vue-interface/sizeable';
+
+export type BtnSizePrefix = 'btn';
 
 export type BtnActivityProps = {
     activity?: boolean;
     indicator: Component;
-    indicatorSize?: ActivityIndicatorSize;
+    indicatorSize?: ComponentSize<ActivityIndicatorSizePrefix>;
     label?: string;
-    orientation?: 'top' | 'bottom' | 'left' | 'right';
+    placement?: 'top' | 'bottom' | 'left' | 'right';
     variant?: string;
-    size?: string;
+    size?: ComponentSize<BtnSizePrefix>;
     block?: boolean;  
     disabled?: boolean;
 };
 
 const props = withDefaults(defineProps<BtnActivityProps>(), {
-    indicatorSize: 'xs',
+    indicatorSize: 'activity-indicator-xs',
     label: undefined,
-    orientation: 'right',
+    placement: 'right',
     variant: 'btn-primary',
     size: 'btn-md'
 });
@@ -69,11 +71,11 @@ const context = {
             size,
             {
                 'w-full': block,
-                'gap-1': ['xs', 'sm'].includes(indicatorSize),
-                'gap-2': ['md', 'lg', 'xl'].includes(indicatorSize),
-                'flex-col-reverse': orientation === 'top',
-                'flex-col': orientation === 'bottom',
-                'flex-row-reverse': orientation === 'left',
+                'gap-1': ['activity-indicator-xs', 'activity-indicator-sm'].includes(indicatorSize as string),
+                'gap-2': ['activity-indicator-md', 'activity-indicator-lg', 'activity-indicator-xl'].includes(indicatorSize as string),
+                'flex-col-reverse': placement === 'top',
+                'flex-col': placement === 'bottom',
+                'flex-row-reverse': placement === 'left',
                 'inline-flex items-center justify-center': true,
                 'opacity-50 cursor-not-allowed': disabled,
             }
@@ -92,10 +94,10 @@ const context = {
                 :type="indicator"
                 :size="indicatorSize"
                 :class="{
-                    'pt-1': orientation === 'top',
-                    'pb-1': orientation === 'bottom',
-                    'pr-1': orientation === 'left',
-                    'pl-1': orientation === 'right',
+                    'pt-1': placement === 'top',
+                    'pb-1': placement === 'bottom',
+                    'pr-1': placement === 'left',
+                    'pl-1': placement === 'right',
                 }" />
         </Transition>
     </button>