feat(Checkbox): new component (#67)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2024-03-27 12:00:15 +01:00
committed by GitHub
parent 8fd369372b
commit bfd5988358
34 changed files with 718 additions and 303 deletions

View File

@@ -1,202 +1,175 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`FormField > renders with class correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm relative">
<div data-v-0fd934a4="" class="">
"<div class="text-sm relative">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<div class="">
<!--v-if-->
</div>
</div>"
`;
exports[`FormField > renders with default slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
"<div class="text-sm">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">Default slot<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<div class="">Default slot
<!--v-if-->
</div>
</div>"
`;
exports[`FormField > renders with description slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
"<div class="text-sm">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<div class="">
<!--v-if-->
</div>
</div>"
`;
exports[`FormField > renders with error correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
"<div class="text-sm">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<p data-v-0fd934a4="" class="mt-2 text-red-500 dark:text-red-400">Username is already taken</p>
</transition-stub>
<div class="">
<p class="mt-2 text-red-500 dark:text-red-400">Username is already taken</p>
</div>
</div>"
`;
exports[`FormField > renders with error slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
"<div class="text-sm">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<div class="">
<!--v-if-->
</div>
</div>"
`;
exports[`FormField > renders with help correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
"<div class="text-sm">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<p data-v-0fd934a4="" class="mt-2 text-gray-500 dark:text-gray-400">Username must be unique</p>
</transition-stub>
<div class="">
<p class="mt-2 text-gray-500 dark:text-gray-400">Username must be unique</p>
</div>
</div>"
`;
exports[`FormField > renders with help slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
"<div class="text-sm">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<div class="">
<!--v-if-->
</div>
</div>"
`;
exports[`FormField > renders with hint correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
"<div class="text-sm">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<div class="">
<!--v-if-->
</div>
</div>"
`;
exports[`FormField > renders with hint slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
"<div class="text-sm">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<div class="">
<!--v-if-->
</div>
</div>"
`;
exports[`FormField > renders with label and description correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<div data-v-0fd934a4="" class="flex content-center items-center justify-between"><label data-v-0fd934a4="" for="0" class="block font-medium text-gray-700 dark:text-gray-200">Username</label>
"<div class="text-sm">
<div class="">
<div class="flex content-center items-center justify-between"><label for="0" class="block font-medium text-gray-700 dark:text-gray-200">Username</label>
<!--v-if-->
</div>
<p data-v-0fd934a4="" class="text-gray-500 dark:text-gray-400">Enter your username</p>
<p class="text-gray-500 dark:text-gray-400">Enter your username</p>
</div>
<div data-v-0fd934a4="" class="mt-1 relative">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<div class="mt-1 relative">
<!--v-if-->
</div>
</div>"
`;
exports[`FormField > renders with label slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
"<div class="text-sm">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<div class="">
<!--v-if-->
</div>
</div>"
`;
exports[`FormField > renders with required correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<div data-v-0fd934a4="" class="flex content-center items-center justify-between"><label data-v-0fd934a4="" for="2" class="block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Username</label>
"<div class="text-sm">
<div class="">
<div class="flex content-center items-center justify-between"><label for="2" class="block font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Username</label>
<!--v-if-->
</div>
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="mt-1 relative">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<div class="mt-1 relative">
<!--v-if-->
</div>
</div>"
`;
exports[`FormField > renders with size correctly 1`] = `
"<div data-v-0fd934a4="" class="text-base">
<div data-v-0fd934a4="" class="">
<div data-v-0fd934a4="" class="flex content-center items-center justify-between"><label data-v-0fd934a4="" for="1" class="block font-medium text-gray-700 dark:text-gray-200">Username</label>
"<div class="text-base">
<div class="">
<div class="flex content-center items-center justify-between"><label for="1" class="block font-medium text-gray-700 dark:text-gray-200">Username</label>
<!--v-if-->
</div>
<p data-v-0fd934a4="" class="text-gray-500 dark:text-gray-400">Enter your username</p>
<p class="text-gray-500 dark:text-gray-400">Enter your username</p>
</div>
<div data-v-0fd934a4="" class="mt-1 relative">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<div class="mt-1 relative">
<!--v-if-->
</div>
</div>"
`;
exports[`FormField > renders with ui correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
"<div class="text-sm">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<div class="">
<!--v-if-->
</div>
</div>"
`;