refactor(@vben-core/form-ui): migrate to Zod 4 and TanStack Form (#8176)

* build(@vben-core/form-ui): update form validation dependencies

* refactor(@vben-core/form-ui): replace vee-validate with TanStack Form

* test(@vben-core/form-ui): cover TanStack Form migration

* docs(@vben/docs): document Zod 4 form migration

* refactor(project): update form adapters

* refactor(project): migrate application form consumers

* refactor(@vben/playground): migrate form examples

* docs(@vben/docs): fix validate return type and required rule empty check in form docs

* fix(@vben-core/form-ui): resolve oxlint and eslint errors

- rewrite nested ternary expressions as if/else in form-field-array.vue and form-runtime.ts
- sort @tanstack/vue-form before @vben-core/composables in package.json

* chore: fix merge artifacts and formatting

- move dependencies before devDependencies in root package.json
- update preferences snapshot for widget positioning fields
- format form-array demo README

* refactor(@vben-core/form-ui): optimize form runtime and value flow

- add fine-grained field selectors and atomic dependency resolution
- expose raw and formatted value snapshots with focused regression coverage

* fix(@vben/layouts): dispose sortable instance on unmount

* docs(@vben/docs): document form runtime API changes

- list added, changed, removed, and deprecated form APIs
- document atomic dependencies and raw versus formatted values

packages/effects/common-ui/src/ui/profile/notification-setting.vue

@@ -4,7 +4,6 @@ import type { Recordable } from '@vben/types';
 import type { SettingProps } from './types';
 
 import {
-  Form,
   FormControl,
   FormDescription,
   FormField,
@@ -26,7 +25,7 @@ function handleChange(fieldName: string, value: boolean) {
 }
 </script>
 <template>
-  <Form class="space-y-8">
+  <form class="space-y-8">
     <div class="space-y-4">
       <template v-for="item in formSchema" :key="item.fieldName">
         <FormField type="checkbox" :name="item.fieldName">
@@ -49,5 +48,5 @@ function handleChange(fieldName: string, value: boolean) {
         </FormField>
       </template>
     </div>
-  </Form>
+  </form>
 </template>

packages/effects/common-ui/src/ui/profile/security-setting.vue

@@ -4,7 +4,6 @@ import type { Recordable } from '@vben/types';
 import type { SettingProps } from './types';
 
 import {
-  Form,
   FormControl,
   FormDescription,
   FormField,
@@ -26,7 +25,7 @@ function handleChange(fieldName: string, value: boolean) {
 }
 </script>
 <template>
-  <Form class="space-y-8">
+  <form class="space-y-8">
     <div class="space-y-4">
       <template v-for="item in formSchema" :key="item.fieldName">
         <FormField type="checkbox" :name="item.fieldName">
@@ -49,5 +48,5 @@ function handleChange(fieldName: string, value: boolean) {
         </FormField>
       </template>
     </div>
-  </Form>
+  </form>
 </template>

packages/effects/layouts/src/widgets/lock-screen/lock-screen-modal.vue

@@ -41,7 +41,7 @@ const [Form, { resetForm, validate, getValues, getFieldComponentRef }] =
             placeholder: $t('ui.widgets.lockScreen.placeholder'),
           },
           fieldName: 'lockScreenPassword',
-          formFieldProps: { validateOnBlur: false },
+          formFieldProps: { validateOn: ['change'] as const },
           label: $t('authentication.password'),
           rules: z
             .string()

packages/effects/layouts/src/widgets/preferences/blocks/draggable-list.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SelectOption } from '@vben/types';
 
-import { computed, nextTick, onMounted, ref } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
 
 import { GripVertical } from '@vben/icons';
 import { $t } from '@vben/locales';
@@ -62,6 +62,10 @@ function initSortable() {
 }
 
 onMounted(initSortable);
+onUnmounted(() => {
+  sortableInstance?.destroy();
+  sortableInstance = null;
+});
 
 function setPosition(key: string, event: Event) {
   const value = (event.target as HTMLSelectElement).value as

packages/effects/plugins/src/vxe-table/use-vxe-grid.vue

@@ -131,7 +131,7 @@ const [Form, formApi] = useTableForm({
   },
   handleReset: async () => {
     const prevValues = await formApi.getValues();
-    await formApi.resetForm();
+    await formApi.reset();
     const formValues = await formApi.getValues();
     formApi.setLatestSubmissionValues(formValues);
     // 如果值发生了变化，submitOnChange会触发刷新。所以只在submitOnChange为false或者值没有发生变化时，手动刷新