@effect-app/vue-components 0.6.2 → 0.7.0

package/dist/vue-components.es9.js

@@ -1,8 +1,220 @@
-(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-a32b1c91]{display:contents}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(c,t){const o=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(o&&o.call(this),this.shadowRoot){const d=document.createElement("style");d.appendChild(document.createTextNode("fieldset[data-v-a32b1c91]{display:contents}")),this.shadowRoot.appendChild(d)}},e.call(window.customElements,c,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import o from "./vue-components.es11.js";
-
-import r from "./vue-components.es13.js";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-a32b1c91"]]);
+import { S as i, Option as f, pipe as p } from "effect-app";
+import { useIntl as S } from "./vue-components.es3.js";
+const y = i.NonEmptyArray(i.String), v = (e) => i.AST.isUnion(e) && e.types.find((t) => t._tag === "UndefinedKeyword" || t === i.Null.ast), x = (e) => !e || !i.AST.isUnion(e) ? !1 : e.types.find((t) => t._tag === "UndefinedKeyword") ? "undefined" : e.types.find((t) => t === i.Null.ast) ? "null" : !1, m = ({ meta: e = {}, parent: t = "", property: n, propertySignatures: a }, l = {}) => {
+  if (n && n._tag === "Transformation")
+    return m({
+      parent: t,
+      meta: e,
+      property: n.from
+    });
+  if ((n == null ? void 0 : n._tag) === "TypeLiteral" && "propertySignatures" in n)
+    return m({
+      meta: e,
+      propertySignatures: n.propertySignatures
+    });
+  if (a) {
+    for (const s of a) {
+      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
+      )), "propertySignatures" in d)
+        Object.assign(
+          l,
+          m({
+            parent: u,
+            propertySignatures: d.propertySignatures,
+            meta: { required: o, nullableOrUndefined: r }
+          })
+        );
+      else {
+        const g = m({
+          parent: u,
+          property: s.type,
+          meta: { required: o, nullableOrUndefined: r }
+        });
+        l[u] = g;
+      }
+    }
+    return l;
+  }
+  if (n) {
+    const s = v(n);
+    if (Object.hasOwnProperty.call(e, "required") || (e.required = !s), i.AST.isUnion(n)) {
+      const r = n.types.find(
+        (o) => o._tag !== "UndefinedKeyword" && o !== i.Null.ast
+      );
+      return "propertySignatures" in r ? m({
+        propertySignatures: r.propertySignatures,
+        parent: t,
+        meta: e
+      }) : n.types.every(i.AST.isLiteral) ? {
+        ...e,
+        type: "select",
+        members: n.types.map((o) => o.literal)
+      } : {
+        ...e,
+        ...m({
+          parent: t,
+          meta: e,
+          property: r
+        })
+      };
+    }
+    if (i.AST.isTupleType(n))
+      return {
+        ...e,
+        type: "multiple",
+        members: n.elements,
+        rest: n.rest
+      };
+    const u = i.AST.getAnnotation(
+      n,
+      i.AST.JSONSchemaAnnotationId
+    ).pipe(f.getOrElse(() => ({})));
+    return e = { ...e, ...u }, "from" in n ? m({
+      parent: t,
+      meta: e,
+      property: n.from
+    }) : (e.type = i.AST.getAnnotation(
+      n,
+      i.AST.TitleAnnotationId
+    ).pipe(
+      f.getOrElse(() => "unknown")
+    ), e);
+  }
+  return l;
+}, c = (e) => {
+  const t = e.ast, n = {};
+  if (t._tag === "Transformation" || t._tag === "Refinement")
+    return c(i.make(t.from));
+  if ("propertySignatures" in t) {
+    const a = m({
+      propertySignatures: t.propertySignatures
+    });
+    if (Object.values(a).every((s) => s && "type" in s))
+      return a;
+    const l = (s, u = "") => {
+      for (const r in s) {
+        const o = u ? `${u}.${r}` : r;
+        s[r] && typeof s[r] == "object" && "type" in s[r] ? n[o] = s[r] : s[r] && typeof s[r] == "object" && l(s[r], o);
+      }
+    };
+    l(a);
+  }
+  return n;
+}, b = (e) => i.extend(e, i.Struct({})), A = (e) => {
+  const t = c(e), n = p(
+    e.ast,
+    f.liftPredicate((a) => a._tag === "Refinement" && "filter" in a),
+    f.flatMap((a) => i.AST.getJSONSchemaAnnotation(a)),
+    f.filter((a) => "items" in a),
+    f.filterMap(
+      ({ items: a }) => i.decodeUnknownOption(y)(a)
+    ),
+    f.zipWith(
+      i.AST.getMessageAnnotation(e.ast),
+      (a, l) => ({
+        items: a,
+        message: l("")
+      })
+    ),
+    f.getOrUndefined
+  );
+  return { schema: e, meta: t, filterItems: n };
+}, O = (e) => {
+  const { trans: t } = S();
+  let n;
+  switch (e.type) {
+    case "string":
+      n = i.String.annotations({
+        message: () => t("validation.empty")
+      }), e.format === "email" && (n = i.compose(
+        n,
+        i.Email.annotations({
+          message: () => t("validation.email.invalid")
+        })
+      )), e.required && n.annotations({
+        message: () => t("validation.empty")
+      }), e.maxLength && (n = n.pipe(i.maxLength(e.maxLength)).annotations({
+        message: () => t("validation.string.maxLength", {
+          maxLength: e.maxLength
+        })
+      })), e.minLength && (n = n.pipe(i.minLength(e.minLength)).annotations({
+        message: () => t("validation.string.minLength", {
+          minLength: e.minLength
+        })
+      }));
+      break;
+    case "number":
+      n = i.Number.annotations({
+        message: () => t("validation.empty")
+      }), e.required && n.annotations({
+        message: () => t("validation.empty")
+      }), e.minimum && (n = n.pipe(i.greaterThanOrEqualTo(e.minimum)).annotations({
+        message: () => t("validation.number.min", {
+          minimum: e.minimum,
+          isExclusive: !0
+        })
+      })), e.maximum && (n = n.pipe(i.lessThanOrEqualTo(e.maximum)).annotations({
+        message: () => t("validation.number.max", {
+          maximum: e.maximum,
+          isExclusive: !0
+        })
+      })), e.exclusiveMinimum && (n = n.pipe(i.greaterThan(e.exclusiveMinimum)).annotations({
+        message: () => t("validation.number.min", {
+          minimum: e.exclusiveMinimum,
+          isExclusive: !1
+        })
+      })), e.exclusiveMaximum && (n = n.pipe(i.lessThan(e.exclusiveMaximum)).annotations({
+        message: () => t("validation.number.max", {
+          maximum: e.exclusiveMaximum,
+          isExclusive: !1
+        })
+      }));
+      break;
+    case "select":
+      n = i.Literal(...e.members).annotations({
+        message: () => ({
+          message: t("validation.not_a_valid", {
+            type: "select",
+            message: e.members.join(", ")
+          }),
+          override: !0
+        })
+      });
+      break;
+    case "multiple":
+      n = i.Array(i.String).annotations({
+        message: () => t("validation.not_a_valid", {
+          type: "multiple",
+          message: e.members.join(", ")
+        })
+      });
+      break;
+    case "boolean":
+      n = i.Boolean;
+      break;
+    // todo: switch must be exhaustive or have default case, otherwise falls through with schema undefined.
+    case "unknown":
+      n = i.Unknown;
+      break;
+  }
+  return e.required ? n.pipe(
+    i.annotations({
+      message: () => t("validation.empty")
+    })
+  ) : n = i.NullishOr(n), i.standardSchemaV1(n);
+}, L = (e, t) => i.NullOr(e).pipe(
+  i.transform(i.typeSchema(e), {
+    decode: (n) => n ?? t(),
+    encode: (n) => n
+  })
+);
 export {
-  m as default
+  m as createMeta,
+  b as duplicateSchema,
+  O as generateInputStandardSchemaFromFieldMeta,
+  A as generateMetaFromSchema,
+  L as nullableInput
 };

package/package.json

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

package/src/components/OmegaForm/OmegaArray.vue

@@ -0,0 +1,67 @@
+<template>
+  <component :is="form.Field" :name="name">
+    <template #default="{ field }">
+      <component
+        :is="form.Field"
+        v-for="(_, i) of field.state.value"
+        :key="i"
+        :name="`${name}[${i}]`"
+      >
+        <template #default="{ field: subField, state: subState }">
+          <slot
+            v-bind="{
+              field,
+              subField,
+              subState,
+              index: i,
+            }"
+          />
+        </template>
+      </component>
+      <slot name="field" v-bind="{ field }" />
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts" generic="From, To">
+import { computed, provide } from "vue"
+import { type OmegaInputProps, createMeta } from "./OmegaFormStuff"
+import { type S } from "effect-app"
+
+const props =
+  defineProps<
+    Omit<OmegaInputProps<From, To>, "validators" | "options" | "label" | "type">
+  >()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const getMetaFromArray = computed(() => {
+  const inputMeta = props.form.meta[props.name]
+  if (inputMeta && inputMeta.type === "multiple") {
+    const propertySignatures = inputMeta.rest.reduce(
+      (acc, curr) => {
+        if (curr.type._tag === "TypeLiteral") {
+          acc.propertySignatures.push(...curr.type.propertySignatures)
+        }
+        return acc
+      },
+      {
+        propertySignatures: [],
+      } as { propertySignatures: S.AST.PropertySignature[] },
+    )
+
+    const arrayMeta = createMeta(propertySignatures)
+    const getMeta = (index: string) => {
+      const parts = index.split("].")
+      const key = parts[parts.length - 1]
+      return arrayMeta[key as keyof typeof arrayMeta]
+    }
+    return getMeta
+  }
+  return (_: string) => undefined
+})
+
+provide("getMetaFromArray", getMetaFromArray)
+</script>

package/src/components/OmegaForm/OmegaErrors.vue

@@ -130,15 +130,19 @@ const showedGeneralErrors = computed(() => {
   }
 }
 
+.error-list {
+  list-style-position: inside;
+}
+
 div.error-list {
   container-type: inline-size;
   display: grid;
   grid-template-columns: auto 1fr auto;
-  gap: 0.5em;
+  gap: 1.5em;
   align-items: start;
 }
 
-@container (max-width: 28.125rem) {
+@container (max-width: 27.125rem) {
   div.error-list {
     grid-template-columns: auto 1fr;
   }
@@ -149,7 +153,7 @@ div.error-list {
   }
 }
 
-@container (max-width: 18.75rem) {
+@container (max-width: 17.75rem) {
   div.error-list {
     grid-template-columns: 1fr;
   }

package/src/components/OmegaForm/OmegaFormInput.vue

@@ -20,12 +20,16 @@ import type {
   FieldValidators,
   NestedKeyOf,
   TypeOverride,
+  FormType,
+  MetaRecord,
 } from "./OmegaFormStuff"
 import type { InputProps } from "./InputProps"
 import OmegaInput from "./OmegaInput.vue"
-import { OmegaFormKey } from "./useOmegaForm" // Import the injection key
+import { OmegaFormKey } from "./useOmegaForm"
 
-const form = inject(OmegaFormKey)
+const form = inject(OmegaFormKey) as FormType<From, To> & {
+  meta: MetaRecord<To>
+}
 if (!form) {
   throw new Error("OmegaFormInput must be used within an OmegaForm context")
 }

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -38,6 +38,7 @@ export type TypeOverride =
   | "boolean"
   | "autocomplete"
   | "autocompletemultiple"
+  | "switch"
 
 export interface OmegaError {
   label: string
@@ -169,6 +170,7 @@ export type SelectFieldMeta = BaseFieldMeta & {
 export type MultipleFieldMeta = BaseFieldMeta & {
   type: "multiple"
   members: any[]
+  rest: S.AST.Type[]
 }
 
 export type BooleanFieldMeta = BaseFieldMeta & {
@@ -229,7 +231,7 @@ const isNullableOrUndefined = (property: false | S.AST.AST | undefined) => {
   return false
 }
 
-const createMeta = <T = any>(
+export const createMeta = <T = any>(
   { meta = {}, parent = "", property, propertySignatures }: CreateMeta,
   acc: Partial<MetaRecord<T>> = {},
 ): MetaRecord<T> | FieldMeta => {
@@ -325,6 +327,7 @@ const createMeta = <T = any>(
         ...meta,
         type: "multiple",
         members: property.elements,
+        rest: property.rest,
       } as FieldMeta
     }
 
@@ -429,6 +432,7 @@ export const generateMetaFromSchema = <From, To>(
     ),
     Option.getOrUndefined,
   )
+
   return { schema, meta, filterItems }
 }
 

package/src/components/OmegaForm/OmegaInput.vue

@@ -9,6 +9,7 @@
   >
     <template #default="{ field }: { field: OmegaFieldInternalApi<To> }">
       <OmegaInternalInput
+        v-if="meta"
         :field="field"
         :label="label"
         :options="options"
@@ -25,8 +26,9 @@
 </template>
 
 <script setup lang="ts" generic="From, To">
-import { computed } from "vue"
+import { computed, inject, type Ref } from "vue"
 import {
+  type FieldMeta,
   generateInputStandardSchemaFromFieldMeta,
   type OmegaInputProps,
 } from "./OmegaFormStuff"
@@ -39,7 +41,13 @@ defineOptions({
   inheritAttrs: false,
 })
 
+const getMetaFromArray =
+  inject<Ref<(name: string) => FieldMeta | null>>("getMetaFromArray")
+
 const meta = computed(() => {
+  if (getMetaFromArray?.value && getMetaFromArray.value(props.name)) {
+    return getMetaFromArray.value(props.name)
+  }
   return props.form.meta[props.name]
 })
 

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -4,8 +4,9 @@
     @focusout="$emit('blur', $event)"
     @focusin="$emit('focus', $event)"
   >
-    <v-checkbox
-      v-if="inputProps.type === 'boolean'"
+    <component
+      :is="inputProps.type === 'boolean' ? 'v-checkbox' : 'v-switch'"
+      v-if="inputProps.type === 'boolean' || inputProps.type === 'switch'"
       :id="inputProps.id"
       :name="inputProps.name"
       :label="inputProps.label"

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -76,7 +76,7 @@ const errors = computed(() =>
 watch(
   () => !!fieldValue.value,
   value => {
-    if (!value) {
+    if (!value && props.meta?.type !== "boolean") {
       nextTick(() => {
         fieldApi.setValue(
           props.meta?.nullableOrUndefined === "undefined" ? undefined : null,

package/src/components/OmegaForm/index.ts

@@ -2,10 +2,11 @@ import { default as OmegaForm } from "./OmegaWrapper.vue"
 import { default as OmegaInput } from "./OmegaInput.vue"
 import { default as OmegaErrors } from "./OmegaErrors.vue"
 import { default as OmegaAutoGen } from "./OmegaAutoGen.vue"
+import { default as OmegaArray } from "./OmegaArray.vue"
 
 export * as OmegaErrorsContext from "./OmegaErrorsContext"
 export * from "./OmegaFormStuff"
 export { useOmegaForm, type OmegaFormReturn } from "./useOmegaForm"
 export { default } from "./OmegaWrapper.vue"
 
-export { OmegaForm, OmegaInput, OmegaErrors, OmegaAutoGen }
+export { OmegaForm, OmegaInput, OmegaErrors, OmegaAutoGen, OmegaArray }

package/dist/vue-components.es13.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
-};

package/dist/vue-components.es17.js

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