@vue-interface/btn-activity 4.0.9 → 4.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/btn-activity.js +5 -5
- package/dist/btn-activity.js.map +1 -1
- package/dist/btn-activity.umd.cjs.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/src/BtnActivity.vue.d.ts +6 -4
- package/index.ts +2 -0
- package/package.json +2 -2
- package/src/BtnActivity.vue +4 -2
package/dist/btn-activity.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as y, ref as u, watchEffect as v, watch as f,
|
|
1
|
+
import { defineComponent as y, ref as u, watchEffect as v, watch as f, openBlock as n, createElementBlock as b, normalizeClass as o, renderSlot as x, createTextVNode as h, toDisplayString as k, createVNode as z, Transition as g, withCtx as w, createBlock as B, unref as S, createCommentVNode as p } from "vue";
|
|
2
2
|
import { ActivityIndicator as C } from "@vue-interface/activity-indicator";
|
|
3
3
|
const A = ["disabled"], E = /* @__PURE__ */ y({
|
|
4
4
|
__name: "BtnActivity",
|
|
@@ -49,9 +49,9 @@ const A = ["disabled"], E = /* @__PURE__ */ y({
|
|
|
49
49
|
onClick: l[0] || (l[0] = (m) => i("click", m, r))
|
|
50
50
|
}, [
|
|
51
51
|
x(a.$slots, "default", {}, () => [
|
|
52
|
-
k(
|
|
52
|
+
h(k(t.label), 1)
|
|
53
53
|
]),
|
|
54
|
-
|
|
54
|
+
z(g, {
|
|
55
55
|
"enter-active-class": "transition-all ease-out duration-250",
|
|
56
56
|
"enter-from-class": "opacity-0",
|
|
57
57
|
"enter-to-class": "opacity-100",
|
|
@@ -60,7 +60,7 @@ const A = ["disabled"], E = /* @__PURE__ */ y({
|
|
|
60
60
|
"leave-to-class": "opacity-0"
|
|
61
61
|
}, {
|
|
62
62
|
default: w(() => [
|
|
63
|
-
e.value ? (n(), B(
|
|
63
|
+
e.value ? (n(), B(S(C), {
|
|
64
64
|
key: 0,
|
|
65
65
|
type: t.indicator,
|
|
66
66
|
size: t.indicatorSize,
|
|
@@ -70,7 +70,7 @@ const A = ["disabled"], E = /* @__PURE__ */ y({
|
|
|
70
70
|
"pr-1": t.placement === "left",
|
|
71
71
|
"pl-1": t.placement === "right"
|
|
72
72
|
})
|
|
73
|
-
}, null, 8, ["type", "size", "class"])) :
|
|
73
|
+
}, null, 8, ["type", "size", "class"])) : p("", !0)
|
|
74
74
|
]),
|
|
75
75
|
_: 1
|
|
76
76
|
})
|
package/dist/btn-activity.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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?:
|
|
1
|
+
{"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';\nexport type IndicatorSize = ComponentSize<ActivityIndicatorSizePrefix>;\nexport type BtnSize = ComponentSize<BtnSizePrefix>;\n\nexport type BtnActivityProps = {\n activity?: boolean;\n indicator: Component;\n indicatorSize?: IndicatorSize;\n label?: string;\n placement?: 'top' | 'bottom' | 'left' | 'right';\n variant?: string;\n size?: BtnSize;\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":";;;;;;;;;;;;;;;;;AAqBA,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;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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?:
|
|
1
|
+
{"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';\nexport type IndicatorSize = ComponentSize<ActivityIndicatorSizePrefix>;\nexport type BtnSize = ComponentSize<BtnSizePrefix>;\n\nexport type BtnActivityProps = {\n activity?: boolean;\n indicator: Component;\n indicatorSize?: IndicatorSize;\n label?: string;\n placement?: 'top' | 'bottom' | 'left' | 'right';\n variant?: string;\n size?: BtnSize;\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":"0uBAqBA,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/index.d.ts
CHANGED
|
@@ -2,14 +2,16 @@ import { ActivityIndicatorSizePrefix } from '@vue-interface/activity-indicator';
|
|
|
2
2
|
import { Component, Ref } from 'vue';
|
|
3
3
|
import { ComponentSize } from '@vue-interface/sizeable';
|
|
4
4
|
export type BtnSizePrefix = 'btn';
|
|
5
|
+
export type IndicatorSize = ComponentSize<ActivityIndicatorSizePrefix>;
|
|
6
|
+
export type BtnSize = ComponentSize<BtnSizePrefix>;
|
|
5
7
|
export type BtnActivityProps = {
|
|
6
8
|
activity?: boolean;
|
|
7
9
|
indicator: Component;
|
|
8
|
-
indicatorSize?:
|
|
10
|
+
indicatorSize?: IndicatorSize;
|
|
9
11
|
label?: string;
|
|
10
12
|
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
11
13
|
variant?: string;
|
|
12
|
-
size?:
|
|
14
|
+
size?: BtnSize;
|
|
13
15
|
block?: boolean;
|
|
14
16
|
disabled?: boolean;
|
|
15
17
|
};
|
|
@@ -35,9 +37,9 @@ declare const __VLS_component: import('vue').DefineComponent<BtnActivityProps, {
|
|
|
35
37
|
"onHide-activity"?: (() => any) | undefined;
|
|
36
38
|
"onShow-activity"?: (() => any) | undefined;
|
|
37
39
|
}>, {
|
|
38
|
-
size:
|
|
40
|
+
size: BtnSize;
|
|
39
41
|
label: string;
|
|
40
|
-
indicatorSize:
|
|
42
|
+
indicatorSize: IndicatorSize;
|
|
41
43
|
placement: "top" | "bottom" | "left" | "right";
|
|
42
44
|
variant: string;
|
|
43
45
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
|
package/index.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vue-interface/btn-activity",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.11",
|
|
4
4
|
"description": "A Vue activity button component.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/btn-activity.umd.cjs",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"vue": "^3.3.4",
|
|
48
48
|
"@vue-interface/sizeable": "2.0.0",
|
|
49
|
-
"@vue-interface/activity-indicator": "3.0.
|
|
49
|
+
"@vue-interface/activity-indicator": "3.0.8",
|
|
50
50
|
"@vue-interface/btn": "5.0.5"
|
|
51
51
|
},
|
|
52
52
|
"scripts": {
|
package/src/BtnActivity.vue
CHANGED
|
@@ -4,15 +4,17 @@ import { ref, watch, watchEffect, type Component, type Ref } from 'vue';
|
|
|
4
4
|
import type { ComponentSize } from '@vue-interface/sizeable';
|
|
5
5
|
|
|
6
6
|
export type BtnSizePrefix = 'btn';
|
|
7
|
+
export type IndicatorSize = ComponentSize<ActivityIndicatorSizePrefix>;
|
|
8
|
+
export type BtnSize = ComponentSize<BtnSizePrefix>;
|
|
7
9
|
|
|
8
10
|
export type BtnActivityProps = {
|
|
9
11
|
activity?: boolean;
|
|
10
12
|
indicator: Component;
|
|
11
|
-
indicatorSize?:
|
|
13
|
+
indicatorSize?: IndicatorSize;
|
|
12
14
|
label?: string;
|
|
13
15
|
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
14
16
|
variant?: string;
|
|
15
|
-
size?:
|
|
17
|
+
size?: BtnSize;
|
|
16
18
|
block?: boolean;
|
|
17
19
|
disabled?: boolean;
|
|
18
20
|
};
|