docs: use componentField in vee-validate examples - #1909
Conversation
📝 WalkthroughWalkthroughThe PR migrates VeeValidate demos and documentation to use ChangesVeeValidate migration
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
c9a2d88 to
55bd997
Compare
55bd997 to
28c5409
Compare
28c5409 to
32668a2
Compare
shadcn-vue form controls are Vue components with a modelValue prop bound internally via v-model. Binding `field` passes `value`, which falls through as a plain attribute and is overwritten by the component's own v-model, so initialValues never render. Typing still works, which hid the bug. Switch Input, Textarea, InputGroupInput, InputGroupTextarea, Select, Checkbox, RadioGroup and Switch to `v-bind="componentField"`. Checkbox arrays keep manual binding via the `value` and `handleChange` slot props, since one field owns the whole array. Also: - Add Component/Native tabs to Anatomy showing when each slot prop applies - Fix invalid `(checked | 'indeterminate')` handler signature - Add missing `type="checkbox"` to the Switch example - Move `:aria-invalid` from RadioGroupItem to RadioGroup - Drop `@blur` from Select; SelectRoot sets inheritAttrs: false and discards it - Realign stale showLineNumbers ranges Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
32668a2 to
68734a7
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/v4/components/demo/StepperForm.vue`:
- Around line 75-78: Update the VeeForm submit handler to be asynchronous and
await validate() before deciding whether to submit; use the returned valid value
rather than the potentially stale meta.valid, especially for the final step.
Preserve the existing submission flow for valid forms.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 4414aa8f-9b5a-49fa-b7b3-14d419a59e44
📒 Files selected for processing (13)
apps/v4/components/demo/NativeSelectFormDemo.vueapps/v4/components/demo/StepperForm.vueapps/v4/components/demo/VeeValidateArrayDemo.vueapps/v4/components/demo/VeeValidateCheckboxDemo.vueapps/v4/components/demo/VeeValidateComplexDemo.vueapps/v4/components/demo/VeeValidateDemo.vueapps/v4/components/demo/VeeValidateInputDemo.vueapps/v4/components/demo/VeeValidatePasswordDemo.vueapps/v4/components/demo/VeeValidateRadioGroupDemo.vueapps/v4/components/demo/VeeValidateSelectDemo.vueapps/v4/components/demo/VeeValidateSwitchDemo.vueapps/v4/components/demo/VeeValidateTextareaDemo.vueapps/v4/content/docs/forms/01.vee-validate.md
| <VeeForm | ||
| v-slot="{ meta, values, validate }" | ||
| as="" keep-values :validation-schema="toTypedSchema(formSchema[stepIndex - 1]!)" | ||
| > |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
# Inspect the installed dependency declaration and comparable validation flows.
fd -a 'package.json' . -E node_modules -E dist
rg -n -C 4 '"vee-validate"' --glob 'package.json'
rg -n -C 5 'validate\(\).*meta\.valid|await validate\(\)' apps/v4 --glob '*.vue'Repository: unovue/shadcn-vue
Length of output: 2008
🏁 Script executed:
#!/usr/bin/env bash
set -uo pipefail
echo "== package declarations =="
for f in package.json apps/v4/package.json; do
if [ -f "$f" ]; then
echo "--- $f ---"
jq '.dependencies, .devDependencies' "$f" 2>/dev/null | rg -n -C 2 'vee-validate' || true
fi
done
echo "== locate StepperForm.vue =="
fd -a 'StepperForm.vue' . -E node_modules -E dist
echo "== StepperForm outline and relevant section =="
file="$(fd 'StepperForm.vue' . -E node_modules -E dist | head -n 1)"
if [ -n "${file:-}" ]; then
echo "FILE=$file"
wc -l "$file"
sed -n '1,180p' "$file" | cat -n
fi
echo "== vee-validate usages in apps/v4 =="
rg -n -C 4 'validate\(|meta\.valid|VeeForm|toTypedSchema' apps/v4 --glob '*.vue' --glob '*.ts' --glob '*.js' || trueRepository: unovue/shadcn-vue
Length of output: 50373
🌐 Web query:
VueUse vee-validate toTypedSchema VeeForm validate function returns Promise valid meta.valid documentation
💡 Result:
In vee-validate, the validate function provided by useForm returns a Promise that resolves to an object containing the aggregated validation result of all fields [1]. Specifically, this object has the structure { valid: boolean, errors: Record<string, string> } [1]. Regarding meta.valid: - The meta.valid property is part of the form's metadata (accessible via useForm) and indicates the overall validity of the form [2][3]. - It is determined by whether the errors object is empty [2][3]. - Please note that meta.valid may be initially true (as it simply means no errors have been recorded yet) before the first validation run occurs [2][3]. For accurate UI states, it is often recommended to combine meta.valid with other flags like meta.dirty or meta.touched [2][3]. The toTypedSchema function is a utility provided by @vee-validate/yup or @vee-validate/zod (depending on your validation library) that transforms your validation schema into a format compatible with vee-validate [4][5][6]. It enables automatic type inference for your form values and ensures the schema is correctly interpreted by the validate function during form-level or field-level validation [4][5][7].
Citations:
- 1: https://vee-validate.logaretm.com/v4/api/use-form/
- 2: https://vee-validate.logaretm.com/v5/guide/components/validation/
- 3: https://vee-validate.logaretm.com/v5/guide/composition-api/handling-forms/
- 4: https://vee-validate.logaretm.com/v4/guide/composition-api/typed-schema/
- 5: https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation/
- 6: https://registry.npmjs.org/@vee-validate/zod
- 7: feat: Better Yup and Zod typing with output types and input inference logaretm/vee-validate#4064
Await step validation before submitting.
validate() validates async, but this handler checks meta.valid immediately. On the final step, an invalid final step can submit if meta.valid still reflects the previous step. Make the submit callback async, await validate(), and use the returned { valid }.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/v4/components/demo/StepperForm.vue` around lines 75 - 78, Update the
VeeForm submit handler to be asynchronous and await validate() before deciding
whether to submit; use the returned valid value rather than the potentially
stale meta.valid, especially for the final step. Preserve the existing
submission flow for valid forms.
2 participants
🔗 Linked issue
Close #1638
Close #1640
❓ Type of change
📚 Description
Clarify the vee-validate usage for Vue form components
📸 Screenshots (if appropriate)
📝 Checklist
Summary by CodeRabbit
New Features
Documentation