@effect-app/vue-components 3.0.2 → 3.0.3

package/dist/vue-components.es38.js

@@ -1,194 +1,34 @@
-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",
+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",
   props: {
-    inputProps: {},
-    field: {},
-    state: {}
+    form: {},
+    disabled: { type: Boolean },
+    subscribe: {}
   },
-  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))
+  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
       }, [
-        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);
-    };
+        a(t.$slots, "default", { subscribedValues: s(n) }, void 0, !0)
+      ], 8, S)
+    ], 32));
   }
 });
 export {
-  w as default
+  V 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.es38.js";
+import o from "./vue-components.es30.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.es16.js";
+import { onMountedWithCleanup as h } from "./vue-components.es29.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 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";
+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";
 const V = /* @__PURE__ */ F({
   inheritAttrs: !1,
   __name: "OmegaInput",
@@ -13,46 +13,52 @@ const V = /* @__PURE__ */ F({
     name: {},
     inputClass: {}
   },
-  setup(t) {
-    const e = t, l = o(() => e.name), v = $(), p = o(() => {
+  setup(a) {
+    const e = a, n = l(() => e.name), p = A(), g = l(() => {
       if (e.inputClass !== null)
-        return e.inputClass !== void 0 ? e.inputClass : v.class;
-    }), n = k(
+        return e.inputClass !== void 0 ? e.inputClass : p.class;
+    }), s = M(
       "getMetaFromArray",
       null
-    ), 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)
+    ), 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)
         throw console.log(e.name, Object.keys(e.form.meta), e.form.meta), new Error("Meta is undefined");
-      return j(r.value, g);
-    }), b = E(e.form);
-    return (a, N) => (i(), u(A(t.form.Field), {
-      name: t.name,
+      return B(o.value, C);
+    }), h = N(e.form);
+    return (t, r) => (f(), i(S(a.form.Field), {
+      key: $.value,
+      name: a.name,
       validators: {
-        onChange: C.value,
-        ...t.validators
+        onChange: b.value,
+        ...a.validators
       }
     }, {
-      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)))
+      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)))
           ]),
           _: 2
         }, [
-          a.$slots.label ? {
+          t.$slots.label ? {
             name: "label",
-            fn: m((s) => [
-              f(a.$slots, "label", c(d(s)))
+            fn: u((m) => [
+              c(t.$slots, "label", d(v(m)))
             ]),
             key: "0"
           } : void 0
-        ]), 1040, ["field", "state", "register", "label", "meta"])) : M("", !0)
+        ]), 1040, ["field", "state", "register", "label", "meta"])) : w("", !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.es38.js";
+import T from "./vue-components.es30.js";
 
 const H = /* @__PURE__ */ N({
   inheritAttrs: !1,

package/package.json

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

package/src/components/OmegaForm/OmegaInput.vue

@@ -1,6 +1,7 @@
 <template>
   <component
     :is="form.Field"
+    :key="fieldKey"
     :name="name"
     :validators="{
       onChange: schema,
@@ -81,6 +82,18 @@ 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/dist/vue-components.es36.js

@@ -1,34 +0,0 @@
-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",
-  props: {
-    form: {},
-    disabled: { type: Boolean },
-    subscribe: {}
-  },
-  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
-      }, [
-        a(t.$slots, "default", { subscribedValues: s(n) }, void 0, !0)
-      ], 8, S)
-    ], 32));
-  }
-});
-export {
-  V as default
-};