perf: display border status color when the form is verified incorrectly (#4407)

* perf: display border status color when the form is verified incorrectly

* chore: adjust the document preview file order

packages/@core/ui-kit/form-ui/src/form-render/form-field.vue

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

packages/styles/src/antd/index.css

@@ -11,3 +11,7 @@
 .ant-notification-notice {
   @apply dark:border-border/60 dark:border;
 }
+
+.ant-app .form-valid-error .ant-select-selector {
+  border-color: hsl(var(--destructive));
+}