fix: fix lint and add new form-ui features

feat(form-ui): 在 dependencies 里提供访问extendApi的能力

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

@@ -1,16 +1,18 @@
 import type {
+  ExtendedFormApi,
   FormItemDependencies,
   FormSchemaRuleType,
   MaybeComponentProps,
 } from '../types';
 
-import { computed, ref, watch } from 'vue';
+import { computed, isRef, ref, watch } from 'vue';
 
 import { get, isBoolean, isFunction } from '@vben-core/shared/utils';
 
 import { useFormValues } from 'vee-validate';
 
 import { resolveFieldNamePath } from '../field-name';
+import { injectFormProps } from '../use-form-context';
 import { injectRenderFormProps } from './context';
 
 /**
@@ -37,6 +39,13 @@ export default function useDependencies(
   const values = useFormValues();
 
   const formRenderProps = injectRenderFormProps();
+  const [extendApi] = injectFormProps();
+
+  // 在 dependencies 里提供访问extendApi的能力
+  const controller: ExtendedFormApi = isRef(extendApi)
+    ? (extendApi.value.formApi as ExtendedFormApi)
+    : (extendApi.formApi as ExtendedFormApi);
+
   const formApi = formRenderProps.form;
 
   if (!formApi) {
@@ -92,7 +101,7 @@ export default function useDependencies(
       const formValues = values.value;
 
       if (isFunction(whenIf)) {
-        isIf.value = !!(await whenIf(formValues, formApi));
+        isIf.value = !!(await whenIf(formValues, formApi, controller));
         // 不渲染
         if (!isIf.value) return;
       } else if (isBoolean(whenIf)) {
@@ -102,31 +111,35 @@ export default function useDependencies(
 
       // 2. 判断show，如果show为false，则隐藏
       if (isFunction(show)) {
-        isShow.value = !!(await show(formValues, formApi));
+        isShow.value = !!(await show(formValues, formApi, controller));
       } else if (isBoolean(show)) {
         isShow.value = show;
       }
 
       if (isFunction(componentProps)) {
-        dynamicComponentProps.value = await componentProps(formValues, formApi);
+        dynamicComponentProps.value = await componentProps(
+          formValues,
+          formApi,
+          controller,
+        );
       }
 
       if (isFunction(rules)) {
-        dynamicRules.value = await rules(formValues, formApi);
+        dynamicRules.value = await rules(formValues, formApi, controller);
       }
 
       if (isFunction(disabled)) {
-        isDisabled.value = !!(await disabled(formValues, formApi));
+        isDisabled.value = !!(await disabled(formValues, formApi, controller));
       } else if (isBoolean(disabled)) {
         isDisabled.value = disabled;
       }
 
       if (isFunction(required)) {
-        isRequired.value = !!(await required(formValues, formApi));
+        isRequired.value = !!(await required(formValues, formApi, controller));
       }
 
       if (isFunction(trigger)) {
-        trigger(formValues, formApi);
+        trigger(formValues, formApi, controller);
       }
     },
     { deep: true, immediate: true },

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

@@ -3,6 +3,7 @@ export { setupVbenForm } from './config';
 export type {
   BaseFormComponentType,
   ExtendedFormApi,
+  FormLayout,
   VbenFormProps,
   FormSchema as VbenFormSchema,
 } from './types';

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

@@ -85,16 +85,19 @@ export type FormSchemaRuleType =
 type FormItemDependenciesCondition<T = boolean | PromiseLike<boolean>> = (
   value: Partial<Record<string, any>>,
   actions: FormActions,
+  controller: ExtendedFormApi, // 在 dependencies 里提供访问extendApi的能力
 ) => T;
 
 type FormItemDependenciesConditionWithRules = (
   value: Partial<Record<string, any>>,
   actions: FormActions,
+  controller: ExtendedFormApi, // 在 dependencies 里提供访问extendApi的能力
 ) => FormSchemaRuleType | PromiseLike<FormSchemaRuleType>;
 
 type FormItemDependenciesConditionWithProps = (
   value: Partial<Record<string, any>>,
   actions: FormActions,
+  controller: ExtendedFormApi, // 在 dependencies 里提供访问extendApi的能力
 ) => MaybeComponentProps | PromiseLike<MaybeComponentProps>;
 
 export interface FormItemDependencies {
@@ -147,6 +150,7 @@ type ComponentProps =
 export interface FormCommonConfig {
   /**
    * 是否可折叠的
+   * @default false
    */
   collapsible?: boolean;
   /**

packages/@core/ui-kit/shadcn-ui/src/components/collapsible/collapsible-params-item.vue

@@ -49,6 +49,27 @@ const FieldComponent = computed(() => {
   }
 });
 
+const limitDisplay = computed(() => {
+  if (
+    props.data.option.min !== null &&
+    props.data.option.min !== undefined &&
+    props.data.option.max !== null &&
+    props.data.option.max !== undefined
+  ) {
+    return `[${props.data.option.min},${props.data.option.max}]`;
+  }
+
+  if (props.data.option.min !== null && props.data.option.min !== undefined) {
+    return `min:${props.data.option.min}`;
+  }
+
+  if (props.data.option.max !== null && props.data.option.max !== undefined) {
+    return `max:${props.data.option.max}`;
+  }
+
+  return '';
+});
+
 function reset() {
   modelValue.value = props.data.defaultValue;
 }
@@ -78,8 +99,8 @@ defineExpose({
         />
       </div>
       <div class="flex items-center flex-none text-muted-foreground pl-2 gap-2">
-        <span v-if="data.option.min && data.option.max">
-          [{{ data.option.min }},{{ data.option.max }}]
+        <span v-if="limitDisplay">
+          {{ limitDisplay }}
         </span>
         <span v-if="data.option.step && data.option.step !== 1">
           step:{{ data.option.step }}

packages/@core/ui-kit/shadcn-ui/src/components/collapsible/collapsible-params.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { Recordable } from '@vben-core/typings';
+
 import type { CollapsibleParamSchema } from './type';
 
 import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
@@ -29,7 +31,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emits = defineEmits<{ 'update:value': [any, string] }>();
 
-const modelValue = defineModel('value');
+const modelValue = defineModel('value', {
+  default: {} as Recordable<CollapsibleParamSchema['defaultValue']>,
+});
+
 const visibleRefs = useTemplateRef('visibleRefs');
 const collapsibleRefs = useTemplateRef('collapsibleRefs');
 
@@ -59,11 +64,13 @@ const bodyStyle = computed(() => {
 });
 
 function init(force = false) {
-  const nextValue = { ...modelValue.value };
+  const nextValue: Recordable<CollapsibleParamSchema['defaultValue']> = {
+    ...modelValue.value,
+  };
 
   for (const param of props.params) {
     if (force || nextValue[param.key] === undefined) {
-      nextValue[param.key] = param.defaultValue ?? null;
+      nextValue[param.key] = param.defaultValue ?? undefined;
     }
   }
 
@@ -74,25 +81,40 @@ function toggleCollapsed() {
   open.value = !open.value;
 }
 
-async function onParamValueChange(value: any, key: string) {
+async function onParamValueChange(_: any, key: string) {
   await nextTick();
   emits('update:value', modelValue.value, key);
 }
 
-function resetValue() {
+function resetValues() {
   if (visibleRefs.value)
     for (const rowRef of visibleRefs.value) {
-      rowRef.reset();
+      rowRef?.reset();
     }
 
   if (collapsibleRefs.value)
     for (const rowRef of collapsibleRefs.value) {
-      rowRef.reset();
+      rowRef?.reset();
     }
 
   init(true);
 }
 
+function updateValues(
+  values: Recordable<CollapsibleParamSchema['defaultValue']>,
+) {
+  const newValue = {} as Recordable<CollapsibleParamSchema['defaultValue']>;
+
+  for (const key in values) {
+    if (!Object.hasOwn(values, key)) continue;
+    if (!Object.hasOwn(modelValue.value, key)) continue;
+
+    newValue[key] = values[key];
+
+    modelValue.value = { ...modelValue.value, ...newValue };
+  }
+}
+
 watch(
   () => props.params,
   () => init(),
@@ -101,7 +123,8 @@ watch(
 
 defineExpose({
   toggleCollapsed,
-  resetValue,
+  resetValues,
+  updateValues,
 });
 </script>