@effect-app/vue-components 0.4.2 → 0.4.4

package/src/components/OmegaForm/OmegaFormInput.vue

@@ -0,0 +1,45 @@
+<template>
+  <OmegaInput
+    v-bind="$props"
+    :form="form"
+    :name="name"
+    :label="label"
+    :validators="validators"
+    :options="options"
+    :type="type"
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps"></slot>
+    </template>
+  </OmegaInput>
+</template>
+
+<script setup lang="ts" generic="From, To extends Record<PropertyKey, any>">
+import { inject } from "vue"
+import type {
+  FieldValidators,
+  NestedKeyOf,
+  TypeOverride,
+} from "./OmegaFormStuff"
+import type { InputProps } from "./InputProps"
+import OmegaInput from "./OmegaInput.vue"
+import { OmegaFormKey } from "./useOmegaForm" // Import the injection key
+
+const form = inject(OmegaFormKey)
+if (!form) {
+  throw new Error("OmegaFormInput must be used within an OmegaForm context")
+}
+
+defineProps<{
+  name: NestedKeyOf<To>
+  label: string
+  validators?: FieldValidators<From>
+  options?: { title: string; value: string }[]
+  type?: TypeOverride
+}>()
+
+defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: (props: InputProps<To>) => any
+}>()
+</script>

package/src/components/OmegaForm/useOmegaForm.ts

@@ -13,20 +13,17 @@ import {
   type FormProps,
   type MetaRecord,
   type OmegaFormApi,
-  type OmegaInputProps,
 } from "./OmegaFormStuff"
 import {
   computed,
   onBeforeUnmount,
   onMounted,
   onUnmounted,
-  defineComponent,
-  h,
-  type DefineComponent,
-  type Component,
+  provide,
+  type InjectionKey,
 } from "vue"
 import { isObject } from "effect/Predicate"
-import OmegaInput from "./OmegaInput.vue"
+import OmegaFormInput from "./OmegaFormInput.vue"
 
 type keysRule<T> =
   | {
@@ -55,8 +52,12 @@ interface OF<To, From> extends OmegaFormApi<To, From> {
   filterItems?: FilterItems
   clear: () => void
 }
-export interface OmegaFormReturn<To, From> extends OF<To, From> {
-  Input: DefineComponent<Omit<OmegaInputProps<From, To>, "form">, {}, {}>
+
+export const OmegaFormKey = Symbol("OmegaForm") as InjectionKey<OF<any, any>>
+
+export interface OmegaFormReturn<To extends Record<PropertyKey, any>, From>
+  extends OF<To, From> {
+  Input: typeof OmegaFormInput<From, To>
 }
 
 export const useOmegaForm = <
@@ -285,33 +286,9 @@ export const useOmegaForm = <
     clear,
   })
 
-  return Object.assign(formWithExtras, {
-    Input: defineComponent({
-      name: "FormInput",
-      inheritAttrs: true,
-      setup(_, { attrs, slots }) {
-        const name = attrs.name as NestedKeyOf<To>
-        const label = attrs.label as string
-        if (!name || !label) {
-          throw new Error("OmegaForm.Input requires name and label props")
-        }
+  provide(OmegaFormKey, formWithExtras)
 
-        return () =>
-          h(
-            OmegaInput as Component,
-            {
-              ...attrs,
-              name,
-              label,
-              form: formWithExtras,
-            },
-            slots,
-          )
-      },
-    }) as any as DefineComponent<
-      Omit<OmegaInputProps<From, To>, "form">,
-      {},
-      {}
-    >,
+  return Object.assign(formWithExtras, {
+    Input: OmegaFormInput,
   })
 }

package/src/stories/OmegaForm/form.Input.vue

@@ -4,11 +4,23 @@
     :on-submit="console.log"
   >
     <template #internalForm="{ form }">
-      <component :is="form.Input" label="myString" name="myString" />
+      <component :is="form.Input" label="myString" name="myString">
+        <template #default="{ field }">
+          <div>
+            <input v-model="field.state.value" />
+          </div>
+        </template>
+      </component>
     </template>
   </OmegaForm>
   <OmegaForm :form="exampleForm">
-    <exampleForm.Input label="aString" name="aString" />
+    <exampleForm.Input label="aString" name="aString">
+      <template #default="{ field }">
+        <div>
+          <input v-model="field.state.value" />
+        </div>
+      </template>
+    </exampleForm.Input>
     <exampleForm.Input label="aStringMin2" name="aStringMin2" />
     <exampleForm.Input label="aStringMin2Max4" name="aStringMin2Max4" />
     <exampleForm.Input

package/dist/vue-components.es12.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.es16.js

@@ -1,4 +0,0 @@
-const o = (n) => typeof n == "function";
-export {
-  o as isFunction
-};