fix(@vben-core/form-ui)!: group field slot component props (#8215)

* refactor(@vben-core/form-ui)!: group field slot component props

* fix(@vben-core/form-ui): stabilize grouped field slot bindings

Resolve function-based common component props with field context.

Preserve internal model and event bindings when custom field slots spread componentProps.

Add regression coverage for array contexts, disabled precedence, and stale binding isolation.

* feat(@vben/vite-config): warn about field slot migration

Print the temporary field-slot migration warning when the development server starts.

Inject the same message into the browser console and keep the plugin serve-only.

* docs(@vben/docs): document field slot migration

Place the breaking field-slot notice at the start of both form documents.

Explain old and new bindings, development warnings, and planned notice removal.

* feat(@vben/playground): extend custom form example

Add a switchable input and select field to demonstrate schema component updates.

Update the composite phone field to emit new tuple values so validation observes changes.

internal/vite-config/src/plugins/form-field-slot-migration-warning.test.ts

@@ -0,0 +1,43 @@
+import type { ResolvedConfig } from 'vite';
+
+import { describe, expect, it, vi } from 'vitest';
+
+import {
+  FORM_FIELD_SLOT_MIGRATION_WARNING,
+  viteFormFieldSlotMigrationWarningPlugin,
+} from './form-field-slot-migration-warning';
+
+describe('form field slot migration warning plugin', () => {
+  it('warns in serve mode and injects the same browser message', () => {
+    const plugin = viteFormFieldSlotMigrationWarningPlugin();
+    const warning = vi.fn();
+
+    expect(plugin.apply).toBe('serve');
+    expect(plugin.configResolved).toBeTypeOf('function');
+    if (typeof plugin.configResolved !== 'function') return;
+
+    plugin.configResolved({ logger: { warn: warning } } as ResolvedConfig);
+
+    expect(warning).toHaveBeenCalledOnce();
+    expect(warning).toHaveBeenCalledWith(FORM_FIELD_SLOT_MIGRATION_WARNING);
+    expect(plugin.transformIndexHtml).toBeTypeOf('function');
+    if (typeof plugin.transformIndexHtml !== 'function') return;
+
+    const result = plugin.transformIndexHtml('', {} as never);
+
+    expect(result).toEqual([
+      {
+        attrs: {
+          'data-vben-form-field-slot-migration-warning': '',
+        },
+        children: `console.warn(${JSON.stringify(FORM_FIELD_SLOT_MIGRATION_WARNING)});`,
+        injectTo: 'body',
+        tag: 'script',
+      },
+    ]);
+    expect(FORM_FIELD_SLOT_MIGRATION_WARNING).toContain('`v-bind="slotProps"`');
+    expect(FORM_FIELD_SLOT_MIGRATION_WARNING).toContain(
+      '`v-bind="slotProps.componentProps"`',
+    );
+  });
+});

internal/vite-config/src/plugins/form-field-slot-migration-warning.ts

@@ -0,0 +1,31 @@
+import type { Plugin } from 'vite';
+
+const FORM_FIELD_SLOT_MIGRATION_WARNING =
+  '[Vben Form] BREAKING CHANGE: Named field slot control bindings moved to `slotProps.componentProps`. Replace `v-bind="slotProps"` with `v-bind="slotProps.componentProps"`. See https://doc.vben.pro/components/common-ui/vben-form.html';
+
+function viteFormFieldSlotMigrationWarningPlugin(): Plugin {
+  return {
+    apply: 'serve',
+    configResolved(config) {
+      config.logger.warn(FORM_FIELD_SLOT_MIGRATION_WARNING);
+    },
+    name: 'vite:form-field-slot-migration-warning',
+    transformIndexHtml() {
+      return [
+        {
+          attrs: {
+            'data-vben-form-field-slot-migration-warning': '',
+          },
+          children: `console.warn(${JSON.stringify(FORM_FIELD_SLOT_MIGRATION_WARNING)});`,
+          injectTo: 'body',
+          tag: 'script',
+        },
+      ];
+    },
+  };
+}
+
+export {
+  FORM_FIELD_SLOT_MIGRATION_WARNING,
+  viteFormFieldSlotMigrationWarningPlugin,
+};

internal/vite-config/src/plugins/index.ts

@@ -20,6 +20,7 @@ import viteVueDevTools from 'vite-plugin-vue-devtools';
 import { viteArchiverPlugin } from './archiver';
 import { viteDayjsPlugin } from './dayjs';
 import { viteExtraAppConfigPlugin } from './extra-app-config';
+import { viteFormFieldSlotMigrationWarningPlugin } from './form-field-slot-migration-warning';
 import { viteHtmlPlugin } from './html';
 import { viteImportMapPlugin } from './importmap';
 import { viteInjectAppLoadingPlugin } from './inject-app-loading';
@@ -144,6 +145,10 @@ async function loadApplicationPlugins(
         return [await vitePrintPlugin({ infoMap: printInfoMap })];
       },
     },
+    {
+      condition: !isBuild,
+      plugins: () => [viteFormFieldSlotMigrationWarningPlugin()],
+    },
     {
       condition: vxeTableLazyImport,
       plugins: async () => {