@effect-app/vue-components 0.0.9 → 0.1.0

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="omega-input">
+    <v-text-field
+      v-if="inputProps.type === 'email' || inputProps.type === 'string'"
+      :id="inputProps.id"
+      :required="inputProps.required"
+      :min-length="inputProps.minLength"
+      :max-length="inputProps.maxLength"
+      :type="inputProps.type"
+      :name="inputProps.name"
+      :label="inputProps.label"
+      :model-value="inputProps.modelValue"
+      :error-messages="inputProps.errorMessages"
+      :error="inputProps.error"
+      v-bind="$attrs"
+      @update:model-value="inputProps.field.handleChange"
+      @blur="inputProps.setRealDirty"
+    />
+    <v-textarea
+      v-if="inputProps.type === 'text'"
+      v-bind="$attrs"
+      :id="inputProps.id"
+      :required="inputProps.required"
+      :min-length="inputProps.minLength"
+      :max-length="inputProps.maxLength"
+      :type="inputProps.type"
+      :name="inputProps.name"
+      :label="inputProps.label"
+      :model-value="inputProps.modelValue"
+      :error-messages="inputProps.errorMessages"
+      :error="inputProps.error"
+      @update:model-value="inputProps.field.handleChange"
+      @blur="inputProps.setRealDirty"
+    />
+    <v-text-field
+      v-if="inputProps.type === 'number'"
+      :id="inputProps.id"
+      :required="inputProps.required"
+      :min="inputProps.min"
+      :max="inputProps.max"
+      :type="inputProps.type"
+      :name="inputProps.name"
+      :label="inputProps.label"
+      :model-value="inputProps.modelValue"
+      :error-messages="inputProps.errorMessages"
+      :error="inputProps.error"
+      v-bind="$attrs"
+      @update:model-value="
+        (e: any) => {
+          inputProps.field.handleChange(Number(e))
+        }
+      "
+      @blur="inputProps.setRealDirty"
+    />
+    <div
+      v-if="inputProps.type === 'select' || inputProps.type === 'multiple'"
+      :class="inputProps.type !== 'multiple' && 'd-flex align-center'"
+    >
+      <v-select
+        :id="inputProps.id"
+        :required="inputProps.required"
+        :multiple="inputProps.type === 'multiple'"
+        :chips="inputProps.type === 'multiple'"
+        :name="inputProps.name"
+        :model-value="inputProps.modelValue"
+        :label="inputProps.label"
+        :items="inputProps.options"
+        :error-messages="inputProps.errorMessages"
+        :error="inputProps.error"
+        v-bind="$attrs"
+        @update:model-value="inputProps.field.handleChange"
+        @blur="inputProps.setRealDirty"
+      />
+      <v-btn
+        v-if="inputProps.type === 'select'"
+        variant-btn="secondary"
+        :variant-icon="mdiRefresh"
+        class="mr-2"
+        title="Reset"
+        @click="inputProps.field.handleChange(undefined)"
+      >
+        <v-icon :icon="mdiRefresh" />
+      </v-btn>
+    </div>
+
+    <div
+      v-if="
+        inputProps.type === 'autocomplete' ||
+        inputProps.type === 'autocompletemultiple'
+      "
+      :class="
+        inputProps.type !== 'autocompletemultiple' && 'd-flex align-center'
+      "
+    >
+      <v-autocomplete
+        :id="inputProps.id"
+        :multiple="inputProps.type === 'autocompletemultiple'"
+        :required="inputProps.required"
+        :name="inputProps.name"
+        :model-value="inputProps.modelValue"
+        :label="inputProps.label"
+        :items="inputProps.options"
+        :error-messages="inputProps.errorMessages"
+        :error="inputProps.error"
+        :chips="inputProps.type === 'autocompletemultiple'"
+        v-bind="$attrs"
+        @update:model-value="inputProps.field.handleChange"
+        @blur="inputProps.setRealDirty"
+      />
+      <v-btn
+        v-if="inputProps.type === 'autocomplete'"
+        variant-btn="secondary"
+        :variant-icon="mdiRefresh"
+        class="mr-2"
+        title="Reset"
+        @click="inputProps.field.handleChange(undefined)"
+      >
+        <v-icon :icon="mdiRefresh" />
+      </v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T">
+import { mdiRefresh } from "@mdi/js"
+import type { InputProps } from "./InputProps"
+
+defineProps<{
+  inputProps: InputProps<T>
+}>()
+</script>
+
+<style>
+.omega-input {
+  .v-input__details:has(.v-messages:empty) {
+    grid-template-rows: 0fr;
+    transition: all 0.2s;
+  }
+
+  & .v-messages:empty {
+    min-height: 0;
+  }
+
+  & .v-input__details:has(.v-messages) {
+    transition: all 0.2s;
+    overflow: hidden;
+    min-height: 0;
+    display: grid;
+    grid-template-rows: 1fr;
+  }
+
+  & .v-messages {
+    transition: all 0.2s;
+    > * {
+      transition-duration: 0s !important;
+    }
+  }
+
+  v-btn {
+    all: unset;
+    cursor: pointer;
+  }
+}
+</style>

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -1,40 +1,22 @@
 <template>
-  <div class="omega-input">
-    <v-text-field v-bind="$attrs" v-if="fieldType === 'email' || fieldType === 'string'" :id="id"
-      :required="meta?.required" :min-length="meta?.type === 'string' && meta?.minLength"
-      :max-length="meta?.type === 'string' && meta?.maxLength" :type="fieldType" :name="field.name"
-      :label="`${label}${meta?.required ? ' *' : ''}`" :model-value="field.state.value" :error-messages="showedErrors"
-      :error="!!showedErrors.length" @update:model-value="field.handleChange" @blur="setRealDirty" />
-    <v-textarea v-bind="$attrs" v-if="fieldType === 'text'" :id="id" :required="meta?.required"
-      :min-length="meta?.type === 'string' && meta?.minLength" :max-length="meta?.type === 'string' && meta?.maxLength"
-      :type="fieldType" :name="field.name" :label="`${label}${meta?.required ? ' *' : ''}`"
-      :model-value="field.state.value" :error-messages="showedErrors" :error="!!showedErrors.length"
-      @update:model-value="field.handleChange" @blur="setRealDirty" />
-    <v-text-field v-bind="$attrs" v-if="fieldType === 'number'" :id="id" :required="meta?.required"
-      :min="meta?.type === 'number' && meta.minimum" :max="meta?.type === 'number' && meta.maximum" :type="fieldType"
-      :name="field.name" :label="`${label}${meta?.required ? ' *' : ''}`" :model-value="field.state.value"
-      :error-messages="showedErrors" :error="!!showedErrors.length" @update:model-value="
-        (e: any) => {
-          field.handleChange(Number(e))
-        }
-      " @blur="setRealDirty" />
-    <div v-if="fieldType === 'select' || fieldType === 'multiple'"
-      :class="fieldType !== 'multiple' && 'd-flex align-center'">
-      <v-select v-bind="$attrs" :id="id" :required="meta?.required" :multiple="fieldType === 'multiple'"
-        :chips="fieldType === 'multiple'" :name="field.name" :model-value="field.state.value"
-        :label="`${label}${meta?.required ? ' *' : ''}`" :items="options" :error-messages="showedErrors"
-        :error="!!showedErrors.length" @update:model-value="field.handleChange" @blur="setRealDirty" />
-      <v-btn v-if="fieldType !== 'multiple'" variant-btn="secondary" :variant-icon="mdiRefresh" class="mr-2"
-        title="Reset" @click="field.handleChange(undefined)"></v-btn>
-    </div>
-  </div>
+  <slot v-bind="inputProps">
+    <OmegaInputVuetify v-if="vuetified" :input-props="inputProps" />
+  </slot>
 </template>
 
 <script setup lang="ts" generic="To">
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { VTextField, VSelect } from "vuetify/components"
-import { mdiRefresh } from "@mdi/js"
-import { useStore, type FieldApi } from "@tanstack/vue-form"
+import { useStore } from "@tanstack/vue-form"
+import {
+  useAttrs,
+  useId,
+  computed,
+  watch,
+  onMounted,
+  ref,
+  watchEffect,
+  type ComputedRef,
+  getCurrentInstance,
+} from "vue"
 import type {
   FieldValidators,
   MetaRecord,
@@ -42,30 +24,11 @@ import type {
   TypeOverride,
 } from "./OmegaFormStuff"
 import { useOmegaErrors } from "./OmegaErrorsContext"
-import { useId, computed, watch, onMounted, ref, watchEffect } from "vue"
+import type { OmegaFieldInternalApi, InputProps } from "./InputProps"
+import OmegaInputVuetify from "./OmegaInputVuetify.vue"
 
 const props = defineProps<{
-  field: FieldApi<
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any,
-    any
-  >
+  field: OmegaFieldInternalApi<To>
   meta: MetaRecord<To>[NestedKeyOf<To>]
   label: string
   options?: { title: string; value: string }[]
@@ -73,9 +36,8 @@ const props = defineProps<{
   validators?: FieldValidators<To>
 }>()
 
-defineOptions({
-  inheritAttrs: false
-})
+const instance = getCurrentInstance()
+const vuetified = instance?.appContext.components["VTextField"]
 
 const id = useId()
 
@@ -94,7 +56,8 @@ const fieldType = computed(() => {
 
 const fieldValue = computed(() => fieldState.value.value)
 const errors = computed(() =>
-  fieldState.value.meta.errors.map((e: any) => e.message).filter(Boolean),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  fieldState.value.meta.errors.map((e: any) => e?.message).filter(Boolean),
 )
 
 // we remove value and errors when the field is empty and not required
@@ -146,6 +109,7 @@ watch(
       addError({
         inputId: id,
         errors: fieldState.value.meta.errors
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
           .map((e: any) => e.message)
           .filter(Boolean),
         label: props.label,
@@ -155,33 +119,24 @@ watch(
     }
   },
 )
-</script>
-
-<style>
-.omega-input {
-  .v-input__details:has(.v-messages:empty) {
-    grid-template-rows: 0fr;
-    transition: all 0.2s;
-  }
 
-  & .v-messages:empty {
-    min-height: 0;
-  }
-
-  & .v-input__details:has(.v-messages) {
-    transition: all 0.2s;
-    overflow: hidden;
-    min-height: 0;
-    display: grid;
-    grid-template-rows: 1fr;
-  }
-
-  & .v-messages {
-    transition: all 0.2s;
-
-    >* {
-      transition-duration: 0s !important;
-    }
-  }
-}
-</style>
+const otherAttrs = useAttrs()
+
+const inputProps: ComputedRef<InputProps<To>> = computed(() => ({
+  id,
+  required: props.meta?.required,
+  minLength: props.meta?.type === "string" && props.meta?.minLength,
+  maxLength: props.meta?.type === "string" && props.meta?.maxLength,
+  max: props.meta?.type === "number" && props.meta?.maximum,
+  min: props.meta?.type === "number" && props.meta?.minimum,
+  name: props.field.name,
+  modelValue: props.field.state.value,
+  errorMessages: showedErrors.value,
+  error: !!showedErrors.value.length,
+  field: props.field,
+  setRealDirty,
+  type: fieldType.value,
+  label: `${props.label}${props.meta?.required ? " *" : ""}`,
+  options: props.options,
+}))
+</script>

package/src/components/OmegaForm/useOmegaForm.ts

@@ -12,9 +12,11 @@ import {
   type MetaRecord,
   type OmegaFormApi,
 } from "./OmegaFormStuff"
-/* eslint-disable @typescript-eslint/no-explicit-any */
+
 export const useOmegaForm = <
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   From extends Record<PropertyKey, any>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   To extends Record<PropertyKey, any>,
 >(
   schema: S.Schema<From, To, never>,

package/src/components/style.css

@@ -1,3 +1,3 @@
 .cool {
   color: pink;
-}
+}

package/src/constants/index.ts

@@ -1 +1 @@
-export {}
+export {}

package/src/env.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="vite/client" />
 
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
+declare module "*.vue" {
+  import { DefineComponent } from "vue"
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
   const component: DefineComponent<{}, {}, any>
   export default component

package/src/index.ts

@@ -1,10 +1,14 @@
-import { App } from 'vue'
-import * as components from './components'
+import { type App } from "vue"
+import * as components from "./components"
 
-function install (app: App) {
+function install(app: App) {
   for (const key in components) {
-    // @ts-expect-error
-    app.component(key, components[key])
+    if (Object.prototype.hasOwnProperty.call(components, key)) {
+      const component = components[key as keyof typeof components]
+      if (component && typeof component === "object") {
+        app.component(key, component)
+      }
+    }
   }
 }
 
@@ -12,6 +16,6 @@ function install (app: App) {
 
 export default { install }
 
-export * from './components'
-export * from './constants'
-export * from './utils'
+export * from "./components"
+export * from "./constants"
+export * from "./utils"

package/src/utils/index.ts

@@ -1,12 +1,16 @@
-import { inject, InjectionKey, provide, ref } from "vue";
-import { makeIntl} from "@effect-app/vue"
+import { inject, type InjectionKey, provide } from "vue"
+import { type makeIntl } from "@effect-app/vue"
 
-const intlKey = Symbol() as InjectionKey<ReturnType<ReturnType<typeof makeIntl>["useIntl"]>>
-export const useIntl = () => {  
+const intlKey = Symbol() as InjectionKey<
+  ReturnType<ReturnType<typeof makeIntl>["useIntl"]>
+>
+export const useIntl = () => {
   const intl = inject(intlKey)
   if (!intl) {
     throw new Error("useIntl must be used within a IntlProvider")
   }
   return intl
 }
-export const provideIntl = (intl: ReturnType<ReturnType<typeof makeIntl>["useIntl"]>) => provide(intlKey, intl)
+export const provideIntl = (
+  intl: ReturnType<ReturnType<typeof makeIntl>["useIntl"]>,
+) => provide(intlKey, intl)

package/dist/vue-components.css

@@ -1 +0,0 @@
-fieldset[data-v-0de09910]{display:contents}.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}.v-enter-from[data-v-55fda615],.v-leave-to[data-v-55fda615]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-55fda615],.v-leave-active[data-v-55fda615]{display:grid;transition:all .15s}.v-enter-to[data-v-55fda615],.v-leave-from[data-v-55fda615]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-55fda615]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-55fda615]{min-height:0}.error-list[data-v-55fda615]{container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:start}@container (max-width: 28.125rem){.error-list[data-v-55fda615]{grid-template-columns:auto 1fr}.error-link[data-v-55fda615]{grid-column:1 / -1;justify-self:end;padding-bottom:16px}}@container (max-width: 18.75rem){.error-list[data-v-55fda615]{grid-template-columns:1fr}.error-message[data-v-55fda615]{grid-column:1 / -1}}.error-item[data-v-55fda615]{display:contents}a[data-v-55fda615]{min-width:min-content}.error-link[data-v-55fda615]{color:inherit;text-decoration:none;display:inline-flex;align-items:center}