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
This commit is contained in:
dream-weave
2026-07-22 19:47:07 +08:00
committed by GitHub
parent 6b6708bcf2
commit 28757fb9c8
81 changed files with 4683 additions and 1435 deletions

180
pnpm-lock.yaml generated
View File

@@ -75,6 +75,9 @@ catalogs:
'@tailwindcss/vite':
specifier: ^4.3.3
version: 4.3.3
'@tanstack/vue-form':
specifier: ^1.33.2
version: 1.33.2
'@tanstack/vue-query':
specifier: ^5.101.2
version: 5.101.4
@@ -153,9 +156,6 @@ catalogs:
'@typescript-eslint/parser':
specifier: ^8.64.0
version: 8.65.0
'@vee-validate/zod':
specifier: ^4.15.1
version: 4.15.1
'@vite-pwa/vitepress':
specifier: ^1.1.0
version: 1.1.0
@@ -450,9 +450,6 @@ catalogs:
unplugin-vue:
specifier: ^7.2.0
version: 7.2.0
vee-validate:
specifier: ^4.15.1
version: 4.15.1
vite:
specifier: ^8.1.5
version: 8.1.5
@@ -508,11 +505,11 @@ catalogs:
specifier: ^2.1.0
version: 2.1.0
zod:
specifier: ^3.25.76
version: 3.25.76
specifier: ^4.4.3
version: 4.4.3
zod-defaults:
specifier: 0.1.3
version: 0.1.3
specifier: ^0.2.3
version: 0.2.3
overrides:
'@ast-grep/napi': ^0.44.1
@@ -524,6 +521,10 @@ overrides:
importers:
.:
dependencies:
sortablejs:
specifier: 'catalog:'
version: 1.15.7
devDependencies:
'@changesets/changelog-github':
specifier: 'catalog:'
@@ -1399,6 +1400,9 @@ importers:
packages/@core/ui-kit/form-ui:
dependencies:
'@tanstack/vue-form':
specifier: 'catalog:'
version: 1.33.2(vue@3.5.40(typescript@6.0.3))
'@vben-core/composables':
specifier: workspace:*
version: link:../../composables
@@ -1414,25 +1418,22 @@ importers:
'@vben-core/typings':
specifier: workspace:*
version: link:../../base/typings
'@vee-validate/zod':
specifier: 'catalog:'
version: 4.15.1(vue@3.5.40(typescript@6.0.3))(zod@3.25.76)
'@vueuse/core':
specifier: 'catalog:'
version: 14.3.0(vue@3.5.40(typescript@6.0.3))
vee-validate:
specifier: 'catalog:'
version: 4.15.1(vue@3.5.40(typescript@6.0.3))
vue:
specifier: ^3.5.40
version: 3.5.40(typescript@6.0.3)
zod:
specifier: 'catalog:'
version: 3.25.76
version: 4.4.3
zod-defaults:
specifier: 'catalog:'
version: 0.1.3(zod@3.25.76)
version: 0.2.3(zod@4.4.3)
devDependencies:
'@vue/test-utils':
specifier: 'catalog:'
version: 2.4.11(@vue/compiler-dom@3.5.40)(@vue/server-renderer@3.5.40)(vue@3.5.40(typescript@6.0.3))
unplugin-vue:
specifier: 'catalog:'
version: 7.2.0(@types/node@26.1.1)(esbuild@0.28.1)(jiti@2.7.0)(less@4.7.0(supports-color@10.2.2))(rolldown@1.2.0)(rollup@4.62.2)(sass-embedded@1.100.0)(sass@1.101.3)(terser@5.49.0)(vue@3.5.40(typescript@6.0.3))(yaml@2.9.0)
@@ -1562,9 +1563,6 @@ importers:
reka-ui:
specifier: 'catalog:'
version: 2.10.1(vue@3.5.40(typescript@6.0.3))
vee-validate:
specifier: 'catalog:'
version: 4.15.1(vue@3.5.40(typescript@6.0.3))
vue:
specifier: ^3.5.40
version: 3.5.40(typescript@6.0.3)
@@ -5183,10 +5181,22 @@ packages:
peerDependencies:
vite: ^5.2.0 || ^6 || ^7 || ^8
'@tanstack/devtools-event-client@0.4.4':
resolution: {integrity: sha512-6T5Yop/793YI+H+5J8Hsyj4kCih9sl4t3ElLgKioW5hk3ocn+ZdSJ94tT7vL7uabxSugWYBZlOTMPzEw2puvQw==}
engines: {node: '>=18'}
hasBin: true
'@tanstack/form-core@1.33.2':
resolution: {integrity: sha512-F60zJd15bGrXKonc1kpRYnNRNfiES7F+hgvrPMrsZznPLqZtO2DIg76OU6R25kCYkqYQY5xvuKteuWcUsc587A==}
'@tanstack/match-sorter-utils@8.19.4':
resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
engines: {node: '>=12'}
'@tanstack/pacer-lite@0.1.1':
resolution: {integrity: sha512-y/xtNPNt/YeyoVxE/JCx+T7yjEzpezmbb+toK8DDD1P4m7Kzs5YR956+7OKexG3f8aXgC3rLZl7b1V+yNUSy5w==}
engines: {node: '>=18'}
'@tanstack/query-core@5.101.4':
resolution: {integrity: sha512-gNwcvOJcRbLWPOLG/2OBm+zM+Yv+MKsXKEOWC57USuZDEsI71hEErQsiEGx5wX9rzWWkfwM0fVSPoiIFSsxfiw==}
@@ -5196,6 +5206,11 @@ packages:
'@tanstack/virtual-core@3.17.5':
resolution: {integrity: sha512-AXfBC3sq6PuYSwyxYORqqgHCNjPGAvKJvZuBBJ1klhztWBB5cgqgwsq8+fNfaQJG7/K4xYBja9S90QFn2zmQAg==}
'@tanstack/vue-form@1.33.2':
resolution: {integrity: sha512-yolxEs4XSQu2RhBpM48YgqmmpftR4v28XniH5UjGg9/Z3WOJAv+COSmWwC64ozs2OZIKF+j5ufu1ki62jtP6nA==}
peerDependencies:
vue: ^3.5.40
'@tanstack/vue-query@5.101.4':
resolution: {integrity: sha512-UYjkUZhnWQIFGNb7SdgjCitAftNyYQfOIVUh6vBUQAG4SQKNMSBKeQERFDubpxLAMpIBJTaOrE8fM4c1kZcIGQ==}
peerDependencies:
@@ -5822,11 +5837,6 @@ packages:
peerDependencies:
valibot: ^1.4.0
'@vee-validate/zod@4.15.1':
resolution: {integrity: sha512-329Z4TDBE5Vx0FdbA8S4eR9iGCFFUNGbxjpQ20ff5b5wGueScjocUIx9JHPa79LTG06RnlUR4XogQsjN4tecKA==}
peerDependencies:
zod: ^3.24.0
'@vercel/nft@1.10.2':
resolution: {integrity: sha512-w+WyX5Ulmj4dtTZrxaulqrjaLZHSbnPzx75SJsTNYmotKsqn1JlLnDJa+lz5hn90HJofhl/2MAtw0mCrgM3qYw==}
engines: {node: '>=20'}
@@ -5949,9 +5959,6 @@ packages:
'@vue/devtools-api@6.6.4':
resolution: {integrity: sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==}
'@vue/devtools-api@7.7.10':
resolution: {integrity: sha512-KxtEpUOOpFz/qOGRrAwA36QF7DqIA+FXgCYit9mk9wjbaZt0sXOFz81ElOZtKA4HbWHUdwNjZHBFsFFyp5BZiA==}
'@vue/devtools-api@8.1.5':
resolution: {integrity: sha512-YJipMVAKe5wT5CWf5kTYCaNV7NMNjFVxJkIkJaJ4W/nCxEBzlZzrOsYKeCymdCrFZmBS/+wTWFoUs3Jf/Q6XSQ==}
@@ -5960,15 +5967,9 @@ packages:
peerDependencies:
vue: ^3.5.40
'@vue/devtools-kit@7.7.10':
resolution: {integrity: sha512-3WNi2Kq4tbpVbmhml7RiphmAt0279oh3fKNeWMQIrltfX8Q91b4i5PL8DtyNKdwmcsGrV4fg+erwWOmD05CLIw==}
'@vue/devtools-kit@8.1.5':
resolution: {integrity: sha512-FcSAxsi4eWuXLCB7Rv9lj0aIVHHPNVQ2BazGf4RJTc2JCqb4BQg0hk87ZFhminCfl+mD5OUI0rX2cgyu4kJOGA==}
'@vue/devtools-shared@7.7.10':
resolution: {integrity: sha512-wOPslzB8vTvpxwdaOcR2qAbwmuSP0L+rhpoC6Cf56V3Jip+HWb7PQQXOUPgBNQARpXsbQX/+mvi8kKucmBGRwQ==}
'@vue/devtools-shared@8.1.5':
resolution: {integrity: sha512-mhT4zcPFhF+Xk1O4BfhhrbXzpmfqY03fS6xGpcllbQG7lDjhQf8pQHcTIhqQIYx1hfwtHmk/6jM96ele0UxPqQ==}
@@ -6787,10 +6788,6 @@ packages:
resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
engines: {node: '>=12.13'}
copy-anything@4.0.5:
resolution: {integrity: sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==}
engines: {node: '>=18'}
core-js-compat@3.49.0:
resolution: {integrity: sha512-VQXt1jr9cBz03b331DFDCCP90b3fanciLkgiOoy8SBHy06gNf+vQ1A3WFLqG7I8TipYIKeYK9wxd0tUrvHcOZA==}
@@ -8238,10 +8235,6 @@ packages:
resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
engines: {node: '>=12.13'}
is-what@5.5.0:
resolution: {integrity: sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==}
engines: {node: '>=18'}
is-windows@1.0.2:
resolution: {integrity: sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==}
engines: {node: '>=0.10.0'}
@@ -9218,9 +9211,6 @@ packages:
pathe@2.0.3:
resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
perfect-debounce@1.0.0:
resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
perfect-debounce@2.1.0:
resolution: {integrity: sha512-LjgdTytVFXeUgtHZr9WYViYSM/g8MkcTPYDlPa3cDqMirHjKiSZPYd6DoL7pK8AJQr+uWkQvCjHNdiMqsrJs+g==}
@@ -10021,10 +10011,6 @@ packages:
spawndamnit@3.0.1:
resolution: {integrity: sha512-MmnduQUuHCoFckZoWnXsTg7JaiLBJrKFj9UI2MbRPGaJeVpsLcVBu6P/IGZovziM/YBsellCmsprgNA+w0CzVg==}
speakingurl@14.0.1:
resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
engines: {node: '>=0.10.0'}
sprintf-js@1.0.3:
resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
@@ -10213,10 +10199,6 @@ packages:
stylis@4.4.0:
resolution: {integrity: sha512-5Z9ZpRzfuH6l/UAvCPAPUo3665Nk2wLaZU3x+TLHKVzIz33+sbJqbtrYoC3KD4/uVOr2Zp+L0LySezP9OHV9yA==}
superjson@2.2.6:
resolution: {integrity: sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==}
engines: {node: '>=16'}
supports-color@10.2.2:
resolution: {integrity: sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==}
engines: {node: '>=18'}
@@ -10811,11 +10793,6 @@ packages:
peerDependencies:
vue: ^3.5.40
vee-validate@4.15.1:
resolution: {integrity: sha512-DkFsiTwEKau8VIxyZBGdO6tOudD+QoUBPuHj3e6QFqmbfCRj1ArmYWue9lEp6jLSWBIw4XPlDLjFIZNLdRAMSg==}
peerDependencies:
vue: ^3.5.40
verkit@0.1.2:
resolution: {integrity: sha512-WqkT8n3hqizuCu71W3bUzf5fjBmkbXcudsehe/NbxA8PgqoKnSOY5K0Ba2ckg1qaRaSpSz7as/n9K1R9JXjQKg==}
engines: {node: '>=18.12.0'}
@@ -11339,13 +11316,10 @@ packages:
resolution: {integrity: sha512-dSvYKdvLsAHCDqPOhIwk/q5CvuWtTB3Dgpoe0uVEFjTzIOAmsQpprX25InCvrvJsirEbu1OHyy67n/kAj1Sw/w==}
engines: {node: '>=18'}
zod-defaults@0.1.3:
resolution: {integrity: sha512-Cp4UjuVfXqwaOx8A5LlM0IRBZs8B7AXgF+XOZWF8CjMDhsY/Jki+y7VS4adVtQj9NNSsAPwylUlJp9INuxPEnA==}
zod-defaults@0.2.3:
resolution: {integrity: sha512-7pYkOH1/c+Ril5AZUYtsbhMkehkI8CMqzFZ7YZXfC9SMLRvZuLyonQE7BAIVSNxeTpqTZmW5BLxGSzWMnKNdIw==}
peerDependencies:
zod: ^3.23.8
zod@3.25.76:
resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
zod: ^4.1.12
zod@4.4.3:
resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
@@ -14292,16 +14266,34 @@ snapshots:
tailwindcss: 4.3.3
vite: 8.1.5(@types/node@26.1.1)(esbuild@0.28.1)(jiti@2.7.0)(less@4.7.0(supports-color@10.2.2))(sass-embedded@1.100.0)(sass@1.101.3)(terser@5.49.0)(yaml@2.9.0)
'@tanstack/devtools-event-client@0.4.4': {}
'@tanstack/form-core@1.33.2':
dependencies:
'@tanstack/devtools-event-client': 0.4.4
'@tanstack/pacer-lite': 0.1.1
'@tanstack/store': 0.11.0
'@tanstack/match-sorter-utils@8.19.4':
dependencies:
remove-accents: 0.5.0
'@tanstack/pacer-lite@0.1.1': {}
'@tanstack/query-core@5.101.4': {}
'@tanstack/store@0.11.0': {}
'@tanstack/virtual-core@3.17.5': {}
'@tanstack/vue-form@1.33.2(vue@3.5.40(typescript@6.0.3))':
dependencies:
'@tanstack/form-core': 1.33.2
'@tanstack/vue-store': 0.11.0(vue@3.5.40(typescript@6.0.3))
vue: 3.5.40(typescript@6.0.3)
transitivePeerDependencies:
- '@vue/composition-api'
'@tanstack/vue-query@5.101.4(vue@3.5.40(typescript@6.0.3))':
dependencies:
'@tanstack/match-sorter-utils': 8.19.4
@@ -14650,7 +14642,7 @@ snapshots:
'@types/ws@8.18.1':
dependencies:
'@types/node': 25.9.5
'@types/node': 26.1.1
'@typescript-eslint/parser@8.65.0(eslint@10.7.0(jiti@2.7.0)(supports-color@10.2.2))(supports-color@10.2.2)(typescript@6.0.3)':
dependencies:
@@ -14964,14 +14956,6 @@ snapshots:
dependencies:
valibot: 1.4.2(typescript@6.0.3)
'@vee-validate/zod@4.15.1(vue@3.5.40(typescript@6.0.3))(zod@3.25.76)':
dependencies:
type-fest: 4.41.0
vee-validate: 4.15.1(vue@3.5.40(typescript@6.0.3))
zod: 3.25.76
transitivePeerDependencies:
- vue
'@vercel/nft@1.10.2(rollup@4.62.2)(supports-color@10.2.2)':
dependencies:
'@mapbox/node-pre-gyp': 2.0.3(supports-color@10.2.2)
@@ -15184,10 +15168,6 @@ snapshots:
'@vue/devtools-api@6.6.4': {}
'@vue/devtools-api@7.7.10':
dependencies:
'@vue/devtools-kit': 7.7.10
'@vue/devtools-api@8.1.5':
dependencies:
'@vue/devtools-kit': 8.1.5
@@ -15198,16 +15178,6 @@ snapshots:
'@vue/devtools-shared': 8.1.5
vue: 3.5.40(typescript@6.0.3)
'@vue/devtools-kit@7.7.10':
dependencies:
'@vue/devtools-shared': 7.7.10
birpc: 2.9.0
hookable: 5.5.3
mitt: 3.0.1
perfect-debounce: 1.0.0
speakingurl: 14.0.1
superjson: 2.2.6
'@vue/devtools-kit@8.1.5':
dependencies:
'@vue/devtools-shared': 8.1.5
@@ -15215,10 +15185,6 @@ snapshots:
hookable: 5.5.3
perfect-debounce: 2.1.0
'@vue/devtools-shared@7.7.10':
dependencies:
rfdc: 1.4.1
'@vue/devtools-shared@8.1.5': {}
'@vue/language-core@3.3.7':
@@ -15784,7 +15750,7 @@ snapshots:
buffer-image-size@0.6.4:
dependencies:
'@types/node': 25.9.5
'@types/node': 26.1.1
buffer@6.0.3:
dependencies:
@@ -16068,10 +16034,6 @@ snapshots:
dependencies:
is-what: 4.1.16
copy-anything@4.0.5:
dependencies:
is-what: 5.5.0
core-js-compat@3.49.0:
dependencies:
browserslist: 4.28.7
@@ -17302,7 +17264,7 @@ snapshots:
happy-dom@20.11.0:
dependencies:
'@types/node': 25.9.5
'@types/node': 26.1.1
'@types/whatwg-mimetype': 3.0.2
'@types/ws': 8.18.1
buffer-image-size: 0.6.4
@@ -17672,8 +17634,6 @@ snapshots:
is-what@4.1.16: {}
is-what@5.5.0: {}
is-windows@1.0.2: {}
is-wsl@3.1.1:
@@ -18768,8 +18728,6 @@ snapshots:
pathe@2.0.3: {}
perfect-debounce@1.0.0: {}
perfect-debounce@2.1.0: {}
picocolors@1.1.1: {}
@@ -19645,8 +19603,6 @@ snapshots:
cross-spawn: 7.0.6
signal-exit: 4.1.0
speakingurl@14.0.1: {}
sprintf-js@1.0.3: {}
stackback@0.0.2: {}
@@ -19901,10 +19857,6 @@ snapshots:
stylis@4.4.0: {}
superjson@2.2.6:
dependencies:
copy-anything: 4.0.5
supports-color@10.2.2: {}
supports-color@7.2.0:
@@ -20483,12 +20435,6 @@ snapshots:
evtd: 0.2.4
vue: 3.5.40(typescript@6.0.3)
vee-validate@4.15.1(vue@3.5.40(typescript@6.0.3)):
dependencies:
'@vue/devtools-api': 7.7.10
type-fest: 4.41.0
vue: 3.5.40(typescript@6.0.3)
verkit@0.1.2: {}
vfile-message@4.0.3:
@@ -21189,11 +21135,9 @@ snapshots:
normalize-path: 3.0.0
readable-stream: 4.7.0
zod-defaults@0.1.3(zod@3.25.76):
zod-defaults@0.2.3(zod@4.4.3):
dependencies:
zod: 3.25.76
zod@3.25.76: {}
zod: 4.4.3
zod@4.4.3: {}