Feat/wing pr

apps/web-antd/src/adapter/form.ts

@@ -36,6 +36,12 @@ setupVbenForm<ComponentType>({
       }
       return true;
     },
+    multipleRequired: (value, _params, ctx) => {
+      if (value === undefined || value === null || value.length === 0) {
+        return $t('ui.formRules.selectRequired', [ctx.label]);
+      }
+      return true;
+    },
   },
 });
 

apps/web-ele/src/adapter/form.ts

@@ -28,6 +28,12 @@ setupVbenForm<ComponentType>({
       }
       return true;
     },
+    multipleRequired: (value, _params, ctx) => {
+      if (value === undefined || value === null || value.length === 0) {
+        return $t('ui.formRules.selectRequired', [ctx.label]);
+      }
+      return true;
+    },
   },
 });
 

apps/web-naive/src/adapter/form.ts

@@ -32,6 +32,12 @@ setupVbenForm<ComponentType>({
       }
       return true;
     },
+    multipleRequired: (value, _params, ctx) => {
+      if (value === undefined || value === null || value.length === 0) {
+        return $t('ui.formRules.selectRequired', [ctx.label]);
+      }
+      return true;
+    },
   },
 });
 

docs/src/_env/adapter/form.ts

@@ -24,6 +24,12 @@ setupVbenForm<ComponentType>({
     },
   },
   defineRules: {
+    multipleRequired: (value, _params, ctx) => {
+      if (value === undefined || value === null || value.length === 0) {
+        return $t('ui.formRules.selectRequired', [ctx.label]);
+      }
+      return true;
+    },
     required: (value, _params, ctx) => {
       if (value === undefined || value === null || value.length === 0) {
         return $t('ui.formRules.required', [ctx.label]);

docs/src/components/common-ui/vben-form.md

@@ -48,6 +48,12 @@ setupVbenForm<ComponentType>({
     },
   },
   defineRules: {
+    multipleRequired: (value, _params, ctx) => {
+      if (value === undefined || value === null || value.length === 0) {
+        return $t('ui.formRules.selectRequired', [ctx.label]);
+      }
+      return true;
+    },
     // 输入项目必填国际化适配
     required: (value, _params, ctx) => {
       if (value === undefined || value === null || value.length === 0) {
@@ -359,6 +365,10 @@ export interface ActionButtonOptions {
 
 ```ts
 export interface FormCommonConfig {
+  /**
+   * 是否自动赋值
+   */
+  autoDefaultValue?: boolean;
   /**
    * 所有表单项的props
    */

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

@@ -3,7 +3,7 @@ import type { ZodType } from 'zod';
 
 import type { FormSchema, MaybeComponentProps } from '../types';
 
-import { computed, nextTick, useTemplateRef, watch } from 'vue';
+import { computed, nextTick, onMounted, useTemplateRef, watch } from 'vue';
 
 import {
   FormControl,
@@ -26,10 +26,12 @@ import { isEventObjectLike } from './helper';
 interface Props extends FormSchema {}
 
 const {
+  autoDefaultValue = false,
   colon,
   commonComponentProps,
   component,
   componentProps,
+  defaultValue,
   dependencies,
   description,
   disabled,
@@ -109,7 +111,9 @@ const shouldRequired = computed(() => {
   }
 
   if (isString(currentRules.value)) {
-    return ['required', 'selectRequired'].includes(currentRules.value);
+    return ['multipleRequired', 'required', 'selectRequired'].includes(
+      currentRules.value,
+    );
   }
 
   let isOptional = currentRules?.value?.isOptional?.();
@@ -161,6 +165,16 @@ const computedProps = computed(() => {
     ...dynamicComponentProps.value,
   };
 });
+const computedItemProps = computed(() => {
+  const finalComponentProps = isFunction(componentProps)
+    ? componentProps(values.value, formApi!)
+    : componentProps;
+
+  return {
+    ...finalComponentProps,
+    ...dynamicComponentProps.value,
+  };
+});
 
 watch(
   () => computedProps.value?.autofocus,
@@ -199,6 +213,23 @@ const fieldProps = computed(() => {
   };
 });
 
+onMounted(() => {
+  if (
+    autoDefaultValue &&
+    Reflect.has(commonComponentProps, 'change') &&
+    defaultValue
+  ) {
+    const value = (formApi && formApi.values[fieldName]) ?? defaultValue;
+    commonComponentProps.change(value, {
+      e: value,
+      ...computedProps.value,
+      emptyStateValue,
+      formApi,
+      name: fieldName,
+    });
+  }
+});
+
 function fieldBindEvent(slotProps: Record<string, any>) {
   const modelValue = slotProps.componentField.modelValue;
   const handler = slotProps.componentField['onUpdate:modelValue'];
@@ -208,6 +239,19 @@ function fieldBindEvent(slotProps: Record<string, any>) {
     (isString(component) ? componentBindEventMap.value?.[component] : null);
 
   let value = modelValue;
+
+  const change = (...e: any) => {
+    handler(...e);
+    if (Reflect.has(commonComponentProps, 'change')) {
+      commonComponentProps.change(e[0], {
+        e,
+        ...slotProps.componentField,
+        ...computedProps.value,
+        [bindEventField || '']: value === undefined ? emptyStateValue : value,
+        formApi,
+      });
+    }
+  };
   // antd design 的一些组件会传递一个 event 对象
   if (modelValue && isObject(modelValue) && bindEventField) {
     value = isEventObjectLike(modelValue)
@@ -217,7 +261,7 @@ function fieldBindEvent(slotProps: Record<string, any>) {
 
   if (bindEventField) {
     return {
-      [`onUpdate:${bindEventField}`]: handler,
+      [`onUpdate:${bindEventField}`]: change,
       [bindEventField]: value === undefined ? emptyStateValue : value,
       onChange: disabledOnChangeListener
         ? undefined
@@ -241,17 +285,42 @@ function fieldBindEvent(slotProps: Record<string, any>) {
 
 function createComponentProps(slotProps: Record<string, any>) {
   const bindEvents = fieldBindEvent(slotProps);
-
-  const binds = {
+  const assginData = {
     ...slotProps.componentField,
     ...computedProps.value,
     ...bindEvents,
+  };
+
+  const change = (key: string, value: any, ...e: any) => {
+    if (!Reflect.has(assginData, key)) return;
+    (assginData as any)[key](...e);
+
+    nextTick(() => {
+      if (Reflect.has(computedItemProps.value, 'change')) {
+        computedItemProps.value.change(value, {
+          e,
+          ...slotProps.componentField,
+          ...computedProps.value,
+          ...bindEvents,
+          formApi,
+        });
+      }
+    });
+  };
+  const binds = {
+    ...assginData,
     ...(Reflect.has(computedProps.value, 'onChange')
-      ? { onChange: computedProps.value.onChange }
+      ? { onChange: (...e: any) => change('onChange', e[0], ...e) }
       : {}),
     ...(Reflect.has(computedProps.value, 'onInput')
-      ? { onInput: computedProps.value.onInput }
+      ? { onInput: (...e: any) => change('onInput', e[0], ...e) }
       : {}),
+    'onUpdate:modelValue': (...e: any) => {
+      change('onUpdate:modelValue', e[0], ...e);
+    },
+    'onUpdate:value': (...e: any) => {
+      change('onUpdate:value', e[0], ...e);
+    },
   };
 
   return binds;

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

@@ -85,6 +85,7 @@ const computedSchema = computed(
     formFieldProps: Record<string, any>;
   })[] => {
     const {
+      autoDefaultValue = false,
       colon = false,
       componentProps = {},
       controlClass = '',
@@ -111,6 +112,7 @@ const computedSchema = computed(
           : false;
 
       return {
+        autoDefaultValue,
         colon,
         disabled,
         disabledOnChangeListener,

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

@@ -137,6 +137,10 @@ type ComponentProps =
   | MaybeComponentProps;
 
 export interface FormCommonConfig {
+  /**
+   * 是否自动赋值
+   */
+  autoDefaultValue?: boolean;
   /**
    * 在Label后显示一个冒号
    */
@@ -395,6 +399,11 @@ export interface VbenFormAdapterOptions<
     modelPropNameMap?: Partial<Record<T, string>>;
   };
   defineRules?: {
+    multipleRequired?: (
+      value: any,
+      params: any,
+      ctx: Record<string, any>,
+    ) => boolean | string;
     required?: (
       value: any,
       params: any,

packages/@core/ui-kit/shadcn-ui/src/components/pin-input/input.vue

@@ -14,7 +14,9 @@ const {
   codeLength = 6,
   createText = async () => {},
   disabled = false,
-  handleSendCode = async () => {},
+  handleSendCode = async () => {
+    return true;
+  },
   loading = false,
   maxTime = 60,
 } = defineProps<PinInputProps>();
@@ -59,7 +61,8 @@ function handleComplete(e: string[]) {
 async function handleSend(e: Event) {
   try {
     e?.preventDefault();
-    await handleSendCode();
+    const bool = await handleSendCode();
+    if (!bool) return;
     countdown.value = maxTime;
     startCountdown();
   } catch (error) {

playground/src/adapter/form.ts

@@ -21,6 +21,12 @@ setupVbenForm<ComponentType>({
     },
   },
   defineRules: {
+    multipleRequired: (value, _params, ctx) => {
+      if (value === undefined || value === null || value.length === 0) {
+        return $t('ui.formRules.selectRequired', [ctx.label]);
+      }
+      return true;
+    },
     // 输入项目必填国际化适配
     required: (value, _params, ctx) => {
       if (value === undefined || value === null || value.length === 0) {