@effect-app/vue-components 0.3.2 → 0.3.3

package/dist/vue-components.es11.js

@@ -1,6 +1,6 @@
 import { defineComponent as d, watch as b, createElementBlock as g, openBlock as S, withModifiers as v, unref as n, createElementVNode as h, renderSlot as O } from "vue";
 import { useStore as i } from "@tanstack/vue-form";
-import { getOmegaStore as M } from "./vue-components.es18.js";
+import { getOmegaStore as M } from "./vue-components.es17.js";
 import { provideOmegaErrors as y } from "./vue-components.es4.js";
 import { useOmegaForm as E } from "./vue-components.es5.js";
 const w = ["disabled"], A = /* @__PURE__ */ d({

package/dist/vue-components.es15.js

@@ -1,4 +1,4 @@
-import { isFunction as c } from "./vue-components.es16.js";
+import { isFunction as c } from "./vue-components.es18.js";
 const s = c, t = (o) => typeof o == "object" && o !== null, i = (o) => t(o) || s(o);
 export {
   s as isFunction,

package/dist/vue-components.es16.js

@@ -1,4 +1,95 @@
-const o = (n) => typeof n == "function";
+(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(o,t){const a=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(a&&a.call(this),this.shadowRoot){const i=document.createElement("style");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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(i)}},e.call(window.customElements,o,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { defineComponent as B, getCurrentInstance as L, useId as P, computed as n, watch as x, onMounted as _, ref as S, watchEffect as A, renderSlot as D, normalizeProps as F, guardReactiveProps as M, createElementVNode as N, createBlock as R, createCommentVNode as T, unref as U, openBlock as z, mergeProps as j } from "vue";
+import { useStore as G } from "@tanstack/vue-form";
+import { useOmegaErrors as H } from "./vue-components.es4.js";
+import J from "./vue-components.es20.js";
+
+const Z = /* @__PURE__ */ B({
+  inheritAttrs: !1,
+  __name: "OmegaInternalInput",
+  props: {
+    field: {},
+    meta: {},
+    label: {},
+    options: {},
+    type: {},
+    validators: {}
+  },
+  setup(q) {
+    const e = q, o = L(), C = o == null ? void 0 : o.appContext.components.VTextField, u = P(), s = e.field, a = G(s.store, (t) => t), f = n(() => {
+      var t, r;
+      return e.type ? e.type : ((t = e.meta) == null ? void 0 : t.type) === "string" ? e.meta.format === "email" ? "email" : "string" : ((r = e.meta) == null ? void 0 : r.type) || "unknown";
+    }), l = n(() => a.value.value), d = n(
+      () => (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        a.value.meta.errors.map((t) => t == null ? void 0 : t.message).filter(Boolean)
+      )
+    );
+    x(
+      () => [!!l.value],
+      () => {
+        var t, r;
+        d.value.length && !l.value && !((t = e.meta) != null && t.required) && s.setValue(
+          ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "undefined" ? void 0 : null
+        );
+      }
+    ), _(() => {
+      var t, r;
+      !l.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && s.setValue(null);
+    });
+    const { addError: I, removeError: O, showErrors: $, showErrorsOn: k } = H(), i = S(!1);
+    A(() => {
+      ($.value || k === "onChange") && (i.value = !0);
+    });
+    const m = () => {
+      i.value = !0;
+    };
+    _(() => {
+      l.value && m();
+    });
+    const v = n(() => !i.value && f.value !== "select" ? [] : d.value);
+    x(
+      () => a.value.meta.errors,
+      () => {
+        a.value.meta.errors.length ? I({
+          inputId: u,
+          errors: a.value.meta.errors.map((t) => t.message).filter(Boolean),
+          label: e.label
+        }) : O(u);
+      }
+    );
+    const p = n(() => {
+      var t, r, c, g, y, h, b, E, V, w;
+      return {
+        id: u,
+        required: (t = e.meta) == null ? void 0 : t.required,
+        minLength: ((r = e.meta) == null ? void 0 : r.type) === "string" && ((c = e.meta) == null ? void 0 : c.minLength),
+        maxLength: ((g = e.meta) == null ? void 0 : g.type) === "string" && ((y = e.meta) == null ? void 0 : y.maxLength),
+        max: ((h = e.meta) == null ? void 0 : h.type) === "number" && ((b = e.meta) == null ? void 0 : b.maximum),
+        min: ((E = e.meta) == null ? void 0 : E.type) === "number" && ((V = e.meta) == null ? void 0 : V.minimum),
+        name: e.field.name,
+        modelValue: e.field.state.value,
+        errorMessages: v.value,
+        error: !!v.value.length,
+        field: e.field,
+        setRealDirty: m,
+        type: f.value,
+        label: `${e.label}${(w = e.meta) != null && w.required ? " *" : ""}`,
+        options: e.options
+      };
+    });
+    return (t, r) => D(t.$slots, "default", F(M(p.value)), () => [
+      N("div", { onFocusout: m }, [
+        U(C) ? (z(), R(J, j({
+          key: 0,
+          "input-props": p.value
+        }, t.$attrs, {
+          "vuetify-value": p.value.field.state.value
+        }), null, 16, ["input-props", "vuetify-value"])) : T("", !0)
+      ], 32)
+    ]);
+  }
+});
 export {
-  o as isFunction
+  Z as default
 };

package/dist/vue-components.es17.js

@@ -1,95 +1,13 @@
-(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(o,t){const a=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(a&&a.call(this),this.shadowRoot){const i=document.createElement("style");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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(i)}},e.call(window.customElements,o,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as B, getCurrentInstance as L, useId as P, computed as n, watch as x, onMounted as _, ref as S, watchEffect as A, renderSlot as D, normalizeProps as F, guardReactiveProps as M, createElementVNode as N, createBlock as R, createCommentVNode as T, unref as U, openBlock as z, mergeProps as j } from "vue";
-import { useStore as G } from "@tanstack/vue-form";
-import { useOmegaErrors as H } from "./vue-components.es4.js";
-import J from "./vue-components.es20.js";
-
-const Z = /* @__PURE__ */ B({
-  inheritAttrs: !1,
-  __name: "OmegaInternalInput",
-  props: {
-    field: {},
-    meta: {},
-    label: {},
-    options: {},
-    type: {},
-    validators: {}
-  },
-  setup(q) {
-    const e = q, o = L(), C = o == null ? void 0 : o.appContext.components.VTextField, u = P(), s = e.field, a = G(s.store, (t) => t), f = n(() => {
-      var t, r;
-      return e.type ? e.type : ((t = e.meta) == null ? void 0 : t.type) === "string" ? e.meta.format === "email" ? "email" : "string" : ((r = e.meta) == null ? void 0 : r.type) || "unknown";
-    }), l = n(() => a.value.value), d = n(
-      () => (
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        a.value.meta.errors.map((t) => t == null ? void 0 : t.message).filter(Boolean)
-      )
-    );
-    x(
-      () => [!!l.value],
-      () => {
-        var t, r;
-        d.value.length && !l.value && !((t = e.meta) != null && t.required) && s.setValue(
-          ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "undefined" ? void 0 : null
-        );
-      }
-    ), _(() => {
-      var t, r;
-      !l.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && s.setValue(null);
-    });
-    const { addError: I, removeError: O, showErrors: $, showErrorsOn: k } = H(), i = S(!1);
-    A(() => {
-      ($.value || k === "onChange") && (i.value = !0);
-    });
-    const m = () => {
-      i.value = !0;
-    };
-    _(() => {
-      l.value && m();
-    });
-    const v = n(() => !i.value && f.value !== "select" ? [] : d.value);
-    x(
-      () => a.value.meta.errors,
-      () => {
-        a.value.meta.errors.length ? I({
-          inputId: u,
-          errors: a.value.meta.errors.map((t) => t.message).filter(Boolean),
-          label: e.label
-        }) : O(u);
-      }
-    );
-    const p = n(() => {
-      var t, r, c, g, y, h, b, E, V, w;
-      return {
-        id: u,
-        required: (t = e.meta) == null ? void 0 : t.required,
-        minLength: ((r = e.meta) == null ? void 0 : r.type) === "string" && ((c = e.meta) == null ? void 0 : c.minLength),
-        maxLength: ((g = e.meta) == null ? void 0 : g.type) === "string" && ((y = e.meta) == null ? void 0 : y.maxLength),
-        max: ((h = e.meta) == null ? void 0 : h.type) === "number" && ((b = e.meta) == null ? void 0 : b.maximum),
-        min: ((E = e.meta) == null ? void 0 : E.type) === "number" && ((V = e.meta) == null ? void 0 : V.minimum),
-        name: e.field.name,
-        modelValue: e.field.state.value,
-        errorMessages: v.value,
-        error: !!v.value.length,
-        field: e.field,
-        setRealDirty: m,
-        type: f.value,
-        label: `${e.label}${(w = e.meta) != null && w.required ? " *" : ""}`,
-        options: e.options
-      };
-    });
-    return (t, r) => D(t.$slots, "default", F(M(p.value)), () => [
-      N("div", { onFocusout: m }, [
-        U(C) ? (z(), R(J, j({
-          key: 0,
-          "input-props": p.value
-        }, t.$attrs, {
-          "vuetify-value": p.value.field.state.value
-        }), null, 16, ["input-props", "vuetify-value"])) : T("", !0)
-      ], 32)
-    ]);
-  }
-});
+import { useStore as u } from "@tanstack/vue-form";
+import { computed as f } from "vue";
+function c(o, t) {
+  return f(() => t ? u(o.store, (n) => {
+    const r = {};
+    for (const e of t)
+      r[e] = n[e];
+    return r;
+  }).value : {});
+}
 export {
-  Z as default
+  c as getOmegaStore
 };

package/dist/vue-components.es18.js

@@ -1,13 +1,4 @@
-import { useStore as u } from "@tanstack/vue-form";
-import { computed as f } from "vue";
-function c(o, t) {
-  return f(() => t ? u(o.store, (n) => {
-    const r = {};
-    for (const e of t)
-      r[e] = n[e];
-    return r;
-  }).value : {});
-}
+const o = (n) => typeof n == "function";
 export {
-  c as getOmegaStore
+  o as isFunction
 };

package/dist/vue-components.es19.js

@@ -1,4 +1,4 @@
-import f from "./vue-components.es17.js";
+import f from "./vue-components.es16.js";
 export {
   f as default
 };

package/dist/vue-components.es6.js

@@ -14,7 +14,7 @@ const y = i.NonEmptyArray(i.String), v = (e) => i.AST.isUnion(e) && e.types.find
     });
   if (a) {
     for (const s of a) {
-      const u = t ? `${t}.${s.name.toString()}` : s.name.toString(), r = x(s.type), o = e.required ?? !r;
+      const u = t ? `${t}.${s.name.toString()}` : s.name.toString(), r = x(s.type), o = !r;
       let d = s.type;
       if (i.AST.isUnion(s.type) && (d = s.type.types.find(
         (g) => g._tag !== "UndefinedKeyword" && g !== i.Null.ast

package/dist/vue-components.es8.js

@@ -1,6 +1,6 @@
 import { defineComponent as i, computed as t, createBlock as p, openBlock as d, resolveDynamicComponent as u, withCtx as r, createVNode as f, mergeProps as c, renderSlot as v, normalizeProps as h, guardReactiveProps as g } from "vue";
 import { generateInputStandardSchemaFromFieldMeta as y } from "./vue-components.es6.js";
-import b from "./vue-components.es17.js";
+import b from "./vue-components.es16.js";
 const S = /* @__PURE__ */ i({
   inheritAttrs: !1,
   __name: "OmegaInput",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-form": "^1.2.4",

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -241,7 +241,7 @@ const createMeta = <T = any>(
     for (const p of propertySignatures) {
       const key = parent ? `${parent}.${p.name.toString()}` : p.name.toString()
       const nullableOrUndefined = isNullableOrUndefined(p.type)
-      const isRequired = meta["required"] ?? !nullableOrUndefined
+      const isRequired = !nullableOrUndefined
 
       let typeToProcess = p.type
       if (S.AST.isUnion(p.type)) {

package/src/stories/OmegaForm/Meta.vue

@@ -0,0 +1,47 @@
+<template>
+  <OmegaForm
+    :schema="
+      S.Struct({
+        a: S.NullOr(S.String),
+        b: S.UndefinedOr(S.Number),
+        c: S.NullishOr(S.Number),
+        d: S.String,
+        e: S.Number,
+        f: S.Number,
+        struct: S.Struct({
+          a: S.NullOr(S.String),
+          b: S.UndefinedOr(S.Number),
+          c: S.NullishOr(S.Number),
+          d: S.String,
+          e: S.Number,
+          f: S.Number,
+        }),
+      })
+    "
+  >
+    <template #default="{ form }">
+      <ul>
+        <li v-for="key in Object.keys(form.meta)" :key="key">
+          {{ key }}: {{ (form.meta as any)[key] }}
+        </li>
+      </ul>
+      <OmegaInput label="a" :form="form" name="a" />
+      <OmegaInput label="b" :form="form" name="b" />
+      <OmegaInput label="c" :form="form" name="c" />
+      <OmegaInput label="d" :form="form" name="d" />
+      <OmegaInput label="e" :form="form" name="e" />
+      <OmegaInput label="f" :form="form" name="f" />
+      <OmegaInput label="struct.a" :form="form" name="struct.a" />
+      <OmegaInput label="struct.b" :form="form" name="struct.b" />
+      <OmegaInput label="struct.c" :form="form" name="struct.c" />
+      <OmegaInput label="struct.d" :form="form" name="struct.d" />
+      <OmegaInput label="struct.e" :form="form" name="struct.e" />
+      <OmegaInput label="struct.f" :form="form" name="struct.f" />
+    </template>
+  </OmegaForm>
+</template>
+
+<script setup lang="ts">
+import { OmegaForm, OmegaInput } from "../../components/OmegaForm"
+import { S } from "effect-app"
+</script>

package/src/stories/OmegaForm.stories.ts

@@ -9,6 +9,7 @@ import ComplexForm from "./OmegaForm/ComplexForm.vue"
 import SimpleFormVuetifyDefault from "./OmegaForm/SimpleFormVuetifyDefault.vue"
 import SumExample from "./OmegaForm/SumExample.vue"
 import PersistencyForm from "./OmegaForm/PersistencyForm.vue"
+import MetaForm from "./OmegaForm/Meta.vue"
 
 const mockIntl = {
   locale: ref("en"),
@@ -81,3 +82,10 @@ export const PersistencyFormStory: Story = {
     template: "<PersistencyForm />",
   }),
 }
+
+export const MetaStory: Story = {
+  render: () => ({
+    components: { MetaForm },
+    template: "<MetaForm />",
+  }),
+}