arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-22 16:00:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(FormField): wrap error with Presence to be animated

Browse Source
This commit is contained in:
Benjamin Canac
2025-05-14 12:57:40 +02:00
parent 717e35f098
commit 4fad9521b2
7 changed files with 191 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
test/components/__snapshots__/Form-vue.spec.ts.snap
View File

@@ -12,6 +12,7 @@ exports[`Form > custom validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -25,7 +26,8 @@ exports[`Form > custom validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
<div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
<!--v-if-->
</div>
</div>
</form>"
@@ -43,6 +45,7 @@ exports[`Form > custom validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -56,6 +59,7 @@ exports[`Form > custom validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -74,6 +78,7 @@ exports[`Form > joi validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -87,7 +92,8 @@ exports[`Form > joi validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
<div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
<!--v-if-->
</div>
</div>
</form>"
@@ -105,6 +111,7 @@ exports[`Form > joi validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -118,6 +125,7 @@ exports[`Form > joi validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -140,6 +148,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -153,7 +162,8 @@ exports[`Form > superstruct validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
<div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
<!--v-if-->
</div>
</div>
</form>"
@@ -171,6 +181,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -184,6 +195,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -202,6 +214,7 @@ exports[`Form > valibot validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -215,7 +228,8 @@ exports[`Form > valibot validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
<div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
<!--v-if-->
</div>
</div>
</form>"
@@ -233,6 +247,7 @@ exports[`Form > valibot validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -246,6 +261,7 @@ exports[`Form > valibot validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -264,6 +280,7 @@ exports[`Form > yup validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -277,7 +294,8 @@ exports[`Form > yup validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
<div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
<!--v-if-->
</div>
</div>
</form>"
@@ -295,6 +313,7 @@ exports[`Form > yup validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -308,6 +327,7 @@ exports[`Form > yup validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -326,6 +346,7 @@ exports[`Form > zod validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -339,7 +360,8 @@ exports[`Form > zod validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
<div id="v-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
<!--v-if-->
</div>
</div>
</form>"
@@ -357,6 +379,7 @@ exports[`Form > zod validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -370,6 +393,7 @@ exports[`Form > zod validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>

36
test/components/__snapshots__/Form.spec.ts.snap
View File

@@ -12,6 +12,7 @@ exports[`Form > custom validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -25,7 +26,8 @@ exports[`Form > custom validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
<div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
<!--v-if-->
</div>
</div>
</form>"
@@ -43,6 +45,7 @@ exports[`Form > custom validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -56,6 +59,7 @@ exports[`Form > custom validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -74,6 +78,7 @@ exports[`Form > joi validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -87,7 +92,8 @@ exports[`Form > joi validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
<div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
<!--v-if-->
</div>
</div>
</form>"
@@ -105,6 +111,7 @@ exports[`Form > joi validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -118,6 +125,7 @@ exports[`Form > joi validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -140,6 +148,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -153,7 +162,8 @@ exports[`Form > superstruct validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
<div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
<!--v-if-->
</div>
</div>
</form>"
@@ -171,6 +181,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -184,6 +195,7 @@ exports[`Form > superstruct validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -202,6 +214,7 @@ exports[`Form > valibot validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -215,7 +228,8 @@ exports[`Form > valibot validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
<div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
<!--v-if-->
</div>
</div>
</form>"
@@ -233,6 +247,7 @@ exports[`Form > valibot validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -246,6 +261,7 @@ exports[`Form > valibot validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -264,6 +280,7 @@ exports[`Form > yup validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -277,7 +294,8 @@ exports[`Form > yup validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
<div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
<!--v-if-->
</div>
</div>
</form>"
@@ -295,6 +313,7 @@ exports[`Form > yup validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -308,6 +327,7 @@ exports[`Form > yup validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -326,6 +346,7 @@ exports[`Form > zod validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -339,7 +360,8 @@ exports[`Form > zod validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
<div id="v-0-0-1-error" data-state="open" class="mt-2 text-error">Must be at least 8 characters</div>
<!--v-if-->
</div>
</div>
</form>"
@@ -357,6 +379,7 @@ exports[`Form > zod validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>
@@ -370,6 +393,7 @@ exports[`Form > zod validation works > without error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<!---->
<!--v-if-->
</div>
</div>

23
test/components/__snapshots__/FormField-vue.spec.ts.snap
View File

@@ -7,6 +7,7 @@ exports[`FormField > renders with as correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<!--v-if-->
</div>
</section>"
@@ -19,6 +20,7 @@ exports[`FormField > renders with class correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<!--v-if-->
</div>
</div>"
@@ -31,6 +33,7 @@ exports[`FormField > renders with default slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">Default slot
<!---->
<!--v-if-->
</div>
</div>"
@@ -43,6 +46,7 @@ exports[`FormField > renders with description slot correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Description slot</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -55,7 +59,8 @@ exports[`FormField > renders with error correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
<div id="v-0-0-error" data-state="open" class="mt-2 text-error">Username is already taken</div>
<!--v-if-->
</div>
</div>"
`;
@@ -67,7 +72,8 @@ exports[`FormField > renders with error slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
<div id="v-0-0-error" data-state="open" class="mt-2 text-error">Error slot</div>
<!--v-if-->
</div>
</div>"
`;
@@ -79,6 +85,7 @@ exports[`FormField > renders with help correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<div class="mt-2 text-muted">Username must be unique</div>
</div>
</div>"
@@ -91,6 +98,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<div class="mt-2 text-muted">Help slot</div>
</div>
</div>"
@@ -103,6 +111,7 @@ exports[`FormField > renders with hint correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<!--v-if-->
</div>
</div>"
@@ -115,6 +124,7 @@ exports[`FormField > renders with hint slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<!--v-if-->
</div>
</div>"
@@ -129,6 +139,7 @@ exports[`FormField > renders with label and description correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -143,6 +154,7 @@ exports[`FormField > renders with label slot correctly 1`] = `
<!--v-if-->
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -157,6 +169,7 @@ exports[`FormField > renders with required correctly 1`] = `
<!--v-if-->
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -171,6 +184,7 @@ exports[`FormField > renders with size lg correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -185,6 +199,7 @@ exports[`FormField > renders with size md correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -199,6 +214,7 @@ exports[`FormField > renders with size sm correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -213,6 +229,7 @@ exports[`FormField > renders with size xl correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -227,6 +244,7 @@ exports[`FormField > renders with size xs correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -239,6 +257,7 @@ exports[`FormField > renders with ui correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<!--v-if-->
</div>
</div>"

23
test/components/__snapshots__/FormField.spec.ts.snap
View File

@@ -7,6 +7,7 @@ exports[`FormField > renders with as correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<!--v-if-->
</div>
</section>"
@@ -19,6 +20,7 @@ exports[`FormField > renders with class correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<!--v-if-->
</div>
</div>"
@@ -31,6 +33,7 @@ exports[`FormField > renders with default slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">Default slot
<!---->
<!--v-if-->
</div>
</div>"
@@ -43,6 +46,7 @@ exports[`FormField > renders with description slot correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Description slot</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -55,7 +59,8 @@ exports[`FormField > renders with error correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
<div id="v-0-0-error" data-state="open" class="mt-2 text-error">Username is already taken</div>
<!--v-if-->
</div>
</div>"
`;
@@ -67,7 +72,8 @@ exports[`FormField > renders with error slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
<div id="v-0-0-error" data-state="open" class="mt-2 text-error">Error slot</div>
<!--v-if-->
</div>
</div>"
`;
@@ -79,6 +85,7 @@ exports[`FormField > renders with help correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<div class="mt-2 text-muted">Username must be unique</div>
</div>
</div>"
@@ -91,6 +98,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<div class="mt-2 text-muted">Help slot</div>
</div>
</div>"
@@ -103,6 +111,7 @@ exports[`FormField > renders with hint correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<!--v-if-->
</div>
</div>"
@@ -115,6 +124,7 @@ exports[`FormField > renders with hint slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<!--v-if-->
</div>
</div>"
@@ -129,6 +139,7 @@ exports[`FormField > renders with label and description correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -143,6 +154,7 @@ exports[`FormField > renders with label slot correctly 1`] = `
<!--v-if-->
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -157,6 +169,7 @@ exports[`FormField > renders with required correctly 1`] = `
<!--v-if-->
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -171,6 +184,7 @@ exports[`FormField > renders with size lg correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -185,6 +199,7 @@ exports[`FormField > renders with size md correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -199,6 +214,7 @@ exports[`FormField > renders with size sm correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -213,6 +229,7 @@ exports[`FormField > renders with size xl correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -227,6 +244,7 @@ exports[`FormField > renders with size xs correctly 1`] = `
<p id="v-0-0-description" class="text-muted">Enter your username</p>
</div>
<div class="mt-1 relative">
<!---->
<!--v-if-->
</div>
</div>"
@@ -239,6 +257,7 @@ exports[`FormField > renders with ui correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<!---->
<!--v-if-->
</div>
</div>"