diff --git a/package-lock.json b/package-lock.json
index 1ae87dc..351df0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"@tanstack/vue-table": "^8.21.2",
+ "@vee-validate/zod": "^4.15.1",
"@vueuse/components": "^12.5.0",
"@vueuse/core": "^12.8.2",
"@vueuse/integrations": "^13.6.0",
@@ -23,14 +24,16 @@
"pinia": "^2.3.1",
"qrcode": "^1.5.4",
"radix-vue": "^1.9.13",
- "reka-ui": "^2.4.1",
+ "reka-ui": "^2.5.0",
"tailwind-merge": "^2.6.0",
"tailwindcss-animate": "^1.0.7",
"unique-names-generator": "^4.7.1",
+ "vee-validate": "^4.15.1",
"vue": "^3.5.13",
"vue-i18n": "^9.14.2",
"vue-router": "^4.5.0",
- "vue-sonner": "^2.0.2"
+ "vue-sonner": "^2.0.2",
+ "zod": "^3.25.76"
},
"devDependencies": {
"@electron-forge/cli": "^7.7.0",
@@ -5165,6 +5168,31 @@
"@types/node": "*"
}
},
+ "node_modules/@vee-validate/zod": {
+ "version": "4.15.1",
+ "resolved": "https://registry.npmjs.org/@vee-validate/zod/-/zod-4.15.1.tgz",
+ "integrity": "sha512-329Z4TDBE5Vx0FdbA8S4eR9iGCFFUNGbxjpQ20ff5b5wGueScjocUIx9JHPa79LTG06RnlUR4XogQsjN4tecKA==",
+ "license": "MIT",
+ "dependencies": {
+ "type-fest": "^4.8.3",
+ "vee-validate": "4.15.1"
+ },
+ "peerDependencies": {
+ "zod": "^3.24.0"
+ }
+ },
+ "node_modules/@vee-validate/zod/node_modules/type-fest": {
+ "version": "4.41.0",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+ "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+ "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.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.1.tgz",
@@ -5275,6 +5303,30 @@
"integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
"license": "MIT"
},
+ "node_modules/@vue/devtools-kit": {
+ "version": "7.7.7",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.7.7.tgz",
+ "integrity": "sha512-wgoZtxcTta65cnZ1Q6MbAfePVFxfM+gq0saaeytoph7nEa7yMXoi6sCPy4ufO111B9msnw0VOWjPEFCXuAKRHA==",
+ "license": "MIT",
+ "dependencies": {
+ "@vue/devtools-shared": "^7.7.7",
+ "birpc": "^2.3.0",
+ "hookable": "^5.5.3",
+ "mitt": "^3.0.1",
+ "perfect-debounce": "^1.0.0",
+ "speakingurl": "^14.0.1",
+ "superjson": "^2.2.2"
+ }
+ },
+ "node_modules/@vue/devtools-shared": {
+ "version": "7.7.7",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.7.7.tgz",
+ "integrity": "sha512-+udSj47aRl5aKb0memBvcUG9koarqnxNM5yjuREvqwK6T3ap4mn3Zqqc17QrBFTqSMjr3HK1cvStEZpMDpfdyw==",
+ "license": "MIT",
+ "dependencies": {
+ "rfdc": "^1.4.1"
+ }
+ },
"node_modules/@vue/language-core": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.2.0.tgz",
@@ -5905,6 +5957,15 @@
],
"license": "MIT"
},
+ "node_modules/birpc": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/birpc/-/birpc-2.5.0.tgz",
+ "integrity": "sha512-VSWO/W6nNQdyP520F1mhf+Lc2f8pjGQOtoHHm7Ze8Go1kX7akpVIrtTa0fn+HB0QJEDVacl6aO08YE0PgXfdnQ==",
+ "license": "MIT",
+ "funding": {
+ "url": "https://github.com/sponsors/antfu"
+ }
+ },
"node_modules/bl": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -6535,6 +6596,21 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/copy-anything": {
+ "version": "3.0.5",
+ "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz",
+ "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==",
+ "license": "MIT",
+ "dependencies": {
+ "is-what": "^4.1.8"
+ },
+ "engines": {
+ "node": ">=12.13"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/mesqueeb"
+ }
+ },
"node_modules/core-js-compat": {
"version": "3.40.0",
"resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.40.0.tgz",
@@ -8760,6 +8836,12 @@
"he": "bin/he"
}
},
+ "node_modules/hookable": {
+ "version": "5.5.3",
+ "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
+ "integrity": "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==",
+ "license": "MIT"
+ },
"node_modules/http_ece": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/http_ece/-/http_ece-1.2.0.tgz",
@@ -9467,6 +9549,18 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/is-what": {
+ "version": "4.1.16",
+ "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.16.tgz",
+ "integrity": "sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=12.13"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/mesqueeb"
+ }
+ },
"node_modules/is-wsl": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -10741,6 +10835,12 @@
"dev": true,
"license": "ISC"
},
+ "node_modules/mitt": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz",
+ "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
+ "license": "MIT"
+ },
"node_modules/mkdirp": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -11367,7 +11467,6 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
"integrity": "sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==",
- "dev": true,
"license": "MIT"
},
"node_modules/picocolors": {
@@ -12065,9 +12164,9 @@
}
},
"node_modules/reka-ui": {
- "version": "2.4.1",
- "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.4.1.tgz",
- "integrity": "sha512-NB7DrCsODN8MH02BWtgiExygfFcuuZ5/PTn6fMgjppmFHqePvNhmSn1LEuF35nel6PFbA4v+gdj0IoGN1yZ+vw==",
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/reka-ui/-/reka-ui-2.5.0.tgz",
+ "integrity": "sha512-81aMAmJeVCy2k0E6x7n1kypDY6aM1ldLis5+zcdV1/JtoAlSDck5OBsyLRJU9CfgbrQp1ImnRnBSmC4fZ2fkZQ==",
"license": "MIT",
"dependencies": {
"@floating-ui/dom": "^1.6.13",
@@ -12202,7 +12301,6 @@
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
"integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
- "dev": true,
"license": "MIT"
},
"node_modules/rimraf": {
@@ -12927,6 +13025,15 @@
"dev": true,
"license": "CC0-1.0"
},
+ "node_modules/speakingurl": {
+ "version": "14.0.1",
+ "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz",
+ "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==",
+ "license": "BSD-3-Clause",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/sprintf-js": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
@@ -13159,6 +13266,18 @@
"node": ">= 8.0"
}
},
+ "node_modules/superjson": {
+ "version": "2.2.2",
+ "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.2.tgz",
+ "integrity": "sha512-5JRxVqC8I8NuOUjzBbvVJAKNM8qoVuH0O77h4WInc/qC2q5IreqKxYwgkga3PfA22OayK2ikceb/B26dztPl+Q==",
+ "license": "MIT",
+ "dependencies": {
+ "copy-anything": "^3.0.2"
+ },
+ "engines": {
+ "node": ">=16"
+ }
+ },
"node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -13809,6 +13928,40 @@
"spdx-expression-parse": "^3.0.0"
}
},
+ "node_modules/vee-validate": {
+ "version": "4.15.1",
+ "resolved": "https://registry.npmjs.org/vee-validate/-/vee-validate-4.15.1.tgz",
+ "integrity": "sha512-DkFsiTwEKau8VIxyZBGdO6tOudD+QoUBPuHj3e6QFqmbfCRj1ArmYWue9lEp6jLSWBIw4XPlDLjFIZNLdRAMSg==",
+ "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.7",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.7.7.tgz",
+ "integrity": "sha512-lwOnNBH2e7x1fIIbVT7yF5D+YWhqELm55/4ZKf45R9T8r9dE2AIOy8HKjfqzGsoTHFbWbr337O4E0A0QADnjBg==",
+ "license": "MIT",
+ "dependencies": {
+ "@vue/devtools-kit": "^7.7.7"
+ }
+ },
+ "node_modules/vee-validate/node_modules/type-fest": {
+ "version": "4.41.0",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
+ "integrity": "sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==",
+ "license": "(MIT OR CC0-1.0)",
+ "engines": {
+ "node": ">=16"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/vite": {
"version": "6.3.5",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
@@ -14742,6 +14895,15 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
+ },
+ "node_modules/zod": {
+ "version": "3.25.76",
+ "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+ "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+ "license": "MIT",
+ "funding": {
+ "url": "https://github.com/sponsors/colinhacks"
+ }
}
}
}
diff --git a/package.json b/package.json
index ae6f91e..a6885cc 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
},
"dependencies": {
"@tanstack/vue-table": "^8.21.2",
+ "@vee-validate/zod": "^4.15.1",
"@vueuse/components": "^12.5.0",
"@vueuse/core": "^12.8.2",
"@vueuse/integrations": "^13.6.0",
@@ -32,14 +33,16 @@
"pinia": "^2.3.1",
"qrcode": "^1.5.4",
"radix-vue": "^1.9.13",
- "reka-ui": "^2.4.1",
+ "reka-ui": "^2.5.0",
"tailwind-merge": "^2.6.0",
"tailwindcss-animate": "^1.0.7",
"unique-names-generator": "^4.7.1",
+ "vee-validate": "^4.15.1",
"vue": "^3.5.13",
"vue-i18n": "^9.14.2",
"vue-router": "^4.5.0",
- "vue-sonner": "^2.0.2"
+ "vue-sonner": "^2.0.2",
+ "zod": "^3.25.76"
},
"devDependencies": {
"@electron-forge/cli": "^7.7.0",
diff --git a/src/components/ui/form/FormControl.vue b/src/components/ui/form/FormControl.vue
new file mode 100644
index 0000000..f3e0717
--- /dev/null
+++ b/src/components/ui/form/FormControl.vue
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
diff --git a/src/components/ui/form/FormDescription.vue b/src/components/ui/form/FormDescription.vue
new file mode 100644
index 0000000..cda51ef
--- /dev/null
+++ b/src/components/ui/form/FormDescription.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
diff --git a/src/components/ui/form/FormItem.vue b/src/components/ui/form/FormItem.vue
new file mode 100644
index 0000000..485058e
--- /dev/null
+++ b/src/components/ui/form/FormItem.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
diff --git a/src/components/ui/form/FormLabel.vue b/src/components/ui/form/FormLabel.vue
new file mode 100644
index 0000000..69f7286
--- /dev/null
+++ b/src/components/ui/form/FormLabel.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
diff --git a/src/components/ui/form/FormMessage.vue b/src/components/ui/form/FormMessage.vue
new file mode 100644
index 0000000..8b6131e
--- /dev/null
+++ b/src/components/ui/form/FormMessage.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
diff --git a/src/components/ui/form/index.ts b/src/components/ui/form/index.ts
new file mode 100644
index 0000000..1eb05f1
--- /dev/null
+++ b/src/components/ui/form/index.ts
@@ -0,0 +1,7 @@
+export { default as FormControl } from "./FormControl.vue"
+export { default as FormDescription } from "./FormDescription.vue"
+export { default as FormItem } from "./FormItem.vue"
+export { default as FormLabel } from "./FormLabel.vue"
+export { default as FormMessage } from "./FormMessage.vue"
+export { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+export { Form, Field as FormField, FieldArray as FormFieldArray } from "vee-validate"
diff --git a/src/components/ui/form/injectionKeys.ts b/src/components/ui/form/injectionKeys.ts
new file mode 100644
index 0000000..42542a9
--- /dev/null
+++ b/src/components/ui/form/injectionKeys.ts
@@ -0,0 +1,4 @@
+import type { InjectionKey } from "vue"
+
+export const FORM_ITEM_INJECTION_KEY
+ = Symbol() as InjectionKey
diff --git a/src/components/ui/form/useFormField.ts b/src/components/ui/form/useFormField.ts
new file mode 100644
index 0000000..4d98915
--- /dev/null
+++ b/src/components/ui/form/useFormField.ts
@@ -0,0 +1,30 @@
+import { FieldContextKey, useFieldError, useIsFieldDirty, useIsFieldTouched, useIsFieldValid } from "vee-validate"
+import { inject } from "vue"
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+
+export function useFormField() {
+ const fieldContext = inject(FieldContextKey)
+ const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
+
+ if (!fieldContext)
+ throw new Error("useFormField should be used within ")
+
+ const { name } = fieldContext
+ const id = fieldItemContext
+
+ const fieldState = {
+ valid: useIsFieldValid(name),
+ isDirty: useIsFieldDirty(name),
+ isTouched: useIsFieldTouched(name),
+ error: useFieldError(name),
+ }
+
+ return {
+ id,
+ name,
+ formItemId: `${id}-form-item`,
+ formDescriptionId: `${id}-form-item-description`,
+ formMessageId: `${id}-form-item-message`,
+ ...fieldState,
+ }
+}