@effect-app/vue-components 4.0.0-beta.24 → 4.0.0-beta.240

package/dist/vue-components68.es.js

@@ -0,0 +1,100 @@
+import { useIntl as e } from "./vue-components6.es.js";
+import { generateMetaFromSchema as t, unwrapDeclaration as n } from "./vue-components14.es.js";
+import { defaultsValueFromSchema as r, fillNestedDefaults as i } from "./vue-components15.es.js";
+import { toFormSchema as a } from "./vue-components16.es.js";
+import { usePersistency as o } from "./vue-components18.es.js";
+import { annotateLiteralUnionMessages as s, toLocalizedStandardSchemaV1 as c } from "./vue-components19.es.js";
+import { eHoc as l, makeFieldMap as u } from "./vue-components20.es.js";
+import { fHoc as d } from "./vue-components21.es.js";
+import f from "./vue-components23.es.js";
+import p from "./vue-components25.es.js";
+import m from "./vue-components29.es.js";
+import h from "./vue-components36.es.js";
+import g from "./vue-components40.es.js";
+import _ from "./vue-components44.es.js";
+import { makeSubmitHandlers as v, wrapOnSubmit as y } from "./vue-components67.es.js";
+import { watch as b } from "vue";
+import * as x from "effect-app/Schema";
+import { revalidateLogic as S, useForm as C } from "@tanstack/vue-form";
+import * as w from "effect-app/Context";
+import { makeRunPromise as T } from "@effect-app/vue/runtime";
+//#region src/components/OmegaForm/useOmegaForm.ts
+var E = Symbol("OmegaForm"), D = T(w.empty()), O = (w, T, E) => {
+	if (!w) throw Error("Schema is required");
+	let { trans: O } = e(), k = a(w), A = s(k, O), j = n(k.ast), M = (e) => i(j, e), N = c(A, O), P = {
+		...N,
+		"~standard": {
+			...N["~standard"],
+			validate: (e) => N["~standard"].validate(M(e))
+		}
+	}, F = x.decodeUnknownEffectConcurrently(k), I = (e) => F(M(e)), { meta: L, unionMeta: R } = t(k), z = { form: void 0 }, B = o({
+		meta: L,
+		persistency: E?.persistency,
+		preventWindowExit: E?.preventWindowExit,
+		defaultValuesPriority: E?.defaultValuesPriority,
+		tanstackDefaultValues: T?.defaultValues,
+		schemaDefaultValues: () => r(w),
+		getForm: () => z.form
+	}), V = C({
+		...T,
+		validationLogic: S(),
+		validators: {
+			onDynamic: P,
+			...T?.validators
+		},
+		onSubmit: y(T?.onSubmit, I, D),
+		defaultValues: B.defaultValues.value
+	});
+	z.form = V;
+	let H = () => {
+		let e = V.state.values, t = i(j, e);
+		if (t === e || !t || typeof t != "object") return;
+		let n = e, r = t;
+		for (let e of Object.keys(r)) if (r[e] !== n[e]) {
+			let t = e;
+			V.setFieldValue(t, r[e], {
+				dontUpdateMeta: !0,
+				dontValidate: !0
+			});
+		}
+	}, U = () => {
+		Object.keys(L).forEach((e) => {
+			V.setFieldValue(e, void 0);
+		});
+	};
+	if (E?.preventWindowExit === "prevent-and-reset") {
+		let e = V.useStore((e) => e.isSubmitting), t = V.useStore((e) => e.submissionAttempts), n = V.useStore((e) => e.canSubmit), r = V.useStore((e) => e.values);
+		b([e, t], ([e, t], [i]) => {
+			i && !e && t > 0 && n.value && V.reset(r.value);
+		});
+	}
+	let { handleSubmit: W, handleSubmitEffect: G } = v(V), { fieldMap: K, registerField: q } = u(), J = Object.assign(V, {
+		i18nNamespace: E?.i18nNamespace,
+		ignorePreventCloseEvents: E?.ignorePreventCloseEvents,
+		meta: L,
+		unionMeta: R,
+		clear: U,
+		normalizeNullableStructs: H,
+		handleSubmit: W,
+		handleSubmitEffect: G,
+		registerField: q
+	}), Y = {
+		form: J,
+		fieldMap: K
+	};
+	return Object.assign(J, {
+		_paths: void 0,
+		_keys: void 0,
+		_schema: w,
+		errorContext: Y,
+		Form: d(J)(_),
+		Input: d(J)(E?.input ?? h),
+		TaggedUnion: d(J)(g),
+		Field: V.Field,
+		Errors: l(Y)(m),
+		Array: d(J)(f),
+		AutoGen: d(J)(p)
+	});
+};
+//#endregion
+export { E as OmegaFormKey, O as useOmegaForm };

package/dist/vue-components69.es.js

@@ -0,0 +1,33 @@
+import e from "./vue-components36.es.js";
+import { useOmegaForm as t } from "./vue-components68.es.js";
+import { h as n } from "vue";
+//#region src/components/OmegaForm/createUseFormWithCustomInput.ts
+var r = (r) => (...i) => {
+	let [a, o, s] = i, c = {
+		name: "WrappedInput",
+		inheritAttrs: !1,
+		setup(t, { attrs: i, slots: a }) {
+			return () => n(e, {
+				...t,
+				...i
+			}, {
+				default: ({ field: e, state: t, ...o }) => n(r, {
+					...Object.fromEntries(Object.entries(i).filter(([e]) => !Object.prototype.hasOwnProperty.call(o, e) && e !== "form")),
+					field: e,
+					state: t,
+					inputProps: o
+				}, {
+					...a.label && { label: (e) => a.label(e) },
+					...a.default && { default: (e) => a.default(e) }
+				}),
+				...a.label && { label: (e) => a.label(e) }
+			});
+		}
+	};
+	return t(a, o, {
+		...s,
+		input: c
+	});
+};
+//#endregion
+export { r as createUseFormWithCustomInput };

package/dist/vue-components7.es.js

@@ -0,0 +1,13 @@
+import { onMounted as e, onUnmounted as t } from "vue";
+//#region src/components/OmegaForm/onMountedWithCleanup.ts
+function n(n) {
+	let r;
+	e(() => {
+		let e = n();
+		e && (r = e);
+	}), t(() => {
+		r && r();
+	});
+}
+//#endregion
+export { n as onMountedWithCleanup };

package/dist/vue-components70.es.js

@@ -0,0 +1,19 @@
+import "./vue-components8.es.js";
+import "./vue-components11.es.js";
+import "./vue-components14.es.js";
+import "./vue-components15.es.js";
+import "./vue-components16.es.js";
+import "./vue-components18.es.js";
+import "./vue-components19.es.js";
+import "./vue-components20.es.js";
+import "./vue-components34.es.js";
+import "./vue-components36.es.js";
+import "./vue-components38.es.js";
+import "./vue-components40.es.js";
+import "./vue-components67.es.js";
+import "./vue-components68.es.js";
+import "./vue-components69.es.js";
+//#region src/components/OmegaForm/index.ts
+var e = (e) => e;
+//#endregion
+export { e as duplicateSchema };

package/dist/vue-components71.es.js

@@ -0,0 +1,48 @@
+import { __exportAll as e } from "./vue-components2.es.js";
+import t from "./vue-components4.es.js";
+import { useOnClose as n, usePreventClose as r } from "./vue-components8.es.js";
+import i from "./vue-components10.es.js";
+import { getInputType as a } from "./vue-components11.es.js";
+import { createMeta as o, generateMetaFromSchema as s, isNullableOrUndefined as c, metadataFromAst as l } from "./vue-components14.es.js";
+import { defaultsValueFromSchema as u } from "./vue-components15.es.js";
+import { toFormSchema as d } from "./vue-components16.es.js";
+import { deepMerge as f } from "./vue-components18.es.js";
+import { makeStandardSchemaV1Hooks as p, toLocalizedStandardSchemaV1 as m } from "./vue-components19.es.js";
+import { useErrorLabel as h } from "./vue-components20.es.js";
+import g from "./vue-components34.es.js";
+import _ from "./vue-components36.es.js";
+import v from "./vue-components38.es.js";
+import y from "./vue-components40.es.js";
+import { FormErrors as b } from "./vue-components67.es.js";
+import { OmegaFormKey as x, useOmegaForm as S } from "./vue-components68.es.js";
+import { createUseFormWithCustomInput as C } from "./vue-components69.es.js";
+import { duplicateSchema as w } from "./vue-components70.es.js";
+//#region src/components/index.ts
+var T = /* @__PURE__ */ e({
+	CommandButton: () => t,
+	Dialog: () => i,
+	FormErrors: () => b,
+	OmegaFormKey: () => x,
+	OmegaInput: () => _,
+	OmegaTaggedUnion: () => y,
+	OmegaTaggedUnionInternal: () => v,
+	OmegaVuetifyInput: () => g,
+	createMeta: () => o,
+	createUseFormWithCustomInput: () => C,
+	deepMerge: () => f,
+	defaultsValueFromSchema: () => u,
+	duplicateSchema: () => w,
+	generateMetaFromSchema: () => s,
+	getInputType: () => a,
+	isNullableOrUndefined: () => c,
+	makeStandardSchemaV1Hooks: () => p,
+	metadataFromAst: () => l,
+	toFormSchema: () => d,
+	toLocalizedStandardSchemaV1: () => m,
+	useErrorLabel: () => h,
+	useOmegaForm: () => S,
+	useOnClose: () => n,
+	usePreventClose: () => r
+});
+//#endregion
+export { T as components_exports };

package/dist/vue-components8.es.js

@@ -0,0 +1,35 @@
+import e from "./vue-components5.es.js";
+import { useIntl as t } from "./vue-components6.es.js";
+import { onMountedWithCleanup as n } from "./vue-components7.es.js";
+import { inject as r, provide as i } from "vue";
+//#region src/components/OmegaForm/blockDialog.ts
+var a = () => e(), o = Symbol("DialogBus"), s = () => r(o, null), c = () => {
+	let e = a();
+	return i(o, e), e;
+}, l = (e) => {
+	let r = s();
+	if (!r) return;
+	let { formatMessage: i, trans: a } = t(), o = e(), c = "There are unsaved changes. Are you sure you want to close?";
+	n(() => {
+		let e = (e) => {
+			if (o.value) {
+				let t = i ? i({
+					id: "form.unsaved_changes_confirm",
+					defaultMessage: c
+				}) : a?.("form.unsaved_changes_confirm") ?? c;
+				confirm(t) || (e.prevent = !0);
+			}
+		};
+		return r.on("dialog-closing", e), () => r.off("dialog-closing", e);
+	});
+}, u = (e) => {
+	let t = s();
+	return t ||= c(), () => {
+		let n = {};
+		t.emit("dialog-closing", n), n.prevent ? typeof n.prevent == "object" && "then" in n.prevent && n.prevent.then((t) => {
+			t && e();
+		}).catch(console.error) : e();
+	};
+};
+//#endregion
+export { u as useOnClose, l as usePreventClose };

package/dist/vue-components9.es.js

@@ -0,0 +1,47 @@
+import { onMountedWithCleanup as e } from "./vue-components7.es.js";
+import { useOnClose as t } from "./vue-components8.es.js";
+import { computed as n, createBlock as r, createSlots as i, defineComponent as a, guardReactiveProps as o, mergeModels as s, normalizeProps as c, openBlock as l, renderList as u, renderSlot as d, resolveComponent as f, unref as p, useModel as m, useSlots as h, withCtx as g } from "vue";
+//#region src/components/Dialog.vue?vue&type=script&setup=true&lang.ts
+var _ = /* @__PURE__ */ a({
+	__name: "Dialog",
+	props: /* @__PURE__ */ s({ persistent: { type: Boolean } }, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(a) {
+		let s = a, _ = m(a, "modelValue"), v = h(), y = n(() => {
+			let { default: e, ...t } = v;
+			return t;
+		}), b = t(() => _.value = !1);
+		return e(() => {
+			let e = (e) => {
+				_.value && !s.persistent && e.code === "Escape" && b();
+			};
+			return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+		}), (e, t) => {
+			let n = f("v-dialog");
+			return l(), r(n, {
+				modelValue: _.value,
+				"onUpdate:modelValue": t[0] ||= (e) => _.value = e,
+				persistent: "",
+				"onClick:outside": p(b)
+			}, i({
+				default: g(({ isActive: t }) => [d(e.$slots, "default", {
+					open: _.value,
+					cancel: p(b),
+					isActive: t
+				})]),
+				_: 2
+			}, [u(y.value, (t, n) => ({
+				name: n,
+				fn: g((t) => [d(e.$slots, n, c(o(t)))])
+			}))]), 1032, ["modelValue", "onClick:outside"]);
+		};
+	}
+});
+//#endregion
+export { _ as default };

package/package.json

@@ -1,39 +1,39 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "4.0.0-beta.24",
+  "version": "4.0.0-beta.240",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
-    "effect": "^4.0.0-beta.36",
-    "intl-messageformat": "^11.1.2",
+    "effect": "^4.0.0-beta.68",
+    "intl-messageformat": "^11.2.4",
     "mdi-js": "^1.0.1",
     "primeflex": "^4.0.0",
     "primeicons": "^7.0.0",
-    "primevue": "^4.5.4",
-    "vue": "^3.5.29",
-    "vuetify": "^4.0.1"
+    "primevue": "^4.5.5",
+    "vue": "^3.5.34",
+    "vuetify": "^4.0.6"
   },
   "devDependencies": {
-    "@storybook/vue3": "^10.2.15",
-    "@storybook/vue3-vite": "^10.2.15",
-    "@types/node": "^25.3.3",
-    "@vitejs/plugin-vue": "^6.0.4",
-    "@vue/test-utils": "^2.4.6",
-    "@vueuse/core": "^14.2.1",
-    "dprint": "^0.52.0",
-    "jsdom": "^28.1.0",
+    "@storybook/vue3": "^10.3.6",
+    "@storybook/vue3-vite": "^10.3.6",
+    "@types/node": "^25.6.0",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "@vue/test-utils": "^2.4.10",
+    "@vueuse/core": "^14.3.0",
+    "jsdom": "^29.1.1",
     "rimraf": "^6.1.3",
-    "sass": "^1.97.3",
-    "storybook": "^10.2.15",
-    "typescript": "~5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-css-injected-by-js": "^4.0.1",
+    "sass": "^1.99.0",
+    "storybook": "^10.3.6",
+    "storybook-vue3-router": "^7.0.0",
+    "typescript": "~6.0.3",
+    "vite": "^8.0.10",
+    "vite-plugin-css-injected-by-js": "^5.0.1",
     "vitepress": "^1.6.4",
-    "vitest": "^4.0.18",
-    "vue-router": "^5.0.3",
+    "vitest": "^4.1.5",
+    "vue-router": "^5.0.6",
     "vue-toastification": "^2.0.0-rc.5",
-    "vue-tsc": "^3.2.5",
-    "vuetify": "^4.0.1",
-    "@effect-app/eslint-shared-config": "0.5.7-beta.2"
+    "vue-tsc": "^3.2.8",
+    "vuetify": "^4.0.6",
+    "@effect-app/eslint-shared-config": "0.6.0-beta.26"
   },
   "files": [
     "src",
@@ -52,13 +52,13 @@
     }
   },
   "dependencies": {
-    "@opentelemetry/api": "^1.9.0",
-    "@tanstack/vue-form": "^1.23.5",
+    "@opentelemetry/api": "^1.9.1",
+    "@tanstack/vue-form": "^1.32.0",
     "highlight.js": "^11.11.1",
     "mitt": "^3.0.1",
     "vue3-highlightjs": "^1.0.5",
-    "effect-app": "4.0.0-beta.24",
-    "@effect-app/vue": "4.0.0-beta.24"
+    "@effect-app/vue": "4.0.0-beta.240",
+    "effect-app": "4.0.0-beta.240"
   },
   "scripts": {
     "check": "vue-tsc",
@@ -67,10 +67,10 @@
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
-    "lint": "NODE_OPTIONS=--max-old-space-size=8192 eslint src stories .storybook",
+    "lint": "oxlint --quiet --type-aware src stories && NODE_OPTIONS=--max-old-space-size=8192 ESLINT_TS=1 eslint --quiet src stories .storybook && pnpm exec dprint check --config ../../dprint.jsonc .",
     "ncu": "ncu",
     "clean": "rm -rf dist",
-    "lint-fix": "pnpm lint --fix",
+    "lint-fix": "oxlint --quiet --type-aware --fix src stories && NODE_OPTIONS=--max-old-space-size=8192 ESLINT_TS=1 eslint --quiet --fix src stories .storybook && pnpm exec dprint fmt --config ../../dprint.jsonc .",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "vitest",

package/src/components/CommandButton.vue

@@ -1,9 +1,10 @@
 <script
   setup
   lang="ts"
-  generic="I = never"
+  generic="I = never, RA = unknown, RE = unknown"
 >
-import type { CommandBase } from "@effect-app/vue"
+import type { CommandBase, Progress } from "@effect-app/vue/makeClient"
+import type * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
 import { computed } from "vue"
 import type { VBtn } from "vuetify/components"
 
@@ -14,11 +15,11 @@ const props = defineProps<
   & (
     | {
       input: NoInfer<I>
-      command: CommandBase<I>
+      command: CommandBase<I, any, RA, RE>
       empty?: boolean
     }
     | {
-      command: CommandBase
+      command: CommandBase<any, any, RA, RE>
       input?: undefined
       empty?: boolean
     }
@@ -26,12 +27,32 @@ const props = defineProps<
   & {
     disabled?: ButtonProps["disabled"]
     title?: string // why isn't it part of VBtnProps??
+    mapProgress?: (result: AsyncResult.AsyncResult<RA, RE>) => Progress | undefined
   }
   & ButtonProps
 >()
 
 const isDisabled = computed(() => props.command.blocked || props.disabled)
 
+const resolvedProgress = computed(() => {
+  if (props.mapProgress) {
+    const result = props.command.result
+    return result !== undefined ? props.mapProgress(result) : undefined
+  }
+  return props.command.progress
+})
+
+const progressText = computed(() => {
+  const p = resolvedProgress.value
+  if (p === undefined) return undefined
+  return typeof p === "string" ? p : p.text
+})
+
+const progressPercentage = computed(() => {
+  const p = resolvedProgress.value
+  return typeof p === "object" && p !== null ? p.percentage : undefined
+})
+
 const handleClick = () => {
   // Block execution if button is disabled
   if (isDisabled.value) {
@@ -41,7 +62,9 @@ const handleClick = () => {
   const input = ("input" in props && props.input
     ? props.input
     : undefined) as unknown as I
-  ;(props.command.handle as any)(input)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- command.handle has a generic signature mismatched by erased input type
+  const handle = props.command.handle as any
+  handle(input)
 }
 </script>
 <script lang="ts">
@@ -60,13 +83,25 @@ 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"
       :label="command.label"
       :title="title ?? command.action"
     >
-      <span>{{ command.label }}</span>
+      {{ command.label }}
     </slot>
   </v-btn>
   <v-btn
@@ -77,5 +112,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>

package/src/components/OmegaForm/InputProps.ts

@@ -43,7 +43,7 @@ export type InputProps<From extends Record<PropertyKey, any>, TName extends Deep
     inputClass: string | undefined | null
   }
   field: OmegaFieldInternalApi<From, TName>
-  /** be sure to use this state and not `field.state` as it is not reactive */
+  /** reactive field state, sourced from `field.state` (the Field slot's own `state` prop is a stale snapshot since @tanstack/vue-form 1.32) */
   state: OmegaFieldInternalApi<From, TName>["state"]
 }
 

package/src/components/OmegaForm/OmegaArray.vue

@@ -3,24 +3,23 @@
     :is="form.Field"
     :name="name"
   >
-    <template #default="{ field, state }">
+    <!-- `field.state` is reactive; the Field slot's `state` prop is a stale snapshot since @tanstack/vue-form 1.32 -->
+    <template #default="{ field }">
       <slot
         name="pre-array"
-        v-bind="{ field, state }"
+        v-bind="{ field, state: field.state }"
       />
       <component
         :is="form.Field"
         v-for="(_, i) of items"
         :key="`${name}[${Number(i)}]`"
-        :name="// eslint-disable-next-line
-          `${name}[${Number(i)}]` as DeepKeys<From>
-        "
+        :name="`${name}[${Number(i)}]` as DeepKeys<From>"
       >
-        <template #default="{ field: subField, state: subState }">
+        <template #default="{ field: subField }">
           <slot
             v-bind="{
               subField,
-              subState,
+              subState: subField.state,
               index: Number(i),
               field
             }"
@@ -29,7 +28,7 @@
       </component>
       <slot
         name="post-array"
-        v-bind="{ field, state }"
+        v-bind="{ field, state: field.state }"
       />
       <!-- TODO: legacy slot, remove this slot -->
       <slot
@@ -46,7 +45,7 @@
 >
 import { type DeepKeys } from "@tanstack/vue-form"
 import { computed, onMounted, provide } from "vue"
-import { type OmegaArrayProps } from "./OmegaFormStuff"
+import { type OmegaArrayProps } from "./types"
 
 const props = defineProps<OmegaArrayProps<From, To, Name>>()
 

package/src/components/OmegaForm/OmegaAutoGen.vue

@@ -20,9 +20,10 @@
   Name extends DeepKeys<From>"
 >
 import { type DeepKeys } from "@tanstack/vue-form"
-import { Order } from "effect-app"
+import * as Order from "effect/Order"
 import { computed } from "vue"
-import { type FieldMeta, type FieldPath, type OmegaAutoGenMeta, type OmegaInputProps } from "./OmegaFormStuff"
+import { type FieldMeta } from "./meta/types"
+import { type FieldPath, type OmegaAutoGenMeta, type OmegaInputProps } from "./types"
 
 type NewMeta = OmegaAutoGenMeta<From, To, Name>
 

package/src/components/OmegaForm/OmegaErrorsInternal.vue

@@ -102,7 +102,7 @@
 import type { StandardSchemaV1Issue } from "@tanstack/vue-form"
 import { computed, getCurrentInstance } from "vue"
 import { useIntl } from "../../utils"
-import { type OmegaError } from "./OmegaFormStuff"
+import { type OmegaError } from "./types"
 
 const instance = getCurrentInstance()
 const vuetified = instance?.appContext.components["VAlert"]

package/src/components/OmegaForm/OmegaFormInput.vue

@@ -17,8 +17,8 @@
 import { type DeepKeys } from "@tanstack/vue-form"
 import { inject } from "vue"
 import type { MergedInputProps } from "./InputProps"
-import type { BaseProps, DefaultTypeProps, OmegaInputProps } from "./OmegaFormStuff"
 import OmegaInput from "./OmegaInput.vue"
+import type { BaseProps, DefaultTypeProps, OmegaInputProps } from "./types"
 import { OmegaFormKey } from "./useOmegaForm"
 
 const form = inject(OmegaFormKey) as unknown as OmegaInputProps<