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

feat(Checkbox): new component (#67)

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

32
test/components/Checkbox.spec.ts Normal file
View File

@@ -0,0 +1,32 @@
import { describe, it, expect } from 'vitest'
import { UCheckbox } from '#components'
import type { TypeOf } from 'zod'
import ComponentRender from '../component-render'
import { defu } from 'defu'
describe('Checkbox', () => {
it.each([
['basic case', {}],
['with label', { props: { label: 'Label' } }],
['with slot', { slots: { default: () => 'Label slot' } }],
['with slot label', { slots: { label: () => 'Label slot' } }],
['with custom id', { props: { id: 'custom-id' } }],
['with custom value', { props: { value: 'custom-value' } }],
['with custom name', { props: { name: 'custom-name' } }],
['with disabled', { props: { disabled: true } }],
['with indeterminate', { props: { indeterminate: true } }],
['with help', { props: { label: 'Label', help: 'Help' } }],
['with required', { props: { label: 'Label', required: true } }],
['with custom color', { props: { label: 'Label', color: 'red' } }],
['with size 2xs', { props: { size: '2xs' as const } }],
['with size xs', { props: { size: 'xs' as const } }],
['with size sm', { props: { size: 'sm' as const } }],
['with size md', { props: { size: 'md' as const } }],
['with size lg', { props: { size: 'lg' as const } }],
['with size xl', { props: { size: 'xl' as const } }]
// @ts-ignore
])('renders %s correctly', async (nameOrHtml: string, options: TypeOf<typeof UCheckbox.props>) => {
const html = await ComponentRender(nameOrHtml, defu(options, { props: { id: 42 } }), UCheckbox)
expect(html).toMatchSnapshot()
})
})

4
test/components/Switch.spec.ts
View File

@@ -19,10 +19,12 @@ describe('Switch', () => {
['with uncheckedIcon', { props: { checkedIcon: 'i-heroicons-x-mark-20-solid' } }],
['with loading', { props: { loading: true } }],
['with loadingIcon', { props: { loading: true, loadingIcon: 'i-heroicons-sparkles' } }],
['with size 2xs', { props: { size: '2xs' as const } }],
['with size xs', { props: { size: 'xs' as const } }],
['with size sm', { props: { size: 'sm' as const } }],
['with size md', { props: { size: 'md' as const } }],
['with size lg', { props: { size: 'lg' as const } }]
['with size lg', { props: { size: 'lg' as const } }],
['with size xl', { props: { size: 'xl' as const } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props?: SwitchProps, slots?: any }) => {
const html = await ComponentRender(nameOrHtml, options, Switch)
expect(html).toMatchSnapshot()

2
test/components/__snapshots__/Avatar.spec.ts.snap
View File

@@ -4,7 +4,7 @@ exports[`Avatar > renders with alt correctly 1`] = `"<span class="inline-flex it
exports[`Avatar > renders with class correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle size-7 text-sm bg-white dark:bg-gray-900"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;
exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm"><!--v-if--><svg data-v-afd689a2="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon text-gray-500 dark:text-gray-400 shrink-0 size-3.5" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5m10.5-11.25h.008v.008h-.008zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0"></path></svg></span>"`;
exports[`Avatar > renders with icon correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-7 text-sm"><!--v-if--><svg data-v-afd689a2="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon text-gray-500 dark:text-gray-400 shrink-0" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5m10.5-11.25h.008v.008h-.008zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0"></path></svg></span>"`;
exports[`Avatar > renders with size 2xl correctly 1`] = `"<span class="inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-11 text-[22px]"><!--v-if--><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span>"`;

207
test/components/__snapshots__/Checkbox.spec.ts.snap Normal file
View File

@@ -0,0 +1,207 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Checkbox > renders basic case correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with custom color correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-red-500 dark:focus-visible:ring-red-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label</label>
<!--v-if-->
</div>
</div>"
`;
exports[`Checkbox > renders with custom id correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="custom-id" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with custom name correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with custom value correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with disabled correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked" data-disabled="" disabled="">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with help correctly 1`] = `
"<div class="relative flex items-start" help="Help">
<div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label</label>
<!--v-if-->
</div>
</div>"
`;
exports[`Checkbox > renders with indeterminate correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4 ring-2 ring-inset ring-primary-500 dark:ring-primary-400 bg-primary-500 dark:bg-primary-400" id="42" role="checkbox" type="button" aria-checked="mixed" aria-required="false" data-state="indeterminate"><span data-state="indeterminate" style="pointer-events: none;" class="flex"><svg data-v-afd689a2="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon size-full" width="1em" height="1em" viewBox="0 0 20 20"><path fill="currentColor" fill-rule="evenodd" d="M4 10a.75.75 0 0 1 .75-.75h10.5a.75.75 0 0 1 0 1.5H4.75A.75.75 0 0 1 4 10" clip-rule="evenodd"></path></svg></span></button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with label correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label</label>
<!--v-if-->
</div>
</div>"
`;
exports[`Checkbox > renders with required correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200 after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400">Label</label>
<!--v-if-->
</div>
</div>"
`;
exports[`Checkbox > renders with size 2xs correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-4"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-3" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with size lg correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-6"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-5" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with size md correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-[18px]" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with size sm correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with size xl correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-6"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-[22px]" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with size xs correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-4"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-3.5" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with slot correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<!--v-if-->
</div>"
`;
exports[`Checkbox > renders with slot label correctly 1`] = `
"<div class="relative flex items-start">
<div class="flex items-center h-5"><button class="shrink-0 text-white dark:text-gray-900 rounded ring ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus-visible:outline-0 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 size-4" id="42" role="checkbox" type="button" aria-checked="false" aria-required="false" data-state="unchecked">
<!---->
</button>
<!---->
</div>
<div class="ms-2 text-sm"><label for="42" class="font-medium text-gray-700 dark:text-gray-200">Label slot</label>
<!--v-if-->
</div>
</div>"
`;

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

@@ -2,34 +2,30 @@
exports[`Form > custom validation works > with error 1`] = `
"<form id="42" class="">
<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="">
<div 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 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<!--v-if-->
</div>
</div>
<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="">
<div 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 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!--v-if-->
<!--v-if-->
</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>
<p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
</div>
</div>
</form>"
@@ -37,34 +33,30 @@ exports[`Form > custom validation works > with error 1`] = `
exports[`Form > custom validation works > without error 1`] = `
"<form id="42" class="">
<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="">
<div 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 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<!--v-if-->
</div>
</div>
<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="">
<div 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 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<!--v-if-->
</div>
</div>
</form>"
@@ -72,34 +64,30 @@ exports[`Form > custom validation works > without error 1`] = `
exports[`Form > joi validation works > with error 1`] = `
"<form id="42" class="">
<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="">
<div 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 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<!--v-if-->
</div>
</div>
<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="">
<div 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 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!--v-if-->
<!--v-if-->
</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>
<p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
</div>
</div>
</form>"
@@ -107,34 +95,30 @@ exports[`Form > joi validation works > with error 1`] = `
exports[`Form > joi validation works > without error 1`] = `
"<form id="42" class="">
<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="">
<div 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 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<!--v-if-->
</div>
</div>
<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="">
<div 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 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<!--v-if-->
</div>
</div>
</form>"
@@ -146,34 +130,30 @@ exports[`Form > renders with default slot correctly 1`] = `"<form id="1" class="
exports[`Form > valibot validation works > with error 1`] = `
"<form id="42" class="">
<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="">
<div 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 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<!--v-if-->
</div>
</div>
<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="">
<div 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 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!--v-if-->
<!--v-if-->
</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>
<p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
</div>
</div>
</form>"
@@ -181,34 +161,30 @@ exports[`Form > valibot validation works > with error 1`] = `
exports[`Form > valibot validation works > without error 1`] = `
"<form id="42" class="">
<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="">
<div 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 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<!--v-if-->
</div>
</div>
<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="">
<div 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 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<!--v-if-->
</div>
</div>
</form>"
@@ -216,34 +192,30 @@ exports[`Form > valibot validation works > without error 1`] = `
exports[`Form > yup validation works > with error 1`] = `
"<form id="42" class="">
<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="">
<div 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 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<!--v-if-->
</div>
</div>
<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="">
<div 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 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!--v-if-->
<!--v-if-->
</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>
<p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
</div>
</div>
</form>"
@@ -251,34 +223,30 @@ exports[`Form > yup validation works > with error 1`] = `
exports[`Form > yup validation works > without error 1`] = `
"<form id="42" class="">
<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="">
<div 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 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<!--v-if-->
</div>
</div>
<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="">
<div 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 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<!--v-if-->
</div>
</div>
</form>"
@@ -286,34 +254,30 @@ exports[`Form > yup validation works > without error 1`] = `
exports[`Form > zod validation works > with error 1`] = `
"<form id="42" class="">
<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="">
<div 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 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<!--v-if-->
</div>
</div>
<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="">
<div 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 ring-inset ring-red-500 dark:ring-red-400 focus:ring-2 focus:ring-red-500 dark:focus:ring-red-400">
<!--v-if-->
<!--v-if-->
</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>
<p class="mt-2 text-red-500 dark:text-red-400">Must be at least 8 characters</p>
</div>
</div>
</form>"
@@ -321,34 +285,30 @@ exports[`Form > zod validation works > with error 1`] = `
exports[`Form > zod validation works > without error 1`] = `
"<form id="42" class="">
<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="">
<div 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 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<!--v-if-->
</div>
</div>
<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="">
<div 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 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
<!--v-if-->
<!--v-if-->
</div>
<transition-stub data-v-0fd934a4="" name="slide-fade" mode="out-in" appear="false" persisted="false" css="true">
<!--v-if-->
</transition-stub>
<!--v-if-->
</div>
</div>
</form>"

149
test/components/__snapshots__/FormField.spec.ts.snap
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>"
`;

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

@@ -60,8 +60,13 @@ exports[`Switch > renders with required correctly 1`] = `
<!---->"
`;
exports[`Switch > renders with size 2xs correctly 1`] = `
"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-3 w-5" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-2 data-[state=checked]:translate-x-2"></span></button>
<!---->"
`;
exports[`Switch > renders with size lg correctly 1`] = `
"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-7 w-[3.25rem]" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-6 data-[state=checked]:translate-x-6"></span></button>
"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-7 w-[52px]" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-6 data-[state=checked]:translate-x-6"></span></button>
<!---->"
`;
@@ -75,6 +80,11 @@ exports[`Switch > renders with size sm correctly 1`] = `
<!---->"
`;
exports[`Switch > renders with size xl correctly 1`] = `
"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-8 w-[60px]" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-7 data-[state=checked]:translate-x-7"></span></button>
<!---->"
`;
exports[`Switch > renders with size xs correctly 1`] = `
"<button class="peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700 data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 h-4 w-7" role="switch" type="button" aria-checked="false" aria-required="false" data-state="unchecked" value="on"><span data-state="unchecked" class="group pointer-events-none rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center size-3 data-[state=checked]:translate-x-3"></span></button>
<!---->"