docs: update docs (#4466)

* chore: fixed known issues with form components

* docs: add vben form doc

packages/@core/base/shared/src/utils/__tests__/inference.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
 
 import {
   getFirstNonNullOrUndefined,
+  isBoolean,
   isEmpty,
   isHttpUrl,
   isObject,
@@ -96,6 +97,21 @@ describe('isWindow', () => {
   });
 });
 
+describe('isBoolean', () => {
+  it('should return true for boolean values', () => {
+    expect(isBoolean(true)).toBe(true);
+    expect(isBoolean(false)).toBe(true);
+  });
+
+  it('should return false for non-boolean values', () => {
+    expect(isBoolean(null)).toBe(false);
+    expect(isBoolean(42)).toBe(false);
+    expect(isBoolean('string')).toBe(false);
+    expect(isBoolean({})).toBe(false);
+    expect(isBoolean([])).toBe(false);
+  });
+});
+
 describe('isObject', () => {
   it('should return true for objects', () => {
     expect(isObject({})).toBe(true);

packages/@core/base/shared/src/utils/inference.ts

@@ -10,6 +10,15 @@ function isUndefined(value?: unknown): value is undefined {
   return value === undefined;
 }
 
+/**
+ * 检查传入的值是否为boolean
+ * @param value
+ * @returns 如果值是布尔值，返回true，否则返回false。
+ */
+function isBoolean(value: unknown): value is boolean {
+  return typeof value === 'boolean';
+}
+
 /**
  * 检查传入的值是否为空。
  *
@@ -141,6 +150,7 @@ function getFirstNonNullOrUndefined<T>(
 
 export {
   getFirstNonNullOrUndefined,
+  isBoolean,
   isEmpty,
   isFunction,
   isHttpUrl,

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;
 

packages/effects/common-ui/src/components/captcha/point-selection-captcha/index.vue

@@ -162,11 +162,11 @@ function handleConfirm() {
         v-if="hintImage"
         :alt="$t('ui.captcha.alt')"
         :src="hintImage"
-        class="h-10 w-full rounded border border-solid border-slate-200"
+        class="border-border h-10 w-full rounded border"
       />
       <div
         v-else-if="hintText"
-        class="flex h-10 w-full items-center justify-center rounded border border-solid border-slate-200"
+        class="border-border flex-center h-10 w-full rounded border"
       >
         {{ `${$t('ui.captcha.clickInOrder')}` + `【${hintText}】` }}
       </div>

packages/effects/common-ui/src/components/index.ts

@@ -5,4 +5,11 @@ export * from '@vben-core/form-ui';
 export * from '@vben-core/popup-ui';
 
 // 给文档用
-export { VbenButton } from '@vben-core/shadcn-ui';
+export {
+  VbenButton,
+  VbenCountToAnimator,
+  VbenInputPassword,
+  VbenLoading,
+  VbenPinInput,
+  VbenSpinner,
+} from '@vben-core/shadcn-ui';

packages/effects/layouts/src/widgets/notification/notification.vue

@@ -81,6 +81,7 @@ function handleClick(item: NotificationItem) {
       <div class="flex items-center justify-between p-4 py-3">
         <div class="text-foreground">{{ $t('widgets.notifications') }}</div>
         <VbenIconButton
+          :disabled="notifications.length <= 0"
           :tooltip="$t('widgets.markAllAsRead')"
           @click="handleMakeAll"
         >
@@ -131,7 +132,12 @@ function handleClick(item: NotificationItem) {
       <div
         class="border-border flex items-center justify-between border-t px-4 py-3"
       >
-        <VbenButton size="sm" variant="ghost" @click="handleClear">
+        <VbenButton
+          :disabled="notifications.length <= 0"
+          size="sm"
+          variant="ghost"
+          @click="handleClear"
+        >
           {{ $t('widgets.clearNotifications') }}
         </VbenButton>
         <VbenButton size="sm" @click="handleViewAll">