|
@ -16,7 +16,7 @@ import { |
|
|
import { cn, isFunction, isObject, isString } from '@vben-core/shared/utils'; |
|
|
import { cn, isFunction, isObject, isString } from '@vben-core/shared/utils'; |
|
|
|
|
|
|
|
|
import { toTypedSchema } from '@vee-validate/zod'; |
|
|
import { toTypedSchema } from '@vee-validate/zod'; |
|
|
import { useFormValues } from 'vee-validate'; |
|
|
|
|
|
|
|
|
import { useFieldError, useFormValues } from 'vee-validate'; |
|
|
|
|
|
|
|
|
import { injectRenderFormProps, useFormContext } from './context'; |
|
|
import { injectRenderFormProps, useFormContext } from './context'; |
|
|
import useDependencies from './dependencies'; |
|
|
import useDependencies from './dependencies'; |
|
@ -43,8 +43,11 @@ const { |
|
|
const { componentBindEventMap, componentMap, isVertical } = useFormContext(); |
|
|
const { componentBindEventMap, componentMap, isVertical } = useFormContext(); |
|
|
const formRenderProps = injectRenderFormProps(); |
|
|
const formRenderProps = injectRenderFormProps(); |
|
|
const values = useFormValues(); |
|
|
const values = useFormValues(); |
|
|
|
|
|
const errors = useFieldError(fieldName); |
|
|
const formApi = formRenderProps.form; |
|
|
const formApi = formRenderProps.form; |
|
|
|
|
|
|
|
|
|
|
|
const isInValid = computed(() => errors.value?.length > 0); |
|
|
|
|
|
|
|
|
const fieldComponent = computed(() => { |
|
|
const fieldComponent = computed(() => { |
|
|
const finalComponent = isString(component) |
|
|
const finalComponent = isString(component) |
|
|
? componentMap.value[component] |
|
|
? componentMap.value[component] |
|
@ -217,6 +220,7 @@ function createComponentProps(slotProps: Record<string, any>) { |
|
|
<FormItem |
|
|
<FormItem |
|
|
v-show="isShow" |
|
|
v-show="isShow" |
|
|
:class="{ |
|
|
:class="{ |
|
|
|
|
|
'form-valid-error': isInValid, |
|
|
'flex-col': isVertical, |
|
|
'flex-col': isVertical, |
|
|
'flex-row items-center': !isVertical, |
|
|
'flex-row items-center': !isVertical, |
|
|
}" |
|
|
}" |
|
@ -248,10 +252,14 @@ function createComponentProps(slotProps: Record<string, any>) { |
|
|
...slotProps, |
|
|
...slotProps, |
|
|
...createComponentProps(slotProps), |
|
|
...createComponentProps(slotProps), |
|
|
disabled: shouldDisabled, |
|
|
disabled: shouldDisabled, |
|
|
|
|
|
isInValid, |
|
|
}" |
|
|
}" |
|
|
> |
|
|
> |
|
|
<component |
|
|
<component |
|
|
:is="fieldComponent" |
|
|
:is="fieldComponent" |
|
|
|
|
|
:class="{ |
|
|
|
|
|
'border-destructive focus:border-destructive': isInValid, |
|
|
|
|
|
}" |
|
|
v-bind="createComponentProps(slotProps)" |
|
|
v-bind="createComponentProps(slotProps)" |
|
|
:disabled="shouldDisabled" |
|
|
:disabled="shouldDisabled" |
|
|
> |
|
|
> |
|
|