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

feat(Form): support for valibot@33 (#132)

Browse Source
This commit is contained in:
Romain Hamel
2024-07-01 10:52:27 +02:00
committed by GitHub
parent 225d28d279
commit 20acc92eec
6 changed files with 95 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
test/components/Form.spec.ts
View File

@@ -106,14 +106,19 @@ describe('Form', () => {
}
],
['valibot', {
schema: valibot.objectAsync({
schema: valibot.object({
email: valibot.string(),
password: valibot.string([
valibot.minLength(8, 'Must be at least 8 characters')
])
password: valibot.pipe(valibot.string(), valibot.minLength(8, 'Must be at least 8 characters'))
})
}
],
['valibot safeParser', {
schema: valibot.safeParser(valibot.object({
email: valibot.string(),
password: valibot.pipe(valibot.string(), valibot.minLength(8, 'Must be at least 8 characters'))
}))
}
],
['custom', {
async validate(state: any) {
const errs = []

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

@@ -128,6 +128,68 @@ exports[`Form > renders with default slot correctly 1`] = `"<form id="1" class="
exports[`Form > renders with state correctly 1`] = `"<form id="0" class=""></form>"`;
exports[`Form > valibot safeParser validation works > with error 1`] = `
"<form id="42" class="">
<div class="text-sm">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>
</div>
<div class="text-sm">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-inset ring-red-500 dark:ring-red-400 focus-visible:ring-2 focus-visible:ring-red-500 dark:focus-visible:ring-red-400" value="short">
<!--v-if-->
<!--v-if-->
</div>
<p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
</div>
</div>
</form>"
`;
exports[`Form > valibot safeParser validation works > without error 1`] = `
"<form id="42" class="">
<div class="text-sm">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="email" type="text" name="email" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="bob@dylan.com">
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>
</div>
<div class="text-sm">
<div class="">
<!--v-if-->
<!--v-if-->
</div>
<div class="">
<div class="relative inline-flex items-center"><input id="password" type="text" name="password" class="w-full rounded-md border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 px-2.5 py-1.5 text-sm gap-1.5 shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400" value="validpassword">
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>
</div>
</form>"
`;
exports[`Form > valibot validation works > with error 1`] = `
"<form id="42" class="">
<div class="text-sm">