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

feat(Form): add superstruct validation (#2363)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Romain Hamel <rom.hml@gmail.com>
This commit is contained in:
rizkyyy
2024-10-19 19:07:22 +07:00
committed by GitHub
parent 7802aacf3f
commit 5385944359
10 changed files with 166 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,7 @@ import { z } from 'zod'
import * as yup from 'yup'
import Joi from 'joi'
import * as valibot from 'valibot'
import { object, string, nonempty, refine } from 'superstruct'
import ComponentRender from '../component-render'
import type { FormProps, FormSlots } from '../../src/runtime/components/Form.vue'
import { renderForm } from '../utils/form'
@@ -65,6 +66,15 @@ describe('Form', () => {
}))
}
],
['superstruct', {
schema: object({
email: nonempty(string()),
password: refine(string(), 'Password', (value) => {
if (value.length >= 8) return true
return '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="v-0-0" cla
exports[`Form > renders with state correctly 1`] = `"<form id="v-0-0" class=""></form>"`;
exports[`Form > superstruct 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-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" 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" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-error)] ring ring-inset ring-[var(--ui-error)]" value="short">
<!--v-if-->
<!--v-if-->
</div>
<p class="mt-2 text-[var(--ui-error)]">Must be at least 8 characters</p>
</div>
</div>
</form>"
`;
exports[`Form > superstruct 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-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" autocomplete="off" 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" autocomplete="off" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-[var(--ui-text-dimmed)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border-accented)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ui-primary)]" value="validpassword">
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>
</div>
</form>"
`;
exports[`Form > valibot safeParser validation works > with error 1`] = `
"<form id="42" class="">
<div class="text-sm">