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

fix(FormField): use div for error and help slots

Browse Source
This commit is contained in:
Benjamin Canac
2025-05-13 17:40:11 +02:00
parent b9adc83e78
commit 459a0410ab
5 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/runtime/components/FormField.vue
View File

@@ -115,16 +115,16 @@ provide(formFieldInjectionKey, computed(() => ({
<div :class="[(label || !!slots.label || description || !!slots.description) && ui.container({ class: props.ui?.container })]">
<slot :error="error" />
<p v-if="(typeof error === 'string' && error) || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
<div v-if="(typeof error === 'string' && error) || !!slots.error" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })">
<slot name="error" :error="error">
{{ error }}
</slot>
</p>
<p v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
</div>
<div v-else-if="help || !!slots.help" :class="ui.help({ class: props.ui?.help })">
<slot name="help" :help="help">
{{ help }}
</slot>
</p>
</div>
</div>
</Primitive>
</template>

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

@@ -25,7 +25,7 @@ exports[`Form > custom validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<p id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
</div>
</div>
</form>"
@@ -87,7 +87,7 @@ exports[`Form > joi validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<p id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
</div>
</div>
</form>"
@@ -153,7 +153,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<p id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
</div>
</div>
</form>"
@@ -215,7 +215,7 @@ exports[`Form > valibot validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<p id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
</div>
</div>
</form>"
@@ -277,7 +277,7 @@ exports[`Form > yup validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<p id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
</div>
</div>
</form>"
@@ -339,7 +339,7 @@ exports[`Form > zod validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<p id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
<div id="v-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
</div>
</div>
</form>"

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

@@ -25,7 +25,7 @@ exports[`Form > custom validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<p id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
</div>
</div>
</form>"
@@ -87,7 +87,7 @@ exports[`Form > joi validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<p id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
</div>
</div>
</form>"
@@ -153,7 +153,7 @@ exports[`Form > superstruct validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<p id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
</div>
</div>
</form>"
@@ -215,7 +215,7 @@ exports[`Form > valibot validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<p id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
</div>
</div>
</form>"
@@ -277,7 +277,7 @@ exports[`Form > yup validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<p id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
</div>
</div>
</form>"
@@ -339,7 +339,7 @@ exports[`Form > zod validation works > with error 1`] = `
<!--v-if-->
<!--v-if-->
</div>
<p id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</p>
<div id="v-0-0-1-error" class="mt-2 text-error">Must be at least 8 characters</div>
</div>
</div>
</form>"

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

@@ -55,7 +55,7 @@ exports[`FormField > renders with error correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<p id="v-0-0-error" class="mt-2 text-error">Username is already taken</p>
<div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
</div>
</div>"
`;
@@ -67,7 +67,7 @@ exports[`FormField > renders with error slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<p id="v-0-0-error" class="mt-2 text-error">Error slot</p>
<div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
</div>
</div>"
`;
@@ -79,7 +79,7 @@ exports[`FormField > renders with help correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<p class="mt-2 text-muted">Username must be unique</p>
<div class="mt-2 text-muted">Username must be unique</div>
</div>
</div>"
`;
@@ -91,7 +91,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<p class="mt-2 text-muted">Help slot</p>
<div class="mt-2 text-muted">Help slot</div>
</div>
</div>"
`;

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

@@ -55,7 +55,7 @@ exports[`FormField > renders with error correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<p id="v-0-0-error" class="mt-2 text-error">Username is already taken</p>
<div id="v-0-0-error" class="mt-2 text-error">Username is already taken</div>
</div>
</div>"
`;
@@ -67,7 +67,7 @@ exports[`FormField > renders with error slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<p id="v-0-0-error" class="mt-2 text-error">Error slot</p>
<div id="v-0-0-error" class="mt-2 text-error">Error slot</div>
</div>
</div>"
`;
@@ -79,7 +79,7 @@ exports[`FormField > renders with help correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<p class="mt-2 text-muted">Username must be unique</p>
<div class="mt-2 text-muted">Username must be unique</div>
</div>
</div>"
`;
@@ -91,7 +91,7 @@ exports[`FormField > renders with help slot correctly 1`] = `
<!--v-if-->
</div>
<div class="">
<p class="mt-2 text-muted">Help slot</p>
<div class="mt-2 text-muted">Help slot</div>
</div>
</div>"
`;