docs: update docs (#4466)

* chore: fixed known issues with form components

* docs: add vben form doc

packages/@core/ui-kit/form-ui/src/form-api.ts

@@ -219,6 +219,12 @@ export class FormApi {
 
   async validate(opts?: Partial<ValidationOptions>) {
     const form = await this.getForm();
-    return await form.validate(opts);
+
+    const validateResult = await form.validate(opts);
+
+    if (Object.keys(validateResult?.errors ?? {}).length > 0) {
+      console.error('validate error', validateResult?.errors);
+    }
+    return validateResult;
   }
 }

packages/@core/ui-kit/form-ui/src/form-render/dependencies.ts

@@ -6,7 +6,7 @@ import type {
 
 import { computed, ref, watch } from 'vue';
 
-import { isFunction } from '@vben-core/shared/utils';
+import { isBoolean, isFunction } from '@vben-core/shared/utils';
 
 import { useFormValues } from 'vee-validate';
 
@@ -74,12 +74,18 @@ export default function useDependencies(
         isIf.value = !!(await whenIf(formValues, formApi));
         // 不渲染
         if (!isIf.value) return;
+      } else if (isBoolean(whenIf)) {
+        isIf.value = whenIf;
+        if (!isIf.value) return;
       }
 
       // 2. 判断show，如果show为false，则隐藏
       if (isFunction(show)) {
         isShow.value = !!(await show(formValues, formApi));
         if (!isShow.value) return;
+      } else if (isBoolean(show)) {
+        isShow.value = show;
+        if (!isShow.value) return;
       }
 
       if (isFunction(componentProps)) {
@@ -92,6 +98,8 @@ export default function useDependencies(
 
       if (isFunction(disabled)) {
         isDisabled.value = !!(await disabled(formValues, formApi));
+      } else if (isBoolean(disabled)) {
+        isDisabled.value = disabled;
       }
 
       if (isFunction(required)) {

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

@@ -85,7 +85,15 @@ const currentRules = computed(() => {
   return dynamicRules.value || rules;
 });
 
+const visible = computed(() => {
+  return isIf.value && isShow.value;
+});
+
 const shouldRequired = computed(() => {
+  if (!visible.value) {
+    return false;
+  }
+
   if (!currentRules.value) {
     return isRequired.value;
   }
@@ -113,6 +121,10 @@ const shouldRequired = computed(() => {
 });
 
 const fieldRules = computed(() => {
+  if (!visible.value) {
+    return null;
+  }
+
   let rules = currentRules.value;
   if (!rules) {
     return isRequired.value ? 'required' : null;

packages/@core/ui-kit/form-ui/src/types.ts

@@ -88,12 +88,12 @@ export interface FormItemDependencies {
    * 是否禁用
    * @returns 是否禁用
    */
-  disabled?: FormItemDependenciesCondition;
+  disabled?: boolean | FormItemDependenciesCondition;
   /**
    * 是否渲染（删除dom）
    * @returns 是否渲染
    */
-  if?: FormItemDependenciesCondition;
+  if?: boolean | FormItemDependenciesCondition;
   /**
    * 是否必填
    * @returns 是否必填
@@ -107,7 +107,7 @@ export interface FormItemDependencies {
    * 是否隐藏(Css)
    * @returns 是否隐藏
    */
-  show?: FormItemDependenciesCondition;
+  show?: boolean | FormItemDependenciesCondition;
   /**
    * 任意触发都会执行
    */
@@ -141,7 +141,7 @@ export interface FormCommonConfig {
   disabled?: boolean;
   /**
    * 所有表单项的控件样式
-   * @default ""
+   * @default {}
    */
   formFieldProps?: Partial<typeof Field>;
   /**
@@ -161,7 +161,7 @@ export interface FormCommonConfig {
   hideRequiredMark?: boolean;
   /**
    * 所有表单项的label样式
-   * @default "w-[100px]"
+   * @default ""
    */
   labelClass?: string;
   /**
@@ -295,6 +295,7 @@ export interface VbenFormProps<
 
   /**
    * 是否显示默认操作按钮
+   * @default true
    */
   showDefaultActions?: boolean;