@effect-app/vue-components 3.0.1 → 3.0.2

package/dist/vue-components.es38.js

@@ -1,34 +1,194 @@
-import { defineComponent as m, createElementBlock as d, openBlock as u, withModifiers as f, createElementVNode as l, unref as s, renderSlot as a } from "vue";
-import { useStore as b } from "@tanstack/vue-form";
-import { usePreventClose as p } from "./vue-components.es11.js";
-import { getOmegaStore as c } from "./vue-components.es53.js";
-const S = ["disabled"], V = /* @__PURE__ */ m({
-  __name: "OmegaWrapper",
+import { defineComponent as k, resolveComponent as b, createElementBlock as v, openBlock as a, createBlock as n, createCommentVNode as u, resolveDynamicComponent as g, mergeProps as o, createSlots as d, withCtx as r, renderSlot as m, normalizeProps as s, guardReactiveProps as P, unref as C, Fragment as V, renderList as U } from "vue";
+import { getInputType as c } from "./vue-components.es12.js";
+const w = /* @__PURE__ */ k({
+  inheritAttrs: !1,
+  __name: "OmegaInputVuetify",
   props: {
-    form: {},
-    disabled: { type: Boolean },
-    subscribe: {}
+    inputProps: {},
+    field: {},
+    state: {}
   },
-  setup(o) {
-    const e = o, i = b(
-      e.form.store,
-      (t) => t.isSubmitting
-    ), n = c(
-      e.form,
-      e.subscribe
-    );
-    return e.form.ignorePreventCloseEvents || p(() => e.form.useStore((t) => t.isDirty)), (t, r) => (u(), d("form", {
-      novalidate: "",
-      onSubmit: r[0] || (r[0] = f((v) => o.form.handleSubmit(), ["prevent", "stop"]))
-    }, [
-      l("fieldset", {
-        disabled: s(i) || o.disabled
+  emits: ["focus", "blur"],
+  setup(e) {
+    return (l, i) => {
+      const y = b("v-text-field"), p = b("v-textarea"), f = b("v-radio"), h = b("v-radio-group"), q = b("v-select"), $ = b("v-autocomplete");
+      return a(), v("div", {
+        class: "omega-input",
+        onFocusout: i[4] || (i[4] = (t) => l.$emit("blur", t)),
+        onFocusin: i[5] || (i[5] = (t) => l.$emit("focus", t))
       }, [
-        a(t.$slots, "default", { subscribedValues: s(n) }, void 0, !0)
-      ], 8, S)
-    ], 32));
+        e.inputProps.type === "boolean" || e.inputProps.type === "switch" ? (a(), n(g(e.inputProps.type === "boolean" ? "v-checkbox" : "v-switch"), o({
+          key: 0,
+          id: e.inputProps.id,
+          name: e.field.name,
+          label: e.inputProps.label,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error,
+          ripple: ""
+        }, l.$attrs, {
+          "model-value": e.state.value,
+          onChange: i[0] || (i[0] = (t) => e.field.handleChange(t.target.checked))
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "name", "label", "error-messages", "error", "model-value"])) : u("", !0),
+        e.inputProps.type === "email" || e.inputProps.type === "string" || e.inputProps.type === "password" || e.inputProps.type === "date" ? (a(), n(y, o({
+          key: 1,
+          id: e.inputProps.id,
+          required: e.inputProps.required,
+          "min-length": e.inputProps.minLength,
+          "max-length": e.inputProps.maxLength,
+          type: C(c)(e.inputProps.type),
+          name: e.field.name,
+          label: e.inputProps.label,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error
+        }, l.$attrs, {
+          "model-value": e.state.value,
+          "onUpdate:modelValue": e.field.handleChange
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
+        e.inputProps.type === "text" ? (a(), n(p, o({
+          key: 2,
+          id: e.inputProps.id,
+          required: e.inputProps.required,
+          "min-length": e.inputProps.minLength,
+          "max-length": e.inputProps.maxLength,
+          name: e.field.name,
+          label: e.inputProps.label,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error
+        }, l.$attrs, {
+          "model-value": e.state.value,
+          "onUpdate:modelValue": e.field.handleChange
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "required", "min-length", "max-length", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
+        e.inputProps.type === "number" || e.inputProps.type === "range" ? (a(), n(g(e.inputProps.type === "range" ? "v-slider" : "v-text-field"), o({
+          key: 3,
+          id: e.inputProps.id,
+          required: e.inputProps.required,
+          min: e.inputProps.min,
+          max: e.inputProps.max,
+          type: e.inputProps.type,
+          name: e.field.name,
+          label: e.inputProps.label,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error
+        }, l.$attrs, {
+          "model-value": e.state.value,
+          "onUpdate:modelValue": i[1] || (i[1] = (t) => {
+            t || t === 0 ? e.field.handleChange(Number(t)) : e.field.handleChange(void 0);
+          })
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "required", "min", "max", "type", "name", "label", "error-messages", "error", "model-value"])) : u("", !0),
+        e.inputProps.type === "radio" ? (a(), n(h, o({
+          key: 4,
+          id: e.inputProps.id,
+          name: e.field.name,
+          label: e.inputProps.label,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error
+        }, l.$attrs, {
+          "model-value": e.state.value,
+          "onUpdate:modelValue": e.field.handleChange
+        }), d({
+          default: r(() => [
+            (a(!0), v(V, null, U(e.inputProps.options, (t) => (a(), n(f, {
+              key: t.value,
+              label: t.title,
+              value: t.value
+            }, null, 8, ["label", "value"]))), 128))
+          ]),
+          _: 2
+        }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
+        e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (a(), n(q, o({
+          key: 5,
+          id: e.inputProps.id,
+          clearable: e.inputProps.type === "select",
+          required: e.inputProps.required,
+          multiple: e.inputProps.type === "multiple",
+          chips: e.inputProps.type === "multiple",
+          name: e.field.name,
+          label: e.inputProps.label,
+          items: e.inputProps.options,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error
+        }, l.$attrs, {
+          "model-value": e.state.value,
+          onClear: i[2] || (i[2] = (t) => e.field.handleChange(void 0)),
+          "onUpdate:modelValue": e.field.handleChange
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "clearable", "required", "multiple", "chips", "name", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
+        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (a(), n($, o({
+          key: 6,
+          id: e.inputProps.id,
+          clearable: e.inputProps.type === "autocomplete",
+          multiple: e.inputProps.type === "autocompletemultiple",
+          required: e.inputProps.required,
+          name: e.field.name,
+          label: e.inputProps.label,
+          items: e.inputProps.options,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error,
+          chips: e.inputProps.type === "autocompletemultiple"
+        }, l.$attrs, {
+          "model-value": e.state.value,
+          onClear: i[3] || (i[3] = (t) => e.field.handleChange(void 0)),
+          "onUpdate:modelValue": e.field.handleChange
+        }), d({ _: 2 }, [
+          l.$slots.label ? {
+            name: "label",
+            fn: r(() => [
+              m(l.$slots, "label", s(P({ required: e.inputProps.required, id: e.inputProps.id, label: e.inputProps.label })))
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["id", "clearable", "multiple", "required", "name", "label", "items", "error-messages", "error", "chips", "model-value", "onUpdate:modelValue"])) : u("", !0)
+      ], 32);
+    };
   }
 });
 export {
-  V as default
+  w as default
 };

package/dist/vue-components.es40.js

@@ -1,5 +1,5 @@
 (function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");if(i.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(i),window.customElements){const e=window.customElements.define;window.customElements.define=function(s,t){const n=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(n&&n.call(this),this.shadowRoot){const a=document.createElement("style");a.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(a)}},e.call(window.customElements,s,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import o from "./vue-components.es30.js";
+import o from "./vue-components.es38.js";
 
 export {
   o as default

package/dist/vue-components.es5.js

@@ -1,6 +1,6 @@
 import { defineComponent as v, mergeModels as C, useModel as k, useSlots as V, computed as _, resolveComponent as g, createBlock as y, openBlock as B, unref as a, createSlots as E, withCtx as u, renderSlot as d, renderList as M, normalizeProps as S, guardReactiveProps as w } from "vue";
 import { useOnClose as L } from "./vue-components.es11.js";
-import { onMountedWithCleanup as h } from "./vue-components.es29.js";
+import { onMountedWithCleanup as h } from "./vue-components.es16.js";
 const z = /* @__PURE__ */ v({
   __name: "Dialog",
   props: /* @__PURE__ */ C({

package/dist/vue-components.es6.js

@@ -1,8 +1,8 @@
-import { defineComponent as F, computed as l, useAttrs as A, inject as M, createBlock as i, openBlock as f, resolveDynamicComponent as S, withCtx as u, createCommentVNode as w, mergeProps as I, unref as L, createSlots as P, renderSlot as c, normalizeProps as d, guardReactiveProps as v } from "vue";
-import { useIntl as j } from "./vue-components.es3.js";
-import { generateInputStandardSchemaFromFieldMeta as B } from "./vue-components.es12.js";
-import E from "./vue-components.es7.js";
-import { useErrorLabel as N } from "./vue-components.es10.js";
+import { defineComponent as F, computed as o, useAttrs as $, inject as k, createBlock as u, openBlock as i, resolveDynamicComponent as A, withCtx as m, createCommentVNode as M, mergeProps as S, unref as w, createSlots as I, renderSlot as f, normalizeProps as c, guardReactiveProps as d } from "vue";
+import { useIntl as P } from "./vue-components.es3.js";
+import { generateInputStandardSchemaFromFieldMeta as j } from "./vue-components.es12.js";
+import B from "./vue-components.es7.js";
+import { useErrorLabel as E } from "./vue-components.es10.js";
 const V = /* @__PURE__ */ F({
   inheritAttrs: !1,
   __name: "OmegaInput",
@@ -13,52 +13,46 @@ const V = /* @__PURE__ */ F({
     name: {},
     inputClass: {}
   },
-  setup(a) {
-    const e = a, n = l(() => e.name), p = A(), g = l(() => {
+  setup(t) {
+    const e = t, l = o(() => e.name), v = $(), p = o(() => {
       if (e.inputClass !== null)
-        return e.inputClass !== void 0 ? e.inputClass : p.class;
-    }), s = M(
+        return e.inputClass !== void 0 ? e.inputClass : v.class;
+    }), n = k(
       "getMetaFromArray",
       null
-    ), o = l(() => s?.value && s.value(e.name) ? s.value(n.value) : e.form.meta[n.value]), $ = l(() => {
-      const t = o.value;
-      if (!t) return n.value;
-      const r = t;
-      return `${n.value}-${r.type}-${r.minLength ?? ""}-${r.maxLength ?? ""}-${r.minimum ?? ""}-${r.maximum ?? ""}`;
-    }), { trans: C } = j(), b = l(() => {
-      if (!o.value)
+    ), r = o(() => n?.value && n.value(e.name) ? n.value(l.value) : e.form.meta[l.value]), { trans: g } = P(), C = o(() => {
+      if (!r.value)
         throw console.log(e.name, Object.keys(e.form.meta), e.form.meta), new Error("Meta is undefined");
-      return B(o.value, C);
-    }), h = N(e.form);
-    return (t, r) => (f(), i(S(a.form.Field), {
-      key: $.value,
-      name: a.name,
+      return j(r.value, g);
+    }), b = E(e.form);
+    return (a, N) => (i(), u(A(t.form.Field), {
+      name: t.name,
       validators: {
-        onChange: b.value,
-        ...a.validators
+        onChange: C.value,
+        ...t.validators
       }
     }, {
-      default: u(({ field: y, state: k }) => [
-        o.value ? (f(), i(E, I({ key: 0 }, { ...t.$attrs, ...t.$props, inputClass: g.value }, {
-          field: y,
-          state: k,
-          register: a.form.registerField,
-          label: a.label ?? L(h)(n.value),
-          meta: o.value
-        }), P({
-          default: u((m) => [
-            c(t.$slots, "default", d(v(m)))
+      default: m(({ field: h, state: y }) => [
+        r.value ? (i(), u(B, S({ key: 0 }, { ...a.$attrs, ...a.$props, inputClass: p.value }, {
+          field: h,
+          state: y,
+          register: t.form.registerField,
+          label: t.label ?? w(b)(l.value),
+          meta: r.value
+        }), I({
+          default: m((s) => [
+            f(a.$slots, "default", c(d(s)))
           ]),
           _: 2
         }, [
-          t.$slots.label ? {
+          a.$slots.label ? {
             name: "label",
-            fn: u((m) => [
-              c(t.$slots, "label", d(v(m)))
+            fn: m((s) => [
+              f(a.$slots, "label", c(d(s)))
             ]),
             key: "0"
           } : void 0
-        ]), 1040, ["field", "state", "register", "label", "meta"])) : w("", !0)
+        ]), 1040, ["field", "state", "register", "label", "meta"])) : M("", !0)
       ]),
       _: 3
     }, 8, ["name", "validators"]));

package/dist/vue-components.es7.js

@@ -1,7 +1,7 @@
 (function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");if(i.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(i),window.customElements){const e=window.customElements.define;window.customElements.define=function(s,t){const n=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(n&&n.call(this),this.shadowRoot){const a=document.createElement("style");a.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(a)}},e.call(window.customElements,s,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 import { defineComponent as N, computed as n, getCurrentInstance as k, useAttrs as q, useSlots as B, useId as S, renderSlot as d, normalizeProps as s, guardReactiveProps as p, createElementVNode as w, normalizeClass as F, createBlock as I, createCommentVNode as L, unref as A, openBlock as O, mergeProps as R, createSlots as V, withCtx as z } from "vue";
 import { useStore as f } from "@tanstack/vue-form";
-import T from "./vue-components.es30.js";
+import T from "./vue-components.es38.js";
 
 const H = /* @__PURE__ */ N({
   inheritAttrs: !1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.19.3",

package/src/components/OmegaForm/OmegaInput.vue

@@ -1,7 +1,6 @@
 <template>
   <component
     :is="form.Field"
-    :key="fieldKey"
     :name="name"
     :validators="{
       onChange: schema,
@@ -82,18 +81,6 @@ const meta = computed(() => {
   return props.form.meta[propsName.value]
 })
 
-// Key to force Field re-mount when meta type changes (for TaggedUnion support)
-const fieldKey = computed(() => {
-  const m = meta.value
-  if (!m) return propsName.value
-  // Include type and key constraints in the key so Field re-mounts when validation rules change
-  // Cast to any since not all FieldMeta variants have these properties
-  const fm = m as any
-  return `${propsName.value}-${fm.type}-${fm.minLength ?? ""}-${fm.maxLength ?? ""}-${fm.minimum ?? ""}-${
-    fm.maximum ?? ""
-  }`
-})
-
 // Call useIntl during setup to avoid issues when computed re-evaluates
 const { trans } = useIntl()
 

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -102,6 +102,7 @@ props.register(computed(() => ({ name: props.field.name, label: props.label, id
 // This ensures errors persist when Field components re-mount due to :key changes
 const _errors = computed(() => {
   const fieldMeta = formFieldMeta.value[props.field.name] as any
+  // Treat errors as an array (like useOmegaForm does)
   return fieldMeta?.errors ?? []
 })
 const errors = computed(() =>

package/src/components/OmegaForm/useOmegaForm.ts

@@ -962,8 +962,18 @@ export const useOmegaForm = <
     // /** @experimental */
     handleSubmitEffect,
     registerField: (field: ComputedRef<{ name: string; label: string; id: string }>) => {
-      watch(field, (f) => fieldMap.value.set(f.name, { label: f.label, id: f.id }), { immediate: true })
-      onUnmounted(() => fieldMap.value.delete(field.value.name)) // todo; perhap only when owned (id match)
+      watch(field, (f) => {
+        fieldMap.value.set(f.name, { label: f.label, id: f.id })
+      }, { immediate: true })
+      onUnmounted(() => {
+        // Only delete if we still own this entry (id matches)
+        // This prevents old components from deleting entries registered by new components
+        // during re-mount transitions (e.g., when :key changes)
+        const currentEntry = fieldMap.value.get(field.value.name)
+        if (currentEntry?.id === field.value.id) {
+          fieldMap.value.delete(field.value.name)
+        }
+      })
     }
   })
 

package/src/components/OmegaForm/useRegisterField.ts

@@ -5,7 +5,9 @@ const Key = Symbol("injected") as InjectionKey<Map<string, { label: string; id:
 
 export const useRegisterField = (field: ComputedRef<{ name: string; label: string; id: string }>) => {
   const map = injectCertain(Key)
-  watch(field, (f) => map.set(f.name, { label: f.label, id: f.id }), { immediate: true })
+  watch(field, (f) => {
+    map.set(f.name, { label: f.label, id: f.id })
+  }, { immediate: true })
   onUnmounted(() => map.delete(field.value.name)) // todo; perhap only when owned
 }
 

package/dist/vue-components.es37.js

@@ -1,9 +0,0 @@
-const s = (t, e) => {
-  const o = t.__vccOpts || t;
-  for (const [r, c] of e)
-    o[r] = c;
-  return o;
-};
-export {
-  s as default
-};