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

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

* chore: adjust the document preview file order

Author: anncwb

.dockerignore

@@ -3,3 +3,5 @@ node_modules
 .gitignore
 *.md
 dist
+.turbo
+dist.zip

.vscode/settings.json

@@ -212,7 +212,6 @@
     "*.env": "$(capture).env.*",
     "README.md": "README*,CHANGELOG*,LICENSE,CNAME",
     "package.json": "pnpm-lock.yaml,pnpm-workspace.yaml,.gitattributes,.gitignore,.gitpod.yml,.npmrc,.browserslistrc,.node-version,.git*,.tazerc.json",
-    "Dockerfile": "Dockerfile,.docker*,docker-entrypoint.sh,build-local-docker*,nginx.conf",
     "eslint.config.mjs": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.*,.prettierrc.*,stylelint.config.*,.lintstagedrc.mjs,cspell.json",
     "tailwind.config.mjs": "postcss.*"
   },

docs/.vitepress/config/plugins/demo-preview.ts

@@ -83,7 +83,12 @@ export const demoPreviewPlugin = (md: MarkdownRenderer) => {
       if (!state.tokens[index]) {
         return '';
       }
-
+      const firstString = 'index.vue';
+      childFiles = childFiles.sort((a, b) => {
+        if (a === firstString) return -1;
+        if (b === firstString) return 1;
+        return a.localeCompare(b, 'en', { sensitivity: 'base' });
+      });
       state.tokens[index].content =
         `<DemoPreview files="${encodeURIComponent(JSON.stringify(childFiles))}" ><${ComponentName}/>
         `;

docs/src/guide/introduction/thin.md

@@ -65,3 +65,12 @@ pnpm install
   }
 }
 ```
+
+## 其他
+
+如果你想更进一步精简，你可以删除参考一下文件或者文件夹的作用，判断自己是否需要，不需要删除即可：
+
+- `.changeset` 文件夹用于管理版本变更
+- `.github` 文件夹用于存放 GitHub 的配置文件
+- `.vscode` 文件夹用于存放 VSCode 的配置文件，如果你使用其他编辑器，可以删除
+- `./scripts/deploy` 文件夹用于存放部署脚本，如果你不需要docker部署，可以删除

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));
+}