@effect-app/vue-components 4.0.0-beta.180 → 4.0.0-beta.182

package/dist/vue-components3.es.js

@@ -1,5 +1,6 @@
-import { computed as e, createBlock as t, createCommentVNode as n, createTextVNode as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, resolveComponent as c, toDisplayString as l, withCtx as u } from "vue";
-var d = /* @__PURE__ */ i({
+import { computed as e, createBlock as t, createCommentVNode as n, createElementVNode as r, createSlots as i, createTextVNode as a, createVNode as o, defineComponent as s, mergeProps as c, openBlock as l, renderSlot as u, resolveComponent as d, toDisplayString as f, withCtx as p } from "vue";
+//#region src/components/CommandButton.vue?vue&type=script&setup=true&lang.ts
+var m = { class: "ml-2" }, h = { class: "ml-2" }, g = /* @__PURE__ */ s({
 	name: "CommandButton",
 	props: {
 		input: {},
@@ -8,40 +9,64 @@ var d = /* @__PURE__ */ i({
 		disabled: {},
 		title: {}
 	},
-	setup(i) {
-		let d = i, f = e(() => d.command.blocked || d.disabled), p = () => {
-			if (f.value) return;
-			let e = "input" in d && d.input ? d.input : void 0, t = d.command.handle;
+	setup(s) {
+		let g = s, _ = e(() => g.command.blocked || g.disabled), v = e(() => {
+			let e = g.command.progress;
+			if (e !== void 0) return typeof e == "string" ? e : e.text;
+		}), y = e(() => {
+			let e = g.command.progress;
+			return typeof e == "object" && e ? e.percentage : void 0;
+		}), b = () => {
+			if (_.value) return;
+			let e = "input" in g && g.input ? g.input : void 0, t = g.command.handle;
 			t(e);
 		};
-		return (e, d) => {
-			let m = c("v-btn");
-			return i.command.allowed && !i.empty ? (o(), t(m, a({ key: 0 }, e.$attrs, {
-				loading: i.command.waiting,
-				"aria-disabled": f.value,
-				title: i.title ?? i.command.action,
-				class: { "v-btn--disabled": f.value },
-				onClick: p
-			}), {
-				default: u(() => [s(e.$slots, "default", {
-					loading: i.command.waiting,
-					disabled: f.value,
-					label: i.command.label,
-					title: i.title ?? i.command.action
-				}, () => [r(l(i.command.label), 1)])]),
-				_: 3
-			}, 16, [
+		return (e, g) => {
+			let x = d("v-progress-circular"), S = d("v-btn");
+			return s.command.allowed && !s.empty ? (l(), t(S, c({ key: 0 }, e.$attrs, {
+				loading: s.command.waiting,
+				"aria-disabled": _.value,
+				title: s.title ?? s.command.action,
+				class: { "v-btn--disabled": _.value },
+				onClick: b
+			}), i({
+				default: p(() => [u(e.$slots, "default", {
+					loading: s.command.waiting,
+					disabled: _.value,
+					label: s.command.label,
+					title: s.title ?? s.command.action
+				}, () => [a(f(s.command.label), 1)])]),
+				_: 2
+			}, [v.value === void 0 ? void 0 : {
+				name: "loader",
+				fn: p(() => [o(x, {
+					indeterminate: y.value === void 0,
+					"model-value": y.value,
+					size: "20",
+					width: "2"
+				}, null, 8, ["indeterminate", "model-value"]), r("span", m, f(v.value), 1)]),
+				key: "0"
+			}]), 1040, [
 				"loading",
 				"aria-disabled",
 				"title",
 				"class"
-			])) : i.command.allowed ? (o(), t(m, a({ key: 1 }, e.$attrs, {
-				loading: i.command.waiting,
-				"aria-disabled": f.value,
-				title: i.title ?? i.command.action,
-				class: { "v-btn--disabled": f.value },
-				onClick: p
-			}), null, 16, [
+			])) : s.command.allowed ? (l(), t(S, c({ key: 1 }, e.$attrs, {
+				loading: s.command.waiting,
+				"aria-disabled": _.value,
+				title: s.title ?? s.command.action,
+				class: { "v-btn--disabled": _.value },
+				onClick: b
+			}), i({ _: 2 }, [v.value === void 0 ? void 0 : {
+				name: "loader",
+				fn: p(() => [o(x, {
+					indeterminate: y.value === void 0,
+					"model-value": y.value,
+					size: "20",
+					width: "2"
+				}, null, 8, ["indeterminate", "model-value"]), r("span", h, f(v.value), 1)]),
+				key: "0"
+			}]), 1040, [
 				"loading",
 				"aria-disabled",
 				"title",
@@ -51,4 +76,4 @@ var d = /* @__PURE__ */ i({
 	}
 });
 //#endregion
-export { d as default };
+export { g as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "4.0.0-beta.180",
+  "version": "4.0.0-beta.182",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^4.0.0-beta.59",
@@ -57,8 +57,8 @@
     "highlight.js": "^11.11.1",
     "mitt": "^3.0.1",
     "vue3-highlightjs": "^1.0.5",
-    "@effect-app/vue": "4.0.0-beta.180",
-    "effect-app": "4.0.0-beta.180"
+    "@effect-app/vue": "4.0.0-beta.182",
+    "effect-app": "4.0.0-beta.182"
   },
   "scripts": {
     "check": "vue-tsc",

package/src/components/CommandButton.vue

@@ -32,6 +32,17 @@ const props = defineProps<
 
 const isDisabled = computed(() => props.command.blocked || props.disabled)
 
+const progressText = computed(() => {
+  const p = props.command.progress
+  if (p === undefined) return undefined
+  return typeof p === "string" ? p : p.text
+})
+
+const progressPercentage = computed(() => {
+  const p = props.command.progress
+  return typeof p === "object" && p !== null ? p.percentage : undefined
+})
+
 const handleClick = () => {
   // Block execution if button is disabled
   if (isDisabled.value) {
@@ -62,6 +73,18 @@ export default {
     :class="{ 'v-btn--disabled': isDisabled }"
     @click="handleClick"
   >
+    <template
+      v-if="progressText !== undefined"
+      #loader
+    >
+      <v-progress-circular
+        :indeterminate="progressPercentage === undefined"
+        :model-value="progressPercentage"
+        size="20"
+        width="2"
+      />
+      <span class="ml-2">{{ progressText }}</span>
+    </template>
     <slot
       :loading="command.waiting"
       :disabled="isDisabled"
@@ -79,5 +102,18 @@ export default {
     :title="title ?? command.action"
     :class="{ 'v-btn--disabled': isDisabled }"
     @click="handleClick"
-  />
+  >
+    <template
+      v-if="progressText !== undefined"
+      #loader
+    >
+      <v-progress-circular
+        :indeterminate="progressPercentage === undefined"
+        :model-value="progressPercentage"
+        size="20"
+        width="2"
+      />
+      <span class="ml-2">{{ progressText }}</span>
+    </template>
+  </v-btn>
 </template>