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

feat(Form): new component (#4)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Romain Hamel
2024-03-19 16:09:12 +01:00
committed by GitHub
parent 1cec712fb8
commit de62676647
35 changed files with 2735 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

655
test/components/__snapshots__/Form.spec.ts.snap Normal file
View File

@@ -0,0 +1,655 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Form > custom validation works > with error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<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">Must be at least 8 characters</p>
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > custom validation works > without error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > joi validation works > with error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<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">Must be at least 8 characters</p>
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > joi validation works > without error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > renders basic case correctly 1`] = `"<form class=""></form>"`;
exports[`Form > renders with default slot correctly 1`] = `"<form class="">Form slot</form>"`;
exports[`Form > valibot validation works > with error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<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">Must be at least 8 characters</p>
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > valibot validation works > without error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > yup validation works > with error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<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">Must be at least 8 characters</p>
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > yup validation works > without error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > zod validation works > with error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<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">Must be at least 8 characters</p>
</transition-stub>
</div>
</div>
</form>"
`;
exports[`Form > zod validation works > without error 1`] = `
"<form class="">
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="email" type="text" name="email" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" class="">
<!--v-if-->
<!--v-if-->
</div>
<div data-v-0fd934a4="" class="">
<div class="relative"><input id="password" type="text" name="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
</div>
</div>
</form>"
`;

202
test/components/__snapshots__/FormField.spec.ts.snap Normal file
View File

@@ -0,0 +1,202 @@
// 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="">
<!--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>
</div>"
`;
exports[`FormField > renders with default slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" 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>
</div>"
`;
exports[`FormField > renders with description slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" 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>
</div>"
`;
exports[`FormField > renders with error correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" 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>
</div>"
`;
exports[`FormField > renders with error slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" 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>
</div>"
`;
exports[`FormField > renders with help correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" 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>
</div>"
`;
exports[`FormField > renders with help slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" 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>
</div>"
`;
exports[`FormField > renders with hint correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" 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>
</div>"
`;
exports[`FormField > renders with hint slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" 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>
</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>
<!--v-if-->
</div>
<p data-v-0fd934a4="" 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>
</div>"
`;
exports[`FormField > renders with label slot correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" 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>
</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>
<!--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>
</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>
<!--v-if-->
</div>
<p data-v-0fd934a4="" 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>
</div>"
`;
exports[`FormField > renders with ui correctly 1`] = `
"<div data-v-0fd934a4="" class="text-sm">
<div data-v-0fd934a4="" 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>
</div>"
`;

199
test/components/__snapshots__/Input.spec.ts.snap Normal file
View File

@@ -0,0 +1,199 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Input > renders basic case correctly 1`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with color correctly 1`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with disabled correctly 1`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400" disabled="">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with name correctly 1`] = `
"<div class="relative"><input type="text" name="username" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with placeholder correctly 1`] = `
"<div class="relative"><input type="text" placeholder="Enter your username" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with required correctly 1`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with size correctly 1`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with type correctly 1`] = `
"<div class="relative"><input type="password" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;
exports[`Input > renders with variant correctly 1`] = `
"<div class="relative"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 text-sm gap-x-1.5 px-2.5 py-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!-- span
v-if="(isLeading && leadingIconName) || $slots.leading"
:class="leadingWrapperIconClass"
>
<slot name="leading" :disabled="disabled" :loading="loading">
<UIcon :name="leadingIconName" :class="leadingIconClass" />
</slot>
</span>
<span
v-if="(isTrailing && trailingIconName) || $slots.trailing"
:class="trailingWrapperIconClass"
>
<slot name="trailing" :disabled="disabled" :loading="loading">
<UIcon :name="trailingIconName" :class="trailingIconClass" />
</slot>
</span -->
</div>"
`;