From 6f0ae9dc1dfa867911e6d01f622d25227ad637b8 Mon Sep 17 00:00:00 2001
From: dribble-njr <72367140+dribble-njr@users.noreply.github.com>
Date: Tue, 14 Jan 2025 19:29:01 +0800
Subject: [PATCH] refactor: integrate vee-validate for form validation (#517)
---
package-lock.json | 141 ++-
package.json | 5 +-
.../CodemirrorEditor/UploadImgDialog.vue | 1025 +++++++++--------
src/components/FormItem.vue | 17 +-
src/components/ui/input/Input.vue | 2 +-
5 files changed, 691 insertions(+), 499 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 5781048..2ccd2b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
"hasInstallScript": true,
"dependencies": {
"@aws-sdk/client-s3": "^3.716.0",
+ "@vee-validate/yup": "^4.15.0",
"@vueuse/core": "^12.0.0",
"axios": "^1.7.8",
"buffer-from": "^1.1.2",
@@ -38,9 +39,11 @@
"tailwindcss-animate": "^1.0.7",
"tiny-oss": "^0.5.1",
"uuid": "^11.0.3",
+ "vee-validate": "^4.15.0",
"vue": "^3.5.13",
"vue-pick-colors": "^1.7.8",
- "vue-sonner": "^1.3.0"
+ "vue-sonner": "^1.3.0",
+ "yup": "^1.6.1"
},
"devDependencies": {
"@antfu/eslint-config": "3.11.0",
@@ -4861,6 +4864,31 @@
"vite": "^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0"
}
},
+ "node_modules/@vee-validate/yup": {
+ "version": "4.15.0",
+ "resolved": "https://registry.npmjs.org/@vee-validate/yup/-/yup-4.15.0.tgz",
+ "integrity": "sha512-paK2ZdxZJRrUGwqaqf7KMNC+n5C7UGs7DofK7wZCza/zKT/QtFSxVYgopGoYYrbAfd6DpVmNpf/ouBuRdPBthA==",
+ "license": "MIT",
+ "dependencies": {
+ "type-fest": "^4.8.3",
+ "vee-validate": "4.15.0"
+ },
+ "peerDependencies": {
+ "yup": "^1.3.2"
+ }
+ },
+ "node_modules/@vee-validate/yup/node_modules/type-fest": {
+ "version": "4.32.0",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.32.0.tgz",
+ "integrity": "sha512-rfgpoi08xagF3JSdtJlCwMq9DGNDE0IMh3Mkpc1wUypg9vPi786AiqeBBKcqvIkq42azsBM85N490fyZjeUftw==",
+ "license": "(MIT OR CC0-1.0)",
+ "engines": {
+ "node": ">=16"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/@vitejs/plugin-vue": {
"version": "5.2.1",
"resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz",
@@ -5047,12 +5075,12 @@
}
},
"node_modules/@vue/devtools-kit": {
- "version": "7.6.5",
- "resolved": "https://registry.npmmirror.com/@vue/devtools-kit/-/devtools-kit-7.6.5.tgz",
- "integrity": "sha512-fLQhUwmUbtEDHW1SEiHUF5k2Ptw816As5ZUVb/SzrqkrJzXI8xjEIo8suNBe/N+ewdz/9m5ayeFH8fmcVIbr4Q==",
- "dev": true,
+ "version": "7.7.0",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.0.tgz",
+ "integrity": "sha512-5cvZ+6SA88zKC8XiuxUfqpdTwVjJbvYnQZY5NReh7qlSGPvVDjjzyEtW+gdzLXNSd8tStgOjAdMCpvDQamUXtA==",
+ "license": "MIT",
"dependencies": {
- "@vue/devtools-shared": "^7.6.5",
+ "@vue/devtools-shared": "^7.7.0",
"birpc": "^0.2.19",
"hookable": "^5.5.3",
"mitt": "^3.0.1",
@@ -5062,10 +5090,10 @@
}
},
"node_modules/@vue/devtools-shared": {
- "version": "7.6.5",
- "resolved": "https://registry.npmmirror.com/@vue/devtools-shared/-/devtools-shared-7.6.5.tgz",
- "integrity": "sha512-szsXQ0jlpjuFfmxb6F40qkSF4gtLC1W+dKRh/UiTulC+RekZsjqcN/qnVFkzqOO1YnzzShinZwfmv+MbfPJnpw==",
- "dev": true,
+ "version": "7.7.0",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.0.tgz",
+ "integrity": "sha512-jtlQY26R5thQxW9YQTpXbI0HoK0Wf9Rd4ekidOkRvSy7ChfK0kIU6vvcBtjj87/EcpeOSK49fZAicaFNJcoTcQ==",
+ "license": "MIT",
"dependencies": {
"rfdc": "^1.4.1"
}
@@ -5617,7 +5645,6 @@
"version": "0.2.19",
"resolved": "https://registry.npmmirror.com/birpc/-/birpc-0.2.19.tgz",
"integrity": "sha512-5WeXXAvTmitV1RqJFppT5QtUiz2p1mRSYU000Jkft5ZUCLJIk4uQriYNO50HknxKwM6jd8utNc66K1qGIwwWBQ==",
- "dev": true,
"funding": {
"url": "https://github.com/sponsors/antfu"
}
@@ -10371,8 +10398,7 @@
"node_modules/hookable": {
"version": "5.5.3",
"resolved": "https://registry.npmmirror.com/hookable/-/hookable-5.5.3.tgz",
- "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
- "dev": true
+ "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="
},
"node_modules/hosted-git-info": {
"version": "2.8.9",
@@ -13381,8 +13407,7 @@
"node_modules/mitt": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
- "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
- "dev": true
+ "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
},
"node_modules/mkdirp": {
"version": "1.0.4",
@@ -14588,8 +14613,7 @@
"node_modules/perfect-debounce": {
"version": "1.0.0",
"resolved": "https://registry.npmmirror.com/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
- "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
- "dev": true
+ "integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA=="
},
"node_modules/picocolors": {
"version": "1.1.1",
@@ -14966,6 +14990,12 @@
"node": ">= 6"
}
},
+ "node_modules/property-expr": {
+ "version": "2.0.6",
+ "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz",
+ "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==",
+ "license": "MIT"
+ },
"node_modules/proto-list": {
"version": "1.2.4",
"resolved": "https://registry.npmmirror.com/proto-list/-/proto-list-1.2.4.tgz",
@@ -16204,8 +16234,7 @@
"node_modules/rfdc": {
"version": "1.4.1",
"resolved": "https://registry.npmmirror.com/rfdc/-/rfdc-1.4.1.tgz",
- "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
- "dev": true
+ "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA=="
},
"node_modules/rimraf": {
"version": "2.4.5",
@@ -16883,7 +16912,6 @@
"version": "14.0.1",
"resolved": "https://registry.npmmirror.com/speakingurl/-/speakingurl-14.0.1.tgz",
"integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
- "dev": true,
"engines": {
"node": ">=0.10.0"
}
@@ -17208,7 +17236,6 @@
"version": "2.2.1",
"resolved": "https://registry.npmmirror.com/superjson/-/superjson-2.2.1.tgz",
"integrity": "sha512-8iGv75BYOa0xRJHK5vRLEjE2H/i4lulTjzpUXic3Eg8akftYjkmQDa8JARQ42rlczXyFR3IeRoeFCc7RxHsYZA==",
- "dev": true,
"dependencies": {
"copy-anything": "^3.0.2"
},
@@ -17220,7 +17247,6 @@
"version": "3.0.5",
"resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-3.0.5.tgz",
"integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
- "dev": true,
"dependencies": {
"is-what": "^4.1.8"
},
@@ -17235,7 +17261,6 @@
"version": "4.1.16",
"resolved": "https://registry.npmmirror.com/is-what/-/is-what-4.1.16.tgz",
"integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
- "dev": true,
"engines": {
"node": ">=12.13"
},
@@ -17431,6 +17456,12 @@
"node": ">=0.6.0"
}
},
+ "node_modules/tiny-case": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz",
+ "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==",
+ "license": "MIT"
+ },
"node_modules/tiny-oss": {
"version": "0.5.1",
"resolved": "https://registry.npmmirror.com/tiny-oss/-/tiny-oss-0.5.1.tgz",
@@ -17524,6 +17555,12 @@
"url": "https://opencollective.com/eslint"
}
},
+ "node_modules/toposort": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+ "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==",
+ "license": "MIT"
+ },
"node_modules/totalist": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/totalist/-/totalist-3.0.1.tgz",
@@ -18184,6 +18221,40 @@
"spdx-license-ids": "^3.0.0"
}
},
+ "node_modules/vee-validate": {
+ "version": "4.15.0",
+ "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.15.0.tgz",
+ "integrity": "sha512-PGJh1QCFwCBjbHu5aN6vB8macYVWrajbDvgo1Y/8fz9n/RVIkLmZCJDpUgu7+mUmCOPMxeyq7vXUOhbwAqdXcA==",
+ "license": "MIT",
+ "dependencies": {
+ "@vue/devtools-api": "^7.5.2",
+ "type-fest": "^4.8.3"
+ },
+ "peerDependencies": {
+ "vue": "^3.4.26"
+ }
+ },
+ "node_modules/vee-validate/node_modules/@vue/devtools-api": {
+ "version": "7.7.0",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.0.tgz",
+ "integrity": "sha512-bHEv6kT85BHtyGgDhE07bAUMAy7zpv6nnR004nSTd0wWMrAOtcrYoXO5iyr20Hkf5jR8obQOfS3byW+I3l2CCA==",
+ "license": "MIT",
+ "dependencies": {
+ "@vue/devtools-kit": "^7.7.0"
+ }
+ },
+ "node_modules/vee-validate/node_modules/type-fest": {
+ "version": "4.32.0",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.32.0.tgz",
+ "integrity": "sha512-rfgpoi08xagF3JSdtJlCwMq9DGNDE0IMh3Mkpc1wUypg9vPi786AiqeBBKcqvIkq42azsBM85N490fyZjeUftw==",
+ "license": "(MIT OR CC0-1.0)",
+ "engines": {
+ "node": ">=16"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/vite": {
"version": "5.4.11",
"resolved": "https://registry.npmmirror.com/vite/-/vite-5.4.11.tgz",
@@ -20348,6 +20419,30 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/yup": {
+ "version": "1.6.1",
+ "resolved": "https://registry.npmjs.org/yup/-/yup-1.6.1.tgz",
+ "integrity": "sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==",
+ "license": "MIT",
+ "dependencies": {
+ "property-expr": "^2.0.5",
+ "tiny-case": "^1.0.3",
+ "toposort": "^2.0.2",
+ "type-fest": "^2.19.0"
+ }
+ },
+ "node_modules/yup/node_modules/type-fest": {
+ "version": "2.19.0",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
+ "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+ "license": "(MIT OR CC0-1.0)",
+ "engines": {
+ "node": ">=12.20"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/zip-dir": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/zip-dir/-/zip-dir-2.0.0.tgz",
diff --git a/package.json b/package.json
index 27ff993..84826f9 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
},
"dependencies": {
"@aws-sdk/client-s3": "^3.716.0",
+ "@vee-validate/yup": "^4.15.0",
"@vueuse/core": "^12.0.0",
"axios": "^1.7.8",
"buffer-from": "^1.1.2",
@@ -50,9 +51,11 @@
"tailwindcss-animate": "^1.0.7",
"tiny-oss": "^0.5.1",
"uuid": "^11.0.3",
+ "vee-validate": "^4.15.0",
"vue": "^3.5.13",
"vue-pick-colors": "^1.7.8",
- "vue-sonner": "^1.3.0"
+ "vue-sonner": "^1.3.0",
+ "yup": "^1.6.1"
},
"devDependencies": {
"@antfu/eslint-config": "3.11.0",
diff --git a/src/components/CodemirrorEditor/UploadImgDialog.vue b/src/components/CodemirrorEditor/UploadImgDialog.vue
index 6e07eef..53de5a8 100644
--- a/src/components/CodemirrorEditor/UploadImgDialog.vue
+++ b/src/components/CodemirrorEditor/UploadImgDialog.vue
@@ -1,86 +1,197 @@
-
-